/* ============================================================
   Finder: "However you want to find it"
   Four ways into the same 72 ideas. One copy of this file, one
   copy of finder.js, one Python builder. Nothing else emits
   finder markup, and it should stay that way.

   Palette is the site's own Documentation tokens. The only
   colours introduced here are the two accent mixes for the tab
   icon circles, and they are defined in all three theme blocks
   below rather than in a media query alone.
   ============================================================ */

:root {
  --find-a:      color-mix(in srgb, var(--crimson) 12%, var(--paper));
  --find-a-line: color-mix(in srgb, var(--crimson) 30%, var(--paper));
  --find-b:      color-mix(in srgb, var(--forest) 14%, var(--paper));
  --find-b-line: color-mix(in srgb, var(--forest) 32%, var(--paper));
  --find-c:      color-mix(in srgb, var(--ochre) 15%, var(--paper));
  --find-c-line: color-mix(in srgb, var(--ochre) 34%, var(--paper));
  --find-d:      color-mix(in srgb, var(--slate) 14%, var(--paper));
  --find-d-line: color-mix(in srgb, var(--slate) 32%, var(--paper));
  --find-sel:    color-mix(in srgb, var(--forest) 8%, var(--paper));
  /* The front door's own ground. Written out rather than mixed off --forest,
     because in dark mode that token is #7FB98F, the pale accent meant for type
     ON a dark ground: using it as a ground put white on pale green in the
     options preview, unreadable rather than merely wrong.

     The same green in both themes, which is not what the first version did. A
     darker one for night looked right in isolation and measured badly: at
     #1C3B25 the white question card sat at 1.41:1 against it and stopped
     reading as a separate surface, which is the whole design, since the colour
     is the frame and the work happens on paper inside it. #2E5E3A holds white
     type at 7.6:1, separates from the dark page at 2.5:1 and from the dark
     card at 2.3:1, and beats the darker candidate on all three. */
  --diag-ground: #2E5E3A;
  --diag-edge:   #1F4227;
}
/* ---------- predictive search: the site's colours on somebody else's
   component ----------

   predictivesearch.js and .css came in from outside and are kept as supplied,
   so every colour they use is a --ps-* custom property with a neutral
   fallback. These are the site's answers to them. They are written once on
   bare :root rather than three times because each one is a var() onto a token
   the site already flips in all three theme blocks: the substitution happens
   on :root itself, so whichever --paper-card wins the cascade is the one
   --ps-bg gets. A literal colour here would need all three blocks. */
:root {
  --ps-bg:          var(--paper-card);
  --ps-border:      var(--rule);
  --ps-radius:      var(--radius);
  --ps-shadow:      0 14px 28px var(--shadow);
  --ps-text:        var(--ink);
  --ps-muted:       var(--ink-faint);
  --ps-active-bg:   var(--find-sel);
  --ps-active-text: var(--ink);
  --ps-mark-bg:     color-mix(in srgb, var(--ochre) 30%, var(--paper));
  --ps-font:        var(--font-ui);
  --ps-font-size:   0.95rem;
  --ps-max-height:  min(52vh, 340px);
}

/* The row is as wide as the panel, so left:0 right:0 made a 948px dropdown at
   1440 holding labels four words long: a phone list stretched, which is the
   one thing the desktop rules exist to stop. It takes the measure instead, and
   the measure in em is measured against the type inside it, so the font size
   is set here too rather than inherited from the body at 19px. */
.finder__searchrow .ps-suggestions {
  right: auto;
  width: 100%;
  max-width: var(--measure);
  font-size: var(--ps-font-size);
}

/* A suggestion is a thing you tap on a phone, so it gets the 44px every other
   tappable thing on the site gets rather than the component's 9px of padding.
   Two lines, the idea and the moment it belongs to, so it is laid out rather
   than left as running text.

   max-width: none because `main li` is capped at the measure site wide and the
   dropdown is now capped already. Left on, the highlight behind the active row
   stopped in the middle of the panel: the measure caps the words, never the
   box, and here the panel is the box. */
.finder__searchrow .ps-suggestion {
  max-width: none;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 44px; padding: 8px 12px;
  line-height: 1.3;
}
.finder__searchrow .ps-suggestion b { font-weight: 600; }
.finder__searchrow .ps-suggestion span {
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint);
}
.finder__searchrow .ps-suggestion.active span,
.finder__searchrow .ps-suggestion:hover span { color: var(--ink-soft); }
.finder__searchrow .ps-suggestion mark { font-weight: 700; }

.finder {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
  padding: 26px 22px 24px;
  margin: 8px 0 40px;
  scroll-margin-top: 80px;
}
.finder__head { margin-bottom: 20px; }
.finder__eyebrow {
  display: block;
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3;
  color: var(--red); margin-bottom: 9px;
}
.finder__head h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 4.4vw, 2.05rem); letter-spacing: -0.028em;
  line-height: 1.14; margin: 0 0 9px; text-wrap: balance;
}
.finder__head p {
  margin: 0; color: var(--ink-soft); max-width: var(--measure);
  font-size: 1rem; line-height: 1.55;
}

/* ---------- tab bar: 2x2, never a cramped single row ---------- */

.finder__tabs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-bottom: 20px;
}
.finder__tab {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 13px 14px; min-width: 0;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius);
  font-family: var(--font-ui); cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.finder__tab:hover { border-color: var(--rope); }
.finder__tab[aria-selected="true"] {
  border-color: var(--ink); background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.finder__tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* No tinted disc behind these any more. The icons are flat coloured shapes, so
   a chip in the same hue behind them just ate the contrast. The icon is the
   colour now, which is also what makes the four tabs tell each other apart. */
.finder__tab-icon {
  flex: 0 0 auto; width: 42px; height: 42px;
  display: grid; place-items: center;
}
.finder__tab-icon svg { width: 42px; height: 42px; }

.finder__tab-text { min-width: 0; display: block; }
.finder__tab-label { display: block; font-size: 0.98rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.22; }
.finder__tab-desc { display: block; margin-top: 3px; font-size: 0.85rem; line-height: 1.35; color: var(--ink-faint); }
.finder__tab-short { display: none; }

/* ---------- panels ---------- */

.finder__panel {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 20px 18px 18px;
}
.finder__panel:focus { outline: none; }
.finder__panelnote {
  margin: 0 0 16px; color: var(--ink-soft);
  font-size: 0.93rem; line-height: 1.55; max-width: var(--measure);
}

/* ---------- quiz ---------- */

.finder__narrow {
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3;
  color: var(--green); margin-bottom: 14px;
}
.finder__stepnum {
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3;
  color: var(--ink-faint); margin: 0 0 8px;
}
.finder__q {
  font-family: var(--font-display); font-size: 1.26rem; font-weight: 700;
  letter-spacing: -0.018em; line-height: 1.22; margin: 0 0 6px; text-wrap: balance;
}
.finder__qnote { margin: 0 0 14px; color: var(--ink-faint); font-size: 0.9rem; line-height: 1.5; }

.finder__opt {
  display: block; width: 100%; text-align: left;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--paper-card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius);
  font-family: var(--font-ui); font-size: 0.99rem; line-height: 1.35;
  cursor: pointer; transition: border-color 0.14s ease, background 0.14s ease;
}
.finder__opt:hover { border-color: var(--green); background: var(--find-sel); }
.finder__opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.finder__opt[data-chosen="1"] { border-color: var(--green); background: var(--find-sel); font-weight: 600; }

.finder__back, .finder__link, .finder__clear, .finder__restart {
  background: none; border: none; padding: 0;
  font-family: var(--font-ui); font-size: 0.93rem; color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.finder__back:hover, .finder__link:hover, .finder__clear:hover, .finder__restart:hover { color: var(--ink); }
.finder__back { margin-top: 6px; }
.finder__step[data-find-step="1"] .finder__back { display: none; }
.finder__aside { margin: 16px 0 0; color: var(--ink-soft); font-size: 0.93rem; line-height: 1.55; }

/* ---------- results and idea lists ---------- */

.finder__resulthead {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
  letter-spacing: -0.018em; line-height: 1.25; margin: 0 0 6px; text-wrap: balance;
}
.finder__resultnote { margin: 0 0 16px; color: var(--ink-soft); font-size: 0.93rem; line-height: 1.55; }
.finder__group {
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3;
  color: var(--ink-faint); margin: 20px 0 10px;
}
.finder__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.finder__hit {
  display: block; padding: 13px 15px;
  background: var(--paper-card); color: inherit; text-decoration: none;
  border: 1px solid var(--rule); border-left: 3px solid var(--blue);
  border-radius: var(--radius);
}
.finder__hit:hover { border-color: var(--rope); border-left-color: var(--green); }
.finder__hit--red { border-left-color: var(--red); }
.finder__hit--green, .finder__hit--amber { border-left-color: var(--green); }
.finder__hit b {
  display: block; font-family: var(--font-display); font-size: 1.05rem;
  font-weight: 600; letter-spacing: -0.012em; line-height: 1.25; margin-bottom: 4px;
}
.finder__hit span { display: block; color: var(--ink-soft); font-size: 0.93rem; line-height: 1.5; }
.finder__hit em {
  display: block; font-style: normal; margin-top: 7px;
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}
.finder__empty { margin: 0; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.6; }

/* ---------- browse accordion ---------- */

.finder__cats { display: grid; gap: 10px; }
.finder__cat { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-card); }
.finder__cattop {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 15px; text-align: left; background: none; border: none;
  color: var(--ink); font-family: var(--font-ui); cursor: pointer;
}
.finder__cattop:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.finder__caticon { flex: 0 0 46px; width: 46px; height: 46px; display: block; }
.finder__catname {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  letter-spacing: -0.012em; line-height: 1.25;
}
.finder__catname small {
  display: block; margin-top: 3px; font-family: var(--font-body); font-weight: 400;
  font-size: 0.87rem; letter-spacing: 0; color: var(--ink-faint); line-height: 1.4;
}
.finder__catn {
  flex: 0 0 auto; font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}
.finder__caret { flex: 0 0 auto; width: 13px; height: 13px; color: var(--ink-faint); transition: transform 0.16s ease; }
.finder__cattop[aria-expanded="true"] .finder__caret { transform: rotate(90deg); }
.finder__catbody { padding: 0 15px 15px; }

/* ---------- search ---------- */

.finder__searchlabel {
  display: block;
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3;
  color: var(--ink-faint); margin-bottom: 8px;
}
/* The dropdown is absolutely positioned and the component inserts it as the
   input's next sibling, so this row is what it measures itself against. Its
   own stylesheet says so and deliberately does not set it, because it cannot
   know the markup. Without this the list would span the page. Out of flow, so
   it is not a flex child and the row keeps its two columns. */
.finder__searchrow { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; position: relative; }
.finder__input {
  flex: 1 1 auto; min-width: 0;
  padding: 12px 14px; background: var(--paper-card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius);
  font-family: var(--font-ui); font-size: 1rem;
}
.finder__input:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.finder__input::placeholder { color: var(--ink-faint); }

/* ---------- problem chips ---------- */

.finder__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
/* A complaint carries its own mark now, so the chip is an icon and a label
   rather than a label alone. Baseline alignment was right for two runs of
   text and wrong the moment one of them became a 40px drawing. */
.finder__chipmark { display: block; flex: 0 0 40px; }
.finder__chipmark .i5 { width: 40px; height: 40px; }
.finder__chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 13px; background: var(--paper-card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 20px;
  font-family: var(--font-ui); font-size: 0.95rem; line-height: 1.2; cursor: pointer;
}
.finder__chip:hover { border-color: var(--green); background: var(--find-sel); }
.finder__chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.finder__chip[aria-pressed="true"] { border-color: var(--green); background: var(--find-sel); font-weight: 600; }
.finder__chipn { font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-faint); }

/* ---------- the fifth tab: what happened, and why ---------- */

/* Five tabs in a two column grid puts one alone on a third row and the bar
   stops looking deliberate. The fifth spans both columns instead. */
.finder__tab[data-find-tab="result"] { grid-column: 1 / -1; }

.finder__reses {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 4px;
}
.finder__res {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 13px 9px; background: var(--paper-card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 13px; cursor: pointer;
  font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600; line-height: 1.28;
  text-align: center; min-height: 44px;
}
.finder__res:hover { border-color: var(--green); background: var(--find-b); }
.finder__res:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.finder__res[aria-pressed="true"] { border-color: var(--green); background: var(--find-b); }
.finder__res-icon { display: block; width: 46px; height: 46px; }
.finder__res-icon svg { width: 46px; height: 46px; display: block; }

.finder__why { margin-top: 16px; }
.finder__why[hidden] { display: none; }
.finder__whyq {
  margin: 0 0 9px; font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--red);
}
.finder__cause {
  display: block; width: 100%; margin-bottom: 7px; padding: 12px 14px; text-align: left;
  background: var(--paper-card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 11px; cursor: pointer;
  font-family: var(--font-ui); font-size: 0.98rem; font-weight: 600; line-height: 1.35;
  min-height: 44px;
}
.finder__cause:hover { border-color: var(--green); background: var(--find-b); }
.finder__cause:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.finder__cause[aria-pressed="true"] {
  border-color: var(--green); background: var(--find-b);
  box-shadow: inset 3px 0 0 var(--green);
}
.finder__why-body {
  margin: 0 0 14px; font-family: var(--font-ui); font-size: 1rem; line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------- narrow widths: icon on top, short label, describer ---------- */

@media (max-width: 480px) {
  .finder { padding: 20px 15px 18px; border-left: none; border-right: none; border-radius: 0; margin-left: -18px; margin-right: -18px; }
  .finder__panel { padding: 16px 14px 15px; }
  .finder__tabs { gap: 8px; }
  .finder__tab { flex-direction: column; align-items: flex-start; gap: 9px; padding: 12px 11px; }
  .finder__tab-label { display: none; }
  .finder__tab-short { display: block; font-size: 0.97rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.2; }
  .finder__tab-desc { font-size: 0.79rem; line-height: 1.3; }
  .finder__tab-icon { width: 40px; height: 40px; }
  .finder__tab-icon svg { width: 40px; height: 40px; }
  .finder__reses { grid-template-columns: repeat(2, 1fr); }
  .finder__res-icon, .finder__res-icon svg { width: 40px; height: 40px; }
  .finder__res { font-size: 0.86rem; padding: 11px 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .finder__caret { transition: none; }
}

/* Fourteen results in one grid read as a wall, and somebody who was keeping
   could not see the surface had anything for them. Grouped by side. */
.finder__resgroup {
  margin: 18px 0 9px; font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}
.finder__resgroup:first-of-type { margin-top: 4px; }


/* ------------------------------------------------------------------
   What happened: the walker, and the field of answers shrinking

   The number and the bar are the whole point of this surface. They are
   computed from the tree at build time, so what a reader watches count
   down is a real number of answers still reachable and not a mood.
   ------------------------------------------------------------------ */
.finder__dq-meter { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.finder__dq-n {
  font-family: var(--font-display); font-size: 2.3rem; line-height: 1;
  color: var(--red); font-variant-numeric: tabular-nums;
}
.finder__dq-of { font-size: 0.92rem; color: var(--ink-soft); }
.finder__dq-bar {
  height: 9px; border-radius: 5px; background: var(--paper-2);
  border: 1px solid var(--rule); overflow: hidden; margin-bottom: 16px;
}
.finder__dq-bar i {
  display: block; height: 100%; background: var(--red);
  transition: width .6s cubic-bezier(.22, .9, .3, 1), background-color .4s ease;
}
.finder__dq-bar.is-done i { background: var(--green); }

.finder__dq-trail { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.finder__dq-crumb {
  font-family: var(--font-ui); font-size: 0.85rem;
  padding: 5px 11px; min-height: 32px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--paper-card); color: var(--ink-soft);
  cursor: pointer;
}
.finder__dq-crumb:hover { border-color: var(--green); color: var(--ink); }
.finder__dq-crumb--reset { color: var(--red); }

/* The question, with which question it is above it. The step is the site's own
   eyebrow block rather than a new small caps treatment. */
.finder__dq-qhead { margin: 0 0 12px; }
.finder__dq-step {
  display: block;
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3;
  color: var(--red); margin-bottom: 5px;
}
.finder__dq-q {
  font-family: var(--font-display); font-size: 1.3rem; margin: 0; font-weight: 400;
}
.finder__dq-opts { display: grid; gap: 8px; }
/* Three columns was right while there were three sides. A fourth left one
   button alone on its own row, so the count decides the shape: four go two by
   two rather than three and a widow. */
.finder__dq-opts.is-iconic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.finder__dq-opts.is-iconic:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.finder__dq-opts.is-iconic:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* A designed set gets an arrangement per screen, and two by two is the phone's
   answer rather than the only one. Measured at 1200 before this went in: four
   tiles 490px wide, each holding a 44px drawing and one word, which is the
   phone layout stretched and the exact thing `cricket-desktop` exists to stop.
   Four across at 1080 is 260px a tile, and the set still reads as one row of
   four choices, which is what it is. Five go five across for the same reason:
   in three columns they left a hole. */
@media (min-width: 760px) {
  .finder__dq-opts.is-iconic:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .finder__dq-opts.is-iconic:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* These have to look pressed-able before anybody presses one.

   They were a 1px --rule border on --paper-card, sitting inside a panel that
   is also --paper-card, so four answers to "Where were you?" read as four
   labelled pictures rather than as the four things you tap. That is the
   whole surface failing: it is the front door of the site and its entire job
   is to be answered.

   Three changes, and the third is the one that matters on a phone. The edge
   is the accent rather than the rule, so it belongs to the same family as
   every other control here. The ground is a wash of the accent rather than
   the panel it sits on, so the tile separates from its background. And it
   moves when you press it, because a phone has no hover and a tap that
   changes nothing under your thumb feels like a dead pixel. */
.finder__dq-opt {
  display: flex; align-items: center; gap: 12px; text-align: left;
  border: 1.5px solid var(--find-b-line); background: var(--find-b); color: var(--ink);
  font-family: var(--font-ui); font-size: 1rem; font-weight: 600;
  padding: 12px 15px; border-radius: 12px; cursor: pointer; min-height: 48px;
  box-shadow: 0 1px 0 var(--find-b-line);
  transition: transform .08s ease, box-shadow .08s ease, border-color .15s ease;
}
.finder__dq-opt:active {
  transform: translateY(1px); box-shadow: none;
}
/* The chevron says which way this goes, on the rows that carry no drawing. */
.finder__dq-go {
  flex: 0 0 auto; font-size: 1.5rem; line-height: 1;
  color: var(--green); margin-left: 2px;
}
.finder__dq-opts.is-iconic .finder__dq-opt {
  flex-direction: column; gap: 7px; text-align: center; padding: 13px 8px;
  font-size: 0.94rem; line-height: 1.25;
}
.finder__dq-opt:hover {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 20%, var(--paper));
}
.finder__dq-opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.finder__dq-mark, .finder__dq-mark svg { display: block; width: 44px; height: 44px; }
.finder__dq-label { flex: 1 1 auto; min-width: 0; }
.finder__dq-count {
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; color: var(--ink-faint); flex: 0 0 auto;
}
.finder__dq-opts.is-iconic .finder__dq-count { display: none; }

.finder__dq-answer { border-top: 1px solid var(--rule); padding-top: 16px; }
.finder__dq-cause {
  font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 8px; font-weight: 400;
}

@media (max-width: 480px) {
  .finder__dq-n { font-size: 1.9rem; }
  .finder__dq-q { font-size: 1.15rem; }
  .finder__dq-opts.is-iconic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .finder__dq-opts.is-iconic .finder__dq-opt { font-size: 0.82rem; padding: 10px 4px; }
}
.finder__dq-crumb--here {
  display: inline-flex; align-items: center;
  border-color: var(--green); color: var(--ink); background: var(--find-b); cursor: default;
}


/* The number and the bar are the feedback, so the change has to be visible as
   a change. The meter is built once and mutated: rebuilding it, which is what
   the first version did, threw away the element carrying the transition and
   the bar arrived at its new width on the first frame. */
.finder__dq-body { min-height: 4px; }
@keyframes finder-beat {
  0%   { transform: none; }
  38%  { transform: translateY(-3px) scale(1.05); }
  100% { transform: none; }
}
.finder__dq-meter.is-beat .finder__dq-n {
  animation: finder-beat .42s cubic-bezier(.3, .9, .4, 1);
  transform-origin: left center;
}
@media (prefers-reduced-motion: reduce) {
  .finder__dq-bar i { transition: none; }
  .finder__dq-meter.is-beat .finder__dq-n { animation: none; }
}

/* ------------------------------------------------------------------
   The diagnosis on its own, at the top of the homepage

   Not a link to the quiz and not a second copy of it: the same payload,
   the same walker and the same guards, with the tab bar left off.
   ------------------------------------------------------------------ */
.finder--solo { margin: 0; }
.finder--solo .finder__panel { padding-left: 0; padding-right: 0; border: none; }
.finder--solo .finder__head { margin-bottom: 18px; }

/* ---------- the front door, in colour ----------

   Chosen on 2026-08-26 from five treatments. The panel stops being paper: it
   is the one coloured block on a page of white cards, so it is found before it
   is read. That was the fault it fixes. The owner looked at the front door and
   read a thing whose whole job is to be answered as another band of the
   article.

   Only `.finder--solo`, which is the diagnosis on the homepage. The same
   walker is the finder's fifth tab on find.html, and colouring that would put
   a green slab inside a tab panel that is already inside a bordered module.

   The questions themselves stay on paper. Reversing them as well would have
   put the whole surface in white on green, and the counter, the marks and the
   four tiles all depend on the site's own palette to read at all. So the
   colour is the frame and the work happens on white inside it, which is also
   what keeps the drawings legible: they carry four colours chosen against
   paper. */
.finder--solo {
  background: var(--diag-ground);
  border-radius: 16px;
  padding: var(--s4) var(--s3) var(--s3);
}
/* 0.82, not 0.74. Composited over the light ground that was 4.99:1, which
   clears AA and is the weakest thing on the panel, and this is 0.72rem
   uppercase. Measured rather than eyeballed: alpha has to be composited before
   the ratio means anything, and reading the declared white gives 7.6:1 for
   every one of these three, which is wrong for two of them. */
.finder--solo .finder__eyebrow { color: rgba(255, 255, 255, 0.82); }
.finder--solo .finder__head h2 { color: #FFFFFF; }
.finder--solo .finder__head p { color: rgba(255, 255, 255, 0.9); }
/* The measure still caps the words. On the coloured ground a line running the
   full width would read as a paragraph of reversed type, which is the one
   thing reversed type is bad at. */
.finder--solo .finder__head p { max-width: var(--measure); }

.finder--solo .finder__dq {
  background: var(--paper);
  border-radius: 12px;
  border-left: 6px solid var(--ochre);
  padding: var(--s3) var(--s3) var(--s3) calc(var(--s3) - 2px);
}

@media (max-width: 640px) {
  .finder--solo { padding: var(--s3) var(--s2) var(--s2); border-radius: 14px; }
  .finder--solo .finder__dq { padding: var(--s3) var(--s2) var(--s2); }
}

/* The answer is the idea itself, read here. Four questions to earn it and
   then a link somewhere else was sending the reader away at the moment
   they arrived. */
.finder__dq-fix {
  margin: 0 0 16px; font-size: 1.05rem; line-height: 1.55; font-weight: 600; color: var(--ink);
}
.finder__dq-card {
  background: var(--paper-card); border: 1px solid var(--rule);
  border-left: 3px solid var(--green); border-radius: 12px;
  padding: 15px 18px; margin-bottom: 10px;
}
.finder__dq-card h4 {
  font-family: var(--font-display); font-size: 1.2rem; margin: 6px 0 7px; font-weight: 400;
}
.finder__dq-card p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.finder__dq-where {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 6px 14px; flex-wrap: wrap;
  margin-top: 11px !important; padding-top: 9px; border-top: 1px solid var(--rule);
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint) !important;
}
/* The link is the one thing in this line a reader can act on, so it keeps its
   own case and weight rather than disappearing into the small caps beside it. */
.finder__dq-where a {
  text-transform: none; letter-spacing: 0; font-size: 0.88rem; font-weight: 600;
  color: var(--green); text-decoration: none; border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.finder__dq-where a:hover { border-bottom-color: var(--green); }

/* The page section itself, printed inside the answer.

   The writing, the diagram and the idea cards come out of the subject page
   verbatim, so nearly everything here is already styled by the site. What this
   block does is set the width they sit in and mark the card the reader's
   answer actually landed on, because a section can hold five and only one or
   two of them are the answer. */
.finder__dq-page {
  margin: 10px 0 4px;
  border: 1px solid var(--rule); border-radius: 14px;
  background: var(--paper-card); padding: 18px 20px 20px;
}
.finder__dq-page > :first-child { margin-top: 0; }
.finder__dq-page > :last-child { margin-bottom: 0; }
.finder__dq-page .narrow { max-width: none; margin-left: 0; margin-right: 0; }
.finder__dq-page .subhead { margin-top: 0; }
.finder__dq-page .ideas { margin-bottom: 0; }
.finder__dq-page figure.fig { margin-left: 0; margin-right: 0; }

/* The answer, inside a section that also holds the ideas either side of it. */
.finder__dq-page .idea { opacity: 0.62; }
.finder__dq-page .idea[data-ctx-hit] {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--green);
}
@media (prefers-reduced-motion: no-preference) {
  .finder__dq-page .idea { transition: opacity 260ms ease; }
}

/* "I am not sure", and the checks it answers with.

   Quiet, under the three real options, because most of the time the reader
   does know. When he does not, the causes turn into things he can go and look
   at, count, or ask somebody, and each check is still the button that takes
   him to that answer. */
.finder__dq-unsure { margin: 12px 0 2px !important; text-align: center; }
.finder__dq-unsure button {
  background: none; border: none; padding: 6px 10px; cursor: pointer;
  font-family: var(--font-hand); font-size: 0.9rem; font-weight: 600;
  color: var(--ink-faint); border-bottom: 1px solid var(--rule);
}
.finder__dq-unsure button:hover { color: var(--green); border-bottom-color: var(--green); }

.finder__dq-tells { display: grid; gap: 8px; }
.finder__dq-tell {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--paper-card); border: 1px solid var(--rule); border-radius: 12px;
  padding: 13px 15px; font: inherit; color: var(--ink);
}
.finder__dq-tell:hover { border-color: var(--find-sel); background: var(--find-b); }
.finder__dq-telltext { display: block; font-size: 1rem; line-height: 1.5; }
.finder__dq-telllabel {
  display: block; margin-top: 7px;
  font-family: var(--font-hand); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--green);
}

.finder__dq-more { margin: 12px 0 22px !important; }
.finder__dq-more a {
  font-family: var(--font-hand); font-size: 0.88rem; font-weight: 600;
  color: var(--green); text-decoration: none; border-bottom: 1px solid var(--rule);
}
.finder__dq-more a:hover { border-bottom-color: var(--green); }

@media (max-width: 560px) {
  .finder__dq-page { padding: 14px 13px 16px; border-radius: 12px; }
}

/* The clinic offer. Shown under a diagnosis answer and above the cards in the
   complaint panel, on the causes and complaints a clinic actually answers.
   Built from the same tokens as everything else here, and using the site's one
   eyebrow treatment rather than a second small caps of its own. */
.finder__clinic {
  display: block; text-decoration: none; margin: 14px 0 0;
  padding: 13px 15px; border-radius: 10px;
  border: 1px solid var(--find-a-line); background: var(--find-a);
}
.finder__clinic:hover { border-color: var(--red); }
.finder__clinic-eyebrow {
  display: block; font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); margin-bottom: 4px;
}
.finder__clinic-title {
  display: block; font-weight: 700; color: var(--ink); line-height: 1.25; margin-bottom: 3px;
}
.finder__clinic-blurb {
  display: block; font-size: 0.9rem; line-height: 1.45; color: var(--ink-soft);
}