/* Handicap Tracker — clubhouse scorecard aesthetic.
   Plain CSS, custom properties for tokens (SPEC.md §8). Mobile-first;
   minimum 44 px tap targets on the scorecard.

   Token groups:
   - Surfaces (--paper*, --pine*, --sand) and lines (--line*).
   - Text accents (--accent, --gold-ink): same hue family as the
     surfaces in light mode, but lightened independently in dark mode —
     never colour text with a surface token.
   - Text on pine surfaces (--on-pine, --cream-soft) is constant across
     modes because the pine surfaces stay dark in both.
   Dark mode simply re-declares the tokens under [data-theme="dark"];
   no selector overrides. Boot JS resolves the Auto/Light/Dark setting
   (plus prefers-color-scheme when on Auto) onto <html data-theme> before
   this sheet applies. Type floor is 12px. */

:root {
  color-scheme: light;

  /* Card stock and ink */
  --paper: #f4efe2;
  --paper-raised: #fcf9f0;
  --paper-dim: #ece5d2;
  --ink: #22301f;
  --ink-soft: #5c6a52;
  --stripe: rgba(34, 48, 31, 0.016);

  /* Fairway greens (surfaces) */
  --pine: #1d4230;
  --pine-deep: #14301f;
  --pine-soft: #2d5c44;

  /* Text accents */
  --accent: #1d4230;
  --gold-ink: #77622c;
  /* De-emphasised *text* that must still be legible (an untouched
     scorecard prefill is a real score). Never use --line-strong for
     this: it is tuned for rules and borders and reads at ~2.7:1. */
  --ink-faint: #8a7d5c;

  /* Text on pine surfaces (constant across modes) */
  --on-pine: #f4efe2;
  --cream-soft: #e3d8ba;

  /* Accents & lines */
  --flag: #b43c25;
  --gold: #97803f;
  --sand: #e3d8ba;
  --line: #cdc3a6;
  --line-strong: #a89a74;

  --field-bg: #ffffff;
  --chart-area: rgba(45, 92, 68, 0.10);
  --danger-wash: rgba(180, 60, 37, 0.08);

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
    "Book Antiqua", "URW Palladio L", P052, Georgia, serif;
  --font-body: -apple-system, "Segoe UI", "Helvetica Neue", Seravek,
    Roboto, system-ui, sans-serif;

  --radius: 8px;
  --tap: 44px;
  --shadow: 0 1px 2px rgba(34, 48, 31, 0.10), 0 4px 14px rgba(34, 48, 31, 0.08);
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --paper: #131a15;
    --paper-raised: #1c261f;
    --paper-dim: #242f26;
    --ink: #e9e4d3;
    --ink-soft: #a6b096;
    --stripe: rgba(233, 228, 211, 0.02);

    --pine: #24503a;
    --pine-deep: #1a3a29;
    --pine-soft: #4f7d64;

    --accent: #93bda4;
    --gold-ink: #c9b06b;
    --ink-faint: #75836a;

    --flag: #d86a4f;
    --gold: #a08a4c;
    --sand: #2a3428;
    --line: #33402f;
    --line-strong: #5f6d52;

    --field-bg: #141c16;
    --chart-area: rgba(147, 189, 164, 0.08);
    --danger-wash: rgba(216, 106, 79, 0.12);

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background:
    repeating-linear-gradient(0deg, var(--stripe) 0 1px, transparent 1px 3px),
    var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ */
/* Masthead                                                            */

.masthead { background: var(--pine); color: var(--on-pine); }

.masthead-rule { height: 4px; background: var(--gold); }

.masthead-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 16px 9px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.masthead-player {
  font-family: var(--font-display);
  font-style: italic;
  /* Matches the wordmark's size on purpose. The display italic runs
     optically small, so 15 px sat smaller than it measured, and the
     hierarchy is already carried by case, tracking, weight and colour
     — the wordmark is uppercase, tracked and 600 in full --on-pine,
     the name is italic in --cream-soft. */
  font-size: 17px;
  color: var(--cream-soft);
}

.masthead-side { display: inline-flex; align-items: center; gap: 8px; }

/* Unsynced-changes indicator: small dot, nothing dramatic (SPEC §6.2) */
.sync-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

/* ------------------------------------------------------------------ */
/* Layout                                                              */

#app {
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 14px calc(86px + env(safe-area-inset-bottom));
}

.screen[hidden] { display: none; }
.tabbar[hidden] { display: none; } /* backstop: any display on .tabbar would beat the hidden attribute */

.screen-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  margin: 4px 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.screen-title::before,
.screen-title::after {
  content: "";
  flex: 1;
  border-top: 3px double var(--line-strong);
}

/* ------------------------------------------------------------------ */
/* Cards                                                               */

.card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 14px;
}

.card-heading {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

/* ------------------------------------------------------------------ */
/* Dashboard hero                                                      */

.hero { text-align: center; padding: 22px 16px 18px; }

.hero-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.hero-index {
  font-family: var(--font-display);
  font-size: clamp(64px, 22vw, 92px);
  font-weight: 600;
  line-height: 1.02;
  margin: 2px 0 0;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.hero-index .unestablished { color: var(--line-strong); }

.hero-sub { margin: 4px 0 0; color: var(--ink-soft); font-size: 15px; }

.hero-delta {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.hero-delta .delta-down { color: var(--accent); font-weight: 600; }
.hero-delta .delta-up { color: var(--ink-soft); font-weight: 600; }

/* ------------------------------------------------------------------ */
/* Chart                                                               */

.chart-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.chart-head .card-heading { flex: 1; }

.chart-toggle {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  min-height: var(--tap);
  padding: 6px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.chart-toggle[aria-pressed="true"] { background: var(--pine); border-color: var(--pine); color: var(--on-pine); }

.chart-legend { margin: 6px 0 0; font-size: 14px; color: var(--ink-soft); }
.chart-key { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); text-align: center; }
.swatch { display: inline-block; width: 18px; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }
.swatch-you { background: var(--pine-soft); }
.swatch-partner { background: var(--gold); }

.chart-line-partner { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot-partner { fill: var(--gold); }

.chart-wrap { overflow-x: auto; }
.chart-svg { display: block; width: 100%; height: auto; }
.chart-line { fill: none; stroke: var(--pine-soft); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { fill: var(--chart-area); stroke: none; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-dot { fill: var(--paper-raised); stroke: var(--pine-soft); stroke-width: 1.8; }
.chart-dot-counting { fill: var(--gold); stroke: var(--pine-soft); stroke-width: 1.8; }
.chart-dot-last { fill: var(--flag); stroke: var(--paper-raised); stroke-width: 1.6; }
.chart-tick { font-family: var(--font-body); font-size: 12px; fill: var(--ink-soft); }
/* Halo so the label stays readable wherever the line runs beneath it —
   the placement logic keeps clear of the incoming segment, but the
   partner series can cross anywhere. */
.chart-last-label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  fill: var(--flag);
  stroke: var(--paper-raised);
  stroke-width: 3px;
  stroke-linejoin: round;
  paint-order: stroke;
}

/* ------------------------------------------------------------------ */
/* Round list                                                          */

.round-list { list-style: none; margin: 0; padding: 0; }

.round-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2px 10px;
  align-items: baseline;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
  width: 100%;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  min-height: var(--tap);
}
.round-item:last-child { border-bottom: 0; }

.round-date {
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  font-size: 14px;
  white-space: nowrap;
  /* Fixed rail sized for the widest en-AU short date ("27 Sept") so
     course names align down the list whatever the month length. */
  min-width: 7ch;
}

.round-course { font-weight: 600; min-width: 0; }

/* The differential is the number the eye runs down the list, so it is
   always the last thing in the cell and so always flush right. Marks
   and the "est." badge hang off its left — put either after it and the
   column zig-zags on the rows that have one. */
.round-diff {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  text-align: right;
}
/* Only the "est." badge sits beside a number. A pending row's cell is
   the badge alone, so the same gap would push it off the right edge. */
.round-diff .badge-est { margin-right: 5px; }

.round-stats {
  grid-column: 2 / 4;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  color: var(--ink-soft);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* Pinned right under the differential so labels align vertically down
   the list; margin-left keeps it right even when wrapped. */
.round-stat-cluster {
  margin-left: auto;
  white-space: nowrap;
}

/* Figures in full ink; labels stay quiet fine print. */
.round-stats .stat-num {
  color: var(--ink);
  font-weight: 600;
}

.counting-mark { color: var(--gold-ink); margin-right: 3px; }

/* Footnote key under a round list: separated and centred like the fine
   print on a printed card, so it never reads as another list row. */
.list-legend {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}

.badge {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  line-height: 1;
  padding: 3px 7px 4px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  background: var(--sand);
}
/* Gold, not flag red: "estimated" is a qualifier, and red is spoken for
   by capped scores and destructive actions. */
.badge-est { color: var(--gold-ink); border-color: var(--gold); background: transparent; }
.badge-pending { color: var(--ink); }

/* ------------------------------------------------------------------ */
/* Forms                                                               */

.field { margin-bottom: 14px; }

.field-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 5px;
}

input[type="text"], input[type="password"], input[type="number"], input[type="date"], select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 8px 12px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--pine-soft);
  outline-offset: 1px;
}

textarea { resize: vertical; }

/* Bottom-align inputs so a wrapped label doesn't push its field out of
   line with the rest of the row. */
.field-row { display: flex; gap: 10px; align-items: flex-end; }
.field-row .field { flex: 1; min-width: 0; }

/* Course names run 3–4× longer than tee names, so an even split
   truncates every course and leaves the tee select half empty. */
.field-row .field-wide { flex: 1.7; }

.hint { font-size: 14px; color: var(--ink-soft); margin: 6px 0 0; }

/* Head of a round card (scorecard, round saved, round detail). The
   screen title carries the date, so the course can lead the card in
   full ink at heading weight and tee/holes/CH drop to a quiet meta
   line beneath it. */
.card-course {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 1px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.card-meta { font-size: 14px; color: var(--ink-soft); margin: 0 0 12px; }

/* Label+value pairs in a wrapping meta line. Each pair carries its own
   trailing separator so a wrap can never start a line with "· ", and
   can never split a label from its number. */
.nb { white-space: nowrap; }

.error {
  color: var(--flag);
  font-size: 14px;
  margin: 8px 0 0;
  font-weight: 600;
}

/* Segmented control */
.segmented { display: flex; border: 1px solid var(--accent); border-radius: 6px; overflow: hidden; }
.segmented button {
  flex: 1;
  min-height: var(--tap);
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}
.segmented button + button { border-left: 1px solid var(--accent); }
.segmented button[aria-pressed="true"] { background: var(--pine); color: var(--on-pine); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--pine);
  background: var(--pine);
  color: var(--on-pine);
  cursor: pointer;
}
.btn:active { background: var(--pine-deep); }

.btn-ghost { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn-ghost:active { background: var(--paper-dim); }

.btn-danger { background: transparent; border-color: var(--flag); color: var(--flag); }
.btn-danger:active { background: var(--danger-wash); }
/* The "this tap commits" look. `.armed` is armOrFire's second-tap state
   on any button, not just .btn-danger; `.btn-commit` is the same look
   for a button that never had to arm. Distinct because .armed is a
   contract, not a colour. */
.btn.armed, .btn-commit { background: var(--flag); color: var(--on-pine); }

.btn-block { display: flex; width: 100%; }

.btn-row { display: flex; gap: 10px; margin-top: 12px; }
.btn-row .btn { flex: 1; }

/* Destructive actions never share a row with the action you actually
   came for — the two-step confirm is a backstop, not a licence to put
   Delete under the thumb that just tapped Save. */
.btn-row-danger { margin-top: 18px; }

/* Hover states — pointer devices only, so touch never sticks. */
@media (hover: hover) {
  .btn:hover { background: var(--pine-deep); border-color: var(--pine-deep); }
  .btn-ghost:hover { background: var(--paper-dim); border-color: var(--accent); }
  .btn-danger:not(.armed):not(.btn-commit):hover { background: var(--danger-wash); }
  .round-item:hover, .course-item:hover { background: var(--paper-dim); }
  .tab:hover { opacity: 1; }
  .chart-toggle:hover { border-color: var(--accent); color: var(--ink); }
  .stepper button:hover { background: var(--sand); }
  .backlink:hover { text-decoration: underline; }
}

/* ------------------------------------------------------------------ */
/* Scorecard                                                           */

.scorecard { width: 100%; border-collapse: collapse; }

/* Sticky so Par and SI stay labelled past the turn — an 18-hole card is
   about three phone screens tall. Shadow, not border: a sticky cell's
   own border detaches from the row as it scrolls. */
.scorecard th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--paper-raised);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  padding: 4px 2px 6px;
  box-shadow: inset 0 -2px 0 var(--line-strong);
}

/* Generous vertical padding is a tap-safety measure, not decoration:
   it is the only thing separating one hole's steppers from the next
   hole's, and 5px left barely 10px of dead space between two 44px
   targets with a rule down the middle. */
.scorecard td {
  text-align: center;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

/* Reference columns, read on every hole in daylight. Par is what each
   score is measured against, so it carries full ink; SI is now mostly
   corroborated by the pips, so it stays the quiet one. Both sit well
   below the 24px score — supporting, not competing. */
.scorecard .hole-num { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--accent); }
.scorecard .hole-par { color: var(--ink); font-size: 17px; font-weight: 600; }
.scorecard .hole-si { color: var(--ink-soft); font-size: 17px; }

/* Shared by the scorecard and the tee grid — keep it unscoped. */
.turn-row td {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--paper-dim);
  color: var(--ink-soft);
  padding: 6px 2px;
}

.stepper { display: inline-flex; align-items: center; gap: 2px; }

.stepper button {
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--paper-raised);
  color: var(--accent);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.stepper button:active { background: var(--sand); }
.stepper button:disabled { opacity: 0.35; }

/* The score is the anchor and centres against the stepper buttons; the
   pips are a diacritic and are taken out of flow so they can't push it.
   Reserving flow space for them instead lifted every score 6px above
   the button centres — visible as a misalignment only on the holes
   with no pip to fill the gap. */
.score-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: var(--tap);
}

.stepper .score {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Prefills carry two signals, not just colour: lighter weight as well
   as faint ink, so the state survives a colour-blind read. */
.stepper .score.untouched { color: var(--ink-faint); font-weight: 400; }
.stepper .score.over-cap { color: var(--flag); }

/* Stroke pips: ● per stroke received on the hole. Absolute, so a hole
   with no strokes leaves no gap to centre around. */
.score-strokes {
  position: absolute;
  left: 0; right: 0; bottom: 1px;
  font-size: 12px;
  line-height: 1;
  color: var(--gold-ink);
  letter-spacing: 0.12em;
  text-align: center;
}

/* Running total bar */
.totalbar {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(64px + env(safe-area-inset-bottom));
  background: var(--pine-deep);
  color: var(--on-pine);
  z-index: 5;
  border-top: 2px solid var(--gold);
}
.totalbar-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  /* center, not baseline: the small label otherwise hangs low off the
     24px figures' baseline. The figures keep their own baseline row. */
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
}
.totalbar .totals-label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-soft); }
.totalbar .totals-figures { display: flex; align-items: baseline; gap: 14px; }
.totalbar .totals-gross { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.totalbar .totals-sub { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-soft); margin-left: 5px; }

body.has-totalbar #app { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }

/* Result panel. The index movement is what the round was for, so it
   leads at hero weight and gross/net/differential/points support it. */
.result-index {
  text-align: center;
  padding: 6px 0 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.result-index-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.result-index-value {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 600;
  line-height: 1.05;
  margin: 2px 0 0;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.result-index-move {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.result-index-move .delta-down { color: var(--accent); font-weight: 600; }
.result-index-move .delta-up { color: var(--ink); font-weight: 600; }

.result-figures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  text-align: center;
  margin: 6px 0 4px;
}
.result-figures .figure { padding: 10px 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-raised); }
.figure-value { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.1; }
.figure-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); text-wrap: balance; }

/* ------------------------------------------------------------------ */
/* Courses                                                             */

.course-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 13px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  min-height: var(--tap);
}
.course-item:last-child { border-bottom: 0; }
.course-item .course-name { font-weight: 600; font-size: 17px; }
.course-item .course-sub { color: var(--ink-soft); font-size: 14px; }
.course-item .chevron { color: var(--ink-faint); font-size: 20px; }

.tee-grid { width: 100%; border-collapse: collapse; }
.tee-grid th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--paper-raised);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 4px 4px 6px;
  box-shadow: inset 0 -2px 0 var(--line-strong);
  text-align: center;
}
/* Same reasoning as the scorecard: these are 44px inputs, and 3px left
   them 6px apart on a form that wants 36 numbers typed into it. */
.tee-grid td { padding: 7px 3px; border-bottom: 1px solid var(--line); text-align: center; }
.tee-grid .hole-num { font-family: var(--font-display); font-weight: 700; color: var(--accent); width: 34px; }
.tee-grid input { text-align: center; padding: 6px 4px; }

.backlink {
  background: none; border: 0; padding: 8px 4px; min-height: var(--tap);
  font: inherit; font-weight: 600; color: var(--accent); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}

/* ------------------------------------------------------------------ */
/* Round view detail                                                   */

.detail-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.detail-table th {
  position: sticky; top: 0; z-index: 1; background: var(--paper-raised);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
  padding: 4px 3px 6px; box-shadow: inset 0 -2px 0 var(--line-strong); text-align: center;
}
/* Read-only grid: the padding here buys scannability, not thumb room,
   so it stays tighter than the entry card's 11px — a printed card packs
   its rows for a reason, and 18 rows shouldn't cost an extra screen. */
.detail-table td { padding: 8px 3px; border-bottom: 1px solid var(--line); text-align: center; }
/* Unscoped: the legend beneath the table shows the same treatment. */
.capped { color: var(--flag); font-weight: 700; }
.detail-table tfoot td {
  font-family: var(--font-display); font-weight: 700; background: var(--paper-dim);
  border-bottom: 0; padding: 10px 3px;
}

/* ------------------------------------------------------------------ */
/* Widget                                                              */

.daily-figures { display: flex; gap: 12px; margin-top: 10px; }
.daily-figures .figure { flex: 1; text-align: center; padding: 10px 4px; border: 1px solid var(--line); border-radius: var(--radius); }

.daily-nine { display: flex; gap: 12px; margin-top: 8px; }
.daily-nine .figure { flex: 1; text-align: center; padding: 7px 4px; border: 1px dashed var(--line); border-radius: var(--radius); }
.daily-nine .figure-value { font-size: 22px; }

/* ------------------------------------------------------------------ */
/* Empty states                                                        */

.empty {
  text-align: center;
  color: var(--ink-soft);
  padding: 26px 14px;
}
.empty .empty-title { font-family: var(--font-display); font-size: 19px; color: var(--ink); margin: 0 0 6px; }
.empty p { margin: 0 0 14px; }

/* ------------------------------------------------------------------ */
/* Tab bar                                                             */

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--pine);
  border-top: 2px solid var(--gold);
  z-index: 10;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Pine and its gold rule run edge to edge; the tabs themselves stop
   where the cards do. Stretched across a desktop window each tab is
   288 px of mostly empty pine, and the current-tab well makes that
   width impossible to ignore. The cap is #app's 720 px *minus its two
   14 px gutters*, not 720 itself: the card column is what the eye has
   to compare the tab cluster against, and landing 28 px wider than it
   reads as a mistake in a way that being obviously different would
   not. Below 720 px nothing binds and the tabs run edge to edge, which
   is right on a phone — the outer two tap targets reach the screen
   edge. */
.tabbar-inner {
  max-width: calc(720px - 2 * 14px);
  margin: 0 auto;
  display: flex;
}

.tab {
  flex: 1;
  min-height: 62px;
  background: none;
  border: 0;
  color: var(--cream-soft);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.03em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  /* 0.75 put the 12 px labels at 4.4:1 on pine — just under AA. */
  opacity: 0.82;
}
.tab svg { width: 23px; height: 23px; }
/* Bold is a wider word: without this "New round" breaks to two lines
   the moment it becomes the current tab. */
.tab span { white-space: nowrap; }

/* The current tab is a key pushed in: a darker well, capped in gold,
   labelled in full ink at 600. Three channels, only one of them
   brightness. The marker it replaces was a 3 px gold pip directly
   beneath the bar's 2 px gold border — same hue, touching, so it read
   as a thickening of the rule rather than a mark. Note the delta can't
   come from dimming the other tabs instead: their labels are already
   at the floor (see the opacity note above). The well is --pine-deep
   rather than a lighter --pine-soft because 12 px --on-pine on
   --pine-soft measures 4.1:1 in dark mode, under AA. */
.tab[aria-current="page"] {
  opacity: 1;
  color: var(--on-pine);
  font-weight: 600;
  background: var(--pine-deep);
  box-shadow: inset 0 3px 0 var(--gold);
}

/* ------------------------------------------------------------------ */
/* Misc                                                                */

.divider { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

.notice {
  background: var(--sand);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 14px;
  margin-bottom: 14px;
}

@media (min-width: 560px) {
  .result-figures { grid-template-columns: repeat(4, 1fr); }
}