/* ═══════════════════════════════════════════════════════════════════════
   site-search.css—the site search: ONE component, two mounts (the navbar
   field and the large field on the in-app home page).
   (assets/js/site-search-ui.js; engine: assets/js/shared/site-search.js)
   ═══════════════════════════════════════════════════════════════════════
   Owner 2026-10-02, "Navbar + home". Prefix `.srch-*` (CLAUDE.md "CSS class
   prefixes"). Tokens only (fretly-tokens.css + the theme tokens in site.css)—
   no fixed px for type, spacing or radii; the three widths below are rem so
   they follow --ui-scale (no token exists for a field width).

   Control contract (CLAUDE.md standing rule, 2026-08-04):
     1  every class below has a rule, including the state class `.is-active`
        and `.is-overlay`; the magnifier trigger reuses `.btn-icon` and the
        overlay's Close reuses `.btn .btn--sm`; locked rows reuse the shared
        `.fly-ctl-locked` (feature-gate.css, via lock-affordance.js);
     2  no mutually exclusive choices here (no filters);
     3  anything clickable reads as a button or as a dropdown row: the trigger
        and Close are bordered buttons; result rows follow the navbar's own
        dropdown idiom (`.nav-dropdown a`, `.icon-dropdown-item`: flat rows,
        radius, hover surface)—the field is the control, the rows are its menu;
     4  buttons are as wide as their label (Close is `.btn`, width auto);
     5  nothing widens its container: every flex item is `min-width: 0`, text
        wraps with `overflow-wrap: anywhere`, the panel is `min(…, 100vw − gutters)`;
     6  sizing from tokens;
     7  field = well (--surface-2 + --border-strong) on the navbar / on the hero
        card (--surface), results panel = raised (--surface + --border-strong);
     8  the magnifier and the text have --space-sm of air.

   Breakpoint: max-width 1100px is the navbar's OWN tablet break (site.css
   "Mid-width": the nav links start packing into "More" there); below it the
   navbar shows only the magnifier button, which opens a full-width overlay.
   Keep in step with NARROW_QUERY in site-search-ui.js. Above it the field has
   a fixed width and never changes on focus, so navbar-overflow.js can measure
   the room the links have left.
   ─────────────────────────────────────────────────────────────────────── */

.srch {
  --srch-nav-w: 18rem;       /* navbar field, wide layout */
  --srch-panel-w: 34rem;     /* results panel under the navbar field */
  --srch-panel-h: 30rem;     /* results panel max height (also capped at 70vh) */
  position: relative;
  min-width: 0;
}

.srch-pane { min-width: 0; }

.srch-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

/* ── the field: a well ── */
.srch-field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  block-size: var(--ctl-h-md);
  padding: 0 var(--space-md);
  background: var(--surface-2);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-2);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.srch-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 var(--border-w-thick) var(--accent-bg);
  color: var(--text);
}

.srch-ico {
  flex: 0 0 auto;
  inline-size: var(--font-base);
  block-size: var(--font-base);
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.srch-input {
  flex: 1 1 auto;
  min-width: 0;
  block-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;                  /* the field shows the focus ring (:focus-within) */
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
}
.srch-input::placeholder {
  color: var(--text-muted);
  font-weight: var(--weight-normal);
  opacity: 1;
}

/* ── results panel: raised ── */
.srch-panel {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + var(--space-xs));
  right: 0;
  inline-size: min(var(--srch-panel-w), calc(100vw - 2 * var(--space-lg)));
  max-block-size: min(var(--srch-panel-h), 70vh);
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--space-xs);
  background: var(--surface);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.srch-panel[hidden] { display: none; }

.srch-list { min-width: 0; }   /* the listbox: the groups of rows, inside the panel */
.srch-group + .srch-group { margin-top: var(--space-xs); }

.srch-group-label {
  padding: var(--space-sm) var(--space-md) var(--space-xs);
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.srch-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.srch-row:hover,
.srch-row.is-active { background: var(--accent-bg); }

.srch-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  min-width: 0;
}
.srch-title {
  min-width: 0;
  font-size: var(--font-base);
  font-weight: var(--weight-semibold);
  color: var(--text);
}
.srch-sub {
  min-width: 0;
  font-size: var(--font-sm);
  color: var(--text-muted);
}
.srch-hint {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.srch-status {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  font-size: var(--font-sm);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.srch-status--sr { padding: 0; }
.srch-status-main { color: var(--text-2); }
.srch-status-sub { font-size: var(--font-xs); }

/* ── navbar variant, wide: a fixed-width field; trigger and Close hidden ── */
.srch--navbar {
  flex: 0 0 auto;
  inline-size: var(--srch-nav-w);
  max-inline-size: 100%;
}
.srch--navbar .srch-open,
.srch--navbar .srch-close { display: none; }

/* ── hero variant: the field on a card (a well on a card), bigger type ── */
.srch--hero {
  max-inline-size: 36rem;
  margin-top: var(--space-lg);
  padding: var(--space-sm);
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.srch--hero .srch-field {
  block-size: var(--ctl-h-lg);
  padding: 0 var(--space-lg);
  gap: var(--space-md);
}
.srch--hero .srch-ico {
  inline-size: var(--font-lg);
  block-size: var(--font-lg);
}
.srch--hero .srch-input { font-size: var(--font-md); }
/* under the card, full card width; below the sticky navbar (--z-sticky) so a
   scrolled page never paints it over the bar */
.srch--hero .srch-panel {
  z-index: calc(var(--z-sticky) - 1);
  left: 0;
  right: 0;
  inline-size: auto;
}

/* ── navbar variant, narrow: magnifier button + full-width overlay ── */
@media (max-width: 1100px) {
  .srch--navbar { inline-size: auto; }
  .srch--navbar .srch-open { display: flex; }
  .srch--navbar .srch-pane { display: none; }

  /* the bar's own stacking context (z-sticky) must not hide the overlay behind
     a page element: raise it while the overlay is open */
  .navbar:has(.srch.is-overlay) { z-index: var(--z-modal); }

  .srch--navbar.is-overlay .srch-pane {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    position: fixed;
    z-index: var(--z-modal);
    /* leave the phone shell's bottom tab bar (--fly-tabbar-h, set by
       fretly-mobile nav.css on html.chrome-mobile-on) uncovered */
    inset: 0 0 calc(var(--fly-tabbar-h, 0rem) + env(safe-area-inset-bottom, 0rem)) 0;
    padding: max(var(--space-md), env(safe-area-inset-top, 0rem)) var(--space-lg) var(--space-md);
    background: var(--surface);
    overflow-y: auto;
  }
  .srch--navbar.is-overlay .srch-close { display: inline-flex; }
  .srch--navbar.is-overlay .srch-field { block-size: var(--ctl-h-lg); }
  /* >= 16px so iOS does not zoom the page on focus */
  .srch--navbar.is-overlay .srch-input { font-size: var(--font-lg); }
  .srch--navbar.is-overlay .srch-panel {
    position: static;
    flex: 1 1 auto;
    min-block-size: 0;
    inline-size: auto;
    max-block-size: none;
    overflow: visible;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
}