/* DIRECTION CONTRACT
   THESIS: a goal is an air-traffic flight strip. Refuses the dark dashboard
     with one neon accent and the grid of equal cards; attention is a strip
     physically cocked out of the rack, not a badge.
   OWN-WORLD: cool pale paper strips on dark slate. Status lives in a colored
     holder (end-block with a three-letter code). Boxed printed fields with
     hairline rules. B612 cockpit type. Plan = route of diamond waypoints.
   STORY: the operator sees which strips are cocked, opens one, reads where
     the route stands, then approves or intervenes. Never reads a log first.
   FIRST VIEWPORT: left rack of strips (cocked ones pushed right, red holders);
     right, the open strip on paper (holder, title, four fields, actions)
     beside the route and live telemetry on slate.
   FORM: Flight Strip Rack, assigned candidate 4 of 7, seed de3f55e2.
   Tokens are documented in ../DESIGN.md. */

@font-face { font-family: "B612"; font-weight: 400; font-display: swap; src: url("/static/fonts/b612-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "B612"; font-weight: 700; font-display: swap; src: url("/static/fonts/b612-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "B612 Mono"; font-weight: 400; font-display: swap; src: url("/static/fonts/b612-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "B612 Mono"; font-weight: 700; font-display: swap; src: url("/static/fonts/b612-mono-latin-700-normal.woff2") format("woff2"); }

:root {
  /* slate rack */
  --slate: oklch(0.235 0.012 250);
  --well: oklch(0.19 0.012 250);
  --slate-raised: oklch(0.30 0.014 250);
  --rule: oklch(0.38 0.014 250);
  --rule-strong: oklch(0.52 0.016 250);
  --pale: oklch(0.95 0.006 250);
  --pale-muted: oklch(0.79 0.01 250);
  --pale-faint: oklch(0.69 0.01 250);

  /* strip paper (cool, never cream) */
  --paper: oklch(0.965 0.006 235);
  --paper-aged: oklch(0.905 0.008 235);
  --paper-rule: oklch(0.76 0.012 240);
  --ink: oklch(0.22 0.02 255);
  --ink-muted: oklch(0.40 0.02 255);
  --ink-printed: oklch(0.47 0.02 255);

  /* status holders: one meaning each */
  --amber: oklch(0.84 0.16 85);
  --blue: oklch(0.72 0.12 245);
  --red: oklch(0.56 0.21 27);
  --red-on-paper: oklch(0.47 0.20 27);
  --red-on-slate: oklch(0.76 0.14 27);
  --green: oklch(0.74 0.16 150);
  --idle: oklch(0.80 0.01 250);
  --red-ink: oklch(0.98 0.01 27);

  --focus: oklch(0.82 0.10 230);
  --radius: 2px;
  --snap: 120ms;

  --font-ui: "B612", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-led: "B612 Mono", ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;

  --fs-label: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.375rem;

  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--slate); }
body { margin: 0; background: var(--slate); color: var(--pale); font: 400 var(--fs-md)/1.45 var(--font-ui); }
h1, h2, h3, p { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.control :focus-visible, .login :focus-visible, .edit-sub :focus-visible, .strip:focus-visible { outline-color: var(--ink); }
.strip:focus-visible { outline-color: var(--focus); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.led { font-family: var(--font-led); font-weight: 700; font-variant-numeric: tabular-nums; }
.muted { color: var(--pale-muted); }
.faint { color: var(--pale-faint); }

/* ---- printed label + section titles ----------------------------------- */

.panel-label { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-printed); }
h2.panel-label { font-size: var(--fs-md); letter-spacing: 0; text-transform: none; color: var(--pale); }
.goal-text .panel-label { color: var(--ink-printed); }
.brand .panel-label { display: inline-block; padding: 4px 8px; background: var(--paper); color: var(--ink); border-radius: var(--radius); }

/* ---- status holder: the colored end-block of a strip ------------------ */

.holder {
  display: grid; place-items: center; flex: none;
  min-width: 52px; padding: 0 6px;
  background: var(--idle); color: var(--ink);
  font: 700 var(--fs-label)/1 var(--font-ui); letter-spacing: 0.08em;
}
.holder--amber { background: var(--amber); }
.holder--blue { background: var(--blue); }
.holder--red { background: var(--red); color: var(--red-ink); }
.holder--green { background: var(--green); }
.holder--idle { background: var(--idle); }
.holder.is-live span[aria-hidden] { animation: beat 1.4s steps(2, jump-none) infinite; }
@keyframes beat { 50% { opacity: 0.4; } }

/* ---- switches ---------------------------------------------------------- */

.switch {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 8px 16px;
  background: transparent; color: var(--pale);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background-color var(--snap) steps(1);
}
.switch:hover { background: var(--slate-raised); }
.switch[disabled] { opacity: 0.5; cursor: not-allowed; }
.switch--primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.switch--primary:hover { background: var(--paper-aged); }
.switch--block { width: 100%; }
.side > .switch--primary { background: transparent; color: var(--pale); border-color: var(--pale-muted); }
.side > .switch--primary:hover { background: var(--slate-raised); }
.control .switch, .edit-sub .switch { background: var(--paper-aged); color: var(--ink); border-color: var(--paper-rule); }
.control .switch:hover, .edit-sub .switch:hover { background: oklch(0.86 0.01 235); }
.control .switch--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.control .switch--primary:hover { background: oklch(0.30 0.02 255); }

/* ---- fields ------------------------------------------------------------ */

.field { display: block; margin-bottom: 18px; }
.field > span, .field > label > span { display: block; margin-bottom: 6px; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pale-muted); }
.field input, .field textarea, .login input {
  display: block; width: 100%; padding: 10px 12px;
  background: oklch(0.99 0.003 235); color: var(--ink);
  border: 1px solid var(--paper-rule); border-radius: var(--radius);
}
.field textarea { resize: vertical; min-height: 7rem; line-height: 1.45; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-printed); }
.field input:focus, .field textarea:focus, .login input:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.field small { display: block; margin-top: 6px; color: var(--pale-faint); font-size: var(--fs-sm); }
.edit-sub .field > span, .edit-sub .field > label > span { color: var(--ink-printed); }
.edit-sub .field input:focus, .edit-sub .field textarea:focus, .login input:focus { outline-color: var(--ink); }
.mono-area { font-family: var(--font-led); font-size: var(--fs-sm); }

.alert {
  margin: 0 0 16px; padding: 10px 12px;
  background: var(--well); color: var(--red-on-slate);
  border: 1px solid var(--red); border-radius: var(--radius); font-size: var(--fs-sm);
}
.control .alert { background: oklch(0.95 0.025 27); color: var(--red-on-paper); }

/* ---- login: a strip on the rack --------------------------------------- */

.center { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login { width: 100%; max-width: 380px; padding: 24px; background: var(--paper); color: var(--ink); border-radius: var(--radius); }
.login h1 { font-size: var(--fs-lg); font-weight: 700; line-height: 1.15; margin-bottom: 20px; }
.login label { display: block; margin-bottom: 14px; color: var(--ink-printed); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.login input { margin-top: 6px; font-size: var(--fs-md); text-transform: none; letter-spacing: 0; font-weight: 400; }
.login button {
  width: 100%; margin-top: 6px; min-height: 42px; padding: 9px 16px;
  background: var(--ink); color: var(--paper); border: 0; border-radius: var(--radius); font-weight: 700; cursor: pointer;
}
.login button:hover { background: oklch(0.30 0.02 255); }
#err { margin: 12px 0 0; color: var(--red-on-paper); font-size: var(--fs-sm); }

/* ---- shell: rack rail + workspace ------------------------------------- */

.shell { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 100vh; }

.side {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 16px;
  padding: 16px 0 16px 12px;
  background: var(--well);
  border-right: 1px solid var(--rule);
}
.side > .brand, .side > .switch, .side > .conn, .side > .side-foot { margin-right: 12px; }
.side nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 18px 4px 0; display: grid; align-content: start; gap: 3px; }
.side-empty { color: var(--pale-faint); font-size: var(--fs-sm); }

/* a strip in the rack */
.strip {
  position: relative; display: flex; min-height: 64px;
  background: var(--paper-aged); color: var(--ink);
  text-decoration: none; border-radius: var(--radius);
  box-shadow: 0 1px 0 oklch(0.12 0.01 250);
  transition: transform var(--snap) steps(3), background-color var(--snap) steps(1);
}
.strip:hover { background: oklch(0.94 0.008 235); }
.strip[aria-current="page"] { background: var(--paper); outline: 2px solid var(--pale); outline-offset: 1px; }
.strip.is-cocked { transform: translateX(14px); }
.strip .body { display: grid; gap: 6px; align-content: center; min-width: 0; padding: 8px 12px; flex: 1; }
.strip .t { font-weight: 700; font-size: var(--fs-sm); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip .f { display: flex; gap: 14px; font-size: var(--fs-label); color: var(--ink-printed); }
.strip .f b { font-family: var(--font-led); font-weight: 700; color: var(--ink); margin-left: 4px; font-variant-numeric: tabular-nums; }

.conn { margin-bottom: 0; padding: 8px 10px; border: 1px solid var(--red); border-radius: var(--radius); color: var(--red-on-slate); font-size: var(--fs-sm); }
.conn[hidden] { display: none; }

.side-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: var(--fs-sm); color: var(--pale-muted); }
.side-foot button { background: none; border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 5px 10px; cursor: pointer; color: var(--pale-muted); }
.side-foot button:hover { background: var(--slate-raised); color: var(--pale); }

main { min-width: 0; padding: 24px 32px 56px; outline: none; }

/* ---- new goal ---------------------------------------------------------- */

.new-goal { max-width: 720px; }
.new-goal h1 { font-size: var(--fs-lg); font-weight: 700; line-height: 1.15; margin-bottom: 8px; }
.new-goal .lede { color: var(--pale-muted); margin-bottom: 24px; max-width: 60ch; }
.how { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: step; border-top: 1px solid var(--rule); }
.how li { counter-increment: step; display: grid; grid-template-columns: 2rem 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--rule); color: var(--pale-muted); }
.how li::before { content: counter(step); font-family: var(--font-led); color: var(--pale-faint); }
.how strong { color: var(--pale); font-weight: 700; }

/* ---- open goal: control strip (paper) / observe (slate) ---------------- */

.goal-grid { display: grid; gap: 32px; align-items: start; grid-template-columns: minmax(320px, 430px) minmax(0, 1fr); }
.control-col { position: sticky; top: 24px; }
.slot:empty { display: none; }

.control { background: var(--paper); color: var(--ink); border-radius: var(--radius); box-shadow: 0 1px 0 oklch(0.12 0.01 250); }
.open-head { display: flex; min-height: 76px; }
.open-head .holder { min-width: 68px; font-size: var(--fs-sm); }
.open-head .id { padding: 12px 16px; min-width: 0; align-self: center; }
.goal-title { font-size: var(--fs-lg); font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.repo-line { margin-top: 4px; color: var(--ink-printed); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.control .inner { padding: 16px; }

.fields { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--paper-rule); border-left: 1px solid var(--paper-rule); margin-bottom: 16px; }
.fields .readout { border-right: 1px solid var(--paper-rule); border-bottom: 1px solid var(--paper-rule); padding: 8px 10px 10px; }
.readout .k { display: block; margin-bottom: 6px; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-printed); }
.readout .v { font-size: var(--fs-md); line-height: 1.1; overflow-wrap: anywhere; }
.readout .v.words { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-sm); }
.readout .v.clock { font-family: var(--font-ui); font-weight: 700; font-variant-numeric: tabular-nums; }

.status-why { margin-bottom: 16px; color: var(--ink-muted); font-size: var(--fs-sm); }
.actions { display: grid; gap: 8px; }
.actions .row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.goal-text { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--paper-rule); }
.goal-text p { margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-muted); font-size: var(--fs-sm); max-height: 12rem; overflow: auto; }
.pr-link { display: block; margin-top: 14px; color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* tension-commit lever (irreversible actions) */
.lever {
  position: relative; overflow: hidden; width: 100%; min-height: 38px; padding: 8px 16px;
  background: transparent; color: var(--red-on-paper);
  border: 1px solid var(--red); border-radius: var(--radius);
  font-weight: 700; cursor: pointer; user-select: none; touch-action: none;
}
.lever .fill { position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 150ms ease-out; }
.lever.charging .fill { transform: scaleX(1); transition: transform 650ms linear; }
.lever .txt { position: relative; }
.lever.charging { color: var(--red-ink); }

.observe { display: grid; gap: 32px; min-width: 0; }
.telemetry > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.telemetry > header h2 { max-width: 100%; overflow-wrap: anywhere; }

/* plan as a route: diamond fixes along a line */
.subs { list-style: none; margin: 0; padding: 0; }
.sub { position: relative; }
.sub::before { content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--rule-strong); }
.sub:first-child::before { top: 50%; }
.sub:last-child::before { bottom: 50%; }
.sub:only-child::before { display: none; }
.sub[data-s="done"]::before { border-left: 2px solid var(--pale-muted); }
.sub > button {
  position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; padding: 12px 10px 12px 0; text-align: left; background: none; border: 0; color: inherit; cursor: pointer;
  transition: background-color var(--snap) steps(1);
}
.sub > button:hover { background: var(--slate-raised); }
.sub[aria-current="true"] > button { background: var(--slate-raised); }
.fix { justify-self: center; width: 12px; height: 12px; transform: rotate(45deg); border: 2px solid var(--pale-muted); background: var(--slate); }
.fix--green { background: var(--green); border-color: var(--green); }
.fix--amber { background: var(--amber); border-color: var(--amber); }
.fix--red { background: var(--red); border-color: var(--red); }
.fix.is-live { animation: beat 1.4s steps(2, jump-none) infinite; }
.sub .name { overflow-wrap: anywhere; }
.sub .name b { font-weight: 700; }
.sub .name .deps { display: block; margin-top: 2px; font-size: var(--fs-label); color: var(--pale-faint); }
.sub .st { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pale-muted); }
.sub .st.red { color: var(--red-on-slate); }
.sub .st.green { color: var(--green); }

/* live telemetry: printed fields on the slate */
.live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); margin-bottom: 16px; }
.live-grid .readout { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 8px 10px 10px; }
.live-grid .readout .k { color: var(--pale-faint); }
.health { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.health i { display: inline-block; width: 14px; height: 8px; border-radius: var(--radius); background: var(--pale-faint); }
.health i.OK { background: var(--green); }
.health i.ERROR { background: var(--red); }
.health i.SUSPECT { background: var(--amber); }
.verdict.pass { color: var(--green); }
.verdict.fail { color: var(--red-on-slate); }

.code {
  margin: 0 0 14px; padding: 10px 12px; max-height: 16rem; overflow: auto;
  background: var(--well); border: 1px solid var(--rule); border-radius: var(--radius);
  font: var(--fs-sm)/1.5 var(--font-led); color: var(--pale-muted); white-space: pre-wrap; overflow-wrap: anywhere;
}
.code-title { display: block; margin: 0 0 6px; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pale-faint); }
.empty { color: var(--pale-faint); padding: 8px 0; }

.events { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); max-height: 22rem; overflow: auto; }
.events li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); }
.events time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pale-faint); font-size: var(--fs-label); padding-top: 2px; }
.events .bad { color: var(--red-on-slate); }
.events .good { color: var(--green); }

/* plan editor: each subtask is a paper strip */
.editor { display: grid; gap: 12px; }
.edit-sub { background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 14px; }
.edit-sub .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 8px; }
.edit-sub .field:last-child { margin-bottom: 0; }
.edit-bar { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- responsive: structural collapse ---------------------------------- */

@media (max-width: 960px) {
  .goal-grid { grid-template-columns: 1fr; }
  .control-col { position: static; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; padding: 12px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .side > .brand, .side > .switch, .side > .conn, .side > .side-foot { margin-right: 0; }
  .side nav { display: flex; overflow-x: auto; overflow-y: hidden; padding: 4px 0 8px; gap: 6px; }
  .strip { min-width: 232px; flex: none; }
  .strip.is-cocked { transform: translateY(6px); }
  main { padding: 16px; }
}

@media (pointer: coarse) {
  .switch, .lever, .sub > button, .side-foot button, .login button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .holder.is-live span[aria-hidden], .fix.is-live { animation: none; }
  .strip, .lever .fill { transition: none; }
}