/* The Pick'em pages (docs/design/pickem-mockup.html, simulator-mockup.html), scoped under .pk
   so they share nothing by accident with the site's own .tab, .note or .head. No text under 11px. */
.pk{--heat:#fff;--on-heat:var(--bg);--lo-max:30}
.pk .num,.pk .pk-cb,.pk .pk-seed,.pk .pk-rec6,.pk .pk-distx,.pk .pk-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.pk button{font:inherit;color:inherit}
.pk [hidden]{display:none!important}

.pk-head{padding:3rem 0 var(--s2)}
.pk-eyebrow{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin:0 0 10px}
.pk-head h1{margin:0;font-family:var(--disp);font-weight:600;font-size:clamp(40px,6vw,64px);line-height:1;text-transform:uppercase;letter-spacing:.01em}
.pk-sub{margin:var(--s2) 0 0;color:var(--text-2);max-width:62ch}
.pk-archive{color:var(--muted);font-size:14px}
.pk-tabs{display:flex;gap:6px;margin:var(--s3) 0 0;flex-wrap:wrap}
.pk-tab{display:inline-block;padding:8px 22px;font-size:14px;color:var(--muted);text-decoration:none;clip-path:var(--pill);text-transform:uppercase;letter-spacing:.05em}
.pk-tab[aria-current]{background:var(--panel);color:var(--text)}
a.pk-tab:hover{color:var(--text)}
.pk-tab small{display:block;font-size:11px;color:var(--muted-2);text-transform:none;letter-spacing:0}

.pk-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);margin:var(--s3) 0 var(--s4)}
@media (min-width:980px){.pk-grid{grid-template-columns:minmax(0,1fr) 330px;align-items:start}
  .pk-slip{position:sticky;top:72px}}
.pk-panel{background:var(--panel)}
.pk-table{box-shadow:inset 0 2px 0 var(--sys);clip-path:var(--notch)}
.pk-tablehead{padding:var(--s3) var(--s3) 6px}
.pk-tablehead h2,.pk-slip h2,.pk-explain h2{margin:0;font-family:var(--disp);font-weight:500;font-size:21px;text-transform:uppercase;letter-spacing:.03em}
.pk-rule{margin:6px 0 0;color:var(--text-2);font-size:14px;max-width:64ch}
.pk-scroll{overflow-x:auto}
.pk table{border-collapse:collapse;width:100%;min-width:600px}
.pk th,.pk td{padding:0;text-align:left}
.pk thead th{font-size:13px;font-weight:600;padding:10px 6px 8px;vertical-align:bottom;color:var(--text-2)}
.pk thead th small{display:block;font-weight:400;color:var(--muted-2);font-size:11px;font-family:var(--body)}
.pk thead th.num{text-align:center;font-family:var(--body)}
.pk thead th.pk-first{padding-left:var(--s3)}
.pk-row{border-top:1px solid var(--line)}
.pk-seed{width:48px;padding-left:var(--s3)!important;color:var(--muted);font-size:13px}
.pk-team{min-width:150px}
.pk-tbtn{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;padding:9px 6px;cursor:pointer;text-align:left}
.pk-tbtn.pk-plain{cursor:default}
.pk-tbtn .clogo{margin:0;width:20px;height:20px}
.pk-chip .clogo,.pk-settled .clogo{margin:0}
.pk-reg{width:3px;height:18px;flex:none;background:var(--dim)}
.pk-reg.EU{background:var(--eu)}.pk-reg.AM{background:var(--am)}.pk-reg.AP{background:var(--ap)}
.pk-tname{font-weight:600}
.pk-chev{margin-left:auto;color:var(--muted);font-size:12px;transition:transform .15s}
.pk-tbtn[aria-expanded="true"] .pk-chev{transform:rotate(90deg)}
.pk-cell{width:15%;padding:3px!important}
.pk-cell.pk-off{width:12%}
.pk-cb{position:relative;display:block;width:100%;min-height:36px;border:0;cursor:pointer;font-size:14px;text-align:center;
  background:color-mix(in srgb,var(--heat) calc(var(--m,0) * var(--lo-max) * 1%),var(--panel-2));color:var(--text)}
.pk-cb.pk-col{background:color-mix(in srgb,var(--hc) calc(var(--m,0) * 34%),var(--panel-2))}
.pk-cb.pk-col.hi{background:color-mix(in srgb,var(--hc) calc((40 + var(--m,0) * 8) * 1%),var(--panel-2));font-weight:700}
.pk-cb.pk-col.zero{background:var(--panel-2);color:var(--muted)}
.pk-cb:hover{box-shadow:inset 0 0 0 1px var(--muted)}
.pk-cb[tabindex="-1"]{cursor:default}
.pk-cb[tabindex="-1"]:hover{box-shadow:none}
.pk-cb[aria-pressed="true"]{box-shadow:inset 0 0 0 2.5px var(--up)}
.pk-cb.rec::after{content:"";position:absolute;top:5px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--text-2)}
.pk-off .pk-cb{background:transparent;color:var(--muted-2);cursor:default}
.pk-off .pk-cb.can{cursor:pointer}
.pk-off .pk-cb:hover{box-shadow:none}
.pk-off .pk-cb.can:hover{box-shadow:inset 0 0 0 1px var(--muted)}
.pk-detail td{padding:4px var(--s3) 16px 64px!important}
.pk-det{background:var(--panel-2);padding:12px 14px;font-size:14px;color:var(--text-2)}
.pk-det p{margin:0 0 10px}
.pk-rec6{display:grid;grid-template-columns:repeat(6,minmax(52px,1fr));gap:2px;max-width:420px}
.pk-rec6 div{text-align:center;font-size:13px;color:var(--text)}
.pk-rec6 .k{color:var(--muted);font-size:12px}
.pk-path{display:grid;grid-template-columns:auto auto 1fr;gap:6px 18px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--text)}
.pk-path .k{color:var(--muted);font-size:12px}
.pk-path .nm{font-family:var(--mono);color:var(--text-2)}
.pk-txt{padding:9px 6px!important;font-size:14px;color:var(--text-2)}
.pk-mono{color:var(--text)}
.pk-legend{display:flex;flex-wrap:wrap;gap:6px 18px;padding:12px var(--s3) 26px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
.pk-legend i{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:6px;position:relative;background:var(--panel-2)}
.pk-legend i.n::after{content:"";position:absolute;top:2px;right:2px;width:5px;height:5px;border-radius:50%;background:var(--text-2)}
.pk-legend i.p{box-shadow:inset 0 0 0 2.5px var(--up);background:transparent}
.pk-legend .won-k{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:6px;background:color-mix(in srgb,var(--gain) 30%,var(--panel-2))}
.pk-about{padding:14px var(--s3) 26px;border-top:1px solid var(--line)}
.pk-about h3,.pk-explain h3{margin:0 0 6px;font-size:14px;font-weight:600;color:var(--text-2)}
.pk-about p{margin:0 0 6px;font-size:14px;color:var(--text-2);max-width:70ch}
.pk-sw{display:block;height:3px;width:30px;margin:6px auto 0}
.pk-hs{display:none}

.pk-st{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px}
.pk-st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pk-st.hit{color:var(--gain)}.pk-st.miss{color:var(--lose)}.pk-st.open{color:var(--muted)}

.pk-slip{clip-path:var(--notch)}
.pk-chance{background:var(--sys);color:var(--on-accent);padding:var(--s3) var(--s3) 14px}
.pk-chance h2{margin:0 0 6px}
.pk-big{font-family:var(--disp);font-weight:600;font-size:68px;line-height:.95}
.pk-big.empty{font-family:var(--body);font-size:18px;font-weight:600;line-height:1.35}
.pk-chance p{margin:6px 0 0;font-size:14px}
.pk-cta{padding:var(--s3) var(--s3) 30px}
.pk-cta p{margin:6px 0 16px}
.pk-sbody{padding:14px var(--s3) 30px}
.pk-dist{display:grid;grid-template-columns:repeat(11,1fr);gap:3px;align-items:end;height:74px;margin:2px 0 4px}
.pk-dist .b{background:var(--dim);min-height:1px}
.pk-dist .b.win{background:var(--gain)}
.pk-distx{display:grid;grid-template-columns:repeat(11,1fr);gap:3px;font-size:11px;color:var(--muted);text-align:center}
.pk-distcap{font-size:12px;color:var(--muted);margin:4px 0 14px}
.pk-slot{margin:0 0 12px}
.pk-slot h3{display:flex;justify-content:space-between;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--text-2)}
.pk-slot h3 span{color:var(--muted);font-weight:400;font-family:var(--mono)}
.pk-slot.full h3 span{color:var(--text)}
.pk-chips{display:flex;flex-wrap:wrap;gap:5px}
.pk-chip{display:inline-flex;align-items:center;gap:7px;background:color-mix(in srgb,var(--hc,var(--panel-2)) 26%,var(--panel-2));padding:4px 8px;font-size:13px}
.pk-chip button{border:0;background:none;cursor:pointer;color:var(--muted);padding:0 3px;font-size:15px;line-height:1}
.pk-chip.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);padding:4px 10px}
.pk-chip .pk-st{font-size:12px;margin-left:2px}
.pk-chip .pk-st::before{width:6px;height:6px}
.pk-note{font-size:14px;margin:0 0 10px;padding:10px 12px;background:var(--panel-2);color:var(--text-2)}
.pk-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pk-btn{display:inline-block;border:0;padding:9px 13px;font-size:14px;font-weight:600;cursor:pointer;background:var(--panel-2);color:var(--text-2);text-decoration:none}
.pk-btn.primary{background:var(--text);color:var(--bg)}
.pk-btn:disabled{opacity:.45;cursor:default}
.pk-btn.pk-onacc{background:var(--on-accent);color:var(--sys-text)}
.pk-msg{min-height:20px;font-size:13px;color:var(--muted);margin-top:8px}
.pk-results{display:grid;grid-template-columns:1fr auto;gap:8px 12px;font-size:14px;margin:0 0 14px}
.pk-results .nm{font-family:var(--mono);color:var(--text)}
.pk-results .lab{color:var(--text-2)}

.pk-explain{padding:var(--s3) var(--s3) var(--s4)}
.pk-explain h2{margin:0 0 10px}
.pk-explain p{margin:0 0 12px;color:var(--text-2);max-width:66ch}
.pk-sec+.pk-sec{margin-top:var(--s4)}
.pk-when{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:10px 22px;margin:0;max-width:70ch}
.pk-when dt{font-weight:600}
.pk-when dd{margin:0;color:var(--text-2)}
.pk-earlier{list-style:none;margin:0;padding:0;max-width:60ch}
.pk-earlier li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.pk-earlier a{color:var(--text)}
.pk-earlier .num{color:var(--text-2)}

.pk .method{margin:0 0 var(--s4)}

.pk-mbar{display:none}
@media (max-width:979px){
  .pk-mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;justify-content:space-between;align-items:center;width:100%;
    background:var(--panel);color:var(--text);box-shadow:inset 0 1px 0 var(--line);border:0;cursor:pointer;
    padding:12px var(--s3) calc(12px + env(safe-area-inset-bottom,0px));font-size:15px;font-weight:600}
  .pk-mbar [data-mbar-right]{color:var(--up);font-family:var(--mono)}
  .pk{padding-bottom:64px}
}
@media (prefers-reduced-motion:reduce){.pk *{transition:none!important}}

@media (max-width:620px){
  .pk-head{padding-top:2rem}
  .pk-tabs{flex-wrap:nowrap;overflow-x:auto}
  .pk-tab{padding:8px 16px;white-space:nowrap}
  .pk-tablehead,.pk-legend,.pk-about{padding-left:14px;padding-right:14px}
  .pk-sbody,.pk-chance,.pk-explain,.pk-cta{padding-left:16px;padding-right:16px}
  .pk-when{grid-template-columns:1fr;gap:2px 0}.pk-when dd{margin-bottom:10px}
  .pk table{min-width:0;table-layout:fixed}
  .pk thead th{padding:8px 2px 6px;font-size:12px}
  .pk thead th.pk-first{width:30px;padding-left:10px}
  .pk-heat thead th.num{width:17%}
  .pk-heat thead th.num:nth-child(5){width:13%}
  .pk-hl{display:none}.pk-hs{display:inline}
  .pk-seed{width:30px;padding-left:10px!important;font-size:12px}
  .pk-team{min-width:0}
  .pk-tbtn{padding:10px 4px;gap:6px}
  .pk-tbtn .clogo{display:none}
  .pk-tname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .pk-chev{display:none}
  .pk-cell,.pk-cell.pk-off{width:auto;padding:2px!important}
  .pk-cb{min-height:42px;font-size:13px}
  .pk-detail td{padding:4px 10px 14px!important}
  .pk-rec6{grid-template-columns:repeat(6,1fr)}
  .pk-path{grid-template-columns:auto auto;gap:4px 12px}
  .pk-path>div:nth-child(3n){grid-column:1 / -1;margin-bottom:6px}
  .pk-path .k:nth-child(3){display:none}
  .pk-nxt{display:none}
  .pk-txt{padding:9px 3px!important;font-size:13px}
  .pk-progress thead th:nth-child(3){width:40px}
  .pk-progress thead th:nth-child(5){width:64px}
  .pk-progress thead th:nth-child(6){width:58px}
  .pk-progress .pk-st{font-size:13px;gap:5px}
}

/* the simulator */
.pk-bh{display:flex;flex-wrap:wrap;gap:8px;padding:4px var(--s3) 14px}
.pk-simgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);margin:var(--s3) 0 var(--s4)}
.pk-simgrid .pk-slip{position:static;display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.pk-simgrid .pk-slip{grid-template-columns:minmax(260px,1fr) 2fr}}
.pk-bracket{display:grid;grid-template-columns:repeat(5,minmax(160px,1fr));gap:18px;min-width:880px;padding:0 var(--s3) 26px}
.pk-rnd h3{font-size:14px;color:var(--text-2);margin:0 0 10px;font-weight:600}
.pk-grp{margin:0 0 14px}
.pk-grp h4{display:flex;justify-content:space-between;margin:0 0 5px;font-size:12px;color:var(--muted);font-weight:400}
.pk-grp h4 .nm{font-family:var(--mono);color:var(--text-2)}
.pk-match{--card:color-mix(in srgb,#fff 7%,var(--panel));background:var(--card);margin:0 0 16px;padding:4px}
.pk-split{display:flex;height:3px;margin:3px 5px 2px;gap:2px}
.pk-split i{display:block;background:var(--dim)}
.pk-split i.fav{background:var(--muted-2)}
.pk-split i.w{background:var(--gain)}
.pk-side{display:flex;align-items:center;gap:7px;width:100%;border:0;background:transparent;padding:7px 8px;font-size:13px;cursor:pointer;text-align:left;color:var(--text)}
.pk-side+.pk-side{margin-top:1px}
.pk-side .p{margin-left:auto;font-family:var(--mono);color:var(--muted);font-size:12px}
.pk-side .pk-reg{height:13px}
.pk-side:hover{box-shadow:inset 0 0 0 1px var(--muted)}
.pk-side.won{background:color-mix(in srgb,var(--gain) 32%,var(--card));font-weight:600}
.pk-side.won .p{color:var(--text-2)}
.pk-side.lost{color:var(--muted)}
.pk-side.lost .pk-reg{opacity:.45}
.pk-up{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--text)}
.pk-up::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--up)}
.pk-pending{font-size:13px;color:var(--muted);padding:2px 0 0;max-width:22ch}
.pk-settled{margin:4px 0 14px;padding-top:10px;border-top:1px solid var(--line)}
.pk-settled h4{margin:0 0 4px;font-size:12px;font-weight:600;color:var(--muted)}
.pk-settled ul{list-style:none;margin:0 0 8px;padding:0}
.pk-settled li{display:flex;align-items:center;gap:7px;font-size:13px;padding:2px 0}
.pk-settled li .pk-reg{height:12px}
.pk-settled .rc{margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:700}
.rc.s0{color:var(--flawless)}.rc.s1{color:var(--gain)}.rc.s3{color:var(--lose)}.rc.s2{color:var(--muted)}
.pk-cond{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.pk-cond h3{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--text-2)}
@media (max-width:760px){
  .pk-bracket{grid-template-columns:minmax(0,1fr);min-width:0;gap:6px;padding:0 14px 20px}
  .pk-rnd{padding-bottom:10px;border-bottom:1px solid var(--line)}
  .pk-rnd h3{margin-top:10px}
  .pk-grp .pk-mlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}
  .pk-side{padding:9px 7px}
  .pk-side>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .pk-bh{padding-left:14px;padding-right:14px}
  .pk-settled ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
}

/* the simulator's flow view: pools by record in columns, from 1000px; the stacked bracket below it */
.pk-flow{display:none}
@media (min-width:1000px){
  .pk-flow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px;padding:4px var(--s3) 26px;align-items:stretch}
  .pk-stackwrap{display:none}
}
.pk-fcol{display:flex;flex-direction:column;gap:18px}
.pk-fcol.spread{justify-content:space-between}
.pk-fcol .sp{flex:1}
.pk-fgrp{position:relative;background:color-mix(in srgb,#fff 5%,var(--panel));padding:8px 8px 6px}
.pk-fgrp h4{display:flex;justify-content:space-between;margin:0 0 6px;font-size:12px;font-weight:400;color:var(--muted)}
.pk-fgrp h4 .nm{font-family:var(--mono);color:var(--text);font-weight:700}
.pk-frow{position:relative;margin:0 0 7px}
.pk-frow .pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2px}
.pk-frow .vs{font-size:11px;color:var(--muted);padding:0 2px}
.pk-frow .pk-split{margin:3px 0 0}
.pk-frow.tbd .q{display:flex;justify-content:center;align-items:center;height:32px;color:var(--dim);font-size:13px;background:color-mix(in srgb,#fff 3%,var(--panel-2))}
.pk-fs{position:relative;display:flex;align-items:center;gap:6px;border:0;background:color-mix(in srgb,#fff 5%,var(--panel-2));padding:5px 6px;cursor:pointer;color:var(--text);min-width:0;font-size:12px}
.pk-fs.r{flex-direction:row-reverse}
.pk-fs .pc{font-family:var(--mono);color:var(--muted);font-size:11px}
.pk-fs:hover{box-shadow:inset 0 0 0 1px var(--muted)}
.pk-fs.won{background:color-mix(in srgb,var(--gain) 34%,var(--panel-2))}
.pk-fs.won .pc{color:var(--text-2)}
.pk-fs.lost .pk-logo{opacity:.4}
.pk-fs .updot{position:absolute;top:2px;left:25px;width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 0 2px var(--panel-2)}
.pk-fs.r .updot{left:auto;right:25px}
.pk-logo{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--panel-2);
  box-shadow:inset 0 0 0 2px var(--rc,var(--dim));font-family:var(--disp);font-size:11px;font-weight:600;color:var(--text)}
.pk-logo.EU{--rc:var(--eu)}.pk-logo.AM{--rc:var(--am)}.pk-logo.AP{--rc:var(--ap)}
.pk-logo.img{background:none}.pk-logo img{width:72%;height:72%;object-fit:contain}
.pk-logo.q{color:var(--dim);box-shadow:inset 0 0 0 1px var(--dim);font-family:var(--body);font-size:12px}
.pk-obox{padding:10px 10px 12px;background:color-mix(in srgb,var(--hc,#fff) 22%,var(--panel))}
.pk-obox.none{--hc:#fff;background:color-mix(in srgb,#fff 4%,var(--panel))}
.pk-obox h4{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 8px;font-size:12px;color:var(--text-2);font-weight:600}
.pk-obox h4 .nm{font-family:var(--mono);font-size:14px;color:var(--text)}
.pk-obox .lg{display:flex;flex-wrap:wrap;gap:6px}
.pk-obox .pk-logo{width:30px;height:30px}
.pk-mbar.pk-always{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;justify-content:space-between;align-items:center;width:100%;
  background:var(--panel);color:var(--text);box-shadow:inset 0 1px 0 var(--line);border:0;cursor:pointer;
  padding:12px var(--s3) calc(12px + env(safe-area-inset-bottom,0px));font-size:15px;font-weight:600}
.pk-mbar.pk-always [data-mbar-right]{color:var(--up);font-family:var(--mono)}
[data-simulator].pk{padding-bottom:64px}