/* PDF Editor */
@font-face { font-family: "PE Caveat"; src: url("fonts/Caveat-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "PE Dancing Script"; src: url("fonts/DancingScript-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "PE Sacramento"; src: url("fonts/Sacramento-Regular.ttf") format("truetype"); font-display: swap; }

/* The editor uses the full page width once a PDF is open. */
.tool-app.pe-wide { max-width: none; padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right)); padding-bottom: 1rem; }
@media (min-width: 900px) { .tool-app.pe-wide { padding-inline: 16px; } }
.pe-open-status { max-width: 520px; margin: 1.25rem auto 0; }

.pe-app {
  --pe-bar: var(--surface);
  display: flex; flex-direction: column;
  height: calc(100dvh - var(--header-h) - 20px); min-height: 440px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--pe-bar);
  box-shadow: var(--shadow-sm); overflow: hidden; position: relative;
  animation: rise .45s var(--ease) backwards;
}

/* ---------- top bar */
.pe-top, .pe-toolbar, .pe-props { flex: none; }
.pe-top { display: flex; align-items: center; gap: .35rem; padding: .45rem .6rem; border-bottom: 1px solid var(--border); min-height: 54px; }
.pe-top .btn-sm { min-height: 38px; }
.pe-top .btn-icon.btn-sm { width: 38px; }
.pe-file { display: flex; align-items: center; gap: .45rem; min-width: 0; flex: 1 1 auto; color: var(--text-soft); font-size: .9rem; font-weight: 600; padding-inline: .25rem; }
.pe-file .icon { flex: none; color: var(--primary); }
.pe-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.pe-pagenav { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--text-soft); flex: none; }
.pe-page-input { width: 3.3em; height: 38px; text-align: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; -moz-appearance: textfield; appearance: textfield; }
.pe-page-input::-webkit-inner-spin-button, .pe-page-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pe-page-of { white-space: nowrap; }
.pe-zoom, .pe-hist { display: flex; align-items: center; gap: .1rem; flex: none; }
.pe-zoom-label { min-width: 4.2rem; font-variant-numeric: tabular-nums; justify-content: center; }
.pe-actions { display: flex; align-items: center; gap: .35rem; flex: none; margin-left: .2rem; }
.pe-download { padding-inline: .9rem; }
.pe-divider { width: 1px; align-self: stretch; background: var(--border); margin: .3rem .15rem; }

/* ---------- tool bar */
.pe-toolbar.can-right, .pe-props.can-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.pe-toolbar.can-left, .pe-props.can-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.pe-toolbar.can-left.can-right, .pe-props.can-left.can-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.pe-toolbar { display: flex; gap: .2rem; padding: .35rem .5rem; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--border); scroll-snap-type: x proximity; }
.pe-tool {
  flex: none; position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  min-width: 70px; min-height: 56px; padding: .35rem .55rem; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; color: var(--text-soft); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; scroll-snap-align: start;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease-spring);
}
.pe-tool .icon { width: 22px; height: 22px; }
@media (hover: hover) { .pe-tool:hover { background: var(--surface-2); color: var(--text); } }
.pe-tool:active { transform: scale(.96); }
.pe-tool[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 28%, transparent); }
.pe-tool:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.pe-caret { position: absolute; top: 5px; right: 4px; width: 12px !important; height: 12px !important; opacity: .6; }

/* ---------- properties bar */
.pe-props { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; min-height: 52px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: thin; background: var(--bg-soft); }
.pe-props > * { flex: none; }
.pe-props:empty { display: none; }
.pe-hint { margin: 0 .25rem; font-size: .88rem; color: var(--text-soft); white-space: nowrap; }
.pe-obj-name { font-size: .82rem; font-weight: 700; color: var(--text-soft); text-transform: none; padding-right: .15rem; white-space: nowrap; }
.pe-grow { flex: 1 1 auto !important; min-width: .25rem; }
.pe-group { display: flex; gap: .15rem; }
.pe-field { display: flex; align-items: center; gap: .4rem; }
.pe-field-label { font-size: .82rem; color: var(--text-soft); white-space: nowrap; }
.pe-props .btn-sm, .pe-props .pe-select { min-height: 38px; }
.pe-tbtn { gap: .35rem; }
.pe-tbtn[aria-pressed="true"], .pe-tbtn[aria-checked="true"] { background: var(--primary-soft); color: var(--primary); }
.pe-tbtn:disabled { opacity: .45; }
@media (hover: hover) { .pe-danger:hover { color: var(--danger); background: var(--danger-soft); } }
.pe-select { width: auto; height: 38px; min-width: 7.8rem; padding-block: 0; font-size: .9rem; }
.pe-align, .pe-kinds { display: flex; }
.pe-kinds .btn { padding-inline: .6rem; }

.pe-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); height: 38px; overflow: hidden; }
.pe-step-btn { width: 34px; height: 100%; display: grid; place-items: center; border: 0; background: none; color: var(--text-soft); cursor: pointer; }
@media (hover: hover) { .pe-step-btn:hover { background: var(--surface-2); color: var(--text); } }
.pe-step-btn .icon { width: 16px; height: 16px; }
.pe-step-input { height: 100%; border: 0; border-inline: 1px solid var(--border); text-align: center; font: inherit; font-size: .9rem; font-weight: 600; background: none; color: var(--text); -moz-appearance: textfield; appearance: textfield; padding: 0; }
.pe-step-input::-webkit-inner-spin-button, .pe-step-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pe-step-unit { padding-inline: .4rem; font-size: .8rem; color: var(--text-faint); }

.pe-colour-btn { display: inline-flex; align-items: center; gap: .45rem; height: 38px; padding: 0 .7rem 0 .45rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
@media (hover: hover) { .pe-colour-btn:hover { border-color: var(--primary); } }
.pe-colour-dot { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18), 0 0 0 1px var(--border); flex: none; }
.pe-colour-dot.is-none, .pe-swatch-none { background: linear-gradient(135deg, transparent 45%, var(--danger) 45%, var(--danger) 55%, transparent 55%), var(--surface) !important; }

/* ---------- popovers & menus */
.pe-pop { position: fixed; z-index: 200; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .6rem; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; animation: pop .16s var(--ease) backwards; }
.pe-pop-menu { padding: .3rem; min-width: 200px; }
.pe-menu { display: flex; flex-direction: column; gap: .1rem; }
.pe-menu-item { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 44px; padding: .45rem .75rem; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; font-size: .92rem; font-weight: 500; text-align: left; cursor: pointer; }
.pe-menu-item:focus-visible { background: var(--surface-2); outline: none; }
@media (hover: hover) { .pe-menu-item:hover { background: var(--surface-2); } }
.pe-menu-item[aria-checked="true"] { color: var(--primary); font-weight: 700; background: var(--primary-softer); }
.pe-menu-item .icon { color: var(--text-soft); }
.pe-menu-item[aria-checked="true"] .icon { color: var(--primary); }
.pe-colours { display: flex; flex-direction: column; gap: .6rem; width: min(272px, calc(100vw - 42px)); }
.pe-swatches { gap: .45rem; }
.pe-swatches .swatch { width: 32px; height: 32px; }
.pe-swatches .swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }
.pe-custom-colour { display: flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 600; color: var(--text-soft); cursor: pointer; }
.pe-custom-colour input { width: 40px; height: 32px; padding: 0; border: 1px solid var(--border-strong); border-radius: 8px; background: none; cursor: pointer; }
.pe-more { width: min(290px, calc(100vw - 42px)); }
.pe-more .hint { margin: .2rem 0 0; }
.pe-order { flex-wrap: wrap; }

/* ---------- body: thumbnails + pages */
.pe-body { flex: 1 1 auto; display: flex; min-height: 0; position: relative; }
.pe-thumbs { display: none; flex: none; width: 164px; overflow-y: auto; padding: .75rem .6rem; border-right: 1px solid var(--border); background: var(--bg-soft); scrollbar-width: thin; }
.pe-app.thumbs-open .pe-thumbs { display: block; }
.pe-thumb { display: block; width: 100%; padding: .35rem; margin-bottom: .45rem; border: 2px solid transparent; border-radius: var(--radius-sm); background: none; cursor: pointer; color: var(--text-soft); font: inherit; }
@media (hover: hover) { .pe-thumb:hover { background: var(--surface-2); } }
.pe-thumb.is-current { border-color: var(--primary); background: var(--primary-softer); color: var(--primary); }
.pe-thumb-img { display: block; width: 100%; background: #fff; box-shadow: 0 0 0 1px var(--border), var(--shadow-sm); border-radius: 3px; overflow: hidden; }
.pe-thumb-img canvas { display: block; width: 100%; height: 100%; }
.pe-thumb-num { display: block; margin-top: .3rem; font-size: .78rem; font-weight: 700; text-align: center; }

/* Scrolling: one finger always pans the pages (pan-x pan-y; the editor does its own pinch zoom).
   Vertical overscroll chains to the page so the help below is always reachable; sideways it is
   contained so a zoomed-in page can't trigger the browser's back/forward swipe. Only the creation
   tools (Draw, Highlight, Shapes, Whiteout) take over one finger (.pe-manual-pan, two fingers scroll). */
.pe-viewer { flex: 1 1 auto; position: relative; overflow: auto; background: var(--surface-sunken); overscroll-behavior: contain auto; touch-action: pan-x pan-y; outline: none; -webkit-overflow-scrolling: touch; }
.pe-viewer.pe-manual-pan { touch-action: none; }
.pe-pages { --z: 1; width: max-content; min-width: 100%; padding: 20px; box-sizing: border-box; }
.pe-page {
  position: relative; margin: 0 auto 18px; isolation: isolate;
  width: calc(var(--pw) * var(--z) * 1px); height: calc(var(--ph) * var(--z) * 1px);
  background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / .12), 0 4px 16px rgb(15 23 42 / .08); border-radius: 2px;
}
.pe-page:last-child { margin-bottom: 0; }
.pe-page:not(.is-rendered)::before { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px; border-radius: 50%; border: 3px solid #e5e7eb; border-top-color: #6366f1; animation: pe-spin .8s linear infinite; }
.pe-page.is-failed::before { content: "This page couldn't be shown"; width: auto; height: auto; border: 0; margin: 0; transform: translate(-50%, -50%); animation: none; color: #6b7280; font-size: .9rem; white-space: nowrap; }
@keyframes pe-spin { to { transform: rotate(360deg); } }
.pe-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 2px; }
.pe-covers, .pe-objs, .pe-runs, .pe-ui { position: absolute; inset: 0; pointer-events: none; }

/* objects (positions are page points × zoom) */
.pe-obj, .pe-cover, .pe-run, .pe-selbox {
  position: absolute; left: calc(var(--x) * var(--z) * 1px); top: calc(var(--y) * var(--z) * 1px);
  width: calc(var(--w) * var(--z) * 1px); height: calc(var(--h) * var(--z) * 1px);
}
.pe-obj { pointer-events: auto; touch-action: pan-x pan-y; -webkit-user-select: none; user-select: none; outline: none; -webkit-touch-callout: none; }
/* A finger on something you added scrolls until it is selected (tap); the selected one can be dragged. */
.pe-obj.is-selected { touch-action: none; }
.pe-obj:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pe-app[data-tool="select"] .pe-obj, .pe-app[data-tool="edittext"] .pe-obj, .pe-app[data-tool="stamp"] .pe-obj, .pe-app[data-tool="note"] .pe-obj { cursor: move; }
.pe-app[data-tool="addtext"] .pe-text { cursor: text; }
.pe-obj:not(.is-selected):hover { outline: 1px dashed color-mix(in srgb, var(--primary) 70%, transparent); outline-offset: 1px; }
@media (hover: none) { .pe-obj:not(.is-selected):hover { outline: 0; } }
.pe-app[data-tool="draw"] .pe-obj:hover, .pe-app[data-tool="highlight"] .pe-obj:hover, .pe-app[data-tool="shape"] .pe-obj:hover, .pe-app[data-tool="whiteout"] .pe-obj:hover { outline: 0; }
.pe-text { width: auto; height: auto; padding: calc(2px * var(--z)); white-space: pre; }
.pe-text-body, .pe-textarea { font-size: calc(var(--fs) * var(--z) * 1px); line-height: 1.2; white-space: pre; }
.pe-text-body { min-width: .3em; min-height: 1.2em; }
.pe-text.is-editing { outline: 1.5px dashed var(--primary); outline-offset: 1px; cursor: text; }
.pe-text.is-editing .pe-text-body { visibility: hidden; min-width: 3em; }
.pe-textarea {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: calc(2px * var(--z)); border: 0; outline: 0; resize: none; overflow: hidden;
  background: transparent; caret-color: currentColor; box-sizing: border-box; -webkit-user-select: text; user-select: text; touch-action: auto;
}
.pe-textarea::placeholder { color: #9ca3af; opacity: 1; }
/* Touch screens: iOS zooms the whole page when a field under 16px gets focus. Type at 16px or more
   and scale the box back down (--k) so it still lines up exactly with the text on the page. */
@media (pointer: coarse) {
  .pe-textarea {
    --k: max(1, 16 / (var(--fs) * var(--z)));
    font-size: calc(var(--fs) * var(--z) * var(--k) * 1px); padding: calc(2px * var(--z) * var(--k));
    width: calc(100% * var(--k)); height: calc(100% * var(--k)); transform: scale(calc(1 / var(--k))); transform-origin: 0 0;
  }
}
.pe-svg { position: absolute; left: calc(var(--m) * var(--z) * -1px); top: calc(var(--m) * var(--z) * -1px); width: calc(100% + var(--m) * var(--z) * 2px); height: calc(100% + var(--m) * var(--z) * 2px); overflow: visible; pointer-events: none; }
.pe-line, .pe-arrow { pointer-events: none; }
.pe-line .pe-hit, .pe-arrow .pe-hit { pointer-events: stroke; stroke: transparent; }
.pe-image img { display: block; width: 100%; height: 100%; pointer-events: none; }
.pe-highlight { mix-blend-mode: multiply; }
.pe-cover { pointer-events: none; }

/* existing text outlines (Edit text tool) */
.pe-run { pointer-events: none; border-radius: 3px; display: none; }
.pe-show-runs .pe-run { display: block; pointer-events: auto; cursor: text; }
@media (hover: hover) { .pe-show-runs .pe-run:hover { outline: 2px solid var(--primary); background: color-mix(in srgb, #6366f1 12%, transparent); } }
@media (hover: none) { .pe-show-runs .pe-run { outline: 1px dashed color-mix(in srgb, #6366f1 65%, transparent); } }
.pe-show-runs .pe-run.is-edited { display: none; }

/* selection */
.pe-sel { position: absolute; inset: 0; pointer-events: none; }
.pe-selbox { margin: -2px 0 0 -2px; padding: 2px; box-sizing: content-box; border: 1.5px solid var(--primary); border-radius: 2px; pointer-events: none; }
.pe-handle {
  --o: 5px;
  position: absolute; left: calc(var(--x) * var(--z) * 1px); top: calc(var(--y) * var(--z) * 1px);
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; border: 2px solid var(--primary);
  box-shadow: 0 1px 3px rgb(0 0 0 / .25); pointer-events: auto; touch-action: none; z-index: 2;
}
.pe-handle::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
@media (pointer: coarse) {
  .pe-handle { --o: 9px; width: 18px; height: 18px; margin: -9px 0 0 -9px; }
  .pe-handle::after { inset: -13px; }
}
/* Handles sit just outside the corners so small objects can still be grabbed in the middle. */
.pe-handle-nw { transform: translate(calc(var(--o) * -1), calc(var(--o) * -1)); }
.pe-handle-ne { transform: translate(var(--o), calc(var(--o) * -1)); }
.pe-handle-sw { transform: translate(calc(var(--o) * -1), var(--o)); }
.pe-handle-se { transform: translate(var(--o), var(--o)); }
.pe-handle-n { transform: translateY(calc(var(--o) * -1)); }
.pe-handle-s { transform: translateY(var(--o)); }
.pe-handle-e { transform: translateX(var(--o)); }
.pe-handle-w { transform: translateX(calc(var(--o) * -1)); }
.pe-handle-p1, .pe-handle-p2 { transform: none; }
.pe-handle-nw, .pe-handle-se { cursor: nwse-resize; }
.pe-handle-ne, .pe-handle-sw { cursor: nesw-resize; }
.pe-handle-n, .pe-handle-s { cursor: ns-resize; }
.pe-handle-e, .pe-handle-w { cursor: ew-resize; }
.pe-handle-p1, .pe-handle-p2 { cursor: move; }
.pe-quick {
  position: absolute; left: calc(var(--x) * var(--z) * 1px); top: calc(var(--y) * var(--z) * 1px - 58px); transform: translateX(-50%);
  display: flex; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
  pointer-events: auto; z-index: 3; animation: pe-quick-in .18s var(--ease) both;
}
.pe-quick.is-below { top: calc(var(--y2) * var(--z) * 1px + 16px); }
@keyframes pe-quick-in { from { opacity: 0; transform: translate(-50%, 4px); } to { opacity: 1; transform: translate(-50%, 0); } }
.pe-quick-btn { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 9px; background: none; color: var(--text-soft); cursor: pointer; }
@media (hover: hover) {
  .pe-quick-btn:hover { background: var(--surface-2); color: var(--text); }
  .pe-quick-btn[data-action="delete"]:hover { background: var(--danger-soft); color: var(--danger); }
}
@media (pointer: coarse) {
  .pe-quick { top: calc(var(--y) * var(--z) * 1px - 64px); }
  .pe-quick-btn { width: 44px; height: 44px; }
}
.pe-live { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }

/* cursors per tool */
.pe-app[data-tool="addtext"] .pe-page { cursor: text; }
.pe-app[data-tool="draw"] .pe-page, .pe-app[data-tool="shape"] .pe-page, .pe-app[data-tool="whiteout"] .pe-page, .pe-app[data-tool="stamp"] .pe-page, .pe-app[data-tool="note"] .pe-page { cursor: crosshair; }
.pe-app[data-tool="highlight"] .pe-page { cursor: text; }
body.pe-dragging, body.pe-dragging * { -webkit-user-select: none; user-select: none; cursor: grabbing !important; }

.pe-foot { margin: .5rem .25rem 0; text-align: right; }

/* page indicator on phones (the top bar has no room for page numbers there) */
.pe-pagefloat { display: none; position: absolute; left: 10px; bottom: 10px; z-index: 4; min-height: 36px; padding: 0 .8rem; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--text); font: inherit; font-size: .85rem; font-weight: 600; box-shadow: var(--shadow); cursor: pointer; }

/* ---------- signature dialog */
@media (min-width: 641px) { .pe-sig-dialog { width: min(640px, calc(100vw - 24px)) !important; } } /* phones: the full-width bottom sheet */
/* The three ways to sign share the width evenly, so "Upload" is never cut off on a small phone. */
.pe-sig-dialog .tabs .tab { flex: 1 1 0; justify-content: center; min-width: 0; padding-inline: .4rem; }
.pe-sig-sub { margin: 0; font-size: .88rem; font-weight: 600; color: var(--text-soft); }
.pe-sig-saved { display: flex; flex-wrap: wrap; gap: .75rem; }
.pe-sig-saved-item { position: relative; }
.pe-sig-use { display: grid; place-items: center; width: 150px; height: 64px; padding: .35rem .5rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: #fff; cursor: pointer; overflow: hidden; }
@media (hover: hover) { .pe-sig-use:hover { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } }
.pe-sig-use svg, .pe-sig-use img { max-width: 100%; max-height: 100%; }
.pe-sig-text { font-size: 26px; white-space: nowrap; }
.pe-sig-del { position: absolute; top: -9px; right: -9px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); cursor: pointer; box-shadow: var(--shadow-sm); }
.pe-sig-del:hover { color: var(--danger); }
.pe-sig-del .icon { width: 14px; height: 14px; }
.pe-sig-panel { padding-top: .9rem; display: flex; flex-direction: column; gap: .75rem; }
.pe-sigpad { position: relative; height: 200px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: #fff; touch-action: none; overflow: hidden; }
.pe-sigpad-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.pe-sigpad-line { position: absolute; left: 8%; right: 8%; bottom: 26%; border-top: 1.5px solid #cbd5e1; padding-top: 4px; font-size: .75rem; color: #64748b; pointer-events: none; }
.pe-sig-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.pe-sig-style { height: 76px; display: grid; place-items: center; padding: 0 .5rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: #fff; cursor: pointer; overflow: hidden; }
.pe-sig-style span { font-size: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pe-sig-style[aria-checked="true"] { border: 2px solid var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.pe-sig-upload-preview { min-height: 120px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem; background: repeating-conic-gradient(#f3f4f6 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.pe-sig-upload-preview img { max-width: 100%; max-height: 160px; }
.pe-sig-upload-preview p { background: #fff; padding: .4rem .6rem; border-radius: 6px; color: #4b5563; margin: 0; }

.pe-keys { width: 100%; border-collapse: collapse; font-size: .92rem; }
.pe-keys th { text-align: left; padding: .4rem .75rem .4rem 0; white-space: nowrap; font-weight: 500; vertical-align: top; }
.pe-keys td { padding: .4rem 0; color: var(--text-soft); }
.pe-keys kbd { font-family: var(--font-mono); font-size: .82rem; padding: .15rem .4rem; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--surface-2); }

/* ---------- responsive */
@media (max-width: 899px) {
  .pe-app.thumbs-open .pe-thumbs { position: absolute; left: 0; top: 0; bottom: 0; z-index: 6; width: 150px; box-shadow: var(--shadow-lg); animation: pe-slide .2s var(--ease) both; }
  @keyframes pe-slide { from { transform: translateX(-100%); } to { transform: none; } }
  .pe-print-btn { display: none; }
  .pe-file { display: none; } /* no room for a useful name here; it's on the downloaded file anyway */
}
/* Touch screens (phones, tablets): 44px targets in the editor's bars. */
@media (pointer: coarse) {
  .pe-top .btn-sm, .pe-props .btn-sm, .pe-findbar .btn-sm { min-height: 44px; }
  .pe-top .btn-icon.btn-sm, .pe-props .btn-icon.btn-sm, .pe-findbar .btn-icon.btn-sm { width: 44px; }
  .pe-props .pe-select, .pe-stepper, .pe-colour-btn, .pe-page-input, .pe-find-input { height: 44px; min-height: 44px; }
  .pe-step-btn { width: 44px; }
  .pe-pagefloat { min-height: 44px; }
  .pe-tip .btn-icon.btn-sm { width: 44px; min-height: 44px; flex: none; }
  .pe-menu-item { min-height: 48px; }
  .pe-swatches .swatch { width: 36px; height: 36px; }
}
@media (max-width: 700px) {
  .pe-file { display: none; }
  .pe-zoom .btn-icon { display: none; }
  .pe-pages { padding: 10px; }
  .pe-page { margin-bottom: 10px; }
  .pe-props:has(> :not(.pe-hint)) .pe-hint { display: none; } /* no room for the hint beside controls */
  .pe-tbtn-label { display: none; }
  .pe-colour-label { display: none; }
  .pe-colour-btn { padding: 0 .45rem; }
  .pe-foot { display: none; }
  .pe-sig-styles { grid-template-columns: 1fr; }
  .pe-sig-style { height: 60px; }
  /* No iOS zoom-on-focus: text fields are at least 16px on phones. */
  .pe-page-input, .pe-step-input, .pe-select, .pe-find-input { font-size: 16px; }
  .pe-download-pdf { display: none; }

  /* Phone: the open editor is an app screen that exactly fills the window under the site header —
     actions on top, pages scroll in the middle, settings + tools at the bottom within thumb reach.
     The page itself never has to scroll while editing (the viewer chains to it at its ends).
     --pe-hdr is the measured height of the sticky site header (set by tool.js). */
  .tool-app.pe-wide { padding-inline: 0; padding-bottom: 1.5rem; }
  .pe-app {
    height: calc(100vh - var(--pe-hdr, var(--header-h))); height: calc(100dvh - var(--pe-hdr, var(--header-h)));
    min-height: 260px; border-radius: 0; border-inline: 0; box-shadow: none;
  }
  .pe-top { order: 0; gap: .25rem; padding: .25rem max(.4rem, env(safe-area-inset-right)) .25rem max(.4rem, env(safe-area-inset-left)); min-height: 52px; }
  .pe-findbar { order: 1; }
  .pe-tip { order: 2; }
  .pe-body { order: 3; }
  .pe-props { order: 4; border-bottom: 0; border-top: 1px solid var(--border); gap: .4rem; padding: .3rem .5rem; min-height: 56px; }
  .pe-toolbar {
    order: 5; border-bottom: 0; border-top: 1px solid var(--border); background: var(--surface);
    gap: .1rem; padding: .25rem max(.35rem, env(safe-area-inset-right)) calc(.25rem + env(safe-area-inset-bottom)) max(.35rem, env(safe-area-inset-left));
    scrollbar-width: none;
  }
  .pe-toolbar::-webkit-scrollbar { display: none; }
  .pe-tool { min-width: 64px; min-height: 54px; padding: .3rem .4rem; font-size: .72rem; gap: .15rem; }
  .pe-props .pe-hint { flex: 1 1 auto; min-width: 0; white-space: normal; font-size: .84rem; line-height: 1.3; margin: 0 .15rem; }
  .pe-actions { margin-left: auto; gap: .25rem; }
  .pe-pagefloat { left: 8px; bottom: 8px; padding: 0 .7rem; font-size: .8rem; color: var(--text-soft); box-shadow: var(--shadow-sm); }
  .pe-tip { padding: .15rem .15rem .15rem .75rem; font-size: .84rem; line-height: 1.3; }
  .pe-findbar { gap: .25rem; padding: .3rem .4rem; }
  .pe-find-count { min-width: 0; font-size: .78rem; }
  /* Messages appear above the bottom bars instead of covering the tools (--pe-lift set by tool.js). */
  :root.pe-open:not(.dialog-open) .toasts { bottom: calc(var(--pe-lift, 124px) + 12px); }
}
@media (max-width: 560px) {
  .pe-pagenav, .pe-zoom { display: none; }
  .pe-pagefloat { display: inline-flex; align-items: center; }
  .pe-app.is-single-page .pe-pagefloat { display: none; }
}
@media (max-width: 440px) {
  /* Page list and Find live in the ⋮ menu here; the page button (bottom left) jumps to a page. */
  .pe-thumbs-toggle, .pe-top [data-find-toggle] { display: none; }
  .pe-download { padding-inline: .75rem; }
}
@media (max-width: 359px) {
  .pe-download-label { display: none; }
  .pe-download { width: 44px; padding: 0; }
}
/* Short screens (landscape phones): slimmer bars so the pages keep most of the height. */
@media (max-height: 500px) {
  .pe-app { min-height: 0; height: calc(100vh - var(--pe-hdr, var(--header-h))); height: calc(100dvh - var(--pe-hdr, var(--header-h))); }
  .pe-top { min-height: 0; padding-block: .2rem; }
  .pe-tool { flex-direction: row; gap: .35rem; min-height: 44px; min-width: 0; padding: .25rem .6rem; }
  .pe-tool .icon { width: 20px; height: 20px; }
  .pe-caret { position: static; }
  .pe-toolbar { padding-block: .2rem; }
  .pe-props { min-height: 0; padding-block: .2rem; }
  .pe-props:has(> :not(.pe-hint)) .pe-hint { display: none; } /* no room for the hint beside controls */
  .pe-tip { padding-block: .1rem; }
  .pe-foot { display: none; }
}

/* ---------- start screen: blank/from-pictures + continue session */
.pe-start-extra { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 1rem auto 0; max-width: 520px; }
.pe-continue-session { max-width: 520px; margin: 1rem auto 0; display: flex; flex-direction: column; gap: .6rem; }
.pe-continue-session .notice p { margin: 0; }

/* ---------- find bar */
.pe-findbar { flex: none; display: flex; align-items: center; gap: .4rem; padding: .4rem .6rem; border-bottom: 1px solid var(--border); background: var(--bg-soft); }
.pe-findbar > .icon { color: var(--text-soft); flex: none; }
.pe-find-input { flex: 1 1 auto; min-width: 0; height: 38px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; padding: 0 .6rem; }
.pe-find-count { flex: none; font-size: .82rem; color: var(--text-soft); white-space: nowrap; min-width: 5.5em; text-align: right; }
.pe-find-layer { position: absolute; inset: 0; pointer-events: none; }
.pe-find-hit {
  position: absolute; left: calc(var(--x) * var(--z) * 1px); top: calc(var(--y) * var(--z) * 1px);
  width: calc(var(--w) * var(--z) * 1px); height: calc(var(--h) * var(--z) * 1px);
  background: rgb(253 224 71 / .55); border-radius: 3px;
}
.pe-find-hit.is-current { background: rgb(249 115 22 / .55); outline: 2px solid #f97316; }
@media (max-width: 520px) { .pe-find-count { min-width: 4em; font-size: .78rem; } }

/* ---------- first-time tip */
.pe-tip {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .7rem; font-size: .86rem; color: var(--primary); background: var(--primary-softer);
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); animation: fade .2s var(--ease) both;
}

/* ---------- sticky notes */
.pe-note-icon { display: block; width: 100%; height: 100%; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .25)); }
.pe-obj.pe-note.has-text .pe-note-icon { filter: drop-shadow(0 1px 3px rgb(0 0 0 / .35)); }
.pe-note-editor { width: min(260px, calc(100vw - 42px)); }
.pe-note-textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 4.5em; }

/* ---------- fillable form fields */
.pe-fields { position: absolute; inset: 0; pointer-events: none; display: none; }
.pe-show-fields .pe-fields { display: block; }
/* Named .pe-formfield (not .pe-field) — that class is already the generic props-bar field wrapper. */
.pe-formfield {
  position: absolute; left: calc(var(--x) * var(--z) * 1px); top: calc(var(--y) * var(--z) * 1px);
  width: calc(var(--w) * var(--z) * 1px); height: calc(var(--h) * var(--z) * 1px); pointer-events: auto;
  box-sizing: border-box; border-radius: 2px; background: #eef0ff;
}
.pe-field-text, .pe-field-select {
  width: 100%; height: 100%; box-sizing: border-box; border: 1.5px solid #6366f1; border-radius: 2px;
  background: #eef0ff; font: inherit; font-size: calc(11px * var(--z)); color: #1e1b4b; padding: 1px 3px;
}
textarea.pe-field-text { resize: none; font-family: inherit; }
@media (pointer: coarse) {
  /* Same no-zoom trick as .pe-textarea: 16px or more while typing, scaled back to the field's size. */
  .pe-field-text, .pe-field-select {
    --k: max(1, 16 / (11 * var(--z)));
    font-size: calc(11px * var(--z) * var(--k)); width: calc(100% * var(--k)); height: calc(100% * var(--k));
    padding: calc(1px * var(--k)) calc(3px * var(--k)); border-width: calc(1.5px * var(--k));
    transform: scale(calc(1 / var(--k))); transform-origin: 0 0;
  }
}
.pe-field-text:focus, .pe-field-select:focus { outline: 2px solid var(--focus); background: #e0e3ff; }
.pe-field-check, .pe-field-radio { width: 100%; height: 100%; margin: 0; accent-color: #6366f1; cursor: pointer; outline-offset: 2px; }

/* ---------- pages panel ---------- */
.pe-pgpanel { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.pe-pgtoolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pe-pgundo .btn-link { font-weight: 700; }
.pe-pgbulk { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem .7rem; border-radius: var(--radius-sm); background: var(--primary-softer); }
.pe-pggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; max-height: min(58vh, 560px); overflow-y: auto; padding: .25rem; }
.pe-pgcard { position: relative; display: flex; flex-direction: column; gap: .35rem; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .45rem; background: var(--surface); transition: box-shadow .15s var(--ease), opacity .15s var(--ease); }
.pe-pgcard.is-current { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.pe-pgcard.is-selected { background: var(--primary-softer); border-color: var(--primary); }
.pe-pgcard.is-dragging { opacity: .5; }
.pe-pgcard.is-busy { opacity: .55; pointer-events: none; }
.pe-pgcard-top { display: flex; align-items: center; justify-content: space-between; min-height: 24px; }
.pe-pgcard-num { font-size: .78rem; font-weight: 700; color: var(--text-soft); }
.pe-pgcard-check input { margin: 0; }
.pe-pgcard-grip { width: 26px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--text-faint); cursor: grab; touch-action: none; }
.pe-pgcard-grip:hover { background: var(--surface-2); color: var(--text-soft); }
.pe-pgcard-grip:active, .pe-pgcard.is-dragging .pe-pgcard-grip { cursor: grabbing; }
.pe-pgcard-grip .icon { width: 16px; height: 16px; }
.pe-pgcard-thumb { display: block; width: 100%; padding: 0; border: 1px solid var(--border); border-radius: 4px; background: #fff; cursor: pointer; overflow: hidden; }
.pe-pgcard-thumb:hover { border-color: var(--primary); }
.pe-pgcard-img { display: block; width: 100%; background: repeating-conic-gradient(#f3f4f6 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.pe-pgcard-img canvas { display: block; width: 100%; height: 100%; }
.pe-pgcard-actions { display: flex; justify-content: space-between; gap: 2px; }
.pe-pgcard-actions .btn { width: 30px; height: 30px; }
.pe-pgcard-actions .icon { width: 16px; height: 16px; }
.pe-pggrid.is-reordering .pe-pgcard:not(.is-dragging) { transition: transform .15s var(--ease); }
@media (max-width: 640px) { .pe-pggrid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; max-height: 60vh; } }

/* ---------- toast with an inline action (Undo) */
.toast-action { margin-left: .5rem; color: inherit; text-decoration: underline; font-weight: 700; }

/* ---------- print (the edited PDF as pictures) */
.pe-print { display: none; }
@media print {
  @page { margin: 0; }
  body > *:not(.pe-print) { display: none !important; }
  .pe-print { display: block !important; }
  .pe-print img { display: block; width: 100%; height: auto; max-height: 100vh; object-fit: contain; break-after: page; page-break-after: always; margin: 0 auto; }
  .pe-print img:last-child { break-after: auto; page-break-after: auto; }
}