/* ==========================================================================
   PDF Tools · shared styles                                   Version No.: 53
   Used by every PDF tool template. Loaded at the top of the tool wrapper in the
   page body, after every theme and plugin style, so a change here reaches all
   PDF tools at once. Tool-specific styles stay in each template.
   Edit class names only through a search and replace across all PDF tools.
   ========================================================================== */

/* ==========================================================================
   1 · BASE: tokens, wrapper, buttons, tooltips, shared components
   ========================================================================== */
#main{ padding-bottom:0 !important; }
/* On :root because the title and info icon also appear in the site's top bar, outside the tool wrapper. */
:root{
	--pdft-font-display:'Fraunces', Georgia, 'Times New Roman', serif;
	--pdft-font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--pdft-font-copy:'Bricolage Grotesque', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.pdft-tool-wrap{
	--pdft-ink:#1b1d1e;
	--pdft-paper:#f2f1ed;
	--pdft-surface:#ffffff;
	--pdft-line:#dcdad2;
	--pdft-muted:#6f716c;
	--pdft-accent:#1f6f5c;
	--pdft-accent-dark:#164f41;
	--pdft-focus:#2b6ef6;
	--pdft-success:#1f6f5c;
	--pdft-danger:#b3392b;
	--pdft-radius-sm:10px;
	--pdft-radius-pill:12px;
	/* One corner rule for every option button (chips, position grid). Main action buttons keep their own round shape. */
	--pdft-radius-btn:0;
	--pdft-max:760px;
	--pdft-scroll-h:min(75vh, 640px);
	/* Desktop: space the preview pane keeps free around the page (toolbar row and file details). */
	--pdft-scroll-chrome:150px;
	/* Tool height: viewport minus the site header and, when logged in, the admin bar. Desktop uses it as the
	   split-pane height, smaller screens as the least height. These two numbers are only a first guess.
	   pdft-core.js measures where the tool really starts and sets --pdft-tool-h from that, so no header
	   height needs to be entered by hand. */
	--pdft-header-h:72px;
	--pdft-adminbar-h:0px;
	--pdft-vh:100vh;
	--pdft-tool-h:calc(var(--pdft-vh) - var(--pdft-header-h) - var(--pdft-adminbar-h));

	background:var(--pdft-paper);
	color:var(--pdft-ink);
	font-family:var(--pdft-font-body);
	-webkit-font-smoothing:antialiased;
	display:flex;
	flex-direction:column;
	box-sizing:border-box;
	/* At least the screen under the site header, so a tool with few options still ends at the screen bottom. */
	min-height:var(--pdft-tool-h);
	padding:32px 0 0;
}
@supports (height:100dvh){
	.pdft-tool-wrap{ --pdft-vh:100dvh; }
}
.admin-bar .pdft-tool-wrap{ --pdft-adminbar-h:32px; }
/* Desktop: the tool fills the screen under the site header, so the page itself never scrolls. */
@media (min-width:900px){
	.pdft-tool-wrap{
		--pdft-scroll-h:max(260px, calc(100cqh - var(--pdft-scroll-chrome)));
		height:var(--pdft-tool-h);
		padding:0;
		overflow:hidden;
	}
}
.pdft-tool-wrap *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* No tap highlight anywhere. The top-bar group sits outside the tool wrapper, so it needs it too. */
.pdft-navgroup{ -webkit-tap-highlight-color:transparent; }
.pdft-tool-wrap [hidden]{ display:none !important; }

[data-wlcustom-dm="dark"] .pdft-tool-wrap{
	--pdft-ink:var(--wlcustom-dm-text, #e8e6e3);
	--pdft-paper:var(--wlcustom-dm-bg, #0a1423);
	--pdft-surface:#121d30;
	--pdft-line:#223049;
	--pdft-muted:#8b93a6;
	--pdft-accent:#2bb3a8;
	--pdft-accent-dark:#1f8880;
	--pdft-focus:#6d9dff;
	--pdft-success:#2bb3a8;
	--pdft-danger:#ff8a7a;
}


.pdft-tool-wrap button{
	font-family:inherit;
	cursor:pointer;
	-webkit-appearance:none;
	appearance:none;
}
.pdft-tool-wrap button:focus-visible,
.pdft-tool-wrap [tabindex]:focus-visible{
	outline:3px solid var(--pdft-focus);
	outline-offset:2px;
}
.pdft-tool-wrap button:disabled{ opacity:.45; cursor:not-allowed; }
.pdft-tool-wrap button:disabled.pdft-busy{ opacity:1; cursor:default; }
.pdft-tool-wrap button:focus:not(:focus-visible){
	outline:none !important;
}
/* After a mouse click, a key the tool does not use (such as Delete) shows no focus ring.
   pdft-core.js removes pdft-pointer as soon as the keyboard is used to move around. */
.pdft-tool-wrap.pdft-pointer button:focus-visible,
.pdft-tool-wrap.pdft-pointer [tabindex]:focus-visible{ outline:none; }

/* Text/number inputs, selects, textareas and checkboxes never show a focus ring.
   Focus is shown by the border colour only. */
.pdft-tool-wrap input,
.pdft-tool-wrap select,
.pdft-tool-wrap textarea{
	outline:none !important;
	box-shadow:none !important;
}
.pdft-tool-wrap input[type="text"]:focus,
.pdft-tool-wrap input[type="number"]:focus,
.pdft-tool-wrap select:focus,
.pdft-tool-wrap textarea:focus{
	border-color:var(--pdft-focus) !important;
}
.pdft-tool-wrap button::-moz-focus-inner,
.pdft-tool-wrap input::-moz-focus-inner{
	border:0 !important;
	padding:0 !important;
}
.pdft-tool-wrap select:-moz-focusring{
	color:transparent !important;
	text-shadow:0 0 0 var(--pdft-ink) !important;
}
/* Reduced motion: no transitions or animations anywhere in the tool, including the About popup and the pulsing button.
   The top-bar group and Related Tools panel sit outside the tool wrapper, so they are listed too. */
@media (prefers-reduced-motion: reduce){
	.pdft-tool-wrap *{ transition:none !important; animation:none !important; }
	.pdft-navgroup *,
	.pdft-navgroup *::after{ transition:none !important; }
}
/* Reusable (i) info button + tooltip. Hover/focus shows it on desktop;
   a tap toggles it in pdft-core.js, so it also works
   on touch devices. Hover is scoped to hover-capable pointers only, so
   a tap on a touch screen can never leave it stuck open ("sticky hover").
   --winfo-shift is set by JS to keep the tooltip inside its pane, and
   .winfo-below opens it under the icon when the top of the pane would cut it off. */
.winfo{
	position:relative;
	display:inline-flex; align-items:center; justify-content:center;
	width:15px; height:15px; padding:0; flex:0 0 auto;
	border:1px solid var(--pdft-muted); border-radius:50%;
	background:none; color:var(--pdft-muted);
	font-size:10px; font-weight:700; font-style:normal; line-height:1;
	cursor:help;
}
.winfo:focus-visible,
.winfo.winfo-active{ border-color:var(--pdft-accent); color:var(--pdft-accent); }
.winfo-tip{
	position:absolute; z-index:5; bottom:calc(100% + 8px); left:50%;
	transform:translateX(calc(-50% + var(--winfo-shift, 0px)));
	width:max-content; max-width:220px;
	background:var(--pdft-ink); color:var(--pdft-surface);
	font-size:12px; font-weight:400; font-style:normal; line-height:1.4;
	text-align:left; white-space:pre-line;
	padding:8px 10px; border-radius:8px;
	box-shadow:0 4px 14px rgba(0,0,0,.25);
	opacity:0; pointer-events:none; transition:opacity .12s ease;
}
.winfo.winfo-below .winfo-tip{ bottom:auto; top:calc(100% + 8px); }
.winfo:focus-visible .winfo-tip,
.winfo.winfo-active .winfo-tip{ opacity:1; pointer-events:auto; }
@media (hover:hover){
	.winfo:hover{ border-color:var(--pdft-accent); color:var(--pdft-accent); }
	.winfo:hover .winfo-tip{ opacity:1; pointer-events:auto; }
}

/* WL Primary Button — uniform look for the main action button, Download (main and under each PDF) and any other primary button. */
.wl-btn-primary{
	width:100%;
	padding:12px 22px;
	border:none;
	border-radius:999px;
	background:var(--pdft-accent);
	color:#fff;
	font-size:0.95rem;
	font-weight:600;
	transition:transform 0.1s ease;
}
.wl-btn-primary:hover{ background:var(--pdft-accent-dark); }
.wl-btn-primary:active{ transform:scale(0.98); }
.wl-btn-primary:disabled{ background:var(--pdft-accent); color:#fff; transform:none; }

/* WL Button Pulse Glow. Add the class "wl-btn-pulse" to a button to give it a pulsing glow.
   It animates box-shadow directly. That is safe from stutter because of when the class is added: only while
   nothing is processing (updateActionBtn in pdft-core.js, and any tool that runs its own button logic), so the
   animation never competes with heavy work for the main thread. Keep that rule wherever it is used. */
.wl-btn-pulse{
	--wl-glow-color:rgba(31,111,92,.45);
	animation:wl-btn-pulse-glow 1.8s ease-in-out infinite;
}
[data-wlcustom-dm="dark"] .wl-btn-pulse{ --wl-glow-color:rgba(43,179,168,.45); }
@keyframes wl-btn-pulse-glow{
	0%, 100%{ box-shadow:0 0 0 0 var(--wl-glow-color); }
	50%{ box-shadow:0 0 0 10px rgba(0,0,0,0); }
}

/* ==========================================================================
   2 · HERO AND TOP BAR: title and its buttons, trust line, compact header
   ========================================================================== */
.pdft-hero{
	flex:none; width:100%; max-width:var(--pdft-max);
	margin-left:auto; margin-right:auto;
	padding:0 20px 28px; text-align:center;
}
@media (min-width:900px){
	.pdft-hero{ padding:29px 20px 12px; }
}
@media (min-width:980px){
	.pdft-hero{ max-width:calc(var(--pdft-max) * 1.5); }
}
.pdft-h1{
	font-family:var(--pdft-font-display);
	font-weight:600;
	font-size:clamp(26px, 4vw, 34px);
	line-height:1.15;
	margin:0 0 12px;
	color:var(--pdft-ink);
}
.pdft-hero-line{
	font-family:var(--pdft-font-copy);
	font-weight:600;
	font-size:17px !important;
	line-height:1.35;
	color:var(--pdft-accent);
	margin:0 !important;
}
@media (max-width:480px){
	.pdft-hero{ padding-left:16px; padding-right:16px; }
	.pdft-h1{ font-size:clamp(18px, 5.8vw, 25px); padding:0 32px; }
}

/* Compact header. The arrow before the title (pdft-core.js), or the first scroll down the page, moves the title into the site's top bar (desktop) or its second row (mobile),
   with the Related Tools icon after it, and moves it back. On desktop nothing is moved or resized: the site title and profile icon stay
   exactly where they were, the regular menu, Study Material, search and dark mode icons are only made invisible, and the new group floats
   over the space they leave. The site-menu arrow brings the full menu back for a while. The real heading stays in the page, hidden
   visually but readable by screen readers. */
/* The full title on its way into the top bar (pdft-core.js places it over the page while it glides). */
.pdft-title-ghost{
	position:fixed; z-index:10000; box-sizing:border-box;
	margin:0 !important; padding:0; text-align:center; pointer-events:none;
}
.pdft-hero.pdft-hero-compact{
	position:absolute; width:1px; height:1px; margin:-1px; padding:0;
	overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.pdft-nav-compact:not(.pdft-nav-open) :is(.topnav-menu-desktop, .topnav-desk-search-icon){ visibility:hidden; }
.pdft-nav-compact:not(.pdft-nav-open) .topnav-mob-row2-menu{ display:none; }
.pdft-nav-open .pdft-navmain{ display:none; }
@media (min-width:1024px){
	#topnav-bar.pdft-nav-compact:not(.pdft-nav-open) .topnav-navigation{ position:absolute; left:20px; top:0; bottom:0; }
	#topnav-bar.pdft-nav-compact .topnav-inner > :is(.wlcustom-dm-toggle-desktop, .wlcustom-dm-disabled-toggle-desktop){ position:absolute; right:6px; top:0; }
}
.pdft-navgroup{
	--pdft-nav-ink:#ffffff;
	--pdft-nav-accent:#fff551;
	--pdft-nav-gap:10px; /* title arrow <-> short name, and short name <-> Related Tools icon: always the same */
	display:flex; align-items:center; gap:18px;
	flex:0 1 auto; min-width:0; margin:0 8px 0 4px;
}
/* Desktop: the group fills the space between the site title and the profile icon (pdft-core.js sets left and
   width). The arrow stays at the left end and the title, its info icon and the Related Tools icon sit in the middle. The group
   itself ignores the mouse so it never blocks the menu underneath. */
#topnav-bar .pdft-navgroup{
	position:absolute; top:0; bottom:0; margin:0;
	display:grid; grid-template-columns:minmax(40px, 1fr) minmax(0, auto) minmax(40px, 1fr);
	pointer-events:none;
}
#topnav-bar .pdft-navgroup > *{ pointer-events:auto; }
.pdft-navmain{ display:flex; align-items:center; gap:var(--pdft-nav-gap, 10px); min-width:0; }
.pdft-navtitle{
	flex:0 1 auto; min-width:0; max-width:clamp(160px, 28vw, 420px);
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
	font-family:var(--pdft-font-copy);
	font-size:20px; font-weight:500; line-height:1.3;
	color:var(--pdft-nav-ink);
}
/* The site-menu arrow, the title arrow and the Related Tools grid icon are the same small outlined circle. */
.pdft-navarrow,
.pdft-navgroup .pdft-fold-btn,
.pdft-navgroup .pdft-related-btn{
	display:inline-flex; align-items:center; justify-content:center;
	flex:0 0 auto; width:19.5px; height:19.5px; padding:0;
	border:1px solid var(--pdft-nav-ink); border-radius:50%;
	background:none; color:var(--pdft-nav-ink);
	transition:background-color .15s ease, color .15s ease;
}
.pdft-navarrow svg,
.pdft-navgroup .pdft-fold-btn svg,
.pdft-navgroup .pdft-related-btn svg{ width:9px; height:9px; }
.pdft-navarrow{ margin-left:6px; }
.pdft-navgroup .pdft-fold-btn svg{ transform:rotate(180deg); }
/* The Related Tools icon also stays filled while its dropdown is open. */
.pdft-navarrow:hover,
.pdft-navgroup .pdft-fold-btn:hover,
.pdft-navgroup .pdft-related-btn:hover,
.pdft-navgroup .pdft-related-btn[aria-expanded="true"]{ background:var(--pdft-nav-accent); border-color:var(--pdft-nav-accent); color:#1a1a1a; }
/* The title arrow and the short name sit close together, like the site-menu arrow and the site title. */
.pdft-navtitlebox{ display:flex; align-items:center; gap:var(--pdft-nav-gap, 10px); min-width:0; }
.pdft-navarrow svg{ transition:transform .15s ease; }
.pdft-navarrow[aria-expanded="true"] svg{ transform:rotate(180deg); }
.pdft-navgroup button:focus-visible{ outline:3px solid var(--pdft-nav-accent); outline-offset:2px; }
.topnav-mobile-wrap .pdft-navtitle{ max-width:none; font-size:16px; }
/* Mobile: the arrow sits in the first row, right after the site title (pdft-core.js gives it the title's colour).
   It keeps working when the theme centres the title, which turns off clicks on the space around it. */
.topnav-mob-brand-wrap .pdft-navarrow{
	--pdft-nav-ink:#ffffff;
	--pdft-nav-accent:#fff551;
	margin-left:10px; pointer-events:auto;
}
.topnav-mob-brand-wrap .pdft-navarrow:focus-visible{ outline:3px solid var(--pdft-nav-accent); outline-offset:2px; }

/* Touch screens: the small round icon buttons get an invisible 48 x 48 pixel tap area, the size Google's Material guidance asks for
   (Apple asks for 44), without making the drawn icons bigger. The square is centred on the button. In the top bar the title arrow and
   the Related Tools icon sit only --pdft-nav-gap apart from the name, so their squares are trimmed on the sides that face it. */
@media (pointer:coarse){
	.pdft-btns > button,
	.pdft-navarrow,
	.pdft-navgroup .pdft-fold-btn,
	.pdft-navgroup .pdft-related-btn{ position:relative; }
	.pdft-btns > button::before,
	.pdft-navarrow::before,
	.pdft-navgroup .pdft-fold-btn::before,
	.pdft-navgroup .pdft-related-btn::before{
		content:''; position:absolute; top:50%; left:50%;
		width:48px; height:48px; transform:translate(-50%, -50%);
	}
	.pdft-navgroup .pdft-fold-btn::before{ top:-13.25px; bottom:-13.25px; left:-13.25px; right:calc(var(--pdft-nav-gap) / -2 + 1px); width:auto; height:auto; transform:none; }
	.pdft-navgroup .pdft-related-btn::before{ top:-13.25px; bottom:-13.25px; right:-13.25px; left:calc(var(--pdft-nav-gap) / -2 + 1px); width:auto; height:auto; transform:none; }
	.topnav-mob-brand-wrap .pdft-navarrow{ margin-left:15px; }
}

/* When the site shows the My Membership "Pro" / "Get Pro" badge after the site title (the plugin adds wlm-has-pro-badge to <body>),
   the arrow comes right after the badge, 8px away, the same 8px that sits between the site title and the badge. This replaces the
   arrow's usual distance from the title (6px computer, 10px mobile, 15px touch), which only applies when there is no badge. */
body.wlm-has-pro-badge #topnav-bar .pdft-navarrow,
body.wlm-has-pro-badge .topnav-mob-brand-wrap .pdft-navarrow{ margin-left:8px; }
/* Touch screens: at 8px the arrow's invisible 48px tap square would reach 6px over the badge's right end and steal taps meant for it,
   so the square is moved 7px to the right. It then stops 0.75px short of the badge. Nothing sits to the arrow's right. */
@media (pointer:coarse){
	body.wlm-has-pro-badge .pdft-navarrow::before{ transform:translate(calc(-50% + 7px), -50%); }
}


/* The title's buttons hang off its first and last word and take no room, so the title stays centred. Any number fit,
   and they are centred on the capital letters. A title with two buttons on one side gets room for them, so a long title wraps. */
.pdft-edge{ white-space:nowrap; }
.pdft-btns{ display:inline-flex; gap:8px; width:0; vertical-align:middle; position:relative; top:-0.11em; }
.pdft-btns > *{ flex:none; }
.pdft-btns-start{ justify-content:flex-end; margin:0 8px 0 -8px; }
.pdft-btns-end{ margin:0 -8px 0 8px; }
.pdft-h1:has(.pdft-btns > :nth-child(2)){ padding:0 64px; }
.pdft-btns > button{
	display:inline-flex; align-items:center; justify-content:center;
	width:24px; height:24px; padding:0; margin:0; flex-shrink:0;
	border:1px solid var(--pdft-line); border-radius:50%;
	background:var(--pdft-surface); color:var(--pdft-ink); cursor:pointer;
}
.pdft-btns > button:hover{ border-color:var(--pdft-ink); }
/* A title of two or more lines (pdft-core.js adds pdft-h1-wrap): the buttons move to the middle of the title's left and right edges. */
.pdft-h1-wrap{ position:relative; padding:0 40px; }
.pdft-h1-wrap .pdft-btns{ position:absolute; top:50%; width:auto; margin:0; transform:translateY(-50%); }
.pdft-h1-wrap .pdft-btns-start{ left:0; }
.pdft-h1-wrap .pdft-btns-end{ right:0; }

/* ==========================================================================
   3 · TRUST LINE: trust line (its About icon hangs off the last word, like the title's buttons)
   ========================================================================== */
/* The About icon is centred on the capital letters of the line it hangs off, and adds no height to it. */
.pdft-hero-line .pdft-btns{ height:0; align-items:center; top:-0.1em; }

/* ==========================================================================
   4 · TOOL SHELL: preview pane, cards, toolbar, option widgets, action bar
   ========================================================================== */
.pdft-tool{
	--pdft-pane-pad:24px;
	/* Below 900px the tool takes the rest of the screen and the options pane takes any spare height,
	   so the action bar sits at the screen bottom even when there are few options. */
	flex:1 0 auto;
	display:grid;
	grid-template-columns:minmax(0, 1fr);
	grid-template-rows:auto 1fr auto;
}
.pdft-stage-col{
	min-width:0;
	display:flex;
	flex-direction:column;
	--pdft-pad-y:12px;
	padding:var(--pdft-pad-y) var(--pdft-pane-pad);
	overflow-x:auto;
	container-type:inline-size;
}
.pdft-tool-wrap .pdft-stage-col:focus-visible,
.pdft-tool-wrap .pdft-controls-col:focus-visible{ outline-offset:-3px; }

.pdft-dropzone{
	border:1.5px dashed var(--pdft-line);
	border-radius:var(--pdft-radius-sm);
	background:var(--pdft-paper);
	flex:1;
	display:flex;
	flex-direction:column;
}
.pdft-dropzone.pdft-drag{
	border-color:var(--pdft-accent);
	background:color-mix(in srgb, var(--pdft-accent) 8%, var(--pdft-paper));
}
/* Once at least one PDF is added, the dashed box is no longer
   needed — drop it so the PDF tiles use all available space instead. */
.pdft-dropzone.pdft-has-items{
	border:none;
	background:none;
}
.pdft-dropzone.pdft-has-items .pdft-toolbar{
	position:sticky; top:calc(-1 * var(--pdft-pad-y)); z-index:5;
	margin-top:calc(-1 * var(--pdft-pad-y));
	padding:var(--pdft-pad-y) 0 14.4px;
	background:var(--pdft-paper);
}
.pdft-empty-state{
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:32px 24px;
	text-align:center;
	cursor:pointer;
}
.pdft-empty-state svg{ width:32px; height:32px; stroke:var(--pdft-muted); margin-bottom:12px; }
.pdft-dropzone.pdft-drag .pdft-empty-state svg{ stroke:var(--pdft-accent); }
.pdft-empty-state p{ margin:0; font-size:16px; font-weight:500; color:var(--pdft-ink); }
.pdft-empty-state span{ display:block; margin-top:6px; font-size:13px; color:var(--pdft-muted); }
.pdft-empty-state strong{ color:var(--pdft-accent); }
.pdft-empty-state.pdft-error span{ color:var(--pdft-danger); }
.pdft-tool-wrap input[type="file"]{ display:none; }

.pdft-added-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
	align-content:start;
	gap:14px;
	flex:1;
}
.pdft-toolbar{ padding:14px 16px 0; display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; }
.pdft-toolbar .pdft-remove-all{ margin-left:auto; }
/* Narrow pane (phones): the toolbar centres, so Remove All sits centred under the first row when it wraps. */
@container (max-width:500px){
	.pdft-toolbar{ justify-content:center; }
	.pdft-toolbar .pdft-remove-all{ margin-left:0; }
}
.pdft-zoom{
	display:flex; align-items:center; gap:8px;
	font-size:12px; font-weight:600; color:var(--pdft-muted);
	font-variant-numeric:tabular-nums;
}
.pdft-zoom-level{ min-width:38px; text-align:center; }
/* Thin "Jump to PDF" menu in the toolbar. Reuses the shared .pdft-field select look at toolbar height. */
.pdft-toolbar .pdft-jump{ width:auto; max-width:200px; height:30px; padding-left:10px; font-size:13px; text-overflow:ellipsis; }
.pdft-remove-all{
	padding:4px 0;
	border:0; background:none;
	color:var(--pdft-ink);
	font-size:13px; font-weight:700;
	text-decoration:underline; text-underline-offset:3px;
	white-space:nowrap;
}
.pdft-remove-all:hover{ color:var(--pdft-danger); }
.pdft-card{
	scroll-margin-top:60px; /* keeps a card clear of the sticky toolbar when the jump menu scrolls to it */
	background:var(--pdft-surface);
	border:1px solid var(--pdft-line);
	border-radius:var(--pdft-radius-sm);
	overflow:hidden;
	position:relative;
}
/* The vertical list never gets narrower than this, so the file details always fit on one line at any zoom.
   It is the 600px row breakpoint below plus the header's side padding and the card border. */
.pdft-card.pdft-card-scroll{ margin-inline:auto; min-width:min(700px, 100%); max-width:100%; }
.pdft-thumb-wrap{
	min-width:0;
	position:relative;
	aspect-ratio:1/1;
	background:var(--pdft-paper);
	display:flex; align-items:center; justify-content:center;
	overflow:hidden;
}
.pdft-thumb-wrap canvas{ width:100%; height:100%; object-fit:contain; display:block; }

/* One full page fits the pane at 100%; --pdft-zoom (set by the zoom buttons) scales it from there. */
.pdft-scroll-active{
	width:calc(min(var(--pdft-scroll-h) * var(--pdft-ar, 999), 100cqw) * var(--pdft-zoom, 1));
	margin-left:auto;
	margin-right:auto;
}
/* Page picking (PDFT.pageSelect): pages in the preview are clicked or dragged across, so they are not text to select. */
.pdft-selecting #pdftGallery{ -webkit-user-select:none; user-select:none; }
.pdft-selecting .pdft-thumb-wrap{ cursor:pointer; }
/* A picked page gets a solid accent frame, drawn over the page so the tool's own preview stays visible. */
.pdft-thumb-wrap.pdft-picked::after{ content:""; position:absolute; inset:0; border:3px solid var(--pdft-accent); pointer-events:none; }
.pdft-selecting .pdft-stage-col:focus-visible, .pdft-selecting .pdft-controls-col:focus-visible{ outline:none; }
/* The drag box sits on the page body, outside the tool wrapper, so it cannot use the wrapper's colour variables. */
.pdft-band{ position:fixed; z-index:50; pointer-events:none; border:1.5px solid #1f6f5c; background:rgba(31,111,92,0.15); }
.pdft-remove{
	position:absolute; top:8px; right:8px;
	width:24px; height:24px; padding:0;
	border:0; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background:rgba(27,29,30,.55);
	color:#fff;
	z-index:4;
}
.pdft-remove::before{
	content:'';
	position:absolute;
	top:-10px; right:-10px; bottom:-10px; left:-10px;
}
.pdft-card-body{ padding:10px 12px; text-align:center; border-top:1px solid var(--pdft-line); container-type:inline-size; }
/* Two lines: the file details, then the status and Download. Narrow cards stack the details;
   wide cards (see the container query below) put them in one row with faint dividers. */
.pdft-card-line{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 20px; }
.pdft-card-line + .pdft-card-line{ margin-top:8px; }
.pdft-card-line:has(> .pdft-card-badge:empty){ display:none; }
.pdft-card-name{
	flex:0 0 100%;
	font-size:14px; font-weight:600;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pdft-card-sizes,
.pdft-card-dims{
	color:var(--pdft-muted);
	display:flex; align-items:center; justify-content:center; gap:5px; flex-wrap:wrap;
	font-size:13px;
	font-variant-numeric:tabular-nums;
}
.pdft-card-dims:empty{ display:none; }
.pdft-card-sizes .pdft-new-size{ color:var(--pdft-success); font-weight:600; }
.pdft-page-nav{
	display:flex; align-items:center; justify-content:space-between; gap:10px;
	/* Own line, a little wider than the card text so the arrows sit close to the card edges. */
	flex:0 0 calc(100% + 12px); margin-inline:-6px;
	font-size:13px; color:var(--pdft-muted);
	font-variant-numeric:tabular-nums;
	white-space:pre-line; /* lets the label put a short note on its own line */
}
/* The page arrows have no circle, but keep the full 24px touch area. A single-page PDF keeps the space so the label stays centred. */
.pdft-page-nav .pdft-page-btn{ border:0; background:none; }
.pdft-page-nav.pdft-single .pdft-page-btn{ visibility:hidden; }
.pdft-page-btn{
	display:inline-flex; align-items:center; justify-content:center;
	width:24px; height:24px; padding:0;
	border:1px solid var(--pdft-line); border-radius:50%;
	background:var(--pdft-surface); color:var(--pdft-ink);
}
.pdft-remove svg,
.pdft-page-btn svg{ display:block; }
.pdft-page-btn:hover{ border-color:var(--pdft-accent); color:var(--pdft-accent-dark); }
/* The Hand button of the zoom group: on, it is filled; on a touch screen it is not needed, a finger scrolls. */
.pdft-page-btn[aria-pressed="true"]{ background:var(--pdft-accent); border-color:var(--pdft-accent); color:#fff; }
@media (pointer:coarse){ .pdft-hand-btn{ display:none; } }
/* Moving a zoomed page (pdft-core.js): an open hand over the pages, a closed one while dragging. */
.pdft-hand, .pdft-hand *{ cursor:grab !important; -webkit-user-select:none; user-select:none; }
.pdft-panning, .pdft-panning *{ cursor:grabbing !important; }
.pdft-card-badge{ font-size:13px; color:var(--pdft-muted); }
.pdft-card-badge.pdft-error{ color:var(--pdft-danger); }
.pdft-card-badge.pdft-done{ font-size:16px; font-weight:700; color:var(--pdft-success); }
.pdft-card-download{
	width:auto; padding:7px 18px; font-size:12px;
	display:none;
}
.pdft-card-download.pdft-visible{ display:inline-flex; align-items:center; justify-content:center; }
@container (min-width:600px){
	.pdft-card-name{ flex:0 1 auto; max-width:260px; }
	.pdft-card-line > * + *{ position:relative; }
	.pdft-card-line > * + *::before{ content:''; position:absolute; top:50%; left:-10px; height:14px; margin-top:-7px; border-left:1px solid var(--pdft-line); }
}

.pdft-add-more{
	display:flex; align-items:center; justify-content:center; gap:8px;
	min-height:100%;
	padding:10px 18px;
	border:1.5px dashed var(--pdft-line);
	border-radius:var(--pdft-radius-sm);
	background:var(--pdft-surface);
	color:var(--pdft-muted);
	font-size:15px; font-weight:700;
}
.pdft-add-more:hover{ border-color:var(--pdft-accent); color:var(--pdft-accent-dark); }
.pdft-gallery-scroll{ display:flex; flex-direction:column; align-items:flex-start; }
.pdft-pages{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:14px; padding:14px; }
/* With spreads on (facing pages), each tile is two pages wide. The vertical list below still wins and keeps one spread per row. */
.pdft-pages.pdft-pages-facing{ grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }
/* Zoomed in, the page grows inside its card: the card (file name, size, remove button) keeps the width of the pane and the page moves sideways within it.
   The scroll bar is hidden, since for a long PDF it would sit at the very end; the Hand button, Space and drag, the middle button, shift and the wheel, or a swipe move the page. */
.pdft-gallery-scroll .pdft-pages{ grid-template-columns:1fr; justify-items:center; row-gap:24px; overflow-x:auto; scrollbar-width:none; }
.pdft-gallery-scroll .pdft-pages::-webkit-scrollbar{ display:none; }
/* A pinch on the pages zooms the tool's own zoom (pdft-core.js), not the whole web page; one finger still scrolls. */
.pdft-gallery-scroll{ touch-action:pan-x pan-y; }
/* Vertical list: a thin line, the same as the one between the options, halfway between each page and the one above.
   It is drawn wider than the page and the card clips it to the card's edges, so it runs the full width at any zoom. */
.pdft-gallery-scroll .pdft-pages > .pdft-thumb-wrap{ overflow:visible; }
.pdft-gallery-scroll .pdft-pages > .pdft-thumb-wrap + .pdft-thumb-wrap::before{
	content:""; position:absolute; top:-12px; left:50%; width:100vw;
	border-top:1px solid var(--pdft-line); transform:translateX(-50%); pointer-events:none;
}
.pdft-gallery-scroll .pdft-add-more{
	min-height:48px;
	width:min(340px, 100%);
	margin:0 auto;
}

.pdft-controls-col{
	--pdft-space:16px;
	--pdft-group-gap:20px;
	display:flex;
	flex-direction:column;
	padding:var(--pdft-pane-pad);
	border-top:1px solid var(--pdft-line);
}
.pdft-controls-col > *:not(:first-child){
	margin-top:var(--pdft-space);
	padding-top:var(--pdft-space);
	border-top:1px solid var(--pdft-line);
}

.pdft-control-label{
	display:flex; align-items:center; justify-content:space-between;
	gap:10px; margin-bottom:8px;
}
.pdft-label{ font-size:0.9rem; font-weight:600; color:var(--pdft-ink); }

.pdft-label-group{ display:flex; align-items:center; gap:6px; }

.pdft-value-box{
	display:flex; align-items:center; gap:3px;
	flex:0 0 auto;
	font-size:0.85rem; font-weight:600; color:var(--pdft-accent);
}
.pdft-value-box input[type="number"]{
	width:44px;
	height:25px;
	padding:0 4px;
	line-height:23px;
	font:inherit; color:inherit;
	text-align:center;
	font-variant-numeric:tabular-nums;
	border:1px solid var(--pdft-line);
	border-radius:0;
	background:var(--pdft-surface);
	-moz-appearance:textfield;
}
.pdft-value-box input[type="number"]::-webkit-outer-spin-button,
.pdft-value-box input[type="number"]::-webkit-inner-spin-button{
	-webkit-appearance:none; margin:0;
}
.pdft-value-box.pdft-wide input[type="number"]{ width:56px; }
.pdft-tool-wrap input[type="range"]{
	width:100%;
	-webkit-appearance:none; appearance:none;
	height:6px;
	border-radius:var(--pdft-radius-pill);
	background:var(--pdft-line);
}
.pdft-tool-wrap input[type="range"]::-webkit-slider-thumb{
	-webkit-appearance:none;
	width:22px; height:22px; border-radius:50%;
	background:var(--pdft-accent);
	border:3px solid var(--pdft-surface);
	box-shadow:0 0 0 1px var(--pdft-accent);
	cursor:pointer;
}
.pdft-tool-wrap input[type="range"]::-moz-range-thumb{
	width:22px; height:22px; border-radius:50%;
	background:var(--pdft-accent);
	border:3px solid var(--pdft-surface);
	box-shadow:0 0 0 1px var(--pdft-accent);
	cursor:pointer;
}
.pdft-tool-wrap input[type="range"]:focus-visible::-webkit-slider-thumb{ outline:3px solid var(--pdft-focus); outline-offset:2px; }

.pdft-presets{ display:flex; align-items:center; flex-wrap:wrap; gap:5px; }
.pdft-presets .pdft-field{ flex:1 1 90px; min-width:90px; }
.pdft-preset-chip{
	flex:1 1 auto;
	padding:6px 9px;
	font-size:11px; font-weight:600;
	white-space:nowrap;
	border:1px solid var(--pdft-line);
	border-radius:var(--pdft-radius-btn);
	background:var(--pdft-surface);
	color:var(--pdft-ink);
	transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pdft-preset-chip:hover{ border-color:var(--pdft-accent); }
/* Two or three buttons in a row share the row equally. */
.pdft-presets:not(.pdft-view):not(:has(> :nth-child(4))) > .pdft-preset-chip{ flex:1 1 0; min-width:0; }
.pdft-preset-chip[aria-pressed="true"]{
	background:var(--pdft-accent); border-color:var(--pdft-accent); color:#fff;
}
.pdft-view .pdft-preset-chip{ display:flex; padding:6px 10px; }
/* Compact option row: label on the left, its control on the right.
   Controls: .pdft-fill (chips, swatches, select) or .pdft-slider (+ value box). */
.pdft-row{
	--pdft-label-w:146px;
	display:flex; align-items:center; flex-wrap:wrap;
	gap:8px 12px;
}
.pdft-row > .pdft-control-label{ flex:0 0 var(--pdft-label-w); margin:0; }
.pdft-row .pdft-label{ white-space:nowrap; }
.pdft-fill{ flex:1 1 120px; min-width:0; }
.pdft-slider{ flex:1 1 90px; min-width:60px; padding:8px 0; }

.pdft-hint{ font-size:12px; color:var(--pdft-muted); margin:12px 0 0; line-height:1.5; }
.pdft-hint.pdft-error{ color:var(--pdft-danger); }
.pdft-hint:empty{ display:none; }
.pdft-slider-warn{ margin:2px 0 0; }
.pdft-slider-warn a{ color:inherit; text-decoration:underline; }
/* A row of pictures to choose from (PDFT.paintPicks draws them): a grid of small boxes, the chosen one framed in the accent colour. */
.pdft-picks{ display:grid; grid-template-columns:repeat(var(--pdft-cols, 3), minmax(0, 1fr)); gap:6px; }
.pdft-pick{
	display:flex; align-items:center; justify-content:center;
	margin:0; padding:5px 4px;
	border:1px solid var(--pdft-line);
	border-radius:var(--pdft-radius-btn);
	background:var(--pdft-surface);
	color:var(--pdft-ink);
	cursor:pointer;
	transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pdft-pick svg{ display:block; width:100%; height:auto; max-height:34px; }
.pdft-pick-toggle{ display:none; align-items:center; justify-content:center; border:1px solid var(--pdft-line); border-radius:var(--pdft-radius-btn); background:var(--pdft-surface); color:var(--pdft-ink); cursor:pointer; min-height:44px; padding:0; }
.pdft-pick-toggle svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s; }
.pdft-pick-toggle:hover{ border-color:var(--pdft-accent); }
.pdft-pick-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.pdft-picks[data-state="one"]{ grid-template-columns:minmax(0, 1fr) 44px; }
.pdft-picks[data-state="one"] .pdft-pick[aria-pressed="false"]{ display:none; }
.pdft-picks[data-state="one"] .pdft-pick-toggle, .pdft-picks[data-state="open"] .pdft-pick-toggle{ display:flex; }
.pdft-picks[data-state="open"] .pdft-pick-toggle{ grid-column:1 / -1; min-height:32px; }
.pdft-pick:hover{ border-color:var(--pdft-accent); }
.pdft-pick[aria-pressed="true"]{ border-color:var(--pdft-accent); box-shadow:0 0 0 1px var(--pdft-accent); background:color-mix(in srgb, var(--pdft-accent) 10%, var(--pdft-surface)); color:var(--pdft-accent-dark); }

/* A short explanation of a tool's subject: a white box with no border, a short bulleted list in red and a close button in its corner.
   Tools opt in by using it. The words are written in each template as <li> items, and pdft-core.js makes the close button work. */
.pdft-tool-explanation{ position:relative; padding:12px 44px 12px 14px; background:var(--pdft-surface); border-radius:var(--pdft-radius-sm); }
.pdft-tool-explanation ul{ margin:0; padding:0 0 0 14px; list-style:disc; }
.pdft-tool-explanation li{ margin:0; padding:0; font-size:13px; line-height:1.5; color:var(--pdft-danger); }
.pdft-tool-explanation li + li{ margin-top:6px; }
.pdft-tool-explanation-close{ position:absolute; top:4px; right:4px; width:32px; height:32px; padding:0; border:0; border-radius:var(--pdft-radius-sm); background:none; color:var(--pdft-muted); font-size:20px; line-height:1; cursor:pointer; }
.pdft-tool-explanation-close:hover{ color:var(--pdft-ink); }
.pdft-tool-explanation-close:focus-visible{ outline:2px solid var(--pdft-focus); }

.pdft-checkbox{
	display:flex; align-items:center; gap:10px;
	cursor:pointer;
}
.pdft-checkbox input[type="checkbox"]{
	width:19px; height:19px;
	accent-color:var(--pdft-accent);
	cursor:pointer;
	margin:0;
	flex-shrink:0;
}
.pdft-checkbox span:not(.winfo-tip){ font-size:13px; color:var(--pdft-ink); font-weight:500; }

/* File Name (pdft-core.php file_name()): the box fills the row and the file ending follows it. */
.pdft-file-row .pdft-field{ flex:1 1 auto; min-width:0; }
.pdft-ext{ flex:none; font-size:0.9rem; font-weight:600; color:var(--pdft-accent); }

/* Drag to reorder PDFs (pdft-core.js, for tools that ask for it). With the default handle, the text bar of a card
   (name, size and status) is the grab area. Text is only made unselectable where no field sits, because Safari on iPhone
   will not let a person type into a field inside text that is set to user-select:none. */
.pdft-reorder-bar .pdft-card-body{ cursor:grab; }
.pdft-reorder-bar .pdft-card-name,
.pdft-reorder-bar .pdft-card-dims,
.pdft-reorder-bar .pdft-card-sizes,
.pdft-reorder-bar .pdft-card-badge{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.pdft-reordering,
.pdft-reordering *{ cursor:grabbing !important; }
/* Text for screen readers only (the sentence read out after a PDF is moved). */
.pdft-sr{
	position:absolute; width:1px; height:1px; margin:-1px; padding:0;
	overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.pdft-card.pdft-dragging{ z-index:6; opacity:.9; box-shadow:0 14px 32px rgba(0,0,0,.25); pointer-events:none; }
.pdft-card.pdft-drop-before{ box-shadow:-5px 0 0 var(--pdft-accent); }
.pdft-card.pdft-drop-after{ box-shadow:5px 0 0 var(--pdft-accent); }
/* Round arrow buttons under a card (reorder: { arrows: true }), to move it one place earlier or later. */
.pdft-shift{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:10px; }
.pdft-shift-btn{
	position:relative;
	display:inline-flex; align-items:center; justify-content:center;
	width:30px; height:30px; padding:0;
	border:1px solid var(--pdft-line); border-radius:50%;
	background:var(--pdft-surface); color:var(--pdft-ink);
}
.pdft-shift-btn svg{ width:14px; height:14px; display:block; }
.pdft-shift-btn::before{ content:''; position:absolute; inset:-6px; }
.pdft-shift-btn:hover:not(:disabled){ border-color:var(--pdft-accent); color:var(--pdft-accent-dark); }
@media (max-width:480px){
	.pdft-shift-btn{ width:36px; height:36px; }
}
.pdft-gallery-all .pdft-card.pdft-drop-before{ box-shadow:0 -5px 0 var(--pdft-accent); }
.pdft-gallery-all .pdft-card.pdft-drop-after{ box-shadow:0 5px 0 var(--pdft-accent); }

.pdft-actions{
	position:sticky;
	bottom:0;
	z-index:2;
	display:flex;
	flex-direction:column;
	gap:10px;
	padding:12px var(--pdft-pane-pad) calc(12px + env(safe-area-inset-bottom, 0px));
	background:var(--pdft-paper);
	border-top:1px solid var(--pdft-line);
}

.pdft-stats{
	display:none; flex-direction:column; gap:10px;
}
.pdft-stats.pdft-visible{ display:flex; }
.pdft-stat{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.pdft-stat-label{ font-size:12px; color:var(--pdft-muted); }
.pdft-stat-value{ font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }

/* The report of a tool that reads a PDF (PDFT.readTool): one block for each finished PDF, with a small table for each part of the answer. */
.pdft-report{ display:flex; flex-direction:column; gap:18px; padding-top:4px; }
.pdft-report[hidden]{ display:none; }
.pdft-report-file{ min-width:0; padding:14px; background:var(--pdft-surface); border:1px solid var(--pdft-line); border-radius:var(--pdft-radius-sm); }
.pdft-report-name{ margin:0 0 10px; font-family:var(--pdft-font-display); font-size:16px; font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
.pdft-report-file h4{ margin:14px 0 6px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--pdft-muted); }
.pdft-report-scroll{ overflow-x:auto; }
.pdft-report-table{ width:100%; border-collapse:collapse; font-size:13px; line-height:1.4; }
.pdft-report-table th{ text-align:left; font-weight:600; color:var(--pdft-muted); border-bottom:1px solid var(--pdft-line); }
.pdft-report-table th,
.pdft-report-table td{ padding:5px 8px 5px 0; vertical-align:top; overflow-wrap:anywhere; }
.pdft-report-table tr + tr td{ border-top:1px solid var(--pdft-line); }
.pdft-report-table .pdft-report-key{ width:42%; color:var(--pdft-muted); }
.pdft-report-note{ margin:8px 0 0; font-size:12px; color:var(--pdft-muted); line-height:1.5; }

/* A tool that makes a document from its options (invoice, graph paper, blank PDF): the one document is always there, so it has no Remove or Add More. */
.pdft-generator .pdft-remove,
.pdft-generator .pdft-add-more,
.pdft-generator .pdft-remove-all,
.pdft-generator .pdft-card-sizes{ display:none; }

.pdft-field{
	display:block;
	width:100%;
	height:38px;
	padding:0 12px;
	border:1px solid var(--pdft-line);
	border-radius:0;
	background-color:var(--pdft-surface);
	color:var(--pdft-ink);
	font-family:var(--pdft-font-body);
	font-size:0.9rem;
	font-weight:500;
}
textarea.pdft-field{
	height:auto;
	min-height:64px;
	padding:9px 12px;
	line-height:1.4;
	resize:vertical;
}
select.pdft-field{
	padding-right:28px;
	-webkit-appearance:none; -moz-appearance:none; appearance:none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--pdft-muted) 50%),
		linear-gradient(135deg, var(--pdft-muted) 50%, transparent 50%);
	background-position:calc(100% - 16px) center, calc(100% - 12px) center;
	background-size:4px 4px, 4px 4px;
	background-repeat:no-repeat;
	cursor:pointer;
}
.pdft-group{ display:flex; flex-direction:column; gap:var(--pdft-group-gap); }

.pdft-swatch-row{ display:flex; align-items:center; gap:10px; padding:5px; }
.pdft-swatch{
	position:relative;
	flex:1 1 0; min-width:0; height:36px;
	margin:0; padding:0;
	border:1px solid var(--pdft-muted); border-radius:var(--pdft-radius-btn);
	background:var(--pdft-sw, transparent);
	cursor:pointer;
}
.pdft-swatch-none{ background:conic-gradient(#cfcfcf 25%, #ffffff 0 50%, #cfcfcf 0 75%, #ffffff 0) 0 0 / 10px 10px; }
/* Selected: a solid accent frame hugging the colour, with a hairline inner edge so the colour stays crisp. */
.pdft-swatch[aria-pressed="true"],
.pdft-swatch.pdft-active{ border-color:var(--pdft-accent); box-shadow:0 0 0 1px var(--pdft-accent), inset 0 0 0 1px var(--pdft-surface); }
/* Both rainbow boxes: the colour input sits invisibly on top, and once a custom colour is picked it shows in the middle. */
.pdft-swatch-custom{ background:linear-gradient(90deg, #ff4444, #ffdd44, #44dd44, #44dddd, #4444ff, #ff44ff); }
.pdft-swatch-custom.pdft-active::after{ content:''; position:absolute; inset:8px; background:var(--pdft-sw); border:1px solid #ffffff; }
.pdft-swatch-custom input{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; opacity:0; cursor:pointer; }
.pdft-swatch-custom:focus-within{ outline:3px solid var(--pdft-focus); outline-offset:2px; }

.pdft-gallery-all .pdft-card{ display:flex; flex-direction:column; grid-column:1 / -1; }
.pdft-gallery-all .pdft-card-body{ order:-1; padding:10px 44px; border-top:0; border-bottom:1px solid var(--pdft-line); background:color-mix(in srgb, var(--pdft-accent) 8%, var(--pdft-surface)); }
.pdft-gallery-all .pdft-add-more{ grid-column:1 / -1; min-height:48px; }
/* A tool whose files are always one page (images, class set in pdft-core.php) shows its cards as tiles side by side, the same as
   when See All Pages is off, instead of one full row each. The picture area fills the card, so the tallest picture in a row sets its height, shorter pictures sit in the
   middle of it, and the name and size stay at the same level on every card. The vertical list keeps its own layout, and PDF tools never get the class. */
.pdft-single-page .pdft-card-dims{ display:none; }
.pdft-single-page.pdft-gallery-all:not(.pdft-gallery-scroll) .pdft-card{ grid-column:auto; }
.pdft-single-page.pdft-gallery-all:not(.pdft-gallery-scroll) .pdft-card-body{ order:0; padding:10px 12px; border-top:1px solid var(--pdft-line); border-bottom:0; background:none; }
.pdft-single-page.pdft-gallery-all:not(.pdft-gallery-scroll) .pdft-pages{ padding:0; flex:1; align-content:center; }
.pdft-single-page.pdft-gallery-all:not(.pdft-gallery-scroll) .pdft-add-more{ grid-column:auto; min-height:100%; }
.pdft-single-page.pdft-reorder-bar .pdft-card{ cursor:grab; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.pdft-single-page.pdft-gallery-all:not(.pdft-gallery-scroll) .pdft-card.pdft-drop-before{ box-shadow:-5px 0 0 var(--pdft-accent); }
.pdft-single-page.pdft-gallery-all:not(.pdft-gallery-scroll) .pdft-card.pdft-drop-after{ box-shadow:5px 0 0 var(--pdft-accent); }

.pdft-position{ display:flex; align-items:flex-start; gap:12px; }
/* The On Click tile sits beside the middle row of the grid (38 px tile and 6 px gap above it), with its name under it. */
.pdft-posclick{ display:flex; flex-direction:column; align-items:center; gap:0; margin-top:44px; }
.pdft-posclick-name{ font-size:12px; line-height:1; margin-top:6px; color:var(--pdft-muted); }
.pdft-pos-click{ display:flex; align-items:center; justify-content:center; color:var(--pdft-muted); }
.pdft-pos-click::after{ display:none; }
.pdft-pos-click svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.pdft-pos-click[aria-pressed="true"]{ color:#fff; }
.pdft-posgrid{ display:grid; grid-template-columns:repeat(3, 38px); gap:6px; }
.pdft-pos{
	position:relative;
	width:38px; height:38px; padding:0;
	border:1px solid var(--pdft-line); border-radius:var(--pdft-radius-btn);
	background:var(--pdft-surface);
}
.pdft-pos::after{
	content:'';
	position:absolute; inset:0; margin:auto;
	width:8px; height:8px; border-radius:50%;
	background:var(--pdft-muted);
}
.pdft-pos:hover{ border-color:var(--pdft-accent); }
.pdft-pos[aria-pressed="true"]{ background:var(--pdft-accent); border-color:var(--pdft-accent); }
.pdft-pos[aria-pressed="true"]::after{ background:#fff; }

/* Small buttons that sit in an option row (Delete, Undo, Choose Image): the main button's look at a smaller size, with a file name or another button beside them. */
.pdft-small-btn{ width:auto; padding:7px 18px; font-size:12px; }
.pdft-small-btn:disabled{ opacity:.5; cursor:default; }
.pdft-file{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.pdft-file-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--pdft-muted); }
/* Tools that mark pages by clicking or dragging on the preview (PDFT.markupTool): a crosshair over the pages, and no focus frame on the panes. */
.pdft-markup #pdftGallery canvas{ cursor:crosshair; }
.pdft-markup .pdft-stage-col:focus-visible, .pdft-markup .pdft-controls-col:focus-visible{ outline:none; }

.pdft-pages-pick{ --pdft-group-gap:8px; }
.pdft-pages-pick .pdft-control-label{ margin-bottom:0; }
/* Desktop split pane: 65% PDF preview, 35% tools. Each pane scrolls on its own. The action bar
   is the bottom row of the tools column, so it stays in view while the settings scroll above it.
   Below 900px the panes stack and the page scrolls normally. The tool is at least as tall as the screen under the site
   header, and the action bar sticks to the screen bottom. */
@media (min-width:900px){
	.pdft-tool{
		flex:1 1 auto;
		min-height:0;
		grid-template-columns:minmax(0, 65fr) minmax(320px, 35fr);
		grid-template-rows:minmax(0, 1fr) auto;
	}
	.pdft-stage-col{ grid-column:1; grid-row:1 / 3; }
	.pdft-controls-col{ grid-column:2; grid-row:1; border-top:0; }
	.pdft-actions{ grid-column:2; grid-row:2; }
	.pdft-controls-col,
	.pdft-actions{ border-left:1px solid var(--pdft-line); }
	.pdft-stage-col{ container-type:size; }
	.pdft-stage-col,
	.pdft-controls-col{
		min-height:0;
		overflow-y:auto;
		overscroll-behavior:contain;
		scrollbar-width:thin;
	}
}

@media (max-width:480px){
	.pdft-tool{ --pdft-pane-pad:14px; }
	.pdft-tool-wrap input:not([type="checkbox"]):not([type="range"]):not([type="file"]):not([type="color"]),
	.pdft-tool-wrap select,
	.pdft-tool-wrap textarea{ font-size:16px; }
	.pdft-value-box input[type="number"]{ height:34px; line-height:32px; }
	.pdft-value-box.pdft-wide input[type="number"]{ width:64px; }
	.pdft-field{ height:51px; }
	.pdft-toolbar .pdft-jump{ height:36px; font-size:16px; }
	textarea.pdft-field{ height:auto; min-height:84px; }
	.pdft-preset-chip{ flex:1 1 auto; text-align:center; font-size:12px; padding:10px 9px; }
}

/* ==========================================================================
   5 · DOCUMENTATION POPUP (About this tool)
   ========================================================================== */

/* "About" popup: the documentation sits in a native <dialog>. Its text is always in the page
   HTML, so search engines can read it even while the popup is closed. */
.wldocument{
	--wldocument-ink:#1b1d1e;
	--wldocument-accent:#1f6f5c;
	--wldocument-focus:#2b6ef6;
	--wldocument-top:#b2ab95;
	--wldocument-surface:#ffffff;
	--wldocument-line:#dcdad2;
	--wldocument-display:var(--pdft-font-display);
	--wldocument-body:var(--pdft-font-body);
	--wldocument-copy:var(--pdft-font-copy);

	width:calc(100% - 32px);
	max-width:1100px;
	height:calc(100vh - 32px);
	height:calc(100dvh - 32px);
	max-height:none;
	margin:auto;
	padding:0;
	border:1px solid var(--wldocument-line);
	border-radius:14px;
	background:var(--wldocument-surface);
	color:var(--wldocument-ink);
	overflow:hidden;
}
[data-wlcustom-dm="dark"] .wldocument{
	--wldocument-ink:var(--wlcustom-dm-text, #e8e6e3);
	--wldocument-accent:#2bb3a8;
	--wldocument-focus:#6d9dff;
	--wldocument-top:var(--wlcustom-dm-text, #e8e6e3);
	--wldocument-surface:#121d30;
	--wldocument-line:#223049;
}
.wldocument[open]{ display:flex; flex-direction:column; }
.wldocument::backdrop{ background:rgba(10, 20, 35, .6); }
html:has(.wldocument[open]){ overflow:hidden; scrollbar-gutter:stable; }
.wldocument-bar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	flex:none;
	padding:12px 16px 12px 24px;
	border-bottom:1px solid var(--wldocument-line);
}
.wldocument-bar-title{
	font-family:var(--wldocument-display);
	font-size:1.15rem;
	font-weight:600;
	color:var(--wldocument-ink);
}
.wldocument-close{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex:none;
	width:36px;
	height:36px;
	padding:0;
	border:1px solid var(--wldocument-line);
	border-radius:50%;
	background:var(--wldocument-surface);
	color:var(--wldocument-ink);
	cursor:pointer;
}
.wldocument-close:hover{ border-color:var(--wldocument-ink); }
.wldocument-close:focus-visible{ outline:3px solid var(--wldocument-focus); outline-offset:2px; }
/* Touch screens: no focus ring on the close button, which receives focus when the popup opens. */
@media (pointer:coarse){ .wldocument .wldocument-close:focus-visible{ outline:none; } }
.wldocument-body{
	flex:1;
	min-height:0;
	overflow-y:auto;
	overscroll-behavior:contain;
	padding:32px max(16px, calc((100% - 760px) / 2)) 40px;
}
.wldocument h2{
	margin:40px 0 10px;
	font-family:var(--wldocument-body);
	font-size:1.4rem;
	font-weight:600;
	line-height:1.3;
	color:var(--wldocument-ink);
}
.wldocument p, .wldocument li{
	font-family:var(--wldocument-copy);
	font-size:16px;
	font-weight:400;
	line-height:1.7;
	color:var(--wldocument-ink);
}
.wldocument p{ max-width:66ch; margin:0 0 14px; }
.wldocument p:last-child{ margin-bottom:0; }
.wldocument ul, .wldocument ol{
	display:flex;
	flex-direction:column;
	gap:8px;
	max-width:66ch;
	margin:0;
	padding-left:20px;
}
.wldocument ul > li{ position:relative; list-style:none !important; }
.wldocument ul > li::before{
	content:"";
	position:absolute;
	top:0.66em;
	left:-14px;
	width:6px;
	height:6px;
	border-radius:50%;
	background:var(--wldocument-ink);
}
.wldocument .wldocument-steps{
	max-width:none;
	margin:0 0 48px;
	padding:0;
	gap:26px;
	list-style:none;
}
/* Top of the popup: the same trust line and sentence as the page header, for visitors who missed them once the header collapsed. */
.wldocument .wldocument-intro{ margin:0 0 36px; text-align:center; }
.wldocument .wldocument-intro-title{
	margin:0 auto 14px;
	font-family:var(--wldocument-display);
	font-size:clamp(1.5rem, 4vw, 2rem); font-weight:600; line-height:1.2;
	color:var(--wldocument-ink);
}
.wldocument .wldocument-intro-line{
	margin:0 auto 10px;
	font-family:var(--wldocument-copy);
	font-size:17px; font-weight:600; line-height:1.35;
	color:var(--wldocument-accent);
}
.wldocument .wldocument-intro-text{ margin:0 auto; font-family:var(--wldocument-body); font-size:1rem; line-height:1.6; }
.wldocument-steps > li{ display:flex; align-items:flex-start; gap:18px; }
.wldocument-step-num{
	min-width:2ch;
	font-family:var(--wldocument-display);
	font-size:1.1rem;
	font-weight:400;
	color:var(--wldocument-accent);
}
.wldocument .wldocument-step-title{ margin:0 0 4px; }
.wldocument-top{ display:flex; justify-content:center; margin-top:48px; }
.wldocument-top-btn{
	padding:16px 32px; border:0; background:none; line-height:0; cursor:pointer;
	color:var(--wldocument-top);
	transition:transform 0.15s ease;
}
.wldocument-top-btn:hover{ transform:translateY(-3px); }
.wldocument-top-btn:focus-visible{ outline:3px solid var(--wldocument-focus); outline-offset:2px; }
.wldocument-top-btn svg{ width:88px; height:auto; }


/* The Hold button of See Original: pressing it must not scroll the page, select text or open a menu on touch screens. */
.pdft-preset-chip[data-hold] {
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
}