/* LiveSun — deep-space observatory theme */
:root{
  --bg0:#04060c;
  --bg1:#080d18;
  --panel:rgba(255,255,255,.035);
  --panel-solid:#0d1322;
  --line:rgba(255,255,255,.09);
  --text:#eef2ff;
  --muted:#8b94b3;
  --faint:#5b637f;
  --amber:#ff9a2e;
  --amber2:#ffd166;
  --ember:#ff5e1a;
  --rose:#ff4d6d;
  --green:#34d399;
  --blue:#7cc4ff;
  --radius:18px;
  --font-d:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-b:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-m:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); background:var(--bg0);
  font-family:var(--font-b); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
/* ---- deep-space backdrop: starfield + drifting aurora ---- */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 8%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 84% 34%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 66%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 81%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 72%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 42%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 58%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 55%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 33% 12%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 90%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 12%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 18% 47%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 62% 78%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 38%, rgba(255,255,255,.65) 50%, transparent 51%);
  background-color:var(--bg0);
}
body::after{
  content:""; position:fixed; inset:-20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(42rem 30rem at 12% -6%, rgba(255,122,26,.14), transparent 60%),
    radial-gradient(36rem 30rem at 88% 4%, rgba(120,80,255,.10), transparent 60%),
    radial-gradient(50rem 36rem at 50% 115%, rgba(255,46,99,.07), transparent 60%);
  filter:blur(30px);
  animation:aurora 36s ease-in-out infinite alternate;
}
@keyframes aurora{
  from{transform:translate3d(-2%,1%,0) scale(1)}
  to{transform:translate3d(2%,-1%,0) scale(1.06)}
}

::selection{background:rgba(255,154,46,.35); color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg0)}
::-webkit-scrollbar-thumb{background:#232c42;border-radius:8px;border:2px solid var(--bg0)}
::-webkit-scrollbar-thumb:hover{background:var(--amber)}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:6px}

/* ---- header ---- */
.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(6,9,16,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.site-header::after{
  content:""; display:block; height:2px;
  background:linear-gradient(90deg,transparent,var(--amber),var(--rose),var(--amber),transparent);
  background-size:220% 100%;
  animation:sheen 9s linear infinite;
  opacity:.85;
}
@keyframes sheen{from{background-position:0% 0}to{background-position:220% 0}}
.header-inner{
  max-width:1240px; margin:0 auto; padding:.75rem 1.4rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{display:flex; align-items:center; gap:.85rem}
.brand-orb{
  width:38px; height:38px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 34% 32%, #fff3c4 0%, var(--amber2) 28%, var(--amber) 55%, var(--ember) 82%, #a32400 100%);
  box-shadow:0 0 18px 4px rgba(255,140,30,.55), 0 0 44px 10px rgba(255,110,20,.22);
  animation:orb 5s ease-in-out infinite;
}
@keyframes orb{50%{box-shadow:0 0 24px 6px rgba(255,140,30,.7), 0 0 60px 14px rgba(255,110,20,.28)}}
.brand h1{
  margin:0; font-family:var(--font-d); font-size:1.5rem; font-weight:700; letter-spacing:.01em;
  background:linear-gradient(100deg,#fff 20%,var(--amber2) 60%,var(--amber) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tagline{margin:-.15rem 0 0; color:var(--muted); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase}
.live-chip{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--font-m); font-size:.85rem; color:var(--text);
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:.42rem .9rem; backdrop-filter:blur(8px); white-space:nowrap;
}
.live-dot{width:.55rem; height:.55rem; border-radius:50%; background:var(--green);
  box-shadow:0 0 10px var(--green); animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}

/* ---- layout ---- */
main{max-width:1240px; margin:0 auto; padding:1.6rem 1.4rem 2rem; position:relative; z-index:1}
section{margin-bottom:3rem}
h2{
  font-family:var(--font-d); font-size:1.6rem; font-weight:700; margin:0 0 .35rem; letter-spacing:.01em;
}
.kicker{
  display:block; font-family:var(--font-b); font-size:.72rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--amber); margin-bottom:.3rem;
}
.section-lead{color:var(--muted); margin:0 0 1.3rem; max-width:72ch; font-size:.96rem}
.note{color:var(--faint); font-size:.84rem}

/* ---- two-column layout: imagery first, sticky side panel ---- */
.page-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:2.2rem; align-items:start}
.main-col{min-width:0}
.side-col{
  position:sticky; top:1rem; max-height:calc(100vh - 2rem); overflow-y:auto;
  scrollbar-width:thin; padding-right:.15rem; min-width:0;
}
.side-col h2{font-size:1.18rem}
.side-col .section-lead{font-size:.85rem; margin-bottom:1rem}
.side-col section{margin-bottom:2.2rem}
.side-col #flare-table{min-width:0; font-size:.8rem}
.side-col #flare-table thead th{padding:.55rem .6rem}
.side-col #flare-table tbody td{padding:.5rem .6rem}
@media (max-width:1000px){
  .page-grid{grid-template-columns:1fr}
  .side-col{position:static; max-height:none; overflow:visible}
}

/* ---- compact conditions table ---- */
.cond-table{min-width:0; font-size:.86rem}
.cond-table tbody th{
  text-align:left; font-weight:600; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.07em; color:var(--muted); white-space:nowrap;
  padding:.42rem .6rem .42rem 0; border-bottom:1px solid rgba(255,255,255,.06);
  vertical-align:baseline;
}
.cond-table tbody td{
  padding:.42rem 0; border-bottom:1px solid rgba(255,255,255,.06);
  vertical-align:baseline; font-variant-numeric:tabular-nums;
}
.cond-table tbody tr:last-child th, .cond-table tbody tr:last-child td{border-bottom:none}
.cond-table tbody tr{transition:background .15s}
.cond-table tbody tr:hover{background:rgba(255,154,46,.05)}
.cond-table .v{font-family:var(--font-d); font-weight:700; font-size:1.02rem; line-height:1.2}
.cond-table .d{color:var(--muted); font-size:.76rem; margin-left:.5rem}
/* severity recoloring */
.cond-table tr[data-sev="B"] .v{color:var(--blue)}
.cond-table tr[data-sev="C"] .v{color:var(--amber2)}
.cond-table tr[data-sev="M"] .v{color:var(--amber); text-shadow:0 0 18px rgba(255,154,46,.45)}
.cond-table tr[data-sev="X"] .v{color:#ff6b6b; text-shadow:0 0 20px rgba(255,77,109,.55)}
.cond-table tr[data-lvl="calm"] .v{color:var(--green)}
.cond-table tr[data-lvl="elev"] .v{color:var(--amber2)}
.cond-table tr[data-lvl="high"] .v{color:#ff6b6b; text-shadow:0 0 18px rgba(255,77,109,.5)}
.loading{color:var(--faint)}

/* ---- imagery viewer: one channel at a time ---- */
.viewer-toolbar{
  display:flex; align-items:center; gap:.8rem;
  max-width:780px; margin:0 auto .9rem;
}
.autoplay-btn{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  font-family:var(--font-b); font-size:.8rem; font-weight:600; letter-spacing:.04em; color:var(--text);
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:.45rem .95rem; backdrop-filter:blur(8px);
  transition:border-color .2s, box-shadow .2s;
}
.autoplay-btn .ic{font-size:.75rem; color:var(--amber)}
.autoplay-btn.playing{border-color:rgba(255,154,46,.55); box-shadow:0 0 16px rgba(255,122,26,.3)}
.autoplay-btn:hover{border-color:rgba(255,154,46,.6)}
.date-nav{
  margin-left:auto; display:flex; align-items:center; gap:.25rem;
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:.25rem .4rem; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.date-nav button{
  width:32px; height:32px; border-radius:50%; border:1px solid transparent;
  background:transparent; color:var(--text); font-size:1.25rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0 0 2px;
  transition:border-color .2s, background .2s;
}
.date-nav button:hover:not(:disabled){border-color:rgba(255,154,46,.5); background:rgba(255,154,46,.12)}
.date-nav button:disabled{opacity:.28; cursor:default}
#date-picker{
  background:transparent; border:none; color:var(--text);
  font-family:var(--font-m); font-size:.85rem; padding:.3rem .1rem;
  color-scheme:dark; cursor:pointer;
}
#date-picker::-webkit-calendar-picker-indicator{cursor:pointer; opacity:.75}
.viewer-main{position:relative; max-width:780px; margin:0 auto}
.viewer-frame{
  position:relative; margin:0; overflow:hidden;
  background:#05070b; border:1px solid var(--line); border-radius:var(--radius);
  aspect-ratio:1/1; max-height:74vh; width:100%;
  box-shadow:0 0 0 1px rgba(255,154,46,.06), 0 30px 70px -30px rgba(255,122,26,.4);
}
.viewer-frame img{width:100%; height:100%; object-fit:cover; display:block; opacity:1; transition:opacity .35s ease}
.viewer-frame.loading img{opacity:0}
.viewer-frame.loading::after{
  content:"Acquiring signal\2026"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-family:var(--font-d); font-size:1rem; letter-spacing:.06em;
  background:radial-gradient(circle at 50% 45%, rgba(255,154,46,.12), transparent 60%);
  animation:pulse 2s ease-in-out infinite;
}
.viewer-frame figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:2.6rem 1.2rem 1rem;
  background:linear-gradient(180deg, transparent, rgba(3,5,10,.88));
  pointer-events:none;
}
.viewer-frame figcaption .t{display:block; color:#fff; font-family:var(--font-d); font-weight:700; font-size:1.2rem}
.viewer-frame figcaption #viewer-sub{color:var(--muted); font-size:.85rem}
.viewer-live{
  position:absolute; top:.9rem; right:.9rem;
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.62rem; font-weight:700; letter-spacing:.18em; color:#d9ffe9;
  background:rgba(4,10,8,.62); border:1px solid rgba(52,211,153,.5); border-radius:999px;
  padding:.28rem .7rem; backdrop-filter:blur(6px);
}
.viewer-live::before{content:""; width:.45rem; height:.45rem; border-radius:50%;
  background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 2s infinite}
.viewer-count{
  position:absolute; top:.9rem; left:.9rem;
  font-family:var(--font-m); font-size:.75rem; color:var(--text);
  background:rgba(4,8,14,.62); border:1px solid var(--line); border-radius:999px;
  padding:.28rem .7rem; backdrop-filter:blur(6px); font-variant-numeric:tabular-nums;
}
.viewer-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:54px; height:54px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1.9rem; line-height:1; color:var(--text);
  background:rgba(10,14,24,.66); border:1px solid var(--line); backdrop-filter:blur(8px);
  transition:border-color .2s, box-shadow .2s, transform .2s;
  z-index:2;
}
.viewer-nav.prev{left:1rem}
.viewer-nav.next{right:1rem}
.viewer-nav:hover{border-color:rgba(255,154,46,.6); box-shadow:0 0 20px rgba(255,122,26,.4); transform:translateY(-50%) scale(1.06)}
.viewer-nav:active{transform:translateY(-50%) scale(.97)}
.viewer-strip{
  display:flex; gap:.6rem; overflow-x:auto; margin-top:1rem; padding:.2rem .2rem .5rem;
  scrollbar-width:thin;
}
/* coordinate-grid overlay on the viewer */
#grid-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1;
}
.grid-btn{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  font-family:var(--font-b); font-size:.8rem; font-weight:600; letter-spacing:.04em; color:var(--text);
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:.45rem .95rem; backdrop-filter:blur(8px);
  transition:border-color .2s, box-shadow .2s;
}
.grid-btn .ic{font-size:.85rem; color:var(--amber)}
.grid-btn.on{border-color:rgba(255,154,46,.55); box-shadow:0 0 16px rgba(255,122,26,.3)}
.grid-btn:hover{border-color:rgba(255,154,46,.6)}
.overlay-legend{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem;
  max-width:780px; margin:.8rem auto 0; font-size:.8rem; color:var(--muted);
}
.overlay-legend[hidden]{display:none}
.overlay-legend span{display:inline-flex; align-items:center}
.overlay-legend .legend-note{font-size:.72rem; color:var(--faint)}
.sw{display:inline-block; width:.8rem; height:.8rem; border-radius:50%; margin-right:.4rem}
.sw.grid{background:transparent; border:1px dashed rgba(255,255,255,.9); border-radius:50%}
.sw.ar{background:transparent; border:2px solid var(--amber); border-radius:4px}
.sw.fl-c{background:var(--amber2); box-shadow:0 0 8px var(--amber2)}
.sw.fl-m{background:var(--amber); box-shadow:0 0 8px var(--amber)}
.sw.fl-x{background:var(--rose); box-shadow:0 0 8px var(--rose)}
.vthumb{
  flex:0 0 auto; width:96px; padding:0; cursor:pointer; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  color:var(--muted); transition:border-color .2s, box-shadow .2s, transform .2s;
}
.vthumb:hover{transform:translateY(-2px); border-color:rgba(255,154,46,.4)}
.vthumb img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:#05070b}
.vthumb span{display:block; font-size:.62rem; font-weight:600; padding:.32rem .3rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center}
.vthumb.active{border-color:var(--amber); box-shadow:0 0 16px rgba(255,154,46,.45); color:var(--text)}
.vthumb.dead{opacity:.35}
@media (max-width:640px){
  .viewer-nav{width:42px; height:42px; font-size:1.5rem}
  .viewer-nav.prev{left:.5rem}
  .viewer-nav.next{right:.5rem}
}

/* ---- x-ray chart + table ---- */
#xray-canvas{
  width:100%; height:240px; display:block;
  background:linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 24px 60px -34px rgba(255,122,26,.4);
}
#flare-table-wrap{margin-top:1.4rem}
#flare-table-wrap h3{font-family:var(--font-d); font-size:1.05rem; margin:0 0 .2rem}
.table-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius);
  background:rgba(255,255,255,.02); backdrop-filter:blur(8px)}
table{width:100%; border-collapse:collapse; font-size:.9rem; min-width:520px}
thead th{
  text-align:left; padding:.7rem .9rem; color:var(--muted); font-weight:600; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.03); white-space:nowrap;
}
tbody td{padding:.62rem .9rem; border-bottom:1px solid rgba(255,255,255,.05);
  font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .15s}
tbody tr:hover{background:rgba(255,154,46,.06)}
.flare-class{font-family:var(--font-d); font-weight:700}
.flare-class.sev-B{color:var(--blue)} .flare-class.sev-C{color:var(--amber2)}
.flare-class.sev-M{color:var(--amber); text-shadow:0 0 14px rgba(255,154,46,.5)}
.flare-class.sev-X{color:#ff6b6b; text-shadow:0 0 14px rgba(255,77,109,.55)}

/* ---- footer ---- */
.site-footer{
  border-top:1px solid var(--line); padding:1.8rem 1.4rem 2.4rem;
  text-align:center; color:var(--muted); font-size:.85rem; position:relative; z-index:1;
  background:linear-gradient(180deg, transparent, rgba(255,122,26,.04));
}
.site-footer p{margin:.35rem auto; max-width:70ch}
.site-footer strong{color:var(--text); font-weight:600}

@media (max-width:860px){
  h2{font-size:1.35rem}
  main{padding:1.2rem 1rem 1.6rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
}