/* =============================================================================
   COMPONENTS
============================================================================= */

/* Focus rings are drawn on top of neighbouring elements, never clipped. */
.btn:focus-visible,
.chip:focus-visible,
.nav__link:focus-visible,
.footer__nav a:focus-visible,
.skip-link:focus,
.hole-nav__btn:focus-visible,
.stepper__btn:focus-visible,
.tee-chip:focus-visible,
.admin__tab:focus-visible {
  outline: 3px solid var(--gold-ink);
  outline-offset: 2px;
  z-index: 5;
  position: relative;
}
.on-dark .btn:focus-visible,
.hero .btn:focus-visible,
.footer__nav a:focus-visible,
.drawer__link:focus-visible {
  outline-color: var(--gold-2);
}

/* ---- buttons ------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: var(--tap);
  padding: 0.7rem 1.1rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  font-size: var(--t-micro);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-1) var(--ease),
              background var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn[disabled] { opacity: 0.42; pointer-events: none; }

.btn--gold  { --btn-bg: var(--gold); --btn-bd: var(--gold); --btn-fg: var(--ink); }
.btn--gold:hover { --btn-bg: var(--gold-2); --btn-bd: var(--gold-2); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-2); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink); }

/* The drawer belongs in this list: it is a near-black panel, and a ghost
   button left on the light default measured 1.03:1 there -- ink on ink, which
   made the menu's Organiser and Sign out buttons invisible. */
.on-dark .btn--ghost,
.hero .btn--ghost,
.drawer .btn--ghost,
.split__panel .btn--ghost { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, 0.42); }
.on-dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.drawer .btn--ghost:hover,
.split__panel .btn--ghost:hover { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-bd: var(--paper); }

.btn--sm { min-height: 44px; padding: 0.5rem 0.95rem; font-size: var(--t-nano); letter-spacing: 0.12em; }
.btn--block { width: 100%; }
.btn--danger { --btn-bg: transparent; --btn-fg: var(--live); --btn-bd: var(--live); }
.btn--danger:hover { --btn-bg: var(--live); --btn-fg: #fff; }

/* The little arrow that slides on hover */
.btn__arrow { transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---- badges & pills ------------------------------------------------------ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  font-size: var(--t-nano);
  font-weight: 650;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.pill--gold   { border-color: var(--gold); color: var(--gold-ink); background: var(--gold-soft); }
.pill--impala { border-color: var(--impala); color: var(--impala-ink); background: var(--impala-soft); }
.pill--eland  { border-color: var(--eland); color: var(--eland-ink); background: var(--eland-soft); }
.pill--solid-impala { background: var(--impala); border-color: var(--impala); color: var(--club-night); }
.pill--solid-eland  { background: var(--eland);  border-color: var(--eland);  color: #fff; }
.pill--live {
  border-color: var(--live); color: var(--live-ink);
  background: var(--live-soft);
}
.pill--final { border-color: var(--line-2); color: var(--ink-3); }
.on-dark .pill { border-color: var(--line-dark); color: var(--paper); }
.on-dark .pill--gold { color: var(--gold-2); border-color: var(--gold); }

.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}
.dot--pulse { animation: pulse 1.8s var(--ease) infinite; }

/* ---- cards --------------------------------------------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  position: relative;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.card--flat { padding: 0; overflow: hidden; }
.card--dark { background: var(--night-2); border-color: var(--line-dark); color: var(--paper); }
.card--pad-sm { padding: var(--s-4); }
a.card:hover, .card--hover:hover { border-color: var(--ink); transform: translateY(-2px); }

.card__label {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: var(--s-3);
}

/* ---- stat ---------------------------------------------------------------- */
.stat { display: flex; flex-direction: column; gap: 0.15rem; }
.stat__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-d3);
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat__label {
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-4);
}

/* ---- nav ----------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 900;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2), background var(--dur-2);
}
.nav--stuck { border-bottom-color: var(--line); }

.nav__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.brand { display: flex; align-items: center; gap: 0.65rem; min-width: 0; min-height: 44px; }
.brand__text { min-width: 0; }
.brand__name, .brand__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand__logo { width: 34px; height: 34px; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.brand__sub {
  font-size: var(--t-nano);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
  font-weight: 700;
  margin-top: 3px;
}

.nav__links { display: none; gap: 0.9rem; margin-inline: auto; }
.nav__link {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding-inline: 0.45rem;
  position: relative;
  transition: color var(--dur-1);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0.45rem; right: 0.45rem; bottom: 10px;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after, .nav__link[aria-current='page']::after { transform: scaleX(1); }
.nav__link[aria-current='page'] { color: var(--ink); }

.nav__actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; flex: none; }

/* Small phones: tighten the bar rather than let anything spill off the edge. */
@media (max-width: 420px) {
  .nav__inner { gap: var(--s-2); padding-inline: 1rem; }
  .nav__cta { padding-inline: 0.8rem; letter-spacing: 0.08em; }
  .brand { gap: 0.5rem; }
  .brand__name { font-size: 0.9rem; }
  /* The wordmark stays; the strapline is the part that will not fit, and a
     truncated "HARTIES TOUR…" looks like a bug rather than a decision. */
  .brand__sub { display: none; }
}

@media (max-width: 359px) {
  .nav__inner { gap: var(--s-2); padding-inline: 0.9rem; }
  /* The wordmark is dropped rather than truncated to "HACKER…" — the crest
     alone still reads as the brand and still links home. */
  .brand__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .brand__logo { width: 32px; height: 32px; }
  .nav__cta { padding-inline: 0.8rem; letter-spacing: 0.1em; }
}

.nav__burger {
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  margin-right: -0.6rem;
}
.nav__burger span {
  display: block; width: 20px; height: 1.5px; background: var(--ink);
  position: relative;
  transition: transform var(--dur-2) var(--ease), background var(--dur-1);
}
.nav__burger span::before, .nav__burger span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--ink);
  transition: transform var(--dur-2) var(--ease), top var(--dur-2) var(--ease);
}
.nav__burger span::before { top: -6px; }
.nav__burger span::after { top: 6px; }
.nav__burger[aria-expanded='true'] span { background: transparent; }
.nav__burger[aria-expanded='true'] span::before { top: 0; transform: rotate(45deg); }
.nav__burger[aria-expanded='true'] span::after { top: 0; transform: rotate(-45deg); }

@media (min-width: 1060px) {
  .nav__links { display: flex; }
  .nav__burger { display: none; }
}

/* ---- mobile drawer ------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 899;
  background: var(--night);
  color: var(--paper);
  padding: var(--s-6) var(--gutter) var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2);
}
.drawer[data-open='true'] { opacity: 1; visibility: visible; transform: none; }
.drawer__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.drawer__link span { font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--ink-4); font-weight: 700; }
.drawer__link[aria-current='page'] { color: var(--gold-2); }
.drawer__foot { margin-top: auto; padding-top: var(--s-6); display: flex; gap: var(--s-3); }
@media (min-width: 1060px) { .drawer { display: none; } }

/* ---- footer -------------------------------------------------------------- */
.footer { background: var(--night); color: var(--paper); padding-block: var(--s-8) var(--s-5); }
.footer__grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
.footer__nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.1rem 1rem; }
.footer__nav a {
  font-size: var(--t-small);
  color: var(--ink-3);
  transition: color var(--dur-1);
  /* 44px tall so it can actually be tapped */
  display: flex;
  align-items: center;
  min-height: 44px;
}
.footer__nav a:hover, .footer__nav a:focus-visible { color: var(--gold-2); }
.footer__bottom {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: space-between;
  font-size: var(--t-nano);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
@media (min-width: 800px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-8); }
  .footer__nav { grid-template-columns: 1fr; }
}

/* ---- avatar ---------------------------------------------------------------
   Photo when there is one, initials on the team colour when there is not, so
   the layout never shifts as players get round to uploading. */
.avatar {
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-3);
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.avatar--initials {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  background: var(--paper-3);
  line-height: 1;
}
.avatar--impala { border-color: var(--impala); }
.avatar--eland  { border-color: var(--eland); }
.avatar--initials.avatar--impala { background: var(--impala-soft); color: var(--impala-ink); }
.avatar--initials.avatar--eland  { background: var(--eland-soft);  color: var(--eland); }

/* ---- team-filled surfaces ---------------------------------------------------
   The lime Impala surface uses dark ink; Eland's black surface uses white. */
.team-fill { border-color: transparent; }
.team-fill--impala {
  background: var(--impala);
  color: var(--ink);
  --team-rule: rgba(16, 16, 16, 0.22);
  --team-dim: rgba(16, 16, 16, 0.82);
}
.team-fill--eland {
  background: var(--eland);
  color: #fff;
  --team-rule: rgba(255, 255, 255, 0.26);
  --team-dim: rgba(255, 255, 255, 0.86);
}
.team-fill h1, .team-fill h2, .team-fill h3 { color: inherit; }
.team-fill .team-dim { color: var(--team-dim); }
.team-fill .team-rule { border-color: var(--team-rule); }

/* Ghost buttons sitting on a team fill inherit the same foreground. */
.team-fill .btn--ghost {
  --btn-fg: currentColor;
  --btn-bd: var(--team-rule);
}
.team-fill .btn--ghost:hover {
  --btn-bg: currentColor;
  --btn-bd: currentColor;
}
.team-fill--impala .btn--ghost:hover { --btn-fg: var(--impala); }
.team-fill--eland  .btn--ghost:hover { --btn-fg: var(--eland); }

/* ---- team crest ---------------------------------------------------------- */
/* Declaring the intrinsic ratio reserves the space before the image decodes,
   so nothing jumps as the crests load. */
.crest, .trophy__crest, .split__crest { aspect-ratio: 1181 / 1772; }
.crest { width: 100%; height: auto; object-fit: contain; }
.crest--sm { width: 30px; height: auto; }
.crest--md { width: 48px; height: auto; }

/* Preserve Impala's supplied crest colours; Eland stays monochrome to match
   its black team treatment. */
img[src$="/impala-crest.png"] {
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.4));
}
img[src$="/eland-crest.png"] {
  filter: grayscale(1) contrast(1.08) drop-shadow(0 3px 10px rgba(0, 0, 0, 0.4));
}

/* ---- match card ---------------------------------------------------------- */
.match {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  overflow: hidden;
  transition: border-color var(--dur-2), transform var(--dur-2) var(--ease), box-shadow var(--dur-2);
}
.match:hover { border-color: var(--ink-4); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.match--live { border-color: color-mix(in srgb, var(--live) 45%, var(--line)); }
.match--live::before {
  content: '';
  position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--live), transparent);
  animation: sweep 2.6s linear infinite;
}
.match { position: relative; }

.match__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.5rem var(--s-4);
  border-bottom: 1px solid var(--line);
  /* No fill: a hairline is enough to separate the header from the names, and
     the grey bar was competing with the players for attention. */
  background: transparent;
  font-size: var(--t-nano);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-4);
}

.match__body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4);
}

/* -----------------------------------------------------------------------------
   WHO IS WINNING, AS A COLOUR
   Only the side that is up (or has won) is washed, bleeding in from its own
   edge and gone before the middle so the score sits on clean paper. A side
   that is down gets nothing, and a level, halved or unplayed match gets nothing
   at all — so the wash reads as information at a glance down the board rather
   than as decoration on every card.
----------------------------------------------------------------------------- */
.match--lead-a .match__body {
  background-image: linear-gradient(to right, var(--impala-wash) 0%, transparent 44%);
}
.match--lead-b .match__body {
  background-image: linear-gradient(to left, var(--eland-wash) 0%, transparent 44%);
}

/* Narrow phone: the sides are tight, so pull the wash in off the names. */
@media (max-width: 419px) {
  .match--lead-a .match__body {
    background-image: linear-gradient(to right, var(--impala-wash) 0%, transparent 38%);
  }
  .match--lead-b .match__body {
    background-image: linear-gradient(to left, var(--eland-wash) 0%, transparent 38%);
  }
}

/* Asked for less contrast trickery: the result colour and the avatar rings
   still say who is ahead. */
@media (prefers-contrast: more) {
  .match--lead-a .match__body,
  .match--lead-b .match__body { background-image: none; }
}

.match__side { min-width: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.match__side--b { text-align: right; align-items: flex-end; }
.match__seat { display: flex; align-items: center; gap: 0.5rem; min-width: 0; max-width: 100%; }
.match__side--b .match__seat { flex-direction: row-reverse; }

/* Name and playing-handicap ring on one line. On the Eland side the ring sits
   on the inside of the name too, towards the score, so both rings read as a
   pair across the card. The name keeps its ellipsis; the ring never shrinks. */
.match__nameline { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.match__side--b .match__nameline { flex-direction: row-reverse; }
.match__ph {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.3rem;
  border: 1.5px solid var(--ink-3);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* On a phone the name is what gets scanned; a smaller ring leaves it more room. */
@media (max-width: 419px) {
  .match__nameline { gap: 0.15rem 0.3rem; flex-wrap: wrap; }
  .match__ph { min-width: 1.35rem; height: 1.35rem; padding: 0 0.22rem; font-size: 0.64rem; border-width: 1.25px; }
}


/* On a narrow phone the face costs more room than it earns — the name is the
   thing you are scanning for. Rosters and scorecards keep their avatars. */
@media (max-width: 419px) {
  .match__seat > .avatar { display: none; }
  .match__player { font-size: 0.9rem; }
}
.match__player {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.15;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* The dimmed loser only ever sits on plain paper, because a side that is down
   is never washed — so it keeps the lighter grey that makes it read as dimmed. */
.match__player--dim { color: var(--ink-4); }

/* The handicap line CAN sit on the strongest part of a wash, where --ink-4
   measured 3.25:1 on green — below AA. --ink-2 clears AAA on both washes, and
   reads far better on a phone in direct sun, which is where this page is used. */
.match__hcp { font-size: var(--t-nano); color: var(--ink-2); letter-spacing: 0.06em; font-weight: 700; }

/* The one shots line that still shows before a match starts: it is a setup
   error, not information, and the organiser needs to spot it from the board.
   Declared AFTER .match__hcp — same specificity, so order decides. */
.match__hcp--warn { color: var(--live-ink); }

.match__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding-inline: var(--s-2);
  flex: none;
}
.match__result {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.05rem, 3.4vw, 1.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.match__result--impala { color: var(--impala-ink); }
.match__result--eland { color: var(--eland); }
.match__result--as { color: var(--ink-3); }
.match__thru { font-size: var(--t-nano); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-4); font-weight: 600; }

/* The bar under a match showing who is up and by how much. */
.match__bar { height: 3px; background: var(--paper-3); display: flex; }
.match__bar i { display: block; height: 100%; transition: width var(--dur-3) var(--ease-out); }
.match__bar .a { background: var(--impala); }
.match__bar .b { background: var(--eland); margin-left: auto; }

/* ---- tables -------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.table th {
  text-align: left;
  font-size: var(--t-nano);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-4);
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
.table td { padding: 0.62rem 0.7rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--dur-1); }
.table tbody tr:hover { background: var(--paper-2); }
/* Let a dense table scroll sideways inside its .scroll-x rather than wrapping
   names onto two lines. */
.table--nowrap th, .table--nowrap td { white-space: nowrap; }
.table .r { text-align: right; }
.table .c { text-align: center; }
.table__num { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---- scorecard ----------------------------------------------------------- */
.card-table { border-collapse: separate; border-spacing: 0; font-size: var(--t-small); width: 100%; }
.card-table th, .card-table td {
  padding: 0.5rem 0.35rem;
  text-align: center;
  border-bottom: 1px solid var(--line);
  min-width: 2.35rem;
  font-variant-numeric: tabular-nums;
}
.card-table th { font-size: var(--t-nano); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 800; color: var(--ink-4); }
.card-table .lab {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--paper);
  z-index: 2;
  min-width: 7.5rem;
  font-weight: 700;
  font-size: var(--t-nano);
  box-shadow: 1px 0 0 var(--line);
}
.card-table thead .lab { background: var(--paper-2); }
.card-table .tot { background: var(--paper-2); font-weight: 800; }
.card-table tr.par td, .card-table tr.si td { color: var(--ink-3); font-size: var(--t-nano); }
.card-table tr.si td { border-bottom: 1px solid var(--line-2); }

/* Score-relative-to-par markers, the way a real card is annotated. */
.sc { display: inline-grid; place-items: center; width: 1.55rem; height: 1.55rem; font-weight: 700; }
.sc--birdie { border-radius: 50%; border: 1.5px solid var(--live); color: var(--live); }
.sc--eagle  { border-radius: 50%; border: 1.5px solid var(--live); box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 4px var(--live); color: var(--live); }
.sc--bogey  { border: 1.5px solid var(--ink-3); }
.sc--double { border: 1.5px solid var(--ink-3); box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 4px var(--ink-3); }
.sc--ace    { border-radius: 50%; background: var(--gold); color: #fff; border: 1.5px solid var(--gold); }

/* A dot marking a hole where the player gets a shot. */
.shot-dot { position: relative; }
.shot-dot::after {
  content: '';
  position: absolute;
  top: 3px; right: 3px;
  width: 3.5px; height: 3.5px;
  border-radius: 50%;
  background: var(--gold);
}
.shot-dot--2::after { box-shadow: -5px 0 0 var(--gold); }
/* A plus player gives one back on the easiest holes: a hollow ring, so the card
   shows it is a shot going the other way rather than one received. */
.shot-dot--back::after { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gold); }

/* ---- forms --------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field__label {
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink-4);
}
.input, .select {
  width: 100%;
  min-height: var(--tap);
  padding: 0.7rem 0.85rem;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: 1rem;          /* 16px+ stops iOS zooming on focus */
  transition: border-color var(--dur-1), background var(--dur-1);
}
.input:focus, .select:focus { outline: none; border-color: var(--gold); background: #fff; }
.input::placeholder { color: var(--ink-5); }
.input--code {
  text-transform: uppercase;
  letter-spacing: 0.5em;
  font-family: var(--font-mono);
  font-size: 1.4rem;
  text-align: center;
  padding-left: 0.5em;
}
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235E5E51' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.2rem; }

.check { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; min-height: var(--tap); }
.check input { width: 20px; height: 20px; accent-color: var(--gold); }

.note {
  padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--gold);
  background: var(--gold-soft);
  font-size: var(--t-small);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.note--danger { border-color: var(--live); background: var(--live-soft); }
.note--info { border-color: var(--ink-4); background: var(--paper-2); }
/* Not a warning and not an error -- a thing that has not happened yet. */
.note--wait { border-color: var(--ink-3); background: var(--paper-2); }

/* ---- empty / loading ----------------------------------------------------- */
.empty {
  padding: var(--s-7) var(--s-4);
  text-align: center;
  color: var(--ink-4);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
}
.empty__title { font-family: var(--font-display); font-size: var(--t-d3); color: var(--ink-3); text-transform: uppercase; margin-bottom: var(--s-2); }

.skeleton {
  background: linear-gradient(90deg, var(--paper-2) 25%, var(--paper-3) 37%, var(--paper-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: var(--r-sm);
}

/* ---- toast --------------------------------------------------------------- */
.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  transform: translateX(-50%);
  z-index: 9997;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(94vw, 460px);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--night);
  color: var(--paper);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
  padding: 0.8rem 1rem;
  font-size: var(--t-small);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  box-shadow: var(--shadow-3);
  animation: toast-in var(--dur-3) var(--ease-back) both;
}
.toast--error { border-color: var(--live); }
.toast--good { border-color: var(--gold); }
.toast.is-out { animation: toast-out var(--dur-2) var(--ease-in) both; }

/* Who you are signed in as, at the foot of the mobile menu. */
.drawer__who {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: var(--s-3);
}
.drawer__who-label {
  font-size: var(--t-nano);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink-4);
}
.drawer__who strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.015em;
}

/* =============================================================================
   PREMIUM CLUB SYSTEM — shared across every working and editorial route
============================================================================= */
body:not(.home-page) { background: var(--club-stone); }
body:not(.home-page) .page { min-height: calc(100svh - var(--nav-h)); }

:focus-visible { outline-color: var(--club-acid-2); outline-width: 3px; }

.nav {
  background: color-mix(in srgb, var(--club-stone) 91%, transparent);
  border-bottom-color: rgba(16, 20, 15, 0.08);
}
.nav--stuck { background: color-mix(in srgb, var(--club-stone) 96%, transparent); }
.nav__link {
  color: #50564F;
  font-size: 0.84rem;
  letter-spacing: 0;
  text-transform: none;
}
.nav__link::after { height: 2px; background: var(--club-acid-2); }
.brand__sub { color: #4B6120; letter-spacing: 0.13em; }
.brand__logo:not([style]) { filter: hue-rotate(37deg) saturate(1.35); }
.nav__cta {
  --btn-bg: var(--club-night);
  --btn-bd: var(--club-night);
  --btn-fg: #fff;
}
.nav__cta:hover {
  --btn-bg: var(--club-acid);
  --btn-bd: var(--club-acid);
  --btn-fg: var(--club-night);
}
.nav__sound { border-radius: 50% !important; }

.btn {
  border-radius: var(--r-pill);
  font-size: 0.84rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
  padding-inline: 1.15rem;
}
.btn--sm { font-size: 0.79rem; letter-spacing: 0; }
.btn--gold {
  --btn-bg: var(--club-acid);
  --btn-bd: var(--club-acid);
  --btn-fg: var(--club-night);
}
.btn--gold:hover {
  --btn-bg: var(--club-acid-2);
  --btn-bd: var(--club-acid-2);
}
.btn--ghost { --btn-bd: rgba(16, 20, 15, 0.28); }

.pill {
  border-radius: var(--r-pill);
  font-weight: 750;
  letter-spacing: 0.055em;
}
.pill--gold {
  border-color: var(--club-acid-2);
  color: #3E5410;
  background: color-mix(in srgb, var(--club-acid) 22%, transparent);
}
.on-dark .pill--gold { color: var(--club-acid); border-color: var(--club-acid-2); }

.card {
  border-color: rgba(16, 20, 15, 0.10);
  box-shadow: 0 18px 46px -38px rgba(16, 20, 15, 0.55);
}
.card--dark { background: var(--club-night); }
a.card:hover,
.card--hover:hover {
  border-color: rgba(16, 20, 15, 0.36);
  transform: translateY(-3px);
  box-shadow: var(--club-shadow);
}
.card__label {
  color: #596057;
  font-weight: 750;
  letter-spacing: 0.07em;
}

.match {
  border-radius: var(--r-md);
  border-color: rgba(16, 20, 15, 0.1);
  box-shadow: 0 18px 46px -42px rgba(16, 20, 15, .65);
}
.match:hover { border-color: rgba(16,20,15,.28); box-shadow: var(--club-shadow); }
.match__head { padding: 0.75rem 1rem; background: var(--club-stone); }
.match__body { padding: 1.15rem 1rem; }
.match__bar { height: 5px; }

.table th { background: var(--club-stone); color: #5B625A; }
.table th:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.table th:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.table tbody tr:hover { background: color-mix(in srgb, var(--club-acid) 10%, #fff); }
.scroll-x { border-radius: var(--r-md); }
/* No overflow: hidden here. It made the TABLE the scroll container, so the
   sticky name column stuck to a box that never scrolls and slid off with the
   holes. The rounded corners are clipped by the .scroll-x wrapper instead. */
.card-table { background: #fff; border-radius: var(--r-md); }
.card-table thead .lab,
.card-table .tot { background: var(--club-stone); }

.input,
.select {
  min-height: 52px;
  border-color: rgba(16,20,15,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.input:focus,
.select:focus {
  border-color: #789F18;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--club-acid) 27%, transparent);
}
.field__label { color: #555C54; letter-spacing: 0.08em; }
.check input { accent-color: #759F0B; }

.note {
  border: 0;
  border-left: 4px solid var(--club-acid-2);
  background: color-mix(in srgb, var(--club-acid) 16%, #fff);
  border-radius: var(--r-sm);
}
.note--danger { border-left-color: var(--live); background: var(--live-soft); }
.note--info { border-left-color: #6E756D; background: var(--paper-2); }
.note--wait { border-left-color: #6E756D; background: var(--paper-2); }
.empty { background: rgba(255,255,255,.58); border-radius: var(--r-md); }
.empty__title { text-transform: none; }

.footer { background: var(--club-night); }
.footer .brand__sub { color: var(--club-acid); }
.footer__nav a:hover,
.footer__nav a:focus-visible { color: var(--club-acid); }
.drawer { background: var(--club-night); }
.drawer__link {
  padding-block: clamp(.8rem, 3vh, 1.25rem);
  font-size: clamp(1.9rem, 9vw, 4rem);
  line-height: .9;
  text-transform: none;
  letter-spacing: -0.055em;
  border-bottom-color: rgba(255,255,255,.13);
}
.drawer__link span { color: var(--club-acid); letter-spacing: .08em; }
.drawer__link[aria-current='page'] { color: var(--club-acid); }
.drawer__foot { border-top: 1px solid rgba(255,255,255,.13); }
.drawer__who-label { color: rgba(255,255,255,.6); }
.drawer__who strong { text-transform: none; letter-spacing: -.03em; }
.toast { border-radius: 16px; }
.toast--good { border-color: var(--club-acid); }

dialog {
  border: 0 !important;
  border-radius: var(--club-radius) !important;
  box-shadow: 0 35px 100px -35px rgba(0,0,0,.68);
}
dialog::backdrop {
  background: rgba(16,20,15,.72);
  backdrop-filter: blur(7px);
}

.sc--ace { color: var(--club-night); }


/* -----------------------------------------------------------------------------
   PHOTO CROPPER
   The frame is square; the ring is what makes it read as the circle the avatar
   will actually be. The canvas underneath stays square so the corners of the
   image are still visible while you drag -- you can see what you are about to
   lose, which is the whole point of cropping by hand.
-------------------------------------------------------------------------------*/
.cropper { max-width: min(92vw, 340px); }
.cropper__frame {
  position: relative;
  margin: 0 auto;
  border-radius: var(--r-md, 14px);
  overflow: hidden;
  background: #111;
  touch-action: none;              /* we handle the drag ourselves */
}
.cropper__canvas {
  display: block;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
}
.cropper__canvas:active { cursor: grabbing; }
.cropper__canvas:focus-visible { outline: 2px solid var(--club-acid, #DFFF91); outline-offset: -2px; }

/* A circle cut out of a dimming layer: everything outside the avatar is knocked
   back, and a hairline marks the edge. box-shadow does the masking so there is
   no second element to keep in sync. */
.cropper__ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(12, 14, 11, .55);
  border: 1px solid rgba(255, 255, 255, .85);
}
.cropper__zoom {
  display: block;
  width: 100%;
  margin: var(--s-4) 0 0;
  accent-color: var(--club-night, #1b1f18);
}

/* An icon-only button: square, so the 44px touch target does not stretch the
   row it sits in. */
.btn--icon {
  padding: 0;
  width: 38px;
  min-width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Team, shown rather than editable. The dot carries the colour so the word is
   not the only thing distinguishing them -- team colour alone would fail for
   anyone who cannot separate the two. */
.teamdot { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.teamdot::before {
  content: '';
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--ink-4);
  flex: none;
}
.teamdot--impala::before { background: var(--impala); }
.teamdot--eland::before { background: var(--eland); }

/* -----------------------------------------------------------------------------
   DISTANCE TO THE GREEN
   Sits under the hole number on the scoring page. Quiet until it is asked, and
   it says when the fix is too loose to trust rather than showing a confident
   number it has not earned.
-------------------------------------------------------------------------------*/
.gps {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .3rem;
  padding: .22rem .6rem;
  min-height: 32px;
  font: inherit;
  font-size: var(--t-nano);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.gps::before {
  content: '';
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--ink-4);
  flex: none;
}
.gps:hover { color: var(--ink); }
.gps--on { color: var(--ink); border-color: var(--club-night); }
.gps--on::before { background: var(--club-acid); animation: gps-pulse 1.6s ease-in-out infinite; }
/* A loose fix gets a different dot rather than a hidden number: you can still
   read it, you just know not to trust it to the metre. */
.gps--rough::before { background: var(--live); animation: none; }
.gps__read { text-transform: none; letter-spacing: 0; font-weight: 650; }

@keyframes gps-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .gps--on::before { animation: none; } }
/* The link to the 3D hole guide wears the Distance button's clothes, beside it. */
.gps--guide { text-decoration: none; margin-left: .35rem; }
.gps--guide::before { background: var(--club-acid); }

/* I wrote this for the dark scoring panel and scoped it to the ROUTE, but the
   button lives in the hole navigation bar, which is light. The result was white
   text on an off-white bar: 1.11:1, which is not low contrast, it is invisible.
   The default colours were already right for where it actually sits, so the
   whole override goes. If it ever moves onto the dark panel, scope it to that
   panel and not to the page. */
.gps--on { color: var(--ink); border-color: var(--club-night); }

/* -----------------------------------------------------------------------------
   HANDICAP CONNECTION
   Sits at the top of a player's own page. Green when his index is being pulled,
   amber when it is not -- and the amber one has to be readable, because it is
   the only place he will ever be told to go and accept a friend request.
   Colour is never the only signal: the words say which state it is.
-------------------------------------------------------------------------------*/
.hna {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: var(--s-4);
  border-radius: var(--club-radius);
  border: 1px solid var(--line);
  background: var(--paper);
  margin-bottom: var(--s-4);
  font-size: .9rem;
}
.hna__title { display: block; margin-bottom: .15rem; }
.hna__detail { color: var(--ink-3); font-size: .84rem; line-height: 1.45; }
.hna__dot {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  flex: none;
  margin-top: .35rem;
}
.hna--on { border-color: color-mix(in srgb, var(--club-acid) 55%, var(--line)); }
.hna--on .hna__dot { background: var(--club-acid); }
.hna--off { border-color: var(--live); background: color-mix(in srgb, var(--live) 5%, var(--paper)); }
.hna--off .hna__dot { background: var(--live); }

/* Reuses the team dot, because it is the same idea: a colour that is never the
   only signal -- the word next to it says which state it is. */
.teamdot--linked::before { background: var(--club-acid); }
.teamdot--unlinked::before { background: var(--live); }
.teamdot--unlinked { color: var(--live-ink, var(--ink)); }

/* Neither connected nor broken: nobody has looked yet. Grey on purpose -- an
   amber warning for a question that has not been asked sends people chasing
   a problem that may not exist. */
.hna:not(.hna--on):not(.hna--off) .hna__dot { background: var(--ink-4); }

/* -----------------------------------------------------------------------------
   ADD TO HOME SCREEN — the iOS instructions
   Android gets a system dialog; iOS gets this, because Apple has never shipped
   an install API and the only route is the Share menu, by hand.
-------------------------------------------------------------------------------*/
.ios-add { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.ios-add__step {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: .7rem;
  align-items: start;
  font-size: .92rem;
  line-height: 1.5;
}
.ios-add__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--club-night);
  color: var(--paper);
  font-size: .78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* The share glyph sits in the sentence, so it has to sit on the text baseline
   rather than hang off it. */
.ios-add__icon {
  display: inline-flex;
  vertical-align: -.18em;
  margin: 0 .1rem;
  color: var(--ink);
}

/* ============================ CONSOLE FORMS ===============================
   The super organiser's two set-up forms: a new course, and a new event. Both
   are long enough to need real structure and rare enough to live behind a
   disclosure rather than take up the top of the tab every day.
========================================================================== */
.field__hint {
  font-size: var(--t-nano);
  line-height: 1.45;
  color: var(--ink-4);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* Fields flow as wide as they need and wrap; a fixed column count either
   squeezes "Course rating" or strands "Par" on a line of its own. */
.formgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-4);
}

/* One tee: name, rating, slope, par, who — and the button to take it away.
   The numbers are narrow on purpose so four of them fit a laptop line. */
.teerow {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) repeat(3, minmax(72px, .8fr)) minmax(96px, 1fr) auto;
  gap: var(--s-3);
  align-items: end;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.teerow > .btn { min-height: 44px; }
@media (max-width: 720px) {
  .teerow { grid-template-columns: 1fr 1fr; }
  .teerow > .btn { grid-column: 2; justify-self: end; }
}

/* Twenty-eight names. A list is a scroll; a grid of tick boxes is a glance. */
.pickgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0 var(--s-4);
  margin-top: var(--s-2);
}
.pick {
  display: flex; align-items: center; gap: .55rem;
  min-height: var(--tap);
  cursor: pointer;
  font-size: var(--t-small);
}
.pick input { width: 18px; height: 18px; accent-color: var(--gold); flex: none; }

.setupcard > summary {
  cursor: pointer;
  list-style: none;
  min-height: var(--tap);
  display: flex; align-items: center; gap: .5rem;
}
.setupcard > summary::-webkit-details-marker { display: none; }
/* A disclosure has to look like one, and a chevron that turns is the only
   affordance anybody reads without being told. */
.setupcard > summary::before {
  content: '';
  width: .5rem; height: .5rem;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(-45deg);
  transition: transform var(--dur-2) var(--ease-out);
}
.setupcard[open] > summary::before { transform: rotate(45deg); }

.privaterow {
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.privaterow:last-child { border-bottom: 0; padding-bottom: 0; }

/* ======================= THE MATCH, BEFORE THE DAY ========================
   The scoring page with the scoring taken out: two sides, their handicaps and
   the shots between them. Side by side on a laptop, stacked on a phone, with
   the v between them either way.
========================================================================== */
.preview {
  margin-top: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  overflow: hidden;
}
.preview__tee {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.preview__teelabel {
  font-size: var(--t-nano); font-weight: 800;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-4);
}
.preview__teetime {
  font-family: var(--font-display); font-weight: 900; font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.preview__sides { display: grid; grid-template-columns: 1fr; }
.preview__side { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.preview__team {
  font-size: var(--t-nano); font-weight: 800;
  letter-spacing: var(--track-label); text-transform: uppercase;
}
.preview__side--impala .preview__team { color: var(--impala-ink); }
.preview__side--eland .preview__team { color: var(--eland-ink); }

.preview__man { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.preview__name {
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  letter-spacing: -0.02em; line-height: 1.15;
  overflow-wrap: break-word;
}
.preview__hcp {
  margin-top: 2px;
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4);
}

/* The divider is a rule on a phone and a letter between two columns on a
   laptop, because "v" stacked above a name reads as part of the name. */
.preview__v {
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--s-3) var(--s-3);
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-4);
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
}
@media (min-width: 720px) {
  .preview__sides { grid-template-columns: 1fr auto 1fr; align-items: stretch; }
  .preview__v { border-top: 0; border-inline: 1px solid var(--line); padding-block: var(--s-4); }
  .preview__side--eland { text-align: right; }
  .preview__side--eland .preview__man { flex-direction: row-reverse; }
}

/* ---- ScoreCapture picker ------------------------------------------------- */
/* Search results are whole rows you tap, not links: the course name reads
   first, the town after it, and a course already on the site says so. */
.sclist { display: grid; gap: 4px; margin-top: var(--s-3); }
.sclist__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: var(--tap); padding: .45rem .75rem;
  text-align: left; font: inherit; font-size: var(--t-small); color: inherit;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer;
}
.sclist__row:hover, .sclist__row:focus-visible { background: var(--paper-2); border-color: var(--line-2); }
/* A number that would change if the course were brought up to date. */
.sc-diff { background: var(--gold-soft); font-weight: 700; }

/* A result held back on singles day: not a live match, not a finished one. */
.pill--pending { border-style: dashed; color: var(--ink-3); }