/* Eurohockey Watch — forecast pages (hub hero, /liiga table, /liiga/playoffs
   bracket). Moved out of index.html's inline <style>. */
  /* SEASON FORECAST HEAD — title + league switcher pulled out of .wrap,
   flush to the true left edge instead of sitting in the centered
   column, tabs stretched to fill the full row edge to edge. */
/* #forecast's own top/bottom section padding (site.css .section) has no
   background of its own, so it was showing the body's off-white marble
   tone through as a band above the title -- the section itself needs
   the brand white, not just .forecast-head inside it. */
#forecast{background:var(--white)}
/* Footer: brand white (was showing the body's off-white marble tone
   through, same issue #forecast had), divided from the section above it
   with the same hairline used between the other stacked sections. */
#site-footer{background:var(--white);border-top:1px solid var(--blue-hair)}
.forecast-head{
  width:100%;
  padding:0 clamp(96px,24vw,384px);
}
.forecast-head .sectiontitle{margin:0}
/* Small secondary label above the big display title -- same pattern as
   the hero's byline-over-EUROHOCKEY WATCH -- reads "2026-2027" then, bigger and
   in the display face, "Season Forecast" underneath. */
.forecast-title-year{
  font-family:var(--font-ui);font-style:italic;font-weight:400;
  font-size:18px;color:var(--blue-muted);
  margin:0 0 4px 6px;letter-spacing:0.02em;
}

/* LEAGUE SWITCHER — plain text tabs, underline for active, no pill/box */
.league-switcher{padding:36px 0 0}
.league-tabs{
  display:flex;align-items:center;gap:0;
  width:100%;
  border-bottom:1px solid rgba(2,31,148,0.16);
}
.league-tab{
  font-family:var(--font-ui);
  font-size:13px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--blue-muted);
  background:none;border:none;
  flex:1 1 0;
  padding:14px 18px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  cursor:pointer;
  position:relative;
  transition:color .15s ease;
}
.league-tab img{
  height:18px;width:auto;max-width:34px;object-fit:contain;display:block;
}
.league-tab::after{
  content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:2px;
  background:var(--blue);opacity:0;transition:opacity .15s ease;
}
.league-tab.active{color:var(--blue)}
.league-tab.active::after{opacity:1}
.league-tab:not(.active):not(:disabled):hover{color:var(--blue)}
.league-tab:disabled{cursor:default;opacity:0.55}
.league-tab .soon{
  font-size:9px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--blue-muted);
  opacity:0.8;
}

/* FAN VOTE — grid pulled out of .wrap, full-bleed edge to edge, all 16
   teams forced into a single row (site.css's default auto-fill grid
   wraps to 3 rows at this width, which is what we're overriding). Below
   900px there isn't room for 16 equal columns without squashing the
   logos unreadably, so it becomes a horizontally-scrollable single row
   instead of wrapping -- still one row, just a scrollable one. */
.fanvote-full{width:100%;padding:0 clamp(20px,3.5vw,48px)}
.fanvote-full .fanvote-grid{
  grid-template-columns:repeat(16,minmax(0,1fr));
  gap:8px;
  margin-top:28px;
}
.fanvote-full .fanvote-btn{padding:16px 4px;font-size:11px}
.fanvote-full .fanvote-btn img{height:28px;width:28px}
@media (max-width:900px){
  .fanvote-full .fanvote-grid{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:96px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
  }
}

/* Section note — plain italic line instead of a badge/pill */
.note{
  font-family:var(--font-body);
  font-size:13px;font-style:italic;color:var(--blue-muted);
  margin-top:28px;
}

/* SEASON FORECAST — Regular Season, then Playoffs stacked directly
   underneath it (full-bleed boxes, edge to edge, outside .wrap). The
   bracket content is centered rather than left-aligned, since with the
   full row width available now there's no reason for it to hug one
   side. */
.forecast-grid{
  display:grid;
  grid-template-columns:1fr;
  width:100%;
  border-top:1px solid var(--blue-hair);
  background:var(--white);
}
.forecast-box{padding:40px clamp(96px,24vw,384px) 48px}
.forecast-box+.forecast-box{border-left:none;border-top:1px solid var(--blue-hair)}
.view-panel-title{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(24px,3vw,32px);color:var(--blue);
  margin:0 0 4px;
}
/* .lede is capped at 620px site-wide for comfortable reading-line-length
   on normal body copy; the forecast boxes are much wider than that now
   (tripled side padding etc.), so these two specifically stretch to
   fill the box instead of leaving a big gap next to a narrow column of
   text. */
#standings-panel .lede,
#playoffs-panel .lede{max-width:none}

/* STANDINGS heatmaps — background tint intensity set per-row via inline
   style, each column scaled to its own value (silver=playoffs, gold=cup,
   red=relegation danger). */
.playoffs-pct,.cup-pct,.releg-pct{font-weight:700;color:var(--blue);border-radius:0}
/* Stronger dividers marking the playoff cutoff (after seed 12) and the
   relegation zone (last 3, seeds 15-17, a 17-team league as of 2026-2027
   with Jokerit and Kiekko-Espoo added) -- everything else in the table
   uses a thin hairline, these two are the boundaries that actually
   matter to a reader scanning the standings. */
.standings-table tbody tr:nth-child(13){border-top:1.5px solid rgba(2,31,148,0.4)}
.standings-table tbody tr:nth-child(15){border-top:1.5px solid rgba(2,31,148,0.4)}

/* .table-scroll / .standings-table now live in site.css (shared with
   simulate.html's live table) -- just the bracket below is still
   page-specific. */

/* Quarterfinal re-seeding: deliberately NOT changed. Quarterfinals use
   fixed pairings (each bye seed 1-4 plays its own 1st Round winner),
   matching the documented research in
   modelanddata/simulate_2025_2026_playoffs.py. Semifinals and the Final
   DO re-seed (best remaining seed vs. worst). A later web search turned
   up a conflicting claim (re-seeding after every round), but that
   source couldn't be verified (page load blocked) -- confirmed keeping
   the documented fixed-pairing format rather than acting on an
   unverifiable result. No bracket structure change here.

   BRACKET — left to right: 1st Round first, Final last, matching DOM
   order and the surrounding prose. Whole thing
   is centered as a block (justify-content:center on .bracket, itself
   width:max-content so centering has something to act on) now that the
   playoffs box spans the full page width. Each round is a column
   (.bracket-round-row) of boxed matchups; short horizontal connector
   stubs link each column to the next. Round-to-round matchup counts
   don't halve evenly (WC and QF are both 4, only QF->SF and SF->Final
   halve), so these are short meeting-in-the-middle stubs, not a
   pixel-exact computed merge tree (that needs JS to measure box
   positions; not worth it here). Horizontal-scrolls on narrow screens
   rather than wrapping -- a bracket that wraps mid-round stops reading
   as a bracket. */
.bracket{
  position:relative;
  font-family:var(--font-body);
  display:flex;gap:32px;
  margin:36px 0 0;
  overflow-x:auto;padding-bottom:8px;
  width:100%;
}
/* Vertical merge connectors -- where two matchups in one round feed a
   single matchup in the next (QF->SF, SF->Final; WC->QF is a straight
   1:1 line and doesn't need one). Positioned by JS (see below) since
   the exact vertical center of each box depends on flex distribution
   (space-around etc), not something fixed/computable in pure CSS. */
.bracket-connector-v{
  position:absolute;width:1px;background:var(--blue-hair);
  pointer-events:none;
}
.bracket-round{display:flex;flex-direction:column;gap:10px;min-width:170px;flex:1}
.bracket-round-row{display:flex;flex-direction:column;gap:22px;justify-content:center;flex:1}
.bracket-round:nth-child(2) .bracket-round-row{justify-content:space-around}
.bracket-round:nth-child(3) .bracket-round-row{justify-content:space-around}
.bracket-round:nth-child(4) .bracket-round-row{justify-content:center}
.bracket-label{
  font-family:var(--font-ui);
  font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--blue-muted);text-align:center;
}
.bracket-champion{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:8px 0 10px;
}
.bracket-finals-badge{width:96px;height:auto}
.bracket-champion-logo{width:68px;height:68px;object-fit:contain}
.matchup{
  position:relative;
  border:1px solid var(--blue-hair);
  background:var(--white);
  padding:2px 12px;
}
.bracket-round:not(:last-child) .matchup::after{
  content:"";position:absolute;top:50%;left:100%;width:16px;height:1px;
  background:var(--blue-hair);transform:translateY(-50%);
}
.bracket-round:not(:first-child) .matchup::before{
  content:"";position:absolute;top:50%;right:100%;width:16px;height:1px;
  background:var(--blue-hair);transform:translateY(-50%);
}
.matchup-team{
  display:flex;align-items:center;gap:9px;
  padding:9px 0;
  font-size:14px;color:var(--blue-muted);
}
.matchup-team.winner{color:var(--blue);font-weight:700}
.matchup-team:not(.winner){opacity:0.45}
.matchup-team+.matchup-team{border-top:1px solid rgba(2,31,148,0.09)}
.matchup-team .seed{font-size:11px;color:var(--blue-muted);opacity:0.55;width:14px;flex-shrink:0}
.matchup-team img{height:18px;width:18px;object-fit:contain;flex-shrink:0}
.matchup-score{margin-left:auto;font-size:11px;font-weight:700;color:var(--blue-muted);opacity:1;white-space:nowrap;flex-shrink:0}
.bracket-bronze{
  margin-top:28px;font-size:13.5px;color:var(--blue-muted);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.bracket-bronze strong{color:var(--blue)}
.bracket-bronze img{height:16px;width:16px;object-fit:contain;vertical-align:-3px;margin:0 2px}

/* PLAYOFFS FAQ BUTTON — flat, sharp-edged (no radius), on-brand blue;
   links off to the FAQ's simulation explainer. */
.faq-btn{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:32px;padding:15px 28px;
  background:var(--blue);color:var(--white);
  font-family:var(--font-ui);font-size:13px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  border-radius:0;
  transition:background-color .15s ease;
}
.faq-btn:hover{background-color:var(--blue)}
.faq-btn svg{flex-shrink:0;transition:transform .15s ease}
.faq-btn:hover svg{transform:translateX(3px)}

@media (max-width:640px){
  .league-tab{padding:12px 12px;font-size:13px}
  .bracket{gap:16px}
  /* 120px wasn't enough room for logo+name+score together at this font
     size -- the score badge ("4-3") was wrapping onto two lines instead
     of sitting on one. 144px plus the nowrap/flex-shrink:0 fix on
     .matchup-score (see base rule) fixed that, but boxes still read as
     cramped -- widened again to 220px. Width only: vertical
     padding/font-size stay at their original values below, this is
     purely extra horizontal room (box + inner padding), not taller
     rows. Column still scrolls horizontally same as before. */
  .bracket-round{min-width:220px}
  .matchup-team{font-size:12.5px;gap:6px;padding:8px 0}
  .matchup{padding:2px 20px}
  .bracket-round:not(:last-child) .matchup::after{width:8px}
  .bracket-round:not(:first-child) .matchup::before{width:8px}
}

/* HERO — solid brand-blue field, EH mark + mission text block, both
   pinned to the left edge. Brand guidelines call for flat color fields
   only (no photography or illustration), so this replaces the old
   marble/statue parallax hero. */
body{background:var(--marble,#efece8)}
.hero{
  position:relative;width:100%;min-height:100svh;
  background:var(--blue);
}
/* Group sits lower than dead-center but short of the bottom-third
   midpoint (83.33%) -- absolute positioning (vs. flex justify-content)
   is what lets the block's center, not its top, land exactly on that
   mark regardless of how tall the mission text wraps to. */
.hero-content{
  position:absolute;left:0;
  top:70%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-start;
  gap:28px;
  padding:0 24px 0 clamp(24px,6vw,96px);
}
.hero-mark{width:min(18vw,110px);height:auto}
.hero-mission{
  font-family:var(--font-ui);
  font-size:clamp(16px,1.8vw,20px);
  line-height:1.55;
  color:var(--white-muted);
  max-width:640px;
}

@media (max-width:700px), (max-height:500px){
  .hero-content{padding:0 20px 0 24px;gap:20px}
  .hero-mark{width:min(30vw,120px)}
  .hero-mission{font-size:15px;max-width:420px}

  /* Below-hero content: .forecast-head / .forecast-box inherit a desktop
     clamp() that never drops under 96px of side padding -- on a narrow
     phone that alone was eating over half the viewport and pushing the
     league tabs into page-wide horizontal scroll. Mobile gets real
     (small, viewport-relative) side padding instead, and the tab row
     scrolls within itself rather than blowing out the page. */
  .forecast-head{padding:0 20px}
  /* min-width:0 overrides the grid item's default min-content sizing --
     without it, the wide standings table/bracket inside was forcing this
     box (and the whole page) wider than the viewport instead of letting
     .table-scroll/.bracket's own overflow-x:auto contain the scroll. */
  .forecast-box{padding:32px 16px 40px;min-width:0}
  /* All 5 leagues fit one row on a phone instead of needing a side-
     scroll -- flex:1 1 0 (like desktop) splits the row evenly, min-
     width:0 lets each tab actually shrink below its content's natural
     size, and padding/font/logo are all cut down to make that fit.
     overflow-x:auto stays as a safety net for the very narrowest
     screens rather than the primary way to see every tab. */
  .league-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .league-tab{
    flex:1 1 0;min-width:0;
    padding:6px 0;font-size:7.5px;gap:1.5px;white-space:nowrap;
  }
  .league-tab img{height:10px;width:auto;max-width:11px}
  /* "Soon" label dropped on mobile -- the dimmed/disabled tab styling
     already reads as unavailable, and losing the word is what finally
     gets all 5 tabs to fit one row without a scroll. */
  .league-tab .soon{display:none}

  /* CONTENT copy, one step smaller so Regular Season / Playoffs fit the
     phone with less horizontal scrolling. Titles (.sectiontitle,
     .view-panel-title) are deliberately NOT touched here -- hierarchy
     stays intact, only the body/data text under them shrinks. */
  .lede{font-size:13px}
  .note{font-size:12px}
  /* Standings table shrunk enough to fit the full 5-column table on a
     phone with NO horizontal scroll needed (unlike the bracket below,
     which is fine to scroll -- a table cropped mid-row is much harder to
     read than one that just scrolls). */
  .standings-table th{font-size:7px;padding:0 1px 6px}
  .standings-table td{font-size:8.5px;padding:5px 1px}
  .standings-table th:first-child,.standings-table td:first-child{width:10px}
  .standings-table th:not(:first-child):not(:nth-child(2)),
  .standings-table td:not(:first-child):not(:nth-child(2)){width:64px}
  /* Overrides site.css's desktop-sized 180px for this column -- table-
     layout:fixed (site.css) needs every column's width spelled out, and
     without an override here the desktop figure would force this table
     wider than the phone screen. */
  .standings-table th:nth-child(2),.standings-table td:nth-child(2){width:70px}
  .standings-table .tm{gap:2px}
  .standings-table .tm img{height:10px;width:10px}
  /* Bracket/playoffs stays at its normal (non-shrunk) size -- it's
     already built to scroll horizontally (.bracket has overflow-x:auto
     site-wide), so the fix here is keeping it readable and letting the
     scroll do the work, not cramming it smaller. */

  /* FAQ button: long label ("About Eurohockey Watch and Methodology") shrunk
     and de-spaced enough to stay on a single row instead of wrapping. */
  .faq-btn{font-size:10px;letter-spacing:0.05em;padding:12px 16px;gap:8px}
  .faq-btn svg{width:14px;height:14px}
}