/* ──────────────────────────────────────────────────────────────
   Decider: setup → question cards → result
   The question card is the app's one loud element: sambal screen,
   oversized type, rubber-stamp answers.
   ────────────────────────────────────────────────────────────── */

/* ── Setup ── */
.decide-setup { padding: 0 var(--sp-4); }
.decide-setup .topbar { margin: 0 calc(var(--sp-4) * -1); }
.decide-setup__hero {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
}
.decide-setup__group {
  margin: var(--sp-4) 0 0;
  padding: 0;
  border: 0;
}
.decide-setup__group legend {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-kicap-2);
}
.decide-setup .setting-row { margin-top: var(--sp-4); }
.decide-setup__diet {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  text-align: left;
}
.decide-setup__diet-body { flex: 1; display: flex; flex-direction: column; }
.decide-setup__diet-label { font-size: var(--fs-xs); color: var(--c-kicap-2); }
.decide-setup__diet-value { font-weight: var(--fw-semibold); }
.decide-setup__diet-edit { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-chilli); }
.decide-setup__cta {
  position: sticky;
  bottom: 0;
  margin: auto calc(var(--sp-4) * -1) 0;
  padding: var(--sp-4);
  background: var(--c-santan);
}
.decide-setup__status {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-kicap-2);
}
.decide-setup__status strong { color: var(--c-kicap); }
.decide-setup__status--empty { color: var(--c-chilli-deep); }
.sheet__done { margin-top: var(--sp-5); }
.sheet .chip-row { margin-bottom: var(--sp-2); }

/* ── Questions ── */
.decide-ask {
  background: var(--c-sambal);
  color: var(--c-on-brand);
  overflow: hidden;
}
.decide-ask .topbar { background: transparent; }
.decide-ask .icon-btn { color: var(--c-on-brand); }
.decide-ask__n { font-weight: var(--fw-semibold); }
.decide-ask__left {
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.decide-ask__left strong {
  display: inline-block;
  min-width: 2ch;
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  text-align: right;
}
.decide-ask__left.is-ticking strong { animation: tick var(--dur-swipe) var(--ease-out); }
@keyframes tick { 40% { transform: translateY(3px); } }

.qstack {
  position: relative;
  flex: 1;
  margin: var(--sp-4) var(--sp-5) 0;
  min-height: 320px;
}
.qcard {
  position: absolute;
  inset: 0 0 var(--sp-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-8) var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  color: var(--c-kicap);
  box-shadow: var(--shadow-lift);
  touch-action: none;
  user-select: none;
  cursor: grab;
  transition: transform var(--dur-base) var(--ease-out);
  --yes: 0;
  --no: 0;
  --skip: 0;
}
.qcard:focus-visible { outline-color: var(--c-kicap); }
/* The card beneath peeks out, so the stack reads as "more to come". */
.qcard--under {
  inset: var(--sp-3) var(--sp-3) var(--sp-3);
  background: var(--c-sambal-soft);
  box-shadow: none;
  transform: rotate(-3deg);
  cursor: default;
}
.qcard.is-entering { animation: card-up var(--dur-base) var(--ease-out); }
@keyframes card-up { from { transform: scale(0.94) rotate(-3deg); opacity: 0.6; } }

.qcard__q {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
}
.qcard__help {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-kicap-2);
}

/* ── Answer stamps: appear with drag distance, or fully on a button tap ── */
.qcard__stamp {
  position: absolute;
  top: var(--sp-6);
  padding: var(--sp-1) var(--sp-3);
  border: 3px solid currentColor;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  pointer-events: none;
}
.qcard__stamp--yes { left: var(--sp-5); color: var(--c-pandan); transform: rotate(-12deg); opacity: var(--yes); }
.qcard__stamp--no { right: var(--sp-5); color: var(--c-chilli); transform: rotate(12deg); opacity: var(--no); }
.qcard__stamp--skip {
  left: 50%;
  top: auto;
  bottom: var(--sp-6);
  color: var(--c-kicap-2);
  font-size: var(--fs-lg);
  transform: translateX(-50%) rotate(-4deg);
  white-space: nowrap;
  opacity: var(--skip);
}
.qcard.is-yes { --yes: 1; }
.qcard.is-no { --no: 1; }
.qcard.is-skip { --skip: 1; }

.decide-ask__answers {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom));
}
.answer {
  min-height: 60px;
  border: 0;
  border-radius: var(--r-pill);
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  transition: transform var(--dur-fast) var(--ease-out);
}
.answer:active { transform: scale(0.95); }
.answer--no { background: var(--c-surface); color: var(--c-chilli); }
.answer--yes { background: var(--c-surface); color: var(--c-pandan); }
.answer--skip {
  min-height: var(--tap-min);
  padding: 0 var(--sp-3);
  background: none;
  color: var(--c-on-brand);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.decide-ask :focus-visible { outline-color: var(--c-kicap); }

/* ── Result ── */
.decide-result { padding-bottom: var(--sp-6); }
.pick {
  margin: var(--sp-2) var(--sp-4) 0;
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--shadow-lift);
}
.pick__photo {
  width: 100%;
  height: 160px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-lg);
  font-size: calc(var(--fs-hero) * 1.8);
}
.pick__dish {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
}
.pick__venue { margin-top: var(--sp-1); color: var(--c-kicap-2); }
.pick__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
}
.pick__mine { color: var(--c-kicap-2); }
.pick__reason {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-line);
  font-weight: var(--fw-medium);
}
.pick__actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

/* The result reveal: the one deliberate, bigger moment (design-direction §5).
   The card turns up from flat like a dealt card, then the backups settle in. */
.pick--reveal {
  transform-origin: 50% 100%;
  animation: reveal var(--dur-reveal) var(--ease-out) both;
}
@keyframes reveal {
  0% { opacity: 0; transform: perspective(900px) rotateX(70deg) translateY(40px); }
  60% { opacity: 1; }
  100% { transform: none; }
}
.pick--reveal ~ .backups { animation: fade-in var(--dur-base) var(--ease-out) var(--dur-reveal) both; }
.pick--swap { animation: fade-in var(--dur-base) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .pick--reveal { animation-name: fade-in; }
  .pick--reveal ~ .backups { animation: none; }
}

.backups { margin-top: var(--sp-5); }
.backups__h {
  padding: 0 var(--sp-4) var(--sp-1);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}
.backup { align-items: flex-start; }
.backup__reason {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
}
.decide-result__again { align-self: center; margin-top: var(--sp-3); }