/* search.css — header search, type-ahead panel, the live /search/ page and
   voice search (assets/js/search-ui.js).

   Every color is a site.css token (light-dark() pairs), so light, dark and
   the header's theme toggle all work with no rules of their own here.
   No inline styles anywhere: style-src 'self' would drop them silently.
   Tap targets are 44px. Nothing here may widen the page at 360px. */

/* ── header search box ───────────────────────────────────────────────── */
.site-head search { position: relative; display: block; min-width: 0; flex: 0 1 260px; }
.site-head search form { display: flex; align-items: center; min-height: 46px; margin: 0;
  background: var(--surface); border: 1px solid var(--field-border); border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease; }
.site-head search form:focus-within { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.site-head search input[type="search"] { flex: 1 1 auto; min-width: 0; height: 44px; margin: 0; padding: 0 4px 0 12px;
  border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 16px; /* 16px: iOS zooms on anything smaller */
  outline: none; -webkit-appearance: none; appearance: none; }
.site-head search input[type="search"]::placeholder { color: var(--fg-subtle); }
.site-head search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
.site-head search label:not(:has(input)) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site-head search form button { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: var(--radius);
  background: transparent; color: var(--fg-muted); cursor: pointer; font: inherit; }
.site-head search form button:hover { color: var(--gold-hi); }
.site-head search form button:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.site-head search form button[hidden] { display: none; }
.site-head search form button svg { display: block; }

/* Header placement.
   The desktop nav already fills the row (measured: at 1440 an inline 260px box
   wrapped "Design Studio" onto two lines), so:
   · no JS, any width: a full-width row under the logo / nav / menu;
   · JS, desktop (>=900): search-ui.js adds .srch-compact — a 44px search
     button beside the theme toggle that opens the box over the nav;
   · phone and 861-899 (<900): the full-width row. Under 900 even a 44px
     button wraps "Design Studio" (measured at 861); phones always want the row. */
.site-head .head-row:has(> search:not(.srch-compact)) { flex-wrap: wrap; row-gap: 6px; }
.site-head .head-row > search:not(.srch-compact) { order: 10; flex: 1 0 100%; }
@media (max-width: 899px) {
  .site-head .head-row:has(> search) { flex-wrap: wrap; row-gap: 6px; }
  .site-head .head-row > search { order: 10; flex: 1 0 100%; }
}
@media (min-width: 900px) {
  .site-head .head-row:has(> search.srch-compact) { position: relative; }
  .site-head search.srch-compact { position: static; flex: none; width: 44px; }
  .site-head search.srch-compact form { width: 46px; height: 46px; min-height: 46px; border-color: var(--border-strong); }
  .site-head search.srch-compact:not(.is-open) form :is(input, .srch-mic, label) {
    position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%); }
  .site-head search.srch-compact:not(.is-open) form button[type="submit"] { width: 44px; color: var(--fg); }
  .site-head search.srch-compact.is-open form { position: absolute; z-index: 62; top: 50%; right: var(--pad); transform: translateY(-50%);
    width: min(38rem, calc(100% - 2 * var(--pad) - 96px)); background: var(--surface); box-shadow: var(--shadow-pop); }
  .site-head search.srch-compact .srch-pop, .site-head search.srch-compact .srch-voice-status {
    left: auto; right: var(--pad); top: calc(50% + 28px); width: min(38rem, calc(100% - 2 * var(--pad) - 96px)); }
}

/* ── voice ───────────────────────────────────────────────────────────── */
.srch-mic.is-listening { color: var(--on-gold); background: var(--gold-fill); }
.srch-mic.is-listening:hover { color: var(--on-gold); }
.srch-mic.is-listening::after { content: ""; position: absolute; inset: 4px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 var(--gold); animation: srch-pulse 1.3s ease-out infinite; }
.srch-mic { position: relative; }
.srch-mic.is-working { color: var(--gold); animation: srch-blink 1s ease-in-out infinite; }
@keyframes srch-pulse { 0% { box-shadow: 0 0 0 0 var(--tint-gold-strong); } 100% { box-shadow: 0 0 0 10px transparent; } }
@keyframes srch-blink { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .srch-mic.is-listening::after, .srch-mic.is-working { animation: none; } }
.srch-host.is-listening form { border-color: var(--gold); }
.srch-voice-status { position: absolute; left: 0; right: 0; top: 100%; z-index: 61; margin: 6px 0 0; padding: 8px 12px;
  background: var(--surface); color: var(--fg); border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); font-size: .9rem; line-height: 1.35; overflow-wrap: anywhere; }
.srch-voice-status[hidden] { display: none; }
/* The /search/ page form flows in the document: the status sits under it. */
.srch .srch-form { position: relative; }
.srch .srch-form .srch-mic { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  padding: 0; border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--surface); color: var(--fg); cursor: pointer; }
.srch .srch-form .srch-mic[hidden] { display: none; }
.srch .srch-form .srch-mic.is-listening { color: var(--on-gold); background: var(--gold-fill); border-color: var(--gold); }
.srch .srch-voice-status { position: static; margin-top: .6rem; box-shadow: none; }

/* ── type-ahead panel ────────────────────────────────────────────────── */
.srch-host { position: relative; }
.srch-pop { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; margin-top: 6px; padding: 6px;
  background: var(--surface); border: 1px solid var(--field-border); border-radius: 10px; box-shadow: var(--shadow-pop);
  max-height: min(70vh, 32rem); overflow-y: auto; overscroll-behavior: contain; }
.srch-pop[hidden] { display: none; }
.srch-grp + .srch-grp { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 4px; }
.srch-grp-h { padding: 6px 10px 2px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-subtle); }
.srch-opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px; border-radius: 7px;
  color: var(--fg); cursor: pointer; line-height: 1.3; }
.srch-opt:hover, .srch-opt.is-active { background: var(--surface-hover); color: var(--gold-hi); }
.srch-opt.is-active { outline: 2px solid var(--gold); outline-offset: -2px; }
.srch-thumb { flex: none; width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background: var(--surface-sunk); border: 1px solid var(--border); }
.srch-thumb img { width: 100%; height: 100%; object-fit: cover; }
.srch-opt-t { min-width: 0; overflow-wrap: anywhere; }
.srch-opt--all { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 7px 7px; color: var(--gold); font-size: .95rem; }

/* ── chips (parsed "searching for", facet values, active filters) ─────── */
.srch-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.srch-chips[hidden] { display: none; }
.srch-chips--parsed { padding: 6px 6px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.srch-chips-lead, .srch-chips-text { font-size: .85rem; color: var(--fg-subtle); }
.srch-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 100%; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--fg);
  font: inherit; font-size: .9rem; line-height: 1.2; cursor: pointer; text-align: left; }
.srch-chip:hover { border-color: var(--gold); color: var(--gold-hi); }
.srch-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.srch-chip--on { background: var(--tint-gold-strong); border-color: var(--gold); }
.srch-chip-f { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-subtle); }
.srch-chip-l { min-width: 0; overflow-wrap: anywhere; }
.srch-chip-n { font-size: .78rem; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.srch-chip svg { flex: none; }
.srch-clear { min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--gold); font: inherit; font-size: .9rem; cursor: pointer; text-decoration: underline; }

/* ── the server-rendered /search/ page (no JS, and first paint) ─────────
   search.html from the server lane: facet links in <details>, an active-filter
   list, "Searching for", and results with thumbnails. Every facet value is a
   plain link, so this whole block works without a line of script; when the
   worker is ready, search-ui.js hides it and mounts .srch-app in its place. */
.srch-readas { margin: 0 0 .8rem; color: var(--fg-muted); font-size: .95rem; }
.srch-readas-item { display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--tint-gold-strong); color: var(--fg); }
.srch-active { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.srch-active a.srch-chip { text-decoration: none; background: var(--tint-gold-strong); border-color: var(--gold); }
.srch-active a.srch-clear { display: inline-flex; align-items: center; min-height: 44px; }
.srch-layout { display: grid; grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr); gap: 2rem; align-items: start; }
/* search-ui.js hides the server-rendered page (results + filters) once the live app has proved it can answer, by
   setting `hidden` + data-srch-hidden. `.srch-layout { display: grid }` beat the UA [hidden] rule, so desktop showed
   the filters and the results twice (verify-human, production 2026-11-04). The marker rule covers every node the
   script hides, whatever display its own class sets. */
[data-srch-hidden][hidden] { display: none !important; }
.srch-layout > .srch-facets, .srch-layout > .srch-main { min-width: 0; }
.srch-facet { margin: 0 0 1rem; }
.srch-facet > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; list-style-position: inside;
  font-size: .78rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.srch-facet > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.srch-facet ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.srch-fv { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; max-width: 100%; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--fg); font-size: .9rem; text-decoration: none; }
@media (pointer: coarse) { .srch-fv { min-height: 44px; } }
.srch-fv:hover { border-color: var(--gold); color: var(--gold-hi); text-decoration: none; }
.srch-fv.is-on { background: var(--tint-gold-strong); border-color: var(--gold); }
.srch-fv-label { min-width: 0; overflow-wrap: anywhere; }
.srch-fv-count { font-size: .78rem; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.srch-hit.has-img { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; }
.srch-hit.has-img > :not(.srch-thumb) { grid-column: 2; }
.srch-hit .srch-thumb { grid-column: 1; grid-row: 1 / span 3; width: 64px; height: 64px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-sunk); }
@media (max-width: 860px) {
  .srch-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .srch-layout > .srch-main { order: -1; } /* results first on a phone; the facet links follow */
}

/* ── the live /search/ page ──────────────────────────────────────────── */
.srch-live .srch-ac { display: none !important; } /* the older search-suggest.js list, superseded here */
.srch-app { display: grid; grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr); grid-template-areas: "bar bar" "side main"; gap: 1rem 2rem; }
.srch-toolbar { grid-area: bar; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-width: 0; }
.srch-live-count { margin: 0; color: var(--fg-subtle); font-size: .92rem; }
.srch-filterbtn { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--border-strong);
  border-radius: var(--radius); background: var(--surface); color: var(--fg); font: inherit; font-size: .95rem; cursor: pointer; }
.srch-filterbtn:hover { border-color: var(--gold); }
.srch-app .srch-facets { grid-area: side; min-width: 0; align-self: start; position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; }
.srch-sheet-head, .srch-sheet-foot { display: none; }
.srch-fg { margin: 0 0 1.1rem; padding: 0; border: 0; min-width: 0; }
.srch-fg-h { padding: 0; margin: 0 0 .45rem; font-size: .78rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.srch-fg .srch-chip { min-height: 38px; }
@media (pointer: coarse) { .srch-fg .srch-chip { min-height: 44px; } }
.srch-fg-more { min-height: 44px; margin-top: 2px; padding: 0; border: 0; background: none; color: var(--gold); font: inherit; font-size: .9rem; cursor: pointer; }
.srch-app .srch-main { grid-area: main; min-width: 0; }
.srch-chips--active { margin-bottom: 1rem; }
.srch-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 16px; }
.srch-card { content-visibility: auto; contain-intrinsic-size: auto 300px; min-width: 0; }
/* MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility */
.srch-card-a { display: flex; flex-direction: column; height: 100%; color: var(--fg); text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; transition: border-color .15s ease, transform .15s ease; }
.srch-card-a:hover { border-color: var(--gold); text-decoration: none; transform: translateY(-2px); }
.srch-card-a:hover .srch-card-t { color: var(--gold-hi); }
.srch-card-a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.srch-card-img { display: block; aspect-ratio: 1; background: var(--surface-sunk); }
.srch-card-img img { width: 100%; height: 100%; object-fit: cover; }
.srch-card-k { padding: 10px 12px 0; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-subtle); }
.srch-card-t { padding: 2px 12px 12px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.srch-more { display: block; margin: 1.5rem auto 0; min-height: 44px; }
.srch-more[hidden], .srch-empty[hidden] { display: none; }
.srch-empty p { color: var(--fg-muted); max-width: 60ch; }

@media (max-width: 860px) {
  .srch-app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "main"; }
  .srch-filterbtn { display: inline-flex; }
  .srch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* The filters sheet. With the Popover API it is a top-layer popover;
     without it, .is-open drives the same box. Closed = not rendered. */
  .srch-app.is-phone .srch-facets { position: fixed; inset: auto 0 0 0; top: auto; z-index: 80; display: none; flex-direction: column;
    width: 100%; max-width: none; max-height: min(85vh, 85dvh); margin: 0; padding: 0; overflow: hidden;
    background: var(--surface); color: var(--fg); border: 0; border-top: 1px solid var(--border-strong);
    border-radius: 14px 14px 0 0; box-shadow: var(--shadow-pop); }
  .srch-app.is-phone .srch-facets:popover-open, .srch-app.is-phone .srch-facets.is-open { display: flex; }
  .srch-app.is-phone .srch-facets::backdrop { background: rgba(var(--scrim), .55); }
  .srch-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--border); }
  .srch-sheet-title { margin: 0; font-size: 1.05rem; }
  .srch-sheet-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: var(--radius); background: transparent; color: var(--fg); cursor: pointer; }
  .srch-sheet-close:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
  .srch-fgroups { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 4px; }
  .srch-sheet-foot { display: block; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
  .srch-sheet-apply { width: 100%; min-height: 44px; }
}
@media (max-width: 380px) { .srch-grid { gap: 10px; } .srch-card-t { padding-inline: 10px; } }