/* Campaign Builder — the DMG "campaign workshop" surface.
 * Inherits the Candlelit Grimoire tokens from theme.css (ember + brass on ink-black)
 * and the .gpanel / .btn / .char-* primitives from character.css. Adds only the
 * campaign-specific layout: roster cards, the read-only sheet, the wizard shell,
 * style picker, reveal (secret) affordances, and the live summary aside.
 */

/* ---- shared bits ------------------------------------------------------------------------- */
.camp-tags { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: var(--sp-5) 0; }
.camp-tag {
  font: 600 var(--fs-xs)/1 var(--font-sans); letter-spacing: .04em; text-transform: capitalize;
  color: var(--gold); background: rgba(var(--gold-rgb), .08);
  border: 0.0625rem solid rgba(var(--gold-rgb), .28); border-radius: var(--r-pill); padding: var(--sp-3) 0.5625rem;
}
.camp-tag.role { color: var(--accent); background: rgba(var(--accent-rgb), .1); border-color: rgba(var(--accent-rgb), .35); }
.camp-muted { color: var(--muted); font-size: var(--fs-base); }

/* ---- roster -------------------------------------------------------------------------------- */
.camp-logline { color: var(--text); font: italic 400 var(--fs-md)/1.45 var(--font-display); margin: var(--sp-1) 0 var(--sp-3); opacity: .92; }
.camp-meta { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-4); }
.camp-meta span { font: 600 var(--fs-xs) var(--font-mono); color: var(--muted); }
.camp-counts { margin-top: var(--sp-5); font: 500 var(--fs-sm) var(--font-mono); color: var(--accent); opacity: .85; }





/* ---- read-only sheet ----------------------------------------------------------------------- */
.camp-sheet { max-width: var(--content-max); margin: 0 auto; padding: var(--sp-5) 0 4rem; }
.camp-sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-10); flex-wrap: wrap; }
.camp-sheet-actions { display: flex; gap: var(--sp-5); flex-shrink: 0; }
.camp-summary {
  display: flex; flex-wrap: wrap; gap: 1.125rem 1.75rem; align-items: baseline;
  margin: 1.125rem 0 var(--sp-4); padding: var(--sp-9) 1.375rem;
}
.camp-stat { font: 700 var(--fs-modal)/1 var(--font-display); color: var(--gold); display: flex; flex-direction: column; gap: var(--sp-2); }
.camp-stat span { font: 600 var(--fs-2xs)/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.camp-stat b { font: 600 var(--fs-md)/1.2 var(--font-display); color: var(--text); }
.camp-budget { color: var(--muted); font-size: var(--fs-base); margin: var(--sp-3) var(--sp-1) 0; }

.camp-sheet-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.125rem; margin-top: var(--sp-10);
}
.camp-block { padding: var(--sp-10) 1.375rem; }
.camp-block-wide { grid-column: 1 / -1; }
.camp-block h2 {
  font: 600 var(--fs-base)/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 var(--sp-8); padding-bottom: var(--sp-6);
  border-bottom: 0.0625rem solid var(--border-soft);
}
.camp-block h3 { font: 600 var(--fs-sub) var(--font-display); color: var(--gold); margin: 0 0 var(--sp-4); }
.camp-block h4 { font: 600 var(--fs-md) var(--font-display); color: var(--text); margin: var(--sp-7) 0 var(--sp-3); }
.camp-block p { font-size: var(--fs-base); line-height: 1.5; margin: var(--sp-3) 0; color: var(--text); }
.camp-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-8); margin: var(--sp-6) 0 0; font-size: var(--fs-base); }
.camp-dl dt { color: var(--muted); font-weight: 600; }
.camp-dl dd { margin: 0; color: var(--text); text-transform: capitalize; }
.camp-arc, .camp-faction, .camp-villain, .camp-place { padding: var(--sp-5) 0; border-top: 0.0625rem dashed var(--border-soft); }
.camp-arc:first-of-type, .camp-faction:first-of-type, .camp-villain:first-of-type, .camp-place:first-of-type { border-top: none; }
.camp-role { color: var(--accent); font-weight: 600; font-size: var(--fs-smplus); }
.camp-ibf { font-size: var(--fs-smplus); color: var(--muted); }
.camp-ibf b { color: var(--gold); font-weight: 600; }
.camp-knobs { list-style: none; padding: 0; margin: 0 0 var(--sp-7); display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.camp-knobs li {
  font: 500 var(--fs-sm) var(--font-mono); color: var(--text); background: var(--panel-2);
  border: 0.0625rem solid var(--border-soft); border-radius: var(--r-md); padding: var(--sp-3) 0.5625rem;
}

.camp-cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.375rem, 1fr)); gap: var(--sp-8); }
.camp-cast-card { background: var(--panel-2); border: 0.0625rem solid var(--border-soft); border-radius: var(--r-lg); padding: var(--sp-7) var(--sp-8); }
.camp-cast-card h4 { margin-top: 0; }

/* ---- reveal (secret) affordances ----------------------------------------------------------- */
.camp-secret-row { background: rgba(var(--accent-rgb), .045); border-left: 0.125rem solid rgba(var(--accent-rgb), .4); padding: var(--sp-3) var(--sp-6); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.camp-secret-row b { color: var(--accent); }
.camp-lock {
  font: 700 var(--fs-micro)/1 var(--font-sans); letter-spacing: .06em; vertical-align: middle;
  color: var(--gold); border: 0.0625rem solid rgba(var(--gold-rgb), .4); border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-3); margin-left: var(--sp-3);
}


/* ---- wizard shell -------------------------------------------------------------------------- */
.camp-wizard { max-width: var(--content-max); margin: 0 auto; }

.camp-style-pick { padding: 1.375rem var(--sp-11); margin-top: var(--sp-5); }
.camp-role-row { display: flex; align-items: center; gap: 1.125rem; flex-wrap: wrap; padding-bottom: 1.125rem; margin-bottom: 1.125rem; border-bottom: 0.0625rem solid var(--border-soft); }
.camp-pick-label { font: 600 var(--fs-sm) var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.camp-radio { display: inline-flex; align-items: center; gap: 0.4375rem; font-size: var(--fs-md); color: var(--text); cursor: pointer; }
.camp-radio small { color: var(--muted); font-size: var(--fs-xs); }
.camp-radio input { accent-color: var(--accent); }

.camp-style-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.camp-style-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4);
  text-align: left; padding: 1.125rem 1.125rem var(--sp-10); cursor: pointer;
  background: var(--panel-2); border: 0.0625rem solid var(--border); border-radius: var(--r-xl);
  color: var(--text); transition: border-color .18s var(--ease-soft), transform .18s var(--ease-soft), box-shadow .18s;
}
.camp-style-card:hover { border-color: var(--accent); transform: translateY(-0.125rem); box-shadow: var(--glow-ember); }
.camp-style-card.active { border-color: var(--accent); box-shadow: var(--glow-ember); }
.camp-style-ico { font-size: var(--fs-card); }
.camp-style-card b { font: 600 var(--fs-lg) var(--font-display); color: var(--gold); }
.camp-style-card small { color: var(--muted); font-size: var(--fs-smplus); line-height: 1.4; }

/* live preview aside */
.camp-preview-body { font-size: var(--fs-base); line-height: 1.55; }
.camp-preview-body .pv-row { display: flex; justify-content: space-between; gap: var(--sp-7); padding: var(--sp-2) 0; border-bottom: 0.0625rem dashed var(--border-soft); }
.camp-preview-body .pv-row span:first-child { color: var(--muted); }
.camp-preview-body .pv-row span:last-child { color: var(--gold); font-weight: 600; text-align: right; }



@media (max-width: 760px) {
  .camp-sheet-grid, .camp-style-row { grid-template-columns: 1fr; }
}

/* ============================================================================================
   Wizard body — fields, list editors, chips, reveal eye, knob workshop, AI panels, toast.
   Reuses .wiz-steps/.wiz-step/.wiz-body/.wiz-layout/.wiz-main/.wiz-preview/.wiz-foot from
   character.css; everything below is campaign-specific.
   ============================================================================================ */
.wiz-step-ico { margin-right: 0.4375rem; opacity: .8; font-size: var(--fs-base); }

.camp-stephead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-7);
  margin: 0 0 var(--sp-9); padding-bottom: var(--sp-7); border-bottom: 0.0625rem solid var(--border-soft); }
.camp-stephead h2 { font: 600 var(--fs-modal) var(--font-display); color: var(--gold); margin: 0; }
/* "Show sources" toggle */
.camp-srctoggle { display: inline-flex; align-items: center; gap: var(--sp-4); cursor: pointer; flex: none;
  font: 500 var(--fs-xs) var(--font-sans); color: var(--muted); user-select: none; white-space: nowrap; }
.camp-srctoggle:hover { color: var(--text); }
.camp-srctoggle input { accent-color: var(--accent); }
/* provenance tag (inline, only when Show sources is on) + "from {Book}" caption (always, selected) */
.camp-srctag { font-style: normal; font: 600 var(--fs-micro) var(--font-mono); letter-spacing: .03em;
  color: var(--accent); background: rgba(var(--accent-rgb), .12); border-radius: var(--r-sm); padding: 0.0625rem 0.3125rem; margin-left: var(--sp-4); }
.camp-srcfrom { margin: var(--sp-3) 0 0; font: 400 var(--fs-xs) var(--font-sans); color: var(--muted); }
.camp-srcfrom::before { content: "↳ "; opacity: .6; }
/* sidebar "Sources in play" chips */
.camp-srcchips { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-1); }
.camp-srcchip { font: 600 var(--fs-2xs) var(--font-mono); color: var(--text); background: var(--bg-2);
  border: 0.0625rem solid var(--border-soft); border-radius: var(--r-sm); padding: 0.0625rem var(--sp-4); }
.camp-subh { font: 600 var(--fs-sm) var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 1.375rem 0 var(--sp-6); }
.camp-fields { display: flex; flex-direction: column; gap: var(--sp-9); }
.camp-row2, .camp-row3 { display: grid; gap: var(--sp-8); }
.camp-row2 { grid-template-columns: 1fr 1fr; }
.camp-row3 { grid-template-columns: 1fr 1fr 1fr; }
.camp-row2 .camp-field, .camp-row3 .camp-field { margin: 0; }

.camp-field { display: flex; flex-direction: column; gap: var(--sp-4); }
.camp-field.is-secret { padding-left: 0.6875rem; border-left: 0.125rem solid rgba(var(--accent-rgb), .35); }
.camp-flabel { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); }
.camp-flabel label { font: 600 var(--fs-base) var(--font-sans); color: var(--text); }
.camp-fctl { display: inline-flex; align-items: center; gap: var(--sp-4); }
.camp-sbadge { font: 700 var(--fs-micro) var(--font-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--accent); border: 0.0625rem solid rgba(var(--accent-rgb), .4); border-radius: var(--r-sm); padding: 0.0625rem 0.3125rem; vertical-align: middle; }
.camp-fhint { font-size: var(--fs-sm); color: var(--muted); margin: var(--sp-1) 0 0; line-height: 1.4; }

.camp-field input[type=text], .camp-field input[type=number], .camp-field textarea, .camp-field select,
.camp-knob select {
  width: 100%; background: var(--bg-2); color: var(--text); border: 0.0625rem solid var(--border);
  border-radius: var(--r-lg); padding: 0.5625rem 0.6875rem; font: 400 var(--fs-md) var(--font-sans); transition: border-color .15s, box-shadow .15s;
}
.camp-field textarea { resize: vertical; line-height: 1.5; }
.camp-field input:focus, .camp-field textarea:focus, .camp-field select:focus, .camp-knob select:focus {
 border-color: var(--accent); box-shadow: 0 0 0 0.1875rem rgba(var(--accent-rgb), .12);
}



/* AI ✨ + reveal eye */
.camp-ai{
  background: var(--panel-2); border: 0.0625rem solid var(--border); color: var(--muted);
  border-radius: var(--r-md); padding: var(--sp-1) 0.4375rem; font-size: var(--fs-sm); cursor: pointer; line-height: 1.4; transition: all .15s;
}
.camp-ai:hover { border-color: var(--gold); color: var(--gold); box-shadow: var(--glow-gold); }
.camp-ai.busy { opacity: .6; cursor: progress; }




/* multi chips */

.camp-chip {
  background: var(--bg-2); border: 0.0625rem solid var(--border); color: var(--muted);
  border-radius: var(--r-pill); padding: var(--sp-4) 0.8125rem; font: 500 var(--fs-smplus) var(--font-sans); cursor: pointer; text-transform: capitalize; transition: all .14s;
}
.camp-chip:hover { border-color: var(--accent); color: var(--text); }
.camp-chip.on { background: rgba(var(--accent-rgb), .14); border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* list editors */
.camp-list { display: flex; flex-direction: column; gap: var(--sp-8); }
.camp-litem { background: var(--panel-2); border: 0.0625rem solid var(--border-soft); border-radius: var(--r-xl); padding: var(--sp-8) var(--sp-9); display: flex; flex-direction: column; gap: var(--sp-8); }
.camp-litem-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--sp-5); border-bottom: 0.0625rem solid var(--border-soft); }
.camp-litem-head b { font: 600 var(--fs-md) var(--font-display); color: var(--gold); }
.camp-rm { background: none; border: none; color: var(--muted); font-size: var(--fs-sm); cursor: pointer; }
.camp-rm:hover { color: var(--bad); }
.camp-add { align-self: flex-start; font-size: var(--fs-base); }

/* knob workshop */

.camp-knob { padding: 0.5625rem 0; border-top: 0.0625rem dashed var(--border-soft); display: flex; flex-direction: column; gap: 0.4375rem; }
.camp-knob:first-child { border-top: none; }
.camp-soon { font: 600 var(--fs-micro) var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border: 0.0625rem solid var(--border); border-radius: var(--r-sm); padding: 0.0625rem 0.3125rem; margin-left: var(--sp-4); }
.camp-chip[disabled] { opacity: .45; cursor: not-allowed; }

/* variant chooser (overlapping content — pick one version) */
.camp-variant { border: 0.0625rem solid rgba(var(--gold-rgb), .4); border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-7); margin: 0 0 var(--sp-8);
  background: radial-gradient(120% 140% at 0% 0%, rgba(var(--gold-rgb), .06), transparent 70%); }
.camp-variant .camp-flabel label { color: var(--gold); }

/* book chips that carry a content summary (taller, two-line cards) */





/* content-selection pre-screen (shown before the style picker) */



.camp-content-back { position: absolute; top: 1rem; right: 1.125rem; }
.camp-review { margin: var(--sp-7) 0; }

/* AI panels in the style picker */
.camp-gen-panel { margin-top: var(--sp-9); display: flex; gap: var(--sp-6); align-items: flex-start; }
.camp-gen-pitch { flex: 1; background: var(--bg-2); color: var(--text); border: 0.0625rem solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-7); font: 400 var(--fs-md) var(--font-sans); resize: vertical; }
.camp-gen-pitch:focus { border-color: var(--accent); }

.camp-gen-suggest { flex-shrink: 0; align-self: stretch; }
.camp-iv-panel { margin-top: var(--sp-9); border: 0.0625rem solid var(--border); border-radius: var(--r-xl); overflow: hidden; }
.camp-iv-log { max-height: 20rem; overflow-y: auto; padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-6); background: var(--bg-2); }
.camp-iv-msg { max-width: 82%; padding: 0.5625rem 0.8125rem; border-radius: var(--r-2xl); font-size: var(--fs-base); line-height: 1.45; white-space: pre-wrap; }
.camp-iv-msg.assistant { align-self: flex-start; background: var(--panel-2); border: 0.0625rem solid var(--border-soft); color: var(--text); border-bottom-left-radius: 0.1875rem; }
.camp-iv-msg.user { align-self: flex-end; background: rgba(var(--accent-rgb), .14); border: 0.0625rem solid rgba(var(--accent-rgb), .3); color: var(--text); border-bottom-right-radius: 0.1875rem; }
.camp-iv-bar { display: flex; gap: var(--sp-5); padding: var(--sp-7); border-top: 0.0625rem solid var(--border); }
.camp-iv-input { flex: 1; background: var(--bg-2); color: var(--text); border: 0.0625rem solid var(--border); border-radius: var(--r-lg); padding: 0.5625rem var(--sp-7); font: 400 var(--fs-md) var(--font-sans); }
.camp-iv-input:focus { border-color: var(--accent); }
#camp-regen { margin-top: var(--sp-6); }

/* toast */

@media (max-width: 760px) {
  .camp-row2, .camp-row3 { grid-template-columns: 1fr; }
}

/* the wizard layout/steps must stay hidden until a style is picked — id+attr beats
   character.css's .wiz-layout{display:flex} / .wiz-steps{display:...} */
#camp-steps[hidden], #camp-layout[hidden] { display: none !important; }
/* footer nav: [hidden] must beat theme.css's `button.btn{display:inline-block}` so Back hides on
   the first step and Save only shows on Review (and stays hidden through a Full-AI live build) */
#camp-back[hidden], #camp-next[hidden], #camp-save[hidden] { display: none !important; }

/* interview quick-reply chips (Guided style) + typing indicator */
.camp-iv-opts { display: flex; flex-wrap: wrap; gap: 0.4375rem; align-self: flex-start; max-width: 94%; margin: -0.1875rem 0 var(--sp-2); }
.camp-iv-opt { text-transform: none; font-size: var(--fs-sm); padding: 0.3125rem 0.6875rem; }
.camp-iv-hint { width: 100%; color: var(--muted); font-size: var(--fs-xs); font-style: italic; margin-top: 0.0625rem; }
.camp-iv-msg.pending { opacity: .55; font-style: italic; letter-spacing: .14em; }

/* Full-AI build status — streamed per-section progress */
.camp-gen-panel { flex-wrap: wrap; }


.camp-gen-head { display: flex; align-items: center; gap: var(--sp-6); }
.camp-gen-msg { color: var(--text); }
.camp-gen-guided .camp-gen-continue { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
.camp-gen-err { border-color: var(--danger, #c0413b) !important; }
.camp-gen-err .camp-gen-msg { color: var(--danger, #c0413b); }
.camp-gen-bar { width: 100%; height: 0.3125rem; background: var(--bg-2); border: 0.0625rem solid var(--border-soft); border-radius: var(--r-pill); overflow: hidden; }
.camp-gen-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--gold)); transition: width .4s var(--ease-soft); }



@keyframes camp-fade { from { opacity: 0; transform: translateX(-0.25rem); } to { opacity: 1; transform: none; } }
.camp-spin { flex-shrink: 0; width: 1rem; height: 1rem; border: 0.125rem solid rgba(var(--accent-rgb), .25); border-top-color: var(--accent); border-radius: var(--r-round); animation: camp-spin 0.8s linear infinite; }
.camp-spin-sm { width: 0.75rem; height: 0.75rem; border-width: 0.125rem; display: inline-block; vertical-align: middle; }
@keyframes camp-spin { to { transform: rotate(360deg); } }

/* Full-AI LIVE REVEAL — the wizard is shown during the build; sections fill in as they land */
#camp-gen-banner { display: flex; flex-direction: column; gap: 0.5625rem; margin-bottom: var(--sp-9); padding: var(--sp-7) var(--sp-9);
  border: 0.0625rem solid rgba(var(--gold-rgb), .35); border-radius: var(--r-xl);
  background: radial-gradient(140% 180% at 0% 0%, rgba(var(--gold-rgb), .08), transparent 60%), rgba(18, 13, 9, 0.7); }
/* not-yet-written steps: grayed + not clickable */
.wiz-step.gen-pending { opacity: .42; cursor: not-allowed; filter: grayscale(.5); }
.wiz-step.gen-pending:hover { color: var(--muted); border-color: var(--border-soft); }
/* the step currently being authored: accent pulse */
.wiz-step.gen-writing { opacity: 1; cursor: progress; border-color: rgba(var(--accent-rgb), .55); color: var(--text);
  animation: camp-writing 1.4s ease-in-out infinite; }
@keyframes camp-writing { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); } 50% { box-shadow: 0 0 0.75rem -0.125rem rgba(var(--accent-rgb), .55); } }
/* finished, reviewable steps get a small ✓ cue */
.wiz-step.gen-ready:not(.active)::after { content: '✓'; position: absolute; top: 0.25rem; right: 0.375rem; font-size: var(--fs-2xs); color: var(--good); }
/* placeholder body shown when the user opens a step that's still being written */
.camp-gen-wait { display: flex; align-items: center; gap: var(--sp-7); padding: 1.875rem 1.375rem; color: var(--muted);
  font-size: var(--fs-md); border: 0.0625rem dashed var(--border-soft); border-radius: var(--r-xl); background: rgba(18, 13, 9, 0.4); }

/* ============================================================================
   No-scroll wizard layout — the SCREEN never scrolls; containers WITHIN it do,
   and every phase carries an ALWAYS-VISIBLE bottom bar (Continue, or Back · Next ·
   Save). Mirrors the Lab pattern (theme.css `body:has(.lab2)`), scoped to the
   campaign wizard for now; generalized to the other SPA screens after sign-off.
   ============================================================================ */
/* 1) constrain the page to the viewport between the topbar and the pinned footer */
body:has(.camp-wizard) main.app-main {
  flex: 0 0 auto;
  height: calc(100dvh - var(--topbar-h, 3.5rem));
  max-height: calc(100dvh - var(--topbar-h, 3.5rem));
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* the SPA router's intermediate #app div must itself fill the column + be a flex parent */
body:has(.camp-wizard) main.app-main > #app {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 2) the wizard section fills the column (Library width — standing policy) and never grows the page */
.camp-wizard {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-3) 0;
  overflow: hidden;
}
/* header, step tabs and the Full-AI gen banner stay fixed at the top of the column */
.camp-wizard .wiz-head,
.camp-wizard .wiz-steps,
.camp-wizard #camp-gen-banner { flex: 0 0 auto; }
.camp-wizard .wiz-head { margin-bottom: var(--sp-7); }
.camp-wizard .wiz-steps { margin-bottom: var(--sp-7); }

/* 3) the body row fills the remaining height; its columns scroll INTERNALLY */
.camp-wizard .wiz-layout {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
  overflow: hidden;
}
.camp-wizard .wiz-main { min-height: 0; gap: var(--sp-6); }
/* The content PANEL is a 3-zone card: a pinned title banner, the scrolling fields, and a pinned
   Back/Next bar — all WITHIN the gpanel. Drop the panel's own padding so the banner + bar span its
   full width (each zone carries its own); only .camp-fields scrolls. */
.camp-wizard .wiz-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.camp-wizard .camp-stephead {       /* pinned TOP banner — title + Show sources, always visible */
  flex: 0 0 auto;
  margin: 0;
  padding: 0.8125rem 1.375rem;
  background: var(--panel);
  border-bottom: 0.0625rem solid var(--border);
}
.camp-wizard .camp-fields {         /* THE scroll region */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.125rem 1.375rem;
}
.camp-wizard .camp-gen-wait { flex: 1 1 auto; min-height: 0; padding: 1.125rem 1.375rem; }
.camp-wizard .wiz-preview {
  position: static;                 /* no sticky needed inside a fixed-height column */
  min-height: 0;
  align-self: stretch;
  overflow-y: auto;                 /* the live summary scrolls on its own */
}

/* 4) the ALWAYS-VISIBLE bottom bar — pinned at the BOTTOM of the content panel */
.camp-wizard .wiz-foot {
  flex: 0 0 auto;
  margin: 0;
  padding: var(--sp-7) 1.375rem;
  border-top: 0.0625rem solid var(--border);
  background: var(--panel);         /* opaque so scrolled content cannot bleed through */
}

/* CONTENT phase: the picker scrolls; the Continue button lives in the same kind of bottom bar */
.camp-wizard .camp-content-pick {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
.camp-wizard .camp-content-pick > div:first-child {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;                 /* the content stack scrolls */
}
.camp-wizard .camp-content-foot {
  flex: 0 0 auto;
  margin: 0 -1.5rem 0;                /* bleed to the gpanel's horizontal padding edges */
  padding: var(--sp-8) var(--sp-11);
  border-top: 0.0625rem solid var(--border);
  background: rgba(0, 0, 0, 0.18);
  justify-content: flex-end;
}

/* STYLE phase: scroll internally (no pinned action bar needed there) */
.camp-wizard .camp-style-pick { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* ===== role-aware authoring + secret model (Phase 1) ===================================== */
/* the "I AM THE…" role options as a clearer segmented control */
.camp-roleopt { padding: 0.4375rem var(--sp-7); border: 0.0625rem solid var(--border-soft); border-radius: var(--r-lg);
  background: var(--panel-2); transition: border-color .15s, background .15s, color .15s; }
.camp-roleopt.on { border-color: var(--accent); background: rgba(var(--accent-rgb), .1); color: var(--text); }
.camp-roleopt small { display: block; margin-top: 0.0625rem; }

/* the two step-head toggles (Show secrets · Show sources) sit together at the right */
.camp-stephead-ctl { display: inline-flex; align-items: center; gap: var(--sp-8); flex: none; }
.camp-secrettoggle { color: var(--muted); }
.camp-secrettoggle.on { color: var(--gold); }

/* per-list-item visibility toggle (NPC notable / place·faction public) + its row container */
.camp-litem-ctl { display: inline-flex; align-items: center; gap: var(--sp-5); }
.camp-vis { font: 600 var(--fs-2xs) var(--font-sans); letter-spacing: .02em; cursor: pointer;
  color: var(--muted); background: var(--bg); border: 0.0625rem solid var(--border-soft);
  border-radius: var(--r-pill); padding: var(--sp-2) 0.5625rem; white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s; }

/* a whole GM-only section, collapsed in the creator's view while Show secrets is off */
.camp-secret-collapsed { padding: var(--sp-8) var(--sp-9); border: 0.0625rem dashed var(--border-soft);
  border-radius: var(--r-xl); background: rgba(18, 13, 9, 0.4); color: var(--muted); font-size: var(--fs-base); }

/* per-section "✨ Generate section" button in the step header */
.camp-gensec { font: 600 var(--fs-sm) var(--font-sans); padding: 0.3125rem 0.6875rem; white-space: nowrap; }
.camp-gensec.busy { opacity: .7; cursor: progress; }
.camp-stephead { flex-wrap: wrap; }

/* ===== dependency reconcile walk (Phase 3) ============================================== */
.camp-recon-busy { display: flex; align-items: center; gap: var(--sp-6); padding: 1.75rem; color: var(--muted); justify-content: center; }
.camp-recon-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-7); }
.camp-recon-item { border: 0.0625rem solid var(--border-soft); border-radius: var(--r-xl); padding: var(--sp-7) var(--sp-8); background: var(--panel-2); }
.camp-recon-item.done { border-color: rgba(var(--good-rgb, 120 170 90), .4); opacity: .85; }
.camp-recon-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); align-items: baseline; margin-bottom: var(--sp-4); }
.camp-recon-meta b { font: 600 var(--fs-smplus) var(--font-mono); color: var(--accent); }
.camp-recon-cur { font-size: var(--fs-smplus); line-height: 1.5; color: var(--text); background: var(--bg);
  border-radius: var(--r-md); padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-5); max-height: 5.625rem; overflow: hidden; }
.camp-recon-acts { display: flex; align-items: center; gap: 0.4375rem; flex-wrap: wrap; }
.camp-recon-ok { font: 600 var(--fs-sm) var(--font-sans); color: var(--good, #78aa5a); }

/* ===== novice-friendly explanations sourced from the selected books ===================== */
/* a picked option's plain-language meaning, shown under the field */
.camp-opthelp { margin: 0.3125rem 0 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
.camp-opthelp b { color: var(--gold); font-weight: 600; }
.camp-opthelp-src { color: var(--accent); opacity: 0.85; font-style: italic; }

/* Per-field reveal toggle on secret fields (👁 shared / 🔒 secret) — a checkbox styled as the badge. */
.camp-reveal { cursor: pointer; }
.camp-reveal input { position: absolute; opacity: 0; width: 0; height: 0; }
.camp-reveal.shared { color: var(--good); border-color: var(--good); }

/* sweep 2026-08-06: the workshop boot is a real wait — centered, honest, spinning */
.wiz-loading { display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
  min-height: 18rem; color: var(--muted); font-size: var(--fs-smplus); }
.cov-tile-glyph { color: var(--gold); }