/* ============================================================================
   Foliolytic Editorial Design System — Canonical Tokens · v1
   2026-05-11 (introduced during the /kook-enhance overnight CTO redesign)

   Single source of truth for typography, color, spacing, and component patterns
   used across every section of foliolytic.com. Extracted from the Monthly
   Returns ("Every month, side by side.") section which the owner has identified
   as the gold-standard aesthetic.

   Three-line philosophy:
     1) ONE typeface (Plus Jakarta Sans), three roles (Soul/Skeleton/Precision)
     2) ONE accent color (#635BFF indigo), used sparingly
     3) ONE token system (--fl-*), thirteen reusable component classes (.fl-*)

   IMPORTANT — backwards compatibility:
     This file does NOT modify existing --ins-*, --hm-*, --mp-*, --proj-*
     token systems. Those remain functional for the modules already using them.
     The --fl-* tokens defined here are the NEW canonical layer for any work
     after 2026-05-11.

   Load order in index.html: this file must load BEFORE every other css file
   so that all subsequent vars resolve.
============================================================================ */

/* ----------------------------------------------------------------------------
   LIGHT MODE TOKENS
---------------------------------------------------------------------------- */
:root {
  /* Family ----------------------------------------------------------------- */
  --fl-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fl-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* Text ------------------------------------------------------------------- */
  --fl-text:        #1a1a18;              /* primary */
  --fl-text-2:      #3d3b36;              /* secondary (body prose) */
  --fl-text-muted:  #6b6a65;              /* tertiary (labels) */
  --fl-text-faint:  #a3a29c;              /* quaternary (kickers, captions) */
  --fl-text-ghost:  #c8c7c2;              /* near-invisible */

  /* Accent (single indigo — matches Monthly Returns) ----------------------- */
  --fl-accent:        #635BFF;
  --fl-accent-soft:   rgba(99, 91, 255, 0.10);
  --fl-accent-soft-2: rgba(99, 91, 255, 0.20);
  --fl-accent-text:   #ffffff;            /* text color on top of accent fill */

  /* Semantic --------------------------------------------------------------- */
  --fl-pos:        #059669;
  --fl-pos-soft:   rgba(5, 150, 105, 0.10);
  --fl-pos-text:   #064e3b;
  --fl-neg:        #dc2626;
  --fl-neg-soft:   rgba(220, 38, 38, 0.10);
  --fl-neg-text:   #7f1d1d;
  --fl-warn:       #d97706;
  --fl-warn-soft:  rgba(217, 119, 6, 0.10);

  /* Surfaces --------------------------------------------------------------- */
  --fl-bg:        transparent;            /* section background — let page show through */
  --fl-card:      #ffffff;                /* card background, used rarely */
  --fl-rule:      rgba(26, 26, 24, 0.08); /* hairline divider */
  --fl-rule-2:    rgba(26, 26, 24, 0.04); /* even softer hairline */
  --fl-border:    #e8e6e1;                /* explicit border, rare */
  --fl-border-2:  #d0cfca;                /* hover border */

  /* Spacing (8px grid) ----------------------------------------------------- */
  --fl-space-2:   2px;
  --fl-space-4:   4px;
  --fl-space-6:   6px;
  --fl-space-8:   8px;
  --fl-space-12:  12px;
  --fl-space-16:  16px;
  --fl-space-20:  20px;
  --fl-space-24:  24px;
  --fl-space-28:  28px;
  --fl-space-32:  32px;
  --fl-space-40:  40px;
  --fl-space-56:  56px;

  /* Section rhythm --------------------------------------------------------- */
  --fl-section-pad-y:  28px;
  --fl-section-pad-x:  clamp(20px, 4vw, 56px);
  --fl-section-margin: 32px;

  /* Radii ------------------------------------------------------------------ */
  --fl-radius-sm:  4px;
  --fl-radius:     8px;
  --fl-radius-lg:  12px;

  /* Shadows (3 levels, that's it) ----------------------------------------- */
  --fl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --fl-shadow:    0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --fl-shadow-lg: 0 12px 36px -8px rgba(15, 23, 42, 0.14), 0 4px 8px -2px rgba(15, 23, 42, 0.06);
}

/* ----------------------------------------------------------------------------
   DARK MODE TOKENS
---------------------------------------------------------------------------- */
body.dark-mode {
  /* ==========================================================================
     v4 §2 PALETTE — single source of truth (2026-05-20).
     Supersedes the v3 canonical-dark-surface values. Philosophy doc's
     "one canvas / chapters / windows" model: canvas (deepest) → chapter
     (lifted card) → window (sunk data well). Per-section gradients remain
     RETIRED (--fl-grad-* stay transparent further down — v4 inherits v3).
  ========================================================================== */

  /* ==========================================================================
     v5 HARMONIZED NAVY (2026-05-31) — the "rich dark navy, never washed gray"
     rollout. Supersedes the v4 #111a2e chapter + pure-white borders that read
     as washed slate on the #070b14 canvas. Governing rule (owner-locked):
     on rich navy, hierarchy goes DARKER (deeper into blue-black), never
     lighter — lightening adds white, white desaturates the blue, and
     desaturated blue is just gray. Borders are blue-tinted, not pure white.
     Tuned from foliolytic-harmonized.html.

     Elevation ladder (all blue-dominant, monotonic):
       canvas #070b14  <  well #0d1526  <  card #131d33  <  detail #1b2742
  ========================================================================== */

  /* Surface tones — chrome only, never on data */
  --fl-canvas:            #070b14;                          /* page (unchanged) */
  /* Section SHELLS use --fl-chapter — these dominate the viewport, so this IS
     the "navy background" the owner sees. Kept DARK (#111a2e, the known-good
     pre-v5 tone) per "the darker the navy background the better"; inner cards
     (--fl-surface #131d33) lift ABOVE this so hierarchy reads without lightening
     the dominant background. */
  --fl-chapter:           #111a2e;                          /* darker section shell (reverted from #131d33) */
  --fl-chapter-border:    rgba(176, 200, 244, 0.09);        /* blue-tinted hairline — was pure white */
  --fl-chapter-highlight: rgba(200, 220, 255, 0.05);        /* moonlight inner top — was pure white */
  /* Chart "window" gradient: STARTS at the card/chapter tone (#131d33) so the
     plot area MELDS with the surface it sits in, then GENTLY sinks toward the
     bottom — the "starts matching the navy, slight gradient down" look the
     owner liked. (v5-r1 fix: had decoupled this into a too-dark recessed well
     that made charts read as a stark dark block darker than the page.) */
  --fl-window-top:        #111a2e;                          /* == shell tone — chart melds with the section it sits in */
  --fl-window-mid:        #0e1626;                          /* gentle sink */
  --fl-window-bottom:     #0a1120;                          /* deeper, still above page #070b14 */
  --fl-window-border:     rgba(176, 200, 244, 0.045);
  --fl-divider:           rgba(176, 200, 244, 0.08);

  /* Harmonized surface ladder + edge treatments (canonical for new work) */
  --fl-surface:           #131d33;                          /* solid card */
  --fl-surface-2:         #1b2742;                          /* lifted detail spotlight */
  --fl-well:              #0d1526;                          /* recessed inner panel */
  --fl-well-2:            #0a1120;
  --fl-hairline:          rgba(176, 200, 244, 0.09);
  --fl-hairline-soft:     rgba(176, 200, 244, 0.055);
  --fl-hover:             rgba(150, 178, 236, 0.05);        /* blue-tinted row hover */
  --fl-lum:               linear-gradient(180deg,
                            rgba(200, 220, 255, 0.18) 0%,
                            rgba(180, 200, 240, 0.05) 35%,
                            rgba(160, 180, 220, 0.015) 100%); /* lit-from-above luminous border */

  /* Text neutrals */
  --fl-text-primary:   #f1f5f9;
  --fl-text-secondary: #94a3b8;
  --fl-text-tertiary:  #6f7d99;

  /* Data colors — semantic only, never on chrome */
  --fl-accent:        #7c7bff;
  --fl-pos:           #34d399;
  --fl-neg:           #f87171;
  --fl-warn:          #fbbf24;

  /* Radius scale — tightened 2026-05-31 per owner "remove the rounded corners".
     Crisp Bloomberg-precision corners; metric bars go fully sharp (0px) below. */
  --fl-radius-section: 10px;
  --fl-radius-window:  8px;
  --fl-radius-control: 6px;
  --fl-radius-chip:    999px;
  --fl-radius-bar:     0px;

  /* Chapter elevation recipe (chapters only — never windows/inline).
     Lit-from-above moonlight top edge + depth. Strengthened 2026-05-31. */
  --fl-elevation:
    inset 0 1px 0 rgba(200, 220, 255, 0.07),
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 18px 40px -18px rgba(0, 0, 0, 0.62);

  /* Hero-card elevation — for the showpiece cards (grade persona, projection
     hero, demo panels). Same lit-top + a touch more lift. */
  --fl-elevation-hero:
    inset 0 1px 0 rgba(200, 220, 255, 0.08),
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 24px 56px -22px rgba(0, 0, 0, 0.68);

  /* ==========================================================================
     LEGACY ALIASES — the ~20 existing CSS files reference this older name
     set; aliasing onto the v4 source-of-truth lets the whole site inherit
     v4 with zero per-file churn. Non-1:1 mappings noted in delivery summary.
     :root (light) values are UNTOUCHED — these aliases are body.dark-mode only.
  ========================================================================== */
  --fl-text:        var(--fl-text-primary);    /* #eef0f4 → #f1f5f9 */
  --fl-text-2:      var(--fl-text-secondary);  /* #c8cdd8 → #94a3b8 (v4 intends body prose more muted) */
  --fl-text-muted:  var(--fl-text-tertiary);   /* #768198 → #6f7d99 */
  --fl-text-faint:  var(--fl-text-tertiary);   /* #4a5570 → #6f7d99 (v4 = 3 text tiers; faint collapses to tertiary; kickers brighten per v4 §4) */
  --fl-text-ghost:  #253048;                   /* no v4 mapping — near-invisible tone preserved as-is */

  --fl-accent-soft:   rgba(124, 123, 255, 0.14);
  --fl-accent-soft-2: rgba(124, 123, 255, 0.24);
  --fl-accent-text:   #0f1822;

  --fl-pos-soft:   rgba(52, 211, 153, 0.12);
  --fl-pos-text:   #a7f3d0;
  --fl-neg-soft:   rgba(248, 113, 113, 0.12);
  --fl-neg-text:   #fecaca;
  --fl-warn-soft:  rgba(251, 191, 36, 0.12);

  --fl-card:      var(--fl-chapter);           /* #131c2c → #111a2e */
  --fl-rule:      var(--fl-divider);           /* rgba(255,255,255,0.06) — exact 1:1 */
  --fl-rule-2:    var(--fl-window-border);     /* 0.03 → 0.025 alpha (imperceptible) */
  --fl-border:    var(--fl-chapter-border);    /* #253048 opaque → rgba white .05 — v4 §6 single-hairline philosophy */
  --fl-border-2:  #2e3a55;                     /* no v4 mapping — hover border preserved (phase-5 control scope) */

  --fl-radius-sm:  4px;                         /* no v4 mapping — small-element radius preserved (phase-5 control scope) */
  --fl-radius:     var(--fl-radius-control);    /* 8px — exact 1:1 */
  --fl-radius-lg:  var(--fl-radius-section);    /* 12px → 14px (v4 section radius) */

  --fl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20);   /* no v4 mapping — chapter elevation uses --fl-elevation recipe directly */
  --fl-shadow:    0 4px 6px -1px rgba(0, 0, 0, 0.32), 0 2px 4px -1px rgba(0, 0, 0, 0.18);
  --fl-shadow-lg: 0 12px 36px -8px rgba(0, 0, 0, 0.6), 0 4px 8px -2px rgba(0, 0, 0, 0.4);
}

/* ============================================================================
   GLOBAL RESETS for editorial sections
   Every .fl-section gets these baseline rules.
============================================================================ */
.fl-section,
.fl-section * {
  font-family: var(--fl-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.fl-num,
.fl-section .fl-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============================================================================
   COMPONENT 1: .fl-section — section wrapper
   Generous outer breathing room, consistent internal padding, no heavy box.
   Top hairline rule separates from previous section.
============================================================================ */
.fl-section {
  position: relative;
  margin: var(--fl-section-margin) 0;
  padding: var(--fl-section-pad-y) var(--fl-section-pad-x);
  background: var(--fl-bg);
  border-top: 1px solid var(--fl-rule);
  color: var(--fl-text);
  animation: flFadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.fl-section--no-rule {
  border-top: 0;
}

.fl-section--carded {
  background: var(--fl-card);
  border: 1px solid var(--fl-rule);
  border-radius: var(--fl-radius-lg);
  box-shadow: var(--fl-shadow);
}

@keyframes flFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   COMPONENT 2: .fl-section-head — editorial section header
   Grid: heading text on the left, optional stat cluster on the right.
============================================================================ */
.fl-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--fl-space-32);
  row-gap: var(--fl-space-16);
  align-items: end;
  margin-bottom: var(--fl-space-20);
}

.fl-section-head__lead {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (max-width: 800px) {
  .fl-section-head {
    grid-template-columns: 1fr;
    row-gap: var(--fl-space-12);
  }
}

/* ============================================================================
   COMPONENT 3: .fl-kicker — uppercase letterspaced label
   E.g. "MONTHLY RETURNS", "FOLIOLYTIC PROJECTION · 20Y"
============================================================================ */
.fl-kicker {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fl-text-faint);
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============================================================================
   COMPONENT 4: .fl-headline — light-weight display headline
   E.g. "Every month, side by side." — weight 300 with negative letter-spacing
   for the Pentagram-magazine "Soul" voice.
============================================================================ */
.fl-headline {
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--fl-text);
  margin: 0;
}

.fl-headline strong,
.fl-headline em {
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.035em;
}

/* Larger variant for hero sections */
.fl-headline--lg {
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.14;
}

/* ============================================================================
   COMPONENT 5: .fl-subtitle — muted prose subtitle
   Editorial subtitle with inline emphasis support ("**Hover any cell** for...")
============================================================================ */
.fl-subtitle {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.55;
  color: var(--fl-text-2);
  margin: 0;
  max-width: 680px;
}

.fl-subtitle strong {
  font-weight: 600;
  color: var(--fl-text);
}

.fl-subtitle em {
  font-style: italic;
  color: var(--fl-text);
}

/* ============================================================================
   COMPONENT 6: .fl-stat-cluster — right-aligned grid of .fl-stat blocks
   Sits in the right column of .fl-section-head. 3-up typically (BEST/WORST/AVG).
============================================================================ */
.fl-stat-cluster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, auto));
  column-gap: var(--fl-space-32);
  row-gap: var(--fl-space-12);
  align-items: end;
  justify-content: end;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 800px) {
  .fl-stat-cluster {
    justify-content: start;
    column-gap: var(--fl-space-24);
  }
}

@media (max-width: 480px) {
  .fl-stat-cluster {
    grid-template-columns: repeat(2, minmax(0, auto));
    column-gap: var(--fl-space-16);
  }
}

/* ============================================================================
   COMPONENT 7: .fl-stat — single stat block (label / value / context)
   Ultra-tight vertical stacking (1px gap), right-aligned in clusters.
============================================================================ */
.fl-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: right;
  min-width: 0;
  margin: 0;
}

.fl-stat--left { text-align: left; }
.fl-stat--center { text-align: center; }

.fl-stat__label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fl-text-faint);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.fl-stat__value {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--fl-text);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.fl-stat__context {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--fl-text-faint);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Semantic value colors */
.fl-stat__value--pos { color: var(--fl-pos); }
.fl-stat__value--neg { color: var(--fl-neg); }
.fl-stat__value--warn { color: var(--fl-warn); }
.fl-stat__value--accent { color: var(--fl-accent); }
.fl-stat__value--faint { color: var(--fl-text-faint); }

/* ============================================================================
   COMPONENT 8: .fl-stat-strip — bottom horizontal stat strip
   Like Monthly Returns' HOT MONTHS / GREEN STREAK / RED STREAK / AVG UP/DOWN
   row at the bottom. 1px hairlines top + bottom, 1px vertical dividers between.
============================================================================ */
.fl-stat-strip {
  display: grid;
  gap: 0;
  margin: var(--fl-space-4) 0 var(--fl-space-16);
  padding: var(--fl-space-16) 0;
  border-top: 1px solid var(--fl-rule);
  border-bottom: 1px solid var(--fl-rule);
}

.fl-stat-strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fl-stat-strip--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fl-stat-strip--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fl-stat-strip--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.fl-stat-strip + .fl-stat-strip {
  margin-top: -16px;             /* collapse adjacent strips into one rule */
  border-top: 0;
}

.fl-strip-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 var(--fl-space-16);
  min-width: 0;
  text-align: left;
}

.fl-strip-card + .fl-strip-card {
  border-left: 1px solid var(--fl-rule);
}

.fl-strip-card:first-child {
  padding-left: 0;
}

.fl-strip-card__label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fl-text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fl-strip-card__value {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--fl-text);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}

.fl-strip-card__sub {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--fl-text-faint);
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}

.fl-strip-card__hint {
  font-size: 9.5px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.015em;
  color: var(--fl-text-faint);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

/* Semantic value colors on strip */
.fl-strip-card__value--pos,
.fl-strip-card--pos .fl-strip-card__value { color: var(--fl-pos); }
.fl-strip-card__value--neg,
.fl-strip-card--neg .fl-strip-card__value { color: var(--fl-neg); }
.fl-strip-card__value--accent,
.fl-strip-card--accent .fl-strip-card__value { color: var(--fl-accent); }
.fl-strip-card__value--faint { color: var(--fl-text-faint); }

/* Cockroach lens — violet/indigo tint */
.fl-strip-card--cockroach .fl-strip-card__label,
.fl-strip-card--cockroach .fl-strip-card__value {
  color: var(--fl-accent);
}
.fl-strip-card--cockroach .fl-strip-card__label { opacity: 0.85; }

/* Responsive: tablet drops to 3 cols, mobile to 2 cols */
@media (max-width: 1100px) {
  .fl-stat-strip--5,
  .fl-stat-strip--6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--fl-space-16);
  }
  .fl-stat-strip--5 .fl-strip-card:nth-child(3n+1),
  .fl-stat-strip--6 .fl-strip-card:nth-child(3n+1) {
    border-left: 0; padding-left: 0;
  }
  .fl-stat-strip--5 .fl-strip-card:nth-child(n+4),
  .fl-stat-strip--6 .fl-strip-card:nth-child(n+4) {
    border-top: 1px solid var(--fl-rule);
    padding-top: var(--fl-space-12);
    margin-top: var(--fl-space-4);
  }
}

@media (max-width: 640px) {
  .fl-stat-strip--3,
  .fl-stat-strip--4,
  .fl-stat-strip--5,
  .fl-stat-strip--6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fl-strip-card { padding: 0 var(--fl-space-12); }
  .fl-strip-card:nth-child(2n+1) {
    border-left: 0;
    padding-left: 0;
  }
  .fl-strip-card:nth-child(n+3) {
    border-top: 1px solid var(--fl-rule);
    padding-top: var(--fl-space-12);
    margin-top: var(--fl-space-2);
  }
  .fl-strip-card__value { font-size: 17px; }
}

/* ============================================================================
   COMPONENT 9: .fl-chip-group — kicker-labeled chip group
   Editorial label (e.g. "HORIZON") above a horizontal row of .fl-chip.
============================================================================ */
.fl-chip-group {
  display: flex;
  flex-direction: column;
  gap: var(--fl-space-8);
  min-width: 0;
}

.fl-chip-group__label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fl-text-faint);
  display: flex;
  align-items: baseline;
  gap: var(--fl-space-6);
}

.fl-chip-group__label-sub {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--fl-text-faint);
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}

.fl-chip-group__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fl-space-6);
  align-items: center;
}

/* Horizontal control bar — multiple groups in a row with hairline separators */
.fl-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--fl-space-24) var(--fl-space-32);
  margin-bottom: var(--fl-space-20);
  padding-top: var(--fl-space-16);
  border-top: 1px solid var(--fl-rule);
}

@media (max-width: 800px) {
  .fl-controls {
    grid-template-columns: 1fr 1fr;
    gap: var(--fl-space-20);
  }
}

@media (max-width: 480px) {
  .fl-controls {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   COMPONENT 10: .fl-chip — outlined chip (single active state, NO filled variants)
============================================================================ */
.fl-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fl-space-4);
  padding: 7px 12px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: var(--fl-text-2);
  background: transparent;
  border: 1px solid var(--fl-rule);
  border-radius: var(--fl-radius-sm);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.fl-chip:hover {
  color: var(--fl-text);
  border-color: var(--fl-border-2);
}

.fl-chip:focus-visible {
  outline: 2px solid var(--fl-accent);
  outline-offset: 2px;
}

.fl-chip.is-active,
.fl-chip[aria-pressed="true"],
.fl-chip[data-active="true"] {
  color: var(--fl-accent);
  border-color: var(--fl-accent);
  background: var(--fl-accent-soft);
  font-weight: 600;
}

.fl-chip[disabled],
.fl-chip.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Two-line chip variant — primary label on top, live value below */
.fl-chip--stack {
  flex-direction: column;
  padding: 5px 12px 6px;
  min-height: 38px;
  gap: 0;
  line-height: 1.1;
}

.fl-chip--stack .fl-chip__label {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
}

.fl-chip--stack.is-active .fl-chip__label { font-weight: 600; }

.fl-chip--stack .fl-chip__sub {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.7;
  font-family: var(--fl-font);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

.fl-chip--stack.is-active .fl-chip__sub { opacity: 0.95; }

/* Chip-with-input — for "Custom %/yr" etc. */
.fl-chip--input {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 5px 10px 5px 8px;
  cursor: text;
  min-height: 32px;
}

.fl-chip--input:hover,
.fl-chip--input:focus-within {
  border-color: var(--fl-accent);
}

.fl-chip--input.is-active {
  border-color: var(--fl-accent);
  background: var(--fl-accent-soft);
}

.fl-chip--input input {
  width: 60px;
  padding: 2px 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fl-text);
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--fl-font);
  font-variant-numeric: tabular-nums;
}

.fl-chip--input input::-webkit-inner-spin-button,
.fl-chip--input input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.fl-chip--input span {
  font-size: 11px;
  font-weight: 500;
  color: var(--fl-text-faint);
  letter-spacing: 0.005em;
}

/* Mini chip for chart toolbars */
.fl-chip--mini {
  padding: 4px 9px;
  font-size: 11px;
  border-radius: 4px;
}

/* ============================================================================
   COMPONENT 11: .fl-segment — connected segmented control
   The ONE place we use indigo fill on active state (single-select pickers).
============================================================================ */
.fl-segment {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--fl-rule);
  border-radius: var(--fl-radius-sm);
  overflow: hidden;
  background: transparent;
  height: 28px;
}

.fl-segment__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--fl-text-2);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s ease, background 0.15s ease;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fl-segment__item + .fl-segment__item {
  border-left: 1px solid var(--fl-rule);
}

.fl-segment__item:hover {
  color: var(--fl-text);
  background: var(--fl-accent-soft);
}

.fl-segment__item.is-active,
.fl-segment__item[aria-pressed="true"],
.fl-segment__item[data-active="true"] {
  color: var(--fl-accent-text);
  background: var(--fl-accent);
  font-weight: 600;
}

.fl-segment__item:focus-visible {
  outline: 2px solid var(--fl-accent);
  outline-offset: -2px;
}

/* ============================================================================
   COMPONENT 12: .fl-prose — editorial paragraph
   With inline emphasis support, max-width for readability, generous leading.
============================================================================ */
.fl-prose {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.005em;
  color: var(--fl-text-2);
  margin: 0;
  max-width: 680px;
}

.fl-prose p {
  margin: 0 0 var(--fl-space-12);
}

.fl-prose p:last-child {
  margin-bottom: 0;
}

.fl-prose strong {
  color: var(--fl-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.fl-prose em {
  color: var(--fl-text);
  font-style: italic;
  font-weight: 500;
}

.fl-prose .fl-prose__num {
  color: var(--fl-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fl-prose .fl-prose__pos { color: var(--fl-pos); font-weight: 600; }
.fl-prose .fl-prose__neg { color: var(--fl-neg); font-weight: 600; }

.fl-prose__note {
  font-size: 10.5px;
  font-weight: 400;
  font-style: italic;
  color: var(--fl-text-faint);
  letter-spacing: 0.005em;
  line-height: 1.55;
  max-width: 680px;
}

.fl-prose__kicker {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fl-text-faint);
  margin: 0 0 6px;
}

/* ============================================================================
   COMPONENT 13: .fl-hairline — 1px rule divider
============================================================================ */
.fl-hairline {
  border: 0;
  height: 1px;
  background: var(--fl-rule);
  margin: var(--fl-space-16) 0;
}

.fl-hairline--soft { background: var(--fl-rule-2); }

.fl-hairline--dashed {
  background: transparent;
  border-top: 1px dashed var(--fl-rule);
  height: 0;
}

/* ============================================================================
   UTILITIES — small inline helpers
============================================================================ */
.fl-pos { color: var(--fl-pos); }
.fl-neg { color: var(--fl-neg); }
.fl-warn { color: var(--fl-warn); }
.fl-accent-text { color: var(--fl-accent); }
.fl-muted { color: var(--fl-text-muted); }
.fl-faint { color: var(--fl-text-faint); }

/* Inline editorial input for target-solvers etc. */
.fl-input {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--fl-rule);
  border-radius: var(--fl-radius-sm);
  transition: border-color 0.15s ease;
  min-height: 32px;
}

.fl-input:hover,
.fl-input:focus-within {
  border-color: var(--fl-accent);
}

.fl-input input {
  background: transparent;
  border: 0;
  outline: 0;
  padding: 1px 2px;
  font-family: var(--fl-font);
  font-size: 12px;
  font-weight: 600;
  color: var(--fl-text);
  font-variant-numeric: tabular-nums;
  width: 100px;
}

.fl-input input::-webkit-inner-spin-button,
.fl-input input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.fl-input__prefix,
.fl-input__suffix {
  font-size: 11px;
  font-weight: 500;
  color: var(--fl-text-faint);
}

/* Result pill (e.g., "Year 2036 · 9.7y from now") */
.fl-result {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--fl-accent-soft);
  color: var(--fl-accent);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.fl-result--neg {
  background: var(--fl-neg-soft);
  color: var(--fl-neg);
}

/* ============================================================================
   v3 (2026-05-19) — Per-section gradients RETIRED.

   The v2 "every section gets its own personality" gradients (washed slate
   bases + green/amber/indigo tints) WERE the "mish-mash of random background
   colours" the owner rejected. The whole site is now ONE cohesive dark navy
   surface: a flat #0f172a body, transparent sections, a single #1e293b card.
   See CANONICAL-DARK-SURFACE-SPEC.md.

   The --fl-grad-* names are KEPT (defined transparent, theme-agnostic) so any
   legacy `background: var(--fl-grad-*)` consumer harmlessly shows the
   canonical body instead of breaking. The .fl-section[data-grad] selectors
   were never wired into the DOM (dead code) and are deleted below.
============================================================================ */

:root {
  --fl-grad-perf:         transparent;
  --fl-grad-proj:         transparent;
  --fl-grad-individual:   transparent;
  --fl-grad-holdings:     transparent;
  --fl-grad-tax:          transparent;
  --fl-grad-legendary:    transparent;
  --fl-grad-achievements: transparent;
  --fl-grad-analytics:    transparent;
  --fl-grad-grade:        transparent;
}

/* Light/dark split removed — all --fl-grad-* are `transparent` in :root above
   (theme-agnostic). The .fl-section[data-grad="…"] selectors were dead code
   (no element ever carried a data-grad attribute) and are deleted. Sections
   are transparent over the body; see CANONICAL-DARK-SURFACE-SPEC.md. */

/* ============================================================================
   END — Foliolytic Editorial Design System (v1 + v2 gradients)
============================================================================ */