/* ---------------------------------------------------------------------
 * 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:2px; overflow-x:auto; scrollbar-width:none;
  padding:0 6px; background:#faf8f4; border-bottom:1px solid #e5e3de;
}
.mf-sc-bb-menu::-webkit-scrollbar{display:none;}
.mf-sc-bb-tab{
  flex:0 0 auto; appearance:none; border:0; background:none; cursor:pointer;
  padding:12px 14px 10px; margin-bottom:-1px;
  font-family:inherit; font-size:13px; font-weight:600; color:#8a887f;
  border-bottom:2px solid transparent; white-space:nowrap;
}
.mf-sc-bb-tab:hover{color:#181818;}
/* The underline, not a filled pill: it marks which panel is showing
   without turning the menu into a row of buttons competing with the
   content below it. */
.mf-sc-bb-tab.is-on{color:#e2231a; border-bottom-color:#e2231a;}
.mf-sc-bb-tab:focus-visible{outline:2px solid #e2231a; outline-offset:-4px;}

.mf-sc-bb-head{
  margin:0; padding:12px 16px 0;
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#a5a39b;
}
.mf-sc-bb-body{
  max-height:520px; overflow-y:auto; padding:6px 16px 14px;
}
.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{max-height:420px; padding:6px 13px 12px;}
  .mf-sc-bb-head{padding:11px 13px 0;}
  .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{
  display:grid; grid-template-columns:minmax(0,1fr) auto; 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;}
.mf-hero-potm-stat-value span{color:#a5a39b; font-weight:600;}
.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 button that opens the commentary. Full width and quiet: it is a
   door, not an action. */
.mf-sc-bb-open{
  display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px;
  appearance:none; border:0; background:none; cursor:pointer; text-align:left;
  padding:14px 16px; font-family:inherit;
  font-size:13.5px; font-weight:700; color:#181818;
}
.mf-sc-bb-open:hover{background:#faf8f4;}
.mf-sc-bb-open:focus-visible{outline:2px solid #e2231a; outline-offset:-3px;}
.mf-sc-bb-open span:first-child::after{content:' ↓'; color:#e2231a;}
.mf-sc-bb-open.is-open span:first-child::after{content:' ↑';}
.mf-sc-bb-open-hint{font-size:11.5px; font-weight:600; color:#a5a39b; white-space:nowrap;}
.mf-sc-bb-inner{border-top:1px solid #e5e3de;}
html.dark-mode .mf-sc-bb-open{color:#e7e7ea;}
html.dark-mode .mf-sc-bb-open:hover{background:rgba(255,255,255,.04);}
html.dark-mode .mf-sc-bb-inner{border-color:rgba(255,255,255,.12);}