/* Cricket, on top of football's style.css.
   Only what is genuinely new lives here. Everything the two sports share — the
   background wash, the hero grid, the search box, the cover card, the freshness
   pill, hover colours, the method columns — comes from style.css and is not
   restated, so the two cannot drift apart. */

/* The switcher holds a link and a button side by side; they must look identical. */
a.sport{text-decoration:none;display:inline-flex;align-items:center}

/* Flags reuse football's league-mark slot, so sizing and alignment match. */
img.lmark.flag{width:1.35rem;height:1rem;border-radius:2px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.suggestions li{display:grid;grid-template-columns:1.35rem 1fr auto;gap:.6rem;
  align-items:center;padding:.45rem .6rem;border-radius:7px;cursor:pointer;list-style:none}
@media (hover:hover){.suggestions li:hover{background:var(--surface)}}
.suggestions li.on{background:var(--surface)}
.smeta{color:var(--faint);font-size:.83rem;white-space:nowrap}
.who2{display:flex;align-items:center;gap:.55rem}
.card h2 img.lmark{width:1.6rem;height:1.2rem;margin-right:.55rem;vertical-align:-.15rem}
.chip img.lmark{width:1.1rem;height:.82rem}

/* The routes double as the mode chooser, so they have to look pressable. */
.route{cursor:pointer;border:1px solid transparent;border-radius:var(--radius);
  padding:.75rem .9rem;margin:-.75rem -.9rem;transition:border-color .15s,background .15s}
@media (hover:hover){.route:hover{border-color:var(--gold)}}
.route[aria-pressed=true]{background:var(--surface)}
.route[data-route=explore][aria-pressed=true]{border-color:rgba(240,188,99,.4)}
.route[data-route=scout][aria-pressed=true]{border-color:rgba(87,180,236,.4)}

/* Tab row carries the mode switcher on the right. */
.tabrow{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  flex-wrap:wrap}
.tabrow .tabs{flex:1 1 auto}
.modewrap{display:flex;align-items:center;gap:.5rem;padding-bottom:.45rem}
.modewrap-label{font-size:.78rem;color:var(--faint)}
.segmented{display:flex;border:1px solid var(--hairline);border-radius:99px;
  background:var(--surface);padding:2px}
.segmented button{border:0;background:none;cursor:pointer;color:var(--faint);
  font-family:var(--cond);font-weight:600;font-size:.88rem;padding:.22rem .68rem;
  border-radius:99px}
@media (hover:hover){.segmented button:hover{color:var(--ink)}}
.segmented button[aria-pressed=true]{background:var(--warm);color:var(--gold)}
.segmented button[aria-pressed=true][data-mode=scout],
.segmented button[aria-pressed=true][data-disc=bowling]{background:var(--cool);color:var(--blue)}

/* Panes. */
.pane{padding:1.1rem 0 3rem}
.card{background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--radius);padding:1.1rem 1.2rem;margin-bottom:.9rem}
.card h2{font-size:1.5rem;font-family:var(--cond);font-weight:600}
.sub{color:var(--muted);font-size:.92rem;margin-top:.15rem}
.tags{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.7rem;align-items:center}
.tag{font-size:.75rem;padding:.15rem .5rem;border-radius:99px;border:1px solid var(--hairline);
  color:var(--muted);font-family:var(--cond);font-weight:600}
.tag.gold{color:var(--gold);border-color:rgba(240,188,99,.35);background:var(--warm)}
.tag.blue{color:var(--blue);border-color:rgba(87,180,236,.35);background:var(--cool)}
.cols{display:grid;grid-template-columns:minmax(14rem,1fr) minmax(0,2fr);gap:.9rem}
@media (max-width:820px){.cols{grid-template-columns:1fr}}
.hd{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:.74rem;color:var(--faint);margin-bottom:.4rem}
.prov{font-size:.87rem;color:var(--muted)}
.prov b{color:var(--ink);font-weight:600}
.bar{height:5px;border-radius:3px;background:var(--hairline);overflow:hidden;margin:.45rem 0 .3rem}
.bar span{display:block;height:100%;background:var(--gold)}
.kv{display:grid;gap:.25rem;margin-top:.4rem;font-size:.82rem}
.kv div{display:grid;grid-template-columns:1fr auto;gap:.6rem;color:var(--faint)}
.kv b{color:var(--muted);font-weight:500}
.metric{display:grid;grid-template-columns:8.5rem 1fr 3rem;gap:.6rem;align-items:center;
  font-size:.83rem;padding:.12rem 0}
.metric .nm{color:var(--faint)}
.metric .tr{height:6px;background:var(--hairline);border-radius:3px;overflow:hidden}
.metric .tr span{display:block;height:100%}
.metric .vl{text-align:right;color:var(--muted)}

/* Filters. */
.filters{display:flex;gap:.7rem;flex-wrap:wrap;align-items:end;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--radius);padding:.8rem 1rem;
  margin-bottom:.9rem}
.f{display:flex;flex-direction:column;gap:.25rem}
.f label{font-size:.7rem;color:var(--faint);font-family:var(--cond);
  text-transform:uppercase;letter-spacing:.06em}
.f select,.f input{background:var(--raised);border:1px solid var(--hairline);
  border-radius:7px;padding:.35rem .5rem;font-size:.88rem;min-width:7.5rem}
.f input[type=number]{min-width:4.8rem}
.chk{display:flex;align-items:center;gap:.4rem;font-size:.88rem;color:var(--muted);
  padding-bottom:.35rem;cursor:pointer;white-space:nowrap}
.chk input{accent-color:var(--gold);width:1rem;height:1rem}
.reset{margin-left:auto}

/* Result rows. */
.row{display:grid;grid-template-columns:3.3rem 1fr auto auto;gap:.9rem;align-items:center;
  padding:.65rem .9rem;border:1px solid var(--hairline);border-radius:var(--radius);
  background:var(--surface);margin-bottom:.45rem}
@media (hover:hover){.row:hover{border-color:var(--gold)}}
.score{font-family:var(--cond);font-weight:700;font-size:1.35rem;text-align:center}
.why{color:var(--faint);font-size:.81rem;margin-top:.1rem}
.rmeta{text-align:right;font-size:.77rem;color:var(--faint);white-space:nowrap}
.add{border:1px solid var(--hairline);background:var(--raised);border-radius:7px;
  cursor:pointer;color:var(--muted);width:2rem;height:2rem;font-size:1.1rem;line-height:1}
@media (hover:hover){.add:hover{border-color:var(--gold);color:var(--gold)}}
.add[aria-pressed=true]{color:var(--gold);border-color:rgba(240,188,99,.4);background:var(--warm)}
.empty{color:var(--faint);padding:1.6rem;text-align:center;border:1px dashed var(--hairline);
  border-radius:var(--radius)}
.note{color:var(--faint);font-size:.85rem;max-width:64ch;margin-top:.25rem}


.warn{border-left:2px solid var(--gold);padding-left:.9rem;margin-top:.8rem;max-width:72ch}

/* ── flags ─────────────────────────────────────────────
   Football's .lmark is deliberately monochrome — league badges read better
   flat. A flag is the opposite: the colour IS the information, and a grey one
   is unreadable. So flags opt out of the filter and go round, which also stops
   them being mistaken for league marks. */
img.lmark.flag{width:1.4rem;height:1.4rem;border-radius:50%;object-fit:cover;
  filter:none;opacity:1;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.lmark.letters{border-radius:50%}
.card h2 img.lmark.flag{width:1.7rem;height:1.7rem;margin-right:.6rem;vertical-align:-.25rem}
.chip img.lmark.flag{width:1.15rem;height:1.15rem}
.pick img.lmark.flag{width:1.1rem;height:1.1rem}

/* ── links, so nothing renders as browser blue ─────────── */
.foot a,.warn a,.note a{color:var(--muted);text-decoration:none;
  border-bottom:1px solid var(--hairline);padding-bottom:1px}
@media (hover:hover){.foot a:hover,.warn a:hover,.note a:hover{
  color:var(--gold);border-bottom-color:var(--gold)}}
/* .repo-line and its pill come from style.css untouched; overriding the padding
   here is what made the button taller on one side than football's. */

/* ── method, as figures rather than paragraphs ─────────── */
.mfig{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.45rem}
.mfig b{font-family:var(--cond);font-weight:700;font-size:1.45rem;color:var(--gold);
  line-height:1}
.mfig span{font-size:.76rem;color:var(--faint)}
.mfact{display:grid;grid-template-columns:3.4rem 1fr 2.4rem;gap:.5rem;align-items:center;
  margin-bottom:.32rem;font-size:.76rem;color:var(--faint)}
.mbar{height:6px;background:var(--hairline);border-radius:3px;overflow:hidden}
.mbar i{display:block;height:100%;background:var(--blue)}
.mbar i.good{background:var(--gold)}
.mbar i.dim{background:var(--hairline-soft);box-shadow:inset 0 0 0 1px var(--hairline)}
.mfact b{text-align:right;color:var(--muted);font-weight:600;font-size:.78rem}
.mcol p{margin-top:.6rem}

/* ── route hint ────────────────────────────────────────── */
.route-hint{margin-top:.9rem;font-size:.82rem;color:var(--faint);min-height:1.2em}

/* Competition counts need a heading; a bare column of numbers says nothing. */
.listhead{display:grid;grid-template-columns:1fr auto;gap:.8rem;font-size:.7rem;
  color:var(--faint);font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.07em;padding-bottom:.35rem;margin-top:.2rem}


/* The discipline toggle sits in the action row with the ghost buttons. */
.pb-actions .segmented{align-self:center}

/* ── career card ───────────────────────────────────────── */
.ctabs{display:flex;gap:.25rem;margin:.2rem 0 .9rem;border-bottom:1px solid var(--hairline)}
.ctabs button{border:0;background:none;cursor:pointer;padding:.35rem .7rem;
  font-family:var(--cond);font-weight:600;font-size:.9rem;color:var(--faint);
  border-bottom:2px solid transparent;margin-bottom:-1px}
@media (hover:hover){.ctabs button:hover{color:var(--ink)}}
.ctabs button[aria-selected=true]{color:var(--gold);border-bottom-color:var(--gold)}
.cstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem .6rem}
@media (max-width:760px){.cstats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cstats dt{font-size:.72rem;color:var(--faint);font-family:var(--cond);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:.15rem}
.cstats dd{margin:0;font-family:var(--cond);font-weight:700;font-size:1.3rem;color:var(--ink)}

/* ── footer, aligned with football ─────────────────────── */
.foot .repo-line{margin:1.2rem 0 .2rem}
.foot details summary{padding-top:.4rem}
.warn{margin:.9rem 0 0}

/* Fill the profile column so the two sides end level rather than leaving a gap. */
.profile-main{display:grid;gap:.9rem;align-content:start}
.profile-left{display:grid;gap:.9rem;align-content:start}
.pane{padding:1.1rem 0 1.2rem}

/* Said out loud when the card is not the discipline the role implies. */
.pb-note{flex-basis:100%;font-size:.78rem;color:var(--faint);margin-top:.35rem;
  max-width:52ch;line-height:1.45}

/* ── footer, in football's order ────────────────────────
   The divider is .foot's own border-top, so the GitHub pill has to come first
   for the line to sit above it as it does on the football page. Attribution
   follows the method block rather than preceding it. */
.foot-source{margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid var(--hairline-soft)}


/* ── profile columns end level ──────────────────────────
   Two grids of unequal content left a ragged edge above the footer. Flex with a
   growing last panel makes both sides finish together. */
.profile-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:.9rem;align-items:stretch}
@media (max-width:920px){.profile-grid{grid-template-columns:1fr}}
.profile-left,.profile-main{display:flex;flex-direction:column;gap:.9rem}
.profile-left > .panel:last-child,.profile-main > .panel:last-child{flex:1 1 auto}

.brand{text-decoration:none;color:inherit}

/* ── multi-select with search ───────────────────────────
   Eighty countries and forty-eight competitions is too many for a native
   select, which holds one value and cannot be searched. */
.filter.multi{position:relative}
.multi-btn{display:inline-flex;align-items:center;gap:.45rem;background:var(--surface);
  border:1px solid var(--hairline);color:var(--muted);border-radius:99px;
  padding:.28rem .65rem;font-size:.82rem;cursor:pointer;white-space:nowrap}
@media (hover:hover){.multi-btn:hover{border-color:var(--gold);color:var(--gold)}}
.multi-btn.on{border-color:rgba(240,188,99,.45);color:var(--gold);background:var(--warm)}
.caret{width:0;height:0;border:4px solid transparent;border-top-color:currentColor;
  margin-top:3px}
.multi-panel{position:absolute;top:calc(100% + .35rem);left:0;z-index:50;
  width:min(17rem,80vw);background:var(--raised);border:1px solid var(--hairline);
  border-radius:var(--radius);padding:.5rem;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.multi-search{width:100%;background:var(--ground);border:1px solid var(--hairline);
  border-radius:7px;padding:.35rem .55rem;font-size:.85rem;color:var(--ink);margin-bottom:.4rem}
.multi-search:focus{outline:none;border-color:var(--gold)}
.multi-list{max-height:14rem;overflow:auto;display:grid;gap:.05rem}
.multi-list label{display:grid;grid-template-columns:1rem 1fr;gap:.5rem;align-items:center;
  padding:.28rem .3rem;border-radius:5px;font-size:.85rem;color:var(--muted);cursor:pointer}
@media (hover:hover){.multi-list label:hover{background:var(--surface);color:var(--ink)}}
.multi-list input{accent-color:var(--gold);width:1rem;height:1rem}
.multi-foot{border-top:1px solid var(--hairline-soft);margin-top:.4rem;padding-top:.4rem;
  text-align:right}

/* The read chips describe the row; they are not controls. Inside the row button
   they were picking up its hover and looking clickable. */
/* The chips describe the row and are not controls, so they sit outside the row
   button entirely. pointer-events:none was not enough — the click simply passed
   through to the button underneath and opened the comparison. */
.match{display:grid;grid-template-columns:minmax(0,1fr) minmax(9rem,13.5rem) auto;
  align-items:stretch;gap:0}
.match .match-btn{grid-column:1}
.match .reads{grid-column:2;align-self:center;padding:.65rem .4rem}
.match .rowacts{grid-column:3}
/* Two fixed rows, so three chips always occupy the same height however long
   their labels are. That was why one row sat taller than the next. */
.reads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1.45rem;gap:.3rem;align-content:center;min-height:3.2rem}
.reads .tag:first-child{grid-column:1/-1}
.reads .tag{display:flex;align-items:center;justify-content:center;
  font-size:.7rem;padding:.1rem .4rem;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;text-decoration:none}



/* ── even rows ──────────────────────────────────────────
   Two chips or three changed the row height, so the list looked ragged. A
   minimum height and a reads column that starts at the top keeps them level. */
.match-btn{grid-template-columns:1.3rem 3.2rem minmax(0,1fr) repeat(3,minmax(4rem,5.4rem));
  min-height:5.4rem;align-items:center}
.match-btn .facts{display:contents}
.why{grid-column:3/-1;color:var(--faint);font-size:.81rem;margin-top:-.15rem}
.tray-score.na{opacity:.45;cursor:help}
.ghost.cta{color:var(--blue);border-color:rgba(87,180,236,.4);background:var(--cool)}
@media (hover:hover){.ghost.cta:hover{border-color:var(--blue)}}

/* ── phones: nothing scrolls sideways ───────────────────
   Every strip that was scrolling now wraps or drops instead. */
@media (max-width:820px){
  .filters{gap:.55rem;padding:.7rem .8rem}
  .filter{width:100%}
  .filter .segmented{width:100%;flex-wrap:wrap}
  .filter .segmented button{flex:1 1 auto}
  .multi-panel{position:static;width:100%;box-shadow:none;margin-top:.35rem}
  .multi-btn{width:100%;justify-content:space-between}
  /* The routes had negative margins to sit flush on desktop; on a phone that
     pushed them past the edge. */
  .route{margin:0;padding:.8rem .9rem;border-color:var(--hairline)}
  .routes{grid-template-columns:1fr;gap:.8rem}
  .tabrow{flex-wrap:wrap}
  .tabrow .tabs{width:100%;flex-wrap:wrap}
  .modewrap{padding-bottom:.5rem;margin-left:auto}
  .modewrap-label{display:none}
  .profile-grid,.cols,.compare-grid{grid-template-columns:1fr}
  .cstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ctabs{flex-wrap:wrap}
  .metric{grid-template-columns:minmax(0,1fr) 2.6rem;gap:.3rem .5rem}
  .metric .tr{grid-column:1/-1;order:9}
  .match-btn{grid-template-columns:2.6rem minmax(0,1fr);min-height:0;
    align-items:start;gap:.2rem .55rem;padding:.55rem .7rem}
  .match-btn .facts{display:flex;flex-wrap:wrap;gap:.5rem .9rem;grid-column:1/-1}
  .match{grid-template-columns:minmax(0,1fr) auto}
  .match .match-btn{grid-column:1}
  .match .reads{grid-column:1;grid-row:2;padding:0 .7rem .6rem;
    grid-template-columns:repeat(2,minmax(0,1fr));min-height:0}
  .match .rowacts{grid-column:2;grid-row:1/3}
  .why{grid-column:1/-1;margin-top:.2rem}
  /* The trend is an SVG with a viewBox, so it scales rather than scrolls. */
  #cmp-trend{overflow:visible}
  .trend{width:100%;height:auto;min-width:0}
  .tlegend{flex-wrap:wrap}
  .multi-list{max-height:11rem}
}
@media (max-width:620px){
  .cstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cstats dd{font-size:1.15rem}
  .pb-actions{flex-wrap:wrap}
  .pb-actions .ghost{flex:1 1 auto;justify-content:center}
}
/* No zoom-on-focus in Safari: anything below 16px triggers it. */
@media (max-width:820px){
  .multi-search,#cmp-search,#search{font-size:16px}
}

/* Said where it will be read, not only in the footer. */
.warn-inline{display:block;font-style:normal;color:var(--gold);font-size:.82rem;
  margin-top:.35rem;max-width:64ch;line-height:1.45}
.pb-note.warn-inline{color:var(--gold)}
.ghost.small{padding:.2rem .7rem;font-size:.8rem}
.multi-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem}

/* Cricsheet's competition names are its own and some need a word of
   explanation; a mark beats renaming them away from the source. */
.qmark{display:inline-grid;place-items:center;width:.9rem;height:.9rem;
  border-radius:50%;border:1px solid var(--hairline);color:var(--faint);
  font-size:.6rem;font-style:normal;vertical-align:.05rem;margin-left:.25rem;cursor:help}
.leaguelist li[title]{cursor:help}
.filter-label .qmark{vertical-align:0}
.filter-label[title]{cursor:help}

/* A thin profile is in the pool because hiding a breakout player defeats the
   point of a scouting tool — but it must never look like a settled one. */
.thin-tag{font-style:normal;font-size:.62rem;text-transform:uppercase;
  letter-spacing:.06em;padding:.05rem .35rem;border-radius:99px;
  border:1px solid rgba(240,188,99,.4);color:var(--gold);background:var(--warm);
  margin-left:.4rem;cursor:help}
.thin-line{color:var(--gold);font-weight:600}
.thin-count{display:inline-block;margin-top:.2rem;font-style:normal;color:var(--gold);
  font-size:.78rem}

/* ── the scouting wizard ────────────────────────────────
   Scouting starts from a need rather than a name, so the questions come first
   and the count is live — you stop when the list is short enough to read. */
.wizard{margin-top:1.2rem;background:var(--surface);border:1px solid rgba(87,180,236,.28);
  border-radius:var(--radius);padding:1rem 1.1rem}
.wiz-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:.8rem}
.wiz-head h2{font-size:1.15rem}
.wiz-count{font-size:.85rem;color:var(--muted)}
.wiz-count b{color:var(--blue);font-weight:600}
.wiz-steps{display:grid;gap:.7rem}
.wiz-step{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;position:relative}
.wiz-label{font-size:.72rem;color:var(--faint);font-family:var(--cond);
  text-transform:uppercase;letter-spacing:.06em;min-width:5.5rem}
.wiz-step .segmented{flex-wrap:wrap}
.wiz-actions{display:flex;align-items:center;gap:.9rem;margin-top:1rem;
  padding-top:.9rem;border-top:1px solid var(--hairline-soft)}
.wiz-step .multi-panel{top:calc(100% + .3rem);left:6.2rem}

/* Shape results are a leaderboard, so the leading number is the metric itself
   rather than a match score that does not exist. */
.score-label{display:block;font-family:var(--sans);font-weight:400;font-size:.6rem;
  color:var(--faint);text-transform:uppercase;letter-spacing:.04em;line-height:1.2;
  margin-top:.1rem}
.sortpick{display:block;margin-top:.4rem;color:var(--muted);font-size:.85rem}
.sortpick select{background:var(--raised);border:1px solid var(--hairline);color:var(--ink);
  border-radius:7px;padding:.18rem .45rem;font-size:.85rem;margin:0 .25rem}
.sortpick select option{background:#17202D;color:#EAF1F8}
.sortpick em{font-style:normal;color:var(--faint);font-size:.8rem}
#tabs button:disabled{opacity:.35;cursor:not-allowed}
@media (max-width:820px){
  .wiz-step{align-items:flex-start;flex-direction:column;gap:.35rem}
  .wiz-label{min-width:0}
  .wiz-step .multi-panel{left:0;position:static;width:100%}
  .wiz-actions{flex-wrap:wrap}
}

/* ── four meta cells now, and a metric column wide enough for its number ── */
.match-btn{grid-template-columns:1.3rem 3.2rem minmax(0,1fr) repeat(4,minmax(3.9rem,5.2rem))}
.match.shape .match-btn{grid-template-columns:1.3rem 4.4rem minmax(0,1fr) repeat(4,minmax(3.9rem,5.2rem))}
/* The metric name is in the header — "Sorted by Acceleration" — so repeating it
   under every number only overlapped the column beside it. */
.match.shape .score-num{font-size:1.15rem}
.more-row{list-style:none;display:flex;justify-content:center;padding:.5rem 0 .2rem}
.more-row .ghost{min-width:14rem;justify-content:center}

/* While the detail file is still in flight the page is usable — search, the
   landing and the wizard all run off the index alone. */
body.loading-detail .radar-wrap,body.loading-detail .cmp-metrics{opacity:.45}

@media (max-width:820px){
  .match-btn,.match.shape .match-btn{grid-template-columns:2.6rem minmax(0,1fr)}
}

/* Adjusted or actual — which you are reading should never be a guess. */
.mview{display:inline-flex;border:1px solid var(--hairline);border-radius:99px;
  background:var(--surface);padding:2px;margin-left:auto}
.mview button{border:0;background:none;cursor:pointer;color:var(--faint);
  font-family:var(--cond);font-weight:600;font-size:.76rem;padding:.12rem .55rem;
  border-radius:99px}
.mview button[aria-pressed=true]{background:var(--warm);color:var(--gold)}
.mlegend{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.keyhead .mview{margin-left:0;justify-self:center}

/* A shape row has no read chips, so it must not reserve the column they sit in. */
.match.shape{grid-template-columns:minmax(0,1fr) auto}
.match.shape .rowacts{grid-column:2}

/* ── hints ──────────────────────────────────────────────
   A "?" has to be tappable: title is a hover and a phone has none. Big enough to
   hit with a thumb, and the note opens beside it. */
button.qmark{display:inline-grid;place-items:center;width:1.05rem;height:1.05rem;
  border-radius:50%;border:1px solid var(--hairline);background:none;color:var(--faint);
  font-size:.62rem;font-family:var(--sans);line-height:1;padding:0;cursor:pointer;
  vertical-align:.02rem;margin-left:.3rem;-webkit-tap-highlight-color:transparent}
@media (hover:hover){button.qmark:hover{border-color:var(--gold);color:var(--gold)}}
button.qmark:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hintpop{position:fixed;z-index:80;background:var(--raised);color:var(--muted);
  border:1px solid var(--hairline);border-radius:var(--radius);padding:.6rem .75rem;
  font-size:.82rem;line-height:1.45;box-shadow:0 14px 34px rgba(0,0,0,.55)}
.hintpop[hidden]{display:none}
/* The chosen option's own explanation, readable without a hover. */
.opt-tip{width:100%;font-size:.78rem;color:var(--faint);margin:.35rem 0 0;line-height:1.4}
.opt-tip:empty{display:none}
@media (max-width:820px){
  /* A 17px circle is not a tap target. Pad it out without moving the label. */
  button.qmark{width:1.6rem;height:1.6rem;font-size:.75rem;margin-left:.4rem}
  .hintpop{font-size:.85rem}
}

/* ── match log modal ────────────────────────────────────
   Uses the site's own surfaces, hairlines and type. The header stays put while
   the table scrolls, and the table scrolls sideways on a phone rather than
   forcing the whole modal to. */
.mlog-back{position:fixed; top:0; left:0; right:0; bottom:0; z-index:120;
  background:rgba(4,7,12,.72); backdrop-filter:blur(3px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:5vh 3vw calc(5vh + env(safe-area-inset-bottom,0px)); overflow:auto;
  -webkit-overflow-scrolling:touch}
/* position:fixed, not overflow:hidden — iOS Safari honours only the former for
   locking the background. The inline top offset (set in JS) holds the place. */
body.mlog-open{position:fixed; left:0; right:0; width:100%; overflow:hidden}
.mlog{position:relative; width:min(1040px,96vw); background:var(--surface);
  border:1px solid var(--hairline); border-radius:var(--radius);
  box-shadow:0 24px 70px rgba(0,0,0,.6); max-height:90vh; display:flex; flex-direction:column}
.mlog-x{position:absolute; top:.6rem; right:.7rem; z-index:3; border:0; background:none;
  color:var(--faint); font-size:1.7rem; line-height:1; cursor:pointer; padding:.2rem .45rem}
@media (hover:hover){.mlog-x:hover{color:var(--ink)}}
.mlog-body{display:flex; flex-direction:column; min-height:0; overflow:hidden}
.mlog-scroll{flex:1 1 auto; min-height:0}
.mlog-loading{padding:2.4rem; text-align:center; color:var(--faint)}

/* header — sticky, so it stays while the innings scroll */
.mlog-head{position:relative; padding:2.6rem 1.3rem 1rem;
  border-bottom:1px solid var(--hairline);
  background:var(--surface); border-radius:var(--radius) var(--radius) 0 0}
.mlog-id{display:flex; align-items:center; gap:.7rem}
.mlog-id h2{font-family:var(--cond); font-weight:600; font-size:1.5rem; line-height:1}
.mlog-id p{color:var(--muted); font-size:.9rem; margin-top:.15rem}
.mlog-id img.lmark.flag{width:1.9rem; height:1.9rem}

.mlog-scroll{overflow:auto; -webkit-overflow-scrolling:touch}
.mlog-table{border-collapse:collapse; width:100%; font-size:.86rem; white-space:nowrap}
.mlog-table th,.mlog-table td{padding:.5rem .7rem; text-align:right;
  border-bottom:1px solid var(--hairline-soft)}
.mlog-table th.l,.mlog-table td.l{text-align:left}
.mlog-table thead th{position:-webkit-sticky; position:sticky; top:0; z-index:2;
  background:var(--raised); color:var(--muted);
  font-family:var(--cond); font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  font-size:.72rem; border-bottom:1px solid var(--hairline)}
/* the header sits above the scrolling rows and their flags */
.mlog-table tbody td{position:relative; z-index:0}
.mlog-table tbody img.lmark.flag,.mlog-table tbody .lmark{position:relative; z-index:0}
.mlog-table tbody tr:hover{background:rgba(255,255,255,.02)}
.mlog-table img.lmark.flag{width:1.15rem; height:1.15rem; vertical-align:-.2rem; margin-right:.25rem}
.mdash{color:var(--faint)}
.nowrap{white-space:nowrap}

.fmt-pill{font-family:var(--cond); font-weight:600; font-size:.72rem; padding:.08rem .45rem;
  border-radius:99px; border:1px solid var(--hairline); color:var(--muted)}
.res{font-family:var(--cond); font-weight:600; font-size:.76rem; padding:.05rem .45rem;
  border-radius:99px}
.res-w{color:var(--green); background:rgba(79,194,162,.12)}
.res-l{color:#E8836F; background:rgba(232,131,111,.12)}
.res-d{color:var(--muted); background:rgba(142,161,182,.12)}
.mile-50{color:var(--gold)} .mile-100{color:var(--gold)}
.mile-100::after{content:" ★"; font-size:.7em}
.mile-5w{color:var(--gold)}
.mile-5w::after{content:" ★"; font-size:.7em}

.logbtn{flex:none; width:2.4rem; height:1.7rem; border:1px solid var(--hairline);
  background:var(--surface); color:var(--faint); border-radius:7px; cursor:pointer;
  display:grid; place-items:center}
.logbtn svg{width:.95rem; height:.95rem}
@media (hover:hover){.logbtn:hover{border-color:var(--gold); color:var(--gold)}}

@media (max-width:640px){
  .mlog-back{padding:0}
  .mlog{width:100vw; height:100vh; height:100dvh; max-height:100dvh;
    border-radius:0; padding-bottom:env(safe-area-inset-bottom,0px)}
  .mlog-head{padding:2.4rem 1rem .8rem}
  .mlog-id h2{font-size:1.25rem}
  .mlog-id img.lmark.flag{width:1.6rem; height:1.6rem}
  .mlog-top{gap:.6rem}
  .mlog-profile{padding:.3rem .7rem; font-size:.82rem}
  .mlog-stats{gap:1rem; margin-top:.7rem; padding-top:.7rem}
  .mlog-stats dd{font-size:1.15rem}
  .mlog-table{font-size:.8rem}
  .mlog-table th,.mlog-table td{padding:.42rem .55rem}
  .match-cell{min-width:9.5rem; max-width:13rem}
  .mlog-hint{padding:.6rem 1rem; font-size:.8rem}
  /* Date and the fixture are the anchors; keep them while the rest scrolls. */
  .mlog-table th:first-child,.mlog-table td:first-child{position:-webkit-sticky;
    position:sticky; left:0; background:var(--surface); z-index:1}
  .mlog-table thead th:first-child{background:var(--raised); z-index:3}
}

/* ── match log header, corrected ─────────────────────────
   The close button had the same corner as "Open full profile". It now sits
   above the row, clear of it, and a career-stats strip sits under the identity —
   the same figures the profile shows. */
.mlog-x{position:absolute; top:.55rem; right:.7rem; z-index:4}
.mlog-top{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap}
.mlog-stats{display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:.9rem;
  padding-top:.9rem; border-top:1px solid var(--hairline-soft)}
.mlog-stats div{min-width:3.4rem}
.mlog-stats dt{font-size:.68rem; color:var(--faint); font-family:var(--cond);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:.1rem}
.mlog-stats dd{margin:0; font-family:var(--cond); font-weight:700; font-size:1.35rem;
  color:var(--ink)}

/* ── match cell: who they played for, then the opponent ──────
   Full team names, not abbreviated codes, and never hidden behind a hover title
   — a phone has no hover, so a domestic fixture used to be two unreadable badges.
   The team the player turned out for is the prominent top line; the opponent sits
   beneath it, muted, so which side was his needs no legend. Names wrap inside a
   capped width rather than stretching the row. */
/* Both lines share one badge-then-name grid so the two team names line up on a
   common left edge — no "v", because a stacked pair already reads as a fixture. */
.match-cell{white-space:normal; min-width:11rem; max-width:17rem;
  display:flex; flex-direction:column; gap:.15rem; line-height:1.2}
.match-cell .fx-for,.match-cell .fx-opp{display:flex; align-items:center; gap:.35rem}
.match-cell .fx-for{font-weight:600; color:var(--ink)}
.match-cell .fx-for b{font-weight:600}
.match-cell .fx-opp{color:var(--muted); font-size:.82rem}
.match-cell img.lmark.flag{width:1.1rem; height:1.1rem; flex:none}
.match-cell .lmark{flex:none}
.match-cell .lmark.letters{width:1.1rem; height:1.1rem; font-size:.5rem}

/* One quiet line so a first-time reader knows the top team is the player's. */
.mlog-hint{margin:0; padding:.7rem 1.3rem; font-size:.82rem; color:var(--muted);
  border-bottom:1px solid var(--hairline-soft)}
.mlog-hint b{color:var(--ink); font-weight:600}



/* ── men / women toggle ──────────────────────────────────
   A distinct pill, set apart from the sport nav so it reads as a mode switch
   for cricket rather than another sport tab. The active side is filled. */
.gender-seg{display:inline-flex; align-items:center; gap:2px; flex:none;
  margin-left:.7rem; padding:3px; background:var(--surface);
  border:1px solid var(--hairline); border-radius:999px}
.gender-seg button{border:0; background:none; color:var(--muted); cursor:pointer;
  font-family:var(--cond); font-weight:600; font-size:.78rem; letter-spacing:.03em;
  padding:.3rem .72rem; border-radius:999px; line-height:1;
  transition:background .12s ease, color .12s ease}
.gender-seg button[aria-pressed="true"]{background:var(--gold); color:#101720}
@media (hover:hover){
  .gender-seg button:not([aria-pressed="true"]):hover{color:var(--ink)}}
/* On a phone the sport nav, the toggle and the status pills do not fit on one
   line, so let the header wrap and drop the toggle to its own row rather than
   force a horizontal scroll. */
@media (max-width:640px){
  .top-inner{flex-wrap:wrap; row-gap:.45rem}
  /* Row 1 stays exactly as it fit before the toggle existed (brand, sports,
     status); the toggle takes a full row of its own beneath. */
  .gender-seg{order:6; flex-basis:100%; margin-left:0; padding:2px;
    justify-content:flex-start}
  .gender-seg button{font-size:.74rem; padding:.3rem .7rem}}

.staging-banner{background:#F0BC63;color:#101720;font:600 13px/1.4 system-ui,sans-serif;
  text-align:center;padding:.35rem .8rem;letter-spacing:.01em}