/* TROID: ONE VISUAL SYSTEM, TWO THEMES.

   HOW THIS SHEET IS ORGANISED. Tokens first (a dark theme, the default, and a light one), then the base, the layout
   frame, the shared components, the signal stream, the charts, and last the page-specific pieces. A page composes
   components and never invents a value: every colour, radius, gap and type size below is a custom property, so the
   light theme is nothing more than a second set of values for the same names. No template carries a style block.

   THE THEME is chosen once per viewer: templates/base.html sets <html data-theme="dark|light"> before the first
   paint (a stored choice, else the system's preference), and static/troid_ui.js owns the toggle. With no script at
   all the page stays dark, which is the product's own look.

   CONTRAST. Every text token clears WCAG AA (4.5:1) on every surface in both themes: body ink is 12:1 and more, --dim
   (the explanatory copy) 5.3:1 at its worst, each accent at least 4.5:1. --faint is 2:1 and is for decoration only:
   rules, an idle indicator, a disabled control. Numbers are tabular in columns so a column never jitters as it updates.

   THE TWO TIERS are identity, not status, so they never wear the good / bad colours: tier A is violet, tier B cyan,
   the pair validated as a categorical palette (lightness band, chroma floor, protan / deutan separation, normal-vision
   floor, contrast against the panel) in both themes. A second channel always rides with the hue: A is a solid tag,
   B an outlined one, and every tag carries its letter.

   KEYBOARD AND MOTION. Every interactive element shows a focus ring when reached by keyboard; the decoration (the
   orb, the reactor, the pulse, the globe) stands still for a reader who asked their system for reduced motion, and
   while the tab is hidden (body.paused). */

/* ============================================================================================ 1. TOKENS */
:root {
  /* surfaces, darkest to lightest */
  --bg: #06080e; --bg-2: #0a0e18; --well: #090d17; --log: #080c15;
  --panel: #0c111d; --panel2: #111a2e; --panel3: #16213a;
  --line: #1a2336; --line2: #26324e;
  /* text */
  --strong: #eef3fb; --ink: #c9d5e6; --ink2: #a8b6cc; --dim: #8a98b3; --faint: #3d4d6b;
  /* brand and meaning */
  --cyan: #22d3ee; --violet: #a78bfa; --pink: #f472b6; --amber: #fbbf24; --good: #34d399; --bad: #fb7185;
  --on-accent: #06080f;
  --accent: linear-gradient(95deg, var(--cyan), var(--violet));
  /* the two tiers: marks (bars, tag fills) and the ink on a filled tag */
  --tier-a: #8b7cf0; --on-tier-a: #06080e; --tier-b: #0891b2; --tier-b-bg: rgba(8, 145, 178, .14);
  --tier-ab: #5f6f8c;
  /* a wash behind a state, and the hairline around it */
  --cyan-bg: rgba(34, 211, 238, .10);   --cyan-line: rgba(34, 211, 238, .34);
  --violet-bg: rgba(167, 139, 250, .12); --violet-line: rgba(167, 139, 250, .36);
  --pink-bg: rgba(244, 114, 182, .11);  --pink-line: rgba(244, 114, 182, .36);
  --good-bg: rgba(52, 211, 153, .11);   --good-line: rgba(52, 211, 153, .36);
  --bad-bg: rgba(251, 113, 133, .10);   --bad-line: rgba(251, 113, 133, .36);
  --amber-bg: rgba(251, 191, 36, .09);  --amber-line: rgba(251, 191, 36, .38);
  --neutral-bg: rgba(148, 163, 184, .10);
  --row-hover: rgba(34, 211, 238, .045);
  --row-copy: rgba(52, 211, 153, .075);
  /* chrome */
  --nav-bg: rgba(7, 10, 17, .80);
  --glass: linear-gradient(180deg, rgba(17, 26, 46, .74), rgba(10, 15, 28, .80));
  --glass-line: rgba(92, 120, 170, .30);
  --shadow-1: inset 0 1px 0 rgba(255, 255, 255, .025);
  --shadow-2: 0 24px 60px -28px rgba(0, 0, 0, .85);
  --shadow-float: 0 10px 30px rgba(0, 0, 0, .55);
  --glow: 0 0 0 1px rgba(34, 211, 238, .22), 0 10px 30px -12px rgba(34, 211, 238, .45);
  --grid-a: rgba(34, 211, 238, .04); --grid-b: rgba(167, 139, 250, .035);
  --aurora-a: rgba(34, 211, 238, .09); --aurora-b: rgba(167, 139, 250, .08);
  --hero-wash: linear-gradient(90deg, rgba(6, 8, 14, .94) 0%, rgba(6, 8, 14, .6) 40%, rgba(6, 8, 14, .12) 72%, rgba(6, 8, 14, .5) 100%);
  /* charts: static/equity.js and the price chart in static/troid.js read these, so a chart follows the theme */
  --chart-bg: #090d17; --chart-grid: #151d2e; --chart-axis: #8a98b3; --chart-ink: #a8b6cc;
  --chart-up: #34d399; --chart-down: #fb7185; --chart-line: #22d3ee; --chart-line-2: #a78bfa; --chart-halo: #090d17;
  /* shape */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;
  /* spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  /* type */
  --t-2xs: 11px; --t-xs: 12px; --t-sm: 13px; --t-md: 14px; --t-base: 15px; --t-lg: 18px; --t-xl: 22px;
  --t-2xl: 28px; --t-3xl: 36px; --t-hero: clamp(34px, 4.6vw, 54px);
  --sans: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  /* layout */
  --page-max: 1180px; --gutter: 24px; --nav-h: 60px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f4f6fa; --bg-2: #edf1f6; --well: #eef2f7; --log: #f3f6fa;
  --panel: #ffffff; --panel2: #f4f7fb; --panel3: #e9eef5;
  --line: #e1e7ef; --line2: #cfd8e3;
  --strong: #0b1220; --ink: #1c2636; --ink2: #364256; --dim: #566579; --faint: #b3bfce;
  --cyan: #0e7490; --violet: #6d28d9; --pink: #be185d; --amber: #9a4a07; --good: #047857; --bad: #be123c;
  --on-accent: #ffffff;
  --accent: linear-gradient(95deg, #0e7490, #6d28d9);
  --tier-a: #6d28d9; --on-tier-a: #ffffff; --tier-b: #0891b2; --tier-b-bg: rgba(8, 145, 178, .09);
  --tier-ab: #8a97ab;
  --cyan-bg: rgba(14, 116, 144, .08);   --cyan-line: rgba(14, 116, 144, .30);
  --violet-bg: rgba(109, 40, 217, .07); --violet-line: rgba(109, 40, 217, .28);
  --pink-bg: rgba(190, 24, 93, .07);    --pink-line: rgba(190, 24, 93, .28);
  --good-bg: rgba(4, 120, 87, .08);     --good-line: rgba(4, 120, 87, .30);
  --bad-bg: rgba(190, 18, 60, .07);     --bad-line: rgba(190, 18, 60, .28);
  --amber-bg: rgba(180, 83, 9, .08);    --amber-line: rgba(180, 83, 9, .32);
  --neutral-bg: rgba(71, 85, 105, .08);
  --row-hover: rgba(14, 116, 144, .045);
  --row-copy: rgba(4, 120, 87, .065);
  --nav-bg: rgba(255, 255, 255, .84);
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(247, 249, 252, .98));
  --glass-line: #d9e1ec;
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-2: 0 22px 48px -26px rgba(15, 23, 42, .30);
  --shadow-float: 0 10px 28px rgba(15, 23, 42, .16);
  --glow: 0 0 0 1px rgba(14, 116, 144, .22), 0 10px 26px -14px rgba(14, 116, 144, .40);
  --grid-a: rgba(14, 116, 144, .045); --grid-b: rgba(109, 40, 217, .035);
  --aurora-a: rgba(14, 116, 144, .08); --aurora-b: rgba(109, 40, 217, .06);
  --hero-wash: none;
  --chart-bg: #ffffff; --chart-grid: #e8edf3; --chart-axis: #566579; --chart-ink: #364256;
  --chart-up: #059669; --chart-down: #e11d48; --chart-line: #0e7490; --chart-line-2: #6d28d9; --chart-halo: #ffffff;
  color-scheme: light;
}

/* ============================================================================================ 2. BASE */
* { box-sizing: border-box; margin: 0; }
/* NO SIDEWAYS PAGE, EVER: one element wider than the viewport turns every page into a horizontally scrolling one on
   a phone. Each decoration is clipped at its own container (see .hero-2); this is the backstop. */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  background: var(--bg); color: var(--ink);
  font: var(--t-base)/1.6 var(--sans); min-height: 100vh;
  font-feature-settings: "cv11" 1;
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
  display: flex; flex-direction: column;
}
/* the backdrop: two soft pools of light and a faint grid that fades out down the page. Fixed, behind everything. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(900px 520px at 12% -8%, var(--aurora-a), transparent 62%),
    radial-gradient(760px 480px at 92% -6%, var(--aurora-b), transparent 60%),
    linear-gradient(transparent 95%, var(--grid-a) 95%) 0 0 / 44px 44px,
    linear-gradient(90deg, transparent 95%, var(--grid-b) 95%) 0 0 / 44px 44px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 380px, rgba(0, 0, 0, .35) 900px, transparent 1400px);
  mask-image: linear-gradient(180deg, #000 0, #000 380px, rgba(0, 0, 0, .35) 900px, transparent 1400px);
}
::selection { background: var(--cyan-bg); color: var(--strong); }

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a.btn:hover, a.chip:hover, a.logo:hover, a.ev-card:hover, .nav-links a:hover, .foot-links a:hover { text-decoration: none; }
h1, h2, h3, h4 { color: var(--strong); line-height: 1.22; font-weight: 650; }
h1 { font-size: var(--t-2xl); letter-spacing: -.02em; }
h3 { font-size: var(--t-lg); letter-spacing: -.01em; }
code { font: .92em var(--mono); color: var(--ink2); background: var(--neutral-bg);
  padding: 1px 6px; border-radius: var(--r-xs); overflow-wrap: anywhere; }
b, strong { color: inherit; font-weight: 650; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

/* a keyboard reader's first stop: jumps past the navigation, invisible until focused */
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 60; padding: 8px 14px; border-radius: var(--r-sm);
  background: var(--panel); color: var(--strong); border: 1px solid var(--cyan-line); font-weight: 600; font-size: var(--t-sm); }
.skip-link:focus { top: 10px; text-decoration: none; }

/* ============================================================================================ 3. LAYOUT FRAME */
.wrap { width: 100%; max-width: calc(var(--page-max) + 2 * var(--gutter)); margin: 0 auto; padding: var(--s-5) var(--gutter);
  position: relative; }
main.wrap { flex: 1 0 auto; padding-top: var(--s-6); padding-bottom: var(--s-7); }

/* ---- the site header: one bar, the page's own width, above everything while it scrolls ---- */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: var(--s-4); min-height: var(--nav-h); flex-wrap: wrap;
  max-width: calc(var(--page-max) + 2 * var(--gutter)); margin: 0 auto; padding: 8px var(--gutter); }
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: .26em;
  color: var(--cyan); line-height: 1; flex: none; }
.logo b { color: var(--violet); font-weight: 800; }
.logo svg { flex: none; filter: drop-shadow(0 0 6px var(--cyan-line)); }
.nav .spacer { flex: 1; }
.nav .nav-links { display: flex; gap: 2px; flex-wrap: wrap; }
.nav .nav-links a { color: var(--ink2); font-size: var(--t-md); font-weight: 550; padding: 7px 11px; border-radius: var(--r-sm);
  transition: color .15s ease, background-color .15s ease; }
.nav .nav-links a:hover { color: var(--strong); background: var(--neutral-bg); }
.nav-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.nav .who { color: var(--dim); font-size: var(--t-sm); max-width: 24ch; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.nav a.btn, .nav-actions .btn { padding: 8px 15px; font-size: var(--t-md); }

/* the theme switch: an icon button showing where a press takes you (a sun on the dark theme, a moon on the light) */
.theme-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; padding: 0;
  border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--panel); color: var(--ink2); cursor: pointer;
  transition: color .15s ease, border-color .15s ease; }
.theme-toggle:hover { color: var(--strong); border-color: var(--cyan-line); }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
.theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }

/* ---- the footer: the brand and the way out on one side, the standing caveat on the other. Scoped to the element:
        .foot is also the small print under a metric tile. ---- */
footer.foot { border-top: 1px solid var(--line); background: var(--bg-2); color: var(--dim); font-size: var(--t-sm);
  margin-top: auto; }
footer.foot .wrap { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: var(--s-5) var(--s-7);
  padding-top: var(--s-6); padding-bottom: var(--s-6); }
.foot-brand { display: flex; flex-direction: column; gap: var(--s-3); }
.foot-brand .logo { font-size: 15px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.foot-links a { color: var(--ink2); font-size: var(--t-sm); }
.foot-links a:hover { color: var(--strong); }
footer.foot p { margin-bottom: 8px; max-width: 78ch; line-height: 1.6; }
footer.foot p:last-child { margin-bottom: 0; }

/* ---- grids ---- */
.grid { display: grid; gap: var(--s-4); }
.grid > * { min-width: 0; }                  /* a grid child may shrink: a wide table scrolls inside it instead */
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }
@media (min-width: 521px) and (max-width: 900px) { .cols-4.keep-2 { grid-template-columns: 1fr 1fr; } }

/* ============================================================================================ 4. TYPE HELPERS */
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font: 600 var(--t-xs)/1.4 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.eyebrow b { color: var(--violet); }
.eyebrow .dim { letter-spacing: .1em; }
/* a section's own heading: a real heading in sentence case, not a shouted label */
.section-title { font-size: clamp(22px, 2.4vw, 28px); font-weight: 650; letter-spacing: -.02em; color: var(--strong);
  line-height: 1.2; margin: var(--s-7) 0 var(--s-3); text-transform: none; text-wrap: balance; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap;
  margin: 0 0 var(--s-4); }
.section-head .section-title { margin: 0; }
.section-head > a, .section-head > span { font-size: var(--t-md); white-space: nowrap; padding-bottom: 4px; }
.lede { color: var(--ink2); font-size: var(--t-md); line-height: 1.65; margin: 0 0 var(--s-3); max-width: 80ch; }
body.page-public .lede { font-size: var(--t-base); }
.lede b { color: var(--ink); }
/* the explanatory half of a panel heading: sentence case, quiet, on its own line so a long one wraps cleanly */
.sub { display: block; margin-top: 4px; color: var(--dim); font-size: var(--t-sm); font-weight: 400;
  letter-spacing: 0; text-transform: none; line-height: 1.5; max-width: 90ch; }
.tiny { font-size: var(--t-xs); line-height: 1.55; }
.dim { color: var(--dim); }
.mono { font-family: var(--mono); }
.good, .stat .value.good { color: var(--good); } .bad, .stat .value.bad { color: var(--bad); }
.cyan, .stat .value.cyan { color: var(--cyan); } .violet, .stat .value.violet { color: var(--violet); }
.pink { color: var(--pink); } .amber { color: var(--amber); }
.gap { margin-bottom: var(--s-4); } .gap-top { margin-top: var(--s-4); }
abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
details > summary { cursor: pointer; }
details > summary:hover { color: var(--ink); }
/* a reason is a sentence, not a column: let it wrap, and never let it push the table wider */
.why { overflow-wrap: anywhere; white-space: normal; max-width: 42ch; }

/* ============================================================================================ 5. COMPONENTS */

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px;
  border-radius: var(--r-sm); border: 1px solid var(--line2); color: var(--ink); background: var(--panel);
  cursor: pointer; font: 600 var(--t-md)/1.25 var(--sans); white-space: nowrap; text-align: center;
  transition: border-color .16s ease, box-shadow .16s ease, filter .16s ease, transform .16s ease, background-color .16s ease; }
.btn:hover { border-color: var(--cyan-line); box-shadow: var(--glow); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.08) saturate(1.05); }
.btn.danger { border-color: var(--bad-line); color: var(--bad); }
.btn.danger:hover { border-color: var(--bad); background: var(--bad-bg); box-shadow: none; }
.btn.small { padding: 5px 11px; font-size: var(--t-sm); }
.btn.block { display: flex; width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.btn.google { width: 100%; gap: 10px; }

/* ---- the panel: the one card every screen is built from ---- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-5); margin-bottom: var(--s-4); min-width: 0; box-shadow: var(--shadow-1); }
/* a panel's title is a small label; the panel's CONTENT carries the weight */
.panel h2 { font-size: var(--t-xs); letter-spacing: .13em; text-transform: uppercase; color: var(--ink2);
  margin-bottom: var(--s-4); font-weight: 700; line-height: 1.4; }
.panel h2 + h2, .panel .h2-gap { margin-top: var(--s-5); }
.panel h3 { font-size: var(--t-md); }

/* ---- notes, flashes, the caveat strip ---- */
.note { background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--violet);
  border-radius: var(--r-md); padding: 13px 16px; color: var(--ink2); font-size: var(--t-sm); line-height: 1.65; }
.note.cy { border-left-color: var(--cyan); } .note.warn { border-left-color: var(--amber); background: var(--amber-bg); }
.note + .note { margin-top: 10px; }
.note + p, .note + .lede { margin-top: var(--s-3); }
.note b { color: var(--ink); }
.flash { padding: 12px 16px; border-radius: var(--r-md); margin-bottom: var(--s-4); font-size: var(--t-md); line-height: 1.55;
  background: var(--good-bg); border: 1px solid var(--good-line); color: var(--good); }
.flash.err { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
/* the one-line strip under a public page's head: the caveat said once */
.caveat-strip { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin: var(--s-2) 0 var(--s-4);
  padding: 11px 16px; border: 1px solid var(--amber-line); border-radius: var(--r-md);
  background: var(--amber-bg); color: var(--ink2); font-size: var(--t-md); line-height: 1.5; }
.caveat-strip b { color: var(--amber); }
/* a short list of caveats, each on its own line */
.caveat-list { margin: 0 0 var(--s-4); padding: 0; list-style: none; display: grid; gap: 8px; max-width: 88ch; }
.caveat-list li { position: relative; padding: 10px 14px 10px 30px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel); color: var(--ink2); font-size: var(--t-md); line-height: 1.6; }
.caveat-list li::before { content: ""; position: absolute; left: 13px; top: 18px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber); }
.panel .caveat-list li { background: var(--panel2); }

/* ---- stat tiles: the label small, the figure big ---- */
.stat { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 16px; min-width: 0; }
.stat .label { color: var(--dim); font-size: var(--t-2xs); letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.45; font-weight: 600; }
.stat .label .dim { letter-spacing: .02em; text-transform: none; font-weight: 400; }
.stat .value { font-size: var(--t-xl); font-weight: 650; margin-top: 6px; color: var(--strong); letter-spacing: -.02em;
  overflow-wrap: anywhere; line-height: 1.2; }
.stat .value small { font-size: .6em; font-weight: 500; color: var(--dim); }
.stat .foot-note { color: var(--dim); font-size: var(--t-xs); margin-top: 4px; }
.stat.rail { position: relative; padding-left: 19px; overflow: hidden; }
.stat.rail::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line2); }
.stat.rail.cy::before { background: var(--cyan); } .stat.rail.vi::before { background: var(--violet); }
.stat.rail.gd::before { background: var(--good); } .stat.rail.bd::before { background: var(--bad); }

/* the metric row: the dashboard's and the tour's key figures, each on a coloured rail */
.metric-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.metric { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 15px 16px 15px 19px; overflow: hidden; min-width: 0; box-shadow: var(--shadow-1); }
.panel .metric { background: var(--panel2); }
.metric::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line2); }
.metric.cy::before { background: var(--cyan); } .metric.vi::before { background: var(--violet); }
.metric.gd::before { background: var(--good); } .metric.am::before { background: var(--amber); }
.metric .k { color: var(--dim); font-size: var(--t-2xs); letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.45; font-weight: 600; }
.metric .k .dim { letter-spacing: .02em; text-transform: none; font-weight: 400; }
.metric .v { font-size: 26px; font-weight: 650; color: var(--strong); margin-top: 6px; letter-spacing: -.025em;
  line-height: 1.15; overflow-wrap: anywhere; }
.metric .v small { font-size: .5em; font-weight: 500; color: var(--dim); letter-spacing: 0; }
.metric .foot { color: var(--dim); font-size: var(--t-xs); margin-top: 5px; line-height: 1.45; }

/* THE KPI ROW: the published test's headline, the pooled figure first and biggest, then its weeks, how sure, the
   sample and the worst week. One hairline grid; proportional figures, because each value stands alone. */
.kpi-row { display: grid; grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin: 0 0 var(--s-4); box-shadow: var(--shadow-1); }
.kpi { background: var(--panel); padding: 16px 18px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.panel .kpi { background: var(--panel2); }
.kpi .k { color: var(--dim); font-size: var(--t-2xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; line-height: 1.45; }
.kpi .k .dim { text-transform: none; letter-spacing: .02em; font-weight: 400; }
.kpi .v { font-size: 24px; font-weight: 650; color: var(--strong); letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.kpi .v small { font-size: .55em; font-weight: 500; color: var(--dim); letter-spacing: 0; }
.kpi .f { color: var(--dim); font-size: var(--t-xs); line-height: 1.45; }
.kpi.hero { background: linear-gradient(135deg, var(--cyan-bg), var(--violet-bg) 70%), var(--panel); }
.panel .kpi.hero { background: linear-gradient(135deg, var(--cyan-bg), var(--violet-bg) 70%), var(--panel2); }
.kpi.hero .v { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -.035em; }

/* ---- badges: one pill, many meanings ---- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill);
  font: 700 var(--t-2xs)/1.5 var(--sans); letter-spacing: .08em; white-space: nowrap; text-transform: uppercase;
  background: var(--neutral-bg); color: var(--ink2); border: 1px solid transparent; }
.badge.pending, .badge.warn { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-line); }
.badge.approved { background: var(--good-bg); color: var(--good); border-color: var(--good-line); }
.badge.on { background: var(--cyan-bg); color: var(--cyan); border-color: var(--cyan-line); }
.badge.off { background: var(--neutral-bg); color: var(--ink2); }
.badge.mini { font-size: 10px; padding: 1px 7px; }
.step { display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: var(--r-pill); font-size: var(--t-2xs);
  color: var(--on-accent); background: var(--accent); letter-spacing: .08em; vertical-align: 1px; }

/* ---- chips: in-page navigation ---- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.chip { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--r-pill); background: var(--panel);
  border: 1px solid var(--line2); color: var(--ink2); cursor: pointer; font: 600 var(--t-sm)/1.4 var(--sans);
  transition: border-color .15s ease, color .15s ease; }
.chip:hover { border-color: var(--cyan-line); color: var(--strong); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.chip-row .badge { white-space: normal; text-align: left; }

/* ---- tabs: a segmented bar on a desk, a bottom tab bar on a phone (section 9) ---- */
.tabs { display: flex; gap: 4px; margin-bottom: var(--s-4); flex-wrap: wrap; padding: 4px; border-radius: var(--r-md);
  background: var(--panel); border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.tabs button { padding: 8px 16px; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--ink2); font: 600 var(--t-md)/1.3 var(--sans); cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.tabs button:hover { color: var(--strong); background: var(--neutral-bg); }
.tabs button.active { color: var(--strong); background: var(--panel3); border-color: var(--line2); box-shadow: var(--shadow-1); }
.tab { display: none; } .tab.active { display: block; }

/* ---- forms ---- */
input, select, textarea { width: 100%; padding: 10px 13px; background: var(--well); color: var(--ink);
  border: 1px solid var(--line2); border-radius: var(--r-sm); font: var(--t-md)/1.4 var(--sans);
  transition: border-color .16s ease, box-shadow .16s ease; }
input::placeholder, textarea::placeholder { color: var(--dim); opacity: .8; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-bg); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--cyan); }
label { display: block; margin-bottom: var(--s-4); color: var(--ink2); font-size: var(--t-sm); font-weight: 550; line-height: 1.5; }
label input, label select { margin-top: 6px; font-weight: 400; }
label .hint, .hint { color: var(--dim); font-size: var(--t-xs); font-weight: 400; }
label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
label.check input { margin-top: 3px; }
label.warn-check { padding: 10px 12px; border: 1px solid var(--amber-line); border-radius: var(--r-sm); background: var(--amber-bg); }
.readonly-value { padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel2); color: var(--strong); font-size: var(--t-md); }
details.fold { margin: -4px 0 var(--s-4); }
details.fold[open] > summary { margin-bottom: 4px; }
.setup-reset { display: block; margin: 2px 0 var(--s-4); padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel2); }
.setup-reset .hint { display: block; margin-top: 6px; }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
th { text-align: left; color: var(--dim); font-size: var(--t-2xs); letter-spacing: .1em; font-weight: 650;
  text-transform: uppercase; padding: 9px 12px; border-bottom: 1px solid var(--line2); vertical-align: bottom; }
th .dim { text-transform: none; letter-spacing: .02em; font-weight: 400; }
td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--row-hover); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
th.num { text-align: right; }
.scroll { max-height: 300px; overflow: auto; border-radius: var(--r-sm); }
.scroll.tall { max-height: 460px; } .scroll.taller { max-height: 620px; }
/* inside its own scroller a long table keeps its head in view */
.scroll th { position: sticky; top: 0; background: var(--panel); z-index: 1; }
.panel .scroll th { background: var(--panel); }

/* ---- the engine log ---- */
.log { background: var(--log); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px;
  font: 12.5px/1.7 var(--mono); max-height: 260px; overflow: auto; color: var(--ink2); overflow-wrap: anywhere; }
.log .t { color: var(--dim); margin-right: 8px; }

/* ---- the in-page legend under a table: small facts on one line ---- */
.key-line { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--dim); font-size: var(--t-xs); margin-top: 12px;
  line-height: 1.55; }
.key-line span b { color: var(--ink2); }

/* ---- ONE STEP MARKER, on every numbered list the site has: the how-it-works steps, the way in (the landing page,
        sign-up and the dashboard's first run) and the risk page's chain of limits. A numbered disc on the accent. ---- */
.step-n, .how-list li::before, .risk-chain li::before {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font: 700 12px/1 var(--mono); color: var(--on-accent); background: var(--accent); border: 0; }

/* ---- the numbered how-it-works list: each step a title and a body ---- */
.how-list { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: how; color: var(--ink2);
  font-size: var(--t-md); line-height: 1.65; display: grid; gap: 10px; }
.how-list li { position: relative; padding-left: 40px; counter-increment: how; min-height: 26px; }
.how-list li::before { content: counter(how); position: absolute; left: 0; top: 0; }
.how-list .how-t { color: var(--ink); }
.band-note { margin: var(--s-3) 0 0; padding: 10px 14px; border-radius: var(--r-md); border: 1px dashed var(--line2);
  color: var(--ink2); font-size: var(--t-sm); line-height: 1.6; max-width: 96ch; }
.band-note b { color: var(--cyan); }

/* ---- the first-run panel: the way in, its first step done ---- */
.wizard { border-color: var(--cyan-line); box-shadow: var(--glow); }

/* ---- the page head: the title, then the one paragraph that says what the page is for ---- */
.page-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: var(--s-4); }
.page-head h1 { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -.03em; line-height: 1.1; }
.page-head .lede { margin: 0; }
.crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 var(--s-4);
  font: var(--t-xs)/1.4 var(--mono); color: var(--dim); letter-spacing: .02em; }
.crumbs a { color: var(--ink2); } .crumbs .here { color: var(--strong); }
.page-foot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid var(--line); }

/* ============================================================================================ 6. THE SIGNAL STREAM
   Every trade another trader opens, and TROID's answer. The classes a renderer can write itself, and which
   static/troid_ui.js adds to #s-stream and the tour's stream from the words a renderer wrote:
     table.is-stream                         a stream: every column named c-time, c-market, c-trader, c-side,
                                             c-size, c-score, c-tier or c-action from its header
     tr.is-copy / tr.is-pass / tr.is-reversed  the row's decision: a COPY row is lifted, a PASS row recedes
     .dec-badge.copy / .pass / .reversed     the decision word as a pill
     .tier-tag.tier-a / .tier-b              the tier, here and everywhere else it is named: A solid, B outlined
     .score-meter (style="--v: 0.71")        a score with a bar under it, so two scores read at a glance
     .why-line                               the engine's short reason, under the decision                       */
.dec-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: var(--r-pill);
  font: 700 var(--t-2xs)/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--line2); color: var(--ink2); background: transparent; vertical-align: 1px; }
.dec-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.dec-badge.copy { color: var(--good); background: var(--good-bg); border-color: var(--good-line); }
.dec-badge.reversed { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-line); }
.dec-badge.pass { color: var(--dim); }
.dec-badge.pass::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
/* THE TIER TAG, one look wherever a tier is named (the stream, the book, the tables, the evidence pages): tier A, where
   both models agree, is the solid violet one; tier B, the copy model alone, the outlined cyan one; the pooled row of
   both tiers a neutral outline. */
.tier-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 8px;
  border-radius: var(--r-xs); border: 1px solid var(--line2); background: var(--panel2); color: var(--ink2);
  font: 700 var(--t-2xs)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  vertical-align: middle; }
.tier-tag.tier-a { background: var(--tier-a); border-color: transparent; color: var(--on-tier-a); }
.tier-tag.tier-b { background: var(--tier-b-bg); border-color: var(--tier-b); color: var(--cyan); }
.tier-tag.tier-ab { background: transparent; border-color: var(--tier-ab); color: var(--ink2); }
.tier-label { color: var(--ink2); font-weight: 550; }
.score-meter { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px;
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--strong); line-height: 1.1; }
.score-meter i { display: block; width: 52px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--meter, var(--cyan)) calc(var(--v, 0) * 100%), var(--line2) 0); }
.why-line { display: block; margin-top: 4px; color: var(--dim); font: 400 var(--t-xs)/1.4 var(--sans); letter-spacing: 0;
  text-transform: none; white-space: normal; max-width: 34ch; }
.act { font-weight: 700; letter-spacing: .04em; }
tr.is-copy > td { background: var(--row-copy); }
tr.is-copy > td:first-child { box-shadow: inset 3px 0 0 var(--good); }
tr.is-copy:hover > td { background: var(--row-copy); }
tr.is-copy .score-meter i { --meter: var(--good); }
tr.is-pass > td { color: var(--dim); }
tr.is-pass .score-meter { color: var(--ink2); }
tr.is-pass .score-meter i { --meter: var(--faint); }
tr.is-pass .tier-tag { opacity: .7; }
tr.is-reversed > td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
/* the words a renderer already colours keep working: it writes good / bad / dim on the decision cell */
#s-stream td.good, #s-stream td.bad { font-weight: 600; }
/* a stream is dense data: a little less air per row than an ordinary table, the time in the mono face, and the
   decision column wide enough that its reason wraps under the pill rather than squeezing the scores */
table.is-stream td, #signal-stream td { padding-top: 9px; padding-bottom: 9px; vertical-align: middle; }
table.is-stream td.c-time, #signal-stream td:first-child:not([colspan]) { font-family: var(--mono); font-size: var(--t-sm); white-space: nowrap; }
table.is-stream td.c-market { color: var(--strong); font-weight: 600; }
table.is-stream td.c-trader { font-family: var(--mono); font-size: var(--t-sm); }
table.is-stream td.c-action { min-width: 150px; }
table.is-stream td.c-score, table.is-stream th.num { white-space: nowrap; }

/* ============================================================================================ 7. CHARTS
   The candle chart (static/troid.js) and the account curve (static/equity.js) read the --chart-* tokens above. The
   hand-drawn SVGs in the templates carry their dark-theme colours as attributes, and a CSS property beats a
   presentation attribute, so each literal is mapped to its token here and the light theme repaints them. */
#chart-box { height: 400px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--chart-bg); }
#equity-box { height: 300px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--chart-bg); }
.chart-box { height: 300px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--chart-bg); }
.chart-box.short { height: 230px; }
.chart-bar { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.chart-bar select { max-width: 220px; }
svg [stroke="#22d3ee"] { stroke: var(--chart-line); }
svg [stroke="#a78bfa"] { stroke: var(--chart-line-2); }
svg [stroke="#263556"] { stroke: var(--line2); }
svg [stroke="#1c2740"] { stroke: var(--chart-grid); }
svg [stroke="#34d399"] { stroke: var(--chart-up); }
svg [stroke="#fb7185"] { stroke: var(--chart-down); }
svg [stroke="#0a0f1c"] { stroke: var(--chart-halo); }
svg [fill="#22d3ee"] { fill: var(--chart-line); }
svg [fill="#a78bfa"] { fill: var(--chart-line-2); }
svg [fill="#34d399"] { fill: var(--chart-up); }
svg [fill="#fb7185"] { fill: var(--chart-down); }
svg [fill="#3d4d6b"], svg [fill="#7e8fab"] { fill: var(--chart-axis); }
svg stop[stop-color="#22d3ee"] { stop-color: var(--chart-line); }
svg stop[stop-color="#a78bfa"] { stop-color: var(--chart-line-2); }

/* ---- THE PUBLISHED TEST'S TABLE: one row per tier and market, the pooled row set apart. The result per position
        carries a bar in its tier's colour, scaled to the largest result in the table: 2px from its figure, 6px high,
        its data end rounded and its baseline square, so the rows compare at a glance while the figure beside it is
        what is read. ---- */
.ev-table-wrap { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-1);
  overflow: hidden; }
.panel .ev-table-wrap { border-radius: var(--r-md); background: var(--panel); box-shadow: none; }
.ev-table td { vertical-align: middle; }
.ev-table td:first-child { white-space: nowrap; }
.ev-table td b { color: var(--strong); font-family: var(--mono); font-weight: 600; letter-spacing: .01em; }
.ev-table tr.pooled td { background: var(--panel2); border-top: 1px solid var(--line2); font-weight: 600; }
.ev-table tr.pooled.live td { background: linear-gradient(var(--cyan-bg), var(--cyan-bg)), var(--panel2); }
.ev-table tr.pooled td b { font-family: var(--sans); }
.ev-table tr.pooled td .dim.tiny { font-weight: 400; }
.val-bar { display: inline-grid; grid-template-columns: auto 96px; gap: 10px; align-items: center; justify-items: end; }
.val-bar .val { font-weight: 650; color: var(--strong); font-variant-numeric: tabular-nums; }
.val-bar .val.bad { color: var(--bad); }
.mbar { justify-self: start; display: block; height: 6px; width: var(--w, 0%); min-width: 0; border-radius: 0 4px 4px 0;
  background: var(--tier-ab); }
.mbar.mbar-a { background: var(--tier-a); } .mbar.mbar-b { background: var(--tier-b); }
.table-key { margin: 8px 0 0; color: var(--dim); font-size: var(--t-xs); line-height: 1.6; max-width: 100ch; }
.table-key b { color: var(--ink2); }
/* how the test was run, one clause a line, in the page's own reading size */
.method-list { margin: 0 0 var(--s-4); padding-left: 20px; color: var(--ink2); font-size: var(--t-md); line-height: 1.65;
  max-width: 90ch; }
.method-list li + li { margin-top: 4px; }
.method-list li::marker { color: var(--cyan); }
body.page-public .method-list { font-size: var(--t-base); }
.h3-gap { margin: var(--s-5) 0 var(--s-2); font-size: var(--t-md); }

/* ---- ONE LINE PER MARKET (the landing page's evidence): the market, then one column per tier under the tier's tag,
        each line a link to the market's page; the key beside it on a desk, under it on a phone ---- */
.ev-lines { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-3) var(--s-5); align-items: start; }
.ev-lines .table-key { margin: 0; padding-top: 6px; font-size: var(--t-sm); }
.mkt-lines { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-1);
  overflow: hidden; }
.mkt-line { display: grid; grid-template-columns: minmax(64px, .8fr); grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column;
  gap: 10px; align-items: center;
  padding: 10px 16px; border-top: 1px solid var(--line); color: var(--ink2); font-size: var(--t-sm);
  font-variant-numeric: tabular-nums; transition: background-color .15s ease; }
.mkt-line.head { border-top: 0; padding-top: 12px; padding-bottom: 10px; background: var(--panel2); color: var(--dim);
  font: 600 var(--t-2xs)/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
a.mkt-line:hover { background: var(--row-hover); text-decoration: none; }
.mkt-line .mkt { font: 650 var(--t-base)/1.3 var(--mono); color: var(--strong); }
.mkt-line .cell { white-space: nowrap; }
.mkt-line .cell b { color: var(--strong); font-weight: 650; margin-right: 4px; }
.mkt-line .cell b.bad { color: var(--bad); }
@media (max-width: 900px) { .ev-lines { grid-template-columns: 1fr; } }
@media (max-width: 400px) { .mkt-line { padding: 10px 12px; gap: 8px; } .mkt-line .mkt { font-size: var(--t-sm); } }

/* ============================================================================================ 8. THE LANDING PAGE */

/* ---- the hero: the message and the controls on the left, the live paper book on the right, the globe behind ---- */
.hero-2 { position: relative; display: grid; gap: clamp(28px, 4vw, 56px); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  padding: clamp(8px, 3vw, 40px) 0 var(--s-6);
  /* THE GLOBE BLEEDS PAST THE WRAP AND MUST NOT WIDEN THE PAGE: `clip` rather than `hidden`, so the page still
     scrolls vertically and nothing here becomes a scroll container that would trap a sticky child. */
  overflow-x: clip; }
.hero-2 > * { position: relative; z-index: 1; min-width: 0; }
/* THE GLOBE sits behind the whole hero and is pure decoration, kept inside the hero vertically so its wash never
   falls across the caveat strip underneath. Dark theme only: on a light page it would be a dark ball. */
.hero-globe { position: absolute; top: calc(-1 * var(--s-6)); bottom: 0; left: 50%; width: 100vw;
  transform: translateX(-50%); pointer-events: none; z-index: 0; }
.hero-globe canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-globe::after { content: ""; position: absolute; inset: 0; background: var(--hero-wash); }
.hero-globe .fade { position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: linear-gradient(180deg, transparent, var(--bg)); }
:root[data-theme="light"] .hero-globe { display: none; }

.hero-2 .col { display: flex; flex-direction: column; gap: 20px; }
.hero-2 h1 { margin: 0; font-size: var(--t-hero); line-height: 1.04; letter-spacing: -.035em; color: var(--strong);
  font-weight: 650; text-wrap: balance; }
.hero-2 h1 .accent { background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-2 .lede-2 { margin: 0; font-size: clamp(15.5px, 1.5vw, 17.5px); line-height: 1.6; color: var(--ink2);
  max-width: 56ch; text-wrap: pretty; }
.hero-2 .cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-2 .cta .btn { padding: 12px 22px; font-size: var(--t-base); }

/* the live badge: a pill with one pulsing dot */
.live-pill { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 6px 12px;
  border: 1px solid var(--line2); border-radius: var(--r-pill); font: 500 var(--t-xs)/1.3 var(--mono); color: var(--ink2);
  background: var(--panel); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--good);
  box-shadow: 0 0 8px var(--good-line); animation: hero-pulse 1.6s infinite; flex: none; vertical-align: 1px; }
.live-dot.warm { background: var(--amber); box-shadow: 0 0 8px var(--amber-line); }
.live-dot.off { background: var(--faint); box-shadow: none; animation: none; }
@keyframes hero-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* THE DEMO RECORD'S CONSOLE: the two inputs and the record's key figures, framed as one instrument */
.paper-console { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow-1); }
.paper-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.paper-controls label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: var(--t-xs); color: var(--dim);
  font-weight: 600; letter-spacing: .02em; }
.paper-controls input { width: 100%; margin: 0; padding: 9px 11px; border-radius: var(--r-sm); border: 1px solid var(--line2);
  background: var(--well); color: var(--strong); font: 600 var(--t-base)/1.3 var(--mono); }
.paper-controls input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.paper-controls label small { display: block; margin-top: 2px; color: var(--dim); font-size: var(--t-2xs);
  line-height: 1.4; font-weight: 400; letter-spacing: 0; }
.paper-sizing { margin: 0; color: var(--ink2); font-size: var(--t-xs); line-height: 1.5; }
.paper-sizing:empty { display: none; }
/* the figures: one hairline grid, the return first */
.paper-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.paper-stats > div { background: var(--panel2); padding: 11px 12px; min-width: 0; }
.paper-stats .v { font: 650 var(--t-lg)/1.2 var(--sans); letter-spacing: -.02em; color: var(--strong); overflow-wrap: anywhere; }
.paper-stats > div:first-child .v { font-size: 22px; }
.paper-stats .v.good { color: var(--good); } .paper-stats .v.bad { color: var(--bad); }
.paper-stats .k { font-size: var(--t-2xs); color: var(--dim); margin-top: 3px; line-height: 1.35; }
.paper-note { margin: 0; color: var(--dim); font-size: var(--t-sm); max-width: 64ch; line-height: 1.55; }

/* ---- the glass panel: the paper book's curve, its markets and its signal stream ---- */
.tape-glass { position: relative; border: 1px solid var(--glass-line); border-radius: var(--r-lg); background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-2); }
.tape-glass > .head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line);
  font: 500 var(--t-xs)/1.3 var(--mono); }
.tape-glass > .head .title { color: var(--strong); white-space: nowrap; letter-spacing: .04em; }
.tape-glass > .head .src { margin-left: auto; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* ONE grid template for the header row and every body row, so the columns cannot drift apart. The time never wraps;
   the trader column is wide enough for the shortened address in full (0x3f2a…9c1d), taking its width from the price */
.tape-cols { display: grid; grid-template-columns: 62px 88px 60px 36px minmax(0, .7fr) minmax(0, .9fr) 66px; gap: 8px;
  align-items: center; padding: 0 16px; font-family: var(--mono); }
.tape-cols > * { min-width: 0; }
.tape-row .t, .tape-glass .labels > :first-child { white-space: nowrap; }
.tape-glass .labels { padding: 8px 16px; font-size: 10.5px; color: var(--dim); letter-spacing: .06em; border-bottom: 1px solid var(--line); }
.tape-glass .labels .r, .tape-row .r { text-align: right; }
.tape-body { flex: 1; overflow: hidden; position: relative; min-height: 200px;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.tape-slide { will-change: transform; }
.tape-row { height: 34px; font-size: var(--t-xs); border-bottom: 1px solid var(--line); }
.tape-row .t { color: var(--dim); } .tape-row .mkt { color: var(--strong); }
.tape-row .buy { color: var(--good); } .tape-row .sell { color: var(--pink); }
.tape-row .px { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tape-row .who { color: var(--dim); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tape-row .dec { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: var(--t-2xs); }
.tape-row .dec.COPY { color: var(--good); } .tape-row .dec.INVERT { color: var(--amber); }
.tape-row .dec.ASIDE { color: var(--dim); } .tape-row .dec.SCORING { color: var(--amber); }
.tape-row .dec.NORULE, .tape-row .dec.UNKNOWN { color: var(--faint); }
/* A TRADER'S OWN CLOSE is not something TROID did: the row recedes and its last cell reads "closed", quietly */
.tape-row.is-exit { opacity: .72; }
.tape-row .dec.EXIT { color: var(--dim); text-transform: none; font-weight: 500; letter-spacing: 0; font-style: italic; }
/* a COPY in the tape is the row a reader looks for: lifted like the dashboard's stream */
.tape-row:has(.dec.COPY) { background: var(--row-copy); box-shadow: inset 3px 0 0 var(--good); }
.tape-empty { padding: 20px 16px; color: var(--dim); font-size: var(--t-sm); line-height: 1.6; }
/* the stream's one-line key, always there, under the stream */
.tape-key { margin: 0; padding: 8px 16px; border-top: 1px solid var(--line); color: var(--dim);
  font: var(--t-2xs)/1.5 var(--mono); letter-spacing: .02em; }
.tape-key b { color: var(--ink2); font-weight: 650; }

/* BEFORE THE LAUNCH the frame carries the published test's headline and one line on when the record starts */
.pre-launch-body { display: grid; gap: 14px; padding: 18px 16px 20px; }
.pre-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.pre-kpi { background: var(--panel2); padding: 12px 14px; min-width: 0; }
.pre-kpi.hero { grid-column: 1 / -1; background: linear-gradient(135deg, var(--cyan-bg), var(--violet-bg) 70%), var(--panel2); }
.pre-kpi .v { font: 650 20px/1.2 var(--sans); letter-spacing: -.02em; color: var(--strong); overflow-wrap: anywhere; }
.pre-kpi.hero .v { font-size: clamp(30px, 3.4vw, 40px); letter-spacing: -.035em; }
.pre-kpi .v small { font-size: .5em; font-weight: 500; color: var(--dim); letter-spacing: 0; }
.pre-kpi .v.bad { color: var(--bad); }
.pre-kpi .k { margin-top: 3px; color: var(--dim); font-size: var(--t-xs); line-height: 1.4; }
.pre-line { margin: 0; color: var(--ink2); font-size: var(--t-sm); line-height: 1.6; }
.pre-line b { color: var(--strong); }
/* on a desk the paper book stays in view while the reader works the inputs beside it */
@media (min-width: 960px) { .hero-paper .paper-glass { position: sticky; top: calc(var(--nav-h) + 20px); } }
.paper-chart { position: relative; padding: 12px 14px 6px; border-bottom: 1px solid var(--line); }
.paper-chart svg { display: block; width: 100%; height: 170px; }
.paper-chart-empty { position: absolute; inset: 12px 14px 6px; display: flex; align-items: center; justify-content: center;
  text-align: center; margin: 0; padding: 0 12px; color: var(--dim); font-size: var(--t-sm); pointer-events: none; }
.paper-markets { border-bottom: 1px solid var(--line); font: var(--t-xs)/1.4 var(--mono); }
.paper-mkt-row { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 8px;
  padding: 7px 16px; border-bottom: 1px solid var(--line); }
.paper-mkt-row:last-child { border-bottom: 0; }
.paper-mkt-row.head { color: var(--dim); font-size: 10.5px; letter-spacing: .06em; background: var(--neutral-bg); }
.paper-mkt-row .mkt { color: var(--strong); }
.paper-mkt-row .r { text-align: right; } .paper-mkt-row .good { color: var(--good); } .paper-mkt-row .bad { color: var(--bad); }
.paper-cap { margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--line); color: var(--amber); font-size: var(--t-sm); }

/* ---- a landing section: the eyebrow and the title, then its content ---- */
.band { margin-top: var(--s-8); }
.band .section-head { margin-bottom: var(--s-4); }
.band > .how-list, .band > .kpi-row, .band > .card-grid, .band > .step-grid { margin-top: 0; }

/* ---- how a trade is decided, on the landing page: four numbered cards across ---- */
.page-landing .how-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin: 0; font-size: var(--t-md); }
.page-landing .how-list li { padding: 56px 18px 18px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); box-shadow: var(--shadow-1); line-height: 1.6; }
.page-landing .how-list li::before { left: 18px; top: 18px; }
.page-landing .how-list li:not(:last-child)::after { content: ""; position: absolute; top: 31px; left: 54px; right: 18px;
  height: 1px; background: linear-gradient(90deg, var(--cyan-line), transparent); }
.page-landing .how-list .how-t { display: block; margin-bottom: 4px; font-size: var(--t-base); color: var(--strong); }
.page-landing .how-list .how-b { display: block; }

/* ---- three cards: the member's limits ---- */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.feature { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel);
  box-shadow: var(--shadow-1); transition: border-color .2s ease, transform .2s ease; min-width: 0; }
.feature:hover { border-color: var(--cyan-line); transform: translateY(-2px); }
.feature h3 { font-size: var(--t-lg); margin: 14px 0 8px; }
.feature p { color: var(--ink2); font-size: var(--t-md); line-height: 1.65; }
.feature-ico { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 14px;
  color: var(--cyan); background: var(--cyan-bg); border: 1px solid var(--cyan-line); }

/* ---- THE WAY IN, four steps (templates/_evidence_macros.html onboarding): cards on the landing page and the
        dashboard's first run, a plain list on sign-up; a step already done is marked done ---- */
.step-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.step-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); box-shadow: var(--shadow-1); min-width: 0; }
.step-card b { color: var(--strong); font-size: var(--t-base); }
.step-card span:last-child { color: var(--ink2); font-size: var(--t-md); line-height: 1.55; }
.step-card.done { opacity: .62; }
.step-card.done .step-n { background: var(--good-bg); color: var(--good); box-shadow: inset 0 0 0 1px var(--good-line); }
.step-grid.compact .step-card { padding: 14px 16px; gap: 6px; box-shadow: none; background: var(--panel2); }
.step-grid.compact .step-card span:last-child { font-size: var(--t-sm); }
.step-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.step-list .step-card { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 12px; padding: 0; border: 0;
  background: none; box-shadow: none; }
.step-list .step-card .step-n { grid-row: span 2; }
.step-list .step-card b { font-size: var(--t-md); }
.step-list .step-card span:last-child { font-size: var(--t-sm); color: var(--dim); }

/* ---- the tour frame: browser chrome around an iframe of /app?tour=1 ---- */
.tour-frame { position: relative; border-radius: var(--r-xl); padding: 10px; border: 1px solid var(--glass-line);
  background: var(--glass); box-shadow: var(--shadow-2); }
.tour-frame .chrome { display: flex; gap: 6px; padding: 4px 6px 10px; align-items: center; }
.tour-frame .chrome span { width: 10px; height: 10px; border-radius: 50%; background: var(--line2); }
.tour-frame .chrome .url { width: auto; height: auto; border-radius: 0; background: none; margin: 0 auto;
  font: var(--t-2xs) var(--mono); color: var(--dim); }
.tour-box { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--bg); height: 560px; }
.tour-box iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; pointer-events: none; background: var(--bg); }

/* ---- the closing call to action ---- */
.closing-cta { text-align: center; padding: clamp(24px, 3vw, 36px) 20px; border: 1px solid var(--glass-line); border-radius: var(--r-xl);
  background: radial-gradient(120% 140% at 50% 0%, var(--aurora-a), transparent 70%), var(--panel); margin-top: var(--s-4);
  box-shadow: var(--shadow-2); }
.closing-cta .cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.closing-cta .btn { padding: 12px 22px; font-size: var(--t-base); }

/* ============================================================================================ 9. THE MEMBER APP */

/* ---- the instrument header: live state, the three engine buttons and what each one does ---- */
.hud { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px;
  margin-bottom: var(--s-4); overflow: hidden; box-shadow: var(--shadow-1);
  background: linear-gradient(135deg, var(--cyan-bg), var(--violet-bg) 55%, transparent), var(--panel); }
.hud::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 120% at 88% 0%, var(--aurora-a), transparent 70%); }
.hud > * { position: relative; z-index: 1; }
.hud-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(260px, 440px); gap: 18px 24px; align-items: center;
  position: relative; z-index: 1; }
.hud h1 { font-size: 26px; margin: 0; letter-spacing: -.02em; }
.hud .tagline { color: var(--ink2); font-size: var(--t-sm); margin-top: 6px; max-width: 64ch; line-height: 1.55; }
.hud .state { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.hud .state .msg { color: var(--dim); font-size: var(--t-sm); }
.hud .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hud .key-line { margin-top: 8px; }
.btn-captions { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; color: var(--dim); font-size: var(--t-xs); line-height: 1.5; }
.btn-captions b { color: var(--ink2); }
.live-warning { margin-top: 10px; color: var(--amber); font-size: var(--t-xs); line-height: 1.5; padding: 8px 10px;
  border-radius: var(--r-sm); background: var(--amber-bg); border: 1px solid var(--amber-line); }
/* the dashboard's pulse is alive only while the engine is: static/troid.js toggles .is-live on <body> */
body.page-dash:not(.page-tour) .live-dot { background: var(--faint); box-shadow: none; animation: none; margin-right: 2px; }
body.page-dash.is-live .live-dot { background: var(--good); box-shadow: 0 0 0 0 var(--good-line); animation: troid-pulse 2.4s ease-out infinite; }
@keyframes troid-pulse { 0% { box-shadow: 0 0 0 0 var(--good-line); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* the engine reactor (the running indicator) */
.reactor { width: 54px; height: 54px; position: relative; display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.reactor .blade { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--cyan);
  animation: spin 1.1s linear infinite; }
.reactor .blade.b2 { inset: 8px; border-top-color: var(--violet); animation-duration: .8s; animation-direction: reverse; }
.reactor .dot { position: absolute; inset: 22px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan);
  animation: breathe 1.6s ease-in-out infinite; }
.reactor.idle .blade { animation-play-state: paused; opacity: .3; }
.reactor.idle .dot { background: var(--faint); box-shadow: none; animation: none; }
@keyframes breathe { 50% { transform: scale(1.07); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* where the account lives, said at the top of the page: in full on a desk, in one line on a phone */
.demo-strip { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--cyan-line); background: var(--cyan-bg);
  border-radius: var(--r-md); padding: 12px 16px; margin-bottom: var(--s-4); color: var(--ink2); font-size: var(--t-md); line-height: 1.6; }
.demo-strip b { color: var(--cyan); }
.demo-strip.warn { border-color: var(--amber-line); background: var(--amber-bg); }
.demo-strip b.amber { color: var(--amber); }
.demo-strip .strip-short { display: none; }

/* the monitor's feed line is a status bar above the stream, not a panel of its own weight */
#tab-monitor > .panel:first-child { padding: 12px 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
#tab-monitor > .panel:first-child h2 { margin: 0; }
#signal-stream { border-color: var(--line2); }
/* THE ADD SCORE AND THE TIER are not scored live yet: their columns stay out of the stream until a row carries one
   (static/troid.js takes .hide-add off the table then) */
.stream-table.hide-add .col-add, table.is-stream.hide-add td.col-add { display: none !important; }
.nowrap { white-space: nowrap; }
.book-table .act-cell { width: 1%; white-space: nowrap; text-align: right; }

/* the price chart: the hint sits in the middle of the empty canvas until there is a candle to draw */
.chart-wrap { position: relative; }
.chart-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0;
  padding: 0 24px; text-align: center; color: var(--dim); font-size: var(--t-sm); pointer-events: none; }

/* Setup's last panel, folded: switching or restarting the account, which closes every position */
details.fold-panel > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  color: var(--ink); font-size: var(--t-md); list-style: none; }
details.fold-panel > summary::-webkit-details-marker { display: none; }
/* a chevron, since a flex summary loses the browser's own marker: right when folded, down when open */
details.fold-panel > summary::before { content: ""; align-self: center; width: 7px; height: 7px; margin: 0 2px 0 2px;
  border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: rotate(-45deg);
  transition: transform .15s ease; }
details.fold-panel[open] > summary::before { transform: rotate(45deg); }
details.fold-panel > summary .dim { font-weight: 400; }
details.fold-panel[open] > summary { margin-bottom: var(--s-3); }
details.fold-panel .setup-reset { margin: 0; }

/* ---- the seven-screen shell: a segmented bar on a desk; under 820px a fixed BOTTOM TAB BAR, where a thumb is ---- */
.shell-tabs .ico { display: none; }
.shell-tabs .lbl { display: inline; }
@media (max-width: 820px) {
  .shell-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; width: auto; max-width: none;
    display: flex; gap: 0; margin: 0; padding: 0;
    border: 0; border-top: 1px solid var(--line2); border-radius: 0; background: var(--nav-bg);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    padding-bottom: env(safe-area-inset-bottom, 0px); }
  .shell-tabs button { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 9px 2px; min-width: 0; min-height: 52px; border: 0; border-radius: 0; background: transparent;
    font-size: var(--t-2xs); color: var(--dim); }
  .shell-tabs button:hover { background: transparent; border: 0; }
  .shell-tabs button.active { color: var(--cyan); background: var(--cyan-bg); box-shadow: inset 0 2px 0 var(--cyan); border: 0; }
  .shell-tabs .ico { display: block; font-size: 16px; line-height: 1; }
  /* the labels never go under the site's own floor of 11px (--t-2xs) */
  .shell-tabs .lbl { display: block; font-size: var(--t-2xs); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%; white-space: nowrap; }
  body.page-dash { padding-bottom: 68px; }
  /* on the dashboard itself its own nav button is a no-op, and the header's room goes to the docked assistant */
  body.page-dash .nav-dash { display: none; }

  /* THE INSTRUMENT HEADER IN ONE ROW: the state badges and the three buttons; the title, the tagline, the captions and
     the long live-orders warning are for a desk (the Start confirm still asks before a live order) */
  .hud { padding: 10px 12px; }
  .hud-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
  .hud-grid > .reactor, .hud .hud-id h1, .hud .tagline, .hud .hud-id .key-line, .hud .btn-captions, .hud .live-warning { display: none; }
  .hud .hud-id { flex: 1 1 110px; min-width: 0; }
  .hud .state { margin-top: 0; }
  .hud .state .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .hud .state .msg:not(:empty) { flex-basis: 100%; }
  .hud .hud-controls { flex: 0 1 auto; }
  .hud .actions { flex-wrap: nowrap; gap: 6px; }
  .hud .actions .btn { flex: 0 0 auto; padding: 7px 11px; font-size: var(--t-sm); }
  /* the demo strip in one line */
  .demo-strip:has(.strip-short) { padding: 8px 12px; font-size: var(--t-sm); }
  .demo-strip .strip-full { display: none; }
  .demo-strip .strip-short { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* ON A NARROW PHONE the bar shows every screen's icon and the open screen's label, at the full label size */
@media (max-width: 560px) {
  .shell-tabs button:not(.active) .lbl { display: none; }
  .shell-tabs button.active { flex: 2.4 1 0; }
}

/* ---- the tour (/app?tour=1): the SAMPLE marks, the bars, the candle sketch and the three setup cards ---- */
/* INSIDE THE LANDING PAGE'S FRAME the tour is the screens alone: the site's own header and footer stay outside, and so
   do the SAMPLE banner and the instrument header, because the frame's own chrome already says "sample data" and the
   frame shows only its top 520px on a phone, which every screen then spent on the same banner */
body.in-frame .site-header, body.in-frame footer.foot, body.in-frame .skip-link,
body.in-frame .sample-banner, body.in-frame .hud { display: none; }
body.in-frame main.wrap { padding-top: var(--s-4); }
.page-tour .sample-banner { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px;
  margin-bottom: var(--s-4); border: 1px solid var(--amber-line); border-radius: var(--r-md);
  background: var(--amber-bg); color: var(--ink); font-size: var(--t-md); }
.page-tour .metric .v small, .page-tour .sample { font-size: 10px; font-weight: 600; letter-spacing: .08em; color: var(--amber);
  text-transform: uppercase; font-family: var(--mono); }
.page-tour .sample { display: inline-block; padding: 1px 6px; border: 1px solid var(--amber-line); border-radius: 5px; margin-left: 6px;
  vertical-align: middle; line-height: 1.5; }
.page-tour .hud { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.page-tour .hud .state { margin-top: 0; }
.page-tour .scroll { overflow-x: auto; max-height: none; }
.page-tour .tour-step { color: var(--dim); font-size: var(--t-sm); font-family: var(--mono); }
.bars { display: grid; gap: 10px; }
.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: var(--t-sm); }
.bar .track { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 5px; }
.bar .fill { height: 100%; background: var(--faint); border-radius: 0 3px 3px 0; }
.bar.copy .fill { background: var(--good); }
.candles { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--chart-bg); }
.candles i { flex: 1; display: block; border-radius: 2px; background: var(--chart-up); opacity: .75; min-width: 4px; }
.candles i.dn { background: var(--chart-down); }
.setup-step { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); box-shadow: var(--shadow-1); }
.setup-step .step { color: var(--cyan); background: none; padding: 0; font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em; }
.setup-step .field { border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 8px 10px; color: var(--dim);
  font-family: var(--mono); font-size: var(--t-sm); background: var(--well); }
.setup-step .why { color: var(--ink2); font-size: var(--t-sm); line-height: 1.55; max-width: none; }

/* ============================================================================================ 10. EVIDENCE PAGES */
.ev-cards { display: grid; gap: var(--s-3); margin: 0 0 var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.ev-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px 18px; color: var(--ink); box-shadow: var(--shadow-1);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.ev-card:hover { border-color: var(--cyan-line); box-shadow: var(--glow); transform: translateY(-1px); }
.ev-card .mkt { font: 650 var(--t-lg)/1.3 var(--mono); color: var(--strong); letter-spacing: .01em; }
.ev-card .rule { font-size: var(--t-sm); color: var(--cyan); font-weight: 550; }
.ev-card .meter { font: var(--t-sm)/1.5 var(--sans); color: var(--ink2); display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: 2px 10px; }
.ev-card .meter b { color: var(--strong); font-size: var(--t-base); }
.ev-card .meter .sub { grid-column: 2; color: var(--dim); font-size: var(--t-xs); }
.ev-card .meter.live { display: block; color: var(--dim); font-size: var(--t-xs); margin-top: 4px; padding-top: 8px;
  border-top: 1px solid var(--line); }
.ev-card .rule .tier-tag + .tier-tag { margin-left: 4px; }
/* the market nav: a card per market, its name and its tiers, and no figure (the table above carries them) */
.ev-cards.compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.ev-cards.compact .ev-card { padding: 12px 14px; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
h3.ev-tier-head { margin: var(--s-5) 0 var(--s-2); font-size: var(--t-base); display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; }
.ev-tier-head:first-of-type { margin-top: var(--s-3); }
body.page-evidence .section-title { margin-top: var(--s-7); }
body.page-evidence .ev-nav { margin-top: var(--s-7); }
body.page-evidence .ev-nav .ev-card { padding: 12px 14px; }
.rec-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin: 8px 0 0; }
.rec-tiles > div { background: var(--panel2); padding: 14px 16px; min-width: 0; }
.rec-tiles .k { font-size: var(--t-xs); color: var(--dim); }
.rec-tiles .v { font: 650 22px/1.25 var(--sans); letter-spacing: -.02em; color: var(--strong); overflow-wrap: anywhere; margin-top: 2px; }
.rec-tiles .v small { font-size: .6em; color: var(--dim); font-weight: 500; }
.rec-tiles .v.bad { color: var(--bad); } .rec-tiles .v.amber { color: var(--amber); }
.how-sure { font-size: var(--t-sm); line-height: 1.55; margin: 8px 0 0; max-width: 96ch; }
.how-sure.weak { color: var(--amber); }
.how-sure.firm { color: var(--ink2); }
/* the same tier with the bars held fixed between refreshes: a quieter line under the tier's own figures */
.how-sure.held { color: var(--dim); margin-top: 4px; }
.how-sure.held b { color: var(--ink2); font-weight: 600; }

/* ============================================================================================ 11. SIGN IN, SIGN UP */
.auth-card { max-width: 440px; margin: 5vh auto 0; }
.auth-card.wide { max-width: 680px; margin-top: 3vh; }
.auth-card .orb-stage { margin-bottom: 22px; }
.auth-card .panel { padding: 28px; border-radius: var(--r-xl); box-shadow: var(--shadow-2); }
.auth-card .panel h2 { font-size: var(--t-xl); letter-spacing: -.02em; text-transform: none; color: var(--strong); margin-bottom: var(--s-4); }
.auth-card .fine { color: var(--dim); font-size: var(--t-sm); margin-top: 14px; line-height: 1.55; }
.divider { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; color: var(--dim); font-size: var(--t-xs); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line2); }
.help-direct { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 4px; padding: 12px 14px;
  border: 1px solid var(--line2); border-radius: var(--r-md); background: linear-gradient(180deg, var(--cyan-bg), var(--violet-bg)); }
.help-direct b { color: var(--strong); font-size: var(--t-sm); }
.help-direct .help-direct-icon { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 9px;
  color: var(--good); background: var(--good-bg); border: 1px solid var(--good-line); }
.help-direct a { color: var(--cyan); white-space: nowrap; }

/* the orb: the sign-in page's one flourish */
.orb-stage { position: relative; display: grid; place-items: center; }
.orb-stage::after { content: ""; position: absolute; inset: -18% -12%; pointer-events: none; z-index: -1;
  background: radial-gradient(38% 38% at 50% 46%, var(--aurora-a), transparent 70%),
              radial-gradient(30% 30% at 68% 62%, var(--aurora-b), transparent 70%);
  animation: field 22s ease-in-out infinite alternate; }
@keyframes field { to { transform: translate3d(0, -10px, 0) scale(1.06); } }
.orb { width: 260px; height: 260px; position: relative; }
.orb.small { width: 104px; height: 104px; }
.orb .core { position: absolute; inset: 34%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #67e8f9, #164e63 70%);
  box-shadow: 0 0 50px var(--cyan-line), 0 0 120px var(--violet-bg); animation: breathe 4s ease-in-out infinite; }
.orb .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--cyan-line); animation: spin 14s linear infinite; }
.orb .ring::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.orb .ring.two { inset: 12%; border-color: var(--violet-line); animation-duration: 9s; animation-direction: reverse; }
.orb .ring.two::before { background: var(--violet); box-shadow: 0 0 12px var(--violet); }

/* ============================================================================================ 12. THE RISK PAGE */
.risk-page { max-width: 880px; margin: 0 auto; }
.risk-warn { border-radius: var(--r-md); padding: 18px 20px 8px; border: 1px solid var(--bad-line); background: var(--bad-bg);
  margin-bottom: var(--s-4); }
.risk-warn h2 { color: var(--bad); font-size: var(--t-sm); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.risk-warn p { margin-bottom: 10px; color: var(--ink2); font-size: var(--t-md); line-height: 1.65; }
.risk-warn b { color: var(--bad); }
.risk-toc { margin: 0 0 var(--s-4); }
.risk-toc a.chip { text-decoration: none; }
.risk-panel { counter-reset: risk-sec; }
.risk-section { padding: 22px 0; border-bottom: 1px solid var(--line); }
.risk-section:first-of-type { padding-top: 2px; }
.risk-section:last-of-type { border-bottom: none; padding-bottom: 4px; }
.risk-section h3 { counter-increment: risk-sec; font-size: 17px; color: var(--strong); margin: 0 0 12px; }
.risk-section h3::before { content: counter(risk-sec, decimal-leading-zero); margin-right: 10px; color: var(--cyan);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.risk-section p { color: var(--ink2); font-size: var(--t-md); line-height: 1.7; margin-bottom: 10px; max-width: 80ch; }
.risk-section p b { color: var(--ink); }
.risk-section .caveat-list { margin: 0; }
.risk-chain { list-style: none; margin: 4px 0 8px; padding: 0; counter-reset: link; }
.risk-chain li { position: relative; padding: 12px 0 12px 42px; border-bottom: 1px solid var(--line); }
.risk-chain li:last-child { border-bottom: none; padding-bottom: 2px; }
.risk-chain li::before { counter-increment: link; content: counter(link); position: absolute; left: 0; top: 12px; }
.risk-chain .k { display: block; color: var(--strong); font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.risk-chain .d { display: block; color: var(--ink2); font-size: 13.5px; line-height: 1.6; }

/* ============================================================================================ 13. THE ADMIN PAGE */
.adm-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.adm-panel-head h2 { margin-bottom: 0; }
.adm-user b { font-size: 13.5px; }
.adm-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.adm-acct-top { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.adm-acct-top b { font-size: 16px; color: var(--strong); }
.adm-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12px; align-items: baseline; }
.adm-kv .k { color: var(--dim); }
.adm-kv .v { text-align: left; }
.adm-forward { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line2); }
.adm-actions { display: flex; gap: 6px; margin-top: 8px; }
.adm-eng-state { display: flex; align-items: center; gap: 8px; }
/* the answer to an administrator's action, under the member's row: filled by static/troid.js */
.adm-start-result { font-size: var(--t-xs); line-height: 1.5; padding: 8px 12px; border-left: 3px solid var(--cyan);
  background: var(--panel2); border-radius: var(--r-sm); text-align: left; }
.adm-start-result .lines { font-family: var(--mono); white-space: pre-wrap; margin-top: 6px; }
.adm-curve-card { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 18px; }
.adm-curve-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; }
.legend-line { color: var(--dim); font-size: var(--t-sm); margin: 0 0 8px; }

/* ============================================================================================ 14. RESPONSIVE */
@media (max-width: 1000px) {
  .page-landing .how-list, .step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-landing .how-list li:nth-child(2n)::after { display: none; }
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi.hero { grid-column: 1 / -1; }
  .card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hud-grid { grid-template-columns: auto minmax(0, 1fr); }
  .hud-grid > :last-child { grid-column: 1 / -1; }
  .hud .actions .btn { flex: 1 1 auto; }
  footer.foot .wrap { grid-template-columns: 1fr; gap: var(--s-4); }
  .metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .tour-box { height: 520px; }
  .adm-badges, .adm-actions, .adm-eng-state { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
  .adm-actions form { margin: 0; }
  .adm-actions .btn.small { flex: 0 1 auto; }
  .stack td, .stack td .dim.tiny, .stack td b { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
  .stack td .badge { white-space: normal; }
}
/* ONE RULE behind the tables: a long table has to stay readable on a 360px phone, so below 720px every .stack table
   becomes one card per row, each cell labelled from its own data-label; a wide table that does not stack scrolls
   inside its own box instead, so the PAGE never scrolls sideways. */
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .stack thead { display: none; }
  .stack, .stack tbody, .stack tr, .stack td { display: block; width: auto; }
  .stack tr { padding: 10px 12px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .stack td { display: flow-root; border: 0; padding: 3px 0; text-align: right; }
  .stack td.num { text-align: right; }
  /* the label floats left and the cell's own words flow on the right, together, however many pieces they are in */
  .stack td::before { content: attr(data-label); float: left; margin-right: 12px; max-width: 45%; text-align: left;
    color: var(--dim); font-size: var(--t-2xs); letter-spacing: .08em; text-transform: uppercase; line-height: 1.9; }
  .stack td[colspan], .stack td[data-label=""] { text-align: left; }
  .stack td[colspan]::before, .stack td[data-label=""]::before { content: none; }
  .stack .why { max-width: none; }
  .stack tr.is-copy { box-shadow: inset 3px 0 0 var(--good); background: var(--row-copy); }
  .stack tr.is-copy > td, .stack tr.is-copy > td:first-child { background: transparent; box-shadow: none; }
  .stack tr.is-reversed { box-shadow: inset 3px 0 0 var(--amber); }
  .stack tr.is-reversed > td:first-child { box-shadow: none; }
  /* THE STREAM ON A PHONE: one trade per compact card rather than nine labelled lines. The market, its side and the
     decision on the first line; the engine's reason under it; the two scores and the tier; then when and how big.
     Laid out from the column names static/troid_ui.js gives the cells, so it follows the header, not a position. */
  table.is-stream thead { display: none; }
  table.is-stream, table.is-stream tbody { display: block; width: auto; }
  table.is-stream tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; padding: 12px 12px 12px 15px;
    border-bottom: 1px solid var(--line); }
  table.is-stream tr::before, table.is-stream tr::after { content: ""; flex-basis: 100%; height: 0; }
  table.is-stream tr::before { order: 2; }
  table.is-stream tr::after { order: 5; }
  table.is-stream td { display: block; width: auto; padding: 0; border: 0; background: none; box-shadow: none; text-align: left; }
  table.is-stream td::before { content: none; }
  table.is-stream td.c-market { order: 1; font-size: var(--t-base); }
  table.is-stream td.c-side { order: 1; font-size: var(--t-xs); letter-spacing: .06em; }
  table.is-stream td.c-action { display: contents; }
  table.is-stream td.c-action > * { order: 1; }
  table.is-stream td.c-action > .dec-badge { margin-left: auto; }
  table.is-stream td.c-action > .why-line { order: 3; flex-basis: 100%; max-width: none; margin-top: 3px; }
  table.is-stream td.c-score, table.is-stream td.c-tier { order: 4; margin-top: 9px; }
  table.is-stream td.c-score { display: inline-flex; align-items: center; gap: 7px; }
  table.is-stream td.c-score::before { content: attr(data-label); float: none; margin: 0; max-width: none; line-height: 1;
    color: var(--dim); font-size: var(--t-2xs); letter-spacing: .08em; text-transform: uppercase; }
  table.is-stream td.c-score .score-meter { flex-direction: row; align-items: center; gap: 7px; }
  table.is-stream td.c-score .score-meter i { width: 34px; }
  table.is-stream td.c-tier { margin-left: auto; }
  table.is-stream td.c-tier:not(:has(.tier-tag)) { display: none; }
  table.is-stream td.c-time, table.is-stream td.c-trader, table.is-stream td.c-size { display: block; order: 6;
    margin-top: 7px; color: var(--dim); font-size: var(--t-xs); }
  table.is-stream td.c-size::before { content: attr(data-label); float: none; margin: 0 6px 0 0; max-width: none;
    font-size: var(--t-2xs); letter-spacing: .08em; text-transform: uppercase; line-height: 1; }
  table.is-stream tr.is-copy { background: var(--row-copy); box-shadow: inset 3px 0 0 var(--good); }
  table.is-stream tr.is-copy > td, table.is-stream tr.is-copy > td:first-child { background: none; box-shadow: none; }
  table.is-stream tr.is-reversed { box-shadow: inset 3px 0 0 var(--amber); }
  table.is-stream tr.is-note { display: block; }
  table.is-stream tr.is-note::before, table.is-stream tr.is-note::after { content: none; }
  /* THE BOOK ON A PHONE: one trade per two-line card rather than seven labelled lines. The market, its side and the
     money (the broker's profit on an open trade, the result on a closed one) on the first line; when, why and how
     big under it, quietly. Laid out from each cell's data-label, so it follows the table's own columns. */
  table.book-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 11px 12px; }
  table.book-table tr::after { content: ""; flex-basis: 100%; height: 0; order: 2; }
  table.book-table td { display: block; width: auto; padding: 0; border: 0; text-align: left; }
  table.book-table td::before { content: none; }
  table.book-table td[data-label="Market"] { order: 1; font-size: var(--t-base); }
  table.book-table td[data-label="Side"] { order: 1; font-size: var(--t-xs); letter-spacing: .06em; }
  table.book-table td[data-label="Profit / loss"], table.book-table td[data-label="Result"] { order: 1; margin-left: auto;
    font-weight: 650; font-size: var(--t-base); }
  table.book-table td[data-label="Opened"], table.book-table td[data-label="Closed"],
  table.book-table td[data-label="Closed because"], table.book-table td[data-label="Lots"],
  table.book-table td[data-label="Entry"], table.book-table td[data-label="Trader"] { order: 3; color: var(--dim);
    font-size: var(--t-xs); }
  table.book-table td[data-label="Lots"]::after { content: " lots"; }
  table.book-table td[data-label="Entry"]::before { content: "at "; float: none; margin: 0; max-width: none; color: inherit;
    font-size: inherit; letter-spacing: 0; text-transform: none; line-height: inherit; }
  table.book-table td[data-label="Copy score"] { display: none; }
  table.book-table td.act-cell { order: 3; margin-left: auto; width: auto; }
  table.book-table td.act-cell.dim { display: none; }
  table.book-table tr > td[colspan] { order: 0; flex-basis: 100%; }
  /* THE PUBLISHED TEST ON A PHONE: the market, its tier and the result per position on the first line, the rest
     under it, rather than six labelled lines a row. Follows the column order of _evidence_macros.evidence_table
     (tier, market, per position, weeks positive, how sure, positions). */
  table.ev-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 14px; }
  table.ev-table tr::after { content: ""; flex-basis: 100%; height: 0; order: 4; }
  table.ev-table td { display: block; padding: 0; text-align: left; }
  table.ev-table td::before { content: none; }
  table.ev-table td:nth-child(2) { order: 1; font-size: var(--t-base); }
  table.ev-table td:nth-child(1) { order: 2; }
  table.ev-table td:nth-child(3) { order: 3; margin-left: auto; text-align: right; font-size: var(--t-lg); line-height: 1.2; }
  table.ev-table td:nth-child(3) .val-bar { grid-template-columns: auto 56px; }
  table.ev-table td:nth-child(n+4) { order: 5; font-size: var(--t-xs); color: var(--dim); }
  table.ev-table td:nth-child(n+4)::before { content: attr(data-label); float: none; margin: 0 5px 0 0; max-width: none;
    font-size: var(--t-2xs); letter-spacing: .08em; text-transform: uppercase; line-height: 1; }
  table.ev-table td:nth-child(n+5) { margin-left: 10px; }
  table.ev-table tr.pooled { background: var(--panel2); border-top: 1px solid var(--line2); }
  table.ev-table tr.pooled td { background: none; border-top: 0; }
  tbody tr:hover td { background: transparent; }
  .scroll { max-height: none !important; overflow: visible; }
  .scroll th { position: static; }
  .scroll:not(:has(> table.stack)) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  td.addr, th.addr { display: none; }
  .tabs:not(.shell-tabs) { width: 100%; }
  .tabs:not(.shell-tabs) button { flex: 1 1 auto; padding: 8px 6px; }
  .nav .nav-links { display: none; }
  /* the demo record's stream on a phone: the trader column goes, in the header and in every row alike, and the time
     keeps a column wide enough never to wrap */
  .tape-cols { grid-template-columns: 62px 58px 34px minmax(0, .8fr) minmax(0, 1fr) 62px; gap: 6px; }
  .tape-cols > :nth-child(2) { display: none; }
  .hero-paper .tape-row, .hero-paper .tape-glass .labels, .hero-paper .tape-key { padding-left: 12px; padding-right: 12px; }
  .hero-paper .tape-glass .labels { letter-spacing: .02em; white-space: nowrap; }
  .pre-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pre-kpi:nth-child(4) { grid-column: 1 / -1; }
  .section-title { margin-top: var(--s-6); }
  .band { margin-top: var(--s-7); }
  main.wrap { padding-top: var(--s-5); }
}
@media (max-width: 560px) {
  .page-landing .how-list, .step-grid { grid-template-columns: 1fr; }
  .page-landing .how-list li::after { display: none; }
}
@media (max-width: 480px) {
  .wrap { padding: 16px; }                 /* the 380px gutter: 16px a side, never a sideways page */
  .panel { padding: var(--s-4); }
  .auth-card .panel { padding: 20px; }
  .hud { padding: 16px; }
  .hud .reactor { width: 40px; height: 40px; }
  .hud .reactor .dot { inset: 15px; }
  .nav { gap: 8px; padding-left: var(--gutter); padding-right: var(--gutter); }
  .nav a.btn, .nav-actions .btn { padding: 7px 11px; font-size: var(--t-sm); }
  .nav .who { display: none; }
  .theme-toggle { width: 34px; height: 34px; }
  .logo { font-size: 16px; letter-spacing: .2em; gap: 8px; }
  .logo svg { width: 22px; height: 22px; }
  .stat .value { font-size: 20px; }
  .metric .v { font-size: 21px; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .kpi .v { font-size: 20px; }
  .paper-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paper-stats .v { font-size: 16px; }
  .paper-mkt-row { padding: 7px 12px; gap: 6px; }
  .orb-stage { overflow: hidden; }
  .orb-stage::after { inset: 0; }
  .help-direct { padding: 10px 11px; }
  .help-direct .help-direct-icon { flex-basis: 28px; height: 28px; }
}
@media (max-width: 400px) {
  .tape-cols { grid-template-columns: 62px 54px 32px minmax(0, .7fr) minmax(0, 1fr) 58px; gap: 6px; padding: 0 10px; }
  .tape-glass > .head, .tape-glass .labels, .hero-paper .tape-key { padding-left: 10px; padding-right: 10px; }
  .logo { letter-spacing: .16em; }
}

/* ============================================================================================ 15. MOTION */
@media (prefers-reduced-motion: reduce) {
  .orb .core, .orb .ring, .reactor .blade, .reactor .dot, .orb-stage::after, .live-dot { animation: none; }
  body.page-dash.is-live .live-dot { animation: none; box-shadow: none; }
  .feature:hover, .ev-card:hover { transform: none; }
  .tape-slide { transition: none !important; }
  .hero-globe { display: none; }       /* the globe is decoration: a reader who asked for stillness gets none of it */
}
/* the decoration stands still while the tab is hidden (static/troid_ui.js toggles body.paused) */
body.paused .orb .core, body.paused .orb .ring, body.paused .orb-stage::after, body.paused .reactor .blade,
body.paused .reactor .dot, body.paused .live-dot { animation-play-state: paused !important; }

/* ============================================================================================ 16. PRINT */
@media print {
  body::before, .site-header, .foot, .tabs, .theme-toggle, .skip-link { display: none !important; }
  body { background: #fff; color: #111; }
  .panel, .metric, .stat, .kpi-row { box-shadow: none; }
  .tab { display: block; }
}

/* ---- LIVE AGAINST THE TEST (2026-10-08, the app-honesty work): the account's own TROID trades beside the test, three
   graded figures in one hairline row, and the warning under them; the market-selection caveat under every headline ---- */
.lvg-lede { margin: 0 0 var(--s-3); color: var(--ink2); font-size: var(--t-sm); line-height: 1.6; max-width: 100ch; }
.lvg-table td .tier-tag { margin-right: 4px; }
.lvg-graded { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin: var(--s-3) 0; }
.lvg-k { background: var(--panel2); padding: 14px 16px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lvg-k .k { color: var(--dim); font-size: var(--t-2xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.lvg-k .v { font-size: 22px; font-weight: 650; color: var(--strong); letter-spacing: -.02em; line-height: 1.15; }
.lvg-k .v small { font-size: .55em; font-weight: 500; color: var(--dim); letter-spacing: 0; }
.lvg-k .f { color: var(--dim); font-size: var(--t-xs); line-height: 1.45; }
.lvg-note { margin: 0; padding: 10px 14px; border-radius: var(--r-md); border: 1px dashed var(--amber-line);
  background: var(--amber-bg); color: var(--ink2); font-size: var(--t-xs); line-height: 1.6; }
.lvg-note b { color: var(--amber); }
.ev-selection { margin: 0 0 var(--s-4); padding: 10px 14px; border-radius: var(--r-md); border-left: 3px solid var(--amber);
  background: var(--amber-bg); color: var(--ink2); font-size: var(--t-sm); line-height: 1.6; max-width: 100ch; }
.ev-selection b { color: var(--amber); }
.pre-launch-body .ev-selection { margin: var(--s-3) 0; font-size: var(--t-xs); }
tr.amber-row td { background: var(--amber-bg); }
@media (max-width: 900px) { .lvg-graded { grid-template-columns: 1fr; } }
/* the demo record's stats are eight since 2026-10-08 (losing trades and the worst trade beside the wins): two rows of four */
@media (min-width: 901px) { .paper-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }