/* The notch — session controls on the seam between the panels.
   Markup in index.html (#practice-notch), behaviour in practice/notch-menu.js.

   It replaces .session-status-row's visible half: the countdown, the phase and
   Pause & exit used to take a full band above the question. The tab carries
   three things now, left to right — a square that pauses, the countdown, and
   the dots that open the menu. The row itself still exists and still runs
   (see the note in timer.css); this is only where it is read and reached.

   End session is GONE, here and everywhere: a block has no length any more,
   so there is nothing to end early. Pause and resume are the two states. */

/* 🔴 IT IS A NOTCH AGAIN — and this time it hangs off the TOPBAR (Seth,
   2026-08-27: "the timer is below the top tab and the timer is like kind of a
   notch or whatever").

   READ THE TWO MOVES TOGETHER, because the second is not a revert of the first:

     until 2026-08-24  a notch on `.practice-container`'s top edge — the seam
                       between the two panels.
     2026-08-24        the topbar's middle cell, in flow beside the tab strip.
     2026-08-27        a notch on the TOPBAR's bottom edge. THIS.

   What the 08-24 move fixed is kept intact. The old notch hung off
   `.practice-container`, so it TRAVELLED with the workspace — into the
   placement host, back out, and off the screen entirely on every page that is
   not the Learner Home. This one hangs off the bar, which is on every page and
   never re-parents. The clock is still app chrome: one clock, one place,
   whatever the learner is doing. Only where it is DRAWN changed, and it is
   still the same element with the same ids, so practice/notch-menu.js,
   practice/timer.js and practice/placement-timer.js are all untouched.

   🔴 IT IS A DIRECT CHILD OF `<header class="topbar">`, and that is deliberate
   rather than incidental. `position: absolute` resolves against the nearest
   POSITIONED ancestor; `.topbar` is one (`position: sticky` — a sticky box is a
   positioned box) and the cells inside it are not. So this worked for its first
   hour while the markup still sat in `.topbar-mid` — on a NEGATIVE invariant
   held by every element in between, any one of which is one `position:
   relative` away from re-anchoring the clock back INTO the bar with nothing
   thrown and nothing to grep for. As a child of the box it is positioned
   against there is nothing in between to get wrong. `watch_concept_pill.py`
   parses index.html and asserts the parent.

   Out of flow either way, which is what frees the middle cell: `.topbar-mid`
   centres the tab strip (advanced mode) and the concept pill
   (styles/concept-pill.css) with no clock between them. An absolutely-
   positioned child of a grid container takes no column, so being a direct
   child of the header's `1fr auto 1fr` grid costs nothing. */
.practice-notch {
  position: absolute;
  /* The bar's padding box ends ON its 1px bottom border (`box-sizing:
     border-box`, styles/base.css), so `100%` puts this element's top edge
     exactly on that border — welded to the bar rather than floating under it,
     which is the whole difference between a notch and a toolbar. */
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  /* Above the pages under the bar, below any modal. */
  z-index: 30;
}

/* The control itself: square, clock, dots, read as one thing rather than as a
   readout with buttons stuck to it — which is why the background and the border
   are here and not on the three children.

   🔴 ROUNDED ON THE BOTTOM ONLY, AND NO TOP BORDER — the shape that makes it a
   notch. It was `999px` on all four corners for the three days it sat inside
   the bar, where a control with no top border reads as clipped; hanging off the
   bar's bottom edge the opposite is true, and a fully rounded pill floating
   below the bar reads as a detached toolbar. The top edge is the bar's own
   border, shared, which is why there is not a second one here. */
.practice-notch-tab {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  display: flex;
  gap: 6px;
  /* The tab's contents no longer change between sessions — square, clock,
     dots, always all three — so this is a plain symmetric inset. It used to
     be sized around a clock that disappeared when nothing was running. */
  /* Symmetric now that nothing is flush against an edge, and short enough that
     the control clears the 44px bar (--dd-topbar-h) with room either side.
     Widened with the clock on 2026-08-24 — a 17px figure in an 8px-wide pill
     reads as text that overflowed its border rather than as a control. */
  /* Asymmetric now that the top edge is the bar's: the extra pixel at the
     bottom is what keeps the glyphs off the rounded corners. */
  padding: 3px 12px 5px;
  transition: background 120ms ease;
}

.practice-notch.is-open .practice-notch-tab {
  background: var(--surface);
}

/* The countdown, mirrored from #session-countdown by practice/notch-menu.js.
   Tabular figures: a clock whose glyphs are different widths jiggles the tab
   — and the tab is centred on the seam, so the jiggle moves the whole thing.
   🔴 It does NOT disappear between sessions. Idle, notch-menu.js writes the
   allowance the next question's answer phase will get (02:00) and adds
   `--idle`, so the tab is a standing statement of the rule rather than a
   control that comes and goes — Seth, 2026-08-23. `.hidden` survives for the
   one case that still needs it: a page with no session machinery at all. */
/* 🔴 IT IS THE LOUDEST THING ON THE BAR, ON PURPOSE (Seth, 2026-08-24: "make
   the timer at the top stand out a lot more ... bold and the text for it should
   be a bit bigger"). At 13px/700 it read as one more label in a row of labels,
   and the one number on this bar that changes while you work is the one that
   must be legible without looking for it. 17px is the ceiling: the tab has to
   clear `--dd-topbar-h` (44px) — 17px text + 8px of vertical padding + 2px of
   border is 27px, and the pill still has room either side. */
.practice-notch-clock {
  color: var(--white);
  padding-left: 4px;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
}

.practice-notch-clock.hidden {
  display: none;
}

/* The phase word, in the accessibility tree and nowhere else. Clipped rather
   than `display: none` or `visibility: hidden`, both of which take it out of
   the tree along with the pixels — which is the whole thing being fixed. */
.practice-notch-sr {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Review time reads differently from answer time — it advances on its own and
   nothing is lost when it runs out — and with the phase WORD gone from the
   screen the colour is the only thing left saying which clock this is.
   Matches .session-status-row.session-status--review in timer.css. */
.practice-notch-clock--review {
  color: var(--ok);
}

/* The last 30 seconds of ANSWER time, when it auto-submits. Beats the review
   tint: `--low` is written after `--review` in notch-menu.js and only ever on
   the answering phase. */
.practice-notch-clock--low {
  color: var(--danger);
}

/* Idle: the number is a rule, not a countdown, and it must not be mistaken for
   one that has stopped ticking. So it steps DOWN from the running clock — but
   only by colour now.

   🔴 IT USED TO BE `font-weight: 500` AND `--muted`, and that was the state the
   learner sees nearly all the time: the clock was thin grey text on every visit
   that did not have a question open, which is exactly the "not obvious enough"
   Seth named on 2026-08-24. Dropping the weight override keeps the 800 above,
   so the figure has the same presence idle or running; `--text` instead of
   `--muted` keeps it a shade under the running clock's `--white`, which is all
   the distinction this state ever needed. */
.practice-notch-clock--idle {
  color: var(--text);
}

/* ---- the square ------------------------------------------------------- */

/* Pause, to the LEFT of the clock (Seth, 2026-08-23). A square, because that
   is the shape he asked for and because it is the one glyph that reads as
   "stop what is running" without a label; what it actually does is pause —
   the question, the draft, the review state and the clock are all saved, and
   the readiness screen comes up. There is no End anywhere: pause and resume
   are the only two states this session model has. */
.practice-notch-stop {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding: 3px;
  transition: background 120ms ease, opacity 120ms ease;
}

.practice-notch-stop-glyph {
  background: var(--muted);
  /* 2px, not a circle and not a rounded rect: at 9px the corner radius is the
     whole difference between reading as a stop square and reading as a dot. */
  border-radius: 2px;
  display: block;
  height: 9px;
  transition: background 120ms ease;
  width: 9px;
}

.practice-notch-stop:hover:not(:disabled) .practice-notch-stop-glyph {
  background: var(--danger);
}

.practice-notch-stop:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 1px;
}

/* 🔴 Dimmed, not hidden. Between sessions, and for the few seconds a grade is
   in flight, there is nothing to pause — but a control that vanishes and comes
   back moves the clock beside it, and the tab is centred on the seam, so the
   whole notch would shift twice a question. */
.practice-notch-stop:disabled {
  cursor: default;
  opacity: 0.35;
}

/* Just the dots now — the tab around it owns the frame.

   🔴 CENTRED BY LAYOUT, NOT BY NUDGE (Seth, 2026-08-23: "for the three dots,
   it needs to be more center aligned"). This was a 13px button with
   `padding: 1px 6px 3px` and a `translateY(-2px)` on the glyph — three
   separate offsets, each correcting the last, and the sum of them put the
   dots high and left of the box they sit in. A flex box that centres its one
   child needs none of them: symmetric padding, `place-items: center`, and the
   glyph lands where the box's middle is.

   The height is fixed to the square's (9px glyph + 3px padding a side = 15px)
   so the two controls flanking the clock are the same size as each other —
   the tab is `align-items: center`, so unequal heights read as one of them
   riding higher than the other. */
.practice-notch-btn {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  height: 15px;
  justify-content: center;
  line-height: 1;
  padding: 0 5px;
  transition: color 120ms ease;
}

.practice-notch-btn:hover,
.practice-notch-btn:focus-visible,
.practice-notch-btn[aria-expanded="true"] {
  color: var(--white);
}

/* 🔴 NO `transform` HERE. The comment this replaces said the dots "sit on the
   type's baseline and read as low as a comma" — true of `…` (U+2026,
   HORIZONTAL ELLIPSIS), and the markup uses `&#8943;` (U+22EF, MIDLINE
   horizontal ellipsis), which is drawn on the math axis and is already
   vertically centred in its own em box. The -2px was correcting a problem the
   glyph does not have, and the flex centring above makes it wrong twice.

   🔴 AND NO NEGATIVE MARGIN EITHER. `letter-spacing` applies after the last
   character too, so the obvious correction is a matching `margin-right: -1px`
   — and measured, that made it WORSE, not better: the trailing spacing is
   inside the span's own box (so the flex centring already accounts for it),
   while the margin is outside it, and shaving 1px off the outer width shifts
   a centred child half a pixel right. Measured offsets of the glyph's centre
   from the button's, at 1680px: `translateY(-2px)` + asymmetric padding was
   (0, -3); with the margin (0.5, 0); with neither (0, 0). Leave it alone. */
.practice-notch-btn > span {
  display: block;
  letter-spacing: 1px;
}

/* The menu. Hangs under the control, centred on it — the control is centred on
   the viewport, so there is no edge for it to fall off. `top` clears the
   topbar's own bottom border. */
.practice-notch-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.28);
  display: flex;
  flex-direction: column;
  gap: 2px;
  left: 50%;
  min-width: 168px;
  padding: 6px;
  position: absolute;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  /* Over the pages below the bar. `.topbar` is z-index 50 and creates the
     stacking context this sits in, so this only has to beat its siblings. */
  z-index: 60;
}

.practice-notch-menu.hidden {
  display: none;
}

.practice-notch-item {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  padding: 7px 10px;
  text-align: left;
  white-space: nowrap;
}

.practice-notch-item:hover:not(:disabled),
.practice-notch-item:focus-visible:not(:disabled) {
  background: rgb(var(--tint-rgb) / calc(0.1 * var(--tint-k)));
  color: var(--white);
}

/* Disabled here means one of two different things — no session, or a session
   whose current question is mid-grade — and notch-menu.js puts the second
   one in the item's `title`. */
.practice-notch-item:disabled {
  color: var(--muted-dim);
  cursor: default;
}

/* ---- the two AUDIT items -----------------------------------------------

   #question-id-chip and #practice-graph-jump moved in here from
   .question-number-row on 2026-08-23, element and id intact, so the code that
   drives them did not have to move with them. They still carry
   `.question-id-chip`, and deliberately: practice/graph-jump.js marks an
   untagged question with `.question-id-chip.is-untagged` and
   `renderQuestionIdChip` disables the copy button when a question has no
   stable id. What they must NOT keep is the CHIP BOX — a bordered pill inside
   a menu of flat rows. This file is loaded after styles/practice/question.css,
   so `.practice-notch-item` already wins on every property it declares; these
   are the three it does not. */
.practice-notch-item.question-id-chip {
  font-weight: 500;
  line-height: 1.35;
  min-height: 0;
}

/* 🔴 No ⓘ dots in here. Both items carried `data-dd-info` in the question row
   and infotips.js mints the dot as a SIBLING — in a column-flex menu that is
   its own row, so each item grew a stray "i" hanging underneath it. The copy
   was two short sentences, so it moved into the buttons' `title` instead (and
   for the ID button, practice/ui.js overwrites that title with the live id),
   and both registry entries were deleted rather than left orphaned. If a
   `data-dd-info` anchor is ever added to this menu, this is the reason it
   will not look right. */

/* A question the tutor cannot place on its own map. `.question-id-chip.is-untagged`
   says `border-style: dashed`, which draws nothing on a borderless menu row —
   so the marking is restated here as something a flat row can show. The point
   of the control is that the mismatch stays VISIBLE. */
.practice-notch-item.question-id-chip.is-untagged {
  color: var(--muted);
  font-style: italic;
}

/* The audit tools are not session controls. One hairline says so, instead of a
   heading nobody needs to read twice. */
.practice-notch-sep {
  background: var(--border);
  height: 1px;
  margin: 4px 4px;
}

.practice-notch-note {
  color: var(--muted-dim);
  font-size: 11px;
  margin: 2px 4px 2px;
}

.practice-notch-note.hidden {
  display: none;
}

@media (max-width: 720px) {
  /* The bar is tight on a phone: the level pill on one side, the account
     control on the other, and this between them. The menu drops its centring
     for the right edge — the control can be pushed left by a wide pill, and the
     right edge is the one still guaranteed to be on screen. */
  .practice-notch-menu {
    left: auto;
    right: 0;
    transform: none;
  }
}