/* =====================================================================
   chordpress-engine.css
   Page-sheet / column / print / fullscreen-zoom styling for the
   ChordPress engine. Everything is namespaced cp-* / --cp-* so it never
   collides with WorshipDocs' own styles. Load this AFTER editor.css /
   song-view.css so the page sheets render inside the existing panels.
   ===================================================================== */
:root{
  --cp-ink:#1f2430;
  --cp-paper:#fcfbf8;
  --cp-line:#e6e3db;
  --cp-accent:#2f53b3;     /* chords */
  --cp-accent-2:#9a4a2b;   /* section headers */
  --cp-desk:#34373f;       /* canvas behind the sheets, inside the panel */
  --cp-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;

  --cp-page-w: 8.5in;
  --cp-page-h: 11in;
  --cp-page-margin: 1in;
  --cp-chart-size: 11pt;
  --cp-chart-leading: 1.34;
  --cp-disp: 1;            /* on-screen sheet scale (set per host by JS)  */
  --cp-cols: 1;
  --cp-gutter: 0.34in;
  --cp-col-w: calc((var(--cp-page-w) - 2*var(--cp-page-margin) - (var(--cp-cols) - 1)*var(--cp-gutter)) / var(--cp-cols));
}

/* ---- the surface that hosts page sheets (editor or preview) ---------- */
.cp-surface{
  background:var(--cp-desk);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
/* On the public view the sheet sits in a small, CENTERED dark frame with a
   bounded height (≈ one screen) so multi-page songs scroll inside it rather
   than the desk filling the whole viewport. */
.cp-surface.cp-fit-content{
  height:auto;
  max-height:calc(100dvh - 200px);
  width:fit-content; max-width:100%;
  margin:0 auto;
}
.cp-surface .cp-pane-pad{
  padding:18px;            /* equal dark frame on all sides */
  transform-origin:0 0;
}

/* ---- the page sheet -------------------------------------------------- */
.cp-page{
  position:relative;
  width:calc(var(--cp-page-w) * var(--cp-disp));
  height:calc(var(--cp-page-h) * var(--cp-disp));
  padding:calc(var(--cp-page-margin) * var(--cp-disp));
  background:var(--cp-paper);
  margin:0 auto 16px;
  box-shadow:0 1px 0 rgba(0,0,0,.25), 0 14px 34px rgba(0,0,0,.30);
  border-radius:2px;
  overflow:hidden;
}
.cp-page-content{
  display:flex;
  gap:calc(var(--cp-gutter) * var(--cp-disp));
  height:calc((var(--cp-page-h) - 2*var(--cp-page-margin)) * var(--cp-disp));
  overflow:hidden;
}
.cp-col{
  width:calc(var(--cp-col-w) * var(--cp-disp));
  height:100%;
  overflow:hidden;
  font-family:var(--cp-mono);
  font-size:calc(var(--cp-chart-size) * var(--cp-disp));
  line-height:var(--cp-chart-leading);
  color:var(--cp-ink);
  tab-size:4;
}
.cp-page-no{
  position:absolute;
  bottom:calc(.42in * var(--cp-disp));
  right:calc(var(--cp-page-margin) * var(--cp-disp));
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:calc(9px * var(--cp-disp));
  letter-spacing:.08em;
  color:#b8b4aa;
  user-select:none; -webkit-user-select:none;
}
.cp-line{ white-space:pre-wrap; overflow-wrap:break-word; min-height:1.34em; caret-color:var(--cp-ink); }
.cp-line.cp-chord{ color:var(--cp-accent); font-weight:700; }
.cp-line.cp-header{ color:var(--cp-accent-2); font-weight:700; letter-spacing:.02em; }

/* editing affordances */
.cp-surface[contenteditable], .cp-surface [contenteditable]{ outline:0; }
.cp-page{ cursor:text; }

/* ---- interactive preview: tappable chords + section headers ---------- */
.cp-interactive .cp-chord-tok{ cursor:pointer; border-radius:3px; padding:0 1px; }
.cp-interactive .cp-chord-tok:hover{ background:rgba(47,83,179,.14); }
.cp-interactive .cp-sec-head{ cursor:pointer; }
.cp-interactive .cp-sec-head:hover{ text-decoration:underline; }
.cp-interactive .cp-chord-tok.cp-tx-affected{ background:rgba(47,83,179,.12); }
.cp-interactive .cp-line.cp-header.cp-tx-affected{ background:rgba(154,74,43,.12); }
.cp-interactive .cp-chord-tok.cp-tx-anchor{ background:var(--cp-accent); color:#fff; }
.cp-interactive .cp-line.cp-header.cp-tx-anchor{ background:rgba(154,74,43,.20); }

/* ---- off-screen measurer (true Letter metrics; NO --cp-disp) --------- */
.cp-measure{
  position:absolute; left:-99999px; top:0; visibility:hidden;
  width:var(--cp-col-w);
  height:calc(var(--cp-page-h) - 2*var(--cp-page-margin));
  font-family:var(--cp-mono); font-size:var(--cp-chart-size); line-height:var(--cp-chart-leading);
  tab-size:4; overflow:hidden;
}

/* ---- transpose bar (ChartPress anchored transpose) ------------------- */
.cp-txbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:6px 10px; background:#252932; color:#f4f3ef;
  border-radius:6px; font-size:12.5px;
}
.cp-txbar[hidden]{ display:none; }
.cp-txbar .cp-txctrl{ display:flex; align-items:center; gap:6px; }
.cp-txbar .cp-txctrl button{
  width:32px; height:32px; border-radius:7px; border:1px solid #28489c;
  background:var(--cp-accent); color:#fff; font-size:16px; line-height:1; cursor:pointer;
}
.cp-txbar .cp-txctrl button:hover{ background:#3a60c8; }
.cp-txbar .cp-txctrl button:disabled{ background:#3a3f49; border-color:#3a3f49; color:#6b7280; cursor:default; }
.cp-txbar .cp-txval{ min-width:38px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
.cp-txbar .cp-txclear{
  margin-left:auto; background:transparent; color:#c7cbd4;
  border:1px solid #444a57; border-radius:7px; padding:6px 11px; font:inherit; font-size:12.5px; cursor:pointer;
}
.cp-txbar .cp-txclear:hover{ color:#fff; border-color:#6b7280; }

/* ---- fullscreen + pinch/drag zoom ------------------------------------ */
.cp-pane:fullscreen{ background:var(--cp-desk); }
.cp-pane:-webkit-full-screen{ background:var(--cp-desk); }
.cp-pane.cp-pseudo-fs{ position:fixed; inset:0; z-index:2147483000; background:var(--cp-desk); overflow:auto; }
.cp-pane.cp-fs-zoom{ overflow:hidden; touch-action:none; }
.cp-pane.cp-fs-zoom .cp-pane-pad{ transform-origin:0 0; }

/* ---- printing: only the dedicated print root is visible -------------- */
@media print{
  body.cp-printing > *{ display:none !important; }
  body.cp-printing #cp-print-root{ display:block !important; }
  body.cp-printing{ background:#fff !important; }

  #cp-print-root{ display:block; width:auto; margin:0; padding:0; }
  /* render at TRUE Letter metrics: each sheet is exactly the printable
     content area so logical pages map 1:1 to physical pages. Use an ABSOLUTE
     inch width (not 100%) so mobile browsers — whose print "viewport" can be
     the narrow device width — still print at full physical size. */
  #cp-print-root .cp-page{
    box-shadow:none; margin:0; border-radius:0; padding:0;
    width:calc(var(--cp-page-w) - 2*var(--cp-page-margin));
    height:calc(var(--cp-page-h) - 2*var(--cp-page-margin) - 2px);
    overflow:hidden;
    break-after:page;
    background:#fff;
  }
  #cp-print-root .cp-page:last-child{ break-after:auto; }
  #cp-print-root .cp-page-content{ height:100%; gap:var(--cp-gutter); overflow:hidden; }
  #cp-print-root .cp-col{ width:var(--cp-col-w); height:100%; font-size:var(--cp-chart-size); }
  #cp-print-root .cp-page-no{ display:none; }
  #cp-print-root .cp-chord-tok.cp-tx-anchor,
  #cp-print-root .cp-chord-tok.cp-tx-affected,
  #cp-print-root .cp-line.cp-header.cp-tx-anchor,
  #cp-print-root .cp-line.cp-header.cp-tx-affected{ background:none; color:inherit; }
}

/* hide the print root on screen */
#cp-print-root{ display:none; }

/* ---- phones: tighter padding ---------------------------------------- */
@media (max-width:620px){
  .cp-surface .cp-pane-pad{ padding:12px; }
}

/* ---- guaranteed fullscreen exit affordance (injected per pane) -------- */
.cp-fs-btn{ display:none; }
.cp-pane:fullscreen .cp-fs-btn,
.cp-pane:-webkit-full-screen .cp-fs-btn,
.cp-pane.cp-pseudo-fs .cp-fs-btn{
  display:flex; position:fixed; top:12px; right:12px; z-index:2147483600;
  width:40px; height:40px; align-items:center; justify-content:center;
  background:rgba(255,255,255,.92); border:1px solid #cfd3da; border-radius:8px;
  font-size:18px; line-height:1; cursor:pointer; color:#2a2d33;
  box-shadow:0 2px 10px rgba(0,0,0,.28); -webkit-tap-highlight-color:transparent;
}
.cp-pane:fullscreen .cp-fs-btn:hover,
.cp-pane.cp-pseudo-fs .cp-fs-btn:hover{ background:#fff; }

/* While fullscreen, hide WorshipDocs' own ⛶ button (it lives inside the pad)
   so the user sees exactly ONE exit control (the ✕ injected above), not two. */
.cp-pane:fullscreen .content-fullscreen-btn,
.cp-pane:-webkit-full-screen .content-fullscreen-btn,
.cp-pane.cp-pseudo-fs .content-fullscreen-btn{ display:none !important; }