/* New movie — the form on the left, the live pipeline log on the right. */

html,body{margin:0;min-height:100%}
body{
  background:
    radial-gradient(1000px 560px at 50% -8%, #15243C 0%, transparent 55%),
    radial-gradient(640px 380px at 100% 110%, #0C1A30 0%, transparent 55%),
    var(--bg);
}

.shell{width:min(1180px,100%); margin:0 auto; padding:0 clamp(18px,3vw,32px) 40px}

main{
  display:grid; grid-template-columns:minmax(300px,380px) 1fr; gap:0;
  min-height:calc(100vh - 120px);
}
@media(max-width:900px){main{grid-template-columns:1fr}}
.col{padding:28px 0}
.col.form{padding-right:28px}
.col.log{padding-left:28px; border-left:1px solid var(--line)}
@media(max-width:900px){
  .col.form{padding-right:0}
  .col.log{
    padding-left:0; border-left:0; border-top:1px solid var(--line);
    margin-top:8px; padding-top:24px;
  }
}
.col h2{
  margin:0 0 18px; font-family:var(--display); font-weight:600;
  font-size:22px; letter-spacing:-.02em;
}

/* ---- form --------------------------------------------------------------- */
label{
  display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); margin:0 0 7px; font-weight:600;
}
input,select{
  width:100%; padding:12px 14px; background:var(--sunken); color:var(--ink);
  border:1px solid var(--line); border-radius:10px; font:inherit; font-size:15px;
  transition:border-color .15s;
}
input::placeholder{color:var(--faint)}
input:focus,select:focus{outline:none; border-color:var(--accent)}
.field+.field{margin-top:16px}

#go,#stop{
  margin-top:20px; width:100%; padding:13px; border-radius:10px;
  font:inherit; font-weight:600; font-size:15px; cursor:pointer;
  transition:filter .15s, background .15s, color .15s;
}
#go{border:1px solid var(--accent); background:var(--accent); color:#0A0E16}
#go:hover{filter:brightness(1.06)}
#go:disabled{background:#1B2A4A; border-color:#1B2A4A; color:var(--faint); cursor:default; filter:none}
#stop{background:transparent; border:1px solid var(--bad); color:var(--bad)}
#stop:hover{background:var(--bad); color:#fff}
#stop:disabled{opacity:.6; cursor:default}
button[hidden]{display:none}

.hint{margin-top:18px; font-size:13px; color:var(--faint); line-height:1.65}
.hint code{
  color:var(--dim); font-size:12px; padding:1px 5px; border-radius:4px;
  background:var(--sunken); border:1px solid var(--line);
}

.ideas{margin-top:16px; display:flex; flex-wrap:wrap; gap:6px}
.ideas button{
  margin:0; width:auto; padding:6px 11px; font-size:12px; font-weight:500;
  border-radius:999px; border:1px solid var(--line); background:var(--sunken);
  color:var(--dim); cursor:pointer;
}
.ideas button:hover{color:var(--ink); border-color:var(--line-hi)}

.meters{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px}
.meter{
  background:var(--sunken); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px;
}
.meter b{
  display:block; font-size:20px; font-weight:600;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.meter span{
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); font-weight:600;
}

/* ---- pipeline profile ----------------------------------------------------
   Where the wall time went, live. The log already streams every stage's
   milliseconds, but a column of numbers does not answer the only question
   anyone asks of it — which stage IS the run — and that answer changed the
   architecture twice. So the same numbers, as length.

   Two series, because the split is the claim: a MODEL CALL costs seconds and
   a DETERMINISTIC stage costs none, and the pipeline is built on preferring
   the second. Colours are the categorical slots validated against this
   surface (#0C1322, dark): amber #c98500 / blue #3987e5 clear the lightness
   band, the chroma floor, CVD separation (ΔE 27.4 protan) and 3:1 contrast.
   Do not substitute by eye — re-run the validator. */
:root{--s-model:#c98500; --s-code:#3987e5}

.profile{margin-top:22px}
.profile[hidden]{display:none}
.profile .phead{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:10px;
}
.profile h3{
  margin:0; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); font-weight:600;
}
.plegend{display:flex; gap:12px; align-items:center}
.plegend span{display:flex; align-items:center; gap:5px; font-size:11px; color:var(--dim)}
.plegend i{width:9px; height:9px; border-radius:2px; display:block}
.swatch-model{background:var(--s-model)}
.swatch-code{background:var(--s-code)}

.prows{display:flex; flex-direction:column; gap:2px}   /* 2px surface gap between fills */
.prow{
  display:grid; grid-template-columns:64px 1fr auto; gap:8px; align-items:center;
  font-size:11.5px; padding:1px 0; border-radius:4px;
}
.prow:hover{background:#0F1828}
.prow .pname{
  color:var(--dim); text-align:right; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.ptrack{height:11px; background:var(--sunken); border-radius:3px; overflow:hidden}
.pbar{
  height:100%; border-radius:0 4px 4px 0;      /* 4px rounded data-end, anchored to baseline */
  min-width:2px; transition:width .25s ease-out;
}
.pbar.model{background:var(--s-model)}
.pbar.code{background:var(--s-code)}
.prow .pval{
  color:var(--dim); font-variant-numeric:tabular-nums; font-size:11px;
  min-width:52px; text-align:right;
}
.prow.cached .pval{color:var(--faint)}

.pfoot{
  margin-top:10px; display:flex; justify-content:space-between; align-items:center;
  font-size:11px; color:var(--faint);
}
.pfoot button{
  margin:0; width:auto; padding:4px 9px; font-size:11px; font-weight:500;
  border-radius:999px; border:1px solid var(--line); background:var(--sunken);
  color:var(--dim); cursor:pointer;
}
.pfoot button:hover{color:var(--ink); border-color:var(--line-hi)}

/* The table view is the accessibility path, not a debug affordance: identity
   here must never be colour alone. */
.ptable{width:100%; margin-top:10px; border-collapse:collapse; font-size:11.5px}
.ptable[hidden]{display:none}
.ptable th,.ptable td{
  text-align:left; padding:4px 6px; border-bottom:1px solid var(--line); color:var(--dim);
}
.ptable th{color:var(--faint); font-size:10px; letter-spacing:.08em; text-transform:uppercase}
.ptable td.n{text-align:right; font-variant-numeric:tabular-nums}

/* ---- log + result ------------------------------------------------------- */
#log{
  font:12.5px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre-wrap; word-break:break-word; margin:0;
}
#log .l{padding:2px 0; border-left:2px solid transparent; padding-left:11px; margin-left:-13px}
#log .stage{color:var(--ink)}
#log .note{color:var(--dim)}
#log .warn{color:var(--warn)}
#log .bad{color:var(--bad)}
#log .good{color:var(--ok)}
#log .cost{float:right; color:var(--faint); font-size:11px}
.empty{color:var(--faint); font-size:14px; margin:0}

.result{
  margin-bottom:18px; padding:18px 18px 16px;
  background:linear-gradient(180deg, #0E1626 0%, #0B1220 100%);
  border:1px solid var(--line); border-radius:14px;
}
.result.ok{border-color:#1C6B4A}
.result.warn{border-color:#5A4518}
.result.bad{border-color:#5A2230}
.result h3{
  margin:0; font-family:var(--display); font-weight:600;
  font-size:20px; letter-spacing:-.02em;
}
.result p{margin:8px 0 0; font-size:13.5px; color:var(--dim)}
.result b{color:var(--ink)}
.result a.watch{
  display:inline-block; margin-top:14px; color:#0A0E16; background:var(--accent);
  padding:9px 16px; border-radius:9px; text-decoration:none; font-size:13.5px; font-weight:600;
}
.result a.watch:hover{filter:brightness(1.06)}
.result a.secondary{
  display:inline-block; margin-top:14px; margin-left:8px; color:var(--dim);
  background:transparent; border:1px solid var(--line); padding:8px 14px;
  border-radius:9px; text-decoration:none; font-size:13px; font-weight:600;
}
.result a.secondary:hover{color:var(--ink); border-color:var(--line-hi)}

.kv{display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:12.5px; color:var(--dim)}
.kv b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}