/* Practice tab — aids (hint/answer), mode intro, self-report, placement entry, torch Colab notice, topbar auth. */
/* Show Hint / Show Answer aids (per-question hint + solution Colab link) */
.practice-aids { margin: 12px 0; }
.practice-aids-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.hint-section {
  margin-top: 10px; padding: 10px 12px;
  background: var(--surface-2); border-radius: 8px;
  border: 1px solid var(--border);
}
.hint-label { font-size: 12px; font-weight: 600; opacity: .7; margin-bottom: 4px; }
/* Lesson guided items supply a NUMBERED hint list, one hint per line, ordered
   least-help-first. textContent keeps the newlines, so preserve them or the
   escalation collapses into one run-on paragraph. */
.hint-text { font-size: 14px; line-height: 1.5; white-space: pre-line; }
.answer-aids { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.colab-solution-link { display: inline-block; text-decoration: none; align-self: flex-start; }
.answer-aids-note { font-size: 12px; opacity: .65; }

/* ============================================================
   Track-3 quick-wins UI: torch routing, clearer difficulty
   rating, skip, question prose/code split, onboarding intro.
   ============================================================ */

/* .practice-mode-intro (the Practice-vs-Targeted one-liner) was deleted on
   2026-08-23 along with its markup and #practice-mode-notice. */

/* Self-reported experience level (seeds the adaptive starting difficulty) */
.self-report-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 13px;
}

/* 🔴 IT COULD NEVER HIDE. `.hidden { display: none }` (components.css) and the
   rule above are both (0,1,0), and this file is linked AFTER components.css —
   so the tie went to `display: flex` and diagnostic-page.js's
   `priorEl.classList.toggle("hidden", !status.can_set_prior)` did nothing at
   all. The three starting-point buttons therefore sat on a FINISHED placement,
   where the backend refuses the prior and pressing one changes nothing. Same
   trap styles/practice/README.md records for #practice-submit-area, and the
   same remedy: re-assert `.hidden` at this file's own specificity. */
.self-report-row.hidden { display: none; }

.self-report-label {
  color: var(--muted);
  cursor: help;
}

.self-report-options {
  display: inline-flex;
  gap: 6px;
}

.self-report-btn {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
}

.self-report-btn:hover {
  color: var(--text);
  border-color: var(--accent-text);
}

.self-report-btn.active {
  color: var(--text);
  border-color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.self-report-note {
  color: var(--muted);
  font-size: 12px;
}

/* Entry point into the placement diagnostic for accounts with history
   (auto-start is zero-attempt-only). Amber to match the placement badge.

   #placement-start-btn is the ONLY instance of this class in the app, so
   these values are the button, not a theme over one — sized as a real call
   to action rather than the 12px chip it used to be.

   🔴 It must NOT also carry `.primary`. That combination is what produced
   the full-bleed 4px-tall strip: `.primary` sets width:100% and 12px/28px
   padding, this rule overrode the padding and not the width, so the button
   stretched the card and then collapsed to a sliver. `width: max-content`
   below makes the button immune to inheriting a stretch from whatever flex
   or grid parent it lands in next. */
.placement-start-btn,
.placement-next-btn {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  padding: 10px 20px;
  width: max-content;
  max-width: 100%;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.placement-start-btn {
  border: 1px solid rgb(var(--warn-rgb) / 0.55);
  background: rgb(var(--warn-rgb) / 0.12);
}

.placement-start-btn:hover {
  border-color: rgb(var(--warn-rgb) / 0.9);
  background: rgb(var(--warn-rgb) / 0.22);
}

.placement-start-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Same shape (shared base above), neutral colour: this one only appears
   mid-test, where the amber CTA is hidden, so it should not compete for the
   same attention. Sharing the base rule is deliberate — two hand-kept copies of
   the same dimensions is how the two buttons drift a pixel apart. */
.placement-next-btn {
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.placement-next-btn:hover {
  border-color: var(--accent-text);
}

/* Finish early: quiet until armed, then the same amber as the start CTA so the
   second click reads as the consequential one. */
.placement-finish-btn.is-armed {
  border-color: rgb(var(--warn-rgb) / 0.9);
  background: rgb(var(--warn-rgb) / 0.18);
}
.practice-notch-item.is-armed {
  color: rgb(var(--warn-rgb));
  font-weight: 600;
}

/* Torch drills run in Colab — honest routing notice instead of a dead editor. */
.torch-colab-notice {
  margin: 12px 0;
  padding: 14px 16px;
  background: rgb(var(--warn-rgb) / 0.07);
  border: 1px solid rgb(var(--warn-rgb) / 0.32);
  border-radius: 10px;
}
.torch-colab-title { font-weight: 700; margin-bottom: 6px; }
.torch-colab-body { font-size: 13px; line-height: 1.55; color: var(--muted); margin-bottom: 10px; }
.torch-colab-body code,
.question-prose code {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.92em;
  /* Stated rather than inherited: .torch-colab-body is --muted, and muted on
     the code chip's own tint, on the notice's amber tint, measured 3.5:1. */
  color: var(--text);
  background: rgb(var(--tint-rgb) / calc(0.07 * var(--tint-k)));
  padding: 1px 5px;
  border-radius: 5px;
}
.torch-colab-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Account-tab token row. The `.topbar-auth*` block that used to sit here went
   with its markup on 2026-08-23 — the signed-in email is off the topbar and on
   the Account tab. Worth keeping the lesson it left behind, because it is
   about this file and not about that element: app.js hid the indicator with
   the `hidden` ATTRIBUTE, and a class rule in here setting `display` beats the
   UA's `[hidden] { display: none }`, so the "signed in" dot showed to
   signed-out guests for weeks. Any rule in this folder that sets `display` on
   something JS hides by attribute or by `.hidden` owes itself the matching
   override. */
.dd-token-row { display: flex; gap: 8px; align-items: center; }
.dd-token-row .text-input { flex: 1 1 auto; }

/* The COMPETENCY BAR's styles used to sit here: a phase heading, a mastery
   track and two gate marks (0.85 unlock, 0.95 mastered), shown in the
   single-KC focus flow from the knowledge graph. It was the third progress bar
   on that screen. `practice/competency-bar.js` still tracks the posterior and
   still reports the mastery crossing to the parent graph — it just has no DOM
   any more, and states the number as a clause of the stage ladder's caption.
   The handoff card below is a different thing and stays. */

/* Mastered → "next concept" handoff card, shown in-frame on gate crossing. */
.competency-done {
  margin: 0 0 18px; padding: 15px 17px;
  border: 1px solid rgb(var(--info-rgb) / 0.45); border-radius: 12px;
  background: rgb(var(--info-rgb) / 0.08);
}
.competency-done-title { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.competency-done-body { font-size: 13px; line-height: 1.55; color: var(--muted); margin-bottom: 12px; }
.competency-done-actions { display: flex; flex-wrap: wrap; gap: 9px; }


/* OFFLINE SIGN-IN — localhost only (app.js reveals it). One row under the
   Google button: it is the fallback door, not the front one, so it is quiet. */
.local-signin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
/* 🔴 `display: flex` above BEATS `.hidden { display: none }` — same specificity
   (0,1,0), and misc.css is linked after components.css, so the later rule wins.
   Without this line the offline door — an email field, a password field and a
   "Sign in offline" button — renders on PRODUCTION for every visitor, wired to
   nothing (app.js returns early off localhost). Shipped visible in aad8c6e1.
   The same collision has bitten `.ewma-accuracy` and the feedback channel in
   basic-mode.css: any `.hidden` element whose class also sets `display` needs
   its own `.hidden` guard. */
.local-signin.hidden {
  display: none;
}
.local-signin input {
  font-size: 13px;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  min-width: 170px;
}
.local-signin button {
  font-size: 13px;
  padding: 5px 12px;
}