@import url("/static/fonts/fonts.css");

/* Supported Systems house style, applied as WARM SHELL / COOL DATA.
 *
 * The chrome — background, panels, type, brand accent — comes from
 * supported.systems: warm near-black, cream text, Libre Baskerville display,
 * Atkinson Hyperlegible body, brass accent.
 *
 * The INSTRUMENTS do not. Cyan, green, amber and red stay exactly as they were,
 * because on this page those colors carry information: which constellation a
 * satellite belongs to, whether a source is selected, whether the clock is
 * healthy. Recoloring them to brass would trade meaning for brand, which on a
 * status page is a bad trade at any exchange rate.
 *
 * So: --brand is for chrome, --accent is for live data. They are different
 * variables on purpose. Don't merge them.
 */
:root {
  /* shell — warm (supported.systems) */
  --bg: #171717;
  --bg-2: #1b1a18;
  --panel: #232120;
  --panel-2: #2b2825;
  --border: #3d382f;
  --border-soft: #322e28;
  --text: #eeece8;
  --muted: #a8a196;
  --faint: #6f6a61;
  --brand: #d9a441;      /* brass. chrome, links, brand marks. NOT data. */

  /* instruments — cool (semantic; do not rebrand) */
  --accent: #22d3ee;
  --good: #34d399;
  --warn: #f5a524;
  --bad: #f4436b;
  /* constellations (no purple) */
  --c-gps: #34d399;
  --c-glonass: #38bdf8;
  --c-galileo: #f5a524;
  --c-beidou: #fb7185;
  --c-sbas: #a3e635;
  --c-qzss: #2dd4bf;
  --c-other: #94a3b8;

  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 30px -18px rgba(0, 0, 0, 0.9);

  /* Atkinson Hyperlegible: the Braille Institute's legibility face. Chosen for
   * function before brand — it disambiguates 0/O, 1/l/I, rn/m, which is exactly
   * what a glanceable status page needs. */
  --sans: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
  --serif: "Libre Baskerville", Georgia, serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    /* the warm bench light from supported.systems */
    radial-gradient(1100px 620px at 50% -8%, rgba(217, 164, 65, 0.07), transparent 62%),
    /* one cool wash, bottom-left, so the instruments feel like instruments */
    radial-gradient(900px 500px at 0% 100%, rgba(34, 211, 238, 0.04), transparent 58%),
    var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(var(--bg), rgba(23, 23, 23, 0.86));
  backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 13px; }
/* The dish is brand chrome, not a reading — brass, not cyan. */
.brand-icon { width: 30px; height: 30px; color: var(--brand); }
/* Libre Baskerville, as on supported.systems. The wordmark is the one place a
   serif belongs on this page; everything that reports a NUMBER stays mono. */
.brand h1 { font-size: 20px; margin: 0; letter-spacing: 0.2px; font-family: var(--serif);
  font-weight: 700; }
.brand-sub { margin: 0; color: var(--muted); font-size: 12.5px; }

.conn { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted);
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); }
.conn-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.conn[data-state="live"] .conn-dot { background: var(--good); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
  animation: pulse 2s infinite; }
.conn[data-state="live"] { color: var(--good); }
.conn[data-state="down"] .conn-dot { background: var(--bad); }
.conn[data-state="down"] { color: var(--bad); }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }

/* ---------- layout ---------- */
/* `grid-template-columns: minmax(0, 1fr)` is load-bearing, not decoration.
 *
 * A grid column defaults to `auto`, whose MINIMUM is min-content — and grid items
 * refuse to shrink below it. The sources table has seven columns, giving it a
 * ~700px min-content, and that number propagates up and pins `main` to 771px
 * inside a 375px phone. Every panel then overflows and the document gets a
 * horizontal scrollbar. `.table-hold { overflow-x: auto }` cannot rescue it,
 * because the wrapper's own ancestors still won't shrink.
 *
 * The 0 in minmax(0, 1fr) overrides that automatic min-content floor. Same reason
 * .panel needs min-width: 0. Remove either and mobile breaks again.
 */
main { max-width: 1180px; margin: 0 auto; padding: 20px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.panel {
  min-width: 0;
  background: linear-gradient(var(--panel), var(--bg-2));
  border: 1px solid var(--border-soft); border-radius: 16px; padding: 18px;
  box-shadow: var(--shadow);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-head h2 { font-size: 14px; margin: 0; color: var(--muted); font-weight: 600;
  display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.6px; }
.panel-head h2 svg { color: var(--brand); }

/* ---------- hero ---------- */
.hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.clock { font-family: var(--mono); font-size: clamp(40px, 11vw, 76px); font-weight: 650;
  letter-spacing: 1px; line-height: 1; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 34px rgba(34, 211, 238, 0.18); }
.clock-frac { color: var(--accent); font-size: 0.42em; }
.clock-meta { color: var(--muted); margin-top: 8px; font-size: 13.5px; }
.mono { font-family: var(--mono); }

.verdict { text-align: right; }
.stratum-badge { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px;
  border-radius: 14px; border: 1px solid var(--border); background: var(--panel-2); }
.stratum-badge svg { width: 26px; height: 26px; color: var(--faint); }
.stratum-badge[data-ok="true"] { border-color: rgba(52, 211, 153, 0.5);
  background: linear-gradient(rgba(52, 211, 153, 0.14), rgba(52, 211, 153, 0.04)); }
.stratum-badge[data-ok="true"] svg { color: var(--good); }
.stratum-num { font-size: 30px; font-weight: 750; font-family: var(--mono); display: block; line-height: 1; }
.stratum-badge[data-ok="true"] .stratum-num { color: var(--good); }
.stratum-word { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--muted); }
.ref-line { color: var(--muted); font-size: 13px; margin-top: 8px; }
.ref-line strong { color: var(--text); font-family: var(--mono); }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; }
.card { background: var(--panel); border: 1px solid var(--border-soft); border-radius: 14px; padding: 14px 15px; }
.card-head { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.4px; }
.card-head svg { width: 15px; height: 15px; color: var(--brand); }
.card-value { font-family: var(--mono); font-size: 25px; font-weight: 650; margin: 7px 0 3px; letter-spacing: 0.3px; }
.card-value.good { color: var(--good); }
.card-value.warn { color: var(--warn); }
.card-value.bad { color: var(--bad); }
.card-sub { color: var(--faint); font-size: 12px; }
.card-sub .ic-inline { width: 12px; height: 12px; vertical-align: -2px; }

/* ---------- sparkline ---------- */
.spark-meta { font: 12px var(--mono); color: var(--muted); }
.spark-big { width: 100%; height: 120px; display: block; }
.spark-zero { stroke: var(--border); stroke-width: 1; stroke-dasharray: 4 4; }
.spark-area { fill: url(#spark-grad); opacity: 0.9; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }

/* ---------- grid-2 ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 820px) { .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- sky ---------- */
.sky-hold { position: relative; }
#sky { width: 100%; height: auto; display: block; }
.sky-ring { fill: none; stroke: var(--border); stroke-width: 1; }
.sky-ring.faint { stroke: var(--border-soft); }
.sky-cross { stroke: var(--border-soft); stroke-width: 1; }
.sky-card-label { fill: var(--faint); font: 600 11px var(--mono); }
.sky-ring-label { fill: var(--faint); font: 10px var(--mono); }
.sat { cursor: pointer; transition: r 0.4s ease; }
.sat-halo { opacity: 0.18; }
.sat-label { fill: #05080c; font: 700 8px var(--mono); pointer-events: none; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
.legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.sky-tip { position: absolute; pointer-events: none; background: #05090e; border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 9px; font: 12px/1.35 var(--mono); color: var(--text);
  transform: translate(-50%, -120%); white-space: nowrap; z-index: 3; box-shadow: var(--shadow); }

/* ---------- snr bars ---------- */
.snr-panel { display: flex; flex-direction: column; }
.snr { display: flex; align-items: flex-end; gap: 5px; flex: 1; min-height: 190px; overflow-x: auto; padding-top: 6px; }
.snr-bar { flex: 0 0 auto; width: 18px; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; gap: 4px; }
.snr-fill { width: 100%; border-radius: 4px 4px 2px 2px; min-height: 3px; transition: height 0.5s ease; opacity: 0.55; }
.snr-bar.used .snr-fill { opacity: 1; }
.snr-prn { font: 9px var(--mono); color: var(--faint); }
.snr-empty { color: var(--faint); align-self: center; margin: auto; font-size: 13px; }

/* ---------- table ---------- */
.table-hold { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; color: var(--faint); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); font-family: var(--mono); }
.tbl .num { text-align: right; }
.tbl tr.sel td { background: rgba(52, 211, 153, 0.06); }
.tbl tr.refclk td:first-child { color: var(--accent); }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px;
  border: 1px solid var(--border); color: var(--muted); font-family: var(--mono); }
.pill.selected { color: var(--good); border-color: rgba(52, 211, 153, 0.45); background: rgba(52, 211, 153, 0.08); }
.pill.combined { color: var(--accent); border-color: rgba(34, 211, 238, 0.35); }
/* A noselect refclock (our GPS: labels the second, never chosen) is healthy,
   not broken. Render it as quiet information so that red keeps meaning red. */
.pill.reference_only { color: var(--faint); border-color: var(--border-soft); }
.pill.unreachable, .pill.falseticker { color: var(--bad); border-color: rgba(244, 67, 107, 0.35); }

/* ---------- clients ---------- */
.clients { display: flex; flex-wrap: wrap; gap: 10px; }
.client { display: flex; flex-direction: column; gap: 2px; padding: 10px 13px; border: 1px solid var(--border-soft);
  border-radius: 11px; background: var(--panel); min-width: 150px; }
.client .addr { font-family: var(--mono); font-size: 13px; }
.client .meta { color: var(--faint); font-size: 11.5px; }
.empty-note { color: var(--faint); font-size: 13px; }

/* ---------- footer ---------- */
.foot { max-width: 1180px; margin: 0 auto; padding: 14px 20px 30px; }
.foot-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 14px; color: var(--faint); font-size: 12px; font-family: var(--mono); }
.foot-docs { display: inline-flex; align-items: center; gap: 5px; color: var(--faint);
  text-decoration: none; transition: color .2s; }
.foot-docs:hover { color: var(--brand); }
.foot-docs svg { width: 13px; height: 13px; stroke-width: 1.5; transition: transform .2s; }
.foot-docs:hover svg { transform: translateX(2px); }

/* ---------- the maker's plate ----------
 * Clockmakers signed the backplate — the brass face only a repairer sees once
 * the case is open. This footer is that plate: a double hairline for the plate
 * edge, engraved small-caps for the name, and nothing that moves. A signature
 * should be quiet. Same markup as the docs site at cuckoo.warehack.ing,
 * recolored from brass to this dashboard's cyan.
 */
.ss-plate__link {
  display: flex; gap: 16px; align-items: center;
  padding: 18px 20px; text-decoration: none; color: var(--muted);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--border-soft), var(--shadow);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(34, 211, 238, 0.07), transparent 60%),
    var(--panel);
  transition: color .2s, border-color .2s;
}
.ss-plate__link:hover { color: var(--text); border-color: var(--brand); }

.ss-plate__logo { flex: 0 0 auto; width: 46px; height: auto; opacity: .85;
  transition: opacity .2s; }
.ss-plate__link:hover .ss-plate__logo { opacity: 1; }

.ss-plate__heading { display: block; margin-bottom: 5px; color: var(--text);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; }
.ss-plate__body { display: block; font-size: 13px; line-height: 1.55; max-width: 62ch; }
.ss-plate__name { color: var(--brand); }
.ss-plate__cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  font-size: 12px; color: var(--brand); }
.ss-plate__cta svg { width: 14px; height: 14px; transition: transform .2s; }
.ss-plate__link:hover .ss-plate__cta svg { transform: translateX(2px); }

/* ---------- mobile ----------
 *
 * This is a status page. On a phone you are almost always asking ONE question:
 * "is the clock still good?" So the hero answer — time, stratum, lock — must be
 * readable without scrolling, and everything else can wait below the fold.
 *
 * The tables and the signal bars scroll sideways WITHIN their panels rather than
 * being crushed into unreadability. That's deliberate: a squeezed IPv6 address
 * wrapped over four lines is worse than one you swipe.
 */
@media (max-width: 700px) {
  main { padding: 14px; gap: 14px; }
  .panel { padding: 14px; border-radius: 14px; }

  /* A panel head is a title plus its readout. Side by side they fight for a
     narrow line and the title wraps mid-phrase; stacked, both stay whole. */
  .panel-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .spark-meta { font-size: 11px; }

  /* Stack the clock above the stratum badge, and left-align the badge so the
     eye travels straight down instead of ping-ponging left-right. */
  .hero { flex-direction: column; align-items: flex-start; gap: 14px; }
  .verdict { text-align: left; width: 100%; }
  .ref-line { margin-top: 6px; }

  /* clamp() already scales this, but 11vw on a narrow phone leaves the seconds
     hard against the edge. Give it a slightly bigger floor and tighter tracking. */
  .clock { font-size: clamp(38px, 13vw, 60px); letter-spacing: 0; }

  /* Two columns, not one: six stat cards single-file is a lot of thumb. */
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { padding: 12px; }
  .card-value { font-size: 21px; }

  .spark-big { height: 90px; }
  .snr { min-height: 150px; }

  /* Swipe the source table rather than wrap it. The shadow hint tells the reader
     there IS more to the right — otherwise a cut-off column just looks broken. */
  .table-hold {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--panel) 30%, transparent) left / 24px 100% no-repeat,
      linear-gradient(to left, var(--panel) 30%, transparent) right / 24px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.35), transparent) left / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.35), transparent) right / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .tbl { min-width: 560px; }

  .topbar { padding: 12px 14px; }
  .brand h1 { font-size: 17px; }
  .brand-sub { font-size: 11.5px; }
  .brand-icon { width: 26px; height: 26px; }

  .foot { padding: 10px 14px 24px; }
  /* Three items on one line is unreadable at 375px — let them stack. */
  .foot-meta { flex-direction: column; align-items: flex-start; gap: 6px; }
}

@media (max-width: 560px) {
  .ss-plate__link { flex-direction: column; align-items: flex-start; }
}

/* Comfortable thumb targets. The WCAG 2.2 minimum is 24px; 44px is the iOS HIG
   figure and the one that actually feels right when you're standing up. */
@media (pointer: coarse) {
  .foot-docs, .ss-plate__link { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* "approx" marker when GPSNTP_POSITION=coarse */
.pos-note { color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }