/* ARENA NOTEBOOK, RUN VIEW — Seth, 2026-10-17.
   The floating Exit / ⚙ (Pause exercise / ⋯ while an exercise's clock runs)
   beside the timer and the XP bar (practice/arena-notebook-hud.js),
   and one sub-subsection at a time (practice/arena-notebook-units.js). The
   tutor bottom-left is Chatwoot's (feedback-widget/tutor_bubble.js, 2026-10-26).
   The band the timer used to sit in is gone in styles/run-mode.css.
   Token-only colours. */

/* ---- the toolbar's buttons live on in the HUD; the bar goes -------------- */
html.dd-arena-run #page-arena-notebook .nbv-toolbar {
  display: none;
}
/* The notebook's title card (chapter, title, "Read, try…", the exercise
   picker) is not this unit; the compute line and banners stay. */
html.dd-arena-run #page-arena-notebook .arena-nb-head > :not(.arena-nb-compute) {
  display: none;
}
html.dd-arena-run #page-arena-notebook {
  padding-top: 72px;   /* clear the floating row */
}

/* ---- Exit and ⚙: the timer's and the box's rounded rectangles ------------ */
.anb-hud-btn,
.anb-hud-cog-wrap {
  display: none;
}
html.dd-arena-run .anb-hud-btn,
html.dd-arena-run .anb-hud-cog-wrap {
  display: inline-flex;
}
.anb-hud-btn {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;   /* = the timer tab's and the run bar's */
  box-shadow: 0 6px 20px var(--shadow-soft);
  color: var(--text);
  cursor: pointer;
  flex: none;
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  justify-content: center;
  padding: 0 18px;
  transition: border-color 120ms ease, transform 120ms ease;
}
.anb-hud-btn:hover {
  border-color: var(--border-strong);
}
.anb-hud-btn:active {
  transform: scale(0.97);
}
.anb-hud-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.anb-hud-cog-wrap {
  position: relative;
}
.anb-hud-cog {
  padding: 0 14px;
}
.anb-hud-cog svg {
  color: var(--muted);
  transition: color 120ms ease, transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.anb-hud-cog:hover svg,
.anb-hud-cog[aria-expanded="true"] svg {
  color: var(--text);
  transform: rotate(45deg);
}
.anb-hud-menu {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 28px var(--shadow-soft);
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
}
.anb-hud-menu[hidden] {
  display: none;
}
.anb-hud-item {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  padding: 9px 12px;
  text-align: left;
}
.anb-hud-item:hover,
.anb-hud-item:focus-visible {
  background: var(--surface);
  outline: none;
}
/* ---- reading vs practising (Seth, 2026-11-02, as arena-site's row) ------- */
/* Reading: no clock box at all (it said --:--); the clock comes up with an
   exercise's timer (practice/arena-notebook-hud.js marks `anb-ex-live`). */
html.dd-arena-run:not(.anb-ex-live) .practice-notch-tab {
  display: none;
}
/* Practising: the clock's own ‖ is the one pause; Exit is back once paused. */
html.dd-arena-run.anb-ex-live .anb-hud-exit {
  display: none;
}
/* Left to right: Exit (or the ‖ + clock), the XP bar, ⚙ / ⋯. The
   bar is built after the ⚙ (practice/run-bar.js, on first paint), so the
   order is set here rather than by DOM order. */
html.dd-arena-run .anb-hud-exit { order: 1; }
html.dd-arena-run .practice-notch-tab { order: 2; }
html.dd-arena-run .run-bar,
html.dd-arena-run .run-next { order: 3; }
html.dd-arena-run .anb-hud-cog-wrap { order: 4; }
.anb-hud-dots {
  font-size: 22px;
  line-height: 1;
}
.anb-hud-sep {
  border-top: 1px solid var(--border);
  margin: 4px 6px;
}
/* The notch is centred by `left: 50%`: as wide as its boxes (cf. labs-pane.css). */
@media (min-width: 761px) {
  html.dd-arena-run .practice-notch {
    max-width: calc(100% - 24px);
    width: max-content;
  }
}
@media (max-width: 760px) {
  .anb-hud-btn {
    font-size: 14px;
    padding: 0 10px;
  }
  /* The folded contents pane's book sat at top 10px, under Exit. */
  html.dd-arena-run .anb-toc-reopen {
    top: 72px;
  }
}

/* ---- one unit at a time ---------------------------------------------------- */
#page-arena-notebook .anb-unit-off {
  display: none !important;
}
.anb-unit-step {
  display: none;
}
html.dd-arena-run .anb-unit-step {
  border-top: 1px solid var(--border);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 32px 0 48px;
  padding-top: 16px;
}
.anb-unit-step button {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  max-width: 48%;
  overflow: hidden;
  padding: 10px 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.anb-unit-step button:hover {
  border-color: var(--border-strong);
}
.anb-unit-step .anb-unit-next {
  margin-left: auto;
}
.anb-unit-step button[hidden] {
  display: none;
}