/* ==========================================================================
   Scanluma — PDF report
   Self-contained: no dependency on app.css. A4 portrait.
   Fonts are self-hosted in app/assets/fonts/pdf and embedded as @font-face
   rules by Exporters::ReportPdfExporter.
   ========================================================================== */

:root {
	--font-display: 'Space Grotesk', sans-serif;
	--font-body: 'Manrope', sans-serif;
	--font-mono: 'IBM Plex Mono', monospace;

	--surface-1: #ffffff;
	--surface-2: #f4f4f1;
	--border-subtle: rgba(15, 17, 21, 0.08);
	--border-medium: rgba(15, 17, 21, 0.14);
	--fg-heading: #0f1115;
	--fg-primary: #12151a;
	--fg-body: #565f6b;
	--fg-muted: #6b7280;
	--accent: #3358f4;
	--accent-tint: rgba(51, 88, 244, 0.08);
	--success: #15803d;
	--code-bg: #0f1115;
	--code-fg: #e6e8ec;

	--sev-critical: oklch(38% 0.17 38);
	--sev-critical-tint: oklch(38% 0.17 38 / 0.12);
	--sev-serious: oklch(50% 0.18 45);
	--sev-serious-tint: oklch(50% 0.18 45 / 0.12);
	--sev-moderate: oklch(66% 0.19 62);
	--sev-moderate-tint: oklch(66% 0.19 62 / 0.16);
	--sev-minor: oklch(78% 0.15 78);
	--sev-minor-tint: oklch(78% 0.15 78 / 0.18);
}

@page {
	size: A4;
	margin: 18mm 16mm 18mm;
	@top-left {
		content: "Scanluma · Accessibility report";
		font-family: 'IBM Plex Mono', monospace;
		font-size: 7.5pt;
		letter-spacing: 0.06em;
		color: #6b7280;
		vertical-align: bottom;
		padding-bottom: 4mm;
	}
	@top-right {
		content: string(report-url);
		font-family: 'IBM Plex Mono', monospace;
		font-size: 7.5pt;
		color: #6b7280;
		vertical-align: bottom;
		padding-bottom: 4mm;
	}
	@bottom-right {
		content: counter(page) " / " counter(pages);
		font-family: 'IBM Plex Mono', monospace;
		font-size: 7.5pt;
		color: #6b7280;
		vertical-align: top;
		padding-top: 4mm;
	}
}
@page :first {
	@top-left { content: none; }
	@top-right { content: none; }
}

* { box-sizing: border-box; }

html {
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

body.pdf {
	margin: 0;
	background: var(--surface-1);
	color: var(--fg-primary);
	font-family: var(--font-body);
	font-size: 9.5pt;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* On screen, preview as a sheet */
@media screen {
	html { background: var(--surface-2); }
	body.pdf {
		max-width: 210mm;
		margin: 24px auto;
		padding: 18mm 16mm;
		box-shadow: 0 1px 3px rgba(15, 17, 21, 0.08);
	}
}

:where(.pdf) :where(h1, h2, h3, p, ul, pre) { margin: 0; }

.pdf-mono { font-family: var(--font-mono); }

/* ---- Brand bar ---- */
.pdf-brand {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 6mm;
	border-bottom: 1px solid var(--border-subtle);
}
.pdf-logo {
	display: flex;
	align-items: center;
	gap: 8px;
}
.pdf-logo-word {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 13pt;
	letter-spacing: -0.02em;
	color: var(--fg-heading);
}
.pdf-brand-meta {
	font-family: var(--font-mono);
	font-size: 7.5pt;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-muted);
}

/* ---- Hero ---- */
.pdf-hero {
	position: relative;
	margin-top: 8mm;
	padding: 8mm 8mm 7mm;
	border: 1px solid var(--border-subtle);
	border-radius: 10px;
	overflow: hidden;
	isolation: isolate;
	background: var(--surface-1);
}
/* Glow + 28px grid drawn as inline SVG (.pdf-hero-bg) instead of tiled CSS
   gradients: Chrome prints those as PDF patterns, which macOS Preview/Quartz
   renders with oversized squares and without the glow. */
.pdf-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.pdf-hero-bg-glow-start { stop-color: #eff2fe; } /* --accent-tint pre-mixed onto white */
.pdf-hero-bg-glow-end { stop-color: var(--surface-1); }
.pdf-hero-bg-grid {
	fill: none;
	stroke: #0f1115;
	stroke-opacity: 0.035;
	stroke-width: 1;
}
.pdf-hero-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 7mm;
}
.pdf-hero-scanned {
	flex-shrink: 0;
	text-align: right;
}

/* Device scores (desktop / mobile) */
.pdf-devices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4mm;
	margin-top: 7mm;
}
.pdf-device {
	display: flex;
	align-items: center;
	gap: 5mm;
	padding: 4mm;
	border: 1px solid var(--border-subtle);
	border-radius: 8px;
	background: var(--surface-1);
}
.pdf-device-body {
	flex: 1;
	min-width: 0;
}
.pdf-device-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 11pt;
	color: var(--fg-heading);
}
.pdf-device-stats {
	margin: 2mm 0 0;
	display: grid;
	gap: 1.2mm;
}
.pdf-device-stats > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 3mm;
	padding-top: 1.2mm;
	border-top: 1px solid var(--border-subtle);
}
.pdf-device-stats .pdf-meta-value {
	margin: 0;
	font-size: 9.5pt;
	white-space: nowrap;
}
.pdf-eyebrow {
	font-family: var(--font-mono);
	font-size: 7.5pt;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}
.pdf-url {
	margin-top: 2mm;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 17pt;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--fg-heading);
	overflow-wrap: anywhere;
	string-set: report-url content();
}

/* Score ring */
.pdf-score {
	position: relative;
	flex-shrink: 0;
	width: 88px;
	height: 88px;
}
.pdf-score svg {
	display: block;
	transform: rotate(-90deg);
}
.pdf-score-track {
	fill: none;
	stroke: var(--surface-2);
	stroke-width: 7;
}
.pdf-score-value {
	fill: none;
	stroke: var(--sev-serious);
	stroke-width: 7;
	stroke-linecap: round;
}
.pdf-score--good .pdf-score-value { stroke: var(--success); }
.pdf-score--warn .pdf-score-value { stroke: var(--sev-moderate); }
.pdf-score--critical .pdf-score-value { stroke: var(--sev-critical); }
.pdf-score-inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.pdf-score-number {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 20pt;
	line-height: 1;
	color: var(--fg-heading);
}
.pdf-score-label {
	margin-top: 2px;
	font-family: var(--font-mono);
	font-size: 6.5pt;
	letter-spacing: 0.1em;
	color: var(--fg-muted);
}

/* Meta grid */
.pdf-meta {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 7mm;
	border-top: 1px solid var(--border-subtle);
	padding-top: 5mm;
	gap: 4mm;
}
.pdf-meta-label {
	font-family: var(--font-mono);
	font-size: 6.5pt;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-muted);
}
.pdf-meta-value {
	margin-top: 1mm;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 10.5pt;
	color: var(--fg-heading);
}

/* ---- Intro ---- */
.pdf-intro {
	margin-top: 8mm;
	font-size: 10pt;
	line-height: 1.65;
	color: var(--fg-body);
	text-wrap: pretty;
}

/* ---- Section titles ---- */
.pdf-section { margin-top: 10mm; }
.pdf-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-bottom: 3mm;
	margin-bottom: 4mm;
	border-bottom: 1px solid var(--border-subtle);
	break-after: avoid;
}
.pdf-section-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14pt;
	letter-spacing: -0.02em;
	color: var(--fg-heading);
}
.pdf-section-count {
	font-family: var(--font-mono);
	font-size: 8pt;
	color: var(--fg-muted);
}
.pdf-violations {
	page-break-before: always;
	break-before: page;
	margin-top: 0;
}
@media screen {
	.pdf-violations {
		margin: 18mm -16mm 0;
		padding: 18mm 16mm 0;
		border-top: 12px solid var(--surface-2);
	}
}

/* ---- Severity chips (summary) ---- */
.pdf-summary-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 5mm 0 2.5mm;
	break-after: avoid;
}
.pdf-section-head + .pdf-summary-head { margin-top: 0; }
.pdf-summary-device {
	font-family: var(--font-mono);
	font-size: 7.5pt;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}
.pdf-summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3mm;
}
.pdf-chip {
	--sev: var(--fg-muted);
	--sev-tint: var(--surface-2);
	display: flex;
	align-items: center;
	gap: 2.5mm;
	padding: 3mm;
	border-radius: 8px;
	background: color-mix(in oklch, var(--sev-tint) 55%, var(--surface-1));
}
.pdf-chip--critical { --sev: var(--sev-critical); --sev-tint: var(--sev-critical-tint); }
.pdf-chip--serious { --sev: var(--sev-serious); --sev-tint: var(--sev-serious-tint); }
.pdf-chip--moderate { --sev: var(--sev-moderate); --sev-tint: var(--sev-moderate-tint); }
.pdf-chip--minor { --sev: color-mix(in oklch, var(--sev-minor) 70%, var(--fg-heading)); --sev-tint: var(--sev-minor-tint); }
.pdf-chip-count {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--sev-tint);
	color: var(--sev);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 11pt;
}
.pdf-chip-label {
	font-family: var(--font-mono);
	font-size: 7pt;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sev);
}
.pdf-chip-sub {
	font-size: 8pt;
	color: var(--fg-muted);
	white-space: nowrap;
}

/* ---- Violation ---- */
.pdf-violation {
	margin-top: 8mm;
}
.pdf-section-head + .pdf-violation { margin-top: 0; }
.pdf-violation + .pdf-violation {
	padding-top: 8mm;
	border-top: 1px dashed var(--border-medium);
}
.pdf-violation-head {
	display: flex;
	align-items: center;
	gap: 4mm;
	padding: 4mm;
	border: 1px solid var(--border-subtle);
	border-radius: 8px;
	background: var(--surface-1);
	break-inside: avoid;
	break-after: avoid;
}
.pdf-violation-head .pdf-chip {
	flex-shrink: 0;
	width: 40mm;
	padding: 2.5mm 3mm;
}
.pdf-violation-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 12pt;
	letter-spacing: -0.01em;
	color: var(--fg-heading);
}
.pdf-violation-desc {
	margin-top: 0.5mm;
	font-size: 8.5pt;
	color: var(--fg-body);
}

/* ---- Affected elements ---- */
.pdf-nodes {
	margin-top: 3mm;
	padding-left: 4mm;
	border-left: 1px solid var(--border-medium);
	margin-left: 4mm;
}
.pdf-node {
	padding: 3.5mm 0;
	border-bottom: 1px solid var(--border-subtle);
	break-inside: avoid;
}
.pdf-node:last-child { border-bottom: none; }
.pdf-nodes-more {
	padding: 3mm 0 1mm;
	font-family: var(--font-mono);
	font-size: 7.5pt;
	color: var(--fg-muted);
}
.pdf-node-selector {
	font-family: var(--font-mono);
	font-size: 8pt;
	font-weight: 600;
	color: var(--fg-heading);
	overflow-wrap: anywhere;
}
.pdf-node-code {
	margin-top: 2mm;
	padding: 2.5mm 3mm;
	border-radius: 6px;
	background: var(--code-bg);
	color: var(--code-fg);
	font-family: var(--font-mono);
	font-size: 7.5pt;
	line-height: 1.55;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.pdf-node-fix { margin-top: 2.5mm; }
.pdf-node-fix + .pdf-node-fix { margin-top: 2mm; }
.pdf-node-fix-label {
	font-size: 8pt;
	font-weight: 700;
	color: var(--fg-heading);
}
.pdf-node-fix--none .pdf-node-fix-label { color: var(--sev-serious); }
.pdf-node-fix-list {
	margin-top: 1mm;
	padding-left: 4mm;
	font-size: 8.5pt;
	color: var(--fg-body);
}
.pdf-node-fix-list li { margin-top: 0.5mm; }
.pdf-node-fix-list li::marker { color: var(--fg-muted); }