/* Approach A prototype (ADR 0010) — fixed-height PAGE BOXES.
   The page zone is authoritative by containment: content lives inside a fixed-height
   `.pgx-content` box; overflow flows to the next box (paginate-boxes.js), it is never
   nudged by a spacer. Kept separate from the overlay `.pg-*` styles so the shipped
   paginator is untouched while this is prototyped. */

.pgx-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;                       /* the inter-page gutter — a real gap, not injected content */
  padding: 24px 0 60px;
  background: #525659;             /* same page-shell grey as the overlay host */
}

/* View → Zoom. Scale ONLY the page stack (not the position:fixed .pgx-overlay,
   which draws the caret/selection in viewport coords — zooming it throws the caret
   off; scoped to #editor so the PrintView clone under #printview-preview stays
   natural). CSS `zoom` is layout-affecting, so getBoundingClientRect /
   caretRangeFromPoint stay consistent and the caret lands correctly (verified at
   0.9/1.0/1.5). Both the fragmenter and the ruler read the effective zoom off the
   page rect (rulers.js), so pagination AND the ruler ticks track View → Zoom. */
#editor .pgx-pages { zoom: var(--editor-zoom, 1); }

.pgx-page {
  position: relative;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  /* width / height / padding(=page margin) set inline from geometry by layoutBoxes */
}

.pgx-content {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;                /* CONTAINMENT: a line cannot escape the box that holds it */
  /* width / height set inline from geometry */
}

/* A `\begin{landscape}` section renders as a wider-than-tall sheet (ADR 0010 NEXT BATCH #1): its
   page/content dimensions are swapped inline by layoutBoxes. flex-shrink:0 keeps the flex column from
   squeezing the wider page when the pane is narrower than it (the grey canvas scrolls to it instead).
   The class is also the hook for the landscape `@page` in the PrintView print pass (NEXT BATCH #3). */
.pgx-page { flex-shrink: 0; }

/* Forced section break (an orientation change → LaTeX \clearpage, e.g. entering or leaving a
   \begin{landscape} table): a subtle label in the gutter above the page that STARTS the new
   section, so the writer sees why content jumps to a new page here instead of flowing on. The
   page is position:relative already; the marker sits in the 24px inter-page gap above it. */
.pgx-page[data-section-break]::before {
  content: "⇥ page break";
  position: absolute;
  left: 0; right: 0; top: -18px;
  text-align: center;
  font: 600 9.5px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9aa0ac;
  pointer-events: none;
}

/* The content box carries `.ProseMirror` too, so the editable's typography rules
   (`.mirror-mode .ProseMirror p`, headings, lists, indent) apply to the clones and they
   wrap identically to the source. Only the single-sheet BOX styling is neutralised here. */
.mirror-mode .pgx-content.ProseMirror {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: 0;
  background: transparent;
  box-shadow: none;
}

/* A continuation fragment: the tail of a paragraph split across a page boundary. Its
   first visual line is NOT the paragraph's first line, so it must never be indented — the
   zero-reflow split depends on this (docs/adr/0010). */
.mirror-mode .pgx-content .pgx-cont { text-indent: 0 !important; margin-top: 0 !important; }

/* First block on a page starts at the top margin line (no leading block margin). */
.mirror-mode .pgx-content > :first-child { margin-top: 0 !important; }

.pgx-folio {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--pgx-margin, 96px) * 0.40);
  text-align: center;
  font: 10pt 'Times New Roman', Georgia, serif;
  color: #444;
  pointer-events: none;
}

/* ── Live integration (flag on): page-box mode inside the Mirror Editor pane ──
   The ProseMirror view is the off-screen BRAIN; the visible surface is the box projection. */

/* The brain: off-screen and invisible — yet FOCUSABLE (opacity:0, not visibility/display), because
   it does all the real input handling. position:fixed keeps it out of any scroll flow.

   The width below is US Letter at 1in margins (816 sheet → 624 content). It is only a PRE-SIZING
   HINT, NOT the document's geometry, and this comment used to claim otherwise ("the true paginated
   content width, so clones wrap identically"). A page's content width follows the preamble —
   measured 2026-07-16: 528px at margin=1.5in, 672px at 0.75in, 643px on A4/2cm — and nothing here
   tracks it, so only a default-geometry document happens to agree. Harmless for pagination, which
   is why it went unnoticed: layoutBoxes re-measures every clone inside its real content box, so the
   page breaks are right whatever this says. But it does mean THE BRAIN'S LINE BOXES ARE NOT THE
   READER'S LINES. Never answer a layout question from the brain — ask the projection, which
   publishes lineStartBefore (paginate-boxes-edit.js → visual-line.js) for exactly that reason. */
.mirror-pagebox-brain { position: fixed; left: -100000px; top: 0; opacity: 0; pointer-events: none; z-index: -1; }
.mirror-mode.pagebox .mirror-pagebox-brain .ProseMirror {
  width: 816px; max-width: none; margin: 0; padding: 96px 96px 0 96px;
  box-shadow: none; min-height: 0; box-sizing: border-box;
}
/* The visible box host fills the wysiwyg surface; .pgx-pages paints the grey page shell. */
.mirror-mode.pagebox .mirror-wysiwyg { background: #525659; }
.mirror-pagebox { min-height: 100%; }

/* Page rulers. The scroll host is the positioning + scroll context so the measured
   vertical ruler's absolute bands scroll locked to the pages; a 30px left gutter holds
   the 28px bar, and the horizontal ruler spans it (margin-left:-30) so the corner and
   both rulers line up. Scoped to #editor so the PrintView clone (rulers stripped) is
   untouched. */
#editor.pagebox .mirror-wysiwyg { position: relative; padding-left: 30px; }
#editor.pagebox .pg-ruler-h { margin-left: -30px; }

/* Stage 2 — editable projection. The page boxes are not contenteditable; a drawn caret and
   selection overlay show the off-screen model view's selection, mapped into box coordinates. */
.pgx-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.pgx-caret {
  position: fixed; width: 2px; background: #2e5c7a; display: none;
  animation: pgx-blink 1.06s steps(1) infinite;
}
@keyframes pgx-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.pgx-selrect { position: fixed; background: rgba(46, 92, 122, 0.28); }

/* A selected figure's image: a crisp outline plus four corner resize handles.
   The overlay is pointer-events:none; the handles re-enable pointer events so a
   mousedown starts a drag-to-resize (paginate-boxes-edit.js). */
.pgx-figsel { position: fixed; outline: 1.5px solid #2e5c7a; outline-offset: 1px; box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
.pgx-resize-handle {
  position: fixed; width: 11px; height: 11px; margin: -6px 0 0 -6px;
  background: #fff; border: 1.5px solid #2e5c7a; border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.25); pointer-events: auto; z-index: 51;
}
.pgx-resize-nw, .pgx-resize-se { cursor: nwse-resize; }
.pgx-resize-ne, .pgx-resize-sw { cursor: nesw-resize; }

/* ── PrintView print of the page boxes (ADR 0010) ──
   print.js clones each `.pgx-page`'s content into a `.pgx-print-page` and generates the `@page pgx-p`
   (portrait) / `@page pgx-l` (landscape) size rules from the doc geometry. Each print-page maps to one
   printed page; a landscape box prints on the landscape `@page`. The box's screen chrome (fixed height,
   overflow-clip, single-sheet shadow) is neutralised so the content fills the `@page` content area and
   is never clipped. The cloned content keeps its inline WIDTH so line breaks match the screen exactly. */
@media print {
  #pg-print-root.pgx-print { background: #fff !important; }
  #pg-print-root.pgx-print .pgx-print-page { page: pgx-p; break-after: page; background: #fff; }
  #pg-print-root.pgx-print .pgx-print-page:last-child { break-after: auto; }
  #pg-print-root.pgx-print .pgx-print-page--landscape { page: pgx-l; }
  #pg-print-root.pgx-print .pgx-content {
    height: auto !important; min-height: 0 !important; overflow: visible !important;
    box-shadow: none !important; background: #fff !important; margin: 0 !important; padding: 0 !important;
  }
}