/* ICP Builder wizard — design-system tokens, light surface. */
.wiz-muted { color:var(--ds-ink-secondary); font-size:var(--ds-body-sm); margin:0; }
.wiz-callout { background:var(--ds-bg-accent-tint); border:1px solid var(--ds-border);
               border-radius:var(--ds-radius); padding:var(--ds-space-3);
               font-size:var(--ds-body-sm); }
.wiz-callout strong { color:var(--ds-text-accent); }
.wiz-label { font-size:var(--ds-label-1); font-weight:600; color:var(--ds-ink);
             text-transform:uppercase; letter-spacing:.04em; margin-top:var(--ds-space-2); }
.wiz-actions { display:flex; justify-content:flex-end; gap:var(--ds-space-2);
               margin-top:var(--ds-space-4); }
.wiz-close { background:none; border:none; font-size:1rem; cursor:pointer;
             color:var(--ds-ink-muted); }
.wiz-status { font-size:var(--ds-body-sm); color:var(--ds-ink-muted); min-height:1.2em; }
/* No top margin of its own: every indeterminate bar in the wizard is either the
   first child of a sheet body or the first child of an .ex section, and each of
   those already owns the space above it. */
.progress-bar.is-indeterminate .progress-bar-fill { width:34%; animation:wiz-sweep 1.3s ease-in-out infinite; }
@keyframes wiz-sweep { 0% { transform:translateX(-120%); } 100% { transform:translateX(300%); } }
.wiz-ok { color:var(--ds-text-positive); }
.wiz-warn { color:var(--ds-text-negative); }
/* Scroll container only — the table itself is the shared .table. The sticky
   header it needs is in design-system.css's .table th. */
.wiz-table-wrap { max-height:60vh; overflow-y:auto; overflow-x:auto; }
.wiz-rank { color:var(--ds-ink-muted); }
.wiz-co { font-weight:600; color:var(--ds-ink); }
/* A placeholder, not an assertion — violet is reserved for the draft-correct
   beat and the current-step marker, and this column is identical on every row. */
.wiz-collecting { color:var(--ds-ink-muted); font-style:italic; white-space:nowrap; }
.wiz-assets-add { display:flex; flex-wrap:wrap; align-items:center; gap:var(--ds-space-3);
                  font-size:var(--ds-body-sm); }
.wiz-assets-add input[type=file] { position:absolute; width:1px; height:1px; opacity:0;
                                   overflow:hidden; clip:rect(0 0 0 0); }

/* Recommendation panel (playbook step) — suggest-only, design-system tokens. */
.wiz-rec { background:var(--ds-bg-accent-tint); border:1px solid var(--ds-border);
           border-radius:var(--ds-radius); padding:var(--ds-space-3);
           display:flex; flex-direction:column; gap:var(--ds-space-1); }
.wiz-rec-head { display:flex; align-items:baseline; gap:var(--ds-space-2);
                flex-wrap:wrap; margin-bottom:var(--ds-space-2); }
.wiz-rec-title { font-size:var(--ds-label-1); font-weight:600; color:var(--ds-text-accent);
                 text-transform:uppercase; letter-spacing:.04em; }
.wiz-rec-sub { font-size:var(--ds-body-sm); color:var(--ds-ink-secondary); margin:0; }
.wiz-rec-row { display:flex; gap:var(--ds-space-3); padding:var(--ds-space-3) 0; }
.wiz-rec-row + .wiz-rec-row { border-top:1px solid var(--ds-border); }
.wiz-rec-field { flex:none; width:6.5rem; font-size:var(--ds-label-2); font-weight:600;
                 text-transform:uppercase; letter-spacing:.04em; color:var(--ds-ink-muted); }
.wiz-rec-pick { font-size:var(--ds-body-sm); font-weight:600; color:var(--ds-ink); }
.wiz-rec-why { font-size:var(--ds-body-sm); color:var(--ds-ink-muted); margin:2px 0 0; }
.wiz-rec-actions { display:flex; justify-content:flex-end; gap:var(--ds-space-2);
                   border-top:1px solid var(--ds-border); padding-top:var(--ds-space-3);
                   margin-top:var(--ds-space-4); }

/* verticals multi-select picklist (ICP wizard playbook step) */
.wiz-pl-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--ds-space-2);}
.wiz-pl-head .wiz-label{margin:0;}
.wiz-pl-count{font-size:var(--ds-caption);color:var(--ds-text-accent);font-weight:600;}
.wiz-picklist{border:1px solid var(--ds-border-strong);border-radius:10px;max-height:44vh;overflow-y:auto;background:var(--ds-bg);}
.wiz-pl-item{border-bottom:1px solid var(--ds-border);}
.wiz-pl-item:last-child{border-bottom:none;}
.wiz-vert{display:flex;align-items:center;gap:var(--ds-space-3);padding:9px 14px;cursor:pointer;}
.wiz-vert:hover{background:var(--ds-bg-hover);}
.wiz-vert input,.wiz-pl-sub input{width:16px;height:16px;accent-color:var(--ds-accent);flex:none;cursor:pointer;margin:0;}
.wiz-vert-name{flex:1;font-size:var(--ds-body-sm);font-weight:600;color:var(--ds-ink);}
.wiz-vert-tag{font-size:10px;font-weight:600;color:var(--ds-text-accent);background:var(--ds-bg-accent-tint);border:1px solid var(--ds-border);border-radius:999px;padding:1px 7px;margin-right:var(--ds-space-2);}
.wiz-carrot{background:none;border:none;cursor:pointer;color:var(--ds-ink-muted);font-size:12px;line-height:1;padding:4px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:6px;}
.wiz-carrot:hover{background:var(--ds-bg-hover);color:var(--ds-ink);}
.wiz-pl-sub{display:none;padding:2px 14px 12px 34px;}
.wiz-pl-item.is-open .wiz-pl-sub{display:block;}
.wiz-pl-item.is-open .wiz-carrot{transform:rotate(90deg);}
.wiz-pl-sub .wiz-sub-row{display:flex;align-items:center;gap:var(--ds-space-2);padding:4px 0;}
.wiz-pl-sub label{font-size:var(--ds-body-sm);color:var(--ds-ink-secondary);}
.wiz-hint{font-size:var(--ds-caption);color:var(--ds-ink-muted);margin:var(--ds-space-2) 0 0;}

/* ── v2 conversation step (mockup Screen A) ──────────────────────────────
   Single-radius-12 discipline (var(--ds-radius-lg)) with the 4px speech-tail
   corners as the documented exception. Violet is reserved for the draft-correct
   assertion + the current-theme rail marker. 44px min interactive targets.
   Everything is scoped under .conv so the modal never collides with page-level
   generic .row / .rail / .col rules (index.css ships those un-namespaced). */
.conv{ display:flex; flex-direction:column; max-height:min(88vh, 820px); }

.conv-bar{ flex:none; display:flex; align-items:center; gap:var(--ds-space-4); flex-wrap:wrap;
           padding:14px 22px; }
.conv-grow{ flex:1; min-width:0; }
.conv-grow h1{ font-size:16px; font-weight:650; margin:0; line-height:1.3; }
.conv-sub{ font-size:12.5px; color:var(--ds-ink-muted); margin:2px 0 0; line-height:1.4; }
.conv-icon.wiz-close{ width:44px; height:44px; flex:none; display:inline-flex; align-items:center;
                      justify-content:center; border-radius:var(--ds-radius-lg);
                      color:var(--ds-ink-muted); font-size:22px; line-height:1; }
.conv-icon.wiz-close:hover{ background:var(--ds-bg-hover); color:var(--ds-ink); }
.conv-icon.wiz-close:focus-visible{ outline:2px solid var(--ds-accent); outline-offset:2px; }

.conv .crawl-chip{ display:inline-flex; align-items:center; gap:var(--ds-space-2);
                   background:var(--ds-bg-subtle); border:1px solid var(--ds-border);
                   border-radius:var(--ds-pill); padding:5px 12px;
                   font-size:var(--ds-body-xs); color:var(--ds-ink-secondary); flex:none; }
.conv .crawl-chip b{ color:var(--ds-ink); font-weight:600; }
.conv .crawl-chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--ds-border-positive); flex:none; }

/* 7-theme top stepper — replaces the 180px left rail so the chat gets the full
   modal width (option-1 chat redesign). */
.conv .steps{ flex:none; display:flex; gap:2px; padding:16px 22px 0;
              border-bottom:1px solid var(--ds-border); }
/* Geometry mirrors .ws-seg exactly (see the 6-segment spine below): same 24px
   marker, same 11px label, and a connector that spans marker N's right edge to
   marker N+1's left edge so neither end hangs in mid-air. The two steppers are
   the same object at different lengths — they must not drift apart.
   Named `.cv-seg`, not `.st`. These items carried `st` until 2026-09-15, which
   is design-system.css's status pill — `border-radius:var(--ds-pill)` plus a
   1px border. Nothing here declared border or radius, so the shared pill won by
   default and drew a capsule around every stage; no rule in this file looked
   wrong. Same collision as `.composer` (#448), fixed the same way. */
.cv-seg{ flex:1 1 0; min-width:0; position:relative; padding:0 12px 12px 0; }
/* A bare numeral. The 24px box survives only as the connector's mask — its
   --ds-bg fill breaks the line behind the digit, and ::before still anchors to
   left:24px. State rides on the numeral's colour, not on a filled disc. */
.cv-seg .n{ width:24px; height:24px; display:inline-flex; align-items:center;
              justify-content:center; font-size:11px; font-weight:700;
              background:var(--ds-bg); color:var(--ds-ink-muted);
              position:relative; z-index:1; }
.cv-seg::before{ content:''; position:absolute; top:12px; left:24px; right:0; height:1.5px;
                   background:var(--ds-border-strong); z-index:0; }
.cv-seg:last-child::before{ display:none; }
.cv-seg .lab{ font-size:11px; font-weight:600; letter-spacing:.01em; color:var(--ds-ink-muted);
                margin-top:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cv-seg.done .n{ color:var(--ds-ink); }
.cv-seg.done .lab{ color:var(--ds-ink-secondary); }
.cv-seg.done::before{ background:var(--ds-ink); }
.cv-seg.cur .n{ color:var(--ds-accent); }
.cv-seg.cur .lab{ color:var(--ds-ink); font-weight:700; }

/* chat column: flat full-width messages (no SMS bubbles), 16px prose */
.conv .chat{ flex:1 1 auto; overflow-y:auto; min-height:0; padding:16px 22px 8px; }
/* The column sits on .chat's own 22px gutter rather than centring inside it.
   Centring opened two more left edges on this one step — messages at 146px and
   the answer box at 168px — while the bar, the stepper and all six sheet steps
   hold 22px. The measure is still capped below, so prose keeps its line length;
   the column just stops floating. */
.conv .chat-in{ max-width:760px; margin:0; padding-bottom:6px; }
.conv .chat .intro{ font-size:13px; color:var(--ds-ink-secondary); line-height:1.55;
                    max-width:66ch; margin:0 0 6px; }
.conv .who{ font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
            color:var(--ds-ink-muted); margin:18px 0 7px; }
.conv .who.bot{ color:var(--ds-accent); }
.conv .who.you{ text-align:right; }
.conv .msg{ font-size:16px; line-height:1.62; color:var(--ds-ink); max-width:66ch;
            margin:0 0 14px; white-space:pre-wrap; overflow-wrap:break-word; }
.conv .msg.you{ margin:0 0 16px auto; background:var(--ds-bg-accent-tint); color:var(--ds-text-accent);
                border:1px solid color-mix(in srgb, var(--ds-accent) 22%, transparent); padding:12px 16px;
                /* speech bubble: the square corner is its tail, kept deliberately */
                border-radius:var(--ds-radius) var(--ds-radius) 4px var(--ds-radius); max-width:46ch; font-size:15px;
                line-height:1.56; width:fit-content; }

/* A turn arriving. The sent bubble and the reply rise in rather than snapping
   into place — a fast reply reads as jarring without it. Only rows past
   state.renderedLen carry .conv-in, so the full re-render each turn does not
   replay the backlog's entrance. */
@keyframes conv-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.conv .msg.conv-in,
.conv .proposal.conv-in{ animation:conv-in .26s cubic-bezier(.22,.61,.36,1) both; }

/* In-flight turn: the reply has not landed yet. */
.conv .msg.conv-thinking{ display:flex; align-items:center; gap:9px;
                          color:var(--ds-ink-muted); font-size:14px; }

/* draft-accept beat = a dedicated proposal card with one primary + one ghost
   action (option-1 mock), replacing the old .assert underline link. */
.conv .proposal{ margin:4px 0 6px; border:1px solid color-mix(in srgb, var(--ds-accent) 25%, transparent);
                 background:linear-gradient(180deg, var(--ds-bg-accent-tint),
                   color-mix(in srgb, var(--ds-accent) 8%, var(--ds-bg)));
                 border-radius:var(--ds-radius); padding:18px 20px 16px; }
.conv .proposal .prop-tag{ display:flex; align-items:center; gap:8px; font-size:10px; font-weight:800;
                      letter-spacing:.08em; text-transform:uppercase; color:var(--ds-accent);
                      margin:0 0 10px; }
.conv .proposal .prop-ico{ width:15px; height:15px; border-radius:5px; background:var(--ds-accent);
                           color:var(--ds-ink-inverse); font-size:10px; display:inline-flex; align-items:center;
                           justify-content:center; }
.conv .proposal .claim{ font-size:16px; line-height:1.6; color:var(--ds-ink); margin:0; }
.conv .proposal .invite{ font-size:12.5px; color:var(--ds-ink-secondary); margin:11px 0 14px;
                         line-height:1.5; }
.conv .proposal .acts{ display:flex; gap:10px; flex-wrap:wrap; }

/* composer: bordered field, auto-growing textarea (1 row up to ~6, JS-set).
   The three box properties below are defensive, not decoration. Until
   2026-09-15 index.css shipped an un-namespaced `.composer` (the Daylight
   composer modal, since renamed `.cm-composer`), which index.html loads
   alongside this file. It set display:flex, a min(94vw,1060px) width and
   overflow:hidden; none were set here, so all three landed on this unrelated
   element and collapsed the answer field to 236px with the hint beside it.
   The root is fixed, but the hazard is not gone: campaigns.css still ships a
   bare `.composer` for campaigns.html. This element owns its box, so a
   generic rule on any page can never take it again.
   No horizontal padding of its own: .chat already supplies the 22px gutter, and
   a second 22px here would set the answer box 22px right of every message and
   the title above it. */
.conv .composer{ flex:none; border-top:1px solid var(--ds-border); padding:12px 0 14px;
                 background:var(--ds-bg);
                 display:block; width:auto; overflow:visible; }
.conv .composer .field{ display:flex; align-items:flex-end; gap:8px;
                        border:1.5px solid var(--ds-border-strong); border-radius:14px;
                        padding:8px 8px 8px 16px; background:var(--ds-bg);
                        transition:border-color .12s, box-shadow .12s; }
.conv .composer .field:focus-within{ border-color:var(--ds-accent);
                                     box-shadow:0 0 0 3.5px color-mix(in srgb, var(--ds-accent) 13%, transparent); }
.conv .composer .ta{ flex:1; border:0; outline:0; resize:none; font-family:var(--ds-font-sans);
                     font-size:15px; line-height:1.5; min-height:44px; max-height:132px;
                     color:var(--ds-ink); background:transparent; padding:9px 0 1px; }
.conv .composer .ta::placeholder{ color:var(--ds-ink-muted); }
.conv .composer .ta:disabled{ background:var(--ds-bg-subtle); color:var(--ds-ink-muted); cursor:not-allowed; }
.conv .composer .send{ flex:none; width:38px; height:38px; border-radius:11px; border:0;
                       background:var(--ds-ink); color:var(--ds-ink-inverse); cursor:pointer;
                       display:inline-flex; align-items:center; justify-content:center;
                       font-size:17px; line-height:1; }
.conv .composer .send:hover{ background:var(--ds-action-primary-hover); }
.conv .composer .send:disabled{ background:var(--ds-action-primary-disabled);
                                color:var(--ds-ink-muted); cursor:not-allowed; }
.conv .composer .send:focus-visible{ outline:2px solid var(--ds-accent); outline-offset:2px; }
.conv .hint{ font-size:11px; color:var(--ds-ink-muted); margin:8px 2px 0;
             display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.conv .hint kbd{ font-family:var(--ds-font-sans); font-size:9.5px; border:1px solid var(--ds-border);
                 border-bottom-width:2px; border-radius:4px; padding:0 4px; background:var(--ds-bg);
                 color:var(--ds-ink-secondary); }

/* Responsive: single-column already (stepper is full-width); tighten chrome. */
@media (max-width:760px){
  .conv-bar{ padding:12px 16px; }
  .conv .steps{ padding:14px 16px 0; }
  .cv-seg .lab{ display:none; }   /* dots only — theme names live in the chat intro */
  .conv .chat{ padding:14px 16px 6px; }
  .conv .composer{ padding:10px 0 12px; }   /* same reason: .chat holds the gutter */
}

/* ── v2 conversation done-state CTA (Task 8 handoff) ──────────────────
   Replaces the composer once session.done is true: one ink primary button
   that POSTs /chat/finish and moves into the synthesis review. */
.conv .conv-done{ display:flex; flex-direction:column; align-items:flex-start;
  gap:var(--ds-space-3); border-top:1px solid var(--ds-border); padding-top:16px;
  margin-top:8px; }
.conv .conv-done .conv-done-txt{ font-size:var(--ds-caption); color:var(--ds-ink-secondary);
  line-height:1.5; margin:0; }
.conv .conv-done .conv-finish{ background:var(--ds-ink); color:var(--ds-ink-inverse);
  border:none; border-radius:var(--ds-radius-lg); min-height:44px; padding:0 22px;
  font-family:var(--ds-font-sans); font-size:var(--ds-body-sm); font-weight:600;
  cursor:pointer; }
.conv .conv-done .conv-finish:hover{ background:var(--ds-action-primary-hover); }
.conv .conv-done .conv-finish:disabled{ background:var(--ds-action-primary-disabled);
  color:var(--ds-ink-muted); cursor:not-allowed; }
.conv .conv-done .conv-finish:focus-visible{ outline:2px solid var(--ds-accent); outline-offset:2px; }

/* ── v2 exemplar proof step (mockup Screen B) ─────────────────────────
   Same single-radius-12 discipline as the conversation step. Everything is
   scoped under .exemplars so page-level generic .card/.body/.controls rules
   never bleed in (index.css + design-system ship .card un-namespaced). */

/* No padding of its own: .ex sits inside .ws-inner, and its old 24px pushed the
   exemplar step's content 46px off the sheet gutter every other step uses. */
.ex{ padding:0; }
.ex-top{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--ds-space-4); flex-wrap:wrap; }
.ex h2{ font-size:var(--ds-body-xl); font-weight:700; letter-spacing:-.01em;
  margin:0; line-height:1.25; }
.ex .lede{ font-size:15px; color:var(--ds-ink-secondary); line-height:1.5;
  max-width:60ch; margin:8px 0 var(--ds-space-3); }
.ex .count{ font-size:var(--ds-caption); color:var(--ds-ink-muted); margin:0 0 var(--ds-space-4); }
.ex .ex-search-again{ background:var(--ds-bg); border-color:var(--ds-border-strong);
  color:var(--ds-ink); flex:none; }
.ex .ex-search-again:hover{ background:var(--ds-bg-hover); }
.ex .ex-wait-count{ margin-top:2px; }
.ex .ex-wait-actions{ margin-top:var(--ds-space-3); }
.ex .ex-retry-now{ background:var(--ds-bg); border-color:var(--ds-border-strong);
  color:var(--ds-ink); }
.ex .ex-retry-now:hover{ background:var(--ds-bg-hover); }

.ex .ex-cards{ display:flex; flex-direction:column; gap:var(--ds-space-3); }
/* card internals, addressed through the page's own wrapper so the shared
   .card rule stays the only thing that styles a card. */
.ex-cards > *{ display:flex; gap:var(--ds-space-4); align-items:flex-start; }
.exemplars .mono{ width:44px; height:44px; border-radius:var(--ds-radius-lg);
  background:var(--ds-ink); color:var(--ds-ink-inverse); flex:none;
  display:flex; align-items:center; justify-content:center; font-weight:700;
  font-size:17px; }
.exemplars .body{ flex:1; min-width:0; max-width:none; margin:0; }
.exemplars .nm{ font-size:var(--ds-body-md); font-weight:600; color:var(--ds-ink); }
.exemplars .fact{ font-size:var(--ds-body-xs); color:var(--ds-ink-muted); margin:2px 0 6px; }
.exemplars .why{ font-size:15px; line-height:1.45; color:var(--ds-ink-secondary);
  margin:0; max-width:68ch; }
.exemplars .why b{ color:var(--ds-ink); font-weight:600; }
.exemplars .prov{ font-size:var(--ds-body-xs); color:var(--ds-ink-muted); margin-top:var(--ds-space-2); }
.exemplars .prov a{ color:var(--ds-ink-secondary); text-decoration:underline;
  text-underline-offset:2px; word-break:break-all; }
.exemplars .controls{ display:flex; flex-direction:column; align-items:flex-end;
  gap:2px; flex:none; }
.exemplars .keep{ width:44px; height:44px; border-radius:var(--ds-radius-lg);
  border:1.5px solid var(--ds-border-strong); background:var(--ds-bg); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:17px;
  color:var(--ds-ink-secondary); line-height:1; padding:0; }
.exemplars .keep[aria-pressed="true"]{ background:var(--ds-ink); border-color:var(--ds-ink);
  color:var(--ds-ink-inverse); }
.exemplars .keep:hover{ border-color:var(--ds-ink); }
.exemplars .keep:focus-visible{ outline:2px solid var(--ds-accent); outline-offset:2px; }
.exemplars .ctl-label{ font-size:var(--ds-label-3); color:var(--ds-ink-muted); }
.exemplars .undo{ background:none; border:none; color:var(--ds-ink-secondary);
  text-decoration:underline; text-underline-offset:3px; font-family:var(--ds-font-sans);
  font-size:var(--ds-body-xs); cursor:pointer; padding:8px 4px; min-height:44px; }
.exemplars .undo:hover{ color:var(--ds-ink); }
.exemplars .undo:focus-visible{ outline:2px solid var(--ds-accent); outline-offset:2px;
  border-radius:4px; }
.exemplars .add{ display:flex; gap:var(--ds-space-3); margin:var(--ds-space-4) 0
  var(--ds-space-3); padding:12px 16px; border:1.5px dashed var(--ds-border-strong);
  border-radius:var(--ds-radius-lg); align-items:center; flex-wrap:wrap; }
.exemplars .add .addlbl{ color:var(--ds-ink-secondary); font-size:var(--ds-caption);
  white-space:nowrap; }
.exemplars .add input{ flex:1; border:none; font-family:var(--ds-font-sans);
  font-size:15px; color:var(--ds-ink); background:transparent; min-height:40px;
  min-width:160px; padding:0; }
.exemplars .add input:focus{ outline:none; }
.exemplars .add input::placeholder{ color:var(--ds-ink-muted); }
.exemplars .add .ex-add-btn{ background:var(--ds-bg); border:1px solid var(--ds-ink);
  color:var(--ds-ink); border-radius:var(--ds-radius-lg); font-family:var(--ds-font-sans);
  font-size:var(--ds-caption); font-weight:600; padding:10px 16px; min-height:44px;
  cursor:pointer; white-space:nowrap; }
.exemplars .add .ex-add-btn:hover{ background:var(--ds-bg-hover); }
.exemplars .add .ex-add-btn:focus-visible{ outline:2px solid var(--ds-accent); outline-offset:2px; }

/* Responsive: cards already flow full-width (the modal is the container);
   at <=760px the footer buttons stack and the padding tightens. */
@media (max-width:760px){
  .ex{ padding:20px 16px; }
  .ex-top .ex-search-again{ width:100%; }
}

/* ── unified wide-sheet (wizard redesign 2026-09-08) ──────────────────
   Every non-chat wizard step opens as a .wiz-sheet: 1060px modal (same as
   .conv), full-bleed bar, slim 6-segment spine, inner-measure body, pinned
   foot. Conv internals stay untouched — this mirrors its chrome.           */
.wiz-sheet{ display:flex; flex-direction:column; max-height:min(88vh, 820px); }

.wiz-sheet > .ws-bar{ flex:none; display:flex; align-items:center; gap:var(--ds-space-4);
  flex-wrap:wrap; padding:14px 22px; }
.ws-grow{ flex:1; min-width:0; }
.wiz-sheet > .ws-bar h1{ font-size:19px; font-weight:650; letter-spacing:-.011em;
  margin:0; line-height:1.25; }
.ws-sub{ font-size:13.5px; color:var(--ds-ink-secondary); margin:4px 0 0;
  line-height:1.45; max-width:68ch; }

/* slim 6-segment overall spine (dots + labels; conversation keeps its own
   theme stepper instead). */
.wiz-sheet > .ws-progress{ flex:none; display:flex; padding:16px 22px 0;
  border-bottom:1px solid var(--ds-border); }
/* Label sits under its numeral, never beside it: the connector runs at the
   markers' centre line (y=12px) and would otherwise strike through the text. */
.ws-seg{ flex:1 1 0; min-width:0; display:flex; flex-direction:column;
  align-items:flex-start; padding:0 12px 12px 0; position:relative;
  font-size:10px; font-weight:600; letter-spacing:.01em;
  color:var(--ds-ink-muted); white-space:nowrap; }
/* connector spans marker N's right edge to marker N+1's left edge, so each end
   lands on a numeral and the last segment draws nothing. */
.ws-seg::before{ content:''; position:absolute; top:12px; left:24px; right:0;
  height:1.5px; background:var(--ds-border-strong); z-index:0; }
.ws-seg:last-child::before{ display:none; }
/* Bare numeral, same as .cv-seg .n: the box masks the connector, the colour
   carries the state, and no ring is drawn. */
.ws-seg .n{ width:24px; height:24px; flex:none; display:inline-flex;
  align-items:center; justify-content:center; font-size:11px; font-weight:700;
  background:var(--ds-bg); color:var(--ds-ink-muted);
  position:relative; z-index:1; }
.ws-seg .lab{ margin-top:9px; font-size:11px; }
.ws-seg.done{ color:var(--ds-ink-secondary); }
.ws-seg.done .n{ color:var(--ds-ink); }
.ws-seg.done::before{ background:var(--ds-ink); }
.ws-seg.cur{ color:var(--ds-ink); font-weight:700; }
.ws-seg.cur .n{ color:var(--ds-accent); }

.wiz-sheet > .ws-body{ flex:1 1 auto; overflow-y:auto; min-height:0;
  padding:24px 22px 8px; }
/* One measure for the whole sheet. The body used to cap at 880px and centre
   inside a 1060px modal, which inset it 68px from the bar, the stepper and the
   foot — three left edges on one screen. Body now spans the sheet and shares
   the chrome's 22px gutter.
   Blocks span with it: a callout or an intro paragraph narrower than the field
   under it reads as a floating card, not a block of the same form. The only
   thing still measured is the recommendation panel's reason line, which sits
   inside a row that already has its own label column. */
.wiz-sheet > .ws-body > .ws-inner{ display:flex; flex-direction:column; }
.wiz-sheet .wiz-rec-why{ max-width:68ch; }
/* Rhythm by margins, not a flat gap: a label belongs to the field under it, so
   the pair reads as one block and the air goes *between* blocks. */
.wiz-sheet > .ws-body > .ws-inner > *{ margin-top:0; }
.wiz-sheet > .ws-body > .ws-inner > * + *{ margin-top:var(--ds-space-4); }
.wiz-sheet > .ws-body > .ws-inner > .wiz-label{ margin-top:var(--ds-space-5); }
.wiz-sheet > .ws-body > .ws-inner > .wiz-label + *{ margin-top:6px; }
/* short sheets (welcome, done) center their copy vertically. */
.wiz-sheet[data-step="welcome"] > .ws-body,
.wiz-sheet[data-step="done"] > .ws-body{ display:flex; flex-direction:column;
  justify-content:center; }

/* The sheet's foot carries .modal-foot for the shared footer; .ws-foot is only
   the sheet's own chrome (edge padding and ground) layered on it. Page CSS must
   not name a .modal-* selector, hence the modifier. */
.wiz-sheet > .ws-foot{ flex:none; flex-wrap:wrap; gap:var(--ds-space-3);
  padding:16px 22px; background:var(--ds-bg); margin-top:0; }
.wiz-sheet > .ws-foot .wiz-actions{ margin:0; }

/* one button language across every sheet (mirrors .conv .btn) */
.wiz-sheet .ex-confirm{ min-width:230px; }

/* sentence-case form labels + ink callout emphasis inside sheets (violet is
   reserved for the assertion + current marker, not chrome copy). */
.wiz-sheet .wiz-label{ text-transform:none; letter-spacing:0; font-size:13px;
  font-weight:600; color:var(--ds-ink); margin-top:0; }
.wiz-sheet .wiz-callout strong{ color:var(--ds-ink); }

/* Fields sit on the full sheet width now, so they carry their own weight: 15px
   against the 12.5px they had, and a taller box that does not read as a slot. */
.wiz-sheet .input, .wiz-sheet .textarea{ font-size:15px; padding:11px 14px; }
.wiz-sheet .select{ font-size:15px; padding:11px 2.25rem 11px 14px; }
.wiz-sheet .textarea{ min-height:7rem; }
.wiz-sheet .wiz-callout{ padding:14px 16px; line-height:1.55; }

/* Working state — the lead-up bars on the crawl, advisor, exemplar-search and
   save steps. It was a 4px grey hairline under a 12.5px grey line: at that
   weight the only feedback a 30-second wait gave was easy to miss entirely.
   The bar leads and the line reports, together, on the prose measure. */
.wiz-sheet .progress-bar{ height:6px; background:var(--ds-pebble); max-width:68ch; }
.wiz-sheet .progress-bar[hidden]{ display:none; }
.wiz-sheet .progress-bar-fill{ background:var(--ds-accent); }
.wiz-sheet .wiz-status{ min-height:0; max-width:68ch; }
.wiz-sheet .progress-bar + .wiz-status{ margin:10px 0 0; font-size:14.5px;
  color:var(--ds-ink-secondary); line-height:1.5; }
.wiz-sheet .wiz-status + .wiz-status{ margin:6px 0 0; }

@media (max-width:760px){
  .wiz-sheet > .ws-bar{ padding:12px 16px; }
  .wiz-sheet > .ws-progress{ padding:14px 16px 0; }
  .ws-seg .lab{ display:none; }              /* dots only */
  .wiz-sheet > .ws-body{ padding:16px 16px 6px; }
  .wiz-sheet > .ws-foot{ flex-direction:column; align-items:stretch; padding:12px 16px; }
  .wiz-sheet > .ws-foot .wiz-actions > *{ width:100%; }
}

@media (prefers-reduced-motion: reduce){
  .conv .msg.conv-in,
  .conv .proposal.conv-in{ animation:none; }
}