/* =============================================================================
   epoch2038.com — multi-page additions on top of style.css
   Navigation, knowledge-base article layout, tables, risk badges, search.
   ============================================================================= */

:root {
  --nav-height: 56px;
  --risk-critical: rgba(255, 84, 89, 1);
  --risk-high: rgba(230, 129, 97, 1);
  --risk-medium: rgba(255, 191, 0, 1);
  --risk-low: rgba(0, 200, 0, 1);
  --risk-na: rgba(119, 124, 124, 1);
  --risk-varies: rgba(50, 184, 198, 1);
}

html { scroll-padding-top: calc(var(--nav-height) + 16px); }
body { font-size: 15px; overflow-x: hidden; }

/* ---------- top navigation ---------- */
.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-family-terminal);
}
.topnav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  min-height: var(--nav-height);
  max-width: var(--container-xl);
}
.topnav__brand {
  color: var(--color-terminal-green);
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  text-shadow: var(--glow-terminal);
}
.topnav__brand:hover { color: var(--color-terminal-phosphor); }
.topnav__links {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  flex-wrap: wrap;
}
.topnav__links li { margin: 0; }
.topnav__links a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--color-gray-300);
  font-size: 13px;
}
.topnav__links a:hover,
.topnav__links a[aria-current="page"] {
  color: var(--color-terminal-green);
  background: rgba(var(--color-terminal-green-rgb), 0.08);
}
.topnav__toggle, .topnav__burger { display: none; }

/* ---------- search ---------- */
.search { position: relative; }
.search input {
  width: 190px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-terminal-green);
  font-family: var(--font-family-terminal);
  font-size: 13px;
  padding: 7px 10px;
}
.search input:focus { outline: 1px solid var(--color-terminal-green); border-color: transparent; }
.search__results {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: min(440px, 92vw);
  max-height: 70vh;
  overflow-y: auto;
  margin: 0;
  padding: var(--space-4);
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}
.search__results li { margin: 0; }
.search__results a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-family-base);
}
.search__results a:hover, .search__results a.is-active { background: rgba(var(--color-teal-300-rgb), 0.1); }
.search__results strong { display: block; color: var(--color-teal-300); font-size: 14px; }
.search__results span { display: block; color: var(--color-gray-300); font-size: 12px; line-height: 1.4; }
.search__results mark { background: rgba(255, 191, 0, 0.25); color: inherit; }
.search__empty { padding: 10px; color: var(--color-gray-400); font-size: 13px; }

/* ---------- home additions ---------- */
.hero-terminal {
  max-width: 640px;
  margin: var(--space-24) auto 0;
  text-align: left;
  position: relative;
  z-index: 2;
}
.hero-terminal pre { margin: 0; font-size: 13px; white-space: pre-wrap; }
.t-prompt { color: var(--color-terminal-amber); }
.t-dim { color: var(--color-gray-400); }

.overview-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tech-grid { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
.math-display { overflow-x: auto; white-space: pre-wrap; }

.section-lede { text-align: center; max-width: 680px; margin: -12px auto var(--space-24); }
.section-more { text-align: center; margin-top: var(--space-24); }

.start-grid, .news-grid, .explore-grid {
  display: grid;
  gap: var(--space-24);
}
.start-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.news-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.explore-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.news-grid .card h3 { font-size: var(--font-size-lg); }
.news-grid .card h3 a { display: inline; color: var(--color-teal-300); }
.news-grid .incident-date { color: var(--color-terminal-amber); }

.start-card { display: block; color: inherit; border-top: 3px solid var(--color-terminal-green); }
.start-card:hover { color: inherit; }
.start-card__who {
  font-family: var(--font-family-terminal);
  font-size: 12px;
  color: var(--color-terminal-green);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.start-card h3 { margin-top: 6px; }
.start-card p { margin: 0; }

.incidents-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.explore-list { list-style: none; padding: 0; margin: 0; }
.explore-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
  padding: 6px 0;
  margin: 0;
  border-bottom: 1px dashed rgba(60, 60, 60, 0.8);
}
.explore-list li:last-child { border-bottom: 0; }

/* ---------- risk badges ---------- */
.risk {
  display: inline-block;
  font-family: var(--font-family-terminal);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  border: 1px solid currentColor;
  white-space: nowrap;
}
.risk--critical { color: var(--risk-critical); background: rgba(255, 84, 89, 0.12); }
.risk--high { color: var(--risk-high); background: rgba(230, 129, 97, 0.12); }
.risk--medium { color: var(--risk-medium); background: rgba(255, 191, 0, 0.1); }
.risk--low { color: var(--risk-low); background: rgba(0, 200, 0, 0.1); }
.risk--na { color: var(--risk-na); }
.risk--varies { color: var(--risk-varies); background: rgba(50, 184, 198, 0.1); }
.table-wrap--facts .risk { white-space: normal; border-radius: var(--radius-sm); font-size: 13px; padding: 2px 8px; }

/* ---------- knowledge-base layout ---------- */
.page-wiki main { padding-top: var(--space-24); }
.layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-32);
  max-width: var(--container-xl);
  align-items: start;
}
.sidenav {
  position: sticky;
  top: calc(var(--nav-height) + 16px);
  max-height: calc(100vh - var(--nav-height) - 32px);
  overflow-y: auto;
  font-size: 13px;
  padding-right: var(--space-8);
}
.sidenav summary {
  display: none;
  cursor: pointer;
  font-family: var(--font-family-terminal);
  color: var(--color-terminal-green);
  padding: 10px 12px;
}
.sidenav__title {
  font-family: var(--font-family-terminal);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-terminal-amber);
  margin: var(--space-16) 0 var(--space-6);
}
.sidenav__group ul { list-style: none; padding: 0; margin: 0; }
.sidenav__group li { margin: 0; }
.sidenav__group a {
  display: block;
  padding: 4px 10px;
  border-left: 2px solid var(--color-border);
  color: var(--color-gray-300);
}
.sidenav__group a:hover { color: var(--color-teal-300); border-left-color: var(--color-teal-300); }
.sidenav__group a[aria-current="page"] {
  color: var(--color-terminal-green);
  border-left-color: var(--color-terminal-green);
  background: rgba(var(--color-terminal-green-rgb), 0.06);
}

/* ---------- article typography ---------- */
.prose { max-width: 860px; min-width: 0; font-size: 15px; line-height: 1.7; }
.prose--wide { max-width: 1000px; margin: 0 auto; }
.prose h1 {
  font-size: clamp(26px, 4vw, 36px);
  margin: var(--space-8) 0 var(--space-24);
  color: var(--color-gray-200);
}
.prose h2 {
  font-size: 22px;
  text-align: left;
  margin: 40px 0 var(--space-12);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-teal-300);
}
.prose h2::before { content: "## "; color: var(--color-gray-400); font-family: var(--font-family-terminal); font-size: 0.8em; }
.prose h3 { font-size: 18px; margin: 28px 0 var(--space-8); color: var(--color-gray-200); }
.prose h4 { font-size: 16px; margin: 20px 0 var(--space-8); }
.prose p, .prose li { color: var(--color-gray-300); }
.prose strong { color: var(--color-gray-200); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose a { overflow-wrap: anywhere; }
.prose .external-link { display: inline; }
.prose .external-link:hover { transform: none; }
.prose code { overflow-wrap: anywhere; }
.prose pre code { overflow-wrap: normal; }
.prose hr { border: 0; border-top: 1px solid var(--color-border); margin: 32px 0; }
.crumbs { font-family: var(--font-family-terminal); font-size: 12px; color: var(--color-gray-400); margin-bottom: var(--space-12); }
.crumbs a { color: var(--color-gray-300); }

.prose blockquote {
  margin: var(--space-16) 0;
  padding: var(--space-12) var(--space-16);
  border-left: 3px solid var(--color-teal-300);
  background: rgba(var(--color-teal-300-rgb), 0.06);
  border-radius: 0 var(--radius-base) var(--radius-base) 0;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose blockquote.brief {
  border-left-color: var(--color-terminal-green);
  background: rgba(var(--color-terminal-green-rgb), 0.05);
  font-size: 16px;
}
.prose blockquote.brief strong:first-child { color: var(--color-terminal-green); font-family: var(--font-family-terminal); }

/* tables */
.table-wrap { overflow-x: auto; margin: var(--space-16) 0 var(--space-24); border: 1px solid var(--color-border); border-radius: var(--radius-base); }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.prose th, .prose td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.prose th {
  background: var(--color-surface);
  color: var(--color-terminal-amber);
  font-family: var(--font-family-terminal);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.prose tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }
.prose td { color: var(--color-gray-300); }
.table-wrap--data td:first-child { min-width: 120px; }
.table-wrap--facts { background: var(--color-surface); }
.table-wrap--facts td:first-child { width: 160px; color: var(--color-gray-200); white-space: nowrap; }

/* citations and references */
.cite { font-size: 12px; line-height: 0; }
.cite a { color: var(--color-gray-400); font-family: var(--font-family-terminal); }
.cite a:hover { color: var(--color-terminal-amber); }
.refs { font-size: 13px; line-height: 1.6; }
.refs li { margin-bottom: 6px; }
.refs li:target { background: rgba(255, 191, 0, 0.12); outline: 1px solid rgba(255, 191, 0, 0.5); border-radius: 4px; }

/* on-this-page */
.toc {
  margin: 0 0 var(--space-24);
  padding: var(--space-12) var(--space-16);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-base);
  font-size: 13px;
}
.toc__title { display: block; font-family: var(--font-family-terminal); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-terminal-amber); margin-bottom: 6px; }
.toc summary { list-style: none; cursor: pointer; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary .toc__title { display: inline; }
.toc summary .toc__title::before { content: "▾ "; }
.toc details:not([open]) summary .toc__title::before { content: "▸ "; }
.toc details:not([open]) summary .toc__title { margin: 0; }
.toc__n { color: var(--color-gray-400); }
.toc details[open] summary { display: block; margin-bottom: 6px; }
.toc ul { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; padding: 0; margin: 0; }
.toc li { margin: 0; }

/* prev / next */
.pager { display: flex; justify-content: space-between; gap: var(--space-16); margin: 48px 0 var(--space-16); }
.pager a {
  flex: 1;
  max-width: 48%;
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  background: var(--color-surface);
}
.pager a:hover { border-color: var(--color-teal-300); }
.pager span { display: block; font-family: var(--font-family-terminal); font-size: 12px; color: var(--color-gray-400); }
.pager__next { text-align: right; margin-left: auto; }

/* footer */
.footer .container { max-width: var(--container-lg); }
.footer-grid a { color: var(--color-gray-300); }
.footer-grid a:hover { color: var(--color-teal-300); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
  .sidenav { position: static; max-height: none; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-base); }
  .sidenav summary { display: block; }
  .sidenav__details:not([open]) .sidenav__group { display: none; }
  .sidenav__details { padding: 0 var(--space-12) var(--space-4); }
  .sidenav__details[open] { padding-bottom: var(--space-12); }
}
@media (max-width: 860px) {
  .topnav__inner { flex-wrap: wrap; gap: var(--space-8); padding-top: 8px; padding-bottom: 8px; }
  .topnav__burger {
    display: block;
    margin-left: auto;
    cursor: pointer;
    color: var(--color-terminal-green);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: 13px;
  }
  .topnav__links { display: none; order: 3; flex-basis: 100%; flex-direction: column; }
  .topnav__toggle:checked ~ .topnav__links { display: flex; }
  .search { order: 2; flex-basis: 100%; }
  .search input { width: 100%; }
  .search__results { left: 0; right: auto; width: 100%; }
}
@media (max-width: 600px) {
  body { font-size: 14px; }
  .prose { font-size: 14px; }
  .table-wrap--facts td:first-child { width: auto; white-space: normal; }
  .pager { flex-direction: column; }
  .pager a { max-width: none; }
  .countdown { flex-wrap: wrap; justify-content: center; }
}

/* task-list checklists (Risk-Assessment-Checklist) */
.prose ul.tasks { list-style: none; padding-left: 0.2em; }
.prose li.task { display: flex; gap: 10px; align-items: flex-start; }
.prose li.task input { margin-top: 0.45em; accent-color: var(--color-terminal-green); flex: none; }

/* =============================================================================
   Risk register (at-risk first, unaffected on demand)
   ============================================================================= */
:root {
  --st-at-risk: rgba(255, 84, 89, 1);
  --st-depends: rgba(255, 191, 0, 1);
  --st-other-limit: rgba(50, 184, 198, 1);
  --st-safe: rgba(0, 200, 0, 1);
}

/* buttons */
.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--radius-base);
  font-family: var(--font-family-terminal);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
.btn--danger { background: var(--st-at-risk); color: #000; }
.btn--danger:hover { color: #000; box-shadow: var(--glow-error); transform: translateY(-1px); }
.btn--ghost { border-color: var(--color-border); color: var(--color-gray-200); }
.btn--ghost:hover { border-color: var(--st-safe); color: var(--st-safe); }
.hero-cta, .cta-row { display: flex; gap: var(--space-12); justify-content: center; flex-wrap: wrap; margin-top: var(--space-24); position: relative; z-index: 2; }

/* nav item */
.topnav__links a.topnav__risk { color: var(--st-at-risk); font-weight: 700; }
.topnav__links a.topnav__risk:hover,
.topnav__links a.topnav__risk[aria-current="page"] { color: #000; background: var(--st-at-risk); }

/* status badges */
.reg-badge, .reg-evidence {
  display: inline-block;
  font-family: var(--font-family-terminal);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.reg-badge--at-risk { background: var(--st-at-risk); color: #000; }
.reg-badge--depends { background: var(--st-depends); color: #000; }
.reg-badge--other-limit { background: rgba(50, 184, 198, 0.18); color: var(--st-other-limit); border: 1px solid var(--st-other-limit); }
.reg-badge--safe { background: rgba(0, 200, 0, 0.12); color: var(--st-safe); border: 1px solid var(--st-safe); }
.reg-evidence { background: transparent; border: 1px dashed currentColor; text-transform: none; font-weight: 600; cursor: help; }
.reg-evidence--confirmed { color: var(--color-gray-200); border-style: solid; }
.reg-evidence--likely { color: var(--color-gray-400); }

/* stat tiles */
.reg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-12); margin: var(--space-24) 0; }
.reg-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--c);
  border-radius: var(--radius-base);
  color: var(--color-gray-300);
  transition: all 0.2s ease;
}
.reg-stat:hover { color: var(--color-gray-200); border-color: var(--c); transform: translateY(-2px); }
.reg-stat--at-risk { --c: var(--st-at-risk); background: rgba(255, 84, 89, 0.08); }
.reg-stat--depends { --c: var(--st-depends); }
.reg-stat--other-limit { --c: var(--st-other-limit); }
.reg-stat--safe { --c: var(--st-safe); }
.reg-stat__n { font-family: var(--font-family-terminal); font-size: 34px; font-weight: 700; line-height: 1; color: var(--c); }
.reg-stat--at-risk .reg-stat__n { text-shadow: var(--glow-error); }
.reg-stat__l { font-weight: 600; color: var(--color-gray-200); }
.reg-stat__s { font-size: 12px; color: var(--color-gray-400); }

/* item cards */
.reg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-16); }
.reg-item {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--c);
  border-radius: var(--radius-base);
  scroll-margin-top: calc(var(--nav-height) + 20px);
}
.reg-item--at-risk { --c: var(--st-at-risk); background: rgba(255, 84, 89, 0.06); }
.reg-item--depends { --c: var(--st-depends); }
.reg-item--other-limit { --c: var(--st-other-limit); }
.reg-item--safe { --c: var(--st-safe); }
.reg-item:target { outline: 2px solid var(--c); box-shadow: 0 0 24px rgba(255, 255, 255, 0.08); }
.reg-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.reg-cat { font-size: 12px; color: var(--color-gray-400); flex-basis: 100%; }
.reg-item__name { font-size: 16px; line-height: 1.35; color: var(--color-gray-200); margin: 4px 0 0; }
.reg-deadline { font-family: var(--font-family-terminal); font-size: 12px; color: var(--c); }
.reg-deadline--past { color: var(--st-at-risk); font-weight: 700; }
.reg-why, .reg-action { margin: 0; font-size: 14px; line-height: 1.55; }
.reg-why strong, .reg-action strong { color: var(--color-gray-200); }
.reg-action { padding: 8px 10px; background: rgba(255, 255, 255, 0.03); border-radius: var(--radius-sm); }
.reg-more-link { margin-top: auto; padding-top: 4px; font-size: 13px; }

/* home section */
.home-risk { padding-top: var(--space-8); }
.home-risk h2 { color: var(--st-at-risk); text-shadow: var(--glow-error); }
.reg-grid--home { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* Home: at-risk items grouped by type */
.risk-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-16); }
.risk-type {
  display: flex; flex-direction: column; gap: var(--space-8);
  padding: var(--space-16); border: 1px solid var(--color-border); border-left: 3px solid var(--st-at-risk);
  border-radius: var(--radius-base); background: rgba(255, 84, 89, 0.05);
}
.risk-type__title { margin: 0; font-size: 18px; }
.risk-type__title a { color: var(--color-gray-200); text-decoration: none; }
.risk-type__title a:hover { color: var(--st-at-risk); }
.risk-type__counts { margin: 0; font-size: 13px; color: var(--color-gray-400); }
.risk-type__counts strong { color: var(--st-at-risk); font-family: var(--font-family-terminal); }
.risk-type__top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.risk-type__top li { display: flex; gap: 8px; align-items: baseline; font-size: 14px; line-height: 1.4; }
.risk-type__top .reg-evidence { flex: none; }
.risk-type__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.risk-type__chip {
  font-size: 12px; padding: 3px 8px; border: 1px solid var(--color-border); border-radius: 999px;
  color: var(--color-gray-300); text-decoration: none;
}
.risk-type__chip span { font-family: var(--font-family-terminal); color: var(--st-at-risk); }
.risk-type__chip:hover { border-color: var(--st-at-risk); color: var(--color-gray-200); }
.risk-type__all { margin-top: auto; padding-top: 4px; font-size: 13px; }
.reg-filter select:disabled { opacity: 0.5; cursor: not-allowed; }

/* register page */
.register { max-width: var(--container-xl); padding-top: var(--space-24); }
.register h1 { font-size: clamp(28px, 4vw, 40px); margin: var(--space-8) 0 var(--space-12); }
.register__lede { max-width: 860px; font-size: 15px; line-height: 1.7; }
.reg-filter {
  position: sticky; top: var(--nav-height); z-index: 20;
  display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center;
  padding: var(--space-12) 0;
  background: rgba(0, 0, 0, 0.94);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-16);
}
.reg-filter input[type="search"], .reg-filter select {
  background: var(--color-surface);
  color: var(--color-gray-200);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-family: var(--font-family-terminal);
  font-size: 13px;
}
.reg-filter input[type="search"] { flex: 1 1 260px; color: var(--color-terminal-green); }
.reg-filter__check { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--color-gray-300); cursor: pointer; }
.reg-filter__check input { accent-color: var(--st-at-risk); }
.reg-filter__count { margin-left: auto; font-family: var(--font-family-terminal); font-size: 12px; color: var(--color-gray-400); }
.reg-section { margin: var(--space-32) 0 0; scroll-margin-top: calc(var(--nav-height) + 70px); }
.reg-section h2 { text-align: left; font-size: 24px; margin-bottom: 4px; }
#at-risk.reg-section h2 { color: var(--st-at-risk); }
#depends h2 { color: var(--st-depends); }
#other-limit h2 { color: var(--st-other-limit); }
#safe h2 { color: var(--st-safe); }
.reg-section__n { font-family: var(--font-family-terminal); font-size: 0.65em; color: var(--color-gray-400); vertical-align: middle; }
.reg-section__desc { margin-bottom: var(--space-16); }
.reg-group { margin-bottom: var(--space-24); }
.reg-group__title { font-size: 15px; font-family: var(--font-family-terminal); color: var(--color-gray-300); margin: var(--space-16) 0 var(--space-12); text-transform: uppercase; letter-spacing: 0.06em; }
.reg-group__n { color: var(--color-gray-400); }
.reg-unaffected {
  margin-top: var(--space-32);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0 var(--space-16) var(--space-16);
  background: rgba(0, 200, 0, 0.03);
  scroll-margin-top: calc(var(--nav-height) + 70px);
}
.reg-unaffected > summary {
  cursor: pointer; list-style: none;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-16) 0;
}
.reg-unaffected > summary::-webkit-details-marker { display: none; }
.reg-unaffected__title { font-size: 18px; font-weight: 600; color: var(--st-safe); }
.reg-unaffected__title::before { content: "▸ "; font-family: var(--font-family-terminal); }
.reg-unaffected[open] .reg-unaffected__title::before { content: "▾ "; }
.reg-unaffected__sub { font-size: 13px; color: var(--color-gray-400); }
.reg-empty { text-align: center; padding: var(--space-24); }
.reg-footnote { margin-top: var(--space-32); font-size: 13px; color: var(--color-gray-400); }
.is-hidden { display: none !important; }

/* topic-page "at a glance" panel */
.glance {
  margin: var(--space-16) 0 var(--space-24);
  padding: var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  background: var(--color-surface);
}
.prose h2.glance__title { margin: 0 0 var(--space-12); padding: 0; border: 0; font-size: 18px; color: var(--color-gray-200); }
.prose h2.glance__title::before { content: "$ "; color: var(--color-terminal-amber); }
.prose .glance__list { list-style: none; padding: 0; margin: 0; }
.prose .glance__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: baseline;
  padding: 10px 0 10px 10px;
  margin: 0;
  border-bottom: 1px dashed var(--color-border);
  border-left: 3px solid var(--c);
}
.glance__row--at-risk { --c: var(--st-at-risk); }
.glance__row--depends { --c: var(--st-depends); }
.glance__row--other-limit { --c: var(--st-other-limit); }
.glance__row--safe { --c: var(--st-safe); }
.glance__row:last-child { border-bottom: 0; }
.glance__row .reg-evidence { grid-column: 1; justify-self: start; }
.glance__name { grid-column: 2; grid-row: 1; font-weight: 600; color: var(--color-gray-200); }
.glance__why, .glance__action { grid-column: 2; font-size: 13px; line-height: 1.5; color: var(--color-gray-300); }
.glance__action strong { color: var(--color-gray-200); }
.glance__more { margin-top: var(--space-12); }
.glance__more > summary { cursor: pointer; color: var(--st-safe); font-size: 14px; padding: 6px 0; }
.glance__all { display: inline-block; margin-top: var(--space-12); font-size: 13px; }
.glance__none { margin: 0; font-size: 14px; }

@media (max-width: 860px) {
  .reg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reg-filter { top: 0; position: static; }
  .reg-grid, .reg-grid--home, .risk-types { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .prose .glance__row { grid-template-columns: minmax(0, 1fr); }
  .glance__name, .glance__why, .glance__action, .glance__row .reg-evidence { grid-column: 1; grid-row: auto; }
  .reg-stat__n { font-size: 28px; }
}

/* ---------- responsive tuning (phones, tablets, laptops, big screens) ---------- */
.hero-terminal--overview { margin: 0 auto var(--space-24); }

/* long words and URLs must wrap instead of widening the page on phones */
.prose, .glance, .reg-item, .risk-type, .card__body { overflow-wrap: anywhere; }
.reg-filter select { min-width: 0; max-width: 100%; }

/* tablets: two columns where cards fit */
@media (min-width: 601px) and (max-width: 860px) {
  .reg-grid, .reg-grid--home, .risk-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* phones: stack the register filters full width */
@media (max-width: 600px) {
  .reg-filter input[type="search"], .reg-filter select { flex: 1 1 100%; width: 100%; }
  .reg-filter__count { margin-left: auto; }
  .register__lede { font-size: 14px; }
}

/* touch screens: larger tap targets (aim for ~40px) */
@media (pointer: coarse) {
  .sidenav a, .toc a { display: inline-block; padding-block: 8px; }
  .crumbs a { display: inline-block; padding: 8px 4px; margin: -8px -4px; }
  .reg-more-link, .glance__all, .risk-type__all, .card__body > a, .pager a { display: inline-block; padding-block: 10px; }
  .risk-type__chip { padding: 8px 12px; font-size: 13px; }
  .risk-type__top a, .explore-list a, .card__body li > a { display: inline-block; padding-block: 6px; }
  .reg-filter__check { min-height: 40px; }
  .reg-filter__check input { width: 20px; height: 20px; }
  .reg-filter input[type="search"], .reg-filter select { min-height: 42px; font-size: 16px; }  /* 16px stops iOS zooming on focus */
  .search input { font-size: 16px; }
  .cite a { display: inline-block; padding: 6px 3px; line-height: 12px; }
  .toc summary { padding-block: 6px; }
  .footer-grid li a { display: inline-block; padding-block: 6px; }
  pre > button { min-height: 36px; padding: 8px 14px !important; }  /* app.js sets inline styles */
}

/* big screens: use the width, and nudge text up */
@media (min-width: 1700px) {
  :root { --container-lg: 1280px; --container-xl: 1560px; }
  body { font-size: 16px; }
  .prose { max-width: 960px; font-size: 16px; }
  .layout { grid-template-columns: 270px minmax(0, 1fr); gap: var(--space-32); }
  .reg-why, .reg-action { font-size: 15px; }
  .reg-item__name { font-size: 17px; }
  .risk-types { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 2200px) {
  :root { --container-lg: 1440px; --container-xl: 1800px; }
  body { font-size: 17px; }
  .prose { max-width: 1040px; font-size: 17px; }
  .sidenav { font-size: 14px; }
  .reg-grid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
}

/* short laptop screens (e.g. 1366x768): tighten the hero so "What's At Risk" shows without scrolling */
@media (min-width: 1000px) and (max-height: 860px) {
  .hero { padding: var(--space-24) 0 var(--space-16); }
  .terminal-header { margin-bottom: var(--space-20); padding: var(--space-16) var(--space-24); }
  .countdown { margin-bottom: var(--space-20); }
  .countdown__item { padding: var(--space-12) var(--space-16); }
  .hero-cta { margin-top: var(--space-16); }
}

/* accessibility: contrast and link affordance */
:root { --color-gray-400: rgba(139, 144, 144, 1); }   /* was #777c7c: 4.3:1 on dark panels, now >= 5:1 */
.footer-grid h2.footer__title { color: var(--color-primary); margin-bottom: var(--space-12); font-size: var(--font-size-lg); }
.crumbs a, .reg-footnote a, .register__lede a, .prose p a, .prose li a, .prose td a, .refs a, .glance__why a, .section-lede a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
pre > button { color: #000 !important; font-weight: 600; }   /* app.js sets white on teal (2.4:1) */

/* respect "reduce motion": stop the template's particles, glows and fade-ins */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .card, .timeline-item { opacity: 1 !important; transform: none !important; }
  .particle { display: none !important; }
}

/* ---------- help, sponsor and about pages ---------- */
.footer-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footer-sponsors { margin-top: var(--space-16); font-size: 13px; color: var(--color-gray-300); }
.info-page { max-width: 960px; padding-top: var(--space-24); padding-bottom: var(--space-32); }
.prose--info { max-width: none; }
.prose--info h2 { margin-top: var(--space-32); }
.page-lede { font-size: 17px; line-height: 1.7; color: var(--color-gray-200); }
.offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-16); margin: var(--space-24) 0; }
.offer { padding: var(--space-16); border: 1px solid var(--color-border); border-left: 3px solid var(--color-terminal-green); border-radius: var(--radius-base); background: rgba(255, 255, 255, 0.02); }
.prose .offer h2 { font-size: 17px; margin: 0 0 var(--space-8); }
.prose .offer h2::before { content: none; }
.offer p { margin: 0; font-size: 14px; }
.steps li { margin-bottom: var(--space-8); }
.cta-row--left { justify-content: flex-start; }
.small-print { font-size: 13px; color: var(--color-gray-400); }
.sponsor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-16); }
.sponsor { padding: var(--space-16); border: 1px solid var(--color-border); border-radius: var(--radius-base); }
.sponsor img { display: block; max-width: 100%; height: 48px; width: auto; margin-bottom: var(--space-8); }
.section-credit { font-size: 13px; color: var(--color-gray-400); margin: calc(-1 * var(--space-12)) 0 var(--space-24); }
.glance__links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; }
.glance__help { color: var(--st-at-risk); }
.help-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-16);
  margin-top: var(--space-32); padding: var(--space-20); border: 1px solid var(--st-at-risk);
  border-radius: var(--radius-base); background: rgba(255, 84, 89, 0.06);
}
.help-band p { margin: 0; flex: 1 1 420px; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-24); }
.help-card .card__body { display: flex; flex-direction: column; gap: var(--space-12); align-items: flex-start; height: 100%; }
.help-card .btn { margin-top: auto; }
.help-card--help { border-color: var(--st-at-risk); }
.prose .btn, .help-band .btn { text-decoration: none; }