/* --- review mode ---------------------------------------------------- */

/* The three switches, under the toolbar; out of reach while the deck is
   being edited. They stay in reach while the cards scroll: stuck under the
   top bar (whose height the app keeps in `--topbar-height`), on the page's
   own ground so the cards pass beneath. The padding that ground needs is
   taken back by the margins, so the bar sits where it did. */
.review-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  position: sticky;
  top: var(--topbar-height, 64px);
  z-index: 15;
  margin: -8px -8px 0;
  padding: 8px;
  background: var(--bg);
}

/* Being edited, the deck needs the room, not switches out of reach. */
.review-bar.off {
  position: static;
  opacity: 0.45;
}

/* Narrow: here rather than with the other narrow-screen rules, which come
   before this section and would lose to its plain `.review-bar`. */
@media (max-width: 760px) {
  /* The review switches in a grid rather than a wrapping row: the mode
     itself across the top, the two that change the cards' look as equal
     halves under it, and its progress lines across the full width. */
  .review-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Halves of a phone are narrow: less padding, so a label stays on one
     line like its neighbour's. */
  .review-bar > button {
    justify-content: center;
    min-width: 0;
    padding-inline: 10px;
    white-space: nowrap;
  }

  .review-bar > .review-main {
    grid-column: 1 / -1;
    order: -1;
  }

  .review-bar > .review-progress-fold,
  .review-bar > .review-repeat-fold {
    grid-column: 1 / -1;
  }

  /* Each a row of its own: shut, it gives back the gap above it. */
  .review-bar > .fold:not(.open) {
    margin-top: -8px;
  }

  .review-repeat {
    width: 100%;
  }
}

button.review-toggle[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--ink);
}

button.review-main[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: none;
  color: var(--surface);
}

.review-progress {
  font-size: 14px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* A covered back: the same pill whatever the card says, laid over the
   back's words, which keep their room unseen — so covering and opening a
   card fade, and change no size (UX-5). */
.row.card-cols .card-side.back {
  position: relative;
}

.side-words {
  transition:
    opacity 180ms ease,
    visibility 180ms;
}

.row.card-cols.concealed .card-side.back > .side-words {
  opacity: 0;
  visibility: hidden;
}

.conceal {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 180ms ease,
    visibility 180ms,
    border-color 120ms ease,
    color 120ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 9em;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: repeating-linear-gradient(
    -45deg,
    var(--chip),
    var(--chip) 6px,
    transparent 6px,
    transparent 12px
  );
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.row.card-cols.concealed .conceal {
  opacity: 1;
  visibility: visible;
}

.row.card-cols.concealed {
  cursor: pointer;
}

.row.card-cols.concealed:hover .conceal {
  border-color: var(--accent);
  color: var(--ink);
}

/* Remembered and not: a bar down the card's edge and a wash of the colour.
   The poster grid's tiles take it on their border instead. */
.row.card-cols.recall-remembered {
  background: color-mix(in srgb, var(--ok) 9%, var(--surface));
  box-shadow: inset 4px 0 0 var(--ok);
}

.row.card-cols.recall-forgot {
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
  box-shadow: inset 4px 0 0 var(--danger);
}

[data-variant="poster"][data-layout="grid"] .row.card-cols.recall-remembered {
  border-color: var(--ok);
  box-shadow: 6px 6px 0 var(--ok);
}

[data-variant="poster"][data-layout="grid"] .row.card-cols.recall-forgot {
  border-color: var(--danger);
  box-shadow: 6px 6px 0 var(--danger);
}

/* In a row: shut, it keeps its room — beside the toggles, at the line's
   end — and only fades and folds. */
.review-bar > .fold {
  align-self: center;
}

.review-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* The marks lie over the row's edit buttons, which are hidden outside edit
   mode anyway — and the mode is out of reach during it — but keep their
   room: starting a review changes no row's size (UX-5). */
.cards-panel:not(.deck-editing) .row-actions:has(.review-marks) {
  position: relative;
}

.review-marks {
  position: absolute;
  inset: 0;
  justify-content: flex-end;
  align-items: center;
  display: flex;
  gap: 4px;
  visibility: visible;
}

/* A shared deck's rows have no edit buttons to lie over: the marks keep
   their own room there, and fade in with a review. */
.row-actions.marks-only .review-marks {
  position: static;
  transition:
    opacity 180ms ease,
    visibility 180ms;
}

.row-actions.marks-only.idle .review-marks {
  opacity: 0;
  visibility: hidden;
}

.review-marks button.icon-btn {
  border-color: var(--line);
}

.review-marks button.recall-yes:hover:not(:disabled),
.review-marks button.recall-yes.active {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--surface);
}

.review-marks button.recall-no:hover:not(:disabled),
.review-marks button.recall-no.active {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--surface);
}

@media (prefers-reduced-motion: reduce) {
  .side-words,
  .conceal {
    transition: none;
  }
}