/*
 * tutorial-print.css — printweergave van de starterkit-tutorial (view-print.php):
 * één pagina = één A4-vel (210 × 297 mm) met kop, voet en paginanummer. De
 * inhoud (.ps-fit) wordt door js/tutorial-print.js passend geschaald.
 */
@page { size: A4; margin: 0; }

html, body.ps-doc {
    height: auto !important; overflow: visible !important; display: block !important;
    margin: 0; background: #e2e8f0; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.ps-sheet {
    width: 210mm; height: 297mm; box-sizing: border-box; margin: 10mm auto; background: #fff;
    display: flex; flex-direction: column; padding: 9mm 12mm 7mm; overflow: hidden; position: relative;
    box-shadow: 0 10px 30px rgba(15, 35, 70, .18); page-break-after: always; break-after: page;
}
@media print {
    body.ps-doc { background: #fff; }
    .ps-sheet { margin: 0; box-shadow: none; }
}
.ps-sheet:last-of-type { page-break-after: auto; break-after: auto; }
#codey-cookie-banner { display: none !important; }

/* Kop en voet */
.ps-head {
    display: flex; align-items: center; gap: 8px; padding-bottom: 3mm; margin-bottom: 4mm;
    border-bottom: 2px solid #2f74c8; font-size: 10pt; color: #1e293b;
}
.ps-head img { height: 7mm; width: auto; }
.ps-head span { font-weight: 800; letter-spacing: .02em; }
.ps-head em { margin-left: auto; font-style: normal; color: #718096; font-size: 9pt; }
.ps-body { flex: 1; min-height: 0; overflow: hidden; }
.ps-fit { transform-origin: top left; }
.ps-foot {
    display: flex; justify-content: space-between; gap: 10px; padding-top: 3mm; margin-top: 3mm;
    border-top: 1px solid #e2e8f0; font-size: 8.5pt; color: #718096;
}
.ps-num { font-weight: 700; color: #2f74c8; white-space: nowrap; align-self: flex-end; }
.ps-foot-left { display: flex; flex-direction: column; gap: .6mm; min-width: 0; }
.ps-foot-left b { font-weight: 600; color: #4a5568; }

/* De gewone tutorialopmaak, compacter en zonder schermversiering */
.ps-sheet .tut { max-width: none; padding: 0; margin: 0; }
.ps-sheet .tut-slide { border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.ps-sheet .tut-slide h1 { font-size: 22pt; margin-bottom: 8px; }
.ps-sheet .tut-slide h2 { font-size: 14pt; margin: 18px 0 8px; }
.ps-sheet .tut-slide p, .ps-sheet .tut-slide li { font-size: 10.5pt; line-height: 1.5; }
.ps-sheet .tut-lead { font-size: 12pt !important; }
.ps-sheet .tut-welcome-image img { transform: none; box-shadow: none; }
.ps-sheet .tut-part-tile, .ps-sheet .tut-project-card, .ps-sheet .tut-roadmap a { box-shadow: none; transform: none; }
.ps-sheet .tut-make, .ps-sheet .tut-filters, .ps-sheet .catalog-code-copy, .ps-sheet .tut-skip,
.ps-sheet .tut-downloads, .ps-sheet .tut-nav, .ps-sheet .tut-tab-buttons { display: none !important; }
.ps-sheet .tut-tab-panel[hidden] { display: block !important; }
.ps-sheet .tut-tab-panel { padding: 8px 14px; border-bottom: 1px solid #e2e8f0; }
.ps-sheet .tut-tab-panel h3 { font-size: 11pt; }
.ps-sheet .tut-faq details > p { display: block; }
.ps-sheet .tut-project .catalog-code-wrap pre { max-height: none; overflow: visible; white-space: pre-wrap; font-size: 8.5pt; line-height: 1.35; }
.ps-sheet .ps-only { display: block; }
.ps-sheet .tut-figure { overflow: visible; }

/* Voorblad */
.ps-cover { justify-content: space-between; background: linear-gradient(160deg, #ebf4ff 0%, #ffffff 45%, #f0fff4 100%); }
.ps-cover-inner { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6mm; }
.ps-cover-logo { height: 18mm; }
.ps-cover-text { display: flex; flex-direction: column; align-items: center; gap: 6mm; }
.ps-cover h1 { font-size: 30pt; line-height: 1.15; margin: 0; color: #1a202c; letter-spacing: -.02em; max-width: 160mm; }
.ps-cover-sub { font-size: 13pt; color: #4a5568; max-width: 150mm; margin: 0; line-height: 1.5; }
.ps-cover-kit { width: 150mm; border-radius: 6mm; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.ps-cover-url { font-weight: 800; color: #2f74c8; font-size: 12pt; }

/* Inhoudsopgave */
.ps-toc h1 { font-size: 22pt; margin: 0 0 6mm; color: #1a202c; }
.ps-toc-list, .ps-toc-list ol { list-style: none; margin: 0; padding: 0; }
.ps-toc-list ol { columns: 2; column-gap: 10mm; margin: 1mm 0 3mm 6mm; }
.ps-toc-list a { display: flex; align-items: baseline; gap: 4px; text-decoration: none; color: #1e293b; }
.ps-toc-main a { font-size: 11.5pt; font-weight: 700; padding: 2.2mm 0 1mm; }
.ps-toc-sub { break-inside: avoid; }
.ps-toc-sub a { font-size: 9.5pt; padding: .7mm 0; color: #4a5568; }
.ps-toc-dots { flex: 1; border-bottom: 1px dotted #a0aec0; transform: translateY(-3px); min-width: 6mm; }
.ps-toc-num { font-variant-numeric: tabular-nums; color: #2f74c8; font-weight: 700; }

/* Aansluitschema: vaste breedte in mm (de module schaalt op de breedte bij het
   tekenen; zo blijft dat kloppen als het vel daarna wordt geschaald). In plaats
   van de lange draadlijst van de module een compacte tabel in twee kolommen. */
.ps-sheet .tut-wiring-canvas { width: 150mm; max-width: 100%; margin: 0 auto; border: 0; box-shadow: none; }
.ps-sheet .wiring-connections { display: none !important; }
.ps-sheet .tut-wiring .catalog-table-wrap { display: block !important; margin-top: 2mm; border: 0; }
.ps-sheet .tut-wiring .catalog-table thead { display: none; }
.ps-sheet .tut-wiring .catalog-table, .ps-sheet .tut-wiring .catalog-table tbody { display: block; width: 100%; }
.ps-sheet .tut-wiring .catalog-table tr { display: flex; align-items: center; gap: 2mm; padding: 1.4mm 3mm; border-bottom: 1px solid #edf2f7; }
.ps-sheet .tut-wiring .catalog-table tr:last-child { border-bottom: 0; }
.ps-sheet .tut-wiring .catalog-table td { display: flex; align-items: center; padding: 0; border: 0; font-size: 8.5pt; font-weight: 400; line-height: 1.35; color: #334155; }
.ps-sheet .tut-wiring .catalog-table td:last-child { flex: 1; min-width: 0; }
.ps-sheet .tut-wiring .catalog-table td code { background: none; padding: 0; border: 0; font-family: inherit; font-size: 8.5pt; font-weight: 400; color: #334155; }
.ps-sheet .tut-wiring .wire-swatch { width: 2.6mm; height: 2.6mm; margin-right: 2.2mm; border-radius: 50%; flex: none; box-shadow: 0 0 0 0.5px rgba(0,0,0,.25); }
.ps-sheet .tut-wiring .catalog-table td:last-child::before { content: '→'; color: #94a3b8; margin-right: 2mm; }

/* Projectpagina: schema naast "Wat heb je nodig" + bouwstappen; code in kolommen */
.ps-sheet .tut-project {
    display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 7mm; align-items: start;
    grid-template-areas: "head head" "wiring need" "wiring steps";
}
.ps-sheet .tut-project > * { grid-column: 1 / -1; }
.ps-sheet .tut-project > .tut-project-head { grid-area: head; }
.ps-sheet .tut-project > .tp-wiring { grid-area: wiring; }
.ps-sheet .tut-project > .tp-need { grid-area: need; }
.ps-sheet .tut-project > .tp-steps { grid-area: steps; }
.ps-sheet .tut-project .tp-wiring .catalog-table-wrap, .ps-sheet .tut-project .tp-wiring .tut-muted { display: none !important; }
.ps-sheet .tut-project > .tp-wiring .tut-wiring-canvas { width: 100mm; }
.ps-sheet .tut-project .tut-need { grid-template-columns: repeat(3, 1fr); gap: 2mm; }
.ps-sheet .tut-project .tut-need-item { padding: 1.5mm; font-size: 8pt; }
.ps-sheet .tut-project .tut-need-img { height: 12mm; }
.ps-sheet .tut-project .tut-need-img img { max-height: 11mm; }
.ps-sheet .tut-project .tut-build-steps li { font-size: 9.5pt; margin-bottom: 1mm; }
.ps-sheet .ps-code-cols pre { columns: 2; column-gap: 5mm; column-rule: 1px solid #334155; }
.ps-sheet .tut-project .tut-blocks { margin-top: 4mm; gap: 4mm; }
.ps-sheet .tut-project .tut-block h2 { font-size: 11.5pt; margin-top: 3mm; }
.ps-sheet .tut-project .tut-block li { font-size: 9.5pt; }

/* Op A4-breedte zouden de mobiele regels (max-width: 900px) alles naar één kolom
   zetten; op papier willen we de desktopkolommen. */
.ps-sheet .tut-welcome { grid-template-columns: 1.1fr 1fr; gap: 8mm; }
.ps-sheet .tut-welcome-image { order: 0; }
.ps-sheet .tut-annotated { grid-template-columns: 1.15fr 1fr; gap: 6mm; }
.ps-sheet .tut-annotated-wide { grid-template-columns: 1fr; }
.ps-sheet .tut-blocks { grid-template-columns: 1fr 1fr; gap: 4mm; }
.ps-sheet .tut-flow { grid-template-columns: repeat(4, 1fr); }
.ps-sheet .tut-steps-big { grid-template-columns: repeat(3, 1fr); }
.ps-sheet .tut-io { flex-direction: row; }
.ps-sheet .tut-io-arrow { transform: none; }
.ps-sheet .tut-compare-row { grid-template-columns: 50mm 1fr; }
.ps-sheet .tut-parts-grid { grid-template-columns: repeat(5, 1fr); gap: 3mm; }
.ps-sheet .tut-project-grid { grid-template-columns: repeat(4, 1fr); gap: 3mm; }
.ps-sheet .tut-legend-cards { grid-template-columns: repeat(3, 1fr); }

/* Onderdeelpagina: kleine foto naast de titel, uitleg naast het schema */
.ps-sheet .tut-part { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6mm; align-items: start; }
.ps-sheet .tut-part > * { grid-column: 1 / -1; }
.ps-sheet .tut-part > .tp-info { grid-column: 1; grid-row: span 2; grid-template-columns: 1fr; margin-top: 4mm; }
/* Onderdelen zonder schema (breadboard, jumperkabels, batterijclip): uitleg over de volle breedte */
.ps-sheet .tut-part:not(:has(.tp-wiring)) > .tp-info { grid-column: 1 / -1; grid-row: auto; grid-template-columns: 1fr 1fr; }
/* Schema rechts naast de uitleg, de draadtabel eronder over de volle breedte */
.ps-sheet .tut-part > .tp-wiring, .ps-sheet .tut-part > .tp-wiring > .tut-wiring { display: contents; }
.ps-sheet .tut-part > .tp-wiring > h2, .ps-sheet .tut-part .tp-wiring .tut-wiring-canvas { grid-column: 2; }
.ps-sheet .tut-part .tp-wiring .catalog-table-wrap { grid-column: 1 / -1; margin-top: 4mm; }
.ps-sheet .tut-part > .tp-wiring .tut-wiring-canvas { width: 85mm; }
.ps-sheet .tut-part-hero { grid-template-columns: 55mm 1fr; gap: 6mm; }
.ps-sheet .tut-part-hero-img { min-height: 0; padding: 4mm; }
.ps-sheet .tut-part-hero-img img { max-height: 40mm; }
.ps-sheet .tut-part-hero-img .tut-svg-small { max-height: 40mm; }

/* Knoppen hebben op papier geen zin */
.ps-sheet .tut-btn { display: none !important; }

/* Project met twee schema's (stap A/B, breadboard-oefening): schema's naast elkaar
   over de volle breedte, onderdelen + bouwstappen eronder */
.ps-sheet .tut-project:has(.tp-wiring-cols) { grid-template-areas: "head head" "wiring wiring" "need steps"; grid-template-columns: 1fr 1.3fr; }
.ps-sheet .tut-project .tp-wiring-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6mm; }
.ps-sheet .tut-project .tp-wiring-cols .tut-wiring-canvas { width: 100%; }
.ps-sheet .tut-project .tp-wiring-step { font-size: 11pt; margin: 2mm 0 1mm; }
.ps-sheet .tut-project .tp-wiring-col > p { font-size: 9pt !important; margin: 0 0 2mm; }