/* Desire Match (match.html). Builds on game.css (.app, .screen, .card, .chip, .pills, .switch, .confirm-box, .toggle).
   Colors come only from the mapped tokens in palette.css/base.css. */

/* ---------- Frame */
/* No colour fade while the saved Daylight/Candlelight choice is applied on load (match.js removes .m-init). */
body.m-init, body.m-init .ember { transition: none; }
.m-top .m-day { width: auto; min-height: 44px; padding-inline: 4px; font-size: var(--t-small); gap: 10px; }
.match .g-main { padding-bottom: env(safe-area-inset-bottom, 0px); }
.m-center { justify-content: center; }
.m-center .btn.quiet { align-self: center; }

/* Loading dots (stop moving under prefers-reduced-motion via base.css) */
.m-dots { display: flex; gap: 8px; }
.m-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); opacity: .3; animation: m-dot 1.2s ease-in-out infinite; }
.m-dots span:nth-child(2) { animation-delay: .2s; }
.m-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes m-dot { 40% { opacity: 1; transform: translateY(-3px); } }

/* ---------- Panels */
.m-panel {
  background: var(--card); color: var(--card-ink);
  border-radius: 20px; padding: 16px 18px; display: grid; gap: 10px;
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -26px var(--shadow);
}
.m-panel-h { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.m-panel .label { color: inherit; }
.m-panel-k { font-family: var(--font-body); line-height: 1.4; }
.m-points { margin: 0; padding-left: 1.15em; display: grid; gap: 6px; font-size: 1rem; line-height: 1.45; }
.m-points li::marker { color: var(--accent); }

/* ---------- Teaser (dormant paid mode only) */
.m-samples { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.m-samples li { display: grid; gap: 2px; border-left: 3px solid var(--accent); padding-left: 12px; }
.m-sample-g { font-size: var(--t-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.m-sample-t { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; }
.m-lock-note { display: flex; align-items: center; gap: 8px; font-size: var(--t-small); font-weight: 600; }

/* ---------- Setup */
.m-setup { gap: 18px; }
.m-form { display: grid; gap: 20px; align-content: start; }
.m-intro { display: grid; gap: 10px; }
.m-saved { gap: 10px; }
.m-saved .label { color: inherit; }
.m-saved .row > .btn { flex: 1 1 180px; }

.m-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 359px) { .m-groups { grid-template-columns: minmax(0, 1fr); } }
.m-grp { position: relative; display: block; cursor: pointer; min-width: 0; }
.m-grp input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.m-grp-t {
  display: grid; gap: 3px; align-content: start; min-height: 88px; height: 100%;
  padding: 12px 44px 12px 14px; border-radius: 16px; border: 1.5px solid var(--control);
  transition: background-color .2s ease, border-color .2s ease;
}
.m-grp-t strong { font-weight: 700; font-size: 1.0625rem; line-height: 1.2; }
.m-grp-d { font-size: var(--t-small); line-height: 1.3; color: var(--soft); }
.m-grp-n { margin-top: 2px; font-size: var(--t-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.m-grp-tick {
  position: absolute; right: 12px; top: 12px; width: 24px; height: 24px; padding: 4px;
  border-radius: 50%; color: transparent; box-shadow: inset 0 0 0 1.5px var(--control);
}
.m-grp input:checked + .m-grp-t { background: var(--card); color: var(--card-ink); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.m-grp input:checked + .m-grp-t .m-grp-d, .m-grp input:checked + .m-grp-t .m-grp-n { color: var(--card-ink); }
.m-grp input:checked ~ .m-grp-tick { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.m-grp input:focus-visible + .m-grp-t { outline: 3px solid var(--accent); outline-offset: 2px; }
.m-count { font-weight: 700; }
.m-setup .pill strong { font-size: .98rem; }

/* ---------- Rating */
.m-rate { gap: 14px; }
.m-rate-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.m-who { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.m-who .chip { font-size: .8rem; }
.m-progress { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--soft); }
.m-meter { height: 6px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.m-meter span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform .3s ease; }
.m-idea { min-height: clamp(190px, 34dvh, 340px); }
.m-rate .m-idea-text { font-size: clamp(1.75rem, 7.6vw, 2.5rem); line-height: 1.15; }
.m-rate .m-idea-text:focus-visible { outline-color: currentColor; }

.m-answers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.m-ans {
  position: relative; flex-direction: column; gap: 4px; min-height: 84px; padding: 10px 6px;
  border-radius: 20px; border-width: 2px; font-size: 1.125rem;
}
.m-ans.m-yes { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.m-ans.m-maybe, .m-ans.m-no { border-color: var(--control); color: var(--ink); }
.m-ans.m-maybe:hover, .m-ans.m-no:hover { background: var(--card); color: var(--card-ink); }
.m-ans:active { transform: scale(.97); }
.m-tick { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; display: none; }
.m-ans[aria-pressed="true"] .m-tick { display: block; }
.m-ans[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5.5px var(--ink); }
.m-ans kbd {
  font-family: var(--font-body); font-size: .72rem; font-weight: 700; line-height: 1.3;
  min-width: 1.8em; padding: 1px 6px; border-radius: 6px; border: 1.5px solid currentColor; opacity: .85;
}
.m-keys { text-align: center; }
@media (hover: none) and (pointer: coarse) {
  .m-ans kbd, .m-keys { display: none; }
}
.m-tools { display: flex; flex-wrap: wrap; gap: 10px; }
.m-tools .btn { flex: 1 1 120px; }
.m-tools .ico { width: 16px; height: 16px; }
.m-stop { align-self: center; }

/* Checkboxes: drawn from tokens so the empty box keeps 3:1 against the card or page in both modes
   (the native dark-scheme box is too faint on these colours). Falls back to the native box in forced-colours mode. */
.m-check input {
  -webkit-appearance: none; appearance: none; flex: none;
  width: 24px; height: 24px; margin: 1px 0 0; display: grid; place-content: center;
  border: 2px solid currentColor; border-radius: 6px; background: transparent; color: inherit; cursor: pointer;
}
.m-check input::before {
  content: ""; width: 14px; height: 14px; background: var(--on-accent);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0); transition: transform .12s ease;
}
.m-check input:checked { background: var(--accent); border-color: var(--accent); }
.m-check input:checked::before { transform: scale(1); }
.m-check input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.m-match .m-check input:focus-visible { outline-color: currentColor; }
@media (forced-colors: active) {
  .m-check input { -webkit-appearance: auto; appearance: auto; }
  .m-check input::before { display: none; }
}

/* ---------- Results */
.m-results { gap: 18px; }
.m-group-res { display: grid; gap: 10px; margin-top: 6px; }
.m-res-h { font-size: 1.6rem; line-height: 1.15; }
.m-matches { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.m-match {
  background: var(--card); color: var(--card-ink); border-radius: 18px; padding: 14px 16px 8px;
  display: grid; gap: 4px; box-shadow: 0 1px 0 var(--line), 0 16px 34px -26px var(--shadow);
}
.m-match-t { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.25; overflow-wrap: break-word; }
.m-match-meta { font-size: var(--t-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.m-play { margin-top: 2px; }
.m-play .switch-t { font-weight: 700; }
.m-save { display: grid; gap: 10px; }
.m-done { gap: 12px; }
.m-done p:focus { outline: none; }
.m-res-actions > .btn { flex: 1 1 140px; }
.m-results .confirm-box .btn.ghost { color: var(--card-ink); }

@media (min-width: 900px) {
  .m-rate .m-idea-text { font-size: 2.6rem; }
}