/* ARENA LOOK — the ARENA notebook page dressed as arena-site's notebook page.
   Seth, 2026-11-02: copy arena-site's notebook "exactly": the left sidebar,
   the notebook, the floating rounded rectangles, the formatting.

   Two sheets:
     • styles/practice/arena-site/vendor.css — arena-site's OWN rules and
       design tokens (sidebar, breadcrumb, markdown, pager, HUD boxes),
       GENERATED by scripts/vendor_arena_site_css.py. Never hand-edit it.
     • this file — Delta Drills' markup (nbv-* cells, the notch, the unit
       footer) dressed in those tokens, and the docking of the sidebar that
       practice/arena-look.js builds.

   Every rule is keyed on `html.dd-arena-run:not(.dd-arena-classic)`:
   run-mode.js's class for "the ARENA notebook is on screen" (decided from the
   page, never from how it was loaded — see arena-look.js), minus the
   `?look=classic` switch. Colours are arena-site's tokens only (`--color-*`,
   `--nb-*`), so the light and dark palettes follow DD's data-theme through
   vendor.css. */

/* arena-site's heading and code faces (Inter, its body face, is vendored in
   vendor/fonts/). 🔴 UNDER PRIVATE NAMES, not Google's `@import`: DD's
   --code-font (styles/variables.css) falls back to "Fira Code", so a global
   'Fira Code' face would re-font every code block in the app wherever
   JetBrains Mono is not installed. Google's latin variable files (one file
   covers both weights); offline these fall back through the stacks below. */
@font-face {
  font-family: "DD Arena Montserrat";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format("woff2");
}
@font-face {
  font-family: "DD Arena Fira Code";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firacode/v27/uU9NCBsR6Z2vfE9aq3bh3dSD.woff2) format("woff2");
}

/* ---- tokens --------------------------------------------------------------- */
/* arena-site sets --nav-height: 0 on a notebook page (no top bar); DD's run
   mode does the same through --dd-topbar-h. One number for both. The two
   faces above, by their private names (same selector as vendor.css's tokens,
   loaded after it, so these win). */
html.dd-arena-run:not(.dd-arena-classic) {
  --nav-height: var(--dd-topbar-h, 0px);
  --font-heading: "DD Arena Montserrat", "Montserrat", sans-serif;
  --font-mono: "DD Arena Fira Code", "Fira Code", "Consolas", monospace;
}
html.dd-arena-run:not(.dd-arena-classic) body,
html.dd-arena-run:not(.dd-arena-classic) .main,
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as {
  background: var(--color-bg);
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as {
  color: var(--color-text);
  font-family: var(--font-body);
}

/* What arena-look.js adds to the page is only ever shown under the look: the
   page can drop out of run mode (or the switch go classic) with them still in
   the DOM, and unstyled they would be a raw list over the notebook. */
html:not(.dd-arena-run) #page-arena-notebook :is(.dd-as-side, .dd-as-reopen, .breadcrumb),
html.dd-arena-classic #page-arena-notebook :is(.dd-as-side, .dd-as-reopen, .breadcrumb) {
  display: none;
}

/* ---- the left sidebar: arena-site's, docked like DD's contents pane ------- */
/* DD's own contents tree stays in the page (the sidebar presses its rows and
   reads its classes) but is not shown. */
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .anb-toc {
  display: none;
}
/* arena-site's sidebar is a sticky flex child of .chapter-layout; DD's page
   has no such row, so it is fixed to the window's left edge instead, from the
   top (no bar above it), at the same width. */
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .chapter-sidebar {
  bottom: 0;
  height: auto;
  left: 0;
  position: fixed;
  top: var(--nav-height);
  z-index: 40;
}
/* The notebook takes everything right of it. nav.js writes an inline
   --anb-pane-w for its own (hidden) pane, so the margin is set here instead
   of through that token. */
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .arena-notebooks-container {
  margin-left: var(--sidebar-width);
  padding: 0 var(--spacing-xl);
  transition: margin-left 0.2s ease;
}
html.dd-arena-run.dd-as-side-closed:not(.dd-arena-classic) #page-arena-notebook.dd-as .arena-notebooks-container,
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as.dd-nb-focus .arena-notebooks-container {
  margin-left: 0;
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as.dd-nb-focus .chapter-sidebar,
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as.dd-nb-focus .dd-as-reopen {
  display: none;
}
/* arena-site's base `a { color: inherit; text-decoration: none }` — a bare
   element rule, so the vendoring script does not copy it. */
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as :is(.chapter-sidebar, .breadcrumb) a {
  color: inherit;
  text-decoration: none;
}
/* A section not in the app yet: listed, as arena-site lists every one, but
   quiet and not a link. */
html.dd-arena-run:not(.dd-arena-classic) .dd-as .section-link.is-closed {
  cursor: default;
  opacity: 0.45;
}
/* Red = DD's "missed" (an exercise answered wrong), arena-site's green
   done-row with the bad colour. */
html.dd-arena-run:not(.dd-arena-classic) .dd-as .subsection-link.nb-missed,
html.dd-arena-run:not(.dd-arena-classic) .dd-as .toc-link.nb-missed {
  align-items: center;
  color: var(--nb-bad) !important;
  display: flex;
  gap: 6px;
}
html.dd-arena-run:not(.dd-arena-classic) .dd-as .subsection-link.nb-missed::after,
html.dd-arena-run:not(.dd-arena-classic) .dd-as .toc-link.nb-missed::after {
  content: "✕";
  font-size: 12px;
  font-weight: 700;
  margin-left: auto;
}

/* ---- the column ----------------------------------------------------------- */
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-cells,
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .anb-unit-step,
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-banner {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--content-max-width);
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .breadcrumb {
  margin-top: var(--spacing-md);
}

/* ---- prose: arena-site's markdown, not DD's serif lesson scale ------------- */
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-md {
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-md p {
  margin: 0 0 var(--spacing-md);
}
/* DD bolds prose links; arena-site keeps them at text weight. */
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-md a {
  font-weight: inherit;
}
/* DD centres a notebook's title; arena-site sets every heading flush left. */
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-md :is(h1, h2, h3, h4, h5, h6) {
  text-align: left;
}
/* The title card is hidden in run mode; its rule under the banner goes too. */
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .arena-nb-head {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ---- code cells: arena-site's `.codehilite.nb-cell` ----------------------- */
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-cell {
  margin: var(--spacing-md) 0;
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-code {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-gutter {
  border-right: 1px solid var(--color-border);
  gap: 6px;
  min-width: 48px;
  padding: 12px 0;
  width: 48px;
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-run {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  display: grid;
  font-size: 11px;
  height: 28px;
  padding: 0;
  place-items: center;
  transition: all var(--transition-fast);
  width: 28px;
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-run:hover {
  border-color: var(--color-text-muted);
  color: var(--color-text);
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-count {
  color: var(--color-text-muted);
  font: 11px/1 var(--font-mono);
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-src {
  padding: 12px 14px;
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-src code {
  font: 0.875rem/1.6 var(--font-mono);
}
/* Line numbers (notebook-view.css draws them from data-lines): arena-site's
   `.nb-ln`, and at the code's own size so each number sits on its line. */
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-src[data-lines]::before {
  border-right-color: var(--color-border);
  color: var(--color-text-muted);
  font: 0.875rem/1.6 var(--font-mono);
  opacity: 0.7;
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-checker-note {
  color: var(--color-text-secondary);
  font: 0.9rem/1.6 var(--font-body);
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-out {
  border-top: 1px dashed var(--color-border);
  color: var(--color-text-secondary);
  font: 0.85rem/1.6 var(--font-mono);
  padding: 10px 14px;
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-out.is-error {
  color: var(--nb-bad);
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-status {
  color: var(--color-text-muted);
  font: italic 0.8rem var(--font-body);
  padding: 4px 14px 0;
}
/* Run state = arena-site's 3px inset bar on the left edge, not a border
   colour: ok green, failed red, running amber. Order matters (same
   specificity): running and failed win over a stale "has run". */
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-cell.nbv-code.has-run {
  border-color: var(--color-border);
  box-shadow: inset 3px 0 0 var(--nb-ok);
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-cell.has-run .nbv-count {
  color: var(--nb-ok);
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-cell.nbv-code.has-failed {
  border-color: var(--color-border);
  box-shadow: inset 3px 0 0 var(--nb-bad);
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-cell.has-failed .nbv-count {
  color: var(--nb-bad);
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-cell.nbv-code.is-running {
  border-color: var(--color-border);
  box-shadow: inset 3px 0 0 var(--nb-warn);
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-cell.is-running .nbv-count {
  color: var(--nb-warn);
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .nbv-cell.nbv-code:focus-within {
  border-color: var(--color-text-muted);
}

/* Hints / solutions: arena-site's <details> in markdown. */
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as details.nbv-cell {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as details.nbv-cell > summary {
  color: var(--color-text-secondary);
  cursor: pointer;
  font-weight: 600;
}

/* ---- the floating rounded rectangles: arena-site's .hud-box --------------- */
/* Centred over the notebook column, not the window. */
html.dd-arena-run:not(.dd-arena-classic):not(.dd-as-side-closed) .practice-notch {
  left: calc(50% + var(--sidebar-width) / 2);
}
html.dd-arena-run:not(.dd-arena-classic) .practice-notch {
  height: 56px;
  top: 12px;
}
html.dd-arena-run:not(.dd-arena-classic) .practice-notch-tab,
html.dd-arena-run:not(.dd-arena-classic) .run-bar,
html.dd-arena-run:not(.dd-arena-classic) .anb-hud-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  font: 600 15px var(--font-body);
}
html.dd-arena-run:not(.dd-arena-classic) .practice-notch-tab {
  padding: 0 18px;
}
html.dd-arena-run:not(.dd-arena-classic) .practice-notch-clock {
  font: 500 28px var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
html.dd-arena-run:not(.dd-arena-classic) .anb-hud-btn:hover {
  border-color: var(--color-text-muted);
}

/* ---- ← / → under the unit: arena-site's subsection pager ------------------ */
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .anb-unit-step {
  border-top: 1px solid var(--color-border);
  gap: var(--spacing-md);
  margin-bottom: 3.5rem;
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-lg);
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .anb-unit-step button {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  flex: 0 1 48%;
  font: 0.9375rem/1.4 var(--font-body);
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: left;
  transition: all var(--transition-fast);
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .anb-unit-step .anb-unit-next {
  text-align: right;
}
html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .anb-unit-step button:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

/* ---- narrow windows: arena-site stacks the sidebar above the page --------- */
/* vendor.css carries arena-site's own stacked rules (full width, 50vh, no
   collapsed state); this only undoes the fixed docking above. */
@media (max-width: 768px) {
  html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .chapter-sidebar {
    bottom: auto;
    position: relative;
    top: 0;
  }
  html.dd-arena-run:not(.dd-arena-classic) #page-arena-notebook.dd-as .arena-notebooks-container {
    margin-left: 0;
    padding: 0 var(--spacing-md);
  }
  html.dd-arena-run:not(.dd-arena-classic):not(.dd-as-side-closed) .practice-notch {
    left: 50%;
  }
}