/*
 * 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.
 */
/*
 * PDFRaj Workspace Shell — Phase 8E (Smallpdf-parity workspace).
 * Minimal top bar + icon left rail + right tool panel, layered onto the editor.
 * Additive only; the editor's own layout is untouched. The same-slug tool pages
 * carry body.pdfraj-ws-v2 (set by the shell JS) — all the "takeover" chrome
 * (top bar, hidden site header, centered preview) is scoped to that so the
 * dedicated /pdfraj/editor page is unaffected.
 */

/* Admin-bar offset: while logged in WP pins a 32px bar at top:0 that our fixed
 * chrome must clear. Real visitors have no bar, so the offset collapses to 0. */
/* --pe-ws-bar is now the real site-header height (it serves as the top bar). */
body.pdfraj-ws-v2 { --pe-ws-top: 0px; --pe-ws-bar: calc(var(--ps-shell-height, 60px) + 1px); --pe-ws-doc: 46px; }
body.admin-bar.pdfraj-ws-v2 { --pe-ws-top: 32px; }

/* Once a file is open, the workspace fills the viewport edge-to-edge (rail at the
 * far left, panels full-width), so the site header must go full-width too -- the
 * marketing header's centred `.wrap` (max-width + margin-inline:auto) left the
 * logo indented by ~100px with empty space to its left. Flush the row to the
 * window with a small gutter so the logo sits top-left. The tool LANDING (no file
 * yet) keeps the centred marketing header. Both themes; a no-op on mobile, where
 * the viewport is already narrower than the max-width.
 *
 * The dedicated PDF Editor (/editor/) is a SEPARATE template with no
 * `pdfraj-ws-v2` class, so the `ws-v2` selector skipped it and its logo stayed
 * indented at ~82px once a file was open. Its editing state is
 * `body.pdfraj-editing.pe-ws-editor`, so flush that header-row too. */
body.pdfraj-ws-v2:has( .pdfraj-app.pdfraj-has-files ) .header .header-row,
body.pdfraj-editing.pe-ws-editor .header .header-row {
	max-width: none; margin-inline: 0; padding-inline: 20px;
}

/* ---- Same-slug takeover: drop the marketing + site chrome --------------- */
/* The editing-mode rules that lift the workspace to full-viewport and hide the
 * v2 SEO landing. Scoped to .pdfraj-tool-v2 (doc-op tool pages). */
body.pdfraj-editing .pdfraj-tool-v2 .htool-hd,
body.pdfraj-editing .pdfraj-tool-v2 .h-usps,
body.pdfraj-editing .pdfraj-tool-v2 .tbar,
body.pdfraj-editing .pdfraj-tool-v2 .sec,
body.pdfraj-editing .pdfraj-tool-v2 .cta-band,
body.pdfraj-editing .pdfraj-tool-v2 .related-grid,
body.pdfraj-editing .pdfraj-tool-v2 .pe-footer,
/* The directory redesign renamed the site footer `footer.ft` -> `footer.foot2`
 * but this hide list was never updated, so the marketing footer leaked back into
 * every workspace: it sat below the editor (the "white space" + scroll under Sign)
 * and, when a tool mounts no canvas (e.g. Fill & Sign on a PDF with no form
 * fields), it filled the whole workspace area. Hide both footer classes. */
body.pdfraj-editing .foot2,
body.pdfraj-editing footer.ft { display: none !important; }
/* Phase 10: same-slug v2 tool page in the workspace — hide the whole SEO landing
 * chrome (content sections, trust strip, hero heading + USP pills) so only the
 * workspace (page-studio grid / editor + rail) shows. The page-studio view
 * mounts INLINE (no fixed overlay), so these siblings must be display:none. */
body.pdfraj-editing .pdfraj-tool-v2 > section:not(.hero),
body.pdfraj-editing .pdfraj-tool-v2 > .tbar,
body.pdfraj-editing .pdfraj-tool-v2 .htool-hd,
body.pdfraj-editing .pdfraj-tool-v2 .h-usps { display: none !important; }
body.pdfraj-editing .pdfraj-tool-v2 .hero { padding: 0 !important; background: none !important; }
body.pdfraj-editing .pdfraj-tool-v2 .hero .wrap,
body.pdfraj-editing .pdfraj-tool-v2 .hero-inner { max-width: none !important; margin: 0 !important; padding: 0 !important; }
/* Keep the FULL site header on top, but make it fixed (it is normally sticky)
 * so it leaves the flow — the workspace's fixed rail/side/doc-bar then offset
 * below it via --pe-ws-bar (= header height). The redundant breadcrumb is
 * hidden; the header itself stays. v2 + editing only. */
body.pdfraj-ws-v2.pdfraj-editing .pdfraj-shell-header {
	position: fixed; top: var(--pe-ws-top, 0px); left: 0; right: 0; z-index: 71;
}
body.pdfraj-ws-v2.pdfraj-editing .pdfraj-shell-breadcrumb-bar,
body.pdfraj-ws-v2.pdfraj-editing .pdfraj-tool-v2 .pdfraj-breadcrumb,
body.pdfraj-ws-v2.pdfraj-editing .pdfraj-tool-v2 .crumbs { display: none !important; }
/* Editing takeover -> SLIM header: keep the logo (home/brand), theme toggle and
 * All Tools, but drop the marketing nav (Merge/Split/Image/Blog/Contact). The
 * header becomes a FIXED bar whose height IS the workspace top-offset
 * (--pe-ws-bar), so the doc-bar/rail/editor sit flush below it with no empty gap
 * (the old 65+69 double-bar). The tool LANDING (no file open) keeps the full nav
 * for SEO. Applies to the dedicated PDF Editor too -- it uses the same header +
 * body.pdfraj-editing. */
body.pdfraj-editing .header .nav { display: none !important; }
body.pdfraj-editing { --pe-ws-bar: 56px; }
body.pdfraj-editing header.header {
	position: fixed; top: var(--pe-ws-top, 0px); left: 0; right: 0;
	height: var(--pe-ws-bar, 56px); min-height: 0; z-index: 80;
}
/* The header row fills that slim height and stays vertically centred. */
body.pdfraj-editing header.header .header-row { height: 100%; }
/* The dedicated PDF Editor (/editor/) is a SEPARATE template: same header, but no
 * .pdfraj-ws-v2 shell, so it has no built-in header offset -> its .pdfraj-app would
 * slide under the fixed header. Push it down by the header height. (tool-v2 pages
 * carry .pdfraj-ws-v2 and offset via their own shell, so they are excluded.) */
body.pdfraj-editing:not(.pdfraj-ws-v2) .pdfraj-app { padding-top: var(--pe-ws-bar, 56px); box-sizing: border-box; }
/* The editor's own rail + right panel offset below the header via --pe-ed-bar (the
 * "site-header height", normally 69px / 101px with the admin bar). Now that the
 * header is a slim fixed bar, retune --pe-ed-bar to the slim header's BOTTOM so the
 * rail/panel sit flush under it -- otherwise the rail stayed at 69px and left a
 * ~13px white sliver under the slim header (the gap by the logo / top of the rail). */
body.pdfraj-editing.pe-ws-editor { --pe-ed-bar: calc(var(--pe-ws-top, 0px) + var(--pe-ws-bar, 56px)); }

/* ---- Doc-op preview chrome: it is a preview, not the editor ------------- */
/* Drop the editor authoring chrome (toolbar, form-fields hint, thumbnail rail,
 * properties panel, per-page toolbars/badges). The dedicated /pdfraj/editor
 * page has no .pdfraj-tool-v2 wrapper, so its full chrome stays. */
body.pdfraj-editing .pdfraj-tool-v2 .pe-toolbar,
body.pdfraj-editing .pdfraj-tool-v2 .pe-form-banner,
body.pdfraj-editing .pdfraj-tool-v2 .pe-rail,
body.pdfraj-editing .pdfraj-tool-v2 .pe-props,
body.pdfraj-editing .pdfraj-tool-v2 .pe-page-tools,
body.pdfraj-editing .pdfraj-tool-v2 .pe-page-badge { display: none !important; }
/* READ-ONLY preview: a doc-op workspace must NOT let the editor's interactive
 * layers fire (clicking text opened the rich-text bar / made form fields
 * editable). All authoring is for the PDF Editor tool only. Disable the Konva
 * overlay + form controls, and hide the floating bar. Scoped to .pdfraj-ws-v2
 * (set only on same-slug doc-op pages — never the dedicated editor). */
body.pdfraj-ws-v2 .pe-page-konva,
body.pdfraj-ws-v2 .pe-fieldctl { pointer-events: none !important; }
body.pdfraj-ws-v2 .pe-floatbar { display: none !important; }
/* Editor fills the strip between top bar and viewport bottom. */
body.pdfraj-ws-v2.pdfraj-editing .pdfraj-tool-v2 .pe-editor {
	height: calc(100vh - var(--pe-ws-top, 0px) - var(--pe-ws-bar, 52px) - var(--pe-ws-doc, 0px)) !important;
	border: none !important; border-radius: 0 !important; box-shadow: none !important;
	background: var(--pdfraj-canvas) !important;   /* ONE preview surface — was #f5f5f5 (editor default) */
}
/* Single uniform preview surface (the FROZEN --pdfraj-canvas #f5f7fa). The
 * preview region used to stack four slightly-different greys — body #f9f9f9 (gap
 * under the docbar), mount #f5f7fa, editor #f5f5f5, canvas #eef1f7 — and each
 * colour step read as a separate "boundary bar". Collapsing them to one colour
 * leaves the docbar's bottom border as the SINGLE divider. Scoped to .pdfraj-ws-v2
 * (doc-op tool pages) so the dedicated PDF Editor is untouched. */
body.pdfraj-ws-v2.pdfraj-editing { background: #f5f7fa; }   /* fills the gap under the fixed docbar; literal = --pdfraj-canvas (token is .pdfraj-app-scoped, not on body) */
body.pdfraj-editing .pdfraj-tool-v2 .pe-canvas { background: var(--pdfraj-canvas) !important; }
body.pdfraj-editing .pdfraj-tool-v2 .pe-pages { align-items: center !important; padding: 1.6rem 1rem 2.4rem !important; }
body.pdfraj-editing .pdfraj-tool-v2 .pe-page {
	max-width: 620px !important; margin: 0 auto 1rem !important;
	border-radius: var(--pdfraj-r-sm) !important; box-shadow: var(--pdfraj-sh-sm);
	background: #fff !important;
}

/* ---- Minimal top bar --------------------------------------------------- */
.pe-ws-top { display: none; }
body.pdfraj-ws-v2 .pdfraj-app.pdfraj-has-files .pe-ws-top {
	display: flex; align-items: center; gap: var(--pdfraj-sp-3);
	position: fixed; left: 0; right: 0; top: var(--pe-ws-top, 0px); height: var(--pe-ws-bar, 52px);
	z-index: 70; background: #fff; border-bottom: 1px solid var(--pdfraj-bd);
	padding: 0 var(--pdfraj-sp-4); box-sizing: border-box;
}
.pe-ws-back {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 50%;
	border: 1px solid var(--pdfraj-bd); background: #fff; color: var(--pdfraj-text); cursor: pointer;
	transition: background var(--pdfraj-ws-ease), border-color var(--pdfraj-ws-ease);
}
.pe-ws-back:hover { background: #f3f4f8; border-color: var(--pdfraj-bd-strong); }
.pe-ws-back svg { width: 18px; height: 18px; }
/* Site brand carried into the bar (theme). */
.pe-ws-brand { display: inline-flex; align-items: center; gap: var(--pdfraj-sp-2); text-decoration: none; color: var(--pdfraj-text); font-weight: 700; font-size: var(--pdfraj-fs-md); }
.pe-ws-brand img { height: 22px; width: auto; display: block; }
.pe-ws-top-div { width: 1px; height: 26px; background: #e6e9f0; }

/* ---- Document bar (above the preview): editable name + size ---- */
.pe-ws-docbar { display: none; }
body.pdfraj-ws-v2 .pdfraj-app.pdfraj-has-files .pe-ws-docbar {
	display: flex; align-items: center; gap: var(--pdfraj-sp-3);
	position: fixed; z-index: 55;
	top: calc(var(--pe-ws-top, 0px) + var(--pe-ws-bar, 52px));
	left: 96px; right: 340px; height: var(--pe-ws-doc, 46px);
	background: #fff; border-bottom: 1px solid var(--pdfraj-bd);
	padding: 0 var(--pdfraj-sp-4); box-sizing: border-box;
}
/* Read-only document name; click opens the rename modal. */
.pe-ws-docname-wrap {
	display: inline-flex; align-items: center; gap: 0.1rem; min-width: 0; max-width: 70%;
	border: 0; background: transparent; cursor: pointer; font: inherit;
	padding: var(--pdfraj-sp-1) var(--pdfraj-sp-2); border-radius: var(--pdfraj-r-md); color: var(--pdfraj-text);
	transition: background var(--pdfraj-ws-ease);
}
.pe-ws-docname-wrap:hover { background: #f3f4f8; }
.pe-ws-docname { font-size: var(--pdfraj-fs-md); font-weight: 700; color: var(--pdfraj-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-ws-docext { font-size: var(--pdfraj-fs-md); font-weight: 700; color: #9aa0ad; flex: 0 0 auto; }
.pe-ws-doc-pencil { width: 16px; height: 16px; margin-left: var(--pdfraj-sp-2); color: #b0b5c2; flex: 0 0 auto; }
.pe-ws-docname-wrap:hover .pe-ws-doc-pencil { color: var(--pdfraj-accent); }
.pe-ws-docsize { font-size: var(--pdfraj-fs-sm); font-weight: 600; color: #9097a6; flex: 0 0 auto; padding: 0.15rem var(--pdfraj-sp-2); background: #f4f5f8; border-radius: var(--pdfraj-r-pill); margin-left: 0.2rem; }
/* The doc bar shows the tool identity PLUS the working document's name and live
 * size on EVERY tool (client 2026-07-15: "must show the uploaded PDF name and
 * size" — the same affordance the PDF Editor already had). Name + size sit
 * right-aligned, editor-style; rename stays wired via the modal. Multi-file
 * tools show a summary ("3 files" + total size) with rename disabled. */
.pe-ws-docbar .pe-ws-docname-wrap { margin-left: auto; max-width: 340px; }
.pe-ws-docname-wrap:disabled { cursor: default; }
.pe-ws-docname-wrap:disabled:hover { background: transparent; }
.pe-ws-docname-wrap:disabled .pe-ws-doc-pencil { display: none; }
@media (max-width: 720px) {
	.pe-ws-docbar .pe-ws-docname-wrap { max-width: 38vw; }
}

/* ---- Phase 0.5: PDF Editor = full workspace parity (Merge-style) -------- */
/* The /pdfraj/editor page runs the same shell and now shows the SAME chrome as
 * every tool: the category rail (left), the doc-bar, and the result side panel
 * on Save. The editor's own toolbar/canvas/thumbnails render in the mount and
 * stay FULLY interactive — we deliberately do NOT add body.pdfraj-ws-v2 (that
 * class disables the editor's Konva layer + floating toolbar), so this chrome is
 * replicated editor-scoped. All rules scoped to body.pe-ws-editor -> no other
 * tool is affected. --pe-ed-bar is the site-header height. */
body.pe-ws-editor { --pe-ws-doc: 46px; --pe-ed-bar: 69px; }
/* M1: the WP admin bar (32px, desktop) shifts the sticky site header down, so the
 * fixed rail / side / doc-bar offset must follow it. Mirrors the v2 pattern
 * (body.admin-bar.pdfraj-ws-v2 --pe-ws-top:32px). Additive + editor-scoped; inert
 * when the admin bar isn't present (logged-out customers). */
body.admin-bar.pe-ws-editor { --pe-ed-bar: 101px; }

/* Doc-bar: in-flow above the mount; the app's left padding insets it to the
 * right of the rail (Merge-style). Reads "[start-over] PDF Editor". */
body.pe-ws-editor .pdfraj-app.pe-ws-has-rail.pdfraj-has-files .pe-ws-docbar {
	display: flex; align-items: center; gap: var(--pdfraj-sp-3);
	position: relative; z-index: 55; height: var(--pe-ws-doc, 46px);
	background: #fff; border-bottom: 1px solid var(--pdfraj-bd);
	padding: 0 var(--pdfraj-sp-4); box-sizing: border-box;
}

/* Editor (only) surfaces the filename + rename pencil in the doc-bar, Smallpdf/
 * Sejda-style — right-aligned so it sits just left of the Download action. The
 * identity-only hide (.pe-ws-docbar .pe-ws-docname-wrap { display:none }) stays in
 * force for every OTHER tool; this re-enables the already-wired rename (modal +
 * applyDocName rewrites the working file, so the downloaded PDF carries the name). */
body.pe-ws-editor .pe-ws-docbar .pe-ws-docname-wrap {
	display: inline-flex !important; margin-left: auto; max-width: 340px;
}
/* Editor now shows the live size pill too — same doc-bar identity as every tool. */
body.pe-ws-editor .pe-ws-docbar .pe-ws-docsize { display: inline-block !important; }
body.pe-ws-editor .pe-ws-docbar .pe-ws-doc-actions { margin-left: var(--pdfraj-sp-3); }
/* Narrow screens: keep the download actions uncrowded — drop the inline filename
 * (rename still available on the result panel after saving). */
@media (max-width: 720px) {
	body.pe-ws-editor .pe-ws-docbar .pe-ws-docname-wrap { display: none !important; }
}

/* Category rail: fixed left below the site header, full height (base already
 * styles it dark-navy 96px + reveals it on has-files). Content clears it.
 * IMPORTANT: the base .pe-ws-has-rail rule also reserves a 340px RIGHT gutter for
 * the side panel — but the editor's panel is hidden until Save, so we zero it
 * while editing (else the editor toolbar's right end, incl. Save, gets clipped)
 * and restore it only on Save so the result panel sits side-by-side (Merge-style). */
body.pe-ws-editor .pe-ws-rail { top: var(--pe-ed-bar, 69px); }
/* Editor page only: left-align the site logo so its mark sits directly above the
   96px dark rail (one clean vertical line down the left, no white gap). Marketing
   pages keep their centered 1216px header. 33px = (96 rail - 30 logo mark) / 2. */
/* ...but ONLY while the rail is actually on screen. The rail appears with the
   file (.pdfraj-has-files / body.pdfraj-editing); on the editor's own landing
   page there is no rail, so this left-aligned the logo against nothing while the
   marketing content below it stayed centred -- the logo visibly jumped between
   /merge/ and /editor/. Measured: landing had railWidth 0 with the mark still at
   x=33. With a file the mark centres over the 96px rail exactly (0px offset), so
   the alignment this rule exists for is kept where it means something. */
body.pe-ws-editor.pdfraj-editing .pdfraj-hdr-wrap { max-width: none; margin: 0; padding-left: 33px; }
body.pe-ws-editor .pdfraj-app.pe-ws-has-rail.pdfraj-has-files { padding-left: 96px; padding-right: 0; }
body.pe-ws-editor .pdfraj-app.pe-ws-comm.pe-ws-has-rail.pdfraj-has-files { padding-right: 340px; }

/* Result side panel: hidden during editing, revealed on Save (app.pe-ws-comm)
 * as a fixed right panel. Higher specificity than the base has-files rule. */
body.pe-ws-editor .pdfraj-app.pdfraj-has-files .pe-ws-side { display: none; }
body.pe-ws-editor .pdfraj-app.pe-ws-comm.pdfraj-has-files .pe-ws-side {
	display: flex; position: fixed; right: 0; top: var(--pe-ed-bar, 69px); bottom: 0;
	width: 340px; z-index: 65; border-left: 1px solid var(--pdfraj-bd);
}

/* The editor's Save result + errors now render in the side panel, so suppress
 * the legacy centered modal/status/error surfaces. The .pdfraj-result box stays
 * in the DOM (display:none) so the editor's own Saved-state observer still fires. */
body.pe-ws-editor .pdfraj-result,
body.pe-ws-editor .pdfraj-status,
body.pe-ws-editor .pdfraj-error,
/* The legacy .pdfraj-actions holds only the reset ("Start over") button — the
 * editing-mode CSS pins it to screen-centre (meant for the error modal), so it
 * floated over the PDF. The side panel already has Start over, so hide it. The
 * real Save button lives in the editor toolbar, not here, so this is safe. */
body.pe-ws-editor .pdfraj-actions { display: none !important; }
/* CRITICAL: the legacy result modal's full-screen backdrop
 * (.pdfraj-result-active::before — position:fixed; inset:0; z-index:1400; dark 45%)
 * was covering the ENTIRE editor after Save: it dimmed everything AND intercepted
 * every click, so the whole screen (toolbar, side panel, Download) went dead. The
 * editor shows its result in the side panel, so kill the backdrop for the editor. */
body.pe-ws-editor .pdfraj-app.pdfraj-result-active::before { content: none !important; display: none !important; }

/* ---- Phase 0.6: PDF Editor mobile — mirror the v2 drawer/sheet, editor-scoped.
 * The shared JS (openDrawer/closeDrawer/rail-close/backdrop/sheet-collapse +
 * hamburger) already runs for the editor, and the accordion/close/backdrop styles
 * are unscoped for <=768px; here we add only the body.pdfraj-ws-v2-scoped bits with
 * body.pe-ws-editor, un-hide the hamburger, and adapt the editor's wide toolbar. */
@media (max-width: 768px) {
	/* Full-width preview: drop the rail gutter AND the result-panel push. */
	body.pe-ws-editor .pdfraj-app.pe-ws-has-rail.pdfraj-has-files,
	body.pe-ws-editor .pdfraj-app.pe-ws-comm.pe-ws-has-rail.pdfraj-has-files {
		padding-left: 0 !important; padding-right: 0 !important;
	}
	/* Hamburger in the doc-bar opens the rail drawer (override the desktop hide). */
	body.pe-ws-editor .pe-ws-menubtn { display: inline-flex; }
	/* Category rail = slide-in left drawer. */
	body.pe-ws-editor .pe-ws-rail {
		width: 82%; max-width: 320px; z-index: 90; top: 0; bottom: 0;
		transform: translateX(-100%); transition: transform var(--pdfraj-ws-ease);
		flex-direction: column; padding-bottom: 2rem;
	}
	body.pe-ws-editor .pe-ws-rail.is-open { transform: translateX(0); }
	/* --- Phase-1 mobile density (editor only): reclaim vertical space for the
	 * document. The site header is COLLAPSED (not removed) so the logo home-link +
	 * All Tools navigation stay. The editor derives its own height from the MEASURED
	 * bar geometry (_syncMobileHeight), so these heights can change later without
	 * desyncing the spacing. --- */
	body.pe-ws-editor.pdfraj-editing .pdfraj-hdr-in { height: 46px; }
	body.pe-ws-editor .pdfraj-logo { font-size: 18px; margin-right: 12px; }
	body.pe-ws-editor .pdfraj-logo-mark { width: 26px; height: 26px; }
	body.pe-ws-editor .pdfraj-logo-mark svg { width: 15px; height: 15px; }
	/* Doc bar keeps Start Over (and the tools hamburger); drop only the redundant
	 * tool title — the editing context + header already identify the tool. */
	body.pe-ws-editor .pe-ws-top-title { display: none; }
	/* Result panel = bottom sheet (only shown on Save via pe-ws-comm). */
	body.pe-ws-editor .pdfraj-app.pe-ws-comm.pdfraj-has-files .pe-ws-side {
		top: auto; left: 0; right: 0; bottom: 0; width: 100%;
		max-height: 82vh; z-index: 80;
		border-left: 0; border-top: 1px solid var(--pdfraj-bd);
		border-radius: var(--pdfraj-r-lg) var(--pdfraj-r-lg) 0 0; box-shadow: var(--pdfraj-sh-sm);
	}
	/* Sheet open/close: the shared JS toggles .is-collapsed when the Done header is
	 * tapped; slide down to a ~64px peek (matches the v2 bottom sheet). */
	body.pe-ws-editor .pe-ws-side { transform: translateY(0); transition: transform var(--pdfraj-ws-ease); }
	body.pe-ws-editor .pe-ws-side.is-collapsed { transform: translateY(calc(100% - 64px)); }
	/* Editor toolbar on phones (Mobile UI Batch M2, 2026-10-12): the rail toggle,
	 * undo/redo, page-ops and Find stay PINNED across the row; only the central tool
	 * GROUP scrolls when there are more tools than fit, so Find/Pages are always one
	 * tap away. Labels -> icons; the tail tools (Hand/Link/Redact, and Sign in the
	 * full editor) fold into the Insert/Annotate bottom-sheets (see pdfraj-editor.js
	 * + .css), so the sign/fill set fits without scrolling. Dropdowns open as fixed /
	 * bottom-sheet (see _tbDropdown), so nothing is clipped. */
	body.pe-ws-editor .pe-toolbar {
		flex-wrap: nowrap; overflow: visible;
	}
	body.pe-ws-editor .pe-tb-group { flex-wrap: nowrap; flex: 0 0 auto; }
	body.pe-ws-editor .pe-tb-btn > span:not(.pe-tb-caret) { display: none; }
	/* Cleaner touch icons (Smallpdf density): 40x46 keeps a comfortable 46px-tall
	   target while packing more tools before the central strip needs to scroll. */
	body.pe-ws-editor .pe-tb-btn { min-width: 40px; height: 46px; }
	body.pe-ws-editor .pe-tb-btn svg { width: 23px; height: 23px; }
	/* Tighter, seamless tool strip: the L/R group borders read as a cut-off box on a
	 * narrow scroller. */
	body.pe-ws-editor .pe-toolbar { padding: 0.3rem 0.4rem; gap: 0.3rem; }
	body.pe-ws-editor .pe-tb-group { gap: 0.2rem; }
	/* The tool GROUP is the flexible middle scroller; chrome groups stay pinned. */
	body.pe-ws-editor .pe-tb-tools {
		flex-grow: 1; flex-shrink: 1; flex-basis: 0%; min-width: 0;
		border-left: 0; border-right: 0; padding: 0 0.2rem; gap: 0.2rem;
		overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
		position: relative;
	}
	body.pe-ws-editor .pe-tb-tools::-webkit-scrollbar { display: none; }
	/* soft right-edge fade so it reads as scrollable when the tools overflow */
	body.pe-ws-editor .pe-tb-tools::after {
		content: ''; position: sticky; right: -0.2rem; flex: 0 0 16px; align-self: stretch;
		margin-left: -16px; pointer-events: none;
		background: linear-gradient(90deg, transparent, var(--pdfraj-ws-bg, #fff));
	}
}

/* Mobile hamburger opens the rail drawer (v2-mobile only, deferred here) — hide. */
body.pe-ws-editor .pe-ws-menubtn { display: none; }

/* Rename modal (Smallpdf-style centered dialog). */
.pe-ws-modal-overlay {
	position: fixed; inset: 0; z-index: 1000;
	display: flex; align-items: center; justify-content: center; padding: var(--pdfraj-sp-4);
	background: rgba(15, 23, 42, 0.5);
}
.pe-ws-modal {
	width: 100%; max-width: 440px; background: #fff; border-radius: var(--pdfraj-r-lg);
	box-shadow: var(--pdfraj-sh-sm); padding: var(--pdfraj-sp-5);
}
.pe-ws-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--pdfraj-sp-4); }
.pe-ws-modal-title { margin: 0; font-size: var(--pdfraj-fs-xl); font-weight: 700; color: var(--pdfraj-text); }
.pe-ws-modal-x {
	display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
	border: 0; border-radius: 50%; background: transparent; color: #9aa0ad; cursor: pointer;
}
.pe-ws-modal-x:hover { background: #f3f4f8; color: #2a2a44; }
.pe-ws-modal-x svg { width: 18px; height: 18px; }
.pe-ws-modal-input {
	width: 100%; box-sizing: border-box; font: inherit; font-size: var(--pdfraj-fs-md);
	padding: var(--pdfraj-sp-3) var(--pdfraj-sp-3); border: 1.5px solid var(--pdfraj-accent); border-radius: var(--pdfraj-r-md);
	outline: none; box-shadow: var(--pdfraj-sh-ring);
}
.pe-ws-modal-foot { display: flex; justify-content: flex-end; gap: var(--pdfraj-sp-2); margin-top: 1.3rem; }
.pe-ws-modal-btn {
	padding: var(--pdfraj-sp-2) 1.2rem; font: inherit; font-size: var(--pdfraj-fs-base); font-weight: 700;
	border: 1.5px solid var(--pdfraj-bd-strong); border-radius: var(--pdfraj-r-md); background: #fff; color: #3a3a55; cursor: pointer;
}
.pe-ws-modal-btn:hover { border-color: var(--pdfraj-bd-strong); }
.pe-ws-modal-save { background: var(--pdfraj-accent); border-color: var(--pdfraj-accent); color: #fff; }
.pe-ws-modal-save:hover { background: var(--pdfraj-accent-hover); border-color: var(--pdfraj-accent-hover); }

/* ---- Option radio cards (Smallpdf-style) ---- */
.pe-ws-cards { display: flex; flex-direction: column; gap: var(--pdfraj-sp-2); }
.pe-ws-card {
	display: flex; align-items: flex-start; gap: var(--pdfraj-sp-3);
	padding: var(--pdfraj-sp-3) var(--pdfraj-sp-3); border: 1.5px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md);
	cursor: pointer; transition: border-color var(--pdfraj-ws-ease), background var(--pdfraj-ws-ease), box-shadow var(--pdfraj-ws-ease);
}
.pe-ws-card:hover { border-color: #c2c8da; }
.pe-ws-card-radio { position: absolute; opacity: 0; width: 0; height: 0; }
.pe-ws-card-dot {
	flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
	border: 2px solid #c2c8da; background: #fff; transition: border-color var(--pdfraj-ws-ease);
	position: relative;
}
.pe-ws-card-txt { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.pe-ws-card-title { font-size: var(--pdfraj-fs-base); font-weight: 700; color: var(--pdfraj-text); }
.pe-ws-card-desc { font-size: var(--pdfraj-fs-sm); color: #6b7280; line-height: 1.35; }
.pe-ws-card:has(.pe-ws-card-radio:checked) { border-color: var(--pdfraj-accent); background: var(--pdfraj-accent-soft); box-shadow: var(--pdfraj-sh-selected); }
.pe-ws-card:has(.pe-ws-card-radio:checked) .pe-ws-card-dot { border-color: var(--pdfraj-accent); }
.pe-ws-card:has(.pe-ws-card-radio:checked) .pe-ws-card-dot::after {
	content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--pdfraj-accent);
}
.pe-ws-card-radio:focus-visible + .pe-ws-card-dot { box-shadow: var(--pdfraj-sh-ring); }

/* Step 1 — large Basic/Strong choice cards (the default compress view) */
.pe-ws-cards-lg { gap: var(--pdfraj-sp-2); margin-bottom: 0.2rem; }
.pe-ws-cards-lg .pe-ws-card { padding: var(--pdfraj-sp-4) var(--pdfraj-sp-4); border-radius: var(--pdfraj-r-lg); }
.pe-ws-cards-lg .pe-ws-card-title { font-size: var(--pdfraj-fs-md); }
.pe-ws-cards-lg .pe-ws-card-desc { font-size: var(--pdfraj-fs-sm); }
/* "Recommended" badge next to a card title */
.pe-ws-card-tag {
	display: inline-block; margin-left: var(--pdfraj-sp-2); padding: 0.05rem var(--pdfraj-sp-2);
	font-size: 0.64rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
	color: var(--pdfraj-accent-hover); background: var(--pdfraj-accent-soft); border-radius: var(--pdfraj-r-pill); vertical-align: middle;
}

/* ---- Left rail --------------------------------------------------------- */
/* Editor page (no top bar): rail starts at viewport top. v2 workspace: it
 * starts below the top bar. */
.pdfraj-app.pe-ws-has-rail.pdfraj-has-files { padding-left: 96px; padding-right: 340px; }
body.pdfraj-ws-v2 .pdfraj-app.pe-ws-has-rail.pdfraj-has-files,
body.pdfraj-ws-v2.pdfraj-editing .pdfraj-app.pe-ws-has-rail.pdfraj-has-files {
	padding-top: calc(var(--pe-ws-top, 0px) + var(--pe-ws-bar, 52px) + var(--pe-ws-doc, 0px));
	padding-left: 96px; padding-right: 340px;
}

.pe-ws-rail {
	position: fixed; left: 0; top: 0; bottom: 0;
	width: 96px; z-index: 60;
	/* Brand DEEP forest green -- the same hue family as the logo + action green
	 * but clearly darker, so the primary (action) green still stands out and the
	 * rail never borrows it. A faint top-to-bottom gradient (lighter at the top)
	 * gives depth. */
	background: #122047; color: #fff;
	display: none; flex-direction: column; gap: 0.3rem;
	padding: var(--pdfraj-sp-3) var(--pdfraj-sp-2) 1.4rem;
	/* Scroll the rail itself when it's taller than the viewport (short/low-res
	 * displays). Flyouts are JS-positioned (fixed), so they escape this clip. */
	overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
	/* Depth: a 1px light-green inner highlight on the right edge + a soft cast
	 * onto the workspace, so the rail reads as a raised panel and -- in dark mode
	 * -- keeps clear separation from the dark workspace instead of blending. */
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.07), 3px 0 20px -8px rgba(0, 0, 0, 0.5);
}
/* Night-mode separation: a brighter edge + deeper cast so the forest rail never
 * merges into the dark workspace surface. */
html[data-theme="dark"] .pe-ws-rail {
	border-right-color: rgba(255, 255, 255, 0.15);
	box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.1), 5px 0 24px -6px rgba(0, 0, 0, 0.72);
}
/* Hairline dividers that band the rail by category (Find | edit/process |
 * convert/organize). */
.pe-ws-rail-div { flex: 0 0 auto; height: 1px; margin: var(--pdfraj-sp-1) var(--pdfraj-sp-2); background: rgba(255, 255, 255, 0.12); }
.pe-ws-rail::-webkit-scrollbar { width: 0; height: 0; }
body.pdfraj-ws-v2 .pe-ws-rail { top: calc(var(--pe-ws-top, 0px) + var(--pe-ws-bar, 52px)); }
.pdfraj-app.pdfraj-has-files .pe-ws-rail { display: flex; }
/* Busy: dim the rail's ITEMS, never the rail itself. The old
 * `opacity: 0.85` on the whole rail made this fixed, left-edge bar 15%
 * translucent, so the scrolled page behind it (the footer's "Popular /
 * Convert" link columns) bled THROUGH during conversion (T7). Keeping the
 * rail opaque and fading only its children removes the bleed and keeps the
 * "disabled while working" cue. */
.pe-ws-rail.is-busy { pointer-events: none; }
.pe-ws-rail.is-busy > * { opacity: 0.5; }

/* Category tile (icon + short label); its tools live in the flyout below. */
.pe-ws-cat { position: relative; }
.pe-ws-btn {
	display: flex; flex-direction: column; align-items: center; gap: var(--pdfraj-sp-1);
	width: 100%; padding: var(--pdfraj-sp-2) 0.2rem;
	border: 0; border-radius: var(--pdfraj-r-lg);
	background: transparent; color: rgba(255, 255, 255, 0.82);
	font: inherit; font-size: 0.66rem; line-height: 1.1; text-align: center;
	cursor: pointer; transition: color var(--pdfraj-ws-ease), background var(--pdfraj-ws-ease);
}
.pe-ws-btn-ic {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: var(--pdfraj-r-md);
	background: rgba(255, 255, 255, 0.07); transition: background var(--pdfraj-ws-ease), box-shadow var(--pdfraj-ws-ease), color var(--pdfraj-ws-ease), transform var(--pdfraj-ws-ease);
}
.pe-ws-btn-ic svg { width: 20px; height: 20px; }
.pe-ws-btn-label { display: block; }
/* Hover/active now light the WHOLE tile, not just the icon chip, so the target
 * reads as one object and the state is unmistakable. On hover the icon chip
 * lifts a little and the icon goes full white. */
.pe-ws-cat:hover .pe-ws-btn,
.pe-ws-cat:focus-within .pe-ws-btn { color: #fff; background: rgba(255, 255, 255, 0.05); }
.pe-ws-cat:hover .pe-ws-btn-ic,
.pe-ws-cat:focus-within .pe-ws-btn-ic { background: rgba(255, 255, 255, 0.16); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.55); }
.pe-ws-cat.is-active .pe-ws-btn { color: #fff; background: rgba(255, 255, 255, 0.09); }
/* "You are here": a short accent bar on the rail's left edge, in the category's
 * own hue, next to the active tile. */
.pe-ws-cat.is-active::before {
	content: ''; position: absolute; left: calc(var(--pdfraj-sp-2) * -1); top: 50%; transform: translateY(-50%);
	width: 3px; height: 28px; border-radius: 0 3px 3px 0;
	background: var(--cat, var(--pdfraj-accent));
}
/* ── Seven hues, one per category ─────────────────────────────────────────────
 *
 * Forty-four monochrome outline icons in a navy column is what made the rail
 * read as an admin template rather than as this product: the eye has nothing to
 * catch but the words. Colour is the difference, and the cheapest honest version
 * of it is one hue per CATEGORY, inherited by that category's tools, rather than
 * a bespoke colour per tool — seven decisions instead of forty-four, and a
 * palette that stays inside one family.
 *
 * The accent blue is deliberately NOT in this set. It means "this is the action"
 * on every screen of the product, and a category that borrowed it would compete
 * with the button people are meant to press.
 */
.pe-ws-cat[data-cat="split"]        { --cat: #a78bfa; }
.pe-ws-cat[data-cat="edit-sign"]    { --cat: #38bdf8; }
.pe-ws-cat[data-cat="compress"]     { --cat: #34d399; }
.pe-ws-cat[data-cat="security"]     { --cat: #fbbf24; }
.pe-ws-cat[data-cat="convert-from"] { --cat: #f472b6; }
.pe-ws-cat[data-cat="other"]        { --cat: #fb923c; }
.pe-ws-cat[data-cat="scans"]        { --cat: #22d3ee; }
.pe-ws-cat--find                    { --cat: #cbd5f5; }
/* A search result belongs to its tool's category, not to the Find tile it is
 * rendered inside, so it names its own. */
.pe-ws-fly-item[data-cat="split"]        { --cat: #a78bfa; }
.pe-ws-fly-item[data-cat="edit-sign"]    { --cat: #38bdf8; }
.pe-ws-fly-item[data-cat="compress"]     { --cat: #34d399; }
.pe-ws-fly-item[data-cat="security"]     { --cat: #fbbf24; }
.pe-ws-fly-item[data-cat="convert-from"] { --cat: #f472b6; }
.pe-ws-fly-item[data-cat="convert-to"]   { --cat: #f472b6; }
.pe-ws-fly-item[data-cat="merge"]        { --cat: #818cf8; }
.pe-ws-fly-item[data-cat="other"]        { --cat: #fb923c; }
.pe-ws-fly-item[data-cat="scans"]        { --cat: #22d3ee; }

/* Idle icons carry their category hue, as on the live iPDFPro workspace. */
.pe-ws-btn-ic { color: var(--cat, rgba(255, 255, 255, 0.9)); }
.pe-ws-cat:hover .pe-ws-btn-ic,
.pe-ws-cat:focus-within .pe-ws-btn-ic { background: color-mix(in srgb, var(--cat, #fff) 22%, transparent); }
/* Active: the category's own colour, filled, with the glyph knocked out in a
 * dark tone so it reads on a light hue like amber as well as on a dark one, plus
 * a soft hue ring + glow so "you are here" is unmistakable. */
.pe-ws-cat.is-active .pe-ws-btn-ic {
	background: var(--cat, var(--pdfraj-accent)); color: #112047;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat, var(--pdfraj-accent)) 26%, transparent),
		0 4px 16px -4px color-mix(in srgb, var(--cat, var(--pdfraj-accent)) 65%, transparent);
}

/* Flyout: the category's tools, opening to the right of the rail. Hidden via
 * visibility so it animates and avoids the [hidden]/display trap. */
.pe-ws-flyout {
	position: absolute; left: calc(100% + 6px); top: -4px; z-index: 80;
	min-width: 232px; max-height: 78vh; overflow-y: auto;
	/* The same forest family as the rail (a touch lighter so it reads as the rail
	 * opening, not a separate card). It used to be a white card floating beside a
	 * dark column — two materials, and it read as bolted on. */
	background: #182a56; color: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--pdfraj-r-lg); padding: var(--pdfraj-sp-2);
	box-shadow: var(--pdfraj-sh-sm);
	opacity: 0; visibility: hidden; transform: translateX(-6px);
	transition: opacity var(--pdfraj-ws-ease), transform var(--pdfraj-ws-ease), visibility var(--pdfraj-ws-ease);
}
/* Lower tiles (e.g. the 14-tool "More") would run off the bottom if they opened
 * downward — anchor the last few flyouts to the tile's BOTTOM so they grow up
 * and stay on screen. */
.pe-ws-cat:nth-last-of-type(-n+3) .pe-ws-flyout { top: auto; bottom: -4px; }
.pe-ws-cat:hover .pe-ws-flyout,
.pe-ws-cat:focus-within .pe-ws-flyout,
/* An explicit open state, because hover and focus-within cannot do this one.
 * A closed flyout is visibility:hidden, and nothing inside a visibility:hidden
 * subtree can take focus -- so Cmd-K could position the search panel and call
 * focus() on its field and the caret would go nowhere, which is exactly what it
 * did. The class opens it first; the focus then lands. */
.pe-ws-cat.is-open .pe-ws-flyout { opacity: 1; visibility: visible; transform: translateX(0); }
.pe-ws-flyout-head {
	font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.45); padding: var(--pdfraj-sp-1) var(--pdfraj-sp-2) var(--pdfraj-sp-2);
}
.pe-ws-flyout-list { display: flex; flex-direction: column; gap: 0.1rem; }
.pe-ws-fly-item {
	display: flex; align-items: center; gap: var(--pdfraj-sp-2); width: 100%;
	padding: var(--pdfraj-sp-2) var(--pdfraj-sp-2); font: inherit; font-size: var(--pdfraj-fs-base); font-weight: 500; color: rgba(255, 255, 255, 0.9);
	border: 0; border-radius: var(--pdfraj-r-md); background: none; cursor: pointer; text-align: left; text-decoration: none;
	transition: background var(--pdfraj-ws-ease);
}
.pe-ws-fly-item:hover:not(:disabled):not(.is-soon) { background: rgba(255, 255, 255, 0.09); color: #fff; }
.pe-ws-fly-item:disabled { cursor: default; opacity: 0.4; }
.pe-ws-fly-ic {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: var(--pdfraj-r-sm); flex: 0 0 auto;
	/* The chip is a wash of the category's hue and the glyph is the hue itself,
	 * so a menu of fourteen tools is scannable by colour before it is readable
	 * by word. */
	background: color-mix(in srgb, var(--cat, #fff) 18%, transparent);
	color: var(--cat, rgba(255, 255, 255, 0.9));
}
.pe-ws-fly-ic svg { width: 16px; height: 16px; }
.pe-ws-fly-name { flex: 1; min-width: 0; }
.pe-ws-fly-item.is-active { background: color-mix(in srgb, var(--cat, #fff) 16%, transparent); color: #fff; }
.pe-ws-fly-item.is-active .pe-ws-fly-ic { background: var(--cat, var(--pdfraj-accent)); color: #112047; }

/* ── Find: the search panel at the head of the rail ───────────────────────────
 *
 * It reuses .pe-ws-flyout and .pe-ws-fly-item so a result row is the same
 * object as a category row — same height, same icon chip, same hover. The only
 * new parts are the field itself and the two states a search can be in.
 */
.pe-ws-flyout--find { width: 268px; }
.pe-ws-find-box {
	display: flex; align-items: center; gap: var(--pdfraj-sp-2);
	margin: 0 0 var(--pdfraj-sp-2);
	padding: 0 var(--pdfraj-sp-3); height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--pdfraj-r-md);
	background: rgba(255, 255, 255, 0.09);
}
.pe-ws-find-box:focus-within {
	border-color: var(--pdfraj-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pdfraj-accent) 18%, transparent);
}
.pe-ws-find-ic { width: 15px; height: 15px; flex: 0 0 15px; color: rgba(255, 255, 255, 0.5); }
.pe-ws-find-input {
	flex: 1; min-width: 0; border: 0; background: transparent;
	font: inherit; font-size: var(--pdfraj-fs-md); color: #fff; outline: none;
}
.pe-ws-find-input::placeholder { color: rgba(255, 255, 255, 0.45); }
.pe-ws-find-list { max-height: 340px; overflow-y: auto; }
.pe-ws-find-empty {
	margin: 0; padding: var(--pdfraj-sp-3) var(--pdfraj-sp-2);
	color: rgba(255, 255, 255, 0.55); font-size: var(--pdfraj-fs-sm);
}
/* Keyboard focus is its own state: the pointer already owns :hover, and a user
 * arrowing down a list must be able to see where they are without moving the
 * mouse. */
.pe-ws-fly-item.is-key { background: rgba(255, 255, 255, 0.14); color: #fff; }
.pe-ws-fly-item.is-key .pe-ws-fly-ic { background: var(--cat, var(--pdfraj-accent)); color: #112047; }

/* The Find tile sits above the categories and is separated from them, because
 * it is not one of them: the seven are places, this is a way in. */
.pe-ws-cat--find { margin-bottom: var(--pdfraj-sp-2); padding-bottom: var(--pdfraj-sp-2); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

/* On the drawer the flyouts render inline, so the field becomes the first row
 * of the sheet — which is where a search field belongs on a phone. Full width,
 * and sized so a tap lands on it rather than near it. */
@media (max-width: 1023px) {
	.pe-ws-flyout--find { width: auto; }
	.pe-ws-find-box { height: 44px; background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.16); }
	.pe-ws-find-input { color: #fff; }
	.pe-ws-find-input::placeholder { color: rgba(255, 255, 255, 0.5); }
	.pe-ws-find-ic { color: rgba(255, 255, 255, 0.5); }
	.pe-ws-find-empty { color: rgba(255, 255, 255, 0.55); }
}
.pe-ws-fly-item.is-active .pe-ws-fly-ic { background: var(--pdfraj-accent); color: #fff; }
.pe-ws-fly-ext { width: 14px; height: 14px; color: #c0c5d2; flex: 0 0 auto; }
.pe-ws-fly-item.is-soon { cursor: default; }
.pe-ws-fly-item.is-soon .pe-ws-fly-ic { background: #eceef3; color: #aab0be; }
.pe-ws-fly-item.is-soon .pe-ws-fly-name { color: var(--pdfraj-text-muted); }

/* ---- Right-side tool panel --------------------------------------------- */
.pe-ws-side {
	position: fixed; right: 0; top: 0; bottom: 0;
	width: 340px; z-index: 60;
	background: #fff; border-left: 1px solid var(--pdfraj-bd);
	display: none; flex-direction: column;
	box-shadow: var(--pdfraj-sh-sm);
}
body.pdfraj-ws-v2 .pe-ws-side { top: calc(var(--pe-ws-top, 0px) + var(--pe-ws-bar, 52px)); }
.pdfraj-app.pdfraj-has-files .pe-ws-side { display: flex; }

.pe-ws-side-head {
	display: flex; align-items: center; gap: var(--pdfraj-sp-2);
	/*
	 * The same height as the document bar beside it, and tied to it BY NAME so
	 * they cannot drift apart again.
	 *
	 * These two bars start on the same horizontal line across the whole
	 * workspace, and they were 46px and 70px. A 24px step between two things
	 * that share an edge reads as a misalignment rather than a decision, on
	 * every one of the 41 tools that show an options panel.
	 *
	 * The side header is the half that moves because --pe-ws-doc is a LAYOUT
	 * token: the grid, the editor and the page-studio scroller all offset
	 * against it, so changing the docbar would move the page. Nothing offsets
	 * against this header.
	 *
	 * min-height rather than height: on a narrow screen the heading wraps and
	 * the collapsible variant adds padding-right, and a fixed height would clip
	 * both.
	 */
	min-height: var(--pe-ws-doc, 46px);
	padding: 0.35rem 1.25rem; border-bottom: 1px solid var(--pdfraj-bd);
}
.pe-ws-side-ic, .pe-ws-done-ck {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: var(--pdfraj-r-md); flex: 0 0 auto;
	background: var(--pdfraj-accent-soft); color: var(--pdfraj-accent);
}
.pe-ws-side-ic svg, .pe-ws-done-ck svg { width: 18px; height: 18px; }
.pe-ws-done-ck { background: #21a366; color: #fff; }
.pe-ws-side-title { font-size: var(--pdfraj-fs-lg); font-weight: 700; color: var(--pdfraj-text); }
.pe-ws-side-head--ok  .pe-ws-side-title { color: #14905f; }
.pe-ws-side-head--err .pe-ws-side-title { color: #b91c1c; }
.pe-ws-side-head--err .pe-ws-side-ic { background: #fdeaea; color: #b91c1c; }

.pe-ws-side-body { flex: 1; overflow-y: auto; padding: 1.25rem; }
.pe-ws-side-hint { font-size: var(--pdfraj-fs-base); color: #5a5a72; line-height: 1.55; margin: 0 0 var(--pdfraj-sp-2); }
/* Under the busy spinner: a quiet "~Ns left" (when we have an ETA) or a muted
 * "elapsed Ns" — small and understated, not a prominent ticking stopwatch. */
.pe-ws-busy-elapsed {
	font-size: var(--pdfraj-fs-sm); font-weight: 500; letter-spacing: 0.01em;
	color: var(--pdfraj-text-muted); font-variant-numeric: tabular-nums;
	margin: 0 0 var(--pdfraj-sp-1); min-height: 1.2em;
	font-feature-settings: "tnum" 1;
}
/* When it is a real estimate, give it a touch more presence than bare elapsed. */
.pe-ws-busy-elapsed.is-eta { color: var(--pdfraj-text); font-weight: 600; }
.pe-ws-busy-note { color: var(--pdfraj-text-muted); }

/* Batch result list (compress N files): one row per file with its own download. */
.pe-ws-batch-row { display: flex; align-items: center; gap: var(--pdfraj-sp-3); padding: var(--pdfraj-sp-2) 0; border-bottom: 1px solid var(--pdfraj-bd); }
.pe-ws-batch-info { min-width: 0; flex: 1; }
.pe-ws-batch-name { font-size: var(--pdfraj-fs-base); font-weight: 600; color: var(--pdfraj-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-ws-batch-line { font-size: var(--pdfraj-fs-sm); color: var(--pdfraj-text-muted); }
.pe-ws-batch-row.is-failed .pe-ws-batch-line { color: #b91c1c; }
.pe-ws-batch-dl { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: var(--pdfraj-r-md); color: var(--pdfraj-accent); background: var(--pdfraj-accent-soft); }
.pe-ws-batch-dl:hover { background: #e7e5fb; }
.pe-ws-batch-dl svg { width: 18px; height: 18px; }
.pe-ws-batch-row + .pe-ws-panel-btn { margin-top: var(--pdfraj-sp-4); }
.pe-ws-batch-startover { display: block; margin: var(--pdfraj-sp-3) auto 0; border: 0; background: transparent; color: var(--pdfraj-text-muted); font: inherit; font-size: var(--pdfraj-fs-sm); cursor: pointer; text-decoration: underline; }
.pe-ws-batch-startover:hover { color: var(--pdfraj-text); }
.pe-ws-side-foot { font-size: var(--pdfraj-fs-sm); color: var(--pdfraj-text-muted); line-height: 1.5; margin: var(--pdfraj-sp-3) 0 0; }
.pe-ws-side-err  { font-size: var(--pdfraj-fs-base); color: #b91c1c; margin: 0 0 var(--pdfraj-sp-3); line-height: 1.5; }
.pe-ws-side-sub  { font-size: var(--pdfraj-fs-xs); font-weight: 700; color: #6b7280; margin: var(--pdfraj-sp-5) 0 var(--pdfraj-sp-2); }

/* Option fields */
.pe-ws-field { display: flex; flex-direction: column; gap: var(--pdfraj-sp-1); margin-bottom: var(--pdfraj-sp-4); }
.pe-ws-field-label { font-size: var(--pdfraj-fs-sm); font-weight: 600; color: #4a4a63; }
.pe-ws-input {
	width: 100%; box-sizing: border-box;
	padding: var(--pdfraj-sp-2) var(--pdfraj-sp-3); font: inherit; font-size: var(--pdfraj-fs-md);
	border: 1.5px solid var(--pdfraj-bd-strong); border-radius: var(--pdfraj-r-md); background: #fff; color: var(--pdfraj-text);
	outline: none; transition: border-color var(--pdfraj-ws-ease), box-shadow var(--pdfraj-ws-ease);
}
.pe-ws-input:focus { border-color: var(--pdfraj-accent); box-shadow: var(--pdfraj-sh-ring); }
.pe-ws-panel-err { color: #b91c1c; font-size: var(--pdfraj-fs-sm); margin: 0.1rem 0 var(--pdfraj-sp-2); }

/* --- Alternate Mix: one card per uploaded PDF, each with its own page order.
 * The card mirrors the grid tile it controls (position chip, name, page count)
 * so a user setting "Reverse" on PDF 2 can see which tile that is. */
.pe-ws-altmix-list { display: flex; flex-direction: column; gap: var(--pdfraj-sp-3); }
.pe-ws-altmix-card { border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md); overflow: hidden; background: #fff; }
.pe-ws-altmix-head { display: flex; align-items: center; gap: var(--pdfraj-sp-2); padding: var(--pdfraj-sp-3) var(--pdfraj-sp-3) var(--pdfraj-sp-2); }
.pe-ws-altmix-num {
	flex: 0 0 auto; display: grid; place-items: center; min-width: 42px; height: 32px;
	border-radius: var(--pdfraj-r-sm); background: #eeedfe; color: var(--pdfraj-accent);
	font-size: var(--pdfraj-fs-xs); font-weight: 800; white-space: nowrap; padding: 0 var(--pdfraj-sp-2);
}
.pe-ws-altmix-info { min-width: 0; flex: 1 1 auto; }
.pe-ws-altmix-info strong { display: block; font-size: var(--pdfraj-fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-ws-altmix-info span { font-size: var(--pdfraj-fs-xs); color: var(--pdfraj-text-muted); }
.pe-ws-altmix-rm {
	flex: 0 0 auto; width: 29px; height: 29px; border: 0; border-radius: var(--pdfraj-r-sm);
	background: #f5f7fa; color: #81899b; font: inherit; font-size: var(--pdfraj-fs-sm); cursor: pointer;
}
.pe-ws-altmix-rm:hover { background: #fdeaea; color: #b91c1c; }
.pe-ws-altmix-label { font-size: var(--pdfraj-fs-xs); font-weight: 700; color: var(--pdfraj-text-muted); letter-spacing: .03em; padding: 0 var(--pdfraj-sp-3) var(--pdfraj-sp-2); }
.pe-ws-altmix-seg {
	display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
	background: #f2f4f8; padding: 4px; margin: 0 var(--pdfraj-sp-3) var(--pdfraj-sp-3); border-radius: var(--pdfraj-r-sm);
}
.pe-ws-altmix-segbtn {
	border: 0; background: transparent; color: #677187; border-radius: var(--pdfraj-r-sm);
	padding: var(--pdfraj-sp-2) 3px; font: inherit; font-size: var(--pdfraj-fs-sm); font-weight: 600; cursor: pointer;
}
.pe-ws-altmix-segbtn:hover { color: var(--pdfraj-text); }
.pe-ws-altmix-segbtn.is-on { background: #fff; color: var(--pdfraj-accent); box-shadow: var(--pdfraj-sh-sm); }
.pe-ws-altmix-dir { background: #fafbfc; border-top: 1px solid var(--pdfraj-bd); padding: var(--pdfraj-sp-2) var(--pdfraj-sp-3); font-size: var(--pdfraj-fs-xs); color: var(--pdfraj-text-muted); }

/* --- Bates numbering: preset + editable stamp text + live preview ---------
 * Sectioned rail per the client mock: each step is a titled group separated
 * by a rule, token chips sit under the stamp-text field, and the preview
 * shows the real sequence (first four stamps, then the last one). */
.pe-ws-bates-group { border-top: 1px solid var(--pdfraj-bd); margin-top: var(--pdfraj-sp-4); padding-top: var(--pdfraj-sp-4); }
.pe-ws-bates-group:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.pe-ws-bates-group .pe-ws-side-sub { margin-top: 0; }
.pe-ws-bates-group .pe-ws-field:last-child { margin-bottom: 0; }
/* Token chips: tap to insert {Bates} / {file} / {page} / {total} at the caret.
 * #eeedfe is the tint of the workspace accent (#5247dc), same as the mock. */
.pe-ws-bates-chips { display: flex; flex-wrap: wrap; gap: var(--pdfraj-sp-1); margin: calc(-1 * var(--pdfraj-sp-2)) 0 var(--pdfraj-sp-2); }
.pe-ws-bates-chip {
	font: inherit; font-size: var(--pdfraj-fs-xs); font-weight: 500; cursor: pointer;
	color: var(--pdfraj-accent); background: #eeedfe;
	border: 0; border-radius: var(--pdfraj-r-sm); padding: 0.25rem var(--pdfraj-sp-2);
}
.pe-ws-bates-chip:hover { filter: brightness(0.96); }
.pe-ws-bates-note { font-size: var(--pdfraj-fs-xs); color: #6b7280; line-height: 1.45; margin: 0 0 var(--pdfraj-sp-3); }
.pe-ws-bates-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pdfraj-sp-2) var(--pdfraj-sp-3); }
.pe-ws-bates-preview {
	background: #f8f8f4; border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md);
	padding: var(--pdfraj-sp-3); margin-bottom: var(--pdfraj-sp-3);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--pdfraj-fs-sm);
	line-height: 1.7;
}
.pe-ws-bates-preview-h { font-family: inherit; font-weight: 700; color: #6b7280; margin-bottom: var(--pdfraj-sp-1); font-size: var(--pdfraj-fs-xs); text-transform: uppercase; letter-spacing: .03em; }
.pe-ws-bates-preview-l { color: #3f3f46; white-space: normal; overflow-wrap: anywhere; margin-bottom: 2px; }
.pe-ws-bates-preview-dots { color: #9ca3af; padding: 2px 0; }
.pe-ws-bates-preview-last { color: #1f2937; font-weight: 600; }
/* Range summary: one sentence plus a per-file first-last list. */
.pe-ws-bates-sum { margin-bottom: var(--pdfraj-sp-3); }
.pe-ws-bates-sum[hidden] { display: none; }
.pe-ws-bates-sum-line { margin: 0 0 var(--pdfraj-sp-2); font-size: var(--pdfraj-fs-sm); color: #4a4a63; line-height: 1.5; }
.pe-ws-bates-sum-line b { color: var(--pdfraj-text); font-weight: 700; }
.pe-ws-bates-frow { display: flex; align-items: center; gap: var(--pdfraj-sp-2); padding: 0.2rem 0; font-size: var(--pdfraj-fs-xs); }
.pe-ws-bates-fname { flex: 1 1 auto; min-width: 0; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-ws-bates-frange { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--pdfraj-accent); background: #eeedfe; border-radius: var(--pdfraj-r-sm); padding: 0.1rem var(--pdfraj-sp-2); }
.pe-ws-bates-color { flex: 0 0 44px; width: 44px; padding: 2px; cursor: pointer; }
/* Margin slider (1..30 mm) — value read-out sits to the right of the track. */
.pe-ws-bates-slide { display: flex; align-items: center; gap: var(--pdfraj-sp-3); }
.pe-ws-bates-range { flex: 1 1 auto; min-width: 0; accent-color: var(--pdfraj-accent); cursor: pointer; }
.pe-ws-bates-slide-val { flex: 0 0 auto; min-width: 3.5em; text-align: right; font-size: var(--pdfraj-fs-sm); font-weight: 500; color: #4a4a63; }

/* --- Header & Footer: six zone boxes + token chips + margin slider ------- */
/* Three zone boxes per band (Left / Center / Right), mirroring where the text
 * lands on the page. The rail is narrow, so the inputs run small and rely on
 * their placeholder for the position label. */
.pe-ws-hf-band-label { margin: 0 0 var(--pdfraj-sp-2); }
.pe-ws-hf-zones {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pdfraj-sp-2); margin-bottom: var(--pdfraj-sp-3);
}
.pe-ws-hf-zone { padding: var(--pdfraj-sp-2); font-size: var(--pdfraj-fs-sm); text-align: center; }
.pe-ws-hf-zone::placeholder { color: #9ca3af; }
/* The box the token chips will fill — "the selected box" the hint refers to. */
.pe-ws-hf-zone.is-target { border-color: var(--pdfraj-accent); background: var(--pdfraj-accent-soft); }
.pe-ws-hf-chips { display: flex; flex-wrap: wrap; gap: var(--pdfraj-sp-1); margin-bottom: var(--pdfraj-sp-1); }
.pe-ws-hf-chips-hint { margin: 0 0 var(--pdfraj-sp-4); font-size: var(--pdfraj-fs-xs); color: #6b7280; }
.pe-ws-hf-chip {
	font: inherit; font-size: var(--pdfraj-fs-xs); font-weight: 500;
	border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-sm);
	background: #f4f4f8; color: #4a4a63;
	padding: 3px 8px; cursor: pointer;
	transition: background var(--pdfraj-ws-ease), border-color var(--pdfraj-ws-ease);
}
.pe-ws-hf-chip:hover { background: var(--pdfraj-accent-soft); border-color: var(--pdfraj-accent); color: var(--pdfraj-accent); }
.pe-ws-hf-rule { border-top: 1px solid var(--pdfraj-bd); padding-top: var(--pdfraj-sp-4); }
.pe-ws-hf-slide { display: flex; align-items: center; gap: var(--pdfraj-sp-3); }
.pe-ws-hf-range { flex: 1 1 auto; min-width: 0; accent-color: var(--pdfraj-accent); cursor: pointer; }
.pe-ws-hf-slide-val { flex: 0 0 auto; min-width: 3.5em; text-align: right; font-size: var(--pdfraj-fs-sm); font-weight: 500; color: #4a4a63; }
.pe-ws-hf-range-wrap { margin: calc(-1 * var(--pdfraj-sp-2)) 0 var(--pdfraj-sp-4); }
.pe-ws-hf-range-wrap[hidden] { display: none; }
.pe-ws-hf-check { display: flex; align-items: center; gap: var(--pdfraj-sp-2); cursor: pointer; margin-bottom: var(--pdfraj-sp-3); font-size: var(--pdfraj-fs-sm); color: #4a4a63; }
.pe-ws-hf-check input { width: 16px; height: 16px; flex: 0 0 auto; cursor: pointer; }
.pe-ws-hf-color { flex: 0 0 44px; width: 44px; padding: 2px; cursor: pointer; }

/* Live preview drawn over each page thumbnail. Appended by the shell into
 * .ps-thumb and removed on panel exit — the page studio never sees it. */
.pe-ws-hf-preview .ps-page-num { display: none; }
.pe-hf-ov { position: absolute; pointer-events: none; overflow: hidden; z-index: 3; }
.pe-hf-ov.is-off { opacity: 0.28; }          /* page excluded by the range / skip-first */
.pe-hf-ov-band {
	position: absolute;
	border-color: rgba(82, 71, 220, 0.5); border-style: dashed; border-width: 0;
	white-space: nowrap;
}
.pe-hf-ov-top    { border-bottom-width: 1px; padding-bottom: 1px; }
.pe-hf-ov-bottom { border-top-width: 1px; padding-top: 1px; }
.pe-hf-ov-t { position: absolute; top: 0; }
.pe-hf-ov-left   { left: 0; }
.pe-hf-ov-right  { right: 0; }
.pe-hf-ov-center { left: 50%; transform: translateX(-50%); }

/* --- Page Numbers: mock-parity rail panel -------------------------------- *
 * Reuses the Header & Footer slider, range box, checkbox and thumbnail
 * overlay; only the Style hint and the Pages/Start-from pair are its own. */
.pe-ws-pn-hint {
	margin: calc(-1 * var(--pdfraj-sp-3)) 0 var(--pdfraj-sp-4);
	font-size: var(--pdfraj-fs-xs); color: #6b7280;
}
.pe-ws-pn-pair { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--pdfraj-sp-3); }
.pe-ws-pn-pair .pe-ws-field { min-width: 0; }

/* --- Edit Metadata: pre-filled property rows ----------------------------- */
/* Each row is a label + [input][x]. The x empties the field, which the panel
 * reads as "remove this property" when it diffs against the values read from
 * the file (see renderMetadata() in the shell). */
.pe-ws-meta-field { margin-bottom: var(--pdfraj-sp-3); }
.pe-ws-meta-ctl { display: flex; align-items: center; gap: var(--pdfraj-sp-2); }
.pe-ws-meta-ctl .pe-ws-input { flex: 1 1 auto; min-width: 0; }
.pe-ws-meta-clear {
	flex: 0 0 auto; width: 28px; height: 28px; line-height: 1;
	border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-sm);
	background: #fff; color: #6b7280; font-size: 17px; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.pe-ws-meta-clear:hover { background: #fdf2f2; border-color: #e5b4b4; color: #b42318; }
.pe-ws-meta-hint { margin-top: var(--pdfraj-sp-1); color: #6b7280; font-size: var(--pdfraj-fs-xs); line-height: 1.4; }
.pe-ws-meta-hint[hidden] { display: none; }
/* Explanatory line under a WIRED field (type 'check', or any field with a
 * hint). Pulled up so it sits under its own control rather than floating
 * midway between two rows. */
.pe-ws-field-hint {
	margin: calc(-1 * var(--pdfraj-sp-2)) 0 var(--pdfraj-sp-3);
	color: #6b7280; font-size: var(--pdfraj-fs-xs); line-height: 1.4;
}
/* Custom fields: name + value + remove, one row each. */
.pe-ws-meta-custom-h { margin-top: var(--pdfraj-sp-4); }
.pe-ws-meta-custom { margin-bottom: var(--pdfraj-sp-2); }
/* Name and value STACKED, not side by side. Side by side they split a 340px
 * sidebar into a 120px name and a 144px value, which cut "Confidentiality" and
 * showed about a third of "Northstar Business Support Pvt Ltd". Stacked, each
 * one gets the full column — roughly twice the characters — and the pair still
 * reads as one field because the card groups them. (Portal issue #50.) */
.pe-ws-meta-custom-row {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "name del" "val val";
	gap: 6px var(--pdfraj-sp-2);
	align-items: center;
	margin-bottom: var(--pdfraj-sp-2);
	padding: var(--pdfraj-sp-2);
	border: 1px solid var(--pdfraj-bd);
	border-radius: var(--pdfraj-r-sm, 6px);
	background: #fcfcfd;
}
.pe-ws-meta-custom-row .pe-ws-meta-clear { grid-area: del; }
.pe-ws-meta-custom-name { grid-area: name; min-width: 0; font-weight: 600; }
.pe-ws-meta-custom-val  { grid-area: val;  min-width: 0; }
.pe-ws-meta-add {
	border: 1px dashed var(--pdfraj-bd); border-radius: var(--pdfraj-r-md);
	background: #fff; color: #4a4a63; cursor: pointer; width: 100%;
	padding: var(--pdfraj-sp-2); font-size: var(--pdfraj-fs-sm);
}
.pe-ws-meta-add:hover { border-color: var(--pdfraj-accent, #4f46e5); color: var(--pdfraj-accent, #4f46e5); }
.pe-ws-meta-wipe { margin: var(--pdfraj-sp-3) 0 var(--pdfraj-sp-2); }
.pe-ws-meta-wipe-btn {
	border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md);
	background: #fff; color: #4a4a63; cursor: pointer;
	padding: var(--pdfraj-sp-2) var(--pdfraj-sp-3); font-size: var(--pdfraj-fs-sm);
}
.pe-ws-meta-wipe-btn:hover { background: #fdf2f2; border-color: #e5b4b4; color: #b42318; }
.pe-ws-meta-wipe.is-on .pe-ws-meta-wipe-btn { background: #fdf2f2; border-color: #e5b4b4; color: #b42318; }

/* --- Create Bookmarks: outline tree editor ------------------------------- */
/* Rows carry their nesting as an inline margin-left (depth * 18px), so the
 * list stays a flat sequence — see renderBookmarks() in the shell. */
.pe-ws-bm-add {
	display: flex; align-items: center; justify-content: center; gap: var(--pdfraj-sp-2);
	width: 100%; box-sizing: border-box; margin-bottom: var(--pdfraj-sp-3);
	padding: var(--pdfraj-sp-2) var(--pdfraj-sp-3);
	font: inherit; font-size: var(--pdfraj-fs-base); font-weight: 600;
	color: var(--pdfraj-accent); background: var(--pdfraj-accent-soft);
	border: 1.5px dashed #c8c4f4; border-radius: var(--pdfraj-r-md); cursor: pointer;
	transition: background var(--pdfraj-ws-ease), border-color var(--pdfraj-ws-ease);
}
.pe-ws-bm-add:hover { background: #e9e6fb; border-color: var(--pdfraj-accent); }
.pe-ws-bm-add svg { width: 16px; height: 16px; flex: 0 0 auto; }

.pe-ws-bm-list { position: relative; display: flex; flex-direction: column; gap: var(--pdfraj-sp-2); }
.pe-ws-bm-empty { font-size: var(--pdfraj-fs-sm); color: var(--pdfraj-text-muted); line-height: 1.5; margin: 0; padding: var(--pdfraj-sp-3); border: 1px dashed var(--pdfraj-bd); border-radius: var(--pdfraj-r-md); text-align: center; }

.pe-ws-bm-row {
	display: flex; align-items: flex-start; gap: var(--pdfraj-sp-1);
	padding: var(--pdfraj-sp-2); box-sizing: border-box;
	border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md); background: #fff;
	transition: border-color var(--pdfraj-ws-ease), box-shadow var(--pdfraj-ws-ease), opacity 0.12s ease;
}
.pe-ws-bm-row:hover { border-color: var(--pdfraj-bd-strong); }
/* Lifted into the ghost — left in place so the list geometry never moves. */
.pe-ws-bm-row.is-dragging { opacity: 0.3; }
.pe-ws-bm-grip {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 34px; flex: 0 0 auto; margin-left: -2px;
	color: #b6bac6; cursor: grab; touch-action: none;
}
.pe-ws-bm-grip:active { cursor: grabbing; }
.pe-ws-bm-grip svg { width: 16px; height: 16px; }
.pe-ws-bm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--pdfraj-sp-1); }
.pe-ws-bm-title { padding: var(--pdfraj-sp-1) var(--pdfraj-sp-2); font-size: var(--pdfraj-fs-base); }
.pe-ws-bm-meta { display: flex; align-items: center; gap: var(--pdfraj-sp-1); }
.pe-ws-bm-pagefield { display: inline-flex; align-items: center; gap: var(--pdfraj-sp-1); margin-right: auto; font-size: var(--pdfraj-fs-xs); color: var(--pdfraj-text-muted); }
.pe-ws-bm-page { width: 62px; padding: 2px var(--pdfraj-sp-1); font-size: var(--pdfraj-fs-sm); text-align: center; }
.pe-ws-bm-act {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; flex: 0 0 auto; padding: 0;
	color: #6b7280; background: transparent; border: 1px solid transparent;
	border-radius: var(--pdfraj-r-sm); cursor: pointer;
	transition: background var(--pdfraj-ws-ease), color var(--pdfraj-ws-ease);
}
.pe-ws-bm-act:hover { background: var(--pdfraj-accent-soft); color: var(--pdfraj-accent); }
.pe-ws-bm-act svg { width: 15px; height: 15px; }
.pe-ws-bm-del:hover { background: #fdeaea; color: #b91c1c; }

/* A control that cannot do anything says so rather than ignoring the click:
   indent at the 5-level cap, or with nothing above to nest under. The reason
   is on the button's title (portal issue #20). */
.pe-ws-bm-act:disabled { opacity: 0.35; cursor: default; }
.pe-ws-bm-act:disabled:hover { background: transparent; color: inherit; }

/* Title length, shown only as the cap gets close -- a counter on every row is
   noise, and the field itself already stops at the limit. */
.pe-ws-bm-count {
	align-self: flex-end;
	font-size: var(--pdfraj-fs-xs, 11px);
	color: var(--pdfraj-text-muted);
	font-variant-numeric: tabular-nums;
}
.pe-ws-bm-count.is-full { color: var(--pdfraj-danger, #dc2626); font-weight: 600; }

/* Drop indicator: WHERE the row lands (top) and at WHICH nesting level (left).
 * Absolutely positioned on purpose — an in-flow indicator pushes every row below
 * it down, which makes the drag target oscillate under a still finger. */
.pe-ws-bm-drop {
	position: absolute; left: 0; right: 0; top: 0; height: 3px;
	border-radius: 2px; background: var(--pdfraj-accent); pointer-events: none;
}
.pe-ws-bm-drop::before {
	content: ''; position: absolute; left: -3px; top: -2.5px;
	width: 8px; height: 8px; border-radius: 50%; background: var(--pdfraj-accent);
}

/* The row being dragged, following the pointer. Transform-only moves, so the
 * list itself never reflows mid-drag. */
.pe-ws-bm-ghost {
	position: fixed; left: 0; top: 0; z-index: 200;
	display: flex; align-items: center; gap: var(--pdfraj-sp-2);
	box-sizing: border-box; padding: 0.45rem 0.6rem;
	font-size: var(--pdfraj-fs-sm);
	background: #fff; border: 1.5px solid var(--pdfraj-accent); border-radius: var(--pdfraj-r-md);
	box-shadow: 0 10px 26px rgba(17, 17, 40, 0.18);
	pointer-events: none; will-change: transform;
}
.pe-ws-bm-ghost-ic { width: 14px; height: 14px; flex: 0 0 auto; color: #b6bac6; }
.pe-ws-bm-ghost-t { font-weight: 600; color: var(--pdfraj-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-ws-bm-ghost-p { margin-left: auto; flex: 0 0 auto; color: var(--pdfraj-text-muted); font-variant-numeric: tabular-nums; }

/* "Reset order" — reverts sequence + nesting to the file's own, keeping edits. */
.pe-ws-bm-tools { display: flex; justify-content: flex-end; margin: -0.35rem 0 var(--pdfraj-sp-2); }
.pe-ws-bm-reset {
	display: inline-flex; align-items: center; gap: 0.3rem;
	padding: 0.25rem 0.45rem; font: inherit; font-size: var(--pdfraj-fs-xs);
	color: var(--pdfraj-text-muted); background: transparent; border: 0;
	border-radius: var(--pdfraj-r-sm); cursor: pointer;
	transition: color var(--pdfraj-ws-ease), background var(--pdfraj-ws-ease);
}
.pe-ws-bm-reset:hover:not(:disabled) { color: var(--pdfraj-accent); background: var(--pdfraj-accent-soft); }
.pe-ws-bm-reset:disabled { opacity: 0.45; cursor: default; }
.pe-ws-bm-reset svg { width: 13px; height: 13px; }
body.pe-ws-bm-dragging { user-select: none; -webkit-user-select: none; }
body.pe-ws-bm-dragging .pe-ws-bm-grip { cursor: grabbing; }

/* Advanced disclosure — Smallpdf-style: Basic/Strong default + reveal the full
 * engine. The toggle sits BELOW the primary CTA; controls live in .pe-ws-adv-box. */
.pe-ws-adv-toggle {
	display: inline-flex; align-items: center; gap: var(--pdfraj-sp-2);
	width: 100%; box-sizing: border-box; margin: var(--pdfraj-sp-3) 0 var(--pdfraj-sp-2);
	padding: var(--pdfraj-sp-2) var(--pdfraj-sp-3); font: inherit; font-size: var(--pdfraj-fs-base); font-weight: 600;
	color: #3a3a55; background: #f6f7fb; border: 1.5px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md);
	cursor: pointer; text-align: left; transition: background var(--pdfraj-ws-ease), border-color var(--pdfraj-ws-ease), color var(--pdfraj-ws-ease);
}
.pe-ws-adv-toggle:hover { background: #eef1f8; border-color: var(--pdfraj-bd-strong); }
.pe-ws-adv-toggle:focus-visible { outline: none; box-shadow: var(--pdfraj-sh-ring); }
.pe-ws-adv-ic { width: 16px; height: 16px; color: #6b7280; flex: 0 0 auto; }
.pe-ws-adv-tt { flex: 1 1 auto; }
.pe-ws-adv-chev { width: 16px; height: 16px; color: #8a8aa0; flex: 0 0 auto; transition: transform var(--pdfraj-ws-ease); }
.pe-ws-adv-toggle.is-open { background: var(--pdfraj-accent-soft); border-color: var(--pdfraj-accent); color: var(--pdfraj-accent-hover); }
.pe-ws-adv-toggle.is-open .pe-ws-adv-ic { color: var(--pdfraj-accent); }
.pe-ws-adv-toggle.is-open .pe-ws-adv-chev { color: var(--pdfraj-accent); transform: rotate(180deg); }
/* Revealed advanced controls — a compact, premium settings panel. Everything is
 * scoped to .pe-ws-adv-box so the Basic/Strong cards and other tools are untouched.
 * Guard display per the hidden-attr specificity trap noted in CLAUDE.md. */
.pe-ws-adv-box { padding-top: 0.6rem; }
.pe-ws-adv-box[hidden] { display: none; }
/* Consistent vertical rhythm: 1.2rem between sections (matches the toggle gap);
 * remaining labels become subtle uppercase section marks. */
.pe-ws-adv-box .pe-ws-field { margin-bottom: 1.2rem; gap: var(--pdfraj-sp-2); }
.pe-ws-adv-box .pe-ws-field:last-child { margin-bottom: var(--pdfraj-sp-1); }
.pe-ws-adv-box .pe-ws-field-label {
	font-size: var(--pdfraj-fs-xs); font-weight: 700; letter-spacing: 0.045em;
	text-transform: uppercase; color: #9095a8;
}

/* Mode selector as a segmented control (one workflow at a time). */
.pe-ws-cards--segmented {
	flex-direction: row; gap: 0; padding: 3px;
	background: #edeff5; border-radius: var(--pdfraj-r-md);
	box-shadow: inset 0 1px 2px rgba(20, 30, 80, 0.045);
}
.pe-ws-cards--segmented .pe-ws-card {
	flex: 1 1 0; min-width: 0; justify-content: center; align-items: center; gap: 0;
	min-height: 38px; padding: var(--pdfraj-sp-2) var(--pdfraj-sp-2);
	border: 0; border-radius: var(--pdfraj-r-md); background: transparent;
	transition: background var(--pdfraj-ws-ease), box-shadow var(--pdfraj-ws-ease), color var(--pdfraj-ws-ease);
}
.pe-ws-cards--segmented .pe-ws-card:hover { background: rgba(255, 255, 255, 0.6); border: 0; }
.pe-ws-cards--segmented .pe-ws-card-dot,
.pe-ws-cards--segmented .pe-ws-card-desc { display: none; }
.pe-ws-cards--segmented .pe-ws-card-title { font-size: var(--pdfraj-fs-sm); font-weight: 600; color: var(--pdfraj-text-muted); letter-spacing: 0.01em; }
.pe-ws-cards--segmented .pe-ws-card:has(.pe-ws-card-radio:checked) {
	background: #fff; border: 0;
	box-shadow: 0 1px 3px rgba(20, 30, 80, 0.14), 0 0 0 0.5px rgba(20, 30, 80, 0.05);
}
.pe-ws-cards--segmented .pe-ws-card:has(.pe-ws-card-radio:checked) .pe-ws-card-title { color: var(--pdfraj-accent-hover); font-weight: 700; }

/* Quality preset cards — lighter, less dense, consistent padding. Scoped to
 * :not(.pe-ws-cards--segmented) so these never override the segmented control
 * (same specificity, defined later — would otherwise bleed in). */
.pe-ws-adv-box .pe-ws-cards:not(.pe-ws-cards--segmented) { gap: var(--pdfraj-sp-2); }
.pe-ws-adv-box .pe-ws-cards:not(.pe-ws-cards--segmented) .pe-ws-card { padding: var(--pdfraj-sp-3) var(--pdfraj-sp-3); gap: var(--pdfraj-sp-3); border-color: var(--pdfraj-bd); border-radius: var(--pdfraj-r-md); transition: border-color var(--pdfraj-ws-ease), background var(--pdfraj-ws-ease), box-shadow var(--pdfraj-ws-ease); }
/* More air between title and description -> easier to read multi-line specs. */
.pe-ws-adv-box .pe-ws-cards:not(.pe-ws-cards--segmented) .pe-ws-card-txt { gap: 0.22rem; }
.pe-ws-adv-box .pe-ws-cards:not(.pe-ws-cards--segmented) .pe-ws-card-title { font-size: var(--pdfraj-fs-base); }
.pe-ws-adv-box .pe-ws-cards:not(.pe-ws-cards--segmented) .pe-ws-card-desc { font-size: var(--pdfraj-fs-xs); color: var(--pdfraj-text-muted); line-height: 1.45; }
/* Premium selected state: stronger inset ring + soft blue lift + very subtle blue fill. */
.pe-ws-adv-box .pe-ws-cards:not(.pe-ws-cards--segmented) .pe-ws-card:has(.pe-ws-card-radio:checked) { border-color: var(--pdfraj-accent); background: var(--pdfraj-accent-soft); box-shadow: var(--pdfraj-sh-selected); }
/* Better radio emphasis on the selected card. */
.pe-ws-adv-box .pe-ws-cards:not(.pe-ws-cards--segmented) .pe-ws-card:has(.pe-ws-card-radio:checked) .pe-ws-card-dot { border-color: var(--pdfraj-accent); box-shadow: var(--pdfraj-sh-ring); }

/* Target size + unit as one control on a single row: [ 1 ] [ MB v ]. */
.pe-ws-inline { display: flex; gap: var(--pdfraj-sp-2); align-items: stretch; }
.pe-ws-inline-num { flex: 1 1 auto; min-width: 0; }
.pe-ws-inline-unit {
	flex: 0 0 auto; width: auto; min-width: 88px; padding-right: 1.9rem; cursor: pointer;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a8096' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 0.7rem center;
}

/* Buttons */
.pe-ws-panel-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--pdfraj-sp-2);
	width: 100%; box-sizing: border-box; margin-top: var(--pdfraj-sp-2);
	padding: var(--pdfraj-sp-3) var(--pdfraj-sp-4); font: inherit; font-size: var(--pdfraj-fs-md); font-weight: 700;
	border: 1.5px solid var(--pdfraj-bd-strong); border-radius: var(--pdfraj-r-md); background: #fff; color: #3a3a55;
	cursor: pointer; text-decoration: none; transition: background var(--pdfraj-ws-ease), border-color var(--pdfraj-ws-ease), color var(--pdfraj-ws-ease);
}
.pe-ws-panel-btn:hover { border-color: var(--pdfraj-bd-strong); }
.pe-ws-panel-run { background: var(--pdfraj-accent); border-color: var(--pdfraj-accent); color: #fff; }
.pe-ws-panel-run:hover:not(:disabled) { background: var(--pdfraj-accent-hover); border-color: var(--pdfraj-accent-hover); color: #fff; }
/* The Download button is an <a>, so `.pdfraj-tool-v2 a { color: inherit }`
 * (specificity 0,1,1) outranks `.pe-ws-panel-run` (0,1,0) and the white label
 * falls back to the dark app text -- near-black on green, which fails WCAG AA.
 * This 0,2,0 rule restores the white label on every primary button, link or not. */
.pdfraj-app .pe-ws-panel-run,
.pdfraj-app .pe-ws-panel-run:hover:not(:disabled) { color: #fff; }
/* The panels have always DISABLED this button when the settings cannot produce
 * a useful result — no search text, no matched pages, an operation that would
 * hand back the original file unchanged. Nothing said so: it kept the accent
 * fill and its hover, so it read as "ready" while refusing to be clicked. The
 * client reported it against Split by Text; every panel in the workspace uses
 * this button, so every one of them was doing it. (Portal issue #14, issue 6.)
 * Matches the convention already used by .pe-ws-bm-reset and .pe-ws-fly-item. */
.pe-ws-panel-btn:disabled { opacity: 0.45; cursor: default; }
.pe-ws-panel-btn:disabled:hover { border-color: var(--pdfraj-bd); }
.pe-ws-panel-run:disabled:hover { background: var(--pdfraj-accent); border-color: var(--pdfraj-accent); }
.pe-ws-run-ic { width: 18px; height: 18px; }

/* Download split button (main + caret) */
.pe-ws-split { display: flex; margin-top: var(--pdfraj-sp-4); }
.pe-ws-split-main {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--pdfraj-sp-2);
	flex: 1; box-sizing: border-box; margin: 0;
	padding: var(--pdfraj-sp-3) var(--pdfraj-sp-4); font: inherit; font-size: var(--pdfraj-fs-md); font-weight: 700;
	border: 1.5px solid var(--pdfraj-accent); border-radius: var(--pdfraj-r-md) 0 0 var(--pdfraj-r-md); border-right: 0;
	background: var(--pdfraj-accent); color: #fff; text-decoration: none; cursor: pointer;
	transition: background var(--pdfraj-ws-ease);
}
.pe-ws-split-main:hover { background: var(--pdfraj-accent-hover); }
.pe-ws-split-caret {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; flex: 0 0 auto;
	border: 1.5px solid var(--pdfraj-accent); border-radius: 0 var(--pdfraj-r-md) var(--pdfraj-r-md) 0; border-left: 1px solid rgba(255, 255, 255, 0.35);
	background: var(--pdfraj-accent); color: #fff; cursor: pointer; transition: background var(--pdfraj-ws-ease);
}
.pe-ws-split-caret:hover { background: var(--pdfraj-accent-hover); }
.pe-ws-split-caret svg { width: 18px; height: 18px; }

/* Export As + dropdown menus */
.pe-ws-export { position: relative; }
.pe-ws-export-caret { width: 16px; height: 16px; margin-left: auto; color: #9aa0ad; }
.pe-ws-menu {
	margin: var(--pdfraj-sp-1) 0 0.2rem; padding: var(--pdfraj-sp-1);
	border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md); background: #fff;
	box-shadow: var(--pdfraj-sh-sm);
}
.pe-ws-menu-item {
	display: flex; align-items: center; gap: var(--pdfraj-sp-2); width: 100%;
	padding: var(--pdfraj-sp-2) var(--pdfraj-sp-2); font: inherit; font-size: var(--pdfraj-fs-base); font-weight: 600; color: #2a2a44;
	border: 0; border-radius: var(--pdfraj-r-sm); background: none; cursor: pointer; text-align: left;
}
.pe-ws-menu-item:hover:not(:disabled) { background: #f3f5fb; }
.pe-ws-menu-item:disabled { cursor: default; color: #9aa0ad; }
.pe-ws-menu-ic { display: inline-flex; color: var(--pdfraj-accent); }
.pe-ws-menu-ic svg { width: 16px; height: 16px; }
.pe-ws-menu-item.is-soon .pe-ws-menu-ic { color: #b6bcca; }
.pe-ws-menu-label { flex: 1; }
.pe-ws-soon {
	font-size: 0.58rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
	color: #9a6a00; background: #fff3d6; border-radius: var(--pdfraj-r-pill); padding: 0.08rem var(--pdfraj-sp-2);
}

/* Share / Print / Delete icon row */
.pe-ws-iconrow { display: flex; gap: var(--pdfraj-sp-2); margin-top: var(--pdfraj-sp-3); }
/* Compact square secondary actions (Share / Print / Discard) -- a small toolbar,
   not two large empty boxes stretched across the panel. */
.pe-ws-iconbtn {
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 auto; width: 42px; height: 42px; border: 1.5px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md);
	background: #fff; color: #4b5160; cursor: pointer; transition: background var(--pdfraj-ws-ease), color var(--pdfraj-ws-ease), border-color var(--pdfraj-ws-ease), box-shadow var(--pdfraj-ws-ease), transform var(--pdfraj-ws-ease);
}
/* Share / Print are neutral secondary actions -- a quiet grey hover with a small
   lift, never the brand green (reserved for the primary Download / Convert). */
.pe-ws-iconbtn:hover { background: #f4f6f8; color: var(--pdfraj-text); border-color: var(--pdfraj-bd-strong); box-shadow: 0 4px 12px -5px rgba(15, 23, 42, 0.24); transform: translateY(-1px); }
.pe-ws-iconbtn svg { width: 19px; height: 19px; }
/* Discard is destructive -- a warning (red) hover so it never reads as a
   confirming / primary action. */
.pe-ws-iconbtn--danger:hover { background: #fdecec; color: #c42b2b; border-color: #f1b4b4; box-shadow: 0 4px 12px -5px rgba(196, 43, 43, 0.3); transform: translateY(-1px); }

/* Transient toast (e.g. "Link copied") */
.pe-ws-toast {
	position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
	background: var(--pdfraj-text); color: #fff; font-size: var(--pdfraj-fs-sm); font-weight: 600;
	padding: var(--pdfraj-sp-2) var(--pdfraj-sp-4); border-radius: var(--pdfraj-r-md); box-shadow: var(--pdfraj-sh-sm);
	opacity: 1; transition: opacity var(--pdfraj-ws-ease); z-index: 80; pointer-events: none;
}
.pe-ws-toast.is-out { opacity: 0; }

/* Done meta */
.pe-ws-done-name {
	display: flex; align-items: center; gap: var(--pdfraj-sp-2); width: 100%; margin-bottom: var(--pdfraj-sp-1);
	border: 0; background: transparent; cursor: pointer; font: inherit; text-align: left;
	padding: 0.2rem 0; border-radius: var(--pdfraj-r-sm);
}
/* break-all split names mid-word ("...- PD / FPro FIXED.pdf"). overflow-wrap
 * takes the space/underscore breaks first and only splits a single long token
 * when it genuinely cannot fit. */
.pe-ws-done-name-txt { font-size: var(--pdfraj-fs-md); font-weight: 600; color: var(--pdfraj-text); word-break: normal; overflow-wrap: anywhere; min-width: 0; }
.pe-ws-done-name-pencil { width: 14px; height: 14px; color: #b0b5c2; flex: 0 0 auto; }
.pe-ws-done-name:hover .pe-ws-done-name-txt { color: var(--pdfraj-accent); }
.pe-ws-done-name:hover .pe-ws-done-name-pencil { color: var(--pdfraj-accent); }
.pe-ws-done-meta { font-size: var(--pdfraj-fs-base); color: #5a5a72; }
.pe-ws-done-new { color: #14905f; }
.pe-ws-done-pct { color: #14905f; }

/* "Or continue in" rows */
.pe-ws-cont { display: flex; flex-direction: column; gap: var(--pdfraj-sp-1); }
.pe-ws-cont-row {
	display: flex; align-items: center; gap: var(--pdfraj-sp-3); width: 100%;
	padding: var(--pdfraj-sp-2) var(--pdfraj-sp-3); font: inherit;
	border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md); background: #fbfbfd; color: #2a2a44;
	cursor: pointer; transition: background var(--pdfraj-ws-ease), border-color var(--pdfraj-ws-ease);
}
.pe-ws-cont-row:hover { background: #f3f5fb; border-color: var(--pdfraj-bd); }
.pe-ws-cont-ic {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: var(--pdfraj-r-sm); flex: 0 0 auto;
	background: var(--pdfraj-accent-soft); color: var(--pdfraj-accent);
}
.pe-ws-cont-ic svg { width: 16px; height: 16px; }
.pe-ws-cont-label { flex: 1; font-size: var(--pdfraj-fs-base); font-weight: 600; text-align: left; }
.pe-ws-cont-chev { width: 16px; height: 16px; color: #b6bcca; flex: 0 0 auto; }
.pe-ws-showmore {
	margin-top: var(--pdfraj-sp-2); padding: var(--pdfraj-sp-1) 0; font: inherit; font-size: var(--pdfraj-fs-base); font-weight: 600;
	border: 0; background: none; color: var(--pdfraj-accent); cursor: pointer;
}
.pe-ws-showmore:hover { text-decoration: underline; }

/* Start over — Smallpdf-style full-width reset at the bottom of the Done panel. */
.pe-ws-startover {
	display: flex; align-items: center; justify-content: center; gap: var(--pdfraj-sp-2);
	width: 100%; box-sizing: border-box; margin-top: var(--pdfraj-sp-4);
	padding: var(--pdfraj-sp-3) var(--pdfraj-sp-4); font: inherit; font-size: var(--pdfraj-fs-base); font-weight: 600;
	color: #3a3a55; background: #fff; border: 1.5px solid var(--pdfraj-bd-strong); border-radius: var(--pdfraj-r-md);
	cursor: pointer; transition: background var(--pdfraj-ws-ease), border-color var(--pdfraj-ws-ease), color var(--pdfraj-ws-ease), transform var(--pdfraj-ws-ease), box-shadow var(--pdfraj-ws-ease);
}
/* Subtle hover for Start over AND Re-edit (which shares this class): a touch of
   lift + shadow so the secondary actions feel responsive, not flat. */
.pe-ws-startover:hover { background: #f6f7fb; border-color: var(--pdfraj-bd-strong); color: var(--pdfraj-text); transform: translateY(-1px); box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.2); }
.pe-ws-startover:focus-visible { outline: none; box-shadow: var(--pdfraj-sh-ring); }
.pe-ws-startover-ic { width: 16px; height: 16px; color: #6b7280; flex: 0 0 auto; }
/* Cancel — the same shape as Start over (it is the same kind of thing: a way
   out), but quieter, because it sits under a spinner where the eye should stay
   on the progress, not on the escape hatch. Disabled while the stop is in
   flight so it cannot be pressed twice. */
.pe-ws-cancel { margin-top: var(--pdfraj-sp-3); color: #6b7280; font-weight: 500; }
.pe-ws-cancel:disabled { opacity: 0.6; cursor: default; }
.pe-ws-cancel:disabled:hover { background: #fff; border-color: var(--pdfraj-bd-strong); color: #6b7280; }

.pe-ws-spinner {
	width: 28px; height: 28px; border: 3px solid var(--pdfraj-bd); border-top-color: var(--pdfraj-accent);
	border-radius: 50%; animation: pe-ws-spin 0.8s linear infinite; margin: 0.4rem auto 0.9rem;
}
@keyframes pe-ws-spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
	.pe-ws-rail { width: 80px; }
	.pe-ws-side { width: 280px; }
	.pdfraj-app.pe-ws-has-rail.pdfraj-has-files,
	body.pdfraj-ws-v2 .pdfraj-app.pe-ws-has-rail.pdfraj-has-files,
	body.pdfraj-ws-v2.pdfraj-editing .pdfraj-app.pe-ws-has-rail.pdfraj-has-files { padding-left: 80px; padding-right: 280px; }
	body.pdfraj-ws-v2 .pdfraj-app.pdfraj-has-files .pe-ws-docbar { left: 80px; right: 280px; }
}

/* Mobile-only chrome: hamburger (in doc bar), rail close (X), backdrop. Hidden
 * on desktop. */
.pe-ws-menubtn, .pe-ws-rail-close, .pe-ws-backdrop { display: none; }

/* ===== Mobile workspace (Smallpdf pattern): the rail is a slide-in drawer and
 * the tool panel is a collapsible bottom sheet; the preview fills between. ===== */
@media (max-width: 768px) {
	/* No reserved side columns; the preview spans the width. */
	body.pdfraj-ws-v2 .pdfraj-app.pe-ws-has-rail.pdfraj-has-files,
	body.pdfraj-ws-v2.pdfraj-editing .pdfraj-app.pe-ws-has-rail.pdfraj-has-files {
		padding-left: 0 !important; padding-right: 0 !important;
	}
	/* Doc bar spans the width; hamburger on the right opens the drawer. */
	body.pdfraj-ws-v2 .pdfraj-app.pdfraj-has-files .pe-ws-docbar { left: 0; right: 0; }
	.pe-ws-menubtn {
		display: inline-flex; align-items: center; justify-content: center;
		width: 36px; height: 36px; margin-left: auto; flex: 0 0 auto;
		border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md); background: #fff; color: #2a2a44; cursor: pointer;
	}
	.pe-ws-menubtn svg { width: 20px; height: 20px; }

	/* Preview fills between doc bar and the sheet peek. */
	body.pdfraj-ws-v2.pdfraj-editing .pdfraj-tool-v2 .pe-editor {
		height: calc(100vh - var(--pe-ws-top, 0px) - var(--pe-ws-bar, 52px) - var(--pe-ws-doc, 46px) - 64px) !important;
	}
	body.pdfraj-editing .pdfraj-tool-v2 .pe-page { max-width: 100% !important; }

	/* ---- Rail = left drawer ---- */
	body.pdfraj-ws-v2 .pe-ws-rail {
		width: 82%; max-width: 320px; z-index: 90; top: 0; bottom: 0;
		transform: translateX(-100%); transition: transform var(--pdfraj-ws-ease);
		overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
		flex-direction: column; padding-bottom: 2rem;
	}
	body.pdfraj-ws-v2 .pe-ws-rail.is-open { transform: translateX(0); }
	.pe-ws-rail-close {
		display: flex; align-items: center; gap: var(--pdfraj-sp-2); width: 100%;
		padding: var(--pdfraj-sp-2) var(--pdfraj-sp-2) var(--pdfraj-sp-3); margin-bottom: var(--pdfraj-sp-1);
		border: 0; border-bottom: 1px solid rgba(255,255,255,0.12); background: none;
		color: rgba(255,255,255,0.85); font: inherit; font-size: var(--pdfraj-fs-base); font-weight: 600; cursor: pointer;
	}
	.pe-ws-rail-close svg { width: 18px; height: 18px; }
	/* Drawer categories: tile is a row header; its flyout shows inline (accordion). */
	.pe-ws-cat { width: 100%; }
	.pe-ws-btn { flex-direction: row; gap: var(--pdfraj-sp-2); justify-content: flex-start; padding: var(--pdfraj-sp-2) var(--pdfraj-sp-2); font-size: var(--pdfraj-fs-md); }
	.pe-ws-btn-ic { width: 34px; height: 34px; }
	/* The drawer's categories are DROPDOWNS. Every one used to be expanded at
	 * once: seven headings and thirty-seven rows in a single column, measured at
	 * 2,125px in an 860px viewport. Closed by default, the whole rail is one
	 * screen, and the category names start doing work instead of decorating.
	 *
	 * display:none rather than the desktop's visibility trick, because here the
	 * flyout is in normal flow — a hidden-but-present list would still take up
	 * all 2,125px. */
	.pe-ws-flyout {
		display: none;
		position: static; opacity: 1; visibility: visible; transform: none;
		min-width: 0; max-height: none; padding: 0 0 var(--pdfraj-sp-2) var(--pdfraj-sp-2);
		background: none; border: 0; border-radius: 0; box-shadow: none; color: #fff;
	}
	.pe-ws-cat.is-open > .pe-ws-flyout { display: block; }
	/* Search is not a category: it is open whenever the drawer is, and it needs
	 * no tile above it. On desktop the tile is the thing you hover to open the
	 * panel; here the panel is already open, so a row reading "Find" over a field
	 * whose placeholder reads "Search 45 tools…" is the same sentence twice. */
	.pe-ws-cat--find > .pe-ws-flyout { display: block; padding: var(--pdfraj-sp-2) 0 0; }
	.pe-ws-cat--find > .pe-ws-btn { display: none; }
	.pe-ws-cat--find { margin-bottom: var(--pdfraj-sp-1); padding-bottom: var(--pdfraj-sp-2); }
	/* A caret on the tile, so the row says it opens rather than navigates. */
	.pe-ws-cat:not(.pe-ws-cat--find) > .pe-ws-btn::after {
		content: ''; margin-left: auto; width: 8px; height: 8px; flex: 0 0 8px;
		border-right: 2px solid rgba(255, 255, 255, 0.45);
		border-bottom: 2px solid rgba(255, 255, 255, 0.45);
		transform: rotate(-45deg); transition: transform var(--pdfraj-ws-ease);
	}
	.pe-ws-cat.is-open > .pe-ws-btn::after { transform: rotate(45deg); }
	.pe-ws-cat.is-open > .pe-ws-btn { background: rgba(255, 255, 255, 0.07); }
	.pe-ws-flyout-head { display: none; }
	.pe-ws-fly-item { color: rgba(255,255,255,0.9); }
	.pe-ws-fly-item:hover:not(:disabled):not(.is-soon) { background: rgba(255,255,255,0.1); }
	/* The category hue survives into the drawer — it is the same chip, and the
	 * colour is what makes a list of fourteen scannable. */
	.pe-ws-fly-ic { background: color-mix(in srgb, var(--cat, #fff) 18%, transparent); color: var(--cat, #fff); }
	.pe-ws-fly-ext { color: rgba(255,255,255,0.5); }
	.pe-ws-fly-item.is-soon .pe-ws-fly-name { color: rgba(255,255,255,0.5); }

	/* Backdrop behind the drawer. */
	.pe-ws-backdrop { display: block; position: fixed; inset: 0; z-index: 85; background: rgba(15,23,42,0.45); }
	.pe-ws-backdrop:not(.is-show) { display: none; }

	/* ---- Tool panel = bottom sheet ---- */
	body.pdfraj-ws-v2 .pe-ws-side {
		top: auto; left: 0; right: 0; bottom: 0; width: 100%;
		max-height: 80vh; z-index: 80;
		border-left: 0; border-top: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-lg) var(--pdfraj-r-lg) 0 0;
		box-shadow: var(--pdfraj-sh-sm);
		transform: translateY(0); transition: transform var(--pdfraj-ws-ease);
	}
	/* Collapsed: slide down to a ~64px peek (just the header/handle visible). */
	body.pdfraj-ws-v2 .pe-ws-side.is-collapsed { transform: translateY(calc(100% - 64px)); }
	.pe-ws-side-head { position: relative; cursor: pointer; padding-right: 2.6rem; }
	.pe-ws-side-head::before {
		content: ''; position: absolute; top: 0.5rem; left: 50%; transform: translateX(-50%);
		width: 34px; height: 4px; border-radius: var(--pdfraj-r-sm); background: #d6d9e2;
	}
	.pe-ws-side-head::after {
		content: ''; position: absolute; right: 1.1rem; top: 50%; width: 9px; height: 9px;
		border-right: 2px solid #9aa0ad; border-bottom: 2px solid #9aa0ad;
		transform: translateY(-70%) rotate(-135deg); transition: transform var(--pdfraj-ws-ease);
	}
	.pe-ws-side.is-collapsed .pe-ws-side-head::after { transform: translateY(-30%) rotate(45deg); }
	.pe-ws-side-body { max-height: calc(80vh - 140px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
	/* Advanced panel on narrow screens: larger tap targets + a little more air. */
	.pe-ws-adv-box .pe-ws-field { margin-bottom: 1.35rem; }
	.pe-ws-adv-box .pe-ws-cards:not(.pe-ws-cards--segmented) .pe-ws-card { padding: var(--pdfraj-sp-3); }
	.pe-ws-cards--segmented .pe-ws-card { min-height: 44px; }
	.pe-ws-inline-num, .pe-ws-inline-unit { min-height: 46px; }
	.pe-ws-inline-unit { min-width: 96px; }
}

/* Phase 10: Page Studio upload/parse loading state (smallpdf-style spinner). */
.ps-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--pdfraj-sp-3); min-height:360px; width:100%; color:#475070; }
.ps-spinner { width:42px; height:42px; border-radius:50%; border:3px solid var(--pdfraj-bd); border-top-color:var(--pdfraj-accent); animation: pe-ws-spin 0.8s linear infinite; }
.ps-loading-txt { font-size: var(--pdfraj-fs-md); font-weight:600; letter-spacing:-.2px; }

.pe-ws-textarea { resize: vertical; min-height: 92px; font: inherit; line-height: 1.5; }

/* ---- Sign PDF: signature pad (Phase 10 W2e) ---- */
.pe-ws-sign-pad { border: 1.5px dashed var(--pdfraj-bd-strong); border-radius: var(--pdfraj-r-md); background: #fbfcfe; padding: var(--pdfraj-sp-1); margin: var(--pdfraj-sp-2) 0 var(--pdfraj-sp-2); }
.pe-ws-sign-canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; background: #fff; border-radius: var(--pdfraj-r-sm); }
.pe-ws-sign-clear { display: inline-block; margin: 0 0 var(--pdfraj-sp-3); padding: var(--pdfraj-sp-1) var(--pdfraj-sp-3); font-size: var(--pdfraj-fs-sm); font-weight: 600; color: #5a5a72; background: #fff; border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-sm); cursor: pointer; }
.pe-ws-sign-clear:hover { border-color: var(--pdfraj-bd-strong); color: var(--pdfraj-text); }
.pe-ws-check { width: 18px; height: 18px; accent-color: var(--pdfraj-accent); cursor: pointer; }

/* ---- 11A.1 Universal error state (inside the workspace takeover) ----
 * A corrupt / unsupported / parse failure renders as a centered error card with
 * a Start Over button — INSIDE the workspace, never on the re-exposed landing.
 * Applies to both the page-studio and editor (Compress) bases. */
body.pdfraj-editing .pdfraj-app .pdfraj-error:not([hidden]) {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 95;
	width: min(92vw, 440px);
	margin: 0;
	padding: var(--pdfraj-sp-5) var(--pdfraj-sp-5) var(--pdfraj-sp-5);
	background: #fff;
	border: 1px solid var(--pdfraj-bd);
	border-top: 4px solid var(--pdfraj-danger, #dc2626);
	border-radius: var(--pdfraj-r-lg);
	box-shadow: var(--pdfraj-sh-sm);
	color: var(--pdfraj-text);
	text-align: center;
}
body.pdfraj-editing .pdfraj-app .pdfraj-error .error-title { font-size: var(--pdfraj-fs-xl); line-height: 1.35; color: var(--pdfraj-text); margin-bottom: var(--pdfraj-sp-1); }
body.pdfraj-editing .pdfraj-app .pdfraj-error .error-detail { color: var(--pdfraj-text-muted); font-size: var(--pdfraj-fs-md); }
/* Start Over button, centered just beneath the error card. */
body.pdfraj-editing .pdfraj-app .pdfraj-actions {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, 100px);
	z-index: 96;
	margin: 0;
}
/* Soft backdrop so the error reads as a modal over the workspace. */
body.pdfraj-editing .pdfraj-app:has(.pdfraj-error:not([hidden]))::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 94;
	background: rgba(15, 23, 42, 0.28);
}

/* ---- 11A.4 Target-size result summary ---- */
.pe-ws-target-summary { margin: var(--pdfraj-sp-4) 0 0.2rem; border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-lg); overflow: hidden; }
.pe-ws-target-row { display: flex; justify-content: space-between; align-items: center; gap: var(--pdfraj-sp-4); padding: var(--pdfraj-sp-2) var(--pdfraj-sp-3); font-size: var(--pdfraj-fs-base); border-top: 1px solid var(--pdfraj-bd); }
.pe-ws-target-row:first-child { border-top: 0; }
.pe-ws-target-k { color: #667085; }
.pe-ws-target-v { font-weight: 700; color: var(--pdfraj-text); }
.pe-ws-target-row.is-ok { background: #ecfdf3; }
.pe-ws-target-row.is-ok .pe-ws-target-v { color: #067647; }
.pe-ws-target-row.is-warn { background: #fffaeb; }
.pe-ws-target-row.is-warn .pe-ws-target-v { color: #b54708; }

/* ---- Create Forms view -------------------------------------------------------
 * The create-forms editor (pdfraj-create-forms.js) builds its DOM into the
 * workspace mount. Its chrome deliberately mirrors the PDF Editor / Sign shell
 * so the tools read as one product: ONE top toolbar (history + field types), a
 * page thumbnail rail on the left that also owns the page operations, and a
 * floating page/zoom pill over the canvas. The values below are taken from
 * pdfraj-editor.css (.pe-toolbar / .pe-rail / .pe-thumb / .pe-navpill) on
 * purpose — if that shell is restyled, restyle this with it.
 * Field PROPERTIES live in the shell's right rail, not here. The overlay/stage
 * positioning is load-bearing for the placement math — field boxes are
 * positioned against the canvas pixel box. */
/* Same fix as the crop view: the mount's own canvas band (1.75rem padding +
 * 1.25rem top margin) stacks on top of this view's padding, leaving ~64px of
 * dead space above the toolbar and eating width on both sides. This view brings
 * its own frame, so the mount's is pure waste — drop it for this view only,
 * exactly like :has(.cr-ws) and :has(.ps-grid) do. */
/* margin-top:0 — the editor's toolbar butts straight against the doc bar, and
 * an 8px strip of page background between the two reads as a seam. (The crop
 * view keeps its margin: its grey stage band wants the separation.) */
.pdfraj-app.pdfraj-has-files .pdfraj-workspace-mount:has(.cf-ws) {
	padding: 0; margin-top: 0; background: transparent;
}
/* No outer border and no radius: Sign and the editor run their toolbar flush to
 * the edges with only a bottom hairline, so a rounded, bordered card here reads
 * as a different product. The toolbar's own border-bottom is the only line. */
.pdfraj-workspace-mount .cf-ws {
	display: flex; flex-direction: column; width: 100%; min-height: 0; box-sizing: border-box;
	border: 0; border-radius: 0; background: #f5f5f5; overflow: hidden;
}

/* toolbar — .pe-toolbar */
/* One row, like the editor's: history stays pinned and the TOOL group scrolls
 * internally if the column gets too narrow (the editor does exactly this).
 * Wrapping to a second row was tried first and reads as a broken toolbar. */
/* The row WRAPS. It carries undo/redo, Blank page and eleven labelled tools;
 * shaving button metrics to keep them on one line bought 8px at a time and
 * clipped the last button in half every time something was added. Wrapping to a
 * second row costs 42px of height on a narrow mount and never hides a tool. */
.pdfraj-workspace-mount .cf-toolbar { display: flex; align-items: center; flex-wrap: wrap; row-gap: 0.3rem; gap: 0.32rem; padding: 0.5rem 0.7rem; background: #fff; border-bottom: 1px solid var(--pdfraj-bd); flex: 0 0 auto; }
.pdfraj-workspace-mount .cf-tb-group { display: flex; align-items: center; gap: 0.15rem; flex: 0 0 auto; }
.pdfraj-workspace-mount .cf-tb-tools { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 0.3rem; }
.pdfraj-workspace-mount .cf-tb-div { width: 1px; height: 22px; background: var(--pdfraj-bd); flex: none; }
.pdfraj-workspace-mount .cf-tb-btn { display: inline-flex; align-items: center; gap: 0.24rem; white-space: nowrap; min-width: 34px; height: 34px; padding: 0 0.34rem; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #333; cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 500; transition: background .15s, color .15s; }
.pdfraj-workspace-mount .cf-tb-btn:hover:not(:disabled) { background: #f3f4f6; }
.pdfraj-workspace-mount .cf-tb-btn:disabled { opacity: .4; cursor: not-allowed; }
.pdfraj-workspace-mount .cf-tb-btn[aria-pressed="true"] { background: var(--pdfraj-accent); color: #fff; }
/* flex:none — without it the row squashes every icon to a sliver before it
 * ever considers wrapping. */
.pdfraj-workspace-mount .cf-tb-btn svg { display: block; flex: none; }
/* The eight type buttons carry a label each and the row has no more room —
 * their icons run a size smaller than the history/page ones so the last button
 * is not clipped at a ~915px mount. */
.pdfraj-workspace-mount .cf-tb-tool svg { width: 14px; height: 14px; }

/* body: rail + stage */
.pdfraj-workspace-mount .cf-body { display: flex; flex: 1 1 auto; min-height: 0; }

/* thumbnail rail — .pe-rail / .pe-thumb */
.pdfraj-workspace-mount .cf-rail { flex: 0 0 136px; overflow-y: auto; padding: 0.75rem; background: #fff; border-right: 1px solid var(--pdfraj-bd); display: flex; flex-direction: column; }
.pdfraj-workspace-mount .cf-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 .15s, background .15s; }
.pdfraj-workspace-mount .cf-thumb:hover { background: #f5f5f5; border-color: var(--pdfraj-bd); }
.pdfraj-workspace-mount .cf-thumb.is-active { border-color: var(--pdfraj-accent); background: var(--pdfraj-accent-soft, rgba(82, 71, 220, .08)); }
.pdfraj-workspace-mount .cf-thumb-img { width: 100%; min-height: 64px; display: flex; justify-content: center; background: #fff; border: 1px solid var(--pdfraj-bd); border-radius: 4px; overflow: hidden; }
.pdfraj-workspace-mount .cf-thumb-img canvas { width: 100%; height: auto; display: block; }
.pdfraj-workspace-mount .cf-thumb-img:empty { background: #eef0f2; }
/* An inserted page has no source to paint — show it as an empty sheet, not as
 * a thumbnail that looks like it failed to load. */
.pdfraj-workspace-mount .cf-thumb-img.is-blank, .pdfraj-workspace-mount .cf-thumb-img.is-blank:empty { background: #fff; min-height: 84px; }
.pdfraj-workspace-mount .cf-thumb-num { font-size: 0.75rem; color: var(--pdfraj-text-muted, #777); font-variant-numeric: tabular-nums; }
.pdfraj-workspace-mount .cf-thumb-tools { display: flex; justify-content: center; gap: 0.15rem; opacity: 0; pointer-events: none; transition: opacity .12s; }
.pdfraj-workspace-mount .cf-thumb:hover .cf-thumb-tools, .pdfraj-workspace-mount .cf-thumb.is-active .cf-thumb-tools { opacity: 1; pointer-events: auto; }
.pdfraj-workspace-mount .cf-tt-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--pdfraj-bd); border-radius: 6px; background: #fff; color: #444; cursor: pointer; }
.pdfraj-workspace-mount .cf-tt-btn:hover:not(:disabled) { background: #eef0f2; color: var(--pdfraj-accent); }
.pdfraj-workspace-mount .cf-tt-btn:disabled { opacity: .35; cursor: not-allowed; }
.pdfraj-workspace-mount .cf-tt-btn svg { width: 15px; height: 15px; display: block; }
.pdfraj-workspace-mount .cf-thumb-ins { display: flex; align-items: center; justify-content: center; height: 16px; }
.pdfraj-workspace-mount .cf-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); color: #fff; cursor: pointer; opacity: 0; transform: scale(.85); transition: opacity .12s, transform .12s; box-shadow: 0 2px 6px rgba(15, 23, 42, .22); }
.pdfraj-workspace-mount .cf-thumb-ins:hover .cf-thumb-ins-btn, .pdfraj-workspace-mount .cf-thumb-ins-btn:focus-visible { opacity: 1; transform: scale(1); }
.pdfraj-workspace-mount .cf-thumb-ins-btn svg { width: 13px; height: 13px; display: block; }

/* floating page / zoom pill — .pe-navpill */
.pdfraj-workspace-mount .cf-navpill { position: sticky; bottom: 18px; z-index: 30; display: flex; align-items: center; gap: 0.05rem; width: fit-content; margin: auto auto 0; padding: 0.28rem 0.5rem; border-radius: 999px; background: #1f2a44; color: #fff; box-shadow: 0 10px 28px -8px rgba(15, 23, 42, .55), 0 2px 6px rgba(15, 23, 42, .25); }
.pdfraj-workspace-mount .cf-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 .12s; }
.pdfraj-workspace-mount .cf-np-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .14); }
.pdfraj-workspace-mount .cf-np-btn:disabled { opacity: .35; cursor: default; }
.pdfraj-workspace-mount .cf-np-btn.is-on { background: rgba(255, 255, 255, .22); color: #ffd79a; }
.pdfraj-workspace-mount .cf-np-label { padding: 0 0.4rem; font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pdfraj-workspace-mount .cf-np-zoom { padding: 0 0.5rem; height: 30px; border: none; border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 0.82rem; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }
.pdfraj-workspace-mount .cf-np-zoom:hover:not(:disabled) { background: rgba(255, 255, 255, .14); }
.pdfraj-workspace-mount .cf-np-sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .22); margin: 0 0.25rem; }

/* stage */
/* scrollbar-gutter keeps the vertical scrollbar's width reserved at all times.
 * Without it the width-fit is measured on a band that has no scrollbar yet, the
 * taller-than-band page then adds one, and the page overflows sideways.
 * flex-direction:column is what lets the pill stick to the bottom of the
 * scroller rather than scrolling away with the page. */
.pdfraj-workspace-mount .cf-stage-wrap { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; scrollbar-gutter: stable; background: #eef0f3; padding: var(--pdfraj-sp-3); display: flex; flex-direction: column; align-items: center; }
/* flex:none — in the column scroller the stage must keep its rendered height,
 * or the flex algorithm shrinks it and the overlay stops lining up. */
.pdfraj-workspace-mount .cf-stage { position: relative; flex: none; line-height: 0; box-shadow: var(--pdfraj-sh-md); background: #fff; }
.pdfraj-workspace-mount .cf-stage canvas { display: block; }
.pdfraj-workspace-mount .cf-overlay { position: absolute; inset: 0; cursor: crosshair; }
.pdfraj-workspace-mount .cf-overlay.is-idle { cursor: default; }

/* field boxes */
.pdfraj-workspace-mount .cf-field { position: absolute; box-sizing: border-box; border: 1px solid transparent; display: flex; align-items: center; padding: 0 6px; cursor: move; overflow: visible; user-select: none; line-height: 1.3; }
.pdfraj-workspace-mount .cf-field.is-selected { z-index: 6; }
.pdfraj-workspace-mount .cf-field.is-selected::before { content: ""; position: absolute; inset: -2px; border: 1.5px dashed var(--pdfraj-accent); pointer-events: none; }
.pdfraj-workspace-mount .cf-field .cf-txt { width: 100%; overflow: hidden; white-space: nowrap; pointer-events: none; }
/* Textarea wraps by declaration; .is-paragraph is any OTHER text box drawn tall
 * enough to be one (pdfraj-create-forms.js, PARAGRAPH_RATIO). The handler flags
 * both Multiline, so both have to look the same here. */
.pdfraj-workspace-mount .cf-field.cf-t-textarea,
.pdfraj-workspace-mount .cf-field.is-paragraph { align-items: flex-start; padding-top: 4px; }
.pdfraj-workspace-mount .cf-field.cf-t-textarea .cf-txt,
.pdfraj-workspace-mount .cf-field.is-paragraph .cf-txt { white-space: pre-wrap; }
.pdfraj-workspace-mount .cf-field .cf-txt.is-placeholder { color: #8b8996; }
.pdfraj-workspace-mount .cf-field .cf-txt.is-editing { pointer-events: auto; outline: none; cursor: text; white-space: pre-wrap; }
.pdfraj-workspace-mount .cf-field.cf-t-checkbox, .pdfraj-workspace-mount .cf-field.cf-t-radio { padding: 0; justify-content: center; }
.pdfraj-workspace-mount .cf-field .cf-mark { width: 64%; height: 64%; box-sizing: border-box; border: 1.5px solid #54525F; }
.pdfraj-workspace-mount .cf-field.cf-t-radio .cf-mark { border-radius: 50%; }
/* Signature is a PLAIN area — whatever is inside it here would be a lie, since
 * the PDF gets only the outline. The hint is editor chrome: it appears while the
 * box is selected so the author can tell which box is which, and never prints. */
.pdfraj-workspace-mount .cf-field.cf-t-signature { align-items: center; justify-content: center; }
.pdfraj-workspace-mount .cf-field .cf-sighint { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #a5a3ae; opacity: 0; transition: opacity .12s; pointer-events: none; }
.pdfraj-workspace-mount .cf-field.cf-t-signature:hover .cf-sighint,
.pdfraj-workspace-mount .cf-field.cf-t-signature.is-selected .cf-sighint { opacity: 1; }
/* Dropdown: a full-height rule down the middle of a 30pt box read as a split
 * box rather than a select. A chevron with air around it is the whole cue. */
.pdfraj-workspace-mount .cf-field.cf-t-dropdown { padding-right: 2px; }
.pdfraj-workspace-mount .cf-field .cf-caret { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 5px; color: #8b8996; pointer-events: none; flex: none; }
.pdfraj-workspace-mount .cf-hd { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid var(--pdfraj-accent); border-radius: 2px; z-index: 7; }
.pdfraj-workspace-mount .cf-hd-br { right: -5px; bottom: -5px; cursor: nwse-resize; }
.pdfraj-workspace-mount .cf-hd-bl { left: -5px; bottom: -5px; cursor: nesw-resize; }
.pdfraj-workspace-mount .cf-hd-tr { right: -5px; top: -5px; cursor: nesw-resize; }
.pdfraj-workspace-mount .cf-hd-tl { left: -5px; top: -5px; cursor: nwse-resize; }
.pdfraj-workspace-mount .cf-hd-mr { right: -5px; top: calc(50% - 4px); cursor: ew-resize; }
.pdfraj-workspace-mount .cf-hd-ml { left: -5px; top: calc(50% - 4px); cursor: ew-resize; }
.pdfraj-workspace-mount .cf-hd-tc { top: -5px; left: calc(50% - 4px); cursor: ns-resize; }
.pdfraj-workspace-mount .cf-hd-bc { bottom: -5px; left: calc(50% - 4px); cursor: ns-resize; }
.pdfraj-workspace-mount .cf-rubber { position: absolute; border: 1.5px dashed var(--pdfraj-accent); background: rgba(82, 71, 220, .08); pointer-events: none; }

/* Alignment guides. The pale set is every placed field's edges, always on while
 * the toggle in the nav pill is on; .is-snap is the line the drag in progress
 * actually locked onto, so it has to read louder than the rest. Both sit UNDER
 * the field boxes (z-index 0 vs the boxes' auto/6) and never take a pointer. */
.pdfraj-workspace-mount .cf-guide { position: absolute; z-index: 0; pointer-events: none; }
.pdfraj-workspace-mount .cf-guide-v { top: 0; bottom: 0; width: 0; border-left: 1px dashed rgba(224, 169, 62, .55); }
.pdfraj-workspace-mount .cf-guide-h { left: 0; right: 0; height: 0; border-top: 1px dashed rgba(224, 169, 62, .55); }
.pdfraj-workspace-mount .cf-guide.is-snap { z-index: 8; }
.pdfraj-workspace-mount .cf-guide-v.is-snap { border-left: 1px dashed #E08A1E; }
.pdfraj-workspace-mount .cf-guide-h.is-snap { border-top: 1px dashed #E08A1E; }

/* Field caption — printed text that belongs to the field above/beside it. */
.pdfraj-workspace-mount .cf-flabel { position: absolute; left: 0; white-space: nowrap; line-height: 1.35; pointer-events: none; }

/* floating per-field toolbar + its popovers */
.pdfraj-workspace-mount .cf-floater { position: absolute; display: flex; align-items: center; gap: 1px; background: #fff; border: 1px solid var(--pdfraj-accent); border-radius: var(--pdfraj-r-md); padding: 4px; box-shadow: var(--pdfraj-sh-md); z-index: 12; white-space: nowrap; line-height: 1; }
.pdfraj-workspace-mount .cf-fl-btn { display: inline-flex; align-items: center; gap: 3px; height: 30px; padding: 0 7px; border: 0; background: none; border-radius: var(--pdfraj-r-sm); cursor: pointer; color: #5b6472; font-size: var(--pdfraj-fs-xs); font-weight: 600; }
.pdfraj-workspace-mount .cf-fl-btn:hover { background: var(--pdfraj-accent-soft, #eef0ff); color: var(--pdfraj-accent); }
.pdfraj-workspace-mount .cf-fl-btn.is-on { background: var(--pdfraj-accent-soft, #eef0ff); color: var(--pdfraj-accent); }
.pdfraj-workspace-mount .cf-fl-btn.is-danger:hover { background: #fcebeb; color: #a32d2d; }
.pdfraj-workspace-mount .cf-fsep { width: 1px; height: 20px; background: var(--pdfraj-bd); margin: 0 2px; }
.pdfraj-workspace-mount .cf-car { font-size: 8px; opacity: .55; }
.pdfraj-workspace-mount .cf-cdot { width: 13px; height: 13px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .15); }
.pdfraj-workspace-mount .cf-cline { width: 14px; height: 3px; border-radius: 2px; }
.pdfraj-workspace-mount .cf-aa { font-size: 10px; font-weight: 700; }
.pdfraj-workspace-mount .cf-aA { font-size: 15px; font-weight: 700; }
.pdfraj-workspace-mount .cf-ta { font-weight: 700; }
.pdfraj-workspace-mount .cf-pop { position: absolute; background: #fff; border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md); box-shadow: var(--pdfraj-sh-md); padding: var(--pdfraj-sp-2); z-index: 14; min-width: 150px; line-height: 1.4; }
.pdfraj-workspace-mount .cf-prow { display: flex; align-items: center; gap: var(--pdfraj-sp-2); padding: 6px 9px; border-radius: var(--pdfraj-r-sm); cursor: pointer; font-size: var(--pdfraj-fs-sm); color: #1c2330; }
.pdfraj-workspace-mount .cf-prow:hover { background: #f4f5f7; }
.pdfraj-workspace-mount .cf-prow.is-on { background: var(--pdfraj-accent-soft, #eef0ff); color: var(--pdfraj-accent); }
.pdfraj-workspace-mount .cf-poplbl { display: block; font-size: var(--pdfraj-fs-xs); color: var(--pdfraj-text-muted); margin: 2px 0 7px; }
.pdfraj-workspace-mount .cf-pophint { display: block; font-size: var(--pdfraj-fs-xs); color: var(--pdfraj-text-muted); margin-top: 4px; }
.pdfraj-workspace-mount .cf-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.pdfraj-workspace-mount .cf-sw { position: relative; width: 24px; height: 24px; border-radius: var(--pdfraj-r-sm); border: 1px solid rgba(0, 0, 0, .1); cursor: pointer; }
.pdfraj-workspace-mount .cf-sw.is-on { outline: 2px solid var(--pdfraj-accent); outline-offset: 1px; }
.pdfraj-workspace-mount .cf-sw.is-none::after { content: ""; position: absolute; top: 50%; left: -2px; width: 28px; height: 1.5px; background: #dc2626; transform: rotate(-45deg); }
.pdfraj-workspace-mount .cf-popta { width: 200px; min-height: 82px; resize: vertical; box-sizing: border-box; padding: var(--pdfraj-sp-2); border: 1px solid var(--pdfraj-bd-strong); border-radius: var(--pdfraj-r-sm); font-size: var(--pdfraj-fs-sm); font-family: inherit; }
.pdfraj-workspace-mount .cf-frow { display: flex; gap: var(--pdfraj-sp-2); margin-bottom: var(--pdfraj-sp-2); }
.pdfraj-workspace-mount .cf-frow label { flex: 1; display: block; font-size: var(--pdfraj-fs-xs); color: var(--pdfraj-text-muted); }
.pdfraj-workspace-mount .cf-frow input { width: 100%; box-sizing: border-box; margin-top: 3px; padding: 6px 8px; border: 1px solid var(--pdfraj-bd-strong); border-radius: var(--pdfraj-r-sm); font-size: var(--pdfraj-fs-sm); font-family: inherit; }
/* any-colour row + exact font size */
.pdfraj-workspace-mount .cf-hexrow { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.pdfraj-workspace-mount .cf-hexdot { width: 30px; height: 28px; padding: 0; border: 1px solid var(--pdfraj-bd-strong); border-radius: var(--pdfraj-r-sm); background: #fff; cursor: pointer; flex: none; }
.pdfraj-workspace-mount .cf-hextext { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 5px 8px; border: 1px solid var(--pdfraj-bd-strong); border-radius: var(--pdfraj-r-sm); font-size: var(--pdfraj-fs-sm); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.pdfraj-workspace-mount .cf-popcustom { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--pdfraj-bd); }
.pdfraj-workspace-mount .cf-popnum { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--pdfraj-bd-strong); border-radius: var(--pdfraj-r-sm); font-size: var(--pdfraj-fs-sm); font-family: inherit; }

/* ---- Create Forms: field properties in the shell rail ---------------------- */
.pe-ws-side-count { font-size: var(--pdfraj-fs-base); font-weight: 600; color: #344054; margin: 0 0 var(--pdfraj-sp-3); }
.pe-ws-cf-card { border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md); padding: var(--pdfraj-sp-3); margin-bottom: var(--pdfraj-sp-3); }
.pe-ws-cf-card h4 { margin: 0 0 var(--pdfraj-sp-3); font-size: var(--pdfraj-fs-sm); font-weight: 700; color: #1c2330; }
.pe-ws-cf-card label { display: block; font-size: var(--pdfraj-fs-xs); font-weight: 600; color: #5b6472; margin: 0 0 var(--pdfraj-sp-1); }
.pe-ws-cf-row { margin-bottom: var(--pdfraj-sp-3); }
.pe-ws-cf-card input[type="text"], .pe-ws-cf-card textarea { width: 100%; box-sizing: border-box; padding: var(--pdfraj-sp-2); border: 1px solid var(--pdfraj-bd-strong); border-radius: var(--pdfraj-r-sm); font-size: var(--pdfraj-fs-sm); font-family: inherit; }
.pe-ws-cf-card textarea { min-height: 62px; resize: vertical; }
.pe-ws-cf-check { display: flex; align-items: center; gap: var(--pdfraj-sp-2); font-size: var(--pdfraj-fs-sm); font-weight: 600; color: #1c2330; cursor: pointer; margin-bottom: var(--pdfraj-sp-2); }
.pe-ws-cf-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--pdfraj-accent); }
.pe-ws-cf-note { font-size: var(--pdfraj-fs-xs); color: var(--pdfraj-text-muted); line-height: 1.5; margin: 0; }
.pe-ws-cf-del { width: 100%; margin-top: var(--pdfraj-sp-2); padding: var(--pdfraj-sp-2); border: 1px solid var(--pdfraj-bd-strong); background: #fff; border-radius: var(--pdfraj-r-sm); font-size: var(--pdfraj-fs-sm); font-weight: 600; color: #a32d2d; cursor: pointer; }
.pe-ws-cf-del:hover { background: #fcebeb; border-color: #e3b4b4; }
.pe-ws-cf-pages { font-size: var(--pdfraj-fs-xs); color: var(--pdfraj-text-muted); margin: 0 0 var(--pdfraj-sp-3); }

/* Apply-changes gate. Takes the download button's place while a field edit is
 * unacknowledged, so it reads as "finish this, then continue" rather than as a
 * disabled control with no explanation. */
.pe-ws-cf-applybar { margin-top: var(--pdfraj-sp-3); padding: var(--pdfraj-sp-3); border: 1px solid var(--pdfraj-accent); border-radius: var(--pdfraj-r-md); background: var(--pdfraj-accent-soft, #eef0ff); }
.pe-ws-cf-applybar .pe-ws-cf-note { margin-bottom: var(--pdfraj-sp-2); color: #33406b; }
.pe-ws-cf-apply { width: 100%; padding: var(--pdfraj-sp-2) var(--pdfraj-sp-3); border: 0; border-radius: var(--pdfraj-r-sm); background: var(--pdfraj-accent); color: #fff; font-size: var(--pdfraj-fs-sm); font-weight: 700; cursor: pointer; }
.pe-ws-cf-apply:hover { filter: brightness(1.08); }

/* The empty-text-box warning carries its own fix. */
.pe-ws-cf-errfix { display: block; width: 100%; margin-top: var(--pdfraj-sp-2); padding: var(--pdfraj-sp-2); border: 1px solid currentColor; border-radius: var(--pdfraj-r-sm); background: #fff; font-size: var(--pdfraj-fs-sm); font-weight: 600; cursor: pointer; }
.pe-ws-cf-errfix:hover { background: #fcebeb; }

/* Locked preview: once a form has been produced, the page is a RESULT, not a
 * canvas. Pointer events are already off — this stops it LOOKING editable. */
.pdfraj-workspace-mount .cf-ws.is-locked .cf-toolbar { opacity: .45; }
.pdfraj-workspace-mount .cf-ws.is-locked .cf-overlay { cursor: default; }
.pdfraj-workspace-mount .cf-ws.is-locked .cf-guide { display: none; }
.pdfraj-workspace-mount .cf-ws.is-locked .cf-field { cursor: default; }

/* Dropdown choices — one row per choice, each with reorder + remove. */
.pe-ws-cf-opts { margin-bottom: var(--pdfraj-sp-3); }
.pe-ws-cf-optlist { display: flex; flex-direction: column; gap: var(--pdfraj-sp-1); }
.pe-ws-cf-optrow { display: flex; align-items: center; gap: 4px; }
.pe-ws-cf-optrow input[type="text"] { flex: 1 1 auto; min-width: 0; }
.pe-ws-cf-optbtn { flex: none; width: 26px; height: 30px; padding: 0; border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-sm); background: #fff; color: #5b6472; font-size: 13px; line-height: 1; cursor: pointer; }
.pe-ws-cf-optbtn:hover:not(:disabled) { background: #f4f5f7; color: var(--pdfraj-accent); border-color: var(--pdfraj-bd-strong); }
.pe-ws-cf-optbtn:disabled { opacity: .3; cursor: not-allowed; }
.pe-ws-cf-optrm:hover:not(:disabled) { background: #fcebeb; color: #a32d2d; border-color: #e3b4b4; }
.pe-ws-cf-optadd { margin-top: 2px; padding: var(--pdfraj-sp-2); border: 1px dashed var(--pdfraj-bd-strong); border-radius: var(--pdfraj-r-sm); background: #fff; color: var(--pdfraj-accent); font-size: var(--pdfraj-fs-xs); font-weight: 600; cursor: pointer; }
.pe-ws-cf-optadd:hover { background: var(--pdfraj-accent-soft, #eef0ff); }

/* ---- Crop PDF view -----------------------------------------------------------
 * pdfraj-crop-view.js builds a toolbar + a pdf.js stage with a draggable crop
 * box + a per-page strip into the workspace mount. Two load-bearing bits:
 *   1. .cr-stage is position:relative and the overlay is pinned to it — the crop
 *      math positions the box against the CANVAS pixel box, so any padding or
 *      border between them would offset every crop.
 *   2. the dim outside the box is one huge spread box-shadow on .cr-box, clipped
 *      by .cr-overlay's overflow:hidden. That keeps the mask exact at any size
 *      with no second element to keep in sync. */
/* The mount's own canvas band (1.75rem padding + 1.25rem top margin) stacked on
 * top of this view's own padding: ~64px of dead space above the toolbar, and the
 * same band eating width on both sides. The crop view brings its own grey stage
 * band, so the mount's is pure waste here — drop it for this view only
 * (pdfraj-workspace.css uses :has(.ps-grid) the same way). */
.pdfraj-app.pdfraj-has-files .pdfraj-workspace-mount:has(.cr-ws) {
	padding: 0; margin-top: var(--pdfraj-sp-2); background: transparent;
}
/* Height comes from _fitLayout() in JS (root.style.height), which measures the
 * room actually left on screen — the mount itself is not viewport-clamped. */
.pdfraj-workspace-mount .cr-ws { display: flex; flex-direction: column; width: 100%; min-height: 0; box-sizing: border-box; }
.pdfraj-workspace-mount .cr-toolbar { display: flex; flex-wrap: wrap; gap: var(--pdfraj-sp-2); align-items: center; padding: var(--pdfraj-sp-2) var(--pdfraj-sp-3); background: #f4f5f7; border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md); margin-bottom: var(--pdfraj-sp-2); flex: 0 0 auto; }
.pdfraj-workspace-mount .cr-toolbar .cr-sep { flex: 1; }
.pdfraj-workspace-mount .cr-page-nav { display: flex; gap: var(--pdfraj-sp-1); align-items: center; font-size: var(--pdfraj-fs-sm); color: #5b6472; }
.pdfraj-workspace-mount .cr-pageinfo { min-width: 92px; text-align: center; font-weight: 600; color: #1c2330; }
.pdfraj-workspace-mount .cr-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--pdfraj-bd-strong); background: #fff; border-radius: var(--pdfraj-r-sm); cursor: pointer; color: #1c2330; }
.pdfraj-workspace-mount .cr-nav-btn:disabled { opacity: .4; cursor: not-allowed; }
.pdfraj-workspace-mount .cr-tool-btn { display: inline-flex; align-items: center; gap: var(--pdfraj-sp-1); padding: var(--pdfraj-sp-2) var(--pdfraj-sp-3); border: 1px solid var(--pdfraj-bd-strong); background: #fff; border-radius: var(--pdfraj-r-md); font-size: var(--pdfraj-fs-sm); font-weight: 600; color: #1c2330; cursor: pointer; }
.pdfraj-workspace-mount .cr-tool-btn[aria-pressed="true"] { border-color: var(--pdfraj-accent); background: var(--pdfraj-accent); color: #fff; }
.pdfraj-workspace-mount .cr-tool-btn:disabled { opacity: .5; cursor: not-allowed; }
.pdfraj-workspace-mount .cr-scope-note { font-size: var(--pdfraj-fs-xs); font-weight: 600; color: var(--pdfraj-accent); background: rgba(82, 71, 220, .08); padding: 4px 10px; border-radius: var(--pdfraj-r-pill); }

.pdfraj-workspace-mount .cr-body { display: flex; gap: var(--pdfraj-sp-3); align-items: stretch; flex: 1 1 auto; min-height: 0; }
/* align-items:center keeps a page that is shorter than the band optically
 * centred instead of stranded at the top with the slack below it. */
.pdfraj-workspace-mount .cr-stage-wrap { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; background: #eef0f3; border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md); padding: var(--pdfraj-sp-3); display: flex; align-items: center; justify-content: center; }
.pdfraj-workspace-mount .cr-stage { position: relative; line-height: 0; box-shadow: var(--pdfraj-sh-md); background: #fff; }
.pdfraj-workspace-mount .cr-stage canvas { display: block; }
.pdfraj-workspace-mount .cr-stage.is-preview { overflow: hidden; }
.pdfraj-workspace-mount .cr-stage.is-preview .cr-overlay { display: none; }
.pdfraj-workspace-mount .cr-overlay { position: absolute; top: 0; left: 0; overflow: hidden; cursor: crosshair; touch-action: none; }
.pdfraj-workspace-mount .cr-box { position: absolute; box-sizing: border-box; border: 1px solid #fff; outline: 1px solid var(--pdfraj-accent); box-shadow: 0 0 0 9999px rgba(16, 24, 40, .5); cursor: move; }
.pdfraj-workspace-mount .cr-box.is-full { box-shadow: 0 0 0 9999px rgba(16, 24, 40, .06); }
.pdfraj-workspace-mount .cr-grid { position: absolute; inset: 0; pointer-events: none; opacity: .55;
	background-image: linear-gradient(to right, transparent calc(33.33% - .5px), rgba(255,255,255,.9) calc(33.33% - .5px), rgba(255,255,255,.9) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.9) calc(66.66% - .5px), rgba(255,255,255,.9) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
	                  linear-gradient(to bottom, transparent calc(33.33% - .5px), rgba(255,255,255,.9) calc(33.33% - .5px), rgba(255,255,255,.9) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.9) calc(66.66% - .5px), rgba(255,255,255,.9) calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
.pdfraj-workspace-mount .cr-overlay.is-dragging .cr-grid { opacity: 1; }
.pdfraj-workspace-mount .cr-size { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 2px 8px; border-radius: var(--pdfraj-r-pill); background: rgba(16, 24, 40, .75); color: #fff; font-size: 11px; line-height: 1.6; font-weight: 600; white-space: nowrap; pointer-events: none; }
.pdfraj-workspace-mount .cr-h { position: absolute; width: 12px; height: 12px; background: #fff; border: 2px solid var(--pdfraj-accent); border-radius: 2px; box-sizing: border-box; }
.pdfraj-workspace-mount .cr-h-nw { left: -6px;  top: -6px;    cursor: nwse-resize; }
.pdfraj-workspace-mount .cr-h-n  { left: 50%;   top: -6px;    margin-left: -6px; cursor: ns-resize; }
.pdfraj-workspace-mount .cr-h-ne { right: -6px; top: -6px;    cursor: nesw-resize; }
.pdfraj-workspace-mount .cr-h-e  { right: -6px; top: 50%;     margin-top: -6px; cursor: ew-resize; }
.pdfraj-workspace-mount .cr-h-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.pdfraj-workspace-mount .cr-h-s  { left: 50%;   bottom: -6px; margin-left: -6px; cursor: ns-resize; }
.pdfraj-workspace-mount .cr-h-sw { left: -6px;  bottom: -6px; cursor: nesw-resize; }
.pdfraj-workspace-mount .cr-h-w  { left: -6px;  top: 50%;     margin-top: -6px; cursor: ew-resize; }

.pdfraj-workspace-mount .cr-strip { flex: 0 0 156px; display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md); background: #fff; padding: var(--pdfraj-sp-3); }
/* display:flex would beat the hidden attribute (the mega-menu trap) — the strip
 * is hidden outright on a one-page document. */
.pdfraj-workspace-mount .cr-strip[hidden] { display: none; }
.pdfraj-workspace-mount .cr-strip-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pdfraj-sp-2); margin-bottom: var(--pdfraj-sp-2); }
.pdfraj-workspace-mount .cr-strip-title { font-size: var(--pdfraj-fs-sm); font-weight: 700; color: #1c2330; }
.pdfraj-workspace-mount .cr-strip-all { border: 0; background: none; padding: 0; font-size: var(--pdfraj-fs-xs); font-weight: 600; color: var(--pdfraj-accent); cursor: pointer; }
.pdfraj-workspace-mount .cr-strip-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--pdfraj-sp-2); }
.pdfraj-workspace-mount .cr-thumb { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border: 1px solid transparent; border-radius: var(--pdfraj-r-sm); cursor: pointer; }
.pdfraj-workspace-mount .cr-thumb.is-current { border-color: var(--pdfraj-accent); background: rgba(82, 71, 220, .06); }
/* overflow:hidden clips the mark's spread shadow to this page's thumbnail —
 * without it the dim leaks over the whole strip. */
.pdfraj-workspace-mount .cr-thumb-frame { position: relative; line-height: 0; box-shadow: var(--pdfraj-sh-sm); background: #fff; overflow: hidden; }
.pdfraj-workspace-mount .cr-thumb-frame canvas { display: block; max-width: 104px; height: auto; }
.pdfraj-workspace-mount .cr-thumb-mark { position: absolute; box-sizing: border-box; border: 1px solid var(--pdfraj-accent); background: rgba(82, 71, 220, .16); box-shadow: 0 0 0 999px rgba(16, 24, 40, .35); pointer-events: none; }
.pdfraj-workspace-mount .cr-thumb-mark[hidden] { display: none; }
.pdfraj-workspace-mount .cr-thumb-n { font-size: 11px; color: #5b6472; }
.pdfraj-workspace-mount .cr-thumb.is-own .cr-thumb-n { color: var(--pdfraj-accent); font-weight: 700; }
/* The tick box only makes sense in "selected pages" mode; it stays in the DOM
 * (state survives a scope flip) but is hidden otherwise. */
.pdfraj-workspace-mount .cr-thumb-cb { position: absolute; top: 6px; left: 6px; z-index: 2; display: none; margin: 0; }
.pdfraj-workspace-mount .cr-strip-list.is-selecting .cr-thumb-cb { display: block; }
.pdfraj-workspace-mount .cr-strip-hint { margin: var(--pdfraj-sp-2) 0 0; font-size: var(--pdfraj-fs-xs); color: var(--pdfraj-text-muted); }
/* One compact line, never wrapping into a second row — the layout budgets a
 * fixed strip for it, and a wrap would push the stage off the bottom. */
.pdfraj-workspace-mount .cr-hint { flex: 0 0 auto; margin: var(--pdfraj-sp-2) 0 0; font-size: var(--pdfraj-fs-xs); line-height: 1.4; color: var(--pdfraj-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Result on screen: the view is showing the CROPPED output, not an editable input. */
.pdfraj-workspace-mount .cr-ws.is-result .cr-toolbar .cr-tool-btn,
.pdfraj-workspace-mount .cr-ws.is-result .cr-overlay { display: none; }

/* Crop panel — apply-scope radios. */
.pe-ws-crop-scope { display: flex; flex-direction: column; gap: var(--pdfraj-sp-2); margin: 0 0 var(--pdfraj-sp-3); }
/* Same trap as .cr-strip: display:flex outranks [hidden]. */
.pe-ws-crop-scope[hidden] { display: none; }
.pe-ws-crop-single { margin: 0 0 var(--pdfraj-sp-3); font-size: var(--pdfraj-fs-sm); color: var(--pdfraj-text-muted); }
.pe-ws-crop-opt { display: flex; align-items: flex-start; gap: var(--pdfraj-sp-2); padding: var(--pdfraj-sp-2) var(--pdfraj-sp-3); border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md); cursor: pointer; }
/* .is-on is set in JS; :has() is the progressive twin for browsers that have it
 * (the class is what actually carries this on older Safari). */
.pe-ws-crop-opt.is-on,
.pe-ws-crop-opt:has(input:checked) { border-color: var(--pdfraj-accent); background: rgba(82, 71, 220, .05); }
.pe-ws-crop-opt input { margin-top: 3px; }
.pe-ws-crop-opt-txt { display: flex; flex-direction: column; }
.pe-ws-crop-opt-l { font-size: var(--pdfraj-fs-sm); font-weight: 600; color: #1c2330; }
.pe-ws-crop-opt-d { font-size: var(--pdfraj-fs-xs); color: var(--pdfraj-text-muted); }

@media (max-width: 900px) {
	.pdfraj-workspace-mount .cr-body { flex-direction: column; }
	.pdfraj-workspace-mount .cr-strip { flex: 0 0 auto; }
	.pdfraj-workspace-mount .cr-strip-list { flex-direction: row; overflow-x: auto; }
	.pdfraj-workspace-mount .cr-thumb { flex: 0 0 auto; }
}


/* ===========================================================================
 * HIGH (Phase 11) — unified control system. One height + radius + ring across
 * the primary controls so buttons and inputs match across every workspace.
 * ===========================================================================*/
.pe-ws-panel-btn, .pe-ws-input, .pe-ws-adv-toggle,
.pe-ws-split-main, .pe-ws-split-caret { min-height: var(--pdfraj-control-h); }
.pe-ws-panel-btn, .pe-ws-input, .pe-ws-adv-toggle { border-radius: var(--pdfraj-r-md); }
.pe-ws-panel-btn, .pe-ws-split-main { font-size: var(--pdfraj-fs-md); }
.pe-ws-input:focus, .pe-ws-adv-toggle:focus-visible { box-shadow: var(--pdfraj-sh-ring); }

/* ===========================================================================
 * LOW (Phase 11) — minimal premium scrollbars. The rail hides its bar; these
 * thin rounded bars apply to the panel, preview and editor stage. ============*/
.pe-ws-side-body, .pdfraj-workspace-mount, .cf-stage-wrap { scrollbar-width: thin; scrollbar-color: #c5c9d4 transparent; }
.pe-ws-side-body::-webkit-scrollbar, .pdfraj-workspace-mount::-webkit-scrollbar, .cf-stage-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.pe-ws-side-body::-webkit-scrollbar-track, .pdfraj-workspace-mount::-webkit-scrollbar-track, .cf-stage-wrap::-webkit-scrollbar-track { background: transparent; }
.pe-ws-side-body::-webkit-scrollbar-thumb, .pdfraj-workspace-mount::-webkit-scrollbar-thumb, .cf-stage-wrap::-webkit-scrollbar-thumb { background: #c5c9d4; border-radius: var(--pdfraj-r-pill); border: 3px solid transparent; background-clip: content-box; }
.pe-ws-side-body::-webkit-scrollbar-thumb:hover, .pdfraj-workspace-mount::-webkit-scrollbar-thumb:hover, .cf-stage-wrap::-webkit-scrollbar-thumb:hover { background: #a9aebd; background-clip: content-box; }


/* ===========================================================================
 * Phase 12.3 — experience polish: subtle, premium state transitions + tactile
 * press feedback. No new UI, no workflow change; honours reduced-motion.
 * ===========================================================================*/
@keyframes pe-ws-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pe-ws-pop  { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } }

/* The panel eases in on every state change: controls -> processing -> result/error. */
.pe-ws-side-body,
.pe-ws-side-head--ok, .pe-ws-side-head--err { animation: pe-ws-rise 0.24s ease both; }
/* A gentle, rewarding entrance for the success check (premium, not flashy). */
.pe-ws-done-ck { animation: pe-ws-pop 0.34s cubic-bezier(0.34, 1.55, 0.64, 1) both; }

/* Tactile press feedback (re-declares each button's transition + adds transform). */
.pe-ws-panel-btn { transition: background var(--pdfraj-ws-ease), border-color var(--pdfraj-ws-ease), color var(--pdfraj-ws-ease), transform var(--pdfraj-ws-ease); }
.ps-cta { transition: background var(--pdfraj-ws-ease), box-shadow var(--pdfraj-ws-ease), transform var(--pdfraj-ws-ease); }
.pe-ws-panel-btn:active:not([disabled]), .ps-cta:active:not(:disabled) { transform: scale(0.985); }
.ps-tt-btn:active, .ps-btn:active, .pe-ws-adv-toggle:active { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
	.pe-ws-side-body, .pe-ws-side-head--ok, .pe-ws-side-head--err, .pe-ws-done-ck { animation: none; }
	.pe-ws-panel-btn:active, .ps-cta:active, .ps-tt-btn:active, .ps-btn:active, .pe-ws-adv-toggle:active { transform: none; }
}


/* ===========================================================================
 * Phase 12.4 — reusable action footer. The primary CTA is pinned below the
 * scrolling options (head | options | action), so it never scrolls away and
 * sparse panels stop floating. Same panel background; subtle top divider.
 * ===========================================================================*/
.pe-ws-foot {
	flex: 0 0 auto;
	padding: var(--pdfraj-sp-4) 1.25rem;
	background: #fff;
	border-top: 1px solid var(--pdfraj-bd);
}
.pe-ws-foot .pe-ws-panel-btn { margin-top: 0; }
/* The footer is hidden while a form has unapplied work — it sets no display of
 * its own, but say it anyway: a `display:` added here later would silently
 * override [hidden], which has bitten this stylesheet before. */
.pe-ws-foot[hidden] { display: none; }


/* ===========================================================================
 * Phase 13.1 — Compress (reference) Result polish. The win is the hero; the
 * Download lives in the footer; the body just communicates. Tighter rhythm.
 * ===========================================================================*/
.pe-ws-hero { padding: 0 0 var(--pdfraj-sp-2); }
.pe-ws-hero-big { font-size: 1.6rem; font-weight: 800; color: #14905f; line-height: 1.15; letter-spacing: -0.01em; }
.pe-ws-hero-sub { font-size: var(--pdfraj-fs-base); color: var(--pdfraj-text-muted); margin-top: 2px; }
.pe-ws-hero.is-muted .pe-ws-hero-big { font-size: var(--pdfraj-fs-lg); color: var(--pdfraj-text); font-weight: 700; }
/* Tighter result rhythm — less dead space between sections. */
.pe-ws-side-sub { margin-top: var(--pdfraj-sp-3); }
.pe-ws-iconrow { margin: var(--pdfraj-sp-2) 0 0; }
.pe-ws-startover { margin-top: var(--pdfraj-sp-3); }
.pe-ws-target-summary { margin: var(--pdfraj-sp-2) 0; }

/* Phase 13.1b — match Smallpdf: tool name in the top header, "Done" panel head,
 * savings as a small inline line. */
.pe-ws-top-title { font-size: var(--pdfraj-fs-md); font-weight: 700; color: var(--pdfraj-text); white-space: nowrap; flex: 0 0 auto; }
.pe-ws-done-summary { font-size: var(--pdfraj-fs-base); font-weight: 600; color: #14905f; margin: 2px 0 var(--pdfraj-sp-3); }
.pe-ws-done-summary.is-muted { color: var(--pdfraj-text-muted); font-weight: 500; }
/* Done, but something the user has to act on — currently only a protected input
   whose password could not follow it into a Word or image output. Amber, not the
   success green, because the headline above it says "Done" and this is the part
   that is not. Same palette as .pe-ws-target-row.is-warn. */
.pe-ws-done-summary.is-warn { color: #b54708; background: #fffaeb; font-weight: 500; line-height: 1.45; padding: 10px 12px; border-radius: 10px; }

/* pdf-to-jpg — per-page download rows in the Done panel (Smallpdf parity).
 * Reuses the batch-row look; capped and scrollable so a 200-page PDF stays tidy. */
.pe-ws-imgrows { max-height: 264px; overflow-y: auto; margin: 2px 0 var(--pdfraj-sp-3); border-top: 1px solid var(--pdfraj-bd); }
.pe-ws-imgrows .pe-ws-batch-name { font-variant-numeric: tabular-nums; }

/* ===== Phase 13: empty-workspace uploader (Smallpdf-style reset) ============
 * "Start over" (and any future Cancel / Replace / Retry) keeps the user IN the
 * workspace with a clean uploader, instead of collapsing to the SEO landing.
 * Driven by body.pdfraj-ws-empty (set by the shell's enterEmptyWorkspace()). */
.pe-ws-empty { display: none; }
body.pdfraj-ws-empty .pe-ws-side,
body.pdfraj-ws-empty .pdfraj-workspace-mount { display: none !important; }
body.pdfraj-ws-v2.pdfraj-editing.pdfraj-ws-empty .pe-ws-empty {
	display: flex; align-items: center; justify-content: center;
	position: fixed;
	top: calc(var(--pe-ws-top, 0px) + var(--pe-ws-bar, 52px));   /* header only — docbar is hidden in the empty state, so don't reserve its 46px (that gap read as a stray border strip) */
	left: 0; right: 0; bottom: 0;   /* full-width: no rail in the empty state */
	padding: var(--pdfraj-sp-4); box-sizing: border-box;
	background: #eef0f3; z-index: 4;
}
@media (max-width: 768px) {
	body.pdfraj-ws-v2.pdfraj-editing.pdfraj-ws-empty .pe-ws-empty { left: 0; right: 0; bottom: 64px; }
}
.pe-ws-empty-box {
	width: 100%; max-width: 860px; min-height: 62%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: var(--pdfraj-sp-3); text-align: center;
	border: 2px dashed var(--pdfraj-bd-strong); border-radius: var(--pdfraj-r-lg);
	background: #fff; padding: var(--pdfraj-sp-6);
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.pe-ws-empty.is-over .pe-ws-empty-box {
	border-color: var(--pdfraj-accent); background: #f5f8ff; box-shadow: var(--pdfraj-sh-md);
}
.pe-ws-empty-ic { color: var(--pdfraj-accent); }
.pe-ws-empty-ic svg { width: 46px; height: 46px; display: block; }
.pe-ws-empty-title { font-size: var(--pdfraj-fs-lg); font-weight: 700; color: var(--pdfraj-text); }
.pe-ws-empty-sub { font-size: var(--pdfraj-fs-sm); color: var(--pdfraj-text-muted); }
.pe-ws-empty-btn {
	margin-top: var(--pdfraj-sp-2); border: 0; cursor: pointer;
	border-radius: var(--pdfraj-r-md); background: var(--pdfraj-accent); color: #fff;
	font: inherit; font-weight: 700; font-size: var(--pdfraj-fs-md);
	padding: var(--pdfraj-sp-3) var(--pdfraj-sp-6); box-shadow: var(--pdfraj-sh-sm);
	transition: background .18s ease, box-shadow .18s ease;
}
.pe-ws-empty-btn:hover { background: var(--pdfraj-accent-hover); box-shadow: var(--pdfraj-sh-md); }

/* Oversized file, refused at selection so nothing uploads (portal issue #23).
   Sits under the Select button in the empty uploader, where the user is
   already looking. */
.pe-ws-empty-warn {
	margin-top: var(--pdfraj-sp-3);
	max-width: 42ch;
	font-size: var(--pdfraj-fs-sm);
	line-height: 1.45;
	color: var(--pdfraj-danger, #dc2626);
	background: var(--pdfraj-danger-bg, rgba(220, 38, 38, .08));
	border: 1px solid var(--pdfraj-danger, #dc2626);
	border-radius: var(--pdfraj-r-md);
	padding: var(--pdfraj-sp-2) var(--pdfraj-sp-3);
}

/* HTML to PDF custom panel styles (Convert URL & HTML code options) */
.pe-ws-modes-vertical {
	display: flex;
	flex-direction: column;
	gap: var(--pdfraj-sp-3);
	margin-bottom: var(--pdfraj-sp-3);
}
.pe-ws-mode-row {
	border: 1px solid var(--pdfraj-bd);
	border-radius: var(--pdfraj-r-md);
	background: #fff;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pe-ws-mode-row.is-active {
	border-color: var(--pdfraj-accent);
	box-shadow: var(--pdfraj-sh-sm);
}
.pe-ws-mode-header {
	display: flex;
	align-items: center;
	padding: var(--pdfraj-sp-3);
	background: #f8fafc;
	cursor: pointer;
	user-select: none;
	transition: background 0.15s ease;
}
.pe-ws-mode-row.is-active .pe-ws-mode-header {
	background: #f1f5f9;
}
.pe-ws-mode-radio {
	width: 16px;
	height: 16px;
	border: 2px solid var(--pdfraj-bd-strong);
	border-radius: 50%;
	margin-right: var(--pdfraj-sp-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
}
.pe-ws-mode-row.is-active .pe-ws-mode-radio {
	border-color: var(--pdfraj-accent);
}
.pe-ws-mode-row.is-active .pe-ws-mode-radio::after {
	content: '';
	width: 8px;
	height: 8px;
	background: var(--pdfraj-accent);
	border-radius: 50%;
	display: block;
}
.pe-ws-mode-title {
	font-weight: 700;
	font-size: var(--pdfraj-fs-base);
	color: var(--pdfraj-text);
}
.pe-ws-mode-body {
	padding: var(--pdfraj-sp-3);
	animation: pe-slide-down 0.2s ease-out;
}
@keyframes pe-slide-down {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}
.pe-ws-textarea {
	width: 100%;
	min-height: 80px;
	box-sizing: border-box;
	resize: vertical;
	margin-top: 4px;
	margin-bottom: var(--pdfraj-sp-2);
}
.pe-ws-settings-form {
	display: flex;
	flex-direction: column;
	gap: var(--pdfraj-sp-2);
}
.pe-ws-field-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.pe-ws-field-group .pe-ws-field-label {
	font-size: var(--pdfraj-fs-xs);
	font-weight: 600;
	color: var(--pdfraj-text-muted);
}
.pe-ws-checkbox-label {
	display: inline-flex;
	align-items: center;
	font-size: var(--pdfraj-fs-sm);
	color: var(--pdfraj-text);
	cursor: pointer;
	gap: 8px;
	font-weight: 500;
}
.pe-ws-checkbox-label input[type="checkbox"] {
	margin: 0;
}

/* --- OCR panel: quick single-page preview + warnings -----------------------
 * Sejda parity. The preview is the point: it shows what the WHOLE document
 * will produce, from one page, before committing to a long job. */
.pe-ws-ocr-quick {
	margin: var(--pdfraj-sp-4) 0 var(--pdfraj-sp-3);
	padding: var(--pdfraj-sp-3);
	border: 1px solid var(--pdfraj-bd);
	border-radius: var(--pdfraj-r-md);
	background: #fbfbfd;
}
.pe-ws-ocr-quick > .pe-ws-field-label { margin-bottom: 2px; }
.pe-ws-ocr-quick > .pe-ws-field-hint { margin: 0 0 var(--pdfraj-sp-2); }
.pe-ws-ocr-qbtn {
	display: inline-flex; align-items: center; gap: var(--pdfraj-sp-1);
	padding: var(--pdfraj-sp-2) var(--pdfraj-sp-3);
	border: 1px solid var(--pdfraj-accent); border-radius: var(--pdfraj-r-md);
	background: #fff; color: var(--pdfraj-accent);
	font-size: var(--pdfraj-fs-sm); font-weight: 600; cursor: pointer;
}
.pe-ws-ocr-qbtn:hover:not(:disabled) { background: var(--pdfraj-accent-soft); }
.pe-ws-ocr-qbtn:disabled { opacity: .55; cursor: progress; }
.pe-ws-ocr-out { margin-top: var(--pdfraj-sp-3); }
.pe-ws-ocr-out[hidden] { display: none; }
.pe-ws-ocr-out-status { margin: 0 0 var(--pdfraj-sp-2); font-size: var(--pdfraj-fs-xs); color: #6b7280; }
.pe-ws-ocr-out-status.is-warn { color: #8a5b0a; }
/* Recognised text is data, not prose: monospace, wrapped, and scrollable so a
 * dense page cannot push the run button off screen. */
.pe-ws-ocr-text {
	margin: 0; padding: var(--pdfraj-sp-2);
	max-height: 190px; overflow: auto;
	border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-sm);
	background: #fff;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--pdfraj-fs-xs); line-height: 1.5; color: #1c2330;
	white-space: pre-wrap; word-break: break-word;
}
.pe-ws-ocr-warn {
	margin: calc(-1 * var(--pdfraj-sp-2)) 0 var(--pdfraj-sp-3);
	padding: var(--pdfraj-sp-2) var(--pdfraj-sp-3);
	border-radius: var(--pdfraj-r-sm);
	background: #fdf3e2; color: #8a5b0a;
	font-size: var(--pdfraj-fs-xs); line-height: 1.45;
}
.pe-ws-ocr-warn[hidden] { display: none; }
.pe-ws-ocr-accuracy {
	margin: var(--pdfraj-sp-3) 0 0;
	padding: var(--pdfraj-sp-2) var(--pdfraj-sp-3);
	border-left: 3px solid #e0c48a; border-radius: var(--pdfraj-r-sm);
	background: #fdf9f0; color: #7a5a1e;
	font-size: var(--pdfraj-fs-xs); line-height: 1.45;
}

/* --- Password reveal toggle (wrapPasswordReveal) ---------------------------
 * Any WIRED field of type 'password' gets one. These are passwords the user is
 * CREATING (Protect), where a silent typo locks them out of their own file. */
.pe-ws-pw-wrap { position: relative; display: block; }
.pe-ws-pw-wrap .pe-ws-input { padding-right: 38px; }
.pe-ws-pw-eye {
	position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; padding: 0;
	border: none; border-radius: var(--pdfraj-r-sm); background: transparent;
	color: #6b7280; cursor: pointer;
}
.pe-ws-pw-eye:hover { background: rgba(15, 23, 42, 0.06); color: #1c2330; }
.pe-ws-pw-eye[aria-pressed="true"] { color: var(--pdfraj-accent); }
.pe-ws-pw-eye-ic { width: 17px; height: 17px; display: block; }

/* --- Split family panels (Split by Bookmarks / Split by Text) --------------
 * Client mockup, 2026-07-31. Both tools ask the same shape of question: pick
 * the cut points, decide what happens at the edges, then SEE the files before
 * committing. Shared `pe-ws-sp-*` vocabulary so the two stay visually one tool.
 */
.pe-ws-sp-section { margin-top: var(--pdfraj-sp-4); padding-top: var(--pdfraj-sp-4); border-top: 1px solid var(--pdfraj-bd); }
.pe-ws-sp-section:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
/* display:block would outrank [hidden] on the conditional sections. */
.pe-ws-sp-section[hidden] { display: none; }
.pe-ws-sp-group { margin: 0 0 var(--pdfraj-sp-2); font-size: var(--pdfraj-fs-sm); font-weight: 600; color: #1c2330; }

/* Bookmark tree. */
.pe-ws-sp-treebtns { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--pdfraj-sp-2); }
/* Same trap as .cr-strip and .pe-ws-sp-section: display:flex outranks [hidden],
 * and Split by Text's "Reset selection" row is hidden exactly when there is
 * nothing unticked to restore. Without this it would sit there permanently. */
.pe-ws-sp-treebtns[hidden] { display: none; }
.pe-ws-sp-treebtn { padding: 5px 9px; border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-sm); background: #fff; font: inherit; font-size: var(--pdfraj-fs-xs); color: var(--pdfraj-text-muted); cursor: pointer; }
.pe-ws-sp-treebtn:hover { border-color: var(--pdfraj-accent); color: var(--pdfraj-accent); }
.pe-ws-sp-tree { max-height: 340px; overflow-y: auto; padding-right: 2px; }
.pe-ws-sp-node { display: flex; align-items: center; gap: 7px; padding: 7px 9px; margin-bottom: 5px; border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-sm); background: #fff; }
.pe-ws-sp-node.is-off { opacity: .5; }
.pe-ws-sp-node.is-shared { border-color: #e0c48a; background: #fdf9f0; }
.pe-ws-sp-node-cb { flex: none; margin: 0; accent-color: var(--pdfraj-accent); }
.pe-ws-sp-node-tog { flex: none; width: 16px; height: 16px; padding: 0; border: none; background: none; color: var(--pdfraj-text-muted); font-size: 11px; line-height: 1; cursor: pointer; }
.pe-ws-sp-node-tog.is-hidden { visibility: hidden; }
.pe-ws-sp-node-nm { flex: 1; min-width: 0; font-size: var(--pdfraj-fs-sm); font-weight: 600; color: #1c2330; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-ws-sp-node-lvl { flex: none; padding: 1px 6px; border-radius: var(--pdfraj-r-sm); background: #f1f2f6; font-size: 10px; color: var(--pdfraj-text-muted); }
.pe-ws-sp-node-pg { flex: none; font-size: var(--pdfraj-fs-xs); color: var(--pdfraj-text-muted); }
.pe-ws-sp-node-note { flex: none; font-size: 10px; color: #7a5a1e; }
.pe-ws-sp-node-bad { flex: none; font-size: 10px; color: #b42318; }

/* Matched-page tick list (Split by Text). */
.pe-ws-sp-matches { max-height: 300px; overflow-y: auto; padding-right: 2px; }
.pe-ws-sp-match { display: flex; align-items: center; gap: 8px; padding: 7px 9px; margin-bottom: 5px; border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-sm); background: #fff; cursor: pointer; }
.pe-ws-sp-match input { flex: none; margin: 0; accent-color: var(--pdfraj-accent); }
.pe-ws-sp-match-pg { flex: none; min-width: 54px; padding: 2px 7px; border-radius: var(--pdfraj-r-sm); background: rgba(82, 71, 220, .08); font-size: var(--pdfraj-fs-xs); font-weight: 600; color: var(--pdfraj-accent); text-align: center; }
.pe-ws-sp-match-tx { flex: 1; min-width: 0; font-size: var(--pdfraj-fs-xs); color: var(--pdfraj-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Filename token chips. */
.pe-ws-sp-toks { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--pdfraj-sp-2); }
.pe-ws-sp-tok { padding: 2px 7px; border: none; border-radius: var(--pdfraj-r-sm); background: rgba(82, 71, 220, .08); font: inherit; font-size: 10.5px; color: var(--pdfraj-accent); cursor: pointer; }
.pe-ws-sp-tok:hover { background: rgba(82, 71, 220, .16); }

/* "Files you will get" — the preview the client asked for by name. */
.pe-ws-sp-files { max-height: 320px; overflow-y: auto; padding-right: 2px; }
.pe-ws-sp-file { display: flex; align-items: center; gap: 9px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-sm); background: #fff; }
.pe-ws-sp-file.is-lead { border-style: dashed; }
.pe-ws-sp-file-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--pdfraj-r-sm); background: #e7f6ee; font-size: 8.5px; font-weight: 700; color: #0f9d58; }
.pe-ws-sp-file-meta { flex: 1; min-width: 0; }
.pe-ws-sp-file-meta b { display: block; font-size: var(--pdfraj-fs-sm); font-weight: 600; color: #1c2330; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-ws-sp-file-meta span { display: block; font-size: var(--pdfraj-fs-xs); color: var(--pdfraj-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-ws-sp-file-pages { flex: none; padding: 2px 7px; border-radius: var(--pdfraj-r-sm); background: rgba(82, 71, 220, .08); font-size: var(--pdfraj-fs-xs); font-weight: 600; color: var(--pdfraj-accent); }

/* The verdict line: does this split actually cover the document? */
.pe-ws-sp-summary { margin-top: var(--pdfraj-sp-4); padding: 10px 12px; border-radius: var(--pdfraj-r-md); font-size: var(--pdfraj-fs-sm); line-height: 1.45; }
.pe-ws-sp-summary:empty { display: none; }
.pe-ws-sp-summary b { display: block; font-weight: 700; }
.pe-ws-sp-summary-d { display: block; margin-top: 3px; font-size: var(--pdfraj-fs-xs); }
.pe-ws-sp-summary.is-ok { border: 1px solid #bbe4cc; background: #e7f6ee; color: #1e6e44; }
.pe-ws-sp-summary.is-warn { border: 1px solid #ebc4c4; background: #fcebeb; color: #a32d2d; }
.pe-ws-sp-summary.is-note { border: 1px solid #f0dca8; background: #fdf3e2; color: #8a5b0a; }
.pe-ws-sp-filter { margin: 0 0 var(--pdfraj-sp-2); }

/* --- Remove Annotations: mock-parity rail panel --------------------------- *
 * "Found in this PDF" inventory, mode radios, one tick per category, and the
 * boxes drawn over each page thumbnail (.pe-ra-*) that vanish as a category
 * is ticked off. */
.pe-ws-ra-progress { margin: 0; font-size: var(--pdfraj-fs-xs); color: var(--pdfraj-text-muted); }

.pe-ws-ra-found {
	margin-bottom: var(--pdfraj-sp-4); padding: 11px 12px;
	border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md); background: #f7f7fb;
}
.pe-ws-ra-found-t {
	margin-bottom: 7px; font-size: var(--pdfraj-fs-xs); font-weight: 700;
	letter-spacing: .03em; text-transform: uppercase; color: #4a4a63;
}
.pe-ws-ra-frow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: var(--pdfraj-fs-sm); }
.pe-ws-ra-frow-other { margin-top: 6px; padding-top: 7px; border-top: 1px dashed var(--pdfraj-bd); color: var(--pdfraj-text-muted); }
.pe-ws-ra-fc { flex: none; color: var(--pdfraj-text-muted); }
.pe-ws-ra-fnone { font-size: var(--pdfraj-fs-xs); color: var(--pdfraj-text-muted); }

.pe-ws-ra-radio { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; cursor: pointer; }
.pe-ws-ra-radio input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--pdfraj-accent); cursor: pointer; }
.pe-ws-ra-radio-body { min-width: 0; font-size: var(--pdfraj-fs-sm); }
.pe-ws-ra-radio-body b { font-weight: 600; }
.pe-ws-ra-radio-d { display: block; margin-top: 1px; font-size: var(--pdfraj-fs-xs); color: var(--pdfraj-text-muted); }

.pe-ws-ra-cats-label { margin-top: var(--pdfraj-sp-4); }
.pe-ws-ra-cat { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; cursor: pointer; }
.pe-ws-ra-cat input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--pdfraj-accent); cursor: pointer; }
.pe-ws-ra-cat.is-disabled { opacity: .45; cursor: default; }
.pe-ws-ra-cat-body { min-width: 0; }
.pe-ws-ra-cat-name { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: var(--pdfraj-fs-sm); font-weight: 600; }
.pe-ws-ra-cat-desc { display: block; margin-top: 1px; font-size: var(--pdfraj-fs-xs); color: var(--pdfraj-text-muted); }
.pe-ws-ra-count { padding: 1px 7px; border-radius: 20px; background: rgba(82, 71, 220, .08); font-size: var(--pdfraj-fs-xs); font-weight: 600; color: var(--pdfraj-accent); }
.pe-ws-ra-pill { padding: 1px 6px; border-radius: var(--pdfraj-r-sm); background: #fcebeb; font-size: 10.5px; font-weight: 500; color: #a32d2d; }

/* Consequence notes. Hidden by default via [hidden]; the panel decides. */
.pe-ws-ra-note {
	margin-top: var(--pdfraj-sp-3); padding: 10px 12px;
	border: 1px solid #f0dca8; border-radius: var(--pdfraj-r-md);
	background: #fdf3e2; color: #8a5b0a;
	font-size: var(--pdfraj-fs-xs); line-height: 1.5;
}
.pe-ws-ra-note.is-danger { border-color: #ebc4c4; background: #fcebeb; color: #a32d2d; }
.pe-ws-ra-note[hidden] { display: none; }

.pe-ws-ra-summary { margin-top: var(--pdfraj-sp-4); padding: 10px 12px; border-radius: var(--pdfraj-r-md); font-size: var(--pdfraj-fs-sm); line-height: 1.45; }
.pe-ws-ra-summary:empty { display: none; }
.pe-ws-ra-summary b { display: block; font-weight: 700; }
.pe-ws-ra-summary-l { display: block; margin-top: 3px; font-size: var(--pdfraj-fs-xs); }
/* The signed-document warning sits inside the green "is-ok" summary, so it has
   to carry its own colour or it reads as part of the reassurance above it. */
.pe-ws-ra-summary-warn { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,.12); font-weight: 600; color: #8a5a00; }
.pe-ws-ra-summary.is-ok { border: 1px solid #bbe4cc; background: #e7f6ee; color: #1e6e44; }
.pe-ws-ra-summary.is-note { border: 1px solid var(--pdfraj-bd); background: #f7f7fb; color: #4a4a63; }

/* One box per annotation, over the page thumbnail. Colours are set inline
 * (per category) by the panel; only geometry and state live here. */
.pe-ra-ov { position: absolute; pointer-events: none; overflow: hidden; z-index: 3; }
.pe-ra-box { position: absolute; border: 1.5px solid; border-radius: 2px; transition: opacity var(--pdfraj-ws-ease); }
.pe-ra-box.is-gone { display: none; }                          /* will be removed */
.pe-ra-box.is-baked { border-style: solid; border-width: 2px; }  /* will become page content */

/* --- Deskew: mock-parity rail panel --------------------------------------- *
 * Detection inventory, fill-colour swatches, the sensitivity disclosure, the
 * per-page override rows, and the rotation preview drawn straight onto each
 * page thumbnail (.pe-ds-tag + the canvas transform the panel sets inline). */
.pe-ws-ds-warn {
	margin-bottom: var(--pdfraj-sp-4); padding: 10px 12px;
	border: 1px solid #f0dca8; border-radius: var(--pdfraj-r-md);
	background: #fdf3e2; color: #8a5b0a;
	font-size: var(--pdfraj-fs-xs); line-height: 1.5;
}
.pe-ws-ds-warn[hidden] { display: none; }

.pe-ws-ds-fillline { display: flex; align-items: center; gap: 8px; }
.pe-ws-ds-fills { display: flex; gap: 8px; flex: 1; min-width: 0; }
.pe-ws-ds-fill {
	display: flex; align-items: center; gap: 7px; flex: 1;
	padding: 8px 10px; border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md);
	background: #fff; font: inherit; font-size: var(--pdfraj-fs-sm); color: inherit;
	cursor: pointer; transition: border-color var(--pdfraj-ws-ease), background var(--pdfraj-ws-ease);
}
.pe-ws-ds-fill:hover { border-color: var(--pdfraj-accent); }
.pe-ws-ds-fill.is-on { border-color: var(--pdfraj-accent); background: rgba(82, 71, 220, .06); font-weight: 600; }
.pe-ws-ds-chip { width: 16px; height: 16px; flex: none; border: 1px solid var(--pdfraj-bd); border-radius: 4px; }
.pe-ws-ds-chip.is-white { background: #fff; }
.pe-ws-ds-chip.is-black { background: #000; }

.pe-ws-ds-manual:empty { display: none; }

/* The way back to the measured angles once pages have been set by hand. Disabled
   while nothing is set, because then it is already what will run. */
.pe-ws-ds-auto {
	margin-top: var(--pdfraj-sp-4); padding: 12px; border: 1px solid var(--pdfraj-bd);
	border-radius: var(--pdfraj-r-md); background: #fbfcff;
}
.pe-ws-ds-auto-t { font-weight: 700; font-size: var(--pdfraj-fs-sm); }
.pe-ws-ds-auto-s { margin: 3px 0 10px; font-size: var(--pdfraj-fs-xs); line-height: 1.45; color: var(--pdfraj-text-muted); }
/* The panel's primary action, so it carries the primary weight: always live,
   never greyed on arrival. A disabled button here read as "automatic is off". */
.pe-ws-ds-auto-b {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; min-height: 42px; padding: 0 12px; border: 0;
	border-radius: var(--pdfraj-r-sm); background: var(--pdfraj-accent); color: #fff;
	font: inherit; font-size: var(--pdfraj-fs-sm); font-weight: 800; cursor: pointer;
	box-shadow: 0 5px 12px rgba( 47, 104, 245, .18 );
}
.pe-ws-ds-auto-b:hover { filter: brightness( .95 ); }
.pe-ws-ds-auto-b:active { transform: translateY( 1px ); }
.pe-ws-ds-auto-ic { font-size: 15px; line-height: 1; }
.pe-ws-ds-auto-m { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--pdfraj-bd); font-size: var(--pdfraj-fs-xs); color: var(--pdfraj-text-muted); }
/* Pressing it on an untouched document changes no number, so the card says it
   landed -- otherwise the click looks like it did nothing. */
.pe-ws-ds-auto.is-applied { border-color: #bbe4cc; background: #f2fbf6; }
.pe-ws-ds-auto.is-applied .pe-ws-ds-auto-m { color: #1e6e44; }
.pe-ws-ds-auto.is-applied .pe-ws-ds-auto-m::after { content: " \00b7 applied"; font-weight: 700; }

.pe-ws-ds-or {
	display: flex; align-items: center; gap: 10px; margin: var(--pdfraj-sp-3) 0;
	font-size: var(--pdfraj-fs-xs); font-weight: 700; letter-spacing: .6px; color: var(--pdfraj-text-muted);
}
.pe-ws-ds-or::before, .pe-ws-ds-or::after { content: ""; flex: 1; height: 1px; background: var(--pdfraj-bd); }

/* label | slider | reading | undo, on one line. The undo is only reachable once
   the page carries a hand-set angle. */
/* Two lines, not one: the head carries the page, what the measurement SUGGESTS
 * and what is actually APPLIED, and the slider underneath is only ever the
 * applied value. Squeezing the suggestion onto the slider line is what let one
 * number mean two things. (Portal #62.) */
.pe-ws-ds-mrow {
	display: grid; grid-template-columns: minmax( 60px, 1fr ) 26px;
	align-items: center; gap: 4px 8px;
	padding: 8px 0; border-top: 1px dashed var(--pdfraj-bd);
	font-size: var(--pdfraj-fs-sm);
}
.pe-ws-ds-mhead {
	grid-column: 1 / -1;
	display: flex; align-items: baseline; gap: 8px;
}
.pe-ws-ds-mlabel { white-space: nowrap; font-weight: 600; }
.pe-ws-ds-msug {
	flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	color: var(--pdfraj-text-muted); font-size: var(--pdfraj-fs-xs, .78rem);
}
.pe-ws-ds-mrange { min-width: 0; }
.pe-ws-ds-mval {
	flex: none; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
	color: var(--pdfraj-text-muted); font-weight: 600;
}
/* Once something is actually on the page, the applied figure stops being grey. */
.pe-ws-ds-mrow.is-applied .pe-ws-ds-mval { color: var(--pdfraj-accent); }
.pe-ws-ds-mundo {
	width: 26px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: var(--pdfraj-r-sm);
	background: none; color: var(--pdfraj-text-muted); font: inherit; line-height: 1;
	opacity: 0; pointer-events: none; cursor: pointer;
}
.pe-ws-ds-mrow.is-set .pe-ws-ds-mundo {
	opacity: 1; pointer-events: auto;
	border-color: var(--pdfraj-bd); background: var(--pdfraj-accent-soft); color: var(--pdfraj-accent);
}
.pe-ws-ds-mundo:hover { filter: brightness( .97 ); }

.pe-ws-ds-reset {
	flex: none; min-height: 30px; padding: 0 10px; border: 1px solid var(--pdfraj-bd);
	border-radius: var(--pdfraj-r-sm); background: #fff; color: var(--pdfraj-text-muted);
	font: inherit; font-size: var(--pdfraj-fs-xs); font-weight: 700; cursor: pointer; white-space: nowrap;
}
.pe-ws-ds-reset:hover { background: #f7f8fc; color: var(--pdfraj-text); }
.pe-ws-ds-all {
	margin-top: var(--pdfraj-sp-2); padding: 0; border: 0; background: none;
	font: inherit; font-size: var(--pdfraj-fs-xs); color: var(--pdfraj-accent);
	cursor: pointer; text-decoration: underline;
}
/* Every page has a slider now, so a long document would otherwise push the rail's
   own actions off the bottom of the panel. Past DS_SCROLL_AFTER pages the list
   scrolls on its own instead. */
.pe-ws-ds-manlist[hidden] { display: none; }
.pe-ws-ds-manlist.is-scroll {
	max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
	padding-right: 4px; margin-right: -4px;
}

.pe-ws-ds-summary { margin-top: var(--pdfraj-sp-4); padding: 10px 12px; border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md); background: #f7f7fb; color: #4a4a63; font-size: var(--pdfraj-fs-sm); line-height: 1.45; }
.pe-ws-ds-summary.is-ok { border-color: #bbe4cc; background: #e7f6ee; color: #1e6e44; }
.pe-ws-ds-summary b { font-weight: 700; }
.pe-ws-ds-sub { display: block; margin-top: 3px; font-size: var(--pdfraj-fs-xs); }

/* Per-page verdict, over the thumbnail. The canvas rotation itself is set
 * inline by the panel (it changes per page and with every slider move). */
.pe-ds-tag {
	position: absolute; left: 6px; bottom: 6px; z-index: 4;
	padding: 1px 7px; border-radius: 20px;
	background: rgba(82, 71, 220, .1); color: var(--pdfraj-accent);
	font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums;
	pointer-events: none;
}
.pe-ds-tag.is-none { background: rgba(0, 0, 0, .06); color: var(--pdfraj-text-muted); }
.pe-ds-tag.is-low { background: #fdf3e2; color: #8a5b0a; }

/* ---- Result host (a view that cannot render its own result) -------------- */
/* The PDF Editor draws on its own canvas and Split by Text draws a page
 * selector, so neither has the shared page reader every other Done page uses.
 * The result goes into a host of our own inside the same container, and this
 * hides what the view put there.
 *
 * By CLASS on the container, not by touching each child: the view goes on
 * re-rendering its own subtree underneath, and whatever it puts back has to
 * stay hidden too.
 *
 * These rules live HERE, not in pdfraj-workspace.css — the editor page does not
 * load that file, which is why the first attempt left the canvas showing
 * straight through the result. */
/* What the job cost: output size and how long it took. Quiet by design — it
   sits under the tool's own summary and is read second, not first. */
.pe-ws-done-stat {
	font-size: var(--pdfraj-fs-sm); color: var(--pdfraj-text-muted);
	font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
	margin: calc(-1 * var(--pdfraj-sp-1)) 0 var(--pdfraj-sp-3);
}

/* ---- The working stage (portal issue #52) -------------------------------
   While a job runs the canvas becomes the job: the file, named and sized, and
   one line saying what is happening to it. Same mechanism as the result host —
   one class on the mount hides the grid without destroying it. */
[data-role="workspace-mount"].pe-ws-onstage > :not(.pe-ws-stage) { display: none !important; }
/* The mount carries side padding for the page grid. The bar is meant to run the
   full width of the working area, so the padding comes off while the stage is
   up and goes back on the stage's own content instead. */
[data-role="workspace-mount"].pe-ws-onstage { padding-left: 0 !important; padding-right: 0 !important; }
/* display:flex outranks the [hidden] attribute, so the host needs this or it
   stays on screen with its bar running even while the class is off. */
.pe-ws-stage[hidden] { display: none !important; }
.pe-ws-stage { position: relative; min-height: 60vh; display: flex; flex-direction: column; }

/* The striped animated top-border (.pe-ws-stage-pole) was removed so the busy
   screen shows ONE calm loader -- the spinner + status + ETA in the right
   action panel. The stage keeps the file card + status below it as quiet
   context. */

.pe-ws-stage-inner {
	flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: var(--pdfraj-sp-3); padding: var(--pdfraj-sp-6) var(--pdfraj-sp-4);
	text-align: center;
}
.pe-ws-stage-card {
	width: 176px; border-radius: var(--pdfraj-r-md); overflow: hidden;
	background: #fff; border: 1px solid var(--pdfraj-bd); box-shadow: var(--pdfraj-sh-sm);
}
.pe-ws-stage-sheet { height: 112px; padding: 26px 26px 0; display: flex; flex-direction: column; gap: 11px; }
.pe-ws-stage-sheet i {
	display: block; height: 13px; border-radius: 3px;
	background: color-mix( in srgb, var(--pdfraj-accent) 24%, #fff );
}
.pe-ws-stage-sheet i:nth-child(2) { width: 82%; }
.pe-ws-stage-sheet i:nth-child(3) { width: 64%; }
.pe-ws-stage-kind {
	padding: 15px 0; text-align: center; color: #fff; background: var(--pdfraj-accent);
	font-size: 1.35rem; font-weight: 800; letter-spacing: 0.04em;
}
.pe-ws-stage-name {
	margin: var(--pdfraj-sp-2) 0 0; font-size: var(--pdfraj-fs-base); color: var(--pdfraj-text-muted);
	font-variant-numeric: tabular-nums; max-width: min(38ch, 90%);
	display: flex; gap: 0.4em; align-items: baseline; justify-content: center; min-width: 0;
}
/* The name gives way when there is no room. The size never does — it is the
   half worth keeping, and as one string the ellipsis ate it: "…pages.pdf (1…" */
.pe-ws-stage-fname { font-weight: inherit; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-ws-stage-fsize { flex: 0 0 auto; white-space: nowrap; }
.pe-ws-stage-status {
	margin: 0; font-size: var(--pdfraj-fs-lg, 1.0625rem); font-weight: 700; color: var(--pdfraj-text);
	font-variant-numeric: tabular-nums;
}
/* The center stage no longer carries a progress bar (neither the indeterminate
   processing sweep nor the determinate upload fill). The single loader is the
   right action panel's spinner + status + elapsed/ETA; upload progress shows as
   a percentage in .pe-ws-stage-status. */

[data-role="workspace-mount"].pe-ws-hasresult > :not(.pe-ws-resulthost) { display: none !important; }
/* The editor keeps Download / Share / Finish in the document bar, OUTSIDE that
 * container, so the host does not cover them. On a Done page they duplicate the
 * panel's Download — and the editor's one saves the canvas, not the file that
 * was just produced. */
.pdfraj-app.pe-ws-resultshown .pe-ws-doc-actions { display: none !important; }

/* A produced SET that is named rather than opened — too many files to preview,
 * or not PDFs at all (pdf-to-jpg's images). Read-only by construction: there is
 * nothing on a row to click, because there is nothing here that can be acted on
 * individually. The zip is the download. */
.ps-grid.ps-grid-filelist { display: block; max-width: 640px; margin: 0 auto; padding: var(--pdfraj-sp-5) 0 var(--pdfraj-sp-6); }
.ps-filelist-head { font-weight: 600; color: var(--pdfraj-text); margin-bottom: 0.75rem; }
.ps-filelist-row {
	display: flex; align-items: center; gap: 0.75rem;
	padding: 0.6rem 0.85rem; border: 1px solid var(--pdfraj-bd);
	border-radius: var(--pdfraj-r-sm); background: #fff; margin-bottom: 0.4rem;
}
.ps-filelist-pos { flex: 0 0 auto; min-width: 1.75rem; color: var(--pdfraj-text-muted); font-variant-numeric: tabular-nums; }
.ps-filelist-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-filelist-size { flex: 0 0 auto; color: var(--pdfraj-text-muted); font-variant-numeric: tabular-nums; }

/* The host stands on its own. It renders on pages that do NOT load
 * pdfraj-workspace.css — the PDF Editor is one — so the page-card styling cannot
 * be borrowed from there: the first attempt produced 921px-wide bare pages with
 * no card and no column. Scoped to the host, so page-studio's own grid is
 * untouched on the pages where both exist. */
.pe-ws-resulthost .ps-grid-result { display: block; max-width: 720px; margin: 0 auto; padding: var(--pdfraj-sp-5) 0 var(--pdfraj-sp-6); }
.pe-ws-resulthost .ps-page { width: 100%; max-width: 680px; margin: 0 auto 1.25rem; cursor: default; }
.pe-ws-resulthost .ps-thumb {
	width: 100%; overflow: hidden; background: #fff;
	border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-sm); box-shadow: var(--pdfraj-sh-sm);
}
.pe-ws-resulthost .ps-thumb canvas,
.pe-ws-resulthost .ps-thumb img { width: 100%; height: auto; display: block; }
@media (max-width: 780px) { .pe-ws-resulthost .ps-page { max-width: 100%; } }
/* The named list keeps its narrower column inside the host too — the page
 * rules above would otherwise win on order alone. */
.pe-ws-resulthost .ps-grid-filelist { max-width: 640px; }

/* A result the previewer cannot open (.docx, .xlsx, .pptx, .txt): what was
 * produced, named, in place of the input document the page used to leave up. */
.pe-ws-rfile {
	border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md);
	background: #fff; padding: var(--pdfraj-sp-4);
}
.pe-ws-rfile-name { font-weight: 600; color: var(--pdfraj-text); word-break: break-word; }
.pe-ws-rfile-meta { color: var(--pdfraj-text-muted); font-size: var(--pdfraj-fs-sm); margin-top: 0.2rem; }
.pe-ws-rfile-list { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.85rem; }
.pe-ws-rfile-chip {
	padding: 0.2rem 0.55rem; border: 1px solid var(--pdfraj-bd); border-radius: 999px;
	font-size: var(--pdfraj-fs-sm); color: var(--pdfraj-text);
}
/* NOT a scrollbox. It was one — 420px with overflow:auto — and the wheel never
 * reached it: the element scrolled fine when driven from script, so the box was
 * not the problem, something above it takes the wheel. A result page has no
 * business nesting a second scroller inside the one the workspace already has,
 * so the text simply flows and the page scrolls. */
.pe-ws-rfile-text {
	margin: 0.85rem 0 0; padding: var(--pdfraj-sp-3);
	background: #f7f8fa; border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-sm);
	font-size: var(--pdfraj-fs-sm); line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.pe-ws-rfile-more { margin-top: 0.5rem; color: var(--pdfraj-text-muted); font-size: var(--pdfraj-fs-sm); }

/* ---- Shared inline notice (workspace grid AND the views without a strip) ----
 * Lives here, not in pdfraj-workspace.css, because that file is workspace-only
 * and _showViewNotice puts these same classes in front of the PDF Editor too.
 * One banner: sticky red for a corrupted file in the set, transient amber for
 * an upload limit or a refusal. (Portal issue #32.) */
/* ---- Inline workspace notice (corrupted file / upload limit) ---------------- */
/* One banner above the grid: sticky red for a corrupted file in the set (until it
 * is removed), transient amber for "maximum upload limit reached". */
.ps-notice { margin: 0 0 12px; }
.ps-notice[hidden] { display: none; }
.ps-notice-box { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; border-radius: 10px; font-size: 0.95rem; line-height: 1.45; }
.ps-notice-title { flex: 0 0 auto; }
.ps-notice-msg { min-width: 0; }
.ps-notice-x { margin-left: auto; flex: 0 0 auto; border: 0; background: transparent; font-size: 1.15rem; line-height: 1; cursor: pointer; color: inherit; opacity: 0.65; padding: 0 2px; }
.ps-notice-x:hover { opacity: 1; }
.ps-notice-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.ps-notice-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
/* Per-file refusal rows (client issue #32): one line per file, its name first.
   The box is a baseline flex row, so the list has to claim a full row of its
   own -- guarded with :has() so a notice WITHOUT a list keeps the single-line
   layout it has today. */
.ps-notice-box:has(.ps-notice-list) { flex-wrap: wrap; }
.ps-notice-list { flex: 0 0 100%; margin: 6px 0 0; padding: 0 0 0 2px; list-style: none; }
.ps-notice-list li { margin: 2px 0; }
.ps-notice-file { font-weight: 700; }

/* --- Edit Metadata: values too long for one line (portal #50) ---------------
 * Title, Subject and Keywords routinely run past the width of the side panel.
 * In a single-line input the user could see only that something was cut off,
 * not whether the whole value had been read out of their file. These grow to
 * the text (height is set in JS from scrollHeight) and can be dragged taller.
 *
 * overflow-y:hidden is what makes the auto-grow look right: with a scrollbar
 * the box would size itself to one line and scroll instead of growing. */
.pe-ws-meta-area {
	display: block;
	width: 100%;
	min-height: 38px;
	max-height: 220px;
	overflow-y: auto;
	resize: vertical;
	font: inherit;
	line-height: 1.45;
	white-space: pre-wrap;
	word-break: break-word;
}

/* ---- Done panel: optional per-item detail --------------------------------
   Folded away by default so the panel reads exactly as before for anyone who
   does not open it. OCR uses it to report how each page was read; the client
   had no way to check a per-page decision except by timing the whole job. */
.pe-ws-done-rows { margin: 8px 0 0; font-size: 0.86rem; }
.pe-ws-done-rows > summary { cursor: pointer; color: var(--pdfraj-text-muted, #64748b); list-style: revert; }
.pe-ws-done-rows > summary:hover { color: var(--pdfraj-accent, #5247DC); }
.pe-ws-done-rows-list { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; max-height: 190px; overflow-y: auto; }
.pe-ws-done-row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; border-bottom: 1px solid var(--pdfraj-bd, #e2e8f0); }
.pe-ws-done-row:last-child { border-bottom: 0; }
.pe-ws-done-row-k { color: var(--pdfraj-text-muted, #64748b); }
.pe-ws-done-row-v { font-variant-numeric: tabular-nums; }

/* "Done with PDFRaj <Engine> <version>" line at the bottom of the result body
   (pdfraj-ws-panels-result.js). Muted; themes via the shared --pdfraj-* vars. */
/* Engine credit: a ranked, premium read -- a tiny tracked micro-label above the
 * engine name (slightly stronger) with the version in a subtle mono pill, rather
 * than one flat grey sentence. Muted overall; green stays reserved for actions,
 * so the mark + pill are neutral. */
.pe-ws-done-engine {
	margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--pdfraj-bd, #e6e9ec);
	display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1.25;
}
.pe-ws-eng-label {
	font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--pdfraj-text-muted); opacity: .7;
}
.pe-ws-eng-name {
	display: inline-flex; align-items: center; gap: .32em;
	font-size: .84rem; font-weight: 600; color: var(--pdfraj-text);
}
.pe-ws-eng-mark { font-size: .74em; color: var(--pdfraj-text-muted); opacity: .8; }
.pe-ws-eng-ver {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .66rem; font-weight: 600; color: var(--pdfraj-text-muted);
	background: color-mix(in srgb, var(--pdfraj-text) 6%, transparent);
	border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-pill);
	padding: .07rem .45rem; font-variant-numeric: tabular-nums; line-height: 1.3;
}
/* M3: on phones, raise the muted engine-credit micro-text off the ~10px floor
 * (.6rem label / .66rem version) to a comfortable ~11px. Desktop stays as-is. */
@media (max-width: 768px) {
	.pe-ws-eng-label { font-size: .7rem; }
	.pe-ws-eng-ver { font-size: .7rem; }
}

/* =========================================================================
   N1 — WORKSPACE DARK MODE
   The shell hardcodes light surfaces (#fff panels, light greys) and the
   --pdfraj-* tokens are light-only (scoped to .pdfraj-app), so dark mode left
   the stage + right panel + result white while only the header/rail were dark.
   (1) Re-point the workspace tokens to the dark palette used elsewhere
   (pdfraj-tool-v2.css: page #0B0C0E, card #16181C, text #F5F4EF, border
   #26282D, muted #B9BCC4). (2) Override the hardcoded-#fff surfaces. Light
   mode is untouched; everything is scoped under html[data-theme="dark"].
   ========================================================================= */
html[data-theme="dark"] .pdfraj-app {
	--pdfraj-text: #F5F4EF;
	--pdfraj-text-muted: #B9BCC4;
	--pdfraj-bd: #26282D;
	--pdfraj-bd-strong: #3a3f48;
	--pdfraj-canvas: #0E1013;
	--pdfraj-accent-soft: #14213F;
	/* Bright brand green reads on the dark surfaces for icons / spinner /
	   progress / borders. The FILLED buttons are darkened separately below:
	   white text on #4F7CFF is only 3.16:1, so the button bg drops to #2563EB
	   (~4.7:1, past WCAG AA) while the lighter green stays for everything else. */
	--pdfraj-accent: #4F7CFF;
	--pdfraj-accent-hover: #2563EB;
}
/* Filled primary buttons: darker green so the white label meets WCAG AA. */
html[data-theme="dark"] .pdfraj-app .pe-ws-panel-run,
html[data-theme="dark"] .pdfraj-app .pe-ws-modal-save { background: #2563EB; border-color: #2563EB; color: #fff; }
html[data-theme="dark"] .pdfraj-app .pe-ws-panel-run:hover:not(:disabled),
html[data-theme="dark"] .pdfraj-app .pe-ws-modal-save:hover { background: #1D54CF; border-color: #1D54CF; }
html[data-theme="dark"] .pdfraj-app .pe-ws-panel-run:disabled:hover { background: #2563EB; border-color: #2563EB; }
/* page + preview band */
html[data-theme="dark"] body.pdfraj-ws-v2.pdfraj-editing,
html[data-theme="dark"] body.pdfraj-editing { background: #0B0C0E; }
/* right action/result panel + top bars */
html[data-theme="dark"] .pdfraj-app .pe-ws-side { background: #121317; }
html[data-theme="dark"] .pdfraj-app .pe-ws-top,
html[data-theme="dark"] .pdfraj-app .pe-ws-docbar { background: #0E1013; }
html[data-theme="dark"] .pdfraj-app .pe-ws-back { background: #16181C; color: #F5F4EF; }
html[data-theme="dark"] .pdfraj-app .pe-ws-back:hover,
html[data-theme="dark"] .pdfraj-app .pe-ws-docname-wrap:hover,
html[data-theme="dark"] .pdfraj-app .pe-ws-modal-x:hover { background: #1F2125; }
html[data-theme="dark"] .pdfraj-app .pe-ws-docsize { background: #1F2125; color: #B9BCC4; }
/* option (mode) cards + choice/file cards */
html[data-theme="dark"] .pdfraj-app .pe-ws-mode-row { background: #16181C; border-color: #26282D; }
html[data-theme="dark"] .pdfraj-app .pe-ws-mode-row.is-active { background: #14213F; border-color: #4F7CFF; }
html[data-theme="dark"] .pdfraj-app .pe-ws-card { background: #16181C; }
html[data-theme="dark"] .pdfraj-app .pe-ws-cards--segmented .pe-ws-card:hover { background: rgba(255, 255, 255, 0.06); }
/* converting stage card */
html[data-theme="dark"] .pdfraj-app .pe-ws-stage-card { background: #16181C; }
html[data-theme="dark"] .pdfraj-app .pe-ws-stage-sheet i { background: color-mix( in srgb, var(--pdfraj-accent) 30%, #16181C ); }
/* rename / modal */
html[data-theme="dark"] .pdfraj-app .pe-ws-modal { background: #16181C; }
html[data-theme="dark"] .pdfraj-app .pe-ws-modal-input { background: #0E1013; color: #F5F4EF; }
/* result / done text that used hardcoded colours */
html[data-theme="dark"] .pdfraj-app .pe-ws-done-meta,
html[data-theme="dark"] .pdfraj-app .pe-ws-side-hint { color: #B9BCC4; }
/* converter toolbar + thumbnail rail (merge / compress Files-Pages views) */
html[data-theme="dark"] .pdfraj-app .pdfraj-workspace-mount .cf-toolbar,
html[data-theme="dark"] .pdfraj-app .pdfraj-workspace-mount .cf-rail { background: #0E1013; }
html[data-theme="dark"] .pdfraj-app .pdfraj-workspace-mount .cf-tb-btn { color: #B9BCC4; }
html[data-theme="dark"] .pdfraj-app .pdfraj-workspace-mount .cf-tb-btn:hover:not(:disabled),
html[data-theme="dark"] .pdfraj-app .pdfraj-workspace-mount .cf-thumb:hover { background: #16181C; }
/* result panel buttons + chips (the panel itself is dark; these sit on it) */
html[data-theme="dark"] .pdfraj-app .pe-ws-iconbtn,
html[data-theme="dark"] .pdfraj-app .pe-ws-startover,
html[data-theme="dark"] .pdfraj-app .pe-ws-reedit,
html[data-theme="dark"] .pdfraj-app .pe-ws-rfile { background: #16181C; border-color: #26282D; color: #F5F4EF; }
html[data-theme="dark"] .pdfraj-app .pe-ws-iconbtn:hover,
html[data-theme="dark"] .pdfraj-app .pe-ws-startover:hover,
html[data-theme="dark"] .pdfraj-app .pe-ws-reedit:hover { background: #1F2125; border-color: #3a3f48; }
html[data-theme="dark"] .pdfraj-app .pe-ws-foot { background: transparent; border-top-color: #26282D; }
/* page-studio grid (.ps-*): merge/compress Files+Pages views + result thumbnails */
html[data-theme="dark"] .pdfraj-app .ps-toolbar,
html[data-theme="dark"] .pdfraj-app .ps-dd-menu { background: #0E1013; border-color: #26282D; }
html[data-theme="dark"] .pdfraj-app .ps-tool-btn,
html[data-theme="dark"] .pdfraj-app .ps-doc-chip,
html[data-theme="dark"] .pdfraj-app .ps-zoom { background: #16181C; border-color: #26282D; color: #F5F4EF; }
html[data-theme="dark"] .pdfraj-app .ps-viewtoggle { background: #1F2125; }
html[data-theme="dark"] .pdfraj-app .ps-viewtoggle .is-active { background: #16181C; }
html[data-theme="dark"] .pdfraj-app .ps-tbar-sep,
html[data-theme="dark"] .pdfraj-app .ps-zoom-range { background: #26282D; }
html[data-theme="dark"] .pdfraj-app .ps-card { background: #16181C; border-color: #26282D; }
html[data-theme="dark"] .pdfraj-app .ps-thumb { background: #0E1013; }
html[data-theme="dark"] .pdfraj-app .ps-thumbtools { background: #16181C; }
/* top bar + docbar set #fff in a high-specificity rule (body.pdfraj-ws-v2
   .pdfraj-app.pdfraj-has-files …) — match that specificity so dark wins */
html[data-theme="dark"] body.pdfraj-ws-v2 .pdfraj-app.pdfraj-has-files .pe-ws-top,
html[data-theme="dark"] body.pdfraj-ws-v2 .pdfraj-app.pdfraj-has-files .pe-ws-docbar { background: #0E1013; border-bottom-color: #26282D; }
/* The dedicated PDF Editor (/editor/, no .pdfraj-ws-v2) forces the doc-bar white
 * via `body.pe-ws-editor ... .pe-ws-docbar { background:#fff !important }` (line ~205),
 * which beat the dark rule above. Match that selector + !important in dark. */
html[data-theme="dark"] body.pe-ws-editor .pdfraj-app.pe-ws-has-rail.pdfraj-has-files .pe-ws-docbar { background: #0E1013 !important; border-bottom-color: #26282D !important; }
html[data-theme="dark"] .pdfraj-app .pe-ws-top-div { background: #26282D; }
html[data-theme="dark"] .pdfraj-app .pe-ws-card-dot { background: #16181C; }
/* small accent chips (tool icon in the panel head, RECOMMENDED tag): dark-green
   tint instead of the light-blue accent-soft. The green success check keeps its
   own colour (.pe-ws-done-ck is not touched). */
html[data-theme="dark"] .pdfraj-app .pe-ws-side-ic,
html[data-theme="dark"] .pdfraj-app .pe-ws-card-tag { background: #14213F; color: #4F7CFF; }
/* page-grid file chips (filename pill, add tile, checkbox). The page PREVIEW
   thumbnails themselves stay white on purpose — they are the document's pages. */
html[data-theme="dark"] .pdfraj-app .ps-doc-name { background: #1F2125; color: #F5F4EF; }
html[data-theme="dark"] .pdfraj-app .ps-add-tile { background: #16181C; border-color: #26282D; }
html[data-theme="dark"] .pdfraj-app .ps-doc-check { background: #16181C; border-color: #3a3f48; }
/* Discard (destructive) hover on dark -- warning red, after the neutral dark
   .pe-ws-iconbtn:hover above so it wins on source order (equal specificity). */
html[data-theme="dark"] .pdfraj-app .pe-ws-iconbtn--danger:hover { background: #3a1a1c; color: #ff8a8a; border-color: #5a2a2a; }

/* ============================================================================
 * MOBILE UI BATCH M1 -- touch targets + multi-file toolbar fit (2026-10-12)
 * Phone-width only (<=768px); desktop/mouse sizing above is untouched. Bumps the
 * workspace controls that audited under the ~44px touch guideline, and lets the
 * multi-file selection bar wrap so the zoom control stops sitting off-screen
 * (audit findings G1 + G4). Appended last in the last-loaded workspace stylesheet
 * so it wins the cascade over the base rules in pdfraj-workspace.css.
 * This file is the SHARED chrome; the editor's own toolbar (M2) lives in
 * pdfraj-editor.css and is deliberately not touched here.
 * ============================================================================ */
@media (max-width: 768px) {
	/* bar controls move to a 44px rhythm (tool/view/icon/zoom share --ps-bar-h) */
	.pdfraj-app .ps-bar,
	.pdfraj-app .ps-bar-view { --ps-bar-h: 44px; }

	/* G4: the multi-file selection bar no longer runs off the right edge -- the
	   view/sort/zoom group wraps to its own full-width row below select-all. */
	.pdfraj-app .ps-selbar { flex-wrap: wrap; row-gap: var(--pdfraj-sp-2); }
	.pdfraj-app .ps-selbar .ps-bar-view {
		margin-left: 0; flex-wrap: wrap; width: 100%; justify-content: flex-start;
	}

	/* zoom control: a 4px-tall slider is not grabbable on touch -- give it a 40px
	   hit area and a bigger thumb, and enlarge the +/- buttons and the readout. */
	.pdfraj-app .ps-zoom { padding: 4px 8px; }
	.pdfraj-app .ps-zoom-btn { width: 40px; height: 40px; font-size: 20px; }
	.pdfraj-app .ps-zoom-pct { min-width: 42px; }
	.pdfraj-app .ps-zoom-range { height: 40px; }
	.pdfraj-app .ps-zoom-range::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -9px; }
	.pdfraj-app .ps-zoom-range::-moz-range-thumb { width: 22px; height: 22px; }

	/* small round / icon buttons reach >=44px */
	.pdfraj-app .ps-tt-btn,
	.pdfraj-app .ps-icon-btn { min-width: 44px; min-height: 44px; }
	.pdfraj-app .ps-reset-btn { min-height: 40px; }

	/* selection checkboxes: 16-17px -> 22px, with a padded easy-to-hit wrapper;
	   the select-all / inline-check label rows get a 44px-tall hit area. */
	.pdfraj-app .ps-check input,
	.pdfraj-app .ps-selall input,
	.pdfraj-app .ps-doc-check input { width: 22px; height: 22px; }
	.pdfraj-app .ps-doc-check { padding: 8px; top: 4px; left: 4px; }
	.pdfraj-app .ps-selall,
	.pdfraj-app .ps-check { min-height: 44px; }

	/* page-insert "+" between multi-file tiles: enlarge the tap target */
	.pdfraj-app .ps-grid-multi:not(.ps-list) .ps-insert { width: 38px; height: 38px; right: -19px; }

	/* shared chrome: back / menu / doc-name / find all reach a 44px rhythm */
	.pe-ws-back { width: 44px; height: 44px; }
	.pe-ws-menubtn { width: 44px; height: 44px; }
	.pe-ws-docname-wrap { min-height: 44px; }
	.pe-ws-find-input { min-height: 38px; }
}

/* ===========================================================================
 * On-device processing: the Local / Our-engine toggle (pdfraj-local.js).
 * Sits in the shared panel footer ABOVE the primary action, only for tools the
 * on-device bundle can run. Green stays reserved for actions, so the selected
 * segment is a neutral raised chip rather than the accent colour.
 * ===========================================================================*/
.pdfraj-modetoggle { margin: 0 0 var(--pdfraj-sp-3, 12px); }
.pdfraj-modetoggle-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pdfraj-modetoggle-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pdfraj-text-muted); }
.pdfraj-modetoggle-help {
	width: 20px; height: 20px; border-radius: 50%; padding: 0; line-height: 1;
	border: 1px solid var(--pdfraj-bd-strong, var(--pdfraj-bd)); background: transparent;
	color: var(--pdfraj-text-muted); font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer;
}
.pdfraj-modetoggle-help:hover, .pdfraj-modetoggle-help[aria-expanded="true"] { color: var(--pdfraj-text); border-color: var(--pdfraj-text-muted); }
.pdfraj-modetoggle-seg {
	display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px;
	border-radius: var(--pdfraj-r-md, 10px); background: color-mix(in srgb, var(--pdfraj-text) 7%, transparent);
}
.pdfraj-modetoggle-opt {
	min-height: 36px; padding: 6px 8px; border: 0; border-radius: calc(var(--pdfraj-r-md, 10px) - 3px);
	background: transparent; color: var(--pdfraj-text-muted); font: inherit; font-size: .8rem; font-weight: 600;
	cursor: pointer; white-space: nowrap;
}
.pdfraj-modetoggle-opt:hover:not(.is-on) { color: var(--pdfraj-text); }
.pdfraj-modetoggle-opt.is-on {
	background: #fff; color: var(--pdfraj-text);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 0 0 1px var(--pdfraj-bd);
}
.pdfraj-modetoggle-opt:focus-visible, .pdfraj-modetoggle-help:focus-visible { outline: 2px solid var(--pdfraj-accent); outline-offset: 2px; }
.pdfraj-modetoggle-note { margin-top: 6px; font-size: .74rem; line-height: 1.35; color: var(--pdfraj-text-muted); }
.pdfraj-modetoggle-tip {
	margin-top: 6px; padding: 8px 10px; font-size: .74rem; line-height: 1.4; color: var(--pdfraj-text);
	border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md, 10px); background: color-mix(in srgb, var(--pdfraj-text) 4%, transparent);
}
.pdfraj-modetoggle-tip[hidden] { display: none; }

/* Done screen: where the work happened. Replaces the engine credit for a local result. */
.pdfraj-local-done {
	margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--pdfraj-bd, #e6e9ec);
	display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
}
.pdfraj-local-done-k { font-size: .84rem; font-weight: 600; color: var(--pdfraj-text); }
.pdfraj-local-done-v { font-size: .74rem; color: var(--pdfraj-text-muted); }

/* Consent panel reuses the rename modal's frame; only the body copy is new. */
.pdfraj-consent .pdfraj-consent-p { margin: 10px 0 0; font-size: var(--pdfraj-fs-base, .95rem); line-height: 1.45; color: var(--pdfraj-text); }

html[data-theme="dark"] .pdfraj-app .pdfraj-modetoggle-opt.is-on { background: #26282D; box-shadow: 0 0 0 1px #3A3D44; color: #F5F4EF; }
html[data-theme="dark"] .pdfraj-app .pdfraj-modetoggle-seg { background: #0E1013; }
.pdfraj-local-ic { vertical-align: -2px; }
.pdfraj-modetoggle-opt { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }

/* Touch screens: bigger targets for the on-device toggle (finger, not cursor). */
@media (pointer: coarse) {
	.pdfraj-modetoggle-opt { min-height: 44px; }
	.pdfraj-modetoggle-help { width: 32px; height: 32px; font-size: .85rem; }
}