/* Programming course (subject "programming"): code blocks, code exercises, parsons, wide desktop layout, track palettes.
   Code block styles apply anywhere a <pre class="code"> appears; layout rules are scoped to :root[data-subject="programming"] (set by app.js),
   so the English courses keep their phone-column look. */
:root{--code-bg:#f4f6fb;--code-fg:#1f2937;--code-bd:#d3dae8;--c-kw:#7c3aed;--c-str:#15803d;--c-com:#6b7280;--c-num:#b45309;--c-bi:#0369a1;--c-dec:#be185d;--c-blank:#e11d48;--code-font:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
:root[data-theme="dark"]{--code-bg:#0f172a;--code-fg:#e5e7eb;--code-bd:#334155;--c-kw:#c4b5fd;--c-str:#86efac;--c-com:#94a3b8;--c-num:#fcd34d;--c-bi:#7dd3fc;--c-dec:#f9a8d4;--c-blank:#fda4af}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--code-bg:#0f172a;--code-fg:#e5e7eb;--code-bd:#334155;--c-kw:#c4b5fd;--c-str:#86efac;--c-com:#94a3b8;--c-num:#fcd34d;--c-bi:#7dd3fc;--c-dec:#f9a8d4;--c-blank:#fda4af}}
:root[data-subject="programming"]{--brand2:#8b5cf6}

/* ---- code block ---- */
pre.code{margin:0;padding:12px 14px;border:2px solid var(--code-bd);border-radius:14px;background:var(--code-bg);color:var(--code-fg);font:500 14px/1.6 var(--code-font);overflow-x:auto;tab-size:4;text-align:left;max-width:100%;box-sizing:border-box;-webkit-overflow-scrolling:touch}
pre.code code{display:block;min-width:max-content;font:inherit}
.cl{display:block;white-space:pre}
pre.code.code-ln{counter-reset:ln}
.code-ln .cl{counter-increment:ln;padding-left:2.5em;position:relative}
.code-ln .cl::before{content:counter(ln);position:absolute;left:0;width:1.9em;text-align:right;color:var(--c-com);opacity:.75;user-select:none}
.tk-kw{color:var(--c-kw);font-weight:700}.tk-str{color:var(--c-str)}.tk-com{color:var(--c-com);font-style:italic}.tk-num{color:var(--c-num)}.tk-bi{color:var(--c-bi)}.tk-dec{color:var(--c-dec)}
.tk-blank{color:var(--c-blank);background:rgba(225,29,72,.14);border-radius:5px;padding:0 3px;font-weight:800}
pre.code:focus-visible,.ptile:focus-visible,:root[data-subject="programming"] :is(.lopt,.wtile,.mtile,.linput,.lcheck,.dnext):focus-visible{outline:3px solid var(--focus,#2563eb);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:480px){.code-ln .cl{padding-left:0}.code-ln .cl::before{display:none}}

/* ---- terms and intro ---- */
.code-term{font-family:var(--code-font);font-weight:800;font-size:1.6rem;letter-spacing:0}
.intro-sec.intro-code pre.code{font-size:14px}
.dayintro{min-width:0}

/* ---- code exercise: code + question ---- */
.cstep{display:flex;flex-direction:column;gap:14px;min-width:0}
.cs-code,.cs-q{min-width:0;display:flex;flex-direction:column;gap:12px}
.predict-badge{display:inline-block;font:800 .72rem/1 var(--font,inherit);text-transform:uppercase;letter-spacing:.06em;background:var(--brand2);color:#fff;border-radius:999px;padding:4px 9px;margin-right:8px;vertical-align:middle}
.lopt-code .opt-t,.linput-code,.mtile-code,.wtile-code{font-family:var(--code-font)}
.lopt .opt-t{min-width:0;overflow-wrap:anywhere}
.linput-code{font-size:1rem;font-weight:600}
.bline-code .wtile,.bbank .wtile-code{font-size:1rem}

/* ---- parsons ---- */
.phint{font-size:.9rem;color:var(--muted)}
.phead{font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.ptarget,.pbank{display:flex;flex-direction:column;gap:8px;min-height:64px;padding:10px;border:3px dashed var(--code-bd);border-radius:16px;min-width:0}
.ptarget.dragover,.pbank.dragover{border-color:var(--brand2);background:rgba(139,92,246,.08)}
.pempty{color:var(--muted);font-size:.9rem;padding:14px 4px;text-align:center}
.ptile{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:500 14px/1.45 var(--code-font);min-height:48px;padding:9px 12px;border:2px solid var(--code-bd);border-bottom-width:4px;border-radius:12px;background:var(--code-bg);color:var(--code-fg);cursor:grab;overflow-x:auto;box-sizing:border-box;touch-action:manipulation}
.ptile.placed{border-color:var(--brand2)}
.ptile.dragging{opacity:.4}
.ptile .pn{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--brand2);color:#fff;font:800 .75rem/1 var(--font,inherit)}
.pline{white-space:pre;display:block;min-width:max-content}
.ptile.right{border-color:var(--green);background:var(--greenS,#dff7c8);color:#1f2937}
.ptile.wrong{border-color:#e11d48}

/* ---- answer feedback shows the expected code ---- */
.sheet .expected.code-exp{font-family:var(--code-font);white-space:pre-wrap;text-align:left}
.fb.code-exp,pre.code-exp{font-family:var(--code-font);white-space:pre-wrap;margin:6px 0;text-align:left}

/* ---- desktop: wide column, two panes ---- */
@media (min-width:1024px){
  :root[data-subject="programming"] body.in-lesson,:root[data-subject="programming"] body.in-deck{--col:1040px}
  :root[data-subject="programming"] pre.code{font-size:15.5px;padding:14px 18px}
  :root[data-subject="programming"] .code-ln .cl::before{display:block}
  :root[data-subject="programming"] .code-ln .cl{padding-left:2.5em}
  :root[data-subject="programming"] .cstep.has-code{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
  :root[data-subject="programming"] .cstep.has-code .cs-code{position:sticky;top:8px}
  :root[data-subject="programming"] .ltitle{font-size:1.5rem}
  :root[data-subject="programming"] .cs-parsons .cs-q{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;align-items:start}
  :root[data-subject="programming"] .cs-parsons .ltitle,:root[data-subject="programming"] .cs-parsons .phint{grid-column:1 / -1}
  :root[data-subject="programming"] .cs-parsons .ptarget{grid-column:1;grid-row:3 / span 2;min-height:200px}
  :root[data-subject="programming"] .cs-parsons .phead{grid-column:2;grid-row:3}
  :root[data-subject="programming"] .cs-parsons .pbank{grid-column:2;grid-row:4}
  :root[data-subject="programming"] .ptile{font-size:15.5px}
  :root[data-subject="programming"] .lopts{max-width:640px}
  :root[data-subject="programming"] .dayintro:has(.intro-code),:root[data-subject="programming"] .dcard.code-intro:has(.intro-code){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:32px;align-items:start}
  :root[data-subject="programming"] .dayintro:has(.intro-code)>*,:root[data-subject="programming"] .dcard.code-intro:has(.intro-code)>*{grid-column:1}
  :root[data-subject="programming"] .dayintro:has(.intro-code)>.ltitle,:root[data-subject="programming"] .dayintro:has(.intro-code)>.intro-title,:root[data-subject="programming"] .dcard.code-intro:has(.intro-code)>.dh2,:root[data-subject="programming"] .dcard.code-intro:has(.intro-code)>.intro-title{grid-column:1 / -1}
  :root[data-subject="programming"] .dayintro .intro-sec.intro-code,:root[data-subject="programming"] .dcard.code-intro .intro-sec.intro-code{grid-column:2;grid-row:2 / span 8;position:sticky;top:8px}
  :root[data-subject="programming"] .dcard{padding:24px 28px}
}
@media (min-width:1024px) and (max-width:1199px){:root[data-subject="programming"] body.in-lesson,:root[data-subject="programming"] body.in-deck{--col:960px}}

/* ---- programming tracks reuse the pastel sets of theme.css (python=blue, typescript=sky, sql=orange, fastapi=green, git=coral, testing=purple) ---- */
.tk-python,.chip.python,.node.t-python,.ubanner.t-python,.lvl.python{--bg:#cfe8ff;--bd:#9bcdf5;--inner:#eef7ff;--badge:#1e4f9c;--pill:#b5dcff}
.tk-typescript,.chip.typescript,.node.t-typescript,.ubanner.t-typescript,.lvl.typescript{--bg:#d3ecff;--bd:#7cbcf0;--inner:#f0f8ff;--badge:#0d4a7a;--pill:#b0dafc}
.tk-sql,.chip.sql,.node.t-sql,.ubanner.t-sql,.lvl.sql{--bg:#ffdcc2;--bd:#f5b27c;--inner:#fff3e8;--badge:#8a3d0a;--pill:#ffc99a}
.tk-fastapi,.chip.fastapi,.node.t-fastapi,.ubanner.t-fastapi,.lvl.fastapi{--bg:#d3f2c4;--bd:#99d983;--inner:#f0fbe9;--badge:#2b6b25;--pill:#b5e8a0}
.tk-git,.chip.git,.node.t-git,.ubanner.t-git,.lvl.git{--bg:#ffd6d1;--bd:#f59a8f;--inner:#fff1ef;--badge:#8a2318;--pill:#ffbdb4}
.tk-testing,.chip.testing,.node.t-testing,.ubanner.t-testing,.lvl.testing{--bg:#e5d6fb;--bd:#bfa2f2;--inner:#f6f0ff;--badge:#5a2fa0;--pill:#d6bffa}
:root[data-theme="dark"] .tk-python,:root[data-theme="dark"] .chip.python,:root[data-theme="dark"] .node.t-python,:root[data-theme="dark"] .ubanner.t-python,:root[data-theme="dark"] .lvl.python{--bg:#1c3560;--bd:#3f6fb0;--inner:#14264a;--badge:#b8dcff;--pill:#2b5a98}
:root[data-theme="dark"] .tk-typescript,:root[data-theme="dark"] .chip.typescript,:root[data-theme="dark"] .node.t-typescript,:root[data-theme="dark"] .ubanner.t-typescript,:root[data-theme="dark"] .lvl.typescript{--bg:#123552;--bd:#4a8cc0;--inner:#0b2338;--badge:#cfe8ff;--pill:#235a85}
:root[data-theme="dark"] .tk-sql,:root[data-theme="dark"] .chip.sql,:root[data-theme="dark"] .node.t-sql,:root[data-theme="dark"] .ubanner.t-sql,:root[data-theme="dark"] .lvl.sql{--bg:#58300f;--bd:#b57a3c;--inner:#3b200a;--badge:#ffd9b3;--pill:#8a5320}
:root[data-theme="dark"] .tk-fastapi,:root[data-theme="dark"] .chip.fastapi,:root[data-theme="dark"] .node.t-fastapi,:root[data-theme="dark"] .ubanner.t-fastapi,:root[data-theme="dark"] .lvl.fastapi{--bg:#1d4220;--bd:#3f8a45;--inner:#142e16;--badge:#bff0b0;--pill:#2f6a35}
:root[data-theme="dark"] .tk-git,:root[data-theme="dark"] .chip.git,:root[data-theme="dark"] .node.t-git,:root[data-theme="dark"] .ubanner.t-git,:root[data-theme="dark"] .lvl.git{--bg:#55211b;--bd:#b5584c;--inner:#3a1511;--badge:#ffd6d1;--pill:#8a3a30}
:root[data-theme="dark"] .tk-testing,:root[data-theme="dark"] .chip.testing,:root[data-theme="dark"] .node.t-testing,:root[data-theme="dark"] .ubanner.t-testing,:root[data-theme="dark"] .lvl.testing{--bg:#3a2866;--bd:#7456b8;--inner:#271a49;--badge:#dccbff;--pill:#58409a}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tk-python,:root:not([data-theme="light"]) .chip.python,:root:not([data-theme="light"]) .node.t-python,:root:not([data-theme="light"]) .ubanner.t-python,:root:not([data-theme="light"]) .lvl.python{--bg:#1c3560;--bd:#3f6fb0;--inner:#14264a;--badge:#b8dcff;--pill:#2b5a98}
  :root:not([data-theme="light"]) .tk-typescript,:root:not([data-theme="light"]) .chip.typescript,:root:not([data-theme="light"]) .node.t-typescript,:root:not([data-theme="light"]) .ubanner.t-typescript,:root:not([data-theme="light"]) .lvl.typescript{--bg:#123552;--bd:#4a8cc0;--inner:#0b2338;--badge:#cfe8ff;--pill:#235a85}
  :root:not([data-theme="light"]) .tk-sql,:root:not([data-theme="light"]) .chip.sql,:root:not([data-theme="light"]) .node.t-sql,:root:not([data-theme="light"]) .ubanner.t-sql,:root:not([data-theme="light"]) .lvl.sql{--bg:#58300f;--bd:#b57a3c;--inner:#3b200a;--badge:#ffd9b3;--pill:#8a5320}
  :root:not([data-theme="light"]) .tk-fastapi,:root:not([data-theme="light"]) .chip.fastapi,:root:not([data-theme="light"]) .node.t-fastapi,:root:not([data-theme="light"]) .ubanner.t-fastapi,:root:not([data-theme="light"]) .lvl.fastapi{--bg:#1d4220;--bd:#3f8a45;--inner:#142e16;--badge:#bff0b0;--pill:#2f6a35}
  :root:not([data-theme="light"]) .tk-git,:root:not([data-theme="light"]) .chip.git,:root:not([data-theme="light"]) .node.t-git,:root:not([data-theme="light"]) .ubanner.t-git,:root:not([data-theme="light"]) .lvl.git{--bg:#55211b;--bd:#b5584c;--inner:#3a1511;--badge:#ffd6d1;--pill:#8a3a30}
  :root:not([data-theme="light"]) .tk-testing,:root:not([data-theme="light"]) .chip.testing,:root:not([data-theme="light"]) .node.t-testing,:root:not([data-theme="light"]) .ubanner.t-testing,:root:not([data-theme="light"]) .lvl.testing{--bg:#3a2866;--bd:#7456b8;--inner:#271a49;--badge:#dccbff;--pill:#58409a}
}
:root[data-subject="programming"] .tabbar [data-nav="grammar"]{display:none}