/* ─── Survivor Vault (vault/survivor/**) ─────────────────────────
   Scoped custom properties on .survivor-viz so these never collide with the
   site's own --border etc. (same pattern as .bible-viz / --bv-*). */
.survivor-viz {
  --sv-red:    #d6483e;
  --sv-blue:   #2e7bd6;
  --sv-yellow: #e8b923;
  --sv-gold:   #b8860b;
  --sv-silver: #9098a3;
  --sv-dim:    #cfcfcf;
  /* team-name cyan, sampled directly off the source graphics */
  --sv-team-blue: #46bce4;
}

/* ─ dark theme: week + season-overview pages only, not the season index ─
   Applied via a body class (set only by week_page/season_overview_page in
   the generator) since it needs to repaint the shared header/footer chrome,
   which sits outside the .survivor-viz div. */
body.sv-dark-page { background: #0a0a0a; }
body.sv-dark-page header,
body.sv-dark-page .nav-mobile,
body.sv-dark-page footer { background: #0a0a0a; border-color: #262626; }
body.sv-dark-page .nav-logo,
body.sv-dark-page .nav-links a,
body.sv-dark-page .nav-mobile a,
body.sv-dark-page .nav-contact,
body.sv-dark-page .footer-logo,
body.sv-dark-page .footer-copy { color: #f2f2f2; }
body.sv-dark-page .nav-links a.active { border-bottom-color: #f2f2f2; }
body.sv-dark-page .nav-hamburger span { background: #f2f2f2; }
body.sv-dark-page .footer-links a { color: #b3b3b3; }
body.sv-dark-page .footer-links a:hover { color: #f2f2f2; }

body.sv-dark-page .back-link { color: #999; }
body.sv-dark-page .back-link:hover { color: #f2f2f2; }
body.sv-dark-page .survivor-viz .page-title { color: #f8f8f8; }
body.sv-dark-page .sv-team-name { border-bottom-color: #262626; }

body.sv-dark-page .sv-weeknav a { color: #ccc; }
body.sv-dark-page .sv-weeknav a:hover { border-left-color: #777; }
body.sv-dark-page .sv-weeknav a.active { color: #fff; border-left-color: #fff; }

body.sv-dark-page .sv-card-photo-wrap { background: #1a1a1a; }
body.sv-dark-page .sv-card-name { color: #f2f2f2; }

@media (max-width: 768px) {
  body.sv-dark-page .sv-weeknav a { border-color: #333; }
  body.sv-dark-page .sv-weeknav a.active { background: #f2f2f2; color: #0a0a0a; border-color: #f2f2f2; }
}

/* Tight by default (not just on mobile) — the site's normal .page/.page-title
   sizing is meant for prose pages, not a data grid that has to fit one
   screen with zero scrolling on every device. */
.page.survivor-viz { padding: 20px 24px 24px; }
.survivor-viz .page-title { font-size: 26px; }
.survivor-viz .back-link { font-size: 12px; margin-bottom: 6px; display: inline-block; }
.sv-season-head { margin-bottom: 2px; }
.sv-season-sub  { font-size: 13px; margin-bottom: 14px; color: var(--sv-team-blue); }

@media (max-width: 768px) {
  .page.survivor-viz { padding: 12px 10px 20px; }
  .survivor-viz .page-title { font-size: 19px; }
  .sv-season-head { margin-bottom: 1px; }
  .sv-season-sub { font-size: 10.5px; margin-bottom: 6px; }
  .survivor-viz .back-link { font-size: 11px; margin-bottom: 4px; }
}

/* ─ layout: content + week nav ─ */
.sv-layout { display: flex; gap: 48px; align-items: flex-start; }
.sv-content { flex: 1; min-width: 0; }

.sv-weeknav {
  flex: 0 0 150px;
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}
.sv-weeknav ul { list-style: none; }
.sv-weeknav li { margin-bottom: 2px; }
.sv-weeknav a {
  display: block;
  padding: 5px 0;
  font-size: 14px;
  color: var(--black);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 10px;
}
.sv-weeknav a:hover { border-left-color: var(--mid); }
.sv-weeknav a.active {
  font-weight: 600;
  border-left-color: var(--black);
}

@media (max-width: 768px) {
  .sv-layout { flex-direction: column; gap: 20px; }
  .sv-weeknav {
    order: -1;
    position: static;
    width: 100%;
    flex: none;
  }
  .sv-weeknav ul {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .sv-weeknav li { margin-bottom: 0; flex: 0 0 auto; }
  .sv-weeknav a {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 12px;
    white-space: nowrap;
  }
  .sv-weeknav a.active {
    border-color: var(--black);
    background: var(--black);
    color: var(--white);
  }
}

/* ─ team blocks ─
   Matches the original graphic's layout: a narrow vertical-text team name
   running down the left edge, photo grid filling the rest of the row. This
   is what actually saves vertical space vs. a horizontal header-then-grid
   stack — there's no separate header line eating a row's worth of height on
   every one of the 4 teams. */
.sv-team { display: flex; align-items: stretch; gap: 6px; margin-bottom: 6px; transition: opacity .2s; }
.sv-team.sv-team-out { opacity: .4; }
/* Name and crowns are each independently absolutely-positioned within this
   box, pinned to OPPOSITE horizontal edges (name -> right, against the grid
   border; crowns -> left, against the outer page edge), both bottom:0. That
   independence is deliberate and must not be replaced with flexbox/auto
   layout: if the name's position were allowed to depend on whether a crowns
   sibling exists (e.g. flex auto-packing), every crowned team's name shifts
   relative to every uncrowned team's — the exact misalignment bug this is
   guarding against. Anchoring both to a fixed corner of a fixed-width box
   keeps the name pixel-identical across every team regardless of trophy
   count, with crowns simply appearing (or not) in the untouched space to
   its left, bottom-aligned to it. */
.sv-team-name {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  padding-right: 3px;
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.sv-team-label {
  position: absolute;
  bottom: 0;
  right: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 13px;
  font-weight: 700;
  color: var(--sv-team-blue);
  white-space: nowrap;
}
.sv-trophies {
  position: absolute;
  /* Emoji glyphs carry extra baked-in bottom padding vs. Latin text (a
     font-metric quirk, not a layout bug) — bottom:0 like the name actually
     let crowns hang visibly lower than the name's own bottom. Nudged up to
     compensate; re-check against the name's bottom edge if font-size changes. */
  bottom: 2px;
  left: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11px;
  line-height: 1;
}
/* Emoji don't get the same "stays upright through vertical-rl" treatment
   Latin text does, so the container's rotate(180deg) flips them upside down
   even though it doesn't flip the name text. Counter-rotate to undo it. */
.sv-crown-glyphs {
  display: inline-block;
  transform: rotate(180deg);
}

.sv-grid {
  flex: 1;
  min-width: 0;
  /* Caps card size by SCALING with column count, not a fixed px value — a
     fixed cap sized for 6 columns made 4-column seasons' cards LARGER (fewer,
     wider columns sharing the same budget), which re-broke the one-screen fit
     that was already working for those. Height rides along via aspect-ratio,
     which is what actually keeps the whole page under one screen's height. */
  max-width: calc(var(--sv-cols, 4) * 120px);
  display: grid;
  grid-template-columns: repeat(var(--sv-cols, 4), 1fr);
  gap: 3px;
}

/* the classic grid/flex trap: a grid item's default min-width is its
   content's min-content size, so a card holding a large source image
   refuses to shrink below that — forcing columns wider than the track and
   making the row overflow/wrap instead of the requested N-across. */
.sv-card { min-width: 0; }

@media (max-width: 768px) {
  .sv-team { margin-bottom: 6px; gap: 4px; }
  .sv-team-name { width: 26px; padding-right: 2px; }
  .sv-team-label { font-size: 10px; }
  .sv-trophies { font-size: 9px; bottom: 1.5px; }
  .sv-grid { gap: 3px; }
}

/* ─ player card ─ */
.sv-card { position: relative; }
.sv-card-photo-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--gray);
  border-radius: 3px;
}
.sv-card-photo-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.sv-card.sv-out .sv-card-photo-wrap img {
  filter: grayscale(0.85) brightness(0.55);
}
.sv-card.sv-out .sv-card-name {
  opacity: .5;
}

.sv-card-name {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .sv-card-name { font-size: 9.5px; margin-top: 3px; }
}

/* tribe color triangle, bottom-left corner of photo — % based so it scales
   with the card instead of eating a fixed chunk of a tiny mobile photo. */
.sv-tribe-tri {
  position: absolute;
  bottom: 0; left: 0;
  width: 32%; height: 32%;
  background: var(--tri-color, transparent);
  clip-path: polygon(0 100%, 0 0, 100% 100%);
}

/* winner / runner-up finale treatment — real borders (inset, shrinking the
   photo), same technique as the red just-out border, not outline (which
   sits outside the square and looked inconsistent next to it). */
.sv-card.sv-winner .sv-card-photo-wrap {
  border: 4px solid var(--sv-gold);
}
.sv-card.sv-winner .sv-card-name::before { content: "\1F451  "; }
.sv-card.sv-runnerup .sv-card-photo-wrap {
  border: 2px solid var(--sv-silver);
}

/* voted out THIS week, specifically (vs. already-out from an earlier week).
   A real border, not outline/box-shadow — box-shadow got fully painted over
   by the edge-to-edge photo since box-sizing:border-box wasn't reserving it
   any room; border shrinks the photo to leave itself visible. */
.sv-card.sv-justout .sv-card-photo-wrap {
  border: 2px solid var(--sv-red);
}

/* ─ /vault/survivor — the season index + team stats, merged into one page.
   Dark-theme only (same body.sv-dark-page as the week pages), so colors are
   hardcoded here rather than routed through a separate light/dark split like
   the rest of this file. The 4 team accent hexes are set inline per-element
   from STATS_TEAM_COLORS in the generator (a validated categorical palette —
   see the comment above STATS_TEAM_ORDER in gen_survivor_vault.py) and read
   back here via var(--accent). */
.sv-season-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 20px 0 4px;
}
.sv-season-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 84px;
  text-decoration: none;
}
.sv-season-thumb img {
  display: block;
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 6px;
}
.sv-season-thumb span {
  font-size: 11.5px;
  font-weight: 600;
  color: #ccc;
  text-align: center;
}
.sv-season-thumb:hover img { opacity: 0.85; }
.sv-season-thumb:hover span { color: #f2f2f2; }
.sv-season-thumb span.sv-season-winner {
  display: block;
  font-size: 9.5px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  margin-top: -3px;
}

@media (max-width: 768px) {
  .sv-season-strip { gap: 10px; }
  .sv-season-thumb { width: 64px; }
  .sv-season-thumb img { width: 64px; height: 64px; }
  .sv-season-thumb span { font-size: 10px; }
  .sv-season-thumb span.sv-season-winner { font-size: 8px; }
}

.sv-stats-h2 {
  font-size: 15px;
  font-weight: 700;
  color: #f2f2f2;
  margin: 28px 0 12px;
}

.sv-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.sv-tile {
  border: 1px solid #262626;
  border-top: 3px solid var(--accent, #666);
  border-radius: 6px;
  padding: 12px 12px 10px;
}
.sv-tile-label { font-size: 11px; color: #999; margin-bottom: 6px; }
.sv-tile-value { font-size: 28px; font-weight: 700; color: #f8f8f8; line-height: 1; }
.sv-tile-sub { font-size: 10.5px; color: #999; margin-top: 6px; }

@media (max-width: 768px) {
  .sv-tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sv-tile { padding: 10px 10px 8px; }
  .sv-tile-value { font-size: 22px; }
}

.sv-bar-chart { display: flex; flex-direction: column; gap: 10px; }
.sv-bar-row { display: flex; align-items: center; gap: 10px; }
.sv-bar-name { flex: 0 0 96px; font-size: 12.5px; color: #ccc; text-align: right; }
.sv-bar-track { flex: 1; }
.sv-bar-fill {
  display: block;
  height: 14px;
  min-width: 4px;
  border-radius: 7px;
}
.sv-bar-value { flex: 0 0 34px; font-size: 12px; color: #999; }

@media (max-width: 768px) {
  /* stack name above the bar instead of cramming it into a narrow right-
     aligned column — every team name wrapped to 2 lines there, giving each
     row a different height and reading unevenly. */
  .sv-bar-row { flex-wrap: wrap; row-gap: 4px; }
  .sv-bar-name { flex-basis: 100%; text-align: left; font-size: 11.5px; }
  .sv-bar-value { flex-basis: 30px; }
}

.sv-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 20px;
}
.sv-story-card {
  border-left: 3px solid var(--accent, #666);
  padding: 2px 0 2px 14px;
}
.sv-story-card h3 {
  font-size: 14.5px;
  font-weight: 700;
  color: #f2f2f2;
  margin-bottom: 4px;
}
.sv-story-tag {
  font-weight: 400;
  font-size: 12px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sv-story-card p { font-size: 12.5px; color: #ccc; line-height: 1.55; }

@media (max-width: 768px) {
  .sv-cards { grid-template-columns: 1fr; gap: 14px; }
}

.sv-facts ul { padding-left: 18px; }
.sv-facts li { font-size: 12.5px; color: #ccc; line-height: 1.6; margin-bottom: 8px; }
.sv-facts strong { color: #f2f2f2; }