:root{
  /* RAD LIGHT theme — warm off-white paper, white panels, gold + red accents (Work Sans) */
  --bg:#f2efe9; --panel:#ffffff; --panel-2:#ece7dc; --line:#e3ddd1;
  --ink:#2a2a2a; --ink-dim:#5a5a5a; --ink-faint:#8f897d;
  --red:#ed1c24; --green:#22dd6a; --green-ink:#1a9e54; --blue:#2b7fd4;
  --accent:#fbc228;        /* gold — fills/marks/active states (unreadable as text on white) */
  --gold-ink:#8a6a00;      /* darkened gold for text/labels that need contrast */
  --link:#c1272d;          /* RAD red — links + accent text */
  --radius:14px;
  --hi:#fbc22833;          /* selected-row tint (gold) */
  /* surface tints (themeable) */
  --topbar-a:#ffffff; --topbar-b:#f6f3ec; --bg-glow:#faf8f3; --logo-card-bg:#ffffff;
  --hover-border:#cfc8ba; --sel-border:#e6b020; --circ-active-bg:#e6f6ec;
  --pill-blue-bg:#e4eefb;  --pill-blue-fg:#1f5fa8;
  --pill-green-bg:#e3f5ea; --pill-green-fg:#157a42;
  --tag-high-bg:#e2f5ea; --tag-high-fg:#157a42;
  --tag-med-bg:#fbeecb;  --tag-med-fg:#9a6b00;
  --tag-low-bg:#fbe2ec;  --tag-low-fg:#b03060;
  /* reticle "scope" chrome (recolors via CSS vars — see makeReticle in app.js) */
  --rtc-bg:#fbfcfd; --rtc-grid:#dde3ea; --rtc-axis:#cdd5df;
  --rtc-tick:#c2ccd8; --rtc-label:#aab4c2; --rtc-updown:#c7ced8;
}
:root[data-theme="dark"]{
  /* RAD DARK theme — warm charcoal counterpart; functional red/green dots unchanged.
     Gold becomes readable as text here, so --gold-ink IS the gold. White RAD card kept. */
  --bg:#17140f; --panel:#211d17; --panel-2:#2c271f; --line:#3a342b;
  --ink:#f0ece4; --ink-dim:#b3aa9b; --ink-faint:#8a8275;
  --red:#ed1c24; --green:#22dd6a; --green-ink:#3fe07f; --blue:#5aa9e6;
  --accent:#fbc228; --gold-ink:#fbc228; --link:#ff5247;
  --hi:#fbc2282e;
  --topbar-a:#211d17; --topbar-b:#17140f; --bg-glow:#221d16; --logo-card-bg:#ffffff;
  --hover-border:#4a4338; --sel-border:#fbc228; --circ-active-bg:#163020;
  --pill-blue-bg:#15293f;  --pill-blue-fg:#8fc4ff;
  --pill-green-bg:#143524; --pill-green-fg:#5fe39a;
  --tag-high-bg:#14331f; --tag-high-fg:#5fe39a;
  --tag-med-bg:#3a2f12;  --tag-med-fg:#ffce6b;
  --tag-low-bg:#3a1c2a;  --tag-low-fg:#ff9bc0;
  --rtc-bg:#1c1813; --rtc-grid:#38322a; --rtc-axis:#4a4338;
  --rtc-tick:#423b31; --rtc-label:#8a8170; --rtc-updown:#6f6757;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(1200px 700px at 80% -10%, var(--bg-glow) 0%, var(--bg) 55%);
  color:var(--ink); font-family:'Work Sans',system-ui,sans-serif;
  display:flex; flex-direction:column; min-height:100vh;
}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}

/* ---------- top bar ---------- */
.topbar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  padding:14px 24px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--topbar-a),var(--topbar-b));position:sticky;top:0;z-index:20;
}
.topbar-right{justify-self:end;display:flex;align-items:center;gap:20px}
/* center title block (truly page-centered between the two 1fr side columns) */
.brand-center{justify-self:center;text-align:center}
.brand-center .sub{margin-left:auto;margin-right:auto}
/* combined RAD + wordmark card on the left */
.brand-card{gap:16px;padding:8px 18px}
.brand-card .title-logo{height:46px}
.brand-divider{width:1px;align-self:stretch;background:var(--line);margin:2px 0}
.powered-by-link{display:inline-flex;align-items:center;line-height:0}
.powered-by{height:48px;width:auto;display:block;opacity:.92}
.logo-credit{justify-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-decoration:none}
.logo-credit:hover{text-decoration:none}
.logo-cap{font:600 9px 'Work Sans';letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.logo-card{
  background:var(--logo-card-bg);border-radius:11px;padding:8px 14px;display:flex;align-items:center;
  box-shadow:0 6px 16px -10px #00000045, 0 0 0 1px var(--line);transition:.15s;
}
.logo-credit:hover .logo-card{box-shadow:0 10px 24px -8px #00000055, 0 0 0 2px var(--accent)}
.logo-img{height:46px;width:auto;display:block}
.brand{display:flex;align-items:center;gap:14px}
.brand-mark{
  width:34px;height:34px;border-radius:8px;flex:0 0 auto;
  background:
    radial-gradient(circle at 50% 50%, var(--green) 0 14%, transparent 16%),
    radial-gradient(circle at 50% 50%, transparent 0 30%, var(--red) 31% 38%, transparent 40%);
  box-shadow:0 0 0 1px var(--line), inset 0 0 14px #000;
  background-color:#0b0e13;
}
.topbar h1{font-size:18px}
.title{margin:0;line-height:0;flex:0 0 auto}
.title-logo{height:56px;width:auto;display:block;filter:invert(1) drop-shadow(0 1px 3px #00000035)}
.sub-eyebrow{margin:0 0 2px;font:700 11px 'Work Sans';letter-spacing:.08em;text-transform:uppercase;color:var(--link)}
.sub{margin:2px 0 0;font-size:12.5px;color:var(--ink-dim);max-width:60ch}
.modes{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:3px}
.mode-btn{
  border:0;background:transparent;color:var(--ink-dim);font:600 13px 'Work Sans';
  padding:8px 16px;border-radius:7px;cursor:pointer;transition:.15s;
}
.mode-btn.is-active{background:var(--panel-2);color:var(--ink);box-shadow:0 1px 2px #00000018}
/* light/dark toggle */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  padding:0;border:1px solid var(--line);background:var(--panel);color:var(--ink-dim);
  border-radius:10px;cursor:pointer;transition:.15s;flex:0 0 auto}
.theme-toggle:hover{color:var(--accent);border-color:var(--accent)}
.theme-toggle svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .ic-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:block}

/* ---------- layout ---------- */
main{flex:1;padding:14px 24px 18px}
.toolbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.source-filter{display:flex;align-items:center;gap:10px}
.sf-label{font:700 11px 'Work Sans';text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint)}
.sf-chip{display:inline-flex;align-items:center;gap:7px;font:600 12.5px 'Work Sans';cursor:pointer;
  padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel);user-select:none;transition:.12s}
.sf-chip input{accent-color:currentColor;cursor:pointer}
.sf-chip.src-video{color:var(--blue)}
.sf-chip.src-rad{color:var(--green-ink)}
.sf-chip:has(input:not(:checked)){opacity:.45;color:var(--ink-faint)}
.toolbar-note{font-size:12px;color:var(--ink-faint)}
.view{display:none}
.view.is-active{display:grid}
#explore{grid-template-columns:300px minmax(0,1fr) 320px;gap:18px;align-items:start}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 12px 30px -22px #000}

/* ---------- platform list ---------- */
.list-panel{display:flex;flex-direction:column;max-height:calc(100vh - 150px)}
.list-head{padding:14px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
#search{
  width:100%;padding:9px 12px;border-radius:9px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font:500 13px 'Work Sans';
}
#search:focus{outline:2px solid var(--accent);outline-offset:0}
.sort{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink-dim)}
.sort select,.cmp-controls select{
  background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;
  padding:7px 9px;font:500 12.5px 'Work Sans';cursor:pointer;flex:1
}
.platform-list{list-style:none;margin:0;padding:8px;overflow-y:auto}
.platform-list li{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;cursor:pointer;
  transition:.12s;border:1px solid transparent;
}
.platform-list li:hover{background:var(--panel-2)}
.platform-list li.is-active{background:var(--hi);border-color:var(--sel-border)}
.pl-rank{font:700 11px JetBrains Mono;color:var(--ink-faint);width:20px;text-align:right}
.pl-main{flex:1;min-width:0}
.pl-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-srcs{display:inline-flex;gap:3px;vertical-align:1px}
.pl-srcs .ts{width:6px;height:6px;border-radius:50%;display:inline-block}
.pl-srcs .ts.video{background:var(--blue)}
.pl-srcs .ts.rad_table{background:var(--green)}
.pl-brand{font-size:11px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-bar{height:6px;border-radius:4px;background:var(--panel-2);overflow:hidden;width:64px;flex:0 0 auto}
.pl-bar i{display:block;height:100%;background:linear-gradient(90deg,#2bd36a,#fbc228,#ed1c24)}
.pl-mag{font:700 11px JetBrains Mono;color:var(--ink-dim);width:34px;text-align:right}

/* ---------- stage ---------- */
.stage{padding:16px 18px}
.stage-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;gap:12px;flex-wrap:wrap}
.stage-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.stage-head h2{font-size:19px}
.test-toggle{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:2px}
.test-toggle button{border:0;background:transparent;color:var(--ink-dim);font:600 11.5px 'Work Sans';
  padding:5px 11px;border-radius:6px;cursor:pointer;transition:.12s;white-space:nowrap}
.test-toggle button.is-active[data-src="video"]{background:var(--pill-blue-bg);color:var(--pill-blue-fg)}
.test-toggle button.is-active[data-src="rad_table"]{background:var(--pill-green-bg);color:var(--pill-green-fg)}
/* source badge */
.src-badge{display:inline-block;padding:2px 8px;border-radius:999px;font:700 10px 'Work Sans';letter-spacing:.03em;vertical-align:1px}
.src-badge.t1{background:var(--pill-blue-bg);color:var(--pill-blue-fg)}
.src-badge.t2{background:var(--pill-green-bg);color:var(--pill-green-fg)}
.stage-actions{display:flex;align-items:center;gap:14px}
.ghost-toggle{font-size:12px;color:var(--ink-dim);display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.play{
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink);
  padding:7px 14px;border-radius:9px;font:600 12.5px 'Work Sans';cursor:pointer;transition:.12s
}
.play:hover{border-color:var(--link);color:var(--link)}
.play.is-playing{color:var(--link);border-color:var(--link)}
.reticle-host{display:flex;justify-content:center;padding:6px 0 2px}
.reticle-host svg{width:min(100%,520px);height:auto;display:block}
.reticle-host.small svg{width:min(100%,320px)}

/* ---------- readout ---------- */
.readout{
  margin-top:8px;border-top:1px solid var(--line);padding-top:12px;
  display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13px;
}
.readout.compact{font-size:12px;gap:4px 10px}
.ro-row{display:contents}
.ro-k{color:var(--ink-faint);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;align-self:center}
.ro-v{color:var(--ink);font-weight:500}
.ro-big{font:700 15px JetBrains Mono}
.ro-range{font:500 11px 'JetBrains Mono';color:var(--ink-faint);margin-top:3px;letter-spacing:.01em}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;font:700 10.5px 'Work Sans';letter-spacing:.03em}
.tag.high{background:var(--tag-high-bg);color:var(--tag-high-fg)}
.tag.med{background:var(--tag-med-bg);color:var(--tag-med-fg)}
.tag.low{background:var(--tag-low-bg);color:var(--tag-low-fg)}
.quote{grid-column:1/-1;color:var(--ink-dim);font-size:12px;font-style:italic;
  border-left:2px solid var(--line);padding:2px 0 2px 10px;margin-top:2px}
.quote a{font-style:normal}

/* ---------- circumstance list ---------- */
.circ-panel{padding:14px 14px 16px;max-height:calc(100vh - 150px);overflow-y:auto}
.circ-panel h3{font-size:13px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.circ-group{margin-bottom:12px}
.circ-group-t{font:700 11px 'Work Sans';color:var(--gold-ink);letter-spacing:.04em;margin:0 0 6px 2px;text-transform:uppercase}
.circ-btn{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);
  padding:8px 10px;border-radius:9px;margin-bottom:5px;cursor:pointer;transition:.12s;font:500 12.5px 'Work Sans';
}
.circ-btn:hover{background:var(--panel-2);border-color:var(--hover-border)}
.circ-btn.is-active{border-color:var(--green-ink);background:var(--circ-active-bg)}
.circ-btn .cb-mag{margin-left:auto;font:700 11px JetBrains Mono;color:var(--ink-dim)}
.circ-btn .cb-dir{font:700 12px JetBrains Mono;color:var(--green-ink);width:20px;text-align:center}
.circ-btn.lowc .cb-dir{color:var(--tag-low-fg)}
.legend{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--ink-dim)}
.legend .dot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;margin-right:6px}
.legend .dot.red{background:var(--red);box-shadow:0 0 8px var(--red)}
.legend .dot.green{background:var(--green);box-shadow:0 0 8px var(--green)}
.legend .dot.green.dashed{background:transparent;border:2px dashed var(--green-ink);box-shadow:none;width:10px;height:10px}

/* ---------- compare ---------- */
#compare{grid-template-columns:1fr;gap:16px}
.cmp-controls{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;padding:14px 18px}
.cmp-pick{display:flex;gap:18px;flex:1;flex-wrap:wrap}
.cmp-side{display:flex;gap:10px;flex:1;min-width:240px}
.cmp-side > label:first-child{flex:1}
.cmp-test{flex:0 0 auto;min-width:0!important}
.cmp-test.hidden{display:none}
.cmp-controls label{display:flex;flex-direction:column;gap:5px;font:600 11.5px 'Work Sans';color:var(--ink-dim);min-width:160px}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.cmp-cell{padding:14px 16px}
.cmp-cell h3{font-size:15px;margin-bottom:6px}
.cmp-aname{color:var(--green-ink)}
.cmp-bname{color:var(--blue)}
.overlay-cell{background:var(--panel-2)}
.delta{margin-top:10px;border-top:1px solid var(--line);padding-top:10px;font:600 12.5px 'Work Sans';color:var(--ink-dim);display:flex;flex-direction:column;gap:5px}
.delta b{color:var(--ink);font:700 13px JetBrains Mono}

/* ---------- footer ---------- */
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:12px 24px;border-top:1px solid var(--line);color:var(--ink-faint);font-size:11.5px}
.powered-foot{flex-basis:100%;text-align:center;margin-top:8px}
.powered-foot img{height:42px;width:auto;display:inline-block;opacity:.9}

@media (max-width:1080px){
  #explore{grid-template-columns:minmax(0,1fr)}
  .list-panel,.circ-panel,.stage{min-width:0}
  .list-panel,.circ-panel{max-height:none}
  .cmp-grid{grid-template-columns:1fr}
}

/* ---------- mobile (phones): reticle-first + Rifles/Positions toggle ---------- */
.mobile-tabs,.mobile-quote{display:none}
@media (max-width:720px){
  main{padding:10px 12px 16px}
  .toolbar{margin-bottom:10px}

  /* compact, non-sticky header so the reticle owns the top of the screen.
     Override the desktop 3-col grid → wrapping flex so nothing overflows on narrow screens */
  .topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
    position:static;padding:10px 12px;gap:8px 14px}
  .brand-center{flex:1 1 100%;order:3;text-align:left;justify-self:auto}
  .brand-card{gap:8px;padding:4px 10px}
  .brand-card .title-logo{height:28px}      /* beat the desktop .brand-card .title-logo:46px */
  .brand-divider{margin:1px 0}
  .title-logo{height:28px}
  .sub{display:none}
  .sub-eyebrow{font-size:10px;margin:0}
  .topbar-right{gap:12px}
  .logo-card{padding:4px 9px;border-radius:8px}
  .logo-img{height:26px}
  .logo-cap{font-size:7.5px;gap:3px}
  .powered-by{height:34px}
  .logo-credit{gap:3px}
  .mode-btn{padding:7px 14px;font-size:12.5px}
  .theme-toggle{width:34px;height:34px}

  #explore{grid-template-columns:minmax(0,1fr);gap:0}

  /* pinned zone: tabs (fixed height) then reticle, both sticky */
  .mobile-tabs{order:0;position:sticky;top:0;z-index:11;
    display:flex;gap:3px;padding:3px;margin-bottom:8px;background:var(--bg);
    border:1px solid var(--line);border-radius:11px}
  .mt-btn{flex:1;border:0;background:transparent;color:var(--ink-dim);
    font:600 13.5px 'Work Sans';padding:11px 8px;border-radius:8px;cursor:pointer;transition:.12s}
  .mt-btn.is-active{background:var(--panel-2);color:var(--ink);box-shadow:0 1px 2px #00000018}

  .stage{order:1;position:sticky;top:52px;z-index:10;padding:8px 12px 10px;
    border-radius:0 0 var(--radius) var(--radius);margin-bottom:8px}

  /* compact reticle + condensed readout so the pinned zone stays short */
  .reticle-host svg{width:min(100%,260px)}
  .stage-head{margin-bottom:2px}
  .stage-head h2{font-size:16px}
  .readout{font-size:12px;gap:3px 12px;margin-top:8px}
  .readout .quote{display:none}            /* drop the verbose callout in the pinned zone */
  .readout .ro-big{font-size:14px}

  /* pickers flow below the pinned reticle (page scrolls; reticle stays put) */
  .list-panel{order:2}
  .circ-panel{order:3}
  .list-panel,.circ-panel{max-height:none}

  /* one picker visible at a time, driven by the toggle */
  #explore:not(.m-positions) .circ-panel{display:none}
  #explore.m-positions .list-panel{display:none}

  /* the verbose callout, relocated to the bottom of the page */
  .mobile-quote{display:block;order:4;margin-top:10px;padding:12px 14px;
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    font:italic 500 12.5px/1.5 'Work Sans';color:var(--ink-dim)}
  .mobile-quote:empty{display:none}
  .mq-label{display:block;font:700 10px 'Work Sans';letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink-faint);margin-bottom:5px;font-style:normal}
}