/* ============================================================================
   Defense Trackers — recon-console design system.

   Constraints that are features, not limits:
     - system fonts only. No webfont request, so it renders identically
       air-gapped and will not rot when a font CDN dies.
     - the freshness signal light is THE element. A badge is a promise about
       time; everything else is quiet so that promise is loud.
     - dark-first ops aesthetic, full light-mode parity via prefers-color-scheme.
     - no framework, no build. This file is the entire design.
   ========================================================================== */

:root {
  --bg:        #0a0d13;
  --bg-tint:   #0d1119;
  --panel:     #10141d;
  --panel-2:   #141a25;
  --ink:       #e7eaf0;
  --ink-2:     #aeb8c8;
  --dim:       #6b7689;
  --line:      #1b2130;
  --line-2:    #28303f;
  --brand:     #5eb1ff;
  --brand-dim: #2f4866;
  --ok:        #35d07f;
  --warn:      #e3b341;
  --bad:       #ff6b81;
  --ok-bg:     #0f2419;
  --warn-bg:   #241f10;
  --bad-bg:    #2a1219;
  --shadow:    0 1px 0 rgba(255,255,255,.02), 0 8px 24px -16px rgba(0,0,0,.7);
  --radius:    10px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:        #fbfcfd;
    --bg-tint:   #f4f7fb;
    --panel:     #ffffff;
    --panel-2:   #f6f8fa;
    --ink:       #0f1722;
    --ink-2:     #2f3a48;
    --dim:       #5b6675;
    --line:      #e4e9f0;
    --line-2:    #d4dbe5;
    --brand:     #0a5dab;
    --brand-dim: #b9d4f0;
    --ok:        #1a7f37;
    --warn:      #9a6700;
    --bad:       #cf222e;
    --ok-bg:     #e7f6ec;
    --warn-bg:   #fbf3d6;
    --bad-bg:    #fdeaec;
    --shadow:    0 1px 2px rgba(16,23,34,.04), 0 10px 30px -20px rgba(16,23,34,.25);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 78ch; margin: 0 auto; padding: 0 1.25rem; }

::selection { background: var(--brand-dim); color: var(--ink); }

.mono {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .85em;
  font-variant-ligatures: none;
}
.dim { color: var(--dim); }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; }

/* ---- masthead: the scope ------------------------------------------------- */

.masthead {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg-tint);
}
.masthead::before {
  /* faint radar wash + grid; pure CSS, no images */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 80% -20%, color-mix(in oklab, var(--brand) 14%, transparent), transparent 60%),
    repeating-linear-gradient(0deg,   transparent 0 39px, color-mix(in oklab, var(--line) 50%, transparent) 39px 40px),
    repeating-linear-gradient(90deg,  transparent 0 39px, color-mix(in oklab, var(--line) 50%, transparent) 39px 40px);
  opacity: .5;
  pointer-events: none;
  mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
}
.masthead .wrap { position: relative; padding-top: 1.1rem; padding-bottom: 1.6rem; }

.sysbar {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding-bottom: 1.4rem;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.mark { color: var(--brand); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .mark .sweep { transform-origin: 16px 16px; animation: sweep 6s linear infinite; }
}
@keyframes sweep { to { transform: rotate(360deg); } }
.wordmark {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600; font-size: .98rem; letter-spacing: .2em; text-transform: uppercase;
}
.nav { margin-left: auto; display: flex; gap: 1.1rem; align-items: center; font-size: .82rem; }
.nav a { color: var(--ink-2); }
.clock { color: var(--dim); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; }

.title { font-size: clamp(1.6rem, 4.5vw, 2.3rem); font-weight: 650; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5rem; }
.tagline { color: var(--ink-2); font-size: 1.02rem; margin: 0 0 1.2rem; max-width: 60ch; }

/* status pills: the system's vitals at a glance */
.vitals { display: flex; gap: .5rem; flex-wrap: wrap; align-items: stretch; }
.vital {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .5rem .8rem; min-width: 6.5rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.vital .num { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.3rem; font-weight: 600; line-height: 1; }
.vital .lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--dim); }
.vital.attn .num { color: var(--warn); }
.vital.ok .num { color: var(--ok); }

/* ---- legend: transparency is the brand ----------------------------------- */
.legend { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .78rem; color: var(--dim); margin: 1.4rem 0 0; }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend .dot { width: .55em; height: .55em; border-radius: 50%; }
.legend .dot.ok { background: var(--ok); } .legend .dot.warn { background: var(--warn); } .legend .dot.bad { background: var(--bad); }

main { padding: 2rem 0 4rem; }
h2 { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--dim); margin: 0 0 1rem; }
section + section { margin-top: 2.6rem; }

/* ---- tracker board ------------------------------------------------------- */
.tracker-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.track {
  display: flex; align-items: stretch; gap: .9rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .85rem 1rem .85rem .85rem; box-shadow: var(--shadow);
  transition: border-color 140ms ease, transform 140ms ease;
}
.track:hover { border-color: var(--line-2); transform: translateY(-1px); }
.track .rail { flex: none; width: 3px; border-radius: 3px; background: var(--line-2); align-self: stretch; }
.track[data-state="ok"]   .rail { background: var(--ok); }
.track[data-state="warn"] .rail { background: var(--warn); }
.track[data-state="bad"]  .rail { background: var(--bad); }
.track-main { flex: 1 1 auto; min-width: 0; }
.track-name { font-size: 1.08rem; font-weight: 600; color: var(--ink); }
.track-id { margin-left: .5rem; }
.track-msg { margin-top: .25rem; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-status { flex: none; align-self: center; }
.track-desc-line { font-size: .88rem; color: var(--ink-2); margin-top: .35rem; max-width: 78ch; }

/* ---- the signal light: signature element --------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .76rem; padding: .28rem .6rem; border-radius: 999px; border: 1px solid;
}
.badge .dot { width: .55em; height: .55em; border-radius: 50%; background: currentColor; flex: none; }
.badge.ok   { color: var(--ok);   border-color: color-mix(in oklab, var(--ok) 45%, transparent);   background: var(--ok-bg); }
.badge.warn { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 45%, transparent); background: var(--warn-bg); }
.badge.bad  { color: var(--bad);  border-color: color-mix(in oklab, var(--bad) 45%, transparent);  background: var(--bad-bg); }
@media (prefers-reduced-motion: no-preference) {
  .badge.ok .dot.live {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 70%, transparent);
    animation: pulse 2.4s ease-out infinite;
  }
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 60%, transparent); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.empty { color: var(--dim); padding: 1.2rem; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--radius); }

/* ---- tracker detail page ------------------------------------------------- */
.crumb { font-size: .82rem; margin: 0 0 1rem; }
.detail-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0 0 .4rem; }
.detail-head h1 { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.6rem; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.chips { display: flex; gap: .5rem; flex-wrap: wrap; margin: .8rem 0 0; }
.chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .76rem;
  padding: .3rem .7rem; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2); background: var(--panel);
}
.chip:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.detail-msg { color: var(--dim); font-size: .85rem; margin: .6rem 0 0; }

.hint { color: var(--dim); font-size: .82rem; margin: 0 0 1rem; display: flex; align-items: center; gap: .4rem; }
.hint svg { flex: none; color: var(--brand); }

/* wider canvas on tracker pages so data tables breathe edge-to-edge */
.t-page .wrap { max-width: 1120px; }
.t-desc { color: var(--ink); font-size: 1.05rem; line-height: 1.5; margin: .15rem 0 .5rem; max-width: 70ch; }

/* changelog: collapsed by default, secondary to the data */
.changelog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.changelog > summary { cursor: pointer; list-style: none; padding: .85rem 1.1rem; display: flex; align-items: baseline; gap: .6rem; }
.changelog > summary::-webkit-details-marker { display: none; }
.changelog > summary::before { content: "▸"; color: var(--dim); font-size: .75rem; }
.changelog[open] > summary::before { content: "▾"; }
.cl-title { font-weight: 600; font-size: .95rem; }
.cl-hint { margin-left: auto; }
.changelog .events { margin: 0 1.1rem 1.1rem; }

/* changelog timeline */
.events { list-style: none; margin: 0; padding: .4rem 0 0 1rem; border-left: 1px solid var(--line-2); }
.events li { position: relative; padding: .45rem 0 .45rem 1rem; font-size: .9rem; }
.events li::before { content: ""; position: absolute; left: -1.4rem; top: .85rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--line-2); border: 2px solid var(--panel); }
.events li[data-type="added"]::before   { background: var(--ok); }
.events li[data-type="removed"]::before { background: var(--bad); }
.events li[data-type="changed"]::before { background: var(--warn); }
.etype { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; padding: .08rem .4rem; border-radius: 4px; border: 1px solid var(--line-2); }
.etype.added   { color: var(--ok); }
.etype.removed { color: var(--bad); }
.etype.changed { color: var(--warn); }
.ev-ts { margin: 0 .5rem; }
.ev-sum { color: var(--ink-2); }

/* per-source report cards */
.report { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem 1.1rem; margin: 0 0 1.1rem; box-shadow: var(--shadow); }
.report-head { display: flex; align-items: baseline; gap: .6rem; font-size: .95rem; font-weight: 600; margin: 0 0 .7rem; color: var(--ink); }
.report-src { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--brand); }
.report-total { margin-left: .7rem; color: var(--ok); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; font-weight: 600; }
.report-count { margin-left: auto; font-weight: 400; }
.csv-btn { margin-left: .6rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .68rem; padding: .2rem .55rem; border: 1px solid var(--line-2); border-radius: 6px; background: transparent; color: var(--ink-2); cursor: pointer; }
.csv-btn:hover { border-color: var(--brand); color: var(--brand); }
.report-more { margin: .65rem 0 0; font-size: .76rem; }

/* tabbed source switcher */
.report.hidden { display: none; }
.tabbar { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.tab { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; padding: .4rem .8rem; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); color: var(--ink-2); cursor: pointer; }
.tab:hover { color: var(--ink); }
.tab.active { border-color: var(--brand); color: var(--brand); background: color-mix(in oklab, var(--brand) 12%, transparent); }

/* summary bar chart */
.barchart { margin: .2rem 0 1.1rem; display: flex; flex-direction: column; gap: .4rem; }
.bc-row { display: flex; align-items: center; gap: .7rem; }
.bc-label { flex: 0 0 24ch; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.bc-track { flex: 1; height: 16px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.bc-bar { display: block; height: 100%; background: color-mix(in oklab, var(--brand) 55%, transparent); border-radius: 4px; }
.bc-val { flex: 0 0 auto; font-size: .8rem; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 640px) { .bc-label { flex-basis: 13ch; max-width: 13ch; } }
.table-scroll { overflow-x: auto; }
.report-table { border-collapse: collapse; width: 100%; font-size: .86rem; }
.report-table th { text-align: left; font-weight: 600; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); border-bottom: 1px solid var(--line-2); padding: .45rem 1.1rem .45rem 0; white-space: nowrap; }
.report-table td { padding: .5rem 1.1rem .5rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.report-table tbody tr:last-child td { border-bottom: none; }
.report-table tbody tr:hover { background: var(--panel-2); }
.report-table tbody tr.rowlink { cursor: pointer; }
.report-table tbody tr.rowlink:hover td:first-child { color: var(--brand); }
.report-table .col-name { font-weight: 600; max-width: 40ch; }
.report-table td:not(.col-name) { color: var(--ink-2); }
.report-table th.num, .report-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.report-table th { cursor: pointer; user-select: none; }
.report-table th:hover { color: var(--ink-2); }
.sort-arrow { color: var(--brand); font-size: .7em; }
.filter-box { width: 100%; max-width: 440px; margin: 0 0 1.3rem; padding: .55rem .8rem; background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; color: var(--ink); font: inherit; font-size: .9rem; }
.filter-box:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.filter-box::placeholder { color: var(--dim); }

/* key-stat strip */
.statstrip { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.1rem; }
.stat-chip { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; padding: .4rem .75rem; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); }
.stat-chip b { color: var(--ink); font-weight: 600; font-size: 1rem; }
.stat-chip.warn { border-color: color-mix(in oklab, var(--warn) 55%, transparent); }
.stat-chip.warn b { color: var(--warn); }

/* closing-soon / past rows */
.report-table tr.row-soon td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.soon-tag { color: var(--warn); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; margin-left: .4rem; white-space: nowrap; }
.report-table tr.row-past { opacity: .5; }

/* cross-tracker search (homepage) */
.gsearch { width: 100%; margin: 0 0 1.2rem; padding: .7rem .95rem; background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; color: var(--ink); font: inherit; font-size: 1rem; }
.gsearch:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.gsearch::placeholder { color: var(--dim); }
.gresults { margin: 0 0 2rem; }
.gres-head { margin: 0 0 1rem; }
.gres-group { margin: 0 0 1.1rem; padding: 0 0 .7rem; border-bottom: 1px solid var(--line); }
.gres-tracker { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; color: var(--brand); margin-bottom: .35rem; }
.gres-row { font-size: .9rem; color: var(--ink-2); padding: .12rem 0; }

/* sparkline */
.sparkline { margin: 1rem 0 0; display: flex; align-items: center; gap: .6rem; }
.spark-path { stroke: var(--brand); }
.spark-label { font-size: .72rem; }

/* closing-soon homepage panel */
.closing-soon { margin: 0 0 2rem; padding: 1rem 1.15rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.closing-soon h2 { margin: 0 0 .8rem; color: var(--ink); text-transform: none; letter-spacing: -.01em; font-size: 1.05rem; }
.soon-list { list-style: none; margin: 0; padding: 0; }
.soon-list li { display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.soon-list li:last-child { border-bottom: none; }
.soon-date { color: var(--warn); white-space: nowrap; font-size: .82rem; }
.soon-title { flex: 1 1 28ch; }

/* about-this-tracker */
.about { margin: .9rem 0 0; }
.about > summary { cursor: pointer; color: var(--ink-2); font-size: .85rem; }
.about-sources { list-style: none; margin: .6rem 0; padding: 0; }
.about-sources li { padding: .2rem 0; font-size: .85rem; }
.about-body p { font-size: .85rem; }

/* AI search page */
.beta-tag { font-size: .45em; vertical-align: super; color: var(--brand); border: 1px solid var(--brand-dim); border-radius: 6px; padding: .15em .45em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; }
.ai-status { color: var(--ink-2); font-size: .9rem; max-width: 72ch; }
.ai-enable { font-family: inherit; font-size: .95rem; padding: .6rem 1.1rem; border: 1px solid var(--brand); border-radius: 10px; background: color-mix(in oklab, var(--brand) 14%, transparent); color: var(--ink); cursor: pointer; margin: 1rem 0; }
.ai-enable:hover { background: color-mix(in oklab, var(--brand) 24%, transparent); }
.ai-progress { color: var(--ink-2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; margin: .5rem 0; }
#ai-q { margin-bottom: .6rem; }
.ai-answer { white-space: pre-wrap; line-height: 1.6; margin: 1rem 0; padding: 1rem 1.1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.ai-answer:empty { display: none; }
.ai-cites h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin: 1.4rem 0 .5rem; }
.ai-cites ol { padding-left: 1.2rem; margin: 0; }
.ai-cites li { font-size: .88rem; padding: .15rem 0; color: var(--ink-2); }

/* ---- prose (methodology) ------------------------------------------------- */
.prose h2 { color: var(--ink); text-transform: none; letter-spacing: -.01em; font-size: 1.15rem; margin-top: 2rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { padding-left: 1.2rem; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; background: var(--panel-2); padding: .1rem .35rem; border-radius: 4px; border: 1px solid var(--line); }

footer { border-top: 1px solid var(--line); padding: 1.5rem 0 3rem; color: var(--dim); font-size: .83rem; }
footer .wrap > p { margin: .45rem 0; }
footer a { color: var(--ink-2); }

@media (prefers-reduced-motion: no-preference) {
  a, .track, .chip { transition: color 120ms ease, border-color 140ms ease, transform 140ms ease; }
}