/* The atlas page's own look, loaded by dist/index.html alone, after style.css.
   Every rule is scoped to body#atlas-page (not #atlas: an element's id becomes a property of window,
   and window.atlas is the chart's own handle, which the audit waits on). The id outranks style.css's
   rules for the same blocks and its
   generated dark theme, so this file decides them in both themes. The top of the page — the bar,
   the jeep and EvalMapBench banners, the odds, the release strip, the title and the two tracker
   links — is one night band in both themes: inside it the shared colour variables (--ink, --muted,
   --line …) are set to their night values, so style.css's own rules recolour themselves, and what
   style.css writes as a fixed light colour is set again below. The plate (search, axes, chart,
   readout) and everything under it follow the theme as before. The footer closes the page with the
   same night. Hand-written: tools/theme_dark.py does not read it. */

#atlas-page{
  --night:#0b1117;--night-2:#111b25;--amber:#f4b04a;
  --ramp:linear-gradient(90deg,#5aab9e,#7bbab4 25%,#9aafc5 50%,#a184bd 75%,#c96764);
}
#atlas-page .masthead,#atlas-page .external-trackers,#atlas-page footer{
  --ink:#eef3f7;--ink-2:#c6d1da;--muted:#9eafbc;--line:#ffffff1c;--line-2:#ffffff2e;--rule:#ffffff3d;
  --blue:#8cc4f0;--aa:#a8cbef;--bb:#f0b46a;--emb:#c5b4fb;--paper:var(--night);
  color-scheme:dark;color:var(--ink)}
#atlas-page .masthead :focus-visible,#atlas-page .intro :focus-visible,#atlas-page .external-trackers :focus-visible,#atlas-page footer :focus-visible{outline:2px solid #8fc6f2;outline-offset:2px}

/* ---- the night band: one ground from the top bar down to the plate */
#atlas-page .masthead{position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(900px 460px at 92% -160px,#2a8f7a3d,transparent 70%),radial-gradient(760px 420px at 4% 115%,#6b4fc02b,transparent 70%),linear-gradient(180deg,#0f1822,var(--night) 420px) var(--night)}
#atlas-page .masthead::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(#ffffff0a 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,#ffffff0a 1px,transparent 1px) 0 0/40px 40px;
  -webkit-mask:radial-gradient(90% 120% at 70% 0%,#000,transparent 75%);mask:radial-gradient(90% 120% at 70% 0%,#000,transparent 75%)}

#atlas-page .topbar{background:transparent;border:0;border-bottom:1px solid var(--line);color:#fff}
#atlas-page .topbar .mark{background:#fff;color:#121c26}
#atlas-page .topbar .mark span{color:#16855a}
#atlas-page .top-meta,#atlas-page .brand small{color:#a9b6c1}
#atlas-page .top-meta .snapshot{color:var(--amber);border-right:1px solid var(--line-2)}

#atlas-page .jeep-banner,#atlas-page .emb-banner,#atlas-page .odds-bar,#atlas-page .release-strip{background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--line)}
#atlas-page .jeep-banner a{color:var(--ink)}
#atlas-page .banner-copy>span{color:var(--muted)}
#atlas-page .banner-peek img{border:1px solid #ffffff2e;border-radius:4px;box-shadow:0 8px 18px -6px #000c;transition:transform .25s,border-color .25s}
#atlas-page .banner-peek:hover img{border-color:var(--amber);transform:translateY(-2px)}
#atlas-page .jeep-banner .banner-go{color:var(--amber)}
#atlas-page .jeep-banner .banner-go:hover{color:#ffd08a}

#atlas-page .eb-copy b{color:var(--emb)}
#atlas-page .eb-copy span{color:var(--muted)}
#atlas-page .eb-scores li{border-left:1px solid var(--line)}
#atlas-page .eb-scores a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;background:none;color:var(--ink)}
#atlas-page .eb-scores a span{min-width:0;white-space:normal;overflow-wrap:anywhere}
#atlas-page .eb-scores b{color:var(--emb);font-variant-numeric:tabular-nums}
@media(min-width:1400px) and (pointer:fine){
  #atlas-page .eb-scores{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;max-height:224px;overflow-y:auto;scrollbar-width:thin}
  #atlas-page .eb-scores a{height:100%;font-size:13px}
}
#atlas-page .eb-scores a:hover{background:#ffffff12}
#atlas-page .eb-btn{background:#ffffff0d;border:1px solid var(--line-2);color:var(--ink)}
#atlas-page .eb-btn:hover{background:#ffffff1f;border-color:#ffffff59}
#atlas-page .eb-3d{background:#6a4fd1;border:1px solid #6a4fd1;color:#fff}
#atlas-page .eb-3d:hover{background:#7d63e3;border-color:#7d63e3}

#atlas-page .odds-bar li a{background:none;border:0;border-left:1px solid var(--line);color:var(--ink)}
#atlas-page .odds-bar li a:hover{background:#ffffff12}
#atlas-page .odds-bar li b{color:var(--amber)}
#atlas-page .odds-bar li small{color:var(--muted)}

#atlas-page .release-strip{border-bottom:0}
#atlas-page .rs-chip{background:#ffffff0a;border:1px solid var(--line-2)}
#atlas-page .rs-chip>a:first-child{color:var(--ink)}
#atlas-page .rs-chip>a:hover{background:#ffffff17}
#atlas-page .rs-atlas,#atlas-page .rs-jeep{border-left:1px solid var(--line)}
#atlas-page .rs-atlas:hover,#atlas-page .rs-jeep:hover{background:#ffffff21!important}
#atlas-page .rs-atlas b,#atlas-page .rs-3d{border-color:var(--aa);color:var(--aa)}
#atlas-page .rs-x{background:#ffffff0a;border:1px solid var(--line-2);color:var(--ink)}
#atlas-page .rs-nodate a{background:transparent;border:1px dashed #ffffff4d;color:var(--ink)}
#atlas-page .rs-x:hover,#atlas-page .rs-nodate a:hover{background:#ffffff17}
#atlas-page .rs-bar{background:#f4b04a17;border:1px solid #f4b04a59;color:var(--ink)}
#atlas-page .rs-bar span{color:#e8c890}
#atlas-page .rs-bar:hover{background:#f4b04a2b}
#atlas-page .rs-ann{background:#8cc4f017;border:1px solid #8cc4f055;color:var(--ink)}
#atlas-page .rs-ann span{color:#b9cfe2}
#atlas-page .rs-ann:hover{background:#8cc4f02b}
#atlas-page .rs-told .rs-atlas{background:#8cc4f017;border:1px solid #8cc4f055;border-left:0}
#atlas-page .masthead .odds{background:#71849a}
#atlas-page .masthead .odds.high{background:#3ccf8b}
#atlas-page .masthead .odds.medium{background:transparent;border:2.5px solid #e6a640}
#atlas-page .masthead .odds.announced{background:var(--aa)}
#atlas-page .rs-day::before,#atlas-page .rs-dow::after{background:#7f93a5}
#atlas-page .rs-empty::before{background:#34434f}
#atlas-page .rs-today{color:var(--ink)}
#atlas-page .rs-today::after{background:var(--amber)}
#atlas-page .rs-now::before{background:var(--amber);box-shadow:0 0 12px #f4b04a99}
#atlas-page .rs-now b{background:var(--amber);color:#1c1204}
#atlas-page .rs-jeep::after,#atlas-page .rs-car{background:#9fd67f}
#atlas-page .rs-jeep.failed::after{background:#ff7d73}
#atlas-page .rs-jeep.failed::before,#atlas-page .rs-fail::after{background:#eef3f7;box-shadow:0 0 0 1px var(--night)}

/* News stays one click away without delaying the chart. Native details needs no stored preference. */
#atlas-page .news>summary{display:flex;align-items:center;gap:8px 18px;min-height:48px;padding:10px var(--gut);cursor:pointer;list-style:none;font-size:13px}
#atlas-page .news>summary::-webkit-details-marker{display:none}
#atlas-page .news>summary span{color:var(--muted)}
#atlas-page .news>summary::after{content:"+";margin-left:auto;font-size:20px;color:var(--amber)}
#atlas-page .news[open]>summary{border-bottom:1px solid var(--line)}
#atlas-page .news[open]>summary::after{content:"−"}
#atlas-page main{padding-top:20px}
#atlas-page .intro{display:block;margin:0 0 20px}
#atlas-page .intro h1{font-size:28px;line-height:1.15;margin:0 0 8px}
#atlas-page .intro-text{max-width:80ch;font-size:14px;line-height:1.5}
#atlas-page .intro-note,#atlas-page .intro .counts{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* The two tracker links close the news drawer. */
#atlas-page .external-trackers{margin:0;padding:10px var(--gut);border:0;border-top:1px solid var(--line);background:var(--night)}
#atlas-page .tracker-title{color:var(--ink)}
#atlas-page .tracker-title:hover{color:var(--amber)}
#atlas-page .tracker-card span{color:var(--muted)}

/* ---- the plate: the chart's price ramp along its top edge, the rest as style.css has it */
#atlas-page .workspace-bar{position:relative;margin-top:0;background-image:var(--ramp);background-size:100% 3px;background-repeat:no-repeat;background-position:0 0;
  border-top:0;padding-top:15px;box-shadow:0 -24px 48px -24px #0006}

/* ---- two-model readout: keep the measurements and their source notes together */
#atlas-page [data-pin-selected],#atlas-page .comparison-actions button{font:inherit;font-size:13px;min-height:36px;padding:7px 10px;border:1px solid var(--line);border-radius:2px;background:var(--paper);color:var(--ink);cursor:pointer}
#atlas-page [data-pin-selected]{display:block;margin-top:10px}
#atlas-page [data-pin-selected][aria-pressed="true"]{background:var(--ink);color:var(--paper)}
#atlas-page .model-comparison{padding:20px;background:var(--paper);border:1px solid var(--ink);border-top:0}
#atlas-page .comparison-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px}
#atlas-page .comparison-heading h2{margin:0;font-size:20px}
#atlas-page .comparison-heading p,#atlas-page .comparison-waiting{margin:6px 0 0;font-size:13px;color:var(--muted)}
#atlas-page .comparison-actions{display:flex;flex-wrap:wrap;gap:8px}
#atlas-page .comparison-scroll{overflow-x:auto}
#atlas-page .model-comparison table{width:100%;min-width:640px;border-collapse:collapse;table-layout:fixed;text-align:left}
#atlas-page .model-comparison caption{text-align:left;font-size:12px;line-height:1.5;color:var(--muted);padding:0 0 12px}
#atlas-page .model-comparison th,#atlas-page .model-comparison td{padding:12px;vertical-align:top;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
#atlas-page .model-comparison thead th{background:var(--paper);font-size:14px}
#atlas-page .model-comparison thead th:first-child{width:22%}
#atlas-page .model-comparison thead th:last-child{width:18%}
#atlas-page .model-comparison thead small{display:block;margin-bottom:4px;font-weight:400;font-size:12px;color:var(--muted)}
#atlas-page .model-comparison tbody th{font-size:13px;font-weight:500}
#atlas-page .model-comparison .metric{border:0;padding:0;min-width:0}
#atlas-page .model-comparison .metric label{display:none}
#atlas-page .model-comparison .metric b{margin:0 0 6px;font-size:20px;font-variant-numeric:tabular-nums}
#atlas-page .model-comparison .metric small{font-size:12px;line-height:1.5}
#atlas-page .comparison-difference{font-size:18px;font-variant-numeric:tabular-nums}
#atlas-page .comparison-na,#atlas-page .comparison-difference small{font-size:12px;color:var(--muted)}
#atlas-page .comparison-difference small{display:block;margin-top:6px}

/* ---- below the plate: the notes read down each column rather than across a ragged grid */
#atlas-page .disclaimer-body{display:block;columns:2 420px;column-gap:48px}
#atlas-page .disclaimer-body p{break-inside:avoid;margin:0 0 16px}

/* ---- the footer: the same night closes the page */
#atlas-page footer{margin:48px calc(-1*var(--gut)) 0;padding:30px var(--gut) 44px;background:var(--night);border-top:3px solid #5aab9e;border-image:var(--ramp) 1;color:var(--muted)}
#atlas-page footer span:first-child{color:var(--ink)}
#atlas-page footer a{color:var(--blue)}
/* ---- narrower screens */
@media(max-width:800px){
  #atlas-page footer{margin-top:36px;padding:24px var(--gut) 34px}
}
@media(max-width:600px){
  #atlas-page .news>summary{flex-wrap:wrap;gap:3px 12px}
  #atlas-page .news>summary span{order:3;flex-basis:100%;font-size:12px}
  #atlas-page main{padding-top:16px}
  #atlas-page .intro{margin-bottom:16px}
  #atlas-page .intro h1{font-size:24px}
  #atlas-page .model-comparison{padding:16px 14px}
  #atlas-page .model-comparison table,#atlas-page .model-comparison tbody{display:block;min-width:0}
  #atlas-page .model-comparison caption{display:block;width:100%}
  #atlas-page .model-comparison thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #atlas-page .model-comparison tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  #atlas-page .model-comparison tbody th{grid-column:1/-1;padding:12px 0 0;border:0;font-weight:700}
  #atlas-page .model-comparison td{padding:12px 8px;border:0}
  #atlas-page .model-comparison td::before{content:attr(data-label);display:block;min-height:34px;font-size:12px;line-height:1.4;color:var(--muted);margin-bottom:8px}
  #atlas-page .model-comparison td:nth-child(2){padding-left:0}
  #atlas-page .model-comparison td:nth-child(3){padding-right:0}
  #atlas-page .model-comparison .comparison-difference{grid-column:1/-1;padding:0 0 12px;border-bottom:1px solid var(--line);font-size:16px}
  #atlas-page .model-comparison td.comparison-difference::before{display:inline;min-height:0;margin-right:8px}
  #atlas-page [data-pin-selected],#atlas-page .comparison-actions button{min-height:44px}
  #atlas-page .axis-presets{grid-template-columns:repeat(3,minmax(0,1fr))}
  #atlas-page .axis-presets button{padding:12px 10px;border-top:0;border-left:1px solid var(--line)}
  #atlas-page .axis-presets button:first-child{border-left:0}
  #atlas-page .axis-presets button b{font-size:13px;overflow-wrap:anywhere}
  #atlas-page .axis-presets button small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #atlas-page .axis-presets button.active{box-shadow:inset 0 3px 0 var(--aa)}
  #atlas-page .axis-presets .preset-bb.active{box-shadow:inset 0 3px 0 var(--bb)}
  #atlas-page .axis-presets .preset-emb.active{box-shadow:inset 0 3px 0 var(--emb)}
}

@media(prefers-reduced-motion:reduce){
  #atlas-page .banner-peek img{transition:none}
  #atlas-page .banner-peek:hover img{transform:none}
}