/* ConvertAllDoc Tools. Everything is scoped to .cad-wrap so it will not touch your theme. */

.cad-wrap {
	--cad-blue: #2d3ce6;
	--cad-blue-dark: #1a25ad;
	--cad-yellow: #ffd43b;
	--cad-ink: #0e1330;
	--cad-muted: #5c6488;
	--cad-line: #d8ddeb;
	--cad-bg: #f4f6fb;
	--cad-surface: #ffffff;
	--cad-err: #b3261e;
	--cad-ok: #1c7a4b;
	--cad-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--cad-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;

	max-width: 880px;
	margin: 0 auto;
	box-sizing: border-box;
}
.cad-wrap.cad-page { max-width: none; margin: 0; }
.cad-wrap [hidden] { display: none !important; }
.cad-wrap *, .cad-wrap *::before, .cad-wrap *::after { box-sizing: border-box; }

.cad-lead { margin: 0 0 16px; font-size: 1.125rem; }

/* The tool card keeps its own colours so it reads the same on any theme. */
.cad-tool {
	background: var(--cad-bg);
	color: var(--cad-ink);
	border: 1px solid var(--cad-line);
	border-radius: 8px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	line-height: 1.5;
}
.cad-tool p { margin: 0; }
.cad-mono { font-family: var(--cad-mono); font-size: 0.8125rem; }
.cad-muted { color: var(--cad-muted); }
.cad-sr { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cad-tool [hidden] { display: none !important; }

/* Drop zone */
.cad-drop {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 22px 18px;
	background: var(--cad-surface);
	border: 2px dashed var(--cad-line);
	border-radius: 6px;
	cursor: pointer;
	transition: border-color 0.15s;
}
.cad-drop:hover, .cad-drop.is-over, .cad-drop:focus-within { border-color: var(--cad-blue); }
.cad-drop:focus-within { outline: 2px solid var(--cad-blue); outline-offset: 2px; }
.cad-drop-title { font-size: 1.125rem; overflow-wrap: anywhere; }
.cad-drop-hint { color: var(--cad-muted); font-size: 0.875rem; overflow-wrap: anywhere; }

/* Panels and fields */
.cad-panel {
	background: var(--cad-surface);
	border: 1px solid var(--cad-line);
	border-radius: 6px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.cad-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cad-label {
	font-family: var(--cad-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cad-muted);
}
.cad-hint { color: var(--cad-muted); font-size: 0.8125rem; }
.cad-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.cad-input {
	font: inherit;
	color: var(--cad-ink);
	background: var(--cad-bg);
	border: 1px solid var(--cad-line);
	border-radius: 4px;
	padding: 10px 12px;
	width: 100%;
	min-width: 0;
}
.cad-input:focus-visible { outline: 2px solid var(--cad-blue); outline-offset: 1px; }

/* Resolution tiles */
.cad-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.cad-seg label {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	background: var(--cad-bg);
	border: 1px solid var(--cad-line);
	border-radius: 4px;
	cursor: pointer;
}
.cad-seg input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.cad-seg b { font-family: var(--cad-mono); font-weight: 500; }
.cad-seg span { font-size: 0.75rem; color: var(--cad-muted); }
.cad-seg label:has(input:checked) {
	background: var(--cad-surface);
	border-color: var(--cad-blue);
	box-shadow: inset 0 0 0 1px var(--cad-blue);
}
.cad-seg label:has(input:focus-visible) { outline: 2px solid var(--cad-blue); outline-offset: 2px; }

/* Buttons */
.cad-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cad-btn {
	font: inherit;
	font-weight: 600;
	color: var(--cad-ink);
	background: var(--cad-surface);
	border: 1px solid var(--cad-line);
	border-radius: 4px;
	padding: 11px 18px;
	min-height: 44px;
	cursor: pointer;
}
.cad-btn-primary { background: var(--cad-blue); border-color: var(--cad-blue); color: #fff; }
.cad-btn-primary:hover:not(:disabled) { background: var(--cad-blue-dark); }
.cad-btn-small { padding: 8px 12px; font-size: 0.875rem; min-height: 40px; }
.cad-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.cad-btn:focus-visible { outline: 2px solid var(--cad-blue); outline-offset: 2px; }

/* Progress and status */
.cad-bar { height: 6px; background: var(--cad-line); border-radius: 3px; overflow: hidden; }
.cad-bar > i { display: block; height: 100%; width: 0; background: var(--cad-blue); transition: width 0.15s; }
.cad-status { min-height: 1.4em; color: var(--cad-muted); overflow-wrap: anywhere; }
.cad-status.is-err { color: var(--cad-err); }
.cad-status.is-ok { color: var(--cad-ok); }
.cad-noscript { color: var(--cad-err); }

/* Merge list */
.cad-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cad-file {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 10px 12px;
	background: var(--cad-bg);
	border: 1px solid var(--cad-line);
	border-radius: 4px;
}
.cad-file-n {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	background: var(--cad-yellow);
	color: var(--cad-ink);
	border-radius: 4px;
	font-weight: 500;
}
.cad-file-info { display: flex; flex-direction: column; min-width: 0; }
.cad-file-info strong { overflow-wrap: anywhere; }
.cad-file-info span { color: var(--cad-muted); }
.cad-file-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
@media (max-width: 520px) {
	.cad-file { grid-template-columns: auto minmax(0, 1fr); }
	.cad-file-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Result block (merge, page numbers) */
.cad-result {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 12px;
	background: var(--cad-bg);
	border: 1px solid var(--cad-line);
	border-radius: 4px;
}

/* PDF to PNG results */
.cad-results { display: flex; flex-direction: column; gap: 14px; }
.cad-results-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.cad-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.cad-proof { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cad-sheet {
	background: #fff;
	border: 1px solid var(--cad-line);
	border-radius: 2px;
	padding: 6px;
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.cad-sheet img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.cad-proof .cad-mono { overflow-wrap: anywhere; }

/* Content under the tool */
.cad-content { margin-top: 28px; }
.cad-content h2 { margin: 28px 0 10px; }
.cad-steps { padding-left: 1.25em; }
.cad-steps li { margin-bottom: 6px; }
.cad-faq h3 { margin: 18px 0 4px; font-size: 1.0625rem; }
.cad-faq p { margin: 0; }
.cad-related { padding-left: 1.25em; }

/* Page layout */
.cad-container { max-width: 1120px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
@media (max-width: 600px) { .cad-container { padding-left: 20px; padding-right: 20px; } }

.cad-hero { background: var(--cad-bg); border-bottom: 1px solid var(--cad-line); }
.cad-hero > .cad-container { padding-top: 32px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 16px; }
.cad-hero h1 {
	margin: 0; max-width: 800px; font-family: var(--cad-display); font-weight: 700;
	font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; color: var(--cad-ink);
}
.cad-hero-lead { margin: 0; max-width: 620px; font-size: 1.25rem; color: var(--cad-muted); }
.cad-hero-home > .cad-container { padding-top: 72px; padding-bottom: 64px; gap: 24px; }
.cad-hero-home h1 { font-size: clamp(2.25rem, 7vw, 3.75rem); line-height: 1.02; }
.cad-hero-home .cad-hero-lead { max-width: 560px; }
.cad-crumbs { font-family: var(--cad-mono); font-size: 0.75rem; color: var(--cad-muted); }
.cad-crumbs a { color: var(--cad-muted); }
.cad-crumbs a:hover { color: var(--cad-blue); }
.cad-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cad-pills li { padding: 6px 12px; background: #fff; border: 1px solid var(--cad-line); border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: var(--cad-ink); }

.cad-search { display: flex; flex-wrap: wrap; gap: 10px; max-width: 560px; }
.cad-search input {
	flex: 1 1 260px; min-width: 0; min-height: 52px; padding: 0 16px; font: inherit; font-size: 1rem;
	color: var(--cad-ink); background: #fff; border: 1px solid var(--cad-line); border-radius: 6px;
}
.cad-search button {
	min-height: 52px; padding: 0 24px; font: inherit; font-weight: 600; color: #fff;
	background: var(--cad-blue); border: 1px solid var(--cad-blue); border-radius: 6px; cursor: pointer;
}
.cad-search button:hover { background: var(--cad-blue-dark); }

.cad-layout { display: flex; flex-wrap: wrap; gap: 40px; padding-top: 40px; padding-bottom: 56px; }
.cad-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.cad-aside { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 20px; align-self: flex-start; }
.cad-aside-card { background: #fff; border: 1px solid var(--cad-line); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--cad-ink); }
.cad-aside-card strong { margin-bottom: 6px; font-family: var(--cad-display); font-size: 1.25rem; letter-spacing: -0.02em; }
.cad-aside-note { background: var(--cad-bg); }
.cad-aside-note span { font-size: 0.9375rem; color: var(--cad-muted); }
.cad-related { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cad-related a { font-weight: 500; text-decoration: none; }
.cad-related a:hover { text-decoration: underline; }

/* Text under the tool */
.cad-content { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.cad-content > p { margin: 0; max-width: 680px; font-size: 1.0625rem; }
.cad-content h2 { margin: 16px 0 0; font-family: var(--cad-display); font-size: 1.75rem; letter-spacing: -0.025em; line-height: 1.15; }
.cad-steps { margin: 0; padding-left: 22px; max-width: 680px; display: flex; flex-direction: column; gap: 8px; font-size: 1.0625rem; }
.cad-steps li { margin: 0; }
.cad-faq { display: flex; flex-direction: column; gap: 20px; max-width: 680px; }
.cad-faq-item { display: flex; flex-direction: column; gap: 4px; }
.cad-faq h3 { margin: 0; font-family: var(--cad-display); font-size: 1.1875rem; letter-spacing: -0.015em; }
.cad-faq p { margin: 0; }

/* Catalogue */
.cad-groups { padding-top: 56px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 40px; }
.cad-group h2 { margin: 0 0 24px; font-family: var(--cad-display); font-size: 2rem; letter-spacing: -0.025em; }
.cad-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.cad-card a {
	display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 20px;
	background: #fff; color: var(--cad-ink); border: 1px solid var(--cad-line); border-radius: 8px; text-decoration: none;
}
.cad-card a:hover, .cad-card a:focus-visible { border-color: var(--cad-blue); box-shadow: inset 0 0 0 1px var(--cad-blue); }
.cad-chip {
	align-self: flex-start; padding: 4px 8px; background: var(--cad-yellow); color: var(--cad-ink); border-radius: 4px;
	font-family: var(--cad-mono); font-size: 0.75rem; font-weight: 500;
}
.cad-card strong { font-family: var(--cad-display); font-size: 1.25rem; letter-spacing: -0.02em; }
.cad-card span:last-child { font-size: 0.9375rem; color: var(--cad-muted); }
.cad-empty { margin: 0; font-size: 1.0625rem; color: var(--cad-muted); }

/* Privacy band */
.cad-band { background: var(--cad-ink); color: #fff; margin-top: 24px; }
.cad-band-inner { padding-top: 64px; padding-bottom: 64px; display: flex; flex-wrap: wrap; gap: 40px; }
.cad-band h2 { flex: 1 1 320px; margin: 0; font-family: var(--cad-display); font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; color: #fff; }
.cad-band-cols { flex: 2 1 480px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; }
.cad-band-cols div { display: flex; flex-direction: column; gap: 6px; }
.cad-band-cols strong { font-size: 1.125rem; }
.cad-band-cols span { color: #b9c0e3; font-size: 0.9375rem; }

@media (prefers-reduced-motion: reduce) {
	.cad-wrap * { transition: none !important; }
}