/* OddStorm Design System v0.2 */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* ── Brand ─────────────────────────────────────────── */
  /* Source of truth: oddstorm logo.svg paths (#58872a + #79b247). */
  --primary:        #58872a;
  --primary-soft:   #79b247;
  --primary-deep:   #3d5e1d;
  --on-primary:     #ffffff;
  --brand-gradient: linear-gradient(135deg, #58872a 0%, #79b247 100%);

  /* ── Tonal surfaces (tonal) ────────────────── */
  --bg:             #0a0f0a;
  --surface:                  #11171a;
  --surface-container-low:    #131a16;
  --surface-container:        #161e19;
  --surface-container-high:   #1c2620;
  --surface-container-highest:#22302a;
  --bg-elevated:    var(--surface-container-high);

  --border:         #1f2a23;
  --border-strong:  #2a3a30;
  --border-focus:   var(--primary);

  /* ── Text ──────────────────────────────────────────── */
  --text:           #e8efe9;
  --text-muted:     #9aa8a0;
  --text-dim:       #6a7872;

  /* ── Status ────────────────────────────────────────── */
  --status-ok:      #58872a;
  --status-warn:    #e0b341;
  --status-err:     #e05a3a;
  --status-unknown: #6a7872;

  /* ── Layout tokens ──────────────────────────── */
  --shape-xs:    6px;
  --shape-sm:    10px;
  --shape-md:    14px;
  --shape-lg:    20px;
  --shape-xl:    28px;
  --shape-pill:  9999px;

  --radius:      var(--shape-sm);
  --radius-card: var(--shape-md);

  /* Motion: emphasized + spring (standard) */
  --ease-emphasized:  cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerated: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerated: cubic-bezier(0.3, 0, 1, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);  /* overshoot */
  --ease-out:         var(--ease-emphasized);

  --dur-short:   120ms;
  --dur-medium:  240ms;
  --dur-long:    400ms;
  --t-fast:      var(--dur-short)  var(--ease-emphasized);
  --t-base:      var(--dur-medium) var(--ease-emphasized);
  --t-spring:    var(--dur-medium) var(--ease-spring);

  /* State layer opacities (state-layer scale) */
  --state-hover:   0.08;
  --state-focus:   0.12;
  --state-pressed: 0.16;

  /* Focus ring */
  --focus-ring-w:  3px;
  --focus-ring:    0 0 0 var(--focus-ring-w) rgba(88, 135, 42, 0.45);

  /* Elevation (3-level) */
  --elev-1: 0 1px 2px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.12);
  --elev-2: 0 4px 8px rgba(0,0,0,0.24), 0 1px 4px rgba(0,0,0,0.16);
  --elev-3: 0 12px 28px rgba(0,0,0,0.32), 0 4px 10px rgba(0,0,0,0.18);

  --header-h:    64px;
  --font-body:   'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'JetBrains Mono', 'SF Mono', Menlo, monospace;

  color-scheme: dark;
}

/* Light theme — applied when html.light (set by theme.js based on user
   choice OR system preference when choice = system). */
html.light {
  --bg:             #f6f9f4;
  --surface:                   #ffffff;
  --surface-container-low:     #f0f4ed;
  --surface-container:         #e8efe4;
  --surface-container-high:    #dfe7da;
  --surface-container-highest: #d4ddcd;
  --bg-elevated:    var(--surface-container);

  --border:         #d8e1d3;
  --border-strong:  #b8c5b0;
  --text:           #1a1f1b;
  --text-muted:     #4a5b4f;     /* darker for AA on light bg (was #5a6b5f, ~4.5:1 → 6.4:1) */
  --text-dim:       #5a6b5f;     /* darker — Lighthouse fail at #8a9890 (2.8:1) */
  --primary:        #3d5e1d;     /* darker variant of brand #58872a — AA pass on white (6.9:1) */
  --primary-soft:   #58872a;     /* brand dark — large/buttons OK (3.79:1), text would fail */

  --elev-1: 0 1px 2px rgba(40,60,40,0.08), 0 1px 3px rgba(40,60,40,0.06);
  --elev-2: 0 4px 8px rgba(40,60,40,0.10), 0 1px 4px rgba(40,60,40,0.06);
  --elev-3: 0 12px 28px rgba(40,60,40,0.12), 0 4px 10px rgba(40,60,40,0.08);

  color-scheme: light;
}

/* Theme transition: animate ONLY the page background + text color smoothly.
 * Component-level colors flip instantly via CSS variables — no per-element
 * transitions, no traffic-light blinking, no fight with hover state-layers.
 *
 * Modern best practice when supported: View Transitions API
 * (document.startViewTransition) for full crossfade. Below is the safe
 * fallback that works in all browsers.
 */
html.theme-transition,
html.theme-transition body {
  transition: background-color var(--dur-medium) var(--ease-emphasized),
              color           var(--dur-medium) var(--ease-emphasized);
}

/* stripped for tool-page isolation */
/* stripped for tool-page isolation */

/* Bulletproof [hidden]: any class-level `display: ...` rule must NOT win
 * over the HTML hidden attribute. !important is justified — it's the only
 * way to override component-level display in a single global selector. */
[hidden] { display: none !important; }

/* stripped for tool-page isolation */

/* stripped for tool-page isolation */
.ic-sm { width: 14px; height: 14px; }
.ic-lg { width: 20px; height: 20px; }

/* Spinner used by busy buttons (Save → "Saving…"). */
.spinner {
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Universal focus-visible ring. */
/* stripped for tool-page isolation */

/* ── Header — base universal layout ──────────────────
 * Sticky top bar with backdrop blur. Layout = flex space-between (brand
 * left, nav center, actions right). Consuming apps may override icon-
 * button look (catalog keeps webapp pill; oddstorm-website inherits the
 * plain look defined in the "website variant" section below). */
.hdr {
  position: sticky; top: 0; z-index: 10;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.hdr-inner {
  max-width: 1200px; height: 100%; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  gap: 16px;
}
.hdr-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text);
  font-weight: 700; letter-spacing: 0.2px;
  text-decoration: none;
}
.hdr-brand:hover { color: var(--text); text-decoration: none; }
.hdr-logo {
  width: 28px; height: 28px;
  display: block; flex-shrink: 0;
}
.hdr-title { font-size: 16px; }
.hdr-title em { color: var(--text-muted); font-style: normal; font-weight: 400; }
.hdr-sep { color: var(--text-dim); font-weight: 400; }
.hdr-actions { display: flex; align-items: center; gap: 8px; }
.hdr-icon-btn {
  position: relative;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--shape-pill);
  color: var(--text-muted);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.hdr-icon-btn::before {
  content: ''; position: absolute; inset: 0;
  background: currentColor; opacity: 0;
  transition: opacity var(--t-fast);
  z-index: -1;
}
.hdr-icon-btn:hover         { color: var(--text); border-color: var(--border-strong); }
.hdr-icon-btn:hover::before { opacity: var(--state-hover); }
.hdr-icon-btn:active        { transform: scale(0.92); }
.hdr-icon-btn svg { width: 18px; height: 18px; }

/* Theme toggle: explicit display class — NOT [hidden] which has SVG quirks. */
.theme-icon { display: none; }
.theme-icon.theme-icon-active { display: inline-block; }

/* ── Glow orbs ─────────────────────────────────────── */
.bg-orbs::before, .bg-orbs::after {
  content: '';
  position: fixed; pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.18;
  z-index: 0;
}
.bg-orbs::before { top: -10%; left: -10%;  width: 480px; height: 480px;
  background: radial-gradient(closest-side, var(--primary-soft), transparent); }
.bg-orbs::after  { bottom: -10%; right: -10%; width: 540px; height: 540px;
  background: radial-gradient(closest-side, var(--primary), transparent); }

/* ── Buttons (state-layer) ─────────────── */
/* btn stripped — use .hdr-cta-primary instead */
/* btn stripped — use .hdr-cta-primary instead */
/* btn stripped — use .hdr-cta-primary instead */
/* btn stripped — use .hdr-cta-primary instead */
   /* subtle shape morph on press */

/* btn stripped — use .hdr-cta-primary instead */
/* CTA-style hover: 3 layered cues — state-layer (8% white over gradient via
 * .btn::before currentColor=--on-primary), elevation grow, 1px physical lift.
 * Press scale(0.97) from .btn:active drops back to baseline = clean
 * rest→hover→press choreography. */
/* btn stripped — use .hdr-cta-primary instead */

/* btn stripped — use .hdr-cta-primary instead */
/* btn stripped — use .hdr-cta-primary instead */
/* Same elevated-CTA pattern as .btn-primary. */


/* ── Cards ─────────────────────────────────────────── */
.card {
  background: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: var(--shape-md);
  padding: 20px;
  transition: border-color var(--t-base),
              box-shadow var(--t-base),
              transform var(--t-base);
}
.card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 0 40px rgba(88, 169, 58, 0.12), var(--elev-1);
  transform: translateY(-2px);
}

/* ── Inputs ────────────────────────────────────────── */
.input {
  width: 100%;
  padding: 11px 14px;
  background: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: var(--shape-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color var(--t-fast),
              box-shadow var(--t-fast),
              background var(--t-fast);
}
.input:hover { border-color: var(--border-strong); }
.input:focus,
.input:focus-visible {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
  background: var(--surface-container-high);
}

/* ── Pills / Chips ─────────────────────────────────── */
.pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--shape-pill);
  background: var(--surface-container);
  border: 1px solid var(--border);
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t-fast),
              border-color var(--t-fast),
              transform var(--t-fast);
}
.pill::before {
  content: ''; position: absolute; inset: 0;
  background: currentColor; opacity: 0;
  transition: opacity var(--t-fast);
  pointer-events: none; z-index: -1;
}
.pill:hover::before  { opacity: var(--state-hover); }
.pill:active         { transform: scale(0.96); }
.pill:hover          { color: var(--text); border-color: var(--border-strong); }
.pill.active {
  background: var(--brand-gradient);
  color: var(--on-primary);
  border-color: transparent;
  box-shadow: var(--elev-1);
}
.pill.active::before { opacity: 0; }

/* ── kbd ───────────────────────────────────────────── */
kbd {
  display: inline-block;
  padding: 2px 6px;
  background: var(--surface-container-high);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--shape-xs);
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Custom select (combobox) ─── */
.os-select {
  position: relative;
  display: block;
  width: 100%;
}
.os-select-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  background: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: var(--shape-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast),
              box-shadow var(--t-fast),
              background var(--t-fast);
}
.os-select-trigger:hover { border-color: var(--border-strong); }
.os-select-trigger[aria-expanded="true"] {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
  background: var(--surface-container-high);
}
.os-select-chevron {
  width: 14px; height: 14px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform var(--t-base);
}
.os-select-trigger[aria-expanded="true"] .os-select-chevron { transform: rotate(180deg); }

/* Menu uses popover API — auto-promoted to browser top-layer so it renders
 * above native <dialog> modals, scrollable parents, transformed ancestors.
 * Position is recomputed in JS from trigger.getBoundingClientRect().
 *
 * `position: fixed` + popover combination is the modern standard.
 */
.os-select-menu {
  position: fixed;        /* JS sets top/left/width on showPopover(). */
  margin: 0;
  background: var(--surface-container-high);
  border: 1px solid var(--border-strong);
  border-radius: var(--shape-md);
  box-shadow: var(--elev-3);
  padding: 6px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 9999;          /* belt-and-suspenders for browsers without top-layer */
  transform-origin: top center;
  transform: scaleY(0.94) translateY(-4px);
  opacity: 0;
  transition: transform var(--dur-medium) var(--ease-spring),
              opacity   var(--dur-short)  var(--ease-emphasized);
}
.os-select-menu:popover-open {
  transform: scaleY(1) translateY(0);
  opacity: 1;
}
.os-select-menu::backdrop { background: transparent; }

/* ── View Transitions (crossfade) ──────── */
/* Default root VT — opacity-only fade. NEVER scale/translate the (root)
 * snapshot: it covers the entire viewport and any transform reads as the
 * whole page zooming/sliding, even when the actual content change is
 * scoped to a small region. Apps that need a region-only transition give
 * the changing element its own view-transition-name. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur-medium);
  animation-timing-function: var(--ease-emphasized);
}
::view-transition-old(root) { animation-name: vt-fade-out; }
::view-transition-new(root) { animation-name: vt-fade-in; }
@keyframes vt-fade-out { to   { opacity: 0; } }
@keyframes vt-fade-in  { from { opacity: 0; } }
.os-select-option {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--shape-xs);
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast);
}
/* Menu items use a SUBTLE state layer (8% / 12%) — not the heavy
 * surface-container fill used by buttons. A menu item that looks like a
 * raised button reads as "click me, action", not "select from list". */
.os-select-option:hover,
.os-select-option[data-active="true"] {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.os-select-option[aria-selected="true"] {
  color: var(--primary-soft);
  font-weight: 700;
}

.item-add:active { transform: scale(0.98); }

/* ── osort drag visuals ────────────────────────────── */
.osort-ghost {
  opacity: 0.4;
  background: rgba(88, 169, 58, 0.08) !important;
  border-style: dashed !important;
  border-color: var(--primary) !important;
}
.osort-ghost > * { visibility: hidden; }
.osort-chosen {
  cursor: grabbing !important;
  box-shadow: var(--elev-3), 0 0 0 1px var(--primary-soft) !important;
}
.osort-cat-ghost   { opacity: 0.35; }
.osort-cat-ghost > * { visibility: hidden; }
.osort-cat-chosen  { cursor: grabbing; }

/* ── Native <dialog> styling ───────────────────────── */
dialog {
  background: var(--surface-container-high);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--shape-xl);
  padding: 0;
  box-shadow: var(--elev-3);
  max-width: min(520px, 94vw);
  width: 100%;
  /* Closed state — also covers initial render. */
  opacity: 0;
  transform: scale(0.94);
  transition: opacity var(--dur-medium) var(--ease-emphasized),
              transform var(--dur-medium) var(--ease-spring),
              overlay var(--dur-medium) var(--ease-emphasized) allow-discrete,
              display var(--dur-medium) var(--ease-emphasized) allow-discrete;
}
dialog[open] {
  opacity: 1;
  transform: scale(1);
}
@starting-style {
  dialog[open] {
    opacity: 0;
    transform: scale(0.94);
  }
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--dur-medium) var(--ease-emphasized),
              overlay var(--dur-medium) var(--ease-emphasized) allow-discrete,
              display var(--dur-medium) var(--ease-emphasized) allow-discrete;
}
dialog[open]::backdrop { opacity: 1; }
@starting-style {
  dialog[open]::backdrop { opacity: 0; }
}

.dialog-body { padding: 24px; }
.dialog-body h3 { margin: 0 0 18px; font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
.dialog-body form { display: flex; flex-direction: column; gap: 14px; }
.dialog-body label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; color: var(--text-muted); font-weight: 700;
  letter-spacing: 0.3px;
}
.lbl-text { display: inline-flex; align-items: center; gap: 6px; }
.lbl-req  { color: var(--status-err); font-style: normal; font-weight: 700; }
.lbl-opt  {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 6px;
  background: var(--surface-container);
  border-radius: var(--shape-pill);
}
.lbl-help {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
}
.lbl-help code {
  background: var(--surface-container);
  padding: 1px 5px;
  border-radius: var(--shape-xs);
  font-size: 11px;
}
.dialog-body .modal-actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px;
}

.confirm-msg {
  margin: 0 0 20px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ── Toast ─────────────────────────────────────────── */
.toast[hidden] { display: none; }
.toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  padding: 10px 18px 10px 14px;
  background: var(--surface-container-high);
  border: 1px solid var(--border-strong);
  border-radius: var(--shape-pill);
  font-size: 13px; font-weight: 700;
  color: var(--text);
  box-shadow: var(--elev-3);
  z-index: 200;
  display: inline-flex; align-items: center; gap: 8px;
  animation: toast-in var(--dur-medium) var(--ease-spring);
}
.toast .ic { width: 18px; height: 18px; }
.toast[data-kind="ok"]   { border-color: var(--status-ok);   color: var(--status-ok); }
.toast[data-kind="warn"] { border-color: var(--status-warn); color: var(--status-warn); }
.toast[data-kind="err"]  { border-color: var(--status-err);  color: var(--status-err); }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}


/* ── Locale switcher ───────────────────────────────── */
.locale-switcher .ic { width: 14px; height: 14px; }
.locale-switcher-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── Skip-to-content (a11y) ───────────────────────── */
.skip-link {
  position: absolute;
  top: -100px; left: 12px;
  background: var(--surface-container-high);
  color: var(--text);
  padding: 10px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--shape-pill);
  font-size: 13px; font-weight: 700;
  text-decoration: none;
  z-index: 1000;
  transition: top var(--t-fast);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  box-shadow: var(--focus-ring);
}

/* ── Reduced motion (a11y) ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Mobile / responsive baseline ──────────────────── */

/* Touch targets ≥ 36px on touch-first devices (M3 spec). */
@media (pointer: coarse) {
  .pill, .btn, .hdr-icon-btn, .item-edit, .item-del, .cat-del {
    min-height: 36px;
  }
}

/* Hero headlines scale down on narrow screens — fluid. */
.hero h1 {
  font-size: clamp(28px, 8vw, 44px);
  line-height: 1.1;
}

/* Page padding scales 16-24px depending on viewport. */
.page {
  padding-left:  clamp(16px, 4vw, 24px) !important;
  padding-right: clamp(16px, 4vw, 24px) !important;
}

/* Touch targets — also enforce on small screens regardless of pointer. */
@media (max-width: 700px) {
  .pill, .btn, .hdr-icon-btn, .item-edit, .item-del, .cat-del,
  .locale-switcher {
    min-height: 36px;
  }
}

@media (max-width: 700px) {
  /* Header: tighter spacing, hide labels on action pills (icon-only). */
  .hdr-inner { padding: 0 12px; gap: 4px; }
  .hdr-brand { padding: 6px 4px; }
  .hdr-title em { display: none; }

  /* Hide ALL pill text labels on mobile — icons only. Includes
     .edit-label and .locale-switcher-label. Cmd+K kbd hidden too. */
  .hdr .pill > span:not(.dirty-dot),
  .hdr .pill kbd { display: none; }

  /* Locale switcher icon-only on mobile. */
  .locale-switcher .ic { width: 16px; height: 16px; }

  /* Cmdk: tighter top, full-width input. */
  .cmdk-panel { top: 8vh; max-height: 80vh; }

  /* Dialogs: full-width minus 12px padding. */
  dialog { max-width: calc(100vw - 24px); }

  /* Filter pills: smaller font, tighter padding, scrollable horizontally. */
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px 4px;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters .pill { font-size: 11px; padding: 7px 12px; flex-shrink: 0; }
}

/* Smaller phones — last-resort compact: logo-only brand. */
@media (max-width: 380px) {
  .hdr-brand .hdr-title { display: none; }
  .hdr-inner { gap: 2px; padding: 0 8px; }
}

/* ── Locale switcher dropdown ──────────────────────── */
.locale-menu .locale-option {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
}
.locale-menu .locale-name {
  flex: 1;
  font-size: 14px;
}
.os-select-menu.locale-menu .locale-option[aria-selected="true"],
.os-select-menu.locale-menu .locale-option[aria-selected="true"]:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary-soft);
  font-weight: 700;
}
.locale-menu .locale-option:first-child {
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  padding-bottom: 12px;
}
.locale-menu .locale-check-pad { width: 14px; height: 14px; flex-shrink: 0; }

/* Trigger pill — chevron, locale code label */
.locale-switcher .os-select-chevron { width: 12px; height: 12px; transition: transform var(--t-fast); }
.locale-switcher[aria-expanded="true"] .os-select-chevron { transform: rotate(180deg); }

/* ── Mobile nav drawer ─────────────────────────────── */
.nav-burger { display: none; }
.nav-drawer-menu .nav-drawer-option a {
  display: block;
  padding: 12px 16px;
  color: var(--text);
  font-size: 14px; font-weight: 600;
  text-decoration: none;
}
.nav-drawer-menu .nav-drawer-option a:hover { background: var(--surface-container-highest); }

/* Show hamburger only on small screens. */
@media (max-width: 1000px) {
  .nav-burger { display: inline-flex; order: -1; }   /* leftmost icon button */
}

/* On mobile: search button is icon-only (kbd hint hidden), search panel
 * goes full-screen, footer keyboard hints hidden. */
@media (max-width: 700px) {
  #cmdk-open kbd, #cmdk-open > span:not(.dirty-dot) { display: none; }
  #cmdk-open { padding: 0; width: 36px; height: 36px;
               display: inline-flex; align-items: center; justify-content: center; }
  /* Higher-specificity selector to override .cmdk-panel in catalog.css. */
  .cmdk .cmdk-panel {
    top: 0 !important; left: 0 !important; right: 0 !important;
    width: 100vw !important; max-width: 100vw !important;
    max-height: 100vh !important; height: 100vh !important;
    border-radius: 0 !important; transform: none !important;
    animation: cmdk-mobile-in var(--dur-medium) var(--ease-emphasized) forwards;
    overflow: hidden;
  }
  /* Hide keyboard-only hints on mobile (kbd in foot AND inline). */
  .cmdk-foot, .cmdk-input-wrap kbd { display: none !important; }
  .cmdk-input { font-size: 16px; }   /* iOS won't zoom on focus when ≥16px */
}

/* Cmd+K list scroll containment — panel scrolls in itself, not the
 * background. overscroll-behavior prevents chain scroll on iOS. */
.cmdk-list {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Lock body scroll while cmdk is open. JS adds .cmdk-open class. */
body.cmdk-open { overflow: hidden; }
@keyframes cmdk-mobile-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Bottom navigation (mobile) ────────────────────── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-top: 1px solid var(--border);
  z-index: 40;
  padding-bottom: env(safe-area-inset-bottom, 0);
  /* Carve bottom-nav out of the (root) VT snapshot so during a filter
   * transition the filter-grid snapshot doesn't render OVER the fixed
   * bottom nav. Its own group with higher z-index keeps it on top. */
  view-transition-name: bottom-nav;
}
::view-transition-group(bottom-nav) { z-index: 10; }
/* Bottom-nav stays still during a filter VT — no fade, no slide. */
html[data-filter-dir]::view-transition-old(bottom-nav),
html[data-filter-dir]::view-transition-new(bottom-nav) { animation: none !important; }
.bottom-nav-item {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  text-decoration: none;
  /* --text-muted (not --text-dim) — small 10px label needs AA contrast 4.5:1
   * against the blurred --bg backdrop. text-dim was 3.0:1 → Lighthouse fail. */
  color: var(--text-muted);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.2px;
  position: relative;
  padding: 8px 4px;
  transition: color var(--t-fast);
}
.bottom-nav-item .ic { width: 22px; height: 22px; transition: transform var(--t-fast); }
.bottom-nav-item:hover { color: var(--text); }
.bottom-nav-item.is-active { color: var(--primary-soft); }
.bottom-nav-item.is-active::before {
  content: '';
  position: absolute; top: 0; left: 50%;
  width: 24px; height: 3px;
  background: var(--brand-gradient);
  border-radius: 0 0 3px 3px;
  transform: translateX(-50%);
}
.bottom-nav-item:active .ic { transform: scale(0.9); }
.bottom-nav-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Show bottom nav on small screens; hide top nav. Add body padding so
   content doesn't get clipped by the fixed bar. */
@media (max-width: 1000px) {
  .bottom-nav { display: flex; }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)); }
  /* Editbar (catalog edit mode) lifts above bottom-nav. */
  body.editing .editbar { bottom: calc(72px + env(safe-area-inset-bottom, 0)); }
}

/* Active hdr-nav-link styling (desktop) — see website-shell section below
 * for the canonical rules; the active state uses the magic-line indicator,
 * NOT a pill background. */

/* Filter / view change fallback animation — visible in all browsers,
 * supplements the View Transitions API which is Chromium-only as of
 * 2026 (Safari 18+ is rolling out, Firefox not yet). */
@keyframes osc-section-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .cat { animation: osc-section-in var(--dur-medium) var(--ease-emphasized) backwards; }
}

/* ── Cmd+K redesign (Linear/Raycast pattern) ───────── */
.cmdk-input-wrap {
  position: relative;
  display: flex; align-items: center;
  border-bottom: 1px solid var(--border);
  padding: 0 8px 0 0;
}
.cmdk-search-ic {
  width: 18px; height: 18px;
  margin-left: 18px; margin-right: 4px;
  color: var(--text-dim);
  flex-shrink: 0;
}
.cmdk-input {
  flex: 1;
  border: none; outline: none;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body); font-size: 16px; font-weight: 500;
  padding: 16px 8px;
  min-width: 0;
}
.cmdk-input::placeholder { color: var(--text-dim); font-weight: 400; }
.cmdk-close {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--shape-pill);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
  flex-shrink: 0;
}
.cmdk-close:hover { color: var(--text); background: var(--surface-container-high); }
.cmdk-close .ic { width: 16px; height: 16px; }

/* Compact row layout: leading icon avatar + title/sub stack + optional badge.
 * Title and subtitle close together (4px). Rows separated 0px (visual via padding only). */
.cmdk-list .cmdk-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  grid-template-rows: auto auto;
  gap: 0 12px;
  align-items: center;
  padding: 8px 12px;
  margin: 0 4px;
  cursor: pointer;
  border-radius: var(--shape-sm);
  transition: background var(--t-fast);
}
.cmdk-list .cmdk-row.active { background: color-mix(in srgb, currentColor 8%, transparent); }
.cmdk-row-leading {
  grid-row: 1 / 3;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--surface-container-high);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  color: var(--primary-soft);
}
.cmdk-row-title {
  grid-column: 2; grid-row: 1;
  font-size: 14px; font-weight: 600; color: var(--text);
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmdk-row-sub   {
  grid-column: 2; grid-row: 2;
  font-family: var(--font-mono);
  color: var(--text-dim); font-size: 11px;
  margin-top: 2px;
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmdk-row-cat   {
  grid-column: 3; grid-row: 1 / 3;
  font-size: 10px; padding: 2px 8px;
  background: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: var(--shape-pill);
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700;
}

/* Mobile: cap panel height, allow scroll inside; close button works for exit. */
@media (max-width: 700px) {
  .cmdk .cmdk-panel {
    height: auto !important;
    max-height: 90vh !important;
    top: 5vh !important; left: 12px !important; right: 12px !important;
    width: auto !important;
    border-radius: var(--shape-lg) !important;
    bottom: auto !important;
  }
  .cmdk-input-wrap { padding: 0 4px 0 0; }
  .cmdk-search-ic { margin-left: 14px; }
  .cmdk-input { padding: 14px 8px; }
}

/* ── Platform-aware keyboard hint ───────────────── */
/* `html.is-mac` set in anti-FOUC head script. Default = Win/Linux. */
.kbd-mac { display: none; }
html.is-mac .kbd-mac { display: inline; }
html.is-mac .kbd-win { display: none; }

/* ── Directional filter transition ───────────────── */
/* Filter VTs animate ONLY the named region [view-transition-name: filter-grid]
 * (set on the consuming app's grid container). The rest of the page —
 * header, hero, etc — stays completely still during a filter change.
 *
 * CRITICAL: VT pseudo-elements live ON :root (html), not as descendants.
 * The descendant combinator (with a space) does NOT match — the selector
 * must use NO space between the originating element selector and the
 * pseudo-element. */

/* Freeze the (root) snapshot completely during a filter VT. */
html[data-filter-dir]::view-transition-old(root),
html[data-filter-dir]::view-transition-new(root) { animation: none !important; }

/* Fade direction: keep the UA cross-fade (which uses
 * -ua-mix-blend-mode-plus-lighter for clean alpha blending) and only
 * customize the duration / easing. 240ms felt too snappy ("jump"
 * sensation) — 400ms reads as a real transition. */
html[data-filter-dir="fade"]::view-transition-old(filter-grid),
html[data-filter-dir="fade"]::view-transition-new(filter-grid) {
  animation-duration: var(--dur-long) !important;
  animation-timing-function: var(--ease-emphasized) !important;
}

/* Slide direction: custom keyframes combining opacity + transform on the
 * filter-grid snapshot. UA mix-blend gets replaced; minor ghosting is
 * masked by the lateral motion. */
@keyframes osc-slide-out-left  { to   { opacity: 0; transform: translateX(-24px); } }
@keyframes osc-slide-in-right  { from { opacity: 0; transform: translateX( 24px); } }
@keyframes osc-slide-out-right { to   { opacity: 0; transform: translateX( 24px); } }
@keyframes osc-slide-in-left   { from { opacity: 0; transform: translateX(-24px); } }

html[data-filter-dir="left"]::view-transition-old(filter-grid)  { animation: osc-slide-out-left  var(--dur-long) var(--ease-emphasized) forwards !important; }
html[data-filter-dir="left"]::view-transition-new(filter-grid)  { animation: osc-slide-in-right  var(--dur-long) var(--ease-emphasized) forwards !important; }
html[data-filter-dir="right"]::view-transition-old(filter-grid) { animation: osc-slide-out-right var(--dur-long) var(--ease-emphasized) forwards !important; }
html[data-filter-dir="right"]::view-transition-new(filter-grid) { animation: osc-slide-in-left   var(--dur-long) var(--ease-emphasized) forwards !important; }

/* Cmd+K input — strip universal focus ring (the "ugly lines" issue).
 * Input wrap has a single bottom border; the input itself stays clean. */
.cmdk-input:focus,
.cmdk-input:focus-visible { box-shadow: none; outline: none; border: none; }

/* Cmd+K as native <dialog>: reset default dialog chrome, position centered. */
dialog.cmdk {
  border: none; padding: 0; margin: 0;
  max-width: 640px; width: 92vw;
  max-height: 70vh;
  background: var(--surface-container-high);
  color: var(--text);
  border-radius: var(--shape-lg);
  box-shadow: var(--elev-3);
  position: fixed;
  top: 12vh; left: 50%; transform: translateX(-50%);
  inset: 12vh auto auto 50%;
}
dialog.cmdk::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
dialog.cmdk .cmdk-panel { all: unset; display: flex; flex-direction: column; max-height: 70vh; }
@media (max-width: 700px) {
  dialog.cmdk { top: 5vh; left: 12px; right: 12px; transform: none; inset: 5vh 12px auto 12px;
                width: auto; max-width: none; max-height: 90vh; }
  dialog.cmdk .cmdk-panel { max-height: 90vh; }
}

/* ── Site footer (canonical OddStorm public footer) ──────── */
.site-footer {
  margin-top: 96px;
  background: var(--surface-container-low);
  border-top: 1px solid var(--border);
}
.site-footer-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 56px 24px 24px;
}
.site-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.site-footer-brand { padding-right: 24px; }
.site-footer-logo {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text);
  font-weight: 800; font-size: 18px; letter-spacing: 0.2px;
  text-decoration: none;
  margin-bottom: 16px;
}
.site-footer-mark {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--brand-gradient);
  box-shadow: 0 4px 12px rgba(88, 169, 58, 0.25);
}
.site-footer-tagline {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 32ch;
}
.site-footer-title {
  margin: 0 0 16px;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text);
}
.site-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer-col a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--t-fast);
}
.site-footer-col a:hover { color: var(--text); }
.site-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.site-footer-copy,
.site-footer-build {
  margin: 0;
  font-size: 12px;
  color: var(--text-dim);
}
.site-footer-build code {
  font-family: var(--font-mono);
  background: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: var(--shape-xs);
  padding: 2px 6px;
  color: var(--text-muted);
  font-size: 11px;
}
.site-footer-build-label {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10px;
  color: var(--text-dim);
}

@media (max-width: 800px) {
  .site-footer-inner { padding: 40px 16px 20px; }
  .site-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
    margin-bottom: 32px;
  }
  .site-footer-brand { grid-column: 1 / -1; padding-right: 0; }
}
@media (max-width: 480px) {
  .site-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .site-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ── Header — website variant (plain links, plain icons, no pill cluster) ── */
/* Override webapp pill aesthetic. .hdr / .hdr-nav-link inherit base layout
 * from the consuming app's css; this section removes the boxy chrome. */
.hdr-nav {
  display: flex;
  position: relative;
  gap: 28px;
  align-items: center;
}
.hdr-nav-link {
  position: relative;
  padding: 8px 0;
  border-radius: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t-fast);
}
.hdr-nav-link:hover {
  background: transparent;
  color: var(--text);
}
.hdr-nav-link.is-active {
  color: var(--text);
  /* No font-weight change on active — bold makes the link wider and the
   * surrounding layout shifts. The magic-line indicator + color shift is
   * enough visual feedback. */
}

/* "Magic line" — one underline indicator slides between links on hover.
 * Position + width set by JS (drawer.js or nav.js) measuring the link rect.
 * No per-link ::after — the indicator handles all visual feedback. */
.hdr-nav-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--primary);
  border-radius: 2px;
  transform: translateX(0);
  transition: transform var(--dur-medium) var(--ease-emphasized),
              width     var(--dur-medium) var(--ease-emphasized),
              opacity   var(--t-fast);
  pointer-events: none;
}

/* Locale + theme: plain icons, no border. Keep round hit-target via padding. */
.hdr-icon-btn {
  border: none;
  background: transparent;
  width: auto; height: auto;
  padding: 8px;
  border-radius: var(--shape-pill);
}
.hdr-icon-btn::before { display: none; }
.hdr-icon-btn:hover { background: color-mix(in srgb, currentColor 8%, transparent); border-color: transparent; }

/* Locale switcher trigger — drop the pill border + bg */
.hdr-actions .pill.locale-switcher {
  border: none;
  background: transparent;
  padding: 8px 6px;
  font-weight: 500;
  font-size: 13px;
  color: var(--text-muted);
}
.hdr-actions .pill.locale-switcher:hover { color: var(--text); background: color-mix(in srgb, currentColor 8%, transparent); }

/* Hamburger button — visible only on mobile */
.hdr-menu-btn {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--text);
  cursor: pointer;
  border-radius: var(--shape-pill);
  padding: 0;
}
.hdr-menu-btn:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.hdr-menu-btn svg { width: 22px; height: 22px; }

/* Mobile drawer — slides in from the right.
 *   - Scoped body scroll lock via body.drawer-open
 *   - Native dialog open/close transitions via @starting-style + allow-discrete
 *   - Active link has a left-edge accent stripe (Stripe / Linear pattern) */
body.drawer-open { overflow: hidden; }

.drawer {
  border: none;
  padding: 0;
  background: var(--bg);
  width: min(380px, 88vw);
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  position: fixed;
  inset: 0 0 0 auto;
  color: var(--text);
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.35);

  /* Class-based open/close transition. drawer.js toggles `.is-opening`
   * before showModal() and `.is-closing` before close() so we can paint
   * the from-state then transition to the to-state without relying on
   * @starting-style (which the prod CSS minifier mangles by stripping
   * inner selectors). Works on all Chromium/Safari/Firefox. */
  opacity: 1;
  transform: translateX(0);
  transition:
    transform 320ms var(--ease-emphasized),
    opacity 240ms var(--ease-emphasized);
}
.drawer.is-opening,
.drawer.is-closing {
  opacity: 0;
  transform: translateX(100%);
}

.drawer::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    background-color 320ms var(--ease-emphasized),
    backdrop-filter 320ms var(--ease-emphasized);
}
.drawer.is-opening::backdrop,
.drawer.is-closing::backdrop {
  background-color: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
}

.drawer-inner {
  display: flex; flex-direction: column;
  height: 100%;
  padding: 12px 16px max(env(safe-area-inset-bottom, 16px), 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 4px 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.drawer-close {
  background: transparent; border: none;
  color: var(--text-muted);
  width: 44px; height: 44px;       /* AA hit target */
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--shape-pill);
  cursor: pointer;
  margin-right: -8px;              /* visual nudge — close stays flush right */
}
.drawer-close:hover { background: color-mix(in srgb, currentColor 8%, transparent); color: var(--text); }
.drawer-close svg { width: 22px; height: 22px; }

.drawer-nav {
  display: flex; flex-direction: column;
  gap: 2px;
  flex: 1;
  padding: 12px 0;
}
.drawer-nav-link {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 15px; font-weight: 500;
  border-radius: var(--shape-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.drawer-nav-link:hover {
  color: var(--text);
  background: color-mix(in srgb, currentColor 6%, transparent);
}
.drawer-nav-link.is-active {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.drawer-nav-link.is-active::before {
  /* Left-edge accent stripe — visible without changing font weight. */
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
}
.drawer-nav-link svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-dim); }
.drawer-nav-link.is-active svg { color: var(--primary); }

/* iOS-Settings-style preference rows. Tap → cycle / expand sublist.
 * No popovers inside the drawer — everything stays inline. */
.drawer-section {
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.drawer-section-title {
  margin: 0 12px 8px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
}
.drawer-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-radius: var(--shape-sm);
  text-align: left;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast);
}
.drawer-row:hover { background: color-mix(in srgb, currentColor 6%, transparent); }
.drawer-row-ic { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-dim); }
.drawer-row-label { flex: 1; }
.drawer-row-value { color: var(--text-muted); font-size: 14px; }
.drawer-row-chev { width: 16px; height: 16px; color: var(--text-dim); transition: transform var(--t-fast); }
.drawer-row[aria-expanded="true"] .drawer-row-chev { transform: rotate(180deg); }

.drawer-sublist {
  list-style: none;
  margin: 4px 0 8px;
  padding: 4px 0;
  border-radius: var(--shape-sm);
  background: var(--surface-container-low);
}
.drawer-sublist[hidden] { display: none; }
.drawer-sublist li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 12px 48px;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.drawer-sublist li:hover { background: color-mix(in srgb, currentColor 6%, transparent); color: var(--text); }
.drawer-sublist li[aria-selected="true"] {
  color: var(--primary-soft);
  font-weight: 600;
}
.drawer-sublist li[aria-selected="true"]::after {
  content: '';
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}

/* Brand inside drawer header — suppress focus ring (auto-focused on open
 * but ring around a logo link looks weird; close button is the proper
 * focus target on open and we focus it explicitly via JS). */
.drawer-head .hdr-brand:focus,
.drawer-head .hdr-brand:focus-visible { box-shadow: none; outline: none; }

/* Hamburger morphs to X when drawer is open. .hdr-menu-btn renders 3
 * lines via SVG; we swap the path with CSS when body.drawer-open. */
.hdr-menu-btn .ic-menu,
.hdr-menu-btn .ic-x { transition: opacity var(--t-fast), transform var(--t-fast); }
.hdr-menu-btn .ic-x { display: none; }
body.drawer-open .hdr-menu-btn .ic-menu { display: none; }
body.drawer-open .hdr-menu-btn .ic-x { display: inline-block; }

@media (max-width: 1000px) {
  /* Hide pure top-nav links on mobile, show hamburger */
  .hdr-nav-link { display: none; }
  .hdr-menu-btn { display: inline-flex; }
  /* Hide locale + theme in header; they live in drawer */
  .hdr-actions #locale-switcher-mount,
  .hdr-actions #theme-toggle { display: none; }
  /* Footer becomes the primary footer; bottom-nav GONE */
  .bottom-nav { display: none !important; }
  body { padding-bottom: 0 !important; }
}