/* ============================================================================
   blackjack.global — strategy trainer surface.

   Loaded after base.css and game.css, which own the tokens and the shared
   panel, button, action bar and mistake-list components. Nothing here restates
   a token value or a shared component: this file adds only what the drill needs
   and nothing that another surface already draws.

   Layout rules the site holds everywhere:
   - one column below 48rem, so the drill works at 360px with no horizontal scroll
   - no label whose meaning depends on fitting one line, because German and
     Turkish run about 40 percent longer than English
   - every control is at least the minimum tap target on every viewport
   ========================================================================== */

.trainer-page {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

.trainer-page > h2 {
  margin: var(--space-3) 0 0;
  max-width: var(--measure-prose);
}

.trainer-page > p {
  margin: 0;
  max-width: var(--measure-prose);
  text-wrap: pretty;
}

/* ------------------------------------------------------------------- drill */

.trainer-drill .ctrlrow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: end;
}

@media (min-width: 40rem) {
  .trainer-drill .ctrlrow {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
  }
}

.trainer-hand {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-cell);
  background: var(--surface-2);
}

.trainer-hand__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  min-width: 0;
}

.trainer-hand__row b {
  font-size: var(--text-md);
  overflow-wrap: anywhere;
}

.trainer-hand__desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-2);
  overflow-wrap: anywhere;
}

/* The verdict block keeps its box while it is empty, so grading a hand never
   pushes the action bar down the page under the player's thumb. */
.trainer-verdict {
  display: grid;
  gap: var(--space-1);
  min-height: 6rem;
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-left-width: 3px;
  border-radius: var(--radius-cell);
  background: var(--surface-2);
}

.trainer-verdict[data-verdict='correct'] { border-left-color: var(--pos); }
.trainer-verdict[data-verdict='mistake'] { border-left-color: var(--neg); }
.trainer-verdict[data-verdict='illegal'] { border-left-color: var(--border-strong); }
.trainer-verdict[data-verdict='idle'],
.trainer-verdict[data-verdict='silent'] { border-left-color: var(--border-ui); }

.trainer-verdict__v {
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}

.trainer-verdict__sev {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-3);
  overflow-wrap: anywhere;
}

.trainer-verdict__cost,
.trainer-verdict__best {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-2);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- refusal */
/* Shown when the selected table has no published chart. Bordered like a figure
   rather than an error, because a missing chart is a stated finding here and not
   a fault the player caused. */
.trainer-refusal {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-ui);
  border-radius: var(--radius-cell);
  background: var(--surface-2);
}

.trainer-refusal h3 {
  margin: 0;
  font-size: var(--text-md);
}

.trainer-refusal p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-2);
  max-width: var(--measure-prose);
}

.badge[data-graded='false'] {
  color: var(--text-3);
}

/* ------------------------------------------------------------ session figures */

.trainer-page .statgrid dl {
  display: grid;
  gap: var(--space-px);
  align-content: start;
  min-width: 0;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-cell);
  background: var(--surface-2);
}

.trainer-page .statgrid dt {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-3);
  overflow-wrap: anywhere;
}

.trainer-page .statgrid dd {
  margin: 0;
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.trainer-page .natext {
  font-size: var(--text-xs);
  color: var(--text-3);
  max-width: var(--measure-prose);
}

/* --------------------------------------------------------------- band list */

.trainer-bands {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-left: var(--space-5);
  max-width: var(--measure-prose);
}

.trainer-bands li {
  font-size: var(--text-sm);
  color: var(--text-2);
}

.rules-sources {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-left: var(--space-5);
}

.rules-sources li {
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}