/* Shared look for the "from scratch" skills lessons (Python, and HTML and CSS). */
:root { --ink:#1d2733; --muted:#4a5868; --line:#c5ccd6; --panel:#f5f7fa; --accent:#0b5cad; --good:#0f6b3a; --bad:#a3231f; --mono:ui-monospace,Menlo,Consolas,monospace; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; padding:14px; font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:#fff; }
main { max-width:46em; margin:0 auto; }
h1 { font-size:1.5rem; margin:0 0 6px; } h2 { font-size:1.2rem; margin:1.4em 0 .4em; } h3 { font-size:1.05rem; margin:0 0 .3em; }
p { margin:0 0 .8em; } ul, ol { padding-left:1.4em; }
code { font-family:var(--mono); background:#f4f5f7; padding:0 .25em; border-radius:4px; }
.progress { color:var(--muted); font-weight:600; margin-bottom:10px; }
.story { background:#f3f7fc; border-radius:12px; padding:14px 16px; margin:0 0 .6em; overflow:hidden; }
.story img { float:right; width:130px; max-width:36%; height:auto; margin:0 0 6px 14px; }
.cast { font-size:.9rem; color:var(--muted); }
.exam { border-left:6px solid var(--good); background:#e8f5ee; border-radius:8px; padding:10px 14px; margin:1.2em 0; }
.aside { border-left:6px solid #8a5a00; background:#fff8d6; border-radius:8px; padding:10px 14px; margin:1.2em 0; }
.exam > strong:first-child, .aside > strong:first-child { display:block; }
table { border-collapse:collapse; margin:.6em 0; } th, td { border:1px solid var(--line); padding:4px 10px; text-align:left; } th { background:#f4f5f7; }
pre.show { font-family:var(--mono); font-size:.95rem; background:#f4f5f7; border:1px solid #d0d4da; border-radius:6px; padding:.7em 1em; overflow-x:auto; white-space:pre-wrap; }
/* A block of code the pupil can run or edit */
.code { border:1px solid var(--line); border-radius:10px; padding:12px; margin:1em 0; background:#fff; }
.code.exercise { border:2px solid var(--accent); }
.code.done { border-color:var(--good); }
.code .head { display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; margin-bottom:6px; }
.code .tag { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); }
.code.done .tag { color:var(--good); }
.code textarea { width:100%; font-family:var(--mono); font-size:.95rem; line-height:1.5; border:2px solid #5d6b7a; border-radius:8px; padding:8px 10px; resize:vertical; tab-size:4; background:#fbfcfe; color:var(--ink); white-space:pre; overflow-x:auto; }
.code .bar { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; align-items:center; }
button { font:inherit; min-height:44px; padding:8px 14px; border:2px solid var(--accent); border-radius:8px; background:#fff; color:var(--accent); font-weight:600; cursor:pointer; }
button.primary { background:var(--accent); color:#fff; }
button:disabled { border-color:var(--line); color:#6b7785; background:var(--panel); cursor:not-allowed; }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid #f0a000; outline-offset:2px; }
.console { font-family:var(--mono); font-size:.95rem; background:#10202f; color:#fff; border-radius:8px; padding:8px 10px; min-height:2.6em; white-space:pre-wrap; word-break:break-word; margin:0; }
.console .err { color:#ffb4a8; } .console .in { color:#ffe08a; }
.ask { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; }
.ask input { font:inherit; font-family:var(--mono); min-height:44px; padding:6px 10px; border:2px solid #5d6b7a; border-radius:8px; flex:1 1 10em; }
.msg { margin-top:8px; padding:8px 10px; border-radius:8px; border-left:6px solid var(--accent); background:var(--panel); }
.msg.good { border-color:var(--good); background:#e8f5ee; } .msg.bad { border-color:var(--bad); background:#fdecea; }
.msg:empty { display:none; }
.hint { color:var(--muted); font-size:.95rem; }
details summary { cursor:pointer; font-weight:600; min-height:44px; display:flex; align-items:center; }
.next { border-top:1px solid var(--line); margin-top:1.6em; padding-top:.8em; }
/* HTML and CSS lessons: editor beside a live preview */
.web { display:grid; gap:10px; grid-template-columns:minmax(0,1fr); }
@media (min-width:820px) { .web { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.tabs { display:flex; gap:6px; margin-bottom:6px; } .tabs button { min-height:40px; padding:6px 12px; } .tabs button[aria-pressed="true"] { background:var(--accent); color:#fff; }
iframe.preview { width:100%; height:300px; border:2px solid #5d6b7a; border-radius:8px; background:#fff; }
.linknote { font-size:.9rem; color:var(--muted); min-height:1.5em; }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }

/* Predict first: shown the first time an unchanged example is run */
.predict { border-left: 6px solid #8a5a00; background: #fff8d6; border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.predict label { font-weight: 700; display: block; margin-bottom: 4px; }
.predict textarea { width: 100%; box-sizing: border-box; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1rem; padding: 6px 8px; }

/* "Match it to the exam language" (runner.js): pairing reference language with Python. Not scored. */
.matchbox { border:1px solid #c5ccd6; border-left:6px solid #0b5cad; border-radius:8px; padding:10px 14px; margin:1.2em 0; background:#f7f9fc; }
.matchbox .head { display:flex; align-items:center; gap:10px; }
.matchbox .head h3 { margin:0; font-size:1.05rem; }
.matchbox .tag { background:#0b5cad; color:#fff; border-radius:999px; padding:1px 10px; font-size:.75rem; font-weight:700; }
.matchbox .two { display:grid; gap:8px 16px; grid-template-columns:minmax(0,1fr); }
@media (min-width:640px) { .matchbox .two { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.matchbox h4 { margin:.4em 0 .2em; font-size:.85rem; color:#4a5868; }
.matchbox ol { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.matchbox button[data-side] { width:100%; text-align:left; font:600 .95rem/1.35 ui-monospace,Menlo,Consolas,monospace; white-space:pre-wrap;
  background:#fff; border:2px solid #c5ccd6; border-radius:6px; padding:6px 10px; min-height:40px; cursor:pointer; color:#1d2733; }
.matchbox button[aria-pressed="true"] { background:#fff1a8; border-color:#8a5a00; }
.matchbox button.done { background:#e8f5ee; border-color:#0f6b3a; color:#0f6b3a; cursor:default; }
.matchbox button.done::after { content:" ✓"; }
.matchbox button.wrong { background:#fdecea; border-color:#a3231f; color:#a3231f; }
.matchbox .again { margin-top:8px; font-size:.9rem; min-height:40px; }
.matchbox .msg:empty { display:none; }