/* ============================================================
   CODEBREAKER - components
   ============================================================ */

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
    backdrop-filter 0.3s var(--ease);
}
.nav[data-solid='true'] {
  background: color-mix(in oklab, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--color-divider);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  flex: none;
}
.brand svg {
  width: 30px;
  height: 30px;
  color: var(--color-primary);
  flex: none;
}
.brand__word {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.nav__links {
  display: none;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}
.nav__links a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav__links a:hover {
  color: var(--color-text);
  background: var(--color-surface-offset);
}
.nav__links a[aria-current='page'] {
  color: var(--color-primary);
}
.nav__tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
@media (min-width: 62rem) {
  .nav__links {
    display: flex;
  }
  .nav__tools {
    margin-left: var(--space-2);
  }
  .icon-btn.nav__burger {
    display: none;
  }
}
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.icon-btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.icon-btn svg {
  width: 17px;
  height: 17px;
}
.nav__drawer {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  background: var(--color-bg);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.55);
  padding: var(--space-4) 0 var(--space-6);
  display: none;
  z-index: 99;
}
.nav__drawer[data-open='true'] {
  display: block;
}
.nav__drawer a {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}

/* ---------- Full-bleed video loop ---------- */
.bleed {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0c0b09;
}
.bleed__media,
.bleed__media video,
.bleed__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.bleed::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim);
}
/* scanline / microfilm texture over the footage */
.bleed::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.14) 0px,
    rgba(0, 0, 0, 0.14) 1px,
    transparent 1px,
    transparent 3px
  );
}
.bleed--onlight::before {
  background: var(--scrim);
}

.hero {
  min-height: min(92svh, 54rem);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(var(--space-20), 14vh, var(--space-32));
  color: #ece6d9;
}
.hero h1 {
  font-size: var(--text-3xl);
  max-width: 22ch;
  margin-top: var(--space-5);
  color: #f6f1e6;
}
.hero__lede {
  font-size: var(--text-lg);
  line-height: 1.5;
  max-width: 52ch;
  margin-top: var(--space-5);
  color: rgba(236, 230, 217, 0.78);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(236, 230, 217, 0.16);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(236, 230, 217, 0.55);
}

/* page banner (interior pages) */
.banner {
  min-height: min(52svh, 30rem);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(var(--space-12), 8vh, var(--space-20));
  color: #ece6d9;
}
.banner h1 {
  margin-top: var(--space-4);
  max-width: 26ch;
  color: #f6f1e6;
}
.banner p {
  max-width: 56ch;
  margin-top: var(--space-4);
  color: rgba(236, 230, 217, 0.76);
}
.banner .eyebrow {
  color: var(--color-primary-hover);
}

/* interstitial loop strip */
.strip::before {
  background: var(--scrim-even);
}
.strip {
  min-height: min(70svh, 40rem);
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--space-24);
  color: #ece6d9;
}
.strip h2 {
  font-size: var(--text-2xl);
  max-width: 30ch;
  margin-inline: auto;
  color: #f6f1e6;
}
.strip p {
  max-width: 52ch;
  margin: var(--space-5) auto 0;
  color: rgba(236, 230, 217, 0.76);
}

/* mute/pause control for motion */
.bleed__ctl {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 3;
  border-color: rgba(236, 230, 217, 0.3);
  background: rgba(12, 11, 9, 0.5);
  color: rgba(236, 230, 217, 0.8);
  backdrop-filter: blur(6px);
}
.bleed__ctl:hover {
  color: #0c0b09;
  background: #ece6d9;
  border-color: #ece6d9;
}

/* ---------- Section headers ---------- */
.sec-head {
  display: grid;
  gap: var(--space-4);
  max-width: 62rem;
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
}
.sec-head p {
  color: var(--color-text-muted);
  max-width: 60ch;
}

/* ---------- Principles / numbered list ---------- */
.principles {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-divider);
}
.principle {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
@media (min-width: 48rem) {
  .principle {
    grid-template-columns: 5rem minmax(0, 22rem) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: baseline;
  }
}
.principle__n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-primary);
  letter-spacing: 0.14em;
}
.principle h3 {
  font-size: var(--text-lg);
}
.principle p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ---------- Module grid ---------- */
.modules {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.module {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: all 0.25s var(--ease);
}
.module:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-2);
  transform: translateY(-2px);
  color: inherit;
}
.module__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.module__n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.12em;
}
.module h3 {
  font-size: var(--text-lg);
  margin-top: var(--space-4);
}
.module p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* ---------- Vault diagram ---------- */
.vaults {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.vault {
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-cold);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  background: var(--color-surface);
}
.vault h4 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cold);
}
.vault p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  line-height: 1.55;
}

/* ---------- Toolbar / filters ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-8);
}
.field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 16rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
}
.field:focus-within {
  border-color: var(--color-primary);
}
.field svg {
  width: 15px;
  height: 15px;
  color: var(--color-text-faint);
  flex: none;
}
.field input {
  border: 0;
  background: none;
  outline: none;
  padding: var(--space-3) 0;
  width: 100%;
  font-size: var(--text-sm);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chip {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.45em 0.75em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.chip:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.chip[aria-pressed='true'] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.08em;
  margin-left: auto;
}

/* ---------- Matrix rows ---------- */
.rows {
  display: grid;
  gap: var(--space-3);
}
.row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
}
.row[data-status='DOCUMENTED'] {
  border-left-color: var(--color-primary);
}
.row[data-status='DOCUMENTED PRINCIPLE'] {
  border-left-color: var(--color-cold);
}
.row[data-status='UNKNOWN / NOT ESTABLISHED'],
.row[data-status='NOT ESTABLISHED'] {
  border-left-color: var(--color-rust);
}
.row[data-status='CONTRADICTED / NOT ESTABLISHED'] {
  border-left-color: var(--color-alarm);
}
.row__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
}
.row__claim {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.25;
  flex: 1 1 22rem;
}
.row__grid {
  display: grid;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}
@media (min-width: 48rem) {
  .row__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.row__k {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.row__v {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-top: var(--space-1);
}
.risk {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
}
.risk[data-risk='Very High'] {
  color: var(--color-alarm);
}
.risk[data-risk='High'] {
  color: var(--color-rust);
}
.risk[data-risk='Medium'] {
  color: var(--color-primary);
}
.risk[data-risk='Low'] {
  color: var(--color-cold);
}

/* ---------- Source records ---------- */
.sources {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
.source {
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: border-color 0.25s var(--ease);
}
.source:hover {
  border-color: var(--color-border-strong);
}
.source__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.source h3 {
  font-size: var(--text-lg);
  margin-top: var(--space-3);
}
.source p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  max-width: 76ch;
}
.source__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}
.source__id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.06em;
  word-break: break-all;
}

/* ---------- Timeline ---------- */
.timeline {
  position: relative;
  display: grid;
  gap: var(--space-8);
  padding-left: var(--space-8);
}
.timeline::before {
  content: '';
  position: absolute;
  left: 0.32rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--color-border-strong) 8%,
    var(--color-border-strong) 92%,
    transparent
  );
}
.tl {
  position: relative;
}
.tl::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-8) + 0.05rem);
  top: 0.55rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1.5px solid var(--color-primary);
}
.tl__year {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--color-primary);
}
.tl h3 {
  font-size: var(--text-lg);
  margin-top: var(--space-2);
}
.tl p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  max-width: 70ch;
}

/* ---------- Knowledge graph canvas ---------- */
.graph-shell {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 64rem) {
  .graph-shell {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
}
.graph-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  min-height: 20rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: grab;
}
@media (max-width: 47.99rem) {
  .graph-canvas {
    aspect-ratio: 3 / 4;
  }
}
.graph-canvas canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.graph-hint {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.04em;
}
.graph-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  align-self: start;
}
.graph-panel h3 {
  font-size: var(--text-lg);
  margin-top: var(--space-3);
}
.graph-panel p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}
.graph-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}
.graph-legend div {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
}
.dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex: none;
}
.edges {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.edge {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-left: var(--space-4);
  position: relative;
}
.edge::before {
  content: '->';
  position: absolute;
  left: 0;
  color: var(--color-primary);
}

/* ---------- Accordion (curriculum) ---------- */
.acc {
  border-top: 1px solid var(--color-divider);
}
.acc details {
  border-bottom: 1px solid var(--color-divider);
}
.acc summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-5);
  cursor: pointer;
  list-style: none;
}
.acc summary::-webkit-details-marker {
  display: none;
}
.acc summary:hover .acc__title {
  color: var(--color-primary);
}
.acc__lvl {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-primary);
  letter-spacing: 0.14em;
  flex: none;
  width: 5rem;
  white-space: nowrap;
}
.acc__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.2;
  transition: color 0.2s var(--ease);
}
.acc__chev {
  margin-left: auto;
  color: var(--color-text-faint);
  transition: transform 0.25s var(--ease);
  flex: none;
}
.acc details[open] .acc__chev {
  transform: rotate(180deg);
}
.acc__body {
  padding: 0 0 var(--space-6);
}
@media (min-width: 48rem) {
  .acc__body {
    padding-left: calc(5rem + var(--space-4));
  }
}
.acc__body p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 70ch;
}
.acc__body ul {
  margin-top: var(--space-4);
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-2);
}
.acc__body li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.acc__body li::marker {
  color: var(--color-primary);
}

/* ---------- Rules (do / don't) ---------- */
.rules {
  display: grid;
  gap: var(--space-3);
}
.rule-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.rule-item svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 0.2em;
  color: var(--color-alarm);
}
.say {
  display: grid;
  gap: var(--space-4);
}
.say-pair {
  display: grid;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (min-width: 48rem) {
  .say-pair {
    grid-template-columns: 1fr 1fr;
  }
}
.say-side {
  padding: var(--space-5);
  background: var(--color-surface);
}
.say-side + .say-side {
  border-top: 1px solid var(--color-border);
}
@media (min-width: 48rem) {
  .say-side + .say-side {
    border-top: 0;
    border-left: 1px solid var(--color-border);
  }
}
.say-side__k {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.say-side--do .say-side__k {
  color: var(--color-cold);
}
.say-side--dont .say-side__k {
  color: var(--color-alarm);
}
.say-side p {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.3;
}
.say-side--dont p {
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklab, var(--color-alarm) 60%, transparent);
  text-decoration-thickness: 1px;
}

/* ---------- Journal (local-only) ---------- */
.journal-grid {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 60rem) {
  .journal-grid {
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    align-items: start;
  }
}
.composer {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
}
.composer label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}
.composer input[type='text'],
.composer textarea,
.composer select {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: var(--text-sm);
  outline: none;
}
.composer textarea {
  min-height: 7rem;
  resize: vertical;
  font-family: inherit;
}
.composer input:focus,
.composer textarea:focus,
.composer select:focus {
  border-color: var(--color-primary);
}
.scale {
  display: flex;
  gap: var(--space-2);
}
.scale button {
  flex: 1;
  padding: var(--space-2) 0;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  transition: all 0.2s var(--ease);
}
.scale button[aria-pressed='true'] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.entries {
  display: grid;
  gap: var(--space-3);
}
.entry {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-cold);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
}
.entry__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}
.entry__time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.06em;
}
.entry h3 {
  font-size: var(--text-lg);
  margin-top: var(--space-3);
}
.entry p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  white-space: pre-wrap;
}
.entry__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.empty {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
}
.empty svg {
  width: 30px;
  height: 30px;
  margin: 0 auto var(--space-4);
  color: var(--color-text-faint);
}
.empty p {
  font-size: var(--text-sm);
  max-width: 44ch;
  margin: var(--space-2) auto 0;
}

/* ---------- Notices ---------- */
.notice {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in oklab, var(--color-cold) 40%, transparent);
  background: var(--color-cold-soft);
  font-size: var(--text-sm);
}
.notice--warn {
  border-color: color-mix(in oklab, var(--color-rust) 40%, transparent);
  background: var(--color-rust-soft);
}
.notice svg {
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: 0.15em;
  color: var(--color-cold);
}
.notice--warn svg {
  color: var(--color-rust);
}
.notice strong {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 600;
}

/* ---------- Crisis bar ---------- */
.crisis {
  background: var(--color-surface-offset);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-6);
}
.crisis__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  align-items: center;
}
.crisis__k {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-alarm);
}
.crisis__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-16) var(--space-10);
  background: var(--color-surface);
}
.footer__grid {
  display: grid;
  gap: var(--space-10);
}
@media (min-width: 48rem) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}
@media (min-width: 64rem) {
  .footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
}
.footer h4 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}
.footer ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.footer a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}
.footer a:hover {
  color: var(--color-primary);
}
.footer__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 44ch;
  margin-top: var(--space-4);
}
.footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  justify-content: space-between;
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.06em;
}

/* ---------- Wide-viewport grid refinements ---------- */
@media (min-width: 48rem) {
  .row__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 60rem) {
  .sources {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
  .say {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
  .rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.source p,
.row__claim,
.tl p,
.rule-item div {
  max-width: 62ch;
}

/* long URLs and record ids must never widen their card */
.source a,
.source p,
.source__id,
.source__foot {
  overflow-wrap: anywhere;
  min-width: 0;
}


/* --- Crisis shortcut in the nav ------------------------------------------ */
.nav__links a.nav__help,
.nav__drawer a.nav__help {
  color: var(--color-alarm);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-alarm) 45%, transparent);
}
.nav__links a.nav__help {
  margin-left: var(--space-3);
}
.nav__links a.nav__help:hover,
.nav__drawer a.nav__help:hover {
  color: var(--color-bg);
  background: var(--color-alarm);
}
.crisis:target {
  outline: 2px solid var(--color-alarm);
  outline-offset: 4px;
  scroll-margin-top: 6rem;
}

/* --- Generated plates, the orientation film, provenance tables ----------- */
.plate {
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.plate img {
  display: block;
  width: 100%;
  height: auto;
}
.plate figcaption,
.film figcaption {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
  max-width: 68ch;
}
.plate__gen {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-faint);
  font-family: var(--font-mono);
  font-size: 0.72em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 0.1em;
}

.film {
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.film video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}
.film figcaption a {
  color: var(--color-primary);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.tbl {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.tbl th {
  text-align: left;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border-strong);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.tbl td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  line-height: 1.6;
}
.tbl tbody tr:last-child td {
  border-bottom: 0;
}
.tbl td.mono,
.tbl .mono {
  font-family: var(--font-mono);
  font-size: 0.82em;
}
.tbl td:first-child {
  white-space: nowrap;
}
.tbl a.mono {
  display: inline-block;
  margin-top: 0.35rem;
  word-break: break-all;
}

/* ---------- Operation Angels network rail ---------- */
:root {
  --ap-teal: #0b5a55;
  --ap-teal2: #5aa6a0;
  --ap-cream: #f6f2ea;
  --ap-gold: #e4cd84;
}
.oarail {
  background: var(--ap-teal);
  color: var(--ap-cream);
  position: relative;
  z-index: 101;
}
.oarail .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.05rem;
  flex-wrap: wrap;
}
.oabrand {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  text-decoration: none;
}
.oabrand img {
  display: block;
  border-radius: 6px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(246, 242, 234, 0.34);
}
.oabrand span {
  display: block;
  font: 600 0.61rem/1 var(--font-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(246, 242, 234, 0.68);
}
.oabrand span b {
  display: block;
  font: 400 1.06rem/1.1 var(--font-display);
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--ap-cream);
  margin-bottom: 0.24rem;
}
.oabrand:hover span b {
  color: #fff;
}
.oaway {
  display: flex;
  align-items: center;
  gap: 0.52rem;
  margin: 0 0 0 auto;
  font: 600 0.68rem/1 var(--font-mono);
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.oaway span {
  color: rgba(246, 242, 234, 0.58);
  white-space: nowrap;
}
.oaway span + span::before {
  content: '\00B7';
  margin-right: 0.52rem;
  color: rgba(246, 242, 234, 0.34);
}
.oaway span.on {
  color: #fff;
}
.oaway span.on b {
  font-weight: 600;
  padding-bottom: 0.17rem;
  box-shadow: inset 0 -2px 0 var(--ap-gold);
}
.brand__stack {
  display: grid;
  gap: 0.16rem;
}
.brand__oa {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ap-teal2);
}
.apfoot.lead {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  margin-bottom: var(--space-5);
}
.apfoot.lead img {
  display: block;
  border-radius: 6px;
  flex: 0 0 auto;
}
.apfoot.lead span {
  display: block;
  font: 400 0.78rem/1.45 var(--font-body);
  color: var(--color-text-muted);
}
.apfoot.lead span b {
  display: block;
  font: 400 1.12rem/1.15 var(--font-display);
  color: var(--color-text);
  margin-bottom: 0.16rem;
}
.apfoot.lead:hover span b {
  color: var(--ap-teal2);
}
@media (max-width: 40rem) {
  .oarail .wrap {
    min-height: 2.7rem;
    gap: 0.55rem;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
  }
  .oabrand span b {
    font-size: 0.98rem;
  }
  .oaway {
    margin-left: 0;
    width: 100%;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
  }
}