/* ============================================================
   GREENVILLE TRIUMPH - DASHBOARD COMPONENT LIBRARY
   design.greenvilletriumph.club/components.css
   Depends on tokens.css. Link tokens FIRST, then this file.

     <link rel="stylesheet" href="https://design.greenvilletriumph.club/tokens.css">
     <link rel="stylesheet" href="https://design.greenvilletriumph.club/components.css">

   House rules baked in:
   - Sharp edges by default. --radius-full only on pills / badges / thumbs.
   - Lift on hover (translateY), never scale.
   - Flat surfaces from the elevation ladder. No gradient page/section
     backgrounds; small decorative gradients (nav hairline) are fine.
   - No backdrop-filter on flat cards - only the sticky nav / overlays.
   - Status colors (success/warning/danger/info) are signals, not decoration.
   - Divided cell rows (stat bands, scoreboards) and left-bar accents carry
     symmetric horizontal padding so text NEVER touches a divider or accent
     bar. Flush only the first cell of each row to the container edge.
   - LABEL LAW: every uppercase mono label is --text-label / 600 /
     --track-label / muted. One size, one weight, one tracking, for every
     wayfinding label in the file. The featured kicker (.eyebrow-accent,
     .exec-hero-eyebrow) is the only 700 + --track-kicker + accent. Status
     hardware (badges, deltas, pills) lives at --text-xs, which is the
     absolute floor for any text. Never set a font-size below it, never
     use a raw rem/px font-size, never re-shrink a label in page CSS.
   ============================================================ */

/* ============================================================
   TOP NAV  (sticky, scroll-spy, frosted)
   ------------------------------------------------------------
   <header class="nav">
     <div class="nav-inner container-wide">
       <a class="nav-brand" href="#top"><img src="…/triumph-wordmark-on-dark.png" alt=""> Tickets</a>
       <nav class="nav-links">
         <a href="#overview" class="active">Overview</a> …
       </nav>
       <div class="nav-actions"><button class="btn btn-outline btn-sm">Export</button></div>
     </div>
   </header>
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(25, 30, 39, 0.82);  /* slate elevation, not the old saturated navy */
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--color-border);
}
.nav::before {                       /* accent hairline - a permitted small gradient */
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), var(--color-blue), transparent);
}
.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
  color: var(--color-text);
  white-space: nowrap;
}
.nav-brand:hover { color: var(--color-text); }
.nav-brand img { height: 24px; width: auto; }
.nav-brand .light { color: var(--color-text-soft); font-weight: var(--weight-regular); }
.nav-links {
  display: flex;
  align-items: stretch;
  height: 100%;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.nav-links a:hover { color: var(--color-text); }
.nav-links a.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.nav-actions { display: inline-flex; align-items: center; gap: var(--space-sm); margin-left: auto; }

/* ============================================================
   SECTION CHROME  (the canonical dashboard section)
   ------------------------------------------------------------
   <section id="overview">
     <div class="container-wide">
       <div class="section-header">
         <span class="section-number">01 · Overview</span>
         <h2 class="section-title">Match-day snapshot.</h2>
         <p class="section-desc">One supporting sentence about the section.</p>
       </div>
       <span class="subsection-label">Revenue</span>
       …
     </div>
   </section>
   Alternate <section class="bg-surface"> for banded rhythm.
   ============================================================ */
.section-header { margin-bottom: var(--space-lg); max-width: var(--measure); }
.section-number {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-label);   /* quiet-labels law: wayfinding never wears the accent */
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.6rem;
}
.section-title { margin-bottom: 0.55rem; }
.section-desc {
  color: var(--color-text-soft);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.section-lede {                      /* optional bigger lead under the title */
  font-size: var(--text-lg);
  font-weight: var(--weight-light);  /* 300 reads elegant at this size */
  color: var(--color-text);
  line-height: var(--leading-snug);
  max-width: var(--measure);
  margin-bottom: var(--space-md);
}
.subsection-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-lg);   /* subheaders are HEADINGS, not labels (rev 2026-06-09) */
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-subhead);
  text-transform: uppercase;
  color: var(--color-blue);
  margin: var(--space-lg) 0 var(--space-sm);
}
.subsection-label:first-child { margin-top: 0; }

/* ============================================================
   CARD  (flat panel from the elevation ladder)
   ------------------------------------------------------------
   <div class="card">
     <div class="card-head">
       <h3 class="card-title">Section breakdown</h3>
       <span class="badge">12 sections</span>
     </div>
     <div class="card-body">…</div>
   </div>
   Add .card-raised for a higher panel, .hover-lift for interactivity.
   ============================================================ */
.card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  padding: var(--card-pad);
}
.card-raised { background: var(--color-surface-3); box-shadow: var(--shadow-sm); }
.card-flush  { padding: 0; }          /* for cards that wrap a full-bleed table */
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.card-title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-text); }
.card-desc  { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 0.2rem; }
.card-body  { font-size: var(--text-sm); color: var(--color-text-soft); line-height: var(--leading-normal); }
.card-foot  {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ============================================================
   KPI  - two styles
   ------------------------------------------------------------
   Marker (no box): accent left-rule, cycles accent→blue→pop→info.
     <div class="grid-kpi">
       <div class="kpi"><div class="kpi-label">Revenue</div><div class="kpi-value">$2.4M</div></div> …
     </div>
   Tile (boxed): a card-wrapped KPI for the top-of-dashboard row.
     <div class="grid-kpi">
       <div class="kpi-tile"><div class="kpi-label">Sold</div><div class="kpi-value">18,472</div>
         <div class="kpi-foot"><span class="delta up">+12%</span> vs last match</div></div> …
     </div>
   ============================================================ */
.kpi {
  border-left: 3px solid var(--color-accent);
  padding: 0.25rem 0 0.25rem 0.85rem;
}
.kpi:nth-child(4n+2) { border-left-color: var(--color-blue); }
.kpi:nth-child(4n+3) { border-left-color: var(--color-pop); }
.kpi:nth-child(4n+4) { border-left-color: var(--color-info); }
.kpi-tile {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  padding: var(--space-md);
}
.kpi-tile:nth-child(4n+2) { border-top-color: var(--color-blue); }
.kpi-tile:nth-child(4n+3) { border-top-color: var(--color-pop); }
.kpi-tile:nth-child(4n+4) { border-top-color: var(--color-info); }
.kpi-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
}
.kpi-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xl);
  font-weight: var(--weight-extra);
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.05;
}
.kpi-foot { margin-top: 0.5rem; font-size: var(--text-xs); color: var(--color-text-muted); }

/* ============================================================
   STAT BAND  (bordered row of headline numbers)
   ------------------------------------------------------------
   <div class="stat-band">
     <div class="stat"><div class="stat-eyebrow">Tickets</div><div class="stat-value">3,842</div><div class="stat-meta">6/3 vs Lexington</div></div> …
   </div>
   ============================================================ */
.stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border-top: 1px solid var(--color-border-emphasis);
  border-bottom: 1px solid var(--color-border-emphasis);
}
.stat { padding: var(--space-md) var(--space-lg); border-right: 1px solid var(--color-border); }
.stat:last-child { border-right: none; }
.stat-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-label);   /* standard working-label tracking */
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
}
.stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-2xl);
  font-weight: var(--weight-extra);
  letter-spacing: -0.025em;
  color: var(--color-accent);
  line-height: 1.05;
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
}
.stat:nth-child(even) .stat-value { color: var(--color-blue); }
.stat-meta { margin-top: 0.4rem; font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 600px) {
  .stat { border-right: none; border-bottom: 1px solid var(--color-border); }
  .stat:last-child { border-bottom: none; }
}

/* ============================================================
   EXEC HERO  (executive scoreboard, the page lead / 10-second read)
   ------------------------------------------------------------
   The stat band's big sibling: a contained surface card that carries
   the page's single Fabiola headline, an as-of stamp, and a row of
   oversized scoreboard numerals (--text-4xl). One accent only: the
   green top bar plus the .is-lead numeral. Use ONCE, at the very top,
   as the report opener; the page controls the outer section rhythm.
     <div class="exec-hero-card">
       <span class="exec-hero-eyebrow">Greenville Triumph</span>
       <h1 class="exec-hero-title">2026 Season Ticketing</h1>
       <span class="exec-hero-sub">As of Jun 4 · 5 played · 14 to go</span>
       <div class="exec-scoreboard">
         <div class="exec-stat is-lead"><div class="exec-stat-label">Total revenue</div><div class="exec-stat-value">$499,086</div><div class="exec-stat-sub">season to date</div></div> …
       </div>
     </div>
   ============================================================ */
.exec-hero-card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-emphasis);
  border-top: 3px solid var(--color-accent);
  padding: var(--space-xl);
}
.exec-hero-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-kicker);   /* the page's ONE featured kicker: accent allowed */
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.7rem;
}
.exec-hero-title {                     /* the page's single Fabiola hero, weight 400 */
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-display);
  line-height: 0.85;
  letter-spacing: normal;
  text-transform: none;
  margin: 0 0 0.7rem;
  color: var(--color-text);
}
.exec-hero-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text-soft);
  margin-bottom: var(--space-lg);
}
.exec-scoreboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-border);
}
.exec-stat {
  /* Symmetric horizontal padding so the numeral never butts against the
     divider on either side. The first tile in each row is flushed left
     (rules below) so its number lines up with the hero title. */
  padding: var(--space-md) var(--space-lg) 0;
  border-right: 1px solid var(--color-border);
}
.exec-stat:first-child { padding-left: 0; }
.exec-stat:last-child { border-right: none; padding-right: 0; }
.exec-stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.55rem;
}
.exec-stat-value {                     /* the scoreboard numeral, --text-4xl */
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-4xl);
  font-weight: var(--weight-extra);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-text);
}
.exec-stat.is-lead .exec-stat-value { color: var(--color-accent); }
.exec-stat-sub {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
@media (max-width: 880px) {
  .exec-scoreboard { grid-template-columns: repeat(2, 1fr); }
  /* 2-up: left column (1,3) flush left, right column (2,4) ends its row */
  .exec-stat:nth-child(odd)  { padding-left: 0; }
  .exec-stat:nth-child(even) { border-right: none; padding-right: 0; }
  .exec-stat:nth-child(3), .exec-stat:nth-child(4) {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
  }
}
@media (max-width: 520px) {
  .exec-scoreboard { grid-template-columns: 1fr; }
  .exec-stat { border-right: none; padding-left: 0; padding-right: 0; }
  .exec-stat + .exec-stat {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
  }
}

/* ============================================================
   TITLE HERO  (title-card pages: matchday guide, event one-pagers)
   ------------------------------------------------------------
   The exec hero's poster sibling, proven on matchday.greenville
   triumph.club. For pages that ARE the event (a matchday guide,
   a one-pager), not pages that report on it. Anatomy: the Main
   lockup (the kit's default mark; Simplified belongs in the nav),
   a QUIET Inter-300 kicker (not mono, not uppercase, not green),
   the fixture in poster-scale Fabiola, and an info rail whose one
   Light Green value marks the live fact.

   SCALE BOUNDARY: poster Fabiola (up to 8.7rem) belongs to title-
   card pages ONLY. Data dashboards keep .h-display at the
   calibrated --text-display (~88px @1440). Never let either bleed
   into the other.

   <section class="title-hero">
     <div class="container-wide">
       <img class="title-hero-mark" src="…/triumph-main-on-dark.png" alt="Greenville Triumph">
       <p class="title-hero-kicker">Match 9 of 17 · 2026 USL League One</p>
       <h1 class="title-hero-title">Triumph vs Knoxville</h1>
       <div class="title-hero-rail">
         <div class="thr-item"><span class="thr-label">Kickoff</span><span class="thr-value">7:00 PM</span></div>
         <div class="thr-item is-live"><span class="thr-label">Gates</span><span class="thr-value">5:30 PM</span></div>
       </div>
     </div>
   </section>
   ============================================================ */
.title-hero {
  padding: var(--space-section) 0;
  border-bottom: 6px solid var(--color-accent);   /* the band base: 6px solid, not a hairline */
}
.title-hero-mark { height: clamp(84px, 64px + 4vw, 132px); width: auto; margin-bottom: var(--space-md); }
.title-hero-kicker {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text-soft);
  margin-bottom: var(--space-sm);
}
.title-hero-title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);              /* 400 - never heavier */
  font-size: clamp(2.9rem, 1rem + 7.8vw, 8.7rem);  /* poster scale, title-card pages only */
  line-height: 0.8;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
}
.title-hero-rail { display: flex; flex-wrap: wrap; row-gap: var(--space-md); }
.thr-item {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0 var(--space-lg);
  border-left: 1px solid rgba(210, 230, 229, 0.28);   /* Morning Mist hairline */
}
.thr-item:first-child { padding-left: 0; border-left: 0; }
.thr-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-soft);
}
.thr-value {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.thr-item.is-live .thr-value { color: var(--color-pop); }   /* Light Green marks the live fact */

/* ============================================================
   DATA TABLE  (bare; wrap in .table-scroll for overflow)
   ------------------------------------------------------------
   .num on a cell → mono tabular, right-aligned.
   .data-table.dense → tighter rows. tr.total / tfoot → totals row.
   .pos / .neg on a cell → success / danger numerals.
   <div class="table-scroll"><table class="data-table"> … </table></div>
   ============================================================ */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--color-border-emphasis);
  background: var(--color-bg);
  position: sticky;
  top: var(--nav-h);
  z-index: 5;
}
.data-table tbody td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
}
.data-table tbody tr { transition: background var(--duration-fast) var(--ease-out); }
.data-table tbody tr:hover { background: var(--accent-subtle); }
.data-table td.num, .data-table th.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.data-table td.pos { color: var(--color-success); }
.data-table td.neg { color: var(--color-danger); }
.data-table.dense thead th { padding: 0.45rem 0.65rem; }
.data-table.dense tbody td { padding: 0.45rem 0.65rem; font-size: var(--text-xs); }
.data-table tr.total td, .data-table tfoot td {
  font-weight: var(--weight-extra);
  color: var(--color-text);
  border-top: 2px solid var(--color-border-emphasis);
  background: var(--color-surface-1);
}

/* ============================================================
   BUTTONS  (sharp, lift on hover)
   ------------------------------------------------------------
   .btn-solid primary · .btn-outline default · .btn-ghost tertiary
   .btn-sm for toolbars. <button class="btn btn-solid">Save</button>
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  padding: 0.6rem 1.15rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 0.4rem 0.8rem; font-size: var(--text-xs); }
.btn-solid { background: var(--color-accent); color: var(--brand-deep-night); border-color: var(--color-accent); }
.btn-solid:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--color-text); border-color: var(--color-border-emphasis); }
.btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn-ghost { background: transparent; color: var(--color-text-soft); border-color: transparent; }
.btn-ghost:hover { color: var(--color-text); background: var(--color-surface-2); }

/* ============================================================
   INPUTS  (underline only; accent line grows from center)
   ------------------------------------------------------------
   <div class="input-wrap"><input class="input-underline" placeholder="Search…"></div>
   ============================================================ */
.input-wrap { position: relative; max-width: 360px; }
.input-underline {
  width: 100%;
  padding: 0.6rem 0;
  border: 0;
  border-bottom: 1.5px solid var(--color-border-emphasis);
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-sm);
  outline: 0;
}
.input-underline::placeholder { color: var(--color-text-faint); }
.input-wrap::after {
  content: '';
  position: absolute; bottom: 0; left: 50%;
  width: 0; height: 2px;
  background: var(--color-accent);
  transition: all var(--duration) var(--ease-out);
}
.input-wrap:focus-within::after { left: 0; width: 100%; }

/* ============================================================
   TOGGLE  (track + thumb; thumb → accent when on)
   ------------------------------------------------------------
   <input type="checkbox" id="t1" class="toggle-input">
   <label for="t1" class="toggle-track"><span class="toggle-thumb"></span></label>
   ============================================================ */
.toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track {
  display: inline-block; vertical-align: middle;
  width: 44px; height: 24px;
  background: rgba(242, 250, 250, 0.08);
  border: 1px solid var(--color-border-emphasis);
  border-radius: var(--radius-full);
  position: relative; cursor: pointer;
  transition: background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: var(--color-text-muted);
  border-radius: var(--radius-full);
  transition: left var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
}
.toggle-input:checked + .toggle-track { background: var(--accent-muted); border-color: var(--color-accent); }
.toggle-input:checked + .toggle-track .toggle-thumb { left: 22px; background: var(--color-accent); }

/* ============================================================
   TABS  (underline)  +  SEGMENTED toggle
   ------------------------------------------------------------
   <div class="tabs"><button class="tab active">Season</button> … </div>
   <div class="segmented"><button class="active">Day</button><button>Week</button></div>
   ============================================================ */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: var(--space-md);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  padding: 0.6rem 1rem;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.tab:hover { color: var(--color-text); }
.tab.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }

.segmented { display: inline-flex; border: 1px solid var(--color-border-emphasis); background: var(--color-surface-1); }
.segmented > button {
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-right: 1px solid var(--color-border);
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.segmented > button:last-child { border-right: none; }
.segmented > button:hover { color: var(--color-text); background: var(--color-surface-2); }
.segmented > button.active { color: var(--brand-deep-night); background: var(--color-accent); }

/* ============================================================
   TOOLBAR  +  FILTER CHIP
   ------------------------------------------------------------
   <div class="toolbar"><div class="toolbar-group"> … </div>
     <div class="toolbar-spacer"></div><button class="btn btn-outline btn-sm">Export</button></div>
   <button class="chip active">Stone Stadium <span class="chip-x">×</span></button>
   ============================================================ */
.toolbar {
  display: flex; align-items: center; gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-md);
}
.toolbar-group { display: inline-flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.toolbar-spacer { flex: 1; }
.chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--color-border-emphasis);
  color: var(--color-text-soft);
  background: var(--color-surface-1);
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.chip:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.chip.active { color: var(--color-accent); border-color: var(--color-accent); background: var(--accent-subtle); }
.chip-x { color: var(--color-text-muted); line-height: 1; }
.chip-x:hover { color: var(--color-text); }

/* ============================================================
   BADGES  (sharp = dense UI · pill = chips/labels)
   ------------------------------------------------------------
   <span class="badge badge-success">Sold Out</span>
   <span class="badge badge-pill badge-info">In Review</span>
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  line-height: 1.3;
  color: var(--color-text-soft);
  background: var(--color-surface-3);
  border: 1px solid var(--color-border-emphasis);
}
.badge-pill { border-radius: var(--radius-full); }
.badge-success { color: var(--color-success); background: var(--color-success-subtle); border-color: transparent; }
.badge-warning { color: var(--color-warning); background: var(--color-warning-subtle); border-color: transparent; }
.badge-danger  { color: var(--color-danger);  background: var(--color-danger-subtle);  border-color: transparent; }
.badge-info    { color: var(--color-info);    background: var(--color-info-subtle);    border-color: transparent; }
.badge-accent  { color: var(--color-accent);  background: var(--accent-subtle);        border-color: transparent; }

/* ============================================================
   PILL  (status with leading dot; .live pulses)
   ------------------------------------------------------------
   <span class="pill live">Live</span>  <span class="pill success">On track</span>
   ============================================================ */
.pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 0.22rem 0.65rem;
  border: 1px solid var(--color-border-emphasis);
  color: var(--color-text-soft);
  background: var(--color-surface-1);
  border-radius: var(--radius-full);
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-text-muted); flex-shrink: 0; }
.pill.success::before { background: var(--color-success); }
.pill.warning::before { background: var(--color-warning); }
.pill.danger::before  { background: var(--color-danger); }
.pill.info::before    { background: var(--color-info); }
.pill.live::before    { background: var(--color-success); animation: pill-pulse 1.8s ease-in-out infinite; }
@keyframes pill-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ============================================================
   DELTA CHIP  (period-over-period change)
   ------------------------------------------------------------
   <span class="delta up">12.4%</span> <span class="delta down">3.1%</span>
   ============================================================ */
.delta {
  display: inline-flex; align-items: center; gap: 0.2rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 0.12rem 0.45rem;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.delta::before { font-size: 0.85em; line-height: 1; }
.delta.up   { color: var(--color-success); border-color: var(--color-success); }
.delta.up::before { content: '\25B2'; }
.delta.down { color: var(--color-danger); border-color: var(--color-danger); }
.delta.down::before { content: '\25BC'; }
.delta.flat::before { content: '\2022'; }
.delta.plain { border: none; padding: 0; }

/* ============================================================
   PROGRESS  (bare track + fill; .block adds a labelled head)
   ------------------------------------------------------------
   <div class="progress"><span style="width:73%"></span></div>
   <div class="progress-block">
     <div class="progress-head"><span>Sell-through</span><span class="progress-num">73%</span></div>
     <div class="progress"><span style="width:73%"></span></div>
   </div>
   ============================================================ */
.progress { display: block; width: 100%; height: 6px; background: var(--color-surface-3); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--color-accent); transition: width var(--duration-slow) var(--ease-out); }
.progress.warning > span { background: var(--color-warning); }
.progress.danger  > span { background: var(--color-danger); }
.progress.sm { height: 3px; }
.progress.lg { height: 10px; }
.progress-block { display: flex; flex-direction: column; gap: 0.4rem; }
.progress-head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-xs); color: var(--color-text-muted); }
.progress-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color-text); font-weight: var(--weight-bold); }

/* ============================================================
   SPARKLINE  (fixed slot for a Chart.js micro-chart)
   ------------------------------------------------------------
   <span class="sparkline"><canvas></canvas></span>
   ============================================================ */
.sparkline { display: inline-block; width: 84px; height: 26px; vertical-align: middle; }
.sparkline.lg { width: 120px; height: 36px; }

/* ============================================================
   CHART CARD  (panel that frames a Chart.js canvas)
   ------------------------------------------------------------
   <div class="chart-card">
     <div class="chart-head"><h3 class="card-title">Revenue by channel</h3>
       <div class="segmented"> … </div></div>
     <div class="chart-canvas"><canvas id="c1"></canvas></div>
   </div>
   Give .chart-canvas a height; the canvas fills it.
   ============================================================ */
.chart-card { background: var(--color-surface-2); border: 1px solid var(--color-border); padding: var(--space-md); }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); flex-wrap: wrap; }
.chart-canvas { position: relative; width: 100%; height: 300px; }
.chart-canvas canvas { position: absolute; inset: 0; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-text-muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.chart-legend i { width: 10px; height: 10px; display: inline-block; }

/* ============================================================
   DRAWER  (right slide-in panel + scrim)
   ------------------------------------------------------------
   <div class="drawer-scrim" data-drawer></div>
   <aside class="drawer"><div class="drawer-head"><span class="drawer-title">Detail</span>
     <button class="drawer-close" data-drawer>×</button></div><div class="drawer-body"> … </div></aside>
   Toggle .open on both via JS.
   ============================================================ */
.drawer-scrim { position: fixed; inset: 0; background: rgba(2,0,34,0.55); z-index: 500; opacity: 0; pointer-events: none; transition: opacity var(--duration) var(--ease-out); }
.drawer-scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(460px, 92vw);
  background: var(--color-surface-2);
  border-left: 1px solid var(--color-border-emphasis);
  box-shadow: var(--shadow-lg);
  z-index: 501;
  transform: translateX(100%);
  transition: transform var(--duration) var(--ease-out);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-border); }
.drawer-title { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-text); }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--space-lg); }
.drawer-close { background: none; border: none; color: var(--color-text-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.45rem; }
.drawer-close:hover { color: var(--color-text); }

/* ============================================================
   TOAST  (ephemeral action feedback, bottom-right stack)
   ------------------------------------------------------------
   One fixed stack; JS appends a .toast per event and removes it
   after a timeout (add .leaving first to animate out). Floats on
   --shadow-float so it detaches from the canvas. State variant
   colors the left bar + dot only - body text stays neutral.

   <div class="toast-stack" id="toasts"></div>
   <div class="toast toast-success">
     <span class="toast-dot"></span>
     <div><div class="toast-title">Saved</div>
       <div class="toast-desc">Board updated.</div></div>
   </div>

   const t = document.getElementById('toasts');
   function toast(title, desc, kind='') {
     const el = document.createElement('div');
     el.className = 'toast' + (kind ? ' toast-' + kind : '');
     el.innerHTML = '<span class="toast-dot"></span><div>' +
       '<div class="toast-title"></div><div class="toast-desc"></div></div>';
     el.querySelector('.toast-title').textContent = title;
     el.querySelector('.toast-desc').textContent = desc || '';
     t.appendChild(el);
     setTimeout(() => { el.classList.add('leaving');
       el.addEventListener('animationend', () => el.remove()); }, 4000);
   }
   ============================================================ */
.toast-stack {
  position: fixed; bottom: var(--space-lg); right: var(--space-lg);
  z-index: 600;
  display: flex; flex-direction: column; gap: var(--space-sm);
  max-width: min(380px, 92vw);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-4);
  border: 1px solid var(--color-border-emphasis);
  border-left: 3px solid var(--color-text-muted);
  box-shadow: var(--shadow-float);
  animation: toast-in var(--duration) var(--ease-spring);
}
.toast.leaving { animation: toast-out var(--duration-fast) var(--ease-in) forwards; }
.toast-dot { width: 8px; height: 8px; margin-top: 0.4rem; border-radius: var(--radius-full); background: var(--color-text-muted); flex-shrink: 0; }
.toast-title { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text); }
.toast-desc  { font-size: var(--text-xs); color: var(--color-text-soft); margin-top: 0.1rem; line-height: var(--leading-snug); }
.toast-success { border-left-color: var(--color-success); }
.toast-success .toast-dot { background: var(--color-success); }
.toast-danger  { border-left-color: var(--color-danger); }
.toast-danger  .toast-dot { background: var(--color-danger); }
.toast-info    { border-left-color: var(--color-info); }
.toast-info    .toast-dot { background: var(--color-info); }
.toast-warning { border-left-color: var(--color-warning); }
.toast-warning .toast-dot { background: var(--color-warning); }
@keyframes toast-in  { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(12px); } }

/* ============================================================
   EMPTY / ERROR STATE
   ------------------------------------------------------------
   <div class="empty-state"><div class="empty-title">No matches found</div>
     <div class="empty-desc">Try widening the date range.</div></div>
   ============================================================ */
.empty-state, .error-state {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border-emphasis);
}
.error-state { color: var(--color-danger); border-style: solid; border-color: var(--color-danger); background: var(--color-danger-subtle); }
.empty-title, .error-title { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-text); margin-bottom: 0.35rem; }
.error-title { color: var(--color-danger); }
.empty-desc, .error-desc { font-size: var(--text-sm); max-width: 46ch; margin: 0 auto; line-height: var(--leading-snug); }

/* ============================================================
   STALE INDICATOR  ("updated 3m ago")
   ------------------------------------------------------------
   <span class="stale fresh">updated 2m ago</span>
   ============================================================ */
.stale {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.stale::before { content: ''; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-text-muted); }
.stale.fresh::before { background: var(--color-success); }
.stale.aging::before { background: var(--color-warning); }
.stale.dead::before  { background: var(--color-danger); }

/* ============================================================
   SKELETON  (loading shimmer)
   ------------------------------------------------------------
   <div class="skeleton" style="height:1.4rem"></div>
   <div class="skeleton-row"><span></span><span></span><span></span><span></span></div>
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-surface-3) 50%, var(--color-surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 0.75rem; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--color-border); }
.skeleton-row > span {
  height: 0.9rem;
  background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-surface-3) 50%, var(--color-surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ============================================================
   FROSTED GLASS  (sticky nav / overlays ONLY, never flat cards)
   ============================================================ */
.frosted {
  background: rgba(2, 0, 34, 0.55);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--color-border-emphasis);
  padding: var(--space-md) var(--space-lg);
}

/* ============================================================
   HOVER AFFORDANCES  (lift / border / glow - never scale)
   ============================================================ */
.hover-lift { transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out); }
.hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-border-emphasis); }
.hover-border { transition: border-color var(--duration) var(--ease-out); }
.hover-border:hover { border-color: var(--color-accent); }
.hover-glow { transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); }
.hover-glow:hover { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent), 0 0 24px rgba(97, 166, 49, 0.22); }

/* ============================================================
   SHADOW UTILITIES
   ============================================================ */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-float    { box-shadow: var(--shadow-float); }
.shadow-float-lg { box-shadow: var(--shadow-float-lg); }

/* ============================================================
   REVEAL  (scroll-into-view fade-up; orchestrated page load)
   ------------------------------------------------------------
   Add .reveal to any block; an IntersectionObserver adds .in when
   it scrolls into view, fading + lifting it into place. A light
   per-element delay staggers a row so a grid arrives in sequence.

   REQUIRES JS + a <noscript> guard. .reveal is opacity:0 by
   default - WITHOUT the observer (or with JS off) the content
   stays INVISIBLE. Always ship both of these alongside it:

     <noscript><style>.reveal{opacity:1!important;transform:none!important;}</style></noscript>
     <script>
       const io = new IntersectionObserver((es) => es.forEach(e => {
         if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
       }), { threshold: 0.12 });
       document.querySelectorAll('.reveal').forEach((el, i) => {
         el.style.transitionDelay = (i % 6) * 0.05 + 's';   // gentle row stagger
         io.observe(el);
       });
     </script>
   ============================================================ */
.reveal    { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   GUIDELINE CARDS  (do / don't pairs - for docs + audits)
   ------------------------------------------------------------
   <div class="grid-cards">
     <div class="guideline do"><div class="guideline-label">Do</div><ul><li>…</li></ul></div>
     <div class="guideline dont"><div class="guideline-label">Don't</div><ul><li>…</li></ul></div>
   </div>
   ============================================================ */
.guideline { background: var(--color-surface-2); border: 1px solid var(--color-border); border-top: 3px solid var(--color-accent); padding: var(--space-md) var(--space-lg); }
.guideline.dont { border-top-color: var(--color-blue); }
.guideline-label { font-family: var(--font-mono); font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: var(--track-label); text-transform: uppercase; margin-bottom: var(--space-sm); }
.guideline.do   .guideline-label { color: var(--color-accent); }
.guideline.dont .guideline-label { color: var(--color-blue); }
.guideline ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.guideline li { position: relative; padding-left: 1.1rem; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-text-soft); }
.guideline.do   li::before { content: '+'; position: absolute; left: 0; color: var(--color-accent); font-weight: var(--weight-bold); }
.guideline.dont li::before { content: '×'; position: absolute; left: 0; color: var(--color-blue); font-weight: var(--weight-bold); }