/* AlphaSuite — design tokens + global resets */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600&display=swap');

:root {
  /* Surfaces — deep BlackOps black, no borders, contrast via elevation */
  --canvas: #050505;
  --surface: #0e0e0e;
  --elev-1: #181818;
  --elev-2: #232323;
  --elev-3: #2e2e2e;
  --elev-4: #3b3b3b;

  /* Ink — cooler bone, matches BlackOps body copy */
  --ink: #f4f1ec;
  --ink-2: #b6b1a8;
  --ink-3: #7e7a72;
  --ink-4: #555149;
  --ink-5: #2e2c28;

  /* RAG */
  --red: oklch(0.66 0.155 28);
  --red-wash: oklch(0.26 0.08 28);
  --red-deep: oklch(0.20 0.06 28);
  --amber: oklch(0.79 0.13 75);
  --amber-wash: oklch(0.30 0.07 75);
  --amber-deep: oklch(0.22 0.05 75);
  --green: oklch(0.74 0.07 152);
  --green-wash: oklch(0.28 0.05 152);
  --green-deep: oklch(0.20 0.04 152);

  /* Brand accent — dusty mauve, exact spec */
  --accent: #D9C8D5;
  --accent-deep: #b89bb0;
  --gold: var(--accent); /* legacy alias */
  --bone: #d8d2c0;

  /* Type stacks — sans-serif throughout. Italic-sans carries the accent voice. */
  --serif:  'Geist', -apple-system, system-ui, sans-serif; /* alias to sans */
  --sans:   'Geist', -apple-system, system-ui, sans-serif;
  --mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --display:'Geist', -apple-system, system-ui, sans-serif;

  /* ── Mobile: Portfolio screen ── */
  --m-heading-size: 64px;
  --m-heading-weight: 800;
  --m-wordmark-size: 18px;
  --m-stat-label-size: 9px;
  --m-stat-value-size: 22px;
  --m-feed-text-size: 13px;
  --m-kicker-size: 10px;

  /* ── Mobile: Portfolio row ── */
  --m-row-pad-v: 22px;
  --m-row-pad-h: 24px;
  --m-row-name-size: 40px;
  --m-row-score-size: 56px;
  --m-row-meta-size: 11px;
  --m-row-fingerprint-h: 28px;

  /* ── Mobile: Score screen ── */
  --m-score-name-size: 44px;
  --m-score-hero-size: 120px;
  --m-score-delta-size: 36px;
  --m-score-summary-size: 18px;
  --m-score-note-size: 12px;
  --m-axis-label-size: 22px;
  --m-axis-score-size: 36px;
  --m-axis-note-size: 12px;

  /* ── Mobile: Chat screen ── */
  --m-chat-user-size: 15px;
  --m-chat-lead-size: 19px;
  --m-chat-signal-size: 13px;

  /* ── Mobile: Navigation ── */
  --m-tab-height: 78px;
  --m-tab-label-size: 9px;
  /* ── Mobile: Shared header / back-button chrome ── */
  --m-header-mono-size: 10px;
  --m-header-letter-spacing: 0.14em;
  --m-header-kicker-letter-spacing: 0.16em;
  --m-header-back-gap: 8px;
  --m-header-back-pad: 6px 8px;
  --m-appheader-pad: 14px 24px 22px;
  --m-appheader-kicker-letter-spacing: 0.18em;
  --m-screen-header-pad: 14px 16px 0;

  /* ── Mobile: Portfolio screen ── */
  --m-heading-line-height: 0.92;
  --m-hero-pad: 0 24px 8px;
  --m-summary-margin: 24px 24px 8px;
  --m-summary-pad-v: 12px;
  --m-summary-pad-h: 20px;
  --m-stat-label-letter-spacing: 0.16em;
  --m-stat-label-margin-bottom: 6px;
  --m-filter-gap: 6px;
  --m-filter-pad: 12px 24px 18px;
  --m-filter-letter-spacing: 0.12em;
  --m-filter-margin-left: 14px;
  --m-signal-feed-pad: 28px 24px 8px;
  --m-signal-feed-margin-top: 14px;
  --m-signal-row-pad: 10px 0;
  --m-signal-row-gap: 12px;
  --m-signal-label-size: 9px;
  --m-signal-label-letter-spacing: 0.14em;
  --m-signal-text-margin-top: 2px;
  --m-signal-text-line-height: 1.35;
  --m-wordmark-margin-left: 10px;
  --m-wordmark-harlow-size: 9px;
  --m-wordmark-harlow-letter-spacing: 0.2em;

  /* ── Mobile: Portfolio row ── */
  --m-row-rank-margin-bottom: 14px;
  --m-row-sep-margin: 0 8px;
  --m-row-rag-gap: 5px;
  --m-row-rag-font-size: 9px;
  --m-row-rag-font-weight: 600;
  --m-row-rag-letter-spacing: 0.18em;
  --m-row-rag-pad: 3px 8px;
  --m-row-meta-gap: 16px;
  --m-row-name-line-height: 0.95;
  --m-row-score-line-height: 0.9;
  --m-row-min-score-width: 80px;
  --m-row-meta-margin-top: 12px;
  --m-row-delta-margin-left: 4px;
  --m-row-fingerprint-margin-top: 10px;

  /* ── Mobile: Score screen ── */
  --m-score-pb: 80px;
  --m-score-title-pad: 18px 24px 12px;
  --m-score-title-letter-spacing: 0.16em;
  --m-score-sector-size: 10px;
  --m-score-name-line-height: 0.95;
  --m-score-name-letter-spacing: -0.02em;
  --m-score-name-margin-top: 4px;
  --m-score-meta-size: 11px;
  --m-score-meta-margin-top: 8px;
  --m-score-hero-margin: 14px 0 0;
  --m-score-hero-pad: 32px 24px 30px;
  --m-score-hero-line-height: 0.85;
  --m-score-hero-letter-spacing: -0.05em;
  --m-score-hero-margin-top: 10px;
  --m-score-out-of-size: 10px;
  --m-score-out-of-letter-spacing: 0.16em;
  --m-score-out-of-margin-top: 4px;
  --m-score-delta-line-height: 1;
  --m-score-delta-margin-top: 6px;
  --m-score-pts-size: 9px;
  --m-score-pts-letter-spacing: 0.14em;
  --m-score-pts-margin-top: 4px;
  --m-score-spark-margin-top: 22px;
  --m-score-spark-width: 120px;
  --m-score-spark-height: 36px;
  --m-score-trail-size: 9px;
  --m-score-trail-letter-spacing: 0.14em;
  --m-score-trail-margin-top: 6px;
  --m-score-ai-margin-top: 24px;
  --m-score-ai-padding-top: 18px;
  --m-score-ai-kicker-margin-bottom: 8px;
  --m-score-summary-line-height: 1.4;
  --m-score-summary-letter-spacing: -0.005em;
  --m-score-axes-header-pad: 20px 24px 12px;
  --m-score-footer-pad: 20px 24px;
  --m-score-footer-size: 10px;
  --m-score-footer-letter-spacing: 0.14em;

  /* ── Mobile: Axis row ── */
  --m-axis-row-pad: 18px 24px;
  --m-axis-row-gap: 12px;
  --m-axis-rank-gap: 10px;
  --m-axis-rank-margin-bottom: 6px;
  --m-axis-rank-size: 10px;
  --m-axis-rank-letter-spacing: 0.14em;
  --m-axis-rag-size: 9px;
  --m-axis-rag-letter-spacing: 0.16em;
  --m-axis-label-line-height: 1.1;
  --m-axis-label-letter-spacing: -0.01em;
  --m-axis-note-margin-top: 6px;
  --m-axis-note-line-height: 1.45;
  --m-axis-note-pad-right: 12px;
  --m-axis-score-line-height: 1;
  --m-axis-score-min-width: 64px;
  --m-axis-slash-size: 9px;
  --m-axis-slash-letter-spacing: 0.14em;
  --m-axis-slash-margin-top: 4px;
  --m-axis-bar-margin-top: 14px;
  --m-axis-bar-width: 64px;

  /* ── Mobile: Chat screen ── */
  --m-chat-pb: 78px;
  --m-chat-title-pad: 12px 24px 6px;
  --m-chat-company-size: 30px;
  --m-chat-company-line-height: 0.95;
  --m-chat-company-letter-spacing: -0.02em;
  --m-chat-company-margin-top: 2px;
  --m-chat-topics-pad-top: 16px;
  --m-chat-topics-pad-bottom: 4px;
  --m-chat-topics-header-pad: 0 18px 10px;
  --m-chat-scroll-pad: 4px 18px 12px;

  /* ── Mobile: UserMsg ── */
  --m-chat-user-pad: 14px 24px 6px;
  --m-chat-user-label-size: 9px;
  --m-chat-user-label-letter-spacing: 0.16em;
  --m-chat-user-label-margin-bottom: 6px;
  --m-chat-user-line-height: 1.45;

  /* ── Mobile: AlphaBrief ── */
  --m-brief-pad: 18px 0 22px;
  --m-brief-margin-top: 8px;
  --m-brief-header-margin-bottom: 14px;
  --m-brief-alpha-size: 9px;
  --m-brief-alpha-letter-spacing: 0.18em;
  --m-brief-time-letter-spacing: 0.14em;
  --m-brief-lead-line-height: 1.34;
  --m-brief-lead-letter-spacing: -0.005em;
  --m-brief-signals-margin-top: 18px;
  --m-brief-signals-margin-bottom: 10px;
  --m-brief-signal-row-pad: 10px 0;
  --m-brief-signal-row-gap: 10px;
  --m-brief-signal-dash-size: 10px;
  --m-brief-signal-line-height: 1.45;
  --m-brief-signal-src-size: 9px;
  --m-brief-signal-src-letter-spacing: 0.14em;
  --m-brief-cite-size: 9px;
  --m-brief-cite-margin-left: 4px;
  --m-brief-verdict-margin-top: 18px;
  --m-brief-verdict-pad: 14px 24px;
  --m-brief-verdict-kicker-margin-bottom: 6px;
  --m-brief-verdict-size: 15px;
  --m-brief-verdict-line-height: 1.45;
  --m-brief-footer-margin-top: 14px;
  --m-brief-footer-size: 9px;
  --m-brief-footer-letter-spacing: 0.14em;

  /* ── Mobile: MComposer ── */
  --m-composer-pad: 12px 16px 20px;
  --m-composer-inner-gap: 10px;
  --m-composer-inner-pad: 12px 14px;
  --m-composer-prompt-size: 12px;
  --m-composer-input-size: 14px;
  --m-composer-send-size: 10px;
  --m-composer-send-letter-spacing: 0.16em;

  /* ── Mobile: MTabStrip ── */
  --m-tabstrip-gap: 18px;
  --m-tabstrip-pad: 14px 24px 0;
  --m-tabstrip-btn-pad: 8px 0 12px;
  --m-tabstrip-size: 11px;
  --m-tabstrip-letter-spacing: 0.16em;
  --m-tabstrip-indicator-height: 2px;

  /* ── Mobile: MTabBar dot ── */
  --m-tab-dot-size: 6px;
  --m-tab-dot-margin-bottom: 8px;
  --m-tab-bar-pad: 14px 0 0;
}

:root[data-theme="light"] {
  --canvas:  #f8f6f1;
  --surface: #f0ede6;
  --elev-1:  #e8e3da;
  --elev-2:  #ddd8c8;
  --elev-3:  #c2bba3;
  --elev-4:  #8c8670;

  --ink:   #0e0e0d;
  --ink-2: #353330;
  --ink-3: #6b6760;
  --ink-4: #8c8880;
  --ink-5: #b6b3aa;

  --red:      oklch(0.50 0.17 28);
  --red-wash: oklch(0.86 0.075 28);
  --red-deep: oklch(0.68 0.12 28);

  --amber:      oklch(0.56 0.14 75);
  --amber-wash: oklch(0.88 0.085 75);
  --amber-deep: oklch(0.70 0.12 75);

  --green:      oklch(0.44 0.10 152);
  --green-wash: oklch(0.85 0.055 152);
  --green-deep: oklch(0.66 0.09 152);

  --accent: #D9C8D5;
  --accent-deep: #7a5773;
}

/* ── Per-screen theme overrides — driven by picker Sections tab ── */
[data-screen][data-section-theme="light"] {
  --canvas:  #f8f6f1;
  --surface: #f0ede6;
  --elev-1:  #e8e3da;
  --elev-2:  #ddd8c8;
  --elev-3:  #c2bba3;
  --elev-4:  #8c8670;
  --ink:   #0e0e0d;
  --ink-2: #353330;
  --ink-3: #6b6760;
  --ink-4: #8c8880;
  --ink-5: #b6b3aa;
  --red:      oklch(0.50 0.17 28);
  --red-wash: oklch(0.86 0.075 28);
  --amber:    oklch(0.56 0.14 75);
  --amber-wash: oklch(0.88 0.085 75);
  --green:    oklch(0.44 0.10 152);
  --green-wash: oklch(0.85 0.055 152);
  --accent-deep: #7a5773;
  background: var(--canvas);
  color: var(--ink);
}
[data-screen][data-section-theme="dark"] {
  --canvas:  #050505;
  --surface: #0e0e0e;
  --elev-1:  #181818;
  --elev-2:  #232323;
  --elev-3:  #2e2e2e;
  --elev-4:  #3b3b3b;
  --ink:   #f4f1ec;
  --ink-2: #b6b1a8;
  --ink-3: #7e7a72;
  --ink-4: #555149;
  --ink-5: #2e2c28;
  --red:      oklch(0.66 0.155 28);
  --red-wash: oklch(0.26 0.08 28);
  --amber:    oklch(0.79 0.13 75);
  --amber-wash: oklch(0.30 0.07 75);
  --green:    oklch(0.74 0.07 152);
  --green-wash: oklch(0.28 0.05 152);
  --accent-deep: #b89bb0;
  background: var(--canvas);
  color: var(--ink);
}
[data-screen][data-section-theme] {
  position: relative;
  isolation: isolate;
  min-height: 100%;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
}

/* canonical scrollbar removal inside frames */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* numerals — sans tabular medium */
.serif-num {
  font-family: var(--sans);
  font-weight: 500;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.04em;
}

.mono { font-family: var(--mono); font-feature-settings: 'tnum' 1; }
.kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }

/* canvas: kill the default warm gray and replace with a deeper neutral grid */
:root .dc-canvas, body { }

/* ──────────────────────────────────────────────────────────
   LIGHT MODE — scoped to .chat-light
   The Ask α surface is intentionally a different room.
   Cream warm bone, dark warm carbon ink, the tag colors get
   to breathe and become the most chromatic surface in the app.
   ────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────
   LIGHT MODE — scoped to .chat-light
   The Ask α surface is intentionally a different room.
   Cream warm bone, dark warm carbon ink, the tag colors do
   most of the work — they read by hue before they read by label.
   ────────────────────────────────────────────────────────── */
.chat-light {
  /* WHITE light surface — the conversation lives on paper */
  --canvas:  #ffffff;
  --surface: #f5f3ee;
  --elev-1:  #ece9e0;
  --elev-2:  #ddd8c8;
  --elev-3:  #c2bba3;
  --elev-4:  #8c8670;

  --ink:   #0e0e0d;
  --ink-2: #353330;
  --ink-3: #6b6760;
  --ink-4: #8c8880;
  --ink-5: #b6b3aa;

  --red:      oklch(0.50 0.17 28);
  --red-wash: oklch(0.86 0.075 28);
  --red-mid:  oklch(0.78 0.10 28);
  --red-deep: oklch(0.68 0.12 28);

  --amber:      oklch(0.56 0.14 75);
  --amber-wash: oklch(0.88 0.085 75);
  --amber-mid:  oklch(0.80 0.10 75);
  --amber-deep: oklch(0.70 0.12 75);

  --green:      oklch(0.44 0.10 152);
  --green-wash: oklch(0.85 0.055 152);
  --green-mid:  oklch(0.76 0.075 152);
  --green-deep: oklch(0.66 0.09 152);

  /* mauve accent on white — keep brand colour; darker variants for primary actions on light */
  --accent: #D9C8D5;
  --accent-deep: #7a5773;
  --gold: oklch(0.45 0.14 75);

  background: var(--canvas);
  color: var(--ink);
}

.chat-light mark {
  background: var(--amber-mid);
  color: #2a1c00;
  padding: 0 4px;
}

/* ─── DEPARTMENT CARDS ───
   Magazine-style "chapter cards" — the axis tags. Whole-card
   tint conveys severity at a glance. The tag IS the surface. */
.dept-card {
  flex: 0 0 auto;
  width: 252px;
  padding: 22px 22px 20px;
  border: none;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--sans);
  color: var(--ink);
  position: relative;
  transition: transform 160ms ease, filter 160ms ease;
}
.dept-card:hover { transform: translateY(-2px); filter: brightness(1.04); }
.dept-card.--red    { background: var(--red-wash); }
.dept-card.--amber  { background: var(--amber-wash); }
.dept-card.--green  { background: var(--green-wash); }

.dept-card.--dense { width: 188px; padding: 16px 16px 14px; gap: 10px; }

.dept-card .dc-rank {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dept-card.--red    .dc-rank { color: var(--red); }
.dept-card.--amber  .dc-rank { color: var(--amber); }
.dept-card.--green  .dc-rank { color: var(--green); }

.dept-card .dc-rank::before {
  content: '';
  width: 8px; height: 8px;
}
.dept-card.--red    .dc-rank::before { background: var(--red); }
.dept-card.--amber  .dc-rank::before { background: var(--amber); }
.dept-card.--green  .dc-rank::before { background: var(--green); }

.dept-card .dc-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.dept-card.--dense .dc-name { font-size: 22px; }

.dept-card .dc-score {
  font-family: var(--sans);
  font-weight: 500;
  font-style: italic;
  line-height: 0.85;
  letter-spacing: -0.045em;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
  font-size: 56px;
}
.dept-card.--red    .dc-score { color: var(--red); }
.dept-card.--amber  .dc-score { color: var(--amber); }
.dept-card.--green  .dc-score { color: var(--green); }
.dept-card.--dense .dc-score { font-size: 40px; }

.dept-card .dc-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: auto;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 4px;
}
.dept-card .dc-cta { color: var(--ink-2); }
.dept-card:hover .dc-cta { color: var(--ink); }

/* ──────────────────────────────────────────────────────────
   COMPANY ROW BACKGROUNDS
   Each portfolio row carries the company's RAG tint as the surface.
   Read severity by hue first, then by number.
   ────────────────────────────────────────────────────────── */
.row-rag-red    { background: oklch(0.18 0.06 28); }
.row-rag-amber  { background: oklch(0.20 0.06 75); }
.row-rag-green  { background: oklch(0.18 0.04 152); }

.card-rag-red, .card-rag-amber, .card-rag-green { background: var(--surface); }

/* ──────────────────────────────────────────────────────────
   CONVERSATIONAL COMPOSER
   Big white surface, sits like a real prompt invitation, not a chat
   input. Mauve cursor caret, soft elevated focus state.
   ────────────────────────────────────────────────────────── */
.chat-light .prompt-shell {
  background: #fff;
  border-top: 1px solid var(--elev-2);
  padding: 24px 32px 26px;
}
.chat-light .prompt-frame {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: end;
  background: #fff;
  padding: 18px 22px 18px;
  box-shadow: 0 0 0 1px var(--elev-2);
  transition: box-shadow 160ms;
}
.chat-light .prompt-frame:focus-within {
  box-shadow: 0 0 0 1.5px var(--accent), 0 18px 36px -22px rgba(0,0,0,0.18);
}
.chat-light .prompt-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.chat-light .prompt-eyebrow .accent { color: var(--accent-deep); }
.chat-light .prompt-input {
  width: 100%; min-width: 0;
  background: transparent;
  border: none; outline: none; resize: none;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
  caret-color: var(--accent-deep);
  padding: 0;
}
.chat-light .prompt-input::placeholder { color: var(--ink-4); }
.chat-light .prompt-send {
  background: var(--ink);
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 14px 22px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
  align-self: stretch;
}
.chat-light .prompt-send:hover { background: var(--accent-deep); }
.chat-light .prompt-hint {
  margin-top: 10px;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-4);
}

/* ──────────────────────────────────────────────────────────
   PICKER TOGGLE — lift above tab bar on screens that have one
   Portfolio hides the tab bar, so toggle stays at default 24px.
   Score / Chat / Notebook show the tab bar (var(--m-tab-height)),
   so push the toggle and its panel clear of it.
   ────────────────────────────────────────────────────────── */
html[data-active-screen="score"] #sp-toggle,
html[data-active-screen="chat"] #sp-toggle,
html[data-active-screen="notebook"] #sp-toggle {
  bottom: calc(var(--m-tab-height) + 16px) !important;
}
html[data-active-screen="score"] #sp-panel,
html[data-active-screen="chat"] #sp-panel,
html[data-active-screen="notebook"] #sp-panel {
  bottom: calc(var(--m-tab-height) + 72px) !important;
}

/* ──────────────────────────────────────────────────────────
   RESPONSIVE BREAKPOINTS — mobile token scaling
   The mobile view spans 320–767px. These media queries scale
   key font and spacing tokens so the UI grows with the viewport.
   Picker writes directly to :root which overrides these — pick
   the value you want and it stays consistent at all widths.
   ────────────────────────────────────────────────────────── */
@media (min-width: 480px) {
  :root {
    /* Portfolio */
    --m-heading-size: 80px;
    --m-wordmark-size: 20px;
    --m-stat-value-size: 26px;
    --m-feed-text-size: 14px;

    /* Portfolio row */
    --m-row-pad-v: 28px;
    --m-row-pad-h: 32px;
    --m-row-name-size: 50px;
    --m-row-score-size: 70px;
    --m-row-meta-size: 12px;
    --m-row-fingerprint-h: 34px;

    /* Score */
    --m-score-name-size: 56px;
    --m-score-hero-size: 148px;
    --m-score-delta-size: 44px;
    --m-score-summary-size: 20px;
    --m-score-note-size: 13px;
    --m-score-hero-pad: 40px 32px 38px;
    --m-score-title-pad: 22px 32px 14px;
    --m-score-axes-header-pad: 24px 32px 14px;
    --m-score-footer-pad: 24px 32px;

    /* Axis row */
    --m-axis-label-size: 26px;
    --m-axis-score-size: 44px;
    --m-axis-note-size: 13px;
    --m-axis-row-pad: 22px 32px;
    --m-axis-bar-width: 80px;

    /* Chat */
    --m-chat-company-size: 37px;
    --m-chat-lead-size: 22px;
    --m-chat-user-size: 16px;
    --m-chat-signal-size: 14px;
    --m-chat-title-pad: 14px 32px 8px;
    --m-chat-scroll-pad: 4px 24px 12px;

    /* Navigation */
    --m-tab-height: 88px;
    --m-tab-label-size: 10px;
    --m-tabstrip-pad: 16px 32px 0;
    --m-screen-header-pad: 16px 24px 0;
    --m-appheader-pad: 16px 32px 24px;
  }
}

/* ── Desktop tokens (768+) ── */
:root {
  /* DChrome (top nav bar) */
  --m-nav-h: 56px;
  --m-nav-logo-pad: 0 28px;
  --m-nav-logo-h: 26px;
  --m-nav-wordmark-sub-size: 9px;
  --m-nav-wordmark-sub-ls: 0.22em;
  --m-nav-wordmark-size: 10px;
  --m-nav-wordmark-ls: 0.12em;
  --m-nav-tab-sub-size: 9px;
  --m-nav-tab-sub-ls: 0.16em;
  --m-nav-tab-label-size: 12px;
  --m-nav-tab-label-ls: 0.12em;
  --m-nav-ticker-pad: 0 22px;
  --m-nav-ticker-size: 11px;

  /* DPortfolio */
  --m-p-main-pad: 40px 48px 48px;
  --m-p-heading-size: 112px;
  --m-p-stat-size: 38px;
  --m-p-aside-w: 380px;
  --m-p-aside-pad: 40px 32px 48px;
  --m-p-signal-text-size: 16px;

  /* DPortfolioCard */
  --m-p-card-pad: 22px 24px 24px;
  --m-p-card-name-size: 30px;
  --m-p-card-score-size: 80px;

  /* MatrixTable */
  --m-p-matrix-name-w: 180px;
  --m-p-matrix-head-pad: 12px 16px;
  --m-p-matrix-name-size: 20px;
  --m-p-matrix-score-size: 12px;
  --m-p-matrix-total-size: 26px;

  /* DScore */
  --m-s-left-w: 440px;
  --m-s-right-w: 340px;
  --m-s-left-pad: 40px 36px 40px 48px;
  --m-s-mid-pad: 40px 36px 40px;
  --m-s-right-pad: 40px 30px 40px;
  --m-s-name-size: 60px;
  --m-s-hero-size: 232px;
  --m-s-delta-size: 38px;
  --m-s-quote-size: 21px;

  /* DAxisRow */
  --m-ax-pad: 20px 26px;
  --m-ax-rank-size: 11px;
  --m-ax-label-size: 24px;
  --m-ax-note-size: 13px;
  --m-ax-score-size: 30px;

  /* DChat */
  --m-c-rail-w: 300px;
  --m-c-rail-collapsed-w: 64px;
  --m-c-body-pad: 12px 56px 24px;
  --m-c-header-pad: 28px 56px 6px;
  --m-c-header-title-size: 38px;
  --m-c-topics-pad: 20px 56px 8px;
  --m-c-source-pad: 14px 18px;
  --m-c-source-title-size: 15px;
}

@keyframes alpha-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes alpha-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes alpha-scale-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes alpha-bar-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (min-width: 640px) {
  :root {
    /* Portfolio */
    --m-heading-size: 96px;
    --m-wordmark-size: 22px;
    --m-stat-value-size: 30px;
    --m-feed-text-size: 15px;

    /* Portfolio row */
    --m-row-pad-v: 36px;
    --m-row-pad-h: 40px;
    --m-row-name-size: 60px;
    --m-row-score-size: 84px;
    --m-row-meta-size: 13px;
    --m-row-fingerprint-h: 42px;

    /* Score */
    --m-score-name-size: 66px;
    --m-score-hero-size: 176px;
    --m-score-delta-size: 54px;
    --m-score-summary-size: 24px;
    --m-score-note-size: 14px;
    --m-score-hero-pad: 48px 40px 46px;
    --m-score-title-pad: 26px 40px 18px;
    --m-score-axes-header-pad: 28px 40px 16px;
    --m-score-footer-pad: 28px 40px;

    /* Axis row */
    --m-axis-label-size: 32px;
    --m-axis-score-size: 52px;
    --m-axis-note-size: 14px;
    --m-axis-row-pad: 26px 40px;
    --m-axis-bar-width: 96px;

    /* Chat */
    --m-chat-company-size: 44px;
    --m-chat-lead-size: 26px;
    --m-chat-user-size: 18px;
    --m-chat-signal-size: 15px;
    --m-chat-title-pad: 18px 40px 10px;
    --m-chat-scroll-pad: 4px 32px 14px;

    /* Navigation */
    --m-tab-height: 96px;
    --m-tab-label-size: 11px;
    --m-tabstrip-pad: 18px 40px 0;
    --m-screen-header-pad: 18px 32px 0;
    --m-appheader-pad: 20px 40px 28px;
  }
}