/* ===========================================================================
   Ticker Alpha — shared design tokens and navigation.

   Every page loads this before its own stylesheet, so the tokens below are
   the one place the palette, the type and the shape of the interface are
   decided. A page adds only what is particular to it -- the colours a
   drawdown band or a Sankey ribbon needs -- and inherits the rest.

   Type and geometry are shared across themes; only colour is chosen twice.
   The categorical slots are validated: both sets clear the lightness band,
   the chroma floor, adjacent-pair separation under deuteranopia, protanopia
   and tritanopia, the normal-vision floor and 3:1 against their own surface.
   The slot order is the same in both themes, because colour follows the
   series, not the theme.

   The desk standard, in five rules the pages are held to:
   1. One container level. A panel is card + 1px rule + var(--r), no shadow.
      Inside it, regions separate with a hairline or a --sunk ground, never a
      second border. A bordered box never contains another bordered box.
      Shadows belong to things that float (menus, tooltips, modals) only.
   2. One type scale: --fs-1 to --fs-7, three weights (400/500/600), two
      line-heights. Labels are sentence case in .lbl; no tracked uppercase.
   3. One accent, spent on links, focus rings and the single primary button on
      a screen. Selection and active states are ink. --up/--down mean direction
      and never colour a row, avatar, badge, whole bar or heading.
   4. Numbers are Inter with tabular figures. Mono is for the kbd hint and the
      sign-in code only. The serif is for headlines and findings, not UI.
   5. Anything the reader compares is a table. Empty modules collapse to one
      line; nothing keeps a box for data it does not have.
=========================================================================== */

:root {
  color-scheme: light;

  /* surfaces and ink */
  --ground:#f5f5f7; --card:#ffffff; --sunk:#f1f1f4;
  --raised:#ffffff;
  /* Three ink tiers, three perceptual steps apart: ink-3 clears 4.5:1 at
     12px on --card and --sunk, ink-2 sits between it and the headline ink. */
  --ink:#0d0d11; --ink-2:#3f3f48; --ink-3:#6b6b76;
  --rule:#e4e4e9; --rule-2:#eeeef1;
  /* One step off the Tailwind default it used to be. */
  --accent:#2352c7; --accent-soft:#e9eefb;

  /* direction: reserved, never reused as a series colour */
  --up:#0d7a46; --down:#cf3025;
  --up-soft:#e6f5ed; --down-soft:#fceceb;

  /* the categorical order: blue, pink, amber, emerald, violet, sky,
     orange, teal. Assigned in this order and never cycled. */
  --s1:#2563eb; --s2:#d9308a; --s3:#b87709; --s4:#0d9668;
  --s5:#7c4dee; --s6:#0f8fcc; --s7:#da6410; --s8:#0e9a8d;

  /* Eleven sector slots, ordered so no pair that collapses under
     deuteranopia sits next to another; validated at 11 slots. */
  --k1:#2563eb; --k2:#da6410; --k3:#0d9668; --k4:#7c4dee;
  --k5:#b87709; --k6:#0e9a8d; --k7:#4f46e5; --k8:#d9308a;
  --k9:#4d7c0f; --k10:#0f8fcc; --k11:#be123c;

  /* --shadow is for what floats. Data surfaces take --shadow-card, which is
     nothing: a panel is separated by its rule, not by elevation. */
  --shadow:0 1px 2px rgba(13,13,17,.05), 0 8px 24px -16px rgba(13,13,17,.22);
  --shadow-card:none;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* The near-neutral ladder the series colours were validated against;
     --raised is the one step above --card, for menus and popovers. */
  --ground:#0a0a0c; --card:#141417; --sunk:#1a1a1e; --raised:#1f1f24;
  --ink:#f4f4f6; --ink-2:#b4b4bf; --ink-3:#8c8d97;
  --rule:#26262c; --rule-2:#1e1e23;
  --accent:#7aa5f7; --accent-soft:#16213c;

  --up:#22c55e; --down:#f26a62;
  --up-soft:#0f2a1b; --down-soft:#2c1614;

  /* Not the light steps brightened: a saturated tint glares on near-black,
     so these are chosen mid-tone and validated against #141417. */
  --s1:#3b82f6; --s2:#db2777; --s3:#c1840d; --s4:#0fa97b;
  --s5:#8b5cf6; --s6:#1b92ce; --s7:#e06a12; --s8:#0e9c90;

  --k1:#3b82f6; --k2:#e06a12; --k3:#0fa97b; --k4:#8b5cf6;
  --k5:#c1840d; --k6:#0e9c90; --k7:#6366f1; --k8:#db2777;
  --k9:#6f8c1c; --k10:#1b92ce; --k11:#e11d48;

  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -18px rgba(0,0,0,.85);
  --shadow-card:none;
}

:root {
  /* type and geometry: one set, both themes */
  --font-sans:"Inter","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:"Source Serif 4","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  /* The scale. Seven sizes and nothing in between: a page that needs a size
     not here is asking the wrong question. */
  --fs-1:11px;   /* axis ticks, source lines */
  --fs-2:12px;   /* meta, captions, labels, chart titles */
  --fs-3:13px;   /* controls, nav, the compact screener cell */
  --fs-4:14px;   /* body, table cells, panel titles */
  --fs-5:16px;   /* section heads */
  --fs-6:20px;   /* page heads, the company name, KPI values */
  --fs-7:28px;   /* the one hero number on a page */
  --lh-tight:1.2;
  --lh-body:1.45;

  /* Spacing on a 4px grid. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;

  --r:6px;           /* panels, inputs */
  --r-2:4px;         /* buttons, menus */
  --r-3:3px;         /* chips */
  --r-pill:999px;    /* the session-state dot and nothing else */
}


/* ---- ticker tape --------------------------------------------------------
   Two identical runs side by side; the pair slides left by exactly one run's
   width and snaps back, so the join is invisible. Hovering pauses it, because
   a price you are trying to read should not walk away from you. */
.nav-strip {
  background: var(--sunk);
  border-bottom: 1px solid var(--rule-2);
  font-size: 12px;
  overflow: hidden;
}
.nav-tape {
  display: flex; width: max-content;
  animation: tape-roll var(--tape-t, 60s) linear infinite;
}
.nav-tape:hover, .nav-tape:focus-within { animation-play-state: paused; }
@keyframes tape-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--tape-w, 0px))); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-tape { animation: none; }
  .nav-strip { overflow-x: auto; scrollbar-width: none; }
  .nav-strip::-webkit-scrollbar { display: none; }
}
.tape-run { display: flex; }
.tape-i {
  display: flex; align-items: baseline; gap: 7px;
  padding: 7px 14px; white-space: nowrap;
  text-decoration: none; color: var(--ink-2);
  border-right: 1px solid var(--rule-2);
}
.tape-i:hover { background: var(--card); color: var(--ink); }
.tape-s { font-weight: 600; letter-spacing: -.01em; }
.tape-p, .tape-i .up, .tape-i .down {
  font-family: var(--font-mono); font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.tape-p { color: var(--ink-3); }
.tape-i .up { color: var(--up); }
.tape-i .down { color: var(--down); }

.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav-in {
  max-width: var(--page, 1680px); margin: 0 auto;
  display: flex; align-items: center; gap: 18px; padding: 11px 24px;
}

.nav-brand {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--ink); flex-shrink: 0;
}
.nav-brand b {
  font-family: var(--font-sans);
  font-size: 17px; font-weight: 600; letter-spacing: -.015em;
}
.nav-mark {
  /* Sized a touch above the old 26px chip so the padded full mark
     still reads at a similar visual weight without side cropping. */
  width: 30px; height: 30px; flex-shrink: 0;
  display: block; object-fit: contain;
}

.nav-links { display: flex; gap: 4px; flex-shrink: 0; }
.nav-links a {
  text-decoration: none; color: var(--ink-2); font-size: 13.5px; font-weight: 500;
  padding: 7px 11px; border-radius: 7px;
}
.nav-links a:hover { background: var(--sunk); color: var(--ink); }
/* The current page is ink with a rule under it, not a tinted pill: the
   accent is for things you can click, and you are already here. */
.nav-links a.on { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); border-radius: 0; }

.nav-search { position: relative; flex: 1; min-width: 0; max-width: 460px; margin: 0 auto;
  display: flex; align-items: stretch; }
/* The asset-type filter, drawn as the left segment of the search pill. */
.nav .nav-search select {
  flex: 0 0 auto; min-height: 0; background: var(--sunk); color: var(--ink-2);
  border: 1px solid var(--rule); border-right: 0; border-radius: 9px 0 0 9px;
  padding: 0 4px 0 10px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.nav .nav-search select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -1px;
}
/* The input and its icons keep their own positioning context, so the
   magnifier and the "/" hint sit against the field rather than the pill. */
.nav-qwrap { position: relative; flex: 1; min-width: 0; }
.nav-search svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--ink-3); pointer-events: none;
}
/* Qualified with .nav on purpose. A page that styles `input[type=text]`
   matches this field at equal specificity and, being later in the head, wins
   -- which is how the field ended up 230px wide with the icon sitting on top
   of its own placeholder. */
.nav .nav-search input {
  width: 100%; min-width: 0; background: var(--sunk); border: 1px solid var(--rule);
  border-radius: 0 9px 9px 0; padding: 9px 34px 9px 34px; min-height: 0;
  font: inherit; font-family: inherit; font-size: 13px; color: var(--ink);
}
.nav .nav-search input::placeholder { color: var(--ink-3); }
.nav .nav-search input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; background: var(--card);
}
.nav-search kbd {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3);
  border: 1px solid var(--rule); border-radius: 5px; padding: 1px 6px;
  background: var(--card); pointer-events: none;
}
.nav-ac {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 120;
  background: var(--raised); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--shadow); overflow: hidden; display: none;
}
.nav-ac.open { display: block; }
.nav-ac div {
  padding: 9px 12px; cursor: pointer; display: flex; gap: 11px;
  align-items: baseline; border-bottom: 1px solid var(--rule-2);
}
.nav-ac div:last-child { border-bottom: 0; }
.nav-ac div:hover, .nav-ac div[aria-selected="true"] { background: var(--sunk); }
.nav-ac b {
  font-size: var(--fs-3); font-weight: 600; text-transform: uppercase;
  font-variant-numeric: tabular-nums; min-width: 58px; color: var(--ink);
}
.nav-ac span {
  font-size: 12.5px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav .nav-theme {
  background: transparent; border: 1px solid var(--rule); border-radius: 8px;
  width: 34px; height: 34px; cursor: pointer; color: var(--ink-2);
  font-size: 14px; line-height: 1;
}
.nav .nav-theme:hover { border-color: var(--ink-3); color: var(--ink); }
.nav .nav-theme svg { width: 16px; height: 16px; display: block; margin: 0 auto; }
/* Secondary: outlined. The one primary button on a screen belongs to the
   page, not to the chrome that is on every page. */
.nav .nav-login {
  background: transparent; color: var(--ink); border: 1px solid var(--rule);
  border-radius: var(--r-2); padding: 8px 14px; font: inherit;
  font-size: var(--fs-3); font-weight: 600; cursor: pointer;
}
.nav .nav-login:hover { border-color: var(--ink-3); }
.nav-note {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 9px 20px; font-size: 12.5px;
  background: var(--down-soft); color: var(--down);
  border-bottom: 1px solid var(--rule);
}
.nav-note button {
  background: none; border: 0; cursor: pointer; color: inherit;
  font: inherit; font-size: 16px; line-height: 1; padding: 0 4px;
}

.nav-acct { position: relative; }
.nav .nav-user {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--rule); border-radius: 8px;
  padding: 5px 9px 5px 5px; color: var(--ink-2); font: inherit; font-size: 13px;
}
.nav .nav-user:hover { border-color: var(--ink-3); }
.nav-user img, .nav-avatar {
  width: 24px; height: 24px; border-radius: 50%; object-fit: cover;
  background: var(--sunk); color: var(--ink-2);
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
}
.nav-caret { width: 9px; height: 6px; color: var(--ink-3); flex-shrink: 0; }
.nav-user[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute; top: calc(100% + 7px); right: 0; z-index: 130; min-width: 214px;
  background: var(--raised); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--shadow); overflow: hidden;
}
.nav-who {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 14px; border-bottom: 1px solid var(--rule-2);
}
.nav-who b { font-size: 13px; font-weight: 600; color: var(--ink); }
.nav-who span {
  font-size: 12px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav .nav-menu button {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; padding: 10px 14px;
  font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer;
}
.nav .nav-menu button:hover { background: var(--sunk); color: var(--down); }

/* ---- bottom tab bar ------------------------------------------------------
   The top links vanish below 1080px, so below 1080px this takes over. Fixed to
   the bottom because that is where a thumb is, and because it then survives a
   long scroll -- which a top bar on a 3,700px page does not. */
.tabbar { display: none; }

@media (max-width: 1080px) {
  .nav-links { display: none; }

  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    /* One row whatever the count: six items on a fixed five-column grid put
       the sixth on a second row, over the page. */
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    background: color-mix(in srgb, var(--card) 96%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--rule);
    /* Clears the iPhone home indicator without padding on other devices. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 7px 2px 6px; text-decoration: none;
    color: var(--ink-3); font-size: 10px; font-weight: 600; letter-spacing: -.005em;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar a svg { width: 21px; height: 21px; }
  .tabbar a.on { color: var(--ink); }
  .tabbar a.on svg { stroke-width: 2.2; }
  .tabbar a:active { background: var(--sunk); }

  /* Content must not end underneath the bar. 54px is the bar, plus the inset. */
  body { padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px)); }

  /* The ticker tape is decoration; on a phone it is 33px of the viewport spent
     on something nobody navigates by, and it pushed real content below the
     fold on every page. */
  .nav-strip { display: none; }

  .nav-in { padding: 8px 12px; gap: 10px; }
  /* Keep the 34px left inset: the magnifier is absolutely positioned at
     left:11px, so a symmetric padding puts the placeholder underneath it. */
  .nav .nav-search input { padding: 8px 12px 8px 34px; font-size: 13px; }
}
@media (max-width: 720px) {
  .nav-in { padding: 10px 14px; gap: 10px; }
  .nav-brand b { display: none; }
  .nav-search kbd { display: none; }
  /* The asset-type filter took a third of the field on a phone and left
     the placeholder clipped to "Searc". Search still covers every type. */
  .nav .nav-search select { display: none; }
  .nav .nav-search input { border-radius: 9px; }
  .nav-strip .nav-in { padding: 7px 14px; gap: 14px; }
}

/* ---- site footer -------------------------------------------------------- */
.site-foot {
  max-width: var(--page, 1680px); margin: 36px auto 0; padding: 18px 28px 40px;
  border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline;
  justify-content: space-between;
}
.site-foot a { color: var(--ink-2); text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }
.site-foot .site-foot-links { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
/* Reads as one of the footer links, but has to be a button: it reopens the
   consent banner rather than navigating anywhere. */
.site-foot .foot-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--ink-2); text-decoration: none;
}
.site-foot .foot-link:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 720px) {
  .site-foot { padding: 16px 14px 32px; margin-top: 24px; }
}

/* ---- signup modal (anonymous watchlist add) ----------------------------- */
.auth-modal {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center; padding: 20px;
  background: rgba(17, 24, 32, .48);
  backdrop-filter: blur(4px);
  animation: auth-fade .18s ease;
}
@keyframes auth-fade { from { opacity: 0; } to { opacity: 1; } }
.auth-modal-card {
  position: relative; width: min(420px, 100%);
  background: var(--card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 16px;
  box-shadow: 0 18px 50px -20px rgba(17, 24, 32, .55);
  padding: 28px 28px 22px; text-align: center;
  animation: auth-up .22s cubic-bezier(.22, .61, .36, 1);
}
@keyframes auth-up {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.auth-modal-x {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-3); cursor: pointer;
  font-size: 20px; line-height: 1; display: grid; place-items: center;
}
.auth-modal-x:hover { background: var(--sunk); color: var(--ink); }
.auth-modal-card h2 {
  font-family: var(--font-sans);
  font-size: 24px; font-weight: 600; letter-spacing: -.02em;
  line-height: 1.25; margin: 8px 8px 12px; color: var(--ink);
}
/* What the account buys, in one line, between the headline and the legal
   note. Only shown for the gates that have something concrete to promise. */
.auth-modal-card .auth-why {
  font-size: 14px; color: var(--ink-2); margin: 0 8px 16px; line-height: 1.5;
}
.auth-modal-card .auth-legal {
  font-size: 13px; color: var(--ink-3); margin: 0 8px 22px; line-height: 1.45;
}
.auth-modal-card .auth-legal a {
  color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px;
}
.auth-modal-card .auth-legal a:hover { color: var(--accent); }
/* Reads as part of the sentence, but opens the consent sheet rather than
   navigating, so a half-typed email survives the detour. */
.auth-modal-card .auth-inline {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px;
}
.auth-modal-card .auth-inline:hover { color: var(--accent); }
.auth-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; border: 0; border-radius: 10px; cursor: pointer;
  padding: 13px 16px; font: inherit; font-size: var(--fs-4); font-weight: 600;
  background: var(--ink); color: var(--card);
}
.auth-google:hover { opacity: .92; }
.auth-google svg { width: 18px; height: 18px; flex-shrink: 0; }
.auth-sso {
  margin: 14px 0 0; font-size: 11.5px; color: var(--ink-3); letter-spacing: .01em;
}
/* ---- the email + code route -------------------------------------------
   Second on purpose. Google is one tap and stays the headline; the email
   route is for the sizeable share of finance users who will not hand a
   Google account to a site they met five minutes ago. */
.auth-or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 2px 14px; color: var(--ink-3); font-size: var(--fs-2);
}
.auth-or::before, .auth-or::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}
.auth-email { display: flex; flex-direction: column; gap: 8px; text-align: left; }
/* `hidden` is display:none in the UA sheet, and any author-level display wins
   over it -- so the flex rule above silently un-hid the step it was meant to
   hide, and the code field sat there before a code had been sent, next to a
   "send a new code" link that invalidates whatever was already in the inbox.
   Every [hidden] element needs this whenever its display is set by class. */
.auth-email[hidden] { display: none !important; }
.auth-lab {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-left: 2px;
}
.auth-modal-card .auth-email input {
  width: 100%; background: var(--sunk); border: 1px solid var(--rule);
  border-radius: 9px; padding: 11px 13px; font: inherit; font-size: 14px;
  color: var(--ink); min-height: 0;
}
.auth-modal-card .auth-email input::placeholder { color: var(--ink-3); }
.auth-modal-card .auth-email input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; background: var(--card);
}
/* Six digits read as a code, not a sentence. */
.auth-modal-card .auth-email input.auth-code {
  font-family: var(--font-mono); font-size: 21px; font-weight: 600;
  letter-spacing: .34em; text-align: center; padding: 12px 13px;
}
.auth-alt {
  width: 100%; border: 1px solid var(--rule); border-radius: 9px; cursor: pointer;
  padding: 11px 16px; font: inherit; font-size: 14px; font-weight: 600;
  background: var(--card); color: var(--ink);
}
.auth-alt:hover { border-color: var(--accent); color: var(--accent); }
.auth-alt:disabled { opacity: .55; cursor: default; border-color: var(--rule); color: var(--ink-3); }
.auth-linkbtn {
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 12.5px;
  color: var(--ink-3); padding: 2px; align-self: center; text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-linkbtn:hover { color: var(--accent); }
.auth-msg {
  margin: 12px 2px 0; font-size: 12.5px; line-height: 1.45; min-height: 1em;
  color: var(--ink-2); text-align: left;
}
.auth-msg.bad { color: var(--down); }
.auth-msg.ok  { color: var(--up); }

.auth-modal-close {
  display: inline-block; margin-top: 10px; border: 0; background: none;
  font: inherit; font-size: 13.5px; color: var(--ink-3); cursor: pointer;
  padding: 4px 8px;
}
.auth-modal-close:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 520px) {
  .auth-modal-card { padding: 24px 18px 18px; border-radius: 14px; }
  .auth-modal-card h2 { font-size: 21px; margin-left: 4px; margin-right: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-modal, .auth-modal-card { animation: none; }
}


/* ---- type polish ---------------------------------------------------------
   Inter sets a little wide at interface sizes and its default figures are
   proportional, which makes a column of numbers wander. Both are corrected
   here rather than at every call site. Hierarchy is carried by weight and
   ink, not by size: headings stay close to body size and separate themselves
   by being darker and tighter. */
body { font-size:var(--fs-4); line-height:var(--lh-body); font-optical-sizing:auto; }

/* Hierarchy is carried by weight and ink; tracking tightens only where the
   type is large enough for Inter's default spacing to look loose. */
h1, h2, h3, h4, .grouphead { font-weight:600; line-height:var(--lh-tight); letter-spacing:0; }
h1, .fs-7 { letter-spacing:-.02em; }
h2, .fs-6 { letter-spacing:-.01em; }

/* Figures line up wherever they are read in a column. */
.num, table, .kpi .v, dd, .price, .v { font-variant-numeric:lining-nums tabular-nums; }

/* ---- the shared blocks pages inherit ------------------------------------
   Defined once. A page that redefines .lbl, .note, .seg, .ax or .tbl is
   drifting; the lint counts literal sizes so the drift shows in review. */

/* The label: sentence case, one size, one weight. Replaces every tracked
   uppercase micro-label. */
.lbl { font-size:var(--fs-2); font-weight:500; color:var(--ink-3);
  letter-spacing:0; text-transform:none; line-height:var(--lh-tight); }

/* Empty and loading states: one line, left-aligned, no box, no min-height. */
.note { padding:var(--sp-3) var(--sp-4); font-size:var(--fs-2); color:var(--ink-3);
  text-align:left; line-height:var(--lh-body); }

/* Segmented control: text buttons; the active one is ink on the sunk ground. */
.seg { display:inline-flex; gap:2px; padding:2px; background:var(--sunk);
  border-radius:var(--r-2); border:0; flex-shrink:0; }
.seg:empty { display:none; }
.seg button { background:transparent; border:0; border-radius:var(--r-3);
  padding:4px 9px; font:inherit; font-size:var(--fs-3); font-weight:500;
  color:var(--ink-3); cursor:pointer; min-height:0; line-height:var(--lh-tight); }
.seg button:hover { color:var(--ink); }
.seg button[aria-pressed=true], .seg button[aria-selected=true], .seg button.on {
  background:var(--card); color:var(--ink); font-weight:600;
  box-shadow:0 0 0 1px var(--rule); }

/* Chart text: one size, one colour, tabular. */
svg .ax, .ax { font-family:var(--font-sans); font-size:var(--fs-1); fill:var(--ink-3);
  font-variant-numeric:tabular-nums; }
.chart-grid { stroke:var(--rule-2); stroke-width:1; }

/* The table: body-size cells, right-aligned tabular numerics, sentence-case
   headers in the label style, hairline rows. */
.tbl { width:100%; border-collapse:collapse; font-size:var(--fs-4); }
.tbl th { font-size:var(--fs-1); font-weight:500; color:var(--ink-3); text-align:left;
  letter-spacing:0; text-transform:none; padding:8px 12px; border-bottom:1px solid var(--rule); }
.tbl td { padding:8px 12px; border-bottom:1px solid var(--rule-2); vertical-align:middle; }
.tbl th.num, .tbl td.num { text-align:right; font-variant-numeric:tabular-nums; }
.tbl tbody tr:hover td { background:var(--sunk); }

/* Tickers: Inter, bold, uppercase, tabular. Not monospace. */
.tick, .sym { font-weight:600; text-transform:uppercase; letter-spacing:0;
  font-variant-numeric:tabular-nums; }

/* The one serif: headlines and findings. Never controls, labels or numbers. */
.serif, .finding { font-family:var(--font-serif); font-weight:400;
  font-optical-sizing:auto; letter-spacing:0; }

/* A unit or currency beside a figure is support, not headline. */
.kpi .v small, .v .unit { font-weight:500; color:var(--ink-3); }