/* Mini-test styles. Design tokens only; no raw colours. Re-skin by overriding tokens
   or the --mt-* hooks below. Desktop >= 48rem; narrow screens stack and the question
   list becomes a bottom sheet. */
.mt { --mt-radius: var(--r-3); --mt-pad: var(--sp-5); max-width: 56rem; margin-inline: auto; }
.mt__tracks { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.mt-track { min-height: 2.75rem; padding: 0 var(--sp-5); border-radius: var(--r-pill); border: 2px solid var(--c-border-strong); background: transparent; color: var(--c-text); font: inherit; font-weight: var(--fw-semibold); cursor: pointer; }
.mt-track:hover { background: var(--c-surface-2); }
.mt-track[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.mt-track:focus-visible, .mt-choice:focus-visible, .mt-listrow:focus-visible, .mt-resrow:focus-visible, .mt-num:focus-visible, .mt__stage:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-bg), 0 0 0 5px var(--c-accent); }
.mt__stage:focus { outline: none; }

.mt__frame { position: relative; background: var(--c-bg); border: 1px solid var(--c-border-strong); border-radius: var(--mt-radius); box-shadow: var(--shadow-2); overflow: hidden; }
.mt__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--mt-pad); background: var(--c-surface-2); border-bottom: 1px solid var(--c-border-strong); }
.mt-bar__band { font-weight: var(--fw-semibold); font-size: var(--fs-n1); }
.mt-bar__time { display: inline-flex; align-items: center; gap: var(--sp-3); }
.mt-clock { font-family: var(--font-mono); font-size: var(--fs-1); font-weight: var(--fw-bold); min-width: 4.5ch; text-align: right; }
.mt-hide { min-height: 2.75rem; padding: 0 var(--sp-4); }

.mt__stage { position: relative; min-height: 22rem; }
.mt-pane { padding: var(--mt-pad); }
.mt-pane > :last-child { margin-bottom: 0; }
.mt-h { font-size: var(--fs-1); margin-bottom: var(--sp-3); }
.mt-h:focus { outline: none; }
.mt-meta { color: var(--c-text-muted); font-size: var(--fs-n1); }
.mt-hint { color: var(--c-text-muted); font-size: var(--fs-n1); margin-bottom: var(--sp-3); }
.mt-stem { font-size: var(--fs-0); max-width: 60ch; }
.mt-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

.mt-quant { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.mt-quant > div { border: 1px solid var(--c-border-strong); border-radius: var(--r-2); padding: var(--sp-3); background: var(--c-surface); }
.mt-quant__k { display: block; font-size: var(--fs-n1); font-weight: var(--fw-bold); color: var(--c-text-muted); }
.mt-table-wrap { overflow-x: auto; margin-bottom: var(--sp-4); }
.mt-table { border-collapse: collapse; font-size: var(--fs-n1); min-width: 14rem; }
.mt-table th, .mt-table td { border: 1px solid var(--c-border-strong); padding: var(--sp-2) var(--sp-3); text-align: left; }
.mt-table thead th { background: var(--c-surface-2); }

.mt-choices { display: grid; gap: var(--sp-2); }
.mt-choice, .mt-ropt { display: flex; align-items: flex-start; gap: var(--sp-3); width: 100%; min-height: 2.75rem; padding: var(--sp-3); text-align: left; font: inherit; color: var(--c-text); background: var(--c-bg); border: 1px solid var(--c-border-strong); border-radius: var(--r-2); }
.mt-choice { cursor: pointer; }
.mt-choice:hover { background: var(--c-surface); }
.mt-choice.is-on { background: var(--c-accent-soft); border-color: var(--c-accent); }
.mt-marker { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; border: 2px solid var(--c-border-strong); background: var(--c-bg); }
.mt-marker--radio { border-radius: 50%; }
.mt-marker--check { border-radius: var(--r-1); }
.mt-choice.is-on .mt-marker, .mt-marker.is-on { border-color: var(--c-accent); background: var(--c-accent); box-shadow: inset 0 0 0 3px var(--c-bg); }
.mt-letter { font-family: var(--font-mono); margin-right: var(--sp-1); }
.mt-blanks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.mt-blank__label { font-weight: var(--fw-bold); font-size: var(--fs-n1); margin-bottom: var(--sp-2); }
.mt-numwrap { max-width: 16rem; }
.mt-num { width: 100%; min-height: 2.75rem; padding: 0 var(--sp-3); font: inherit; font-family: var(--font-mono); font-size: var(--fs-1); color: var(--c-text); background: var(--c-bg); border: 2px solid var(--c-border-strong); border-radius: var(--r-2); }
.mt-reject { min-height: 1.5rem; margin-top: var(--sp-2); font-size: var(--fs-n1); color: var(--c-error); }

.mt__tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; padding: var(--sp-3) var(--mt-pad); background: var(--c-surface); border-top: 1px solid var(--c-border-strong); }
.mt__tools[hidden], .mt__bar[hidden] { display: none; }
.mt-tb { min-height: 2.75rem; padding: 0 var(--sp-4); }
.mt-tb[aria-pressed="true"] { background: var(--c-accent-soft); }

/* question list */
.mt-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-2); }
.mt-listrow { display: grid; grid-template-columns: 2rem auto 1fr; align-items: center; gap: var(--sp-3); width: 100%; min-height: 2.75rem; padding: var(--sp-2) var(--sp-3); font: inherit; color: var(--c-text); text-align: left; background: var(--c-bg); border: 1px solid var(--c-border-strong); border-radius: var(--r-2); cursor: pointer; }
.mt-listrow:hover { background: var(--c-surface); }
.mt-listrow.is-current { border-color: var(--c-accent); background: var(--c-accent-soft); }
.mt-listrow__n { font-family: var(--font-mono); font-weight: var(--fw-bold); }
.mt-listrow__m { justify-self: end; font-size: var(--fs-n1); }
.mt-pill, .mt-res-pill { display: inline-block; padding: 0 var(--sp-2); border-radius: var(--r-pill); font-size: var(--fs-n1); font-weight: var(--fw-semibold); border: 1px solid currentColor; white-space: nowrap; }
.mt-pill--answered, .mt-res-pill--correct { color: var(--c-success); background: var(--c-success-bg); }
.mt-pill--incomplete, .mt-res-pill--omitted { color: var(--c-warn); background: var(--c-warn-bg); }
.mt-pill--notanswered, .mt-res-pill--incorrect { color: var(--c-error); background: var(--c-error-bg); }
.mt-pill--notencountered { color: var(--c-text-muted); background: var(--c-surface-2); border-style: dashed; }
.mt-under { display: none; }

/* results */
.mt-summary { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-bottom: var(--sp-3); }
.mt-summary .stat__value { font-size: var(--fs-4); }
.mt-res { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.mt-res__head, .mt-resrow { display: grid; grid-template-columns: 3rem 1.5fr 1.5fr 7.5rem 4rem 4.5rem 4rem; gap: var(--sp-3); align-items: center; }
.mt-res__head { padding: 0 var(--sp-3); font-size: var(--fs-n1); font-weight: var(--fw-bold); color: var(--c-text-muted); }
.mt-resrow { width: 100%; min-height: 2.75rem; padding: var(--sp-2) var(--sp-3); font: inherit; font-size: var(--fs-n1); color: var(--c-text); text-align: left; background: var(--c-bg); border: 1px solid var(--c-border-strong); border-radius: var(--r-2); cursor: pointer; }
.mt-resrow:hover { background: var(--c-surface); border-color: var(--c-accent); }
.mt-cell { min-width: 0; overflow-wrap: anywhere; }
.mt-cell__k { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-cell--q { font-family: var(--font-mono); font-weight: var(--fw-bold); }

.mt-timing { border-top: 1px solid var(--c-border); padding-top: var(--sp-4); }
.mt-timing h4 { margin-bottom: var(--sp-3); }
.mt-bars { display: grid; gap: var(--sp-2); }
.mt-bar-row { display: grid; grid-template-columns: 2.5rem 1fr 7.5rem; gap: var(--sp-3); align-items: center; font-size: var(--fs-n1); }
.mt-bar-row__q { font-family: var(--font-mono); font-weight: var(--fw-bold); }
.mt-bar-track { display: block; height: 0.875rem; border-radius: var(--r-pill); background: var(--c-surface-2); border: 1px solid var(--c-border); overflow: hidden; }
.mt-bar-fill { display: block; height: 100%; background: var(--c-accent); border-radius: var(--r-pill); }
.mt-bar-fill.is-slowest { background: var(--c-warn); }
.mt-timing__line { margin-top: var(--sp-3); color: var(--c-text-muted); }

/* review */
.mt-ropt { position: relative; flex-wrap: wrap; }
.mt-ropt.is-correct { background: var(--c-success-bg); border-color: var(--c-success); border-width: 2px; }
.mt-ropt.is-wrong { background: var(--c-error-bg); border-color: var(--c-error); border-width: 2px; }
.mt-ropt__tag { margin-left: auto; font-size: var(--fs-n1); font-weight: var(--fw-bold); }
.mt-ropt.is-correct .mt-ropt__tag { color: var(--c-success); }
.mt-ropt.is-wrong .mt-ropt__tag { color: var(--c-error); }
.mt-numrev { display: grid; gap: var(--sp-2); max-width: 24rem; }
.mt-pane--wide .callout { margin-top: var(--sp-4); }

/* narrow screens: stack, bottom toolbar, list becomes a sheet */
@media (max-width: 47.99rem) {
  .mt { --mt-pad: var(--sp-4); }
  .mt-quant, .mt-blanks { grid-template-columns: 1fr; }
  .mt__tools { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .mt__tools .mt-tb { padding-inline: var(--sp-2); min-width: 0; }
  .mt__stage--list { min-height: 30rem; }
  .mt__stage--list .mt-under { display: block; }
  .mt__stage--list::before { content: ""; position: absolute; inset: 0; background: var(--c-text); opacity: 0.45; z-index: 1; }
  .mt-pane--list { position: absolute; inset: auto 0 0 0; z-index: 2; max-height: 90%; overflow-y: auto; background: var(--c-bg); border-top: 2px solid var(--c-border-strong); border-radius: var(--mt-radius) var(--mt-radius) 0 0; box-shadow: var(--shadow-3); }
  .mt-res__head { display: none; }
  .mt-resrow { grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3); }
  .mt-cell__k { position: static; display: block; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; font-size: var(--fs-n1); color: var(--c-text-muted); }
  .mt-cell--q { grid-column: 1 / -1; }
  .mt-bar-row { grid-template-columns: 2rem 1fr 6rem; }
  .mt-ropt__tag { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: no-preference) { .mt-choice, .mt-resrow, .mt-listrow { transition: background var(--dur-1) var(--ease); } }

/* the host slot is a live mount, not a placeholder: drop the dashed placeholder frame */
.slot.slot--live { border: 0; padding: 0; background: none; display: block; min-height: 0; text-align: left; color: inherit; }

.mt-ropt > span:nth-child(2) { flex: 1 1 0; min-width: 0; }
.mt-timing__line { margin-top: var(--sp-4); }
.mt-listrow[disabled] { cursor: not-allowed; }
.mt__bar:focus { outline: none; }