/* ==========================================================================
   Image Tools · shared styles                                 Version No.: 29
   Used by every image 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
   image tools at once. Tool-specific styles stay in each template.
   Edit class names only through a search and replace across all image 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{
	--imgt-font-display:'Fraunces', Georgia, 'Times New Roman', serif;
	--imgt-font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--imgt-font-copy:'Bricolage Grotesque', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.imgt-tool-wrap{
	--imgt-ink:#1b1d1e;
	--imgt-paper:#f2f1ed;
	--imgt-surface:#ffffff;
	--imgt-line:#dcdad2;
	--imgt-stage:#e3e3e3;
	--imgt-solid:#1b1d1e;
	--imgt-solid-dark:#000000;
	--imgt-muted:#6f716c;
	--imgt-accent:#1f6f5c;
	--imgt-accent-dark:#164f41;
	--imgt-focus:#2b6ef6;
	--imgt-success:#1f6f5c;
	--imgt-danger:#b3392b;
	--imgt-radius-sm:10px;
	--imgt-radius-pill:999px;
	--imgt-max:760px;

	background:var(--imgt-paper);
	color:var(--imgt-ink);
	font-family:var(--imgt-font-body);
	-webkit-font-smoothing:antialiased;
	display:block;
	box-sizing:border-box;
	padding:32px 0 80px;
}
/* A split-pane tool ends with its Download bar, like the PDF tools, so no extra room under it. */
.imgt-tool-wrap:has(.imgt-split){ padding-bottom:0; }
.imgt-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. */
.imgt-navgroup{ -webkit-tap-highlight-color:transparent; }
.imgt-tool-wrap [hidden]{ display:none !important; }

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


.imgt-tool-wrap button{
	font-family:inherit;
	cursor:pointer;
	-webkit-appearance:none;
	appearance:none;
}
.imgt-tool-wrap button:focus-visible,
.imgt-tool-wrap [tabindex]:focus-visible{
	outline:3px solid var(--imgt-focus);
	outline-offset:2px;
}
.imgt-tool-wrap button:disabled{ opacity:.45; cursor:not-allowed; }
/* Text boxes and menus never show a blue focus ring or border. Only the border darkens a little, so the visitor can still see where they are typing. */
.imgt-tool-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):focus,
.imgt-tool-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):focus-visible,
.imgt-tool-wrap select:focus,
.imgt-tool-wrap select:focus-visible,
.imgt-tool-wrap textarea:focus,
.imgt-tool-wrap textarea:focus-visible{
	outline:none !important;
	box-shadow:none !important;
	border-color:var(--imgt-muted) !important;
}
.imgt-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.
   imgt-core.js removes imgt-pointer as soon as the keyboard is used to move around. */
.imgt-tool-wrap.imgt-pointer button:focus-visible,
.imgt-tool-wrap.imgt-pointer [tabindex]:focus-visible{ outline:none; }

/* 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){
	.imgt-tool-wrap *{ transition:none !important; animation:none !important; }
	.imgt-navgroup *,
	.imgt-navgroup *::after{ transition:none !important; }
}
/* Reusable (i) info button + tooltip. Hover/focus shows it on desktop;
   a tap toggles it in imgt-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(--imgt-muted); border-radius:50%;
	background:none; color:var(--imgt-muted);
	font-size:10px; font-weight:700; font-style:normal; line-height:1;
	cursor:help;
}
.winfo:focus-visible,
.winfo.winfo-active{ border-color:var(--imgt-accent); color:var(--imgt-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(--imgt-ink); color:var(--imgt-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); }
/* File Name box (imgt-core.php file_name()): a label with its (i) tip, the name field, and the file ending outside the field. It is the last option of the right pane. */
.imgt-file-row{ display:flex; align-items:center; gap:10px; }
.imgt-file-label{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; font-size:13px; font-weight:600; color:var(--imgt-ink); }
.imgt-tool-wrap .imgt-file-row input[type="text"]{
	flex:1 1 auto; min-width:0; height:auto; margin:0; padding:9px 10px;
	-webkit-appearance:none; appearance:none;
	background:var(--imgt-surface); color:var(--imgt-ink);
	border:1px solid var(--imgt-line); border-radius:var(--imgt-radius-sm);
	font:inherit; font-size:14px; text-overflow:ellipsis;
	outline:0 !important; box-shadow:none !important;
}
.imgt-tool-wrap .imgt-file-row input[type="text"]:focus{ border-color:var(--imgt-accent); }
.imgt-file-ext{ flex:0 0 auto; margin-left:-5px; font-size:14px; font-weight:700; color:var(--imgt-accent); user-select:none; }
@media (max-width:899px){
	/* 16px keeps phones from zooming the page when the box is tapped. */
	.imgt-tool-wrap .imgt-file-row input[type="text"]{ font-size:16px; }
}
/* A short explanation of a tool's subject: a white box with no border and a short bulleted list in red, under a one-line heading that opens and folds it.
   Tools opt in by using it (a <details> with a <summary>). The words are written in each template as <li> items, and imgt-core.js opens the box on a first visit. */
.imgt-tool-explanation{ padding:6px 14px; background:var(--imgt-surface); border-radius:var(--imgt-radius-sm); }
.imgt-tool-explanation summary{ display:flex; align-items:center; gap:8px; min-height:32px; font-size:13px; font-weight:600; color:var(--imgt-ink); cursor:pointer; list-style:none; }
.imgt-tool-explanation summary::-webkit-details-marker{ display:none; }
.imgt-tool-explanation summary::after{ content:""; width:7px; height:7px; margin-left:auto; border:solid var(--imgt-muted); border-width:0 2px 2px 0; transform:rotate(45deg); transition:transform .15s; }
.imgt-tool-explanation[open] summary::after{ transform:rotate(-135deg); }
.imgt-tool-explanation summary:focus-visible{ outline:2px solid var(--imgt-focus); border-radius:var(--imgt-radius-sm); }
.imgt-tool-explanation ul{ margin:4px 0 8px; padding:0 0 0 14px; list-style:disc; }
.imgt-tool-explanation li{ margin:0; padding:0; font-size:13px; line-height:1.5; color:var(--imgt-danger); }
.imgt-tool-explanation li + li{ margin-top:6px; }
.winfo:focus-visible .winfo-tip,
.winfo.winfo-active .winfo-tip{ opacity:1; pointer-events:auto; }
@media (hover:hover){
	.winfo:hover{ border-color:var(--imgt-accent); color:var(--imgt-accent); }
	.winfo:hover .winfo-tip{ opacity:1; pointer-events:auto; }
}

/* ==========================================================================
   Split pane (the same idea as the PDF tools). A tool opts in with the class imgt-split on its section:
   three panes side by side on a computer (25% tools, 50% preview, 25% tools), each scrolling on its own,
   and an action bar at the bottom of the right pane that holds the main button. Below 900px everything
   stacks and the page scrolls normally, with the action bar sticking to the screen bottom.
   Panes are .imgt-pane-left, .imgt-pane-mid and .imgt-pane-right. The action bar is .imgt-actions.
   A tool may add a full-width row above the panes with .imgt-split-top (the All-round cropper's shape selectors).
   ========================================================================== */
.imgt-tool-wrap{
	--imgt-header-h:72px;
	--imgt-vh:100vh;
	/* The tool is as tall as the screen under the site header. imgt-core.js measures where it really starts. */
	--imgt-tool-h:calc(var(--imgt-vh) - var(--imgt-header-h));
	--imgt-pane-pad:24px;
}
@supports (height:100dvh){
	.imgt-tool-wrap{ --imgt-vh:100dvh; }
}
.imgt-actions{
	position:sticky;
	bottom:0;
	z-index:30;
	display:flex;
	flex-direction:column;
	gap:10px;
	padding:12px var(--imgt-pane-pad) calc(12px + env(safe-area-inset-bottom, 0px));
	background:var(--imgt-paper);
	border-top:1px solid var(--imgt-line);
}
@media (min-width:900px){
	.imgt-tool-wrap:has(.imgt-split){
		display:flex;
		flex-direction:column;
		height:var(--imgt-tool-h);
		padding:0;
		overflow:hidden;
	}
	.imgt-split{
		flex:1 1 auto;
		min-height:0;
		width:100%;
		max-width:none;
		margin:0;
		padding:0;
		display:grid;
		grid-template-columns:minmax(220px, 25fr) minmax(0, 50fr) minmax(260px, 25fr);
		grid-template-rows:auto minmax(0, 1fr) auto;
		gap:0;
	}
	.imgt-split-top{ grid-column:1 / -1; grid-row:1; min-width:0; margin-top:20px; border-bottom:1px solid var(--imgt-line); }
	.imgt-pane-left{ grid-column:1; grid-row:2 / 4; }
	.imgt-pane-mid{ grid-column:2; grid-row:2 / 4; container-type:size; --imgt-stage-h:max(340px, calc(100cqh - 190px)); }
	.imgt-pane-right{ grid-column:3; grid-row:2; }
	.imgt-actions{ grid-column:3; grid-row:3; position:static; }
	.imgt-pane-mid,
	.imgt-pane-right,
	.imgt-actions{ border-left:1px solid var(--imgt-line); }
	.imgt-pane-mid{ border-right:1px solid var(--imgt-line); }
	.imgt-pane-left,
	.imgt-pane-mid,
	.imgt-pane-right{
		min-height:0;
		overflow-x:hidden;
		overflow-y:auto;
		overscroll-behavior:contain;
		scrollbar-width:none;
	}
	.imgt-pane-left::-webkit-scrollbar,
	.imgt-pane-mid::-webkit-scrollbar,
	.imgt-pane-right::-webkit-scrollbar{ display:none; }
	/* A tool with a top row of choices lets the page scroll past it; the three panes then fill the screen below it. */
	.imgt-tool-wrap:has(.imgt-split-top){ height:auto; overflow:visible; }
	.imgt-split:has(> .imgt-split-top){ flex:none; grid-template-rows:auto calc(var(--imgt-tool-h) - 92px) auto; }
	.imgt-split:has(> .imgt-split-top) > [class*="imgt-pane-"]{ overscroll-behavior:auto; }
}
.imgt-pane-left,
.imgt-pane-mid,
.imgt-pane-right{ padding:var(--imgt-pane-pad); }

/* Left pane menu of other tools (IMGT_Tool::sidebar): computers only, and it can be folded away with the arrow. */
.imgt-side-tab{ display:none; }
.imgt-side-btn{
	width:28px; height:28px; padding:0; cursor:pointer; font-size:20px; line-height:1;
	border:1px solid var(--imgt-line); border-radius:6px; background:var(--imgt-paper); color:var(--imgt-ink);
}
.imgt-side-btn:hover{ background:var(--imgt-line); }
.imgt-side .imgt-side-btn{ display:none; float:right; margin-left:8px; }
.imgt-side .rtools-v:first-of-type .rtools-v-title{ margin-top:6px; }
/* On a phone the menu closes into one "More tools" bar at the very bottom of the page. */
.imgt-split:has(.imgt-side){ display:flex; flex-direction:column; }
.imgt-side{ order:9; padding:0; border-top:1px solid var(--imgt-line); }
.imgt-split:has(.imgt-side) > .imgt-actions{ order:10; }
.imgt-side-more{
	display:block; width:100%; padding:14px var(--imgt-pane-pad); cursor:pointer; text-align:left;
	font:inherit; font-weight:600; color:var(--imgt-ink); background:none; border:0;
}
.imgt-side-more::after{ content:"\25BE"; float:right; }
.imgt-side-open .imgt-side-more::after{ content:"\25B4"; }
.imgt-side-list{ display:none; padding:0 var(--imgt-pane-pad) var(--imgt-pane-pad); }
.imgt-side-open .imgt-side-list{ display:block; }
@media (min-width:900px){
	.imgt-split:has(.imgt-side){ display:grid; }
	.imgt-side,
	.imgt-split:has(.imgt-side) > .imgt-actions{ order:0; }
	.imgt-side{ border-top:0; padding:16px var(--imgt-pane-pad) var(--imgt-pane-pad); }
	.imgt-side-more{ display:none; }
	.imgt-side-list{ display:block; padding:0; }
	.imgt-side .imgt-side-btn{ display:block; }
	.imgt-split:has(.imgt-side){ position:relative; }
	.imgt-split.imgt-side-off{ grid-template-columns:0 minmax(0, 75fr) minmax(260px, 25fr); }
	.imgt-side-off .imgt-side{ display:none; }
	.imgt-side-off .imgt-side-tab{ display:block; position:absolute; left:0; top:50%; z-index:20; width:22px; height:56px; border-left:0; border-radius:0 8px 8px 0; }
}

/* Colour boxes (border, background, JPEG background): one line, equal squares, the first one a rainbow frame around the chosen colour. */
.imgt-swatches{ --imgt-swatch:36px; display:flex; flex-wrap:nowrap; align-items:center; gap:8px; }
@media (min-width:900px){
	.imgt-swatches{ --imgt-swatch:clamp(24px, calc((25vw - 96px) / 7), 36px); }
}
.imgt-swatches > *{ flex:none; width:var(--imgt-swatch); height:var(--imgt-swatch); min-width:0; max-width:none; }
.imgt-swatches > input[type="color"]{
	-webkit-appearance:none; appearance:none; margin:0; padding:0; cursor:pointer;
	width:var(--imgt-swatch); height:var(--imgt-swatch);
	border:1px solid var(--imgt-line); border-radius:var(--imgt-swatch-r, 8px);
	background:conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
}
.imgt-swatches > input[type="color"]::-webkit-color-swatch-wrapper{ padding:5px; }
.imgt-swatches > input[type="color"]::-webkit-color-swatch{ border:1px solid #fff; border-radius:max(2px, calc(var(--imgt-swatch-r, 8px) - 5px)); }
.imgt-swatches > input[type="color"]::-moz-color-swatch{ border:1px solid #fff; border-radius:max(2px, calc(var(--imgt-swatch-r, 8px) - 5px)); }
@media (max-width:480px){
	.imgt-tool-wrap{ --imgt-pane-pad:14px; }
}

/* Base look of every tool button (the primary one adds wl-btn-primary). */
.imgt-btn{
	padding:12px 22px;
	border:1px solid transparent;
	border-radius:var(--imgt-radius-pill);
	font-size:0.95rem;
	font-weight:600;
	cursor:pointer;
	transition:transform 0.1s ease, background 0.15s ease;
}
.imgt-btn:active{ transform:scale(0.98); }

/* WL Primary Button — uniform look for the main action button, Download and any other primary button. */
.wl-btn-primary{
	width:100%;
	padding:12px 22px;
	border:none;
	border-radius:999px;
	background:var(--imgt-accent);
	color:#fff;
	font-size:0.95rem;
	font-weight:600;
	transition:transform 0.1s ease;
}
.wl-btn-primary:hover{ background:var(--imgt-accent-dark); }
.wl-btn-primary:active{ transform:scale(0.98); }
.wl-btn-primary:disabled{ background:var(--imgt-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 imgt-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
   ========================================================================== */
.imgt-hero{
	flex:none; width:100%; max-width:var(--imgt-max);
	margin-left:auto; margin-right:auto;
	padding:0 20px 28px; text-align:center;
}
@media (min-width:900px){
	.imgt-hero{ padding:29px 20px 12px; }
}
@media (min-width:980px){
	.imgt-hero{ max-width:calc(var(--imgt-max) * 1.5); }
}
.imgt-h1{
	font-family:var(--imgt-font-display);
	font-weight:600;
	font-size:clamp(26px, 4vw, 34px);
	line-height:1.15;
	margin:0 0 12px;
	color:var(--imgt-ink);
}
.imgt-hero-line{
	font-family:var(--imgt-font-copy);
	font-weight:600;
	font-size:17px !important;
	line-height:1.35;
	color:var(--imgt-accent);
	margin:0 !important;
}
@media (max-width:480px){
	.imgt-hero{ padding-left:16px; padding-right:16px; }
	.imgt-h1{ font-size:clamp(16px, 5vw, 22px); padding:0 32px; }
}

/* Compact header. The arrow before the title (imgt-core.js) moves the title into the site's top bar (desktop) or its second row (mobile),
   with the Related Tools icon (a grid of four squares) after it, and moves it back. The first scroll down the page does the same. 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 (imgt-core.js places it over the page while it glides). */
.imgt-title-ghost{
	position:fixed; z-index:10000; box-sizing:border-box;
	margin:0 !important; padding:0; text-align:center; pointer-events:none;
}
.imgt-hero.imgt-hero-compact{
	position:absolute; width:1px; height:1px; margin:-1px; padding:0;
	overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.imgt-nav-compact:not(.imgt-nav-open) :is(.topnav-menu-desktop, .topnav-desk-search-icon){ visibility:hidden; }
.imgt-nav-compact:not(.imgt-nav-open) .topnav-mob-row2-menu{ display:none; }
.imgt-nav-open .imgt-navmain{ display:none; }
@media (min-width:1024px){
	#topnav-bar.imgt-nav-compact:not(.imgt-nav-open) .topnav-navigation{ position:absolute; left:20px; top:0; bottom:0; }
	#topnav-bar.imgt-nav-compact .topnav-inner > :is(.wlcustom-dm-toggle-desktop, .wlcustom-dm-disabled-toggle-desktop){ position:absolute; right:6px; top:0; }
}
.imgt-navgroup{
	--imgt-nav-ink:#ffffff;
	--imgt-nav-accent:#fff551;
	--imgt-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 (imgt-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 .imgt-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 .imgt-navgroup > *{ pointer-events:auto; }
.imgt-navmain{ display:flex; align-items:center; gap:var(--imgt-nav-gap, 10px); min-width:0; }
.imgt-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(--imgt-font-copy);
	font-size:20px; font-weight:500; line-height:1.3;
	color:var(--imgt-nav-ink);
}
/* The site-menu arrow, the title arrow and the Related Tools grid icon are the same small outlined circle. */
.imgt-navarrow,
.imgt-navgroup .imgt-fold-btn,
.imgt-navgroup .imgt-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(--imgt-nav-ink); border-radius:50%;
	background:none; color:var(--imgt-nav-ink);
	transition:background-color .15s ease, color .15s ease;
}
.imgt-navarrow svg,
.imgt-navgroup .imgt-fold-btn svg,
.imgt-navgroup .imgt-related-btn svg{ width:9px; height:9px; }
.imgt-navarrow{ margin-left:6px; }
.imgt-navgroup .imgt-fold-btn svg{ transform:rotate(180deg); }
/* The Related Tools icon also stays filled while its dropdown is open. */
.imgt-navarrow:hover,
.imgt-navgroup .imgt-fold-btn:hover,
.imgt-navgroup .imgt-related-btn:hover,
.imgt-navgroup .imgt-related-btn[aria-expanded="true"]{ background:var(--imgt-nav-accent); border-color:var(--imgt-nav-accent); color:#1a1a1a; }
/* The title arrow and the short name sit close together, like the site-menu arrow and the site title. */
.imgt-navtitlebox{ display:flex; align-items:center; gap:var(--imgt-nav-gap, 10px); min-width:0; }
.imgt-navarrow svg{ transition:transform .15s ease; }
.imgt-navarrow[aria-expanded="true"] svg{ transform:rotate(180deg); }
.imgt-navgroup button:focus-visible{ outline:3px solid var(--imgt-nav-accent); outline-offset:2px; }
.topnav-mobile-wrap .imgt-navtitle{ max-width:none; font-size:16px; }
/* Mobile: the arrow sits in the first row, right after the site title (imgt-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 .imgt-navarrow{
	--imgt-nav-ink:#ffffff;
	--imgt-nav-accent:#fff551;
	margin-left:10px; pointer-events:auto;
}
.topnav-mob-brand-wrap .imgt-navarrow:focus-visible{ outline:3px solid var(--imgt-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 --imgt-nav-gap apart from the name, so their squares are trimmed on the sides that face it. */
@media (pointer:coarse){
	.imgt-btns > button,
	.imgt-navarrow,
	.imgt-navgroup .imgt-fold-btn,
	.imgt-navgroup .imgt-related-btn{ position:relative; }
	.imgt-btns > button::before,
	.imgt-navarrow::before,
	.imgt-navgroup .imgt-fold-btn::before,
	.imgt-navgroup .imgt-related-btn::before{
		content:''; position:absolute; top:50%; left:50%;
		width:48px; height:48px; transform:translate(-50%, -50%);
	}
	.imgt-navgroup .imgt-fold-btn::before{ top:-13.25px; bottom:-13.25px; left:-13.25px; right:calc(var(--imgt-nav-gap) / -2 + 1px); width:auto; height:auto; transform:none; }
	.imgt-navgroup .imgt-related-btn::before{ top:-13.25px; bottom:-13.25px; right:-13.25px; left:calc(var(--imgt-nav-gap) / -2 + 1px); width:auto; height:auto; transform:none; }
	.topnav-mob-brand-wrap .imgt-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 .imgt-navarrow,
body.wlm-has-pro-badge .topnav-mob-brand-wrap .imgt-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 .imgt-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. */
.imgt-edge{ white-space:nowrap; }
.imgt-btns{ display:inline-flex; gap:8px; width:0; vertical-align:middle; position:relative; top:-0.11em; }
.imgt-btns > *{ flex:none; }
.imgt-btns-start{ justify-content:flex-end; margin:0 8px 0 -8px; }
.imgt-btns-end{ margin:0 -8px 0 8px; }
.imgt-h1:has(.imgt-btns > :nth-child(2)){ padding:0 64px; }
.imgt-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(--imgt-line); border-radius:50%;
	background:var(--imgt-surface); color:var(--imgt-ink); cursor:pointer;
}
.imgt-btns > button:hover{ border-color:var(--imgt-ink); }
/* A title of two or more lines (imgt-core.js adds imgt-h1-wrap): the buttons move to the middle of the title's left and right edges. */
.imgt-h1-wrap{ position:relative; padding:0 40px; }
.imgt-h1-wrap .imgt-btns{ position:absolute; top:50%; width:auto; margin:0; transform:translateY(-50%); }
.imgt-h1-wrap .imgt-btns-start{ left:0; }
.imgt-h1-wrap .imgt-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. */
.imgt-hero-line .imgt-btns{ height:0; align-items:center; top:-0.1em; }

/* ==========================================================================
   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(--imgt-font-display);
	--wldocument-body:var(--imgt-font-body);
	--wldocument-copy:var(--imgt-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; }

.wldocument ol{ list-style:decimal; }
.wldocument kbd{
	display:inline-block;
	padding:1px 7px;
	border:1px solid var(--wldocument-line);
	border-bottom-width:2px;
	border-radius:5px;
	background:var(--wldocument-surface);
	color:var(--wldocument-ink);
	font-family:var(--wldocument-copy);
	font-size:0.82em;
	font-weight:600;
	line-height:1.5;
}