/* ============================================================
   Worked example pages: /code/<name>/

   Built by site-tools/build-code.mjs. Reuses the chapter shell, so this
   only carries what a code page adds: the launcher, the run list and the
   highlighted source.
   ============================================================ */

.cd-col { max-width: 46rem; }

.cd-lede { font-size: 1.08rem; color: var(--ink-2); }

.cd-meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  margin: 1.4rem 0 2.4rem; padding: .9rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
  font-size: .85rem; color: var(--ink-2);
}
.cd-meta b {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--mut); font-weight: 600;
  margin-right: .4rem;
}
.cd-meta code { font-size: .78rem; }

/* ---------- the Colab launcher ---------- */
.cd-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  margin-bottom: 1.4rem; }
.cd-actions .btn { padding: .6rem 1.1rem; font-size: .86rem; }
/* The button is an <a> inside .ch-col, and .ch-col a paints links in --acid
   and underlines them. On .btn-primary, whose background is also --acid, that
   left the label invisible. These two win on specificity. */
.cd-col a.btn { color: var(--ink); text-decoration: none; }
.cd-col a.btn-primary { color: var(--on-accent); }

.cd-alt { font-size: .89rem; color: var(--mut); }
.cd-alt code { font-size: .8rem; }

/* ---------- what to try ---------- */
.cd-runs { list-style: none; margin: 1.2rem 0 2rem; padding: 0; display: grid; gap: .8rem; }
.cd-runs li {
  padding: .9rem 1.05rem; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--card);
}
.cd-runs .cmd {
  display: inline-block; background: var(--bg-2);
  border-color: var(--line-2); color: var(--acid); font-size: .82rem;
}
.cd-runs p { margin: .55rem 0 0; font-size: .89rem; line-height: 1.62; color: var(--ink-2); }

/* ---------- source ---------- */
.cd-src { max-height: 34rem; overflow: auto; }
.cd-src code { font-size: .8rem; line-height: 1.62; }
.cd-src .k { color: var(--violet); }
.cd-src .s { color: var(--acid); }
.cd-src .c { color: var(--mut); font-style: italic; }
.cd-src .n { color: var(--cyan); }

/* the highlighter's own class names collide with nothing else here, but the
   chapter stylesheet gives every <code> a chip background. Undo it inside a
   listing, where the chips would stripe the code. */
.cd-src code { background: none; border: 0; padding: 0; }

/* ---------- the /code/ index ----------
   Not linked from the nav: the code lives in the chapters. This page exists so
   that a bookmarked or hand-typed /code/ URL lands somewhere useful. */
/* site.css pads bare <section> elements for the home page's full-bleed bands;
   this one is a list inside a reading column. */
.cd-index { margin-top: 2.2rem; padding: 0; }
.cd-index > h2 {
  font-size: .72rem; font-family: var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--acid);
  margin: 0 0 .6rem; padding: 0; border: 0;
}
.cd-index ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.cd-index li { margin: 0; }
.cd-index a {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  padding: .6rem .85rem; border-radius: var(--r);
  border: 1px solid transparent; text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}
.cd-index a:hover { background: var(--card-2); border-color: var(--line); transform: translateX(3px); }
.cd-index code { font-size: .74rem; color: var(--mut); flex: none; }
.cd-index a:hover code { color: var(--acid); }
.cd-index span { font-weight: 550; font-size: .95rem; color: var(--ink); }