/* darvas-trader — design tokens per SPEC §Web UI/Design. Dark base hsl(225 15% 10%), cards 14%, gain hsl(145 65% 55%), loss red, NEUTRAL grey third state, ONE accent. 4.5:1 contrast on every number. */ :root { color-scheme: dark; /* surfaces */ --bg: hsl(225 15% 10%); --bg-sunk: hsl(225 16% 7.5%); --card: hsl(225 15% 14%); --card-hi: hsl(225 14% 17.5%); --line: hsl(225 12% 23%); --line-soft: hsl(225 12% 19%); /* type */ --text: hsl(225 14% 94%); --text-2: hsl(225 10% 74%); --muted: hsl(225 10% 63%); /* 5.2:1 on --card */ --faint: hsl(225 10% 48%); /* non-numeric chrome only */ /* semantic — default palette */ --gain: hsl(145 65% 55%); /* 8.7:1 on --card */ --loss: hsl(0 80% 69%); /* 5.9:1 on --card — measured, not guessed */ --gain-dim: hsl(145 55% 40%); --loss-dim: hsl(0 60% 46%); --gain-wash: hsl(145 65% 55% / 0.13); --loss-wash: hsl(0 80% 69% / 0.13); --neutral: hsl(225 10% 68%); /* the honest third state */ --neutral-wash:hsl(225 10% 68% / 0.11); /* ONE accent */ --accent: hsl(258 82% 74%); --accent-dim: hsl(258 40% 30%); --accent-wash: hsl(258 82% 74% / 0.14); /* status */ --warn: hsl(38 92% 62%); --unknown: hsl(225 8% 58%); /* ONE type scale. Every size in this file comes from here. */ --fs-hero: clamp(38px, 12.5vw, 54px); /* the one number on a screen */ --fs-big: 28px; /* a second-rank number (win rate, drawdown) */ --fs-num: 17px; /* a supporting fact's number */ --fs-title: 16px; /* card heading, sentence case */ --fs-body: 15px; /* body / list rows */ --fs-sub: 13.5px; /* explanatory prose */ --fs-small: 12px; /* meta under a number */ --fs-micro: 11px; /* legal, chrome, chart legends */ --radius: 14px; --radius-s: 9px; --tap: 44px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); --nav-h: 58px; --ease: cubic-bezier(.32, .72, 0, 1); } /* Blue / orange palette for colour-vision deficiency. Set on . */ :root[data-palette="cvd"] { --gain: hsl(215 88% 66%); --loss: hsl(30 95% 62%); --gain-dim: hsl(215 60% 44%); --loss-dim: hsl(30 70% 46%); --gain-wash: hsl(215 88% 66% / 0.15); --loss-wash: hsl(30 95% 62% / 0.15); --accent: hsl(0 0% 88%); --accent-dim: hsl(225 8% 34%); --accent-wash: hsl(0 0% 88% / 0.14); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Must outrank the display values set on .banner/.chip/etc, or `hidden` lies. */ [hidden] { display: none !important; } html { background: var(--bg); -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font: 15px/1.5 ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; min-height: 100vh; } /* Every numeral, everywhere. */ .num, .hero-num, td, th, .stat-v, .chip, .pill, input, button, time { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; } h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; } a { color: var(--accent); text-decoration: none; } a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } button { font: inherit; font-variant-numeric: tabular-nums; color: inherit; background: none; border: 0; cursor: pointer; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ───────────────────────── shell ───────────────────────── */ #app { min-height: 100vh; padding-bottom: calc(var(--nav-h) + var(--safe-b)); } .screen { display: none; } .screen.is-active { display: block; } .scroll { padding: 0 16px 28px; max-width: 640px; margin: 0 auto; } /* ── the book picker ────────────────────────────────────────────────────── A horizontal rail of every book, pinned under the top bar so the selector that drives the whole screen is always one thumb away. It scrolls sideways INSIDE itself; the page never does. */ /* The sticky element is the SCREEN-LEVEL block, not the inner rail: a sticky box can only travel inside its own parent, and an inner wrapper's parent is 74px tall — it would unstick immediately. Sits exactly under the top bar (safe area + 12 padding + 30 line + 10 padding). */ #book-picker { position: sticky; top: calc(var(--safe-t) + 52px); z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line-soft); } /* No books readable = no rail, and no orphan hairline where one would have been. */ #book-picker:empty { border-bottom: 0; } .picker { padding: 8px 0 9px; } .picker-rail { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding: 0 16px; max-width: 640px; margin: 0 auto; scrollbar-width: none; } .picker-rail::-webkit-scrollbar { display: none; } .bkchip { flex: none; scroll-snap-align: start; display: flex; flex-direction: column; gap: 3px; min-height: 48px; padding: 7px 11px; max-width: 210px; text-align: left; background: var(--card); color: var(--text-2); border: 1px solid var(--line); border-radius: var(--radius-s); } .bkchip:active { background: var(--card-hi); } .bkchip[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent); color: var(--text); } .bkchip[aria-busy="true"] { opacity: .55; } .bkchip-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 640; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bkchip-x { font-size: 12px; font-weight: 620; white-space: nowrap; } .bkchip-x .arrow, .bkchip-x span[aria-hidden] { font-size: .84em; } /* The health dot, standalone (the .chip version has its own colour rules). */ .dot--ok { background: var(--gain); } .dot--warn { background: var(--warn); } .dot--bad { background: var(--loss); } .dot--unknown { background: var(--unknown); } .bkchip-name .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; } .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px; padding: calc(var(--safe-t) + 12px) 16px 10px; background: linear-gradient(var(--bg) 72%, transparent); backdrop-filter: blur(8px); } .topbar h1 { font-size: 20px; } .topbar .spacer { flex: 1; } /* ───────────────────────── chips & pills ───────────────────────── */ .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.035em; border: 1px solid var(--line); color: var(--text-2); background: var(--card); white-space: nowrap; } .chip--sim { color: var(--warn); border-color: hsl(38 92% 62% / 0.42); background: hsl(38 92% 62% / 0.11); text-transform: uppercase; } .chip--mock { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-wash); text-transform: uppercase; } .chip--ok { color: var(--gain); border-color: var(--gain-dim); background: var(--gain-wash); } .chip--bad { color: var(--loss); border-color: var(--loss-dim); background: var(--loss-wash); } .chip--warn { color: var(--warn); border-color: hsl(38 92% 62% / .4); background: hsl(38 92% 62% / .12); } .chip--unknown { color: var(--unknown); border-color: var(--line); background: var(--neutral-wash); } .tag { display: inline-block; padding: 1px 6px; border-radius: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line); color: var(--muted); } .tag--backtest { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-wash); } .tag--live { color: var(--gain); border-color: var(--gain-dim); background: var(--gain-wash); } /* ───────────────────────── cards ───────────────────────── */ .card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; } .card--flush { padding: 0; overflow: hidden; } /* Card headings are sentence-case sentences, not shouted labels. A reader with no trading background is reading this top to bottom like a page of writing. */ .card h2 { font-size: var(--fs-title); font-weight: 620; letter-spacing: -.01em; color: var(--text); text-transform: none; text-wrap: balance; } .card > h2 { margin-bottom: 8px; } .section-title { font-size: var(--fs-title); font-weight: 620; letter-spacing: -.01em; text-transform: none; color: var(--text); margin: 22px 2px 9px; text-wrap: balance; } /* ── the ONE supporting-fact pattern ────────────────────────────────────── A number is never shown without the words that say what it means, so the label, the number and the meaning are one component used on every screen. */ .card--facts { padding: 2px 14px; } .fact { padding: 11px 0; border-bottom: 1px solid var(--line-soft); } .fact:last-child { border-bottom: 0; } .fact-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .fact-k { font-size: var(--fs-body); color: var(--text); font-weight: 500; min-width: 0; } .fact-v { font-size: var(--fs-num); font-weight: 640; white-space: nowrap; letter-spacing: -.01em; } .fact-n { font-size: var(--fs-small); color: var(--muted); margin-top: 4px; line-height: 1.5; max-width: 46em; } .fact-n strong { color: var(--text-2); font-weight: 600; } /* The quiet "what this means for you" line. */ .explain { font-size: var(--fs-sub); line-height: 1.6; color: var(--text-2); margin: 0 0 12px; text-wrap: pretty; } .explain strong { color: var(--text); font-weight: 620; } .explain + .explain { margin-top: -4px; } /* ── "More detail" — true, but not the point ─────────────────────────────── */ .more { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--card); margin-bottom: 12px; overflow: hidden; } .more > summary { display: flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 14px; font-size: var(--fs-body); font-weight: 560; color: var(--accent); cursor: pointer; list-style: none; } .more > summary::-webkit-details-marker { display: none; } .more > summary::after { content: "▸"; margin-left: auto; color: var(--muted); font-size: 13px; transition: transform 180ms var(--ease); } .more[open] > summary::after { transform: rotate(90deg); } .more[open] > summary { border-bottom: 1px solid var(--line-soft); } .more-body { padding: 12px 14px 14px; } .more-body > .card { background: var(--bg-sunk); } .more-body > :last-child { margin-bottom: 0; } /* A whole screen's worth of long-form reading, nested one level down. */ .more-body .section-title:first-child { margin-top: 4px; } /* ───────────────────────── hero ───────────────────────── */ /* The question this screen answers, in the reader's words. Sits above the one number so the number arrives as an answer rather than as a statistic. */ .q { font-size: var(--fs-sub); line-height: 1.5; color: var(--text-2); margin: 4px 2px 14px; text-wrap: pretty; } .q strong { color: var(--text); font-weight: 620; } .hero { padding: 2px 2px 16px; } .hero-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-body); font-weight: 500; color: var(--text-2); margin-bottom: 6px; } .hero-num { font-size: var(--fs-hero); font-weight: 680; line-height: 1.04; letter-spacing: -0.028em; color: var(--text); display: block; } .hero-num .cents { font-size: .56em; color: var(--text-2); font-weight: 600; } .hero-sub { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 7px; font-size: var(--fs-body); } .hero-sub .muted { color: var(--muted); font-size: var(--fs-sub); } .hero-scrub { font-size: var(--fs-small); color: var(--muted); margin-top: 6px; min-height: 17px; line-height: 1.45; } .hero.is-scrubbing .hero-num { color: var(--accent); } .delta { font-weight: 620; white-space: nowrap; } .delta--up { color: var(--gain); } .delta--down { color: var(--loss); } .delta--flat { color: var(--neutral); } .delta .arrow { font-size: .84em; } /* ───────────────────────── segmented control ───────────────────────── */ .seg { display: inline-flex; background: var(--bg-sunk); border: 1px solid var(--line-soft); border-radius: 10px; padding: 3px; gap: 2px; } .seg button { min-width: 46px; min-height: 30px; padding: 0 11px; border-radius: 7px; font-size: 12.5px; font-weight: 620; color: var(--muted); } .seg button[aria-pressed="true"] { background: var(--card-hi); color: var(--text); box-shadow: 0 1px 2px hsl(0 0% 0% / .3); } /* ───────────────────────── charts ───────────────────────── */ .chart-wrap { position: relative; } .chart { width: 100%; touch-action: pan-y; } .chart--equity { height: 208px; } .chart--price { height: 55vh; min-height: 290px; max-height: 460px; } .stale-band { position: absolute; top: 0; bottom: 0; right: 0; pointer-events: none; background: repeating-linear-gradient( -45deg, hsl(225 10% 55% / .16) 0 5px, hsl(225 10% 55% / .05) 5px 10px); border-left: 1px dashed hsl(225 10% 62% / .5); display: none; } .is-stale .stale-band { display: block; } .stale-note { /* Top-LEFT: the band it describes hugs the right edge, where the price axis labels already live. Putting the note there buries both. */ position: absolute; top: 8px; left: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--unknown); background: hsl(225 16% 7.5% / .88); border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; display: none; } .is-stale .stale-note { display: block; } .chart-legend { display: flex; gap: 8px 14px; flex-wrap: wrap; font-size: var(--fs-micro); color: var(--muted); margin-top: 8px; } .chart-legend span { display: inline-flex; align-items: center; gap: 5px; } .swatch { width: 13px; height: 3px; border-radius: 2px; background: var(--accent); display: inline-block; } .swatch--spy { background: var(--neutral); } .swatch--break { background: var(--faint); height: 0; border-top: 2px dashed var(--faint); } .swatch--box { background: var(--accent-wash); border: 1px solid var(--accent); height: 10px; border-radius: 3px; } /* ───────────────────────── stat rows ───────────────────────── */ .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; } .stat-row > div { background: var(--card); padding: 11px 12px; } .stat-k { font-size: var(--fs-micro); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .stat-v { font-size: var(--fs-num); font-weight: 620; margin-top: 3px; letter-spacing: -.01em; } .stat-n { font-size: var(--fs-micro); color: var(--muted); margin-top: 2px; } .kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); } .kv:last-child { border-bottom: 0; } .kv dt { color: var(--muted); font-size: var(--fs-sub); } .kv dd { margin: 0; font-weight: 600; text-align: right; } .kv dd small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; } /* The glossary. A term and its one line stack, so neither is squeezed into a column at 390px. Terms are the loud half; the definition is the quiet half. */ .gloss { margin: 0; } .gloss .kv { display: block; padding: 9px 0; } .gloss dt { color: var(--text); font-size: var(--fs-body); font-weight: 620; letter-spacing: -.01em; } .gloss dd { margin: 2px 0 0; text-align: left; font-weight: 400; font-size: var(--fs-sub); line-height: 1.5; color: var(--text-2); text-wrap: pretty; } /* ───────────────────────── ▤ books (the home) ───────────────────────── One book = a ranked row. Excess against SPY leads because it is the only number that survives a bull market; the equity is the supporting fact. Two columns at 390px, and the whole row is one tap target. */ /* Under the hero number: when the book started, and whether its engine is alive. */ .hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 7px; font-size: var(--fs-small); } .hero-meta .chip { font-size: var(--fs-micro); } /* ── the strategy breakdown ─────────────────────────────────────────────── A key→value grid, technical terms straight. The key column is fixed so the values line up into a column you can run an eye down. */ .card--strategy { padding: 12px 14px 4px; } .card--strategy .section-title { margin: 0 0 4px; } .kvg { margin: 0; } .kvr { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); } .kvr:last-child { border-bottom: 0; } .kvr dt { font-size: var(--fs-small); color: var(--muted); letter-spacing: .02em; padding-top: 1px; } .kvr dd { margin: 0; font-size: var(--fs-sub); font-weight: 580; color: var(--text); line-height: 1.4; overflow-wrap: anywhere; } .kvr dd small { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-micro); margin-top: 2px; line-height: 1.45; } .chart-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; } .btn--sm { min-height: 34px; padding: 0 12px; font-size: 13px; font-weight: 600; flex: none; } /* the small status dot inside a chip */ .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 5px; flex: none; } /* ───────────────────────── positions ───────────────────────── */ /* One holding = a two-line sentence about one company, not a spreadsheet row. Line 1 says what it is worth; line 2 says when the AI will sell it. */ /* Seven facts, two lines, three columns — symbol/qty, entry→last/stop, P&L%. All of it fits at 390px, so the table never needs a sideways scroller. */ .pos { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; padding: 11px 14px; text-align: left; width: 100%; border-bottom: 1px solid var(--line-soft); transition: background-color 900ms var(--ease); } .pos:last-child { border-bottom: 0; } .pos:active { background: var(--card-hi); } .pos.flash-up { background: var(--gain-wash); transition: none; } .pos.flash-down { background: var(--loss-wash); transition: none; } .pos-sym { font-weight: 680; font-size: var(--fs-body); letter-spacing: -.01em; } .pos-px { font-size: var(--fs-small); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pos-pl { grid-row: 1; grid-column: 3; text-align: right; white-space: nowrap; font-size: var(--fs-num); font-weight: 640; } .pos-qty { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; } .pos-stop { grid-column: 2 / -1; text-align: right; white-space: nowrap; font-size: var(--fs-small); color: var(--muted); overflow: hidden; text-overflow: ellipsis; } .pos-empty { padding: 16px 14px; color: var(--muted); font-size: var(--fs-sub); } .stop-bar { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden; margin-top: 7px; } .stop-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--loss), var(--warn) 55%, var(--gain-dim)); border-radius: 2px; } /* ── the verdict line on a test card ─────────────────────────────────────── */ .verdict { display: block; font-size: var(--fs-title); font-weight: 640; letter-spacing: -.01em; margin-bottom: 3px; } .verdict--up { color: var(--gain); } .verdict--down { color: var(--loss); } .verdict--flat { color: var(--neutral); } .verdict-n { display: block; font-size: var(--fs-small); color: var(--muted); margin-bottom: 10px; line-height: 1.45; } /* ───────────────────────── activity ───────────────────────── */ .day-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 20px 2px 8px; } .day-head h3 { font-size: var(--fs-body); font-weight: 620; } .day-head .day-sum { font-size: var(--fs-small); color: var(--muted); } .event { width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line-soft); border-left: 3px solid var(--neutral); border-radius: var(--radius-s); padding: 12px 13px; margin-bottom: 8px; display: block; } .event:active { background: var(--card-hi); } .event--buy { border-left-color: var(--gain); } .event--sell { border-left-color: var(--loss); } .event--skip { border-left-color: var(--faint); } .event--scan { border-left-color: var(--neutral); } .event--stop_raised { border-left-color: var(--warn); } .event-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; } .event-sym { font-weight: 700; font-size: 14.5px; } .event-act { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .event-head { font-size: var(--fs-body); font-weight: 560; line-height: 1.38; } .rule-chip { display: block; margin-top: 8px; font-size: var(--fs-small); line-height: 1.45; color: var(--text-2); background: var(--bg-sunk); border: 1px solid var(--line-soft); border-radius: 8px; padding: 7px 9px; } .event-more { font-size: var(--fs-small); color: var(--accent); margin-top: 8px; display: block; } .nonevent { background: transparent; border: 1px dashed var(--line); border-radius: var(--radius-s); padding: 11px 13px; color: var(--muted); font-size: var(--fs-sub); margin-bottom: 8px; line-height: 1.45; } /* checks table (tier 2) */ .checks { display: grid; gap: 1px; background: var(--line-soft); border-radius: var(--radius-s); overflow: hidden; border: 1px solid var(--line-soft); } .check { background: var(--card); padding: 9px 11px; display: grid; grid-template-columns: 18px 1fr auto; gap: 9px; align-items: baseline; } .check-mark { font-weight: 700; } .check.pass .check-mark { color: var(--gain); } .check.fail .check-mark { color: var(--loss); } .check.unknown .check-mark { color: var(--muted); } .check.unknown .check-n b { color: var(--text-2); } .check-t { font-size: var(--fs-sub); } .check-n { font-size: 12.5px; text-align: right; white-space: nowrap; } .check-n b { font-weight: 660; } .check.fail .check-n b { color: var(--loss); } .check.pass .check-n b { color: var(--gain); } .check-n span { color: var(--muted); } /* ───────────────────────── bottom sheet ───────────────────────── */ .sheet-scrim { position: fixed; inset: 0; z-index: 90; background: hsl(225 20% 4% / .66); opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease); } .sheet-scrim.is-open { opacity: 1; pointer-events: auto; } .sheet { position: fixed; z-index: 91; left: 0; right: 0; bottom: 0; max-height: 86vh; background: var(--bg); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; transform: translateY(100%); transition: transform 280ms var(--ease); display: flex; flex-direction: column; max-width: 640px; margin: 0 auto; } .sheet.is-open { transform: translateY(0); } .sheet-grab { width: 38px; height: 4px; border-radius: 3px; background: var(--line); margin: 9px auto 4px; flex: none; } .sheet-head { display: flex; align-items: center; gap: 10px; padding: 6px 16px 10px; border-bottom: 1px solid var(--line-soft); flex: none; } .sheet-head h2 { font-size: 16px; text-transform: none; letter-spacing: -.01em; color: var(--text); } .sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px calc(24px + var(--safe-b)); } /* ───────────────────────── pushed view ───────────────────────── */ .push { position: fixed; inset: 0; z-index: 60; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(100%); transition: transform 300ms var(--ease); padding-bottom: calc(var(--nav-h) + var(--safe-b) + 20px); } .push.is-open { transform: translateX(0); } .back { display: inline-flex; align-items: center; gap: 5px; min-height: var(--tap); padding-right: 10px; font-size: 15px; color: var(--accent); font-weight: 560; margin-left: -4px; } /* ───────────────────────── bottom nav ───────────────────────── */ .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: grid; grid-template-columns: repeat(4, 1fr); height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: hsl(225 16% 8% / .93); backdrop-filter: blur(14px); border-top: 1px solid var(--line-soft); } /* Four slots. At 390px that is 97px each — every label fits without tightening. */ .nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: 10.5px; font-weight: 620; letter-spacing: .03em; min-height: var(--tap); padding: 0 2px; min-width: 0; white-space: nowrap; } .nav button .glyph { font-size: 17px; line-height: 1; } .nav button[aria-selected="true"] { color: var(--accent); } .nav button[aria-selected="true"] .glyph { transform: translateY(-1px); } /* ───────────────────────── buttons ───────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--tap); padding: 0 16px; border-radius: 11px; border: 1px solid var(--line); background: var(--card-hi); font-weight: 620; font-size: 14.5px; color: var(--text); } .btn:active { background: var(--card); } .btn--wide { width: 100%; } /* "Go and read the rest" — the one way out of a reduced screen. */ .btn--next { width: 100%; justify-content: space-between; color: var(--accent); font-weight: 600; background: var(--card); border-color: var(--line-soft); margin-bottom: 12px; } .btn--next .btn-sub { display: block; font-size: var(--fs-small); color: var(--muted); font-weight: 400; margin-top: 2px; text-align: left; } .btn--next .btn-lab { text-align: left; } .btn--danger { color: var(--warn); border-color: hsl(38 92% 62% / .45); background: hsl(38 92% 62% / .1); } .btn[disabled] { opacity: .48; cursor: not-allowed; } .btn-note { font-size: var(--fs-small); color: var(--muted); margin-top: 8px; line-height: 1.5; } .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; min-height: var(--tap); } .toggle-row .lab { font-size: var(--fs-body); } .toggle-row .lab small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; } /* ───────────────────────── health ───────────────────────── */ .health-hero { display: flex; align-items: center; gap: 12px; } .health-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--unknown); box-shadow: 0 0 0 4px hsl(225 8% 58% / .16); } .health-dot[data-s="OK"] { background: var(--gain); box-shadow: 0 0 0 4px var(--gain-wash); } .health-dot[data-s="DEGRADED"] { background: var(--warn); box-shadow: 0 0 0 4px hsl(38 92% 62% / .18); } .health-dot[data-s="STALLED"], .health-dot[data-s="HALTED"] { background: var(--loss); box-shadow: 0 0 0 4px var(--loss-wash); } .health-dot[data-s="UNKNOWN"] { background: var(--unknown); box-shadow: 0 0 0 4px var(--neutral-wash); } .health-status { font-size: 19px; font-weight: 660; letter-spacing: -.01em; line-height: 1.28; text-wrap: balance; } .health-status[data-s="UNKNOWN"] { color: var(--unknown); } .health-status[data-s="OK"] { color: var(--gain); } .health-status[data-s="DEGRADED"] { color: var(--warn); } .health-status[data-s="STALLED"], .health-status[data-s="HALTED"] { color: var(--loss); } .comp { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line-soft); } .comp:last-child { border-bottom: 0; } .comp .d { width: 8px; height: 8px; border-radius: 50%; background: var(--unknown); transform: translateY(-1px); } .comp[data-s="OK"] .d { background: var(--gain); } .comp[data-s="DEGRADED"] .d { background: var(--warn); } .comp[data-s="STALLED"] .d, .comp[data-s="HALTED"] .d { background: var(--loss); } .comp-n { font-size: var(--fs-body); font-weight: 560; } .comp-d { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; } .comp-a { font-size: 12px; color: var(--muted); white-space: nowrap; } /* ───────────────────────── prose / disclosure ───────────────────────── */ .prose { font-size: var(--fs-sub); line-height: 1.6; color: var(--text-2); } .prose p { margin: 0 0 10px; } .prose p:last-child { margin-bottom: 0; } .prose ul { margin: 0 0 10px; padding-left: 19px; } .prose li { margin-bottom: 7px; } .prose strong { color: var(--text); font-weight: 620; } .rule-item { padding: 11px 0; border-bottom: 1px solid var(--line-soft); } .rule-item:last-child { border-bottom: 0; } .rule-item h4 { font-size: var(--fs-body); margin-bottom: 4px; } .rule-item p { margin: 0; font-size: var(--fs-sub); line-height: 1.55; color: var(--text-2); } .cftc { font-size: var(--fs-micro); line-height: 1.55; color: var(--muted); border-left: 2px solid var(--line); padding: 2px 0 2px 10px; margin: 10px 0 0; } .cftc a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; } /* ops/DISCLAIMER.md id:banner, long form. Static, never dismissible. */ .sim-strip { margin: 0 0 10px; padding: 7px 11px; border-radius: var(--radius-s); border: 1px solid hsl(38 92% 62% / 0.4); background: hsl(38 92% 62% / 0.1); color: var(--warn); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-align: center; } /* ops/DISCLAIMER.md id:cftc-441b — full text, always in the DOM. */ .cftc-full { border: 1px solid var(--line-soft); border-radius: var(--radius-s); background: var(--bg-sunk); padding: 10px 12px; margin-top: 18px; } .cftc-full > summary { font-size: 11px; line-height: 1.55; color: var(--muted); cursor: pointer; min-height: 32px; } .cftc-full > summary::marker { color: var(--faint); } .cftc-full p { font-size: 10.5px; line-height: 1.6; color: var(--text-2); margin: 10px 0 0; word-spacing: .02em; } .cftc-full .cftc-note { color: var(--muted); font-size: 10.5px; } /* ops/DISCLAIMER.md id:inline-signal */ .inline-signal { display: block; margin-top: 7px; font-size: 11px; line-height: 1.45; color: var(--muted); font-style: italic; } .raw { font: 11.5px/1.55 ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; background: var(--bg-sunk); border: 1px solid var(--line-soft); border-radius: 8px; padding: 11px; overflow-x: auto; color: var(--text-2); white-space: pre; margin: 0; } .footer { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: var(--fs-micro); line-height: 1.6; color: var(--muted); } .footer p { margin: 0 0 6px; } .footer .never { color: var(--text-2); font-weight: 560; } /* ───────────────────────── skeletons (content-shaped, zero shift) ───────────────────────── */ .sk { background: var(--card-hi); border-radius: 6px; color: transparent !important; position: relative; overflow: hidden; } .sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, hsl(225 12% 30% / .55), transparent); animation: shimmer 1.35s infinite; } @keyframes shimmer { 100% { transform: translateX(200%); } } .sk-hero { height: 54px; width: 68%; } .sk-line { height: 13px; margin: 8px 0; } .sk-chart { height: 208px; border-radius: var(--radius); } .banner { display: flex; align-items: flex-start; gap: 9px; border-radius: var(--radius-s); padding: 9px 11px; font-size: 12.5px; line-height: 1.45; margin-bottom: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text-2); } .banner--warn { border-color: hsl(38 92% 62% / .4); background: hsl(38 92% 62% / .1); color: var(--warn); } .banner--unknown { border-color: var(--line); background: var(--neutral-wash); color: var(--unknown); } .conn { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); } .conn i { width: 7px; height: 7px; border-radius: 50%; background: var(--unknown); display: inline-block; } .conn[data-c="live"] i { background: var(--gain); } .conn[data-c="polling"] i { background: var(--warn); } .conn[data-c="offline"] i { background: var(--loss); } /* ───────────────────────── ⊞ tests ───────────────────────── */ /* Permanent, never dismissible. Same visual weight as the SIMULATED strip: a result you cannot un-see needs the caveat next to it, not below the fold. */ .honesty { margin: 0 0 12px; padding: 9px 12px; border-radius: var(--radius-s); border: 1px solid var(--accent-dim); background: var(--accent-wash); color: var(--text-2); font-size: 11.5px; line-height: 1.5; } .honesty strong { color: var(--accent); font-weight: 700; } .test-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } /* The card is a real