/* Night-sky palette: the stacks are star fields, so the page sits in the same darkness
   and lets the images carry the colour. Camera series colours are pale, like trails. */
:root {
  --sky: #0d1626;
  --sky-raised: #13203a;
  --rule: #24365a;
  --ink: #e6eaf2;
  --dim: #93a1bb;
  --link: #b9c8ff;

  --c1: #8fb3ff;
  --c2: #f2c46d;
  --c3: #7fd6c2;
  --c4: #e59ac8;
  --c5: #c9d27a;
  --c6: #f29b7f;
  --c7: #a7a0f2;
  --c8: #9ad1f2;

  --ok: #6fd1a4;
  --cloudy: #9aa9c4;
  --warn: #f0c35e;
  --fault: #ee7a73;
  --idle: #6b7a96;
  --cloudy-bar: #3a4a68;

  --font: "Avenir Next", Avenir, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --measure: 68ch;
}

* { box-sizing: border-box; }

html { background: var(--sky); color: var(--ink); font-family: var(--font); font-size: 100%; }
body { margin: 0 auto; max-width: 1240px; padding: 0 clamp(1rem, 3vw, 2.5rem); line-height: 1.5; }

a { color: var(--link); text-underline-offset: 0.2em; }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 2px; }

.masthead { display: flex; align-items: baseline; gap: 1rem; padding: 1.25rem 0 0.5rem; border-bottom: 1px solid var(--rule); }
.sitename { color: var(--ink); font-weight: 600; text-decoration: none; letter-spacing: 0.01em; }
.crumb { color: var(--dim); }
.crumb::before { content: "/"; margin-right: 1rem; color: var(--rule); }

h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 500; line-height: 1.15; margin: 2rem 0 0.4rem; letter-spacing: -0.01em; }
h2 { font-size: 1rem; font-weight: 600; margin: 0 0 0.75rem; color: var(--dim); }
h3 { font-size: 1.125rem; font-weight: 600; margin: 0; letter-spacing: 0.02em; }

.lede { font-size: 1.15rem; max-width: var(--measure); margin: 0.25rem 0 0; color: var(--dim); }
.lede strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.desc { color: var(--dim); margin: 0.25rem 0; max-width: var(--measure); }

/* ---- trend chart: the page's one bold element ---- */
.trend { margin: 2.25rem 0 2.5rem; }
/* rtl wrapper: on narrow screens the scroll starts at the newest night */
.chart-wrap { overflow-x: auto; direction: rtl; }
.chart-wrap > svg { direction: ltr; }
.chart { width: 100%; min-width: 560px; height: auto; display: block; }
.chart .grid { stroke: var(--rule); stroke-width: 1; }
.chart .axis { fill: var(--dim); font: 11px var(--font); font-variant-numeric: tabular-nums; }
.chart .zero { stroke: var(--cloudy); stroke-width: 3; opacity: 0.6; }
.chart .hit { fill: transparent; }
.chart g:hover .hit { fill: rgba(185, 200, 255, 0.06); }
.chart a:focus-visible .hit { fill: rgba(185, 200, 255, 0.12); stroke: var(--link); }
.legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; list-style: none; padding: 0; margin: 0.75rem 0 0; color: var(--dim); font-size: 0.9rem; }
.swatch { display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.45em; border-radius: 2px; vertical-align: -0.05em; }
.hint { color: var(--dim); font-size: 0.85rem; margin: 0.5rem 0 0; }

/* ---- camera tiles ---- */
.cameras { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem 1.75rem; margin-bottom: 3rem; }
.cam-link { display: block; color: inherit; text-decoration: none; }
.frame { aspect-ratio: 16 / 9; background: #000; border-top: 3px solid var(--edge); overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-link:hover .frame img { filter: brightness(1.15); }
.noimg { height: 100%; display: grid; place-items: center; color: var(--dim); font-size: 0.9rem; }
.cam-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.6rem; }
.count { font-size: 1.75rem; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; }
.cam .desc { font-size: 0.9rem; margin: 0.2rem 0 0; }

.state { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--dim); }
.pill { display: inline-flex; align-items: center; gap: 0.4em; color: var(--ink); }
.pill::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; }
.pill.ok::before { background: var(--ok); }
.pill.cloudy::before { background: var(--cloudy); }
.pill.warn::before { background: var(--warn); }
.pill.fault::before { background: var(--fault); }
.pill.idle::before { background: var(--idle); }
.note { color: var(--warn); }

/* ---- camera / night page ---- */
.night-layout { display: grid; grid-template-columns: 1fr 13rem; gap: 2.5rem; margin-bottom: 3rem; align-items: start; }
.images { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.5rem; }
.images figure { margin: 0; }
.images figure.wide { grid-column: 1 / -1; }
.images img { width: 100%; height: auto; display: block; background: #000; }
.images figcaption { color: var(--dim); font-size: 0.9rem; margin-top: 0.4rem; }
.images .empty { grid-column: 1 / -1; }

.nights { position: sticky; top: 1rem; }
.nights ol { list-style: none; padding: 0; margin: 0; max-height: 70vh; overflow-y: auto; border-top: 1px solid var(--rule); }
.nights li a { display: flex; justify-content: space-between; padding: 0.35rem 0.25rem; border-bottom: 1px solid var(--rule); color: var(--dim); text-decoration: none; font-size: 0.9rem; }
.nights li a:hover { color: var(--ink); }
.nights li[aria-current] a { color: var(--ink); font-weight: 600; }
.nights .n { font-variant-numeric: tabular-nums; }
.nights p { font-size: 0.9rem; }

footer { border-top: 1px solid var(--rule); color: var(--dim); font-size: 0.85rem; padding: 1rem 0 2rem; }

@media (max-width: 760px) {
  .night-layout { grid-template-columns: 1fr; }
  .nights { position: static; }
  .images { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  .frame img { transition: filter 160ms ease; }
}

/* ---- nav, archive and history pages ---- */
.navlink { margin-left: auto; font-size: 0.9rem; }
a.crumb { color: var(--dim); text-decoration: none; }
a.crumb:hover { color: var(--ink); }

.months { margin-bottom: 3rem; }
.month { padding: 1.25rem 0; border-top: 1px solid var(--rule); scroll-margin-top: 1rem; }
.month h2 { color: var(--ink); font-size: 1.125rem; margin: 0; }
.month-total { color: var(--dim); font-size: 0.9rem; margin: 0.15rem 0 0.75rem; }
.days { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr)); gap: 0.35rem; }
.days a { display: flex; flex-direction: column; align-items: center; padding: 0.35rem 0; background: var(--sky-raised); color: var(--ink); text-decoration: none; border-radius: 3px; }
.days a:hover { outline: 1px solid var(--link); }
.days .d { color: var(--dim); font-size: 0.75rem; }
.days .n { font-variant-numeric: tabular-nums; font-weight: 600; }

.yearly { margin-bottom: 3rem; }
.table-wrap { overflow-x: auto; }
.yearly table { border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 100%; }
.yearly th, .yearly td { padding: 0.45rem 0.9rem; text-align: right; border-bottom: 1px solid var(--rule); }
.yearly th[scope="row"], .yearly thead th:first-child { text-align: left; }
.yearly thead th { color: var(--dim); font-weight: 600; font-size: 0.9rem; }
.yearly tfoot th, .yearly tfoot td { font-weight: 600; border-bottom: none; }
.src-note { color: var(--dim); }

/* ---- multi-station trajectories ---- */
.multi { margin: 0 0 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.narrow { max-width: var(--measure); }
.multi-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; margin-top: 1rem; align-items: start; }
h3.sub { font-size: 0.95rem; color: var(--dim); margin: 0 0 0.6rem; }
.dim { color: var(--dim); }

table.data { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 0.92rem; }
table.data th, table.data td { padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; }
table.data th[scope="row"], table.data thead th:first-child, table.data .left { text-align: left; }
table.data thead th { color: var(--dim); font-weight: 600; font-size: 0.85rem; }
table.data td.left { white-space: normal; }
table.data tr.bright td { color: var(--warn); }

.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.bars li { display: grid; grid-template-columns: 11rem 1fr 6.5rem; gap: 0.75rem; align-items: center; font-size: 0.92rem; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { height: 0.7rem; background: var(--sky-raised); border-radius: 2px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--link); }
.bar-n { text-align: right; font-variant-numeric: tabular-nums; }

.callout { margin: 1.5rem 0 0.5rem; padding: 0.9rem 1.1rem; background: var(--sky-raised); border-left: 3px solid var(--warn); max-width: 80ch; }
.callout strong { color: var(--warn); }

.trajs { margin: 0 0 2.5rem; }
.chart .peak { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }
.chart .peak-label { fill: var(--warn); font: 600 10px var(--font); letter-spacing: 0.04em; }

@media (max-width: 860px) {
  .multi-grid { grid-template-columns: 1fr; }
  .bars li { grid-template-columns: 8rem 1fr 5.5rem; }
}

/* ---- embedded timelapse ---- */
.images figure.video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.images figure.video figcaption a { margin-left: 0.5rem; }

/* ---- health and sky conditions ---- */
.health { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.35rem; max-width: 80ch; }
.health li { padding: 0.45rem 0.8rem; background: var(--sky-raised); border-left: 3px solid var(--warn); font-size: 0.92rem; }
.health li.lvl2 { border-left-color: var(--fault); }
.health li a { font-weight: 600; margin-right: 0.4rem; }
.health-ok { margin: 0.75rem 0 0; font-size: 0.92rem; }
.note.lvl2 { color: var(--fault); }
h3.sub.spaced { margin-top: 2rem; }
.chart .series { fill: none; stroke-width: 2; stroke-linejoin: round; }
.chart .dot { stroke: var(--sky); stroke-width: 1; }

/* ---- uptime strips ---- */
.strips .u-up { fill: var(--ok); opacity: 0.75; }
.strips .u-down { fill: var(--fault); }
.strips .u-empty { fill: var(--warn); }
.strips .u-pre { fill: var(--sky-raised); }
.strips rect:hover { opacity: 1; stroke: var(--ink); stroke-width: 1; }
.strips .strip-label { font-weight: 600; fill: var(--ink); }
.strips .grid { stroke: var(--sky); stroke-width: 1.5; }
.chart.strips { min-width: 720px; }
.outages { list-style: none; padding: 0; margin: 0.75rem 0 0; font-variant-numeric: tabular-nums; font-size: 0.92rem; }
.outages li { padding: 0.35rem 0; border-bottom: 1px solid var(--rule); display: flex; gap: 1rem; }
.outages .len { min-width: 6rem; color: var(--fault); }
.outages .site { color: var(--dim); }
.spaced-top { margin-top: 1.25rem; }
.outages .kind { color: var(--dim); }

/* ---- night profile and cloud calendar ---- */
.profile .np-cloud { fill: var(--cloudy-bar); }
.profile .np-day { fill: var(--sky-raised); }
.profile .live { fill: none; stroke: var(--dim); stroke-width: 1.5; stroke-dasharray: 4 3; }
.profile .live-axis { fill: var(--dim); }
.profile .hit { fill: transparent; }
.profile .hit:hover { fill: rgba(185, 200, 255, 0.08); }
.calendar .cal-cloud { fill: var(--cloudy-bar); }
.calendar .cal-clear { fill: var(--c3); }
.calendar .cal-day { fill: var(--sky-raised); }
.calendar .cal-title { font-weight: 600; font-size: 12px; }
.calendar a:hover rect { stroke: var(--ink); stroke-width: 0.5; }
.chart.calendar { min-width: 0; margin-left: 0; margin-right: auto; }  /* left-align inside the rtl scroller */
.key { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; list-style: none; padding: 0; margin: 0.6rem 0 0; color: var(--dim); font-size: 0.88rem; }
.key .line { display: inline-block; width: 1.4em; border-top: 2px dashed var(--dim); vertical-align: middle; margin-right: 0.45em; }

/* ---- ground-track maps and fireballs ---- */
.trackmap { min-width: 560px; }
.trackmap .sea { fill: #0a1220; }
.trackmap .coast { fill: none; stroke: #5d7196; stroke-width: 1; stroke-linejoin: round; }
.trackmap .grat { stroke: var(--rule); stroke-width: 0.5; stroke-dasharray: 2 4; }
.trackmap .trk line { stroke-linecap: round; opacity: 0.85; }
.trackmap .trk circle { opacity: 0.9; }
.trackmap .trk.spo line { stroke: var(--dim); opacity: 0.45; }
.trackmap .trk.spo circle { fill: var(--dim); opacity: 0.5; }
.trackmap .trk.fire line { stroke: var(--warn); opacity: 1; }
.trackmap .trk.fire circle { fill: var(--warn); }
.trackmap .trk.fire .ring { fill: none; stroke: var(--warn); stroke-width: 1.5; }
.trackmap .trk:hover line { opacity: 1; stroke-width: 4; }
.trackmap .home path { fill: var(--ink); stroke: var(--sky); stroke-width: 1.5; }
.trackmap .scale line { stroke: var(--ink); stroke-width: 2; }
.map-wrap { margin-top: 0.5rem; }
.key .line.solid { border-top-style: solid; border-top-width: 3px; }
.key .diamond { display: inline-block; width: 0.6em; height: 0.6em; background: var(--ink); transform: rotate(45deg); margin-right: 0.5em; }
.key .dot { display: inline-block; width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--dim); margin-right: 0.5em; vertical-align: middle; }
.fireballs { list-style: none; padding: 0; margin: 0.5rem 0 0; font-size: 0.92rem; }
.fireballs li { padding: 0.35rem 0; border-bottom: 1px solid var(--rule); display: flex; gap: 0.9rem; flex-wrap: wrap; }
.fireballs .fmag { color: var(--warn); font-weight: 600; min-width: 3.2rem; font-variant-numeric: tabular-nums; }
.badge { display: inline-block; font-size: 0.75rem; padding: 0 0.4rem; border: 1px solid var(--warn); color: var(--warn); border-radius: 3px; margin-left: 0.3rem; }
button.jump { background: none; border: 1px solid var(--rule); color: var(--link); border-radius: 3px; padding: 0.1rem 0.45rem; font: inherit; font-size: 0.8rem; cursor: pointer; }
button.jump:hover, button.jump:focus-visible { border-color: var(--link); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- camera spec, capture quality, fields of view ---- */
.trackmap .fov { fill-opacity: 0.06; stroke-width: 1.5; stroke-dasharray: 6 4; stroke-opacity: 0.8; }
.key .line.dashed { border-top-style: dashed; border-top-width: 2px; }
table.spec th[scope="row"] { color: var(--dim); font-weight: 600; width: 14rem; white-space: nowrap; }
table.spec td { white-space: normal; }
.quality-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem 1.5rem; }
.quality-grid figure { margin: 0; }
.quality-grid figcaption { color: var(--dim); font-size: 0.88rem; margin-bottom: 0.25rem; }
.quality-grid .chart { min-width: 0; }
.trackmap .fov-label { font: 600 13px var(--font); paint-order: stroke; stroke: var(--sky); stroke-width: 3px; }

/* ---- partial nights ---- */
.chart .dot.hollow { fill: var(--sky); stroke-width: 1.5; }
.advisory { margin: 0.75rem 0 0; padding: 0.55rem 0.85rem; border-left: 3px solid var(--cloudy); background: var(--sky-raised); color: var(--dim); font-size: 0.9rem; max-width: 80ch; }
.advisory strong { color: var(--ink); font-weight: 600; }
.calendar .cal-gap { fill: none; stroke: var(--dim); stroke-width: 0.8; stroke-dasharray: 2 2; opacity: 0.6; }