/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   The horizon deck — what replaces the day-end quiz.

   [2026-08-03] Pawan, via the spec §8.2: "my style is never to test but open horizons."

   THE THREE ABSENCES ARE THE DESIGN, and each one is a thing deliberately not styled here:
     · no score          — there is no element for one
     · no progress-to-N  — no dots, no ring, no "3 of 12". Availability becomes obligation the
                           instant you visualise the remainder
     · no completion     — leaving after one card is a finished session, so nothing celebrates an end

   The form is lifted from ai_art/ai_art_prompting_practice_exercise.html, which had it right in
   November: material given rather than withheld, help free and inline, choose any three of ten, and
   the payoff deliberately outside the page. That file contains zero occurrences of "score",
   "progress" and "of 10", and twenty hints.

   Where the weight sits: the reveal is the biggest, warmest thing on the card. In a test the question
   carries the page; here the question is a doorway and the reveal is the product.

   Frequency law: cards turn over every 5-15 seconds, so the controls are quiet — two plain choices,
   no primary button, nothing shouting. The eye stays on the words.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

.hz-intro{margin:2px 0 16px}
.hz-intro .hz-lede{color:var(--ink-2);font-size:var(--fs-body,16px);line-height:1.62;max-width:62ch}
.hz-intro .hz-lede b{color:var(--ink);font-weight:600}

/* the deck */
.hz-deck{display:flex;flex-direction:column;gap:12px;margin-top:4px}

.hz-card{
  border:2px solid var(--border);border-radius:var(--radius);background:var(--card);
  padding:16px 18px;box-shadow:var(--shadow-sm);transition:border-color .18s,background .18s;
}
.hz-card.seen{border-color:var(--border-soft);background:#fffdfa}

.hz-turn{font-family:'Lora',serif;font-size:var(--fs-body,var(--fs-body,16px));font-weight:600;line-height:1.4;margin-bottom:12px}

/* two plain choices. Neither is styled as the primary — the point is to commit, not to be right. */
.hz-opts{display:flex;flex-direction:column;gap:8px}
.hz-opt{
  display:block;width:100%;text-align:left;font-family:inherit;font-size:var(--fs-body,var(--fs-body,16px));line-height:1.45;
  padding:11px 14px;border:1.5px solid var(--border);border-radius:10px;background:var(--card);
  color:var(--ink-2);cursor:pointer;transition:all .16s;min-height:44px;
}
.hz-opt:hover:not(.hz-locked){border-color:var(--ch);background:#fffcf7;color:var(--ink)}
.hz-opt.hz-locked{cursor:default}
/* The chosen one is marked, and the truer one is marked. No red, no green tick, no cross —
   getting it wrong here is the yield, and punishing it visually would make it a test again. */
.hz-opt.hz-picked{border-color:var(--ink-3);color:var(--ink)}
.hz-opt.hz-truer{border-color:var(--ch);background:var(--ch-mist);color:var(--ch-deep);font-weight:600}

/* the reveal — the product. Biggest text on the card, warm ground, always the last word. */
.hz-reveal{
  margin-top:13px;padding:14px 16px;border-radius:10px;
  background:var(--ch-soft);border:1px solid rgba(234,122,39,.28);
  font-family:'Lora',serif;font-size:var(--fs-body,16px);line-height:1.6;color:#5c3410;
  animation:hzIn .22s ease;
}
@keyframes hzIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.hz-src{
  display:block;margin-top:9px;font-family:'Inter',sans-serif;font-size:var(--fs-meta,13px);letter-spacing:.04em;
  text-transform:uppercase;font-weight:700;color:#8a6a3a;opacity:.85;
}

/* the only two controls, both quiet */
.hz-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}
.hz-more{
  font-family:inherit;font-size:var(--fs-ui,14px);font-weight:600;padding:9px 15px;border-radius:10px;min-height:38px;
  border:1.5px solid var(--border);background:var(--card);color:var(--ink-2);cursor:pointer;transition:all .18s;
}
.hz-more:hover{border-color:var(--ch);color:var(--ch-deep)}
.hz-done{
  margin-left:auto;font-family:inherit;font-size:var(--fs-ui,14px);font-weight:600;background:none;border:none;
  color:var(--ink-3);cursor:pointer;padding:9px 4px;min-height:38px;
}
.hz-done:hover{color:var(--ink)}

/* the closing note — no tally, no badge, and it never says "complete" */
.hz-end{
  margin-top:14px;padding:14px 16px;border-radius:10px;background:var(--ch-mist);
  border:1px solid var(--border);font-size:var(--fs-ui,14px);line-height:1.6;color:var(--ink-2);
}
.hz-end b{color:var(--ink);font-weight:600}

@media(max-width:620px){
  .hz-card{padding:14px 14px}
  .hz-turn{font-size:var(--fs-body,var(--fs-body,16px))}
  .hz-opt{font-size:var(--fs-body,var(--fs-body,16px))}
}