/* ==========================================================================
   Apple Design Expert — Design tokens
   iOS 26 / macOS Tahoe · Liquid Glass · light-premium default
   Drop this in once (inline it for single-file HTML) before any other CSS.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- TYPE -- */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                 "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Monaco, "Courier New", monospace;

  --text-large-title: 700 34px/41px var(--font-system);
  --text-title1:      700 28px/34px var(--font-system);
  --text-title2:      700 22px/28px var(--font-system);
  --text-title3:      600 20px/25px var(--font-system);
  --text-headline:    600 17px/22px var(--font-system);
  --text-body:        400 17px/22px var(--font-system);
  --text-callout:     400 16px/21px var(--font-system);
  --text-subheadline: 400 15px/20px var(--font-system);
  --text-footnote:    400 13px/18px var(--font-system);
  --text-caption1:    400 12px/16px var(--font-system);
  --text-caption2:    400 11px/13px var(--font-system);

  /* Dense/compact dashboard scale (house style — see SKILL.md "Working agreements") */
  --text-kpi:      800 23px/26px var(--font-system);
  --text-kpi-lg:   800 30px/34px var(--font-system);
  --text-card-title: 700 15px/20px var(--font-system);

  /* --------------------------------------------------------------- COLOR -- */
  /* Semantic labels */
  --color-label:            #0b1220;
  --color-label-secondary:  rgba(11, 18, 32, 0.62);
  --color-label-tertiary:   rgba(11, 18, 32, 0.38);
  --color-label-quaternary: rgba(11, 18, 32, 0.20);

  /* Backgrounds */
  --color-bg-primary:   #ffffff;
  --color-bg-secondary: #f5f6f8;
  --color-bg-tertiary:  #eceef2;

  /* System accents (iOS light values) */
  --color-blue:   #007AFF;
  --color-green:  #34C759;
  --color-red:    #FF3B30;
  --color-orange: #FF9500;
  --color-yellow: #FFCC00;
  --color-teal:   #5AC8FA;
  --color-purple: #AF52DE;
  --color-pink:   #FF2D55;
  --color-indigo: #5856D6;
  --color-mint:   #00C7BE;
  --color-brown:  #A2845E;

  --color-separator: rgba(11, 18, 32, 0.10);
  --color-fill:            rgba(120, 120, 128, 0.16);
  --color-fill-secondary:  rgba(120, 120, 128, 0.12);
  --color-fill-tertiary:   rgba(120, 120, 128, 0.08);

  /* ------------------------------------------------------------- SPACING -- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* Concentric radii — nested radius = outer radius − padding */
  --radius-xs: 6px;  --radius-sm: 10px; --radius-md: 14px;
  --radius-lg: 20px; --radius-xl: 28px; --radius-full: 9999px;

  /* -------------------------------------------------------------- DEPTH --- */
  /* Layered, slightly cool shadows. Flat rectangles read as unfinished. */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.09);
  --shadow-2: 0 2px 4px -2px rgba(16, 24, 40, 0.06), 0 4px 10px -2px rgba(16, 24, 40, 0.10);
  --shadow-3: 0 4px 8px -3px rgba(16, 24, 40, 0.06), 0 12px 20px -6px rgba(16, 24, 40, 0.12);
  --shadow-4: 0 8px 12px -6px rgba(16, 24, 40, 0.06), 0 22px 32px -8px rgba(16, 24, 40, 0.14);
  --shadow-5: 0 28px 56px -16px rgba(16, 24, 40, 0.22);
  --shadow-glow-blue: 0 6px 20px -6px rgba(0, 122, 255, 0.45);

  /* ------------------------------------------------------- LIQUID GLASS --- */
  /* Per WWDC25: glass ADAPTS to what's behind it, and gets frostier as it
     gets larger. Tune these four vars per element size, not per taste. */
  --glass-tint:      rgba(255, 255, 255, 0.55);  /* base wash */
  --glass-blur:      24px;
  --glass-sat:       180%;
  --glass-rim:       rgba(255, 255, 255, 0.75);  /* specular top edge */
  --glass-edge:      rgba(255, 255, 255, 0.40);  /* hairline border */
  --glass-underline: rgba(16, 24, 40, 0.06);     /* bottom contact shadow */

  /* Size steps — small chrome stays crisp, large platters go frosty */
  --glass-blur-xs: 12px;  --glass-tint-xs: rgba(255,255,255,0.42);
  --glass-blur-sm: 20px;  --glass-tint-sm: rgba(255,255,255,0.50);
  --glass-blur-md: 32px;  --glass-tint-md: rgba(255,255,255,0.62);
  --glass-blur-lg: 48px;  --glass-tint-lg: rgba(255,255,255,0.74);

  /* --------------------------------------------------------------- MOTION -- */
  /* Spatial springs — REAL overshoot. cubic-bezier() mathematically cannot
     exceed 1, so it can't spring; linear() can. Values derived from the
     Material 3 Expressive motion-physics spring tokens. Use for anything
     that moves, resizes, or morphs. */
  --spring-fast: linear(0,0.011,0.044,0.176 12.5%,0.452,0.7,0.879,0.976 38%,1.022,1.036 48%,1.032,1.013 61%,0.997,0.991,0.994 80%,1);
  --spring:      linear(0,0.006,0.025,0.101,0.539 21%,0.72,0.849,0.937,0.991 42%,1.024,1.043,1.049 56%,1.04,1.021,1.003 72%,0.992,0.987,0.989 88%,0.997,1);
  --spring-slow: linear(0,0.004,0.016,0.063,0.367 21%,0.555,0.717,0.842,0.927 45%,0.984,1.018 58%,1.033,1.032,1.018 75%,1.004,0.996,0.997 92%,1);
  /* Calmer spring — barely overshoots. Default for business/finance UI. */
  --spring-subtle: linear(0,0.008,0.033,0.13,0.615 24%,0.795,0.91,0.972,1.001 49%,1.01,1.009 60%,1.003,0.999 74%,1);

  --spring-fast-duration: 350ms;
  --spring-duration:      500ms;
  --spring-slow-duration: 650ms;

  /* Effects easing — color/opacity must NEVER overshoot (a bouncing color
     reads as a rendering bug). Keep these cubic-bezier. */
  --ease-effects:      cubic-bezier(0.34, 0.80, 0.34, 1);
  --ease-out:          cubic-bezier(0.00, 0.00, 0.20, 1);
  --ease-in:           cubic-bezier(0.40, 0.00, 1.00, 1);
  --ease-in-out:       cubic-bezier(0.40, 0.00, 0.20, 1);
  --ease-emphasized:   cubic-bezier(0.20, 0.00, 0.00, 1);

  --duration-instant: 100ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    350ms;
  --duration-slower:  500ms;
  --duration-chart:   900ms;   /* chart growth reads best slower than UI */
  --stagger-step:      45ms;   /* cascade between sibling reveals */

  /* ------------------------------------------------------------ DATA VIZ -- */
  /* Categorical identity ramp — ordered for maximum adjacent contrast.
     This is the ONE place color is decorative. Blue stays reserved for
     interaction, red/green for real sentiment, everywhere else. */
  --viz-1: #007AFF;  --viz-2: #00C7BE;  --viz-3: #5856D6;  --viz-4: #AF52DE;
  --viz-5: #34C759;  --viz-6: #FF9500;  --viz-7: #FF2D55;  --viz-8: #64748B;

  --viz-1-soft: rgba(0, 122, 255, 0.14);
  --viz-2-soft: rgba(0, 199, 190, 0.16);
  --viz-3-soft: rgba(88, 86, 214, 0.14);
  --viz-4-soft: rgba(175, 82, 222, 0.14);
  --viz-5-soft: rgba(52, 199, 89, 0.14);
  --viz-6-soft: rgba(255, 149, 0, 0.14);
  --viz-7-soft: rgba(255, 45, 85, 0.14);
  --viz-8-soft: rgba(100, 116, 139, 0.14);

  /* Gradient series fills — dimensionality without the flat-template bevel */
  --grad-1: linear-gradient(180deg, #4DA3FF 0%, #007AFF 100%);
  --grad-2: linear-gradient(180deg, #4ADED6 0%, #00A79F 100%);
  --grad-3: linear-gradient(180deg, #8280F0 0%, #4340B8 100%);
  --grad-4: linear-gradient(180deg, #CE86F5 0%, #9333C4 100%);
  --grad-5: linear-gradient(180deg, #6BDD8C 0%, #22A247 100%);
  --grad-6: linear-gradient(180deg, #FFB84D 0%, #F07D00 100%);
  --grad-7: linear-gradient(180deg, #FF6B8E 0%, #E01342 100%);
  --grad-8: linear-gradient(180deg, #94A3B8 0%, #52637A 100%);
  --grad-pos: linear-gradient(180deg, #6BDD8C 0%, #22A247 100%);
  --grad-neg: linear-gradient(180deg, #FF7A70 0%, #E0231A 100%);

  /* Chart chrome */
  --viz-grid:        rgba(11, 18, 32, 0.08);
  --viz-axis-label:  rgba(11, 18, 32, 0.45);
  --viz-track:       rgba(11, 18, 32, 0.07);
  --viz-tooltip-bg:  #0b1220;
  --viz-tooltip-fg:  #ffffff;

  /* Sentiment (deltas, gains/losses) — never reuse for series identity */
  --sentiment-up:   #16A34A;
  --sentiment-down: #DC2626;
  --sentiment-flat: var(--color-label-tertiary);

  --container-xl: 1280px;
}

/* ==========================================================================
   Dark theme — OPT-IN via [data-theme="dark"], not prefers-color-scheme.
   House style is light-premium by default; auto-dark historically read as
   washed-out. Enable the media query below only when explicitly asked.
   ========================================================================== */
:root[data-theme="dark"] {
  --color-label:            #f4f6fb;
  --color-label-secondary:  rgba(235, 240, 250, 0.64);
  --color-label-tertiary:   rgba(235, 240, 250, 0.40);
  --color-label-quaternary: rgba(235, 240, 250, 0.22);

  --color-bg-primary:   #0b0f16;
  --color-bg-secondary: #141922;
  --color-bg-tertiary:  #1d2430;

  --color-blue: #0A84FF;  --color-green: #30D158; --color-red: #FF453A;
  --color-orange: #FF9F0A; --color-yellow: #FFD60A; --color-teal: #64D2FF;
  --color-purple: #BF5AF2; --color-pink: #FF375F;  --color-indigo: #5E5CE6;

  --color-separator: rgba(255, 255, 255, 0.12);
  --color-fill:           rgba(150, 158, 175, 0.22);
  --color-fill-secondary: rgba(150, 158, 175, 0.16);
  --color-fill-tertiary:  rgba(150, 158, 175, 0.10);

  --glass-tint:      rgba(28, 32, 42, 0.62);
  --glass-rim:       rgba(255, 255, 255, 0.22);
  --glass-edge:      rgba(255, 255, 255, 0.12);
  --glass-underline: rgba(0, 0, 0, 0.40);
  --glass-tint-xs: rgba(28,32,42,0.50); --glass-tint-sm: rgba(28,32,42,0.58);
  --glass-tint-md: rgba(28,32,42,0.68); --glass-tint-lg: rgba(28,32,42,0.78);

  --shadow-1: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-2: 0 4px 10px -2px rgba(0,0,0,0.46);
  --shadow-3: 0 12px 20px -6px rgba(0,0,0,0.52);
  --shadow-4: 0 22px 32px -8px rgba(0,0,0,0.58);
  --shadow-5: 0 28px 56px -16px rgba(0,0,0,0.66);

  --viz-grid:       rgba(255, 255, 255, 0.10);
  --viz-axis-label: rgba(235, 240, 250, 0.48);
  --viz-track:      rgba(255, 255, 255, 0.08);
  --viz-tooltip-bg: #f4f6fb;
  --viz-tooltip-fg: #0b1220;
}

/* ==========================================================================
   Liquid Glass material
   ========================================================================== */

/* Regular glass — the adaptive default. Safe over anything. */
.glass {
  position: relative;
  background: var(--glass-tint);
  border: 0.5px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-rim),          /* specular top edge */
    inset 0 -1px 0 var(--glass-underline),   /* contact shadow */
    var(--shadow-3);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass {
    background: color-mix(in srgb, var(--glass-tint) 72%, transparent);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  }
}

/* Size steps — bigger surfaces are frostier (WWDC25: larger platters simulate
   a thicker, more substantial material). */
.glass--xs { --glass-blur: var(--glass-blur-xs); --glass-tint: var(--glass-tint-xs); box-shadow: inset 0 1px 0 var(--glass-rim), var(--shadow-1); }
.glass--sm { --glass-blur: var(--glass-blur-sm); --glass-tint: var(--glass-tint-sm); }
.glass--md { --glass-blur: var(--glass-blur-md); --glass-tint: var(--glass-tint-md); box-shadow: inset 0 1px 0 var(--glass-rim), var(--shadow-4); }
.glass--lg { --glass-blur: var(--glass-blur-lg); --glass-tint: var(--glass-tint-lg); box-shadow: inset 0 1px 0 var(--glass-rim), var(--shadow-5); }

/* Clear glass — permanently transparent. ONLY over media-rich content, and
   ONLY with a dimming layer beneath the text. Never mix with .glass. */
.glass--clear {
  --glass-tint: rgba(255, 255, 255, 0.06);
  --glass-blur: 4px;
  --glass-sat: 120%;
  border-color: rgba(255, 255, 255, 0.20);
}
.glass--clear::after {           /* the required dimming layer */
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.42));
  pointer-events: none;
  z-index: -1;
}

/* Tint — use on ONE primary action per view. When everything is tinted,
   nothing stands out. */
.glass--tinted {
  --glass-tint: color-mix(in srgb, var(--tint-color, var(--color-blue)) 26%, rgba(255,255,255,0.5));
  border-color: color-mix(in srgb, var(--tint-color, var(--color-blue)) 40%, transparent);
  color: color-mix(in srgb, var(--tint-color, var(--color-blue)) 82%, var(--color-label));
}

/* Specular rim sweep — the grazing highlight. Additive over the material. */
.glass--specular::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.00) 38%,
    rgba(255,255,255,0.00) 62%,
    rgba(255,255,255,0.18) 100%);
  pointer-events: none;
}

/* Inner illumination on press — the glow starts under the pointer and
   spreads through the element (WWDC25 "illuminates from within"). */
.glass--interactive {
  overflow: hidden;
  transition: transform var(--duration-fast) var(--spring-fast),
              box-shadow var(--duration-normal) var(--ease-effects);
  cursor: pointer;
}
.glass--interactive::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 140px at var(--px, 50%) var(--py, 50%),
              rgba(255,255,255,0.55), transparent 70%);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-effects);
  pointer-events: none;
}
.glass--interactive:hover::after  { opacity: 0.45; }
.glass--interactive:active::after { opacity: 1; }
.glass--interactive:active        { transform: scale(0.97); }

/* ==========================================================================
   Scroll edge effect — keeps floating chrome legible over scrolling content.
   Soft = progressive blur ramp. Hard = defined boundary for dense UI.
   ========================================================================== */
.scroll-edge {
  position: fixed; left: 0; right: 0;
  height: 96px;
  pointer-events: none;
  z-index: 90;
}
.scroll-edge--top    { top: 0; }
.scroll-edge--bottom { bottom: 0; transform: scaleY(-1); }

/* Stacked layers with increasing blur + matching masks = true progressive blur */
.scroll-edge > i {
  position: absolute; inset: 0;
  display: block;
  -webkit-backdrop-filter: blur(var(--b));
  backdrop-filter: blur(var(--b));
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--m0), transparent var(--m1));
  mask-image: linear-gradient(to bottom, #000 var(--m0), transparent var(--m1));
}
.scroll-edge > i:nth-child(1) { --b: 1px;  --m0: 0%;  --m1: 100%; }
.scroll-edge > i:nth-child(2) { --b: 3px;  --m0: 0%;  --m1: 70%;  }
.scroll-edge > i:nth-child(3) { --b: 8px;  --m0: 0%;  --m1: 45%;  }
.scroll-edge > i:nth-child(4) { --b: 18px; --m0: 0%;  --m1: 25%;  }

.scroll-edge--hard {
  height: 1px;
  background: var(--color-separator);
  backdrop-filter: none;
}

/* ==========================================================================
   Ambient mesh backdrop — glass needs something worth refracting.
   Flat #fff behind glass makes the material invisible.
   ========================================================================== */
.mesh-bg {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(58% 48% at 12% 8%,  color-mix(in srgb, var(--viz-1) 22%, transparent), transparent 70%),
    radial-gradient(52% 46% at 88% 4%,  color-mix(in srgb, var(--viz-2) 20%, transparent), transparent 68%),
    radial-gradient(60% 55% at 78% 92%, color-mix(in srgb, var(--viz-3) 18%, transparent), transparent 70%),
    radial-gradient(50% 45% at 8% 88%,  color-mix(in srgb, var(--viz-4) 16%, transparent), transparent 66%),
    var(--color-bg-secondary);
}

/* ==========================================================================
   Accessibility — the three system modifiers, mirrored on the web
   ========================================================================== */

/* Reduced Transparency → glass gets frostier and obscures more */
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass--clear {
    background: var(--color-bg-primary) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .glass--clear::after { display: none; }
  .scroll-edge > i { backdrop-filter: none; }
}

/* Increased Contrast → predominantly solid, with a contrasting border */
@media (prefers-contrast: more) {
  .glass {
    background: var(--color-bg-primary);
    border: 1.5px solid var(--color-label);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  :root { --color-label-secondary: rgba(11,18,32,0.86); --viz-grid: rgba(11,18,32,0.28); }
}

/* Reduce Motion → disable elastic properties, keep the information */
@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;
  }
}

:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.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;
}