/* Match results listing + single-match page.
   The card itself is styled in post.css (.mf-mcard) because it also appears
   inside articles; this sheet only adds the furniture around it. */

/* Sits on the heading line, after the divider: a fact about the page, not
   a control, so it reads with the name rather than with the dropdowns. */
.mf-results-count{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:14px; font-weight:600; color:#8a887f; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.mf-results-count b{font-weight:700; color:#3a3a3a;}
.mf-results-count strong{font-weight:800; color:#181818;}
html.dark-mode .mf-results-count{color:#8c8c94;}
html.dark-mode .mf-results-count b{color:#c9c8c4;}
html.dark-mode .mf-results-count strong{color:#e7e7ea;}

.mf-results-back{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:13px; margin:0 0 16px;
}
.mf-results-back a{color:#e2231a; text-decoration:none; font-weight:600;}
.mf-results-back a:hover{text-decoration:underline;}

.mf-results-empty{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:14px; color:#8a887f; padding:36px 0; text-align:center;
}

/* minmax(0,1fr) rather than 1fr: a long competition name inside a card
   would otherwise stretch its column and push the grid wider than the page. */
/* One match per row. A two-up grid squeezed the scoreline and made a long
   competition name wrap onto three lines; full width lets the two teams sit
   at opposite ends where the eye expects them. */
.mf-results-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:26px;
}
.mf-results-item{
  display:block; text-decoration:none; color:inherit;
  border-radius:12px; transition:transform .12s, box-shadow .15s;
  min-width:0;
}
.mf-results-item:hover{transform:translateY(-2px);}
.mf-results-item:hover .mf-mcard{
  border-color:#d9d6cf;
  box-shadow:0 8px 22px rgba(0,0,0,.07);
}
/* Inside the grid the card is the whole tile, so it carries no outer margin. */
.mf-results-item .mf-mcard{margin:0;}

/* Server-rendered pagination. The news feed builds its pages in JavaScript;
   with over a thousand pages here these have to be real links a crawler can
   follow, so the same look is rebuilt with anchors. */
.pagination .pg-page{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 9px;
  border-radius:8px; text-decoration:none;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:13.5px; font-weight:700; color:#3a3a3a;
  font-variant-numeric:tabular-nums;
}
.pagination .pg-page:hover{background:#f3f1ec;}
.pagination .pg-page.is-current{background:#e2231a; color:#fff;}
.pagination .pg-dots{color:#9a9890; padding:0 3px;}
.pagination .pg-btn.is-off{opacity:.35; cursor:default;}
html.dark-mode .pagination .pg-page{color:#e7e7ea;}
html.dark-mode .pagination .pg-page:hover{background:rgba(255,255,255,.07);}

/* Single match page */
.mf-match-sub{
  display:flex; align-items:center; flex-wrap:wrap; gap:9px;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:13px; color:#8a887f; margin:0 0 18px;
}
.mf-match-chip{
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  background:#f3f1ec; color:#6b6b6b; padding:3px 9px; border-radius:20px;
}
html.dark-mode .mf-match-chip{background:rgba(255,255,255,.08); color:#c9c9d0;}

.mf-match-facts{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:1px; background:#e5e3de;
  border:1px solid #e5e3de; border-radius:12px; overflow:hidden;
  margin:24px 0;
}
html.dark-mode .mf-match-facts{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.12);}
.mf-match-fact{background:#fff; padding:13px 16px; min-width:0;}
html.dark-mode .mf-match-fact{background:#212227;}
.mf-match-fact-label{
  display:block; font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:#8a887f; margin-bottom:4px;
}
.mf-match-fact-value{
  display:block; font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:13.5px; font-weight:600; color:#181818; line-height:1.45;
  overflow-wrap:anywhere;
}
html.dark-mode .mf-match-fact-value{color:#e7e7ea;}



/* ---- count header ---------------------------------------------------- */
.mf-results-head{margin-bottom:2px;}
/* The heading doubles as the way back to the unfiltered listing on any
   scoped page. Styled to look like the heading it is, not like a link --
   the underline only appears on hover, so it reads as a title first and
   offers itself as an exit second. */
.mf-results-back{color:inherit; text-decoration:none;}
.mf-results-back:hover{color:#e2231a; text-decoration:underline;}

/* The filter bar itself is defined once, in the v3 block near the bottom of
   this file. */

/* --- searchable dropdown --- */
.mf-combo{position:relative;}
.mf-combo-btn{
  display:inline-flex; align-items:center; justify-content:space-between; gap:8px;
  height:34px; min-width:132px; max-width:210px; padding:0 10px 0 12px;
  border:1px solid #e5e3de; border-radius:8px; background:#fff; cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:600; color:#3a3a3a;
  transition:border-color .12s, background .12s, color .12s;
}
.mf-combo-btn:hover{border-color:#c9c5bc;}
.mf-combo-btn svg{flex:0 0 14px; color:#9a9890; transition:transform .15s;}
/* Panel level, not control level. A positioned element with a z-index starts
   a stacking context, and everything inside is then capped at that number no
   matter what it asks for -- setting this to --z-control trapped the panel's
   own value inside a layer of 20, which tied with the search box below and
   lost the tie on DOM order. That is how the dropdown ended up sliced in half
   by the search box a second time. */
.mf-combo.is-open{z-index:var(--z-panel);}
.mf-combo.is-open .mf-combo-btn{border-color:#e2231a; box-shadow:0 0 0 3px rgba(226,35,26,.12);}
.mf-combo.is-open .mf-combo-btn svg{transform:rotate(180deg); color:#e2231a;}

/* A set filter is tinted, so it is obvious at a glance which ones are on. */
.mf-combo.is-set .mf-combo-btn{
  background:#fdecea; border-color:#f3bdb8; color:#b81a12;
}
.mf-combo.is-set .mf-combo-btn svg{color:#e2231a;}

.mf-combo-value{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}

.mf-combo-panel{
  position:absolute; z-index:var(--z-panel); top:calc(100% + 6px); left:0;
  width:266px; max-width:78vw;
  background:#fff; border:1px solid #e5e3de; border-radius:10px;
  box-shadow:0 14px 34px rgba(0,0,0,.13);
  padding:8px; overflow:hidden;
}
.mf-combo-search{
  width:100%; height:32px; padding:0 10px; margin-bottom:6px;
  border:1px solid #e5e3de; border-radius:7px; background:#faf8f4;
  font-family:inherit; font-size:12.5px; color:#181818;
}
.mf-combo-search:focus{outline:none; border-color:#e2231a; background:#fff;}
.mf-combo-list{max-height:270px; overflow-y:auto; margin:0 -4px; padding:0 4px;}
.mf-combo-opt{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; padding:7px 9px; border:0; border-radius:7px;
  background:none; cursor:pointer; text-align:left;
  font-family:inherit; font-size:12.5px; font-weight:600; color:#3a3a3a;
}
.mf-combo-opt span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.mf-combo-opt em{
  flex-shrink:0; font-style:normal; font-size:11px; font-weight:700; color:#9a9890;
  font-variant-numeric:tabular-nums;
}
/* The "All X" row now carries a number like every other row, so it needs a
   line under it -- otherwise it reads as just the largest item in the list
   rather than the total the rest should add up against. */
.mf-combo-list .mf-combo-opt:first-child{
  border-bottom:1px solid #f0eeea;
  border-radius:7px 7px 0 0;
  margin-bottom:3px;
  padding-bottom:9px;
}
.mf-combo-list .mf-combo-opt:first-child em{color:#3a3a3a;}
html.dark-mode .mf-combo-list .mf-combo-opt:first-child{border-bottom-color:rgba(255,255,255,.1);}
html.dark-mode .mf-combo-list .mf-combo-opt:first-child em{color:#e7e7ea;}

.mf-combo-opt:hover{background:#faf8f4;}
.mf-combo-opt.is-on{background:#fdecea; color:#b81a12;}
.mf-combo-opt.is-on em{color:#d4675f;}
.mf-combo-none{margin:8px 4px 4px; font-size:12px; color:#9a9890;}

html.dark-mode .mf-combo-btn{background:#212227; border-color:rgba(255,255,255,.14); color:#e7e7ea;}
html.dark-mode .mf-combo.is-set .mf-combo-btn{background:rgba(226,35,26,.16); border-color:rgba(226,35,26,.45); color:#ff8a80;}
html.dark-mode .mf-combo-panel{background:#212227; border-color:rgba(255,255,255,.14);}
html.dark-mode .mf-combo-search{background:#1b1c20; border-color:rgba(255,255,255,.14); color:#e7e7ea;}
html.dark-mode .mf-combo-opt{color:#e7e7ea;}
html.dark-mode .mf-combo-opt:hover{background:rgba(255,255,255,.06);}
html.dark-mode .mf-combo-opt.is-on{background:rgba(226,35,26,.18); color:#ff8a80;}

.mf-filter-btn{
  height:34px; padding:0 15px; border:0; border-radius:8px; cursor:pointer;
  background:#e2231a; color:#fff; font-family:inherit; font-size:12.5px; font-weight:700;
}
.mf-filter-btn:hover{background:#c41c14;}
.mf-filter-clear{
  font-size:12.5px; font-weight:600; color:#8a887f; text-decoration:none; padding:0 5px;
}
.mf-filter-clear:hover{color:#e2231a;}

@media (max-width:700px){
  .mf-combo{flex:1 1 45%;}
  .mf-combo-btn{width:100%; max-width:none; min-width:0;}
  .mf-combo-panel{width:100%; max-width:none;}
}

/* ---- extras strip on a single match ---- */
.mf-mcard-extras{
  border-top:1px solid var(--mcard-line);
  padding:4px 16px 12px;
}
.mf-mcard-extra{
  display:flex; gap:10px; padding:6px 0;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif; font-size:12.5px;
  border-bottom:1px solid var(--mcard-line);
}
.mf-mcard-extra:last-child{border-bottom:0;}
.mf-mcard-extra-label{
  flex:0 0 140px; color:var(--mcard-meta); font-weight:700;
  font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; padding-top:2px;
}
.mf-mcard-extra-value{
  flex:1 1 auto; min-width:0; color:var(--mcard-ink); font-weight:600;
  line-height:1.5; overflow-wrap:anywhere;
}
@media (max-width:520px){
  .mf-mcard-extra{flex-direction:column; gap:2px;}
  .mf-mcard-extra-label{flex:none;}
}

/* ---- quick search, chip rows, active pills ---- */
.mf-quick{
  display:flex; align-items:center; gap:7px; flex:0 1 260px; min-width:0;
  height:34px; padding:0 11px;
  border:0.5px solid #e5e3de; border-radius:var(--radius, 8px); background:#fff;
  color:#9a9890;
}
.mf-quick:focus-within{border-color:#e2231a; box-shadow:0 0 0 3px rgba(226,35,26,.12);}
.mf-quick svg{flex:0 0 15px;}
.mf-quick input{
  flex:1 1 auto; min-width:0; border:0; outline:none; background:none;
  font-family:inherit; font-size:12.5px; color:#181818;
}
html.dark-mode .mf-quick{background:#212227; border-color:rgba(255,255,255,.14);}
html.dark-mode .mf-quick input{color:#e7e7ea;}

.mf-chiprow-label{
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#9a9890;
}
.mf-activebar{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin:-4px 0 16px;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
}
.mf-activepill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 9px 4px 11px; border-radius:20px; text-decoration:none;
  background:#fdecea; color:#8e1b13; font-size:12px; font-weight:600;
}
.mf-activepill:hover{background:#f9d6d2;}
.mf-activepill svg{opacity:.7;}
.mf-clearall{font-size:12px; font-weight:600; color:#8a887f; text-decoration:underline; margin-left:4px;}
.mf-clearall:hover{color:#e2231a;}
html.dark-mode .mf-activepill{background:rgba(226,35,26,.18); color:#ff8a80;}

@media (max-width:700px){
  .mf-chiprow{gap:6px;}
  .mf-chiprow-label{min-width:0; width:100%; margin-bottom:2px;}
}

/* ---- v3 filter bar ----------------------------------------------------
   Three rows, in order of how often they get used:

     1  search + date jumps      (one line)
     2  the popular landing filters, scrollable on a phone
     3  the count, the three path filters, and a "more" toggle

   Everything is 30px tall and 12px, because seven equal-weight dropdowns
   stacked two deep pushed the actual match cards below the fold -- and the
   cards are what the reader came for. The bar should be glanceable, not a
   control panel. */
.mf-results-bar{
  display:block;
  padding:10px 0 11px; margin-bottom:12px;
  border-bottom:1px solid #e5e3de;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
}
html.dark-mode .mf-results-bar{border-color:rgba(255,255,255,.12);}

/* --- row 1: the six filters, always one line ---------------------------
   Sized by ratio, not by pixels. Fixed widths only ever fit the column they
   were measured in -- put the same bar next to a sidebar, or in Bengali
   where the labels are longer, and the sixth control drops to a second row.
   Six equal shares of whatever width there is cannot wrap, so the label is
   allowed to ellipsis instead: a clipped "All competit…" is a smaller
   problem than a filter bar that reflows. */
.mf-results-filters{
  display:flex; align-items:center; gap:6px; flex-wrap:nowrap;
  margin:0;
}
.mf-results-filters .mf-combo{flex:1 1 0; min-width:0;}
.mf-results-filters .mf-combo-btn{
  height:30px; width:100%; min-width:0; max-width:none;
  padding:0 8px 0 10px; font-size:12px;
}
/* The panel is positioned against the control, so it must not shrink with
   it -- a 150px dropdown listing 1,500 team names is unusable. */
.mf-results-filters .mf-combo-panel{width:266px;}
/* The last two controls sit near the right edge, so their panels open
   leftwards rather than off the side of the page. */
.mf-results-filters .mf-combo:nth-last-child(-n+2) .mf-combo-panel{left:auto; right:0;}

/* --- row 2: search --- */
/* Under the filters, not over them. The dropdowns answer the common
   question; the box is for the words a dropdown has no room for. */
.mf-results-bar .mf-quick{
  display:flex; width:100%; height:34px; margin:9px 0 0;
}
.mf-results-bar .mf-quick input{font-size:13px;}

.mf-results-empty a{color:#e2231a; font-weight:600;}

/* Six shares of a phone screen is 55px each, which fits nothing. Two rows
   of three is the smallest honest layout below this width. */
@media (max-width:700px){
  .mf-results-filters{flex-wrap:wrap;}
  .mf-results-filters .mf-combo{flex:1 1 30%;}
  .mf-results-filters .mf-combo-panel{width:100%; max-width:none;}
}

/* ---- browse block -----------------------------------------------------
   Under the results, not above them. Every link here is an indexable
   landing page, and this is the only place on the site that points at one,
   so the block is doing two jobs at once: giving a reader a way in that
   isn't a dropdown, and giving a crawler all ~437 hubs in a single hop. */
.mf-browse{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:18px 24px; margin:26px 0 4px; padding-top:20px;
  border-top:1px solid #e5e3de;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
}
html.dark-mode .mf-browse{border-color:rgba(255,255,255,.12);}
.mf-browse-group h3{
  margin:0 0 9px; font-size:10.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:#9a9890;
}
.mf-browse-links{display:flex; flex-wrap:wrap; gap:5px;}
.mf-browse-links a{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:6px;
  background:#f5f4f1; color:#3a3a3a; text-decoration:none;
  font-size:12px; font-weight:600;
}
.mf-browse-links a em{
  font-style:normal; font-size:10.5px; font-weight:700; color:#a5a39b;
  font-variant-numeric:tabular-nums;
}
.mf-browse-links a:hover{background:#fdecea; color:#8e1b13;}
.mf-browse-links a:hover em{color:#c4635c;}
html.dark-mode .mf-browse-links a{background:#212227; color:#c9c8c4;}

/* ---- month / day archive navigation -----------------------------------
   The links that make the date hierarchy real. A year hub without its
   twelve months, or a month without its days, is a dead end for a reader
   and an unreachable page for a crawler. */
.mf-archivenav{
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  margin:0 0 14px;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
}
.mf-archivenav-title{
  font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:#9a9890; margin-right:3px;
}
.mf-archivenav a{
  display:inline-flex; align-items:center; gap:5px;
  height:26px; padding:0 9px; border-radius:6px;
  background:#f5f4f1; color:#3a3a3a; text-decoration:none;
  font-size:12px; font-weight:600;
}
.mf-archivenav a em{
  font-style:normal; font-size:10.5px; font-weight:700; color:#a5a39b;
  font-variant-numeric:tabular-nums;
}
.mf-archivenav a:hover{background:#fdecea; color:#8e1b13;}
.mf-archivenav a.is-on{background:#e2231a; color:#fff;}
.mf-archivenav a.is-on em{color:rgba(255,255,255,.75);}
html.dark-mode .mf-archivenav a{background:#212227; color:#c9c8c4;}

/* ---- instant search ---------------------------------------------------
   The box owns a panel, so it has to establish a positioning context and
   sit above the cards below it. */
.mf-results-bar .mf-quick{position:relative; z-index:var(--z-control);}
.mf-quick-spin{
  flex:0 0 14px; width:14px; height:14px; border-radius:50%;
  border:2px solid #e5e3de; border-top-color:#e2231a;
  animation:mf-spin .6s linear infinite;
}
@keyframes mf-spin{to{transform:rotate(360deg);}}
.mf-quick-clear{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:20px; height:20px; padding:0; border:0; border-radius:50%;
  background:#eceae5; color:#6b6a64; cursor:pointer;
}
.mf-quick-clear:hover{background:#e2231a; color:#fff;}

.mf-quick-panel{
  position:absolute; z-index:var(--z-panel); top:calc(100% + 6px); left:0; right:0;
  max-height:min(60vh, 460px); overflow-y:auto;
  background:#fff; border:1px solid #e5e3de; border-radius:10px;
  box-shadow:0 16px 40px rgba(0,0,0,.14);
  padding:6px;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
}
.mf-qp-group{padding:2px 0 4px;}
.mf-qp-group + .mf-qp-group{border-top:1px solid #f0eeea; margin-top:2px;}
.mf-qp-label{
  display:block; padding:6px 9px 4px;
  font-size:10px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:#a5a39b;
}
.mf-qp-row{
  display:grid; grid-template-columns:1fr auto; align-items:baseline;
  gap:2px 10px; padding:7px 9px; border-radius:7px;
  text-decoration:none; color:#181818; cursor:pointer;
}
.mf-qp-row:hover,
.mf-qp-row.is-on{background:#fdecea;}
.mf-qp-main{font-size:13px; font-weight:600;}
/* The matched letters, so it is obvious why a row is in the list. */
.mf-qp-main mark{background:none; color:#e2231a; font-weight:800;}
.mf-qp-score{
  font-size:12.5px; font-weight:700; color:#3a3a3a;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.mf-qp-meta{
  grid-column:1 / -1; font-size:11.5px; color:#8a887f;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  /* Grid child: same min-width:auto default as flex, same consequence -- a
     long venue name widened the suggestion panel instead of truncating. */
  min-width:0;
}
.mf-qp-all{
  display:block; margin-top:2px; padding:9px;
  border-top:1px solid #f0eeea; border-radius:0 0 7px 7px;
  font-size:12.5px; color:#8a887f; text-decoration:none;
}
.mf-qp-all b{color:#e2231a;}
.mf-qp-none{margin:0; padding:14px 10px; font-size:12.5px; color:#8a887f;}
.mf-qp-none b{color:#181818;}

html.dark-mode .mf-quick-panel{background:#212227; border-color:rgba(255,255,255,.14);}
html.dark-mode .mf-qp-row{color:#e7e7ea;}
html.dark-mode .mf-qp-row:hover,
html.dark-mode .mf-qp-row.is-on{background:rgba(226,35,26,.18);}
html.dark-mode .mf-qp-group + .mf-qp-group,
html.dark-mode .mf-qp-all{border-color:rgba(255,255,255,.1);}
html.dark-mode .mf-qp-score{color:#c9c8c4;}

/* ---- A to Z directory -------------------------------------------------
   The page that makes 2,138 landing pages reachable. Dense on purpose: a
   reader scans it, they do not read it. */
.mf-dir-jump{
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  margin:0 0 18px; padding-bottom:14px; border-bottom:1px solid #e5e3de;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
}
.mf-dir-jump a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:26px; padding:0 7px; border-radius:6px;
  background:#f5f4f1; color:#3a3a3a; text-decoration:none;
  font-size:12px; font-weight:700;
}
.mf-dir-jump a:hover{background:#e2231a; color:#fff;}
.mf-dir-other{margin-left:auto; background:none !important; color:#e2231a !important; font-weight:600 !important;}
.mf-dir-other:hover{text-decoration:underline;}

.mf-dir-group{margin:0 0 22px;}
.mf-dir-group h3{
  margin:0 0 9px; font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:13px; font-weight:800; color:#e2231a;
}
.mf-dir-links{display:flex; flex-wrap:wrap; gap:5px;}
.mf-dir-links a{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:6px;
  background:#f5f4f1; color:#3a3a3a; text-decoration:none;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:12.5px; font-weight:600;
}
.mf-dir-links a em{
  font-style:normal; font-size:10.5px; font-weight:700; color:#a5a39b;
  font-variant-numeric:tabular-nums;
}
.mf-dir-links a:hover{background:#fdecea; color:#8e1b13;}
.mf-browse-more{background:none !important; color:#e2231a !important;}

html.dark-mode .mf-dir-jump{border-color:rgba(255,255,255,.12);}
html.dark-mode .mf-dir-jump a,
html.dark-mode .mf-dir-links a{background:#212227; color:#c9c8c4;}

/* ---- browse row --------------------------------------------------------
   Replaces the browse wall that used to close this page. Two links to the
   A-to-Z directories, which is all that block was ever needed for: the
   filters at the top of the page do the browsing, and the directories keep
   the ~2,138 landing pages linked from somewhere. */
.mf-browse-row{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin:20px 0 4px; padding-top:15px;
  border-top:1px solid #e5e3de;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
}
.mf-browse-row a{
  font-size:12.5px; font-weight:600; color:#e2231a; text-decoration:none;
}
.mf-browse-row a:hover{text-decoration:underline;}
html.dark-mode .mf-browse-row{border-color:rgba(255,255,255,.12);}


/* ---- phones -------------------------------------------------------------
   Three problems below 520px, all of them only visible on a real handset:

   1. Two filters across leaves each about 140px, and "All competitions" does
      not fit in 140px. Single column below 520.
   2. Every input here was 12.5px. Safari on iOS zooms the page in whenever a
      focused field is under 16px, and it does not zoom back out -- the reader
      is left on a page wider than their screen with no obvious way back. All
      inputs go to 16px.
   3. The controls were 30-34px tall. 44px is the minimum for a target that
      can be hit reliably with a thumb; below that the miss rate climbs
      sharply, and a miss on a filter costs a page load. */
@media (max-width:520px){
  .mf-results-filters{gap:8px;}
  .mf-combo{flex:1 1 100%;}
  .mf-combo-btn,
  .mf-results-filters .mf-combo-btn{height:44px; font-size:14px;}

  .mf-results-bar .mf-quick{flex:1 1 100%; height:44px;}
  .mf-quick input{font-size:16px;}
  .mf-combo-search{height:42px; font-size:16px;}

  .mf-combo-panel{max-height:min(58vh, 340px);}

  /* The heading and the count stack rather than fighting over one line. */
  .mf-results-head{flex-wrap:wrap; row-gap:2px;}
  .news-heading-sep{display:none;}
  .mf-results-count{flex:1 1 100%;}
}

/* iPhone SE and similar. Only the padding is left to give back. */
@media (max-width:360px){
  .mf-browse-row{gap:12px;}
}

/* ---- match page: the scorecard that is not there yet -------------------
   An empty space on a page a reader came to for a scorecard is worse than a
   sentence saying it is missing: one of those reads as "still loading" or
   "broken", and the other lets them stop waiting and go somewhere useful. */
.mf-match-nocard{
  margin:26px 0 0; padding:18px 20px;
  border:1px dashed #ded9d0; border-radius:10px; background:#faf8f4;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
}
.mf-match-nocard h2{
  margin:0 0 6px; font-size:14px; font-weight:800; color:#181818;
}
.mf-match-nocard p{
  margin:0; max-width:62ch; font-size:13px; line-height:1.65; color:#7a786f;
}
html.dark-mode .mf-match-nocard{background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.14);}
html.dark-mode .mf-match-nocard h2{color:#f0efe9;}

/* ---- match page: where to go next -------------------------------------
   A match page answers one question and stops. These are the three it
   raises -- what else have these sides played, what else is in this
   competition -- each a page that already exists. */
/* ---- breadcrumbs ------------------------------------------------------
   These had no styles at all, which is why they rendered as the browser's
   default blue underlined links -- the one piece of chrome on the page
   that looked like it belonged to a different site. They read as a trail:
   quiet, uppercase-free, the separators lighter than the labels, and the
   page you are on stated in plain text rather than linked to itself. */
.mf-crumbs{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:12.5px; color:#9a9890;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin:0 0 14px; min-width:0;
}
.mf-crumbs a{color:#79776f; text-decoration:none; font-weight:600;}
.mf-crumbs a:hover{color:#e2231a;}
.mf-crumbs [aria-current="page"]{
  color:#9a9890; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:min(320px, 60vw); min-width:0;
}
.mf-crumb-sep{color:#cfcdc6; user-select:none;}
html.dark-mode .mf-crumbs{color:#7c7b76;}
html.dark-mode .mf-crumbs a{color:#9a9994;}
html.dark-mode .mf-crumbs [aria-current="page"]{color:#7c7b76;}
html.dark-mode .mf-crumb-sep{color:#4a4b50;}

/* ---- the day archive card at the foot of a match page ----------------- */
.mf-match-more{margin:16px 0 0; font-family:'Inter','Helvetica Neue',Arial,sans-serif;}
.mf-match-more-link{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 16px; border:1px solid #e5e3de; border-radius:9px;
  background:#fff; text-decoration:none; color:#181818;
  transition:border-color .12s, color .12s;
}
.mf-match-more-link:hover{border-color:#e2231a; color:#e2231a;}
.mf-match-more-text{display:flex; align-items:baseline; gap:6px; min-width:0; flex-wrap:wrap;}
.mf-match-more-label{font-size:11.5px; font-weight:600; color:#8a887f;}
.mf-match-more-link strong{font-size:13.5px; font-weight:700; color:inherit;}
.mf-match-more-link svg{flex:0 0 16px; color:#e2231a;}
html.dark-mode .mf-match-more-link{background:#212227; border-color:rgba(255,255,255,.14); color:#e7e7ea;}
html.dark-mode .mf-match-more-label{color:#8c8c94;}

.mf-match-related{margin:26px 0 0; font-family:'Inter','Helvetica Neue',Arial,sans-serif;}
.mf-match-related h2{
  margin:0 0 11px; font-size:11px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:#8a887f;
}
.mf-match-related-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:9px;
}
.mf-match-related-grid a{
  display:flex; flex-direction:column; gap:2px; min-width:0;
  padding:12px 14px; border:1px solid #e5e3de; border-radius:9px;
  background:#fff; text-decoration:none;
}
.mf-match-related-grid a:hover{border-color:#e2231a;}
.mf-match-related-grid strong{
  font-size:13.5px; font-weight:700; color:#181818;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.mf-match-related-grid span{font-size:11.5px; color:#8a887f;}
.mf-match-related-grid a:hover strong{color:#e2231a;}
html.dark-mode .mf-match-related-grid a{background:#212227; border-color:rgba(255,255,255,.14);}
html.dark-mode .mf-match-related-grid strong{color:#e7e7ea;}