/* ============================================================================
   search-dialog.css — the header search dialog. EVERY route loads this.
   ----------------------------------------------------------------------------
   Extracted from v21-system.css on 2026-10-03 (v25 Gate 2) because the dialog
   is chrome and the sheet it lived in is not: v21-system.css carries the v21
   token block, and a migrated route may not load a second token sheet.

   It is written against --v-* and defines none of them. On a legacy route they
   come from v21-tokens.css; on a migrated route they come from the alias block
   in v24-tokens.css. ONE implementation either way — which is the whole point
   of extracting it rather than writing a v24 copy and keeping both in step by
   hand. The site has already paid for that mistake once: the chrome used to
   hold a duplicate of the token block, and a contrast fix applied to one copy
   and not the other put a 4.46:1 eyebrow back on the homepage.

   Nothing below this banner was edited.
   ============================================================================ */

/* ---------------------------------------------------------------- search --- */
/* §6 puts Search in the header. It is a button that opens a dialog, not a
   decorative input: with JavaScript off the button is simply not shown, and
   every destination remains reachable through the header groups and the hubs. */
.sp-search{display:inline-flex;align-items:center;gap:7px;min-height:40px;
  padding:8px 14px;border:1px solid var(--v-ivory-3);border-radius:999px;
  background:transparent;color:var(--v-ink-2);cursor:pointer;font:inherit;
  font-family:var(--v-ui);font-size:.82rem}
.sp-search:hover{border-color:var(--v-bronze-soft);color:var(--v-maroon)}
html:not(.v-js) .sp-search{display:none}
@media(max-width:520px){.sp-search-l{display:none}.sp-search{padding:8px 10px}}

.vs-panel{position:fixed;inset:0;z-index:9000;background:rgba(36,28,21,.42);
  padding:clamp(12px,6vh,80px) var(--v-gutter);overflow:auto}
.vs-panel[hidden]{display:none}
.vs-inner{max-width:640px;margin:0 auto;background:var(--v-ivory);
  border-radius:var(--v-radius);box-shadow:0 24px 60px -20px rgba(36,28,21,.5);
  padding:clamp(18px,2.4vw,26px)}
.vs-form{display:flex;flex-wrap:wrap;gap:var(--v-2);align-items:center}
.vs-lab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.vs-input{flex:1 1 240px;font:inherit;font-size:1.05rem;padding:12px 14px;min-height:48px;
  border:1px solid var(--v-bronze-soft);border-radius:var(--v-radius);
  background:var(--v-paper);color:var(--v-ink)}
.vs-close{font:inherit;font-family:var(--v-sc);font-size:.8rem;letter-spacing:.07em;
  min-height:48px;padding:12px 18px;border:1px solid var(--v-ivory-3);
  border-radius:var(--v-radius);background:transparent;color:var(--v-ink-2);cursor:pointer}
.vs-close:hover{background:var(--v-ivory-2)}
.vs-out{margin-top:var(--v-4);max-height:56vh;overflow:auto}
.vs-count,.vs-msg{font-family:var(--v-ui);font-size:var(--v-t-xs);color:var(--v-ink-3);
  margin:var(--v-2) 0 var(--v-3)}
.vs-msg{font-size:var(--v-t-sm);line-height:1.65}
.vs-hit{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:2px var(--v-3);
  padding:11px 0;border-top:1px solid var(--v-ivory-3);text-decoration:none;align-items:baseline}
.vs-hit:hover .vs-t{color:var(--v-maroon)}
.vs-k{font-family:var(--v-sc);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--v-bronze)}
.vs-t{font-size:1rem;color:var(--v-ink);line-height:1.35}
.vs-d{grid-column:2;font-family:var(--v-ui);font-size:var(--v-t-xs);color:var(--v-ink-3);
  line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vs-foot{margin:var(--v-5) 0 0;padding-top:var(--v-4);border-top:1px solid var(--v-ivory-3);
  font-family:var(--v-ui);font-size:var(--v-t-xs);color:var(--v-ink-3)}
.vs-foot a{color:var(--v-maroon)}
html.vs-open{overflow:hidden}
@media(max-width:520px){.vs-hit{grid-template-columns:1fr}.vs-d{grid-column:1}}