/* =========================================================================
 * KG-DIFF — NRS-KG page-change observatory
 *
 * Aesthetic flavor: "radar observatory log" — phosphor-green-on-near-black,
 *   IBM Plex Mono dominant. Borrowed visual cues from CRT radarscopes and
 *   night-sky observation logs. Distinct from the existing flavors:
 *   - kg.html      → engineering schematic (amber/cyan on dark blue grid)
 *   - healthlog    → terminal sparklines (multi-color metric tiles)
 *   - bench.html   → scientific scoreboard (parchment + brass)
 *   - timeline.html→ chronicle / system logbook (parchment + ink)
 *   - panel.html   → utilitarian dashboard (Scandinavian gray)
 *   - aedln0d/index → Swedish newspaper Q&A (warm paper)
 *
 * Body text is phosphor on near-black: #d6f7e3 on #050a08 is ~14.5:1
 *   contrast, well clear of WCAG AA 4.5:1.
 *
 * NO innerHTML in diff.js — DOM is built strictly via createElement.
 * ========================================================================= */

:root {
  /* surfaces — vacuum-tube black */
  --void:           #050a08;
  --void-d:         #02050a;
  --shelf:          #0c1612;
  --shelf-2:        #142019;
  --rule:           #1d2e25;
  --rule-strong:    #2a4337;

  /* phosphor inks (CRT-style) */
  --phos:           #3dffaf;   /* primary radar green */
  --phos-bright:    #6fffc7;
  --phos-dim:       #2a8a64;
  --phos-glow:      rgba(61, 255, 175, 0.18);

  /* body ink — readable cool-white tint */
  --ink-0:          #d6f7e3;   /* body text · ~14.5:1 contrast on --void */
  --ink-1:          #8db3a1;   /* secondary labels · ~7.5:1 */
  --ink-2:          #4e7065;   /* muted · ~4.6:1 — at AA threshold */
  --ink-3:          #2b463c;   /* axis ticks, lines */

  /* signals */
  --pos:            #6fffc7;   /* additions / +Δ */
  --neg:            #ff8b6f;   /* deletions / -Δ */
  --warn:           #ffd66f;   /* warning */
  --err:            #ff5252;

  --pad:            clamp(16px, 2.4vw, 28px);
  --container:      1320px;
  --hair:           1px;

  --font-display:   'Chakra Petch', 'IBM Plex Mono', monospace;
  --font-sans:      'Familjen Grotesk', system-ui, sans-serif;
  --font-mono:      'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  background:
    /* sweep glow centered top-left */
    radial-gradient(900px 600px at 12% -10%, rgba(61,255,175,0.05), transparent 60%),
    radial-gradient(700px 500px at 100% 110%, rgba(61,255,175,0.03), transparent 60%),
    /* CRT scanline shimmer (extremely subtle) */
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 2px,
      rgba(61,255,175,0.012) 2px,
      rgba(61,255,175,0.012) 3px
    ),
    var(--void);
  background-attachment: fixed;
  color: var(--ink-0);
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* ── corner registration marks (observatory mood) ─────────────────────── */
.reg {
  position: fixed;
  width: 18px; height: 18px;
  border: 1px solid var(--rule-strong);
  pointer-events: none;
  z-index: 2;
}
.reg::before, .reg::after {
  content: ''; position: absolute; background: var(--rule-strong);
}
.reg::before { left: 50%; top: -5px; bottom: -5px; width: 1px; transform: translateX(-50%); }
.reg::after  { top: 50%; left: -5px; right: -5px; height: 1px; transform: translateY(-50%); }
.reg.tl { top: 14px;    left: 14px; }
.reg.tr { top: 14px;    right: 14px; }
.reg.bl { bottom: 14px; left: 14px; }
.reg.br { bottom: 14px; right: 14px; }

/* ── top strip ─────────────────────────────────────────────────────────── */
.strip {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px var(--pad);
  border-bottom: var(--hair) solid var(--rule);
  background: linear-gradient(to bottom, var(--shelf) 0%, transparent 100%);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-1);
  z-index: 3;
}

.strip-l, .strip-r {
  display: flex; align-items: center; gap: 14px;
}

.sweep {
  display: inline-flex;
  width: 22px; height: 22px;
  color: var(--phos);
  filter: drop-shadow(0 0 4px var(--phos-glow));
  animation: sweep-spin 6s linear infinite;
}
.sweep svg { display: block; }
@keyframes sweep-spin {
  to { transform: rotate(360deg); }
}

.brand {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.22em;
  color: var(--phos);
  text-shadow: 0 0 8px var(--phos-glow);
}
.sub {
  font-style: italic;
  color: var(--ink-1);
}
.sep {
  color: var(--ink-3);
  opacity: 0.7;
}
.stamp {
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}
.stamp.link {
  color: var(--ink-0);
  border-bottom: 1px dotted var(--rule-strong);
  padding-bottom: 1px;
  transition: color 120ms, border-color 120ms;
}
.stamp.link:hover {
  color: var(--phos);
  border-color: var(--phos);
}

#status-dot {
  display: inline-flex; align-items: center; gap: 6px;
}
#status-dot .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-2);
  box-shadow: 0 0 4px transparent;
}
#status-dot[data-state="ok"]   .dot { background: var(--phos);       box-shadow: 0 0 6px var(--phos-glow); }
#status-dot[data-state="boot"] .dot { background: var(--warn);       animation: blink 1.2s ease-in-out infinite; }
#status-dot[data-state="err"]  .dot { background: var(--err);        box-shadow: 0 0 6px rgba(255,82,82,0.35); }
#status-dot[data-state="empty"].dot { background: var(--ink-2); }
@keyframes blink { 50% { opacity: 0.35; } }

/* ── page container ────────────────────────────────────────────────────── */
.page {
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px var(--pad) 56px;
  display: grid;
  gap: 22px;
}

/* ── card shell (shared by spark + feed) ───────────────────────────────── */
.spark-card, .feed, .filters {
  background: rgba(12,22,18,0.65);
  border: var(--hair) solid var(--rule);
  position: relative;
}
.spark-card::before, .feed::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px dashed var(--rule);
  opacity: 0.4;
  pointer-events: none;
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 18px;
  border-bottom: var(--hair) solid var(--rule);
  font-family: var(--font-mono);
}
.card-h {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--phos);
  text-transform: lowercase;
  font-weight: 400;
}
.card-meta {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--ink-1);
  text-transform: uppercase;
}
.meta-label { color: var(--ink-2); }
.meta-val   { color: var(--ink-0); font-variant-numeric: tabular-nums; }
.meta-sep   { color: var(--ink-3); }

/* ── sparkline ─────────────────────────────────────────────────────────── */
.spark-host {
  padding: 18px 18px 8px;
  min-height: 150px;
  position: relative;
}
.spark-host svg {
  width: 100%; height: 140px;
  display: block;
}
.placeholder {
  margin: 0;
  padding: 28px 8px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  text-transform: lowercase;
}
.spark-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 8px 18px 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--ink-1);
  text-transform: uppercase;
}
.spark-legend .item {
  display: inline-flex; align-items: center; gap: 6px;
}
.spark-legend .swatch {
  width: 12px; height: 8px;
  display: inline-block;
  border: 1px solid currentColor;
}
.spark-legend .count {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.legend-empty {
  color: var(--ink-2);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.04em;
}

/* SVG sparkline inner styles — set via attribute, but day labels and axes
 * are styled here to keep CSS centralized. */
.spark-host text {
  font-family: var(--font-mono);
  fill: var(--ink-2);
}
.spark-host .day-label { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; }
.spark-host .y-tick    { font-size: 8.5px; }
.spark-host .baseline  { stroke: var(--rule); stroke-width: 0.7; stroke-dasharray: 1 3; }

/* ── filters bar ───────────────────────────────────────────────────────── */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.filt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-1);
}
.filt-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.filt select, .filt input[type="text"] {
  background: var(--void);
  color: var(--ink-0);
  border: 1px solid var(--rule);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 8px;
  min-width: 90px;
  border-radius: 0;
  outline: none;
  transition: border-color 120ms, color 120ms;
}
.filt select:focus, .filt input[type="text"]:focus {
  border-color: var(--phos);
  color: var(--phos-bright);
}
.filt-auto input[type="checkbox"] {
  accent-color: var(--phos);
  width: 12px; height: 12px;
}
.btn {
  background: var(--void);
  color: var(--phos);
  border: 1px solid var(--phos-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 12px;
  cursor: pointer;
  transition: background-color 120ms, color 120ms, border-color 120ms;
  margin-left: auto;
}
.btn:hover {
  background: var(--phos);
  color: var(--void);
  border-color: var(--phos);
}
.btn:active {
  transform: translateY(1px);
}

/* ── feed table ────────────────────────────────────────────────────────── */
.feed-head, .feed-row {
  display: grid;
  grid-template-columns:
    minmax(150px, 1.2fr)  /* ts */
    50px                  /* nat */
    minmax(80px, 1fr)     /* reg */
    minmax(220px, 3fr)    /* url */
    100px                 /* Δ */
    minmax(140px, 1.4fr); /* sha */
  gap: 14px;
  align-items: center;
  padding: 8px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.feed-head {
  border-bottom: var(--hair) solid var(--rule-strong);
  color: var(--ink-2);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-top: 10px;
  padding-bottom: 10px;
  background: rgba(20,32,25,0.5);
}
.feed-body {
  max-height: 60vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}
.feed-body::-webkit-scrollbar { width: 8px; }
.feed-body::-webkit-scrollbar-track { background: transparent; }
.feed-body::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border: 2px solid var(--void);
}
.feed-row {
  border-bottom: 1px dashed var(--rule);
  color: var(--ink-0);
  transition: background-color 120ms;
}
.feed-row:hover { background: rgba(61,255,175,0.04); }
.feed-row:last-child { border-bottom: 0; }

.col-ts {
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}
.col-nat {
  color: var(--phos);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.col-reg {
  color: var(--ink-0);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.col-url a {
  color: var(--ink-0);
  border-bottom: 1px dotted var(--rule-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.col-url a:hover {
  color: var(--phos-bright);
  border-color: var(--phos);
}
.col-d {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.col-d.pos { color: var(--pos); }
.col-d.neg { color: var(--neg); }
.col-d.zero { color: var(--ink-2); }
.col-sha {
  color: var(--ink-1);
  font-size: 11px;
}
.col-sha .arrow { color: var(--ink-3); margin: 0 4px; }
.col-sha .sha-new { color: var(--phos); }
.col-sha .sha-old { color: var(--ink-2); }

/* empty state */
.empty-state {
  padding: 48px 18px;
  text-align: center;
  font-family: var(--font-mono);
}
.empty-state .es-mark {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--phos-dim);
  letter-spacing: 0.2em;
  margin-bottom: 14px;
}
.empty-state .es-title {
  color: var(--ink-0);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.empty-state .es-hint {
  color: var(--ink-2);
  font-size: 11.5px;
  line-height: 1.55;
  max-width: 520px;
  margin: 0 auto;
}
.empty-state code {
  color: var(--phos-bright);
  background: var(--shelf-2);
  padding: 1px 6px;
  font-size: 11px;
  border: 1px solid var(--rule);
}

/* ── footer ────────────────────────────────────────────────────────────── */
.margin {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: var(--hair) solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.margin-link {
  color: var(--ink-0);
  border-bottom: 1px dotted var(--rule-strong);
  transition: color 120ms, border-color 120ms;
}
.margin-link:hover { color: var(--phos); border-color: var(--phos); }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .feed-head, .feed-row {
    grid-template-columns:
      minmax(110px, 1fr)
      40px
      minmax(60px, 0.8fr)
      minmax(140px, 2fr)
      70px;
    gap: 10px;
  }
  .feed-head .col-sha, .feed-row .col-sha { display: none; }
  .strip {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  .strip-r { flex-wrap: wrap; }
  .filters { gap: 10px 16px; }
  .btn { margin-left: 0; }
}