/* ==========================================================================
   Page: LATENT Kit · K05, K06, K08b, K09–K12 (kit/system.html)
   Shell (sidebar, chapters, headings, panels): components/kit-shell.css
   Behaviour (motion demos, overlays, pattern tabs, heatmap): js/pages/kit-system.js

   The page is Paper only. Captions use --ink-2 here (the shell's panel
   label default is --ink-3). Several elements had no box-sizing in the
   original; sizes below are the rendered sizes (content + padding + border).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page scope
   -------------------------------------------------------------------------- */
.system {
  --kit-subhead-gap: 56px;

  /* Sequential Mist scale (confusion matrix, heatmap), light → dark */
  --mist-scale-0: var(--paper-100);
  --mist-scale-1: #EEF1F6;
  --mist-scale-2: var(--mist-300);
  --mist-scale-3: var(--mist-400);
  --mist-scale-4: #6F7E99;
  --mist-scale-5: #4A5870;
  --mist-scale-6: #2C3647;
}

:where(.system ul, .system ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* This page's sidebar centres id and label separately (shell: top edge) */
.kit-sidebar .kit-nav--compact .kit-nav__link {
  align-items: center;
}

.system .kit-title {
  text-wrap: wrap;
}

.system .kit-lead {
  margin-top: 20px;
  text-wrap: wrap;
}

.system .kit-panel__label {
  color: var(--ink-2);
}

.motion .kit-subhead,
.overlays .kit-subhead {
  --kit-subhead-gap: 48px;
}

/* Grouped lists with an ink rule under the heading
   (component index, microcopy library) */
.list-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px 40px;
  margin-top: 16px;
}

.list-groups--copy {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.list-group__title {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .06em;
}

.list-group__item {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}

.list-group__item--link {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 400 14px/1.3 var(--font-sans);
  text-decoration: none;
}

.list-group__item--copy {
  font: 400 15px/1.45 var(--font-sans);
}

.list-group__meta {
  color: var(--ink-2);
  font: 400 11px/1.3 var(--font-mono);
  white-space: nowrap;
}

/* AI-generated label (imagery) */
.ai-label {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  background: var(--mist-100);
  color: var(--mist-600);
  font: 500 12px/1 var(--font-sans);
}

.ai-label__mark {
  box-sizing: content-box;
  width: 7px;
  height: 7px;
  border: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   K05 · Iconography & imagery
   -------------------------------------------------------------------------- */
.mark-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  margin-top: 32px;
}

.mark-card {
  padding: 24px;
}

.mark-card__body {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* 40px diamond, 3px stroke, 6px centre point */
.mark-card__ai {
  position: relative;
  width: 40px;
  height: 40px;
  border: 3px solid var(--machine-ink);
  transform: rotate(45deg);
}

.mark-card__ai::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  width: 6px;
  height: 6px;
  background: var(--machine-ink);
}

.mark-card__human {
  width: 39px;  /* 36px + border */
  height: 39px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--action);
}

.mark-card__notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ink-2);
  font: 400 13px/1.45 var(--font-sans);
}

/* Icon grid */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  margin-top: 16px;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}

.icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 97px;  /* 96px + border */
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
}

.icon-tile--ai {
  color: var(--machine-ink);
}

.icon-tile__name {
  color: var(--ink-2);
  font: 400 11px/1 var(--font-mono);
}

.icon-grid__caption {
  margin-top: 10px;
  color: var(--ink-2);
  font: 400 12px/1.4 var(--font-mono);
}

/* Imagery */
.imagery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  margin-top: 20px;
}

.imagery-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.imagery-card__slot {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 200px;
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
}

.imagery-card__slot--product { background: repeating-linear-gradient(135deg, var(--paper-200) 0 12px, var(--paper-100) 12px 24px); }
.imagery-card__slot--people  { background: repeating-linear-gradient(135deg, var(--mist-100) 0 12px, var(--paper-100) 12px 24px); }
.imagery-card__slot--latent  { background: repeating-linear-gradient(135deg, #DDE3EC 0 12px, #EEF1F6 12px 24px); }

.imagery-card__caption {
  padding: 5px 7px;
  border-radius: var(--radius-xs);
  background: var(--surface);
  font: 400 11px/1.4 var(--font-mono);
}

.imagery-card__title {
  font: 600 16px/1.3 var(--font-sans);
}

.imagery-card__text {
  color: var(--ink-2);
  font: 400 14px/1.5 var(--font-sans);
}

/* --------------------------------------------------------------------------
   K06 · Motion
   -------------------------------------------------------------------------- */
.motion-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

.play-btn {
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-control);
  background: var(--action);
  color: var(--on-action);
  font: 600 15px/1 var(--font-sans);
}

.ease-switch {
  display: contents;
}

.ease-switch__option {
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: 500 13px/1 var(--font-mono);
}

.ease-switch__option[aria-checked="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--canvas);
}

.motion-controls__curve {
  color: var(--ink-2);
  font: 400 12px/1.4 var(--font-mono);
}

/* Duration rows: .is-playing moves every block; each row has its --dur */
.duration-list {
  --ease: cubic-bezier(.2, .8, .2, 1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.duration-list[data-ease="stream"] {
  --ease: linear;
}

.duration {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.duration__label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--ink-2);
  font: 400 12px/1.2 var(--font-mono);
}

.duration__token {
  color: var(--ink);
  font-weight: 500;
}

.duration__track {
  position: relative;
  height: 29px;  /* 28px + border */
  border-bottom: 1px solid var(--surface-sunken);
}

.duration__block {
  position: absolute;
  top: 4px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-xs);
  background: var(--ink);
  transition: transform var(--dur) var(--ease);
}

.duration-list.is-playing .duration__block {
  transform: translateX(min(640px, 60vw));
}

@media (prefers-reduced-motion: reduce) {
  .duration__block {
    transition: none;
  }
}

.motion-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 16px;
  margin-top: 16px;
}

/* Token stream */
.stream-panel {
  gap: 14px;
}

.stream-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mini-btn {
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: 500 12px/1 var(--font-mono);
}

.stream-panel__cadence {
  display: flex;
  justify-content: space-between;
  font: 500 13px/1 var(--font-sans);
}

.stream-panel__cadence-value {
  font: 500 13px/1 var(--font-mono);
}

.stream-panel__range {
  accent-color: var(--ink);
}

.stream-panel__output {
  min-height: 112px;  /* 84px + padding */
  padding: 14px;
  border-radius: var(--radius-control);
  background: var(--machine-tint);
  font: 400 16px/1.6 var(--font-sans);
}

.stream-panel__output .caret {
  margin-left: 0;
}

.stream-panel__note {
  color: var(--ink-2);
  font: 400 12px/1.45 var(--font-mono);
}

/* Motion budget */
.budget-panel {
  gap: 12px;
}

.budget {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.budget__row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--surface-sunken);
}

.budget__row dt {
  font: 600 14px/1.3 var(--font-sans);
}

.budget__row dd {
  color: var(--ink-2);
  font: 400 14px/1.45 var(--font-sans);
}

/* Scroll-trigger catalog (each row sizes its own columns, like the original) */
.trigger-list {
  margin-top: 16px;
  border-top: 1px solid var(--ink);
}

.trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  align-items: baseline;
  gap: 8px 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}

.trigger__name {
  font: 600 15px/1.3 var(--font-sans);
}

.trigger__text {
  color: var(--ink-2);
  font: 400 14px/1.45 var(--font-sans);
}

.trigger__link {
  font: 400 12px/1 var(--font-mono);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   K08b · Overlays & component index
   -------------------------------------------------------------------------- */
.overlay-triggers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.overlay-trigger {
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: 500 15px/1 var(--font-sans);
}

/* --------------------------------------------------------------------------
   K09 · Patterns
   -------------------------------------------------------------------------- */
.pattern-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 24px;
}

.pattern-tab {
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: 500 13px/1 var(--font-sans);
}

.pattern-tab[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--canvas);
}

.pattern-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.pattern-panel__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}

.pattern-panel__name {
  font: 400 28px/1.2 var(--font-serif);
}

.pattern-panel__link {
  font: 400 12px/1.4 var(--font-mono);
}

.pattern-panel__why {
  max-width: 680px;
  color: var(--ink-2);
  font: 400 15px/1.55 var(--font-sans);
}

.pattern-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 8px;
}

/* Default: a person's step (ink outline) */
.pattern-step {
  --who: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.pattern-step--ai {
  --who: var(--machine-ink);
  border-color: var(--machine-tint);
  background: var(--machine-tint);
}

.pattern-step--system {
  --who: var(--ink-2);
  border-color: var(--hairline);
  background: var(--surface-2);
}

.pattern-step__who {
  color: var(--who);
  font: 500 11px/1 var(--font-mono);
}

.pattern-step__title {
  font: 500 14px/1.4 var(--font-sans);
}

.pattern-step__note {
  color: var(--ink-2);
  font: 400 12px/1.45 var(--font-mono);
}

/* --------------------------------------------------------------------------
   K10 · Data visualization
   -------------------------------------------------------------------------- */
.chart-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 24px;
  color: var(--ink-2);
  font: 400 13px/1.4 var(--font-mono);
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 16px;
  margin-top: 28px;
}

.chart-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.chart-card--wide {
  grid-column: 1 / -1;
}

.chart-card__caption {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.chart-card__title {
  font: 600 15px/1.3 var(--font-sans);
}

.chart-card__meta,
.chart-card__note {
  color: var(--ink-2);
  font: 400 11px/1.3 var(--font-mono);
}

.chart-card__note {
  line-height: 1.4;
}

/* Frontier scatter: points at --x / --y, dot colour --dot */
.frontier {
  position: relative;
  height: 221px;  /* 220px + border */
  margin: 0 0 20px 36px;
  border-bottom: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
  background: linear-gradient(var(--paper-200) 1px, transparent 1px) 0 0 / 100% 25%;
}

.frontier__point {
  position: absolute;
  bottom: var(--y);
  left: var(--x);
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 11px/1 var(--font-mono);
  white-space: nowrap;
  transform: translate(-50%, 50%);
}

.frontier__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot);
}

.frontier__axis {
  position: absolute;
  color: var(--ink-2);
  font: 400 10px/1 var(--font-mono);
}

.frontier__axis--max  { top: -4px; left: -36px; }
.frontier__axis--zero { bottom: -4px; left: -22px; }
.frontier__axis--x    { right: 0; bottom: -18px; }

/* Latency bars: --p50 / --p95 of a 2,000 ms axis */
.latency {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.latency__row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 110px;
  align-items: center;
  gap: 10px;
  font: 400 12px/1 var(--font-mono);
}

.latency__track {
  position: relative;
  height: 14px;
  background: var(--paper-100);
}

.latency__track::before,
.latency__track::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 14px;
}

.latency__track::before { width: var(--p95); background: var(--mist-300); }
.latency__track::after  { width: var(--p50); background: var(--mist-600); }

.latency__value {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.latency__legend {
  color: var(--ink-2);
  font: 400 11px/1 var(--font-mono);
}

/* Confusion matrix (the negative margin cancels the outer cell spacing) */
.confusion {
  width: calc(100% + 6px);
  margin: -3px;
  border-collapse: separate;
  border-spacing: 3px;
  table-layout: fixed;
  font: 400 12px/1 var(--font-mono);
}

.confusion tr > :first-child {
  width: 90px;
}

.confusion th {
  padding: 0;
  color: var(--ink-2);
  font-weight: 400;
}

.confusion thead th {
  text-align: center;
}

.confusion tbody th {
  text-align: left;
}

.confusion td {
  padding: 0;
}

.confusion tbody td {
  height: 44px;
  border-radius: var(--radius-xs);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Sequential Mist scale cells (0 = lightest); 4–6 take white text */
.mist-scale--0 { background: var(--mist-scale-0); }
.mist-scale--1 { background: var(--mist-scale-1); }
.mist-scale--2 { background: var(--mist-scale-2); }
.mist-scale--3 { background: var(--mist-scale-3); }
.mist-scale--4 { background: var(--mist-scale-4); }
.mist-scale--5 { background: var(--mist-scale-5); }
.mist-scale--6 { background: var(--mist-scale-6); }

.confusion .mist-scale--4,
.confusion .mist-scale--5,
.confusion .mist-scale--6 {
  color: var(--white);
}

/* Funnel */
.funnel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.funnel__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 10px;
  font: 400 13px/1.2 var(--font-sans);
}

.funnel__track {
  height: 22px;
  background: var(--paper-100);
}

.funnel__bar {
  display: block;
  width: var(--value);
  height: 22px;
  background: var(--ink);
}

.funnel__value {
  font: 500 12px/1 var(--font-mono);
  text-align: right;
}

/* Heatmap (cells generated by kit-system.js) */
.heatmap-scroll {
  overflow-x: auto;
}

.heatmap {
  display: grid;
  grid-template-columns: 36px repeat(24, minmax(14px, 1fr));
  gap: 2px;
  min-width: 520px;
  font: 400 10px/1 var(--font-mono);
}

.heatmap__day {
  display: flex;
  align-items: center;
  color: var(--ink-2);
}

.heatmap__cell {
  height: 18px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   K11 · Conversion system
   -------------------------------------------------------------------------- */
.formula {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin-top: 32px;
  border-top: 1px solid var(--ink);
}

.formula__step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 0 0;
}

.formula__num {
  color: var(--machine-ink);
  font: 500 12px/1 var(--font-mono);
}

.formula__title {
  font: 600 17px/1.3 var(--font-sans);
}

.formula__text {
  color: var(--ink-2);
  font: 400 14px/1.5 var(--font-sans);
}

/* Documentation tables (routing, registers) in a .kit-frame */
.doc-table-frame {
  margin-top: 16px;
}

.doc-table-frame--first {
  margin-top: 32px;
}

.doc-table {
  width: 100%;
  font: 400 14px/1.4 var(--font-sans);
}

.doc-table th,
.doc-table td {
  vertical-align: baseline;  /* the original used display: table-cell divs */
}

.doc-table th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-2);
  font: 500 11px/1 var(--font-mono);
  text-align: left;
}

.doc-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--surface-sunken);
}

.routing-table {
  min-width: 640px;
}

.routing-table__route {
  font-weight: 500;
}

.routing-table__secondary {
  color: var(--ink-2);
}

.cta-chip {
  padding: 5px 9px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--action);
  font: 600 13px/1 var(--font-sans);
  white-space: nowrap;
}

.conversion-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 16px;
  margin-top: 40px;
}

.conversion-panel {
  gap: 12px;
}

.never-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.never-list li {
  display: flex;
  gap: 10px;
  font: 400 15px/1.4 var(--font-sans);
}

.never-list__mark {
  color: var(--error);
}

.code-sample code {
  font: inherit;
}

.code-sample {
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--term-950);
  color: var(--term-100);
  font: 400 13px/1.7 var(--font-mono);
  white-space: pre-wrap;
}

.vitals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
}

.vitals__item {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 4px;
  padding: 12px 8px 0;
}

.vitals__item:first-child {
  padding-left: 0;
}

.vitals__item:last-child {
  padding-right: 0;
}

.vitals__item + .vitals__item {
  border-left: 1px solid var(--hairline);
}

.vitals dd {
  font: 500 22px/1 var(--font-mono);
}

.vitals dt {
  color: var(--ink-2);
  font: 400 12px/1 var(--font-mono);
}

.conversion-panel__note {
  color: var(--ink-2);
  font: 400 13px/1.5 var(--font-sans);
}

/* --------------------------------------------------------------------------
   K12 · Content & transparency
   -------------------------------------------------------------------------- */
.register-table {
  min-width: 720px;
  line-height: 1.45;
}

.register-table__name {
  font-weight: 600;
  white-space: nowrap;
}

.register-table__tone {
  color: var(--ink-2);
}

.register-table__example {
  font-family: var(--font-serif);
  font-size: 16px;
}

.banned {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.banned__label {
  margin-right: 6px;
  color: var(--ink-2);
  font: 500 11px/1 var(--font-mono);
}

.banned__claim {
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--error-tint);
  color: var(--error);
  font: 400 14px/1 var(--font-sans);
}

.disclosure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 12px;
  margin-top: 16px;
}

.disclosure-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.disclosure-card__kind {
  color: var(--machine-ink);
  font: 500 11px/1 var(--font-mono);
}

.disclosure-card__text {
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--machine-tint);
  font: 400 15px/1.5 var(--font-sans);
}

.disclosure-card__text--plain {
  background: var(--surface-2);
}

.disclosure-card__where {
  color: var(--ink-2);
  font: 400 12px/1.4 var(--font-mono);
}

/* --------------------------------------------------------------------------
   Overlays (K08b)
   -------------------------------------------------------------------------- */
.overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
}

.overlay-backdrop--center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(18, 18, 18, .4);
}

.overlay-backdrop--light {
  background: rgba(18, 18, 18, .3);
}

.overlay-kicker {
  color: var(--machine-ink);
  font: 500 11px/1 var(--font-mono);
}

.overlay-kicker--mark {
  display: flex;
  align-items: center;
  gap: 8px;
}

.overlay-kicker__mark {
  box-sizing: content-box;
  width: 8px;
  height: 8px;
  border: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.overlay-note {
  color: var(--ink-2);
  font: 400 12px/1.4 var(--font-mono);
}

.overlay-btn {
  height: 48px;
  padding: 0 20px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: 500 16px/1 var(--font-sans);
}

.overlay-btn--primary {
  background: var(--action);
  font-weight: 600;
}

.overlay-btn--compact {
  height: 44px;
  padding: 0;
  font-size: 15px;
}

.overlay-btn--link {
  border-color: transparent;
  background: transparent;
  text-decoration: underline;
}

/* Upgrade + disclosure dialogs */
.overlay-dialog {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 578px;  /* 520px + padding + border */
  padding: 28px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 20px 48px -20px rgba(18, 18, 18, .4);
}

.overlay-dialog--disclosure {
  gap: 14px;
  max-width: 530px;  /* 480px + padding + border */
  padding: 24px;
  box-shadow: none;
}

.overlay-dialog__title {
  font: 400 30px/1.2 var(--font-serif);
}

.overlay-dialog__title--sm {
  font-size: 26px;
  line-height: 1.25;
}

.overlay-dialog__text {
  color: var(--ink-2);
  font: 400 16px/1.55 var(--font-sans);
}

.overlay-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.overlay-dialog__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--ink-2);
  font: 400 15px/1.5 var(--font-sans);
}

/* Source drawer */
.source-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(440px, 100%);
  padding: 24px;
  border-left: 1px solid var(--ink);
  background: var(--surface);
}

.source-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.source-drawer__close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font: 400 16px/1 Arial, sans-serif;
}

.source-drawer__title {
  font: 600 18px/1.3 var(--font-sans);
}

.source-drawer__text {
  font: 400 16px/1.7 var(--font-serif);
}

.source-drawer__text mark {
  background: var(--action);
  color: var(--ink);
}

.source-drawer__link {
  font: 500 14px/1 var(--font-sans);
}

/* Popover */
.overlay-popover {
  position: fixed;
  top: 40%;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 310px;  /* 280px + padding + border */
  padding: 14px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-control);
  background: var(--surface);
  box-shadow: 0 12px 32px -12px rgba(18, 18, 18, .3);
  transform: translateX(-50%);
}

.overlay-popover__title {
  font: 600 14px/1.3 var(--font-sans);
}

.overlay-popover__text {
  color: var(--ink-2);
  font: 400 13px/1.45 var(--font-sans);
}

.overlay-popover__link {
  font: 500 13px/1 var(--font-sans);
}

/* Toast */
.overlay-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 12px 12px 16px;
  border-radius: var(--radius-control);
  background: var(--ink);
  color: var(--canvas);
  font: 400 14px/1.3 var(--font-sans);
  white-space: nowrap;
  transform: translateX(-50%);
}

.overlay-toast__undo {
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--term-600);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--canvas);
  font: 500 13px/1 var(--font-sans);
}

/* Cookie consent */
.cookie-banner {
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 682px;  /* 640px + padding + border */
  margin: 0 auto;
  padding: 20px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 20px 48px -20px rgba(18, 18, 18, .4);
}

.cookie-banner__title {
  font: 600 16px/1.3 var(--font-sans);
}

.cookie-banner__text {
  color: var(--ink-2);
  font: 400 15px/1.5 var(--font-sans);
}

.cookie-banner__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

/* Site assistant */
.site-assistant {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: min(382px, calc(100% - 30px));  /* 380px + border */
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 20px 48px -20px rgba(18, 18, 18, .4);
}

.site-assistant__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline);
}

.site-assistant__title {
  font: 600 14px/1 var(--font-sans);
}

.site-assistant__close {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 400 16px/1 Arial, sans-serif;
}

.site-assistant__notice {
  padding: 10px 16px;
  background: var(--machine-tint);
  font: 400 12px/1.45 var(--font-sans);
}

.site-assistant__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.site-assistant__question {
  font: 400 16px/1.4 var(--font-serif);
}

.site-assistant__answer {
  padding: 12px;
  border-radius: var(--radius-control);
  background: var(--machine-tint);
  font: 400 14px/1.55 var(--font-sans);
}

.site-assistant__cite {
  padding: 1px 4px;
  border: 1px solid var(--machine-ink);
  border-radius: var(--radius-xs);
  background: var(--surface);
  font: 500 10px/1 var(--font-mono);
}

.site-assistant__link {
  align-self: flex-start;
  font: 500 14px/1 var(--font-sans);
}