/* Clarion - calm, Apple-Newsroom-inspired layout.
   One typeface (Inter, bundled so it never falls back to Times), a neutral grey/white base, one blue accent.
   Category families keep the validated 6-hue palette (colour-blind checked 2026-10-03) but only as small
   dots; priority uses separate status colours; price moves always carry a sign and an arrow. */

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --page: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --fill: rgba(0, 0, 0, 0.05);      /* quiet control backgrounds */
  --fill-hover: rgba(0, 0, 0, 0.08);
  --ink: #1d1d1f;
  --ink-2: #424245;
  --muted: #6e6e73;
  --hair: rgba(0, 0, 0, 0.09);
  --accent: #0071e3;
  --accent-soft: rgba(0, 113, 227, 0.1);
  --on-accent: #ffffff;  /* text on an accent-coloured button */
  --nav: rgba(251, 251, 253, 0.8);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --shadow-lift: 0 10px 40px rgba(0, 0, 0, 0.1);

  /* category families (categorical palette, light steps) */
  --f-earnings: #2a78d6;
  --f-deals: #eb6834;
  --f-fda: #1baf7a;
  --f-insiders: #eda100;
  --f-risk: #e87ba4;
  --f-macro: #4a3aa7;
  --f-other: #898781;

  /* priority (status palette: reserved, never a category) */
  --s-critical: #d03b3b;
  --s-high: #ec835a;
  --s-medium: #fab219;
  --s-low: #a9a8a1;
  --t-critical: #c4271d;  /* text on a light tint */
  --t-high: #b04a12;

  /* price moves (text); always shown with + / - and an arrow */
  --up: #248a3d;
  --down: #d70015;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  --r-card: 18px;
  --r-ctl: 980px;
  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);  /* Apple's page easing */
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #000000;
    --surface: #161617;
    --surface-2: #232325;
    --fill: rgba(255, 255, 255, 0.08);
    --fill-hover: rgba(255, 255, 255, 0.13);
    --ink: #f5f5f7;
    --ink-2: #d2d2d7;
    --muted: #86868b;
    --hair: rgba(255, 255, 255, 0.1);
    --accent: #2997ff;
    --accent-soft: rgba(41, 151, 255, 0.16);
    --on-accent: #06121f;
    --nav: rgba(22, 22, 23, 0.8);
    --shadow: none;
    --shadow-lift: 0 10px 40px rgba(0, 0, 0, 0.6);
    --f-earnings: #3987e5;
    --f-deals: #d95926;
    --f-fda: #199e70;
    --f-insiders: #c98500;
    --f-risk: #d55181;
    --f-macro: #9085e9;
    --f-other: #898781;
    --s-low: #5d5c57;
    --t-critical: #ff6961;
    --t-high: #ff9f6b;
    --up: #30d158;
    --down: #ff453a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #000000;
  --surface: #161617;
  --surface-2: #232325;
  --fill: rgba(255, 255, 255, 0.08);
  --fill-hover: rgba(255, 255, 255, 0.13);
  --ink: #f5f5f7;
  --ink-2: #d2d2d7;
  --muted: #86868b;
  --hair: rgba(255, 255, 255, 0.1);
  --accent: #2997ff;
  --accent-soft: rgba(41, 151, 255, 0.16);
  --on-accent: #06121f;
  --nav: rgba(22, 22, 23, 0.8);
  --shadow: none;
  --shadow-lift: 0 10px 40px rgba(0, 0, 0, 0.6);
  --f-earnings: #3987e5;
  --f-deals: #d95926;
  --f-fda: #199e70;
  --f-insiders: #c98500;
  --f-risk: #d55181;
  --f-macro: #9085e9;
  --f-other: #898781;
  --s-low: #5d5c57;
  --t-critical: #ff6961;
  --t-high: #ff9f6b;
  --up: #30d158;
  --down: #ff453a;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* component display rules must never un-hide an element */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 15px/1.47 var(--font);
  letter-spacing: -0.009em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11";  /* Inter: single-storey a reads softer */
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
button, select, input { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }
.num, .tnum { font-variant-numeric: tabular-nums; }

/* ---------- navigation bar (translucent, like apple.com) ---------- */
.nav {
  position: sticky; top: 0; z-index: 20; background: var(--nav);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hair);
}
.nav-inner { max-width: 1120px; margin: 0 auto; padding: 0 22px; height: 52px; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }
.mark { color: var(--ink); }
.mark-dot { fill: var(--accent); }
.sections { flex: 1; min-width: 0; }
.sections-inner { display: flex; gap: 2px; justify-content: center; overflow-x: auto; scrollbar-width: none; }
.sections-inner::-webkit-scrollbar { display: none; }
.sections button {
  border: 0; background: none; padding: 6px 12px; border-radius: var(--r-ctl); font-size: 13px; font-weight: 500;
  color: var(--muted); cursor: pointer; white-space: nowrap; transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.sections button:hover { color: var(--ink); }
.sections button[aria-selected="true"] { color: var(--ink); background: var(--fill); font-weight: 600; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--s-low); position: relative; }
.status.ok .dot { background: var(--up); }
.status.ok .dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--up); opacity: 0;
  animation: ping 3s var(--ease) infinite;
}
.status.warn .dot { background: var(--s-medium); }
.status.bad .dot { background: var(--s-critical); }
@keyframes ping { 0% { transform: scale(0.5); opacity: 0.6; } 100% { transform: scale(1.5); opacity: 0; } }
.icon-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer; color: var(--muted); transition: background-color 0.2s, color 0.2s;
}
.icon-btn:hover { background: var(--fill); color: var(--ink); }

/* ---------- page ---------- */
.page { max-width: 1120px; margin: 0 auto; padding: 0 22px 40px; }
.view { animation: fade 0.5s var(--ease) both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.banner { color: var(--t-critical); background: var(--surface); border-radius: 12px; padding: 12px 16px; margin-top: 16px; box-shadow: var(--shadow); }

.page-head { padding: 30px 0 18px; }
.page-head h1 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.08; font-weight: 700; letter-spacing: -0.022em; margin: 0; }
.overline { margin: 0 0 6px; color: var(--muted); font-size: 14px; font-weight: 500; }
.lede { margin: 6px 0 0; color: var(--muted); font-size: 16px; line-height: 1.4; letter-spacing: -0.014em; max-width: 640px; }
.page-head.with-actions { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.head-actions { display: flex; gap: 8px; }

.section-title { margin: 36px 0 12px; font-size: 21px; line-height: 1.17; font-weight: 700; letter-spacing: -0.019em; }
.card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); }
.panel { padding: 18px 20px; }
.panel-title { margin: 0 0 12px; font-size: 17px; font-weight: 600; letter-spacing: -0.012em; display: flex; align-items: baseline; gap: 8px; }
.hint { color: var(--muted); font-size: 13px; font-weight: 400; letter-spacing: 0; }

/* ---------- controls ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 20px; }
.search {
  flex: 1 1 220px; max-width: 320px; display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 36px;
  border-radius: var(--r-ctl); background: var(--fill); color: var(--muted); transition: background-color 0.2s, box-shadow 0.2s;
}
.search:focus-within { background: var(--surface); box-shadow: 0 0 0 2px var(--accent); }
.search input { border: 0; outline: 0; background: none; width: 100%; color: var(--ink); font-size: 14px; }
.search input::placeholder { color: var(--muted); }
.seg { display: inline-flex; background: var(--fill); border-radius: var(--r-ctl); padding: 2px; }
.seg button {
  border: 0; background: none; padding: 6px 14px; border-radius: var(--r-ctl); font-size: 13px; font-weight: 500;
  color: var(--ink-2); cursor: pointer; transition: background-color 0.25s var(--ease), color 0.25s, box-shadow 0.25s;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-checked="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.quiet-select {
  height: 36px; border: 0; border-radius: var(--r-ctl); background: var(--fill); padding: 0 12px; font-size: 13px;
  font-weight: 500; color: var(--ink-2); cursor: pointer; transition: background-color 0.2s;
}
.quiet-select:hover { background: var(--fill-hover); }
.link-btn { border: 0; background: none; color: var(--accent); font-size: 14px; cursor: pointer; padding: 6px 4px; display: inline-flex; align-items: center; gap: 4px; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn {
  border: 0; background: var(--fill); border-radius: var(--r-ctl); padding: 8px 18px; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background-color 0.2s, transform 0.15s var(--ease), opacity 0.2s;
}
.btn:hover { background: var(--fill-hover); }
a.btn { display: inline-block; text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.primary:hover { opacity: 0.88; }
.btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.danger { color: var(--down); }

/* new stories pill */
.new-pill {
  position: fixed; left: 50%; top: 66px; z-index: 30; transform: translate(-50%, -16px); opacity: 0;
  border: 0; border-radius: var(--r-ctl); padding: 9px 18px; background: var(--accent); color: var(--on-accent);
  font-weight: 600; font-size: 14px; cursor: pointer; box-shadow: var(--shadow-lift);
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.new-pill.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- markets strip ---------- */
.markets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.markets:empty { display: none; }
.mtile {
  all: unset; box-sizing: border-box; cursor: pointer; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: 12px 16px 10px; display: grid; gap: 1px; font-variant-numeric: tabular-nums;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  animation: rise 0.6s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms);
}
.mtile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.mtile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mtile .nm { font-size: 13px; color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtile .val { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.mtile .spark { margin-top: 6px; width: 100%; }

/* ---------- stories ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.story { position: relative; animation: rise 0.6s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.fam { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink-2); }
.fam::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fam, var(--f-other)); }
.tk-link {
  border: 0; background: none; padding: 0; font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer;
}
.tk-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.tk-plain { font-weight: 600; color: var(--ink-2); }
.sep { color: var(--muted); opacity: 0.6; }
.when { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fresh { color: var(--accent); font-weight: 600; }
.headline { display: block; font-weight: 600; font-size: 17px; line-height: 1.3; letter-spacing: -0.014em; color: var(--ink); text-decoration: none; text-wrap: pretty; }
a.headline:hover { color: var(--accent); }
.why { margin-top: 10px; color: var(--muted); font-size: 15px; }
.foot-line { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--muted); font-size: 13px; }
.src { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.pchg { display: inline-flex; gap: 6px; align-items: baseline; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pchg b { font-weight: 600; }
.up { color: var(--up); font-weight: 500; }
.down { color: var(--down); font-weight: 500; }
.lvl { border-radius: var(--r-ctl); padding: 2px 9px; font-size: 12px; font-weight: 600; }
.lvl-critical { color: var(--t-critical); background: color-mix(in srgb, var(--s-critical) 13%, transparent); }
.lvl-high { color: var(--t-high); background: color-mix(in srgb, var(--s-high) 15%, transparent); }
.tone { border-radius: var(--r-ctl); padding: 2px 9px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.tone-good { color: var(--up); background: color-mix(in srgb, var(--up) 12%, transparent); }
.tone-bad { color: var(--down); background: color-mix(in srgb, var(--down) 10%, transparent); }

/* votes: quiet until the card is hovered (always visible on touch screens, and once you have voted) */
.votes { margin-left: auto; display: inline-flex; gap: 2px; }
.vote {
  width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer;
  display: grid; place-items: center; opacity: 0; transition: opacity 0.25s var(--ease), background-color 0.2s, color 0.2s, transform 0.2s;
}
.story:hover .vote, .story:focus-within .vote, .vote[aria-pressed="true"] { opacity: 1; }
@media (hover: none) { .vote { opacity: 1; } }
.vote:hover { background: var(--fill); color: var(--ink); }
.vote[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
.vote.pop { animation: pop 0.35s var(--ease); }
@keyframes pop { 40% { transform: scale(1.25); } }

/* hero */
.hero { background: var(--surface); border-radius: 24px; box-shadow: var(--shadow); padding: 26px 30px 22px; }
.hero .eyebrow { font-size: 13px; margin-bottom: 10px; }
.hero .tk-link { font-size: 13px; }
.hero .headline { font-size: clamp(22px, 2.8vw, 32px); font-weight: 700; line-height: 1.1; letter-spacing: -0.022em; max-width: 880px; }
.hero .why { font-size: 17px; }
.hero .foot-line { margin-top: 16px; font-size: 14px; }

/* cards grid */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid .story {
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 16px 20px 14px;
  display: flex; flex-direction: column; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.grid .story:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.grid .headline { font-size: 17px; line-height: 1.26; letter-spacing: -0.016em; }
.grid .foot-line { margin-top: auto; padding-top: 14px; }

/* river: one card, rows split by hairlines */
.river { list-style: none; margin: 0; padding: 6px 0; }
.river .story { padding: 11px 20px; transition: background-color 0.2s; }
.river .story + .story::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: var(--hair); }
.river .story:hover { background: color-mix(in srgb, var(--fill) 50%, transparent); }
.river .story:first-child { border-radius: var(--r-card) var(--r-card) 0 0; }
.river .story:last-child { border-radius: 0 0 var(--r-card) var(--r-card); }
.river .headline { font-size: 16px; }
.river .foot-line { margin-top: 6px; }
.river .vote { width: 28px; height: 28px; }

.empty { padding: 36px 24px; text-align: center; color: var(--muted); list-style: none; }
#hero .empty, .timeline .empty { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); }

/* skeleton loading */
.skel { border-radius: var(--r-card); background: var(--surface); padding: 22px 24px; display: grid; gap: 10px; box-shadow: var(--shadow); }
.river .skel { box-shadow: none; }
.skel i { display: block; height: 11px; border-radius: 6px; background: linear-gradient(90deg, var(--fill) 25%, var(--fill-hover) 50%, var(--fill) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skel i:nth-child(1) { width: 30%; }
.skel i:nth-child(2) { height: 18px; width: 85%; }
.skel i:nth-child(3) { width: 50%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- movers + coming up ---------- */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 36px; }
.mini-list { display: grid; }
.mini {
  display: grid; grid-template-columns: minmax(0, 1fr) 64px auto; align-items: center; gap: 14px; padding: 9px 10px; margin: 0 -10px;
  border-radius: 12px; cursor: pointer; border: 0; background: none; text-align: left; width: calc(100% + 20px);
  font-variant-numeric: tabular-nums; transition: background-color 0.2s;
}
.mini:hover { background: var(--fill); }
.mini .nm { font-weight: 600; font-size: 15px; min-width: 0; }
.mini .sub { color: var(--muted); font-size: 12px; display: block; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini .val { text-align: right; font-size: 14px; }
.mini .val span { display: block; }
.mini .val .px { font-weight: 500; }
.upcoming { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.upcoming li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; }
.upcoming li.hint { display: block; }
.cal-date { text-align: center; line-height: 1.1; }
.cal-date small { display: block; color: var(--t-critical); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.cal-date b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.upcoming .what { font-size: 14px; min-width: 0; }
.upcoming .what b { font-weight: 600; }
.upcoming .what span { display: block; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* sparkline */
.spark { display: block; overflow: visible; }
.spark .base { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.5; }
.spark .line { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.spark.is-up .line { stroke: var(--up); }
.spark.is-down .line { stroke: var(--down); }
.spark.is-up .end { fill: var(--up); }
.spark.is-down .end { fill: var(--down); }

/* ---------- calendar ---------- */
.timeline { display: grid; gap: 18px; }
.day { display: grid; grid-template-columns: 120px 1fr; gap: 24px; animation: rise 0.6s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
.day-label { position: sticky; top: 76px; align-self: start; padding-top: 14px; }
.day-label b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.day-label small { color: var(--muted); font-size: 13px; }
.day.today .day-label b { color: var(--accent); }
.events { list-style: none; margin: 0; padding: 4px 0; }
.event { position: relative; padding: 11px 20px; }
.event + .event::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: var(--hair); }
.event .eyebrow { margin-bottom: 4px; }
.event .title { font-weight: 600; font-size: 16px; line-height: 1.35; letter-spacing: -0.012em; }
.event a.title { text-decoration: none; }
.event a.title:hover { color: var(--accent); }
.event .detail { color: var(--muted); font-size: 13px; margin-top: 4px; }

/* ---------- watchlist ---------- */
.watch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.wcard {
  position: relative; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 14px 16px 12px;
  display: grid; gap: 10px; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  animation: rise 0.6s var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms); font-variant-numeric: tabular-nums;
}
.wcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.wcard .open { all: unset; cursor: pointer; display: grid; gap: 4px; }
.wcard .open:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 8px; }
.wcard .row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.wcard .tk { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.wcard .px { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.wcard .name { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wcard .row > span:last-child { white-space: nowrap; flex-shrink: 0; font-size: 13px; }
.wcard .spark { margin: 8px 0 4px; }
.wcard .note { font-size: 13px; color: var(--muted); display: flex; gap: 6px 12px; flex-wrap: wrap; }
.wcard .note .busy { color: var(--accent); font-weight: 600; }
.wcard .edit-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-top: 1px solid var(--hair); padding-top: 12px; }
.wcard .edit-bar select { border: 0; border-radius: var(--r-ctl); background: var(--fill); padding: 5px 10px; font-size: 12px; }
.wcard .edit-bar .btn { padding: 5px 12px; font-size: 12px; }
.wcard .locked { font-size: 12px; color: var(--muted); }
.tag { border-radius: var(--r-ctl); padding: 2px 9px; font-size: 12px; font-weight: 500; background: var(--fill); color: var(--ink-2); }
.editing .wcard { animation: settle 0.35s var(--ease) both; }
@keyframes settle { from { transform: scale(0.98); } to { transform: none; } }

/* ---------- ticker page ---------- */
.back { margin: 18px 0 0 -4px; }
.tk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 8px 0 16px; }
.tk-symbol { font-size: clamp(40px, 5vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; margin: 0; }
.tk-name { margin: 0 0 4px; color: var(--muted); font-size: 17px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tk-quote { text-align: right; font-variant-numeric: tabular-nums; }
.tk-price { font-size: clamp(30px, 3.6vw, 40px); font-weight: 600; line-height: 1.1; letter-spacing: -0.022em; }
.tk-change { font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: flex-end; color: var(--muted); margin-top: 4px; }
.chart-panel { padding: 18px 22px 12px; }
.chart-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 10px; }
.chart-day { font-size: 14px; font-weight: 600; margin-right: auto; }
.legend { color: var(--muted); font-size: 12px; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#lg-ref { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
#lg-ref[hidden] { display: none; }
.lg-dash { width: 16px; border-top: 1.5px dashed var(--muted); }
.lg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--s-high); }
.chart { position: relative; height: 260px; outline: none; }
.chart:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: 10px; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart .band { fill: var(--surface-2); }
.chart .gridline { stroke: var(--hair); stroke-width: 1; }
.chart .axis-label { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .ref { stroke: var(--muted); stroke-dasharray: 3 4; stroke-width: 1; opacity: 0.7; }
.chart .ref-label { fill: var(--muted); font-size: 11px; }
.chart .pline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart.is-up .pline { stroke: var(--up); }
.chart.is-down .pline { stroke: var(--down); }
.chart .area { opacity: 0.1; }
.chart.is-up .area { fill: var(--up); }
.chart.is-down .area { fill: var(--down); }
.chart .xhair { stroke: var(--muted); stroke-width: 1; }
.chart .xdot { stroke: var(--surface); stroke-width: 2; }
.chart.is-up .xdot { fill: var(--up); }
.chart.is-down .xdot { fill: var(--down); }
.chart .marker { cursor: pointer; stroke: var(--surface); stroke-width: 2; transition: r 0.2s var(--ease); }
.chart .marker:hover, .chart .marker.hot { r: 8; }
.tip {
  position: absolute; pointer-events: none; background: var(--surface); color: var(--ink); border-radius: 12px;
  padding: 8px 12px; font-size: 12px; line-height: 1.45; max-width: 280px; box-shadow: var(--shadow-lift);
  border: 1px solid var(--hair); transform: translate(-50%, -100%); white-space: normal; z-index: 5; font-variant-numeric: tabular-nums;
}
.tip b { font-weight: 600; font-size: 14px; }
/* AI brief */
.brief { margin-top: 12px; padding: 20px 22px; }
.brief:empty { display: none; }
.brief-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-bottom: 4px; }
.brief-top .panel-title { margin: 0; margin-right: auto; }
.lean { border-radius: var(--r-ctl); padding: 3px 11px; font-size: 13px; font-weight: 600; }
.lean-positive { color: var(--up); background: color-mix(in srgb, var(--up) 12%, transparent); }
.lean-negative { color: var(--down); background: color-mix(in srgb, var(--down) 10%, transparent); }
.lean-mixed { color: var(--t-high); background: color-mix(in srgb, var(--s-medium) 18%, transparent); }
.lean-unclear { color: var(--ink-2); background: var(--fill); }
.conf { font-size: 13px; color: var(--muted); }
.brief-intro { margin: 8px 0 4px; font-size: 17px; letter-spacing: -0.012em; max-width: 680px; }
.brief-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.brief-summary { margin: 12px 0 0; font-size: 19px; line-height: 1.4; letter-spacing: -0.014em; max-width: 820px; }
.brief-why { margin: 8px 0 0; color: var(--muted); font-size: 15px; max-width: 820px; }
.brief-stale { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px;
  color: var(--t-high); background: color-mix(in srgb, var(--s-medium) 14%, transparent); border-radius: 12px; padding: 8px 14px; }
.brief-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.brief-col { border-radius: 14px; padding: 16px 18px; background: var(--surface-2); }
.brief-col h3, .brief-watch h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.brief-col h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.brief-col.good h3::before { background: var(--up); }
.brief-col.bad h3::before { background: var(--down); }
.points { margin: 0; padding: 0 0 0 18px; display: grid; gap: 8px; font-size: 15px; line-height: 1.4; }
.points li::marker { color: var(--muted); }
.cites { display: inline-flex; gap: 3px; vertical-align: 1px; }
.cite {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; border: 0; background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; text-decoration: none; cursor: pointer;
  font-variant-numeric: tabular-nums; transition: background-color 0.2s, color 0.2s;
}
.cite:hover { background: var(--accent); color: var(--on-accent); }
.brief-watch { margin-top: 18px; }
.brief-watch ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.brief-watch li { display: inline-flex; gap: 8px; align-items: baseline; background: var(--surface-2); border-radius: 10px; padding: 6px 12px; font-size: 14px; }
.brief-watch li b { color: var(--t-critical); font-weight: 600; }
.brief-noise { margin-top: 16px; font-size: 14px; color: var(--muted); }
.brief-noise summary { cursor: pointer; font-weight: 500; }
.brief-noise .points { margin-top: 8px; font-size: 14px; }
.brief-foot { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 4px 16px;
  align-items: center; color: var(--muted); font-size: 12px; }
.brief-foot .link-btn { font-size: 12px; margin-left: auto; padding: 0; }
.brief-loading { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 15px; padding: 6px 0; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--fill-hover); border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.tk-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.tk-side { display: grid; gap: 12px; margin-top: 36px; }
.filings { display: grid; gap: 12px; }
.filing { font-size: 14px; border-radius: 10px; transition: box-shadow 0.3s; }
.filing a { text-decoration: none; font-weight: 600; }
.filing a:hover { color: var(--accent); }
.filing small { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--muted); font-size: 12px; margin-top: 2px; }
.story.flash, .filing.flash { animation: flash 1.8s var(--ease); }
.wcard.flash { animation: flash 2.4s var(--ease); }
@keyframes flash { 0%, 40% { box-shadow: inset 0 0 0 2px var(--accent); } 100% { box-shadow: inset 0 0 0 2px transparent; } }

/* ---------- dialog, toast ---------- */
dialog {
  border: 0; border-radius: 22px; padding: 28px 30px; width: min(520px, calc(100vw - 32px));
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lift);
}
dialog[open] { animation: pop-in 0.35s var(--ease) both; }
@keyframes pop-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
dialog::backdrop { background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
dialog h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.019em; margin: 0 0 18px; }
.field { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 14px; }
.field small { font-weight: 400; color: var(--muted); }
.field input, .field select {
  height: 42px; border: 1px solid var(--hair); border-radius: 12px; padding: 0 14px; background: var(--surface-2); color: var(--ink);
  font-size: 15px; transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.field-row .field { flex: 0 0 auto; }
.field-row .grow { flex: 1 1 200px; }
.field-row > .btn { margin-bottom: 14px; height: 42px; }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; margin: 4px 0 14px; cursor: pointer; }
.found { border-radius: 12px; background: var(--surface-2); padding: 12px 14px; font-size: 13px; margin-bottom: 14px; display: grid; gap: 4px; }
.found .ok { color: var(--up); font-weight: 500; }
.found .warn { color: var(--t-critical); font-weight: 500; }
.form-error { color: var(--t-critical); font-size: 13px; margin: 0 0 10px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; z-index: 40;
  background: var(--ink); color: var(--page); padding: 11px 20px; border-radius: var(--r-ctl); font-weight: 500; font-size: 14px;
  box-shadow: var(--shadow-lift); transition: transform 0.4s var(--ease), opacity 0.4s var(--ease); max-width: calc(100vw - 32px);
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- footer ---------- */
.foot { max-width: 1120px; margin: 40px auto 0; padding: 20px 22px 40px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--hair); }
.foot p { margin: 0 0 4px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .markets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo, .tk-body, .brief-cols { grid-template-columns: 1fr; }
  .tk-side { margin-top: 0; }
  .status #status-text { display: none; }
}
@media (max-width: 720px) {
  .nav-inner { height: auto; flex-wrap: wrap; padding: 10px 16px 0; gap: 8px 12px; }
  .brand { flex: 1; }
  .sections { order: 3; flex-basis: 100%; margin: 0 -16px; }
  .sections-inner { justify-content: flex-start; padding: 0 12px 8px; }
  .page { padding: 0 16px 32px; }
  .page-head { padding: 20px 0 14px; }
  .lede { font-size: 15px; }
  .search { max-width: none; flex-basis: 100%; }
  .toolbar .seg { flex: 1 1 100%; }
  .toolbar .seg button { flex: 1; padding: 6px 8px; }
  .quiet-select { flex: 1 1 0; min-width: 0; }
  .grid { grid-template-columns: 1fr; }
  .hero { padding: 20px 18px 16px; border-radius: var(--r-card); }
  .river .story, .event { padding-left: 18px; padding-right: 18px; }
  .river .story + .story::before, .event + .event::before { left: 18px; right: 18px; }
  .panel { padding: 18px 18px; }
  .brief { padding: 20px 18px; }
  .brief-summary { font-size: 17px; }
  .section-title { margin-top: 28px; }
  .duo { margin-top: 28px; }
  .day { grid-template-columns: 1fr; gap: 8px; }
  .day-label { position: static; padding-top: 0; }
  .new-pill { top: 100px; }
  .tk-quote { text-align: left; width: 100%; }
  .tk-change { justify-content: flex-start; font-size: 14px; }
  .chart { height: 240px; }
  .legend { display: none; }
  .foot { padding: 18px 16px 32px; }
}

/* Respect "reduce motion": no animation or movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- extra themes (generated by the theme table; every theme sets the full variable list) ---------- */
:root[data-theme="midnight"] {
  color-scheme: dark;
  --f-earnings: #3987e5;
  --f-deals: #d95926;
  --f-fda: #199e70;
  --f-insiders: #c98500;
  --f-risk: #d55181;
  --f-macro: #9085e9;
  --f-other: #898781;
  --shadow: none;
  --shadow-lift: 0 10px 40px rgba(0, 0, 0, 0.6);
  --page: #08090a;
  --surface: #111214;
  --surface-2: #191a1d;
  --fill: rgba(255, 255, 255, 0.06);
  --fill-hover: rgba(255, 255, 255, 0.1);
  --ink: #f7f8f8;
  --ink-2: #d0d6e0;
  --muted: #8a8f98;
  --hair: rgba(255, 255, 255, 0.08);
  --accent: #8b93f5;
  --accent-soft: rgba(139, 147, 245, 0.16);
  --on-accent: #0b0c10;
  --nav: rgba(8, 9, 10, 0.78);
  --s-low: #5d5c57;
  --t-critical: #ff7b72;
  --t-high: #ff9f6b;
  --up: #4cd48a;
  --down: #ff6b6b;
}
:root[data-theme="terminal"] {
  color-scheme: dark;
  --f-earnings: #3987e5;
  --f-deals: #d95926;
  --f-fda: #199e70;
  --f-insiders: #c98500;
  --f-risk: #d55181;
  --f-macro: #9085e9;
  --f-other: #898781;
  --shadow: none;
  --shadow-lift: 0 10px 40px rgba(0, 0, 0, 0.6);
  --page: #0b0a07;
  --surface: #15130d;
  --surface-2: #1e1b12;
  --fill: rgba(255, 176, 0, 0.08);
  --fill-hover: rgba(255, 176, 0, 0.14);
  --ink: #f4e6c4;
  --ink-2: #dccb9f;
  --muted: #a0937a;
  --hair: rgba(255, 176, 0, 0.16);
  --accent: #ffb000;
  --accent-soft: rgba(255, 176, 0, 0.14);
  --on-accent: #1a1200;
  --nav: rgba(11, 10, 7, 0.82);
  --s-low: #6b6250;
  --t-critical: #ff8a78;
  --t-high: #ffb066;
  --up: #6fdc6f;
  --down: #ff7a66;
  --font: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Courier New", monospace;
}
:root[data-theme="tokyo"] {
  color-scheme: dark;
  --f-earnings: #3987e5;
  --f-deals: #d95926;
  --f-fda: #199e70;
  --f-insiders: #c98500;
  --f-risk: #d55181;
  --f-macro: #9085e9;
  --f-other: #898781;
  --shadow: none;
  --shadow-lift: 0 10px 40px rgba(0, 0, 0, 0.6);
  --page: #16161e;
  --surface: #1a1b26;
  --surface-2: #24283b;
  --fill: rgba(192, 202, 245, 0.07);
  --fill-hover: rgba(192, 202, 245, 0.12);
  --ink: #c0caf5;
  --ink-2: #a9b1d6;
  --muted: #8f98c2;
  --hair: rgba(192, 202, 245, 0.1);
  --accent: #7aa2f7;
  --accent-soft: rgba(122, 162, 247, 0.16);
  --on-accent: #16161e;
  --nav: rgba(22, 22, 30, 0.8);
  --s-low: #565f89;
  --t-critical: #f7768e;
  --t-high: #ff9e64;
  --up: #9ece6a;
  --down: #f7768e;
}
:root[data-theme="mocha"] {
  color-scheme: dark;
  --f-earnings: #3987e5;
  --f-deals: #d95926;
  --f-fda: #199e70;
  --f-insiders: #c98500;
  --f-risk: #d55181;
  --f-macro: #9085e9;
  --f-other: #898781;
  --shadow: none;
  --shadow-lift: 0 10px 40px rgba(0, 0, 0, 0.6);
  --page: #181825;
  --surface: #1e1e2e;
  --surface-2: #313244;
  --fill: rgba(205, 214, 244, 0.07);
  --fill-hover: rgba(205, 214, 244, 0.12);
  --ink: #cdd6f4;
  --ink-2: #bac2de;
  --muted: #9ea4bd;
  --hair: rgba(205, 214, 244, 0.1);
  --accent: #cba6f7;
  --accent-soft: rgba(203, 166, 247, 0.16);
  --on-accent: #181825;
  --nav: rgba(24, 24, 37, 0.8);
  --s-low: #6c7086;
  --t-critical: #f38ba8;
  --t-high: #fab387;
  --up: #a6e3a1;
  --down: #f38ba8;
}
:root[data-theme="paper"] {
  color-scheme: light;
  --f-earnings: #2a78d6;
  --f-deals: #eb6834;
  --f-fda: #1baf7a;
  --f-insiders: #eda100;
  --f-risk: #e87ba4;
  --f-macro: #4a3aa7;
  --f-other: #898781;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --shadow-lift: 0 10px 40px rgba(0, 0, 0, 0.1);
  --page: #f2ede2;
  --surface: #fbf8f1;
  --surface-2: #efe8d8;
  --fill: rgba(60, 40, 10, 0.06);
  --fill-hover: rgba(60, 40, 10, 0.1);
  --ink: #2a251d;
  --ink-2: #4d463a;
  --muted: #6f6655;
  --hair: rgba(60, 40, 10, 0.12);
  --accent: #a94a12;
  --accent-soft: rgba(169, 74, 18, 0.1);
  --on-accent: #ffffff;
  --nav: rgba(242, 237, 226, 0.82);
  --s-low: #a9a8a1;
  --t-critical: #b3261e;
  --t-high: #9a4a0a;
  --up: #2e7d32;
  --down: #b3261e;
}

/* ---------- sign-in page ---------- */
.auth-page { min-height: 100vh; display: grid; place-items: center; }
.auth { width: min(420px, calc(100vw - 32px)); padding: 48px 0; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 26px; font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: 28px; }
.auth-card { background: var(--surface); border-radius: 22px; box-shadow: var(--shadow); padding: 32px 30px 28px;
  animation: rise 0.6s var(--ease) both; }
.auth-card h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.auth-lede { margin: 6px 0 22px; color: var(--muted); font-size: 15px; }
.auth-card .field input { width: 100%; }
.auth-card .hint { margin: -6px 0 14px; font-size: 12px; }
.auth-submit { width: 100%; height: 44px; font-size: 15px; font-weight: 600; margin-top: 4px; }
.auth-foot { text-align: center; color: var(--muted); font-size: 12px; margin-top: 22px; }

/* ---------- accounts: avatar, stars, Account page ---------- */
.avatar.signed-in { background: var(--accent); color: var(--on-accent); }
.avatar.signed-in:hover { background: var(--accent); color: var(--on-accent); opacity: 0.88; }
.avatar .initial { font-size: 13px; font-weight: 600; line-height: 1; }
.star {
  border: 0; background: none; color: var(--muted); cursor: pointer; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; transition: color 0.2s, background-color 0.2s, transform 0.2s var(--ease);
}
.star:hover { background: var(--fill); color: var(--ink); }
.star[aria-pressed="true"] { color: #f5a623; }
.star.pop { animation: pop 0.35s var(--ease); }
.star.big svg { width: 24px; height: 24px; }
.tk-title { display: flex; align-items: center; gap: 6px; }
.wcard .star { position: absolute; top: 12px; right: 12px; opacity: 0; }
.wcard:hover .star, .wcard .star:focus-visible, .wcard .star[aria-pressed="true"] { opacity: 1; }
@media (hover: none) { .wcard .star { opacity: 1; } }
.wcard:has(.star) .row:first-child { padding-right: 30px; }
.account { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.account-card .hint { margin: 0 0 12px; }
.account-form .field input { width: 100%; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fav-list { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { border: 0; background: var(--fill); border-radius: var(--r-ctl); padding: 6px 14px; font-weight: 600; font-size: 13px; cursor: pointer; }
.chip-btn:hover { background: var(--accent-soft); color: var(--accent); }
.member-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.member-list li { display: flex; align-items: center; gap: 12px; }
.member-list .who { display: grid; flex: 1; min-width: 0; }
.member-list small { color: var(--muted); font-size: 12px; }
.avatar-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); font-weight: 600; font-size: 13px; flex-shrink: 0; }
.danger-text { color: var(--down); }
.invite-form { display: flex; gap: 8px; flex-wrap: wrap; }
.invite-form input, .invite-link {
  flex: 1 1 180px; height: 38px; border: 1px solid var(--hair); border-radius: 10px; padding: 0 12px; background: var(--surface-2); color: var(--ink);
}
.invite-out { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.invite-out .hint { flex-basis: 100%; margin: 0; }
@media (max-width: 900px) { .account { grid-template-columns: 1fr; } }

/* ---------- this week at a glance (rules) ---------- */
.glance-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; line-height: 1.35; }
.glance-list li { display: grid; gap: 2px; }
.glance-list b { font-size: 13px; font-weight: 600; }
.brief-col.good .glance-list b { color: var(--up); }
.brief-col.bad .glance-list b { color: var(--down); }
.glance-link { border: 0; background: none; padding: 0; text-align: left; font: inherit; color: var(--ink-2); cursor: pointer; text-decoration: none; }
.glance-link:hover { color: var(--accent); }
.glance-empty { margin: 12px 0 0; }
.brief-upsell { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--muted); }
.brief-upsell .upsell-text b { color: var(--ink); margin-right: 6px; }
.brief-upsell .btn { padding: 6px 16px; }
.wcard .wk { display: inline-flex; gap: 6px; }
.wcard .wk b { font-weight: 600; }
.wcard .wk .g { color: var(--up); }
.wcard .wk .b { color: var(--down); }

/* ---------- menus, palette, shortcuts ---------- */
.sections button svg { margin-left: 3px; vertical-align: 0; opacity: 0.7; }
.menu {
  position: fixed; z-index: 60; min-width: 230px; padding: 6px; border-radius: 16px; background: var(--surface);
  box-shadow: var(--shadow-lift); border: 1px solid var(--hair); animation: pop-in 0.18s var(--ease) both; transform-origin: top right;
}
.menu-item {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 0; background: none; border-radius: 10px;
  cursor: pointer; text-align: left; color: var(--ink); transition: background-color 0.15s;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--fill); outline: none; }
.menu-label { display: grid; flex: 1; font-size: 14px; font-weight: 500; line-height: 1.25; }
.menu-label small { color: var(--muted); font-size: 12px; font-weight: 400; }
.menu-check { color: var(--accent); font-weight: 700; }
.swatch { display: inline-flex; flex-shrink: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--hair); }
.swatch i { width: 12px; height: 24px; display: block; }

.palette { position: fixed; inset: 0; z-index: 70; display: grid; align-items: start; justify-items: center; padding: 14vh 16px 16px;
  background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade-in 0.15s ease both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.palette-box { width: min(560px, 100%); background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-lift); border: 1px solid var(--hair);
  overflow: hidden; animation: pop-in 0.2s var(--ease) both; }
.palette-box input { width: 100%; border: 0; border-bottom: 1px solid var(--hair); background: none; padding: 18px 22px; font-size: 17px;
  color: var(--ink); outline: none; }
.palette-list { list-style: none; margin: 0; padding: 8px; max-height: 50vh; overflow-y: auto; }
.palette-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; cursor: pointer; }
.palette-item[aria-selected="true"] { background: var(--accent-soft); }
.pal-label { display: flex; align-items: baseline; gap: 10px; font-weight: 600; font-size: 15px; min-width: 0; }
.pal-label small { color: var(--muted); font-weight: 400; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-kind { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0; }
.palette-empty { padding: 18px 14px; color: var(--muted); text-align: center; }
.palette-foot { margin: 0; padding: 10px 18px; display: flex; gap: 16px; border-top: 1px solid var(--hair); color: var(--muted); font-size: 12px; }
kbd { font: 500 11px/1 var(--font); padding: 3px 6px; border-radius: 6px; background: var(--fill); border: 1px solid var(--hair); color: var(--ink-2); }
.keys { margin: 0 0 8px; display: grid; gap: 4px; }
.keys div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
.keys dt { display: flex; gap: 4px; align-items: center; color: var(--muted); }
.keys dd { margin: 0; }

/* ---------- market clock ---------- */
.clock { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); white-space: nowrap; padding: 4px 10px; border-radius: var(--r-ctl); background: var(--fill); }
.clock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--s-low); }
.clock-open .clock-dot { background: var(--up); }
.clock-open { color: var(--ink-2); }
.clock-extended .clock-dot { background: var(--s-medium); }
@media (max-width: 1180px) { .clock { display: none; } }

/* ---------- Today ---------- */
.today-market { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 14px; }
.today-index { display: inline-flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.today-index small { color: var(--muted); font-weight: 600; font-size: 12px; }
.today-list { list-style: none; margin: 0; padding: 0; }
.today-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 8px 18px; padding: 14px 0; align-items: start; }
.today-row + .today-row { border-top: 1px solid var(--hair); }
.today-tk { all: unset; cursor: pointer; display: grid; gap: 2px; }
.today-tk:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.today-tk b { font-size: 17px; letter-spacing: -0.01em; }
.today-tk small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-tk:hover b { color: var(--accent); }
.today-main { display: grid; gap: 6px; min-width: 0; }
.today-story { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.today-headline { font-weight: 600; font-size: 15px; line-height: 1.3; text-decoration: none; letter-spacing: -0.01em; }
a.today-headline:hover { color: var(--accent); }
.today-story small, .today-quiet { color: var(--muted); font-size: 13px; }
.today-soon { font-size: 13px; color: var(--ink-2); }
.today-soon::before { content: "Next: "; color: var(--muted); }
.today-px { display: grid; justify-items: end; gap: 2px; font-variant-numeric: tabular-nums; font-size: 14px; }
.today-px .wk { display: inline-flex; gap: 6px; font-size: 12px; }
.today-px .wk .g { color: var(--up); } .today-px .wk .b { color: var(--down); }
.today-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.today-events li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 14px; }
.today-events b { min-width: 96px; font-weight: 600; }
.today-events .tk-link { font-size: 13px; }
#today-body > .card + .card { margin-top: 12px; }
@media (max-width: 720px) { .today-row { grid-template-columns: 1fr auto; } .today-main { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Heatmap ---------- */
.heat-sector { margin-bottom: 22px; }
.heat-title { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); display: flex; gap: 8px; align-items: baseline; }
.heat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.heat-tile {
  all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 2px; padding: 12px 12px 10px; border-radius: 14px; color: var(--ink);
  background: var(--surface-2); font-variant-numeric: tabular-nums; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  animation: rise 0.5s var(--ease) both; animation-delay: calc(var(--i, 0) * 18ms);
}
.heat-tile b { font-size: 15px; letter-spacing: -0.01em; }
.heat-tile span { font-size: 13px; }
.heat-tile:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-lift); }
.heat-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The tint tops out at 34%: the strongest tile still keeps readable text in every theme (checked). */
.heat-up { background: color-mix(in srgb, var(--up) calc(6% + var(--heat, 0) * 28%), var(--surface)); box-shadow: inset 0 -3px 0 var(--up); }
.heat-down { background: color-mix(in srgb, var(--down) calc(6% + var(--heat, 0) * 28%), var(--surface)); box-shadow: inset 0 -3px 0 var(--down); }
.heat-up:hover, .heat-down:hover { box-shadow: var(--shadow-lift); }
.heat-flat, .heat-none { background: var(--surface); }
#heat-group { align-self: flex-end; margin-bottom: 18px; }

/* ---------- Telegram on the Account page ---------- */
.tg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 10px 0; font-size: 14px; }
.tg-row select { height: 34px; border: 0; border-radius: var(--r-ctl); background: var(--fill); padding: 0 12px; }
.tg-link-box { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); font-size: 14px; display: grid; gap: 10px; }
.tg-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.tg-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--s-low); }
.tg-status.on::before { background: var(--up); }

/* ---------- Terminal theme: a little more character ---------- */
:root[data-theme="terminal"] .headline, :root[data-theme="terminal"] .page-head h1, :root[data-theme="terminal"] .section-title { letter-spacing: -0.04em; }
:root[data-theme="terminal"] .card, :root[data-theme="terminal"] .hero, :root[data-theme="terminal"] .story { border: 1px solid var(--hair); }
:root[data-theme="terminal"] body { font-size: 14px; }

@media (max-width: 720px) {
  .clock, #palette-btn { display: none; }
  .menu { min-width: 200px; }
}
:root[data-theme="terminal"] .sections button { font-size: 12px; padding: 6px 9px; }
.brief-price { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); max-width: 820px; }
.brief-price b { margin-right: 8px; font-weight: 600; color: var(--ink); }
.cite { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.price-chip { border-radius: var(--r-ctl); padding: 3px 11px; font-size: 13px; font-weight: 600; background: var(--fill); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.price-chip.up { color: var(--up); }
.price-chip.down { color: var(--down); }

/* ---------- stale data: the collector has stopped (banner) and prices from an earlier trading day ---------- */
.stale-banner { color: var(--t-high); border: 1px solid color-mix(in srgb, var(--s-high) 40%, transparent); line-height: 1.45; }
.stale-banner b { font-weight: 600; }
.stale-banner code { font: 500 13px/1 ui-monospace, Consolas, monospace; padding: 2px 6px; border-radius: 6px; background: var(--fill); }
.asof { color: var(--t-high); font-size: 12px; font-weight: 500; white-space: nowrap; }

/* ---------- background refresh: new numbers, no replayed entrance animation (see settle() in app.js) ---------- */
[data-settled] :is(.mtile, .wcard, .story, .heat-tile) { animation: none; }

/* ---------- "what did the news do?" strip on story cards (reactionStrip in app.js) ---------- */
.rx { margin-top: 12px; }
.rx-line { display: block; width: 100%; height: 40px; overflow: visible; }
.hero .rx-line { height: 64px; }
.rx-line path, .rx-line line { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.rx-line path { stroke-width: 1.7; }
.rx-line .pre { stroke: var(--muted); opacity: 0.55; }
.rx-up .post { stroke: var(--up); }
.rx-down .post { stroke: var(--down); }
.rx-flat .post { stroke: var(--ink-2); }
.rx-line .base { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.5; }
.rx-line .mark { stroke: var(--ink-2); stroke-width: 1; opacity: 0.35; }
.rx-text { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rx-text b { font-weight: 600; }
.rx-text b.rx-up { color: var(--up); }
.rx-text b.rx-down { color: var(--down); }
.story.row .rx { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.story.row .rx-line { width: 120px; height: 22px; flex: none; }
.story.row .rx-text { margin-top: 0; }

/* ---------- glance: news pulse, watchlist card pictures (glance.js) ---------- */
.pulse { padding: 12px 16px 6px; margin: 0 0 18px; }
.pulse[hidden] { display: none; }
.pulse-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin-bottom: 2px; }
.pulse-title { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pulse-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--muted); }
.pulse-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pulse-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.pulse-body { position: relative; }
.pulse-svg { display: block; overflow: visible; }
.pulse-grid { stroke: var(--hair); stroke-width: 1; }
.pulse-tick { stroke: var(--hair); stroke-width: 1; stroke-dasharray: 2 3; }
.pulse-axis { fill: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.pulse-now { fill: var(--accent); font-weight: 600; }
.pulse-dot { stroke: var(--surface); stroke-width: 1.2; opacity: 0.85; cursor: pointer; transition: opacity 0.2s; }
.pulse-dot.pulse-strong { stroke: var(--ink); stroke-width: 1.6; opacity: 1; }
.pulse-dot:hover, .pulse-dot.hot { opacity: 1; stroke: var(--ink); stroke-width: 2.2; }
.pulse-tip b { display: block; font-size: 13px; margin: 2px 0; }
.note.glance { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.act-strip { display: block; flex: none; }
.act-base { stroke: var(--hair); stroke-width: 1; }
.act-tick { stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; }
.act-tick.act-strong { stroke: var(--accent); stroke-width: 2; }
.tone-dots { display: inline-flex; gap: 6px; align-items: center; }
.td { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.td::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.td-good { color: var(--up); }
.td-good::before { background: var(--up); }
.td-bad { color: var(--down); }
.td-bad::before { background: var(--down); }
.countdown { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.countdown.soon { color: var(--t-high); }
.count-pill { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px; background: var(--fill); font-size: 11px; font-weight: 600; }

.fam-svg { color: var(--fam, var(--f-other)); flex: none; }
.fam:has(.fam-svg)::before { display: none; }
.fam-icon { cursor: default; }
.week-strip { display: block; width: 100%; max-width: 420px; height: auto; margin: 4px 0 12px; overflow: visible; }
.ws-hit { fill: transparent; }
.ws-bar { fill: var(--fill); }
.ws-day:hover .ws-bar { fill: var(--muted); opacity: 0.5; }
.ws-good { fill: var(--up); }
.ws-bad { fill: var(--down); }
.ws-label { fill: var(--muted); font-size: 11px; }
.mood { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 8px 28px; align-items: center; }
.mood .hint { grid-column: 1 / -1; margin: 0; }
.mood-dial { position: relative; }
.mood-gauge { display: block; width: 220px; height: auto; }
.mood-arc { fill: none; stroke-width: 14; stroke-linecap: round; }
.mood-neg { stroke: color-mix(in srgb, var(--down) 70%, transparent); }
.mood-mid { stroke: var(--fill); }
.mood-pos { stroke: color-mix(in srgb, var(--up) 70%, transparent); }
.mood-needle { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.mood-hub { fill: var(--ink); }
.mood-word { position: absolute; left: 0; right: 20px; bottom: 6px; text-align: center; font-size: 17px; font-weight: 700; padding-top: 2px; }
.mood-word.pos { color: var(--up); }
.mood-word.neg { color: var(--down); }
.mood-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mood-parts li { display: grid; grid-template-columns: 70px minmax(80px, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.mood-key { font-weight: 600; color: var(--ink-2); }
.mood-parts small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mood-bar { position: relative; height: 8px; border-radius: 4px; background: var(--fill); }
.mood-bar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1.5px; background: var(--muted); }
.mood-bar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.mood-bar i.pos { background: var(--up); }
.mood-bar i.neg { background: var(--down); }
@media (max-width: 640px) { .mood { grid-template-columns: 1fr; justify-items: center; } .mood-parts { width: 100%; } }

/* ---------- technical picture (ticker pages) and signal map (Heatmap) ---------- */
.tech { padding: 18px 22px 12px; margin-top: 12px; }
.tech-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tech-tile { background: var(--surface-2); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.tech-title { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.tech-big { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tech-tile small { color: var(--muted); font-size: 12px; margin-top: -4px; }
.trend-chart { width: 100%; height: 64px; display: block; }
.trend-chart path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tr-price { stroke-width: 1.8; }
.tr-price.up { stroke: var(--up); }
.tr-price.down { stroke: var(--down); }
.tr-50 { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 4 3; }
.tr-200 { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 2 3; }
.tech-chips { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chip-up { color: var(--up); }
.chip-down { color: var(--down); }
.chip-plain { color: var(--muted); font-weight: 500; }
.rsi-dial { width: 120px; height: auto; display: block; }
.rsi-dial path { fill: none; stroke-width: 10; stroke-linecap: round; }
.rsi-low { stroke: color-mix(in srgb, var(--accent) 60%, transparent); }
.rsi-mid { stroke: var(--fill); }
.rsi-high { stroke: color-mix(in srgb, var(--t-high) 70%, transparent); }
.range-wrap { display: grid; gap: 3px; padding-top: 8px; }
.range-bar { position: relative; height: 8px; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--down) 45%, var(--fill)), var(--fill), color-mix(in srgb, var(--up) 45%, var(--fill))); }
.range-bar i { position: absolute; top: -4px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--ink); }
.range-ends { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); }
.level-bar { position: relative; height: 8px; border-radius: 4px; background: var(--fill); margin-top: 8px; }
.level-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--muted); }
.level-bar.hot i { background: var(--t-high); }
.level-bar b { position: absolute; top: -4px; width: 2px; height: 16px; margin-left: -1px; background: var(--ink); opacity: 0.7; }
.np { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); }
.np-reading { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.np-text p { margin: 2px 0 4px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.np-text small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.quad { display: block; width: 100%; height: auto; overflow: visible; }
.quad-agree-up { fill: color-mix(in srgb, var(--up) 9%, transparent); }
.quad-agree-down { fill: color-mix(in srgb, var(--down) 9%, transparent); }
.quad-axis { stroke: var(--hair); stroke-width: 1.2; }
.quad-label { fill: var(--muted); font-size: 11px; }
.quad-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; opacity: 0.9; }
.quad-dot.big { fill: var(--t-high); }
.quad-dot.quiet { fill: var(--muted); opacity: 0.6; }
.quad-tk { fill: var(--ink-2); font-size: 11px; font-weight: 600; pointer-events: none; }
.quad-pt[data-ticker] { cursor: pointer; }
.quad-pt[data-ticker]:hover .quad-dot { stroke: var(--ink); stroke-width: 2.2; }
.signal-map { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.signal-card { padding: 14px; }
.signal-side { padding: 18px; }
.signal-groups { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 10px; }
.signal-groups li { display: grid; gap: 4px; font-size: 13px; }
.signal-groups li span { display: flex; flex-wrap: wrap; gap: 4px 10px; }
@media (max-width: 900px) { .signal-map { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .np { grid-template-columns: 1fr; justify-items: start; } .np .quad { max-width: 160px; } }

/* ---------- earnings runway (Calendar page and ticker pages; runwayRow in app.js) ---------- */
.runway { padding: 18px 22px 10px; margin-bottom: 18px; }
#tk-runway { margin-top: 12px; margin-bottom: 0; }
.runway-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 6px; }
.runway-head .legend i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; vertical-align: -1px; margin: 0 2px 0 8px; }
.rw-key-band { background: color-mix(in srgb, var(--accent) 18%, transparent); border-top: 1.5px dashed var(--accent); border-bottom: 1.5px dashed var(--accent); }
.rw-key-bar { background: linear-gradient(90deg, var(--up) 50%, var(--down) 50%); }
.runway-row { display: grid; grid-template-columns: 140px 236px minmax(0, 1fr); gap: 8px 20px; align-items: center; padding: 10px 0;
  border-top: 1px solid var(--hair); }
.runway-row:first-of-type { border-top: 0; }
.rw-when { display: grid; gap: 1px; font-size: 14px; font-weight: 600; justify-items: start; }
.rw-when small { color: var(--muted); font-size: 12px; font-weight: 400; }
.rw-when .tk-link { font-size: 15px; }
.runway-chart { width: 236px; height: 78px; overflow: visible; }
.rw-band { fill: var(--accent); opacity: 0.12; }
.rw-edge { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 4 3; opacity: 0.8; }
.rw-zero { stroke: var(--hair); stroke-width: 1; }
.rw-bar.rw-up { fill: var(--up); }
.rw-bar.rw-down { fill: var(--down); }
.rw-next { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.rw-label { fill: var(--muted); font-size: 10.5px; }
.rw-label-next { fill: var(--accent); font-weight: 600; }
.rw-text { font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.rw-text b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.rw-past, .rw-none { color: var(--muted); }
.rw-rough { color: var(--t-high); }
.rw-verdict { font-weight: 600; }
.rw-verdict.rw-hi { color: var(--t-high); }
.rw-verdict.rw-lo { color: var(--accent); }
@media (max-width: 700px) {
  .runway { padding: 16px 14px 8px; }
  .runway-row { grid-template-columns: minmax(0, 1fr); }
  .runway-chart { width: 100%; max-width: 320px; }
}

/* ---------- the Radar page (radar.js) ---------- */
.radar-page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.radar-card { padding: 10px; }
.radar-box { position: relative; }
.radar-svg { display: block; width: 100%; height: auto; overflow: visible; }
.radar-face { fill: var(--surface-2); }
.radar-ring { fill: none; stroke: var(--hair); stroke-width: 1; }
.radar-ring-label { fill: var(--muted); font-size: 11px; }
.radar-divider { stroke: var(--hair); stroke-width: 1; stroke-dasharray: 2 4; }
.radar-sector { fill: var(--ink-2); font-size: 12px; font-weight: 600; }
.radar-centre { fill: var(--accent); }
.radar-sweep { transform-box: view-box; animation: radar-turn linear infinite; }  /* origin: the centre, set in radar.js */
.radar-trail { fill: var(--accent); opacity: 0.12; }
.radar-beam { stroke: var(--accent); stroke-width: 1.5; opacity: 0.7; }
@keyframes radar-turn { to { transform: rotate(360deg); } }
.blip { cursor: pointer; outline: none; }
.blip-dot { stroke: var(--surface); stroke-width: 1.5; transition: r 0.2s var(--ease); }
.blip-good .blip-dot, .radar-key.blip-good { fill: var(--up); background: var(--up); }
.blip-bad .blip-dot, .radar-key.blip-bad { fill: var(--down); background: var(--down); }
.blip-plain .blip-dot, .radar-key.blip-plain { fill: var(--accent); background: var(--accent); }
.blip-quiet { cursor: default; }
.blip-quiet .blip-dot { fill: var(--muted); stroke: none; opacity: 0.45; }
.blip-high .blip-dot { stroke: var(--s-high); stroke-width: 3; }
.blip-critical .blip-dot { stroke: var(--s-critical); stroke-width: 3.5; }
.blip-halo { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; animation: radar-ping linear infinite both; }
@keyframes radar-ping { 0% { opacity: 0.9; } 14% { opacity: 0; } 100% { opacity: 0; } }
.blip-fresh .blip-dot { animation: radar-fresh 1.6s ease-in-out infinite; }
@keyframes radar-fresh { 50% { opacity: 0.45; } }
.blip-label { fill: var(--ink); font-size: 11px; font-weight: 600; pointer-events: none; }
.blip:hover .blip-label, .blip.hot .blip-label, .blip:focus .blip-label { fill: var(--accent); }
.blip.hot .blip-dot, .blip:hover .blip-dot, .blip:focus .blip-dot { stroke: var(--ink); stroke-width: 2.5; }
.radar-tip b { display: block; font-size: 13px; margin: 2px 0; }
.radar-side { padding: 18px 18px 14px; }
.radar-list { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 2px; }
.radar-list li { display: grid; grid-template-columns: 10px 64px minmax(0, 1fr); gap: 10px; align-items: start; padding: 7px 8px;
  border-radius: 10px; cursor: pointer; font-size: 13px; }
.radar-list li:hover, .radar-list li.hot, .radar-list li:focus-visible { background: var(--surface-2); outline: none; }
.radar-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; }
.radar-key.ring { background: none; border: 2.5px solid var(--s-high); width: 10px; height: 10px; box-sizing: border-box; }
.radar-who { display: grid; }
.radar-who small { color: var(--muted); font-size: 11px; }
.radar-what { color: var(--ink-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.radar-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin: 0 0 6px; }
.radar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.radar-legend .radar-key { margin-top: 0; }
@media (max-width: 900px) { .radar-page { grid-template-columns: 1fr; } }
.radar-svg.phone .blip-label { font-size: 17px; }
.radar-svg.phone .radar-sector { font-size: 16px; }
.radar-svg.phone .radar-ring-label { font-size: 14px; }
@media (max-width: 640px) { .radar-card { padding: 4px; } }
@media (prefers-reduced-motion: reduce) { .radar-sweep, .blip-halo, .blip-fresh .blip-dot { animation: none; } }

/* ---------- news pins on the ticker chart and the list under it (drawChart / pinList in app.js) ---------- */
.chart .pin { cursor: pointer; }
.chart .pin-stem { stroke: var(--muted); stroke-width: 1; opacity: 0.6; }
.chart .pin-foot { fill: var(--ink-2); }
.chart .pin-head { fill: var(--surface); stroke: var(--muted); stroke-width: 1.6; transition: r 0.2s var(--ease); }
.chart .pin-letter { fill: var(--ink); font-size: 11px; font-weight: 700; pointer-events: none; }
.chart .pin-good .pin-head { stroke: var(--up); }
.chart .pin-bad .pin-head { stroke: var(--down); }
.chart .pin:hover .pin-head, .chart .pin.hot .pin-head { r: 12; stroke-width: 2.2; }
.lg-pin { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--muted);
  font-size: 9px; font-weight: 700; color: var(--ink); }
.pins { list-style: none; margin: 10px 0 2px; padding: 10px 0 0; border-top: 1px solid var(--hair); display: grid; gap: 2px; }
.pins[hidden] { display: none; }
.pins li { display: grid; grid-template-columns: 22px auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 6px 8px;
  border-radius: 10px; font-size: 13px; cursor: pointer; }
.pins li:hover, .pins li.hot, .pins li:focus-visible { background: var(--surface-2); outline: none; }
.pin-key { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.6px solid var(--muted);
  font-size: 11px; font-weight: 700; color: var(--ink); }
.pin-key.pin-good { border-color: var(--up); }
.pin-key.pin-bad { border-color: var(--down); }
.pin-when { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pin-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.pin-move { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pin-move b { font-weight: 600; }
.pin-move b.rx-up { color: var(--up); }
.pin-move b.rx-down { color: var(--down); }
@media (max-width: 640px) {
  .pins li { grid-template-columns: 22px minmax(0, 1fr); align-items: start; }
  .pin-key { grid-row: 1 / span 3; }
  .pin-when, .pin-title, .pin-move { grid-column: 2; }
  .pin-title { white-space: normal; }
}

/* the radar's sweep and pings: their own layers, so the radar drawing is not repainted while they move */
.radar-svg { position: relative; z-index: 1; }
.radar-sweep-layer {
  position: absolute; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: 2; will-change: transform;
  background: conic-gradient(from -28deg, transparent 0deg, color-mix(in srgb, var(--accent) 22%, transparent) 28deg, transparent 28.5deg);
  animation: radar-turn linear infinite;
}
.radar-sweep-layer::after { content: ""; position: absolute; left: calc(50% - 0.75px); top: 0; width: 1.5px; height: 50%; background: var(--accent); opacity: 0.7; }
.radar-ping {
  position: absolute; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--accent); transform: translate(-50%, -50%);
  pointer-events: none; z-index: 3; opacity: 0; will-change: opacity; animation: radar-ping linear infinite both;
}
@media (prefers-reduced-motion: reduce) { .radar-sweep-layer, .radar-ping { animation: none; } }

/* ---------- smoothness (2026-10-11 diagnosis) ----------
   Entrance animations used to hold their last frame for good ("both"), which kept every card and the whole page on its
   own drawing layer (up to 76 at once). Now they play once and let go. Long lists skip drawing what is off screen. */
:is(.view, .story, .mtile, .day, .wcard, .heat-tile, .skel) { animation-fill-mode: backwards; }
:is(.river .story, .wcard, .day, .event, .today-row) { content-visibility: auto; contain-intrinsic-size: auto 120px; }

/* ---------- sign-in page: show password, Caps Lock warning, keep me signed in, forgotten password ---------- */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 68px; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 30px; padding: 0 10px; border: 0;
  border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.pw-eye:hover { background: var(--fill); color: var(--ink); }
.auth-card .caps { color: var(--t-high); font-weight: 500; }
.auth-row { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: -4px 0 16px; }
.auth-row .check { margin: 0; font-size: 13px; color: var(--ink-2); }
.auth-row-end { justify-content: center; margin: 16px 0 0; }
.linkish { border: 0; background: none; padding: 2px 0; color: var(--accent); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.linkish:hover { text-decoration: underline; }
.auth-note { background: var(--surface-2); border-radius: 12px; padding: 10px 13px; margin: -4px 0 16px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
#code { font: 600 16px/1 ui-monospace, Consolas, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
#code::placeholder { letter-spacing: 0.08em; color: var(--muted); opacity: 0.6; }

/* =====================================================================================================================
   Appearance extras (the Appearance panel). Everything below is opt-in: each rule needs a data-theme of one of the
   strange themes or a data-<setting> attribute that only exists once you pick something other than the original.
   With nothing picked, none of it applies and Clarion looks exactly as designed.
   ===================================================================================================================== */

/* ---------- the strange themes (every text/background pair checked for WCAG 4.5:1, see test_appearance.py) ---------- */
:root[data-theme="abyss"] {
  color-scheme: dark;
  --f-earnings: #3987e5;
  --f-deals: #d95926;
  --f-fda: #199e70;
  --f-insiders: #c98500;
  --f-risk: #d55181;
  --f-macro: #9085e9;
  --f-other: #898781;
  --shadow: none;
  --shadow-lift: 0 10px 40px rgba(0, 0, 0, 0.7);
  --page: #020b10;
  --surface: #071820;
  --surface-2: #0c2430;
  --fill: rgba(94, 234, 212, 0.06);
  --fill-hover: rgba(94, 234, 212, 0.11);
  --ink: #d6f5f0;
  --ink-2: #a8d8d0;
  --muted: #78aaa6;
  --hair: rgba(94, 234, 212, 0.12);
  --accent: #2ee6d0;
  --accent-soft: rgba(46, 230, 208, 0.14);
  --on-accent: #021014;
  --nav: rgba(2, 11, 16, 0.8);
  --s-low: #2c5560;
  --t-critical: #ff7a8a;
  --t-high: #ffb070;
  --up: #4ade80;
  --down: #ff7a8a;
}
:root[data-theme="seance"] {
  color-scheme: dark;
  --f-earnings: #3987e5;
  --f-deals: #d95926;
  --f-fda: #199e70;
  --f-insiders: #c98500;
  --f-risk: #d55181;
  --f-macro: #9085e9;
  --f-other: #898781;
  --shadow: none;
  --shadow-lift: 0 10px 40px rgba(0, 0, 0, 0.7);
  --page: #0d0a12;
  --surface: #15111c;
  --surface-2: #1f1929;
  --fill: rgba(143, 243, 255, 0.06);
  --fill-hover: rgba(143, 243, 255, 0.11);
  --ink: #ebe5f3;
  --ink-2: #c6bdd4;
  --muted: #9a8fab;
  --hair: rgba(143, 243, 255, 0.1);
  --accent: #8ff3ff;
  --accent-soft: rgba(143, 243, 255, 0.13);
  --on-accent: #07181b;
  --nav: rgba(13, 10, 18, 0.8);
  --s-low: #4a4157;
  --t-critical: #ff7aa2;
  --t-high: #ffb27a;
  --up: #6ee7a8;
  --down: #ff7a90;
}
:root[data-theme="outrun"] {
  color-scheme: dark;
  --f-earnings: #3987e5;
  --f-deals: #d95926;
  --f-fda: #199e70;
  --f-insiders: #c98500;
  --f-risk: #d55181;
  --f-macro: #9085e9;
  --f-other: #898781;
  --shadow: none;
  --shadow-lift: 0 10px 40px rgba(10, 0, 30, 0.7);
  --page: #120726;
  --surface: #1b0d36;
  --surface-2: #26134a;
  --fill: rgba(255, 92, 205, 0.08);
  --fill-hover: rgba(255, 92, 205, 0.14);
  --ink: #fbe9ff;
  --ink-2: #e2c6f0;
  --muted: #b796ca;
  --hair: rgba(255, 92, 205, 0.16);
  --accent: #ff5ccd;
  --accent-soft: rgba(255, 92, 205, 0.16);
  --on-accent: #1a0516;
  --nav: rgba(18, 7, 38, 0.8);
  --s-low: #5a3d7a;
  --t-critical: #ff7b96;
  --t-high: #ffb36b;
  --up: #5cffc8;
  --down: #ff6b8b;
}
:root[data-theme="phosphor"] {
  color-scheme: dark;
  --f-earnings: #3987e5;
  --f-deals: #d95926;
  --f-fda: #199e70;
  --f-insiders: #c98500;
  --f-risk: #d55181;
  --f-macro: #9085e9;
  --f-other: #898781;
  --shadow: none;
  --shadow-lift: 0 10px 40px rgba(0, 0, 0, 0.7);
  --page: #050a05;
  --surface: #0a140a;
  --surface-2: #0f1d0f;
  --fill: rgba(51, 255, 102, 0.07);
  --fill-hover: rgba(51, 255, 102, 0.12);
  --ink: #b8ffc8;
  --ink-2: #8fe6a3;
  --muted: #66b67a;
  --hair: rgba(51, 255, 102, 0.16);
  --accent: #33ff66;
  --accent-soft: rgba(51, 255, 102, 0.14);
  --on-accent: #021a08;
  --nav: rgba(5, 10, 5, 0.85);
  --s-low: #2d5a37;
  --t-critical: #ff7a66;
  --t-high: #ffc266;
  --up: #33ff66;
  --down: #ff7a66;
  --font: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Courier New", monospace;
}
:root[data-theme="horizon"] {
  color-scheme: dark;
  --f-earnings: #3987e5;
  --f-deals: #d95926;
  --f-fda: #199e70;
  --f-insiders: #c98500;
  --f-risk: #d55181;
  --f-macro: #9085e9;
  --f-other: #898781;
  --shadow: none;
  --shadow-lift: 0 10px 40px rgba(0, 0, 0, 0.8);
  --page: #000000;
  --surface: #0b0b0f;
  --surface-2: #15151c;
  --fill: rgba(255, 170, 90, 0.07);
  --fill-hover: rgba(255, 170, 90, 0.12);
  --ink: #f4efe8;
  --ink-2: #d4ccc0;
  --muted: #979087;
  --hair: rgba(255, 170, 90, 0.12);
  --accent: #ffaa5a;
  --accent-soft: rgba(255, 170, 90, 0.14);
  --on-accent: #1a0d00;
  --nav: rgba(0, 0, 0, 0.8);
  --s-low: #4d4640;
  --t-critical: #ff7b72;
  --t-high: #ffc58a;
  --up: #5ee08a;
  --down: #ff6b6b;
}
:root[data-theme="blueprint"] {
  color-scheme: dark;
  --f-earnings: #3987e5;
  --f-deals: #d95926;
  --f-fda: #199e70;
  --f-insiders: #c98500;
  --f-risk: #d55181;
  --f-macro: #9085e9;
  --f-other: #898781;
  --shadow: none;
  --shadow-lift: 0 10px 40px rgba(0, 10, 40, 0.6);
  --page: #0b2a5b;
  --surface: #0f3470;
  --surface-2: #143d80;
  --fill: rgba(255, 255, 255, 0.07);
  --fill-hover: rgba(255, 255, 255, 0.12);
  --ink: #f0f6ff;
  --ink-2: #d3e3ff;
  --muted: #a9c3ec;
  --hair: rgba(200, 225, 255, 0.22);
  --accent: #ffe066;
  --accent-soft: rgba(255, 224, 102, 0.16);
  --on-accent: #0b2a5b;
  --nav: rgba(11, 42, 91, 0.85);
  --s-low: #5a77a8;
  --t-critical: #ffb0a8;
  --t-high: #ffd08a;
  --up: #8ef0a8;
  --down: #ffb0a8;
}
:root[data-theme="lichen"] {
  color-scheme: dark;
  --f-earnings: #3987e5;
  --f-deals: #d95926;
  --f-fda: #199e70;
  --f-insiders: #c98500;
  --f-risk: #d55181;
  --f-macro: #9085e9;
  --f-other: #898781;
  --shadow: none;
  --shadow-lift: 0 10px 40px rgba(0, 0, 0, 0.7);
  --page: #0d120c;
  --surface: #141b12;
  --surface-2: #1c2519;
  --fill: rgba(197, 232, 108, 0.06);
  --fill-hover: rgba(197, 232, 108, 0.11);
  --ink: #e6edd9;
  --ink-2: #c4d0b0;
  --muted: #939f80;
  --hair: rgba(196, 220, 150, 0.12);
  --accent: #c5e86c;
  --accent-soft: rgba(197, 232, 108, 0.14);
  --on-accent: #141b04;
  --nav: rgba(13, 18, 12, 0.82);
  --s-low: #4a5640;
  --t-critical: #ff8a7a;
  --t-high: #f0b46a;
  --up: #8fdc6e;
  --down: #ff8a7a;
}
:root[data-theme="noir"] {
  color-scheme: dark;
  --f-earnings: #3987e5;
  --f-deals: #d95926;
  --f-fda: #199e70;
  --f-insiders: #c98500;
  --f-risk: #d55181;
  --f-macro: #9085e9;
  --f-other: #898781;
  --shadow: none;
  --shadow-lift: 0 10px 40px rgba(0, 0, 0, 0.8);
  --page: #0a0a0a;
  --surface: #141414;
  --surface-2: #1e1e1e;
  --fill: rgba(255, 255, 255, 0.07);
  --fill-hover: rgba(255, 255, 255, 0.12);
  --ink: #f2f2f2;
  --ink-2: #cfcfcf;
  --muted: #9a9a9a;
  --hair: rgba(255, 255, 255, 0.12);
  --accent: #e6e6e6;
  --accent-soft: rgba(230, 230, 230, 0.12);
  --on-accent: #0a0a0a;
  --nav: rgba(10, 10, 10, 0.82);
  --s-low: #555555;
  --t-critical: #ff8a80;
  --t-high: #ffb37a;
  --up: #7fd99a;
  --down: #ff8a80;
}
:root[data-theme="cleanroom"] {
  color-scheme: light;
  --f-earnings: #2a78d6;
  --f-deals: #eb6834;
  --f-fda: #1baf7a;
  --f-insiders: #eda100;
  --f-risk: #e87ba4;
  --f-macro: #4a3aa7;
  --f-other: #898781;
  --shadow: 0 1px 2px rgba(0, 60, 50, 0.06);
  --shadow-lift: 0 10px 36px rgba(0, 60, 50, 0.12);
  --page: #eef3f2;
  --surface: #fbfefd;
  --surface-2: #e6eeec;
  --fill: rgba(0, 80, 70, 0.05);
  --fill-hover: rgba(0, 80, 70, 0.09);
  --ink: #0f1f1d;
  --ink-2: #2e4744;
  --muted: #4b6662;
  --hair: rgba(0, 80, 70, 0.12);
  --accent: #00766a;
  --accent-soft: rgba(0, 118, 106, 0.1);
  --on-accent: #ffffff;
  --nav: rgba(238, 243, 242, 0.82);
  --s-low: #a3b5b2;
  --t-critical: #b3261e;
  --t-high: #9a4a0a;
  --up: #1e7a3c;
  --down: #c0262d;
}
:root[data-theme="fog"] {
  color-scheme: light;
  --f-earnings: #2a78d6;
  --f-deals: #eb6834;
  --f-fda: #1baf7a;
  --f-insiders: #eda100;
  --f-risk: #e87ba4;
  --f-macro: #4a3aa7;
  --f-other: #898781;
  --shadow: 0 4px 24px rgba(20, 30, 35, 0.08);
  --shadow-lift: 0 10px 40px rgba(20, 30, 35, 0.14);
  --page: #d9dcdd;
  --surface: #e9ebeb;
  --surface-2: #d1d5d6;
  --fill: rgba(30, 40, 45, 0.06);
  --fill-hover: rgba(30, 40, 45, 0.1);
  --ink: #1e2427;
  --ink-2: #363f44;
  --muted: #4b555a;
  --hair: rgba(30, 40, 45, 0.14);
  --accent: #863718;
  --accent-soft: rgba(134, 55, 24, 0.12);
  --on-accent: #ffffff;
  --nav: rgba(217, 220, 221, 0.85);
  --s-low: #9aa3a6;
  --t-critical: #9c2219;
  --t-high: #7d3b06;
  --up: #2a6334;
  --down: #9c2219;
}
:root[data-theme="bone"] {
  color-scheme: light;
  --f-earnings: #2a78d6;
  --f-deals: #eb6834;
  --f-fda: #1baf7a;
  --f-insiders: #eda100;
  --f-risk: #e87ba4;
  --f-macro: #4a3aa7;
  --f-other: #898781;
  --shadow: 0 4px 24px rgba(40, 30, 20, 0.07);
  --shadow-lift: 0 10px 40px rgba(40, 30, 20, 0.13);
  --page: #ebe5d8;
  --surface: #f7f3ea;
  --surface-2: #e2dacb;
  --fill: rgba(40, 30, 20, 0.06);
  --fill-hover: rgba(40, 30, 20, 0.1);
  --ink: #1f1b17;
  --ink-2: #3f3830;
  --muted: #5a5246;
  --hair: rgba(40, 30, 20, 0.14);
  --accent: #7a1f1f;
  --accent-soft: rgba(122, 31, 31, 0.1);
  --on-accent: #ffffff;
  --nav: rgba(235, 229, 216, 0.85);
  --s-low: #a39a8a;
  --t-critical: #9e1c1c;
  --t-high: #844006;
  --up: #2b6631;
  --down: #9e1c1c;
}
:root[data-theme="brutalist"] {
  color-scheme: light;
  --f-earnings: #2a78d6;
  --f-deals: #eb6834;
  --f-fda: #1baf7a;
  --f-insiders: #eda100;
  --f-risk: #e87ba4;
  --f-macro: #4a3aa7;
  --f-other: #898781;
  --shadow: 4px 4px 0 #000000;
  --shadow-lift: 7px 7px 0 #000000;
  --page: #f4f1ea;
  --surface: #ffffff;
  --surface-2: #ece7dc;
  --fill: rgba(0, 0, 0, 0.06);
  --fill-hover: rgba(0, 0, 0, 0.1);
  --ink: #000000;
  --ink-2: #222222;
  --muted: #555555;
  --hair: rgba(0, 0, 0, 0.18);
  --accent: #2433ff;
  --accent-soft: rgba(36, 51, 255, 0.1);
  --on-accent: #ffffff;
  --nav: rgba(244, 241, 234, 0.92);
  --s-low: #a9a8a1;
  --t-critical: #c4271d;
  --t-high: #a24400;
  --up: #137333;
  --down: #c5221f;
  --r-card: 4px;
  --r-ctl: 4px;
}

/* a little character per strange theme */
:root[data-theme="phosphor"] body { font-size: 14px; }
:root[data-theme="phosphor"] :is(.headline, .page-head h1, .section-title, .tk-symbol) {
  letter-spacing: -0.04em; text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent); }
:root[data-theme="phosphor"] :is(.card, .hero, .grid .story, .wcard, .mtile) { border: 1px solid var(--hair); }
:root[data-theme="phosphor"] .sections button { font-size: 12px; padding: 6px 9px; }
:root[data-theme="outrun"] :is(.page-head h1, .tk-symbol) { text-shadow: 0 0 28px color-mix(in srgb, var(--accent) 55%, transparent); }
:root[data-theme="horizon"] :is(.page-head h1, .tk-symbol) { text-shadow: 0 0 34px color-mix(in srgb, var(--accent) 45%, transparent); }
:root[data-theme="seance"] .page-head h1 { animation: look-haunt 7s ease-in-out infinite; }
@keyframes look-haunt {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent); }
}
:root[data-theme="abyss"] .page-head h1 { text-shadow: 0 0 30px color-mix(in srgb, var(--accent) 35%, transparent); }
:root[data-theme="blueprint"] :is(.card, .hero, .grid .story, .wcard, .mtile) { border: 1px dashed color-mix(in srgb, var(--ink) 38%, transparent); }
:root[data-theme="cleanroom"] :is(.card, .hero, .grid .story, .wcard, .mtile) { border: 1px solid var(--hair); }
:root[data-theme="noir"] :is(.page-head h1, .section-title) { letter-spacing: 0.01em; }
:root[data-theme="brutalist"] :is(.card, .hero, .grid .story, .wcard, .mtile, #hero .empty, .skel, .menu, .palette-box, dialog) {
  border: 2px solid var(--ink); }
:root[data-theme="brutalist"] .btn.primary { box-shadow: 3px 3px 0 var(--ink); }
:root[data-theme="brutalist"] .hero { border-radius: var(--r-card); }

/* ---------- accent colour (one shade per light / dark scheme; all checked against every theme's page and cards) ---------- */
:root[data-scheme="light"][data-accent="blue"] { --accent: #0952bb; --accent-soft: rgba(9, 82, 187, 0.1); --on-accent: #ffffff; }
:root[data-scheme="dark"][data-accent="blue"] { --accent: #7cbcff; --accent-soft: rgba(124, 188, 255, 0.16); --on-accent: #000000; }
:root[data-scheme="light"][data-accent="violet"] { --accent: #6a3fd1; --accent-soft: rgba(106, 63, 209, 0.1); --on-accent: #ffffff; }
:root[data-scheme="dark"][data-accent="violet"] { --accent: #b9a3ff; --accent-soft: rgba(185, 163, 255, 0.16); --on-accent: #000000; }
:root[data-scheme="light"][data-accent="magenta"] { --accent: #a8237a; --accent-soft: rgba(168, 35, 122, 0.1); --on-accent: #ffffff; }
:root[data-scheme="dark"][data-accent="magenta"] { --accent: #ff85dc; --accent-soft: rgba(255, 133, 220, 0.16); --on-accent: #000000; }
:root[data-scheme="light"][data-accent="orange"] { --accent: #963f08; --accent-soft: rgba(150, 63, 8, 0.1); --on-accent: #ffffff; }
:root[data-scheme="dark"][data-accent="orange"] { --accent: #ffab66; --accent-soft: rgba(255, 171, 102, 0.16); --on-accent: #000000; }
:root[data-scheme="light"][data-accent="teal"] { --accent: #00655f; --accent-soft: rgba(0, 101, 95, 0.1); --on-accent: #ffffff; }
:root[data-scheme="dark"][data-accent="teal"] { --accent: #4be3cc; --accent-soft: rgba(75, 227, 204, 0.16); --on-accent: #000000; }
:root[data-scheme="light"][data-accent="gold"] { --accent: #7d5b00; --accent-soft: rgba(125, 91, 0, 0.1); --on-accent: #ffffff; }
:root[data-scheme="dark"][data-accent="gold"] { --accent: #ffd65c; --accent-soft: rgba(255, 214, 92, 0.16); --on-accent: #000000; }
:root[data-scheme="light"][data-accent="graphite"] { --accent: #3a3a3c; --accent-soft: rgba(58, 58, 60, 0.1); --on-accent: #ffffff; }
:root[data-scheme="dark"][data-accent="graphite"] { --accent: #d4d4d8; --accent-soft: rgba(212, 212, 216, 0.16); --on-accent: #000000; }

/* ---------- typeface (system fonts only: nothing is downloaded) ---------- */
:root[data-font="system"] { --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif; }
:root[data-font="serif"] { --font: "Iowan Old Style", Charter, "Sitka Text", Cambria, Georgia, serif; }
:root[data-font="grotesk"] { --font: Bahnschrift, "DIN Alternate", "D-DIN", "Roboto Condensed", "Arial Narrow", sans-serif; }
:root[data-font="mono"] { --font: ui-monospace, "Cascadia Code", "Cascadia Mono", "SF Mono", Consolas, monospace; }
:root[data-font="humanist"] { --font: Optima, Candara, "Gill Sans", "Gill Sans MT", Calibri, sans-serif; }
:root[data-font="slab"] { --font: Rockwell, "Roboto Slab", "Sitka Heading", Georgia, serif; }
:root[data-font="mono"] body { font-size: 14px; }

/* ---------- numbers (Inter's own number styles) ---------- */
:root[data-nums="tabular"] body { font-feature-settings: "cv11", "tnum"; }
:root[data-nums="slashed"] body { font-feature-settings: "cv11", "tnum", "zero"; }
:root[data-nums="open"] body { font-feature-settings: "cv11", "ss01"; }

/* ---------- text size, page width, corners, density ---------- */
:root[data-size="s"] :is(.page, .foot) { zoom: 0.92; }
:root[data-size="l"] :is(.page, .foot) { zoom: 1.08; }
:root[data-size="xl"] :is(.page, .foot) { zoom: 1.16; }
:root[data-width="wide"] :is(.nav-inner, .page, .foot) { max-width: 1440px; }
:root[data-width="full"] :is(.nav-inner, .page, .foot) { max-width: none; }

:root[data-corners="round"] { --r-card: 28px; }
:root[data-corners="round"] .hero { border-radius: 34px; }
:root[data-corners="sharp"] { --r-card: 6px; --r-ctl: 6px; }
:root[data-corners="square"] { --r-card: 0px; --r-ctl: 0px; }
:root:is([data-corners="sharp"], [data-corners="square"]) :is(.hero, dialog, .menu, .menu-item, .palette-box, .palette-item, .heat-tile,
  .brief-col, .brief-watch li, .brief-stale, .mini, .tip, .banner, .field input, .field select, .found, .tg-link-box, .swatch,
  .look-drawer, .look-theme, .look-mini, .look-preset, .look-row) { border-radius: var(--r-card); }

:root[data-density="compact"] .page-head { padding: 18px 0 10px; }
:root[data-density="compact"] :is(.markets, .grid, .watch-grid, .duo, .heat-grid) { gap: 8px; }
:root[data-density="compact"] .grid .story { padding: 12px 16px 10px; }
:root[data-density="compact"] .river .story, :root[data-density="compact"] .event { padding-top: 7px; padding-bottom: 7px; }
:root[data-density="compact"] .panel { padding: 14px 16px; }
:root[data-density="compact"] .hero { padding: 18px 22px 16px; }
:root[data-density="compact"] .section-title { margin: 24px 0 8px; }
:root[data-density="compact"] .duo { margin-top: 24px; }
:root[data-density="compact"] .wcard { padding: 10px 12px 9px; gap: 6px; }
:root[data-density="compact"] .today-row { padding: 9px 0; }
:root[data-density="airy"] .page-head { padding: 44px 0 26px; }
:root[data-density="airy"] :is(.markets, .grid, .watch-grid, .duo, .heat-grid) { gap: 18px; }
:root[data-density="airy"] .grid .story { padding: 22px 26px 18px; }
:root[data-density="airy"] .river .story, :root[data-density="airy"] .event { padding-top: 15px; padding-bottom: 15px; }
:root[data-density="airy"] .panel { padding: 24px 26px; }
:root[data-density="airy"] .hero { padding: 34px 38px 28px; }
:root[data-density="airy"] .section-title { margin: 48px 0 16px; }
:root[data-density="airy"] .duo { margin-top: 48px; }
:root[data-density="airy"] .wcard { padding: 18px 20px 16px; }
:root[data-density="airy"] .today-row { padding: 20px 0; }

/* ---------- card style ---------- */
:root[data-cards="outlined"] :is(.card, .hero, .grid .story, .wcard, .mtile, .skel, #hero .empty) { box-shadow: none; border: 1px solid var(--hair); }
:root[data-cards="outlined"] :is(.grid .story, .wcard, .mtile):hover { box-shadow: none; border-color: color-mix(in srgb, var(--accent) 55%, var(--hair)); }
:root[data-cards="floating"] :is(.card, .hero, .grid .story, .wcard, .mtile, .skel, #hero .empty) {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 22px 50px -18px rgba(0, 0, 0, 0.3); }
:root[data-cards="floating"] :is(.grid .story, .wcard, .mtile):hover { transform: translateY(-6px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06), 0 34px 70px -20px rgba(0, 0, 0, 0.38); }
:root[data-scheme="dark"][data-cards="floating"] :is(.card, .hero, .grid .story, .wcard, .mtile, .skel, #hero .empty) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 26px 60px -18px rgba(0, 0, 0, 0.9); border: 1px solid var(--hair); }
:root[data-cards="glass"] :is(.card, .hero, .grid .story, .wcard, .mtile, .skel, #hero .empty) {
  background-color: color-mix(in srgb, var(--surface) 62%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);  /* every card re-blurs on each scroll frame */
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--shadow); }
:root[data-cards="neon"] :is(.card, .hero, .grid .story, .wcard, .mtile, .skel, #hero .empty) {
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent), 0 0 24px -6px color-mix(in srgb, var(--accent) 50%, transparent); }
:root[data-cards="neon"] :is(.grid .story, .wcard, .mtile):hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 38px -4px color-mix(in srgb, var(--accent) 65%, transparent); }
:root[data-cards="brutal"] :is(.card, .hero, .grid .story, .wcard, .mtile, .skel, #hero .empty) {
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
:root[data-cards="brutal"] :is(.grid .story, .wcard, .mtile):hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }

/* ---------- titles ---------- */
:root[data-titles="editorial"] :is(.page-head h1, .section-title, .hero .headline, .grid .headline, .tk-symbol, dialog h2, .brief-summary) {
  font-family: "Iowan Old Style", Charter, "Sitka Heading", "Sitka Text", Cambria, Georgia, serif; letter-spacing: -0.01em; }
:root[data-titles="caps"] :is(.page-head h1, .section-title, .panel-title, .heat-title) { text-transform: uppercase; letter-spacing: 0.05em; }
:root[data-titles="caps"] .page-head h1 { font-size: clamp(24px, 3vw, 34px); }
:root[data-titles="holo"] :is(.page-head h1, .tk-symbol, .section-title) {
  background: linear-gradient(100deg, var(--accent), var(--f-risk), var(--f-fda), var(--f-earnings), var(--accent));
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: look-holo 10s linear infinite; }
@keyframes look-holo { to { background-position: 300% 0; } }
:root[data-titles="glitch"] .page-head h1 { text-shadow: 1px 0 rgba(255, 0, 90, 0.35), -1px 0 rgba(0, 220, 255, 0.35); }
:root[data-titles="glitch"] :is(a.headline, .page-head h1, .tk-symbol):hover { animation: look-glitch 0.4s steps(2, end) 2; }
@keyframes look-glitch {
  0% { text-shadow: 2px 0 rgba(255, 0, 90, 0.75), -2px 0 rgba(0, 220, 255, 0.75); transform: translateX(0); }
  25% { text-shadow: -3px 0 rgba(255, 0, 90, 0.75), 3px 0 rgba(0, 220, 255, 0.75); transform: translateX(1px); }
  50% { text-shadow: 2px 1px rgba(255, 0, 90, 0.75), -2px -1px rgba(0, 220, 255, 0.75); transform: translateX(-1px); }
  100% { text-shadow: none; transform: none; }
}

/* ---------- backgrounds (behind everything, on the page itself) ---------- */
:root[data-atmos]::before, :root[data-theme="blueprint"]:not([data-atmos])::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
:root[data-atmos="aurora"]::before {
  inset: -20%;
  background:
    radial-gradient(35% 40% at 20% 20%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%),
    radial-gradient(30% 35% at 80% 15%, color-mix(in srgb, var(--f-risk) 30%, transparent), transparent 70%),
    radial-gradient(40% 45% at 65% 75%, color-mix(in srgb, var(--f-fda) 26%, transparent), transparent 70%),
    radial-gradient(30% 35% at 15% 85%, color-mix(in srgb, var(--f-macro) 30%, transparent), transparent 70%);
  will-change: transform; animation: look-aurora 28s var(--ease) infinite alternate; }  /* no blur filter: the gradients are soft already, and a blurred moving layer was redrawn every frame */
:root[data-scheme="light"][data-atmos="aurora"]::before { opacity: 0.6; }
@keyframes look-aurora { from { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); } to { transform: translate3d(3%, 2%, 0) rotate(8deg) scale(1.08); } }
:root[data-atmos="dots"]::before {
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 24%, transparent) 1px, transparent 1.6px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 0%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 85% 75% at 50% 0%, #000 30%, transparent 100%); }
:root[data-atmos="graph"]::before, :root[data-theme="blueprint"]:not([data-atmos])::before {
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 11%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 11%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; }
:root[data-atmos="stars"]::before {
  background-image:
    radial-gradient(1px 1px at 20px 30px, color-mix(in srgb, var(--ink) 85%, transparent), transparent),
    radial-gradient(1px 1px at 120px 80px, color-mix(in srgb, var(--ink) 70%, transparent), transparent),
    radial-gradient(1.5px 1.5px at 60px 150px, color-mix(in srgb, var(--ink) 80%, transparent), transparent),
    radial-gradient(1px 1px at 170px 190px, color-mix(in srgb, var(--ink) 60%, transparent), transparent),
    radial-gradient(2px 2px at 90px 220px, color-mix(in srgb, var(--accent) 85%, transparent), transparent);
  background-size: 230px 230px, 170px 170px, 310px 310px, 190px 190px, 410px 410px;
  will-change: opacity; animation: look-twinkle 7s ease-in-out infinite alternate; }
@keyframes look-twinkle { from { opacity: 0.55; } to { opacity: 1; } }
:root[data-atmos="fog"]::before {
  inset: -10% -30%;
  background:
    radial-gradient(60% 30% at 20% 30%, color-mix(in srgb, var(--muted) 34%, transparent), transparent 70%),
    radial-gradient(50% 25% at 80% 60%, color-mix(in srgb, var(--muted) 28%, transparent), transparent 70%),
    radial-gradient(70% 30% at 40% 92%, color-mix(in srgb, var(--muted) 34%, transparent), transparent 70%);
  will-change: transform; animation: look-fog 46s ease-in-out infinite alternate; }  /* no blur filter (see aurora) */
@keyframes look-fog { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
:root[data-atmos="rays"]::before {
  inset: auto; left: 50%; top: -100vmax; width: 200vmax; height: 200vmax; margin-left: -100vmax;
  background: repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--accent) 11%, transparent) 0deg 4deg, transparent 4deg 18deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 62%); mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 62%);
  will-change: transform; animation: look-spin 160s linear infinite; }
@keyframes look-spin { to { transform: rotate(360deg); } }
:root[data-atmos="contours"]::before {
  background:
    repeating-radial-gradient(circle at 18% 28%, transparent 0 22px, color-mix(in srgb, var(--ink) 9%, transparent) 23px 24px),
    repeating-radial-gradient(circle at 82% 72%, transparent 0 30px, color-mix(in srgb, var(--accent) 10%, transparent) 31px 32px); }
:root[data-atmos="horizon"]::before {
  inset: auto -50% -10vh; height: 60vh;
  background-image: linear-gradient(color-mix(in srgb, var(--accent) 45%, transparent) 2px, transparent 2px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent) 2px, transparent 2px);
  background-size: 60px 60px; transform: perspective(320px) rotateX(62deg); transform-origin: bottom;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%); mask-image: linear-gradient(to top, #000 10%, transparent 90%);
  will-change: transform; animation: look-grid 2.4s linear infinite; }
/* moved with a transform (handled by the graphics card) rather than background-position, which redrew the layer every frame */
@keyframes look-grid { from { transform: perspective(320px) rotateX(62deg) translateY(0); } to { transform: perspective(320px) rotateX(62deg) translateY(60px); } }
:root[data-atmos="horizon"]::after {
  content: ""; position: fixed; left: 50%; bottom: 24vh; width: 38vmin; height: 38vmin; margin-left: -19vmin; border-radius: 50%;
  z-index: -1; pointer-events: none; opacity: 0.55;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--t-high) 80%, transparent), color-mix(in srgb, var(--accent) 70%, transparent));
  -webkit-mask-image: linear-gradient(to bottom, #000 0 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 77%, transparent 77% 83%, #000 83% 90%, transparent 90% 96%, #000 96%);
  mask-image: linear-gradient(to bottom, #000 0 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 77%, transparent 77% 83%, #000 83% 90%, transparent 90% 96%, #000 96%); }
:root[data-atmos="mood"]::before {   /* --mood-c / --mood-k are set from the S&P 500's day by appearance.js */
  background: radial-gradient(90% 60% at 50% -10%, color-mix(in srgb, var(--mood-c, var(--muted)) calc(var(--mood-k, 0.15) * 45%), transparent), transparent 72%); }
:root[data-atmos="flashlight"]::after {   /* the page is dark except around the pointer (--cx / --cy from appearance.js) */
  content: ""; position: fixed; inset: 0; z-index: 19; pointer-events: none;
  background: radial-gradient(circle 300px at var(--cx, 50vw) var(--cy, 40vh), transparent 0, transparent 35%, rgba(0, 0, 0, 0.55) 100%); }
:root[data-scheme="light"][data-atmos="flashlight"]::after {
  background: radial-gradient(circle 300px at var(--cx, 50vw) var(--cy, 40vh), transparent 0, transparent 35%, rgba(0, 0, 0, 0.32) 100%); }
@media (hover: none) { :root[data-atmos="flashlight"]::after { display: none; } }

/* Over a moving background the top bar's frosted glass re-blurred every frame; there it is solid instead. */
:root:is([data-atmos="aurora"], [data-atmos="stars"], [data-atmos="fog"], [data-atmos="rays"], [data-atmos="horizon"]) .nav {
  -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--page) 94%, transparent); }

/* ---------- overlays: film grain, scanlines, vignette (one layer above everything, never catches the mouse) ---------- */
:root[data-grain] { --ov-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E"); }
:root[data-scan] { --ov-scan: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 3px); }
:root[data-vignette] { --ov-vig: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.4) 100%); }
:root:is([data-grain], [data-scan], [data-vignette]) body::after {
  content: ""; position: fixed; inset: 0; z-index: 95; pointer-events: none;
  background-image: var(--ov-scan, none), var(--ov-vig, none), var(--ov-grain, none); }

/* ---------- colour filters for the whole screen ---------- */
:root[data-ink] { filter: grayscale(1); }
:root[data-warm] { filter: sepia(0.3) saturate(1.15) hue-rotate(-10deg) brightness(0.97); }
:root[data-ink][data-warm] { filter: grayscale(1) sepia(0.35); }

/* ---------- spotlight: cards light up where the pointer is (--mx / --my from appearance.js) ---------- */
:root[data-spot] :is(.card, .hero, .grid .story, .wcard, .mtile, .heat-tile) { position: relative; }
:root[data-spot] :is(.card, .hero, .grid .story, .wcard, .mtile, .heat-tile)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, -500px) var(--my, -500px), color-mix(in srgb, var(--accent) 85%, transparent), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  transition: opacity 0.3s var(--ease); }
:root[data-spot] :is(.card, .hero, .grid .story, .wcard, .mtile, .heat-tile):hover::after { opacity: 1; }
:root[data-spot] :is(.card, .hero, .grid .story, .wcard, .mtile):hover {
  background-image: radial-gradient(420px circle at var(--mx, -500px) var(--my, -500px), color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%); }

/* ---------- 3D tilt on hover (--rx / --ry from appearance.js) ---------- */
/* The cards' entrance animation ("rise", fill both) keeps holding transform: none after it ends, and a held animation
   beats any hover transform. With tilt, floating or brutal cards it fills backwards only, so hover movement shows. */
:root:is([data-tilt], [data-cards="floating"], [data-cards="brutal"]) :is(.grid .story, .wcard, .mtile, .heat-tile, .hero) {
  animation-fill-mode: backwards; }
:root[data-tilt] :is(.grid .story, .wcard, .mtile, .heat-tile, .hero):hover {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px);
  transition: transform 0.12s ease-out, box-shadow 0.4s var(--ease); }

/* ---------- focus: hovering one story dims the others ---------- */
:root[data-focus] :is(.river, .grid, .watch-grid, .heat-grid, .today-list) > * {
  transition: opacity 0.3s var(--ease), filter 0.3s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background-color 0.2s; }
:root[data-focus] :is(.river, .grid, .watch-grid, .heat-grid, .today-list):hover > :not(:hover) { opacity: 0.38; filter: saturate(0.6); }

/* ---------- privacy: prices blurred until you point at their card (for screen sharing) ---------- */
/* Only the innermost price texts blur (never a box and its contents twice), so pointing at a card reveals all of it. */
:root[data-privacy] :is(.px, .mtile .val, .up, .down, .pchg > b, .tk-price, .today-px > b, .today-index > b, .heat-tile span, .brief-price,
  .chart .axis-label, .tip) {
  filter: blur(6px); transition: filter 0.25s var(--ease); }
:root[data-privacy] :is(.story, .mtile, .wcard, .mini, .heat-tile, .today-row, .today-index, .tk-head, .chart-panel, .brief, .filing):hover
  :is(.px, .mtile .val, .up, .down, .pchg > b, .tk-price, .today-px > b, .today-index > b, .heat-tile span, .brief-price, .chart .axis-label, .tip),
:root[data-privacy] .today-index:hover > b, :root[data-privacy] :is(.mtile, .heat-tile):hover :is(.val, span) { filter: none; }

/* ---------- crosshair pointer, calm motion ---------- */
:root[data-cursor] body { cursor: crosshair; }
:root[data-motion="calm"] *, :root[data-motion="calm"] *::before, :root[data-motion="calm"] *::after,
:root[data-motion="calm"]::before, :root[data-motion="calm"]::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* ---------- session line: how far through today's US session we are (appearance.js) ---------- */
.look-session {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 25; pointer-events: none; width: calc(var(--p, 0) * 100%);
  background: var(--s-low); color: var(--s-low); box-shadow: 0 0 10px currentColor; transition: width 1s linear; }
.look-session.is-open { background: var(--up); color: var(--up); }
.look-session.is-extended { background: var(--s-medium); color: var(--s-medium); }

/* ---------- the Appearance panel: a wide sheet on the right, sidebar of sections, the page still visible ---------- */
dialog.look-drawer {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(900px, 100%); height: 100dvh; max-height: none; max-width: 100%;
  padding: 0; border-radius: 0; border-left: 1px solid var(--hair); background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-lift); z-index: 80; transition: opacity 0.2s var(--ease); }
dialog.look-drawer[open] { display: flex; flex-direction: column; animation: look-slide 0.35s var(--ease) both; }
dialog.look-drawer.peek { opacity: 0.04; }
@keyframes look-slide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.look-head { display: flex; align-items: center; gap: 10px; padding: 18px 22px 16px; border-bottom: 1px solid var(--hair); }
.look-title { flex: 1; min-width: 0; }
.look-head h2 { margin: 0; font-size: 24px; }
.look-now { margin: 2px 0 0; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.look-peek { padding: 7px 14px; font-size: 13px; user-select: none; -webkit-user-select: none; touch-action: none; }

.look-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 196px minmax(0, 1fr); }
.look-nav { border-right: 1px solid var(--hair); padding: 14px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-2); }
.look-nav-item { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background-color 0.2s, color 0.2s; }
.look-nav-item:hover { background: var(--fill); color: var(--ink); }
.look-nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.look-nav-item[aria-current="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.look-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity 0.2s; flex-shrink: 0; }
.look-nav-item.changed .look-dot { opacity: 1; }

.look-body { overflow-y: auto; padding: 4px 26px 40px; overscroll-behavior: contain; position: relative; }
.look-sec { padding: 22px 0 10px; }
.look-sec + .look-sec { border-top: 1px solid var(--hair); }
.look-sec h3 { margin: 0 0 3px; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.look-sec > p { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.look-sub { margin: 16px 0 8px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.look-sec > .look-sub:first-of-type { margin-top: 6px; }
.look-foot { display: flex; gap: 8px; align-items: center; padding: 12px 22px 16px; border-top: 1px solid var(--hair); }
.look-foot small { color: var(--muted); font-size: 12px; margin-right: auto; }

/* looks: a mini page and a name each */
.look-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.look-preset { all: unset; box-sizing: border-box; cursor: pointer; border-radius: 14px; padding: 8px; display: grid; gap: 8px;
  border: 1px solid var(--hair); background: var(--surface-2); transition: border-color 0.2s, transform 0.2s var(--ease), box-shadow 0.2s; }
.look-preset:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--hair)); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.look-preset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.look-preset[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.look-preset .look-mini { height: 64px; }
.look-preset-text { display: grid; gap: 1px; padding: 0 4px 2px; }
.look-preset b { font-size: 13px; font-weight: 600; }
.look-preset small { font-size: 11px; color: var(--muted); line-height: 1.3; }

/* themes */
.look-themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.look-theme { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 4px; padding: 7px; border-radius: 14px;
  border: 1px solid transparent; transition: border-color 0.2s, background-color 0.2s; min-width: 0; }
.look-theme:hover { background: var(--fill); }
.look-theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.look-theme[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.look-theme > span { font-size: 13px; font-weight: 600; padding: 2px 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.look-theme > small { font-size: 11px; color: var(--muted); padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.look-mini { height: 58px; border-radius: 10px; padding: 9px; display: grid; align-content: start; gap: 5px; border: 1px solid var(--hair); overflow: hidden; }
.look-mini i { display: block; height: 20px; border-radius: 5px; padding: 5px 6px; }
.look-mini i::before, .look-mini i::after { content: ""; display: block; height: 3px; border-radius: 2px; background: var(--mini-ink); }
.look-mini i::before { width: 70%; margin-bottom: 3px; }
.look-mini i::after { width: 45%; opacity: 0.55; }
.look-mini em { display: block; width: 22px; height: 5px; border-radius: 3px; }
.look-mini-blank { background: repeating-linear-gradient(135deg, var(--fill) 0 6px, transparent 6px 12px); }

/* chips, accents, segmented rows, switches */
.look-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.look-chip { border: 1px solid var(--hair); background: none; border-radius: var(--r-ctl); padding: 7px 13px; font-size: 13px; font-weight: 500;
  color: var(--ink-2); cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.look-chip:hover { background: var(--fill); color: var(--ink); }
.look-chip[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.look-fonts .look-chip { font-size: 15px; padding: 8px 15px; }
.look-atmos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.look-atmos .look-chip { border-radius: 12px; text-align: left; padding: 10px 12px; display: grid; gap: 2px; }
.look-atmos .look-chip::after { content: attr(title); font-size: 11px; font-weight: 400; opacity: 0.75; }
.look-drawer .seg { flex-wrap: wrap; }
.look-drawer .seg button { padding: 5px 12px; }
.look-accents { display: flex; flex-wrap: wrap; gap: 10px; }
.look-accent { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--hair); cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.look-accent:hover { transform: scale(1.1); }
.look-accent[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ink); }
.look-accent.theme-acc { background: conic-gradient(var(--f-earnings), var(--f-fda), var(--f-insiders), var(--f-deals), var(--f-risk), var(--f-macro), var(--f-earnings)); }

.look-rows { display: grid; gap: 2px; }
.look-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; margin: 0 -10px; border-radius: 12px; cursor: pointer; }
.look-row:hover { background: var(--fill); }
.look-seg-row { cursor: default; flex-wrap: wrap; gap: 6px 12px; }
.look-seg-row:hover { background: none; }
.look-row span { flex: 1; display: grid; font-size: 14px; font-weight: 500; }
.look-row small { color: var(--muted); font-size: 12px; font-weight: 400; }
.look-switch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; align-items: start; }
.look-switch-group:last-child { grid-column: 1 / -1; }
.look-switch-group:last-child .look-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.look-switch { all: unset; flex-shrink: 0; width: 38px; height: 22px; border-radius: 11px; background: var(--fill-hover); position: relative; cursor: pointer;
  transition: background-color 0.2s; }
.look-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s var(--ease); }
.look-switch[aria-checked="true"] { background: var(--accent); }
.look-switch[aria-checked="true"]::after { transform: translateX(16px); background: var(--on-accent); }
.look-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 900px) {
  .look-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .look-themes, .look-atmos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  dialog.look-drawer { width: 100%; border-left: 0; }
  .look-head { padding: 14px 16px 12px; }
  .look-peek { display: none; }
  .look-main { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .look-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--hair); padding: 8px 10px; scrollbar-width: none; }
  .look-nav-item { white-space: nowrap; padding: 7px 12px; }
  .look-body { padding: 0 16px 32px; }
  .look-themes, .look-atmos, .look-switch-grid, .look-switch-group:last-child .look-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .look-switch-grid, .look-switch-group:last-child .look-rows { grid-template-columns: 1fr; }
}

/* =====================================================================================================================
   Modern style: the default since 2026-10-11 (Appearance > Themes > Style > Classic brings back the original design).
   Shapes, depth, light and motion only: every colour comes from the theme's own tokens, so all themes keep working.
   It steps aside where the reader picked a background (data-atmos), a card style (data-cards) or a title style
   (data-titles) of their own. theme.js sets data-ui="modern" unless Classic is chosen.
   ===================================================================================================================== */
:root[data-style="classic"] { --ui-style: classic; }
:root[data-ui="modern"] {
  --r-card: 20px;
  --edge: color-mix(in srgb, var(--ink) 9%, transparent);
  --edge-strong: color-mix(in srgb, var(--accent) 42%, transparent);
  --lift: inset 0 1px 0 color-mix(in srgb, #ffffff 5%, transparent), 0 20px 44px -26px rgba(0, 0, 0, 0.7);
  --sheen: linear-gradient(180deg, color-mix(in srgb, var(--ink) 3%, transparent), transparent 46%);
  scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent;
}
:root[data-ui="modern"][data-scheme="light"] {
  --edge: color-mix(in srgb, var(--ink) 8%, transparent);
  --lift: 0 1px 2px rgba(0, 0, 0, 0.04), 0 14px 36px -20px rgba(0, 0, 0, 0.22);
  --sheen: linear-gradient(180deg, color-mix(in srgb, #ffffff 70%, transparent), transparent 46%);
}
:root[data-ui="modern"] ::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); }

/* ambient light behind the page: two soft glows in the theme's accent and macro colours */
:root[data-ui="modern"]:not([data-atmos]) body {
  background:
    radial-gradient(1100px 560px at 8% -10%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%),
    radial-gradient(900px 520px at 100% -8%, color-mix(in srgb, var(--f-macro) 12%, transparent), transparent 58%),
    var(--page);
}

/* top bar: frosted glass with a thin accent line */
:root[data-ui="modern"] .nav {
  background: color-mix(in srgb, var(--page) 94%, transparent);  /* nearly solid: a blur here was redrawn on every scroll frame */
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: var(--edge);
}
:root[data-ui="modern"] .nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; opacity: 0.7;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 60%, transparent) 35%, color-mix(in srgb, var(--f-macro) 55%, transparent) 65%, transparent);
}
:root[data-ui="modern"] .nav-inner { height: 58px; }
:root[data-ui="modern"] .brand { font-size: 18px; font-weight: 700; letter-spacing: -0.03em; }
:root[data-ui="modern"] .mark-dot { filter: drop-shadow(0 0 5px var(--accent)); }
:root[data-ui="modern"] .sections button { padding: 7px 13px; transition: color 0.25s var(--ease), background-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
:root[data-ui="modern"] .sections button[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent);
}
:root[data-ui="modern"] :is(.status, .clock) {
  padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); box-shadow: inset 0 0 0 1px var(--edge);
}

/* page headings: bigger, tighter, an accent overline */
:root[data-ui="modern"] .page-head { padding: 40px 0 22px; }
:root[data-ui="modern"] .page-head h1 { font-size: clamp(34px, 4.8vw, 56px); letter-spacing: -0.04em; line-height: 1.02; }
:root[data-ui="modern"]:not([data-titles]) .page-head h1 {
  background: linear-gradient(180deg, var(--ink) 35%, color-mix(in srgb, var(--ink) 58%, var(--accent)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-ui="modern"] .overline { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
:root[data-ui="modern"] .lede { font-size: 17px; }
:root[data-ui="modern"] .section-title { display: flex; align-items: center; gap: 14px; margin-top: 40px; font-size: 22px; letter-spacing: -0.025em; }
:root[data-ui="modern"] .section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--edge), transparent); }
:root[data-ui="modern"] .panel-title { letter-spacing: -0.02em; }

/* surfaces: a hairline edge, a soft sheen and a deep, soft shadow; they lift and catch the accent on hover */
:root[data-ui="modern"]:not([data-cards]) :is(.card, .hero, .grid .story, .mtile, .wcard, .skel, .auth-card) {
  border: 1px solid var(--edge); box-shadow: var(--lift); background-image: var(--sheen);
}
:root[data-ui="modern"]:not([data-cards]) :is(.grid .story, .mtile, .wcard) {
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.3s var(--ease);
}
:root[data-ui="modern"]:not([data-cards]) :is(.grid .story, .mtile, .wcard):hover {
  transform: translateY(-3px); border-color: var(--edge-strong);
  box-shadow: var(--lift), 0 0 0 4px color-mix(in srgb, var(--accent) 9%, transparent), 0 24px 50px -24px color-mix(in srgb, var(--accent) 45%, transparent);
}
/* stories carry their kind's colour as a thin line along the top, and the lead story a glow in the corner */
:root[data-ui="modern"]:not([data-cards]) :is(.hero, .grid .story) { box-shadow: inset 0 2px 0 color-mix(in srgb, var(--fam, var(--f-other)) 80%, transparent), var(--lift); }
:root[data-ui="modern"]:not([data-cards]) .hero {
  border-radius: 26px; padding: 30px 34px 24px;
  background-image: radial-gradient(640px 240px at 100% 0%, color-mix(in srgb, var(--fam, var(--accent)) 16%, transparent), transparent 70%), var(--sheen);
}
:root[data-ui="modern"] .hero .headline { font-size: clamp(24px, 3.1vw, 36px); letter-spacing: -0.03em; }
:root[data-ui="modern"] .grid { gap: 14px; }
:root[data-ui="modern"] .headline { letter-spacing: -0.018em; }
:root[data-ui="modern"] .river .story:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* market tiles: bigger numbers */
:root[data-ui="modern"] .mtile { padding: 14px 18px 12px; }
:root[data-ui="modern"] .mtile .val { font-size: 23px; font-weight: 700; letter-spacing: -0.035em; }

/* price moves as small tinted pills */
:root[data-ui="modern"] :is(.pchg, .mtile, .wcard .row, .today-px) :is(.up, .down) {
  padding: 1px 8px; border-radius: 999px; font-weight: 600; font-variant-numeric: tabular-nums;
}
:root[data-ui="modern"] :is(.pchg, .mtile, .wcard .row, .today-px) .up { background: color-mix(in srgb, var(--up) 14%, transparent); }
:root[data-ui="modern"] :is(.pchg, .mtile, .wcard .row, .today-px) .down { background: color-mix(in srgb, var(--down) 14%, transparent); }
:root[data-ui="modern"] .mtile :is(.up, .down) { justify-self: start; }

/* controls */
:root[data-ui="modern"] :is(.search, .seg, .quiet-select) { box-shadow: inset 0 0 0 1px var(--edge); }
:root[data-ui="modern"] .search:focus-within { box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent); }
:root[data-ui="modern"] .seg button[aria-checked="true"] { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 0 0 1px var(--edge); }
:root[data-ui="modern"] .btn.primary {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 62%, var(--f-macro)));
  box-shadow: 0 8px 22px -10px var(--accent);
}
:root[data-ui="modern"] .btn.primary:hover { opacity: 1; filter: brightness(1.08); box-shadow: 0 10px 28px -10px var(--accent); }
:root[data-ui="modern"] :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); }
:root[data-ui="modern"] .lvl, :root[data-ui="modern"] .tone { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }

/* small pictures sit on a faint inner panel */
:root[data-ui="modern"] .tech-tile { box-shadow: inset 0 0 0 1px var(--edge); }

/* pages arrive with a soft rise and focus */
:root[data-ui="modern"] .view { animation: look-modern-in 0.35s var(--ease) backwards; }
@keyframes look-modern-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  :root[data-ui="modern"] .view { animation: none; }
  :root[data-ui="modern"]:not([data-cards]) :is(.grid .story, .mtile, .wcard):hover { transform: none; }
}