/* ==========================================================================
   PDF Tools · shared styles                                   Version No.: 20
   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 Related Tools panel and the top-bar group sit outside the tool wrapper, so they need it too. */
.pdft-related-panel,
.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-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,
	.pdft-related-panel *{ 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:normal;
	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, trust line, compact header, Related Tools
   ========================================================================== */
.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 0 10px;
}
@media (max-width:480px){
	.pdft-hero{ padding-left:16px; padding-right:16px; }
	.pdft-h1{ font-size:clamp(16px, 5vw, 22px); }
}

/* Compact header. After 10 seconds or the first scroll, pdft-core.js adds the tool's short name with its info icon, and
   the Related Tools icon (a grid of four squares), to the site's top bar (desktop) or its second row (mobile). 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 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, .topnav-inner > [class*="wlcustom-dm-"]){ visibility:hidden; }
.pdft-nav-compact:not(.pdft-nav-open) .topnav-mob-row2-menu{ display:none; }
.pdft-nav-open .pdft-navmain{ display:none; }
.pdft-navgroup{
	--pdft-nav-ink:#ffffff;
	--pdft-nav-accent:#fff551;
	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:14px; 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 arrow, the info icon and the Related Tools grid icon are the same small outlined circle. */
.pdft-navarrow,
.pdft-navgroup .pdft-info-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-info-btn svg,
.pdft-navgroup .pdft-related-btn svg{ width:9px; height:9px; }
.pdft-navarrow{ margin-left:6px; }
/* The Related Tools icon also stays filled while its dropdown is open. */
.pdft-navarrow:hover,
.pdft-navgroup .pdft-info-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 short name and its info icon sit close together, like the arrow and the site title. */
.pdft-navtitlebox{ display:flex; align-items:center; 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 (arrow, info and Related Tools) 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, and the spacing below keeps neighbouring squares from overlapping. */
@media (pointer:coarse){
	.pdft-info-btn,
	.pdft-navarrow,
	.pdft-navgroup .pdft-related-btn{ position:relative; }
	.pdft-info-btn::before,
	.pdft-navarrow::before,
	.pdft-navgroup .pdft-related-btn::before{
		content:''; position:absolute; top:50%; left:50%;
		width:48px; height:48px; transform:translate(-50%, -50%);
	}
	.pdft-navmain{ gap:30px; }
	.topnav-mob-brand-wrap .pdft-navarrow{ margin-left:15px; }
}

/* Related Tools dropdown. pdft-core.js moves this panel to the end of the page so the theme's header styles
   and the scrolling mobile row cannot clip or restyle it. */
.pdft-related-panel{
	--pdft-rel-bg:#ffffff;
	--pdft-rel-ink:#1b1d1e;
	--pdft-rel-line:#dcdad2;
	--pdft-rel-hover:#006666;
	--pdft-rel-hover-ink:#ffffff;
	--pdft-rel-accent:#1f6f5c;
	position:fixed; z-index:9300; box-sizing:border-box;
	width:min(720px, calc(100vw - 24px));
	overflow-y:auto; overscroll-behavior:contain;
	padding:20px;
	background:var(--pdft-rel-bg); color:var(--pdft-rel-ink);
	border:1px solid var(--pdft-rel-line); border-radius:16px;
	box-shadow:0 18px 48px rgba(0,0,0,.28);
	font-family:var(--pdft-font-body);
}
[data-wlcustom-dm="dark"] .pdft-related-panel{
	--pdft-rel-bg:#121d30;
	--pdft-rel-ink:var(--wlcustom-dm-text, #e8e6e3);
	--pdft-rel-line:#223049;
	--pdft-rel-accent:#2bb3a8;
}
.pdft-related-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px; }
.pdft-related-card{
	display:flex; align-items:center; gap:12px; padding:12px 16px;
	border:1px solid var(--pdft-rel-line); border-radius:12px;
	color:inherit; text-decoration:none;
	transition:background-color .15s ease, border-color .15s ease;
}
.pdft-related-card:hover,
.pdft-related-card:focus-visible{ background:var(--pdft-rel-hover); border-color:var(--pdft-rel-hover); color:var(--pdft-rel-hover-ink); }
.pdft-related-card:hover .pdft-related-icon,
.pdft-related-card:focus-visible .pdft-related-icon{ color:var(--pdft-rel-hover-ink); }
.pdft-related-card:focus-visible{ outline:3px solid var(--pdft-rel-accent); outline-offset:2px; }
.pdft-related-icon{ flex:0 0 auto; width:20px; height:20px; color:var(--pdft-rel-accent); }
/* Cut-out details in the plugin's icons take the colour of the card behind them. */
.pdft-related-card .rtools-ko{ fill:var(--pdft-rel-bg); }
.pdft-related-card:hover .rtools-ko,
.pdft-related-card:focus-visible .rtools-ko{ fill:var(--pdft-rel-hover); }
.pdft-related-name{ display:block; min-width:0; font-size:15px; font-weight:600; line-height:1.3; }
.pdft-related-name::after{ content:'\2192'; margin-left:8px; color:var(--pdft-rel-accent); opacity:0; transition:opacity .15s ease; }
.pdft-related-card:hover .pdft-related-name::after,
.pdft-related-card:focus-visible .pdft-related-name::after{ opacity:1; color:var(--pdft-rel-hover-ink); }
/* Computers: up to three equal columns, each as wide as the longest tool name, so names stay on one line. The panel
   grows to fit them, up to the screen width. If a name still cannot fit there, it ends in an ellipsis instead of
   wrapping. --pdft-rel-cols is the number of tools, up to three, set by pdft-core.php. */
@media (min-width:900px){
	.pdft-related-panel{ width:max-content; max-width:calc(100vw - 24px); }
	.pdft-related-grid{ grid-template-columns:repeat(var(--pdft-rel-cols, 3), minmax(200px, 1fr)); }
	.pdft-related-card{ min-width:0; }
	.pdft-related-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* ==========================================================================
   3 · TRUST LINE: trust line and About icon
   ========================================================================== */
/* The trust line sits in the middle column, so it stays centred under the title. The About icon follows it in the third column. */
.pdft-trust-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:8px; margin:0; }
.pdft-trust-row > *{ margin:0 !important; }
.pdft-trust-row > p{ grid-column:2; }
.pdft-trust-row > .pdft-info-btn{ grid-column:3; justify-self:start; }
/* In the top bar the icon takes the menu's look instead (.pdft-navgroup .pdft-info-btn). */
.pdft-info-btn{
	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-info-btn:hover{ border-color:var(--pdft-ink); }

/* ==========================================================================
   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%); }
.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); }
.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)); }
.pdft-gallery-scroll .pdft-pages{ grid-template-columns:1fr; justify-items:center; row-gap:24px; }
/* 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-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); }
.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; }

.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; }

.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; }

/* 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-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; }