:root {
  --green: #1b5e3f;
  --green-dark: #123f2c;
  --ink: #16211c;
  /* #5a6962 on --bg #f6f8f7 is ~5.42:1, meeting WCAG AA (4.5:1) for small
     text — this is read outdoors in sunlight, so headroom above the 4.5
     minimum is deliberate. */
  --muted: #5a6962;
  --line: #d8e2dc;
  --bg: #f6f8f7;
  --card: #ffffff;
  --under: #b02a2a;
  --over: #2b4a8f;
  --warn: #b26a00;
  --tap: 46px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.topbar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 1rem;
  background: var(--green); color: #fff;
}
.topbar .brand { font-weight: 700; letter-spacing: .04em; text-decoration: none; color: #fff; }
.topbar nav { display: flex; gap: .25rem; margin-left: auto; }
.topbar nav a {
  color: #dff0e7; text-decoration: none; padding: .5rem .7rem; border-radius: 6px;
  min-height: var(--tap); display: flex; align-items: center;
}
.topbar nav a:hover { background: var(--green-dark); color: #fff; }

main { max-width: 60rem; margin: 0 auto; padding: 1rem 1rem 4rem; }
h1 { font-size: 1.4rem; margin: .8rem 0 .2rem; }
h2 { font-size: 1.1rem; margin: 1.6rem 0 .4rem; }
.sub, .legend { color: var(--muted); font-size: .85rem; margin: .2rem 0 1rem; }

/* --- leaderboard --- */
table.board { width: 100%; border-collapse: collapse; background: var(--card); }
table.board th, table.board td {
  padding: .55rem .5rem; border-bottom: 1px solid var(--line); text-align: left;
}
table.board thead th {
  font-size: .7rem; letter-spacing: .08em; color: var(--muted);
  background: #eef3f0; border-bottom: 2px solid var(--line);
}
.num { text-align: right; font-variant-numeric: tabular-nums; }
table.board td.team { overflow-wrap: anywhere; }
.pos { width: 3.2rem; color: var(--muted); }
.under { color: var(--under); font-weight: 700; }
.over { color: var(--over); }

button.expand {
  background: none; border: 0; padding: .3rem 0; font: inherit; font-weight: 600;
  color: var(--ink); cursor: pointer; text-align: left;
  min-height: var(--tap); display: flex; align-items: center; gap: .4rem;
  min-width: 0; overflow-wrap: anywhere;
}
.chevron { display: inline-block; transition: transform .12s; color: var(--muted); }
button.expand[aria-expanded="true"] .chevron { transform: rotate(90deg); }

.detail-row > td { background: #eef3f0; padding: .5rem; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.card { border-collapse: collapse; font-size: .8rem; background: var(--card); }
table.card th, table.card td {
  border: 1px solid var(--line); padding: .28rem .4rem; white-space: nowrap;
}
table.card .rowhead { text-align: left; font-weight: 600; position: sticky; left: 0; background: var(--card); }
table.card .parline td, table.card .parline th { color: var(--muted); font-size: .72rem; }
table.card .teamline td, table.card .teamline th { font-weight: 700; background: #f2f7f4; }
table.card .counted { font-weight: 700; background: #e6f2ea; }
.net { display: inline-block; margin-left: .25rem; font-size: .7rem; color: var(--muted); }
.counted .net { color: var(--green); }
.hcp { color: var(--muted); font-weight: 400; font-size: .72rem; }

/* --- score entry --- */
.team-list { list-style: none; padding: 0; display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.team-list a {
  display: flex; align-items: center; justify-content: center;
  min-height: 3.4rem; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 600;
}
.hole-head {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  background: var(--green); color: #fff; padding: .7rem .9rem; border-radius: 10px;
}
.hole-head .hole-no { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.hole-head .meta { color: #cfe6da; font-size: .85rem; }
.player-card {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: .6rem .7rem; margin: .6rem 0;
}
.player-card .who { flex: 1 1 8rem; font-weight: 600; }
.player-card .strokes { color: var(--warn); font-size: .78rem; font-weight: 600; }
.stepper { display: flex; align-items: stretch; gap: .35rem; }
.stepper button {
  width: var(--tap); min-height: var(--tap); font-size: 1.4rem; font-weight: 700;
  border: 1px solid var(--line); background: #eef3f0; border-radius: 8px;
  cursor: pointer; color: var(--ink);
  /* Tapping - or + quickly reads as a double-tap, which mobile browsers turn
     into zoom-to-element. `manipulation` opts these buttons out of double-tap
     and pinch gestures while leaving the rest of the page zoomable, so a
     scorekeeper thumbing through four scores never fights the viewport. */
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.stepper button:active { background: var(--line); }
.stepper input {
  touch-action: manipulation;
  width: 3.6rem; min-height: var(--tap); text-align: center; font-size: 1.25rem;
  font-variant-numeric: tabular-nums; border: 1px solid var(--line); border-radius: 8px;
}
.nav-row { display: flex; gap: .5rem; align-items: center; margin: 1rem 0; }
.nav-row a, button.primary, .btn {
  min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center;
  padding: 0 1rem; border-radius: 8px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); text-decoration: none; font: inherit;
  cursor: pointer;
}
button.primary { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }
button.primary:disabled { opacity: .6; }
.nav-row .spacer { flex: 1; }
.hole-strip { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: 1rem; }
.hole-strip a {
  width: var(--tap); min-height: var(--tap); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-decoration: none;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  font-size: .75rem; color: var(--muted);
}
.hole-strip a.here { outline: 2px solid var(--green); font-weight: 700; color: var(--ink); }
.hole-strip a .mark { font-size: .8rem; }
.hole-strip a.complete .mark { color: var(--green); }
.hole-strip a.partial .mark { color: var(--warn); }
.saved { color: var(--green); font-weight: 600; font-size: .85rem; }

/* --- admin --- */
.flash { padding: .6rem .8rem; border-radius: 8px; margin: .8rem 0; font-size: .9rem; }
.flash.ok { background: #e6f2ea; color: var(--green-dark); }
.flash.err { background: #fbe9e9; color: var(--under); }
form.stack { display: grid; gap: .6rem; max-width: 26rem; }
label { display: grid; gap: .2rem; font-size: .85rem; color: var(--muted); }
input[type="text"], input[type="number"], input[type="password"], select {
  min-height: var(--tap); padding: .3rem .5rem; font: inherit;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
}
table.admin-grid { border-collapse: collapse; width: 100%; background: var(--card); }
table.admin-grid th, table.admin-grid td {
  border: 1px solid var(--line); padding: .35rem .45rem; text-align: left;
}
table.admin-grid thead th { background: #eef3f0; font-size: .75rem; color: var(--muted); }
table.admin-grid input[type="number"] { width: 4.2rem; min-height: var(--tap); }
table.admin-grid .inline-form { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.danger { color: var(--under); background: none; border: 0; font: inherit;
  cursor: pointer; text-decoration: underline; min-height: var(--tap); }

@media (max-width: 30rem) {
  main { padding: .75rem .6rem 4rem; }
  table.board th, table.board td { padding: .5rem .35rem; }
  .pos { width: 2.6rem; }
}