/* drafting.css — the Drafting phase view (MVP). Mirrors the brainstorm's
   serif/gold register; the gold highlight on the draft marks the student's own
   words. */

.drafting {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}
.drafting.hidden { display: none; }
.drafting-col { min-width: 0; }
/* While drafting, the chosen direction sits in a sticky rail beside the
   conversation — same two-column grid proportions as the brainstorm chat. */
.drafting.has-thread-rail {
  max-width: 1120px;
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(240px, 1fr);
  gap: 2rem;
  align-items: start;
}
/* The thread rail only exists while drafting; absent in the picker. */
.drafting:not(.has-thread-rail) #draftThreadRail { display: none; }
@media (max-width: 800px) {
  .drafting.has-thread-rail { grid-template-columns: 1fr; gap: 1.5rem; }
}

.drafting .ghost {
  font-family: var(--sans);
  font-size: 0.85rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.drafting .ghost:hover { color: var(--ink); border-color: var(--accent); }

.drafting-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
/* Eyebrow matches the brainstorm setup card's .card-eyebrow exactly. */
.drafting-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Section heading, sized to the brainstorm .card-title. */
.draft-title {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 400;
  font-size: 1.65rem;
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0 0 18px;
}

/* ---- Thread picker ---- */
.draft-empty {
  font-family: var(--serif);
  color: var(--muted);
  margin: 0 0 18px;
}
.draft-thread-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Direction cards adopt the brainstorm setup-card chrome: same radius, border,
   and the accent ring on hover (the card's own selectable affordance). */
.draft-thread-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.draft-thread-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.draft-thread-name {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.draft-thread-summary {
  font-family: var(--serif);
  color: var(--body);
  line-height: 1.5;
}

/* ---- Register card: a static not-this/like-this sample setting the tone ---- */
.draft-register {
  margin: 0 0 28px;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-soft);
}
.draft-register .card-eyebrow { margin-bottom: 0.6rem; }
.reg-caption {
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--body);
  margin: 0 0 1.25rem;
}
.reg-question {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.5;
  color: #1a1a1a;
  font-weight: 450;
  margin-bottom: 16px;
}
/* Two answers to the same question: a thin chat reply (weak, muted) and the
   passage that works (good). The round mark carries the not-this/like-this
   contrast: a grey cross vs. an accent check. */
.reg-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.reg-row + .reg-row { margin-top: 14px; }
.reg-mark {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  line-height: 1;
  margin-top: 0.15rem;
}
.reg-weak .reg-mark { background: var(--line-2); color: var(--muted); }
.reg-good .reg-mark { background: var(--accent-soft); color: var(--accent); }
.reg-row-body { min-width: 0; }
.reg-weak-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
.reg-weak-note {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.25rem 0 0;
}
.reg-good-text {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--body);
  margin: 0;
}

/* ---- Demo (autoplay): "Watch a demo" card mirrors .setup-card.secondary ---- */
.draft-demo-card {
  display: flex;
  flex-direction: column;
  margin: 0 0 24px;
  padding: 1.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}
.draft-card-title {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0 0 0.65rem;
  color: var(--ink);
}
.draft-card-desc {
  font-size: 0.93rem;
  line-height: 1.55;
  margin: 0 0 1.1rem;
  color: var(--body);
}
/* The persona picker reuses the brainstorm demo's .persona-dropdown styling
   (defined in brainstorm.css, loaded page-wide); no drafting-specific rules. */
/* Two CTAs sit side by side: "Play demo" (primary) and "Skip to the assembly"
   (a quiet secondary that jumps straight to the finale). */
.draft-demo-card .card-cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.card-cta.ghost-cta {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
}
.card-cta.ghost-cta:hover {
  background: transparent;
  color: var(--ink);
  border-color: var(--accent);
}

.draft-demo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
}
.draft-demo-bar.hidden { display: none; }
.draft-demo-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--muted);
}
.draft-demo-status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.draft-demo-controls {
  display: flex;
  gap: 6px;
}

/* ---- "Draft one yourself" (demo) ---- */
/* The by-hand kit section under "Watch a demo": the invented student's
   background, then the three directions as ordinary .draft-thread-card rows. */
.draft-selfdraft {
  margin: 0 0 24px;
  padding: 1.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}
.draft-selfdraft .card-eyebrow { margin-bottom: 0.5rem; }
.draft-selfdraft .draft-card-title { margin-bottom: 0.65rem; }
.draft-selfdraft-bg {
  margin: 0 0 1rem;
}
.draft-selfdraft-bg p {
  font-family: var(--serif);
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--body);
  margin: 0 0 0.7rem;
}
.draft-selfdraft-bg p:last-child { margin-bottom: 0; }
.draft-selfdraft-note {
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 1.25rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--accent);
}

/* ---- Coach directions (demo): Tara's / Jodi's real threads ---- */
/* Same card chrome as the picker; a subheading per person groups their
   directions. Clicking a card starts a plain drafting session on that thread. */
.draft-coachthreads {
  margin: 0 0 24px;
  padding: 1.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}
.draft-coachthreads .card-eyebrow { margin-bottom: 0.5rem; }
.draft-coachthreads .draft-card-title { margin-bottom: 0.65rem; }
.draft-coach-group { margin-top: 1.1rem; }
.draft-coach-name {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 0.6rem;
}

/* ---- Self-draft material rail (shown beside the chat while drafting) ---- */
/* Sits under the thread card in #draftThreadCard: who you are + the concrete
   material for the chosen direction, so the human always has something to
   write from. Grouped by roughly the order Goldie asks (the beat sequence). */
.draft-material {
  margin-top: 1.1rem;
  padding-top: 0.2rem;
}
.draft-material-head {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.draft-material-bg p {
  font-family: var(--serif);
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--body);
  margin: 0 0 0.6rem;
}
.draft-material-bg p:last-child { margin-bottom: 0; }
.draft-material-title {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.1rem 0 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.draft-mat-group { margin-bottom: 0.9rem; }
.draft-mat-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.draft-mat-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.draft-mat-list li {
  position: relative;
  font-family: var(--serif);
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--muted);
  padding: 0.18rem 0 0.18rem 0.9rem;
}
.draft-mat-list li::before {
  content: '•';
  position: absolute;
  left: 0.1rem;
  top: 0.18rem;
  color: var(--accent);
}

/* ---- Conversation ---- */
.draft-chat.hidden, .draft-result.hidden, .draft-picker.hidden { display: none; }

.draft-messages {
  min-height: 240px;
  max-height: 56vh;
  overflow-y: auto;
  padding: 4px 2px;
  margin-bottom: 18px;
}
/* The explicit beat header above each coach question (Opening, Meaning, …).
   Eyebrow register, matching the brainstorm setup's .card-eyebrow. */
.draft-step-header {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 26px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.draft-messages > .draft-step-header:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.draft-msg {
  max-width: 88%;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.5;
}
.draft-msg.coach {
  color: #1a1a1a;
  font-weight: 450;
  margin-bottom: 20px;
}
.draft-msg.student {
  font-style: italic;
  color: var(--body);
  margin: 0 0 28px 24px;
  padding-left: 18px;
  border-left: 2px solid var(--accent);
}
.draft-msg.typing { color: var(--muted); }

/* Stacked: a tall writing area on top, Send below — the big box signals that a
   response is a written passage, not a one-line chat reply. */
.draft-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.draft-input textarea {
  width: 100%;
  min-height: 200px;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.5;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  resize: vertical;
}
.draft-input textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.draft-input button[type="submit"] {
  align-self: flex-end;
  font-family: var(--sans);
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
}
.draft-input button[disabled] { opacity: 0.5; cursor: default; }

/* ---- Assembled draft + assembly animation ---- */
/* The finished draft lives in a popup overlay (its own page over the session):
   #draftResult is a fixed, scrollable backdrop holding a centered card. The
   conversation stays underneath, dimmed. */
.draft-result {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow-y: auto;
  background: rgba(18, 24, 40, 0.55);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 5vh 20px 9vh;
}
.draft-overlay-card {
  position: relative;          /* clones (.draft-fly) are absolutely placed inside */
  width: 100%;
  max-width: 716px;            /* 48px padding + 620px doc + 48px padding */
  margin: auto 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 40px 120px -30px rgba(2, 37, 89, 0.5);
  padding: 38px 48px 46px;
}
/* The card widens into .has-rail instantly (slots are measured the next frame —
   a mid-transition grid would mis-size the draft column). Only the COLLAPSE back
   to full width animates, via .collapsing applied just before .has-rail drops. */
.draft-overlay-card.collapsing {
  transition: max-width 0.5s ease, padding 0.5s ease;
}
/* Assembly flourish only: split into [draft | rail]. The draft column stays the
   same 620px as the rest state (1184 − 48 − 40 − 36 − 440), and its left edge sits
   at the same 48px padding as the rest state, so collapsing the rail tightens the
   card to full width WITHOUT shifting or reflowing the draft. (.draft-doc is also
   pinned to 620px, so the instant grid→block at collapse can't rewrap it.) */
.draft-overlay-card.has-rail {
  max-width: 1184px;
  padding: 38px 40px 46px 48px;
  display: grid;
  /* The doc column holds its rest-state width (620px) first; the rail takes
     what's left. This keeps the collapse reflow-free at any viewport wide
     enough for both, and keeps the rail's minis genuinely miniature. */
  grid-template-columns: minmax(0, 620px) minmax(180px, 1fr);
  grid-template-areas:
    "head head"
    "doc  rail"
    "meta rail";
  column-gap: 36px;
}
.draft-overlay-card.has-rail .draft-result-head { grid-area: head; }
.draft-overlay-card.has-rail .draft-doc { grid-area: doc; }
.draft-overlay-card.has-rail .draft-meta { grid-area: meta; }
.draft-overlay-card.has-rail .draft-rail { grid-area: rail; }
/* The rail exists only while the card carries .has-rail. */
.draft-overlay-card:not(.has-rail) .draft-rail { display: none; }
.draft-rail {
  align-self: stretch;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  opacity: 1;
  transition: opacity 0.35s ease;
}
.draft-rail.fading { opacity: 0; }
.draft-rail-head {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
/* A quote in flight: a full-width clone of one gold line (same column width +
   real first-line indent, so it wraps EXACTLY like its slot, and at scale 1 sits
   right on it). It is shrunk onto the rail, then grows into its slot — only size
   and position change. position: absolute inside the overlay card so it rides the
   overlay's scroll; transform-origin 0 0 so scale grows from the top-left. */
/* Metrics MUST stay identical to .draft-doc — the slot math measures the clone
   against the real span, and any drift breaks the pixel-exact hand-off. */
.draft-fly {
  position: absolute;
  z-index: 1100;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.003em;
  color: var(--body);
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform, opacity;
}
/* The flying clone's gold ink shares the enriched gold base defined below
   (grouped selector), so what lands is pixel-identical to the rest state. */
.draft-result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.draft-result-actions { display: flex; gap: 8px; }
.draft-result-head .draft-title { margin-bottom: 18px; }
/* Reading typography: the finished essay is the artifact the student stares at
   longest, so it gets real book metrics — 16px serif on a ~72-char measure —
   not thumbnail type. (.draft-fly above must keep identical metrics.) */
.draft-doc {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.003em;
  color: var(--body);
  /* Pinned to the grid column width so the rail collapse (grid → block in one
     frame) can never widen the doc and rewrap the just-landed draft. No-op in
     either steady state — both already resolve the doc to 620px. */
  max-width: 620px;
}
/* Manuscript paragraphing (see buildDraftDoc): first-line indents on every
   paragraph but the first, plus a whisper of air between them. */
.draft-doc p { margin: 0; text-indent: 1.6em; }
.draft-doc p:first-child { text-indent: 0; }
.draft-doc p + p { margin-top: 0.45em; }
/* gold = the student's verbatim words: inline so they flow with the glue into one
   continuous paragraph. Instead of a flat swatch, the words sit on a warm gold
   that's faintly lit — a soft vertical gradient (lighter top, deeper bottom), a
   hairline top highlight, and a low inner glow — so it reads like gold rather than
   a highlighter. Hue stays on --accent (#caa74f). The .draft-fly clone shares this
   exact base so the landing hand-off is seamless.

   Two background layers: layer 1 is a narrow translucent sheen parked off the left
   edge (invisible at rest); layer 2 is the gold itself. .shine sweeps the sheen
   across once when a quote lands (see playAssemblyReveal). */
.draft-doc .seg.gold,
.draft-fly .ink {
  background-image:
    linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.5) 50%, transparent 58%),
    linear-gradient(180deg, rgba(202, 167, 79, 0.6) 0%, rgba(202, 167, 79, 0.42) 100%);
  background-repeat: no-repeat;
  background-size: 250% 100%, 100% 100%;
  background-position: -175% 0, 0 0;
  border-radius: 3px;
  padding: 0 1px;
  box-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 8px rgba(202, 167, 79, 0.28);
  /* Each wrapped line gets its own rounded, highlighted box (instead of the
     highlight slicing off mid-line at the wrap). */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.draft-doc .seg.gold.shine { animation: gold-sheen 1100ms ease-out 1; }
@keyframes gold-sheen {
  from { background-position: -175% 0, 0 0; }
  to   { background-position: 275% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .draft-doc .seg.gold.shine { animation: none; }
}
/* connective glue (Goldie's words): faint gray. The draft starts empty; each
   glue span writes itself in (ink settling: blur -> sharp) as the gold quote it
   leads into lands (.glue-in, per span), and .glue-visible on the doc is the
   reveal-everything state (finalize, reduced motion, trailing glue). */
.draft-doc .seg.glue {
  color: #aab0bd;
  opacity: 0;
  filter: blur(3px);
  transition: opacity 0.55s ease, filter 0.55s ease;
}
.draft-doc.glue-visible .seg.glue,
.draft-doc .seg.glue.glue-in {
  opacity: 1;
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .draft-doc .seg.glue { transition: none; filter: none; }
}

/* The assembly's opening beat: one display-serif line centered over the screen
   (its parent #draftResult is the fixed overlay) while the draft is still
   empty. Faded in and out by playAssemblyReveal. */
.draft-assembly-title {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink);   /* it reads against the white card, not the backdrop */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.42s ease;
}
.draft-assembly-title.show { opacity: 1; }

/* Replay lives with the other overlay actions but only appears once an
   animated assembly has played (never under reduced motion). */
.draft-result-actions .ghost.hidden { display: none; }
.draft-meta {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.draft-gold-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--accent-soft);
}