/* ============================================================================
   Match (/match), on top of style.css: the same tokens, type and buttons.
   docs/DESIGN.md section 5.8.

   The cards are prints like the board's snapshots: rice paper, a gold pin, a
   slight tilt, on the rust ground with the pig's-back crosshatch. The one
   bold thing is the deck you swipe; everything around it stays quiet.
   Nothing moves by itself: a card follows the finger, and flies off only
   for visitors who did not ask for less motion.
   ========================================================================= */

/* The stage fills the screen above the tab bar. svh with a vh line before
   it, never dvh (DESIGN.md section 5.2). */
.mstage {
  min-height: calc(100vh - var(--nav-top) - var(--nav-bottom));
  min-height: calc(100svh - var(--nav-top) - var(--nav-bottom));
}
/* minmax(0, 1fr): nothing inside may widen the column past the screen. */
.mstage__wrap { max-width: 34rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.mhead__lead { margin-top: .75rem; max-width: 34ch; }
.mback { text-align: center; }

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

/* ── A print ── */
.mprint {
  position: relative;
  padding: 1.75rem 1.4rem 1.4rem;
  border-radius: var(--radius);
  background: var(--rice); color: var(--ink);
  --focus: var(--rust); --link: var(--rust-text);
  box-shadow: 0 1px 2px rgba(42, 23, 14, .2), 0 14px 30px rgba(42, 23, 14, .26);
  transform: rotate(-1.2deg);
}
.mprint::before {
  content: ""; position: absolute; top: -7px; left: 50%; width: 15px; height: 15px; margin-left: -7px;
  border-radius: 50%; box-shadow: 0 2px 3px rgba(0, 0, 0, .25);
  background: radial-gradient(circle at 35% 35%, var(--gold-soft), var(--gold) 55%, #A86E1C);
}
.mprint__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.7rem, 7.4vw, 2.2rem); line-height: 1.08;
  text-wrap: balance;
}
.mprint__title:focus { outline: none; }
.mprint__line { margin-top: .6rem; color: var(--ink-soft); }
.mprint__aside { margin-top: .9rem; font-size: .9375rem; color: var(--ink-soft); }
.mprint .btns { margin-top: 1.4rem; }

/* Buttons are <button>s here: they need the page's font. Under the deck, on
   rust, Yes is a cream pill and Pass a cream line. */
button.btn { font-family: inherit; cursor: pointer; }
.btn--line, .btn--plain { background-color: transparent; }   /* style.css wrote these for links; a <button> is grey by default */
.btn--rice { background: var(--rice); color: var(--ink); }
.btn--rice:hover { background: var(--gold-soft); }
.btn svg { width: 18px; height: 18px; margin-right: .45rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mtext {
  min-height: 44px; padding: 0 1rem; border: 0; background: none;
  color: var(--link, var(--rust-text)); font: inherit; text-decoration: underline; text-underline-offset: .18em;
  cursor: pointer;
}

/* ── The table ── */
.mstep { display: flex; align-items: center; gap: 1.25rem; margin-top: .9rem; }
.mstep__btn {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: none; color: var(--ink);
  font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.mstep__btn[aria-disabled="true"] { opacity: .35; cursor: default; }
/* Tapped again and again: a quick second tap is never a zoom (iOS). */
.mdeck__btns .btn, .mstep__btn { touch-action: manipulation; }
.mstep__n { min-width: 2ch; font-family: var(--font-display); font-size: 3.2rem; line-height: 1; text-align: center; }

/* ── The deck ── */
/* overflow: hidden clips the cards flying off, so the page never scrolls
   sideways: iOS 14-15 ignore body's overflow-x: clip. With the gutter, the
   padding keeps even the tilted card 32px from the screen's edges, away from
   the back gestures. */
.mdeck { position: relative; overflow: hidden; padding: 1.25rem 1rem 1rem; }
/* Back on the left, the count in the middle: one row, so the deck fits the
   ~400px a short phone leaves inside Facebook. */
.mdeck__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 1rem; }
.mdeck__top .mtext { justify-self: start; padding-inline: 0; }
.mdeck__count {
  font-family: var(--font-accent); font-style: italic; font-size: 1.5rem; line-height: 1.1;
  color: var(--gold-soft);
}
.mdeck__stack { position: relative; z-index: 0; }
.mdeck__stack::before, .mdeck__stack::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
  border-radius: var(--radius); background: var(--paper);
  box-shadow: 0 8px 22px rgba(42, 23, 14, .22);
  transform: rotate(3deg) translateY(10px);
}
.mdeck__stack::after { background: var(--line); transform: rotate(-4deg) translateY(16px); }
.mcard {
  min-height: 12rem;
  display: flex; flex-direction: column; justify-content: center; text-align: center;
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  cursor: grab;
}
.mcard.is-dragging { cursor: grabbing; }
.mcard--fly { position: absolute; top: 0; right: 0; left: 0; z-index: 2; pointer-events: none; }
.mstamp {
  position: absolute; top: 1rem; padding: .05rem .55rem;
  border: 3px solid currentColor; border-radius: 6px;
  font-family: var(--font-accent); font-style: italic; font-size: 1.75rem; line-height: 1.15;
  opacity: 0; pointer-events: none;
}
.mstamp--yes { left: 1rem; color: var(--leaf); transform: rotate(-12deg); }
.mstamp--no { right: 1rem; color: var(--rust-text); transform: rotate(12deg); }
@media (min-height: 700px) { .mcard { min-height: 15rem; } }
.mdeck__btns { display: flex; justify-content: center; gap: .9rem; margin-top: 1.5rem; }
.mdeck__btns .btn { flex: 1 1 0; max-width: 10rem; padding-inline: .75rem; }
.mapp > .mtext { padding-inline: 0; }   /* alone on the line, it aligns with the heading under it */

@media (prefers-reduced-motion: no-preference) {
  .mcard { transition: transform .25s var(--ease); }
  .mcard.is-dragging { transition: none; }
  .mcard--fly { transition: transform .4s var(--ease), opacity .4s var(--ease); }
}

/* ── It's a match ── */
.mmatch__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.5rem, 11vw, 3.6rem); line-height: 1; text-align: center;
}
.mmatch__title:focus { outline: none; }
.mmatch .mprint { margin-top: 1.75rem; }
.mitems { margin-top: 1.1rem; }
.mitems li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .5rem; border-top: 1px solid var(--line); }
.mitems__price, .mtotal__n { font-family: var(--font-display); color: var(--rust-text); white-space: nowrap; }
.mtotal { margin-top: .25rem; padding-top: .75rem; border-top: 2px solid var(--line-strong); font-weight: 700; }
.mdrinks { margin-top: .75rem; }
.mcrew { margin-top: 1rem; font-family: var(--font-accent); font-style: italic; font-size: 1.5rem; line-height: 1.15; color: var(--rust-text); }
.mnote { margin-top: .75rem; font-size: .875rem; line-height: 1.5; color: var(--ink-soft); }
.mmatch .btns { margin-top: 1.5rem; justify-content: center; }
.mmatch > .mtext { display: block; margin: 1rem auto 0; }

/* ── The picks (written by tools/match-to-html.mjs) ── */
.mpicks__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 6vw, 2rem); line-height: 1.1; }
.mpicks__title:focus { outline: none; }
.mpicks__list { display: grid; gap: .9rem; margin-top: 1.1rem; }
.mpick__link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem;
  padding: 1rem 1.15rem; border-radius: var(--radius);
  background: var(--rice); color: var(--ink); text-decoration: none; --focus: var(--rust);
  box-shadow: 0 1px 2px rgba(42, 23, 14, .18), 0 8px 20px rgba(42, 23, 14, .18);
}
.mpick__name { font-weight: 700; line-height: 1.3; }
.mpick__line { grid-column: 1; font-size: .9375rem; line-height: 1.45; color: var(--ink-soft); }
.mpick__price { grid-column: 2; grid-row: 1; font-family: var(--font-display); font-size: 1.1875rem; color: var(--rust-text); white-space: nowrap; }

/* ── The footer: the way home, and the small print ── */
.mfoot { padding-block: 2rem; background: var(--roast); color: var(--on-dark-soft); font-size: .875rem; --link: var(--gold-soft); --focus: var(--gold); }
.mfoot__wrap { display: grid; gap: .9rem; }
.mfoot__home { display: inline-flex; align-items: center; gap: .75rem; color: var(--on-dark); font-weight: 700; text-decoration: none; }
.mfoot__home img { width: 60px; height: auto; }