/*
 * Typing Practice Pro - print stylesheet.
 *
 * Loaded with media="print". This is what a visitor actually walks away with,
 * so the certificate and the practice plan are designed as documents rather
 * than as web pages that happen to be printable.
 *
 * Two named pages are declared so the certificate prints landscape and the
 * plan prints portrait from the same stylesheet. Browsers without named-page
 * support fall back to portrait, which both layouts still fit.
 */

@page {
	size: A4 portrait;
	margin: 14mm;
}

@page certificate {
	size: A4 landscape;
	margin: 0;
}

@page plan {
	size: A4 portrait;
	margin: 14mm 14mm 18mm;
}

/* Brand fills must survive the printer. */
* {
	print-color-adjust: exact !important;
	-webkit-print-color-adjust: exact !important;
}

body {
	background: #fff !important;
	color: #0f172a !important;
	font-size: 10.5pt;
	line-height: 1.45;
}

/* Everything interactive or navigational is furniture, not document. */
.tpp-header,
.tpp-footer,
.tpp-nav,
.tpp-breadcrumbs,
.tpp-sidebar,
.tpp-widget-area,
.tpp-toolbar,
.tpp-controls,
.tpp-drawer,
.tpp-keyboard-wrap,
.tpp-capture,
.tpp-overlay,
.tpp-legend,
.tpp-progress,
.tpp-result-actions,
.tpp-dashboard-tabs,
.tpp-history-controls,
.tpp-library-filters,
.tpp-pagination,
.tpp-share,
.tpp-post-nav,
.tpp-lesson-nav,
.tpp-cta,
.tpp-mobile-note,
.tpp-notice,
.comments-area,
.skip-link,
.tpp-btn,
button,
form,
.tpp-plan-actions,
.tpp-entry-header,
.tpp-checklist + .tpp-button-row {
	display: none !important;
}

/* ==========================================================================
   Certificate
   ========================================================================== */

.tpp-certificate {
	page: certificate;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	overflow: visible !important;
}

.tpp-cert {
	/* Fills the landscape sheet edge to edge, with its own inner margin. */
	width: 100%;
	max-width: none;
	min-height: 186mm;
	margin: 0;
	padding: 16mm 20mm 12mm;
	border: 0;
	border-top: 8mm solid var(--tpp-primary, #2563eb);
	border-radius: 0;
	box-shadow: none;
	page-break-inside: avoid;
	break-inside: avoid;

	/* A hairline frame inset from the paper edge reads as a certificate
	   without the ornate Victorian border every template reaches for. */
	outline: 1px solid #cbd5e1;
	outline-offset: -8mm;
}

.tpp-cert-corner {
	width: 12mm;
	height: 12mm;
	border-width: 1.5pt;
}

.tpp-cert-corner-tl { top: 12mm; left: 12mm; }
.tpp-cert-corner-br { right: 12mm; bottom: 12mm; }

.tpp-cert-site {
	font-size: 8pt;
	letter-spacing: 0.3em;
}

.tpp-cert-title {
	font-size: 26pt;
	margin-bottom: 0;
}

.tpp-cert-flourish {
	width: 22mm;
	height: 2pt;
	margin-top: 4mm;
}

.tpp-cert-presented,
.tpp-cert-statement { font-size: 10pt; }

.tpp-cert-name {
	font-size: 30pt;
	margin: 6mm auto 5mm;
	padding-bottom: 3mm;
	border-bottom-width: 1.5pt;
}

.tpp-cert-keys {
	gap: 8mm;
	margin: 8mm 0 6mm;
}

.tpp-cert-key {
	min-width: 34mm;
	padding: 5mm 4mm;
	border: 0.75pt solid #cbd5e1;
	border-bottom: 2.5mm solid var(--tpp-primary, #2563eb);
	border-radius: 3mm;
	background: #f8fafc !important;
}

.tpp-cert-key b { font-size: 22pt; }
.tpp-cert-key span { font-size: 6.5pt; }

.tpp-cert-foot {
	margin-top: 8mm;
	gap: 10mm;
}

.tpp-cert-value { font-size: 9.5pt; }
.tpp-cert-caption { font-size: 6.5pt; }

.tpp-cert-seal-key {
	width: 16mm;
	height: 16mm;
	border-radius: 3.5mm;
	background: var(--tpp-primary, #2563eb) !important;
	box-shadow: none;
	border-bottom: 1.5mm solid rgba(0, 0, 0, 0.22);
}

.tpp-cert-seal-mark { font-size: 16pt; }

.tpp-cert-verify {
	margin-top: 7mm;
	padding-top: 4mm;
	gap: 3mm 14mm;
}

.tpp-cert-verify span { font-size: 5.5pt; }
.tpp-cert-verify code { font-size: 8pt; }

.tpp-cert-disclaimer {
	margin-top: 5mm;
	font-size: 6pt;
	line-height: 1.4;
}

/* Nothing else belongs on a certificate page. */
.tpp-certificates > *:not(.tpp-certificate),
.tpp-certificates .tpp-table-wrap,
.tpp-certificates .tpp-field {
	display: none !important;
}

/* ==========================================================================
   Practice plan
   ========================================================================== */

[data-practice-plan-output] {
	page: plan;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

/* Printed letterhead, hidden on screen. */
.tpp-plan-printhead {
	display: block !important;
	margin-bottom: 6mm;
	padding-bottom: 4mm;
	border-bottom: 2pt solid var(--tpp-primary, #2563eb);
}

.tpp-plan-printhead .tpp-plan-brand {
	font-size: 8pt;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.24em;
	color: #64748b;
}

.tpp-plan-printhead .tpp-plan-doc {
	margin: 2mm 0 0;
	font-size: 18pt;
	font-weight: 700;
}

.tpp-plan-printhead .tpp-plan-issued {
	margin: 1mm 0 0;
	font-size: 8pt;
	color: #64748b;
}

.tpp-plan-title { display: none !important; }

.tpp-plan-summary,
.tpp-plan-estimate {
	font-size: 9.5pt;
	margin-bottom: 3mm;
}

.tpp-plan-estimate {
	padding: 3mm 4mm;
	background: #f8fafc !important;
	border-left: 2pt solid var(--tpp-primary, #2563eb);
	color: #0f172a !important;
}

.tpp-plan-subtitle {
	margin: 7mm 0 3mm;
	padding-top: 3mm;
	font-size: 12pt;
	border-top: 0.75pt solid #cbd5e1;
	page-break-after: avoid;
	break-after: avoid;
}

.tpp-plan-blocks,
.tpp-plan-week { gap: 3mm; }

.tpp-plan-block,
.tpp-plan-day {
	padding: 4mm 5mm;
	border: 0.75pt solid #cbd5e1;
	border-radius: 2mm;
	background: #fff !important;
	page-break-inside: avoid;
	break-inside: avoid;
}

.tpp-plan-block { padding-left: 14mm; }

.tpp-plan-block::before {
	left: 5mm;
	top: 4mm;
	width: 6mm;
	height: 6mm;
	font-size: 8pt;
	background: var(--tpp-primary, #2563eb) !important;
	color: #fff !important;
	border: 0;
}

.tpp-plan-block h4 { font-size: 11pt; margin-bottom: 1mm; }
.tpp-plan-block p { font-size: 8.5pt; color: #475569 !important; }

.tpp-plan-block-time {
	font-size: 9pt;
	color: var(--tpp-primary, #2563eb) !important;
}

.tpp-plan-day { border-left: 2pt solid var(--tpp-accent, #0f766e); }
.tpp-plan-day-label { font-size: 9.5pt; }
.tpp-plan-day-focus { font-size: 7pt; color: var(--tpp-accent, #0f766e) !important; }

/* ---- Lessons as a tick list ------------------------------------------- */

.tpp-plan-lessons {
	gap: 1.5mm;
	margin-top: 2.5mm;
}

.tpp-plan-lessons li {
	padding: 2mm 3mm;
	background: #f8fafc !important;
	border-radius: 1.5mm;
	page-break-inside: avoid;
	break-inside: avoid;
}

.tpp-plan-lessons a {
	color: #0f172a !important;
	text-decoration: none;
	font-size: 9.5pt;
}

/* The URL is what makes a printed plan usable at the keyboard. On its own
   line so it never breaks up the lesson title. */
.tpp-plan-lessons a::after {
	content: attr(href);
	display: block;
	margin-top: 0.5mm;
	font-size: 6.5pt;
	font-weight: 400;
	color: #64748b;
	word-break: break-all;
}

.tpp-plan-lesson-meta { font-size: 7.5pt; color: #64748b !important; }

/* On paper the repetition count becomes one tick box per run, so the sheet
   can be worked through with a pen. The screen badge is hidden. */
.tpp-plan-reps { display: none !important; }

.tpp-plan-boxes {
	display: inline-flex !important;
	grid-row: span 2;
	align-self: center;
	/* A horizontal strip: five stacked boxes are taller than the row they sit
	   in and push the lesson title out of alignment. */
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 1mm;
	margin-right: 2mm;
}

.tpp-plan-boxes i {
	display: block;
	width: 3.2mm;
	height: 3.2mm;
	border: 0.75pt solid #64748b;
	border-radius: 0.5mm;
}

/* ---- Checklist --------------------------------------------------------- */

.tpp-checklist li {
	border: 0;
	border-bottom: 0.5pt solid #e2e8f0;
	border-radius: 0;
	padding: 2mm 0;
	background: none !important;
	page-break-inside: avoid;
}

.tpp-checklist li::before {
	width: 3.5mm;
	height: 3.5mm;
	border: 0.75pt solid #0f172a;
	border-radius: 0.5mm;
	margin-top: 0.8mm;
}

/* ==========================================================================
   Result report
   ========================================================================== */

.tpp-result {
	background: none !important;
	border: 0.75pt solid #cbd5e1;
	border-radius: 2mm;
	padding: 5mm;
	page-break-inside: avoid;
}

.tpp-result-primary b { color: #0f172a !important; font-size: 26pt; }

.tpp-rating {
	background: none !important;
	color: #0f172a !important;
	border: 0.75pt solid #0f172a;
}

.tpp-result-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5mm; }

.tpp-result-item {
	background: none !important;
	border-bottom: 0.5pt solid #e2e8f0;
	border-radius: 0;
	font-size: 8.5pt;
}

.tpp-sparkline { border: 0.75pt solid #e2e8f0; color: #0f172a !important; }

/* ==========================================================================
   Tables, charts and general content
   ========================================================================== */

.tpp-table-wrap { overflow: visible; border: 0; }

.tpp-table th,
.tpp-table td {
	border-bottom: 0.5pt solid #cbd5e1;
	white-space: normal;
	font-size: 8.5pt;
	padding: 1.5mm 2mm;
}

.tpp-table th {
	background: none !important;
	border-bottom: 1pt solid #0f172a;
}

.tpp-chart-line { stroke: #0f172a; }
.tpp-chart-area { fill: #eef2f7; }
.tpp-chart-dot { fill: #0f172a; stroke: #fff; }
.tpp-barchart-fill { background: #94a3b8 !important; }
.tpp-heatmap { display: none; }

/* Show link targets in printed articles, but never inside the plan or
   certificate, where they are already handled deliberately. */
.tpp-entry-content a[href^="http"]::after {
	content: " (" attr(href) ")";
	font-size: 7pt;
	word-break: break-all;
}

.tpp-cert a::after { content: none !important; }

h1, h2, h3, h4 {
	page-break-after: avoid;
	break-after: avoid;
}

img, figure, table {
	page-break-inside: avoid;
	break-inside: avoid;
}

p { orphans: 3; widows: 3; }