/**
 * The tools, dressed in the blog's own clothes.
 *
 * Every colour, space and type size here is one of the theme's variables, so
 * a reader switching the site between Studio, Night Desk or Newsprint gets
 * tools that switch with it. The fallbacks after each `var()` are the Studio
 * values, and exist only so the plugin still looks deliberate under a theme
 * that has never heard of it.
 *
 * Two rules from the client's brief are load-bearing rather than decorative:
 * every hit area is at least 44px, and nothing is rounded — this design has
 * no rounded corners anywhere, and a soft card would read as somebody else's
 * component dropped in.
 */

/*
 * Scoped to both, deliberately.
 *
 * `.adb-tools` is the <main> of a tool page. `.adb-tools__home` is the card
 * grid dropped into the blog's own home template, which is NOT inside it — so
 * a rule that defined these only on `.adb-tools` left every card on the home
 * page falling back to the hard-coded Studio values and ignoring the reader's
 * chosen style variation.
 */
.adb-tools,
.adb-tools__home {
	--adb-paper: var(--paper, #FAF7F2);
	--adb-deep: var(--paper-deep, #F1EADE);
	--adb-ink: var(--ink, #121212);
	--adb-faded: var(--ink-faded, #57524A);
	--adb-accent: var(--vermillion, #C4260E);
	--adb-wash: var(--vermillion-wash, #F7E2DC);
	--adb-rule: var(--rule, #D6CCBC);
}

/*
 * `hidden` has to mean hidden.
 *
 * The UA stylesheet's `[hidden] { display: none }` is at UA origin, so ANY
 * author rule that sets `display` beats it — and `.adb-tool__work` sets
 * `display: grid`. The markup for a tool page is written correct: the working
 * view, the status line and the result panel all ship with the attribute on.
 * They were all showing anyway, which is why Merge greeted a reader with an
 * empty canvas, a Settings rail holding two dead buttons, and a blank strip
 * under it before they had chosen a single file.
 *
 * The `!important` is the point of the rule, not a shortcut around one.
 */
.adb-tools [hidden],
.adb-tools__home [hidden] {
	display: none !important;
}

/* --- Icons --------------------------------------------------------------- */

.adb-icon {
	flex: none;
	width: 24px;
	height: 24px;
}

/* --- The card grid ------------------------------------------------------- */

.adb-tools__home {
	margin-top: var(--sp-50, 3rem);
}

.adb-tools__group {
	margin-bottom: var(--sp-50, 3rem);
}

/*
 * The same groups, one level down.
 *
 * On the hub each group heading is the top of its own section and carries the
 * theme's 2px rule. On the home page all six sit UNDER "PDF tools", and six
 * headings of equal weight read as six unrelated sections rather than as one
 * toolkit — so here they step down: a hairline, smaller letters, and none of
 * the big top margin that separates real sections of a page.
 */
.adb-tools__home .adb-tools__group {
	margin-bottom: var(--sp-40, 2rem);
}

.adb-tools__home .adb-tools__group .section-head {
	margin-top: var(--sp-40, 2rem);
	border-bottom-width: 1px;
	border-bottom-color: var(--adb-rule, #D6CCBC);
}

.adb-tools__home .adb-tools__group .section-head__title {
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
}

/*
 * The rules are drawn by the cards, not by the grid.
 *
 * This used to be `gap: 1px` over a rule-coloured background — one backdrop
 * painting every dividing line at once, which is a lovely trick right up to
 * the moment a row is not full. Six tools in a five-column grid left four
 * empty tracks, and those tracks painted the backdrop: a solid beige slab the
 * size of four cards sitting under Organise, and another under Optimise.
 *
 * Borders on the cards themselves cannot do that. An absent card draws
 * nothing, so a ragged last row simply stops.
 */
.adb-cards {
	display: grid;
	/*
	 * 190px, not 230. On a 1240px page that is the difference between five
	 * columns and six - and six is the number the catalogue is actually built
	 * from. Every group becomes exactly one row: no second row holding a
	 * single orphaned card, which is what Organise looked like at five.
	 */
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	margin-top: var(--sp-30, 1.25rem);
}

.adb-card {
	display: flex;
	flex-direction: column;
	background: var(--adb-paper, #FAF7F2);
	color: inherit;
	text-decoration: none;
	/*
	 * Each card draws its whole box and then overlaps its neighbour by exactly
	 * that border, so two adjacent edges land on the same pixel and read as one
	 * line. The grid itself draws nothing.
	 *
	 * The version before this put the top and left edges on the container, and
	 * on a row that does not fill its tracks - three tools in a six-column grid
	 * - the container's top edge carried on across the empty slots as a
	 * hairline hanging over nothing. A card that is not there cannot draw a
	 * line, which is the whole point of putting the lines on the cards.
	 */
	border: 1px solid var(--adb-rule, #D6CCBC);
	margin: -1px 0 0 -1px;
	transition: background-color 150ms ease, color 150ms ease;
}

.adb-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.8rem 1rem 0.95rem;
}

/*
 * The drawn plate.
 *
 * A fixed 16:9 band so every card in a row lines up whatever its illustration
 * does inside it, and a hairline under it so the picture reads as a plate on
 * the page rather than as a coloured area behind the words.
 *
 * It was 4:3, which is the drawings' own shape. Twenty-nine of those made a
 * home page nearly seven thousand pixels tall, most of it picture. The band
 * is the shorter shape now and the drawings were left alone — the extra width
 * is wash, added to the viewBox in ADB_Tools_Art::plate().
 */
.adb-plate {
	display: block;
	width: 100%;
	height: auto;
	/* Exactly the plate's own viewBox, so the box reserved before the SVG
	   parses is the box it ends up wanting - no reflow, no letterbox. */
	aspect-ratio: 214 / 120;
	border-bottom: 1px solid var(--adb-rule, #D6CCBC);
}

.adb-card__title {
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
}

.adb-card__blurb {
	font-size: var(--fs-small, 0.8125rem);
	line-height: 1.45;
	color: var(--adb-faded, #57524A);
}

.adb-card:hover,
.adb-card:focus-visible {
	background: var(--adb-ink, #121212);
	color: var(--adb-paper, #FAF7F2);
	outline: none;
}

.adb-card:hover .adb-card__blurb,
.adb-card:focus-visible .adb-card__blurb {
	color: inherit;
}

/* The illustration is drawn in its own palette and stays there — inverting it
   on hover would make 29 carefully distinct pictures flash as one. */
.adb-card:hover .adb-plate,
.adb-card:focus-visible .adb-plate {
	border-bottom-color: var(--adb-ink, #121212);
}

/* --- One tool ------------------------------------------------------------ */

.adb-tool__head {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	align-items: center;
	gap: var(--sp-40, 2rem);
	padding-top: var(--sp-30, 1.25rem);
}

.adb-tool__head h1 {
	margin: 0;
}

.adb-tool__head .adb-plate {
	border: 1px solid var(--adb-rule, #D6CCBC);
}

.adb-tools__crumbs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-top: var(--sp-40, 2rem);
	font-family: var(--sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.adb-tool {
	margin-top: var(--sp-30, 1.25rem);
}

/* --- Dropping a file ----------------------------------------------------- */

.adb-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	padding: var(--sp-50, 3rem) var(--sp-30, 1.25rem);
	border: 2px dashed var(--adb-rule, #D6CCBC);
	background: var(--adb-deep, #F1EADE);
	text-align: center;
	cursor: pointer;
	transition: border-color 150ms ease, background-color 150ms ease;
}

.adb-drop:hover,
.adb-drop:focus-visible,
.adb-drop.is-over {
	border-color: var(--adb-accent, #C4260E);
	background: var(--adb-wash, #F7E2DC);
	outline: none;
}

.adb-drop .adb-icon {
	width: 34px;
	height: 34px;
	color: var(--adb-accent, #C4260E);
}

.adb-drop__title {
	margin: 0;
	font-family: var(--sans);
	font-size: var(--fs-large, 1.25rem);
	font-weight: 700;
}

.adb-drop__hint {
	margin: 0;
}

.adb-drop__input {
	display: none;
}

/* --- The working view ---------------------------------------------------- */

.adb-tool__work {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 1px;
	background: var(--adb-rule, #D6CCBC);
	border: 1px solid var(--adb-rule, #D6CCBC);
}

.adb-tool__canvas {
	min-height: 320px;
	padding: var(--sp-30, 1.25rem);
	background: var(--adb-paper, #FAF7F2);
	overflow: auto;
}

.adb-tool__panel {
	padding: var(--sp-30, 1.25rem);
	background: var(--adb-deep, #F1EADE);
}

.adb-tool__go {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: var(--sp-30, 1.25rem);
	padding-top: var(--sp-20, 0.875rem);
	border-top: 2px solid var(--adb-ink, #121212);
}

.btn--wide {
	width: 100%;
	justify-content: center;
}

/* --- Page thumbnails ----------------------------------------------------- */

.adb-pages {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: var(--sp-20, 0.875rem);
}

.adb-page {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding: 0.5rem;
	background: var(--adb-paper, #FAF7F2);
	border: 1px solid var(--adb-rule, #D6CCBC);
	cursor: pointer;
	transition: border-color 150ms ease, background-color 150ms ease;
}

.adb-page:hover {
	border-color: var(--adb-ink, #121212);
}

.adb-page.is-picked {
	border-color: var(--adb-accent, #C4260E);
	background: var(--adb-wash, #F7E2DC);
}

.adb-page.is-dropped {
	opacity: 0.35;
}

.adb-page canvas,
.adb-page img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--adb-rule, #D6CCBC);
	background: #fff;
	transition: transform 150ms ease;
}

.adb-page__no {
	font-family: var(--mono, monospace);
	font-size: 0.6875rem;
	color: var(--adb-faded, #57524A);
	font-variant-numeric: tabular-nums;
}

.adb-page__tools {
	position: absolute;
	inset-block-start: 0.35rem;
	inset-inline-end: 0.35rem;
	display: flex;
	gap: 2px;
	opacity: 0;
	transition: opacity 150ms ease;
}

.adb-page:hover .adb-page__tools,
.adb-page:focus-within .adb-page__tools {
	opacity: 1;
}

/* Small by design, but still a real target on a phone, where there is no
   hover to reveal them — see the media query at the foot of this file. */
.adb-page__tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--adb-ink, #121212);
	background: var(--adb-paper, #FAF7F2);
	color: var(--adb-ink, #121212);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

.adb-page__tool:hover {
	background: var(--adb-ink, #121212);
	color: var(--adb-paper, #FAF7F2);
}

/* --- A dragged page ------------------------------------------------------ */

.adb-page[draggable="true"] {
	cursor: grab;
}

.adb-page.is-dragging {
	opacity: 0.4;
	cursor: grabbing;
}

.adb-page.is-target {
	border-color: var(--adb-accent, #C4260E);
	box-shadow: inset 3px 0 0 var(--adb-accent, #C4260E);
}

/* --- Files in a list (merge, and anything multi-file) -------------------- */

.adb-files {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--adb-rule, #D6CCBC);
	border: 1px solid var(--adb-rule, #D6CCBC);
}

.adb-file {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--sp-20, 0.875rem);
	padding: 0.7rem var(--sp-20, 0.875rem);
	background: var(--adb-paper, #FAF7F2);
}

.adb-file__grip {
	cursor: grab;
	color: var(--adb-faded, #57524A);
	font-size: 1rem;
	line-height: 1;
	user-select: none;
}

.adb-file__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--sans);
	font-size: 0.9375rem;
	font-weight: 700;
}

.adb-file__meta {
	font-family: var(--mono, monospace);
	font-size: 0.6875rem;
	color: var(--adb-faded, #57524A);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* --- Settings ------------------------------------------------------------ */

.adb-fields {
	display: flex;
	flex-direction: column;
	gap: var(--sp-20, 0.875rem);
	margin-top: var(--sp-20, 0.875rem);
}

.adb-field[hidden] {
	display: none;
}

.adb-field__label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--adb-faded, #57524A);
}

.adb-field__help {
	margin: 0.35rem 0 0;
	line-height: 1.4;
}

.adb-tools input[type="text"],
.adb-tools input[type="number"],
.adb-tools input[type="password"],
.adb-tools input[type="file"],
.adb-tools select,
.adb-tools textarea {
	width: 100%;
	min-height: 44px;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--adb-ink, #121212);
	border-radius: 0;
	background: var(--adb-paper, #FAF7F2);
	color: var(--adb-ink, #121212);
	font-family: var(--sans);
	font-size: 0.9375rem;
}

.adb-tools textarea {
	min-height: 120px;
	font-family: var(--mono, monospace);
	font-size: 0.8125rem;
	line-height: 1.5;
	resize: vertical;
}

.adb-tools input:focus-visible,
.adb-tools select:focus-visible,
.adb-tools textarea:focus-visible {
	outline: 2px solid var(--adb-accent, #C4260E);
	outline-offset: 1px;
}

.adb-check {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	cursor: pointer;
	font-size: 0.9375rem;
}

.adb-check input {
	width: 20px;
	height: 20px;
	flex: none;
	accent-color: var(--adb-accent, #C4260E);
}

.adb-range {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
}

.adb-range input {
	flex: 1;
	min-width: 0;
	accent-color: var(--adb-accent, #C4260E);
}

.adb-range output {
	min-width: 3.5em;
	text-align: right;
	font-family: var(--mono, monospace);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.adb-number {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.adb-number__unit {
	font-family: var(--mono, monospace);
	font-size: 0.75rem;
	color: var(--adb-faded, #57524A);
}

.adb-tools input[type="color"] {
	width: 100%;
	height: 44px;
	padding: 2px;
	border: 1px solid var(--adb-ink, #121212);
	background: var(--adb-paper, #FAF7F2);
	cursor: pointer;
}

/* The nine positions, as the page they describe. */
.adb-pos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	width: 132px;
	aspect-ratio: 1 / 1.24;
	padding: 2px;
	border: 1px solid var(--adb-ink, #121212);
	background: var(--adb-paper, #FAF7F2);
}

.adb-pos__spot {
	border: 1px solid transparent;
	background: var(--adb-deep, #F1EADE);
	cursor: pointer;
	padding: 0;
	transition: background-color 120ms ease;
}

.adb-pos__spot:hover {
	background: var(--adb-rule, #D6CCBC);
}

.adb-pos__spot.is-on {
	background: var(--adb-accent, #C4260E);
}

.adb-pos__spot:focus-visible {
	outline: 2px solid var(--adb-accent, #C4260E);
	outline-offset: 1px;
}

/* --- Progress, results, trouble ----------------------------------------- */

.adb-tool__status {
	display: flex;
	align-items: center;
	gap: var(--sp-20, 0.875rem);
	margin-top: var(--sp-30, 1.25rem);
	padding: var(--sp-30, 1.25rem);
	border: 1px solid var(--adb-rule, #D6CCBC);
	background: var(--adb-deep, #F1EADE);
}

.adb-tool__status p {
	margin: 0;
	font-family: var(--sans);
	font-size: 0.9375rem;
	font-weight: 700;
}

.adb-bar {
	flex: 1;
	height: 6px;
	background: var(--adb-rule, #D6CCBC);
	overflow: hidden;
}

.adb-bar__fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--adb-accent, #C4260E);
	transition: width 200ms ease;
}

.adb-tool__result {
	margin-top: var(--sp-30, 1.25rem);
	padding: var(--sp-40, 2rem) var(--sp-30, 1.25rem);
	border: 2px solid var(--adb-ink, #121212);
	background: var(--adb-paper, #FAF7F2);
	text-align: center;
}

.adb-result__title {
	margin: 0 0 0.35rem;
	font-family: var(--sans);
	font-size: var(--fs-x-large, 1.75rem);
	font-weight: 700;
}

.adb-result__note {
	margin: 0 auto var(--sp-30, 1.25rem);
	max-width: 46ch;
	color: var(--adb-faded, #57524A);
	font-size: var(--fs-small, 0.8125rem);
	line-height: 1.5;
}

.adb-result__files {
	display: flex;
	flex-direction: column;
	gap: 1px;
	max-width: 560px;
	margin: var(--sp-30, 1.25rem) auto 0;
	background: var(--adb-rule, #D6CCBC);
	border: 1px solid var(--adb-rule, #D6CCBC);
	text-align: left;
}

.adb-error {
	margin-top: var(--sp-30, 1.25rem);
	padding: var(--sp-30, 1.25rem);
	border-left: 3px solid var(--adb-accent, #C4260E);
	background: var(--adb-wash, #F7E2DC);
}

.adb-error p {
	margin: 0;
}

.adb-error__what {
	font-family: var(--sans);
	font-weight: 700;
	margin-bottom: 0.25rem !important;
}

.adb-error__why {
	font-size: var(--fs-small, 0.8125rem);
	color: var(--adb-faded, #57524A);
}

.adb-tool__note {
	margin-top: var(--sp-40, 2rem);
	padding: var(--sp-30, 1.25rem);
	border: 1px solid var(--adb-rule, #D6CCBC);
	background: var(--adb-deep, #F1EADE);
}

.adb-tool__note p:last-child {
	margin: 0.4rem 0 0;
	font-size: var(--fs-small, 0.8125rem);
	line-height: 1.6;
	color: var(--adb-faded, #57524A);
}

.adb-tool__note--warn {
	border-left: 3px solid var(--adb-accent, #C4260E);
}

/* --- The drawing surfaces (sign, redact, crop, edit) -------------------- */

.adb-stage {
	position: relative;
	display: inline-block;
	max-width: 100%;
	margin-inline: auto;
}

.adb-stage canvas {
	display: block;
	max-width: 100%;
	height: auto;
	background: #fff;
	border: 1px solid var(--adb-rule, #D6CCBC);
}

.adb-stage__overlay {
	position: absolute;
	inset: 0;
	cursor: crosshair;
}

.adb-mark {
	position: absolute;
	border: 1px solid var(--adb-accent, #C4260E);
	background: rgba(18, 18, 18, 0.82);
}

.adb-mark--crop {
	background: transparent;
	box-shadow: 0 0 0 9999px rgba(18, 18, 18, 0.45);
}

.adb-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: var(--sp-20, 0.875rem);
	padding-bottom: var(--sp-20, 0.875rem);
	border-bottom: 1px solid var(--adb-rule, #D6CCBC);
}

.adb-pad {
	width: 100%;
	height: 160px;
	border: 1px dashed var(--adb-rule, #D6CCBC);
	background: #fff;
	cursor: crosshair;
	touch-action: none;
}

/* --- Comparing two files ------------------------------------------------ */

.adb-diff {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--adb-rule, #D6CCBC);
	border: 1px solid var(--adb-rule, #D6CCBC);
	font-family: var(--mono, monospace);
	font-size: 0.8125rem;
	line-height: 1.55;
}

.adb-diff__line {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	gap: 0.75rem;
	padding: 0.35rem 0.7rem;
	background: var(--adb-paper, #FAF7F2);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.adb-diff__line--add { background: #E7F3E7; }
.adb-diff__line--del { background: var(--adb-wash, #F7E2DC); }

.adb-diff__mark {
	font-weight: 700;
	color: var(--adb-faded, #57524A);
	font-variant-numeric: tabular-nums;
}

.adb-diff__line--add .adb-diff__mark { color: #1B6B2E; }
.adb-diff__line--del .adb-diff__mark { color: var(--adb-accent, #C4260E); }

/* The words that actually moved, inside a line that was edited rather than
   replaced. Underlined as well as shaded, so it reads on a mono screen and in
   print, and for anyone who cannot pick the shading out. */
.adb-diff__word {
	border-radius: 2px;
	padding: 0 0.1em;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.adb-diff__line--add .adb-diff__word { background: #BFE3C2; }
.adb-diff__line--del .adb-diff__word { background: #F0C4B8; }

/* --- Camera -------------------------------------------------------------- */

.adb-camera {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-20, 0.875rem);
}

.adb-camera video {
	width: 100%;
	max-width: 520px;
	background: #000;
	border: 1px solid var(--adb-ink, #121212);
}

/* --- Narrow ------------------------------------------------------------- */

@media (max-width: 860px) {
	.adb-tool__work {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The panel above the canvas on a phone: the settings are the reason the
	   reader is here, and making them scroll past a wall of thumbnails first
	   is the commonest way a tool page feels broken on mobile. */
	.adb-tool__panel {
		order: -1;
	}

	.adb-cards {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}

	.adb-card__body {
		padding: 0.6rem 0.75rem 0.85rem;
	}

	.adb-card__blurb {
		display: none;
	}

	.adb-tool__head {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-20, 0.875rem);
	}

	/* The plate stays, but at a size that leaves room for the tool itself. */
	.adb-tool__head .adb-plate {
		max-width: 200px;
	}

	/* No hover on a touch screen, so the per-page controls are always out. */
	.adb-page__tools {
		opacity: 1;
	}

	.adb-page__tool {
		width: 32px;
		height: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.adb-card,
	.adb-drop,
	.adb-page,
	.adb-page canvas,
	.adb-bar__fill {
		transition: none;
	}
}