/* Live scoring (live.html only).
   The hole screen: one card per hole showing the whole foursome, tap-chip
   score entry, and the GPS map as a full-screen overlay. Tokens (--mdt-*)
   and the bg-eagle..bg-3bogey scorecard colors come from custom.css. */

/* No accent stripe on the hole card. The stripe distinguishes one card from
   its neighbours in a grid; this card *is* the screen, so it has nothing to be
   distinguished from -- and its bg-3bogey accent is near-black, which read as
   a heavy bar down the side. Needs the doubled class to out-rank the
   .card.hovercard rule in custom.css that paints the stripe. */
.card.hovercard.live-hole-card {
  border-left: 1px solid var(--mdt-border);
}

/* --- hole header --- */
.live-holehead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px !important;
  padding: 0 8px !important;
}
.live-holehead h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.1;
}
.live-holemeta {
  font-size: 13px;
  color: var(--mdt-ink-2);
}
/* Ink on the tinted card header, not white on a saturated bar -- these were
   tuned for the old solid bg-3bogey header. */
.live-holenav {
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 12px;
  background: var(--mdt-tint);
  color: var(--mdt-ink);
  font-size: 22px;
  flex: 0 0 auto;
}
.live-holenav:active {
  background: var(--mdt-tint-strong);
}

/* --- status row: save pill / map button --- */
.live-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px 0 12px;
}
.live-save {
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--mdt-border);
  color: var(--mdt-ink-3);
  background: var(--mdt-surface);
}
.live-save.saving { color: var(--mdt-ink-2); }
.live-save.saved { color: var(--mdt-fairway); border-color: var(--mdt-fairway); }
/* The save pill's three unhappy states. Built from the score tokens so they
   invert with everything else -- a pending amber and a failed red that stay
   legible on either page. */
.live-save.pending {
  color: var(--mdt-score-eagle-ink);
  background: var(--mdt-score-eagle-bg);
  border-color: var(--mdt-score-eagle);
}
/* Failed stays a solid loud red with white on it in BOTH modes, unlike
   pending above -- it means a score did not reach the bucket and the pill is
   the retry button. A tinted pill would have made it quieter in dark mode,
   which is exactly backwards. */
.live-save.failed {
  color: var(--mdt-danger-ink);
  background: var(--mdt-danger);
  border-color: var(--mdt-danger);
  cursor: pointer;
}
.live-mapbtn {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--mdt-border-strong);
  background: var(--mdt-surface);
  color: var(--mdt-ink);
  font-size: 14px;
}
.live-mapbtn:active { background: var(--mdt-brand-soft); }

/* --- auto-advance banner / toast --- */
.live-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 8px 12px 0 12px;
  padding: 8px 12px;
  border-radius: var(--mdt-radius-sm);
  background: var(--mdt-brand-soft);
  border: 1px solid var(--mdt-brand-ring);
  color: var(--mdt-ink);
  font-size: 14px;
}
.live-banner button {
  border: none;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 14px;
  background: var(--mdt-brand);
  color: var(--mdt-on-brand);
}
.live-banner .live-dismiss {
  background: transparent;
  color: var(--mdt-ink-3);
  font-size: 18px;
  padding: 0 4px;
}

/* Both matches as full scorecards, over the hole screen. Shares .live-gps-head
   and .live-gps-close with the map overlay; unlike the map this one takes the
   page background, because there is no photo behind it that has to sit on
   white. The cards themselves are the boxscore's, unrestyled. */
.live-cards {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--mdt-bg);
  display: flex;
  flex-direction: column;
}

.live-cards-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* Shown until the foursome tees off. Amber rather than red: nothing is wrong,
   the round simply has not started. */
.live-notice {
  margin: 8px 12px 0 12px;
  padding: 8px 12px;
  border-radius: var(--mdt-radius-sm);
  background: var(--mdt-score-eagle-bg);
  border: 1px solid var(--mdt-score-eagle);
  color: var(--mdt-score-eagle-ink);
  font-size: 14px;
  text-align: center;
}

/* Chips before tee time: still legible, obviously not live. They keep their
   click handler so a tap can explain itself -- pointer-events: none would
   just make them feel broken. */
.live-chip.chip-shut {
  opacity: 0.4;
}

/* --- pairing sections --- */
/* Per-pairing colour, same assignment the boxscore and lineup card headers
   use (A eagle, B birdie, C bogey, D double) and the same fill/ink/edge
   triple the scorecard cells use -- so pairing B is the same red everywhere.
   Falls back to plain chrome if a pairing letter ever shows up unmapped. */
.live-pairing.pair-A { --pair-fill: var(--mdt-score-eagle-bg);  --pair-ink: var(--mdt-score-eagle-ink);  --pair-edge: var(--mdt-score-eagle); }
.live-pairing.pair-B { --pair-fill: var(--mdt-score-birdie-bg); --pair-ink: var(--mdt-score-birdie-ink); --pair-edge: var(--mdt-score-birdie); }
.live-pairing.pair-C { --pair-fill: var(--mdt-score-bogey-bg);  --pair-ink: var(--mdt-score-bogey-ink);  --pair-edge: var(--mdt-score-bogey); }
.live-pairing.pair-D { --pair-fill: var(--mdt-score-2bogey-bg); --pair-ink: var(--mdt-score-2bogey-ink); --pair-edge: var(--mdt-score-2bogey); }

.live-pairing {
  margin: 10px 8px 0 8px;
  padding: 6px 6px 2px 6px;
  border: 1px solid var(--mdt-border);
  border-left: 4px solid var(--pair-edge, var(--mdt-border));
  border-radius: var(--mdt-radius);
  background: var(--mdt-bg);
  text-align: left;
}
.live-pairing-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 6px 6px 6px;
}
.live-pairing-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  /* Light fill with its own dark ink, like a score cell -- the saturated hue
     is reserved for the edge, where it does not have to carry text. */
  background: var(--pair-fill, var(--mdt-brand));
  color: var(--pair-ink, var(--mdt-on-brand));
  box-shadow: inset 0 0 0 1px var(--pair-edge, transparent);
  font-size: 15px;
  font-weight: 700;
  flex: 0 0 auto;
}
.live-pairing-pts {
  font-size: 15px;
  color: var(--mdt-ink-2);
}
.live-pairing-pts b { color: var(--mdt-ink); }

/* --- seats --- */
.live-seat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 6px;
  border-top: 1px solid var(--mdt-border);
}
.live-seat-id {
  position: relative;
  flex: 0 0 var(--mdt-avatar);
}
.live-seat-id img {
  width: var(--mdt-avatar);
  height: var(--mdt-avatar);
  border-radius: 50%;
  border: 2px solid var(--mdt-surface);
  box-shadow: var(--mdt-shadow-sm);
  object-fit: cover;
}
/* The handicap chip is .hcp-chip in custom.css, shared with the scorecard
   pages. .live-seat-id above is its positioning context. */
.live-seat-body {
  flex: 1 1 auto;
  min-width: 0;
}
.live-seat-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
/* The player name. It is a <select> only while the seat has no submitted
   lineup behind it -- live.html scores a lineup, it does not set one -- and
   plain text once it does, which is the usual case. Both carry this rule so
   the row reads identically either way; .live-player-fixed is only the span's
   share of what a <select> does for free. */
.live-player-fixed {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.live-player {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
  font-size: 17px;
  font-weight: 600;
  color: var(--mdt-ink);
  max-width: 55%;
  text-overflow: ellipsis;
  padding: 0;
}
.live-pops {
  font-size: 17px;
  color: var(--mdt-brand);
  font-weight: 700;
  min-width: 12px;
}
.live-total {
  margin-left: auto;
  font-size: 15px;
  color: var(--mdt-ink-2);
  white-space: nowrap;
}
.live-total b {
  font-size: 17px;
  color: var(--mdt-ink);
}

/* --- score chips --- */
.live-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 2px 2px 2px;
}
.live-chips::-webkit-scrollbar { display: none; }
.live-chip {
  flex: 0 0 auto;
  min-width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--mdt-border-strong);
  color: var(--mdt-ink);
  font-size: 18px;
  font-weight: 600;
  padding: 0;
}
/* Base background only when not selected: this file loads after custom.css,
   so painting it on .live-chip itself would override the bg-eagle..bg-3bogey
   scorecard classes a selected chip carries. */
.live-chip:not(.sel) {
  background: var(--mdt-surface);
}
.live-chip.chip-par-mark { box-shadow: inset 0 0 0 2px var(--mdt-brand-ring); }
/* A selected chip takes its fill and bottom accent bar from the bg-* score
   class in custom.css. It has to name --score-ink explicitly: this file loads
   after custom.css, so the plain `color` on .live-chip above would otherwise
   win over the one bg-* sets. (This rule used to force white text plus a
   dark-text exception for eagle; the light-fill palette made that unreadable.) */
.live-chip.sel {
  border-color: transparent;
  color: var(--score-ink, var(--mdt-ink));
}
.live-chip.chip-clear {
  color: var(--mdt-ink-3);
  font-size: 22px;
}
.live-seat-note {
  font-size: 14px;
  color: var(--mdt-ink-3);
  padding: 12px 2px;
}

/* --- around the league --- */
.live-league .card-body { margin-top: 10px; padding-bottom: 14px; }
.live-league h6 {
  color: var(--mdt-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  text-align: left;
}
.live-league-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--mdt-ink);
  border-top: 1px solid var(--mdt-border);
  text-decoration: none;
}
.live-league-row:hover { text-decoration: none; }
.live-league-row .lg-team {
  flex: 1 1 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-league-row .lg-team.away { text-align: right; }
.live-league-row .lg-pts {
  flex: 0 0 auto;
  font-weight: 600;
  min-width: 30px;
  text-align: center;
}
.live-league-row.mine .lg-team { font-weight: 600; }

/* --- setup picker --- */
.live-setup .card-body { text-align: left; padding-bottom: 20px; }
.live-meta { font-size: 14px; color: var(--mdt-ink-2); }

/* --- GPS overlay --- */
/* This overlay used to be pinned white in both themes, because the hole PNGs
   were photos feathered out to solid white and any other backdrop showed as
   letterbox bars beside the drawing. The PNGs now carry that fade in their
   ALPHA channel instead (see "The hole images" in CLAUDE.md), so the photo
   composites onto whatever is behind it and the overlay is free to follow the
   page. Compositing them back over white is identical to the old files, so
   light mode is unchanged.
   The white-on-saturated text further down (.live-dist, .live-gps-foot
   button) sits on the --mdt-map-* colours, which ARE the same in both modes,
   so those stay literal and are correct either way. */
.live-gps {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--mdt-bg);
  display: flex;
  flex-direction: column;
}
.live-gps-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 52px;
  padding: 0 12px;
  color: var(--mdt-ink);
  font-size: 18px;
  font-weight: 600;
}
.live-gps-close {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--mdt-tint);
  color: var(--mdt-ink);
  font-size: 20px;
}
.live-gps-wrap {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
}
.live-gps-wrap canvas { display: block; }
.live-dist {
  position: absolute;
  border: none;
  border-radius: 50%;
  color: white;
  font-weight: 600;
}
/* inset:0 overlay, so its buttons would otherwise land on the home
   indicator -- the bar grows by the inset rather than moving the buttons. */
.live-gps-foot {
  flex: 0 0 calc(76px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px env(safe-area-inset-bottom, 0px);
}
.live-gps-foot button {
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  color: white;
}