/* ===========================================================================
   tokens.css — BOLD TYPOGRAPHY design system, single source of truth.
   Poster design translated to web. Type is the entire visual language.
   Dark-mode is the canonical experience; the light theme overrides live
   in shell.css under .light-theme (kept reachable via the theme toggle).
   =========================================================================== */

@layer reset, tokens, base, components, utilities, overrides;

@layer tokens {
  :root {
    /* ── Surfaces ─────────────────────────────────────────────────────── */
    --bg: #0A0A0A;                 /* near-black, not pure */
    --panel: #0F0F0F;              /* card (slight elevation from bg) */
    --panel-soft: #1A1A1A;         /* muted surface */
    --surface: var(--panel);
    --surface-2: var(--panel-soft);

    /* ── Lines ────────────────────────────────────────────────────────── */
    --line: #262626;               /* barely-there divider */
    --line-strong: #404040;        /* heavier rule */
    --border: var(--line);
    --border-subtle: #1F1F1F;
    --border-hover: #525252;

    /* ── Text ─────────────────────────────────────────────────────────── */
    --text: #FAFAFA;               /* warm white */
    --muted: #A3A3A3;              /* legible on dark */
    --text-strong: #FFFFFF;

    /* ── Accent: vermillion. Urgent, warm, sparingly used. ────────────── */
    --accent: #FF3D00;
    --accent-strong: #E63300;
    --accent-soft: rgba(255, 61, 0, 0.12);
    --accent-hairline: rgba(255, 61, 0, 0.32);
    --accent-foreground: #0A0A0A;

    /* ── Brand / Primary aliases ──────────────────────────────────────── */
    --primary: var(--accent);
    --primary-strong: var(--accent-strong);
    --brand: var(--accent);
    --link: var(--accent);
    --link-hover: #FF6633;
    --on-primary: var(--accent-foreground);
    --focus: rgba(255, 61, 0, 0.55);
    --ring: var(--accent);

    /* ── Inputs ───────────────────────────────────────────────────────── */
    --input: #1A1A1A;

    /* ── Semantic — restrained, mostly accent-driven ──────────────────── */
    --ok: #5CE17F;
    --good: var(--ok);
    --warn: #FFB300;
    --danger: var(--accent);
    --bad: var(--danger);
    --pos: var(--ok);
    --neg: var(--danger);
    --indigo: #8C7BFF;

    /* ── Status badges ────────────────────────────────────────────────── */
    --status-fresh-bg: transparent;
    --status-fresh-border: rgba(92, 225, 127, 0.45);
    --status-fresh-text: #5CE17F;
    --status-partial-bg: transparent;
    --status-partial-border: rgba(255, 179, 0, 0.45);
    --status-partial-text: #FFB300;
    --status-stale-bg: transparent;
    --status-stale-border: rgba(255, 61, 0, 0.55);
    --status-stale-text: #FF6633;

    /* ── Soft semantic surfaces ───────────────────────────────────────── */
    --good-soft-bg: rgba(92, 225, 127, 0.06);
    --good-soft-border: rgba(92, 225, 127, 0.30);
    --good-soft-text: #5CE17F;
    --warn-soft-bg: rgba(255, 179, 0, 0.06);
    --warn-soft-border: rgba(255, 179, 0, 0.30);
    --warn-soft-text: #FFB300;
    --warn-soft-strong: #FFB300;
    --warn-soft-muted: #B58200;
    --info-soft-bg: rgba(255, 61, 0, 0.06);
    --info-soft-border: rgba(255, 61, 0, 0.30);
    --info-soft-text: var(--accent);
    --offer-bg: rgba(92, 225, 127, 0.04);
    --offer-hover: rgba(92, 225, 127, 0.10);

    /* ── Chips / Pills ────────────────────────────────────────────────── */
    --theme-chip-bg: transparent;
    --theme-chip-border: var(--line-strong);
    --theme-chip-text: var(--text);

    /* ── Topbar ───────────────────────────────────────────────────────── */
    --topbar-bg: rgba(10, 10, 10, 0.85);
    --topbar-text: rgba(250, 250, 250, 0.70);
    --topbar-text-hover: var(--text);
    --topbar-active: var(--accent);
    --hover-soft: rgba(255, 61, 0, 0.05);
    --row-hover-tint: rgba(255, 61, 0, 0.04);

    /* ── Charts ───────────────────────────────────────────────────────── */
    --chart-grid: #1F1F1F;
    --chart-grid-soft: #141414;
    --chart-axis: #525252;
    --chart-label: #A3A3A3;
    --chart-crosshair: #525252;
    --chart-marker-stroke: #0A0A0A;

    /* ── Radius: SHARP EDGES ONLY. ────────────────────────────────────── */
    --radius-card: 0px;
    --radius-control: 0px;
    --radius-sm: 0px;
    --radius-pill: 0px;

    /* ── Borders ──────────────────────────────────────────────────────── */
    --border-thin: 1px;
    --border-thick: 2px;

    /* ── Shadows: none. Depth = layered type and rules. ───────────────── */
    --shadow-xs: 0 0 0 transparent;
    --shadow-sm: 0 0 0 transparent;
    --shadow-md: 0 0 0 transparent;
    --shadow-lg: 0 0 0 transparent;
    --shadow-elevated: 0 0 0 transparent;
    --shadow-elevated-dark: 0 0 0 transparent;
    --shadow-toast: 0 24px 48px rgba(0, 0, 0, 0.6);

    /* ── Spacing (generous, editorial) ────────────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-10: 80px;
    --space-12: 112px;
    --space-section: 80px;
    --space-card: 32px;

    /* ── Typography stacks ────────────────────────────────────────────── */
    --font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body:    "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-serif:   "Playfair Display", Georgia, "Times New Roman", serif;
    --font-mono:    "JetBrains Mono", "Fira Code", "SFMono-Regular", Consolas, monospace;

    /* ── Font weights ─────────────────────────────────────────────────── */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* ── Type scale (poster ratios) ───────────────────────────────────── */
    --text-xs:   0.75rem;     /* 12px — fine print */
    --text-sm:   0.875rem;    /* 14px — captions */
    --text-base: 1rem;        /* 16px — body */
    --text-md:   1.125rem;    /* 18px — lead */
    --text-lg:   1.25rem;     /* 20px — subhead */
    --text-xl:   1.5rem;      /* 24px — section intro */
    --text-2xl:  2rem;        /* 32px — H3 */
    --text-3xl:  2.5rem;      /* 40px — H2 */
    --text-4xl:  3.5rem;      /* 56px — H1 mobile */
    --text-5xl:  4.5rem;      /* 72px — H1 tablet */
    --text-6xl:  6rem;        /* 96px — H1 desktop */
    --text-7xl:  8rem;        /* 128px — hero statement */
    --text-8xl:  10rem;       /* 160px — decorative */

    /* ── Tracking (letter-spacing) ────────────────────────────────────── */
    --track-tighter: -0.06em;   /* display headlines */
    --track-tight:   -0.04em;   /* large headings */
    --track-normal:  -0.01em;   /* body */
    --track-wide:    0.05em;    /* small labels */
    --track-wider:   0.1em;     /* all-caps labels */
    --track-widest:  0.2em;     /* sparse emphasis */

    /* ── Line heights ─────────────────────────────────────────────────── */
    --leading-none:    1;
    --leading-tight:   1.1;
    --leading-snug:    1.25;
    --leading-normal:  1.6;
    --leading-relaxed: 1.75;

    /* ── Motion (fast and decisive) ───────────────────────────────────── */
    --ease-poster: cubic-bezier(0.25, 0, 0, 1);
    --dur-fast: 150ms;
    --dur-base: 200ms;
    --dur-slow: 500ms;

    /* ── Layout ───────────────────────────────────────────────────────── */
    --container-max: 1200px;

    /* ── Subtle noise grain overlay (1.5% opacity) ────────────────────── */
    --noise-grain: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.98 0 0 0 0 0.98 0 0 0 0 0.98 0 0 0 0.015 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }
}

/* ===========================================================================
   base.css — BOLD TYPOGRAPHY baseline.
   Editorial reset, fluid heading scale, mono labels, generous body leading.
   =========================================================================== */

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img,
  picture,
  video,
  svg {
    max-width: 100%;
    display: block;
  }

  ::selection {
    background: var(--accent);
    color: var(--accent-foreground);
  }
}

@layer base {

  html {
    font-size: 16px;
    scroll-behavior: smooth;
    color-scheme: dark;
    /* Prevent iOS auto-zoom on focused inputs */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  html,
  body {
    margin: 0;
    padding: 0;
    color: var(--text);
    background: var(--bg);
    font-family: var(--font-body);
    font-feature-settings: "ss01" 1, "cv11" 1;
    line-height: var(--leading-normal);
    letter-spacing: var(--track-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Subtle noise grain overlay — tactile, never obtrusive. */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: var(--noise-grain);
    background-size: 200px 200px;
    pointer-events: none;
    z-index: 9999;
    opacity: 1;
    mix-blend-mode: overlay;
  }

  /* ── Headings: massive, tightly tracked, single line where possible. ── */
  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    color: var(--text);
    letter-spacing: var(--track-tight);
    line-height: var(--leading-tight);
    text-wrap: balance;
  }

  h1 {
    font-size: clamp(var(--text-4xl), 7vw, var(--text-6xl));
    letter-spacing: var(--track-tighter);
    line-height: var(--leading-none);
    font-weight: var(--font-weight-black);
  }

  h2 {
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    letter-spacing: var(--track-tighter);
    line-height: var(--leading-none);
    font-weight: var(--font-weight-bold);
  }

  h3 {
    font-size: clamp(var(--text-2xl), 3.5vw, var(--text-3xl));
    letter-spacing: var(--track-tight);
    font-weight: var(--font-weight-bold);
  }

  h4 {
    font-size: var(--text-xl);
    letter-spacing: var(--track-tight);
    font-weight: var(--font-weight-semibold);
  }

  h5 {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
  }

  h6 {
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--track-wider);
    font-family: var(--font-mono);
  }

  p {
    margin: 0 0 var(--space-4) 0;
    line-height: var(--leading-normal);
    color: var(--text);
    text-wrap: pretty;
  }

  p:last-child { margin-bottom: 0; }

  /* ── Links: underline is the primary affordance. ────────────────────── */
  a {
    color: var(--accent);
    text-decoration: none;
    background-image: linear-gradient(var(--accent), var(--accent));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    transition: background-size var(--dur-fast) var(--ease-poster),
                color var(--dur-fast) var(--ease-poster);
  }

  a:hover,
  a:focus-visible {
    color: var(--link-hover);
    background-size: 110% 2px;
  }

  /* ── Type primitives ────────────────────────────────────────────────── */
  small,
  .text-sm { font-size: var(--text-sm); }
  .text-xs { font-size: var(--text-xs); }

  strong, b { font-weight: var(--font-weight-bold); color: var(--text); }
  em, i { font-style: italic; }

  /* ── Form elements ──────────────────────────────────────────────────── */
  button,
  [role="button"],
  summary,
  select {
    cursor: pointer;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: var(--text);
  }

  input,
  select,
  textarea {
    background: var(--input);
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 10px 14px;
    min-height: 48px;
    font-size: var(--text-base);
    letter-spacing: var(--track-normal);
    transition: border-color var(--dur-fast) var(--ease-poster);
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--muted);
  }

  /* ── Focus: 2px accent ring, 2px offset, no glow. ───────────────────── */
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  input:focus,
  select:focus,
  textarea:focus {
    outline: none;
    border-color: var(--accent);
  }

  /* ── Tabular numerals everywhere numbers appear. ────────────────────── */
  td, th, .num, .kpi span, .kpi .value, .dash-card-value, .metric-tile span,
  .stat, [data-num] {
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
  }

  /* ── Horizontal rule = full-width hairline. ─────────────────────────── */
  hr {
    border: none;
    border-top: 1px solid var(--line);
    margin: var(--space-8) 0;
  }

  /* ── Code & pre ─────────────────────────────────────────────────────── */
  code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.95em;
    color: var(--text);
  }

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

@layer components {
/* ===========================================================================
   shell.css — BOLD TYPOGRAPHY shell + layout + components.
   All :root tokens live in tokens.css; reset + base in base.css.
   This file owns class-level styling for cards, topbar, KPIs, history,
   buttons, callouts, FAQ, etc.
   =========================================================================== */

/* ────────────────────────────────────────────────────────────────────────────
   1. Shell / layout
   ──────────────────────────────────────────────────────────────────────────── */

main.shell {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-7) var(--space-5);
  display: grid;
  gap: var(--space-5);
  position: relative;
  z-index: 1;
}

@media (min-width: 760px) {
  main.shell {
    padding: var(--space-8) var(--space-7);
    gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  main.shell {
    padding: var(--space-10) var(--space-8);
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   2. Cards = bordered editorial sections, NOT raised panels
   ──────────────────────────────────────────────────────────────────────────── */

.card {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: var(--space-7) var(--space-6);
  transition: border-color var(--dur-fast) var(--ease-poster);
  position: relative;
}

.card--elevated {
  border-color: var(--line-strong);
  background: var(--panel);
}

@media (hover: hover) {
  .card:not(.topbar):hover {
    border-color: var(--border-hover);
  }
}

/* Featured / accent variant — used for highlighted product card */
.card.is-featured {
  border: 2px solid var(--accent);
}

.card.is-featured::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 64px;
  height: 4px;
  background: var(--accent);
}

/* ────────────────────────────────────────────────────────────────────────────
   3. Topbar — minimal, sticky, mono-cased nav
   ──────────────────────────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: nowrap;
  overflow: hidden;
  padding: var(--space-4) var(--space-5);
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: none;
  border-bottom: 1px solid var(--line);
  margin: calc(var(--space-7) * -1) calc(var(--space-5) * -1) var(--space-4);
}

@media (min-width: 760px) {
  .topbar {
    margin: calc(var(--space-8) * -1) calc(var(--space-7) * -1) var(--space-4);
    padding: var(--space-4) var(--space-7);
  }
}

@media (min-width: 1024px) {
  .topbar {
    margin: calc(var(--space-10) * -1) calc(var(--space-8) * -1) var(--space-7);
    padding: var(--space-4) var(--space-8);
  }
}

.brand {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: var(--font-weight-black);
  font-style: normal;
  font-size: var(--text-md);
  letter-spacing: var(--track-tighter);
  text-transform: uppercase;
  text-decoration: none;
  background: none;
  position: relative;
  padding: 0 0 4px 0;
}

.brand::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 24px;
  background: var(--accent);
}

.brand:hover { color: var(--text); background: none; }

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: nowrap;
  overflow: hidden;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 0;
  background: none;
  color: var(--topbar-text);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
  border: none;
  border-radius: 0;
  background-image: none;
  transition: color var(--dur-fast) var(--ease-poster);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-fast) var(--ease-poster);
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--text);
  background: none;
}

.nav a:hover::after,
.nav a:focus-visible::after {
  transform: scaleX(1);
}

.nav a.active {
  color: var(--text);
}

.nav a.active::after {
  transform: scaleX(1);
  background: var(--accent);
}

.theme-toggle-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 0;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: border-color var(--dur-fast) var(--ease-poster),
              color var(--dur-fast) var(--ease-poster);
}

.theme-toggle-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ────────────────────────────────────────────────────────────────────────────
   4. Display headings (override base for in-shell headlines)
   ──────────────────────────────────────────────────────────────────────────── */

h1 {
  margin: 0 0 var(--space-3) 0;
}

h2 {
  margin: 0 0 var(--space-3) 0;
}

/* ────────────────────────────────────────────────────────────────────────────
   5. Status chips & badges — sharp, mono-cased, hairline only
   ──────────────────────────────────────────────────────────────────────────── */

.status-chip,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 10px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  border-radius: 0;
}

.status-chip::before,
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent);
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────────────────────
   6. CTA / Button row
   ──────────────────────────────────────────────────────────────────────────── */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
}

/* ────────────────────────────────────────────────────────────────────────────
   7. Hero / metric grids
   ──────────────────────────────────────────────────────────────────────────── */

.hero-grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, .9fr);
  align-items: start;
}

.hero-stack {
  display: grid;
  gap: var(--space-4);
}

.metric-strip {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.metric-tile {
  border: none;
  border-right: 1px solid var(--line);
  padding: var(--space-5) var(--space-5);
  background: transparent;
  display: grid;
  gap: var(--space-2);
  border-radius: 0;
}

.metric-tile:last-child { border-right: none; }

.metric-tile strong {
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
}

.metric-tile span {
  font-size: var(--text-2xl);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--track-tight);
  line-height: var(--leading-none);
}

/* ────────────────────────────────────────────────────────────────────────────
   8. Buttons — text-only with animated accent underline (primary affordance)
   ──────────────────────────────────────────────────────────────────────────── */

.btn,
button.primary,
button.soft,
button.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 10px 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  cursor: pointer;
  border-radius: 0;
  position: relative;
  background-image: none;
  transition: color var(--dur-fast) var(--ease-poster),
              transform var(--dur-fast) var(--ease-poster);
}

.btn:hover { text-decoration: none; }

.btn:active,
button.primary:active,
button.soft:active,
button.ghost:active {
  transform: translateY(1px);
}

/* Primary button = text in accent + bold animated underline */
.btn-primary,
button.primary {
  color: var(--accent);
  padding: 10px 0;
}

.btn-primary::after,
button.primary::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform var(--dur-fast) var(--ease-poster);
}

.btn-primary:hover::after,
button.primary:hover::after {
  transform: scaleX(1.1);
}

/* Secondary = bordered, inverts on hover */
.btn-secondary {
  color: var(--text);
  border: 1px solid var(--text);
  padding: 10px 24px;
  background-image: none;
  transition: background-color var(--dur-fast) var(--ease-poster),
              color var(--dur-fast) var(--ease-poster);
}

.btn-secondary:hover {
  background: var(--text);
  color: var(--bg);
}

/* Soft / Ghost — minimal label, animated thin underline on hover */
.btn.btn-inline,
button.soft,
button.ghost {
  color: var(--muted);
  padding: 10px 0;
}

.btn.btn-inline::after,
button.soft::after,
button.ghost::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-fast) var(--ease-poster);
}

.btn.btn-inline:hover,
button.soft:hover,
button.ghost:hover {
  color: var(--text);
}

.btn.btn-inline:hover::after,
button.soft:hover::after,
button.ghost:hover::after {
  transform: scaleX(1);
}

/* Compact inline button */
.btn-inline-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0;
  margin-right: var(--space-4);
}

.btn-inline-compact + .btn-inline-compact {
  margin-left: 0;
}

.btn-sm { font-size: var(--text-xs); }

/* ────────────────────────────────────────────────────────────────────────────
   9. Grids
   ──────────────────────────────────────────────────────────────────────────── */

.grid-2 {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kpis,
.kpi-grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Tracker page has 4 cards → 2×2 symmetric */
#kpi-grid { grid-template-columns: repeat(2, 1fr); }

/* Ads panel permanently hidden */
.ad-panel { display: none !important; }

.kpi {
  border: none;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: var(--space-5) var(--space-5);
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 140px;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: background-color var(--dur-base) var(--ease-poster);
}

.kpi:last-child { border-right: none; }

.kpi:hover {
  background: var(--panel-soft);
}

.kpi strong,
.kpi .label {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
}

.kpi span,
.kpi .value {
  margin: 0;
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
  line-height: var(--leading-none);
  letter-spacing: var(--track-tighter);
  font-weight: var(--font-weight-black);
  font-family: var(--font-display);
  color: var(--text);
}

.kpi-note,
.kpi .sub {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: var(--track-wide);
}

/* ────────────────────────────────────────────────────────────────────────────
   10. List / search tools
   ──────────────────────────────────────────────────────────────────────────── */

.list-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

.list-tools input {
  min-height: 48px;
  min-width: 240px;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 14px;
  background: var(--input);
  color: var(--text);
}

.list-tools input:focus {
  border-color: var(--accent);
  outline: none;
}

/* ────────────────────────────────────────────────────────────────────────────
   11. History list / month accordion / history cards
   ──────────────────────────────────────────────────────────────────────────── */

.history-list {
  display: grid;
  gap: 0;
}

.history-list a {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5) 0;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-decoration: none;
  background-image: none;
  color: var(--text);
  transition: padding-left var(--dur-fast) var(--ease-poster),
              background-color var(--dur-fast) var(--ease-poster);
}

.history-list a:hover {
  padding-left: var(--space-4);
  background: var(--panel-soft);
  color: var(--accent);
  text-decoration: none;
}

.history-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--track-tight);
}

.history-sub {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.history-month {
  padding: 0 var(--space-5);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.history-month-summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-5) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  position: relative;
  user-select: none;
  transition: color var(--dur-fast) var(--ease-poster);
}

.history-month-summary strong {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--track-tight);
}

.history-month-summary:hover { color: var(--accent); }

.history-month-summary::-webkit-details-marker { display: none; }

.history-month-summary::after {
  content: "+";
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 300;
  transition: transform var(--dur-base) var(--ease-poster);
  flex-shrink: 0;
}

.history-month[open] .history-month-summary::after {
  content: "−";
  color: var(--accent);
  transform: rotate(0);
}

.history-month .history-list {
  padding: 0 0 var(--space-4) 0;
}

.history-month .meta-line {
  padding: 0 0 var(--space-4) 0;
  margin: 0;
}

.badge-mini {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 0;
  border: 1px solid var(--status-fresh-border);
  background: var(--status-fresh-bg);
  color: var(--status-fresh-text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
}

.badge-mini.partial {
  border-color: var(--status-partial-border);
  background: var(--status-partial-bg);
  color: var(--status-partial-text);
}

.badge-mini.stale {
  border-color: var(--status-stale-border);
  background: var(--status-stale-bg);
  color: var(--status-stale-text);
}

.meta-line {
  font-size: var(--text-sm);
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: var(--track-wide);
}

.num-strong {
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  letter-spacing: var(--track-tight);
}

.meta-compact { font-size: var(--text-sm); }

/* ────────────────────────────────────────────────────────────────────────────
   12. API / code block
   ──────────────────────────────────────────────────────────────────────────── */

.api-code-block {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: var(--space-5);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text);
}

.mt-sm { margin-top: var(--space-3); }

ul.clean {
  margin: 0;
  padding-left: 20px;
}

ul.clean li {
  margin: 6px 0;
}

ul.clean li::marker {
  color: var(--accent);
}

/* ────────────────────────────────────────────────────────────────────────────
   13. Cookie banner
   ──────────────────────────────────────────────────────────────────────────── */

.cookie-banner {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  left: auto;
  max-width: 420px;
  z-index: 9999;
  border: 1px solid var(--accent);
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
  padding: var(--space-6);
  box-shadow: var(--shadow-toast);
}

.cookie-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cookie-text {
  font-size: var(--text-sm);
  color: var(--muted);
  max-width: 760px;
  line-height: var(--leading-normal);
}

.cookie-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.cookie-actions button {
  border: none;
  border-radius: 0;
  min-height: 36px;
  padding: 8px 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  position: relative;
  transition: color var(--dur-fast) var(--ease-poster);
}

.cookie-actions button:hover { color: var(--text); }

.cookie-actions button.primary {
  background: transparent;
  color: var(--accent);
}

.cookie-actions button.primary::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform var(--dur-fast) var(--ease-poster);
}

.cookie-actions button.primary:hover::after { transform: scaleX(1.1); }

/* ────────────────────────────────────────────────────────────────────────────
   14. History grid (historico page)
   ──────────────────────────────────────────────────────────────────────────── */

.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  margin-top: var(--space-5);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.history-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-5);
  gap: var(--space-3);
  text-decoration: none;
  min-height: 140px;
  background-image: none;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  transition: background-color var(--dur-fast) var(--ease-poster);
}

.history-card:hover {
  background: var(--panel-soft);
  text-decoration: none;
}

.history-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
}

.history-card-date {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  color: var(--text);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
}

.history-card-body {
  flex: 1;
  display: grid;
  gap: var(--space-2);
}

.history-card-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

.history-card-val {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  color: var(--text);
  font-size: var(--text-md);
  letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

.history-card-footer {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
}

.history-card-btn {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  transition: color var(--dur-fast) var(--ease-poster);
}

.history-card:hover .history-card-btn {
  color: var(--accent);
}

/* ────────────────────────────────────────────────────────────────────────────
   15. Narrow content + callouts
   ──────────────────────────────────────────────────────────────────────────── */

.content-narrow {
  max-width: 65ch;
  line-height: var(--leading-relaxed);
  font-size: var(--text-md);
  color: var(--text);
}

.content-narrow.contact {
  max-width: 50ch;
  line-height: var(--leading-normal);
}

.content-narrow p { margin-bottom: var(--space-5); }

.content-muted-spaced {
  margin-bottom: var(--space-6);
}

.callout-warning {
  background: transparent;
  border: none;
  border-left: 2px solid var(--accent);
  padding: var(--space-3) var(--space-5);
  margin: var(--space-7) 0;
  border-radius: 0;
}

.callout-warning strong {
  color: var(--accent);
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
}

.callout-warning p {
  color: var(--text);
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

/* ────────────────────────────────────────────────────────────────────────────
   16. Contact card / FAQ
   ──────────────────────────────────────────────────────────────────────────── */

.contact-card {
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 0;
  padding: var(--space-7);
  text-align: left;
  margin-bottom: var(--space-7);
  position: relative;
}

.contact-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 64px;
  height: 4px;
  background: var(--accent);
}

.contact-card-title {
  margin: 0 0 var(--space-4) 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-2xl);
  letter-spacing: var(--track-tight);
}

.contact-card .btn {
  display: inline-flex;
  width: auto;
}

.faq-item {
  margin: 0;
  padding: var(--space-5) 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.faq-item summary {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-lg);
  letter-spacing: var(--track-tight);
  cursor: pointer;
  color: var(--text);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  transition: color var(--dur-fast) var(--ease-poster);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  color: var(--accent);
  font-weight: 300;
  transition: transform var(--dur-base) var(--ease-poster);
}

.faq-item[open] summary::after { content: "−"; }

.faq-item summary:hover { color: var(--accent); }

.faq-item p {
  margin-top: var(--space-4);
  margin-bottom: 0;
  font-size: var(--text-md);
  color: var(--text);
  line-height: var(--leading-relaxed);
  max-width: 65ch;
}

/* ────────────────────────────────────────────────────────────────────────────
   17. Home page custom blocks
   ──────────────────────────────────────────────────────────────────────────── */

.home-summary-card {
  margin-top: var(--space-7);
}

.home-summary-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--track-tight);
  margin-bottom: var(--space-5);
}

.home-how-card { margin-top: var(--space-2); }

.home-how-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: var(--space-3);
}

.home-how-note { margin: var(--space-4) 0 0 0; }

.home-how-intro { margin: 0 0 var(--space-5) 0; }

.home-how-subtitle {
  margin: var(--space-6) 0 var(--space-4) 0;
  font-size: var(--text-xl);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--track-tight);
}

.home-how-sections {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.home-how-section {
  border: none;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: var(--space-5);
  background: transparent;
}

.home-how-section h4 {
  margin: 0 0 var(--space-3) 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--track-tight);
}

.home-how-section p {
  margin: 0;
  font-size: var(--text-base);
  color: var(--muted);
  line-height: var(--leading-normal);
}

/* ────────────────────────────────────────────────────────────────────────────
   18. CBA (Canasta Básica) page
   ──────────────────────────────────────────────────────────────────────────── */

.cba-page { display: grid; gap: var(--space-7); }

.cba-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-4);
}

.cba-toc a {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: transparent;
  background-image: none;
  border: none;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  border-radius: 0;
  transition: color var(--dur-fast) var(--ease-poster);
}

.cba-toc a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-fast) var(--ease-poster);
}

.cba-toc a:hover {
  color: var(--text);
  background: transparent;
  text-decoration: none;
}

.cba-toc a:hover::after { transform: scaleX(1); }

.cba-section {
  display: grid;
  gap: var(--space-3);
}

.cba-section h3 { margin: 0; }

.cba-metrics {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.cba-metric {
  border: none;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: var(--space-5);
  background: transparent;
  display: grid;
  gap: var(--space-2);
}

.cba-metric strong {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--font-weight-medium);
}

.cba-metric span {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-black);
  color: var(--text);
  letter-spacing: var(--track-tighter);
  line-height: var(--leading-none);
  font-variant-numeric: tabular-nums;
}

.cba-category-grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.cba-category-card {
  border: none;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: var(--space-4);
  background: transparent;
}

.cba-category-card h4 {
  margin: 0 0 var(--space-2) 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--track-tight);
}

.cba-category-card p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.cba-table-wrap {
  border: 1px solid var(--line);
  border-radius: 0;
  overflow: auto;
  background: transparent;
}

.cba-table-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cba-table-tools input,
.cba-table-tools select {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--input);
  color: var(--text);
  padding: 0 var(--space-3);
  font-family: var(--font-body);
}

.cba-table-tools input { min-width: 260px; }
.cba-table-tools select { min-width: 180px; }

.cba-products-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.cba-table-caption {
  caption-side: top;
  text-align: left;
  padding: var(--space-3);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
}

.cba-products-table th,
.cba-products-table td {
  border-bottom: 1px solid var(--line);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-base);
  vertical-align: top;
}

.cba-products-table th {
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--muted);
  border-bottom: 2px solid var(--line-strong);
  font-weight: var(--font-weight-medium);
}

.cba-products-table tbody tr:last-child td {
  border-bottom: none;
}

.cba-products-table tbody tr:hover {
  background: var(--panel-soft);
}

.cba-product-link {
  color: var(--text);
  text-decoration: none;
  background-image: none;
  font-weight: var(--font-weight-medium);
  transition: color var(--dur-fast) var(--ease-poster);
}

.cba-product-link:hover {
  color: var(--accent);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

.cba-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  border: 1px solid transparent;
}

.cba-status.con-dato {
  color: var(--status-fresh-text);
  background: transparent;
  border-color: var(--status-fresh-border);
}

.cba-status.sin-dato {
  color: var(--status-stale-text);
  background: transparent;
  border-color: var(--status-stale-border);
}

.cba-chart {
  width: 100%;
  min-height: 360px;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: var(--space-2);
  background: var(--panel);
}

.cba-chart-empty {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-size: var(--text-xs);
}

.cba-helper-note {
  margin: var(--space-2) 0 0 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.cba-intro {
  margin: 0;
  font-size: var(--text-base);
  max-width: 72ch;
}

/* Simulador de canasta */
.cba-sim-controls {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.cba-sim-arrow {
  font-size: var(--text-lg);
  color: var(--muted);
  padding-bottom: 2px;
  flex-shrink: 0;
}

.cba-sim-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 500;
}

.cba-sim-select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text);
  font-size: var(--text-base);
  min-width: 160px;
  cursor: pointer;
}

.cba-sim-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.cba-sim-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.cba-sim-up   { color: #E63300; }
.cba-sim-down { color: #198754; }

.cba-sim-table {
  margin-top: 0;
}

.cba-sim-coverage-note {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.cba-leer-details {
  margin-top: var(--space-4);
}

.cba-leer-details summary {
  cursor: pointer;
  font-size: var(--text-sm);
  user-select: none;
}

.cba-leer-details ol {
  margin-top: var(--space-3);
  padding-left: var(--space-5);
  font-size: var(--text-sm);
}

/* ────────────────────────────────────────────────────────────────────────────
   19. Dashboard (home page KPI panel)
   ──────────────────────────────────────────────────────────────────────────── */

.dash-status-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
}

.dash-highlight {
  background: transparent;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  color: var(--text);
  padding: var(--space-5) var(--space-6);
  border-radius: 0;
}

.dash-highlight-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  margin: 0 0 var(--space-3) 0;
  color: var(--accent);
  padding-bottom: var(--space-2);
}

.dash-highlight-list {
  margin: 0;
  padding-left: 20px;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text);
}

.dash-highlight-list li { margin-bottom: var(--space-2); }
.dash-highlight-list li:last-child { margin-bottom: 0; }
.dash-highlight-list li::marker { color: var(--accent); }

.dash-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  border: 1px solid var(--status-fresh-border);
  background: transparent;
  color: var(--status-fresh-text);
}

.dash-status-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  background: currentColor;
  flex-shrink: 0;
}

.dash-status-chip.stale {
  border-color: var(--status-stale-border);
  color: var(--status-stale-text);
}

.dash-status-chip.partial {
  border-color: var(--status-partial-border);
  color: var(--status-partial-text);
}

.dash-status-detail {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.dash-grid-main {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.dash-grid-cba {
  display: grid;
  gap: var(--space-6);
}

/* ── KPI dash cards ── */
.dash-card {
  background: transparent;
  border: none;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  text-align: left;
  gap: var(--space-3);
  min-height: 180px;
  position: relative;
  overflow: hidden;
  transition: background-color var(--dur-base) var(--ease-poster);
}

.dash-card:hover {
  background: var(--panel-soft);
}

/* Accent left rules — thin column-rule style */
.kpi-primary,
.kpi-info,
.kpi-accent,
.kpi-success,
.kpi-warn,
.kpi-danger { position: relative; }

.kpi-primary::before,
.kpi-info::before,
.kpi-accent::before,
.kpi-success::before,
.kpi-warn::before,
.kpi-danger::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 32px;
  background: var(--accent);
}

.kpi-info::before    { background: var(--accent); }
.kpi-accent::before  { background: var(--indigo); }
.kpi-success::before { background: var(--ok); }
.kpi-warn::before    { background: var(--warn); }
.kpi-danger::before  { background: var(--accent); }

.dash-card-wide { grid-column: 1 / -1; }

/* CBA hero strip: full-width destacado arriba del grid */
.kpi-hero {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-4);
}

.kpi-cba-hero {
  min-height: 160px;
  padding: var(--space-6) var(--space-7);
  border-right: none;
}

.kpi-cba-hero .dash-card-value {
  font-size: clamp(var(--text-2xl), 4.5vw, var(--text-4xl, 3rem));
}

.kpi-cba-hero::before { height: 100%; width: 4px; }

.dash-card-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text);
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-3);
}

.dash-card-value {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  line-height: var(--leading-none);
  font-weight: var(--font-weight-black);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-tighter);
}

.dash-card-delta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
}

.dash-card-note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--space-2);
  line-height: var(--leading-normal);
  letter-spacing: var(--track-wide);
}

.dash-card-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dash-card-link:hover { opacity: 0.8; }

.dash-delta-up    { color: var(--accent); }
.dash-delta-down  { color: var(--ok); }
.dash-delta-neutral { color: var(--muted); }

/* ── Section titles ── */
.dash-section-title {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  margin: 0;
  text-align: left;
  padding: var(--space-5) var(--space-5) var(--space-4);
  text-transform: uppercase;
  letter-spacing: var(--track-widest);
  color: var(--text);
  opacity: 0.75;
  border-bottom: 1px solid var(--line);
}

.card-compact {
  padding: var(--space-5);
}

.dash-categories-card {
  overflow-x: auto;
  padding: 0;
}

.dash-cat-table {
  width: 100%;
  border-collapse: collapse;
}

.dash-cat-table th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--muted);
  font-weight: var(--font-weight-medium);
  background: transparent;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 2px solid var(--line-strong);
}

.dash-cat-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-base);
  border-bottom: 1px solid var(--line);
}

.dash-cat-table tbody tr:hover {
  background: var(--panel-soft);
}

.dash-cat-table tbody tr:last-child td { border-bottom: none; }

.dash-quick-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: flex-start;
  padding: var(--space-3) 0;
}

.dash-meta-card {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  text-align: left;
  color: var(--muted);
  letter-spacing: var(--track-wide);
}

.dash-meta-card p { margin: 0 0 var(--space-2) 0; }
.dash-meta-card p:last-child { margin-bottom: 0; }

.legal-links {
  text-align: center;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: var(--space-6) 0 0 0;
}

.legal-links a {
  color: var(--muted);
  margin: 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  background-image: none;
}

.legal-links a:hover {
  color: var(--accent);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

/* ────────────────────────────────────────────────────────────────────────────
   20. Page header / page footer (home, product detail)
   ──────────────────────────────────────────────────────────────────────────── */

.page-header-card {
  border-left: none;
  border-right: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--space-5) 0 var(--space-4);
  position: relative;
}

.page-header-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 4px;
  width: 64px;
  background: var(--accent);
}

.page-header-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
  font-weight: var(--font-weight-black);
  margin: 0 0 var(--space-3) 0;
  letter-spacing: var(--track-tighter);
  line-height: var(--leading-none);
  text-wrap: balance;
}

.page-header-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--muted);
}

/* dot separator between consecutive meta text items */
.page-meta-text + .page-meta-text::before {
  content: "·";
  margin-right: var(--space-3);
  color: var(--line-strong);
}

.page-meta-text {
  margin: 0;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--muted);
}

.page-header-badge { margin-left: auto; }

/* ────────────────────────────────────────────────────────────────────────────
   21. Tracker sidebar layout (filters aside + listing main)
   ──────────────────────────────────────────────────────────────────────────── */

.tracker-main-layout {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1024px) {
  .tracker-main-layout {
    grid-template-columns: 260px 1fr;
  }

  .tracker-main-layout > details.filters {
    position: sticky;
    top: var(--space-4);
    max-height: calc(100vh - var(--space-8));
    overflow-y: auto;
  }
}

.page-footer {
  border: none;
  border-top: 1px solid var(--line);
  padding: var(--space-8) 0 var(--space-3);
  background: transparent;
}

.page-footer-text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--muted);
  letter-spacing: var(--track-wide);
}

.page-footer-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--muted);
  background-image: none;
}

.page-footer-link:hover {
  color: var(--accent);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

/* ────────────────────────────────────────────────────────────────────────────
   21. Responsive
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .card { padding: var(--space-5) var(--space-4); }
}

@media (max-width: 760px) {
  .topbar {
    flex-direction: row;
    gap: var(--space-3);
  }
  .nav { gap: var(--space-3); }
  .nav a { font-size: var(--text-xs); }

  .cookie-banner {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
    max-width: none;
    padding: var(--space-5);
  }

  .home-how-section { padding: var(--space-4); }

  .cba-chart { min-height: 280px; }

  .cba-table-tools { align-items: stretch; }

  .cba-table-tools input,
  .cba-table-tools select,
  .cba-table-tools button { width: 100%; }

  .cba-sim-controls { flex-direction: column; align-items: stretch; }
  .cba-sim-arrow { display: none; }
  .cba-sim-select { width: 100%; }
  .cba-sim-summary { grid-template-columns: 1fr; }

  .dash-grid-main,
  .dash-grid-cba,
  .history-grid,
  .cba-category-grid {
    grid-template-columns: 1fr;
  }

  .dash-card {
    min-height: 140px;
    padding: var(--space-5) var(--space-4);
    border-right: none;
  }

  .dash-card-value { font-size: var(--text-xl); }

  .dash-card-wide { flex-direction: column; align-items: flex-start; gap: var(--space-2); }

  .dash-quick-nav { flex-direction: column; gap: var(--space-4); }

  .dash-quick-nav .btn { width: 100%; justify-content: flex-start; }

  .page-header-title { font-size: clamp(var(--text-lg), 6vw, var(--text-xl)); }

  .kpis,
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .kpi {
    border-right: 1px solid var(--line);
  }

  .kpi:nth-child(2n) { border-right: none; }
}

@media (max-width: 480px) {
  .nav { gap: var(--space-2); }
  .nav a { font-size: 10px; }
  .list-tools input { min-width: 100%; }

  .kpis,
  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .kpi {
    border-right: none;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   22. LIGHT THEME — optional override (poster aesthetic inverted)
   The site is dark-first; toggling adds .light-theme to <html>.
   ──────────────────────────────────────────────────────────────────────────── */

.light-theme {
  /* ── Surfaces — warm parchment, not clinical white ── */
  --bg:         #F2EDE4;
  --panel:      #F9F5EE;
  --panel-soft: #EAE4D8;
  --surface:    var(--panel);
  --surface-2:  var(--panel-soft);

  /* ── Borders ── */
  --line:          #D5CCBE;
  --line-strong:   #9E9080;
  --border:        var(--line);
  --border-subtle: #E0D9CF;
  --border-hover:  #6B5D4E;

  /* ── Text — warm near-black, ~8.5:1 contrast on --bg ── */
  --text:        #1E1710;
  --muted:       #6B5E50;
  --text-strong: #0F0C08;

  /* ── Accent — vermillion, unchanged (works on warm paper) ── */
  --accent:           #E63300;
  --accent-strong:    #C72D00;
  --accent-soft:      rgba(230, 51, 0, 0.08);
  --accent-hairline:  rgba(230, 51, 0, 0.28);
  --accent-foreground: #FFFFFF;

  --primary:        var(--accent);
  --primary-strong: var(--accent-strong);
  --brand:          var(--accent);
  --link:           var(--accent-strong);
  --link-hover:     #FF4D14;
  --on-primary:     var(--accent-foreground);

  --input: var(--panel);

  /* ── Semantic ── */
  --ok:     #1F8A3E;
  --good:   var(--ok);
  --warn:   #B58200;
  --danger: var(--accent);

  --status-fresh-border:   rgba(31, 138, 62, 0.55);
  --status-fresh-text:     #1F8A3E;
  --status-partial-border: rgba(181, 130, 0, 0.55);
  --status-partial-text:   #8B6300;
  --status-stale-border:   rgba(230, 51, 0, 0.55);
  --status-stale-text:     #C72D00;

  --good-soft-bg:     rgba(31, 138, 62, 0.06);
  --good-soft-border: rgba(31, 138, 62, 0.30);
  --good-soft-text:   #1F8A3E;
  --warn-soft-bg:     rgba(181, 130, 0, 0.06);
  --warn-soft-border: rgba(181, 130, 0, 0.30);
  --warn-soft-text:   #8B6300;
  --info-soft-bg:     rgba(230, 51, 0, 0.06);
  --info-soft-border: rgba(230, 51, 0, 0.30);
  --info-soft-text:   var(--accent);
  --offer-bg:         rgba(31, 138, 62, 0.05);
  --offer-hover:      rgba(31, 138, 62, 0.12);

  /* ── Topbar — semi-transparent parchment ── */
  --topbar-bg:         rgba(242, 237, 228, 0.95);
  --topbar-text:       rgba(30, 23, 16, 0.60);
  --topbar-text-hover: #1E1710;
  --topbar-active:     var(--accent);
  --hover-soft:        rgba(230, 51, 0, 0.04);
  --row-hover-tint:    rgba(230, 51, 0, 0.02);

  /* ── Charts — warm tones ── */
  --chart-grid:          #D9D3C8;
  --chart-grid-soft:     #E8E3DA;
  --chart-axis:          #6B5E50;
  --chart-label:         #3D322A;
  --chart-crosshair:     #9E9080;
  --chart-marker-stroke: var(--panel);
}

.light-theme {
  color-scheme: light;
}

.light-theme body::before { mix-blend-mode: multiply; opacity: 0.6; }

/* Backwards-compat: dark-theme class still works (it's the canonical mode now). */
.dark-theme { color-scheme: dark; }
}

@layer components {
/* ===========================================================================
   tracker-insights.css — BOLD TYPOGRAPHY tracker listing page.
   Stack layout, smart insights, badges, chart panels, data table,
   product grid/cards, KPI cards, and dark/responsive overrides.
   Depends on tokens.css + base.css + shell.css.
   =========================================================================== */

/* ── Stack layout ─────────────────────────────────────────────────────── */
.stack {
  display: grid;
  gap: var(--space-6);
}

/* ── Interactive element transitions ────────────────────────────────── */
.card,
.kpi,
.pill,
button,
input,
select {
  transition: border-color var(--dur-fast) var(--ease-poster),
              background-color var(--dur-fast) var(--ease-poster),
              color var(--dur-fast) var(--ease-poster);
}

/* ── Tracker status badges ────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  background: transparent;
  color: var(--status-fresh-text);
  border: 1px solid var(--status-fresh-border);
}

.badge::before {
  content: "";
  width: 5px;
  height: 5px;
  background: currentColor;
  flex-shrink: 0;
}

.badge.warn {
  background: transparent;
  color: var(--status-partial-text);
  border-color: var(--status-partial-border);
}

.badge.stale {
  background: transparent;
  color: var(--status-stale-text);
  border-color: var(--status-stale-border);
}

.badge.comparability-badge {
  letter-spacing: var(--track-wide);
  text-transform: none;
}

.badge.comparability-high  { color: var(--status-fresh-text);   border-color: var(--status-fresh-border); }
.badge.comparability-medium { color: var(--status-partial-text); border-color: var(--status-partial-border); }
.badge.comparability-low   { color: var(--status-stale-text);   border-color: var(--status-stale-border); }

.method {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  margin: 0;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

/* ── Page header ──────────────────────────────────────────────────────── */
.page-header-card {
  padding: var(--space-8) 0;
  border-left: none;
  border-right: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  position: relative;
}

.page-header-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 64px;
  height: 4px;
  background: var(--accent);
}

.page-header-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-black);
  font-size: clamp(var(--text-4xl), 9vw, var(--text-6xl));
  margin: 0 0 var(--space-4) 0;
  letter-spacing: var(--track-tighter);
  line-height: var(--leading-none);
  text-wrap: balance;
  color: var(--text);
}

.page-header-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.page-meta-text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
}

.page-header-badge { margin-left: auto; }

/* ── Smart insights panel ────────────────────────────────────────────── */
.smart-insights-panel {
  display: none;
  border: 2px solid var(--accent);
  background: transparent;
  padding: var(--space-6) var(--space-7);
  position: relative;
}

.smart-insights-panel::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: 64px;
  height: 4px;
  background: var(--accent);
}

.smart-insights-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--track-tight);
  margin: 0 0 var(--space-2) 0;
  color: var(--text);
}

.smart-insights-icon { font-size: var(--text-xl); }

.smart-insights-confidence {
  margin: 0 0 var(--space-5) 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
}

.smart-insights-grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

@media (min-width: 760px) {
  .smart-insights-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1280px) {
  .smart-insights-grid { grid-template-columns: repeat(4, 1fr); }
}

.smart-insights-offer {
  background: transparent;
  border: 1px solid var(--good-soft-border);
  padding: var(--space-4);
  color: var(--good-soft-text);
}

.smart-insights-offer-title {
  margin: 0 0 var(--space-3) 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--track-tight);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.smart-insights-offer-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}

.smart-insights-offer-row:last-child { border-bottom: none; }

.smart-insights-offer-link {
  color: var(--text);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  background-image: none;
  flex: 1;
}

.smart-insights-offer-link:hover {
  color: var(--accent);
  background-image: none;
}

.smart-insights-offer-price {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  white-space: nowrap;
}

.smart-insights-offer-metric {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  opacity: 0.85;
  letter-spacing: var(--track-wide);
}

.smart-insights-note {
  margin: var(--space-3) 0 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

/* ── KPI (JS-rendered: .label / .value / .sub) ────────────────────────── */
.kpi .label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  font-weight: var(--font-weight-medium);
}

.kpi .value {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
  line-height: var(--leading-none);
  font-weight: var(--font-weight-black);
  letter-spacing: var(--track-tighter);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--text);
}

.kpi .sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

/* ── Tracker-specific KPI card (.kpi-card) ────────────────────────────── */
.kpi-card {
  background: transparent;
  border: none;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
  min-height: 200px;
  transition: background-color var(--dur-base) var(--ease-poster);
}

.kpi-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 32px;
  background: var(--accent);
}

.kpi-card:hover { background: var(--panel-soft); }

.kpi-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  font-weight: var(--font-weight-medium);
}

.kpi-val {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
  line-height: var(--leading-none);
  font-weight: var(--font-weight-black);
  letter-spacing: var(--track-tighter);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--text);
  margin: var(--space-1) 0;
}

.kpi-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

.kpi-val.var-up   { color: var(--accent); }
.kpi-val.var-down { color: var(--ok); }
.kpi-val.var-flat { color: var(--warn); }

/* ── Empty / loading panels ──────────────────────────────────────────── */
.premium-list li { margin: var(--space-2) 0; }

.insight-card {
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: var(--space-4) var(--space-5);
}

.insight-card h3 {
  margin: 0 0 var(--space-2) 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--track-tight);
}

.insight-card ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-base);
}

.insight-card a {
  color: var(--accent);
  text-decoration: none;
  background-image: none;
}

.insight-card a:hover { text-decoration: underline; background-image: none; }

/* ── Chart panels (<details> accordion) ─────────────────────────────── */
.chart-panel {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0;
  position: relative;
  transition: border-color var(--dur-fast) var(--ease-poster);
}

.chart-panel[open] { border-color: var(--accent); }

.chart-panel > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--track-widest);
  color: var(--text);
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-poster);
}

.chart-panel > summary::-webkit-details-marker { display: none; }

.chart-panel > summary::after {
  content: "+";
  font-size: var(--text-xl);
  color: var(--accent);
  font-weight: 300;
  transition: transform var(--dur-base) var(--ease-poster);
}

.chart-panel[open] > summary {
  border-bottom-color: var(--line);
}

.chart-panel[open] > summary::after { content: "−"; }

.chart-panel-body {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-5) var(--space-6);
}

.main-chart-grid {
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: stretch;
  margin-top: var(--space-3);
}

.main-chart-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.main-chart-label {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-lg);
  letter-spacing: var(--track-tight);
  text-transform: none;
  letter-spacing: var(--track-tight);
  margin: 0;
}

.main-chart-help {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  margin: 0;
}

.quick-select-wrap {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.quick-select-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  display: block;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--muted);
}

.quick-select-switchers {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  border: 1px solid var(--line);
}

.quick-select-btn {
  flex: 1;
  min-height: 36px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--muted);
  background: transparent;
  border: none !important;
  border-right: 1px solid var(--line) !important;
  transition: background-color var(--dur-fast) var(--ease-poster),
              color var(--dur-fast) var(--ease-poster);
}

.quick-select-btn:last-child { border-right: none !important; }

.quick-select-btn::after { display: none !important; }

.quick-select-btn:hover {
  background: var(--panel-soft);
  color: var(--text);
}

.main-chart-select {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: var(--space-2);
  background: var(--input);
  color: var(--text);
  min-height: 120px;
}

.main-chart-select option:checked {
  background: var(--accent);
  color: var(--accent-foreground);
}

.selection-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
}

.btn-export-social {
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid var(--line) !important;
  padding: 8px 16px !important;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--text);
  background: transparent;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-poster),
              color var(--dur-fast) var(--ease-poster);
}

.btn-export-social::after { display: none !important; }

.btn-export-social:hover {
  border-color: var(--accent) !important;
  color: var(--accent);
}

.btn-export-icon { font-size: 1rem; }

.main-chart-wrapper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 480px;
}

.main-chart-canvas { flex-grow: 1; min-height: 400px; }

/* ── Charts ───────────────────────────────────────────────────────────── */
.chart {
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--line);
  position: relative;
  min-height: 260px;
  display: block;
  width: 100%;
}

.chart.small { min-height: 240px; }

.chart canvas {
  border-radius: 0;
  width: 100%;
  height: 360px;
  display: block;
}

.chart-empty {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  padding: 48px;
  text-align: center;
  width: 100%;
}

/* ── Chart legend ────────────────────────────────────────────────────── */
.legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

.legend .item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 4px 8px;
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--line);
  line-height: 1.4;
}

.legend .item .dot { margin-top: 3px; min-width: 10px; }

.dot {
  width: 8px;
  height: 8px;
  border-radius: 0;
  display: inline-block;
}

/* ── Macro note / details ────────────────────────────────────────────── */
.macro-note {
  border: 1px solid var(--warn-soft-border);
  border-left: 2px solid var(--warn);
  background: transparent;
  color: var(--warn-soft-text);
  border-radius: 0;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  line-height: var(--leading-normal);
}

.macro-details {
  margin-top: var(--space-2);
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.macro-details summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
}

.macro-details summary::-webkit-details-marker { display: none; }
.macro-details > div {
  padding: 0 var(--space-4) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* ── Data table ──────────────────────────────────────────────────────── */
.table-section {
  padding: var(--space-6) var(--space-5);
}

.table-section-main {
  width: 100%;
  margin-bottom: var(--space-6);
}

.tracker-loading {
  padding: var(--space-10);
  text-align: center;
  margin-bottom: var(--space-6);
  background: transparent;
  border: 1px solid var(--line);
}

.table-toolbar {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.table-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

.table-actions label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
}

.table-actions .page-size { width: auto; min-width: 88px; }

.table-view-switchers {
  margin-left: auto;
  margin-right: var(--space-5);
}

.page-info {
  min-width: 88px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 4px var(--space-2);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  color: var(--muted);
  text-transform: uppercase;
}

.table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 72vh;
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 720px;
}

th, td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  text-align: center;
  font-size: var(--text-base);
  vertical-align: middle;
}

th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  background: transparent;
  border-bottom: 2px solid var(--line-strong);
  font-weight: var(--font-weight-medium);
}

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
}

td:first-child,
th:first-child { text-align: left; }

tbody tr { background: transparent; }

td.num {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--track-tight);
}

.row-main td {
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.row-main td:first-child {
  font-weight: var(--font-weight-semibold);
  color: var(--text);
}

.row-main:hover td {
  background: var(--panel-soft);
}

.row-main.row-offer td { background: var(--offer-bg); }
.row-main.row-offer:hover td { background: var(--offer-hover); }

.row-main.expandable { cursor: pointer; }

.row-main.expandable:hover td { background: var(--panel-soft); }

.row-main.expandable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.row-main.is-expanded .row-chevron {
  color: var(--accent);
  font-weight: var(--font-weight-bold);
}

.row-candidate td {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  color: var(--muted);
  background: transparent;
  border-bottom: 1px dashed var(--line);
  text-transform: uppercase;
}

.row-candidate td:first-child { padding-left: var(--space-5); }

.product-cell {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}

.product-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.product-copy a {
  display: inline-block;
  max-width: 440px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  color: var(--text);
  background-image: none;
  font-weight: var(--font-weight-semibold);
  transition: color var(--dur-fast) var(--ease-poster);
}

.product-copy a:hover { color: var(--accent); }

.row-chevron {
  width: 16px;
  min-width: 16px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.2;
  padding-top: 2px;
}

.row-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

.candidate-tier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 2px 8px;
  border-radius: 0;
  border: 1px solid var(--line);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--muted);
}

.row-candidate.tier-mid .candidate-tier {
  border-color: var(--accent-hairline);
  color: var(--accent);
}

.row-candidate.tier-high .candidate-tier {
  border-color: var(--warn-soft-border);
  color: var(--warn-soft-text);
}

.cookie-grid {
  flex-direction: row;
  justify-content: space-between;
}

/* ── Mobile onboarding toast ─────────────────────────────────────────── */
.onboarding-mobile {
  position: fixed;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 90px;
  z-index: 54;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 0;
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-toast);
  display: grid;
  gap: var(--space-3);
}

.onboarding-mobile[hidden] { display: none; }

.onboarding-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--track-tight);
}

.onboarding-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.onboarding-actions button {
  width: auto;
  min-height: 40px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  border-radius: 0;
  padding: 8px var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  cursor: pointer;
}

.onboarding-actions button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-foreground);
}

/* ── Product grid view ───────────────────────────────────────────────── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  margin-top: var(--space-5);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.product-card {
  background: transparent;
  border: none;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  transition: background-color var(--dur-fast) var(--ease-poster),
              border-color var(--dur-fast) var(--ease-poster);
  position: relative;
  overflow: hidden;
}

.product-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: transparent;
  transition: width var(--dur-base) var(--ease-poster),
              background-color var(--dur-base) var(--ease-poster);
}

.product-card.is-offer::before {
  width: 64px;
  background: var(--ok);
}

.product-card:hover {
  background: var(--panel-soft);
}

.product-card:hover::before {
  width: 100%;
  background: var(--accent);
}

.product-card .toggle-candidates:hover {
  background: var(--panel-soft) !important;
}

.product-card .badge {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 0;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
}

.offer-genuine {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent-hairline);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
}

.offer-genuine.inline-start { margin-left: var(--space-2); }
.offer-genuine.inline-end   { margin-right: var(--space-2); }

.row-trend-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}

.row-baseline {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: var(--track-wide);
}

.row-empty {
  grid-column: 1 / -1;
  padding: var(--space-6);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
}

.product-card-shell {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.product-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.product-card-copy { flex: 1; }

.product-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}

.product-title-link {
  color: var(--text);
  text-decoration: none;
  background-image: none;
  transition: color var(--dur-fast) var(--ease-poster);
}

.product-title-link:hover { color: var(--accent); }

.product-card-ext-link { margin-left: var(--space-2); }

.product-card-badges { margin-top: var(--space-2); }

.product-card-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

.product-card-meta-icon { opacity: 0.6; }

.product-card-price-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

/* New vertical price block: price → variation → baseline */
.product-card-price-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

.product-card-trend-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.product-card-price-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-black);
  letter-spacing: var(--track-tighter);
  line-height: var(--leading-none);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.product-card-baseline {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

.product-card-trend-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.product-card-trend-pill {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  padding: 3px 8px;
  border-radius: 0;
  border: 1px solid var(--line);
  min-width: 80px;
  justify-content: right;
}

.product-card-nominal {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: var(--track-wide);
}

.product-card-real {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  padding-right: 2px;
  letter-spacing: var(--track-wide);
}

.product-card-toggle {
  width: 100%;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 6px;
  margin-top: var(--space-2);
  border-radius: 0;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  border: 1px solid var(--line) !important;
  background: transparent;
  color: var(--muted);
  transition: border-color var(--dur-fast) var(--ease-poster),
              color var(--dur-fast) var(--ease-poster);
}

.product-card-toggle::after { display: none !important; }

.product-card-toggle:hover {
  border-color: var(--accent) !important;
  color: var(--accent);
}

.candidate-list {
  background: transparent;
  border-radius: 0;
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-2);
  border: 1px solid var(--line);
}

.candidate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  padding: 6px 0;
  border-top: 1px dashed var(--line);
}

.candidate-tier-label {
  color: var(--muted);
  text-transform: uppercase;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  width: 36px;
  letter-spacing: var(--track-wider);
}

.candidate-name {
  flex: 1;
  margin: 0 var(--space-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.candidate-name a {
  color: var(--text);
  text-decoration: none;
  background-image: none;
  transition: color var(--dur-fast) var(--ease-poster);
}

.candidate-name a:hover { color: var(--accent); }

.candidate-link {
  color: var(--text);
  text-decoration: none;
  background-image: none;
}

.candidate-link:hover { color: var(--accent); text-decoration: none; }

.candidate-price {
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-display);
  letter-spacing: var(--track-tight);
}

.spread-note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  padding-left: var(--space-2);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

.spread-note.spread-high { border-left-color: var(--accent); }
.spread-note.spread-low  { border-left-color: var(--ok); }

.spread-row {
  padding: var(--space-3) var(--space-4);
  background: var(--panel-soft);
  border-bottom: 1px solid var(--line);
}

.spread-row .spread-note {
  margin: 0;
  padding-top: 0;
  border-top: 0;
}

/* ── Brand alternatives (table rows) ────────────────────────────────── */
.row-alternative td {
  font-size: var(--text-xs);
  color: var(--text);
  background: var(--panel-soft);
  border-bottom: 1px dashed var(--line);
  vertical-align: middle;
}

.row-alternative.row-alternative-header td {
  font-family: var(--font-mono);
  font-size: var(--text-2xs, 0.65rem);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--muted);
  background: var(--panel-soft);
  border-bottom: 1px solid var(--line);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.row-alternative td:first-child { padding-left: var(--space-5); }

.row-alternative.is-cheapest td { background: var(--ok-soft-bg, rgba(0,160,80,0.04)); }

.alt-brand-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 0;
  border: 1px solid var(--line);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--track-wide);
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
}

.alt-brand-cheapest {
  border-color: var(--ok, #00a050);
  color: var(--ok, #00a050);
}

.alt-size-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs, 0.65rem);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  margin-left: var(--space-2);
}

.alt-price-per-unit {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: var(--track-wide);
}

.alt-ppu-cell { color: var(--muted); }

/* ── Brand alternatives (grid cards) ────────────────────────────────── */
.alt-list {
  margin-top: var(--space-2);
  border: 1px solid var(--line);
  background: transparent;
}

.alt-list-header {
  display: grid;
  grid-template-columns: 80px 1fr 80px 80px;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-2xs, 0.65rem);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.alt-row {
  display: grid;
  grid-template-columns: 80px 1fr 80px 80px;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-top: 1px dashed var(--line);
  font-size: var(--text-sm);
}

.alt-row:first-of-type { border-top: none; }

.alt-row.is-cheapest { background: var(--ok-soft-bg, rgba(0,160,80,0.04)); }

.alt-brand { min-width: 0; }

.alt-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alt-name a {
  color: var(--text);
  text-decoration: none;
  background-image: none;
}

.alt-name a:hover { color: var(--accent); }

.alt-price { font-variant-numeric: tabular-nums; font-size: var(--text-sm); }

.alt-ppu {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: var(--track-wide);
}

/* Mobile: stack alt rows */
@media (max-width: 600px) {
  .alt-list-header { display: none; }

  .alt-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }

  .alt-brand { grid-column: 1; grid-row: 1; }
  .alt-name  { grid-column: 1; grid-row: 2; }
  .alt-price { grid-column: 2; grid-row: 1; }
  .alt-ppu   { grid-column: 2; grid-row: 2; text-align: right; }

  tr.row-alternative { display: block; }
  tr.row-alternative td { display: block; }
  tr.row-alternative.row-alternative-header { display: none; }
}

/* ── KPI list / misc ─────────────────────────────────────────────────── */
.kpi-list-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  margin-bottom: var(--space-1);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
  letter-spacing: var(--track-wide);
  color: var(--muted);
}

.kpi-list-row:last-child { border-bottom: none; }

.kpi-list-name {
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  line-height: var(--leading-snug);
}

.kpi-list-name a {
  color: var(--text);
  text-decoration: none;
  background-image: none;
}

.kpi-list-name a:hover { color: var(--accent); background-image: none; }

.kpi-meta-dates {
  font-family: var(--font-mono);
  font-size: var(--text-2xs, 0.65rem);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--muted);
  margin-bottom: var(--space-1);
}

.kpi-info-icon {
  display: inline-block;
  margin-left: var(--space-1);
  color: var(--muted);
  opacity: 0.7;
  font-size: var(--text-sm);
  text-decoration: none;
  background-image: none !important;
  transition: opacity var(--dur-fast) var(--ease-poster),
              color var(--dur-fast) var(--ease-poster);
}

.kpi-info-icon:hover { opacity: 1; color: var(--accent); background-image: none !important; }

.kpi-empty {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
}

.kpi-card-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kpi-card-stat { padding: var(--space-3) var(--space-4); }

.kpi-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--track-tight);
  margin-bottom: var(--space-3);
}


/* ── Responsive ──────────────────────────────────────────────────────── */
@media (min-width: 761px) {
  .onboarding-mobile { display: none !important; }
}

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
}

@media (max-width: 900px) {
  main.shell { padding: var(--space-5) var(--space-4); }
  .card { padding: var(--space-5) var(--space-4); }
  .main-chart-grid { grid-template-columns: 1fr; }
  .main-chart-wrapper { min-height: 360px; }
}

@media (max-width: 760px) {
  main.shell { padding: var(--space-4) var(--space-3); }
  .card { padding: var(--space-4) var(--space-3); }

  .kpis { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .kpi { border-right: 1px solid var(--line); }
  .kpi:nth-child(2n) { border-right: none; }

  .table-section { padding: var(--space-4); }
  .table-wrap { max-height: none; }

  .table-view-switchers { margin-left: 0; margin-right: 0; width: 100%; }

  .quick-select-btn { min-height: 32px; }

  .main-chart-wrapper { min-height: 340px; }
  .main-chart-canvas  { min-height: 300px; }

  table { min-width: 0; width: 100%; margin-top: var(--space-3); }

  thead { display: none; }

  tbody, tr, td { display: block; width: 100%; }

  tr.row-main,
  tr.row-candidate {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 0;
    margin-bottom: var(--space-3);
    padding: var(--space-3);
  }

  tr.row-candidate {
    margin-top: calc(var(--space-3) * -1);
    border-top: none;
    background: var(--panel-soft);
  }

  td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
  }

  td.num { font-variant-numeric: tabular-nums; }

  td:last-child { border-bottom: none; }

  td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--track-wider);
    text-align: left;
    margin-right: var(--space-4);
  }

  td[data-label="Producto"] {
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 1px solid var(--line);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-2);
  }

  td[data-label="Producto"]::before { display: none; }

  .product-cell {
    max-width: 100%;
    width: 100%;
    justify-content: space-between;
    flex-direction: row-reverse;
  }

  .onboarding-mobile {
    left: var(--space-2);
    right: var(--space-2);
    bottom: 80px;
  }

  .product-grid {
    grid-template-columns: 1fr;
    border-left: none;
  }

  .product-card {
    border-right: none;
    border-left: none;
    border-top: none;
  }
}
}

@layer components {
/* ===========================================================================
   tracker-filters.css — BOLD TYPOGRAPHY filter controls, pills, search,
   quick-fns, and table row/header styles for the main listing page.
   Depends on tokens.css + base.css + shell.css.
   =========================================================================== */

/* ── Helper / quick-guide bar ─────────────────────────────────────────── */
.helper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}

/* ── Active-filter pills ──────────────────────────────────────────────── */
.pills {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 0;
  padding: 4px 10px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.pill-info { font-weight: var(--font-weight-semibold); }

.pill-action {
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-poster),
              color var(--dur-fast) var(--ease-poster);
}

.pill-action:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.pill-action span {
  font-weight: var(--font-weight-semibold);
  color: var(--muted);
}

/* ── Filters panel (the giant <details>) ──────────────────────────────── */
details.filters {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
}

details.filters > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-widest);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-poster);
}

details.filters[open] > summary { border-bottom-color: var(--line); }

details.filters > summary::-webkit-details-marker { display: none; }

details.filters > summary::before {
  content: "+";
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--accent);
  font-weight: 300;
  transition: transform var(--dur-base) var(--ease-poster);
}

details.filters[open] > summary::before { content: "−"; }

details.filters[open] > .filters-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-end;
  padding: var(--space-5);
  background: transparent;
}

.filter-field {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  flex: 1;
  min-width: 140px;
}

.filter-field.field-search { min-width: 220px; flex: 1.5; }
.filter-field.field-select { min-width: 140px; }
.filter-field.field-quick  { min-width: 280px; flex: 2; }
.filter-field.field-mode   { min-width: 160px; }

.filter-field.filter-actions {
  flex-basis: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
  margin-top: var(--space-2);
}

label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  font-weight: var(--font-weight-medium);
}

/* ── Inputs / Selects / Buttons (scoped to filters area + global) ──── */
.filters-grid input,
.filters-grid select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--input);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--dur-fast) var(--ease-poster);
}

.filters-grid input:focus,
.filters-grid select:focus {
  border-color: var(--accent);
  box-shadow: none;
  outline: none;
}

input:hover,
select:hover { border-color: var(--line-strong); }

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Filter buttons inside .filters-grid — keep them clickable & visible */
.filters-grid button {
  width: auto;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  cursor: pointer;
  background-image: none;
  transition: border-color var(--dur-fast) var(--ease-poster),
              color var(--dur-fast) var(--ease-poster),
              background-color var(--dur-fast) var(--ease-poster);
}

.filters-grid button::after,
.cba-table-tools button::after { display: none !important; }

.filters-grid button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.filters-grid button:active { transform: translateY(1px); }

.filters-grid button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.filters-grid button.primary {
  background: var(--accent);
  color: var(--accent-foreground);
  border-color: var(--accent);
}

.filters-grid button.primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--accent-foreground);
}

.search-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.search-wrap input { flex: 1; }

.search-wrap button {
  width: auto;
  min-width: 100px;
}

.switchers {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  border: 1px solid var(--line);
}

.switchers button {
  width: auto;
  padding: 0 var(--space-4);
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: none !important;
  border-right: 1px solid var(--line) !important;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  transition: background-color var(--dur-fast) var(--ease-poster),
              color var(--dur-fast) var(--ease-poster);
}

.switchers button:last-child { border-right: none !important; }

.switchers button::after { display: none !important; }

.switchers button:hover {
  background: var(--panel-soft);
  color: var(--text);
}

.switchers button.active {
  background: var(--accent);
  color: var(--accent-foreground);
}

.inline-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  box-sizing: border-box;
}

.inline-toggle input {
  width: auto;
  min-height: auto;
  accent-color: var(--accent);
  margin: 0;
}

#sel {
  min-height: 140px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  background: var(--input);
  border: 1px solid var(--line);
}

#sel option { padding: 4px 8px; }

#sel option:checked {
  background: var(--accent);
  color: var(--accent-foreground);
}

.field-meta {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

.filter-field.filter-actions .switchers { width: auto; }

.btn-inline {
  width: auto;
  min-height: 40px;
}

.copy-status {
  min-height: 16px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: var(--track-wide);
}

.copy-status.error { color: var(--accent); }

/* ── Quick filter buttons ────────────────────────────────────────────── */
.quick-fn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--muted);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-poster),
              color var(--dur-fast) var(--ease-poster),
              background-color var(--dur-fast) var(--ease-poster);
}

.quick-fn:hover,
.quick-fn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-foreground);
}

/* ── Main tracker table ──────────────────────────────────────────────── */
.tracker-table {
  border-collapse: separate;
  border-spacing: 0;
}

.tracker-table thead th {
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--line-strong);
  position: sticky;
  top: 0;
  z-index: 2;
}

.tracker-table tbody tr {
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur-fast) var(--ease-poster);
}

.tracker-table tbody tr:hover {
  background: var(--panel-soft);
}

.tracker-table tbody tr.expanded {
  background: var(--panel-soft);
}

.tracker-table td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  vertical-align: middle;
}

.tracker-table .col-name {
  font-weight: var(--font-weight-semibold);
  color: var(--text);
}

.tracker-table .col-price {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--track-tight);
  color: var(--text);
  white-space: nowrap;
}

/* ── Variation badges (sharp, hairline only) ─────────────────────────── */
td .var-up,
.kpi-list-row .var-up {
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  background: transparent;
  border: 1px solid var(--accent-hairline);
  padding: 2px 8px;
  border-radius: 0;
  display: inline-block;
  letter-spacing: var(--track-wide);
}

td .var-down,
.kpi-list-row .var-down {
  color: var(--ok);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  background: transparent;
  border: 1px solid var(--good-soft-border);
  padding: 2px 8px;
  border-radius: 0;
  display: inline-block;
  letter-spacing: var(--track-wide);
}

td .var-flat,
.kpi-list-row .var-flat {
  color: var(--warn);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  background: transparent;
  border: 1px solid var(--warn-soft-border);
  padding: 2px 8px;
  border-radius: 0;
  display: inline-block;
  letter-spacing: var(--track-wide);
}

#selection-meta {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent-hairline);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  padding: 3px 12px;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  min-width: 100px;
  justify-content: center;
}

.page-header {
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-3);
}

#macro-status {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 2px 10px;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent-hairline);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  font-weight: var(--font-weight-medium);
}

.band-toolbar {
  display: flex;
  gap: var(--space-4);
  align-items: flex-end;
  flex-wrap: wrap;
}

.band-select-wrap { min-width: 200px; flex: 1; }

.band-select-wrap select {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--input);
  padding: 8px 10px;
  font-size: var(--text-base);
  min-height: 44px;
  transition: border-color var(--dur-fast) var(--ease-poster);
}

.band-select-wrap select:focus {
  border-color: var(--accent);
  outline: none;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .filters-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-4) !important;
  }

  .filter-field {
    grid-column: span 2;
    min-width: auto !important;
  }

  .filter-field.span-6 { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .filters-grid {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .filter-field {
    grid-column: span 1;
    min-height: auto;
  }

  .search-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .search-wrap button {
    width: auto;
    align-self: flex-start;
    min-width: 92px;
  }

  .switchers { flex-wrap: wrap; }

  .switchers button {
    width: auto;
    flex: 1;
    min-width: 0;
  }

  .band-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── Sidebar mode (inside .tracker-main-layout on ≥1024px) ────────────── */
@media (min-width: 1024px) {
  .tracker-main-layout details.filters[open] > .filters-grid {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .tracker-main-layout .filter-field {
    min-width: 0;
    width: 100%;
  }

  .tracker-main-layout .filter-actions .switchers {
    flex-direction: column;
    width: 100%;
  }

  .tracker-main-layout .filter-actions .switchers button {
    width: 100%;
  }
}
}

@layer components {
/* ===========================================================================
   tracker-detail.css — BOLD TYPOGRAPHY product detail page.
   Depends on tokens.css + base.css + shell.css.
   =========================================================================== */

/* ── Product link in tracker table ───────────────────────────────────── */
a.product-detail-link {
  color: var(--text);
  text-decoration: none;
  background-image: none;
  font-weight: var(--font-weight-semibold);
  transition: color var(--dur-fast) var(--ease-poster);
}

a.product-detail-link:hover { color: var(--accent); }

a.product-ext-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--space-2);
  color: var(--muted);
  font-size: var(--text-xs);
  text-decoration: none;
  background-image: none;
  vertical-align: middle;
  opacity: 0.7;
  transition: opacity var(--dur-fast) var(--ease-poster),
              color var(--dur-fast) var(--ease-poster);
}

a.product-ext-link:hover { opacity: 1; color: var(--accent); }

/* ── Breadcrumb ──────────────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  margin-bottom: var(--space-4);
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  background-image: none;
  transition: color var(--dur-fast) var(--ease-poster);
}

.breadcrumb a:hover { color: var(--accent); background-image: none; }

.breadcrumb-sep {
  color: var(--line-strong);
  font-size: var(--text-xs);
}

/* ── Product header ──────────────────────────────────────────────────── */
.product-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.product-header h1 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-black);
  font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
  line-height: var(--leading-none);
  letter-spacing: var(--track-tighter);
  margin: 0;
  text-wrap: balance;
}

.product-header-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
}

/* ── Product stat KPI cards ──────────────────────────────────────────── */
.product-stats {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.product-stat {
  background: transparent;
  border: none;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 140px;
  justify-content: space-between;
  position: relative;
  transition: background-color var(--dur-base) var(--ease-poster);
}

.product-stat:hover { background: var(--panel-soft); }

.product-stat .stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  font-weight: var(--font-weight-medium);
}

.product-stat .stat-value {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
  font-weight: var(--font-weight-black);
  letter-spacing: var(--track-tighter);
  line-height: var(--leading-none);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.product-stat .stat-value.pos {
  color: var(--danger);
}
.product-stat .stat-value.neg {
  color: var(--ok);
}

.product-stat .stat-sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

/* ── Terna comparison table ──────────────────────────────────────────── */
.terna-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.terna-table th,
.terna-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: var(--text-base);
  vertical-align: middle;
}

.terna-table th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  background: transparent;
  font-weight: var(--font-weight-medium);
  border-bottom: 2px solid var(--line-strong);
}

.terna-table tr:last-child td { border-bottom: none; }

.terna-table tbody tr:hover td { background: var(--panel-soft); }

.terna-tier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 2px 8px;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  border: 1px solid transparent;
}

.terna-tier.low {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
}

.terna-tier.mid {
  background: transparent;
  border-color: var(--accent-hairline);
  color: var(--accent);
}

.terna-tier.high {
  background: transparent;
  border-color: var(--warn-soft-border);
  color: var(--warn-soft-text);
}

/* ── Back link ───────────────────────────────────────────────────────── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  text-decoration: none;
  background-image: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  transition: color var(--dur-fast) var(--ease-poster);
  position: relative;
}

.back-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-fast) var(--ease-poster);
}

.back-link:hover {
  color: var(--accent);
  background-image: none;
}

.back-link:hover::after { transform: scaleX(1); }

/* ── Detail page empty / table wrap ──────────────────────────────────── */
.detail-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
}

.detail-table-wrap {
  border-radius: 0;
  margin-top: var(--space-3);
  overflow-x: auto;
}

/* ── Extremes grid ───────────────────────────────────────────────────── */
.detail-extremes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.detail-extreme-card {
  background: transparent;
  padding: var(--space-4) var(--space-5);
  border-radius: 0;
  border: 1px solid var(--line);
  position: relative;
}

.detail-extreme-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--track-tight);
  margin-bottom: var(--space-3);
  font-size: var(--text-base);
}

.detail-extreme-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  padding: var(--space-1) 0;
  border-bottom: 1px dashed var(--line);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.detail-extreme-empty {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
}

.stat-value-inline {
  display: flex;
  align-items: center;
}

/* ── Price gauge ─────────────────────────────────────────────────────── */
.detail-gauge {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: transparent;
  border-radius: 0;
  border: 1px solid var(--line);
}

.detail-gauge-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
}

.detail-gauge-current {
  font-weight: var(--font-weight-semibold);
  color: var(--text);
}

.detail-gauge-track {
  width: 100%;
  height: 4px;
  background: var(--line);
  border-radius: 0;
  position: relative;
}

/* width + background injected via CSS custom properties --gauge / --gauge-color */
.detail-gauge-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 0;
  width: var(--gauge, 0%);
  background: var(--gauge-color, var(--accent));
  transition: width var(--dur-slow) var(--ease-poster);
}

.detail-gauge-marker {
  position: absolute;
  top: -6px;
  width: 2px;
  height: 16px;
  background: var(--text);
  border-radius: 0;
  transform: translateX(-50%);
}

/* ── Macro context strip ─────────────────────────────────────────────── */
.detail-macro-context {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: none;
  border-left: 2px solid var(--accent);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

.detail-macro-icon { font-size: 1rem; }

.detail-macro-title {
  display: block;
  margin-bottom: 2px;
  font-weight: var(--font-weight-semibold);
  color: var(--text);
}

.detail-macro-text { color: var(--muted); }

/* ── Volatility badge ────────────────────────────────────────────────── */
.detail-vol-badge {
  padding: 2px 8px;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  margin-left: var(--space-2);
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
}

.detail-vol-badge.frozen {
  color: var(--text);
  border-color: var(--line);
}

.detail-vol-badge.stable {
  color: var(--ok);
  border-color: var(--good-soft-border);
}

.detail-vol-badge.volatile {
  color: var(--accent);
  border-color: var(--accent-hairline);
}

.detail-vol-badge.neutral {
  color: var(--muted);
  border-color: var(--line);
}

/* ── AI commentary ───────────────────────────────────────────────────── */
.dash-ai-highlight {
  margin: 0 0 var(--space-4) 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--track-tight);
}

.dash-ai-text {
  background: transparent;
  padding: var(--space-4) var(--space-5);
  border-radius: 0;
  border: none;
  border-left: 2px solid var(--accent);
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
  color: var(--text);
  font-size: var(--text-md);
}

.ai-insights-content {
  background: transparent;
  padding: var(--space-4) var(--space-5);
  border-radius: 0;
  border: none;
  border-left: 2px solid var(--line-strong);
}

.ai-generated-note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  margin-top: var(--space-3);
}

/* ── Detail header / section titles ──────────────────────────────────── */
.detail-header {
  position: relative;
  border: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--space-8) 0;
  background: transparent;
}

.detail-header::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 64px;
  height: 4px;
  background: var(--accent);
}

.detail-header-flex {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.detail-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-black);
  font-size: clamp(var(--text-3xl), 7vw, var(--text-5xl));
  line-height: var(--leading-none);
  letter-spacing: var(--track-tighter);
  text-wrap: balance;
  margin: 0;
}

.detail-brand-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-widest);
  color: var(--muted);
  white-space: nowrap;
  align-self: flex-start;
  margin-top: var(--space-2);
}

.detail-meta {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
}

.detail-meta span strong {
  font-weight: var(--font-weight-semibold);
  color: var(--text);
  font-family: inherit;
}

.detail-section-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-xl);
  letter-spacing: var(--track-tight);
  margin: 0 0 var(--space-5) 0;
  color: var(--text);
}

/* ── Chart wrapper on detail page ────────────────────────────────────── */
.chart-wrapper {
  position: relative;
}

.chart.main-chart-canvas {
  border: 1px solid var(--line);
  background: transparent;
}

.chart-y-axis {
  position: absolute;
  right: calc(100% + var(--space-2));
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  text-align: right;
  pointer-events: none;
}

.chart-y-axis span { position: absolute; transform: translateY(50%); right: 0; }

/* ── Detail chart toolbar ────────────────────────────────────────────── */
.detail-chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

/* ── Monthly rows (generated by web_publish.py) ──────────────────────── */
.monthly-table-row-positive td:last-child,
.monthly-row-pos { color: var(--accent); font-family: var(--font-mono); }

.monthly-table-row-negative td:last-child,
.monthly-row-neg { color: var(--ok); font-family: var(--font-mono); }

.kpi-grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.kpi-grid > * {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.kpi-grid > *:nth-child(3n) { border-right: none; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .product-stats {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }

  .product-stat { border-right: 1px solid var(--line); }
  .product-stat:nth-child(2n) { border-right: none; }

  .terna-table th:nth-child(4),
  .terna-table td:nth-child(4) { display: none; }

  .detail-title { font-size: clamp(var(--text-2xl), 9vw, var(--text-3xl)); }

  .detail-header { padding: var(--space-6) 0; }
}
}

@layer utilities {

  /* ── Color ─────────────────────────────────────────── */
  .muted        { color: var(--muted); }
  .text-accent  { color: var(--accent); }
  .text-ok      { color: var(--ok); }
  .text-warn    { color: var(--warn); }
  .text-danger  { color: var(--accent); }

  /* ── Variation badges: applied in @layer utilities so they win ─── */
}

.var-up {
  color: var(--danger);
}
.var-down {
  color: var(--ok);
}

@layer utilities {
  .var-flat { color: var(--warn); }

  /* ── Font family ────────────────────────────────────── */
  .text-mono    { font-family: var(--font-mono); }
  .text-display { font-family: var(--font-display); }
  .text-serif   { font-family: var(--font-serif); }

  /* ── Numerics ───────────────────────────────────────── */
  .num,
  .tabular      { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

  /* ── Casing / tracking ──────────────────────────────── */
  .uppercase      { text-transform: uppercase; }
  .tracking-wider { letter-spacing: var(--track-wider); }
  .tracking-widest{ letter-spacing: var(--track-widest); }
  .tracking-tight { letter-spacing: var(--track-tight); }

  /* ── Dividers ───────────────────────────────────────── */
  .hairline-divider {
    border: none;
    border-top: 1px solid var(--line);
    margin: 0;
  }

  .hairline-divider-accent {
    border: none;
    border-top: 2px solid var(--accent);
    margin: 0;
    width: 64px;
  }

  /* ── Screen-reader only ─────────────────────────────── */
  .sr,
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ── Hidden label (for toggle controls) ────────────── */
  .hidden-label {
    visibility: hidden;
    pointer-events: none;
  }
}