/*
 * Studio chrome only. Everything that appears ON a book page lives in
 * js/theme.js (BOOK_CSS) so the editor and the exports share one stylesheet.
 */
:root{--ui-scale:1;--ink:#202a28;--muted:#7d8580;--line:#e8e9e4;--canvas:#eeefeb;--green:var(--b-primary,#315e4e);--green-dark:color-mix(in srgb,var(--green) 80%,#000);--mint:color-mix(in srgb,var(--green) 9%,#fff);--orange:var(--b-accent,#d17a4c);--danger:#a6493d;--shadow:0 18px 50px #29352d16;--ui:'DM Sans',sans-serif;--display:'Manrope',sans-serif}
*{box-sizing:border-box}
body{margin:0;background:#f7f6f2;color:var(--ink);font-family:var(--ui);font-size:14px}
button,input,select{font-family:inherit}
.app-shell{min-height:100vh}

/* ── Studio scale: panels grow on large monitors so text stays readable ── */
@media(min-width:1700px){:root{--ui-scale:1.1}}
@media(min-width:2100px){:root{--ui-scale:1.22}}
@media(min-width:2600px){:root{--ui-scale:1.4}}
@media(min-width:3400px){:root{--ui-scale:1.7}}
.topbar,.page-rail,.insert-panel,.canvas-toolbar,.style-bar,.canvas-footer{zoom:var(--ui-scale)}

/* ── Top bar ── */
.topbar{height:76px;background:#fffefa;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 30px;gap:38px;position:relative;z-index:2}
.brand{display:flex;gap:10px;align-items:center;min-width:172px;border:0;background:none;padding:0;text-align:left;color:var(--ink);cursor:pointer}
.brand-mark{width:36px;height:36px;flex:none;background:var(--green);color:#fffefa;border-radius:12px 12px 12px 4px;display:grid;place-items:center;font:800 19px var(--display)}
.brand strong{font:800 18px var(--display);letter-spacing:-.8px;display:block;line-height:1}
.brand small{font-size:8px;color:#8a918b;letter-spacing:1.35px;display:block;margin-top:4px;font-weight:700}
.document-name{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line);padding-left:26px;min-width:260px}
.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.25px;color:#929991}
.document-name input{font:700 15px var(--display);border:0;background:transparent;padding:0;color:var(--ink);outline:none;width:300px}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.save-state{font-size:11px;color:#858d86;margin-right:8px;white-space:nowrap}
.save-state i{display:inline-block;width:7px;height:7px;background:#79a886;border-radius:50%;margin-right:7px}
.save-state.is-saving i{background:#d8b45c}
.save-state.is-error{color:var(--danger)}.save-state.is-error i{background:var(--danger)}
.button{border:1px solid transparent;border-radius:8px;height:38px;padding:0 15px;font:600 12px var(--ui);cursor:pointer;transition:.15s}
.button:hover{transform:translateY(-1px)}
.button-quiet{background:#fff;border-color:#dfe4dd;color:#44514a}
.button-primary{background:var(--green);color:#fff;box-shadow:0 4px 10px color-mix(in srgb,var(--green) 18%,transparent)}
.button-primary:hover{background:var(--green-dark)}
.button-primary span{font-size:16px;margin-right:6px}

/* ── Layout ── */
.workspace{height:calc(100vh - 76px * var(--ui-scale));min-height:600px;display:grid;grid-template-columns:calc(245px * var(--ui-scale)) minmax(0,1fr) calc(304px * var(--ui-scale));grid-template-rows:minmax(0,1fr)}
.page-rail,.insert-panel{background:#fffefa}
.page-rail{border-right:1px solid var(--line);padding:26px 18px 18px;display:flex;flex-direction:column;min-height:0}
.rail-heading{display:flex;justify-content:space-between;align-items:center;padding:0 4px 18px}
.rail-heading h1{font:700 18px var(--display);margin:5px 0 0;letter-spacing:-.5px}
.icon-button{width:30px;height:30px;border:1px solid #e3e7e1;border-radius:8px;background:#fff;color:#647067;font:500 17px var(--ui);display:grid;place-items:center;cursor:pointer}
.icon-button:hover{background:#f1f5f0;color:var(--green)}
.icon-button:disabled{opacity:.36;cursor:not-allowed}
.delete-block-button:not(:disabled){color:var(--danger);background:#fff2ef;border-color:#efc9c2}

/* ── Page rail ── */
.page-list{display:flex;flex-direction:column;gap:10px;overflow:auto;min-height:0}
.page-card-wrap{display:grid;grid-template-columns:minmax(0,1fr) 25px;align-items:center;gap:4px;border-radius:10px;cursor:grab}
.page-card-wrap.dragging{opacity:.45}
.page-card-wrap.drop-target{outline:2px dashed color-mix(in srgb,var(--green) 50%,#fff);outline-offset:2px}
.page-card{width:100%;min-width:0;padding:7px;background:transparent;border:1px solid transparent;border-radius:10px;cursor:pointer;text-align:left;color:inherit;transition:.15s}
.page-card:hover{background:#f7f8f4}
.page-card.active{background:var(--mint);border-color:color-mix(in srgb,var(--green) 18%,#fff)}
.page-thumb{height:123px;background:var(--b-paper,#fff);border:1px solid #e8e9e4;border-radius:4px;box-shadow:0 3px 8px #1c30210a;padding:13px 12px;overflow:hidden;position:relative}
.page-thumb::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green)}
.thumb-kicker{font-size:6px;letter-spacing:.8px;color:var(--orange);text-transform:uppercase;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thumb-title{font:700 12px var(--display);line-height:1.2;margin:9px 0 5px;max-height:44px;overflow:hidden}
.thumb-line{height:3px;background:#eceee9;border-radius:2px;margin:5px 0;width:90%}
.thumb-line.short{width:56%}
.thumb-chip{height:24px;background:var(--mint);border-radius:4px;margin-top:9px}
.thumb-num{position:absolute;bottom:9px;right:10px;color:#969d97;font-size:8px}
.page-meta{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:8px 2px 0;font-size:11px;font-weight:600;color:#5e6961}
.page-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-meta small{font-size:9px;color:#929991;font-weight:500;flex:none}
.page-order-controls{display:flex;flex-direction:column;gap:4px}
.page-order-controls button{width:24px;height:24px;padding:0;border:1px solid #e1e6df;border-radius:7px;background:#fff;color:#69756c;font:600 14px var(--ui);line-height:1;cursor:pointer}
.page-order-controls button:hover:not(:disabled){background:var(--mint);color:var(--green)}
.page-order-controls button:disabled{opacity:.32;cursor:not-allowed}
.rail-tip{margin-top:auto;border-top:1px solid var(--line);padding:17px 5px 3px;display:flex;gap:10px}
.tip-icon{width:27px;height:27px;border-radius:8px;background:color-mix(in srgb,var(--orange) 12%,#fff);color:var(--orange);display:grid;place-items:center;flex:0 0 auto}
.rail-tip strong{font-size:11px}
.rail-tip p{font-size:10px;color:#808780;line-height:1.5;margin:4px 0 0}

/* ── Canvas ── */
.editor-area{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--canvas)}
.canvas-toolbar{height:52px;background:#f8f8f5;border-bottom:1px solid #e5e7e2;display:flex;align-items:center;justify-content:space-between;padding:0 25px;gap:12px}
.breadcrumbs{font-size:11px;color:#858d86;display:flex;gap:10px;align-items:center;min-width:0}
.breadcrumbs>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.breadcrumbs b{font-weight:400;color:#c0c5bf}
.breadcrumbs strong{color:#3c4941;font-weight:600;max-width:220px;min-width:60px;outline:none;cursor:text}
.breadcrumbs strong:focus{outline:1px dashed #a7bca9;outline-offset:3px}
.canvas-controls{display:flex;align-items:center;gap:9px;color:#7a837c;font-size:10px}
.canvas-controls .icon-button{width:25px;height:25px;font-size:14px}
.fit-button[aria-pressed=true]{background:var(--mint);color:var(--green);border-color:color-mix(in srgb,var(--green) 30%,#fff)}
.zoom-value{min-width:34px;text-align:center}
.toolbar-divider{height:20px;border-left:1px solid #dfe2dc;margin:0 3px}
.canvas-scroll{flex:1;min-height:0;overflow:auto;scrollbar-gutter:stable;padding:28px 35px 40px}
.canvas-scroll .paper{--z:1;--pt:calc(1px * var(--z));width:calc(595px * var(--z));min-height:calc(842px * var(--z));font-size:calc(13px * var(--z));margin:0 auto;box-shadow:var(--shadow)}
.canvas-footer{height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;background:#f8f8f5;border-top:1px solid #e5e7e2;color:#90978f;font-size:9px}

/* ── Authoring affordances on the page ── */
#paper [contenteditable=true]{outline:none;white-space:pre-wrap;min-height:1em;cursor:text}
#paper [contenteditable=true]:empty::before{content:attr(data-placeholder);color:#a9afa9;font-style:normal;pointer-events:none}
#paper [contenteditable=true]:focus{outline:1px dashed color-mix(in srgb,var(--green) 45%,#fff);outline-offset:2px}
#paper .paper-block{outline:1px solid transparent;border-radius:4px;transition:outline-color .12s}
#paper .paper-block:hover{outline:1px dashed #b9c8bd}
#paper .paper-block.selected-block{outline:1px solid color-mix(in srgb,var(--green) 35%,#fff)}
.block-controls{position:absolute;right:-29px;top:0;display:flex;flex-direction:column;gap:4px;opacity:0;visibility:hidden;z-index:8;transition:opacity .15s}
.paper[dir=rtl] .block-controls{right:auto;left:-29px}
.selected-block>.block-controls{opacity:1;visibility:visible}
.block-controls button{width:22px;height:22px;border:1px solid #e2e7e1;background:#fff;border-radius:6px;color:#69746b;cursor:pointer;box-shadow:0 2px 6px #26332714;font-size:12px}
.block-controls button[data-action=remove]{background:#fff2ef;border-color:#efc9c2;color:var(--danger);font-weight:700}
.empty-page{border:1px dashed #c9d2ca;border-radius:10px;padding:40px 20px;text-align:center;color:#8a948c;font-size:12px;line-height:1.7}
.add-row{display:block;border:0;border-top:1px dashed #dfe5de;background:transparent;margin-top:8px;padding:8px 0 0;color:var(--green);font:500 10px var(--ui);cursor:pointer}
.add-row:disabled{opacity:.4;cursor:not-allowed}
.dialogue-row,.glossary-row,.check-row,.quiz-author-option{position:relative}
.row-remove{position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:18px;height:18px;padding:0;border:1px solid #efc9c2;border-radius:50%;background:#fff;color:var(--danger);font-size:11px;line-height:1;cursor:pointer;opacity:0;transition:opacity .12s}
.dialogue-row:hover>.row-remove,.glossary-row:hover>.row-remove,.check-row:hover>.row-remove,.quiz-author-option:hover>.row-remove,.row-remove:focus{opacity:1}
.author-note{font:10px/1.45 var(--ui);color:#818b82;margin:0 0 8px}
.author-subhead{margin-top:12px;font:700 9px var(--ui);color:#88928a;text-transform:uppercase;letter-spacing:.7px}
.author-settings{display:grid;grid-template-columns:100px 1fr;gap:8px;margin:12px 0 6px}
.author-settings label,.video-controls label{display:flex;flex-direction:column;gap:4px;color:#6d786f;font:600 9px var(--ui)}
.author-settings small{font-weight:400}
.author-settings input,.video-controls input[type=url]{min-width:0;border:1px solid #dfe5de;border-radius:6px;padding:7px 8px;font:10px var(--ui)}
.quiz-author-options{display:grid;gap:6px;margin-bottom:4px}
.quiz-author-option{display:flex;align-items:center;gap:8px;padding:6px 26px 6px 8px;border:1px solid #e8ece7;border-radius:7px;font-size:.92em}
.quiz-author-option.is-correct{border-color:color-mix(in srgb,var(--green) 45%,#fff);background:var(--mint)}
.quiz-author-option .option-text{flex:1}
.quiz-author-option small{font:700 9px var(--ui);color:var(--green)}
.quiz-explanation{margin-top:4px;padding:8px 10px;border-radius:6px;background:#f6f8f4;font-size:.85em;min-height:30px}
.image-stage.is-empty{display:grid;place-items:center;min-height:180px;border:1px dashed #bdc9bd;background:#f7f8f4}
.image-pick{display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px;cursor:pointer;color:#6f7c72;font-size:12px;width:100%}
.image-pick small{font-size:10px;color:#929b94}
.image-pick input,.image-replace input{display:none}
.image-replace{position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:7px;background:#fff;color:#52675a;display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 6px #20302020;z-index:2}
.hotspot-editor{position:absolute;min-width:115px;min-height:48px;overflow:auto;resize:both;border:1px solid var(--green);border-radius:7px;background:#fffefaf2;box-shadow:0 2px 8px #22332224;padding:5px;z-index:1}
.hotspot-editor input{display:block;width:100%;min-width:0;border:1px solid #d9e1da;border-radius:4px;padding:4px 5px;font:10px var(--ui)}
.hotspot-grip{display:block;font:600 9px var(--ui);color:#5d7863;cursor:move;touch-action:none;user-select:none;margin-bottom:3px}
.hotspot-editor>button{position:absolute;right:1px;top:1px;border:0;border-radius:50%;background:#fff;color:var(--danger);width:18px;height:18px;padding:0;cursor:pointer}
.image-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.image-tools .add-row{border-top:0;margin-top:0;padding-top:0}
.image-tools span{font:10px var(--ui);color:#818b82}
#paper .alt-text{margin-top:6px;padding:5px 7px;border-radius:4px;background:#f4f6f1;font:10px/1.4 var(--ui);color:#6f7a72}
.video-controls{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;margin-bottom:10px}
.video-upload{border:1px dashed #cbd7cd;border-radius:6px;padding:8px;cursor:pointer}
.video-upload input{max-width:135px;font-size:9px}
.video-empty{display:grid;place-items:center;min-height:105px;border:1px dashed #bdc9bd;border-radius:8px;color:#7b867e;font:11px var(--ui)}

/* ── Insert panel ── */
.insert-panel{border-left:1px solid var(--line);padding:29px 20px 17px;display:flex;flex-direction:column;overflow:auto}
.panel-intro h2{font:700 19px var(--display);letter-spacing:-.5px;margin:7px 0 5px}
.panel-intro p{font-size:11px;line-height:1.55;color:#818981;margin:0;max-width:240px}
.block-group{margin-top:18px}
.block-group>.eyebrow{margin:0 0 4px 8px}
.block-grid{display:flex;flex-direction:column;gap:2px}
.block-choice{border:1px solid transparent;background:transparent;border-radius:9px;padding:7px 8px;display:grid;grid-template-columns:32px 1fr 16px;align-items:center;gap:10px;text-align:left;cursor:pointer;color:var(--ink);transition:.15s}
.block-choice:hover{border-color:#e1e7e0;background:#f7f9f5}
.block-choice>b{color:#a1aaa2;font-size:15px;font-weight:400}
.block-choice:hover>b{color:var(--green)}
.block-icon{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;font:700 13px var(--display)}
.icon-text{background:color-mix(in srgb,var(--green) 9%,#fff);color:var(--green)}
.icon-interactive{background:color-mix(in srgb,var(--orange) 12%,#fff);color:color-mix(in srgb,var(--orange) 85%,#000)}
.icon-media{background:#edf2f6;color:#66809a}
.block-choice strong{display:block;font-size:11px;font-weight:600}
.block-choice small{display:block;font-size:9px;color:#8b938b;margin-top:2px}
.panel-section{border-top:1px solid var(--line);padding-top:15px;margin-top:18px}
.library-heading{display:flex;align-items:center;justify-content:space-between;gap:4px}
.library-heading h3{font:700 14px var(--display);letter-spacing:-.2px;margin:5px 0 0}
.library-help{font-size:10px;line-height:1.5;color:#828b83;margin:7px 0 9px}
.original-badge{font-size:7px;letter-spacing:.75px;font-weight:700;color:var(--green);background:var(--mint);padding:5px 6px;border-radius:5px}
.template-list{margin:8px 0 4px}
.template-item{display:grid;grid-template-columns:1fr 22px;align-items:center;gap:2px}
.template-choice{width:100%;display:grid;grid-template-columns:27px 1fr 15px;align-items:center;gap:8px;padding:7px 6px;border:1px solid transparent;background:transparent;border-radius:8px;text-align:left;color:var(--ink);cursor:pointer}
.template-choice:hover{border-color:#e1e7e0;background:#f7f9f5}
.template-number{font:700 9px var(--display);color:var(--orange);background:color-mix(in srgb,var(--orange) 11%,#fff);width:25px;height:25px;border-radius:7px;display:grid;place-items:center}
.template-choice strong{font-size:10px;display:block;font-weight:600}
.template-choice small{font-size:8px;display:block;color:#899189;margin-top:3px}
.template-choice>b{font-weight:400;color:#9ca59d}
.template-delete{width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:#b0b6b0;cursor:pointer}
.template-delete:hover{background:#fff2ef;color:var(--danger)}
.template-form{display:grid;gap:7px;margin-top:6px}
.template-form input[type=text]{height:31px;border:1px solid #e3e8e1;border-radius:7px;padding:0 9px;font:500 10px var(--ui);outline:none}
.template-form .button{height:32px;font-size:10px}
.check-inline{display:flex;align-items:center;gap:6px;font-size:10px;color:#68736b}
.check-inline input{accent-color:var(--green)}
.symbol-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.symbol-choice{border:1px solid #e8ebe5;background:#fff;border-radius:8px;padding:6px 4px;min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#66746a;font:500 8px var(--ui);cursor:pointer}
.symbol-choice:hover{border-color:color-mix(in srgb,var(--green) 35%,#fff);background:#f6f9f5;color:var(--green)}
.symbol-preview svg{width:47px;height:35px;fill:none;stroke:var(--green);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.symbol-preview svg .accent{stroke:var(--orange)}
.symbol-preview svg .bubble-dot{stroke-width:3.4}
.course-settings{display:flex;flex-direction:column;gap:9px}
.course-settings label{display:flex;flex-direction:column;gap:4px;font-size:9px;font-weight:600;color:#68736b}
.course-settings input,.course-settings select{height:31px;width:100%;border:1px solid #e3e8e1;border-radius:7px;background:#fff;padding:0 9px;color:#38463c;font:500 10px var(--ui);outline:none}
.course-settings input:focus,.course-settings select:focus,.template-form input:focus{border-color:color-mix(in srgb,var(--green) 45%,#fff);box-shadow:0 0 0 2px var(--mint)}
.settings-row{display:grid;grid-template-columns:74px 1fr;gap:8px}
.panel-bottom{border-top:1px solid var(--line);padding-top:12px;margin-top:18px;display:flex;flex-direction:column;gap:8px}
.text-button{border:0;background:none;text-align:left;font:500 10px var(--ui);color:#6c786e;cursor:pointer;padding:3px}
.text-button:hover{color:var(--green)}
.text-button.danger:hover{color:var(--danger)}
.text-button span{float:right}
.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,12px);background:color-mix(in srgb,var(--green) 75%,#000);color:#fff;padding:10px 16px;border-radius:8px;font-size:11px;opacity:0;pointer-events:none;transition:.2s;z-index:40;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ── Header and footer, font picker, style bar ── */
.library[hidden]{display:none!important}
#paper .paper-topline,#paper .paper-footer{border-radius:3px;outline:1px solid transparent;outline-offset:4px;transition:outline-color .12s}
#paper .paper-topline:hover,#paper .paper-footer:hover{outline:1px dashed #b9c8bd}
#paper .selected-zone{outline:1px solid color-mix(in srgb,var(--green) 35%,#fff)}
#paper .paper-topline [contenteditable],#paper .paper-footer [contenteditable]{min-width:3em}
.style-bar{flex:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:44px;padding:6px 25px;background:#fbfbf8;border-bottom:1px solid #e5e7e2;font-size:10px;color:#6c766e}
.style-bar.is-empty .style-target{color:#9aa198}
.style-target{font-weight:600;color:#3c4941;margin-right:4px}
.font-button{min-width:150px;max-width:240px;height:30px;padding:0 28px 0 10px;border:1px solid #dfe4dd;border-radius:7px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237d8580' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;color:#38463c;font-size:13px;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.font-button:disabled{opacity:.45;cursor:not-allowed}
.font-button:hover:not(:disabled){border-color:color-mix(in srgb,var(--green) 40%,#fff)}
.field .font-button{width:100%;max-width:none;height:38px;font-size:15px}
.style-size{display:flex;align-items:center;gap:6px}
.style-size input{width:64px;height:30px;border:1px solid #dfe4dd;border-radius:7px;padding:0 8px;font:500 11px var(--ui)}
.style-size input:disabled{opacity:.45}
.style-bar .text-button:disabled{opacity:.4;cursor:not-allowed}
.font-picker{position:fixed;z-index:60;display:flex;flex-direction:column;background:#fffefa;border:1px solid #dfe4dd;border-radius:12px;box-shadow:0 18px 50px #1c2a2133;overflow:hidden;font-family:var(--ui)}
.font-picker[hidden]{display:none}
.font-picker-head{padding:10px 10px 6px;border-bottom:1px solid var(--line);display:grid;gap:7px}
.font-search{height:34px;border:1px solid #dfe4dd;border-radius:8px;padding:0 10px;font:500 12px var(--ui);outline:none}
.font-search:focus{border-color:color-mix(in srgb,var(--green) 45%,#fff);box-shadow:0 0 0 2px var(--mint)}
.font-filters{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:#6c766e}
.font-filters select{height:26px;border:1px solid #e3e8e1;border-radius:6px;background:#fff;font:500 10px var(--ui)}
.font-filters label{display:flex;align-items:center;gap:5px;white-space:nowrap}
.font-default{margin:6px 8px 0;padding:8px 10px;border:1px dashed #cfd8d0;border-radius:8px;background:transparent;color:#56635a;font:600 11px var(--ui);text-align:left;cursor:pointer}
.font-default:hover{background:var(--mint)}
.font-list{flex:1;min-height:0;overflow:auto;padding:4px 6px 6px}
.font-row{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:7px 8px;border:0;border-radius:7px;background:transparent;text-align:left;cursor:pointer;color:#26342e}
.font-row span{font-size:17px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.font-row small{flex:none;font:500 9px var(--ui);color:#9aa198}
.font-row:hover,.font-row:focus-visible{background:#f1f5f0;outline:none}
.font-row.is-current{background:var(--mint)}
.font-count{padding:6px 12px;border-top:1px solid var(--line);font-size:9px;color:#9aa198}

/* ── Free placement: move and resize handles ── */
#paper .paper-block.is-free{outline:1px dashed color-mix(in srgb,var(--green) 28%,#fff)}
.rz{position:absolute;width:10px;height:10px;background:#fff;border:1.5px solid var(--green);border-radius:2px;z-index:6;display:none}
.selected-block>.rz{display:block}
.rz-e,.rz-w{top:50%;margin-top:-5px;cursor:ew-resize}
.rz-e,.rz-ne,.rz-se{right:-6px}
.rz-w,.rz-nw,.rz-sw{left:-6px}
.rz-ne,.rz-nw{top:-6px}
.rz-se,.rz-sw{bottom:-6px}
.rz-ne,.rz-sw{cursor:nesw-resize}
.rz-nw,.rz-se{cursor:nwse-resize}
.block-controls .block-move{cursor:grab;color:var(--green);font-size:13px}
body.is-framing,body.is-framing *{cursor:grabbing!important;user-select:none!important}

/* ── Author forms for the newer blocks ── */
.block-search{width:100%;height:34px;margin-top:14px;border:1px solid #e3e8e1;border-radius:8px;padding:0 10px;font:500 11px var(--ui);outline:none;background:#fff}
.block-search:focus{border-color:color-mix(in srgb,var(--green) 45%,#fff);box-shadow:0 0 0 2px var(--mint)}
.icon-q{background:color-mix(in srgb,var(--orange) 12%,#fff);color:color-mix(in srgb,var(--orange) 85%,#000)}
.icon-fill{background:#f2edf7;color:#866c9a}
.icon-game{background:#fff3d7;color:#ad8536}
.icon-voice{background:#e8f3f6;color:#3f7f91}
.icon-imgx{background:#edf2f6;color:#66809a}
.icon-show{background:#edf4e9;color:#688551}
#paper .tf-edit,#paper .pair-edit,#paper .order-edit,#paper .group-edit,#paper .media-row{position:relative;display:flex;align-items:center;gap:8px;padding:6px 26px 6px 8px;border:1px solid #e8ece7;border-radius:7px;margin-bottom:6px;font-size:.92em}
#paper .pair-edit>div,#paper .tf-edit .tf-text,#paper .order-edit .order-text{flex:1;min-width:0}
#paper .pair-edit>span{color:#9aa198}
#paper .group-edit{flex-direction:column;align-items:stretch}
#paper .group-edit .group-name,#paper .tl-date-edit{font-weight:700}
.order-num{flex:none;width:20px;height:20px;border-radius:50%;background:var(--mint);color:var(--green);font:700 10px var(--ui);display:grid;place-items:center}
#paper .tf-edit select,#paper .author-settings select{height:28px;border:1px solid #dfe5de;border-radius:6px;font:500 10px var(--ui);background:#fff}
#paper .author-settings.one{grid-template-columns:1fr}
#paper .cloze-source,#paper .transcript{padding:8px 10px;border:1px dashed #cfd8d0;border-radius:6px;line-height:1.7;min-height:3em}
.author-note code{background:#eef2ed;padding:0 4px;border-radius:3px}
#paper *:hover>.row-remove{opacity:1}
.video-controls{display:flex!important;flex-wrap:wrap;gap:8px;align-items:flex-end}
.video-controls>label:first-child{flex:1;min-width:150px}
.media-upload,.media-record{display:inline-flex;align-items:center;gap:4px;border:1px dashed #cbd7cd;border-radius:6px;padding:7px 9px;font:600 9px var(--ui);color:#56635a;background:#fff;cursor:pointer;white-space:nowrap}
.media-upload input{display:none}
.media-record{border-style:solid;color:var(--danger)}
body.is-recording .media-record{background:#fff2ef;border-color:#efc9c2}
.media-row-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.media-row-text{flex:1;min-width:0}
.media-ok{font:600 9px var(--ui);color:var(--green)}
.hotspot-editor.is-pin{min-width:0;min-height:0;width:auto;height:auto;padding:3px 20px 3px 6px;transform:translate(-50%,-50%);resize:none;overflow:visible;border-radius:12px;background:var(--orange);border-color:#fff}
.hotspot-editor.is-pin .hotspot-grip{color:#fff;margin:0}

/* ── Library ── */
.library{position:fixed;inset:0;z-index:25;display:flex;flex-direction:column;background:#f7f6f2}
.library-toolbar{height:68px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:#fffefa;border-bottom:1px solid var(--line)}
.library-title{display:flex;align-items:center;gap:11px}
.library-title .eyebrow{display:block;font-size:8px;margin-bottom:3px}
.library-title strong{font:700 13px var(--display)}
.library-body{flex:1;min-height:0;display:grid;grid-template-columns:300px 1fr}
.brand-panel{border-right:1px solid var(--line);background:#fffefa;padding:24px 20px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.brand-panel h2{font:700 19px var(--display);letter-spacing:-.5px;margin:6px 0 0}
.brand-preview{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 12px;border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--b-paper,#fffefa)}
.brand-preview strong{display:block;font:800 17px var(--b-display,var(--display));letter-spacing:-.4px}
.brand-preview small{display:block;font:500 10px var(--b-body,var(--ui));color:#7c857e;margin-top:3px}
.preview-swatches{grid-column:1/-1;display:flex;gap:6px;margin-top:6px}
.preview-swatches i{width:28px;height:14px;border-radius:4px;border:1px solid #0000001a}
.field{display:flex;flex-direction:column;gap:4px;font-size:9px;font-weight:600;color:#68736b}
.field input,.field select{height:34px;width:100%;border:1px solid #e3e8e1;border-radius:7px;background:#fff;padding:0 9px;color:#38463c;font:500 11px var(--ui);outline:none}
.field input:focus,.field select:focus{border-color:color-mix(in srgb,var(--green) 45%,#fff);box-shadow:0 0 0 2px var(--mint)}
.field input[type=color]{padding:3px;cursor:pointer}
.color-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.library-main{overflow:auto;padding:28px 36px 60px}
.legacy-note{display:flex;align-items:center;justify-content:space-between;gap:16px;background:color-mix(in srgb,var(--orange) 9%,#fff);border:1px solid color-mix(in srgb,var(--orange) 25%,#fff);border-radius:12px;padding:14px 16px;margin-bottom:18px}
.legacy-note strong{font-size:12px}
.legacy-note p{margin:3px 0 0;font-size:11px;color:#6f675d}
.new-book{display:grid;grid-template-columns:2fr 1fr 1.5fr auto;gap:10px;align-items:end;background:#fffefa;border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:30px}
.series{margin-bottom:34px}
.series-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.series-head input{font:700 18px var(--display);letter-spacing:-.4px;border:0;border-bottom:1px dashed transparent;background:transparent;color:var(--ink);padding:2px 0;outline:none;min-width:0;width:auto;field-sizing:content}
.series-head input:hover,.series-head input:focus{border-bottom-color:#b9c8bd}
.series-count{font-size:10px;color:#8b938b;white-space:nowrap}
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px}
.book-card{display:flex;flex-direction:column;gap:7px}
.book-cover{aspect-ratio:210/297;position:relative;display:flex;flex-direction:column;padding:16px 14px 14px 20px;border:1px solid var(--line);border-radius:4px 10px 10px 4px;background:var(--b-paper,#fffefa);box-shadow:0 10px 24px #29352d14;text-align:left;font:inherit;color:inherit;cursor:pointer;overflow:hidden;transition:transform .15s}
.book-cover:hover{transform:translateY(-3px)}
.book-cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--green)}
.cover-series{font:700 8px var(--ui);letter-spacing:1px;text-transform:uppercase;color:var(--orange)}
.book-cover strong{font:800 17px/1.15 var(--b-display,var(--display));letter-spacing:-.4px;margin-top:10px;color:color-mix(in srgb,var(--green) 25%,#1c201e);word-break:break-word}
.cover-label{margin-top:6px;font:500 10px var(--b-body,var(--ui));color:#7c857e}
.cover-foot{margin-top:auto;display:flex;justify-content:space-between;font:600 8px var(--ui);color:#9aa198}
.book-card.active .book-cover{outline:2px solid var(--green);outline-offset:3px}
.book-meta{font-size:10px;color:#7c857e}
.book-actions{display:flex;gap:4px;flex-wrap:wrap}
.book-actions button{font:500 10px var(--ui);border:1px solid #e1e6df;background:#fff;border-radius:6px;padding:5px 8px;cursor:pointer;color:#56635a}
.book-actions button:hover{color:var(--green)}
.book-actions button.danger:hover{color:var(--danger);border-color:#efc9c2}
.new-series{display:flex;gap:10px;max-width:460px}
.new-series input{flex:1;height:38px;border:1px dashed #cdd6ce;border-radius:8px;background:transparent;padding:0 12px;font:500 12px var(--ui);outline:none}

/* ── Print: the open book, in reader form ── */
.print-root{display:none}
@media print{
  @page{size:A4 portrait;margin:0}
  body{background:#fff}
  .app-shell,.book-reader,.library{display:none!important}
  .print-root{display:block}
  .print-root .paper{--pt:calc(14px / 13);width:210mm;height:297mm;margin:0;padding:20mm 20mm 17mm;font-size:14px;overflow:hidden;break-after:page;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .print-root .paper:last-child{break-after:auto}
  .print-root .paper::before{width:3mm}
  .print-root .paper-footer{left:20mm;right:20mm;bottom:9mm}
}

/* ── Smaller screens ── */
@media(max-width:1050px){.workspace{grid-template-columns:200px minmax(0,1fr) 260px}.topbar{padding:0 18px;gap:20px}.brand{min-width:145px}.document-name{padding-left:18px;min-width:0}.document-name input{width:220px}.insert-panel{padding-left:14px;padding-right:14px}.canvas-scroll{padding-left:20px;padding-right:20px}}
@media(max-width:800px){
  .topbar{height:auto;min-height:70px;flex-wrap:wrap;padding:12px 15px;gap:12px}
  .brand{min-width:0}.document-name input{width:190px}
  .top-actions{gap:6px;flex-wrap:wrap}.save-state{display:none}.button{padding:0 10px;font-size:10px}
  .workspace{height:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .workspace>*{min-width:0}
  .page-rail{order:2;border:0;border-top:1px solid var(--line);padding:14px}
  .page-list{flex-direction:row;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px}
  .chapter-row{flex:0 0 auto;align-self:flex-start;margin:0;border-bottom:0;border-left:2px solid var(--green);writing-mode:horizontal-tb;max-width:140px}
  .page-card-wrap.in-chapter{padding-left:0;border-left:0}.page-card-wrap{width:154px;flex:0 0 auto}.page-thumb{height:95px}.rail-tip{display:none}
  .editor-area{min-height:690px;order:1}
  .insert-panel{order:3;border:0;border-top:1px solid var(--line);padding:20px}
  .canvas-scroll{padding:16px 8px 24px}
  .block-controls{right:4px;top:-13px;flex-direction:row}.paper[dir=rtl] .block-controls{left:4px;right:auto}
  .library-body{grid-template-columns:1fr;overflow:auto}.brand-panel{border-right:0;border-bottom:1px solid var(--line);overflow:visible}.library-main{overflow:visible;padding:20px 16px 40px}
  .new-book{grid-template-columns:1fr}
}

/* ── Shared workspace: people, menus, locks ── */
.people{display:flex;align-items:center}
.avatar{--c:#777;width:28px;height:28px;flex:none;border-radius:50%;display:inline-grid;place-items:center;background:var(--c);color:#fff;font:700 10px var(--ui);letter-spacing:.3px;border:2px solid #fffefa;box-shadow:0 1px 3px #0002}
.people .avatar+.avatar{margin-left:-7px}
.menu-wrap,.me{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 6px);z-index:50;min-width:290px;background:#fffefa;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px #1c2a2126;padding:6px;display:grid;gap:2px}
.menu[hidden]{display:none}
.menu button{display:grid;gap:2px;text-align:left;border:0;background:transparent;border-radius:8px;padding:9px 11px;cursor:pointer;color:var(--ink);font:inherit}
.menu button:hover{background:var(--mint)}
.menu strong{font:600 12px var(--ui)}
.menu small{font:500 10px/1.4 var(--ui);color:#7d857e}
.me-button{border:0;background:none;padding:0;cursor:pointer;display:grid}
.me-button .avatar{width:34px;height:34px;font-size:11px}
.me-who{padding:9px 11px 8px;border-bottom:1px solid var(--line);margin-bottom:4px;display:grid;gap:2px}
.me-who strong{font-size:13px}
.save-state.is-synced i{background:#3c9d5d}
.save-state.is-offline{color:#a7741c}
.save-state.is-offline i{background:#d8b45c}
.page-people{position:absolute;right:6px;top:6px;display:flex}
.page-people .avatar{width:18px;height:18px;font-size:7px;border-width:1.5px}
.page-people .avatar+.avatar{margin-left:-5px}
#paper .is-locked{outline:2px solid var(--lock)!important;outline-offset:3px;cursor:not-allowed}
#paper .paper-topline.is-locked{position:relative}
#paper .is-locked::after{content:attr(data-lock);position:absolute;top:-22px;right:0;z-index:7;background:var(--lock);color:#fff;font:600 9px var(--ui);padding:3px 7px;border-radius:5px;white-space:nowrap;pointer-events:none}
#paper .remote-flash{animation:remoteFlash 1.2s ease-out}
@keyframes remoteFlash{0%{box-shadow:0 0 0 3px var(--lock)}100%{box-shadow:0 0 0 3px transparent}}

/* reviewers read; authors do not manage the brand, series or deletions */
body.is-readonly .insert-panel,body.is-readonly .style-bar,body.is-readonly #add-page,body.is-readonly #delete-page,body.is-readonly #delete-selected-block,body.is-readonly .page-order-controls,body.is-readonly #book-title,body.is-readonly .new-book,body.is-readonly .new-series,body.is-readonly .book-actions{display:none!important}
body.is-readonly .workspace{grid-template-columns:calc(245px * var(--ui-scale)) minmax(0,1fr)}
body.role-author .brand-panel>*:not(:first-child),body.is-readonly .brand-panel>*:not(:first-child){opacity:.5;pointer-events:none}
body.role-author .new-series,body.role-author [data-book-delete],body.role-author [data-series-delete]{display:none}

/* ── Login ── */
.auth{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:radial-gradient(ellipse at 50% 30%,#eef2ec,#dfe3dc)}
.auth[hidden]{display:none}
.auth-card{width:min(400px,100%);display:grid;gap:12px;background:#fffefa;border:1px solid var(--line);border-radius:18px;padding:30px 28px;box-shadow:0 30px 70px #1c2a2124}
.auth-card h1{font:800 22px var(--display);letter-spacing:-.6px;margin:6px 0 0}
.auth-mark{width:44px;height:44px;font-size:22px}
.auth-card .button{height:42px;font-size:13px}
.auth-error{min-height:1.2em;margin:0;color:var(--danger);font-size:12px;font-weight:600}

/* ── Team panel ── */
.team{position:fixed;inset:0;z-index:26;display:flex;flex-direction:column;background:#f7f6f2}
.team[hidden]{display:none}
.team-body{flex:1;min-height:0;display:grid;grid-template-columns:340px 1fr}
.team-new{border-right:1px solid var(--line);background:#fffefa;padding:24px 20px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.team-new h2{font:700 19px var(--display);letter-spacing:-.5px;margin:6px 0 0}
.field-row{display:flex;gap:6px}
.field-row input{flex:1}
.field-row .button{height:34px;font-size:10px}
.team-books-pick,.team-books{display:grid;gap:4px;margin-top:4px}
.team-series{display:grid;gap:3px;margin-bottom:6px}
.team-series>strong{font-size:10px;color:var(--green)}
.team-main{overflow:auto;padding:24px 32px 60px}
.team-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin-bottom:20px}
.team-roles div{background:#fffefa;border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:grid;gap:2px}
.team-roles strong{font-size:12px}
.team-roles span{font-size:10px;color:#7d857e}
.team-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.team-card{background:#fffefa;border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:12px;align-content:start}
.team-card.is-off{opacity:.55}
.team-who{display:flex;align-items:center;gap:10px}
.team-who .avatar{width:38px;height:38px;font-size:12px}
.team-who strong{display:block;font-size:14px}
.team-who small{font-size:10px;color:#7d857e}
.team-help{font-weight:500;font-size:10px;color:#7d857e;margin:0}
.team-books summary{cursor:pointer;font:600 11px var(--ui);color:var(--green)}
.team-actions{display:flex;flex-wrap:wrap;gap:4px 12px;border-top:1px solid var(--line);padding-top:10px}
@media(max-width:800px){.team-body{grid-template-columns:1fr;overflow:auto}.team-new{border-right:0;border-bottom:1px solid var(--line);overflow:visible}.team-main{overflow:visible;padding:20px 16px}}

/* the hidden attribute always wins over display rules */
[hidden]{display:none!important}

/* ── Cast: gallery in the panel, tools on the page, manager ── */
.cast-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.scene-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cast-choice,.scene-choice{min-width:0;border:1px solid #e8ebe5;background:#fff;border-radius:8px;padding:4px 3px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;font:500 8px var(--ui);color:#56635a}
.cast-choice:hover,.scene-choice:hover{border-color:color-mix(in srgb,var(--green) 35%,#fff);background:#f6f9f5}
.cast-choice img{width:100%;height:64px;object-fit:contain}
.scene-choice img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:5px}
.cast-choice span,.scene-choice span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cast-sub{margin:12px 0 6px}
.char-tools{display:none;position:absolute;left:0;top:100%;margin-top:8px;z-index:8;flex-wrap:wrap;gap:6px;align-items:center;width:max-content;max-width:330px;background:#fffefa;border:1px solid var(--line);border-radius:9px;padding:7px 9px;box-shadow:0 8px 22px #1c2a2124;font-size:11px}
#paper .selected-block>.char-tools,#paper .char-tools.is-static{display:flex}
#paper .char-tools.is-static{position:static;width:auto;max-width:none;margin-top:8px;padding:0;border:0;box-shadow:none;background:none}
.char-tools select{height:27px;max-width:150px;border:1px solid #dfe5de;border-radius:6px;font:500 10px var(--ui);background:#fff}
#paper .bubble.is-empty{display:none}
#paper .selected-block .bubble.is-empty{display:block;opacity:.8}
#paper .bubble [contenteditable=true]:empty::before{font-style:italic}
.cast-body{flex:1;min-height:0;display:grid;grid-template-columns:320px 1fr}
.cast-add{border-right:1px solid var(--line);background:#fffefa;padding:24px 20px;overflow:auto;display:flex;flex-direction:column;gap:10px}
.cast-add h2{font:700 19px var(--display);letter-spacing:-.5px;margin:6px 0 0}
.cast-add-option{display:grid;gap:3px;border:1px dashed #cbd7cd;border-radius:10px;padding:12px 14px;background:#fff;cursor:pointer}
.cast-add-option:hover{border-color:var(--green);background:var(--mint)}
.cast-add-option strong{font-size:12px}
.cast-add-option small{font-size:10px;color:#7d857e}
.cast-main{overflow:auto;padding:24px 32px 60px}
.cast-heading{font:700 16px var(--display);margin:4px 0 12px}
.cast-list{display:grid;gap:12px;margin-bottom:30px}
.cast-card{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:16px;background:#fffefa;border:1px solid var(--line);border-radius:14px;padding:14px}
.cast-strip{display:flex;gap:8px;overflow-x:auto;align-items:flex-end;padding-bottom:4px}
.cast-strip figure{margin:0;flex:none;display:grid;justify-items:center;gap:4px}
.cast-strip img{height:120px;width:auto;max-width:150px;object-fit:contain}
.cast-strip figcaption{font-size:9px;color:#7d857e;white-space:nowrap}
.cast-fields{display:grid;gap:8px;align-content:start}
.cast-actions{display:flex;flex-wrap:wrap;gap:4px 12px}
.cast-actions label{cursor:pointer}
.scene-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.scene-card{display:grid;gap:8px;background:#fffefa;border:1px solid var(--line);border-radius:12px;padding:10px}
.scene-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
body.role-author #cast-manage,body.is-readonly #cast-manage{display:none}
@media(max-width:900px){.cast-body{grid-template-columns:1fr;overflow:auto}.cast-add{border-right:0;border-bottom:1px solid var(--line);overflow:visible}.cast-main{overflow:visible;padding:20px 16px}.cast-card{grid-template-columns:1fr}}

/* ── Image editing (Canva-style bar, popovers, pixel editor) ── */
#paper .fx-anim{animation:none}
#paper .fx-play .fx-anim{animation:var(--fx-name) var(--fx-dur,.8s) cubic-bezier(.2,.7,.2,1) 0s both}
.fx-tools{display:none;flex-wrap:wrap;gap:2px}
.style-bar.is-image .fx-tools{display:flex}
.style-bar.is-image .style-target,.style-bar.is-image #style-font,.style-bar.is-image .style-size,.style-bar.is-image #style-reset{display:none}
.fx-tool{border:0;background:transparent;border-radius:7px;padding:6px 9px;font:600 11px var(--ui);color:#38463c;cursor:pointer;white-space:nowrap}
.fx-tool:hover{background:#eef2ed}
.fx-tool.is-on{background:var(--mint);color:var(--green)}
.fx-pop{position:fixed;z-index:60;width:320px;overflow:auto;background:#fffefa;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px #1c2a2130;padding:12px 14px;display:grid;gap:8px;font-size:11px}
.fx-pop[hidden]{display:none}
.fx-pop h4{margin:4px 0 0;font:700 11px var(--ui);color:#56635a;text-transform:uppercase;letter-spacing:.6px}
.fx-row{display:grid;grid-template-columns:110px 1fr 46px;align-items:center;gap:8px;font-size:11px;color:#56635a}
.fx-row.wide{grid-template-columns:1fr}
.fx-row input[type=range]{width:100%;accent-color:var(--green)}
.fx-row output{text-align:right;font-variant-numeric:tabular-nums;color:#7d857e}
.fx-row select,.fx-row input[type=url]{height:28px;border:1px solid #dfe5de;border-radius:6px;font:500 11px var(--ui);padding:0 6px;background:#fff;grid-column:2/4}
.fx-row.wide input{grid-column:1}
.fx-row input[type=color]{width:44px;height:26px;border:1px solid #dfe5de;border-radius:6px;padding:1px;background:#fff}
.fx-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.fx-presets button{border:1px solid #e3e8e1;background:#fff;border-radius:8px;padding:3px;cursor:pointer;display:grid;gap:2px;font:500 8px var(--ui);color:#56635a}
.fx-presets button.is-on{border-color:var(--green);box-shadow:0 0 0 2px var(--mint)}
.fx-presets img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:5px}
.fx-buttons{display:flex;flex-wrap:wrap;gap:6px}
.fx-buttons.grid3{display:grid;grid-template-columns:repeat(3,1fr)}
.fx-buttons button{border:1px solid #dfe4dd;background:#fff;border-radius:7px;padding:7px 9px;font:600 10px var(--ui);color:#38463c;cursor:pointer}
.fx-buttons button:hover,.fx-buttons button.is-on{background:var(--mint);border-color:color-mix(in srgb,var(--green) 35%,#fff);color:var(--green)}
.img-editor{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;background:#f2f1ec}
.img-editor[hidden]{display:none}
.img-editor-actions{display:flex;gap:8px}
.img-editor-body{flex:1;min-height:0;display:grid;grid-template-columns:270px 1fr}
.img-editor-tools{background:#fffefa;border-right:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:6px;overflow:auto}
.img-editor-tools>button{text-align:left;border:1px solid transparent;background:transparent;border-radius:8px;padding:9px 11px;font:600 12px var(--ui);color:#38463c;cursor:pointer}
.img-editor-tools>button:hover{background:#f1f4ef}
.img-editor-tools>button.is-on{background:var(--mint);border-color:color-mix(in srgb,var(--green) 30%,#fff);color:var(--green)}
.img-editor-options{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;display:grid;gap:10px}
.img-editor-options .fx-row{grid-template-columns:1fr 46px}
.img-editor-options .fx-row span{grid-column:1/3}
.img-editor-options .fx-row input[type=color]{grid-column:1}
.img-editor-stage{min-width:0;min-height:0;display:grid;place-items:center;padding:24px;overflow:auto}
.img-editor-canvas{position:relative;display:inline-block;line-height:0;background:repeating-conic-gradient(#e6e6e6 0 25%,#fff 0 50%) 0 0/18px 18px;box-shadow:0 10px 30px #0002}
.img-editor-canvas canvas{display:block;max-width:calc(100vw - 340px);max-height:calc(100vh - 140px);cursor:crosshair;touch-action:none}
.crop-box{position:absolute;outline:2px solid #fff;box-shadow:0 0 0 9999px #0007;cursor:move;touch-action:none}
.crop-box span{position:absolute;width:14px;height:14px;background:#fff;border:2px solid var(--green);border-radius:3px}
.crop-box [data-h=nw]{left:-8px;top:-8px;cursor:nwse-resize}
.crop-box [data-h=ne]{right:-8px;top:-8px;cursor:nesw-resize}
.crop-box [data-h=sw]{left:-8px;bottom:-8px;cursor:nesw-resize}
.crop-box [data-h=se]{right:-8px;bottom:-8px;cursor:nwse-resize}

/* ── Kotobee-style elements: author views ── */
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.quick-grid button{border:1px solid #e8ebe5;background:#fff;border-radius:8px;padding:8px 4px;display:grid;justify-items:center;gap:4px;font:600 9px var(--ui);color:#56635a;cursor:pointer}
.quick-grid button span{font-size:16px;color:var(--green)}
.quick-grid button:hover{border-color:color-mix(in srgb,var(--green) 35%,#fff);background:#f6f9f5}
.icon-widgets{background:#e9f0fb;color:#4a6fa5}
#paper .gal-edit{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
#paper .gal-thumb{position:relative;margin:0;border:1px solid #e8ece7;border-radius:8px;padding:4px;background:#fff}
#paper .gal-thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:5px;display:block}
#paper .gal-add{display:grid;place-items:center;min-height:90px;border:1px dashed #bdc9bd;border-radius:8px;color:var(--green);font:600 10px var(--ui);cursor:pointer}
#paper .tbl td,#paper .tbl th{min-width:4em}
#paper .tbl-tools{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin-top:6px}
#paper .tbl-tools .add-row{border-top:0;margin:0;padding:0}
#paper .popup-edit,#paper .button-edit{display:grid;gap:6px;border:1px dashed #cfd8d0;border-radius:8px;padding:10px}
#paper .popup-title{font-weight:700}
#paper .popup-img{max-width:100%;max-height:160px;object-fit:contain;border-radius:6px}
#paper .link-btn.is-preview{justify-self:start;pointer-events:none}
#paper .embed-code{width:100%;min-height:110px;font:11px/1.5 ui-monospace,Menlo,monospace;border:1px solid #dfe5de;border-radius:6px;padding:8px}
#paper .embed-url{width:100%;height:30px;border:1px solid #dfe5de;border-radius:6px;padding:0 8px;font:11px var(--ui);margin-bottom:8px}
@media(max-width:900px){.img-editor-body{grid-template-columns:1fr}.img-editor-canvas canvas{max-width:calc(100vw - 48px);max-height:60vh}}

/* undo / redo */
body.is-readonly #undo-btn,body.is-readonly #redo-btn{display:none}

/* ── Symbol themes in the panel ── */
.sym-theme{width:100%;height:34px;margin:8px 0;border:1px solid #e3e8e1;border-radius:8px;background:#fff;padding:0 9px;font:600 12px var(--ui);color:#38463c}
.sym-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.sym-choice{aspect-ratio:1;border:1px solid #e8ebe5;background:#fff;border-radius:8px;padding:6px;cursor:pointer;display:grid;place-items:center}
.sym-choice:hover{border-color:color-mix(in srgb,var(--green) 35%,#fff);background:#f6f9f5}
.sym-choice img{max-width:100%;max-height:100%;object-fit:contain}
.sym-manage{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:8px}
.sym-manage label{cursor:pointer}
body.role-author #sym-manage,body.is-readonly #sym-manage{display:none!important}

/* a picture shows its helper fields (labels, description, empty caption) only when selected */
#paper .block-image:not(.selected-block) :is(.image-tools,.alt-text,.caption:empty){display:none}
#paper.is-measuring :is(.image-tools,.alt-text,.author-note,.add-row,.tbl-tools,.char-tools,.media-row-tools,.caption:empty){display:none!important}
/* a small free picture (a symbol) gets readable helper fields when selected */
/* small free pictures (symbols): compact helpers that never cover the block's own buttons (move, delete) */
#paper .block-image.is-free.selected-block :is(.image-tools,.alt-text,.caption){position:relative;z-index:6;width:max(100%,170px);background:#fffefa;border-radius:6px}
#paper .block-image.is-free.selected-block .image-tools{padding:2px 4px;box-shadow:0 3px 10px #1c2a2114;margin-top:4px}
#paper .block-image.is-free.selected-block .image-tools>span{display:none}
#paper .block-image.is-free.selected-block .image-tools .add-row{font-size:10px;padding:2px 0}
#paper .block-image.is-free.selected-block .alt-text{font-size:9px;padding:3px 6px;margin-top:3px}

/* symbol thumbnails: small, square, and never larger than their tile */
.sym-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.sym-choice{position:relative;display:block;min-width:0;aspect-ratio:1;padding:0;overflow:hidden;border-radius:6px}
.sym-choice img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);max-width:none;max-height:none;object-fit:contain;display:block}

/* speech bubble: move grip and resize corner, shown on the selected character */
#paper .bubble-grip,#paper .bubble-size{display:none}
#paper .selected-block .bubble-grip{display:grid;place-items:center;position:absolute;left:-.7em;top:-.7em;width:1.4em;height:1.4em;border-radius:50%;background:var(--green);color:#fff;font-size:max(.75em,9px);cursor:move;touch-action:none;z-index:3;box-shadow:0 1px 4px #0003}
#paper .selected-block .bubble-size{display:block;position:absolute;right:-.45em;bottom:-.45em;width:.9em;height:.9em;min-width:9px;min-height:9px;background:#fff;border:2px solid var(--green);border-radius:2px;cursor:nwse-resize;touch-action:none;z-index:3}
.char-tools-row{display:flex;align-items:center;gap:6px;font:600 10px var(--ui);color:#56635a}
.char-tools-row input[type=range]{width:110px;accent-color:var(--green)}
.char-tools-row output{min-width:34px;font-weight:500;color:#7d857e}
#paper .char-tools.is-above{top:auto;bottom:100%;margin:0 0 8px}

/* find on the picture: zones of any size, one colour per thing to find */
#paper .hotspot-editor.is-zone{min-width:0;min-height:0;padding:0;overflow:visible;resize:none;border:2px solid var(--zc);border-radius:3px;background:color-mix(in srgb,var(--zc) 20%,transparent);box-shadow:0 0 0 1px #fff8}
#paper .hotspot-editor.is-zone .hotspot-grip{position:absolute;left:-2px;bottom:100%;margin:0 0 2px;padding:1px 5px;border-radius:4px;background:var(--zc);color:#fff;font:700 9px var(--ui);white-space:nowrap;box-shadow:0 1px 3px #0003}
#paper .hotspot-editor.is-zone>button{right:auto;left:100%;top:-3px;margin-left:3px;width:16px;height:16px;font-size:11px;line-height:16px;box-shadow:0 1px 3px #0003}
.zone-size{position:absolute;right:-6px;bottom:-6px;width:10px;height:10px;background:#fff;border:2px solid var(--zc);border-radius:2px;cursor:nwse-resize;touch-action:none}
.find-items-edit{display:grid;gap:5px;margin-top:8px}
.find-item-edit{display:flex;align-items:center;gap:7px}
.find-item-edit .find-name{flex:1;min-width:0}
.find-badge{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--zc);color:#fff;font:700 10px var(--ui)}
.find-count{font:500 10px var(--ui);color:#7d857e;white-space:nowrap}
.find-add-zone{border:1px solid var(--zc);border-radius:6px;background:#fff;color:#33463a;font:600 10px var(--ui);padding:4px 8px;cursor:pointer;white-space:nowrap}
.find-add-zone:disabled{opacity:.5;cursor:default}
#paper.is-measuring .find-items-edit{display:none!important}

/* chapters: the add menu and the chapter rows in the page list */
.add-page-wrap{position:relative}
.add-page-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:250px;background:#fffefa;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px #1c2a2128;padding:5px}
.add-page-menu button{display:block;width:100%;text-align:left;border:0;background:none;border-radius:7px;padding:8px 10px;cursor:pointer;color:inherit}
.add-page-menu button:hover{background:var(--mint)}
.add-page-menu strong{display:block;font:600 12px var(--ui)}
.add-page-menu small{display:block;font:400 10px var(--ui);color:#728077;margin-top:2px}
.chapter-row{display:flex;align-items:center;gap:6px;margin:8px 0 -2px;padding:5px 6px 5px 4px;border-bottom:1.5px solid var(--green);font:700 11px var(--ui);color:#2c4637}
.chapter-row:first-child{margin-top:0}
.chapter-num{display:grid;place-items:center;flex:none;width:19px;height:19px;border-radius:5px;background:var(--green);color:#fff;font-size:10px}
.chapter-title{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chapter-row button{border:0;background:none;color:#7b877e;cursor:pointer;font-size:12px;padding:0 3px;border-radius:4px}
.chapter-row button:hover{background:#eef2ec;color:#2c4637}
.page-card-wrap.in-chapter{padding-left:8px;border-left:2px solid color-mix(in srgb,var(--green) 22%,transparent)}

/* small screens: toolbars wrap instead of pushing the page wider than the screen */
@media(max-width:800px){
  .canvas-toolbar{flex-wrap:wrap;height:auto;row-gap:6px;padding-top:6px;padding-bottom:6px}
  .canvas-controls{flex-wrap:wrap}
  .rail-heading{padding-bottom:10px}
}
@media(max-width:480px){
  .topbar{gap:8px;padding:10px 12px}
  .document-name{padding-left:0;border-left:0}
  .document-name input{width:100%;max-width:60vw}
  .top-actions .button{height:32px}
  .insert-panel{padding:16px 12px}
}

/* pictures in exercise rows: a small slot next to the text */
#paper .pic-slot{position:relative;flex:none;display:grid;place-items:center;width:36px;height:36px;border:1px dashed #b7c4b9;border-radius:7px;background:#f7f8f4;color:#7b877e;font-size:15px;cursor:pointer}
#paper .pic-slot:hover{border-color:var(--green);background:var(--mint)}
#paper .pic-slot input{display:none}
#paper .pic-slot.has-pic{border-style:solid;background:#fff;cursor:default;overflow:visible}
#paper .pic-slot.has-pic img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);max-width:none;object-fit:contain;border-radius:5px}
#paper .pic-slot .pic-replace,#paper .pic-slot .pic-clear{position:absolute;display:none;place-items:center;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;font-size:10px;line-height:1;cursor:pointer;border:0;padding:0}
#paper .pic-slot .pic-replace{left:-5px;bottom:-5px;color:#3d5a47}
#paper .pic-slot .pic-clear{right:-5px;top:-5px;color:var(--danger)}
#paper .pic-slot.has-pic:hover .pic-replace,#paper .pic-slot.has-pic:hover .pic-clear,#paper .pic-slot.has-pic:focus-within .pic-replace,#paper .pic-slot.has-pic:focus-within .pic-clear{display:grid}
@media(hover:none){#paper .pic-slot .pic-replace,#paper .pic-slot .pic-clear{display:grid}}