/* Deep Sky Monitor: dark "control deck" theme.
   Shell: fixed header, collapsible left navigation (off-canvas on phones), fixed footer.
   The two chart pages (Deep-sky, Satellites) fill the space between header and footer on desktop
   so nothing needs page scroll; the other pages scroll normally. */
:root{
  color-scheme: dark;
  --bg-base:#0a0f1d; --bg-surface:#131c31; --bg-card:#1c2744; --bg-card-hover:#233154; --bg-nav:#0f172a;
  --border-color:rgba(255,255,255,0.1); --border-glow:rgba(56,189,248,0.25);
  --text-main:#f8fafc; --text-muted:#94a3b8; --text-sub:#cbd5e1;
  --primary:#38bdf8; --primary-glow:rgba(56,189,248,0.4);
  --radius-lg:20px; --radius-md:14px; --radius-sm:8px;
  --shadow-card:0 10px 30px rgba(0,0,0,0.45);
  --transition-smooth:all 0.25s cubic-bezier(0.4,0,0.2,1);

  --header-h:60px; --footer-h:30px; --nav-w:248px; --nav-w-collapsed:64px; --gutter:16px;

  /* tokens the chart script draws with */
  --fg:var(--text-main); --fg-muted:var(--text-sub); --fg-faint:var(--text-muted);
  --panel:var(--bg-surface); --grid:rgba(148,163,184,0.14); --baseline:rgba(148,163,184,0.35);
  --accent-sat:#38bdf8; --accent-sky:#a78bfa;
  --good:#22c55e; --warn:#eab308; --serious:#f97316; --critical:#ef4444;

  --font-display:'Baloo Bhai 2',system-ui,sans-serif;
  --font-body:'Hind Vadodara','Baloo Bhai 2',system-ui,sans-serif;
  --font-mono:'Fira Sans',system-ui,sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{font-size:16px;}
body{font-family:var(--font-body); background:var(--bg-base); color:var(--text-main); min-height:100vh; line-height:1.45; overflow-x:hidden;}
a{color:var(--primary);}
.mono,code{font-family:var(--font-mono);}
code{font-size:0.86em; background:rgba(148,163,184,0.12); padding:1px 6px; border-radius:5px; color:var(--text-sub);}
h1,h2,h3{font-family:var(--font-display); font-weight:700; line-height:1.2; text-wrap:balance;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
button{font:inherit;}

/* ================= SHELL ================= */
/* ---------- fixed header ---------- */
.app-header{position:fixed; top:0; left:0; right:0; height:var(--header-h); z-index:30; display:flex; align-items:center; gap:12px;
  padding:0 var(--gutter) 0 10px; background:var(--bg-surface); border-bottom:1px solid var(--border-color); box-shadow:0 4px 18px rgba(0,0,0,0.35);}
.nav-toggle{flex:none; width:42px; height:42px; border-radius:10px; border:1px solid transparent; background:transparent; color:var(--text-sub); cursor:pointer; font-size:1.1rem;}
.nav-toggle:hover{background:var(--bg-card); border-color:var(--border-color); color:#fff;}
.header-title-wrap{display:flex; align-items:center; gap:12px; min-width:0; overflow:hidden; text-decoration:none; color:inherit;}   /* hidden: the title never runs under the buttons */
.header-icon-badge{width:38px; height:38px; flex:none; border-radius:10px; background:linear-gradient(135deg,#0284c7,#38bdf8);
  display:flex; align-items:center; justify-content:center; font-size:17px; color:#fff; box-shadow:0 4px 15px rgba(56,189,248,0.35);}
.title-texts{display:flex; flex-direction:column; min-width:0;}
.app-title{font-family:var(--font-display); font-weight:700; font-size:1.2rem; line-height:1.15; color:#fff; display:flex; align-items:center; gap:8px; white-space:nowrap;}
.title-pill{font-family:var(--font-mono); font-size:0.58rem; font-weight:800; letter-spacing:0.8px; color:var(--primary);
  border:1px solid var(--border-glow); background:rgba(56,189,248,0.12); padding:1px 7px; border-radius:999px;}
.sub-title{font-size:0.78rem; color:var(--text-muted); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.header-actions{margin-left:auto; flex:none; display:flex; align-items:center; gap:8px;}
.btn-action-tool,.status-chip,.clock-chip{background:var(--bg-card); color:var(--text-sub); border:1px solid var(--border-color);
  padding:7px 12px; border-radius:var(--radius-sm); font-family:var(--font-body); font-size:0.84rem; font-weight:600;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;}
.btn-action-tool,.clock-chip{cursor:pointer; transition:var(--transition-smooth);}
.btn-action-tool:hover,.clock-chip:hover{background:var(--bg-card-hover); color:#fff; border-color:var(--primary);}
.btn-action-tool:focus-visible,.btn-preset:focus-visible,.btn-icon:focus-visible,.clock-chip:focus-visible,.nav-link:focus-visible,.nav-toggle:focus-visible,.nav-collapse:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}
.clock-chip{font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--text-muted);}
.clock-chip b{color:#fff; font-size:0.95rem; font-weight:700;}
.clock-zone{color:var(--primary); font-weight:700; font-size:0.72rem; letter-spacing:0.4px;}
.status-chip.status-fresh{color:#4ade80; border-color:rgba(34,197,94,0.4); background:rgba(34,197,94,0.12);}
.status-chip.status-aging{color:#facc15; border-color:rgba(234,179,8,0.4); background:rgba(234,179,8,0.12);}
.status-chip.status-stale{color:#f87171; border-color:rgba(239,68,68,0.5); background:rgba(239,68,68,0.14);}

/* ---------- left navigation ---------- */
.app-nav{position:fixed; top:var(--header-h); bottom:var(--footer-h); left:0; width:var(--nav-w); z-index:25; display:flex; flex-direction:column;
  padding:14px 10px; background:var(--bg-nav); border-right:1px solid var(--border-color); overflow-x:hidden; overflow-y:auto;
  transition:width 0.22s ease, transform 0.22s ease;}
.app-nav ul{list-style:none; display:flex; flex-direction:column; gap:4px;}
.nav-link{display:flex; align-items:center; gap:13px; padding:10px 13px; border-radius:var(--radius-sm); color:var(--text-muted);
  text-decoration:none; font-weight:600; font-size:0.92rem; white-space:nowrap; transition:var(--transition-smooth); position:relative;}
.nav-link i{width:18px; text-align:center; font-size:1rem; flex:none;}
.nav-link:hover{background:var(--bg-card); color:#fff;}
.nav-link.active{background:rgba(56,189,248,0.14); color:var(--primary);}
.nav-link.active::before{content:""; position:absolute; left:-10px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--primary);}
.nav-collapse{margin-top:auto; display:flex; align-items:center; gap:13px; padding:10px 13px; border:0; border-radius:var(--radius-sm);
  background:transparent; color:var(--text-muted); cursor:pointer; font-size:0.86rem; font-weight:600; white-space:nowrap;}
.nav-collapse:hover{background:var(--bg-card); color:#fff;}
.nav-collapse i{width:18px; text-align:center; transition:transform 0.22s ease;}
.nav-label{transition:opacity 0.15s ease;}
.nav-backdrop{position:fixed; inset:var(--header-h) 0 var(--footer-h) 0; z-index:24; background:rgba(3,6,14,0.6); backdrop-filter:blur(2px);}
.nav-backdrop[hidden]{display:none;}

/* ---------- main content ---------- */
.app-main{margin-left:var(--nav-w); padding:calc(var(--header-h) + var(--gutter)) var(--gutter) calc(var(--footer-h) + var(--gutter)); transition:margin-left 0.22s ease; min-width:0;}

/* ---------- fixed footer ---------- */
.app-footer{position:fixed; left:0; right:0; bottom:0; height:var(--footer-h); z-index:30; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 var(--gutter); background:var(--bg-nav); border-top:1px solid var(--border-color); font-size:0.74rem; color:var(--text-muted); white-space:nowrap;}
.foot-left{overflow:hidden; text-overflow:ellipsis;}
.foot-sep{opacity:0.5; margin:0 4px;}
.foot-right{color:#fbbf24; flex:none; text-decoration:none;}
a.foot-right:hover,a.foot-right:focus-visible{text-decoration:underline; color:#fcd34d;}
.not-operational{margin:4px 0 12px; line-height:1.6;}
.not-operational > b:first-child{display:block; color:#fbbf24; margin-bottom:2px;}
.foot-right i{margin-right:4px;}

/* collapsed navigation (14" laptops and larger: the reader's choice, remembered) */
@media (min-width:1280px){
  html.nav-collapsed .app-nav{width:var(--nav-w-collapsed);}
  html.nav-collapsed .nav-label{opacity:0; width:0; overflow:hidden;}
  html.nav-collapsed .nav-link,html.nav-collapsed .nav-collapse{justify-content:center; padding-left:0; padding-right:0; gap:0;}
  html.nav-collapsed .nav-collapse i{transform:rotate(180deg);}
  html.nav-collapsed .app-main{margin-left:var(--nav-w-collapsed);}
}
/* small laptops and tablets: the menu is always the icon rail; opening it slides the full menu over the page
   (the content keeps its width) */
@media (min-width:760px) and (max-width:1279px){
  .app-nav{width:var(--nav-w-collapsed);}
  .app-main{margin-left:var(--nav-w-collapsed);}
  html:not(.nav-open) .nav-label{opacity:0; width:0; overflow:hidden;}
  html:not(.nav-open) .nav-link,html:not(.nav-open) .nav-collapse{justify-content:center; padding-left:0; padding-right:0; gap:0;}
  html:not(.nav-open) .nav-collapse i{transform:rotate(180deg);}
  html.nav-open .app-nav{width:var(--nav-w); box-shadow:8px 0 30px rgba(0,0,0,0.5);}
}
/* tablets and small laptops: compact header (no date on the clock, Full screen as an icon, shorter subtitle room) */
@media (min-width:760px) and (max-width:1023px){
  .clock-date,.header-actions .btn-action-tool span{display:none;}   /* header only: page buttons keep their labels */
  .header-actions .btn-action-tool{padding:7px 10px;}
  .app-title{font-size:1.1rem;}
}
/* phones: navigation slides in over the content */
@media (max-width:759px){
  :root{--gutter:12px;}
  .app-nav{transform:translateX(-100%); width:var(--nav-w); box-shadow:8px 0 30px rgba(0,0,0,0.5);}
  html.nav-open .app-nav{transform:none;}
  .nav-collapse{display:none;}
  .app-main{margin-left:0;}
  .sub-title,.status-chip span,.clock-date,.header-actions .btn-action-tool span,.foot-left .foot-data{display:none;}
  .app-title{font-size:1.02rem; overflow:hidden; text-overflow:ellipsis; display:block;}
  .header-title-wrap{flex:1 1 auto;}
  .header-icon-badge,#btnFullscreen{display:none;}
}
@media (max-width:420px){ .title-pill,.status-chip{display:none;} }

/* ================= CARDS & CHARTS ================= */
.dash{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gutter);}

.deck-card{background:var(--bg-surface); border:1px solid var(--border-color); border-radius:var(--radius-lg);
  padding:18px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow-card); min-width:0;}
.deck-section-title{display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-bottom:1px solid var(--border-color); padding-bottom:8px;}
.deck-section-title h1,.deck-section-title h2{font-size:1.12rem; color:#fff; display:flex; align-items:center; gap:9px;}
.deck-status{font-family:var(--font-mono); font-size:0.72rem; font-weight:700; letter-spacing:0.8px; color:var(--text-muted); white-space:nowrap;}
.deck-status.live{color:#4ade80;}
.deck-status.live i{font-size:0.5rem; vertical-align:middle; animation:blink 2s infinite;}
@keyframes blink{50%{opacity:0.25;}}

.card-body{display:flex; flex-direction:column; gap:14px; min-width:0;}
.viz-col,.detail-col{display:flex; flex-direction:column; gap:10px; min-width:0;}

/* chart stage */
.display-arena{position:relative; width:100%; aspect-ratio:var(--ar); padding:8px;
  background:radial-gradient(circle at center,#18233c 0%,#0d1424 100%); border:1px solid var(--border-color); border-radius:var(--radius-md); overflow:hidden;}
.display-arena svg{display:block; width:100%; height:100%; overflow:visible;}
/* zoomable star chart (deep-sky card) */
svg.zoomable{cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;}
svg.zoomable.dragging{cursor:grabbing;}
.sky-label{paint-order:stroke; stroke:rgba(5,9,19,0.85); stroke-width:3px; cursor:pointer;}
.sky-label:hover{fill:#fff;}
.zoom-ctrl{position:absolute; top:14px; right:16px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:4px;
  background:rgba(15,23,42,0.72); backdrop-filter:blur(6px); border:1px solid var(--border-color); border-radius:10px; padding:4px; box-shadow:0 4px 12px rgba(0,0,0,0.35);}
.zoom-ctrl .btn-icon{width:28px; height:28px; font-size:0.8rem; background:transparent; border-color:transparent;}
.zoom-ctrl .btn-icon:hover{background:var(--bg-card-hover); border-color:var(--primary);}
.zoom-ctrl .btn-icon.warn{color:#fbbf24;}
.chip[hidden]{display:none;}
/* realistic sky: the Aladin Lite photo view sits under the svg, which then only catches clicks on markers */
.sky-photo{position:absolute; inset:8px; border-radius:calc(var(--radius-md) - 4px); overflow:hidden; background:#000;}
.sky-photo[hidden]{display:none;}
.sky-photo-view{width:100%; height:100%;}
.sky-arena.photo{background:#000;}
.sky-arena.photo svg{position:relative; z-index:1; pointer-events:none; cursor:default;}
.sky-arena.photo svg .mark,.sky-arena.photo svg .sky-label{pointer-events:auto;}
.sky-arena.photo .sky-border{display:none;}
.photo-text{paint-order:stroke; stroke:rgba(0,0,0,0.75); stroke-width:3px;}
.sky-arena.photo .sky-label{stroke:rgba(0,0,0,0.85);}
.sky-photo-credit{position:absolute; left:16px; bottom:12px; z-index:2; font-size:0.66rem; color:rgba(226,232,240,0.7);
  background:rgba(2,6,16,0.55); padding:2px 7px; border-radius:6px; pointer-events:auto;}
.sky-photo-credit a{color:inherit;}
.sky-photo-credit[hidden]{display:none;}
.zoom-level{font-family:var(--font-mono); font-size:0.68rem; font-weight:700; color:var(--primary); font-variant-numeric:tabular-nums;}

/* ---------- Explore Deep Sky tools (user docs/FEATURES.md, DS-01..DS-12) ---------- */
.zoom-ctrl{flex-wrap:wrap-reverse; max-height:calc(100% - 24px); align-content:flex-end;}   /* short charts: the buttons fold into a second column */
.zoom-sep{width:18px; height:1px; background:var(--border-color); margin:2px 0;}
.zoom-ctrl .btn-icon.active{color:#fbbf24; background:rgba(251,191,36,0.14); border-color:rgba(251,191,36,0.5);}
.sky-arena.tool-active svg, .sky-arena.tool-active .sky-photo{cursor:crosshair;}
/* catalogue pulsars: one batch of dots per kind (round caps on zero-length segments) */
.psr-pts{fill:none; stroke-linecap:round; pointer-events:none;}
.psr-pts.normal{stroke:rgba(125,211,252,0.55); stroke-width:2.6;}
.psr-pts.binary{stroke:rgba(94,234,212,0.7); stroke-width:2.8;}
.psr-pts.msp{stroke:rgba(196,181,253,0.85); stroke-width:3;}
.psr-pts.magnetar{stroke:rgba(251,191,36,0.95); stroke-width:4;}
.psr-label{fill:rgba(186,230,253,0.85); font-size:10px; font-family:var(--font-mono); paint-order:stroke; stroke:rgba(5,9,19,0.85); stroke-width:3px; pointer-events:none;}
.psr-sel{fill:none; stroke:#fff; stroke-width:2; pointer-events:none;}
/* catalogue galaxies (OpenNGC): pale gold dots by brightness, real outlines when zoomed in */
.gal-pts{fill:none; stroke-linecap:round; pointer-events:none;}
.gal-pts.b1{stroke:rgba(253,230,138,0.95); stroke-width:4.2;}
.gal-pts.b2{stroke:rgba(253,230,138,0.7); stroke-width:3;}
.gal-pts.b3{stroke:rgba(253,230,138,0.45); stroke-width:2.2;}
.gal-ell{fill:rgba(253,230,138,0.12); stroke:rgba(253,230,138,0.85); stroke-width:1.2; pointer-events:none;}
.gal-label{fill:rgba(254,243,199,0.9); font-size:10px; font-family:var(--font-mono); paint-order:stroke; stroke:rgba(5,9,19,0.85); stroke-width:3px; pointer-events:none;}
.gal-sel{fill:none; stroke:#fff; stroke-width:2; pointer-events:none;}
.type-pill.gal{background:rgba(253,230,138,0.12); border-color:rgba(253,230,138,0.4); color:#fde68a;}
.near-mark{fill:rgba(34,211,238,0.12); stroke:#22d3ee; stroke-width:1.6; cursor:pointer;}
.sky-arena.photo svg .near-mark{pointer-events:auto;}
.near-label{fill:#a5f3fc; font-size:11px; font-family:var(--font-body); pointer-events:none;}
.measure-line{stroke:#fbbf24; stroke-width:2; stroke-dasharray:6 4;}
.measure-line.live{opacity:0.7;}
.measure-end{fill:#fbbf24; stroke:#0b1020; stroke-width:1.5;}
.measure-label{fill:#fde68a; font-size:13px; font-weight:700; font-family:var(--font-mono);}
.sky-readout{position:absolute; left:16px; top:14px; z-index:2; max-width:calc(100% - 90px); display:flex; flex-wrap:wrap; gap:2px 10px;
  font-family:var(--font-mono); font-size:0.7rem; color:rgba(226,232,240,0.85); background:rgba(2,6,16,0.66); padding:3px 8px; border-radius:6px; pointer-events:none;}
.sky-readout[hidden]{display:none;}
.sky-readout b{color:#fff; font-weight:700;}
.sky-readout .ro-con{color:#c4b5fd;} .sky-readout .ro-gal{color:var(--text-muted);}
.sky-readout .ro-measure{color:#fde68a; font-weight:700;} .sky-readout .ro-hint{font-family:var(--font-body); color:#e2e8f0;}
.sky-wave-badge{position:absolute; left:16px; bottom:34px; z-index:2; font-size:0.68rem; font-weight:700; color:#fde68a; background:rgba(2,6,16,0.66);
  border:1px solid rgba(251,191,36,0.4); padding:2px 8px; border-radius:999px; pointer-events:none;}
.sky-wave-badge[hidden]{display:none;}
.sky-waves{position:absolute; top:14px; right:60px; z-index:3; width:min(290px, calc(100% - 80px)); max-height:calc(100% - 28px); overflow:auto;
  background:rgba(15,23,42,0.94); backdrop-filter:blur(6px); border:1px solid var(--border-color); border-radius:10px; padding:10px 12px; box-shadow:0 8px 24px rgba(0,0,0,0.5);
  display:flex; flex-direction:column; gap:8px; font-size:0.8rem;}
.sky-waves[hidden]{display:none;}
.wv-head{display:flex; align-items:center; justify-content:space-between;}
.wv-head b{color:#fff; font-family:var(--font-display);}
.wv-head .btn-icon{width:26px; height:26px; font-size:0.8rem;}
.wv-list{display:flex; flex-direction:column; gap:2px;}
.wv-item{display:flex; align-items:center; gap:8px; padding:4px 6px; border-radius:6px; cursor:pointer; color:var(--text-sub);}
.wv-item:hover{background:rgba(148,163,184,0.1);}
.wv-item.on{background:rgba(251,191,36,0.12); color:#fde68a;}
.wv-item input{accent-color:#fbbf24;}
.wv-blend{display:flex; align-items:center; gap:8px; color:var(--text-sub);}
.wv-blend input{flex:1; accent-color:#fbbf24;}
.wv-blend output{font-family:var(--font-mono); min-width:38px; text-align:right; color:#fde68a;}
/* timeline of transients */
.sky-timeline{display:flex; flex-direction:column; gap:8px;}
.sky-timeline[hidden]{display:none;}
.tl-toggle{align-self:flex-start;}
.tl-toggle i{color:#2dd4bf;}
.tl-panel{background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:8px 10px; display:flex; flex-direction:column; gap:6px;}
.tl-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;}
.tl-ranges .panel-tab{font-size:0.74rem; padding:4px 8px;}
.tl-date{font-size:0.76rem; color:var(--text-muted); display:inline-flex; align-items:center; gap:6px;}
.tl-date input{background:var(--bg-base); color:var(--text-sub); border:1px solid var(--border-color); border-radius:6px; padding:2px 6px; color-scheme:dark;}
.tl-strip{width:100%; height:44px; display:block; background:#050913; border-radius:6px;}
.tl-done{fill:rgba(45,212,191,0.06);}
.tl-tick{stroke-width:2; cursor:pointer;}
.tl-tick.off{opacity:0.22;}
.tl-slider{width:100%; accent-color:#2dd4bf;}
/* Details panel tool cards */
.tool-stack{display:flex; flex-direction:column; gap:8px;}
.tool-card{background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-md);}
.tool-card > summary{list-style:none; display:flex; align-items:center; gap:8px; padding:8px 11px; cursor:pointer; user-select:none;}
.tool-card > summary::-webkit-details-marker{display:none;}
.tool-card > summary:hover{background:rgba(167,139,250,0.06);}
.tool-card > summary:focus-visible{outline:2px solid var(--primary); outline-offset:-2px;}
.tool-ico{color:var(--primary); width:14px; text-align:center;}
.tool-title{font-weight:700; color:#fff; font-size:0.86rem;}
.tool-card > summary small{flex:1; min-width:0; color:var(--text-muted); font-size:0.72rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tool-chev{margin-left:auto; color:var(--text-muted); font-size:0.7rem; transition:transform 0.2s ease;}
.tool-card[open] > summary .tool-chev{transform:rotate(180deg); color:var(--primary);}
.tool-card[open] > summary{border-bottom:1px solid var(--border-color);}
.tool-body{padding:8px 11px 10px; display:flex; flex-direction:column; gap:8px; min-width:0;}
.tool-wait{margin:0; color:var(--text-muted); font-size:0.8rem;}
.tool-note{margin:0; font-size:0.76rem; color:var(--text-muted); line-height:1.45;}
.tool-note.bad{color:#fca5a5;}
.tool-note .btn-preset{margin-left:6px; padding:2px 9px;}
.tool-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:6px;}
.tool-grid > div{background:var(--bg-base); border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:5px 8px; min-width:0; display:flex; flex-direction:column; gap:1px;}
.tool-grid span{font-size:0.68rem; color:var(--text-muted); font-weight:600;}
.tool-grid b{font-family:var(--font-mono); font-size:0.86rem; color:#fff; overflow-wrap:anywhere;}
.tool-grid b small{color:var(--text-muted); font-weight:600;}
.tool-grid > div > small{font-size:0.66rem; color:var(--text-muted);}
.tool-links{display:flex; flex-wrap:wrap; gap:4px 14px; margin:0; font-size:0.78rem;}
.lc-key{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--c); margin:0 4px 0 2px; vertical-align:-1px;}
.lc-key.ring{background:none; border:2px solid #fff;}
.lc-key.dash{width:14px; height:0; border-radius:0; border-top:2px dashed #cbd5e1; background:none; vertical-align:3px;}
/* charts in tool cards */
.pp-chart,.lc-chart,.plan-chart,.gal-map{display:block; width:100%; height:auto; border-radius:8px; background:#050913;}
.pp-chart{cursor:pointer;}
.pp-bg{fill:#050913;}
.pp-line{stroke-width:1; fill:none;}
.pp-line.b{stroke:rgba(167,139,250,0.35); stroke-dasharray:3 3;}
.pp-line.a{stroke:rgba(45,212,191,0.3); stroke-dasharray:1 3;}
.pp-death{fill:none; stroke:rgba(248,113,113,0.5); stroke-width:1.4;}
.pp-lab{font-size:8px; font-family:var(--font-mono);}
.pp-lab.b{fill:rgba(196,181,253,0.75);} .pp-lab.a{fill:rgba(94,234,212,0.7);} .pp-lab.d{fill:rgba(252,165,165,0.8);}
.pp-pts{fill:none; stroke-linecap:round;}
.pp-pts.normal{stroke:rgba(125,211,252,0.55); stroke-width:2.4;}
.pp-pts.binary{stroke:rgba(94,234,212,0.8); stroke-width:2.6;}
.pp-pts.msp{stroke:rgba(196,181,253,0.85); stroke-width:2.6;}
.pp-pts.magnetar{stroke:#fbbf24; stroke-width:3.4;}
.pp-sel{fill:none; stroke:#fff; stroke-width:2;}
.pp-sel-dot{fill:#fff;}
.pp-tick{stroke:rgba(148,163,184,0.5);}
.pp-ax{fill:var(--text-muted); font-size:9px; font-family:var(--font-mono);}
.pp-ax.t{font-family:var(--font-body); font-size:9.5px;}
.lc-grid{stroke:rgba(148,163,184,0.13);}
.lc-err{stroke-width:1; opacity:0.55;}
.pl-day{fill:rgba(56,189,248,0.16);} .pl-civil{fill:rgba(56,189,248,0.1);} .pl-naut{fill:rgba(99,102,241,0.08);} .pl-astro{fill:rgba(99,102,241,0.04);} .pl-night{fill:#050913;}
.pl-obj{fill:none; stroke:#fbbf24; stroke-width:2;}
.pl-moon{fill:none; stroke:#cbd5e1; stroke-width:1.4; stroke-dasharray:4 3;}
.pl-best{fill:#fbbf24; stroke:#050913; stroke-width:1.5;}
.pl-now{stroke:#fff; stroke-width:1.2; opacity:0.8;}
.pl-horizon{stroke:rgba(148,163,184,0.5);}
.plan-sw{display:inline-block; width:12px; height:9px; border-radius:2px; vertical-align:-1px; margin:0 4px 0 6px; border:1px solid rgba(148,163,184,0.3);}
.plan-sw.night{background:#050913;} .plan-sw.twi{background:rgba(56,189,248,0.2);}
.plan-lines{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; font-size:0.8rem; color:var(--text-sub);}
.plan-lines i{width:16px; text-align:center; color:var(--text-muted); margin-right:4px;}
.plan-lines b{color:#fff;}
.gal-map{max-width:340px; margin:0 auto;}
.gal-arm{fill:none; stroke:rgba(196,181,253,0.28); stroke-width:9; stroke-linecap:round;}
.gal-bar{fill:rgba(253,230,138,0.35);}
.gal-centre{fill:#fde68a;}
.gal-sun{fill:#facc15; stroke:#050913; stroke-width:1.5;}
.gal-obj{fill:#22d3ee; stroke:#050913; stroke-width:1.5;}
.gal-ray{stroke:rgba(34,211,238,0.6); stroke-width:1.4; stroke-dasharray:4 3;}
.gal-scale{stroke:var(--text-muted); stroke-width:1.5;}
.gal-lab{fill:var(--text-muted); font-size:9px; font-family:var(--font-body);}
.gal-lab.sun{fill:#facc15;} .gal-lab.obj{fill:#a5f3fc; font-size:10.5px; font-weight:700; paint-order:stroke; stroke:#050913; stroke-width:3px;}
.light-story{font-size:0.82rem; color:var(--text-sub); background:var(--bg-base); border-left:3px solid #22d3ee; border-radius:var(--radius-sm); padding:7px 10px; line-height:1.45;}
.light-story b{color:#fff;}
.facts-type{font-size:0.78rem; color:#c4b5fd; display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px;}
.facts-type i{font-size:0.6rem; color:var(--text-muted);}
.facts-mags{display:flex; flex-wrap:wrap; gap:4px;}
.facts-mags span{font-family:var(--font-mono); font-size:0.8rem; color:#fff; background:var(--bg-base); border:1px solid var(--border-color); border-radius:6px; padding:2px 7px;}
.facts-mags small{color:var(--text-muted); margin-right:4px;}
.facts-wiki{margin:0; font-size:0.8rem; color:var(--text-sub); border-left:3px solid var(--border-glow); padding:4px 10px; line-height:1.45;}
.facts-papers ul{margin:4px 0 0; padding-left:18px; font-size:0.78rem; display:flex; flex-direction:column; gap:3px;}
.facts-papers small{color:var(--text-muted);}
.near-radius{display:flex; flex-wrap:wrap; gap:5px;}
.near-radius .chip{padding:2px 10px;}
.near-table{font-size:0.78rem;}
.near-table td,.near-table th{padding:5px 6px;}
.near-table tbody tr{cursor:pointer;}
.near-table tbody tr:hover,.near-table tbody tr:focus-visible{background:rgba(34,211,238,0.08); outline:none;}
.psr-sound .sound-head .sound-cap{flex:1;}

/* night-sky backdrop; the stars themselves are drawn by monitor.js from a real catalog */
.sky-arena{background:
  radial-gradient(ellipse at 50% 115%,rgba(30,48,92,0.55) 0%,rgba(30,48,92,0) 60%),
  radial-gradient(ellipse at center,#0a1124 0%,#050913 70%,#02040a 100%);}

.mark{cursor:pointer;}
.mark:focus-visible{outline:2px solid var(--primary); outline-offset:3px;}
.sat-dot{filter:drop-shadow(0 0 5px rgba(56,189,248,0.85));}

.legend{display:flex; gap:6px 8px; flex-wrap:wrap; font-size:0.76rem; color:var(--text-muted);}
.legend > span{display:inline-flex; align-items:center; gap:6px; background:var(--bg-base); border:1px solid var(--border-color); border-radius:999px; padding:2px 10px;}
.legend > span.mark:hover{border-color:var(--primary); color:#fff;}
.legend i.sw{width:9px; height:9px; border-radius:50%; display:inline-block;}

/* pickers (preset buttons) */
.picker{display:flex; flex-wrap:wrap; gap:6px;}
.btn-preset{background:var(--bg-base); border:1px solid var(--border-color); color:var(--text-muted); border-radius:var(--radius-sm);
  padding:5px 11px; font-family:var(--font-body); font-size:0.82rem; font-weight:600; cursor:pointer; transition:var(--transition-smooth);}
.btn-preset:hover{color:#fff; border-color:var(--primary); background:rgba(56,189,248,0.08);}
.btn-preset.active{background:rgba(56,189,248,0.18); border-color:var(--primary); color:var(--primary);}

/* detail readouts */
.detail{display:flex; flex-direction:column; gap:10px; min-width:0;}
.metric-board{background:rgba(10,15,28,0.85); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:10px 14px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; box-shadow:0 8px 24px rgba(0,0,0,0.35);}
.mb-head{min-width:0; display:flex; flex-direction:column; gap:4px; align-items:flex-start;}
.mb-head .name{font-family:var(--font-display); font-weight:700; font-size:1.08rem; color:#fff; line-height:1.2;}
.type-pill{font-family:var(--font-display); font-size:0.78rem; font-weight:700; padding:2px 10px; border-radius:999px;
  background:rgba(56,189,248,0.12); border:1px solid var(--border-glow); color:var(--primary);}
.type-pill.sky{background:rgba(167,139,250,0.12); border-color:rgba(167,139,250,0.35); color:#c4b5fd;}
.type-pill.warning{background:rgba(234,179,8,0.14); border-color:rgba(234,179,8,0.4); color:#facc15;}
.type-pill.serious{background:rgba(249,115,22,0.14); border-color:rgba(249,115,22,0.45); color:#fb923c;}
.type-pill.critical{background:rgba(239,68,68,0.18); border-color:rgba(239,68,68,0.5); color:#f87171;}
.type-pill.minor{background:rgba(34,197,94,0.14); border-color:rgba(34,197,94,0.4); color:#4ade80;}
.metric-hero{display:flex; align-items:baseline; gap:5px; line-height:1;}
.metric-val{font-family:var(--font-mono); font-size:2.1rem; font-weight:900; color:#fff; letter-spacing:-1px; font-variant-numeric:tabular-nums;}
.metric-val.text{font-size:1.15rem; font-weight:700; letter-spacing:0;}
.metric-unit{font-family:var(--font-display); font-size:1.05rem; font-weight:800; color:var(--primary);}
.metric-cap{display:block; font-size:0.7rem; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:var(--text-muted); text-align:right; margin-top:4px;}
.metric-val.warning{color:#facc15;} .metric-val.serious{color:#fb923c;} .metric-val.critical{color:#f87171;} .metric-val.minor{color:#4ade80;}

.stat-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
.stat-card{background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:7px 11px; min-width:0;}
.stat-title{font-size:0.74rem; color:var(--text-muted); font-weight:600; display:flex; align-items:center; gap:6px;}
.stat-title i{color:var(--primary); width:12px; text-align:center;}
.stat-val{font-family:var(--font-mono); font-size:0.95rem; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;}
.stat-val small{font-weight:600; color:var(--text-muted); font-size:0.74rem;}
.note{font-size:0.86rem; color:var(--text-sub); background:var(--bg-card); border:1px solid var(--border-color); border-left:3px solid var(--primary);
  border-radius:var(--radius-sm); padding:8px 12px;}
.note.search{border-left-color:#fbbf24;}
.note.sn{border-left-color:#fb923c;}
.note.gw{border-left-color:#2dd4bf;}
.note.grb{border-left-color:#f472b6;}
.type-pill.grb{background:rgba(244,114,182,0.14); border-color:rgba(244,114,182,0.45); color:#f9a8d4;}
.metric-val.grb{color:#f9a8d4;}
/* SETI candidate signals */
.note.seti{border-left-color:#a3e635;}
.note.seti small{color:var(--text-muted);}
.note.seti-verdict{border-left-color:#94a3b8;}
.note.seti-verdict.interference{border-left-color:#f87171;}
.note.seti-verdict.unexplained{border-left-color:#fbbf24;}
.note.seti-verdict a{white-space:nowrap;}
.type-pill.seti{background:rgba(163,230,53,0.12); border-color:rgba(163,230,53,0.45); color:#d9f99d;}
.type-pill.seti.interference{background:rgba(248,113,113,0.12); border-color:rgba(248,113,113,0.45); color:#fecaca;}
.type-pill.seti.unexplained{background:rgba(251,191,36,0.12); border-color:rgba(251,191,36,0.45); color:#fde68a;}
.metric-val.seti{color:#d9f99d;}
.sound-card{background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:10px; display:flex; flex-direction:column; gap:8px;}
.sound-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.sound-play{display:inline-flex; align-items:center; gap:7px; color:#d9f99d; border-color:rgba(163,230,53,0.5);}
.sound-play[aria-pressed="true"]{background:rgba(163,230,53,0.14);}
.sound-speed{flex:1 1 auto;}
.sound-speed .panel-tab{font-size:0.76rem; padding:5px 8px; white-space:nowrap;}
.sound-sketch{display:block; width:100%; height:auto; border-radius:8px;}
.sound-sketch .sk-bg{fill:#050913;}
.sound-sketch .sk-sig{stroke:#a3e635; stroke-width:2.2; stroke-linecap:round; filter:drop-shadow(0 0 3px rgba(163,230,53,0.7));}
.sound-sketch .sk-on{fill:rgba(163,230,53,0.08);}
.sound-sketch .sk-off{fill:rgba(148,163,184,0.06);}
.sound-sketch .sk-burst{fill:rgba(163,230,53,0.35);}
.sound-sketch .sk-txt{fill:var(--text-muted); font-size:9px; font-family:var(--font-mono); text-anchor:middle;}
.sound-sketch .sk-axis{fill:var(--text-muted); font-size:9px; font-family:var(--font-mono);}
.sound-sketch .sk-grid{stroke:rgba(148,163,184,0.15); stroke-width:1;}
.sound-sketch .sk-bar{fill:rgba(163,230,53,0.55);}
.sound-sketch .sk-code{fill:#d9f99d; font-size:12px; font-weight:700; font-family:var(--font-mono); text-anchor:middle;}
.sound-sketch .sk-fit{fill:none; stroke:#fbbf24; stroke-width:1.6; stroke-dasharray:4 3;}
.sound-sketch .sk-cursor{stroke:#fff; stroke-width:1.2; opacity:0.85;}
.sound-cap{margin:0; font-size:0.74rem; color:var(--text-muted); line-height:1.4;}
.seti-table .data-table{font-size:0.78rem;}
.seti-table .data-table td,.seti-table .data-table th{padding:5px 6px;}
.type-pill.bh{background:rgba(245,158,11,0.14); border-color:rgba(245,158,11,0.45); color:#fcd34d;}
.bh-dot:hover,.bh-dot:focus-visible{filter:drop-shadow(0 0 5px rgba(245,158,11,0.9));}
.grb-dot:hover,.grb-dot:focus-visible{filter:drop-shadow(0 0 4px rgba(244,114,182,0.9));}
.type-pill.gw{background:rgba(45,212,191,0.14); border-color:rgba(45,212,191,0.45); color:#5eead4;}
.metric-val.gw{color:#5eead4;}
.gw-dot:hover,.gw-dot:focus-visible{filter:drop-shadow(0 0 4px rgba(45,212,191,0.9));}
.img-frame.contain{background:#fff; aspect-ratio:2/1;}
.img-frame.contain img{object-fit:contain;}
.class-bars{background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:8px 11px; display:flex; flex-direction:column; gap:4px;}
.cbar{display:grid; grid-template-columns:minmax(0,170px) 1fr 52px; align-items:center; gap:8px; font-size:0.8rem; color:var(--text-sub);}
.cbar i{display:block; height:7px; border-radius:4px; background:linear-gradient(90deg,#2dd4bf var(--w),rgba(148,163,184,0.15) var(--w));}
.cbar b{font-family:var(--font-mono); text-align:right; color:#fff; font-weight:700;}
.type-pill.sn{background:rgba(251,146,60,0.14); border-color:rgba(251,146,60,0.45); color:#fdba74;}
.metric-val.sn{color:#fdba74;}
.sn-dot{opacity:0.85;}
.sn-dot:hover,.sn-dot:focus-visible{opacity:1; filter:drop-shadow(0 0 4px rgba(251,146,60,0.9));}
.type-pill.search{background:rgba(251,191,36,0.14); border-color:rgba(251,191,36,0.45); color:#fcd34d;}

/* deep-sky search box (in the card title row) */
.sky-search{flex:1 1 280px; max-width:460px; display:flex; align-items:center; gap:6px; margin:0 8px; position:relative;}
.sky-search > i{position:absolute; left:10px; color:var(--text-muted); font-size:0.8rem; pointer-events:none;}
.sky-search input{flex:1; min-width:0; background:var(--bg-base); color:#fff; border:1px solid var(--border-color); border-radius:var(--radius-sm);
  padding:6px 10px 6px 30px; font:inherit; font-size:0.86rem;}
.sky-search input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 2px var(--border-glow);}
.search-msg{flex:none; margin:0;}
.sky-suggest{position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30; margin:0; padding:4px; list-style:none; max-height:360px; overflow-y:auto;
  background:var(--bg-surface); border:1px solid var(--border-color); border-radius:var(--radius-sm); box-shadow:0 10px 28px rgba(0,0,0,0.5); scrollbar-width:thin;}
.sky-suggest[hidden]{display:none;}
.sky-suggest .sg-head{padding:7px 9px 8px; font-size:0.78rem; color:var(--text-muted); line-height:1.4; border-bottom:1px solid var(--border-color); margin-bottom:3px;}
.sky-suggest .sg-head b{color:#fde68a;}
.sky-suggest .sg-item{display:grid; grid-template-columns:18px auto 1fr; align-items:baseline; gap:2px 8px; padding:6px 9px; border-radius:6px; cursor:pointer; font-size:0.86rem; color:var(--text-sub);}
.sky-suggest .sg-item i{color:var(--text-muted); font-size:0.78rem;}
.sky-suggest .sg-item b{color:#fff; font-weight:600; white-space:nowrap;}
.sky-suggest .sg-item small{color:var(--text-muted); font-size:0.76rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sky-suggest .sg-item:hover,.sky-suggest .sg-item.active{background:rgba(167,139,250,0.14);}
.sky-suggest .sg-item.active b{color:#ddd6fe;}
.search-msg .btn-preset{margin-left:6px; padding:3px 10px;}
.sky-search .btn-preset{min-width:44px; justify-content:center;}   /* same width as Go while it shows the spinner */
.sky-search .btn-preset.busy{cursor:progress; color:#fbbf24; border-color:rgba(251,191,36,0.5);}

/* deep-sky legend: filter chips */
.chip{display:inline-flex; align-items:center; gap:6px; background:var(--bg-base); border:1px solid var(--border-color); border-radius:999px;
  padding:2px 10px; font:inherit; font-size:0.76rem; color:var(--text-muted); cursor:pointer; opacity:0.55; transition:var(--transition-smooth);}
.chip.on{opacity:1; color:var(--text-sub); border-color:rgba(167,139,250,0.4);}
.chip:hover{color:#fff; border-color:var(--primary);}
.chip:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}

/* deep-sky side panel: Details | All sources */
.panel-tabs{display:flex; gap:4px; background:var(--bg-base); border:1px solid var(--border-color); border-radius:10px; padding:3px; flex:none;}
.panel-tab{flex:1; background:transparent; border:0; border-radius:7px; padding:6px 10px; font:inherit; font-size:0.84rem; font-weight:600; color:var(--text-muted); cursor:pointer;}
.panel-tab:hover{color:#fff;}
.panel-tab.active{background:rgba(167,139,250,0.16); color:#ddd6fe; box-shadow:inset 0 0 0 1px rgba(167,139,250,0.35);}
.panel-tab .count{font-family:var(--font-mono); font-size:0.72rem; opacity:0.8;}
.panel-tab:focus-visible{outline:2px solid var(--primary); outline-offset:1px;}
.detail[hidden]{display:none;}

/* "Up in my sky now?" */
.vis-card{background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:7px 11px;}
.vis-body{font-weight:600; font-size:0.9rem; margin-top:2px;}
.vis-body small{font-weight:500; color:var(--text-muted);}
.vis-up{color:#4ade80;} .vis-down{color:var(--text-muted);} .vis-none{color:var(--text-muted); font-weight:500;}

/* settings: location */
.location-row{justify-content:flex-start;}
.num-field{display:inline-flex; align-items:center; gap:8px; font-size:0.86rem; color:var(--text-sub);}
.num-field input{width:110px; background:var(--bg-base); color:#fff; border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:6px 10px; font:inherit;}
.obs-status{font-size:0.84rem; color:var(--text-muted);}

/* image card (selected deep-sky source or search result) */
.image-card{background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:8px; display:flex; flex-direction:column; gap:6px;}
.img-tabs{display:flex; gap:4px;}
.img-tab{background:transparent; border:1px solid transparent; color:var(--text-muted); border-radius:6px; padding:3px 10px; font:inherit; font-size:0.78rem; font-weight:600; cursor:pointer;}
.img-tab:hover{color:#fff;}
.img-tab.active{background:rgba(167,139,250,0.16); border-color:rgba(167,139,250,0.4); color:#ddd6fe;}
.img-tab.static{cursor:default; color:var(--text-sub);}
.img-pane{display:none; margin:0;}
.img-pane.active{display:flex; flex-direction:column; gap:5px;}
.img-frame{position:relative; aspect-ratio:16/10; background:#02040a; border-radius:8px; overflow:hidden;}
.img-frame img{width:100%; height:100%; object-fit:cover; display:block;}
.img-frame.failed img{display:none;}
.img-frame.failed::after{content:"Image unavailable right now"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:0.82rem;}
.img-cross{position:absolute; left:50%; top:50%; width:26px; height:26px; transform:translate(-50%,-50%); border:1.5px solid rgba(251,191,36,0.85); border-radius:50%; pointer-events:none;}
.img-fov{position:absolute; right:6px; bottom:6px; font-family:var(--font-mono); font-size:0.66rem; font-weight:700; color:#e2e8f0; background:rgba(2,4,10,0.7); padding:1px 6px; border-radius:4px;}
.image-card figcaption{font-size:0.74rem; color:var(--text-muted); line-height:1.35;}
/* image carousel */
.carousel:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}
.car-viewport{position:relative; touch-action:pan-y;}
.car-slide{display:none; margin:0;}
.car-slide.active{display:block; animation:carFade 0.25s ease;}
@keyframes carFade{from{opacity:0.35;} to{opacity:1;}}
.car-slide .img-frame img{cursor:zoom-in; transition:opacity 0.3s ease;}
/* spinner until the image has loaded */
.img-spin{display:none; position:absolute; inset:0; z-index:1; align-items:center; justify-content:center; font-size:1.6rem; color:#a78bfa; pointer-events:none;}
.img-frame.loading .img-spin,.lb-frame.loading .img-spin{display:flex;}
.img-frame.loading img,.lb-frame.loading img{opacity:0;}
.lb-frame{position:relative; min-width:min(60vw, 600px); min-height:300px; display:flex; align-items:center; justify-content:center;}
.lb-frame img{transition:opacity 0.3s ease;}
.lb-frame.failed img{display:none;}
.lb-frame.failed::after{content:"Image unavailable right now"; color:#94a3b8; font-size:0.9rem;}
.car-slide .img-frame.photo img{object-fit:contain;}   /* photos keep their whole frame; survey views fill */
.car-nav,.car-zoom{position:absolute; z-index:2; border:0; color:#fff; background:rgba(2,6,16,0.6); cursor:pointer; display:flex; align-items:center; justify-content:center;}
.car-nav{top:50%; width:32px; height:32px; margin-top:-16px; border-radius:50%; font-size:0.85rem; opacity:0.85;}
.car-nav.prev{left:6px;} .car-nav.next{right:6px;}
.car-nav:hover,.car-zoom:hover{background:rgba(124,58,237,0.75); opacity:1;}
.car-zoom{top:6px; right:6px; width:28px; height:28px; border-radius:6px; font-size:0.78rem;}
.car-count{position:absolute; left:6px; top:6px; z-index:2; font-family:var(--font-mono); font-size:0.66rem; font-weight:700; color:#e2e8f0; background:rgba(2,4,10,0.7); padding:1px 6px; border-radius:4px;}
.car-loading{position:absolute; left:6px; bottom:6px; z-index:2; font-size:0.68rem; color:#e2e8f0; background:rgba(2,4,10,0.7); padding:2px 7px; border-radius:4px;}
.car-dots{display:flex; justify-content:center; gap:6px;}
.car-dot{width:8px; height:8px; padding:0; border-radius:50%; border:0; background:rgba(148,163,184,0.45); cursor:pointer;}
.car-dot.active{background:#a78bfa; transform:scale(1.25);}
.car-cap a{white-space:nowrap;}
/* large view */
body.lb-open{overflow:hidden;}
.lightbox{position:fixed; inset:0; z-index:100; background:rgba(2,4,10,0.92); display:flex; align-items:center; justify-content:center; gap:10px; padding:20px;}
.lightbox[hidden]{display:none;}
.lightbox figure{margin:0; max-width:min(1400px, 88vw); max-height:92vh; display:flex; flex-direction:column; align-items:center; gap:8px;}
.lightbox img{max-width:100%; max-height:calc(92vh - 60px); object-fit:contain; border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,0.6);}
.lightbox figcaption{font-size:0.82rem; color:#cbd5e1; text-align:center; max-width:900px;}
.lightbox figcaption a{color:#c4b5fd;}
.lb-count{font-family:var(--font-mono); color:#94a3b8; margin-left:6px;}
.lb-close,.lb-nav{border:0; color:#fff; background:rgba(255,255,255,0.1); cursor:pointer; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.lb-close{position:absolute; top:14px; right:16px; width:38px; height:38px; font-size:1.1rem;}
.lb-nav{flex:none; width:44px; height:44px; font-size:1rem;}
.lb-nav[hidden]{display:none;}
.lb-close:hover,.lb-nav:hover{background:rgba(124,58,237,0.7);}
@media (max-width:640px){ .lb-nav{position:absolute; bottom:18px;} .lb-nav.prev{left:30%;} .lb-nav.next{right:30%;} }
.note.sky{border-left-color:var(--accent-sky);} .note.flare{border-left-color:var(--warn);} .note.bad{border-left-color:var(--critical);}

.tooltip{position:fixed; pointer-events:none; background:var(--bg-card); border:1px solid var(--border-glow); border-radius:6px; padding:5px 9px;
  font-size:0.78rem; font-family:var(--font-mono); color:#fff; z-index:40; transform:translate(-50%,-125%); white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,0.4);}
.tooltip[hidden]{display:none;}
.btn-icon{background:var(--bg-card); color:var(--text-sub); border:1px solid var(--border-color); border-radius:var(--radius-sm); width:34px; height:34px; cursor:pointer; font-size:1rem;}
.btn-icon:hover{color:#fff; border-color:var(--primary);}

/* ---------- chart pages (Deep-sky, Solar flares, Satellites): one card, big chart | readout ---------- */
@media (min-width:900px){
  .dash-single .card-body{flex-direction:row; align-items:flex-start;}
  .dash-single .viz-col{flex:1 1 0;}
  .dash-single .detail-col{flex:0 0 360px;}
}
@media (min-width:1600px){ .dash-single .detail-col{flex-basis:430px;} }

/* desktop with enough height: the card fills the space between header and footer, the chart scales to fit */
@media (min-width:1100px) and (min-height:620px){
  body.page-chart .app-main{height:100vh; height:100dvh; display:flex; flex-direction:column;}
  .dash{flex:1; min-height:0;}
  .dash .deck-card,.dash .card-body{min-height:0;}
  .dash .card-body{flex:1; align-items:stretch;}
  .dash-single .viz-col{justify-content:center; min-height:0;}
  .dash-single .display-arena{flex:0 1 auto; min-height:0;}   /* may shrink below its aspect ratio; the svg letterboxes */
  .dash .detail-col{overflow:auto; padding-right:2px; scrollbar-width:thin; scrollbar-color:#2a3a5e transparent;}
}
/* short desktop screens (e.g. 1366x768 laptops): tighten so the content gets the height */
@media (min-width:1100px) and (max-height:820px){
  .deck-card{padding:12px 14px; gap:10px;}
  .card-body,.viz-col,.detail-col,.detail{gap:8px;}
  .deck-section-title{padding-bottom:6px;}
  .metric-val{font-size:1.8rem;}
  .note{font-size:0.82rem; padding:6px 10px;}
}

/* Explore Deep Sky, newer layout (config monitor.deep_sky_layout 'below'): Facts and "What's around here?" in two
   columns under the map; the page scrolls and the details panel stays in view beside it */
.tool-stack:empty,.sky-below:empty,.below-col:empty{display:none;}
.below-col{display:flex; flex-direction:column; gap:10px; min-width:0;}
.sky-below{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:10px; align-items:start; min-width:0;}
.sky-below .tool-card[open] > .tool-body{max-height:min(520px,70vh); overflow:auto; scrollbar-width:thin; scrollbar-color:#2a3a5e transparent;}   /* a long list scrolls inside its card */
@media (min-width:900px){
  .sky-tools-below .dash-single .card-body{display:grid; grid-template-columns:minmax(0,1fr) 360px; grid-template-rows:auto 1fr; grid-template-areas:"viz detail" "below detail"; align-items:start;}
  .sky-tools-below .dash-single .viz-col{grid-area:viz;}
  .sky-tools-below .dash-single .sky-below{grid-area:below;}
  .sky-tools-below .dash-single .detail-col{grid-area:detail; position:sticky; top:calc(var(--header-h) + var(--gutter));
    max-height:calc(100vh - var(--header-h) - var(--footer-h) - 2 * var(--gutter)); overflow:auto; padding-right:2px; scrollbar-width:thin; scrollbar-color:#2a3a5e transparent;}
}
@media (min-width:1600px){ .sky-tools-below .dash-single .card-body{grid-template-columns:minmax(0,1fr) 430px;} }
@media (min-width:1100px) and (min-height:620px){ body.page-chart.sky-tools-below .app-main{height:auto; display:block;} }

/* ================= CONTENT PAGES ================= */
.page-stack{display:flex; flex-direction:column; gap:var(--gutter); max-width:1500px;}
.page-stack.narrow{max-width:1000px;}
/* wide screens: Settings/About cards flow into two balanced columns instead of leaving the right half empty */
@media (min-width:1400px){
  .page-stack.narrow{display:block; max-width:none; columns:2 520px; column-gap:var(--gutter);}
  .page-stack.narrow > *,.page-stack.narrow .settings-form > *{break-inside:avoid; margin-bottom:var(--gutter);}
  .page-stack.narrow .page-intro{column-span:all;}
  .page-stack.narrow .settings-form{display:contents;}
}
.page-intro h1{font-size:1.45rem; color:#fff; display:flex; align-items:center; gap:10px;}
.page-intro h1 i{color:var(--primary); font-size:1.15rem;}
.page-intro p{color:var(--text-muted); font-size:0.92rem; margin-top:4px;}

.prose{font-size:0.93rem; color:var(--text-sub);}
.prose h3{font-size:1rem; color:#fff; margin-top:6px;}
.prose ul,.prose ol{padding-left:20px; display:flex; flex-direction:column; gap:7px;}
.prose li ul{margin-top:6px;}
.prose b{color:#fff;}
.prose .src{font-size:0.8rem; color:var(--text-muted);}
.prose a .ext{font-size:0.65em; vertical-align:2px; opacity:0.7;}

/* sync status */
/* jobs: one accordion (shares .acc-panel with the User Guide & Data page); the job's state colours its icon */
.job-acc{display:flex; flex-direction:column; gap:8px;}
.job-panel > summary .acc-title{font-size:0.95rem;}
.job-panel > summary .acc-hint{visibility:visible !important; font-family:var(--font-mono); font-size:0.74rem;}
.job-panel .status-pill{flex:none; margin-left:auto;}   /* badge and arrow keep to the right edge, even when the row wraps */
.job-panel.st-success .job-ico{color:#4ade80;}
.job-panel.st-partial .job-ico,.job-panel.st-running .job-ico{color:#fb923c;}
.job-panel.st-failed .job-ico{color:#f87171;}
.job-panel.st-never .job-ico{color:var(--text-muted);}
.job-panel.st-failed{border-color:rgba(248,113,113,0.45);}
/* details left, schedule right, error note across the bottom (named areas, so a note can't push the form into an
   otherwise empty row of a many-column grid); details alone take the whole width when editing is off */
.job-body{display:grid; grid-template-columns:minmax(0, 1fr) minmax(300px, 440px); grid-template-areas:"kv form" "note note";
  gap:12px 32px; align-items:start; padding-top:12px;}
.job-body > .job-kv{grid-area:kv;}
/* wrapping tiles that grow to fill every row, including a part-filled last one (a grid would leave empty slots) */
.job-kv{display:flex; flex-wrap:wrap; gap:8px; margin:0;}
.job-kv > div{flex:1 1 180px; background:var(--bg-base); border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:7px 10px; min-width:0;}
.job-kv > div.wide{flex-basis:280px;}
.job-kv dt{font-size:0.72rem; color:var(--text-muted); font-weight:600; margin-bottom:2px;}
.job-kv dd{margin:0; color:#fff; font-family:var(--font-mono); font-weight:600; font-size:0.86rem; overflow-wrap:anywhere;}
.job-kv dd small{display:block; color:var(--text-muted); font-weight:500; font-size:0.72rem;}
.job-kv dd code{font-size:0.78rem;}
@media (max-width:520px){ .job-kv > div{flex-basis:140px;} .job-kv > div.wide{flex-basis:100%;} }   /* phones: two short tiles a row */
.job-body > .job-schedule{grid-area:form;}
.job-body > .note{grid-area:note;}
.job-body:not(:has(.job-schedule)){grid-template-columns:minmax(0, 1fr); grid-template-areas:"kv" "note";}
@media (max-width:900px){ .job-body{grid-template-columns:minmax(0, 1fr); grid-template-areas:"kv" "form" "note";} }
.job-schedule{display:flex; flex-direction:column; gap:8px; background:var(--bg-base); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:10px 12px;}
.job-schedule h3{margin:0; font-size:0.9rem; color:#fff; display:flex; align-items:center; gap:7px;}
.job-schedule h3 i{color:var(--primary);}
.job-schedule h3 small{color:var(--text-muted); font-weight:500;}
.sched-fields{display:flex; flex-wrap:wrap; gap:8px 12px;}
.sched-fields label{display:flex; flex-direction:column; gap:3px; font-size:0.74rem; color:var(--text-muted); font-weight:600;}
.sched-fields label[hidden]{display:none;}
.sched-fields select,.sched-fields input{background:var(--bg-card); color:#fff; border:1px solid var(--border-color); border-radius:6px; padding:5px 8px; font:inherit; font-size:0.84rem; color-scheme:dark;}
.sched-fields input[type=number]{width:80px;}
.job-schedule .settings-actions{gap:8px; flex-wrap:wrap;}
.btn-action-tool.busy{cursor:progress; opacity:0.85;}   /* saving: icon shows a spinner (monitor.js) */
.sched-fields .sched-save{align-self:flex-end;}   /* Save sits in the row, right after the time */
.sched-fields label.grow{flex:1 1 220px;}
.sched-fields label small{font-weight:500;}
.sched-fields input[type=text]{width:100%;}
.field-error{color:#fca5a5; font-size:0.74rem; font-weight:500;}
/* page title with a button on the right (Add New Job); the button drops under the text on narrow screens */
.intro-with-action{display:flex; align-items:flex-start; justify-content:space-between; gap:10px 16px; flex-wrap:wrap;}
.intro-with-action > div{flex:1 1 420px; min-width:0;}
.intro-with-action > .btn-action-tool{flex:none; margin-top:4px;}
.new-job[hidden]{display:none;}
/* scheduler heartbeat: is cron calling `php artisan schedule:run`? */
.scheduler-card{gap:6px; padding:12px 16px;}
.scheduler-card p{margin:0; color:var(--text-muted); font-size:0.85rem;}
.hb-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:#fff; font-size:0.95rem;}
.hb-when{color:var(--text-muted); font-size:0.78rem; font-family:var(--font-mono); margin-left:auto;}
.hb-running{border-color:rgba(74,222,128,0.35);}  .hb-running .hb-head i{color:#4ade80;}
.hb-slow{border-color:rgba(251,146,60,0.45);}     .hb-slow .hb-head i{color:#fb923c;}
.hb-stopped{border-color:rgba(248,113,113,0.5);}  .hb-stopped .hb-head i{color:#f87171;}
.hb-cron{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.hb-cron code{flex:1 1 300px; background:var(--bg-base); border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:7px 10px; font-size:0.8rem; overflow-wrap:anywhere; color:var(--text-sub);}
.hb-note{font-size:0.78rem !important;}
.new-job .job-schedule{background:transparent; border:0; padding:0;}
.opt-help{margin:0; font-size:0.76rem; color:var(--text-muted);}
.opt-help code{font-size:0.74rem; color:var(--text-sub);}
.job-added{font-size:0.62rem; font-weight:700; letter-spacing:0.05em; color:#c4b5fd; border:1px solid rgba(167,139,250,0.45); border-radius:999px; padding:1px 7px; margin-left:6px; vertical-align:2px;}
.btn-action-tool.btn-danger{color:#fca5a5; border-color:rgba(248,113,113,0.4);}
.btn-action-tool.btn-danger:hover{background:rgba(248,113,113,0.12);}
@media (max-width:640px){ .job-panel > summary .acc-hint{display:block; flex-basis:100%; order:3;} .job-panel > summary{flex-wrap:wrap;} }
.runs-filter{margin-left:auto;}
.runs-filter .panel-tab{flex:none;}
.runs-wrap{max-height:460px; overflow-y:auto;}
.runs-wrap thead th{position:sticky; top:0; background:var(--bg-surface);}
.deck-section-title .runs-filter + .deck-status{margin-left:0;}
@media (max-width:640px){ .deck-section-title:has(.runs-filter){flex-wrap:wrap;} }
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:0.88rem;}
.kv dt{color:var(--text-muted);}
.kv dd{color:#fff; font-family:var(--font-mono); font-weight:600; text-align:right; overflow-wrap:anywhere;}
.kv dd small{color:var(--text-muted); font-weight:500;}
.status-pill{display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:0.68rem; font-weight:800; letter-spacing:0.6px;
  padding:2px 9px; border-radius:999px; border:1px solid var(--border-color); color:var(--text-muted); white-space:nowrap;}
.status-pill.success{color:#4ade80; border-color:rgba(34,197,94,0.4); background:rgba(34,197,94,0.12);}
.status-pill.partial,.status-pill.running{color:#facc15; border-color:rgba(234,179,8,0.4); background:rgba(234,179,8,0.12);}
.status-pill.failed{color:#f87171; border-color:rgba(239,68,68,0.5); background:rgba(239,68,68,0.14);}
.txt-bad{color:#f87171;}
.table-wrap{overflow-x:auto;}
.data-table{width:100%; border-collapse:collapse; font-size:0.86rem;}
.data-table th{text-align:left; font-size:0.72rem; letter-spacing:0.6px; text-transform:uppercase; color:var(--text-muted); font-weight:700; padding:8px 10px; border-bottom:1px solid var(--border-color);}
.data-table td{padding:8px 10px; border-bottom:1px solid rgba(255,255,255,0.05); color:var(--text-sub); vertical-align:top;}
.data-table tr:hover td{background:rgba(56,189,248,0.04);}
.data-table .num{text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.data-table .nowrap{white-space:nowrap; font-family:var(--font-mono);}
.data-table .msg{max-width:420px; color:var(--text-muted); font-size:0.8rem;}
.empty{color:var(--text-muted);}

/* settings */
.settings-form{display:flex; flex-direction:column; gap:var(--gutter);}
.setting-row{display:flex; align-items:center; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; padding:4px 0;}
.setting-row + .setting-row{border-top:1px solid rgba(255,255,255,0.06); padding-top:12px;}
.setting-text{display:flex; flex-direction:column; min-width:220px; flex:1;}
.setting-text b{color:#fff; font-weight:600;}
.setting-text span{color:var(--text-muted); font-size:0.84rem;}
.segmented{display:inline-flex; background:var(--bg-base); border:1px solid var(--border-color); border-radius:10px; padding:3px; gap:3px;}
.segmented label{cursor:pointer;}
.segmented input{position:absolute; opacity:0; pointer-events:none;}
.segmented span{display:block; padding:6px 14px; border-radius:7px; font-size:0.86rem; font-weight:600; color:var(--text-muted); white-space:nowrap;}
.segmented span small{font-weight:500; opacity:0.8;}
.segmented input:checked + span{background:rgba(56,189,248,0.18); color:var(--primary); box-shadow:inset 0 0 0 1px var(--border-glow);}
.segmented input:focus-visible + span{outline:2px solid var(--primary); outline-offset:1px;}
.select{background:var(--bg-base); color:#fff; border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:7px 12px; font:inherit; font-size:0.9rem; min-width:240px;}
.switch{position:relative; display:inline-block; width:46px; height:26px; flex:none; cursor:pointer;}
.switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;}
.switch span{position:absolute; inset:0; background:#253049; border:1px solid var(--border-color); border-radius:999px; transition:var(--transition-smooth); pointer-events:none;}
.switch span::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#cbd5e1; transition:var(--transition-smooth);}
.switch input:checked + span{background:rgba(56,189,248,0.35); border-color:var(--primary);}
.switch input:checked + span::after{transform:translateX(20px); background:var(--primary);}
.switch input:focus-visible + span{outline:2px solid var(--primary); outline-offset:2px;}
.range-wrap{display:flex; align-items:center; gap:10px;}
.range-wrap input{accent-color:var(--primary); width:200px;}
.range-wrap output{font-family:var(--font-mono); font-weight:700; color:var(--primary); min-width:44px; text-align:right;}
.settings-actions{display:flex; justify-content:flex-end;}
/* the chart's markers inside text (x-map-icon), e.g. in the User guide */
.map-icon{width:1.05em; height:1.05em; vertical-align:-0.17em; margin-right:3px; overflow:visible; flex:none;}
/* accordion (User Guide & Data page): one panel open at a time, the open panel uses the full width */
.about-acc{display:flex; flex-direction:column; gap:8px;}
.acc-panel{padding:0; gap:0;}   /* no card gap: a closed panel's hidden content would otherwise add empty space */
.acc-panel > summary{list-style:none; display:flex; align-items:center; gap:12px; padding:13px 16px; cursor:pointer; border-radius:var(--radius-lg); user-select:none;}
.acc-panel > summary::-webkit-details-marker{display:none;}
.acc-panel > summary:hover{background:rgba(167,139,250,0.06);}
.acc-panel > summary:focus-visible{outline:2px solid var(--primary); outline-offset:-2px;}
.acc-title{display:flex; align-items:center; gap:9px; font-family:var(--font-display, inherit); font-size:1.02rem; font-weight:700; color:#fff; white-space:nowrap;}
.acc-hint{flex:1; min-width:0; font-size:0.8rem; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.acc-chevron{color:var(--text-muted); font-size:0.8rem; transition:transform 0.2s ease;}
.acc-panel[open] > summary{border-bottom:1px solid var(--border-color); border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
.acc-panel[open] > summary .acc-chevron{transform:rotate(180deg); color:var(--primary);}
.acc-panel[open] > summary .acc-hint{visibility:hidden;}
.acc-body{padding:4px 16px 14px;}
@media (max-width:640px){ .acc-hint{display:none;} }
/* the open panel spreads sideways instead of down: its text flows through balanced newspaper columns, as many
   as fit at 300px or wider (3 on a wide screen, 2 on a small laptop or tablet, 1 on a phone), all of equal height */
.acc-body ul.cols,.acc-body ol.cols,.guide-grid{columns:3 300px; column-gap:34px; column-rule:1px solid rgba(148,163,184,0.10);}
.acc-body ul.cols,.acc-body ol.cols,.guide-grid ul{display:block;}   /* block: .prose lists are flex, which ignores columns */
.acc-body .cols > li,.guide-grid li{break-inside:avoid; page-break-inside:avoid; margin-bottom:7px;}
.acc-body .cols li ul{display:block;}
.acc-body .cols > li:has(ul){break-inside:auto; page-break-inside:auto;}   /* a long item with a sub-list may continue in the next column */
.guide-grid h3{break-after:avoid; page-break-after:avoid; margin:14px 0 6px;}
.guide-grid .guide-block:first-child h3{margin-top:8px;}

/* server-wide settings (image cache) */
.server-settings{border-color:rgba(234,179,8,0.35);}
.server-tag{font-family:var(--font-mono); font-size:0.62rem; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:#fde68a;
  background:rgba(234,179,8,0.14); border:1px solid rgba(234,179,8,0.4); border-radius:999px; padding:1px 8px; margin-left:4px;}
.setting-note{margin:8px 0; font-size:0.84rem; color:var(--text-sub); line-height:1.5;}
.note.good{border-left-color:var(--good);}
/* flash alerts fade out after 3 s (monitor.js flashAlerts), then collapse */
.note.flash{overflow:hidden; transition:opacity 0.4s ease, max-height 0.4s ease 0.15s, padding 0.4s ease 0.15s, margin 0.4s ease 0.15s, border-width 0.4s ease 0.15s;}
.note.flash.gone{opacity:0; max-height:0 !important; padding-top:0; padding-bottom:0; margin-top:0; margin-bottom:0; border-top-width:0; border-bottom-width:0;}
.server-settings .settings-actions{margin-top:8px; gap:8px;}
.cache-readonly{margin:6px 0 2px 18px; font-size:0.86rem; color:var(--text-sub); line-height:1.6;}
.cache-readonly b{color:var(--text-main);}
.server-settings .num-field input{width:90px;}
.save-flash{color:#4ade80; font-weight:700; margin-left:8px;}
.save-flash[hidden]{display:none;}

/* ================= THE SUN PAGE (public/js/sun.js) ================= */
.sun-updated{color:var(--text-muted); font-size:0.8rem; margin-left:6px;}
.sun-chart{width:100%; height:auto; display:block; overflow:visible;}
.sun-chart .grid{stroke:rgba(148,163,184,0.12); stroke-width:1;}
.sun-chart .grid.day{stroke:rgba(148,163,184,0.25);}
.sun-chart .tick{fill:var(--text-muted); font-size:10px; font-family:var(--font-mono);}
.sun-chart .cross{stroke:rgba(255,255,255,0.45); stroke-width:1; stroke-dasharray:3 3; pointer-events:none;}
.sun-chart .cross-dot{fill:#fff; stroke:#0a0f1d; stroke-width:1.5; pointer-events:none;}
.sun-chart .thresh{stroke:rgba(248,113,113,0.7); stroke-dasharray:5 4; stroke-width:1;}
.chart-empty{fill:var(--text-muted); font-size:13px;}
.chart-box{background:radial-gradient(ellipse at top,#121a30 0%,#0b1120 100%); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:10px 8px 4px;}
.chart-note{color:var(--text-muted); font-size:0.78rem; margin:6px 2px 0; line-height:1.5;}
.chart-box{position:relative;}
.chart-box.loading > svg{opacity:0.45; transition:opacity 0.2s;}
.chart-box.loading::after{content:""; position:absolute; top:50%; left:50%; width:28px; height:28px; margin:-14px 0 0 -14px; border-radius:50%;
  border:3px solid rgba(251,191,36,0.25); border-top-color:#fbbf24; animation:spin 0.8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.chart-note .key{display:inline-block; width:14px; height:4px; border-radius:2px; background:var(--c); vertical-align:middle; margin-right:3px;}
.chart-note .key.tri{width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:8px solid #fb923c; border-radius:0; background:none;}
/* now: disk + gauge + tiles */
.sun-now-grid{display:grid; grid-template-columns:minmax(260px, 420px) minmax(0, 1fr); gap:18px; align-items:start;}
@media (max-width:860px){ .sun-now-grid{grid-template-columns:minmax(0, 1fr);} .sun-disk-wrap{max-width:420px; margin:0 auto;} }
.sun-disk-wrap{margin:0;}
.sun-disk-wrap svg{width:100%; height:auto; display:block;}
.sun-disk-wrap figcaption{color:var(--text-muted); font-size:0.74rem; text-align:center; margin-top:4px;}
.sun-corona{animation:corona 6s ease-in-out infinite; transform-origin:200px 200px;}
@keyframes corona{0%,100%{opacity:0.75; transform:scale(1);} 50%{opacity:1; transform:scale(1.035);}}
@media (prefers-reduced-motion:reduce){ .sun-corona{animation:none;} }
.disk-grid path{fill:none; stroke:rgba(124,45,18,0.28); stroke-width:0.8;}
.disk-grid path.eq{stroke:rgba(124,45,18,0.5);}
.disk-grid path.cm{stroke:rgba(124,45,18,0.55); stroke-dasharray:4 3;}
.disk-dir{fill:var(--text-muted); font-size:12px; font-weight:700;}
.disk-region{cursor:pointer; outline:none;}
.disk-region.sel ellipse,.disk-region.hot ellipse,.disk-region:focus ellipse{stroke:#fff; stroke-width:2.6;}
.disk-label{fill:#431407; font-size:10px; font-weight:800; font-family:var(--font-mono); paint-order:stroke; stroke:rgba(254,243,199,0.8); stroke-width:2.5px; pointer-events:none;}
.disk-flare{cursor:pointer; filter:drop-shadow(0 0 3px rgba(255,255,255,0.9));}
.disk-flare.X{animation:flash 1.6s ease-in-out infinite;}
@keyframes flash{50%{opacity:0.55;}}
.sun-now-side{display:flex; flex-direction:column; gap:12px; min-width:0;}
.xray-gauge-card{background:var(--bg-base); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:6px 10px 0;}
.xray-gauge-card svg{width:100%; max-width:380px; display:block; margin:0 auto;}
.gauge-l{fill:#e2e8f0; font-size:13px; font-weight:800;}
.gauge-val{font-size:34px; font-weight:800; font-family:var(--font-mono);}
.gauge-cap{fill:var(--text-muted); font-size:11px;}
.gauge-needle{stroke:#f8fafc; stroke-width:3.5; stroke-linecap:round; filter:drop-shadow(0 0 4px rgba(255,255,255,0.6)); transition:all 0.6s ease;}
.scale-row{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px;}
.scale-tile{background:var(--bg-base); border:1px solid var(--border-color); border-left:4px solid var(--sc); border-radius:var(--radius-sm); padding:7px 10px; display:flex; flex-direction:column; min-width:0;}
.scale-tile b{font-size:1.35rem; font-family:var(--font-mono); color:#fff; line-height:1.1;}
.scale-tile span{font-size:0.72rem; color:var(--text-sub); font-weight:600;}
.scale-tile small{font-size:0.7rem; color:var(--text-muted); text-transform:capitalize;}
.sun-tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:8px;}
.sun-tile{background:var(--bg-base); border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:8px 10px; display:grid; grid-template-columns:auto 1fr; column-gap:7px; align-items:center;}
.sun-tile i{color:var(--warn); grid-row:span 2;}
.sun-tile span{font-size:0.7rem; color:var(--text-muted); font-weight:600;}
.sun-tile b{font-size:1.1rem; font-family:var(--font-mono); color:#fff;}
.sun-tile b small{font-size:0.7rem; color:var(--text-muted); margin-left:3px; font-weight:600;}
.sun-tile.good b{color:#4ade80;} .sun-tile.warn b{color:#fbbf24;} .sun-tile.bad b{color:#f87171;}
.sun-tile.warn{border-color:rgba(251,191,36,0.4);} .sun-tile.bad{border-color:rgba(248,113,113,0.5);}
.sun-forecast{margin:0; font-size:0.84rem; color:var(--text-sub);}
.sun-forecast i{color:var(--warn); margin-right:4px;}
/* X-ray chart */
.band-l{font-size:12px; font-weight:800;}
.xr-long{fill:none; stroke:#f59e0b; stroke-width:1.8; filter:drop-shadow(0 0 3px rgba(245,158,11,0.5));}
.xr-short{fill:none; stroke:#60a5fa; stroke-width:1.1; opacity:0.75;}
.xr-flare{cursor:pointer;}
.xr-flare-l{font-size:10px; font-weight:800; font-family:var(--font-mono); paint-order:stroke; stroke:#0b1120; stroke-width:3px;}
.xr-now{fill:#fde68a; stroke:#f59e0b; stroke-width:2; animation:pulse-dot 1.8s ease-in-out infinite;}
@keyframes pulse-dot{50%{r:7; opacity:0.6;}}
/* regions table */
.region-table th.sortable{cursor:pointer; user-select:none;}
.region-table th.sorted{color:var(--warn);}
.region-table tbody tr{cursor:pointer;}
.region-table tbody tr.sel,.region-table tbody tr:hover{background:rgba(251,191,36,0.08);}
.abar{display:inline-block; width:60px; height:6px; background:rgba(148,163,184,0.15); border-radius:3px; vertical-align:middle; overflow:hidden;}
.abar i{display:block; height:100%; background:linear-gradient(90deg,#f59e0b,#f97316);}
.mag{font-family:var(--font-mono); font-weight:700; padding:1px 7px; border-radius:999px; background:rgba(148,163,184,0.12);}
.mag.gamma{background:rgba(251,146,60,0.15); color:#fdba74;}
.mag.delta{background:rgba(239,68,68,0.18); color:#fca5a5;}
.cb{display:inline-block; font-size:0.72rem; font-weight:700; padding:0 6px; border-radius:4px; margin-right:3px;}
.cb.C{background:rgba(74,222,128,0.15); color:#86efac;} .cb.M{background:rgba(251,146,60,0.18); color:#fdba74;} .cb.X{background:rgba(239,68,68,0.2); color:#fca5a5;}
.probs{white-space:nowrap;}
.pbar{display:inline-block; position:relative; width:46px; height:16px; background:rgba(148,163,184,0.1); border-radius:4px; margin-right:4px; overflow:hidden; vertical-align:middle;}
.pbar i{position:absolute; left:0; top:0; bottom:0; opacity:0.55;}
.pbar em{position:relative; font-style:normal; font-size:0.7rem; font-weight:700; color:#fff; padding-left:4px; line-height:16px;}
/* flare list */
.flare-filters{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-end; margin-bottom:10px;}
.flare-filters label{display:flex; flex-direction:column; gap:3px; font-size:0.74rem; color:var(--text-muted); font-weight:600;}
.flare-filters select,.flare-filters input[type=number]{background:var(--bg-base); color:#fff; border:1px solid var(--border-color); border-radius:6px; padding:5px 8px; font:inherit; font-size:0.84rem; color-scheme:dark;}
.flare-filters input[type=number]{width:120px;}
.flare-filters .segmented label{flex-direction:row;}
.flare-table tbody tr{cursor:pointer;}
.flare-table tbody tr:hover{background:rgba(251,191,36,0.07);}
.flare-table.loading{opacity:0.5;}
.cls-bar{display:inline-flex; align-items:center; gap:6px; min-width:140px;}
.cls-bar i{display:block; height:8px; border-radius:4px; width:0; max-width:80px; flex:none;}
.cls-bar b{font-family:var(--font-mono);}
.earthward{color:#38bdf8; font-size:0.8em;}
.flare-table td.src-ncei,.flare-table td.src-hek,.flare-table td.src-swpc{color:var(--text-muted); font-size:0.78rem;}
.pager{display:flex; align-items:center; justify-content:center; gap:12px; margin-top:8px; color:var(--text-muted); font-size:0.82rem;}
.flare-info{margin-top:12px; background:var(--bg-base); border:1px solid rgba(251,191,36,0.35); border-radius:var(--radius-md); padding:12px 14px; display:flex; flex-direction:column; gap:10px;}
.flare-info[hidden]{display:none;}
.fi-head{display:flex; align-items:center; gap:12px;}
.fi-head > div{flex:1; color:var(--text-sub); font-size:0.86rem;}
.fi-class{font-family:var(--font-mono); font-size:1.8rem; font-weight:800; color:var(--c); padding:2px 12px; border:2px solid var(--c); border-radius:10px; text-shadow:0 0 12px var(--c);}
.fi-grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(260px, 440px); gap:14px;}
@media (max-width:900px){ .fi-grid{grid-template-columns:minmax(0, 1fr);} }
.fi-facts{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:8px;}
.fi-facts div{display:flex; flex-direction:column; background:var(--bg-card); border-radius:var(--radius-sm); padding:6px 9px;}
.fi-facts span{font-size:0.7rem; color:var(--text-muted); font-weight:600;}
.fi-facts b{font-size:0.84rem; color:#fff; font-family:var(--font-mono);}
.fi-visual{display:flex; gap:10px; align-items:center;}
.fi-disk{width:110px; flex:none;}
.fi-curve{flex:1; min-width:0;}
.fi-curve .tick,.fi-disk .mini-l{fill:var(--text-muted); font-size:10px;}
.fi-span{fill:rgba(251,191,36,0.1);}
.mini-cm{stroke:rgba(124,45,18,0.5); stroke-dasharray:3 2;}
/* space weather */
.sw-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px;}
.sw-grid h3,.stat-charts h3,.sub-h{font-size:0.88rem; color:#fff; margin:0 0 6px;}
.sub-h{margin-top:14px;} .sub-h small{color:var(--text-muted); font-weight:500;}
.pr-line{fill:none; stroke:#4ade80; stroke-width:1.6;}
.sw-line{fill:none; stroke:#fbbf24; stroke-width:1.8;}
.bz-line{fill:none; stroke:#f472b6; stroke-width:1.2; opacity:0.85;}
.cme-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:8px;}
.cme{background:var(--bg-base); border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:8px 10px; font-size:0.8rem; color:var(--text-sub); display:flex; flex-direction:column; gap:5px;}
.cme.earth{border-color:rgba(248,113,113,0.5); box-shadow:inset 3px 0 0 #ef4444;}
.cme-top{display:flex; justify-content:space-between; gap:6px; color:#fff;}
.cme-tag{font-size:0.66rem; font-weight:800; color:#fecaca; background:rgba(239,68,68,0.2); padding:1px 7px; border-radius:999px; white-space:nowrap;}
.cme-speed{position:relative; height:18px; background:rgba(148,163,184,0.1); border-radius:4px; overflow:hidden;}
.cme-speed i{position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg,#f59e0b,#ef4444); opacity:0.5;}
.cme-speed span{position:relative; padding-left:6px; line-height:18px; font-size:0.74rem; color:#fff; font-weight:600;}
.cme small{color:var(--text-muted);}
/* cycle and statistics */
.cycle-toggles{display:flex; gap:16px; flex-wrap:wrap; font-size:0.8rem; color:var(--text-sub); margin-bottom:8px;}
.cyc-ssn{fill:none; stroke:rgba(253,230,138,0.55); stroke-width:1;}
.cyc-smooth{fill:none; stroke:#f59e0b; stroke-width:2.6; filter:drop-shadow(0 0 4px rgba(245,158,11,0.45));}
.cyc-pred{fill:none; stroke:#f472b6; stroke-width:2; stroke-dasharray:6 4;}
.cyc-band{fill:rgba(244,114,182,0.15);}
.cyc-f107{fill:none; stroke:#60a5fa; stroke-width:1.2; opacity:0.8;}
.cyc-flare{fill:rgba(248,113,113,0.45);}
.cyc-min{stroke:rgba(148,163,184,0.3); stroke-dasharray:2 4;}
.cyc-l{fill:var(--text-muted); font-size:10px; font-weight:700;}
.stat-charts{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px;}
.yr-c{fill:none; stroke:rgba(74,222,128,0.7); stroke-width:1.5;}
.fit{stroke:#f8fafc; stroke-width:1.2; stroke-dasharray:5 4; opacity:0.7;}
.bf-m{fill:none; stroke:rgba(251,146,60,0.55); stroke-width:3; stroke-linecap:round;}
.bf-x{fill:none; stroke:#ef4444; stroke-width:5.5; stroke-linecap:round;}
/* record flares and storms */
.sun-page .panel-tab{white-space:nowrap;}
/* the page's three tabs */
.sun-tabs{align-self:flex-start; max-width:100%; overflow-x:auto;}
.sun-tabs .panel-tab{font-size:0.92rem; padding:8px 16px; display:inline-flex; align-items:center; gap:7px;}
.sun-tabs .panel-tab i{color:var(--warn);}
.sun-panel{display:flex; flex-direction:column; gap:var(--gutter);}
.sun-panel[hidden]{display:none;}
.sun-page .deck-section-title{flex-wrap:wrap; gap:8px;}
.records-body{display:flex; flex-direction:row; gap:16px;}
.records-body .display-arena{max-width:760px;}
@media (max-width:980px){ .records-body{flex-direction:column;} }
.records-body .viz-col{flex:1 1 0; min-width:0;}
.records-body .detail-col{flex:0 0 340px;}
@media (max-width:980px){ .records-body .detail-col{flex:none;} }
.storm-line{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px 14px;}
.storm{position:relative; background:var(--bg-base); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:10px 30px 10px 12px; display:flex; flex-direction:column; gap:3px;}
.storm::before{content:""; position:absolute; right:12px; top:14px; width:10px; height:10px; border-radius:50%; background:#f59e0b; box-shadow:0 0 8px #f59e0b;}   /* severity dot, in the card's corner */
.storm.extreme{border-color:rgba(239,68,68,0.45);} .storm.extreme::before{background:#ef4444; box-shadow:0 0 10px #ef4444;}
.storm time{font-family:var(--font-mono); font-size:0.74rem; color:var(--warn);}
.storm b{color:#fff;}
.storm-class{font-size:0.72rem; color:#fca5a5; font-weight:700;}
.storm p{margin:2px 0 0; font-size:0.8rem; color:var(--text-sub); line-height:1.45;}
.sun-credits{font-size:0.74rem; color:var(--text-muted);}

/* ---------- large screens / TV ---------- */
@media (min-width:1800px){
  html{font-size:17px;}
  :root{--gutter:20px; --header-h:64px; --nav-w:240px;}
}
@media (min-width:2400px){ html{font-size:19px;} }
@media (max-width:520px){ .metric-val{font-size:1.9rem;} .range-wrap input{width:150px;} .select{min-width:0; width:100%;} }

/* ---------- outside services not responding (Explore Deep Sky; js/service-check.js) ---------- */
.svc-chip{display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:var(--radius-sm); cursor:pointer;
  font-family:var(--font-body); font-size:0.84rem; font-weight:600; color:#fdba74; border:1px solid rgba(249,115,22,0.5); background:rgba(249,115,22,0.14);}
.svc-chip:hover{background:rgba(249,115,22,0.24); color:#fff;}
.svc-chip:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}
.svc-chip[hidden]{display:none;}
.svc-dialog{margin:auto; width:min(max(70vw, 560px), calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0; border:1px solid rgba(249,115,22,0.45);
  border-radius:var(--radius-md); background:var(--bg-surface); color:var(--text-main); box-shadow:var(--shadow-card);}
.svc-dialog::backdrop{background:rgba(5,8,18,0.7);}
.svc-box{padding:20px 22px 18px;}
.svc-box h2{display:flex; align-items:center; gap:8px; font-size:calc(1.2rem - 1px); color:#fdba74; margin-bottom:8px;}
.svc-lead,.svc-end{color:var(--text-sub); font-size:calc(0.92rem - 1px);}
.svc-list{list-style:none; margin:10px 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr)); gap:6px;}
.svc-list li{background:var(--bg-card); border:1px solid var(--border-color); border-left:3px solid var(--serious); border-radius:var(--radius-sm); padding:6px 10px; font-size:0.84rem; line-height:1.3;}
.svc-list b{color:#fff;}
.svc-list code{word-break:break-all;}
.svc-list span{display:block; font-size:0.76rem; color:var(--text-sub); margin-top:2px;}
.svc-list code{font-size:0.72rem; padding:0 5px;}
.svc-list em{font-style:normal; color:var(--text-muted);}
.svc-list .svc-fb{color:var(--text-muted);}
.svc-at{font-size:calc(0.78rem - 1px); color:var(--text-muted); margin-top:6px;}
.svc-actions{display:flex; justify-content:flex-end; margin-top:12px;}
.svc-ok{min-width:96px; font-size:calc(0.84rem - 1px); justify-content:center; background:var(--primary); color:#06111f; border-color:var(--primary);}
.svc-ok:hover{background:#7dd3fc; color:#06111f;}
@media (max-width:420px){ .svc-chip span{display:none;} }

/* ---------- Space Observatories (js/observatories.js) ---------- */
.obs-hero{position:relative; overflow:hidden; border-radius:var(--radius-lg); border:1px solid var(--border-color); padding:26px 24px 20px;
  background:linear-gradient(100deg,rgba(10,15,29,0.96) 0%,rgba(10,15,29,0.78) 45%,rgba(10,15,29,0.35) 100%),var(--hero-img) center 30%/cover no-repeat,#0a0f1d;
  display:flex; flex-direction:column; gap:16px; box-shadow:var(--shadow-card);}
.obs-hero h1{font-size:1.9rem; color:#fff; display:flex; align-items:center; gap:12px;}
.obs-hero h1 i{color:var(--accent-sat); filter:drop-shadow(0 0 10px rgba(56,189,248,0.6));}
.obs-hero p{color:var(--text-sub); max-width:720px; margin-top:6px;}
.obs-stats{display:flex; flex-wrap:wrap; gap:10px;}
.obs-stat{background:rgba(19,28,49,0.78); backdrop-filter:blur(4px); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:8px 14px; min-width:110px;}
.obs-stat b{display:block; font-family:var(--font-mono); font-size:1.3rem; color:#fff; font-variant-numeric:tabular-nums; line-height:1.2;}
.obs-stat span{font-size:0.76rem; color:var(--text-muted);}
.obs-fresh{display:flex; flex-wrap:wrap; gap:8px;}
.obs-fresh .status-chip{display:inline-flex; align-items:center; gap:7px;}
.obs-tabs{align-self:flex-start; max-width:100%; overflow-x:auto;}
#lineView .panel-tab{white-space:nowrap; flex:none;}
.obs-tabs .panel-tab{font-size:0.92rem; padding:8px 16px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;}
.obs-tabs .panel-tab i{color:var(--accent-sat);}
.obs-layout{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:var(--gutter); align-items:start;}
.obs-main,.obs-panel{display:flex; flex-direction:column; gap:var(--gutter); min-width:0;}
.obs-panel[hidden]{display:none;}
.obs-aside{position:sticky; top:calc(var(--header-h) + 12px); background:var(--bg-surface); border:1px solid var(--border-color); border-radius:var(--radius-lg);
  padding:16px; box-shadow:var(--shadow-card); max-height:calc(100vh - var(--header-h) - var(--footer-h) - 24px); overflow-y:auto;}
.obs-chips{display:flex; flex-wrap:wrap; gap:6px;}
.obs-chip{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; cursor:pointer; font:inherit; font-size:0.8rem; font-weight:600;
  color:#fff; background:color-mix(in srgb,var(--c) 22%,transparent); border:1px solid color-mix(in srgb,var(--c) 60%,transparent);}
.obs-chip i{color:var(--c);}
.obs-chip span{font-family:var(--font-mono); font-size:0.72rem; opacity:0.8;}
.obs-chip.off{background:transparent; color:var(--text-muted); border-color:var(--border-color); text-decoration:line-through;}
.obs-chip:focus-visible,.obs-card:focus-visible,.obs-hit:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}
.obs-map-wrap{border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border-color); background:#0b1a33; box-shadow:inset 0 0 40px rgba(0,0,0,0.5);}
#obsMap{display:block; width:100%; height:auto;}
.obs-hit{cursor:pointer;}
.obs-hit:focus{outline:none;}
.obs-sun{pointer-events:none;}
.obs-note{font-size:0.82rem; color:var(--text-muted);}
.sun-dot{display:inline-block; width:10px; height:10px; border-radius:50%; background:radial-gradient(#fff7cc,#fbbf24); box-shadow:0 0 6px #fbbf24; vertical-align:-1px;}
.obs-chart{width:100%; height:auto; display:block;}
.obs-chart text{font-family:var(--font-body);}
.obs-space{background:radial-gradient(ellipse at center,#0c1630 0%,#050914 80%); border-radius:var(--radius-sm);}
.obs-halo{paint-order:stroke; stroke:#050914; stroke-width:3px; stroke-linejoin:round;}
.obs-detail{--c:var(--primary);}
.obs-photo{margin:0; border-radius:var(--radius-md); overflow:hidden; background:radial-gradient(ellipse at center,#16223f 0%,#050914 85%); border:1px solid var(--border-color);}
.obs-photo img{display:block; width:100%; height:210px; object-fit:contain;}
.obs-photo figcaption{font-size:0.68rem; color:var(--text-muted); padding:4px 8px; background:rgba(5,9,20,0.85);}
.obs-photo figcaption a{color:var(--text-muted);}
.obs-head h2{font-size:1.25rem; color:#fff; margin-top:6px;}
.obs-head p{font-size:0.84rem; color:var(--text-muted);}
.obs-pill{display:inline-flex; align-items:center; gap:6px; font-size:0.72rem; font-weight:700; letter-spacing:0.3px; text-transform:uppercase;
  color:var(--c); background:color-mix(in srgb,var(--c) 15%,transparent); border:1px solid color-mix(in srgb,var(--c) 45%,transparent); padding:2px 9px; border-radius:999px;}
.obs-hero-num{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; padding:10px 14px; border-radius:var(--radius-md);
  background:linear-gradient(120deg,color-mix(in srgb,var(--c) 18%,transparent),transparent); border:1px solid color-mix(in srgb,var(--c) 35%,transparent);}
.obs-hero-num b{font-family:var(--font-mono); font-size:2rem; color:#fff; font-variant-numeric:tabular-nums; line-height:1;}
.obs-hero-num span{color:var(--text-sub); font-weight:600;}
.obs-hero-num small{flex-basis:100%; color:var(--text-muted); font-size:0.74rem; text-transform:uppercase; letter-spacing:0.4px;}
.obs-stat-grid .stat-val{font-size:0.86rem;}
.obs-mini{background:radial-gradient(ellipse at top,#121a30 0%,#0b1120 100%); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:8px 8px 2px;}
.obs-mini h3{font-size:0.78rem; color:var(--text-muted); font-weight:600; margin:0 0 2px 4px;}
.obs-mini svg{display:block; width:100%; height:auto; overflow:visible;}
.obs-summary{font-size:0.9rem; color:var(--text-sub);}
.obs-measures{font-size:0.84rem; color:var(--text-sub);}
.obs-measures b{color:#fff;}
.obs-ondata,.obs-links{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.obs-ondata h3{flex-basis:100%; font-size:0.84rem; color:#fff;}
.obs-link{display:inline-flex; align-items:center; gap:6px; font-size:0.8rem; font-weight:600; text-decoration:none; color:#fff; padding:5px 10px; border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--c, var(--primary)) 18%,var(--bg-card)); border:1px solid color-mix(in srgb,var(--c, var(--primary)) 45%,transparent);}
.obs-link:hover{background:color-mix(in srgb,var(--c, var(--primary)) 32%,var(--bg-card));}
.obs-link i{font-size:0.7rem;}
.obs-fine{font-size:0.74rem; color:var(--text-muted);}
.obs-groups{display:flex; flex-direction:column; gap:var(--gutter);}
.obs-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px;}
.obs-card{display:flex; flex-direction:column; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-md); overflow:hidden; cursor:pointer;
  transition:var(--transition-smooth);}
.obs-card:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--c) 60%,transparent); box-shadow:0 10px 26px rgba(0,0,0,0.45);}
.obs-card.sel{border-color:var(--c); box-shadow:0 0 0 1px var(--c),0 10px 26px rgba(0,0,0,0.45);}
.obs-card-img{height:150px; background:radial-gradient(ellipse at center,#1a2747 0%,#050914 85%);}
.obs-card-img img{width:100%; height:100%; object-fit:contain; display:block; transition:transform 0.4s ease;}
.obs-card:hover .obs-card-img img{transform:scale(1.06);}
.obs-card-body{padding:10px 12px 12px; display:flex; flex-direction:column; gap:6px; flex:1;}
.obs-card-body h3{font-size:1.02rem; color:#fff;}
.obs-card-body p{font-size:0.8rem; color:var(--text-sub);}
.obs-card-body .obs-card-type{color:var(--c); font-weight:600;}
.obs-card .obs-links{margin-top:auto;}
.src-chip{display:inline-flex; align-items:center; gap:5px; font-size:0.72rem; font-weight:600; color:var(--text-sub); text-decoration:none;
  padding:2px 9px; border-radius:999px; border:1px solid var(--border-color); background:var(--bg-card); white-space:nowrap;}
.src-chip:hover{color:#fff; border-color:var(--accent-sat);}
.src-chip i{color:var(--accent-sat);}
@media (prefers-reduced-motion:reduce){ .obs-card,.obs-card-img img{transition:none;} .obs-card:hover{transform:none;} .obs-card:hover .obs-card-img img{transform:none;} }
@media (max-width:1100px){
  .obs-layout{grid-template-columns:minmax(0,1fr);}
  .obs-aside{position:static; max-height:none;}
}
@media (max-width:720px){ .obs-fresh .status-chip span{display:inline;} }
@media (max-width:600px){
  .obs-tabs{align-self:stretch; flex-wrap:wrap;}
  .obs-tabs .panel-tab{padding:7px 10px; font-size:0.86rem;}
  .obs-hero{padding:18px 16px;}
  .obs-hero h1{font-size:1.45rem;}
  .obs-stat{min-width:0; flex:1 1 calc(50% - 10px);}
}

/* User Guide: For Developers card */
.dev-hero{display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:16px 18px; margin:6px 0 14px;
  border:1px solid rgba(56,189,248,0.28); border-radius:var(--radius-lg);
  background:radial-gradient(circle at 0% 0%, rgba(56,189,248,0.14), transparent 55%), radial-gradient(circle at 100% 100%, rgba(167,139,250,0.16), transparent 55%), var(--bg-card);}
.dev-hero-text{flex:1 1 420px; min-width:0;}
.dev-hero h3{font-size:1.15rem; margin:0 0 6px;}
.dev-hero p{margin:0; line-height:1.6;}
.dev-cta{display:flex; flex-direction:column; gap:8px; flex:0 0 auto;}
.dev-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 16px; border-radius:var(--radius-md); font-weight:600; font-size:0.9rem;
  text-decoration:none; color:var(--text-main); border:1px solid var(--border-color); background:var(--bg-surface); white-space:nowrap;}
.dev-btn:hover,.dev-btn:focus-visible{border-color:var(--primary); color:#fff;}
.dev-btn.main{background:linear-gradient(135deg, #7c3aed, #0ea5e9); border-color:transparent; color:#fff; box-shadow:0 4px 16px rgba(14,165,233,0.25);}
.dev-btn.main:hover{filter:brightness(1.1);}
.dev-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(360px,100%), 1fr)); gap:12px; margin-bottom:12px;}
.dev-tile{display:flex; flex-direction:column; gap:6px; padding:13px 14px; border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--bg-card); min-width:0;}
.dev-tile:hover{border-color:rgba(167,139,250,0.45);}
.prose .dev-tile h3{margin:0; display:flex; align-items:center; gap:8px; font-size:0.98rem;}
.dev-tile p{margin:0; font-size:0.86rem; line-height:1.5;}
.prose ul.dev-eps{list-style:none; padding:0; margin:4px 0 0; display:flex; flex-wrap:wrap; gap:5px;}
.dev-eps code{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:0.74rem; color:#e2e8f0;
  background:rgba(15,23,42,0.7); border:1px solid rgba(148,163,184,0.18); border-radius:5px; padding:2px 7px; overflow-wrap:anywhere;}
.dev-eps .m{color:#4ade80; font-weight:700; font-size:0.66rem; letter-spacing:0.4px;}
@media (max-width:640px){ .dev-cta{flex-direction:row; flex-wrap:wrap; width:100%;} .dev-btn{flex:1 1 auto;} }