:root {
  /* ═══════════════════════════════════════════════
     TIER 1 — PRIMITIVE TOKENS
     Raw values. Named by what they ARE, not what they DO.
     Never used directly in components.
     ═══════════════════════════════════════════════ */

  /* Surface scale (light → dark) */
  --color-white:    #FFFEFC;
  --color-white-1:  #FEFDF9;
  --color-white-2:  #FCFAF7;
  --color-white-3:  #FAF7F2;
  --color-white-4:  #F8F4ED;
  --color-white-5:  #F5F0E8;
  --color-paper:    #F5F0E8;
  --color-paper-2:  #ECE7DD;
  --color-paper-3:  #E1DCD1;
  --color-rule:     #D2C9BC;

  /* Ink scale (dark → light) */
  --color-ink:       #0C0B09;
  --color-ink-mid:   #36332C;
  --color-ink-light: #66605A;
  --color-ink-faint: #9E9890;

  /* Red family — primary brand */
  --color-red-50:  #FCF6F3;
  --color-red-100: #F9ECE9;
  --color-red-200: #F1D5D1;
  --color-red-300: #E3ACA6;
  --color-red-400: #CD6F66;
  --color-red-500: #B83225;
  --color-red-600: #9C2A1F;
  --color-red-700: #84241B;
  --color-red-800: #6B1D15;
  --color-red-900: #531611;

  /* Navy family — primary brand */
  --color-navy-50:  #F8F8F7;
  --color-navy-100: #EDEEEF;
  --color-navy-200: #D6DBDF;
  --color-navy-300: #AFB9C4;
  --color-navy-400: #6A7F94;
  --color-navy-500: #1A3A5C;
  --color-navy-600: #16314E;
  --color-navy-700: #132A42;
  --color-navy-800: #0F2235;
  --color-navy-900: #0C1A29;

  /* Supporting accents (single values — scale when needed) */
  --color-gold:    #8A6E0A;
  --color-green:   #1A5230;
  --color-teal:    #186060;
  --color-purple:  #503890;

  /* Dark surface */
  --color-ask-bg:  #16192A;
  --color-blue-light: #7eb8e0;  /* accent text on dark surfaces — brand, citations */

  /* Font families */
  --font-display: Georgia, 'Times New Roman', serif;
  --font-prose:   Georgia, 'Times New Roman', serif;
  --font-sans:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'Inconsolata', 'Courier New', monospace;

  /* Type size scale */
  --size-hed-xl:    32px;
  --size-hed-lg:    22px;
  --size-hed-md:    19px;
  --size-hed-sm:    17px;
  --size-body:      16px;
  --size-body-sm:   15px;
  --size-ui:        14px;
  --size-ui-sm:     13px;
  --size-caption:   13px;
  --size-caption-sm:12px;
  --size-meta:      12px;
  --size-label:     11px;
  --size-nano:      10px;
  --size-micro:     var(--size-nano); /* alias — resolved duplicate token */

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

  /* Line heights */
  --lh-tight: 1.12;
  --lh-hed:   1.22;
  --lh-snug:  1.3;
  --lh-ui:    1.5;
  --lh-body:  1.7;
  --lh-prose: 1.88;

  /* Letter spacing */
  --tracking-tight:   1px;
  --tracking-normal:  1.5px;
  --tracking-wide:    2px;
  --tracking-label:   3px;
  --tracking-display: 4px;

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

  /* Radius */
  --radius-sm:   4px;
  --radius:      6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-full: 50%;

  /* Icon sizing */
  --size-icon-sm: 16px;
  --size-icon:    20px;
  --size-icon-lg: 24px;

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(12,11,9,0.04);
  --shadow-sm:  0 1px 3px rgba(12,11,9,0.06), 0 1px 2px rgba(12,11,9,0.04);
  --shadow:     0 4px 16px rgba(12,11,9,0.07), 0 1px 3px rgba(12,11,9,0.05);
  --shadow-lg:  0 12px 40px rgba(12,11,9,0.12), 0 4px 12px rgba(12,11,9,0.06);
  --shadow-xl:  0 20px 60px rgba(12,11,9,0.16), 0 8px 20px rgba(12,11,9,0.08);

  /* Motion */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   0.15s;
  --duration-normal: 0.25s;
  --duration-slow:   0.4s;

  /* ═══════════════════════════════════════════════
     TIER 2 — SEMANTIC TOKENS
     Named by what they DO. Reference primitives only.
     This is the layer components use directly.
     ═══════════════════════════════════════════════ */

  /* Backgrounds */
  --bg-page:       var(--color-paper);
  --bg-card:       var(--color-white);
  --bg-card-read:  var(--color-white-3);
  --bg-recessed:   var(--color-paper-2);
  --bg-dark:       var(--color-ink);
  --bg-ask:        var(--color-ask-bg);
  --bg-red-tint:   var(--color-red-50);
  --bg-navy-tint:  var(--color-navy-50);
  --bg-gold-tint:  rgba(138,110,10,.04);
  --bg-green-tint: rgba(26,82,48,.06);

  /* Text */
  --text-primary:       var(--color-ink);
  --text-secondary:     var(--color-ink-mid);
  --text-tertiary:      var(--color-ink-light);
  --text-muted:         var(--color-ink-faint);
  --text-on-dark:       var(--color-white);
  --text-on-dark-hi:    rgba(246,241,233,.8);
  --text-on-dark-mid:   rgba(246,241,233,.6);
  --text-on-dark-muted: rgba(246,241,233,.4);
  --text-on-dark-faint: rgba(246,241,233,.2);
  --text-on-dark-accent:var(--color-blue-light); /* brand italic, dark-surface citations */
  --border-on-dark:     rgba(246,241,233,.12);
  --bg-on-dark-hover:   rgba(246,241,233,.06);

  /* Ask surface — white alpha scale on dark blue (#16192A) */
  --ask-text:         rgba(255,255,255,.85);
  --ask-text-mid:     rgba(255,255,255,.65);
  --ask-text-muted:   rgba(255,255,255,.4);
  --ask-text-faint:   rgba(255,255,255,.2);
  --ask-border:       rgba(255,255,255,.14);
  --ask-border-subtle:rgba(255,255,255,.08);
  --ask-bg-hover:     rgba(255,255,255,.06);
  --ask-bg-active:    rgba(255,255,255,.1);
  --ask-bg-input:     rgba(255,255,255,.05);
  --ask-overlay:      rgba(12,11,9,.76);

  /* Borders */
  --border-default: var(--color-rule);
  --border-subtle:  var(--color-paper-2);

  /* Interactive */
  --interactive:       var(--color-navy-500);
  --interactive-hover: var(--color-navy-700);
  --interactive-bg:    var(--color-navy-50);
  --interactive-border:var(--color-navy-200);

  /* Status */
  --status-breaking:    var(--color-red-500);
  --status-updated:     var(--color-navy-500);
  --status-revised:     var(--color-gold);
  --status-success:     var(--color-green);

  /* Coverage bar */
  --color-blue-600:    #2563eb;   /* Tier 1 — coverage left */
  --color-red-ext-500:  #dc2626;   /* Tier 1 — coverage right (distinct from brand red) */
  --color-green-50:     #d4edda;   /* Tier 1 — market up bg */
  --color-green-900:    #155724;   /* Tier 1 — market up text */
  --cov-left:   var(--color-blue-600);
  --cov-center: var(--color-navy-500);
  --cov-right:  var(--color-red-ext-500);

  /* Market pills */
  --market-up-bg:   var(--color-green-50);
  --market-up-text: var(--color-green-900);
  --market-dn-bg:   var(--color-red-100);
  --market-dn-text: var(--color-red-800);

  /* Elevation (semantic shadows) */
  --elevation-flat:    var(--shadow-xs);
  --elevation-card:    var(--shadow-sm);
  --elevation-raised:  var(--shadow);
  --elevation-overlay: var(--shadow-xl);

  /* Radius (semantic) */
  --radius-badge: var(--radius-sm);
  --radius-card:  var(--radius);
  --radius-input: var(--radius-lg);
  --radius-btn:     10px;         /* buttons — same value, correct semantics */
  --radius-modal: var(--radius-lg);

  /* Layout */
  --measure-prose:      64ch;
  --layout-page-max:    1220px;
  --layout-modal-wide:  760px;
  --layout-modal-narrow:600px;
  --layout-chat-column: 780px;
  --layout-sidebar-min: 310px;

  /* Transitions (semantic) */
  --transition-hover:   all var(--duration-fast) var(--ease-out);
  --transition-ui:      all var(--duration-normal) var(--ease-out);
  --transition-overlay: opacity var(--duration-normal) var(--ease-in-out);
  --transition-expand:  max-height var(--duration-slow) var(--ease-out);

  /* Z-index */
  --z-base:         0;
  --z-sticky:       10;
  --z-header:       50;
  --z-masthead:     90;           /* masthead sits above since banner */
  --z-notification: 85;
  --z-overlay:      200;

  /* Typography — component-specific (Tier 2) */
  --size-card-body: 14.5px;  /* card summary + snap body text */
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body {
  background:var(--color-paper);
  color:var(--color-ink);
  font-family:var(--font-sans);
  font-size:var(--size-ui);
  line-height:var(--lh-ui);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* Focus ring — accessible, visible, on-brand */
:focus-visible{outline:2px solid var(--color-navy-500);outline-offset:2px;border-radius:var(--radius-sm);}
/* Focus ring on dark surfaces — light outline for visibility */
.masthead :focus-visible,
.bar-dark :focus-visible,
.live-update-pill:focus-visible{
  outline-color:var(--color-white);
}
/* Focus ring inside overflow:hidden containers — use inset shadow instead of outline */
.sb-block :focus-visible,
.story-card:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 2px var(--color-navy-500);
}
/* Since banner: chips and buttons inside overflow:hidden — white inset ring */
.since-banner :focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 2px var(--color-white);
}
::selection{background:var(--color-navy-200);color:var(--color-ink);}
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--color-rule);border-radius:3px;}

/* ══════════════════════════════════════════
   UTILITY CLASSES
   Shared patterns used across multiple components
   ══════════════════════════════════════════ */

/* Label: mono uppercase tracking — the most repeated pattern in the system */
.label-mono{font-family:var(--font-mono);font-size:var(--size-nano);letter-spacing:var(--tracking-label);text-transform:uppercase;}
/* Chat error state — Track C */
.td-chat__error{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  background:var(--color-red-100);border:1px solid var(--color-red-200);border-radius:var(--radius);
  padding:var(--space-3) var(--space-4);font-family:var(--font-sans);font-size:var(--size-meta);color:var(--color-red-700);}
.td-chat--ask .td-chat__error,.td-chat--dark .td-chat__error{background:rgba(220,38,38,.12);border-color:rgba(220,38,38,.3);color:var(--color-red-200);}
.td-chat__retry{flex-shrink:0;}
/* Image fallback — replaces broken thumbnails/heroes with styled placeholder */
.img-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:80px;
  background:linear-gradient(135deg,var(--color-paper-2),var(--color-paper-3));color:var(--color-ink-faint);border-radius:inherit;}
.img-fallback .icon{width:22px;height:22px;opacity:.55;}
.img-fallback{flex-direction:column;gap:4px;}
.img-fallback-label{font-family:var(--font-mono);font-size:var(--size-nano);letter-spacing:2px;text-transform:uppercase;opacity:.65;}
.img-fallback--markets{background:linear-gradient(135deg,var(--color-green-50),var(--color-paper-2));color:var(--color-green-900);}
.img-fallback--tech{background:linear-gradient(135deg,var(--color-navy-100),var(--color-paper-2));color:var(--color-navy-800);}
.img-fallback--world{background:linear-gradient(135deg,var(--color-red-100),var(--color-paper-2));color:var(--color-red-700);}
.img-fallback--politics{background:linear-gradient(135deg,var(--color-paper-3),var(--color-paper-2));color:var(--color-ink-mid);}
.img-fallback--culture{background:linear-gradient(135deg,var(--color-gold-tint,var(--color-paper-3)),var(--color-paper-2));color:var(--color-ink-mid);}
.story-hero-img-wrap .img-fallback{min-height:120px;}
/* Live edition button states */
.masthead .btn.is-loading{opacity:.6;pointer-events:none;}
.live-edition-note{font-family:var(--font-mono);font-size:var(--size-nano);color:var(--color-ink-faint);letter-spacing:1px;}
.cov-note{font-family:var(--font-mono);font-size:var(--size-micro);color:var(--color-ink-faint);padding:var(--space-2) 0;}
.cov-caption{font-family:var(--font-mono);font-size:var(--size-micro);color:var(--color-ink-faint);padding-top:var(--space-1);}
.ticker-symbol{font-family:var(--font-mono);font-size:var(--size-micro);color:var(--color-ink-faint);font-weight:400;margin-left:3px;}
.updates-container{max-width:var(--measure-prose);margin:var(--space-5) auto;}
.label-mono-sm{font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--tracking-normal);text-transform:uppercase;}
/* Prose container: Georgia, 64ch measure, centered */
/* Icons: Lucide SVG icons sized via tokens */
.icon{width:var(--size-icon);height:var(--size-icon);stroke:currentColor;stroke-width:1.75;fill:none;flex-shrink:0;vertical-align:middle;}
.icon-xs{width:11px;height:11px;vertical-align:-1px;}
.icon-sm{width:var(--size-icon-sm);height:var(--size-icon-sm);}
.icon-lg{width:var(--size-icon-lg);height:var(--size-icon-lg);}
.icon-muted{color:var(--color-ink-faint);}

/* ── ACCESSIBILITY UTILITIES ── */
/* Screen reader only — visually hidden, accessible to assistive tech */
.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;
}
/* Skip navigation link — hidden until focused via Tab */
.skip-link{
  position:fixed;top:-100%;left:50%;transform:translateX(-50%);
  z-index:999;
  background:var(--color-ink);color:var(--color-white);
  font-family:var(--font-sans);font-size:var(--size-ui);font-weight:var(--weight-semibold);
  padding:var(--space-3) var(--space-6);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:var(--elevation-raised);
  text-decoration:none;
  transition:top var(--duration-fast) var(--ease-out);
}
.skip-link:focus{top:0;outline:none;}

/* ── BUTTON SYSTEM — base + type + modifier ── */
/* Base reset — all buttons */
.btn{
  font-family:var(--font-sans);font-weight:var(--weight-medium);
  border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--space-2);transition:var(--transition-hover);
  line-height:1;-webkit-font-smoothing:antialiased;
  text-decoration:none;
}
.btn:disabled{opacity:0.4;cursor:not-allowed;transform:none !important;}

/* Type: Primary — filled, high emphasis */
.btn-primary{
  background:var(--interactive);color:var(--text-on-dark);
  border-radius:var(--radius-btn);
  padding:var(--space-2) var(--space-4);
  font-size:var(--size-ui);
}
.btn-primary:hover{background:var(--interactive-hover);transform:scale(1.04);}
.btn-primary:disabled{background:var(--color-rule);}
.btn-primary.btn-danger{background:var(--color-red-500);}
.btn-primary.btn-danger:hover{background:var(--color-red-700);}

/* Type: Ghost — transparent, low emphasis */
.btn-ghost{
  background:transparent;border:1px solid var(--color-rule);
  color:var(--text-secondary);border-radius:var(--radius-card);
  padding:var(--space-2) var(--space-3);font-size:var(--size-ui-sm);
}
.btn-ghost:hover{background:var(--color-paper);color:var(--text-primary);}

/* Ghost on dark surfaces */
.btn-ghost-dark{
  background:transparent;border:1px solid var(--border-on-dark);
  color:var(--text-on-dark-muted);border-radius:var(--radius-sm);
  padding:var(--space-1) var(--space-3);font-size:var(--size-label);
  letter-spacing:var(--tracking-normal);
}
.btn-ghost-dark:hover{background:var(--bg-on-dark-hover);color:var(--text-on-dark-mid);border-color:var(--text-on-dark-faint);}

/* Type: Chip — small, pill-shaped */
.btn-chip{
  background:var(--color-navy-50);border:1px solid var(--color-navy-200);
  color:var(--interactive);border-radius:var(--radius-input);
  padding:var(--space-2) var(--space-3);font-size:var(--size-caption);
  line-height:var(--lh-snug);
}
.btn-chip:hover{background:var(--color-navy-100);border-color:var(--color-navy-200);transform:translateY(-1px);}

/* Chip on dark surfaces */
.btn-chip-dark{
  background:var(--border-on-dark);border:1px solid var(--text-on-dark-faint);
  color:var(--text-on-dark-mid);border-radius:var(--radius-input);
  padding:var(--space-1) var(--space-3);font-size:var(--size-meta);
  line-height:var(--lh-snug);
}
.btn-chip-dark:hover{background:var(--text-on-dark-faint);color:var(--text-on-dark);}

/* Icon button sizing */
.btn-icon{width:34px;height:34px;padding:0;border-radius:var(--radius-input);}
.btn-icon .icon{width:var(--size-icon);height:var(--size-icon);}
.btn-icon-sm{width:28px;height:28px;padding:0;border-radius:var(--radius-card);}
.btn-icon-sm .icon{width:var(--size-icon-sm);height:var(--size-icon-sm);}
.btn-icon-lg .icon{width:var(--size-icon-lg);height:var(--size-icon-lg);}
/* ══════════════════════════════════════════
   TD-CHAT — unified chat component
   One component, three placements: ask surface, story dossier, snap modal.
   ══════════════════════════════════════════ */
.td-chat{border-top:1px solid var(--border-default);margin-top:var(--space-6);}
.td-chat__label{
  padding:var(--space-6) 0 var(--space-3);
  color:var(--text-muted);
}
.td-chat__hints{
  display:flex;flex-wrap:wrap;gap:var(--space-2);
  padding:0 0 var(--space-4);
}
.td-chat__chip{
  font-family:var(--font-sans);font-size:var(--size-ui-sm);
  color:var(--text-secondary);
  background:var(--color-paper);
  border:1px solid var(--border-default);
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-input);
  cursor:pointer;transition:var(--transition-hover);
  line-height:var(--lh-snug);
}
.td-chat__chip:hover{background:var(--color-paper-2);border-color:var(--color-rule);transform:translateY(-1px);}
.td-chat__msgs{
  max-height:0;overflow-y:auto;overflow-x:hidden;
  transition:max-height var(--duration-slow) var(--ease-out);
}
.td-chat__msgs.has-content{max-height:400px;padding-top:var(--space-5);padding-bottom:var(--space-5);}
.td-chat__msgs::-webkit-scrollbar{width:4px;}
.td-chat__msgs::-webkit-scrollbar-thumb{background:var(--color-rule);border-radius:2px;}
.td-chat__input-row{
  display:flex;align-items:center;gap:var(--space-2);
  background:var(--color-paper);
  border:1px solid var(--color-rule);border-radius:var(--radius-input);
  transition:var(--transition-hover);
}
.td-chat__input-row:focus-within{border-color:var(--interactive);box-shadow:0 0 0 3px var(--color-navy-50);}
.td-chat__input-row .td-chat__input{
  flex:1;background:none;
  border:none;border-radius:0;
  padding:var(--space-2) var(--space-4);
  font-family:var(--font-sans);font-size:var(--size-ui);
  color:var(--text-primary);
  outline:none;
}
.td-chat__input::placeholder{color:var(--text-muted);}
/* Send button inside input — smaller, rounded, right-aligned */
/* Send button inside input — smaller, nested corners one step down from container */
.td-chat__input-row .btn-icon{
  width:26px;height:26px;
  margin-right:var(--space-1);
  flex-shrink:0;
  border-radius:var(--radius);
}
.td-chat__input-row .btn-icon .icon{width:14px;height:14px;}

/* Modifier: ask surface — no border-top, no margin, lives inside collapsible drawer */
.td-chat--ask{border-top:none;margin-top:0;}
.td-chat--ask .td-chat__hints{padding-bottom:var(--space-3);}
/* Ask messages — generous height so responses have room to breathe (Claude-like scroll) */
.td-chat__msgs--ask{
  display:flex;flex-direction:column;
  scrollbar-width:thin;
}
.td-chat__msgs--ask.has-content{
  max-height:60vh;
  padding:var(--space-5) var(--space-2) var(--space-10);
}
/* Ask input row — width matches header content area (max-width minus header side padding) */
.td-chat__input-row--surface{
  max-width:calc(var(--layout-chat-column) - 2 * var(--space-6));
  margin:0 auto var(--space-3);
}

/* Shared mono+uppercase — now handled by .label-mono utility class */

/* ══════════════════════════════════════════
   BASE COMPONENTS
   Shared structural patterns — extend with modifiers
   ══════════════════════════════════════════ */

/* Dark header bar — base for sidebar blocks, modals, snap modals */
.bar-dark{background:var(--color-ink);display:flex;align-items:center;justify-content:space-between;}
.bar-dark-label{font-family:var(--font-mono);font-size:var(--size-nano);letter-spacing:3px;text-transform:uppercase;color:var(--text-on-dark-muted);}
.bar-dark-note{font-family:var(--font-mono);font-size:var(--size-nano);color:var(--color-red-500);}

/* Modal overlay — base for story modal and snap modal */
.overlay{position:fixed;inset:0;z-index:200;background:var(--ask-overlay);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:flex-start;justify-content:center;padding:var(--space-8) var(--space-5);overflow-y:auto;opacity:0;pointer-events:none;transition:opacity var(--duration-normal) var(--ease-in-out);}
.overlay.open{opacity:1;pointer-events:all;}
.overlay-box{background:var(--color-white);width:100%;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-rule);transform:translateY(14px) scale(0.98);transition:transform var(--duration-slow) var(--ease-out);box-shadow:var(--shadow-xl);margin:auto;}
.overlay.open .overlay-box{transform:translateY(0) scale(1);}
.overlay-box--wide{max-width:760px;}
.overlay-box--narrow{max-width:600px;max-height:88vh;overflow-y:auto;}
.overlay--center{align-items:center;padding:var(--space-6);}

/* ── MASTHEAD ── */
.masthead{background:var(--color-ink);position:sticky;top:0;z-index:var(--z-masthead);border-bottom:3px solid var(--color-red-500);}
.mast-inner{max-width:1220px;margin:0 auto;padding:0 var(--space-8);height:56px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);}
.brand{font-family:var(--font-display);font-size:var(--size-hed-lg);font-weight:900;color:var(--color-paper);letter-spacing:-0.5px;cursor:pointer;transition:opacity var(--duration-fast);}
.brand:hover{opacity:.85;}
.brand span{font-style:italic;color:var(--text-on-dark-accent);}
.mast-nav{display:flex;gap:2px;}
.mnav-btn{font-size:var(--size-label);letter-spacing:2px;color:var(--text-on-dark-muted);padding:6px 13px;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration-fast);background:none;border:none;}
.mnav-btn:hover,.mnav-btn.active{color:var(--color-paper);background:var(--bg-on-dark-hover);}
.mast-right{display:flex;align-items:center;gap:var(--space-3);}
.live-dot{width:7px;height:7px;background:var(--color-red-500);border-radius:50%;animation:blink 2s ease infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.4;}}
.live-label{font-family:var(--font-mono);font-size:var(--size-label);color:var(--text-on-dark-faint);letter-spacing:2px;}
#clock{font-family:var(--font-mono);font-size:var(--size-meta);color:var(--text-on-dark-faint);letter-spacing:1px;}

/* ── SINCE BANNER ── */
.since-banner{background:var(--color-navy-500);overflow:hidden;max-height:52px;transition:max-height var(--duration-slow) var(--ease-in-out),opacity var(--duration-slow);}
.since-banner.hidden{max-height:0;opacity:0;}
.since-in{max-width:1220px;margin:0 auto;padding:0 var(--space-8);height:52px;display:flex;align-items:center;gap:var(--space-4);}
.since-badge{font-size:var(--size-nano);letter-spacing:3px;background:var(--color-red-500);color:var(--text-on-dark);padding:3px 9px;border-radius:var(--radius-sm);flex-shrink:0;}
.since-text{font-size:var(--size-ui-sm);font-weight:500;color:var(--text-on-dark-hi);flex-shrink:0;white-space:nowrap;}
.since-text strong{color:var(--text-on-dark);}
.since-chips{display:flex;gap:6px;overflow:hidden;flex:1;min-width:0;}
.schip{font-size:var(--size-meta);background:var(--border-on-dark);border:1px solid var(--text-on-dark-faint);color:var(--text-on-dark-mid);padding:3px 10px;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration-fast);white-space:nowrap;flex-shrink:0;}
.schip:hover{background:var(--text-on-dark-faint);color:var(--text-on-dark);}
.since-more{font-size:var(--size-meta);color:var(--text-on-dark-muted);white-space:nowrap;flex-shrink:0;}
.since-actions{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;margin-left:auto;}
/* Extends .btn base — only the surface-specific overrides live here */
.btn-alert{
  background:var(--color-red-500);color:var(--text-on-dark);
  border-radius:var(--radius-sm);
  font-size:var(--size-meta);font-weight:600;
  padding:4px 10px;white-space:nowrap;
}
.btn-alert:hover{background:var(--color-red-700);}

/* ── ASK SURFACE — modern sheet/drawer pattern ── */
.ask-surface{
  background:var(--bg-card);
  border-bottom:1.5px solid var(--border-default);
}

/* Header row: compact, modern */
.ask-surface-header{
  max-width:var(--layout-chat-column);margin:0 auto;padding:var(--space-3) var(--space-6) var(--space-3);
  display:flex;align-items:center;justify-content:space-between;
}
.ask-label-text{
  font-family:var(--font-sans);font-weight:600;
  font-size:var(--size-ui);color:var(--text-primary);white-space:nowrap;
}
.ask-label-sub{
  font-size:var(--size-meta);
  letter-spacing:1.5px;
  color:var(--text-muted);margin-top:2px;
}

/* Expand/collapse toggle — icon button in the header row */
.ask-toggle{
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--color-rule);
  border-radius:var(--radius-sm);
  background:var(--color-paper);
  color:var(--color-ink-faint);
  cursor:pointer;
  transition:var(--transition-hover);
  flex-shrink:0;
}
.ask-toggle:hover{background:var(--color-paper-2);color:var(--color-ink-light);border-color:var(--color-paper-3);}
.ask-toggle .icon{width:14px;height:14px;transition:transform var(--duration-normal) var(--ease-out);}
.ask-drawer.expanded .ask-toggle .icon{transform:rotate(180deg);}

/* Conversation area — smooth sheet expand */
.ask-drawer-convo{
  max-height:0;overflow:hidden;
  transition:max-height var(--duration-slow) var(--ease-out);
}
.ask-drawer.expanded .ask-drawer-convo{max-height:60vh;overflow:visible;}
.ask-drawer-convo-inner{background:var(--bg-card);border-radius:var(--radius-lg);
  max-width:var(--layout-chat-column);margin:0 auto;padding:var(--space-3) var(--space-6) var(--space-2);
}

/* ── MAIN LAYOUT ── */
.page{max-width:1220px;margin:var(--space-5) auto 0;padding:var(--space-5) var(--space-8) 80px;display:grid;grid-template-columns:1fr 310px;gap:var(--space-6);align-items:start;}

/* ── SECTION LABELS ── */
.sec-head{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4);}
.sec-label{font-size:var(--size-label);letter-spacing:4px;color:var(--color-red-500);white-space:nowrap;}
.sec-rule{flex:1;height:1px;background:var(--color-rule);}
.sec-sub{font-family:var(--font-mono);font-size:var(--size-label);color:var(--color-ink-faint);}

/* ── DAILY INTRO ── */
.daily-intro{
  background:var(--color-white);border:1px solid var(--color-rule);border-radius:var(--radius);
  padding:var(--space-6) var(--space-6);margin-bottom:var(--space-5);position:relative;overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.daily-intro::before{
  content:'';position:absolute;top:0;left:0;width:4px;height:100%;
  background:linear-gradient(to bottom,var(--color-red-500),var(--color-gold));
}
.intro-content{
  max-width:var(--measure-prose);
  margin:0 auto;
}
.intro-date{
  font-size:var(--size-label);
  letter-spacing:3px;
  color:var(--color-ink-faint);margin-bottom:var(--space-3);
}
.intro-opener{
  font-family:var(--font-display);font-size:var(--size-hed-sm);font-weight:700;
  font-style:italic;color:var(--color-ink);margin-bottom:var(--space-4);line-height:1.4;
}
.intro-body{
  font-family:var(--font-sans);font-size:var(--size-body-sm);
  color:var(--color-ink-mid);line-height:1.82;
}
.intro-body p{margin-bottom:var(--space-4);}
.intro-body p:last-child{margin-bottom:0;}
.intro-body strong{color:var(--color-ink);font-weight:600;}
.market-line{
  margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--color-rule);
  font-family:var(--font-sans);font-size:var(--size-ui);color:var(--color-ink-mid);line-height:1.78;
}
.market-line strong{color:var(--color-ink);font-weight:600;}

/* ── STORY CARDS ── */
.stories-list{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-5);}
.story-card{background:var(--color-white);border:1px solid var(--color-rule);border-radius:var(--radius);padding:var(--space-5) var(--space-6);cursor:pointer;transition:all var(--duration-normal) var(--ease-out);position:relative;overflow:hidden;box-shadow:var(--shadow-sm);}
.story-card:hover{box-shadow:var(--elevation-raised);transform:translateY(-2px);border-color:var(--color-paper-3);}
.story-card::after{content:'';position:absolute;left:0;top:0;width:3px;height:0;transition:height var(--duration-normal) var(--ease-out);background:var(--color-red-500);}
.story-card:hover::after{height:100%;}
/* Top row: badge metadata (subtle) + timestamp */
.card-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-2);}
.card-badges{display:flex;align-items:center;gap:0;}
/* Badges = colored text only. No background. No pill. Headline dominates. */
.badge{
  font-size:var(--size-nano);
  letter-spacing:2px;
  font-weight:600;
  padding:0;background:none;border:none;border-radius:0;
}
.badge+.badge{margin-left:9px;padding-left:9px;border-left:1px solid var(--color-rule);}
.b-markets{color:var(--color-green);}
.b-tech{color:var(--color-purple);}
.b-world{color:var(--color-teal);}
.b-politics{color:var(--color-gold);}
.b-culture{color:var(--color-red-500);}
.b-breaking{color:var(--color-red-500);}
.b-breaking::before{content:'● ';font-size:var(--size-micro);animation:blink 2s infinite;vertical-align:middle;}
.b-new{color:var(--color-navy-500);}
.card-time{font-family:var(--font-mono);font-size:var(--size-meta);color:var(--color-ink-faint);white-space:nowrap;flex-shrink:0;}
/* Status labels on card time */
.card-time .status-developing{color:var(--color-red-500);font-weight:600;}
.card-time .status-closed{color:var(--color-ink-faint);}
/* Card status badge — unified "New" / "Read" / "Updated" state
   Matches the since-banner "New" badge for visual continuity */
.card-status{
  font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:1.5px;
  text-transform:uppercase;font-weight:600;
  padding:2px 7px;border-radius:var(--radius-sm);
  flex-shrink:0;line-height:1.4;
  margin-right:var(--space-2);
}
.card-status--new{
  background:var(--color-red-500);color:var(--color-white);
}
.card-status--read{
  background:var(--color-paper-2);color:var(--color-ink-faint);
}
.card-status--updated{
  background:var(--color-navy-100);color:var(--color-navy-500);
}
/* Read state — subtle dim, still clearly a card */
.story-card.is-read{
  background:var(--bg-card-read);
  box-shadow:var(--elevation-flat);
}
.story-card.is-read .card-thumb{opacity:.85;}
.story-card.is-read:hover{
  background:var(--color-white);
  box-shadow:var(--elevation-raised);
}
/* A card that's read AND has an update gets its white bg back */
.story-card.is-read.has-update{background:var(--color-white);box-shadow:var(--shadow-sm);}
.story-card.is-read.has-update h3{color:var(--color-ink);}
.story-card.is-read.has-update p{color:var(--color-ink-light);}
/* Intro timestamp */
.intro-timestamp{
  font-family:var(--font-mono);font-size:var(--size-label);
  color:var(--color-ink-faint);letter-spacing:1px;
  margin-top:var(--space-4);padding-top:var(--space-3);
  border-top:1px solid var(--color-rule);
}

/* Card body: text left, thumb right */
.card-body-row{display:grid;grid-template-columns:1fr auto;gap:var(--space-4);align-items:start;}
/* HEADLINE: dominant — first thing the eye lands on */
.story-card h3{
  font-family:var(--font-display);
  font-size:var(--size-hed-lg);font-weight:700;
  line-height:1.16;margin-bottom:var(--space-3);
  color:var(--color-ink);letter-spacing:-.4px;
}
/* BODY: DM Sans for screen, generous size */
.story-card p{
  font-family:var(--font-sans);
  font-size:var(--size-card-body);color:var(--color-ink-light);
  line-height:var(--lh-body);margin-bottom:var(--space-3);
}
.card-thumb{
  width:90px;height:70px;
  border-radius:var(--radius-sm);overflow:hidden;
  flex-shrink:0;background:var(--color-paper-2);margin-top:3px;
}
.card-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--duration-slow) var(--ease-out);}
.story-card:hover .card-thumb img{transform:scale(1.06);}
.card-foot{display:flex;align-items:center;justify-content:space-between;}
.card-sources{font-family:var(--font-mono);font-size:var(--size-meta);color:var(--color-ink-faint);}
.card-sources span{color:var(--color-navy-500);font-weight:600;}
.card-more{font-size:var(--size-meta);letter-spacing:2px;color:var(--color-navy-500);opacity:0;transform:translateX(-4px);transition:opacity var(--duration-fast),transform var(--duration-fast);}
.story-card:hover .card-more{opacity:1;transform:translateX(0);}
/* v02.05: .cite is the NON-clickable citation (cards, briefing, spotlight) —
   it renders in the metadata color so it never masquerades as a link.
   Navy is reserved for .fn, the clickable numbered superscripts. */
.cite{font-family:var(--font-mono);font-size:var(--size-label);color:var(--color-ink-faint);vertical-align:super;font-weight:600;}

/* ── SIDEBAR — STATIC ── */
.sidebar{display:flex;flex-direction:column;gap:var(--space-4);}
.sb-block{background:var(--color-white);border:1px solid var(--color-rule);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow var(--duration-normal);}
.sb-block:hover{box-shadow:var(--elevation-raised);}
/* sb-head extends .bar-dark in HTML */
.sb-block .bar-dark{padding:var(--space-3) var(--space-4);}

/* ── MARKETS TABLE ── */
.mkt-table{width:100%;border-collapse:collapse;}
.mkt-table tr{border-bottom:1px solid var(--color-paper-2);cursor:default;transition:background var(--duration-fast);}
.mkt-table tr:hover{background:var(--color-paper);}
.mkt-table tr:last-child{border-bottom:none;}
.mkt-table td{padding:var(--space-3) var(--space-4);vertical-align:middle;}
.mkt-arrow{font-size:var(--size-meta);width:18px;text-align:center;}
.arrow-up{color:var(--color-green);}
.arrow-dn{color:var(--color-red-500);}
.mkt-name-cell{font-family:var(--font-sans);font-size:var(--size-ui-sm);font-weight:600;color:var(--color-ink);}
.mkt-val-cell{font-family:var(--font-mono);font-size:var(--size-caption);color:var(--color-ink-mid);text-align:right;}
.mkt-chg-cell{text-align:right;padding-right:var(--space-5);}
.chg-pill{font-family:var(--font-mono);font-size:var(--size-meta);font-weight:600;padding:3px 10px;border-radius:20px;display:inline-block;white-space:nowrap;}
.chg-up{background:var(--market-up-bg);color:var(--market-up-text);}
.chg-dn{background:var(--market-dn-bg);color:var(--market-dn-text);}
.mkt-footer{padding:var(--space-2) var(--space-4);font-family:var(--font-mono);font-size:var(--size-label);color:var(--color-ink-faint);border-top:1px solid var(--color-paper-2);line-height:1.4;}
/* Spotlight sub-section */
.mkt-spotlight{border-top:2px solid var(--color-paper-3);}
.mkt-spotlight-label{padding:var(--space-1) var(--space-4) 2px;font-size:var(--size-nano);letter-spacing:3px;color:var(--color-gold);}
.mkt-spotlight-note{padding:6px var(--space-4) var(--space-3);font-size:var(--size-caption-sm);color:var(--color-ink-light);line-height:1.5;border-top:1px solid var(--color-paper-2);}

/* ── TREND ITEMS ── */
.trend-item{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-paper-2);cursor:pointer;transition:background var(--duration-fast);display:flex;align-items:flex-start;gap:var(--space-3);}
.trend-item:last-child{border-bottom:none;}
.trend-item:hover{background:var(--color-paper);}
.trend-rank{font-family:var(--font-display);font-size:var(--size-hed-sm);font-weight:900;color:var(--color-paper-3);line-height:1;flex-shrink:0;min-width:20px;margin-top:2px;}
.trend-body h5{font-family:var(--font-sans);font-size:var(--size-caption);font-weight:600;color:var(--color-ink);line-height:1.3;margin-bottom:3px;}
.trend-body p{font-family:var(--font-sans);font-size:var(--size-caption-sm);color:var(--color-ink-faint);line-height:1.4;}
.vel{font-family:var(--font-mono);font-size:var(--size-nano);letter-spacing:1px;padding:2px 6px;border-radius:var(--radius-sm);display:inline-block;margin-top:var(--space-1);}
.v-hot{background:var(--color-red-100);color:var(--color-red-500);}
.v-up{background:var(--bg-gold-tint);color:var(--color-gold);}
.v-steady{background:var(--color-navy-100);color:var(--color-navy-500);}

/* ── SOCIAL BUZZ — consistent hover with trend items ── */
.social-platform{padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--color-paper-2);}
.social-platform:last-child{border-bottom:none;}
/* Collapsible extra platforms */
.social-more{
  max-height:0;overflow:hidden;
  transition:max-height var(--duration-slow) var(--ease-out);
}
.social-more.expanded{max-height:400px;}
.social-toggle{
  display:flex;align-items:center;justify-content:center;
  padding:var(--space-2) var(--space-4);
  font-size:var(--size-nano);
  letter-spacing:1.5px;
  color:var(--color-ink-faint);cursor:pointer;
  transition:color var(--duration-fast);
  border-top:1px solid var(--color-paper-2);
  gap:5px;user-select:none;
}
.social-toggle:hover{color:var(--color-navy-500);}
.social-toggle-arrow{font-size:var(--size-label);transition:transform var(--duration-normal) var(--ease-out);display:inline-block;}
.social-more.expanded + .social-toggle .social-toggle-arrow{transform:rotate(180deg);}
.platform-label{font-size:var(--size-nano);letter-spacing:2px;color:var(--color-ink-faint);margin-bottom:var(--space-2);display:flex;align-items:center;gap:5px;}
.social-topics{display:flex;flex-direction:column;gap:1px;}
.social-topic{
  font-family:var(--font-sans);
  font-size:var(--size-caption);
  color:var(--color-ink-mid);
  padding:6px var(--space-2);
  margin:0 calc(var(--space-2) * -1);
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:background var(--duration-fast), color var(--duration-fast);
  display:flex;
  align-items:flex-start;
  gap:7px;
  line-height:1.4;
}
.social-topic:hover{
  background:var(--color-paper);
  color:var(--color-navy-500);
}
.social-topic::before{
  content:'→';
  color:var(--color-rule);
  font-size:var(--size-meta);
  flex-shrink:0;
  margin-top:1px;
  transition:color var(--duration-fast);
}
.social-topic:hover::before{color:var(--color-navy-500);}

/* ── WHAT TO WATCH ── */
.watch-item{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-paper-2);}
.watch-item:last-child{border-bottom:none;}
.watch-title{font-family:var(--font-sans);font-size:var(--size-caption);font-weight:600;color:var(--color-ink);margin-bottom:3px;}
.watch-desc{font-family:var(--font-sans);font-size:var(--size-caption-sm);color:var(--color-ink-faint);line-height:1.4;margin-bottom:5px;}

/* ── STORY MODAL — extends .overlay + .overlay-box--wide ── */
.story-modal .bar-dark{padding:var(--space-3) var(--space-6);}

/* Story hero image — full width above text */
.story-hero-img-wrap{
  width:100%;overflow:hidden;
  margin-bottom:0;
}
.story-hero-img{
  width:100%;height:240px;
  object-fit:cover;
  display:block;
  background:var(--color-paper-2);
}
.story-img-caption{
  font-family:var(--font-mono);
  font-size:var(--size-nano);color:var(--color-ink-faint);
  letter-spacing:1px;
  padding:6px var(--space-8);
  background:var(--color-paper);
  border-bottom:1px solid var(--color-paper-2);
}

.story-modal-body{padding:var(--space-8) clamp(var(--space-6), 8vw, 96px) var(--space-12);}
.story-modal-badge{margin-bottom:var(--space-3);}
/* Dossier headline */
.story-modal-body h2{
  font-family:var(--font-display);
  font-size:clamp(26px,3.5vw,34px);
  font-weight:700;line-height:1.12;
  letter-spacing:-.4px;
  margin-bottom:var(--space-2);color:var(--color-ink);
}
.story-byline{font-family:var(--font-mono);font-size:var(--size-label);color:var(--color-ink-faint);letter-spacing:1px;margin-bottom:var(--space-6);}
/* Prose — Georgia for reading comfort, narrow measure, auto-centered */
.story-prose{
  font-family:var(--font-prose);
  font-size:var(--size-body);
  color:var(--color-ink-mid);
  line-height:var(--lh-prose);
  margin-bottom:var(--space-6);
  max-width:var(--measure-prose);
  margin-left:auto;
  margin-right:auto;
}
.story-prose p{margin-bottom:var(--space-5);}
.story-prose p:last-child{margin-bottom:0;}
/* ── STORY UPDATE HIGHLIGHTS ──
   System for marking new/updated content when a reader reopens a story.
   Three types: new (added since last read), revised (existing text changed), breaking (urgent addition).
   Each renders as a block with left accent + subtle background + timestamp label. */
.story-update{
  position:relative;
  border-left:3px solid var(--color-navy-500);
  background:var(--color-navy-50);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:var(--space-4) var(--space-5);
  margin:var(--space-5) 0;
  max-width:var(--measure-prose);
  margin-left:auto;margin-right:auto;
}
.story-update.update-breaking{border-left-color:var(--color-red-500);background:var(--color-red-50);}
.story-update.update-revised{border-left-color:var(--color-gold);background:var(--bg-gold-tint);}
.story-update-label{
  font-size:var(--size-micro);
  letter-spacing:2px;
  color:var(--color-navy-500);margin-bottom:var(--space-2);
  display:flex;align-items:center;gap:var(--space-2);
}
.story-update.update-breaking .story-update-label{color:var(--color-red-500);}
.story-update.update-revised .story-update-label{color:var(--color-gold);}
.story-update-label .update-time{color:var(--color-ink-faint);font-weight:400;}
.story-update p{
  font-family:var(--font-prose);font-size:var(--size-body);
  color:var(--color-ink-mid);line-height:var(--lh-prose);
  margin-bottom:var(--space-3);max-width:none;
}
.story-update p:last-child{margin-bottom:0;}
/* Fade-in animation for new updates */
.story-update.update-new{
  animation:updateFade .6s var(--ease-out) forwards;
}
@keyframes updateFade{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}
/* Superscript citation numbers */
.fn{
  font-family:var(--font-mono);
  font-size:var(--size-nano);font-weight:700;
  color:var(--color-navy-500);
  vertical-align:super;
  cursor:pointer;
  text-decoration:none;
  margin-left:1px;
  transition:color var(--duration-fast);
}
.fn:hover{color:var(--color-red-500);}
/* Pull quote — Georgia italic */
.story-quote{
  border-left:3px solid var(--color-gold);
  padding:var(--space-4) var(--space-5);
  background:var(--bg-gold-tint);
  margin:var(--space-6) auto;
  font-family:var(--font-display);
  font-style:italic;
  font-size:var(--size-body-sm);
  color:var(--color-ink-mid);
  line-height:1.7;
  max-width:var(--measure-prose);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.story-quote cite{
  display:block;font-style:normal;
  font-family:var(--font-mono);font-size:var(--size-label);
  color:var(--color-ink-faint);margin-top:var(--space-2);letter-spacing:1px;
}
/* Footnotes section — collapsed by default, toggle to expand */
.story-footnotes{
  max-width:var(--measure-prose);
  margin:0 auto var(--space-5);
  padding-top:var(--space-5);
  border-top:1px solid var(--color-rule);
}
.story-footnotes-toggle{
  display:flex;align-items:center;gap:var(--space-2);
  cursor:pointer;color:var(--text-muted);
  padding:var(--space-1) 0;
  transition:var(--transition-hover);
  user-select:none;
}
.story-footnotes-toggle:hover{color:var(--text-tertiary);}
.fn-count{
  font-family:var(--font-mono);font-size:var(--size-nano);
  color:var(--text-muted);letter-spacing:0;text-transform:none;
  background:var(--color-paper-2);border-radius:var(--radius-sm);
  padding:2px 6px;font-weight:600;
}
.fn-chevron{
  transition:transform var(--duration-normal) var(--ease-out);
  color:var(--text-muted);flex-shrink:0;
}
.story-footnotes.expanded .fn-chevron{transform:rotate(90deg);}
.story-footnotes-list{
  max-height:0;overflow:hidden;
  transition:max-height var(--duration-slow) var(--ease-out);
}
.story-footnotes.expanded .story-footnotes-list{
  max-height:600px;
  padding-top:var(--space-3);
}
.fn-coverage{
  font-family:var(--font-sans);font-size:var(--size-caption-sm);
  color:var(--text-muted);line-height:1.6;
  margin-top:var(--space-4);padding-top:var(--space-3);
  border-top:1px solid var(--border-subtle);
}
.fn-coverage a{color:var(--text-tertiary);text-decoration:none;border-bottom:1px solid var(--color-paper-3);}
.fn-coverage a:hover{color:var(--interactive);border-color:var(--interactive);}
.story-footnote-item{
  display:flex;gap:var(--space-2);
  font-family:var(--font-sans);font-size:var(--size-caption-sm);
  color:var(--text-muted);line-height:1.5;
  margin-bottom:5px;
}
.story-footnote-item .fn-num{
  color:var(--interactive);font-family:var(--font-mono);
  font-size:var(--size-nano);font-weight:700;
  flex-shrink:0;margin-top:2px;
}
.story-footnote-item a{
  color:var(--interactive);text-decoration:none;
  border-bottom:1px solid var(--color-navy-200);
  transition:border-color var(--duration-fast);
}
.story-footnote-item a:hover{border-color:var(--interactive);}
.ku-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin-bottom:var(--space-5);}
.ku-block{padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);}
.ku-confirmed{background:var(--bg-green-tint);border-left:3px solid var(--color-green);}
.ku-unknown{background:var(--bg-recessed);border-left:3px solid var(--color-rule);}
.ku-head{font-size:var(--size-nano);letter-spacing:3px;margin-bottom:6px;}
.ku-confirmed .ku-head{color:var(--color-green);}
.ku-unknown .ku-head{color:var(--color-ink-faint);}
.ku-list{list-style:none;}
.ku-list li{font-family:var(--font-sans);font-size:var(--size-caption);color:var(--color-ink-mid);padding:3px 0;border-top:1px solid var(--color-ink-faint);line-height:1.4;}
.ku-list li:first-child{border-top:none;}
.cov-section{margin-bottom:var(--space-5);}
.cov-label{font-size:var(--size-nano);letter-spacing:3px;color:var(--color-ink-faint);margin-bottom:7px;}
.cov-bar{height:6px;display:flex;border-radius:var(--radius-sm);overflow:hidden;margin-bottom:5px;}
.cov-l{background:var(--cov-left);}
.cov-c{background:var(--color-ink-light);}
.cov-r{background:var(--cov-right);}
.cov-nums{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--size-label);color:var(--color-ink-faint);}

/* ── SNAP MODAL — extends .overlay--center + .overlay-box--narrow ── */
.snap-modal-bar{padding:var(--space-3) var(--space-8);position:sticky;top:0;z-index:1;}
.snap-body{padding:var(--space-8) var(--space-10);}
.snap-source-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3);}
.snap-platform{font-size:var(--size-nano);letter-spacing:2px;color:var(--color-ink-faint);}
.snap-title{font-family:var(--font-display);font-size:var(--size-hed-md);font-weight:700;line-height:1.25;margin-bottom:var(--space-4);color:var(--color-ink);}
.snap-text{font-family:var(--font-sans);font-size:var(--size-card-body);color:var(--color-ink-mid);line-height:1.82;margin-bottom:var(--space-4);}
.snap-text p{margin-bottom:var(--space-3);}
.snap-text p:last-child{margin-bottom:0;}
/* Snap inline chat section */

/* Snap modal footnotes — no max-width constraint, match text width */
.snap-body .story-footnotes{max-width:none;margin-left:0;margin-right:0;}

/* ── CHAT (unified system — snap modals + dossier + ask surface) ── */

/* Message layout — no avatars, clean prose flow */
.cmsg{margin-bottom:var(--space-6);}
.cmsg:last-child{margin-bottom:0;}
.cmsg.user{display:flex;justify-content:flex-end;}
/* Response text — matches story prose exactly */
.bub-tb{
  font-family:var(--font-prose);font-size:var(--size-body);line-height:var(--lh-prose);
  color:var(--text-secondary);max-width:var(--measure-prose);
}
.bub-tb p{margin-bottom:var(--space-5);}
.bub-tb p:last-child{margin-bottom:0;}
/* User question — subtle right-aligned bubble */
.bub-u{
  display:inline-block;
  background:var(--color-paper-2);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  color:var(--text-secondary);
  padding:var(--space-2) var(--space-4);
  font-family:var(--font-sans);font-size:var(--size-ui);line-height:var(--lh-ui);
  max-width:80%;
}
/* Typing indicator — no bubble, matches prose text */
.chat-typing{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-prose);font-size:var(--size-body);color:var(--text-muted);font-style:italic;padding:0;background:transparent;border:none;width:fit-content;}
.dots span{display:inline-block;width:5px;height:5px;background:var(--color-rule);border-radius:50%;animation:dot 1.4s ease infinite;margin:0 1px;}
.dots span:nth-child(2){animation-delay:.2s;}
.dots span:nth-child(3){animation-delay:.4s;}
@keyframes dot{0%,80%,100%{transform:scale(.6);opacity:.4;}40%{transform:scale(1);opacity:1;}}

/* ── FOOTER ── */
footer{background:var(--color-ink);border-top:3px solid var(--color-red-500);padding:var(--space-8);}
.foot-in{max-width:1220px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;}
.foot-brand{font-family:var(--font-display);font-size:var(--size-hed-sm);font-weight:900;color:var(--color-paper);letter-spacing:-0.3px;}
.foot-brand span{font-style:italic;color:var(--text-on-dark-accent);}
.foot-note{font-size:var(--size-label);letter-spacing:2px;color:var(--text-on-dark-faint);}
.foot-links{display:flex;gap:var(--space-6);}
.foot-link{font-family:var(--font-mono);font-size:var(--size-label);letter-spacing:1px;color:var(--text-on-dark-faint);text-decoration:none;transition:color var(--duration-fast);}
.foot-link:hover{color:var(--text-on-dark-mid);}

/* ── LIVE UPDATE NOTIFICATION ── */
.live-update-bar{
  position:fixed;top:59px;left:0;right:0;z-index:var(--z-notification);
  display:flex;justify-content:center;
  pointer-events:none;
  transform:translateY(-100%);
  transition:transform var(--duration-slow) var(--ease-out);
}
.live-update-bar.visible{transform:translateY(0);}
.live-update-pill{
  pointer-events:all;
  background:var(--color-navy-500);color:var(--text-on-dark);
  border:none;
  font-family:var(--font-sans);font-size:var(--size-ui-sm);font-weight:500;
  padding:var(--space-2) var(--space-5);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:var(--elevation-card);
  cursor:pointer;
  display:flex;align-items:center;gap:var(--space-2);
  transition:var(--transition-hover);
}
.live-update-pill:hover{background:var(--color-navy-700);box-shadow:var(--elevation-raised);}
.live-update-pill .update-dot{
  width:6px;height:6px;background:var(--color-red-500);border-radius:50%;
  animation:blink 2s ease infinite;
}
.live-update-pill .update-tap{color:var(--text-on-dark-muted);}

/* ── REFRESH BUTTON (masthead) ── */
.mast-refresh{
  background:none;border:1px solid var(--border-on-dark);
  border-radius:var(--radius);padding:5px 10px;
  font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-on-dark-muted);cursor:pointer;
  transition:all var(--duration-fast);display:flex;align-items:center;gap:5px;
}
.mast-refresh:hover{background:var(--bg-on-dark-hover);color:var(--text-on-dark-mid);border-color:var(--text-on-dark-faint);}
.mast-refresh svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;}
.mast-refresh.spinning svg{animation:spin .8s linear;}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ── RESPONSIVE ── */

/* Tablet — ≤ 860px */
@media(max-width:860px){
  /* Layout: single column */
  .page{grid-template-columns:1fr;padding:var(--space-5) var(--space-4) var(--space-16);}
  .sidebar{order:2;}

  /* Masthead: tighter padding */
  .mast-inner{padding:0 var(--space-4);}
  .mast-nav{display:none;}
  .mast-right{gap:var(--space-2);}

  /* Since banner: tighter, no chips */
  .since-in{padding:0 var(--space-4);height:44px;}
  .since-chips{display:none;}
  .since-more{display:none;}

  /* Ask surface: tighter padding */
  .ask-surface-header{padding:var(--space-4) var(--space-4) var(--space-3);}
  .ask-drawer-convo-inner{padding:var(--space-4) var(--space-4) var(--space-2);}
  .td-chat__input-row--surface{margin-left:var(--space-4);margin-right:var(--space-4);}

  /* Daily intro: less side padding */
  .daily-intro{padding:var(--space-6) var(--space-5);}

  /* Story cards: no thumbnails, simpler grid */
  .card-thumb{display:none;}
  .card-body-row{grid-template-columns:1fr;}

  /* Story modal: reduced padding, shorter hero */
  .story-hero-img{height:180px;}
  .story-img-caption{padding:6px var(--space-5);}
  .ku-row{grid-template-columns:1fr;}

  /* Snap modal: tighter padding */
  .snap-modal-bar{padding:var(--space-3) var(--space-5);}
  .snap-body{padding:var(--space-5) var(--space-6);}

  /* Overlay: less padding around modals */
  .overlay{padding:var(--space-4) var(--space-3);}
  .overlay--center{padding:var(--space-4);}

  /* Footer: stack vertically */
  .foot-in{flex-direction:column;gap:var(--space-3);text-align:center;}
  .foot-links{justify-content:center;}
}

/* Phone — ≤ 480px */
@media(max-width:480px){
  /* Masthead: compact */
  .mast-inner{height:48px;gap:var(--space-3);}
  .brand{font-size:var(--size-hed-md);}
  #clock{display:none;}

  /* Since banner */
  .since-in{padding:0 var(--space-4);height:44px;gap:var(--space-2);}
  .since-text{font-size:var(--size-caption);}
  .since-badge{display:none;}
  .btn-alert{font-size:var(--size-nano);padding:3px 8px;}

  /* Ask surface */
  .ask-label-text{font-size:var(--size-ui-sm);}

  /* Daily intro: minimal padding */
  .daily-intro{padding:var(--space-5) var(--space-4);}
  .intro-opener{font-size:var(--size-body);}

  /* Story cards: tighter */
  .story-card{padding:var(--space-4) var(--space-4);}
  .story-card h3{font-size:var(--size-hed-md);}

  /* Story modal: near full-screen */
  .overlay{padding:var(--space-2) var(--space-1);}
  .overlay--center{padding:var(--space-2);}
  .overlay-box{border-radius:var(--radius-sm);}
  .story-hero-img{height:150px;}
  .story-img-caption{padding:6px var(--space-4);}
  .story-modal-body .story-modal-badge .badge{font-size:var(--size-micro);}
  .story-modal-body h2{font-size:clamp(22px,5vw,28px);}
  .snap-modal-bar{padding:var(--space-3) var(--space-4);}
  .snap-body{padding:var(--space-4) var(--space-4);}
  .snap-title{font-size:var(--size-hed-sm);}

  /* Chat: ensure touch targets ≥ 44px */
  .btn-icon{width:44px;height:44px;}
  .btn-icon-sm{width:36px;height:36px;}
  .td-chat__chip{padding:var(--space-3) var(--space-4);font-size:var(--size-caption);}

  /* Sidebar blocks: tighter */
  .sb-block .bar-dark{padding:var(--space-2) var(--space-3);}
  .trend-item{padding:var(--space-2) var(--space-3);}
  .watch-item{padding:var(--space-2) var(--space-3);}
  .social-platform{padding:var(--space-2) var(--space-3);}

  /* Market table: compact */
  .mkt-val-cell{font-size:var(--size-meta);}

  /* Footer */
  .foot-links{flex-direction:column;gap:var(--space-2);}

  /* Live update tab: smaller on phone */
  .live-update-pill{font-size:var(--size-caption);padding:var(--space-2) var(--space-4);}
}
/* ── FADE IN ── */
.fade{opacity:0;transform:translateY(10px);animation:fade .45s var(--ease-out) forwards;}
.fade:nth-child(1){animation-delay:.03s;}
.fade:nth-child(2){animation-delay:.07s;}
.fade:nth-child(3){animation-delay:.11s;}
.fade:nth-child(4){animation-delay:.15s;}
.fade:nth-child(5){animation-delay:.19s;}
.fade:nth-child(6){animation-delay:.23s;}
@keyframes fade{to{opacity:1;transform:translateY(0);}}

/* ── TOAST — one transient notice component (v02.13) ──
   Bottom-center dark pill; auto-dismisses. Used for demo notices; any
   future transient message uses the same component. */
.toast-bar{position:fixed;bottom:24px;left:0;right:0;z-index:var(--z-notification);display:flex;justify-content:center;pointer-events:none;padding:0 var(--space-4);}
.toast{pointer-events:all;background:var(--color-ink);color:var(--text-on-dark-hi);font-family:var(--font-sans);font-size:var(--size-ui-sm);line-height:var(--lh-snug);padding:var(--space-3) var(--space-5);border-radius:var(--radius-lg);box-shadow:var(--elevation-raised);max-width:480px;text-align:center;opacity:0;transform:translateY(8px);transition:opacity var(--duration-normal) var(--ease-out),transform var(--duration-normal) var(--ease-out);}
.toast.visible{opacity:1;transform:translateY(0);}