/* Document view modes + page setup (P7.C, reworked per Thầy 2026-07-12:
   "2 trang chứ không phải chia làm 2 cột").
   The view-* class lives on #editor-scroll; the sheet geometry comes from
   --page-w / --page-h, set inline by EditorView from the per-project page
   setup (A4/Letter/A5 × portrait/landscape). --page-margin (96px) is the
   sheet's existing print margin from workspace.css. */

/* ── view: page — the ONE continuous mode (Thầy 2026-07-14) ──────────────
   Word Print Layout: the whole document flows in one contenteditable sheet
   sized to the chosen paper, sitting on a grey "desk", scrolling vertically.
   Page boundaries are PAINTED by a repeating vertical gradient — one white
   sheet (--page-h) then a desk gap — so the strip reads as A4 pages stacked
   down the screen. The pagination is visual only: text is NOT split at the
   boundary (a true page-break engine is backlog), so a line may occasionally
   sit over a gap. Kept deliberately simple after the multi-mode stacking bug
   (#38) — there is no web/two mode to collide with anymore. */
#editor-scroll.view-page {
  overflow-x: hidden;
  background: var(--bg-tertiary, #e9ebee);   /* desk */
}
#editor-scroll.view-page #editor-content {
  --pg-gap: 28px;                              /* desk between two sheets */
  position: relative;                          /* anchor for .pb-num page labels */
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--page-w);
  max-width: none;
  min-height: var(--page-h);
  margin: 26px auto;
  padding: var(--page-margin);
  border: none;
  border-radius: 2px;
  /* Repeating vertical page tiles: a white sheet with faint top/bottom edge
     lines, then a transparent gap that lets the desk show through — so the
     strip reads as separate A4 sheets stacked down the screen (Word Print
     Layout). */
  background:
    linear-gradient(to bottom,
      rgba(15, 23, 42, 0.10) 0, rgba(15, 23, 42, 0.10) 1px,      /* sheet top edge */
      #fff 1px,
      #fff calc(var(--page-h) - 1px),
      rgba(15, 23, 42, 0.14) calc(var(--page-h) - 1px), rgba(15, 23, 42, 0.14) var(--page-h),  /* sheet bottom edge */
      transparent var(--page-h),
      transparent calc(var(--page-h) + var(--pg-gap)));          /* desk gap */
  background-size: 100% calc(var(--page-h) + var(--pg-gap));
  background-repeat: repeat-y;
  /* One soft shadow around the whole strip (per-tile shadow isn't possible
     with a painted background; the desk gaps carry the page separation). */
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
}
/* Media never overflows the sheet width. */
#editor-scroll.view-page #editor-content img,
#editor-scroll.view-page #editor-content table {
  max-width: 100%;
}

/* Page number in each sheet's bottom margin (EditorPaginate injects these as
   non-editable overlays; `top` is set inline per page). Display-only — never
   saved (stripped by EditorPaginate.clean). */
#editor-scroll.view-page #editor-content .pb-num,
#editor-scroll.view-page #editor-content .pb-hf {
  position: absolute;
  left: var(--page-margin, 96px);
  right: var(--page-margin, 96px);
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary, #9ca3af);
  pointer-events: none;
  user-select: none;
}
#editor-scroll.view-page #editor-content .pb-num--left { text-align: left; }
#editor-scroll.view-page #editor-content .pb-num--right { text-align: right; }
#editor-scroll.view-page #editor-content .pb-hf { font-size: 11px; }

/* The A4 sheet look is desktop-only; on a phone drop the fixed sheet width,
   the page tiles and the inline fit-zoom (!important beats EditorView's
   inline zoom) so the doc is a plain readable column. */
@media (max-width: 900px) {
  #editor-scroll.view-page #editor-content {
    width: auto !important;
    zoom: 1 !important;
    min-height: 0;
    margin: 10px auto;
    background: var(--bg-primary, #ffffff);
    box-shadow: var(--shadow-sm);
  }
  #editor-scroll.view-page { background: none; }
}

/* ── ribbon integration ─────────────────────────────────────────────────
   When the ribbon is active (a text node is open) the legacy flat toolbar is
   redundant on desktop — hide it. Below 900px the ribbon is hidden by
   ribbon.css and the old toolbar stays, so mobile is untouched. */
@media (min-width: 900px) {
  body.has-ribbon #editor-toolbar { display: none; }
  /* Preview / Save-as / Export / Build / Present / deck-theme moved into
     the ribbon — their topbar twins hide while a ribbon is up (mobile
     keeps them). */
  body.has-ribbon .topbar-action-btn.rb-owned,
  body.has-ribbon .pres-theme-select.rb-owned { display: none !important; }
}

/* Format painter armed: the next click-drag paints the captured formatting. */
body.fmt-painter-armed #editor-content { cursor: crosshair; }