/* app.css — on-screen chrome + shared page/card typography */
:root{
  --ink:#1e293b; --muted:#64748b; --line:#e2e8f0; --accent:#7c3aed;
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Inter', system-ui, sans-serif;
}
*{ box-sizing:border-box; }
body{ font-family:var(--sans); margin:0; }

/* build/deploy stamp under the app title (never printed) */
.build-stamp{ font-size:10px; color:var(--muted); line-height:1.2; margin-top:1px; white-space:nowrap; }

/* ---- segmented toggles & buttons ---- */
.seg{ display:inline-flex; background:#f1f5f9; border:1px solid var(--line); border-radius:8px; padding:2px; }
.seg-btn{ font-size:12px; padding:5px 10px; border-radius:6px; color:var(--muted); border:0; background:transparent; cursor:pointer; white-space:nowrap; }
.seg-btn.is-active{ background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08); font-weight:600; }
.btn{ font-size:13px; padding:6px 12px; border-radius:8px; border:1px solid var(--line); background:#fff; cursor:pointer; }
.btn-ghost:hover{ background:#f8fafc; }
.btn-primary{ background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
.btn-primary:hover{ filter:brightness(1.05); }

/* ---- sidebar form ---- */
.grp{ margin-bottom:16px; }
.grp-head{ display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:6px; }
/* collapsible groups (<details>/<summary>) */
details.grp{ border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:#fff; }
summary.grp-head{ cursor:pointer; list-style:none; user-select:none; margin-bottom:0; }
summary.grp-head::-webkit-details-marker{ display:none; }
details.grp[open] > summary.grp-head{ margin-bottom:8px; }
.grp-title{ display:flex; align-items:center; gap:6px; }
.grp-title::before{ content:'▸'; font-size:9px; color:#94a3b8; transition:transform .15s; }
details.grp[open] > summary .grp-title::before{ transform:rotate(90deg); }
summary.grp-head:hover .grp-title{ color:var(--ink); }
.grp-sub{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:10px 0 2px; padding-top:8px; border-top:1px dashed var(--line); }
.sub-note{ font-weight:400; text-transform:none; letter-spacing:0; font-style:italic; color:#94a3b8; }
.grp-body{ display:flex; flex-direction:column; gap:6px; }
.fld-wrap{ display:flex; flex-direction:column; gap:2px; }
.fld-label{ font-size:11px; color:var(--muted); }
.fld{ width:100%; font-size:13px; padding:6px 8px; border:1px solid var(--line); border-radius:6px; font-family:var(--sans); resize:vertical; }
.fld:focus{ outline:2px solid var(--accent); outline-offset:-1px; }
.list-row{ display:flex; gap:4px; align-items:start; padding:3px 0; border-bottom:1px dashed #f1f5f9; }
.row-fields{ flex:1; display:flex; gap:4px; min-width:0; }
.list-row.stacked .row-fields{ flex-direction:column; }
.row-fields .fld{ flex:1; min-width:0; }
.row-add{ font-size:11px; color:var(--accent); background:none; border:0; cursor:pointer; font-weight:600; }
.row-del{ font-size:11px; color:#cbd5e1; background:none; border:0; cursor:pointer; padding:6px 4px; align-self:start; }
.row-del:hover{ color:#ef4444; }
.row-move{ display:flex; flex-direction:column; gap:1px; }
.row-move button{ font-size:8px; line-height:1; padding:2px 3px; border:1px solid var(--line); background:#fff; border-radius:3px; cursor:pointer; color:var(--muted); }
.row-move button:disabled{ opacity:.3; cursor:default; }
.row-move button:not(:disabled):hover{ color:var(--accent); border-color:var(--accent); }
.custom-adds{ display:flex; gap:8px; }
.custom-type{ font-size:13px; align-self:start; padding-top:5px; width:16px; text-align:center; }
.fld-inline{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); }
.fld-inline select.fld{ width:auto; text-transform:capitalize; }
.empty-hint{ font-size:11px; color:#94a3b8; font-style:italic; padding:4px 2px; }
.section-meta{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; padding-bottom:8px; border-bottom:1px dashed var(--line); }
.sec-include{ font-size:12px; font-weight:600; color:var(--ink); gap:6px; }
.sec-include input{ width:14px; height:14px; }

/* image field (URL entry + upload) */
.img-field{ display:flex; flex-direction:column; gap:5px; width:100%; min-width:0; }
.img-entry{ display:flex; gap:5px; }
.img-entry .fld{ flex:1; min-width:0; }
.img-entry .mini-btn{ white-space:nowrap; }
.img-uploaded{ display:flex; align-items:center; gap:8px; }
.img-thumb{ width:40px; height:50px; object-fit:cover; border-radius:4px; border:1px solid var(--line); background:#f1f5f9; flex:0 0 auto; }
.img-tag{ font-size:11px; color:var(--muted); }
.img-acts{ display:flex; gap:4px; margin-left:auto; }

/* cover layout controls */
.cover-opts{ display:flex; flex-direction:column; gap:6px; margin-top:6px; padding:8px; border:1px solid var(--line); border-radius:8px; background:#f8fafc; }
.cover-opts .fld-inline{ justify-content:space-between; }
.cover-opts select.fld{ width:auto; max-width:62%; }
.cover-opts .empty-hint{ padding:2px; }

/* Who's Who controls */
.ww-ctrls{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; padding:8px; border:1px solid var(--line); border-radius:8px; background:#f8fafc; }
.ww-ctrls .fld-inline{ gap:8px; }
.ww-ctrls input[type="range"]{ flex:1; min-width:0; }
.ww-ctrls select.fld{ width:auto; max-width:62%; margin-left:auto; }
.ww-size-val{ font-variant-numeric:tabular-nums; min-width:44px; text-align:right; }
.ww-ctrls .ww-only{ align-items:flex-start; line-height:1.3; }
.ww-ctrls .ww-only input{ margin-top:1px; }

/* ---- typography panel ---- */
.page-margins{ display:flex; flex-direction:column; gap:7px; margin-bottom:10px; padding:8px; border:1px solid var(--line); border-radius:8px; background:#f8fafc; }
.page-margins .fld-inline{ gap:8px; }
.page-margins input[type="range"]{ flex:1; min-width:0; }
.ty-sub{ font-size:11px; font-weight:700; color:var(--ink); }
.mgn-val{ font-variant-numeric:tabular-nums; min-width:44px; text-align:right; }
.ty-scope-row{ width:100%; margin-bottom:8px; }
.ty-scope-row select.fld{ flex:1; width:auto; }
.ty-role{ border:1px solid var(--line); border-radius:8px; padding:8px; margin-bottom:8px; }
.ty-role-head{ font-size:11px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.ty-role .ty-font{ margin-bottom:5px; }
.ty-row{ display:flex; gap:5px; margin-bottom:5px; }
.ty-row:last-child{ margin-bottom:0; }
.ty-sel{ flex:1; min-width:0; font-size:12px; padding:5px 6px; }

/* ============ PAGE MODEL (screen preview) ============ */
.stage{ display:flex; flex-direction:column; align-items:center; gap:28px; }
.page{
  position:relative; background:#fff; color:var(--ink);
  box-shadow:0 6px 24px rgba(15,23,42,.16); overflow:hidden;
}
/* NB: 'pg-*' not 'size-*' — Tailwind CDN ships a `size-full` utility that would clobber ours. */
.pg-half{ width:5.5in; height:8.5in; }
.pg-full{ width:8.5in; height:11in; }
.page-body{ position:absolute; top:var(--page-mv,.5in); left:var(--page-mh,.55in); right:var(--page-mh,.55in); bottom:var(--page-mv,.5in); overflow:hidden; }
.page-foot{ position:absolute; bottom:.24in; left:0; right:0; text-align:center; font-size:8pt; color:var(--muted); }
.page-blank{ background:#fff; }

/* Cover */
.page-cover .page-body{ display:flex; }
.cover{ display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; width:100%; height:100%; padding:.2in 0; }
.cover-kicker{ font-family:var(--sans); font-size:10pt; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:.15in; }
.cover-title{ font-family:var(--serif); font-weight:700; font-size:34pt; line-height:1.02; margin:0 0 .18in; }
.cover-credits{ font-family:var(--serif); font-size:13pt; color:#334155; line-height:1.5; }
.cover-foot{ margin-top:auto; font-family:var(--sans); font-size:9pt; color:var(--muted); line-height:1.5; }
.cover-license{ margin-top:.12in; font-size:7.5pt; max-width:3.6in; }
/* ===== Cover with image (image + text together) ===== */
.cover-image{ display:block; }
.fit-cover .cover-image{ object-fit:cover; }
.fit-contain .cover-image{ object-fit:contain; }

/* Background: image fills the cover, text overlaid. An aspect-ratio gives the cover a
   definite height in contexts without one (rail thumbnail, board, manual blocks); the
   auto-mode cover page (used by Print) overrides it to fill the real page height. */
.cover.cover-bg{ position:relative; padding:0; width:100%; aspect-ratio:11 / 17; height:auto; }
.page-cover .page-body > .cover.cover-bg{ aspect-ratio:auto; height:100%; }
.cover-bg > .cover-image{ position:absolute; inset:0; width:100%; height:100%; }
.cover-bg .cover-textwrap{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; padding:.25in; }
.cover-bg.textpos-top .cover-textwrap{ justify-content:flex-start; }
.cover-bg.textpos-center .cover-textwrap{ justify-content:center; }
.cover-bg.textpos-bottom .cover-textwrap{ justify-content:flex-end; }
.cover-bg .cover-text{ max-width:92%; text-align:center; }

/* Stack: image band above or below the text (band height is absolute inches). */
.cover.cover-stack{ display:flex; flex-direction:column; padding:0; width:100%; height:100%; }
.cover-band{ width:100%; overflow:hidden; flex:0 0 auto; }
.cover-band .cover-image{ width:100%; height:100%; }
.cover-stack .cover-text{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; padding:.25in .2in; text-align:center; }

/* Free: movable/resizable image frame over the centered text. */
.cover.cover-free{ position:relative; padding:0; display:block; }
.cover-free-text{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:.2in; }
.cover-imgbox{ position:absolute; }
.cover-imgbox .cover-image{ width:100%; height:auto; display:block; -webkit-user-drag:none; user-drag:none; pointer-events:none; }
.cover-resize{ display:none; }
/* Only the live preview stage is editable: show the frame outline + resize dot there. */
#stage .cover-free{ touch-action:none; }
#stage .cover-imgbox{ outline:1.5px dashed rgba(124,58,237,.7); outline-offset:2px; cursor:move; }
#stage .cover-resize{ display:block; position:absolute; right:-7px; bottom:-7px; width:14px; height:14px; background:var(--accent); border:2px solid #fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.3); cursor:nwse-resize; }

/* Scrim panel behind text (readability over the image). */
.cover-text.scrim-light{ background:rgba(255,255,255,.85); border-radius:8px; padding:.16in .2in; }
.cover-text.scrim-dark{ background:rgba(15,23,42,.62); border-radius:8px; padding:.16in .2in; color:#fff; }
.cover-text.scrim-dark .cover-kicker,
.cover-text.scrim-dark .cover-credits,
.cover-text.scrim-dark .cover-foot,
.cover-text.scrim-dark .cover-license{ color:#f1f5f9; }

/* Content blocks */
.block{ break-inside:avoid; }
.section-head{ font-family:var(--serif); font-weight:700; font-size:16pt; margin:.02in 0 .08in; padding-bottom:3pt; border-bottom:1px solid var(--line); }
.two-col-list .row{ display:flex; justify-content:space-between; gap:8pt; font-size:10.5pt; line-height:1.5; padding:1pt 0; }
.two-col-list dt{ font-weight:600; }
.two-col-list dd{ margin:0; color:#475569; text-align:right; }
.scene{ margin-bottom:3pt; }
.scene-act{ font-family:var(--sans); font-size:8.5pt; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-top:6pt; }
.scene-line{ display:flex; justify-content:space-between; font-size:10.5pt; }
.scene-note{ color:var(--muted); font-style:italic; }
.bio{ margin-bottom:7pt; font-size:9.5pt; line-height:1.42; }
.bio-name{ font-weight:700; }
.bio-role{ font-weight:400; color:var(--muted); font-style:italic; }
.prose{ font-size:10pt; line-height:1.5; white-space:normal; }
.note-by{ font-family:var(--serif); font-style:italic; font-size:11pt; text-align:right; margin-top:6pt; }

/* Photos (linked). Fixed box => deterministic pagination height even if the image
   is slow or fails to load. */
.photo{ display:block; background:#f1f5f9; object-fit:cover; border-radius:3px; }
.photo-empty{ display:flex; align-items:center; justify-content:center; color:#cbd5e1; font-size:7pt; text-transform:uppercase; letter-spacing:.1em; border:1px dashed #e2e8f0; }
.ww-photo{ width:var(--ww-w, 1in); height:var(--ww-h, 1.25in); object-fit:var(--ww-fit, cover); object-position:var(--ww-pos, center top); background:#f1f5f9; }

/* Who's Who */
.ww{ display:flex; gap:9pt; margin-bottom:9pt; break-inside:avoid; }
.ww-photo{ flex:0 0 auto; }
.ww-body{ flex:1; min-width:0; }
.ww-name{ font-weight:700; font-size:10.5pt; }
.ww-credit{ font-weight:400; font-style:italic; color:var(--muted); }
.ww-bio{ font-size:9pt; line-height:1.4; margin-top:2pt; }

/* Production Crew — category once, many names */
.crew-cat{ margin-bottom:5pt; }
.crew-name{ font-weight:700; font-size:10pt; }
.crew-people{ font-size:9.5pt; color:#475569; line-height:1.4; }

/* Custom image blocks — fixed-height box => deterministic pagination; contain => no crop */
.img-block{ break-inside:avoid; margin:0 0 8pt; }
.block-img-wrap{ position:relative; width:100%; }
.block-img{ display:block; width:100%; object-fit:contain; background:#f5f5f5; border-radius:3px; }
/* drag-to-resize handle: only shown/active in the live auto-preview */
.img-resize{ display:none; }
#stage[data-mode="auto"] [data-cimg] .block-img{ outline:1.5px dashed rgba(124,58,237,.45); outline-offset:2px; }
#stage[data-mode="auto"] [data-cimg] .img-resize{ display:block; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); width:38px; height:12px; background:var(--accent); border:2px solid #fff; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.3); cursor:ns-resize; touch-action:none; }
.img-small  .block-img{ height:1.6in; }
.img-medium .block-img{ height:3in; }
.img-large  .block-img{ height:4.5in; }
.img-xlarge .block-img{ height:6.6in; }
.img-block figcaption{ font-size:8.5pt; color:var(--muted); text-align:center; margin-top:3pt; font-style:italic; }

/* QR codes */
.qr-grid{ display:flex; flex-wrap:wrap; gap:12pt; }
.qr-tile{ display:flex; gap:8pt; align-items:center; break-inside:avoid; width:100%; }
.qr-code{ flex:0 0 auto; width:.95in; height:.95in; }
.qr-code svg{ width:100%; height:100%; display:block; }
.qr-missing{ width:100%; height:100%; border:1px dashed #e2e8f0; }
.qr-meta{ min-width:0; }
.qr-label{ font-weight:700; font-size:10pt; }
.qr-cap{ font-size:8.5pt; color:var(--muted); }
.qr-url{ font-size:7pt; color:#94a3b8; word-break:break-all; }

/* ============ Section-card rail ============ */
.rail-item{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; }
.rail-head{ display:flex; align-items:center; justify-content:space-between; padding:6px 8px; background:#f8fafc; border-bottom:1px solid var(--line); font-size:12px; font-weight:600; }
.rail-btns{ display:flex; gap:4px; }
.mini-btn{ font-size:10px; padding:3px 7px; border-radius:5px; border:1px solid var(--line); background:#fff; cursor:pointer; }
.mini-btn:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.card-scale{ overflow:hidden; }
.section-card{ width:5.5in; padding:.35in; background:#fff; color:var(--ink); }

/* ============ Assembly board ============ */
.board-toolbar{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.board-hint{ font-size:12px; color:var(--muted); }
.board-tray{ margin-bottom:16px; }
.tray-label,.board-page-head{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:6px; }
.board-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.board-page{ border:1px solid var(--line); border-radius:10px; background:#fff; padding:8px; min-height:150px; }
.board-page-head{ display:flex; justify-content:space-between; align-items:center; }
.board-del{ border:0; background:none; color:#cbd5e1; cursor:pointer; }
.board-del:hover{ color:#ef4444; }
.board-dropzone{ min-height:90px; display:flex; flex-direction:column; gap:6px; padding:4px; border:1.5px dashed transparent; border-radius:8px; }
.board-dropzone.over{ border-color:var(--accent); background:#faf5ff; }
.board-chip{ background:#ede9fe; color:#5b21b6; border:1px solid #ddd6fe; border-radius:7px; padding:6px 8px; font-size:12px; font-weight:600; cursor:grab; }
.board-chip.dragging{ opacity:.4; }

/* ============ Toast ============ */
.toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(20px); background:#0f172a; color:#fff; padding:10px 16px; border-radius:10px; font-size:13px; opacity:0; pointer-events:none; transition:.2s; z-index:50; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }