/*
 * 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 merge-pdf frontend — Milestone 2B.
 * Functional minimal styles. Paperline porting is a SEPARATE milestone.
 * Variables are scoped to .pdfraj-app so they cannot leak into the host theme
 * if this CSS is ever shipped alongside one in Phase 3.
 */

/* Phase 5A frontend-experiment: Sejda-inspired public theme. Body face is
 * Atkinson Hyperlegible (SIL OFL, vendored locally). */
@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("../fonts/atkinson-hyperlegible-regular.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("../fonts/atkinson-hyperlegible-bold.woff2") format("woff2");
	font-weight: 700; font-style: normal; font-display: swap;
}

:root {
	/* Surfaces */
	--pdfraj-bg: #ffffff;
	--pdfraj-paper: #ffffff;
	--pdfraj-surface-soft: #f5f5f5;   /* nav pills, faint fills */
	--pdfraj-surface-warm: #f3e5d8;   /* Sejda warm beige (card border / section tint) */

	/* Text */
	--pdfraj-ink: #333333;
	--pdfraj-muted: #777777;
	--pdfraj-border: #e6e1da;

	/* Brand (Sejda-inspired green; conventional darken-green hover) */
	--pdfraj-accent: #00bb88;
	--pdfraj-accent-hover: #00a37a;
	--pdfraj-accent-2: #0282e5;       /* secondary blue / "popular" accent */
	--pdfraj-accent-soft: rgba(0,187,136,0.08);

	/* Status */
	--pdfraj-success: #00936b;
	--pdfraj-success-bg: #effffb;
	--pdfraj-warning: #664d03;
	--pdfraj-warning-bg: #fce8ba;
	--pdfraj-danger: #ff3268;
	--pdfraj-danger-bg: #fdecf1;

	/* Radius */
	--pdfraj-radius-sm: 4px;
	--pdfraj-radius: 10px;
	--pdfraj-radius-pill: 25px;

	/* Typography */
	--pdfraj-font-body: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--pdfraj-font-heading: "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Elevation & motion */
	--pdfraj-shadow-card: 0 2px 3px rgba(243,229,216,0.5), 0 1px 3px rgba(0,0,0,0.08);
	--pdfraj-shadow-pop: 0 6px 16px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.05);
	--pdfraj-transition: 0.2s ease-in-out;
}

* { box-sizing: border-box; }

/* The HTML `hidden` attribute should always win over component display rules. */
.pdfraj-app [hidden] { display: none !important; }
html, body {
	margin: 0;
	background: var(--pdfraj-bg);
	color: var(--pdfraj-ink);
	font-family: var(--pdfraj-font-body);
	font-size: 17px;
	line-height: 1.5;
}
/* The same declarations again, scoped to the plugin's own body class.
 *
 * The rule above is `body` -- specificity (0,0,1) -- and so is the typography a
 * WordPress block theme prints from its theme.json global styles. Equal
 * specificity means the later stylesheet wins, and global styles are emitted
 * after plugin stylesheets, so the THEME decides how this plugin's pages read.
 * On ipdfpro.com (Twenty Twenty-Five) that meant body text rendered as Manrope
 * 300 at 23.375px instead of Atkinson Hyperlegible 400 at 17px -- visibly
 * thinner and larger than the same build on a site with no block theme.
 *
 * `body.pdfraj-body` is (0,1,1), so it wins on specificity rather than on load
 * order, and needs no !important. The class is the plugin's own, set in
 * frontend/templates/_partials/head.php, so this reaches the plugin's pages and
 * nothing else on the site.
 *
 * font-weight and letter-spacing are listed even though the rule above never set
 * them: not setting a property is not the same as owning it, and those two are
 * exactly what the theme was supplying. */
body.pdfraj-body {
	background: var(--pdfraj-bg);
	color: var(--pdfraj-ink);
	font-family: var(--pdfraj-font-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--pdfraj-font-heading); }

.pdfraj-app {
	max-width: 840px;
	margin: 2.75rem auto;
	padding: 0 1.25rem;
}

/* Tool hero — centered (Sejda-style) */
.pdfraj-header {
	text-align: center;
	margin-bottom: 2rem;
}
.pdfraj-header h1 {
	font-size: 2.4rem;
	margin: 0 0 0.6rem;
	letter-spacing: -0.02em;
	line-height: 1.1;
}
.pdfraj-header .lead {
	color: var(--pdfraj-muted);
	font-size: 1.05rem;
	margin: 0 auto;
	max-width: 560px;
}

/* ---- Dropzone ---- */
.pdfraj-dropzone {
	background: var(--pdfraj-paper);
	border: 2px dashed var(--pdfraj-border);
	border-radius: var(--pdfraj-radius);
	padding: 2.5rem 1.5rem;
	text-align: center;
	transition: border-color 0.18s ease, background-color 0.18s ease;
	cursor: pointer;
	outline: none;
}
.pdfraj-dropzone:focus-visible {
	border-color: var(--pdfraj-accent);
	box-shadow: 0 0 0 3px rgba(0,187,136,0.15);
}
.pdfraj-dropzone[data-dragover="true"] {
	border-color: var(--pdfraj-accent);
	background: rgba(0,187,136,0.04);
}
.pdfraj-dropzone[data-state="uploading"],
.pdfraj-dropzone[data-state="queued"],
.pdfraj-dropzone[data-state="processing"],
.pdfraj-dropzone[data-state="done"],
.pdfraj-dropzone[data-state="failed"] {
	pointer-events: none;
	opacity: 0.65;
}

.dropzone-icon { color: var(--pdfraj-accent); display: block; margin: 0 auto 0.75rem; }
.dropzone-prompt p { margin: 0; }
.dropzone-prompt .hint { color: var(--pdfraj-muted); font-size: 0.875rem; margin-top: 0.25rem; }

.hint-trust { color: var(--pdfraj-muted); opacity: 0.85; }

/* Sejda-style upload band: soft filled panel + a prominent upload button
 * (the button is injected by pdfraj-shell.js initUploadBand on every tool
 * page). Defined before the collapse rules so those win on file-present. */
.pdfraj-dropzone.pdfraj-dropzone--enhanced {
	background: var(--pdfraj-surface-soft, #f5f5f5);
	border: 1px solid transparent;
	border-radius: 16px;
	padding: 3rem 1.5rem;
}
.pdfraj-dropzone--enhanced[data-dragover="true"] {
	background: var(--pdfraj-accent-soft);
	border-color: var(--pdfraj-accent);
}
.pdfraj-dropzone--enhanced .dropzone-icon { display: none; }
.pdfraj-dropzone--enhanced .dropzone-prompt p:not(.hint) {
	margin: 0.9rem 0 0; color: var(--pdfraj-muted); font-size: 0.95rem;
}
.pdfraj-upload-btn {
	display: inline-flex; align-items: center; gap: 0.55rem;
	background: var(--pdfraj-accent); color: #fff;
	font: inherit; font-size: 1.15rem; font-weight: 600;
	padding: 0.95rem 2rem; border: 0; border-radius: 8px;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(0, 187, 136, 0.28);
	transition: background-color 0.15s ease, transform 0.1s ease;
}
.pdfraj-upload-btn:hover { background: var(--pdfraj-accent-hover); }
.pdfraj-upload-btn:active { transform: translateY(1px); }

/* Collapse the dropzone once a file is present (multi-file Merge keeps the
 * full dropzone so more files can be added).
 *  - file-list tools (Compress): hide the prompt, leave the file chip in a
 *    slim box (its × lets you swap the file);
 *  - Page Studio single-file (Organize): the grid is the workspace, so slim
 *    the dropzone to a compact "replace" bar. */
.pdfraj-dropzone:has(.file-list li) {
	padding: 0.75rem 1rem;
	cursor: default;
}
.pdfraj-dropzone:has(.file-list li) .dropzone-prompt { display: none; }

.pdfraj-app.pdfraj-has-files[data-ws-layout="single"] .pdfraj-dropzone {
	padding: 0.7rem 1rem;
	cursor: default;
}
.pdfraj-app.pdfraj-has-files[data-ws-layout="single"] .dropzone-icon,
.pdfraj-app.pdfraj-has-files[data-ws-layout="single"] .pdfraj-upload-btn,
.pdfraj-app.pdfraj-has-files[data-ws-layout="single"] .dropzone-prompt .hint {
	display: none;
}
.pdfraj-app.pdfraj-has-files[data-ws-layout="single"] .dropzone-prompt p { font-size: 0.875rem; }

/* The "what will be submitted" disclosure is noise before a file is added. */
.pdfraj-app:not(.pdfraj-has-files) .ps-advanced { display: none; }

.link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--pdfraj-accent);
	cursor: pointer;
	text-decoration: underline;
}
.link:hover { color: var(--pdfraj-accent-hover); }

/* ---- File list ---- */
.file-list {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 0;
	text-align: left;
}
.file-list:empty { display: none; }
.file-list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: #fafafa;
	border: 1px solid var(--pdfraj-border);
	border-radius: var(--pdfraj-radius-sm);
	padding: 0.625rem 0.875rem;
	margin: 0.5rem 0;
}
.file-list .name { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list .size { color: var(--pdfraj-muted); font-size: 0.875rem; }
.file-list .remove {
	border: 0;
	background: transparent;
	color: var(--pdfraj-muted);
	width: 28px; height: 28px;
	border-radius: 50%;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}
.file-list .remove:hover { background: rgba(0,0,0,0.05); color: var(--pdfraj-danger); }

/* ---- Tool options (per-tool controls between dropzone and actions) ---- */
.pdfraj-tool-options {
	margin-top: 1.25rem;
	background: var(--pdfraj-paper);
	border: 1px solid var(--pdfraj-border);
	border-radius: var(--pdfraj-radius);
	padding: 1rem 1.25rem;
}
.tool-options-label {
	margin: 0 0 0.625rem;
	font-weight: 600;
	color: var(--pdfraj-ink);
	font-size: 0.9375rem;
}
.angle-picker { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.angle-option {
	flex: 1 1 0;
	min-width: 110px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1rem;
	border: 1px solid var(--pdfraj-border);
	border-radius: var(--pdfraj-radius-sm);
	cursor: pointer;
	background: #fafafa;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.angle-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.angle-option:hover { background: #f4f4f5; }
.angle-option:has(input[type="radio"]:checked) {
	border-color: var(--pdfraj-accent);
	background: rgba(0,187,136,0.06);
}
.angle-glyph { font-size: 1.25rem; color: var(--pdfraj-accent); margin-bottom: 0.125rem; font-variant-numeric: tabular-nums; }
.angle-label { font-weight: 600; font-size: 0.9375rem; }

/* Number picker (used by Split PDF for pages-per-part). */
.number-picker { display: flex; flex-direction: column; gap: 0.5rem; }
.number-picker-help { color: var(--pdfraj-muted); font-size: 0.8125rem; margin: 0; }
.number-picker input[type="number"] {
	font: inherit;
	font-size: 1.125rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--pdfraj-border);
	border-radius: var(--pdfraj-radius-sm);
	background: #fff;
	width: 8rem;
	font-variant-numeric: tabular-nums;
}
.number-picker input[type="number"]:focus-visible {
	outline: none;
	border-color: var(--pdfraj-accent);
	box-shadow: 0 0 0 3px rgba(0,187,136,0.15);
}
.number-picker input[type="number"]:disabled { background: #fafafa; color: var(--pdfraj-muted); }

/* Free-text picker (used by Split by text). */
.text-picker { display: flex; flex-direction: column; gap: 0.5rem; }
.text-picker input[type="text"] {
	font: inherit; padding: 0.5rem 0.75rem;
	border: 1px solid var(--pdfraj-border); border-radius: var(--pdfraj-radius-sm);
	background: #fff; max-width: 22rem;
}
.text-picker input[type="text"]:focus-visible {
	outline: none; border-color: var(--pdfraj-accent);
	box-shadow: 0 0 0 3px rgba(0,187,136,0.15);
}

/* Bookmark rows (used by Create Bookmarks): title + page + remove. */
.bookmark-rows { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.6rem; }
.bookmark-row { display: flex; gap: 0.5rem; align-items: center; }
.bookmark-row .bm-title {
	flex: 1 1 auto; font: inherit; padding: 0.45rem 0.6rem;
	border: 1px solid var(--pdfraj-border); border-radius: var(--pdfraj-radius-sm); background: #fff;
}
.bookmark-row .bm-page {
	flex: 0 0 5.5rem; width: 5.5rem; font: inherit; padding: 0.45rem 0.6rem;
	border: 1px solid var(--pdfraj-border); border-radius: var(--pdfraj-radius-sm); background: #fff;
	font-variant-numeric: tabular-nums;
}
.bookmark-row .bm-title:focus-visible,
.bookmark-row .bm-page:focus-visible {
	outline: none; border-color: var(--pdfraj-accent); box-shadow: 0 0 0 3px rgba(0,187,136,0.15);
}
.bookmark-row .bm-remove {
	flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
	font-size: 1.1rem; line-height: 1; color: var(--pdfraj-muted); padding: 0.25rem 0.4rem;
}
.bookmark-row .bm-remove:hover { color: #e8453c; }

/* Range picker (used by Extract Pages, Delete Pages, future N-up, etc. for
 * Sejda-style "1-3, 5, 7-9" page-range strings). */
.range-picker { display: flex; flex-direction: column; gap: 0.5rem; }
.range-picker-help { color: var(--pdfraj-muted); font-size: 0.8125rem; margin: 0; line-height: 1.5; }
.range-picker-help code {
	background: #f4f4f5;
	padding: 0.125rem 0.375rem;
	border-radius: 4px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.8125rem;
}
.range-picker input[type="text"] {
	font: inherit;
	font-size: 1.0625rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--pdfraj-border);
	border-radius: var(--pdfraj-radius-sm);
	background: #fff;
	width: 100%;
	max-width: 24rem;
	font-variant-numeric: tabular-nums;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.range-picker input[type="text"]:focus-visible {
	outline: none;
	border-color: var(--pdfraj-accent);
	box-shadow: 0 0 0 3px rgba(0,187,136,0.15);
}
.range-picker input[type="text"]:disabled { background: #fafafa; color: var(--pdfraj-muted); }

/* Multi-column layout for grouped range pickers (e.g. Organize rotation grid). */
.rotate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.875rem; margin-top: 0.5rem; }
.rotate-grid .range-picker input[type="text"] { max-width: 100%; }
.tool-options-sub { color: var(--pdfraj-muted); font-weight: 400; font-size: 0.8125rem; margin-left: 0.25rem; }

/* Anchor grid — 3×3 position picker (Watermark, Page Numbers, Header/Footer,
 * Bates). Each cell is a radio button styled as a square. */
.anchor-grid {
	display: grid;
	grid-template-columns: repeat(3, 56px);
	grid-template-rows: repeat(3, 56px);
	gap: 6px;
	margin-top: 0.25rem;
}
.anchor-cell {
	position: relative;
	border: 1px solid var(--pdfraj-border);
	border-radius: var(--pdfraj-radius-sm);
	background: #fafafa;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.anchor-cell input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.anchor-cell:hover { background: #f4f4f5; }
.anchor-cell:has(input[type="radio"]:checked) {
	border-color: var(--pdfraj-accent);
	background: rgba(0,187,136,0.10);
}
.anchor-dot {
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--pdfraj-border);
}
.anchor-cell:has(input[type="radio"]:checked) .anchor-dot { background: var(--pdfraj-accent); }

/* Zone grid — 2 rows × 3 cols for header/footer zone inputs. */
.zone-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.625rem;
	margin-top: 0.25rem;
}
.zone-cell { display: flex; flex-direction: column; gap: 0.25rem; }
.zone-cell label { font-size: 0.75rem; color: var(--pdfraj-muted); font-weight: 500; }
.zone-cell input[type="text"] {
	font: inherit;
	font-size: 0.9375rem;
	padding: 0.4rem 0.55rem;
	border: 1px solid var(--pdfraj-border);
	border-radius: var(--pdfraj-radius-sm);
	background: #fff;
	width: 100%;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.zone-cell input[type="text"]:focus-visible {
	outline: none;
	border-color: var(--pdfraj-accent);
	box-shadow: 0 0 0 3px rgba(0,187,136,0.15);
}
.zone-cell input[type="text"]:disabled { background: #fafafa; color: var(--pdfraj-muted); }

/* Slider row used for opacity / fontSize / rotation alongside its numeric input. */
.slider-row {
	display: grid;
	grid-template-columns: 120px 1fr 56px;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}
.slider-row label { font-size: 0.875rem; font-weight: 500; }
.slider-row input[type="range"] { width: 100%; accent-color: var(--pdfraj-accent); }
.slider-row input[type="number"] {
	font: inherit;
	font-size: 0.9375rem;
	padding: 0.25rem 0.5rem;
	border: 1px solid var(--pdfraj-border);
	border-radius: var(--pdfraj-radius-sm);
	background: #fff;
	width: 100%;
	font-variant-numeric: tabular-nums;
}

/* Checkbox option (used by Alternate & Mix, future Watermark etc.) */
.checkbox-option {
	display: grid;
	grid-template-columns: 18px 1fr;
	column-gap: 0.625rem;
	row-gap: 0.25rem;
	align-items: start;
	cursor: pointer;
}
.checkbox-option input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	cursor: pointer;
	accent-color: var(--pdfraj-accent);
	grid-row: 1;
}
.checkbox-option .checkbox-label { font-weight: 500; grid-row: 1; }
.checkbox-option .checkbox-help {
	grid-column: 2;
	color: var(--pdfraj-muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* ---- Actions ---- */
.pdfraj-actions {
	margin-top: 1.5rem;
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	align-items: center;
}
.pdfraj-actions .btn-primary {
	min-width: 220px;
	justify-content: center;
	padding: 0.85rem 1.6rem;
	font-size: 1.0625rem;
}
/* Hide the action button until a file is added (Sejda-style): Page Studio
 * tools flag has-files; all others have a .file-list chip once a file is
 * chosen. Empty state shows only the upload band. */
.pdfraj-app:not(.pdfraj-has-files):not(:has(.file-list li)) .pdfraj-actions {
	display: none;
}
.btn {
	padding: 0.75rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--pdfraj-radius-sm);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}
.btn-primary { background: var(--pdfraj-accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--pdfraj-accent-hover); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-success { background: var(--pdfraj-success); color: #fff; }
.btn-success:hover { filter: brightness(1.05); }
.btn-link { background: transparent; color: var(--pdfraj-muted); border: 0; padding: 0.75rem 0; }
.btn-link:hover { color: var(--pdfraj-ink); text-decoration: underline; }
/* Large CTA (hero / homepage). */
.btn-lg { padding: 0.85rem 1.6rem; font-size: 1.0625rem; border-radius: 6px; }
.btn-outline {
	background: transparent;
	color: var(--pdfraj-accent);
	border: 1px solid var(--pdfraj-accent);
}
.btn-outline:hover:not(:disabled) { background: var(--pdfraj-accent); color: #fff; }

/* ---- Status panel ---- */
.pdfraj-status {
	margin-top: 1.75rem;
	background: var(--pdfraj-paper);
	border: 1px solid var(--pdfraj-border);
	border-radius: var(--pdfraj-radius);
	padding: 1.25rem 1.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}
.status-icon { flex: 0 0 24px; width: 24px; height: 24px; }
.status-icon.spinner {
	border: 3px solid var(--pdfraj-border);
	border-top-color: var(--pdfraj-accent);
	border-radius: 50%;
	animation: pdfraj-spin 0.8s linear infinite;
}
@keyframes pdfraj-spin { to { transform: rotate(360deg); } }
.status-text { display: flex; flex-direction: column; }
.status-title { font-weight: 600; }
.status-detail { color: var(--pdfraj-muted); font-size: 0.9375rem; }

/* ---- Result panel ---- */
.pdfraj-result {
	margin-top: 1.75rem;
	background: var(--pdfraj-success-bg);
	border: 1px solid var(--pdfraj-success);
	border-radius: var(--pdfraj-radius);
	padding: 1.5rem;
}
.result-message { margin: 0 0 1rem; color: var(--pdfraj-success); font-weight: 600; }
.result-meta {
	margin: 1.25rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid rgba(22,163,74,0.2);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 0.75rem;
}
.result-meta dt { color: var(--pdfraj-muted); font-size: 0.8125rem; margin: 0; text-transform: uppercase; letter-spacing: 0.03em; }
.result-meta dd { margin: 0.25rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Result as a centered "ready" card (shared by all tools, Sejda-style) ---
 * On DONE the workspace adds .pdfraj-result-active and the result section becomes
 * a centered overlay so it is never buried below a full-height editor or form. */
.pdfraj-app.pdfraj-result-active::before {
	content: ''; position: fixed; inset: 0; z-index: 1400; background: rgba(15, 23, 42, 0.45);
}
.pdfraj-app.pdfraj-result-active .pdfraj-result {
	position: fixed; z-index: 1401; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: min(560px, 92vw); max-height: 88vh; overflow: auto;
	margin: 0; padding: 2rem 2rem 1.5rem; text-align: center;
	background: var(--pdfraj-paper, #fff); border: 1px solid var(--pdfraj-border);
	border-radius: 14px; box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.5);
}
.pdfraj-app.pdfraj-result-active .result-message {
	color: var(--pdfraj-ink, #1f2933); font-size: 1.25rem; font-weight: 700; margin: 0 0 1.1rem;
}
.pdfraj-app.pdfraj-result-active [data-role="download"] { padding: 0.8rem 1.6rem; font-size: 1.0625rem; }
.pdfraj-app.pdfraj-result-active .result-meta { justify-content: center; border-top-color: var(--pdfraj-border); }
.pdfraj-result-icon { display: flex; justify-content: center; color: var(--pdfraj-success, #1aa251); margin-bottom: 0.5rem; }
.pdfraj-result-startover {
	display: block; margin: 1.1rem auto 0; padding: 0.4rem 0.6rem;
	background: none; border: 0; color: var(--pdfraj-muted, #777); font: inherit; font-size: 0.9rem; cursor: pointer;
}
.pdfraj-result-startover:hover { color: var(--pdfraj-ink, #333); text-decoration: underline; }
.pdfraj-result-close {
	position: absolute; top: 0.6rem; right: 0.7rem; width: 30px; height: 30px;
	background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--pdfraj-muted, #999); cursor: pointer; border-radius: 6px;
}
.pdfraj-result-close:hover { background: var(--pdfraj-surface-soft, #f1f1f1); color: var(--pdfraj-ink, #333); }
/* R2: inline preview of the finished PDF (page 1). */
.pdfraj-result-preview { margin: 1.1rem auto 0; max-width: 360px; }
.pdfraj-result-preview-canvas { display: block; width: 100%; height: auto; border: 1px solid var(--pdfraj-border); border-radius: 6px; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12); }
.pdfraj-result-preview-loading { padding: 1rem; color: var(--pdfraj-muted, #777); font-size: 0.85rem; }
.pdfraj-result-preview-note { margin-top: 0.4rem; font-size: 0.75rem; color: var(--pdfraj-muted, #777); }
/* R3b: continue this file in another tool. */
.pdfraj-result-continue { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--pdfraj-border); }
.pdfraj-result-continue-label { margin-bottom: 0.6rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--pdfraj-muted, #777); }
.pdfraj-result-continue-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.pdfraj-result-continue-link {
	display: inline-flex; padding: 0.45rem 0.85rem; border: 1px solid var(--pdfraj-border); border-radius: 8px;
	font-size: 0.85rem; color: var(--pdfraj-ink, #333); text-decoration: none; background: var(--pdfraj-paper, #fff);
}
.pdfraj-result-continue-link:hover { border-color: var(--pdfraj-accent, #00bb88); color: var(--pdfraj-accent, #00bb88); }

/* ---- Error panel ---- */
.pdfraj-error {
	margin-top: 1.75rem;
	background: var(--pdfraj-danger-bg);
	border: 1px solid var(--pdfraj-danger);
	border-radius: var(--pdfraj-radius);
	padding: 1rem 1.25rem;
	color: var(--pdfraj-danger);
}
.error-title { display: block; font-weight: 600; }
.error-detail { display: block; color: var(--pdfraj-muted); font-size: 0.875rem; margin-top: 0.25rem; }

/* 4D.5: remediation link auto-appended by PDFRajFlow when the server
   response includes remediation_url (worker offline, bridge unreachable, etc.) */
.pdfraj-error-remediation {
	display: inline-block;
	margin-top: 0.6rem;
	padding: 0.4rem 0.8rem;
	background: var(--pdfraj-accent);
	color: #fff;
	border-radius: var(--pdfraj-radius-sm);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.875rem;
}
.pdfraj-error-remediation:hover { background: var(--pdfraj-accent-hover); color: #fff; }

/* ---- Footer ---- */
.pdfraj-footer { margin-top: 2.5rem; color: var(--pdfraj-muted); font-size: 0.875rem; }
.pdfraj-footer p { margin: 0; }

@media (max-width: 480px) {
	.pdfraj-app { margin: 1.5rem auto; }
	.pdfraj-header h1 { font-size: 1.625rem; }
	.result-meta { grid-template-columns: 1fr 1fr; }
}

/* ---- Static informational pages (Contact / Terms / Privacy / About) ---- */
.pdfraj-page { max-width: 720px; margin: 3.5rem auto; padding: 0 1.25rem; }
.pdfraj-page h1 { font-size: 2.2rem; margin: 0 0 1.2rem; letter-spacing: -0.02em; }
.pdfraj-page-body { color: var(--pdfraj-ink); line-height: 1.7; font-size: 1.05rem; }
.pdfraj-page-body p { margin: 0 0 1rem; }
.pdfraj-page-body a { color: var(--pdfraj-accent); }
.pdfraj-page-note { color: var(--pdfraj-muted); font-size: 0.9rem; font-style: italic; margin-top: 1.5rem; }

/* ---- 11A.2 Universal password modal (shared by every workspace tool) ----
 * Appended to <body>, so it is OUTSIDE .pdfraj-app and would otherwise take
 * the legacy green --pdfraj-accent from :root above — a green Unlock button on
 * a blue workspace. PasswordModal.adoptAccent() copies the launching app's
 * tokens onto this element at open time; these are the fallback for when there
 * is no app container to read (and so that the colour is never legacy green
 * even for the split second before the JS runs). */
.pdfraj-pw-overlay {
	position: fixed; inset: 0; z-index: 1200;
	display: none; align-items: center; justify-content: center;
	padding: 1rem; background: rgba(15, 23, 42, 0.55);
	--pdfraj-accent: #2563eb;
	--pdfraj-accent-hover: #1d54cf;
	--pdfraj-accent-soft: #eef4ff;
	--pdfraj-accent-ring: rgba(37, 99, 235, 0.20);
}
.pdfraj-pw-overlay.is-open { display: flex; }
.pdfraj-pw-modal {
	width: min(94vw, 400px);
	background: #fff; border-radius: 16px;
	box-shadow: 0 28px 70px -18px rgba(15, 23, 42, 0.5);
	padding: 1.7rem 1.6rem 1.5rem; text-align: center;
}
.pdfraj-pw-ic {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; margin-bottom: 0.7rem;
	color: var(--pdfraj-accent, #2563eb);
	background: var(--pdfraj-accent-soft, #eef2ff); border-radius: 50%;
}
.pdfraj-pw-title { margin: 0 0 0.3rem; font-size: 1.18rem; font-weight: 700; color: var(--pdfraj-ink, #1a1a2e); }
.pdfraj-pw-msg   { margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.5; color: var(--pdfraj-muted, #667085); }
.pdfraj-pw-input {
	width: 100%; box-sizing: border-box;
	padding: 0.7rem 0.85rem; font-size: 1rem;
	border: 1.5px solid var(--pdfraj-border, #d6dae3); border-radius: 10px;
	outline: none; transition: border-color 0.12s;
}
.pdfraj-pw-input:focus { border-color: var(--pdfraj-accent, #2563eb); }
/* Reveal toggle. The button sits INSIDE the field, so the input needs right
 * padding or typed text runs underneath it. */
.pdfraj-pw-field { position: relative; }
.pdfraj-pw-field .pdfraj-pw-input { padding-right: 2.9rem; }
.pdfraj-pw-eye {
	position: absolute; top: 50%; right: 0.45rem; transform: translateY(-50%);
	display: flex; align-items: center; justify-content: center;
	width: 2rem; height: 2rem; padding: 0;
	border: none; border-radius: 8px; background: transparent;
	color: var(--pdfraj-muted, #667085); cursor: pointer;
}
.pdfraj-pw-eye:hover { background: rgba(15, 23, 42, 0.06); color: var(--pdfraj-ink, #1a1a2e); }
.pdfraj-pw-eye[aria-pressed="true"] { color: var(--pdfraj-accent, #2563eb); }
.pdfraj-pw-err   { margin: 0.55rem 0 0; font-size: 0.85rem; font-weight: 600; color: var(--pdfraj-danger, #dc2626); }
.pdfraj-pw-err[hidden] { display: none; }
.pdfraj-pw-actions { display: flex; gap: 0.6rem; margin-top: 1.1rem; }
.pdfraj-pw-actions .btn { flex: 1; justify-content: center; padding: 0.7rem 1rem; border-radius: 10px; font-weight: 600; }
.pdfraj-pw-cancel { background: var(--pdfraj-bg, #f1f3f8); color: var(--pdfraj-ink, #1a1a2e); border: 1px solid var(--pdfraj-border, #e0e3eb); }
.pdfraj-pw-cancel:hover { background: #e7eaf1; }
body.pdfraj-pw-lock { overflow: hidden; }

/* Start over inside the error card (client: the pre-flight FAILED card floated on
   an empty takeover with no way out). Shares the remediation pill look. */
button.pdfraj-error-reset { border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 0.875rem; }

/* ---- Inline upload-validation warning ------------------------------------
   A lightweight amber banner shown in whichever uploader is on screen when a
   chosen file is an unsupported type / empty / corrupt / truncated. Distinct
   from .pdfraj-error (the FAILED card) — it keeps the flow IDLE, so no "Start
   over" appears on a bad upload.

   It lives HERE, not in pdfraj-workspace.css, because the element is built by
   Workspace.prototype._ensureWarnEl and therefore appears on every page that
   hosts the upload flow — the PDF Editor and its landing page included, and
   neither of those loads pdfraj-workspace.css. Unstyled, the inline <svg> has
   no width and stretched to the full column (portal issue #32: "PDF editor mein
   corrupted file add karne par layout break"). This file is loaded by
   _partials/head.php on every plugin page. */
.pdfraj-ws-warn { display: flex; gap: 11px; align-items: flex-start; margin: 16px auto 0; max-width: 520px; padding: 13px 16px; background: #FEF3C7; border: 1.5px solid #FCD34D; border-radius: 12px; text-align: left; }
.pdfraj-ws-warn[hidden] { display: none; }
.pdfraj-ws-warn svg { width: 18px; height: 18px; color: #D97706; flex-shrink: 0; margin-top: 1px; }
.pdfraj-ws-warn-h { display: block; font-size: 14px; font-weight: 700; color: #78350F; line-height: 1.4; }
.pdfraj-ws-warn-d { display: block; font-size: 13px; color: #92400E; line-height: 1.55; margin-top: 2px; }
/* Neutral "preparing image…" variant of the upload banner (TIFF/HEIC decode). */
.pdfraj-ws-warn.is-info { background: #EFF6FF; border-color: #BFDBFE; }
.pdfraj-ws-warn.is-info svg { color: #2563EB; }
.pdfraj-ws-warn.is-info .pdfraj-ws-warn-h { color: #1E3A8A; }
/* The PDF Editor's landing page ships its own reset —
   `.pe-landing, .pe-landing *, ... { margin: 0; padding: 0 }` in
   pdfraj-editor-landing.css — which is the SAME specificity as the rules above
   and is loaded after this file, so it wins on order and flattens the banner
   against its own border. Re-stated here at (0,2,0) rather than with
   !important, and only for the two properties that reset actually takes. */
.pe-landing .pdfraj-ws-warn { margin: 16px auto 0; padding: 13px 16px; }
.pe-landing .pdfraj-ws-warn-d { margin-top: 2px; }

/* A refusal or error message may be several lines (Settings -> Turn away
   addresses and countries). The JS sets these with textContent, so without this
   the line breaks the operator typed collapse into spaces in the browser. */
.error-title, .error-detail { white-space: pre-line; }

/* ---- Footer social links ------------------------------------------------
   Rendered by frontend/templates/_partials/social-links.php, in both the
   catalog footer and the tool-page footer. Nothing is emitted at all when no
   network is set, so these rules never apply to an empty list. */
.pdfraj-social {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pdfraj-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	color: inherit;
	/* Inherited, so the icons sit on whatever the footer's own background is
	   rather than needing a colour of their own in two different footers. */
	opacity: 0.72;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}
.pdfraj-social-link:hover,
.pdfraj-social-link:focus-visible {
	opacity: 1;
	background: rgba(127, 127, 127, 0.16);
}
/* 32px of tappable area around an 18px icon: the icon is the size it reads
   best at, the target is the size a thumb needs. */
.pdfraj-social-link svg { display: block; }

/* OURS, not WordPress's screen-reader-text. Core's admin stylesheet is not
   loaded on the public shell and that class belongs to whatever theme happens
   to be active -- undefined, the network name prints next to its icon. */
.pdfraj-sr {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}