/* codetabs — a self-hosted "Claude | OpenAI" toggle on dual-vendor code blocks.

   Why a separate stylesheet (not course.css): shipping the Oct release's dual-vendor
   component as its own asset keeps course.css untouched during the prototype gate, so
   nothing sitewide re-versions until the component is approved. Folded decision at build:
   either keep this file (and bump its own ?v=) or inline into course.css at v46.

   Markup it styles (both panes stay in the DOM — see codetabs.js for why):
     <div class="codetabs" data-codetabs>
       <div class="ct-bar" role="tablist"> <button class="ct-tab" …>Claude</button> … </div>
       <div class="ct-pane" data-ct-pane="claude"> <pre>…</pre> <pre class="out">…</pre> </div>
       <div class="ct-pane" data-ct-pane="openai" hidden> … </div>
     </div>

   No 3rd-party CSS/CDN — same ethos as the Pyodide terminal and site-search. */

.codetabs{margin:12px 0}

/* Visible dual-vendor heading above a codetabs block. Crawlable on-page OpenAI text
   (a hidden tab pane alone is weak for SEO) without implying a separate <h2> section. */
.ct-h{font-size:15.5px;margin:14px 0 2px;color:var(--ink);font-weight:700}

/* The segmented switch. Mirrors the pill language of .callout/.tag but squared to sit
   flush on top of the <pre> it controls. */
.ct-bar{
  display:inline-flex; gap:0; margin:0 0 -1px 2px; position:relative; z-index:1;
  border:1px solid var(--code-line); border-bottom:none;
  border-radius:10px 10px 0 0; overflow:hidden; background:var(--code-bg);
}
.ct-tab{
  font:600 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  letter-spacing:.3px; color:var(--muted);
  background:transparent; border:none; cursor:pointer;
  padding:8px 15px; display:inline-flex; align-items:center; gap:6px;
  transition:color .12s,background .12s;
}
.ct-tab + .ct-tab{border-left:1px solid var(--code-line)}
.ct-tab:hover{color:var(--ink)}
.ct-tab.is-on{color:#fff}
/* Each vendor gets its own on-color so the active vendor is unmistakable at a glance. */
.ct-tab[data-ct="claude"].is-on{background:var(--brand)}
.ct-tab[data-ct="openai"].is-on{background:var(--accent)}
.ct-tab .ct-dot{width:7px;height:7px;border-radius:50%;flex:none;opacity:.9}
.ct-tab[data-ct="claude"] .ct-dot{background:var(--brand)}
.ct-tab[data-ct="openai"] .ct-dot{background:var(--accent)}
.ct-tab.is-on .ct-dot{background:#fff}

/* Pane: the active vendor's code sits under the bar. First <pre> loses its top-left radius
   so it reads as one unit with the tab bar; margin collapses so there's no gap. */
.ct-pane[hidden]{display:none}
.ct-pane > pre:first-of-type{margin-top:0;border-top-left-radius:0}

/* Keyboard focus visibility (tabs are real buttons, arrow-key navigable in codetabs.js). */
.ct-tab:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

@media (prefers-color-scheme:dark){
  /* Site is light-only today; this is a harmless no-op guard if a dark theme ever lands. */
  .ct-bar{background:var(--code-bg)}
}