/* =============================================================================
   Quiz results — the read's hero, traits, pairings and tips
   -----------------------------------------------------------------------------
   Shared by the full read in the app (routes/(app)/results) and the teaser a
   signed-out visitor sees after a quiz on /try (routes/try/results). Moved
   here from the results page's own <style>, unchanged, scoped under
   .results so nothing else picks it up (same idea as checkin.css). Page-only
   parts (the keep-talking thread, the reveal and share overlays) stay in the
   page.
   ============================================================================= */

/* Full-width scroll container (inherits align-items:center from web.css);
   the content is capped + centered like the quiz/chat column. */
.results { padding: var(--space-32) var(--space-24) var(--space-64); gap: var(--space-24); }
/* flex-shrink:0 keeps each card at its natural height so the column scrolls
   instead of squeezing a card — without it the fixed-min-height hero would
   shrink and, being justify-content:flex-end, clip its top (name/eyebrow)
   on mobile. */
.results > * { width: 100%; max-width: 860px; flex-shrink: 0; }

/* Destination hero — the read lands as a moment: topic photo + dark wash,
   the archetype reveal in white over it. */
.results .results__top {
  position: relative; overflow: hidden;
  border-radius: var(--br-xl); box-shadow: var(--shadow-2);
  min-height: 280px; padding: 26px 34px var(--space-32);
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-16);
  color: #fff;
  background-color: #15201b; background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* Light, bottom-weighted scrim so the image fills the whole header (cover)
   and only the text area at the bottom carries enough wash for legibility. */
.results .results__top::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(8,16,34,.80) 0%, rgba(8,16,34,.34) 42%, rgba(8,16,34,.06) 78%, rgba(8,16,34,0) 100%); }
.results .results__top > * { position: relative; z-index: 2; }

.results .results__banner { position: absolute; top: 18px; left: 18px; z-index: 2; display: inline-flex; align-items: center; gap: var(--space-8); padding: 7px var(--space-16); border-radius: var(--br-full); background: rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(4px); font-weight: 600; font-size: var(--fz-s); letter-spacing: .04em; text-transform: uppercase; }

.results .results__hero { display: flex; gap: var(--space-16); align-items: center; }
.results .results__flame { width: 60px; height: 60px; flex: 0 0 auto; background: center/contain no-repeat; filter: drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
.results .results__copy { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.results .results__eyebrow { font-weight: 600; font-size: var(--fz-sm); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.9); text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.results .results__name { margin: 0; font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: 40px; letter-spacing: -.01em; line-height: 1.05; color: #fff; text-wrap: balance; text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.results .results__lede { margin: 0; max-width: 600px; font-size: var(--fz-m); line-height: 1.55; color: rgba(255,255,255,.92); text-shadow: 0 1px 10px rgba(0,0,0,.45); }

/* Traits */
.results .results__card { background: var(--bg-active); border: 1px solid var(--stroke-shine-highlight); border-radius: var(--br-xl); box-shadow: var(--shadow-1); padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-16); }
.results .results__empty { align-items: center; text-align: center; padding: var(--space-40) var(--space-24); margin: auto 0; }
.results .results__empty-badge { width: 64px; height: 64px; background: center / contain no-repeat; }
.results .results__empty h1 { margin: 0; font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: var(--fz-l); letter-spacing: -.01em; }
.results .results__empty p { margin: 0; max-width: 34ch; color: var(--text-secondary); font-size: var(--fz-sm); line-height: 1.5; }
.results .results__card h2 { margin: 0; font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: var(--fz-l); letter-spacing: -.01em; }
.results .traits { display: flex; flex-direction: column; gap: var(--space-16); }
.results .trait { display: grid; grid-template-columns: 140px 1fr 40px; align-items: center; gap: var(--space-16); }
.results .trait__name { font-weight: 600; font-size: var(--fz-sm); }
.results .trait__bar { height: 8px; border-radius: var(--br-full); background: var(--bg-tertiary); overflow: hidden; }
.results .trait__bar i { display: block; height: 100%; border-radius: var(--br-full); background: var(--bg-brand-primary); }
.results .trait__score { text-align: right; font-weight: 700; font-size: var(--fz-sm); color: var(--text-secondary); }

.results .results__two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20); }
@media (max-width: 720px) { .results .results__two { grid-template-columns: 1fr; } .results .trait { grid-template-columns: 110px 1fr 32px; } }

.results .pairings { display: flex; flex-direction: column; gap: var(--space-12); }
.results .pairing { display: flex; gap: var(--space-12); align-items: flex-start; padding: var(--space-12) var(--space-16); border-radius: var(--br-l); background: var(--bg-secondary); }
.results .pairing__name { font-family: var(--ff-display); font-weight: 700; font-size: var(--fz-m); }
.results .pairing__blurb { font-size: var(--fz-sm); line-height: 1.45; color: var(--text-secondary); }
.results .tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-12); }
.results .tips li { display: flex; gap: var(--space-8); align-items: flex-start; font-size: var(--fz-sm); line-height: 1.5; color: var(--text-primary); }
.results .tips .badge { flex: 0 0 auto; width: 22px; height: 22px; border-radius: var(--br-full); background: var(--bg-brand-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }

.results .results__cta { display: flex; gap: var(--space-12); flex-wrap: wrap; }

@media (max-width: 640px) {
  /* The hero content fills the card at this width, so the absolute "saved"
     banner would sit on top of the eyebrow — drop it into flow (top-aligned)
     so the pill, eyebrow, name and lede stack cleanly. */
  .results .results__top { justify-content: flex-start; }
  .results .results__banner { position: static; align-self: flex-start; }
}