/* ============================================================
   Majors Fantasy League 2026 — Stylesheet
   ============================================================
   Design tokens (CSS custom properties) at the top.
   All colors, fonts, spacing defined here for easy theming.
   ============================================================ */

:root {
  /* ----- Background ----- */
  --bg-page: #3d6b4f;
  --bg-shelf: #4a7c59;

  /* ----- Scorecard surfaces ----- */
  --card-bg: #EDE8DE;
  --card-bg-alt: #E4DFCF;
  --card-header-bg: #DDD8C8;  /* warm tan, distinct from golfer rows */
  --card-header-text: #1A1A1A;
  --white: #FFFFFF;

  /* ----- Borders ----- */
  --border-card: #D4CFC7;
  --border-cell: #E8E4DD;
  --border-green: #006747;

  /* ----- Score colors ----- */
  --score-under: #1a7a2e;    /* green = under par = good */
  --score-over: #c0392b;     /* red = over par = bad */
  --score-even: #1A1A1A;     /* black = even */

  /* ----- Status ----- */
  --missed-cut-bg: rgba(192, 57, 43, 0.08);
  --missed-cut-text: #C0392B;
  --wd-bg: rgba(127, 140, 141, 0.08);
  --wd-text: #7F8C8D;

  /* ----- Podium borders ----- */
  --gold: #D4A017;
  --silver: #A0A0A0;
  --bronze: #CD7F32;

  /* ----- Navigation ----- */
  --nav-bg: #FFFFFF;
  --nav-active: #006747;
  --nav-inactive: #6B6B6B;
  --live-dot: #E74C3C;

  /* ----- Rank change arrows ----- */
  --arrow-up: #27AE60;
  --arrow-down: #C0392B;
  --arrow-none: #95A5A6;

  /* ----- Typography ----- */
  --text-primary: #1A1A1A;
  --text-secondary: #6B6B6B;
  --text-muted: #95A5A6;

  /* ----- Spacing ----- */
  --page-pad: 16px;
  --card-pad: 12px;
  --card-gap: 12px;
  --section-gap: 28px;
  --card-radius: 6px;

  /* ----- Fonts ----- */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Georgia', 'Times New Roman', serif;
}

/* ============================================================
   Reset & base
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-primary);
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.4;
  min-height: 100vh;
}

/* ============================================================
   Page container (live site)
   ============================================================ */

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--page-pad);
}

.page-title {
  color: var(--white);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-title .live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--live-dot);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.page-title .live-badge .live-dot {
  background: #FFFFFF;
  margin-left: 0;
  width: 6px;
  height: 6px;
}

.page-title .final-badge {
  background: rgba(255,255,255,0.2);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.empty-state {
  color: var(--white);
  opacity: 0.75;
  padding: 32px 16px;
  text-align: center;
}
.empty-state p { margin-bottom: 8px; font-size: 15px; }
.empty-state .muted { font-size: 13px; opacity: 0.7; }

.footer {
  color: var(--white);
  opacity: 0.5;
  font-size: 11px;
  text-align: center;
  margin-top: 32px;
  padding-bottom: 24px;
}
.footer .muted { opacity: 0.75; }

/* ============================================================
   Design test page
   ============================================================ */

.design-page {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--page-pad);
}

.design-page h1 {
  color: var(--white);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.design-page h2 {
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  margin-top: var(--section-gap);
  margin-bottom: 12px;
  opacity: 0.9;
}

.design-page h3 {
  color: var(--white);
  font-size: 13px;
  font-weight: 500;
  margin-top: 16px;
  margin-bottom: 8px;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.design-page p.note {
  color: var(--white);
  font-size: 13px;
  opacity: 0.7;
  margin-bottom: 16px;
}

/* ============================================================
   Color swatches
   ============================================================ */

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.swatch {
  width: 60px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2px;
}

.swatch span {
  font-size: 8px;
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* ============================================================
   Background variants
   ============================================================ */

.bg-variant {
  padding: 16px;
  border-radius: var(--card-radius);
  margin-bottom: 12px;
}

/* ============================================================
   Scorecard — base styles
   ============================================================ */

.scorecard {
  background: var(--card-bg);
  border: 1px solid var(--border-card);
  border-radius: var(--card-radius);
  margin-bottom: var(--card-gap);
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}

.scorecard:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ----- Podium: badge on number + thin accent border ----- */
.scorecard.rank-1 { border-left: 4px solid var(--gold); }
.scorecard.rank-2 { border-left: 4px solid var(--silver); }
.scorecard.rank-3 { border-left: 4px solid var(--bronze); }

/* No whole-card styling for missed-cut/WD — only individual golfer rows get treatment */

/* ============================================================
   Scorecard header row (collapsed view)
   ============================================================ */

.card-header {
  display: flex;
  align-items: center;
  padding: 10px var(--card-pad);
  cursor: pointer;
  gap: 8px;
  user-select: none;
  background: var(--card-header-bg);
  border-bottom: 1px solid var(--border-card);
}

.card-header .rank {
  font-size: 13px;
  font-weight: 700;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--card-header-text);
}

/* Podium rank badges: colored background with white/dark text */
.card-header .rank.gold {
  background: var(--gold);
  color: #FFFFFF;
}
.card-header .rank.silver {
  background: var(--silver);
  color: #FFFFFF;
}
.card-header .rank.bronze {
  background: var(--bronze);
  color: #FFFFFF;
}

.card-header .chevron {
  font-size: 12px;
  color: var(--text-secondary);
  width: 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.card-header .manager-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--card-header-text);
}

/* Spacer pushes score/thru to right after name+live-dot */
.card-header .spacer {
  flex: 1;
}

.card-header .score {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  width: 48px;
  text-align: right;
  flex-shrink: 0;
}

.card-header .thru {
  font-size: 13px;
  color: var(--text-secondary);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.card-header .live-dot {
  width: 7px;
  height: 7px;
  background: var(--live-dot);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
  margin-left: -4px; /* tighten gap after name */
}

/* ============================================================
   Score color classes
   ============================================================ */

.under-par { color: var(--score-under); }
.over-par  { color: var(--score-over); }
.even-par  { color: var(--score-even); }

/* Card header scores use normal score colors (header is light now) */
.card-header .score.under-par { color: var(--score-under); }
.card-header .score.over-par  { color: var(--score-over); }
.card-header .score.even-par  { color: var(--score-even); }

.missed-cut-text {
  color: var(--missed-cut-text);
  font-weight: 600;
}

.wd-text {
  color: var(--wd-text);
  font-style: italic;
}

/* ============================================================
   Golfer detail rows (expanded view)
   ============================================================ */

.card-body {
  border-top: 1px solid var(--border-cell);
  padding: 0;
}

.card-body.collapsed {
  display: none;
}

.golfer-row {
  display: flex;
  align-items: center;
  padding: 7px var(--card-pad) 7px 20px;
  gap: 8px;
  border-bottom: 1px solid var(--border-cell);
  font-size: 13px;
}

.golfer-row:last-child {
  border-bottom: none;
}

/* Alternating row colors — like a real scorecard */
.golfer-row:nth-child(even) {
  background: var(--card-bg-alt);
}

/* Scorecard shelf — medium green band behind cards */
.scorecard-shelf {
  background: var(--bg-shelf);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: var(--section-gap);
}

/* ----- MC golfer row ----- */
.golfer-row.mc-row {
  background: var(--missed-cut-bg);
}

/* ----- WD golfer row ----- */
.golfer-row.wd-row {
  background: var(--wd-bg);
}
.golfer-row.wd-row .golfer-name {
  opacity: 0.5;
  font-style: italic;
}

/* ----- MC/WD hole-by-hole: empty holes with strikethrough across the row ----- */
.golfer-row.mc-row .holes-inline,
.golfer-row.wd-row .holes-inline {
  position: relative;
}

.golfer-row.mc-row .holes-inline::after,
.golfer-row.wd-row .holes-inline::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--missed-cut-text);
  opacity: 0.4;
}

.golfer-row.wd-row .holes-inline::after {
  background: var(--wd-text);
}

.golfer-row.mc-row .holes-inline .hole,
.golfer-row.mc-row .holes-inline .hole-out,
.golfer-row.mc-row .holes-inline .hole-in,
.golfer-row.wd-row .holes-inline .hole,
.golfer-row.wd-row .holes-inline .hole-out,
.golfer-row.wd-row .holes-inline .hole-in {
  color: transparent;
}

/* ----- Tier badge ----- */
.tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--white);
  flex-shrink: 0;
}

.tier-1 { background: #006747; }
.tier-2 { background: #1A8B6E; }
.tier-3 { background: #5BAD92; }
.tier-4 { background: #95C4B4; }

/* ----- Golfer fields ----- */
.golfer-row .flag {
  flex-shrink: 0;
  font-size: 14px;
}

.golfer-row .golfer-name {
  flex: 1;
  font-weight: 500;
}

.golfer-row .owgr {
  font-size: 11px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.golfer-row .golfer-score {
  width: 36px;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.golfer-row .golfer-thru {
  width: 24px;
  text-align: right;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ============================================================
   Round toggle pills
   ============================================================ */

.round-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}

.round-pill {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  background: rgba(255,255,255,0.15);
  color: var(--white);
  transition: all 0.15s ease;
  position: relative;
}

.round-pill.active {
  background: var(--white);
  color: var(--text-primary);
  font-weight: 600;
}

.round-pill .live-indicator {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  background: var(--live-dot);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

/* ============================================================
   Navigation bar
   ============================================================ */

.nav-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border-card);
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-bar::-webkit-scrollbar { display: none; }

.nav-tab {
  flex-shrink: 0;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 400;
  color: var(--nav-inactive);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.15s ease;
  position: relative;
}

.nav-tab.active {
  color: var(--nav-active);
  font-weight: 600;
  border-bottom-color: var(--nav-active);
}

.nav-tab .nav-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--arrow-up);
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

/* ============================================================
   Championship impact table
   ============================================================ */

.impact-table, .earnings-table {
  background: var(--card-bg);
  border: 1px solid var(--border-card);
  border-radius: var(--card-radius);
  overflow: hidden;
  margin-bottom: var(--card-gap);
  max-width: 480px;
}

.table-header {
  background: var(--card-bg-alt);
  padding: 10px var(--card-pad);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-card);
}

.impact-row, .earnings-row {
  display: flex;
  align-items: center;
  padding: 8px var(--card-pad);
  gap: 8px;
  border-bottom: 1px solid var(--border-cell);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.impact-row:last-child, .earnings-row:last-child {
  border-bottom: none;
}

.impact-row .pos { width: 24px; font-weight: 600; flex-shrink: 0; }
.impact-row .name { flex: 1; font-weight: 500; }
.impact-row .pts { width: 32px; text-align: right; flex-shrink: 0; }
.impact-row .change { width: 32px; text-align: right; font-weight: 600; flex-shrink: 0; }

.change-up { color: var(--arrow-up); }
.change-down { color: var(--arrow-down); }
.change-same { color: var(--arrow-none); }

/* ============================================================
   Section labels
   ============================================================ */

.section-label {
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  opacity: 0.8;
}

/* ============================================================
   Animations
   ============================================================ */

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ============================================================
   Font variant sections (for design test page)
   ============================================================ */

.font-inter { font-family: 'Inter', sans-serif; }
.font-system { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.font-serif { font-family: 'Georgia', serif; }

/* ============================================================
   Responsive
   ============================================================ */

@media (min-width: 768px) {
  .design-page {
    max-width: 600px;
  }

  .card-header {
    padding: 12px 16px;
  }

  .golfer-row {
    padding: 8px 16px 8px 28px;
    font-size: 14px;
  }
}

@media (min-width: 1024px) {
  .design-page {
    max-width: 900px;
  }

  /* On desktop, golfer rows get hole-by-hole columns inline */
  .golfer-row {
    padding: 6px var(--card-pad) 6px 20px;
  }

  .golfer-row .holes-inline {
    display: flex;
    gap: 0;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    flex: 1;
    justify-content: center;
  }

  .golfer-row .holes-inline .hole {
    width: 24px;
    text-align: center;
    padding: 2px 0;
    border-right: 1px solid var(--border-cell);
    font-weight: 500;
  }

  .golfer-row .holes-inline .hole:last-child {
    border-right: none;
  }

  .golfer-row .holes-inline .hole-out,
  .golfer-row .holes-inline .hole-in {
    width: 28px;
    text-align: center;
    padding: 2px 0;
    font-weight: 700;
    background: var(--card-bg-alt);
  }

  /* Scorecard info rows: hole numbers, par, yardage (desktop) */
  .scorecard-info-row {
    display: flex;
    align-items: center;
    padding: 3px var(--card-pad) 3px 20px;
    gap: 8px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--border-cell);
    background: var(--card-bg-alt);
  }

  .scorecard-info-row.hole-row {
    background: #006747;
    color: #FFFFFF;
    font-weight: 700;
    border-bottom: none;
  }

  .scorecard-info-row .row-label {
    width: 100px;
    flex-shrink: 0;
    font-size: 10px;
    text-transform: uppercase;
  }

  .scorecard-info-row .holes-inline {
    display: flex;
    gap: 0;
    flex: 1;
    justify-content: center;
  }

  .scorecard-info-row .holes-inline .hole {
    width: 24px;
    text-align: center;
  }

  .scorecard-info-row .holes-inline .hole-out,
  .scorecard-info-row .holes-inline .hole-in {
    width: 28px;
    text-align: center;
    font-weight: 700;
  }

  .scorecard-info-row .score-spacer {
    width: 36px;
    flex-shrink: 0;
  }

  .scorecard-info-row .thru-spacer {
    width: 24px;
    flex-shrink: 0;
  }
}

/* Hide holes-inline on mobile/tablet for the design-page cards only.
   Live card types (round-running / round-scorecard) handle their own
   mobile fallback via horizontal scroll, so they must not be hidden. */
@media (max-width: 1023px) {
  .design-page .holes-inline,
  .design-page .holes-header-row {
    display: none !important;
  }
}

/* ============================================================
   LIVE CARD TYPES (promoted verbatim from design.html lab)

   The four .scorecard subclasses below correspond exactly to the
   four locked lab cards:

     .scorecard.overall-running   — design lab Card 3
     .scorecard.overall-scorecard — design lab Card 4
     .scorecard.round-running     — design lab Card 2 (hide Out/In)
     .scorecard.round-scorecard   — design lab Card 5 (show Out/In 36px)

   All rules below are copies of the corresponding #cardN rules in
   design.html, with the scope changed from id-selector to class-
   selector. Nothing else is added.
   ============================================================ */

/* ----- Lab-wide locked overrides (all 4 cards) ----- */
.scorecard.overall-running .golfer-row .golfer-name,
.scorecard.overall-scorecard .golfer-row .golfer-name,
.scorecard.round-running .golfer-row .golfer-name,
.scorecard.round-scorecard .golfer-row .golfer-name {
  flex: none;
}
.scorecard.round-running .holes-inline,
.scorecard.round-scorecard .holes-inline {
  justify-content: flex-end;
}
.scorecard.round-running .golfer-row.mc-row .holes-inline,
.scorecard.round-running .golfer-row.wd-row .holes-inline,
.scorecard.round-scorecard .golfer-row.mc-row .holes-inline,
.scorecard.round-scorecard .golfer-row.wd-row .holes-inline {
  flex: none;
  margin-left: auto;
}
.scorecard.round-scorecard .mc-row .holes-inline .hole-out,
.scorecard.round-scorecard .mc-row .holes-inline .hole-in,
.scorecard.round-scorecard .wd-row .holes-inline .hole-out,
.scorecard.round-scorecard .wd-row .holes-inline .hole-in {
  background: transparent;
}
.scorecard.round-running .mc-row .holes-inline::after,
.scorecard.round-running .wd-row .holes-inline::after,
.scorecard.round-scorecard .mc-row .holes-inline::after,
.scorecard.round-scorecard .wd-row .holes-inline::after {
  left: 8px;
  right: 8px;
}

/* ----- Cards 2-5 shared locked styling ----- */
.scorecard.overall-running .golfer-row.mc-row .golfer-name,
.scorecard.overall-scorecard .golfer-row.mc-row .golfer-name,
.scorecard.round-running .golfer-row.mc-row .golfer-name,
.scorecard.round-scorecard .golfer-row.mc-row .golfer-name {
  text-decoration: none;
  font-style: italic;
  color: #772222;
  opacity: 0.75;
}
.scorecard.overall-running .golfer-row.mc-row .golfer-score.missed-cut-text,
.scorecard.overall-scorecard .golfer-row.mc-row .golfer-score.missed-cut-text,
.scorecard.round-running .golfer-row.mc-row .golfer-score.missed-cut-text,
.scorecard.round-scorecard .golfer-row.mc-row .golfer-score.missed-cut-text {
  font-style: italic;
  opacity: 0.75;
}
.scorecard.overall-running .golfer-row.mc-row .golfer-thru.missed-cut-text,
.scorecard.overall-scorecard .golfer-row.mc-row .golfer-thru.missed-cut-text,
.scorecard.round-running .golfer-row.mc-row .golfer-thru.missed-cut-text,
.scorecard.round-scorecard .golfer-row.mc-row .golfer-thru.missed-cut-text {
  font-style: italic;
  color: #772222;
  font-weight: 500;
  opacity: 0.75;
}
.scorecard.overall-running .golfer-row .golfer-score,
.scorecard.overall-scorecard .golfer-row .golfer-score,
.scorecard.round-running .golfer-row .golfer-score,
.scorecard.round-scorecard .golfer-row .golfer-score {
  width: 48px;
  text-align: center;
}
.scorecard.overall-running .golfer-row .golfer-thru,
.scorecard.overall-scorecard .golfer-row .golfer-thru,
.scorecard.round-running .golfer-row .golfer-thru,
.scorecard.round-scorecard .golfer-row .golfer-thru {
  width: 28px;
  text-align: center;
}
.scorecard.overall-running .card-header .score,
.scorecard.overall-scorecard .card-header .score,
.scorecard.round-running .card-header .score,
.scorecard.round-scorecard .card-header .score {
  text-align: center;
}
.scorecard.overall-running .card-header .thru,
.scorecard.overall-scorecard .card-header .thru,
.scorecard.round-running .card-header .thru,
.scorecard.round-scorecard .card-header .thru {
  text-align: center;
}
.scorecard.overall-running .scorecard-info-row .score-spacer,
.scorecard.overall-scorecard .scorecard-info-row .score-spacer,
.scorecard.round-running .scorecard-info-row .score-spacer,
.scorecard.round-scorecard .scorecard-info-row .score-spacer {
  width: 48px;
}
.scorecard.overall-running .scorecard-info-row .thru-spacer,
.scorecard.overall-scorecard .scorecard-info-row .thru-spacer,
.scorecard.round-running .scorecard-info-row .thru-spacer,
.scorecard.round-scorecard .scorecard-info-row .thru-spacer {
  width: 28px;
}
.scorecard.overall-running .holes-inline,
.scorecard.overall-scorecard .holes-inline,
.scorecard.round-running .holes-inline,
.scorecard.round-scorecard .holes-inline {
  margin-right: 8px;
}
.scorecard.overall-running .golfer-row.wd-row,
.scorecard.overall-scorecard .golfer-row.wd-row,
.scorecard.round-running .golfer-row.wd-row,
.scorecard.round-scorecard .golfer-row.wd-row {
  background: rgba(127, 140, 141, 0.25);
}

/* ----- Card 2 (Round Running): 28px holes, hide Out/In ----- */
.scorecard.round-running .golfer-row .holes-inline .hole,
.scorecard.round-running .scorecard-info-row .holes-inline .hole {
  width: 28px;
}
.scorecard.round-running .golfer-row .holes-inline .hole {
  font-size: 13px;
  border-right: none;
}
.scorecard.round-running .golfer-row .holes-inline .hole-out,
.scorecard.round-running .golfer-row .holes-inline .hole-in,
.scorecard.round-running .scorecard-info-row .holes-inline .hole-out,
.scorecard.round-running .scorecard-info-row .holes-inline .hole-in {
  display: none;
}

/* ----- Card 5 (Round Scorecard): base 24px holes, 36px Out/In, no bg ----- */
.scorecard.round-scorecard .golfer-row .holes-inline .hole {
  border-right: none;
  font-size: 13px;
}
.scorecard.round-scorecard .golfer-row .holes-inline .hole-out,
.scorecard.round-scorecard .golfer-row .holes-inline .hole-in,
.scorecard.round-scorecard .scorecard-info-row .holes-inline .hole-out,
.scorecard.round-scorecard .scorecard-info-row .holes-inline .hole-in {
  width: 36px;
  text-align: center;
}
.scorecard.round-scorecard .holes-inline .hole-out,
.scorecard.round-scorecard .holes-inline .hole-in {
  background: transparent;
}

/* ----- Card 3 (Overall Running) + Card 4 (Overall Scorecard) ----- */
.scorecard.overall-running .overall-cols,
.scorecard.overall-scorecard .overall-cols {
  display: flex;
  gap: 0;
  flex: 1;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}
.scorecard.overall-running .overall-cols .col,
.scorecard.overall-scorecard .overall-cols .col {
  width: 56px;
  text-align: center;
  padding: 2px 0;
  font-size: 15px;
}
.scorecard.overall-running .overall-cols .col-narrow,
.scorecard.overall-scorecard .overall-cols .col-narrow {
  width: 48px;
  text-align: center;
  padding: 2px 0;
  font-size: 15px;
}
.scorecard.overall-running .overall-header-row,
.scorecard.overall-scorecard .overall-header-row {
  display: flex;
  align-items: center;
  padding: 3px var(--card-pad) 3px 20px;
  gap: 8px;
  background: #006747;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
}
.scorecard.overall-running .overall-header-row .row-label,
.scorecard.overall-scorecard .overall-header-row .row-label {
  width: 100px;
  flex-shrink: 0;
}
.scorecard.overall-running .overall-header-row .overall-cols,
.scorecard.overall-scorecard .overall-header-row .overall-cols {
  font-size: 10px;
}
.scorecard.overall-running .golfer-row .golfer-score,
.scorecard.overall-running .golfer-row .golfer-thru,
.scorecard.overall-scorecard .golfer-row .golfer-score,
.scorecard.overall-scorecard .golfer-row .golfer-thru {
  display: none;
}
.scorecard.overall-running .mc-row .overall-cols .col,
.scorecard.overall-running .wd-row .overall-cols .col,
.scorecard.overall-running .mc-row .overall-cols .col-narrow,
.scorecard.overall-running .wd-row .overall-cols .col-narrow,
.scorecard.overall-scorecard .mc-row .overall-cols .col,
.scorecard.overall-scorecard .wd-row .overall-cols .col,
.scorecard.overall-scorecard .mc-row .overall-cols .col-narrow,
.scorecard.overall-scorecard .wd-row .overall-cols .col-narrow {
  color: var(--text-secondary);
}

/* ----- Round cards: scorecard-info-row shape (Hole/Par labels) ----- */
/* Reuses the base @media(min-width:1024px) .scorecard-info-row rules but
   the round cards need those visible at all widths — promote them. */
.scorecard.round-running .scorecard-info-row,
.scorecard.round-scorecard .scorecard-info-row {
  display: flex;
  align-items: center;
  padding: 3px var(--card-pad) 3px 20px;
  gap: 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border-cell);
  background: var(--card-bg-alt);
}
.scorecard.round-running .scorecard-info-row.hole-row,
.scorecard.round-scorecard .scorecard-info-row.hole-row {
  background: #006747;
  color: #FFFFFF;
  font-weight: 700;
  border-bottom: none;
}
.scorecard.round-running .scorecard-info-row .row-label,
.scorecard.round-scorecard .scorecard-info-row .row-label {
  width: 100px;
  flex-shrink: 0;
  font-size: 10px;
  text-transform: uppercase;
}
.scorecard.round-running .scorecard-info-row .holes-inline,
.scorecard.round-scorecard .scorecard-info-row .holes-inline {
  display: flex;
  gap: 0;
  flex: 1;
}
.scorecard.round-running .scorecard-info-row .holes-inline .hole-out,
.scorecard.round-running .scorecard-info-row .holes-inline .hole-in,
.scorecard.round-scorecard .scorecard-info-row .holes-inline .hole-out,
.scorecard.round-scorecard .scorecard-info-row .holes-inline .hole-in {
  text-align: center;
  font-weight: 700;
}

/* Round-card holes-inline gets its flex/justify + font from lab rules
   above; we also need display/flex for mobile since the base rule lives
   inside @media(min-width:1024px). */
.scorecard.round-running .golfer-row .holes-inline,
.scorecard.round-scorecard .golfer-row .holes-inline {
  display: flex;
  gap: 0;
  flex: 1;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.scorecard.round-scorecard .golfer-row .holes-inline .hole,
.scorecard.round-scorecard .scorecard-info-row .holes-inline .hole {
  width: 24px;
  text-align: center;
  padding: 2px 0;
  font-weight: 500;
}
.scorecard.round-running .golfer-row .holes-inline .hole,
.scorecard.round-running .scorecard-info-row .holes-inline .hole {
  text-align: center;
  padding: 2px 0;
  font-weight: 500;
}

/* MC/WD strikethrough line across the holes-inline region. */
.scorecard.round-running .mc-row .holes-inline,
.scorecard.round-running .wd-row .holes-inline,
.scorecard.round-scorecard .mc-row .holes-inline,
.scorecard.round-scorecard .wd-row .holes-inline {
  position: relative;
}
.scorecard.round-running .mc-row .holes-inline::after,
.scorecard.round-running .wd-row .holes-inline::after,
.scorecard.round-scorecard .mc-row .holes-inline::after,
.scorecard.round-scorecard .wd-row .holes-inline::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 8px;
  right: 8px;
  height: 1px;
  background: var(--missed-cut-text);
  opacity: 0.4;
}
.scorecard.round-running .wd-row .holes-inline::after,
.scorecard.round-scorecard .wd-row .holes-inline::after {
  background: var(--wd-text);
}
.scorecard.round-running .mc-row .holes-inline .hole,
.scorecard.round-running .wd-row .holes-inline .hole,
.scorecard.round-scorecard .mc-row .holes-inline .hole,
.scorecard.round-scorecard .mc-row .holes-inline .hole-out,
.scorecard.round-scorecard .mc-row .holes-inline .hole-in,
.scorecard.round-scorecard .wd-row .holes-inline .hole,
.scorecard.round-scorecard .wd-row .holes-inline .hole-out,
.scorecard.round-scorecard .wd-row .holes-inline .hole-in {
  color: transparent;
}

/* ============================================================
   Mode toggle (Running / Scorecard secondary pills)
   ============================================================ */
.mode-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}
.mode-pill {
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  color: var(--white);
  text-decoration: none;
  opacity: 0.7;
  transition: all 0.15s ease;
}
.mode-pill.active {
  background: rgba(255,255,255,0.18);
  opacity: 1;
  font-weight: 600;
  border-color: rgba(255,255,255,0.4);
}

/* Make round-pill anchors look identical to button variant from design.html */
a.round-pill {
  display: inline-block;
  text-decoration: none;
}

/* ============================================================
   Row wrappers (.row-id / .row-tail)

   The template wraps identity (tier/flag/name/owgr or row-label)
   in .row-id and tail (score/thru or spacers) in .row-tail. At
   full-screen (≥1024) these wrappers are display: contents so
   they are transparent to the flex layout — children lay out as
   direct flex items of their grandparent, byte-identical to the
   pre-wrapper layout.

   Below 1024 the wrappers flip to display: flex + position: sticky
   so identity and tail stay pinned while the hole strip scrolls
   between them.
   ============================================================ */
.scorecard .row-id,
.scorecard .row-tail {
  display: contents;
}

/* ============================================================
   Round views — narrow screen adaptation (< 1024px)

   Strategy:
     - .card-body becomes the horizontal scroll container
     - rows are sized to their intrinsic content width (max-content)
     - .row-id wrapper is pinned left with position: sticky
     - .row-tail wrapper is pinned right with position: sticky
     - hole strip (.holes-inline) scrolls between them; HOLE/PAR
       header rows scroll in sync because they share the same
       scroll container and the same wrapper widths

   The (min-width: 1024px) desktop block is left untouched —
   full-screen laptop look is unaffected.
   ============================================================ */
@media (max-width: 1023px) {
  /* card-body is the horizontal scroll container, one per card */
  .scorecard.round-running .card-body,
  .scorecard.round-scorecard .card-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* Rows size to their intrinsic content width; strip padding so
     wrappers anchor to card-body's true left/right edges. */
  .scorecard.round-running .golfer-row,
  .scorecard.round-running .scorecard-info-row,
  .scorecard.round-scorecard .golfer-row,
  .scorecard.round-scorecard .scorecard-info-row {
    min-width: max-content;
    padding-left: 0;
    padding-right: 0;
    gap: 0;
  }

  /* Hole cells must not shrink — preserve per-hole width */
  .scorecard.round-running .holes-inline .hole,
  .scorecard.round-scorecard .holes-inline .hole,
  .scorecard.round-scorecard .holes-inline .hole-out,
  .scorecard.round-scorecard .holes-inline .hole-in {
    flex-shrink: 0;
  }

  /* Explicit opaque row backgrounds so sticky wrappers (background:
     inherit) show a solid fill that covers the scrolling hole cells
     passing underneath. The existing transparent washes for MC/WD
     would let scrolling cells bleed through. */
  .scorecard.round-running .golfer-row,
  .scorecard.round-scorecard .golfer-row {
    background-color: var(--card-bg);
  }
  .scorecard.round-running .golfer-row:nth-child(even),
  .scorecard.round-scorecard .golfer-row:nth-child(even) {
    background-color: var(--card-bg-alt);
  }
  .scorecard.round-running .golfer-row.mc-row,
  .scorecard.round-scorecard .golfer-row.mc-row {
    background-color: #F5DCD8;  /* opaque version of missed-cut wash */
  }
  .scorecard.round-running .golfer-row.wd-row,
  .scorecard.round-scorecard .golfer-row.wd-row {
    background-color: #D8DCDD;  /* opaque version of WD wash */
  }
  .scorecard.round-running .scorecard-info-row,
  .scorecard.round-scorecard .scorecard-info-row {
    background-color: var(--card-bg-alt);
  }
  .scorecard.round-running .scorecard-info-row.hole-row,
  .scorecard.round-scorecard .scorecard-info-row.hole-row {
    background-color: #006747;
  }

  /* ----- Sticky-left wrapper (.row-id) -----
     Wrapper width is derived from --name-max, a CSS variable set
     by JS at page load (base.html) which measures the widest
     actual .golfer-name on the shelf via scrollWidth. Fallback
     100px is used if JS hasn't run yet (or is disabled).

     Wrapper width math (default narrow, ≥520px):
       padding-left 20 + tier 22 + gap 8 + flag 20 + gap 8
       + name (var) + gap 8 + owgr 32 + padding-right 8
       = 126 + var(--name-max)

     Phone portrait (<520px) uses padding-left 12 instead of 20,
     subtracting 8 from the fixed portion → 118 + var(--name-max). */
  .scorecard.round-running .row-id,
  .scorecard.round-scorecard .row-id {
    display: flex !important;
    align-items: center;
    align-self: stretch;
    gap: 8px !important;
    padding-left: 20px !important;
    padding-right: 8px !important;
    flex: 0 0 calc(126px + var(--name-max, 100px)) !important;
    width: calc(126px + var(--name-max, 100px)) !important;
    box-sizing: border-box;
    position: sticky;
    left: 0;
    z-index: 3;
    background-color: inherit;
    box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.3);
  }

  .scorecard.round-running .row-id .tier-badge,
  .scorecard.round-scorecard .row-id .tier-badge {
    flex: 0 0 22px !important;
  }
  .scorecard.round-running .row-id .flag,
  .scorecard.round-scorecard .row-id .flag {
    flex: 0 0 20px !important;
    width: 20px !important;
    min-width: 0;
    text-align: center;
    overflow: hidden;
    font-size: 14px;
  }
  /* Name: content-sized, can shrink to fit. Max width is driven by
     the --name-max variable set by JS (longest actual name on the
     shelf); fallback 100px if JS hasn't published it yet. */
  .scorecard.round-running .row-id .golfer-name,
  .scorecard.round-scorecard .row-id .golfer-name {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: var(--name-max, 100px);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .scorecard.round-running .row-id .owgr,
  .scorecard.round-scorecard .row-id .owgr {
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 0;
    text-align: left;
  }
  /* Header row: row-label fills the wrapper's content area so
     "Hole" / "Par" sits aligned within the identity column. */
  .scorecard.round-running .scorecard-info-row .row-id .row-label,
  .scorecard.round-scorecard .scorecard-info-row .row-id .row-label {
    flex: 1 1 auto;
    width: auto;
  }

  /* ----- Sticky-right wrapper (.row-tail) -----
     align-self: stretch is required because .scorecard-info-row
     has align-items: center and the header-row tail contains only
     empty spacer spans; without stretch the tail collapses to
     height: 0 and its background has nothing to paint into,
     letting hole numbers bleed through. */
  .scorecard.round-running .row-tail,
  .scorecard.round-scorecard .row-tail {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 8px;
    padding-left: 8px;
    padding-right: 12px;
    flex: 0 0 auto;
    box-sizing: border-box;
    position: sticky;
    right: 0;
    z-index: 3;
    background-color: inherit;
    box-shadow: -6px 0 8px -6px rgba(0, 0, 0, 0.3);
  }


  /* MC/WD strikethrough across holes-inline is absolutely
     positioned; it still works because it spans the natural
     hole-strip width and scrolls with the content. No change. */

  /* ----- Overall views: horizontal scroll with sticky identity -----
     Same strategy as round views: card-body scrolls horizontally,
     row-id pins left so golfer identity stays visible while
     overall-cols (Tot/Tdy/Thru/R1-R4/Tot) scroll. */
  .scorecard.overall-running .card-body,
  .scorecard.overall-scorecard .card-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .scorecard.overall-running .overall-header-row,
  .scorecard.overall-scorecard .overall-header-row,
  .scorecard.overall-running .golfer-row,
  .scorecard.overall-scorecard .golfer-row {
    min-width: max-content;
    padding-left: 0;
    padding-right: 12px;
    gap: 0;
  }

  .scorecard.overall-running .overall-cols .col,
  .scorecard.overall-running .overall-cols .col-narrow,
  .scorecard.overall-scorecard .overall-cols .col,
  .scorecard.overall-scorecard .overall-cols .col-narrow {
    flex-shrink: 0;
  }

  /* Opaque row backgrounds for overall sticky coverage */
  .scorecard.overall-running .golfer-row,
  .scorecard.overall-scorecard .golfer-row {
    background-color: var(--card-bg);
  }
  .scorecard.overall-running .golfer-row:nth-child(even),
  .scorecard.overall-scorecard .golfer-row:nth-child(even) {
    background-color: var(--card-bg-alt);
  }
  .scorecard.overall-running .golfer-row.mc-row,
  .scorecard.overall-scorecard .golfer-row.mc-row {
    background-color: #F5DCD8;
  }
  .scorecard.overall-running .golfer-row.wd-row,
  .scorecard.overall-scorecard .golfer-row.wd-row {
    background-color: #D8DCDD;
  }

  /* Sticky row-id for overall golfer rows */
  .scorecard.overall-running .row-id,
  .scorecard.overall-scorecard .row-id {
    display: flex !important;
    align-items: center;
    align-self: stretch;
    gap: 8px !important;
    padding-left: 20px !important;
    padding-right: 8px !important;
    flex: 0 0 calc(126px + var(--name-max, 100px)) !important;
    width: calc(126px + var(--name-max, 100px)) !important;
    box-sizing: border-box;
    position: sticky;
    left: 0;
    z-index: 3;
    background-color: inherit;
    box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.3);
  }
  .scorecard.overall-running .row-id .tier-badge,
  .scorecard.overall-scorecard .row-id .tier-badge {
    flex: 0 0 22px !important;
  }
  .scorecard.overall-running .row-id .flag,
  .scorecard.overall-scorecard .row-id .flag {
    flex: 0 0 20px !important;
    width: 20px !important;
    min-width: 0;
    text-align: center;
    overflow: hidden;
    font-size: 14px;
  }
  .scorecard.overall-running .row-id .golfer-name,
  .scorecard.overall-scorecard .row-id .golfer-name {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: var(--name-max, 100px);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .scorecard.overall-running .row-id .owgr,
  .scorecard.overall-scorecard .row-id .owgr {
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 0;
    text-align: left;
  }

  /* Sticky row-label for overall header row — matches row-id width */
  .scorecard.overall-running .overall-header-row .row-label,
  .scorecard.overall-scorecard .overall-header-row .row-label {
    flex: 0 0 calc(126px + var(--name-max, 100px)) !important;
    width: calc(126px + var(--name-max, 100px)) !important;
    box-sizing: border-box;
    align-self: stretch;
    position: sticky;
    left: 0;
    z-index: 3;
    background-color: inherit;
    box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.3);
    padding-left: 20px;
  }
}

/* ============================================================
   Phone portrait (< 520px)

   Full-bleed cards, drastically slimmed sticky columns so that
   ~8 holes are visible on a 390px phone. OWGR hidden, tier badge
   and flag shrunk, name truncated. "Thru" moved to card header
   only. Overall columns tightened.
   ============================================================ */
@media (max-width: 519px) {
  /* ----- Full-bleed layout: cards span edge-to-edge ----- */
  .page {
    padding-left: 8px;
    padding-right: 8px;
  }
  .scorecard-shelf {
    margin-left: -8px;
    margin-right: -8px;
    border-radius: 0;
    padding: 6px 0;
  }
  .scorecard {
    border-radius: 0;
  }

  /* ----- All views: compact row-id -----
     Fixed 120px: pl8 + tier18 + gap4 + flag16 + gap4 + name(~66px)
     + pr4 = 120. OWGR hidden. */
  .scorecard.round-running .row-id,
  .scorecard.round-scorecard .row-id,
  .scorecard.overall-running .row-id,
  .scorecard.overall-scorecard .row-id {
    flex: 0 0 120px !important;
    width: 120px !important;
    padding-left: 8px !important;
    padding-right: 4px !important;
    gap: 4px !important;
  }
  .scorecard.round-running .row-id .tier-badge,
  .scorecard.round-scorecard .row-id .tier-badge,
  .scorecard.overall-running .row-id .tier-badge,
  .scorecard.overall-scorecard .row-id .tier-badge {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px;
    font-size: 10px;
  }
  .scorecard.round-running .row-id .flag,
  .scorecard.round-scorecard .row-id .flag,
  .scorecard.overall-running .row-id .flag,
  .scorecard.overall-scorecard .row-id .flag {
    flex: 0 0 16px !important;
    width: 16px !important;
    font-size: 12px;
  }
  .scorecard.round-running .row-id .golfer-name,
  .scorecard.round-scorecard .row-id .golfer-name,
  .scorecard.overall-running .row-id .golfer-name,
  .scorecard.overall-scorecard .row-id .golfer-name {
    max-width: 60px;
    font-size: 11px;
  }
  .scorecard.round-running .row-id .owgr,
  .scorecard.round-scorecard .row-id .owgr,
  .scorecard.overall-running .row-id .owgr,
  .scorecard.overall-scorecard .row-id .owgr {
    display: none !important;
  }

  /* Header row labels: match compact 120px row-id */
  .scorecard.round-running .scorecard-info-row .row-id,
  .scorecard.round-scorecard .scorecard-info-row .row-id {
    flex: 0 0 120px !important;
    width: 120px !important;
  }
  .scorecard.round-running .scorecard-info-row .row-id .row-label,
  .scorecard.round-scorecard .scorecard-info-row .row-id .row-label {
    width: auto;
    font-size: 9px;
  }
  .scorecard.overall-running .overall-header-row .row-label,
  .scorecard.overall-scorecard .overall-header-row .row-label {
    flex: 0 0 120px !important;
    width: 120px !important;
    padding-left: 8px;
  }

  /* ----- Round view: compact row-tail -----
     Hide "Thru" (already in card header), keep just score. */
  .scorecard.round-running .row-tail,
  .scorecard.round-scorecard .row-tail {
    padding-left: 4px;
    padding-right: 6px;
    gap: 4px;
  }
  .scorecard.round-running .row-tail .golfer-thru,
  .scorecard.round-scorecard .row-tail .golfer-thru {
    display: none;
  }
  .scorecard.round-running .row-tail .golfer-score,
  .scorecard.round-scorecard .row-tail .golfer-score {
    width: 40px;
    font-size: 12px;
  }
  /* Info row tail spacers — match compact tail */
  .scorecard.round-running .row-tail .thru-spacer,
  .scorecard.round-scorecard .row-tail .thru-spacer {
    display: none;
  }
  .scorecard.round-running .row-tail .score-spacer,
  .scorecard.round-scorecard .row-tail .score-spacer {
    width: 40px;
  }

  /* ----- Round view: tighter hole cells ----- */
  .scorecard.round-running .holes-inline,
  .scorecard.round-scorecard .holes-inline {
    font-size: 12px;
  }
  .scorecard.round-running .golfer-row .holes-inline .hole,
  .scorecard.round-running .scorecard-info-row .holes-inline .hole {
    width: 24px;
  }

  /* ----- Overall view: tighter column widths ----- */
  .scorecard.overall-running .overall-cols .col,
  .scorecard.overall-scorecard .overall-cols .col {
    width: 40px;
    font-size: 12px;
  }
  .scorecard.overall-running .overall-cols .col-narrow,
  .scorecard.overall-scorecard .overall-cols .col-narrow {
    width: 36px;
    font-size: 12px;
  }
  .scorecard.overall-running .golfer-row,
  .scorecard.overall-scorecard .golfer-row,
  .scorecard.overall-running .overall-header-row,
  .scorecard.overall-scorecard .overall-header-row {
    padding-right: 8px;
  }
}

/* ============================================================
   Responsive container widths
   ============================================================ */
@media (min-width: 768px) {
  .page { max-width: 720px; }
}
@media (min-width: 1024px) {
  .page { max-width: 920px; }
}