@import "./variables.css";

:root {
  color-scheme: dark;
  --midnight-canvas: var(--color-bkg);
  --deep-surface: var(--color-carbon);
  --indigo-surface: var(--color-carbon);
  --cobalt-surface: var(--color-graphite);
  --paper-white: var(--color-text);
  --fog: var(--color-labels);
  --mist: var(--color-ash);
  --steel-border: var(--color-input-border);
  --signal-blue: var(--color-primary-cta);
  --tag-coral: var(--color-controls);
  --tag-lime: var(--color-engine-hydra);
  --paper: var(--color-bkg);
  --ink: var(--color-text);
  --mute: var(--color-labels);
  --line: var(--color-input-border);
  --signal: var(--color-primary-cta);
  --field: var(--color-bkg);
  --stage: var(--color-bkg);
  --ok: var(--color-engine-hydra);
  --hit: var(--color-controls);
  --panel: var(--color-carbon);
  --line-dark: var(--color-slate);
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  /* Spatial rhythm: paired controls stay close; stage changes get air. */
  --space-tight: 8px;
  --space-control: 12px;
  --space-group: 16px;
  --space-section: 24px;
  --space-stage: 48px;
  --space-canvas: 64px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--color-bkg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
}

h1 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(var(--text-heading), 8vw, var(--text-heading-lg));
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  line-height: var(--leading-heading);
  text-transform: uppercase;
  color: var(--color-primary-cta);
  letter-spacing: var(--tracking-heading);
}

.page { min-height: 100vh; }

.focus, .gallery {
  max-width: 720px;
  padding: 40px 24px 80px;
}

.studio {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lede { margin: 0 0 var(--spacing-20); line-height: var(--leading-body-sm); max-width: 54ch; font-size: var(--text-body-sm); color: var(--color-text); }
.lede code { font-size: 0.92em; }

.form { display: flex; flex-direction: column; gap: 18px; }

label, legend {
  display: block;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-labels);
}

textarea, select, input[type="text"] {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  border-radius: var(--radius-inputs);
  resize: vertical;
}

#guardrails {
  min-height: 44px;
  max-width: 75ch;
}

select { appearance: none; border-radius: 0; }

fieldset { border: 0; padding: 0; margin: 0; }
.pack { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }

button {
  font: inherit;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--line);
  padding: 10px 12px;
  cursor: pointer;
  border-radius: var(--radius-buttons);
}

button:hover { background: var(--surface-carbon); }
button.on { background: var(--color-primary-cta); color: var(--color-bkg); }
button.primary { background: var(--color-primary-cta); color: var(--color-bkg); border-color: var(--color-primary-cta); }
button:disabled { opacity: 0.45; cursor: wait; }

.field label { margin-bottom: 0; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.file-hit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--field);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  border-radius: var(--radius-inputs);
}
.file-hit:hover { background: var(--surface-void); }
.file-action { color: var(--mute); }
#skill-file:focus-visible + .file-hit {
  outline: 2px solid var(--color-secondary-cta-outline);
  outline-offset: 2px;
}
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-secondary-cta-outline);
  outline-offset: 2px;
}
.hint { margin: 8px 0; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--mute); line-height: 1.5; }
.media-list { margin: 10px 0 0; padding-left: 18px; }
.media-list li { margin: 0 0 6px; font-size: 13px; text-transform: none; letter-spacing: 0; }
.file input { margin-top: 8px; }
.actions { display: flex; gap: 8px; }
.share { margin: 16px 0 0; display: flex; gap: 16px; }
.share a { color: var(--ink); }

.log {
  margin-top: 28px;
  border: 1px solid var(--line);
  background: var(--field);
  padding: 12px;
  max-height: 240px;
  overflow: auto;
}
.log p { margin: 0 0 8px; white-space: pre-wrap; }

.cards { display: flex; flex-direction: column; gap: 12px; }
.card {
  border: 1px solid var(--line);
  background: var(--field);
  padding: 16px;
}
.card h2 { margin: 0 0 8px; font-size: 16px; font-family: inherit; text-transform: none; }
.mute { color: var(--mute); }
.empty { color: var(--mute); }

.instrument { position: relative; background: var(--stage); min-height: 100vh; }
.renderer-unavailable .instrument { background: radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--color-primary-cta) 16%, transparent), transparent 32%), var(--color-bkg); }
.renderer-unavailable #stage { display: none; }
#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--midnight-canvas);
}

.boil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  perspective: 900px;
  overflow: hidden;
}
.boil span {
  position: absolute;
  left: 0;
  top: 0;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(4.5rem, 13vw, 11rem);
  line-height: 0.8;
  color: var(--color-text);
  transform-style: preserve-3d;
}
.boil span[data-kind="color"] { color: var(--color-primary-cta); }
.boil span[data-kind="noise"] { color: var(--color-text); }

.chrome {
  position: fixed;
  z-index: 2;
  background: var(--panel);
  border: 1px solid var(--line-dark);
  color: var(--paper-white);
}

.top {
  top: 12px;
  left: 12px;
  right: 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 8px 12px;
}

.mark {
  margin: 0;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 22px;
  color: var(--ok);
  letter-spacing: 0;
}

.meta, #status, .lbl { margin: 0; color: var(--mist); text-transform: lowercase; }
#status.err { color: var(--hit); }

.rail {
  top: 58px;
  left: 12px;
  width: 168px;
  padding: 10px;
  bottom: 168px;
  overflow: auto;
}

.editor {
  top: 58px;
  right: 12px;
  width: min(360px, 38vw);
  bottom: 168px;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.ed-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

#code {
  flex: 1;
  width: 100%;
  resize: none;
  background: var(--midnight-canvas);
  color: var(--paper-white);
  border: 1px solid var(--steel-border);
  padding: 10px;
  font: inherit;
  line-height: 1.45;
}

.keys-wrap {
  position: fixed;
  z-index: 2;
  left: 12px;
  right: 12px;
  bottom: 16px;
  padding: 0;
  background: transparent;
  border: 0;
}
.keys { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 8px; font-family: var(--font-mono); }
.keys button { text-align: center; padding: 10px 4px; color: var(--color-text); background: var(--color-carbon); border-color: var(--color-input-border); }
.keys em { display: block; font-style: normal; color: var(--mist); font-size: 11px; }
button.hit { background: var(--tag-coral); color: var(--paper-white); border-color: var(--tag-coral); }

.stack { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 16px; }
.stack button { width: 100%; color: var(--paper-white); background: var(--deep-surface); border-color: var(--steel-border); }
.stack button.on { background: var(--tag-lime); color: var(--midnight-canvas); border-color: var(--tag-lime); }

.read { margin: 8px 0 0; }
.read div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line-dark); padding: 4px 0; }
dt { color: var(--mist); font-weight: 400; }
dd { margin: 0; }

.piece-bar {
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
}
.piece-bar p { margin: 0; flex: 1; min-width: 160px; color: var(--paper-white); }

.report {
  display: none;
  position: fixed;
  z-index: 3;
  right: 12px;
  top: 58px;
  width: min(420px, 90vw);
  max-height: 50vh;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line-dark);
  color: var(--paper-white);
  padding: 12px;
}
.report.open { display: block; }
.report pre { margin: 0; white-space: pre-wrap; font: inherit; font-size: 12px; }

.ghost { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

html.stage-only .top,
html.stage-only .rail,
html.stage-only .editor,
html.stage-only .piece-bar,
html.stage-only .report,
html.stage-only .keys-wrap .lbl { display: none; }

.live {
  position: fixed;
  z-index: 4;
  left: var(--spacing-16);
  right: auto;
  bottom: 88px;
  width: min(440px, calc(100vw - 32px));
  background: var(--color-bkg);
  border: 0;
  padding: var(--spacing-12);
}
.live[hidden] { display: none; }
.live-status {
  margin: 0 0 var(--spacing-8);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-engine-hydra);
}
.live-status.err { color: var(--color-controls); }
#live #code {
  display: block;
  width: 100%;
  min-height: 220px;
  margin: 0;
  padding: var(--spacing-12);
  border: 1px solid var(--color-input-border);
  background: var(--color-bkg);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.45;
  resize: vertical;
  caret-color: var(--color-primary-cta);
}


.veil {
  position: fixed;
  inset: 0;
  z-index: 5;
  background: rgb(0 0 0 / 30%);
}
.veil[hidden] { display: none; }

.modal {
  position: fixed;
  z-index: 6;
  inset: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  overflow: visible;
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  color: var(--color-text);
  padding: 0;
  border-radius: 0;
}
.modal h1 {
  position: absolute;
  z-index: 4;
  left: 28px;
  right: 28px;
  bottom: 10px;
  margin: 0;
  max-width: none;
  font-size: clamp(4.75rem, 14vw, 13rem);
  font-weight: var(--font-weight-bold);
  line-height: 0.84;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-text);
  filter: blur(9px);
  pointer-events: none;
}
.ask {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 9vh 7vw 30vh;
  background: var(--plate);
  color: var(--color-text);
}
.ask[hidden] { display: none; }
.ask.is-behind {
  z-index: 1;
  filter: blur(18px);
  pointer-events: none;
}
.ask-q {
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  font-weight: var(--font-weight-bold);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--color-text);
}
.ask textarea {
  width: min(36rem, 100%);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.35;
  resize: none;
}
.ask textarea::placeholder { color: var(--color-labels); }
.skill-set, .file-set {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.skill-pick, .file-pick {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 32%, transparent);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-align: left;
  cursor: pointer;
}
.skill-pick.on, .file-pick.on { color: var(--color-text); }
.skill-pick.tailwind {
  margin: 8px 0;
  padding: 0 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  line-height: 1;
  min-height: 44px;
}
.skill-pick.tailwind.on {
  background: var(--color-text);
  color: var(--color-bkg);
}
.ask .advance {
  margin-top: auto;
  width: min(100%, 42rem);
  min-height: 72px;
  padding: 0 22px;
  border: 0;
  border-radius: 0;
  background: var(--color-primary-cta);
  color: var(--color-bkg);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  letter-spacing: -0.02em;
  text-align: left;
  cursor: pointer;
}
.ask .advance:hover { background: color-mix(in srgb, var(--color-primary-cta) 82%, white); }
.ask .advance:disabled { opacity: 0.45; cursor: wait; }
.ask .hint { max-width: 42rem; }
.ask .log { width: min(100%, 42rem); background: var(--plate); }
@media (prefers-reduced-motion: reduce) {
  .modal h1, .ask.is-behind { filter: none; }
}
.modal:not([open]) { display: none; }
.modal textarea,
.modal select,
.modal .file-hit,
.modal button:not(.primary) {
  background: var(--color-bkg);
  border-color: var(--color-input-border);
}

@media (max-width: 860px) {
  .rail { display: none; }
  .editor {
    top: auto;
    bottom: 168px;
    left: 12px;
    right: 12px;
    width: auto;
    height: 140px;
  }
  .top { grid-template-columns: auto 1fr; }
  .meta { display: none; }
}

/* Focus brief — the instrument begins with one complete, editable brief. */
.modal {
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 32px 20px;
}
.modal h1 {
  position: static;
  margin: 0;
  max-width: none;
  color: var(--color-primary-cta);
  filter: none;
  font-size: clamp(3.4rem, 5.2vw, 5rem);
  line-height: .92;
  letter-spacing: -.06em;
  pointer-events: auto;
}
.focus-card {
  width: min(640px, 100%);
  padding: 36px 28px 28px;
  border-radius: 15px;
  background: #1d0e09;
  box-shadow: 0 24px 70px rgb(0 0 0 / 45%);
}
.focus-lede { margin: 22px 0 28px; color: var(--color-text); font-size: 16px; line-height: 1.45; }
.focus-label { margin: 20px 0 8px; color: var(--color-labels); font-size: 14px; font-weight: var(--font-weight-bold); }
.focus-help { margin: 0 0 8px; color: var(--color-labels); font-size: 13px; line-height: 1.45; }
.modal .file-hit {
  min-height: 58px;
  margin: 0;
  padding: 12px 14px;
  border-color: var(--color-secondary-cta-outline);
  border-radius: 8px;
  background: #1d0e09;
  color: var(--color-text);
}
.modal .file-hit:hover { background: #29140e; }
.modal .file-action { color: var(--color-labels); font-weight: var(--font-weight-bold); }
.modal textarea,
.modal input[type="text"] {
  margin: 0;
  padding: 13px 14px;
  border-color: var(--color-input-border);
  border-radius: 5px;
  background: #1d0e09;
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.48;
}
.modal #guardrails { min-height: 190px; }
.modal #output { min-height: 58px; font-weight: var(--font-weight-bold); }
.modal .primary {
  min-height: 52px;
  margin-top: 20px;
  padding: 0 15px;
  border: 0;
  border-radius: 6px;
  background: var(--color-primary-cta);
  color: var(--color-bkg);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
}
.modal .primary:hover { background: color-mix(in srgb, var(--color-primary-cta) 86%, white); }
.modal .log { width: 100%; margin-top: 18px; background: #1d0e09; }

@media (max-width: 640px) {
  .modal { place-items: start center; padding: 16px; }
  .focus-card { padding: 28px 20px 20px; border-radius: 10px; }
  .focus-lede { margin: 18px 0 22px; }
  .focus-label { margin-top: 17px; }
  .modal #guardrails { min-height: 165px; }
}

@media (max-height: 800px) and (min-width: 641px) {
  .modal { padding: 18px 20px; }
  .focus-card { padding: 25px 28px 22px; }
  .modal h1 { font-size: clamp(3rem, 4.6vw, 4rem); }
  .focus-lede { margin: 14px 0 18px; }
  .focus-label { margin-top: 14px; }
  .modal .file-hit, .modal #output { min-height: 50px; }
  .modal #guardrails { min-height: 142px; }
  .modal .primary { min-height: 46px; margin-top: 14px; }
}

/* Signal Instrument — a one-page brief built into the stage. */
.modal { isolation: isolate; }
.canvas-title {
  position: fixed;
  z-index: -1;
  right: 4vw;
  bottom: 8vh;
  margin: 0;
  color: color-mix(in srgb, var(--color-primary-cta) 30%, transparent);
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 16vw, 17rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -.075em;
  line-height: .76;
  text-align: right;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}
.focus-card.signal-board {
  width: min(1000px, calc(100vw - 48px));
  max-height: calc(100vh - 52px);
  overflow: auto;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-input-border) 60%, transparent);
  border-radius: 12px;
  background: rgb(29 14 9 / 94%);
  box-shadow: 0 24px 70px rgb(0 0 0 / 48%);
}
.signal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-input-border) 35%, transparent);
  color: var(--color-labels);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.signal-header p { margin: 0; }
.signal-kicker { color: var(--color-primary-cta); }
.signal-kicker span { font-size: 10px; vertical-align: 1px; }
.close-focus { min-height: 32px; padding: 0 9px; border: 1px solid color-mix(in srgb, var(--color-input-border) 58%, transparent); border-radius: 3px; background: transparent; color: var(--color-labels); font-family: var(--font-mono); font-size: 10px; }
.close-focus:hover, .close-focus:focus-visible { color: var(--color-primary-cta); border-color: var(--color-primary-cta); }
.signal-intent { padding: 26px 20px 24px; border-bottom: 1px solid color-mix(in srgb, var(--color-input-border) 35%, transparent); }
.focus-card .focus-label { display: block; margin: 0 0 8px; color: var(--color-labels); font-size: 11px; font-weight: var(--font-weight-bold); letter-spacing: .09em; text-transform: uppercase; }
.focus-label span { display: inline-block; min-width: 27px; color: var(--color-primary-cta); }
.signal-intent textarea {
  min-height: 65px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 4.2rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -.055em;
  line-height: .96;
  resize: none;
}
.signal-intent textarea::placeholder { color: var(--color-labels); }
.signal-grid { display: grid; grid-template-columns: 1fr 1fr; }
.station { min-width: 0; padding: 20px; border-bottom: 1px solid color-mix(in srgb, var(--color-input-border) 35%, transparent); }
.station:nth-child(odd) { border-right: 1px solid color-mix(in srgb, var(--color-input-border) 35%, transparent); }
.focus-card .focus-help { margin: 0 0 11px; color: var(--color-labels); font-size: 12px; line-height: 1.45; }
.focus-card .file-hit { min-height: 52px; padding: 11px 12px; border-color: var(--color-secondary-cta-outline); border-radius: 5px; background: rgb(29 14 9 / 70%); }
.focus-card .file-action { color: var(--color-primary-cta); font-size: 12px; }
.focus-card .skill-drop-zone { transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.focus-card .skill-drop-zone.is-dragging { border-color: var(--color-primary-cta); background: color-mix(in srgb, var(--color-primary-cta) 13%, rgb(29 14 9 / 82%)); box-shadow: inset 0 0 0 1px var(--color-primary-cta), 0 0 0 5px color-mix(in srgb, var(--color-primary-cta) 13%, transparent); }
.focus-card .skill-drop-zone.is-dragging .file-action { color: var(--color-text); }
.focus-card #guardrails { min-height: 142px; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 14px; cursor: default; }
.focus-card #guardrails[readonly] { color: color-mix(in srgb, var(--color-text) 88%, var(--color-labels)); }
.focus-card .guardrail-station.is-editing #guardrails { padding: 10px; border: 1px solid var(--color-secondary-cta-outline); border-radius: 4px; background: rgb(29 14 9 / 72%); cursor: text; }
.focus-card .guardrail-station.is-editing .station-next { color: var(--color-primary-cta); }
.output-picks { display: flex; flex-wrap: wrap; gap: 7px; }
.output-picks label { position: relative; }
.output-picks input { position: absolute; opacity: 0; }
.output-picks span { display: block; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--color-input-border) 50%, transparent); border-radius: 3px; color: var(--color-labels); font-family: var(--font-mono); font-size: 11px; cursor: pointer; }
.output-picks input:checked + span { border-color: var(--color-primary-cta); background: var(--color-primary-cta); color: var(--color-bkg); }
.output-picks input:focus-visible + span, .destination-picks input:focus-visible + span { outline: 2px solid var(--color-secondary-cta-outline); outline-offset: 3px; }
.destination-picks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.destination-picks label { position: relative; }
.destination-picks input { position: absolute; opacity: 0; }
.destination-picks input:disabled + span { cursor: not-allowed; opacity: .42; }
.destination-picks span { display: flex; min-height: 73px; flex-direction: column; justify-content: space-between; padding: 10px; border: 1px solid color-mix(in srgb, var(--color-input-border) 48%, transparent); border-radius: 3px; color: var(--color-labels); cursor: pointer; }
.destination-picks b { color: var(--color-text); font-size: 12px; font-weight: var(--font-weight-bold); }
.destination-picks small { color: var(--color-labels); font-size: 10px; line-height: 1.2; }
.destination-picks input:checked + span { border-color: var(--color-primary-cta); background: color-mix(in srgb, var(--color-primary-cta) 10%, transparent); }
.destination-picks input:checked + span b { color: var(--color-primary-cta); }
.signal-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; }
.signal-footer p { max-width: 50ch; margin: 0; color: var(--color-labels); font-size: 12px; line-height: 1.4; }
.route-copy { display: grid; gap: 5px; }
.signal-footer .route-status { color: var(--color-primary-cta); font-family: var(--font-mono); font-size: 10px; line-height: 1.35; }
.focus-card .primary { flex: none; min-height: 48px; margin: 0; border-radius: 4px; font-size: 13px; }
.focus-card .primary span { margin-left: 15px; font-size: 17px; }
.focus-card .log { width: auto; margin: 0 20px 20px; background: rgb(0 0 0 / 18%); }
.focus-card .log[hidden], .run-receipt[hidden] { display: none; }
.run-receipt { display: grid; gap: 7px; margin: 0 20px 20px; padding: 13px; border: 1px solid color-mix(in srgb, var(--color-primary-cta) 54%, transparent); background: rgb(29 14 9 / 88%); color: var(--color-text); }
.run-receipt p { margin: 0; font-size: 12px; line-height: 1.4; }
.run-receipt strong { color: var(--color-primary-cta); font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.run-receipt a { color: var(--color-primary-cta); font-family: var(--font-mono); font-size: 11px; }
.station.is-confirmed { border-color: color-mix(in srgb, var(--color-primary-cta) 70%, var(--color-input-border)); }
.station.is-confirmed .station-next { color: var(--color-primary-cta); }
.skill-meta { margin: 9px 0 0; color: var(--color-primary-cta); font-family: var(--font-mono); font-size: 10px; line-height: 1.3; }
.key-hint { display: none; }

.bleed-mode .keys-wrap { display: none; }
.bleed-mode .signal-intent textarea,
.bleed-mode .focus-card #guardrails { cursor: text; }
.bleed-mode .focus-card #guardrails:hover,
.bleed-mode .focus-card #guardrails:focus {
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--color-primary-cta) 64%, transparent);
  border-radius: 3px;
  background: rgb(0 0 0 / 12%);
}

/* Export becomes a route list once there is not room for two readable cards.
   This prevents a wrapped destination label from running into the delivery bar. */
@media (max-width: 900px) {
  .destination-picks { grid-template-columns: 1fr; gap: 8px; }
  .destination-picks span {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 62px;
  }
  .destination-picks b { line-height: 1.2; }
  .destination-picks small { max-width: 24ch; text-align: right; line-height: 1.3; }
  .signal-footer { border-top: 1px solid color-mix(in srgb, var(--color-input-border) 35%, transparent); }
}

@media (max-width: 420px) {
  .destination-picks span { grid-template-columns: 1fr; align-items: start; gap: 4px; }
  .destination-picks small { max-width: none; text-align: left; }
}

@media (max-width: 720px) {
  .canvas-title { right: 5vw; bottom: 7vh; font-size: clamp(5rem, 24vw, 9rem); }
  .focus-card.signal-board { width: min(100% - 24px, 600px); max-height: calc(100vh - 24px); }
  .signal-header { padding: 13px 15px; }
  .signal-header p:last-child { display: none; }
  .signal-intent { padding: 20px 15px; }
  .signal-grid { grid-template-columns: 1fr; }
  .station { padding: 17px 15px; }
  .station:nth-child(odd) { border-right: 0; }
  .drop-prompt { display: none; }
  .signal-footer { align-items: stretch; flex-direction: column; padding: 15px; }
  .focus-card .primary { width: 100%; }
  .focus-card .log { margin: 0 15px 15px; }
  .run-receipt { margin: 0 15px 15px; }
}

/* Bleeding Edge — no form panel; each control is a node in the image. */
@media (min-width: 901px) {
  .bleed-mode .modal { padding: 0; overflow: hidden; }
  .bleed-mode .canvas-title {
    right: auto;
    left: 6vw;
    bottom: calc(14vh + 300px);
    color: color-mix(in srgb, var(--color-primary-cta) 21%, transparent);
    font-size: clamp(10rem, 23vw, 24rem);
    line-height: .69;
    text-align: left;
    transition: opacity 180ms ease, filter 180ms ease;
  }
  .bleed-mode .focus-card.signal-board {
    position: fixed;
    inset: 0;
    display: block;
    width: 100%;
    max-height: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
  }
  .bleed-mode .focus-card.signal-board > * { pointer-events: auto; }
  .bleed-mode .modal:has(#intent:focus) .canvas-title { opacity: .34; filter: blur(3px); }
  .bleed-mode .signal-header {
    position: fixed;
    top: 22px;
    left: 28px;
    width: auto;
    gap: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
  }
  .bleed-mode .signal-header p:last-child { color: var(--color-labels); }
  .bleed-mode .signal-intent,
  .bleed-mode .station,
  .bleed-mode .signal-footer {
    border: 1px solid color-mix(in srgb, var(--color-input-border) 52%, transparent);
    background: rgb(29 14 9 / 80%);
    box-shadow: 0 12px 34px rgb(0 0 0 / 22%);
  }
  .bleed-mode .signal-intent {
    position: fixed;
    z-index: 3;
    top: 19vh;
    left: 8vw;
    width: min(47vw, 680px);
    padding: 18px 20px 20px;
    border-width: 1px 0 1px 1px;
  }
  .bleed-mode .signal-intent textarea { min-height: 150px; font-size: clamp(3rem, 5.5vw, 5.8rem); }
  .bleed-mode .signal-grid {
    position: fixed;
    z-index: 2;
    inset: auto 7vw calc(8vh + 84px);
    display: grid;
    grid-template-columns: minmax(220px, .9fr) minmax(280px, 1.15fr) minmax(210px, .85fr) minmax(250px, 1fr);
    grid-template-areas: "skill guard output destination";
    align-items: stretch;
    gap: 0;
    border: 1px solid color-mix(in srgb, var(--color-input-border) 52%, transparent);
    background: rgb(29 14 9 / 78%);
    box-shadow: 0 12px 34px rgb(0 0 0 / 22%);
    pointer-events: none;
  }
  .bleed-mode .station {
    position: static;
    min-width: 0;
    min-height: 100%;
    padding: var(--space-group);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: auto;
    transition: transform 180ms cubic-bezier(.16, 1, .3, 1), background 180ms ease, box-shadow 180ms ease;
  }
  .bleed-mode .station.signal-intent { position: fixed; }
  .bleed-mode .station:nth-child(odd) { border-right: 0; }
  .bleed-mode .station + .station { border-left: 1px solid color-mix(in srgb, var(--color-input-border) 36%, transparent); }
  .bleed-mode .station:focus-within { background: color-mix(in srgb, var(--color-primary-cta) 7%, transparent); box-shadow: inset 0 -2px 0 var(--color-primary-cta); }
  .bleed-mode .station.is-confirmed { background: color-mix(in srgb, var(--color-primary-cta) 5%, transparent); }
  .bleed-mode .skill-station { grid-area: skill; }
  .bleed-mode .guardrail-station { grid-area: guard; }
  .bleed-mode .output-station { grid-area: output; align-self: start; }
  .bleed-mode .destination-station { grid-area: destination; }
  .bleed-mode .focus-card #guardrails { min-height: 102px; font-size: 12px; line-height: 1.4; }
  .bleed-mode .output-picks { gap: var(--space-tight); }
  .bleed-mode .output-picks span { padding: 7px; font-size: 10px; }
  .bleed-mode .destination-picks span { min-height: 54px; padding: 7px; }
  .bleed-mode .destination-picks b { font-size: 10px; }
  .bleed-mode .destination-picks small { font-size: 9px; }
  .bleed-mode .signal-footer {
    position: fixed;
    z-index: 3;
    right: 7vw;
    bottom: 4vh;
    width: min(300px, 23vw);
    align-items: center;
    gap: var(--space-control);
    padding: var(--space-tight);
  }
  .bleed-mode .signal-footer p { max-width: 14ch; font-size: 10px; }
  .bleed-mode .signal-footer .route-copy { min-width: 0; gap: 2px; }
  .bleed-mode .signal-footer .route-copy > p:first-child { display: none; }
  .bleed-mode .signal-footer .route-status { font-size: 9px; }
  .bleed-mode .focus-card .primary { flex: 1; min-width: 154px; min-height: 42px; }
  .bleed-mode .focus-card .log { position: fixed; right: 7vw; top: calc(20vh + 160px); width: min(305px, 25vw); margin: 0; }
  .bleed-mode .run-receipt { position: fixed; z-index: 10; right: 7vw; top: calc(20vh + 160px); width: min(305px, 25vw); margin: 0; }
  .bleed-mode .key-hint {
    position: fixed;
    z-index: 8;
    bottom: 24px;
    left: 28px;
    display: block;
    margin: 0;
    color: color-mix(in srgb, var(--color-text) 54%, transparent);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .02em;
    transition: color 140ms ease, transform 140ms ease;
    pointer-events: none;
  }
  .bleed-mode .key-hint kbd { color: var(--color-primary-cta); font: inherit; }
  .bleed-mode .key-hint.is-playing { color: var(--color-primary-cta); transform: translateY(-4px); }
}

/* Signal Spine — the brief lands first; its decisions follow as one action path. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  @keyframes signal-spine-arrive {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  .bleed-mode .signal-intent,
  .bleed-mode .station,
  .bleed-mode .signal-footer {
    animation: signal-spine-arrive 440ms cubic-bezier(.16, 1, .3, 1) backwards;
  }
  .bleed-mode .skill-station { animation-delay: 80ms; }
  .bleed-mode .guardrail-station { animation-delay: 140ms; }
  .bleed-mode .output-station { animation-delay: 200ms; }
  .bleed-mode .destination-station { animation-delay: 260ms; }
  .bleed-mode .signal-footer { animation-delay: 320ms; }
  .bleed-mode .station:focus-within { transform: translate3d(0, -4px, 0); }
  .bleed-mode .output-picks span,
  .bleed-mode .destination-picks span,
  .bleed-mode .focus-card .primary {
    transition: transform 150ms cubic-bezier(.16, 1, .3, 1), background 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  .bleed-mode .output-picks input:checked + span,
  .bleed-mode .destination-picks input:checked + span { transform: translate3d(0, -2px, 0); }
  .bleed-mode .focus-card .primary:hover { transform: translate3d(0, -2px, 0); }
}

/* Short laptop windows keep the spatial composition without collisions. */
@media (min-width: 901px) and (max-height: 850px) {
  .bleed-mode .canvas-title { bottom: calc(8vh + 300px); opacity: .18; }
  .bleed-mode .signal-header { top: 14px; }
  .bleed-mode .signal-intent { top: 12vh; left: 5vw; width: min(47vw, 620px); }
  .bleed-mode .signal-intent textarea { min-height: 108px; font-size: clamp(2.7rem, 4.8vw, 4.6rem); }
  .bleed-mode .signal-grid {
    inset: auto 5vw calc(7vh + 72px);
    grid-template-columns: minmax(170px, .9fr) minmax(220px, 1.2fr) minmax(160px, .9fr) minmax(200px, 1fr);
    grid-template-areas: "skill guard output destination";
    gap: 0;
  }
  .bleed-mode .station { padding: var(--space-control); }
  .bleed-mode .focus-card #guardrails { min-height: 84px; }
  .bleed-mode .signal-footer { right: 5vw; bottom: 7vh; width: min(284px, 25vw); padding: var(--space-tight) var(--space-control); }
  .bleed-mode .signal-footer p { display: none; }
  .bleed-mode .focus-card .primary { width: 100%; }
  .bleed-mode .focus-card .log,
  .bleed-mode .run-receipt { right: 5vw; top: calc(12vh + 148px); width: min(320px, 27vw); }
}

/* Signal Cascade — each decision reveals the next instrument. */
@media (min-width: 901px) {
  .cascade-mode .keys-wrap { display: none; }
  .cascade-mode .modal { padding: 0; overflow: hidden; }
  .cascade-mode .canvas-title {
    right: 6vw;
    bottom: 9vh;
    color: color-mix(in srgb, var(--color-primary-cta) 17%, transparent);
    font-size: clamp(10rem, 22vw, 23rem);
    line-height: .7;
    transition: opacity 360ms ease, filter 360ms ease;
  }
  .cascade-mode .focus-card.signal-board {
    position: fixed;
    inset: 0;
    display: block;
    width: 100%;
    max-height: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
  }
  .cascade-mode .focus-card.signal-board > * { pointer-events: auto; }
  .cascade-mode .signal-header {
    position: fixed;
    top: 22px;
    left: 28px;
    width: auto;
    gap: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
  }
  .cascade-mode .signal-header p:last-child { color: var(--color-labels); }
  .cascade-mode .signal-intent,
  .cascade-mode .station,
  .cascade-mode .signal-footer {
    position: fixed;
    border: 1px solid color-mix(in srgb, var(--color-input-border) 50%, transparent);
    background: rgb(29 14 9 / 82%);
    box-shadow: 0 12px 34px rgb(0 0 0 / 22%);
  }
  .cascade-mode .signal-intent { top: 19vh; left: 8vw; width: min(56vw, 830px); padding: 18px 20px 20px; }
  .cascade-mode .signal-intent textarea { min-height: 150px; font-size: clamp(3rem, 5.4vw, 5.6rem); }
  .cascade-mode .signal-grid { display: block; }
  .cascade-mode .station { min-width: 0; padding: 15px; }
  .cascade-mode .station:nth-child(odd) { border-right: 1px solid color-mix(in srgb, var(--color-input-border) 50%, transparent); }
  .cascade-mode .skill-station { bottom: 18vh; left: 15vw; width: min(330px, 28vw); }
  .cascade-mode .guardrail-station { top: 48vh; left: 45vw; width: min(360px, 29vw); }
  .cascade-mode .output-station { top: 20vh; right: 7vw; width: min(300px, 25vw); }
  .cascade-mode .destination-station { right: 7vw; bottom: 19vh; width: min(360px, 30vw); }
  .cascade-mode .signal-footer { right: 7vw; bottom: 7vh; width: min(360px, 30vw); align-items: stretch; flex-direction: column; gap: 10px; padding: 13px; }
  .cascade-mode .focus-card #guardrails { min-height: 108px; font-size: 12px; line-height: 1.4; }
  .cascade-mode .station-next { margin-top: 10px; padding: 0; border: 0; background: transparent; color: var(--color-primary-cta); font-family: var(--font-mono); font-size: 11px; }
  .cascade-mode .station-next:hover { color: var(--color-text); }
  .cascade-mode .output-picks { gap: 5px; }
  .cascade-mode .output-picks span { padding: 7px; font-size: 10px; }
  .cascade-mode .destination-picks span { min-height: 54px; padding: 7px; }
  .cascade-mode .destination-picks b { font-size: 10px; }
  .cascade-mode .destination-picks small { font-size: 9px; }
  .cascade-mode .signal-footer p { font-size: 11px; }
  .cascade-mode .signal-footer .route-status { font-size: 9px; }
  .cascade-mode .focus-card .primary { width: 100%; min-height: 42px; }
  .cascade-mode .focus-card .log { position: fixed; right: 7vw; top: calc(20vh + 160px); width: min(300px, 25vw); margin: 0; }
  .cascade-mode .key-hint { position: fixed; z-index: 8; bottom: 24px; left: 28px; display: block; margin: 0; color: color-mix(in srgb, var(--color-text) 54%, transparent); font-family: var(--font-mono); font-size: 10px; pointer-events: none; }
  .cascade-mode .key-hint kbd { color: var(--color-primary-cta); font: inherit; }
  .cascade-mode [data-step] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 340ms ease, transform 480ms cubic-bezier(.16, 1, .3, 1), filter 340ms ease; }
  .cascade-mode .signal-intent[data-step="1"] { transform: translate3d(-28px, 0, 0); }
  .cascade-mode.cascade-step-1 [data-step="1"],
  .cascade-mode.cascade-step-2 [data-step="2"],
  .cascade-mode.cascade-step-3 [data-step="3"],
  .cascade-mode.cascade-step-4 [data-step="4"],
  .cascade-mode.cascade-step-5 [data-step="5"] { opacity: 1; transform: translate3d(0, 0, 0); }
  .cascade-mode.cascade-step-2 [data-step="1"],
  .cascade-mode.cascade-step-3 [data-step="1"],
  .cascade-mode.cascade-step-3 [data-step="2"],
  .cascade-mode.cascade-step-4 [data-step="1"],
  .cascade-mode.cascade-step-4 [data-step="2"],
  .cascade-mode.cascade-step-4 [data-step="3"],
  .cascade-mode.cascade-step-5 [data-step="1"],
  .cascade-mode.cascade-step-5 [data-step="2"],
  .cascade-mode.cascade-step-5 [data-step="3"],
  .cascade-mode.cascade-step-5 [data-step="4"] { opacity: .58; transform: translate3d(0, 0, 0) scale(.97); filter: saturate(.7); }
  .cascade-mode.cascade-step-1 .canvas-title { opacity: .28; }
  .cascade-mode.cascade-step-2 .canvas-title { opacity: .34; }
  .cascade-mode.cascade-step-3 .canvas-title { opacity: .43; }
  .cascade-mode.cascade-step-4 .canvas-title,
  .cascade-mode.cascade-step-5 .canvas-title { opacity: .56; }
}

/* On compact screens the cascade becomes a readable vertical sequence.
   Future decisions stay out of view until the preceding choice is made. */
@media (max-width: 900px) {
  .cascade-mode .signal-grid { display: block; }
  .cascade-mode [data-step] { display: none; }
  .cascade-mode.cascade-step-1 [data-step="1"],
  .cascade-mode.cascade-step-2 [data-step="1"],
  .cascade-mode.cascade-step-2 [data-step="2"],
  .cascade-mode.cascade-step-3 [data-step="1"],
  .cascade-mode.cascade-step-3 [data-step="2"],
  .cascade-mode.cascade-step-3 [data-step="3"],
  .cascade-mode.cascade-step-4 [data-step="1"],
  .cascade-mode.cascade-step-4 [data-step="2"],
  .cascade-mode.cascade-step-4 [data-step="3"],
  .cascade-mode.cascade-step-4 [data-step="4"],
  .cascade-mode.cascade-step-5 [data-step="1"],
  .cascade-mode.cascade-step-5 [data-step="2"],
  .cascade-mode.cascade-step-5 [data-step="3"],
  .cascade-mode.cascade-step-5 [data-step="4"] { display: block; }
  .cascade-mode.cascade-step-5 .signal-footer { display: flex; }
  .cascade-mode .station-next {
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary-cta);
    font-family: var(--font-mono);
    font-size: 11px;
  }
}