/* Loyalty Program Calculator — /loyalty-program-calculator only.
 *
 * One question per full screen, centered on a single column: question,
 * input, help line, live diagnosis — one axis, one place to look. Grand
 * Darjeeling rules apply (docs/design.md): flat depth, snap transitions,
 * radius ≤ 4px, all colour via theme.css tokens. Built small-breakpoint
 * first; 360×640 is the floor.
 *
 * dvh everywhere, never vh — vh is wrong on mobile Safari the moment the
 * URL bar moves (PRD §4.5).
 */

/* ── Screens ─────────────────────────────────────────────────────────── */
/* Centered single column (founder, 2026-08-20 — supersedes the PRD §4.1
   two-column anatomy): the input sits in the middle of the viewport, with
   the help line and the live diagnosis directly beneath it. One axis, one
   place to look. dvh keeps the centring honest when the mobile keyboard
   shrinks the viewport. */

.lc-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 57px);   /* header is ~57px */
  padding: 1.5rem 1.25rem 2.5rem;
}

.lc-screen[hidden] { display: none; }

.lc-main {
  width: 100%;
  max-width: 560px;
  text-align: center;
}

/* ── Type ────────────────────────────────────────────────────────────── */

.lc-progress {
  font-family: var(--font-data);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.9rem;
}

.lc-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.4rem, 4.5vw, 2.2rem);
  line-height: 1.2;
  color: var(--color-heading);
  margin-bottom: 1.25rem;
  outline: none;   /* focused programmatically on advance; not a tab stop */
}

.lc-help {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text);
  margin-top: 0.6rem;
}

/* The live diagnosis — the one element on a question screen that reacts.
   Highlighted on the saffron tint; height reserved so its arrival never
   shifts the CTA (PRD §4.5, no mid-flow reflow). */
.lc-note {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text);
  min-height: 2.9rem;
  margin: 0.9rem auto 0;
  max-width: 440px;
  padding: 0.55rem 0.9rem;
  border-radius: 2px;
}

.lc-note:not(:empty) {
  background-color: var(--color-tint-saffron);
  border: 1px solid var(--color-saffron-dark);
}

/* Short viewports (a phone with 8 category cards): tighten the rhythm so
   the diagnosis and OK stay inside the first screen. */
@media (max-height: 700px) {
  .lc-screen   { padding: 0.75rem 1.25rem 1.25rem; }
  .lc-progress { margin-bottom: 0.25rem; }
  .lc-heading  { margin-bottom: 0.6rem; }
  .lc-help     { margin-top: 0.3rem; }
  .lc-note     { margin-top: 0.5rem; min-height: 2.6rem; padding-block: 0.45rem; }
  .lc-cta-row  { margin-top: 0.9rem; }
  .lc-choice   { padding: 0.55rem 0.9rem; }
  .lc-main [role="group"].grid { gap: 0.375rem; }
}

/* ── Inputs ──────────────────────────────────────────────────────────── */

.lc-input {
  font-family: var(--font-data);
  font-size: 1.35rem;
  width: 100%;
  max-width: 340px;
  height: 3.25rem;
  margin-inline: auto;
  text-align: center;
}

/* ── Choice cards (category, cycle, presets, the door) ───────────────── */

.lc-choice {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.8rem 1rem;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background-color: var(--color-page-box);
  font-size: 0.95rem;
  color: var(--color-text);
  cursor: pointer;
}

.lc-choice[aria-pressed="true"] {
  border-color: var(--color-ocean);
  background-color: var(--color-tint-ocean);
}

.lc-choice-sub {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}

/* ── CTA row + "I don't know" ────────────────────────────────────────── */

.lc-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 1.5rem;
}

.lc-enter-hint {
  display: none;
  font-family: var(--font-data);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

@media (min-width: 900px) {
  .lc-enter-hint { display: inline; }
}

/* Most-tapped control on mobile — sized like it (≥44px, full width). */
.lc-idk {
  display: block;
  width: 100%;
  max-width: 340px;
  min-height: 44px;
  margin: 0.9rem auto 0;
  padding: 0.6rem 1rem;
  border: 1px dashed var(--color-border-strong);
  border-radius: 2px;
  background: none;
  font-size: 0.875rem;
  color: var(--color-text);
  text-align: center;
  cursor: pointer;
}

.lc-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* touch floor — same rule the spec holds sliders to */
  background: none;
  border: none;
  padding: 0.5rem 0;
  margin-top: 0.75rem;
  font-family: var(--font-data);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  cursor: pointer;
}

/* Keyboard focus on the custom controls — hard ocean line, no glow, per the
   tactile-web house language. Browser defaults are not guaranteed here. */
.lc-choice:focus-visible,
.lc-idk:focus-visible,
.lc-back:focus-visible {
  outline: 2px solid var(--color-ocean);
  outline-offset: 2px;
}

/* ── The running verdict ─────────────────────────────────────────────── */

.lc-verdict {
  font-family: var(--font-data);
  font-size: 0.875rem;
  color: var(--color-heading);
  margin-top: 1.4rem;
  min-height: 1.5em;
}

/* ── Result card ─────────────────────────────────────────────────────── */

.lc-result {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

/* Card on the white page-box, not aqua: the verdict and grade accents
   (teal-dark / orange-dark / crimson) clear WCAG large-text contrast on
   white and fail on base-200 — verified, per PRD §4.4a. */
.lc-result-card {
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background-color: var(--color-page-box);
}

.lc-result-verdict {
  padding: 1.5rem 1.25rem 1.25rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.15rem, 3.5vw, 1.5rem);
  line-height: 1.3;
  outline: none;   /* focused programmatically on arrival; not interactive */
}

.lc-result-why {
  padding: 0 1.25rem 1.25rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text);
}

/* Hero — the double statement. Saffron dot grid per docs/design.md
   (.section-stats). The number itself is --color-text navy: saffron type on
   any light surface fails the PRD's own 4.5:1 gate (§4.4a — verified, F5A200
   on ABDDDE ≈ 1.4:1), so the hero inverts instead, matching .stat-num. */
.lc-hero {
  padding: 1.75rem 1.25rem;
  text-align: center;
}

.lc-hero-lead, .lc-hero-tail {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text);
  max-width: 34ch;
  margin: 0 auto;
}

.lc-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.1;
  color: var(--color-text);
  margin: 0.4rem auto;
}

.lc-hero-observed {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text);
  max-width: 44ch;
  margin: 1rem auto 0;
}

.lc-hero-observed b { font-family: var(--font-data); }

/* Break-even number line (diagram 8) */
.lc-numline { margin: 1.25rem auto 0; max-width: 420px; }
.lc-numline svg { width: 100%; height: auto; }

/* Assembled reveal (PRD §4.2 mechanic 5) — pieces land by visibility snap,
   no easing, ~120ms apart, strongest number last (data-reveal-order). Heights
   are reserved up front so nothing reflows mid-sequence (PRD §4.5). */
.lc-reveal { visibility: hidden; }
.lc-reveal.is-on { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .lc-reveal { visibility: visible; }
}

.lc-rows { padding: 0 1.25rem; }

.lc-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--color-border);
  min-height: 4.6rem;
}

@media (min-width: 600px) {
  .lc-row {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
  }
}

.lc-row-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.lc-row-note {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text);
}

.lc-row-value {
  font-family: var(--font-data);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-heading);
  flex-shrink: 0;
  white-space: nowrap;
}

.lc-grade-strip {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--color-border);
}

.lc-grade {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
}

.lc-sources {
  padding: 1rem 1.25rem 1.5rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.lc-assumed {
  display: inline-block;
  font-family: var(--font-data);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--color-border-strong);
  border-radius: 2px;
  padding: 0 0.3rem;
  margin-left: 0.35rem;
  color: var(--color-text-muted);
  vertical-align: middle;
}

/* ── Assumptions panel — "Argue with it" ─────────────────────────────── */

.lc-assumptions {
  margin-top: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background-color: var(--color-page-box);
  padding: 1.25rem;
}

.lc-assumptions[hidden] { display: none; }

.lc-slider-row {
  display: grid;
  grid-template-columns: 1fr 5.5rem;
  align-items: center;
  column-gap: 0.9rem;
  padding: 0.55rem 0;
}

.lc-slider-row label {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.2rem;
}

/* ≥44px touch target on the range control (PRD §4.5) */
.lc-slider-row .range { min-height: 44px; }

.lc-readout {
  font-family: var(--font-data);
  font-size: 0.95rem;
  height: 2.75rem;   /* 44px — it's a tap target, sized like one */
  text-align: right;
}

.lc-feels {
  font-size: 0.9rem;
  color: var(--color-text);
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
  margin-top: 0.75rem;
}

.lc-feels b { font-family: var(--font-data); }

/* ── Actions under the card ──────────────────────────────────────────── */

.lc-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* ── House rule: snap, no easing, anywhere on this page ──────────────── */

.lc-screen, .lc-screen *,
.lc-result, .lc-result * { transition: none; }