/* ARENA notebook contents — plain Colab-like tree.
   Markup and state: practice/arena-notebook-nav.js. */

/* 🔴 A DOCKED PANE, NOT A HOVER OVERLAY (Seth, 2026-09-22: "it won't have
   the hover effect anymore where it hides itself until you hover your cursor
   over it"). The page reserves exactly `--anb-pane-w` for it — see
   `.arena-notebooks-container` in arena-notebook.css — so it covers nothing
   and nothing covers it. 🪦 `.anb-toc-hit`, the transparent strip that
   revealed the old overlay, is DELETED, and with it the whole class of bug
   where that strip sat on top of the Run buttons. */
.anb-toc {
  bottom: 0;
  box-sizing: border-box;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  left: 0;
  position: fixed;
  top: var(--dd-topbar-h);
  width: var(--anb-pane-w, 320px);
  z-index: 40;
}

/* 🔴 `position: relative` IS LOAD-BEARING: the divider is absolutely placed
   against the pane's right edge. */
.anb-toc-panel {
  background: var(--bg);
  border-right: 1px solid var(--border);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px 8px 20px 14px;
  position: relative;
  width: 100%;
  z-index: 1;
}

/* ---- the frozen head: name, ⇕ chapters, book -------------------------- */

.anb-toc-head {
  align-items: center;
  display: flex;
  flex: none;
  gap: 2px;
  margin: 0 0 8px;
  min-height: 36px;
}

.anb-toc-name {
  color: var(--text);
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  padding-left: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anb-toc-icon,
.anb-toc-reopen {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  height: 32px;
  justify-content: center;
  padding: 0;
  width: 32px;
}

.anb-toc-icon:hover,
.anb-toc-reopen:hover,
.anb-toc-switch[aria-expanded="true"] {
  background: rgb(var(--info-rgb) / 0.12);
  color: var(--text);
}

/* The book on its own, when the pane is folded away: the one control left on
   screen that brings it back. */
.anb-toc-reopen {
  background: var(--surface);
  border: 1px solid var(--border);
  display: none;
  left: 10px;
  position: absolute;
  top: 10px;
}

.anb-toc.is-folded {
  bottom: auto;
  width: auto;
}

.anb-toc.is-folded .anb-toc-panel,
.anb-toc.is-folded .anb-toc-split {
  display: none;
}

.anb-toc.is-folded .anb-toc-reopen {
  display: inline-flex;
}

/* ---- the divider ------------------------------------------------------- */

/* 8px to grab, 1px to see — the panel's own border is the line; this only
   thickens and colours it while it is being pointed at or dragged. */
.anb-toc-split {
  bottom: 0;
  cursor: col-resize;
  position: absolute;
  right: -4px;
  top: 0;
  touch-action: none;
  width: 8px;
  z-index: 2;
}

.anb-toc-split::after {
  background: transparent;
  bottom: 0;
  content: "";
  left: 3px;
  position: absolute;
  top: 0;
  transition: background 80ms ease;
  width: 2px;
}

.anb-toc-split:hover::after,
.anb-toc-split:focus-visible::after,
.anb-toc.is-dragging .anb-toc-split::after {
  background: var(--info);
}

.anb-toc-split:focus-visible {
  outline: none;
}

/* Text selection chasing the pointer across the notebook mid-drag. */
.anb-toc.is-dragging,
:root:has(.anb-toc.is-dragging) body {
  cursor: col-resize;
  user-select: none;
}

/* ---- the ⇕ chapter list ------------------------------------------------ */

.anb-toc-chapters {
  display: none;
  list-style: none;
  margin: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  scrollbar-width: thin;
}

.anb-toc.is-chapters .anb-toc-chapters {
  display: block;
}

.anb-toc.is-chapters .anb-toc-rows {
  display: none;
}

.anb-toc-chapter > ol {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.anb-toc-chapter-name {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 8px 6px 4px;
}

.anb-toc-label:disabled {
  cursor: default;
  opacity: 0.45;
}

.anb-toc-label:disabled:hover {
  background: transparent;
  color: var(--muted-dim);
}

/* The notebook's name is `.anb-toc-name` in the frozen head above (Seth,
   2026-09-22, the second time that day: "[0.0] - Prerequisites (exercises)
   frozen to the top"). It is still also the rail's aria-label. */

.anb-toc-rows {
  list-style: none;
  margin: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  scrollbar-width: thin;
}

/* Their rows sit 4px apart; the irregular gaps further down their rail are
   the PROPORTIONAL spacing we deliberately dropped, not a list rhythm. */
.anb-toc-row { margin: 0 0 calc(4px * var(--anb-zoom, 1)); }

.anb-toc-label {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: var(--muted-dim);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: calc(15.08px * var(--anb-zoom, 1));
  gap: calc(6px * var(--anb-zoom, 1));
  line-height: calc(15.08px * var(--anb-zoom, 1));
  min-height: calc(27px * var(--anb-zoom, 1));
  padding: calc(6px * var(--anb-zoom, 1)) calc(6px * var(--anb-zoom, 1));
  text-align: left;
  width: 100%;
}

.anb-toc-label:hover {
  background: rgb(var(--info-rgb) / 0.08);
  color: var(--text);
}

.anb-toc-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 🪦 `.anb-toc-current` — a ▶ on the current row — is DELETED (Seth,
   2026-09-03: "you can probably just remove the triangle thing, because it's
   kind of confusing to the user"). The row's own blue-and-bold already says
   where you are; a second marker read as a control you could press. The check
   stays: it says something the row cannot say by itself. */
.anb-toc-check {
  display: none;
  flex: none;
  font-size: calc(11px * var(--anb-zoom, 1));
}

.anb-toc-row.is-current .anb-toc-label {
  background: rgb(var(--info-rgb) / 0.14);
  color: var(--info);
  font-weight: 700;
}

.anb-toc-row.is-complete:not(.is-current) .anb-toc-label {
  color: var(--ok);
  font-weight: 600;
}

.anb-toc-row.is-complete .anb-toc-check {
  color: var(--ok);
  display: inline;
  font-size: calc(14px * var(--anb-zoom, 1));
  font-weight: 700;
}

.anb-toc-row[data-level="2"] .anb-toc-label { padding-left: calc(18px * var(--anb-zoom, 1)); }
.anb-toc-row[data-level="3"] .anb-toc-label { padding-left: calc(30px * var(--anb-zoom, 1)); }
.anb-toc-row[data-level="4"] .anb-toc-label { padding-left: calc(42px * var(--anb-zoom, 1)); }

/* 🔴 NARROW: THE PANE OVERLAYS INSTEAD OF DOCKING. Under 900px a docked
   pane leaves the notebook too little to read in, so practice/arena-notebook-
   nav.js writes 0px to the page's `--anb-pane-w` there, starts the pane
   folded, and folds it again after a jump. Same number as `NARROW` in that
   file — change one, change both. */
@media (max-width: 899.98px) {
  .anb-toc-panel { box-shadow: 0 8px 28px rgb(0 0 0 / 0.28); }
  .anb-toc-split { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .anb-toc-split::after { transition: none; }
}