/*
 * tutorial-present.css — presentatieweergave van de starterkit-tutorial
 * (view-print.php?present=1). Elke pagina is een 16:9-slide van 1600×900 px die
 * js/tutorial-present.js als geheel naar het scherm schaalt (geen scrollen, ook
 * niet na F11); de inhoud van een slide past tutorial-print.js er al in.
 * Bouwt voort op tutorial-print.css (kop, voet, compacte opmaak).
 */
html, body.ps-present { height: 100% !important; overflow: hidden !important; background: #0b1220; margin: 0; }
body.ps-present .ps-sheet {
    position: fixed; left: 50%; top: 50%; margin: 0;
    width: 1600px; height: 900px; padding: 34px 56px 26px;
    transform: translate(-50%, -50%) scale(var(--pr-scale, 1));
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45); border-radius: 0;
    visibility: hidden; opacity: 0; transition: opacity .25s ease;
}
body.ps-present .ps-sheet.is-active { visibility: visible; opacity: 1; }
body.ps-present.is-loading .ps-sheet { visibility: hidden !important; }

/* Kop en voet groter (beamer) */
body.ps-present .ps-head { font-size: 18px; padding-bottom: 14px; margin-bottom: 18px; border-bottom-width: 3px; }
body.ps-present .ps-head img { height: 36px; }
body.ps-present .ps-head em { font-size: 16px; }
body.ps-present .ps-foot { font-size: 14px; padding-top: 10px; margin-top: 12px; }
body.ps-present .ps-foot-left { flex-direction: row; gap: 18px; }

/* Inhoud: ruime landschap-opmaak */
body.ps-present .ps-sheet .tut-slide h1 { font-size: 46px; margin-bottom: 14px; }
body.ps-present .ps-sheet .tut-slide h2 { font-size: 28px; margin: 26px 0 12px; }
body.ps-present .ps-sheet .tut-slide p, body.ps-present .ps-sheet .tut-slide li { font-size: 20px; line-height: 1.5; }
body.ps-present .ps-sheet .tut-lead { font-size: 24px !important; max-width: 1200px; }
body.ps-present .ps-sheet .tut-wiring-canvas { width: 760px; }
body.ps-present .ps-sheet .tut-wiring .catalog-table td,
body.ps-present .ps-sheet .tut-wiring .catalog-table td code { font-size: 17px; }
body.ps-present .ps-sheet .tut-wiring .wire-swatch { width: 12px; height: 12px; }
/* Onderdeel: uitleg links, schema rechts; projectpagina: schema links, rest rechts */
body.ps-present .ps-sheet .tut-part > .tp-wiring .tut-wiring-canvas { width: 640px; }
body.ps-present .ps-sheet .tut-part-hero { grid-template-columns: 240px 1fr; }
body.ps-present .ps-sheet .tut-part-hero-img img, body.ps-present .ps-sheet .tut-part-hero-img .tut-svg-small { max-height: 170px; }
body.ps-present .ps-sheet .tut-project > .tp-wiring .tut-wiring-canvas { width: 680px; }
body.ps-present .ps-sheet .tut-project .tut-need-img { height: 60px; }
body.ps-present .ps-sheet .tut-project .tut-need-img img { max-height: 54px; }
body.ps-present .ps-sheet .tut-project .tut-need-item { font-size: 15px; padding: 8px; }
body.ps-present .ps-sheet .tut-project .tut-build-steps li { font-size: 18px; }
body.ps-present .ps-sheet .tut-project .catalog-code-wrap pre { font-size: 15px; }
body.ps-present .ps-sheet .ps-code-cols pre { columns: 3; }
body.ps-present .ps-sheet .tut-parts-grid { grid-template-columns: repeat(6, 1fr); }
body.ps-present .ps-sheet .tut-project-grid { grid-template-columns: repeat(6, 1fr); }
body.ps-present .ps-sheet .tut-svg-breadboard, body.ps-present .ps-sheet .tut-svg-legend { max-width: 900px; }

/* Voorblad en inhoud in landschap */
body.ps-present .ps-cover-inner { flex-direction: row; gap: 60px; text-align: left; justify-content: center; }
body.ps-present .ps-cover-inner > :not(.ps-cover-kit) { max-width: 700px; }
body.ps-present .ps-cover h1 { font-size: 60px; max-width: 760px; }
body.ps-present .ps-cover-sub { font-size: 24px; }
body.ps-present .ps-cover-kit { width: 640px; order: 2; }
body.ps-present .ps-cover-logo { height: 80px; }
body.ps-present .ps-cover-text { align-items: flex-start; gap: 22px; }
body.ps-present .ps-toc h1 { font-size: 40px; }
body.ps-present .ps-toc-list { columns: 2; column-gap: 60px; }
body.ps-present .ps-toc-list ol { columns: 1; }
body.ps-present .ps-toc-main a { font-size: 22px; }
body.ps-present .ps-toc-sub a { font-size: 17px; }
body.ps-present .ps-toc-group { break-inside: auto; }

/* Bediening: onderaan, verdwijnt als de muis stilstaat */
.pr-bar {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 10;
    display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 999px;
    background: rgba(15, 23, 42, .82); color: #fff; font: 600 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: opacity .3s;
}
body.pr-idle .pr-bar { opacity: 0; pointer-events: none; }
body.pr-idle { cursor: none; }
.pr-bar button, .pr-bar a {
    background: rgba(255, 255, 255, .12); color: #fff; border: 0; border-radius: 999px; padding: 9px 14px;
    font: inherit; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.pr-bar button:hover, .pr-bar a:hover { background: rgba(255, 255, 255, .24); }
.pr-count { min-width: 70px; text-align: center; font-variant-numeric: tabular-nums; }
.pr-progress { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 10; background: rgba(255, 255, 255, .08); }
.pr-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #61aeee, #2f74c8); transition: width .25s; }
.pr-loading { position: fixed; inset: 0; display: grid; place-items: center; color: #cbd5e1; font: 600 22px system-ui, sans-serif; }
body.ps-present:not(.is-loading) .pr-loading { display: none; }

/* ── Landschapsindeling ─────────────────────────────────────────────────── */
/* Onderdeelpagina: links titel + uitleg + tips, rechts het schema met de draden */
body.ps-present .ps-sheet .tut-part {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; row-gap: 0; align-items: start;
    grid-auto-flow: row dense;
}
body.ps-present .ps-sheet .tut-part > * { grid-column: 1; }
body.ps-present .ps-sheet .tut-part > .tp-wiring { display: block; grid-column: 2; grid-row: 1 / span 12; }
body.ps-present .ps-sheet .tut-part > .tp-wiring > .tut-wiring { display: block; }
body.ps-present .ps-sheet .tut-part > .tp-wiring > h2 { margin-top: 0; }
body.ps-present .ps-sheet .tut-part .tp-wiring .tut-wiring-canvas { width: 100%; }
body.ps-present .ps-sheet .tut-part .tp-wiring .catalog-table-wrap { margin-top: 14px; }
body.ps-present .ps-sheet .tut-part > .tp-info, body.ps-present .ps-sheet .tut-part > .tut-blocks { grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
body.ps-present .ps-sheet .tut-part > .tut-sub-progress { display: none; }
/* zonder schema (breadboard, jumpers, clip): links titel + uitleg, rechts tekening + tips */
body.ps-present .ps-sheet .tut-part:not(:has(.tp-wiring)) { grid-auto-flow: row; }
body.ps-present .ps-sheet .tut-part:not(:has(.tp-wiring)) > .tut-part-hero { grid-column: 1; grid-row: 1; }
body.ps-present .ps-sheet .tut-part:not(:has(.tp-wiring)) > .tp-info { grid-column: 1; grid-row: 2 / span 3; grid-template-columns: 1fr; }
body.ps-present .ps-sheet .tut-part:not(:has(.tp-wiring)) > .tut-figure { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
body.ps-present .ps-sheet .tut-part:not(:has(.tp-wiring)) > .tut-blocks:not(.tp-info) { grid-column: 2; grid-row: 3; grid-template-columns: 1fr 1fr; }
body.ps-present .ps-sheet .tut-part:not(:has(.tp-wiring)) > h2,
body.ps-present .ps-sheet .tut-part:not(:has(.tp-wiring)) > .tut-chips { grid-column: 2; }

/* Projectpagina: links info, midden schema, rechts de code */
body.ps-present .ps-sheet .tut-project {
    display: grid; grid-template-columns: 1fr 1.05fr 1fr; column-gap: 34px; align-items: start;
    grid-template-areas: "head wiring code" "need wiring code" "steps wiring code" "blocks blocks code" "note note code";
}
body.ps-present .ps-sheet .tut-project > .tut-project-head { grid-area: head; }
body.ps-present .ps-sheet .tut-project > .tp-need { grid-area: need; }
body.ps-present .ps-sheet .tut-project > .tp-steps { grid-area: steps; }
body.ps-present .ps-sheet .tut-project > .tp-wiring { grid-area: wiring; }
body.ps-present .ps-sheet .tut-project > .tp-code { grid-area: code; }
body.ps-present .ps-sheet .tut-project > .tut-blocks { grid-area: blocks; grid-template-columns: 1fr 1fr; margin-top: 10px; }
body.ps-present .ps-sheet .tut-project > .ps-only { grid-area: note; }
body.ps-present .ps-sheet .tut-project .tp-wiring .tut-wiring-canvas { width: 100%; }
body.ps-present .ps-sheet .tut-project .tp-code h2, body.ps-present .ps-sheet .tut-project .tp-wiring h2 { margin-top: 0; }
body.ps-present .ps-sheet .ps-code-cols pre { columns: 1; }
body.ps-present .ps-sheet .tut-project .catalog-code-wrap pre { font-size: 13px; line-height: 1.35; }
body.ps-present .ps-sheet .tut-project .tut-need { grid-template-columns: repeat(3, 1fr); }
body.ps-present .ps-sheet .tut-project .tut-project-head h1 { font-size: 40px; }

/* Wat is een Arduino: links uitleg + input/output, rechts het bord met de legenda */
body.ps-present .ps-sheet .tut-slide:has(> .tut-io) {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start; grid-auto-flow: row dense;
}
body.ps-present .ps-sheet .tut-slide:has(> .tut-io) > * { grid-column: 1; }
body.ps-present .ps-sheet .tut-slide:has(> .tut-io) > .tut-annotated,
body.ps-present .ps-sheet .tut-slide:has(> .tut-io) > h2:nth-of-type(2) { grid-column: 2; }
body.ps-present .ps-sheet .tut-slide:has(> .tut-io) > h2:nth-of-type(2) { grid-row: 1; margin-top: 0; }
body.ps-present .ps-sheet .tut-slide:has(> .tut-io) > .tut-annotated { grid-row: 2 / span 8; grid-template-columns: 1fr; gap: 14px; }
body.ps-present .ps-sheet .tut-io-box p { font-size: 17px !important; }
body.ps-present .ps-sheet .tut-legend li { font-size: 17px !important; }

/* Zo werkt Codey: schermafbeelding links, uitleg rechts */
body.ps-present .ps-sheet .tut-annotated-wide { grid-template-columns: 1.75fr 1fr; gap: 28px; align-items: start; }
body.ps-present .ps-sheet .tut-legend-cards { grid-template-columns: 1fr; margin-top: 0; gap: 10px; }
body.ps-present .ps-sheet .tut-legend-cards li { font-size: 17px !important; padding: 10px 12px 10px 50px; }

/* Aansluiten: poortnamen en probleemoplosser in twee kolommen */
body.ps-present .ps-sheet .tut-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 0; gap: 10px; }
body.ps-present .ps-sheet .tut-tab-panel { border: 1px solid var(--tut-line); border-radius: 14px; padding: 10px 16px; }
body.ps-present .ps-sheet .tut-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.ps-present .ps-sheet .tut-faq details { margin: 0; }
body.ps-present .ps-sheet .tut-steps-big p, body.ps-present .ps-sheet .tut-tab-panel p, body.ps-present .ps-sheet .tut-faq p { font-size: 17px !important; }
body.ps-present .ps-sheet .tut-prose { max-width: none; }

/* Project met twee schema's: info links, beide schema's naast elkaar rechts */
body.ps-present .ps-sheet .tut-project:has(.tp-wiring-cols) {
    grid-template-columns: 1fr 2fr;
    grid-template-areas: "head wiring" "need wiring" "steps wiring" "code blocks" "note note";
}
body.ps-present .ps-sheet .tut-project:has(.tp-wiring-cols) > .tut-blocks { grid-template-columns: 1fr 1fr; }
body.ps-present .ps-sheet .tp-wiring-cols { gap: 30px; }
body.ps-present .ps-sheet .tp-wiring-step { font-size: 22px; margin: 0 0 6px; }