/* =============================================================================
   WHAT THE MOCKUP STYLESHEETS DO NOT COVER
   -----------------------------------------------------------------------------
   The club pages are styled by the mockup's own stylesheets -- club/styles.css,
   club/club.css, club/results.css -- used exactly as they were written. This
   file is only for the few things the drawings do not have, because the site
   has data they did not: thirty-five players across nine months, and a round's
   full field with every card in it.

   Everything here is scoped to .results-page, the class results.css hangs its
   light surface off, so none of it can reach another page. An earlier version
   of this file held a whole hand-written skin; that is gone, because it was
   fighting the real stylesheets for control of the body background and
   winning, which is exactly the bug it caused.
============================================================================= */

/* =============================================================================
   THE SEASON TABLE ON THE ARCHIVE PAGE
   -----------------------------------------------------------------------------
   The drawing's archive is only the rounds; its season table lives behind a
   dialog. On /merit the table IS the page, so it sits under the rounds in the
   archive's own light surface rather than behind a tap.

   Everything here is scoped to .results-page, which is the class results.css
   hangs its surface off, so none of it can reach another page.
============================================================================= */
.results-page .archive-standings { margin-top: 3rem; }
.results-page .archive-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(43, 76, 40, 0.14);
  border-radius: 22px;
  background: #fbfdf4;
  box-shadow: 0 16px 40px rgba(16, 40, 24, 0.07);
  -webkit-overflow-scrolling: touch;
}
.results-page .archive-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  color: #173e2b;
}
.results-page .archive-table th {
  position: sticky;
  top: 0;
  padding: 0.7rem 0.6rem;
  text-align: left;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #53664e;
  background: #f4f7ec;
  border-bottom: 1px solid rgba(43, 76, 40, 0.16);
  white-space: nowrap;
}
.results-page .archive-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid rgba(43, 76, 40, 0.08);
  white-space: nowrap;
}
.results-page .archive-table tr:last-child td { border-bottom: 0; }
.results-page .archive-table .num { text-align: right; }
.results-page .archive-pos { color: #4e6349; font-weight: 700; }
.results-page .archive-who { display: flex; align-items: center; gap: 0.5rem; }
.results-page .archive-who span { font-weight: 600; }
.results-page .archive-total { font-weight: 750; }
.results-page .archive-ave { color: #607258; }
.results-page .archive-dropped { color: #9aa894; text-decoration: line-through; }
.results-page .archive-absent { color: #b6c0ad; }
.results-page .archive-month { font-size: 0.56rem; }

/* The podium, marked on the row rather than by colouring three numerals. */
.results-page .archive-table tr[data-rank] td:first-child { position: relative; }
.results-page .archive-table tr[data-rank] td:first-child::before {
  content: '';
  position: absolute;
  inset: 14% auto 14% 0;
  width: 3px;
  border-radius: 3px;
  background: #c8d6bb;
}
.results-page .archive-table tr[data-rank='1'] td:first-child::before { background: #7fb519; }
.results-page .archive-table tr[data-rank='2'] td:first-child::before { background: #9aa894; }
.results-page .archive-table tr[data-rank='3'] td:first-child::before { background: #c08a4e; }

/* His own row, in lime, wherever it falls -- the first thing anybody does with
   a thirty-five row table is hunt for his own name. */
.results-page .archive-table tr.member-row td {
  background: #c4ff32;
  color: #173b23;
  font-weight: 650;
}
.results-page .archive-table tr.member-row .archive-dropped,
.results-page .archive-table tr.member-row .archive-absent { color: #44663e; }
.results-page .archive-table tr.member-row .avatar--initials {
  background: #21492a;
  color: #c4ff32;
  border-color: #21492a;
}
.results-page .you-label {
  padding: 0.05rem 0.3rem;
  border-radius: 5px;
  background: #21492a;
  color: #c4ff32;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.results-page .archive-table-note {
  margin: 0.9rem 0 0;
  font-size: 0.72rem;
  line-height: 1.6;
  color: #5c6f57;
}

/* The year bar is a row of links here rather than buttons, because each year
   is its own address and should be openable in a new tab. */
.results-page .archive-years a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1.15rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #3c5a40;
}
.results-page .archive-years a[aria-pressed='true'] { background: #113824; color: #fff; }
.results-page .archive-years a:hover { color: #11341f; }
.results-page .archive-years a[aria-pressed='true']:hover { color: #fff; }

/* =============================================================================
   ONE MONTH, ON THE ARCHIVE SURFACE
   -----------------------------------------------------------------------------
   A round opened from an archive card should not look like a different
   website from the card. These are the pieces the drawings do not have: a
   field of thirty-five, and a card that folds out into eighteen holes.
============================================================================= */
.results-page .round-head { padding-block: 2rem 1.5rem; }
.results-page .round-head h1 {
  margin: 0.4rem 0 0.6rem;
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  font-weight: 750;
  letter-spacing: -0.05em;
  line-height: 1.02;
  color: #113824;
}
.results-page .round-head .results-period { color: #7fb519; }

.results-page .round-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(43, 76, 40, 0.14);
}
.results-page .round-fact { display: grid; gap: 0.15rem; }
.results-page .round-fact .tiny { font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: #6c7f66; }
.results-page .round-fact strong { font-size: 0.95rem; color: #173e2b; }

/* ---- the day's honours --------------------------------------------------- */
.results-page .round-honours {
  display: grid;
  gap: 1.3rem;
  margin-top: 2rem;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid rgba(43, 76, 40, 0.14);
  border-radius: 22px;
  background: #fbfdf4;
  box-shadow: 0 16px 40px rgba(16, 40, 24, 0.07);
}
.results-page .round-honours__win { display: flex; align-items: center; gap: 1rem; }
.results-page .round-honours__name {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: #113824;
}
.results-page .round-honours__rest {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(43, 76, 40, 0.12);
}
.results-page .club-honour { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.results-page .club-honour__text { display: grid; gap: 0.05rem; min-width: 0; }
.results-page .club-honour__text .tiny { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6c7f66; }
.results-page .club-honour__text strong { font-size: 0.9rem; color: #173e2b; }

/* ---- the field ----------------------------------------------------------- */
.results-page .field-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.results-page .field-row {
  border: 1px solid rgba(43, 76, 40, 0.13);
  border-radius: 16px;
  background: #fbfdf4;
  overflow: hidden;
}
.results-page .field-row__head {
  display: grid;
  grid-template-columns: 2.6rem auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0.95rem;
}
.results-page .field-row__pos { font-weight: 800; color: #4e6349; font-variant-numeric: tabular-nums; }
.results-page .field-row__who { display: grid; gap: 0.05rem; min-width: 0; }
.results-page .field-row__who strong { display: flex; align-items: center; gap: 0.45rem; color: #173e2b; }
.results-page .field-row__who .muted { font-size: 0.68rem; color: #6c7f66; text-transform: uppercase; letter-spacing: 0.04em; }
.results-page .field-row__pts { display: flex; align-items: baseline; gap: 0.3rem; }
.results-page .field-row__pts strong {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: #113824;
}
.results-page .field-row__pts .muted { font-size: 0.6rem; text-transform: uppercase; color: #6c7f66; }
.results-page .field-row[data-me='true'] {
  background: #c4ff32;
  border-color: #aee52a;
}
.results-page .field-row[data-me='true'] .muted,
.results-page .field-row[data-me='true'] .field-row__pos { color: #3d5c30; }
.results-page .field-row .pill {
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  background: #e4edd6;
  color: #46603c;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The fold-out card. The whole head is the control, so the disclosure
   triangle next to a 40px face would be clutter. */
.results-page .field-row__fold > summary { cursor: pointer; list-style: none; }
.results-page .field-row__fold > summary::-webkit-details-marker { display: none; }
.results-page .field-row__fold > summary:hover { background: #f1f6e6; }
.results-page .field-row__fold[open] > summary { border-bottom: 1px solid rgba(43, 76, 40, 0.12); }
.results-page .field-card { display: grid; gap: 1rem; padding: 1rem 0.95rem; overflow-x: auto; }
.results-page .field-card__nine { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.78rem; }
.results-page .field-card__nine th,
.results-page .field-card__nine td { padding: 0.3rem 0.35rem; text-align: center; }
.results-page .field-card__nine .lab { text-align: left; white-space: nowrap; color: #6c7f66; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.results-page .field-card__pts td { font-weight: 750; }
.results-page .field-card td[data-score='birdie'],
.results-page .field-card td[data-score='eagle'],
.results-page .field-card td[data-score='albatross'],
.results-page .field-card td[data-score='ace'] {
  background: #dcff9b;
  border-radius: 6px;
  font-weight: 800;
}

.results-page .field-away { margin-top: 1.8rem; }
.results-page .field-away > summary { cursor: pointer; font-weight: 700; font-size: 0.86rem; color: #3c5a40; }
.results-page .field-away__list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem;
}
.results-page .field-away__list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; color: #45604a; }
.results-page .field-away .tiny { color: #6c7f66; }

@media (max-width: 560px) {
  .results-page .field-row__head { grid-template-columns: 2rem auto minmax(0, 1fr) auto; gap: 0.6rem; padding-inline: 0.7rem; }
  .results-page .field-row__pts strong { font-size: 1.1rem; }
}