/* ==========================================================================
   11 Plus Blocks: /flash-cards/ only
   --------------------------------------------------------------------------
   Loaded by that one page rather than added to the shared bundle, which is
   served on all 468 blog posts as well. Two components live here: the flip
   card, which exists nowhere else on the site, and the vocabulary reference
   list underneath it.

   Every colour is a token, so the page follows the three-state theme with the
   rest of the site. Nothing here is defined only inside a media query.
   ========================================================================== */

/* --- The deck ------------------------------------------------------------- */
.deck {
  width: min(360px, 100%);
}

/* The progress bar and the shuffle control only mean anything once the
   enhancement is running; without it the six cards are simply all there. */
.deck__bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin-bottom: var(--space-2xs);
}
.js .deck__bar { display: flex; }

.deck__progress {
  margin: 0;
  font-family: var(--font-label);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink-soft);
}
.deck__progress[hidden] { display: none; }

.deck__restart {
  padding: 0.3em 0.7em;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--wash-strong);
  color: var(--course-accent, var(--purple));
  font-family: var(--font-label);
  font-size: var(--step--1);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.deck__restart:hover { background: color-mix(in srgb, var(--course-accent, var(--purple)) 20%, transparent); }

.deck__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-s);
}
.deck__slot { margin: 0; }

/* --- The card -------------------------------------------------------------
   A <details> rather than a <button>, so with no JavaScript a click still
   reveals the meaning and the whole card is readable and indexable. The 3D
   flip is applied only under .js: rotating a face away on a page where the
   card is a plain expanding block would hide the answer for good. */
.fcard {
  position: relative;
}

.fcard__face {
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-tile);
  box-shadow: var(--shadow-md);
}

.fcard__front {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  min-height: 11rem;
  text-align: center;
  cursor: pointer;
  list-style: none;
}
.fcard__front::-webkit-details-marker { display: none; }
.fcard__front::marker { content: ""; }

.fcard__word {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--course-accent, var(--deep));
}
.fcard__word--small {
  font-size: var(--step-2);
  margin: 0;
}

.fcard__ask {
  font-family: var(--font-label);
  font-size: var(--step-0);
  color: var(--ink-soft);
}

.fcard__flip {
  margin-top: 0.2em;
  padding: 0.3em 0.9em;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--course-accent, var(--purple)) 16%, transparent);
  color: var(--course-accent, var(--purple));
  font-family: var(--font-label);
  font-size: var(--step--1);
  font-weight: 700;
}

/* A word that has already come round once. The app shows the same thing, so a
   child knows this is the second attempt rather than a new word. */
.fcard__flag {
  position: absolute;
  top: var(--space-s);
  left: var(--space-s);
  padding: 0.2em 0.6em;
  border-radius: var(--radius-pill);
  background: var(--wash-strong);
  color: var(--ink-soft);
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 700;
}
.fcard__flag[hidden] { display: none; }

.fcard__back { text-align: left; }
.fcard__pos {
  margin: 0.15em 0 0.5em;
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
}
.fcard__meaning {
  margin: 0 0 var(--space-2xs);
  font-size: var(--step-0);
  color: var(--ink);
}
.fcard__sentence {
  margin: 0 0 var(--space-s);
  font-size: var(--step--1);
  font-style: italic;
  color: var(--ink-soft);
}
.fcard__related {
  margin: 0 0 0.35em;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.fcard__related span {
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--course-accent, var(--purple));
  margin-right: 0.4em;
}

/* --- The flip, enhancement only ------------------------------------------- */
/* A fixed height, because both faces are stacked in the same box and the card
   cannot resize as it turns. Measured against the longest card in the deck at
   each width: the meaning wraps more on a phone, so the card is taller there,
   not shorter. */
.js .fcard {
  height: 20rem;
  transform-style: preserve-3d;
  transition: transform 520ms var(--ease-out);
}
@media (max-width: 460px) {
  .js .fcard { height: 22rem; }
}
.js .fcard[open] { transform: rotateY(180deg); }

.js .fcard__face {
  position: absolute;
  inset: 0;
  overflow: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Chromium 131 and Safari 18.4 put a ::details-content box between <details>
   and its content. That box flattens the 3D context, so the back face was
   rendering as an invisible mirror: the card flipped to nothing. Restoring
   preserve-3d on it fixes that, and it has to be positioned as well, because
   preserve-3d makes it the containing block for the absolutely positioned
   faces inside it. Browsers without the pseudo never had the problem and skip
   the block entirely. */
@supports selector(::details-content) {
  .js .fcard::details-content {
    position: absolute;
    inset: 0;
    overflow: visible;
    transform-style: preserve-3d;
  }

  /*
   * And it must not swallow the click that opens the card.
   *
   * That box is inset: 0 over the whole card and paints after the summary, so
   * while the card was CLOSED every tap on the front, including the Flip pill,
   * hit ::details-content instead of the summary. Clicking a <details> rather
   * than its <summary> does nothing, so the card simply refused to flip.
   *
   * The rule below it already stops the hidden BACK FACE being clickable, but
   * that targets .fcard__back, a real element inside this pseudo. The pseudo's
   * own box was still hit-testing.
   *
   * Only while closed: once the card is open the back needs to scroll, which
   * needs pointer events.
   */
  .js .fcard:not([open])::details-content { pointer-events: none; }
}
.js .fcard__front { min-height: 0; }
.js .fcard__back { transform: rotateY(180deg); }

/* Belt and braces: a hidden backface should not be clickable, and some
   browsers still hit-test it. */
.js .fcard[open] .fcard__front,
.js .fcard:not([open]) .fcard__back { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .js .fcard { transition: none; }
}

/* --- Knew it / not yet ---------------------------------------------------- */
.deck__verdict {
  display: flex;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}
.deck__verdict[hidden] { display: none; }
.deck__verdict .btn { flex: 1; }

.deck__done {
  text-align: center;
  padding: var(--space-m);
}
.deck__done[hidden] { display: none; }
.deck__done-line {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--deep);
  margin-bottom: var(--space-2xs);
}
.deck__done .btn { margin-top: var(--space-s); }

.deck__source {
  margin: var(--space-2xs) 0 0;
  text-align: center;
  font-family: var(--font-label);
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* --- The reference list ---------------------------------------------------
   The words are the point of the section, so they are marked up as what they
   are: a definition list. Grouping each pair in a <div> is valid and lets one
   pair be one card. */
.vocab-list {
  display: grid;
  gap: var(--space-2xs);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  margin: 0;
}
.vocab-list__item {
  padding: var(--space-s);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-row);
}
.vocab-list dt {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--course-accent, var(--deep));
}
.vocab-list__letter {
  flex: none;
  width: 1.8em;
  height: 1.8em;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--course-accent, var(--purple)) 14%, transparent);
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 700;
}
.vocab-list dd {
  margin: 0.3em 0 0;
  color: var(--ink-soft);
  font-size: var(--step--1);
}