/* Cade · Profile. Loads after /ds/ds.css (the .phero / .pstats / .prow / .pnl-card / .sheet-* ports),
   /lib/live-chart.css and /landing/landing.css (the header, the footer band, .w, .note).
   What is here is the page's own: their dossier's layout (heroRow, sectionRow, tabRow, controls,
   settle banner, flags, empty state, referrals, winnings, account rows), measured off the
   handoff's compiled profile.module.css, plus our live chart cell and the legibility floor. */
.prof{--mm-faint:#9C9C9C;--mm-raised:#1C1C1C;--mm-surface:#141414;--mm-violet:#6A2CFF;--mm-lime:#91BB4F}
/* the page chrome /landing.css carries for /arcade, without the rest of it (its .coin collides with the ticket's) */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.prof{margin:0;overflow-x:hidden;background:var(--page,#0E0D0C)}
.prof .w{max-width:1280px;margin:0 auto;padding:0 40px;position:relative}
.prof .note{font-family:var(--data);font-size:12px;line-height:1.6;color:var(--meta);max-width:640px;margin:22px 0 0}
#hnav{position:sticky;top:0;z-index:70}
.hnav .cnl-d{transition:background-color .25s}
.hnav.stuck .cnl-d{background:rgba(11,11,11,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.hnav.stuck .cnl-m{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hfoot svg{display:block;width:100%;height:auto;margin:0 auto;overflow:visible}
#footM{display:none}
.hfoot{background:#101010}#footD{max-width:1440px}
@media (max-width:1023px){#footD{display:none}#footM{display:block;max-width:600px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dossier{position:relative;overflow:hidden;padding:44px 0 0}
.dossier .w{max-width:1216px}
.prof .hfoot{margin-top:120px}

/* back: their mono eyebrow link (desktop only, as theirs; the header is the phone's way home) */
.pback{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 0 12px;font-family:var(--data);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mm-faint);transition:color .12s}
.pback svg{width:14px;height:14px}
.pback:hover{color:var(--yellow)}
.pback:focus-visible{outline:3px solid #FFA800;outline-offset:3px}

/* the hero row: player card over the five figures (their heroRow, gap 0; 18 on a phone) */
.dossier .phwrap{max-width:none}
.phero .bdy{grid-template-columns:auto minmax(0,1fr) auto}
.phero .avi img{display:block;width:100%;height:100%;object-fit:cover}
.phero .avbtn{border:0;cursor:pointer;font:inherit;color:inherit}
.phero .avo{position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,11,11,.62);color:var(--paper);opacity:0;transition:opacity .15s}
.phero .avo>span{display:grid;justify-items:center;gap:4px}.phero .avo svg{width:24px;height:24px}
.phero .avo b{font-family:var(--data);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.phero .avbtn:hover .avo,.phero .avbtn:focus-visible .avo{opacity:1}
.phero .avbtn:focus-visible{outline:none}.phero .avf:focus-within{filter:drop-shadow(3px 3px 0 #000) drop-shadow(0 0 0 #FFA800)}
.phero .avbtn:focus-visible .avi{box-shadow:inset 0 0 0 4px #FFA800}
.phero .nm{display:flex;align-items:center;gap:12px;min-width:0}
.phero .nm h1{min-width:0}
/* their nameEditButton: a quiet 2px keyline square */
.phero .pen{position:relative;flex:none;display:grid;place-items:center;width:30px;height:30px;border:2px solid rgba(239,233,216,.55);background:transparent;color:var(--paper);cursor:pointer;transition:border-color .12s,color .12s}
.phero .pen svg{width:16px;height:16px}
.phero .pen:hover{border-color:var(--yellow);color:var(--yellow)}
.phero .pen:focus-visible{outline:3px solid #FFA800;outline-offset:2px}
/* tap targets: the 34px icon plates keep their drawing, the hit area grows to 44 */
.phero .ib,.phero .pen,.ibtn{position:relative}
.phero .ib::after,.phero .pen::after,.ibtn::after{content:"";position:absolute;inset:-7px}
.phero .ib[data-done=true],.ibtn[data-done=true]{background:var(--mm-lime)}
/* their copiedToast */
.tw{position:relative;display:inline-flex}
.toast{position:absolute;z-index:10;top:-34px;left:50%;transform:translateX(-50%);padding:4px 8px;border:2px solid #000;background:var(--mm-lime);box-shadow:3px 3px 0 #000;font-family:var(--data);font-size:11px;font-weight:800;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:#0B0B0B;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .3s}
.toast.on{opacity:1}
/* their flagStack: rank (violet) over streak (orange), swallow-tailed plates */
.flags{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fplate{display:block;padding:3px;background:#000;clip-path:polygon(0 0,100% 0,calc(100% - 18px) 50%,100% 100%,0 100%);filter:drop-shadow(4px 4px 0 #000)}
.flag{display:grid;gap:2px;min-width:150px;padding:7px 30px 7px 16px;background:var(--orange);color:#0B0B0B;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 50%,100% 100%,0 100%)}
.flag[data-tone=rank]{background:var(--mm-violet);color:var(--paper)}
.flag .fl{font-family:var(--data);font-size:11px;font-weight:800;line-height:1;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.flag .fv{font-family:var(--shout);font-style:italic;font-weight:900;font-size:22px;line-height:1;text-transform:uppercase;font-variant-numeric:tabular-nums}
/* the legibility floor: the DS stat labels run 10 and 9; here they are 11 */
.pstats p{font-size:11px;opacity:.78}
.pstats small{font-size:11px;opacity:.68;letter-spacing:.08em}
.pstats>div{transition:background-color .4s}

/* the settle banner (theirs: lime plate, ink display label, black tag) */
.settle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;min-height:52px;padding:12px 16px;border:3px solid #000;background:var(--mm-lime);box-shadow:6px 6px 0 #000;text-align:left;cursor:pointer;transition:transform .12s cubic-bezier(0,0,.2,1)}
.settle[hidden]{display:none}
.settle:hover{transform:translateY(-2px)}
.settle:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
.settle-l{font-family:var(--shout);font-style:italic;font-weight:900;font-size:18px;line-height:1;text-transform:uppercase;color:#0B0B0B;text-shadow:2px 2px 0 rgba(255,255,255,.25)}
.settle-t{flex:none;display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border:2px solid #000;background:#000;box-shadow:3px 3px 0 #000;font-family:var(--data);font-size:12px;font-weight:900;line-height:1.4;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.settle-a{display:block;flex:none;width:22px;height:11px;fill:currentColor}

/* ROW A: the section slats (their sectionRow + tabRow) */
.srow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:clamp(18px,1.8vw,26px);padding-top:clamp(16px,1.6vw,22px);border-top:1px solid rgba(255,255,255,.14)}
.tabrow{--tab-w:clamp(112px,24vw,160px);--tab-h:46px;--tab-f:18px;display:flex;flex-wrap:wrap;gap:8px 6px}
/* CTASlat: the drawn slat, the label centred on its face */
.cslat{position:relative;display:inline-grid;place-items:center;width:var(--tab-w,160px);height:var(--tab-h,46px);min-height:44px;padding:0 0 4px;border:0;background:none;cursor:pointer;color:#0B0B0B;
  font-family:var(--shout);font-style:normal;font-weight:800;font-size:var(--tab-f,18px);letter-spacing:.02em;line-height:1;text-transform:uppercase;transition:transform .12s cubic-bezier(0,0,.2,1)}
.cslat .cs-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cslat .cs-face{fill:var(--paper);transition:fill .15s}
.cslat[data-fill=yellow] .cs-face{fill:var(--yellow)}
.cslat>span{position:relative}
.cslat:hover{transform:translateY(-2px)}
.cslat[aria-selected=true]:hover{transform:none}
.cslat:focus-visible{outline:none}
.cslat:focus-visible .cs-art{filter:drop-shadow(0 0 0 #0E0D0C) drop-shadow(0 0 2px #FFA800) drop-shadow(0 0 1px #FFA800)}
.cslat:disabled{cursor:not-allowed;opacity:.5;transform:none}
.dpanel{margin-top:14px}
.dpanel[hidden]{display:none}

/* ROW B: sort + ticker (their controlsRow: DossierSelect + DossierTickerSearch) */
.ctlrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-bottom:24px}
.ctls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0}
.csel{position:relative;display:inline-flex;align-items:center}
.csel select{appearance:none;-webkit-appearance:none;height:44px;padding:0 38px 0 12px;border:2px solid #000;border-radius:0;background:var(--paper);box-shadow:3px 3px 0 #000;color:#0B0B0B;cursor:pointer;
  font-family:var(--shout);font-style:italic;font-weight:900;font-size:16px;text-transform:uppercase;transition:transform .12s}
.csel select:hover{transform:translateY(-2px)}
.csel select:focus-visible{outline:none;box-shadow:3px 3px 0 #000,0 0 0 3px #FFA800}
.csel svg{position:absolute;right:12px;width:14px;height:14px;color:#0B0B0B;pointer-events:none}
.cfield{display:inline-flex;align-items:center;height:44px;border:2px solid #000;background:var(--paper);box-shadow:3px 3px 0 #000;color:#0B0B0B;transition:box-shadow .12s}
.cfield:focus-within{box-shadow:3px 3px 0 #000,0 0 0 3px #FFA800}
.cfield .sig{padding-left:10px;font-family:var(--data);font-size:14px;font-weight:800;opacity:.55}
.cfield input{width:132px;height:100%;padding:0 10px 0 4px;border:0;outline:none;background:none;font-family:var(--data);font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#0B0B0B}
.cfield input::placeholder{color:rgba(0,0,0,.55);text-transform:none;letter-spacing:.02em}
.cfield input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.ccount{margin:0;font-family:var(--data);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mm-faint)}

/* the tickets: the DS grid, two up. Ours: the live chart in column two beside the open calls */
.dossier .prows{max-width:none;grid-auto-flow:row dense}
.prows .lpos{grid-column:1/-1;margin-bottom:12px}
.prow .bd{position:relative;text-decoration:none}
.prow .pl{font-size:11px;color:rgba(255,255,255,.55)}
.prow .ln{font-size:11px}
.prow .fv.g{color:var(--yes)}.prow .fv.r{color:var(--no)}
.prow .fv .pk{margin-right:6px}
.prow .st[data-long]{font-size:20px}
/* ours, owner rule: the stub's P&L never wears its own outcome colour on that colour (theirs runs
   lime on the lime flap); it reads cream with their 2px ink stroke on every outcome */
.prow .rs[data-outcome=win] .pn{color:var(--paper)}
.prow .claim{--tab-w:100%;--tab-h:40px;--tab-f:15px;min-width:84px}
.prow[data-just]{animation:none}
.lpos{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0}
/* the head, as their market page heads its chart: the question, the lane chip, the price + delta */
.lpos-h{display:flex;align-items:flex-start;justify-content:space-between;gap:8px 16px}
.lpos-id{min-width:0}
.lpos-q{margin:0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:clamp(22px,2vw,28px);line-height:1;text-transform:uppercase;color:var(--paper);text-shadow:2px 2px 0 #000}
.lpos-m{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 0}
.lpos .ln{display:inline-block;padding:5px 14px 5px 16px;background:var(--yellow);color:#0B0B0B;font-family:var(--data);font-size:11px;font-weight:800;letter-spacing:.14em;line-height:1;text-transform:uppercase;white-space:nowrap;
  clip-path:polygon(8px 4%,calc(100% - 12px) 0%,calc(100% - 4px) 30%,calc(100% - 8px) 52%,calc(100% - 2px) 74%,calc(100% - 7px) 100%,8px 100%,10px 64%,3px 42%,9px 26%)}
.lpos-k{font-family:var(--data);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mm-faint)}
.lpos-px{font-family:var(--data);font-size:14px;font-weight:800;letter-spacing:.02em;color:var(--paper);font-variant-numeric:tabular-nums}
/* MarketDeltaBadge: the move against the line, ink on the side's colour */
.lpos-d{display:inline-block;padding:4px 8px;border:2px solid #000;box-shadow:2px 2px 0 #000;font-family:var(--data);font-size:11px;font-weight:800;letter-spacing:.06em;line-height:1;text-transform:uppercase;color:#0B0B0B;background:#8BD943;font-variant-numeric:tabular-nums}
.lpos-d[data-direction=below]{background:#EA2A46;color:#fff}
.lpos-h .ulink{display:inline-flex;align-items:center;flex:none}
.lpos-c{position:relative;height:clamp(300px,30vw,400px)}
.ulink{font-family:var(--data);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);border-bottom:2px solid currentColor;padding-bottom:2px;white-space:nowrap}
.ulink:hover{color:var(--yellow)}.ulink:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
.dossier .note{max-width:none}

/* the chart is their MarketLiveChart port at 8 to 10px; on this page it reads at 11 (page-scoped, the lib is untouched) */
.lpos .lc-cap span,.lpos .lc-tick b,.lpos .lc-start,.lpos .lc-ey,.lpos .lc-fg,.lpos .lc-ptag,.lpos .lc-pnl small,.lpos .lc-read span,.lpos .lc-delta span,.lpos .lc-ticker span,.lpos .lc-tip small,.lpos .lc-plate small,.lpos .lc-stake,.lpos .lc-shut-t,.lpos .lc-pnl b span{font-size:11px}
.lpos .lc-pm.mine::after{content:"";position:absolute;inset:-10px}
.prow .shr::after{content:"";position:absolute;inset:-8px -4px}
.lpos-h .ulink{min-height:44px}

/* empty states: theirs (dashed plate, display title, body copy) */
.empty{grid-column:1/-1;display:grid;place-items:center;padding:64px 24px;border:3px dashed rgba(255,255,255,.15);text-align:center}
.empty .et{margin:0;font-family:var(--shout);font-style:italic;font-weight:900;font-size:28px;line-height:1;text-transform:uppercase;color:rgba(255,255,255,.5);text-shadow:3px 3px 0 #000}
.empty .ec{max-width:42ch;margin:12px 0 0;font-family:var(--read);font-size:15px;line-height:1.45;color:rgba(255,255,255,.6)}
.empty .cslat{margin-top:20px;--tab-w:120px;--tab-h:44px}

/* referrals: their ReferralSection (raised plates, 3px ink, hard shadows) */
.refs{display:grid;gap:14px;max-width:640px}
.rplate{margin:0;padding:14px;border:3px solid #000;background:var(--mm-raised);box-shadow:4px 4px 0 #000;color:var(--paper)}
.rk{margin:0;font-family:var(--data);font-size:11px;font-weight:900;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.rk.y{color:var(--yellow)}
.rcode{margin:6px 0 0;font-family:var(--shout);font-style:italic;font-weight:900;font-size:42px;line-height:.82;text-transform:uppercase;color:#fff;-webkit-text-stroke:1px #000;paint-order:stroke fill;filter:drop-shadow(3px 3px 0 #000);overflow-wrap:anywhere}
.rrow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0}.rrow>div{min-width:0}
.rlink{margin:6px 0 0;font-family:var(--data);font-size:12px;font-weight:900;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;overflow-wrap:anywhere}
.ibtn{display:grid;place-items:center;flex:none;width:44px;height:44px;border:3px solid #000;background:var(--paper);box-shadow:3px 3px 0 #000;color:#0B0B0B;cursor:pointer;transition:transform .12s}
.ibtn.y{background:var(--yellow)}
.ibtn svg{width:18px;height:18px}.ibtn::after{inset:0}
.ibtn:hover{transform:translateY(-2px)}.ibtn:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
.rform{border-width:4px;box-shadow:5px 5px 0 #000}
.rtitle{margin:0;font-family:var(--shout);font-style:italic;font-weight:900;font-size:32px;line-height:1;text-transform:uppercase;color:#fff;text-shadow:3px 3px 0 #000}
.rfield{display:grid;gap:6px;margin-top:12px}
.rfield input{height:48px;width:100%;padding:0 12px;border:3px solid #000;background:#0E0D0C;box-shadow:3px 3px 0 #000;font-family:var(--data);font-size:16px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--paper);outline:none}
.rfield input:focus-visible{box-shadow:3px 3px 0 #000,0 0 0 3px #FFA800}
.rfield input::placeholder{color:rgba(255,255,255,.45)}
.rbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.rbtns .cslat{--tab-w:100%;--tab-h:48px;--tab-f:17px}
.rmsg{min-height:1.4em;margin:10px 0 0;font-family:var(--data);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--yes)}

/* winnings: their winningsHead */
.whead{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 20px;margin-bottom:18px}
.weyb{margin:0;font-family:var(--data);font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.wtitle{margin:6px 0 0;font-family:var(--shout);font-style:italic;font-weight:900;font-size:32px;line-height:.95;text-transform:uppercase;color:var(--paper);text-shadow:3px 3px 0 #000}

/* account: the account center's three sections (Identity, Preferences, Security) */
.acct{display:grid;gap:28px}
.asec{padding:14px 14px 18px;background:#0E0D0C;box-shadow:6px 6px 0 #000;border-right:3px solid #000;border-bottom:3px solid #000}
.asec h2{margin:4px 0 16px;font-family:var(--shout);font-style:italic;font-weight:900;font-size:32px;line-height:1;text-transform:uppercase;color:var(--paper);text-shadow:3px 3px 0 #000}
.arows{display:grid;gap:4px}
.arow{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:10px 12px;background:#171615}
.arow .at{display:flex;align-items:center;gap:12px;min-width:0}
.arow b{display:block;font-family:var(--read);font-weight:600;font-size:14px;letter-spacing:.02em;text-transform:uppercase;color:#fff}
.arow small{display:block;margin-top:4px;font-family:var(--data);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mm-faint)}
.arow small.ok{color:var(--yes)}.arow small.warn{color:var(--orange)}
.arow p{margin:6px 0 0;font-family:var(--read);font-size:13px;color:rgba(255,255,255,.72)}
.arow .apfp{width:44px;height:44px;flex:none;border:2px solid #000;box-shadow:3px 3px 0 #000;object-fit:cover}
.arow .ibtn{width:44px;height:44px;border-width:2px;background:#0B0B0B;color:var(--paper)}
.arow .ibtn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.abar{padding:6px 12px;background:var(--orange);font-family:var(--data);font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#0B0B0B}
.aform{display:grid;gap:10px;padding:12px;border:2px solid #000;background:#0B0B0B}
.aform .afl{display:flex;gap:10px}
.aform input{flex:1;min-width:0;height:44px;padding:0 12px;border:1px solid rgba(255,255,255,.2);background:#141414;font-family:var(--data);font-size:14px;color:var(--paper);outline:none}
.aform input:focus-visible{box-shadow:0 0 0 3px #FFA800}
.aform .cslat{--tab-w:96px;--tab-h:44px;flex:none}
.aform p{margin:0;font-family:var(--read);font-size:13px;color:rgba(255,255,255,.72)}
.achk{position:relative;display:grid;place-items:center;width:44px;height:44px;cursor:pointer}
.achk input{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:0;border:2px solid #000;background:#3A3A3A;cursor:pointer}
.achk input:checked{background:var(--yes)}.achk input:disabled{cursor:not-allowed;opacity:.6}
.achk input:focus-visible{outline:3px solid #FFA800;outline-offset:2px}
.aslat{--tab-w:130px;--tab-h:44px;--tab-f:14px}

/* the share sheet: their sheet, the DS pnl-card, their four actions */
.locked{overflow:hidden}
.sheet-overlay[hidden]{display:none}
.sheet-dialog{--rs-width:520px}
.sheet-dialog:focus-visible{outline:none}
.pcard{width:min(100%,420px);margin:0 auto 18px}
.pacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pact{display:grid;place-items:center;min-height:44px;padding:0 8px;border:2px solid #000;background:#0B0B0B;box-shadow:3px 3px 0 #000;font-family:var(--data);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--paper);cursor:pointer;text-decoration:none;transition:transform .12s}
.pact.or{background:#ED7F2E;color:#0B0B0B}
.pact:hover{transform:translateY(-2px)}.pact:focus-visible{outline:3px solid #FFA800;outline-offset:2px}
.pstat{min-height:1.4em;margin:12px 0 0;font-family:var(--data);font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--meta)}
.sheet-dialog[data-mode=sheet] .sheet-content{padding:0 16px 18px}

/* ── a phone ── */
@media (max-width:639px){
  .dossier{padding-top:20px}
  .dossier .w{padding:0 16px}
  .pback{display:none}
  .phero .bdy{grid-template-columns:auto minmax(0,1fr)}
  .flags{grid-column:1/-1;align-items:flex-start}
  .phero .nm{gap:8px}
  /* their compact strip: the four slats shrink to share the row (no hidden fourth tab) */
  .tabrow{--tab-w:clamp(96px,27vw,128px);--tab-h:44px;--tab-f:14px;flex-wrap:nowrap;flex:1 1 100%;gap:6px;padding:2px 2px 8px}
  .tabrow .cslat{flex:1 1 0;min-width:0}
  .ctls .csel:not(.tsel),.ctls .cfield{display:none}
  .ctls .cslat.icn{display:inline-grid}
  .srow>.tabrow{min-width:0;max-width:100%}
  .lpos-d{display:none}
  .ctlrow{flex-wrap:nowrap}
  .lpos-h{flex-direction:column}
  .lpos-c{height:360px}
  .settle-l{font-size:16px}
  .ctlrow{gap:10px}
  .ccount{display:none}
  .prow .fv{font-size:16px}.prow .fv .pk{margin-right:4px}
  .pacts{grid-template-columns:1fr 1fr}
  .arow:has(.cslat){flex-wrap:wrap}.arow .at{flex:1}
  .aform .afl{flex-wrap:wrap}.aform input{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .prow,.prow .shr,.cslat,.settle,.pact,.ibtn,.phero .ib,.csel select,.pback,.toast,.phero .avo,.pstats>div{transition:none}
  .prow:hover,.cslat:hover,.settle:hover,.pact:hover,.ibtn:hover,.phero .ib:hover,.csel select:hover{transform:none}
  .prow[data-open] .rf::after{animation:none}
}
.sheet-panelClose{position:relative}.sheet-panelClose::after{content:"";position:absolute;inset:-6px}

/* the phone's icon slats (their DossierControlIconSlat, 46 x 40, the count dot when applied) */
.cslat.icn{display:none;--tab-w:52px;--tab-h:44px;padding:0 0 4px}
.cslat.icn .ic{position:relative;width:20px;height:20px;color:#0B0B0B}
.icb{position:absolute;top:-6px;right:-4px;display:grid;place-items:center;width:18px;height:18px;border:2px solid #000;border-radius:50%;background:var(--yellow);font-family:var(--data);font-size:10px;font-weight:900;line-height:1;color:#0B0B0B}
.icb[hidden]{display:none}
/* RESET while a control is applied (their CONTROL_SLAT_STYLE, 104 x 40) */
.cslat.creset{--tab-w:104px;--tab-h:44px;--tab-f:14px}
.cslat.creset[hidden]{display:none}
/* under 360px: the section select on the selected slat's yellow plate */
.tsel{flex:1 1 100%}.tsel[hidden]{display:none}
.tsel select{width:100%;background:var(--yellow)}
.tabrow[hidden]{display:none}
/* the half sheet: eyebrow, title, the Sort / Search slats, the options, CLEAR + APPLY */
.cbody{padding:4px 20px 12px}
.ceyb{margin:0;font-family:var(--data);font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.ctitle{margin:8px 0 0;font-family:var(--shout);font-style:italic;font-weight:900;font-size:30px;line-height:.95;text-transform:uppercase;color:var(--paper)}
.ctabs{display:flex;justify-content:space-between;gap:8px;margin-top:16px}
.ctabs .cslat{--tab-w:48%;--tab-h:44px;--tab-f:15px}
.clab{margin:20px 0 8px;font-family:var(--data);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mm-faint)}
.copts{display:grid;gap:10px}
.copts .cslat{--tab-w:100%;--tab-h:46px;--tab-f:17px}
.cfield.cfull{display:flex;width:100%}.cfield.cfull input{flex:1;width:auto}
.cfoot{display:flex;justify-content:space-between;gap:10px;padding:12px 20px 18px;background:#0E0D0C}
.cfoot .cslat{--tab-h:48px;--tab-f:18px}
#cclear{--tab-w:42%}#capply{--tab-w:54%}

/* 320 to 359: the strip is a select (above); the avatar and the flap step down so the id row and
   the three ticket fields keep their values whole (nothing ellipsed) */
@media (max-width:359px){
  .phero .fc{--av:80px}
  .phero .bdy{column-gap:10px}
  .prow .rs{width:88px}
  .prow .st{font-size:20px}.prow .st[data-long]{font-size:16px}
  .prow .pn{font-size:17px}
  .prow .fl{gap:6px}
  .prow .fv{font-size:14px}.prow .fv .pk{margin-right:2px}
  .prow .pk{padding:3px 5px 3px 4px;font-size:11px}
  .prow .fk{letter-spacing:.06em}
}

/* loading (CadeSkeleton): the open call's chart ghost spans the row as .lpos does, at its height (head + chart) */
.prows .sk-lpos{grid-column:1/-1;margin-bottom:12px;--sk-chart-h:calc(clamp(300px,30vw,400px) + 84px)}
.prows .sk-unavail{grid-column:1/-1}

/* ── the interaction vocabulary (/lib/category.css 21) on the dossier's parts: the copy / edit / share buttons, the
      settle banner, the sort select and the share sheet's actions are plates (a press lands on the shadow); a ticket
      is a card (4px lift, the coin hops); the back link and OPEN MARKET sweep their underline. The DS ports' own
      2px hover lifts step aside so the shared gesture is the only one ── */
.phero .ib.ci-plate,.ibtn.ci-plate,.pact.ci-plate,.prow .shr.ci-plate,.csel select.ci-plate{--ci-sh:3px}
.settle.ci-plate{--ci-sh:6px}
.phero .ib.ci-plate:hover,.ibtn.ci-plate:hover,.pact.ci-plate:hover,.prow .shr.ci-plate:hover,.csel select.ci-plate:hover,.settle.ci-plate:hover,.prow.ci-card:hover{transform:none}
.csel select.ci-plate:focus-visible{translate:none}
.phero .pen{transition:border-color .12s,color .12s,translate .12s cubic-bezier(0,0,.2,1)}
.phero .pen:active{translate:1px 1px}
.cslat.tab:not([aria-selected=true]):active,.cslat.icn:active,.cslat.claim:active{transform:translate(2px,3px)}
.ulink.ci-link{border-bottom:0;padding-bottom:0;min-height:28px}
.pback.ci-link{--ci-ul:12px}

/* the art (.c-art): the profile banner, quiet, right-anchored behind the player card's top edge */
.w{position:relative}
.pf-art{position:absolute;z-index:-1;inset:0 0 auto;height:0;pointer-events:none;
  --hero-art:url(/assets/art/heroes/profile.jpg);--hero-art-m:url(/assets/art/heroes/profile-m.jpg);--art-top:-110px;--art-right:-60px;--art-w:min(58%,760px);--art-o:.38}
/* on a phone the player card covers the whole width: the art would only poke out at the edge, so it steps out */
@media (max-width:720px){.pf-art{display:none}}
/* the html carries the page ground, so the body stays clear and the art (z -1) shows above the canvas */
body.prof{background:transparent}