/* §347 The PDF editor (assets/pdf-editor.js): the file's pages in the middle, the page list at the left, what is chosen,
   the pages and the changes at the right. It takes the content area, as the book editor does. */
.main-content.pdfe-open > :not(.topbar):not(#pdf-editor) { display: none !important; }
.pdfe { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h, 64px)); min-height: 520px; background: var(--canvas); color: var(--ink); }
.pdfe:fullscreen { height: 100vh; }
.pdfe-loading { margin: auto; padding: 40px; text-align: center; color: var(--muted); display: grid; gap: 14px; justify-items: center; }

.pdfe-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.pdfe-title { display: grid; min-width: 0; flex: 1 1 200px; }
.pdfe-title b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdfe-title small { color: var(--muted); font-size: 12.5px; }
.pdfe-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pdfe-toolset { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--canvas); }
.pdfe-tool { border: 0; background: transparent; font: inherit; font-size: 14px; width: 34px; height: 30px; border-radius: 999px; cursor: pointer; color: var(--ink); }
.pdfe-tool.is-on { background: var(--navy); color: #fff; }
.pdfe-tool:focus-visible { outline: 2px solid var(--brand-blue-bright); outline-offset: 1px; }
.pdfe-changes { font-size: 12.5px; color: var(--brand-orange); font-weight: 600; }
.pdfe-zoom { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 6px; }
.pdfe-zoom span { min-width: 44px; text-align: center; font-size: 12.5px; }
.pdfe-progress { position: relative; height: 26px; background: var(--peach-soft); border-bottom: 1px solid var(--line); overflow: hidden; }
.pdfe-progress span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--peach); transition: width .8s ease; }
.pdfe-progress b { position: relative; display: block; padding: 4px 16px; font-size: 12.5px; }

.pdfe-body { flex: 1; display: grid; grid-template-columns: 116px minmax(0, 1fr) minmax(280px, 340px); min-height: 0; }
.pdfe-thumbs { overflow-y: auto; padding: 10px 8px; border-right: 1px solid var(--line); background: var(--card); display: grid; align-content: start; gap: 10px; }
.pdfe-thumb { display: grid; justify-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 4px; cursor: pointer; font: inherit; font-size: 11.5px; color: var(--muted); overflow: hidden; }
.pdfe-thumb canvas { width: 88px; height: 124px; background: #fff; }
.pdfe-thumb.is-blank canvas { background: repeating-linear-gradient(45deg, #fff, #fff 6px, var(--canvas) 6px, var(--canvas) 12px); }
.pdfe-pages { overflow: auto; padding: 24px; display: grid; justify-content: center; align-content: start; gap: 24px; outline: none; }
.pdfe-pages[data-tool]:not([data-tool="select"]) .pdfe-page { cursor: crosshair; }
.pdfe-pages[data-tool]:not([data-tool="select"]) .pdfe-block, .pdfe-pages[data-tool]:not([data-tool="select"]) .pdfe-image { pointer-events: none; }
.pdfe-page { position: relative; background: #fff; box-shadow: var(--shadow-sm); border-radius: 2px; overflow: visible; }
.pdfe-page canvas { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(var(--pdfe-rot, 0deg)); transform-origin: center; }
.pdfe-page.is-blank { display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.pdfe-pno { position: absolute; right: -34px; bottom: 6px; font-size: 12px; color: var(--muted); }
.pdfe-block { position: absolute; border: 1.5px solid transparent; border-radius: 3px; cursor: text; }
.pdfe-block.is-selected, .pdfe-block.is-editing { border-color: var(--brand-orange); }
.pdfe-block.is-pending { background: rgba(217, 122, 48, .08); }
.pdfe-image { position: absolute; border: 1.5px solid transparent; cursor: move; }
.pdfe-image.is-selected { border-color: var(--brand-blue-bright); }
/* §401: what is moved carries the pixels of its own place; the place it left is covered with the page's ground */
.pdfe-shot { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pdfe-preview.pdfe-left { z-index: 1; outline: 1px dashed var(--line); }
.pdfe-image.is-pending, .pdfe-block.is-moved { z-index: 3; }
.pdfe-grip { position: absolute; left: -22px; top: -2px; width: 22px; height: 22px; display: none; align-items: center; justify-content: center; border-radius: 5px; background: var(--brand-blue); color: #fff; font-size: 13px; font-style: normal; line-height: 1; cursor: move; touch-action: none; user-select: none; }
.pdfe-block.is-selected .pdfe-grip, .pdfe-block.is-editing .pdfe-grip, .pdfe-block.is-pending .pdfe-grip { display: flex; }
@media (hover: hover) { .pdfe-block:hover .pdfe-grip { display: flex; } }
.pdfe-area { position: absolute; z-index: 4; box-sizing: border-box; border: 1.5px dashed var(--brand-orange); background: rgba(217, 122, 48, .06); cursor: move; touch-action: none; outline: none; }
.pdfe-area-tag { position: absolute; left: 0; top: -24px; padding: 2px 8px; border-radius: 999px; background: var(--brand-orange); color: #fff; font-size: 11.5px; white-space: nowrap; pointer-events: none; }
.pdfe-preview.is-area { outline: 1px dashed var(--brand-orange); }
.pdfe-ghost.is-area { border: 1.5px dashed var(--brand-orange); background: rgba(217, 122, 48, .06); }
.pdfe-image.is-pending { border-color: var(--brand-orange); box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(217, 122, 48, .35); }
.pdfe-image.is-replaced::after { content: "new picture"; position: absolute; left: 6px; top: 6px; padding: 2px 8px; border-radius: 999px; background: var(--brand-orange); color: #fff; font-size: 11.5px; }
.pdfe-image.is-gone { background: repeating-linear-gradient(45deg, rgba(255,255,255,.9), rgba(255,255,255,.9) 8px, rgba(200,40,40,.15) 8px, rgba(200,40,40,.15) 16px); border-color: #c33; }
.pdfe-h { position: absolute; width: 10px; height: 10px; background: #fff; border: 1.5px solid var(--brand-blue-bright); border-radius: 2px; display: none; }
.pdfe-image.is-selected .pdfe-h { display: block; }
.pdfe-h[data-h="nw"] { left: -6px; top: -6px; cursor: nwse-resize; } .pdfe-h[data-h="se"] { right: -6px; bottom: -6px; cursor: nwse-resize; }
.pdfe-h[data-h="ne"] { right: -6px; top: -6px; cursor: nesw-resize; } .pdfe-h[data-h="sw"] { left: -6px; bottom: -6px; cursor: nesw-resize; }
@media (hover: hover) { .pdfe-block:hover { border-color: var(--brand-blue-bright); } .pdfe-image:hover { border-color: var(--brand-blue-bright); } .pdfe-thumb:hover { border-color: var(--brand-blue-bright); } }

/* the box typed in, over the page, in the book's own face */
.pdfe-edit { position: absolute; z-index: 3; background: #fff; outline: 2px solid var(--brand-orange); outline-offset: 1px; padding: 0 2px; white-space: pre-wrap; overflow-wrap: break-word; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.pdfe-edit:focus { outline-color: var(--brand-orange); }
.pdfe-edit.is-new { background: rgba(255,255,255,.92); }
/* §378: a box over a dark ground (the cover): the page's own colour behind the text, a brighter outline */
.pdfe-edit.is-dark { outline-color: var(--brand-orange-bright); box-shadow: 0 2px 10px rgba(0,0,0,.45); }
/* §378: fingers: a picture or a handle under a finger is dragged, not scrolled; a drawing tool draws */
.pdfe-image, .pdfe-h { touch-action: none; }
.pdfe-pages[data-tool]:not([data-tool="select"]) .pdfe-page { touch-action: none; }
@media (pointer: coarse) {
  .pdfe-h { width: 18px; height: 18px; }
  .pdfe-h[data-h="nw"] { left: -10px; top: -10px; } .pdfe-h[data-h="se"] { right: -10px; bottom: -10px; }
  .pdfe-h[data-h="ne"] { right: -10px; top: -10px; } .pdfe-h[data-h="sw"] { left: -10px; bottom: -10px; }
}
/* §378: the colour row (the brand's colours, then the plain ones, then any colour) and the size/width pair */
.pdfe-swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pdfe-swatch { position: relative; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); background: var(--sw, #000); cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.pdfe-swatch.is-on { border-color: var(--brand-orange); box-shadow: inset 0 0 0 2px #fff; }
.pdfe-swatch:focus-visible, .pdfe-swatch-any:focus-within { outline: 2px solid var(--brand-blue-bright); outline-offset: 1px; }
.pdfe-swatch-any { background: conic-gradient(#f33, #fc3, #3c3, #3cf, #33f, #f3f, #f33); overflow: hidden; }
.pdfe-swatch-any::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--sw, #000); pointer-events: none; }
.pdfe-swatch-any input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pdfe-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* the changes waiting to be applied, drawn over the pages */
.pdfe-preview { position: absolute; z-index: 2; pointer-events: none; box-sizing: border-box; }
.pdfe-preview.is-text { background: #fff; white-space: pre-wrap; overflow-wrap: break-word; outline: 1px dashed var(--brand-orange); }
.pdfe-preview.is-cover { background: #fff; outline: 1px dashed #c33; }
.pdfe-preview.is-highlight { background: rgba(255, 235, 77, .45); }
.pdfe-preview.is-whiteout { background: #fff; outline: 1px dashed var(--line); }
.pdfe-preview.is-rect { border: 1px solid #0a3153; }
.pdfe-preview.is-line { height: 0; border-top: 1px solid #0a3153; transform-origin: 0 0; }
.pdfe-preview.is-picture { background: rgba(31, 92, 115, .1); border: 1px dashed var(--brand-blue-bright); display: grid; place-items: center; font-size: 12px; color: var(--muted); }
.pdfe-ghost { position: absolute; z-index: 4; pointer-events: none; border: 1px dashed var(--brand-blue-bright); background: rgba(31, 92, 115, .06); }
.pdfe-ghost.is-highlight { background: rgba(255, 235, 77, .45); border-color: transparent; }
.pdfe-ghost.is-whiteout { background: rgba(255,255,255,.85); }
.pdfe-ghost.is-line { border: 0; border-top: 1px solid var(--brand-blue-bright); height: 0 !important; }

.pdfe-side { border-left: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; min-height: 0; }
.pdfe-tabs { display: flex; gap: 4px; padding: 8px 8px 0; border-bottom: 1px solid var(--line); }
.pdfe-tabs button { flex: 1; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); padding: 9px 6px; border-bottom: 3px solid transparent; cursor: pointer; }
.pdfe-tabs button.is-on { color: var(--ink); border-bottom-color: var(--brand-orange); }
.pdfe-panel { overflow-y: auto; padding: 14px 16px 24px; min-height: 0; }
.pdfe-hint { color: var(--muted); font-size: 13.5px; display: grid; gap: 8px; }
.pdfe-hint p { margin: 0; }
.pdfe-part { display: grid; gap: 12px; }
.pdfe-part h3 { margin: 0; font-size: 16px; }
.pdfe-where { margin: 0; font-size: 12.5px; color: var(--muted); }
.pdfe-note { margin: 0; font-size: 12.5px; color: var(--muted); }
/* §383: the both-sides warning of a printed book (the book editor's warning, .bked-prop-warn) */
.pdfe-warn { margin: 0; padding: 6px 8px; border-left: 3px solid var(--brand-orange); background: rgba(217, 122, 48, .1); color: var(--ink); font-size: 12.5px; line-height: 1.45; }
.pdfe-group { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.pdfe-group > b { font-size: 13px; }
.pdfe-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; cursor: pointer; }
.pdfe-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.pdfe-seg label { cursor: pointer; }
.pdfe-seg input { position: absolute; opacity: 0; pointer-events: none; }
.pdfe-seg span { display: inline-block; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; }
.pdfe-seg input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.pdfe-seg input:focus-visible + span { outline: 2px solid var(--brand-blue-bright); outline-offset: 1px; }
.pdfe-part-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pdfe-list { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: 13px; }
.pdfe-list li { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }

.pdfe-bubble { position: fixed; z-index: 4000; width: min(380px, calc(100vw - 16px)); background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 10px; }
.pdfe-menu { display: grid; gap: 4px; max-height: 60vh; overflow-y: auto; }
.pdfe-version { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; font-size: 13px; }
.pdfe-version.is-on { background: var(--peach-soft); }
.pdfe-version-actions { display: inline-flex; gap: 10px; white-space: nowrap; }
.pdfe-version-actions a { text-decoration: none; }

@media (max-width: 900px) {
  .pdfe-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .pdfe-thumbs { display: none; }
  .pdfe-side { border-left: 0; border-top: 1px solid var(--line); max-height: 45vh; }
  .pdfe-pages { padding: 12px; }
  .pdfe-pno { right: 4px; }
}
@media (min-width: 901px) {
  body.as-is-open .main-content.pdfe-open { padding-right: min(440px, 100vw); }
  body.as-is-open .pdfe-body { grid-template-columns: 116px minmax(0, 1fr); }
  body.as-is-open .pdfe-side { display: none; }
}