/* 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. */

.mf-results-count{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:12.5px; font-weight:600; color:#8a887f; white-space:nowrap;
}
html.dark-mode .mf-results-count{color:#8c8c94;}

.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 + filter bar ----------------------------------------
   Compact by design: the whole bar is one line on a desktop, and the three
   controls are the same height as the count beside them. */
.mf-results-head{margin-bottom:2px;}

.mf-results-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px 14px; flex-wrap:wrap;
  padding:12px 0 13px; margin-bottom:14px;
  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);}

.mf-results-total{display:flex; align-items:baseline; gap:6px; flex-shrink:0;}
.mf-results-total strong{
  font-size:24px; font-weight:800; letter-spacing:-.8px; color:#181818;
  font-variant-numeric:tabular-nums; line-height:1;
}
.mf-results-total span{font-size:12px; font-weight:600; color:#8a887f;}
html.dark-mode .mf-results-total strong{color:#e7e7ea;}

.mf-results-filters{display:flex; align-items:center; gap:7px; flex-wrap:wrap; flex:1 1 100%;}

/* --- 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;}
.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;}

.mf-combo-panel{
  position:absolute; z-index:60; 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;}
.mf-combo-opt em{
  flex-shrink:0; font-style:normal; font-size:11px; font-weight:700; color:#9a9890;
  font-variant-numeric:tabular-nums;
}
.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-results-bar{flex-direction:column; align-items:stretch; gap:11px;}
  .mf-results-filters{width:100%;}
  .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-quick{flex:1 1 100%; order:3;}
  .mf-chiprow{gap:6px;}
  .mf-chiprow-label{min-width:0; width:100%; margin-bottom:2px;}
}