/*
 * Shared design system for threats.top
 *
 * One stylesheet for every page: tokens, the console shell (persistent left
 * rail + top bar), page furniture, controls, tabs, badges, feed rows, toast.
 *
 * Page-specific rules stay in the page. If a rule here would only ever match
 * one page, it belongs in that page's <style> block.
 */

:root {
  --bg: #07080b;
  --bg-elev: #0b0d12;
  --surface: #0d1016;
  --surface-2: #131821;
  --surface-3: #1a212c;
  --border: #1e2530;
  --border-hover: #333d4d;
  --text: #e9ecf1;
  --text-secondary: #a2acba;
  /* 4.61:1 on the darkest border tone and 5.69:1 on --surface, so muted labels
     stay AA wherever they sit. The previous #707b8c bottomed out at 3.6:1. */
  --text-muted: #808da6;
  --accent: #f97316;
  --accent-soft: rgba(249, 115, 22, 0.1);
  --accent-line: rgba(249, 115, 22, 0.45);
  --link: #5cc8ff;
  --ok: #3ddc97;

  /* Severity. Defined here rather than only in cves.html so any page that
     renders a score uses the same mapping. */
  --crit: #ef4444;
  --high: #f97316;
  --med: #eab308;

  --radius: 12px;
  --radius-sm: 7px;
  --wrap: 1180px;
  --rail-w: 236px;

  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Class-based display rules (flex, grid) otherwise override the user agent's
   [hidden] rule, leaving an empty banner on screen before JS fills it. */
[hidden] { display: none !important; }

html { color-scheme: dark; }

body {
  /* Solid colour and gradients are separate properties: a shorthand layer list
     ending in var(--bg) is opaque to contrast parsers, which then guess the
     page background and report false failures. */
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 440px at 82% -10%, rgba(249, 115, 22, 0.06), transparent 62%),
    radial-gradient(760px 420px at 4% 2%, rgba(92, 200, 255, 0.045), transparent 58%);
  color: var(--text);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Faint engineering grid. Fixed and non-interactive so it never interferes
   with selection or stacking. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 25%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 25%, transparent 100%);
}

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

:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: rgba(249, 115, 22, 0.28); }

/* ── Console shell: left rail ───────────────────────────────────────── */

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail-w);
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 18px 14px 14px;
  background: linear-gradient(180deg, #0a0c11 0%, #08090d 100%);
  border-right: 1px solid var(--border);
}

.rail-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.rail-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  color: #0a0a0a;
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.35), 0 6px 18px rgba(249, 115, 22, 0.16);
}

.rail-name {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
}

.rail-tag {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 3px;
}

.rail-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
}

.rail-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 16px 10px 6px;
}

.rail-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  font-size: 13px;
  color: var(--text-secondary);
  transition: background 0.12s, color 0.12s;
}

.rail-nav a:hover { background: var(--surface-2); color: var(--text); }

.rail-nav a[aria-current="page"] {
  background: var(--accent-soft);
  border-left-color: var(--accent);
  color: var(--text);
}

.rail-nav a .n {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.rail-nav a[aria-current="page"] .n { color: var(--accent); }

.rail-health {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
}

.rail-health .rail-label { padding: 0 0 6px; }

.rail-health-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.rail-health-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.4;
}

.rail-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 4px 0;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
}

.rail-foot a:hover { color: var(--text-secondary); }

/* ── Console shell: top bar ─────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 62px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--border);
  /* 0.92: at 0.82 the hero's orange glow raised the rendered backdrop enough
     that the muted clock dropped to 4.0:1. Blur stays, the tint got denser. */
  background: rgba(7, 8, 11, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crumb a:hover { color: var(--text-secondary); }
.crumb .sep { color: #39424f; }
.crumb .here { color: var(--text); }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  padding: 5px 11px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: border-color 0.12s, color 0.12s;
}

.live-chip:hover { border-color: var(--border-hover); }
.live-chip .dot { width: 6px; height: 6px; }
.live-chip.ok { border-color: rgba(61, 220, 151, 0.32); color: var(--ok); }
.live-chip.ok .dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.12); }
.live-chip.degraded { border-color: rgba(234, 179, 8, 0.35); color: var(--med); }
.live-chip.degraded .dot { background: var(--med); box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.12); }
.live-chip.outage { border-color: rgba(239, 68, 68, 0.42); color: var(--crit); }
.live-chip.outage .dot { background: var(--crit); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14); }

.clock {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  /* AA measured on rendered pixels, not the token ratio: 10.5px muted mono
     medianed 4.0:1 through antialiasing, so it takes the secondary tone. */
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.topbar-date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  /* Same rendered-pixel floor as .clock: 10.5px muted mono antialiases to 4.1:1
     against the topbar's translucent fill. */
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Global search lives in the top bar on the overview page. */
.topbar form {
  flex: 1;
  min-width: 140px;
  max-width: 420px;
  margin: 0;
}

.topbar form input {
  width: 100%;
  border-radius: 999px;
  background: var(--bg-elev);
  padding: 7px 14px;
  font-size: 12px;
}

/* ── Page container ─────────────────────────────────────────────────── */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px 80px;
  position: relative;
  z-index: 1;
}

body.console .wrap {
  margin-left: var(--rail-w);
  margin-right: 0;
  max-width: calc(var(--wrap) + var(--rail-w));
  padding: 0 40px 80px;
}

body.console .wrap > h1:first-of-type,
body.console .wrap > .hero:first-child {
  margin-top: 4px;
}

/* ── Page furniture ─────────────────────────────────────────────────── */

h1 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin-bottom: 6px;
}

.sub {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 28px;
  max-width: 80ch;
  line-height: 1.6;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}

/* ── Controls ───────────────────────────────────────────────────────── */

.controls { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

input, select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 9px 12px;
  transition: border-color 0.12s, background 0.12s;
}

input { flex: 1; min-width: 180px; }
input::placeholder { color: var(--text-muted); }
input:hover, select:hover { border-color: var(--border-hover); }
input:focus, select:focus { border-color: var(--border-hover); background: var(--surface-2); outline: none; }

select { cursor: pointer; }

/* ── Tabs ───────────────────────────────────────────────────────────── */

.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }

.tab {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 7px 12px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.tab:hover { border-color: var(--border-hover); color: var(--text-secondary); }

.tab[aria-selected="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--text);
}

.meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.meta-bar button {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
}

.meta-bar button:hover { border-color: var(--border-hover); color: var(--text-secondary); }

.empty { color: var(--text-muted); padding: 48px 0; text-align: center; font-size: 13px; }

/* ── Buttons ────────────────────────────────────────────────────────── */

/* Shared by checkout, the admin panel and the Pro console so the primary
   action cannot look like three different products. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-hover);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s, filter 0.12s;
}

.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn:disabled:hover { border-color: var(--border-hover); color: var(--text); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
  font-weight: 600;
}
.btn-primary:hover { color: #0a0a0a; filter: brightness(1.08); }

.btn-danger { color: var(--crit); border-color: rgba(239, 68, 68, 0.45); background: transparent; }
.btn-danger:hover { color: var(--crit); border-color: var(--crit); background: rgba(239, 68, 68, 0.08); }

.btn-sm { padding: 5px 10px; font-family: var(--mono); font-size: 11px; }

/* ── Forms ──────────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.field > label,
.field > legend {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.field input,
.field select,
.field textarea { width: 100%; flex: none; min-width: 0; }

textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 9px 12px;
  min-height: 84px;
  resize: vertical;
  transition: border-color 0.12s, background 0.12s;
}

textarea:hover { border-color: var(--border-hover); }
textarea:focus { border-color: var(--border-hover); background: var(--surface-2); outline: none; }

.field .hint { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
.field .err { font-size: 11.5px; color: var(--crit); min-height: 0; line-height: 1.4; }
.field [aria-invalid="true"] { border-color: var(--crit); }

fieldset.field { border: 0; padding: 0; margin: 0; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .span-2 { grid-column: 1 / -1; }

.form-alert {
  border: 1px solid rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.5;
}

.form-alert.ok { border-color: rgba(61, 220, 151, 0.35); background: rgba(61, 220, 151, 0.08); }

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Badges ─────────────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  font-family: var(--mono);
  /* 11px is the floor for functional text; badges carry severity and are also
     links on some pages, so they cannot stay at the old 9.5px. */
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
}

.badge.crit { color: var(--crit); border-color: rgba(239, 68, 68, 0.4); }
.badge.high { color: var(--high); border-color: rgba(249, 115, 22, 0.4); }
.badge.med { color: var(--med); border-color: rgba(234, 179, 8, 0.35); }
.badge.ok { color: var(--ok); border-color: rgba(61, 220, 151, 0.4); }
.badge.muted { color: var(--text-muted); }
.badge.kev { background: var(--crit); color: #fff; border-color: var(--crit); }
.badge.hot { color: var(--accent); border-color: rgba(249, 115, 22, 0.4); }

/* ── Freshness signals ──────────────────────────────────────────────── */

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
  display: inline-block;
}

.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.12); }
.dot.degraded { background: var(--med); box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.12); }
.dot.outage { background: var(--crit); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14); }

.status-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 32px;
  font-size: 12.5px;
  color: var(--text-secondary);
  background: var(--surface);
}

.status-banner.ok { border-color: rgba(61, 220, 151, 0.24); }
.status-banner.degraded { border-color: rgba(234, 179, 8, 0.3); }
.status-banner.outage { border-color: rgba(239, 68, 68, 0.35); }
.status-banner a { color: var(--link); margin-left: auto; white-space: nowrap; }
.status-banner a:hover { text-decoration: underline; }

/* Static explanatory note, and the same element used for a live stale
   warning. `hidden` is the default state on every page that calls
   showStaleNote(), so nothing renders unless a source is actually stale. */
.note {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.6;
  border-left: 2px solid var(--border);
  padding-left: 12px;
  margin-bottom: 20px;
}

.note.warn { border-left-color: var(--accent); color: var(--text-secondary); }
.note a { color: var(--link); }
.note a:hover { text-decoration: underline; }

/* ── Stat grid ──────────────────────────────────────────────────────── */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.stat-grid.three { grid-template-columns: repeat(3, 1fr); }

.stat-card {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  overflow: hidden;
}

.stat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-line), transparent 70%);
  opacity: 0.7;
}

.stat-card .num {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-card .lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ── Panels and the shared world outline ────────────────────────────── */

/* Both the overview teaser and the geography page draw the same Natural Earth
   paths, so the surface, shading steps and legend live here rather than being
   copied into two page style blocks. */
.panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
}

.world { width: 100%; height: auto; display: block; }

/* Land without claims stays a quiet surface so the coloured countries carry
   the signal instead of competing with the coastline. */
.world .country {
  fill: var(--surface-3);
  stroke: var(--bg);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
  transition: fill 0.15s;
}

.world .lvl-1 { fill: rgba(249, 115, 22, 0.24); }
.world .lvl-2 { fill: rgba(249, 115, 22, 0.46); }
.world .lvl-3 { fill: rgba(249, 115, 22, 0.7); }
.world .lvl-4 { fill: var(--accent); }

.world .country.has-claims { cursor: pointer; }
.world .country[tabindex="0"] { cursor: pointer; }
.world .country:hover { stroke: var(--text-secondary); }
.world .country:focus-visible { outline: none; stroke: var(--link); stroke-width: 2; }
.world .country.selected { stroke: var(--link); stroke-width: 1.6; }

.map-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 14px;
}

.swatch { width: 18px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 5px; }
.swatch.lvl-0 { background: var(--surface-3); }
.swatch.lvl-1 { background: rgba(249, 115, 22, 0.24); }
.swatch.lvl-2 { background: rgba(249, 115, 22, 0.46); }
.swatch.lvl-3 { background: rgba(249, 115, 22, 0.7); }
.swatch.lvl-4 { background: var(--accent); }

.map-link {
  color: var(--link);
  font-family: var(--mono);
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
}
.map-link:hover { text-decoration: underline; }

/* ── Feed entries ───────────────────────────────────────────────────── */

/* Shared by the indicator, ransomware, phishing and advisory browsers so
   their card spacing cannot drift apart page by page. */
.feed-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 8px;
  background: var(--surface);
  transition: border-color 0.12s, background 0.12s;
}

.feed-item:hover { border-color: var(--border-hover); background: var(--surface-2); }

.feed-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.feed-title {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
}
.feed-title a:hover { color: var(--link); }

.feed-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}

.feed-desc {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
  margin-top: 8px;
  /* Was 760px, which ran to ~136 characters a line at 1440. */
  max-width: 68ch;
  /* Defanged URLs, hashes and package paths arrive as single unbreakable
     tokens and otherwise push the card past a 390px viewport. */
  overflow-wrap: anywhere;
}

.feed-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 10.5px;
  font-family: var(--mono);
  letter-spacing: 0.02em;
  margin-top: 8px;
}

/* Claim URLs and indicator hashes are long unbroken strings. Without this they
   push the card wider than the viewport on phones. */
.feed-meta > span { min-width: 0; max-width: 100%; }
.feed-meta .mono { overflow-wrap: anywhere; word-break: break-word; }
.feed-title { overflow-wrap: anywhere; }

.mono { font-family: var(--mono); }

.copy-inline {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 3px 8px;
  cursor: pointer;
}
.copy-inline:hover { border-color: var(--border-hover); color: var(--text); }

/* ── Toast ──────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-3);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12.5px;
  padding: 10px 16px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  z-index: 50;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.toast.show { opacity: 1; }

/* ── Tables ─────────────────────────────────────────────────────────── */

.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow-x: auto;
  /* Keeps the first row's rule off the wrapper border. */
  padding: 8px;
  /* Absolutely positioned .visually-hidden labels inside a wide table would
     otherwise resolve against the viewport and widen the document. */
  position: relative;
}

table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
th {
  font-family: var(--mono);
  color: var(--text-muted);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }

/* ── Scrollbars ─────────────────────────────────────────────────────── */

* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-track { background: transparent; }

/* ── Responsive ─────────────────────────────────────────────────────── */

/* Below the desktop breakpoint the rail becomes a horizontal console bar so
   the navigation survives on tablets and phones without a drawer. */
@media (max-width: 1024px) {
  .rail {
    position: sticky;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    background: rgba(8, 10, 14, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow-x: auto;
    z-index: 50;
  }

  /* Fade the last nav item so it reads as scrollable rather than truncated. */
  .rail::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 26px;
    background: linear-gradient(90deg, transparent, rgba(8, 10, 14, 0.96));
    pointer-events: none;
  }

  .rail-brand { padding: 0; margin: 0; border: none; flex-shrink: 0; }
  .rail-tag { display: none; }

  .rail-nav {
    flex-direction: row;
    flex: initial;
    gap: 2px;
    overflow: visible;
  }

  .rail-nav .rail-label { display: none; }
  .rail-nav a {
    white-space: nowrap;
    padding: 6px 10px;
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
  }
  .rail-nav a[aria-current="page"] {
    background: transparent;
    border-bottom-color: var(--accent);
  }
  .rail-nav a .n { display: none; }

  .rail-health, .rail-foot { display: none; }

  body.console .wrap {
    margin: 0 auto;
    max-width: var(--wrap);
    padding: 0 20px 64px;
  }

  .topbar { position: static; height: auto; padding: 14px 0; margin-bottom: 24px; }
}

@media (max-width: 720px) {
  .rail { gap: 10px; padding: 9px 12px; }
  .rail-name { display: none; }
  .rail-mark { width: 28px; height: 28px; font-size: 12px; }

  .topbar { flex-wrap: wrap; gap: 10px; }
  .topbar form { order: 3; max-width: none; flex-basis: 100%; }
  .topbar-right { margin-left: auto; }
  .clock { display: none; }
  .topbar-date { display: none; }

  h1 { font-size: 25px; }

  .tabs { gap: 4px; }
  .tab { padding: 6px 10px; font-size: 10px; }
  .form-grid { grid-template-columns: 1fr; }
  .stat-grid, .stat-grid.three { grid-template-columns: 1fr 1fr; }
  .feed-head { flex-direction: column; }
  .feed-badges { justify-content: flex-start; }
  .status-banner a { margin-left: 0; }
}

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

/* Available to assistive technology, invisible on screen. Used for table
   captions and any label the eye does not need. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 60;
  transform: translateY(-200%);
  background: var(--accent);
  color: #0a0a0a;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
}

.skip-link:focus-visible { transform: none; }