/* =====================================================================
   codetab.css — the "Math | Python" tab (js/codetab.js + js/codetab-panel.js).
   Every rule is scoped to .ct-* / #ct-py so nothing leaks into other pages; colours come
   from tokens.css, so the dark theme and the palettes work unchanged.
   ===================================================================== */

/* ---- the Math | Python strip ---- */
.ct-tabs{display:flex;gap:4px;margin:18px 0 6px;border-bottom:1px solid var(--line)}
.ct-tabs [role=tab]{flex:0 0 auto;min-height:44px;padding:0 20px;border:0;background:none;color:var(--muted);
  font:600 14.5px var(--sans);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;border-radius:8px 8px 0 0;
  display:inline-flex;align-items:center;gap:7px}
.ct-tabs [role=tab]:hover{color:var(--ink);background:var(--panel-2)}
.ct-tabs [role=tab][aria-selected=true]{color:var(--accent-ink,var(--accent));border-bottom-color:var(--accent)}
.ct-tabs [role=tab]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media(max-width:560px){.ct-tabs [role=tab]{flex:1 1 0;justify-content:center;padding:0 8px}}
#ct-math[hidden],#ct-py[hidden]{display:none}

/* ---- bridge card: the last thing in the Math tab, just above Practice ---- */
.ct-bridge{display:flex;align-items:center;gap:13px;width:100%;margin:26px 0 4px;padding:14px 18px;min-height:56px;text-align:start;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;color:var(--ink);font:inherit;cursor:pointer}
.ct-bridge:hover{border-color:var(--accent)}
.ct-bridge:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ct-bridge-t{flex:1;font:600 14.5px var(--sans)}
.ct-snake{font-size:20px}
:root[dir=rtl] .ct-arrow{display:inline-block;transform:scaleX(-1)}

/* ---- the Python panel ---- */
#ct-py .ct-title{font:600 1.25rem var(--sans);margin:22px 0 0}
.ct-skel{display:grid;gap:10px;margin:24px 0}
.ct-skel i{display:block;height:14px;border-radius:6px;background:var(--panel-2)}
.ct-skel i.s{width:55%}
#ct-py .ct-sec{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:38px 0 4px}
#ct-py .ct-sec .sec-h{margin:0}
#ct-py .sec-h{scroll-margin-top:calc(var(--topbarh) + 14px)}
.ct-fig{font:600 11.5px var(--sans);letter-spacing:.02em;padding:4px 10px;border-radius:99px;min-height:28px;
  border:1px solid var(--line);background:var(--panel);color:var(--accent-ink,var(--accent));cursor:pointer}
.ct-fig:hover{border-color:var(--accent)}
.ct-fig:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Editable code: a highlighted <pre> sizes the box and a transparent <textarea> lies exactly over it
   (no JS measuring). contain:inline-size takes the box out of intrinsic sizing, so a long line scrolls
   INSIDE the box instead of widening the page grid on a phone (.shell is "1fr" = minmax(auto,1fr), the
   latent overflow the Python-course lessons share; fixing it for the tab only, on purpose). */
#ct-py .codeblk{contain:inline-size}
.ct-code{direction:ltr;text-align:left}
.ct-edit{overflow-x:auto;background:var(--panel)}
.ct-in{position:relative;width:max-content;min-width:100%}
.ct-in pre.code{margin:0;padding:12px 16px 14px;white-space:pre;overflow:visible;pointer-events:none;min-height:3em}
.ct-ta{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:12px 16px 14px;border:0;outline:0;resize:none;overflow:hidden;white-space:pre;
  background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--ink);font:.875rem/1.65 var(--mono);tab-size:4}
.ct-ta::selection{background:var(--accent-soft);-webkit-text-fill-color:var(--ink);color:var(--ink)}
.ct-edit:focus-within{box-shadow:inset 0 0 0 2px var(--accent)}
.ct-bar{display:flex;gap:8px;padding:8px 12px;border-top:1px dashed var(--line-2);flex-wrap:wrap}
.ct-static{direction:ltr;text-align:left}
#ct-py .codeout pre{white-space:pre-wrap}
#ct-py .codeout pre.err{color:var(--bad)}
#ct-py .codeout pre.ct-hint,#ct-py .codeout pre.ct-none{color:var(--muted);font-style:italic}

/* iOS Safari zooms the page when a field under 16px is focused (the site's own .pnum input is 16px for the same reason).
   Both layers must keep identical metrics, so the pair grows together; a long line then scrolls inside its box. */
@media (pointer:coarse){.ct-in pre.code,.ct-ta{font-size:16px}}