/* ============================================================================
   search.css - the one-search overlay, on every optimization surface.

   Loads AFTER ook.css (tokens, reset, nav, focus, .sr-only) and after
   optimization/style.css. Everything here belongs to two things and nothing
   else: the control in the nav bar that opens the overlay, and the overlay
   itself. No component in this file duplicates one the design system already
   names - the panel is the site's card ladder (--bg-2 on --bg-0, --line-2
   edge, --sh-3), the keyboard hint is the guide rail's "/" chip, and the
   result rows borrow the reference list's density.

   The markup this styles is built by search.js; the only thing that ships in
   a page's HTML is the nav button, which is delivered `hidden` and revealed by
   the script, so a reader without JavaScript never sees a dead control.
   ========================================================================== */


/* ============================================================================
   1. THE NAV CONTROL
   Sits between .nav-links and .nav-menu in the bar, so it is present at every
   width - the shortcut is a shortcut, not the only way in.
   ========================================================================== */

.nav-search {
  flex: none;
  margin-left: var(--s1);
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 34px;
  padding: 0 var(--s2) 0 var(--s3);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--fg-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: border-color var(--dur-base) var(--ease-std),
              color var(--dur-base) var(--ease-std);
}

.nav-search:hover { border-color: var(--stroke); color: var(--fg-0); }
.nav-search svg { flex: none; color: var(--fg-3); }
.nav-search:hover svg { color: var(--accent-400); }

/* The same chip the guide's rail wears over its search field, so the shortcut
   is taught in one visual language across the site. */
.nav-search-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--bg-2);
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1;
}

/* A pointer that cannot press "/" is not told about "/", and gets a full 44px
   target - the same one the menu trigger beside it already has. */
@media (pointer: coarse) {
  .nav-search-key { display: none; }
  .nav-search { min-height: 44px; min-width: 44px; }
}

/* Below the wide breakpoint the bar is carrying six links and a cross-domain
   pill already, so the control drops to its icon. The accessible name comes
   from the button's aria-label, which repeats the word that just went away. */
@media (max-width: 62em) {
  .nav-search {
    min-width: 40px;
    justify-content: center;
    padding-inline: var(--s2);
  }
  .nav-search-label,
  .nav-search-key { display: none; }
}

/* Between ook.css's nav breakpoint (45em) and 62em the bar has no slack left to
   give. Measured on the untouched pages, with no search control anywhere: the
   six links plus the cross-domain pill reach the container's content edge at
   800px, spill 22px into the gutter at 721px, and the brand has already wrapped
   to two lines by 740px. That band is over-full BEFORE this part adds anything.

   What gives way there is the SPACING, and only there. The bar carries a 24px
   rhythm at every width; in this one band it drops to 12px, which returns 6
   gaps inside the link row and 3 in the bar itself - about 108px, against the
   ~66px the control costs. Every link stays: an earlier revision hid the
   "ookhq.com" pill here instead, and a page stylesheet deleting a route from a
   shared component is the wrong trade, because between 721 and 992px it left no
   nav path to ookhq.com at all while the mobile menu that would restore it does
   not appear until 720px.

   The other candidate was moving ook.css's own .nav-links/.nav-menu breakpoint
   from 45em to 62em, which is a cleaner home for the rule but collapses every
   nav on every subdomain - including pages with three links and no search
   control - into a hamburger up to 992px. Measurements for all of them are in
   the report; this is the version that changes least and measures best.

   Two steps, not one: 24px down to 12px through the band, then 8px in the last
   30px of it, where the untouched bar was already wrapping its brand onto a
   second line. Measured on /guide/ at 12 widths - with these rules the bar
   carries all seven links, the control, no overflow and a one-line brand at
   every width from 1024 down to 721, which the bar without any of this did not
   manage below 780.

   SINCE THE BIND BUILDER (2026-08-17) the bar carries an eighth item on this
   subdomain, and these two rules are what let it still fit: with them the
   eight-item row overflows nothing down to 721px, and the gaps either side of
   the links stay positive throughout (measured on /guide/, 1440 to 721). What
   stops it is the brand wrapping to a second line below 792px, which is why
   ook.css collapses a bar that full at 50em rather than anywhere in the middle
   of this band. */
@media (min-width: 45.01em) and (max-width: 62em) {
  .nav-inner { gap: var(--s3); }
  .nav-links { gap: var(--s3); }
  .nav-search { margin-left: 0; }
}

@media (min-width: 45.01em) and (max-width: 47em) {
  .nav-inner { gap: var(--s2); }
  .nav-links { gap: var(--s2); }
}

/* Below 45em ook.css hides .nav-links and reveals .nav-menu. The free space in
   the bar then belongs to this control, so the pair sits hard against the
   right edge in the conventional order: search, then the menu trigger. */
@media (max-width: 45em) {
  .nav-search { margin-left: auto; }
  .nav-inner > .nav-menu { margin-left: 0; }
}

/* The same layout, in the band where a FULL bar has collapsed but a light one
   has not: without it the control would sit against the brand, mid-bar, with
   the menu trigger alone at the right edge. Same condition ook.css collapses
   on, so the two can never disagree about which bar is which. */
@media (min-width: 45.01em) and (max-width: 50em) {
  .nav-inner:has(.nav-links > :nth-child(8)) .nav-search { margin-left: auto; }
  .nav-inner:has(.nav-links > :nth-child(8)) > .nav-menu { margin-left: 0; }
}


/* ============================================================================
   2. THE OVERLAY SHELL
   Above the skip link (z-index 100 in ook.css) and above the sticky nav (50).
   ========================================================================== */

.oks {
  position: fixed;
  inset: 0;
  z-index: 200;
}

.oks-scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 7, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* While the overlay is up the page underneath holds still. The scrollbar's
   width is handed back as padding so the sticky nav does not jump sideways on
   open - the figure is measured by search.js, never assumed. */
html.oks-locked {
  overflow: hidden;
  padding-right: var(--oks-sbw, 0px);
}

.oks-panel {
  position: relative;
  width: min(40rem, calc(100% - var(--gutter) * 2));
  max-height: min(72vh, 620px);
  margin: min(12vh, 88px) auto 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3), var(--hairline);
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .oks-panel {
    animation: oks-in var(--dur-slow) var(--ease-out) both;
  }
  @keyframes oks-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
  }
}


/* ============================================================================
   3. THE FIELD
   ========================================================================== */

.oks-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
  border-bottom: 1px solid var(--line-1);
}

.oks-ico {
  display: flex;
  flex: none;
  color: var(--fg-3);
  transition: color var(--dur-base) var(--ease-std);
}

.oks-head:focus-within .oks-ico { color: var(--accent-400); }

.oks-input {
  flex: 1 1 auto;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  padding: var(--s1) 0;
  color: var(--fg-0);
  font-size: var(--fs-body-lg);
  letter-spacing: var(--tk-h3);
}

/* The caret is the focus indicator for the field the overlay opens on: a ring
   drawn around a borderless input that spans the whole panel head reads as a
   second box rather than as focus. Every other control in the panel keeps the
   design system's ring. */
.oks-input:focus,
.oks-input:focus-visible { outline: none; }

/* A caret is a two-pixel line that blinks, and a reader who has asked the
   operating system for more contrast has usually asked because that is not
   enough. The system's own ring comes back, drawn inside the head so it reads
   as the field rather than as the panel. */
@media (prefers-contrast: more) {
  .oks-input:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
    border-radius: 4px;
  }
}

.oks-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--fg-3);
  transition: color var(--dur-base) var(--ease-std),
              border-color var(--dur-base) var(--ease-std);
}

.oks-close:hover { color: var(--fg-0); border-color: var(--line-2); }


/* ============================================================================
   4. RESULTS
   ========================================================================== */

/* Two nested column flexes, and BOTH need min-height:0 - the default
   min-height:auto on a flex item refuses to shrink below its content, which is
   what turns "the list scrolls" into "the panel grows past the viewport". */
.oks-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.oks-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* The site scrolls smoothly; a list being walked with the arrow keys must
     not, or the selection lags a held key by half a second. */
  scroll-behavior: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
  padding-bottom: var(--s2);
}

.oks-ghead {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4) var(--s1);
  background: var(--bg-2);
  color: var(--fg-3);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tk-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
}

.oks-gn { flex: none; color: var(--fg-4); font-weight: 500; }

.oks-hit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s4);
  border-left: 2px solid transparent;
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-std);
}

.oks-text { min-width: 0; }

.oks-label,
.oks-sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oks-label {
  color: var(--fg-1);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.oks-mono { font-family: var(--font-mono); font-size: var(--fs-xs); }

.oks-sub {
  color: var(--fg-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}

/* A myth's sub-line is the FALSE claim. It is named as one in text, in the row
   itself, because that framing has to survive both a screen reader reading a
   single option and a 390px row whose group heading is above the fold. */
.oks-claim {
  color: var(--fg-2);
  font-weight: 600;
}

/* The matched run, marked without borrowing the browser's yellow highlight -
   which is unreadable on this palette and means "found by the browser". */
.oks-hit mark {
  background: transparent;
  color: var(--accent-300);
  font-weight: 600;
}

/* The row's own labels, in the design system's components and the order the
   guide's collapsed row uses: evidence (quiet dot and word) then impact
   (stroked pill, filled only at critical). Nothing is restyled here - the
   column only decides where they sit and that they never wrap. */
.oks-meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: none;
  white-space: nowrap;
}

/* Below the wide breakpoint the row keeps the label that says how far a claim
   is trusted and drops the one that ranks it: at 390px the pair costs more of
   the title than the ranking is worth, and the destination page prints both. */
@media (max-width: 34em) {
  .oks-meta .badge { display: none; }
}

/* The last row of a capped group. Same geometry as a result so the list keeps
   one rhythm, quieter type so it never reads as one. */
.oks-more .oks-label {
  color: var(--fg-3);
  font-weight: 500;
}

.oks-more { cursor: pointer; }
.oks-more .oks-go { opacity: 1; }
.oks-more.is-sel .oks-label { color: var(--fg-1); }

.oks-go { flex: none; color: var(--fg-4); opacity: 0; }

.oks-hit:hover { background: var(--bg-3); }
.oks-hit:hover .oks-go { opacity: 1; }

/* The selection is a real state, not a hover echo: the left edge lights, so a
   reader arrowing down a long list can see where they are without reading. */
.oks-hit.is-sel {
  background: var(--bg-3);
  border-left-color: var(--accent-500);
}

.oks-hit.is-sel .oks-label { color: var(--fg-0); }
.oks-hit.is-sel .oks-go { opacity: 1; color: var(--accent-400); }

/* Every written state the overlay has: what it can see before a query, what it
   found nothing for, and - on a page carrying no dataset - where the material
   actually lives. */
.oks-note {
  margin: 0;
  padding: var(--s4);
  color: var(--fg-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.oks-note a { color: var(--accent-400); }


/* ============================================================================
   5. FOOT
   ========================================================================== */

.oks-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) var(--s4);
  border-top: 1px solid var(--line-1);
  color: var(--fg-3);
  font-size: var(--fs-2xs);
}

.oks-keys {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

.oks-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--bg-1);
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1;
}

.oks-count { flex: none; color: var(--fg-3); }

/* No physical keyboard, no keyboard legend - the count keeps its place. */
@media (pointer: coarse) {
  .oks-keys { display: none; }
  .oks-foot { justify-content: flex-end; }
}


/* ============================================================================
   6. NARROW VIEWPORTS
   ========================================================================== */

@media (max-width: 45em) {
  .oks-panel {
    width: calc(100% - var(--s4) * 2);
    margin-top: var(--s4);
    max-height: calc(100dvh - var(--s8));
  }

  .oks-head { padding-left: var(--s3); }
  .oks-input { font-size: var(--fs-body); }
  .oks-hit,
  .oks-ghead,
  .oks-note { padding-inline: var(--s3); }
}


/* ============================================================================
   7. PRINT
   ========================================================================== */

@media print {
  .oks { display: none !important; }
}