/* Review deck (/contribute/review, public/js/review-deck.js). */
.deck-types {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.deck-types a {
  padding: var(--space-1) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition:
    color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out);
}

.deck-types a:hover,
.deck-types a[aria-current='page'] {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
}

.deck {
  max-width: var(--width-deck);
  margin: 0 auto;
}

/* Every card sits in the same grid cell, so a leaving card flies off over the next one. */
.deck-stage {
  display: grid;
  min-height: 16rem;
  margin: var(--space-4) 0;
}

/* The swipe decks (Review, Listen): a bigger card, with the cards before and after peeking in from the sides, faded
   towards the edges: decoration only. Each preview takes the room beside the deck, at most 40% of a card (none
   below 48rem), so the page never scrolls sideways (100cqi is the body's width, base.css). */
[data-deck] > .deck-stage {
  position: relative;
  min-height: 20rem;
  margin: var(--space-3) 0 var(--space-8);
}

/* The swipe decks' count: a small pill above the card's top right (Speak's sits inside its card's corner). */
[data-deck] > .deck-count {
  margin: var(--space-10) 0 0;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

[data-deck] > .deck-stage::before,
[data-deck] > .deck-stage::after {
  content: '';
  position: absolute;
  top: var(--space-6);
  bottom: var(--space-6);
  width: clamp(0px, (100cqi - 100%) / 2 - var(--grid-margin) - var(--space-6), 40%);
  background-color: var(--color-surface);
  /* Three faint lines where a card's question, word and meaning would be. */
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-text) 5%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--color-text) 9%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--color-text) 5%, transparent) 0 0);
  background-repeat: no-repeat;
  background-size:
    45% var(--space-2),
    60% var(--space-5),
    70% var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  opacity: 0.8;
  pointer-events: none;
}

[data-deck] > .deck-stage::before {
  right: calc(100% + var(--space-6));
  background-position:
    right var(--space-8) top var(--space-8),
    right var(--space-8) top calc(var(--space-8) + var(--space-6)),
    right var(--space-8) top calc(var(--space-8) + var(--space-12) + var(--space-2));
  transform-origin: right center;
  mask-image: linear-gradient(to left, black 30%, transparent);
}

[data-deck] > .deck-stage::after {
  left: calc(100% + var(--space-6));
  background-position:
    left var(--space-8) top var(--space-8),
    left var(--space-8) top calc(var(--space-8) + var(--space-6)),
    left var(--space-8) top calc(var(--space-8) + var(--space-12) + var(--space-2));
  transform-origin: left center;
  mask-image: linear-gradient(to right, black 30%, transparent);
}

/* The previews move with an answer (deck.js sets `data-move` on the stage for the length of the slide): the preview
   the card slides into takes it in (a little push outwards and a glow), and the one on the other side glides in
   towards the middle and fades, as if it became the next card, then a fresh one fades back in behind it. */
[data-deck] > .deck-stage[data-move='right']::after,
[data-deck] > .deck-stage[data-move='left']::before {
  animation: preview-take calc(2 * var(--duration-base)) var(--ease-out);
}

[data-deck] > .deck-stage[data-move='right']::before {
  --slide: var(--space-10);
  animation: preview-give calc(2 * var(--duration-base)) var(--ease-out);
}

[data-deck] > .deck-stage[data-move='left']::after {
  --slide: calc(-1 * var(--space-10));
  animation: preview-give calc(2 * var(--duration-base)) var(--ease-out);
}

[data-deck] > .deck-stage[data-move='right']::after {
  --push: var(--space-3);
}

[data-deck] > .deck-stage[data-move='left']::before {
  --push: calc(-1 * var(--space-3));
}

@keyframes preview-take {
  40% {
    opacity: 1;
    translate: var(--push) 0;
    scale: 1.04;
    box-shadow: var(--shadow-lg);
  }
}

@keyframes preview-give {
  45% {
    opacity: 0;
    translate: var(--slide) 0;
    scale: 1.06;
  }

  55% {
    opacity: 0;
    translate: calc(-1 * var(--slide)) 0;
    scale: 0.94;
  }
}

/* Phones have no room beside the deck: no previews (a zero-width one would still poke its borders off the screen),
   and the deck clips a card sliding off. */
@media (max-width: 47.99rem) {
  [data-deck] > .deck-stage::before,
  [data-deck] > .deck-stage::after {
    display: none;
  }

  /* No previews here, so a card sliding off is cut at the deck's sides instead of widening the page (clip, not
     hidden: no scroll box, the card's own shadow and the buttons' stars stay inside it anyway). */
  [data-deck] {
    overflow-x: clip;
  }
}

[data-deck] .review-card {
  z-index: var(--z-raised); /* above the previews, so a card slides over the one it goes into */
  padding: var(--space-8);
}

[data-deck] .card-headword {
  font-size: var(--text-3xl);
}

.deck-stage > * {
  grid-area: 1 / 1;
}

.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  overflow: hidden;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
  transition: transform var(--duration-base) ease;
}

.review-card.dragging {
  cursor: grabbing;
  transition: none;
}

/* A carousel (deck.js): an answered card slides off to the side of its answer, shrinking into the preview there and
   fading, while the next one glides in from the other side, growing out of that preview. leaveMs in deck.js matches
   the 2 × --duration-base here. */
.review-card.leaving {
  pointer-events: none;
  transition:
    transform calc(2 * var(--duration-base)) var(--ease-out),
    opacity calc(2 * var(--duration-base)) var(--ease-out);
  opacity: 0;
}

.review-card.leave-right {
  transform: translateX(calc(100% + var(--space-6))) scale(0.82);
}

.review-card.leave-left {
  transform: translateX(calc(-100% - var(--space-6))) scale(0.82);
}

.review-card.leave-down {
  transform: translateY(var(--space-10)) scale(0.94);
}

.review-card.entering {
  animation: card-in calc(2 * var(--duration-base)) var(--ease-out) backwards;
}

.review-card.from-left {
  --enter-from: translateX(calc(-100% - var(--space-6))) scale(0.82);
}

.review-card.from-right {
  --enter-from: translateX(calc(100% + var(--space-6))) scale(0.82);
}

.review-card.from-below {
  --enter-from: translateY(var(--space-10)) scale(0.94);
}

@keyframes card-in {
  from {
    opacity: 0.3;
    transform: var(--enter-from);
  }
}

/* The card's question: support text, small, light and muted, so the word is what you read first. */
.card-question {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
}

/* Listen: a player. The card's content is centred: a big round play button in the accent, the word large beside it, and
   sound bars under the word. While the clip plays (`.playing`, word-actions.js) the button's ring fills, a halo
   pulses round it and the bars dance. */
.review-card.audio {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.card-listen {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-2);
}

.card-listen .play-button {
  width: var(--size-control-xl);
  height: var(--size-control-xl);
  color: var(--color-on-accent);
  background: radial-gradient(
    circle at 35% 30%,
    color-mix(in srgb, var(--color-accent) 70%, var(--color-surface)),
    var(--color-accent) 60%
  );
  border-radius: var(--radius-full);
  box-shadow:
    0 0 0 var(--space-1) color-mix(in srgb, var(--color-accent) 15%, transparent),
    var(--shadow-sm);
  transition:
    scale var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.card-listen .play-button .icon {
  width: 55%;
  height: 55%;
}

.card-listen .play-button:hover:not(:disabled) {
  color: var(--color-on-accent);
  background: radial-gradient(
    circle at 35% 30%,
    color-mix(in srgb, var(--color-accent) 70%, var(--color-surface)),
    var(--color-accent) 60%
  );
  scale: 1.06;
}

.card-listen .play-button.playing {
  color: var(--color-on-accent);
  animation: play-halo 1.6s ease-out infinite;
}

@keyframes play-halo {
  0% {
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--color-accent) 45%, transparent),
      var(--shadow-sm);
  }

  100% {
    box-shadow:
      0 0 0 var(--space-5) color-mix(in srgb, var(--color-accent) 0%, transparent),
      var(--shadow-sm);
  }
}

.card-listen .card-headword {
  font-size: var(--text-display);
  line-height: var(--leading-tight);
}

/* The sound bars: short and still at rest, dancing at their own pace while the clip plays. */
.sound-bars {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--space-6);
}

.sound-bars i {
  width: var(--space-1);
  height: 25%;
  background: color-mix(in srgb, var(--color-accent) 35%, var(--color-surface));
  border-radius: var(--radius-pill);
  transition: background-color var(--duration-base) var(--ease-out);
}

.card-listen:has(.playing) .sound-bars i {
  background: var(--color-accent);
  animation: sound-bar 0.9s ease-in-out infinite alternate;
}

.card-listen:has(.playing) .sound-bars i:nth-child(2n) {
  animation-duration: 0.7s;
}

.card-listen:has(.playing) .sound-bars i:nth-child(3n) {
  animation-duration: 1.1s;
  animation-delay: -0.3s;
}

.card-listen:has(.playing) .sound-bars i:nth-child(4n + 1) {
  animation-delay: -0.5s;
}

@keyframes sound-bar {
  to {
    height: 100%;
  }
}

/* Speak (public/js/speak.js): one card, like a small recording booth. The count sits in its top corner; the word is
   centred and large, its meaning under it; the rose mic disc under that; and along the foot, under a hairline, the
   keys on the left (not on touch screens) and Skip on the right. Each new word rises in. */
.speak {
  max-width: var(--width-deck);
  margin: var(--space-4) auto 0;
}

.speak-card {
  position: relative;
  display: grid;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.speak-count {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  margin: 0;
  padding: var(--space-half) var(--space-3);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  border-radius: var(--radius-pill);
}

.speak-stage {
  display: grid;
  place-items: center;
  min-height: 10rem;
  padding: var(--space-12) var(--space-8) var(--space-2);
}

.speak-word {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  text-align: center;
  animation: speak-rise var(--duration-reveal) var(--ease-out);
}

.speak-word .card-headword {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
}

.speak-word .card-headword:hover {
  color: var(--color-accent);
}

.speak-word .card-description {
  max-width: 32rem;
}

.speak .recorder-prompt:empty {
  display: none;
}

.speak-recorder {
  display: grid;
  gap: var(--space-4);
  padding: 0 var(--space-6);
}

.speak-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: var(--border-width) solid var(--color-border);
}

.speak-keys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  color: var(--color-text-faint);
  font-size: var(--text-sm);
}

.speak-foot kbd {
  padding: var(--space-half) var(--space-2);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-xs);
  background: color-mix(in srgb, var(--color-text) 6%, var(--color-surface));
  border-radius: var(--radius-xs);
}

.speak-skip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    color var(--duration-base),
    background-color var(--duration-base);
}

.speak-skip:hover,
.speak-skip:focus-visible {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

/* Phones have no keyboard: no key hints, and Skip keeps only its word. */
@media (pointer: coarse) {
  .speak-keys,
  .speak-skip kbd {
    display: none;
  }
}

@keyframes speak-rise {
  from {
    opacity: 0;
    transform: translateY(var(--space-2));
  }
}

@media (prefers-reduced-motion: reduce) {
  .speak-word {
    animation: none;
  }
}

.card-headword {
  font-family: var(--font-text);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  color: var(--color-text);
  text-decoration: none;
}

/* The three languages, always in the same order: a small label, then the value. The card's question says which one is
   being asked about. */
.card-rows {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.card-row {
  padding: var(--space-1) 0;
}

.card-label {
  margin: 0 0 var(--space-half);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.card-value {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}

.card-term {
  font-size: var(--text-xl);
}

.card-badge {
  padding: var(--space-half) var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  vertical-align: middle;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
}

/* A Georgian lookup word being asked about: its description below is context. */
.card-term + .card-description {
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

.card-also {
  margin: 0;
}

.card-row.asked .card-also {
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

.card-missing {
  margin: 0;
  color: var(--color-text-faint);
}

.card-description {
  margin: 0;
  font-size: var(--text-lg);
}

.card-description.context {
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

.card-meta {
  margin: 0;
  color: var(--color-text-faint);
  font-size: var(--text-sm);
}

/* "✓ Right" / "✗ Wrong" fade in while the card is dragged that way (`--lean-*`, 0–1, set by the script). */
.card-stamp {
  position: absolute;
  top: var(--space-4);
  padding: var(--space-1) var(--space-2);
  font-weight: var(--weight-bold);
  border: var(--border-width-strong) solid;
  border-radius: var(--radius-sm);
  opacity: 0;
}

.card-stamp.right {
  right: var(--space-4);
  color: var(--color-on-bright);
  background: var(--color-right);
  border-color: var(--color-right);
  opacity: var(--lean-right, 0);
}

.card-stamp.wrong {
  left: var(--space-4);
  color: var(--color-on-bright);
  background: var(--color-wrong);
  border-color: var(--color-wrong);
  opacity: var(--lean-left, 0);
}

.deck-empty {
  align-self: center;
  text-align: center;
  color: var(--color-text-muted);
}

/* No cards left: an achievement, not an empty space. The card stays (the side previews go), with a star badge that
   pops in while little stars twinkle round it, and the thank-you under it; the answer buttons fade (undo still works). */
.deck-done {
  align-self: stretch; /* the full card, not the one-line empty message's size */
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  text-align: center;
  cursor: auto;
}

.deck-done p {
  max-width: var(--width-measure);
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
}

.deck-done-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--size-record);
  height: var(--size-record);
  background: linear-gradient(135deg, var(--color-accent), var(--color-record));
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 var(--space-2) color-mix(in srgb, var(--color-accent) 14%, transparent);
  animation: badge-pop calc(3 * var(--duration-base)) var(--ease-out) backwards;
}

/* The star inside the badge. */
.deck-done-badge::before {
  content: '';
  width: 50%;
  height: 50%;
  background: var(--color-on-solid);
  clip-path: polygon(
    50% 0,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

@keyframes badge-pop {
  0% {
    opacity: 0;
    scale: 0.3;
    rotate: -30deg;
  }

  60% {
    opacity: 1;
    scale: 1.12;
  }
}

/* Its stars twinkle slowly all the time (sparkles.css positions them round the badge). */
.deck-done-badge .sparkles i {
  animation: twinkle 2.4s ease-in-out var(--d) infinite;
}

[data-deck] > .deck-stage:has(.deck-done)::before,
[data-deck] > .deck-stage:has(.deck-done)::after {
  display: none;
}

[data-deck]:has(.deck-done) .deck-button:not(.undo) {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

/* Minimal controls: wrong and right as thin-outlined pills with an icon and a word, undo and "not sure" as small quiet
   rounds. Each tints with its colour on hover; an answer pops its button and sends stars out of it (burst.js). */
/* Undo | wrong right | not sure: the small ones pushed to the ends, the answers together in the middle. */
.deck-buttons {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
}

.deck-button.undo {
  justify-self: start;
}

.deck-button.skip {
  justify-self: end;
}

.deck-button {
  position: relative; /* holds the stars of an answer (burst.js) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--size-control-lg);
  padding: 0 var(--space-4);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition:
    color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    transform var(--duration-fast) ease;
}

.deck-button:active {
  transform: scale(0.94);
}

.deck-button.small {
  width: var(--size-control-md);
  height: var(--size-control-md);
  padding: 0;
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
  box-shadow: none;
}

.deck-button.small:hover:not(:disabled) {
  color: var(--color-text);
  border-color: var(--color-border-control);
}

.deck-button:disabled {
  opacity: var(--opacity-disabled);
  cursor: default;
}

/* The answers in their bright colours (--color-right, --color-wrong): tinted at rest with the icon in the colour and
   the word in the text colour (bright text on white would be hard to read); filled on hover, with dark text. */
.deck-button.wrong {
  --answer: var(--color-wrong);
}

.deck-button.right {
  --answer: var(--color-right);
}

.deck-button.wrong,
.deck-button.right {
  color: var(--color-text);
  background: color-mix(in srgb, var(--answer) 14%, var(--color-surface));
  border-color: color-mix(in srgb, var(--answer) 45%, var(--color-surface));
}

.deck-button.wrong .icon,
.deck-button.right .icon {
  color: var(--answer);
  transition: color var(--duration-base) var(--ease-out);
}

.deck-button.wrong:hover,
.deck-button.right:hover {
  color: var(--color-on-bright);
  background: var(--answer);
  border-color: var(--answer);
}

.deck-button.wrong:hover .icon,
.deck-button.right:hover .icon {
  color: var(--color-on-bright);
}

/* The narrowest phones: the pills show their icon only; the word stays for screen readers (visually hidden). */
@media (max-width: 23.99rem) {
  .deck-button:not(.small) {
    width: var(--size-control-lg);
    padding: 0;
  }

  .deck-button span {
    position: absolute;
    width: var(--border-width);
    height: var(--border-width);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Roomier from small phones up. */
@media (min-width: 30rem) {
  .deck-buttons {
    gap: var(--space-3);
  }

  .deck-button:not(.small) {
    padding: 0 var(--space-6);
  }
}

/* Undo and "not sure": a small dark label above on hover or keyboard focus (`data-tip`, with the key). */
.deck-button[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  z-index: var(--z-raised);
  padding: var(--space-1) var(--space-2);
  color: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  background: var(--color-text);
  border-radius: var(--radius-sm);
  opacity: 0;
  translate: -50% var(--space-1);
  pointer-events: none;
  transition:
    opacity var(--duration-base) var(--ease-out),
    translate var(--duration-base) var(--ease-out);
}

.deck-button[data-tip]:hover::after,
.deck-button[data-tip]:focus-visible::after {
  opacity: 1;
  translate: -50% 0;
}

/* Under the buttons: the guidelines toggle, centred. */
.deck-toolbar {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

/* Plain underlined text, not a button, so it doesn't compete with the answers. */
.deck-guide-toggle {
  padding: var(--space-1);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--duration-base) var(--ease-out);
}

.deck-guide-toggle:hover,
.deck-guide-toggle[aria-expanded='true'] {
  color: var(--color-accent);
}

/* The guidelines: a plain list, each answer then what does it, with its key. */
.deck-guide {
  margin-top: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  animation: guide-in var(--duration-base) var(--ease-out);
}

@keyframes guide-in {
  from {
    opacity: 0;
    translate: 0 calc(-1 * var(--space-1));
  }
}

.deck-guide p {
  margin: 0 0 var(--space-3);
  font-weight: var(--weight-semibold);
}

.deck-guide ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.deck-guide li {
  display: grid;
  grid-template-columns: calc(2 * var(--size-avatar)) minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: var(--border-width) solid var(--color-border);
}

.deck-guide strong {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-medium);
}

/* The answer's button in small, after its name. */
.guide-icon {
  display: grid;
  place-items: center;
  width: var(--size-control-xs);
  height: var(--size-control-xs);
  color: var(--color-text-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
}

.guide-icon.right {
  color: var(--color-right);
}

.guide-icon.wrong {
  color: var(--color-wrong);
}

.guide-icon.play {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.deck-guide li span {
  color: var(--color-text-muted);
}

.deck-guide kbd {
  padding: var(--space-half) var(--space-2);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-xs);
  background: color-mix(in srgb, var(--color-text) 6%, var(--color-surface));
  border-radius: var(--radius-xs);
}

/* After a "wrong": covers the stage until the reviewer moves on. */
.reason-card {
  align-items: center;
  text-align: center;
  border: var(--border-width-strong) solid var(--color-wrong);
}

.reason-card .card-question {
  color: var(--color-danger);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.reason-card .deck-fix {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.deck-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.deck-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  color: var(--color-text);
  font: inherit;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.deck-chip[aria-pressed='true'] {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.deck-chip.fix {
  border-color: var(--color-accent);
}

.deck-count {
  margin: var(--space-4) 0 0;
  color: var(--color-text-muted);
  text-align: center;
}

.deck-keys {
  margin: var(--space-2) 0 0;
  color: var(--color-text-faint);
  font-size: var(--text-sm);
  text-align: center;
}

/* Phones have no arrow keys. */
@media (pointer: coarse) {
  .deck-keys {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .review-card,
  .review-card.leaving {
    transition: none;
  }
}