/* ===========================================================================
   Readiness · app layout
   ---------------------------------------------------------------------------
   Layout and composition only. Every colour, size, radius and duration comes
   from a SEMANTIC token in docs/tokens.css. If something here needs a raw
   value, the system is missing a semantic and should gain one.
   =========================================================================== */

html, body { margin: 0; padding: 0; min-height: 100%; }
body { background: var(--rd-bg); }

/* A class that sets display beats the [hidden] attribute, which is how an
   empty card ends up painted. Make hidden win everywhere. */
[hidden] { display: none !important; }

/* Desktop is the mobile column, centred. There is no desktop-specific layout. */
.app-screen { justify-content: space-between; gap: var(--rd-space-5); }

/* ---------- landing ---------- */
.app-land__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--rd-space-3); padding-top: var(--rd-space-2);
}
.app-logo { width: 30px; height: 30px; flex: none; object-fit: contain; }

/* Language and appearance are two separate segmented groups. They wrap rather
   than shrink: at 390px both fit on one line, but a longer localised label must
   push to a second row instead of squeezing chips below the 48px hit target. */
.app-controls {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: var(--rd-space-2) var(--rd-space-4);
}
.app-lang { display: flex; gap: var(--rd-space-2); }

/* ---------- theme toggle ----------
   One control, two states. The knob takes --rd-text and the icon takes
   --rd-bg, so the pair inverts with the theme for free: a dark knob on a light
   track, a light knob on a dark one. Both are semantics, so nothing here needs
   a second definition for dark. */
.app-theme {
  display: flex; align-items: center;
  min-height: var(--rd-target-min);   /* the visual track is 30px; the target is not */
  padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.app-theme__track {
  position: relative; display: block;
  width: 56px; height: 30px;
  border-radius: var(--rd-radius-pill);
  background: var(--rd-track);
  border: 1px solid var(--rd-line);
  transition: background var(--rd-dur-tap) var(--rd-ease-tap),
              border-color var(--rd-dur-tap) var(--rd-ease-tap);
}
.app-theme__knob {
  position: absolute; top: 2px; left: 2px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--rd-text);
  display: grid; place-items: center;
  transition: transform var(--rd-dur-move) var(--rd-ease-move),
              background var(--rd-dur-tap) var(--rd-ease-tap);
}
[data-theme="dark"] .app-theme__knob { transform: translateX(26px); }

.app-theme__icon {
  width: 15px; height: 15px;
  fill: none; stroke: var(--rd-bg);
  stroke-width: 1.9; stroke-linecap: round;
}
.app-theme__icon--moon { fill: var(--rd-bg); stroke: none; }

/* The knob shows the mode you are in, not the one you would switch to. The
   moving knob already carries the "this is a switch" meaning. */
.app-theme__icon--moon { display: none; }
[data-theme="dark"] .app-theme__icon--sun { display: none; }
[data-theme="dark"] .app-theme__icon--moon { display: block; }

.app-theme:focus-visible .app-theme__track {
  outline: 2px solid var(--rd-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .app-theme__knob { transition: none; }
}

.app-land__body {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: var(--rd-space-3); padding: var(--rd-space-5) 0;
}
.app-land__body .rd-display { margin-bottom: var(--rd-space-1); }

.app-points { list-style: none; margin: var(--rd-space-3) 0 0; padding: 0;
              display: flex; flex-direction: column; gap: var(--rd-space-3); }
.app-points li { display: flex; align-items: center; gap: var(--rd-space-3);
                 font-size: var(--rd-text-label); color: var(--rd-text-secondary); }
.app-points li::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--rd-accent);
}

.app-previous { display: flex; flex-direction: column; gap: var(--rd-space-1); }

.app-land__foot { display: flex; flex-direction: column; gap: var(--rd-space-3); }
.app-center { text-align: center; }

/* ---------- quiz ---------- */
.app-quiz__top { display: flex; flex-direction: column; gap: var(--rd-space-3);
                 padding-top: var(--rd-space-2); }
.app-quiz__meta { display: flex; align-items: center; justify-content: space-between;
                  gap: var(--rd-space-3); }

.app-quiz__body { flex: 1; display: flex; flex-direction: column;
                  gap: var(--rd-space-4); padding: var(--rd-space-4) 0; }
.app-quiz__foot { padding-bottom: var(--rd-space-2); }

/* The option row is a real button; the mark carries the shape half of the
   state, so nothing depends on colour alone. */
.rd-option__mark svg { display: block; }

/* ---------- results ---------- */
.app-results { display: flex; flex-direction: column; min-height: 100vh; }

.app-results__headinner {
  max-width: var(--rd-desktop-col); margin: 0 auto;
  padding: var(--rd-space-7) 0 var(--rd-space-6);
  display: flex; flex-direction: column; align-items: center; gap: var(--rd-space-4);
}
.app-emblem { width: var(--rd-emblem-result); height: var(--rd-emblem-result);
              object-fit: contain; }
.app-ready { color: inherit; opacity: 0.7; }

.app-results__body { min-height: 0; gap: var(--rd-space-4);
                     padding-top: var(--rd-space-5); padding-bottom: var(--rd-space-7); }

.app-gaps { display: flex; flex-direction: column; gap: var(--rd-space-3); }
.app-gap { display: flex; align-items: center; justify-content: space-between;
           gap: var(--rd-space-3); font-size: var(--rd-text-label); }
.app-gap__name { color: var(--rd-text); }
.app-gap__score { font-family: var(--rd-font-mono); font-size: var(--rd-text-meta);
                  color: var(--rd-text-muted); }

.app-actions { display: flex; flex-direction: column; gap: var(--rd-space-2); }
.app-tiers { display: flex; flex-direction: column; gap: var(--rd-space-2); }
.app-content-note { text-wrap: pretty; line-height: 1.5; }

/* ---------- toast ---------- */
.app-toast-slot {
  position: fixed; top: var(--rd-space-3); left: 50%; transform: translateX(-50%);
  z-index: 40; width: min(calc(100% - var(--rd-space-6)), var(--rd-desktop-col));
  pointer-events: none;
}
.app-toast-slot .rd-toast { box-shadow: var(--rd-raise); }

/* ---------- share badge composition target ----------
   Real 1080, positioned off-viewport rather than scaled: scaling would change
   text metrics and the raster would stop matching the reference renders. */
#badge-stage {
  position: fixed; left: -20000px; top: 0;
  width: var(--rd-badge-size); height: var(--rd-badge-size);
  pointer-events: none;
}

/* ---------- motion ----------
   The ring is the only celebration in the product. Everything else is
   feedback. Under reduced motion all of it resolves instantly. */
.app-screen[hidden], .app-results[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rd-ring__fill { transition: none; }
}