/*
 * SIDEQUEST — EDITORIAL TERMINAL
 *
 * One deliberate design system, three rules:
 *
 * 1. ONE SIGNAL COLOR. --signal (phosphor amber) marks what is live or has
 *    passed a gate: the active mission, gate states, primary actions, the
 *    dev-status dot, verification stamps. Everything else is monochrome.
 * 2. TYPE CARRIES HIERARCHY. --display is a condensed local grotesque used
 *    uppercase for titles; --mono is the labelling voice (uppercase, wide
 *    tracking, tabular numerals); --body stays quiet. Scale: 0.6rem micro
 *    labels / 0.75rem detail / 15px body / 1.25rem panel titles / clamp()
 *    heroes.
 * 3. FLAT SURFACES. Panels are hairline-bordered steps of the same paper
 *    (--paper -> --paper-bright -> --surface-2). No blurred shadows in the
 *    page plane; only floating overlays (dialogs, Cody, toasts) cast
 *    --overlay-shadow. Corners everywhere use var(--radius).
 *
 * The :root tokens below are the app's theme API. Mission 05 has learners
 * override the documented ones from learner/theme.css, so every color in
 * this file must be derived from a token (color-mix for tints) — never a
 * hardcoded surface or text hex.
 */

:root {
  /* Documented theme API — learner/theme.css overrides these (Mission 05).
   * The secondary text and hairline tokens are mixed from --ink and --paper
   * so a learner remix of the two base colors restyles every surface. */
  --paper: #0b0b0b;
  --paper-bright: color-mix(in srgb, var(--ink) 4%, var(--paper));
  --ink: #f2f0ea;
  --ink-soft: color-mix(in srgb, var(--ink) 80%, var(--paper));
  --muted: color-mix(in srgb, var(--ink) 58%, var(--paper));
  --line: color-mix(in srgb, var(--ink) 12%, var(--paper));
  --line-dark: color-mix(in srgb, var(--ink) 23%, var(--paper));
  --signal: #ffb000;
  --signal-ink: #140d00;
  --danger: #ff6a55;
  --display: "Avenir Next Condensed", Bahnschrift, "Arial Narrow", "Liberation Sans Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace;
  --rail-width: 272px;
  --topbar-height: 82px;
  --radius: 2px;

  /* Derived tokens — computed from the API above so learner overrides cascade. */
  --surface-2: color-mix(in srgb, var(--ink) 6%, var(--paper));
  --tint-hover: color-mix(in srgb, var(--ink) 8%, transparent);
  --grid-line: color-mix(in srgb, var(--ink) 4%, transparent);
  --signal-tint: color-mix(in srgb, var(--signal) 11%, transparent);
  --signal-glow: color-mix(in srgb, var(--signal) 35%, transparent);
  --signal-text: color-mix(in srgb, var(--signal) 82%, var(--ink));
  --overlay-shadow: 0 18px 60px color-mix(in srgb, var(--paper) 62%, transparent);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--paper);
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--signal);
  color: var(--signal-ink);
}

button,
input,
textarea {
  color: inherit;
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
  border-radius: var(--radius);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

a {
  color: inherit;
}

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

code {
  padding: 0.08em 0.35em;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  font-size: 0.9em;
}

kbd {
  display: inline-block;
  padding: 1px 5px 2px;
  border: 1px solid var(--line-dark);
  border-bottom-width: 2px;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--signal);
  color: var(--signal-ink);
  font-weight: 800;
  transform: translateY(-150%);
}

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

/* Boot — a power-on self-test: amber monogram in a reticle frame. */
.boot {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-content: center;
  gap: 26px;
  background: var(--paper);
  color: var(--ink);
  transition: opacity 450ms ease, visibility 450ms ease;
}

.boot.is-done {
  visibility: hidden;
  opacity: 0;
}

.boot__mark {
  position: relative;
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  margin: 0 auto;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  color: var(--signal-text);
  font: 900 2.1rem/1 var(--display);
  letter-spacing: 0.02em;
  animation: boot-pulse 1.2s ease-in-out infinite alternate;
}

.boot__mark::before,
.boot__mark::after {
  position: absolute;
  width: 14px;
  height: 14px;
  content: "";
}

.boot__mark::before {
  top: -5px;
  left: -5px;
  border-top: 2px solid var(--signal);
  border-left: 2px solid var(--signal);
}

.boot__mark::after {
  right: -5px;
  bottom: -5px;
  border-right: 2px solid var(--signal);
  border-bottom: 2px solid var(--signal);
}

.boot p {
  margin: 0;
  color: var(--muted);
  font: 600 0.66rem/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.boot__dots {
  display: inline-block;
  width: 1.8em;
  overflow: hidden;
  vertical-align: bottom;
  animation: boot-dots 1s steps(4, end) infinite;
}

@keyframes boot-pulse {
  to {
    border-color: var(--signal);
    box-shadow: 0 0 0 9px color-mix(in srgb, var(--signal) 7%, transparent);
  }
}

@keyframes boot-dots {
  from { width: 0; }
  to { width: 1.8em; }
}

.app-shell {
  min-height: 100svh;
  opacity: 0;
  transition: opacity 350ms ease 120ms;
}

.app-shell.is-ready {
  opacity: 1;
}

/* Side rail — same paper, separated by a hairline. */
.side-rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  width: var(--rail-width);
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  scrollbar-width: thin;
  scrollbar-color: var(--line-dark) transparent;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: var(--topbar-height);
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.brand__mark {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius);
  background: var(--signal);
  color: var(--signal-ink);
  font: 900 1.05rem/1 var(--display);
  letter-spacing: 0.02em;
}

.brand__word {
  color: var(--ink);
  font: 800 1.02rem/0.95 var(--display);
  letter-spacing: 0.14em;
}

.brand__word small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font: 600 0.56rem/1 var(--mono);
  letter-spacing: 0.12em;
}

.rail-progress {
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.rail-progress__label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--muted);
  font: 600 0.62rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rail-progress__label strong {
  color: var(--signal-text);
}

.progress-track {
  height: 3px;
  overflow: hidden;
  background: var(--line);
}

.progress-track span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--signal);
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.primary-nav {
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
}

.nav-item {
  display: grid;
  width: 100%;
  grid-template-columns: 32px 1fr;
  align-items: center;
  padding: 9px 10px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}

.nav-item:hover {
  color: var(--ink);
}

.nav-item.is-active {
  background: var(--tint-hover);
  color: var(--ink);
}

.nav-item.is-active::after {
  width: 6px;
  height: 6px;
  margin-left: auto;
  background: var(--signal);
  content: "";
}

.nav-item__index {
  color: var(--muted);
  font: 600 0.58rem/1 var(--mono);
}

.mission-rail {
  padding: 18px 8px 20px;
}

.rail-label {
  margin: 0 10px 12px;
  color: var(--muted);
  font: 600 0.58rem/1 var(--mono);
  letter-spacing: 0.16em;
}

.mission-list {
  display: grid;
  gap: 1px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.mission-link {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: 29px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

.mission-link:hover:not(:disabled) {
  color: var(--ink);
}

.mission-link.is-active {
  color: var(--signal-text);
}

.mission-link.is-active::before {
  position: absolute;
  inset: 4px auto 4px 0;
  width: 2px;
  background: var(--signal);
  content: "";
}

.mission-link.is-complete {
  color: var(--ink-soft);
}

.mission-link.is-complete .mission-link__state {
  color: var(--signal-text);
}

.mission-link:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.mission-link__number {
  font: 600 0.61rem/1 var(--mono);
}

.mission-link__name {
  overflow: hidden;
  font-size: 0.76rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mission-link__state {
  font: 700 0.72rem/1 var(--mono);
  text-align: right;
}

.rail-footer {
  display: grid;
  gap: 4px;
  padding: 12px 10px 16px;
  margin-top: auto;
  border-top: 1px solid var(--line);
}

.quiet-action {
  padding: 6px 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0.67rem;
  text-align: left;
  cursor: pointer;
}

.quiet-action:hover {
  color: var(--ink);
}

.quiet-action kbd {
  min-width: 32px;
  margin-right: 6px;
  font-size: 0.58rem;
  text-align: center;
}

/* Workspace — ruled paper: a faint 32px baseline grid. */
.workspace {
  min-height: 100svh;
  margin-left: var(--rail-width);
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    var(--paper);
  background-size: 100% 32px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  min-height: var(--topbar-height);
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px clamp(18px, 4vw, 54px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px);
}

.topbar__eyebrow {
  margin: 0 0 5px;
  color: var(--muted);
  font: 600 0.58rem/1 var(--mono);
  letter-spacing: 0.14em;
}

.topbar__title {
  margin: 0;
  font: 800 1.3rem/1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.learner-chip,
.dev-status {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--paper-bright);
  color: var(--ink-soft);
  font: 700 0.59rem/1 var(--mono);
  letter-spacing: 0.06em;
}

.dev-status {
  gap: 7px;
}

.dev-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 var(--signal-glow);
  animation: live-pulse 1.8s infinite;
}

.dev-status.is-offline i {
  background: var(--muted);
  animation: none;
}

@keyframes live-pulse {
  65% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.icon-button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--paper-bright);
  cursor: pointer;
}

.icon-button:hover {
  border-color: var(--signal);
  color: var(--signal-text);
}

/* Cody — a floating instrument readout for the starter pet. */
.cody-helper {
  position: fixed;
  right: 22px;
  bottom: 18px;
  z-index: 35;
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: end;
  gap: 10px;
  width: 250px;
  padding: 10px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--paper-bright);
  color: var(--ink);
  box-shadow: var(--overlay-shadow);
  transition: transform 220ms ease, opacity 220ms ease;
}

.cody-helper.is-tucked {
  grid-template-columns: 52px;
  width: 74px;
  padding: 5px;
}

.cody-helper.is-tucked .cody-helper__copy {
  display: none;
}

.cody-helper__sprite {
  display: grid;
  width: 92px;
  height: 104px;
  place-items: end center;
  padding: 0;
  border: 0;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 8px 8px;
  cursor: pointer;
}

.cody-helper.is-tucked .cody-helper__sprite {
  width: 52px;
  height: 60px;
}

.cody-helper__sprite-art {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("pets/cody/cody-helper.webp");
  background-position: 0% 0%;
  background-repeat: no-repeat;
  background-size: 800% 900%;
  image-rendering: pixelated;
  transform-origin: 50% 100%;
}

.cody-helper[data-cody-state="running"] .cody-helper__sprite-art { background-position: 0% 87.5%; }
.cody-helper[data-cody-state="review"] .cody-helper__sprite-art { background-position: 0% 100%; }
.cody-helper[data-cody-state="curious"] .cody-helper__sprite-art { background-position: 0% 37.5%; }
.cody-helper[data-cody-state="happy"] .cody-helper__sprite-art,
.cody-helper[data-cody-state="celebrate"] .cody-helper__sprite-art { background-position: 0% 50%; }
.cody-helper[data-cody-state="sleeping"] .cody-helper__sprite-art { background-position: 0% 75%; }

.cody-helper__copy {
  min-width: 0;
  padding: 5px 4px 8px 0;
}

.cody-helper__name {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.cody-helper__name strong {
  color: var(--ink);
  font: 900 1rem/1 var(--display);
  letter-spacing: 0.06em;
}

.cody-helper__name span,
.cody-helper__state {
  color: var(--muted);
  font: 700 0.55rem/1 var(--mono);
  letter-spacing: 0.08em;
}

.cody-helper__state {
  display: block;
  margin-top: 10px;
  color: var(--signal-text);
}

.cody-helper__copy p {
  max-width: 125px;
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 0.7rem;
  line-height: 1.35;
}

.cody-helper[data-cody-state="running"] .cody-helper__sprite-art,
.cody-helper[data-cody-state="review"] .cody-helper__sprite-art {
  animation: cody-bob 900ms ease-in-out infinite alternate;
}

.cody-helper[data-cody-state="curious"] .cody-helper__sprite-art {
  animation: cody-tilt 700ms ease-in-out infinite alternate;
}

.cody-helper[data-cody-state="happy"] .cody-helper__sprite-art,
.cody-helper[data-cody-state="celebrate"] .cody-helper__sprite-art {
  animation: cody-hop 520ms ease-in-out infinite alternate;
}

.cody-helper[data-cody-state="sleeping"] .cody-helper__sprite-art {
  filter: saturate(0.55) brightness(0.75);
}

@keyframes cody-bob {
  to { transform: translateY(-4px); }
}

@keyframes cody-tilt {
  to { transform: rotate(-4deg) translateY(-2px); }
}

@keyframes cody-hop {
  to { transform: translateY(-10px) scale(1.03); }
}

.mobile-controls {
  display: none;
}

.view {
  display: none;
  min-height: calc(100svh - var(--topbar-height));
  animation: view-enter 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.view.is-active {
  display: block;
}

@keyframes view-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Mission stage */
.mission-stage {
  display: grid;
  min-height: calc(100svh - var(--topbar-height));
  grid-template-columns: minmax(0, 1.55fr) minmax(290px, 0.65fr);
}

.mission-canvas {
  padding: clamp(28px, 5vw, 72px) clamp(22px, 6vw, 86px) 80px;
  border-right: 1px solid var(--line);
}

.mission-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(28px, 6vw, 68px);
  font: 650 0.62rem/1 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.mission-meta__number {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: var(--radius);
  background: var(--signal);
  color: var(--signal-ink);
  font-weight: 800;
}

.mission-meta__route {
  color: var(--muted);
}

.mission-title {
  max-width: 860px;
  margin: 0;
  font: 900 clamp(3rem, 7.2vw, 6.75rem)/0.92 var(--display);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.mission-summary {
  max-width: 620px;
  margin: 30px 0 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.8vw, 1.24rem);
  line-height: 1.55;
}

.mission-outcome {
  display: grid;
  max-width: 760px;
  grid-template-columns: 105px 1fr;
  gap: 22px;
  padding: 20px 0;
  margin: 40px 0 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.mission-outcome span {
  color: var(--signal-text);
  font: 700 0.6rem/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mission-outcome strong {
  font-size: 1rem;
  line-height: 1.45;
}

.learning-frame {
  max-width: 760px;
  margin: 22px 0 0;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--paper-bright);
}

.learning-frame__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: 700 0.57rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.learning-frame__topline strong {
  color: var(--ink);
  font-weight: 800;
}

.learning-frame__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
}

.learning-frame__grid > div {
  padding: 16px 17px 18px;
}

.learning-frame__grid > div + div {
  border-left: 1px solid var(--line);
}

.learning-frame h3,
.learning-gate > span {
  margin: 0 0 10px;
  color: var(--muted);
  font: 750 0.57rem/1 var(--mono);
  letter-spacing: 0.08em;
}

.learning-frame ul,
.learning-gate ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.learning-frame li,
.learning-gate li {
  position: relative;
  padding-left: 14px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.45;
}

.learning-frame li + li,
.learning-gate li + li {
  margin-top: 7px;
}

.learning-frame li::before,
.learning-gate li::before {
  position: absolute;
  top: 0.48em;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--signal);
  content: "";
}

.learning-frame__grid p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.5;
}

.learning-aha {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  margin-top: 15px;
  border-left: 2px solid var(--signal);
  border-radius: var(--radius);
  background: var(--signal-tint);
  color: var(--ink);
}

.learning-aha span {
  color: var(--signal-text);
  font: 800 0.57rem/1.4 var(--mono);
  letter-spacing: 0.08em;
}

.learning-aha strong {
  font-size: 0.78rem;
  line-height: 1.35;
}

.learning-gate {
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 15px;
  padding: 14px 17px 16px;
  border-top: 1px solid var(--line);
  background: var(--signal-tint);
}

.learning-gate > span {
  margin: 2px 0 0;
  color: var(--signal-text);
}

.gate-pending {
  display: grid;
  gap: 7px;
  padding: 0 24px 22px;
  color: var(--ink-soft);
  font-size: 0.73rem;
  line-height: 1.45;
}

.gate-pending strong {
  color: var(--ink);
}

.gate-pending code {
  display: block;
  padding: 7px 8px;
  margin-top: 4px;
  overflow-wrap: anywhere;
  border: 1px solid var(--line-dark);
  background: var(--surface-2);
  color: var(--signal-text);
  font: 0.62rem/1.45 var(--mono);
}

.mutation-picker {
  max-width: 760px;
  margin: 34px 0 0;
}

.pet-path-picker {
  margin: 28px 0 0;
}

.pet-path-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pet-path-option {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: start;
  padding: 11px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.pet-path-option:hover,
.pet-path-option.is-active {
  border-color: var(--signal);
  background: var(--signal-tint);
}

.pet-path-option__icon {
  font: 800 1.1rem/1 var(--display);
}

.pet-path-option strong,
.pet-path-option small {
  display: block;
}

.pet-path-option strong {
  font-size: 0.72rem;
}

.pet-path-option small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.35;
}

.mutation-picker__label {
  margin: 0 0 10px;
  color: var(--muted);
  font: 700 0.6rem/1 var(--mono);
  letter-spacing: 0.08em;
}

.mutation-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.mutation-option {
  padding: 10px 13px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--paper-bright);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}

.mutation-option:hover,
.mutation-option.is-active {
  border-color: var(--signal);
  background: var(--signal-tint);
}

.prompt-section {
  max-width: 760px;
  margin-top: 40px;
}

.section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 9px;
  color: var(--muted);
  font: 700 0.57rem/1 var(--mono);
  letter-spacing: 0.09em;
}

.section-label .is-ready,
.section-label#prompt-score.is-ready,
#prompt-score.is-ready {
  color: var(--signal-text);
}

/* Prompt panel — the terminal artifact: hairline frame, amber header rule. */
.prompt-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--paper-bright);
  color: var(--ink-soft);
}

.prompt-panel::before {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--signal);
  content: "";
}

.prompt-panel__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: 600 0.58rem/1 var(--mono);
  letter-spacing: 0.07em;
}

.prompt-panel pre {
  min-height: 160px;
  padding: 22px;
  margin: 0;
  overflow: auto;
  color: var(--ink-soft);
  font-size: clamp(0.73rem, 1.1vw, 0.85rem);
  line-height: 1.75;
  white-space: pre-wrap;
}

.prompt-panel__actions {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
}

.copy-prompt {
  min-width: 190px;
  padding: 14px 18px;
  border-radius: 0;
  background: var(--signal);
  color: var(--signal-ink);
  font-weight: 850;
  cursor: pointer;
}

.copy-prompt:hover {
  filter: brightness(1.08);
}

.live-note {
  display: flex;
  max-width: 760px;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.live-note__pulse {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 4px var(--signal-tint);
}

/* Proof panel */
.proof-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: var(--paper-bright);
}

.proof-panel__header {
  padding: 28px 26px 22px;
  border-bottom: 1px solid var(--line);
}

.proof-panel__header .kicker {
  margin-bottom: 10px;
}

.proof-panel__header h3 {
  margin: 0;
  font: 850 1.45rem/1 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.proof-panel__header p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.step-list {
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: steps;
}

.step-list li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  counter-increment: steps;
}

.step-list li::before {
  content: "0" counter(steps);
  color: var(--muted);
  font: 700 0.58rem/1.5 var(--mono);
}

.step-list strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.78rem;
}

.step-list span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.proof-checklist {
  padding: 22px 24px;
}

.proof-checklist h4 {
  margin: 0 0 12px;
  font: 750 0.62rem/1 var(--mono);
  letter-spacing: 0.08em;
}

.proof-check {
  display: grid;
  grid-template-columns: 19px 1fr;
  align-items: start;
  gap: 10px;
  padding: 7px 0;
  color: var(--ink-soft);
  font-size: 0.75rem;
  cursor: pointer;
}

.proof-check input {
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--signal);
}

.proof-note {
  padding: 0 24px 22px;
}

.proof-note label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font: 700 0.56rem/1 var(--mono);
  letter-spacing: 0.07em;
}

.proof-note textarea {
  width: 100%;
  min-height: 82px;
  resize: vertical;
  padding: 11px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 0.73rem;
  line-height: 1.45;
}

.proof-note textarea:focus {
  border-color: var(--signal);
}

.mission-actions {
  display: grid;
  gap: 9px;
  padding: 20px 24px 28px;
  margin-top: auto;
  border-top: 1px solid var(--line);
}

.primary-action,
.secondary-action {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-weight: 850;
  cursor: pointer;
}

.primary-action {
  background: var(--signal);
  color: var(--signal-ink);
}

.primary-action:hover:not(:disabled) {
  filter: brightness(1.08);
}

.primary-action:disabled {
  cursor: not-allowed;
  background: var(--surface-2);
  color: var(--muted);
}

.secondary-action {
  border: 1px solid var(--line-dark);
  background: transparent;
  color: var(--ink);
}

.secondary-action:hover {
  border-color: var(--ink);
}

/* Verification stamp — inked amber, slightly off-square, dashed inner frame. */
.completion-stamp {
  position: relative;
  display: grid;
  place-items: center;
  padding: 30px 24px;
  margin: 20px 24px;
  border: 2px solid var(--signal);
  border-radius: var(--radius);
  color: var(--signal-text);
  text-align: center;
  transform: rotate(-2deg);
  animation: stamp-in 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.completion-stamp::before {
  position: absolute;
  inset: 4px;
  border: 1px dashed var(--signal-glow);
  border-radius: var(--radius);
  content: "";
  pointer-events: none;
}

.completion-stamp strong {
  font: 900 1.6rem/1 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.completion-stamp span {
  margin-top: 7px;
  font: 700 0.55rem/1 var(--mono);
  letter-spacing: 0.12em;
}

@keyframes stamp-in {
  from { opacity: 0; transform: rotate(-2deg) scale(1.35); }
  to { opacity: 1; transform: rotate(-2deg) scale(1); }
}

/* Page intros */
.page-intro {
  max-width: 880px;
  padding: clamp(36px, 7vw, 92px) clamp(22px, 7vw, 94px) 42px;
}

.kicker {
  margin: 0 0 18px;
  color: var(--muted);
  font: 700 0.6rem/1 var(--mono);
  letter-spacing: 0.14em;
}

.page-intro h2,
.about-hero h2 {
  margin: 0;
  font: 900 clamp(2.8rem, 6.4vw, 6.25rem)/0.94 var(--display);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.page-intro > p:last-child,
.about-hero > p:last-child {
  max-width: 650px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* Prompt lab */
.prompt-lab-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.85fr);
  border-top: 1px solid var(--line);
}

.prompt-form {
  padding: 34px clamp(22px, 7vw, 94px) 70px;
  border-right: 1px solid var(--line);
}

.prompt-form label {
  display: block;
  margin-bottom: 22px;
  font: 750 0.64rem/1 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.prompt-form textarea {
  display: block;
  width: 100%;
  resize: vertical;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  border-radius: 0;
  margin-top: 6px;
  background: transparent;
  font: 500 0.92rem/1.5 var(--body);
  text-transform: none;
}

.prompt-form textarea:focus {
  border-color: var(--signal);
}

.prompt-form .teach-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  text-transform: none;
}

.prompt-form .teach-toggle input {
  width: 17px;
  height: 17px;
  accent-color: var(--signal);
}

.prompt-output-wrap {
  padding: 34px clamp(22px, 4vw, 54px) 70px;
  border-left: 1px solid var(--line);
  background: var(--paper-bright);
}

.prompt-output {
  position: relative;
  min-height: 300px;
  padding: 24px;
  margin: 0 0 12px;
  overflow: auto;
  border: 1px solid var(--line-dark);
  border-top: 2px solid var(--signal);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.7;
  white-space: pre-wrap;
}

.prompt-output-wrap .primary-action {
  width: 100%;
}

.microcopy {
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 0.69rem;
}

/* Toolkit */
.surface-map {
  border-top: 1px solid var(--line);
}

.surface-row {
  display: grid;
  grid-template-columns: 70px minmax(150px, 0.35fr) minmax(260px, 1fr) minmax(180px, 0.45fr);
  align-items: start;
  gap: 22px;
  padding: 24px clamp(22px, 7vw, 94px);
  border-bottom: 1px solid var(--line);
  transition: background 160ms ease;
}

.surface-row:hover {
  background: var(--paper-bright);
}

.surface-row__number {
  color: var(--muted);
  font: 700 0.62rem/1.5 var(--mono);
}

.surface-row h3 {
  margin: 0;
  font: 850 1.3rem/1 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.surface-row p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.55;
}

.surface-row code {
  justify-self: start;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 0.65rem;
}

.codex-moves {
  display: grid;
  grid-template-columns: minmax(230px, 0.6fr) minmax(0, 1.4fr);
  gap: 48px;
  padding: 52px clamp(22px, 7vw, 94px) 64px;
  border-top: 1px solid var(--line);
  background: var(--paper-bright);
}

.codex-moves__intro h3 {
  max-width: 330px;
  margin: 0;
  font: 900 clamp(2.1rem, 3.8vw, 4rem)/0.94 var(--display);
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.codex-moves__intro > p:last-child {
  max-width: 340px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.move-list {
  margin: 0;
  border-top: 1px solid var(--line-dark);
}

.move-list > div {
  display: grid;
  grid-template-columns: 138px 1fr;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-dark);
}

.move-list dt,
.move-list dd {
  margin: 0;
}

.move-list kbd {
  font-size: 0.66rem;
}

.move-list strong,
.move-list span {
  display: block;
}

.move-list strong {
  font-size: 0.76rem;
}

.move-list span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.67rem;
}

.official-reference {
  grid-column: 2;
  justify-self: start;
  color: var(--signal-text);
  font-size: 0.7rem;
  font-weight: 800;
  text-underline-offset: 4px;
}

/* Field note — editorial pull-quote with an amber spine. */
.field-note {
  display: grid;
  grid-template-columns: 90px minmax(0, 700px);
  gap: 32px;
  padding: 44px clamp(22px, 7vw, 94px) 80px;
  border-top: 1px solid var(--line);
  border-left: 3px solid var(--signal);
  background: var(--paper-bright);
}

.field-note__number {
  color: var(--signal-text);
  font: 800 0.62rem/1.3 var(--mono);
  letter-spacing: 0.08em;
}

.field-note p {
  margin: 0;
  font: 850 clamp(1.2rem, 2.4vw, 2rem)/1.15 var(--display);
  letter-spacing: 0.01em;
}

/* About */
.about-hero {
  min-height: 70svh;
  padding: clamp(48px, 9vw, 120px) clamp(22px, 7vw, 94px);
}

.about-hero h2 {
  max-width: 1050px;
}

.about-sequence {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.about-sequence div {
  min-height: 230px;
  padding: 24px;
  border-right: 1px solid var(--line);
}

.about-sequence div:last-child {
  border-right: 0;
}

.about-sequence strong {
  display: block;
  margin-bottom: 60px;
  color: var(--muted);
  font: 700 0.62rem/1 var(--mono);
}

.about-sequence span {
  display: block;
  font: 900 1.8rem/1 var(--display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.about-sequence p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.about-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 40px;
  align-items: start;
  padding: 50px clamp(22px, 7vw, 94px) 90px;
}

.about-footer p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.about-footer a {
  color: var(--ink);
  font-weight: 800;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.about-footer a:hover {
  color: var(--signal-text);
}

/* Atlas — the constellation: charted paper, node states, one lit focus. */
.atlas-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.7fr);
  gap: 18px;
  padding: 0 clamp(18px, 5vw, 70px) 70px;
}

.atlas-map {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  overflow-x: auto;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    var(--paper);
  background-size: 22px 22px;
}

.atlas-lane {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 620px;
  padding: 8px 0 14px;
}

.atlas-lane + .atlas-lane {
  border-top: 1px dashed var(--line-dark);
}

.atlas-lane h3 {
  margin: 10px 0 0;
  color: var(--muted);
  font: 750 0.57rem/1.2 var(--mono);
  letter-spacing: 0.08em;
}

.atlas-lane__nodes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 9px;
}

.atlas-node {
  position: relative;
  display: grid;
  min-height: 104px;
  align-content: start;
  gap: 5px;
  padding: 11px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--paper-bright);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

/* Node status bar: a 2px strip along the top edge. */
.atlas-node::before {
  position: absolute;
  inset: -1px -1px auto;
  height: 2px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: transparent;
  content: "";
}

.atlas-node:hover,
.atlas-node.is-focus {
  border-color: var(--signal);
  transform: translateY(-2px);
}

.atlas-node.is-focus {
  background: var(--signal-tint);
}

.atlas-node.is-focus::before {
  background: var(--signal);
}

.atlas-node--locked {
  opacity: 0.45;
}

.atlas-node--practice {
  border-style: dashed;
}

.atlas-node--practice::before {
  background: var(--signal-glow);
}

.atlas-node--passed::before {
  background: var(--signal);
}

.atlas-node--passed .atlas-node__number,
.atlas-node--passed small {
  color: var(--signal-text);
}

.atlas-node__number,
.atlas-node small,
.atlas-node em {
  color: var(--muted);
  font: 700 0.53rem/1.2 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.atlas-node strong {
  min-height: 2.2em;
  font: 850 0.95rem/1 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.atlas-node small { color: var(--ink-soft); }
.atlas-node em { color: var(--muted); font-size: 0.49rem; font-style: normal; }

.atlas-detail {
  align-self: start;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--line-dark);
  border-top: 2px solid var(--signal);
  border-radius: var(--radius);
  background: var(--paper-bright);
  color: var(--ink);
}

.atlas-detail__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font: 700 0.58rem/1 var(--mono);
  letter-spacing: 0.08em;
}

.atlas-detail h3 {
  margin: 28px 0 0;
  color: var(--signal-text);
  font: 900 clamp(2rem, 4vw, 3.4rem)/0.94 var(--display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.atlas-detail > p {
  margin: 17px 0 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.5;
}

.atlas-status { color: var(--signal-text); }
.atlas-status--locked { color: var(--danger); }

.atlas-facts {
  margin: 24px 0 0;
  border-top: 1px solid var(--line-dark);
}

.atlas-facts > div {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-dark);
}

.atlas-facts dt,
.atlas-facts dd { margin: 0; }
.atlas-facts dt,
.atlas-prereqs > span { color: var(--muted); font: 700 0.53rem/1.3 var(--mono); letter-spacing: 0.08em; }
.atlas-facts dd { color: var(--ink-soft); font-size: 0.7rem; line-height: 1.45; }

.atlas-prereqs {
  display: grid;
  gap: 8px;
  margin: 20px 0 22px;
}

.atlas-prereqs button,
.atlas-prereqs strong {
  justify-self: start;
  padding: 5px 8px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-size: 0.68rem;
  cursor: pointer;
}

.atlas-prereqs strong {
  cursor: default;
}

.atlas-prereqs button:hover {
  border-color: var(--signal);
  color: var(--signal-text);
}

/* Dialogs — floating overlays: bordered, shadowed, dimmed backdrop. */
dialog {
  padding: 0;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--paper-bright);
  color: var(--ink);
  box-shadow: var(--overlay-shadow);
}

dialog::backdrop {
  background: color-mix(in srgb, var(--paper) 74%, transparent);
  backdrop-filter: blur(6px);
}

.onboarding {
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100svh - 28px);
}

.onboarding form {
  padding: clamp(24px, 5vw, 54px);
}

.wizard-progress {
  display: flex;
  gap: 5px;
  margin-bottom: 44px;
}

.wizard-progress span {
  width: 42px;
  height: 3px;
  background: var(--line-dark);
}

.wizard-progress span.is-active {
  background: var(--signal);
}

.onboarding h2 {
  max-width: 620px;
  margin: 0;
  font: 900 clamp(2.3rem, 6vw, 4.6rem)/0.94 var(--display);
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.wizard-copy {
  max-width: 560px;
  margin: 22px 0 24px;
  color: var(--muted);
}

.route-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}

.route-option {
  position: relative;
  display: grid;
  min-height: 118px;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 17px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.route-option:hover,
.route-option.is-active {
  background: var(--signal-tint);
}

.route-option.is-active {
  box-shadow: inset 0 2px 0 var(--signal);
}

.route-option__icon {
  font-size: 1.15rem;
}

.route-option strong {
  display: block;
  font: 850 1.1rem/1 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.route-option span:last-child {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.69rem;
  line-height: 1.45;
}

.name-field {
  display: block;
  margin-top: 25px;
  font: 700 0.62rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.name-field input {
  display: block;
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  border-radius: 0;
  margin-top: 6px;
  background: transparent;
  font: 650 1rem/1.2 var(--body);
  text-transform: none;
}

.name-field input:focus {
  border-color: var(--signal);
}

.wizard-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}

.wizard-actions > span {
  max-width: 240px;
  color: var(--muted);
  font-size: 0.68rem;
}

.wizard-actions .primary-action {
  min-width: 210px;
}

/* Command menu — a terminal prompt: amber caret, mono input, lit result. */
.command-dialog {
  width: min(640px, calc(100vw - 24px));
  max-height: min(600px, calc(100svh - 60px));
  margin-top: 12vh;
  vertical-align: top;
}

.command-search-wrap {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 17px 19px;
  border-bottom: 1px solid var(--line-dark);
}

.command-caret {
  color: var(--signal-text);
  font: 700 0.85rem/1 var(--mono);
}

.command-search-wrap input {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 0.85rem;
}

.command-search-wrap:focus-within {
  box-shadow: inset 0 -2px 0 var(--signal);
}

.command-search-wrap input:focus-visible {
  outline: 0;
}

.command-search-wrap kbd {
  font-size: 0.58rem;
}

.command-results {
  max-height: 460px;
  overflow-y: auto;
  padding: 8px;
}

.command-result {
  display: grid;
  width: 100%;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.command-result:hover,
.command-result.is-active {
  background: var(--signal-tint);
  box-shadow: inset 2px 0 0 var(--signal);
}

.command-result > span:last-child {
  color: var(--muted);
  font: 700 0.62rem/1 var(--mono);
}

.command-result.is-active > span:last-child {
  color: var(--signal-text);
}

.command-result__icon {
  color: var(--muted);
  font: 700 0.62rem/1 var(--mono);
}

.command-result strong {
  display: block;
  font-size: 0.78rem;
}

.command-result small {
  color: var(--muted);
  font-size: 0.62rem;
}

.shortcuts-dialog {
  width: min(500px, calc(100vw - 24px));
  padding: 28px;
}

.dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.dialog-heading button {
  background: transparent;
  font-size: 1.6rem;
  cursor: pointer;
}

.shortcuts-dialog h2 {
  margin: 0 0 24px;
  font: 900 2.5rem/1 var(--display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.shortcuts-dialog dl {
  margin: 0;
  border-top: 1px solid var(--line-dark);
}

.shortcuts-dialog dl div {
  display: grid;
  grid-template-columns: 100px 1fr;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.shortcuts-dialog dt,
.shortcuts-dialog dd {
  margin: 0;
  font-size: 0.75rem;
}

.shortcuts-dialog kbd {
  font-size: 0.62rem;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1001;
  max-width: 340px;
  padding: 12px 15px;
  border: 1px solid var(--line-dark);
  border-left: 2px solid var(--signal);
  border-radius: var(--radius);
  background: var(--paper-bright);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: var(--overlay-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: none;
}

.confetti {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  top: -20px;
  width: 6px;
  height: 13px;
  background: var(--signal);
  animation: confetti-fall 1.7s ease-in forwards;
}

/* Build Week / Sidequest 5.6: the extension earns its own editorial marker. */
.expansion-marker {
  margin: 16px 16px 10px;
  padding: 12px 12px 13px;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  border-left: 2px solid var(--signal);
  background: color-mix(in srgb, var(--signal) 8%, transparent);
}

.expansion-marker span,
.expansion-marker small {
  display: block;
  color: var(--muted);
  font: 700 0.56rem/1.4 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.expansion-marker strong {
  display: block;
  margin: 4px 0 5px;
  color: var(--signal);
  font: 900 0.78rem/1 var(--display);
  letter-spacing: 0.08em;
}

.expansion-marker small { color: var(--ink); font-size: 0.56rem; letter-spacing: 0; text-transform: none; }

.prompt-clinic {
  margin-top: 34px;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: color-mix(in srgb, var(--paper-bright) 78%, transparent);
}

.clinic-header,
.clinic-controls,
.clinic-context,
.clinic-evidence {
  padding: 22px 26px;
  border-bottom: 1px solid var(--line);
}

.clinic-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  background: var(--ink);
  color: var(--paper-bright);
}

.clinic-header h3 { margin: 6px 0 7px; color: var(--paper-bright); font: 900 clamp(2rem, 5vw, 4.6rem)/0.9 var(--display); text-transform: uppercase; }
.clinic-header p:last-child { max-width: 680px; margin: 0; color: color-mix(in srgb, var(--paper-bright) 72%, transparent); }
.clinic-status { min-width: 160px; padding: 12px; border: 1px solid var(--line-dark); border-left: 2px solid var(--signal); color: var(--signal); text-align: right; }
.clinic-status span { display: block; font: 700 0.58rem/1.2 var(--mono); letter-spacing: 0.08em; }
.clinic-status strong { display: block; margin-top: 8px; font: 900 1.4rem/1 var(--display); }
.clinic-status:not(.is-ready) { color: var(--paper-bright); }

.clinic-controls { display: grid; grid-template-columns: minmax(180px, 0.8fr) 1fr; gap: 22px; align-items: end; }
.clinic-controls label,
.clinic-evidence > label,
.clinic-comparison label { display: grid; gap: 7px; color: var(--muted); font: 700 0.6rem/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.clinic-controls select,
.clinic-evidence select,
.clinic-evidence textarea,
.clinic-controls textarea { width: 100%; }
.clinic-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.clinic-choice > span { width: 100%; color: var(--muted); font: 700 0.58rem/1.2 var(--mono); letter-spacing: 0.08em; }
.clinic-choice button { padding: 8px 12px; border: 1px solid var(--line-dark); background: transparent; color: var(--ink); font: 700 0.65rem/1 var(--mono); cursor: pointer; }
.clinic-choice button.is-active { border-color: var(--signal); background: var(--signal); color: var(--signal-ink); }
.clinic-context { display: grid; grid-template-columns: 150px 1fr; gap: 22px; background: color-mix(in srgb, var(--signal) 8%, transparent); }
.clinic-context > span,
.clinic-evidence > .section-label,
.clinic-comparison > span { color: var(--signal-ink); font: 800 0.62rem/1.3 var(--mono); letter-spacing: 0.08em; }
.clinic-context p { margin: 0; max-width: 760px; }

.clinic-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.clinic-prompt-panel { min-width: 0; padding: 24px 26px; }
.clinic-prompt-panel + .clinic-prompt-panel { border-left: 1px solid var(--line); }
.clinic-prompt-panel--after { background: color-mix(in srgb, var(--signal) 5%, transparent); }
.clinic-prompt-panel pre,
.clinic-prompt-panel textarea { min-height: 246px; width: 100%; margin: 0 0 12px; padding: 15px; border: 1px solid var(--line-dark); background: var(--paper); color: var(--ink); font: 0.72rem/1.65 var(--mono); white-space: pre-wrap; resize: vertical; }
.clinic-prompt-panel pre { overflow: auto; }
.clinic-prompt-panel .secondary-action { margin-bottom: 18px; }
.clinic-rubric { border-top: 1px solid var(--line-dark); }
.clinic-rubric-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; color: var(--muted); font: 700 0.6rem/1.2 var(--mono); letter-spacing: 0.06em; }
.clinic-rubric-heading strong { color: var(--ink); }
.clinic-rubric-row { display: grid; grid-template-columns: 1fr 42px; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.clinic-rubric-row div { display: grid; gap: 4px; }
.clinic-rubric-row strong { font-size: 0.7rem; }
.clinic-rubric-row span { color: var(--muted); font-size: 0.64rem; line-height: 1.45; }
.clinic-rubric-row b { align-self: start; padding-top: 2px; color: var(--signal-ink); font: 800 0.7rem/1 var(--mono); text-align: right; }
.clinic-evidence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.clinic-evidence > .section-label,
.clinic-evidence > .microcopy,
.clinic-comparison,
.clinic-reflection { grid-column: 1 / -1; }
.clinic-evidence > .microcopy { margin: -7px 0 0; }
.clinic-evidence textarea { min-height: 110px; padding: 12px; border: 1px solid var(--line-dark); background: var(--paper); color: var(--ink); font: 0.72rem/1.5 var(--body); resize: vertical; }
.clinic-comparison { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.clinic-comparison > span { grid-column: 1 / -1; }
.clinic-comparison select { min-width: 0; padding-inline: 8px; font-size: 0.62rem; }

.recorder-intro { border-bottom: 1px solid var(--line); }
.recorder-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.65fr); border-bottom: 1px solid var(--line-dark); }
.recorder-main { min-width: 0; padding: 26px 30px 60px; border-right: 1px solid var(--line); }
.recorder-side { min-width: 0; padding: 26px 24px; background: color-mix(in srgb, var(--signal) 5%, transparent); }
.recorder-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 22px; }
.recorder-toolbar label { display: grid; gap: 6px; min-width: 145px; color: var(--muted); font: 700 0.58rem/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.recorder-toolbar select { min-height: 39px; font-size: 0.64rem; }
.recorder-toolbar .primary-action { margin-left: auto; }
.recorder-warning { display: flex; gap: 10px; margin-bottom: 28px; padding: 12px 14px; border-left: 2px solid var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); color: var(--ink); font-size: 0.7rem; line-height: 1.45; }
.recorder-warning strong { white-space: nowrap; }
.recorder-timeline { margin-top: 10px; border-top: 1px solid var(--line-dark); }
.recorder-event { display: grid; grid-template-columns: 24px 1fr; min-height: 84px; border-bottom: 1px solid var(--line); }
.recorder-event__rail { position: relative; border-right: 1px solid var(--line-dark); }
.recorder-event__rail::after { content: ""; position: absolute; top: 21px; right: -4px; width: 7px; height: 7px; background: var(--signal); border: 1px solid var(--signal-ink); }
.recorder-event__body { padding: 16px 0 16px 18px; }
.recorder-event__meta { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 5px; color: var(--muted); font: 700 0.58rem/1.2 var(--mono); }
.recorder-event__meta span { color: var(--signal-ink); text-transform: uppercase; }
.recorder-event__meta small { padding: 2px 5px; border: 1px solid var(--line); font-size: 0.52rem; }
.recorder-event__body > strong { display: block; max-width: 760px; font-size: 0.78rem; line-height: 1.4; }
.recorder-event__body code { display: block; margin-top: 7px; color: var(--muted); font-size: 0.58rem; white-space: pre-wrap; }
.recorder-empty { padding: 50px 0; border-bottom: 1px solid var(--line); }
.recorder-empty span { color: var(--signal-ink); font: 700 0.6rem/1.2 var(--mono); letter-spacing: 0.1em; }
.recorder-empty h3 { margin: 12px 0 7px; font: 900 2rem/1 var(--display); text-transform: uppercase; }
.recorder-empty p { max-width: 520px; margin: 0; color: var(--muted); }
.recorder-receipt,
.recorder-comparison__inner { padding: 18px; border: 1px solid var(--line-dark); background: var(--paper-bright); }
.recorder-receipt { border-top: 3px solid var(--line-dark); }
.recorder-receipt.is-ready { border-top-color: var(--signal); }
.recorder-receipt h3 { margin: 7px 0; font: 900 2rem/0.95 var(--display); text-transform: uppercase; }
.recorder-receipt p:not(.kicker) { color: var(--muted); font-size: 0.72rem; line-height: 1.5; }
.recorder-receipt dl { margin: 18px 0 0; border-top: 1px solid var(--line); }
.recorder-receipt dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.recorder-receipt dt { color: var(--muted); font: 700 0.56rem/1.2 var(--mono); }
.recorder-receipt dd { margin: 0; font: 800 0.6rem/1.2 var(--mono); text-align: right; }
.recorder-comparison { margin-top: 18px; }
.recorder-comparison__inner h3 { margin: 6px 0 18px; font: 900 1.7rem/1 var(--display); text-transform: uppercase; }
.recorder-comparison__inner > div { padding-top: 12px; border-top: 1px solid var(--line); }
.recorder-comparison__inner span { color: var(--muted); font: 700 0.56rem/1.2 var(--mono); }
.recorder-comparison__inner p { max-height: 180px; overflow: auto; margin: 6px 0 13px; font: 0.66rem/1.5 var(--mono); white-space: pre-wrap; }
.recorder-clear { width: 100%; margin-top: 18px; padding: 12px 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); text-align: left; }

@keyframes confetti-fall {
  to { transform: translate3d(var(--drift), 110svh, 0) rotate(700deg); opacity: 0; }
}

@media (max-width: 1080px) {
  :root { --rail-width: 232px; }
  .mission-stage { grid-template-columns: minmax(0, 1.2fr) minmax(270px, 0.7fr); }
  .mission-canvas { padding-inline: 40px; }
  .mission-title { font-size: clamp(3rem, 7vw, 5.4rem); }
  .surface-row { grid-template-columns: 48px minmax(130px, 0.3fr) 1fr; }
  .surface-row code { grid-column: 2 / -1; }
  .atlas-layout { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  :root { --topbar-height: 68px; }
  .side-rail {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .app-shell { background: var(--paper); }
  .brand { min-height: 62px; padding-block: 11px; }
  .brand__mark { width: 34px; height: 34px; }
  .rail-progress { position: absolute; inset: auto 0 -3px; z-index: 2; height: 3px; padding: 0; border: 0; }
  .rail-progress__label { display: none; }
  .progress-track { height: 3px; }
  .primary-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 0;
    border-top: 1px solid var(--line);
    border-bottom: 0;
  }
  .nav-item { grid-template-columns: 1fr; justify-items: center; padding: 9px 4px; font-size: 0.65rem; }
  .nav-item__index, .nav-item.is-active::after { display: none; }
  .mission-rail, .rail-footer { display: none; }
  .workspace { margin-left: 0; }
  .topbar { position: relative; min-height: var(--topbar-height); padding: 10px 16px; }
  .cody-helper {
    right: 10px;
    bottom: 10px;
    grid-template-columns: 62px 1fr;
    width: 188px;
    padding: 7px;
  }
  .cody-helper__sprite { width: 62px; height: 74px; }
  .cody-helper__name strong { font-size: 0.82rem; }
  .cody-helper__copy p { max-width: 100px; font-size: 0.62rem; }
  .pet-path-options { grid-template-columns: 1fr; }
  .atlas-layout { padding-inline: 18px; }
  .atlas-detail { order: -1; }
  .atlas-map { margin-inline: 0; }
  .learning-frame__topline { align-items: flex-start; flex-direction: column; gap: 7px; }
  .learning-frame__grid { grid-template-columns: 1fr; }
  .learning-frame__grid > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .learning-gate { grid-template-columns: 1fr; gap: 8px; }
  .mobile-controls {
    position: sticky;
    top: 0;
    z-index: 14;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px 46px;
    min-height: 48px;
    border-bottom: 1px solid var(--line);
    background: var(--paper-bright);
  }
  .mobile-mission-picker {
    display: grid;
    min-width: 0;
    align-items: stretch;
    border-right: 1px solid var(--line);
  }
  .mobile-mission-picker select {
    width: 100%;
    min-height: 47px;
    padding: 0 34px 0 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font: 750 0.68rem/1.2 var(--mono);
    text-overflow: ellipsis;
  }
  .mobile-utility {
    min-width: 44px;
    min-height: 47px;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font: 750 0.68rem/1 var(--mono);
    cursor: pointer;
  }
  .mobile-utility:last-child { border-right: 0; }
  .learner-chip { display: none; }
  .mission-stage { display: block; }
  .mission-canvas { padding: 36px 22px 48px; border-right: 0; border-bottom: 1px solid var(--line); }
  .mission-meta { margin-bottom: 42px; }
  .mission-title { font-size: clamp(3rem, 14vw, 5.2rem); }
  .mission-outcome { grid-template-columns: 78px 1fr; }
  .proof-panel { min-height: 560px; }
  .prompt-lab-layout { grid-template-columns: 1fr; }
  .prompt-form { border-right: 0; border-bottom: 1px solid var(--line); }
  .prompt-output-wrap { border-left: 0; }
  .about-sequence { grid-template-columns: repeat(2, 1fr); }
  .about-sequence div:nth-child(2) { border-right: 0; }
  .about-sequence div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .about-footer { grid-template-columns: 1fr; }
  .codex-moves { grid-template-columns: 1fr; gap: 30px; }
  .official-reference { grid-column: 1; }
  .expansion-marker { display: none; }
  .recorder-layout { display: block; }
  .recorder-main { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 18px 42px; }
  .recorder-side { padding: 22px 18px 40px; }
  .recorder-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recorder-toolbar label { min-width: 0; }
  .recorder-toolbar .secondary-action,
  .recorder-toolbar .primary-action { width: 100%; margin-left: 0; }
  .clinic-header { display: block; }
  .clinic-status { margin-top: 18px; text-align: left; }
  .clinic-controls { grid-template-columns: 1fr; }
  .clinic-context { grid-template-columns: 1fr; gap: 8px; }
  .clinic-columns { grid-template-columns: 1fr; }
  .clinic-prompt-panel + .clinic-prompt-panel { border-top: 1px solid var(--line); border-left: 0; }
  .clinic-evidence { grid-template-columns: 1fr; }
  .clinic-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clinic-comparison > span { grid-column: 1 / -1; }
}

.judge-demo-action { min-height: 38px; padding: 8px 12px; border: 1px solid var(--line-dark); background: var(--signal); color: var(--ink); font: 700 .66rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.judge-demo-action:hover, .judge-demo-action:focus-visible { background: var(--ink); color: var(--signal); }
.judge-dialog { width: min(920px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 32px)); padding: 0; border: 1px solid var(--line-dark); border-radius: 0; background: var(--paper); color: var(--ink); box-shadow: 12px 12px 0 rgba(23,24,20,.28); }
.judge-dialog::backdrop { background: rgba(23,24,20,.72); }
.judge-dialog__chrome { display: flex; justify-content: space-between; gap: 24px; padding: 22px 26px; background: var(--ink); color: var(--paper-bright); }
.judge-dialog__chrome .kicker { color: var(--signal); }
.judge-dialog__chrome h2 { margin: 4px 0 0; font: 700 clamp(2.2rem, 5vw, 4.4rem)/.86 var(--display); text-transform: uppercase; }
.judge-dialog__chrome button { width: 38px; height: 38px; border: 1px solid #777970; background: transparent; color: #fff; font-size: 1.5rem; cursor: pointer; }
.judge-progress { display: grid; gap: 12px; padding: 18px 26px 0; }
.judge-progress > span, .judge-cue, .judge-boundary { color: var(--muted); font: 700 .66rem/1.35 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.judge-progress > div { display: flex; gap: 5px; flex-wrap: wrap; }
.judge-progress button { border: 1px solid var(--line); padding: 7px 9px; background: #e4e0d3; color: var(--muted); font: 700 .62rem/1 var(--mono); cursor: pointer; }
.judge-progress button.is-active { background: var(--signal); color: var(--ink); border-color: var(--ink); }.judge-progress button.is-done { color: var(--ink); }
.judge-cue { margin: 18px 26px 0; letter-spacing: .02em; text-transform: none; }
.judge-opening, .judge-demo-card, .judge-finale { margin: 18px 26px; padding: 28px; border: 1px solid var(--line-dark); background: var(--paper-bright); }
.judge-opening { background: #ebe8dd; }.judge-opening > span, .judge-demo-card > span, .judge-finale > span { color: var(--muted); font: 700 .68rem/1.2 var(--mono); letter-spacing: .08em; }
.judge-opening h3, .judge-demo-card h3, .judge-finale h3 { max-width: 720px; margin: 12px 0; font: 700 clamp(2rem, 5vw, 4.5rem)/.9 var(--display); text-transform: uppercase; }
.judge-opening p, .judge-demo-card p, .judge-finale p { max-width: 720px; color: var(--ink-soft); line-height: 1.5; }
.judge-signal-row { display: grid; gap: 8px; margin-top: 22px; padding: 16px; border-left: 4px solid var(--signal-text); background: #e9edcf; }.judge-signal-row strong { font: 700 1.1rem/1.1 var(--display); text-transform: uppercase; }.judge-signal-row small { color: var(--muted); }
.judge-demo-card--warning { border-left: 5px solid #b87a23; background: #f4e6c8; }.judge-demo-card dl, .judge-finale dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 22px 0 0; }.judge-demo-card dl div, .judge-finale dl div { display: grid; gap: 5px; padding: 12px; border-top: 1px solid var(--line); }.judge-demo-card dt, .judge-finale dt { color: var(--muted); font: 700 .62rem/1 var(--mono); text-transform: uppercase; }.judge-demo-card dd, .judge-finale dd { margin: 0; color: var(--ink-soft); font-weight: 700; }
.judge-finale { background: var(--paper); color: var(--ink); border-color: #777970; }.judge-finale p, .judge-finale dd { color: #d7d8cc; }.judge-finale span, .judge-finale dt { color: var(--signal); }.judge-finale strong { display: block; margin-top: 20px; color: var(--signal); font: 700 1rem/1 var(--mono); text-transform: uppercase; }
.judge-actions { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 26px 18px; }.judge-boundary { margin: 0; padding: 0 26px 24px; letter-spacing: 0; text-transform: none; }.judge-boundary code { color: var(--ink); }
.packaging-lab, .final-flight { border: 1px solid var(--line-dark); background: var(--paper-bright); }.packaging-lab__header, .final-flight__header { display: flex; justify-content: space-between; gap: 22px; padding: 26px clamp(22px, 4vw, 54px); background: var(--ink); color: var(--paper-bright); }.packaging-lab__header h3, .final-flight__header h3 { margin: 3px 0 8px; font: 700 clamp(2rem, 5vw, 4.2rem)/.86 var(--display); text-transform: uppercase; }.packaging-lab__header p:not(.kicker), .final-flight__header p:not(.kicker) { max-width: 610px; color: #c9c9bd; }.packaging-lab__header .kicker, .final-flight__header .kicker { color: var(--signal); }.packaging-lab__state, .final-flight__state { min-width: 170px; align-self: flex-start; padding: 12px; border-left: 3px solid var(--signal); background: #252620; text-transform: uppercase; }.packaging-lab__state span, .packaging-lab__state strong, .final-flight__state span, .final-flight__state strong { display: block; }.packaging-lab__state span, .final-flight__state span { color: var(--signal); font: 700 .65rem/1.2 var(--mono); letter-spacing: .08em; }.packaging-lab__state strong, .final-flight__state strong { margin-top: 7px; color: #fff; font: 700 .92rem/1.1 var(--display); }
.packaging-decision { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(240px, .9fr); gap: 24px; padding: 24px clamp(22px, 4vw, 54px); border-bottom: 1px solid var(--line); background: #ebe8dd; }.packaging-decision span, .packaging-anatomy .kicker, .packaging-safety__title span { color: var(--muted); font: 700 .65rem/1.2 var(--mono); letter-spacing: .08em; }.packaging-decision strong { display: block; margin: 8px 0; font: 700 2rem/.9 var(--display); text-transform: uppercase; }.packaging-decision p { margin: 0 0 8px; color: var(--ink-soft); line-height: 1.45; }.packaging-decision small { color: var(--muted); }.packaging-surface-map { display: flex; flex-wrap: wrap; align-content: start; gap: 7px; }.packaging-surface-map span { padding: 8px 10px; border: 1px solid var(--line); color: var(--muted); font: 700 .65rem/1 var(--mono); }.packaging-surface-map span.is-selected { border-color: var(--ink); background: var(--signal); color: var(--ink); }
.packaging-fields, .final-flight-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; padding: 26px clamp(22px, 4vw, 54px); border-bottom: 1px solid var(--line); }.packaging-fields label, .final-flight-fields label { display: grid; gap: 7px; color: var(--muted); font: 700 .68rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }.packaging-fields input, .packaging-fields select, .packaging-fields textarea, .final-flight-fields select, .final-flight-fields textarea { width: 100%; border: 1px solid var(--line-dark); border-radius: 0; background: var(--paper-bright); color: var(--ink); font: 500 .88rem/1.45 var(--body); }.packaging-fields input, .packaging-fields select, .final-flight-fields select { min-height: 42px; padding: 9px 11px; }.packaging-fields textarea, .final-flight-fields textarea { min-height: 90px; padding: 11px; resize: vertical; }.packaging-field--wide { grid-column: 1 / -1; }
.packaging-anatomy { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 25px clamp(22px, 4vw, 54px); background: #f0eee5; border-bottom: 1px solid var(--line); }.packaging-anatomy h4 { margin: 7px 0; font: 700 1.7rem/.95 var(--display); text-transform: uppercase; }.packaging-anatomy p { color: var(--ink-soft); line-height: 1.45; }.packaging-anatomy ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }.packaging-anatomy li { display: grid; gap: 4px; padding: 11px 13px; border-left: 3px solid var(--signal-text); background: var(--paper-bright); }.packaging-anatomy li strong { font: 700 .72rem/1 var(--mono); text-transform: uppercase; }.packaging-anatomy li span { color: var(--muted); font-size: .8rem; }
.packaging-safety { padding: 24px clamp(22px, 4vw, 54px); border-bottom: 1px solid var(--line); background: #e4e0d3; }.packaging-safety__title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }.packaging-safety__title strong { font: 700 1.4rem/.9 var(--display); text-transform: uppercase; }.packaging-warning-list { display: grid; gap: 9px; margin: 18px 0 0; padding: 0; list-style: none; }.packaging-warning { display: grid; gap: 5px; padding: 12px 14px; border-left: 4px solid #b87a23; background: #f4e6c8; }.packaging-warning--blocker { border-color: var(--danger); background: #f3d8d0; }.packaging-warning strong { font: 700 .73rem/1 var(--mono); }.packaging-warning span, .packaging-warning small { color: var(--ink-soft); font-size: .8rem; line-height: 1.4; }.packaging-pass { display: grid; gap: 6px; margin-top: 18px; padding: 14px; border-left: 4px solid var(--signal-text); background: #e9edcf; }.packaging-pass strong { font: 700 .72rem/1 var(--mono); }.packaging-pass span { color: var(--ink-soft); }
.packaging-actions, .final-flight-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px clamp(22px, 4vw, 54px); border-bottom: 1px solid var(--line); }.packaging-receipt, .final-credential-wrap { padding: 25px clamp(22px, 4vw, 54px); background: var(--ink); }.packaging-empty, .final-empty { padding: 18px; border: 1px dashed #777970; background: #252620; color: var(--paper-bright); }.packaging-empty span, .final-empty span { color: var(--signal); font: 700 .65rem/1 var(--mono); }.packaging-empty strong, .final-empty strong { display: block; margin: 8px 0; font: 700 1.5rem/.9 var(--display); text-transform: uppercase; }.packaging-empty p, .final-empty p { margin: 0; color: #c9c9bd; }.packaging-receipt-card, .final-credential { border: 1px solid #777970; background: var(--paper-bright); }.packaging-receipt-card .kicker, .final-credential .kicker { padding: 16px 18px 0; }.packaging-receipt-card h4, .final-credential h4 { margin: 5px 18px 14px; font: 700 clamp(1.8rem, 4vw, 3rem)/.9 var(--display); text-transform: uppercase; }.packaging-receipt-card dl, .final-credential dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }.packaging-receipt-card dl div, .final-credential dl div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 11px 18px; border-top: 1px solid var(--line); }.packaging-receipt-card dt, .final-credential dt { color: var(--muted); font: 700 .62rem/1.2 var(--mono); text-transform: uppercase; }.packaging-receipt-card dd, .final-credential dd { min-width: 0; margin: 0; color: var(--ink-soft); font-size: .78rem; overflow-wrap: anywhere; }.packaging-receipt-card > p:last-child, .final-credential > p:last-child { margin: 0; padding: 14px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; }.final-credential__label { margin: 0 18px 14px; color: var(--danger); font: 700 .68rem/1 var(--mono); }.final-credential h5 { margin: 18px; color: var(--muted); font: 700 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }.final-credential ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }.final-credential li { display: grid; gap: 4px; padding: 12px 18px; border-top: 1px solid var(--line); }.final-credential li strong { font-size: .86rem; }.final-credential li span { color: var(--muted); font-size: .76rem; }.final-flight-boundary { margin: 0; padding: 18px clamp(22px, 4vw, 54px); color: var(--muted); background: #ebe8dd; font-size: .78rem; line-height: 1.45; }
.final-evidence-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 25px clamp(22px, 4vw, 54px); border-bottom: 1px solid var(--line); background: #ebe8dd; }.final-evidence-card { display: grid; gap: 7px; min-height: 145px; padding: 14px; border: 1px solid var(--line); background: var(--paper-bright); }.final-evidence-card > span { color: var(--danger); font: 700 .63rem/1 var(--mono); }.final-evidence-card.is-complete { border-left: 4px solid var(--signal-text); }.final-evidence-card.is-complete > span { color: var(--signal-text); }.final-evidence-card strong { font: 700 1.15rem/.95 var(--display); text-transform: uppercase; }.final-evidence-card small, .final-evidence-card p { color: var(--muted); font-size: .76rem; line-height: 1.4; }.final-evidence-card p { margin: 0; }
.recorder-receipt--packaging, .recorder-receipt--final-flight { margin-top: 18px; border-top: 3px solid var(--signal-text); }

@media (max-width: 820px) {
  .judge-demo-action { display: none; }
  .judge-dialog { width: calc(100vw - 18px); max-height: calc(100vh - 18px); }
  .judge-dialog__chrome, .judge-progress, .judge-actions { padding-inline: 17px; }.judge-opening, .judge-demo-card, .judge-finale { margin-inline: 17px; padding: 20px; }.judge-cue, .judge-boundary { margin-inline: 17px; padding-inline: 0; }.judge-demo-card dl, .judge-finale dl { grid-template-columns: 1fr; }
  .packaging-lab__header, .final-flight__header { display: block; padding-inline: 17px; }.packaging-lab__state, .final-flight__state { margin-top: 18px; }.packaging-decision, .packaging-fields, .final-flight-fields, .packaging-anatomy { grid-template-columns: 1fr; padding-inline: 17px; }.packaging-field--wide { grid-column: auto; }.packaging-safety, .packaging-actions, .packaging-receipt, .final-evidence-grid, .final-flight-actions, .final-credential-wrap, .final-flight-boundary { padding-inline: 17px; }.final-evidence-grid { grid-template-columns: 1fr; }.packaging-receipt-card dl, .final-credential dl { grid-template-columns: 1fr; }.packaging-receipt-card dl div, .final-credential dl div { grid-template-columns: 105px 1fr; padding-inline: 14px; }.packaging-actions button, .final-flight-actions button { width: 100%; }
}

/* Mission 24 — Safe Automations: dense operator surface with explicit stop points. */
.automation-designer { margin-top: 30px; border-top: 1px solid var(--line-dark); background: var(--paper-bright); }
.automation-designer__header { display: flex; justify-content: space-between; gap: 24px; padding: 30px clamp(22px, 4vw, 54px); border-bottom: 1px solid var(--line); background: var(--ink); color: var(--paper-bright); }
.automation-designer__header h3 { margin: 2px 0 8px; font: 700 clamp(2.5rem, 6vw, 5rem)/.88 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
.automation-designer__header p:not(.kicker) { max-width: 620px; color: #c9c9bd; }
.automation-designer__header .kicker { color: var(--signal); }
.automation-designer__state { min-width: 190px; align-self: flex-start; padding: 12px; border-left: 3px solid var(--signal); background: #252620; text-transform: uppercase; }
.automation-designer__state span, .automation-designer__state strong { display: block; }
.automation-designer__state span { color: var(--signal); font: 700 .65rem/1.2 var(--mono); letter-spacing: .08em; }
.automation-designer__state strong { margin-top: 7px; color: #fff; font: 700 .9rem/1.1 var(--display); }
.automation-designer__state.is-unsafe { border-color: var(--danger); }.automation-designer__state.is-unsafe span { color: #ffb5a3; }
.automation-designer__state.is-warning { border-color: #d39b38; }.automation-designer__state.is-warning span { color: #ffd889; }
.automation-scenario-bar { display: grid; grid-template-columns: minmax(240px, .72fr) 1fr; gap: 24px; align-items: end; padding: 22px clamp(22px, 4vw, 54px); border-bottom: 1px solid var(--line); background: #e4e0d3; }
.automation-scenario-bar label, .automation-designer__grid label { display: grid; gap: 7px; color: var(--muted); font: 700 .68rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.automation-scenario-bar p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }
.automation-designer select, .automation-designer input, .automation-designer textarea { width: 100%; border: 1px solid var(--line-dark); border-radius: 0; background: var(--paper-bright); color: var(--ink); font: 500 .88rem/1.45 var(--body); }
.automation-designer select, .automation-designer input { min-height: 42px; padding: 9px 11px; }
.automation-designer textarea { min-height: 90px; padding: 11px; resize: vertical; }
.automation-principle { display: grid; gap: 7px; padding: 22px clamp(22px, 4vw, 54px); border-bottom: 1px solid var(--line); background: #f0eee5; }
.automation-principle span, .automation-next-run span { color: var(--muted); font: 700 .65rem/1.2 var(--mono); letter-spacing: .08em; }
.automation-principle strong { font: 700 1.2rem/1.1 var(--display); text-transform: uppercase; }
.automation-principle p { max-width: 720px; margin: 0; color: var(--muted); font-size: .82rem; }
.automation-designer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; padding: 28px clamp(22px, 4vw, 54px); border-bottom: 1px solid var(--line); }
.automation-field--wide { grid-column: 1 / -1; }
.automation-safety-panel, .automation-dry-run, .automation-proposal, .automation-receipt { padding: 26px clamp(22px, 4vw, 54px); border-bottom: 1px solid var(--line); }
.automation-safety-panel { background: #ebe8dd; }
.automation-risk-line, .automation-status-line { display: grid; gap: 5px; margin: 18px 0 14px; padding: 12px 14px; border-left: 4px solid var(--signal-text); background: #e9edcf; }
.automation-risk-line.is-warning { border-color: #b87a23; background: #f4e6c8; }.automation-risk-line.is-unsafe, .automation-status-line.is-unsafe { border-color: var(--danger); background: #f3d8d0; }
.automation-risk-line span, .automation-status-line span { font: 700 .65rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }.automation-risk-line strong, .automation-status-line strong { font: 700 1.25rem/1 var(--display); text-transform: uppercase; }
.automation-warning-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.automation-warning { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line-dark); background: var(--paper-bright); }.automation-warning--blocker { border-left: 4px solid var(--danger); }.automation-warning--warning { border-left: 4px solid #b87a23; }.automation-warning--safe { border-left: 4px solid var(--signal-text); }
.automation-warning strong { font: 700 .76rem/1.1 var(--mono); text-transform: uppercase; }.automation-warning span, .automation-warning small { color: var(--muted); font-size: .8rem; line-height: 1.45; }.automation-warning small { color: var(--ink-soft); }
.automation-next-run { display: grid; gap: 5px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }.automation-next-run strong { font: 700 1.1rem/1.2 var(--display); overflow-wrap: anywhere; }
.automation-actions, .automation-exports { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px clamp(22px, 4vw, 54px); border-bottom: 1px solid var(--line); background: var(--paper-bright); }.automation-actions button, .automation-exports button { min-height: 42px; }
.automation-dry-run { background: #e4e0d3; }.automation-dry-run-card { border: 1px solid var(--line-dark); background: var(--paper-bright); }.automation-dry-run-card .automation-status-line { margin: 0; border-left: 0; border-bottom: 1px solid var(--line); }.automation-dry-run-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }.automation-dry-run-grid > div { min-width: 0; padding: 15px 16px; border-bottom: 1px solid var(--line); }.automation-dry-run-grid > div:nth-child(odd) { border-right: 1px solid var(--line); }.automation-dry-run-grid b, .automation-dry-run-warnings > b { display: block; margin-bottom: 7px; color: var(--muted); font: 700 .62rem/1.2 var(--mono); letter-spacing: .08em; }.automation-dry-run-grid p, .automation-dry-run-grid ul { margin: 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.5; }.automation-dry-run-grid ul { padding-left: 17px; }.automation-dry-run-warnings { padding: 16px; border-top: 3px solid var(--danger); }.automation-dry-run-warnings ul { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: .82rem; line-height: 1.5; }
.automation-empty-state { padding: 18px; border: 1px dashed var(--line-dark); background: #f6f4ed; }.automation-empty-state span { display: block; color: var(--muted); font: 700 .65rem/1.2 var(--mono); letter-spacing: .08em; }.automation-empty-state strong { display: block; margin: 7px 0; font: 700 1.25rem/1 var(--display); text-transform: uppercase; }.automation-empty-state p { max-width: 620px; margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.automation-proposal { background: #f0eee5; }.automation-proposal-card { display: grid; gap: 8px; padding: 18px; border: 1px solid var(--line-dark); border-left: 4px solid var(--signal-text); background: var(--paper-bright); }.automation-proposal-card strong { font: 700 1.3rem/1 var(--display); text-transform: uppercase; }.automation-proposal-card p { margin: 0; color: var(--ink-soft); line-height: 1.5; }.automation-proposal-card span { color: var(--muted); font: 700 .65rem/1.2 var(--mono); text-transform: uppercase; }
.automation-receipt { background: var(--ink); }.automation-receipt .automation-empty-state { background: #252620; border-color: #67695f; color: var(--paper-bright); }.automation-receipt-card { border: 1px solid #777970; background: var(--paper-bright); }.automation-receipt-card .kicker { padding: 16px 18px 0; }.automation-receipt-card h4 { margin: 4px 18px 14px; color: var(--ink); font: 700 clamp(1.8rem, 4vw, 3.2rem)/.9 var(--display); text-transform: uppercase; }.automation-receipt-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }.automation-receipt-card dl div { display: grid; grid-template-columns: 112px 1fr; gap: 10px; min-width: 0; padding: 11px 18px; border-top: 1px solid var(--line); }.automation-receipt-card dt { color: var(--muted); font: 700 .62rem/1.2 var(--mono); text-transform: uppercase; }.automation-receipt-card dd { min-width: 0; margin: 0; color: var(--ink-soft); font-size: .78rem; overflow-wrap: anywhere; }.automation-receipt-card__limit { margin: 0; padding: 14px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; }
.recorder-receipt--automation { margin-top: 18px; border-top: 3px solid var(--signal-text); }
@media (max-width: 820px) { .automation-designer__header { display: block; padding-inline: 17px; }.automation-designer__state { margin-top: 18px; }.automation-scenario-bar, .automation-designer__grid { grid-template-columns: 1fr; padding-inline: 17px; }.automation-field--wide { grid-column: auto; }.automation-principle, .automation-safety-panel, .automation-dry-run, .automation-proposal, .automation-receipt { padding-inline: 17px; }.automation-actions, .automation-exports { padding-inline: 17px; }.automation-actions button, .automation-exports button { width: 100%; }.automation-dry-run-grid { grid-template-columns: 1fr; }.automation-dry-run-grid > div:nth-child(odd) { border-right: 0; }.automation-receipt-card dl { grid-template-columns: 1fr; }.automation-receipt-card dl div { grid-template-columns: 100px 1fr; padding-inline: 14px; } }

/* Mission 23 — rendered behavior is a release artifact, not a port check. */
.browser-proof { margin-top: 30px; border-top: 1px solid var(--line-dark); background: var(--paper-bright); }
.browser-proof__header { display: flex; justify-content: space-between; gap: 24px; padding: 30px clamp(22px, 4vw, 54px); background: var(--ink); color: var(--paper-bright); }
.browser-proof__header h3 { margin: 2px 0 8px; font: 700 clamp(2.7rem, 6vw, 5rem)/.9 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
.browser-proof__header p:not(.kicker) { max-width: 650px; color: #c9c9bd; }
.browser-proof__header .kicker { color: var(--signal); }
.browser-proof__state { min-width: 190px; align-self: flex-start; padding: 12px; border-left: 3px solid var(--signal); background: #252620; text-transform: uppercase; }
.browser-proof__state strong, .browser-proof__state .browser-proof-status { display: block; }
.browser-proof__state strong { margin-top: 8px; color: #fff; font: 700 .8rem/1 var(--mono); }
.browser-proof__principle { display: flex; gap: 20px; padding: 17px clamp(22px, 4vw, 54px); border-bottom: 1px solid var(--line); background: #e4e0d3; }
.browser-proof__principle strong { color: var(--ink); }
.browser-proof__principle span { color: var(--ink-soft); }
.browser-proof__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; padding: 28px clamp(22px, 4vw, 54px); border-bottom: 1px solid var(--line); }
.browser-proof__grid label, .browser-proof-defect-form label, .browser-proof-inline-control, .browser-proof__session-notes label { display: grid; gap: 7px; color: var(--muted); font: 700 .66rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.browser-proof-wide { grid-column: 1 / -1; }
.browser-proof input, .browser-proof select, .browser-proof textarea { width: 100%; min-width: 0; border: 1px solid var(--line-dark); border-radius: 0; background: var(--paper-bright); color: var(--ink); font: 500 .86rem/1.45 var(--body); }
.browser-proof input, .browser-proof select { min-height: 42px; padding: 9px 11px; }
.browser-proof textarea { min-height: 96px; padding: 11px; resize: vertical; }
.browser-proof__profile, .browser-proof__matrix, .browser-proof__review-ledger, .browser-proof__evidence, .browser-proof__comparison, .browser-proof__defect-workbench, .browser-proof__session-notes, .browser-proof__receipt { padding: 25px clamp(22px, 4vw, 54px); border-bottom: 1px solid var(--line); }
.browser-proof__profile { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; background: #f0eee5; }
.browser-proof__profile strong { display: block; max-width: 500px; color: var(--ink-soft); line-height: 1.45; }
.browser-proof__profile ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 18px; margin: 0; padding-left: 18px; color: var(--ink-soft); }
.browser-proof__actions, .browser-proof__finish { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px clamp(22px, 4vw, 54px); border-bottom: 1px solid var(--line); }
.browser-proof__identity { padding: 20px clamp(22px, 4vw, 54px); background: #ebe8dd; }
.browser-proof-identity, .browser-proof-empty { min-width: 0; padding: 17px; border: 1px solid var(--line-dark); background: var(--paper-bright); }
.browser-proof-identity { border-left: 4px solid var(--signal-text); }
.browser-proof-identity--wrong-app, .browser-proof-identity--stale-build, .browser-proof-identity--hosted-different-commit, .browser-proof-identity--redirected-target { border-left-color: var(--danger); background: #f3d8d0; }
.browser-proof-identity--unreachable { border-left-color: #b87a23; background: #f4e6c8; }
.browser-proof-identity > span, .browser-proof-empty > span { display: block; color: var(--muted); font: 700 .64rem/1.2 var(--mono); letter-spacing: .08em; }
.browser-proof-identity > strong, .browser-proof-empty > strong { display: block; margin: 8px 0; font: 700 1.45rem/.95 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.browser-proof-identity p, .browser-proof-empty p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.browser-proof-identity dl, .browser-proof-receipt-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 16px 0 0; }
.browser-proof-identity dl div, .browser-proof-receipt-card dl div { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 9px; min-width: 0; padding: 10px 0; border-top: 1px solid var(--line); }
.browser-proof-identity dt, .browser-proof-receipt-card dt { color: var(--muted); font: 700 .6rem/1.2 var(--mono); text-transform: uppercase; }
.browser-proof-identity dd, .browser-proof-receipt-card dd { min-width: 0; margin: 0; color: var(--ink-soft); font-size: .78rem; overflow-wrap: anywhere; }
.browser-proof-status { display: inline-block; width: fit-content; padding: 5px 7px; border: 1px solid currentColor; color: var(--muted); font: 700 .61rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.browser-proof-status--pass, .browser-proof-status--verified { color: var(--signal-text); }
.browser-proof-status--fail, .browser-proof-status--failed, .browser-proof-status--wrong-app, .browser-proof-status--stale-build, .browser-proof-status--hosted-different-commit { color: var(--danger); }
.browser-proof-status--blocked, .browser-proof-status--unreachable, .browser-proof-status--verified-with-known-limitations { color: #b87a23; }
.browser-proof-step-list { border: 1px solid var(--line-dark); }
.browser-proof-step { display: grid; grid-template-columns: minmax(190px, .7fr) minmax(130px, .3fr) 1fr auto; gap: 12px; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--line); }
.browser-proof-step:last-child { border-bottom: 0; }
.browser-proof-step > div { display: grid; gap: 4px; min-width: 0; }
.browser-proof-step strong { color: var(--ink); font-size: .84rem; }
.browser-proof-step div span { color: var(--muted); font-size: .75rem; line-height: 1.4; }
.browser-proof-step input { min-height: 36px; }
.browser-proof-ledger-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 17px; border: 1px solid var(--line); background: var(--line); }
.browser-proof-ledger-grid span { display: grid; gap: 7px; min-height: 100px; padding: 13px; background: #f6f4ed; }
.browser-proof-ledger-grid b { color: var(--ink); font: 700 .65rem/1 var(--mono); }
.browser-proof-ledger-grid small { color: var(--muted); line-height: 1.4; }
.browser-proof-evidence-form, .browser-proof-defect-form, .browser-proof-retest-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; margin-top: 17px; }
.browser-proof-evidence-form input:first-child, .browser-proof-defect-form input:first-child { grid-column: span 2; }
.browser-proof-evidence-list { display: grid; gap: 7px; margin: 17px 0 0; padding: 0; list-style: none; }
.browser-proof-evidence-list li { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); background: #f6f4ed; }
.browser-proof-evidence-list span { overflow-wrap: anywhere; color: var(--ink-soft); font-size: .78rem; }
.browser-proof-evidence-list small { color: var(--muted); font: 700 .6rem/1 var(--mono); text-transform: uppercase; }
.browser-proof-comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 17px; border: 1px solid var(--line); background: var(--line); }
.browser-proof-comparison-grid div { display: grid; gap: 12px; min-height: 110px; padding: 17px; background: #f6f4ed; }
.browser-proof-comparison-grid span { color: var(--muted); font: 700 .65rem/1 var(--mono); }
.browser-proof-comparison-grid strong { overflow-wrap: anywhere; color: var(--ink-soft); }
.browser-proof__comparison > p { color: var(--muted); font-size: .78rem; }
.browser-proof-defect-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.browser-proof-defect-form textarea { min-height: 78px; }
.browser-proof-defect { margin-top: 17px; padding: 16px; border: 1px solid var(--line-dark); background: #f6f4ed; }
.browser-proof-defect__top { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 9px; }
.browser-proof-defect__top strong { overflow-wrap: anywhere; }
.browser-proof-defect__top span { color: var(--muted); font: 700 .62rem/1 var(--mono); text-transform: uppercase; }
.browser-proof-defect p { margin: 7px 0; color: var(--ink-soft); font-size: .8rem; line-height: 1.45; }
.browser-proof-inline-control { max-width: 220px; margin-top: 12px; }
.browser-proof-retests { display: grid; gap: 7px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); }
.browser-proof-retests span { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; color: var(--muted); font-size: .76rem; }
.browser-proof-retests small { color: var(--muted); font: 700 .6rem/1 var(--mono); text-transform: uppercase; }
.browser-proof__session-notes { background: #ebe8dd; }
.browser-proof__finish { padding: 20px 0 0; border-bottom: 0; }
.browser-proof-receipt-card { border: 1px solid var(--line-dark); background: #f4f1e8; }
.browser-proof-receipt-card .kicker { padding: 17px 18px 0; }
.browser-proof-receipt-card h4 { margin: 5px 18px 12px; font: 700 clamp(2rem, 4vw, 3.5rem)/.9 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.browser-proof-receipt-card dl { margin: 0; }
.browser-proof-receipt-card dl div { padding: 11px 18px; }
.recorder-receipt--browser-proof { margin-top: 18px; border-top: 3px solid var(--signal-text); }

@media (max-width: 820px) {
  .browser-proof__header { display: block; padding-inline: 17px; }
  .browser-proof__state { margin-top: 18px; }
  .browser-proof__principle { display: grid; padding-inline: 17px; }
  .browser-proof__grid, .browser-proof__profile { grid-template-columns: 1fr; padding-inline: 17px; }
  .browser-proof-wide { grid-column: auto; }
  .browser-proof__actions, .browser-proof__matrix, .browser-proof__review-ledger, .browser-proof__evidence, .browser-proof__comparison, .browser-proof__defect-workbench, .browser-proof__session-notes, .browser-proof__receipt, .browser-proof__identity { padding-inline: 17px; }
  .browser-proof__profile ul, .browser-proof-ledger-grid, .browser-proof-identity dl, .browser-proof-receipt-card dl, .browser-proof-comparison-grid { grid-template-columns: 1fr; }
  .browser-proof-step { grid-template-columns: 1fr; align-items: stretch; }
  .browser-proof-evidence-form, .browser-proof-defect-form, .browser-proof-retest-form { grid-template-columns: 1fr; }
  .browser-proof-evidence-form input:first-child, .browser-proof-defect-form input:first-child { grid-column: auto; }
  .browser-proof-evidence-list li { grid-template-columns: 1fr; gap: 7px; }
}

@media (max-width: 520px) {
  .brand__word small { display: none; }
  .topbar__title { max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar__eyebrow { font-size: 0.51rem; }
  .dev-status { padding-inline: 8px; font-size: 0.52rem; }
  .mission-canvas { padding-inline: 17px; }
  .mission-summary { font-size: 0.95rem; }
  .mission-outcome { grid-template-columns: 1fr; gap: 8px; }
  .prompt-panel pre { min-height: 200px; padding: 17px; font-size: 0.7rem; }
  .prompt-panel__actions { display: block; }
  .copy-prompt { width: 100%; }
  .page-intro, .about-hero { padding-inline: 18px; }
  .page-intro h2, .about-hero h2 { font-size: clamp(2.6rem, 13vw, 4.2rem); }
  .surface-row { grid-template-columns: 36px 1fr; gap: 12px; padding: 19px 18px; }
  .surface-row p, .surface-row code { grid-column: 2; }
  .field-note { grid-template-columns: 1fr; padding-inline: 18px; }
  .codex-moves { padding-inline: 18px; }
  .move-list > div { grid-template-columns: 108px 1fr; gap: 12px; }
  .about-sequence { grid-template-columns: 1fr; }
  .about-sequence div { min-height: 190px; border-right: 0; border-bottom: 1px solid var(--line); }
  .about-sequence div:nth-child(3) { border-bottom: 1px solid var(--line); }
  .about-sequence div:last-child { border-bottom: 0; }
  .about-sequence strong { margin-bottom: 38px; }
  .route-options { grid-template-columns: 1fr; }
  .wizard-actions { align-items: stretch; flex-direction: column; }
  .wizard-actions .primary-action { width: 100%; }
  .shortcuts-dialog { padding: 22px; }
  .shortcuts-dialog dl div { grid-template-columns: 84px 1fr; }
  .toast { right: 12px; bottom: 12px; left: 12px; max-width: none; }
  .cody-helper { right: 8px; bottom: 8px; }
  .cody-helper.is-tucked {
    right: -12px;
    grid-template-columns: 48px;
    width: 56px;
    padding: 3px;
    opacity: .74;
  }
  .cody-helper.is-tucked:focus-within { right: 8px; opacity: 1; }
  .cody-helper.is-tucked .cody-helper__sprite { width: 48px; height: 54px; }
  .expansion-marker { display: none; }
  .clinic-header, .clinic-controls, .clinic-context, .clinic-evidence, .clinic-prompt-panel { padding-inline: 17px; }
  .clinic-header h3 { font-size: clamp(2.5rem, 16vw, 4rem); }
  .clinic-prompt-panel pre, .clinic-prompt-panel textarea { min-height: 210px; font-size: 0.64rem; }
  .recorder-toolbar { grid-template-columns: 1fr; }
  .recorder-event__body { padding-left: 12px; }
}

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

@media print {
  .side-rail, .topbar, dialog, .toast { display: none !important; }
  .workspace { margin: 0; }
  .mission-stage { display: block; }
  .mission-canvas { border: 0; }
}

/* Mission 22 — release desk: plan first, then keep version/deployment states distinct. */
.sites-planner { margin-top: 30px; border-top: 1px solid var(--line-dark); background: var(--paper-bright); }
.sites-planner__header { display: flex; justify-content: space-between; gap: 24px; padding: 30px clamp(22px, 4vw, 54px); border-bottom: 1px solid var(--line); background: var(--ink); color: var(--paper-bright); }
.sites-planner__header h3 { margin: 2px 0 8px; font-family: var(--display); font-size: clamp(2.5rem, 6vw, 5rem); line-height: .9; text-transform: uppercase; letter-spacing: -.04em; }
.sites-planner__header p:not(.kicker) { max-width: 560px; color: #c9c9bd; }
.sites-planner__header .kicker { color: var(--signal); }
.sites-planner__state { min-width: 170px; align-self: flex-start; padding: 12px; border-left: 3px solid var(--signal); background: #252620; text-transform: uppercase; }
.sites-planner__state span, .sites-planner__state strong { display: block; }
.sites-planner__state span { color: var(--signal); font: 700 .65rem/1.2 var(--mono); letter-spacing: .08em; }
.sites-planner__state strong { margin-top: 7px; color: #fff; font: 700 .9rem/1.1 var(--display); }
.sites-scenario-bar { display: grid; grid-template-columns: minmax(220px, .7fr) 1fr; gap: 24px; align-items: end; padding: 22px clamp(22px, 4vw, 54px); border-bottom: 1px solid var(--line); background: #e4e0d3; }
.sites-scenario-bar label, .sites-planner__grid label, .sites-release-actions label { display: grid; gap: 7px; color: var(--muted); font: 700 .68rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.sites-scenario-bar p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }
.sites-planner select, .sites-planner input, .sites-planner textarea { width: 100%; border: 1px solid var(--line-dark); border-radius: 0; background: var(--paper-bright); color: var(--ink); font: 500 .88rem/1.45 var(--body); }
.sites-planner select, .sites-planner input { min-height: 42px; padding: 9px 11px; }
.sites-planner textarea { min-height: 102px; padding: 11px; resize: vertical; }
.sites-planner__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; padding: 28px clamp(22px, 4vw, 54px); border-bottom: 1px solid var(--line); }
.sites-wide-field { grid-column: 1 / -1; }
.sites-check-field { display: flex !important; align-items: center; gap: 10px !important; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); background: #f0eee5; color: var(--ink-soft) !important; }
.sites-check-field input { width: 18px; min-height: 18px; accent-color: var(--signal-text); }
.sites-recommendation, .sites-preflight, .sites-release-desk { padding: 26px clamp(22px, 4vw, 54px); border-bottom: 1px solid var(--line); }
.sites-recommendation__status { display: grid; gap: 5px; margin: 18px 0 10px; border-left: 4px solid var(--signal-text); padding: 10px 14px; background: #e9edcf; }
.sites-recommendation__status.warning { border-color: #b87a23; background: #f4e6c8; }
.sites-recommendation__status.blocked { border-color: var(--danger); background: #f3d8d0; }
.sites-recommendation__status span { font: 700 .66rem/1 var(--mono); letter-spacing: .09em; }
.sites-recommendation__status strong { min-width: 0; font: 700 1.25rem/1 var(--display); overflow-wrap: anywhere; text-transform: uppercase; }
.sites-recommendation p { max-width: 760px; margin: 0 0 10px; color: var(--ink-soft); }
.sites-recommendation ul { display: grid; gap: 7px; margin: 0; padding-left: 18px; color: var(--ink-soft); }
.sites-preflight { background: #ebe8dd; }
.sites-preflight .primary-action { margin: 8px 0 20px; }
.sites-preflight-summary { min-width: 0; border: 1px solid var(--line-dark); background: var(--paper-bright); }
.sites-preflight-summary > p { margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.sites-preflight-summary > .sites-recommendation__status { min-width: 0; margin: 0; border-left: 0; border-bottom: 1px solid var(--line); }
.sites-preflight-summary ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.sites-check { display: grid; grid-template-columns: minmax(170px, .45fr) 1fr; gap: 18px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.sites-check:last-child { border-bottom: 0; }
.sites-check > div { display: grid; gap: 4px; }
.sites-check b { color: var(--ink); font-size: .85rem; }
.sites-check span, .sites-check small { color: var(--muted); font-size: .76rem; line-height: 1.45; }
.sites-check small { color: var(--ink-soft); }
.sites-check--pass b::before, .sites-check--warning b::before, .sites-check--blocker b::before { display: inline-block; width: 17px; margin-right: 5px; font-family: var(--mono); }
.sites-check--pass b::before { content: "✓"; color: var(--signal-text); }
.sites-check--warning b::before { content: "!"; color: #b87a23; }
.sites-check--blocker b::before { content: "×"; color: var(--danger); }
.sites-empty-state { padding: 18px; border: 1px dashed var(--line-dark); background: #f6f4ed; }
.sites-empty-state span { display: block; color: var(--muted); font: 700 .65rem/1.2 var(--mono); letter-spacing: .08em; }
.sites-empty-state strong { display: block; margin: 7px 0; font: 700 1.25rem/1 var(--display); text-transform: uppercase; }
.sites-empty-state p { max-width: 560px; margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.sites-release-desk { background: var(--paper-bright); }
.sites-release-actions { display: grid; grid-template-columns: auto auto 1fr; gap: 14px; align-items: end; margin: 18px 0 12px; }
.sites-release-actions label { min-width: 180px; }
.sites-release-actions .primary-action, .sites-release-actions .secondary-action { min-height: 42px; }
.sites-receipt-card { margin-top: 18px; border: 1px solid var(--line-dark); background: #f4f1e8; }
.sites-receipt-card .kicker { padding: 16px 18px 0; }
.sites-receipt-card h4 { margin: 4px 18px 12px; font: 700 clamp(1.8rem, 4vw, 3.2rem)/.9 var(--display); text-transform: uppercase; }
.sites-receipt-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.sites-receipt-card dl div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 11px 18px; border-top: 1px solid var(--line); }
.sites-receipt-card dt { color: var(--muted); font: 700 .62rem/1.2 var(--mono); text-transform: uppercase; }
.sites-receipt-card dd { min-width: 0; margin: 0; color: var(--ink-soft); font-size: .78rem; overflow-wrap: anywhere; }
.sites-receipt-card a { color: var(--ink); }
.recorder-receipt--sites { margin-top: 18px; border-top: 3px solid var(--signal-text); }

@media (max-width: 820px) {
  .sites-planner__header { display: block; padding-inline: 17px; }
  .sites-planner__state { margin-top: 18px; }
  .sites-scenario-bar, .sites-planner__grid { grid-template-columns: 1fr; padding-inline: 17px; }
  .sites-wide-field { grid-column: auto; }
  .sites-recommendation, .sites-preflight, .sites-release-desk { padding-inline: 17px; }
  .sites-check { grid-template-columns: 1fr; gap: 8px; }
  .sites-release-actions { grid-template-columns: 1fr; align-items: stretch; }
  .sites-release-actions label { min-width: 0; }
  .sites-receipt-card dl { grid-template-columns: 1fr; }
  .sites-receipt-card dl div { grid-template-columns: 105px 1fr; padding-inline: 14px; }
}

/* Build Week light surfaces use explicit foregrounds because the core theme's
   --ink token is intentionally light-on-dark. Keep evidence and warning copy
   readable when those components switch to paper-colored panels. */
.packaging-lab__header,
.final-flight__header,
.automation-designer__header,
.browser-proof__header,
.sites-planner__header {
  background: var(--paper);
  color: var(--ink);
}

.judge-dialog__chrome button {
  border-color: #777970;
  color: #171814;
}

.judge-progress button {
  border-color: #aaa89f;
  color: #5e6058;
}

.judge-progress button.is-active {
  border-color: #171814;
  color: var(--signal-ink);
}

.judge-progress button.is-done { color: #171814; }

.judge-opening,
.judge-signal-row,
.judge-demo-card--warning,
.packaging-decision,
.packaging-anatomy,
.packaging-safety,
.packaging-warning,
.packaging-pass,
.final-flight-boundary,
.automation-scenario-bar,
.automation-principle,
.automation-safety-panel,
.automation-risk-line,
.automation-status-line,
.automation-empty-state,
.browser-proof__principle,
.browser-proof__profile,
.browser-proof-ledger-grid span,
.browser-proof-evidence-list li,
.browser-proof-comparison-grid div,
.browser-proof-defect,
.browser-proof-identity--wrong-app,
.browser-proof-identity--stale-build,
.browser-proof-identity--hosted-different-commit,
.browser-proof-identity--redirected-target,
.browser-proof-identity--unreachable,
.browser-proof-receipt-card,
.sites-scenario-bar,
.sites-check-field,
.sites-recommendation__status,
.sites-preflight,
.sites-empty-state,
.sites-receipt-card {
  color: #171814;
}

.judge-opening > span,
.judge-opening p,
.judge-signal-row small,
.judge-demo-card--warning p,
.judge-demo-card--warning dt,
.judge-demo-card--warning dd,
.packaging-decision span,
.packaging-decision p,
.packaging-decision small,
.packaging-anatomy .kicker,
.packaging-anatomy p,
.packaging-safety__title span,
.packaging-warning span,
.packaging-warning small,
.packaging-pass span,
.final-flight-boundary,
.automation-scenario-bar label,
.automation-scenario-bar p,
.automation-principle span,
.automation-principle p,
.automation-risk-line span,
.automation-status-line span,
.automation-empty-state span,
.automation-empty-state p,
.browser-proof__principle span,
.browser-proof__profile strong,
.browser-proof__profile ul,
.browser-proof-ledger-grid small,
.browser-proof-evidence-list span,
.browser-proof-evidence-list small,
.browser-proof-comparison-grid span,
.browser-proof-comparison-grid strong,
.browser-proof-defect__top span,
.browser-proof-defect p,
.browser-proof-identity--wrong-app > span,
.browser-proof-identity--wrong-app p,
.browser-proof-identity--wrong-app dt,
.browser-proof-identity--wrong-app dd,
.browser-proof-identity--stale-build > span,
.browser-proof-identity--stale-build p,
.browser-proof-identity--stale-build dt,
.browser-proof-identity--stale-build dd,
.browser-proof-identity--hosted-different-commit > span,
.browser-proof-identity--hosted-different-commit p,
.browser-proof-identity--hosted-different-commit dt,
.browser-proof-identity--hosted-different-commit dd,
.browser-proof-identity--redirected-target > span,
.browser-proof-identity--redirected-target p,
.browser-proof-identity--redirected-target dt,
.browser-proof-identity--redirected-target dd,
.browser-proof-identity--unreachable > span,
.browser-proof-identity--unreachable p,
.browser-proof-identity--unreachable dt,
.browser-proof-identity--unreachable dd,
.browser-proof-receipt-card .kicker,
.browser-proof-receipt-card dt,
.browser-proof-receipt-card dd,
.sites-scenario-bar label,
.sites-scenario-bar p,
.sites-check-field,
.sites-recommendation p,
.sites-recommendation ul,
.sites-empty-state span,
.sites-empty-state p,
.sites-receipt-card .kicker,
.sites-receipt-card dt,
.sites-receipt-card dd {
  color: #55574f;
}

.browser-proof-ledger-grid b,
.browser-proof-receipt-card h4,
.sites-receipt-card h4,
.sites-receipt-card a {
  color: #171814;
}

/* Receipts live inside the mission column, beside the proof rail. A single
   column keeps hashes and provenance readable instead of wrapping one
   character per line at common laptop widths. */
.sites-receipt-card dl,
.browser-proof-receipt-card dl,
.packaging-receipt-card dl,
.automation-receipt-card dl,
.final-credential dl {
  grid-template-columns: 1fr;
}

.packaging-empty,
.final-empty,
.automation-receipt .automation-empty-state {
  color: var(--ink);
}