/* Ciudad de Ángeles — /give, the quiz. PLAN step 16, added 2026-09-21.

   Loads after site.css and blend.css. Additive, like blend.css: no brand colour, font or
   spacing scale is redefined here.

   The idea: every answer removes a click from Givebutter's own form. Her Casa checkout
   accepts a frequency and an amount in the link, so the person lands with both already
   pressed. The quiz is the form's first three fields, moved to where they are bigger,
   one at a time, and in plain words.

   What moves: one panel sliding in as the next question takes the screen, and only
   when motion is on. Nothing inside a form moves — that rule stands from blend.css. */

.quiz {
  max-width: 760px;
  margin: 0 auto;
  min-height: 62svh;
}
.quiz .kicker .num { font-variant-numeric: tabular-nums; }

/* one question at a time — but only once JS is running. Without it every panel is
   simply a section on the page, in reading order, and every choice is a real link. */
.q { display: none; }
.q.is-current { display: block; }
html:not(.js) .q { display: block; padding-top: 28px; margin-bottom: 44px; border-top: 1px solid var(--line); }
html:not(.js) .q:first-of-type { border-top: 0; padding-top: 0; }
html:not(.js) .js-only { display: none; }
html:not(.js) .quiz-foot { display: none; }

.q h1, .q h2 {
  font-size: clamp(30px, 4.6vw, 54px);
  max-width: 18ch;
  text-wrap: balance;
}
.q h1:focus:not(:focus-visible), .q h2:focus:not(:focus-visible) { outline: none; }
.q .lede { margin: 20px 0 0; font-size: 1.1rem; color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.q .lede b { color: var(--ink); }

/* the choices: big, one per row, the number key printed on the left */
.choices {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.choice {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 66px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1.5px solid var(--line-2);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .16s, background .16s;
}
.choice:hover { border-color: var(--brand); background: #fff; }
.choice .key {
  font-family: var(--font-mono);
  font-size: .72rem;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
}
.choice > div { min-width: 0; }
.choice strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(19px, 2vw, 24px);
  letter-spacing: -.035em;
  line-height: 1.05;
}
.choice .sub { display: block; margin-top: 4px; font-size: .95rem; color: var(--ink-2); }
.choice .ic { color: var(--coral-text); font-size: 1.2em; }

/* amounts read as a ledger: the number is the answer */
.choices.amounts .choice strong { font-variant-numeric: tabular-nums; }

/* back link and the count sit under the question, never over a choice */
.quiz-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  min-height: 44px;
}
.quiz-foot button.tlink { background: none; border: 0; border-bottom: 2px solid var(--coral); padding: 0 0 3px; cursor: pointer; font-size: 1rem; }
.quiz-foot [hidden] { display: none; }

/* where they land */
.land .embed { margin-top: 28px; }
.land .embed givebutter-giving-form { display: block; }
.land .level {
  margin-top: 20px;
  padding: 18px 22px;
  background: var(--gold-tint);
  color: var(--brand-deep);
  max-width: 56ch;
}
.land .level p { margin: 0; }
.land .level p + p { margin-top: 8px; }
.land .trust { margin-top: 14px; }
.land .restart { margin-top: 30px; font-size: .95rem; color: var(--ink-2); }
/* the same 44px pointer area blend.css gives .tlink, no visual change */
.land .restart a { position: relative; display: inline-block; }
.land .restart a::after { content: ""; position: absolute; inset: 50% 0 auto; height: 44px; translate: 0 -50%; }
.land .btn { margin-top: 24px; }
.land address { font-style: normal; margin-top: 20px; font-size: 1.15rem; }

/* ---------- motion ---------- */
@keyframes q-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
body.motion-on .q.is-current { animation: q-in .42s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  body.motion-on .q.is-current { animation: none; }
}

/* a key hint means nothing to a thumb */
@media (hover: none) { #hint { display: none; } }

@media (max-width: 599px) {
  .choice { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; padding: 13px 14px; }
  .choice .key { width: 26px; height: 26px; font-size: .66rem; }
}