/*
 * Skilitsa Matcher.
 *
 * Typography follows spec section 9. The site owner is dyslexic and these are
 * requirements, not preferences:
 *   - line-height 1.5 or more
 *   - never justified
 *   - line length capped near 65 characters
 *   - off-white background: maximum contrast reads harsher, not easier
 *   - bold for emphasis, never italics
 */

.skilitsa-matcher {
  --sk-bg: transparent;
  --sk-surface: rgba(0, 0, 0, 0.025);
  --sk-ink: inherit;
  --sk-ink-soft: inherit;
  --sk-line: #e2ddd4;
  --sk-accent: #2f6f4f;
  /* Derived, not set: the owner picks one colour and the tint follows it,
     in light and dark alike. The literal is the fallback for anything
     without color-mix. */
  --sk-accent-soft: #e7f1eb;
  --sk-accent-soft: color-mix(in srgb, var(--sk-accent) 14%, var(--sk-bg));
  --sk-warn: #8a5a1b;
  --sk-warn-soft: #fbf1e2;
  --sk-gold: #b8912f;
  --sk-silver: #8b8f96;
  --sk-bronze: #a36b3f;

  --sk-radius: 14px;
  --sk-space: 1rem;

  /* Overridden by the reading-preferences control. */
  --sk-font-size: 1.05rem;
  --sk-line-height: 1.6;
  --sk-letter-spacing: 0.01em;

  max-width: 64rem;
  margin: 2rem auto;
  padding: var(--sk-space);
  /* The theme's page, not ours. Painting our own background is what made the
     quiz a brown slab inside a dark site and a narrow card inside a wide one.
     Only the accent, the lines and the medals are ours now. */
  background: transparent;
  color: inherit;
  font-size: var(--sk-font-size);
  line-height: var(--sk-line-height);
  letter-spacing: var(--sk-letter-spacing);
  text-align: start;
  /* The theme's typeface, not ours. Only size and rhythm are set here, which
     are the parts spec section 9 actually requires. */
  font-family: inherit;
}

.skilitsa-matcher * {
  box-sizing: border-box;
}

/* Emphasis is bold, never italic: italics are harder to read for many
   dyslexic readers, and the meaning survives the swap. */
.skilitsa-matcher em,
.skilitsa-matcher i {
  font-style: normal;
  font-weight: 700;
}

.skilitsa-matcher p {
  max-width: 62ch;
  margin: 0 0 0.9em;
}

/* ---------------------------------------------------------------- progress */

.sk-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.sk-progress__track {
  flex: 1;
  height: 10px;
  background: var(--sk-line);
  border-radius: 999px;
  overflow: hidden;
}

.sk-progress__fill {
  height: 100%;
  background: var(--sk-accent);
  border-radius: 999px;
  transition: width 220ms ease;
}

.sk-progress__text {
  font-variant-numeric: tabular-nums;
  color: var(--sk-ink-soft);
  white-space: nowrap;
}

/* --------------------------------------------------------------- questions */

.sk-question {
  background: var(--sk-surface);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius);
  padding: 1.25rem;
}

.sk-question__fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

.sk-question__legend {
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.4;
  padding: 0;
  margin-bottom: 0.5rem;
}

.sk-question__helper {
  color: var(--sk-ink-soft);
  margin-bottom: 1rem;
}

/* One idea per block: the scale is chunked, not a wall. */
.sk-scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin: 1rem 0 0.5rem;
}

.sk-scale__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.75rem 0.4rem;
  border: 2px solid var(--sk-line);
  border-radius: 10px;
  background: var(--sk-surface);
  cursor: pointer;
  text-align: center;
  min-height: 3.5rem;
}

.sk-scale__option:hover {
  border-color: var(--sk-accent);
}

/* Focus is visible and thick: a keyboard user must never lose their place. */
.sk-scale__option:focus-within,
.skilitsa-matcher button:focus-visible,
.skilitsa-matcher a:focus-visible {
  outline: 3px solid var(--sk-accent);
  outline-offset: 2px;
}

.sk-scale__option input {
  margin: 0;
  width: 1.15rem;
  height: 1.15rem;
}

.sk-scale__option[data-checked="true"] {
  border-color: var(--sk-accent);
  background: var(--sk-accent-soft);
  font-weight: 700;
}

.sk-scale__number {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.sk-scale__ends {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--sk-ink-soft);
  font-size: 0.95em;
}

.sk-scale__ends span {
  max-width: 45%;
}

.sk-scale__ends span:last-child {
  text-align: end;
}

/* ----------------------------------------------------------------- toggles */

.sk-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sk-line);
}

.sk-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--sk-line);
  border-radius: 999px;
  background: var(--sk-surface);
  color: var(--sk-ink);
  font: inherit;
  cursor: pointer;
}

.sk-toggle[aria-pressed="true"] {
  border-color: var(--sk-accent);
  background: var(--sk-accent-soft);
  font-weight: 700;
}

/* --------------------------------------------------- explanation affordance */

/*
 * Never hover-only. The control is a real button so it works with a pointer,
 * a finger and a keyboard, and its content lives in the DOM so a screen reader
 * can reach it. A `title` attribute would do none of that.
 */
.sk-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-inline-start: 0.35rem;
  border: 2px solid var(--sk-line);
  border-radius: 999px;
  background: var(--sk-surface);
  color: var(--sk-accent);
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}

.sk-info[aria-expanded="true"] {
  background: var(--sk-accent);
  border-color: var(--sk-accent);
  color: #fff;
}

.sk-info-panel {
  margin-top: 0.6rem;
  padding: 0.85rem 1rem;
  background: var(--sk-accent-soft);
  border-inline-start: 4px solid var(--sk-accent);
  border-radius: 8px;
}

.sk-info-panel[hidden] {
  display: none;
}

/* ------------------------------------------------------------------- terms */

.sk-terms {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 1rem;
  background: var(--sk-surface);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius);
  margin-bottom: 1.25rem;
}

.sk-terms input {
  margin-top: 0.25rem;
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

/* ----------------------------------------------------------------- podium */

.sk-podium {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
}

@media (min-width: 40rem) {
  .sk-podium {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }

  /* Gold sits highest, silver and bronze step down: the shape carries the
     ranking even before the numbers are read. */
  .sk-podium .sk-card:nth-child(1) { margin-top: 0; }
  .sk-podium .sk-card:nth-child(2) { margin-top: 1.5rem; }
  .sk-podium .sk-card:nth-child(3) { margin-top: 2.5rem; }
}

.sk-card {
  position: relative;
  background: var(--sk-surface);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius);
  overflow: hidden;
}

.sk-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--sk-line);
}

.sk-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--sk-accent-soft);
  color: var(--sk-accent);
  font-size: 2.5rem;
}

.sk-card__body {
  padding: 1rem;
}

.sk-card__name {
  margin: 0 0 0.5rem;
  font-size: 1.1em;
  line-height: 1.35;
}

.sk-medal {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--sk-ink);
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sk-medal--gold   { background: var(--sk-gold); }
.sk-medal--silver { background: var(--sk-silver); }
.sk-medal--bronze { background: var(--sk-bronze); }

.sk-line {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

/* Icon plus text, never an icon alone: the meaning must survive without it. */
.sk-line__icon {
  flex-shrink: 0;
}

.sk-line--pitfall {
  background: var(--sk-warn-soft);
  border-inline-start: 3px solid var(--sk-warn);
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
}

/* ------------------------------------------------------------------ notes */

.sk-note {
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: var(--sk-accent-soft);
  border-inline-start: 4px solid var(--sk-accent);
  margin: 1rem 0;
}

.sk-disclaimer {
  padding: 1.1rem 1.25rem;
  border: 2px solid var(--sk-warn);
  background: var(--sk-warn-soft);
  border-radius: var(--sk-radius);
  margin: 1.5rem 0;
}

.sk-disclaimer h3 {
  margin: 0 0 0.5rem;
}

/* --------------------------------------------------------------- controls */

.sk-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.sk-button {
  padding: 0.7rem 1.4rem;
  border: 2px solid var(--sk-accent);
  border-radius: 999px;
  background: var(--sk-accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.sk-button--secondary {
  background: transparent;
  color: var(--sk-accent);
}

.sk-button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------------------------------------------- reading preferences control */

.sk-reading {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 1rem;
  color: var(--sk-ink-soft);
  font-size: 0.95em;
}

.sk-reading button {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--sk-line);
  border-radius: 999px;
  background: var(--sk-surface);
  font: inherit;
  cursor: pointer;
}

.sk-reading button[aria-pressed="true"] {
  border-color: var(--sk-accent);
  background: var(--sk-accent-soft);
  font-weight: 700;
}

/* ------------------------------------------------------------- a11y basics */

.sk-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .skilitsa-matcher *,
  .skilitsa-matcher *::before,
  .skilitsa-matcher *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* The reason a disabled Next is disabled, next to the button itself. */
.sk-controls__blocked {
  margin: 6px 0 0;
  font-size: 0.95em;
  color: var(--sk-accent);
}


/* ------------------------------------------------------------------ dark */

/*
 * The quiz paints its own surface, so it must follow the page it sits on or it
 * becomes a white slab in a dark article. Two triggers are honoured: the
 * reader's OS preference, and the class or attribute a theme sets when the
 * reader flips a switch on the page itself.
 *
 * Only the tokens change. Every rule below the palette keeps working.
 */
@media (prefers-color-scheme: dark) {
  .skilitsa-matcher {
    --sk-bg: transparent;
    --sk-surface: rgba(255, 255, 255, 0.04);
    --sk-ink: inherit;
    --sk-ink-soft: inherit;
    --sk-line: #3b352d;
    --sk-accent: #7cc39a;
    --sk-accent-soft: #23342b;
    --sk-warn: #e0b070;
    --sk-warn-soft: #33281a;
    --sk-gold: #d9b143;
    --sk-silver: #b6bac1;
    --sk-bronze: #c58a57;
  }
}

/* The Fox theme, which skilitsa.com runs, puts `darkmode` on <body>. Verified
   against the live site rather than guessed. */
body.darkmode .skilitsa-matcher,
[data-theme="dark"] .skilitsa-matcher,
[data-color-scheme="dark"] .skilitsa-matcher,
.dark .skilitsa-matcher,
.dark-mode .skilitsa-matcher,
.is-dark .skilitsa-matcher,
body.dark-theme .skilitsa-matcher {
  --sk-bg: transparent;
  --sk-surface: rgba(255, 255, 255, 0.04);
  --sk-ink: inherit;
  --sk-ink-soft: inherit;
  --sk-line: #3b352d;
  --sk-accent: #7cc39a;
  --sk-accent-soft: #23342b;
  --sk-warn: #e0b070;
  --sk-warn-soft: #33281a;
  --sk-gold: #d9b143;
  --sk-silver: #b6bac1;
  --sk-bronze: #c58a57;
}

/* ----------------------------------------------------------------- emoji */

/*
 * The scale ends carry an emoji each. At body-text size they read as
 * punctuation; at this size they read as the small illustration they are,
 * which is what they were put there to be.
 */
.skilitsa-matcher .sk-emoji {
  font-size: 1.7em;
  line-height: 1;
  vertical-align: -0.25em;
  margin: 0 0.1em;
}

/* --------------------------------------------------------- the terms gate */

/*
 * Nothing past question one happens until this is ticked, so it is styled as
 * the gate it is. Gold against the green accent: the one element on the page
 * that is deliberately not in the palette, because it is the one element that
 * must not be skimmed past.
 */
.skilitsa-matcher .sk-terms {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 var(--sk-space);
  padding: 14px 16px;
  border: 2px solid var(--sk-gold);
  border-radius: var(--sk-radius);
  background: var(--sk-surface);
  box-shadow: inset 6px 0 0 var(--sk-gold);
}

.skilitsa-matcher .sk-terms__badge {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--sk-gold);
  color: #1b1608;
  font-size: 0.78em;
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.skilitsa-matcher .sk-terms__body {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.skilitsa-matcher .sk-terms label {
  font-weight: 700;
}

.skilitsa-matcher .sk-terms input[type="checkbox"] {
  width: 1.5em;
  height: 1.5em;
  margin-top: 0.15em;
  accent-color: var(--sk-gold);
  flex: none;
}

/* Once it is done it stops shouting; it has said what it needed to say. */
.skilitsa-matcher .sk-terms--done {
  border-color: var(--sk-line);
  box-shadow: inset 6px 0 0 var(--sk-accent);
}

.skilitsa-matcher .sk-terms--done .sk-terms__badge {
  background: var(--sk-accent);
  color: var(--sk-surface);
}

/* --------------------------------------------------------- the 6-7 button */

.skilitsa-matcher .sk-toggle--ignore {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.skilitsa-matcher .sk-toggle__glyph {
  font-size: 1.15em;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.skilitsa-matcher .sk-toggle__words {
  font-size: 0.95em;
}


/* ================================================================ podium */

/*
 * Olympic steps: silver left, gold centre and highest, bronze right.
 *
 * The DOM order stays 1, 2, 3 so a screen reader reads the winner first;
 * `order` moves gold to the middle for sighted readers only. The visual and
 * reading orders are allowed to disagree, and this is the case where they
 * should.
 */
.skilitsa-matcher .sk-podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 12px;
  margin: var(--sk-space) 0 calc(var(--sk-space) * 1.5);
}

.skilitsa-matcher .sk-card--gold   { order: 2; }
.skilitsa-matcher .sk-card--silver { order: 1; }
.skilitsa-matcher .sk-card--bronze { order: 3; }

.skilitsa-matcher .sk-card--podium {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0;
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius);
  background: var(--sk-surface);
  overflow: hidden;
}

.skilitsa-matcher .sk-card--gold {
  border-color: var(--sk-gold);
  box-shadow: 0 0 0 2px var(--sk-gold);
}

.skilitsa-matcher .sk-card--podium .sk-card__image,
.skilitsa-matcher .sk-card--podium .sk-card__placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.skilitsa-matcher .sk-card--podium .sk-card__placeholder {
  display: grid;
  place-items: center;
  font-size: 2.5rem;
  background: var(--sk-accent-soft);
}

/* ---------------------------------------------------------------- medals */

.skilitsa-matcher .sk-medal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: -18px auto 0;
  padding: 5px 12px;
  position: relative;
  border-radius: 999px;
  border: 2px solid var(--sk-line);
  background: var(--sk-surface);
  font-weight: 800;
  width: fit-content;
}

.skilitsa-matcher .sk-medal__glyph {
  font-size: 1.5em;
  line-height: 1;
}

.skilitsa-matcher .sk-medal--gold   { border-color: var(--sk-gold); }
.skilitsa-matcher .sk-medal--silver { border-color: var(--sk-silver); }
.skilitsa-matcher .sk-medal--bronze { border-color: var(--sk-bronze); }

.skilitsa-matcher .sk-card--podium .sk-card__body {
  padding: 8px 12px 12px;
  text-align: center;
}

.skilitsa-matcher .sk-card__name {
  margin: 4px 0 8px;
  font-size: 1.05em;
  line-height: 1.35;
}

/* ----------------------------------------------------------------- steps */

.skilitsa-matcher .sk-step {
  display: grid;
  place-items: center;
  margin-top: auto;
  font-weight: 800;
  color: var(--sk-surface);
}

.skilitsa-matcher .sk-card--gold   .sk-step { height: 68px; background: var(--sk-gold); }
.skilitsa-matcher .sk-card--silver .sk-step { height: 46px; background: var(--sk-silver); }
.skilitsa-matcher .sk-card--bronze .sk-step { height: 32px; background: var(--sk-bronze); }

.skilitsa-matcher .sk-step__rank {
  font-size: 1.4em;
}

/* ------------------------------------------------------------ explanation */

.skilitsa-matcher .sk-explain {
  margin-top: 6px;
  text-align: start;
}

.skilitsa-matcher .sk-explain__summary {
  cursor: pointer;
  padding: 4px 0;
  font-weight: 700;
  color: var(--sk-accent);
}

.skilitsa-matcher .sk-explain__summary:focus-visible {
  outline: 3px solid var(--sk-accent);
  outline-offset: 2px;
}

.skilitsa-matcher .sk-card__lines {
  padding-top: 4px;
}

/* ----------------------------------------------------------- runners-up */

/* One horizontal line rather than seven more cards: these are a glance, not a
   decision. It scrolls sideways instead of wrapping into a second wall. */
.skilitsa-matcher .sk-runners {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 158px;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
}

.skilitsa-matcher .sk-card--row {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius);
  background: var(--sk-surface);
  text-align: center;
}

.skilitsa-matcher .sk-card--row .sk-card__image,
.skilitsa-matcher .sk-card--row .sk-card__placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: calc(var(--sk-radius) - 6px);
}

.skilitsa-matcher .sk-card--row .sk-card__placeholder {
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  background: var(--sk-accent-soft);
}

.skilitsa-matcher .sk-card--row .sk-medal {
  margin: -14px auto 0;
  padding: 2px 10px;
  font-size: 0.9em;
}

.skilitsa-matcher .sk-card--row .sk-card__name {
  font-size: 0.95em;
  margin: 6px 0 0;
}

.skilitsa-matcher .sk-card--row .sk-explain__summary {
  font-size: 0.9em;
}

/* Narrow screens: the steps stop being a metaphor and become a list. */
@media (max-width: 640px) {
  .skilitsa-matcher .sk-podium {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .skilitsa-matcher .sk-card--gold,
  .skilitsa-matcher .sk-card--silver,
  .skilitsa-matcher .sk-card--bronze {
    order: 0;
  }

  .skilitsa-matcher .sk-card--podium .sk-step {
    height: 26px;
  }
}

/* ============================================== podium, second pass */

/*
 * Real metal rather than three flat fills.
 *
 * A medal reads as metal because of the band of light across it, not its hue:
 * the same light-dark-light diagonal runs across all three, so gold, silver
 * and bronze look like one object in three materials rather than three
 * different stickers.
 */
.skilitsa-matcher {
  --sk-gold-metal: linear-gradient(135deg, #fdf3cd 0%, #e3c25c 22%, #b8912f 48%, #f4e5a6 62%, #8f6d1c 88%, #d8b856 100%);
  --sk-silver-metal: linear-gradient(135deg, #ffffff 0%, #d7dade 22%, #9aa0a8 48%, #f2f4f6 62%, #767c85 88%, #c3c8cf 100%);
  --sk-bronze-metal: linear-gradient(135deg, #f4d6b8 0%, #cd9161 22%, #a36b3f 48%, #edc9a3 62%, #7d4e2a 88%, #bd855a 100%);
}

.skilitsa-matcher .sk-medal--gold,
.skilitsa-matcher .sk-medal--silver,
.skilitsa-matcher .sk-medal--bronze {
  color: #241d08;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.skilitsa-matcher .sk-medal--gold   { background: var(--sk-gold-metal); }
.skilitsa-matcher .sk-medal--silver { background: var(--sk-silver-metal); }
.skilitsa-matcher .sk-medal--bronze { background: var(--sk-bronze-metal); }

.skilitsa-matcher .sk-card--gold   .sk-step { background: var(--sk-gold-metal); color: #241d08; }
.skilitsa-matcher .sk-card--silver .sk-step { background: var(--sk-silver-metal); color: #1f2226; }
.skilitsa-matcher .sk-card--bronze .sk-step { background: var(--sk-bronze-metal); color: #2a1a0d; }

.skilitsa-matcher .sk-step {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 6px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ------------------------------------------------------- stable geometry */

/*
 * The podium is a shape. Expanding a card inside it moved the other two down
 * the page and the reader lost their place, so the explanation lives in one
 * drawer underneath and the three cards never change size.
 */
.skilitsa-matcher .sk-explain__button {
  display: inline-block;
  margin: 4px 0 0;
  padding: 4px 10px;
  border: 1px solid var(--sk-accent);
  border-radius: 999px;
  background: transparent;
  color: var(--sk-accent);
  font: inherit;
  font-size: 0.92em;
  font-weight: 700;
  cursor: pointer;
}

.skilitsa-matcher .sk-explain__button:hover {
  background: var(--sk-accent-soft);
}

.skilitsa-matcher .sk-explain__button:focus-visible {
  outline: 3px solid var(--sk-accent);
  outline-offset: 2px;
}

.skilitsa-matcher .sk-explain__button[aria-expanded="true"] {
  background: var(--sk-accent);
  color: var(--sk-surface);
}

.skilitsa-matcher .sk-drawer {
  margin: 0 0 var(--sk-space);
  padding: 12px 14px;
  border: 1px solid var(--sk-line);
  border-inline-start: 4px solid var(--sk-accent);
  border-radius: var(--sk-radius);
  background: var(--sk-surface);
}

.skilitsa-matcher .sk-drawer[hidden] {
  display: none;
}

.skilitsa-matcher .sk-drawer__title {
  margin: 0 0 6px;
  font-size: 1.05em;
}

/* The whole photo is a link now, so it must not sit on a text baseline. */
.skilitsa-matcher .sk-card__media {
  display: block;
  line-height: 0;
}

.skilitsa-matcher .sk-card__media:focus-visible {
  outline: 3px solid var(--sk-accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------- runners carousel */

/* It scrolls itself, so it must not also snap: the two fight each other. */
.skilitsa-matcher .sk-runners {
  scroll-snap-type: none;
  scrollbar-width: thin;
}

.skilitsa-matcher .sk-card--row {
  scroll-snap-align: none;
}

/* ============================================= carousel, and gold sheen */

.skilitsa-matcher .sk-carousel {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--sk-space);
}

/*
 * No scrollbar. The arrows say the same thing and say it better; a scrollbar
 * under a row of cards reads as something that leaked out of the browser.
 */
.skilitsa-matcher .sk-carousel .sk-runners {
  margin: 0;
  padding-bottom: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.skilitsa-matcher .sk-carousel .sk-runners::-webkit-scrollbar {
  display: none;
}

.skilitsa-matcher .sk-carousel__arrow {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--sk-line);
  border-radius: 50%;
  background: var(--sk-surface);
  color: var(--sk-ink);
  font: inherit;
  font-size: 1.4em;
  line-height: 1;
  cursor: pointer;
}

.skilitsa-matcher .sk-carousel__arrow:hover {
  border-color: var(--sk-accent);
  background: var(--sk-accent-soft);
}

.skilitsa-matcher .sk-carousel__arrow:focus-visible {
  outline: 3px solid var(--sk-accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ rank tags */

.skilitsa-matcher .sk-card--row {
  position: relative;
}

/* Without a number, seven cards read as an unordered pile rather than places
   four through ten. */
.skilitsa-matcher .sk-rank {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  z-index: 1;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--sk-ink);
  color: var(--sk-bg);
  font-size: 0.78em;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* -------------------------------------------------------- the gold sheen */

/*
 * A single band of light travelling across the gold, and nothing else.
 *
 * Only gold: if all three shone, the shine would stop meaning first place. It
 * is slow and it pauses between passes, because a highlight that never rests
 * stops reading as metal and starts reading as a loading spinner.
 */
@media (prefers-reduced-motion: no-preference) {
  .skilitsa-matcher .sk-medal--gold,
  .skilitsa-matcher .sk-card--gold .sk-step {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .skilitsa-matcher .sk-medal--gold::after,
  .skilitsa-matcher .sk-card--gold .sk-step::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      105deg,
      rgba(255, 255, 255, 0) 42%,
      rgba(255, 255, 255, 0.85) 50%,
      rgba(255, 255, 255, 0) 58%
    );
    transform: translateX(-120%);
    animation: sk-sheen 5.5s ease-in-out infinite;
  }

  .skilitsa-matcher .sk-card--gold .sk-step::after {
    animation-delay: 0.35s;
  }
}

@keyframes sk-sheen {
  0%   { transform: translateX(-120%); }
  /* The pass itself takes about a fifth of the cycle; the rest is rest. */
  22%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}


/* ============================================== round three of review */

/*
 * The soft tint has to work over an unknown background now, so it mixes with
 * the reader's own text colour rather than with a paper colour we no longer
 * control.
 */
.skilitsa-matcher {
  --sk-accent-soft: color-mix(in srgb, var(--sk-accent) 16%, transparent);
  --sk-line: color-mix(in srgb, currentColor 22%, transparent);
}

/* ------------------------------------------------------- info buttons */

/*
 * These were pills wide enough to read as another answer. They are questions
 * about the question, so they get the shape everything else on the web uses
 * for that and no more room than the glyph needs.
 */
.skilitsa-matcher .sk-info {
  width: 1.6em;
  height: 1.6em;
  min-width: 0;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--sk-accent);
  border-radius: 50%;
  background: transparent;
  color: var(--sk-accent);
  font: inherit;
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}

.skilitsa-matcher .sk-info:hover,
.skilitsa-matcher .sk-info[aria-expanded="true"] {
  background: var(--sk-accent);
  color: var(--sk-bg, #fff);
}

/* ---------------------------------------------- the ends of the scale */

/*
 * 1 and 5 show what they mean instead of how far along they are. The number is
 * still there for anyone using a screen reader - it is on the radio's label.
 */
.skilitsa-matcher .sk-scale__face {
  font-size: 1.9em;
  line-height: 1;
}

.skilitsa-matcher .sk-scale__option--face {
  padding-block: 2px;
}

/* --------------------------------------------------------- the images */

/*
 * The theme rounds every image to a pill. On a 4:3 photo that is a lozenge,
 * which is not what a breed looks like.
 */
.skilitsa-matcher .sk-card__image,
.skilitsa-matcher .sk-card__placeholder {
  border-radius: 0;
}

.skilitsa-matcher .sk-card--row .sk-card__image,
.skilitsa-matcher .sk-card--row .sk-card__placeholder {
  border-radius: calc(var(--sk-radius) - 6px);
}

/* ---------------------------------------------------- medals, centred */

/*
 * `margin: auto` cannot centre a child of a flex column whose cross axis is
 * stretched, which is why all three sat slightly left. align-self does it on
 * the axis that actually applies.
 */
.skilitsa-matcher .sk-medal {
  align-self: center;
  margin-inline: 0;
}

/* ------------------------------------------------------------ restart */

.skilitsa-matcher .sk-again__row {
  margin: var(--sk-space) 0;
  text-align: center;
}

.skilitsa-matcher .sk-again {
  min-width: 14rem;
}


/* ============================================== round four of review */

/*
 * Warning colours that survive an unknown background.
 *
 * These were fixed browns chosen against a cream page. The quiz now sits on
 * the theme's own background, which may be near-black, and a fixed brown on
 * near-black is unreadable. Mixing with the reader's current text colour keeps
 * the warning warm in both themes without knowing either.
 */
.skilitsa-matcher {
  --sk-warn: color-mix(in srgb, #d08a2c 72%, currentColor);
  --sk-warn-soft: color-mix(in srgb, #d08a2c 14%, transparent);
}

.skilitsa-matcher .sk-note,
.skilitsa-matcher .sk-disclaimer {
  background: var(--sk-warn-soft);
  border-inline-start: 4px solid var(--sk-warn);
  color: inherit;
}

/* -------------------------------------------------------- the emoji ends */

/*
 * Triple the body size, and the only thing in the box.
 *
 * At 1.9em they still read as decoration next to a digit. These two ARE the
 * question - what 1 and 5 mean - so they get the room.
 */
.skilitsa-matcher .sk-scale__face {
  font-size: 3.1em;
  line-height: 1;
}

.skilitsa-matcher .sk-scale__option--face {
  padding-block: 0;
}

/* The words under the ends keep their meaning; the emoji is not repeated. */
.skilitsa-matcher .sk-scale__ends {
  gap: 12px;
}

/* -------------------------------------------------------- the info glyph */

/*
 * A drawn "i" in a bordered pill never sat on its own baseline and never
 * looked deliberate. An emoji is already a circle, already centred, and needs
 * no border to be recognised.
 */
.skilitsa-matcher .sk-info {
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0 0 0 6px;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 1.15em;
  line-height: 1;
  filter: grayscale(0.15);
  opacity: 0.85;
}

.skilitsa-matcher .sk-info:hover,
.skilitsa-matcher .sk-info[aria-expanded="true"] {
  background: none;
  opacity: 1;
  filter: none;
  transform: scale(1.12);
}

.skilitsa-matcher .sk-info:focus-visible {
  outline: 3px solid var(--sk-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------- the pressed Εξήγηση */

/*
 * The pressed state used var(--sk-surface) for its text, and surface is now a
 * near-transparent wash rather than white - so the label vanished into its own
 * background. Keeping the accent as text on a tinted fill needs no knowledge
 * of the page behind it.
 */
.skilitsa-matcher .sk-explain__button[aria-expanded="true"] {
  background: var(--sk-accent-soft);
  color: var(--sk-accent);
  border-color: var(--sk-accent);
  font-weight: 800;
}

/* ----------------------------------------------------------- the drawer */

/*
 * Paragraphs are capped near 62ch for readability, which left the drawer
 * looking half-empty on a wide screen - as though something had failed to
 * load. Capping the drawer itself instead keeps the measure and loses the gap.
 */
.skilitsa-matcher .sk-drawer {
  max-width: 68ch;
}

/* ------------------------------------------------------- the terms nudge */

/*
 * Movement, then stillness. Two small swings say "here" in a way that a
 * sentence under a dead button does not, and it is over in a third of a
 * second so it never becomes something to sit through.
 */
@media (prefers-reduced-motion: no-preference) {
  .skilitsa-matcher .sk-terms--nudge {
    animation: sk-nudge 0.42s ease-in-out;
  }
}

/* With motion turned off the same moment still has to register, so the box
   answers in colour instead. */
@media (prefers-reduced-motion: reduce) {
  .skilitsa-matcher .sk-terms--nudge {
    outline: 3px solid var(--sk-gold);
    outline-offset: 3px;
  }
}

@keyframes sk-nudge {
  0%, 100% { transform: none; }
  20%      { transform: translateX(-6px) scale(1.02); }
  55%      { transform: translateX(6px) scale(1.02); }
  80%      { transform: translateX(-2px) scale(1.01); }
}

/* Next stays clickable while the terms are unaccepted so that pressing it can
   explain itself, but it must not look ready. */
.skilitsa-matcher .sk-button--blocked {
  opacity: 0.55;
}

/*
 * Emoji need the emoji font named explicitly.
 *
 * With only the theme's stack, Windows renders several of these from a text
 * font instead: the information glyph came out as a bare serif "i", which
 * reads as a stray letter rather than a button.
 */
.skilitsa-matcher .sk-info,
.skilitsa-matcher .sk-emoji,
.skilitsa-matcher .sk-scale__face,
.skilitsa-matcher .sk-medal__glyph {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
    "Segoe UI Symbol", sans-serif;
  font-variant-emoji: emoji;
}


/* ============================================== the scale, round five */

/*
 * Square boxes, nothing clipped, nothing tinted.
 *
 * Three faults, all mine:
 *  - a round option box cut the corners off any emoji that fills its square,
 *    which is most of them: the zzZ, the skyscrapers, the couch
 *  - grayscale + opacity was applied to make a glyph sit quietly. In a dark
 *    theme that read as intentional; in a light one it just looked broken
 *  - the radio dot beside a 3em picture is a second control for the same
 *    answer, and the picture is the one being pressed
 */
.skilitsa-matcher .sk-scale {
  gap: 10px;
}

.skilitsa-matcher .sk-scale__option {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 6px;
  border-radius: 10px;
  overflow: visible;
}

.skilitsa-matcher .sk-scale__option--face {
  padding: 4px;
}

/* The radio still exists for the keyboard and for screen readers; it just has
   nothing to draw. */
.skilitsa-matcher .sk-scale__option input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skilitsa-matcher .sk-scale__option:focus-within {
  outline: 3px solid var(--sk-accent);
  outline-offset: 2px;
}

.skilitsa-matcher .sk-scale__face {
  font-size: 2.9em;
  line-height: 1;
  filter: none;
  opacity: 1;
  overflow: visible;
}

.skilitsa-matcher .sk-scale__number {
  font-size: 1.25em;
  font-weight: 700;
}

/*
 * "Small dog" and "big dog" are the same glyph at the same size otherwise, so
 * the question answers itself wrongly. Size carries the meaning here.
 */
.skilitsa-matcher .sk-scale[data-question="Q07"] .sk-scale__option:first-child .sk-scale__face {
  font-size: 1.5em;
}

/* --------------------------------------------------- the info lightbulb */

/* No tint, no scaling filter: it looked deliberate in dark and broken in light. */
.skilitsa-matcher .sk-info {
  filter: none;
  opacity: 1;
  text-shadow: none;
}

.skilitsa-matcher .sk-info:hover,
.skilitsa-matcher .sk-info[aria-expanded="true"] {
  filter: none;
  opacity: 1;
  transform: scale(1.15);
}

/* Nothing that draws a glyph may clip or shadow it. */
.skilitsa-matcher .sk-emoji,
.skilitsa-matcher .sk-scale__face,
.skilitsa-matcher .sk-info,
.skilitsa-matcher .sk-medal__glyph {
  text-shadow: none;
  border-radius: 0;
  overflow: visible;
}


/* ===================================== WordPress emoji, un-rounded */

/*
 * WordPress swaps every emoji character for an <img class="emoji"> served from
 * s.w.org, and the theme rounds every image on the site to a 50px radius. On a
 * 30px square that is a circle, which is why the zzZ and the skyscrapers came
 * out with their corners sliced off.
 *
 * The theme marks its image rules !important, so this has to answer in kind.
 */
.skilitsa-matcher img.emoji,
.skilitsa-matcher img.wp-smiley {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 1em !important;
  height: 1em !important;
  max-width: none !important;
  object-fit: contain !important;
  vertical-align: -0.15em !important;
  display: inline-block !important;
}

/* The scale ends are the one place the picture is the content, so it fills the
   box rather than sitting on a text baseline. */
.skilitsa-matcher .sk-scale__face img.emoji {
  width: 1em !important;
  height: 1em !important;
  vertical-align: middle !important;
}


/* ===================================== drawer and disclaimer alignment */

/*
 * The drawer sits under the card that opened it.
 *
 * It is capped at 68ch so the text keeps its measure, which on a wide screen
 * left it hard against the left edge no matter which card was asked. Aligning
 * it to the card makes the connection obvious without a pointer or an arrow.
 */
.skilitsa-matcher .sk-drawer[data-align="gold"]   { margin-inline: auto; }
.skilitsa-matcher .sk-drawer[data-align="silver"] { margin-inline-end: auto; }
.skilitsa-matcher .sk-drawer[data-align="bronze"] { margin-inline-start: auto; }

/*
 * The disclaimer had a wide right margin inside its own border: the card
 * stretched to the full width while the paragraph inside stopped at 62ch, so
 * the box looked half-used. Capping the box keeps the reading measure and
 * loses the gap.
 */
.skilitsa-matcher .sk-disclaimer {
  max-width: 68ch;
  margin-inline: auto;
  padding: 16px 20px;
}

.skilitsa-matcher .sk-disclaimer p,
.skilitsa-matcher .sk-drawer p {
  max-width: none;
}


/* The information symbol is a picture now, so it needs a picture's size: at
   1.15em it came out under 15px, which is smaller than the text it explains. */
.skilitsa-matcher .sk-info {
  font-size: 1.6em;
  padding-inline-start: 8px;
  vertical-align: -0.1em;
}

.skilitsa-matcher .sk-info img.emoji {
  width: 1em !important;
  height: 1em !important;
  vertical-align: middle !important;
}