/* Shared pieces for Projections, Player maps, Fixtures, Profile and Prices. */
.subtabs{flex-wrap:wrap;max-width:100%}
.subtabs button{min-height:34px}
.vbar{display:flex;justify-content:flex-start;margin:0 0 16px}
.psub>.vbar:first-child{margin-top:-4px}

/* toolbars: the real sections' control bar, in a recessed tray */
.kft-dock-bar.ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:10px 12px;margin-bottom:16px;border-radius:12px;background:var(--tray);border:1px solid var(--tray-edge);box-shadow:inset 0 2px 5px #0005,inset 0 -1px #ffffff0c}
[data-theme=light] .kft-dock-bar.ctl{box-shadow:inset 0 2px 4px #0002,inset 0 -1px #fff}
.ctl .field{min-height:36px}.ctl .field.grow{flex:1 1 220px;max-width:340px}
.ctl .field.sm{gap:6px}.ctl .field.sm select{background:none;border:0;outline:none;color:var(--ink);font:600 13px Manrope}
.ctl .field.price{gap:6px}.ctl .field.price input{width:52px;text-align:center}
.ctl-r{display:flex;gap:12px;margin-left:auto}
.ctl .bank button{min-height:30px;padding:0 10px;font-size:11.5px}
.ctl .toggle{font-size:12px}

/* the real "Show for my players" control (KFTTeamSession) */
.kft-team-view{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 0 10px}
.kft-team-view .kft-dock-item{position:relative;min-height:32px;padding:0 12px;border-radius:7px;cursor:pointer;font:700 12px Manrope;color:var(--key-ink);background:linear-gradient(var(--key-top),var(--key-mid) 48%,var(--key-bot));border:1px solid var(--key-edge);border-top-color:var(--key-lip);box-shadow:inset 0 1px #ffffff12,0 3px 0 var(--key-skirt)}
.kft-team-view .kft-dock-item[aria-pressed=true]{color:var(--accent-ink);background:linear-gradient(var(--acc-top),var(--acc-mid) 48%,var(--acc-bot));border-color:var(--acc-edge);box-shadow:inset 0 1px 3px #0004,0 1px 0 var(--acc-skirt);transform:translateY(1px)}
.kft-team-view .kft-dock-item:disabled{opacity:.45;cursor:default}
.kft-team-view [data-team-view-status]{font-size:12.5px;color:var(--muted)}
.kft-team-picker{flex:1 1 100%;display:grid;gap:10px}.kft-team-picker label{display:grid;gap:6px;font:700 12px Manrope;color:var(--muted)}
.kft-team-picker input{min-height:36px;padding:0 10px;border-radius:9px;background:var(--well);border:1px solid var(--well-edge);color:var(--ink);font:600 13px Manrope}
[data-team-candidates]{display:flex;flex-wrap:wrap;gap:8px}

.pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px}
.fine{margin:12px 0 0;font-size:12px;color:var(--faint)}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin:12px 0 0;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:8px;border-radius:2px;margin-right:6px;vertical-align:middle}

/* projections table */
.ptable th button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;letter-spacing:inherit;text-transform:inherit}
.ptable th[aria-sort] button,.ptable th button[aria-sort]{color:var(--accent)}
.ptable th.pl,.ptable td.pl{text-align:left;position:sticky;left:0;z-index:2;background:var(--ground)}
.ptable td.pl{min-width:200px}/* a real table cell, so its row line meets the others; the flex lives inside */
.ptable td.pl .plc{display:flex;align-items:center;gap:8px;min-width:0}
.ptable .tm{text-align:left;color:var(--muted)}
.ptable .ppos{display:none;font-style:normal}
.ptable .gwc{white-space:nowrap}.ptable .hidegw{margin-left:4px;width:16px;height:16px;border-radius:4px;border:1px solid var(--hair-2);background:none;color:var(--faint);font-size:11px;line-height:1;cursor:pointer;opacity:.6}
.ptable .hidegw:hover{opacity:1;color:var(--bad)}
.who-btn{display:flex;align-items:center;gap:10px;min-width:0;flex:1;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.who-btn:hover b{color:var(--accent)}
.cmp-pick{flex:none;width:24px;height:24px;border-radius:6px;cursor:pointer;font:800 14px/1 Manrope;color:var(--key-ink);background:linear-gradient(var(--key-top),var(--key-bot));border:1px solid var(--key-edge);box-shadow:0 2px 0 var(--key-skirt)}
.cmp-pick[aria-pressed=true]{color:var(--accent-ink);background:linear-gradient(var(--acc-top),var(--acc-bot));border-color:var(--acc-edge)}
.cell{position:relative;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.cell .heat{min-width:46px}
.rk{position:absolute;top:-6px;right:-6px;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;font:800 9px Manrope;font-style:normal;color:#1b1406;background:linear-gradient(#ffe39a,#d9a53a);box-shadow:0 1px 2px #0006}
.rk.r2{background:linear-gradient(#f1f3f5,#aab3bb)}.rk.r3{background:linear-gradient(#f0c8a8,#b07548)}
.ed-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;font:800 10.5px Manrope;font-style:normal;letter-spacing:.04em;color:var(--accent-ink);background:var(--accent);vertical-align:middle}
.cell .ed-tag{position:absolute;bottom:-7px;left:50%;translate:-50% 0;margin:0;padding:0 4px;font-size:8px}
.avgbar{display:inline-block;width:44px;height:6px;margin-right:8px;border-radius:3px;background:var(--track);vertical-align:middle;overflow:hidden}.avgbar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc-bot),var(--acc-top))}

/* compare */
.cmp{margin:0 0 22px;padding:16px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.cmp-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:12px}.cmp-head h3{font:600 18px Sora;margin-right:auto}
.cmp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 10px;border-radius:999px;background:var(--hair);font:700 12.5px Manrope}
.chip i{width:9px;height:9px;border-radius:50%}.chip button{width:20px;height:20px;border-radius:50%;border:0;background:none;color:var(--muted);cursor:pointer}
.cmp-chart{width:100%;height:auto;display:block;margin-bottom:8px}.cmp-chart text{fill:var(--muted);font:600 11px Manrope}.cmp-chart .gl{stroke:var(--hair)}
.sw{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.cmp-picker{display:grid;gap:10px;margin-top:12px}.cmp-picker .field{max-width:360px}.cmp-cands{display:flex;flex-wrap:wrap;gap:8px}

/* radar */
.radar,.range{list-style:none;margin:0;padding:0}
.radar li>button,.range li>button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:28px minmax(140px,240px) minmax(0,1fr) 64px;align-items:center;gap:14px;width:100%;padding:10px 4px;border-bottom:1px solid var(--hair);cursor:pointer}
.radar li>button:hover,.range li>button:hover{background:linear-gradient(90deg,var(--accent-soft),transparent 70%)}
.radar li>button:focus-visible,.range li>button:focus-visible{outline:2px solid var(--info);outline-offset:-2px}
.rbar{position:relative;height:14px;border-radius:4px;background:var(--track);box-shadow:inset 0 1px 2px #0006;overflow:hidden}
.rbar i{position:absolute;top:0;bottom:0}
.rbar.pos-GK i.xg{background:#e8b44a}.rbar.pos-DEF i.xg{background:#4aa3e8}.rbar.pos-MID i.xg{background:#3fbf8f}.rbar.pos-FWD i.xg{background:#e8664a}
.rbar i.xa{opacity:.55}.rbar.pos-GK i.xa{background:#e8b44a}.rbar.pos-DEF i.xa{background:#4aa3e8}.rbar.pos-MID i.xa{background:#3fbf8f}.rbar.pos-FWD i.xa{background:#e8664a}
.legend i.xg{background:var(--ink-2)}.legend i.xa{background:var(--ink-2);opacity:.45}
.rv{text-align:right;font:600 17px Sora;font-variant-numeric:tabular-nums}

/* points range */
.range li>button{grid-template-columns:28px minmax(140px,220px) minmax(0,1fr) 70px}
.bands{position:relative;display:block;height:30px}
.bands i{position:absolute;top:0;height:16px;display:grid;place-items:center;font:800 9.5px Manrope;font-style:normal;color:#0d1215;overflow:hidden;white-space:nowrap}
.bands small{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.s0{background:#8b96a0}.s1{background:#7fc6a6}.s2{background:#e8c25a}.s3{background:#ef9a5c}.s4{background:#e2574c}
.legend.bandkey i{height:10px}
.range .rv b{display:block}.range .rv small{font:600 11px Manrope;color:var(--muted)}
.brk-more{display:flex;flex-wrap:wrap;gap:8px 22px;padding:10px 4px 14px 46px;border-bottom:1px solid var(--hair);font-size:13px;color:var(--muted)}.brk-more b{color:var(--ink);font-variant-numeric:tabular-nums}

@media (max-width:760px){
  .kft-dock-bar.ctl{padding:10px}
  .ctl .field.grow{flex-basis:100%;max-width:none}
  .ctl-r{margin-left:0}
  .radar li>button,.range li>button{grid-template-columns:24px minmax(0,1fr) 56px;row-gap:6px}
  .radar .rbar,.range .bands{grid-column:2/3;grid-row:2}
  .rv{grid-column:3;grid-row:1/3}
  /* phones: the numbers are the point, so the name column is capped (names ellipsis on one line) and the
     Team column goes; the club already sits under every name */
  .ptable td.pl{min-width:0;width:196px;max-width:196px}
  .ptable th.pl{width:196px;max-width:196px}
  .ptable td.pl .who-btn{min-width:0;flex:1}.ptable td.pl .who,.ptable td.pl .who>span{display:block;min-width:0;overflow:hidden}
  .ptable td.pl .who b,.ptable td.pl .who small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ptable th.tm,.ptable td.tm{display:none}
  .ptable th.ps,.ptable td.ps{display:none}.ptable .ppos{display:inline}/* the position joins the club line */
  .brk-more{padding-left:4px}
}

/* player maps */
.vbar{flex-wrap:wrap;align-items:center;gap:12px}.vbar-r{display:flex;gap:12px;margin-left:auto}
.map-wrap{position:relative;border-radius:14px;background:var(--ground-2);border:1px solid var(--hair);padding:6px 4px}
.map{display:block;width:100%;height:auto}
.map text{fill:var(--muted);font:600 11px Manrope}.map .ax{font-size:12px;fill:var(--ink-2)}.map .gl{stroke:var(--hair)}
.map .dot{cursor:pointer;fill-opacity:.85;transition:r .12s}.map .dot:hover,.map .dot:focus{r:8;outline:none;stroke:var(--ink);stroke-width:2}
.map .dot.ed{stroke:var(--ink);stroke-width:2}
.map .lbl{fill:var(--ink);font:700 11px Manrope;paint-order:stroke;stroke:var(--ground-2);stroke-width:3px;pointer-events:none}
@media (max-width:760px){.vbar-r{margin-left:0}}
/* wide tables scroll inside their own frame, never the page */
.scroll-x{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
[data-act="edit"] *{pointer-events:none} /* see home.css: the real edit menu only stays open for a click on its trigger itself */

/* Clubs filter: a key that opens a panel of club toggles */
.clubs{position:relative;display:inline-flex}
.clubs-menu{position:absolute;z-index:20;top:calc(100% + 6px);left:0;width:min(420px,calc(100vw - 32px));padding:10px;border-radius:14px;background:var(--raised);border:1px solid var(--hair-2);box-shadow:var(--shadow)}
.clubs-top{display:flex;gap:12px;margin-bottom:8px}
.clubs-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;max-height:300px;overflow:auto;scrollbar-width:thin}
.clubchip{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;cursor:pointer;font:700 12.5px Manrope;color:var(--muted)}
.clubchip .kit svg{width:18px;height:auto}
.clubchip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clubchip[aria-pressed=true]{color:var(--ink);background:var(--well);box-shadow:inset 0 1px 3px #0005}
.clubchip[aria-pressed=false] .kit{opacity:.35;filter:grayscale(1)}
.clubchip:hover{background:var(--accent-soft)}
.clubchip:focus-visible{outline:2px solid var(--info);outline-offset:-2px}
@media (max-width:560px){.clubs-menu{position:fixed;left:16px;right:16px;top:auto;bottom:16px;width:auto}}
/* download keys: an arrow and a label */
.key.dl svg{width:12px;height:12px;fill:currentColor}
.map-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.vtabs{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
@media (max-width:560px){.vtabs{flex-wrap:nowrap;align-items:flex-start;gap:12px}.vtabs>:not(.help-key){flex:1 1 auto;min-width:0}.vtabs>.help-key{flex:none;margin-top:8px}}/* phones: the ? stays beside the bank instead of wrapping onto a line of its own */.pf-tabs{align-items:center;gap:8px;flex-wrap:wrap}.pf-how{margin-left:auto}
.ctl-r{display:inline-flex;flex-wrap:wrap;gap:12px;min-width:0;max-width:100%}
/* phones: a sub-tab bank keeps its ? beside it (Fixtures, Profile) instead of dropping it onto its own line */
@media (max-width:560px){:is(.vhead,.pf-tabs)>.bank.subtabs:has(+.help-key){flex:1 1 calc(100% - 80px);min-width:0}:is(.vhead,.pf-tabs)>.help-key{align-self:flex-start;margin-top:8px}}
/* compare: points and numbers are edit keys; the fixture strip uses the ticker's FDR cells */
.cmp-chart .cdot{cursor:pointer;stroke:var(--ground);stroke-width:2;transition:r .12s}
.cmp-chart .cdot:hover,.cmp-chart .cdot:focus-visible{r:7.5;outline:none;stroke:var(--ink)}
.cmp-chart .cdot.ed{stroke:var(--ink);stroke-width:2.5}
.cmp-hint{margin:6px 0 10px}
.cmp .cval{min-width:44px;padding:4px 6px;border-radius:6px;border:1px solid transparent;background:none;color:inherit;font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}
.cmp .cval:hover,.cmp .cval:focus-visible{border-color:var(--hair-2);background:var(--hair)}
.cmp .cval.ed{border-color:var(--accent);color:var(--accent)}
.cmp-fx{margin:0 0 14px}.cmp-fx th[scope=row]{text-align:left;white-space:nowrap}
.cmp-fx .cfx-stack{display:grid;gap:3px}
.cmp-fx .cfx{display:grid;place-items:center;min-width:46px;min-height:34px;padding:3px 6px;border-radius:6px;border:0;color:var(--fdr-ink);font:800 11.5px/1.1 Manrope;cursor:pointer;background:var(--hair)}
.cmp-fx .cfx small{font:700 10px Manrope;opacity:.85}
.cmp-fx .cfx.none{background:none;color:var(--faint);cursor:default}
.cmp-fx .cfx.d1{background:var(--fdr1)}.cmp-fx .cfx.d2{background:var(--fdr2)}.cmp-fx .cfx.d3{background:var(--fdr3)}.cmp-fx .cfx.d4{background:var(--fdr4)}.cmp-fx .cfx.d5{background:var(--fdr5)}
.cmp-fx .cfx:focus-visible{outline:2px solid var(--info);outline-offset:2px}

/* ---------- phones: controls fill their rows ----------
   A wrapping toolbar left a ragged last row (a lone "Clubs", a stray "CSV ↺"). On a phone every key and field
   grows to fill its row, grouped keys (.ctl-r) join the bar's rows, banks split the width evenly, and a sub-tab
   bank keeps all its tabs on one row in equal columns, labels wrapping instead of tabs. */
@media (max-width:560px){
  .kft-dock-bar.ctl{gap:12px}
  .kft-dock-bar.ctl>*,.kft-dock-bar.ctl .ctl-r>*,.kft-dock-bar.ctl .clubs>.key{flex:1 1 auto}
  .kft-dock-bar.ctl .ctl-r{display:contents}.kft-dock-bar.ctl .clubs{display:flex;flex:1 1 auto}
  .kft-dock-bar.ctl .field.sm{justify-content:space-between}.kft-dock-bar.ctl .field.sm select{flex:1;min-width:0}
  .kft-dock-bar.ctl .key.icon{flex:0 0 40px}
  .kft-dock-bar.ctl .bank{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);flex:1 1 100%}
  .bank.subtabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .bank.subtabs>button{min-width:0;min-height:44px;padding:4px 6px;white-space:normal;line-height:1.15;text-wrap:balance}
}
@media (max-width:560px){
  /* Rotation Finder: results never wider than the screen (their fixture strip scrolls inside), banks split evenly */
  #rotationFinder .kft-rot-results{grid-template-columns:minmax(0,1fr)}
  #rotationFinder .kft-rot-result{min-width:0;max-width:100%}
  #rotationFinder .kft-rot-bar{gap:12px}
  #rotationFinder .kft-rot-bar>.kft-ticker-metric-switch{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);flex:1 1 100%}
  #rotationFinder .kft-rot-bar>.kft-rot-field,#rotationFinder .kft-rot-bar>.kft-ticker-visible-range{flex:1 1 100%}
  #rotationFinder .kft-dock-sep{display:none}
  /* Prices: the direction keys wrap into full rows instead of running off the screen */
  #v-prices .pr-tools{flex-wrap:wrap;gap:12px}
  #v-prices .pr-tools>.bank{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%;overflow:visible}
  #v-prices .pr-tools>.bank>button{flex:1 1 auto}
  #v-prices .pr-tools>.field{flex:1 1 100%}
  /* an odd tile out spans the row */

  /* Profile: the "How it works" key sits under the tabs at full width */
  .pf-tabs>.pf-how{flex:1 1 100%}
}
@media (max-width:900px){.pr-team-result>.pf-ro:last-child:nth-child(odd){grid-column:1/-1}}/* two columns there: an odd tile out spans the row */
@media (max-width:560px){
  /* every other dock bar (fixtures and planner tickers, congestion, profile): the same fill-the-row rule */
  .wpane .kft-dock-bar:not(.ctl){flex-wrap:wrap;gap:12px}
  .wpane .kft-dock-bar:not(.ctl)>*{flex:1 1 auto}
  .wpane .kft-dock-bar:not(.ctl)>:is(.kft-ticker-metric-switch,.bank){display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);flex:1 1 100%}
  .wpane .kft-dock-bar:not(.ctl)>.kft-ticker-visible-range{display:flex;gap:12px;flex:1 1 100%}
  .wpane .kft-dock-bar:not(.ctl)>.kft-ticker-visible-range>label{flex:1 1 0;display:flex;align-items:center;justify-content:space-between;gap:6px}
  .wpane .kft-dock-bar:not(.ctl)>.kft-ticker-visible-range select{flex:1;min-width:0}
  .wpane .kft-dock-bar:not(.ctl)>:is(.kft-dock-sep,.pd-sep){display:none}
  .wpane .kft-dock-bar:not(.ctl)>.ticker-sort-state{flex:1 1 100%;text-align:center}
}
@media (max-width:560px){
  /* the real ticker CSS pins its metric banks to their content (flex:0 0 auto !important): on a phone they span */
  html .wpane .kft-dock-bar>.kft-ticker-metric-switch{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);flex:1 1 100%!important;width:100%!important}
  html .wpane .kft-dock-bar>.kft-ticker-metric-switch>*{min-width:0}
  html #rotationFinder .kft-rot-bar>.kft-rot-field-label{flex:1 1 100%}
}
@media (max-width:560px){
  /* planner dock: the five figures sit three to a row, each in an equal cell */
  .pdock>.pd:not(.chips):not(.acts){flex:1 1 calc(33.333% - 16px);min-width:0}
}