/* design/site/result.css
 *
 * The full scan's result page, /result/<id> (the full scan build, 2026-10-20). The type page's result band, grown into a
 * page of its own: type.css carries the band's frame (.rs-panel, .rs-tab, .rs-top, .rv-code), the B3 bar (.ab, in
 * site.css) and the candidate cards (.cands); this adds the two types side by side, the parts under each total, the
 * reminder and the page's foot. On top of tokens.css, site/site.css and site/type.css.
 */

.rp-main { display: block; }
.rp-ground { background: linear-gradient(180deg, var(--tint-v-soft), var(--stone) 360px); padding: var(--space-24) var(--space-16) var(--space-48); }
.rp { max-width: 1040px; margin: 0 auto; }
.rp-wait, .rp-missing { margin: var(--space-48) auto; max-width: 52ch; text-align: center; font-family: var(--font-display); font-weight: 600; color: var(--ink-dim); }

/* the reminder: one quiet line above the frame, the address it is saved under */
.rp-remind { margin-bottom: var(--space-28); padding: var(--space-12) var(--space-20); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--sh-card); }
.rp-remind-p { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-small); line-height: 1.5; }
.rp-remind [hidden] { display: none; }
.rp-remind .quiet { margin-right: var(--space-12); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.rp-change-f { margin-top: var(--space-12); }
.rp-change-f .em-row { display: flex; flex-wrap: wrap; gap: var(--space-10); }
.rp-change-f .em-err { margin: var(--space-8) 0 0; }

/* the two types: the best fit on the band's dark top, the career so far beside it */
.rp-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
.rp-k { margin: 0 0 var(--space-10); font-family: var(--font-display); font-weight: 600; font-size: var(--text-small); color: var(--ink-dim); }
.rp-fit .rp-k { color: var(--stage-ink-dim, var(--stage-ink)); }
.rp-line { margin: var(--space-10) 0 0; max-width: 46ch; font-family: var(--font-display); font-weight: 500; font-size: var(--text-small); line-height: 1.45; color: var(--stage-ink); opacity: .85; }
.rp-fit .rv-code { margin-top: var(--space-20); }
.rp-now { display: grid; align-content: start; padding: var(--space-28) var(--space-24); background: var(--paper); border-radius: var(--r-lg); }
.rp-now-in { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-16); align-items: start; }
.rp-now-in[hidden], .rp-now-none[hidden] { display: none; }
.rp-now-sh { width: 88px; height: auto; filter: var(--drop-shield); }
.rp-now-h { margin: 0 0 var(--space-8); font-family: var(--font-display); font-weight: 800; font-size: var(--text-title); line-height: 1.15; letter-spacing: -0.02em; }
.rp-now-line { margin: var(--space-10) 0 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-small); line-height: 1.45; color: var(--ink-dim); }
.rp-now-none { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.5; color: var(--ink-dim); }
.rp-gap { margin: var(--space-24) 0 0; font-family: var(--font-display); font-weight: 700; font-size: var(--text-title); line-height: 1.3; letter-spacing: -0.015em; text-wrap: balance; }

/* the five aspects: the total as the band's bar, then its parts under it, then the words */
.rp-asp { margin-top: var(--space-56, var(--space-48)); }
.rp-asp > .h3 { margin: 0; }
.rp-lead { margin: var(--space-8) 0 var(--space-20); max-width: 62ch; color: var(--ink-dim); }
.rp-as { padding: 0 var(--space-28); background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--sh-card); }
.rp-a { padding-bottom: var(--space-24); border-bottom: var(--hair) solid var(--line); }
.rp-a:last-child { border-bottom: 0; }
.rp-a .ab { border: 0; padding-bottom: var(--space-12); }
.rp-parts { display: grid; gap: var(--space-8); margin: 0 auto; padding: 0; max-width: 640px; list-style: none; }
.rp-p { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 10rem; align-items: center; gap: var(--space-14); }
.rp-p[hidden] { display: none; }
.rp-pl { font-family: var(--font-display); font-weight: 600; font-size: var(--text-micro); color: var(--ink-dim); text-align: right; }
.rp-pt { position: relative; display: block; height: 8px; border-radius: var(--r-pill); background: var(--line); }
.rp-pf { position: absolute; top: 0; bottom: 0; left: var(--l, 50%); width: var(--w, 0%); border-radius: var(--r-pill); background: color-mix(in srgb, var(--c) 55%, var(--paper)); }
.rp-pm { position: absolute; top: 50%; left: var(--x, 50%); width: 14px; height: 14px; border: 3px solid var(--c); border-radius: var(--r-round); background: var(--paper); transform: translate(-50%, -50%); box-sizing: border-box; }
.rp-pw { font-family: var(--font-display); font-weight: 600; font-size: var(--text-micro); color: color-mix(in srgb, var(--c, var(--ink)) var(--word-mix), var(--ink)); }
/* the career so far, a separate reading, drawn as a band, not a point (the result page test drive, F11) */
.rp-p-now { margin-top: var(--space-6); padding-top: var(--space-10); border-top: var(--hair) dashed var(--line); }
.rp-p-now .rp-pf { background: transparent; }
.rp-p-now .rp-pm { left: clamp(7.5%, var(--x, 50%), 92.5%); width: 15%; height: 12px; border-width: 2px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c) 22%, var(--paper)); }
.rp-at { margin: var(--space-16) auto 0; max-width: 62ch; text-align: center; line-height: 1.55; }
.rp-more { margin: var(--space-8) 0 0; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: var(--text-small); }
.rp-more a { color: var(--ink); }

/* close to you: the band's candidate cards (type.css .rs-cands) */
.rp-close { margin-top: var(--space-48); }

/* both types in full, the closing premise, the foot */
.rp-types { margin-top: var(--space-48); padding: var(--space-36) var(--space-28); border-radius: var(--r-lg); background: var(--paper); text-align: center; }
.rp-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-12); }
.rp-links [hidden] { display: none; }
.rp-closing { margin: var(--space-28) auto 0; max-width: 34ch; font-family: var(--font-display); font-weight: 800; font-size: var(--text-headline); line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
.rp-acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-12); margin-top: var(--space-28); }
.rp-limits { margin: var(--space-20) auto 0; max-width: 62ch; text-align: center; font-size: var(--text-small); line-height: 1.5; color: var(--ink-dim); }
.rp-coming { max-width: 1040px; margin: 0 auto; padding: 0 var(--space-16) var(--space-48); }
body:has(.rp-ground) .foot { margin-top: 0; }

@media (max-width: 559.98px) {
  .rp-ground { padding: var(--space-16) var(--space-10) var(--space-36); }
  .rp-as { padding: 0 var(--space-14); }
  .rp-p { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4) var(--space-10); }
  .rp-pl { text-align: left; }
  .rp-pw { text-align: right; }
  .rp-pt { grid-column: 1 / -1; grid-row: 2; }
  .rp-now { padding: var(--space-20); }
  .rp-closing { font-size: var(--text-title); }
}