/* ==========================================================================
   result-kit.css: legacy result styles shared by Reveal and Report

   The verdict card, crew cards, portrait plates, discovery banner and
   the two-stage result layout.

   Lifted verbatim from the old <style> block in public/index.html (7174b7e).
   Legacy class names and the legacy token aliases (--bg, --card, --accent...,
   mapped onto Eli's tokens in public/ds/tokens.css). A page builder who
   rebuilds this page deletes what they no longer use.
   ========================================================================== */

/* ---------- results ---------- */
.scorewrap { text-align:center; padding:12px 0 4px; }
.score { font:700 76px/1 var(--mono); letter-spacing:-.05em; }
.score small { font-size:22px; color:var(--dim); letter-spacing:0; }
.band { font:600 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
        color:var(--accent); margin-top:6px; }
.headline { font-size:19px; line-height:1.35; text-align:center; margin:12px 0 22px;
            letter-spacing:-.01em; }
.rp { border:1px solid var(--line); border-radius:13px; background:var(--card);
      padding:13px; margin-bottom:10px; box-shadow:var(--shadow); }
.rp.invalid { border-style:dashed; background:transparent; box-shadow:none; }
.rp.cheese { border-color:var(--gold); }
.rp.first { border-color:var(--gold); background:linear-gradient(180deg, var(--gold-soft), var(--card) 70%); }
.rp-top { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.rp-role { font:600 10px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--dim); }
/* The verdict is a WORD, not a number. Every number on this screen lives in the
   one collapsed drawer at the bottom. */
.verdict { font:700 10px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase;
           white-space:nowrap; }
.up { color:var(--good); } .down { color:var(--bad); } .flat { color:var(--dim); }
/* ---- the portrait plate (src/images.js) ------------------------------------
   A face, or a monogram that is designed rather than missing. 45% of the corpus
   has no free-licensed image and a board is expected to mix the two, so the
   monogram is the PRIMARY state here and is styled like one.
   The plate is fixed-size and reserves its own box before the bytes land, so a
   photograph arriving late never reflows the card under a reading thumb. */
.rp-head { display:flex; gap:11px; align-items:flex-start; }
.rp-head > .rp-body { flex:1 1 auto; min-width:0; }
.plate { flex:0 0 auto; width:56px; height:56px; border-radius:9px; overflow:hidden;
         position:relative; background:var(--card-2,var(--line-1)); }
.plate img { width:100%; height:100%; object-fit:cover; display:block; }
.plate .mono { width:100%; height:100%; display:flex; align-items:center;
               justify-content:center; font:700 21px/1 var(--mono);
               letter-spacing:.02em; color:#fff; }
/* The caption is the difference between "oh, that one" and "why am I looking at
   a stranger in a suit" — a portrayal is an actor, not the character. */
.credits { margin-top:14px; padding-top:11px; border-top:1px solid var(--line-1); }
.credits-k { font:600 9.5px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase;
             color:var(--dim); margin-bottom:6px; }
.credit { font-size:11.5px; color:var(--dim); line-height:1.5; }
.credit a { color:var(--dim); text-decoration:underline; text-underline-offset:2px; }
.plate-cap { font:600 8.5px/1.25 var(--mono); letter-spacing:.06em;
             text-transform:uppercase; color:var(--dim); margin-top:4px;
             text-align:center; max-width:56px; }
.rp-name { font-weight:680; font-size:19px; letter-spacing:-.015em; margin:5px 0 1px; }
.rp-read { font-size:12.5px; color:var(--accent); margin:2px 0 4px; }
.rp-desc { color:var(--dim); font-size:13.5px; margin:4px 0 8px; }
.badges { display:flex; flex-wrap:wrap; gap:5px; margin:7px 0 9px; }
.badge { font:700 9.5px/1 var(--mono); letter-spacing:.11em; text-transform:uppercase;
         padding:5px 7px; border-radius:5px; }
.badge.mvp { background:var(--good); color:var(--bg); }
.badge.bust { background:var(--bad); color:var(--bg); }
.badge.gold { background:var(--gold); color:var(--bg); }
.badge.quiet { background:var(--sunk); color:var(--dim); border:1px solid var(--line); }
.fit { font-size:14.5px; color:var(--fg); }
.fact {
  margin-top:9px; padding:10px 11px; border-radius:9px; background:var(--sunk);
  border-left:3px solid var(--accent); font-size:14.5px;
}
.fact .k { display:block; font:700 9px/1 var(--mono); letter-spacing:.14em;
           text-transform:uppercase; color:var(--accent); margin-bottom:5px; }
.fact.unsure { border-left-color:var(--dim); }
/* Same box on a pick the seat refused: the fact is still true, the seat still said no. */
.fact.broke { border-left-color:var(--dim); }
.fact.unsure .k { color:var(--dim); }
.nope { font-size:15px; }
.nope .big-no { font-weight:680; display:block; margin-bottom:3px; }
.nope .fix { color:var(--dim); font-size:13.5px; margin-top:6px; }

/* ---------- discovery ---------- */
.discovery {
  border:1px solid var(--gold); border-radius:13px; padding:14px;
  background:linear-gradient(180deg, var(--gold-soft), var(--card));
  margin-bottom:18px; text-align:center;
}
.discovery .cup { font-size:30px; line-height:1; }
.discovery .dt { font:700 10px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
                 color:var(--gold); margin:8px 0 6px; }
.discovery .dn { font-size:17px; font-weight:650; letter-spacing:-.01em; }
.discovery .ds { color:var(--dim); font-size:13.5px; margin-top:5px; }
@keyframes pop { from { transform:scale(.8); opacity:0; } to { transform:scale(1); opacity:1; } }
.discovery { animation:pop .3s cubic-bezier(.2,1.3,.4,1) both; }

#confetti { position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden; }
#confetti i { position:absolute; width:7px; height:11px; border-radius:1px;
              animation:fall 1.5s cubic-bezier(.25,.6,.5,1) forwards; }
@keyframes fall { to { transform:translate3d(var(--dx),58vh,0) rotate(var(--dr)); opacity:0; } }

/* ------------------------------------------------------------------------
   The score. The testers read the first-discovery trophies as the score and
   only noticed the real number as an afterthought: "it needs to be like a
   score or something at the end, like a number". So it is the first thing on
   the page, it is enormous, and nothing shares the band with it.
   ------------------------------------------------------------------------ */
.verdictcard { margin:14px 0 4px; padding:22px 16px 18px; border-radius:18px;
               background:var(--card); border:1px solid var(--line);
               box-shadow:var(--shadow); text-align:center; position:relative; }
.vc-label { font:600 10px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
            color:var(--dim); }
.vc-score { font:700 104px/.92 var(--mono); letter-spacing:-.055em; margin:8px 0 2px;
            display:flex; align-items:baseline; justify-content:center; gap:2px; }
.vc-score small { font-size:26px; color:var(--dim); letter-spacing:0; font-weight:600; }
.vc-band { font:600 12px/1 var(--mono); letter-spacing:.17em; text-transform:uppercase;
           color:var(--accent); margin-top:4px; }
.vc-meter { margin:14px auto 0; max-width:280px; height:6px; border-radius:99px;
            background:var(--sunk); overflow:hidden; }
.vc-meter i { display:block; height:100%; background:var(--accent); border-radius:99px;
              width:0; transition:width .9s cubic-bezier(.2,.7,.3,1); }
.vc-sub { margin-top:12px; font-size:13.5px; color:var(--dim); }
.vc-sub b { color:var(--fg); font-weight:650; }
.vc-date { display:inline-flex; gap:7px; align-items:center; margin-top:12px;
           padding:5px 11px; border-radius:99px; font:600 11px/1 var(--mono);
           letter-spacing:.07em; background:var(--sunk); color:var(--dim); }
.vc-date.old { background:var(--gold-soft); color:var(--gold); }
@media (max-width:359px) { .vc-score { font-size:84px; } }

/* ------------------------------------------------------------------------
   THE TWO-STAGE RESULT.

   The owner, twice: "results page is getting really good but very clustered —
   let us start with more things collapsed than expanded and also could have
   that score at top", and "show simple version of results while loading on
   completion then show full results on click or scroll to see detailed story
   and per role breakdown and math etc".

   So stage one owns the first screen and carries three things and no others:
   the big score, the headline, and one glyph per seat. It has to read in two
   seconds and be worth screenshotting by itself. Everything else — the story,
   the per-pick breakdown, the answer key, rarity, badges, the arithmetic —
   lives in #detail, which is not in the document flow until the player scrolls
   or taps, and every section of which starts CLOSED.

   The reveal is scored to four named timing tokens, per design/README.md, so
   the whole sequence is retimed in one place.
   ------------------------------------------------------------------------ */
:root {
  --beat-1:120ms;   /* the seat glyphs start ticking in  */
  --beat-2:720ms;   /* the number starts counting        */
  --beat-3:1180ms;  /* the band stamps down              */
  --beat-4:1420ms;  /* the headline arrives, rule drawn  */
}

.stage1 { min-height:calc(100dvh - 250px); display:flex; flex-direction:column;
          justify-content:center; padding-bottom:4px; }
@supports not (min-height:100dvh) { .stage1 { min-height:calc(100vh - 250px); } }

/* Beat 1. The crew is marked before the total exists — four greens and a red
   feels nothing like five yellows at the identical score, and this row is the
   only place on the page that difference is legible. It is the same five
   squares that go on the share card, and it is aria-hidden: the live region on
   the score announces the finished sentence once. */
.assess { text-align:center; margin-bottom:6px; }
.assess-k { display:block; font:600 9.5px/1 var(--mono); letter-spacing:.18em;
            text-transform:uppercase; color:var(--dim); margin-bottom:10px; }
.glyphs { display:flex; justify-content:center; gap:7px; flex-wrap:wrap; }
.glyphs .g {
  width:30px; height:30px; border-radius:6px; display:grid; place-items:center;
  background:var(--sunk); border:1px solid var(--line);
  font:700 9.5px/1 var(--mono); letter-spacing:.05em; color:var(--bg);
  animation:tick-in 240ms cubic-bezier(.2,1.25,.4,1) both;
}
.glyphs .g--good { background:var(--good); border-color:transparent; }
.glyphs .g--mid  { background:var(--gold); border-color:transparent; }
.glyphs .g--bad  { background:var(--bad);  border-color:transparent; }
.glyphs .g--flat { background:var(--line-2); border-color:transparent; color:var(--fg); }
.glyphs .g--void { background:transparent; border:1px dashed var(--line-2); color:var(--dim); }
/* The only brass on the summary. What it means is explained one scroll down. */
.glyphs .g--first { box-shadow:0 0 0 2px var(--bg), 0 0 0 3.5px var(--gold); }
@keyframes tick-in { from { transform:scale(.5) translateY(6px); opacity:0; }
                     to   { transform:none; opacity:1; } }

/* Beats 2, 3 and 4. */
.stage1 .vc-score { animation:score-land 420ms cubic-bezier(.2,1.25,.4,1) var(--beat-2) both; }
@keyframes score-land { from { transform:scale(1.05); opacity:.35; }
                        70% { transform:scale(.996); opacity:1; }
                        to  { transform:none; opacity:1; } }
/* Shrink-wrapped on purpose: this is a scale transform, and scaling a
   full-width block sticks it 52px off both edges of a 375px screen and makes
   the document scroll sideways for the length of the beat. */
.stage1 .vc-band { display:inline-block; transform-origin:50% 50%;
                   animation:stamp-down 230ms cubic-bezier(.2,1.3,.4,1) var(--beat-3) both; }
@keyframes stamp-down { from { transform:scale(1.4) rotate(-3deg); opacity:0; }
                        to   { transform:none; opacity:1; } }
.stage1 .vc-sub, .stage1 .vc-date { animation:settle-in 380ms ease-out var(--beat-3) both; }
/* The hairline under the headline is the last thing that moves on the page.
   It is the pen being put down. */
.stage1 .headline { position:relative; padding-bottom:17px; margin-bottom:6px;
                    animation:settle-in 420ms ease-out var(--beat-4) both; }
.stage1 .headline::after {
  content:""; position:absolute; left:50%; bottom:0; width:56px; height:1px;
  margin-left:-28px; background:var(--accent); opacity:.6;
  animation:draw-rule 400ms ease-out calc(var(--beat-4) + 140ms) both;
}
@keyframes settle-in { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
@keyframes draw-rule { from { transform:scaleX(0); } to { transform:scaleX(1); } }

/* A skip that takes 300ms is not a skip. Tapping the block anywhere forces
   every animation to its end state at once, which is why nothing in the
   sequence depends on a JS timer to land. */
.stage1.is-done *, .stage1.is-done *::after { animation:none !important; }

/* The way down. */
.more { text-align:center; margin:2px 0 10px;
        animation:settle-in 400ms ease-out calc(var(--beat-4) + 300ms) both; }
.more button {
  appearance:none; width:100%; border:1px solid var(--line-2); background:var(--card);
  color:var(--fg); border-radius:13px; padding:13px 16px; min-height:48px;
  font:650 14px/1.2 var(--sans); cursor:pointer; box-shadow:var(--shadow);
}
.more button:active { transform:scale(.99); }
.more .chev { display:block; margin-top:9px; color:var(--dim); font-size:14px; line-height:1;
              animation:nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%,100% { transform:translateY(0); } 50% { transform:translateY(4px); } }

#detail.fade { animation:settle-in 320ms ease-out both; }

/* Stage two. Every section starts closed and opens on its own. */
details.sect {
  border:1px solid var(--line); border-radius:13px; background:var(--card);
  margin:0 0 10px; overflow:hidden; box-shadow:var(--shadow);
}
details.sect > summary {
  list-style:none; cursor:pointer; padding:13px; min-height:52px;
  display:flex; align-items:center; gap:12px;
}
details.sect > summary::-webkit-details-marker { display:none; }
details.sect > summary::after {
  content:"+"; margin-left:auto; flex:0 0 auto; color:var(--dim);
  font:600 17px/1 var(--mono);
}
details.sect[open] > summary::after { content:"\2212"; color:var(--accent); }
details.sect[open] > summary { border-bottom:1px solid var(--line); }
details.sect > summary:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.sect-t { display:block; font:650 14.5px/1.25 var(--sans); letter-spacing:-.01em; }
.sect-s { display:block; font:400 12.5px/1.4 var(--sans); color:var(--dim); margin-top:3px; }
.sect-b { padding:13px; }
/* The blocks inside carry their own outer margins from when they were loose on
   the page; inside a section they would double up. */
.sect-b > .storybox:first-child, .sect-b > .sharebox:first-child,
.sect-b > .key:first-child, .sect-b > .keycta:first-child { margin-top:0; }
.sect-b > .storybox, .sect-b > .sharebox { margin-bottom:0; border:0; padding:0;
                                           background:transparent; box-shadow:none; }
.sect-b > .key { margin-top:0; border:0; border-radius:0; }
.sect-b .mathbody { padding:0; }
/* The box's own mono caption repeated the section title one line below it —
   "How it went" over "HOW IT WENT · FIVE WAYS". Two labels for one thing is
   what clustered looks like up close. */
.sect-b > .storybox > .lbl, .sect-b > .sharebox > .lbl { display:none; }
.sect-b > .rp:last-child { margin-bottom:0; }