/* ---------------------------------------------------------------------
 * The scorecard.
 *
 * A scorecard is read in two directions and the styling has to serve both:
 * down a column to compare figures, and across a row to follow one player.
 * Everything below follows from that.
 *
 *   - Figures are tabular-nums, so digits occupy identical width and a
 *     column of scores lines up as a column rather than a ragged edge.
 *   - The name and the dismissal are left-aligned prose; every other cell
 *     is right-aligned number. Mixing the two alignments in one column is
 *     what makes a scorecard hard to scan.
 *   - Runs (batting) and wickets (bowling) are the figures the eye goes to
 *     first, so those two get the ink and the rest recede.
 * ------------------------------------------------------------------- */

.mf-sc{
  margin:28px 0 0;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
}
.mf-sc-title{
  margin:0 0 14px; font-size:17px; font-weight:800; color:#181818;
  letter-spacing:-.01em;
}

/* ---- one innings ------------------------------------------------------ */
.mf-sc-inn{
  border:1px solid #e5e3de; border-radius:11px; overflow:hidden;
  background:#fff; margin-bottom:16px;
}
.mf-sc-inn-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:13px 16px; background:#faf8f4; border-bottom:1px solid #e5e3de;
}
.mf-sc-inn-head h3{
  margin:0; font-size:13.5px; font-weight:700; color:#181818; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mf-sc-inn-score{
  display:flex; align-items:baseline; gap:6px; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.mf-sc-inn-score strong{font-size:16px; font-weight:800; color:#181818; letter-spacing:-.2px;}
.mf-sc-inn-score span{font-size:11.5px; color:#8a887f; font-weight:600;}

/* ---- tables ----------------------------------------------------------- */
/* A scorecard has eight columns and cannot reflow -- so on a narrow screen
   the table scrolls sideways inside its own box and the page stays still. */
.mf-sc-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}

.mf-sc-table{
  width:100%; border-collapse:collapse; font-size:13px;
  font-variant-numeric:tabular-nums;
  /* Fixed layout, so the columns come from the widths declared below
     rather than from whatever the longest cell happens to be.
     Without it the browser sizes each column to its content: the numeric
     columns collapse to the width of their digits and sit immediately
     after the dismissal text, so the figures start at a different x on
     every row and there is no column to read down. Fixed widths give the
     text a block on the left and the figures a block on the right, which
     is the whole shape of a scorecard. */
  table-layout:fixed;
}
.mf-sc-table th{
  padding:9px 10px; text-align:right; white-space:nowrap;
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#a5a39b; border-bottom:1px solid #eceae5; background:#fff;
}
.mf-sc-table th.mf-sc-who{text-align:left;}
.mf-sc-table td{
  padding:9px 10px; text-align:right; white-space:nowrap;
  border-bottom:1px solid #f4f2ee; color:#3a3a37;
}
.mf-sc-table tbody tr:last-child td{border-bottom:1px solid #eceae5;}

/* The player's name is the anchor of the row: left-aligned, and given
   enough width that a full name is not clipped after two words. Every
   other cell in these tables is a right-aligned figure, so this is the
   one column the eye starts from. */
/* The two text columns. Together they take a little over half the table
   and both start at a fixed left edge, so name and dismissal read as two
   clean columns and everything numeric is pushed right as one group.
   
   Written as `.mf-sc-table td.mf-sc-who`, not `.mf-sc-who`, and that is
   load-bearing. The rule above sets `.mf-sc-table td { text-align:right }`
   for the figures, which scores (0,1,1) on specificity; a bare
   `.mf-sc-who` scores (0,1,0) and loses, so the names silently rendered
   right-aligned no matter what this said. Matching class *and* element
   scores (0,2,1) and wins. */
.mf-sc-table th.mf-sc-who,
.mf-sc-table td.mf-sc-who{
  text-align:left; width:30%;
  overflow:hidden; text-overflow:ellipsis;
}
.mf-sc-table td.mf-sc-who{font-weight:600; color:#181818;}
/* The dismissal is prose, not a figure: left-aligned, lighter, and allowed
   to be the column that gives way when space is short. */
.mf-sc-table th.mf-sc-how,
.mf-sc-table td.mf-sc-how{
  text-align:left; width:28%;
  overflow:hidden; text-overflow:ellipsis;
}
.mf-sc-table td.mf-sc-how{color:#8a887f; font-size:12px;}

/* Five numeric columns share the remaining 42%, so each is a fixed slice
   and a figure lands at the same x on every row. */
.mf-sc-num{width:8.4%;}
/* The bowling table has seven numeric columns rather than five, and no
   dismissal column -- so the name takes more and the figures divide the
   rest evenly. */
.mf-sc-bowl th.mf-sc-who,
.mf-sc-bowl td.mf-sc-who{width:37%;}
.mf-sc-bowl th.mf-sc-num,
.mf-sc-bowl td.mf-sc-num{width:9%;}
/* Runs on the batting table, wickets on the bowling one. */
.mf-sc-r{font-weight:800; color:#181818;}
.mf-sc-star{color:#1ba94c; font-weight:800;}
.mf-sc-table tr.is-notout .mf-sc-who{color:#181818;}

.mf-sc-table tfoot td{
  border-bottom:0; padding-top:10px; padding-bottom:10px;
  background:#faf8f4; color:#6b6a64; font-size:12.5px;
}
.mf-sc-table tfoot td.mf-sc-who,
.mf-sc-table tfoot td.mf-sc-how{text-align:left;}
.mf-sc-table tfoot tr.mf-sc-total td{font-weight:800; color:#181818; font-size:13px;}

/* ---- the lines between the tables ------------------------------------- */
.mf-sc-dnb,
.mf-sc-fow{
  margin:0; padding:11px 16px; font-size:12.5px; line-height:1.7;
  color:#6b6a64; border-bottom:1px solid #f4f2ee;
}
.mf-sc-dnb span,
.mf-sc-fow span{
  display:inline-block; margin-right:8px;
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#a5a39b;
}
.mf-sc-fow b{color:#181818; font-weight:700; font-variant-numeric:tabular-nums;}

/* ---- ball by ball ------------------------------------------------------
   Its own section after the scorecard, with the innings as a menu across
   the top. It used to be a collapsed <details> inside each innings, which
   put four toggles in the middle of the scorecard and broke the run of
   tables the reader came for. */
.mf-sc-bb{
  border:1px solid #e5e3de; border-radius:11px; overflow:hidden; background:#fff;
}
.mf-sc-bb-menu{
  display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
  padding:8px; background:#faf8f4; border-bottom:1px solid #e5e3de;
}
.mf-sc-bb-menu::-webkit-scrollbar{display:none;}
/* The second menu, one level down from the red segmented control above
   it. Pills again, because the same question is being asked -- which of
   these am I looking at -- but in outline rather than fill, so the two
   menus are not competing to be the loud one. */
.mf-sc-bb-tab{
  flex:0 0 auto; appearance:none; cursor:pointer;
  padding:8px 14px; border-radius:8px; white-space:nowrap;
  border:1px solid transparent; background:transparent;
  font-family:inherit; font-size:13px; font-weight:700; color:#8a887f;
  transition:background .12s, color .12s, border-color .12s;
}
.mf-sc-bb-tab:hover{color:#181818; background:rgba(0,0,0,.04);}
.mf-sc-bb-tab.is-on{
  background:#fff; border-color:#f0c5c1; color:#e2231a;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.mf-sc-bb-tab:focus-visible{outline:2px solid #e2231a; outline-offset:2px;}

.mf-sc-bb-head{
  margin:0; padding:12px 16px; border-bottom:1px solid #eeece7;
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#a5a39b;
}
/* No inner scrollbox. It used to cap at 520px with its own scrollbar,
   which meant a nested scroll inside the page scroll -- on a phone the
   wrong one moved half the time, and on a desktop the commentary read
   through a letterbox. The overs run the full width of the page now and
   the page itself is the only thing that scrolls. */
.mf-sc-bb-body{padding:0;}
.mf-sc-over{padding:8px 0; border-bottom:1px solid #f6f5f1;}
.mf-sc-over:last-child{border-bottom:0;}
.mf-sc-over p{
  margin:0 0 3px; font-size:12.5px; line-height:1.6; color:#4a4945;
  font-variant-numeric:tabular-nums;
}
.mf-sc-over p:last-child{margin-bottom:0;}

/* ---- match meta under the innings ------------------------------------- */
.mf-sc-meta{
  border:1px solid #e5e3de; border-radius:11px; overflow:hidden; background:#fff;
}
.mf-sc-meta-row{
  display:grid; grid-template-columns:170px minmax(0,1fr); gap:12px;
  padding:11px 16px; border-bottom:1px solid #f4f2ee; font-size:13px;
}
.mf-sc-meta-row:last-child{border-bottom:0;}
.mf-sc-meta-label{
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#a5a39b; padding-top:2px;
}
.mf-sc-meta-value{color:#181818; font-weight:600; min-width:0; overflow-wrap:break-word;}

/* ---- dark ------------------------------------------------------------- */
html.dark-mode .mf-sc-title{color:#f0efe9;}
html.dark-mode .mf-sc-inn,
html.dark-mode .mf-sc-meta{background:#212227; border-color:rgba(255,255,255,.12);}
html.dark-mode .mf-sc-inn-head{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12);}
html.dark-mode .mf-sc-inn-head h3,
html.dark-mode .mf-sc-inn-score strong,
html.dark-mode .mf-sc-who,
html.dark-mode .mf-sc-r,
html.dark-mode .mf-sc-fow b,
html.dark-mode .mf-sc-meta-value{color:#e7e7ea;}
html.dark-mode .mf-sc-table th{background:#212227; border-color:rgba(255,255,255,.1); color:#8c8c94;}
html.dark-mode .mf-sc-table td{border-color:rgba(255,255,255,.06); color:#b4b4ba;}
html.dark-mode .mf-sc-table tfoot td{background:rgba(255,255,255,.04); color:#b4b4ba;}
html.dark-mode .mf-sc-table tfoot tr.mf-sc-total td{color:#e7e7ea;}
html.dark-mode .mf-sc-dnb,
html.dark-mode .mf-sc-fow,
html.dark-mode .mf-sc-meta-row,
html.dark-mode .mf-sc-over{border-color:rgba(255,255,255,.08);}
html.dark-mode .mf-sc-over p{color:#b4b4ba;}
html.dark-mode .mf-sc-bb{background:#212227; border-color:rgba(255,255,255,.12);}
html.dark-mode .mf-sc-bb-menu{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12);}
html.dark-mode .mf-sc-bb-tab:hover{color:#e7e7ea;}

/* ---- phones ------------------------------------------------------------ */
@media (max-width:620px){
  .mf-sc-title{font-size:16px;}
  .mf-sc-bb-tab{padding:11px 12px 9px; font-size:12.5px;}
  .mf-sc-bb-body{padding:0;}
  .mf-sc-bb-head{padding:11px 13px;}
  .mf-sc-inn-head{padding:11px 13px;}
  .mf-sc-table{font-size:12.5px;}
  .mf-sc-table th,
  .mf-sc-table td{padding:8px;}
  /* Below this the eight columns cannot fit, so the table keeps its
     minimum and the wrapper scrolls sideways -- the page itself stays
     still, which is what matters. */
  .mf-sc-table{min-width:520px;}
  .mf-sc-bowl{min-width:460px;}
  .mf-sc-how{font-size:11.5px;}
  .mf-sc-dnb,
  .mf-sc-fow{padding:10px 13px; font-size:12px;}
  .mf-sc-meta-row{grid-template-columns:1fr; gap:3px; padding:10px 13px;}
}

/* The target, beside the innings score. Quieter than the score itself --
   it is the number being chased, not the number made. */
.mf-sc-target{
  font-size:11px; font-weight:800; letter-spacing:.04em;
  color:#8a887f; padding:2px 7px; border-radius:20px; background:#eceae5;
}
html.dark-mode .mf-sc-target{background:rgba(255,255,255,.1); color:#b4b4ba;}

/* "Match details" sits below the innings, so it needs air above it. */
.mf-sc-title-sub{margin-top:24px;}

/* ---------------------------------------------------------------------
 * Match hero -- the top of a match page.
 *
 * Replaces the listing card, which was built for a list and repeated
 * everything the page says below it. Here the order is: who played and
 * what they made, then who won, and nothing competing with either.
 *
 * Same four-step type scale as the listing card (--mcard-fs-* in
 * post.css) rather than its own oversized one. The hero used to run team
 * names at 22px and the score at 26px against a 13px scale everywhere
 * else on the site -- the biggest text on the page by a wide margin, and
 * the reason the box felt twice the size it needed to be. Scoped locally
 * because post.css defines its variables on .mf-mcard, not on :root.
 * ------------------------------------------------------------------- */
.mf-hero{
  --hero-fs-micro:10px;
  --hero-fs-small:11.5px;
  --hero-fs-base:13px;
  --hero-fs-score:16px;
  margin:0 0 20px;
  border:1px solid #e5e3de;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
}
.mf-hero-line{
  margin:0; padding:10px 16px;
  background:#faf8f4;
  border-bottom:1px solid #e5e3de;
  font-size:var(--hero-fs-small); line-height:1.5; color:#8a887f;
}

.mf-hero-body{
  /* The right column was sized to its contents, which meant a long player
     name was squeezed into whatever the scoreline left over and then cut
     with an ellipsis. A fixed minimum gives the name room to sit on one
     line; it still collapses to a single column on narrow screens. */
  display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,300px); gap:16px;
  align-items:start; padding:14px 16px;
}
.mf-hero-main{min-width:0;}

.mf-hero-status{
  margin:0 0 8px;
  font-size:var(--hero-fs-micro); font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#a5a39b;
}

.mf-hero-teams{display:flex; flex-direction:column; gap:6px;}
/* Name left, score right, and the two rows share a grid so both totals
   land in the same column -- the eye compares them straight down without
   crossing the card. */
.mf-hero-team{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline; gap:12px;
}
.mf-hero-name{
  display:flex; align-items:center; gap:8px; min-width:0;
  font-size:var(--hero-fs-base); font-weight:600; color:#8a887f; letter-spacing:-.01px;
  line-height:1.35;
}
.mf-hero-name > span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.mf-hero-flag{
  flex:0 0 20px; width:20px; height:14px; border-radius:2px;
  border:1px solid #e5e3de; display:inline-block; transform:translateY(1px);
}
.mf-hero-score{
  display:flex; align-items:baseline; gap:6px; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.mf-hero-score strong{
  font-size:var(--hero-fs-score); font-weight:700; letter-spacing:-.2px; color:#8a887f; line-height:1;
}
.mf-hero-overs{font-size:var(--hero-fs-small); color:#a5a39b; font-weight:600;}

/* The winner, in full ink. */
.mf-hero-team.is-won .mf-hero-name{color:#181818; font-weight:700;}
.mf-hero-team.is-won .mf-hero-score strong{color:#181818;}

.mf-hero-result{
  margin:10px 0 0; font-size:var(--hero-fs-base); font-weight:700; color:#e2231a; line-height:1.45;
}

.mf-hero-potm{
  min-width:190px; max-width:230px;
  padding-left:16px; border-left:1px solid #e5e3de;
}
.mf-hero-potm-label{
  margin:0 0 10px;
  font-size:var(--hero-fs-micro); font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:#a5a39b;
}
.mf-hero-potm-who{display:flex; align-items:center; gap:12px; min-width:0;}
.mf-hero-potm-avatar{
  flex:0 0 56px; width:56px; height:56px; border-radius:50%;
  background:#fde3e0; color:#e2231a;
  display:flex; align-items:center; justify-content:center;
}
.mf-hero-potm-avatar svg{width:28px; height:28px;}
.mf-hero-potm-namewrap{min-width:0;}
.mf-hero-potm-name{display:block; font-size:14.5px; font-weight:700; color:#181818; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mf-hero-potm-team{display:block; font-size:var(--hero-fs-small); font-weight:600; color:#a5a39b; line-height:1.5; margin-top:2px;}

.mf-hero-potm-stats{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px;}
.mf-hero-potm-stat{background:#faf8f4; border-radius:8px; padding:8px 10px;}
.mf-hero-potm-stat-label{margin:0 0 3px; font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#a5a39b;}
.mf-hero-potm-stat-value{margin:0; font-size:16px; font-weight:800; color:#181818; line-height:1.2; font-variant-numeric:tabular-nums;}
/* Two innings in one box -- "2/12 & 4/60" is more than twice the width of
   "2/12", so the figure steps down rather than running out of its box. */
.mf-hero-potm-stats.is-multi .mf-hero-potm-stat-value{font-size:13.5px;}
.mf-hero-potm-stats.is-multi .mf-hero-potm-stat-value span{font-size:12px; margin:0 1px;}
.mf-hero-potm-stat-value span{color:#a5a39b; font-weight:600;}
.mf-hero-potm-notout,
.mf-hero-potm-stat-value .mf-hero-potm-notout{color:#e2231a;}
.mf-hero-potm-stat-sub{margin:2px 0 0; font-size:11px; font-weight:600; color:#a5a39b;}

html.dark-mode .mf-hero{background:#212227; border-color:rgba(255,255,255,.12);}
html.dark-mode .mf-hero-line{background:#1b1c20; color:#8c8c94; border-color:rgba(255,255,255,.12);}
html.dark-mode .mf-hero-team.is-won .mf-hero-name,
html.dark-mode .mf-hero-team.is-won .mf-hero-score strong,
html.dark-mode .mf-hero-potm-name{color:#e7e7ea;}
html.dark-mode .mf-hero-potm{border-color:rgba(255,255,255,.12);}
html.dark-mode .mf-hero-potm-avatar{background:rgba(226,35,26,.18); color:#f0908a;}
html.dark-mode .mf-hero-potm-stat{background:#1b1c20;}
html.dark-mode .mf-hero-potm-stat-value{color:#e7e7ea;}

@media (max-width:620px){
  .mf-hero-body{grid-template-columns:1fr; gap:14px; padding:12px 14px;}
  /* Below the scores rather than beside them, and the rule moves to the
     top edge so it still reads as a separate note. */
  .mf-hero-potm{
    max-width:none; padding:14px 0 0;
    border-left:0; border-top:1px solid #e5e3de;
  }
  html.dark-mode .mf-hero-potm{border-top-color:rgba(255,255,255,.12);}
}

/* ---------------------------------------------------------------------
 * The view menu: Scorecard | Ball by ball | Stats.
 *
 * A segmented control, not underlined text. The first attempt used
 * underline tabs and they did not read as controls at all -- bold black
 * text next to bold grey text looks like a heading that has been said
 * twice, and the only thing marking the live one was a two-pixel rule
 * most readers never saw. Filling the active segment is unambiguous at
 * any size: one of these is a button that is pressed, the others are
 * buttons that are not.
 * ------------------------------------------------------------------- */
.mf-sc-views{margin:0;}
.mf-sc-viewbar{
  display:flex; align-items:stretch; gap:3px;
  padding:4px; margin:0 0 16px;
  background:#f1efea; border:1px solid #e5e3de; border-radius:11px;
  overflow-x:auto; scrollbar-width:none;
}
.mf-sc-viewbar::-webkit-scrollbar{display:none;}
.mf-sc-viewtab{
  flex:0 0 auto; appearance:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  padding:9px 16px; border-radius:8px; background:transparent;
  font-family:inherit; font-size:13.5px; font-weight:700; letter-spacing:-.01em;
  color:#6f6d66;
  transition:background .12s, color .12s, box-shadow .12s;
}
.mf-sc-viewtab:hover{background:rgba(255,255,255,.75); color:#181818;}
.mf-sc-viewtab.is-on{
  background:#e2231a; color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.14);
}
.mf-sc-viewtab.is-on:hover{background:#c81d15; color:#fff;}
.mf-sc-viewtab:focus-visible{outline:2px solid #181818; outline-offset:2px;}
/* The over count rides with the label rather than sitting in its own
   badge: it is a size, and a reader wants it before they tap into 276
   overs of commentary, not after. */
.mf-sc-viewtab em{
  font-style:normal; font-size:11px; font-weight:700; color:#a5a39b;
  font-variant-numeric:tabular-nums;
}
.mf-sc-viewtab.is-on em{color:rgba(255,255,255,.82);}

/* The heading the menu replaced -- kept for screen readers only. */
.mf-sc-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

html.dark-mode .mf-sc-viewbar{background:#26272c; border-color:rgba(255,255,255,.12);}
html.dark-mode .mf-sc-viewtab{color:#9a9aa2;}
html.dark-mode .mf-sc-viewtab:hover{background:rgba(255,255,255,.07); color:#f0efe9;}

/* Stats, until there is something in it. */
.mf-sc-soon{
  border:1px dashed #ddd9d1; border-radius:11px; background:#faf8f4;
  padding:30px 22px; text-align:center;
}
.mf-sc-soon h3{margin:0 0 6px; font-size:14px; font-weight:800; color:#181818;}
.mf-sc-soon p{margin:0 auto; max-width:420px; font-size:13px; line-height:1.6; color:#8a887f;}
html.dark-mode .mf-sc-soon{background:#212227; border-color:rgba(255,255,255,.16);}
html.dark-mode .mf-sc-soon h3{color:#f0efe9;}

@media (max-width:620px){
  .mf-sc-viewbar{gap:2px; margin-bottom:13px;}
  .mf-sc-viewtab{font-size:12.5px; padding:8px 12px; gap:5px;}
}

/* ---- runs per over ----------------------------------------------------
   The shape of the innings, before a word of it is read. Ninety-nine
   overs of text cannot say "they went at nine an over for the first ten
   and then lost three in four"; ninety-nine bars say it at a glance,
   which is why every scorecard in the world draws one. */
.mf-bb-chart-wrap{padding:14px 16px 12px; border-bottom:1px solid #eeece7;}
.mf-bb-chart-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin:0 0 9px;
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#a5a39b;
}
.mf-bb-chart-peak{font-weight:700; letter-spacing:.03em; text-transform:none; font-size:11px;}
.mf-bb-chart{
  display:flex; align-items:flex-end; gap:2px;
  height:78px; border-bottom:1px solid #e5e3de;
}
.mf-bb-bar{
  flex:1 1 0; min-width:2px; appearance:none; border:0; padding:0; cursor:pointer;
  background:#c9c5bc; border-radius:2px 2px 0 0;
  transition:background .12s;
}
.mf-bb-bar:hover{background:#8a887f;}
/* An over that took a wicket is the one a reader is looking for, so it is
   the one that is coloured. */
.mf-bb-bar.is-wkt{background:#e2231a;}
.mf-bb-bar.is-wkt:hover{background:#c81d15;}
.mf-bb-bar:focus-visible{outline:2px solid #181818; outline-offset:2px;}
html.dark-mode .mf-bb-chart-wrap{border-color:rgba(255,255,255,.09);}
html.dark-mode .mf-bb-chart{border-color:rgba(255,255,255,.14);}
html.dark-mode .mf-bb-bar{background:#4a4b50;}
html.dark-mode .mf-bb-bar:hover{background:#6f7076;}

/* ---------------------------------------------------------------------
 * One over, television style.
 *
 * The strip of circles is the reason this exists. A screen of
 * "2.3 TA Boult to JM Bairstow, no run" is accurate and unreadable at a
 * glance: nothing in it marks the wicket or the boundary, so finding
 * either means reading all six lines. Colour does that work before a word
 * is read -- a red W and a green 4 are found, not parsed -- which is why
 * every broadcast draws an over this way.
 *
 * Closed by default, and that is the point of the strip. One line per
 * over means an innings is ninety-nine rows instead of six hundred, and
 * the row already says who bowled, what happened to each ball and what it
 * cost. The six sentences underneath are for the over a reader stops at,
 * not for all of them. <details> rather than a script: it works with
 * JavaScript off, and the browser gives us the keyboard behaviour free.
 * ------------------------------------------------------------------- */
.mf-bb-over{border-bottom:1px solid #eeece7;}
.mf-bb-over:last-child{border-bottom:0;}
/* Where a chart click lands, so the reader can see which row answered
   them. */
.mf-bb-over.is-lit{background:#fdf3d7;}
html.dark-mode .mf-bb-over.is-lit{background:rgba(240,180,40,.12);}

.mf-bb-head{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:11px 16px;
}
.mf-bb-no{
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#181818; white-space:nowrap;
}
.mf-bb-bowler{
  font-size:12px; font-weight:600; color:#8a887f; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:180px;
}
/* The strip takes the slack, so the runs figure is pinned to the right
   edge on every over and reads as a column down the page. */
.mf-bb-strip{display:flex; align-items:center; gap:5px; flex:1 1 auto; flex-wrap:wrap;}
.mf-bb-runs{
  font-size:11.5px; font-weight:700; color:#8a887f; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.mf-bb-runs em{
  font-style:normal; margin-left:6px; padding:2px 6px; border-radius:20px;
  background:#fdecea; color:#c81d15; font-weight:800; font-size:10.5px;
}

/* The circles. 26px is the smallest that still holds "2wd" without the
   text shrinking to the point where the colour is doing all the work. */
.mf-bb-ball{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:26px; padding:0 6px; border-radius:50px;
  font-size:11.5px; font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums;
  background:#f1efea; color:#6f6d66; border:1px solid transparent;
}
/* A dot ball is quiet by design: it is the background the rest is read
   against, and six of them in a row should look like a maiden. */
.mf-bb-ball.is-dot{background:#f1efea; color:#a5a39b;}
.mf-bb-ball.is-run{background:#fff; border-color:#ddd9d1; color:#3a3a3a;}
.mf-bb-ball.is-four{background:#0a8a4a; color:#fff;}
.mf-bb-ball.is-six{background:#6d28d9; color:#fff;}
.mf-bb-ball.is-wicket{background:#e2231a; color:#fff;}
/* Wides and no-balls are the fielding side's mistake rather than the
   batter's shot, so they get the warning colour and not a scoring one. */
.mf-bb-ball.is-extra{background:#fdf3d7; color:#8a6100; border-color:#f0e0ae;}
/* Not a ball of the over -- the dashed edge is why the strip sometimes
   holds seven or eight circles. */
.mf-bb-ball.is-illegal{border-style:dashed; border-color:#d9bf72;}

html.dark-mode .mf-bb-over{border-color:rgba(255,255,255,.09);}
html.dark-mode .mf-bb-no{color:#f0efe9;}
html.dark-mode .mf-bb-ball{background:rgba(255,255,255,.08); color:#9a9aa2;}
html.dark-mode .mf-bb-ball.is-dot{background:rgba(255,255,255,.08); color:#82828a;}
html.dark-mode .mf-bb-ball.is-run{background:transparent; border-color:rgba(255,255,255,.22); color:#e7e7ea;}
html.dark-mode .mf-bb-ball.is-extra{background:rgba(240,180,40,.16); color:#e8bf6a; border-color:rgba(240,180,40,.35);}

@media (max-width:620px){
  .mf-bb-head{gap:8px; padding:10px 13px;}
  .mf-bb-chart-wrap{padding:12px 13px 10px;}
  .mf-bb-chart{height:62px;}
  .mf-bb-bowler{max-width:120px;}
  .mf-bb-strip{order:3; width:100%; flex:1 1 100%;}
  .mf-bb-runs{margin-left:auto;}
}

/* ---------------------------------------------------------------------
 * Match stats: the worm and the partnerships.
 *
 * Both are drawn server-side -- SVG for the chart, plain divs for the
 * bars -- so they are on the screen with the page rather than after a
 * chart library has downloaded and run. Two shapes do not justify a
 * dependency.
 * ------------------------------------------------------------------- */
.mf-st-block{
  border:1px solid #e5e3de; border-radius:11px; background:#fff;
  padding:16px; margin:0 0 14px;
}
.mf-st-block:last-child{margin-bottom:0;}
.mf-st-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin:0 0 14px;
}
.mf-st-head h3{margin:0; font-size:13.5px; font-weight:800; color:#181818;}

/* The key does the work a chart legend does, and carries each innings'
   total so the lines can be told apart by number as well as by colour. */
.mf-st-key{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.mf-st-key-item{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:600; color:#8a887f;
}
.mf-st-key-item b{color:#181818; font-weight:800; font-variant-numeric:tabular-nums;}
.mf-st-key-item i{width:10px; height:10px; border-radius:2px; flex:0 0 10px;}
.mf-st-key-item i.is-wkt{border-radius:50%; background:#8a887f;}

.mf-st-chart{position:relative;}
.mf-st-grid{stroke:#eeece7; stroke-width:1;}
.mf-st-base{stroke:#c9c5bc; stroke-width:1;}
.mf-st-axis{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:10px; font-weight:600; fill:#a5a39b;
}
/* A ring in the surface colour, so a wicket dot stays visible where two
   lines cross. */
.mf-st-wkt{stroke:#fff; stroke-width:1.6;}
.mf-st-xlabel{
  margin:2px 0 0; text-align:center;
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#a5a39b;
}

.mf-st-sub{
  margin:0 0 8px; font-size:10.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:#a5a39b;
}
.mf-st-ps{margin:0 0 16px;}
.mf-st-ps:last-of-type{margin-bottom:8px;}
.mf-st-ps-row{display:flex; align-items:center; gap:10px; margin:0 0 7px;}
.mf-st-ps-wk{
  flex:0 0 16px; font-size:11px; font-weight:700; color:#a5a39b;
  text-align:right; font-variant-numeric:tabular-nums;
}
/* The track is the full width, the bar inside it is the stand as a share
   of the biggest in the match -- so a 111 stand looks four times a 27
   whichever innings each came in. */
.mf-st-ps-track{flex:0 0 34%; min-width:0;}
.mf-st-ps-bar{display:flex; height:18px; border-radius:4px; overflow:hidden;}
.mf-st-ps-a{background:#e2231a; flex:0 0 auto;}
.mf-st-ps-b{background:#f6a9a3; flex:1 1 auto;}
.mf-st-ps-runs{
  flex:0 0 34px; font-size:12.5px; font-weight:800; color:#181818;
  font-variant-numeric:tabular-nums;
}
.mf-st-ps-who{
  flex:1 1 auto; min-width:0; font-size:11.5px; color:#8a887f;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mf-st-ps-who b{color:#181818; font-weight:700; font-variant-numeric:tabular-nums;}
.mf-st-note{margin:0; font-size:11px; line-height:1.55; color:#a5a39b;}

html.dark-mode .mf-st-block{background:#212227; border-color:rgba(255,255,255,.12);}
html.dark-mode .mf-st-head h3{color:#f0efe9;}
html.dark-mode .mf-st-key-item b,
html.dark-mode .mf-st-ps-runs,
html.dark-mode .mf-st-ps-who b{color:#e7e7ea;}
html.dark-mode .mf-st-grid{stroke:rgba(255,255,255,.09);}
html.dark-mode .mf-st-base{stroke:rgba(255,255,255,.18);}
html.dark-mode .mf-st-wkt{stroke:#212227;}
html.dark-mode .mf-st-ps-b{background:rgba(226,35,26,.35);}

@media (max-width:620px){
  .mf-st-block{padding:13px;}
  /* The names take the room on a phone; the bar keeps enough width to
     still be a comparison. */
  .mf-st-ps-track{flex:0 0 26%;}
  .mf-st-ps-who{font-size:11px;}
}