/* Premise Builder — specimen-sheet direction */

/* ─── Page shell ─── */
.pb-app { display: grid; grid-template-columns: 280px minmax(0, 1fr) 320px; height: 100%; background: var(--paper); }
.pb-app.no-rail { grid-template-columns: 280px minmax(0, 1fr); }
.pb-main { min-width: 0; min-height: 0; overflow: auto; }
/* Invisible scrollbar on the scrolling middle column -- premise + ending design only.
   (.pb-main base is shared with characters/plot, so scope to these two apps.) */
.pb-app .pb-main,
.ed-app .pb-main { scrollbar-width: none; -ms-overflow-style: none; }
.pb-app .pb-main::-webkit-scrollbar,
.ed-app .pb-main::-webkit-scrollbar { width: 0; height: 0; display: none; }
.pb-app .pb-main { padding: 28px 36px 40px; }

.pb-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper);
  position: sticky; top: 0; z-index: 5;
}
.pb-topbar .crumbs {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; color: var(--ink-4);
  letter-spacing: 0.06em;
}
.pb-topbar .crumbs .sep { color: var(--ink-5); }
.pb-topbar .crumbs .here { color: var(--ink); font-weight: 500; }
.pb-topbar .savestate {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  letter-spacing: 0.06em;
}
.pb-topbar .savestate .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ok); }

/* ─── Specimen sheet (the populated premise) ─── */
.pb-sheet {
  max-width: 1500px;
  margin: 0 auto;
  padding: 56px 64px 80px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.04), 0 14px 40px rgba(20,18,12,0.15);
}
.pb-mast {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 4px 16px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 8px;
  margin-bottom: 22px;
}
.pb-mast .name {
  font-family: var(--serif); font-weight: 600; font-style: italic;
  font-size: 14px; letter-spacing: 0.04em; color: var(--ink-2);
}
.pb-mast .meta {
  font-family: var(--mono); font-size: 12px; color: var(--ink-4);
  letter-spacing: 0.18em; text-transform: uppercase;
}

.pb-genre-line {
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 6px;
}
.pb-title {
  font-family: var(--serif); font-weight: 600;
  font-size: 56px; line-height: 1; letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 24px;
}
.pb-rule {
  height: 1px; background: var(--line);
  margin: 24px 0 28px;
}

/* Field block — the foundational unit */
.pb-field {
  position: relative;
  padding: 14px 0 14px 0;
  margin: 0 0 6px;
  border-radius: 4px;
  transition: background .14s;
}
.pb-field:hover { background: rgba(108,93,168,0.04); }
.pb-field.editing { background: rgba(108,93,168,0.06); }

.pb-field-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 8px;
}
.pb-field-label {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.pb-field-help {
  font-family: var(--serif); font-style: italic;
  font-size: 13px; color: var(--ink-4);
}
.pb-field-actions {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  opacity: 0;
  transition: opacity .14s;
}
.pb-field:hover .pb-field-actions,
.pb-field.editing .pb-field-actions { opacity: 1; }

.pb-edited {
  display: inline-flex; align-items: center; gap: 4px;
  height: 18px; padding: 0 7px;
  background: var(--violet-soft); color: var(--violet-deep);
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  border-radius: 3px;
  opacity: 1 !important;
}
.pb-savestate {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 12px; color: var(--ink-4);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.pb-savestate.saving { color: var(--ink-3); }
.pb-savestate .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--ok); }
.pb-savestate.saving .dot {
  background: var(--violet);
  animation: pb-pulse 1.1s ease-in-out infinite;
}
@keyframes pb-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.pb-revert {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px;
  background: transparent; border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--sans); font-size: 12px; color: var(--ink-3);
}
.pb-revert:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink-5); }

/* Field bodies */
.pb-body { font-family: var(--serif); color: var(--ink); text-wrap: pretty; }
.pb-body.logline {
  font-size: 26px; line-height: 1.32; letter-spacing: -0.012em;
  color: var(--ink); font-weight: 500;
}
.pb-body.conflict, .pb-body.stakes, .pb-body.hook {
  font-size: 17px; line-height: 1.6; color: var(--ink-2);
}
.pb-body.short {
  font-size: 16px; line-height: 1.55; color: var(--ink-2);
}
.pb-body.genre {
  font-family: var(--serif); font-style: italic;
  font-size: 16px; color: var(--ink-2);
}

/* Edited fields get a violet margin marker */
.pb-field.edited { padding-left: 18px; }
.pb-field.edited::before {
  content: "";
  position: absolute;
  left: 6px; top: 18px; bottom: 18px;
  width: 2px; background: var(--violet); border-radius: 1px;
}

/* Three-up metadata strip at the foot of the sheet */
.pb-meta-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 18px 24px;
  padding-top: 24px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
}
.pb-meta-strip .pb-field { padding-top: 4px; padding-bottom: 4px; }

/* Originating idea — appears under the sheet, dimmed */
.pb-idea-block {
  max-width: 1500px; margin: 32px auto 0; padding: 18px 64px 0;
  border-top: 1px dashed var(--line);
}
.pb-idea-block summary {
  list-style: none; cursor: pointer;
  font-family: var(--mono); font-size: 12px; color: var(--ink-4);
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 14px 0;
}
.pb-idea-block summary:hover { color: var(--ink-2); }
.pb-idea-block .idea-prose {
  font-family: var(--serif); font-style: italic;
  font-size: 15px; line-height: 1.65; color: var(--ink-3);
  white-space: pre-wrap;
  padding-bottom: 18px;
  text-wrap: pretty;
}

/* Build button row at top of sheet */
.pb-actions-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 48px;
  margin-bottom: 18px;
}
.pb-actions-row .grow { flex: 1; }
.pb-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  border-radius: 6px; border: 1px solid var(--line);
  background: var(--surface); font-size: 12.5px; color: var(--ink); font-weight: 500;
}
.pb-btn:hover { background: var(--paper-2); }
.pb-btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pb-btn.primary:hover { background: var(--ink-2); }
.pb-btn.violet { background: var(--violet); color: white; border-color: var(--violet); }
.pb-btn.violet:hover { opacity: 0.92; }
.pb-btn.ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--line); }
.pb-btn.ghost:hover { background: var(--paper-2); color: var(--ink); }
.pb-btn.danger { color: var(--err); border-color: var(--line); }
.pb-btn.danger:hover { background: rgba(176,69,69,0.08); }

/* ─── Right rail — version history ─── */
.pb-rail {
  border-left: 1px solid var(--line-soft);
  background: var(--paper);
  padding: 18px 18px 24px;
  overflow: auto;
}
.pb-rail-h {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.pb-rail-h .ttl {
  font-family: var(--serif); font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
}
.pb-rail-h .count {
  font-family: var(--mono); font-size: 12px; color: var(--ink-4); letter-spacing: 0.08em;
}
.pb-version {
  border-radius: 8px;
  padding: 12px 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--line-soft);
  background: var(--surface);
}
.pb-version.current {
  border: 1px solid var(--violet);
  background: var(--violet-soft);
}
.pb-version-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
}
.pb-version-head .v {
  font-family: var(--mono); font-size: 12px;
  background: var(--ink); color: var(--paper);
  padding: 2px 6px; border-radius: 3px; font-weight: 600;
  letter-spacing: 0.06em;
}
.pb-version.current .v { background: var(--violet-deep); }
.pb-version-head .when {
  font-family: var(--mono); font-size: 12px; color: var(--ink-4); letter-spacing: 0.06em;
}
.pb-version-head .now {
  margin-left: auto;
  font-family: var(--mono); font-size: 12px; color: var(--violet-deep);
  letter-spacing: 0.16em; font-weight: 600;
}
.pb-version .g {
  display: inline-block;
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 6px;
}
.pb-version .ll {
  font-family: var(--serif);
  font-size: 13px; line-height: 1.45; color: var(--ink-2);
  margin: 0 0 6px;
  text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pb-version dl {
  margin: 0; padding: 0;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 8px;
}
.pb-version dt {
  font-family: var(--mono); font-size: 12px; color: var(--ink-4);
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  padding-top: 1px;
}
.pb-version dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 12px; line-height: 1.4; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ─── Empty state ─── */
.pb-empty {
  max-width: 1500px; margin: 0 auto;
  padding: 72px 64px 80px;
  display: flex; flex-direction: column; gap: 24px;
}
.pb-empty .eyebrow {
  font-family: var(--mono); font-size: 12px; color: var(--ink-4);
  letter-spacing: 0.22em; text-transform: uppercase;
}
.pb-empty h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: 44px; letter-spacing: -0.025em; line-height: 1.05;
  margin: 0; color: var(--ink);
}
.pb-empty .lede {
  font-family: var(--serif); font-style: italic;
  font-size: 18px; line-height: 1.55; color: var(--ink-3);
  text-wrap: pretty; max-width: 56ch;
}
.pb-textarea {
  display: block; width: 100%;
  min-height: 220px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 10px;
  font-family: var(--serif);
  font-size: 17px; line-height: 1.65; color: var(--ink);
  text-wrap: pretty;
  resize: vertical;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 1px 3px rgba(20,17,12,0.04),
    0 6px 16px -10px rgba(20,17,12,0.10);
}
.pb-textarea::placeholder { color: var(--ink-4); font-style: italic; }
/* Live character counter under the premise textarea (N / 2000). */
.pb-charcount {
  margin-top: 6px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--ink-4); text-align: right;
}
.pb-charcount.warn { color: var(--warn); }
.pb-charcount.over { color: var(--bad); font-weight: 600; }
/* Normal text flow (was display:flex), so the tip wraps like a sentence on
   narrow screens. As flex items the label + chips were crammed onto one row
   and shrank below their content, clipping "Title:" to "Titl". The chips are
   inline-flex, so they now flow inline and wrap as whole units. */
.pb-tip {
  display: block;
  font-family: var(--serif); font-style: italic;
  font-size: 13px; color: var(--ink-4); line-height: 1.9;
}
.pb-tip .kbd { margin: 0 3px; vertical-align: middle; }
.pb-tip .key {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-style: normal;
  font-size: 12px; letter-spacing: 0.12em;
  background: var(--paper-2); border: 1px solid var(--line-soft);
  padding: 1px 6px; border-radius: 3px;
  color: var(--ink-3);
  white-space: nowrap;
}
.pb-empty-actions {
  display: flex; align-items: center; gap: 10px;
  padding-top: 8px;
}
.pb-empty-actions .grow { flex: 1; }
.pb-empty-actions .pb-btn { height: 38px; padding: 0 18px; font-size: 13.5px; }

/* ─── Canonical empty state — Foundation 3 retrofits page-specific variants to this class ─── */
.pb-empty-state {
  display: flex;
  flex-direction: column;
  padding: 80px 64px;
  gap: 22px;
  color: var(--ink-3);
}
.pb-empty-state h1,
.pb-empty-state .pb-empty-headline {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 44px;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}

/* Stage mast eyebrow — canonical replacement for .eyebrow / .wb-eyebrow /
   .cm-eyebrow / .sc-eyebrow. New pages should use this class.
   Existing eyebrow classes will be retrofitted in a future cleanup commit. */
.pb-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}

/* Wizard step choice cards — canonical replacement for .ed-path-choice / .ed-path-card.
   New wizard pages should use .pb-wizard-choices + .pb-wizard-choice.
   Ending Design's ed-path-choice / ed-path-card retrofitted in the next commit.
   Note: uses --line (not --border, which is undefined in this system). */
.pb-wizard-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.pb-wizard-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  border: 2px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  background: var(--surface);
  text-align: left;
  transition: border-color 0.15s;
  font-family: var(--sans);
}

.pb-wizard-choice:hover {
  border-color: var(--violet);
}

.pb-wizard-choice-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.pb-wizard-choice-head svg {
  flex-shrink: 0;
  color: var(--violet);
}

.pb-wizard-choice-head h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.pb-wizard-choice > p {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
  margin: 0;
}

.pb-wizard {
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.pb-wizard .pb-wizard-choices { width: 100%; }

/* ─── Building state (overlay on top of empty/sheet) ─── */
.pb-building {
  max-width: 1500px; margin: 0 auto;
  padding: 80px 64px 80px;
  display: flex; flex-direction: column; gap: 22px;
}
.pb-building .lede {
  font-family: var(--serif); font-weight: 500;
  font-size: 28px; line-height: 1.2; letter-spacing: -0.018em;
  color: var(--ink); margin: 0;
}
.pb-building .sub {
  font-family: var(--serif); font-style: italic;
  font-size: 15px; color: var(--ink-3);
}
.pb-progress {
  height: 4px; border-radius: 999px;
  background: var(--paper-3);
  overflow: hidden;
}
.pb-progress .fill {
  height: 100%;
  background: var(--violet);
  border-radius: inherit;
  transition: width .4s ease;
}
.pb-phases {
  display: flex; flex-direction: column;
  gap: 8px;
  font-family: var(--mono); font-size: 12px; color: var(--ink-4);
  letter-spacing: 0.04em;
}
.pb-phase { display: flex; align-items: center; gap: 10px; }
.pb-phase .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--paper-3);
  flex-shrink: 0;
}
.pb-phase.done .dot { background: var(--ok); }
.pb-phase.active .dot {
  background: var(--violet);
  animation: pb-pulse 1.1s ease-in-out infinite;
}
.pb-phase.done { color: var(--ink-3); }
.pb-phase.active { color: var(--ink); }
.pb-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--violet-soft);
  border-top-color: var(--violet);
  border-radius: 999px;
  animation: pb-spin 0.9s linear infinite;
}
@keyframes pb-spin { to { transform: rotate(360deg); } }

.pb-page-loading {
  flex: 1;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}

/* ─── Toast ─── */
.pb-toast {
  position: absolute;
  top: 18px; right: 18px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--ink); color: var(--paper);
  border-radius: 8px;
  font-size: 12.5px;
  box-shadow: 0 8px 24px rgba(20,17,12,0.18);
  z-index: 10;
}
.pb-toast .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ok); }

/* ─── Mobile ─── */
.pm-shell {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background: var(--paper); overflow: hidden;
}
.pm-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 18px 4px; font-size: 12px; font-weight: 600;
}
.pm-top {
  padding: 10px 18px 12px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.pm-top .crumb {
  font-family: var(--mono); font-size: 12px; color: var(--ink-4);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.pm-top .crumb .here { color: var(--ink); font-weight: 500; }
.pm-body { flex: 1; min-height: 0; overflow: auto; padding: 22px 22px 40px; }
.pm-mast {
  border-bottom: 2px solid var(--ink);
  padding-bottom: 6px;
  margin-bottom: 18px;
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  letter-spacing: 0.18em; text-transform: uppercase;
  display: flex; justify-content: space-between;
}
.pm-genre { font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.pm-title { font-family: var(--serif); font-weight: 600; font-size: 32px; line-height: 1.05; letter-spacing: -0.022em; margin: 0 0 16px; }
.pm-field { padding: 10px 0; border-top: 1px solid var(--line-soft); position: relative; }
.pm-field:first-of-type { border-top: 0; padding-top: 0; }
.pm-field.edited { padding-left: 12px; }
.pm-field.edited::before { content:""; position: absolute; left:0; top: 14px; bottom: 14px; width: 2px; background: var(--violet); border-radius: 1px; }
.pm-field-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.pm-field-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.pm-field-body { font-family: var(--serif); font-size: 14.5px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.pm-field-body.logline { font-size: 18px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; }
.pm-bot {
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr;
}
.pm-bot button {
  height: 52px;
  background: transparent; border: 0;
  font-family: var(--sans); font-size: 13px; color: var(--ink-2); font-weight: 500;
}
.pm-bot button + button { border-left: 1px solid var(--line-soft); }
.pm-bot button.primary { background: var(--ink); color: var(--paper); }

/* Reasoning + canvas (shared) */
.pa-artboard-shell {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--paper);
  font-family: var(--sans);
}
.pa-mobile-shell {
  width: 100%; height: 100%;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: var(--paper);
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(20,17,12,0.06);
}
.pa-reasoning {
  font-family: var(--serif);
  max-width: 760px;
  padding: 24px 28px 8px;
  color: var(--ink-2);
}
.pa-reasoning h2 { font-family: var(--serif); font-weight: 600; font-size: 22px; margin: 6px 0 10px; color: var(--ink); }
.pa-reasoning p { font-size: 15.5px; line-height: 1.55; margin: 0 0 10px; }
.pa-reasoning ul { font-size: 14px; line-height: 1.55; padding-left: 18px; }
.pa-reasoning li { margin-bottom: 6px; }
.pa-reasoning .intent { font-weight: 600; color: var(--ink); }
.pa-reasoning .eyebrow { display: block; margin-bottom: 4px; font-family: var(--sans); }

/* ─── Phase 6 additions — production wiring ─────────────────────────────── */

/* Sidebar (pb-sidebar) — project-level stage navigation */
.pb-sidebar {
  min-width: 0; overflow: hidden;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--paper);
  padding: 18px 14px 14px;
  gap: 4px;
  position: relative;
}
.pb-sidebar .brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 16px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 10px;
}
.pb-sidebar .brand .mark {
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-weight: 600; font-size: 15px;
  letter-spacing: -0.02em;
}
.pb-sidebar .brand .name {
  font-family: var(--serif); font-weight: 600; font-size: 17px;
  letter-spacing: -0.01em;
}
.pb-sidebar-project {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--rad);
  margin-bottom: 14px;
  background: var(--surface);
}
.pb-sidebar-project-title {
  font-family: var(--serif); font-size: 14.5px; font-weight: 600;
  color: var(--ink);
}
.pb-sidebar-project-sub {
  font-size: 12px; color: var(--ink-4); margin-top: 2px;
}
.pb-sidebar nav {
  display: flex; flex-direction: column;
  padding: 0; flex: 1; overflow-y: auto;
}
.pb-sidebar-bottom { padding: 4px 0 14px; border-top: 1px solid var(--line-soft); }
.pb-nav-group-label {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4); padding: 6px 10px 4px;
  font-weight: 600;
  margin-top: 14px;
}
.pb-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 15px; color: var(--ink-2);
  text-decoration: none;
  cursor: pointer;
}
.pb-nav-item:hover { background: var(--paper-2); }
.pb-nav-item.active {
  background: var(--ink); color: var(--paper);
}
.pb-nav-item svg { width: 15px; height: 15px; opacity: 0.75; flex-shrink: 0; }
.pb-nav-item.active svg { opacity: 1; }

/* Support control renders as a nav item but is a <button> (it opens a dialog). */
.pb-sidebar-bottom button.pb-nav-item {
  width: 100%; background: none; border: 0; font: inherit; text-align: left;
}
.pb-sidebar-bottom .pb-nav-item:focus-visible {
  outline: 2px solid var(--focus-ring, #8b5cf6); outline-offset: 2px;
}

/* Status span — error/info feedback in empty state, below the actions row */
.pb-status {
  font-family: var(--mono); font-size: 12px; color: var(--err);
  letter-spacing: 0.02em;
}

/* Meta-strip cells — narrower than main fields.
   NOTE: this previously hard-set repeat(4, 1fr), which overrode (and defeated)
   the fluid auto-fill grid above. Updated to match so the meta-strip stays fluid. */
.pb-meta-strip { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }

.pb-meta-cell {
  position: relative;
  padding: 4px 0 8px;
}
.pb-meta-cell.edited { padding-left: 14px; }
.pb-meta-cell.edited::before {
  content: "";
  position: absolute;
  left: 4px; top: 10px; bottom: 10px;
  width: 2px; background: var(--violet); border-radius: 1px;
}
.pb-meta-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 5px;
}
.pb-meta-label {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
}
.pb-meta-cell .pb-revert {
  height: 18px; padding: 0 5px;
  font-size: 12px; gap: 0;
}
.pb-meta-cell .pb-savestate {
  display: block;
  margin-top: 3px;
  font-size: 12px;
}

/* kbd chips in the empty-state tip */
.kbd {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-style: normal;
  font-size: 12px; letter-spacing: 0.12em;
  background: var(--paper-2); border: 1px solid var(--line-soft);
  padding: 1px 6px; border-radius: 3px;
  color: var(--ink-3); white-space: nowrap;
}

/* ─── Sidebar collapse mechanism (global) ────────────────────────────────────
   Toggle button injected by ProjectSidebar component.
   State controlled by `sidebar-collapsed` class on <html>.
   Persisted in localStorage; FOUC prevented by app.html inline script.
   Any new page shell that uses a grid layout with the sidebar as col 1
   must add its own html.sidebar-collapsed rule to this block.
   ───────────────────────────────────────────────────────────────────────── */

.pb-sidebar-toggle {
  position: absolute;
  top: 12px;
  right: 8px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink-4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 5;
  transition: color 0.1s, border-color 0.1s, background 0.1s, transform 0.18s ease;
}
.pb-sidebar-toggle:hover {
  color: var(--ink);
  border-color: var(--ink-4);
}

/* ─── Collapsed state ───────────────────────────────────────────────────── */

html.sidebar-collapsed .pb-sidebar .brand .name        { display: none; }
html.sidebar-collapsed .pb-sidebar .pb-sidebar-project { display: none; }
html.sidebar-collapsed .pb-sidebar .pb-sidebar-user    { display: none; }
html.sidebar-collapsed .pb-sidebar .pb-nav-group-label { display: none; }
html.sidebar-collapsed .pb-sidebar .pb-nav-item span   { display: none; }
/* Support/Settings stay reachable in the collapsed rail as centered icons
   (labels hidden by the .pb-nav-item span rule above; tooltip via title=). */
html.sidebar-collapsed .pb-sidebar .pb-sidebar-bottom  { display: block; }

html.sidebar-collapsed .pb-sidebar .brand {
  justify-content: center;
  padding: 18px 0 14px;
}
html.sidebar-collapsed .pb-sidebar .pb-nav-item {
  justify-content: center;
  padding: 8px 4px;
  margin: 1px 6px;
  gap: 0;
}

html.sidebar-collapsed .pb-sidebar-toggle {
  transform: rotate(180deg);
}

/* ─── Per-shell grid overrides ──────────────────────────────────────────── */

html.sidebar-collapsed .pb-app                { grid-template-columns: 60px minmax(0, 1fr) 320px; }
html.sidebar-collapsed .pb-app.no-rail        { grid-template-columns: 60px minmax(0, 1fr); }
html.sidebar-collapsed .wb-app                { grid-template-columns: 60px 1fr 320px; }
html.sidebar-collapsed .wb-app.no-rail        { grid-template-columns: 60px 1fr; }
html.sidebar-collapsed .ch-app                { grid-template-columns: 60px 1fr; }
html.sidebar-collapsed .ss-app                { grid-template-columns: 60px 1fr; }
html.sidebar-collapsed .th-app                { grid-template-columns: 60px 1fr; }
html.sidebar-collapsed .ed-app                { grid-template-columns: 60px 1fr; }
html.sidebar-collapsed .sc-app                { grid-template-columns: 60px 1fr; }
html.sidebar-collapsed .dm-app                { grid-template-columns: 60px 1fr; }
/* Chapter map's shell is the generic .app grid from tokens.css (232px 1fr) —
   the old .cm-app selector here matched nothing, so chapter-map never shrank
   to the 60px icon rail and the toggle looked dead on that page. */
html.sidebar-collapsed .app                   { grid-template-columns: 60px minmax(0, 1fr); }
/* Flex shells — sidebar width controlled directly */
html.sidebar-collapsed .pa-app .pb-sidebar    { flex: 0 0 60px; min-width: 60px; max-width: 60px; }

/* keep the paper sheet shrinkable inside the fluid main track */
.pb-sheet { min-width: 0; }

/* topbar reflows instead of clipping the save-state at narrow widths */
.pb-topbar { flex-wrap: wrap; gap: 4px 12px; }
.pb-topbar .crumbs { min-width: 0; }

/* RAIL mode-change: below 1100px the right rail stacks under main instead of
   squeezing it. Desktop layout above this is unchanged. */
@media (max-width: 1100px) {
  .pb-app:not(.no-rail) { grid-template-columns: 280px minmax(0, 1fr); }
  html.sidebar-collapsed .pb-app:not(.no-rail) { grid-template-columns: 60px minmax(0, 1fr); }
  .pb-rail {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }
}

/* NARROW: auto-collapse the sidebar to the existing 60px icon-rail.
   Reuses the html.sidebar-collapsed presentation, applied automatically by
   width so the nav stays visible (icons only) rather than going off-canvas.
   The manual toggle still works at wider widths. */
@media (max-width: 899px) {
  .pb-app,
  .pb-app.no-rail { grid-template-columns: 60px minmax(0, 1fr); }

  .pb-sidebar .brand .name,
  .pb-sidebar .pb-sidebar-project,
  .pb-sidebar .pb-sidebar-user,
  .pb-sidebar .pb-nav-group-label,
  .pb-sidebar .pb-nav-item span { display: none; }

  .pb-sidebar .brand { justify-content: center; padding: 18px 0 14px; }
  .pb-sidebar .pb-nav-item { justify-content: center; padding: 8px 4px; margin: 1px 6px; gap: 0; }

  /* hide the manual collapse toggle while width-collapsed */
  .pb-sidebar-toggle { display: none; }

  .pb-topbar { padding: 12px 20px; }
}

@media (max-width: 480px) {
  .pb-sheet { padding: 28px 16px 44px; }
  .pb-topbar { padding: 12px 14px; }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE FOUNDATION (2026-06-11) — app-shell drawer + heading scale.
   The sidebar (ProjectSidebar) becomes an overlay drawer at <=768px with a
   fixed hamburger toggle (wired in app.js via html.sb-drawer-open), and every
   page shell collapses to a single column. Same feel as the chat panel's
   <=640px full-height mode. Layout only — no visual restyling.
   ════════════════════════════════════════════════════════════════════════ */

/* Base (all widths): the hamburger + scrim are rendered by ProjectSidebar as
   siblings of the aside, hidden by these author rules until the <=768px block
   shows them (same specificity, later cascade wins). Do NOT add the `hidden`
   ATTRIBUTE to their markup: the UA stylesheet applies
   [hidden] { display: none !important } (current HTML spec), which no author
   rule can override — it permanently kills the button. The stale-CSS gap the
   attribute once covered is closed by HTML no-cache + versioned stylesheet
   URLs. position:fixed keeps them out of any grid/flex flow regardless. */
.pb-drawer-hamburger { display: none; position: fixed; }
.pb-drawer-scrim     { display: none; position: fixed; }

@media (max-width: 768px) {
  /* Every app shell goes single-column; the sidebar leaves the flow below.
     !important outranks the per-page 899px icon-rail and html.sidebar-collapsed
     variants without touching ten stylesheets. (.app = chapter-map's shell;
     .pa-app is flex, so removing the aside from flow is sufficient there.) */
  .pb-app, .pb-app.no-rail,
  .wb-app, .wb-app.no-rail,
  .th-app, .th-app.no-rail,
  .ch-app, .ch-app.no-rail,
  .ss-app, .ss-app.no-rail,
  .dm-app, .sc-app, .ed-app, .pdb-app, .app {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Sidebar -> overlay drawer (closed by default, slides in).
     .pdb-sidebar = dashboard's own aside (it doesn't use ProjectSidebar);
     it gets the same drawer treatment, driven by the same hamburger/scrim
     markup the dashboard page renders. */
  .pb-sidebar,
  .pdb-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(260px, 78vw);
    z-index: 80;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
  }
  html.sb-drawer-open .pb-sidebar,
  html.sb-drawer-open .pdb-sidebar { transform: none; }

  /* Flex shells (plot): clear the icon-rail flex sizing so the drawer opens
     at full width — same collapsed-state twins the label rules need, because
     html.sidebar-collapsed .pa-app .pb-sidebar { flex/max-width: 60px } at the
     top of this sheet outranks the bare drawer rule above. */
  .pa-app .pb-sidebar,
  html.sidebar-collapsed .pa-app .pb-sidebar {
    flex: none; min-width: 0; max-width: none;
    width: min(260px, 78vw);
  }

  /* The drawer always shows the FULL sidebar: undo the 899px icon-rail label
     hiding and the manual collapsed mode. Each selector needs an
     html.sidebar-collapsed twin — the collapse class persists from desktop
     (and the 899px auto-rail), and its label-hiding rules at the top of this
     sheet carry an extra class of specificity that beat the bare restatement
     (icons-only drawer on phones). The twins match that specificity and win
     on cascade order. */
  .pb-sidebar .brand .name,
  html.sidebar-collapsed .pb-sidebar .brand .name,
  .pb-sidebar .pb-sidebar-project,
  html.sidebar-collapsed .pb-sidebar .pb-sidebar-project,
  .pb-sidebar .pb-sidebar-user,
  html.sidebar-collapsed .pb-sidebar .pb-sidebar-user,
  .pb-sidebar .pb-nav-group-label,
  html.sidebar-collapsed .pb-sidebar .pb-nav-group-label,
  .pb-sidebar .pb-sidebar-bottom,
  html.sidebar-collapsed .pb-sidebar .pb-sidebar-bottom { display: block; }
  .pb-sidebar .pb-nav-item span,
  html.sidebar-collapsed .pb-sidebar .pb-nav-item span { display: inline; }
  .pb-sidebar .brand,
  html.sidebar-collapsed .pb-sidebar .brand { display: flex; justify-content: flex-start; padding: 4px 8px 16px; }
  .pb-sidebar .pb-nav-item,
  html.sidebar-collapsed .pb-sidebar .pb-nav-item { justify-content: flex-start; padding: 7px 10px; margin: 0; gap: 10px; }
  .pb-sidebar-toggle { display: none; } /* width-collapse is meaningless in a drawer */

  /* keep the bottom block honoring its inline display:none */
  .pb-sidebar .pb-sidebar-bottom[style*="display:none"] { display: none; }

  /* Hamburger: fixed top-left, 44px touch target, under the drawer */
  .pb-drawer-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 10px; left: 10px;
    width: 44px; height: 44px;
    border-radius: 10px;
    border: 1px solid var(--line, #e5e1d8);
    background: var(--paper, #faf8f3);
    color: var(--ink-2, #444);
    cursor: pointer;
    z-index: 70;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }

  /* Scrim: shown only while the drawer is open; tap closes (wired in app.js) */
  html.sb-drawer-open .pb-drawer-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 75;
  }

  /* Topbars clear the fixed hamburger (left:10px + 44px wide) AND the fixed
     Clerk avatar (#clerk-user-btn, top:8 right:12, ~32px — app.html). !important
     because every page sheet loads after this one and sets its own padding. */
  .pb-topbar, .dm-topbar, .cm-topbar, .pdb-header {
    padding-left: 64px !important;
    padding-right: 56px !important;
  }

  /* Breadcrumbs wrap instead of crowding the viewport edge */
  .pb-topbar .crumbs, .dm-topbar .crumbs, .cm-crumbs { min-width: 0; flex-wrap: wrap; }

  /* Wizard choice cards (ending design) stack full-width */
  .pb-wizard-choices { grid-template-columns: 1fr; }
  .pb-wizard-choice { padding: 18px 16px; }

  /* Pregeneration heroes: story-bible's phone rendering is the approved
     reference. The doubled class outranks the per-page .xx-empty overrides
     (equal specificity but later sheets) without an !important war. */
  .pb-empty-state.pb-empty-state { padding: 40px 16px; max-width: 100%; min-width: 0; }
  .pb-empty-state.pb-empty-state * { min-width: 0; }
  .pb-empty-state.pb-empty-state h1 {
    font-size: clamp(1.6rem, 8vw, 2.4rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  .pb-empty-state.pb-empty-state .actions,
  .pb-empty-state.pb-empty-state .pb-empty-actions { flex-direction: column; align-items: stretch; }
  .pb-empty-state.pb-empty-state .actions .pb-btn,
  .pb-empty-state.pb-empty-state .pb-empty-actions .pb-btn { width: 100%; justify-content: center; }

  /* Building/generating states: full-width container, clamped type. The base
     .pb-building (80px/64px padding, 28px lede) rendered one-word-per-line in
     a phone column. Doubled class outranks any per-page override. */
  .pb-building.pb-building { padding: 32px 16px 48px; max-width: 100%; min-width: 0; }
  .pb-building.pb-building * { min-width: 0; }
  .pb-building.pb-building h1 {
    font-size: clamp(1.5rem, 7vw, 2.25rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  .pb-building.pb-building .lede {
    font-size: clamp(1.05rem, 4.6vw, 1.5rem);
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  /* Populated/generated page headings on every stage get the same clamp scale
     as the heroes. Doubled class beats each page sheet's fixed 32-56px rule
     (equal specificity, later sheet) without touching ten files. */
  .pb-title.pb-title,
  .wb-title.wb-title,
  .pm-title.pm-title,
  .th-page-title.th-page-title,
  .pa-page-title.pa-page-title,
  .sc-title.sc-title,
  .cast-name-big.cast-name-big,
  .ss-tab-title.ss-tab-title {
    font-size: clamp(1.5rem, 7vw, 2.25rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  .sc-chapter-head .num.num { font-size: clamp(1.35rem, 6vw, 2rem); }
}

/* Fluid page headings on small screens (matches the story-bible fix; lives
   here because premise.css owns the 44px base size). */
@media (max-width: 560px) {
  .pb-empty-state h1,
  .pb-empty-state .pb-empty-headline {
    font-size: clamp(1.6rem, 8vw, 2.4rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
}