itself) is the actual grid item now — it * wraps #card + the pane-slot below so both share the main column's single * grid cell instead of #card alone. */ .main-col{min-width:0;} /* Step-10 pane promotion (item 5): a PERMANENT empty target, sibling of * #card inside .main-col — see index.html's docblock. Empty by default so * it takes no space until demo.js reparents the live pane in. */ .pane-slot:empty{display:none;} .pane-slot:not(:empty){margin-top:20px;} /* --------------------------------------------------------------------- * Step card — one elevated panel holds the whole step. Serif titles only. * --------------------------------------------------------------------- */ .stepcard{background:var(--panel);border-radius:8px;box-shadow:var(--shadow); padding:32px 36px;} /* B4 may title the step with

or class="title"; main's bare

is a * transitional fallback for the current (pre-B4) engine — see the plan's * note that demo.js is mid-rewrite and still renders the old step markup. */ .stepcard h1, .stepcard .title, main h2{font-family:var(--serif);font-weight:600; font-size:29px;line-height:1.22;margin:0 0 14px;text-wrap:balance;} .eyebrow{font-size:12px;letter-spacing:.1em;text-transform:uppercase; color:var(--dim);margin:0 0 12px;} .eyebrow .act2{color:var(--hard);font-weight:600;} .stepcopy{max-width:60ch;color:var(--ink);margin:0 0 26px;} .stepcopy em{color:var(--dim);font-style:normal;} .stepcopy p{margin:0 0 14px;} .stepcopy p:last-child{margin-bottom:0;} /* Generic prose spacing for containers that render library/steps-data HTML * verbatim (the guard's own entry message, replicate walkthrough) — * restores the paragraph/list rhythm the global margin:0 reset above * removes, without hardcoding structure those callers own. */ .stepcard p, .entrybox p, .task p{margin:0 0 12px;} .stepcard p:last-child, .entrybox p:last-child, .task p:last-child{margin-bottom:0;} .stepcard ul, .stepcard ol, .entrybox ul, .entrybox ol{margin:0 0 12px;padding-left:20px;} /* --------------------------------------------------------------------- * Task panel — recessed ground-colored inset, no border. * --------------------------------------------------------------------- */ .task{background:var(--ground);border-radius:6px;padding:22px 24px;margin:0 0 18px;} .task .label{font-family:var(--mono);font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--dim);margin:0 0 14px;} .question{font-size:17px;font-weight:600;margin:0 0 16px;} .answerchip{display:flex;align-items:center;gap:10px;background:var(--panel); border-radius:6px;box-shadow:inset 0 0 0 1px var(--line);padding:10px 14px; margin:0 0 16px;max-width:340px;} .answerchip code{font-family:var(--mono);font-size:14px;} .answerchip .hint{margin-left:auto;} textarea, input[type="text"]{width:100%;font:inherit;padding:10px 12px; border:1px solid var(--line);border-radius:6px;background:var(--panel); color:var(--ink);resize:vertical;} textarea{min-height:74px;} input[type="text"]{max-width:440px;} textarea:focus, input[type="text"]:focus{outline:2px solid var(--live);outline-offset:-1px;} /* Step 6 autotype: field visually "disables" while characters are inserted * programmatically (the real disabled/readonly state is set in JS — this * just matches the visual language a disabled control already has). */ .autotype-field.busy{background:var(--panel);color:var(--dim);cursor:not-allowed;} .hint{font-size:12px;color:var(--dim);} .rule{padding:14px 16px;border-left:3px solid var(--soft);background:var(--soft-bg); border-radius:0 6px 6px 0;margin:0 0 14px;font-size:15px;} .rule.fallback-note{border-left-color:var(--soft);} /* --------------------------------------------------------------------- * Buttons * --------------------------------------------------------------------- */ .btnrow{display:flex;gap:14px;align-items:center;margin-top:20px;flex-wrap:wrap;} .btn{font:inherit;font-weight:600;padding:10px 22px;border-radius:6px; border:none;background:var(--ink);color:#fff;cursor:pointer;} .btn:hover{background:#2C3947;} .btn:focus-visible, button:focus-visible, a:focus-visible{ outline:2px solid var(--live);outline-offset:2px;} .secondary{margin-top:14px;font-size:13.5px;} .secondary a{color:var(--dim);text-decoration:underline;text-underline-offset:3px;} /* Link-style secondary actions rendered as standalone .skip anchors * (.btnrow's Back link, the fullscreen-fallback "Skip to…" link) — not * always nested inside .secondary, so they need the same link treatment * on their own. */ .skip{color:var(--dim);text-decoration:underline;text-underline-offset:3px;} .skip:hover{color:var(--ink);} /* Guard entry screen (step 8): the library's own entry message, rendered * verbatim, in a recessed inset matching .task. */ .entrybox{background:var(--ground);border-radius:6px;padding:22px 24px;margin:0 0 18px;} /* End-guard button (step 9): rendered as a sibling OUTSIDE the scramble * wrapper, so its legibility can never depend on panel/blur context — a * standalone rule rather than composing with .btn keeps that true even if * .btn's cascade changes later. */ .endguard{display:inline-block;font:inherit;font-weight:600;padding:10px 22px; border-radius:6px;border:none;background:var(--ink);color:#fff;cursor:pointer; margin-top:14px;} .endguard:hover{background:#2C3947;} .endguard:focus-visible{outline:2px solid var(--live);outline-offset:2px;} /* No-trap guarantee (spec §6 step 9): while a guard violation is active, * demo.js reparents the button to AFTER the violation overlay and * adds this class — same z-index as the overlay (2147483647, int max); * equal z-index + later sibling paints on top, so the button stays * clickable over the curtain. Solid bg (from .endguard) + border + shadow * keep it legible against the dark overlay. */ .endguard.floating{position:fixed;right:24px;bottom:24px;z-index:2147483647; margin:0;border:1px solid rgba(255,255,255,.35); box-shadow:0 6px 24px rgba(0,0,0,.45);} /* --------------------------------------------------------------------- * Code blocks — step-2 integration tabs + REPLICATE walkthrough snippets. * .lp-json (below) is a

 too and overrides this via higher specificity.
 * --------------------------------------------------------------------- */
pre{background:var(--code-bg);color:var(--code-ink);padding:14px 16px;
  border-radius:6px;overflow-x:auto;font:12.5px/1.5 var(--mono);margin:0 0 18px;}
pre code{background:none;padding:0;}

.code-tabs{display:flex;gap:6px;margin:2px 0 10px;}
.code-tab{font:12px var(--mono);padding:4px 12px;border:none;border-radius:99px;
  background:var(--ground);color:var(--dim);cursor:pointer;}
.code-tab.active{background:var(--live-bg);color:var(--live);font-weight:700;}

/* ---------------------------------------------------------------------
 * Act 2 guard visuals — violation chips + scramble banner.
 * --------------------------------------------------------------------- */
.violations{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px;}
.chip{font-size:12px;padding:4px 10px;border-radius:99px;
  box-shadow:inset 0 0 0 1px var(--line);color:var(--dim);}
.chip.hot{background:var(--hard-bg);color:var(--hard);box-shadow:none;}

.scramble{position:relative;user-select:none;}
.scramble .content{filter:blur(6px);opacity:.7;}
.scramble .banner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.scramble .banner span{background:var(--hard);color:#fff;font:700 12px/1 var(--mono);
  letter-spacing:.12em;padding:8px 14px;border-radius:6px;}

/* ---------------------------------------------------------------------
 * Instrument column — rail card + live-record card, one card family.
 * --------------------------------------------------------------------- */
.instrument{display:flex;flex-direction:column;gap:16px;position:sticky;top:22px;}
.card{background:var(--panel);border-radius:8px;box-shadow:var(--shadow);padding:18px 20px;}
.card h3, .lp-title{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);font-weight:600;margin:0 0 4px;}
.card .sub{font-size:12px;color:var(--dim);line-height:1.5;margin:0 0 10px;}

/* Rail (rail.js): checklist of tracked signals. */
.check{list-style:none;margin:0;padding:0;font-size:12.5px;
  max-height:calc(100vh - 220px);overflow-y:auto;}
.check li{display:flex;align-items:center;gap:9px;padding:4.5px 0;color:var(--dim);}
.check li.lit{color:var(--ink);}
.check li.lit .lamp{background:var(--clean);border-color:var(--clean);}
.check li.lit.hardlit .lamp{background:var(--hard);border-color:var(--hard);}
.check li.always .lamp{background:var(--line);border-color:var(--line);}
.check li .n{margin-left:auto;font-family:var(--mono);font-size:11.5px;}
.check .hint, .check li.grouphead{padding-top:12px;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);}
.check.awaiting li:not(.hint):not(.grouphead){opacity:.55;}
.lamp{flex:none;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--line);
  background:transparent;}
body[data-view="act2"] .check li.guardrow{color:var(--hard);}
body[data-view="act2"] .check li.guardrow .lamp{background:var(--hard);border-color:var(--hard);}

/* One-shot pulse for a lamp that just lit, off entirely under
 * prefers-reduced-motion (precedent: the REC dot above). */
@keyframes lamp-pulse{
  0%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.8);opacity:.4;}
  100%{transform:scale(1);opacity:1;}
}
.lamp.lamp-pulse{animation:lamp-pulse .6s ease-out 1;}
@media (prefers-reduced-motion: reduce){.lamp.lamp-pulse{animation:none;}}

/* Live session record (live-pane.js): pill tabs + stream/raw-JSON views. */
.lp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;}
.lp-tabs{display:flex;gap:6px;}
.lp-tab{font:12px var(--mono);padding:4px 12px;border:none;border-radius:99px;
  background:var(--ground);color:var(--dim);cursor:pointer;}
.lp-tab.active{background:var(--live-bg);color:var(--live);font-weight:700;}

/* Per-trial tab rail: a two-column grid, rail + views. The aside is 312px
 * (.cols above) minus .card's 18px/20px padding = a 272px content box, so an
 * 88px rail track (border+padding live INSIDE it) leaves the stream 176px.
 * Tabs are step headings, not slugs, so they get the body's sans face rather
 * than the stream's mono and wrap to two lines here (clamped, with the full
 * heading plus the trialId in each tab's title); the two wide states below
 * drop the clamp and show them whole. */
.lp-body{display:grid;grid-template-columns:80px minmax(0,1fr);gap:8px;}
.lp-trials{display:flex;flex-direction:column;gap:4px;min-width:0;flex:none;
  border-right:1px solid var(--line);padding-right:8px;
  max-height:290px;overflow-y:auto;} /* matches .lp-stream: the rail scrolls rather than growing the card */
.lp-trial-tab{font-family:inherit;font-size:11px;line-height:1.35;text-align:left;
  padding:4px 6px;border:none;border-radius:5px;background:var(--ground);
  color:var(--dim);cursor:pointer;flex:none;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  max-height:calc(3 * 1.35em + 8px);} /* three lines fits every heading whole at this width */
.lp-trial-tab[aria-pressed="true"]{background:var(--live-bg);color:var(--live);font-weight:700;}

.lp-views{min-width:0;}
/* 11px in the aside (the rail costs the stream ~76px), back to 11.8px in the
 * two wide states below where the record is actually read closely. */
.lp-stream{font-family:var(--mono);font-size:11px;line-height:1.5;
  max-height:290px;overflow-y:auto;}

/* Step-10 promoted state (item 5): demo.js moves the pane's own card node
 * ([data-role="live-pane"], already class="card") into .pane-slot for this
 * step — full main-column width, taller stream to use the space the
 * otherwise near-empty main column leaves open. */
[data-role="live-pane"].promoted{width:100%;}
[data-role="live-pane"].promoted .lp-stream{max-height:560px;}
/* Four columns in the rail-narrowed 196px stream, measured empirically:
 *   - minmax(0,…) not bare fr — an `auto`-floored fr track grows to its
 *     widest word, so `synthetic_insertion` / `act1-paste` ate the flexible
 *     space and collapsed .lp-detail (the pasted-text column) to ~25px;
 *   - trial and event single-line + ellipsis rather than wrapped: breaking
 *     them mid-token ("act1 / past / e") cost four lines a row and read
 *     worse than a truncation the row's own title attribute recovers;
 *   - only .lp-detail wraps, since it's the column worth the vertical space.
 * 37px holds "0:00.1" at 11px mono without eating the gap, and the trial
 * column takes the smallest share of the rest (the active rail tab already
 * names the trial) so the event column stays wide enough to tell trial_start
 * from trial_end at a glance. The two wide states below undo all of it. */
.lp-cols, .lp-row{display:grid;gap:6px;
  grid-template-columns:37px minmax(0,.7fr) minmax(0,1.15fr) minmax(0,1.5fr);
  padding:4px 0;border-top:1px solid var(--line);}
.lp-trial, .lp-event{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lp-detail{overflow-wrap:anywhere;}
.lp-cols{color:var(--dim);font-size:10px;text-transform:uppercase;
  letter-spacing:.06em;border-top:none;}
.lp-t{color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap;}
.lp-trial{color:var(--dim);}
.lp-event{font-weight:600;}
.lp-detail{color:var(--dim);}
.lp-row.hard .lp-event{color:var(--hard);font-weight:700;}
.lp-row.lp-off{display:none;}

/* The rail filters the STREAM only — hidden on the raw-JSON view (that view
 * IS the whole payload, so a column of buttons that do nothing would just
 * be noise). Driven by live-pane.js's stream/json pill handler stamping
 * data-view on .lp-body. The grid MUST collapse to one column alongside the
 * display:none — a hidden grid item stops being a grid item at all, so
 * .lp-views would otherwise auto-place into the 68px rail track and squeeze
 * the JSON  down to rail width. */
.lp-body[data-view="json"]{grid-template-columns:minmax(0,1fr);}
.lp-body[data-view="json"] .lp-trials{display:none;}

/* Roomier rail wherever the card is wide (today's four-column fractions
 * restored there): step 9's promoted pane, and results-mode's full-width
 * aside reflow (.results-mode .main-col below — the pane isn't .promoted
 * there, so both selectors are spelled out). */
/* 156px in the promoted pane, 172px at the report: both fit a wrapped heading,
 * but step 9's pane only has the main column's width to spend, and the 16px
 * buys .lp-detail back the room the event column's floor needs. */
[data-role="live-pane"].promoted .lp-body{grid-template-columns:156px minmax(0,1fr);}
.results-mode [data-role="live-pane"] .lp-body{grid-template-columns:172px minmax(0,1fr);}
[data-role="live-pane"].promoted .lp-trials{max-height:560px;} /* tracks .promoted .lp-stream */
[data-role="live-pane"].promoted .lp-trial-tab,
.results-mode [data-role="live-pane"] .lp-trial-tab{display:block;font-size:12px;
  -webkit-line-clamp:none;max-height:none;} /* room for the whole heading */
[data-role="live-pane"].promoted .lp-stream,
.results-mode [data-role="live-pane"] .lp-stream{font-size:11.8px;}
/* Wide-state columns are floored, not purely fractional: the event column has
 * to hold `synthetic_insertion` (135px at 11.8px mono) and the trial column
 * `act1-autotype` (92px), and neither has a break opportunity — an underscore
 * isn't one — so an fr track too narrow for them spills its text into the
 * next column instead of wrapping. Sized so .lp-detail keeps the 238px it
 * had at 1fr/1fr/2fr; when the pane is narrower than this needs, the floors
 * hold and detail absorbs it, which is the right column to squeeze since it's
 * the only one that wraps. */
[data-role="live-pane"].promoted .lp-cols, [data-role="live-pane"].promoted .lp-row,
.results-mode [data-role="live-pane"] .lp-cols, .results-mode [data-role="live-pane"] .lp-row{
  grid-template-columns:44px minmax(90px,.8fr) minmax(140px,1.19fr) minmax(0,2fr);gap:8px;}
/* Wide states wrap these two instead of truncating them (a violation row's
 * "violation: not_fullscreen" reads far better over two lines than clipped),
 * but keep overflow hidden as the hard backstop: the column floors above are
 * sized for this mono face, and a wider one must break the word rather than
 * paint it over .lp-detail. */
[data-role="live-pane"].promoted .lp-trial, [data-role="live-pane"].promoted .lp-event,
.results-mode [data-role="live-pane"] .lp-trial, .results-mode [data-role="live-pane"] .lp-event{
  white-space:normal;text-overflow:clip;overflow-wrap:break-word;overflow:hidden;}

.lp-json{background:none;color:var(--ink);margin:0;padding:0;border-radius:0;
  max-height:290px;overflow:auto;font:11.8px/1.6 var(--mono);}

.lp-caption{margin:10px 0 0;font-size:11.5px;color:var(--dim);line-height:1.5;}
.lp-caption code{font-family:var(--mono);font-size:11px;}

/* ---------------------------------------------------------------------
 * Downloads step (13) — file cards + "show as text" fallback dialog.
 * --------------------------------------------------------------------- */
.files{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px;}
.file{display:flex;flex-direction:column;gap:10px;min-width:190px;
  background:var(--panel);box-shadow:var(--shadow);border-radius:6px;padding:10px 14px;
  font:13px/1.4 var(--mono);}
.file-info{display:flex;flex-direction:column;gap:2px;}
.file small{display:block;color:var(--dim);font-size:11px;}
.file .file-desc{display:block;color:var(--dim);font-size:11px;}
.file .file-actions{display:flex;gap:12px;align-items:center;}
.file .file-actions a{color:var(--live);font-size:12px;}
.file .file-caveat{color:var(--dim);font-size:11px;font-style:italic;
  max-width:220px;margin:0;}

.filetext-dialog{max-width:640px;width:90vw;padding:18px;border:none;
  border-radius:8px;box-shadow:var(--shadow);background:var(--panel);color:var(--ink);}
.filetext-dialog::backdrop{background:rgba(27,35,44,.4);}
.filetext-dialog h3{margin:0 0 10px;font:600 13px/1 var(--mono);}
.filetext-dialog pre{max-height:60vh;overflow:auto;user-select:text;margin:0 0 14px;}

/* ---------------------------------------------------------------------
 * Step 11 scoring panel (walkthrough item 7) — per-signal weight editors.
 * Wrapped in .task for the recessed background; config-as-source snippets
 * below it inherit the global `pre`/.code-tabs treatment unchanged.
 * --------------------------------------------------------------------- */
.weight-editors{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 10px;}
.weight-editors label{font-size:13px;display:flex;align-items:center;gap:6px;}
.weight-editors input[type="number"]{width:56px;}

/* Replicate-locally walkthrough (step 13) — numbered sections. .replicate
 * pre inherits the global `pre` rule above (background/padding/radius/
 * overflow/margin) unchanged — nothing extra needed there. */
.replicate h3{font-size:15px;font-weight:600;margin:18px 0 8px;}
.replicate h3:first-child{margin-top:0;}

/* ---------------------------------------------------------------------
 * Results screen (step 12) — full-width, instruments retired.
 * --------------------------------------------------------------------- */
.results-mode .main-col{grid-column:1 / -1;}
/* The lamp rail is hidden for good from this step on (demo.js), so the
 * instrument column holds nothing but the live-record card — let it span the
 * whole grid rather than sit in the 1fr track, matching the report frame
 * above it and giving the record's own columns room to breathe. */
.results-mode .instrument{grid-column:1 / -1;}
.yourreport{border-left:3px solid var(--live);padding:2px 0 2px 16px;margin:0 0 18px;}
.yourreport h3{font-size:20px;margin:0 0 8px;}
.yourreport li{margin:0 0 8px;max-width:60ch;}
.yourreport .t-hard{color:var(--hard);font-weight:700;}
.yourreport .t-soft{color:var(--soft);font-weight:700;}
.yourreport .t-clean{color:var(--clean);font-weight:700;}
.results-frame{width:100%;min-height:900px;border:0;border-radius:8px;
  box-shadow:var(--shadow);background:var(--panel);}

/* Session-replay viewer-host card (item 12) — a sibling of .results-frame,
 * not inside it. The INNER replay CSS (.replay-*) lives inside the host
 * iframe's own Blob document (demo/replay-host.js), not here — this only
 * styles the outer card + frame chrome from the results screen's side. */
.replay-host-card{background:var(--panel);border-radius:8px;box-shadow:var(--shadow);
  padding:20px 24px;margin:18px 0 0;}
.replay-host-card h3{font-size:15px;font-weight:600;margin:0 0 6px;}
.replay-host-card .hint{margin:0 0 14px;}
.replay-host-frame{width:100%;min-height:520px;border:0;border-radius:6px;}