/* Foundations uses the production Data shell; only learning surfaces live here. */
body[data-foundations] { --lesson-accent:var(--cyan); }
body[data-foundations][data-deck="wrangle"] { --lesson-accent:var(--violet); }
body[data-foundations][data-deck="visualise"] { --lesson-accent:var(--mint); }
.foundation-skip { position:fixed; left:12px; top:-100px; z-index:200; padding:12px; background:var(--paper); color:var(--paper-ink); }
.foundation-skip:focus { top:8px; }
.foundation-strip { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:48px; padding:10px 28px; background:var(--rail); border-bottom:1px solid var(--border); }
.foundation-strip a { font-weight:800; text-decoration:none; }
.foundation-strip span { color:var(--muted); font:600 10px var(--mono); letter-spacing:.07em; }
.foundations-main { max-width:1440px; margin:auto; padding:40px 40px 60px; min-height:calc(100vh - 220px); }
.foundation-eyebrow { font:12px/1.5 var(--display); letter-spacing:.08em; color:var(--lesson-accent); }
.foundation-hero { display:grid; grid-template-columns:1fr auto; align-items:end; gap:32px; padding-bottom:34px; }
.foundation-hero h2 { font:clamp(29px,3.8vw,48px)/1.25 var(--display); letter-spacing:-.05em; margin:12px 0 18px; max-width:900px; }
.foundation-hero p { max-width:610px; font-size:18px; color:var(--muted); margin:0; }
.foundation-hero .hero-note { padding:16px 20px; border-left:3px solid var(--cyan); max-width:230px; font:14px/1.65 var(--mono); color:var(--muted); }
.foundation-decks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; padding:20px 0 40px; }
.foundation-deck { --accent:var(--cyan); display:flex; flex-direction:column; position:relative; isolation:isolate; min-height:300px; padding:25px; margin:0 0 12px; border:1px solid var(--accent); border-top:5px solid var(--accent); border-radius:6px; background:var(--panel); color:var(--ink); text-decoration:none; box-shadow:0 3px 0 var(--border),var(--shadow); transition:transform .15s; }
.foundation-deck[data-deck="wrangle"] { --accent:var(--violet); }
.foundation-deck[data-deck="visualise"] { --accent:var(--mint); }
.foundation-deck::before,.foundation-deck::after { content:""; position:absolute; z-index:-1; left:5px; right:5px; top:100%; height:8px; border:1px solid color-mix(in srgb,var(--accent) 70%,var(--border)); border-radius:0 0 5px 5px; background:var(--panel-2); }
.foundation-deck::after { top:calc(100% + 8px); left:11px; right:11px; height:7px; background:var(--panel-3); }
.foundation-deck:hover { transform:translateY(-5px); }
.deck-top { display:flex; align-items:center; justify-content:space-between; color:var(--accent); font:13px var(--display); }
.deck-icon { width:44px; height:44px; }
.foundation-deck h3 { font:22px/1.4 var(--display); margin:28px 0 10px; }
.foundation-deck p { color:var(--muted); margin:0 0 24px; font-size:16px; }
.deck-bottom { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:auto; color:var(--accent); font:700 12px var(--mono); }
.foundation-note { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; border-top:1px dashed var(--border); padding-top:28px; }
.foundation-note h3 { font:13px var(--display); margin:0 0 8px; }
.foundation-note p { color:var(--muted); margin:0; }
.foundation-breadcrumb { display:flex; flex-wrap:wrap; gap:9px; align-items:center; color:var(--muted); margin-bottom:24px; font-size:14px; }
.foundation-breadcrumb a { text-underline-offset:4px; }
.foundation-deck-heading { border-bottom:1px solid var(--border); padding-bottom:25px; margin-bottom:26px; }
.foundation-deck-heading h2 { font:clamp(24px,3vw,34px)/1.4 var(--display); margin:10px 0; }
.foundation-deck-heading p { font-size:18px; color:var(--muted); margin:0; }
.foundation-chapter { margin:32px 0; }
.foundation-chapter h3 { color:var(--lesson-accent); font:13px/1.6 var(--display); margin:0 0 14px; }
.lesson-library { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.lesson-card { display:grid; grid-template-columns:38px 1fr; gap:8px 12px; padding:17px; border:1px solid var(--border); border-radius:5px; background:var(--panel); text-decoration:none; box-shadow:0 2px 0 var(--border-soft); }
.lesson-card:hover { border-color:var(--lesson-accent); background:var(--panel-2); }
.lesson-card .card-id { color:var(--lesson-accent); font:11px var(--mono); padding-top:4px; }
.lesson-card h4 { margin:0; font-size:16px; line-height:1.4; }
.lesson-card p { grid-column:2; margin:0; color:var(--muted); font-size:14px; }
.lesson-card small { grid-column:2; font:11px var(--mono); color:var(--muted); }
.lesson-card.is-review { border-style:dashed; border-left:3px solid var(--lesson-accent); background:color-mix(in srgb,var(--lesson-accent) 5%,var(--panel)); }
.foundation-lesson-heading { display:grid; grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr); align-items:end; gap:28px; padding-bottom:18px; }
.foundation-lesson-copy { min-width:0; }
.foundation-lesson-heading h2 { font:clamp(23px,2.4vw,32px)/1.35 var(--display); margin:8px 0 10px; }
.foundation-lesson-heading p { margin:0; color:var(--muted); font-size:17px; }
.foundation-practices { min-width:0; margin:0; }
.foundation-practices p { margin:0 0 8px; color:var(--muted); font:12px var(--mono); text-align:right; }
.foundation-practices ol { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; list-style:none; padding:0; margin:0; }
.foundation-practices li { display:grid; align-content:start; gap:3px; min-width:0; padding:7px 9px 7px 11px; border-left:3px solid var(--border); color:var(--muted); }
.foundation-practices strong { font-size:14px; }
.foundation-practices li span { font-size:12px; line-height:1.35; }
.foundation-practices em { font:700 10px var(--mono); text-transform:uppercase; }
.foundation-practices li[aria-current="step"] { border-color:var(--lesson-accent); color:var(--lesson-accent); }
.foundation-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:28px; align-items:start; }
.foundation-content,.foundation-code-pane { min-width:0; }
.foundation-content { display:flex; flex-direction:column; gap:20px; }
.foundation-content section,.foundation-content details { min-width:0; }
.foundation-content h3,.foundation-output h3 { font:12px/1.6 var(--display); color:var(--lesson-accent); margin:0 0 10px; }
.foundation-content p { margin:0; line-height:1.75; }
.foundation-content code { font:12px var(--mono); }
.foundation-content pre { margin:10px 0 0; padding:16px; overflow:auto; border:1px solid var(--border-soft); border-radius:4px; background:var(--code); color:var(--code-ink); font:12px/1.8 var(--mono); tab-size:4; }
.foundation-table-scroll { max-width:100%; overflow:auto; border:1px solid var(--border); border-radius:5px; background:var(--paper); color:var(--paper-ink); }
.foundation-table-scroll table { border-collapse:collapse; width:100%; font:12px/1.6 var(--mono); text-align:left; }
.foundation-table-scroll th,.foundation-table-scroll td { padding:8px 10px; border-bottom:1px solid color-mix(in srgb,var(--border) 45%,transparent); white-space:nowrap; }
.foundation-table-scroll th { background:color-mix(in srgb,var(--cyan) 9%,var(--paper)); font-weight:700; }
.foundation-table-scroll caption { text-align:left; padding:8px 10px; font:700 12px var(--body); }
.foundation-table-scroll tr:last-child td { border-bottom:0; }
.foundation-syntax { display:grid; grid-template-columns:minmax(100px,.9fr) 1.3fr; margin:0; border-top:1px solid var(--border-soft); }
.foundation-syntax dt,.foundation-syntax dd { padding:10px 0; margin:0; border-bottom:1px solid var(--border-soft); }
.foundation-syntax dt { font:12px/1.6 var(--mono); overflow-wrap:anywhere; padding-right:15px; color:var(--lesson-accent); }
.foundation-syntax dd { font-size:14px; }
.foundation-task { padding:19px; background:color-mix(in srgb,var(--lesson-accent) 8%,var(--panel)); border:1px solid color-mix(in srgb,var(--lesson-accent) 50%,var(--border)); border-left:4px solid var(--lesson-accent); border-radius:4px; }
.foundation-content details { border-bottom:1px solid var(--border-soft); padding-bottom:12px; }
.foundation-content summary { cursor:pointer; font-weight:800; padding:4px 0; min-height:32px; }
.foundation-content details p { margin-top:10px; }
.foundation-code-pane { position:sticky; top:82px; border:1px solid var(--border); border-radius:6px; background:var(--panel); overflow:hidden; box-shadow:0 3px 0 var(--border-soft); }
.foundation-editor-head { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:14px 16px; border-bottom:1px solid var(--border); font:12px var(--display); }
.foundation-editor-head span { color:var(--muted); font:11px var(--mono); }
.foundation-editor-wrap { display:grid; grid-template-columns:36px minmax(0,1fr); background:var(--code); color:var(--code-ink); }
.foundation-line-numbers { padding:18px 0 18px 10px; text-align:right; white-space:pre; color:#9298a5; font:13px/1.8 var(--mono); pointer-events:none; overflow:hidden; }
#foundationEditor { display:block; resize:vertical; width:100%; min-height:380px; max-height:720px; border:0; border-radius:0; padding:18px 16px; background:var(--code); color:var(--code-ink); font:13px/1.8 var(--mono); white-space:pre; overflow:auto; tab-size:4; outline-offset:-3px; }
.foundation-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:13px 16px; border-bottom:1px solid var(--border); }
.foundation-actions button,.foundation-navigation a { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:42px; padding:9px 15px; border:1px solid var(--border); border-radius:4px; background:var(--panel-2); color:var(--ink); font:800 13px var(--body); text-decoration:none; cursor:pointer; }
.foundation-actions .primary { border-color:var(--lesson-accent); color:var(--lesson-accent); background:color-mix(in srgb,var(--lesson-accent) 12%,var(--panel)); }
.foundation-actions button:hover,.foundation-navigation a:hover { border-color:var(--lesson-accent); }
.foundation-actions button:disabled { opacity:.5; cursor:wait; }
.foundation-runtime { padding:10px 16px 0; font:11px/1.6 var(--mono); color:var(--muted); }
.foundation-feedback { margin:0; padding:10px 16px 0; font-size:14px; font-weight:800; }
.foundation-feedback:empty { display:none; }
.foundation-feedback[data-state="pass"] { color:var(--mint); }
.foundation-feedback[data-state="error"] { color:var(--coral); }
.foundation-output { padding:17px 16px; min-height:130px; max-height:65vh; overflow:auto; }
.foundation-output pre { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink); font:12px/1.7 var(--mono); margin:12px 0; }
.foundation-output pre.error { color:var(--coral); }
.foundation-output .empty-output { color:var(--muted); font:12px/1.8 var(--mono); }
.foundation-output .foundation-table-scroll { margin:12px 0; }
.foundation-output .chart-wrap { margin:15px 0; }
.foundation-output .chart-wrap img { width:100%; height:auto; display:block; background:white; }
.foundation-output .figure-links { display:flex; gap:14px; margin-top:8px; font-size:12px; }
.foundation-navigation { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:30px; padding-top:22px; border-top:1px solid var(--border); }
.foundation-navigation a { max-width:49%; }
.foundation-footer { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:22px 28px; border-top:1px solid var(--border); color:var(--muted); font-size:13px; }
@media(min-width:1600px){.foundations-main{padding-top:50px;}}
@media(max-width:1050px){.foundations-main{padding:28px 24px 45px;}.foundation-decks{gap:18px;}.foundation-deck{padding:20px;}.foundation-deck h3{font-size:19px;}.foundation-split{gap:20px;}.foundation-hero .hero-note{display:none;}.foundation-hero{grid-template-columns:1fr;}.lesson-library{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:800px){.foundation-split{grid-template-columns:1fr;}.foundation-code-pane{position:static;}.foundation-decks{grid-template-columns:1fr;gap:27px;}.foundation-deck{min-height:220px;}.foundation-deck h3{margin-top:15px;}.foundation-note{grid-template-columns:1fr;gap:22px;}.foundation-hero h2{font-size:31px;}.foundation-strip span{display:none;}.foundation-content pre{font-size:12px;}.foundation-output{max-height:none;}#foundationEditor{font-size:16px;}.foundation-line-numbers{font-size:16px;}.foundation-lesson-heading{grid-template-columns:1fr;align-items:start;gap:18px;padding-bottom:18px;}.foundation-practices p{text-align:left;}}
@media(max-width:480px){.foundations-main{padding:24px 16px 36px;}.foundation-strip{padding:10px 16px;}.foundation-hero p{font-size:16px;}.foundation-hero h2{font-size:27px;}.lesson-library{grid-template-columns:1fr;}.foundation-footer{align-items:flex-start;flex-direction:column;padding:20px 16px;}.foundation-practices{gap:5px;}.foundation-practices a{padding:8px 12px;}.foundation-actions{gap:6px;padding:12px;}.foundation-actions button{padding:9px 12px;}.foundation-lesson-heading h2{font-size:23px;}.foundation-syntax{grid-template-columns:1fr;}.foundation-syntax dt{padding-bottom:4px;border-bottom:0;}.foundation-syntax dd{padding-top:0;}.foundation-editor-head{padding:12px;}.foundation-editor-head span{font-size:10px;}.foundation-navigation a{font-size:12px;padding:8px;}}
@media(prefers-reduced-motion:reduce){.foundation-deck{transition:none;}html{scroll-behavior:auto;}}
.foundations-main:focus { outline:none; }
body[data-foundations] [hidden] { display:none !important; }
.foundation-skip:not(:focus) { width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.foundation-output .figure-links a { color:var(--paper-ink); }

/* The transparent input retains native selection, undo and accessibility. */
.foundation-editor-wrap { position:relative; min-height:0; }
#foundationHighlight { position:absolute; inset:0 0 0 36px; margin:0; padding:18px 16px; overflow:hidden; pointer-events:none; white-space:pre; font:13px/1.8 var(--mono); tab-size:4; color:var(--code-ink); }
#foundationEditor { position:relative; background:transparent; color:transparent; -webkit-text-fill-color:transparent; caret-color:#fff; }
#foundationEditor::selection { background:#52668f99; }
.py-keyword { color:#c792ea; font-weight:700; }
.py-string { color:#a5d68b; }
.py-number { color:#f6b77e; }
.py-comment { color:#a2acb5; font-style:italic; }
.py-builtin { color:#82cfff; }
.py-operator { color:#89ddff; }
@media(min-width:801px) {
 .foundations-main:has(.foundation-split) { height:calc(100dvh - 108px); min-height:540px; display:flex; flex-direction:column; padding-top:16px; padding-bottom:16px; }
 .foundations-main:has(.foundation-split) .foundation-breadcrumb { margin-bottom:10px; }
 .foundation-lesson-heading { padding-bottom:10px; }
 .foundation-lesson-heading h2 { margin:5px 0; }
 .foundation-split { flex:1; min-height:0; overflow:hidden; }
 .foundation-content { height:100%; overflow:auto; overscroll-behavior:contain; padding-right:12px; }
 .foundation-code-pane { position:static; height:100%; display:flex; flex-direction:column; }
 .foundation-editor-head,.foundation-actions,.foundation-runtime,.foundation-feedback { flex-shrink:0; }
 .foundation-editor-wrap { flex:0 0 clamp(320px,38vh,400px); min-height:320px; overflow:hidden; }
 #foundationEditor { height:100%; min-height:100%; max-height:none; resize:none; }
 .foundation-line-numbers { max-height:100%; }
 .foundation-output { flex:1; min-height:80px; max-height:none; overflow:auto; }
 .foundation-navigation { margin-top:12px; padding-top:10px; }
}
@media(max-width:800px) { #foundationHighlight { font-size:16px; } .foundation-practices ol { gap:10px; flex-wrap:wrap; } }
@media(forced-colors:active) { #foundationHighlight { display:none; } #foundationEditor { color:CanvasText; -webkit-text-fill-color:CanvasText; caret-color:CanvasText; } }

/* Learning cards reuse the deck accent; diagrams are compact instructional previews. */
.foundation-guidance { font:14px/1.7 var(--body); color:var(--muted); margin:20px 0; }
.foundation-deck-heading .foundation-guidance { font-size:14px; margin:16px 0; }
.chapter-jumps { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.chapter-jumps a { padding:7px 10px; border:1px solid var(--border); border-radius:4px; font:12px var(--mono); text-underline-offset:3px; }
.chapter-jumps a:hover { border-color:var(--lesson-accent); }
.chapter-step { display:inline-flex; align-items:center; gap:9px; max-width:100%; }
.chapter-flow-arrow { color:var(--muted); font:20px/1 var(--mono); flex:none; }
.chapter-step a { overflow-wrap:anywhere; }
@media(max-width:600px) {
  .chapter-jumps { flex-direction:column; align-items:flex-start; }
  .chapter-step { flex-direction:column; align-items:flex-start; gap:7px; }
  .chapter-flow-arrow { transform:rotate(90deg); margin-left:16px; }
}
.foundation-chapter { scroll-margin-top:85px; }
.lesson-card { display:flex; flex-direction:column; gap:9px; }
.card-meta { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.card-level { font:10px var(--mono); color:var(--lesson-accent); text-transform:uppercase; }
.lesson-card small { margin-top:auto; }
.concept-visual { display:block; width:100%; height:105px; color:var(--lesson-accent); background:color-mix(in srgb,var(--lesson-accent) 4%,var(--panel)); border:1px solid var(--border-soft); border-radius:4px; }
.concept-visual g { fill:none; stroke:currentColor; stroke-width:1.2; }
.concept-visual text { stroke:none; fill:var(--ink); font:9px var(--mono); }
.concept-visual .visual-cell { fill:var(--panel); stroke:var(--border-soft); }
.concept-visual .visual-wash { fill:color-mix(in srgb,var(--lesson-accent) 18%,var(--panel)); }
.concept-visual .visual-selected { fill:color-mix(in srgb,var(--lesson-accent) 22%,var(--panel)); stroke-width:2; }
.concept-visual .visual-fill { fill:currentColor; fill-opacity:.65; }
.concept-visual .visual-hatch { fill:var(--panel); stroke-width:2; stroke-dasharray:3 2; }
.concept-visual .visual-bold { stroke-width:2.5; }
.concept-visual .visual-dashed { stroke-dasharray:5 3; }
.concept-visual .visual-muted { stroke:var(--muted); }
.foundation-content .concept-visual { height:120px; max-width:360px; margin:0 0 14px; }
.isolated-syntax { margin-bottom:12px !important; }
.foundation-task-reminder { padding:10px 15px; border-bottom:2px solid var(--lesson-accent); background:color-mix(in srgb,var(--lesson-accent) 8%,var(--panel)); max-height:145px; overflow:auto; flex-shrink:0; }
.foundation-task-reminder strong { color:var(--lesson-accent); font:11px var(--display); }
.foundation-task-reminder p { font:13px/1.6 var(--body); margin:6px 0 0; }
.control-help { font:12px/1.5 var(--body); margin:0; padding:8px 16px; color:var(--muted); flex-shrink:0; }
.foundation-footer { flex-wrap:wrap; }
.foundation-footer nav { display:flex; gap:16px; flex-wrap:wrap; }
.foundation-footer a { text-underline-offset:3px; }
@media(max-width:800px){.foundation-task-reminder{max-height:none;}.foundation-content .concept-visual{max-width:100%;}}
/* Short laptop windows must not clip controls beneath a long checkpoint task. */
@media(min-width:801px) {
 .foundation-code-pane { overflow:auto; }
}

.deck-boundary { color:var(--muted); font:12px var(--mono); }

.concept-visual .visual-caption { text-anchor:middle; font-size:8px; fill:var(--muted); }
.concept-visual .visual-secondary { fill:var(--coral); stroke:var(--coral); stroke-width:1.5; }
.concept-visual .visual-negative { fill:color-mix(in srgb,var(--coral) 18%,var(--panel)); stroke:var(--coral); }