/* ==========================================================================
   IMMERSION — forgery drill
   Ref: handoff § Phase 4. Full-bleed dark focus mode, no chrome.
   ========================================================================== */

.imm-drill-body {
  margin: 0;
  background: var(--imm-ink-deep);
  color: var(--imm-on-dark-2);
}

.imm-drill {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* --- Top bar -------------------------------------------------------------- */

.imm-drill__bar {
  display: flex;
  align-items: center;
  gap: var(--imm-s-5);
  padding: var(--imm-s-4) var(--imm-s-9);
  border-bottom: 1px solid var(--imm-ink-line);
}

/* Was plain faint-grey text, which did not read as a control at all — the way
   out of a full-screen mode has to be obvious. Both exits share this: a filled
   chip with a bright border, so it is visible against the near-black ground
   without competing with the primary action. */
.imm-drill__exit {
  display: inline-flex;
  align-items: center;
  gap: var(--imm-s-2);
  padding: 8px 14px;
  background: rgba(255, 255, 255, .06);
  /* .38 not .28: measured against the #0f1720 ground, .28 gives a 2.5:1 edge
     and WCAG wants 3:1 for a control boundary. This lands at 3.6:1. */
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: var(--imm-r-btn);
  color: var(--imm-on-dark);
  font-family: var(--imm-font-ui);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--imm-t-btn),
              border-color var(--imm-t-btn),
              color var(--imm-t-btn);
}

.imm-drill__exit:hover,
.imm-drill__exit:focus {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}

.imm-drill__exit-x { font-size: 12px; opacity: .8; }

/* --- Exit below the windows ------------------------------------------------
   The top-bar exit is easy to miss once you are deep in a page, so the same
   action repeats directly under the two text windows, where the eye already
   is. Same href, same label — deliberately, so it is plainly the same door.
   -------------------------------------------------------------------------- */

.imm-drill__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--imm-s-5);
  flex-wrap: wrap;
  margin-top: var(--imm-s-5);
  padding-top: var(--imm-s-5);
  border-top: 1px solid var(--imm-ink-line);
}

.imm-drill__exit--wide {
  padding: 12px 20px;
  font-size: 15px;
}

.imm-drill__actions-note {
  margin: 0;
  color: var(--imm-faint-dark-2);
  font-size: 13px;
}

.imm-drill__title {
  flex: 1;
  margin: 0;
  text-align: center;
  color: var(--imm-on-dark);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: var(--imm-track-h1);
}

.imm-drill__streak {
  margin: 0;
  color: var(--imm-faint-dark-2);
  font-size: 13.5px;
  font-weight: 700;
}

/* --- Layout --------------------------------------------------------------- */

.imm-drill__grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr var(--imm-rail-drill);
  gap: var(--imm-s-8);
  padding: var(--imm-s-8) var(--imm-s-9);
  align-items: start;
}

.imm-drill__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--imm-s-5);
  min-width: 0;
}

/* --- Panels --------------------------------------------------------------- */

.imm-drill__panel { min-width: 0; }

.imm-drill__panel .imm-eyebrow { margin-bottom: var(--imm-s-3); }

.imm-drill__source,
.imm-drill__input {
  width: 100%;
  min-height: 420px;
  margin: 0;
  padding: var(--imm-s-8);
  background: var(--imm-ink);
  border: 1px solid var(--imm-ink-line-2);
  border-radius: var(--imm-r-panel);
  color: var(--imm-on-dark-2);
  font-family: var(--imm-font-script);
  font-size: 13.5px;
  /* This is the gap between AUTOMATIC line breaks — a line that wrapped rather
     than one you ended. It is the smallest step in the scale, so it is tight;
     1.8 made a wrapped line look like a new paragraph. */
  line-height: var(--imm-script-lh);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  /* The source scrolls and the editor does not, so on any platform with
     space-taking scrollbars the source's text box would be narrower and the
     two panes would break their lines in different places. Reserved in both. */
  scrollbar-gutter: stable;
}

.imm-drill__source {
  /* The source is read-only reference: let it scroll rather than stretch the
     row, so the two panels stay the same height. */
  max-height: 70vh;
  overflow-y: auto;
  user-select: none;
  /* Deliberately NOT scroll-behavior: smooth. The pane follows the caret on
     every keystroke, and an animation started on one character is still
     running when the next arrives, so the pane lags behind fast typing. It
     also defers the scrollTop write, which made this untestable. */
}

/* Karel: "I'm at the bottom of the page with forgery (right) but the source
   text doesn't scroll along."

   The page grows with what you type, so once your version is taller than the
   source the source has scrolled off above you and there is nothing to compare
   against. Pinning it keeps it on screen for the whole drill; drill.js then
   moves its INNER scroll to the passage you are actually on. */
.imm-drill__panel--source {
  position: sticky;
  top: var(--imm-s-5);
  align-self: start;
  /* Never taller than the screen, or sticky has nothing to hold. */
  max-height: calc(100vh - var(--imm-s-9));
  display: flex;
  flex-direction: column;
}

.imm-drill__panel--source .imm-drill__source {
  flex: 1;
  min-height: 0;
  max-height: none;
}


.imm-drill__input { resize: vertical; }

.imm-drill__input:focus {
  outline: none;
  border-color: var(--imm-teal-light);
}

.imm-drill__input::placeholder { color: var(--imm-faint-dark); }

/* --- Rail ----------------------------------------------------------------- */

.imm-drill__rail {
  display: grid;
  gap: var(--imm-s-4);
  position: sticky;
  top: var(--imm-s-5);
}

.imm-drill__card {
  padding: var(--imm-s-7);
  background: var(--imm-ink);
  border: 1px solid var(--imm-ink-line-2);
  border-radius: var(--imm-r-panel);
}

.imm-drill__clock {
  margin: var(--imm-s-2) 0 var(--imm-s-1);
  color: #fff;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: var(--imm-track-timer);
  font-variant-numeric: tabular-nums;
}

.imm-drill__note,
.imm-drill__count {
  margin: 0 0 var(--imm-s-3);
  color: var(--imm-faint-dark-2);
  font-size: 13px;
}

.imm-drill__count { margin-bottom: var(--imm-s-2); }

.imm-drill__card .imm-progress { background: var(--imm-ink-line); }

.imm-drill__rules {
  margin: 0;
  padding-left: 1.2em;
  color: var(--imm-faint-dark-2);
  font-size: 13px;
  line-height: 1.6;
}

.imm-drill__rules li { margin-bottom: var(--imm-s-2); }
.imm-drill__rules li::marker { color: var(--imm-teal-light); font-weight: 700; }

.imm-drill__status {
  min-height: 1.2em;
  margin: 0;
  color: var(--imm-faint-dark);
  font-size: 12.5px;
}

.imm-drill__status.is-saved { color: var(--imm-teal-light); }
.imm-drill__status.is-warn  { color: var(--imm-red); }
.imm-drill__status.is-error { color: var(--imm-red); }

/* --- Entry card on the step page ------------------------------------------
   Was a large red button sitting on its own, which read as a shout and gave no
   sense of what it opened. It is now a quiet card that explains itself, with
   the action at a normal button size.
   -------------------------------------------------------------------------- */

.imm-drill-entry {
  display: flex;
  align-items: center;
  gap: var(--imm-s-6);
  margin: 0 0 var(--imm-s-7);
  padding: var(--imm-s-6) var(--imm-s-7);
  background: var(--imm-paper);
  border: 1px solid var(--imm-line);
  border-left: 3px solid var(--imm-red);
  border-radius: var(--imm-r-card);
}

.imm-drill-entry__text { flex: 1; min-width: 0; }

.imm-drill-entry__note {
  margin: var(--imm-s-1) 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--imm-muted);
  max-width: 46ch;
}

/* The link is an <a> inside LearnDash content, where a stack of stylesheets
   and inline blocks all have opinions about link colour. By the cascade
   .imm-btn--primary should already win, but the text rendered teal on red —
   unreadable — so the colour is stated here at a specificity nothing on the
   page reaches, rather than left to be argued over. */
.imm-drill-entry .imm-btn.imm-drill-entry__btn,
.imm-drill-entry .imm-btn.imm-drill-entry__btn:hover,
.imm-drill-entry .imm-btn.imm-drill-entry__btn:focus,
.imm-drill-entry .imm-btn.imm-drill-entry__btn:visited {
  flex: none;
  padding: 11px 16px;
  background-color: var(--imm-red);
  color: #fff;
  font-size: 14.5px;
  text-decoration: none;
}

.imm-drill-entry .imm-btn.imm-drill-entry__btn:hover { background-color: #d81f3f; }

/* The arrow inherits, so it cannot drift from the label. */
.imm-drill-entry__btn span { color: inherit; }

@media (max-width: 700px) {
  .imm-drill-entry {
    flex-direction: column;
    align-items: stretch;
    gap: var(--imm-s-4);
  }

  .imm-drill-entry__btn { width: 100%; min-height: 44px; }
}

/* --- Drill with no source page yet ---------------------------------------- */

.imm-drill__source--empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--imm-s-3);
  color: var(--imm-faint-dark-2);
  font-family: var(--imm-font-ui);
  font-size: 14.5px;
  line-height: 1.6;
  white-space: normal;
}

.imm-drill__source--empty p { margin: 0; max-width: 40ch; }

/* --- Mobile ---------------------------------------------------------------
   Handoff § Phase 12: source stacks over the textarea, rail below.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .imm-drill__grid {
    grid-template-columns: 1fr;
    padding: var(--imm-s-5);
    gap: var(--imm-s-5);
  }

  .imm-drill__panels { grid-template-columns: 1fr; }

  /* Stacked on a phone, a pinned source would sit on top of the editor. */
  .imm-drill__panel--source {
    position: static;
    max-height: none;
    display: block;
  }

  .imm-drill__panel--source .imm-drill__source { max-height: 40vh; }

  /* Handoff § Phase 12: the timer is pinned as a compact sticky header.
     `display: contents` lifts the rail's cards into the grid so the clock can
     be ordered above the panels and stick, without restructuring the markup. */
  .imm-drill__rail {
    position: static;
    display: contents;
  }

  .imm-drill__card:first-child {
    order: -1;
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: baseline;
    gap: var(--imm-s-3);
    padding: var(--imm-s-3) var(--imm-s-5);
    border-radius: var(--imm-r-nav);
  }

  /* Compact: the clock sits inline with its label, not stacked. */
  .imm-drill__card:first-child .imm-eyebrow { margin: 0; }
  .imm-drill__card:first-child .imm-drill__clock { margin: 0; font-size: 24px; }
  .imm-drill__card:first-child .imm-drill__note { display: none; }

  .imm-drill__source { max-height: 40vh; }

  .imm-drill__source,
  .imm-drill__input {
    min-height: 240px;
    padding: var(--imm-s-5);
  }

  .imm-drill__bar { padding: var(--imm-s-3) var(--imm-s-5); }
  .imm-drill__title { display: none; }

  /* 44px minimum touch target, and the wide exit takes the full width so it is
     unmissable at the end of a page of typing. */
  .imm-drill__exit { min-height: 44px; }

  .imm-drill__actions { gap: var(--imm-s-3); }
  .imm-drill__exit--wide { width: 100%; }
  .imm-drill__actions-note { font-size: 12.5px; }
}

/* ==========================================================================
   Screenplay formatting
   Ref: the user's request for SLUGLINE / CHARACTER / PARENTHETICAL etc.

   Indents follow standard US screenplay layout, expressed in `ch` units so
   they track the monospace grid exactly as they would on a typed page. On a
   real page these are inches from a 1.5" text margin; in Courier at 10 chars
   to the inch, an inch is 10ch — so the conversions are direct.
   ========================================================================== */

.imm-fmt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--imm-s-1);
  margin-bottom: var(--imm-s-3);
}

.imm-fmt__btn {
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--imm-ink-line-2);
  border-radius: var(--imm-r-nav);
  color: var(--imm-faint-dark-2);
  font-family: var(--imm-font-ui);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--imm-t-btn), color var(--imm-t-btn), border-color var(--imm-t-btn);
}

.imm-fmt__btn:hover {
  border-color: var(--imm-ink-line-3);
  color: #fff;
}

.imm-fmt__btn.is-active {
  background: var(--imm-teal);
  border-color: var(--imm-link);
  color: #fff;
}

/* --- The elements ---------------------------------------------------------
   Action is the baseline; everything else offsets from it.
   -------------------------------------------------------------------------- */

/* --- Vertical rhythm ------------------------------------------------------
   Three steps, smallest to largest. Karel: the old page gave every gap the
   same generous amount, so a wrapped line, a new paragraph and a new scene
   were indistinguishable.

     1. automatic line break (a line that WRAPPED)   line-height, 1.45
     2. hard line break (ENTER) and any element      --imm-script-gap
     3. before a new slugline                        --imm-script-gap-slug

   Everything here is scoped to .imm-script at one consistent specificity
   (0,2,0), which also fixes a real bug: the old reset was
   `.imm-drill__input [class^="imm-fmt-"] { margin: 0 }` at (0,2,0) against
   `.imm-fmt-action { margin-top: 0.9em }` at (0,1,0) — so the reset won and
   the editor had NO element spacing at all, only line-height.
   -------------------------------------------------------------------------- */

/* Step 2 is the default: any block starts a new line break. */
.imm-script [class^="imm-fmt-"] {
  margin-top: var(--imm-script-gap);
  margin-bottom: 0;
}

/* Step 3: a new scene gets the air. This is the only gap that should read as
   a paragraph break. */
.imm-script .imm-fmt-scene {
  margin-top: var(--imm-script-gap-slug);
  text-transform: uppercase;
  font-weight: 700;
}

/* Step 1: a wrapped line is not a break at all — line-height carries it. */
.imm-script .imm-fmt--cont { margin-top: 0; }

/* Dialogue and its parenthetical hug the cue; that grouping is what makes a
   speech read as one thing. */
.imm-script .imm-fmt-dialogue,
.imm-script .imm-fmt-parenthetical { margin-top: 0; }

/* Nothing above the first block. */
.imm-script > [class^="imm-fmt-"]:first-child { margin-top: 0; }

/* --- Excerpt divider -------------------------------------------------------
   A step can hold more than one excerpt. Without a boundary the second script
   just continues the first and the student types across the join. Set as a
   rule with the title on it, in the UI face rather than the script face, so it
   reads plainly as a label and not as something to copy.
   -------------------------------------------------------------------------- */

.imm-script__divider {
  display: flex;
  align-items: center;
  gap: var(--imm-s-4);
  margin: var(--imm-s-9) 0 var(--imm-s-7);
  font-family: var(--imm-font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: var(--imm-track-label);
  text-transform: uppercase;
  color: var(--imm-faint-dark);
}

.imm-script__divider::before,
.imm-script__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--imm-ink-line-2);
}

/* First on the page, it needs no air above it. */
.imm-script > .imm-script__divider:first-child { margin-top: 0; }

/* The block after a divider already has the divider's own space beneath it. */
.imm-script__divider + [class^="imm-fmt-"] { margin-top: 0; }

/* --- The elements ---------------------------------------------------------
   Indents only. Action is the baseline at 0; the rest offset from it, in `ch`
   so they track the monospace grid exactly as they would on a typed page.
   -------------------------------------------------------------------------- */

/* Measures, in characters, matching a real page: action runs 1.5"-7.5", which
   at 10 characters to the inch is 60. Both panes use them, so a line breaks in
   the same place on the left as on the right whatever the panel width — which
   is the whole point of setting them in `ch` rather than letting the column
   decide. */
.imm-script .imm-fmt-action,
.imm-script .imm-fmt-scene,
.imm-script .imm-fmt-transition { max-width: 60ch; }

/* Character cue: 2.2" in from the action margin, upper-case. */
.imm-script .imm-fmt-character {
  margin-left: 22ch;
  max-width: 35ch;
  text-transform: uppercase;
}

/* Parenthetical: 1.6" in. */
/* No italic by default. Fleabag's script italicises its parentheticals; that is
   one writer's house style, not the format. Italics are available on demand
   with Cmd/Ctrl-I, like any other emphasis the page actually carries. */
.imm-script .imm-fmt-parenthetical {
  margin-left: 16ch;
  max-width: 22ch;
}

/* Emphasis the student applied, in either panel. */
.imm-script em,
.imm-script i { font-style: italic; }

/* Dialogue: 1" in, 35 characters wide — the standard measure. */
.imm-script .imm-fmt-dialogue {
  margin-left: 10ch;
  max-width: 35ch;
}

/* Transition: right-aligned, upper-case. */
.imm-script .imm-fmt-transition {
  text-align: right;
  text-transform: uppercase;
}

/* Placeholder for an empty editor. */
.imm-drill__input:empty::before,
.imm-drill__input > div:only-child:empty::before {
  content: attr(data-placeholder);
  color: var(--imm-faint-dark);
}

.imm-drill__input:focus { outline: none; }

@media (max-width: 900px) {
  /* The full indents do not fit a phone; keep the hierarchy, shrink the steps. */
  .imm-script .imm-fmt-character { margin-left: 10ch; }
  .imm-script .imm-fmt-parenthetical { margin-left: 7ch; max-width: none; }
  .imm-script .imm-fmt-dialogue { margin-left: 4ch; max-width: none; }

  .imm-fmt__btn { min-height: 44px; }
}

/* --- Accuracy --------------------------------------------------------------
   Scored server-side against the source page. The panel only appears when the
   step actually has a page to compare against.
   -------------------------------------------------------------------------- */

.imm-drill__accuracy {
  margin: var(--imm-s-2) 0 var(--imm-s-1);
  color: #fff;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: var(--imm-track-h1);
  font-variant-numeric: tabular-nums;
}

.imm-drill__accuracy.is-high { color: var(--imm-teal-light); }
.imm-drill__accuracy.is-low { color: var(--imm-red); }

/* Solid, not outlined. It used to carry .imm-btn--on-dark, which made it
   pixel-identical to the exit sitting a few centimetres away — the one action
   that scores your work looked the same as the one that leaves. */
.imm-drill__check {
  width: 100%;
  margin-top: var(--imm-s-3);
  background-color: var(--imm-link);
  border-color: var(--imm-link);
  color: #fff;
}

.imm-drill__check:hover,
.imm-drill__check:focus {
  background-color: var(--imm-link-hover);
  border-color: var(--imm-link-hover);
  color: #fff;
}

.imm-drill__notes {
  margin: var(--imm-s-5) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--imm-s-3);
  max-height: 34vh;
  overflow-y: auto;
}

.imm-drill__diff {
  padding: var(--imm-s-3) var(--imm-s-4);
  background: rgba(0, 0, 0, .25);
  border-left: 2px solid var(--imm-ink-line-3);
  border-radius: 0 var(--imm-r-nav) var(--imm-r-nav) 0;
  font-family: var(--imm-font-script);
  font-size: 12px;
  line-height: 1.5;
  color: var(--imm-faint-dark-2);
  overflow-wrap: anywhere;
}

.imm-drill__diff p { margin: 0; }
.imm-drill__diff strong { color: var(--imm-faint-dark); font-weight: 700; }

/* A line that differs shows both versions; a missed one only the original. */
.imm-drill__diff.is-differs { border-left-color: var(--imm-red); }
.imm-drill__diff.is-missing { border-left-color: var(--imm-magenta); }
.imm-drill__diff.is-extra { border-left-color: var(--imm-ink-line-3); }

.imm-drill__diff.is-perfect {
  border-left-color: var(--imm-teal-light);
  color: var(--imm-teal-light);
  font-family: var(--imm-font-ui);
  font-size: 13px;
}