/* ── Neurodiversity Tools database ─────────────────────────────
   Built on the shared neurodiversity.tools tokens (tokens.css, vendored from
   style-guide/): warm ink on cream, BN Axel Grotesk display, Atkinson Hyperlegible
   body, no brand accent, radius by role, a designed dark theme.

   The visual grammar (style-guide decisions, round 5):
   · hue belongs to the four instruments of change, always with a texture
     and an icon, never to the kind of thing;
   · kind is shape: filled ink = cognition, outlined = extension,
     dashed = strategy, double line = tool;
   · status and errors are shape in ink. No red, no green, no score bars.
──────────────────────────────────────────────────────────────── */
@font-face { font-family: 'BN Axel Grotesk'; src: url('fonts/BNAxelGrotesk-Bold.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('fonts/atkinson/atkinson-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('fonts/atkinson/atkinson-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('fonts/atkinson/atkinson-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --font-body: var(--nd-font-body);
  --font-display: var(--nd-font-display);
  --bg: var(--nd-ground);
  --fg: var(--nd-ink);
  --muted: var(--nd-ink-muted);
  --card: var(--nd-surface);
  --border: var(--nd-line);
  --sand: var(--nd-sand);
  --page: 1180px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); font-size: var(--nd-text-base); line-height: 1.55; background: var(--bg); color: var(--fg); }
a { color: var(--fg); text-underline-offset: 2px; }
a:hover { color: var(--nd-ink-soft); }
p { margin: 0 0 .75rem; }
img { max-width: 100%; }
[hidden] { display: none !important; }

h1, h2, .display { font-family: var(--font-display); font-weight: 400; text-transform: var(--nd-display-case); letter-spacing: var(--nd-tracking-display); line-height: 1.05; margin: 0; }
h3, h4 { font-family: var(--font-body); font-weight: 700; margin: 0; }
h3.display { font-family: var(--font-display); font-weight: 400; }
h1 { font-size: var(--nd-text-display); }
h2 { font-size: var(--nd-text-2xl); }

.icon { flex: none; vertical-align: -0.15em; }
.small { font-size: var(--nd-text-xs); }
.muted { color: var(--muted); }
.label, .filter-label, .filter-group label, dt { font-size: var(--nd-text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.self-start { align-self: flex-start; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--fg); color: var(--nd-on-ink); padding: .6rem 1rem; border-radius: 0 0 var(--nd-radius-card) 0; font-weight: 700; text-decoration: none; }
.skip-link:focus { left: 0; color: var(--nd-on-ink); }
main:focus { outline: none; }

/* ── Header ──────────────────────────────────────────────────
   Two rows. The first holds the wordmark, search and the reader's own
   controls; the second is the nav. */
.site-header { background: var(--bg); border-bottom: 1px solid var(--border); padding: .9rem 1.5rem .7rem; }
.header-inner { max-width: var(--page); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.wordmark { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--fg); }
.wordmark-text { font-family: var(--font-display); text-transform: var(--nd-display-case); letter-spacing: var(--nd-tracking-display); font-size: var(--nd-text-xl); line-height: 1; }
/* The blob is the self: the one organic shape, in the self orange. */
.blob { width: 24px; height: 24px; border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%; background: var(--nd-self); border: 2px solid var(--fg); display: inline-block; flex: none; }

/* Cognitions, Extensions, Tools, Strategies: always the four, always on one
   line. The nav never wraps inside itself; when the header runs out of room
   the nav takes a row of its own and the type steps down before anything
   else gives way. */
.site-nav { order: 3; flex: 1 0 100%; display: flex; flex-wrap: nowrap; gap: .25rem; margin: .2rem 0 0; }
.site-nav a { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; min-height: 24px; padding: .4rem .9rem; border-radius: var(--nd-radius-pill); font-family: var(--font-display); text-transform: var(--nd-display-case); letter-spacing: .05em; font-size: var(--nd-text-sm); line-height: 1.2; color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--fg); background: var(--sand); }
.site-nav a[aria-current="page"] { background: var(--fg); color: var(--nd-on-ink); }
.header-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.header-actions .btn, .header-search .search-toggle { padding: .4rem .8rem; font-size: var(--nd-text-xs); min-height: 38px; }

/* Search in the header. The field's edge is muted ink so it reads as a field
   on the band in both themes; focus draws the ink ring round the whole field. */
.header-search { flex: 1 1 16rem; display: flex; justify-content: center; min-width: 0; }
.header-search > .search-toggle { display: none; }
.btn.search-toggle[aria-expanded="true"] { background: var(--fg); color: var(--nd-on-ink); border-color: var(--fg); }
.site-search { display: flex; align-items: center; gap: .25rem; width: 100%; max-width: 30rem; min-height: 42px; padding: 0 .2rem 0 .85rem; background: var(--card); border: 1px solid var(--nd-ink-muted); border-radius: var(--nd-radius-input); }
.site-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: var(--nd-text-base); padding: .45rem 0; }
.site-search input::placeholder { color: var(--muted); opacity: 1; }
/* The browser's own clear mark is a pointer-only ×, drawn in a colour outside
   the system; Escape and Backspace clear the field. */
.site-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.site-search-go { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--nd-radius-input); background: transparent; color: var(--fg); cursor: pointer; }
.site-search-go:hover { background: rgb(var(--nd-ink-rgb) / .08); }
@supports selector(:has(*)) {
  .site-search input:focus-visible { outline: none; }
  .site-search:has(input:focus-visible) { outline: var(--nd-focus-width) solid var(--nd-ink); outline-offset: 2px; }
}
/* Narrower screens: a Search button sits beside the wordmark and opens the
   field on a row of its own straight below it, so what the button opens comes
   next both on screen and in the tab order. The reader's controls take the
   row after, then the nav. */
@media (max-width: 900px) {
  .header-search { display: contents; }
  .header-search > .search-toggle { display: inline-flex; margin-left: auto; }
  .site-search { display: none; flex: 1 0 100%; max-width: none; }
  .header-search.open .site-search { display: flex; }
  .header-actions { flex: 1 0 100%; justify-content: flex-end; }
}

/* ── Buttons, switches ───────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .55rem 1.15rem; min-height: 40px; border-radius: var(--nd-radius-pill); background: var(--fg); color: var(--nd-on-ink); border: 1px solid var(--fg); font-family: var(--font-display); text-transform: var(--nd-display-case); letter-spacing: .05em; font-size: var(--nd-text-sm); line-height: 1.1; text-decoration: none; cursor: pointer; transition: background var(--nd-duration-fast) var(--nd-ease-gentle), color var(--nd-duration-fast) var(--nd-ease-gentle); }
.btn:hover { background: var(--nd-ink-soft); border-color: var(--nd-ink-soft); color: var(--nd-on-ink); }
.btn.secondary { background: var(--sand); color: var(--fg); border-color: var(--sand); }
.btn.secondary:hover { background: var(--nd-sand-deep); border-color: var(--nd-sand-deep); color: var(--fg); }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--border); }
.btn.ghost:hover { background: var(--sand); border-color: var(--fg); color: var(--fg); }
.btn[aria-pressed="true"], .btn[aria-current="page"] { background: var(--fg); color: var(--nd-on-ink); border-color: var(--fg); }
.btn.disabled { background: var(--sand); color: var(--muted); border-color: var(--sand); cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.switch { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem 0; min-height: 40px; border: 0; background: none; color: var(--fg); font: inherit; font-size: var(--nd-text-sm); cursor: pointer; }
.switch .sw { width: 38px; height: 22px; border-radius: var(--nd-radius-pill); background: var(--bg); border: 2px solid var(--muted); position: relative; flex: none; transition: background var(--nd-duration-fast) var(--nd-ease-gentle); }
.switch .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: left var(--nd-duration-fast) var(--nd-ease-gentle); }
.switch[aria-checked="true"] .sw { background: var(--fg); border-color: var(--fg); }
.switch[aria-checked="true"] .sw::after { left: 18px; background: var(--nd-on-ink); }

/* ── Instruments of change: hue + texture + icon ─────────── */
.i-digital-prosthetic, .edge-digital-prosthetic { --i-hue: var(--nd-digital); --i-rgb: var(--nd-digital-rgb); --i-fill: var(--nd-digital-fill); --i-text: var(--nd-digital-text); }
.i-mind-body, .edge-mind-body { --i-hue: var(--nd-mind-body); --i-rgb: var(--nd-mind-body-rgb); --i-fill: var(--nd-mind-body-fill); --i-text: var(--nd-mind-body-text); }
.i-relational, .edge-relational { --i-hue: var(--nd-relational); --i-rgb: var(--nd-relational-rgb); --i-fill: var(--nd-relational-fill); --i-text: var(--nd-relational-text); }
.i-space-making, .edge-space-making { --i-hue: var(--nd-space-making); --i-rgb: var(--nd-space-making-rgb); --i-fill: var(--nd-space-making-fill); --i-text: var(--nd-space-making-text); }

.chip.ioc, .band { background-color: var(--i-fill); color: var(--i-text); border-color: var(--i-hue); }
/* digital: solid · mind-body: diagonal stripes · relational: dots · space-making: crosshatch */
.i-mind-body { background-image: repeating-linear-gradient(45deg, rgb(var(--i-rgb) / .2) 0 3px, transparent 3px 8px); }
.i-relational { background-image: radial-gradient(rgb(var(--i-rgb) / .34) 1.3px, transparent 1.6px); background-size: 7px 7px; }
.i-space-making { background-image: repeating-linear-gradient(0deg, rgb(var(--i-rgb) / .2) 0 1.5px, transparent 1.5px 7px), repeating-linear-gradient(90deg, rgb(var(--i-rgb) / .2) 0 1.5px, transparent 1.5px 7px); }
/* Labels sit on a plate of the plain fill, so the texture never runs under the
   words and the checked fill/text contrast pair always holds. */
.plate { background: var(--i-fill); border-radius: var(--nd-radius-pill); padding: 0 .4em; }
.plate a { display: inline-flex; align-items: center; min-height: 24px; }
.band .plate { padding: .05em .5em; }

/* Card and hero top edge: the same four textures as a 6px rule. */
[class*="edge-"] { position: relative; }
[class*="edge-"]::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 7px; border-radius: var(--nd-radius-card) var(--nd-radius-card) 0 0; background-color: var(--i-hue); pointer-events: none; }
.edge-mind-body::before { background: repeating-linear-gradient(45deg, var(--i-hue) 0 4px, transparent 4px 8px); }
.edge-relational::before { background: radial-gradient(circle, var(--i-hue) 2.2px, transparent 2.6px) 0 50% / 9px 7px repeat-x; }
.edge-space-making::before { background: linear-gradient(var(--i-hue) 0 2px, transparent 2px 5px, var(--i-hue) 5px 7px); }

.iocbar { background: var(--sand); border-bottom: 1px solid var(--border); padding: .5rem 1.5rem; }
.iocbar-inner { max-width: var(--page); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.iocbar .label { display: inline-flex; align-items: center; gap: .3rem; }
.info-link { display: inline-flex; color: var(--muted); padding: .35rem; margin: -.35rem; }
.info-link:hover { color: var(--fg); }
.ioc-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.ioc-chips li { display: flex; }
.ioc-chips li.dragging { opacity: .55; }
.ioc-chips button { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; font-size: var(--nd-text-xs); padding: .35rem .8rem .35rem .45rem; min-height: 34px; }
.ioc-chips button:active { cursor: grabbing; }
.ioc-chips .grip { opacity: .7; }
.ioc-caption { font-size: var(--nd-text-xs); color: var(--muted); margin-left: auto; }

.band { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; padding: .5rem .9rem; margin: 1.5rem 0 .9rem; border-radius: var(--nd-radius-card); border: 1px solid var(--i-hue); font-family: var(--font-display); font-weight: 400; text-transform: var(--nd-display-case); letter-spacing: .05em; font-size: var(--nd-text-lg); line-height: 1.2; }
.band a { color: inherit; text-decoration: none; }
.band a:hover { text-decoration: underline; color: inherit; }
.band-count { font-family: var(--font-body); font-size: var(--nd-text-xs); letter-spacing: .02em; text-transform: none; }
.inst-group:first-child .band { margin-top: .5rem; }

/* ── Chips: kind is shape ────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; min-height: 24px; border-radius: var(--nd-radius-pill); border: 1px solid var(--border); background: var(--card); color: var(--fg); font-family: var(--font-display); font-size: var(--nd-text-sm); letter-spacing: .04em; line-height: 1.2; text-transform: var(--nd-display-case); text-decoration: none; white-space: nowrap; }
.chip.sm { font-size: var(--nd-text-xs); padding: .2rem .6rem; }
button.chip { cursor: pointer; min-height: 36px; }
a.chip:hover, button.chip:hover { border-color: var(--fg); color: var(--fg); background: var(--sand); }
.chip.ext { border-color: var(--fg); }                                   /* outlined = extension */
.chip.strat { border-style: dashed; border-color: var(--fg); }           /* dashed = strategy */
.chip.tool { border: 3px double var(--fg); }                             /* double line = tool */
.chip.cog { background: var(--fg); color: var(--nd-on-ink); border-color: var(--fg); } /* filled ink = cognition */
a.chip.cog:hover, button.chip.cog:hover { background: var(--nd-ink-soft); border-color: var(--nd-ink-soft); color: var(--nd-on-ink); }
.chip.cog.off { background: var(--card); color: var(--fg); border-color: var(--border); }
button.chip.cog.off:hover { background: var(--sand); color: var(--fg); border-color: var(--fg); }
.chip.ioc { border-style: solid; font-weight: 400; }
a.chip.ioc:hover { filter: brightness(.97); background-color: var(--i-fill); color: var(--i-text); border-color: var(--i-text); }
.chip.plain { font-family: var(--font-body); text-transform: none; letter-spacing: 0; }
.chip.moment { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: var(--nd-text-sm); padding: .5rem 1rem; white-space: normal; }
.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.kind { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--nd-text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.eyebrow { font-family: var(--font-display); text-transform: var(--nd-display-case); font-size: var(--nd-text-sm); letter-spacing: .06em; color: var(--nd-ink-soft); display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

.icn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--sand); color: var(--fg); flex: none; }
.icn.sm { width: 30px; height: 30px; border-radius: var(--nd-radius-card); }
.icn.lg { width: 56px; height: 56px; border-radius: 14px; }
.logo-wrap { display: inline-flex; flex: none; border-radius: 10px; overflow: hidden; background: var(--sand); border: 1px solid var(--border); }
.logo { width: 100%; height: 100%; object-fit: contain; padding: 12%; }
.logo-row { display: flex; align-items: center; gap: .3rem; min-height: 22px; }
.logo-row .logo-wrap, .logo-row .icn { border-radius: 6px; }

/* ── Layout ──────────────────────────────────────────────── */
.container { max-width: var(--page); margin: 0 auto; padding: 1.5rem; }
/* Home's entry panel, on the shared room's soft ground: the title, then the
   start block, centred under a short ink bar. */
.home-entry { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; margin: .25rem 0 0; padding: 2.25rem 1.5rem 2.25rem; background: var(--nd-site-soft); border-radius: var(--nd-radius-panel); text-align: center; }
.home-hero { text-align: center; display: flex; flex-direction: column; gap: .6rem; align-items: center; max-width: 100%; }
.home-hero h1 { font-size: var(--nd-text-hero); max-width: 100%; overflow-wrap: anywhere; }
.hero-line { font-size: var(--nd-text-lg); margin: 0; }
.hero-sub { font-size: var(--nd-text-sm); color: var(--muted); margin: 0; }

/* Don't know where to start? Three ways in, buttons alone with no captions,
   under the same heading the guided walk uses for its title. */
.start-block { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding-top: 1.75rem; max-width: 100%; }
.start-block::before { content: ""; position: absolute; top: 0; left: 50%; width: 4rem; height: 4px; margin-left: -2rem; border-radius: var(--nd-radius-pill); background: var(--nd-site); }
.start-block h2 { overflow-wrap: anywhere; }
.start-ways { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.25rem; }
.start-ways li { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; }
.start-ways .btn { min-height: 44px; }

.search { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--border); border-radius: var(--nd-radius-card); background: var(--card); padding: .6rem .6rem .6rem 1rem; color: var(--muted); align-self: start; box-shadow: var(--nd-shadow-card); }
.search:focus-within { border-color: var(--fg); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: var(--nd-text-base); padding: .4rem 0; }
.search input:focus { outline: none; }
.search input::placeholder { color: var(--muted); opacity: 1; }
.search.inline { align-self: stretch; box-shadow: none; border-radius: var(--nd-radius-input); padding: .35rem .8rem; }

.home-section { margin: 2.75rem 0; }
.start-here { margin: 1.5rem 0 2.25rem; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; align-items: end; margin-bottom: 1rem; }
.section-head h2 { display: flex; align-items: center; gap: .6rem; grid-column: 1; }
.section-head .section-sub { grid-column: 1; margin: 0; }
.section-head .more-link { grid-column: 2; grid-row: 1 / span 2; }
.section-head.with-action { align-items: center; }
.section-sub { color: var(--muted); max-width: var(--nd-measure); }
.section-sub.wide { max-width: 80ch; }
.prompt { font-size: var(--nd-text-lg); margin: 1.1rem 0 .7rem; }
/* The Visualiser hand-off: a quiet note on the shared room's soft ground. The blob
   (the self, in the Visualiser's orange) says where it came from; the words
   and the link stay ink. */
.handoff { display: flex; align-items: flex-start; gap: .8rem; max-width: var(--nd-measure); margin: 1.1rem 0 0; padding: .9rem 1.1rem; background: var(--nd-site-soft); border-radius: var(--nd-radius-card); }
.handoff .blob { margin-top: .1rem; }
.handoff p { margin: 0; }
.handoff p + p { margin-top: .2rem; }
.picker { margin-bottom: .7rem; }
.more-link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; white-space: nowrap; }
.sub-head { display: flex; align-items: center; gap: .45rem; margin: 1.75rem 0 .75rem; font-size: var(--nd-text-base); }
.quiet-head { font-family: var(--font-body); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: var(--nd-text-base); line-height: 1.3; display: flex; align-items: center; gap: .45rem; margin: 0 0 .6rem; }
.group-note, .readings-note { margin-top: 1rem; }

/* ── Cards ───────────────────────────────────────────────── */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.cards-grid.two-up { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.more-grid { margin-top: 1rem; }
.show-more { margin: 1rem 0 0; }
.card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--nd-radius-card); padding: 1.15rem; display: flex; flex-direction: column; gap: .65rem; box-shadow: var(--nd-shadow-card); transition: transform var(--nd-duration-fast) var(--nd-ease-gentle), box-shadow var(--nd-duration-fast) var(--nd-ease-gentle); }
.card:hover { transform: translateY(-2px); box-shadow: var(--nd-shadow-lift); }
.card.kind-strategy { border-style: dashed; border-color: var(--nd-ink-muted); }   /* dashed edge = a practice */
.card.kind-tool { padding-top: 1.35rem; }
.card.rec { border-color: var(--fg); border-width: 1.5px; }                         /* the hat: ink, never a hue */
.card.kind-cognition { background: var(--sand); border-color: transparent; box-shadow: none; }
.card.kind-cognition .icn { background: var(--card); }
.card-head { display: flex; align-items: center; gap: .7rem; }
.card.kind-tool .card-head, .card.kind-strategy .card-head { margin-top: 1.5rem; }
.card-title { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.card h3.display { font-size: var(--nd-text-xl); overflow-wrap: anywhere; }
.card h3 a { color: var(--fg); text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
/* The whole card is the link's target; the chips and the heart sit above it. */
.stretched::after { content: ""; position: absolute; inset: 0; border-radius: var(--nd-radius-card); }
.card .chip, .card .heart, .card .tool-line { position: relative; z-index: 1; }
.card .desc { margin: 0; font-size: var(--nd-text-sm); color: var(--nd-ink-soft); flex: 1; }
/* On a stack page every card also says what it carries there. The sand ground
   is the same curator's voice the cognition cards and strengths panels use;
   no new hue, and the label keeps the meaning off colour alone. */
.chip.stack-link { min-height: 24px; }
.role-line { margin: 0; display: flex; flex-direction: column; gap: .15rem; font-size: var(--nd-text-xs); color: var(--fg); background: var(--sand); border-radius: var(--nd-radius-card); padding: .55rem .7rem; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .1rem; min-height: 22px; }
.foot-arrow { color: var(--muted); }
.badge { position: absolute; top: .7rem; right: .7rem; display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border-radius: var(--nd-radius-pill); background: var(--fg); color: var(--nd-on-ink); font-size: var(--nd-text-xs); font-family: var(--font-display); letter-spacing: .06em; text-transform: var(--nd-display-case); line-height: 1.3; }
.badge.static { position: static; margin-top: .4rem; }
.heart { position: absolute; top: .45rem; left: .5rem; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--fg); cursor: pointer; }
.heart:hover { background: var(--sand); }
[data-kit][aria-pressed="true"] .icon { fill: currentColor; }
.kit-btn[aria-pressed="true"] { background: var(--fg); color: var(--nd-on-ink); border-color: var(--fg); }

/* ── Heroes and detail pages ─────────────────────────────── */
.breadcrumb, .crumb-chips { font-size: var(--nd-text-xs); color: var(--muted); margin: 0 0 1rem; }
.breadcrumb a { color: var(--muted); display: inline-flex; align-items: center; min-height: 24px; }
.breadcrumb [aria-current="page"] { color: var(--fg); font-weight: 700; }
.crumb-chips { display: flex; flex-direction: column; gap: .4rem; }
.crumb-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.page-hero { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; margin: .25rem 0 1.75rem; }
.page-hero p { margin: 0; max-width: var(--nd-measure); }
.page-hero.split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2rem; align-items: start; }
.page-hero.split > div { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
.hero-title { display: flex; align-items: center; gap: .8rem; }
.lede { font-size: var(--nd-text-lg); line-height: 1.5; color: var(--fg); }
.tool-hero, .strategy-hero, .inst-hero { background: var(--card); border: 1px solid var(--border); border-radius: var(--nd-radius-panel); padding: 1.9rem 1.75rem 1.75rem; box-shadow: var(--nd-shadow-card); }
.strategy-hero { border-style: dashed; border-color: var(--nd-ink-muted); }
.tool-hero::before, .strategy-hero::before, .inst-hero::before { border-radius: var(--nd-radius-panel) var(--nd-radius-panel) 0 0; height: 9px; }
.hero-main { display: flex; align-items: center; gap: 1.1rem; }
.hero-main > div { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; min-width: 0; }
.page-hero h1 { max-width: 100%; overflow-wrap: anywhere; }
.facts { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem 1.5rem; margin: .5rem 0 0; width: 100%; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.facts-grid dt { margin-bottom: .3rem; }
.facts-grid dd { margin: 0; }
/* Pricing (D11): a plain chip on the card, plain lines on the tool page. */
.facts-grid .wide { grid-column: 1 / -1; }
.facts-grid dd p { margin: 0 0 .4rem; max-width: var(--nd-measure); }
.price-lines { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; max-width: var(--nd-measure); }
.chip.price { white-space: normal; }
.referral-line a.chip { margin-right: .35rem; }

.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.detail-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--nd-radius-panel); padding: 1.4rem 1.5rem; box-shadow: var(--nd-shadow-card); }
.detail-card h2 { font-family: var(--font-body); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: var(--nd-text-base); line-height: 1.3; display: flex; align-items: center; gap: .45rem; margin: 0 0 .6rem; }
.detail-card h2:not(:first-child) { margin-top: 1.4rem; }
.detail-card.media { display: flex; flex-direction: column; gap: .9rem; background: transparent; border: 0; box-shadow: none; padding: 0; }
.detail-card.strengths { background: var(--sand); border-color: transparent; box-shadow: none; }
.honesty { font-size: var(--nd-text-sm); border-left: 4px solid var(--fg); padding-left: .8rem; }
details summary { cursor: pointer; font-size: var(--nd-text-sm); font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem 0; }
details[open] summary { margin-bottom: .4rem; }
.citation-list { margin: 0; padding-left: 1.1rem; font-size: var(--nd-text-xs); color: var(--nd-ink-soft); }
.citation-list li { margin-bottom: .45rem; }

.media-slot { border: 2px dashed var(--border); border-radius: var(--nd-radius-card); padding: 1.6rem 1rem; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center; color: var(--muted); font-size: var(--nd-text-sm); background: repeating-linear-gradient(135deg, rgb(var(--nd-sand-rgb) / .7) 0 8px, transparent 8px 16px); }
.tool-image { border-radius: var(--nd-radius-card); border: 1px solid var(--border); }

.backlinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem 2rem; margin: 2.5rem 0 1rem; padding-top: 1.75rem; border-top: 1px solid var(--border); }
.link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.link-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .7rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.link-row:last-child { border-bottom: 0; }
.evidence-list li { padding: .6rem 0; border-bottom: 1px solid var(--border); }
.evidence-list li:last-child { border-bottom: 0; }
.evidence-list p { margin: 0 0 .25rem; }
.link-row .icn { grid-row: span 2; }
.link-row a { font-weight: 700; }
.link-row .muted { grid-column: 2; }
.lifts .link-row { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.lifts .link-row .lift, .lifts .link-row .counts { grid-row: 1 / span 2; align-self: center; white-space: nowrap; }
.lifts .link-row .lift { grid-column: 3; display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; min-width: 5.5rem; }
/* The Visualiser's three-step mark: open outline, hatch, solid. Ink and texture, never a hue. */
.map-mark { display: inline-block; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--fg); border-radius: var(--nd-radius-input); vertical-align: middle; }
.map-mark-1 { background: transparent; }
.map-mark-2 { background: repeating-linear-gradient(45deg, var(--fg) 0 1.5px, transparent 1.5px 5px); }
.map-mark-3 { background: var(--fg); }
.map-legend { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: var(--nd-text-xs); }
.map-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.lifts .link-row .counts { grid-column: 4; min-width: 9rem; text-align: right; }
.labels-line { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; margin: 1.5rem 0 0; }
html[data-labels="off"] .audience-ui { display: none !important; }

/* ── Filters ─────────────────────────────────────────────── */
.filter-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--nd-radius-panel); padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; box-shadow: var(--nd-shadow-card); display: flex; flex-direction: column; gap: .9rem; }
.filter-card > p { margin: 0; }
.filter-row { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: flex-end; }
.filter-row.switches { align-items: center; gap: .3rem 1.25rem; }
.filter-group { display: flex; flex-direction: column; gap: .3rem; }
/* Same grammar as the Playbook's dropdowns: --nd-radius-input corner, a hairline border, roomier padding, native browser chevron kept as the open/close affordance on both sites. */
.filter-group select { padding: .6rem 1rem; min-height: 40px; border: 1px solid var(--border); border-radius: var(--nd-radius-input); background: var(--card); color: var(--fg); font: inherit; font-size: var(--nd-text-sm); max-width: 230px; }
.filter-group select:hover { border-color: var(--fg); }
.result-count { margin: 0; font-size: var(--nd-text-sm); color: var(--muted); }

/* ── Your filters (D12): one panel, the same wherever tools are listed ──
   Cost and platform, in the dropdown grammar above. The platform control
   takes more than one answer, so it is a disclosure dressed as the same
   dropdown: a closed row that names what is chosen, opening to tick boxes.
   When any filter is on, the panel's edge turns to ink and its status line
   says how many tools are set aside, with one press to bring them back.
   State is words and an ink edge, never a hue. */
.fit-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--nd-radius-panel); padding: .9rem 1.25rem; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: .7rem; text-align: left; }
.fit-panel.active { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.fit-row { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: flex-end; }
.fit-title { display: inline-flex; align-items: center; gap: .35rem; align-self: center; margin-right: .25rem; }
.fit-status { margin: 0; font-size: var(--nd-text-sm); color: var(--nd-ink-soft); }
.fit-panel.active .fit-status { color: var(--fg); }
.fit-clear { display: inline-flex; align-items: center; min-height: 24px; margin-left: .35rem; padding: .1rem .2rem; border: 0; background: none; color: var(--fg); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.fit-clear:hover { color: var(--nd-ink-soft); }
.fit-multi { position: relative; }
.fit-panel select, .fit-multi summary { height: 42px; }
.fit-multi summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 1rem; min-height: 40px; min-width: 9rem; max-width: 230px; border: 1px solid var(--border); border-radius: var(--nd-radius-input); background: var(--card); color: var(--fg); font-size: var(--nd-text-sm); font-weight: 400; line-height: 1.2; }
.fit-multi summary::-webkit-details-marker { display: none; }
.fit-multi summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fit-multi summary::after { content: ""; flex: none; width: .45rem; height: .45rem; border-right: 2px solid var(--fg); border-bottom: 2px solid var(--fg); transform: translateY(-2px) rotate(45deg); }
.fit-multi[open] summary { margin-bottom: 0; border-color: var(--fg); }
.fit-multi[open] summary::after { transform: translateY(2px) rotate(225deg); }
.fit-multi summary:hover { border-color: var(--fg); }
.fit-multi fieldset { position: absolute; z-index: 20; top: calc(100% + .3rem); left: 0; min-width: 100%; width: max-content; max-width: min(18rem, 80vw); margin: 0; padding: .4rem; border: 1px solid var(--fg); border-radius: var(--nd-radius-card); background: var(--card); box-shadow: var(--nd-shadow-lift); display: flex; flex-direction: column; }
.fit-multi fieldset label { display: flex; align-items: center; gap: .6rem; min-height: 36px; padding: .25rem .6rem; border-radius: var(--nd-radius-input); font-size: var(--nd-text-sm); letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--fg); cursor: pointer; }
.fit-multi fieldset label:hover { background: var(--sand); }
.fit-multi input[type="checkbox"] { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--fg); }
.walk-step .fit-panel { margin: 0; }

/* ── Tool line: shape in ink ─────────────────────────────── */
.tool-line { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--nd-text-xs); color: var(--muted); }
.tool-line-mark { width: 10px; height: 10px; display: inline-block; flex: none; }
.tool-line-accepted .tool-line-mark { background: var(--fg); border-radius: 50%; }
.tool-line-contested .tool-line-mark { border: 2px solid var(--fg); border-radius: 2px; transform: rotate(45deg) scale(.85); }
.tool-line-stigmatised .tool-line-mark { border: 1.5px solid var(--fg); border-radius: 2px; background: repeating-linear-gradient(45deg, var(--fg) 0 1.5px, transparent 1.5px 4px); }
.tool-line-legend { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* ── Notices and errors: an ×, a thick left rule, plain words ─ */
.notice { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; border-left: 6px solid var(--fg); background: var(--sand); border-radius: 0 var(--nd-radius-card) var(--nd-radius-card) 0; padding: .9rem 1.1rem; margin: 0 0 1.25rem; max-width: var(--nd-measure); }
.notice p { margin: 0; }
.notice .icon { margin-top: .2rem; }
.empty-state { text-align: center; color: var(--muted); padding: 2.5rem 1rem; grid-column: 1 / -1; }
.empty-kit { background: var(--sand); border-radius: var(--nd-radius-panel); padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.empty-kit p { margin: 0; }

/* ── Guided walk ─────────────────────────────────────────── */
.stepper { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.stepper li { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: var(--nd-text-sm); }
.step-n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--muted); font-weight: 700; font-size: var(--nd-text-xs); }
.stepper li.done .step-n { border-color: var(--fg); color: var(--fg); }
.stepper li[aria-current="step"] { color: var(--fg); font-weight: 700; }
.stepper li[aria-current="step"] .step-n { background: var(--fg); border-color: var(--fg); color: var(--nd-on-ink); }
.walk-step { background: var(--card); border: 1px solid var(--border); border-radius: var(--nd-radius-panel); padding: 1.75rem; box-shadow: var(--nd-shadow-card); display: flex; flex-direction: column; gap: .9rem; }
.walk-step > h2 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.walk-step p { margin: 0; max-width: var(--nd-measure); }
.walk-nav { margin-top: .75rem; }

/* ── Tool finder: one question at a time ─────────────────────
   The Visualiser's focused question, in this site's grammar: no box, the
   question straight on the page ground, in one centred column with a
   comfortable measure; the read-aloud button with the position beside it as
   plain text (a place in a task, never a score); answers as full-width rows,
   their words set left so a long answer still reads easily; and the reader's
   own Back and Next. A chosen answer is an ink edge
   plus a tick, so the state never rests on colour alone. */
.find-hero { align-items: center; text-align: center; }
.quiz-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .8rem; max-width: 44rem; margin-inline: auto; animation: quiz-arrive var(--nd-duration-fast) var(--nd-ease-gentle); }
.quiz-card p { margin: 0; }
.quiz-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .9rem; }
.quiz-position { font-size: var(--nd-text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.quiz-prompt { font-size: var(--nd-text-xl); line-height: 1.2; overflow-wrap: anywhere; }
.quiz-prompt:focus { outline: none; }
.quiz-prompt:focus-visible { outline: var(--nd-focus-width) solid var(--nd-ink); outline-offset: var(--nd-focus-offset); }
.quiz-options { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; align-self: stretch; }
.quiz-option { display: flex; align-items: center; gap: .6rem; text-align: left; min-height: 48px; padding: .65rem 1rem; border: 1px solid var(--border); border-radius: var(--nd-radius-card); background: var(--card); color: var(--fg); text-decoration: none; line-height: 1.35; }
.quiz-option:hover { border-color: var(--fg); background: var(--sand); color: var(--fg); }
.quiz-option.picked { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); font-weight: 700; }
.quiz-option .quiz-tick { margin-left: auto; }
.quiz-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; align-self: stretch; margin-top: .3rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.quiz-restart { font-size: var(--nd-text-sm); font-weight: 700; padding: .5rem .25rem; }
.quiz-result { margin-bottom: 1.5rem; }
.quiz-list { max-width: 44rem; margin-inline: auto; }
.cards-grid.quiz-first { grid-template-columns: minmax(0, 1fr); }
.cards-grid.quiz-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quiz-more { max-width: 44rem; margin-inline: auto; text-align: center; }
@keyframes quiz-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* The designed fallback: the next question is simply there, with no movement. */
@media (prefers-reduced-motion: reduce) { .quiz-card { animation: none; } }

.prose { max-width: var(--nd-measure); }
.prose p, .prose li { line-height: 1.65; }
.legend { margin: .5rem 0; }

.site-footer { text-align: center; color: var(--muted); font-size: var(--nd-text-xs); padding: 2.5rem 1.5rem 3rem; border-top: 1px solid var(--border); margin-top: 3rem; }
.site-footer p { margin: .4rem 0; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.5rem; margin-bottom: 1rem; }
.footer-nav a { font-weight: 700; display: inline-flex; align-items: center; min-height: 24px; }

@media (max-width: 820px) {
  .page-hero.split { grid-template-columns: minmax(0, 1fr); }
  .section-head { grid-template-columns: minmax(0, 1fr); }
  .section-head .more-link { grid-column: 1; grid-row: auto; min-width: 0; white-space: normal; }
  .ioc-caption { margin-left: 0; }
  .lifts .link-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .lifts .link-row .counts { display: none; }
}
@media (max-width: 600px) {
  .site-header, .iocbar { padding-left: 1rem; padding-right: 1rem; }
  .container { padding: 1rem; }
  .site-nav { margin: 0; justify-content: space-between; gap: 0; }
  .site-nav a { padding: .4rem .55rem; font-size: var(--nd-text-xs); letter-spacing: .03em; }
  .site-nav a .icon { display: none; }
  .home-entry { padding: 1.75rem 1rem; gap: 1.5rem; }
  /* The title breaks after "Neurodiversity." (a <wbr>); that word is about 7.4em
     wide, so the size steps down until it fits inside the panel. */
  .home-hero h1 { font-size: min(var(--nd-text-hero), calc((100vw - 4.5rem) / 7.5)); }
  .start-block, .start-ways { align-self: stretch; }
  .start-ways { flex-direction: column; align-items: center; gap: .7rem; }
  .start-ways li { width: 100%; max-width: 22rem; }
  .start-ways .btn { width: 100%; }
  .header-actions .btn-label, .search-toggle .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .filter-group, .filter-group select { max-width: 100%; width: 100%; }
  .fit-multi summary { max-width: 100%; }
  .fit-multi fieldset { max-width: 100%; }
  .fit-title { width: 100%; }
  .cards-grid.quiz-rest { grid-template-columns: minmax(0, 1fr); }
  .tool-hero, .strategy-hero, .inst-hero, .walk-step { padding: 1.5rem 1.1rem 1.25rem; }
  .hero-main { align-items: flex-start; }
}

@media (max-width: 360px) {
  /* Keeps the Search button on the wordmark's row at 320 px. */
  .header-inner { column-gap: .5rem; }
  .wordmark-text { font-size: var(--nd-text-lg); }
  .site-nav a { padding: .4rem .3rem; letter-spacing: .01em; }
}

@media print {
  .site-header .header-actions, .header-search, .iocbar, .heart, .filter-card, .fit-panel, .site-footer .footer-nav, .media-slot, .read-btn { display: none !important; }
  .card { box-shadow: none; break-inside: avoid; }
}