/**
 * v2-theme.css — Design token foundation + component stubs
 * Canonical token set extracted from app mockups 01/02 :root (identical 19-token
 * set across 00–05). Reviewed + reconciled by Sam 2026-06-10 (MMB-17355 review):
 * the first draft invented its own names (--s1..s4 inverted, --ink-1..4,
 * --line-1/2, --radius-*) — rewritten to the mockups' own names so future
 * mockup→page conversions copy CSS verbatim with no translation.
 *
 * Loaded AFTER v084-prototype.css so v2 tokens win.
 *
 * Naming (mockup-canonical):
 *   --bg            app background        #0a0b0d
 *   --s1..--s3      surfaces, ascending elevation (s1 bars/rails → s3 chips/wells)
 *   --ink-hi/--ink/--ink-mid/--ink-low   text emphasis scale
 *   --line/--line2  hairline / strong borders
 *   --olive         the single tactical accent (Ed approved 2026-06-10)
 *   --r-sm/md/lg    radius scale (8/12/18px)
 *
 * Sam-minted additions (token-mapping-notes.md ambiguity rulings, 2026-06-10):
 *   --olive-hi      hover accent (ambiguity 1 — v2 had no hover token)
 *   --ok/--warn/--bad  status set adopted from admin/landing mockups (ambiguity 2 —
 *                      app mockups define no status colors; 84+ legacy uses need these)
 *   --olive-dim / --bad-dim   accent / danger washes
 */

/* =============================================================================
   ROOT TOKENS (mockup-canonical — do not rename)
   ========================================================================== */

:root {
  /* Background + surfaces — ascending elevation */
  --bg: #0a0b0d;          /* app background                  */
  --s1: #101214;          /* surface 1 — bars, rails         */
  --s2: #15171a;          /* surface 2 — cards               */
  --s3: #1b1e22;          /* surface 3 — raised chips/wells  */

  /* Borders */
  --line: rgba(255,255,255,.06);   /* hairline */
  --line2: rgba(255,255,255,.13);  /* strong   */

  /* Text emphasis scale */
  --ink-hi: #f4f5f5;      /* headings, high emphasis  */
  --ink: #c7cacc;         /* body copy                */
  --ink-mid: #8a8f93;     /* muted labels             */
  --ink-low: #54585c;     /* placeholders, disabled   */

  /* Accent */
  --olive: #a4ae90;
  --olive-hi: #b9c2a6;                    /* hover (Sam-minted)   */
  --olive-dim: rgba(164,174,144,.13);     /* selected/active wash */

  /* Status (Sam-minted from admin/landing mockup set) */
  --ok: #6fae7c;
  --warn: #c9a45c;
  --bad: #c46a6a;
  --bad-dim: rgba(196,106,106,.14);       /* danger wash (old #3a0a0a tints) */

  /* Radius scale */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;

  /* Typography */
  --font-ui: 'Inter', -apple-system, sans-serif;
  --font-display: 'Barlow Condensed', 'Inter', sans-serif;

  /* Elevation */
  --card-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 10px 28px rgba(0,0,0,.38);

  /* Supplemental scales (not in mockup :root; used by component stubs below) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.18);
  --t-display: 2.5rem;
  --t-title: 1.25rem;
  --t-body: 1rem;
  --t-caption: 0.75rem;

  /* ---------------------------------------------------------------------------
     Legacy bridge — old token names inherit v2 values until bulk_style_swap.py
     rewrites their usages (mapping mirrors token-mapping.csv exactly).
     New code must use the canonical names above.
     ------------------------------------------------------------------------- */
  --bg-primary: var(--bg);
  --bg-secondary: var(--s1);
  --bg-card: var(--s2);
  --bg-input: var(--s3);
  --bg-elev: var(--s3);
  --border: var(--line);
  --border-focus: var(--line2);
  --text-primary: var(--ink-hi);
  --text-secondary: var(--ink);
  --text-muted: var(--ink-mid);
  --text-faint: var(--ink-low);
  --accent: var(--olive);
  --accent-hover: var(--olive-hi);
  --danger: var(--bad);
  --success: var(--ok);
  --warning: var(--warn);
  --radius: var(--r-sm);
  --radius-lg: var(--r-md);
}

/* Shot-timer scoped legacy bridge (ambiguity 4 ruling: --st-border keeps the
   stronger line2 so the timer's two-tier border hierarchy survives the merge). */
.shottimer-v2-root {
  --st-bg-primary: var(--bg);
  --st-bg-secondary: var(--s1);
  --st-bg-tertiary: var(--s2);
  --st-border: var(--line2);
  --st-border-subtle: var(--line);
  --st-text-primary: var(--ink-hi);
  --st-text-secondary: var(--ink);
  --st-text-muted: var(--ink-mid);
  --st-accent: var(--olive);
  --st-accent-dim: var(--olive-dim);
  --st-danger: var(--bad);
  --st-success: var(--ok);
}

/* =============================================================================
   COMPONENT STUBS
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Segmented Control (.segs / .seg)
   Pill-style tab switcher for subtab navigation.
   -------------------------------------------------------------------------- */

/* Mockup-verbatim per 01-home-loadouts.html .segs/.seg (2026-06-11 fidelity
   pass — the earlier stub invented its own typography; gates say verbatim). */
.segs {
  display: flex;
  gap: 4px;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 4px;
}

.seg {
  flex: 1;
  text-align: center;
  padding: 9px 0;
  background: transparent;
  border: none;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--ink-mid);
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.seg:hover {
  color: var(--ink);
}

.seg.active,
.seg[aria-selected="true"] {
  background: var(--s3);
  color: var(--ink-hi);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 4px 10px rgba(0, 0, 0, .3);
}

/* count suffix inside a seg (mockup .ct) */
.seg .ct {
  font-size: 10px;
  color: var(--ink-low);
  margin-left: 4px;
  letter-spacing: 0;
}

.seg.active .ct,
.seg[aria-selected="true"] .ct {
  color: var(--olive);
}

.seg:disabled,
.seg[aria-disabled="true"] {
  color: var(--ink-low);
  cursor: not-allowed;
}

/* -----------------------------------------------------------------------------
   App Bar (.appbar)
   Top navigation bar with title and actions.
   -------------------------------------------------------------------------- */

.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  min-height: 56px;
  background: var(--s1);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}

.appbar-title {
  font-size: var(--t-title);
  font-weight: 600;
  color: var(--ink-hi);
  letter-spacing: 0.25px;
  margin: 0;
}

.appbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.appbar-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.appbar-action:hover {
  background: var(--s2);
  color: var(--ink-hi);
}

.appbar-action:active {
  background: var(--s3);
}

/* -----------------------------------------------------------------------------
   Card v2 (.card-v2)
   New card surface component with v2 elevation and radius.
   -------------------------------------------------------------------------- */

.card-v2 {
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.card-v2:hover {
  box-shadow: var(--shadow-md);
}

.card-v2.elevated {
  background: var(--s3);
  box-shadow: var(--card-shadow);
}

.card-v2.bordered {
  border-color: var(--line2);
}

.card-v2.subtle {
  background: var(--s1);
  border-color: var(--line);
  box-shadow: none;
}

.card-v2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.card-v2-title {
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--ink-hi);
  margin: 0;
}

.card-v2-meta {
  font-size: var(--t-caption);
  color: var(--ink-mid);
  margin-top: 4px;
}

.card-v2-content {
  color: var(--ink);
  font-size: var(--t-body);
  line-height: 1.5;
}

.card-v2-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* -----------------------------------------------------------------------------
   Chip (.chip)
   Pill-style button/tag for filters, actions, and selections.
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--t-caption);
  font-weight: 500;
  color: var(--ink);
  background: var(--s1);
  border: 1px solid var(--line2);
  border-radius: 9999px; /* Full pill */
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.chip:hover {
  background: var(--s2);
  color: var(--ink-hi);
}

.chip.active,
.chip[aria-pressed="true"] {
  background: var(--olive);
  border-color: var(--olive);
  color: var(--bg);
}

.chip.active:hover,
.chip[aria-pressed="true"]:hover {
  background: var(--olive-hi);
  border-color: var(--olive-hi);
}

.chip:disabled,
.chip[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.chip .chip-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.chip .chip-close {
  width: 14px;
  height: 14px;
  margin-left: 2px;
  padding: 0;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.chip .chip-close:hover {
  opacity: 1;
}

/* Chip variants */
.chip.outline {
  background: transparent;
  border-color: var(--line);
}

.chip.ghost {
  background: transparent;
  border-color: transparent;
}

.chip.olive {
  background: var(--olive);
  border-color: var(--olive);
  color: var(--bg);
}

.chip.olive:hover {
  background: var(--olive-hi);
  border-color: var(--olive-hi);
}

/* -----------------------------------------------------------------------------
   Hero Stat (.hero-stat)
   Large stat display for dashboard metrics and key numbers.
   -------------------------------------------------------------------------- */

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--card-shadow);
}

.hero-stat.value-first {
  text-align: center;
  align-items: center;
}

.hero-stat.label-first {
  text-align: left;
  align-items: flex-start;
}

.hero-stat-value {
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 1;
  color: var(--ink-hi);
  letter-spacing: -0.02em;
  font-family: var(--font-display);
}

.hero-stat-value.small {
  font-size: var(--t-title);
}

.hero-stat-value.olive {
  color: var(--olive);
}

.hero-stat-label {
  font-size: var(--t-caption);
  font-weight: 500;
  color: var(--ink-mid);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hero-stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--t-caption);
  font-weight: 500;
  margin-top: 4px;
}

.hero-stat-delta.positive {
  color: var(--ok);
}

.hero-stat-delta.negative {
  color: var(--bad);
}

.hero-stat-meta {
  font-size: var(--t-caption);
  color: var(--ink-low);
  margin-top: 4px;
}

/* Compact variant */
.hero-stat.compact {
  padding: 12px 16px;
  border-radius: var(--r-md);
}

.hero-stat.compact .hero-stat-value {
  font-size: var(--t-title);
}

/* Horizontal layout variant */
.hero-stat.horizontal {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hero-stat.horizontal .hero-stat-value {
  order: 2;
}

.hero-stat.horizontal .hero-stat-label {
  order: 1;
}

/* -----------------------------------------------------------------------------
   Loadout Card v2 (.lcard)
   Kit list loadout cards per mockup 01-home-loadouts.html (MMB-17405).
   -------------------------------------------------------------------------- */

.lcard {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 12px;
  margin: 0 16px 10px;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  position: relative;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.lcard:hover {
  border-color: var(--line2);
}

.lcard:active {
  transform: translateY(1px);
}

.lthumb {
  width: 74px;
  height: 74px;
  flex: 0 0 auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(150deg, #1d2024, #0e1012);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.lthumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 7px);
}

.lthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

/* line-art glyphs echo the wireframe badger mark (mockup .wire system) */
.wire {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

.lthumb .loadout-glyph {
  width: 78%;
  height: auto;
  position: relative;
  z-index: 1;
}

.lbody {
  flex: 1;
  min-width: 0;
}

.lname {
  font-family: var(--font-display);
  font-size: 18.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-hi);
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lmeta {
  display: flex;
  gap: 10px;
  margin-top: 5px;
  font-size: 11px;
  color: var(--ink-mid);
  font-variant-numeric: tabular-nums;
  align-items: center;
}

.lplatform {
  color: var(--ink);
  font-weight: 600;
}

.ldot {
  color: var(--ink-low);
}

.lcount {
  color: var(--ink-mid);
}

.lchev {
  color: var(--ink-low);
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 300;
  margin-left: 4px;
}

/* Drag handle - preserved from legacy, positioned absolutely */
.lcard .loadout-drag-handle {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-low);
  cursor: grab;
  padding: 8px;
  font-size: 14px;
  line-height: 1;
}

.lcard .loadout-drag-handle:active {
  cursor: grabbing;
}

/* Drop zone at end of list */
.loadout-drop-end-zone {
  margin: 16px;
  padding: 12px;
  text-align: center;
  color: var(--ink-low);
  font-size: 12px;
  border: 2px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--s1);
}

/* =============================================================================
   UTILITY CLASSES (canonical names)
   ========================================================================== */

/* Surface backgrounds */
.bg-app { background-color: var(--bg); }
.bg-s1 { background-color: var(--s1); }
.bg-s2 { background-color: var(--s2); }
.bg-s3 { background-color: var(--s3); }

/* Text colors */
.text-ink-hi { color: var(--ink-hi); }
.text-ink { color: var(--ink); }
.text-ink-mid { color: var(--ink-mid); }
.text-ink-low { color: var(--ink-low); }
.text-olive { color: var(--olive); }

/* Border colors */
.border-line { border-color: var(--line); }
.border-line2 { border-color: var(--line2); }

/* Shadow utilities */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-card { box-shadow: var(--card-shadow); }

/* Radius utilities */
.radius-sm { border-radius: var(--r-sm); }
.radius-md { border-radius: var(--r-md); }
.radius-lg { border-radius: var(--r-lg); }

/* =============================================================
   GRAFT 2026-06-11 (Sam) — ported from agent/sam-20260610-1615-phase0-retheme
   Bridge + forced-colors mirror + scoped st bridge + body font +
   phase-0 metallic overrides. Bridge lines retire as phases rename usages.
   ========================================================== */
:root { --hero-grad: linear-gradient(150deg, #1d2024, #0e1012); }

/* ============================================================
   LAYER 2 — bridge: legacy token names → v2 tokens
   One line per `token` row in token-mapping.csv (st-* rows live in
   layer 3; there are no identity token rows).

   Selector is html:root (0,1,1) instead of :root (0,1,0) on purpose:
   index.html carries an inline <style> :root block AFTER all <link>
   tags that (re)defines --bg-elev and --text-faint; without the
   specificity bump those two bridges would lose on document order.
   ============================================================ */
html:root {
  /* css/style.css + css/v084-prototype.css :root set */
  --bg-primary: var(--bg);
  --bg-secondary: var(--s1);
  --bg-card: var(--s2);
  --bg-input: var(--s3);
  --bg-elev: var(--s3);
  --border: var(--line);
  --border-focus: var(--line2);
  --text-primary: var(--ink-hi);
  --text-secondary: var(--ink);
  --text-muted: var(--ink-mid);
  --text-faint: var(--ink-low);
  --accent: var(--olive);
  --accent-hover: var(--olive-hi);
  --danger: var(--bad);
  --success: var(--ok);
  --warning: var(--warn);
  --radius: var(--r-sm);
  --radius-lg: var(--r-md);

  /* used-but-never-defined tokens (notes: resolved via var() fallbacks
     until now — these definitions supersede the inline fallback hexes) */
  --rule: var(--line);
  --surface: var(--s2);
  --surface-elevated: var(--s3);
  --input-bg: var(--s3);
  --muted: var(--ink-mid);
  --primary: var(--olive);
  --text: var(--ink);
}

/* Forced-colors (Windows High Contrast) companion. css/style.css remaps
   the LEGACY tokens to system colors under this media query; the bridge
   above now outranks that block, so remap the V2 tokens instead — the
   bridge then carries the system colors through unchanged. Mirrors the
   style.css mapping. */
@media (forced-colors: active) {
  html:root {
    --bg: Canvas;
    --s1: Canvas;
    --s2: Canvas;
    --s3: Canvas;
    --line: CanvasText;
    --line2: Highlight;
    --ink-hi: CanvasText;
    --ink: CanvasText;
    --ink-mid: GrayText;
    --ink-low: GrayText;
    --olive: Highlight;
    --olive-hi: Highlight;
    --ok: CanvasText;
    --warn: Mark;
    --bad: Mark;
  }
}

/* ============================================================
   LAYER 3 — scoped shot-timer bridge
   Overrides the --st-* definitions in css/shot-timer-v2.css
   (.shottimer-v2-root, same specificity — this sheet loads later, so
   these win). Per CSV: --st-border → --line2 (keeps the strong/subtle
   border distinction, notes ambiguity 4), --st-border-subtle → --line.
   ============================================================ */
.shottimer-v2-root {
  --st-bg-primary: var(--bg);
  --st-bg-secondary: var(--s1);
  --st-bg-tertiary: var(--s2);
  --st-bg-elevated: var(--s3);
  --st-text-primary: var(--ink-hi);
  --st-text-secondary: var(--ink-mid);
  --st-text-tertiary: var(--ink-low);
  --st-accent: var(--olive);
  --st-accent-dim: var(--olive-dim);
  --st-success: var(--ok);
  --st-warning: var(--warn);
  --st-danger: var(--bad);
  --st-border: var(--line2);
  --st-border-subtle: var(--line);
}

/* ============================================================
   LAYER 4 — base overrides
   Body font only. Typography conversion (headings, display type) is a
   later phase — do not blanket-restyle here.
   ============================================================ */
body {
  font-family: var(--font-ui);
}


/* ------------------------------------------------------------------
 * Phase-0 overrides — worst literal-color offenders in legacy sheets.
 * The v2 signature control treatment is the metallic light gradient
 * with near-black ink (mockups 01 .fab / 03 .start). These rules win
 * by cascade order (this sheet loads after all legacy theme sheets).
 * Retire each block when the underlying rule is rewritten in its
 * phase's markup pass.
 * ------------------------------------------------------------------ */

/* FAB — was solid var(--text-primary) circle (style.css:300) */
.fab {
  border-radius: 18px;
  background: linear-gradient(165deg, #f4f5f5, #c9ccce);
  color: var(--bg);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .7);
}

/* Shot-timer START — was saturated green gradient (shot-timer-v2.css:153) */
.shottimer-v2-root .st-big-tap-button {
  background: linear-gradient(165deg, #f6f7f7, #c6c9cb);
  color: var(--bg);
  font-family: var(--font-display);
  letter-spacing: .3em;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.shottimer-v2-root .st-big-tap-button:active {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}
/* countdown/running hues come from the --st-* bridge; only the stale
   amber/red glow literals need re-tinting to the v2 status set */
.shottimer-v2-root .st-big-tap-button.countdown {
  box-shadow: 0 8px 32px rgba(201, 164, 92, .25);
}
.shottimer-v2-root .st-big-tap-button.running {
  box-shadow: 0 8px 32px rgba(196, 106, 106, .3);
}

/* ============================================================
   PHASE-0 SHELL RESKIN (Sam, 2026-06-11) — header, bottom nav,
   form-control font inheritance. Mockup-verbatim recipes from
   01-home-loadouts.html (.nav/.nitem → .bottom-nav/.bottom-nav-item,
   appbar wordmark → .header h1). Cascade overrides on the legacy
   shell classes; retire when the owning rules are rewritten in
   their conversion phase.
   ============================================================ */

/* Buttons/inputs do not inherit body font by default — without this the
   whole app's controls render in the UA default (Arial) despite --font-ui. */
button, input, select, textarea {
  font-family: inherit;
}

/* --- v2 app bar on the legacy .header shell --- */
.header {
  justify-content: space-between;
  padding: 8px 14px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.header h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: .24em;
  line-height: 1;
  color: var(--ink-hi);
  padding-top: 2px;
  margin: 0;
}

.header .header-logo {
  border-radius: 9px;
  box-shadow: 0 0 0 1px var(--line2);
}

/* --- v2 bottom nav (mockup .nav/.nitem recipe) --- */
.bottom-nav {
  background: rgba(13, 14, 16, .86);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
}

.bottom-nav-item {
  position: relative;
  padding-top: 6px;
  color: var(--ink-low);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
}

/* active indicator tick (mockup .ind) */
.bottom-nav-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 2.5px;
  border-radius: 2px;
  background: transparent;
}

.bottom-nav-item.active {
  color: var(--ink-hi);
}

.bottom-nav-item.active::before {
  background: var(--olive);
}