/* hero deck: the three steps of a test (build, start, summary) are stacked like playing cards.
   The front card (slot 0) sits straight; the two behind it (slots 1 and 2) peek out at an angle.
   Every card has the same size. js/ui/hero_deck.js sets data-slot and moves the stack round in a loop. */
.deck{position:relative;width:min(340px,100%);height:330px;margin-left:-6px}

.deck-card{position:absolute;top:0;left:0;width:100%;height:296px;box-sizing:border-box;padding:18px 18px 16px;border-radius:20px;
  display:flex;flex-direction:column;gap:12px;
  transform-origin:50% 100%;pointer-events:none;
  transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .7s ease,box-shadow .9s ease}

/* the stack: front card, then the two cards peeking out behind it */
.deck-card[data-slot="0"]{z-index:3;opacity:1;transform:rotate(-2deg);pointer-events:auto}
.deck-card[data-slot="1"]{z-index:2;opacity:.94;transform:translate(16px,14px) rotate(4.5deg) scale(.97)}
.deck-card[data-slot="2"]{z-index:1;opacity:.82;transform:translate(-12px,28px) rotate(-6.5deg) scale(.94)}

.deck-card.build{background:var(--bg);border:1px solid var(--line);color:var(--ink);box-shadow:var(--shadow)}
.deck-card.run,.deck-card.sum{background:var(--ink);color:#fff;box-shadow:var(--shadow)}

.deck-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.deck-title{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.2}

/* chips on the build card */
.deck-chips{display:flex;flex-wrap:wrap;gap:6px}
.deck-chips span{font-size:12px;font-weight:600;padding:5px 10px;border-radius:99px;background:var(--accent-soft);color:var(--accent-d)}

/* bars: they grow from the left each time their card comes to the front */
.deck-rows{display:flex;flex-direction:column;gap:9px}
.deck-rows div{display:grid;grid-template-columns:minmax(0,1fr) 88px 30px;gap:8px;align-items:center;font-size:12px}
.deck-rows span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-rows i{display:block;height:6px;border-radius:9px;position:relative;overflow:hidden;background:rgba(14,19,32,.08)}
.deck-rows i::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:9px;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.2,.7,.2,1) .25s}
.deck-card.sum .deck-rows i{background:rgba(255,255,255,.18)}
.deck-card.sum .deck-rows i::after{background:#5eead4}
.deck-card[data-slot="0"] .deck-rows i::after{transform:scaleX(1)}

.deck-cta{margin-top:auto;align-self:flex-start;padding:9px 16px;border-radius:99px;background:var(--ink);color:#fff;font-size:14px;font-weight:700}

/* the runner card: question, options and palette */
.deck-timer{font-size:13px;color:#5eead4;opacity:1}
.deck-q{margin:0;font-size:14px;line-height:1.45}
.deck-q span{display:inline-block;font-size:11px;opacity:.7;margin-right:6px}
.deck-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.deck-opts span{font-size:13px;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.deck-opts span.on{background:#5eead4;border-color:#5eead4;color:var(--ink);font-weight:700}
.deck-palette{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:auto}
.deck-palette i{height:20px;border-radius:6px;background:rgba(255,255,255,.12);opacity:0;transform:scale(.6);transition:opacity .4s ease,transform .4s ease}
.deck-palette i.a{background:#5eead4}
.deck-palette i.cur{background:#fff;box-shadow:0 0 0 2px #5eead4}
.deck-card[data-slot="0"] .deck-palette i{opacity:1;transform:none;transition-delay:.25s}

/* the summary card */
.deck-score{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1}
.deck-score small{font-size:14px;opacity:.7;font-weight:600}

/* next steps under the summary bars */
.deck-steps-title{margin:4px 0 -4px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.deck-steps{margin:0;padding-left:20px;font-size:13px;line-height:1.45}
.deck-steps li+li{margin-top:4px}

/* "Weak spot found" sits on the summary card's corner, and shows only while that card is in front */
.deck-card.sum .deck-badge{top:-14px;right:-6px;bottom:auto;z-index:3;color:var(--ink);opacity:0;transform:translateY(8px) scale(.96);transition:opacity .5s ease .35s,transform .5s ease .35s}
.deck-card.sum[data-slot="0"] .deck-badge{opacity:1;transform:none}