/* RiskWire: space by default, themes via data-theme, light/dark via data-mode. */
:root {
  --font: "Manrope", system-ui, sans-serif;
  --display: "Sora", "Manrope", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  /* The signal colours. These four say what the market is doing and nothing
     else is allowed to say it, so NO theme and NO text-colour choice may
     redefine them - a reader must never see a colour that means one thing on
     one person's screen and another on somebody else's. Cosmetic choices live
     in --text, --muted, --accent and --bg. */
  --on: #35e0a1; --off: #ff5f7a; --mixed: #ffd166; --dead: #79819a;
  /* Non-signal emphasis. A grade is not a direction, so it must not borrow a
     signal colour - and it cannot use --accent either, because that has twelve
     per-theme values and lands on red in one of them. Protected like the four
     above: no theme, no text choice. */
  --grade: #7fb2ff;
  /* --gink is the dial's own ink, set by MODE alone so no theme or text choice
     can reach it. The needle used to be var(--text) and the ticks var(--muted),
     which meant picking green text turned the needle green - the same class of
     bug as the gauge colour one, hiding in a second place. */
  --radius: 14px;
}

/* ---- themes ----
   Nebula and Solar are still skies. Every other theme is an ANIMATED scene drawn
   on the canvas (see the sky() block in app.js): warp streaks, a turning spiral,
   meteors, a moon in orbit, drifting rock, aurora curtains, an
   accretion disc, a comet. The CSS here is only the base wash behind that scene,
   deliberately plain so it never fights the animation. No theme touches --text
   or --muted, which the viewer picks separately. */
html[data-mode="dark"] { --gink: #edf1fa; --text: #edf1fa; --muted: #9aa5c0; --border: rgba(255,255,255,.10);
  --panel: rgba(9, 12, 26, .975); --panel2: rgba(255,255,255,.06); --stars: 1; }
/* still violet cloud (kept) */
html[data-mode="dark"][data-theme="nebula"] { --bg: #04050d; --accent: #7c9cff; --accent2: #6f8fe8;
  --bgimg: radial-gradient(1050px 700px at 14% 24%, rgba(52,82,196,.16), transparent 63%),
           radial-gradient(920px 640px at 86% 64%, rgba(38,108,188,.13), transparent 62%),
           radial-gradient(700px 900px at 52% 110%, rgba(44,146,158,.10), transparent 60%),
           linear-gradient(180deg,#05060f,#04050d 50%,#04050e); }
/* a star off the corner (kept) */
html[data-mode="dark"][data-theme="solar"] { --bg: #100803; --accent: #e8a154; --accent2: #d97a4a;
  --bgimg: radial-gradient(620px 620px at 92% -8%, rgba(255,200,110,.30), rgba(230,120,40,.12) 44%, transparent 68%),
           radial-gradient(1200px 300px at 92% -8%, rgba(255,170,80,.12), transparent 70%),
           radial-gradient(900px 700px at 18% 92%, rgba(150,45,35,.13), transparent 64%),
           linear-gradient(180deg,#140a04,#100803 70%,#0b0603); }
/* stars streaking past */
html[data-mode="dark"][data-theme="warp"] { --bg: #01030a; --accent: #9fd8ff; --accent2: #7fb4e0;
  --bgimg: radial-gradient(90% 90% at 50% 50%, rgba(30,60,140,.16), transparent 70%), linear-gradient(180deg,#01030a,#000208); }
/* a spiral turning */
html[data-mode="dark"][data-theme="galaxy"] { --bg: #050311; --accent: #c9b4ff; --accent2: #e8c07a;
  --bgimg: radial-gradient(120% 90% at 50% 48%, rgba(70,40,140,.20), transparent 72%), linear-gradient(180deg,#060412,#04020e); }
/* a quiet sky, then a streak */
html[data-mode="dark"][data-theme="meteor"] { --bg: #03060f; --accent: #9fc4ee; --accent2: #7fa4ce;
  --bgimg: radial-gradient(1100px 700px at 70% 6%, rgba(40,70,140,.14), transparent 66%), linear-gradient(180deg,#04070f,#02040b); }
/* a moon going round a world */
html[data-mode="dark"][data-theme="orbit"] { --bg: #02090f; --accent: #63d3e0; --accent2: #4fa8bc;
  --bgimg: radial-gradient(120% 60% at 50% 104%, rgba(20,90,110,.22), transparent 66%), linear-gradient(180deg,#020a11,#01060c); }
/* rocks drifting by */
html[data-mode="dark"][data-theme="belt"] { --bg: #08070a; --accent: #c2b092; --accent2: #9a8a70;
  --bgimg: radial-gradient(110% 80% at 30% 40%, rgba(70,60,45,.16), transparent 70%), linear-gradient(180deg,#09080b,#060508); }
/* curtains rippling */
html[data-mode="dark"][data-theme="aurora"] { --bg: #02100f; --accent: #5fd9b4; --accent2: #74c9a0;
  --bgimg: radial-gradient(120% 52% at 50% 118%, rgba(30,150,110,.16), transparent 68%), linear-gradient(180deg,#030f0e,#02100f); }
/* ships crossing against a nebula */
html[data-mode="dark"][data-theme="fleet"] { --bg: #06040f; --accent: #a9b6ff; --accent2: #8f7ae0;
  --bgimg: radial-gradient(120% 90% at 50% 45%, rgba(70,50,140,.16), transparent 72%), linear-gradient(180deg,#070511,#05030c); }
/* one long arc across the sky */
html[data-mode="dark"][data-theme="comet"] { --bg: #02060e; --accent: #a8e0f5; --accent2: #7fbcd8;
  --bgimg: radial-gradient(1000px 700px at 30% 80%, rgba(30,70,120,.13), transparent 68%), linear-gradient(180deg,#03070f,#01050b); }
/* nothing but stars */
html[data-mode="dark"][data-theme="void"] { --bg: #000000; --accent: #9aa5c0; --accent2: #7f8aa5;
  --bgimg: none; }
/* flat, no sky */
html[data-mode="dark"][data-theme="clean"] { --bg: #0f1117; --accent: #8ab4ff; --accent2: #8ab4ff;
  --bgimg: none; --panel: #161a23; --stars: 0; }

/* Light mode is the SAME twelve skies, brighter - a daylight version, not a
   white page. Two earlier attempts got this wrong: --stars: 0 hid every scene
   and made all twelve identical, then a full invert turned the page white and
   washed out the session rail. So: each theme keeps its own hue below, panels
   are a soft tint rather than pure white, and the canvas keeps its own scene
   (see #stars). Nothing here touches --text or --muted's readability. */
html[data-mode="light"] { --grade: #2b5fa8; --gink: #16203a; --text: #141a2a; --muted: #4e586c; --border: rgba(10,20,40,.20);
  --panel: rgba(255,255,255,.90); --panel2: rgba(10,20,40,.06); --stars: .55; }
html[data-mode="light"][data-theme="nebula"] { --bg: #c2cbe9; --accent: #4f6bff; --accent2: #8b4de0;
  --bgimg: radial-gradient(1000px 600px at 15% 0%, rgba(96,60,220,.30), transparent 62%); }
html[data-mode="light"][data-theme="solar"] { --bg: #ffdcb4; --accent: #c9701c; --accent2: #c2452b;
  --bgimg: radial-gradient(620px 620px at 92% -8%, rgba(230,125,30,.42), transparent 66%); }
html[data-mode="light"][data-theme="warp"] { --bg: #bcd0ee; --accent: #2f66b8; --accent2: #4a7fc0;
  --bgimg: radial-gradient(900px 700px at 50% 50%, rgba(40,110,190,.30), transparent 70%); }
html[data-mode="light"][data-theme="galaxy"] { --bg: #d8c9f4; --accent: #6b4fd8; --accent2: #a8792f;
  --bgimg: radial-gradient(120% 90% at 50% 48%, rgba(110,65,200,.30), transparent 72%); }
html[data-mode="light"][data-theme="meteor"] { --bg: #c3d2e9; --accent: #3a63a8; --accent2: #5b81bd;
  --bgimg: radial-gradient(900px 500px at 70% 0%, rgba(40,90,165,.28), transparent 66%); }
html[data-mode="light"][data-theme="orbit"] { --bg: #bce5ee; --accent: #1f8496; --accent2: #3f9aa8;
  --bgimg: radial-gradient(120% 60% at 50% 104%, rgba(15,125,150,.34), transparent 66%); }
html[data-mode="light"][data-theme="belt"] { --bg: #e2d8c4; --accent: #7a6a4c; --accent2: #8f8266;
  --bgimg: radial-gradient(900px 600px at 30% 20%, rgba(125,98,58,.30), transparent 68%); }
html[data-mode="light"][data-theme="aurora"] { --bg: #bdecd9; --accent: #0f9f77; --accent2: #3f8f78;
  --bgimg: radial-gradient(120% 50% at 50% 120%, rgba(20,170,120,.36), transparent 66%); }
html[data-mode="light"][data-theme="fleet"] { --bg: #cdc4f0; --accent: #5a4fc0; --accent2: #7a5fd0;
  --bgimg: radial-gradient(120% 90% at 50% 45%, rgba(95,60,195,.30), transparent 72%); }
html[data-mode="light"][data-theme="comet"] { --bg: #bfdcf0; --accent: #2d7fa8; --accent2: #4a8fb8;
  --bgimg: radial-gradient(800px 600px at 20% 10%, rgba(30,125,185,.30), transparent 68%); }
html[data-mode="light"][data-theme="void"] { --bg: #dcdfe6; --accent: #5d667a; --accent2: #6f7a90;
  --bgimg: none; }
html[data-mode="light"][data-theme="clean"] { --bg: #e4e8ef; --accent: #3b5bdb; --accent2: #3b5bdb;
  --bgimg: none; --panel: #fff; }

/* ---- text colour ---- picked by the viewer, dark mode only ---- */
html[data-mode="dark"][data-textcolour="white"]  { --text: #ffffff; --muted: #a8b0c4; }
html[data-mode="dark"][data-textcolour="cream"]  { --text: #f7f0e3; --muted: #b3a894; }
html[data-mode="dark"][data-textcolour="amber"]  { --text: #ffdcaa; --muted: #bb9a6c; }
html[data-mode="dark"][data-textcolour="green"]  { --text: #c9ffda; --muted: #71bf8b; }
html[data-mode="dark"][data-textcolour="cyan"]   { --text: #cdf3ff; --muted: #80b9cd; }
html[data-mode="dark"][data-textcolour="rose"]   { --text: #ffdae1; --muted: #c295a2; }
html[data-mode="dark"][data-textcolour="slate"]  { --text: #cfd6e6; --muted: #8891a6; }
/* The picker used to be dark-mode only, so choosing green in light mode did
   nothing at all. These are the same eight choices as DARK inks: deep enough to
   clear 4.5:1 on a light panel, with a muted partner that still clears 4.5:1. */
html[data-mode="light"][data-textcolour="white"]  { --text: #0b1020; --muted: #4a5468; }
html[data-mode="light"][data-textcolour="cream"]  { --text: #3a2f1c; --muted: #6b5c40; }
html[data-mode="light"][data-textcolour="amber"]  { --text: #5a3a06; --muted: #7d5713; }
html[data-mode="light"][data-textcolour="green"]  { --text: #0d4728; --muted: #2c6a47; }
html[data-mode="light"][data-textcolour="cyan"]   { --text: #0a3f52; --muted: #266175; }
html[data-mode="light"][data-textcolour="rose"]   { --text: #5c1330; --muted: #7d3350; }
html[data-mode="light"][data-textcolour="slate"]  { --text: #1e2634; --muted: #4c5567; }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); }
body { background-image: var(--bgimg); background-attachment: fixed; min-height: 100vh; }
#stars { position: fixed; inset: 0; z-index: 0; opacity: var(--stars); pointer-events: none; will-change: transform; }
/* The scenes are authored as light marks on black. On a bright page they are
   NOT inverted - that produced a white sheet with dark specks. They are
   multiplied into the background instead, so a star darkens the colour under it
   slightly and the sky stays the sky. Contrast is lifted because light marks
   lose most of their punch against a light ground. */
/* NO mix-blend-mode here. multiply forces the compositor to read the page
   backdrop back on every animated frame, which pinned the renderer hard
   enough to hang the tab. A plain filter stays on the GPU. */
html[data-mode="light"] #stars { filter: invert(1) hue-rotate(180deg) contrast(1.45) saturate(.6); }
html[data-mode="light"] .panel { box-shadow: 0 1px 2px rgba(10,20,40,.05), 0 6px 18px rgba(10,20,40,.06); }
/* The session rail draws its own colours, and one of them (London) is a
   near-white built for a black sky. On a bright page it vanishes, so each band
   gets a daylight value. The rail reads these, not its own constants. */
html[data-mode="light"] { --ses-asia: #7a4fd8; --ses-london: #3c6ea8; --ses-ny: #d92d45; }
html[data-mode="dark"]  { --ses-asia: #b48cff; --ses-london: #e6f0ff; --ses-ny: #ff6b7a; }
header, main, .modal, .chat, .toast, .replay { position: relative; z-index: 1; }
.top { z-index: 10; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); font-weight: 400; font-size: .85em; }
.hidden { display: none !important; }
.big { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; font-family: var(--display); }
.panel-title, .brand, .tab, .check-val, .trade-label, .modal-box .panel-title { font-family: var(--display); }
.panel-title { letter-spacing: -.01em; }

/* The bar. box-sizing:border-box so the 1px bottom border is INSIDE the height
   rather than sitting under a box that centres without it - otherwise every row
   is half a pixel high. flex-wrap was dead here: this is a grid. */
.top { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 16px; padding: 11px 16px; box-sizing: border-box; min-height: 66px;
  backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 70%, transparent); border-bottom: 1px solid var(--border); }
.brand { font-weight: 700; letter-spacing: .14em; display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 10px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent2) 14%, transparent));
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset, 0 4px 18px color-mix(in srgb, var(--accent) 18%, transparent); font-size: .95rem; }
.brand .wm { white-space: nowrap; }
.brand b { color: var(--accent); }
.orb { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, var(--accent) 45%, var(--accent2)); box-shadow: 0 0 16px var(--accent); }
.clock { font-family: var(--mono); font-size: .9rem; color: var(--muted); }
.feeds { display: flex; gap: 4px; flex-wrap: wrap; }
.feeds i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--dead); }
.feeds i.ok { background: var(--on); }
.top .left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.top .right { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; min-width: 0; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 900px) { .top { grid-template-columns: 1fr; } .top .right { justify-content: flex-start; } .actions { justify-content: flex-start; } }
.btn { background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 7px 12px; cursor: pointer; font: inherit; font-size: .85rem; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: #fff; border-color: transparent; }
.btn.icon { width: 36px; padding: 7px 0; text-align: center; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--border); font-size: .75rem; font-family: var(--mono); }

main { max-width: 1400px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.panel-title { font-weight: 600; margin-bottom: 10px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.grid2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
@media (max-width: 1000px) { .hero, .grid2 { grid-template-columns: 1fr; } }

/* gauge */
.gauge-wrap { position: relative; }
#gauge { width: 100%; max-width: 440px; display: block; margin: 0 auto; overflow: visible; }
.gauge-label { text-align: center; margin-top: 6px; }
.meter-foot { display: flex; gap: 6px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.k-on2 { color: var(--on); } .k-on1 { color: color-mix(in srgb, var(--on) 70%, var(--text)); }
.k-off2 { color: var(--off); } .k-off1 { color: color-mix(in srgb, var(--off) 70%, var(--text)); }
.k-mixed, .k-sideways { color: var(--mixed); } .k-none { color: var(--muted); }

/* checks
   A full-width band low on the page. Two rows in one grid - labels above,
   readings below - so the arrow sits on the readings instead of drifting up
   between the labels, and the pair is capped and centred rather than thrown to
   opposite edges of a wide screen. Everything here shares one centre line. */
.checks { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto;
  align-items: center; justify-items: center; column-gap: clamp(16px, 5vw, 64px); row-gap: 6px;
  text-align: center; max-width: 540px; margin: 2px auto 0; }
/* Panel subtitles are pushed to the far right by default, which suits a narrow
   card but strands this one at the opposite end of a full-width band. It is a
   sentence about the panel, so it belongs beside the title. */
.checks-panel .panel-title .muted { margin-left: 0; text-align: left; }
.check-t { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.check-val { font-weight: 700; font-size: 1.12rem; }
.check-arrow { color: var(--muted); font-size: 1.4rem; line-height: 1; }
.verdict { margin: 16px auto 0; padding: 12px 14px; border-radius: 10px; background: var(--panel2);
  font-size: .92rem; line-height: 1.4; max-width: 60ch; text-align: center; }
/* The verdict box is centred now, so the colour that carries the signal frames
   it on both sides. A single left bar on a centred paragraph reads as a
   mistake. Same tokens, same meaning. */
.verdict.shakeout-on { border-inline: 3px solid var(--on); } .verdict.shakeout-off { border-inline: 3px solid var(--off); }
.verdict.on { border-inline: 3px solid color-mix(in srgb, var(--on) 60%, transparent); } .verdict.off { border-inline: 3px solid color-mix(in srgb, var(--off) 60%, transparent); }

/* calendar */
.cal { display: flex; flex-direction: column; gap: 6px; max-height: 230px; overflow: auto; }
/* Four columns that cannot lean on each other: the time is as wide as it needs
   to be and never wraps (58px broke "11:00 am" onto two lines), the impact dot
   has a cell exactly its own size, the event takes the rest, the countdown
   keeps to one line on the right. */
.cal-row { display: grid; grid-template-columns: auto 8px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  font-size: .88rem; line-height: 1.35; padding: 6px 8px; border-radius: 8px; }
.cal-row.past { opacity: .45; } .cal-row.soon { background: var(--panel2); }
.cal-row .t { font-family: var(--mono); color: var(--muted); white-space: nowrap; font-size: .8rem; }
.cal-row .ev { min-width: 0; }
.cal-row .cc { display: inline-block; font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; padding: 1px 6px;
  margin-right: 7px; border-radius: 4px; border: 1px solid var(--border); color: var(--muted); vertical-align: 1px; }

.cal-row .cd { white-space: nowrap; }
.imp { width: 8px; height: 8px; border-radius: 50%; background: var(--dead); justify-self: center; }
.imp.High { background: var(--off); } .imp.Medium { background: var(--mixed); } .imp.Low { background: var(--muted); }
.cal-row .cd { font-family: var(--mono); font-size: .78rem; color: var(--muted); }

/* tabs */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
/* A <button> does NOT inherit `color`. With none set it falls back to the user
   agent's `buttontext` - black, because the page declares no color-scheme - so
   an INACTIVE tab was black text on the near-black --panel, a contrast ratio of
   about 1.08:1. Only .tab.active set a colour, which meant the strip was legible
   on exactly the one tab you were already standing on: click an asset and
   "Overview" appeared to go dark, because going dark is what every unselected
   tab had always done. */
.tab { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; font-size: .9rem; }
.tab:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.tab.active { background: var(--accent); color: #fff; border-color: transparent; }
.tab .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 6px; background: var(--dead); }

/* asset grid */
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.card { background: var(--panel2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; cursor: pointer; position: relative; transition: border-color .15s; }
.card:hover { border-color: var(--accent); }
.card.stale { opacity: .45; }
.card .name { font-size: .82rem; color: var(--muted); display: flex; justify-content: space-between; }
.card .px { font-family: var(--mono); font-size: 1.05rem; font-weight: 600; margin: 4px 0; }
.card .row { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; font-family: var(--mono); }
.up { color: var(--on); } .down { color: var(--off); } .flat { color: var(--muted); }
.age { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.age::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; background: var(--on); vertical-align: middle; }
.age.warn::before { background: var(--mixed); } .age.stale::before { background: var(--dead); }
.zbar { height: 4px; border-radius: 2px; background: var(--border); margin-top: 6px; position: relative; overflow: hidden; }
.zbar i { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; background: var(--on); }
.zbar i.neg { background: var(--off); }
.grade { font-family: var(--mono); font-weight: 700; padding: 1px 7px; border-radius: 6px; font-size: .78rem; }
.g-hot { background: color-mix(in srgb, var(--on) 25%, transparent); color: var(--on); }
.g-good { background: color-mix(in srgb, var(--on) 15%, transparent); color: var(--on); }
.g-ok { background: color-mix(in srgb, var(--mixed) 20%, transparent); color: var(--mixed); }
.g-slow { background: color-mix(in srgb, var(--off) 15%, transparent); color: var(--off); }
.g-dead { background: color-mix(in srgb, var(--dead) 25%, transparent); color: var(--dead); }
.g-none { color: var(--muted); }
.aggr { position: absolute; top: 8px; right: 10px; font-size: .68rem; color: var(--mixed); font-family: var(--mono); }

.explain { margin: 0; padding-left: 18px; line-height: 1.5; font-size: .95rem; }
.explain li { margin-bottom: 6px; }
.opps { display: flex; flex-direction: column; gap: 6px; }
/* .opp was the old "moving unusually" row - a horizontal flex line. That markup
   is .opp-mover now (deck.css), and deck.css restyles .opp for the options
   opportunity CARD without resetting display, so this rule was laying that card
   out as one flex row: header, paragraph, levels and evidence side by side.
   Deleted rather than overridden - nothing renders a bare .opp mover any more. */
.stocks summary { cursor: pointer; color: var(--muted); font-size: .85rem; margin-top: 8px; }

/* asset view */
.asset-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
/* Pushed to the far end so it never sits between the name and the price, and
   allowed to wrap onto its own line on a narrow window rather than squeezing
   the price. */
.asset-head .tv-btn { margin-left: auto; font-size: .78rem; padding: 4px 10px; align-self: center; }
.price { font-size: 1.6rem; font-weight: 600; }
.asset-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.stat { background: var(--panel2); border-radius: 10px; padding: 8px 10px; }
.stat .mono { font-size: 1.05rem; margin-top: 2px; }
.bar { height: 10px; border-radius: 5px; background: var(--border); overflow: hidden; margin: 6px 0; }
.bar div { height: 100%; width: 0; background: linear-gradient(90deg, var(--off), var(--mixed), var(--on)); transition: width .4s; }
.trade-label { font-weight: 600; }

/* news */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.chip { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel2); font-size: .78rem; cursor: pointer; }
.chip.active { background: var(--accent); color: #fff; border-color: transparent; }
.news { display: flex; flex-direction: column; gap: 4px; max-height: 620px; overflow: auto; }
.item { display: grid; grid-template-columns: 52px 92px 1fr; gap: 10px; align-items: baseline; padding: 7px 8px; border-radius: 8px; font-size: .9rem; line-height: 1.35; }
.item:hover { background: var(--panel2); }
.item .age { text-align: right; }
.item .src { font-size: .72rem; font-family: var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item.breaking { background: color-mix(in srgb, var(--off) 10%, transparent); border-left: 3px solid var(--off); }
.item.truth { background: color-mix(in srgb, var(--accent2) 12%, transparent); border-left: 3px solid var(--accent2); }
.item.fresh { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: color-mix(in srgb, var(--accent) 35%, transparent); } }
.item .tags { display: inline-flex; gap: 4px; margin-left: 6px; }
.item .tag { font-size: .66rem; padding: 0 5px; border-radius: 4px; background: var(--panel2); color: var(--muted); font-family: var(--mono); }

/* modals */
.modal { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-box { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 18px; width: min(560px, 100%); }
.pref-list, .theme-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 12px 0; }
.pref { padding: 10px; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; background: var(--panel2); }
.pref.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.pref small { display: block; color: var(--muted); }
.swatch { height: 46px; border-radius: 8px; margin-bottom: 6px; border: 1px solid var(--border); }
.row-end { display: flex; justify-content: flex-end; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--accent); padding: 10px 16px; border-radius: 12px; z-index: 30; }

.replay { position: sticky; top: 0; z-index: 11; text-align: center; font-family: var(--mono); font-size: .8rem; letter-spacing: .08em;
  padding: 6px; background: repeating-linear-gradient(45deg, #ffb648 0 12px, #e0952a 12px 24px); color: #1a1200; font-weight: 600; }
.replay { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.replay .rbtn, .replay .rsel { font: inherit; font-size: .78rem; padding: 3px 10px; border-radius: 8px; border: 1px solid rgba(0,0,0,.3); background: rgba(255,255,255,.85); color: #1a1200; cursor: pointer; }
html.paused .replay { background: repeating-linear-gradient(45deg, #7c9cff 0 12px, #5b7be0 12px 24px); color: #fff; }
html.paused .replay .rbtn, html.paused .replay .rsel { color: #10163a; }

/* settings */
.modal-box.wide { width: min(720px, 100%); max-height: 88vh; overflow: auto; }
.settings-tabs { display: flex; gap: 6px; margin: 6px 0 12px; }
.settings-tabs button { font: inherit; font-size: .85rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); cursor: pointer; }
.settings-tabs button.active { background: var(--accent); color: #fff; border-color: transparent; }
.srow { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); }
.srow.small { padding: 5px 0; font-size: .9rem; }
.srow select, .srow input[type=range] { font: inherit; font-size: .85rem; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); }
/* The OPEN dropdown is drawn by the OS, not by the page, and it does not inherit
   --panel2/--text. Left alone it painted near-white text on a near-white system
   menu: the options were invisible until hover gave them a highlight. Each
   option needs its own explicit pair, and --panel2 is translucent so the
   background has to be an opaque colour rather than a token. */
select option { background: #12151f; color: #edf1fa; }
html[data-mode="light"] select option { background: #ffffff; color: #141a2a; }
select option:checked { font-weight: 600; }
.srow input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }
.srcgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; font-size: .88rem; }
.srcgrid label { display: flex; gap: 6px; align-items: center; }
html[data-text="small"] { font-size: 14px; } html[data-text="normal"] { font-size: 16px; } html[data-text="large"] { font-size: 18px; }
html.compact .panel { padding: 10px 12px; } html.compact main { gap: 10px; } html.compact .card { padding: 7px 9px; } html.compact .asset-grid { gap: 6px; }

/* chat drawer */
.chat { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100%); z-index: 15; display: flex; flex-direction: column; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(16px); border-left: 1px solid var(--border); }
body.chat-open main { margin-right: min(380px, 100%); }
@media (max-width: 900px) { body.chat-open main { margin-right: 0; } }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.chat-head .icon { margin-left: auto; }
.chat-list { flex: 1; overflow: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.cmsg { display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: baseline; padding: 5px 6px; border-radius: 8px; font-size: .9rem; line-height: 1.35; }
.cmsg:hover { background: var(--panel2); }
.cmsg.fresh { animation: flash 1s ease-out; }
.cmsg.staff .cu { color: var(--accent); }
.cmsg .ct { font-family: var(--mono); font-size: .68rem; color: var(--muted); }
.cmsg .cx { word-break: break-word; grid-column: 3; }
.cmsg .cmod { opacity: 0; display: flex; gap: 2px; } .cmsg:hover .cmod { opacity: 1; }
.cmsg .cmod button { font-size: .7rem; padding: 1px 5px; border-radius: 5px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); cursor: pointer; }
.cmsg.held { grid-template-columns: auto 1fr; background: color-mix(in srgb, var(--mixed) 12%, transparent); }
.cmsg.held .cx { grid-column: 1 / -1; }
.chat-held { max-height: 200px; overflow: auto; padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: .85rem; }
.chat-compose { display: flex; gap: 6px; padding: 8px 10px 4px; border-top: 1px solid var(--border); }
.chat-compose textarea { flex: 1; resize: none; font: inherit; font-size: .9rem; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); }
.chat-note { padding: 0 12px 10px; font-size: .78rem; }
.err { color: var(--off); font-size: .85rem; min-height: 1.2em; padding: 2px 12px; }
.user-chip { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.user-chip .btn { white-space: nowrap; }
/* auth */
.auth-box { position: relative; width: min(420px, 100%); }
.auth-close { position: absolute; top: 10px; right: 10px; }
.auth-box input { display: block; width: 100%; margin: 8px 0; font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); }
.auth-box .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.btn.wide { width: 100%; margin-top: 6px; padding: 10px; }
.center { text-align: center; margin-top: 10px; }
.or { text-align: center; color: var(--muted); font-size: .8rem; margin: 8px 0; }
.gbtn { display: flex; justify-content: center; margin: 8px 0; }

.donate-icon { color: var(--off); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.donate-icon:hover { border-color: var(--off); }

/* ---------- time zone picker ---------- */
.btn .ico { width: 15px; height: 15px; display: block; margin: 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.clock-btn { font: inherit; color: inherit; background: none; border: 1px solid transparent; border-radius: 5px; padding: 1px 5px; margin-left: -5px; cursor: pointer; }
.clock-btn:hover { border-color: var(--border); background: var(--panel2); }
.tz-search { width: 100%; font: inherit; font-size: .9rem; padding: 9px 12px; margin: 10px 0 4px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); }
.tz-list { max-height: 52vh; overflow: auto; margin: 4px 0 10px; }
.tz-grp { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 12px 0 6px; }
.tz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.pref.tz { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px; padding: 8px 10px; }
.pref.tz .tz-city { font-size: .88rem; }
.pref.tz .tz-now { font-family: var(--mono); font-size: .76rem; color: var(--muted); }
.pref.tz.on .tz-now { color: var(--accent); }
.pref.tz small { grid-column: 1 / -1; font-size: .68rem; }
#modal-tz .row-end { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
#tz-current { margin-right: auto; font-size: .82rem; }

/* Newsletters panel, just above Tools: link cards in Daily and Weekly rows. */
.nl-group { display: flex; flex-direction: column; gap: 6px; }
.nl-group + .nl-group { margin-top: 12px; }
.nl-label { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.nl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.nl-card { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--panel2); color: var(--text); text-decoration: none; transition: border-color .15s; }
.nl-card:hover { border-color: var(--accent); }
.nl-name { font-family: var(--display); font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nl-free { font-family: var(--mono); font-size: .64rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px;
  color: var(--on); border: 1px solid color-mix(in srgb, var(--on) 50%, transparent); background: color-mix(in srgb, var(--on) 12%, transparent); }
.nl-src { font-size: .76rem; color: var(--muted); }
.nl-why { font-size: .84rem; line-height: 1.4; }
.nl-cta { font-size: .8rem; font-weight: 600; color: var(--accent); margin-top: 2px; }

/* Tools panel, at the foot of the homescreen (2026-10-01). One card per tool;
   auto-fit so a lone card uses the full width. */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.tool-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--panel2); color: var(--text); text-decoration: none; transition: border-color .15s; }
.tool-card:hover { border-color: var(--accent); }
.tool-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.tool-ico .ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tool-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 760px; }
.tool-name { font-family: var(--display); font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tool-desc { font-size: .85rem; line-height: 1.4; }
.tool-works { font-size: .76rem; line-height: 1.35; color: var(--muted); }
.tool-note { font-size: .8rem; }
.beta-tag { font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  color: #f5b544; border: 1px solid color-mix(in srgb, #f5b544 55%, transparent); background: color-mix(in srgb, #f5b544 14%, transparent); }
.tool-card .btn { align-self: flex-start; margin: 6px 0 2px; text-decoration: none; }
.tool-howto { margin: 4px 0 2px; font-size: .85rem; line-height: 1.5; }
.tool-howto summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.tool-howto p { margin: 6px 0; }
.tool-howto code { font-family: var(--mono); font-size: .85em; padding: 1px 5px; border-radius: 4px; background: rgba(128,128,128,.16); }
.tool-steps { margin: 6px 0 10px; padding-left: 20px; line-height: 1.6; }
.tool-must { border-left: 3px solid rgba(239,68,68,.8); background: rgba(239,68,68,.06); padding: 8px 10px; border-radius: 6px; }
.tool-fine { font-size: .78rem; }
/* Pro Editor's Notes: the Pro tag, and the owner-only "who sees this" labels. */
.pro-tag { font-family: var(--mono); font-size: .64rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.notes-aud { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  padding: 2px 7px; border-radius: 6px; border: 1px dashed var(--border); }
.notes-pro-panel { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.tool-beta-note { margin: -2px 0 12px; font-size: .82rem; line-height: 1.45; padding: 7px 10px; border-radius: 6px;
  border-left: 3px solid color-mix(in srgb, #f5b544 70%, transparent); background: color-mix(in srgb, #f5b544 7%, transparent); }
.tool-beta-note code { font-family: var(--mono); font-size: .85em; padding: 1px 5px; border-radius: 4px; background: rgba(128,128,128,.16); }
.alert-row.pinned{border-left:3px solid rgba(239,68,68,.8);background:rgba(239,68,68,.06)}
.alert-row.pinned .ar-tm{white-space:nowrap}