:root{
  --paper:#F3F5FA; --surface:#FFFFFF; --ink:#1B1F3B; --muted:#565B78; --line:#D9DCEA;
  --red:#C8361F; --cobalt:#2445C4; --sun:#FFC83D; --pink:#FF4F79; --tag-ink:#1B1F3B;
  --focus:#2445C4; --on-c:#FFFFFF; --alert:#C8361F; --free:#1D6E45;
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root{
  --paper:#11132A; --surface:#1A1D3A; --ink:#EEF0FA; --muted:#A9ADC9; --line:#2E3256;
  --red:#A92B17; --cobalt:#8EA6FF; --focus:#8EA6FF; --on-c:#11132A; --alert:#FF9A8A; --free:#7BD89F; } }
*,*::before,*::after{box-sizing:inherit}
/* the filters hide rows with the hidden attribute; keep it winning over display rules like .fx{display:grid} */
[hidden]{display:none!important}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 10rem)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.5}
a{color:var(--cobalt)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.wrap{max-width:54rem;margin:0 auto;padding:0 1.25rem}
.sr{position:absolute;left:-9999px}
.nowrap{white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:.5rem 1rem;z-index:20}
.skip:focus{left:1rem}

.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0}
.logo{display:inline-flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.logo b{font-family:var(--display);font-weight:900;font-size:1.65rem;line-height:.85;text-transform:uppercase}
.logo .bars{display:flex;gap:3px;margin-top:5px}
.logo .bars i{display:block;width:14px;height:5px;border-radius:1px}
.cta{font:inherit;font-weight:700;background:var(--red);color:#fff;border:0;border-radius:8px;padding:.55rem 1rem;cursor:pointer;text-decoration:none;white-space:nowrap;display:inline-block}
.btn{font-weight:700;color:var(--ink);border:1.5px solid var(--ink);border-radius:6px;padding:.15rem .55rem;text-decoration:none;font-size:.88rem;display:inline-block}

.hero{background:var(--red);color:#fff;position:relative;overflow:hidden}
.hero .wrap{padding-top:2.6rem;padding-bottom:2.4rem}
.hero h1{font-family:var(--display);font-weight:900;font-size:clamp(3rem,12vw,6.2rem);line-height:.86;margin:0;max-width:11ch;text-transform:uppercase}
.hero p{margin:1rem 0 0;font-size:1.1rem;max-width:34rem}
.hero .strapline{font-size:1.3rem;font-weight:700;margin-top:1.1rem}
.hero .ways-in{margin-top:.25rem}
.hero .stripe{position:absolute;left:0;right:0;bottom:0;height:10px;display:flex}
.hero .stripe i{flex:1}

.controls{position:sticky;top:0;z-index:5;background:var(--paper);padding:.8rem 0;border-bottom:1px solid var(--line)}
.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.row + .row{margin-top:.6rem}
.seg{display:inline-flex;border:2px solid var(--ink);border-radius:10px;overflow:hidden}
.seg button{font:inherit;font-weight:700;background:transparent;color:var(--ink);border:0;padding:.42rem .8rem;cursor:pointer}
.seg button + button{border-left:2px solid var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.toggles{display:flex;gap:1rem;margin-left:auto;flex-wrap:wrap}
.toggle{display:inline-flex;align-items:center;gap:.4rem;font-size:.92rem;cursor:pointer}
.toggle input{width:1.1rem;height:1.1rem;accent-color:var(--ink)}
.chip{font:inherit;font-size:.86rem;font-weight:700;border:2px solid var(--c,var(--ink));color:var(--ink);background:transparent;border-radius:999px;padding:.18rem .72rem;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--c,var(--ink));color:var(--on-c)}
.chip.all[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
/* Small wordmark in the sticky bar, shown once the page header has scrolled away */
.mini-logo{display:none;flex-direction:column;text-decoration:none;color:var(--ink);margin-right:.2rem}
.mini-logo b{font-family:var(--display);font-weight:900;font-size:.95rem;line-height:.85;text-transform:uppercase}
body.is-stuck .mini-logo{display:inline-flex}
.picked{margin:.4rem 0 0;font-size:.86rem;color:var(--muted)}
.linklike{font:inherit;color:var(--cobalt);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}

.day h2{font-family:var(--display);font-weight:800;font-size:2rem;margin:2.1rem 0 .3rem;line-height:1;text-transform:uppercase}
.fx{display:grid;grid-template-columns:4.4rem 6px 1fr;gap:0 .9rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.fx.is-cancelled .title{text-decoration:line-through}
.time{font-family:var(--display);font-weight:800;font-size:1.7rem;line-height:1;font-variant-numeric:tabular-nums}
.time small{display:block;font-family:var(--body);font-weight:400;font-size:.75rem;color:var(--muted);margin-top:.25rem;line-height:1.2}
.bar{border-radius:3px;background:var(--c)}
.comp{font-size:.85rem;font-weight:700;color:var(--c);margin:0}
.title{font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1.08;margin:.1rem 0 .5rem}
.title a{color:inherit;text-decoration:none}
.title a:hover{text-decoration:underline}
.title .v{font-weight:700;color:var(--muted);padding:0 .3rem}
.alert{color:var(--alert);font-weight:700;margin:0 0 .4rem}
.info{display:flex;flex-wrap:wrap;gap:.25rem .7rem;font-size:.95rem;align-items:baseline}
.info + .info{margin-top:.25rem}
.lbl{color:var(--muted);min-width:3.2rem}
/* Labels are plain text (with a small icon for free and warnings). Only clickable things
   (.cta, .btn, .havego, links) look like buttons. */
.tag{font-size:.82rem;font-weight:700;color:var(--muted)}
.tag.free{color:var(--free)}
.tag.free::before{content:"✓\00a0" / ""}
.tag.para{color:var(--ink)}
.tag.warn{color:var(--alert)}
.tag.womenonly{color:var(--ink)}
.info .entry{font-size:.9rem}
.info .checked-on{font-size:.82rem;color:var(--muted)}
.tag.warn::before{content:"⚠\FE0E\00a0" / ""}
.meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center;margin-top:.6rem;font-size:.85rem}
.meta .havego{font-weight:700;background:var(--c);color:#fff;border-radius:6px;padding:.15rem .6rem;text-decoration:none;font-size:.88rem}
.meta .havego:hover{text-decoration:underline}
.pricenote{flex-basis:100%;color:var(--muted);font-size:.82rem;margin-left:3.9rem}
.havego-card p{margin:.4rem 0 .7rem}
.meta .checked{color:var(--muted);display:inline-flex;align-items:center;gap:.3rem}
/* "Official source" badge: a quiet shield with a check, not an emoji */
.ico-verified{width:1rem;height:1rem;flex:none}
.ico-verified .shield{fill:var(--cobalt)}
.ico-verified .tick{fill:none;stroke:var(--surface);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.info .muted{color:var(--muted);font-size:.88rem}
body.mode-go .info.watch, body.mode-watch .info.go{display:none}

.cards-head{font-family:var(--display);font-weight:900;font-size:2.4rem;line-height:.95;margin:3rem 0 1rem;text-transform:uppercase}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:1rem}
.card{display:block;background:var(--surface);border:1px solid var(--line);border-top:8px solid var(--c);border-radius:12px;padding:1rem 1.1rem;color:var(--ink);text-decoration:none}
.card h3{font-family:var(--display);font-weight:900;font-size:1.8rem;line-height:1;margin:0;text-transform:uppercase}
.card .season{font-size:.88rem;color:var(--muted);margin:.25rem 0 .6rem}
.card .more{font-weight:700;color:var(--c);font-size:.9rem}
.card.static{border-top-color:var(--c)}
.block{margin:0 0 .6rem}
.block b{display:block;font-size:.85rem;color:var(--c)}
.block p{margin:.1rem 0 0}
.trybox{border-left:4px solid var(--c);padding:.5rem .8rem;margin:.8rem 0;background:var(--paper);border-radius:0 8px 8px 0}
.trybox b{display:block;font-family:var(--display);font-weight:800;font-size:1.25rem}
.trybox p{margin:.1rem 0 0}
.follow{color:var(--muted);margin:0}
.follow strong{color:var(--ink)}

.empty{padding:2rem 0}
.empty h2{font-family:var(--display);font-weight:800;font-size:1.8rem;margin:0 0 .4rem;text-transform:uppercase}
.empty p{margin:0 0 1rem;color:var(--muted)}

.signup{margin:3rem 0 2rem;background:var(--ink);color:var(--paper);border-radius:14px;padding:1.6rem}
.signup h2{font-family:var(--display);font-weight:900;font-size:2.2rem;margin:0 0 .3rem;line-height:.95;text-transform:uppercase}
.signup p{margin:0 0 1rem;opacity:.85}
.signup form{display:grid;gap:.7rem}
.signup .line{display:flex;flex-wrap:wrap;gap:.6rem}
.signup input[type=email]{flex:1 1 14rem;font:inherit;padding:.6rem .8rem;border:2px solid transparent;border-radius:8px}
.signup .chk{display:flex;gap:.5rem;align-items:flex-start;font-size:.92rem}
.signup .chk input{width:1.1rem;height:1.1rem;margin-top:.15rem;accent-color:var(--sun)}
.msg{min-height:1.4em;margin:0}
.signup .small{font-size:.85rem;margin:0}
.signup .small a{color:inherit}
.sports-pick{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 1.1rem}
.sports-pick legend{font-weight:700;padding:0;margin-bottom:.4rem}
.sports-pick .opt{font-weight:400;opacity:.85}

.crumb{font-size:.9rem;margin:1rem 0 .5rem}
.event-title{font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,9vw,4.4rem);line-height:.9;margin:.2rem 0 .4rem;text-transform:uppercase}
.when{font-size:1.1rem;font-weight:700;margin:0 0 1rem}
.event-list .fx{border-top:1px solid var(--line)}
.share{display:flex;gap:.8rem;align-items:center;margin:1.4rem 0}
.note{color:var(--muted);font-size:.92rem}
.finished{border:3px solid var(--ink);border-radius:14px;padding:1rem 1.3rem;margin:1.2rem 0 2.5rem}
.finished h2{font-family:var(--display);font-weight:900;font-size:1.8rem;line-height:1;margin:0 0 .6rem;text-transform:uppercase}
.finished ul{padding-left:1.2rem}
.finished li + li{margin-top:.3rem}
.prose{max-width:40rem;padding-bottom:3rem}
.prose .small{font-size:.88rem;color:var(--muted)}
.prose h2{font-family:var(--display);font-weight:800;font-size:1.7rem;line-height:1;margin:2rem 0 .5rem;text-transform:uppercase}
.prose .lede{font-size:1.15rem}
.prose ul{padding-left:1.2rem}
.draft-note{border-left:4px solid var(--alert);padding:.4rem .8rem;background:var(--surface)}
.optout{border:2px solid var(--ink);border-radius:12px;padding:1rem 1.2rem;margin:1rem 0}
.optout p{margin:0 0 .8rem;font-weight:700}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.admin table{width:100%;border-collapse:collapse;margin:0 0 1.2rem;font-size:.92rem}
.admin caption{text-align:left;font-weight:700;padding:.3rem 0}
.admin th,.admin td{text-align:left;padding:.3rem .4rem;border-bottom:1px solid var(--line)}
.admin .num{text-align:right;font-variant-numeric:tabular-nums}
.prose li + li{margin-top:.3rem}
.tipform{display:grid;gap:.35rem;margin:1.2rem 0}
.tipform label{font-weight:700;margin-top:.6rem}
.tipform .opt{font-weight:400;color:var(--muted)}
.tipform input{font:inherit;padding:.6rem .8rem;border:2px solid var(--ink);border-radius:8px;background:var(--surface);color:var(--ink)}
.tipform input[aria-invalid="true"]{border-color:var(--alert)}
.tipform .cta{justify-self:start;margin-top:1rem}
.hp{position:absolute;left:-9999px}   /* honeypot fields: hidden from people, bots fill them in */
.field-error{color:var(--alert);font-weight:700;margin:0}
.error-summary{border:3px solid var(--alert);border-radius:10px;padding:.6rem 1rem;margin:1rem 0}
.error-summary ul{margin:.2rem 0 0;padding-left:1.2rem}
.site-foot{font-size:.85rem;color:var(--muted);padding-bottom:2.5rem}
.site-foot nav{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:.5rem}
.site-foot .foot-strap{font-weight:700;color:var(--ink);margin:.4rem 0}

/* add-to-calendar menu */
.calmenu{position:relative;display:inline-block}
.calmenu summary{list-style:none;cursor:pointer}
.calmenu summary.cta{white-space:normal;max-width:100%}
.nevermiss .calmenu{max-width:100%}
.calmenu summary::-webkit-details-marker{display:none}
.calmenu summary::after{content:" \25BE"}
.calmenu ul{position:absolute;z-index:6;left:0;top:calc(100% + 4px);min-width:13.5rem;margin:0;padding:.3rem 0;list-style:none;
  background:var(--surface);border:1.5px solid var(--ink);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.15)}
.calmenu li a{display:block;padding:.45rem .9rem;color:var(--ink);font-weight:700;text-decoration:none;font-size:.92rem}
.calmenu li a:hover,.calmenu li a:focus-visible{background:var(--paper);text-decoration:underline}
.calnote{flex-basis:100%;margin:.3rem 0 0;font-size:.85rem;font-weight:700;color:var(--ink)}
.nevermiss .calnote{margin-top:.6rem}
.calnote:empty{margin:0}

.nevermiss{margin:2.5rem 0;background:var(--surface);border:1px solid var(--line);border-left:8px solid var(--c,var(--ink));border-radius:12px;padding:1.3rem 1.4rem}
.nevermiss h2{font-family:var(--display);font-weight:900;font-size:2rem;line-height:.95;margin:0 0 .5rem;text-transform:uppercase}
.nevermiss p{margin:0 0 1rem;max-width:38rem}
.nevermiss .small{font-size:.85rem;color:var(--muted);margin:1rem 0 0}

.quiet{margin:2.5rem 0;border:3px solid var(--ink);border-radius:14px;padding:1.2rem 1.4rem}
.quiet h2{font-family:var(--display);font-weight:900;font-size:2rem;line-height:.95;margin:0 0 .7rem;text-transform:uppercase}
.quiet ul{list-style:none;margin:0;padding:0}
.quiet li{padding:.45rem 0;border-top:1px solid var(--line)}
.quiet li:first-child{border-top:0}
.quiet .qs{font-weight:700;color:var(--c,var(--ink));margin-right:.45rem;text-decoration:none}
.quiet a.qs:hover{text-decoration:underline}

.soon{margin:1.4rem 0;padding:.8rem 1rem;border:1.5px dashed var(--muted);border-radius:10px}
.soon p{margin:0}

/* Phones: keep the sticky bar slim. Sports become one row you swipe sideways. */
@media (max-width:40rem){
  .controls{padding:.5rem 0}
  .row + .row{margin-top:.45rem}
  .controls .row:first-child{row-gap:.4rem}
  .seg{flex:none}
  .seg button{font-size:.88rem;padding:.34rem .5rem}
  .toggles{margin-left:0;gap:.9rem;flex-basis:100%}
  .toggle{font-size:.88rem}
  .sports-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin:0 -1.25rem;padding:0 1.25rem .1rem;scroll-padding:0 1.25rem}
  .sports-row::-webkit-scrollbar{display:none}
  .sports-row .chip{flex:none}
  /* a soft fade at the right edge says there's more to swipe */
  .sports-row{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2.2rem),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 2.2rem),transparent)}
}
@media (max-width:32rem){
  .pricenote{margin-left:0}
  .fx{grid-template-columns:3.6rem 5px 1fr;gap:0 .7rem}
  .time{font-size:1.4rem}.title{font-size:1.32rem}
  .top .cta{padding:.45rem .7rem;font-size:.9rem;white-space:normal;text-align:center;max-width:11rem;line-height:1.2}
}

/* Dark mode: sport colours used as text are lightened so they keep WCAG AA contrast (6:1+) */
@media (prefers-color-scheme: dark){
  .comp,.card .more,.block b,.quiet .qs{color:color-mix(in srgb,var(--c,var(--ink)) 50%,white)}
}

/* Pick of the week, and a slimmer header on phones */
.picks{padding-top:1.4rem;padding-bottom:.4rem}
.picks h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:1.6rem;margin:0 0 .7rem}
.pick-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.pick{display:flex;flex-direction:column;gap:.25rem;background:#fff;border-radius:12px;border-top:6px solid var(--c);padding:.9rem 1rem 1rem;color:var(--ink);text-decoration:none;box-shadow:0 1px 0 var(--line)}
.pick:hover{outline:2px solid var(--c)}
.pick-sport{font-size:.8rem;font-weight:700;color:var(--c);text-transform:uppercase;letter-spacing:.04em}
.pick-title{font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1.05}
.pick-when{font-size:.9rem;color:var(--muted)}
.pick-note{font-style:italic;font-size:.95rem;line-height:1.35;margin:.15rem 0 .1rem}
.pick-action{margin-top:auto;padding-top:.4rem;font-weight:700;font-size:.92rem}
@media (max-width:700px){
  .hero .wrap{padding-top:1.4rem;padding-bottom:1.4rem}
  .hero h1{font-size:2.6rem}
  .hero .strapline{font-size:1.05rem;margin-top:.6rem}
  .hero .ways-in{display:none}
  .pick-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 .4rem}
  .pick{flex:0 0 72%;scroll-snap-align:start}
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pick{background:#22264a;color:var(--paper)}}