/* Perfectly Mixed Pairs — page-specific layout. Shared tokens and classes come from site.css. */

/* `hidden` must win over display rules on .btn, .ledger, .mp-src etc. inside these stages */
.mp-try [hidden], .mp-small [hidden] { display: none !important; }

/* ---------- Lanes: a labelled pile/row reading TOP at the left ---------- */
.mp-lanes { display: grid; gap: var(--s2); margin-top: var(--s2); }
.mp-lane[hidden] { display: none; }
.mp-lane-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.mp-lane-head .pile-label { color: var(--paper); text-align: left; }
.mp-count { font-size: 0.85rem; color: var(--secondary-on-stage); font-variant-numeric: tabular-nums; }
.mp-src { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; border: 1.5px solid rgba(244,239,228,0.45); color: var(--paper); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; }
.mp-lane-foot { margin-top: 2px; }
.mp-lane.is-pickable .mp-deck-row { cursor: pointer; }
.mp-lane.is-pickable .mp-lane-head .mp-src { border-color: var(--active); color: var(--active); }

/* A row of cards that never wraps; overlaps on narrower screens. Reserves room for A/B tags above. */
.mp-deck-row > .card { z-index: var(--z, auto); }
.mp-deck-row { display: flex; flex-wrap: nowrap; gap: 6px; align-items: flex-end; padding-top: 18px; min-height: calc(var(--card-w) * var(--card-ratio) + 18px); }
.mp-empty { width: var(--card-w); height: calc(var(--card-w) * var(--card-ratio)); border: 1.5px dashed rgba(244,239,228,0.22); border-radius: calc(var(--card-w) * 0.09); display: grid; place-items: center; color: var(--structure); font-size: 0.75rem; text-align: center; line-height: 1.2; padding: 4px; }

.mp-try { --card-w: 56px; }
@media (max-width: 1100px) {
  .mp-try { --card-w: 50px; }
  .mp-try .mp-deck-row { gap: 0; }
  .mp-try .mp-deck-row > .card + .card { margin-left: calc(var(--card-w) * -0.6); }
}
@media (max-width: 560px) { .mp-try { --card-w: 46px; } }

/* Stepper (cut size) */
.mp-stepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid rgba(244,239,228,0.28); border-radius: 8px; }
.mp-stepper button { min-width: 44px; min-height: 44px; background: none; border: 0; color: var(--paper); font: 600 1.2rem var(--font-ui); cursor: pointer; border-radius: 8px; }
.mp-stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.mp-stepper output { min-width: 2.2ch; text-align: center; font: 600 1.1rem var(--font-ui); font-variant-numeric: tabular-nums; }
.mp-step-label { font-size: 0.85rem; color: var(--secondary-on-stage); }
.mp-controls { margin-top: var(--s3); }
.mp-controls[hidden] { display: none; }
.mp-subcontrols { margin-top: 10px; }
.mp-subcontrols .btn-link { --btn-fg: var(--secondary-on-stage); color: var(--secondary-on-stage); }

/* ---------- Try: pair boxes ---------- */
.mp-pairs { display: grid; grid-template-columns: repeat(4, max-content); gap: var(--s2); margin-top: var(--s1); }
.mp-pairs[hidden] { display: none; }
@media (max-width: 760px) { .mp-pairs { grid-template-columns: repeat(2, max-content); justify-content: start; } }
.mp-pair { border: 1.5px dashed rgba(244,239,228,0.25); border-radius: 12px; padding: 8px 10px 8px; display: grid; gap: 2px; transition: border-color 200ms ease; }
.mp-pair-label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--secondary-on-stage); font-weight: 600; }
.mp-pair .card-row { flex-wrap: nowrap; gap: 6px; padding-top: 18px; min-height: calc(var(--card-w) * var(--card-ratio) + 18px); }
.mp-pair-note { font-size: 0.85rem; min-height: 1.4em; color: var(--secondary-on-stage); }
.mp-pair[data-state="mixed"] { border-style: solid; border-color: var(--invariant); }
.mp-pair[data-state="mixed"] .mp-pair-note { color: var(--invariant); }
.mp-pair[data-state="same"] { border-style: solid; border-color: var(--counter); }
.mp-pair[data-state="same"] .mp-pair-note { color: var(--counter); }
.mp-pairs.is-settled .mp-pair { animation: mp-settle 520ms var(--ease-out) both; }
.mp-pairs.is-settled .mp-pair:nth-child(2n) { animation-delay: 40ms; }
@keyframes mp-settle { 0% { transform: none; } 35% { transform: translateY(-4px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .mp-pairs.is-settled .mp-pair { animation: none; } }

.mp-prediction { font-family: var(--font-display); font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.35; color: var(--paper); max-width: 40ch; }

/* ---------- Why / Challenge: 8-card stage ---------- */
.mp-small { --card-w: 56px; }
@media (max-width: 760px) { .mp-small { --card-w: 34px; } }
.mp-small .mp-deck-row { gap: 6px; }
@media (max-width: 760px) { .mp-small .mp-deck-row { gap: 4px; } }
/* Label cards: show the colour letter too, so the proof reads without colour vision */
.mp-small .card[data-kind="label"] .face.front::after { content: "♥"; position: absolute; right: 8%; bottom: 4%; font: 400 calc(var(--card-w) * 0.22)/1 var(--font-ui); color: var(--red-ink); }
.mp-small .card[data-kind="label"][data-color="black"] .face.front::after { content: "♣"; color: var(--black-ink); }
.mp-small .card[data-kind="label"][data-color="red"] .pip { color: var(--red-ink); }

/* Fixed output slots and the aligned brackets drawn on the same grid */
.mp-slots, .mp-brackets, .mp-ribbon { display: grid; grid-template-columns: repeat(var(--n, 8), var(--card-w)); column-gap: 6px; }
@media (max-width: 760px) { .mp-slots, .mp-brackets, .mp-ribbon { column-gap: 4px; } }
.mp-slots { padding-top: 18px; }
.mp-slots .slot { position: relative; }
.mp-slots .slot > .card { position: absolute; left: 0; top: 0; }
.mp-slot-n { font-size: 0.7rem; color: var(--structure); }
.mp-brackets { margin-top: 6px; min-height: 30px; }
.mp-bracket { height: 9px; border: 2px solid var(--structure); border-top: 0; border-radius: 0 0 4px 4px; border-style: dashed; position: relative; }
.mp-bracket > span { position: absolute; left: 0; right: 0; top: 10px; text-align: center; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--secondary-on-stage); white-space: nowrap; }
.mp-bracket[data-state="mixed"] { border-color: var(--invariant); border-style: solid; }
.mp-bracket[data-state="mixed"] > span { color: var(--invariant); }
.mp-bracket[data-state="same"] { border-color: var(--counter); border-style: solid; }
.mp-bracket[data-state="same"] > span { color: var(--counter); }

/* The ribbon: original positions 1..8, the stretch taken so far, and the two fronts */
.mp-ribbon-wrap { margin-top: var(--s3); }
.mp-ribbon { padding-top: 12px; }
.mp-cell { position: relative; height: 34px; border-radius: 6px; background: var(--paper); color: var(--black-ink); display: grid; place-items: center; font: 600 1rem/1 var(--font-math); font-variant-numeric: tabular-nums; transition: opacity 200ms ease; }
.mp-cell[data-color="red"] { color: var(--red-ink); }
.mp-cell .mp-cell-c { position: absolute; right: 3px; bottom: 2px; font: 400 0.62rem/1 var(--font-ui); }
.legend .mp-swatch-taken { width: 16px; background: color-mix(in oklch, var(--paper) 52%, var(--stage)); border-top: 3px solid var(--invariant); border-radius: 2px; }
/* Controls dim only gently while a move animates (they are disabled, so clicks cannot overlap) */
.mp-try.is-busy .btn:disabled { opacity: 0.7; }
.mp-cell.is-taken { background: color-mix(in oklch, var(--paper) 52%, var(--stage)); }
.mp-cell.in-run::before { content: ""; position: absolute; left: -3px; right: -3px; top: -9px; border-top: 3px solid var(--invariant); }
.mp-cell.in-run.run-start::before { left: 0; border-left: 3px solid var(--invariant); height: 6px; border-top-left-radius: 3px; }
.mp-cell.in-run.run-end::before { right: 0; border-right: 3px solid var(--invariant); height: 6px; border-top-right-radius: 3px; }
.mp-cell.is-front { outline: 2.5px solid var(--active); outline-offset: 2px; }
.mp-cell.is-gap { outline: 2px dashed var(--counter); outline-offset: 2px; }
.mp-ribbon-key { margin-top: 10px; }

.mp-readouts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s3); }
.mp-readouts .readout-value { font-size: 1.35rem; }
.mp-why-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.mp-caption { margin-top: var(--s2); min-height: 4.4em; }
.mp-verdict { margin-top: var(--s3); }
.mp-verdict[hidden] { display: none; }
.mp-setup { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: flex-end; }
.mp-setup .field { gap: 6px; }
.mp-found { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s2); }
.mp-why-stage .ledger, .mp-ch-stage .ledger { margin-top: var(--s3); }

/* Desktop: lanes and ribbon on the left (same column grid), words and controls on the right */
.mp-grid > * + * { margin-top: var(--s2); }
.mp-grid .mp-g-lanes { margin-top: var(--s2); }
@media (min-width: 1000px) {
  .mp-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr auto auto; column-gap: var(--s5); align-items: start; }
  .mp-grid > * + * { margin-top: 0; }
  .mp-grid > * { grid-column: 2; }
  .mp-grid .mp-g-head, .mp-grid .mp-g-ledger, .mp-grid .mp-g-found, .mp-grid .mp-g-hr { grid-column: 1 / -1; }
  .mp-grid .mp-g-lanes { grid-column: 1; grid-row: 2 / span 4; margin-top: var(--s2); }
  .mp-grid .mp-g-ribbon { grid-column: 1; grid-row: 6; }
  .mp-grid .mp-g-caption { grid-row: 2; margin-top: var(--s2); }
  .mp-grid .mp-g-readouts { grid-row: 3; margin-top: var(--s3); }
  .mp-grid .mp-g-controls { grid-row: 4; margin-top: var(--s3); }
  .mp-grid .mp-g-ledger { grid-row: 7; margin-top: var(--s3); }
  .mp-grid .mp-g-head { grid-row: 1; }
  /* Challenge: head, chips, rule, then lanes | instruction, controls, verdicts */
  .mp-grid-ch { grid-template-rows: auto auto auto auto auto auto auto 1fr auto auto; }
  .mp-grid-ch .mp-g-found { grid-row: 2; margin-top: var(--s2); }
  .mp-grid-ch .mp-g-hr { grid-row: 3; }
  .mp-grid-ch .mp-g-lanes { grid-row: 4 / span 5; margin-top: 0; }
  .mp-grid-ch .mp-g-ribbon { grid-row: 9; }
  .mp-grid-ch .mp-g-caption { grid-row: 4; margin-top: 0; }
  .mp-grid-ch .mp-g-controls { grid-row: 5; margin-top: var(--s2); }
  .mp-grid-ch .mp-g-verdict { grid-row: 6; margin-top: var(--s3); }
  .mp-grid-ch .mp-g-success { grid-row: 7; margin-top: var(--s3); }
  .mp-grid-ch .mp-g-ledger { grid-row: 10; }
}
@media (min-width: 1100px) { .mp-try .mp-pairs { --card-w: 64px; } }