:root {
  color-scheme: dark light;
  --bg: #0b0f14;
  --panel: #131a22;
  --border: #263140;
  --text: #e6edf3;
  --muted: #8b98a5;
  --accent: #4ea1ff;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f7f9;
    --panel: #ffffff;
    --border: #dde3e9;
    --text: #14202b;
    --muted: #57697a;
    --accent: #1266d1;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 24px 16px 60px;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
header {
  max-width: 1100px;
  margin: 0 auto 24px;
}
h1 {
  font-size: 1.5rem;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
header p {
  color: var(--muted);
  margin: 0 0 12px;
  font-size: 0.9rem;
}
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.88rem;
}
nav a {
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
nav a:hover {
  color: var(--text);
}
nav a.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
main {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 20px;
}
.diag-select-row {
  max-width: 1100px;
  margin: 0 auto 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.diag-select-row a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
}
.diag-select-row a:hover {
  color: var(--text);
}
.diag-select-row a.active {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, var(--panel));
}
.run-select-row {
  max-width: 1100px;
  margin: 0 auto 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}
.run-select-row label {
  color: var(--muted);
}
.run-controls {
  display: flex;
  align-items: stretch;
  gap: 6px;
  max-width: 100%;
}
.run-select-row select,
.run-controls button {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.9rem;
}
.run-controls select { min-width: 0; }
.run-controls button {
  flex: 0 0 40px;
  min-height: 40px;
  padding: 6px;
  font-size: 1.15rem;
  cursor: pointer;
}
.run-controls button:hover:not(:disabled) { border-color: var(--accent); }
.run-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.run-controls button:disabled { opacity: 0.35; cursor: default; }
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}
.card h2 {
  font-size: 1rem;
  margin: 0 0 4px;
}
.card .meta {
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0 0 12px;
}
.card img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  background: #fff;
}
.missing {
  color: var(--muted);
  font-size: 0.85rem;
  font-style: italic;
  padding: 40px 0;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 6px;
}
.empty {
  color: var(--muted);
  font-size: 0.9rem;
  font-style: italic;
  padding: 40px 0;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 6px;
  max-width: 1100px;
  margin: 0 auto;
}
footer {
  max-width: 1100px;
  margin: 32px auto 0;
  color: var(--muted);
  font-size: 0.78rem;
}
a { color: var(--accent); }

.page-heading {
  max-width: 1100px;
  margin: 36px auto 14px;
  font-size: 1.1rem;
}
.page-heading:first-of-type {
  margin-top: 0;
}
.filter-group {
  max-width: 1100px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.filter-label {
  color: var(--muted);
  font-size: 0.82rem;
  min-width: 100px;
}
.filter-row.diag-select-row {
  margin: 0;
  justify-content: flex-start;
  gap: 8px;
}
.filter-row.diag-select-row a {
  padding: 4px 10px;
  font-size: 0.82rem;
}
.table-wrap {
  max-width: 1100px;
  margin: 10px auto 20px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  white-space: nowrap;
}
th, td {
  text-align: left;
  padding: 10px 14px;
}
thead th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border);
}
tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--border);
}
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  border: 1px solid var(--border);
}
.badge-ssw {
  color: #ff6b6b;
  border-color: #ff6b6b;
  background: color-mix(in srgb, #ff6b6b 12%, var(--panel));
}
.badge-fw {
  color: var(--muted);
}
.badge-pwd {
  color: #4ea1ff;
  border-color: #4ea1ff;
  background: color-mix(in srgb, #4ea1ff 12%, var(--panel));
}
.badge-nwd {
  color: #b388ff;
  border-color: #b388ff;
  background: color-mix(in srgb, #b388ff 12%, var(--panel));
}
.methodology {
  max-width: 1100px;
  margin: 0 auto 20px;
  display: grid;
  gap: 14px;
}
.method-entry {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.method-entry h3 {
  margin: 0 0 6px;
  font-size: 0.92rem;
}
.method-entry p {
  margin: 0 0 6px;
  font-size: 0.85rem;
  line-height: 1.4;
}
.method-entry p:last-child {
  margin-bottom: 0;
}
.method-entry .citation {
  padding-left: 1.25rem;
  text-indent: -1.25rem;
  overflow-wrap: anywhere;
}
.method-entry .meta {
  color: var(--muted);
  font-size: 0.8rem;
}

.site-footer p {
  margin: 0 0 8px;
  line-height: 1.45;
}
.site-footer .disclaimer {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
}

.site-footer .caveats {
  margin: 0 0 10px;
  font-size: 0.8rem;
}
.site-footer .caveats summary {
  cursor: pointer;
  color: var(--text);
  margin-bottom: 6px;
}
.site-footer .caveats ul {
  margin: 6px 0 0;
  padding-left: 20px;
}
.site-footer .caveats li {
  margin-bottom: 6px;
  line-height: 1.45;
}

/* ---- frame viewer (viewer.js) ---- */
.viewer { outline: none; }
.viewer-canvas { display: block; width: 100%; height: auto; cursor: pointer; border-radius: 4px; background: #fff; }
.viewer-bar { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.viewer-slider { flex: 1 1 200px; min-width: 120px; accent-color: var(--accent); }
.viewer-label { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; min-width: 12em; }
.viewer-opts { display: flex; align-items: center; gap: 16px; margin-top: 6px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.viewer-opts label { display: inline-flex; align-items: center; gap: 4px; }
.viewer-delay { width: 5.5em; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 3px 5px; }
.viewer-btn { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 5px 14px; font: inherit; cursor: pointer; min-width: 4.5em; }
.viewer-btn:hover { border-color: var(--accent); }
.viewer-progress { font-size: 12px; }
.viewer-dl { color: var(--accent); margin-left: auto; }
.card img + .viewer-dl { display: inline-block; margin-top: 6px; }

/* status line (index) and under-construction banner (events) */
.status-line { max-width: 1100px; margin: 0 auto 8px; font-size: 13px; color: var(--muted); }
.status-line.stale { color: #b45309; font-weight: 600; }
.construction-banner { max-width: 1100px; box-sizing: border-box; margin: 12px auto; padding: 14px 18px; border: 2px solid #d99a00; border-left-width: 8px; border-radius: 6px; background: #fff4cc; color: #4a3500; font-size: 15px; line-height: 1.45; }
@media (prefers-color-scheme: dark) { .construction-banner { background: #3a2d05; color: #ffe08a; border-color: #d99a00; } .status-line.stale { color: #f0b04a; } }

/* frame strip: greyed until NCEP has posted the frame */
.viewer-strip { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.viewer-chip { font-size: 11px; font-variant-numeric: tabular-nums; padding: 2px 6px; min-width: 2.6em; text-align: center; border: 1px solid var(--border); border-radius: 4px; background: var(--panel); color: var(--accent); text-decoration: none; cursor: pointer; }
.viewer-chip:hover { border-color: var(--accent); }
.viewer-chip.current { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); border-color: var(--accent); color: var(--text); font-weight: 600; }
.viewer-chip.pending { color: var(--muted); opacity: .4; cursor: not-allowed; border-style: dashed; }
.viewer-btn:disabled, .viewer-delay:disabled { opacity: .45; cursor: not-allowed; }

/* events: clickable rows, QBO badge, retrospective detail panel */
.event-notice {
  max-width: 1100px;
  margin: 0 auto 14px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.5;
}
.event-intro {
  max-width: 1100px;
  margin: 0 auto 20px;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.5;
}
.event-intro p { margin: 0 0 8px; }
.table-hint { max-width: 1100px; color: var(--muted); font-size: 13px; margin: 6px auto; }
tr.event-row { cursor: pointer; }
tr.event-row:hover td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
tr.event-row.selected td { background: color-mix(in srgb, var(--accent) 16%, transparent); }
tr.event-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.retro-mark { color: var(--accent); font-size: 11px; margin-left: 4px; }
.badge-qbo { color: #0f9d8a; border-color: #0f9d8a; background: color-mix(in srgb, #0f9d8a 12%, transparent); }
.event-detail:empty { display: none; }

.supplement { margin: 14px 0 0; }
.supplement img { display: block; width: 100%; height: auto; border-radius: 4px; background: #fff; }
.supplement figcaption { color: var(--muted); font-size: 12px; margin-top: 4px; }

.badge-minor { color: #ad7923; border-color: #ad7923; background: color-mix(in srgb, #ad7923 12%, transparent); }
.event-jumps button { font: inherit; font-size: 13px; cursor: pointer; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 6px 10px; }
.event-jumps button:hover { border-color: currentColor; }

/* A single, readable development disclosure at the foot of every page. */
.site-footer .development-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--text); font-size: 13px; line-height: 1.5; }
.site-footer .development-note p { line-height: 1.5; }
.site-footer .development-meta { color: var(--muted); font-size: 12px; }