/* Zijbalk en inschuivend paneel: programma, ranglijst en statistieken */
.srail, .sdrawer { --sr-navy: #0e324f; --sr-red: #e20c20; --sr-gold: #fab921; --sr-ice: #eef3f7; --sr-muted: #6b7f91; --sr-head: "Barlow Condensed", "Arial Narrow", sans-serif; font-family: "Open Sans", system-ui, sans-serif; }
.srail { position: fixed; right: 0; top: 50%; z-index: 9000; display: flex; flex-direction: column; transform: translateY(-50%); background: #fff; border-radius: 14px 0 0 14px; box-shadow: -8px 10px 30px -14px rgba(14,50,79,.55); overflow: hidden; }
.srail button, .srail a { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 66px; padding: 12px 4px 10px; cursor: pointer; color: var(--sr-navy); border-bottom: 1px solid var(--sr-ice); transition: background .2s, color .2s; }
.srail button:hover, .srail button.is-active { background: var(--sr-ice); color: var(--sr-red); }
.srail svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.srail span { font: italic 800 11px/1 var(--sr-head); text-transform: uppercase; letter-spacing: .03em; }
.srail a.srail__tickets { background: var(--sr-red); color: #fff; border-bottom: 0; }
.srail a.srail__tickets:hover { background: #b80a1a; }
.srail button:focus-visible, .srail a:focus-visible { outline: 3px solid var(--sr-gold); outline-offset: -3px; }

.sdrawer__shade { position: fixed; inset: 0; z-index: 9001; background: rgba(9,26,41,.45); opacity: 0; pointer-events: none; transition: opacity .3s; }
.sdrawer__shade.is-open { opacity: 1; pointer-events: auto; }
.sdrawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 9002; display: flex; flex-direction: column; width: min(460px, 36vw); min-width: 340px; background: #fff; box-shadow: -20px 0 50px -20px rgba(9,26,41,.6); transform: translateX(105%); transition: transform .38s cubic-bezier(.2,.7,.2,1); }
.sdrawer.is-open { transform: none; }
.sdrawer-lock { overflow: hidden; }
.sdrawer__head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 12px 18px; background: var(--sr-navy); }
.sdrawer__tabs { display: flex; gap: 4px; flex: 1; background: rgba(255,255,255,.1); border-radius: 999px; padding: 4px; }
.sdrawer__tabs button { all: unset; flex: 1; text-align: center; padding: 8px 10px; border-radius: 999px; cursor: pointer; color: rgba(255,255,255,.8); font: italic 800 14px/1 var(--sr-head); text-transform: uppercase; }
.sdrawer__tabs button.is-active { background: #fff; color: var(--sr-navy); }
.sdrawer__x { all: unset; position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; background: var(--sr-navy); color: #fff; font-size: 26px; line-height: 1; }
.sdrawer__x:hover { background: var(--sr-red); }
.sdrawer__body { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 22px 20px 18px; color: var(--sr-navy); }
.spage { flex: 1; min-height: 0; overflow: hidden; }
.spager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--sr-ice); }
.spager__b { all: unset; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--sr-navy); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.spager__b:disabled { opacity: .25; cursor: default; }
.spager__dots { display: flex; gap: 6px; }
.spager__dots i { width: 8px; height: 8px; border-radius: 50%; background: #c9d6e2; }
.spager__dots i.is-on { background: var(--sr-red); width: 22px; border-radius: 4px; }
.sdrawer__h { margin: 0 0 12px; font: italic 900 28px/1 var(--sr-head); text-transform: uppercase; color: var(--sr-navy); }
.sdrawer__live { display: inline-block; margin-left: 6px; padding: 4px 7px; border-radius: 4px; background: var(--sr-red); color: #fff; font-size: 12px; vertical-align: middle; letter-spacing: .06em; }
.sdrawer__msg { color: var(--sr-muted); }
.sdrawer__note { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 12px; color: var(--sr-muted); }
.sdrawer__note i { width: 4px; height: 14px; border-radius: 2px; background: var(--sr-gold); }
.sdrawer__more { display: inline-block; margin-top: 14px; font: italic 800 14px/1 var(--sr-head); text-transform: uppercase; color: var(--sr-red); text-decoration: none; }

.sprog { margin: 0; padding: 0; list-style: none; }
.sprog__day { margin: 14px 0 6px; font: italic 800 13px/1 var(--sr-head); text-transform: uppercase; letter-spacing: .06em; color: var(--sr-muted); }
.sprog__day:first-child { margin-top: 0; }
.sprog__g a { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px; border-radius: 10px; background: var(--sr-ice); color: var(--sr-navy); text-decoration: none; transition: background .2s; }
.sprog__g a:hover { background: #e2eaf1; }
.sprog__g.is-ere a { background: rgba(226,12,32,.08); }
.sprog__team { font: italic 900 15px/1.05 var(--sr-head); text-transform: uppercase; }
.sprog__team small { display: block; margin-top: 3px; font: 600 11px/1 "Open Sans", sans-serif; text-transform: none; color: var(--sr-muted); }
.sprog__opp { font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sprog__g b { font: italic 900 17px/1 var(--sr-head); }
.sprog__live { color: var(--sr-red); }

.sstand { width: 100%; border-collapse: collapse; font-size: 14px; }
.sstand th { font: 700 11px/1 "Open Sans", sans-serif; text-transform: uppercase; color: var(--sr-muted); padding: 6px 4px; text-align: center; }
.sstand th:nth-child(2) { text-align: left; }
.sstand td { padding: 6px 4px; border-top: 1px solid var(--sr-ice); text-align: center; font-weight: 600; }
.sstand td:nth-child(2) { text-align: left; font: italic 800 15px/1.1 var(--sr-head); text-transform: uppercase; }
.sstand td:nth-child(2) small { display: block; font: 700 11px/1.2 "Open Sans", sans-serif; text-transform: none; color: var(--sr-red); }
.sstand td i { display: block; font: 800 9px/1 "Open Sans", sans-serif; font-style: normal; }
.sstand td i.up { color: #12a150; }
.sstand td i.down { color: var(--sr-red); }
.sstand tr.is-po td:first-child { box-shadow: inset 3px 0 0 var(--sr-gold); }
.sstand tr.po-cut td { border-bottom: 2px dashed var(--sr-gold); }
.sstand tr.is-us td { background: rgba(226,12,32,.07); }
.sstand tr.is-us td:nth-child(2) { color: var(--sr-red); }
.sstand tr.is-live td { background: rgba(250,185,33,.1); }

.sstats__toggle { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 8px; border-radius: 999px; background: var(--sr-ice); }
.sstats__toggle button { all: unset; padding: 8px 14px; border-radius: 999px; cursor: pointer; font: italic 800 13px/1 var(--sr-head); text-transform: uppercase; color: var(--sr-muted); }
.sstats__toggle button.is-on { background: var(--sr-navy); color: #fff; }
.sstats__b h3 { margin: 8px 0 6px; font: italic 900 18px/1 var(--sr-head); text-transform: uppercase; }
.sstats__b ol { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.sstats__b li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--sr-ice); counter-increment: s; }
.sstats__b li::before { content: counter(s); width: 18px; font: italic 800 14px/1 var(--sr-head); color: var(--sr-muted); }
.sstats__b li span { flex: 1; font-weight: 700; font-size: 14px; }
.sstats__b li small { display: block; font-weight: 600; font-size: 11px; color: var(--sr-muted); }
.sstats__b li b { font: italic 900 20px/1 var(--sr-head); }
.sstats__b li.is-us span { color: var(--sr-red); }

@media (max-width: 760px) {
  .srail { top: auto; bottom: 90px; transform: none; border-radius: 12px 0 0 12px; }
  .srail button, .srail a { width: 54px; padding: 9px 2px 8px; }
  .srail svg { width: 20px; height: 20px; }
  .srail span { font-size: 9.5px; }
  .srail a.srail__tickets { display: none; }
  .sdrawer { width: 92vw; min-width: 0; }
}
@media print { .srail, .sdrawer, .sdrawer__shade { display: none; } }

/* Eredivisie-logo boven de knoppen */
.srail__logo { display: grid; place-items: center; width: 66px; padding: 10px 8px 8px; background: #0b2a47; }
.srail__logo img { width: 42px; height: auto; display: block; }
.sdrawer__h small { font: italic 800 14px/1 var(--sr-head); color: #e8701a; margin-left: 6px; letter-spacing: .04em; }
/* programma: thuis – tijd/score – uit */
.sprog__m { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 9px 10px; margin-bottom: 5px; border-radius: 10px; background: var(--sr-ice); font: italic 800 15px/1.1 var(--sr-head); text-transform: uppercase; }
.sprog__m .sprog__h { text-align: right; }
.sprog__m b { min-width: 52px; text-align: center; padding: 5px 8px; border-radius: 6px; background: #fff; font: italic 900 16px/1 var(--sr-head); }
.sprog__m.is-us { background: rgba(226,12,32,.09); color: var(--sr-red); }
@media (max-width: 760px) { .srail__logo { width: 54px; } .srail__logo img { width: 34px; } }

.sprog__kind { margin: 0 0 8px; font: italic 800 12px/1 var(--sr-head); text-transform: uppercase; letter-spacing: .08em; color: #e8701a; }
.sprog__m b.sprog__fin { background: var(--sr-navy); color: #fff; }
.sstats__b h3 small { font: 600 11px/1 'Open Sans', sans-serif; text-transform: none; color: var(--sr-muted); margin-left: 6px; }

/* clublogo's in programma, ranglijst en statistieken */
.slogo { display: inline-block; flex: none; width: 24px; height: 24px; object-fit: contain; vertical-align: middle; }
.sprog__m .sprog__h, .sprog__m .sprog__a { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sprog__m .sprog__h { justify-content: flex-end; }
.sprog__m .slogo { width: 22px; height: 22px; }
.sstand__t { display: flex; align-items: center; gap: 8px; }
.sstand__t .slogo { width: 22px; height: 22px; }
.sstats__b li .slogo { width: 26px; height: 26px; }