/* $RIPS PACK CHECKER: THE AIRDROP DASHBOARD (rb/pc-dash, 26 Oct 2026), layout B as approved (rb/pc-dash-mock
   docs/pack-checker/decisions/airdrop-dash). dash.js draws it. The Pack Checker's own look: one navy panel with the
   cream edge over the blurred lobby, Titan One headings, gold $RIPS, ONE pink action. Flat inside: no box in the panel;
   hairlines and space group things. One radius scale (the panel's, pills for controls). No Kickstart here. */
.pc-screen--airdrop .pc-head{position:relative;padding:0 64px;margin-bottom:clamp(10px,2.2vh,22px)}
.pc-screen--airdrop .pc-dash__x{position:absolute;top:0;right:0}
@media (max-width:860px){ .pc-screen--airdrop .pc-prof__t b{font-size:min(22px,calc((100vw - 250px) / (var(--n,8) * .74)))} }
@media (max-width:560px){ .pc-screen--airdrop .pc-head{padding:0 54px} .pc-screen--airdrop .pc-dash__x{width:44px;height:44px} }
/* rb/pc-sendfrom: the phone's compact header puts the picture + @name on the logo's row (style.css), so the header has no height
   of its own here: the close X goes on that row too, at the right, with the picture + @name just left of it, so it never hangs
   over the panel */
@media (max-width:560px){
  .pc-screen--airdrop .pc-head{padding:0}
  .pc-screen--airdrop .pc-dash__x{top:-52px;right:0}
  .pc-screen--airdrop .pc-head > .pc-prof{right:54px;max-width:calc(100% - 174px)}
}

.pcd{display:flex;flex-direction:column;width:100%;max-width:1000px;margin:0 auto;padding:clamp(20px,3.6vh,40px) clamp(22px,3.4vw,44px) clamp(16px,2.6vh,26px);color:var(--text)}
.pcd dd{margin:0}
.pcd .num{font-variant-numeric:tabular-nums}

/* the top: the player's own slab beside the headline */
.pcd-top{display:flex;align-items:center;gap:clamp(18px,2.6vw,34px)}
.pcd-slab{flex:none;margin:0;aspect-ratio:600/840;height:clamp(130px,22vh,210px);filter:drop-shadow(0 18px 26px rgba(0,0,0,.55))}
.pcd-slab img{display:block;width:100%;height:100%;object-fit:contain;transform:rotate(-4deg)}
.pcd-slab img:not([src]){visibility:hidden}
.pcd-top__t{min-width:0}
.pcd-title{margin:0;font:400 clamp(22px,3vh,30px)/1.05 var(--display);text-transform:uppercase;color:#fff;text-shadow:0 3px 0 var(--ink);text-wrap:balance}
.pcd-title__g{color:var(--gold-2);white-space:nowrap}
.pcd-big{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;margin:clamp(6px,1.2vh,12px) 0 0}
.pcd-big b{font:400 clamp(52px,9.4vh,92px)/.95 var(--display);color:#fff;text-shadow:0 4px 0 var(--ink)}
.pcd-big span{font:700 clamp(20px,3vh,28px)/1 var(--ui);color:#DCE3FF}
/* fully unlocked: the $RIPS in gold, never a dollar figure */
.pcd-big--gold b{color:var(--gold-2)}   /* flat gold (tasteskill: no gradient text) */
.pcd-big--gold span{font:400 clamp(20px,3vh,30px)/1 var(--display);color:var(--gold-2);text-shadow:0 3px 0 var(--ink)}

/* the bar: the page's own (app.js kickBar, Kickstart off), so its look follows the page's bar; only its size and place are
   set here, and its end labels / lines are hidden (Unlocked | Still to unlock under it is its legend) */
.pcd-bar{margin-top:clamp(14px,2.6vh,26px)}
.pcd-bar .pc-ubar{margin-top:0;height:clamp(30px,4.2vh,38px)}
.pcd-bar .pc-ubar__ticks,.pcd-bar .pc-unl__t,.pcd-bar .pc-ubar__k{display:none}

/* unlocked | still to unlock: two numbers split by one hairline, the bar's legend */
.pcd-nums{display:grid;grid-template-columns:repeat(2,auto);justify-content:start;margin:clamp(14px,2.4vh,22px) 0 0}
.pcd-nums > div{padding:0 28px}
.pcd-nums > div:first-child{padding-left:0}
.pcd-nums > div + div{border-left:2px solid rgba(241,234,219,.16)}
.pcd-nums dt{font:700 15px/1.2 var(--ui);color:var(--muted)}
.pcd-nums dd{margin-top:4px;font:400 clamp(24px,3.6vh,34px)/1 var(--display);color:#fff}
.pcd-nums .is-un dd{color:var(--gold-2)}
.pcd-done{margin:clamp(14px,2.4vh,22px) 0 0;font:700 clamp(18px,2.5vh,22px)/1.3 var(--ui);color:var(--mint)}

/* the one action (and, while a wallet is still to verify, the small "Later") */
.pcd-act{display:flex;align-items:center;gap:8px 24px;margin-top:clamp(14px,2.4vh,22px)}
.pcd-cta{flex:none}
.pcd-cta.is-busy{opacity:.72;cursor:progress}
.pcd-cta.is-busy svg{width:22px;height:22px}
.pcd-later{flex:none;min-width:44px;justify-content:center;margin-left:auto;padding:0 12px;color:var(--muted);font-weight:700;text-decoration-color:rgba(169,180,218,.5)}
.pcd-later:hover{color:#fff}
/* the finding beside the action: what this wallet holds, or what the rips have already earned */
.pcd-why{flex:0 1 auto;max-width:420px;margin:0;font:600 16px/1.35 var(--ui);color:#DCE3FF;text-wrap:pretty}
/* a value not known yet (a real player, until the server has said which wallets are locked in): a flat bar at its real size */
.pcd-ghost{display:inline-block;vertical-align:middle;border-radius:6px;background:rgba(220,227,255,.12)}
.pcd-ghost--n{width:4.2em;height:.8em}
.pcd-ghost--w{width:260px;max-width:100%;height:16px}
.pcd-why b{color:var(--gold-2);font-weight:800}
.pcd .pc-btn:focus-visible,.pcd-later:focus-visible,.pcd-x:focus-visible{outline:3px solid var(--sky);outline-offset:3px}

/* the wallets line: the panel's foot, under one hairline */
.pcd-w{display:flex;align-items:center;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;margin-top:clamp(14px,2.6vh,26px);padding-top:clamp(10px,1.8vh,16px);border-top:2px solid rgba(241,234,219,.14);font:600 16px/1.3 var(--ui);color:#DCE3FF}
.pcd-w__s{margin:0;line-height:1.5}   /* plain inline text: the parts wrap at the spaces between them */
.pcd-w__s b{color:#fff;font-weight:800}
.pcd-w__ok svg{width:18px;height:18px;margin-right:7px;vertical-align:-3px;color:var(--mint)}
.pcd-w__p{white-space:nowrap}
.pcd-w__p--soon,.pcd-w__soon{color:var(--muted)}
.pcd-w__err{display:block;color:var(--muted)}
.pcd-w__s{flex:1 1 auto;min-width:0}
.pcd-share{flex:none;margin:-10px -4px -10px auto;padding:0 8px;color:var(--muted);font-weight:700;text-decoration-color:rgba(169,180,218,.5);white-space:nowrap}   /* rb/airdrop-review-fixes: "Preparing…" never breaks onto a new line */
.pcd-share svg{width:15px;height:15px}
.pcd-share:hover{color:#fff}
.pcd-share:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
/* rb/pc-ugc: the two shares side by side at the foot's far end (Share my progress, Share my card); they wrap as a pair */
.pcd-shares{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:-10px -4px -10px auto}
.pcd-shares .pcd-share{margin:0}
.pcd-share:disabled{opacity:.45;cursor:default}
.pcd-share:disabled:hover{color:var(--muted)}

/* ---- short windows (1000x570, 1147x655) --------------------------------------------------------------------------- */
@media (min-width:861px) and (max-height:700px){
  .pc-screen--airdrop .pc-head{margin-bottom:8px}
  .pcd .pc-btn--xl{min-height:54px;font-size:20px}
  .pcd-act{margin-top:12px}
  .pcd-w{margin-top:12px;padding-top:10px}
}

/* ---- phone ------------------------------------------------------------------------------------------------------ */
@media (max-width:560px){
  .pcd{padding:20px 18px 14px}
  .pcd-top{gap:16px}
  .pcd-slab{height:132px}
  .pcd-title{font-size:21px}
  .pcd-big{gap:4px 8px}
  .pcd-big b{font-size:44px}
  .pcd-big span{font-size:19px}
  .pcd-bar{margin-top:18px}
  .pcd-bar .pc-ubar{height:32px}
  .pcd-nums > div{padding:0 18px}
  .pcd-nums dt{font-size:14px}
  .pcd-nums dd{font-size:22px}
  .pcd-done{font-size:17px}
  .pcd-act{flex-direction:column;align-items:stretch;gap:0;margin-top:18px}
  .pcd .pc-btn--xl{width:100%;min-height:58px;font-size:20px;padding:0 20px}
  .pcd-later{align-self:center;margin:2px 0 -6px}
  .pcd-why{flex:none;max-width:none;margin:10px 0 0;text-align:center;font-size:15px}
  .pcd-w{flex-direction:column;align-items:stretch;gap:8px;margin-top:14px;font-size:15px}
  .pcd-shares{align-self:flex-start;margin:-8px 0 -12px -8px;gap:4px 16px}
}

/* ==== pc78B layout (Luke, 26 Oct: "loads of empty space... consider each screen and how the info should be presented").
   Layout B kept ("what's left first"), the same content and verify-first rule; the layout only, in the pc77 / How to unlock
   system (hero clamp(52px,9.4vh,100px), button clamp(50px,6.2vh,58px)+, gaps clamp(16px,3.2vh,32px)).
   Computers: the player's slab is the panel's left column at full height (the screen's face, not a thumbnail), and one
   column on its right reads down: what it is -> the hero (what is left to rip) -> the bar -> its two numbers -> why the
   button is the next step -> the button (with "Later" right beside it, not at the far edge). The wallets line and Share stay
   the quiet foot across both columns. Phone: the same order, scaled up to use the screen. ================================ */
@media (min-width:861px){
  .pcd{display:grid;grid-template-columns:clamp(180px,20vh + 3.4vw,300px) minmax(0,1fr);grid-template-areas:"slab top" "slab bar" "slab nums" "slab act" "foot foot";
    column-gap:clamp(28px,3.6vw,56px);align-items:start;padding:clamp(24px,4.4vh,48px) clamp(28px,3.8vw,52px) clamp(16px,2.6vh,26px)}
  .pcd-top{display:contents}
  .pcd-slab{grid-area:slab;align-self:center;width:100%;height:auto}
  .pcd-slab img{height:auto;aspect-ratio:600/840}
  .pcd-top__t{grid-area:top}
  .pcd-bar{grid-area:bar;margin-top:var(--b-gap)}
  .pcd-bar .pc-ubar{height:clamp(32px,4.8vh,46px)}
  .pcd-nums,.pcd-done{grid-area:nums}
  .pcd-nums{margin-top:clamp(14px,2.6vh,26px)}
  .pcd-nums dt{font-size:clamp(14px,1.6vh,17px)}
  .pcd-nums dd{margin-top:6px;font-size:clamp(26px,4.4vh,44px)}
  .pcd-nums > div{padding:0 clamp(22px,2.6vw,36px)}
  .pcd-act{grid-area:act;flex-wrap:wrap;justify-content:flex-start;gap:0 18px;margin-top:var(--b-gap)}
  /* why the button is the next step sits right above it (it explains it); the button and its small Later end the column */
  .pcd-why{order:-1;flex:1 0 100%;max-width:52ch;margin:0 0 var(--b-gap-s);font-size:clamp(15px,1.7vh,18px)}
  .pcd .pc-btn--xl.pcd-cta{width:var(--b-btnw);min-height:var(--b-btnh);padding:0 24px;font-size:var(--b-btnf)}
  .pcd-later{margin-left:0}
  .pcd-w{grid-area:foot;margin-top:clamp(20px,3.6vh,36px)}
  .pcd-title{font-size:clamp(20px,2.6vh + .3vw,30px)}
  .pcd-big b{font-size:var(--b-hero)}
}
@media (min-width:861px) and (max-height:700px){
  .pcd{padding-top:clamp(18px,3.4vh,26px)}
  .pcd-act{margin-top:clamp(12px,2.4vh,18px)}
  .pcd-w{margin-top:clamp(14px,2.6vh,20px)}
  .pcd .pc-btn--xl.pcd-cta{min-height:50px;font-size:19px}
}
@media (max-width:560px){
  .pcd{padding:24px 20px 16px}
  .pcd-slab{height:clamp(132px,19vh,168px)}
  .pcd-big b{font-size:clamp(40px,12.4vw,50px)}
  .pcd-title{font-size:21px}
  .pcd-bar{margin-top:clamp(18px,3vh,26px)}
  .pcd-bar .pc-ubar{height:36px}
  .pcd-nums{margin-top:clamp(14px,2.2vh,20px)}
  .pcd-nums dd{font-size:26px}
  .pcd-act{margin-top:clamp(18px,3vh,26px)}
  .pcd .pc-btn--xl{min-height:60px}
  .pcd-why{font-size:16px}
  .pcd-w{margin-top:clamp(16px,2.6vh,22px);padding-top:14px}
}
/* the panel scaled to the window: the slab sets the panel's height, and the right column sits centred beside it */
@media (min-width:861px){
  .pcd{grid-template-columns:clamp(180px,26vh + 2vw,320px) minmax(0,1fr);grid-template-rows:1fr auto auto auto auto 1fr auto;
    grid-template-areas:"slab ." "slab top" "slab bar" "slab nums" "slab act" "slab ." "foot foot"}
}
@media (max-width:560px){
  .pcd{padding:clamp(22px,3.2vh,30px) 20px 16px}
  .pcd-big b{font-size:min(48px,11.2vw)}
  .pcd-slab{height:clamp(140px,20vh,176px)}
  .pcd-bar{margin-top:clamp(22px,3.6vh,32px)}
  .pcd-nums{margin-top:clamp(16px,2.6vh,22px)}
  .pcd-nums dd{font-size:28px}
  .pcd-act{margin-top:clamp(22px,3.6vh,32px)}
  .pcd-w{margin-top:clamp(18px,3vh,26px);padding-top:clamp(12px,2vh,18px)}
}
@media (min-width:861px){ .pcd{grid-template-columns:clamp(180px,30vh + 2vw,360px) minmax(0,1fr)} }
/* review fixes: a little bigger in a tall window; on the phone the reason comes before the button too (as on computers),
   and Later sits right under the button */
@media (min-width:861px) and (min-height:880px){ .pcd{grid-template-columns:clamp(180px,34vh + 2vw,380px) minmax(0,1fr)} }
@media (max-width:560px){
  .pcd-why{order:-1;margin:0 0 12px}
  .pcd-later{margin:6px 0 -8px}
}
@media (max-width:560px){ .pcd--verify .pcd-act{margin-top:clamp(16px,2.6vh,22px)} .pcd--verify .pcd-bar{margin-top:clamp(18px,3vh,26px)} }
/* (dash.js now writes the reason before the button, so no reordering is needed) */
.pcd-why{order:0}
/* shorter phones (375x812, 375x667): the same order, its sizes from the window's height */
@media (max-width:560px) and (max-height:830px){
  .pcd{padding-top:clamp(14px,2.6vh,22px)}
  .pcd-slab{height:clamp(104px,17vh,150px)}
  .pcd-big b{font-size:min(44px,11vw)}
  .pcd-bar,.pcd--verify .pcd-bar{margin-top:clamp(12px,2.2vh,20px)}
  .pcd-bar .pc-ubar{height:30px}
  .pcd-nums{margin-top:clamp(10px,1.8vh,16px)}
  .pcd-nums dd{font-size:24px}
  .pcd-act,.pcd--verify .pcd-act{margin-top:clamp(12px,2.2vh,20px)}
  .pcd .pc-btn--xl{min-height:52px}
  .pcd-why{font-size:15px;margin-bottom:8px}
  .pcd-w{margin-top:clamp(10px,1.8vh,18px);padding-top:10px}
}
/* phone: the hero never runs past its column beside the slab (dashqa: "$595,729" spilt at 390x844 once the slab grew): its
   size follows the column's width (8 characters fit at 19cqi) */
@media (max-width:560px){
  .pcd-top__t{flex:1 1 0;min-width:0;container-type:inline-size}
  .pcd-big b,.pcd-big--gold b{font-size:min(48px,19cqi)}
}
/* the slab stays at its phone size so the hero keeps its width (the hero is the screen's point, not the slab) */
@media (max-width:560px){ .pcd-slab{height:132px} .pcd-big b,.pcd-big--gold b{font-size:min(48px,22cqi)} }
@media (max-width:560px) and (max-height:830px){ .pcd-slab{height:clamp(104px,16vh,132px)} }
@media (max-width:560px){ .pcd-big b,.pcd-big--gold b{font-size:min(46px,20.5cqi)} }

/* ==== THE 5% STAGES (rb/pc-unlock-stages; DECISIONS §3 "Unlock display = 5% stages", Luke 30 Oct; mock H2 on
   mock/unlock-display, kept-from-worktrees/unlock-mocks/SHEET-H2.jpg). dash.js writes .pcd--st: the title, the gold
   unlocked hero "/ {total} $RIPS unlocked", the mint line, "Unlock progress" with the % right-aligned ABOVE the bar, the
   bar of 20 equal 5% blocks, Still to unlock | Volume to hit {next}%. On computers the panel closes up round its right
   column and that column is as wide as the button row (the button + "Later"), so the bar ends at "Later" (Luke, 30 Oct:
   "if there's loads of empty space you've done the bar way too big"). (.pcd-big / .pcd-done above are no longer written.) */
.pcd-hero{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:clamp(8px,1.2vh,12px) 0 0}
.pcd-hero b{font:400 var(--b-hero,clamp(52px,9.4vh,92px))/.95 var(--display);color:var(--gold-2);text-shadow:0 4px 0 var(--ink);white-space:nowrap}
.pcd-hero span{font:700 clamp(20px,3vh,28px)/1.1 var(--ui);color:#DCE3FF}
.pcd-hero span i{font-style:normal;color:#fff}
.pcd-line{margin:clamp(8px,1.4vh,14px) 0 0;font:600 clamp(15px,1.75vh,18px)/1.35 var(--ui);color:var(--mint);text-wrap:pretty}
.pcd-prog{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:0 0 8px}
.pcd-prog em{font:700 clamp(14px,1.6vh,17px)/1.2 var(--ui);font-style:normal;color:var(--muted)}
.pcd-pct{flex:none;font:400 clamp(20px,3vh,28px)/1 var(--display);color:#fff;text-shadow:0 3px 0 var(--ink)}
/* the bar, FRONT-LOADED and in the clan volume rewards bar's look (rebrand-clans/clan-card.css .rs4, bar v4): the light
   track with a 3px ink edge, the pink -> purple -> blue fill laid over the whole track with moving white stripes and a gloss
   line, white checkpoint rings (yellow with an ink tick once passed), the figures under the rings. On this navy panel the
   track keeps a 2px white outline outside its ink edge (the panel's own bars are white-edged) so it reads on the dark. */
.pcd-stages{--trk:clamp(24px,3.6vh,30px);--mk:clamp(20px,3vh,24px)}
.pcd-trk{position:relative;height:var(--trk);box-sizing:border-box;border:3px solid var(--ink,#0E1116);border-radius:999px;background:#E3E9F0;
  box-shadow:inset 0 3px 0 rgba(14,17,22,.08),0 0 0 2px rgba(255,255,255,.9);container-type:inline-size}
.pcd-trk__ticks{position:absolute;top:3px;bottom:3px;left:0;right:0;pointer-events:none}
.pcd-trk__ticks i{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(14,17,22,.14)}
.pcd-trk__fill{position:absolute;left:-1px;top:-1px;bottom:-1px;width:max(20px,calc(var(--p) + 1px));overflow:hidden;border-radius:999px;z-index:1}
.pcd-trk__fill::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(100cqw + 2px);background:linear-gradient(90deg,#FF4D96 0%,#F0187A 30%,#B44BE0 62%,#22A6DC 100%)}
.pcd-trk__fill i{position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.24) 0 10px,transparent 10px 20px);animation:pcd-stripe 1.2s linear infinite}
.pcd-trk__fill::after{content:"";position:absolute;left:6px;right:6px;top:3px;height:4px;border-radius:999px;background:rgba(255,255,255,.5)}
@keyframes pcd-stripe{to{background-position:22px 0}}
/* How to unlock's Kickstart stretch (option B, DECISIONS §3; never on this dashboard): from the start to where barPos puts it,
   faint pink stripes that read as NOT filled, ending in a pink edge, under the fill (rb/pc-ugc) */
.pcd-trk__ks{position:absolute;left:0;top:0;bottom:0;border-radius:999px 0 0 999px;background:repeating-linear-gradient(-45deg,transparent 0 6px,rgba(240,24,122,.32) 6px 8px);box-shadow:inset -3px 0 0 var(--pink-hi,#FF4D96)}
/* the next 5% stage: a pink marker across the track at its place on the scale */
.pcd-trk__nx{position:absolute;top:-6px;bottom:-6px;width:4px;margin-left:-2px;border-radius:2px;background:var(--pink-hi,#FF4D96);box-shadow:0 0 0 2px var(--ink,#0E1116);z-index:2}
.pcd-trk__mk{position:absolute;top:50%;width:var(--mk);height:var(--mk);display:grid;place-items:center;transform:translate(-50%,-50%);z-index:3;
  box-sizing:border-box;border:3px solid var(--ink,#0E1116);border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(14,17,22,.25)}
.pcd-trk__mk--q{left:50%}
.pcd-trk__mk--end{left:calc(100% - var(--mk) / 2 + 2px)}
.pcd-trk__mk.is-hit{background:#FFD93B}
.pcd-trk__mk.is-next{border-color:var(--pink-hi,#FF4D96);box-shadow:0 0 0 2px var(--ink,#0E1116),0 2px 4px rgba(14,17,22,.25)}
.pcd-trk__mk svg{width:60%;height:60%;color:var(--ink,#0E1116)}
/* the figures under the rings (the clan bar's "$250,000" / "$1,000,000+"): the real 25% count, the total at the end */
.pcd-cks{position:relative;height:clamp(18px,2.6vh,22px);margin-top:6px}
.pcd-ck{position:absolute;top:0;font:700 clamp(14px,1.6vh,16px)/1.1 var(--ui);color:#DCE3FF;white-space:nowrap;font-variant-numeric:tabular-nums}
.pcd-ck--q{left:calc(3px + (100% - 6px) * .5);transform:translateX(-50%)}
.pcd-ck--end{right:0}
.pcd-nums--st dd small{font:700 max(13px,.5em)/1 var(--ui);color:#DCE3FF;margin-left:6px}
.pcd-nums--st .is-un dd,.pcd-nums--st dd{color:#fff;white-space:nowrap}
.pcd-nums--st .is-vol dd{color:var(--pink-hi)}
/* rb/pc-allplat: the figures shrink by the row's characters (--n, dash.js) on a narrow screen, so a 7- or 8-digit Still to
   unlock and its Volume stay inside the frame; at the usual lengths min() keeps them at the size the rules above give */
.pcd-nums--st .pcd-fig{font-size:1em}
/* (and on a phone the figures sit under their labels: How to unlock's copy of this row is outside .pcd, so its dd kept the
   browser's 40px dd indent, which pushed a 7-digit row past the frame) */
@media (max-width:560px){
  .pcd-nums--st .pcd-fig{font-size:min(1em,calc((100vw - var(--pcd-fix,118px)) / (var(--n,18) * .56)))}
  .pcd-nums--st dd{margin-inline-start:0}
}
/* the next 5% past what is locked in: the cell names the wallet the button opens, in words, not a figure (rb/pc-dashfix item
   6: the dd keeps the figures' own font rules, so its line and baseline are the figure's; the words are .pcd-lockbtn /
   .pcd-lockt inside it, below) */
.pcd-ghost--h{width:2.2em;height:.7em}
.pcd-ghost--p{width:2.6em;height:.7em}
.pcd--st .pcd-bar{margin-top:clamp(14px,2.6vh,26px)}
.pcd--st .pcd-nums{margin-top:clamp(14px,2.6vh,26px)}
@media (min-width:861px){
  /* the right column is the button row's width: the button (380px, as everywhere on these screens) + "Later"; the text above
     wraps inside it rather than widening it, the hero's number never wraps (its column is at least that wide) */
  .pcd.pcd--st{width:fit-content;max-width:min(1000px,100%);grid-template-columns:clamp(180px,30vh + 2vw,360px) max-content}
  .pcd--st .pcd-title,.pcd--st .pcd-line,.pcd--st .pcd-bar,.pcd--st .pcd-why,.pcd--st .pcd-nums{width:0;min-width:100%}
  .pcd--st .pcd-hero{width:min-content;min-width:100%}
  .pcd--st .pcd-why{max-width:none}
  /* the button row as a grid (the reason above spans it): the row's own width is the button + "Later", never the reason's */
  .pcd--st .pcd-act{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:18px}
  .pcd--st .pcd-act > .pcd-why{grid-column:1 / -1}
  .pcd--st .pcd-act > .pcd-cta:only-child{grid-column:1 / -1}
  .pcd--st .pc-btn--xl.pcd-cta{width:380px}
  .pcd--st .pcd-nums dt{font-size:clamp(14px,1.6vh,17px)}
  .pcd--st .pcd-nums dd{font-size:clamp(24px,3.8vh,38px)}
}
@media (min-width:861px) and (min-height:880px){ .pcd.pcd--st{grid-template-columns:clamp(180px,34vh + 2vw,380px) max-content} }
@media (max-width:560px){
  .pcd-hero b{font-size:min(48px,20cqi)}
  .pcd-hero span{font-size:17px}
  .pcd-prog{margin-bottom:6px}
  .pcd-pct{font-size:20px}
  .pcd-nums--st > div{padding:0 16px}
  .pcd-nums--st > div:first-child{padding-left:0}
  .pcd-nums--st dt{font-size:14px}
  .pcd-nums--st dd{font-size:24px}
  .pcd-line{font-size:15px}
}
/* short phones (375x667): the line and the label cost ~40px, so the panel's own gaps give it back */
@media (max-width:560px) and (max-height:700px){
  :where(html:where(:not([data-inapp="x"]))) .pcd--st{padding-top:12px}
  :where(html:where(:not([data-inapp="x"]))) .pcd--st .pcd-slab{height:80px}
  :where(html:where(:not([data-inapp="x"]))) .pcd--st .pcd-bar{margin-top:10px}
  :where(html:where(:not([data-inapp="x"]))) .pcd--st .pcd-nums{margin-top:8px}
  :where(html:where(:not([data-inapp="x"]))) .pcd--st .pcd-act{margin-top:6px}
  :where(html:where(:not([data-inapp="x"]))) .pcd--st .pcd-why{margin-bottom:6px}
  :where(html:where(:not([data-inapp="x"]))) .pcd--st .pcd-w{margin-top:6px;padding-top:6px}
  :where(html:where(:not([data-inapp="x"]))) .pcd--st .pcd-later{margin:2px 0 -10px}
  :where(html:where(:not([data-inapp="x"]))) .pcd-line{font-size:13px;margin-top:6px}
  :where(html:where(:not([data-inapp="x"]))) .pcd-prog em{font-size:13px}
  :where(html:where(:not([data-inapp="x"]))) .pcd-pct{font-size:17px}
}

/* ==== rb/pc-dashfix (QA render of every state, 31 Oct) ============================================================== */
/* item 5: on computers the panel is one width in every state. The right column was the button row's own width, so it
   grew ~75px when "Later" was there (a wallet to connect / verify, the sync error) against loading / Rip a pack / fully
   unlocked, and the panel widened as loading ended. Now "Later" has a fixed box and the button row is always the button +
   that box wide; with no "Later" the one button fills the row (the bar still ends where the button row ends). The foot
   (the wallets line and Share) never widens it either: it wraps inside the panel. */
@media (min-width:861px){
  .pcd--st{--pcd-later-w:64px}
  .pcd--st .pcd-act{min-width:calc(380px + 18px + var(--pcd-later-w))}
  .pcd--st .pcd-later{width:var(--pcd-later-w);min-width:0;padding:0;box-sizing:border-box}
  .pcd--st .pcd-act--solo{grid-template-columns:minmax(0,1fr)}
  .pcd--st .pcd-act--solo > .pcd-cta{grid-column:1 / -1}
  .pcd--st .pcd-act--solo > .pc-btn--xl.pcd-cta{width:100%}
  .pcd--st .pcd-w{width:0;min-width:100%;box-sizing:border-box}
}
/* item 1: a 7-digit Still to unlock and its Volume ran past the panel's content on computers (only phones shrank them, by
   --n). The row is a container as wide as the column, and the figures take min(their size, what fits --n characters):
   0.52em a character (measured: 1,203,973-total rows 0.49-0.52) and 78px for the two cells' padding and the hairline. Rows
   of 6 digits and under (--n up to 20) work out above the size they have, so they are exactly as before. */
@media (min-width:861px){
  .pcd--st .pcd-nums--st{container-type:inline-size}
  .pcd--st .pcd-nums--st .pcd-fig{font-size:min(1em,calc((100cqi - 78px) / (var(--n,18) * .52)))}
}
/* item 6: "Connect wallet 1" / "Lock in the rest" in the right-hand slot sat ~10px under the figure beside it, in another
   font. The slot's dd keeps the figures' line (same size and line-height, so the same baseline) and the words sit on that
   baseline as a small link (an action) or a muted label (none), with the link's 44px tap area drawn outside its box */
.pcd-lockbtn,.pcd-lockt{font:800 clamp(16px,2.2vh,20px)/1.2 var(--ui);vertical-align:baseline}
.pcd-lockbtn{display:inline;position:relative;min-height:0;padding:0;color:var(--pink-hi,#FF4D96);cursor:pointer;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:rgba(255,77,150,.55)}
.pcd-lockbtn::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
.pcd-lockbtn:hover{color:#fff}
.pcd-lockbtn:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:4px}
.pcd-lockt{color:var(--muted)}
/* item 4b: the wallets line's "Lock in the rest" (the server locks what still waits when asked again), a quiet link */
.pcd-wact{display:inline;min-height:0;padding:0 2px;margin-left:4px;font:inherit;font-weight:800;color:var(--sky);vertical-align:baseline}
/* item 7: the next 5% marker just past the 25% ring (30%) or just before the end ring (95%) sat on the ring: kept clear of
   it (the ring's half-width and ~9px), at its true place whenever that is already clear */
.pcd-trk__nx.is-q{left:max(var(--x),calc(50% + var(--mk) / 2 + 9px)) !important}
.pcd-trk__nx.is-end{left:min(var(--x),calc(100% - var(--mk) - 7px)) !important}
/* pc103 (Luke, 2 Nov, mock A): the wallets line's "+ Add a wallet". The site's pc-textbtn (sky, underlined), set inline on
   the line's own baseline (an inline-flex box sat its plus on the baseline and lifted the words ~4px), the plus drawn
   (2px stroke) in the tick's mint as the mock has it, and its 44px tap area drawn outside its box as .pcd-lockbtn's is.
   The gap before it is the right margin of the part before it, so where it wraps to a line of its own it starts flush. */
.pcd-w__s > :has(+ .pcd-w__add){margin-right:10px}
.pcd-addw{display:inline;position:relative;min-height:0;padding:0;vertical-align:baseline;cursor:pointer;text-decoration:none}
.pcd-addw > span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}   /* the words underlined, never the plus */
.pcd-addw::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:40px;transform:translateY(-50%)}
.pcd-addw svg{display:inline-block;width:16px;height:16px;margin-right:6px;vertical-align:-2px;color:var(--mint)}
.pcd-addw:hover{color:#fff}
.pcd-addw:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:4px}
/* STRETCH GOALS (Stream A; Luke, 3 Nov 2026, DECISIONS §3; mock board-0 "Next goal 150%"): past 100% only (dash.js
   goalParts). Under each ring a short label line over the real figure: the goal just reached in the tick's gold, the next
   goal in the marker's pink; the middle one centred on its ring, the end one flush right as the total is today */
.pcd-cks--goal{height:auto;min-height:calc(2 * clamp(18px,2.6vh,22px))}
.pcd-cks--goal .pcd-ck{display:flex;flex-direction:column;gap:3px}
.pcd-cks--goal .pcd-ck--q{align-items:center}
.pcd-cks--goal .pcd-ck--end{align-items:flex-end}
.pcd-gl{font:800 clamp(13px,1.5vh,15px)/1.1 var(--ui);font-style:normal;color:var(--pink-hi,#FF4D96)}
.pcd-gl--done{color:var(--gold-2,#FFD447)}
/* ==== LATER EVERYWHERE (pc122; Luke, 4 Nov 2026): "Later" as big as the button, beside it (the wallet steps' .pc-pair; was a
   small text link under it, or beside it on computers and in X). The reason line keeps the full width above the pair. ==== */
.pcd .pcd-act.pcd-act--pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;column-gap:12px;row-gap:0}
.pcd .pcd-act.pcd-act--pair > .pcd-why{grid-column:1 / -1}
.pcd .pcd-act.pcd-act--pair > .pc-btn{width:100%;min-width:0;margin:0;padding:0 14px;white-space:nowrap}
.pcd .pcd-act.pcd-act--pair > .pcd-later{color:#fff;text-decoration:none;align-self:stretch}
@media (max-width:860px){ .pcd .pcd-act.pcd-act--pair > .pc-btn{padding:0 4px;font-size:clamp(13px,3.6vw,18px)} }
@media (min-width:861px){
  .pcd--st .pcd-act.pcd-act--pair{min-width:calc(2 * 240px + 12px)}
  .pcd--st .pcd-act.pcd-act--pair > .pc-btn--xl.pcd-cta,.pcd--st .pcd-act.pcd-act--pair > .pcd-later{width:100%}
}
@media (min-width:861px){ .pcd .pcd-act.pcd-act--pair > .pcd-later{min-height:var(--b-btnh);font-size:var(--b-btnf)} }
@media (min-width:861px) and (max-height:700px){ .pcd .pcd-act.pcd-act--pair > .pcd-later{min-height:50px;font-size:19px} }