/* SkyView components. TWIN FILE: observatory/static/skyview.css and static/skyview.css
   (BruNet) must stay identical. Uses the holo tokens (--amber, --holo, --mono, --glow)
   that each page defines. WEST = amber, EAST = holo cyan. No looping animations. */
.sv-west { --sv: var(--amber); }
.sv-east { --sv: var(--holo); }

/* scope cards */
.sv-scopes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; }
.sv-scope { position: relative; padding: 12px 14px; border-radius: 6px; background: rgba(7, 10, 18, .88);
  border: 1px solid color-mix(in srgb, var(--sv) 30%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--sv) 7%, transparent) inset; }
.sv-scope::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: var(--sv); box-shadow: 0 0 10px var(--sv); }
.sv-scope.off { opacity: .6; }
.sv-scope header { display: flex; align-items: center; gap: 8px; font: 700 11px/1 var(--mono); letter-spacing: .2em; }
.sv-side { color: var(--sv); text-shadow: 0 0 10px color-mix(in srgb, var(--sv) 55%, transparent); font-size: 13px; }
.sv-model { color: #8fa6b6; letter-spacing: .08em; font-weight: 400; }
.sv-stage { margin-left: auto; padding: 3px 7px; border-radius: 3px; border: 1px solid rgba(143, 166, 182, .3); color: #8fa6b6; font-size: 10px; }
.sv-stage.st-stacking { color: #7fe0a0; border-color: rgba(127, 224, 160, .45); }
.sv-stage.st-slewing, .sv-stage.st-ready { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.sv-stage.st-offline, .sv-stage.st-unconfigured { color: #f19a9a; border-color: rgba(241, 154, 154, .35); }
.sv-tgt { margin: 10px 0 8px; min-height: 38px; }
.sv-tgt b { display: block; font: 700 18px/1.2 var(--mono); color: #eaf4fa; letter-spacing: .03em; }
.sv-tgt i { font: 11px var(--mono); color: #7a8c98; font-style: normal; }
.sv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sv-stats div { padding: 6px 8px; background: rgba(79, 227, 255, .04); border: 1px solid rgba(79, 227, 255, .08); border-radius: 4px; }
.sv-stats span { display: block; font: 700 8px/1 var(--mono); letter-spacing: .2em; color: #6c8494; }
.sv-stats b { display: block; margin-top: 4px; font: 700 14px/1 var(--mono); color: #d6ebf7; }
.sv-stats b small { color: #f19a9a; font-size: 10px; }
.sv-stats b.warn { color: #f19a9a; }
.sv-next { margin-top: 8px; font: 11px/1.4 var(--mono); color: #8fa6b6; }
.sv-next b { color: var(--sv); font-weight: 700; }
.sv-err { margin-top: 6px; font: 11px var(--mono); color: #f19a9a; }
.sv-ctl { display: flex; gap: 6px; margin-top: 10px; }
.sv-ctl select { flex: 1; min-width: 0; }

/* dome */
.sv-dome { width: 100%; max-width: 420px; display: block; margin: 0 auto; }
.sv-half-e { fill: color-mix(in srgb, var(--holo) 6%, transparent); }
.sv-half-w { fill: color-mix(in srgb, var(--amber) 6%, transparent); }
.sv-hz { fill: none; stroke: rgba(79, 227, 255, .45); stroke-width: 1.2; }
.sv-ring { fill: none; stroke: rgba(79, 227, 255, .12); }
.sv-floor { fill: none; stroke: rgba(241, 154, 154, .35); stroke-dasharray: 3 4; }
.sv-mer { stroke: rgba(234, 244, 250, .18); stroke-dasharray: 2 4; }
.sv-card { fill: #8fa6b6; font: 700 11px var(--mono); text-anchor: middle; }
.sv-lbl { font: 700 8px var(--mono); letter-spacing: .18em; }
.sv-lbl.e { fill: var(--holo); opacity: .7; }
.sv-lbl.w { fill: var(--amber); opacity: .7; text-anchor: end; }
.sv-trk { fill: none; stroke: var(--sv); stroke-width: 1.4; opacity: .35; stroke-dasharray: 4 4; }
.sv-trk.live { opacity: .95; stroke-width: 2; stroke-dasharray: none; filter: drop-shadow(0 0 3px var(--sv)); }
.sv-trk.past { opacity: .12; }
.sv-mark circle { fill: var(--sv); }
.sv-mark .halo { fill: none; stroke: var(--sv); opacity: .5; }
.sv-mark text { fill: var(--sv); font: 700 10px var(--mono); }
.sv-moon { fill: #e8e2cf; opacity: .85; }
.sv-mlbl { fill: #e8e2cf; font: 11px var(--mono); }

/* timeline */
.sv-tl { font: 10px var(--mono); }
.sv-row { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 8px; margin: 4px 0; }
.sv-row > label { font-weight: 700; letter-spacing: .16em; color: var(--sv, #8fa6b6); }
.sv-lane { position: relative; height: 26px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(79, 227, 255, .1); border-radius: 3px; overflow: hidden; }
.sv-lane.thin { height: 10px; }
.sv-lane i, .sv-lane b { position: absolute; top: 0; bottom: 0; }
.sv-twi { background: rgba(79, 227, 255, .05); }
.sv-dark { background: rgba(79, 227, 255, .09); }
.sv-moonup { background: rgba(232, 226, 207, .35); }
.sv-blk { top: 3px !important; bottom: 3px !important; border-radius: 2px; background: color-mix(in srgb, var(--sv) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--sv) 60%, transparent); color: #eaf4fa; font: 700 9px/18px var(--mono);
  padding: 0 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sv-blk.live { background: color-mix(in srgb, var(--sv) 55%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--sv) 50%, transparent); }
.sv-blk.past { opacity: .35; }
.sv-blk.q { border-style: dashed; }
.sv-now { width: 2px; background: #fff; box-shadow: 0 0 6px #fff; z-index: 2; }
.sv-ticks { position: relative; height: 14px; margin-left: 64px; color: #6c8494; }
.sv-ticks span { position: absolute; transform: translateX(-50%); }
.sv-legend { margin-top: 6px; color: #8fa6b6; }

/* lists */
.sv-tbl { width: 100%; border-collapse: collapse; font: 12px var(--mono); }
.sv-tbl td { padding: 6px 6px; border-bottom: 1px solid rgba(79, 227, 255, .08); }
.sv-tbl td:first-child { color: var(--sv); font-weight: 700; letter-spacing: .12em; }
.sv-tbl tr.past { opacity: .4; }
.sv-tbl tr.live td { background: rgba(79, 227, 255, .06); }
.sv-q { font-size: 9px; padding: 1px 5px; border: 1px dashed var(--amber); color: var(--amber); border-radius: 3px; }
.sv-req { border-style: solid; color: #04060b; background: var(--amber); letter-spacing: .08em; }
.sv-log { padding: 7px 10px; margin: 5px 0; border-left: 2px solid var(--sv); background: rgba(79, 227, 255, .03); font: 11px/1.5 var(--mono); }
.sv-log b { display: block; color: #eaf4fa; font-size: 13px; }
.sv-log span { display: block; color: #8fa6b6; }
.sv-ev { display: grid; grid-template-columns: 42px 54px 1fr; gap: 6px; padding: 3px 0; font: 11px/1.4 var(--mono); border-bottom: 1px solid rgba(79, 227, 255, .05); }
.sv-ev i { font-style: normal; color: #6c8494; }
.sv-ev b { color: #8fa6b6; letter-spacing: .1em; }
.sv-ev.warn span { color: var(--amber); }
.sv-ev.bad span { color: #f19a9a; }
.sv-best { position: relative; display: grid; grid-template-columns: 64px 70px 1fr auto; gap: 2px 8px; align-items: center; padding: 7px 8px; margin: 4px 0;
  border: 1px solid rgba(79, 227, 255, .1); border-radius: 4px; font: 12px var(--mono); overflow: hidden; }
.sv-best b { color: #eaf4fa; }
.sv-best i { grid-column: 3; font-style: normal; font-size: 10px; color: var(--sv); }
.sv-best > i:first-child { grid-column: 1; grid-row: 1 / span 2; }
.sv-thumb { grid-column: 1; grid-row: 1 / span 2; width: 64px; height: 40px; object-fit: cover; border-radius: 3px; border: 1px solid rgba(79, 227, 255, .2); background: #000; }
.sv-best em { position: absolute; left: 0; bottom: 0; height: 2px; width: var(--w); background: linear-gradient(90deg, var(--amber), var(--holo)); }
.sv-best button { grid-column: 4; grid-row: 1 / span 2; font-size: 10px; }
.sv-best button.on { color: var(--amber); border-color: var(--amber); }
@media (max-width: 600px) {
  .sv-stats { grid-template-columns: repeat(2, 1fr); }
  .sv-row { grid-template-columns: 44px 1fr; }
  .sv-ticks { margin-left: 52px; }
}

/* ---- bridge stations ------------------------------------------------------------------ */
/* condition banner: GREEN / YELLOW / RED / STANDBY (no looping animation) */
.sv-cond { --c: #7fe0a0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 10px 14px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 14%, transparent), rgba(7, 10, 18, .9) 55%);
  font: 11px/1.3 var(--mono); color: #b8d0de; }
.sv-cond b { font: 800 14px/1 var(--mono); letter-spacing: .24em; color: var(--c); text-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); }
.sv-cond i { margin-left: auto; font-style: normal; letter-spacing: .2em; color: var(--holo); }
.sv-cond.c-yellow { --c: #ffd27a; }
.sv-cond.c-red { --c: #ff5a4a; }
.sv-cond.c-standby, .sv-cond.c-unknown { --c: #8fa6b6; }

/* weather strip */
.sv-wx { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(18px, 1fr); gap: 2px; overflow-x: auto; padding-bottom: 4px; }
.sv-wh { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; border-radius: 3px; font: 9px var(--mono); color: #6c8494; }
.sv-wh.dark { background: rgba(79, 227, 255, .07); }
.sv-wh.now { outline: 1px solid rgba(255, 255, 255, .5); }
.sv-wbar { position: relative; width: 70%; height: 46px; display: flex; flex-direction: column-reverse; background: rgba(0, 0, 0, .35); border-radius: 2px; overflow: hidden; }
.sv-wbar i, .sv-wkey i { display: block; }
.sv-wbar .lo, .sv-wkey .lo { background: #cfd8e0; }
.sv-wbar .mid, .sv-wkey .mid { background: #8fa6b6; }
.sv-wbar .hi, .sv-wkey .hi { background: #4b6272; }
.sv-wh b { width: 70%; height: 4px; border-radius: 1px; background: #4b6272; }
.sv-wh b.c-green { background: #7fe0a0; }
.sv-wh b.c-yellow { background: #ffd27a; }
.sv-wh b.c-red { background: #ff5a4a; }
.sv-wh small { color: #8fa6b6; }
.sv-wnow { margin-top: 6px; font: 11px var(--mono); color: #b8d0de; }
.sv-wnow span { color: var(--amber); font-weight: 700; letter-spacing: .18em; margin-right: 6px; }
.sv-wkey { margin-top: 4px; font: 9px var(--mono); color: #6c8494; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sv-wkey i { width: 9px; height: 9px; border-radius: 1px; }

/* sensor sparkline */
.sv-spark { width: 100%; height: 40px; margin-top: 8px; background: rgba(0, 0, 0, .25); border-radius: 3px; }
.sv-spark polyline { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.sv-spark .st { stroke: var(--holo); }
.sv-spark .bg { stroke: var(--amber); opacity: .7; }
.sv-sparkkey { display: flex; gap: 6px; align-items: center; font: 9px var(--mono); color: #6c8494; margin-top: 3px; }
.sv-sparkkey i { width: 10px; height: 2px; }
.sv-sparkkey .st { background: var(--holo); }
.sv-sparkkey .bg { background: var(--amber); }

/* astrometrics readouts */
.sv-astro { padding: 8px 10px; margin: 6px 0; border-left: 2px solid var(--sv); background: rgba(79, 227, 255, .03); font: 11px/1.5 var(--mono); }
.sv-astro label { display: block; font-weight: 700; letter-spacing: .18em; font-size: 9px; color: var(--sv); }
.sv-astro b { display: block; font-size: 15px; color: #eaf4fa; }
.sv-astro span { display: block; color: #b8d0de; }

/* image lab */
.sv-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.sv-gal figure { margin: 0; border: 1px solid color-mix(in srgb, var(--sv) 30%, transparent); border-radius: 4px; overflow: hidden; background: #000; cursor: zoom-in; }
.sv-gal figure:hover { border-color: var(--sv); }
.sv-gal img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sv-gal figcaption { padding: 6px 8px; font: 10px/1.4 var(--mono); background: rgba(7, 10, 18, .95); }
.sv-gal figcaption b { display: block; color: #eaf4fa; font-size: 12px; }
.sv-gal figcaption span { color: #8fa6b6; }
.sv-lightbox { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(2, 4, 8, .94); cursor: zoom-out; padding: 16px; }
.sv-lightbox img { max-width: 100%; max-height: 82vh; border: 1px solid rgba(79, 227, 255, .3); }
.sv-lightbox div { font: 12px var(--mono); color: #b8d0de; letter-spacing: .06em; }

/* captain's log */
.sv-log-cpt p { margin: 0 0 8px; font: 12px/1.65 var(--mono); color: #c7dbe6; }
.sv-log-cpt p b { color: var(--amber); font-weight: 700; }

/* ---- ASTROMETRICS star atlas (skyatlas.js) --------------------------------------------- */
.sa { position: relative; border-radius: 6px; overflow: hidden; border: 1px solid rgba(79, 227, 255, .22); background: #03060d;
  box-shadow: 0 0 30px rgba(79, 227, 255, .06) inset; user-select: none; }
.sa-cv { display: block; width: 100%; touch-action: none; cursor: grab; }
.sa-hud { position: absolute; display: flex; gap: 4px; align-items: center; font: 10px var(--mono); pointer-events: none; }
.sa-hud.tl { left: 10px; top: 8px; flex-direction: column; align-items: flex-start; gap: 2px; }
.sa-hud.tl b { font-weight: 800; letter-spacing: .3em; color: var(--amber); text-shadow: 0 0 10px var(--glow); }
.sa-hud.tl span { color: #8fa6b6; letter-spacing: .08em; }
.sa-hud.tr { right: 8px; top: 8px; pointer-events: auto; }
.sa button { font: 700 9px var(--mono) !important; letter-spacing: .14em; padding: 4px 7px !important; min-width: 0; border-radius: 3px;
  color: #b8d8ea; background: rgba(3, 6, 13, .8); border: 1px solid rgba(79, 227, 255, .3); }
.sa button.on { color: #03060d; background: var(--amber); border-color: var(--amber); }
.sa-read { position: absolute; right: 8px; top: 38px; max-width: min(340px, 62%); padding: 9px 12px; border-radius: 4px;
  background: rgba(3, 6, 13, .92); border: 1px solid rgba(255, 176, 32, .45); font: 11px/1.5 var(--mono); color: #c7dbe6; }
.sa-read.hidden { display: none; }
.sa-read b { display: block; color: var(--amber); font-size: 13px; letter-spacing: .04em; }
.sa-read span { display: block; }
.sa-read em { display: block; margin-top: 4px; font-style: normal; font-size: 9px; color: #6c8494; letter-spacing: .1em; }
.sa-read .sa-west { color: var(--amber); }
.sa-read .sa-east { color: var(--holo); }
.sa-time { position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; gap: 8px; align-items: center; }
.sa-time input { flex: 1; accent-color: var(--amber); }
.sa-clock { font: 700 11px var(--mono); color: var(--amber); min-width: 40px; }
.sa-key { position: absolute; right: 10px; bottom: 34px; font: 9px var(--mono); color: #6c8494; pointer-events: none; text-align: right; }
.sa-key i { font-style: normal; color: var(--k); margin: 0 2px 0 8px; }
.sa-key i.w { color: var(--amber); }
.sa-key i.e { color: var(--holo); }
.sv-astro-wrap { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(220px, 1fr); gap: 12px; align-items: start; }
@media (max-width: 900px) { .sv-astro-wrap { grid-template-columns: 1fr; } .sa-key { display: none; } }

.sv-eye { margin: 8px 0 2px; }
.sv-eye img { display: block; width: 100%; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--sv) 45%, transparent); background: #000; }
.sv-eye figcaption { margin-top: 3px; font: 9px var(--mono); letter-spacing: .08em; color: #6c8494; }
/* atlas: readout image, snapshot flash, seek list */
.sa-img { margin: 6px 0 2px; }
.sa-img img { display: block; width: 100%; max-height: 190px; object-fit: cover; border-radius: 3px; border: 1px solid rgba(255, 176, 32, .35); background: #000; }
.sa-img figcaption { margin-top: 3px; font: 9px var(--mono); letter-spacing: .08em; color: #6c8494; }
.sa-alt { font: 9px var(--mono); color: var(--holo); }
.sa button.sa-snap { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 60%, transparent); }
.sa-flash { position: absolute; inset: 0; pointer-events: none; background: #fff; opacity: 0; }
.sa-flash.go { animation: sa-flash .45s ease-out 1; }
@keyframes sa-flash { 0% { opacity: .55; } 100% { opacity: 0; } }
.sa-seek { margin-top: 10px; }
.sa-seek-h { font: 800 10px/1 var(--mono); letter-spacing: .26em; color: var(--amber); margin-bottom: 8px; }
.sa-seek-h span { font-weight: 400; letter-spacing: .06em; color: #6c8494; margin-left: 8px; }
.sa-seek-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.sa-seek-empty { font: 11px var(--mono); color: #6c8494; padding: 6px 0; }
.sa-card { --c: var(--amber); display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 8px; border-radius: 4px; background: rgba(7, 10, 18, .85);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); border-left: 2px solid var(--c); font: 10px/1.45 var(--mono); color: #b8d0de; }
.sa-card.e { --c: var(--holo); }
.sa-card img { width: 120px; height: 84px; object-fit: cover; border-radius: 3px; background: #000; }
.sa-card b { display: block; color: #eaf4fa; font-size: 12px; }
.sa-card span { display: block; }
.sa-card-b { display: flex; gap: 4px; margin-top: 5px; }
.sa-card-b button { font: 700 9px var(--mono) !important; letter-spacing: .12em; padding: 4px 8px !important; border-radius: 3px; color: #b8d8ea; background: rgba(3, 6, 13, .8); border: 1px solid rgba(79, 227, 255, .3); }
.sa-card-b button:first-child { color: var(--c); border-color: var(--c); }
@media (prefers-reduced-motion: reduce) { .sa-flash.go { animation: none; } }

.sv-view { margin: 8px 0 0; }
.sv-view img { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 3px; background: #000;
  border: 1px solid color-mix(in srgb, var(--sv) 40%, transparent); }
.sv-view figcaption { margin-top: 3px; font: 9px var(--mono); letter-spacing: .1em; color: #6c8494; }

.sv-lb-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; cursor: default; }
.sv-lb-bar button { font: 700 10px var(--mono) !important; letter-spacing: .14em; padding: 5px 9px !important; border-radius: 3px; color: #b8d8ea;
  background: rgba(3, 6, 13, .8); border: 1px solid rgba(79, 227, 255, .3); }
.sv-lb-bar button.on { color: #04060b; background: var(--holo); border-color: var(--holo); }
.sv-lb-bar button[data-enh] { color: var(--amber); border-color: rgba(255, 176, 32, .5); }
.sv-lb-bar span { font: 800 10px var(--mono); letter-spacing: .24em; color: var(--amber); margin-left: 10px; }

/* tonight's window ribbon */
.sv-window { font: 10px var(--mono, monospace); }
.sv-w-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin-bottom: 6px; }
.sv-w-stats span { display: flex; align-items: baseline; gap: 4px; }
.sv-w-stats b { font: 700 16px var(--mono, monospace); color: #eaf4fa; font-variant-numeric: tabular-nums; }
.sv-w-stats small { font-size: 9px; color: #6c8494; letter-spacing: .12em; text-transform: uppercase; }
.sv-w-stats .sv-w-next { margin-left: auto; }
.sv-w-stats .sv-w-next b { font-size: 11px; color: var(--amber, #ffb020); letter-spacing: .14em; text-transform: uppercase; }
.sv-w-svg { width: 100%; height: 92px; display: block; }
.sv-w-day { fill: rgba(120, 160, 190, .10); }
.sv-w-civ { fill: rgba(60, 90, 140, .22); } .sv-w-naut { fill: rgba(30, 50, 100, .35); } .sv-w-astro { fill: rgba(12, 22, 52, .6); }
.sv-w-dark { fill: #050914; } .sv-w-free { fill: rgba(79, 227, 255, .10); }
.sv-w-grid { stroke: rgba(143, 166, 182, .08); } .sv-w-tick { fill: #6c8494; font-size: 9px; text-anchor: middle; }
.sv-w-hz { stroke: rgba(255, 176, 32, .35); stroke-dasharray: 3 3; }
.sv-w-moon { fill: none; stroke: #dfe7ee; stroke-width: 1.6; opacity: .85; }
.sv-w-mdot { fill: #f4f7fa; } .sv-w-now { stroke: var(--amber, #ffb020); stroke-width: 1.5; }
.sv-w-key { margin-top: 2px; color: #6c8494; font-size: 9px; letter-spacing: .08em; }
.sv-w-key i { display: inline-block; width: 10px; height: 8px; margin: 0 3px 0 8px; vertical-align: middle; }
.sv-w-key i.dark { background: #050914; border: 1px solid #23324a; } .sv-w-key i.free { background: rgba(79, 227, 255, .35); } .sv-w-key i.moon { height: 2px; background: #dfe7ee; }

/* 48 h forecast */
.sv-fc { font: 9px var(--mono, monospace); overflow-x: auto; }
.sv-fc-sum { margin-bottom: 6px; font-size: 11px; color: #b8d0de; letter-spacing: .06em; }
.sv-fc-sum b { letter-spacing: .12em; }
.go-t { color: #4fe3a0; } .mg-t { color: #ffb020; } .ng-t { color: #ff5a4a; }
.sv-fc-grid { display: grid; grid-template-columns: 54px minmax(calc(var(--n) * 14px), 1fr); gap: 2px 6px; align-items: center; }
.sv-fc-grid > label { color: #6c8494; letter-spacing: .12em; font-size: 8px; text-align: right; }
.sv-fc-row { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 1px; }
.sv-fc-row i { height: 13px; font-style: normal; font-size: 8px; line-height: 13px; text-align: center; color: rgba(234, 244, 250, .7); }
.sv-fc-head b { font-weight: 400; color: #6c8494; text-align: center; font-size: 8px; } .sv-fc-head b.mid { color: var(--amber, #ffb020); }
.sv-fc-night span { height: 3px; background: transparent; } .sv-fc-night span.dk { background: #23324a; } .sv-fc-night span.now { background: var(--amber, #ffb020); }
.cl.l0 { background: #050a16; } .cl.l1 { background: #1d2a3e; } .cl.l2 { background: #4a5a70; } .cl.l3 { background: #8796a8; }
.dw.l0, .wd.l0, .sg.l0 { background: rgba(79, 227, 160, .28); } .dw.l1, .wd.l1, .sg.l1 { background: rgba(79, 227, 160, .14); }
.dw.l2, .wd.l2, .sg.l2 { background: rgba(255, 176, 32, .25); } .dw.l3, .wd.l3, .sg.l3 { background: rgba(255, 90, 74, .35); }
.sv-fc-row i.na { background: rgba(143, 166, 182, .06); }
.sv-fc-go i { height: 9px; } .go.go { background: #4fe3a0; } .go.marginal { background: #ffb020; } .go.nogo { background: #ff5a4a; } .go.day { background: rgba(143, 166, 182, .08); }

/* pass radar (satpass.js) */
.sp-list { display: grid; gap: 4px; font: 11px var(--mono, monospace); }
.sp-row { display: grid; grid-template-columns: 110px 80px 90px 1fr auto; gap: 10px; align-items: baseline; padding: 5px 8px;
  border-left: 2px solid rgba(125, 255, 178, .25); background: rgba(125, 255, 178, .03); color: #b8d0de; }
.sp-row > b { color: #7dffb2; letter-spacing: .1em; } .sp-row.pri > b { color: #b6ffd4; text-shadow: 0 0 10px rgba(125, 255, 178, .4); }
.sp-row.live { border-left-color: #7dffb2; background: rgba(125, 255, 178, .1); }
.sp-when { color: var(--amber, #ffb020); } .sp-row span b { color: #eaf4fa; }
@media (max-width: 640px) { .sp-row { grid-template-columns: 1fr 1fr; } }
.sv-solved { display: block; color: #7dffb2; font-size: 9px; letter-spacing: .06em; }

/* frame triage */
.sv-tri { width: 100%; height: 34px; display: block; }
.sv-tri rect.ok { fill: rgba(79, 227, 255, .5); } .sv-tri rect.cloud { fill: #ff5a4a; } .sv-tri rect.glow { fill: #ffb020; }
.sv-tri .cut { stroke: rgba(255, 90, 74, .5); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.sv-tri-list { display: grid; gap: 10px; font: 10px var(--mono, monospace); }
.sv-tri-row { display: grid; gap: 3px; padding-left: 8px; border-left: 2px solid var(--amber, #ffb020); }
.sv-tri-row.sv-east { border-left-color: var(--holo, #4fe3ff); }
.sv-tri-row b { color: #eaf4fa; letter-spacing: .08em; } .sv-tri-row span { color: #6c8494; }
.sv-tri-row em { font-style: normal; } .sv-tri-row em.ok { color: #7dffb2; } .sv-tri-row em.warn { color: #ffb020; } .sv-tri-row em.bad { color: #ff5a4a; }
.sv-wkey i.tri-ok { background: rgba(79, 227, 255, .5); } .sv-wkey i.tri-cloud { background: #ff5a4a; } .sv-wkey i.tri-glow { background: #ffb020; }
/* twin-array view */
.sv-twin { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sv-twin-col { display: grid; gap: 6px; padding: 10px; border: 1px solid rgba(255, 176, 32, .35); background: rgba(255, 176, 32, .03); font: 10px var(--mono, monospace); }
.sv-twin-col.sv-east { border-color: rgba(79, 227, 255, .35); background: rgba(79, 227, 255, .03); }
.sv-twin-col.off { opacity: .55; }
.sv-twin-h { display: flex; gap: 8px; align-items: baseline; } .sv-twin-h b { color: var(--amber, #ffb020); letter-spacing: .2em; font-size: 12px; }
.sv-east .sv-twin-h b { color: var(--holo, #4fe3ff); } .sv-twin-h span { color: #6c8494; } .sv-twin-h i { margin-left: auto; font-style: normal; letter-spacing: .2em; color: #b8d0de; }
.sv-twin-view { position: relative; aspect-ratio: 16 / 10; background: #02040a; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sv-twin-view img { width: 100%; height: 100%; object-fit: contain; }
.sv-twin-live { position: absolute; top: 6px; right: 8px; color: #ff5a4a; letter-spacing: .2em; font-size: 9px; }
.sv-twin-t b { color: #eaf4fa; font-size: 12px; margin-right: 8px; } .sv-twin-t span { color: #6c8494; }
.sv-twin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.sv-twin-stats span { display: grid; } .sv-twin-stats b { font-size: 14px; color: #eaf4fa; font-variant-numeric: tabular-nums; } .sv-twin-stats small { color: #6c8494; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.sv-twin-same { margin-bottom: 8px; padding: 6px 10px; text-align: center; font: 800 11px var(--mono, monospace); letter-spacing: .3em; color: #04060b; background: linear-gradient(90deg, var(--amber, #ffb020), var(--holo, #4fe3ff)); }
@media (max-width: 700px) { .sv-twin { grid-template-columns: 1fr; } }

/* pre-flight briefing */
.sv-brief { display: grid; gap: 4px; font: 11px var(--mono, monospace); }
.sv-brief > div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 3px 0; border-bottom: 1px solid rgba(143, 166, 182, .08); }
.sv-brief label { color: #6c8494; letter-spacing: .2em; font-size: 9px; padding-top: 2px; } .sv-brief span { color: #cfe3ee; }
.sv-brief.due { border-left: 2px solid var(--amber, #ffb020); padding-left: 10px; }

/* weather deck (SkyView.weatherDeck) */
.wd { display: grid; gap: 16px; font-family: var(--mono, monospace); }
.wd-hero { --c: #8fa6b6; display: grid; grid-template-columns: 110px 1fr auto; gap: 22px; align-items: center; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 5%, transparent); }
.wd-hero.go { --c: #4fe3a0; } .wd-hero.mg { --c: #ffb020; } .wd-hero.ng { --c: #ff5a4a; }
.wd-ring { width: 110px; height: 110px; } .wd-ring circle { fill: none; stroke-width: 7; } .wd-ring .bg { stroke: rgba(143, 166, 182, .15); } .wd-ring .fg { stroke: var(--c); stroke-linecap: round; }
.wd-ring .num { fill: #eaf4fa; font: 800 30px var(--mono, monospace); text-anchor: middle; } .wd-ring .cap { fill: #6c8494; font: 9px var(--mono, monospace); text-anchor: middle; letter-spacing: .1em; }
.wd-verdict { display: grid; gap: 4px; } .wd-verdict small { font-size: 10px; letter-spacing: .34em; color: #6c8494; }
.wd-verdict b { font: 800 clamp(26px, 4vw, 44px)/1 var(--mono, monospace); letter-spacing: .16em; color: var(--c); }
.wd-verdict span { font-size: 12px; color: #b8d0de; }
.wd-hours { display: grid; gap: 6px; } .wd-hours span { display: grid; grid-template-columns: 40px auto; gap: 8px; align-items: baseline; font-size: 10px; letter-spacing: .16em; color: #8fa6b6; text-transform: uppercase; }
.wd-hours b { font-size: 22px; text-align: right; font-variant-numeric: tabular-nums; } .wd-hours .h-go b { color: #4fe3a0; } .wd-hours .h-mg b { color: #ffb020; } .wd-hours .h-ng b { color: #ff5a4a; }
.wd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.wd-tile { --c: #4fe3ff; display: grid; gap: 4px; padding: 12px 14px; border: 1px solid rgba(79, 227, 255, .16); border-left: 3px solid var(--c); background: rgba(5, 9, 18, .6); }
.wd-tile.good { --c: #4fe3a0; } .wd-tile.warn { --c: #ffb020; } .wd-tile.bad { --c: #ff5a4a; }
.wd-tile small { font-size: 9px; letter-spacing: .26em; color: #6c8494; }
.wd-tile b { font: 700 26px/1.1 var(--mono, monospace); color: #eaf4fa; font-variant-numeric: tabular-nums; } .wd-tile b i { font: 400 12px var(--mono, monospace); color: #8fa6b6; margin-left: 3px; }
.wd-tile span { font-size: 10px; color: var(--c); letter-spacing: .06em; } .wd-tile:not(.good):not(.warn):not(.bad) span { color: #8fa6b6; }
.wd-layers { display: inline-flex; gap: 2px; margin-right: 6px; vertical-align: middle; } .wd-layers u { width: 16px; height: 6px; background: linear-gradient(90deg, #cfd8e0 var(--v), rgba(143, 166, 182, .15) var(--v)); }
.wd-h { font-size: 10px; letter-spacing: .3em; color: var(--amber, #ffb020); margin-bottom: -8px; }
.wd-chart { width: 100%; height: auto; display: block; }
.wd-dark { fill: rgba(79, 227, 255, .06); } .wd-c.hi { fill: #4b6272; } .wd-c.mid { fill: #8fa6b6; } .wd-c.lo { fill: #dfe7ee; }
.wd-v.go { fill: #4fe3a0; } .wd-v.marginal { fill: #ffb020; } .wd-v.nogo { fill: #ff5a4a; } .wd-v.day { fill: rgba(143, 166, 182, .12); }
.wd-hr { fill: #8fa6b6; font: 11px var(--mono, monospace); text-anchor: middle; } .wd-hr.mid { fill: var(--amber, #ffb020); }
.wd-wind { fill: #8fa6b6; font: 10px var(--mono, monospace); text-anchor: middle; } .wd-wind.bad { fill: #ff5a4a; }
.wd-ax { fill: #4a6070; font: 9px var(--mono, monospace); letter-spacing: .08em; }
.wd-temp { fill: none; stroke: #ffb020; stroke-width: 2; } .wd-dew { fill: none; stroke: #4fe3ff; stroke-width: 1.5; stroke-dasharray: 4 3; } .wd-gap { fill: rgba(255, 176, 32, .07); }
.wd-hit { fill: transparent; } .wd-hit:hover { fill: rgba(255, 255, 255, .05); }
.wd-key { font-size: 10px; color: #6c8494; letter-spacing: .04em; } .wd-key i { display: inline-block; width: 10px; height: 8px; margin: 0 4px 0 8px; vertical-align: middle; }
.wd-key i.hi { background: #4b6272; } .wd-key i.mid { background: #8fa6b6; } .wd-key i.lo { background: #dfe7ee; } .wd-key i.t { height: 2px; background: #ffb020; } .wd-key i.d { height: 2px; background: #4fe3ff; }
@media (max-width: 700px) { .wd-hero { grid-template-columns: 80px 1fr; } .wd-ring { width: 80px; height: 80px; } .wd-hours { grid-column: 1 / -1; grid-auto-flow: column; } }