/*!***************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./styles/tokens.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************/
/* ==========================================================================
   Copied from ../tokens.css on Oct 19, 2026. From here on, this copy is the source of truth.
   Investor design system — foundation tokens
   Palette A · cool slate neutrals + ink blue accent · light-first
   Components read ONLY these tokens. Add a token before adding a one-off.
   ========================================================================== */

/* Fonts: Geist, Geist Mono and Newsreader are self-hosted by next/font (app/fonts.ts), which sets the --font-* variables below. */

:root {
  /* ---- Surfaces ---------------------------------------------------------- */
  --bg:            #f5f7fa;   /* page plane */
  --surface:       #ffffff;   /* cards, panels, table body */
  --raised:        #ffffff;   /* menus, popovers, modals (paired with shadow) */
  --sunken:        #f0f2f5;   /* table header, inputs-in-panels, segmented track */
  --inverse:       #0e1726;   /* tooltip, toast */
  --on-inverse:    #f5f7fa;
  --on-inverse-2:  #9aa5b6;

  /* ---- State overlays (work on any surface) ------------------------------ */
  --fill-hover:    rgba(14, 23, 38, 0.04);
  --fill-press:    rgba(14, 23, 38, 0.07);
  --scrim:         rgba(14, 23, 38, 0.32);

  /* ---- Borders ----------------------------------------------------------- */
  --border:        #e3e7ed;   /* default hairline: cards, rows, dividers */
  --border-strong: #cbd2dc;   /* input outlines, secondary buttons */

  /* ---- Text -------------------------------------------------------------- */
  --text:          #0e1726;   /* 17.4:1 on surface */
  --text-2:        #465467;   /*  7.6:1 */
  --muted:         #626e81;   /*  4.8:1 on bg — smallest readable ink */
  --faint:         #a3acba;   /*  disabled, placeholder decoration only */

  /* ---- Accent: interaction + data selection ONLY ------------------------- */
  --accent:        #1f48c9;   /* 7.2:1 */
  --accent-hover:  #193ba6;
  --accent-press:  #15318a;
  --accent-subtle: #eaf0fe;   /* selected rows, selected chips */
  --accent-line:   #bccbf6;   /* border of accent-subtle things */
  --on-accent:     #ffffff;
  --focus:         #1f48c9;

  /* ---- Semantic: money + status ----------------------------------------- */
  --gain:          #117a43;   /* 5.4:1 — also "success" */
  --gain-subtle:   #e7f5ed;
  --loss:          #c23a30;   /* 5.3:1 — also "danger" */
  --loss-subtle:   #fbecea;
  --warn:          #a15c07;
  --warn-subtle:   #fcf2e3;
  --info:          var(--accent);
  --info-subtle:   var(--accent-subtle);
  --success:       var(--gain);
  --success-subtle:var(--gain-subtle);
  --danger:        var(--loss);
  --danger-subtle: var(--loss-subtle);

  /* ---- Data: sleeves (validated CVD-safe, never green/red) --------------- */
  --lv:            #2f7fb8;   /* Lower Volatility */
  --pg:            #d99a1e;   /* Prudent Growth (sub-3:1 → always direct-labelled) */
  --ag:            #d1497a;   /* Aggressive */
  --cash:          #a3a8b0;   /* Cash / equivalents */
  --benchmark:     #8a94a6;   /* comparison lines, always dashed */
  --grid:          #e9ecf1;   /* chart gridlines */

  /* ---- Elevation --------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-2: 0 4px 12px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.05);
  --shadow-3: 0 20px 48px -12px rgba(16, 24, 40, 0.24), 0 4px 8px -4px rgba(16, 24, 40, 0.06);

  /* ---- Type -------------------------------------------------------------- */
  --font: var(--font-geist), "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: var(--font-geist-mono), "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --serif: var(--font-newsreader), "Newsreader", "Iowan Old Style", Georgia, serif;   /* editorial contexts only: briefs, research articles */

  /* ---- Spacing scale (the only spacing values allowed) ------------------- */
  --s4: 4px;  --s8: 8px;  --s12: 12px; --s16: 16px; --s20: 20px;
  --s24: 24px; --s32: 32px; --s40: 40px; --s48: 48px; --s64: 64px;

  /* ---- Radius ------------------------------------------------------------ */
  --r-xs:   4px;    /* badges, checkboxes, inner segmented thumb */
  --r-sm:   6px;    /* controls: button, input, select, chip, menu item */
  --r-md:   10px;   /* cards, panels, menus, toasts */
  --r-lg:   14px;   /* modals, drawers, command palette */
  --r-full: 999px;  /* avatars, status dots, switch */

  /* ---- Controls ---------------------------------------------------------- */
  --ctl-sm: 28px;
  --ctl-md: 32px;
  --ctl-lg: 40px;

  /* ---- Motion ------------------------------------------------------------ */
  --dur-1: 120ms;  /* hover, color */
  --dur-2: 180ms;  /* menus, tooltips, switch */
  --dur-3: 240ms;  /* modals, drawers, toasts */
  --ease-out:    cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.18, 0.64, 1); /* ~4% overshoot, never bouncy */

  /* ---- Layout ------------------------------------------------------------ */
  --page-max:   1280px;
  --read-max:   68ch;
  --sidebar:    240px;
  --sidebar-sm: 64px;
  --gutter:     24px;
  --card-gap:   16px;

  /* ---- Density: balanced (default) --------------------------------------- */
  --row-h:       40px;
  --cell-x:      16px;
  --pad:         16px;   /* card / panel inner padding */
  --stack:       12px;   /* gap between items inside a card */
  --section:     32px;   /* gap between page sections */
  --body-size:   14px;
  --body-lh:     20px;

  color-scheme: light;
}

/* ---- Dark: its own selected steps, not an inversion ---------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#0a0e15; --surface:#111722; --raised:#161e2b; --sunken:#0d121b;
    --inverse:#263041; --on-inverse:#eef2f7; --on-inverse-2:#9aa5b6;
    --fill-hover:rgba(231,236,243,.045); --fill-press:rgba(231,236,243,.08); --scrim:rgba(0,0,0,.56);
    --border:#1f2836; --border-strong:#2e394b;
    --text:#e7ecf3; --text-2:#a5afbf; --muted:#7d889a; --faint:#4a5566;
    --accent:#6f93f5; --accent-hover:#8ba8f8; --accent-press:#a3baf9; --accent-subtle:rgba(111,147,245,.13); --accent-line:rgba(111,147,245,.38); --on-accent:#0a0e15; --focus:#8ba8f8;
    --gain:#3dbe7a; --gain-subtle:rgba(61,190,122,.12); --loss:#f2685e; --loss-subtle:rgba(242,104,94,.12); --warn:#e0a33a; --warn-subtle:rgba(224,163,58,.12);
    --lv:#4a95d0; --pg:#c0850f; --ag:#e0628f; --cash:#5d636d; --benchmark:#6b778a; --grid:#1a2230;
    --shadow-1:0 1px 2px rgba(0,0,0,.3);
    --shadow-2:0 8px 20px -4px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03);
    --shadow-3:0 24px 56px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0a0e15; --surface:#111722; --raised:#161e2b; --sunken:#0d121b;
  --inverse:#263041; --on-inverse:#eef2f7; --on-inverse-2:#9aa5b6;
  --fill-hover:rgba(231,236,243,.045); --fill-press:rgba(231,236,243,.08); --scrim:rgba(0,0,0,.56);
  --border:#1f2836; --border-strong:#2e394b;
  --text:#e7ecf3; --text-2:#a5afbf; --muted:#7d889a; --faint:#4a5566;
  --accent:#6f93f5; --accent-hover:#8ba8f8; --accent-press:#a3baf9; --accent-subtle:rgba(111,147,245,.13); --accent-line:rgba(111,147,245,.38); --on-accent:#0a0e15; --focus:#8ba8f8;
  --gain:#3dbe7a; --gain-subtle:rgba(61,190,122,.12); --loss:#f2685e; --loss-subtle:rgba(242,104,94,.12); --warn:#e0a33a; --warn-subtle:rgba(224,163,58,.12);
  --lv:#4a95d0; --pg:#c0850f; --ag:#e0628f; --cash:#5d636d; --benchmark:#6b778a; --grid:#1a2230;
  --shadow-1:0 1px 2px rgba(0,0,0,.3);
  --shadow-2:0 8px 20px -4px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03);
  --shadow-3:0 24px 56px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
}

/* ---- Density contexts: set on any container ------------------------------ */
[data-density="balanced"] {
  --row-h: 40px; --cell-x: 16px; --pad: 16px; --stack: 12px; --section: 32px;
  --body-size: 14px; --body-lh: 20px;
}
[data-density="compact"] {
  --row-h: 32px; --cell-x: 12px; --pad: 12px; --stack: 8px; --section: 24px;
  --body-size: 13px; --body-lh: 18px;
}
[data-density="airy"] {
  --row-h: 48px; --cell-x: 20px; --pad: 24px; --stack: 16px; --section: 48px;
  --body-size: 16px; --body-lh: 26px;
}
@media (max-width: 767px) {
  :root { --gutter: 16px; --section: 24px; }
}

/* Density containers re-apply their body size */
[data-density] { font-size: var(--body-size); line-height: var(--body-lh); }

/* ==========================================================================
   Base + type roles
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" on;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* size / line-height / weight / tracking — use these, never ad-hoc sizes */
.t-display  { font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.022em; text-wrap: balance; }
.t-h1       { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.018em; text-wrap: balance; }
.t-h2       { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.012em; text-wrap: balance; }
.t-h3       { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.006em; }
.t-body     { font-size: 14px; line-height: 20px; }
.t-body-sm  { font-size: 13px; line-height: 18px; }
.t-read     { font-size: 16px; line-height: 26px; max-width: var(--read-max); }   /* editorial */
.t-label    { font-size: 12px; line-height: 16px; font-weight: 500; }
.t-caption  { font-size: 12px; line-height: 16px; color: var(--muted); }
.t-overline { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.t-kpi      { font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.022em; }
.t-hero     { font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -0.028em; }
.t-code     { font-family: var(--mono); font-size: 12px; line-height: 16px; }
.num        { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* Editorial roles: only inside reading surfaces (Daily Brief, research articles) */
.t-headline { font-family: var(--serif); font-size: 36px; line-height: 42px; font-weight: 500; letter-spacing: -0.012em; font-optical-sizing: auto; text-wrap: balance; }
.t-story    { font-family: var(--serif); font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.005em; text-wrap: balance; }
.t-prose    { font-family: var(--serif); font-size: 17px; line-height: 28px; font-weight: 400; max-width: var(--read-max); }
.t-prose-sm { font-family: var(--serif); font-size: 15px; line-height: 24px; font-weight: 400; }
.t-dateline { font-family: var(--mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 639px) { .t-headline { font-size: 28px; line-height: 34px; } .t-prose { font-size: 16px; line-height: 26px; } }

.c-2 { color: var(--text-2); }
.c-muted { color: var(--muted); }
.c-gain { color: var(--gain); }
.c-loss { color: var(--loss); }

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

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

/*!*******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./styles/components.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************/
/* Copied from ../components.css on Oct 19, 2026. From here on, this copy is the source of truth. */
/* ==========================================================================
   Investor design system — components
   Every rule reads tokens.css. Shared grammar:
   · Controls   → height --ctl-*, radius --r-sm, 13px/500 label, --focus ring
   · Surfaces   → --surface + 1px --border + --r-md; overlays add --shadow-2/3
   · Location   → neutral (text + --fill-press): sidebar, tabs, segmented
   · Selection  → accent (--accent / --accent-subtle): rows, chips, checks
   ========================================================================== */

/* ---------- Icon --------------------------------------------------------- */
.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 20px; height: 20px; }

/* ---------- Layout helpers ----------------------------------------------- */
.row { display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap; }
.row-nowrap { flex-wrap: nowrap; }
.stack { display: flex; flex-direction: column; gap: var(--stack); }
.spacer { flex: 1 1; }
.divider { height: 1px; background: var(--border); border: 0; margin: 0; }
.divider-v { width: 1px; align-self: stretch; background: var(--border); }

/* ---------- Kbd ---------------------------------------------------------- */
.kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 var(--s4); font-family: var(--mono); font-size: 11px; line-height: 16px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--r-xs); }

/* ==========================================================================
   Button
   ========================================================================== */
.btn {
  --h: var(--ctl-md);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h); padding: 0 var(--s12); border-radius: var(--r-sm); border: 1px solid transparent;
  font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; cursor: pointer; -webkit-user-select: none; user-select: none;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.btn:active:not(:disabled) { transform: translateY(0.5px); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.45; }
.btn-sm { --h: var(--ctl-sm); padding: 0 var(--s8); font-size: 12px; }
.btn-lg { --h: var(--ctl-lg); padding: 0 var(--s16); font-size: 14px; }
.btn-icon { width: var(--h); padding: 0; }

.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.08); }
.btn-primary:hover:not(:disabled), .btn-primary.is-hover { background: var(--accent-hover); }
.btn-primary:active:not(:disabled), .btn-primary.is-press { background: var(--accent-press); }

.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.btn-secondary:hover:not(:disabled), .btn-secondary.is-hover { background: color-mix(in srgb, var(--surface), var(--text) 3%); border-color: color-mix(in srgb, var(--border-strong), var(--text) 12%); }
.btn-secondary:active:not(:disabled), .btn-secondary.is-press { background: color-mix(in srgb, var(--surface), var(--text) 6%); }

.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover:not(:disabled), .btn-ghost.is-hover { background: var(--fill-hover); color: var(--text); }
.btn-ghost:active:not(:disabled), .btn-ghost.is-press, .btn-ghost[aria-expanded="true"] { background: var(--fill-press); color: var(--text); }

.btn-danger { background: var(--loss); color: #fff; }
.btn-danger:hover:not(:disabled), .btn-danger.is-hover { background: color-mix(in srgb, var(--loss), #000 12%); }

/* async: idle → loading → success (from motion-states, restrained) */
.btn .btn-label { display: inline-flex; align-items: center; gap: 6px; transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.btn .btn-status { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.8); transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-spring); pointer-events: none; }
.btn[data-state="loading"] .btn-label, .btn[data-state="success"] .btn-label { opacity: 0; transform: scale(.96); }
.btn[data-state="loading"] .btn-status.is-spin, .btn[data-state="success"] .btn-status.is-done { opacity: 1; transform: none; }
.btn[data-state="loading"] { cursor: progress; }
.btn-primary[data-state="success"] { background: var(--success); }
.btn[data-state="success"] .btn-status.is-done path { stroke-dashoffset: 0; }
.btn .btn-status.is-done path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 320ms var(--ease-out) 60ms; }
.spinner { width: 16px; height: 16px; animation: spin 800ms linear infinite; }
.spinner circle { opacity: .25; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Field, Input, Select, Textarea
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-2); display: flex; gap: var(--s4); }
.field-label .opt { color: var(--muted); font-weight: 400; }
.field-hint { font-size: 12px; line-height: 16px; color: var(--muted); display: flex; align-items: center; gap: var(--s4); }
.field-error { color: var(--danger); }

.input {
  --h: var(--ctl-md);
  display: flex; align-items: center; gap: var(--s8); height: var(--h); padding: 0 10px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); color: var(--muted);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-1);
}
.input:hover, .input.is-hover { border-color: color-mix(in srgb, var(--border-strong), var(--text) 18%); }
.input:focus-within, .input.is-focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.input input, .input select { all: unset; flex: 1 1; min-width: 0; height: 100%; font-size: 13px; line-height: 18px; color: var(--text); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.input input::placeholder { color: var(--muted); }
.input .affix { font-size: 13px; color: var(--muted); }
.input-sm { --h: var(--ctl-sm); }
.input-lg { --h: var(--ctl-lg); }
.input.is-invalid, .input:has(input[aria-invalid="true"]) { border-color: var(--danger); }
.input.is-invalid:focus-within, .input:has(input[aria-invalid="true"]):focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.input.is-disabled, .input:has(input:disabled) { background: var(--sunken); border-color: var(--border); cursor: not-allowed; }
.input:has(input:disabled) input { color: var(--muted); cursor: not-allowed; }
.input.is-valid { border-color: color-mix(in srgb, var(--success) 60%, var(--border-strong)); }
.input .clear { display: none; }
.input:has(input:not(:placeholder-shown)) .clear { display: inline-flex; }

.select { position: relative; }
.select select { cursor: pointer; padding-right: 20px; }
.select .chev { position: absolute; right: 10px; pointer-events: none; color: var(--muted); }
.select select option { background: var(--raised); color: var(--text); }

.textarea { height: auto; padding: var(--s8) 10px; align-items: flex-start; }
.textarea textarea { all: unset; flex: 1 1; min-height: 72px; font-size: 13px; line-height: 20px; color: var(--text); white-space: pre-wrap; }

/* ==========================================================================
   Checkbox, Radio, Switch — the "selection" family (accent)
   ========================================================================== */
.check, .radio { display: inline-flex; align-items: flex-start; gap: var(--s8); cursor: pointer; font-size: 13px; line-height: 18px; color: var(--text); }
.check input, .radio input, .choice input[type="radio"] {
  appearance: none; margin: 1px 0 0; flex: none; width: 16px; height: 16px; border: 1px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.check input { border-radius: var(--r-xs); }
.radio input, .choice input[type="radio"] { border-radius: var(--r-full); }
.check input:hover, .radio input:hover, .choice input[type="radio"]:hover { border-color: var(--accent); }
.check input::after { content: ""; width: 10px; height: 10px; background: var(--on-accent); clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%); transform: scale(0); transition: transform var(--dur-2) var(--ease-spring); }
.check input:checked, .check input:indeterminate, .radio input:checked, .choice input[type="radio"]:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { transform: scale(1); }
.check input:indeterminate::after { clip-path: inset(40% 10% 40% 10%); transform: scale(1); }
.radio input::after, .choice input[type="radio"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--on-accent); transform: scale(0); transition: transform var(--dur-2) var(--ease-spring); }
.radio input:checked::after, .choice input[type="radio"]:checked::after { transform: scale(1); }
.check input:disabled, .radio input:disabled, .choice input[type="radio"]:disabled { background: var(--sunken); border-color: var(--border); cursor: not-allowed; }
.check:has(input:disabled), .radio:has(input:disabled) { color: var(--muted); cursor: not-allowed; }
.check .sub, .radio .sub { display: block; font-size: 12px; line-height: 16px; color: var(--muted); }

.switch {
  position: relative; width: 32px; height: 18px; flex: none; border: 0; padding: 0; border-radius: var(--r-full); cursor: pointer;
  background: var(--border-strong); transition: background-color var(--dur-2) var(--ease-out);
}
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.24); transition: transform var(--dur-2) var(--ease-spring), width var(--dur-1) var(--ease-out); }
.switch:active:not(:disabled)::after { width: 17px; }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(14px); }
.switch[aria-checked="true"]:active:not(:disabled)::after { transform: translateX(11px); }
.switch:disabled { opacity: .45; cursor: not-allowed; }

.btn.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Choice card: a radio with room for a description (risk profile, plans) */
.choice { display: grid; grid-template-columns: 16px 1fr; gap: var(--s12); align-items: start; padding: var(--s12) var(--s16); border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); cursor: pointer; transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.choice:hover { border-color: color-mix(in srgb, var(--border-strong), var(--text) 18%); }
.choice input { margin-top: 2px; }
.choice strong { display: block; font-size: 13px; line-height: 18px; font-weight: 600; }
.choice span { display: block; font-size: 12px; line-height: 16px; color: var(--text-2); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-subtle); box-shadow: inset 0 0 0 1px var(--accent); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.choice input:focus-visible { outline: none; }

/* ==========================================================================
   Slider (risk tolerance)
   ========================================================================== */
.slider { --v: 50%; width: 100%; appearance: none; height: 20px; background: transparent; cursor: pointer; margin: 0; }
.slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--accent) var(--v), var(--border-strong) var(--v)); }
.slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--border-strong); }
.slider::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
.slider::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(16,24,40,.12), 0 1px 3px rgba(16,24,40,.24); -webkit-transition: transform var(--dur-1) var(--ease-spring); transition: transform var(--dur-1) var(--ease-spring); }
.slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(16,24,40,.12), 0 1px 3px rgba(16,24,40,.24); }
.slider:active::-webkit-slider-thumb { transform: scale(1.15); }
.slider:focus-visible { outline: none; }
.slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus); }
.slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus); }
.slider-scale { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--muted); }

/* ==========================================================================
   Segmented control + Tabs — the "location" family (neutral)
   Indicator is positioned by ds.js with a spring; CSS state is the fallback.
   ========================================================================== */
.seg { position: relative; display: inline-flex; padding: 2px; gap: 2px; background: var(--sunken); border: 1px solid var(--border); border-radius: var(--r-sm); isolation: isolate; }
.seg button { position: relative; z-index: 1; height: calc(var(--ctl-md) - 6px); padding: 0 10px; border: 0; background: transparent; border-radius: var(--r-xs); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: color var(--dur-1) var(--ease-out); }
.seg button:hover { color: var(--text); }
.seg button[aria-checked="true"] { color: var(--text); }
.seg:not(.is-live) button[aria-checked="true"] { background: var(--surface); box-shadow: 0 0 0 1px var(--border), var(--shadow-1); }
.seg button:disabled { color: var(--faint); cursor: not-allowed; }
.seg .seg-thumb { position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 0; width: 0; border-radius: var(--r-xs); background: var(--surface); box-shadow: 0 0 0 1px var(--border), var(--shadow-1); pointer-events: none; }
.seg-sm button { height: calc(var(--ctl-sm) - 6px); padding: 0 8px; }
.seg-icon button { padding: 0 6px; }

.tabs { position: relative; display: flex; gap: var(--s20); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs [role="tab"] { position: relative; height: 40px; padding: 0; border: 0; background: none; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--muted); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: color var(--dur-1) var(--ease-out); }
.tabs [role="tab"]:hover { color: var(--text); }
.tabs [role="tab"][aria-selected="true"] { color: var(--text); }
.tabs:not(.is-live) [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--text); border-radius: 1px; }
.tabs [role="tab"]:focus-visible { outline-offset: -2px; border-radius: var(--r-xs); }
.tabs .tab-bar { position: absolute; bottom: 0; left: 0; height: 2px; width: 0; background: var(--text); border-radius: 1px; pointer-events: none; }
.tabs .count { font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: var(--r-xs); background: var(--sunken); color: var(--muted); }

/* ==========================================================================
   Chip (filters) — selection family, square-ish, never pills
   ========================================================================== */
.chip { display: inline-flex; align-items: center; gap: 6px; height: var(--ctl-sm); padding: 0 10px; border-radius: var(--r-sm); border: 1px dashed var(--border-strong); background: transparent; color: var(--text-2); font-size: 12px; line-height: 16px; font-weight: 500; cursor: pointer; transition: background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1); }
.chip:hover { background: var(--fill-hover); color: var(--text); }
.chip[aria-pressed="true"], .chip.is-applied { border-style: solid; border-color: var(--accent-line); background: var(--accent-subtle); color: var(--text); }
.chip .x { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: -4px; border-radius: var(--r-xs); color: var(--muted); }
.chip .x:hover { background: var(--fill-press); color: var(--text); }
.chip .val { color: var(--accent); }

/* ==========================================================================
   Badge, Delta, Status dot, Avatar
   ========================================================================== */
.badge { display: inline-flex; align-items: center; gap: var(--s4); height: 20px; padding: 0 6px; border-radius: var(--r-xs); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; color: var(--text-2); background: var(--sunken); box-shadow: inset 0 0 0 1px var(--border); }
.badge .icon { width: 12px; height: 12px; }
.badge-sleeve { --c: var(--cash); color: var(--text); background: color-mix(in srgb, var(--c) 11%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent); }
.badge-sleeve .icon { color: var(--c); }
.badge-sleeve.lv { --c: var(--lv); } .badge-sleeve.pg { --c: var(--pg); } .badge-sleeve.ag { --c: var(--ag); } .badge-sleeve.cash { --c: var(--cash); }
.badge-success { color: var(--success); background: var(--success-subtle); box-shadow: none; }
.badge-warn    { color: var(--warn);    background: var(--warn-subtle);    box-shadow: none; }
.badge-danger  { color: var(--danger);  background: var(--danger-subtle);  box-shadow: none; }
.badge-info    { color: var(--accent);  background: var(--accent-subtle);  box-shadow: none; }

.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 500; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta .icon { width: 12px; height: 12px; stroke-width: 2; }
.delta.up { color: var(--gain); }
.delta.down { color: var(--loss); }
.delta.flat { color: var(--muted); }
.delta-pill { padding: 0 6px; height: 20px; border-radius: var(--r-xs); font-size: 12px; }
.delta-pill.up { background: var(--gain-subtle); }
.delta-pill.down { background: var(--loss-subtle); }

.dot { width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--c, var(--cash)); }
.dot.lv { --c: var(--lv); } .dot.pg { --c: var(--pg); } .dot.ag { --c: var(--ag); } .dot.cash { --c: var(--cash); }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--text-2); }
.status::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--c, var(--muted)); }
.status.live { --c: var(--gain); } .status.warn { --c: var(--warn); } .status.off { --c: var(--faint); }
.status.live::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gain) 20%, transparent); }

.avatar { width: 28px; height: 28px; border-radius: var(--r-full); display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; background: var(--sunken); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border); flex: none; }
.ticker-mark { width: 28px; height: 28px; border-radius: var(--r-sm); display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; letter-spacing: -.01em; background: var(--sunken); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border); flex: none; }

/* ==========================================================================
   Surfaces: Card, Panel, Section header
   ========================================================================== */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-1); min-width: 0; }
.card-body { padding: var(--pad); display: flex; flex-direction: column; gap: var(--stack); }
.card-head { display: flex; align-items: center; gap: var(--s8); min-height: 48px; padding: var(--s8) var(--pad); border-bottom: 1px solid var(--border); }
.card-head h3 { font-size: 14px; line-height: 20px; font-weight: 600; }
.card-foot { display: flex; align-items: center; gap: var(--s8); padding: var(--s12) var(--pad); border-top: 1px solid var(--border); }
.card.is-interactive { cursor: pointer; transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.card.is-interactive:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.panel { background: var(--sunken); border-radius: var(--r-md); padding: var(--pad); }

.section-head { display: flex; align-items: flex-end; gap: var(--s12); flex-wrap: wrap; }
.section-head .titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.section-head p { color: var(--text-2); font-size: 13px; line-height: 18px; }

/* KPI strip: divided columns rather than a row of cards */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--s20); min-width: 0; }
.kpi:first-child { padding-left: 0; }
.kpi + .kpi { border-left: 1px solid var(--border); }
.kpi .t-kpi { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 639px) {
  .kpis { grid-template-columns: 1fr 1fr; row-gap: var(--s16); }
  .kpi:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* Sleeve card (from the reference: sleeve + description + YTD) */
.sleeve-card { --c: var(--cash); display: flex; flex-direction: column; gap: var(--s12); padding: var(--pad); position: relative; }
.sleeve-card .sleeve-top { display: flex; gap: var(--s12); align-items: flex-start; }
.sleeve-card .sleeve-ico { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--surface)); flex: none; }
.sleeve-card.lv { --c: var(--lv); } .sleeve-card.pg { --c: var(--pg); } .sleeve-card.ag { --c: var(--ag); }
.sleeve-card .sleeve-meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s8); }

/* ==========================================================================
   Charts
   ========================================================================== */
.chart { position: relative; display: flex; flex-direction: column; gap: var(--s12); }
.chart-head { display: flex; align-items: flex-start; gap: var(--s12); flex-wrap: wrap; }
.chart-value { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chart-value .when { color: var(--muted); }
.chart-plot { position: relative; height: 220px; touch-action: pan-y; cursor: crosshair; border-radius: var(--r-xs); }
.chart-plot:focus-visible { outline-offset: 4px; }
.chart-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; }
.chart .baseline { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; transition: stroke var(--dur-3) var(--ease-out); }
.chart .bench { fill: none; stroke: var(--benchmark); stroke-width: 1.5; stroke-dasharray: 4 3; }
.chart .hair { stroke: var(--text); stroke-opacity: .16; }
.chart .pt { stroke: var(--surface); stroke-width: 2; }
.chart .axis { font-size: 11px; fill: var(--muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.chart-plot .chart-tip { position: absolute; top: 0; left: 0; pointer-events: none; }
[data-hl-group] [data-k] { transition: opacity var(--dur-1) var(--ease-out); }
[data-hl-group][data-hot] [data-k]:not(.is-hot) { opacity: .35; }
.chart-foot { display: flex; gap: var(--s16); align-items: center; flex-wrap: wrap; font-size: 12px; line-height: 16px; color: var(--muted); }
.legend-key { display: inline-flex; align-items: center; gap: 6px; }
.legend-key .swatch-line { width: 14px; height: 2px; border-radius: 1px; background: var(--c); }
.legend-key .swatch-line.dashed { background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px); }

/* Allocation bar + legend */
.alloc-bar { display: flex; gap: 2px; height: 8px; }
.alloc-bar > span { background: var(--c); border-radius: 2px; transition: opacity var(--dur-1); }
.alloc-bar > span:first-child { border-radius: 4px 2px 2px 4px; }
.alloc-bar > span:last-child { border-radius: 2px 4px 4px 2px; }
.alloc-legend { display: grid; gap: var(--s8); }
.alloc-legend .item { display: grid; grid-template-columns: 8px 1fr auto auto; gap: var(--s8); align-items: center; font-size: 13px; line-height: 18px; border-radius: var(--r-xs); }
.alloc-legend .item .name { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alloc-legend .item .pct { font-weight: 500; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.alloc-legend .item .amt { color: var(--muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; min-width: 84px; text-align: right; }

/* Donut */
.donut { position: relative; width: 168px; aspect-ratio: 1; max-width: 100%; flex: none; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.donut circle.seg-arc { fill: none; stroke-width: 18; transition: stroke-width var(--dur-2) var(--ease-out), opacity var(--dur-1); cursor: pointer; }
.donut circle.seg-arc.is-hot { stroke-width: 22; }
.donut .donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }

/* Risk scale — replaces the green→red bars: position, not "danger" */
.risk-scale { display: grid; grid-template-columns: minmax(96px, 140px) 1fr auto auto; column-gap: var(--s20); row-gap: 0; align-items: center; }
.risk-scale .rs-row { display: contents; }
.risk-scale .rs-row > * { padding: var(--s12) 0; border-bottom: 1px solid var(--border); }
.risk-scale .rs-row:last-child > * { border-bottom: 0; }
.risk-scale .rs-name { font-size: 13px; line-height: 18px; color: var(--text-2); }
.risk-scale .rs-row.is-you .rs-name { color: var(--text); font-weight: 600; }
.risk-scale .rs-track { position: relative; height: 40px; display: flex; align-items: center; }
.risk-scale .rs-rail { position: relative; flex: 1 1; height: 6px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
/* each segment fills to --f (0–100%) so the fill ends exactly at the marker */
.risk-scale .rs-rail i { --fill: color-mix(in srgb, var(--text) 18%, var(--surface)); background: linear-gradient(to right, var(--fill) var(--f, 0%), var(--sunken) var(--f, 0%)); box-shadow: inset 0 0 0 1px var(--border); border-radius: 2px; }
.risk-scale .rs-rail i.on { --f: 100%; box-shadow: none; }
.risk-scale .rs-row.is-you .rs-rail i { --fill: var(--accent); }
.risk-scale .rs-mark { position: absolute; top: 50%; width: 2px; height: 16px; background: var(--text); transform: translate(-50%, -50%); border-radius: 1px; box-shadow: 0 0 0 2px var(--surface); }
.risk-scale .rs-row.is-you .rs-mark { background: var(--accent); height: 20px; width: 3px; }
.risk-scale .rs-num { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-size: 13px; line-height: 18px; white-space: nowrap; }
.risk-scale .rs-num small { display: block; font-size: 11px; line-height: 16px; color: var(--muted); }
.risk-scale .rs-axis { grid-column: 2; display: flex; justify-content: space-between; font-size: 11px; line-height: 16px; color: var(--muted); padding-top: var(--s8); }
@media (max-width: 639px) {
  .risk-scale { grid-template-columns: 1fr auto auto; column-gap: var(--s12); }
  .risk-scale .rs-name { grid-column: 1 / -1; padding-bottom: 0 !important; border-bottom: 0 !important; }
  .risk-scale .rs-axis { grid-column: 1; }
}

/* Sparkline (inline, in rows) */
.spark { width: 72px; height: 24px; display: block; overflow: visible; }
.spark path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.spark.up path { stroke: var(--gain); } .spark.down path { stroke: var(--loss); }

/* ==========================================================================
   Table
   ========================================================================== */
.table-wrap { position: relative; overflow-x: auto; overscroll-behavior-x: contain; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--body-size); line-height: var(--body-lh); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.table th, .table td { height: var(--row-h); padding: 0 var(--cell-x); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); }
.table th { position: sticky; top: 0; z-index: 1; height: 32px; background: var(--sunken); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--muted); }
.table th.num, .table td.num { text-align: right; }
.table th:first-child, .table td:first-child { padding-left: var(--pad); }
.table th:last-child, .table td:last-child { padding-right: var(--pad); }
.table tbody tr { transition: background-color var(--dur-1) var(--ease-out); }
.table tbody tr:hover { background: var(--fill-hover); }
.table tbody tr[aria-selected="true"] { background: var(--accent-subtle); }
.table tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr.is-clickable { cursor: pointer; }
.table .sort { all: unset; display: inline-flex; align-items: center; gap: var(--s4); cursor: pointer; border-radius: var(--r-xs); }
.table .sort:hover { color: var(--text); }
.table .sort:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.table .sort .icon { width: 12px; height: 12px; opacity: 0; transition: opacity var(--dur-1), transform var(--dur-2) var(--ease-out); }
.table th:hover .sort .icon { opacity: .5; }
.table th[aria-sort] .sort { color: var(--text); }
.table th[aria-sort] .sort .icon { opacity: 1; }
.table th[aria-sort="descending"] .sort .icon { transform: rotate(180deg); }
.table th.num .sort { flex-direction: row-reverse; }
.table .col-check { width: 1%; padding-right: 0; }
.table .cell-name { display: flex; align-items: center; gap: var(--s12); min-width: 0; }
.table .cell-name .n { display: flex; flex-direction: column; min-width: 0; }
.table .cell-name .sym { font-weight: 600; }
.table .cell-name .full { color: var(--muted); font-size: 12px; line-height: 16px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.table .trunc { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.table .group-row td { height: 36px; background: var(--surface); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text); }
.table .group-row td .group-sum { font-weight: 400; color: var(--muted); }
.table .row-actions { opacity: 0; transition: opacity var(--dur-1); }
.table tr:hover .row-actions, .table tr:focus-within .row-actions { opacity: 1; }
[data-density="compact"] .table .cell-name .full, [data-density="compact"] .table .col-detail { display: none; }
[data-density="compact"] .table .ticker-mark { width: 20px; height: 20px; font-size: 9px; border-radius: var(--r-xs); }
.table-foot { display: flex; align-items: center; gap: var(--s12); padding: var(--s8) var(--pad); border-top: 1px solid var(--border); font-size: 12px; line-height: 16px; color: var(--muted); flex-wrap: wrap; }

/* Selection bar (appears when rows are selected) */
.selection-bar { display: flex; align-items: center; gap: var(--s12); padding: 0 var(--s8) 0 var(--pad); height: 44px; background: var(--inverse); color: var(--on-inverse); border-radius: var(--r-md); box-shadow: var(--shadow-3); font-size: 13px; }
.selection-bar .btn-ghost { color: var(--on-inverse-2); }
.selection-bar .btn-ghost:hover { color: var(--on-inverse); background: rgba(255,255,255,.08); }

/* Pagination */
.pager { display: flex; align-items: center; gap: var(--s4); }
.pager .btn { min-width: var(--ctl-sm); }
.pager .btn[aria-current="page"] { background: var(--fill-press); color: var(--text); }

/* ==========================================================================
   Feedback: Alert, Toast, Skeleton, Empty / Error
   ========================================================================== */
.alert { --c: var(--info); --bgc: var(--info-subtle); display: grid; grid-template-columns: 16px 1fr auto; gap: var(--s12); align-items: start; padding: var(--s12) var(--s16); border-radius: var(--r-md); background: var(--bgc); border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); font-size: 13px; line-height: 18px; }
.alert > .icon { color: var(--c); margin-top: 1px; }
.alert strong { display: block; font-weight: 600; color: var(--text); }
.alert p { color: var(--text-2); }
.alert.success { --c: var(--success); --bgc: var(--success-subtle); }
.alert.warn    { --c: var(--warn);    --bgc: var(--warn-subtle); }
.alert.danger  { --c: var(--danger);  --bgc: var(--danger-subtle); }

.toast-region { position: fixed; z-index: 60; right: var(--s16); bottom: calc(var(--s16) + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column-reverse; gap: var(--s8); width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: var(--s12); min-height: 48px; padding: var(--s8) var(--s8) var(--s8) var(--s12); background: var(--inverse); color: var(--on-inverse); border-radius: var(--r-md); box-shadow: var(--shadow-3); font-size: 13px; line-height: 18px; transform-origin: bottom right; animation: toast-in var(--dur-3) var(--ease-spring) both; }
.toast.is-leaving { animation: toast-out var(--dur-2) var(--ease-out) both; }
.toast .t-icon { width: 20px; height: 20px; border-radius: var(--r-full); display: grid; place-items: center; flex: none; background: var(--c, var(--success)); color: #fff; }
.toast .t-icon .icon { width: 12px; height: 12px; stroke-width: 2.5; }
.toast.danger { --c: var(--danger); } .toast.info { --c: var(--accent); }
.toast .t-body { flex: 1 1; min-width: 0; }
.toast .t-body span { display: block; color: var(--on-inverse-2); font-size: 12px; line-height: 16px; }
.toast .btn-ghost { color: var(--on-inverse-2); }
.toast .btn-ghost:hover { color: var(--on-inverse); background: rgba(255,255,255,.08); }
.toast .btn-ghost.act { color: var(--on-inverse); font-weight: 600; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }

.skel { display: block; border-radius: var(--r-xs); background: linear-gradient(90deg, var(--sunken) 0%, color-mix(in srgb, var(--sunken), var(--text) 5%) 40%, var(--sunken) 80%); background-size: 300% 100%; animation: shimmer 1.4s var(--ease-in-out) infinite; }
.skel.line { height: 10px; }
.skel.kpi { height: 28px; width: 140px; }
.skel.circle { border-radius: var(--r-full); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }

.state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s12); padding: var(--s48) var(--s24); }
.state .state-ico { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--border); color: var(--muted); }
.state.error .state-ico { color: var(--danger); background: var(--danger-subtle); box-shadow: none; }
.state h4 { font-size: 14px; line-height: 20px; font-weight: 600; }
.state p { max-width: 36ch; color: var(--text-2); font-size: 13px; line-height: 18px; }
.state .t-code { color: var(--muted); }

/* ==========================================================================
   Overlays: Tooltip, Menu, Popover, Modal, Drawer, Command palette
   ========================================================================== */
.tooltip { position: fixed; z-index: 70; top: 0; left: 0; display: flex; align-items: center; gap: var(--s8); padding: 4px 8px; border-radius: var(--r-sm); background: var(--inverse); color: var(--on-inverse); font-size: 12px; line-height: 16px; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-2); opacity: 0; transform: translateY(2px); transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.tooltip.is-on { opacity: 1; transform: none; }
.tooltip .kbd { background: transparent; border-color: rgba(255,255,255,.18); color: var(--on-inverse-2); height: 18px; }
.tooltip .sub { color: var(--on-inverse-2); }

.menu-anchor { position: relative; display: inline-flex; }
.menu { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; min-width: 220px; max-width: 320px; padding: var(--s4); background: var(--raised); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2); display: flex; flex-direction: column; opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top left; visibility: hidden; transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2); }
.menu.align-end { left: auto; right: 0; transform-origin: top right; }
.menu.is-open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.menu-label { padding: 6px var(--s8) var(--s4); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.menu-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--s8); height: var(--ctl-md); padding: 0 var(--s8); border-radius: var(--r-sm); font-size: 13px; line-height: 18px; color: var(--text); cursor: pointer; }
.menu-item .icon { color: var(--muted); }
.menu-item .kbd, .menu-item .meta { margin-left: auto; }
.menu-item .meta { font-size: 12px; color: var(--muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.menu-item:hover, .menu-item:focus-visible, .menu-item.is-active { background: var(--fill-press); outline: none; }
.menu-item[aria-disabled="true"] { color: var(--faint); cursor: not-allowed; background: none; }
.menu-item.danger, .menu-item.danger .icon { color: var(--danger); }
.menu-item .tick { width: 16px; color: var(--accent); visibility: hidden; }
.menu-item[aria-checked="true"] .tick { visibility: visible; }
.menu-sep { height: 1px; margin: var(--s4) 0; background: var(--border); }

dialog { color: inherit; }
.modal, .drawer, .cmdk { padding: 0; border: 1px solid var(--border); background: var(--raised); color: var(--text); box-shadow: var(--shadow-3); }
.modal::backdrop, .drawer::backdrop, .cmdk::backdrop { background: var(--scrim); animation: fade-in var(--dur-3) var(--ease-out); }
.modal { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 64px); border-radius: var(--r-lg); overflow: hidden; }
.modal[open] { display: flex; flex-direction: column; animation: modal-in var(--dur-3) var(--ease-spring); }
.modal-head { display: flex; align-items: flex-start; gap: var(--s12); padding: var(--s20) var(--s20) 0; }
.modal-head .titles { flex: 1 1; display: flex; flex-direction: column; gap: var(--s4); }
.modal-head h2 { font-size: 16px; line-height: 24px; font-weight: 600; }
.modal-head p { font-size: 13px; line-height: 18px; color: var(--text-2); }
.modal-body { padding: var(--s20); overflow: auto; display: flex; flex-direction: column; gap: var(--s16); }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--s8); padding: var(--s12) var(--s20); border-top: 1px solid var(--border); background: var(--sunken); }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes fade-in { from { opacity: 0; } }

.drawer { margin: 0 0 0 auto; width: min(440px, 100vw); height: 100dvh; max-height: 100dvh; border-radius: var(--r-lg) 0 0 var(--r-lg); border-right: 0; }
.drawer[open] { display: flex; flex-direction: column; animation: drawer-in var(--dur-3) var(--ease-out); }
.drawer .modal-body { flex: 1 1; }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } }
@media (max-width: 639px) {
  .drawer { margin: auto 0 0; width: 100vw; max-width: 100vw; height: 85dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; border-right: 1px solid var(--border); border-bottom: 0; }
  @keyframes drawer-in { from { transform: translateY(24px); opacity: 0; } }
}

.cmdk { width: min(600px, calc(100vw - 32px)); margin: 12vh auto auto; border-radius: var(--r-lg); overflow: hidden; }
.cmdk[open] { display: flex; flex-direction: column; animation: modal-in var(--dur-2) var(--ease-out); }
.cmdk-input { display: flex; align-items: center; gap: var(--s12); height: 52px; padding: 0 var(--s16); border-bottom: 1px solid var(--border); color: var(--muted); }
.cmdk-input input { all: unset; flex: 1 1; font-size: 15px; line-height: 20px; color: var(--text); }
.cmdk-input input::placeholder { color: var(--muted); }
.cmdk-list { position: relative; max-height: min(360px, 50dvh); overflow-y: auto; padding: var(--s8); overscroll-behavior: contain; }
.cmdk-hi { position: absolute; left: var(--s8); right: var(--s8); top: 0; height: 0; background: var(--fill-press); border-radius: var(--r-sm); pointer-events: none; }
.cmdk-group { padding: var(--s8) var(--s8) var(--s4); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cmdk-item { position: relative; display: flex; align-items: center; gap: var(--s12); height: 40px; padding: 0 var(--s8); border-radius: var(--r-sm); font-size: 13px; line-height: 18px; cursor: pointer; }
.cmdk-item .icon { color: var(--muted); }
.cmdk-item .sym { font-weight: 600; width: 48px; }
.cmdk-item .nm { flex: 1 1; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item .px { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.cmdk-item .delta { width: 64px; justify-content: flex-end; font-size: 12px; }
.cmdk-item mark { background: none; color: var(--text); font-weight: 600; }
.cmdk-empty { padding: var(--s32) var(--s16); text-align: center; color: var(--muted); font-size: 13px; }
.cmdk-foot { display: flex; gap: var(--s16); align-items: center; height: 40px; padding: 0 var(--s16); border-top: 1px solid var(--border); background: var(--sunken); font-size: 12px; color: var(--muted); }
.cmdk-foot .kbd { margin-right: var(--s4); }

/* ==========================================================================
   App shell: Sidebar, Top bar, Breadcrumb, Mobile tab bar
   ========================================================================== */
.shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100dvh; transition: grid-template-columns var(--dur-3) var(--ease-out); }
.shell.is-collapsed { grid-template-columns: var(--sidebar-sm) minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: var(--s4); padding: var(--s12) var(--s8); border-right: 1px solid var(--border); background: var(--bg); overflow-y: auto; overflow-x: hidden; }
.brand { display: flex; align-items: center; gap: var(--s8); height: var(--ctl-md); padding: 0 var(--s8); font-weight: 600; font-size: 14px; letter-spacing: -.01em; white-space: nowrap; }
.brand-mark { width: 22px; height: 22px; border-radius: var(--r-sm); background: var(--text); color: var(--bg); display: grid; place-items: center; flex: none; }
.brand-mark svg { width: 14px; height: 14px; }
.nav-group { display: flex; flex-direction: column; gap: 1px; padding-top: var(--s12); }
.nav-label { padding: 0 var(--s8) var(--s4); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.nav-item { display: flex; align-items: center; gap: 10px; height: var(--ctl-md); padding: 0 var(--s8); border-radius: var(--r-sm); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-2); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-1), color var(--dur-1); }
.nav-item:hover { background: var(--fill-hover); color: var(--text); text-decoration: none; }
.nav-item[aria-current="page"], .nav-item[aria-current="true"] { background: var(--fill-press); color: var(--text); }
.nav-item[aria-current] .icon { color: var(--text); }
.nav-item .icon { color: var(--muted); }
.nav-item .meta { margin-left: auto; font-size: 11px; color: var(--muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.shell.is-collapsed .nav-item span, .shell.is-collapsed .nav-label, .shell.is-collapsed .brand span, .shell.is-collapsed .nav-item .meta, .shell.is-collapsed .sidebar .kbd, .shell.is-collapsed .search-trigger .label { display: none; }
.shell.is-collapsed .search-trigger { justify-content: center; padding: 0; }
.shell.is-collapsed .nav-item, .shell.is-collapsed .brand { justify-content: center; padding: 0; }

.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: var(--s8); height: 52px; padding: 0 var(--gutter); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--border); }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--muted); min-width: 0; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); text-decoration: none; }
.crumbs [aria-current] { color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs .icon { width: 12px; height: 12px; color: var(--faint); }
.search-trigger { display: inline-flex; align-items: center; gap: var(--s8); height: var(--ctl-md); padding: 0 6px 0 10px; min-width: 200px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 13px; cursor: pointer; transition: border-color var(--dur-1); }
.search-trigger:hover { border-color: var(--border-strong); color: var(--text-2); }
.search-trigger .kbd { margin-left: auto; }

@media (max-width: 1023px) {
  .shell, .shell.is-collapsed { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; z-index: 40; left: 0; top: 0; width: 280px; transform: translateX(-100%); transition: transform var(--dur-3) var(--ease-out); background: var(--surface); box-shadow: var(--shadow-3); }
  .shell.nav-open .sidebar { transform: none; }
  .shell.nav-open::after { content: ""; position: fixed; inset: 0; z-index: 30; background: var(--scrim); }
  .search-trigger { min-width: 0; }
  .search-trigger .label, .search-trigger .kbd { display: none; }
}
@media (min-width: 1024px) { .only-mobile-nav { display: none !important; } }
@media (max-width: 1023px) { [data-shell-collapse] { display: none; } }

/* Mobile tab bar — shown on phones in product screens */
.tabbar-demo { display: flex; justify-content: space-around; height: 56px; padding: 0 var(--s4); background: var(--surface); border-top: 1px solid var(--border); }
.tabbar-demo a { flex: 1 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 44px; font-size: 10px; line-height: 12px; font-weight: 500; color: var(--muted); text-decoration: none; border-radius: var(--r-sm); }
.tabbar-demo a .icon { width: 20px; height: 20px; }
.tabbar-demo a[aria-current] { color: var(--text); }

/* Editorial (airy) article */
.brief-article { display: flex; flex-direction: column; gap: var(--stack); }
.brief-article .kicker { display: flex; align-items: center; gap: var(--s8); }
.brief-article h3 { font-family: var(--serif); font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -.012em; text-wrap: balance; max-width: 30ch; }
.brief-article .lede { font-family: var(--serif); font-size: 17px; line-height: 28px; color: var(--text-2); max-width: var(--read-max); }
.brief-article .takeaways { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s12); max-width: var(--read-max); }
.brief-article .takeaways li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s8); font-size: 15px; line-height: 24px; }
.brief-article .takeaways li .icon { margin-top: 4px; color: var(--muted); }

/* ==========================================================================
   v1.1 — construction & research primitives (added with the Portfolio page)
   ========================================================================== */

/* Page container + header */
.page { max-width: calc(var(--page-max) + 2 * var(--gutter)); margin: 0 auto; padding: var(--s32) var(--gutter) var(--s64); display: flex; flex-direction: column; gap: var(--section); }
.page-head { display: flex; align-items: flex-end; gap: var(--s16); flex-wrap: wrap; }
.page-head .titles { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; flex: 1 1 420px; }
.page-head .title-row { display: flex; align-items: center; gap: var(--s12); flex-wrap: wrap; }
.page-head p { color: var(--text-2); font-size: 14px; line-height: 20px; max-width: 72ch; }
.page-head .actions { display: flex; gap: var(--s8); flex-wrap: wrap; }
.section { display: flex; flex-direction: column; gap: var(--s16); scroll-margin-top: 72px; }

/* Glossary term: research vocabulary explained in place */
.term { -webkit-text-decoration: underline dotted color-mix(in srgb, currentColor 45%, transparent); text-decoration: underline dotted color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: help; border-radius: 2px; }
.term:hover { text-decoration-color: currentColor; }
.tooltip.is-wide { white-space: normal; max-width: 300px; align-items: flex-start; padding: 8px 10px; line-height: 17px; }

/* Stat grid: label/value pairs (drawers, sleeve cards, detail panels) */
.stat-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); margin: 0; }
.stat-grid > div { padding: var(--s12) var(--s12) var(--s12) 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat-grid dt { font-size: 12px; line-height: 16px; color: var(--muted); }
.stat-grid dd { margin: 0; font-size: 13px; line-height: 18px; font-weight: 500; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-grid.inline { gap: var(--s12); }
.stat-grid.inline > div { border-bottom: 0; padding: 0; }

/* Timeline: model change log */
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.timeline li { display: grid; grid-template-columns: 96px 16px minmax(0, 1fr); column-gap: var(--s12); }
.timeline .when { font-size: 12px; line-height: 16px; color: var(--muted); padding-top: 2px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; text-align: right; }
.timeline .rail { position: relative; display: flex; justify-content: center; }
.timeline .rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }
.timeline li:first-child .rail::before { top: 6px; }
.timeline li:last-child .rail::before { bottom: auto; height: 6px; }
.timeline .node { position: relative; margin-top: 3px; width: 9px; height: 9px; border-radius: var(--r-full); background: var(--surface); box-shadow: inset 0 0 0 2px var(--c, var(--border-strong)); }
.timeline .body { padding-bottom: var(--s20); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.timeline li:last-child .body { padding-bottom: 0; }
.timeline .body .head { display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap; font-size: 13px; line-height: 18px; font-weight: 500; }
.timeline .body p { font-size: 13px; line-height: 18px; color: var(--text-2); max-width: 70ch; }
.timeline .change { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 400; }
@media (max-width: 639px) {
  .timeline li { grid-template-columns: 16px minmax(0, 1fr); }
  .timeline .when { grid-column: 2; text-align: left; padding: 0 0 2px; }
  .timeline .rail { grid-row: 1 / span 2; grid-column: 1; }
  .timeline .body { grid-column: 2; }
}

/* Explainer: a quiet panel that teaches how something works */
.explainer { background: var(--sunken); border-radius: var(--r-md); padding: var(--s20); display: flex; flex-direction: column; gap: var(--s12); }
.explainer h3 { font-size: 14px; line-height: 20px; font-weight: 600; display: flex; align-items: center; gap: var(--s8); }
.explainer h3 .icon { color: var(--accent); }
.explainer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s12); }
.explainer li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: var(--s12); font-size: 13px; line-height: 20px; color: var(--text-2); }
.explainer li .dot { margin-top: 6px; }
.explainer li b { color: var(--text); font-weight: 600; }

/* Disclaimer: required context for hypothetical figures */
.disclaimer { display: flex; gap: var(--s8); padding-top: var(--s16); border-top: 1px solid var(--border); font-size: 12px; line-height: 18px; color: var(--muted); }
.disclaimer p { max-width: 110ch; }
.disclaimer .icon { flex: none; margin-top: 1px; }

/* Sleeve card: filter toggle + stats */
.sleeve-card .stat-grid { --cols: 3; padding-top: var(--s12); border-top: 1px solid var(--border); }
.sleeve-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sleeve-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Sidebar footer: profile */
.side-profile { display: flex; align-items: center; gap: var(--s8); padding: var(--s8); border-radius: var(--r-sm); text-decoration: none; color: inherit; }
.side-profile:hover { background: var(--fill-hover); text-decoration: none; }
.side-profile .who { display: flex; flex-direction: column; min-width: 0; font-size: 12px; line-height: 16px; }
.side-profile .who b { font-size: 13px; line-height: 18px; font-weight: 500; }
.side-profile .who span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell.is-collapsed .side-profile .who { display: none; }
.shell.is-collapsed .side-profile { justify-content: center; padding: var(--s8) 0; }

/* Mobile tab bar (the real one; .tabbar-demo is the showcase frame) */
.tabbar { display: none; }
@media (max-width: 767px) {
  .tabbar { display: flex; position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; justify-content: space-around; padding: 0 var(--s4) env(safe-area-inset-bottom, 0px); height: calc(56px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); border-top: 1px solid var(--border); }
  .tabbar a { flex: 1 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 44px; font-size: 10px; line-height: 12px; font-weight: 500; color: var(--muted); text-decoration: none; }
  .tabbar a .icon { width: 20px; height: 20px; }
  .tabbar a[aria-current] { color: var(--text); }
  .has-tabbar .page { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .has-tabbar .toast-region { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

.compare-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.compare-table th, .compare-table td { padding: var(--s8) 0 var(--s8) var(--s12); border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.compare-table th { font-size: 12px; font-weight: 500; color: var(--muted); }
.compare-table th:first-child, .compare-table td:first-child { text-align: left; color: var(--text-2); padding-left: 0; }
.compare-table tr:last-child td { border-bottom: 0; }

/* Narrow screens: KPI figures step down; alert actions move under the text */
@media (max-width: 639px) {
  .kpi .t-kpi { font-size: 22px; line-height: 28px; }
  .alert:has(> :nth-child(3):not(.btn-icon):not(:empty)) { grid-template-columns: 16px minmax(0, 1fr); }
  .alert > :nth-child(3):not(.btn-icon):not(:empty) { grid-column: 2; justify-self: start; margin-left: calc(-1 * var(--s8)); }
  .topbar [data-theme-seg] { display: none; }
  .posture span { white-space: nowrap; }
  .posture span:not(.is-on) { color: transparent; }
  .posture span.is-on:last-child { direction: rtl; }
}

/* ==========================================================================
   v1.2 — profile ladder + allocation attribution
   ========================================================================== */

/* Profile ladder: every risk profile's sleeve mix, the person's own highlighted */
.profile-ladder { display: grid; grid-template-columns: minmax(200px, 240px) minmax(120px, 1fr) repeat(2, minmax(72px, auto)); column-gap: 0; font-size: 13px; line-height: 18px; }
.profile-ladder .pl-row { display: contents; }
.profile-ladder .pl-row > * { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--border); }
.profile-ladder .pl-row:last-child > * { border-bottom: 0; }
.profile-ladder .pl-head > * { min-height: 32px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--muted); }
.profile-ladder .pl-name { gap: var(--s8); color: var(--text-2); padding-left: var(--s8); border-radius: var(--r-sm) 0 0 var(--r-sm); }
.profile-ladder .pl-num { justify-content: flex-end; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 var(--s12); }
.profile-ladder .pl-mix { padding: 0 var(--s12); }
.profile-ladder .pl-name .badge { margin-left: auto; margin-right: var(--s8); }
.profile-ladder .pl-mix .alloc-bar { width: 100%; }
.profile-ladder .pl-row.is-you > * { background: var(--accent-subtle); border-bottom-color: var(--accent-line); }
.profile-ladder .pl-row.is-you .pl-name { color: var(--text); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
.profile-ladder .pl-row.is-you > :last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
@media (max-width: 639px) {
  .profile-ladder { grid-template-columns: minmax(0, 1fr) auto auto; }
  .profile-ladder .pl-mix { grid-column: 1 / -1; min-height: 20px !important; padding: 0 var(--s8) var(--s12); }
  .profile-ladder .pl-row > .pl-name, .profile-ladder .pl-row > .pl-num { border-bottom: 0; }
  .profile-ladder .pl-head .pl-mix { display: none; }
  .profile-ladder { grid-auto-flow: row dense; }
}

/* Attribution table: allocation × return = contribution, summing to the total */
.attrib td .name { display: inline-flex; align-items: center; gap: var(--s8); color: var(--text-2); }
.attrib tfoot td { border-top: 1px solid var(--border-strong); border-bottom: 0; font-weight: 600; color: var(--text); padding-top: var(--s12); }
.attrib tfoot td:first-child { color: var(--text); }

/* ==========================================================================
   v1.3 — editorial components (Daily Brief, research articles)
   Serif for reading, mono for datelines/labels, Geist for UI. Airy density.
   ========================================================================== */

/* Reading layout: sticky "on this page" rail + a single reading column */
.read-layout { display: grid; grid-template-columns: 184px minmax(0, 720px); gap: var(--s64); justify-content: center; align-items: start; }
@media (max-width: 1100px) { .read-layout { grid-template-columns: minmax(0, 720px); } .read-layout .toc { display: none; } }

.toc { position: sticky; top: 76px; display: flex; flex-direction: column; gap: var(--s8); }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-left: 1px solid var(--border); }
.toc a { display: block; padding: 5px 0 5px var(--s12); margin-left: -1px; border-left: 2px solid transparent; font-size: 12px; line-height: 16px; color: var(--muted); text-decoration: none; transition: color var(--dur-1) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.toc a:hover { color: var(--text); text-decoration: none; }
.toc a[aria-current="true"] { color: var(--text); border-left-color: var(--text); font-weight: 500; }

/* Article rhythm: sections separated by space, labelled with a mono dateline */
.article { display: flex; flex-direction: column; gap: var(--s48); min-width: 0; }
.article > section { display: flex; flex-direction: column; gap: var(--s12); scroll-margin-top: 76px; }
.article > section.ruled { padding-top: var(--s32); border-top: 1px solid var(--border); }
.article .t-prose + .t-prose { margin-top: var(--s4); }
.article-head { display: flex; flex-direction: column; gap: var(--s16); }
.article-head .byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s8) var(--s12); font-size: 12px; line-height: 16px; color: var(--muted); }
.edition-row { display: flex; align-items: center; gap: var(--s12); flex-wrap: wrap; }
.edition-row .t-dateline b { color: var(--accent); font-weight: 500; }
.article.is-swapping { opacity: 0; transform: translateY(4px); }
.article { transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }

/* Market strip: a ruled row of instruments, mono figures */
.market-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); border-block: 1px solid var(--border); }
.market-strip > div { display: flex; flex-direction: column; gap: 2px; padding: var(--s12) var(--s12) var(--s12) 0; min-width: 0; }
.market-strip > div + div { padding-left: var(--s12); border-left: 1px solid var(--border); }
.market-strip .sym { font-family: var(--mono); font-size: 11px; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.market-strip .px { font-family: var(--mono); font-size: 14px; line-height: 20px; font-weight: 500; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.market-strip .delta { font-family: var(--mono); font-size: 12px; line-height: 16px; font-weight: 400; }
@media (max-width: 639px) { .market-strip { grid-template-columns: 1fr 1fr; } .market-strip > div:nth-child(odd) { padding-left: 0; border-left: 0; } .market-strip > div:nth-child(n+3) { border-top: 1px solid var(--border); } }

/* Posture scale: where the market's tone sits. Neutral ink — tone isn't good/bad */
.posture { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.posture span { display: flex; flex-direction: column; gap: 6px; font-size: 11px; line-height: 16px; color: var(--muted); }
.posture span::before { content: ""; height: 4px; border-radius: 2px; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--border); }
.posture span.is-on { color: var(--text); font-weight: 600; }
.posture span.is-on::before { background: var(--text); box-shadow: none; }

/* Severity + tone tags (mono, compact) */
.tagline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s8); font-family: var(--mono); font-size: 11px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sev { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.sev::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--c, var(--faint)); }
.sev.high { --c: var(--danger); color: var(--danger); }
.sev.med { --c: var(--warn); color: var(--warn); }
.sev.low { --c: var(--muted); }
.tone.pos { color: var(--gain); }
.tone.neg { color: var(--loss); }
.tagline .badge { font-family: var(--font); letter-spacing: 0; text-transform: none; }

/* Story list: major developments */
.stories { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s24); }
.story { display: flex; flex-direction: column; gap: 6px; }
.story p { font-family: var(--serif); font-size: 16px; line-height: 26px; color: var(--text-2); max-width: var(--read-max); }

/* Two-up lists: risks / opportunities */
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s32); }
@media (max-width: 639px) { .two-up { grid-template-columns: 1fr; gap: var(--s24); } }
.point-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s16); }
.point-list li { display: flex; flex-direction: column; gap: 2px; }
.point-list .pt-head { display: flex; align-items: baseline; gap: var(--s8); flex-wrap: wrap; font-family: var(--serif); font-size: 16px; line-height: 22px; font-weight: 600; }
.point-list p { font-size: 13px; line-height: 20px; color: var(--text-2); }

/* Event list: ruled rows, day · event · time · weight */
.event-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.event-list li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--s4) var(--s16); align-items: baseline; padding: var(--s12) 0; border-bottom: 1px solid var(--border); }
.event-list .day { font-family: var(--mono); font-size: 11px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.event-list .ev { font-family: var(--serif); font-size: 16px; line-height: 22px; }
.event-list .ev small { display: block; font-family: var(--font); font-size: 12px; line-height: 16px; color: var(--muted); margin-top: 2px; }
.event-list .meta { display: flex; align-items: center; gap: var(--s8); justify-self: end; }

/* Sources footer */
.sources { display: flex; flex-direction: column; gap: var(--s8); }
.sources p { font-size: 13px; line-height: 20px; color: var(--text-2); }
.sources .t-code { color: var(--muted); line-height: 18px; }

/* Portfolio tie-in inside an article: a quiet panel, not a card */
.tie-in { background: var(--sunken); border-radius: var(--r-md); padding: var(--s16) var(--s20); display: flex; flex-direction: column; gap: var(--s12); }
.tie-in .tie-head { display: flex; align-items: baseline; gap: var(--s8); flex-wrap: wrap; }
.tie-in .tie-rows { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; gap: var(--s8) var(--s12); align-items: center; font-size: 13px; line-height: 18px; }
.tie-in .tie-rows .dot { align-self: center; }
.tie-in .tie-rows .why { grid-column: 2 / -1; margin-top: -6px; font-size: 12px; line-height: 16px; color: var(--muted); }
.tie-in .num { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* Reader feedback */
.feedback-row { display: flex; align-items: center; gap: var(--s12); flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.feedback-row .btn[aria-pressed="true"] { background: var(--accent-subtle); border-color: var(--accent-line); color: var(--text); }

/* ==========================================================================
   v1.4 — research components (Research & Analysis)
   Quarter summary, event-marked chart, research timeline, article cards,
   ticker chips, reading drawer.
   ========================================================================== */

/* Period picker: year label + quarter segmented control */
.period { display: flex; align-items: center; gap: var(--s8); }
.period .year { font-size: 13px; line-height: 18px; font-weight: 600; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--text); padding: 0 var(--s4); }

/* Inline sleeve reference in prose: identity from the marker, never text color */
.sleeve-ref { white-space: nowrap; font-weight: 500; color: var(--text); }
.sleeve-ref .dot { display: inline-block; width: 7px; height: 7px; margin: 0 5px 1px 1px; vertical-align: middle; }

/* Quarter summary card: editorial text beside a performance panel */
.q-card { display: grid; grid-template-columns: minmax(0, 1fr); }
.q-card .q-text { display: flex; flex-direction: column; gap: var(--s16); padding: var(--s24); min-width: 0; }
.q-card .q-perf { display: flex; flex-direction: column; gap: var(--s16); padding: var(--s24); min-width: 0; border-top: 1px solid var(--border); }
.q-card .t-headline { font-size: 30px; line-height: 36px; text-wrap: balance; }
.q-card .q-meta { display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap; }
.q-card .q-meta .t-dateline b { color: var(--text); font-weight: 500; }
.q-card .q-review { display: flex; gap: var(--s8); align-items: flex-start; font-size: 13px; line-height: 18px; color: var(--text-2); padding-top: var(--s12); border-top: 1px solid var(--border); }
.q-card .q-review .icon { color: var(--muted); flex: none; margin-top: 1px; }
@media (min-width: 1100px) {
  .q-card { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .q-card .q-text { padding: var(--s32); }
  .q-card .q-perf { border-top: 0; border-left: 1px solid var(--border); padding: var(--s24) var(--s24) var(--s20); }
}
@media (max-width: 639px) { .q-card .t-headline { font-size: 24px; line-height: 30px; } .q-card .q-text, .q-card .q-perf { padding: var(--s16); } }

/* Sleeve result rows (quarter returns) */
.q-sleeves { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: var(--s8) var(--s12); align-items: center; font-size: 13px; line-height: 18px; }
.q-sleeves .num { text-align: right; }
.q-sleeves .total { grid-column: 1 / -1; height: 1px; background: var(--border); }

/* Event-marked chart: HTML markers over a stretched SVG so circles stay round */
.ev-chart .chart-plot { height: 168px; }
.ev-chart .chart-plot svg { overflow: visible; }
.ev-chart .area { fill: var(--c); opacity: .07; }
.ev-chart .line { stroke: var(--c); vector-effect: non-scaling-stroke; }
.ev-chart .bench, .ev-chart .gridline, .ev-chart .baseline { vector-effect: non-scaling-stroke; }
.ev-chart.up { --c: var(--gain); } .ev-chart.down { --c: var(--loss); }
.ev-chart .y-lab { position: absolute; right: 0; transform: translateY(-50%); font-size: 11px; line-height: 14px; color: var(--muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; background: var(--surface); padding-left: 4px; pointer-events: none; }
.ev-chart .x-labs { position: relative; height: 14px; font-size: 11px; line-height: 14px; color: var(--muted); }
.ev-chart .x-labs span { position: absolute; top: 0; }
.ev-chart .hair { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--text); opacity: 0; pointer-events: none; transform: translateX(-.5px); }
.ev-chart .hair.is-on { opacity: .16; }
.ev-chart .cursor { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: var(--r-full); background: var(--c); box-shadow: 0 0 0 2px var(--surface); opacity: 0; pointer-events: none; }
.ev-chart .cursor.is-on { opacity: 1; }
.ev-mark { all: unset; position: absolute; z-index: 2; width: 24px; height: 24px; margin: -12px 0 0 -12px; display: grid; place-items: center; cursor: pointer; border-radius: var(--r-full); }
.ev-mark::before { content: ""; width: 9px; height: 9px; border-radius: var(--r-full); background: var(--surface); box-shadow: inset 0 0 0 2px var(--text-2), 0 0 0 2px var(--surface); transition: transform var(--dur-2) var(--ease-spring), background-color var(--dur-1); }
.ev-mark:hover::before, .ev-mark.is-hot::before, .ev-mark:focus-visible::before { transform: scale(1.35); background: var(--text); }
.ev-mark.is-update::before { border-radius: 2px; }
.ev-mark:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.legend-key .swatch-mark { width: 9px; height: 9px; border-radius: var(--r-full); box-shadow: inset 0 0 0 2px var(--text-2); }
.legend-key .swatch-mark.sq { border-radius: 2px; }

/* Research timeline: stacked variant of .timeline with interactive rows */
.timeline.is-stacked li { grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--s8); }
.timeline.is-stacked .rail { grid-row: 1; grid-column: 1; }
.timeline.is-stacked .body { grid-column: 2; padding-bottom: var(--s4); }
.timeline .tl-btn { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 2px var(--s8) var(--s12); margin-left: calc(-1 * var(--s4)); border-radius: var(--r-sm); cursor: pointer; transition: background-color var(--dur-1) var(--ease-out), opacity var(--dur-1); }
.timeline .tl-btn:hover, .timeline li.is-hot .tl-btn { background: var(--fill-hover); }
.timeline .tl-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.timeline .tl-btn .when { text-align: left; padding: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.timeline .tl-btn b { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text); }
.timeline .tl-btn small { font-size: 12px; line-height: 16px; color: var(--muted); }
.timeline li.is-dim .tl-btn { opacity: .45; }
.timeline li.is-current .node { background: var(--text); box-shadow: none; }
.timeline .node.sq { border-radius: 2px; }

/* Ticker chips: mono, quiet; a sleeve dot marks tickers you hold */
.tk-list { display: flex; flex-wrap: wrap; gap: var(--s4); }
.tk { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; border-radius: var(--r-xs); background: var(--sunken); box-shadow: inset 0 0 0 1px var(--border); font-family: var(--mono); font-size: 11px; line-height: 16px; letter-spacing: .02em; color: var(--text-2); white-space: nowrap; }
.tk .dot { width: 6px; height: 6px; border-radius: var(--r-full); }

/* Research article card */
.r-list { display: flex; flex-direction: column; gap: var(--s12); }
.r-card { display: grid; grid-template-columns: minmax(0, 1fr) 152px; gap: var(--s20); padding: var(--s20); scroll-margin-top: 76px; }
.r-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.r-card .r-main { display: flex; flex-direction: column; gap: var(--s8); min-width: 0; }
.r-card .r-ex { font-size: 13px; line-height: 20px; color: var(--text-2); max-width: 80ch; }
.r-card .r-foot { display: flex; align-items: center; gap: var(--s8) var(--s12); flex-wrap: wrap; margin-top: var(--s4); }
.r-card.is-flash { animation: r-flash 1.4s var(--ease-out); }
@keyframes r-flash { 0%, 30% { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-subtle); } 100% { border-color: var(--border); box-shadow: var(--shadow-1); } }
@media (max-width: 639px) { .r-card { grid-template-columns: minmax(0, 1fr); gap: var(--s12); padding: var(--s16); } }

/* Thumbnail figure: a labelled micro-chart of the article's main instrument */
.r-thumb { margin: 0; display: flex; flex-direction: column; gap: 6px; padding: var(--s12); border-radius: var(--r-sm); background: var(--sunken); align-self: start; }
.r-thumb svg { width: 100%; height: 56px; display: block; overflow: visible; }
.r-thumb path.l { fill: none; stroke-width: 1.75; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; stroke: var(--c); }
.r-thumb path.a { fill: var(--c); opacity: .08; stroke: none; }
.r-thumb.up { --c: var(--gain); } .r-thumb.down { --c: var(--loss); } .r-thumb.flat { --c: var(--text-2); }
.r-thumb figcaption { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 11px; line-height: 14px; color: var(--muted); }
.r-thumb figcaption .sym { font-family: var(--mono); color: var(--text-2); letter-spacing: .02em; }
.r-thumb figcaption .chg { font-family: var(--mono); font-weight: 500; color: var(--text); }
.r-thumb.up .chg { color: var(--gain); } .r-thumb.down .chg { color: var(--loss); }
.r-thumb.is-lg { align-self: stretch; }
.r-thumb.is-lg svg { height: 96px; }
@media (max-width: 639px) { .r-card .r-thumb { flex-direction: row; align-items: center; } .r-card .r-thumb svg { height: 32px; flex: 1 1; } .r-card .r-thumb figcaption { flex-direction: column; gap: 0; align-items: flex-end; } }

/* Reading drawer: wider, serif body */
.drawer.is-reading { width: min(640px, 100vw); }
.drawer.is-reading .modal-body { gap: var(--s24); padding: var(--s24); }
.drawer.is-reading .modal-head { align-items: center; padding-bottom: var(--s12); border-bottom: 1px solid var(--border); }
.drawer.is-reading .read-head { display: flex; flex-direction: column; gap: var(--s12); }
.drawer.is-reading .read-head h2 { font-family: var(--serif); font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
.drawer.is-reading .t-prose { font-size: 16px; line-height: 27px; }
.tk-table { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.tk-table > div { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s12); align-items: center; padding: var(--s8) 0; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 18px; }
.tk-table .nm { display: flex; flex-direction: column; min-width: 0; }
.tk-table .nm small { color: var(--muted); font-size: 12px; line-height: 16px; }

/* Filter trigger with a value applied */
.btn.is-applied { border-color: var(--accent-line); background: var(--accent-subtle); color: var(--text); }

/* ==========================================================================
   v1.5 — assessment components (Risk Assessment)
   Stepper, question cards with answer tiles, live profile readouts,
   sticky action bar, and the result.
   ========================================================================== */

/* Header meta: small facts beside the page title */
.meta-list { display: flex; align-items: center; gap: var(--s24); flex-wrap: wrap; }
.meta-item { display: flex; align-items: center; gap: var(--s8); font-size: 12px; line-height: 16px; color: var(--muted); }
.meta-item .icon { color: var(--text-2); }
.meta-item b { display: block; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text); }

/* Stepper: numbered steps; location in neutral ink, done steps get a check */
.stepper { display: flex; align-items: center; gap: var(--s4); padding: var(--s8); overflow-x: auto; scrollbar-width: none; }
.stepper::-webkit-scrollbar { display: none; }
.stepper .sep { flex: 1 0 12px; height: 1px; background: var(--border); }
.step { all: unset; box-sizing: border-box; flex: none; display: inline-flex; align-items: center; gap: var(--s8); height: 36px; padding: 0 var(--s12) 0 var(--s8); border-radius: var(--r-full); font-size: 13px; line-height: 18px; color: var(--muted); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1); }
.step .n { width: 22px; height: 22px; border-radius: var(--r-full); display: grid; place-items: center; font-family: var(--mono); font-size: 11px; line-height: 1; box-shadow: inset 0 0 0 1px var(--border-strong); }
.step .n .icon { width: 12px; height: 12px; stroke-width: 2.5; }
.step:hover:not(:disabled) { color: var(--text); background: var(--fill-hover); }
.step:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.step:disabled { cursor: default; }
.step.done { color: var(--text-2); }
.step.done .n { background: var(--text-2); color: var(--surface); box-shadow: none; }
.step[aria-current="step"] { background: var(--fill-press); color: var(--text); font-weight: 500; }
.step[aria-current="step"] .n { background: var(--text); color: var(--surface); box-shadow: none; }

/* Question card */
.qcard { display: flex; flex-direction: column; gap: var(--s16); padding: var(--s24); scroll-margin-top: 96px; transition: box-shadow var(--dur-2) var(--ease-out); }
.qcard .qc-head { display: flex; align-items: center; gap: var(--s8); min-height: 28px; }
.qcard .qc-done { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; color: var(--text-2); }
.qcard .qc-done .icon { width: 13px; height: 13px; color: var(--gain); }
.qcard .qc-title { font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; text-wrap: pretty; }
.qcard .qc-help { margin-top: calc(-1 * var(--s12)); font-size: 13px; line-height: 19px; color: var(--text-2); }
.qcard .qc-why { padding: var(--s12) var(--s16); border-radius: var(--r-md); background: var(--sunken); font-size: 13px; line-height: 19px; color: var(--text-2); }
.qcard .qc-note { display: flex; gap: var(--s8); padding: var(--s12) var(--s16); border-radius: var(--r-md); background: var(--sunken); font-size: 13px; line-height: 19px; color: var(--text-2); animation: fade-up var(--dur-3) var(--ease-out) both; }
.qcard .qc-note .icon { flex: none; margin-top: 2px; color: var(--muted); }
.qcard.is-missing { box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 55%, transparent), var(--shadow-1); }
.qcard .qc-missing { font-size: 12px; line-height: 16px; color: var(--warn); font-weight: 500; }
@keyframes fade-up { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .qcard .qc-note { animation: none; } }
@media (max-width: 639px) { .qcard { padding: var(--s16); } .qcard .qc-title { font-size: 17px; line-height: 24px; } }

/* Answer tiles: a radio group of cards */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s12); }
.tiles.is-wide { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.tiles.is-range { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
.tile { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; gap: var(--s8); min-height: 84px; padding: var(--s16); border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; transition: box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-1), transform var(--dur-2) var(--ease-spring); }
.tile:hover { box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-1); }
.tile:active { transform: scale(.985); }
.tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tile[aria-checked="true"] { background: var(--accent-subtle); box-shadow: inset 0 0 0 1.5px var(--accent); }
.tile .t-ico { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--sunken); color: var(--text-2); transition: color var(--dur-1), background-color var(--dur-1); }
.tile[aria-checked="true"] .t-ico { background: var(--surface); color: var(--accent); }
.tile .t-lab { padding-right: var(--s20); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text); }
.tile .t-sub { margin-top: calc(-1 * var(--s4)); font-size: 12px; line-height: 17px; color: var(--text-2); }
.tile .t-check { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--accent); color: var(--on-accent); opacity: 0; transform: scale(.6); transition: opacity var(--dur-1), transform var(--dur-2) var(--ease-spring); }
.tile .t-check .icon { width: 11px; height: 11px; stroke-width: 3; }
.tile[aria-checked="true"] .t-check { opacity: 1; transform: none; }
@media (max-width: 479px) { .tiles:not(.is-wide) { grid-template-columns: 1fr 1fr; } .tile { min-height: 72px; padding: var(--s12); } }

/* Range bar: a year's plausible worst → best on a shared axis with a zero line */
.rbar { position: relative; display: block; height: 30px; margin-top: auto; }
.rbar .zero { position: absolute; top: 2px; height: 18px; width: 1px; background: var(--border-strong); }
.rbar .neg, .rbar .pos { position: absolute; top: 8px; height: 6px; }
.rbar .neg { background: var(--loss); border-radius: 3px 0 0 3px; }
.rbar .pos { background: var(--gain); border-radius: 0 3px 3px 0; }
.rbar .lo, .rbar .hi { position: absolute; top: 18px; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; line-height: 12px; color: var(--muted); white-space: nowrap; }

/* Slider answer */
.slide-card { display: flex; flex-direction: column; gap: var(--s12); padding: var(--s16) var(--s20); border-radius: var(--r-md); background: var(--sunken); }
.slide-card .readout { display: flex; align-items: baseline; gap: var(--s8) var(--s12); flex-wrap: wrap; }
.slide-card .readout b { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.02em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.slide-card .readout span { font-size: 13px; line-height: 18px; color: var(--text-2); }
.slide-card .slider::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--accent) var(--v), var(--border-strong) var(--v)); }

/* Scenario chart */
.scenario { display: flex; flex-direction: column; gap: 6px; padding: var(--s12) var(--s16); border-radius: var(--r-md); background: var(--sunken); }
.scenario svg { width: 100%; height: 80px; display: block; overflow: visible; }
.scenario .l { fill: none; stroke: var(--loss); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.scenario .a { fill: var(--loss); opacity: .08; }
.scenario .ref { stroke: var(--border-strong); stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.scenario .cap { display: flex; justify-content: space-between; gap: var(--s8); font-size: 12px; line-height: 16px; color: var(--muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.scenario .cap b { color: var(--text); font-weight: 500; }

/* Sticky action bar at the foot of a multi-step flow */
.action-bar { position: sticky; bottom: var(--s16); z-index: 6; display: flex; align-items: center; gap: var(--s8); padding: var(--s12) var(--s16); border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); box-shadow: 0 0 0 1px var(--border), var(--shadow-3); }
.action-bar .hint { font-size: 12px; line-height: 16px; color: var(--muted); text-align: right; }
@media (max-width: 639px) { .action-bar { bottom: var(--s8); padding: var(--s8); } .action-bar .hint, .action-bar .btn .lbl-long { display: none; } }

/* Live readouts: what the answers so far suggest */
.progress-bar { position: relative; height: 6px; border-radius: 3px; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.progress-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--accent); transition: width var(--dur-3) var(--ease-out); }
.readouts { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.readouts > div { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: var(--s8); align-items: center; padding: var(--s8) 0; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 18px; color: var(--text-2); }
.readouts > div:last-child { border-bottom: 0; }
.readouts .icon { color: var(--muted); }
.readouts b { font-weight: 500; color: var(--text); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; text-align: right; }
.readouts b.is-empty { color: var(--faint); font-weight: 400; }
.readouts b.is-new { animation: fade-up var(--dur-3) var(--ease-out); }
.readouts > div.is-lead { padding-top: var(--s12); }
.readouts > div.is-lead b { font-weight: 600; }

/* Result */
.result { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s24); padding: var(--s32); }
.result h2 { font-family: var(--serif); font-size: 36px; line-height: 42px; font-weight: 500; letter-spacing: -0.01em; }
.result .res-col { display: flex; flex-direction: column; gap: var(--s20); min-width: 0; }
@media (min-width: 900px) { .result { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--s48); } .result .res-col + .res-col { padding-left: var(--s48); border-left: 1px solid var(--border); } }
@media (max-width: 639px) { .result { padding: var(--s20); } .result h2 { font-size: 30px; line-height: 36px; } }
.res-meters { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s16); }
@media (max-width: 479px) { .res-meters { grid-template-columns: 1fr; } }
.meter { display: flex; flex-direction: column; gap: 6px; }
.meter .m-head { display: flex; align-items: baseline; gap: var(--s8); font-size: 13px; line-height: 18px; }
.meter .m-head b { margin-left: auto; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.meter .m-track { position: relative; height: 6px; border-radius: 3px; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--border); }
.meter .m-fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--text-2); }
.meter p { font-size: 12px; line-height: 17px; color: var(--muted); }
.ladder-mini { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.ladder-mini span { display: flex; flex-direction: column; gap: 6px; font-size: 11px; line-height: 14px; color: var(--muted); }
.ladder-mini span::before { content: ""; height: 6px; border-radius: 3px; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--border); }
.ladder-mini span.is-you { color: var(--text); font-weight: 600; }
.ladder-mini span.is-you::before { background: var(--accent); box-shadow: none; }
.ladder-mini span.was::before { background: color-mix(in srgb, var(--text) 22%, var(--surface)); box-shadow: none; }
.res-range { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s12); }
.res-range > div { display: flex; flex-direction: column; gap: 2px; padding: var(--s12) var(--s16); border-radius: var(--r-md); background: var(--sunken); }
.res-range b { font-size: 20px; line-height: 26px; font-weight: 600; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .has-tabbar .action-bar { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); } }

/* ==========================================================================
   v1.6 — thesis components (Risk v Reward)
   Sleeve strip, paired upside/downside cards, thesis article with section
   nav and a snapshot rail.
   ========================================================================== */

/* Sleeve strip: three sleeves + cash, then your allocation */
.sleeve-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(320px, 1.5fr); gap: var(--s12); }
@media (max-width: 1279px) { .sleeve-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sleeve-strip .alloc-mini { grid-column: 1 / -1; } }
@media (max-width: 767px) { .sleeve-strip { grid-template-columns: 1fr 1fr; } }
.mini-sleeve { --c: var(--cash); display: flex; flex-direction: column; gap: var(--s8); padding: var(--s16); min-width: 0; }
.mini-sleeve.lv { --c: var(--lv); } .mini-sleeve.pg { --c: var(--pg); } .mini-sleeve.ag { --c: var(--ag); }
.mini-sleeve .ms-top { display: flex; gap: var(--s8); align-items: flex-start; }
.mini-sleeve .ms-ico { width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--surface)); }
.mini-sleeve .ms-name { font-size: 13px; line-height: 18px; font-weight: 600; }
.mini-sleeve .ms-desc { font-size: 12px; line-height: 16px; color: var(--text-2); }
.mini-sleeve .spark { width: 100%; height: 36px; }
.mini-sleeve .ms-foot { display: flex; align-items: flex-end; gap: var(--s8); margin-top: auto; }
.mini-sleeve .ms-foot .t-caption { display: block; }
.mini-sleeve .ms-ret { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.alloc-mini { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s16); align-items: center; padding: var(--s16); }
.alloc-mini .donut { width: 96px; }
.alloc-mini .donut circle.seg-arc { stroke-width: 16; }
.alloc-mini .alloc-legend .item { grid-template-columns: 8px minmax(0, 1fr) auto; }

/* Paired thesis rows: upside | link | downside */
.pair-head, .pair-row { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr); gap: 0 var(--s8); }
.pair-head { align-items: center; padding: 0 0 var(--s4); }
.pair-head .ph { display: flex; align-items: baseline; gap: var(--s8); font-size: 15px; line-height: 22px; font-weight: 600; }
.pair-head .ph .icon { align-self: center; }
.pair-head .ph.up .icon { color: var(--gain); } .pair-head .ph.down .icon { color: var(--loss); }
.pair-head .ph small { font-size: 12px; font-weight: 400; color: var(--muted); }
.pair-list { display: flex; flex-direction: column; gap: var(--s12); }
.pair-link { display: grid; place-items: center; color: var(--faint); }
.pair-link .icon { width: 16px; height: 16px; }
.pair-row.is-hot .pair-link { color: var(--text-2); }
@media (max-width: 1023px) {
  .pair-head { display: none; }
  .pair-row { grid-template-columns: minmax(0, 1fr); gap: var(--s8); padding-bottom: var(--s12); border-bottom: 1px solid var(--border); }
  .pair-link { display: none; }
}

.thesis-card { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 132px; gap: var(--s16); padding: var(--s16); min-width: 0; }
.thesis-card::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 2px 2px 0; background: var(--c); }
.thesis-card.up { --c: var(--gain); } .thesis-card.down { --c: var(--loss); }
.thesis-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.thesis-card .tc-mark { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.thesis-card .tc-mark .ticker-mark { width: 44px; height: 44px; font-size: 13px; border-radius: var(--r-md); }
.thesis-card .tc-mark span:last-child { font-family: var(--mono); font-size: 11px; line-height: 14px; color: var(--text-2); letter-spacing: .02em; }
.thesis-card .tc-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.thesis-card .tc-title { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text); text-wrap: pretty; }
.thesis-card .tc-dek { font-size: 13px; line-height: 19px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.thesis-card .tc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.thesis-card .tc-kind { display: none; }
.thesis-card .tc-meta { display: flex; flex-direction: column; gap: 6px; padding-left: var(--s16); border-left: 1px solid var(--border); font-size: 12px; line-height: 16px; color: var(--muted); }
.thesis-card .tc-meta span { display: inline-flex; align-items: center; gap: 6px; }
.thesis-card .tc-meta .btn { margin-top: auto; }
@media (max-width: 1023px) { .thesis-card .tc-kind { display: inline-flex; } }
@media (max-width: 639px) {
  .thesis-card { grid-template-columns: 40px minmax(0, 1fr); gap: var(--s12); }
  .thesis-card .tc-meta { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0; border: 0; }
  .thesis-card .tc-meta .btn { display: none; }
}

/* Impact tag: reuse severity dots at sans size */
.impact { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-2); }
.impact::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--c, var(--faint)); }
.impact.high { --c: var(--danger); } .impact.med { --c: var(--warn); } .impact.low { --c: var(--muted); }

/* Thesis article */
.thesis-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s32); align-items: start; }
@media (min-width: 1100px) { .thesis-layout { grid-template-columns: minmax(0, 1fr) 340px; } .thesis-rail { position: sticky; top: 76px; } }
.thesis-main { display: flex; flex-direction: column; gap: var(--s24); min-width: 0; }
.thesis-hero { display: flex; flex-direction: column; gap: var(--s12); }
.thesis-hero h1 { font-family: var(--serif); font-size: 38px; line-height: 44px; font-weight: 500; letter-spacing: -0.015em; text-wrap: balance; max-width: 34ch; }
.thesis-hero .dek { font-family: var(--serif); font-size: 18px; line-height: 28px; color: var(--text-2); max-width: 64ch; }
.thesis-hero .meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s8) var(--s16); font-size: 12px; line-height: 16px; color: var(--muted); }
.thesis-hero .meta > span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 639px) { .thesis-hero h1 { font-size: 28px; line-height: 34px; } .thesis-hero .dek { font-size: 16px; line-height: 25px; } }
.section-nav { position: sticky; top: 56px; z-index: 4; background: var(--bg); }
.thesis-sections { display: flex; flex-direction: column; gap: var(--s16); }
.t-sec { display: flex; flex-direction: column; gap: var(--s12); padding: var(--s24); scroll-margin-top: 108px; }
.t-sec h2 { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.005em; }
.t-sec .t-prose + .t-prose { margin-top: var(--s4); }
@media (max-width: 639px) { .t-sec { padding: var(--s16); } }
.t-sec-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s16); }
@media (max-width: 767px) { .t-sec-pair { grid-template-columns: 1fr; } }
.mark-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s8); }
.mark-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--s8); font-size: 14px; line-height: 21px; color: var(--text); }
.mark-list li .icon { margin-top: 3px; width: 14px; height: 14px; color: var(--c, var(--muted)); }
.mark-list.up { --c: var(--gain); } .mark-list.down { --c: var(--loss); } .mark-list.watch { --c: var(--warn); }
.driver-list { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.driver-list > div { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); gap: var(--s16); padding: var(--s12) 0; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 21px; }
.driver-list dt { font-weight: 600; }
.driver-list dd { margin: 0; color: var(--text-2); }
@media (max-width: 639px) { .driver-list > div { grid-template-columns: 1fr; gap: 2px; } }
.num-list { margin: 0; padding: 0; list-style: none; counter-reset: n; display: flex; flex-direction: column; gap: var(--s12); }
.num-list li { counter-increment: n; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s8); font-size: 14px; line-height: 21px; }
.num-list li::before { content: counter(n); width: 22px; height: 22px; border-radius: var(--r-full); display: grid; place-items: center; font-family: var(--mono); font-size: 11px; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border-strong); }

/* Rail cards */
.thesis-rail { display: flex; flex-direction: column; gap: var(--s16); min-width: 0; }
.snap-price { display: flex; flex-direction: column; gap: 2px; }
.snap-price b { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.02em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.thesis-rail .chart-plot { height: 140px; }
.kv-list { margin: 0; display: flex; flex-direction: column; }
.kv-list > div { display: flex; align-items: center; gap: var(--s8); padding: var(--s8) 0; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 18px; }
.kv-list > div:last-child { border-bottom: 0; }
.kv-list dt { color: var(--text-2); }
.kv-list dd { margin: 0 0 0 auto; font-weight: 500; text-align: right; }
.paired-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s12); padding: var(--s12); border-radius: var(--r-md); background: var(--sunken); }
.paired-card .ticker-mark { width: 40px; height: 40px; border-radius: var(--r-md); }

/* ==========================================================================
   v2.0 — research article page + quarterly reflection
   The article reuses the thesis layout (reading column + sticky rail).
   The reflection lives inside Risk v Reward and is deliberately quiet.
   ========================================================================== */

/* Research article */
.art-main { gap: var(--s32); }
.art-measure { max-width: var(--read-max); }
.art-head { display: flex; flex-direction: column; gap: var(--s16); max-width: var(--read-max); }
.art-byline { display: flex; align-items: center; gap: var(--s12); flex-wrap: wrap; padding-top: var(--s4); }
.art-tags { display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap; padding-top: var(--s16); border-top: 1px solid var(--border); }
.in-short { margin: 0; padding: 0; list-style: none; counter-reset: n; display: grid; gap: 10px; }
.in-short li { counter-increment: n; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s8); font-size: 15px; line-height: 24px; }
.in-short li::before { content: counter(n); color: var(--muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.art-sec { display: flex; flex-direction: column; gap: var(--s16); scroll-margin-top: 76px; }
.art-sec .t-prose + .t-prose { margin-top: 0; }
.cause-list { margin: 0; padding: 0; list-style: none; counter-reset: n; display: grid; gap: 14px; max-width: var(--read-max); }
.cause-list li { counter-increment: n; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s8); font-family: var(--serif); font-size: 17px; line-height: 28px; }
.cause-list li::before { content: counter(n) ")"; color: var(--muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.cause-list b { font-family: var(--font); font-size: 14px; font-weight: 600; }
.art-fig { margin: 0; display: flex; flex-direction: column; gap: var(--s12); padding: var(--s20); }
.art-fig .r-thumb { padding: 0; background: none; }
.art-fig .r-thumb svg { height: 160px; }
.art-rows { max-width: var(--read-max); padding: var(--s4) var(--s16); }
.art-rows > div { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--s12); align-items: center; min-height: 52px; border-bottom: 1px solid var(--border); }
.art-rows > div:last-child { border-bottom: 0; }
.art-foot { display: flex; flex-direction: column; gap: var(--s16); padding-top: var(--s24); border-top: 1px solid var(--border); }
.art-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s16); padding-top: var(--s8); }
.art-next a { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s16); color: var(--text); text-decoration: none; }
.art-next .t-story { font-size: 17px; line-height: 22px; }
.art-toc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-left: 1px solid var(--border); }
.art-toc a { display: block; padding: 5px 0 5px var(--s12); margin-left: -1px; border-left: 2px solid transparent; font-size: 13px; line-height: 18px; color: var(--text-2); text-decoration: none; }
.art-toc a:hover { color: var(--text); }
.art-toc a[aria-current] { color: var(--text); font-weight: 500; border-left-color: var(--text); }
.art-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.art-tl a { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--s8); padding: 6px var(--s8); margin: 0 calc(-1 * var(--s8)); border-radius: var(--r-sm); font-size: 13px; line-height: 18px; color: var(--text-2); text-decoration: none; }
.art-tl a:hover { background: var(--fill-hover); color: var(--text); }
.art-tl a .t-code { color: var(--muted); }
.art-tl a[aria-current] { color: var(--text); font-weight: 600; }
.art-tl a[aria-current] .t-code { color: var(--accent); }

/* Reflection entry: a quiet panel at the foot of Risk v Reward, not a call to action */
.reflect-entry { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--s16); align-items: center; padding: var(--s16) var(--s20); border-radius: var(--r-md); background: var(--sunken); }
.reflect-entry .re-ico { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.reflect-entry h2 { font-size: 14px; line-height: 20px; font-weight: 600; }
.reflect-entry p { font-size: 13px; line-height: 19px; color: var(--text-2); max-width: 88ch; }
.reflect-entry .re-act { display: flex; align-items: center; gap: var(--s12); }
@media (max-width: 767px) { .reflect-entry { grid-template-columns: 32px minmax(0, 1fr); align-items: start; } .reflect-entry .re-act { grid-column: 2; } }

/* Reflection view */
.reflect-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s24); align-items: start; }
@media (min-width: 1100px) { .reflect-grid { grid-template-columns: minmax(0, 1fr) 320px; } .reflect-aside { position: sticky; top: 76px; } }
.reflect-main, .reflect-aside { display: flex; flex-direction: column; gap: var(--s16); min-width: 0; }
.reflect-q { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s12); }
.reflect-q legend { padding: 0; margin-bottom: var(--s12); display: flex; flex-direction: column; gap: var(--s4); }
.reflect-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--s8); }
.reflect-opts.is-scale { grid-template-columns: repeat(auto-fit, minmax(min(100%, 104px), 1fr)); }
.reflect-opts .choice { min-height: 44px; }
.trend { display: flex; flex-direction: column; gap: var(--s8); }
.trend-bars, .trend-axis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.trend-bars { align-items: end; height: 48px; }
.trend-bars span { height: calc(var(--v) * 9px + 3px); border-radius: 3px; background: color-mix(in srgb, var(--text) 18%, var(--surface)); }
.trend-bars span.is-now { background: var(--accent); }
.trend-axis span { text-align: center; font-size: 12px; line-height: 16px; color: var(--muted); }

/* ==========================================================================
   v2.1 — top-bar navigation (replaces the sidebar in product pages)
   One sticky bar: brand, sections, market status, search, theme, account.
   Location is neutral ink (an underline), never the accent.
   Phones keep the bottom tab bar. Breadcrumbs and page tools live in the page.
   ========================================================================== */
.shell.has-topnav { grid-template-columns: minmax(0, 1fr); }
.topnav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: var(--s8); height: 56px; padding: 0 var(--gutter); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--border); }
.topnav .brand { padding: 0; margin-right: var(--s16); color: var(--text); text-decoration: none; }
.topnav .brand:hover { text-decoration: none; }
.tn-links { display: flex; align-self: stretch; gap: var(--s4); }
.tn-links a { position: relative; display: flex; align-items: center; padding: 0 var(--s12); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-2); text-decoration: none; white-space: nowrap; transition: color var(--dur-1) var(--ease-out); }
.tn-links a:hover { color: var(--text); text-decoration: none; }
.tn-links a::after { content: ""; position: absolute; left: var(--s12); right: var(--s12); bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; transition: background-color var(--dur-1) var(--ease-out); }
.tn-links a:hover::after { background: var(--border-strong); }
.tn-links a[aria-current] { color: var(--text); }
.tn-links a[aria-current]::after { background: var(--text); }
.tn-links a:focus-visible { outline-offset: -4px; border-radius: var(--r-sm); }
.topnav .topbar-meta { display: flex; align-items: center; gap: var(--s12); font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; }
.topnav .search-trigger { margin: 0; min-width: 220px; }
.tn-avatar { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--r-full); background: none; cursor: pointer; }
.tn-avatar:hover .avatar { box-shadow: inset 0 0 0 1px var(--border-strong), 0 0 0 3px var(--fill-press); }
@media (max-width: 1279px) { .topnav .topbar-meta { display: none; } }
@media (max-width: 1100px) { .topnav .search-trigger { min-width: 0; width: var(--ctl-md); padding: 0; justify-content: center; } .topnav .search-trigger .label, .topnav .search-trigger .kbd { display: none; } }
@media (max-width: 767px) { .tn-links, .topnav [data-theme-seg] { display: none; } .topnav .brand { margin-right: auto; } }

/* In-page breadcrumbs (sub-views only) and page tools that used to sit in the top bar */
.page-crumbs { margin-bottom: calc(-1 * var(--s8)); }
.page-toolbar { display: flex; align-items: center; gap: var(--s12); flex-wrap: wrap; }
.page-toolbar .date-nav { margin-left: auto; }

/* ==========================================================================
   v2.2 — settings (moved here from design-system.html, used by settings.html)
   Section list beside the form; each section has a description column.
   Switches save on their own; fields save with one button.
   ========================================================================== */
.settings { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s32); align-items: start; }
.settings nav { display: flex; flex-direction: column; gap: 1px; position: sticky; top: 76px; }
.settings .form-section { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s24); padding: var(--s24) var(--pad); }
.settings .form-section + .form-section { border-top: 1px solid var(--border); }
.settings .form-section header p { font-size: 13px; line-height: 18px; color: var(--text-2); margin-top: var(--s4); }
.settings .fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s16); }
.settings .fields .full { grid-column: 1 / -1; }
.notif-row { display: flex; align-items: center; gap: var(--s16); padding: var(--s12) 0; border-bottom: 1px solid var(--border); }
.notif-row:last-child { border-bottom: 0; }
.notif-row .t { flex: 1 1; min-width: 0; }
.notif-row .t b { display: block; font-size: 13px; line-height: 18px; font-weight: 500; }
.notif-row .t span { font-size: 12px; line-height: 16px; color: var(--muted); }
@media (max-width: 1023px) { .settings { grid-template-columns: 1fr; } .settings nav { position: static; flex-direction: row; overflow-x: auto; } }
@media (max-width: 767px) { .settings .form-section { grid-template-columns: 1fr; gap: var(--s12); } .settings .fields { grid-template-columns: 1fr; } }
.settings .form-section { scroll-margin-top: 76px; }
.notif-group + .notif-group { margin-top: var(--s16); }
.notif-group > .t-overline { display: block; padding-bottom: var(--s4); }
.danger-zone { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }

/*!************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./styles/app.css ***!
  \************************************************************************************************************************************************************************************************************************************************************/
/* App-shell rules each prototype page carried in its own \3c style> block. */
.app-main { min-width: 0; }

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app\\fonts.ts","import":"Geist","arguments":[{"subsets":["latin"],"weight":["400","500","600"],"variable":"--font-geist"}],"variableName":"geist"} ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/f639721981034f88-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/9766a7e9e2e0ad5a-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/b66cf8e69499582a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/aa016aab0e6d1295-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/22a5144ee8d83bca-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/f639721981034f88-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/9766a7e9e2e0ad5a-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/b66cf8e69499582a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/aa016aab0e6d1295-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/22a5144ee8d83bca-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/f639721981034f88-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/9766a7e9e2e0ad5a-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/b66cf8e69499582a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/aa016aab0e6d1295-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/22a5144ee8d83bca-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Geist Fallback';src: local("Arial");ascent-override: 95.94%;descent-override: 28.16%;line-gap-override: 0.00%;size-adjust: 104.76%
}.__className_e9fcbc {font-family: 'Geist', 'Geist Fallback';font-style: normal
}.__variable_e9fcbc {--font-geist: 'Geist', 'Geist Fallback'
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app\\fonts.ts","import":"Geist_Mono","arguments":[{"subsets":["latin"],"weight":["400","500"],"variable":"--font-geist-mono"}],"variableName":"geistMono"} ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/013b72fa676f92e0-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/b9408752a0c24fb9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/65f03d54ccadf4a8-s.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/e038a29029a234f2-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/2b5b02fc7e511755-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/7d4881bb7e1bf84d-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/013b72fa676f92e0-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/b9408752a0c24fb9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/65f03d54ccadf4a8-s.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/e038a29029a234f2-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/2b5b02fc7e511755-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/7d4881bb7e1bf84d-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Geist Mono Fallback';src: local("Arial");ascent-override: 74.67%;descent-override: 21.92%;line-gap-override: 0.00%;size-adjust: 134.59%
}.__className_88b4eb {font-family: 'Geist Mono', 'Geist Mono Fallback';font-style: normal
}.__variable_88b4eb {--font-geist-mono: 'Geist Mono', 'Geist Mono Fallback'
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app\\fonts.ts","import":"Newsreader","arguments":[{"subsets":["latin"],"style":["normal","italic"],"axes":["opsz"],"variable":"--font-newsreader"}],"variableName":"newsreader"} ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(/_next/static/media/fc61cfb200d549a5-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(/_next/static/media/fe6c4b8cc116014d-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(/_next/static/media/8edf6d3506a17285-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/_next/static/media/b5963afcf1479527-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/_next/static/media/5ed7d4ff5e59016d-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/_next/static/media/84adbee2f2a7cb50-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Newsreader Fallback';src: local("Times New Roman");ascent-override: 69.68%;descent-override: 25.12%;line-gap-override: 0.00%;size-adjust: 105.48%
}.__className_a4d3ee {font-family: 'Newsreader', 'Newsreader Fallback'
}.__variable_a4d3ee {--font-newsreader: 'Newsreader', 'Newsreader Fallback'
}