.wrap.narrow{max-width:var(--w-form);margin:0 auto;padding:0 20px}
.stitle{font-family:"Helvetica Neue",Helvetica,"Segoe UI",Roboto,sans-serif;font-size:24px;margin:18px 0 4px}
.card{background:var(--card);border:1px solid var(--border);border-radius:0;
  box-shadow:var(--shadow);padding:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
#cmhost .cm-editor{min-height:440px}
.stage .preview{--reserve-ar: 960 / 1004}   /* load-grace: default example's viewBox — see workspace.css */
/* size/weight only — the label colour rides --brand-on (#fff light, #121212 dark),
   never a hardcoded #fff: the dark brand is a light coral and white on it fails. */
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-on);font-weight:600;min-height:44px;padding:10px 22px}
.btn.primary:hover{color:var(--card);opacity:.92}
.btn:disabled{opacity:.45;cursor:default}
.btn.danger:hover{border-color:var(--err);color:var(--err)}
.method{color:var(--muted);font-size:12.5px}
.errline{color:var(--err);font-size:13px;margin:10px 0 0}
.statusline{color:var(--muted);font-size:13.5px;margin:14px 0 6px}
.statusline.ok{color:var(--st-done);font-size:15px;font-weight:600}
.statusline.err{color:var(--err)}
.headline{color:var(--accent-ink);font-size:14.5px;font-weight:600;margin:10px 0 0}
.headline:empty{display:none}
.workshop-state{margin:8px 0 12px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
/* Form / Sample reveal — the shared .segmented control (Swiss 6c); only the
   gap to the artefact below is gauge's own. */
.viewtoggle{margin-bottom:12px}
/* Gauge opens on the room artefact; this is the unmistakable route back to the
   authored questions, not an anonymous chevron borrowed from the generic rail. */
#workspace.collapsed .railtab{top:28px;left:0;min-width:118px;width:auto;padding:0 10px 0 14px;
  border:1px solid var(--border);background:var(--bg);font:700 10.5px/1 inherit;letter-spacing:.08em;text-transform:uppercase}
#workspace.collapsed .railtab::before{top:11px}
#workspace.collapsed .railtab::after{display:none}

/* ---- the form (participant + compose preview) ---- */
.formpreview{max-width:var(--w-form)}
.gform .q{background:var(--card);border:1px solid var(--border);border-radius:0;
  box-shadow:var(--shadow);padding:16px 18px;margin:0 0 14px}
.qtext{margin:0 0 12px;font-size:15.5px;font-weight:600}
.qnum{display:inline-block;min-width:22px;height:22px;border-radius:0;background:var(--track);
  color:var(--muted);font-size:12px;font-weight:600;text-align:center;line-height:22px;
  margin-right:10px}
.probrow{display:flex;align-items:center;gap:14px}
.probrow input[type=range]{flex:1;accent-color:var(--accent);--fill:50%;
  -webkit-appearance:none;appearance:none;height:6px;border-radius:0;
  background:linear-gradient(90deg,var(--accent) var(--fill),var(--track) var(--fill))}
.probrow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
  width:24px;height:24px;border-radius:50%;background:var(--accent);
  border:2.5px solid var(--card);box-shadow:var(--shadow)}
.probrow input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--accent);border:2.5px solid var(--card)}
/* numeric fields type like text fields — no native steppers glaring in dark */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.probout{font-variant-numeric:tabular-nums;font-weight:600;min-width:44px;text-align:right}
.anchors{display:flex;justify-content:space-between;color:var(--muted);font-size:11.5px;margin-top:4px}
.rangerow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rangerow input[type=number]{width:110px;flex:1 1 90px;min-width:0;max-width:150px;font:inherit;font-size:16px;color:var(--ink);
  background:var(--bg);border:1px solid var(--border);border-radius:0;padding:8px 10px;min-height:44px}
.rangerow .to{color:var(--muted);font-size:13px}
.rangerow .unit{color:var(--muted);font-size:13px}
/* chips allocation rows: 44px steppers, 16px input (no iOS zoom) */
.chiprow{display:flex;align-items:center;gap:10px;margin:8px 0}
.chiprow .chipopt{flex:1;min-width:0;font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.chipstep{min-width:44px;min-height:44px;border:1px solid var(--border);border-radius:0;
  background:var(--card);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;flex:none}
.chiprow input[type=number]{width:4.5rem;text-align:center;font:inherit;font-size:16px;color:var(--ink);
  background:var(--bg);border:1px solid var(--border);border-radius:0;padding:8px;min-height:44px}
.chipsleft{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.chipsleft.over{color:var(--err)}
.hint{color:var(--muted);font-size:12px;margin:8px 0 0}
.qerr{color:var(--err);font-size:12.5px;margin:8px 0 0}
.q.haserr{border-color:var(--err)}
.namefield label{font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:10px}
.namefield input{flex:1;font:inherit;font-size:16px;color:var(--ink);background:var(--bg);
  border:1px solid var(--border);border-radius:0;padding:8px 10px;min-height:44px}
.pintro{color:var(--muted);font-size:14px;margin:4px 0 18px;max-width:60ch}

/* ---- console ---- */
.sharebox{margin:14px 0}
.sharelabel{margin:0 0 8px;font-size:13.5px;font-weight:600}
.linkrow{display:flex;gap:8px}
.linkrow input{flex:1;font:12.5px ui-monospace,Menlo,monospace;color:var(--muted);
  background:var(--bg);border:1px solid var(--border);border-radius:0;padding:8px 10px}
.qcounts{margin:6px 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--muted)}
.qcounts li{padding:3px 0}
.qcounts b{color:var(--ink);font-variant-numeric:tabular-nums}
#coverlay,#presult{margin-top:18px}
#coverlay svg,#presult svg{max-width:100%;height:auto}
.result-receipt{margin:0;padding:14px 0 0;border-top:1px solid var(--border)}
.result-receipt .receipt-kicker{margin:0 0 8px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.result-receipt ol{margin:0;padding:0;list-style:none}
.result-receipt li{display:grid;grid-template-columns:minmax(11ch, .8fr) 2fr;gap:12px;padding:9px 0;border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent);font-size:13px}
.result-receipt li span{color:var(--muted)}
.discussion-queue{margin:14px 0 0;padding:10px 0;border-top:1px solid var(--border);font-size:13.5px;color:var(--muted)}
.discussion-queue span{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink)}
.receipt-disclosure{margin-top:4px;color:var(--muted);font-size:12.5px}
.receipt-disclosure summary{cursor:pointer;padding:8px 0;font-weight:600}
.receipt-disclosure[open] summary{color:var(--ink)}
.session-end{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:26px;padding-top:14px;border-top:1px solid var(--border)}
.session-end[hidden]{display:none}
@media(max-width:560px){.result-receipt li{grid-template-columns:1fr;gap:3px}}

.about code{font-family:ui-monospace,Menlo,monospace;font-size:12px}
@media (max-width:900px){ #cmhost .cm-editor{min-height:280px} }
/* iOS zooms into any focused input under 16px. The range/name controls are
   already 16px+44px at every width; the share link only needs the phone bump. */
@media (max-width:700px){.linkrow input{font-size:16px}}

/* participants and the live console land on the session, not the pitch */
body[data-mode="participant"] header .tagline,
body[data-mode="console"] header .tagline{display:none}
body[data-mode="participant"] header h1,
body[data-mode="console"] header h1{font-size:22px}

/* ---- compose-mode question authoring (editable form only) ----
   Every affordance is an edit-in-place target (assets/edit-in-place.js); the
   shared [data-edit] hover gives text targets a dotted underline. Pill/×/capsule
   targets opt out of that and read as controls. */
.qhead{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.qhead .qnum{align-self:center}
.qtitle{flex:1 1 auto;min-width:8ch;overflow-wrap:anywhere}
.qtypepill{flex:none;font-size:11px;font-weight:600;letter-spacing:.02em;
  padding:3px 10px;border-radius:0;line-height:1.5;cursor:pointer;
  color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 13%,transparent)}
.qtypepill:hover{text-decoration:none;background:color-mix(in srgb,var(--accent) 22%,transparent)}
.qhead .qdel{margin-left:auto;flex:none;color:var(--muted);cursor:pointer;
  font-size:17px;line-height:1;padding:2px 8px;border-radius:0;font-weight:400}
.qhead .qdel:hover{color:var(--err);text-decoration:none;
  background:color-mix(in srgb,var(--err) 10%,transparent)}
/* editable unit — a pill in the rangerow; ghost when the unit is missing */
.unitpill{cursor:pointer;font-size:12.5px;padding:3px 10px;border-radius:0;line-height:1.5;
  color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 13%,transparent)}
.unitpill:hover{text-decoration:none;background:color-mix(in srgb,var(--accent) 22%,transparent)}
.unitpill.ghost{color:var(--muted);background:none;border:1.5px dashed var(--border);font-style:italic}
.unitpill.ghost:hover{color:var(--accent-ink);border-color:var(--accent);background:none}
/* per-option remove (× shown only above the 2-option floor) */
.chiprow .rmopt{flex:none;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;
  padding:2px 6px;border-radius:0}
.chiprow .rmopt:hover{color:var(--err);text-decoration:none;
  background:color-mix(in srgb,var(--err) 10%,transparent)}
/* the editable label shares its row with 4 controls (−/input/+/×) — wrap at
   word boundaries, not mid-word, so a long option stays legible */
.chipopt[data-edit]{cursor:pointer;overflow-wrap:break-word}
/* ghost capsules: ＋ Add option (per chips question) and ＋ Add question (form) */
.addopt{display:inline-block;margin:2px 0 2px 32px;padding:6px 12px;font-size:12.5px;font-weight:600;
  color:var(--muted);cursor:pointer;border:1.5px dashed var(--border);border-radius:0}
.addopt:hover{color:var(--accent-ink);border-color:var(--accent);text-decoration:none}
.gform .addq{display:block;width:100%;margin-top:4px;padding:11px;font-family:inherit;text-align:center;
  font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;
  border:1.5px dashed var(--border);border-radius:0}
.gform .addq:hover{color:var(--accent-ink);border-color:var(--accent);text-decoration:none}
/* Fingers: every authoring control clears the 44px tap floor. The text/option
   targets grow their hit box; the eip input's own 16px floor lives in
   assets/workspace.css (shared across every tool). */
@media (pointer:coarse){
  .qhead{min-height:44px}
  .qtitle,.qtypepill,.qhead .qdel,.unitpill,.chiprow .rmopt,.chipopt[data-edit]{
    display:inline-flex;align-items:center;min-height:44px}
  .addopt,.gform .addq{min-height:44px;display:flex;align-items:center;justify-content:center}
  .addopt{display:inline-flex}
}