html{scroll-behavior:smooth}
:root{--accent:#1f3a5f;--accent-muted:rgba(31,58,95,.08);--ink:#000;--muted:#666;--border:rgba(128,128,128,.15);--bg:#fff}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;max-width:1100px;margin:0 auto;padding:0 20px;color:#222;background:var(--bg)}

/* file:// + noscript bootstrap warning */
.bootstrap-warn{max-width:60ch;margin:24px auto;padding:12px 16px;border-left:3px solid #cb2431;font:14px/1.5 system-ui,sans-serif;color:#cb2431}
.bootstrap-warn code{font-family:Menlo,Consolas,monospace;background:rgba(203,36,49,.08);padding:1px 5px;border-radius:3px}
@media(prefers-color-scheme:dark){.bootstrap-warn{color:#f28690;border-color:#f28690}}
html.dark .bootstrap-warn{color:#f28690;border-color:#f28690}

/* header */
header{position:sticky;top:0;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:10;padding:14px 0 10px;border-bottom:1px solid var(--border)}
.header-row{display:flex;justify-content:space-between;align-items:center}
h1{font-size:22px;margin:0 0 2px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
h1 .logo{height:52px;width:auto;flex:none;display:block}
.controls{display:flex;gap:6px}
.controls button{background:none;border:1px solid var(--border);border-radius:4px;padding:3px 8px;font-size:12px;color:var(--muted);cursor:pointer;line-height:1.3}
.controls button:hover{color:var(--ink);border-color:var(--muted)}
.sub{color:#666;font-size:12px;margin-bottom:4px;font-variant-numeric:tabular-nums}
.utc-clock{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);margin-bottom:6px;letter-spacing:.5px}
.toc{display:flex;flex-wrap:wrap;gap:2px 0;margin:0}
.toc a{font-size:11px;color:var(--muted);text-decoration:none;white-space:nowrap;padding:2px 0}
.toc a:hover{color:var(--accent);text-decoration:underline}
.toc a:not(:last-child)::after{content:"\00b7";display:inline-block;margin:0 8px;color:var(--border);text-decoration:none}

/* sections */
section{padding:28px 0 20px;border-bottom:1px solid var(--border)}
section:last-child{border-bottom:none}
h2{font-size:16px;margin:0 0 14px;border-left:3px solid var(--ink);padding:2px 0 2px 10px;color:var(--ink)}
h3{font-size:11px;margin:18px 0 6px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}

/* images & figures */
img{max-width:100%;display:block;margin:0 auto}
iframe{width:100%;border:none;border-radius:6px;margin:10px 0;display:block}
figure{margin:0;display:flex;flex-direction:column;align-items:center}
figure + figure{margin-top:16px}
figure img{max-height:320px;object-fit:contain;width:auto;min-height:180px;aspect-ratio:4/3}
figure img.failed{opacity:.35;min-height:60px}
figcaption{font-size:11px;color:#555;margin-top:6px}
.interp{font-size:11px;color:var(--muted);margin:3px 0 0;font-style:italic;line-height:1.4;max-width:520px}
figure .interp{text-align:center}

/* grids */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.grid figure+figure,.grid3 figure+figure{margin-top:0}

/* data panels */
.dscovr-panel{margin:0}
.dscovr-values{display:flex;gap:28px;flex-wrap:wrap;margin:8px 0}
.dscovr-box{display:flex;flex-direction:column;align-items:center;min-width:72px}
.dscovr-label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.dscovr-num{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2;color:var(--ink)}
.dscovr-unit{font-size:10px;color:var(--muted)}
.dscovr-spark{width:100%;max-width:520px;height:50px;display:block;margin:6px 0 2px}
.kp-panel{margin:0}
.kp-chart{display:flex;align-items:flex-end;gap:2px;height:48px;margin:8px 0}
.kp-col{display:flex;flex-direction:column;align-items:center;flex:1;height:100%;justify-content:flex-end}
.kp-bar{width:100%;min-height:2px;border-radius:2px 2px 0 0}
.kp-date{font-size:9px;color:var(--muted);margin-top:2px}

/* links & reference */
ul.links{font-size:13px;padding-left:18px;margin:6px 0 0}
ul.links li{margin:4px 0;break-inside:avoid}
a{color:var(--accent)}
small{color:#666;font-size:12px}
.links-archive{columns:2;column-gap:36px;margin-top:4px}
.links-archive h3{break-after:avoid;margin-top:0}
.links-archive h3+ul{margin-top:4px}
.links-archive ul.links{break-inside:avoid;margin-bottom:16px}

/* footer */
footer{padding:20px 0;text-align:center}
footer a{font-size:12px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* responsive */
@media(max-width:600px){
  header{position:relative;backdrop-filter:none;-webkit-backdrop-filter:none}
  iframe{height:380px!important}
  .grid{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .links-archive{columns:1}
  .dscovr-values{gap:16px}
  .dscovr-num{font-size:24px}
}

/* dark mode - system preference (skipped when html.light forces light) */
@media(prefers-color-scheme:dark){
  html:not(.light){--accent:#9cc8ff;--accent-muted:rgba(156,200,255,.06);--ink:#fff;--muted:#8a9199;--border:rgba(128,128,128,.2);--bg:#0e1116}
  html:not(.light) body{background:#0e1116;color:#d0d4da}
  html:not(.light) header{background:rgba(14,17,22,.92)}
  html:not(.light) .sub{color:#8a9199}
  html:not(.light) figcaption{color:#8a9199}
  html:not(.light) small{color:#7a818a}
  html:not(.light) .controls button{color:var(--muted);border-color:var(--border)}
  html:not(.light) .controls button:hover{color:var(--ink)}
}

/* dark mode - manual toggle */
html.dark{--accent:#9cc8ff;--accent-muted:rgba(156,200,255,.06);--ink:#fff;--muted:#8a9199;--border:rgba(128,128,128,.2);--bg:#0e1116}
html.dark body{background:#0e1116;color:#d0d4da}
html.dark header{background:rgba(14,17,22,.92)}
html.dark .sub{color:#8a9199}
html.dark figcaption{color:#8a9199}
html.dark small{color:#7a818a}
html.dark .controls button{color:var(--muted);border-color:var(--border)}
html.dark .controls button:hover{color:var(--ink)}

/* light mode - manual override when system is dark */
html.light{--accent:#1f3a5f;--accent-muted:rgba(31,58,95,.08);--ink:#000;--muted:#666;--border:rgba(128,128,128,.15);--bg:#fff}
html.light body{background:#fff;color:#222}
html.light header{background:rgba(255,255,255,.95)}
html.light .sub{color:#666}
html.light figcaption{color:#555}
html.light small{color:#666}

/* print */
@media print{
  header{position:relative;border:none}
  body{max-width:none;margin:0;color:#000}
  iframe{display:none}
  section{border:none}
  h2{break-after:avoid}
  figure{break-inside:avoid}
  a{color:#000;text-decoration:underline}
  a[href]::after{content:" (" attr(href) ")";font-size:10px;word-break:break-all}
  /* fixed-position UI doesn't belong in print output */
  #settings-panel,#term-popover,#settings-toggle,.controls{display:none}
  /* term links shouldn't double-print their own URL ("(undefined)") */
  a.term-link[href]::after{content:""}
}

/* Today summary - flat paragraph that reads like a forecaster's brief.
   Matches the main-site tone: no boxes, no backgrounds, just slightly larger
   body text under the section heading. */
.today-summary{margin:6px 0 14px;max-width:820px}
.today-summary p{margin:0;font-size:15px;line-height:1.6;color:var(--ink);font-variant-numeric:tabular-nums}
.today-summary p + p{margin-top:8px}
.today-summary p b{color:var(--ink);font-weight:600}
.today-loading{color:var(--muted);font-style:italic}

/* Inline term affordance: click only.
   Click on .term-link shows #term-popover with the term's full definition,
   sourced from the in-code DEFINITIONS map (see src/definitions.js). */
a.term-link{text-decoration:none;border-bottom:1px dotted var(--muted);cursor:pointer;color:inherit;text-decoration-skip-ink:auto}
a.term-link:hover{color:var(--ink);border-bottom-color:var(--ink)}
a.term-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

/* Operator settings panel (gear icon in header). */
#settings-panel{position:fixed;top:60px;right:16px;z-index:60;width:320px;max-width:calc(100vw - 32px);padding:16px;background:var(--bg);border:1px solid var(--border);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
#settings-panel[hidden]{display:none}
#settings-panel h3{font-size:13px;margin:0 0 8px;color:var(--ink);text-transform:uppercase;letter-spacing:.5px;border:none;padding:0}
#settings-panel .settings-help{font-size:11px;color:var(--muted);margin:0 0 14px;line-height:1.4}
#settings-panel .settings-row{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
#settings-panel .settings-row label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
#settings-panel select{padding:5px 8px;border:1px solid var(--border);border-radius:3px;font:13px system-ui,sans-serif;background:var(--bg);color:var(--ink)}
#settings-panel .settings-actions{display:flex;gap:8px;margin-top:14px;justify-content:flex-end}
#settings-panel button{padding:5px 14px;border:1px solid var(--border);border-radius:3px;font:13px system-ui,sans-serif;cursor:pointer;background:var(--bg);color:var(--ink)}
#settings-panel button.settings-save{background:var(--accent);color:#fff;border-color:var(--accent)}
#settings-panel button:hover{border-color:var(--ink)}
#settings-panel input[type=text]{padding:5px 8px;border:1px solid var(--border);border-radius:3px;font:13px Menlo,Consolas,monospace;background:var(--bg);color:var(--ink);text-transform:uppercase;width:90px;letter-spacing:.5px}
#settings-panel .settings-qth-controls{display:flex;gap:6px;align-items:center}
#settings-panel .settings-secondary{font-size:12px;padding:4px 10px}
#settings-panel .settings-hint{font-size:10px;color:var(--muted);font-style:italic;margin-top:2px}
html.dark #settings-panel{box-shadow:0 8px 24px rgba(0,0,0,.5)}
@media(prefers-color-scheme:dark){html:not(.light) #settings-panel{box-shadow:0 8px 24px rgba(0,0,0,.5)}}

/* Popover that pops up on click of an inline term, showing the full
   definition. Single global element positioned by JS. */
#term-popover{position:absolute;z-index:50;max-width:360px;padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.08);font-size:13px;line-height:1.5;color:var(--ink)}
#term-popover[hidden]{display:none}
.term-popover-name{font-weight:600;color:var(--ink);margin-bottom:4px}
.term-popover-def{color:var(--ink)}
html.dark #term-popover{background:#0e1116;box-shadow:0 4px 14px rgba(0,0,0,.5)}

/* glance-simple (band-condition summary table) + outlook alerts */
.simple-intro{font-size:13px;color:var(--muted);margin:4px 0 10px;max-width:720px;line-height:1.5}
.simple-intro b{color:var(--ink);font-weight:600}

.simple-table{width:100%;max-width:820px;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums;margin:10px 0}
.simple-table td{padding:4px 8px;border-bottom:1px dotted var(--border);vertical-align:baseline}
.simple-table tr:last-child td{border-bottom:none}
.simple-table .band{font-weight:700;color:var(--ink);width:90px;white-space:nowrap}
.simple-table .stats{font-size:11px;color:var(--muted);white-space:nowrap;width:180px}
.simple-table .verdict{text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:700;width:72px;white-space:nowrap}
.simple-table .note{color:var(--muted);font-size:11px;line-height:1.4}
.simple-footer{font-size:11px;color:var(--muted);margin:10px 0 0;line-height:1.5;max-width:640px;font-style:italic}

.q-excellent{color:#176f2c;font-weight:600}
.q-good{color:#22863a}
.q-warn{color:#b08800}
.q-bad{color:#cb2431}
.q-muted{color:var(--muted)}
html.dark .q-excellent{color:#9be0a8;font-weight:600}
html.dark .q-good{color:#7fd494}
html.dark .q-warn{color:#e3c872}
html.dark .q-bad{color:#f28690}

.alert-line{font-size:13px;margin:8px 0;padding:6px 10px;border-left:3px solid var(--muted);line-height:1.4;color:var(--ink)}
.alert-line.alert-info {border-left-color:var(--muted)}
.alert-line.alert-warn {border-left-color:#b08800}
.alert-line.alert-watch{border-left-color:#d15704}
.alert-line.alert-alert{border-left-color:#cb2431}
.alert-line .alert-label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-right:6px;font-weight:600}

@media(max-width:600px){
  .simple-table .note{display:none}
}

/* drivers-row (solar / geomag) */
.drivers-row{display:flex;flex-wrap:wrap;gap:18px 32px;margin:8px 0 10px;align-items:flex-start}
.drivers-group{display:flex;flex-direction:column;gap:6px;min-width:200px;flex:1 1 280px}
.drivers-group h4{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0;font-weight:500}
.drivers-vals{display:flex;gap:20px;flex-wrap:wrap}
.drivers-val{display:flex;flex-direction:column;align-items:flex-start;min-width:60px}
.drivers-val-label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.drivers-val-num{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.15}
.drivers-val-unit{font-size:11px;color:var(--muted);font-weight:400}
.drivers-val-sub{font-size:10px;color:var(--muted);line-height:1.4;font-variant-numeric:tabular-nums}
.drivers-val-sub b{color:var(--ink);font-weight:600}

/* (NOAA scale chips removed; class letter / pfu value already conveys level) */

/* iono-panels (digisonde / TEC / riometer) */
.iono-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:8px 0 14px}
.iono-panel h4{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 4px;font-weight:500}
.iono-panel h4 small{text-transform:none;letter-spacing:0;font-size:10px;color:var(--muted);font-weight:400;margin-left:4px}
.iono-panel dl{display:grid;grid-template-columns:auto 1fr;gap:1px 10px;font-size:13px;font-variant-numeric:tabular-nums;margin:0}
.iono-panel dt{color:var(--muted);font-size:12px;font-weight:400}
.iono-panel dd{margin:0;color:var(--ink);font-weight:600}
.iono-note{font-size:10px;color:var(--muted);margin-top:6px;line-height:1.4;font-style:italic}
.iono-mini{margin:0;padding:8px 0;border-left:2px solid var(--border);padding-left:10px;font-size:11px;color:var(--muted);font-style:italic;align-self:start}

/* F10.7 sparkline above the F10.7 number */
.f107-spark{display:block;width:100%;max-width:140px;height:22px;margin:2px 0 4px;opacity:.85}

/* generic data table (paths, bands, prob); wrapper makes it scroll on mobile */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:6px 0 10px}
.data-table{width:100%;min-width:480px;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums;margin:0}
.data-table th{text-align:left;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-bottom:1px solid var(--border);font-weight:500}
.data-table td{padding:3px 8px;border-bottom:1px dotted var(--border)}
.data-table tr:last-child td{border-bottom:none}
.data-table td.num{text-align:right}
.data-table td.band{font-weight:700;color:var(--ink)}

/* outlook list (CMEs / HSS / flares / meteors) */
.outlook-list{font-size:13px;margin:4px 0 12px;padding:0;list-style:none}
.outlook-list li{padding:4px 0;display:grid;grid-template-columns:140px 110px 1fr;gap:10px;align-items:baseline;font-variant-numeric:tabular-nums;border-bottom:1px dotted var(--border)}
.outlook-list li:last-child{border-bottom:none}
.outlook-list time{color:var(--muted);font-size:11px;white-space:nowrap}
.outlook-list .meta{color:var(--muted);font-size:11px;white-space:nowrap}
.outlook-list .desc{color:var(--ink);font-size:12px;line-height:1.4}

/* pending placeholder + freshness footer */
.pending-note{font-size:11px;color:var(--muted);font-style:italic;margin:6px 0;line-height:1.5}
.freshness-note{font-size:10px;color:var(--muted);margin:4px 0 8px;font-variant-numeric:tabular-nums}
.empty-list{font-size:11px;color:var(--muted);font-style:italic;margin:4px 0 8px}

/* QTH chip in header; click to (re-)auto-detect via browser geolocation */
#qth-label{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.05em;border:1px solid var(--border);border-radius:4px;padding:2px 7px;margin-left:6px;user-select:none}
#qth-label:hover{color:var(--ink);border-color:var(--muted)}

@media(max-width:800px){
  .iono-panels{grid-template-columns:1fr;gap:16px}
  .outlook-list li{grid-template-columns:120px 90px 1fr}
}
@media(max-width:600px){
  .drivers-vals{gap:14px}
  .drivers-val-num{font-size:18px}
  .outlook-list li{grid-template-columns:1fr;gap:2px}
}