/* The drill screen. On the gradient: who, the rep line and the score bar. On the card:
   everything you count with. The card never takes the tint. */

.drill {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-16);
  align-content: start;
}

.drill__step,
.drill__card,
.drill__panel {
  min-width: 0;
}

.drill__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-14);
}

.drill__who {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.drill__change {
  flex: none;
  min-height: 40px;
  padding: 0 var(--space-14);
  font-size: var(--text-15);
  white-space: nowrap;
}

.drill__step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-14);
}

.drill__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-16);
}

.drill__option {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
}

.drill__moves summary {
  min-height: var(--target);
  cursor: pointer;
}

.drill__moves-form {
  display: grid;
  gap: var(--space-14);
  padding-top: var(--space-10);
}

.drill__intro-status {
  color: var(--ink);
}

.drill__timing-link {
  justify-self: center;
  text-align: center;
}

/* The round */

.drill__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  min-height: var(--target);
}

.drill__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-16);
  border-radius: 22px;
}

.drill__lane-wrap {
  position: relative;
}

/* Counter and feedback panel share one slot, so nothing below them moves. */
.drill__readout {
  position: relative;
  display: grid;
  min-height: 106px;
  align-items: center;
}

.drill__feedback:empty {
  display: none;
}

.drill__feedback {
  position: absolute;
  inset: 0;
}

.drill__feedback .feedback {
  height: 100%;
}

.drill__throws {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.drill__feedback:not(:empty) ~ .drill__throws {
  visibility: hidden;
}

/* This rep's throws so far: a number plus a word or sign, never colour alone. */
.drill__throw {
  min-width: 48px;
  padding: 2px var(--space-10);
  border-radius: var(--radius-pill);
  background: var(--card-soft);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-13);
  text-align: center;
  color: var(--muted);
}

.drill__throw.is-perfect { background: var(--good-bg); color: var(--ink); }
.drill__throw.is-late { background: var(--them-bg); color: var(--ink); }
.drill__throw.is-early { background: var(--bad-bg); color: var(--ink); }

.drill__status:empty {
  display: none;
}

.drill__card-links {
  display: flex;
  justify-content: center;
}

.drill__controls {
  display: grid;
  gap: var(--space-14);
}

.drill__charged,
.drill__fast {
  touch-action: manipulation;
}

.drill__fast {
  min-height: 140px;
}

.drill__paused {
  display: grid;
  gap: var(--space-14);
}

/* Summary: the loudest screen */

.summary__bar {
  align-items: flex-start;
}

.summary__best {
  color: var(--on-dark-muted);
}

.summary__best.is-record {
  color: var(--on-dark);
  font-weight: 800;
}

.summary__accuracy {
  font-size: var(--text-25);
  font-weight: 800;
}

.drill__coaching {
  font-weight: 600;
}

.drill__ledger {
  overflow-x: auto;
}

/* Portrait only in v0: on a phone held sideways, ask to rotate back. */
.drill__landscape {
  display: none;
}

@media (orientation: landscape) and (max-height: 500px) {
  .drill > :not(.drill__landscape) { display: none !important; }
  .drill__landscape { display: block; }
}

/* The summary's streak pill may carry "new record": let it wrap on small phones. */
.summary__bar .streak-pill {
  white-space: normal;
  text-align: right;
  padding-block: var(--space-4);
}