/*
 * Printable HACCP templates (A4). These HTML files are the versioned sources of the PDFs in this
 * folder: run `npm run templates:pdf` in apps/website after editing them.
 */
@page {
	size: A4;
	margin: 11mm 11mm 12mm;
}

@page landscape {
	size: A4 landscape;
	margin: 10mm 11mm 11mm;
}

:root {
	--ink: #0f1012;
	--ink-soft: #3e4449;
	--muted: #646b71;
	--line: #b9c2ca;
	--line-strong: #0a2540;
	--brand: #236ded;
	--brand-soft: #e8f1fe;
	--brand-dark: #0a2540;
	--example: #59606a;
	font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
	color: var(--ink);
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	background: #ffffff;
}

body {
	font-size: 9pt;
	line-height: 1.35;
}

.screen-note {
	max-width: 60rem;
	margin: 1rem auto;
	padding: 0.75rem 1rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--brand-soft);
	font-size: 11pt;
}

.screen-note a {
	color: var(--brand);
	font-weight: 600;
}

.screen-note button {
	margin-left: 0.5rem;
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--brand);
	border-radius: 6px;
	background: var(--brand);
	color: #ffffff;
	font: inherit;
	cursor: pointer;
}

@media print {
	.screen-note {
		display: none;
	}
}

@media screen {
	body {
		background: #eef1f4;
		padding-bottom: 2rem;
	}

	.sheet {
		width: 210mm;
		min-height: 297mm;
		margin: 1rem auto;
		padding: 11mm;
		background: #ffffff;
		box-shadow: 0 6px 24px rgba(10, 37, 64, 0.14);
	}

	.sheet--landscape {
		width: 297mm;
		min-height: 210mm;
	}
}

.sheet {
	display: flex;
	flex-direction: column;
	gap: 3.2mm;
	break-after: page;
}

.sheet:last-of-type {
	break-after: auto;
}

.sheet--landscape {
	page: landscape;
}

.sheet-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 6mm;
	padding-bottom: 2.4mm;
	border-bottom: 1.6pt solid var(--brand-dark);
}

.sheet-header img {
	width: 30mm;
	height: auto;
}

.sheet-header__title {
	text-align: right;
}

.sheet-header__title p {
	margin: 0;
	color: var(--muted);
	font-size: 7.5pt;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

h1,
h2,
h3 {
	margin: 0;
	font-family: 'Sora', 'Inter', 'Helvetica Neue', Arial, sans-serif;
	color: var(--brand-dark);
	letter-spacing: -0.01em;
}

h1 {
	font-size: 15pt;
	line-height: 1.15;
}

h2 {
	padding: 1.2mm 2.4mm;
	border-radius: 1.4mm;
	background: var(--brand-dark);
	color: #ffffff;
	font-size: 10.5pt;
}

h3 {
	font-size: 9.5pt;
}

p {
	margin: 0;
}

.lead {
	color: var(--ink-soft);
	font-size: 8.6pt;
}

.fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.2mm 6mm;
}

.fields--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field {
	display: flex;
	align-items: flex-end;
	gap: 2mm;
	min-height: 6.5mm;
	font-size: 8.4pt;
	font-weight: 600;
	white-space: nowrap;
}

.field::after {
	content: '';
	flex: 1;
	border-bottom: 0.7pt solid var(--ink-soft);
	transform: translateY(-0.8mm);
}

.field--full {
	grid-column: 1 / -1;
}

.choices {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2mm 4mm;
	font-size: 8.4pt;
}

.box {
	display: inline-block;
	width: 3mm;
	height: 3mm;
	margin-right: 1mm;
	border: 0.8pt solid var(--ink-soft);
	border-radius: 0.5mm;
	vertical-align: -0.4mm;
}

table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 8pt;
}

th,
td {
	padding: 0.9mm 1.4mm;
	border: 0.6pt solid var(--line);
	text-align: left;
	vertical-align: top;
}

thead th {
	border-color: var(--brand-dark);
	background: var(--brand-dark);
	color: #ffffff;
	font-size: 7.4pt;
	font-weight: 700;
	line-height: 1.2;
	vertical-align: middle;
}

thead tr.subhead th {
	background: var(--brand-soft);
	color: var(--brand-dark);
	border-color: var(--line);
	text-align: center;
}

tbody th {
	background: #f4f6f8;
	font-weight: 700;
}

.grid-rows td,
.grid-rows th {
	height: 6.3mm;
}

.grid-rows--tall td,
.grid-rows--tall th {
	height: 9mm;
}

.grid-rows--xtall td,
.grid-rows--xtall th {
	height: 13mm;
}

.center {
	text-align: center;
}

tr.example td,
tr.example th {
	color: var(--example);
	font-style: italic;
	background: #fafbfc;
}

.tag {
	display: inline-block;
	margin-right: 1mm;
	padding: 0 1.2mm;
	border-radius: 1mm;
	background: var(--brand-soft);
	color: var(--brand);
	font-size: 6.6pt;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 5mm;
}

.panel {
	padding: 2.6mm 3mm;
	border: 0.7pt solid var(--line);
	border-left: 2.4pt solid var(--brand);
	border-radius: 1.4mm;
	background: #fbfcfe;
}

.panel h3 {
	margin-bottom: 1.4mm;
}

.panel ul,
.panel ol {
	margin: 0;
	padding-left: 4.4mm;
}

.panel li + li {
	margin-top: 0.8mm;
}

.notes {
	min-height: 18mm;
	border: 0.6pt solid var(--line);
	border-radius: 1mm;
	padding: 1.4mm 2mm;
	color: var(--muted);
	font-size: 7.6pt;
}

.flow {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6mm;
	align-items: center;
	font-size: 7.8pt;
}

.flow span {
	padding: 1mm 2mm;
	border: 0.7pt solid var(--brand);
	border-radius: 1mm;
	background: var(--brand-soft);
	color: var(--brand-dark);
	font-weight: 600;
}

.flow b {
	color: var(--brand);
}

.sheet-footer {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	gap: 6mm;
	padding-top: 1.8mm;
	border-top: 0.6pt solid var(--line);
	color: var(--muted);
	font-size: 6.8pt;
}

.sheet-footer strong {
	color: var(--brand-dark);
}

.small {
	font-size: 7.2pt;
	color: var(--muted);
}

.toc {
	margin: 0;
	padding-left: 5mm;
	font-size: 9pt;
	line-height: 1.6;
}

/* Templates added on 2026-10-24: allergen table, recipe sheet, pest control plan, goods reception. */
.fields--1 {
	grid-template-columns: minmax(0, 1fr);
}

.field em {
	color: var(--example);
	font-style: italic;
	font-weight: 500;
}

.choices--grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1mm 3mm;
}

.box--checked {
	background: var(--brand-dark);
	border-color: var(--brand-dark);
}

.checklist {
	display: grid;
	gap: 1.3mm;
	font-size: 8pt;
}

h3.spaced {
	margin-top: 2.4mm;
}

.notes--tall {
	min-height: 52mm;
}

.allergen-grid thead th {
	padding: 0.9mm 0.6mm;
}

.allergen-grid .th-vertical {
	height: 27mm;
	text-align: center;
	vertical-align: bottom;
}

.allergen-grid .th-vertical span {
	display: inline-block;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
}

.allergen-grid td.center {
	font-weight: 700;
}

.poster h1 {
	font-size: 19pt;
}

.poster__intro {
	font-size: 12pt;
	line-height: 1.45;
}

.poster__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.6mm 7mm;
	margin: 2mm 0;
	padding-left: 10mm;
	font-family: 'Sora', 'Inter', 'Helvetica Neue', Arial, sans-serif;
	font-size: 12.5pt;
	font-weight: 600;
	color: var(--brand-dark);
}

.poster__list li::marker {
	color: var(--brand);
	font-weight: 700;
}

.poster__box {
	display: grid;
	gap: 3mm;
	padding: 4mm 5mm;
	border: 1.2pt solid var(--brand-dark);
	border-radius: 2mm;
	background: var(--brand-soft);
	font-size: 11pt;
}

.poster__box .choices {
	font-size: 10.5pt;
	gap: 2mm 6mm;
}

.poster__box .field {
	font-size: 10.5pt;
}

@media print {
	.poster {
		min-height: 270mm;
	}
}

.poster {
	gap: 6mm;
}

.poster h1 {
	font-size: 22pt;
}

.poster__intro {
	font-size: 13pt;
}

.poster__list {
	gap: 5mm 8mm;
	margin: 4mm 0;
	font-size: 15pt;
}