/* Match officials — /cricket/umpires/
   ---------------------------------------------------------------------------
   Built on the same scale as coaches.css, and for the same reason it was
   rewritten: nothing here invents a value. The sizes are the ones
   news-section.css, results.css, venues.css and coaches.css already use —
   20px page heading, 14px section heading, 13.5px rows, 12.5px meta — and
   the colours are the theme's literals under the same --c-* names, so a
   profile does not read as a different website from the page before it.

   The one thing this page has that the coach profile does not is a lot of
   numbers, so the figure strip and the tables carry most of the weight.
   Figures are tabular-nums throughout: a column of match counts that
   shifts by a pixel per digit reads as sloppy at exactly the moment the
   page is asking to be trusted with data.

   Contents
     1. palette
     2. breadcrumbs, tiles
     3. directory head, chips, sort
     4. the card grid
     5. pagination
     6. profile head + figure strip
     7. chart
     8. panels, tables, lists
     9. FAQ, footnotes
    10. phones
    11. dark
*/

/* 1. palette --------------------------------------------------------------- */

.mf-officials,
.mf-official-profile,
.mf-official-matches{
  --c-line:#eceae5;
  --c-muted:#8a887f;
  --c-soft:#faf9f6;
  --c-ink:#181818;
  --c-head:#12233d;
  --c-accent:#e2231a;
  --c-card:#fff;
  --c-radius:10px;

  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  color:var(--c-ink);
}

/* 2. breadcrumbs, tiles ---------------------------------------------------- */

.mf-officials .mf-crumbs,
.mf-official-profile .mf-crumbs,
.mf-official-matches .mf-crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  margin:0 0 14px; font-size:12.5px; color:var(--c-muted);
}
.mf-officials .mf-crumbs a,
.mf-official-profile .mf-crumbs a,
.mf-official-matches .mf-crumbs a{
  color:#79776f; text-decoration:none; font-weight:600;
}
.mf-officials .mf-crumbs a:hover,
.mf-official-profile .mf-crumbs a:hover,
.mf-official-matches .mf-crumbs a:hover{color:var(--c-accent);}
.mf-crumb-sep{color:#cfcdc6; user-select:none;}

.mf-official-avatar{
  width:38px; height:38px; flex:0 0 38px;
  border-radius:9px; display:block;
}
.mf-official-avatar.is-large{
  width:96px; height:96px; flex:0 0 96px; border-radius:14px;
}

/* 3. head, chips, sort ----------------------------------------------------- */

.mf-officials-head{margin:0 0 14px;}
.mf-officials-head h1{
  margin:0 0 4px; font-size:20px; line-height:1.25;
  font-weight:800; color:var(--c-head); letter-spacing:-.01em;
}
.mf-officials-count{margin:0; font-size:12.5px; color:var(--c-muted);}
.mf-officials-count a{color:#79776f; font-weight:600;}

.mf-chiprow{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  margin:0 0 10px;
}
.mf-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px; border:1px solid var(--c-line); border-radius:999px;
  background:var(--c-card); color:#3d3c38;
  font-size:12.5px; font-weight:600; text-decoration:none;
  transition:border-color .12s, background .12s;
}
.mf-chip:hover{border-color:#d8d5cd; background:var(--c-soft);}
.mf-chip.is-on{
  background:var(--c-head); border-color:var(--c-head); color:#fff;
}
.mf-chip-n{
  font-size:11px; font-weight:700; opacity:.6;
  font-variant-numeric:tabular-nums;
}

.mf-chip-more{display:inline-block;}
.mf-chip-more>summary{
  list-style:none; cursor:pointer;
  padding:5px 10px; border:1px dashed var(--c-line); border-radius:999px;
  font-size:12.5px; font-weight:600; color:var(--c-muted);
}
.mf-chip-more>summary::-webkit-details-marker{display:none;}
.mf-chip-more[open]>summary{color:var(--c-head); border-style:solid;}
.mf-chip-drawer{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}

.mf-sortrow{
  display:flex; flex-wrap:wrap; gap:14px;
  margin:0 0 16px; padding-bottom:8px;
  border-bottom:1px solid var(--c-line);
}
.mf-sort{
  font-size:12.5px; font-weight:600; color:var(--c-muted);
  text-decoration:none; padding-bottom:4px; border-bottom:2px solid transparent;
}
.mf-sort:hover{color:var(--c-ink);}
.mf-sort.is-on{color:var(--c-head); border-bottom-color:var(--c-accent);}

/* 4. card grid ------------------------------------------------------------- */

.mf-official-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.mf-official-card{margin:0;}
.mf-official-link{
  position:relative;
  display:flex; align-items:center; gap:11px;
  padding:10px 11px;
  border:1px solid var(--c-line); border-radius:var(--c-radius);
  background:var(--c-card); text-decoration:none; color:inherit;
  transition:border-color .12s, box-shadow .12s;
  height:100%;
}
.mf-official-link:hover{
  border-color:#d8d5cd; box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.mf-official-tile{flex:0 0 auto; display:block;}
.mf-official-body{min-width:0; display:block;}
.mf-official-name{
  display:block; font-size:13.5px; font-weight:700;
  color:var(--c-head); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mf-official-meta{
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  margin-top:2px; font-size:12px; color:var(--c-muted);
}
.mf-official-country{white-space:nowrap;}
.mf-official-years{font-variant-numeric:tabular-nums;}
.mf-official-years::before{content:"· ";}
/* ...except when the years are the only thing in the row. An official
   with no country recorded was printing a leading "· 2005-2025", which
   reads as a missing word rather than as a missing country. */
.mf-official-years:first-child::before{content:none;}
.mf-official-stats{
  display:block; margin-top:3px;
  font-size:12px; color:var(--c-muted);
  font-variant-numeric:tabular-nums;
}
.mf-official-stats strong{color:var(--c-ink); font-size:13px;}
.mf-official-formats{display:block; margin-top:1px; font-size:11.5px; opacity:.85;}

.mf-official-flagpill{
  position:absolute; top:8px; right:8px;
  padding:2px 7px; border-radius:999px;
  font-size:10px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  background:rgba(27,169,76,.12); color:#0f7a3a; border:1px solid rgba(27,169,76,.25);
}
.mf-official-flagpill.is-ref{
  background:rgba(168,112,63,.12); color:#8a5a2f; border-color:rgba(168,112,63,.25);
}

.mf-official-grid.is-compact{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}

.mf-empty{
  padding:22px; text-align:center; font-size:13.5px; color:var(--c-muted);
  border:1px dashed var(--c-line); border-radius:var(--c-radius);
}

/* 5. pagination ------------------------------------------------------------ */

.mf-pager{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;
  gap:4px; margin-top:20px; font-size:12.5px; font-variant-numeric:tabular-nums;
}
.mf-pager a,
.mf-pager .mf-pager-now{
  min-width:30px; padding:6px 9px; text-align:center;
  border:1px solid var(--c-line); border-radius:7px;
  text-decoration:none; color:var(--c-ink); font-weight:600;
}
.mf-pager a:hover{background:var(--c-soft); border-color:#d8d5cd;}
.mf-pager .mf-pager-now{
  background:var(--c-accent); border-color:var(--c-accent); color:#fff;
}
.mf-pager-gap{padding:0 2px; color:var(--c-muted);}
.mf-pager-step{font-weight:700;}

/* 6. profile head + figures ------------------------------------------------ */

.mf-op-head{
  display:flex; gap:16px; align-items:flex-start;
  padding-bottom:16px; margin-bottom:16px;
  border-bottom:1px solid var(--c-line);
}
.mf-op-tile{flex:0 0 auto;}
.mf-op-id{min-width:0;}
.mf-op-id h1{
  margin:0 0 5px; font-size:22px; line-height:1.2;
  font-weight:800; color:var(--c-head); letter-spacing:-.01em;
}
.mf-op-sub{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:0; font-size:13px; color:var(--c-muted);
}
.mf-op-sub a{color:#79776f; font-weight:600; text-decoration:none;}
.mf-op-sub a:hover{color:var(--c-accent);}
.mf-op-role{font-weight:600; color:#5f5e58;}
.mf-op-sep{color:#cfcdc6;}
.mf-op-pill{
  padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.02em;
  background:rgba(27,169,76,.12); color:#0f7a3a; border:1px solid rgba(27,169,76,.25);
}
.mf-op-pill.is-panel{
  background:rgba(18,35,61,.07); color:var(--c-head); border-color:rgba(18,35,61,.16);
  text-transform:none; letter-spacing:0;
}
.mf-op-born{margin:6px 0 0; font-size:12.5px; color:var(--c-muted);}

.mf-op-figures{
  list-style:none; margin:0 0 18px; padding:0;
  display:grid; gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
}
.mf-op-figures li{
  padding:11px 12px; border:1px solid var(--c-line);
  border-radius:var(--c-radius); background:var(--c-soft);
}
.mf-op-figures strong{
  display:block; font-size:21px; font-weight:800; line-height:1.1;
  color:var(--c-head); font-variant-numeric:tabular-nums;
}
.mf-op-figures span{
  display:block; margin-top:3px;
  font-size:11.5px; color:var(--c-muted); line-height:1.3;
}
.mf-op-figures.is-inline{margin-bottom:10px;}

/* 7. chart ----------------------------------------------------------------- */

.mf-op-chartbox{
  color:var(--c-ink);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.mf-official-timeline{
  /* Wide enough that the year labels stay legible when the box scrolls.
     At 460px the viewBox scaled to 0.6 and the 10px labels rendered at
     six, which is not a chart anybody reads -- better to scroll a
     readable graph than to fit an unreadable one. */
  display:block; width:100%; min-width:640px; height:auto;
}
.mf-timeline-key{
  list-style:none; display:flex; flex-wrap:wrap; gap:12px;
  margin:8px 0 0; padding:0; font-size:11.5px; color:var(--c-muted);
}
.mf-timeline-key li{display:flex; align-items:center; gap:5px;}
.mf-key-dot{
  width:9px; height:9px; border-radius:3px; display:inline-block; flex:0 0 9px;
}

/* 8. panels, tables, lists ------------------------------------------------- */

.mf-op-panel{margin:0 0 18px;}
.mf-op-panel h2{
  display:flex; align-items:center; gap:8px;
  margin:0 0 9px; font-size:14px; font-weight:800;
  color:var(--c-head); text-transform:uppercase; letter-spacing:.03em;
}
.mf-op-panel h2::before{
  content:""; width:3px; height:13px; border-radius:2px;
  background:var(--c-accent); flex:0 0 3px;
}

.mf-op-cols{display:grid; gap:18px; grid-template-columns:1fr 1fr;}

.mf-op-table{
  width:100%; border-collapse:collapse;
  font-size:13px; font-variant-numeric:tabular-nums;
}
.mf-op-table th,
.mf-op-table td{
  padding:7px 9px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--c-line);
}
.mf-op-table thead th{
  font-size:11px; text-transform:uppercase; letter-spacing:.03em;
  color:var(--c-muted); font-weight:700;
  border-bottom:1px solid #ddd9d1;
}
.mf-op-table tbody th{font-weight:600; color:#3d3c38;}
.mf-op-table tbody tr:last-child th,
.mf-op-table tbody tr:last-child td{border-bottom:0;}
.mf-op-table td a{color:var(--c-head); font-weight:600; text-decoration:none;}
.mf-op-table td a:hover{color:var(--c-accent); text-decoration:underline;}
.mf-op-table.is-matches td:first-child{white-space:nowrap; color:var(--c-muted);}

.mf-op-dim{
  display:block; font-size:11.5px; color:var(--c-muted); margin-top:1px;
}

.mf-op-list{
  list-style:none; margin:0; padding:0;
  font-size:13px;
}
.mf-op-list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:6px 0; border-bottom:1px solid var(--c-line);
}
.mf-op-list li:last-child{border-bottom:0;}
.mf-op-list a{color:var(--c-head); font-weight:600; text-decoration:none;}
.mf-op-list a:hover{color:var(--c-accent); text-decoration:underline;}
.mf-op-n{
  flex:0 0 auto; font-weight:700; color:var(--c-muted);
  font-variant-numeric:tabular-nums; font-size:12.5px;
}
.mf-op-list.is-wide{
  column-count:2; column-gap:22px;
}
.mf-op-list.is-wide li{break-inside:avoid;}

.mf-table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}

.mf-op-more{margin:10px 0 0; font-size:13px;}
.mf-op-more a{color:var(--c-head); font-weight:700; text-decoration:none;}
.mf-op-more a:hover{color:var(--c-accent);}

/* 9. FAQ, footnotes -------------------------------------------------------- */

.mf-op-note{
  margin:9px 0 0; font-size:11.5px; line-height:1.55; color:var(--c-muted);
}
.mf-op-note strong{color:#5f5e58;}

.mf-op-drs .mf-op-note{
  padding:9px 11px; border-left:2px solid var(--c-line);
  background:var(--c-soft); border-radius:0 6px 6px 0;
}

.mf-op-faq dl{margin:0;}
.mf-op-faq dt{
  font-size:13px; font-weight:700; color:var(--c-head); margin-top:11px;
}
.mf-op-faq dt:first-child{margin-top:0;}
.mf-op-faq dd{
  margin:3px 0 0; font-size:13px; line-height:1.55; color:#3d3c38;
}

.mf-op-foot{
  margin-top:22px; padding-top:12px; border-top:1px solid var(--c-line);
}
.mf-op-foot p{margin:0 0 4px; font-size:11.5px; color:var(--c-muted);}

/* 10. phones --------------------------------------------------------------- */

@media (max-width:640px){
  .mf-op-cols{grid-template-columns:1fr; gap:0;}
  .mf-op-head{gap:12px;}
  .mf-official-avatar.is-large{width:70px; height:70px; flex:0 0 70px;}
  .mf-op-id h1{font-size:19px;}
  .mf-op-figures{grid-template-columns:repeat(auto-fit,minmax(104px,1fr));}
  .mf-op-figures strong{font-size:18px;}
  .mf-official-grid{grid-template-columns:1fr;}
  .mf-op-list.is-wide{column-count:1;}
  .mf-pager{justify-content:center;}
}

/* 11. dark ----------------------------------------------------------------- */
/* Keyed to the site's own toggle, not prefers-color-scheme: a reader on a
   dark laptop should not get a dark profile panel in the middle of a light
   page. Same reasoning, same hook, as coaches.css. */

html.dark-mode .mf-officials,
html.dark-mode .mf-official-profile,
html.dark-mode .mf-official-matches{
  --c-line:rgba(255,255,255,.1);
  --c-muted:#8c8c94;
  --c-soft:rgba(255,255,255,.05);
  --c-ink:#e7e7ea;
  --c-head:#e7e7ea;
  --c-card:#212227;
}
html.dark-mode .mf-officials .mf-crumbs a,
html.dark-mode .mf-official-profile .mf-crumbs a,
html.dark-mode .mf-official-matches .mf-crumbs a{color:#9a9994;}
html.dark-mode .mf-chip{color:#c7c7cf;}
html.dark-mode .mf-chip.is-on{background:#3a3b42; border-color:#4a4b53; color:#fff;}
html.dark-mode .mf-op-role{color:#a9a9b2;}
html.dark-mode .mf-op-table tbody th{color:#c7c7cf;}
html.dark-mode .mf-op-table thead th{border-bottom-color:rgba(255,255,255,.16);}
html.dark-mode .mf-op-faq dd{color:#c7c7cf;}
html.dark-mode .mf-op-note strong{color:#c7c7cf;}
html.dark-mode .mf-op-pill.is-panel{
  background:rgba(255,255,255,.08); color:#e7e7ea; border-color:rgba(255,255,255,.16);
}
html.dark-mode .mf-official-link:hover{box-shadow:0 2px 10px rgba(0,0,0,.4);}
html.dark-mode .mf-pager a{color:#e7e7ea;}
html.dark-mode .mf-pager a:hover{background:rgba(255,255,255,.07);}