/* Space Weather Monitor - tuned for a 1080x1920 portrait display, dark. */
:root {
  --bg: #0b0f17; --card: #131a26; --card2: #1a2232; --fg: #e6e9ef; --dim: #8a93a6;
  --ok: #1e6b3f; --warn: #d68910; --bad: #c0392b; --line: rgba(255,255,255,0.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 15px/1.35 "Segoe UI", system-ui, sans-serif; overflow: hidden; }
body { display: flex; flex-direction: column; border: 4px solid transparent; transition: border-color .4s; }
body[data-level="amber"] { border-color: var(--warn); }
body[data-level="red"] { border-color: var(--bad); animation: redpulse 2.5s ease-in-out infinite; }
@keyframes redpulse { 50% { border-color: #5a1a14; } }

/* ---------- header ---------- */
#hdr { flex: 0 0 auto; padding: 10px 14px 6px; background: linear-gradient(#0e1422, #0b0f17); border-bottom: 1px solid var(--line); }
.htop { display: flex; justify-content: space-between; font-size: 13px; color: var(--dim); }
.htop b { color: var(--fg); letter-spacing: .08em; }
.simtag { background: #7d3cff; color: #fff; padding: 1px 6px; border-radius: 3px; font-weight: 700; }
.scales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.scales-nums { display: block; }
.scale { border-radius: 8px; padding: 8px 10px; text-align: center; transition: background .4s; }
.scale .sv { font-size: 46px; font-weight: 800; line-height: 1; }
.scale .sn { font-size: 13px; font-weight: 600; margin-top: 2px; }
.scale .ss { font-size: 12px; opacity: .8; }
.nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.num { background: var(--card2); border-radius: 6px; padding: 6px; text-align: center; border: 1px solid transparent; }
.num .nv { font-size: 30px; font-weight: 700; line-height: 1.1; }
.num .nl { font-size: 12px; color: var(--dim); }
.num .ns { font-size: 12px; }
.rfline { margin-top: 8px; background: #102a3e; border-left: 4px solid #4aa3df; padding: 6px 8px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.rfline .rfh { font-weight: 700; color: #9fd3ff; }
.rfi b { color: var(--dim); font-weight: 600; margin-right: 3px; }
.rfi.ok::before, .rfl.ok::before { content: "\25cf "; color: #2ecc71; }
.rfi.warn::before, .rfl.warn::before { content: "\25cf "; color: var(--warn); }
.rfi.bad::before, .rfl.bad::before { content: "\25cf "; color: #ff5b4a; }
.rfi.unk::before, .rfl.unk::before { content: "\25cb "; color: var(--dim); }
.ticker { margin-top: 6px; font-size: 13px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker .k { color: var(--fg); }
.ticker .k.warning, .ticker .k.alert { color: #ffb347; }
.offline { margin-top: 6px; background: #4a1010; color: #ffd0c8; padding: 4px 8px; font-weight: 600; border-radius: 4px; }

/* ---------- pages ---------- */
#pages { flex: 1 1 auto; position: relative; overflow: hidden; }
.page { position: absolute; inset: 0; padding: 10px 14px; overflow: hidden; display: none; }
.page.on { display: block; animation: fadein .5s; }
/* .pc = page content. Vertical: one flex column, RF box pinned to bottom. */
.pc { display: flex; flex-direction: column; gap: 10px; min-height: 100%; }
@keyframes fadein { from { opacity: 0; } }
.card { background: var(--card); border-radius: 8px; padding: 8px 12px 10px; border: 1px solid var(--line); min-width: 0; }
.card header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.card h3 { margin: 0; font-size: 15px; font-weight: 600; color: #cfd6e4; }
.card.is-stale { opacity: .45; filter: grayscale(.8); }
.stamp { font-size: 12px; color: var(--dim); white-space: nowrap; }
.stamp.stale, .stamp.dead { color: #ffb347; font-weight: 700; }
.stamp code { font-size: 11px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
canvas.ch { width: 100%; display: block; }
.bigrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.big { background: var(--card2); border-radius: 6px; padding: 8px; text-align: center; border: 2px solid transparent; }
.big .v { font-size: 34px; font-weight: 700; line-height: 1.1; }
.big .l { font-size: 12px; color: var(--dim); }
.big .s { font-size: 12px; }
.note { font-size: 12px; color: var(--dim); margin: 6px 0 0; }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th { text-align: left; color: var(--dim); font-weight: 600; border-bottom: 1px solid var(--line); padding: 2px 4px; }
table.t td { padding: 2px 4px; border-bottom: 1px solid rgba(255,255,255,0.03); }
table.t tr.hot td { color: #ffb347; font-weight: 600; }
table.t.tbig { font-size: 16px; }
.big .v.sm { font-size: 24px; }
table.t i { color: #ffb347; font-style: normal; font-size: 11px; }

.rfbox { margin-top: auto; background: #102a3e; border-left: 4px solid #4aa3df; border-radius: 4px; padding: 8px 10px; font-size: 14px; }
.rfbox .rfh { font-weight: 700; color: #9fd3ff; margin-bottom: 2px; }
.rfl { padding: 1px 0; }
.rfl b { color: var(--dim); display: inline-block; min-width: 46px; }
.src { font-size: 11px; color: var(--dim); }

/* images */
img { max-width: 100%; display: block; }
.imgph { background: #000; color: var(--dim); display: flex; align-items: center; justify-content: center; text-align: center; min-height: 160px; border-radius: 6px; font-size: 13px; }
.suvi { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; max-width: 690px; margin: 0 auto; }
.suvi figure { margin: 0; position: relative; }
.suvi figure img, .suvi .imgph { border-radius: 6px; width: 100%; aspect-ratio: 1; object-fit: cover; background: #000; }
.suvi .side { display: grid; gap: 8px; }
.suvi figcaption { position: absolute; left: 6px; top: 4px; font-size: 12px; background: rgba(0,0,0,.55); padding: 1px 5px; border-radius: 3px; }
.aur img.sq { width: 100%; aspect-ratio: 1; object-fit: contain; background: #000; border-radius: 6px; }
.ccor img { width: 100%; max-height: 470px; object-fit: contain; background: #000; border-radius: 6px; }
.drap img { width: 100%; max-height: 400px; object-fit: contain; background: #000; border-radius: 6px; }

/* ---------- rotation nav ---------- */
#dots { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 14px 8px; border-top: 1px solid var(--line); background: #0e1422; }
#dots button { background: var(--card2); color: var(--dim); border: 1px solid var(--line); border-radius: 12px; padding: 3px 10px; font: inherit; font-size: 13px; cursor: pointer; }
#dots button.cur { background: #2a3a58; color: #fff; border-color: #4aa3df; }
#dots button.spk { color: #fff; border-color: var(--warn); animation: dotpulse 1.2s ease-in-out infinite; }
#dots #pp { color: #fff; background: #253045; font-weight: 600; }
@keyframes dotpulse { 50% { background: #7a4b05; } }
#dots .next { margin-left: auto; font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
#dots #gloss { color: #9fd3ff; }

/* ---------- (i) info tips ---------- */
.ii { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 6px;
  border-radius: 50%; border: 1px solid rgba(159,211,255,.55); color: #9fd3ff; font: italic 700 11px Georgia, serif;
  cursor: help; vertical-align: 1px; opacity: .7; user-select: none; flex: 0 0 auto; }
.ii:hover, .ii:focus { opacity: 1; background: #1f4a6e; outline: none; }
.scale, .num { position: relative; }
.scale > .ii, .num > .ii { position: absolute; top: 6px; right: 6px; margin: 0; border-color: rgba(255,255,255,.6); color: #fff; }
.rfl .ii { width: 14px; height: 14px; font-size: 10px; }
#tip { position: fixed; z-index: 100; width: 560px; max-width: calc(100vw - 16px); overflow-y: auto;
  background: #0f1726; border: 1px solid #4aa3df; border-radius: 8px; padding: 10px 14px 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.7); font-size: 13.5px; line-height: 1.45; color: #dfe6f2; }
#tip.pinned { border-color: #f5b041; }
#tip .tip-h { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 6px; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
#tip .tip-pin { font-size: 11px; font-weight: 400; color: var(--dim); white-space: nowrap; }
#tip .tip-s { margin: 6px 0; }
#tip .tip-s > b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #9fd3ff; margin-bottom: 1px; }
#tip .tip-s.phys { background: rgba(255,255,255,.03); border-left: 2px solid #5dade2; padding: 4px 8px; }
#tip .tip-nb { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#tip .tip-s.ok > b { color: #2ecc71; }
#tip .tip-s.bad > b { color: #ffb347; }
#tip ul.tip-g { list-style: none; margin: 2px 0 0; padding: 0; }
#tip ul.tip-g li { padding: 4px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 12.5px; }
#tip ul.tip-g li b { color: #fff; }
#tip ul.tip-g li i { color: #f5d38a; font-style: normal; }
#tip a { color: #5dade2; text-decoration: none; white-space: nowrap; }
#tip a:hover { text-decoration: underline; }
#tip .tip-q { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12.5px; }

/* =====================================================================
   LAYOUT MODES (body[data-layout], set by app.js detectLayout()).
   vert = the default rules above. Do not change them for horz/mobile -
   add overrides below instead. See DECISIONS.md "Layout modes".
   ===================================================================== */

/* ---------- HORZ: landscape desktop, 2 columns, no scroll ---------- */
body[data-layout="horz"] #hdr { padding: 6px 12px 4px; }
body[data-layout="horz"] #hdr .scales-nums { display: grid; grid-template-columns: 3fr 4fr; gap: 8px; margin: 6px 0 0; }
body[data-layout="horz"] .scales { margin: 0; gap: 6px; }
body[data-layout="horz"] .scale { padding: 4px 8px; }
body[data-layout="horz"] .scale .sv { font-size: 32px; }
body[data-layout="horz"] .scale .sn, body[data-layout="horz"] .scale .ss { font-size: 11.5px; }
body[data-layout="horz"] .nums { gap: 6px; }
body[data-layout="horz"] .num { padding: 4px; }
body[data-layout="horz"] .num .nv { font-size: 24px; }
body[data-layout="horz"] .rfline { margin-top: 6px; padding: 4px 8px; }
body[data-layout="horz"] .ticker { margin-top: 4px; }
body[data-layout="horz"] .page { padding: 8px 12px; overflow-y: auto; }
body[data-layout="horz"] .pc { display: block; column-count: 2; column-gap: 10px; min-height: 0; }
body[data-layout="horz"] .pc > * { break-inside: avoid; margin: 0 0 10px; }
body[data-layout="horz"] .rfbox { margin-top: 0; }
body[data-layout="horz"] canvas.ch { max-height: 210px; }
body[data-layout="horz"] .suvi { max-width: 480px; }
body[data-layout="horz"] .ccor img { max-height: 330px; }
body[data-layout="horz"] .drap img { max-height: 300px; }
body[data-layout="horz"] .aur img.sq { max-height: 360px; }
body[data-layout="horz"] .big .v { font-size: 28px; }
/* Short landscape (laptops ~768-900 tall): shrink the tallest things; page scrolls if still needed. */
@media (max-height: 900px) {
  body[data-layout="horz"] canvas.ch { max-height: 150px; }
  body[data-layout="horz"] .suvi { max-width: 360px; }
  body[data-layout="horz"] .ccor img, body[data-layout="horz"] .drap img { max-height: 230px; }
  body[data-layout="horz"] .aur img.sq { max-height: 260px; }
  body[data-layout="horz"] .big { padding: 4px; }
  body[data-layout="horz"] .big .v { font-size: 22px; }
  body[data-layout="horz"] .pc > * { margin-bottom: 8px; }
}

/* ---------- MOBILE: single column, page scrolls ---------- */
body[data-layout="mobile"] { height: auto; min-height: 100%; }
html:has(body[data-layout="mobile"]) { overflow: auto; height: auto; }
body[data-layout="mobile"] { overflow: visible; }
body[data-layout="mobile"] #hdr { padding: 6px 8px; }
body[data-layout="mobile"] .htop { flex-direction: column; gap: 2px; }
body[data-layout="mobile"] .scales { gap: 5px; }
body[data-layout="mobile"] .scale { padding: 5px 4px; }
body[data-layout="mobile"] .scale .sv { font-size: 30px; }
body[data-layout="mobile"] .scale .sn, body[data-layout="mobile"] .scale .ss { font-size: 10.5px; }
body[data-layout="mobile"] .nums { grid-template-columns: repeat(2, 1fr); gap: 5px; }
body[data-layout="mobile"] .num .nv { font-size: 24px; }
body[data-layout="mobile"] .ticker { white-space: normal; }
body[data-layout="mobile"] #pages { overflow: visible; flex: 0 0 auto; }
body[data-layout="mobile"] .page { position: static; padding: 8px; overflow: visible; }
body[data-layout="mobile"] .row2, body[data-layout="mobile"] .row3 { grid-template-columns: 1fr; }
body[data-layout="mobile"] .bigrow { grid-template-columns: repeat(2, 1fr); }
body[data-layout="mobile"] .big .v { font-size: 24px; }
body[data-layout="mobile"] .suvi { grid-template-columns: 1fr 1fr; }
body[data-layout="mobile"] .suvi .main { grid-column: 1 / -1; }
body[data-layout="mobile"] .suvi .side { grid-template-columns: 1fr 1fr; grid-column: 1 / -1; }
body[data-layout="mobile"] canvas.ch { max-height: 200px; }
body[data-layout="mobile"] .card header { flex-wrap: wrap; }
body[data-layout="mobile"] table.t { font-size: 12px; }
body[data-layout="mobile"] #dots { position: sticky; bottom: 0; z-index: 50; padding: 6px 8px; gap: 4px; overflow-x: auto; flex-wrap: nowrap; }
body[data-layout="mobile"] #dots button { white-space: nowrap; flex: 0 0 auto; }
body[data-layout="mobile"] #dots .next { margin-left: 0; white-space: nowrap; }
body[data-layout="mobile"] #tip { width: auto; left: 8px !important; right: 8px; }
body[data-layout="mobile"] #tip .tip-nb { grid-template-columns: 1fr; }
body[data-layout="mobile"] .ii { width: 20px; height: 20px; font-size: 12px; }