/*
 * tutorial.css — starterkit-tutorial (/starter-kits/<kit>/tutorial + /projects).
 * Bouwt voort op seo-landing.css + seo-catalog.css (zelfde palet #61aeee → #2f74c8,
 * achtergrond #f5f7fb). Mobiel eerst; groot, rustig en vriendelijk voor beginners.
 */
:root {
    --tut-blue: #2f74c8;
    --tut-blue-soft: rgba(47, 116, 200, 0.1);
    --tut-ink: #1a202c;
    --tut-text: #2d3748;
    --tut-muted: #718096;
    --tut-line: #e2e8f0;
    --tut-card: #fff;
    --tut-green: #2f855a;
    --tut-yellow: #fff8e1;
    --tut-radius: 18px;
}

/* ---- Voortgang ---- */
.tut-progress { max-width: 1080px; margin: 4px auto 0; padding: 0 16px; }
.tut-progress ol { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; }
.tut-progress li { flex: 1; min-width: 0; }
.tut-progress a {
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none;
    color: var(--tut-muted); font-size: 12px; font-weight: 700; padding-top: 10px;
    border-top: 4px solid var(--tut-line); transition: color .15s, border-color .15s;
}
.tut-progress li.is-done a { border-color: #9ac4f0; color: var(--tut-text); }
.tut-progress li.is-current a { border-color: var(--tut-blue); color: var(--tut-blue); }
.tut-progress a:hover { color: var(--tut-blue); }
.tut-progress-dot {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: #fff; border: 2px solid var(--tut-line); font-size: 12px;
}
.tut-progress li.is-done .tut-progress-dot { background: #9ac4f0; border-color: #9ac4f0; color: #fff; }
.tut-progress li.is-current .tut-progress-dot { background: var(--tut-blue); border-color: var(--tut-blue); color: #fff; }
.tut-progress-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tut-present-btn {
    display: inline-flex; align-items: center; gap: 6px; float: right; margin: 0 0 6px; padding: 6px 12px; border-radius: 999px;
    background: #fff; border: 1px solid var(--tut-line); color: var(--tut-text); font-size: 13px; font-weight: 700; text-decoration: none;
}
.tut-present-btn:hover { border-color: var(--tut-blue); color: var(--tut-blue); }
.tut-progress ol { clear: both; }
@media (max-width: 900px) { .tut-present-btn { display: none; } }   /* bedoeld voor TV/beamer/laptop */
.tut-progress-mobile { display: none; text-align: center; font-size: 13px; font-weight: 700; color: var(--tut-blue); margin-top: 8px; }

/* ---- Slide ---- */
.tut { max-width: 1080px; margin: 0 auto; padding: 24px 16px 40px; color: var(--tut-text); }
.tut-slide {
    background: var(--tut-card); border: 1px solid var(--tut-line); border-radius: 24px;
    padding: 40px 44px; box-shadow: 0 20px 45px -25px rgba(47, 116, 200, 0.35);
}
.tut-slide h1 { font-size: 2.4rem; line-height: 1.15; font-weight: 800; letter-spacing: -0.025em; color: var(--tut-ink); margin: 0 0 14px; }
.tut-slide h2 { font-size: 1.35rem; font-weight: 800; color: var(--tut-ink); margin: 36px 0 14px; letter-spacing: -0.01em; }
.tut-slide h3 { font-size: 1.05rem; margin: 0 0 6px; color: var(--tut-ink); }
.tut-slide p, .tut-slide li { font-size: 1.05rem; line-height: 1.7; }
.tut-slide code { background: #edf2f7; padding: 1px 6px; border-radius: 5px; font-size: .92em; color: #2c5282; }
.tut-slide pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; color: inherit; }
.tut-lead { font-size: 1.22rem !important; color: #4a5568; line-height: 1.6; max-width: 760px; margin: 0 0 8px; }
.tut-muted { color: var(--tut-muted); font-size: .95rem !important; }
.tut-eyebrow {
    display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--tut-blue-soft);
    color: var(--tut-blue); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px;
}
.tut-prose { max-width: 780px; }
.tut-prose ul, .tut-block ul { padding-left: 1.2em; }
.tut-card { background: #f7fafc; border: 1px solid var(--tut-line); border-radius: var(--tut-radius); padding: 18px 22px; margin: 22px 0; }
.tut-card p:first-child { margin-top: 0; } .tut-card p:last-child { margin-bottom: 0; }
.tut-card-warn { background: var(--tut-yellow); border-color: #f6e05e; }
.tut-try-card { display: block; text-decoration: none; color: var(--tut-text); background: #f0fff4; border-color: #9ae6b4; font-weight: 600; }
.tut-try-card:hover { border-color: #48bb78; }
.tut-try-card b { color: var(--tut-green); }
.tut-card-ok { background: #f0fff4; border-color: #9ae6b4; font-weight: 600; }
.tut-account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 6px 0 18px; }
.tut-account-login { color: var(--tut-blue); font-weight: 700; text-decoration: none; }
.tut-account-login:hover { text-decoration: underline; }
.tut-chip, .tut-sub-progress {
    display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--tut-blue-soft);
    color: var(--tut-blue); font-weight: 700; font-size: .85rem;
}
.tut-sub-progress { background: #edf2f7; color: var(--tut-muted); margin: 0 0 18px; }

/* ---- Welkom ---- */
.tut-welcome { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.tut-welcome-image img { width: 100%; height: auto; border-radius: 20px; box-shadow: 0 25px 50px -20px rgba(0,0,0,.35); transform: rotate(1.5deg); }
.tut-roadmap { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; gap: 8px; }
.tut-roadmap a {
    display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--tut-text);
    padding: 10px 14px; border-radius: 12px; border: 1px solid var(--tut-line); font-weight: 600; transition: border-color .15s, background .15s;
}
.tut-roadmap a:hover { border-color: var(--tut-blue); background: #f0f6fd; }
.tut-roadmap span {
    flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(135deg, #61aeee, #2f74c8); color: #fff; font-size: 13px; font-weight: 800;
}

/* ---- Input → Arduino → Output ---- */
.tut-io { display: flex; align-items: stretch; gap: 10px; }
.tut-io-box { flex: 1; border-radius: var(--tut-radius); padding: 20px; text-align: center; border: 2px solid; }
.tut-io-box strong { display: block; font-size: 1.15rem; color: var(--tut-ink); }
.tut-io-box p { font-size: .95rem !important; margin: 6px 0 0; }
.tut-io-icon { font-size: 2.2rem; line-height: 1; margin-bottom: 8px; }
.tut-io-in { background: #ebf8ff; border-color: #90cdf4; }
.tut-io-brain { background: #f3ebff; border-color: #b794f4; }
.tut-io-out { background: #f0fff4; border-color: #9ae6b4; }
.tut-io-arrow { align-self: center; font-size: 1.8rem; color: #a0aec0; font-weight: 800; }

/* ---- Afbeelding met genummerde markeringen ---- */
.tut-annotated { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: start; }
.tut-annotated-wide { grid-template-columns: 1fr; }
.tut-annotated-img { position: relative; }
.tut-annotated-img img { width: 100%; height: auto; display: block; }
.tut-shot img { border-radius: 14px; border: 1px solid var(--tut-line); box-shadow: 0 18px 40px -20px rgba(0,0,0,.35); }
.tut-marker {
    position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%;
    background: #f6ad55; color: #1a202c; font-weight: 800; font-size: 14px; display: grid; place-items: center;
    border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.35);
}
.tut-legend { margin: 0; padding: 0; list-style: none; counter-reset: tl; display: grid; gap: 10px; }
.tut-legend li { counter-increment: tl; position: relative; padding-left: 42px; font-size: 1rem !important; line-height: 1.55 !important; }
.tut-legend li::before {
    content: counter(tl); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
    background: #f6ad55; color: #1a202c; font-weight: 800; font-size: 13px; display: grid; place-items: center;
}
.tut-legend-cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 22px; }
.tut-legend-cards li { background: #f7fafc; border: 1px solid var(--tut-line); border-radius: 14px; padding: 14px 14px 14px 52px; }
.tut-legend-cards li::before { left: 14px; top: 14px; }
.tut-legend-cards strong { display: block; color: var(--tut-ink); }

/* ---- Onderdelen-overzicht ---- */
.tut-parts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.tut-part-tile {
    display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 16px; border: 1px solid var(--tut-line);
    background: #fff; text-decoration: none; color: var(--tut-text); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.tut-part-tile:hover { transform: translateY(-3px); border-color: rgba(47,116,200,.5); box-shadow: 0 12px 28px rgba(47,116,200,.14); }
.tut-part-img { height: 110px; display: flex; align-items: center; justify-content: center; background: #f5f7fb; border-radius: 12px; margin-bottom: 6px; overflow: hidden; }
.tut-part-img img { max-width: 88%; max-height: 98px; object-fit: contain; }
.tut-part-img .tut-svg { max-height: 100px; width: 90%; }
.tut-part-tile strong { color: var(--tut-ink); font-size: 1rem; }
.tut-part-tile span { font-size: .86rem; color: var(--tut-muted); line-height: 1.4; }
.tut-qty { font-style: normal; font-size: .78rem; font-weight: 700; color: var(--tut-blue); margin-top: 2px; }

/* ---- Onderdeelpagina ---- */
.tut-part-hero { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: center; }
.tut-part-hero-img {
    background: #f5f7fb; border-radius: 20px; padding: 20px; min-height: 220px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.tut-part-hero-img img { max-width: 100%; max-height: 220px; object-fit: contain; }
.tut-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.tut-block { border: 1px solid var(--tut-line); border-radius: var(--tut-radius); padding: 6px 24px 14px; background: #fff; }
.tut-block h2 { margin-top: 18px; font-size: 1.2rem; }
.tut-block-tip { background: var(--tut-yellow); border-color: #f6e05e; }
.tut-figure { margin: 26px 0 0; padding: 16px; background: #fbfaf7; border-radius: var(--tut-radius); border: 1px solid #ece6d8; overflow-x: auto; }
.tut-svg { display: block; width: 100%; height: auto; }
.tut-svg-small { max-width: 320px; margin: 0 auto; }
.tut-svg-breadboard { max-width: 640px; margin: 0 auto; }
.tut-svg-legend { list-style: none; padding: 0; margin: 14px auto 0; max-width: 640px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 18px; }
.tut-svg-legend li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem !important; line-height: 1.45 !important; }
.tut-svg-legend span { flex: 0 0 6px; align-self: stretch; border-radius: 3px; }
.tut-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.tut-chip-link {
    padding: 9px 14px; border-radius: 999px; border: 1px solid var(--tut-line); text-decoration: none;
    color: var(--tut-text); font-weight: 600; background: #fff;
}
.tut-chip-link:hover { border-color: var(--tut-blue); color: var(--tut-blue); }

/* ---- Aansluitschema ---- */
.tut-wiring { margin: 8px 0 0; }
.tut-wiring-canvas { min-height: 0; }
.tut-wiring .wire-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }

/* ---- Vibe coding ---- */
.tut-compare { display: grid; gap: 14px; }
.tut-compare-row { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: center; }
.tut-compare-label { font-weight: 800; color: var(--tut-ink); }
.tut-compare-label small { display: block; font-weight: 500; color: var(--tut-muted); font-size: .85rem; }
.tut-compare-bar { display: flex; align-items: center; gap: 10px; background: #f5f7fb; border-radius: 12px; height: 46px; padding: 0; overflow: hidden; }
.tut-compare-bar span { height: 100%; display: flex; align-items: center; padding: 0 16px; color: #fff; font-weight: 800; border-radius: 12px; white-space: nowrap; }
.tut-bar-old { background: linear-gradient(90deg, #fc8181, #e53e3e); }
.tut-bar-new { background: linear-gradient(90deg, #68d391, #2f855a); min-width: 18px; }
.tut-compare-bar b { color: var(--tut-green); }
.tut-flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tut-flow li {
    background: #f7fafc; border: 1px solid var(--tut-line); border-radius: 16px; padding: 16px;
    font-size: .98rem !important; line-height: 1.5 !important; position: relative;
}
.tut-flow li span { display: block; font-size: 1.8rem; margin-bottom: 6px; }

/* ---- Aansluiten ---- */
.tut-steps-big { list-style: none; padding: 0; margin: 20px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tut-steps-big li { display: flex; gap: 14px; background: #f7fafc; border: 1px solid var(--tut-line); border-radius: 16px; padding: 18px; }
.tut-steps-big strong { color: var(--tut-ink); font-size: 1.05rem; }
.tut-steps-big p { margin: 4px 0 0; font-size: .95rem !important; line-height: 1.55 !important; }
.tut-step-num {
    flex: 0 0 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800;
    background: linear-gradient(135deg, #61aeee, #2f74c8);
}
.tut-tabs { border: 1px solid var(--tut-line); border-radius: var(--tut-radius); overflow: hidden; }
.tut-tab-buttons { display: flex; background: #f5f7fb; border-bottom: 1px solid var(--tut-line); overflow-x: auto; }
.tut-tab-buttons button {
    flex: 1; padding: 14px 16px; border: 0; background: none; font: inherit; font-weight: 700; color: var(--tut-muted);
    cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap;
}
.tut-tab-buttons button[aria-selected="true"] { color: var(--tut-blue); border-bottom-color: var(--tut-blue); background: #fff; }
.tut-tab-panel { padding: 18px 22px; }
.tut-tabs:not(.is-ready) .tut-tab-panel[hidden] { display: block; } /* zonder JS: alles tonen */
.tut-faq details { border: 1px solid var(--tut-line); border-radius: 14px; padding: 12px 18px; margin-bottom: 10px; background: #fff; }
.tut-faq summary { cursor: pointer; font-weight: 700; color: var(--tut-ink); }
.tut-faq details p { margin: 8px 0 2px; }

/* ---- Projecten ---- */
.tut-filters { margin: 20px 0 22px; display: grid; gap: 10px; }
.tut-filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tut-filters button {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--tut-line); background: #fff; font: inherit; font-size: .9rem; font-weight: 600; color: var(--tut-text); cursor: pointer;
}
.tut-filters button img { width: 22px; height: 22px; object-fit: contain; }
.tut-filters button.is-active { background: var(--tut-blue); border-color: var(--tut-blue); color: #fff; }
.tut-filter-parts button { font-size: .82rem; padding: 6px 12px; }
.tut-project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.tut-project-card {
    display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--tut-line); border-radius: 18px;
    background: #fff; text-decoration: none; color: var(--tut-text); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.tut-project-card:hover { transform: translateY(-3px); border-color: rgba(47,116,200,.5); box-shadow: 0 14px 30px rgba(47,116,200,.15); }
.tut-project-card[hidden] { display: none; }
.tut-project-card h2 { font-size: 1.12rem; margin: 2px 0 0; }
.tut-project-card p { font-size: .92rem !important; color: var(--tut-muted); margin: 0; line-height: 1.5 !important; }
.tut-project-thumbs { display: flex; gap: 8px; height: 86px; align-items: center; justify-content: center; background: #f5f7fb; border-radius: 12px; margin-bottom: 6px; }
.tut-project-thumbs img { max-height: 70px; max-width: 30%; object-fit: contain; }
.tut-thumb-emoji { font-size: 2.2rem; }
.tut-project-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .85rem; color: var(--tut-muted); font-weight: 600; }
.tut-project-head { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
.tut-make { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; max-width: 260px; }
.tut-make small { color: var(--tut-muted); font-size: .82rem; line-height: 1.4; }
.tut-make-btn {
    font: inherit; font-size: 1.25rem; font-weight: 900; letter-spacing: .06em; color: #fff; cursor: pointer;
    padding: 18px 34px; border: 0; border-radius: 16px; background: linear-gradient(135deg, #48bb78, #2f855a);
    box-shadow: 0 14px 30px -10px rgba(47, 133, 90, .7); transition: transform .15s, box-shadow .15s;
}
.tut-make-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 36px -10px rgba(47, 133, 90, .8); }
.tut-make-bottom { margin: 34px auto 0; }
.tut-need { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tut-need-item {
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 10px;
    border: 1px solid var(--tut-line); border-radius: 14px; text-decoration: none; color: var(--tut-text); font-weight: 600; font-size: .9rem;
}
a.tut-need-item:hover { border-color: var(--tut-blue); }
.tut-need-img { height: 70px; width: 100%; display: flex; align-items: center; justify-content: center; }
.tut-need-img img { max-height: 66px; max-width: 90%; object-fit: contain; }
.tut-need-img .tut-svg { max-height: 60px; }
.tut-build-steps { padding-left: 1.3em; }
.tp-wiring-step { font-size: 1.12rem; margin: 22px 0 4px; color: var(--tut-ink); }
.tp-wiring-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.tp-wiring-col { min-width: 0; }
@media (max-width: 900px) { .tp-wiring-cols { grid-template-columns: 1fr; } }
.tut-build-steps li { margin-bottom: 6px; }
.tut-project .catalog-code-wrap pre { max-height: 460px; overflow: auto; }

/* ---- Navigatie onderaan ---- */
.tut-nav {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 22px 0 0;
    position: sticky; bottom: 12px; z-index: 5;
}
.tut-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 26px; border-radius: 14px;
    font-weight: 800; font-size: 1rem; text-decoration: none; transition: transform .15s, box-shadow .15s;
}
.tut-btn-primary { background: linear-gradient(135deg, #61aeee, #2f74c8); color: #fff; box-shadow: 0 10px 25px -8px rgba(47,116,200,.6); }
.tut-btn-primary:hover { transform: translateY(-2px); color: #fff; }
.tut-btn-ghost { background: #fff; color: var(--tut-text); border: 1px solid var(--tut-line); box-shadow: 0 6px 16px -10px rgba(0,0,0,.3); }
.tut-btn-ghost:hover { border-color: #a0aec0; }
.tut-skip { text-align: center; margin: 18px 0 0; }
.tut-downloads { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 14px 0 0; font-size: .9rem; }
.tut-downloads a { color: var(--tut-blue); font-weight: 600; text-decoration: none; }
.tut-downloads a:hover { text-decoration: underline; }
.ps-only { display: none; }
.tut-made-by { text-align: center; margin: 12px 0 0; font-size: .85rem !important; color: var(--tut-muted); }
.tut-made-by a { color: var(--tut-blue); font-weight: 700; text-decoration: none; }
.tut-skip button { background: none; border: 0; font: inherit; color: var(--tut-muted); text-decoration: underline; cursor: pointer; font-size: .92rem; }
.tut-skip button:hover { color: var(--tut-blue); }

/* ---- Kleine schermen ---- */
@media (max-width: 900px) {
    .tut-welcome, .tut-annotated, .tut-part-hero, .tut-blocks, .tut-project-head { grid-template-columns: 1fr; }
    .tut-welcome-image { order: -1; }
    .tut-flow { grid-template-columns: 1fr 1fr; }
    .tut-steps-big { grid-template-columns: 1fr; }
    .tut-make { max-width: none; }
    .tut-part-hero-img { min-height: 0; }
}
@media (max-width: 640px) {
    .tut { padding: 14px 12px 30px; }
    .tut-slide { padding: 24px 18px; border-radius: 18px; }
    .tut-slide h1 { font-size: 1.8rem; }
    .tut-lead { font-size: 1.08rem !important; }
    .tut-progress-label { display: none; }
    .tut-progress a { padding-top: 6px; }
    .tut-progress-dot { width: 22px; height: 22px; font-size: 11px; }
    .tut-progress-mobile { display: block; }
    .tut-io { flex-direction: column; }
    .tut-io-arrow { transform: rotate(90deg); }
    .tut-flow { grid-template-columns: 1fr; }
    .tut-compare-row { grid-template-columns: 1fr; gap: 6px; }
    .tut-btn { padding: 13px 16px; font-size: .95rem; }
    .tut-nav .tut-btn-primary { flex: 1; }
    .tut-make-btn { width: 100%; }
}