/* Small glue layer: lets the rebuilt Django templates sit inside the original
   ftszen chrome without per-row Drupal classes. Loaded after the legacy CSS. */

/* Brand palette (templates reference these via var(--fts-*)). */
:root { --fts-navy: #101d2d; --fts-ink: #324152; --fts-red: #c91e1e; }

/* ---- Team overview identity block: big logo + stacked facts to the right ---- */
.team-id { display: flex; align-items: center; gap: 20px; margin: 4px 0 20px; flex-wrap: wrap; }
.team-id-logo img { width: 150px; height: 150px; object-fit: contain; border-radius: 10px;
  border: 1px solid #e1e6ec; background: #fff; padding: 4px; }
.team-id-facts { display: flex; flex-direction: column; gap: 5px; }
.team-id-facts .tf { font-size: 15px; line-height: 1.25; }
.team-id-facts .tf.strong { font-weight: 700; color: #324152; font-size: 16px; }
.team-id-facts .tf.mut { color: #8293a8; }
.team-id-facts a { font-size: 14px; }

/* ---- Tournament detail header ---- */
.tourn-head { display: flex; gap: 20px; align-items: flex-start; margin: 4px 0 20px; flex-wrap: wrap; }
.tourn-logo img { width: 130px; height: 130px; object-fit: contain; border-radius: 8px;
  border: 1px solid #e1e6ec; background: #fff; }
.tourn-meta { flex: 1 1 300px; min-width: 260px; }
.tourn-title { font-size: 26px; line-height: 1.12; font-weight: 800; color: #101d2d; margin: 0 0 6px; }
.tourn-loc { font-size: 16px; font-weight: 700; color: #324152; }
.tourn-dates { font-size: 14px; color: #6b7f98; margin-top: 1px; }
.tourn-facts { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.tourn-facts div { margin: 0; }
.tourn-facts dt { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #8293a8; }
.tourn-facts dd { margin: 1px 0 0; font-size: 15px; font-weight: 600; color: #1d2a3a; }

/* Custom instant header tooltip (single floating element, never clipped). */
.rk-tip { position: absolute; z-index: 1000; display: none; background: #101d2d; color: #fff;
  font-size: 11px; font-weight: normal; line-height: 1.35; text-transform: none; letter-spacing: 0;
  padding: 6px 9px; border-radius: 5px; max-width: 240px; box-shadow: 0 4px 14px rgba(0,0,0,.3);
  pointer-events: none; }
.rk-tip::before { content: ""; position: absolute; bottom: 100%; left: var(--ax, 50%); transform: translateX(-50%);
  border: 5px solid transparent; border-bottom-color: #101d2d; }
/* Variant used above its anchor (e.g. the manage-users header): caret on the
   bottom edge, pointing down at the column. (Distinct class -- the bare .up is
   the green rating-diff indicator.) */
.rk-tip.rk-tip-above::before { top: 100%; bottom: auto; border-bottom-color: transparent; border-top-color: #101d2d; }

/* ---- Modern compact header (hard-overrides the legacy ftszen/fresh layout,
   which forced a 147px header, an absolutely-positioned nav, and gray 3-D
   gradient buttons). Two rows: brand + account on top, nav + search below. ---- */
#header { height: auto; min-height: 0; padding: 0; background: #101d2d; border: none; box-shadow: none; }
.header-border { height: auto; border: none; box-shadow: none; }
#header-inner { background: none; position: relative; width: auto; max-width: 960px; margin: 0 auto; padding: 7px 0 8px; }

/* Kill the legacy inset "cast shadow" line + drop shadow under the header. */
#main, #main-inner, #page-inner, #content { box-shadow: none !important; }
.hdr-top { display: flex; align-items: center; gap: 14px; }
.hdr-bottom { display: flex; align-items: center; gap: 12px; margin-top: 5px; }

#logo-title { float: none; position: static; top: auto; height: auto; line-height: 1; padding: 0; margin: 0; flex: 0 0 auto; }
.fts-wordmark { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.fts-wordmark .ft { color: #eef2f6; font-style: italic; font-weight: 800; font-size: 19px; letter-spacing: -0.5px; }
.fts-wordmark .stats { color: #fff; background: #c91e1e; border: 2px solid #fff; border-radius: 5px;
  padding: 0 6px 1px; font-weight: 800; font-size: 15px; letter-spacing: 1px; }

/* Motto inline beside the wordmark, muted and small. */
.headtitle { position: static; left: auto; top: auto; margin: 0; width: auto; flex: 1 1 auto;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; font-weight: normal; font-style: normal; line-height: 1.2; color: #7e8ea3; }
.headtitle a { white-space: nowrap; }
.headtitle a, .headtitle a:link, .headtitle a:visited { color: #7e8ea3; text-decoration: none; }
.headtitle .tagline-smaller { display: block; font-size: 11px; color: #6b7f98; }

/* Account links: top right. */
#user-bar { position: static; width: auto; margin-left: auto; display: flex; align-items: center; gap: 14px;
  white-space: nowrap; flex: 0 0 auto; }
#user-bar form { display: inline-flex; margin: 0; }
#user-bar a, #user-bar button { color: #9fb0c6; font-family: inherit; font-size: 12.5px; font-weight: inherit;
  text-decoration: none; cursor: pointer; white-space: nowrap; background: none; border: none; padding: 0; }
#user-bar a:hover, #user-bar button:hover { color: #fff; }

/* Nav: modern flat pills (bottom-left); strip the legacy button chrome. */
.navigation-bar { position: static; left: auto; flex: 0 0 auto; }
.navigation-bar ul.links, .navigation-bar ul.links li { list-style: none !important; }
.navigation-bar ul.links { background: none !important; background-image: none !important;
  box-shadow: none !important; border: none; border-radius: 0; float: none;
  display: flex; flex-wrap: wrap; gap: 3px; margin: 0; padding: 0; }
.navigation-bar ul.links li { float: none; border: none; margin: 0; padding: 0; }
.navigation-bar ul.links li:hover, .navigation-bar ul.links li:active {
  background: none !important; background-image: none !important; }
.navigation-bar ul.links li a { display: block; padding: 5px 12px; border-radius: 7px; font-size: 13px;
  font-weight: 600; color: #cdd7e3; text-decoration: none; background: rgba(255,255,255,.10);
  transition: background .12s, color .12s; }
.navigation-bar ul.links li a:hover { background: rgba(255,255,255,.20); color: #fff; }
.navigation-bar ul.links li a.active { background: #fff; color: #101d2d; }   /* current page */

/* Search: bottom right. */
.fts-search { margin-left: auto; }
.fts-search input { padding: 4px 9px; border: 1px solid #cdd6e0; border-radius: 6px; font-size: 12px;
  width: 210px; background: #fff; color: #1d2a3a; }
.fts-search input::placeholder { color: #8293a8; }

#content-area { padding: 12px 16px 24px; }
/* 60px of page background (cream) below the white content panel. */
#main { margin-bottom: 60px; }
#content-area h1 { font-size: 24px; color: #101d2d; margin: 4px 0 10px; }
#content-area h2 { font-size: 17px; color: #324152; margin: 14px 0 6px; }
#content-area h3 { font-size: 14px; color: #324152; margin: 0 0 8px; }

/* Site-wide link highlight: links highlight to the FTS red on hover (no
   underline). ID specificity here intentionally beats page-level rules like
   .md-team.win a, so even bolded/winning team links highlight. */
#content-area a:hover, #content-area a:focus { color: var(--fts-red); }

/* Tables rendered with class="fts" -> FTS slate-blue striped look. */
#content-area table.fts { width: 100%; border-collapse: collapse; font-size: 13px;
  background: #fff; border: 1px solid #c9d2db; margin-bottom: 14px; }
#content-area table.fts thead th { background: #324152; color: #fff; text-align: left;
  padding: 6px 9px; font-weight: bold; }
/* Header links sit on the dark slate background, so the site-wide red hover is
   illegible here -> hover to a light amber instead. */
#content-area table.fts thead th a:hover,
#content-area table.fts thead th a:focus { color: #ffd23f; }
#content-area table.fts tbody td { padding: 5px 9px; border-top: 1px solid #e3e7ec; }
#content-area table.fts tbody tr:nth-child(even) { background: #f1f4f7; }
#content-area table.fts tbody tr:hover { background: #fff7cc; }
.text-right { text-align: right; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Manage-users scorecard: a dense table with many columns. Tighten the cell
   padding and cap the email column (full address stays in the title tooltip) so
   it fits without a horizontal scrollbar. */
#content-area table.fts#user-table thead th,
#content-area table.fts#user-table tbody td { padding-left: 6px; padding-right: 6px; }
#content-area table.fts#user-table .email-cell {
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Columns that can't apply to a row's role (e.g. a Basic member never commits
   edits or reviews proposals) are muted -- any imported legacy value still
   shows, just greyed. */
#content-area table.fts#user-table tbody td.na { color: #aeb8c4; }

/* Front-page hero tagline line (content area). */
.fts-hero { font-size: 22px; font-weight: bold; color: #101d2d; margin: 2px 0 14px; }

/* Sidebar cards on the dashboard. */
.fts-box, .fts-card { background: #fff; border: 1px solid #c9d2db; border-radius: 4px;
  padding: 10px 12px; margin-bottom: 14px; display: block; text-decoration: none; }
.fts-card:hover { border-color: #79899c; }
.fts-box h3 { border-bottom: 2px solid #c91e1e; padding-bottom: 4px; }
.fts-row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0;
  border-bottom: 1px solid #eef1f4; }
.up { color: #1a7f37; font-weight: bold; }
.down { color: #c91e1e; font-weight: bold; }

/* ---- Front-page feature widget (mirrors ftsfrontpage) ---- */
.feature-head { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #cfd6dd;
  padding-bottom: 6px; margin-bottom: 14px; }
.feature-head .syschip { background: #101d2d; color: #fff; font-weight: 800; letter-spacing: 1px;
  padding: 8px 16px; border-radius: 4px; font-size: 15px; }
.feature-head .week { font-size: 26px; color: #9aa7b5; font-weight: 300; }
/* Front-page feature controls: system selector + week navigation. */
.feat-controls { justify-content: flex-start; flex-wrap: nowrap; gap: 12px; }
.syschip-select { background: #101d2d; color: #fff; font-weight: 800; letter-spacing: 1px;
  padding: 8px 14px; border-radius: 4px; font-size: 15px; line-height: 1.1; border: none;
  cursor: pointer; flex: 0 0 auto; }
.feat-weeknav { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.feat-weeknav .week { font-size: 22px; }
.feat-arrow { text-decoration: none; color: #5a6c82; font-size: 22px; line-height: 1;
  padding: 2px 9px; border: 1px solid #cfd6dd; border-radius: 4px; background: #fff; }
.feat-arrow:hover { background: #eef1f4; color: #101d2d; }
.feat-arrow.disabled { color: #d3dae1; background: #f4f6f8; pointer-events: none; }
.feat-date { border: 1px solid #d4dbe1; border-radius: 4px; padding: 4px 6px; font: inherit; font-size: 12px; }
.feat-section-title { text-transform: uppercase; letter-spacing: .04em; color: #6b7f98;
  font-weight: bold; font-size: 13px; margin: 18px 0 8px; }
.feat-grid { display: flex; gap: 24px; flex-wrap: wrap; }
.feat-grid > div { flex: 1; min-width: 220px; }
.donut-wrap { display: flex; align-items: center; gap: 16px; }
.donut-c { position: relative; width: 140px; height: 140px; flex: 0 0 140px; }
.donut-c canvas { width: 140px !important; height: 140px !important; }
.donut-c .ctr { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 30px; font-weight: 800; color: #101d2d; }
.donut-played { font-size: 15px; font-weight: bold; }
.donut-upcoming { color: #9aa7b5; font-size: 13px; }

/* Top Rankings numbered list (right column) -- light, no header bar. */
.toprank { }
.toprank .r { display: flex; align-items: center; padding: 5px 6px; border-bottom: 1px solid #eef1f4;
  font-size: 14px; }
.toprank .r:nth-child(even) { background: #f4f6f8; }
.toprank .r .num { width: 26px; color: #6b7f98; text-align: right; margin-right: 10px; }
.toprank .r .nm { flex: 1; }
.toprank .r .rt { font-weight: bold; color: #324152; width: 48px; text-align: right; }
.toprank .r .ch { width: 56px; text-align: right; font-size: 12px; }
.toprank-title { font-size: 20px; color: #101d2d; font-weight: bold; margin: 0 0 8px; }

/* Game ticker (bottom) -- recent results + upcoming, matches fts1. */
.ticker-panel { background: #d4dbe1; border-top: 1px solid #b7c2cd;
  border-bottom: 1px solid #b7c2cd; margin: 18px 0 0; }
.ticker { display: flex; gap: 2px; overflow-x: auto; padding: 20px 3px; }
.gamecell { flex: 0 0 auto; width: 190px; background: #f1f1f1; text-align: center; cursor: pointer;
  display: flex; flex-direction: column;
  box-shadow: inset 0 1px 1px 0 rgba(255,255,255,.9), 0 3px 7px -3px rgba(0,0,0,.4); }
.gamecell:hover { background: #fff; }
.bc-tourn { font-size: 11px; line-height: 1.25; height: 30px; overflow: hidden;
  padding: 6px 8px 0; }
.bc-tourn a { color: #6b7f98; text-decoration: none; }
.bc-tourn a:hover { text-decoration: underline; }
.bc-logos { display: flex; align-items: center; justify-content: space-around; padding: 8px 8px 4px; }
.bc-logo { display: inline-flex; width: 50px; height: 50px; align-items: center;
  justify-content: center; text-decoration: none; }
.bc-logo img { max-width: 50px; max-height: 50px; }
.bc-mono { width: 44px; height: 44px; border-radius: 50%; background: #e2e7ec; color: #9aa7b5;
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; }
.bc-vs { color: #9aa7b5; font-weight: bold; font-size: 13px; }
.bc-teams { display: flex; justify-content: space-around; gap: 6px; padding: 0 8px 6px;
  min-height: 34px; align-items: flex-start; }
.bc-teams a { flex: 1; color: #324152; text-decoration: none; font-size: 13px; line-height: 1.15; }
.bc-teams a:hover { text-decoration: underline; }
.bc-teams a.win { font-weight: bold; color: #101d2d; }
.bc-scores { display: flex; justify-content: space-around; gap: 6px; padding: 4px 8px 10px;
  font-size: 26px; color: #5a6c82; }
.bc-scores span { flex: 1; }
.bc-scores span.win { font-weight: bold; color: #101d2d; }
.gamecell.is-upcoming .bc-scores { font-size: 14px; color: #8293a8; padding-top: 12px; }
.gamecell.is-upcoming .bc-scores small { font-size: 12px; }
.bc-date { color: #fff; padding: 5px; font-size: 14px; margin-top: auto; }
.bc-date.played { background: rgb(253, 198, 137); }
.bc-date.upcoming { background: rgb(144, 179, 217); }

/* Game-detail lightbox (click a ticker card). */
.bp-overlay { position: fixed; inset: 0; background: rgba(20,30,42,.55); z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 60px; overflow:auto; }
.bp-overlay[hidden] { display: none; }
.bp-panel { position: relative; width: 600px; max-width: 100%; background: #fff;
  border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.bp-close { position: absolute; top: 10px; right: 12px; z-index: 4; background: none; border: none;
  font-size: 28px; line-height: 1; color: #101d2d; cursor: pointer; }
/* Prev/next nav: square opaque-black buttons just outside the panel edges. */
.bp-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; background: #000;
  border: none; color: #fff; font-size: 30px; line-height: 1; width: 40px; height: 60px; cursor: pointer;
  border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.bp-nav:hover { background: #1d1d1d; }
/* Arrows drawn with CSS borders so both render identically (font glyphs didn't). */
.bp-nav::before { content: ""; display: block; width: 11px; height: 11px; border: solid #fff;
  border-width: 3px 3px 0 0; }
.bp-prev::before { transform: rotate(-135deg); margin-left: 5px; }   /* points left */
.bp-next::before { transform: rotate(45deg); margin-right: 5px; }    /* points right */
.bp-prev { left: -52px; } .bp-next { right: -52px; }
.bp-count { text-align: center; color: #8293a8; font-size: 12px; padding: 10px; }
/* Edit Game: centered just below the card header, above the matchup. */
.bp-actions { text-align: center; padding: 12px 18px 0; }
.bp-loading { padding: 40px; text-align: center; color: #8293a8; }
.bp-date { color: #101d2d; padding: 13px 18px; font-size: 15px; font-weight: 600; letter-spacing: .01em;
  border-radius: 4px 4px 0 0; background: #eef1f4; border-bottom: 1px solid #c9d2db; }
.bp-date a { color: #101d2d; text-decoration: underline; text-underline-offset: 2px; }
.bp-date a:hover { color: #c91e1e; }
.bp-grid { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 8px; padding: 16px 18px;
  align-items: center; }
.bp-col { text-align: center; }
.bp-side { color: #8293a8; font-size: 12px; letter-spacing: .08em; margin-bottom: 8px; }
.bp-logo { display: inline-flex; width: 76px; height: 76px; align-items: center; justify-content: center; text-decoration: none; }
.bp-logo img { max-width: 76px; max-height: 76px; }
.bp-logo .bc-mono { width: 68px; height: 68px; font-size: 30px; }
.bp-team { margin: 10px 0 4px; font-size: 17px; font-weight: bold; }
.bp-team a { color: #101d2d; text-decoration: none; }
.bp-score { font-size: 38px; line-height: 1.05; color: #5a6c82; }
.bp-score.win { color: #101d2d; font-weight: bold; }
.bp-score .pct { font-size: 26px; color: #aab6c2; font-weight: 400; }
.bp-mid { text-align: center; }
.bp-rr { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: #5a6c82; }
.bp-rr .rt { font-size: 20px; font-weight: bold; color: #101d2d; }
.bp-rank { font-size: 11px; color: #8293a8; margin-top: 3px; }
.bp-sec { border-top: 1px solid #eef1f4; padding: 14px 18px; }
.bp-sec-title { text-align: center; text-transform: uppercase; letter-spacing: .05em;
  color: #6b7f98; font-size: 12px; font-weight: bold; margin-bottom: 10px; }
.bp-sec-title .mut, .mut { color: #aab6c2; font-weight: normal; }
.bp-cap { text-align: center; color: #5a6c82; font-size: 13px; margin: 12px 0 0; line-height: 1.4; }
.bp-cap.ratio { margin-top: 6px; color: #8293a8; font-size: 12px; }
.bp-next { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: #5a6c82; line-height: 1.4; }
.bp-next > div { flex: 1; text-align: center; }

/* Expected-vs-actual DoS gauge: neutral track; expected labelled ABOVE the bar,
   actual BELOW, so the two labels can never collide. */
.eva2 { margin: 0 30px; }
.eva2-above, .eva2-below { position: relative; height: 26px; }
/* Two squared gradient halves with a gap at the centre (the even-match point). */
.eva2-bar { position: relative; height: 10px; background: none; }
.eva2-bar::before, .eva2-bar::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 0; }
.eva2-bar::before { left: 0; right: calc(50% + 1px); background: linear-gradient(to right, #cfd6df, #e6e9ee); }
.eva2-bar::after  { left: calc(50% + 1px); right: 0; background: linear-gradient(to left, #cfd6df, #e6e9ee); }
/* Markers always sit on top of the bar halves. */
.eva2-exp, .eva2-act { position: absolute; top: -4px; height: 18px; width: 4px; border-radius: 2px;
  transform: translateX(-50%); z-index: 2; }
.eva2-exp { background: #9aa5b1; }              /* expected: gray */
.eva2-act { background: #1f2933; }              /* actual: black */
.eva2-lab { position: absolute; font-size: 11px; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .04em;
  text-align: center; white-space: nowrap; transform: translateX(-50%); }
.eva2-lab b { font-size: 13px; }
/* expected: centered over its marker line */
.eva2-above .eva2-lab { bottom: 7px; }
/* actual: centered over its marker line */
.eva2-below .eva2-lab { top: 7px; }
.eva2-lab.exp { color: #9aa5b1; }               /* expected: gray */
.eva2-lab.act { color: #1f2933; }               /* actual: black */

/* ---- Team overview (matches fts1 team page) ---- */
/* Tab strip. When the tabs don't fit (e.g. the 6 ranking-system tabs on a
   phone), scroll horizontally rather than overflowing the page. Where they fit
   (team pages' 3 tabs, desktop) no scrollbar appears. */
.fts-tabs { display: flex; gap: 3px; border-bottom: 2px solid #324152; margin: 0 0 16px;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.fts-tabs a { flex: 0 0 auto; white-space: nowrap; }
.fts-tabs a { padding: 7px 18px; background: #c3ccd6; color: #324152; text-decoration: none;
  border-radius: 5px 5px 0 0; font-size: 13px; font-weight: 600; }
.fts-tabs a:hover { background: #d3dae2; }
.fts-tabs a.active { background: transparent; color: #101d2d;
  border: 1px solid #c3ccd6; border-bottom: 2px solid #fff; margin-bottom: -2px; }
.team-head { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 18px; }
.team-logo { width: 128px; height: 128px; object-fit: contain; flex: 0 0 128px;
  border-radius: 6px; }
.team-name { font-size: 30px; font-weight: 800; color: #5a6c82; margin: 0 0 8px; line-height: 1.05; }
.team-badge { background: #9a1818; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: .03em; }
.team-loc { font-weight: bold; color: #324152; margin: 8px 0 4px; }
.ov-grid { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 16px; }
.ov-grid > div { flex: 1; min-width: 240px; }
.ov-title { text-transform: uppercase; font-size: 12px; color: #6b7f98; letter-spacing: .04em;
  margin-bottom: 6px; }
.ov-box { background: #eef1f4; border: 1px solid #d4dbe1; border-radius: 5px; padding: 8px 12px; }
.placement-pill { display: inline-block; background: #fff; border: 1px solid #c9d2db; border-radius: 16px;
  padding: 4px 12px; margin: 0 6px 6px 0; font-size: 13px; text-decoration: none; color: #324152; }
.placement-pill b { color: #101d2d; }

/* Expected-vs-actual mini gauge (team rankings ELO table). */
.eva-gauge { position: relative; width: 90px; height: 14px; background: none;
  display: inline-block; vertical-align: middle; }
/* Two gradient halves with a 1px centre gap (darker toward the outer edges). */
.eva-gauge::before, .eva-gauge::after { content: ""; position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.eva-gauge::before { left: 0; right: calc(50% + 0.5px); background: linear-gradient(to right, #cfd6df, #e6e9ee); }
.eva-gauge::after  { left: calc(50% + 0.5px); right: 0; background: linear-gradient(to left, #cfd6df, #e6e9ee); }
.eva-gauge .mid { display: none; }
.eva-gauge .exp { position: absolute; top: -1px; width: 2px; height: 16px; background: #9aa5b1; z-index: 2; }  /* expected: gray */
.eva-gauge .act { position: absolute; top: -1px; width: 2px; height: 16px; background: #1f2933; z-index: 2; }  /* actual: black */
.eva-gauge:hover { outline: 1px solid #9aa7b5; }
/* Hover popover explaining expected vs actual. */
.eva-tip { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: #101d2d; color: #fff; font-size: 11px; line-height: 1.4; padding: 5px 8px;
  border-radius: 4px; white-space: nowrap; display: none; z-index: 30; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.eva-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #101d2d; }
.eva-tip .k { color: #9aa7b5; }
.eva-tip .exp-c { color: #9aa7b5; }   /* expected: gray */
.eva-tip .act-c { color: #fff; }      /* actual: prominent (black->white on dark tip) */
.eva-gauge:hover .eva-tip { display: block; }

/* Row highlighted when its point is hovered on the rating chart. */
#content-area table.fts tbody tr.row-hl td { background: #fff3bf !important; }

/* Click-to-scroll flash: hold the highlight solid for 2s, then fade out. */
@keyframes rowflash {
  0% { background-color: #ffe066; }
  77% { background-color: #ffe066; }
  100% { background-color: transparent; }
}
#content-area table.fts tbody tr.row-flash td { animation: rowflash 2.6s ease-out forwards; }

/* Compatibility shim: some templates were scaffolded with Tailwind utility
   classes, but Tailwind isn't loaded. Map the few that carry visible meaning
   onto the FTS palette so those pages match the rest of the site. The h1
   sizing/weight is already handled by #content-area h1 (higher specificity),
   so these are no-ops there and only take effect where nothing else styles. */
.text-slate-500, .text-slate-400, .text-slate-300 { color: #8293a8; }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.text-2xl { font-size: 24px; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 600; }
/* Match the site/legacy default content-link style (navy, underlined) so links
   are consistent across pages that were scaffolded with these Tailwind classes. */
.text-sky-700 { color: #2a496f; }
.text-sky-700:hover, .hover\:underline:hover { text-decoration: underline; }
.mb-1 { margin-bottom: 4px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }

/* Rankings hub (/rankings/): system tabs + as-of date picker + standings. */
.rk-datebar { margin: 0 0 14px; font-size: 13px; color: #324152; }
.rk-datebar input[type=date] { border: 1px solid #d4dbe1; border-radius: 4px; padding: 4px 8px;
  font: inherit; margin-left: 4px; }
.rk-hint { color: #8293a8; margin-left: 10px; text-decoration: none; }
.rk-hint:hover { text-decoration: underline; }
.rk-latest { background: #1a7f37; color: #fff; font-size: 10px; font-weight: bold; text-transform: uppercase;
  letter-spacing: .04em; padding: 1px 6px; border-radius: 3px; vertical-align: middle; margin-left: 8px; }

/* Front-page predictions + tournaments row. */
.front-extra { margin-top: 18px; }
.pred-line { display: flex; align-items: center; gap: 12px; font-size: 13px; padding: 4px 0;
  border-bottom: 1px solid #eef1f4; }
.pred-line .eva-gauge { flex: 0 0 90px; }
.pred-line-txt { flex: 1; color: #5a6c82; }
.pred-line-txt a { color: #324152; text-decoration: none; }
.pred-line-txt a:hover { text-decoration: underline; }
.pred-line-txt a.win { font-weight: bold; color: #101d2d; }
.pred-tourn { font-size: 13px; padding: 4px 0; border-bottom: 1px solid #eef1f4; }
.pred-tourn a { color: #324152; text-decoration: none; }
.pred-tourn a:hover { text-decoration: underline; }

/* Game predictor (/predictor/). */
.pred-wrap { margin: 0; }
.pred-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 20px; }
.pred-pick { position: relative; flex: 1; min-width: 220px; }
.pred-pick label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: #6b7f98; margin-bottom: 4px; }
.pred-input { width: 100%; box-sizing: border-box; border: 1px solid #c9d2db; border-radius: 4px;
  padding: 8px 10px; font: inherit; height: 38px; }
.pred-input:focus { outline: none; border-color: #79899c; }
.pred-swap { background: #eef1f4; border: 1px solid #c9d2db; border-radius: 4px; padding: 8px 12px;
  font: inherit; color: #324152; cursor: pointer; white-space: nowrap; box-sizing: border-box; height: 38px; }
.pred-swap:hover { background: #e2e8ee; }
.pred-go { background: #1d2a3a; color: #fff; border: 1px solid #1d2a3a; border-radius: 4px;
  padding: 8px 20px; font: inherit; font-weight: 700; cursor: pointer; box-sizing: border-box; height: 38px; }
.pred-go:hover { background: #2a3b50; }

/* ---- Game cards (front-page results/fixtures; also the predictor) ---- */
.md-card { border: 1px solid #d4dbe1; border-radius: 10px; padding: 12px 14px; background: #fff; cursor: pointer; }
.md-card:hover { border-color: #79899c; box-shadow: 0 2px 8px rgba(16,29,45,.07); }
.md-card .comp, .md-fix .comp { font-size: 11px; color: #9aa7b5; margin-bottom: 8px; min-height: 14px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.md-team { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; }
.md-team a { display: flex; align-items: center; gap: 8px; min-width: 0; color: #324152; text-decoration: none; font-size: 15px; }
.md-team a .tn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-team.win a { font-weight: 800; color: #101d2d; }
.md-logo { width: 22px; height: 22px; flex: none; border-radius: 50%; object-fit: contain; background: #f0f3f6; }
.md-logo.mono { display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
  font-weight: 800; color: #9aa7b5; background: #e2e7ec; }
.md-team .sc { font-size: 22px; font-weight: 800; color: #5a6c82; font-variant-numeric: tabular-nums; }
.md-team.win .sc { color: #101d2d; }
.md-team .sc.pct { font-size: 15px; font-weight: 600; color: #aab6c2; }
.md-team.win .sc.pct { color: #8293a8; }
.md-fix { position: relative; border: 1px solid #d4dbe1; border-radius: 8px; padding: 12px 14px; background: #fff; cursor: pointer; }
.md-fix:hover { border-color: #79899c; box-shadow: 0 2px 8px rgba(16,29,45,.07); }

/* Predictor results: one front-page-style game card per ranking system. */
.pred-note { background: rgb(144, 179, 217); color: #fff; text-align: center; font-size: 13px;
  padding: 8px 12px; border-radius: 6px; max-width: 680px; box-sizing: border-box; margin-bottom: 16px; }
/* Left column of ranking systems + the flipping card it drives. */
.pred-layout { display: grid; grid-template-columns: 210px minmax(0, 600px);
  grid-template-rows: auto 1fr; row-gap: 6px; column-gap: 20px; align-items: start; }
.pred-syscol-title { grid-column: 1; grid-row: 1; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: #6b7f98; font-weight: 700; margin-bottom: 0; }
.pred-syslist { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 6px; }
.pred-sys { display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  border: 1px solid #d4dbe1; border-radius: 7px; background: #fff;
  padding: 9px 12px; font: inherit; color: #324152; }
.pred-sys:hover { border-color: #79899c; }
.pred-sys.active { border-color: #79899c; background: #f2f6fb; }
.pred-sys-name { font-size: 13px; font-weight: 700; color: #101d2d; }
.pred-sys-odds { font-size: 12px; color: #8293a8; font-variant-numeric: tabular-nums; }
.pred-sys-odds b { font-weight: 400; }
.pred-sys-odds b.win { font-weight: 800; color: #101d2d; }
.pred-sys-sep { margin: 0 5px; color: #c3ccd6; }
.pred-cardhost { grid-column: 2; grid-row: 2; position: relative; }
.pred-cardpane { display: none; border: 1px solid #d4dbe1; border-radius: 8px; background: #fff;
  box-shadow: 0 1px 4px rgba(16,29,45,.05); overflow: hidden; }
.pred-cardpane.active { display: block; }
.pred-history { margin-top: 28px; }
.pred-history h2 { font-size: 18px; color: #101d2d; margin: 0 0 12px; }

/* Filter chips (labs). */
.fts-chip { display: inline-block; padding: 3px 11px; margin: 0 3px 4px 0; border-radius: 3px;
  font-size: 12px; text-decoration: none; border: 1px solid #c9d2db; background: #fff; color: #324152; }
.fts-chip.active { background: #324152; color: #fff; border-color: #324152; }

/* Contextual moderator "Edit this page" button, top-right of the content area. */
.mod-edit-btn { float: right; margin: 0 0 6px 12px; display: inline-flex; align-items: center;
  gap: 5px; padding: 4px 12px; border-radius: 4px; font-size: 12px; font-weight: 600;
  text-decoration: none; border: 1px solid #c9d2db; background: #fff; color: #324152; }
#content-area a.mod-edit-btn:hover { background: #324152; color: #fff; border-color: #324152; }

/* Compact inline variant of the edit button for the games-table row column. */
.game-edit-btn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px;
  border-radius: 4px; font-size: 11px; font-weight: 600; text-decoration: none;
  white-space: nowrap; border: 1px solid #c9d2db; background: #fff; color: #324152; }
#content-area a.game-edit-btn:hover { background: #324152; color: #fff; border-color: #324152; }

/* Moderator add/edit forms (team / game / tournament). */
.mod-form-title { font-size: 22px; font-weight: 800; color: #101d2d; margin: 4px 0 16px; }


/* Submission review: current-vs-proposed diff. Changed rows are tinted and the
   field name carries a "changed" tag; unchanged rows are dimmed so the eye lands
   on the edits. */
#content-area table.fts.sub-diff th[scope=row] { background: #f8fafc; color: #101d2d;
  font-weight: 600; white-space: nowrap; }
#content-area table.fts.sub-diff td.diff-old { color: #64748b; }
#content-area table.fts.sub-diff tbody tr.diff-changed,
#content-area table.fts.sub-diff tbody tr.diff-changed:nth-child(even) { background: #fff8e1; }
#content-area table.fts.sub-diff tbody tr.diff-changed th[scope=row] { background: #fdf0c9; }
#content-area table.fts.sub-diff tbody tr.diff-changed td.diff-old { text-decoration: line-through; }
#content-area table.fts.sub-diff tbody tr.diff-changed td.diff-new b { color: #92670a; }
#content-area table.fts.sub-diff tbody tr.diff-same { color: #94a3b8; }
.diff-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #92670a; background: #fde9b0; border-radius: 3px; padding: 1px 5px; margin-left: 4px; }
.mod-form { max-width: 760px; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 8px; padding: 20px 22px; }
.mod-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.mod-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mod-field.wide { grid-column: 1 / -1; }
.mod-field.col-fixed { grid-column: 1; }
.mod-field > label { font-size: 12px; font-weight: 600; color: #5a6c82; letter-spacing: .02em; }
.mod-field input:not([type=checkbox]), .mod-field select, .mod-field textarea {
  width: 100%; box-sizing: border-box; padding: 7px 9px; font-size: 14px;
  border: 1px solid #c9d2db; border-radius: 5px; background: #fff; color: #101d2d; }
.mod-field input:focus, .mod-field select:focus, .mod-field textarea:focus {
  outline: none; border-color: #324152; box-shadow: 0 0 0 2px rgba(50, 65, 82, .12); }
.mod-field.has-error input, .mod-field.has-error select { border-color: #c91e1e; }
/* Inline checkbox row (e.g. "active"): box then label. */
.mod-field.mod-check { flex-direction: row; align-items: center; gap: 8px; }
.mod-field.mod-check > label { order: 2; font-size: 14px; color: #101d2d; }
.mod-field.mod-check input { width: auto; }
.img-upload { display: flex; flex-direction: column; gap: 8px; }
.img-upload .img-cur { max-width: 120px; max-height: 120px; object-fit: contain;
  border: 1px solid #e2e8f0; border-radius: 5px; background: #f7fafc; padding: 4px; }
.img-upload .img-clear { display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: #5a6c82; }
.img-upload .img-clear input { width: auto; }
/* Green field help + red required marker, matching the legacy ftssubmit forms. */
.mod-help { font-size: 11px; line-height: 1.35; color: #090; margin: 0; }
.mod-field .req { color: #f00; margin-left: 2px; }
.mod-err { font-size: 12px; color: #c91e1e; margin: 0; }
.mod-form-errors { background: #fdecea; border: 1px solid #f5c6c0; color: #a3271f;
  padding: 8px 12px; border-radius: 5px; margin-bottom: 14px; font-size: 13px; }
.mod-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid #eef2f6; }
.mod-cancel { color: #5a6c82; text-decoration: none; font-size: 13px; }
.mod-cancel:hover { text-decoration: underline; }
.mod-link { color: #324152; text-decoration: none; font-size: 13px; font-weight: 600; }
.mod-link:hover { text-decoration: underline; }
.mod-del { margin-left: auto; color: #c91e1e; text-decoration: none; font-size: 13px; }
.mod-del:hover { text-decoration: underline; }
.reg-intro { font-size: 13px; line-height: 1.5; color: #5a6c82; margin: 0 0 18px;
  padding: 10px 12px; background: #f7fafc; border: 1px solid #e2e8f0;
  border-radius: 6px; }
@media (max-width: 560px) { .mod-grid { grid-template-columns: 1fr; } }

/* Team type-ahead inside the game form (mirrors the Predictor pickers). */
.team-ac { position: relative; }
.team-ac-suggest { display: none; position: absolute; z-index: 30; left: 0;
  top: 100%; background: #fff; border: 1px solid #c9d2db; border-top: none;
  border-radius: 0 0 5px 5px; max-height: 280px; overflow: auto;
  box-shadow: 0 6px 16px rgba(16, 29, 45, .12);
  /* Grow past a narrow input so rich team rows (location + badge) fit. */
  width: max-content; min-width: 100%; max-width: min(88vw, 480px); }
.team-ac-opt { padding: 7px 10px; font-size: 14px; cursor: pointer;
  display: flex; align-items: baseline; gap: 6px; }
.team-ac-opt:hover { background: #eef2f6; }
/* Rich team rows: legacy-style type badge (right), indent for sub-teams,
   muted location. Badge colours match the legacy teamtype-NN classes. */
.tt-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-name.tt-sub { margin-left: 20px; }
.tt-loc { font-size: 12px; color: #6b7f98; white-space: nowrap; flex-shrink: 0; }
.tt-tag { margin-left: auto; flex-shrink: 0; align-self: center;
  font-family: Courier, monospace; font-size: 11px; line-height: 15px;
  letter-spacing: 1px; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  padding: 1px 6px; border-radius: 3px; background: #999; }
.tt-tag.tt-11 { background: #b94a48; }  /* Travel Team */
.tt-tag.tt-12 { background: #f89406; }  /* B Team */
.tt-tag.tt-13 { background: #3a87ad; }  /* Home Team */
.tt-tag.tt-14 { background: #999; }     /* Exhibition Team */

/* Sanctioned-by checkbox group (CheckboxSelectMultiple) in the game form. */
.mod-checklist > div { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 2px; }
.mod-checklist > div > div { margin: 0; }
.mod-checklist > div label { font-size: 14px; font-weight: 400; color: #101d2d;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.mod-checklist > div input { width: auto; margin: 0; }

/* Affiliation history editor (Edit Team). */
.aff-details { max-width: 760px; margin-top: 18px; border: 1px solid #e2e8f0;
  border-radius: 8px; background: #fbfcfd; }
.aff-details > summary { cursor: pointer; padding: 12px 16px; font-weight: 600;
  font-size: 14px; color: #324152; list-style: none; user-select: none;
  display: flex; align-items: center; gap: 8px; }
.aff-details > summary::-webkit-details-marker { display: none; }
.aff-details > summary::before { content: "\25B8"; font-size: 11px; color: #8293a8; }
.aff-details[open] > summary::before { content: "\25BE"; }
.aff-details[open] > summary { border-bottom: 1px solid #eef2f6; }
.aff-details-body { padding: 14px 16px 16px; }
.aff-form { max-width: 720px; }
.aff-intro { color: #5a6c82; font-size: 13px; margin: 0 0 16px; }
.aff-head, .aff-row { display: grid; grid-template-columns: 1fr 160px 160px 86px;
  gap: 12px; align-items: center; }
.aff-head { font-size: 12px; font-weight: 600; color: #5a6c82; padding: 0 2px 6px;
  letter-spacing: .02em; }
.aff-row { padding: 8px 0; border-top: 1px solid #eef2f6; }
.aff-cell { min-width: 0; }
.aff-cell input, .aff-cell select { width: 100%; box-sizing: border-box;
  padding: 7px 9px; font-size: 14px; border: 1px solid #c9d2db; border-radius: 5px;
  background: #fff; color: #101d2d; }
.aff-cell input:focus, .aff-cell select:focus { outline: none; border-color: #324152;
  box-shadow: 0 0 0 2px rgba(50, 65, 82, .12); }
.aff-del { text-align: center; }
.aff-rm { border: none; background: none; color: #c91e1e; font-size: 18px;
  line-height: 1; cursor: pointer; padding: 4px 8px; }
.aff-delbox { font-size: 12px; color: #c91e1e; display: inline-flex; align-items: center;
  gap: 5px; cursor: pointer; }
.aff-add { margin-top: 14px; background: none; border: 1px dashed #c9d2db; color: #324152;
  border-radius: 5px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.aff-add:hover { border-color: #324152; background: #f6f8fa; }
@media (max-width: 560px) {
  .aff-head { display: none; }
  .aff-row { grid-template-columns: 1fr 1fr; }
}

/* ---- Unified filter bar (listing pages + moderation/manage) ----
   One component for every filter form on the site. Fields may be wrapped in
   .fld (with a <label>) on the labelled listing pages, or sit bare for the
   compact search/select toolbars. Forms have no submit button; they apply on
   defocus (see base.html). .btn-row sits left-aligned right after the last
   field; a.clear only renders while a filter is active. */
.fts-filter { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end;
  background: #f4f7fa; border: 1px solid #e0e7ee; border-radius: 6px;
  padding: 12px 14px; margin: 0 0 14px; }
.fts-filter .fld { display: flex; flex-direction: column; gap: 3px; }
.fts-filter label { font-size: 11px; font-weight: 600; color: #6b7f98;
  text-transform: uppercase; letter-spacing: .03em; }
.fts-filter input, .fts-filter select { border: 1px solid #d4dbe1; border-radius: 4px;
  padding: 6px 8px; font-size: 13px; background: #fff; }
.fts-filter input[type=search] { min-width: 200px; }
.fts-filter .btn-row { display: flex; gap: 8px; align-items: center; }
.fts-filter .fts-clear { display: inline-flex; align-items: center; padding: 7px 14px;
  border: 1px solid #cdd6e0; border-radius: 4px; background: #fff; color: #57606a;
  font-size: 13px; text-decoration: none; cursor: pointer; }
.fts-filter a.fts-clear:hover { border-color: #8293a8; color: #324152; background: #f6f8fa; }
.fts-filter .fts-clear.disabled { opacity: .45; cursor: default; pointer-events: none; }
/* Throbber: a reserved slot to the right of Clear in .btn-row (base.html adds
   .fts-loading on submit/Clear-click). visibility (not display) keeps the
   slot's width allocated at all times so Clear never shifts when it appears;
   sized like the Clear button so it sits on the same baseline. */
.fts-filter .fts-spinner { visibility: hidden; display: inline-flex; align-items: center;
  justify-content: center; padding: 7px 14px; border: 1px solid transparent; border-radius: 4px; }
.fts-filter.fts-loading .fts-spinner { visibility: visible; }
.fts-filter .fts-spinner::after { content: ""; width: 15px; height: 15px;
  border: 2px solid #cdd6e0; border-top-color: var(--fts-ink); border-radius: 50%;
  animation: fts-spin .7s linear infinite; }
.fts-filter.fts-loading input, .fts-filter.fts-loading select { opacity: .6; }
@keyframes fts-spin { to { transform: rotate(360deg); } }
.fts-count { color: #8293a8; font-size: 13px; margin: 0 0 10px; text-align: right; }

/* Sortable listing-table headers: the whole header is a link that flips the
   sort; .sa is the active-direction arrow. */
table.fts th[data-sort] a { color: inherit; text-decoration: none;
  display: inline-block; white-space: nowrap; }
table.fts th[data-sort] a:hover { text-decoration: underline; }
table.fts th[data-sort] .sa { font-size: 10px; opacity: .9; }

/* Activity-log pager */
.audit-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; }
.audit-pager a { text-decoration: none; color: #324152; font-weight: 600; }
.audit-pager a:hover { text-decoration: underline; }
.audit-pager .off { color: #b8c0c9; }
.audit-pageinfo { font-size: 13px; color: #57606a; }

/* Activity-log: Item column takes the slack; Edit stays tight on the right. */
.fts .audit-item { width: 100%; }
.fts .audit-edit { text-align: right; }

.audit-when { color: #57606a; font-size: 12px; margin-left: 4px; white-space: nowrap; }

/* ---- Submission queue + Submit pages (public moderation workflow) ----
   Tab bars reuse the site's .fts-tabs component (same as team pages). */
.mod-tab-badge {
  display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px;
  font-size: 12px; line-height: 18px; text-align: center; color: #fff;
  background: #c2410c; border-radius: 9px;
}
.submit-note {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
  padding: 12px 14px; margin: 0 0 18px; color: #78350f; font-size: 14px; line-height: 1.5;
}
.audit-edit .off { color: #94a3b8; cursor: not-allowed; }

/* ---- Site footer (Contact / Privacy / copyright) ----
   Sticks to the bottom of the viewport: #page is a full-height flex column so
   the footer fills the gap below short pages instead of the body showing. */
#page { display: flex; flex-direction: column; height: auto; min-height: 100vh; }
#header, #footer { flex-shrink: 0; }
#page-inner { flex: 1 0 auto; }
#footer {
  margin-top: 40px; background: #101d2d; color: #c7d2e0;
}
#footer .footer-inner {
  max-width: 960px; margin: 0 auto; padding: 18px 16px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
}
#footer .footer-links,
#footer .footer-meta {
  list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 22px;
}
#footer .footer-links li { margin: 0; }
#footer .footer-links a,
#footer .footer-meta a { color: #e7edf4; font-weight: 600; text-decoration: none; }
#footer .footer-links a:hover,
#footer .footer-meta a:hover { color: #fff; text-decoration: underline; }
#footer .footer-copy { margin: 0; color: #8b99ad; font-size: 13px; }

/* ============================================================
   Responsive / mobile layer. The legacy ftszen chrome pins the whole
   page to a fixed 960px (#page, #page-inner, #closure-blocks), which
   forces horizontal scroll and a zoomed-out render on phones. Make the
   shell fluid and let the header, search, and wide tables adapt.
   ============================================================ */

/* Fluid page shell. #page itself stays full-width (fresh.css: width:100%;
   margin:0); centering is done by the inner columns' own margin:auto. The
   legacy chrome pins those inner columns to a fixed 960px, which overflows on
   phones, so cap them at max-width:100% and use border-box so their padding
   doesn't push past the viewport. */
#page-inner { max-width: 100%; box-sizing: border-box; }
#header-inner, #footer .footer-inner { box-sizing: border-box; }

/* #header-inner is flush to the 960 column edge on wide screens (no side
   padding). Once the viewport is narrow enough that the header would touch the
   window edges, restore side padding so the content keeps breathing room. */
@media (max-width: 960px) {
  #header-inner { padding-left: 16px; padding-right: 16px; }
}

/* Header: below ~720px the nav + search stack and the search goes full width. */
@media (max-width: 720px) {
  .hdr-top { flex-wrap: wrap; }
  /* #user-bar is flex:0 0 auto (sizes to max-content) so a logged-in
     moderator's row of links can't wrap and pushes past the viewport, forcing
     a site-wide horizontal scroll. Let it shrink (min-width:0) so its own
     flex-wrap can break the links onto extra lines. */
  #user-bar { flex-wrap: wrap; white-space: normal; row-gap: 4px; flex-shrink: 1; min-width: 0; }
  .hdr-bottom { flex-direction: column; align-items: stretch; gap: 8px; }
  .navigation-bar ul.links { justify-content: flex-start; }
  .fts-search { margin-left: 0; }
  .fts-search input { width: 100%; box-sizing: border-box; }
}

/* Below ~640px: wide tables scroll inside their own box rather than
   stretching the page, and the content padding tightens. */
@media (max-width: 640px) {
  #content-area { padding: 12px 12px 22px; }
  #content-area table.fts { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Predictor: below ~720px the system list stacks above the card as a
   horizontally scrolling row of chips. */
@media (max-width: 720px) {
  .pred-layout { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 12px; }
  .pred-syscol-title, .pred-syslist, .pred-cardhost { grid-column: 1; }
  .pred-syscol-title { grid-row: 1; }
  .pred-syslist { grid-row: 2; flex-direction: row; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .pred-cardhost { grid-row: 3; }
  .pred-sys { flex: 0 0 auto; border-bottom: 3px solid transparent; }
  .pred-sys.active { border-bottom-color: #1d2a3a; }
}

/* Game-detail lightbox on phones. The prev/next arrows live in 52px gutters
   outside the panel (bp-prev/next at left/right:-52px), which don't exist once
   the panel fills the screen, so hide them and let the card use the full width
   (the desktop 40px/60px overlay padding otherwise squeezes it to a sliver).
   Swiping/closing and reopening still reaches every game. */
@media (max-width: 600px) {
  .bp-overlay { padding: 12px 8px; }
  .bp-nav { display: none; }
  .bp-grid { grid-template-columns: 1fr 1.1fr 1fr; gap: 4px; padding: 14px 8px; }
  .bp-logo, .bp-logo img { width: 58px; height: 58px; max-width: 58px; max-height: 58px; }
  .bp-team { font-size: 15px; }
  .bp-score { font-size: 30px; }
  .bp-score .pct { font-size: 20px; }
  .eva2 { margin: 0 14px; }
}

/* Very small: the motto has no room next to the wordmark. */
@media (max-width: 480px) {
  .headtitle { display: none; }
  #footer .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ---- Legal / static content pages (Privacy Policy) ---- */
.legal-page { max-width: 760px; margin: 0 auto; }
.legal-page h1 { margin-bottom: 4px; }
.legal-page .legal-updated { color: #57606a; font-size: 13px; margin: 0 0 20px; }
.legal-page h2 { font-size: 18px; margin: 26px 0 8px; color: #243240; }
.legal-page p { line-height: 1.6; margin: 0 0 12px; color: #2d3a47; }