/* buffstreams.ch — one dark theme, no light mode.
 *
 * The owner's palette: a near-black page, dark grey cards, darker rows with
 * dashed separators, white names, grey times and teal "Live Streams" buttons.
 * Every colour is a token in :root; the board rules further
 * down read the same tokens, so the sport pages and the event page follow.
 */

:root {
  --bg:         #121316;
  --surface:    #1b1d21;
  --surface2:   #24272c;
  --row:        #16181b;
  --border:     #2a2d33;
  --dash:       #3a3e46;
  --text:       #ffffff;
  --text2:      #e4e6e8;
  --muted:      #9aa0a6;
  --accent:     #0e97ad;
  --accent-hi:  #42c3d8;   /* teal for text, links and focus rings on the dark page */
  --accent-hover: #12a9c2; /* button hover */
  --on-accent:  #ffffff;
  --live:       #ff4d4f;
  --good:       var(--good);
  --tile:       #e9edef;
  --accent-rgb: 14,151,173;
  --live-rgb:   255,77,79;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; min-height: 100vh; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
  font-size: 16px;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
strong { color: var(--text); font-weight: 700; }
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ------------------------------------------------------------- top bar */
.mtop{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--border)}
.mtop-in{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:0 22px;padding:0 16px;min-height:60px}
.mbrand{color:var(--text);font-weight:800;font-size:1.45rem;letter-spacing:.04em;white-space:nowrap;flex:0 0 auto}
.mnav{display:flex;align-items:center;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mnav::-webkit-scrollbar{display:none}
.mnav-a{display:inline-flex;align-items:center;min-height:60px;color:var(--text2);font-size:.95rem;font-weight:500;letter-spacing:.06em;padding:0 11px;white-space:nowrap;border-bottom:2px solid transparent;flex:0 0 auto}
.mnav-a:hover{color:var(--text)}
.mnav-a.on{color:var(--text);border-bottom-color:var(--accent)}
.mtop-r{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.msearch{height:34px;padding:0 14px;border-radius:6px;border:1px solid var(--border);background:var(--row);color:var(--text2);font:inherit;font-size:.85rem;cursor:pointer}
.msearch:hover,.msearch:focus-visible{color:var(--text);border-color:var(--accent)}
.mtop :focus-visible,.licons :focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px}
@media(max-width:1000px){
  .mtop-in{flex-wrap:wrap;padding:6px 12px 0;gap:0 12px}
  .mtop-r{margin-left:auto}
  .mnav{order:3;flex:1 1 100%;margin:0 -12px;padding:0 4px;border-top:1px solid var(--border)}
  .mnav-a{min-height:44px;padding:0 11px;font-size:.9rem}
  .mtop-r .mnav-a{min-height:40px}
}

/* ------------------------------------------------------ league icon row */
.licons{background:var(--bg)}
.licons-in{max-width:1280px;margin:0 auto;padding:14px 16px 4px;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.licons-in::-webkit-scrollbar{display:none}
.licon{flex:0 0 auto;width:60px;height:60px;border-radius:12px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;transition:background .12s ease,border-color .12s ease}
.licon img{width:40px;height:40px;object-fit:contain}
.licon:hover{background:var(--surface)}
.licon.on{background:var(--surface);border-color:var(--accent)}
@media(max-width:600px){.licons-in{padding:10px 12px 2px;gap:6px}.licon{width:50px;height:50px}.licon img{width:34px;height:34px}}

/* ------------------------------------------------------------ home page */
.hm{max-width:1280px;margin:0 auto;padding:18px 16px 40px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.hm-main{min-width:0}
.hm-side{min-width:0;position:sticky;top:76px}
.hs{background:var(--surface);border-radius:16px;padding:18px 18px 16px;margin:0 0 20px}
.hs-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.hs-h{display:flex;align-items:center;gap:12px;color:var(--text);font-size:1.32rem;font-weight:600;line-height:1.25;min-width:0}
.hs-lg{flex:0 0 40px;width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.hs-lg img{width:36px;height:36px;object-fit:contain}
.hs-all{flex:0 0 auto;color:var(--accent-hi);font-size:.88rem;font-weight:600;white-space:nowrap;padding:6px 2px}
.hs-all:hover{color:var(--text)}
.hs-card{background:var(--row);border-radius:12px;overflow:hidden}
.hs-day{padding:9px 18px 7px;color:var(--muted);font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px dashed var(--dash)}
.hs-day.is-live{color:var(--live)}
.hs-more{display:inline-block;margin:12px 4px 0;color:var(--accent-hi);font-weight:600;font-size:.92rem}
.hs-more:hover{color:var(--text)}
.hs-also{color:var(--muted);font-size:.92rem;margin:4px 4px 8px}
.hs-also a{color:var(--accent-hi);font-weight:600}

/* One row: away · time · home · button. */
.hr{display:grid;grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 16px 14px 18px;border-top:1px dashed var(--dash);color:var(--text);transition:background .12s ease}
.hs-card > .hr:first-child,.hs-day + .hr{border-top:0}
.hr:hover{background:var(--surface2)}
.hr:focus-visible{outline:2px solid var(--accent-hi);outline-offset:-2px}
.hr-team{display:flex;align-items:center;gap:10px;min-width:0}
.hr-away{justify-content:flex-end;text-align:right}
.hr-home{justify-content:flex-start}
.hr-nm{font-weight:600;font-size:1.05rem;line-height:1.3;overflow-wrap:anywhere}
.hr-team img{flex:0 0 28px;width:28px;height:28px;object-fit:contain}
.hr-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.hr-ko{color:var(--muted);font-size:.86rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.hr-score{color:var(--text);font-weight:700;font-size:.95rem;font-variant-numeric:tabular-nums}
.hr-live{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;background:rgba(var(--live-rgb),.14);color:var(--live);font-size:.72rem;font-weight:800;letter-spacing:.1em;white-space:nowrap}
.hr-live .pulse{width:7px;height:7px;border-radius:50%;background:var(--live);animation:hrpulse 1.4s ease-in-out infinite}
@keyframes hrpulse{50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.hr-live .pulse{animation:none}}
.hr-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:6px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:.95rem;white-space:nowrap;transition:background .12s ease}
.hr:hover .hr-btn,.hr:focus-visible .hr-btn{background:var(--accent-hover)}
/* Plain rows (fights, races, shows): mark · name – time / countdown · button. */
.hr-p{grid-template-columns:auto minmax(0,1fr) auto}
.hr-ic img{width:28px;height:28px;object-fit:contain}
.hr-ev{display:flex;flex-direction:column;gap:3px;min-width:0}
.hr-evt{font-weight:600;font-size:1.02rem;line-height:1.35;overflow-wrap:anywhere}
.hr-evt .hr-ko{color:var(--text2);font-size:inherit;font-weight:600}
.hr-dash{color:var(--muted)}
.hr-cd{color:var(--muted);font-size:.86rem}
.hr-p.is-live .hr-cd{color:var(--live)}

/* Blog sidebar: photo cards. */
.bside{background:var(--surface);border-radius:16px;padding:16px}
.bside-h{font-size:1.05rem;font-weight:600;margin:4px 6px 14px}
.bside-h a:hover{color:var(--accent-hi)}
.bside-c{display:block;background:var(--surface2);border-radius:10px;overflow:hidden;margin:0 0 14px;transition:transform .12s ease}
.bside-c img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--row)}
.bside-t{display:block;padding:12px 14px 14px;font-weight:600;font-size:1.02rem;line-height:1.35;color:var(--text)}
.bside-c:hover .bside-t{color:var(--accent-hi)}
.bside-c:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px}
.bside-all{display:inline-block;margin:0 6px 4px;color:var(--accent-hi);font-weight:600;font-size:.92rem}

/* Home copy and FAQ under the schedule. */
.hm-text{border-top:0;margin-top:26px;padding-top:0}
.hm-text h1{color:var(--text);font-size:1.6rem;font-weight:800;line-height:1.25;margin:0 0 16px}
.faq{display:flex;flex-direction:column;gap:8px;max-width:900px}
.faq details{background:var(--surface);border-radius:10px;padding:0 16px}
.faq summary{cursor:pointer;padding:13px 0;font-weight:600;color:var(--text);list-style-position:inside}
.faq summary:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px}
.faq details p{padding:0 0 14px;margin:0}

@media(max-width:1000px){
  .hm{grid-template-columns:minmax(0,1fr);padding:14px 12px 32px;gap:8px}
  .hm-side{position:static}
}
/* Phone: each team on its own line with the time on the right, the button
   full width under them. */
@media(max-width:600px){
  .hs{padding:14px 10px 12px;border-radius:12px}
  .hs-h{font-size:1.08rem;gap:9px}
  .hs-lg{flex-basis:32px;width:32px;height:32px}
  .hs-lg img{width:30px;height:30px}
  .hr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"away mid" "home mid" "btn btn";gap:8px 12px;padding:12px}
  .hr-away{grid-area:away;justify-content:flex-end;text-align:left;flex-direction:row-reverse}
  .hr-home{grid-area:home}
  .hr-mid{grid-area:mid;align-items:flex-end;text-align:right}
  .hr-btn{grid-area:btn;width:100%}
  .hr-nm{font-size:.98rem}
  .hr-p{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic ev" "btn btn"}
  .hr-ic{grid-area:ic}
  .hr-ev{grid-area:ev}
  .hr-evt{font-size:.98rem}
  .hm-text h1{font-size:1.3rem}
}

/* ---------------------------------------------------------- sport pages */
.sp-h1{color:var(--text);font-size:1.6rem;font-weight:800;line-height:1.25;margin:0 0 10px}
.sp-lead{color:var(--text2);max-width:900px;margin:0 0 20px}
@media(max-width:480px){.sp-h1{font-size:1.25rem}}

/* =============================================================================
   BOARD RULES. Every colour below resolves through the tokens
   in :root.
   ============================================================================= */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------------------------------------------------------------- layout */
.wrap{max-width:1200px;margin:0 auto;padding:26px 18px 60px}
.ttl{font-size:1.55rem;font-weight:800;color:var(--text);text-align:center;padding-bottom:16px;border-bottom:1px solid var(--border);margin-bottom:20px}
.ttl.accent{color:var(--accent);text-align:left}
.lead{color:var(--muted);text-align:center;max-width:760px;margin:0 auto 14px;font-size:1rem}
.lead strong{color:var(--text)}
.live-inline{color:var(--live);font-weight:700;white-space:nowrap}
.empty{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:22px;color:var(--muted);text-align:center}
.empty strong{color:var(--text)}

/* ------------------------------------------------------------- day picker
   THREE DAYS — yesterday, today, tomorrow — and that is the whole site
   (owner, 2026-09-07). The seven-chip strip this replaces is gone, along with
   its .days/.day rules; nothing else in this file or in index.php refers to
   them any more. A real <select> inside a real <form method="get">: it works
   with JavaScript off (the Go button submits ?date=), and with JS the button
   hides and picking a day navigates on change. */
.daypick{display:flex;align-items:center;gap:8px;margin:0 0 16px;flex-wrap:wrap}
.daypick-l{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.daypick-s{appearance:none;-webkit-appearance:none;min-height:40px;min-width:190px;
  padding:0 34px 0 14px;border-radius:9px;border:1px solid var(--border);
  background-color:var(--surface2);color:var(--text);font:inherit;font-weight:700;font-size:.92rem;
  cursor:pointer;line-height:1.2;
  /* the chevron, drawn in CSS so no extra hex and no image request */
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 18px) 17px,calc(100% - 13px) 17px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.daypick-s:hover{border-color:var(--accent)}
.daypick-go{min-height:40px;padding:0 16px;border-radius:9px;border:1px solid var(--accent);
  background:var(--accent);color:var(--bg);font:inherit;font-weight:800;font-size:.88rem;cursor:pointer}
.daypick-go:hover{background:var(--text);border-color:var(--text)}
.daypick.js .daypick-go{display:none}

.board-bar{display:flex;align-items:baseline;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;margin:0 0 16px}
.board-day{font-weight:800;color:var(--text);font-size:1.05rem}
.board-n{color:var(--muted);font-size:.84rem;font-weight:600}

/* ------------------------------------------------------- league groups */
.board{display:flex;flex-direction:column;gap:24px}
.lg-h{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:1rem;font-weight:800;color:var(--text);line-height:1.25;min-width:0}
.lg-ic{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:var(--tile);display:flex;align-items:center;justify-content:center;overflow:hidden}
.lg-ic img{max-width:22px;max-height:22px;object-fit:contain;display:block}
.lg-name{min-width:0;overflow-wrap:anywhere}
.lg-c{color:var(--muted);font-weight:600;font-size:.82rem;white-space:nowrap}
.lg-c::before{content:"\00b7";margin-right:8px}
.lg-live{display:inline-flex;align-items:center;gap:6px;color:var(--live);font-size:.8rem;font-weight:700;white-space:nowrap}   /* 5.66:1 on the page ground */
.lg-n{margin-left:auto;color:var(--muted);font-weight:600;font-size:.78rem;white-space:nowrap}
.lg-rows{display:flex;flex-direction:column;gap:10px}

/* --------------------------------------------------- rows: one card, two grids */
.ev{display:grid;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--border);border-radius:10px;padding:12px 16px;
  transition:background .12s ease,transform .12s ease,border-color .12s ease}
.ev:hover{background:var(--surface2);transform:translateY(-1px);border-left-color:var(--accent)}
.ev-match{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto}
.ev-plain{grid-template-columns:auto minmax(0,1fr) auto auto}
.ev-side{display:flex;align-items:center;gap:10px;min-width:0}
.ev-home{justify-content:flex-end;text-align:right}
.ev-crest,.ev-ic{flex:0 0 auto;width:40px;height:40px;border-radius:9px;background:var(--tile);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ev-crest img{max-width:32px;max-height:32px;object-fit:contain;display:block}
.ev-ic img{max-width:28px;max-height:28px;object-fit:contain;display:block}
.ev-nm{min-width:0;font-weight:700;color:var(--text);font-size:.98rem;line-height:1.25;overflow-wrap:anywhere}
.ev-nm b{font-weight:inherit}
.ev-nm .nm-s{display:none}
.ev-rec{display:block;color:var(--muted);font-size:.74rem;font-weight:600}
.ev-t{min-width:0;font-weight:700;color:var(--text);font-size:.98rem;line-height:1.3;overflow-wrap:anywhere}
.ev-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:88px;text-align:center}
.ko{font-weight:800;color:var(--text);font-size:.95rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.ev-vs{color:var(--muted);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.score{display:inline-flex;align-items:center;gap:6px;font-weight:900;font-size:1.2rem;color:var(--text);font-variant-numeric:tabular-nums;line-height:1}
.score i{font-style:normal;color:var(--muted);font-size:.9rem}
.clock{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;color:var(--muted);white-space:nowrap}
/* LIVE is never signalled by the edge alone (see the header note): the red left
   rule, the red clock text (5.22:1 on the card) and the pulsing dot all say it. */
.is-live{border-left-color:var(--live)}
.is-live .clock{color:var(--live)}
.is-post .score{color:var(--muted)}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--live);display:inline-block;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(var(--live-rgb),.6);animation:cs-pulse 1.6s ease-out infinite}
@keyframes cs-pulse{0%{box-shadow:0 0 0 0 rgba(var(--live-rgb),.6)}70%{box-shadow:0 0 0 7px rgba(var(--live-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--live-rgb),0)}}
.ev-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--surface2);color:var(--muted);font-size:.76rem;font-weight:800;white-space:nowrap}
/* ONE live chip for the board and the event page (event.php adds only layout).
   Dark text on the red, 5.66:1 — white on --live is 3.27:1 and misses AA. */
.ev-chip.live{background:var(--live);color:var(--bg)}
.ev-w{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;background:rgba(var(--accent-rgb),.14);color:var(--accent);font-weight:800;font-size:.82rem;white-space:nowrap;transition:background .12s ease,color .12s ease}
.ev-w i{font-style:normal}
.ev:hover .ev-w{background:var(--accent);color:var(--bg)}
/* A ROW WE KNOW HAS NO FEED still belongs on the board — a schedule lists the
   fixture whether or not anyone is carrying it, and its page still has the score,
   the ground and the form. What it must not do is promise a stream: an amber
   "Watch →" over a match no channel has picked up is the one dishonest thing the
   board was doing. Quiet pill, and it says "Details", so the word and the colour
   both change (never state by colour alone — the header rule). Suppression only
   happens when the variant cache is demonstrably warm; see cs_feed_counts(). */
.ev-w.ev-w-q{background:transparent;color:var(--muted);border:1px solid var(--border)}
.ev:hover .ev-w.ev-w-q{background:var(--surface2);color:var(--text);border-color:var(--border)}

/* ------------------------------------------------------------ headliners
   The strip of the day's biggest events, above the league blocks. It IS a .lg
   section — same header rules, same .lg-rows, same .ev cards — so everything
   here is the difference and nothing else: a panel around it and an amber
   heading. No new colour: --surface, --border and --accent are the tokens the
   rest of the sheet already uses, and the rows drop to --bg so they still read
   as cards inside the panel instead of surface-on-surface (text on --bg is
   16.34:1, better than the 15.07:1 they had on --surface).

   THE HOVER RULE IS NOT OPTIONAL. `.headliners .ev` and `.ev:hover` have the
   same specificity, and this block sits after the row rules, so without the
   second line below a headline row would lose its hover state entirely — the
   one thing on a board of links that must not go quiet. */
.headliners{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.headliners .lg-name{color:var(--accent)}
.headliners .ev{background:var(--bg)}
.headliners .ev:hover{background:var(--surface2)}

/* ----------------------------------------------------------- more events
   The youth / reserve fixtures, folded away at the foot of the board (owner,
   2026-09-08: they kicked off earliest, so they sat above everything worth
   watching). A real <details>, so it opens with no JavaScript at all; the
   search script only reaches in to open it on a match.

   NO NEW COLOUR AND NO NEW SHAPE: the panel is the .headliners panel's rules
   (--surface, --border, 12px) and the rows drop to --bg inside it for the same
   reason they do there — surface-on-surface reads as one slab, and text on --bg
   is 16.34:1 against 15.07:1. THE HOVER RULE IS NOT OPTIONAL for the same
   reason it is not optional there: `.more-b .ev` and `.ev:hover` and this block
   sits after the row rules, so without it a demoted row would lose its hover.

   NO MARKER, NO CURSOR, NO HOVER COLOUR (owner, 2026-09-08: "no need to hide it
   just list more event and thats all"). This was a <details> with a rotating
   caret; it is now a plain <section> and .more-s is a heading rather than a
   control. Everything that advertised it as clickable is gone with it — a caret
   over something that does not open is worse than no caret. The disclosure's
   list-style/::-webkit-details-marker suppressors went too: there is no
   <summary> left for a browser to draw a triangle on. */
.more{background:var(--surface);border:1px solid var(--border);border-radius:12px}
.more-s{display:flex;align-items:center;gap:10px;
  padding:14px 16px;font-size:1rem;font-weight:800;color:var(--text);line-height:1.25}
.more-t{min-width:0;overflow-wrap:anywhere}
.more-n{margin-left:auto;color:var(--muted);font-weight:600;font-size:.78rem;white-space:nowrap}
.more-b{display:flex;flex-direction:column;gap:20px;padding:0 16px 16px}
/* .more-w removed 2026-09-08 with the paragraph it styled — the owner cut the
   explanatory line under "More events". No element carries this class now. */
.more-b .ev{background:var(--bg)}
.more-b .ev:hover{background:var(--surface2)}

/* ------------------------------------------------------------------ seo */
.seo{margin-top:34px;padding-top:26px;border-top:1px solid var(--border)}
.seo h2{color:var(--text);font-size:1.3rem;font-weight:800;margin:22px 0 10px}
.seo h2:first-child{margin-top:0}
.seo h3{color:var(--text);font-size:1.02rem;font-weight:800;margin:16px 0 6px}
.seo p{color:var(--muted);margin-bottom:12px;max-width:920px}
.seo ul,.seo ol{color:var(--muted);margin:0 0 14px;padding-left:24px;max-width:900px}
.seo li{margin-bottom:6px}
.seo strong{color:var(--text)}
.seo a{color:var(--accent);font-weight:600}
.seo a:hover{text-decoration:underline}



/* ---- search overlay ---------------------------------------------------- */
.smodal{display:none;position:fixed;inset:0;z-index:9999;padding:24px 16px;
  background:rgba(0,0,0,.72);backdrop-filter:blur(2px)}
.smodal.on{display:flex;align-items:flex-start;justify-content:center}
.smodal-box{width:100%;max-width:620px;max-height:88vh;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.smodal-head{display:flex;align-items:flex-start;gap:12px;padding:18px 18px 12px}
.smodal-t{font-size:1.15rem;font-weight:800;color:var(--text)}
.smodal-s{font-size:.8rem;color:var(--muted);margin-top:2px}
.smodal-x{margin-left:auto;background:none;border:0;color:var(--muted);font-size:1.6rem;
  line-height:1;cursor:pointer;font-family:inherit;padding:0 2px}
.smodal-x:hover{color:var(--text)}
.smodal-in{margin:0 18px;height:44px;border-radius:10px;border:1px solid var(--accent);
  background:var(--bg);color:var(--text);padding:0 14px;font-size:1rem;outline:none;font-family:inherit}
.smodal-in::placeholder{color:var(--muted)}
.smodal-note{padding:10px 18px 0;color:var(--muted);font-size:.85rem}
/* The list scrolls, the box does not — so the input stays put while results move. */
.smodal-list{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 18px 18px;
  display:flex;flex-direction:column;gap:8px}
.sr{display:flex;align-items:center;gap:12px;padding:8px;border-radius:10px;
  text-decoration:none;color:var(--text);border:1px solid transparent}
.sr:hover{background:var(--surface2);border-color:var(--border)}
.sr-th{position:relative;flex:0 0 auto;width:104px;height:60px;border-radius:8px;overflow:hidden;
  background:var(--bg);display:flex;align-items:center;justify-content:center}
.sr-th img{width:100%;height:100%;object-fit:cover;display:block}
.sr-when{position:absolute;left:6px;top:6px;padding:2px 7px;border-radius:6px;
  background:rgba(0,0,0,.72);color:#fff;font-size:.7rem;font-weight:700;white-space:nowrap}
.sr-when.on{background:var(--live,#e0263c)}
.sr-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.sr-t{font-weight:700;font-size:.95rem;overflow-wrap:anywhere}
.sr-g{font-size:.8rem;color:var(--muted)}
@media(max-width:520px){
.smodal{padding:12px 10px}
.sr-th{width:78px;height:46px}
.sr-t{font-size:.88rem}
}
.is-search-hidden{display:none !important}
.search-empty{display:none;padding:16px 18px;margin-top:10px;color:var(--muted);text-align:center;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;font-size:.92rem}
.search-empty.on{display:block}


@media(max-width:600px){
  .ttl{font-size:1.3rem}

  /* 375px budget: 347 inside .wrap, minus row padding, three 6px gaps, the
     30px chevron and a FIXED 84px middle leaves ~97px per side — 63px of name
     beside a 28px crest. The middle is fixed, not auto with a minimum: a
     kick-off cell measured 54px and a live cell ("In Progress" + pulse) 80px,
     so crests jogged 13px between one row and the next inside a group. Names
     longer than that box are handled server-side (index.php's phone label
     swaps a long single word for the abbr); hyphens:auto is the backstop. */
  .ev{padding:10px;gap:6px}
  .ev-side{gap:6px}
  .ev-crest,.ev-ic{width:28px;height:28px;border-radius:7px}
  .ev-crest img{max-width:22px;max-height:22px}
  .ev-ic img{max-width:20px;max-height:20px}
  .ev-nm{font-size:.82rem;hyphens:auto;-webkit-hyphens:auto}
  .ev-nm .nm-l{display:none}.ev-nm .nm-s{display:inline}.ev-nm.no-short .nm-l{display:inline}
  .ev-rec{display:none}
  .ev-t{font-size:.9rem}
  .ev-mid{width:84px;min-width:84px}
  .ko{font-size:.84rem}
  .score{font-size:1.02rem}
  /* SCOPED TO A BOARD ROW. This collapse exists for the board's dense 71px rows,
     where 84px of "Watch →" beside a crest, a name and a score does not fit at
     375px. event.php reuses .ev-w inside its 77px feed rows, which have a whole
     column to themselves — and it was inheriting this, so every row on a match
     page showed a bare 30px arrow with the word hidden. `.ev .ev-w`, not `.ev-w`.
     (The event page's rows also carry an aria-label naming the channel and the
     destination, which is what the hidden word cost a screen reader.) */
  .ev .ev-w{padding:0;width:30px;height:30px;justify-content:center;border-radius:50%}
  .ev .ev-w span{display:none}
  .lg-n{display:none}
  .lg-h{font-size:.94rem}
  .board-day{font-size:.98rem}
  /* 44px tap targets for the day picker; Go is the only way to change day
     with scripting off. */
  .daypick-s{flex:1 1 auto;min-width:0;min-height:44px}
  .daypick-go{min-height:44px}
}


/* ------------------------------------------------------ buffstreams.ch
   The board on the dark page: .wrap is transparent, rows are --surface. */
.wrap{background:transparent}
.lg-ic,.ev-crest,.ev-ic{border:1px solid var(--border)}
.headliners .ev,.more-b .ev{background:var(--row)}
.headliners .ev:hover,.more-b .ev:hover{background:var(--surface2)}
/* The board's Watch button in the home rows' solid teal. */
.ev-w{background:var(--accent);color:var(--on-accent);font-weight:700}
.ev:hover .ev-w{background:var(--accent-hover);color:var(--on-accent)}

/* Long copy under the schedule and the boards. */
.seo{margin-top:30px;padding-top:24px;border-top:1px solid var(--border)}
.seo h2{color:var(--text);font-size:1.25rem;font-weight:700;margin:26px 0 10px}
.seo h2:first-child{margin-top:0}
.seo h3{color:var(--text);font-size:1.02rem;font-weight:700;margin:18px 0 6px}
.seo p,.seo li{color:var(--text2);max-width:900px}
.seo p{margin-bottom:12px}
.seo strong{color:var(--text)}
.seo a{color:var(--accent-hi);font-weight:600}

/* ------------------------------------------------------------- footer */
.mft{background:var(--surface);border-top:1px solid var(--border);margin-top:30px}
.mft-in{max-width:1280px;margin:0 auto;padding:24px 16px 28px;text-align:center}
.mft-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 18px}
.mft-links a{display:inline-flex;align-items:center;min-height:36px;color:var(--text2);font-size:.86rem}
.mft-links a:hover{color:var(--text)}
.mft-legal{margin-top:6px}
.mft-legal a{color:var(--muted)}
.mft-note{color:var(--muted);font-size:.78rem;max-width:640px;margin:12px auto 0}
@media(max-width:600px){.mft-links a{min-height:44px}}

/* ------------------------------------------------------- static pages */
.pg{max-width:820px;margin:0 auto;padding:30px 16px 40px}
.pg h1{color:var(--text);font-size:1.7rem;font-weight:800;line-height:1.25;padding-bottom:9px;border-bottom:1px solid var(--border);margin:0 0 14px}
.pg .pg-lead{color:var(--text);font-size:1.05rem;margin:0 0 22px}
.pg h2{color:var(--text);font-size:1.2rem;font-weight:700;margin:26px 0 8px}
.pg p,.pg li{color:var(--text2)}
.pg p{margin:0 0 14px}
.pg ul{margin:0 0 14px;padding-left:22px}
.pg li{margin-bottom:6px}
.pg a{color:var(--accent-hi);text-decoration:underline;text-underline-offset:2px}
.pg-form{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:20px;margin-top:8px}
.pg-row{margin-bottom:14px}
.pg-row label{display:block;color:var(--muted);font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px}
.pg-row input,.pg-row textarea{width:100%;padding:10px 12px;background:var(--row);border:1px solid var(--border);border-radius:6px;color:var(--text);font:inherit;font-size:.95rem}
.pg-row input:focus,.pg-row textarea:focus{outline:2px solid var(--accent-hi);outline-offset:1px;border-color:var(--accent-hi)}
.pg-row textarea{min-height:140px;resize:vertical}
.pg-hint{color:var(--muted);font-size:.78rem;margin-top:4px}
.pg-btn{display:inline-block;padding:10px 20px;border-radius:6px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);font:inherit;font-weight:700;cursor:pointer}
.pg-btn:disabled{opacity:.5;cursor:not-allowed}
.pg-status{margin-left:12px;font-size:.9rem;font-weight:600;color:var(--text2)}
.pg-status.ok{color:var(--good)}
.pg-status.err{color:var(--live)}
.pg-nf{text-align:center;padding:60px 16px}
.pg-nf h1{border:0;padding:0}
.pg-nf a.b{display:inline-block;margin-top:8px;padding:10px 18px;border-radius:6px;background:var(--accent);color:var(--on-accent);font-weight:700;text-decoration:none}

/* Phone match rows: crest above the name up to 420px, so long names keep
   the whole side. */
@media(max-width:420px){
  .headliners{padding:12px 8px}
  .ev-match .ev-side{flex-direction:column;justify-content:center;gap:4px;text-align:center}
  .ev-match .ev-home{flex-direction:column-reverse}
}
/* The boxing mark is drawn in black; on the dark rows it is shown inverted. Section anchors (#s-nfl ...) land below the sticky bar. */
.hr-ic img[src*="/logos/boxing.svg"],.hr-team img[src*="/logos/boxing.svg"]{filter:invert(1)}
.hs{scroll-margin-top:120px}