/* ==========================================================================
   Drills — setup, runner, summary, history
   --------------------------------------------------------------------------
   The runner is the only screen in this application designed around *not*
   being looked at. While a rep is timing, a student is holding a cube and
   staring at their hands: every control, every hint and every number that is
   not the clock fades out, and the clock grows to fill the space they left.

   That is the whole idea behind the `is-*` state classes below — one class on
   `[data-drill]`, set by drills.js from the stopwatch state machine, drives
   the entire transition. There is no per-element JavaScript styling.

   Tap targets are 44px minimum throughout: this page is used one-handed, on a
   phone, with a cube in the other hand.
   ========================================================================== */

/* --------------------------------------------------------------------- */
/* Case thumbnails                                                        */
/* --------------------------------------------------------------------- */

.drill-thumb {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  min-width: 64px;
  padding: 4px;
  border-radius: var(--radius-sm);
  background: var(--ink-050);
  overflow: hidden;
}
.drill-thumb img,
.drill-thumb svg,
.drill-thumb .rt-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.drill-thumb__blank {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-300);
}
.drill-thumb--lg {
  width: clamp(96px, 26vw, 148px);
  height: clamp(96px, 26vw, 148px);
  min-width: auto;
  background: transparent;
  padding: 0;
}

/* --------------------------------------------------------------------- */
/* Setup screen                                                           */
/* --------------------------------------------------------------------- */

.row--tight { gap: var(--space-2); }
.row--fields { align-items: flex-end; gap: var(--space-4); }

.drill-resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
}
.drill-resume .card__hint { margin: 0; }

.drill-start { align-items: start; margin-bottom: var(--space-7); }

.drill-hero { display: flex; flex-direction: column; gap: var(--space-4); }
.drill-hero .card__head { margin-bottom: 0; align-items: flex-start; }
.drill-hero .card__hint code {
  font-size: 0.82em;
  background: var(--ink-050);
  border-radius: 4px;
  padding: 1px 5px;
}
.drill-hero__go { margin: 0; }
.drill-hero__note {
  margin: 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-400);
}

.drill-preview {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.drill-preview__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  background: var(--paper);
}
.drill-preview__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.drill-preview__text > a { font-weight: 580; color: var(--ink-900); }

.drill-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--ink-100);
}
.drill-facts dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-400);
  font-weight: 640;
}
.drill-facts dd { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--ink-900); }

.drill-recent h2 { margin: 0; font-size: 1.12rem; }
.drill-recent .card__hint { display: block; }

/* --------------------------------------------------------------------- */
/* The runner                                                             */
/* --------------------------------------------------------------------- */

/* The runner claims the page: no page-head, tighter shell, no scroll chrome
   competing with a screen that is meant to be glanced at, not read. */
body.drill-mode main { padding-block: var(--space-4) var(--space-6); }

.drill {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 860px;
  margin-inline: auto;
}

.drill__bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.drill__bar-text { display: flex; flex-direction: column; min-width: 0; }
.drill__bar-text strong { color: var(--ink-900); font-size: 0.95rem; }
.drill__progress {
  flex: 1 1 140px;
  min-width: 100px;
  height: 8px;
  --meter-color: var(--accent);
}
.drill__bar-actions { flex: 0 0 auto; }

/* ---- stage ---------------------------------------------------------- */

.drill__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.drill__case {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  text-align: left;
}
.drill__case-text { min-width: 0; flex: 1 1 auto; }
.drill__case-text h1 {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.15rem, 0.95rem + 1vw, 1.6rem);
}
.drill__case .star-btn { width: 44px; height: 44px; flex: 0 0 auto; }

.drill__scramble {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}
.drill__scramble-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-400);
  font-weight: 640;
}
.drill__scramble-moves {
  font-size: clamp(0.95rem, 0.85rem + 0.7vw, 1.2rem);
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-align: center;
  line-height: 1.45;
}
.drill__scramble-moves:empty::before {
  content: 'No scramble for this case — set it up by hand';
  color: var(--ink-400);
  font-family: var(--font-sans);
  font-size: 0.85rem;
}

/* ---- the clock ------------------------------------------------------ */

.timer-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: clamp(150px, 32vh, 260px);
  padding: var(--space-5);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  font: inherit;
  color: inherit;
  /* A press-and-hold on a phone must not scroll the page, select the digits
     or pop the callout menu — all three ruin a rep. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.timer-face__value {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 1.6rem + 11vw, 6.5rem);
  font-weight: 620;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.timer-face__state {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-400);
}

/* Armed but not yet held long enough — amber, "not yet". */
.drill.is-holding .timer-face { background: var(--warn-soft); border-color: #f0d29a; }
.drill.is-holding .timer-face__value { color: var(--warn); }
/* Held long enough: release starts. Green, "go". */
.drill.is-ready .timer-face { background: var(--success-soft); border-color: #9fdcc4; }
.drill.is-ready .timer-face__value { color: var(--success); }
.drill.is-inspecting .timer-face { background: var(--accent-soft); border-color: #c2ccff; }
.drill.is-running .timer-face { border-color: var(--ink-100); box-shadow: none; }
.drill.is-stopped .timer-face__value { color: var(--ink-900); }

.drill__hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-400);
  max-width: 52ch;
}
.drill__hint kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--ink-200);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--paper);
  font-size: 0.82em;
  color: var(--ink-700);
}

/* ---- get out of the way -------------------------------------------- */
/*
   While the clock is live the page is reduced to the clock. `visibility`
   rather than `display` so nothing reflows: the layout the student sees when
   the rep ends is the layout that was already there.
*/
.drill.is-running .drill__bar,
.drill.is-running .drill__case,
.drill.is-running .drill__scramble,
.drill.is-running .drill__hint,
.drill.is-running .drill__aids,
.drill.is-running .drill__log,
.drill.is-inspecting .drill__aids,
.drill.is-inspecting .drill__log {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease);
}
.drill.is-running .timer-face {
  min-height: clamp(240px, 52vh, 460px);
}
body.drill-mode.is-running .site-header,
body.drill-mode.is-running .site-footer {
  opacity: 0.12;
  transition: opacity var(--dur) var(--ease);
}

/* ---- result --------------------------------------------------------- */

.drill__result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  border-left: 3px solid var(--accent);
  animation: drill-result-in var(--dur) var(--ease);
}
.drill__result.is-pb { border-left-color: var(--success); background: var(--success-soft); }
.drill__result.is-dnf { border-left-color: var(--danger); background: var(--danger-soft); }

@keyframes drill-result-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.drill__result-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.drill__result-time {
  font-family: var(--font-mono);
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  font-weight: 640;
  line-height: 1.05;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.drill__result-note { font-size: 0.86rem; color: var(--ink-500); }

.drill__result-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.drill__result-actions .btn-group button {
  min-height: 40px;
  min-width: 52px;
  padding-inline: var(--space-3);
}
.drill__result-actions [data-penalty="dnf"][aria-pressed="true"] { color: var(--danger); }
.drill__result-actions [data-penalty="plus2"][aria-pressed="true"] { color: var(--warn); }

/* The auto-advance countdown lives in the button itself rather than as a
   separate progress bar: it is the thing that is about to happen. */
[data-next] {
  position: relative;
  overflow: hidden;
  min-height: 44px;
}
[data-next]::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: calc(var(--advance, 0) * 1%);
  background: rgba(255, 255, 255, 0.75);
  transition: width 100ms linear;
}

.drill__result-assess {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: 1px solid var(--ink-100);
}
.drill__result-assess .btn-group button {
  min-width: 44px;
  min-height: 40px;
  font-variant-numeric: tabular-nums;
}
.drill__result-assess .btn-group button.is-set {
  background: var(--paper);
  color: var(--accent);
  box-shadow: var(--shadow-xs);
}

/* ---- recall aids ---------------------------------------------------- */

.drill__aids { display: flex; flex-direction: column; gap: var(--space-3); }

.drill__aid {
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}
.drill__aid > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 560;
  color: var(--ink-500);
  list-style: none;
}
.drill__aid > summary::-webkit-details-marker { display: none; }
.drill__aid > summary::before {
  content: '▸';
  color: var(--ink-300);
  transition: transform var(--dur-fast) var(--ease);
}
.drill__aid[open] > summary { color: var(--ink-900); border-bottom: 1px solid var(--ink-100); }
.drill__aid[open] > summary::before { transform: rotate(90deg); }
.drill__aid > div { padding: var(--space-4); }
.drill__aid .alg { font-size: 1rem; padding: var(--space-2) var(--space-3); }

.drill__viewer { min-height: 220px; }

.drill__aid-links { gap: var(--space-2); }
.drill__aid-links .btn { min-height: 40px; }

/* ---- the log -------------------------------------------------------- */

.drill__log { display: flex; flex-direction: column; gap: var(--space-3); }
.drill__log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.drill__log-item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 5px 12px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: 0.84rem;
}
.drill__log-item.is-dnf { border-color: var(--danger-soft); color: var(--danger); }
.drill__log-item.is-pb { border-color: var(--success); background: var(--success-soft); }
.drill__log-case { color: var(--ink-500); }
.drill__log-time { font-variant-numeric: tabular-nums; font-weight: 640; color: var(--ink-900); }
.drill__log-item.is-dnf .drill__log-time { color: var(--danger); }

.drill__log-list--wide { gap: var(--space-2); }

/* --------------------------------------------------------------------- */
/* Summary                                                                */
/* --------------------------------------------------------------------- */

.drill-summary__tiles { margin-bottom: var(--space-6); }
.drill-summary__reps { margin-top: var(--space-6); }

/* --------------------------------------------------------------------- */
/* Phone                                                                  */
/* --------------------------------------------------------------------- */

@media (max-width: 720px) {
  .drill { gap: var(--space-4); }
  .drill__bar { gap: var(--space-3); }
  .drill__bar-text { flex: 1 1 100%; }
  .drill__progress { flex: 1 1 auto; }

  .drill__case { gap: var(--space-3); }

  .drill__result { grid-template-columns: minmax(0, 1fr); }
  .drill__result-actions { justify-content: space-between; }
  .drill__result-actions [data-next] { flex: 1 1 100%; }

  .drill-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .drill-facts dd { font-size: 0.88rem; }

  .drill-preview__item { gap: var(--space-3); }
  .drill-thumb { width: 52px; height: 52px; min-width: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .drill__result { animation: none; }
}

/* --------------------------------------------------------------------- */
/* Tap targets                                                            */
/* --------------------------------------------------------------------- */
/* See the note in dashboard.css: base.css's .btn is 37px and .btn--sm 30px,
   both under the 40px floor. This page in particular is used one-handed, on a
   phone, with a cube in the other hand. */

.btn { min-height: 44px; }
.btn--sm { min-height: 40px; }
.btn--icon { width: 44px; height: 44px; }

input[type="text"],
input[type="number"],
input[type="search"],
select {
  min-height: 44px;
}

a.card__hint,
.card__hint a,
.drill-recent .row--between a,
.drill-preview__text > a,
.drill-recent .data a,
.drill-summary__reps a,
.drill__aid-links .btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

/* --------------------------------------------------------------------- */
/* The 3D aid's transport                                                 */
/* --------------------------------------------------------------------- */
/*
   `mountCaseViewer(..., {compact: true})` shrinks the timeline buttons to
   28px and the play button to 32px. That is a sensible default for a small
   embed on a desktop page, and too small here: the drill runner is used
   one-handed on a phone, and these are the controls a student reaches for
   *while* holding a cube.

   Scoped with both classes so it does not depend on drills.css still being
   loaded after viewer.css, and left as an override rather than a change to
   viewer.css, which cube-js owns — the compact preset is right for its other
   callers.
*/
.drill__viewer.case-viewer--compact .timeline__btn { width: 40px; height: 40px; }
.drill__viewer.case-viewer--compact .timeline__btn svg { width: 15px; height: 15px; }
.drill__viewer.case-viewer--compact .timeline__btn--play { width: 44px; height: 44px; }
.drill__viewer.case-viewer--compact .timeline__btn--play svg { width: 17px; height: 17px; }
.drill__viewer.case-viewer--compact .timeline__speed-range { height: 40px; }