/* Markets.Futbol : Schedule.
   Shares the brand tokens from style.css / blog.css / press.css.

   Team identity is deliberately TEXT ONLY: an abbreviation chip filled with the
   club's colour, plus the full club name. No club crests, no competition
   badges. See docs note in schedule.html. The chip must never be arranged to
   imitate a real crest's composition. */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --gold:#f2ca50; --gold-dim:#c9a63f; --emerald:#59de9b;
  --surface:#080a0e; --doc:#111317;
  --text:#dcdce4; --head:#ffffff; --dim:#8a8a9a;
  --card:rgba(255,255,255,.03); --line:rgba(255,255,255,.09);
  --line-soft:rgba(255,255,255,.055);
  --lc:#f2ca50;     /* Leagues Cup accent */
  --mls:#59de9b;    /* MLS accent */
  --furniture:1040px;
}

html{
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:radial-gradient(120% 55% at 50% -8%,rgba(242,202,80,.07),transparent 45%),var(--surface);
  color:var(--text);line-height:1.6;
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;
}
body{background:transparent;min-height:100vh}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
.wrap{max-width:var(--furniture);margin:0 auto;padding:0 22px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------ Header ------ */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  max-width:var(--furniture);margin:0 auto;padding:20px 22px}
.brand{display:flex;align-items:center;gap:9px;color:#fff;font-weight:800;font-size:1.05rem}
.brand:hover{text-decoration:none}
.brand img{width:26px;height:26px}
.nav-actions{display:flex;align-items:center;gap:9px}
.cta-btn{display:inline-block;background:var(--gold);color:#0a0a0a;font-weight:800;
  font-size:.88rem;padding:9px 15px;border-radius:.6rem;white-space:nowrap;transition:background .15s}
.cta-btn:hover{background:#ffd75e;text-decoration:none}

/* Language toggle. Flag is decorative; the accessible name is the language. */
.lang{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:.55rem;background:transparent;color:var(--text);cursor:pointer;
  font-family:inherit;font-size:.82rem;font-weight:700;padding:8px 11px;transition:border-color .15s,color .15s}
.lang:hover{border-color:var(--gold);color:var(--gold)}
.lang .flag{font-size:1rem;line-height:1}

/* ------ Masthead ------ */
.masthead{padding:30px 22px 6px;max-width:var(--furniture);margin:0 auto}
.eyebrow{color:var(--gold);font-weight:700;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase}
.masthead h1{font-size:clamp(2.1rem,6vw,3rem);font-weight:800;letter-spacing:-.03em;
  color:var(--head);line-height:1.05;margin:10px 0 12px}
.masthead .descriptor{color:var(--dim);font-size:1.04rem;max-width:60ch}
.rule{height:1px;background:linear-gradient(90deg,var(--gold),rgba(242,202,80,.12) 42%,transparent);margin:24px 0 0}

/* ------ Competition explainers ------ */
.comps{display:grid;gap:14px;margin-top:30px}
@media(min-width:760px){.comps{grid-template-columns:1fr 1fr}}
.comp{background:var(--doc);border:1px solid var(--line);border-radius:1rem;padding:22px 22px 20px;
  border-top:3px solid var(--line)}
.comp[data-comp="leagues-cup"]{border-top-color:var(--lc)}
.comp[data-comp="mls"]{border-top-color:var(--mls)}
.comp .tag{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.comp[data-comp="leagues-cup"] .tag{color:var(--lc)}
.comp[data-comp="mls"] .tag{color:var(--mls)}
.comp h2{font-size:1.24rem;font-weight:800;color:var(--head);letter-spacing:-.02em;margin:7px 0 4px}
.comp .window{color:var(--dim);font-size:.84rem;font-weight:600;margin-bottom:11px}
.comp p{font-size:.94rem;line-height:1.7;color:var(--text);opacity:.85}

/* ------ Controls ------ */
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:34px 0 18px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.controls .label{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-right:4px}
.filter{background:transparent;border:1px solid var(--line);border-radius:.5rem;color:var(--text);
  font-family:inherit;font-size:.84rem;font-weight:700;padding:8px 13px;cursor:pointer;transition:.15s}
.filter:hover{border-color:var(--gold);color:var(--gold)}
.filter[aria-pressed="true"]{background:rgba(242,202,80,.12);border-color:var(--gold);color:var(--gold)}
.count{margin-left:auto;color:var(--dim);font-size:.82rem;font-weight:600;font-variant-numeric:tabular-nums}

/* ------ Day groups ------ */
.day{margin-bottom:30px}
.day-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:9px;margin-bottom:12px;border-bottom:1px solid var(--line-soft)}
.day-date{font-size:1.02rem;font-weight:800;color:var(--head);letter-spacing:-.01em}
.day-meta{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.day-count{margin-left:auto;font-size:.78rem;color:var(--dim);font-weight:600;font-variant-numeric:tabular-nums}

.fixtures{list-style:none;display:grid;gap:8px}

/* Row is a 3 column grid: home | time | away. The time block sits in the
   middle and is the anchor of the row, because "when is this on" is the
   question a schedule actually answers. */
.fx{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  background:var(--card);border:1px solid var(--line-soft);border-radius:.7rem;
  padding:14px 18px;border-left:3px solid var(--line)}
.fx[data-comp="leagues-cup"]{border-left-color:var(--lc)}
.fx[data-comp="mls"]{border-left-color:var(--mls)}

.fx .side{display:flex;align-items:center;gap:11px;min-width:0}
.fx .side.home{flex-direction:row-reverse;justify-content:flex-start;text-align:right}
.fx .side.away{justify-content:flex-start;text-align:left}
.fx .name{font-size:1.06rem;font-weight:700;color:var(--head);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Centre time block */
.fx .when{flex:none;min-width:8.4rem;text-align:center;padding:2px 10px;
  border-left:1px solid var(--line-soft);border-right:1px solid var(--line-soft)}
.fx .t-main{display:block;font-size:1.08rem;font-weight:800;color:var(--head);
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.2}
.fx .t-zone{display:block;font-size:.63rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);margin-top:1px}
.fx .t-alt{display:block;font-size:.7rem;color:var(--dim);font-weight:600;
  margin-top:4px;font-variant-numeric:tabular-nums;line-height:1.45}
.fx .t-tbd{display:block;font-size:.78rem;font-weight:700;color:var(--dim)}

/* Team chip: abbreviation on the club's colour. Deliberately a plain rounded
   square with type in it. Never shaped or composed to resemble a crest. */
.chip{flex:none;width:38px;height:38px;border-radius:.5rem;display:grid;place-items:center;
  font-size:.72rem;font-weight:800;letter-spacing:.02em;color:#0a0a0a;
  background:#5a5f6b;border:1px solid rgba(255,255,255,.14)}
.chip.light{color:#f5f5f7}

.empty-day{color:var(--dim);font-size:.9rem;padding:14px 2px}
.day.is-today .day-date{color:var(--gold)}
.today-pill{flex:none;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#0a0a0a;background:var(--gold);border-radius:.3rem;padding:3px 7px}
.past-note{color:var(--dim);font-size:.84rem;padding:0 0 18px;border-bottom:1px solid var(--line-soft);margin-bottom:22px}
.past-note button{background:none;border:0;color:var(--gold);font-family:inherit;font-size:.84rem;
  font-weight:700;cursor:pointer;padding:0;text-decoration:underline}

/* ------ Later window ------ */
.later{margin-top:38px;background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:22px}
.later h2{font-size:1.1rem;font-weight:800;color:var(--head);margin-bottom:10px;letter-spacing:-.01em}
.later ul{list-style:none;display:grid;gap:9px}
.later li{display:flex;gap:14px;align-items:baseline;font-size:.93rem}
.later .k{flex:none;width:9.5rem;color:var(--dim);font-size:.78rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}

/* ------ Notice + footer ------ */
.notice{margin-top:30px;padding:15px 17px;background:var(--card);border:1px solid var(--line-soft);
  border-radius:.7rem;color:var(--dim);font-size:.86rem;line-height:1.7}
.foot{margin-top:52px;padding:24px 22px 44px;border-top:1px solid var(--line);
  max-width:var(--furniture);margin-left:auto;margin-right:auto}
.foot p{color:var(--dim);font-size:.85rem;line-height:1.8}
.foot a{color:inherit;text-decoration:underline;opacity:.85}
.foot a:hover{color:var(--gold)}

@media(prefers-reduced-motion:no-preference){
  .reveal{animation:rise .45s cubic-bezier(.22,.61,.36,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

@media(max-width:620px){
  .fx{grid-template-columns:1fr auto 1fr;gap:8px;padding:11px 12px}
  .fx .when{min-width:5.4rem;padding:2px 4px}
  .fx .t-main{font-size:.88rem}
  .fx .t-alt{display:none}
  .chip{width:32px;height:32px;font-size:.63rem}
  .fx .name{font-size:.92rem}
}
@media(max-width:420px){
  .fx .name{display:none}
  .fx .side{justify-content:center}
  .fx .side.home,.fx .side.away{justify-content:center}
}