/* ==========================================================================
   AgentPAM — app.css
   Derived from console.design-charter.md. Loaded AFTER themes/themes.css.

   Two hard rules enforced throughout this file:
     1. No hardcoded colors. Every color is a theme token (var(--bg) etc.).
     2. No bare pixel numbers. Every size derives from a structure token,
        which derives from --space-unit.

   Elevation philosophy: hairline-ruled. --shadow-* is used in exactly one
   place (the theme popover, the site's only overlay). Nothing else casts.
   ========================================================================== */

/* ---------------------------------------------------------- structure tokens */
/* ==========================================================================
   Theme tokens — the `mistral` block, inlined.

   Single fixed theme by user direction (2026-07-21): the runtime switcher and
   themes.css/themes.json/theme-switcher.js are no longer shipped. The TOKEN
   ARCHITECTURE is unchanged — nothing below this block references a literal
   color, so re-theming remains a matter of editing these values only.
   Values verified verbatim against the skill's generated themes.css.
   ========================================================================== */
:root {
  --bg: #ffffff;
  --surface: #fafafa;
  --surface-2: #eef0f3;
  --border: #e5e5e5;
  --text: #1f1f1f;
  --text-muted: #a8a8a8;
  --text-subtle: #8a8a8a;
  --primary: #fa520f;
  --primary-hover: #cc3a05;
  --primary-pressed: #cc3a05;
  --on-primary: #ffffff;
  --success: #1a7f37;
  --warning: #bb6a00;
  --danger: #d1242f;
  --info: #fa520f;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .10);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .16);
  --scheme: light;
}

/* --space-unit --content-pad --content-max --header-h and the rest of the
   12-token continuous contract come from structure/structure.css (the skill's
   curated kit). Only charter-specific roles are defined here.
   NOTE: the kit's Region Contract (#app-shell viewport grid) is deliberately
   NOT adopted — it is an authenticated-console shell, and its
   #content-main{overflow:auto} would break this site's full-bleed bands. */
:root {
  --s-1: calc(var(--space-unit) * 1);
  --s-2: calc(var(--space-unit) * 2);
  --s-3: calc(var(--space-unit) * 3);
  --s-4: calc(var(--space-unit) * 4);
  --s-5: calc(var(--space-unit) * 5);
  --s-6: calc(var(--space-unit) * 6);
  --s-8: calc(var(--space-unit) * 8);
  --s-10: calc(var(--space-unit) * 10);
  --s-12: calc(var(--space-unit) * 12);
  --s-18: calc(var(--space-unit) * 18);
  --s-28: calc(var(--space-unit) * 28);

  --content-max-tight: calc(var(--space-unit) * 190);

  --rhythm-section: clamp(var(--s-12), 8vw, var(--s-28));
  --rhythm-block: clamp(var(--s-6), 4vw, var(--s-12));
  --rhythm-tight: var(--s-3);

  --rule-w: 1px;
  --rule-accent-w: calc(var(--space-unit) * 0.75);

  /* Charter-owned type roles layered on the theme's baseline stacks. */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --font-body: var(--font-sans), "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.83rem);
  --step-0: clamp(0.94rem, 0.9rem + 0.18vw, 1rem);
  --step-1: clamp(1.06rem, 1rem + 0.3vw, 1.19rem);
  --step-2: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-3: clamp(1.45rem, 1.25rem + 1vw, 2.05rem);
  --step-4: clamp(1.85rem, 1.4rem + 2.2vw, 3.05rem);
}

/* Density is a per-region override, per charter §2.3 */
[data-density="compact"] {
  --rhythm-block: var(--s-4);
  --rhythm-tight: var(--s-2);
}
[data-density="comfortable"] {
  --rhythm-block: clamp(var(--s-8), 5vw, var(--s-18));
}

/* ------------------------------------------------------------------- base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.72;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Numerals are tabular everywhere — charter §2.10 */
table,
time,
.ttl,
.rung,
.figure,
.stat-figure,
code,
pre,
.mono {
  font-variant-numeric: tabular-nums;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: var(--step-4);
  line-height: 1.12;
}
h2 {
  font-size: var(--step-3);
}
h3,
h4 {
  font-family: var(--font-body);
  font-weight: 640;
  letter-spacing: -0.015em;
  line-height: 1.32;
  margin: 0;
}
h3 {
  font-size: var(--step-1);
}
h4 {
  font-size: var(--step-0);
}

p {
  margin: 0 0 1.05em;
  text-wrap: pretty;
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
  text-decoration-color: var(--border);
  text-underline-offset: 0.2em;
}
a:hover {
  text-decoration-color: currentColor;
}

code,
kbd,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

:where(p, li, td, dd, .callout, .rung-scope) > code {
  background: var(--surface-2);
  border: var(--rule-w) solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.06em 0.34em;
  font-size: 0.86em;
  color: var(--text);
}

strong {
  font-weight: 650;
  color: var(--text);
}

ul,
ol {
  margin: 0 0 1.05em;
  padding-left: 1.2em;
}
li {
  margin-bottom: 0.35em;
}
li::marker {
  color: var(--text-subtle);
}

:focus-visible {
  outline: calc(var(--space-unit) * 0.5) solid var(--primary);
  outline-offset: calc(var(--space-unit) * 0.5);
  border-radius: calc(var(--radius-sm) / 2);
}

::selection {
  background: var(--primary);
  color: var(--on-primary);
}

.skip {
  position: absolute;
  left: -100vw;
  top: 0;
  background: var(--surface);
  color: var(--text);
  padding: var(--s-3) var(--s-4);
  border: var(--rule-w) solid var(--border);
  z-index: 100;
}
.skip:focus {
  left: var(--s-2);
  top: var(--s-2);
}

/* -------------------------------------------------------------- primitives */
.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--content-pad);
}

section {
  padding-block: var(--rhythm-section);
  border-top: var(--rule-w) solid var(--border);
}
section.band {
  background: var(--surface);
}

/* Signature motif — attenuation rule. The eyebrow's leading rule is the
   smallest instance of the same decaying-width device as the token ladder. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin: 0 0 var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-weight: 500;
}
.eyebrow::before {
  content: "";
  width: var(--s-6);
  height: var(--rule-w);
  background: var(--text-subtle);
  flex: none;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.66;
  color: var(--text-muted);
  max-width: 62ch;
}

.note {
  font-size: var(--step--1);
  color: var(--text-subtle);
  line-height: 1.6;
}

.sec-head {
  max-width: 68ch;
  margin-bottom: var(--rhythm-block);
}
.sec-head p {
  margin-top: var(--s-4);
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: 1.66;
}

.stack > * + * {
  margin-top: var(--rhythm-block);
}

/* ------------------------------------------------------------------ header */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: var(--rule-w) solid var(--border);
}
.masthead .wrap {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  margin-right: auto;
  color: var(--text);
}
.brand svg {
  width: calc(var(--space-unit) * 5);
  height: calc(var(--space-unit) * 5);
  flex: none;
  display: block;
}
.brand em {
  font-style: normal;
  color: var(--text-subtle);
  font-weight: 400;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}
.nav a {
  font-size: var(--step--1);
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--s-2) var(--s-2);
  white-space: nowrap;
  font-family: var(--font-mono);
}
.nav a:hover {
  color: var(--text);
}
/* Active nav = bracket wrap — charter §2.9, palette-independent */
.nav a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}
.nav a[aria-current="page"]::before {
  content: "[";
  color: var(--primary);
}
.nav a[aria-current="page"]::after {
  content: "]";
  color: var(--primary);
}

@media (max-width: 40rem) {
  .nav a.opt {
    display: none;
  }
}

.lang-switch {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--s-1) var(--s-2);
  border: var(--rule-w) solid var(--border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.lang-switch:hover {
  color: var(--text);
  border-color: var(--text-subtle);
}

/* -------------------------------------------------------------------- hero */
.hero {
  border-top: 0;
  padding-block: var(--rhythm-section) var(--rhythm-block);
}
.hero h1 {
  max-width: 22ch;
}
.hero h1 .hl {
  color: var(--primary);
  font-style: normal;
}
.hero .lede {
  margin-top: var(--s-5);
  max-width: 58ch;
}

.hero-def {
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-5);
  border-left: var(--rule-accent-w) solid var(--primary);
  background: var(--surface);
  max-width: 66ch;
  color: var(--text-muted);
  line-height: 1.7;
}
.hero-def strong {
  color: var(--text);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-8);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-sm);
  border: var(--rule-w) solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 560;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-body);
}
.btn:hover {
  border-color: var(--text-subtle);
}
.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
.btn svg {
  width: var(--s-3);
  height: var(--s-3);
  flex: none;
}

.disclaim {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: var(--rule-w) solid var(--border);
}
.disclaim-label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-subtle);
  align-self: center;
}
.chip {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  padding: var(--s-1) var(--s-3);
  border: var(--rule-w) dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}
.chip s {
  text-decoration-color: var(--danger);
}

/* ----------------------------------------------- signature: token ladder */
.ladder-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.ladder-clock {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-subtle);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.pulse {
  width: calc(var(--space-unit) * 1.5);
  height: calc(var(--space-unit) * 1.5);
  border-radius: 50%;
  background: var(--success);
  flex: none;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

.rungs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* Width decay IS the argument — charter §2.8 */
.rung {
  width: var(--w);
  border: var(--rule-w) solid var(--border);
  border-left: var(--rule-accent-w) solid var(--border);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: var(--s-3) var(--s-4);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  min-width: 0;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.rung[data-tone="human"] {
  border-left-color: var(--text-subtle);
}
.rung[data-tone="session"],
.rung[data-tone="sub"] {
  border-left-color: var(--success);
}
.rung[data-tone="upstream"] {
  border-left-color: var(--primary);
}
.rung[data-tone="sub"] {
  border-style: dashed;
  border-left-style: solid;
}
.rung.minting {
  border-color: var(--primary);
}

.rung-step {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-subtle);
}
.rung-body {
  min-width: 0;
}
.rung-name {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.rung-name .sub {
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--text-muted);
  font-family: var(--font-body);
}
.rung-scope {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-subtle);
  margin-top: var(--s-1);
  overflow-wrap: anywhere;
}
.rung-ttl {
  font-family: var(--font-mono);
  text-align: right;
  white-space: nowrap;
  min-width: 7.5ch;
}
.rung-ttl b {
  display: block;
  font-weight: 600;
  color: var(--text);
}
.rung-ttl span {
  font-size: var(--step--1);
  color: var(--text-subtle);
  letter-spacing: 0.06em;
}
.rung[data-tone="upstream"] .rung-ttl b {
  color: var(--primary);
}

.rung-bar {
  grid-column: 1 / -1;
  height: calc(var(--space-unit) * 0.5);
  background: var(--surface-2);
  overflow: hidden;
}
.rung-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--border);
  transform-origin: left center;
}
.rung[data-tone="session"] .rung-bar i,
.rung[data-tone="sub"] .rung-bar i {
  background: var(--success);
}
.rung[data-tone="upstream"] .rung-bar i {
  background: var(--primary);
}

.rung-redact {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--primary);
  border: var(--rule-w) solid var(--primary);
  border-radius: var(--radius-sm);
  padding: var(--s-1) var(--s-3);
}
.rung-redact svg {
  width: var(--s-3);
  height: var(--s-3);
  flex: none;
}

.ladder-foot {
  margin-top: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-6);
  font-size: var(--step--1);
  color: var(--text-subtle);
  font-family: var(--font-mono);
}

@media (max-width: 45rem) {
  .rung {
    width: 100% !important;
    grid-template-columns: auto 1fr;
  }
  .rung-ttl {
    grid-column: 2;
    text-align: left;
  }
}

/* --------------------------------------------------------- argument band */
.claim {
  background: var(--text);
  color: var(--bg);
  border-top: 0;
}
.claim .eyebrow,
.claim .note {
  color: var(--bg);
  opacity: 0.62;
}
.claim .eyebrow::before {
  background: var(--bg);
  opacity: 0.62;
}
.claim blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.32;
  font-weight: 600;
  max-width: 24ch;
  text-wrap: balance;
}
.claim blockquote .hl {
  color: var(--primary);
}
.claim-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--rhythm-block);
  align-items: start;
}
@media (max-width: 55rem) {
  .claim-grid {
    grid-template-columns: 1fr;
  }
}
.claim-body p {
  color: var(--bg);
  opacity: 0.78;
  line-height: 1.75;
}
.claim-body strong {
  color: var(--bg);
  opacity: 1;
}
.claim-body code {
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-color: color-mix(in srgb, currentColor 22%, transparent);
  color: inherit;
}

.incidents {
  list-style: none;
  padding: 0;
  margin: var(--s-5) 0 0;
  display: grid;
  font-family: var(--font-mono);
  font-size: var(--step--1);
}
.incidents li {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  color: var(--bg);
  opacity: 0.72;
  padding: var(--s-2) 0;
  border-bottom: var(--rule-w) solid
    color-mix(in srgb, currentColor 22%, transparent);
  margin: 0;
}
.incidents li::before {
  content: "→";
  color: var(--primary);
  opacity: 1;
  flex: none;
}
.incidents b {
  color: var(--bg);
  opacity: 1;
  font-weight: 600;
}

.pull {
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-5);
  border-left: var(--rule-accent-w) solid var(--primary);
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.pull p {
  color: var(--bg);
  opacity: 1;
  font-weight: 500;
}
.pull cite {
  display: block;
  margin-top: var(--s-2);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--bg);
  opacity: 0.62;
}

/* ---------------------------------------------------- collapse equation */
.collapse {
  border: var(--rule-w) solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: var(--rhythm-block);
  overflow-x: auto;
}
.collapse-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--s-3), 2.5vw, var(--s-8));
  min-width: max-content;
  margin-inline: auto;
}
.dims {
  display: flex;
  gap: var(--s-2);
}
.dim {
  border: var(--rule-w) solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--s-2) var(--s-3);
  text-align: center;
  background: var(--bg);
  min-width: calc(var(--space-unit) * 22);
}
.dim b {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.dim span {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-subtle);
  margin-top: var(--s-1);
  white-space: nowrap;
}
.squash {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--danger);
  text-align: center;
  white-space: nowrap;
  flex: none;
}
.squash b {
  display: block;
  font-size: var(--step-2);
  line-height: 1;
}
.flat {
  font-family: var(--font-mono);
  padding: var(--s-3) var(--s-4);
  border: var(--rule-w) solid var(--danger);
  color: var(--danger);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  font-weight: 600;
  flex: none;
}

/* ---------------------------------------------- evidence (editorial list) */
.evidence {
  list-style: none;
  margin: var(--rhythm-block) 0 0;
  padding: 0;
  border-top: var(--rule-w) solid var(--border);
}
.evidence li {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  gap: var(--s-2) var(--s-6);
  align-items: baseline;
  padding: var(--s-4) 0;
  border-bottom: var(--rule-w) solid var(--border);
  margin: 0;
}
.stat-figure {
  font-family: var(--font-mono);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  min-width: 5ch;
}
.stat-claim {
  color: var(--text-muted);
  line-height: 1.6;
}
.stat-source {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-subtle);
  white-space: nowrap;
}
@media (max-width: 45rem) {
  .evidence li {
    grid-template-columns: minmax(0, 1fr);
  }
  .stat-source {
    grid-column: 1;
  }
}

/* ------------------------------------------------------------ cards/grids */
.grid {
  display: grid;
  gap: var(--s-4);
}
.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 56rem) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 38rem) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.card {
  border: var(--rule-w) solid var(--border);
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: var(--s-5);
  min-width: 0;
}
.card h3 {
  margin-bottom: var(--s-2);
}
.card p {
  color: var(--text-muted);
  line-height: 1.68;
}
.card-tag {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  display: block;
  margin-bottom: var(--s-3);
}
.card.accent {
  border-left: var(--rule-accent-w) solid var(--primary);
}
.card.accent-ok {
  border-left: var(--rule-accent-w) solid var(--success);
}
.card.accent-bad {
  border-left: var(--rule-accent-w) solid var(--danger);
}

.obj {
  border: var(--rule-w) solid var(--border);
  background: var(--bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.obj-head {
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--rule-w) solid var(--border);
  background: var(--surface-2);
}
.obj-head h3 {
  font-family: var(--font-mono);
  font-size: var(--step-0);
}
.obj-life {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  margin-top: var(--s-1);
  display: block;
}
.obj-life.persist {
  color: var(--success);
}
.obj-life.ephemeral {
  color: var(--primary);
}
.obj-body {
  padding: var(--s-4);
  flex: 1;
}
.obj-body p {
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: 1.66;
}
.fields {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  display: grid;
  gap: var(--s-1);
}
.fields li {
  margin: 0;
  color: var(--text-subtle);
  overflow-wrap: anywhere;
}
.fields li b {
  color: var(--text);
  font-weight: 600;
}
.fields li.key,
.fields li.key b {
  color: var(--success);
}

/* -------------------------------------------------------------- figures */
.figure {
  border: var(--rule-w) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  overflow: hidden;
}
.figure-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-2) var(--s-4);
  border-bottom: var(--rule-w) solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.figure-scroll {
  overflow-x: auto;
  padding: var(--s-4);
  -webkit-overflow-scrolling: touch;
}
pre.ascii {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.68rem, 0.6rem + 0.28vw, 0.79rem);
  line-height: 1.6;
  color: var(--text-muted);
  white-space: pre;
  min-width: max-content;
}
pre.ascii b {
  color: var(--text);
  font-weight: 600;
}
pre.ascii .c-ok {
  color: var(--success);
}
pre.ascii .c-pri {
  color: var(--primary);
}
pre.ascii .c-bad {
  color: var(--danger);
}
pre.ascii .c-dim {
  color: var(--text-subtle);
}
.figcap {
  padding: var(--s-3) var(--s-4);
  font-size: var(--step--1);
  color: var(--text-subtle);
  border-top: var(--rule-w) solid var(--border);
  line-height: 1.6;
}

/* --------------------------------------------------------------- tables */
.table-scroll {
  overflow-x: auto;
  border: var(--rule-w) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  -webkit-overflow-scrolling: touch;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  min-width: calc(var(--space-unit) * 155);
}
thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--rule-w) solid var(--border);
  background: var(--surface-2);
  vertical-align: bottom;
}
tbody td,
tbody th {
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--rule-w) solid var(--border);
  vertical-align: top;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: left;
  font-weight: 400;
}
tbody tr:last-child td,
tbody tr:last-child th {
  border-bottom: 0;
}
tbody th {
  color: var(--text);
  font-weight: 600;
}
.t-mono {
  font-family: var(--font-mono);
}
.yes {
  color: var(--success);
  font-weight: 600;
}
.no {
  color: var(--danger);
  font-weight: 600;
}
.tbd {
  color: var(--text-subtle);
  font-family: var(--font-mono);
}
.warnc {
  color: var(--warning);
  font-weight: 600;
}

/* --------------------------------------------------- definition lists */
.nots {
  border: var(--rule-w) solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg);
}
.not {
  display: grid;
  grid-template-columns: minmax(0, calc(var(--space-unit) * 60)) minmax(0, 1fr);
  gap: var(--s-1) var(--s-6);
  padding: var(--s-4) var(--s-5);
  border-bottom: var(--rule-w) solid var(--border);
  align-items: start;
}
.not:last-child {
  border-bottom: 0;
}
.not dt {
  font-weight: 650;
  color: var(--text);
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
  line-height: 1.5;
}
.not dt::before {
  content: "✕";
  color: var(--danger);
  font-family: var(--font-mono);
  font-size: 0.85em;
  flex: none;
}
.not.pos dt::before {
  content: "✓";
  color: var(--success);
}
.not dd {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.68;
}
.not .crit {
  font-family: var(--font-mono);
  color: var(--danger);
  font-size: var(--step--1);
}
@media (max-width: 44rem) {
  .not {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------- steps */
.steps {
  list-style: none;
  counter-reset: s;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-2);
}
.steps li {
  counter-increment: s;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-3) var(--s-4);
  border: var(--rule-w) solid var(--border);
  background: var(--bg);
  border-radius: var(--radius-sm);
  margin: 0;
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: 1.68;
}
.steps li::before {
  content: "[" counter(s) "]";
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-subtle);
}
.steps li b {
  color: var(--text);
}
.req {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  padding: 0 var(--s-2);
  border-radius: calc(var(--radius-sm) / 2);
  margin-left: var(--s-2);
  border: var(--rule-w) solid var(--success);
  color: var(--success);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- tiers */
.tiers {
  display: grid;
  gap: var(--s-2);
}
.tier {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-2) var(--s-5);
  align-items: start;
  border: var(--rule-w) solid var(--border);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: var(--s-4) var(--s-5);
}
.tier-n {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--text-subtle);
  white-space: nowrap;
}
.tier[data-key="true"] {
  border-left: var(--rule-accent-w) solid var(--primary);
}
.tier[data-key="true"] .tier-n {
  color: var(--primary);
}
.tier-body h3 {
  font-size: var(--step-0);
  margin-bottom: var(--s-1);
}
.tier-body p {
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: 1.66;
}
.ver {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-subtle);
  border: var(--rule-w) solid var(--border);
  border-radius: calc(var(--radius-sm) / 2);
  padding: 0 var(--s-2);
  white-space: nowrap;
}
@media (max-width: 40rem) {
  .tier {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ver {
    grid-column: 2;
    justify-self: start;
  }
}

/* -------------------------------------------------------------- callout */
.callout {
  border: var(--rule-w) solid var(--border);
  border-left: var(--rule-accent-w) solid var(--primary);
  background: var(--surface);
  padding: var(--s-4) var(--s-5);
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: 1.7;
}
.callout.warn {
  border-left-color: var(--danger);
}
.callout.good {
  border-left-color: var(--success);
}
.callout b,
.callout strong {
  color: var(--text);
}
.callout-title {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: var(--s-2);
}

/* ---------------------------------------------------------- page header */
.page-head {
  border-top: 0;
  padding-block: var(--rhythm-section) var(--rhythm-block);
}
.page-head h1 {
  font-size: var(--step-3);
  max-width: 26ch;
}
.page-head .lede {
  margin-top: var(--s-4);
}
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--rhythm-block);
  padding-top: var(--s-5);
  border-top: var(--rule-w) solid var(--border);
}
.toc a {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  padding: var(--s-1) var(--s-3);
  border: var(--rule-w) solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: none;
  background: var(--bg);
}
.toc a:hover {
  border-color: var(--text-subtle);
  color: var(--text);
}

.prose {
  max-width: 74ch;
}
.prose p,
.prose li {
  color: var(--text-muted);
  line-height: 1.75;
}

/* --------------------------------------------------------------- footer */
.footer {
  border-top: var(--rule-w) solid var(--border);
  padding-block: var(--rhythm-block);
  background: var(--surface);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--rhythm-block);
  align-items: start;
}
@media (max-width: 56rem) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 38rem) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.footer h4 {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  font-weight: 500;
  margin-bottom: var(--s-3);
}
.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-1);
  font-size: var(--step--1);
}
.footer ul li {
  margin: 0;
  color: var(--text-muted);
}
.footer ul a {
  color: var(--text-muted);
  text-decoration: none;
}
.footer ul a:hover {
  color: var(--text);
  text-decoration: underline;
}
.footer-def {
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 46ch;
}
.colophon {
  margin-top: var(--rhythm-block);
  padding-top: var(--s-4);
  border-top: var(--rule-w) solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-subtle);
}

/* ==========================================================================
   Comparison page
   ========================================================================== */

.stamp {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: var(--rule-w) solid var(--border);
  border-left: var(--rule-accent-w) solid var(--primary);
  background: var(--surface);
  max-width: 72ch;
}
.stamp p {
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: var(--s-2);
}
.stamp p:last-child {
  margin-bottom: 0;
}
.stamp-date {
  font-family: var(--font-mono);
  color: var(--text) !important;
  font-weight: 600;
}

/* The capability matrix is 6 columns wide — it scrolls in its own container,
   never the page body. */
table.wide {
  min-width: calc(var(--space-unit) * 260);
}
table.wide th[scope="row"] {
  min-width: calc(var(--space-unit) * 46);
}
table.wide td {
  min-width: calc(var(--space-unit) * 34);
}

.quote-block {
  margin-top: var(--rhythm-block);
  max-width: 74ch;
}
.quote-block p {
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: 1.7;
}
.vendor-quote {
  margin: var(--s-3) 0 var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-left: var(--rule-accent-w) solid var(--text-subtle);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--text);
}

.vendor {
  border: var(--rule-w) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  overflow: hidden;
}
.vendor-head {
  padding: var(--s-4) var(--s-5);
  border-bottom: var(--rule-w) solid var(--border);
  background: var(--surface-2);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
}
.vendor-head h3 {
  font-family: var(--font-mono);
  font-size: var(--step-1);
}
.vendor-head span {
  font-size: var(--step--1);
  color: var(--text-muted);
}
.vendor-body {
  padding: var(--s-5);
  display: grid;
  gap: var(--s-4);
}
.vendor-row {
  display: grid;
  grid-template-columns: minmax(0, calc(var(--space-unit) * 30)) minmax(0, 1fr);
  gap: var(--s-2) var(--s-5);
  align-items: start;
}
.vendor-row p {
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: 1.72;
}
.vendor-label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 0.15em;
}
.vendor-label.ok {
  color: var(--success);
}
.vendor-label.warn {
  color: var(--warning);
}
.vendor-label.pri {
  color: var(--primary);
}
@media (max-width: 44rem) {
  .vendor-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Deployment page
   ========================================================================== */

.cfg-h {
  margin-top: var(--rhythm-block);
  margin-bottom: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--step-1);
  padding-bottom: var(--s-2);
  border-bottom: var(--rule-w) solid var(--border);
}

/* Before/after config panes. The tinted lines make the disappearing `env`
   block impossible to miss — which is the single point of the whole page. */
.diff {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}
@media (max-width: 56rem) {
  .diff {
    grid-template-columns: minmax(0, 1fr);
  }
}
.diff-pane {
  border: var(--rule-w) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  overflow: hidden;
  min-width: 0;
}
.diff-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border-bottom: var(--rule-w) solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.diff-head span {
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-subtle);
}
.diff-head.del {
  color: var(--danger);
  border-bottom-color: var(--danger);
}
.diff-head.add {
  color: var(--success);
  border-bottom-color: var(--success);
}
.dl {
  display: block;
  padding-inline: var(--s-2);
  margin-inline: calc(var(--s-2) * -1);
}
.dl.del {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--text);
}
.dl.add {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--text);
}

.keychange {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: var(--rule-w) solid var(--primary);
  border-left-width: var(--rule-accent-w);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: 1.7;
}
.keychange strong {
  color: var(--text);
}

/* The POC checklist is the page's call to action — give it a real frame. */
.poc-box {
  border: var(--rule-accent-w) solid var(--primary);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.poc-box .table-scroll {
  border: 0;
  border-radius: 0;
}

/* ==========================================================================
   Eight-challenge self-diagnosis list
   ========================================================================== */

.chal {
  list-style: none;
  counter-reset: none;
  margin: 0;
  padding: 0;
  border-top: var(--rule-w) solid var(--border);
}
.chal-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-2) var(--s-5);
  align-items: start;
  padding: var(--s-5) 0;
  border-bottom: var(--rule-w) solid var(--border);
  margin: 0;
}
.chal-n {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-subtle);
  padding-top: 0.3em;
  min-width: 2ch;
}
.chal-body h3 {
  font-family: var(--font-mono);
  font-size: var(--step-0);
  letter-spacing: -0.01em;
}
.chal-alt {
  font-size: var(--step--1);
  color: var(--text-subtle);
  margin: var(--s-1) 0 0;
}
.chal-ans {
  margin: var(--s-3) 0 0;
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: 1.7;
}
.chal-ans-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: var(--s-1);
}

/* The coverage marker is the point of the section — the two honest ones are
   deliberately the most visually distinct. */
.chal-mark {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  white-space: nowrap;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-sm);
  border: var(--rule-w) solid var(--border);
  color: var(--text-muted);
  align-self: start;
}
.chal-item[data-mark="core"] .chal-mark,
.chal-item[data-mark="diff"] .chal-mark {
  color: var(--success);
  border-color: var(--success);
}
.chal-item[data-mark="yes"] .chal-mark {
  color: var(--text-muted);
}
.chal-item[data-mark="partial"] .chal-mark,
.chal-item[data-mark="gap"] .chal-mark {
  color: var(--warning);
  border-color: var(--warning);
  font-weight: 600;
}
.chal-item[data-mark="partial"],
.chal-item[data-mark="gap"] {
  background: color-mix(in srgb, var(--warning) 5%, transparent);
}

@media (max-width: 44rem) {
  .chal-item {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .chal-mark {
    grid-column: 2;
    justify-self: start;
  }
}