/* Draft stage — Manuscript (.dm-*) and Fidelity (.df2-*) layouts.
   Sits on top of tokens.css. Inherits the cream / paper-card vocabulary
   shared with Scene Cards, Chapter Map and Story Bible.                */

/* ──────────────────────────────────────────────────────────────────
   Shell shared by Manuscript and Fidelity
   ────────────────────────────────────────────────────────────────── */

.dm-app {
  display: grid;
  grid-template-columns: 232px 1fr;
  grid-template-rows: 1fr;
  height: 100vh;
  overflow: hidden;
  background: var(--paper);
}
.dm-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.dm-topbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.dm-topbar .crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.dm-topbar .crumbs .sep { color: var(--ink-5); }
.dm-topbar .crumbs .here { color: var(--ink); font-weight: 500; }
.dm-topbar .actions { display: flex; align-items: center; gap: 6px; }

.dm-seg {
  display: inline-flex; padding: 2px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px;
  margin-right: 4px;
}
.dm-seg button {
  height: 26px; padding: 0 12px; border: 0; background: transparent;
  font-size: 12px; color: var(--ink-3); border-radius: 4px; font-weight: 500;
}
.dm-seg button.active {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.dm-stage {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 360px 1fr 260px;
  background: var(--paper-2);
}
.dm-stage.no-rail { grid-template-columns: 360px 1fr; }

/* ──────────────────────────────────────────────────────────────────
   Manuscript rail (left) — used by both layouts
   ────────────────────────────────────────────────────────────────── */

.dm-rail {
  border-right: 1px solid var(--line);
  background: var(--paper);
  display: flex; flex-direction: column; min-height: 0;
}
.dm-rail-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--line-soft); }
.dm-rail-head .lbl {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
}
.dm-rail-head .ttl {
  font-family: var(--serif); font-size: 16px; font-weight: 600;
  margin-top: 2px; letter-spacing: -0.01em;
}
.dm-rail-head .meta {
  margin-top: 8px;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
  display: flex; gap: 6px; align-items: center;
}
.dm-rail-head .meta .sep { color: var(--ink-5); }

.dm-rail-list { flex: 1; min-height: 0; overflow: auto; padding: 8px 6px 24px; }
.dm-rail-act {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 10px 4px;
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-4);
}
.dm-rail-act .num { color: var(--ink-2); }
.dm-rail-act .ttl { color: var(--ink-4); }

.dm-rail-ch {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--ink-2);
  border-radius: 5px;
  cursor: pointer;
  margin: 1px 0;
}
.dm-rail-ch:hover { background: var(--paper-2); }
.dm-rail-ch.current {
  background: var(--surface);
  box-shadow: inset 2px 0 0 var(--violet);
  color: var(--ink);
  font-weight: 500;
}
.dm-rail-ch .stat {
  width: 6px; height: 6px; border-radius: 999px; background: var(--ink-5);
  flex-shrink: 0;
}
.dm-rail-ch .stat.drafted  { background: var(--ok); }
.dm-rail-ch .stat.drafting { background: var(--warn); }
.dm-rail-ch .stat.locked   { background: var(--ink-5); opacity: 0.45; }
.dm-rail-ch .num { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); min-width: 32px; }
.dm-rail-ch.current .num { color: var(--ink-3); }
.dm-rail-ch .ttl { flex: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.dm-rail-ch .sc {
  font-family: var(--mono); font-size: 10px; color: var(--violet);
  background: var(--violet-soft);
  padding: 1px 5px; border-radius: 999px;
}

/* ──────────────────────────────────────────────────────────────────
   MANUSCRIPT — editor column
   ────────────────────────────────────────────────────────────────── */

.dm-editor {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--paper-2);
}
.dm-editor-scroll {
  flex: 1; min-height: 0; overflow: auto;
  padding: 32px 24px 64px;
}
.dm-page {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(20,17,12,0.025), 0 18px 40px -28px rgba(20,17,12,0.18);
  padding: 56px 64px 64px;
}

/* Chapter header */
.dm-ch-head { margin-bottom: 28px; }
.dm-ch-head .eyebrow {
  display: flex; gap: 10px; align-items: center;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
  margin-bottom: 12px;
}
.dm-ch-head .eyebrow .sep { color: var(--ink-5); }
.dm-ch-head .eyebrow .status {
  height: 18px; padding: 0 8px; border-radius: 999px;
  background: var(--ok); color: var(--paper);
  font-size: 9px; letter-spacing: 0.14em;
  display: inline-flex; align-items: center;
}
.dm-ch-title {
  font-family: var(--serif); font-weight: 600;
  font-size: 38px; line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 10px;
  color: var(--ink);
}
.dm-ch-meta {
  font-family: var(--sans);
  font-size: 12.5px; color: var(--ink-3);
  display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap;
}
.dm-ch-meta .lbl {
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600; margin-right: 5px;
}
.dm-ch-meta .sep { color: var(--ink-5); }
.dm-ch-actions {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
  display: flex;
  justify-content: center;
}
.dm-ch-actions .btn.primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 24px;
  font-size: 14px; font-weight: 500; font-family: var(--sans);
  border-radius: 6px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  cursor: pointer;
}
.dm-ch-actions .btn.primary:hover { background: var(--paper-2); }

/* Carry in/out */
.dm-carry {
  margin: 20px 0 24px;
  padding: 12px 16px;
  border: 1px dashed var(--line-2);
  border-radius: 6px;
  background: var(--paper-2);
  display: flex; flex-direction: column; gap: 4px;
}
.dm-carry .lbl {
  font-family: var(--sans); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
}
.dm-carry .line {
  font-family: var(--serif); font-style: italic;
  font-size: 14px; line-height: 1.5; color: var(--ink-3);
}

/* Scene seam — between scenes */
.dm-seam {
  margin: 36px 0 18px;
  padding: 0;
}
.dm-seam-rule {
  height: 1px; background: var(--line);
  margin-bottom: 14px;
  background: linear-gradient(to right, transparent 0, var(--line) 12%, var(--line) 88%, transparent 100%);
}
.dm-seam.landed .dm-seam-rule {
  background: linear-gradient(to right, transparent 0, var(--ok) 12%, var(--ok) 88%, transparent 100%);
  opacity: 0.55;
}
.dm-seam-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.dm-seam-head .num {
  color: var(--ink); font-weight: 600;
  background: var(--paper-2);
  padding: 2px 8px; border-radius: 999px;
}
.dm-seam-head .pov { color: var(--ink-2); }
.dm-seam-head .sep { color: var(--ink-5); }
.dm-seam-head .setting {
  font-family: var(--serif); font-style: italic;
  font-size: 12.5px; color: var(--ink-3);
  letter-spacing: 0;
}
.dm-seam-head .beat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px;
  border-radius: 999px;
  font-family: var(--sans); font-size: 11px;
  border: 1px solid var(--line-soft);
}
.dm-seam-head .beat-chip .dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--ok);
}
.dm-seam-head .beat-chip .phase {
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 600;
}
.dm-seam-head .beat-chip .ttl {
  color: var(--ink); font-weight: 500;
}
.dm-seam-head .wc {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-3); white-space: nowrap;
}
.dm-seam-head .wc .of { color: var(--ink-4); }
.dm-seam-head .wc .delta { margin-left: 6px; color: var(--ink-4); font-weight: 500; }
.dm-seam-head .wc.over .delta { color: var(--warn); }
.dm-seam-head .wc.under .delta { color: var(--bad); }
.dm-seam-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px;
  background: transparent; border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--sans); font-size: 10.5px; color: var(--ink-3);
}
.dm-seam-toggle:hover { background: var(--paper-2); color: var(--ink); }
.dm-seam-toggle svg { transition: transform 120ms ease; }
.dm-seam-toggle svg.open { transform: rotate(180deg); }

/* Expanded contract under the seam */
.dm-seam-contract {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-family: var(--sans);
}
.dm-seam-contract .row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 5px 0;
}
.dm-seam-contract .row .lbl {
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
}
.dm-seam-contract .row .val {
  font-size: 13px; line-height: 1.55; color: var(--ink-2);
}
.dm-seam-contract .row.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; padding-top: 10px; padding-bottom: 8px; }
.dm-seam-contract .row.split > div { display: flex; flex-direction: column; gap: 4px; }
.dm-seam-contract .row.split .lbl { margin-bottom: 1px; }
.dm-seam-contract .row.split .val { font-size: 12px; }
.dm-seam-contract .thrs { display: flex; flex-wrap: wrap; gap: 4px; }
.dm-seam-contract .thr {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 11px; color: var(--ink-2);
}
.dm-seam-contract .thr .sw { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
.dm-seam-contract .ending em {
  font-family: var(--serif); font-style: italic; color: var(--ink);
}
.dm-seam-contract .ending .sep { color: var(--ink-5); margin: 0 6px; }
.dm-seam-contract .ending .pivot { font-family: var(--serif); font-style: italic; color: var(--ink-3); }

/* Pregeneration scene = ONE block: the ASKED FOR / threads / cast strip flows
   directly under the metadata header (like prose does in the drafted state)
   instead of sitting in a separate bordered box. The drafted/partial states
   keep the boxed contract above — this only applies to .dm-seam-pregen. */
.dm-seam-pregen .dm-seam-contract {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 2px 0 0;
  margin-bottom: 0;
}

.dm-seam-flags {
  margin-top: 8px; padding-top: 10px;
  border-top: 1px dashed var(--line-2);
  display: flex; flex-direction: column; gap: 6px;
}
.dm-seam-flags .flag {
  display: grid; grid-template-columns: 14px 1fr; gap: 8px;
  font-size: 11.5px; line-height: 1.45;
}
.dm-seam-flags .flag .ic { margin-top: 2px; }
.dm-seam-flags .flag.ok .ic { color: var(--ok); }
.dm-seam-flags .flag.warn .ic { color: var(--warn); }
.dm-seam-flags .flag .lbl {
  color: var(--ink); font-weight: 500;
  font-family: var(--sans); font-size: 11.5px;
  text-transform: none; letter-spacing: 0;
  margin-right: 6px;
}
.dm-seam-flags .flag .note { color: var(--ink-3); }
.dm-seam-flags .flag > div:nth-child(2) { display: flex; flex-wrap: wrap; gap: 0 6px; }

/* Prose */
.dm-prose {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.68;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.dm-prose p { margin: 0 0 1.05em; text-wrap: pretty; }
.dm-prose p.drop::first-letter {
  font-family: var(--serif); font-weight: 600;
  font-size: 58px; line-height: 0.95;
  float: left; margin: 6px 8px 0 -2px; color: var(--ink);
}

.dm-end {
  display: flex; align-items: center; gap: 12px;
  margin: 36px 0 18px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--ink-4); text-transform: uppercase;
}
.dm-end::before, .dm-end::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Status bar */
.dm-status {
  border-top: 1px solid var(--line);
  background: var(--paper);
  display: flex; align-items: center; gap: 16px;
  padding: 9px 24px;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3);
  flex-wrap: wrap;
}
.dm-status .sep { color: var(--ink-5); }
.dm-status .strong { color: var(--ink); font-weight: 500; }
.dm-status .meter { display: inline-flex; align-items: center; gap: 6px; }
.dm-status .meter .bar {
  width: 80px; height: 4px;
  background: var(--paper-3); border-radius: 999px; overflow: hidden;
}
.dm-status .meter .fill { height: 100%; background: var(--violet); border-radius: 999px; }

/* ──────────────────────────────────────────────────────────────────
   MANUSCRIPT — overview rail (right)
   ────────────────────────────────────────────────────────────────── */

.dm-overview {
  border-left: 1px solid var(--line);
  background: var(--paper);
  display: flex; flex-direction: column; min-height: 0;
  overflow: auto;
}
.dm-app .dm-editor-scroll,
.dm-app .dm-rail-list,
.dm-app .dm-overview {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dm-app .dm-editor-scroll::-webkit-scrollbar,
.dm-app .dm-rail-list::-webkit-scrollbar,
.dm-app .dm-overview::-webkit-scrollbar {
  display: none;
}
.dm-ov-section {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.dm-ov-section .h {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600; margin-bottom: 12px;
}
.dm-ov-arc { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.dm-ov-arc li {
  font-family: var(--serif); font-size: 13.5px; line-height: 1.45; color: var(--ink-2);
  position: relative; padding-left: 14px;
}
.dm-ov-arc li .bullet {
  position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 999px; background: var(--violet);
}

.dm-ov-beat {
  padding: 10px 12px;
  background: var(--tint, var(--paper-2));
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  margin-bottom: 8px;
}
.dm-ov-beat .phase-line {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
  margin-bottom: 4px;
}
.dm-ov-beat .phase-line .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--ok); }
.dm-ov-beat .phase-line .sc { margin-left: auto; color: var(--ink-4); }
.dm-ov-beat .ttl {
  font-family: var(--serif); font-size: 13.5px; font-weight: 500;
  color: var(--ink); line-height: 1.35;
}

.dm-ov-thread {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  font-size: 12.5px; color: var(--ink);
}
.dm-ov-thread .sw { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }
.dm-ov-thread .name { flex: 1; }
.dm-ov-thread .count { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }

.dm-ov-fore {
  display: grid; grid-template-columns: 70px 1fr;
  gap: 4px 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 11.5px;
  align-items: baseline;
}
.dm-ov-fore:first-of-type { border-top: 0; padding-top: 0; }
.dm-ov-fore .kind {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-4); font-weight: 600;
}
.dm-ov-fore .kind.seed       { color: var(--ok); }
.dm-ov-fore .kind.escalation { color: var(--warn); }
.dm-ov-fore .kind.payoff     { color: var(--violet-deep); }
.dm-ov-fore .lbl { color: var(--ink); grid-column: 2; }
.dm-ov-fore .ref { grid-column: 2; font-family: var(--mono); font-size: 10px; color: var(--ink-4); }

.dm-ov-flag {
  display: grid; grid-template-columns: 16px 1fr;
  gap: 8px; padding: 8px 10px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--warn);
  border-radius: 6px;
  font-size: 11.5px;
  margin-bottom: 6px;
}
.dm-ov-flag .ic { color: var(--warn); margin-top: 1px; }
.dm-ov-flag .ttl { font-weight: 500; color: var(--ink); margin-bottom: 2px; font-size: 11.5px; line-height: 1.35; }
.dm-ov-flag .ttl .sc { font-family: var(--mono); font-size: 10px; color: var(--ink-4); margin-left: 6px; }
.dm-ov-flag .note { color: var(--ink-3); line-height: 1.45; }

.dm-ov-meta { display: flex; flex-direction: column; gap: 6px; }
.dm-ov-meta .hint { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }

.dm-app .dm-build-anim { padding: 8px 0; }
.dm-app .dm-build-anim .eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--ink-4); text-transform: uppercase; margin-bottom: 6px;
}
.dm-app .dm-build-anim .ttl {
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  color: var(--ink); margin: 0 0 12px; line-height: 1.2;
}
.dm-app .dm-build-anim .bar {
  width: 100%; height: 4px; background: var(--paper-3);
  border-radius: 2px; overflow: hidden; margin-bottom: 8px;
}
.dm-app .dm-build-anim .bar .fill {
  height: 100%; background: var(--violet); transition: width 0.5s ease;
}
.dm-app .dm-build-anim .phase {
  font-family: var(--sans); font-size: 12px; color: var(--ink-3); font-style: italic;
}

/* ──────────────────────────────────────────────────────────────────
   FIDELITY (.df2-*) — per-scene rows: contract | prose
   ────────────────────────────────────────────────────────────────── */

.df2-editor {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--paper-2);
}
.df2-editor-scroll {
  flex: 1; min-height: 0; overflow: auto;
  padding: 28px 28px 56px;
}
.df2-page { max-width: 1200px; margin: 0 auto; }

.df2-ch-head { margin-bottom: 22px; padding: 0 4px; }
.df2-ch-head .eyebrow {
  display: flex; gap: 8px; align-items: center;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
  margin-bottom: 8px;
}
.df2-ch-head .eyebrow .sep { color: var(--ink-5); }
.df2-ch-title {
  font-family: var(--serif); font-weight: 600;
  font-size: 32px; line-height: 1.12;
  letter-spacing: -0.025em; margin: 0 0 8px;
}
.df2-ch-sub {
  font-family: var(--serif); font-size: 14.5px;
  color: var(--ink-3); line-height: 1.5; max-width: 680px;
}

/* Scene row */
.df2-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: 0 1px 0 rgba(20,17,12,0.025);
}
.df2-row.landed { border-color: var(--line); }

.df2-row-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 16px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 600;
  border-bottom: 1px solid var(--line-soft);
}
.df2-row-banner .dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--ok);
}
.df2-row-banner .phase { color: var(--ink-2); }
.df2-row-banner .ttl {
  margin-left: auto;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 13px; color: var(--ink);
  text-transform: none; letter-spacing: 0;
}

.df2-row-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
}

/* Contract panel */
.df2-contract {
  border-right: 1px solid var(--line);
  background: var(--paper-2);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--sans);
}
.df2-c-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.df2-c-head .num {
  font-family: var(--serif); font-size: 26px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink); line-height: 1;
}
.df2-c-head .pov {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-3); letter-spacing: 0.04em;
}
.df2-c-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 3px 0;
}
.df2-c-row .lbl {
  font-size: 9.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-4); font-weight: 600;
}
.df2-c-row .val {
  font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
}
.df2-c-row .val.tone { font-family: var(--serif); font-style: italic; color: var(--ink); font-size: 13.5px; }
.df2-c-row .thr-list { display: flex; flex-wrap: wrap; gap: 4px; }
.df2-c-row .thr {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 11px; color: var(--ink-2);
}
.df2-c-row .thr .sw { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
.df2-c-row.beat {
  margin-top: 4px;
  padding: 8px 0 6px;
  border-top: 1px dashed var(--line-2);
}
.df2-c-row .beat-val {
  display: flex; flex-direction: column; gap: 2px;
}
.df2-c-row .beat-val .phase {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ok); font-weight: 600;
}
.df2-c-row .beat-val .ttl {
  font-family: var(--serif); font-style: italic;
  font-size: 13.5px; color: var(--ink);
}
.df2-c-row.words .val { font-family: var(--mono); font-size: 11.5px; }
.df2-c-row.words .actual { color: var(--ink); font-weight: 600; }
.df2-c-row.words .sep { margin: 0 4px; color: var(--ink-5); }
.df2-c-row.words .target { color: var(--ink-3); }
.df2-c-row.words .delta { margin-left: 8px; padding: 1px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 600; }
.df2-c-row.words .delta.over { background: #FBEFE5; color: var(--warn); }
.df2-c-row.words .delta.under { background: #FBE5E5; color: var(--bad); }

.df2-c-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.df2-c-section .lbl {
  font-size: 9.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-4); font-weight: 600;
  margin-bottom: 6px;
}
.df2-c-section .summary {
  font-family: var(--serif); font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
}
.df2-c-section .ending {
  font-family: var(--serif);
  font-size: 13px; line-height: 1.5;
  display: flex; flex-direction: column; gap: 2px;
}
.df2-c-section .ending .emotion { font-style: italic; color: var(--ink); font-weight: 500; }
.df2-c-section .ending .location { color: var(--ink-3); }
.df2-c-section .ending .pivot { color: var(--ink-3); font-style: italic; }

.df2-c-flags {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.df2-c-flags .flag {
  display: grid; grid-template-columns: 14px 1fr; gap: 8px;
  font-size: 11.5px;
}
.df2-c-flags .flag .ic { margin-top: 2px; }
.df2-c-flags .flag.ok .ic { color: var(--ok); }
.df2-c-flags .flag.warn .ic { color: var(--warn); }
.df2-c-flags .flag .lbl { color: var(--ink); font-weight: 500; line-height: 1.35; margin-bottom: 2px; }
.df2-c-flags .flag .note { color: var(--ink-3); line-height: 1.45; }

/* Prose panel */
.df2-prose {
  background: var(--surface);
  display: flex; flex-direction: column;
  min-width: 0;
}
.df2-p-tools {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper);
}
.df2-p-tools .tool {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface);
  font-size: 11.5px; color: var(--ink-2); font-family: var(--sans);
  cursor: pointer;
}
.df2-p-tools .tool:hover { background: var(--paper-2); color: var(--ink); }
.df2-p-tools .tool.muted {
  background: transparent; border-color: transparent; color: var(--ink-4);
  cursor: default;
}
.df2-p-tools .tool.muted:hover { background: transparent; color: var(--ink-4); }

.df2-p-body {
  padding: 22px 28px 18px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.df2-para {
  position: relative;
  padding: 2px 36px 2px 14px;
  margin-bottom: 0.5em;
  border-left: 2px solid transparent;
}
.df2-para p { margin: 0 0 0.6em; text-wrap: pretty; }
.df2-para.has-anno { border-left-color: var(--violet-soft); }
.df2-para.hover { background: rgba(110,91,207,0.035); border-left-color: var(--violet); }
.df2-para-tools {
  position: absolute; right: 8px; top: 8px;
  display: flex; gap: 4px;
  opacity: 0;
  transition: opacity 100ms ease;
}
.df2-para.hover .df2-para-tools { opacity: 1; }
.df2-para-tools button {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-3);
  cursor: pointer;
}
.df2-para-tools button:hover { background: var(--paper-2); color: var(--ink); }

.df2-para-anno {
  margin-top: 6px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 6px 10px;
  background: var(--paper-2);
  border-radius: 5px;
  font-family: var(--sans);
}
.df2-para-anno .kind {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 600;
  padding: 1px 6px; border-radius: 3px; background: var(--surface); border: 1px solid var(--line);
}
.df2-para-anno.seed       .kind { color: var(--ok); }
.df2-para-anno.escalation .kind { color: var(--warn); }
.df2-para-anno.callback   .kind { color: var(--violet-deep); }
.df2-para-anno.absence    .kind { color: var(--ink-3); }
.df2-para-anno.payoff-foreshadow .kind { color: var(--violet-deep); }
.df2-para-anno .note { font-size: 11.5px; color: var(--ink-2); flex: 1; min-width: 220px; line-height: 1.45; }
.df2-para-anno .ref {
  font-family: var(--mono); font-size: 10px; color: var(--violet-deep);
  padding: 2px 6px; background: var(--violet-soft); border-radius: 3px;
}

.df2-p-foot {
  padding: 10px 28px 14px;
  border-top: 1px dashed var(--line-2);
  background: var(--paper-2);
  font-size: 11.5px;
  display: flex; gap: 10px; align-items: baseline;
  flex-wrap: wrap;
}
.df2-p-foot .lbl {
  font-family: var(--sans);
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
  white-space: nowrap;
}
.df2-p-foot .quote {
  font-family: var(--serif); font-style: italic;
  font-size: 13px; color: var(--ink-3);
  flex: 1; min-width: 0;
}

/* ──────────────────────────────────────────────────────────────────
   Generic shell wrappers (artboard / reasoning block)
   ────────────────────────────────────────────────────────────────── */

.dm-artboard-shell {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--paper);
  font-family: var(--sans);
}

/* ──────────────────────────────────────────────────────────────────
   Contenteditable prose + autosave status
   ────────────────────────────────────────────────────────────────── */

.dm-prose[contenteditable] { outline: none; cursor: text; }
.dm-prose[contenteditable]:focus { outline: none; }

.dm-save-status {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  min-width: 44px;
  text-align: right;
  opacity: 0;
  transition: opacity 150ms ease;
}
.dm-save-status[data-state="saving"],
.dm-save-status[data-state="saved"],
.dm-save-status[data-state="error"] { opacity: 1; }
.dm-save-status[data-state="error"] { color: #b94141; }

/* Right-rail AI Assist section */
.dm-ov-ai-hint {
  font-size: 11px;
  color: var(--ink-4);
  margin: 2px 0 8px;
  line-height: 1.45;
}
.dm-ov-ai-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.btn-ai {
  flex: 1 1 calc(50% - 3px);
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink-2);
  font-size: 11.5px;
  font-family: var(--sans);
  font-weight: 500;
  cursor: pointer;
  transition: background 100ms, color 100ms, border-color 100ms;
}
.btn-ai:hover {
  background: #eeecf8;
  color: #4B3B8C;
  border-color: #c4bbef;
}

/* ── Phase A: Right-rail group structure ───────────────────────────────────── */

.dm-rail-sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.dm-rail-scroll {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.dm-rail-group {
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 4px;
}
.dm-rail-group:last-child { border-bottom: 0; }

.dm-rail-group-h {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
  margin: 0;
  padding: 16px 18px 0;
}

.dm-rail-group > .dm-ov-section:last-child { border-bottom: 0; }

.dm-rail-pending {
  padding: 10px 18px 16px;
  font-size: 12px;
  color: var(--ink-4);
  font-style: italic;
}

.dm-ov-carry {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 18px;
}
.dm-ov-carry + .dm-ov-carry { padding-top: 6px; border-top: 1px solid var(--line-soft); }
.dm-ov-carry .lbl {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
}
.dm-ov-carry .line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-3);
}

/* ── Phase B: Analysis row content ─────────────────────────────────────────── */

.dm-analysis-row {
  padding: 8px 18px 12px;
}

.dm-analysis-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
}

.dm-analysis-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dm-analysis-status-label {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

.dm-analysis-summary {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
  margin-bottom: 5px;
}

.dm-analysis-link {
  font-size: 11px;
  color: var(--violet, #8B5CF6);
  text-decoration: none;
}
.dm-analysis-link:hover { text-decoration: underline; }

/* ===== Draft: both side panels become edge drawers below 1360 ===== */
.dm-stage{grid-template-columns:360px minmax(0,1fr) 260px;}

/* edge handles + scrim (base hidden on desktop) */
.dm-stage .__df-ovh,.dm-stage .__df-rlh{display:none;align-items:center;justify-content:center;
  position:absolute;top:50%;transform:translateY(-50%);width:26px;height:64px;
  background:var(--paper,#fbfaf6);border:1px solid var(--line,#e6e2d8);color:#6b6478;cursor:pointer;
  z-index:42;box-shadow:0 4px 14px rgba(30,24,60,.14);font-size:14px;}
.dm-stage .__df-ovh{right:0;border-radius:8px 0 0 8px;border-right:none;}
.dm-stage .__df-rlh{left:0;border-radius:0 8px 8px 0;border-left:none;}
.dm-stage .__df-ovh svg,.dm-stage .__df-rlh svg{width:16px;height:16px;transition:transform .2s ease;}
.dm-stage.dm-ov-open .__df-ovh svg{transform:rotate(180deg);}
.dm-stage.dm-rail-open .__df-rlh svg{transform:rotate(180deg);}
.dm-stage .__df-scrim{display:none;position:absolute;inset:0;background:rgba(20,16,40,.28);z-index:39;}
.dm-stage.dm-ov-open .__df-scrim,.dm-stage.dm-rail-open .__df-scrim{display:block;}

/* <=1360: BOTH sides become drawers, reader full-width */
@media (max-width:1360px){
  .dm-stage{grid-template-columns:minmax(0,1fr) !important;position:relative;}
  .dm-overview{position:absolute !important;top:0 !important;right:0 !important;left:auto !important;
    height:100% !important;width:300px !important;max-width:86vw !important;z-index:40 !important;
    transform:translateX(100%) !important;transition:transform .22s ease !important;
    box-shadow:-10px 0 30px rgba(30,24,60,.16) !important;border-left:1px solid var(--line);}
  .dm-stage.dm-ov-open .dm-overview{transform:translateX(0) !important;}
  .dm-rail{position:absolute !important;top:0 !important;left:0 !important;right:auto !important;
    height:100% !important;width:320px !important;max-width:86vw !important;z-index:41 !important;
    transform:translateX(calc(-100% - 232px)) !important;transition:transform .22s ease !important;
    box-shadow:10px 0 30px rgba(30,24,60,.16) !important;}
  .dm-stage.dm-rail-open .dm-rail{transform:translateX(0) !important;}
  .dm-stage .__df-ovh{display:flex;}
  .dm-stage .__df-rlh{display:flex;}
}

/* 769-899: also collapse the app sidebar to the 60px icon-rail.
   Uses the real components/sidebar.js classes so labels actually hide.
   Lower bound matters: at <=768px premise.css turns the sidebar into an
   off-canvas drawer and forces .dm-app single-column — an unbounded
   !important here loads later and wins, dropping dm-stage into the 60px
   track (which also parked the "offscreen" assist drawers in the viewport,
   since their resting transforms assume a stage as wide as the screen). */
@media (min-width:769px) and (max-width:899px){
  .dm-app{grid-template-columns:60px minmax(0,1fr) !important;}
}

.dm-statusbar,.dm-foot{min-width:0;}

/* <=768: inner manuscript layout. The outer .dm-app/.dm-stage are already
   single-column (premise.css + the <=1360 drawer block); this pass fixes the
   inside: full-width prose sheet, stacked contract rows, clamped titles.
   The side panels become fixed slide-over drawers (closed by default) opened
   by 44px edge tabs — the <=1360 paddles reborn as real fixed buttons. The
   panels' absolute-in-stage drawer rules above are upgraded to fixed
   full-height here (same !important weight, later in the sheet, so these
   win at <=768). Used by BOTH draft and revision (shared .dm-stage classes,
   wired in components/dm-drawers.js — mutually exclusive, scrim-close, and
   opening a panel closes the nav drawer).
   z-order: panel scrim 82 < panels 84 < tabs 86 < coherence sheet 90. Tabs sit
   ABOVE their panels so re-tap closes and the other edge's tab stays reachable
   while a drawer is open (the chevron flips via the existing open-state rule). */
@media (max-width:768px){
  /* topbar: crumbs row 1 with the project name ellipsised; the chapter title
     (.here) breaks onto its own full-width row; Style hidden at phone width
     (desktop unchanged); 44px icon targets. Left/right clearance for the
     hamburger + Clerk avatar comes from premise.css's topbar rule. */
  .dm-topbar{ height:auto; min-height:52px; padding-top:6px; padding-bottom:6px; flex-wrap:wrap; row-gap:2px; }
  .dm-topbar .crumbs{ flex:1 1 auto; flex-wrap:wrap; min-width:0; row-gap:2px; }
  .dm-topbar .crumbs a{ max-width:34vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; }
  .dm-topbar .crumbs .sep:has(+ .here){ display:none; } /* no dangling slash before the title row */
  .dm-topbar .crumbs .here{ flex:1 1 100%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dm-topbar .actions{ gap:10px; }
  .dm-topbar .actions .icon-btn{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .dm-topbar .actions [data-action="toggle-style-panel"]{ display:none; }

  /* scene-seam header: wraps instead of pushing the contract pill off the
     right edge; the pill becomes a full-width row below the header */
  .dm-seam-head{ flex-wrap:wrap; row-gap:6px; min-width:0; }
  .dm-seam-head .setting{ min-width:0; overflow-wrap:anywhere; white-space:normal; }
  .dm-seam-toggle{ flex:1 1 100%; justify-content:center; height:32px; }

  .dm-editor-scroll{ padding:14px 10px 48px; }
  .dm-page{ padding:24px 16px 44px; }
  .dm-ch-title{ font-size:clamp(1.5rem, 7vw, 2.1rem); line-height:1.15; overflow-wrap:anywhere; }
  .df2-ch-title{ font-size:clamp(1.35rem, 6.5vw, 1.9rem); line-height:1.15; overflow-wrap:anywhere; }
  .dm-prose p.drop::first-letter{ font-size:42px; }
  .dm-seam-contract .row{ grid-template-columns:1fr; gap:4px; }
  .dm-seam-contract .row.split{ grid-template-columns:1fr; gap:10px; }

  /* edge tabs: fixed, vertically centered (clear of the chat bubble at the
     bottom right and the bottom status bar), 44px touch width */
  .dm-stage .__df-ovh, .dm-stage .__df-rlh{
    display:flex;
    position:fixed; top:50%; transform:translateY(-50%);
    width:44px; height:64px;
    z-index:86;
  }
  .dm-stage .__df-rlh{ left:0; }
  .dm-stage .__df-ovh{ right:0; }

  /* panels: fixed full-height slide-overs over a fixed scrim */
  .dm-overview{
    position:fixed !important; top:0 !important; bottom:0 !important;
    right:0 !important; left:auto !important;
    height:auto !important; width:min(320px, 85vw) !important; max-width:85vw !important;
    z-index:84 !important;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .dm-rail{
    position:fixed !important; top:0 !important; bottom:0 !important;
    left:0 !important; right:auto !important;
    height:auto !important; width:min(320px, 85vw) !important; max-width:85vw !important;
    z-index:84 !important;
    transform:translateX(-100%) !important;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .dm-stage.dm-rail-open .dm-rail{ transform:translateX(0) !important; }
  .dm-stage .__df-scrim{
    position:fixed !important; inset:0 !important; z-index:82;
  }
}