/* Design system preview: tokens and components. */

@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* ---------------------------------------------------------------- tokens --- */
:root {
  /* Type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-xs: 12px; --text-sm: 13px; --text-md: 15px; --text-lg: 17px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 40px; --text-4xl: 64px;
  --leading: 1.45; --tracking-tight: -0.02em; --tracking-display: -0.035em;

  /* Spacing (4pt grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* Corners: concentric. Inner radius = outer radius − padding. */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* Motion: springs. --ease-spring is replaced at runtime by a real spring
     curve via linear() (demo.js); this cubic-bezier is the fallback. */
  --ease-spring: cubic-bezier(.2, 1.25, .35, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 160ms; --dur: 280ms; --dur-slow: 520ms;

  /* Accessibility minimum hit target */
  --hit: 36px;
}

/* --- Neutrals + materials: dark (default) --- */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #07080a;               /* picked (Background) */
  --bg-elev: color-mix(in oklab, var(--bg), white 3%);
  --surface: color-mix(in oklab, var(--bg), white 6.5%);   /* content layer: solid cards */
  --surface-2: color-mix(in oklab, var(--bg), white 10%);
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .14);
  --label: #f2f4f7;            /* vibrant label levels */
  --label-2: rgba(242, 244, 247, .68);
  --label-3: rgba(242, 244, 247, .44);
  --label-4: rgba(242, 244, 247, .24);
  /* Glass materials (functional layer only) */
  --glass-ultrathin: rgba(255, 255, 255, .035);
  --glass-thin: rgba(255, 255, 255, .055);
  --glass-regular: rgba(22, 24, 29, .52);
  --glass-thick: rgba(18, 20, 24, .74);
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .07), inset 10px 0 18px -12px color-mix(in srgb, var(--accent) 30%, transparent), inset -10px 0 18px -12px color-mix(in srgb, var(--accent-2) 26%, transparent), inset 0 10px 16px -12px rgba(255, 255, 255, .28), inset 0 -10px 16px -12px color-mix(in srgb, var(--accent-3) 20%, transparent);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 40px rgba(0, 0, 0, .45);
  --scrim: rgba(3, 4, 6, .55);
  --glass-film: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 42%), linear-gradient(115deg, color-mix(in srgb, var(--accent) 7%, transparent), color-mix(in srgb, var(--accent-2) 6%, transparent) 28%, transparent 52%, color-mix(in srgb, var(--accent-3) 5%, transparent) 78%, color-mix(in srgb, var(--accent-2) 5%, transparent));
  --glass-iris: conic-gradient(from var(--rim-a, 200deg), rgba(255, 255, 255, .7), color-mix(in srgb, var(--accent) 52%, transparent) 6%, color-mix(in srgb, var(--accent-2) 48%, transparent) 13%, color-mix(in srgb, var(--accent-2) 30%, transparent) 20%, rgba(255, 255, 255, .1) 31%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .1) 62%, color-mix(in srgb, var(--accent-3) 44%, transparent) 72%, color-mix(in srgb, var(--accent) 36%, transparent) 82%, rgba(255, 255, 255, .7));
  /* Semantic (data) colours */
  --up: #3ddc97; --down: #ff5a52; --warn: #ffb547; --info: #5ab0ff;
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #eef0f3;
  --bg-elev: color-mix(in oklab, var(--bg), white 50%);
  --surface: color-mix(in oklab, var(--bg), white 88%);
  --surface-2: color-mix(in oklab, var(--bg), white 55%);
  --line: rgba(10, 14, 20, .08);
  --line-strong: rgba(10, 14, 20, .14);
  --label: #0b0d11;
  --label-2: rgba(11, 13, 17, .66);
  --label-3: rgba(11, 13, 17, .45);
  --label-4: rgba(11, 13, 17, .25);
  --glass-ultrathin: rgba(255, 255, 255, .30);
  --glass-thin: rgba(255, 255, 255, .45);
  --glass-regular: rgba(255, 255, 255, .58);
  --glass-thick: rgba(255, 255, 255, .78);
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(10, 14, 20, .06), inset 10px 0 18px -12px color-mix(in srgb, var(--accent) 22%, transparent), inset -10px 0 18px -12px color-mix(in srgb, var(--accent-2) 18%, transparent), inset 0 -10px 16px -12px color-mix(in srgb, var(--accent-3) 16%, transparent);
  --glass-shadow: 0 1px 2px rgba(10, 14, 20, .08), 0 12px 40px rgba(10, 14, 20, .14);
  --scrim: rgba(230, 233, 238, .55);
  --glass-film: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 45%), linear-gradient(115deg, color-mix(in srgb, var(--accent) 9%, transparent), color-mix(in srgb, var(--accent-2) 8%, transparent) 28%, transparent 52%, color-mix(in srgb, var(--accent-3) 8%, transparent) 78%, color-mix(in srgb, var(--accent-2) 8%, transparent));
  --glass-iris: conic-gradient(from var(--rim-a, 200deg), rgba(255, 255, 255, 1), color-mix(in srgb, var(--accent) 34%, transparent) 7%, color-mix(in srgb, var(--accent-2) 30%, transparent) 14%, color-mix(in srgb, var(--accent-2) 22%, transparent) 21%, rgba(255, 255, 255, .5) 32%, rgba(10, 14, 20, .06) 50%, rgba(255, 255, 255, .5) 63%, color-mix(in srgb, var(--accent-3) 28%, transparent) 74%, color-mix(in srgb, var(--accent) 24%, transparent) 84%, rgba(255, 255, 255, 1));
  --up: #0f9f62; --down: #e0362c; --warn: #b86e00; --info: #0a6cda;
}

/* --- Palette roles. Primary/secondary/tertiary are picked in the theme lab
   (or set here); every other accent value is derived from them. --- */
:root {
  --accent: #3b9eff;     /* primary: buttons, selection, focus, links, progress */
  --accent-2: #8f80ff;   /* secondary: glass tint, glow, 2nd chart series */
  --accent-3: #35d4e8;   /* tertiary: highlights, 3rd chart series, rim light */
  --accent-ink: #04111f; /* text on primary (set for contrast by the theme lab) */
  --accent-strong: color-mix(in oklab, var(--accent), black 14%);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 45%, transparent);
  --accent-2-soft: color-mix(in srgb, var(--accent-2) 16%, transparent);
  --accent-3-soft: color-mix(in srgb, var(--accent-3) 16%, transparent);
}

/* ------------------------------------------------------------------ base --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--label);
  font: 400 var(--text-md)/var(--leading) var(--font-sans);
  -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11";
}
.mono, code, kbd, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
h1, h2, h3 { margin: 0; letter-spacing: var(--tracking-tight); font-weight: 600; }
.display { font-size: clamp(40px, 6vw, var(--text-4xl)); line-height: 1.02; letter-spacing: var(--tracking-display); font-weight: 600; }
.eyebrow { font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--label-3); }
.muted { color: var(--label-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-soft); }

/* ------------------------------------------------------------- materials --- */
/* Functional layer only (nav, toolbars, menus, floating controls). */
.glass {
  position: relative; isolation: isolate;
  background-color: var(--glass-regular); background-image: var(--glass-film);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  box-shadow: var(--glass-rim), var(--glass-shadow);
  border-radius: var(--r-lg);
}
/* Iridescent rim: a thin-film rainbow edge that turns with the light
   (--rim-a follows the pointer / scroll). Pure CSS: works in every browser
   and costs almost nothing, unlike animating what's behind the glass. */
.glass::before, .iri::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; padding: 1.25px;
  background: var(--glass-iris);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.glass.thin { background-color: var(--glass-thin); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
.glass.thick { background-color: var(--glass-thick); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); }
.glass.clear { background-color: var(--glass-ultrathin); -webkit-backdrop-filter: blur(6px) saturate(150%); backdrop-filter: blur(6px) saturate(150%); }
/* Chrome-family: demo.js adds .refract and an SVG lens filter (#ocu-lens-N). */
@media (prefers-reduced-transparency: reduce) { .glass, .glass.thin, .glass.clear { background-color: var(--glass-thick); background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Content layer: solid, calm surfaces. No glass here. */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.card.raised { box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 8px 24px rgba(0, 0, 0, .18); }

/* --------------------------------------------------------------- buttons --- */
.btn {
  --h: 36px; appearance: none; border: 0; cursor: pointer; font: 500 var(--text-sm)/1 var(--font-sans);
  height: var(--h); min-width: var(--hit); padding: 0 16px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--label); position: relative;
  background: color-mix(in srgb, var(--label) 7%, transparent); box-shadow: var(--glass-rim);
  transition: transform var(--dur) var(--ease-spring), background var(--dur-fast), box-shadow var(--dur-fast);
}
.btn:hover { background: color-mix(in srgb, var(--label) 11%, transparent); }
.btn:active { transform: scale(.96); }
.btn:not(.plain):not(.prominent)::before, .segmented::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; padding: 1px; background: var(--glass-iris); opacity: .4; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.btn.prominent { background: var(--accent); color: var(--accent-ink); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 20px -6px var(--accent-glow); }
.btn.prominent:hover { background: var(--accent-strong); }
.btn.plain { background: transparent; box-shadow: none; color: var(--accent); }
.btn.plain:hover { background: var(--accent-soft); }
.btn.destructive { color: var(--down); }
.btn.lg { --h: 46px; padding: 0 22px; font-size: var(--text-md); }
.btn.sm { --h: 28px; padding: 0 12px; font-size: var(--text-xs); }
.btn.icon { padding: 0; width: var(--h); }
.btn svg { width: 16px; height: 16px; }
.btn:disabled { opacity: .4; cursor: default; transform: none; }
.btn[hidden] { display: none; }

/* ---------------------------------------------------------------- toggle --- */
.switch { position: relative; width: 46px; height: 28px; flex: none; display: inline-block; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch .track { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--line-strong); box-shadow: inset 0 0 0 1px var(--line); transition: background var(--dur) var(--ease-out); }
.switch .thumb { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 0 0 .5px rgba(0, 0, 0, .1); transition: transform var(--dur-slow) var(--ease-spring), width var(--dur) var(--ease-spring); }
.switch input:checked ~ .track { background: var(--accent); }
.switch input:checked ~ .thumb { transform: translateX(18px); }
.switch input:active ~ .thumb { width: 30px; }
.switch input:checked:active ~ .thumb { transform: translateX(12px); }

/* ------------------------------------------------------ segmented control --- */
.segmented { position: relative; display: inline-flex; padding: 3px; gap: 0; border-radius: var(--r-pill); background: var(--glass-thin); box-shadow: var(--glass-rim); }
.segmented button { position: relative; z-index: 1; appearance: none; border: 0; background: none; color: var(--label-2); font: 500 var(--text-sm)/1 var(--font-sans); height: 30px; padding: 0 14px; border-radius: var(--r-pill); cursor: pointer; transition: color var(--dur-fast); }
.segmented button[aria-selected="true"] { color: var(--label); }
.segmented .indicator { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: var(--r-pill); background: color-mix(in srgb, var(--label) 12%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 8px rgba(0, 0, 0, .25); transition: transform var(--dur-slow) var(--ease-spring), width var(--dur-slow) var(--ease-spring); }

/* ---------------------------------------------------------------- slider --- */
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; --v: 50%; }
.slider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) var(--v), var(--line-strong) var(--v)); }
.slider::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line-strong); }
.slider::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); transition: transform var(--dur) var(--ease-spring); }
.slider:active::-webkit-slider-thumb { transform: scale(1.15); }
.slider::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }

/* ---------------------------------------------------------------- fields --- */
.field { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--label-3); transition: box-shadow var(--dur-fast); }
.field:focus-within { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); }
.field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--label); font: inherit; }
.field input::placeholder { color: var(--label-3); }
.field.search { border-radius: var(--r-pill); }
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; font-size: 11px; color: var(--label-2); background: var(--line); box-shadow: inset 0 -1px 0 var(--line-strong); }

/* ---------------------------------------------------------- badges, chips --- */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font: 500 11px/1 var(--font-mono); letter-spacing: .02em; background: var(--line); color: var(--label-2); }
.badge.accent { background: var(--accent-soft); color: var(--accent); }
.badge.accent-2 { background: var(--accent-2-soft); color: var(--accent-2); }
.badge.accent-3 { background: var(--accent-3-soft); color: var(--accent-3); }
.badge.up { background: color-mix(in srgb, var(--up) 16%, transparent); color: var(--up); }
.badge.down { background: color-mix(in srgb, var(--down) 16%, transparent); color: var(--down); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff3b30; color: #fff; font: 600 11px/1 var(--font-sans); }

/* ------------------------------------------------- menus, popovers, tips --- */
.menu { position: absolute; min-width: 220px; padding: 6px; border-radius: var(--r-md); z-index: 50; transform-origin: var(--origin, top left); }
.menu[hidden] { display: block; visibility: hidden; opacity: 0; transform: scale(.9); pointer-events: none; }
.menu { opacity: 1; transform: scale(1); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-spring), visibility 0s; }
.menu .item { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: calc(var(--r-md) - 6px); background: none; color: var(--label); font: 400 var(--text-sm)/1 var(--font-sans); text-align: left; cursor: pointer; }
.menu .item:hover, .menu .item[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.menu .item .shortcut { margin-left: auto; color: inherit; opacity: .6; font: 400 11px/1 var(--font-mono); }
.menu .sep { height: 1px; margin: 6px 4px; background: var(--line); }
.tooltip { position: absolute; padding: 6px 10px; border-radius: var(--r-sm); font-size: var(--text-xs); white-space: nowrap; pointer-events: none; }

/* -------------------------------------------------------- modals, sheets --- */
.scrim { position: fixed; inset: 0; z-index: 80; background: var(--scrim); opacity: 0; transition: opacity var(--dur) var(--ease-out); pointer-events: none; }
.scrim.open { opacity: 1; pointer-events: auto; }
.modal { position: fixed; left: 50%; top: 50%; z-index: 90; width: min(420px, calc(100vw - 32px)); padding: var(--s-6); border-radius: var(--r-xl); transform: translate(-50%, -46%) scale(.94); opacity: 0; pointer-events: none; transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur) var(--ease-out); }
.modal.open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
.sheet { position: fixed; top: 12px; right: 12px; bottom: 12px; z-index: 90; width: min(400px, calc(100vw - 24px)); padding: var(--s-6); border-radius: var(--r-xl); transform: translateX(calc(100% + 24px)); transition: transform var(--dur-slow) var(--ease-spring); overflow: auto; }
.sheet.open { transform: none; }

/* ----------------------------------------------------------------- toast --- */
.toasts { position: fixed; left: 50%; bottom: 96px; z-index: 100; display: grid; gap: 8px; transform: translateX(-50%); }
.toast { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: var(--r-pill); font-size: var(--text-sm); animation: toast-in var(--dur-slow) var(--ease-spring) both; }
.toast.out { animation: toast-out var(--dur) var(--ease-out) both; }
@keyframes toast-in { from { transform: translateY(24px) scale(.9); opacity: 0; } }
@keyframes toast-out { to { transform: translateY(8px) scale(.96); opacity: 0; } }

/* -------------------------------------------------------- command palette --- */
.palette { position: fixed; left: 50%; top: 14vh; z-index: 95; width: min(620px, calc(100vw - 32px)); border-radius: var(--r-xl); padding: 8px; transform: translateX(-50%) scale(.96); opacity: 0; pointer-events: none; transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur-fast) var(--ease-out); }
.palette.open { transform: translateX(-50%) scale(1); opacity: 1; pointer-events: auto; }
.palette .field { background: transparent; box-shadow: none; height: 52px; font-size: var(--text-lg); }
.palette .results { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px; }

/* ------------------------------------------------------- bars (functional) --- */
.navbar { position: sticky; top: 12px; z-index: 40; display: flex; align-items: center; gap: var(--s-3); height: 56px; padding: 0 10px 0 16px; margin: 12px auto 0; width: min(1180px, calc(100% - 24px)); border-radius: var(--r-pill); }
.tabbar { position: fixed; left: 50%; bottom: 20px; z-index: 40; display: flex; gap: 4px; padding: 6px; border-radius: var(--r-pill); transform: translateX(-50%); transition: transform var(--dur-slow) var(--ease-spring), padding var(--dur-slow) var(--ease-spring); }
.tabbar.min { transform: translateX(-50%) scale(.86); }
.tabbar button { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2px; width: 74px; height: 50px; padding-top: 7px; border: 0; background: none; color: var(--label-2); font: 500 10px/1 var(--font-sans); border-radius: var(--r-pill); cursor: pointer; }
.tabbar button svg { width: 22px; height: 22px; }
.tabbar button[aria-selected="true"] { color: var(--accent); }
.tabbar .indicator { position: absolute; top: 6px; bottom: 6px; left: 0; border-radius: var(--r-pill); background: color-mix(in srgb, var(--label) 10%, transparent); transition: transform var(--dur-slow) var(--ease-spring); }
/* Scroll-edge effect: content fades as it slides under a bar. */
.scroll-edge { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 48px); mask-image: linear-gradient(to bottom, transparent 0, #000 48px); }

/* ---------------------------------------------------- progress, skeleton --- */
.progress { height: 6px; border-radius: 3px; background: var(--line-strong); overflow: hidden; }
.progress > i { display: block; height: 100%; width: var(--v, 40%); border-radius: inherit; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); transition: width var(--dur-slow) var(--ease-spring); }
.skeleton { border-radius: var(--r-xs); background: linear-gradient(90deg, var(--line) 25%, var(--line-strong) 50%, var(--line) 75%); background-size: 300% 100%; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { to { background-position: -150% 0; } }

/* --------------------------------------------------------------- tables --- */
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th { text-align: left; font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--label-3); padding: 0 12px 10px; border-bottom: 1px solid var(--line); }
.table td { padding: 12px; border-bottom: 1px solid var(--line); }
.table tr:hover td { background: color-mix(in srgb, var(--label) 3%, transparent); }
.table .num { text-align: right; }

/* --------------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* =============================================================================
   v0.2 components: forms, data, content, layout, status
   ============================================================================= */

/* ------------------------------------------------------------ select ---- */
.select { position: relative; }
.select > button { display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 12px 0 14px; border: 0; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--label); font: inherit; font-size: var(--text-sm); cursor: pointer; text-align: left; }
.select > button[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); }
.select > button svg:last-child { margin-left: auto; color: var(--label-3); }
.select .menu { top: calc(100% + 6px); left: 0; right: 0; }
.select .item[aria-checked="true"]::after { content: ""; margin-left: auto; width: 14px; height: 8px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -2px); }

/* --------------------------------------------- checkbox, radio, cards ---- */
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--text-sm); }
.check input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 6px; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line-strong); display: grid; place-items: center; cursor: pointer; transition: background var(--dur-fast), box-shadow var(--dur-fast); }
.check input::after { content: ""; width: 10px; height: 5px; border: solid var(--accent-ink); border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0); margin-top: -2px; transition: transform var(--dur) var(--ease-spring); }
.check input:checked { background: var(--accent); box-shadow: none; }
.check input:checked::after { transform: rotate(-45deg) scale(1); }
.check input[type="radio"] { border-radius: 50%; }
.check input[type="radio"]::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--accent-ink); transform: scale(0); margin: 0; }
.check input[type="radio"]:checked::after { transform: scale(1); }
.radio-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.radio-card { position: relative; display: grid; gap: 8px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; font-size: var(--text-sm); transition: box-shadow var(--dur-fast), transform var(--dur) var(--ease-spring); }
.radio-card:hover { transform: translateY(-1px); }
.radio-card input { position: absolute; opacity: 0; }
.radio-card:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent); }
.radio-card .thumb-art { height: 44px; border-radius: calc(var(--r-md) - 6px); }

/* ---------------------------------------------- textarea, dropzone ---- */
.textarea { width: 100%; min-height: 96px; resize: vertical; padding: 12px 14px; border: 0; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--label); font: inherit; font-size: var(--text-sm); line-height: 1.5; }
.textarea:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); }
.textarea::placeholder { color: var(--label-3); }
.dropzone { display: grid; justify-items: center; gap: 6px; padding: 22px; border-radius: var(--r-lg); border: 1.5px dashed var(--line-strong); color: var(--label-2); font-size: var(--text-sm); text-align: center; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur) var(--ease-spring); }
.dropzone svg { width: 26px; height: 26px; color: var(--accent); }
.dropzone.over { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.01); }
.field.date input { color-scheme: inherit; }

/* ------------------------------------------------------------ chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--line); color: var(--label-2); font: 500 var(--text-xs)/1 var(--font-sans); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur) var(--ease-spring); }
.chip:active { transform: scale(.95); }
.chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.chip svg { width: 14px; height: 14px; }
.source-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 4px; border-radius: var(--r-pill); background: var(--line); font: 500 11.5px/1 var(--font-sans); color: var(--label-2); }
.source-chip .logo { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font: 700 9px/1 var(--font-sans); color: #fff; background: var(--c, var(--accent-2)); }

/* ---------------------------------------------------------- stepper ---- */
.stepper { display: flex; align-items: center; gap: 0; }
.stepper .step { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--label-3); white-space: nowrap; }
.stepper .step i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 600 11px/1 var(--font-mono); font-style: normal; background: var(--line); color: var(--label-2); transition: background var(--dur), color var(--dur); }
.stepper .step.done i, .stepper .step.on i { background: var(--accent); color: var(--accent-ink); }
.stepper .step.on { color: var(--label); }
.stepper .bar { flex: 1; height: 2px; min-width: 18px; margin: 0 8px; border-radius: 1px; background: var(--line-strong); position: relative; overflow: hidden; }
.stepper .bar::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(var(--f, 0)); transform-origin: left; transition: transform var(--dur-slow) var(--ease-spring); }

/* ------------------------------------------------------ alerts, empty ---- */
.alert { display: flex; gap: 12px; align-items: start; padding: 12px 14px; border-radius: var(--r-md); font-size: var(--text-sm); background: color-mix(in srgb, var(--c) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); --c: var(--info); }
.alert svg { flex: none; color: var(--c); margin-top: 1px; }
.alert b { display: block; margin-bottom: 2px; }
.alert.warn { --c: var(--warn); } .alert.error { --c: var(--down); } .alert.success { --c: var(--up); }
.empty { display: grid; justify-items: center; gap: 8px; padding: 28px 16px; text-align: center; color: var(--label-2); font-size: var(--text-sm); }
.empty .empty-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); margin-bottom: 4px; }
.empty .empty-icon svg { width: 24px; height: 24px; }
.empty b { color: var(--label); font-size: var(--text-md); }

/* ------------------------------------------------------- stat cards ---- */
.stat { display: grid; gap: 4px; padding: 16px; border-radius: var(--r-md); background: var(--surface-2); }
.stat .k { font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--label-3); }
.stat .v { font: 600 26px/1.1 var(--font-sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .d { font: 500 12px/1 var(--font-mono); }

/* ------------------------------------------------ probability bars ---- */
.outcome { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.outcome:last-child { border-bottom: 0; }
.outcome .pct { font: 600 var(--text-sm)/1 var(--font-mono); }
.outcome .track { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.outcome .track i { display: block; height: 100%; width: var(--v); border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--accent)) 70%, transparent), var(--c, var(--accent))); transition: width var(--dur-slow) var(--ease-spring); }

/* ------------------------------------------------------ area chart ---- */
.chart { position: relative; height: 180px; }
.chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart .grid line { stroke: var(--line); }
.chart .area { fill: url(#chart-fill); }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.chart .line-2 { fill: none; stroke: var(--accent-2); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .8; }
.chart .cross { stroke: var(--label-3); stroke-dasharray: 3 3; }
.chart .dot { fill: var(--accent); stroke: var(--surface); stroke-width: 3; }
.chart-tip { position: absolute; top: 0; padding: 6px 10px; border-radius: var(--r-sm); font: 500 11px/1.4 var(--font-mono); white-space: nowrap; pointer-events: none; transform: translateX(-50%); }

/* ------------------------------------------------------- live feed ---- */
.feed { list-style: none; margin: 0; padding: 0; display: grid; }
.feed li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.feed li.new { animation: feed-in var(--dur-slow) var(--ease-spring) both; }
@keyframes feed-in { from { opacity: 0; transform: translateY(-10px); background: var(--accent-soft); } }
.feed .avatar-sm { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--font-sans); color: #fff; background: var(--c); }
.feed small { color: var(--label-3); font-family: var(--font-mono); font-size: 11px; }
.new-pill { position: sticky; top: 0; z-index: 2; justify-self: center; margin: 0 auto 6px; }

/* ----------------------------------------------- sortable table head ---- */
.table th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.table th button:hover { color: var(--label); }
.table th button svg { width: 12px; height: 12px; opacity: .4; }
.table th[aria-sort="ascending"] button, .table th[aria-sort="descending"] button { color: var(--accent); }
.table th[aria-sort] button svg { opacity: 1; }

/* ------------------------------------------------------- accordion ---- */
.accordion { border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.accordion details + details { border-top: 1px solid var(--line); }
.accordion summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; font-size: var(--text-sm); font-weight: 500; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary svg { flex: none; color: var(--label-3); }
.accordion summary svg:last-child { margin-left: auto; transition: transform var(--dur) var(--ease-spring); }
.accordion details[open] summary svg:last-child { transform: rotate(180deg); }
.accordion .body { padding: 0 16px 14px; color: var(--label-2); font-size: var(--text-sm); }

/* ----------------------------------------------------- side nav ---- */
.sidenav { display: grid; gap: 2px; padding: 8px; border-radius: var(--r-lg); }
.sidenav .group { padding: 10px 10px 4px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--label-3); }
.sidenav a { position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: calc(var(--r-lg) - 8px); color: var(--label-2); text-decoration: none; font-size: var(--text-sm); }
.sidenav a:hover { background: var(--line); color: var(--label); }
.sidenav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.sidenav a .count { margin-left: auto; }

/* ---------------------------------------------- widgets (workspace) ---- */
.workspace { display: grid; grid-template-columns: var(--split, 1.6fr) 10px 1fr; gap: 0; min-height: 300px; }
.widget { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; min-width: 0; }
.widget-head { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 6px; border-bottom: 1px solid var(--line); font-size: var(--text-sm); font-weight: 500; }
.widget-head .grip { display: grid; place-items: center; width: 24px; height: 28px; border-radius: 6px; color: var(--label-3); cursor: grab; }
.widget-head .grip:hover { background: var(--line); color: var(--label); }
.widget-head .btn { --h: 28px; }
.widget-body { padding: 12px 14px; overflow: auto; }
.resize-handle { position: relative; cursor: col-resize; touch-action: none; }
.resize-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 40px; border-radius: 2px; background: var(--line-strong); transform: translate(-50%, -50%); transition: background var(--dur-fast), height var(--dur) var(--ease-spring); }
.resize-handle:hover::after, .resize-handle.dragging::after { background: var(--accent); height: 64px; }
.widget-lib { display: grid; gap: 8px; }
.widget-lib button { display: flex; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--label); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; transition: transform var(--dur) var(--ease-spring); }
.widget-lib button:hover { transform: translateX(3px); box-shadow: inset 0 0 0 1px var(--accent); }
.widget-lib .ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.widget-lib small { display: block; color: var(--label-3); font-size: 11.5px; }

/* --------------------------------------------- editorial + article ---- */
.art { position: relative; border-radius: var(--r-md); overflow: hidden; background: radial-gradient(120% 90% at var(--x, 20%) var(--y, 20%), color-mix(in srgb, var(--accent) 70%, transparent), transparent 60%), radial-gradient(90% 80% at 85% 80%, color-mix(in srgb, var(--accent-2) 65%, transparent), transparent 60%), radial-gradient(70% 60% at 60% 30%, color-mix(in srgb, var(--accent-3) 50%, transparent), transparent 70%), var(--surface-2); }
.art::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 4px); mix-blend-mode: overlay; }
.story { display: grid; gap: 10px; text-decoration: none; color: inherit; }
.story .art { aspect-ratio: 16 / 10; transition: transform var(--dur-slow) var(--ease-spring); }
.story:hover .art { transform: scale(1.015); }
.story h3 { font-size: var(--text-lg); line-height: 1.25; letter-spacing: -.015em; }
.story.big h3 { font-size: var(--text-2xl); line-height: 1.12; }
.story .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--text-xs); color: var(--label-3); }
.article { max-width: 680px; }
.article .dek { font-size: var(--text-lg); color: var(--label-2); margin: 10px 0 16px; line-height: 1.5; }
.article .byline { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--label-2); padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.article p:not(.eyebrow):not(.dek) { font-size: 17px; line-height: 1.7; color: color-mix(in srgb, var(--label) 88%, transparent); margin: 0 0 16px; }
.article blockquote { margin: 22px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent); font-size: var(--text-xl); line-height: 1.35; letter-spacing: -.015em; color: var(--label); }
.article sup a { color: var(--accent); text-decoration: none; font: 600 11px/1 var(--font-mono); padding: 1px 4px; border-radius: 4px; background: var(--accent-soft); }

/* --------------------------------------------------------- pricing ---- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.plan { display: grid; gap: 14px; align-content: start; padding: 22px; border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.plan.featured { box-shadow: inset 0 0 0 1.5px var(--accent), 0 20px 50px -24px var(--accent-glow); }
.plan .price { font: 600 40px/1 var(--font-sans); letter-spacing: -.03em; }
.plan .price small { font: 400 var(--text-sm)/1 var(--font-sans); color: var(--label-3); letter-spacing: 0; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--text-sm); color: var(--label-2); }
.plan li { display: flex; gap: 8px; align-items: center; }
.plan li svg { color: var(--accent); flex: none; }

/* --------------------------------------------------- sign-in card ---- */
.auth { display: grid; gap: 12px; padding: 26px; border-radius: var(--r-xl); max-width: 380px; }
.auth .divider { display: flex; align-items: center; gap: 10px; color: var(--label-3); font-size: var(--text-xs); }
.auth .divider::before, .auth .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth .btn { width: 100%; }
.inline-form { display: flex; gap: 6px; padding: 5px; border-radius: var(--r-pill); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.inline-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 0 12px; color: var(--label); font: inherit; font-size: var(--text-sm); }
.inline-form:focus-within { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); }

/* ------------------------------------------------- avatar account menu ---- */
.menu .menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; }
.menu .menu-head b { display: block; font-size: var(--text-sm); }
.menu .menu-head small { color: var(--label-3); font-size: var(--text-xs); }

/* ------------------------------------------------------- scrollbars ---- */
/* macOS-style overlay bars: no track, a slim rounded thumb that is faint at
   rest, firmer while scrolling or hovered, and accent-tinted while dragged.
   Chrome/Edge/Safari use ::-webkit-scrollbar; Firefox gets the thin standard
   bar in matching colours. demo.js sets [data-scrolling] for ~1 s after a
   scroll so the thumb "wakes up" like macOS. */
::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  min-height: 44px; border-radius: 999px; border: 3.5px solid transparent; background-clip: padding-box;
  background-color: color-mix(in srgb, var(--label) 16%, transparent);
}
[data-scrolling]::-webkit-scrollbar-thumb, :hover::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--label) 30%, transparent); }
::-webkit-scrollbar-thumb:hover { border-width: 2.5px; background-color: color-mix(in srgb, var(--label) 42%, transparent); }
::-webkit-scrollbar-thumb:active { border-width: 2.5px; background-color: color-mix(in srgb, var(--accent) 75%, transparent); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
/* Page bar: a touch inset from the window edge. */
html::-webkit-scrollbar { width: 14px; }
html::-webkit-scrollbar-thumb { border-width: 4px; }
html::-webkit-scrollbar-thumb:hover, html::-webkit-scrollbar-thumb:active { border-width: 3px; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--label) 28%, transparent) transparent; }
}