/*
 * PDFRaj Engine — proprietary.
 * Copyright (c) 2026 Aditya Raj. All rights reserved.
 * Author: Aditya Raj. Unauthorized copying, distribution, or resale of this
 * source, in whole or in part, is prohibited.
 */
/* Smallpdf-style metric-compatible pack (self-hosted, same TTFs the worker embeds). */
@font-face{font-family:'Arimo';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Arimo-Regular.ttf') format('truetype')}
@font-face{font-family:'Arimo';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Arimo-Bold.ttf') format('truetype')}
@font-face{font-family:'Arimo';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/Arimo-Italic.ttf') format('truetype')}
@font-face{font-family:'Arimo';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/Arimo-BoldItalic.ttf') format('truetype')}
@font-face{font-family:'Tinos';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Tinos-Regular.ttf') format('truetype')}
@font-face{font-family:'Tinos';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Tinos-Bold.ttf') format('truetype')}
@font-face{font-family:'Tinos';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/Tinos-Italic.ttf') format('truetype')}
@font-face{font-family:'Tinos';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/Tinos-BoldItalic.ttf') format('truetype')}
@font-face{font-family:'Cousine';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Cousine-Regular.ttf') format('truetype')}
@font-face{font-family:'Cousine';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Cousine-Bold.ttf') format('truetype')}
@font-face{font-family:'Cousine';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/Cousine-Italic.ttf') format('truetype')}
@font-face{font-family:'Cousine';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/Cousine-BoldItalic.ttf') format('truetype')}
@font-face{font-family:'Caladea';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Caladea-Regular.ttf') format('truetype')}
@font-face{font-family:'Caladea';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Caladea-Bold.ttf') format('truetype')}
@font-face{font-family:'Caladea';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/Caladea-Italic.ttf') format('truetype')}
@font-face{font-family:'Caladea';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/Caladea-BoldItalic.ttf') format('truetype')}
@font-face{font-family:'Carlito';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Carlito-Regular.ttf') format('truetype')}
@font-face{font-family:'Carlito';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Carlito-Bold.ttf') format('truetype')}
@font-face{font-family:'Carlito';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/Carlito-Italic.ttf') format('truetype')}
@font-face{font-family:'Carlito';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/Carlito-BoldItalic.ttf') format('truetype')}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/RobotoMono-Regular.ttf') format('truetype')}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/RobotoMono-Bold.ttf') format('truetype')}
@font-face{font-family:'Roboto Mono';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/RobotoMono-Italic.ttf') format('truetype')}
@font-face{font-family:'Roboto Mono';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/RobotoMono-BoldItalic.ttf') format('truetype')}
/* ============================================================================
 * Editor webfonts (self-hosted). The font dropdown offers these families and
 * the worker embeds the SAME .ttf files on download, so the on-screen editor
 * renders byte-identical to the saved PDF (true WYSIWYG). Without these the
 * browser fell back to a default and picked fonts "did nothing" on screen.
 * ========================================================================== */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Poppins-Regular.ttf') format('truetype')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Poppins-Bold.ttf') format('truetype')}
@font-face{font-family:'Poppins';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/Poppins-Italic.ttf') format('truetype')}
@font-face{font-family:'Poppins';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/Poppins-BoldItalic.ttf') format('truetype')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Roboto-Regular.ttf') format('truetype')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Roboto-Bold.ttf') format('truetype')}
@font-face{font-family:'Roboto';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/Roboto-Italic.ttf') format('truetype')}
@font-face{font-family:'Roboto';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/Roboto-BoldItalic.ttf') format('truetype')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/OpenSans-Regular.ttf') format('truetype')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/OpenSans-Bold.ttf') format('truetype')}
@font-face{font-family:'Open Sans';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/OpenSans-Italic.ttf') format('truetype')}
@font-face{font-family:'Open Sans';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/OpenSans-BoldItalic.ttf') format('truetype')}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Lato-Regular.ttf') format('truetype')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Lato-Bold.ttf') format('truetype')}
@font-face{font-family:'Lato';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/Lato-Italic.ttf') format('truetype')}
@font-face{font-family:'Lato';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/Lato-BoldItalic.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Montserrat-Regular.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Montserrat-Bold.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/Montserrat-Italic.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/Montserrat-BoldItalic.ttf') format('truetype')}
@font-face{font-family:'Merriweather';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Merriweather-Regular.ttf') format('truetype')}
@font-face{font-family:'Merriweather';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Merriweather-Bold.ttf') format('truetype')}
@font-face{font-family:'Merriweather';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/Merriweather-Italic.ttf') format('truetype')}
@font-face{font-family:'Merriweather';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/Merriweather-BoldItalic.ttf') format('truetype')}
/*
 * PDFRaj PDF Editor — shell layout (Phase 5B.0).
 * Reuses the shared --pdfraj-* design tokens (defined in pdfraj-app.css) so
 * the editor feels native to the product. Three-pane chrome: top toolbar,
 * left thumbnail rail, center canvas, right properties panel.
 */

/* ---- Phase 0.4 (Option A): frozen design tokens for the editor page -------
 * The /pdfraj/editor page does NOT load pdfraj-workspace.css, where the frozen
 * --pdfraj-* tokens are defined on .pdfraj-app. So on the editor those tokens
 * were undefined and the shared chrome (doc-bar) + the editor's own token-based
 * styles fell back to wrong values (e.g. border-bottom collapsed to currentColor,
 * sp-* padding collapsed to 0). Define the frozen NEUTRAL tokens here — greys,
 * spacing, radius, neutral shadows, and the type scale — so the editor matches
 * every other tool. Values are copied verbatim from pdfraj-workspace.css .pdfraj-app.
 * The brand ACCENT is aligned to the product's visible brand PURPLE (#5247dc — the
 * PDFRaj logo / nav / All-Tools button / homepage), replacing the editor's legacy
 * green so the editor belongs to the same product. Scoped to the editor via
 * [data-tool="pdf-editor"] and present at load (no FOUC), so no other tool is
 * affected. (Green success #00936b is kept — success is green product-wide.) */
.pdfraj-app[data-tool="pdf-editor"] {
	--pdfraj-bd: #e2e5ea; --pdfraj-bd-strong: #d4d8df;
	--pdfraj-text: #1a1a2e; --pdfraj-text-muted: #6b7280;
	--pdfraj-canvas: #f5f7fa;
	--pdfraj-sp-1: 4px;  --pdfraj-sp-2: 8px;  --pdfraj-sp-3: 12px;
	--pdfraj-sp-4: 16px; --pdfraj-sp-5: 24px; --pdfraj-sp-6: 32px;
	--pdfraj-r-sm: 6px; --pdfraj-r-md: 10px; --pdfraj-r-lg: 14px; --pdfraj-r-pill: 999px;
	--pdfraj-sh-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--pdfraj-sh-md: 0 2px 8px rgba(15, 23, 42, 0.08);
	--pdfraj-sh-lg: 0 8px 24px -10px rgba(15, 23, 42, 0.28);
	--pdfraj-fs-xs: 0.72rem; --pdfraj-fs-sm: 0.8125rem; --pdfraj-fs-base: 0.875rem;
	--pdfraj-fs-md: 0.95rem; --pdfraj-fs-lg: 1.0625rem; --pdfraj-fs-xl: 1.25rem;
	--pdfraj-control-h: 40px; --pdfraj-control-h-sm: 32px;
	--pdfraj-icon-sm: 16px; --pdfraj-icon-md: 20px;
	--pdfraj-ws-ease: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	/* Brand accent = forest green, matching the rest of the site (pdfraj-tool-v2.css's
	 * --p/--pd/--pt). This one block flips every var(--pdfraj-accent) reference (Save
	 * button, active page, focus rings, highlights) to the brand color. */
	--pdfraj-accent: #5247dc;
	--pdfraj-accent-hover: #4239c8;
	--pdfraj-accent-soft: #eeedfc;
	--pdfraj-accent-ring: rgba(82, 71, 220, 0.20);
	--pdfraj-sh-ring: 0 0 0 3px rgba(82, 71, 220, 0.20);
	--pdfraj-sh-selected: 0 0 0 1.5px var(--pdfraj-accent) inset, 0 2px 8px rgba(82, 71, 220, 0.10);
}
/* Editor UI appended to <body> (floating format bar, image popover, nav pill,
 * dialogs) lives OUTSIDE .pdfraj-app[data-tool="pdf-editor"], so it would inherit
 * the global legacy accent from pdfraj-app.css. Re-apply the brand accent tokens
 * here so their active states / rings match the rest of the editor. */
.pe-floatbar, .pe-image-actions, .pe-annot-actions, .pe-navpill, .pe-modal-backdrop, .pe-modal, .pe-ocr-hint, .pe-text-edit {
	--pdfraj-accent: #5247DC;
	--pdfraj-accent-hover: #4239C8;
	--pdfraj-accent-soft: #EEEDFC;
	--pdfraj-accent-ring: rgba(82, 71, 220, 0.20);
}

/* ---- Dark mode (2026-10-12) -------------------------------------------- */
/* The editor shipped with NO dark styling: its chrome (toolbar, doc-bar, thumbnail
 * rail, stage, panels, dialogs) reads the theme tokens --pdfraj-paper /
 * surface-soft / ink / muted / border with LIGHT fallbacks that were never
 * redefined for dark, so everything stayed white in dark mode. Redefine those
 * tokens to the product's dark palette (same values as the workspace shell's dark
 * block) for the editor scope AND the body-appended floating UI. Covers /editor/
 * (data-tool="pdf-editor") and the sign / fill-forms editor shell (body.pe-ws-editor).
 * The document PAGE stays white on purpose -- only the chrome tokens change here. */
html[data-theme="dark"] body.pe-ws-editor,
html[data-theme="dark"] .pdfraj-app[data-tool="pdf-editor"],
html[data-theme="dark"] .pe-floatbar,
html[data-theme="dark"] .pe-image-actions,
html[data-theme="dark"] .pe-annot-actions,
html[data-theme="dark"] .pe-modal,
html[data-theme="dark"] .pe-ocr-hint,
html[data-theme="dark"] .pe-text-edit {
	--pdfraj-paper: #16181C;
	--pdfraj-surface-soft: #1F2125;
	--pdfraj-canvas: #0E1013;
	--pdfraj-ink: #F5F4EF;
	--pdfraj-text: #F5F4EF;
	--pdfraj-muted: #9AA0AA;
	--pdfraj-text-muted: #9AA0AA;
	--pdfraj-border: #26282D;
	--pdfraj-line: #26282D;
	--pdfraj-bd: #26282D;
	--pdfraj-bd-strong: #3A3F48;
	/* active/selected soft fill (active tool btn, selected page thumb): a subtle
	 * lime tint reads as "active" on the dark chrome instead of the bright #EEEDFC. */
	--pdfraj-accent-soft: rgba(196, 181, 253, 0.14);
}

/* ---- Full-viewport editing mode (5B.2.1d) --------------------------- */
/* When a document is open the editor becomes a dedicated workspace: the
 * marketing hero, dropzone, and footer collapse and the editor fills the
 * screen. The class is toggled on <body> by the editor view. */
/* Editing mode keeps the site header (for navigation) but hides the breadcrumb
 * and footer; the in-page hero + dropzone collapse so the editor fills the rest.
 * Shell nav/breadcrumb live OUTSIDE .pdfraj-app, hence targeted on <body>. */
body.pdfraj-editing .pdfraj-shell-breadcrumb-bar,
body.pdfraj-editing .pdfraj-shell-footer,
body.pdfraj-editing .pdfraj-toolsections { display: none; }
/* 6.2: lock the page so the pinned toolbar can't scroll off-screen. The
 * related-tools section below the editor was left in flow, making the window
 * scrollable — scrolling it carried the whole editor (and its toolbar) up out
 * of view (visible deep in long docs). The editor's own canvas scrolls. */
html.pdfraj-editing, body.pdfraj-editing { overflow: hidden; height: 100%; }
body.pdfraj-editing .pdfraj-app { max-width: none; margin: 0; padding: 0; }
/* Landing (pre-upload): the editor page is full-width like every other tool page,
 * so the client-design sections span edge-to-edge instead of the legacy 840px
 * single-column box. Applies in both landing and editing states. */
.pdfraj-app[data-tool="pdf-editor"] { max-width: none; margin: 0; padding: 0; }
body.pdfraj-editing .pdfraj-app .pdfraj-header { display: none; }
body.pdfraj-editing .pdfraj-app .pdfraj-dropzone { display: none; }
/* Landing: shown before upload; on upload the editor view takes over, so hide it. */
body.pdfraj-editing .pe-landing { display: none; }
/* Edge-to-edge document surface: no card frame around the workspace; fill the
 * viewport minus a slim gutter for the post-submit status/result row. */
body.pdfraj-editing .pe-editor {
	height: calc(100vh - 88px); border: none; border-radius: 0; box-shadow: none;
}
/* Phase 0.2: reserve room for the shared doc-bar (46px, in-flow above the editor)
 * so the viewport-locked editor stays fully visible instead of clipping past the
 * bottom. Outer container height ONLY — no change to the toolbar, canvas size
 * calculations, thumbnail rail, properties panel, zoom, or save flow. Scoped to
 * body.pe-ws-editor and reversible. */
/* The editor fills from the doc-bar to the bottom of the viewport. Above it:
 * the WP admin bar (--pe-ws-top: 0 logged-out / 32px with the toolbar), the slim
 * fixed header (--pe-ws-bar, 0 if ever hidden), and the 46px doc-bar. No hardcoded
 * header height, and the admin-bar case falls out of --pe-ws-top. */
body.pdfraj-editing.pe-ws-editor .pe-editor { height: calc(100vh - var(--pe-ws-top, 0px) - var(--pe-ws-bar, 0px) - var(--pe-ws-doc, 46px)); }
body.pdfraj-editing .pdfraj-actions { margin-top: 0.5rem; }

/* M2: desktop-first expectation note — landing only, shown only on phone-width
   viewports. No layout change, no JS; sits inside .pdfraj-header so the editing
   view hides it automatically. */
.pe-desktop-note { display: none; }
@media (max-width: 768px) {
	.pe-desktop-note {
		display: block; margin: 0.9rem auto 0; max-width: 34rem; padding: 0.65rem 0.9rem;
		background: var(--pdfraj-surface-soft, #f1f1f1); border: 1px solid var(--pdfraj-border);
		border-radius: 8px; font-size: 0.85rem; line-height: 1.45; color: var(--pdfraj-muted, #555); text-align: center;
	}
}

.pe-editor {
	position: relative;
	display: flex;
	flex-direction: column;
	height: min(78vh, 900px);
	border: 1px solid var(--pdfraj-border);
	border-radius: var(--pdfraj-radius, 10px);
	background: var(--pdfraj-surface-soft, #f5f5f5);
	overflow: hidden;
	box-shadow: var(--pdfraj-shadow-card, 0 2px 3px rgba(15, 23, 42, 0.06));
}
.pe-editor.pe-locked { opacity: 0.6; pointer-events: none; }

/* Transient in-editor message (e.g. a blocked rotate on an edited page). */
.pe-toast {
	position: absolute; left: 50%; top: 60px; z-index: 1200;
	max-width: 80%; padding: 0.5rem 0.9rem; border-radius: 8px;
	background: rgba(15, 23, 42, 0.92); color: #fff; font-size: 0.85rem; text-align: center;
	box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.4);
	opacity: 0; transform: translateX(-50%) translateY(-6px); pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.pe-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Actionable hint for image-baked text: message + one-click Recognize text (OCR). */
.pe-ocr-hint {
	position: absolute; z-index: 1210; display: inline-flex; align-items: center; gap: 0.55rem;
	padding: 0.4rem 0.4rem 0.4rem 0.8rem; border-radius: 10px;
	background: rgba(15, 23, 42, 0.95); color: #fff; font-size: 0.85rem; white-space: nowrap;
	box-shadow: 0 12px 30px -8px rgba(15, 23, 42, 0.5);
}
.pe-ocr-hint-msg { opacity: 0.92; }
.pe-ocr-hint-btn {
	display: inline-flex; align-items: center; height: 28px; padding: 0 0.75rem;
	border: 0; border-radius: 7px; background: var(--pdfraj-accent, #5247dc); color: #fff;
	font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background 0.12s;
}
.pe-ocr-hint-btn:hover:not(:disabled) { background: var(--pdfraj-accent-hover, #4239c8); }
.pe-ocr-hint-btn:disabled { opacity: 0.7; cursor: progress; }
.pe-ocr-hint-x {
	display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
	border: 0; background: transparent; color: rgba(255, 255, 255, 0.7); font-size: 1.15rem;
	line-height: 1; border-radius: 6px; cursor: pointer;
}
.pe-ocr-hint-x:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* ---- Toolbar ---------------------------------------------------------- */
.pe-toolbar {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.7rem;
	background: var(--pdfraj-paper, #fff);
	border-bottom: 1px solid var(--pdfraj-border);
	flex: 0 0 auto;
}
.pe-tb-group { display: flex; align-items: center; gap: 0.2rem; }
/* Desktop: tool NAMES always show. If the toolbar runs out of width, the tool
   group scrolls internally (a thin scrollbar) while the right-side actions stay
   pinned — instead of collapsing tool labels to icons. */
@media (min-width: 769px) {
	/* Desktop: tool names always show, natural width, NO scrollbar. Comfortable
	   icon->label gap + clear space between tools, and a hairline divider before
	   each dropdown so clusters read cleanly (no "Edit TextShapes" mashups). */
	.pe-tb-tools { flex: 0 0 auto; gap: 0.3rem; overflow: visible; }
	.pe-tb-tools .pe-tb-btn { gap: 0.34rem; padding: 0 0.5rem; }
	.pe-tb-tools .pe-tb-dropdown { position: relative; margin-left: 0.45rem; padding-left: 0.55rem; }
	.pe-tb-tools .pe-tb-dropdown::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background: var(--pdfraj-border); }
}
.pe-tb-page { padding-left: 0.5rem; }
.pe-tb-zoom { margin-left: auto; }
.pe-tb-tools { padding: 0 0.5rem; border-left: 1px solid var(--pdfraj-border); border-right: 1px solid var(--pdfraj-border); }

.pe-tb-btn {
	display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap;
	min-width: 34px; height: 34px; padding: 0 0.5rem;
	border: 1px solid transparent; border-radius: 8px;
	background: transparent; color: var(--pdfraj-ink, #333);
	cursor: pointer; font: inherit; font-size: 0.86rem; font-weight: 500;
	transition: background var(--pdfraj-transition, 0.15s), color var(--pdfraj-transition, 0.15s), box-shadow var(--pdfraj-transition, 0.15s);
}
/* Clean Smallpdf-style hover: a soft fill only — no border box that reads heavy. */
.pe-tb-btn:hover { background: var(--pdfraj-surface-soft, #f3f4f6); border-color: transparent; }
.pe-tb-btn:active { transform: translateY(0.5px); }
.pe-tb-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pe-tb-btn:disabled:hover { background: transparent; border-color: transparent; }
.pe-tb-btn svg { display: block; }

/* Sign-focused mode embeds the full editor inside a .pdfraj-tool-v2 tool page,
 * where the editing chrome is otherwise suppressed for preview-only embeds
 * (body.pdfraj-editing .pdfraj-tool-v2 .pe-toolbar { display:none }). The dedicated
 * Sign tool DOES need its signing UI, so re-show the toolbar + page rail. The extra
 * .pe-sign class (added on <body> in sign mode) outranks the suppression rule. */
/* The suppression rule in pdfraj-workspace-shell.css is display:none !important,
 * so this override must also be !important to win. */
body.pdfraj-editing.pe-sign .pdfraj-tool-v2 .pe-toolbar { display: flex !important; }
body.pdfraj-editing.pe-sign .pdfraj-tool-v2 .pe-rail { display: flex !important; }
/* Fill & Sign (2026-07-29) boots this same sign mode, and its whole point is the
 * fillable-form half: the banner is where "Fillable form detected - N fields" and the
 * "Flatten on save" toggle live, so it can't stay suppressed. The banner hides itself
 * via the `hidden` attribute when the PDF has no fields (_updateFormBanner), and a bare
 * display:flex would override that - so restate the [hidden] rule at the same weight.
 * Same trap family as the mega-menu one (CLAUDE.md #9). */
body.pdfraj-editing.pe-sign .pdfraj-tool-v2 .pe-form-banner { display: flex !important; }
body.pdfraj-editing.pe-sign .pdfraj-tool-v2 .pe-form-banner[hidden] { display: none !important; }

/* Reclaim the right gutter. The v2 workspace reserves a 340px right column for a
 * side/communication panel (pdfraj-workspace-shell.css) and its selector outranks
 * the editor's own padding-right:0 rule — so sign mode (which has NO side panel)
 * gets squeezed into a narrow centered column with the toolbar clipped. Drop the
 * gutter on the app padding AND the fixed docbar so the editor fills the width. */
/* Reclaim the RIGHT gutter (side panel, 340px) and shrink the TOP gutter. The v2
 * padding-top reserves --pe-ws-bar (fixed header) + --pe-ws-doc (a FIXED docbar);
 * but sign's docbar is in normal flow, so the --pe-ws-doc slice is dead space.
 * Keep only the header clearance. */
/* padding-top clears the fixed site header (--pe-ws-bar). When the WP admin bar is
 * present it adds html{margin-top} that pushes the page down while the fixed header
 * stays at top:0, so the header clearance already covers that offset — subtract the
 * admin-bar height (JS sets --pe-adminbar from #wpadminbar; 0 for logged-out end
 * users) so the docbar sits flush under the header with no admin-bar-sized gap. */
body.pe-sign .pdfraj-app.pe-ws-has-rail.pdfraj-has-files {
	padding-right: 0 !important;
	padding-top: calc(var(--pe-ws-bar, 69px) - var(--pe-adminbar, 0px)) !important;
}
/* The docbar resolves to position:relative here (not the fixed positioning its base
 * rule assumes), so its left:96px / top:69px become RELATIVE shifts on top of the
 * app's padding — double-counting the rail (Finish clipped on the right) and adding
 * a ~69px empty band above the row. Neutralise both shifts so it sits flush at the
 * top-left of the padded content box. */
body.pe-sign .pe-ws-docbar { left: 0 !important; right: auto !important; top: 0 !important; }
/* The workspace mount carries the tool page's centred-card spacing (~21px margin +
 * ~30px padding on every side) — dead space that shows as a gap between the docbar
 * and toolbar (top) AND between the family rail / viewport edge and the editor
 * (left/right). Zero it entirely so the editor fills the mount edge to edge. */
body.pe-sign .pdfraj-workspace-mount { margin: 0 !important; padding: 0 !important; }

/* Sign mode is a REAL editor, not a read-only doc-op preview. The v2 workspace
 * disables the interactive Konva overlay (body.pdfraj-ws-v2 .pe-page-konva {
 * pointer-events:none }) so clicks in a preview can't author — but that also kills
 * Text / Checkmark / Date placement (they rely on the Konva stage click; only the
 * Signature works because it drops via a document-level listener). Re-enable the
 * overlay + form controls so every sign tool can place. */
body.pe-sign.pdfraj-editing .pdfraj-tool-v2 .pe-page-konva,
body.pe-sign.pdfraj-editing .pdfraj-tool-v2 .pe-fieldctl { pointer-events: auto !important; }
/* Same reason: restore the selection / tool-options floating bar (delete, colour,
 * opacity on a placed or active item) that the preview rule hides. It's appended to
 * <body> (not inside .pdfraj-tool-v2) and exists only while relevant, so forcing its
 * display is safe. */
body.pe-sign.pdfraj-editing .pe-floatbar { display: flex !important; }
/* ...but NOT while a modal is open. The floatbar is a direct child of <body> (root
 * stacking context, z-index 1100); the modal backdrop (z-index 1500) sits inside the
 * tool page's .hero-inner, which is position:relative + z-index:1 and therefore its own
 * stacking context — so the whole editor subtree, backdrop included, paints BELOW the
 * floatbar. It covered the signature dialog and the "Lock the form before saving?"
 * confirm, and swallowed clicks meant for their buttons. Forcing the floatbar visible
 * above is what keeps it up, so withdraw that force while a backdrop exists. */
body.pe-sign.pdfraj-editing:has(.pe-modal-backdrop) .pe-floatbar { display: none !important; }

/* The editor's localhost-only debug console (_dbgOn(): *.local/localhost/*.test,
 * never production) is useful on the /editor page but clutters the focused Sign
 * tool — hide it here so even the dev view stays clean. */
body.pe-sign .pe-debug { display: none !important; }

/* The v2 preview clamps the page to max-width:100% of a narrow column so more of a
 * read-only preview shows. Sign is a real editor and fits the page to the full
 * width (see fitWidth()), so lift the clamp or the scaled page can't grow. */
body.pe-sign.pdfraj-editing .pdfraj-tool-v2 .pe-page { max-width: none !important; }

/* Sign-focused mode: the Signature button is the tool's primary action, so it
 * carries an accent tint (not a full fill — it still sits in the tool row) to
 * draw the eye without an auto-opening dialog. */
.pe-tb-btn.pe-sign-primary {
	color: var(--pdfraj-accent, #5247dc);
	background: color-mix(in srgb, var(--pdfraj-accent, #5247dc) 10%, transparent);
	font-weight: 600;
}
.pe-tb-btn.pe-sign-primary:hover { background: color-mix(in srgb, var(--pdfraj-accent, #5247dc) 18%, transparent); }
.pe-tb-btn.pe-sign-primary.is-active { background: color-mix(in srgb, var(--pdfraj-accent, #5247dc) 22%, transparent); }

.pe-zoom-label {
	min-width: 56px; height: 34px; padding: 0 0.5rem;
	border: 1px solid var(--pdfraj-border); border-radius: var(--pdfraj-radius-sm, 6px);
	background: var(--pdfraj-paper, #fff); color: var(--pdfraj-ink, #333);
	font: inherit; font-size: 0.85rem; font-variant-numeric: tabular-nums; cursor: pointer;
}
.pe-zoom-label:hover { border-color: var(--pdfraj-accent, #5247dc); color: var(--pdfraj-accent, #5247dc); }

/* Primary action promoted into the toolbar (P2): the workspace's real submit
 * button, moved here so Save is always visible while editing. Accent fill,
 * hover and disabled states are inherited from .btn .btn-primary; we only
 * resize it to fit the 34px toolbar. */
.pe-tb-save-group { margin-left: auto; padding-left: 0.75rem; border-left: 1px solid var(--pdfraj-border); display: flex; align-items: center; gap: 0.4rem; }
/* Download / Share / Finish action group (Smallpdf-style). Download = brand primary,
 * Share/Finish = outline. */
.pe-tb-action {
	display: inline-flex; align-items: center; gap: 0.4rem; height: 34px; padding: 0 0.9rem;
	border: 1px solid transparent; border-radius: var(--pdfraj-radius-sm, 6px);
	font: inherit; font-size: 0.88rem; font-weight: 600; white-space: nowrap; cursor: pointer;
	transition: background 0.12s, border-color 0.12s;
}
.pe-tb-action svg { width: 16px; height: 16px; display: block; }
.pe-tb-action[hidden] { display: none; }
.pe-tb-action:disabled { opacity: 0.5; cursor: not-allowed; }
.pe-tb-download { background: var(--pdfraj-accent, #5247dc); color: #fff; border-color: var(--pdfraj-accent, #5247dc); }
.pe-tb-download:hover:not(:disabled) { background: var(--pdfraj-accent-hover, #4239c8); border-color: var(--pdfraj-accent-hover, #4239c8); }
.pe-tb-share, .pe-tb-finish { background: var(--pdfraj-paper, #fff); color: var(--pdfraj-accent, #5247dc); border-color: var(--pdfraj-bd, #d4d8df); }
.pe-tb-share:hover:not(:disabled), .pe-tb-finish:hover:not(:disabled) { border-color: var(--pdfraj-accent, #5247dc); background: var(--pdfraj-accent-soft, #eeedfc); }

/* Responsive toolbar. Save PDF + Fit width must never wrap to two lines. */
.pe-tb-save, .pe-zoom-label { white-space: nowrap; }
/* Desktop shows the TOOL NAMES next to their icons. Fit is measured, not by fixed
 * breakpoints: _fitToolbar() adds .pe-tb-c1 (collapse the save-state indicator to a
 * dot — the text stays as its tooltip) and then .pe-tb-c2 (drop tool labels to
 * icons) only as far as needed to keep the row on one line without clipping. Save PDF
 * + Fit width always keep their labels; dropdown carets stay. */
body.pe-ws-editor .pe-toolbar.pe-tb-c1 .pe-ss-txt { display: none; }
/* c2: Share/Finish drop their labels to icons (Download keeps its label) — this
 * happens BEFORE the tool names collapse, so desktop keeps the tool names longer. */
body.pe-ws-editor .pe-toolbar.pe-tb-c2 .pe-tb-share > span,
body.pe-ws-editor .pe-toolbar.pe-tb-c2 .pe-tb-finish > span { display: none; }
body.pe-ws-editor .pe-toolbar.pe-tb-c2 .pe-tb-share,
body.pe-ws-editor .pe-toolbar.pe-tb-c2 .pe-tb-finish { padding: 0 0.5rem; }
/* c3 (last resort): tool labels -> icons. */
body.pe-ws-editor .pe-toolbar.pe-tb-c3 .pe-tb-tools .pe-tb-btn > span:not(.pe-tb-caret) { display: none; }
/* Save-state indicator (6.1 #1) */
.pe-save-state { display: inline-flex; align-items: center; font-size: 0.78rem; white-space: nowrap; margin-right: 0.5rem; }
.pe-save-state[hidden] { display: none; }
.pe-save-state--unsaved { color: #8a5a00; }
.pe-save-state--unsaved::before { content: '\25CF'; color: #e0a106; font-size: 0.7em; margin-right: 0.35rem; }
.pe-save-state--saved { color: #0a6b4f; }
.pe-save-state--saved::before { content: '\2713'; margin-right: 0.3rem; }
.pe-toolbar .pe-tb-save {
	height: 34px; padding: 0 1.05rem; border-radius: var(--pdfraj-radius-sm, 6px);
	font-size: 0.9rem; font-weight: 600;
}

/* ---- Doc-bar action group (Smallpdf-style): Download / Share / Finish live in the
 * doc-bar identity header, right-aligned — freeing the tool row so it reads clean. ---- */
.pe-ws-docbar .pe-ws-doc-actions { margin-left: auto; display: flex; align-items: center; gap: 0.45rem; }
.pe-ws-docbar .pe-ws-doc-actions .pe-save-state { margin-right: 0.35rem; }
.pe-ws-docbar .pe-tb-save { height: 34px; padding: 0 1.05rem; border-radius: var(--pdfraj-radius-sm, 6px); font-size: 0.9rem; font-weight: 600; }
.pe-ws-docbar .pe-tb-action svg { width: 16px; height: 16px; }

/* ---- Find in document (search): far-right of the tool row, toggles a compact bar.
 * The bar is an ABSOLUTE overlay anchored to the search icon's right edge, so opening
 * it never reflows or scrolls the tool row and it always stays inside the viewport. ---- */
.pe-tb-searchgroup { margin-left: auto; padding-left: 0.6rem; border-left: 1px solid var(--pdfraj-border); position: relative; }
.pe-search-toggle svg { width: 18px; height: 18px; }
.pe-search-bar {
	position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 30;
	display: inline-flex; align-items: center; gap: 0.3rem; height: 40px;
	background: var(--pdfraj-paper, #fff); border: 1px solid var(--pdfraj-bd, #e3e6eb);
	border-radius: 11px; padding: 0 0.4rem 0 0.7rem;
	box-shadow: 0 12px 30px -8px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(82,71,220,0.06);
}
.pe-search-bar[hidden] { display: none; }
/* Leading magnifier inside the field (Smallpdf) — muted, purely decorative. */
.pe-search-ico { display: inline-flex; align-items: center; color: var(--pdfraj-muted, #9aa0aa); flex: 0 0 auto; }
.pe-search-ico svg { width: 15px; height: 15px; display: block; }
.pe-search-input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 0.9rem; width: 168px; color: var(--pdfraj-ink, #23262e); }
.pe-search-input::placeholder { color: var(--pdfraj-muted, #9aa0aa); }
.pe-search-count { font-size: 0.78rem; color: var(--pdfraj-muted, #8a8f98); white-space: nowrap; min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; padding-right: 0.15rem; }
/* Count + nav read as one navigation cluster, fenced off from the input by a hairline. */
.pe-search-nav-group { display: inline-flex; align-items: center; gap: 0.1rem; padding-left: 0.3rem; margin-left: 0.1rem; border-left: 1px solid var(--pdfraj-border, #e3e6eb); }
.pe-search-nav, .pe-search-close {
	display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
	border: 0; background: transparent; color: var(--pdfraj-ink, #555); border-radius: 7px; cursor: pointer; line-height: 1;
	transition: background 0.12s, color 0.12s;
}
.pe-search-nav { font-size: 0.95rem; }
.pe-search-nav:disabled { opacity: 0.35; cursor: default; }
.pe-search-close { font-size: 1.2rem; color: var(--pdfraj-muted, #8a8f98); margin-left: 0.15rem; }
.pe-search-nav:hover:not(:disabled) { background: var(--pdfraj-accent-soft, #eeedfc); color: var(--pdfraj-accent, #5247dc); }
.pe-search-close:hover { background: var(--pdfraj-surface-soft, #f3f4f6); color: var(--pdfraj-ink, #333); }

/* ---- Body: rail | canvas | props ------------------------------------- */
.pe-body { display: flex; flex: 1 1 auto; min-height: 0; }

.pe-rail {
	flex: 0 0 136px; overflow-y: auto; padding: 0.75rem;
	background: var(--pdfraj-paper, #fff);
	border-right: 1px solid var(--pdfraj-border);
	display: flex; flex-direction: column; gap: 0.6rem;
}
.pe-thumb {
	display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
	padding: 0.35rem; border: 1px solid transparent; border-radius: 8px;
	background: transparent; cursor: pointer; font: inherit;
	transition: border-color var(--pdfraj-transition, 0.15s), background var(--pdfraj-transition, 0.15s);
}
.pe-thumb:hover { background: var(--pdfraj-surface-soft, #f5f5f5); border-color: var(--pdfraj-border); }
.pe-thumb.is-active { border-color: var(--pdfraj-accent, #5247dc); background: var(--pdfraj-accent-soft, rgba(82, 71, 220, 0.08)); }
.pe-thumb-img {
	width: 100%; min-height: 64px; display: flex; justify-content: center;
	background: var(--pdfraj-paper, #fff); border: 1px solid var(--pdfraj-border); border-radius: 4px; overflow: hidden;
}
.pe-thumb-img canvas { width: 100%; height: auto; display: block; }
.pe-thumb-img:empty:not(.pe-thumb-blank) { background: #eef0f2; }   /* lazy: not-yet-painted placeholder */
.pe-thumb-num { font-size: 0.75rem; color: var(--pdfraj-muted, #777); font-variant-numeric: tabular-nums; }

/* Rail per-page actions (Smallpdf-style): duplicate / rotate / delete on hover.
 * Distinct classes from the older absolutely-positioned .pe-page-tools bar. */
.pe-thumb-tools {
	display: flex; justify-content: center; gap: 0.15rem; margin-top: 0.05rem;
	opacity: 0; pointer-events: none; transition: opacity 0.12s;
}
.pe-thumb:hover .pe-thumb-tools, .pe-thumb.is-active .pe-thumb-tools { opacity: 1; pointer-events: auto; }
.pe-tt-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; padding: 0; border: 1px solid var(--pdfraj-border); border-radius: 6px;
	background: var(--pdfraj-paper, #fff); color: var(--pdfraj-ink, #444); cursor: pointer;
}
.pe-tt-btn:hover { background: var(--pdfraj-surface-soft, #eef0f2); color: var(--pdfraj-accent, #5247dc); }
.pe-tt-btn svg { width: 15px; height: 15px; display: block; }

/* "+" insert affordance between thumbnails. */
.pe-thumb-ins { display: flex; align-items: center; justify-content: center; height: 14px; }
.pe-thumb-ins-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%;
	background: var(--pdfraj-accent, #5247dc); color: #fff; cursor: pointer;
	opacity: 0; transform: scale(0.85); transition: opacity 0.12s, transform 0.12s;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.22);
}
.pe-thumb-ins:hover .pe-thumb-ins-btn { opacity: 1; transform: scale(1); }
.pe-thumb-ins-btn svg { width: 13px; height: 13px; display: block; }

/* Bottom floating page-nav + zoom pill (Smallpdf-style). */
.pe-navpill {
	position: sticky; bottom: 18px; z-index: 30;
	display: flex; align-items: center; gap: 0.05rem; width: fit-content; margin: 0 auto;
	padding: 0.28rem 0.5rem; border-radius: 999px;
	background: #1f2a44; color: #fff;
	box-shadow: 0 10px 28px -8px rgba(15, 23, 42, 0.55), 0 2px 6px rgba(15, 23, 42, 0.25);
}
.pe-navpill[hidden] { display: none; }
.pe-np-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; padding: 0; border: none; border-radius: 999px;
	background: transparent; color: #fff; cursor: pointer; transition: background 0.12s;
}
.pe-np-btn:hover { background: rgba(255, 255, 255, 0.14); }
.pe-np-btn:disabled { opacity: 0.35; cursor: default; }
.pe-np-btn:disabled:hover { background: transparent; }
/* Toggled-on view control (alignment guides). Same amber Create Forms uses,
   so a control that exists in both places reads the same in both. */
.pe-np-btn.is-on { background: rgba(255, 255, 255, 0.22); color: #ffd79a; }
.pe-np-btn svg { width: 17px; height: 17px; display: block; }
.pe-np-label { font-size: 0.82rem; font-variant-numeric: tabular-nums; padding: 0 0.45rem; white-space: nowrap; }
.pe-np-sep { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.22); margin: 0 0.28rem; }
.pe-np-zoom {
	min-width: 50px; height: 26px; padding: 0 0.5rem; border: none; border-radius: 999px;
	background: transparent; color: #fff; cursor: pointer;
	font: inherit; font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pe-np-zoom:hover { background: rgba(255, 255, 255, 0.14); }

.pe-canvas {
	flex: 1 1 auto; overflow: auto; padding: 1rem;
	background: var(--pdfraj-surface-soft, #ededed);
	outline: none;
}
.pe-pages { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }

/* Loading skeleton: a shimmering page card + caption, shown while a document
 * parses (initial open or post-op re-render) so the workspace never sits blank
 * or flashes back to the landing. */
.pe-loading { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; min-height: 60vh; padding: 2.5rem 1rem; width: 100%; }
.pe-loading-card {
	/* Sized from its HEIGHT, not its width: at 440px wide and 3:4 this stood
	   587px tall and pushed the line saying what was happening off the bottom
	   of the editor, so all the user saw was a blank sheet and a bar. */
	height: min(300px, 36vh); width: auto; aspect-ratio: 3 / 4;
	background: #fff; border-radius: 10px; position: relative; overflow: hidden;
	border: 1px solid var(--pdfraj-bd, #e2e5ea);
	box-shadow: 0 8px 30px -8px rgba(15, 23, 42, 0.22);
	display: flex; flex-direction: column;
}
/* Matches .pe-ws-stage-card in the workspace: ruled sheet, type badge. */
.pe-loading-sheet { flex: 1; display: flex; flex-direction: column; gap: 11px; padding: 26px 26px 0; }
.pe-loading-sheet i {
	display: block; height: 13px; border-radius: 3px;
	background: color-mix(in srgb, var(--pdfraj-accent, #5247dc) 24%, #fff);
}
.pe-loading-sheet i:nth-child(2) { width: 82%; }
.pe-loading-sheet i:nth-child(3) { width: 64%; }
.pe-loading-kind {
	flex: 0 0 auto; padding: 15px 0; text-align: center;
	color: #fff; background: var(--pdfraj-accent, #5247dc);
	font-size: 1.35rem; font-weight: 800; letter-spacing: 0.04em;
}
.pe-loading-card::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(100deg, transparent 25%, rgba(82, 71, 220, 0.09) 50%, transparent 75%);
	transform: translateX(-100%); animation: pe-shimmer 1.25s ease-in-out infinite;
}
@keyframes pe-shimmer { to { transform: translateX(100%); } }
.pe-loading-txt { font-size: 1.0625rem; font-weight: 700; color: var(--pdfraj-text, #1a1a2e); letter-spacing: -0.005em; }
.pe-loading-sub {
	font-size: 0.875rem; color: var(--pdfraj-muted, #5a5a72); margin-top: -0.5rem;
	font-variant-numeric: tabular-nums; max-width: 34ch;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Same bar the workspace stage runs while a job is outstanding, so opening a
   document and working on one read as the same product. */
.pe-loading-bar {
	position: absolute; top: 0; left: 0; width: 100%; height: 6px;
	background: var(--pdfraj-bd, #e2e5ea); overflow: hidden;
}
.pe-loading-bar i {
	display: block; height: 100%;
	background: repeating-linear-gradient(115deg,
		var(--pdfraj-accent, #5247dc) 0 10px,
		color-mix(in srgb, var(--pdfraj-accent, #5247dc) 45%, #fff) 10px 20px);
	background-size: 200% 100%;
	animation: pe-loading-bar 1.1s linear infinite;
}
@keyframes pe-loading-bar { to { background-position: -40px 0; } }
@media (prefers-reduced-motion: reduce) { .pe-loading-bar i, .pe-loading-card::after { animation: none; } }

.pe-page {
	position: relative;
	background: var(--pdfraj-paper, #fff);
	box-shadow: var(--pdfraj-shadow-card, 0 2px 8px rgba(15, 23, 42, 0.12));
}
.pe-page-canvas { position: absolute; inset: 0; }
.pe-page-canvas canvas { display: block; width: 100%; height: 100%; }
/* Konva mounts its own canvas here; it must overlay the render 1:1. */
.pe-page-konva { position: absolute; inset: 0; z-index: 2; }   /* above the canvas + delete covers, below interactive overlays */
/* Highlight colour fills. mix-blend-mode:multiply blends the colour against the page
   text canvas below (vivid colour + text stays readable) — which a Konva canvas can't
   do. CRITICAL: each fill is a DIRECT child of .pe-page (z-index on the element itself,
   NOT a z-indexed wrapper) — a wrapper forms a stacking context that isolates the blend
   and the colour goes opaque, hiding the text. Sits above the page canvas but below the
   Konva stage (z:2), so selection handles stay on top. Purely visual; the transparent
   Konva proxy on the stage carries the interaction (shape ops) or _annotAt (annotations). */
.pe-shapehl, .pe-annothl { position: absolute; z-index: 1; pointer-events: none; mix-blend-mode: multiply; border-radius: 1px; transform-origin: top left; }
.pe-page-konva .konvajs-content { position: absolute !important; top: 0; left: 0; }

/* Form-field detection layer (5B.6b): read-only outlines over each page. */
.pe-form-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.pe-field {
	position: absolute; box-sizing: border-box;
	border: 1px solid rgba(82, 71, 220, 0.7);
	background: rgba(82, 71, 220, 0.07);
	border-radius: 2px;
}
.pe-field--radio { border-radius: 50%; }
.pe-field--checkbox, .pe-field--radio { background: rgba(82, 71, 220, 0.12); }
.pe-field.is-readonly { border-color: rgba(120, 130, 140, 0.6); background: rgba(120, 130, 140, 0.07); }

/* Interactive form controls (5B.6c): native inputs. Fillable in EVERY normal mode
   (Sejda-parity) — a click fills the field without first switching to Select. The
   form-layer CONTAINER stays pointer-events:none, so clicks in the GAPS between fields
   still pass through to the drawing stage. Previously these were gated to .pe-forms-live
   (Select mode only), which made a form look "dead" whenever any other tool was armed. */
.pe-fieldctl {
	position: absolute; box-sizing: border-box;
	/* 6.1 #2: faint accent fill + firmer border so fillable text/dropdown
	   fields read as obviously clickable, not as plain page content. Paint-only
	   (no size change); :focus below clears the fill to solid white for typing. */
	border: 1px solid rgba(82, 71, 220, 0.8);
	background: rgba(82, 71, 220, 0.12);
	font: inherit; font-size: 13px; line-height: 1.15; color: #111;
	padding: 0 3px; border-radius: 2px;
	pointer-events: auto;
}
/* Only when an explicit drawing / whiteout / text / eraser tool is armed does a click
   over a field go to that tool (draw / cover / place over the field's area) instead of
   filling it — so drawing OVER a form field still works. In Select / pan / edit modes
   the field always fills. (The ws-v2 doc-op PREVIEW keeps its own !important none rule.) */
.pe-canvas.pe-tool-draw .pe-fieldctl,
.pe-canvas.pe-tool-eraser .pe-fieldctl,
.pe-canvas.pe-tool-text .pe-fieldctl { pointer-events: none; }
.pe-fieldctl:focus { outline: 2px solid var(--pdfraj-accent, #5247dc); outline-offset: -1px; background: #fff; }
textarea.pe-fieldctl { resize: none; padding: 2px 3px; overflow: auto; }
select.pe-fieldctl { padding: 0 2px; cursor: pointer; }
.pe-fieldctl--checkbox, .pe-fieldctl--radio { background: transparent; border: none; padding: 0; cursor: pointer; accent-color: var(--pdfraj-accent, #5247dc); }
/* Read-only fields render as the SAME native control, disabled: a clean native look that
   shows the value/checked state without a heavy custom box. Text/dropdown mute to read as
   non-editable (text stays legible via -webkit-text-fill-color); checkbox/radio keep their
   crisp native appearance. This replaced the solid purple box the read-only path used to draw. */
.pe-fieldctl:disabled { background: rgba(120, 130, 140, 0.08); border-color: rgba(120, 130, 140, 0.5); color: #444; cursor: default; opacity: 1; -webkit-text-fill-color: #444; }
.pe-fieldctl--checkbox:disabled, .pe-fieldctl--radio:disabled { background: transparent; border: none; opacity: 0.85; }
/* Signature field (5B.6d): clickable affordance -> existing Signature dialog. */
.pe-fieldctl--signature {
	display: flex; align-items: center; justify-content: center;
	border: 1px dashed var(--pdfraj-accent, #5247dc);
	background: rgba(82, 71, 220, 0.08); color: var(--pdfraj-accent, #5247dc);
	font-size: 12px; font-weight: 600; cursor: pointer; letter-spacing: 0.05em; text-transform: uppercase; overflow: hidden;
}
.pe-fieldctl--signature:hover { background: rgba(82, 71, 220, 0.18); }

/* Form PDFs now allow rotate / reorder / delete (backend applies them in place,
 * preserving the AcroForm). Only duplicate + blank-insert stay blocked, and those
 * are guarded in JS (_duplicate / _insertBlank) — so no blanket dropdown disable. */

/* Form detection banner (5B.6b): always explicit - fields / none / XFA. */
.pe-form-banner {
	display: flex; align-items: center; gap: 0.5rem;
	padding: 0.45rem 0.9rem; font-size: 0.85rem;
	border-bottom: 1px solid var(--pdfraj-border);
}
.pe-form-banner[hidden] { display: none; }
.pe-form-banner--info  { background: #e8f7f1; color: #0a6b4f; }
.pe-form-banner--warn  { background: #fdf3e6; color: #8a5a00; }
.pe-form-banner--muted { background: #f3f4f6; color: #4b5563; }
.pe-form-banner-msg { flex: 1; }
.pe-form-flatten { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; cursor: pointer; white-space: nowrap; }
.pe-form-flatten input { accent-color: var(--pdfraj-accent, #5247dc); margin: 0; }
.pe-form-banner-x { border: none; background: transparent; cursor: pointer; font-size: 1.15rem; line-height: 1; color: inherit; opacity: 0.55; padding: 0 0.25rem; }
.pe-form-banner-x:hover { opacity: 1; }

/* Context tool hint (release polish): whiteout-not-redaction + scanned guidance. */
.pe-tool-hint { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.9rem; font-size: 0.83rem; background: #fdf3e6; color: #8a5a00; border-bottom: 1px solid var(--pdfraj-border); }
.pe-tool-hint[hidden] { display: none; }
.pe-tool-hint-msg { flex: 1; }
.pe-tool-hint-btn { border: none; background: var(--pdfraj-accent, #5247dc); color: #fff; cursor: pointer; font-size: 0.8rem; font-weight: 600; line-height: 1; padding: 0.32rem 0.7rem; border-radius: 6px; white-space: nowrap; }
.pe-tool-hint-btn:hover:not(:disabled) { background: var(--pdfraj-accent-hover, #4239c8); }
.pe-tool-hint-btn:disabled { opacity: 0.7; cursor: progress; }
.pe-tool-hint-x { border: none; background: transparent; cursor: pointer; font-size: 1.15rem; line-height: 1; color: inherit; opacity: 0.55; padding: 0 0.25rem; }
.pe-tool-hint-x:hover { opacity: 1; }
.pe-page-badge {
	position: absolute; left: 8px; bottom: 8px;
	padding: 0.1rem 0.45rem; border-radius: 999px;
	background: rgba(15, 23, 42, 0.62); color: #fff;
	font-size: 0.72rem; font-variant-numeric: tabular-nums; pointer-events: none;
}

.pe-props {
	flex: 0 0 248px; overflow-y: auto;
	background: var(--pdfraj-paper, #fff);
	border-left: 1px solid var(--pdfraj-border);
	display: flex; flex-direction: column;
}
.pe-props-head {
	padding: 0.85rem 1rem; font-weight: 700; font-size: 0.85rem;
	letter-spacing: 0.02em; text-transform: uppercase; color: var(--pdfraj-muted, #777);
	border-bottom: 1px solid var(--pdfraj-border);
}
.pe-props-body { padding: 1rem; }
.pe-props-empty { margin: 0 0 0.6rem; color: var(--pdfraj-ink, #333); font-size: 0.9rem; }
.pe-props-hint { margin: 0; color: var(--pdfraj-muted, #777); font-size: 0.82rem; line-height: 1.5; }

/* Document stats (5B.1). */
.pe-props-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; margin: 0 0 1rem; }
.pe-props-stats > div { text-align: center; padding: 0.5rem 0.25rem; background: var(--pdfraj-surface-soft, #f5f5f5); border-radius: 8px; }
.pe-props-stats dt { margin: 0; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--pdfraj-muted, #777); }
.pe-props-stats dd { margin: 0.15rem 0 0; font-size: 1.15rem; font-weight: 700; color: var(--pdfraj-ink, #333); font-variant-numeric: tabular-nums; }

/* ---- Page operations (5B.1) ---------------------------------------- */
/* Per-page hover controls (rotate / duplicate / delete). */
.pe-page-tools {
	position: absolute; top: 6px; right: 6px; z-index: 3;
	display: flex; gap: 2px; padding: 3px;
	background: rgba(255, 255, 255, 0.94); border: 1px solid var(--pdfraj-border);
	border-radius: 8px; box-shadow: var(--pdfraj-shadow-pop, 0 6px 16px rgba(15, 23, 42, 0.16));
	opacity: 0; transform: translateY(-3px); pointer-events: none;
	transition: opacity 0.15s, transform 0.15s;
}
.pe-page:hover .pe-page-tools, .pe-page:focus-within .pe-page-tools { opacity: 1; transform: none; pointer-events: auto; }
.pe-pt-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border: none; border-radius: 6px;
	background: transparent; color: var(--pdfraj-ink, #333); cursor: pointer;
}
.pe-pt-btn:hover { background: var(--pdfraj-surface-soft, #f1f1f1); color: var(--pdfraj-accent, #5247dc); }
.pe-pt-btn svg { width: 16px; height: 16px; }

/* Blank page surface (center + rail). */
.pe-blank-fill {
	position: absolute; inset: 0; background: #fff;
	background-image: repeating-linear-gradient(45deg, transparent, transparent 9px, rgba(15, 23, 42, 0.035) 9px, rgba(15, 23, 42, 0.035) 10px);
}
.pe-thumb-blank {
	min-height: 64px; background: #fff;
	background-image: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(15, 23, 42, 0.045) 6px, rgba(15, 23, 42, 0.045) 7px);
}

/* Rail drag-to-reorder. */
.pe-thumb { cursor: grab; }
.pe-thumb.pe-dragging { opacity: 0.4; cursor: grabbing; }
.pe-thumb.pe-drop-target { box-shadow: inset 0 3px 0 0 var(--pdfraj-accent, #5247dc); }

/* ---- Text tool (5B.2) ---------------------------------------------- */
/* Active tool = soft blue pill with accent text (Smallpdf). No hard solid border —
   a subtle inset ring keeps the shape crisp without the heavy outlined look. */
.pe-tb-btn.is-active { background: var(--pdfraj-accent-soft, rgba(82,71,220,0.12)); border-color: transparent; color: var(--pdfraj-accent, #5247dc); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(82,71,220,0.18); }
.pe-tb-btn.is-active:hover { background: var(--pdfraj-accent-soft, rgba(82,71,220,0.16)); }
/* Crosshair over pages while a create tool (text / highlight / rectangle) is armed. */
.pe-canvas.pe-tool-text .pe-page-konva,
.pe-canvas.pe-tool-draw .pe-page-konva { cursor: crosshair; }
.pe-canvas.pe-tool-eraser .pe-page-konva { cursor: cell; }
.pe-canvas.pe-tool-pan { cursor: grab; }
.pe-canvas.pe-tool-pan .pe-page-konva { cursor: grab; }
.pe-canvas.pe-panning, .pe-canvas.pe-panning .pe-page-konva { cursor: grabbing; }

/* Smallpdf-style colour control: swatch button + preset-grid popup + custom modal. */
.pe-fb-swatch { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--pdfraj-border); cursor: pointer; padding: 0; box-shadow: inset 0 0 0 2px #fff; }
.pe-fb-swatch:hover { border-color: var(--pdfraj-accent, #5247dc); }
.pe-color-pop { background: #fff; border: 1px solid var(--pdfraj-border); border-radius: 12px; box-shadow: 0 14px 34px -6px rgba(15, 23, 42, 0.28); padding: 14px; }
.pe-color-grid { display: grid; grid-template-columns: repeat(4, 30px); gap: 14px; }
.pe-color-cell { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.12); cursor: pointer; padding: 0; transition: transform 0.08s; }
.pe-color-cell.is-light { border-color: rgba(0, 0, 0, 0.22); }
.pe-color-cell:hover { transform: scale(1.1); }
.pe-color-cell.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pdfraj-accent, #5247dc); }
.pe-color-custom { background: conic-gradient(red, #ff0, #0f0, #0ff, #00f, #f0f, red); display: flex; align-items: center; justify-content: center; }
.pe-color-custom > span { width: 20px; height: 20px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; color: #333; }
/* "None" swatch (Smallpdf-style): white circle crossed by a red diagonal (⊘). */
.pe-color-none { background: #fff; position: relative; overflow: hidden; }
.pe-color-none::after { content: ''; position: absolute; top: 50%; left: -2px; right: -2px; height: 1.6px; background: #e11900; transform: rotate(-45deg); transform-origin: center; }
/* A swatch button currently set to "none" shows the same ⊘ instead of a colour fill. */
.pe-fb-swatch.is-none { background: #fff !important; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px #fff; }
.pe-fb-swatch.is-none::after { content: ''; position: absolute; top: 50%; left: -1px; right: -1px; height: 1.4px; background: #e11900; transform: rotate(-45deg); transform-origin: center; }

/* Custom-color modal: a compact, single-column picker (SV square -> hue -> hex ->
   buttons). The base .pe-modal (560px, 2-col grid body) is defined later in the file
   and would otherwise win, so override with the two-class selector + a block body. */
.pe-modal.pe-color-modal { width: 268px; }
.pe-color-modal .pe-modal-head { padding: 1rem 1.15rem 0.35rem; border-bottom: 0; }
.pe-color-modal .pe-modal-body { display: block; padding: 0.5rem 1.15rem 0.25rem; }
.pe-color-modal .pe-modal-foot { justify-content: flex-end; gap: 0.5rem; padding: 0.6rem 1.15rem 1.05rem; }
.pe-cm-sv { position: relative; width: 100%; height: 160px; border-radius: 8px; cursor: crosshair; margin-bottom: 16px; }
.pe-cm-sv-thumb { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); transform: translate(-50%, -50%); pointer-events: none; }
.pe-cm-hue { position: relative; height: 12px; border-radius: 6px; cursor: pointer; margin-bottom: 16px; background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); }
.pe-cm-hue-thumb { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); transform: translate(-50%, -50%); pointer-events: none; background: #fff; }
.pe-cm-hexrow { display: flex; }
.pe-cm-hex { width: 100%; padding: 8px 10px; border: 1px solid var(--pdfraj-border); border-radius: 8px; font: inherit; font-size: 0.9rem; text-transform: lowercase; }

/* Floating contextual toolbar above a selected text box (appended to <body>). */
.pe-floatbar {
	position: absolute; z-index: 1100; display: flex; align-items: center; gap: 1px;
	padding: 4px 6px; background: var(--pdfraj-paper, #fff); border: 1px solid var(--pdfraj-border);
	border-radius: 10px; box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(15, 23, 42, 0.08);
}
.pe-fb-sep { width: 1px; height: 20px; margin: 0 5px; background: var(--pdfraj-border); }
/* Link floating-bar target label: show where the link points, truncated so a long
   URL keeps the bar compact/responsive. */
.pe-fb-linklbl { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px 0 4px; font-size: 0.82rem; color: var(--pdfraj-accent, #5247dc); font-weight: 600; }
/* Smallpdf-style opacity control: blend icon + number + stacked up/down spinner. */
.pe-fb-opac { display: flex; align-items: center; gap: 6px; padding: 2px 6px 2px 4px; margin-left: 8px; border-radius: 7px; }
.pe-fb-opic { display: inline-flex; color: #5b6470; }
.pe-fb-opnum { min-width: 24px; text-align: right; font-size: 0.9rem; font-variant-numeric: tabular-nums; color: var(--pdfraj-ink, #333); }
.pe-fb-spin { display: flex; flex-direction: column; margin-left: 1px; }
.pe-fb-spinbtn { border: none; background: transparent; cursor: pointer; padding: 0 2px; margin: 0; line-height: 0.7; font-size: 0.62rem; color: #8a94a3; height: 11px; display: flex; align-items: center; }
.pe-fb-spinbtn:hover { color: var(--pdfraj-accent, #5247dc); }
/* Smallpdf-style dark hover tooltip (styled, not the native title). */
.pe-tip { position: absolute; z-index: 1200; background: #1f2933; color: #fff; padding: 4px 9px; border-radius: 6px; font-size: 0.74rem; line-height: 1.2; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px -4px rgba(15, 23, 42, 0.35); }
.pe-tip::before { content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid #1f2933; }
.pe-fb-btn {
	display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px;
	padding: 0 0.35rem; border: none; border-radius: 7px; background: transparent;
	color: var(--pdfraj-ink, #333); cursor: pointer; font: inherit; font-size: 0.95rem;
	transition: background 0.12s, color 0.12s;
}
.pe-fb-btn:hover { background: var(--pdfraj-surface-soft, #f1f1f1); }
.pe-fb-btn.is-active { background: var(--pdfraj-accent-soft, rgba(82,71,220,0.16)); color: var(--pdfraj-accent, #5247dc); }
.pe-fb-btn svg { width: 17px; height: 17px; }
.pe-fb-btn.pe-fb-del:hover { background: rgba(255, 50, 104, 0.08); color: var(--pdfraj-danger, #ff3268); }
/* Font dropdown — compact, borderless */
.pe-floatbar .pe-fb-font {
	height: 30px; max-width: 96px; padding: 0 0.4rem; border: none; border-radius: 7px;
	font: inherit; font-size: 0.85rem; background: transparent; color: var(--pdfraj-ink, #333); cursor: pointer;
}
.pe-floatbar .pe-fb-font:hover { background: var(--pdfraj-surface-soft, #f1f1f1); }
/* Size stepper */
.pe-fb-sizewrap { display: inline-flex; align-items: center; }
.pe-fb-step {
	width: 22px; height: 30px; border: none; background: transparent; cursor: pointer;
	color: var(--pdfraj-muted, #777); font-size: 1rem; line-height: 1; border-radius: 7px;
}
.pe-fb-step:hover { background: var(--pdfraj-surface-soft, #f1f1f1); color: var(--pdfraj-ink, #333); }
.pe-floatbar .pe-fb-size {
	width: 34px; height: 30px; border: none; border-radius: 6px; background: transparent;
	font: inherit; font-size: 0.85rem; text-align: center; color: var(--pdfraj-ink, #333);
	-moz-appearance: textfield;
}
.pe-floatbar .pe-fb-size::-webkit-outer-spin-button, .pe-floatbar .pe-fb-size::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Shape toolbar (5B.3a): numeric value display (opacity %, border width) + fill toggle. */
.pe-fb-num { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 30px; padding: 0 2px; font-size: 0.82rem; color: var(--pdfraj-ink, #333); font-variant-numeric: tabular-nums; }
.pe-fb-fill-toggle.is-active { background: var(--pdfraj-accent-soft, rgba(82,71,220,0.16)); color: var(--pdfraj-accent, #5247dc); }

/* ---- Toolbar dropdown (5B.3b: Image menu) -------------------------------- */
.pe-tb-dropdown { position: relative; display: inline-flex; }
.pe-tb-dd-btn .pe-tb-caret { font-size: 0.7rem; opacity: 0.7; margin-left: 0.15rem; }
.pe-tb-menu {
	position: absolute; top: calc(100% + 4px); left: 0; z-index: 1150; min-width: 200px;
	padding: 0.35rem; background: var(--pdfraj-paper, #fff); border: 1px solid var(--pdfraj-border);
	border-radius: 10px; box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.28);
	display: flex; flex-direction: column; gap: 2px;
}
.pe-tb-menu[hidden] { display: none; }
.pe-tb-menu-item {
	display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.6rem;
	border: 0; border-radius: 7px; background: transparent; color: var(--pdfraj-ink, #333);
	font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer;
}
.pe-tb-menu-item:hover { background: var(--pdfraj-surface-soft, #f1f1f1); }
.pe-tb-menu-item svg { width: 17px; height: 17px; }
.pe-tb-menu-item.is-disabled { opacity: 0.45; cursor: not-allowed; }
/* #4 Smallpdf parity: highlight the active tool's item in its dropdown */
.pe-tb-menu-item.is-active { background: var(--pdfraj-accent-soft, #efeafc); color: var(--pdfraj-accent, #5247dc); font-weight: 600; }
.pe-tb-menu-item.is-active svg { color: var(--pdfraj-accent, #5247dc); }

/* 2B: on phones a tool dropdown opens as a Smallpdf-style bottom sheet (full-width,
 * big touch rows, dimmed backdrop) instead of a cramped popover on the toolbar. */
.pe-tb-sheet-backdrop { position: fixed; inset: 0; z-index: 1140; background: rgba(15, 23, 42, 0.4); }
.pe-tb-sheet-backdrop[hidden] { display: none; }
@keyframes pe-tb-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (max-width: 768px) {
	body.pe-ws-editor .pe-tb-menu.pe-tb-menu--sheet {
		position: fixed; left: 0; right: 0; bottom: 0; top: auto;
		width: 100%; min-width: 0; max-width: none; max-height: 72vh; overflow-y: auto;
		margin: 0; padding: 8px 8px calc(10px + env(safe-area-inset-bottom, 0px));
		border-radius: 16px 16px 0 0; border-bottom: 0;
		box-shadow: 0 -10px 30px -6px rgba(15, 23, 42, 0.38);
		animation: pe-tb-sheet-up 0.18s ease-out;
	}
	body.pe-ws-editor .pe-tb-menu--sheet .pe-tb-menu-item { min-height: 52px; padding: 0 14px; gap: 14px; font-size: 1rem; border-radius: 10px; }
	body.pe-ws-editor .pe-tb-menu--sheet .pe-tb-menu-item svg { width: 22px; height: 22px; }
}

/* ---- Modal (stamp creator) ---------------------------------------------- */
.pe-modal-backdrop { position: fixed; inset: 0; z-index: 1500; background: rgba(15, 23, 42, 0.4); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; animation: pe-modal-fade 0.16s ease-out; }
.pe-modal { width: min(560px, 94vw); max-height: 90vh; overflow: auto; background: var(--pdfraj-paper, #fff); border-radius: 14px; box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.5); animation: pe-modal-pop 0.18s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes pe-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pe-modal-pop { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
.pe-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--pdfraj-border); }
.pe-modal-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--pdfraj-ink, #1f2933); }
.pe-modal-close { width: 30px; height: 30px; border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--pdfraj-muted, #999); cursor: pointer; border-radius: 6px; }
.pe-modal-close:hover { background: var(--pdfraj-surface-soft, #f1f1f1); color: var(--pdfraj-ink, #333); }
.pe-modal-body { padding: 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.25rem; }
.pe-modal-field { display: flex; flex-direction: column; gap: 0.3rem; }
.pe-modal-label { font-size: 0.78rem; color: var(--pdfraj-muted, #777); }
.pe-modal-input { padding: 0.45rem 0.6rem; border: 1px solid var(--pdfraj-border); border-radius: 8px; font: inherit; }
.pe-modal-date { padding: 0.45rem 0.6rem; border: 1px solid var(--pdfraj-border); border-radius: 8px; color: var(--pdfraj-ink, #333); font-size: 0.9rem; }
.pe-stamp-colors { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.pe-stamp-color { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.pe-stamp-color.is-active { border-color: var(--pdfraj-ink, #1f2933); box-shadow: 0 0 0 2px #fff inset; }
.pe-stamp-preview { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; min-height: 72px; padding: 0.5rem; }
.pe-stamp-preview-img { max-width: 100%; height: auto; }
.pe-modal-foot { padding: 1rem 1.25rem 1.25rem; display: flex; justify-content: center; }
.pe-modal-save { min-width: 140px; }
.pe-modal-btn { padding: 0.5rem 1.1rem; border: 1px solid var(--pdfraj-border); border-radius: 8px; background: #fff; cursor: pointer; font: inherit; font-size: 0.9rem; transition: background 0.15s ease, border-color 0.15s ease; }
/* Scope the grey hover to secondary buttons — otherwise its higher specificity
   (class + :hover) overrode the primary's purple, greying 'Create link' on hover. */
.pe-modal-btn:not(.pe-modal-btn--primary):hover { background: #f3f4f6; }
.pe-modal-btn--primary { background: var(--pdfraj-accent, #5247dc); color: #fff; border-color: var(--pdfraj-accent, #5247dc); }
.pe-modal-btn--primary:hover { background: #4238c4; border-color: #4238c4; }
/* Flatten-at-save confirm (#4) + signature framing note (#4). */
/* Modernised confirm dialog (leave-without-saving): no harsh header rule, a soft
   amber warning icon, roomier spacing, and a clear Stay(primary)/Leave(ghost) split. */
.pe-confirm-modal { max-width: 430px; border-radius: 18px; box-shadow: 0 30px 70px -22px rgba(15, 23, 42, 0.5), 0 6px 16px -8px rgba(15, 23, 42, 0.12); }
.pe-confirm-modal .pe-modal-head { border-bottom: 0; justify-content: flex-start; align-items: center; gap: 0.75rem; padding: 1.6rem 1.7rem 0.35rem; }
.pe-confirm-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(245, 158, 11, 0.13); color: #e08a00; }
.pe-confirm-icon svg { width: 22px; height: 22px; display: block; }
.pe-confirm-modal .pe-modal-title { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.01em; }
.pe-confirm-modal .pe-modal-body { display: block; padding: 0 1.7rem; }
.pe-confirm-text { font-size: 0.95rem; line-height: 1.6; color: var(--pdfraj-muted, #5b6472); margin: 0; padding-left: calc(40px + 0.75rem); }
.pe-confirm-modal .pe-modal-foot { justify-content: flex-end; gap: 0.5rem; padding: 1.5rem 1.7rem 1.6rem; }
.pe-confirm-modal .pe-modal-btn { padding: 0.6rem 1.3rem; border-radius: 11px; font-weight: 600; font-size: 0.92rem; }
.pe-confirm-modal .pe-modal-btn--primary { box-shadow: 0 10px 22px -8px rgba(82, 71, 220, 0.55); }
.pe-confirm-modal .pe-modal-btn:not(.pe-modal-btn--primary) { background: transparent; border-color: transparent; color: var(--pdfraj-muted, #6b7280); }
.pe-confirm-modal .pe-modal-btn:not(.pe-modal-btn--primary):hover { background: rgba(255, 50, 104, 0.08); color: var(--pdfraj-danger, #ff3268); }
.pe-sig-note { padding: 0 1.25rem 0.5rem; font-size: 0.78rem; color: var(--pdfraj-muted, #777); text-align: center; }

/* Link dialog (5B.7b) — single-column so the URL input is full-width (the shared
   2-col body is for the stamp modal's date/subject); themed to match the workspace. */
.pe-link-modal .pe-modal-body { grid-template-columns: 1fr; gap: 0; }
.pe-link-modal .pe-modal-foot { gap: 0.6rem; justify-content: flex-end; padding-top: 0.25rem; }
.pe-link-modal .pe-modal-field { gap: 0.4rem; }
.pe-link-modal .pe-modal-label { font-size: 0.82rem; font-weight: 600; color: var(--pdfraj-ink, #1f2933); }
.pe-link-modal .pe-modal-input { width: 100%; box-sizing: border-box; padding: 0.6rem 0.75rem; font-size: 0.95rem; border-radius: 10px; }
.pe-link-modal .pe-modal-input:focus { outline: none; border-color: var(--pdfraj-accent, #5247dc); box-shadow: 0 0 0 3px rgba(82, 71, 220, 0.15); }

/* Comment (sticky-note) editor — single-column body with a full-width note textarea. */
.pe-comment-modal { max-width: 460px; }
.pe-comment-modal .pe-modal-head { padding: 1.3rem 1.5rem 0.5rem; border-bottom: 0; }
.pe-comment-modal .pe-modal-body { display: block; padding: 0.4rem 1.5rem 0.6rem; }
.pe-comment-modal .pe-modal-foot { justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.5rem 1.4rem; }
.pe-comment-input { width: 100%; box-sizing: border-box; min-height: 96px; resize: vertical; padding: 0.7rem 0.85rem; font: inherit; font-size: 0.95rem; line-height: 1.5; color: var(--pdfraj-ink, #1f2933); border: 1px solid var(--pdfraj-line, #dfe3ea); border-radius: 11px; background: var(--pdfraj-surface-soft, #f8f9fc); }
.pe-comment-input::placeholder { color: var(--pdfraj-muted, #9aa1ad); }
.pe-comment-input:focus { outline: none; border-color: var(--pdfraj-accent, #5247dc); background: var(--pdfraj-paper, #fff); box-shadow: 0 0 0 3px rgba(82, 71, 220, 0.15); }
/* Segmented URL / Email / Page control — pill track matching the workspace segments. */
.pe-link-types { display: flex; gap: 4px; margin-bottom: 0.9rem; padding: 4px; border: 0; border-radius: 12px; background: var(--pdfraj-surface-soft, #f1f2f7); overflow: hidden; }
.pe-link-type { flex: 1; padding: 0.5rem 0.4rem; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--pdfraj-muted, #667085); transition: background 0.15s ease, color 0.15s ease; }
.pe-link-type:hover { color: var(--pdfraj-ink, #1f2933); }
.pe-link-type.is-active { background: var(--pdfraj-accent, #5247dc); color: #fff; box-shadow: 0 2px 6px rgba(82, 71, 220, 0.25); }
.pe-link-error { color: #c62828; font-size: 0.8rem; margin-top: 0.5rem; }
.pe-link-error[hidden] { display: none; }

/* Existing-link outlines (5B.7b): read-only display. */
.pe-link-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.pe-existing-link { position: absolute; box-sizing: border-box; border: 1px solid rgba(31, 81, 181, 0.55); background: rgba(31, 81, 181, 0.05); border-radius: 2px; }

/* 6.2-A: existing-image hit-regions. Interactive ONLY in the dedicated "Edit existing
 * image" mode (.pe-tool-editimage) so they never intercept clicks meant for text or
 * objects in Select mode — previously gated to .pe-forms-live (select), which let a
 * background/watermark image's region swallow text clicks and pop the Replace/Delete bar. */
/* Delete covers sit BELOW the konva stage (z-index 1); clickable hit-regions ABOVE it (z-index 3). */
.pe-image-cover-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.pe-image-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.pe-existing-image { position: absolute; box-sizing: border-box; border: 1px dashed transparent; border-radius: 2px; pointer-events: none; transition: border-color 0.1s, background-color 0.1s; }
/* Only Edit IMAGE mode makes the image regions interactive. In Edit TEXT the overlays
   stay pointer-events:none (visual only) so a click passes THROUGH to the editing stage
   and real text sitting over a band (invoice Quantity/Rate/Balance Due) is editable; the
   stage's _imageAt hit-test shows the "part of an image" hint only where there is no text. */
.pe-canvas.pe-tool-editimage .pe-existing-image { pointer-events: auto; cursor: pointer; border-color: rgba(82, 71, 220, 0.4); }
.pe-canvas.pe-tool-editimage .pe-existing-image:hover { border-color: var(--pdfraj-accent, #5247dc); background-color: rgba(82, 71, 220, 0.1); }
.pe-existing-image.is-selected { border: 2px solid var(--pdfraj-accent, #5247dc); background-color: rgba(82, 71, 220, 0.12); }
/* Pending deletion: cover the image with a clean, borderless white so it reads as
 * removed (matching a light page background) until save — no placeholder box. */
.pe-canvas .pe-existing-image.is-removed { background-color: #fff; border: none; pointer-events: none; cursor: default; }

/* 6.2-A: existing-image action popover (Sejda-style Delete / Cancel). */
.pe-image-actions {
	position: absolute; z-index: 1100; display: flex; align-items: center; gap: 4px;
	padding: 4px; background: var(--pdfraj-paper, #fff); border: 1px solid var(--pdfraj-border);
	border-radius: 9px; box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(15, 23, 42, 0.08);
}
/* Shared round icon button for the selection action popovers (image / annotation /
   comment). Icon glyph + hover tooltip instead of a text label (Smallpdf-style). */
.pe-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 7px; background: transparent; color: var(--pdfraj-ink, #333); cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.pe-iconbtn svg { width: 18px; height: 18px; display: block; }
.pe-iconbtn:hover { background: var(--pdfraj-surface-soft, #f1f1f1); }
.pe-iconbtn:disabled { opacity: 0.55; cursor: progress; }
/* Accent (primary) actions: move/resize, replace, recognize, edit. */
.pe-imgact-resize, .pe-imgact-replace, .pe-imgact-ocr, .pe-annot-edit { color: var(--pdfraj-accent, #5247dc); }
.pe-imgact-resize:hover, .pe-imgact-replace:hover, .pe-imgact-ocr:hover, .pe-annot-edit:hover { background: rgba(82, 71, 220, 0.1); }
.pe-imgact-ocr:disabled { opacity: 0.55; cursor: progress; }
/* Destructive actions: delete / unlink. */
.pe-imgact-del, .pe-annot-del { color: var(--pdfraj-danger, #ff3268); }
.pe-imgact-del:hover, .pe-annot-del:hover { background: rgba(255, 50, 104, 0.1); }

/* 5B: existing markup annotations redrawn as selectable overlays (highlight / square /
 * free-text / comment). The layer is PURELY VISUAL — it never captures pointer events,
 * even in Select mode. If the boxes were interactive they would sit above the Konva
 * editing stage (z:4 over z:2) and steal drags meant for text/shapes underneath them.
 * Selection is handled by the Konva stage's empty-click hit-test (_annotAt) instead, so
 * the editing layer always wins the pointer and annotation clicks still register. */
.pe-annot-layer { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.pe-annot { position: absolute; box-sizing: border-box; pointer-events: none; }
.pe-annot.is-selected { outline: 2px solid var(--pdfraj-accent, #5247dc); outline-offset: 1px; }
/* Highlight fills render as .pe-annothl direct children of .pe-page (see above) so the
   multiply blend can reach the page text; they are NOT drawn inside this annot layer. */
.pe-annot-square { background: transparent; }
.pe-annot-freetext { overflow: hidden; line-height: 1.15; white-space: pre-wrap; word-break: break-word; }
.pe-annot-note svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.3)); }
/* Link region: invisible until selected (mirrors the page's clean read); the dashed
 * accent box only appears when the Konva hit-test selects it. */
.pe-annot-link { background: transparent; }
.pe-annot-link.is-selected { outline: 2px dashed #1f51b5; background: rgba(31, 81, 181, 0.06); }
/* Current URL shown in the link action bar. */
.pe-annot-url { max-width: 210px; padding: 0 4px; color: var(--pdfraj-muted, #6b7280); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Annotation action popover (recolour swatches for highlights + Delete / Cancel). */
.pe-annot-actions {
	position: absolute; z-index: 1100; display: flex; align-items: center; gap: 5px;
	padding: 5px 6px; background: var(--pdfraj-paper, #fff); border: 1px solid var(--pdfraj-border);
	border-radius: 9px; box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(15, 23, 42, 0.08);
}
.pe-annot-swatch { width: 18px; height: 18px; padding: 0; border-radius: 50%; cursor: pointer; border: 1px solid rgba(15, 23, 42, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); transition: transform 0.08s ease; }
.pe-annot-swatch:hover { transform: scale(1.12); }
.pe-annot-sep { width: 1px; height: 20px; background: var(--pdfraj-border, #d4d8df); margin: 0 2px; }
/* Color swatch */
/* #4 Faster colours: preset row + native custom picker, grouped. */
.pe-fb-colorgroup { display: inline-flex; align-items: center; gap: 5px; }
.pe-fb-presets { display: inline-flex; align-items: center; gap: 3px; }
.pe-fb-preset {
	width: 18px; height: 18px; padding: 0; border-radius: 50%; cursor: pointer;
	border: 1px solid rgba(15, 23, 42, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
	transition: transform 0.08s ease, box-shadow 0.12s ease;
}
.pe-fb-preset:hover { transform: scale(1.18); }
.pe-fb-preset.is-active { box-shadow: 0 0 0 2px var(--pdfraj-paper, #fff), 0 0 0 4px var(--pdfraj-accent, #5247dc); }
.pe-fb-colorwrap { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; cursor: pointer; }
.pe-fb-colorwrap:hover { background: var(--pdfraj-surface-soft, #f1f1f1); }
.pe-floatbar .pe-fb-color { width: 20px; height: 20px; padding: 0; border: 1px solid var(--pdfraj-border); border-radius: 50%; background: none; cursor: pointer; overflow: hidden; }
.pe-floatbar .pe-fb-color::-webkit-color-swatch-wrapper { padding: 0; }
.pe-floatbar .pe-fb-color::-webkit-color-swatch { border: none; border-radius: 50%; }

/* The in-place edit textarea (appended to <body>, positioned over the node). */
/* Seamless inline editor: transparent over the cover so you see the text with
 * a blinking caret (like Sejda) — no box, no border. */
.pe-text-edit {
	position: absolute; z-index: 1000; margin: 0; padding: 0;
	/* Smallpdf-style edit box: a clear accent outline (drawn OUTSIDE the text via
	   outline-offset so it never shifts the glyphs / breaks WYSIWYG alignment), an
	   opaque-ish backing so the text you're editing reads cleanly over whatever is
	   underneath, and a soft shadow so the box is obviously "the thing you're editing"
	   and the caret is easy to find. overflow:visible lets the box grow to hold a
	   resized word (word-break wraps it INSIDE the box instead of clipping). */
	border: none; outline: 1px solid var(--pdfraj-accent, #5247dc); outline-offset: 2px;
	border-radius: 3px; resize: none; overflow: visible;
	white-space: pre-wrap; word-break: break-word;
	/* Opaque backing: while editing, a resized word sits on a solid box that fully
	   covers whatever is underneath, so it never reads as text-over-text. Kept white
	   (matches the covered original) but WITHOUT a drop-shadow, so on a light page the
	   box blends in like Smallpdf instead of reading as a floating white card. */
	background: #ffffff;
	line-height: 1.2; caret-color: var(--pdfraj-accent, #5247dc);
}
/* Existing PDF text (Sejda-parity): a DASHED outline that matches the handle-less selection
   outline, so entering edit shows no "box" / resize-handle change and no apparent shrink. New
   text (the Text tool) keeps the solid Smallpdf-style box above. */
.pe-text-edit--pdf { outline-style: dashed; }
/* Phase 2 rich-text: read-only styled overlay shown over a partial-styled op's transparent
   Konva proxy. Positioned to match the proxy exactly (same top-left / width / font-size). */
.pe-richtext {
	position: absolute; z-index: 3; pointer-events: none; margin: 0; padding: 0;
	white-space: pre-wrap; word-break: break-word; line-height: 1.2;
}
.pe-richtext span { white-space: pre-wrap; }

/* Selected-text properties. */
.pe-prop-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0 0 0.7rem; }
.pe-prop-row label { font-size: 0.82rem; color: var(--pdfraj-muted, #777); }
.pe-prop-row input[type="number"] { width: 76px; padding: 0.3rem 0.4rem; border: 1px solid var(--pdfraj-border); border-radius: 6px; font: inherit; }
.pe-prop-row input[type="color"] { width: 40px; height: 30px; padding: 0; border: 1px solid var(--pdfraj-border); border-radius: 6px; background: none; cursor: pointer; }
.pe-prop-row select.pe-prop-font { padding: 0.3rem 0.4rem; border: 1px solid var(--pdfraj-border); border-radius: 6px; font: inherit; background: #fff; cursor: pointer; }
.pe-seg { display: inline-flex; border: 1px solid var(--pdfraj-border); border-radius: 6px; overflow: hidden; }
.pe-seg-btn {
	display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 28px;
	padding: 0 0.3rem; border: none; border-right: 1px solid var(--pdfraj-border);
	background: #fff; color: var(--pdfraj-ink, #333); cursor: pointer; font: inherit; font-size: 0.9rem;
}
.pe-seg-btn:last-child { border-right: none; }
.pe-seg-btn:hover { background: var(--pdfraj-surface-soft, #f1f1f1); }
.pe-seg-btn.is-active { background: var(--pdfraj-accent-soft, rgba(82,71,220,0.14)); color: var(--pdfraj-accent, #5247dc); }
.pe-seg-btn svg { width: 16px; height: 16px; }
.pe-prop-dup, .pe-prop-del {
	width: 100%; margin: 0.2rem 0 0.5rem; padding: 0.45rem; font: inherit; font-size: 0.85rem; cursor: pointer;
	background: #fff; border: 1px solid var(--pdfraj-border); border-radius: 8px; color: var(--pdfraj-ink, #333);
}
.pe-prop-dup:hover { border-color: var(--pdfraj-accent, #5247dc); color: var(--pdfraj-accent, #5247dc); }
.pe-prop-del { color: var(--pdfraj-danger, #ff3268); margin-bottom: 0.9rem; }
.pe-prop-del:hover { border-color: var(--pdfraj-danger, #ff3268); background: rgba(255, 50, 104, 0.06); }

/* Narrow screens: collapse the side panels (desktop-first per the 5B plan). */
@media (max-width: 860px) {
	.pe-rail { flex-basis: 112px; }
	.pe-props { display: none; }
}

/* ---- Signature dialog (5B.3c): tabbed Draw / Type / Upload. Deliberately its
   own look vs the stamp form - an identity action, not a page annotation. ---- */
.pe-sig-modal { width: min(780px, 95vw); }
/* Keep the action buttons reachable even when the modal is taller than the
   viewport (the roomier pad + saved-strip can push it past 90vh). */
.pe-sig-modal .pe-modal-foot { position: sticky; bottom: 0; z-index: 2; background: var(--pdfraj-paper, #fff); border-top: 1px solid var(--pdfraj-border); border-radius: 0 0 14px 14px; }
.pe-sig-head { align-items: flex-start; }
.pe-sig-titlewrap { display: flex; flex-direction: column; gap: 2px; }
.pe-sig-sub { margin: 0; font-size: 0.8rem; color: var(--pdfraj-muted, #777); }
.pe-sig-tabs { display: flex; gap: 0.25rem; padding: 0 1.25rem; border-bottom: 1px solid var(--pdfraj-border); }
.pe-sig-tab { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.9rem; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--pdfraj-muted, #777); }
.pe-sig-tab svg { width: 16px; height: 16px; }
.pe-sig-tab:hover { color: var(--pdfraj-ink, #1f2933); }
.pe-sig-tab.is-active { color: var(--pdfraj-ink, #1f2933); border-bottom-color: var(--pdfraj-accent, #5247dc); }
.pe-sig-body { display: block; padding: 1.25rem; }
.pe-sig-panel[hidden] { display: none; }
.pe-sig-pad-wrap { position: relative; width: 700px; max-width: 100%; margin: 0 auto; border: 1px solid var(--pdfraj-border); border-radius: 14px; background: linear-gradient(180deg, #fcfcfe 0%, #fff 42%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 10px -6px rgba(15,23,42,0.18); overflow: hidden; }
.pe-sig-pad { display: block; cursor: crosshair; touch-action: none; }
/* DocuSign-style sign-here baseline: dashed rule with an "×" cue at its start. */
.pe-sig-baseline { position: absolute; left: 34px; right: 34px; bottom: 44px; border-bottom: 1.5px dashed #c7ccd6; pointer-events: none; }
.pe-sig-baseline::before { content: '\00D7'; position: absolute; left: -20px; bottom: -9px; font-size: 15px; font-weight: 700; line-height: 1; color: var(--pdfraj-accent, #5247dc); }
.pe-sig-pad-tools { display: flex; align-items: center; gap: 0.5rem; width: 700px; max-width: 100%; margin: 0.7rem auto 0; }
.pe-sig-padbtn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.44rem 0.85rem; border: 1px solid var(--pdfraj-border); border-radius: 9px; background: #fff; cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--pdfraj-ink, #333); transition: background 0.14s ease, border-color 0.14s ease; }
.pe-sig-padbtn:hover { background: var(--pdfraj-surface-soft, #f5f6fa); border-color: #cfd4de; }
.pe-sig-padbtn svg { width: 15px; height: 15px; }
.pe-sig-colors { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.pe-sig-color { width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: 0 1px 3px rgba(15,23,42,0.2); transition: transform 0.1s ease; }
.pe-sig-color:hover { transform: scale(1.12); }
.pe-sig-color.is-active { border-color: var(--pdfraj-ink, #1f2933); box-shadow: 0 0 0 2px #fff inset; }
/* Custom ink-colour picker (Sejda-style "+"): rainbow until a colour is chosen. */
.pe-sig-color-custom { background: conic-gradient(red, #ff0, #0f0, #0ff, #00f, #f0f, red); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(15,23,42,0.2); }
.pe-sig-color-custom > span { width: 14px; height: 14px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; color: #333; }
.pe-sig-color-custom.is-picked > span { display: none; }
.pe-sig-hint { margin: 0.7rem 0 0; font-size: 0.78rem; color: var(--pdfraj-muted, #999); text-align: center; }
/* Camera signature: live webcam preview -> captured/thresholded result. */
.pe-sig-cam-stage { position: relative; width: 700px; max-width: 100%; height: 300px; margin: 0 auto; border: 1px solid var(--pdfraj-border); border-radius: 14px; background: #0f1420; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pe-sig-cam-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-sig-cam-result { max-width: 100%; max-height: 100%; background: #fff; box-shadow: 0 2px 14px -4px rgba(0,0,0,0.5); border-radius: 4px; }
.pe-sig-cam-video[hidden], .pe-sig-cam-result[hidden] { display: none; }
.pe-sig-cam-guide { position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 14px; font-size: 0.8rem; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,0.6), transparent); text-align: center; pointer-events: none; }
.pe-sig-cam-msg { width: 700px; max-width: 100%; min-height: 120px; display: flex; align-items: center; justify-content: center; margin: 0 auto; padding: 1.4rem; text-align: center; color: var(--pdfraj-muted, #667085); font-size: 0.92rem; line-height: 1.5; border: 1px dashed var(--pdfraj-border); border-radius: 14px; }
.pe-sig-cam-tools { display: flex; align-items: center; gap: 0.6rem; width: 700px; max-width: 100%; margin: 0.7rem auto 0; }
.pe-sig-cam-cap { color: var(--pdfraj-accent, #5247dc); border-color: var(--pdfraj-accent, #5247dc); }
.pe-sig-cam-thr { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--pdfraj-muted, #667085); margin-left: auto; }
.pe-sig-cam-thr input[type=range] { width: 130px; accent-color: var(--pdfraj-accent, #5247dc); }
.pe-sig-type-input { width: 100%; font-size: 1rem; margin-bottom: 0.9rem; }
.pe-sig-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.pe-sig-style { display: flex; align-items: center; justify-content: center; height: 64px; padding: 0 0.6rem; border: 1px solid var(--pdfraj-border); border-radius: 10px; background: #fff; cursor: pointer; font-size: 1.7rem; line-height: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--pdfraj-ink, #1f2933); }
.pe-sig-style.is-active { border-color: var(--pdfraj-accent, #5247dc); box-shadow: 0 0 0 1px var(--pdfraj-accent, #5247dc); }
.pe-sig-type .pe-sig-colors { margin: 1rem auto 0; justify-content: center; }
.pe-sig-upload { text-align: center; padding: 0.5rem 0; }
.pe-sig-upbtn { display: inline-block; padding: 0.6rem 1.1rem; border: 1px solid var(--pdfraj-border); border-radius: 8px; background: #fff; cursor: pointer; font: inherit; font-weight: 600; color: var(--pdfraj-ink, #333); }
.pe-sig-upbtn:hover { border-color: var(--pdfraj-accent, #5247dc); color: var(--pdfraj-accent, #5247dc); }
.pe-sig-upreview { margin-top: 1rem; padding: 1rem; display: flex; justify-content: center; align-items: center; min-height: 90px; border: 1px dashed var(--pdfraj-border); border-radius: 10px; background-color: #fff; background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.pe-sig-upreview-img { max-width: 100%; max-height: 170px; }
.pe-sig-foot { justify-content: flex-end; gap: 0.6rem; }
.pe-sig-cancel { padding: 0.55rem 1rem; border: 1px solid var(--pdfraj-border); border-radius: 8px; background: #fff; cursor: pointer; font: inherit; color: var(--pdfraj-ink, #333); }
.pe-sig-cancel:hover { background: var(--pdfraj-surface-soft, #f1f1f1); }
.pe-sig-place { min-width: 150px; }
/* Distinct disabled state — clear grey, not a faded green that still reads enabled. */
.pe-sig-place:disabled, .pe-sig-place:disabled:hover { opacity: 1; background: var(--pdfraj-surface-soft, #eef1f4); color: var(--pdfraj-muted, #9aa3ad); border-color: var(--pdfraj-border, #d8dde3); box-shadow: none; cursor: not-allowed; }

/* Saved signatures (6.1 #3): one-click reuse strip + save-for-reuse toggle. */
.pe-sig-saved { padding: 0.85rem 1.25rem 0; }
.pe-sig-saved[hidden] { display: none; }
.pe-sig-saved-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--pdfraj-muted, #777); margin-bottom: 0.45rem; }
.pe-sig-saved-hint { text-transform: none; letter-spacing: 0; margin-left: 0.4rem; font-weight: 400; opacity: 0.8; }
.pe-sig-saved-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pe-sig-saved-item { position: relative; }
.pe-sig-saved-use { display: flex; align-items: center; justify-content: center; height: 46px; min-width: 76px; max-width: 150px; padding: 0.2rem 0.5rem; background: #fff; border: 1px solid var(--pdfraj-border); border-radius: 8px; cursor: pointer; }
.pe-sig-saved-use:hover { border-color: var(--pdfraj-accent, #5247dc); box-shadow: 0 0 0 2px var(--pdfraj-accent-soft, rgba(82,71,220,0.15)); }
.pe-sig-saved-img { display: block; max-height: 36px; max-width: 134px; width: auto; height: auto; }
.pe-sig-saved-del { position: absolute; top: -7px; right: -7px; width: 19px; height: 19px; border-radius: 50%; border: 1px solid #fff; background: var(--pdfraj-muted, #6b7280); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0; }
.pe-sig-saved-item:hover .pe-sig-saved-del, .pe-sig-saved-item:focus-within .pe-sig-saved-del { display: flex; }
.pe-sig-saved-del:hover { background: var(--pdfraj-danger, #ff3268); }
.pe-sig-savetoggle { display: flex; align-items: center; gap: 0.45rem; padding: 0 1.25rem 0.5rem; font-size: 0.82rem; color: var(--pdfraj-ink, #374151); cursor: pointer; }
.pe-sig-savetoggle input { accent-color: var(--pdfraj-accent, #5247dc); margin: 0; }

/* Rail drawer toggle + backdrop are mobile-only (the rail is always visible on
 * desktop, so the toggle group / backdrop stay hidden there). */
.pe-tb-railgroup { display: none; }
.pe-rail-backdrop { display: none; }

/* ---- Result mode (Done panel showing = .pe-ws-comm) ------------------------
 * The editor becomes a read-only PREVIEW of the edited document: lock the page,
 * hide the editing toolbar + per-thumb page ops, and dismiss any floating format
 * bar. Zoom / page-nav (bottom pill) and thumbnail navigation still work. The Done
 * panel's "Re-edit" removes .pe-ws-comm to return to editing (state is intact). */
body.pe-ws-editor .pdfraj-app.pe-ws-comm .pe-toolbar,
body.pe-ws-editor .pdfraj-app.pe-ws-comm .pe-rail,
body.pe-ws-editor .pdfraj-app.pe-ws-comm .pe-form-banner,
body.pe-ws-editor .pdfraj-app.pe-ws-comm .pe-tool-hint { display: none; }
body.pe-ws-editor .pdfraj-app.pe-ws-comm .pe-pages { pointer-events: none; }
body.pe-ws-editor .pdfraj-app.pe-ws-comm .pe-thumb-tools,
body.pe-ws-editor .pdfraj-app.pe-ws-comm .pe-thumb-ins { display: none; }
body:has(.pdfraj-app.pe-ws-comm) .pe-floatbar,
body:has(.pdfraj-app.pe-ws-comm) .pe-image-actions { display: none; }
/* Re-edit button in the Done panel: brand-accent so it reads as the primary
 * "keep working on this document" action (Start over stays neutral below it). */
.pe-ws-reedit { color: var(--pdfraj-accent, #5247dc); border-color: var(--pdfraj-accent, #5247dc); margin-bottom: 8px; }
.pe-ws-reedit:hover { background: var(--pdfraj-accent-soft, #eeedfc); }

/* ---- Mobile editor fixes (placed at EOF so they win the cascade over the base
 * rules above). Phones: touch (no hover) + narrow viewport. -------------- */
@media (max-width: 768px) {
	/* The floating format bar has many controls — wrap it and keep it inside the
	 * viewport instead of running off the right edge. */
	.pe-floatbar { flex-wrap: wrap; max-width: calc(100vw - 12px); }
	/* Thumbnail rail = a slide-in DRAWER (page picker), toggled from the toolbar's
	 * grid button; the page fills the width otherwise. */
	.pe-body { position: relative; }
	.pe-rail {
		display: flex; position: absolute; top: 0; left: 0; bottom: 0; z-index: 50;
		width: 150px; transform: translateX(-100%); transition: transform 0.22s ease;
		box-shadow: 2px 0 16px rgba(15, 23, 42, 0.18);
	}
	.pe-editor.pe-rail-open .pe-rail { transform: translateX(0); }
	.pe-rail-backdrop {
		display: block; position: absolute; inset: 0; z-index: 45;
		background: rgba(15, 23, 42, 0.35); opacity: 0; pointer-events: none; transition: opacity 0.22s;
	}
	.pe-editor.pe-rail-open .pe-rail-backdrop { opacity: 1; pointer-events: auto; }
	.pe-tb-railgroup { display: flex; }
	/* Bottom nav pill: keep it a single-row slim pill (wrapping made the 999px radius
	 * read as a flat box on some phones), sit it just above the action bar, and
	 * compact the controls so they fit one row. */
	.pe-navpill { max-width: calc(100vw - 16px); flex-wrap: nowrap; bottom: 58px; padding: 0.22rem 0.4rem; }
	/* The two view controls are desktop refinements and the pill has no room for
	 * them here: at 38px touch targets the full row is ~420px against a 344px cap
	 * on a 360px phone, and nowrap would squash the rest. Full screen means little
	 * on a phone that is already one, and a 6px snap tolerance is a pointer
	 * affordance, not a finger one. Snapping itself stays ON — it helps more with
	 * a fingertip, not less; only its toggle goes. */
	.pe-navpill .pe-np-btn.is-viewctl,
	.pe-navpill .pe-np-sep.is-viewctl { display: none; }
	/* Bigger touch targets on the nav pill + per-thumbnail tools (#3). */
	.pe-np-btn { width: 38px; height: 38px; }
	.pe-np-btn svg { width: 19px; height: 19px; }
	.pe-np-label { padding: 0 0.3rem; font-size: 0.78rem; }
	.pe-np-zoom { min-width: auto; padding: 0 0.35rem; font-size: 0.76rem; }
	.pe-np-sep { margin: 0 0.18rem; }
	.pe-tt-btn { width: 36px; height: 36px; }
	.pe-tt-btn svg { width: 18px; height: 18px; }
	.pe-thumb-ins-btn { width: 28px; height: 28px; }
	/* Download / Share / Finish become a fixed bottom action bar (Smallpdf-style), so
	 * the top toolbar carries only the tools and doesn't look cramped. (The group now
	 * lives in the doc-bar on desktop; position:fixed is viewport-relative so it still
	 * pulls out to a bottom bar on mobile regardless of its parent.) */
	.pe-ws-doc-actions {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0;
		padding: 8px 12px; gap: 8px; border-left: none; border-top: 1px solid var(--pdfraj-border);
		background: var(--pdfraj-paper, #fff); box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
	}
	.pe-ws-doc-actions .pe-save-state { display: none; }
	.pe-ws-doc-actions .pe-tb-action { flex: 1 1 0; justify-content: center; height: 44px; }
	/* Search bar: keep it compact on mobile so it doesn't overflow the row. */
	.pe-search-input { width: 110px; }
	/* Tighter gutters + reserve room so content isn't hidden behind the fixed bar. */
	.pe-canvas { padding: 6px 8px 64px; }
}

/* ---- Local debug panel (added to body only on .local / localhost hosts) ---- */
.pe-debug{position:fixed;top:96px;right:0;width:360px;max-height:74vh;z-index:99999;display:flex;flex-direction:column;
  background:#0f172a;color:#cbd5e1;font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
  border:1px solid #1e293b;border-right:0;border-radius:8px 0 0 8px;box-shadow:-2px 0 16px rgba(2,6,23,.35)}
.pe-debug-head{display:flex;align-items:center;gap:6px;padding:6px 10px;background:#1e293b;border-radius:8px 0 0 0}
.pe-debug-title{flex:1;font-weight:700;letter-spacing:.02em;color:#e2e8f0}
.pe-debug-btn{background:#334155;color:#e2e8f0;border:0;border-radius:4px;padding:2px 8px;cursor:pointer;font:600 10px ui-monospace,monospace}
.pe-debug-btn:hover{background:#475569}
.pe-debug-body{overflow-y:auto;padding:6px 10px}
.pe-debug.pe-debug-collapsed .pe-debug-body{display:none}
.pe-debug-line{display:flex;align-items:flex-start;gap:6px;padding:2px 0;border-bottom:1px solid rgba(148,163,184,.08)}
.pe-debug-sw{flex:0 0 auto;width:11px;height:11px;margin-top:2px;border-radius:2px;border:1px solid rgba(255,255,255,.35)}
.pe-debug-txt{flex:1;white-space:pre-wrap;word-break:break-word}

/* --- Permission lock: a PDF whose owner disallowed editing (portal #31) -----
 * The document opens, renders and scrolls; only the controls that would CHANGE
 * it are put out of reach until the owner password is supplied.
 *
 * Presentation only. _setTool is what actually refuses a tool, because the
 * keyboard shortcuts never touch these buttons — dimming alone would leave
 * pressing "t" working perfectly. */
.pe-perm-locked .pe-tb-tools > *:not(.pe-tb-keep),
.pe-perm-locked .pe-tb-page {
	opacity: 0.4;
	pointer-events: none;
}
/* The banner carries the reason, so it must not be dismissible into nothing
 * while the lock is still on. */
.pe-perm-locked .pe-form-banner-x { display: none; }

.pe-perm-unlock { flex: none; white-space: nowrap; }

.pe-perm-input {
	display: block;
	width: 100%;
	margin-top: 0.75rem;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--pdfraj-bd, #d8dae0);
	border-radius: 6px;
	font: inherit;
	color: inherit;
	background: #fff;
}
.pe-perm-input:focus {
	outline: none;
	border-color: var(--pdfraj-accent, #5247dc);
	box-shadow: 0 0 0 3px rgba(82, 71, 220, 0.15);
}

/* Replayed by _bumpPermBanner when a locked document refuses a tool, so the
 * click has a visible answer instead of appearing to do nothing. */
@keyframes pe-perm-bump {
	0%   { transform: translateX(0); }
	25%  { transform: translateX(-3px); }
	75%  { transform: translateX(3px); }
	100% { transform: translateX(0); }
}
.pe-form-banner--bump { animation: pe-perm-bump 0.22s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) {
	.pe-form-banner--bump { animation: none; }
}

/* ============================================================================
 * MOBILE UI BATCH M2 -- editor toolbar fold (2026-10-12)
 * The mobile toolbar LAYOUT (icon-only, 44px touch, pinned chrome + scrolling tool
 * group) lives in pdfraj-workspace-shell.css (loaded last, so it owns .pe-toolbar).
 * This block only drives the FOLD: on phones the tail tools (Hand / Link / Redact,
 * and Sign in the full editor) leave the top row and appear as items inside the
 * Insert / Annotate bottom-sheet dropdowns, so fewer top-level tools need to fit.
 * Desktop (>=769px) is untouched: those stay standalone buttons and the folded-in
 * duplicate menu items stay hidden. */
@media (max-width: 768px) {
	/* tail tools fold into the Insert / Annotate dropdowns -> hide the standalone
	   top-level buttons. Sign only hides in the FULL editor (it is the primary
	   action in sign mode, where the dropdowns are hidden). */
	.pe-toolbar .pe-tb-mhide { display: none !important; }
	body:not(.pe-sign) .pe-toolbar .pe-tb-mhide-editor { display: none !important; }
	/* the folded-in items are shown inside their dropdowns on mobile */
	.pe-tb-menu .pe-tb-menu-item.pe-tb-mi-mobile { display: flex; }
}
@media (min-width: 769px) {
	.pe-tb-menu .pe-tb-menu-item.pe-tb-mi-mobile { display: none; }
}

/* Engine credit in the editing view. The landing's "Powered by … Engine" row
 * lives in .pe-landing, which is hidden once a file is open, so the same credit is
 * emitted again outside it and shown only while editing -- a muted, fixed line at
 * the bottom-right, clear of the centred floating page nav. pointer-events stay off
 * the container (so it never blocks the canvas) but on for the "What's new" link. */
.pe-ed-credit { display: none; }
body.pdfraj-editing.pe-ws-editor .pe-ed-credit {
	display: block;
	position: fixed;
	right: 16px;
	bottom: 10px;
	z-index: 6;
	pointer-events: none;
}
body.pdfraj-editing.pe-ws-editor .pe-ed-credit .pdfraj-powered-by {
	margin: 0;
	opacity: 0.6;
	pointer-events: auto;
}
@media (max-width: 768px) {
	/* On a phone the editor chrome is tight; keep the credit on the landing only. */
	body.pdfraj-editing.pe-ws-editor .pe-ed-credit { display: none; }
}