/* ===== Restart Tuition: practice tools =====
   Shared layout + controls for the standalone /practice/ interactive pages.
   Builds on the design tokens in styles.css; only adds what the tools need. */

:root {
  --practice-red: #C6413B;
  --practice-red-tint: #FCEEED;
  --practice-amber: #C87A16;
  --practice-amber-tint: #FDF3E3;
  --practice-purple: #6B4E9B;
  --practice-line: #E7EEF2;
}

/* ===== Page shell ===== */
.practice-page { padding: 24px 0 72px; }

.practice-shell {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
}

.practice-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--teal-dark);
  text-decoration: none;
  background: var(--teal-tint);
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.practice-back:hover { background: #DCEDF4; }
.practice-back::before { content: "\2190"; font-weight: 800; }

.practice-heading { margin-bottom: 28px; }
.practice-heading h1 { margin-bottom: 8px; }
.practice-heading p {
  color: var(--grey);
  font-size: 1.05rem;
  margin: 0;
  max-width: 620px;
}

/* ===== Index page ===== */
.practice-intro {
  background: linear-gradient(160deg, var(--teal) 0%, var(--teal-dark) 100%);
  color: #fff;
  padding: 48px 0;
  text-align: center;
}
.practice-intro h1 { color: #fff; margin-bottom: 12px; }
.practice-intro p { color: #E7F3F8; max-width: 640px; margin: 0 auto; }

.practice-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 720px) {
  .practice-list { grid-template-columns: repeat(2, 1fr); }
}

.practice-list a {
  display: block;
  height: 100%;
  background: #fff;
  border: 2px solid var(--practice-line);
  border-radius: var(--radius);
  padding: 22px 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.practice-list a:hover,
.practice-list a:focus-visible {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.practice-list h2 {
  font-size: 1.15rem;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.practice-list p { color: var(--grey); font-size: 0.95rem; margin: 0; }

.practice-number {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.practice-note {
  background: var(--green-tint);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-top: 32px;
  color: var(--ink);
}
.practice-note p { margin: 0; }

/* ===== Mode tabs ===== */
.tool-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.tool-tab {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--teal-dark);
  background: var(--cream);
  border: 2px solid var(--practice-line);
  border-radius: 999px;
  padding: 10px 18px;
  min-height: 44px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.tool-tab:hover { background: var(--teal-tint); }
.tool-tab[aria-selected="true"] {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.tool-tab:focus-visible { outline: 3px solid var(--teal-dark); outline-offset: 2px; }

@media (max-width: 560px) {
  .tool-tabs { gap: 6px; }
  .tool-tab { font-size: 0.86rem; padding: 10px 13px; flex: 1 1 auto; }
}

.tool-panel[hidden] { display: none; }

/* ===== Tool card ===== */
.tool {
  background: #fff;
  border: 2px solid var(--practice-line);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow);
}
@media (max-width: 560px) {
  .tool { padding: 18px 16px; border-radius: var(--radius); }
  .practice-shell { padding: 0 14px; }
}

.tool + .tool { margin-top: 20px; }

.tool h2 { font-size: 1.2rem; margin-bottom: 4px; }
.tool h3 { font-size: 1rem; margin-bottom: 10px; }

.tool-hint {
  color: var(--grey);
  font-size: 0.92rem;
  margin: 0 0 18px;
}

/* ===== Controls ===== */
.ctrl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
  align-items: flex-end;
  margin-bottom: 20px;
}

.ctrl { flex: 1 1 150px; min-width: 0; }

.ctrl > label,
.ctrl-label {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--teal-dark);
  margin-bottom: 6px;
}

.ctrl input[type="number"],
.ctrl input[type="text"],
.ctrl select {
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid var(--practice-line);
  border-radius: 12px;
  background: #fff;
}
.ctrl input:focus, .ctrl select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(23, 112, 152, 0.15);
}

/* Stepper: number input flanked by big +/- buttons for phone use */
.stepper {
  display: flex;
  align-items: stretch;
  gap: 6px;
  max-width: 220px;
}
.stepper input[type="number"] {
  text-align: center;
  -moz-appearance: textfield;
}
.stepper input[type="number"]::-webkit-outer-spin-button,
.stepper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.stepper button {
  flex: 0 0 46px;
  min-height: 48px;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--teal-dark);
  background: var(--teal-tint);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
}
.stepper button:hover { background: #DCEDF4; }
.stepper button:disabled { opacity: 0.4; cursor: not-allowed; }
.stepper button:focus-visible { outline: 3px solid var(--teal-dark); outline-offset: 2px; }

/* Range slider */
.ctrl input[type="range"] {
  width: 100%;
  height: 34px;
  accent-color: var(--teal);
  cursor: pointer;
}

.ctrl-value {
  font-weight: 800;
  color: var(--teal-dark);
  font-variant-numeric: tabular-nums;
}

/* Segmented choice (radio group styled as pills) */
.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.choice {
  position: relative;
  display: inline-flex;
}
.choice input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.choice span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 2px solid var(--practice-line);
  background: var(--cream);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--teal-dark);
}
.choice input:checked + span {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.choice input:focus-visible + span { outline: 3px solid var(--teal-dark); outline-offset: 2px; }

/* Tool buttons */
.tool-btn {
  font-family: inherit;
  font-weight: 800;
  font-size: 1rem;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: var(--green);
  color: var(--ink);
  transition: transform 0.15s ease, background 0.15s ease;
}
.tool-btn:hover:not(:disabled) { background: var(--green-dark); transform: translateY(-2px); }
.tool-btn:focus-visible { outline: 3px solid var(--teal-dark); outline-offset: 2px; }
.tool-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.tool-btn.secondary {
  background: #fff;
  color: var(--teal-dark);
  border: 2px solid var(--teal);
}
.tool-btn.secondary:hover:not(:disabled) { background: var(--teal-tint); }

.tool-btn.quiet {
  background: var(--cream);
  color: var(--grey);
  border: 2px solid var(--practice-line);
  font-size: 0.92rem;
  padding: 10px 20px;
}
.tool-btn.quiet:hover:not(:disabled) { background: var(--teal-tint); color: var(--teal-dark); }

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
}

/* ===== Visual stage ===== */
.stage {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 20px 16px;
  margin: 18px 0;
  overflow-x: auto;
}
/* max-height stops a near-square graphic (a single pie, the balance scale) from
   growing to the full column width on a wide screen. preserveAspectRatio then
   scales the drawing down and centres it. */
.stage svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 360px;
}

.stage-caption {
  text-align: center;
  color: var(--grey);
  font-size: 0.88rem;
  font-weight: 700;
  margin: 10px 0 0;
}

/* ===== Readout / working ===== */
.readout {
  background: var(--teal-tint);
  border-left: 5px solid var(--teal);
  border-radius: 0 12px 12px 0;
  padding: 16px 18px;
  margin: 18px 0 0;
}
.readout p { margin: 0 0 8px; }
.readout p:last-child { margin-bottom: 0; }
.readout .result {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--teal-dark);
}

.working {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: workstep;
}
.working li {
  position: relative;
  padding: 8px 0 8px 38px;
  font-size: 1rem;
  border-bottom: 1px dashed rgba(23, 112, 152, 0.25);
}
.working li:last-child { border-bottom: none; }
.working li::before {
  counter-increment: workstep;
  content: counter(workstep);
  position: absolute;
  left: 0;
  top: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.working li.is-current {
  background: rgba(255, 255, 255, 0.75);
  border-radius: 8px;
  font-weight: 700;
}
.working li.is-pending { opacity: 0.35; }

/* Formulas keep tabular figures but must still wrap - some of these lines are
   sentence length, and nowrap pushed them off the side of a phone screen. */
.maths {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  overflow-wrap: break-word;
}

/* Inline stacked fraction, e.g. 3 over 4 */
.frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  margin: 0 4px;
  font-weight: 800;
  line-height: 1.15;
  font-size: 0.92em;
}
.frac .num { border-bottom: 2px solid currentColor; padding: 0 5px; }
.frac .den { padding: 0 5px; }

/* ===== Feedback ===== */
.feedback {
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 16px;
  font-weight: 700;
  display: none;
}
.feedback.show { display: block; }
.feedback.correct { background: var(--green-tint); color: #3D5C13; border-left: 5px solid var(--green); }
.feedback.wrong { background: var(--practice-red-tint); color: var(--practice-red); border-left: 5px solid var(--practice-red); }
.feedback.info { background: var(--practice-amber-tint); color: var(--practice-amber); border-left: 5px solid var(--practice-amber); }
.feedback .fb-working {
  display: block;
  margin-top: 8px;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
}

.score-line {
  font-weight: 800;
  color: var(--teal-dark);
  font-size: 0.95rem;
}

/* ===== Data table (frequency tables, working tables) ===== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 0;
  font-variant-numeric: tabular-nums;
}
.data-table th, .data-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--practice-line);
  font-size: 0.95rem;
}
.data-table th {
  font-weight: 800;
  color: var(--teal-dark);
  background: var(--cream);
}
.data-table td.num, .data-table th.num { text-align: right; }
.table-wrap { overflow-x: auto; }

/* ===== Shared animation helpers ===== */
@keyframes practice-pop {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.pop { animation: practice-pop 0.28s ease-out both; }
/* Inside SVG, scale each item about its own centre rather than the canvas
   origin. Never put .pop on an element positioned by a transform attribute -
   the animation's CSS transform would replace it. */
svg .pop { transform-box: fill-box; transform-origin: center; }

@keyframes practice-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.shake { animation: practice-shake 0.4s ease; }

@keyframes practice-flash {
  0% { background: var(--green-tint); }
  100% { background: transparent; }
}
.flash { animation: practice-flash 0.7s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .pop, .shake, .flash { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ===== Algebra: draggable term chips ===== */
.term-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  min-height: 66px;
  padding: 14px;
  background: var(--cream);
  border: 2px dashed #CFDDE4;
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.term-bank-empty { color: var(--grey); font-size: 0.92rem; margin: 4px 0 0; }

.term-chip {
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  min-height: 46px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: grab;
  touch-action: none;
  user-select: none;
  color: #fff;
  background: var(--teal);
  box-shadow: 0 3px 0 rgba(15, 84, 118, 0.35);
}
.term-chip.grp-y { background: var(--practice-purple); box-shadow: 0 3px 0 #4C3670; }
.term-chip.grp-k { background: var(--practice-amber); box-shadow: 0 3px 0 #8F560F; }
.term-chip.neg { border-color: rgba(255, 255, 255, 0.65); }
.term-chip:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.term-chip.dragging {
  cursor: grabbing;
  z-index: 40;
  position: relative;
  transform-origin: center;
  box-shadow: 0 12px 24px rgba(15, 84, 118, 0.35);
}
.term-chip.placed {
  cursor: default;
  opacity: 1;
  font-size: 0.95rem;
  min-height: 38px;
  padding: 6px 12px;
  box-shadow: none;
}
.term-chip.placed:disabled { opacity: 1; }

.collect-zone {
  border: 3px dashed var(--teal);
  border-radius: var(--radius);
  padding: 14px;
  background: #fff;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.collect-zone.over { background: var(--teal-tint); border-style: solid; }
.collect-zone-label {
  font-weight: 800;
  color: var(--teal-dark);
  font-size: 0.9rem;
  margin: 0 0 12px;
  text-align: center;
}

.collect-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.collect-col {
  background: var(--cream);
  border-radius: 12px;
  padding: 10px 8px;
  min-height: 108px;
  text-align: center;
}
.collect-col.has-terms { background: var(--teal-tint); }
.collect-col h4 {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--teal-dark);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.collect-col-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 8px;
}
.collect-total {
  font-weight: 800;
  color: var(--teal-dark);
  margin: 0;
  font-size: 1.05rem;
}

/* ===== Equations: the equation line ===== */
.eq-display {
  text-align: center;
  background: var(--teal-tint);
  border-radius: var(--radius);
  padding: 18px 14px;
  margin-bottom: 8px;
}
.eq-line {
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  font-weight: 800;
  color: var(--teal-dark);
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
}
.eq-equals { margin: 0 16px; color: var(--green-dark); }

/* ===== Ratio: counters flying into groups ===== */
.ratio-stage {
  position: relative;
  margin: 18px 0;
}
.ratio-pool {
  background: var(--cream);
  border: 2px dashed #CFDDE4;
  border-radius: var(--radius);
  min-height: 110px;
  padding: 8px 8px 12px;
  margin-bottom: 14px;
}
.ratio-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.ratio-group {
  border: 3px solid var(--teal);
  border-radius: var(--radius);
  min-height: 130px;
  padding: 8px;
  position: relative;
  background: #fff;
}
.ratio-zone-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.ratio-zone-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grey);
  margin-bottom: 4px;
}
.ratio-zone-head .ratio-zone-label { margin-bottom: 0; }
.ratio-group-count {
  flex: 0 0 auto;
  font-size: 1.05rem;
  color: var(--teal-dark);
  font-variant-numeric: tabular-nums;
}
.ratio-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ratio-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #9AAAB3;
  transition: transform 0.55s cubic-bezier(.3, .8, .3, 1), background 0.3s ease;
}
.ratio-stage.no-dots .ratio-dots { display: none; }
.ratio-stage.no-dots .ratio-pool::after {
  content: "The total does not split into whole counters, so the working below "
    "shows the exact amounts.";
  display: block;
  padding: 18px 12px;
  color: var(--grey);
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
}

/* ===== Proportion: recipe rows ===== */
.multiplier-badge {
  display: inline-block;
  background: var(--green-tint);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0 0 18px;
}
.recipe-list {
  display: grid;
  gap: 10px;
}
.recipe-row {
  display: grid;
  grid-template-columns: minmax(90px, 1.1fr) 2fr minmax(74px, auto);
  gap: 12px;
  align-items: center;
}
.recipe-name { font-weight: 700; font-size: 0.95rem; }
.recipe-bar {
  background: var(--cream);
  border-radius: 999px;
  height: 22px;
  overflow: hidden;
}
.recipe-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), #3FA9C5);
  border-radius: 999px;
  transition: width 0.25s ease;
}
.recipe-qty {
  font-weight: 800;
  color: var(--teal-dark);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.98rem;
}
@media (max-width: 460px) {
  .recipe-row { grid-template-columns: 1fr auto; }
  .recipe-bar { grid-column: 1 / -1; order: 3; }
}

/* ===== Probability: spinner section editor + sample space ===== */
.section-editor { display: grid; gap: 8px; margin-bottom: 8px; }
.section-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-swatch {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
}
.section-label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  min-height: 44px;
  padding: 8px 12px;
  border: 2px solid var(--practice-line);
  border-radius: 10px;
}
.section-label:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(23, 112, 152, 0.15);
}
.stepper.section-size { flex: 0 0 auto; align-items: center; }
.stepper.section-size button { flex-basis: 40px; min-height: 44px; }
.section-size-value {
  min-width: 30px;
  text-align: center;
  font-weight: 800;
  color: var(--teal-dark);
  align-self: center;
}

.sample-grid td, .sample-grid th { text-align: center; padding: 8px 10px; }
.sample-grid td.hit {
  background: var(--green);
  color: var(--ink);
  font-weight: 800;
  border-radius: 4px;
}
.sample-grid thead th { background: var(--teal-tint); }
.sample-grid tbody th { background: var(--teal-tint); text-align: center; }