/* ===========================================================================
   Readiness · components
   Requires tokens.css. Reference SEMANTIC tokens only.
   Naming: .rd-<block>__<element> --<modifier>
   =========================================================================== */

/* ---------- base ---------- */
.rd-app {
  font-family: var(--rd-font-text);
  font-weight: var(--rd-weight-regular);
  color: var(--rd-text);
  background: var(--rd-bg);
  -webkit-font-smoothing: antialiased;
}
.rd-app *, .rd-app *::before, .rd-app *::after { box-sizing: border-box; }

.rd-screen {
  width: 100%;
  max-width: var(--rd-desktop-col);
  min-height: 100vh;
  margin: 0 auto;
  padding: var(--rd-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-3);
}

/* Focus is never removed. */
.rd-app :focus-visible {
  outline: 2px solid var(--rd-focus-ring);
  outline-offset: 2px;
}

/* ---------- type ---------- */
.rd-display   { font-family: var(--rd-font-display); font-weight: var(--rd-weight-display); font-size: var(--rd-text-display); line-height: var(--rd-lh-display); letter-spacing: var(--rd-ls-display); margin: 0; }
.rd-archetype { font-family: var(--rd-font-display); font-weight: var(--rd-weight-display); font-size: var(--rd-text-archetype); line-height: var(--rd-lh-archetype); letter-spacing: var(--rd-ls-archetype); margin: 0; }
.rd-score-num { font-family: var(--rd-font-display); font-weight: var(--rd-weight-display); font-size: var(--rd-text-score); line-height: var(--rd-lh-score); letter-spacing: var(--rd-ls-score); }
.rd-question  { font-size: var(--rd-text-question); line-height: var(--rd-lh-question); font-weight: var(--rd-weight-regular); text-wrap: pretty; margin: 0; }
.rd-body      { font-size: var(--rd-text-body); line-height: var(--rd-lh-body); font-weight: var(--rd-weight-light); color: var(--rd-text-secondary); margin: 0; }
.rd-explain   { font-size: var(--rd-text-explain); line-height: var(--rd-lh-explain); font-weight: var(--rd-weight-light); color: var(--rd-text-secondary); margin: 0; }
.rd-label     { font-size: var(--rd-text-label); font-weight: var(--rd-weight-medium); }
.rd-eyebrow   { font-family: var(--rd-font-mono); font-size: var(--rd-text-eyebrow); letter-spacing: var(--rd-ls-eyebrow); text-transform: uppercase; color: var(--rd-text-muted); }
/* Secondary, not muted. At 11px the citation is small text, so it needs the
   4.5:1 floor in §10 — muted cleared only ~3.7:1 on every reveal panel in both
   themes. It is also the line carrying the whole trust argument, which makes it
   the wrong thing to have been the least readable text on the panel. */
.rd-source    { font-family: var(--rd-font-mono); font-size: var(--rd-text-source); color: var(--rd-text-secondary); }

/* ---------- surfaces ---------- */
.rd-card {
  background: var(--rd-surface);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-md);
  padding: var(--rd-space-4);
}
.rd-card--raised { border-radius: var(--rd-radius-lg); box-shadow: var(--rd-raise); }
.rd-card--tint   { background: var(--rd-accent-tint-soft); border-color: var(--rd-accent-tint); }
.rd-card--sunken { background: var(--rd-surface-sunken); border-color: transparent; }
.rd-card--invert { background: var(--rd-invert-bg); border-color: transparent; color: var(--rd-on-invert); box-shadow: none; }
.rd-card--invert .rd-explain, .rd-card--invert .rd-body { color: var(--rd-on-invert-muted); }

/* ---------- buttons ---------- */
.rd-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: var(--rd-target-cta);
  padding: 0 var(--rd-space-4);
  border: 1px solid transparent;
  border-radius: var(--rd-radius-md);
  font-family: var(--rd-font-text);
  font-size: 18px; font-weight: var(--rd-weight-medium);
  cursor: pointer;
  transition: background var(--rd-dur-tap) var(--rd-ease-tap),
              border-color var(--rd-dur-tap) var(--rd-ease-tap),
              transform var(--rd-dur-tap) var(--rd-ease-tap);
}
.rd-btn:active:not(:disabled) { transform: translateY(var(--rd-press-shift)); }

.rd-btn--primary   { background: var(--rd-accent-strong); color: var(--rd-on-accent); }
.rd-btn--primary:hover:not(:disabled)   { background: var(--rd-accent-hover); }
.rd-btn--action    { background: var(--rd-accent); color: var(--rd-on-accent); }
.rd-btn--action:hover:not(:disabled)    { background: var(--rd-accent-hover); }
.rd-btn--secondary { background: var(--rd-surface); color: var(--rd-text); border-color: var(--rd-line); min-height: var(--rd-target-min); font-size: 16px; }
.rd-btn--secondary:hover:not(:disabled) { border-color: var(--rd-text); }
.rd-btn:disabled, .rd-btn[aria-disabled="true"] { background: var(--rd-surface-disabled); color: var(--rd-text-disabled); cursor: default; transform: none; }

/* ---------- option row ---------- */
.rd-options { display: flex; flex-direction: column; gap: var(--rd-space-2); }

.rd-option {
  display: flex; align-items: center; gap: var(--rd-space-3);
  width: 100%; min-height: var(--rd-target-cta);
  padding: var(--rd-space-3) var(--rd-space-4);
  background: var(--rd-surface);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-md);
  font-family: var(--rd-font-text);
  font-size: var(--rd-text-option); font-weight: var(--rd-weight-regular);
  color: var(--rd-text);
  text-align: left; cursor: pointer;
  transition: background var(--rd-dur-tap) var(--rd-ease-tap),
              border-color var(--rd-dur-tap) var(--rd-ease-tap),
              color var(--rd-dur-tap) var(--rd-ease-tap);
}
.rd-option:hover { border-color: var(--rd-accent-tint); }

.rd-option__mark {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  border: 1.5px solid var(--rd-line-control);
}

/* selected, awaiting reveal: violet, because it is progress not verdict */
.rd-option--selected { border-width: 1.5px; border-color: var(--rd-ai); background: var(--rd-ai-tint); color: var(--rd-ai-ink); }
.rd-option--selected .rd-option__mark { background: var(--rd-ai); border-color: var(--rd-ai); }

.rd-option--correct { border-width: 1.5px; border-color: var(--rd-correct); background: var(--rd-correct-tint); color: var(--rd-correct-ink); }
.rd-option--correct .rd-option__mark { background: var(--rd-correct); border-color: var(--rd-correct); color: var(--rd-on-accent); }

/* NEVER an X, never a shake: the border thickens and the label says it */
.rd-option--incorrect { border-width: 1.5px; border-color: var(--rd-incorrect-border); background: var(--rd-incorrect-tint); color: var(--rd-incorrect-ink); }
.rd-option--incorrect .rd-option__mark { border-color: var(--rd-incorrect); }

.rd-option--dimmed { color: var(--rd-text-disabled); }
.rd-option--dimmed .rd-option__mark { border-color: var(--rd-line); }

/* ---------- reveal panel ---------- */
.rd-reveal {
  background: var(--rd-accent-tint-soft);
  border: 1px solid var(--rd-accent-tint);
  border-radius: var(--rd-radius-md);
  padding: var(--rd-space-3);
  animation: rd-rise var(--rd-dur-move) var(--rd-ease-move);
}
.rd-reveal--incorrect { background: var(--rd-incorrect-tint-soft); border-color: var(--rd-incorrect-line); }
.rd-reveal__verdict { display: flex; align-items: center; gap: var(--rd-space-2); margin-bottom: 10px; font-family: var(--rd-font-display); font-size: 17px; font-weight: 600; color: var(--rd-correct-ink); }
.rd-reveal--incorrect .rd-reveal__verdict { color: var(--rd-incorrect-ink); }
.rd-reveal__icon { flex: none; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; background: var(--rd-correct); color: var(--rd-on-accent); }
.rd-reveal--incorrect .rd-reveal__icon { background: var(--rd-incorrect); }
.rd-reveal__source { display: flex; align-items: center; gap: var(--rd-space-2); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rd-line-hairline); }
.rd-reveal__source::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--rd-text-muted); }

/* ---------- AI summary (violet is allowed here and nowhere near verdicts) --- */
.rd-ai-block { background: var(--rd-ai-tint); border: 1px solid var(--rd-ai-line); border-radius: var(--rd-radius-md); padding: var(--rd-space-3); }
.rd-ai-block__label { display: flex; align-items: center; gap: var(--rd-space-2); margin-bottom: 10px; font-family: var(--rd-font-mono); font-size: var(--rd-text-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rd-ai-ink); }
.rd-ai-block__label::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 6px; background: var(--rd-ai); }
/* When the AI call fails, drop the label with the text. Never claim
   personalisation you did not deliver. */

/* ---------- progress & timer ---------- */
.rd-progress { height: 8px; background: var(--rd-track); border-radius: var(--rd-radius-pill); overflow: hidden; }
.rd-progress__fill { height: 100%; background: var(--rd-accent); border-radius: var(--rd-radius-pill); transition: width var(--rd-dur-move) var(--rd-ease-move); }

.rd-dots { display: flex; gap: var(--rd-space-1); }
.rd-dots__dot { width: 26px; height: 5px; border-radius: var(--rd-radius-pill); background: var(--rd-track); }
.rd-dots__dot--right { background: var(--rd-accent); }
.rd-dots__dot--wrong { background: var(--rd-warn); }

.rd-timer {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 2.5px solid var(--rd-accent); border-right-color: var(--rd-track);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--rd-font-display); font-weight: 600; font-size: 13px;
}
.rd-timer--low { border-color: var(--rd-warn); border-right-color: var(--rd-track); }
/* Soft timer: expiry reveals the answer. No penalty, no lost points. */

/* ---------- score ring ---------- */
.rd-ring { position: relative; width: 110px; height: 110px; }
.rd-ring__svg { transform: rotate(-90deg); }
.rd-ring__track { fill: none; stroke: rgba(255,255,255,0.18); stroke-width: 8; }
.rd-ring__fill  { fill: none; stroke: var(--rd-tier-ring); stroke-width: 8; stroke-linecap: round;
                  stroke-dasharray: 302; transition: stroke-dashoffset var(--rd-dur-ring) var(--rd-ease-move), stroke 400ms ease-out; }
.rd-ring__label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--rd-on-invert); }
/* r=48 → circumference 302. stroke-dashoffset = 302 - 302 * score/100 */

/* ---------- results header (the one full-bleed moment) ---------- */
.rd-results-head { background: var(--rd-tier-bleed); padding: 0 var(--rd-gutter); color: #FFFFFF; transition: background 400ms ease-out; }
.rd-results-head__sub { font-size: var(--rd-text-label); line-height: 1.45; font-weight: var(--rd-weight-light); color: rgba(255,255,255,0.72); text-align: center; max-width: 300px; text-wrap: pretty; }

/* ---------- chips, tier badges, field ---------- */
.rd-chip { display: inline-flex; align-items: center; padding: 9px var(--rd-space-4); border-radius: var(--rd-radius-pill); background: var(--rd-surface); border: 1px solid var(--rd-line); font-size: var(--rd-text-label); font-weight: var(--rd-weight-medium); color: var(--rd-text-secondary); transition: border-color var(--rd-dur-tap) var(--rd-ease-tap); }
.rd-chip:hover { border-color: var(--rd-text); }
.rd-chip--active { background: var(--rd-accent-strong); border-color: var(--rd-accent-strong); color: var(--rd-on-accent); }
.rd-chip--eyebrow { font-family: var(--rd-font-mono); font-size: var(--rd-text-source); letter-spacing: 0.1em; text-transform: uppercase; background: var(--rd-accent-tint); border-color: transparent; color: var(--rd-on-accent-tint); padding: 6px 11px; }

.rd-tier { display: flex; align-items: center; justify-content: space-between; gap: var(--rd-space-3); padding: var(--rd-space-3) var(--rd-space-4); border-radius: 14px; background: var(--rd-tier-tint); }
.rd-tier__name { font-family: var(--rd-font-display); font-size: 17px; font-weight: 600; color: var(--rd-tier-ink); }
.rd-tier__range { font-family: var(--rd-font-mono); font-size: 12px; color: var(--rd-tier-ink); opacity: 0.8; }

.rd-field { width: 100%; min-height: var(--rd-target-cta); padding: var(--rd-space-3) var(--rd-space-4); background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: 14px; font-family: var(--rd-font-text); font-size: var(--rd-text-option); color: var(--rd-text); }
.rd-field:focus { border-color: var(--rd-accent); outline: 2px solid var(--rd-accent-tint); outline-offset: 0; }
.rd-field-error { display: flex; align-items: center; gap: var(--rd-space-2); margin-top: var(--rd-space-2); font-size: var(--rd-text-meta); color: var(--rd-incorrect-ink); }
.rd-field-error::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--rd-incorrect); }

/* ---------- toasts ---------- */
.rd-toast { display: flex; align-items: center; gap: 10px; padding: 13px var(--rd-space-4); border-radius: 14px; font-size: var(--rd-text-label); animation: rd-toast-in var(--rd-dur-move) var(--rd-ease-move); }
.rd-toast::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.rd-toast--info    { background: var(--rd-warn-tint); color: var(--rd-warn-ink); }
.rd-toast--info::before    { background: var(--rd-warn); }
.rd-toast--success { background: var(--rd-correct-tint); color: var(--rd-correct-ink); }
.rd-toast--success::before { background: var(--rd-correct); }
.rd-toast--error   { background: var(--rd-incorrect-tint); color: var(--rd-incorrect-ink); }
.rd-toast--error::before   { background: var(--rd-incorrect); }
/* One at a time, under the header, auto-dismiss at --rd-dur-toast.
   Every error names the alternative action, not the failure. */

/* ---------- skeleton (never a spinner) ---------- */
.rd-skeleton { display: flex; flex-direction: column; gap: 9px; background: var(--rd-surface-sunken); border-radius: var(--rd-radius-md); padding: var(--rd-space-4); }
.rd-skeleton__line { height: 11px; border-radius: var(--rd-radius-pill); background: var(--rd-track); animation: rd-skeleton 1400ms ease-in-out infinite; }
.rd-skeleton__line:nth-child(2) { animation-delay: 120ms; }
.rd-skeleton__line:nth-child(3) { animation-delay: 240ms; }
.rd-skeleton__line:nth-child(4) { animation-delay: 360ms; }
/* Shape the lines to match the block they become, so nothing jumps on arrival.
   Max wait 4s, then swap to the static tier summary. */

/* ---------- icons ----------
   Five shapes, nothing else: ring, dot, check, bar, arrow. Authored on a
   24px grid. Ring, check and arrow are stroked; dot and bar are filled.
   Colour comes from currentColor, so an icon follows its parent's state. */
.rd-icon { width: var(--rd-icon-grid); height: var(--rd-icon-grid); flex: none;
           fill: none; stroke: currentColor; stroke-width: var(--rd-icon-stroke);
           stroke-linecap: var(--rd-icon-cap); stroke-linejoin: var(--rd-icon-join); }
.rd-icon--filled { stroke: none; fill: currentColor; }
/* Reversed out of a filled 20-22px circle (option dot, verdict dot): the
   authored 1.75 scales to a hairline, so step the stroke up. */
.rd-icon--tight { width: var(--rd-icon-size-sm); height: var(--rd-icon-size-sm);
                  stroke-width: var(--rd-icon-stroke-tight); }

/* ---------- logo ----------
   The mark stands alone. No chip, no container, no wordmark, no tagline. */
.rd-logo { width: var(--rd-logo-badge); height: var(--rd-logo-badge); flex: none;
           object-fit: contain; min-width: var(--rd-logo-min); }

/* ---------- share badge ---------- */
.rd-badge { aspect-ratio: 1; padding: 30px; background: var(--rd-tier-bleed); color: #FFFFFF; display: flex; flex-direction: column; }
.rd-badge__mark { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--rd-space-3); }
.rd-badge__body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.rd-badge__score { font-family: var(--rd-font-display); font-size: 104px; font-weight: var(--rd-weight-display); line-height: 0.86; letter-spacing: -0.05em; }
/* The score is a percentage. Question count is not fixed, so never a denominator. */
.rd-badge__unit { font-family: var(--rd-font-display); font-size: var(--rd-text-score-unit); font-weight: var(--rd-weight-display); line-height: 1; letter-spacing: -0.03em; color: rgba(255,255,255,0.45); }
.rd-badge__archetype { font-family: var(--rd-font-display); font-size: 36px; font-weight: var(--rd-weight-display); letter-spacing: -0.025em; line-height: 1.05; color: var(--rd-tier-ring); }
.rd-badge__hook { font-size: 17px; line-height: 1.4; font-weight: var(--rd-weight-light); color: rgba(255,255,255,0.78); max-width: 300px; text-wrap: pretty; }
.rd-badge__foot { display: flex; align-items: center; justify-content: space-between; padding-top: var(--rd-space-4); border-top: 1px solid rgba(255,255,255,0.14); font-size: var(--rd-text-label); font-weight: var(--rd-weight-light); color: rgba(255,255,255,0.55); }
.rd-badge__emblem { flex: none; width: var(--rd-emblem-badge); height: var(--rd-emblem-badge); object-fit: contain; }
.rd-badge--story { aspect-ratio: 9 / 16; padding: 240px 30px; }
.rd-badge--link  { aspect-ratio: 1200 / 630; }

/* ---------- motion ---------- */
@keyframes rd-rise      { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rd-toast-in  { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rd-skeleton  { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.9; } }
@keyframes rd-fade-swap { 0% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 1; } }
/* Banned: confetti, shake-on-wrong, streak flames, countdown urgency, sound,
   page slides, parallax, looping loaders. */

@media (prefers-reduced-motion: reduce) {
  .rd-app *, .rd-app *::before, .rd-app *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}