/* EXERCISE TIMER — practice/exercise-timer.js
   The live clock IN the exercise's block, and notebook focus mode.

   Notebook typography belongs to arena-notebook.css and the contents rail to
   arena-notebook-nav.css; nothing here restyles a `.nbv-*` or `.anb-*` node.
   The one thing this file says about them is whether they are on screen, and
   it says it through a class this file's own module writes.

   🪦 `.dd-nbt-bar` — a pill fixed to the bottom of the viewport carrying the
   clock, "I'm done", "Give up" — was REMOVED 2026-09-11 (Seth: "kind of
   idiotic"). The clock draws over the buttons the learner pressed. */

/* ── focus mode ───────────────────────────────────────────────────
   `dd-nb-hidden` is put on individual nodes by practice/exercise-timer.js —
   the cells BELOW the exercise, the other exercises' blocks, and the contents
   rail. Everything above the problem stays exactly where it was: the imports
   it needs and the explanation it is testing are part of doing the exercise,
   not a distraction from it.

   🔴 `display: none`, and it must stay `display: none` rather than
   `visibility` or an opacity fade. A hidden notebook cell must take no space
   and must not be tabbable: the point is that the learner cannot read the next
   exercise or, in a solutions notebook, the answer sitting one cell below. */
#page-arena-notebook .dd-nb-hidden {
  display: none !important;
}

/* No gutter rule is needed for the hidden rail, and one would be dead code:
   `.anb-toc` is `position: fixed` and declares `--anb-gutter` on ITSELF
   (arena-notebook-nav.css), so it reserves no space in the cell column and
   zeroing the property from an ancestor could not reach it anyway — a custom
   property inherits down, and the rail's own declaration wins at the rail. */

/* ── the live panel, over the buttons ─────────────────────────────
   Seth, 2026-09-11: "display the timer over the original button pannel that
   you clicked on rather than putting a new hover pannel at the bottom".
   practice/exercise-timer.js writes `.dd-ex-live` into the block, after the
   `.dd-ex-row` exercise-session.js owns, and `is-live` on the block is the
   only switch — one row is on screen at a time and the block keeps its
   place in the notebook, so nothing jumps when the clock starts.

   Three cells, as drawn: the "I don't know this yet" box on the left, the
   clock in the middle, "Pause timer to come back later" on the right. */
.dd-ex-live {
  display: none;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}
.dd-ex-block.is-live .dd-ex-live {
  display: grid;
}
.dd-ex-block.is-live .dd-ex-row {
  display: none;
}

/* The buttons' box is exercise-session.css's (`.dd-ex-row > button, .dd-ex-live
   > button`); only the sub-line and the clock are styled here. */
.dd-ex-live > button small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
}

.dd-ex-live-clock {
  min-width: 6ch;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-align: center;
}

/* The last minute. A colour change, not a flash: the learner is reading code
   and something blinking beside it is worse than the deadline it announces. */
.dd-ex-block.is-low .dd-ex-live-clock {
  color: var(--danger, #ff6b6b);
  border-color: var(--danger, #ff6b6b);
}

@media (max-width: 620px) {
  .dd-ex-live {
    grid-template-columns: 1fr;
  }
  .dd-ex-live-clock {
    order: -1;
  }
}

/* ── the verdict this module writes onto the exercise's block ─────
   Lives inside `.dd-ex-block` (practice/exercise-session.js owns the block;
   this is the one row inside it this module writes), so it inherits the
   block's own frame and only has to say its piece. */
.dd-ex-verdict {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgb(var(--tint-rgb) / calc(0.08 * var(--tint-k)));
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

.dd-ex-verdict.hidden {
  display: none;
}

.dd-ex-verdict-note {
  color: var(--muted);
}