/* fomoves.com, full site design.
   Brand colours from assets/brand/README.txt: blue #1D3F8F, red #C8102E, black #111111.
   Blue is chrome, red is the scarce signal, white marks "now" on blue. */

:root{
  color-scheme: light;
  --blue:#1D3F8F; --blue-2:#142B61; --blue-soft:#E4E8F2; --blue-line:#AEBAD7;
  --red:#C8102E; --red-soft:#F9E5E8; --red-line:#ECAEB8;
  --paper:#F3F5F8; --card:#FFFFFF; --card-2:#F7F9FC;
  --rule:#DCE1E9; --rule-2:#C3CBD7;
  --ink:#111111; --ink-2:#4A5568; --muted:#6C7889;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --maxw:1220px;
  /* the filter bar's states, from the design handoff; everything else it
     uses maps onto the tokens above */
  --active-bg:#EEF2FB; --hover-bg:#F3F5FA; --faint:#8A91A0;
}

*{ box-sizing:border-box; }
body{
  margin:0; color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.5;
  background-color:var(--paper);
  background-image:repeating-linear-gradient(90deg, rgba(16,26,43,.022) 0 1px, transparent 1px 13px);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ margin:0; text-wrap:balance; }
p{ margin:0; }
ol,ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }
:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:16px; }

/* the one device carried straight from the landing page */
.splitbar{ height:4px; background:linear-gradient(90deg, var(--blue) 0 50%, var(--red) 50% 100%); }

/* masthead ------------------------------------------------------------------ */
.mast{ background:var(--card); border-bottom:1px solid var(--rule); }
.mast .wrap{ display:flex; align-items:center; gap:24px; padding-block:12px; }
/* README.txt: header usage is the horizontal lockup at ~40px badge height,
   and the badge runs nearly the full height of that file. Below 760px the
   <picture> serves the badge alone: the wordmark costs 87px of a 375px bar
   and the nav needs it more.
   .home must not shrink. It is the flex item, not the img inside it, so
   without this the link squeezed and img{max-width:100%} squashed a 106px
   lockup into 43px at a fixed 42px tall. */
.home{ flex:none; display:flex; align-items:center; }
.lockup{ height:42px; width:auto; display:block; }
.nav{ display:flex; align-items:center; gap:24px; overflow-x:auto; flex:1 1 auto; }
.nav a{
  flex:none; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); padding-block:7px; border-bottom:3px solid transparent; white-space:nowrap;
}
.nav a:hover{ color:var(--ink); }
.nav a.on{ color:var(--ink); border-bottom-color:var(--red); }
/* the order follows the season: build.py writes each item's place in winter
   and in summer, and the page marks which one it is before it paints */
.nav a{ order:var(--ow); }
html[data-season="summer"] .nav a{ order:var(--os); }

/* search, from every page */
.msearch{ flex:none; display:flex; align-items:center; gap:8px; width:250px; height:34px; padding:0 10px;
  border:1px solid var(--rule-2); border-radius:3px; background:var(--card); }
.msearch:focus-within{ border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
.msearch svg,.msearch-btn svg{ width:13px; height:13px; flex:none; fill:none; stroke:var(--muted); stroke-width:2.4; }
.msearch input{ flex:1 1 auto; min-width:0; height:100%; border:0; outline:0; padding:0; background:none;
  font:400 .8rem/1 var(--sans); color:var(--ink); -webkit-appearance:none; appearance:none; }
.msearch input::placeholder{ color:var(--muted); }
.msearch-btn{ display:none; }

/* the strip frame, which the key-dates rail sits in ------------------------------ */
.strip .wrap{ display:flex; align-items:stretch; padding-inline:0; }
.strip-label{ flex:none; display:flex; flex-direction:column; justify-content:center; gap:2px; padding:10px 16px; }
.strip-label .a{ font-size:.61rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.strip-label .b{ font-size:.65rem; font-weight:600; white-space:nowrap; }
.strip-scroll{ display:flex; overflow-x:auto; flex:1 1 auto; }

/* key dates, permanent chrome in brand blue ---------------------------------- */
.cal{ background:var(--blue); }
.cal .strip-label{ background:var(--blue-2); border-right:1px solid rgba(255,255,255,.14); }
.cal .strip-label .a{ color:#fff; }
.cal .strip-label .b{ color:rgba(255,255,255,.62); }
.cal .strip-scroll{ padding:14px 16px 12px; }
.cal a.strip-label:hover .a{ text-decoration:underline; text-underline-offset:3px; }
.rail-more{ flex:none; display:flex; align-items:center; padding:0 16px; border-left:1px solid rgba(255,255,255,.14);
  color:#fff; font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.rail-more:hover{ background:rgba(255,255,255,.08); }
.ticks{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(118px,1fr); min-width:850px; position:relative; flex:1 1 auto; }
.ticks::before{ content:""; position:absolute; left:0; right:0; top:5px; height:1px; background:rgba(255,255,255,.26); }
.tick{ position:relative; }
.tick a{ display:block; padding-top:17px; padding-right:12px; }
.tick a:hover .tname{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.tick::before{ content:""; position:absolute; top:0; left:0; width:1px; height:11px; background:rgba(255,255,255,.34); }
.tick .tname{ display:block; font-size:.75rem; font-weight:600; color:rgba(255,255,255,.80); white-space:nowrap; }
.tick .tmon{ display:block; font-size:.59rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.50); margin-top:2px; }
/* white, not red: red on blue is close to unreadable */
.tick.now::before{ background:#fff; width:2px; height:15px; }
.tick.now .tname{ color:#fff; font-weight:800; }
.tick.now .tmon{ color:#fff; }
.tick.now .dot{
  position:absolute; top:1px; left:-3px; width:8px; height:8px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.22);
}
@media (prefers-reduced-motion: no-preference){
  .tick.now .dot{ animation:beat 3.4s ease-in-out infinite; }
  @keyframes beat{ 0%,100%{ box-shadow:0 0 0 3px rgba(255,255,255,.20); } 50%{ box-shadow:0 0 0 8px rgba(255,255,255,.10); } }
}

/* club marks and headshots --------------------------------------------------- */
.mark{ width:18px; height:18px; flex:none; object-fit:contain; display:block; }
.nomark{ width:18px; height:18px; flex:none; border-radius:3px; background:var(--card-2); border:1px solid var(--rule); }

/* panels --------------------------------------------------------------------- */
.main .wrap{ padding-block:22px 30px; display:flex; flex-direction:column; gap:16px; }
.panel{ background:var(--card); border:1px solid var(--rule); border-radius:4px; overflow:hidden; }
.panel-head{ background:var(--blue); color:#fff; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.panel-head h2{ font-size:.8rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.panel-head .more{ color:rgba(255,255,255,.72); font-size:.64rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.panel-head .more:hover{ color:#fff; }
.chips{ display:flex; gap:6px; flex-wrap:wrap; padding:10px 14px; border-bottom:1px solid var(--rule); background:var(--card-2); }
.chip{ font-size:.65rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border:1px solid var(--rule-2); border-radius:2px; color:var(--ink-2); background:transparent; cursor:pointer; }
.chip:hover{ color:var(--ink); border-color:var(--ink-2); }
.chip.on{ color:#fff; background:var(--blue); border-color:var(--blue); }

.row{ display:grid; grid-template-columns:50px 132px minmax(130px,19%) 1fr 46px; align-items:center; gap:12px; padding:9px 14px; }
.wire li + li{ border-top:1px solid var(--rule); }
.wire li:hover{ background:var(--card-2); }
.clubs{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:800; letter-spacing:-.01em; }
.clubs .cl{ display:inline-flex; align-items:center; gap:5px; }
.clubs a.cl:hover span{ text-decoration:underline; }
.clubs .arw{ color:var(--muted); font-weight:500; }
.pos{ font-size:.65rem; font-weight:700; letter-spacing:.06em; color:var(--muted); }
/* the signature: the rule that permitted the move, not the player */
.mech{ display:inline-flex; align-items:center; gap:8px; min-width:0; }
.code{ flex:none; font-size:.59rem; font-weight:800; letter-spacing:.08em; color:var(--red); background:var(--red-soft); border:1px solid var(--red-line); border-radius:2px; padding:1px 5px; }
.legend{ display:flex; flex-wrap:wrap; gap:9px 20px; padding:13px 14px; }
.legend li{ display:inline-flex; align-items:center; gap:8px; }
.legend .kn{ font-size:.78rem; font-weight:600; color:var(--ink-2); }
.panel-foot{ padding:10px 14px; border-top:1px solid var(--rule); font-size:.69rem; color:var(--muted); background:var(--card-2); }

/* sections -------------------------------------------------------------------- */

/* footer ---------------------------------------------------------------------- */
.foot{ background:var(--blue); color:rgba(255,255,255,.72); }
.foot .wrap{ padding-block:30px 40px; }
.foot-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:22px 40px; flex-wrap:wrap; }
.foot-mark{ height:34px; width:auto; display:block; }
.foot-cols{ display:flex; gap:22px 40px; flex-wrap:wrap; }
.foot h4{ color:#fff; font-size:.64rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; margin-bottom:9px; }
.foot-links{ font-size:.79rem; color:rgba(255,255,255,.85); }
.foot-links a:hover{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.foot-base{ margin-top:26px; padding-top:16px; border-top:1px solid rgba(255,255,255,.18);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:14px 40px; }
.foot-base p{ font-size:.71rem; max-width:62ch; }
.foot-src h4{ margin-bottom:6px; }
.foot-base a{ text-decoration:underline; text-underline-offset:2px; }
.foot-base a:hover{ color:#fff; }
@media (max-width:760px){ .foot-base{ grid-template-columns:1fr; } }

/* narrow ---------------------------------------------------------------------- */
@media (max-width:980px){
  .row{ grid-template-columns:50px 132px 1fr 46px; }
  .detail{ grid-column:2 / 4; padding-top:1px; }
}
@media (max-width:760px){
  .msearch{ display:none; }
  .msearch-btn{ display:grid; place-items:center; flex:none; width:34px; height:34px; border:1px solid var(--rule-2); border-radius:3px; }
  .msearch-btn svg{ stroke:var(--ink-2); }
  .row{ grid-template-columns:50px 1fr; gap:3px 11px; padding:11px 14px; }
  .clubs,.pname,.detail,.mech{ grid-column:2; }
  /* scoped to the wire: unscoped it also hid the roster's Pos cells while
     leaving their header in place, shifting every column after it by one */
  .row .pos{ display:none; }
  /* a board carries more columns than a phone is wide. Scroll the table
     inside the panel, which clips its overflow, rather than losing the
     columns that hold the numbers. */
  .panel table.grid{ display:block; overflow-x:auto; }
  /* the first column holds while the rest scroll under it */
  .panel table.grid th:first-child,.panel table.grid td:first-child{ position:sticky; left:0; z-index:1;
    background:var(--card); box-shadow:inset -1px 0 0 var(--rule); }
  .panel table.grid th:first-child{ background:var(--card-2); }
  .panel table.grid tbody tr:hover td:first-child{ background:var(--card-2); }
  .panel table.grid tr.mine td:first-child{ background:var(--active-bg); }
  /* the nav scrolls under a fade at whichever edge has more */
  .nav{ scrollbar-width:none; }
  .nav::-webkit-scrollbar{ display:none; }
  .nav:not(.end){ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent); }
  .nav:not(.start):not(.end){ -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 36px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 36px),transparent); }
  .nav.end:not(.start){ -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px);
    mask-image:linear-gradient(90deg,transparent,#000 24px); }
}
/* the columns still to the right of a board a phone scrolls */
.tcue{ padding:6px 14px; font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); background:var(--card-2); border-bottom:1px solid var(--rule); text-align:right; }

/* player view ------------------------------------------------------------------- */
.phead{ background:var(--card); border:1px solid var(--rule); border-radius:4px; overflow:hidden;
  display:grid; grid-template-columns:132px 1fr; }
.phead .shot{ background:var(--blue-soft); border-right:1px solid var(--rule); }
.phead .shot img{ width:100%; height:100%; object-fit:cover; object-position:50% 6%; display:block; }
.phead .body{ padding:16px 18px 14px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.pname{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pname h1{ font-size:1.5rem; font-weight:800; letter-spacing:-.022em; }
.pname .num{ font-size:1rem; font-weight:700; color:var(--muted); }
.pname .club{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:700; color:var(--ink-2); }
.pname .club a.fcl{ display:inline-flex; align-items:center; gap:6px; }
.pfacts dd a{ color:var(--blue); font-weight:700; }
.pfacts dd a:hover{ text-decoration:underline; }
.pstatus{ font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  border-radius:2px; padding:3px 8px; color:var(--red); background:var(--red-soft); border:1px solid var(--red-line); }
.pstatus.ok{ color:var(--blue); background:var(--blue-soft); border-color:var(--blue-line); }
.pfacts{ display:flex; flex-wrap:wrap; gap:6px 26px; }
.pfacts div{ display:flex; flex-direction:column; gap:1px; }
.pfacts dt{ font-size:.58rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.pfacts dd{ margin:0; font-size:.86rem; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.pfacts dd.none{ color:var(--muted); font-weight:500; }

table.grid{ width:100%; border-collapse:collapse; }
table.grid th{ text-align:left; font-size:.6rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); background:var(--card-2); border-bottom:1px solid var(--rule); padding:8px 14px; white-space:nowrap; }
table.grid td{ padding:9px 14px; font-size:.83rem; border-top:1px solid var(--rule); vertical-align:middle; }
table.grid tbody tr:hover{ background:var(--card-2); }
table.grid td.num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
table.grid td.dim{ color:var(--muted); }

.tx li{ display:grid; grid-template-columns:112px 54px 1fr; gap:13px; align-items:baseline; padding:8px 14px; }
.tx li + li{ border-top:1px solid var(--rule); }
.tx li:hover{ background:var(--card-2); }
.tx .d{ font-size:.75rem; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; }
.tx a.d:hover{ color:var(--blue); text-decoration:underline; }
.tx .desc{ font-size:.83rem; color:var(--ink); }
.tx li.minor .desc{ color:var(--ink-2); }
/* the rest of a long transaction list, opened in place */
.txmore{ display:block; width:100%; padding:10px 14px; border:0; border-top:1px solid var(--rule); background:var(--card);
  color:var(--blue); font:600 13px/1 var(--sans); text-align:left; cursor:pointer; }
.txmore:hover{ color:var(--red); background:var(--card-2); }
@media (max-width:640px){
  /* a 72px square beside the name; the facts run the full width beneath */
  .phead{ grid-template-columns:72px minmax(0,1fr); gap:12px 14px; padding:14px; }
  .phead .shot{ width:72px; height:72px; border:1px solid var(--rule); border-radius:3px; overflow:hidden; align-self:start; }
  .phead .shot img{ object-position:50% 10%; }
  .phead .body{ display:contents; }
  .phead .pname{ grid-column:2; align-self:center; gap:4px 10px; }
  .phead .pname h1{ font-size:1.25rem; flex:1 1 100%; }
  .phead .pfacts,.phead .pnote{ grid-column:1 / -1; }
  .tx li{ grid-template-columns:54px 1fr; gap:4px 12px; }
  .tx .d{ grid-column:1 / -1; }
}

/* levels ------------------------------------------------------------------------ */
.lvl{ flex:none; font-size:.58rem; font-weight:800; letter-spacing:.08em; border-radius:2px;
  padding:2px 5px; border:1px solid var(--rule-2); color:var(--muted); background:var(--card); }
.lvl.mlb{ color:#fff; background:var(--blue); border-color:var(--blue); }
.lvl.aff{ color:var(--ink-2); border-color:var(--rule-2); }
.lvl.oth{ color:var(--muted); border-color:var(--rule); }

/* an all-levels wire: nothing hidden, but MLB reads loudest ---------------------- */
.wire li.q .clubs, .wire li.q .pname{ color:var(--ink-2); font-weight:600; }
.wire li.q .code{ opacity:.78; }
.pname{ font-size:.84rem; font-weight:700; color:var(--ink); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
a.pname:hover{ text-decoration:underline; }
.chiprow + .chiprow{ border-top:0; padding-top:0; }
.chiprow .lab{ font-size:.58rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); align-self:center; margin-right:2px; }


/* filtering --------------------------------------------------------------------- */
[hidden]{ display:none !important; }
.pname.raw{ font-weight:500; color:var(--ink-2); }
.state{ padding:26px 16px; text-align:center; font-size:.86rem; color:var(--muted); background:var(--card); border:1px solid var(--rule); border-radius:4px; }
.pnote{ font-size:.78rem; color:var(--muted); }
.pname a{ color:inherit; }
.pname a:hover{ text-decoration:underline; }
.pname .sep{ color:var(--muted); font-weight:400; }
.stale{ font-size:.58rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border:1px solid var(--rule-2); border-radius:2px; padding:1px 5px; margin-left:4px; }

/* date picker ------------------------------------------------------------------- */
.daynav{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.daynav .step{
  width:22px; height:22px; flex:none; display:grid; place-items:center; cursor:pointer;
  font-size:.9rem; font-weight:800; line-height:1; color:#fff; background:transparent;
  border:1px solid rgba(255,255,255,.34); border-radius:2px; padding:0;
}
.daynav .step:hover{ background:rgba(255,255,255,.14); }
.daynav input[type="date"]{
  font:600 .72rem/1 var(--sans); color:var(--ink); background:var(--card);
  border:1px solid rgba(255,255,255,.34); border-radius:2px; padding:4px 6px;
  font-variant-numeric:tabular-nums;
}


/* the player page's reset ---------------------------------------------------------- */
.chip.clear{ color:var(--red); border-color:var(--red-line); background:var(--red-soft); font-weight:800; }
.chip.clear:hover{ color:#fff; background:var(--red); border-color:var(--red); }

.detail{ font-size:.78rem; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row:not(.q) .detail{ color:var(--ink); }
.mech{ justify-self:end; }
.pname .to{ font-size:.72rem; font-weight:700; color:var(--muted); }

/* the front --------------------------------------------------------------------- */
/* what front offices decide next: six deadlines, the next one marked in red */
.decide{ display:grid; grid-template-columns:repeat(var(--n, 6), minmax(0,1fr)); }
.dcard{ display:flex; flex-direction:column; gap:6px; padding:14px 14px 13px; border-top:3px solid var(--rule);
  border-right:1px solid var(--rule); min-width:0; }
.dcard:last-child{ border-right:0; }
.dcard.next{ border-top-color:var(--red); }
.dcard:hover{ background:var(--card-2); }
.dcard .dk{ font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.dcard.next .dk{ color:var(--red); }
.dcard .dt{ font-size:1rem; font-weight:800; line-height:1.25; letter-spacing:-.01em; color:var(--ink); }
.dcard .db{ font-size:.8rem; color:var(--ink-2); line-height:1.45; flex:1 1 auto; }
.dcard .dl{ font-size:.74rem; font-weight:700; color:var(--blue); margin-top:4px; }
.dcard:hover .dl{ text-decoration:underline; }
@media (max-width:980px){
  .decide{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .dcard:nth-child(3n){ border-right:0; }
}
@media (max-width:640px){
  .decide{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .dcard:nth-child(3n){ border-right:1px solid var(--rule); }
  .dcard:nth-child(2n){ border-right:0; }
}

/* three figures, each with the rows behind it and the board that holds the rest */
.figs{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; align-items:stretch; }
.fig{ display:flex; flex-direction:column; }
.fig .state{ border:0; border-radius:0; flex:1 1 auto; }
.fig-lead{ display:flex; align-items:flex-start; gap:14px; padding:14px 14px 12px; border-bottom:1px solid var(--rule); }
.fig-lead .big{ font-size:2.6rem; font-weight:800; letter-spacing:-.03em; line-height:.95; color:var(--blue);
  font-variant-numeric:tabular-nums; flex:none; }
.fig-lead .big.red{ color:var(--red); }
.fig-what{ font-size:.95rem; font-weight:700; line-height:1.3; color:var(--ink); }
.fig-sub{ display:block; margin-top:4px; font-size:.76rem; font-weight:400; color:var(--muted); line-height:1.4; }
.fig-body{ flex:1 1 auto; padding:2px 14px 8px; }
.fig-note{ padding:10px 0; font-size:.78rem; color:var(--muted); }
.fig-foot{ padding:10px 14px; border-top:1px solid var(--rule); background:var(--card-2); font-size:.78rem;
  font-weight:700; color:var(--blue); }
.fig-foot:hover{ text-decoration:underline; }
.flist li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; }
.flist li + li{ border-top:1px solid var(--rule); }
.flist .fn{ min-width:0; font-size:.83rem; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.flist .fn a:hover{ text-decoration:underline; }
.flist .fmeta{ margin-left:7px; font-size:.68rem; font-weight:700; letter-spacing:.04em; color:var(--muted); }
.flist .fright{ display:inline-flex; align-items:center; gap:8px; flex:none; }
.flist strong{ font-size:.86rem; font-weight:800; font-variant-numeric:tabular-nums; }
a.fcl,span.fcl{ font-weight:800; color:var(--blue); }
a.fcl:hover{ text-decoration:underline; }
.stag{ flex:none; font-size:.6rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap;
  border-radius:2px; padding:2px 6px; border:1px solid var(--rule-2); color:var(--ink-2); background:var(--card); }
.stag.opt{ color:var(--blue); background:var(--blue-soft); border-color:var(--blue-line); }
.stag.signed{ color:var(--red); background:var(--red-soft); border-color:var(--red-line); }
.stag.done{ color:var(--muted); background:var(--card-2); border-color:var(--rule); }
/* the 40-man bars: each club against a line at 40 */
.sqs{ padding:8px 0 2px; }
.sq{ display:grid; grid-template-columns:40px 1fr 64px; align-items:center; gap:10px; padding:4px 0; }
.sq-track{ position:relative; height:12px; background:var(--card-2); border:1px solid var(--rule); border-radius:2px; }
.sq-track.bare{ height:14px; background:none; border:0; }
.sq-track.bare i{ position:absolute; top:0; transform:translateX(-50%); font-style:normal; font-size:.62rem; color:var(--muted); }
.sq-fill{ position:absolute; left:0; top:0; bottom:0; background:var(--blue-line); border-radius:1px; }
.sq-fill.over{ background:var(--red); }
.sq-line{ position:absolute; top:-4px; bottom:-4px; width:2px; margin-left:-1px; background:var(--ink); }
.sq-v{ text-align:right; font-size:.8rem; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.sq-v em{ margin-left:4px; font-style:normal; font-size:.72rem; color:var(--red); }
.sq-v em.ok{ color:var(--blue); }
.sq-axis{ padding-top:0; }
@media (max-width:980px){ .figs{ grid-template-columns:1fr; } }

/* the front's wire stops after a dozen rows and says where the rest are */
.wmore{ padding:10px 14px; border-top:1px solid var(--rule); font-size:.8rem; font-weight:700; }
.wmore a{ color:var(--blue); }
.wmore a:hover{ text-decoration:underline; }
.legendline{ display:block; margin-top:6px; }
.lgroup{ display:inline; margin-right:10px; }
.lg-h{ font-weight:700; color:var(--ink-2); }
.legendline .code{ margin-right:2px; }

/* a failed call says so, with a way to repeat it */
.state.failed{ color:var(--ink-2); }
.retry{ margin-left:6px; padding:3px 9px; border:1px solid var(--blue); border-radius:3px; background:var(--card);
  color:var(--blue); font:700 .74rem/1.2 var(--sans); cursor:pointer; }
.retry:hover{ color:#fff; background:var(--blue); }

/* club page --------------------------------------------------------------------- */
.crumbs{ font-size:.78rem; color:var(--muted); }
.crumbs a{ font-weight:700; color:var(--blue); }
.crumbs a:hover{ text-decoration:underline; }
/* the club's side of each board, four tiles over the roster */
.tiles{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); }
.tiles .state{ grid-column:1 / -1; border:0; border-radius:0; }
.tile{ display:flex; flex-direction:column; gap:5px; padding:14px 14px 13px; border-right:1px solid var(--rule); min-width:0; }
.tile:last-child{ border-right:0; }
.tile .tl{ font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.tile .tf{ font-size:.95rem; font-weight:700; color:var(--ink); line-height:1.2; }
.tile .tf strong{ font-size:2rem; font-weight:800; letter-spacing:-.03em; color:var(--blue); vertical-align:-2px; }
.tile .tf strong.red{ color:var(--red); }
.tile .tb{ font-size:.8rem; color:var(--ink-2); line-height:1.45; }
.tile .s2{ vertical-align:1px; }
.tile-links{ display:flex; flex-wrap:wrap; gap:6px 22px; padding:10px 14px; border-top:1px solid var(--rule); background:var(--card-2); }
.tile-links:empty{ display:none; }
.tile-links a{ font-size:.78rem; font-weight:700; color:var(--blue); }
.tile-links a:hover{ text-decoration:underline; }
@media (max-width:980px){
  .tiles{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .tile:nth-child(2n){ border-right:0; }
  .tile:nth-child(n+3){ border-top:1px solid var(--rule); }
}
@media (max-width:560px){
  .tiles{ grid-template-columns:1fr; }
  .tile{ border-right:0; }
  .tile + .tile{ border-top:1px solid var(--rule); }
}
.count{ padding:12px 14px; border-bottom:1px solid var(--rule); background:var(--card-2); font-size:.86rem; color:var(--ink-2); }
.count strong{ font-size:1.1rem; font-weight:800; color:var(--ink); }
.count .open{ color:var(--blue); font-weight:700; }
.count .full{ color:var(--red); font-weight:700; }
.count .dim{ color:var(--muted); }
.roster td.pos{ font-size:.7rem; font-weight:700; letter-spacing:.05em; color:var(--muted); }
.roster a:hover{ text-decoration:underline; }
.stat{ font-size:.68rem; font-weight:700; letter-spacing:.04em; border-radius:2px; padding:2px 6px; }
.stat.ok{ color:var(--blue); background:var(--blue-soft); }
.stat.opt{ color:var(--ink-2); background:var(--card-2); border:1px solid var(--rule); }
.stat.il{ color:var(--red); background:var(--red-soft); }
.stat.other{ color:var(--muted); background:var(--card-2); border:1px solid var(--rule); }
.roster .dim{ color:var(--muted); font-size:.76rem; }

/* mechanics --------------------------------------------------------------------- */
.board th[data-sort]{ cursor:pointer; }
/* a sortable heading is a button, so a keyboard can sort too */
.sortbtn{ padding:0; border:0; background:none; font:inherit; letter-spacing:inherit; text-transform:inherit;
  color:inherit; cursor:pointer; }
.sortbtn:hover{ color:var(--ink); }
/* a row that opens its club */
tr.rowlink{ cursor:pointer; }
tr.mine td{ background:var(--active-bg); }
.lastclub{ font-weight:700; color:var(--blue); }
.lastclub:hover{ text-decoration:underline; }
.board th[data-sort]:hover{ color:var(--ink); }
.board th.sorted{ color:var(--blue); }
.board td a{ display:inline-flex; align-items:center; gap:6px; font-weight:700; }
.board td a:hover{ text-decoration:underline; }
.board .open{ color:var(--blue); font-weight:700; }
.board .full{ color:var(--muted); }
.board .over{ color:var(--red); font-weight:700; }
.codegroup{ padding:12px 14px; border-top:1px solid var(--rule); }
.codegroup:first-of-type{ border-top:0; }
.codegroup h3{ font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
.count .over{ color:var(--red); font-weight:700; }
.board .heavy{ color:var(--red); font-weight:700; }
.opt{ font-weight:800; color:var(--blue); }
.opt.none{ color:var(--red); }

/* key dates --------------------------------------------------------------------- */
.dates td{ vertical-align:top; }
.dates .ph{ font-weight:700; white-space:nowrap; }
.dates .rule{ color:var(--ink-2); font-size:.83rem; max-width:62ch; }
.dates tr.live{ background:var(--blue-soft); }
.nowtag{ font-size:.58rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--blue); border-radius:2px; padding:1px 5px; margin-left:5px; }
.seewire{ font-size:.74rem; font-weight:700; color:var(--blue); white-space:nowrap; }
.seewire:hover{ text-decoration:underline; }
.nf-links{ padding:14px; font-size:.86rem; color:var(--muted); }
.nf-links a{ font-weight:700; color:var(--blue); }
.nf-links a:hover{ text-decoration:underline; }

/* search ------------------------------------------------------------------------ */
.sform{ display:flex; align-items:center; gap:12px; padding:18px 18px 14px; }
.sform-box{ flex:1 1 auto; display:flex; align-items:center; gap:10px; height:44px; padding:0 14px;
  border:1px solid var(--blue); border-radius:3px; background:var(--card); }
.sform-box:focus-within{ box-shadow:0 0 0 1px var(--blue); }
.sform-box svg{ width:15px; height:15px; flex:none; fill:none; stroke:var(--ink-2); stroke-width:2.4; }
.sform-box input{ flex:1 1 auto; min-width:0; height:100%; border:0; outline:0; padding:0; background:none;
  font:inherit; font-size:1rem; color:var(--ink); }
.sform-note{ flex:none; font-size:.8rem; color:var(--muted); }
.stabs{ display:flex; gap:22px; padding:0 18px; border-bottom:1px solid var(--rule); overflow-x:auto; scrollbar-width:none; }
.stabs::-webkit-scrollbar{ display:none; }
.stab{ flex:none; padding:8px 0; border:0; border-bottom:3px solid transparent; background:none; cursor:pointer;
  font:inherit; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.stab[aria-selected="true"]{ border-bottom-color:var(--red); color:var(--ink); }
.stab:hover{ color:var(--ink); }
.shint{ padding:10px 18px 0; font-size:.74rem; color:var(--muted); }
.sgroup{ margin-top:14px; }
.sgroup-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 18px;
  background:var(--blue); color:#fff; }
.sgroup-h h3{ font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.sgroup-h span{ font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.72); text-align:right; }
.srow{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:14px; align-items:baseline;
  padding:10px 18px; border-top:1px solid var(--rule); font-size:.86rem; color:var(--ink); }
.sgroup-h + .srow{ border-top:0; }
a.srow:hover{ background:var(--hover-bg); }
.srow mark{ background:var(--red-soft); color:inherit; padding:0 1px; border-radius:1px; }
.srow.rule > span{ color:var(--ink-2); }
.sgo{ color:var(--blue); font-weight:700; white-space:nowrap; }
.scl{ display:inline-flex; align-items:center; gap:8px; }
.scl .mark{ width:18px; height:18px; }
.scl b{ color:var(--blue); font-weight:800; }
.scl span{ font-weight:600; }
.sfig{ color:var(--ink-2); }
.sfig b{ color:var(--ink); font-weight:800; }
.srow.move{ grid-template-columns:220px minmax(0,1fr) auto; align-items:center; }
.swho{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; }
.sdate{ flex:0 0 100%; font-size:.76rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.sdate:hover{ color:var(--blue); }
.scode{ font-weight:800; color:var(--blue); }
a.scode:hover,.srow.move a:hover b,.srow.player a:hover b{ text-decoration:underline; }
.sdesc{ color:var(--ink-2); text-wrap:pretty; }
.srow.player{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; align-items:center; }
.spos{ font-size:.7rem; font-weight:700; letter-spacing:.05em; color:var(--muted); }
.send{ justify-self:end; }
.send .stag{ text-decoration:none; }
.smore{ display:block; width:100%; padding:9px 18px; border:0; border-top:1px solid var(--rule); background:none;
  text-align:left; cursor:pointer; font:inherit; font-size:.78rem; font-weight:700; color:var(--blue); }
.smore:hover{ background:var(--hover-bg); }
.sempty{ padding:12px 18px 16px; font-size:.86rem; color:var(--muted); }
.sstart{ padding:6px 18px 20px; font-size:.9rem; color:var(--ink-2); max-width:72ch; }
.sstart a{ color:var(--blue); font-weight:700; }
#search .panel-foot{ margin-top:14px; }
@media (max-width:760px){
  .sform{ padding:14px 14px 10px; }
  .sform-note{ display:none; }
  .stabs{ gap:16px; padding:0 14px; }
  .srow,.srow.move,.srow.player{ grid-template-columns:minmax(0,1fr); gap:4px; padding:10px 14px; }
  .srow.move .code{ justify-self:start; }
  .send{ justify-self:start; }
  .sgroup-h{ padding:9px 14px; }
}

/* free agency ----------------------------------------------------------------- */
.lead{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; padding:12px 14px; border-bottom:1px solid var(--rule);
  font-size:.95rem; font-weight:600; color:var(--ink); }
.lead-big{ font-size:1.6rem; font-weight:800; letter-spacing:-.02em; color:var(--blue); }
.lead-parts{ margin-left:auto; font-size:.8rem; font-weight:400; color:var(--ink-2); }
.lead-parts strong{ font-weight:800; color:var(--ink); }
.py th.sorted{ color:var(--blue); }

/* platform year ----------------------------------------------------------------- */
.py td a{ font-weight:700; }
.py td a:hover{ text-decoration:underline; }
.py .pos{ font-size:.68rem; font-weight:700; color:var(--muted); letter-spacing:.04em; }
.mirage{ color:var(--red); font-weight:800; }
.real{ color:var(--blue); font-weight:800; }

/* platform year tool ------------------------------------------------------------ */
.pybody{ display:grid; grid-template-columns:1.1fr 1fr; gap:0; }
@media (max-width:900px){ .pybody{ grid-template-columns:1fr; } }
.pyledger{ padding:14px; border-right:1px solid var(--rule); }
@media (max-width:900px){ .pyledger{ border-right:0; border-bottom:1px solid var(--rule); } }
.pycalc{ padding:14px; }

/* the bridge: each deduction from the line to the talent */
.ledger{ display:flex; flex-direction:column; }
.lrow{ display:grid; grid-template-columns:minmax(120px,1.2fr) 1fr 62px; gap:10px;
  align-items:center; padding:7px 0; border-top:1px solid var(--rule); }
.lrow:first-child{ border-top:0; }
.lrow.balance,.lrow.talent{ background:var(--card-2); }
.llabel{ font-size:.79rem; font-weight:700; }
.lrow.balance .llabel,.lrow.talent .llabel{ font-weight:800; }
.lhint{ display:block; font-size:.66rem; font-weight:400; color:var(--muted); line-height:1.35; }
.ltrack{ position:relative; height:9px; background:var(--card-2); border-radius:2px; }
.lrow.balance .ltrack,.lrow.talent .ltrack{ background:transparent; }
.lbar{ position:absolute; top:0; bottom:0; left:50%; border-radius:2px; transition:width .45s ease; }
.lbar.pos{ transform:translateX(0); }
.lbar.neg{ transform:translateX(-100%); }
.lbar.nonrepeat{ background:var(--red); }
.lbar.regress{ background:var(--blue); }
.lval{ text-align:right; font-size:.8rem; font-weight:700; font-variant-numeric:tabular-nums; }
.lrow.talent .lval{ color:var(--blue); font-weight:800; }

.calc{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end; margin-bottom:14px; }
.calc .lab,.stat .lab{ display:block; font-size:.58rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.cin{ width:88px; font:700 .88rem/1 var(--sans); color:var(--ink); background:var(--card);
  border:1px solid var(--rule-2); border-radius:2px; padding:6px 8px; }
.seg{ display:inline-flex; gap:5px; }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:10px; }
.stat{ border:1px solid var(--rule); border-radius:3px; padding:9px 10px; background:var(--card-2); }
.stat strong{ display:block; font-size:1.18rem; font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
.stat .note{ display:block; font-size:.64rem; color:var(--muted); line-height:1.35; margin-top:2px; }

/* trend ------------------------------------------------------------------------- */
.pytrend{ position:relative; padding:14px 14px 4px; border-bottom:1px solid var(--rule); }
.trend{ position:relative; }
.trend svg{ width:100%; display:block; cursor:pointer; }
.tkey{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; font-size:.7rem;
  color:var(--ink-2); padding:2px 0 8px; }
.tkey i{ display:inline-block; width:13px; height:2px; vertical-align:middle; margin-right:6px; }
.tkey .tnote{ margin-left:auto; color:var(--muted); }
.ttip{ position:absolute; top:0; transform:translate(-50%,-108%); z-index:2; white-space:nowrap;
  background:var(--card); border:1px solid var(--rule-2); border-radius:3px; padding:7px 10px;
  font-size:.73rem; color:var(--ink-2); box-shadow:0 2px 10px rgba(16,26,43,.12); pointer-events:none; }
.ttip .tyr{ font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.ttip b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.ttip b.tt{ color:var(--blue); }

/* arbitration ------------------------------------------------------------------- */
.arb{ display:inline-block; font-size:.64rem; font-weight:800; letter-spacing:.05em;
  border-radius:2px; padding:2px 5px; white-space:nowrap;
  border:1px solid var(--rule-2); color:var(--ink-2); background:var(--card); }
.arb.arb1,.arb.arb2,.arb.arb3,.arb.arb4{
  color:var(--blue); background:var(--blue-soft); border-color:var(--blue-line); }
.arb.pre{ color:var(--muted); border-color:var(--rule); background:var(--card-2); }
.arb.vet{ color:var(--ink-2); background:var(--card-2); }
.arb.oth{ color:var(--muted); border-color:var(--rule); text-transform:none; }
/* settled without a hearing: still the class, no longer a case */
.arb.off{ opacity:.5; }
.s2{ display:inline-block; margin-left:4px; font-size:.56rem; font-weight:800; letter-spacing:.06em;
  color:var(--red); background:var(--red-soft); border:1px solid var(--red-line);
  border-radius:2px; padding:1px 4px; }
.s2flat{ font-weight:800; color:var(--red); }
.board .share{ font-size:.7rem; font-weight:600; color:var(--muted); }
.arbboard td.num .dim{ font-weight:400; }

/* heading explainers ------------------------------------------------------------ */
.hint{
  display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px;
  margin-left:5px; border-radius:50%; border:1px solid var(--rule-2); color:var(--muted);
  font-size:.5rem; font-weight:800; font-style:normal; line-height:1; letter-spacing:0;
  text-transform:none; vertical-align:middle; cursor:help; user-select:none; flex:none;
}
.hint:hover,.hint:focus-visible{ color:#fff; background:var(--blue); border-color:var(--blue); }
.hint[aria-expanded="true"]{ color:#fff; background:var(--blue); border-color:var(--blue); }
/* on the blue panel head the muted grey would disappear */
.panel-head .hint{ border-color:rgba(255,255,255,.42); color:rgba(255,255,255,.82); }
.panel-head .hint:hover,.panel-head .hint:focus-visible{ color:var(--blue); background:#fff; border-color:#fff; }
.hintbox{
  position:fixed; z-index:60; max-width:290px; padding:9px 11px; border-radius:3px;
  background:var(--ink); color:rgba(255,255,255,.92);
  font-family:var(--sans); font-size:.72rem; font-weight:500; line-height:1.45;
  letter-spacing:0; text-transform:none; text-align:left;
  box-shadow:0 8px 24px rgba(16,26,43,.28);
}
/* the club a contract was signed with, and the one before it. No arrow: the
   table holds deals, not a career path, so the clubs chain only where the
   moves during a deal are named under it (.cmoves, one .ctrade a move), and
   how an extension ended early under its term (.cend). The moves are the
   deal's own story, oldest first, so they sit indented behind a rule: the
   table itself runs newest first. */
.cfrom{ margin-left:7px; font-size:.7rem; font-weight:500; color:var(--muted);
  font-variant-numeric:normal; }
.cmoves{ display:block; margin:3px 0 1px 2px; padding-left:8px; border-left:2px solid var(--rule-2); }
.ctrade, .cend{ display:block; margin-top:1px; font-size:.7rem; font-weight:500; color:var(--muted);
  font-variant-numeric:normal; white-space:nowrap; }
.cmoves .ctrade:first-child{ margin-top:0; }
/* a count that opens the rows behind it */
.board a.drill{ font-weight:800; color:var(--ink); border-bottom:1px solid var(--rule-2); }
.board a.drill:hover{ color:var(--blue); border-bottom-color:var(--blue); text-decoration:none; }
/* what the workload floor is holding back, said rather than left as a gap */
.undernote{ padding:10px 14px; border-top:1px solid var(--rule); background:var(--card-2);
  font-size:.75rem; color:var(--ink-2); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* an arbitration year sits on the same timeline as a signed contract, but it is
   a salary the two sides set rather than a deal either of them shopped */
.arbyear td{ background:var(--card-2); }
.arbboard .up{ font-weight:700; color:var(--ink); }
/* the projected class: a flag that is context rather than warning, and the
   past cases behind a projection, opened under its row */
.code.soft{ color:var(--ink-2); background:var(--card-2); border-color:var(--rule-2); }
.projboard .code{ white-space:nowrap; }
.projboard .cmpbtn{ padding:3px 8px; font-size:.6rem; }
.projboard .cmpbtn[aria-expanded="true"]{ color:#fff; background:var(--blue); border-color:var(--blue); }
.projboard tr.cmprow td{ border-top:0; padding:0 14px 11px; background:transparent; }
.projboard tr.cmprow:hover{ background:transparent; }
.cmphead{ display:inline-block; margin-right:12px; font-size:.6rem; font-weight:800;
  letter-spacing:.11em; text-transform:uppercase; color:var(--muted); }
.cmp{ display:inline-block; margin-right:18px; font-size:.78rem; color:var(--ink-2); white-space:nowrap; }
.cmp strong{ color:var(--ink); font-weight:700; }
/* the method memo, linked where the numbers are rather than only in a footer */
.panel-head .method{
  font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; border:1px solid rgba(255,255,255,.42); border-radius:2px; padding:3px 8px;
  white-space:nowrap; margin-left:auto; margin-right:10px;
}
.panel-head .method:hover{ color:var(--blue); background:#fff; border-color:#fff; }

/* filter bar: the one toolbar every list shares ------------------------------ */
.panel-head .tally{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; white-space:nowrap; }
.head-side{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
/* when a page's controls do not fit beside the filters they wrap as a group,
   still right-aligned, rather than squeezing each group into a grid */
.fbar{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:12px 14px; border-bottom:1px solid var(--rule); background:var(--card); }
.fsearch{ width:240px; height:34px; flex:none; border:1px solid var(--rule-2); border-radius:3px; padding:0 12px;
  font:400 13px/1 var(--sans); color:var(--ink); background:var(--card); -webkit-appearance:none; appearance:none; }
.fsearch::placeholder{ color:var(--faint); }
.fsearch:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
.ffacets,.fctls{ display:flex; align-items:center; gap:8px; }
.fctls{ margin-left:auto; }
.fspace{ flex:1 1 auto; }
.fbtn{ height:34px; display:inline-flex; align-items:center; gap:8px; padding:0 12px; cursor:pointer; white-space:nowrap;
  border:1px solid var(--rule-2); border-radius:3px; background:var(--card); color:var(--ink); font:400 13px/1 var(--sans); }
.fbtn .flab,.fpop-head .flab{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.fbtn .fsum{ font-weight:600; }
.fbtn .fcaret{ font-size:9px; color:var(--faint); }
.fbtn.on{ background:var(--active-bg); border-color:var(--blue); color:var(--blue); }
.fclearall,.fclear{ background:none; border:0; padding:0; cursor:pointer; color:var(--blue); font:600 13px/1 var(--sans); white-space:nowrap; }
.fclear{ font-size:12px; }
.fclearall:hover,.fclear:hover{ color:var(--red); }
.fpop{ position:fixed; z-index:50; display:flex; flex-direction:column; padding:6px; background:var(--card);
  border:1px solid var(--rule); border-radius:4px; box-shadow:0 8px 24px rgba(17,20,27,.14); }
.fpop-head{ display:flex; justify-content:space-between; align-items:center; padding:6px 8px 8px;
  border-bottom:1px solid var(--rule); margin-bottom:4px; }
.fopts{ display:grid; grid-template-columns:minmax(0,1fr); gap:2px; overflow-y:auto; min-height:0; }
.fpop.wide .fopts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.fopt{ display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:3px; font-size:13px; cursor:pointer; user-select:none; }
.fopt:hover{ background:var(--hover-bg); }
.fopt:focus-visible{ background:var(--hover-bg); outline:2px solid var(--red); outline-offset:-2px; }
.fbox{ width:14px; height:14px; flex:none; border-radius:2px; border:1.5px solid var(--rule-2); background:var(--card);
  display:grid; place-items:center; color:#fff; font-size:10px; font-weight:700; line-height:1; }
.fbox::after{ content:"\2713"; opacity:0; }
.fopt[aria-selected="true"] .fbox{ background:var(--blue); border-color:var(--blue); }
.fopt[aria-selected="true"] .fbox::after{ opacity:1; }
/* a page control picks one: a tick beside the choice, no box */
.fopt.one .fbox{ border:0; background:none; color:var(--blue); }
.fopt.one[aria-selected="true"] .fbox{ background:none; }
.fopt.one[aria-selected="true"] .flbl{ font-weight:700; color:var(--blue); }
.fopt .mark,.fopt .nomark{ width:12px; height:12px; }
.flbl{ flex:1; font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fn{ color:var(--faint); font-size:12px; font-variant-numeric:tabular-nums; }
.fopt.zero{ opacity:.35; }
.fchips{ display:flex; flex-wrap:wrap; gap:6px; padding:10px 14px; background:var(--card-2); border-bottom:1px solid var(--rule); }
.fchip{ display:inline-flex; align-items:center; gap:6px; padding:3px 6px 3px 9px; border-radius:12px; cursor:pointer;
  background:var(--card); border:1px solid var(--blue); color:var(--blue); font:600 12px/1.3 var(--sans); }
.fchip .x{ font-size:13px; line-height:1; color:var(--muted); }
.fchip:hover .x{ color:var(--red); }
.fempty{ padding:40px 16px; text-align:center; color:var(--muted); font-size:14px; }
.ffilter{ display:none; }
@media (max-width:760px){
  .ffacets,.fctls{ flex-wrap:wrap; }
  .fctls{ margin-left:0; }
  .fsearch{ flex:1 1 0; min-width:0; width:auto; }
  .fspace{ display:none; }
  /* the facets fold under one button; opened, they stack full width */
  .ffilter{ display:inline-flex; align-items:center; gap:7px; flex:none; height:34px; padding:0 12px; cursor:pointer;
    border:1px solid var(--rule-2); border-radius:3px; background:var(--card); color:var(--ink); font:600 13px/1 var(--sans); }
  .ffilter[hidden]{ display:none; }
  .ffilter.on,.ffilter[aria-expanded="true"]{ border-color:var(--blue); color:var(--blue); background:var(--active-bg); }
  .fcount{ display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
    background:var(--blue); color:#fff; font-size:11px; font-weight:800; }
  .fcount[hidden]{ display:none; }
  .fbar .ffacets{ display:none; }
  .fbar.open .ffacets:not([hidden]){ display:flex; flex:1 1 100%; flex-direction:column; align-items:stretch; gap:8px;
    padding:10px; background:var(--card-2); border:1px solid var(--rule); border-radius:4px; }
  .fbar.open .ffacets .fbtn{ width:100%; justify-content:space-between; }
  .fbar.open .ffacets .fbtn .fsum{ margin-left:auto; }
  .fclearall{ order:2; }
}