/* Styles for the two bandit games, mab-warmup.qmd and mab.qmd. */

/* Machine colours: the brand's indigo and amber, stepped for chart marks and
   checked for colour-vision deficiency against each mode's paper. Borders and
   washes mix the text colour, so they follow the light and the dark theme. */
.mab {
  --mab-a: #1e5f92;
  --mab-b: #b06e00;
  --mab-line: color-mix(in srgb, currentColor 18%, transparent);
  --mab-wash: color-mix(in srgb, currentColor 5%, transparent);
}
body.quarto-dark .mab {
  --mab-a: #5698d2;
  --mab-b: #c38323;
}
.mab-game {
  border: 1px solid var(--mab-line);
  border-radius: .5rem;
  padding: 1rem;
  margin: 1rem 0;
}
.mab-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
  margin-bottom: .9rem;
  font-variant-numeric: tabular-nums;
}
.mab-spacer { flex: 1; }
.mab-new {
  font: inherit;
  font-size: .9rem;
  color: inherit;
  background: transparent;
  border: 1px solid var(--mab-line);
  border-radius: .375rem;
  padding: .2rem .8rem;
}
.mab-machines {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.mab-machine {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  width: 100%;
  padding: .7rem .5rem .8rem;
  font: inherit;
  color: inherit;
  background: var(--bs-body-bg);
  border: 1px solid var(--mab-line);
  border-top: 6px solid var(--machine);
  border-radius: .5rem;
  cursor: pointer;
  transition: background-color .15s, transform .15s;
}
/* Only where a pointer can hover: on a phone, :hover sticks to the last card tapped. */
@media (hover: hover) {
  .mab-new:hover { background: var(--mab-wash); }
  .mab-machine:hover:not(:disabled) {
    background: var(--mab-wash);
    transform: translateY(-2px);
  }
}
.mab-machine:focus-visible {
  outline: 2px solid var(--machine);
  outline-offset: 2px;
}
.mab-machine:disabled { cursor: default; }
.mab-machine:disabled .mab-cta { visibility: hidden; }
.mab-machine.is-latest { box-shadow: 0 0 0 2px var(--machine); }
.mab-machine:not(.is-latest) .mab-reward { opacity: .45; }
.mab-name { font-weight: 600; }
.mab-reward {
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.2;
}
.mab-cta {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}
/* The numbers under a machine in the game: N and Q, then q* once the game is over. */
.mab-stats, .mab-reveal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 1rem;
  margin-top: .4rem;
  font-variant-numeric: tabular-nums;
}
.mab-reveal { gap: .15rem .4rem; }
.mab-stats > span, .mab-reveal > span { white-space: nowrap; }
/* The rewards a machine has paid, in the warm-up: right-aligned columns, so the
   decimal points line up however the list wraps. */
.mab-paid {
  margin-top: .4rem;
  padding: 0 .3rem;
  font-variant-numeric: tabular-nums;
}
.mab-paid-values {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.3em, 1fr));
  justify-items: end;
  column-gap: .5rem;
}
.mab-badge {
  font-size: .75rem;
  font-weight: 600;
  padding: 0 .45rem;
  border: 1px solid currentColor;
  border-radius: 1rem;
}
.mab-message {
  margin-top: .9rem;
  min-height: 3.6em;
}
.mab-update, .mab-muted, .mab-note { color: var(--bs-secondary-color); }
.mab-update { font-variant-numeric: tabular-nums; }
.mab-note { font-size: .9rem; }
.mab-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem 1.1rem;
  font-size: .85rem;
  color: var(--bs-secondary-color);
}
.mab-legend svg {
  margin-right: .3rem;
  vertical-align: -.1rem;
  overflow: visible;
}
.mab-history summary { cursor: pointer; }
.mab-history table, .mab-results table { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .mab-machine { transition: none; }
  .mab-machine:hover:not(:disabled) { transform: none; }
}