/* Carried over from reference/golf360_phase1_screens.html. Removed: the design-review nav and
   step arrows, and styles for cut features (settings sheet, handedness toggle, cookie banner,
   toggle pills). Additions for real-data states are grouped at the bottom. */

:root {
  --page-bg: #F4F6F8;
  --page-text: #050606;
  --page-muted: #6B7A8F;
  --card-bg: #FFFFFF;
  --card-border: #E2E6EA;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page-bg: #14171A;
    --page-text: #F2F4F6;
    --page-muted: #9AA5B1;
    --card-bg: #1D2226;
    --card-border: #2C3238;
  }
}
:root[data-theme="dark"] {
  --page-bg: #14171A;
  --page-text: #F2F4F6;
  --page-muted: #9AA5B1;
  --card-bg: #1D2226;
  --card-border: #2C3238;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--page-text);
  font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif;
  padding: 24px 16px 64px;
}

.stage {
  max-width: 380px;
  margin: 0 auto;
  position: relative;
}
.phone {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 28px;
  padding: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}
.phone-inner {
  border-radius: 20px;
  overflow: hidden;
  min-height: 700px;
  height: 700px;
}
.screen { display: none; }
.screen.active { display: block; height: 100%; animation: screenIn 240ms ease-out; }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- shared screen-content styles (fixed product-design colours, not theme-reactive) ---- */
.sc-light { background: #FFFFFF; padding: 20px 18px; min-height: 700px; height: 100%; display: flex; flex-direction: column; font-family: Calibri, Carlito, Arial, sans-serif; position: relative; }
.sc-dark  { background: #0d0f0f; padding: 20px 18px; min-height: 700px; height: 100%; display: flex; flex-direction: column; font-family: Calibri, Carlito, Arial, sans-serif; position: relative; }
.sc-content {
  flex: 1 1 auto; overflow-y: auto; min-height: 0;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge/IE */
}
.sc-content::-webkit-scrollbar { display: none; /* Chrome, Safari, modern Edge */ }
.sc-footer { flex-shrink: 0; padding-top: 14px; }
/* For footers whose last item is a button, which would otherwise sit flush on the bottom edge (and under the iPhone home bar,
   since the page uses viewport-fit=cover). At least 16px, or the device's safe area if that's bigger; the plain 16px line
   is for browsers that don't understand max()/env() */
.sc-footer.safe-bottom { padding-bottom: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }

/* ---- Hero welcome screen: full-bleed photo with a dark scrim panel holding the actions ---- */
.sc-hero { height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.hero-backdrop { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero-content { position: relative; z-index: 1; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
/* No side padding, so the Welcome buttons span the same width as the flow screens' footer buttons (whose footer has none either) */
.hero-scrim { position: relative; z-index: 1; flex-shrink: 0; background: rgba(5,6,6,0.72); padding: 24px 0 20px; }
/* Same box as .btn-primary, so the two Welcome buttons match. The outline is an inset shadow rather than a border,
   because browsers round border widths to device pixels, which would make this button a fraction taller or shorter */
.btn-secondary-hero { display: block; width: 97%; margin: 10px auto 0; background: transparent; color: #fff; border: none; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.8); border-radius: calc(12px * 0.97); padding: calc(16px * 0.97); font-size: calc(16px * 0.97); font-weight: 700; cursor: pointer; transition: opacity 100ms ease; font-family: Calibri, Arial, sans-serif; }
.btn-secondary-hero:active { opacity: 0.9; }
/* Welcome, iOS Safari only: "Add to Home Screen" instructions, the same width as the buttons below */
.install-note { display: flex; align-items: flex-start; gap: 8px; width: 97%; box-sizing: border-box; margin: 0 auto 14px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.12); color: #F4F6F8; font-size: 13px; line-height: 1.4; font-family: Calibri, Arial, sans-serif; }
.install-note span { flex: 1; }
.install-note .share-icon { width: 16px; height: 16px; vertical-align: -3px; }
.install-note-close { background: none; border: none; color: #F4F6F8; font-size: 15px; line-height: 1; padding: 0 2px; cursor: pointer; }
.sc-title { font-family: Poppins, Arial, sans-serif; font-weight: 700; font-size: 19px; color: #050606; margin: 0 0 6px; }
.sc-title.on-dark { color: #fff; }
.sc-sub { font-size: 14px; color: #6B7A8F; margin: 0 0 22px; }
.sc-sub.on-dark { color: #9a9a9a; }

/* Sized at 97% of the prototype's button (its old pressed size), using real dimensions rather than a transform so it doesn't change size when pressed */
.btn-primary { display: block; width: 97%; margin-left: auto; margin-right: auto; background: #B01D23; color: #fff; border: none; border-radius: calc(12px * 0.97); padding: calc(16px * 0.97); font-size: calc(16px * 0.97); font-weight: 700; font-family: Calibri, Arial, sans-serif; cursor: pointer; transition: opacity 100ms ease; }
.btn-primary:active { opacity: 0.9; }
.btn-secondary { width: 100%; background: transparent; color: #B01D23; border: 1.5px solid #B01D23; border-radius: 12px; padding: 15px; font-size: 16px; font-weight: 700; cursor: pointer; margin-top: 12px; transition: transform 100ms ease; }
.btn-secondary:active { transform: scale(0.97); }
/* Destructive actions. Red is this app's ordinary button colour, not a warning, so danger is set apart by a
   graver shade than the brand's and by filling the step that actually commits - being red would say nothing. */
.btn-danger { width: 100%; background: transparent; color: #7A1418; border: 1.5px solid #7A1418; border-radius: 12px; padding: 15px; font-size: 16px; font-weight: 700; cursor: pointer; margin-top: 12px; transition: transform 100ms ease; }
.btn-danger:active { transform: scale(0.97); }
.btn-danger.commit { background: #7A1418; color: #fff; }
.danger-note { background: #FDECEA; border-left: 3px solid #7A1418; border-radius: 8px; padding: 10px 12px; margin: 12px 0 0; font-size: 13px; line-height: 1.4; color: #050606; }
.btn-link { display: block; text-align: center; color: #6B7A8F; font-size: 15px; margin-top: 20px; text-decoration: underline; cursor: pointer; }

.field { margin-bottom: 18px; }
/* Two fields side by side, e.g. Gender and WHS Index */
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; min-width: 0; }
/* Where step: the optional "Help complete this course's data" prompt and form under a tee picker */
.data-help { background: #F4F6F8; border: 1px solid #E2E6EA; border-radius: 12px; padding: 14px; margin: 2px 0 10px; }
.data-help-title { font-size: 15px; font-weight: 700; color: #050606; }
.data-help-text { font-size: 13px; line-height: 1.4; color: #6B7A8F; margin: 4px 0 12px; }
.data-help .btn-secondary { margin-top: 0; }
.data-help .field input { background: #FFFFFF; }
.si-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.data-help .field .si-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; font-size: 11px; text-transform: none; letter-spacing: 0; color: #6B7A8F; }
.data-help .field .si-cell input { box-sizing: border-box; height: 40px; padding: 0; text-align: center; }
.data-help .field input[type="file"] { padding: 10px; font-size: 14px; }
.data-help-done { background: #E3F4EA; color: #1D7A45; border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.4; margin: 2px 0 10px; }
/* Who step: the add-player form, shown under the player list once "+ Add player" is tapped */
.add-player-form { background: #F4F6F8; border: 1px solid #E2E6EA; border-radius: 12px; padding: 14px 14px 16px; margin-top: 12px; }
.field label { display: block; font-size: 12px; color: #6B7A8F; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; }
.field input, .field select {
  width: 100%; padding: 13px 14px; border-radius: 10px; border: 1px solid #C7CDD3;
  font-size: 16px; font-family: Calibri, Arial, sans-serif; background: #F4F6F8; color: #050606;
}
/* Date and time: the resting box uses the same tile style as every other field. Background, border,
   radius, padding and font all come from ".field input" above, and tapping still opens the browser's
   own picker. These rules stop native styling from changing the box itself:
   - the width is pinned to the container (pickers can carry their own minimum width)
   - the platform's control styling is dropped, so no browser draws its own box instead of ours
   - the height is fixed to match the Starting hole dropdown, whatever the picker puts inside
   - there's no extra inner padding, and the value is left-aligned (iOS centres it) */
.field input[type="date"],
.field input[type="time"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: 48px;
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}
.field input[type="date"]::-webkit-datetime-edit,
.field input[type="time"]::-webkit-datetime-edit,
.field input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.field input[type="time"]::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}
.field input[type="date"]::-webkit-date-and-time-value,
.field input[type="time"]::-webkit-date-and-time-value {
  margin: 0;
  text-align: left;
}
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator {
  margin: 0 0 0 8px;
  cursor: pointer;
}

.card-row { background: #F4F6F8; border: 1px solid #E2E6EA; border-radius: 12px; padding: 13px 15px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.card-row .name { font-size: 15px; color: #050606; font-weight: 600; }
.card-row .meta { font-size: 13px; color: #6B7A8F; margin-top: 2px; }
/* The summary's per-tile edit pencil, tucked into the top-right corner of its card */
.card-row { position: relative; }
.edit-tile { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 50%; color: #6B7A8F; cursor: pointer; }
.edit-tile:active { background: #F4F6F8; }
.edit-tile svg { width: 16px; height: 16px; }
.card-row .meta { padding-right: 28px; }
/* A player row's actions: the pencil, then the tick or the remove button */
.player-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.edit-player { width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 50%; color: #6B7A8F; cursor: pointer; }
.edit-player:active { background: #E2E6EA; }
.edit-player svg { width: 16px; height: 16px; }

/* A section heading that opens and closes what is under it. The caret turns rather than the label changing, so
   the heading stays the same width whichever way it is pointing. */
.section-toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
.section-caret { font-size: 14px; transition: transform 140ms ease; }
.section-toggle[aria-expanded="true"] .section-caret { transform: rotate(180deg); }

/* An event board row opens to the same hole-by-hole card the single-round board uses */
.lb-row-open { cursor: pointer; }
.lb-row-open.open { border-bottom: none; }

/* ---- Tee groups at the Who step ----
   Group 1 is the phone owner's own group and keeps the plain player list it always had; the heading only appears
   once there is a second group to tell it apart from. Each further group is a card with its own players. */
.group-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 8px; }
.group-name { font-family: Poppins, Arial, sans-serif; font-weight: 700; font-size: 13px; color: #050606; text-transform: uppercase; letter-spacing: 0.03em; }
.group-when { font-size: 12px; color: #6B7A8F; }
.group-card { border: 1px solid #E2E6EA; border-radius: 12px; padding: 14px; margin-top: 14px; }
.group-card .group-head { margin-bottom: 10px; }
.group-remove { background: none; border: none; color: #6B7A8F; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 0; }
.group-card .card-row { background: #FFFFFF; }
.group-card .btn-secondary { margin-top: 10px; padding: 9px; font-size: 14px; }
.group-empty { font-size: 13px; color: #6B7A8F; padding: 6px 0 2px; }

/* A card whose value is a list (the summary's Who): label on top, then one line per item */
.card-row.card-stack { flex-direction: column; align-items: flex-start; }
.card-row.card-stack .meta { margin-top: 4px; }

/* A card row that ends in a result: name and meta on the left, the number itself large and bold on the right.
   Introduced by the landing page's Recent rounds, and the pattern for any row that ends in a value. */
.card-row .value { flex-shrink: 0; margin-left: 12px; font-weight: 700; font-size: 16px; color: #050606; text-align: right; }
.sc-dark .card-row .value { color: #FFFFFF; }

.chip-row { display: flex; gap: 6px; margin-bottom: 20px; }
.chip { flex: 1; text-align: center; padding: 10px 4px; border-radius: 10px; font-size: 12px; }
.chip .lbl { opacity: 0.8; font-size: 11px; }
.chip .val { font-size: 14px; font-weight: 700; margin-top: 3px; }
.chip.done { background: #B01D23; color: #fff; }
.chip.active-step { background: #F4F6F8; border: 1.5px solid #B01D23; color: #B01D23; }
.chip.todo { background: #F4F6F8; border: 1px solid #C7CDD3; color: #6B7A8F; }

.section-label { font-family: Poppins, Arial, sans-serif; font-weight: 700; font-size: 13px; color: #050606; margin: 24px 0 10px; text-transform: uppercase; letter-spacing: 0.03em; }
.section-label:first-of-type { margin-top: 0; }

/* ---- The landing page ----
   Statistics, then the rounds, with the two actions in the footer below them. The white section labels belong here
   rather than inline, since this is the only dark screen that has them. "Statistics" is the screen's first label,
   and the :first-of-type rule above would cancel its top margin, so the margin is restated after it. */
.home-content .section-label { margin: 28px 0 12px; color: #FFFFFF; }
.home-content .section-label:first-of-type { margin-top: 0; }
.home-content .card-row:last-child { margin-bottom: 0; }
/* These rows end in a value rather than a pencil, so the meta keeps the corner the summary's cards give away */
#homeHistory .card-row .meta { padding-right: 0; }

/* Four statistics, two to a row. The marks are the app's own and not a second set of colours: the red circle a
   birdie gets on a scorecard, the outlined circle a par gets, and the gold trophy the leaderboard's winner gets. */
/* In play leads the home screen. It never collapses, so it has no toggle and no caret, and it is removed
   entirely when empty rather than shown as an empty state - which is what keeps it from costing space on a
   page where nothing is happening. Statistics is normally second and carries a gap above it; when In play is
   absent it becomes the first thing seen, so the gap is taken back here rather than by poking styles from JS. */
.in-play-section { margin-bottom: 28px; }
.in-play-section[hidden] + .section-label { margin-top: 0; }
/* The only red among neutral tiles, because it is the only thing with something to act on. It is the same
   brand red that carries "Start a round", so the loud thing on the page is recognisably the same loud thing.
   Built as its own component: .card-row is dark under .sc-dark, and borrowing it here would mean fighting
   inherited dark-tile text colours on what is now a light surface. */
.in-play-card { background: #FAECE7; border: 1.5px solid #B01D23; border-radius: 12px; padding: 10px; }
.in-play-row { background: #FFFFFF; border-radius: 10px; padding: 13px 15px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.in-play-row:last-child { margin-bottom: 0; }
.in-play-row .name { font-size: 15px; font-weight: 600; color: #050606; }
.in-play-row .meta { font-size: 13px; color: #6B7A8F; margin-top: 2px; }
.in-play-row .value { flex-shrink: 0; margin-left: 12px; background: #B01D23; color: #FFFFFF; border-radius: 999px; padding: 7px 16px; font-size: 14px; font-weight: 700; }
.stat-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.stat-tile { flex: 1 1 calc(50% - 5px); min-width: calc(50% - 5px); box-sizing: border-box; background: #161919; border: 1px solid #2c3232; border-radius: 12px; padding: 14px 12px; text-align: center; }
.stat-mark { display: flex; align-items: center; justify-content: center; height: 22px; }
/* The scorecard circles carry side padding so a two-digit score fits; as a bare mark they are round instead */
.stat-mark .sc-score { width: 22px; min-width: 22px; padding: 0; }
.stat-mark .lb-trophy { width: 20px; height: 20px; margin-left: 0; vertical-align: baseline; }
.stat-flag { width: 20px; height: 20px; color: #9a9a9a; }
.stat-value { font-family: Poppins, Arial, sans-serif; font-weight: 700; font-size: 24px; color: #FFFFFF; margin-top: 6px; }
.stat-label { font-size: 12px; color: #9a9a9a; margin-top: 2px; }
/* Where step: "Men's tee" is the section's first label, so the rule above drops its top margin; the section
   supplies the usual 24px instead, below the "Course not showing?" link or the course tiles */
.tee-section { margin-top: 24px; }
/* Each gender's tees behind their own header. A course out of the scorecard file can list eight or more tees per
   gender once Front 9 and Back 9 variants are counted, so they start closed unless that gender is playing. */
.tee-group { margin-top: 18px; }
.tee-group-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; background: #F4F6F8; border: 1px solid #E2E6EA; border-radius: 12px; font-family: inherit; cursor: pointer; text-align: left; }
.tee-group-name { font-family: Poppins, Arial, sans-serif; font-weight: 700; font-size: 13px; color: #050606; text-transform: uppercase; letter-spacing: 0.03em; }
.tee-group-pick { flex: 1 1 auto; min-width: 0; font-size: 13px; color: #6B7A8F; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tee-group-caret { flex-shrink: 0; font-size: 14px; color: #6B7A8F; line-height: 1; transition: transform 120ms ease; }
.tee-group.collapsed .tee-group-caret { transform: rotate(-90deg); }
.tee-group.collapsed .tee-group-body { display: none; }
.tee-group-body { margin-top: 10px; }
/* Testing aid on course search results: served from stored data, or about to spend GolfCourseAPI quota */
.cache-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 700; vertical-align: middle; background: #FDECEA; color: #B01D23; }
.cache-badge.cached { background: #E3F4EA; color: #1D7A45; }

.option-tile { border: 1px solid #E2E6EA; border-radius: 12px; padding: 15px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.option-tile.selected { border: 1.5px solid #B01D23; background: #FAECE7; }
.option-tile .t-name { font-size: 15px; font-weight: 600; color: #050606; }
.option-tile .t-desc { font-size: 13px; color: #6B7A8F; margin-top: 3px; }
.check-dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #C7CDD3; flex-shrink: 0; }
.check-dot.on { background: #B01D23; border-color: #B01D23; position: relative; }
.check-dot.on::after { content: "✓"; color: #fff; font-size: 12px; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.key { background: #1c2020; border: none; border-radius: 12px; padding: 18px 0; color: #fff; font-size: 24px; font-weight: 700; font-family: Calibri, Arial, sans-serif; cursor: pointer; }
.key .k-lbl { font-size: 11px; font-weight: 400; color: #9a9a9a; }
.key.par { background: #1D9E75; }
.key.par .k-lbl { color: #E1F5EE; }
.key.good .k-lbl { color: #5DCAA5; }
.key.key-util { background: #2a2f2f; font-size: 16px; color: #c8c8c8; }

.lb-row { display: flex; align-items: center; padding: 13px 0; border-top: 1px solid rgba(255,255,255,0.08); font-size: 15px; }
.lb-row.header { color: #9a9a9a; font-size: 12px; border-top: none; }
.lb-pos { width: 30px; color: #F0997B; font-weight: 700; }
.lb-name { flex: 1; color: #fff; }
.lb-thru { width: 46px; color: #c8c8c8; text-align: center; font-size: 13px; }
.lb-score { width: 50px; color: #F0997B; font-weight: 700; text-align: right; }
/* Stroke Play's gross column, before net in .lb-score */
.lb-gross { width: 50px; color: #c8c8c8; text-align: right; font-size: 15px; }
.lb-name .lb-ph { display: block; font-size: 12px; font-weight: 400; color: #9a9a9a; margin-top: 2px; }
/* Only on an event-linked round's own board, where "winner" on its own could be read as the event's overall
   result rather than this one group's. A standalone round has nothing to disambiguate against, so it keeps the
   bare trophy with no label at all - gated on round.eventId in renderLeaderboard. */
.lb-name .lb-winner-label { display: block; font-size: 12px; font-weight: 700; color: #F5C542; margin-top: 2px; }
/* The winner's trophy, once the round is finished and the result can no longer change */
.lb-trophy { width: 16px; height: 16px; margin-left: 6px; color: #F5C542; vertical-align: -2px; }

/* Footers that stack more than one button (the leaderboard's Finish above Edit scores, the round card's Save above
   Back) get the gap from the shared rule in the dark-screen block above. */
/* Finish settles the result, so it takes the app's green rather than the red of the ordinary primary action */
#lbFinishBtn { background: #2E9E5B; }
/* Scoring screen: playing handicap and this hole's handicap strokes under a player's name */
.stroke-note { display: block; font-size: 12px; font-weight: 400; opacity: 0.85; margin-top: 3px; }

.tab-row { display: flex; gap: 4px; margin-bottom: 10px; }
.tab { padding: 7px 10px; font-size: 11px; border-radius: 6px 6px 0 0; color: #9a9a9a; }
.tab.on { color: #F0997B; border-bottom: 2px solid #B01D23; font-weight: 700; }

/* ---- Handedness ----
   Every left/right placement that depends on the scorer's thumb is decided here, by ONE flag:
   data-handedness on <body>. "right" is the default, and also applies when the flag is missing.
   Elements only declare a role, never a side:
     .float-primary    main floating action, on the thumb side (Hole overview: "Enter hole scores")
     .float-stacked    a second action directly above the primary, same side (Hole overview: leaderboard)
     .float-secondary  secondary action, on the side away from the thumb (the Settings gear)
     .thumb-dock       a block docked towards the thumb side, keys kept in order (scoring keypads)
   Changing the flag (e.g. document.body.dataset.handedness = 'left') moves all of them together.
   There's no toggle UI yet. */
.float-btn { position: absolute; bottom: 18px; z-index: 5; }
/* No transition: the keypad snaps to its side like every other control here, so a tap can never land while it is
   still in flight. */
.thumb-dock { width: 78%; }

/* Right-handed (default) */
.float-primary   { right: 18px; left: auto; }
.float-stacked   { right: 18px; left: auto; }
.float-secondary { left: 18px; right: auto; }
.thumb-dock      { margin-left: auto; margin-right: 0; }

/* The leaderboard icon sits directly above the primary action rather than across from it, so both live under the
   same thumb: 18px up from the bottom, plus the 44px button, plus a 12px gap so the two can't be mis-tapped. */
.float-stacked { bottom: calc(18px + 44px + 12px); }
/* A row of choices: Left/Right in Settings, Use course handicaps on What, and Holes and Who's playing on Where.
   This is styling only - each toggle keeps its own data- hook, and every handler scopes to both the class and its
   own hook, so one toggle's listener can never rewrite another's state (or stamp ARIA on a container). */
.choice-toggle { display: flex; gap: 10px; }
.choice-option { flex: 1 1 0; min-height: 46px; padding: 12px; background: #FFFFFF; border: 1.5px solid #C7CDD3; border-radius: 12px; font-family: inherit; font-size: 15px; font-weight: 600; color: #050606; cursor: pointer; }
.choice-option[aria-checked="true"] { border-color: #B01D23; border-width: 1.5px; background: #FAECE7; color: #B01D23; }

/* Left-handed: the same flag mirrors everything above at once */
body[data-handedness="left"] .float-primary   { left: 18px; right: auto; }
body[data-handedness="left"] .float-stacked   { left: 18px; right: auto; }
body[data-handedness="left"] .float-secondary { right: 18px; left: auto; }
body[data-handedness="left"] .thumb-dock      { margin-right: auto; margin-left: 0; }

/* Review mode's chequered flag, in the primary slot: round like the other icon buttons, but filled like the
   primary action it replaces, so the way to finish reads as the main thing to do. */
/* The finish control is a labelled pill, not an icon button: it takes .fab-enter's box and adds the icon inline
   beside the text. .fab-enter sets no display of its own, so the row is declared here or the two would not line up.
   The icon is smaller than .fab-icon's 22px because it sits next to 13px text rather than alone in a circle. */
.fab-finish { display: flex; align-items: center; gap: 8px; }
.fab-finish svg { width: 18px; height: 18px; flex-shrink: 0; }

/* "Every hole entered" - the prompt above the player rows, with its two ways on */
.complete-prompt { background: #F4F6F8; border: 1px solid #E2E6EA; border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.complete-prompt .cp-title { font-size: 15px; font-weight: 700; color: #050606; }
.complete-prompt .cp-text { font-size: 13px; line-height: 1.4; color: #6B7A8F; margin: 4px 0 12px; }
.complete-prompt .cp-actions { display: flex; gap: 10px; }
.complete-prompt .cp-actions button { flex: 1 1 0; margin: 0; }

/* "Enter hole scores": the primary action */
.fab-enter {
  min-height: 44px;
  background: #B01D23;
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 13px 18px;
  font-size: 13px;
  font-weight: 700;
  font-family: Calibri, Arial, sans-serif;
  box-shadow: 0 4px 14px rgba(176,29,35,0.4);
  cursor: pointer;
  transition: transform 100ms ease;
}
.fab-enter:active { transform: scale(0.96); }

/* Icon-only secondary button (leaderboard), the same height as the primary one */
.fab-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: #B01D23;
  border: 1.5px solid #B01D23;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform 100ms ease;
}
.fab-icon:active { transform: scale(0.96); }
.fab-icon svg { width: 22px; height: 22px; }

/* Keeps the last player row clear of the floating buttons */
/* Keeps the last player row clear of the stacked pair: 18px + 44px button + 12px gap + 44px button, and some air */
.float-spacer { flex-shrink: 0; height: 130px; }


/* ---- Full-screen mode on real phones: the frame disappears, the screen IS the viewport ---- */
@media (max-width: 600px) {
  body { padding: 0; overflow-x: hidden; }
  .stage { max-width: none; margin: 0; }
  .phone {
    border: none; border-radius: 0; box-shadow: none; padding: 0; background: transparent;
  }
  .phone-inner {
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    box-sizing: border-box;
    overflow-y: auto;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .phone-inner::-webkit-scrollbar { display: none; }
  .sc-light, .sc-dark { min-height: 100%; height: 100%; box-sizing: border-box; }
}

/* ---- Hole overview: bold colour-blocked header + large player rows ---- */
.overview-header {
  background: #B01D23; color: #fff;
  padding: 22px 20px 18px;
  /* Opened full-screen from the Home Screen, the page runs under the translucent iOS status bar (and notch), so
     the red header grows by the safe area. env() is 0 elsewhere, and browsers without it keep the line above. */
  padding-top: calc(22px + env(safe-area-inset-top, 0px));
  display: flex; align-items: flex-end; justify-content: space-between;
}
.overview-format { font-family: Poppins, Arial, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 0.02em; text-transform: uppercase; }
.overview-format-sub { font-size: 11px; opacity: 0.85; margin-top: 3px; letter-spacing: 0.05em; text-transform: uppercase; }
.overview-hole-block { text-align: right; }
.overview-hole-num { font-family: Poppins, Arial, sans-serif; font-weight: 700; font-size: 36px; line-height: 1; }
.overview-hole-par { font-size: 13px; color: rgba(255,255,255,0.85); margin-top: 3px; }

.player-score-row {
  background: #FFFFFF; border: 2px solid #C7CDD3; border-radius: 14px;
  padding: 16px 18px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between;
}
.ps-name { font-size: 19px; font-weight: 700; color: #050606; }
.ps-meta { font-size: 13px; color: #6B7A8F; margin-top: 3px; }
.ps-circle {
  width: 56px; height: 56px; border-radius: 50%; background: #2E9E5B; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; flex-shrink: 0;
}

/* ---- Leaderboard row cards ---- */
.lb-card-row {
  background: #161919; border: 2px solid #2c3232; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 8px;
  display: flex; align-items: center; font-size: 16px;
}
.lb-card-row.leader { border-color: #B01D23; background: #1d1414; }
/* A row opens to the player's own card underneath it */
.lb-card-row { cursor: pointer; }
.lb-card-row.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
.lb-detail { background: #FFFFFF; border: 2px solid #2c3232; border-top: none; border-radius: 0 0 12px 12px; padding: 12px; margin-bottom: 8px; }
.lb-detail .sc-table th { background: #FFFFFF; }
.lb-detail-summary { margin-top: 10px; padding-top: 10px; border-top: 1px solid #E2E6EA; font-size: 13px; font-weight: 700; color: #050606; text-align: center; }
/* How the round went, by result - counted from the same classes the score circles are coloured by */
.sc-stats { display: flex; gap: 4px; margin-top: 10px; }
.sc-stat { flex: 1 1 0; min-width: 0; text-align: center; padding: 6px 2px; background: #F4F6F8; border-radius: 8px; }
.sc-stat span { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #6B7A8F; }
.sc-stat strong { display: block; font-size: 15px; color: #050606; margin-top: 2px; }
/* Five columns over two nines is tighter than the course preview's four, so the expansion trims its own cells
   rather than scrolling sideways: a scorecard you have to swipe across is worse than a snug one. The preview
   sheet keeps its roomier spacing. */
/* Every row in both nines is the same fixed height, whatever it holds - a dash, plain text, or a coloured circle -
   so hole N on the left and hole N+9 on the right always sit level with each other. The circle is centred inside
   that height rather than being what sets it. */
/* line-height: 1 centres the font's EM box, and that box reserves descender space which digits never occupy -
   so every number sat about half a descender high in its row (measured on an iPhone: 4.5 device px at DPR 3,
   against Arial's 0.2119em descent). The circle, being a box rather than text, was centred correctly all along,
   which is what made it look wrong next to the numbers. The padding below is expressed in em so it stays half a
   descender in whatever font the device falls back to - Arial on iOS, Calibri on Windows - rather than a pixel
   value tuned to one screen. The pill cancels it out, since it was already in the right place. */
.lb-detail .sc-table th, .lb-detail .sc-table td { height: 28px; padding: 0.24em 3px 0 3px; line-height: 1; vertical-align: middle; }
/* The cell has a fixed height and is middle-aligned, so only about half of the padding above becomes real
   displacement - measured on the device: 0.106em moved the digits 2 of the 4.6 device px they needed. */
.lb-detail .sc-table td .sc-score { position: relative; top: -0.12em; }
/* The glyph inside the circle is centred by the flex box, so holding the circle still holds its digit still too.
   It needs its own nudge: the ring is correctly placed, the digit within it sits half a descender high, same as
   the plain text did. The top padding goes in the shorthand below - declared separately it was overwritten by
   it, since that rule is later in the file and resets padding-top to zero. */
/* The circled score keeps the table's own font-size. A smaller one here gave the circle its own line box,
   whose baseline landed half a pixel above the plain PAR digit beside it in the same row - same glyph, visibly
   out of line. Matching the size puts both digits on one baseline by construction, in whatever font the device
   falls back to, rather than by a nudge tuned to one. */
/* Square, and wide enough for two characters: a 19px circle could hold one digit but stretched into an oval on
   a score of 10 or more. 22px fits both without the shape changing, and the five-column card still has room -
   measured at zero overhang against its width budget. */
.lb-detail .sc-score { min-width: 22px; height: 22px; padding: 0.23em 3px 0 3px; border-radius: 11px; }
.lb-detail .sc-columns { gap: 8px; }

/* The Confirm-your-scores screen opens the same detail under a light card row */
.card-row.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
.card-row[data-lb-player] { cursor: pointer; }
.sc-light .lb-detail { border-color: #E2E6EA; }

/* A hole's score, coloured by its result. */
/* line-height and vertical-align are pinned here too: an inline-flex box otherwise sits on the text baseline and
   inherits the page's line-height, which pushes the digit off-centre inside the circle. */
/* Par carries no result class, so the bare rule is par itself: a white circle with a dark outline, so every scored
   hole is the same shape and only the colour differs. The outline is inside the box (border-box is global), so it
   doesn't change the circle's size. The coloured results match their border to their fill so they stay solid. */
.sc-score { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; font-weight: 700; line-height: 1; vertical-align: middle; background: #FFFFFF; border: 1.5px solid #050606; color: #050606; }
.sc-score.eagle,  .ps-circle.eagle  { background: #F5C542; color: #050606; border-color: #F5C542; }
.sc-score.birdie, .ps-circle.birdie { background: #B01D23; color: #FFFFFF; border-color: #B01D23; }
.sc-score.bogey,  .ps-circle.bogey  { background: #2563EB; color: #FFFFFF; border-color: #2563EB; }
.sc-score.worse,  .ps-circle.worse  { background: #050606; color: #FFFFFF; border-color: #050606; }

/* The gear on the Leaderboard header: no floating corner is free there, so it sits in the header itself */
/* The leaderboard banner's right-hand pair: the view code to read out, and the share icon to send it */
.lb-head-actions { flex-shrink: 0; display: flex; align-items: flex-end; gap: 2px; }
.lb-head-code { font-size: 11px; opacity: 0.85; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; padding-bottom: 9px; }
.header-icon { flex-shrink: 0; align-self: flex-end; width: 36px; height: 36px; margin: 0 0 2px 10px; padding: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 50%; color: rgba(255, 255, 255, 0.85); cursor: pointer; }
.header-icon:active { background: rgba(255, 255, 255, 0.16); }
.header-icon svg { width: 22px; height: 22px; }
.lb-card-row .lb-pos { width: 32px; font-size: 17px; }
.lb-card-row .lb-name { font-size: 16px; }
.lb-card-row .lb-score { font-size: 18px; }

/* ---- Walking-skeleton additions: states the fake-data prototype never needed ---- */
.form-contents { display: contents; }
.form-error { min-height: 18px; font-size: 13px; color: #B01D23; margin-top: 8px; }
.sc-dark .form-error { color: #F0997B; text-align: center; margin: 8px 0 0; }
/* The round card on a dark screen: the same box the leaderboard gives its rows, so a round looked up from the
   landing page reads as the same thing as a round on the leaderboard rather than a white panel on black. */
.sc-dark .card-row { background: #161919; border-color: #2c3232; }
.sc-dark .card-row .name { color: #FFFFFF; }
.sc-dark .card-row .meta { color: #9a9a9a; }
/* Two actions stacked in a footer need a gap between them; a single one needs none. */
.sc-footer .btn-primary + .btn-primary { margin-top: 10px; }
.empty-note { font-size: 14px; color: #6B7A8F; text-align: center; padding: 18px 0; }
.sc-dark .empty-note { color: #9a9a9a; }
.ps-circle.empty { background: #E2E6EA; color: #6B7A8F; }
.card-row .remove { background: none; border: none; color: #6B7A8F; font-size: 16px; cursor: pointer; padding: 4px 6px; }
.field input.code-input { text-transform: uppercase; letter-spacing: 0.2em; text-align: center; font-size: 22px; }
.btn-primary:disabled, .btn-secondary:disabled { opacity: 0.6; cursor: default; }
.btn-link-dark { display: block; text-align: center; color: #9a9a9a; font-size: 12px; margin-top: 12px; text-decoration: underline; cursor: pointer; }
/* Brief confirmation under the leaderboard when the link went to the clipboard instead of a share sheet */
/* The organiser's event codes in the Settings sheet: the code itself readable at a glance, the action beside it */
.event-code-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.event-code-label { font-size: 12px; color: #6B7A8F; }
.event-code { font-family: "Cascadia Mono", Consolas, "Courier New", monospace; font-size: 20px; font-weight: 700; letter-spacing: 0.08em; color: #050606; margin-top: 2px; user-select: all; }
.event-code-share { width: auto; flex-shrink: 0; margin-top: 0; padding: 8px 14px; font-size: 13px; }

.share-note {text-align: center; font-size: 12px; font-weight: 600; color: #F0997B; margin-bottom: 10px; }
[hidden] { display: none !important; } /* so the hidden attribute beats display rules like .btn-link-dark's */
/* Notice shown wherever a chosen format can't calculate a result yet */
.format-note { background: #F4F6F8; border-left: 3px solid #B01D23; border-radius: 8px; padding: 10px 12px; margin: 4px 0 12px; font-size: 13px; line-height: 1.4; color: #050606; }
.sc-dark .format-note { background: #161919; color: #c8c8c8; }

/* ---- Where step: a tee tile is two separate tap zones ----
   The left zone (name, summary, tick) selects the tee and keeps the tile's original behaviour; the eye on the right
   is boxed off by a divider and opens that tee's scorecard instead. The padding moves from the tile onto the zones
   so the divider runs the tile's full height. Only tee tiles get this; course and format tiles are untouched. */
.option-tile.has-preview { padding: 0; }
.option-tile.has-preview .tile-main { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px; }
.tee-preview-btn { flex-shrink: 0; align-self: stretch; width: 52px; padding: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; border-left: 1px solid #E2E6EA; border-radius: 0 12px 12px 0; color: #6B7A8F; cursor: pointer; }
.option-tile.selected .tee-preview-btn { border-left-color: #E0BDBA; color: #B01D23; }
.tee-preview-btn:active { background: #F4F6F8; }
.tee-preview-btn svg { width: 22px; height: 22px; }

/* ---- Bottom sheet ----
   The prototype's settings sheet was cut from this build, so this is the first one: same visual language as the
   tiles (white card, 12-16px radii, the shared greys). */
.sheet-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(5, 6, 6, 0.45); display: flex; align-items: flex-end; justify-content: center; }
/* --sheet-gutter is the sheet's one spacing value: every edge, every section and every tee type uses it, so a
   nine-hole card and an eighteen-hole one read as the same component with different content. The bottom edge is
   the gutter or the phone's home-bar inset, whichever is larger, and it lives on the footer because the footer
   is what actually touches that edge. */
.sheet { --sheet-gutter: 16px; --sheet-rhythm: 12px; width: 100%; max-width: 380px; max-height: 88vh; display: flex; flex-direction: column; background: #FFFFFF; border-radius: 16px 16px 0 0; animation: sheet-rise 0.18s ease-out; }
@keyframes sheet-rise { from { transform: translateY(12px); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } }
.sheet-grip { width: 38px; height: 4px; border-radius: 2px; background: #E2E6EA; margin: 8px auto 0; flex-shrink: 0; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sheet-rhythm); flex-shrink: 0; padding: var(--sheet-gutter) var(--sheet-gutter) var(--sheet-rhythm); }
.sheet-heading { min-width: 0; }
.sheet-title { font-size: 16px; font-weight: 700; color: #050606; }
.sheet-sub { font-size: 13px; color: #6B7A8F; margin-top: 3px; }
.sheet-close { flex-shrink: 0; background: none; border: none; color: #6B7A8F; font-size: 16px; padding: 4px 6px; cursor: pointer; }
/* Only the hole detail scrolls; the header above and the totals below stay put */
.sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 var(--sheet-gutter) var(--sheet-rhythm); }
/* A uuid is long and worth reading accurately, so it breaks across lines rather than being cut off, in a face
   where a nought and an O can't be confused for each other. */
.profile-id { font-family: "Cascadia Mono", Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.5;
  color: #050606; background: #F4F6F8; border: 1px solid #E2E6EA; border-radius: 10px; padding: 10px 12px;
  word-break: break-all; -webkit-user-select: all; user-select: all; }
.sheet-foot { flex-shrink: 0; border-top: 1px solid #E2E6EA; background: #F4F6F8; border-radius: 0 0 16px 16px; padding: var(--sheet-rhythm) var(--sheet-gutter) max(var(--sheet-gutter), env(safe-area-inset-bottom)); }
.sheet-foot:empty { display: none; }

/* The hole-by-hole table inside the sheet. Hole numbers come from the data, so a Back 9 reads 10-18 and a
   composite nine reads whatever holes it actually plays. One set of cell padding serves both layouts, so the
   rows line up the same way whichever tee is being shown. */
.sc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sc-table th { position: sticky; top: 0; background: #FFFFFF; text-align: right; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #6B7A8F; padding: 6px; border-bottom: 1px solid #E2E6EA; }
.sc-table td { text-align: right; padding: 6px; border-bottom: 1px solid #F0F2F4; color: #050606; }
.sc-table th:first-child, .sc-table td:first-child { text-align: left; font-weight: 600; }
.sc-table tr.sc-subtotal td { font-weight: 700; background: #F4F6F8; border-bottom: 1px solid #E2E6EA; }
.sc-table .sc-blank { color: #9AA5B1; }

/* A full eighteen is laid out as a printed card is: the front nine beside the back nine. A single nine has no
   second column to sit next to, so it keeps the full width. */
.sc-columns { display: flex; gap: var(--sheet-rhythm); align-items: flex-start; }
.sc-columns > table { flex: 1 1 0; min-width: 0; }

/* The pinned totals */
.sc-totals { display: flex; gap: var(--sheet-rhythm); }
.sc-totals > div { flex: 1 1 0; text-align: center; min-width: 0; }
.sc-totals span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #6B7A8F; }
.sc-totals strong { display: block; font-size: 17px; line-height: 1.2; color: #050606; }
.sc-totals em { display: block; font-size: 11px; font-style: normal; color: #6B7A8F; }
.sheet-note { font-size: 12px; line-height: 1.4; color: #6B7A8F; margin-top: var(--sheet-rhythm); }
.sheet-note:first-child { margin-top: 0; margin-bottom: var(--sheet-rhythm); }