/* Boom Radar design system v5 — tokens and shared components for the whole site.
 *
 * The v4.1 foundations (Inter with tabular numbers, iOS patterns, an 8-point grid, semantic
 * colour only for verdicts and gains/losses) with a premium atmosphere: a deep charcoal
 * background with a faint tint and static light streaks, card art that glows in its own
 * colour, a floating tab bar with a raised Scan button, stat tiles, one vivid electric-blue
 * call to action per screen. Rules: docs/DESIGN.md. */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap;
  src: url("/static/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap;
  src: url("/static/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap;
  src: url("/static/fonts/inter-latin-700-normal.woff2") format("woff2"); }

:root {
  /* neutrals (iOS dark, grouped) */
  --bg: #0b1020;            /* page: v7 navy (Batch I; was #07080b) */
  --s1: #121a31;            /* grouped cell / card / sheet */
  --s2: #19223f;            /* secondary fill: inputs, segmented track, chips */
  --s3: #222d50;            /* tertiary fill, selected segment */
  --s4: #2d3a63;
  --line: #263156;          /* separators */
  --line-2: #2d3a63;
  --ink: #ffffff;           /* 17:1 on --s1 */
  --muted: #b3bcda;         /* secondary labels: 5.9:1 on --s1 */
  --faint: #636366;         /* non-text only: placeholders' borders, chart grid */
  /* the one accent: links, selection, primary buttons. Text in it only on --bg / --s1. */
  --accent: #66adff;        /* electric blue: links, selection, the one call to action */
  --accent-fill: #2e63ff;   /* the CTA pill (white text 5.3:1) */
  --accent-tint: #0a84ff26;
  /* semantic: verdicts and gains/losses ONLY */
  --accept: #30d158; --negotiate: #ff9f0a; --pass: #ff453a; --hold: #bf5af2;
  --accept-tint: #30d1581f; --negotiate-tint: #ff9f0a1f; --pass-tint: #ff453a1f; --hold-tint: #bf5af21f;
  --warm: var(--negotiate);
  /* aliases older markup uses */
  --accent-ink: #ffffff;
  /* type: one family, tabular numbers wherever money is shown */
  --ui: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --display: var(--ui);
  --mono: var(--ui);
  /* type scale (size / line) */
  --t-large: 700 34px/41px var(--ui);
  --t-title: 700 22px/28px var(--ui);
  --t-headline: 600 17px/23px var(--ui);
  --t-body: 400 17px/25px var(--ui);
  --t-sub: 400 15px/22px var(--ui);
  --t-foot: 400 13px/19px var(--ui);
  --t-cap: 400 12px/17px var(--ui);
  /* 8-point grid, radii, motion */
  --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 24px; --sp6: 32px;
  --r: 12px; --r-sm: 10px; --r-xs: 8px; --tap: 44px;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --t-fast: .15s; --t: .25s;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: var(--t-body); letter-spacing: .01em; -webkit-font-smoothing: antialiased; }
/* atmosphere: a faint cool tint top-left, a faint violet bottom-right, three static light
   streaks at 115deg. All under 5% contrast - felt, not seen. */
body { background:
    linear-gradient(115deg, transparent 0 22%, #ffffff05 22.2% 23.2%, transparent 23.4% 51%, #ffffff04 51.2% 51.8%, transparent 52% 78%, #ffffff03 78.2% 79%, transparent 79.2%),
    radial-gradient(900px 520px at 10% -10%, #1b3a7a33, transparent 70%),
    radial-gradient(800px 600px at 110% 110%, #3a1d6a26, transparent 70%),
    var(--bg);
  background-attachment: fixed; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
h1 { font: var(--t-large); letter-spacing: -.015em; margin: var(--sp2) 0 var(--sp4); }
h2 { font: var(--t-title); letter-spacing: 0; margin: 0; }
h3 { font: 600 var(--t-foot-size, 13px)/19px var(--ui); color: var(--muted); margin: var(--sp5) var(--sp4) var(--sp2); letter-spacing: .01em; }
.num, .money { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.muted { color: var(--muted); } .small { font: var(--t-foot); } .center { text-align: center; }
.eyebrow { font: var(--t-foot); color: var(--muted); }
.good { color: var(--accept); } .bad { color: var(--pass); } .warn { color: var(--negotiate); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------------ button */
.btn-primary, .primary { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--sp5);
  border: 0; border-radius: 999px; background: var(--accent-fill); color: #fff; font: var(--t-headline); cursor: pointer;
  box-shadow: 0 8px 24px -10px #1f6fffcc, inset 0 1px 0 #ffffff26; }
.btn-primary:active, .primary:active { opacity: .8; }
.btn-primary:disabled, .primary:disabled { background: var(--s2); color: var(--muted); }
.btn-ghost, .ghost-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); padding: 0 var(--sp4);
  border: 0; border-radius: var(--r); background: var(--s2); color: var(--ink); font: var(--t-headline); cursor: pointer; }
.btn-ghost.sm { min-height: 34px; padding: 0 var(--sp3); font: 600 15px/20px var(--ui); border-radius: 999px; }
.btn-plain, .link { background: none; border: 0; padding: 0; color: var(--accent); font: var(--t-sub); cursor: pointer;
  min-height: var(--tap); display: inline-flex; align-items: center; }

/* ------------------------------------------------------------------ grouped inset list */
.list { background: var(--s1); border-radius: var(--r); overflow: hidden; }
.list > .row { display: flex; align-items: center; gap: var(--sp3); min-height: var(--tap); padding: 11px var(--sp4); position: relative; }
.list > .row + .row::before { content: ""; position: absolute; top: 0; left: var(--sp4); right: 0; height: .5px; background: var(--line); }
.list > .row > :first-child { flex: 1; min-width: 0; }
.list > .row.head { font: var(--t-foot); color: var(--muted); min-height: 36px; }
.list > .row.note { font: var(--t-foot); color: var(--muted); }
.list > .row.actions-row { flex-wrap: wrap; gap: var(--sp4); }

/* ------------------------------------------------------------------ stat */
.stat { display: grid; gap: 2px; }
.stat > span { font: var(--t-foot); color: var(--muted); }
.stat > b { font: var(--t-title); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ------------------------------------------------------------------ chip */
.chip-s, .why { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--s2);
  color: var(--muted); font: 500 13px/1 var(--ui); white-space: nowrap; }
.why-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.why.up { color: var(--accept); } .why.down { color: var(--pass); } .why.flat { color: var(--muted); }

/* ------------------------------------------------------------------ segmented tabs (underline) */
.seg { display: flex; gap: var(--sp1); border-bottom: .5px solid var(--line); }
.seg button { flex: 1; min-height: 40px; border: 0; background: none; color: var(--muted); font: 600 15px/20px var(--ui); cursor: pointer;
  position: relative; transition: color var(--t-fast); }
.seg button.on { color: var(--ink); }
.seg button.on::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }

/* ------------------------------------------------------------------ verdict */
.v-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font: 600 13px/1 var(--ui);
  background: var(--s2); color: var(--muted); }
.v-ACCEPT, .v-green, .v-yellow { background: var(--accept-tint); color: var(--accept); }
.v-NEGOTIATE, .v-orange { background: var(--negotiate-tint); color: var(--negotiate); }
.v-PASS, .v-red { background: var(--pass-tint); color: var(--pass); }
.v-HOLD, .v-boom { background: var(--hold-tint); color: var(--hold); }
.t-ACCEPT { color: var(--accept); } .t-NEGOTIATE { color: var(--negotiate); } .t-PASS { color: var(--pass); } .t-HOLD { color: var(--hold); }
.t-none { color: var(--muted); }

/* ------------------------------------------------------------------ badges, spinner */
.badge-stamp { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 3px 8px; border-radius: 6px; font: 600 11px/1.3 var(--ui);
  background: #000c; color: var(--negotiate); }
.spinner { --sz: 18px; width: var(--sz); height: var(--sz); display: inline-block; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid var(--s3); border-top-color: var(--muted); animation: spin .8s linear infinite; }
.spinner.md { --sz: 24px; } .spinner.lg { --sz: 32px; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { border-radius: var(--r); background: var(--s1); position: relative; overflow: hidden; }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #ffffff0a, transparent);
  animation: shimmer 1.3s infinite; transform: translateX(-100%); }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ------------------------------------------------------------------ range bar (deal) */
.rb { position: relative; padding: 30px 0 4px; }
.rb-track { position: relative; height: 6px; border-radius: 3px; background: var(--s2); touch-action: none; cursor: pointer; }
.rb-z { position: absolute; top: 0; bottom: 0; opacity: .45; }
.rb-z.z-ACCEPT { background: var(--accept); border-radius: 3px 0 0 3px; }
.rb-z.z-NEGOTIATE { background: var(--negotiate); }
.rb-z.z-PASS { background: var(--pass); border-radius: 0 3px 3px 0; }
.rb-tick { position: absolute; top: -3px; width: 1px; height: 12px; background: var(--muted); transform: translateX(-.5px); }
.rb-mark { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--ink);
  border: 3px solid currentColor; box-shadow: 0 1px 4px #000a; }
.rb-ask { position: absolute; top: 2px; transform: translateX(-50%); font: 600 13px/18px var(--ui); white-space: nowrap; }
.rb-labels { display: flex; justify-content: space-between; margin-top: 10px; font: var(--t-cap); color: var(--muted); }

/* ------------------------------------------------------------------ chart */
.chart2 { width: 100%; height: 168px; display: block; touch-action: pan-y; overflow: visible; }
.chart2 .band { stroke: var(--line); stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.chart2 .zero { stroke: var(--line-2); vector-effect: non-scaling-stroke; }
.chart2 .band-l { fill: var(--muted); font: 400 10px var(--ui); font-variant-numeric: tabular-nums; }
.chart2 .basis-l { fill: var(--negotiate); }
.chart2 .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart2 .ln.sparse { stroke-dasharray: 3 4; stroke-width: 1.5; }
.chart2 .pt { stroke: var(--bg); stroke-width: 1.5; }
.chart2 .vol { fill: var(--s3); }
.chart2 .basis { stroke: var(--negotiate); stroke-dasharray: 4 4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart2 .mk-buy { fill: var(--accept); stroke: var(--bg); stroke-width: 1.5; }
.chart2 .mk-sell { fill: var(--negotiate); stroke: var(--bg); stroke-width: 1.5; }
.chart2 .join { stroke: var(--muted); stroke-dasharray: 1 3; vector-effect: non-scaling-stroke; }
.chart2 .xhair { stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart2 .xdot { stroke: var(--bg); stroke-width: 2; }
.chart-tip { position: absolute; top: -8px; transform: translate(-50%, -100%); pointer-events: none; background: var(--s3); border-radius: var(--r-xs);
  padding: 6px 10px; font: var(--t-foot); font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 4px 16px #000a; z-index: 3; }
.series-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.series-chips button { height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--s2); color: var(--muted);
  font: 500 13px/1 var(--ui); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.series-chips button i { width: 8px; height: 8px; border-radius: 50%; opacity: .5; }
.series-chips button.on { color: var(--ink); background: var(--s3); } .series-chips button.on i { opacity: 1; }
.chg-chip { font: 600 13px/1 var(--ui); font-variant-numeric: tabular-nums; }
.chg-chip.up { color: var(--accept); } .chg-chip.down { color: var(--pass); }

/* ------------------------------------------------------------------ site pages (4a/4e) */
.site-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: .5px solid var(--line);
  padding: calc(.75rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) .75rem calc(1rem + env(safe-area-inset-left));
  background: var(--bg); }
.wordmark { color: var(--ink); font: var(--t-headline); }

@media (prefers-reduced-motion: reduce) { *, *::after { animation: none !important; transition: none !important; } }

/* ------------------------------------------------------------------ v5: stat tile */
.tiles-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp2); margin-bottom: var(--sp4); }
.tiles-stats.four { grid-template-columns: 1fr 1fr; }
.stat-tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: var(--sp3); align-items: center;
  padding: var(--sp3); border-radius: 16px; background: var(--s1); box-shadow: inset 0 1px 0 #ffffff0a; animation: rise .35s var(--ease) both; }
.st-icon { grid-row: 1 / span 3; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #3d8bff1f; color: var(--accent); }
.st-icon.up { background: var(--accept-tint); color: var(--accept); } .st-icon.down { background: var(--pass-tint); color: var(--pass); }
.st-label { font: var(--t-cap); color: var(--muted); }
.st-value { font: 700 20px/26px var(--ui); letter-spacing: -.01em; }
.st-value.up { color: var(--accept); } .st-value.down { color: var(--pass); }
.st-sub { font: var(--t-cap); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ v5: Trophy badge */
.badge-trophy { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  background: linear-gradient(90deg, #f5c84a26, #f5c84a12); color: #f5d27a; font: 600 13px/1 var(--ui); box-shadow: inset 0 0 0 1px #f5c84a40; white-space: nowrap; }
.badge-trophy::before { content: "★"; font-size: 11px; }
.badge-trophy.sm { height: 20px; font-size: 11px; padding: 0 8px; justify-self: start; }

/* ------------------------------------------------------------------ v5: % change, card grid */
.chg { font: 600 13px/1 var(--ui); } .chg.up { color: var(--accept); } .chg.down { color: var(--pass); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: var(--sp3); }
@keyframes rise { from { opacity: 0; transform: translateY(6px) scale(.985); } }
.chart2 .mk-sale { fill: var(--ink); stroke: var(--bg); stroke-width: 1; opacity: .85; }
.chart2 .mk-excluded { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 2 2; }

/* Batch B 0.3 - type spacing. Body and small text never get negative tracking (Inter is set
   at +0.01em everywhere, inherited); only the large title and big display numbers tighten.
   A title and its subtitle are always two blocks with a gap, never one run of text. */
small, .small, .muted.small { letter-spacing: .015em; }
.pair, .pair-sub { display: block; }
.pair-sub { margin-top: 3px; }