/* ============================================================
   THE READING · card, steps, result
   Built on tokens.css and components.css. Logic: reading.js.
   Layout responds to the card's own width (container queries),
   so the same component works in the hero and in page blocks.
   ============================================================ */
.reading {
    container-type: inline-size;
    position: relative;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: var(--space-5);
    color: var(--ink);
}
@media (min-width: 768px) { .reading { padding: var(--space-6); } }

.rd-view { overflow: hidden; transition: height var(--dur) var(--ease); }
.rd-view.no-anim { transition: none; }
.rd-step { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.rd-step.rd-enter { opacity: 0; transform: translateX(var(--rd-dir, 0)); }
/* Room for the focus ring (2px + 3px offset) inside the clipped viewport */
.rd-view { margin: -6px; }
.rd-inner { padding: 6px; }

/* ── Top bar: Back, then "2 of 5" and dots ── */
.rd-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--tap);
    margin-bottom: var(--space-3);
}
.rd-back { color: var(--ink-muted); }
.rd-back[hidden] { display: inline-flex !important; visibility: hidden; }
.rd-progress { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; font-size: var(--text-xs); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ── Questions ── */
.rd-q {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: var(--space-5);
    outline: none;
}
.rd-compact-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; line-height: 1.15; margin-bottom: var(--space-3); }
.rd-compact-title + .rd-q { font-family: var(--font-body); font-size: var(--text-base); font-weight: 500; }
.rd-welcome { margin-bottom: var(--space-3); font-size: var(--text-sm); color: var(--ink-muted); }
.rd-resume { margin-bottom: var(--space-4); }
.rd-anon { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--ink-muted); }
.rd-help { margin: calc(var(--space-4) * -1) 0 var(--space-3); font-size: var(--text-sm); color: var(--ink-muted); }
.rd-chars { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--ink-muted); text-align: right; font-variant-numeric: tabular-nums; }
.rd-words { min-height: 0; resize: none; overflow: hidden; }
.rd-continue { margin-top: var(--space-5); }
.rd-actions, .rd-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin-top: var(--space-4); }
.rd-links { margin-top: var(--space-2); }

/* The scale: two rows of five, one row of ten when the card is wide enough */
.reading .scale { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.reading .scale-ends { max-width: none; }
@container (min-width: 520px) {
    .reading .scale { grid-template-columns: repeat(10, minmax(44px, 52px)); }
    .reading .scale-ends { max-width: calc(52px * 10 + var(--space-2) * 9); }
    .reading .scale-btn { aspect-ratio: 1; }
}
/* Answer grids follow the card, not the screen */
.reading .options-2, .reading .options-3 { grid-template-columns: 1fr; }
@container (min-width: 480px) { .reading .options-2 { grid-template-columns: 1fr 1fr; } }
@container (min-width: 540px) { .reading .options-3 { grid-template-columns: repeat(3, 1fr); } }

/* ── Result ── */
.rd-result > * + * { margin-top: var(--space-4); }
.rd-result-title { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-text); outline: none; }
.rd-quote { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); line-height: 1.3; color: var(--ink); }
.rd-score { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--ink-muted); }
.rd-band { color: var(--ink-muted); }
.rd-result .eyebrow { margin: var(--space-6) 0 0; }
.rd-result .eyebrow + p { margin-top: var(--space-2); }
.rd-door {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    margin-top: var(--space-6) !important;
    padding: var(--space-5);
    border-radius: var(--radius);
    background: var(--surface-2);
}
.rd-lead { flex-basis: 100%; }
.rd-inline { display: flex; flex-wrap: wrap; gap: var(--space-3); flex: 1 1 100%; }
.rd-inline .field-input { flex: 1 1 220px; }
.rd-rule { border: 0; border-top: 1px solid var(--line); margin: var(--space-7) 0 var(--space-5) !important; }
.rd-personal { display: grid; gap: var(--space-4); }
.rd-personal-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; line-height: 1.15; }
.rd-personal .btn { justify-self: start; }
.rd-pair { display: grid; gap: var(--space-4); }
@container (min-width: 480px) { .rd-pair { grid-template-columns: 1fr 1fr; } }
.rd-done { outline: none; }
.rd-done p + p { margin-top: var(--space-2); }
.rd-sign { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); color: var(--accent-text); }
.rd-foot { margin-top: var(--space-6) !important; }

/* Compact block with a stored reading */
.rd-summary > * + * { margin-top: var(--space-4); }
.rd-last { font-family: var(--font-display); font-size: var(--text-lg); }
.rd-summary .rd-door { background: none; padding: 0; }

@media (prefers-reduced-motion: reduce) {
    .rd-view, .rd-step { transition: none !important; }
    .rd-step.rd-enter { opacity: 1; transform: none; }
}
/* The card is always light, also when it sits on a dark photo (homepage): light-page orange and focus ring inside it */
.reading { --accent-text: var(--accent-ink); --focus-ring: var(--accent-ink); }