/* results.css: completion + locked score — extracted from test.html and reskinned to the staging brand (crimson/navy/Poppins).
   Component library / page styles. Loaded via app.css. */



  /* ===================== COMPLETE ===================== */
  .done-wrap{min-height:100vh;display:grid;place-items:center;padding:40px 20px;background:radial-gradient(900px 520px at 50% -8%, var(--rose-mist), transparent 62%), var(--paper)}

  /* min-width:0 — grid items refuse to shrink below their children's min-content width otherwise,
     which pushed this card past a 320px viewport. */
  .done-wrap .done{width:min(640px,100%);min-width:0;overflow-wrap:break-word;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:30px 34px}

  /* The unlock offer now lives inside the locked-score card: one section, one call to action. */
  .unlockbox{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);text-align:left}

  .unlock-h{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--burgundy);margin-bottom:10px}

  /* Administrative stats, collapsed by default. */
  .summary{margin-top:18px;text-align:left;border:1px solid var(--line);border-radius:16px;padding:10px 14px}

  .summary summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--burgundy);list-style:none;padding:4px 0;min-height:24px}

  .summary summary::-webkit-details-marker{display:none}

  .summary summary::before{content:"▸ "}

  .summary[open] summary::before{content:"▾ "}

  .summary .recap{margin-top:12px}

  .rtile{min-width:0}

  .done-wrap .done .seal{width:58px;height:58px;margin:0 auto 2px;border-radius:50%;background:var(--rose-mist);border:1px solid var(--line);display:grid;place-items:center}

  .done-wrap .done .seal svg{width:26px;height:26px}

  /* "We couldn't hear you" — the honest ending. Deliberately shares the results chrome so it doesn't
     read as a crash, but carries no band, no timing and no parts count, because nothing happened.
     It must NOT inherit the results page's two-column grid (media.css, which exists to keep the real
     results within Dan's 1.5-screen rule) — there is nothing here to put in a second column. The
     section selector out-specifies that rule, so the results layout is left untouched. */
  section[data-screen="unheard"] .done-wrap .done{display:block;width:min(560px,100%)}

  .ending-line,.ending-sub{display:none}

  section[data-screen="complete"].is-ending .done-wrap .done{display:block;width:min(560px,100%)}

  section[data-screen="complete"].is-ending .done>:not(h3):not(.ending-line):not(.ending-sub){display:none}

  section[data-screen="complete"].is-ending .ending-sub{display:block;margin-top:8px;font-size:13px;color:var(--muted);text-align:center}

  .ending-sub b{font-variant-numeric:tabular-nums;color:var(--ink)}

  section[data-screen="complete"].is-ending .ending-line{display:flex;align-items:center;justify-content:center;gap:10px}

  .ending-spin{width:18px;height:18px;flex:none;border-radius:50%;border:2px solid var(--line);border-top-color:var(--burgundy);animation:spin .8s linear infinite}

  @media (prefers-reduced-motion:reduce){.ending-spin{border-color:var(--burgundy);animation:softpulse 1.6s ease-in-out infinite !important;animation-duration:1.6s !important;animation-iteration-count:infinite !important}}

  .done-wrap .done .seal-warn{background:#FEF3C7;border-color:#FCD34D}

  .done-wrap .done .seal-warn svg rect,.done-wrap .done .seal-warn svg path{stroke:#B45309}

  .unheard-lede{color:var(--muted);font-size:14.5px;line-height:1.6;margin:8px auto 16px;max-width:46ch}

  .unheard-tips{text-align:left;margin:0 auto 20px;padding:14px 16px 14px 32px;max-width:46ch;border:1px solid var(--line);border-radius:12px;background:var(--rose-mist);list-style:disc}

  .unheard-tips li{font-size:13.5px;line-height:1.5;color:var(--ink,#0F172A);margin-top:6px}

  .unheard-tips li:first-child{margin-top:0}

  .done-wrap .done .kicker{display:inline-block;margin-top:16px}

  .done-wrap .done h3{font-family:var(--display);font-weight:600;font-size:30px;margin:10px 0 0}

  .done-wrap .done p{color:var(--muted);font-size:15px;line-height:1.6;max-width:400px;margin:12px auto 0}

  .ladder{display:grid;gap:14px;margin-top:22px;text-align:left}

  .lcard{border:1px solid var(--line);border-radius:16px;padding:18px}

  .lcard.prem{border-color:var(--rose);background:var(--rose-mist)}

  .lhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}

  .lhead b{font-weight:600;font-size:16px}

  .lbadge{font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--rose-soft);color:var(--burgundy);white-space:nowrap}

  .lbadge.dark{background:var(--burgundy);color:#fff}

  .lticks{display:grid;gap:8px}

  .lticks div{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.45}

  .lticks svg{flex:0 0 auto;margin-top:2px}

  .lnote{color:var(--muted);font-size:12px;line-height:1.5;margin:12px 0 0}

  /* min-width:0 — as a grid item this box would otherwise refuse to shrink below its children's
     min-content width, and it overflowed the viewport at 320px. Same for .done below. */
  /* overflow-wrap:break-word, NOT anywhere. "anywhere" also feeds min-content sizing, so a narrow
     grid track breaks perfectly ordinary words mid-letter ("headphone/s", "somewher/e"). break-word
     only breaks a word that genuinely cannot fit, which is all the 320px guard ever needed. */

  /* completion seal pop + celebratory ring burst */
  .done .seal{position:relative;animation:sealpop .55s cubic-bezier(.2,.9,.3,1.4) both}

  .done .seal::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--rose);opacity:0;animation:ringburst 1s ease-out .25s 2}


  /* recap stat tiles */
  .recap{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:24px}

  .rtile{border:1px solid var(--line);border-radius:14px;padding:14px 8px;background:var(--rose-mist)}

  .rtile .rv{display:block;font-family:var(--display);font-weight:600;font-size:22px;color:var(--burgundy);font-variant-numeric:tabular-nums}

  .rtile .rk{display:block;font-size:11px;color:var(--muted);margin-top:4px}

  /* test timeline */
  .tline{margin-top:18px;text-align:left;border:1px solid var(--line);border-radius:16px;padding:4px 18px}

  .tline-row{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}

  .tline-row:last-child{border-bottom:0}

  .tline-row .tdot{width:28px;height:28px;border-radius:50%;background:#E7F4EE;display:grid;place-items:center;flex:0 0 auto}

  .tline-row .tt b{display:block;font-weight:600;font-size:14px}

  .tline-row .tt span{font-size:13px;color:var(--muted)}

  /* locked results teaser */
  .lockwrap{margin-top:18px;border:1px solid var(--rose);border-radius:18px;padding:22px 22px 20px;background:linear-gradient(180deg,#ffffff,var(--rose-mist));text-align:left}

  .bandcard{text-align:center;margin-bottom:16px}

  .bandlabel{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--burgundy)}

  .bandval{display:inline-flex;align-items:center;gap:12px;margin-top:4px}

  .bandval .lockblur{font-family:var(--display);font-weight:700;font-size:50px;color:var(--burgundy);line-height:1}

  .lockblur{filter:blur(8px);user-select:none;pointer-events:none}

  .lockbadge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#fff;background:var(--ink);padding:6px 11px;border-radius:999px}

  .skills{display:grid;gap:11px}

  .skrow{display:grid;grid-template-columns:148px 1fr;align-items:center;gap:12px;font-size:13px}

  .skbar{height:8px;border-radius:999px;background:var(--rose-soft);overflow:hidden}

  .skbar i{display:block;height:100%;background:linear-gradient(90deg,var(--rose),var(--burgundy))}

  .bandscale{margin-top:18px}

  .bs-track{position:relative;height:8px;border-radius:999px;background:linear-gradient(90deg,#FBE3E7,var(--burgundy))}

  .bs-marker{position:absolute;left:66%;top:-8px;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--burgundy);color:var(--burgundy);display:grid;place-items:center}

  .bs-nums{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:7px}

  /* note from Daniel */
  /* email capture */
  .emailcap{margin-top:20px;text-align:left}

  .emailcap label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}

  .emailrow{display:flex;gap:8px}

  .emailrow input{flex:1;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font:inherit;font-size:14px;color:var(--ink)}

  .emailrow .btn{white-space:nowrap}

  .unlocknote{margin:10px 0 0;font-size:12px;color:var(--burgundy);font-weight:600;text-align:center}

  .unlocknote[hidden]{display:none}