/* css/doc.css — document mode */
body.mode-document #artboard { background: #fff; }
#doc-margins { position: absolute; border: 1px solid rgba(216,32,42,.35); pointer-events: none; z-index: 9998; }
#doc-bleed { position: absolute; border: 1px dashed rgba(0,0,0,.25); pointer-events: none; z-index: 9998; }
.element.from-master { opacity: .92; }
body.mode-document .element.from-master::after { content: ""; position: absolute; inset: 0; outline: 1px dotted rgba(0,85,255,.25); pointer-events: none; }

/* text frames: bound to a section, styled by the document's styles */
.doc-frame { overflow: hidden; font: var(--doc-body-weight, 400) var(--doc-body-size)/var(--doc-body-lh) var(--doc-font); color: #1a1a1a; cursor: grab; }
.doc-frame .frame-body > :first-child { margin-top: 0; }
.doc-frame p { margin: 0 0 var(--doc-body-lh); text-align: left; hyphens: manual; }
.doc-frame h1 { font-size: var(--doc-h1-size); line-height: var(--doc-h1-lh); font-weight: var(--doc-h1-weight); margin: 0 0 var(--doc-body-lh); }
.doc-frame h2 { font-size: var(--doc-h2-size); line-height: var(--doc-h2-lh); font-weight: var(--doc-h2-weight); margin: var(--doc-body-lh) 0 0; }
.doc-frame h3 { font-size: var(--doc-h3-size); line-height: var(--doc-h3-lh); font-weight: var(--doc-h3-weight); margin: var(--doc-body-lh) 0 0; }
.doc-frame ul, .doc-frame ol { margin: 0 0 var(--doc-body-lh); padding-left: 1.4em; }
.doc-frame blockquote { margin: 0 0 var(--doc-body-lh) 1.4em; color: #444; }
.doc-frame hr { border: 0; border-top: 1px solid #1a1a1a; margin: 0 0 calc(var(--doc-body-lh) - 1px); }
.doc-frame a { color: inherit; text-decoration: underline; }
.doc-frame .missing { color: #d8202a; }
.doc-frame.overset::after { content: "+"; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; background: #d8202a; color: #fff; font: 700 10px/12px var(--ui-font); text-align: center; }
body.mode-document .doc-frame:not(.from-master) { outline: 1px dashed rgba(0,85,255,.35); outline-offset: -1px; }
.doc-folio { white-space: nowrap; }

/* filmstrip */
#doc-strip { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.45); z-index: 10001; max-width: calc(100vw - 340px); }
body.ui-hidden #doc-strip { display: none; }
#doc-strip .tiles { display: flex; gap: 6px; overflow-x: auto; }
#doc-strip .tile { flex: none; position: relative; border: 1px solid var(--panel-edge); background: var(--paper-a); cursor: pointer; }
#doc-strip .tile.on { outline: 2px solid var(--verdigris); outline-offset: -1px; }
#doc-strip .tile .n { position: absolute; left: 3px; top: 1px; font: 10px var(--ui-font); color: #1a1a1a; }
#doc-strip .tile .m { position: absolute; right: 3px; bottom: 1px; font: 9px var(--ui-font); color: var(--verdigris-deep); }
#doc-strip .tile.master { width: auto; padding: 0 8px; display: flex; align-items: center; background: var(--verdigris-dim); }
#doc-strip .tile.master .n { position: static; color: var(--verdigris); }
#doc-strip .ops { display: flex; gap: 4px; border-left: 1px solid var(--panel-edge); padding-left: 10px; }
#doc-strip .ops button { width: 26px; height: 26px; border: 1px solid var(--panel-edge); border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; font: 12px var(--ui-font); touch-action: manipulation; }
#doc-strip .ops button:hover { color: var(--verdigris); border-color: var(--verdigris); }

/* document tab */
#doc-panel .fields { display: grid; gap: 6px; }
#doc-panel .fields label { display: grid; gap: 2px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
#doc-panel .fields input, #doc-panel .fields select, #doc-panel textarea, #doc-panel .input-group select { width: 100%; text-align: left; font: 12px var(--ui-font); border: 1px solid var(--panel-edge); border-radius: 6px; background: transparent; color: var(--ink); padding: 5px 6px; text-transform: none; letter-spacing: 0; }
#doc-panel .fields input:focus, #doc-panel .fields select:focus, #doc-panel textarea:focus { outline: none; border-color: var(--verdigris); }
#doc-panel .fields input[type=number] { text-align: right; }
#doc-panel .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#doc-panel .row3 { display: grid; grid-template-columns: 52px 1fr 1fr 1fr; gap: 4px; align-items: center; }
#doc-panel .row3 .lbl { font-size: 10px; color: var(--muted); }
#doc-panel .quad { display: flex; gap: 2px; }
#doc-panel .quad input { width: 100%; padding: 3px 2px; text-align: right; }
#doc-panel textarea { font: 11px/1.4 ui-monospace, Menlo, monospace; background: #1f1d19; resize: vertical; white-space: pre-wrap; }
#doc-panel .hint { font-size: 10px; color: var(--faint); margin-top: 6px; }
#doc-panel .input-group select { width: 130px; }

/* threading */
#doc-measure { position: absolute; left: -20000px; top: 0; visibility: hidden; pointer-events: none; overflow: hidden; }
#doc-measure .doc-frame { position: absolute; }
.doc-frame .frame-body > .cont { text-indent: 0; }
.doc-frame.linked::before { content: "▸"; position: absolute; right: -13px; bottom: -1px; width: 12px; height: 12px; background: #0055ff; color: #fff; font: 700 9px/12px var(--ui-font); text-align: center; }
.doc-frame.cont .frame-body::before { content: none; }
body.mode-document .doc-frame.cont:not(.from-master) { outline-color: rgba(0,85,255,.6); }
.doc-frame.cont::after { content: "◂"; position: absolute; left: -13px; top: -1px; width: 12px; height: 12px; background: #0055ff; color: #fff; font: 700 9px/12px var(--ui-font); text-align: center; }
.doc-frame.overset.cont::after { content: "◂"; }

/* clean view (G): the page as printed */
body.doc-clean #grid-overlay, body.doc-clean #doc-margins, body.doc-clean #doc-bleed, body.doc-clean .doc-frame::before, body.doc-clean .doc-frame::after, body.doc-clean .from-master::after { display: none !important; }
body.doc-clean .doc-frame:not(.from-master) { outline: none !important; }