/* Layout: a scorecard — one narrow column of ruled panels; summary first, then the trend, then the ledger. */
:root {
  --bg: #f3f5f1;
  --panel: #ffffff;
  --ink: #18201a;
  --ink-2: #4d584f;
  --muted: #7b867d;
  --rule: #d9dfd6;
  --rule-strong: #b9c3b6;
  --accent: #1f5e3b;        /* fairway green */
  --accent-ink: #ffffff;
  --accent-soft: #e3eee5;
  --p1: #2a78d6;
  --p2: #eb6834;
  --good: #1d7a45;
  --bad: #b23b3b;
  --flag: #c9a227;
  --mix-under: #1d7a45; --mix-par: #b9c3b6; --mix-bogey: #e0a458; --mix-dbl: #b23b3b;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #121713; --panel: #1a211c; --ink: #e9eee8; --ink-2: #b8c2b9; --muted: #869188;
  --rule: #2c362e; --rule-strong: #3d4a40; --accent: #5fb383; --accent-ink: #0d1a12; --accent-soft: #22322a;
  --p1: #3987e5; --p2: #d95926; --good: #5cc18a; --bad: #e57373; --flag: #d8b54a; --mix-under: #5cc18a; --mix-par: #55625a; --mix-bogey: #c98a3e; --mix-dbl: #e57373; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #121713; --panel: #1a211c; --ink: #e9eee8; --ink-2: #b8c2b9; --muted: #869188;
  --rule: #2c362e; --rule-strong: #3d4a40; --accent: #5fb383; --accent-ink: #0d1a12; --accent-soft: #22322a;
  --p1: #3987e5; --p2: #d95926; --good: #5cc18a; --bad: #e57373; --flag: #d8b54a; --mix-under: #5cc18a; --mix-par: #55625a; --mix-bogey: #c98a3e; --mix-dbl: #e57373; color-scheme: dark; }

* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.5; }
.wrap { max-width: 1040px; margin: 0 auto; padding-block: 24px 64px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; gap: 20px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: 0.01em; }
h1 { font-size: 2.4rem; line-height: 1; }
h2 { font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.06em; }
.num { font-variant-numeric: tabular-nums; }
.label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }

header.top { display: flex; align-items: center; gap: 8px 16px; border-bottom: 1px solid var(--rule); padding-bottom: 0; min-height: 56px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex: none; }
.brand img { width: 40px; height: 40px; border-radius: 10px; display: block; }
.brand h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
header.top .tabs { border-bottom: 0; margin: 0; flex: 1; min-width: 0; align-self: stretch; align-items: stretch; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
header.top .tabs::-webkit-scrollbar { display: none; }
header.top .tabs a { white-space: nowrap; }
header.top .tabs a { margin-bottom: -1px; }
.add-top { flex: none; }
header.top .sub { color: var(--ink-2); margin-top: 4px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

button, .btn { font: inherit; font-weight: 600; border-radius: 6px; border: 1px solid var(--rule-strong); background: var(--panel); color: var(--ink); padding: 8px 14px; cursor: pointer; }
@media (hover: hover) { button:hover { border-color: var(--accent); } } /* not on touch screens, where :hover sticks to the last button tapped */
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.primary:hover { filter: brightness(1.08); }
button.ghost { background: transparent; border-color: transparent; color: var(--ink-2); padding: 4px 8px; }
button.ghost:hover { color: var(--ink); border-color: var(--rule); }
button.danger { color: var(--bad); }
button.danger.armed { background: var(--bad); color: #fff; border-color: var(--bad); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { opacity: .5; cursor: not-allowed; }

.panel { background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; }

.banner { border: 1px dashed var(--flag); background: color-mix(in srgb, var(--flag) 10%, var(--panel)); border-radius: 8px; padding: 10px 14px; color: var(--ink); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.banner b { font-family: var(--display); letter-spacing: .05em; text-transform: uppercase; }
.notice { color: var(--ink-2); font-size: .9rem; }

/* player summary cards */
.players { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.pcard { border-top: 4px solid var(--pc); }
.pcard .who { display: flex; align-items: center; gap: 10px; }
.emo { display: inline-block; font-size: 1.15em; line-height: 1; flex: none; font-style: normal; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--pc); flex: none; }
.pcard h3 { font-size: 1.6rem; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; }
.stat .v { font-family: var(--display); font-size: 1.9rem; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat .v small { font-size: 1rem; color: var(--muted); font-weight: 500; }
.stat .d { font-size: .8rem; color: var(--ink-2); }
.trend-good { color: var(--good); font-weight: 600; }
.trend-bad { color: var(--bad); font-weight: 600; }
.minor { display: flex; flex-wrap: wrap; gap: 6px 18px; border-top: 1px solid var(--rule); padding-top: 10px; font-size: .88rem; color: var(--ink-2); }
.minor b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* filters */
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--rule-strong); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; padding: 6px 12px; text-align: center; white-space: nowrap; font-weight: 500; color: var(--ink-2); background: transparent; }
.seg button + button { border-left: 1px solid var(--rule-strong); }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); font-weight: 600; }

/* chart */
.chart-box { position: relative; min-width: 0; }
.chart-box svg { display: block; width: 100%; height: auto; overflow: visible; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: pan-y; } /* touching the chart picks a tick: no text selection, copy menu or sideways scrolling; up and down still scrolls the page */
.chart-box .tip { pointer-events: none; user-select: none; -webkit-user-select: none; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .88rem; color: var(--ink-2); align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .dotk { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.legend .linek { width: 16px; height: 0; border-top: 3px dotted var(--muted); }
.tip { position: absolute; pointer-events: none; background: var(--panel); border: 1px solid var(--rule-strong); border-radius: 6px; padding: 8px 10px; font-size: .84rem; box-shadow: 0 4px 14px rgb(0 0 0 / .12); min-width: 170px; z-index: 2; }
.tip .row { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.tip .row span:first-child { display: inline-flex; gap: 6px; align-items: center; }
.empty-chart { padding: 40px 10px; text-align: center; color: var(--muted); }

.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.h2h { display: flex; align-items: center; justify-content: space-around; gap: 10px; text-align: center; }
.h2h .big { font-family: var(--display); font-size: 3rem; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.h2h .vs { color: var(--muted); font-family: var(--display); font-size: 1.2rem; }
.bar { height: 10px; border-radius: 5px; display: flex; overflow: hidden; gap: 2px; background: var(--rule); }
.bar i { display: block; height: 100%; }

/* tables */
.tbl-wrap { overflow-x: auto; min-width: 0; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; }
td.c, th.c { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.note { white-space: normal; min-width: 140px; color: var(--ink-2); }
tr:hover td { background: color-mix(in srgb, var(--accent-soft) 50%, transparent); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.topar-u { color: var(--good); font-weight: 600; }

/* dialog form */
.overlay { position: fixed; inset: 0; background: rgb(10 18 12 / .5); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; z-index: 20;
  padding-block: calc(24px + env(safe-area-inset-top, 0px)) calc(24px + env(safe-area-inset-bottom, 0px));
  padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
.sheet { background: var(--panel); border-radius: 10px; width: 100%; max-width: 680px; padding: 20px; display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--rule-strong); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
input, select, textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--bg); color: var(--ink); width: 100%; min-width: 0; }
/* Selects draw their own caret, 12px in from the edge (the browser's sits hard against it). Use background-color, not the background shorthand, on selects so the caret survives. */
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a857e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; padding-right: 34px; }
textarea { min-height: 60px; resize: vertical; }
fieldset { border: 1px solid var(--rule); border-radius: 8px; padding: 12px; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
legend { padding: 0 6px; font-family: var(--display); font-weight: 600; font-size: 1.1rem; display: inline-flex; gap: 8px; align-items: center; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.hint { font-size: .8rem; color: var(--muted); }
.err { color: var(--bad); font-size: .9rem; font-weight: 500; }
.sheet-foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; align-items: center; }
.toast.ok { background: var(--good); color: #fff; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 6px; font-weight: 600; z-index: 30; }
@media (prefers-reduced-motion: no-preference) { .toast { animation: rise .2s ease-out; } @keyframes rise { from { transform: translate(-50%, 8px); opacity: 0; } } }
/* hole-by-hole entry */
.playing { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; align-items: center; } /* chips are equal width */
.playing > .label { grid-column: 1 / -1; }
.chip { display: inline-flex; gap: 6px; align-items: center; justify-content: center; min-width: 0; padding: 4px 12px; border-radius: 999px; }
.chip[aria-pressed="false"] { opacity: .55; text-decoration: line-through; }
.hole-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
.hole-no { font-family: var(--display); font-size: 3.2rem; line-height: .9; font-weight: 700; font-variant-numeric: tabular-nums; }
.parpick { display: flex; align-items: center; gap: 6px; }
.parpick button { padding: 6px 14px; }
.parpick button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.thru { font-size: .86rem; color: var(--ink-2); display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
#hbh { display: flex; flex-direction: column; gap: 12px; }
.hp { border-left: 4px solid var(--pc); background: var(--bg); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.hp input { background: var(--panel); }
.hp-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ctrls { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: end; }
.ctr { display: flex; flex-direction: column; gap: 4px; }
.ctr .row { display: flex; align-items: center; gap: 4px; }
.ctr .row button { width: 40px; height: 40px; padding: 0; font-size: 1.25rem; line-height: 1; }
.cnt { min-width: 48px; height: 40px; display: grid; place-items: center; font-family: var(--display); font-size: 1.7rem; font-weight: 600; border-radius: 6px; background: var(--panel); border: 1px solid var(--rule); cursor: pointer; font-variant-numeric: tabular-nums; }
.cnt.unset { color: var(--muted); font-weight: 500; border-style: dashed; }
.fw { height: 40px; min-width: 100px; }
.fw[data-v="hit"] { background: var(--good); color: var(--panel); border-color: var(--good); }
.fw[data-v="miss"] { color: var(--bad); border-color: var(--bad); border-style: dashed; }
.gir { font-size: .78rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--rule-strong); color: var(--muted); }
.gir.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.hnav { display: flex; justify-content: space-between; gap: 8px; }
.strip { display: flex; gap: 4px; flex-wrap: wrap; }
.strip button { width: 36px; height: 36px; padding: 0; font-size: .85rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.strip button.done { background: var(--accent-soft); }
.strip button[aria-current="true"] { border: 2px solid var(--accent); font-weight: 700; }
/* scorecard view */
.card-tbl th, .card-tbl td { text-align: center; padding: 6px 4px; min-width: 34px; }
.card-tbl th:first-child, .card-tbl td:first-child { text-align: left; padding-left: 8px; position: sticky; left: 0; background: var(--panel); min-width: 96px; }
.card-tbl .sum { background: var(--accent-soft); font-weight: 700; }
.card-tbl tr.player-row td { border-top: 2px solid var(--rule-strong); font-weight: 600; }
.card-tbl tr.sub td { color: var(--ink-2); font-size: .82rem; }
.sc { display: inline-grid; place-items: center; width: 26px; height: 26px; font-variant-numeric: tabular-nums; }
.sc.u1 { border: 1.5px solid var(--ink); border-radius: 50%; }
.sc.u2 { border: 4px double var(--ink); border-radius: 50%; }
.sc.o1 { border: 1.5px solid var(--ink-2); }
.sc.o2 { border: 4px double var(--ink-2); }
.notes-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--ink-2); }
.holestats { border-top: 1px solid var(--rule); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; font-size: .88rem; color: var(--ink-2); }
.holestats .row { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.holestats b { color: var(--ink); font-variant-numeric: tabular-nums; }
.mixlab { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; }
.mixlab i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.ctr.sm .row button { width: 34px; height: 34px; font-size: 1.1rem; }
.ctr.sm .cnt { height: 34px; min-width: 40px; font-size: 1.3rem; }
.ctr select { width: auto; min-width: 150px; height: 40px; background-color: var(--panel); }
.teepick { display: flex; flex-wrap: wrap; gap: 4px; }
.teepick button { padding: 0 10px; height: 40px; font-weight: 500; }
.teepick button[aria-pressed="true"], .fw.toggle[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.sec-label { border-top: 1px dashed var(--rule-strong); padding-top: 8px; }
.ask { border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ask textarea { background: var(--panel); min-height: 64px; }
.ask-head, .ask-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ask-foot { justify-content: flex-start; }
.ask-foot .hint { color: var(--ink-2); flex: 1; min-width: 0; }
/* practice */
.prac { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.leaks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.leak { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid transparent; border-radius: 8px; } /* every row has the same padding, so the highlighted one lines up with the rest */
.leak.top { background: var(--accent-soft); border-color: var(--accent); }
.leak-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.leak-h .rank { font-family: var(--display); font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.leak-h b { font-size: 1rem; }
.leak-h .amt { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: .88rem; }
.start { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 1px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.leak .d { font-size: .86rem; color: var(--ink-2); }
@media (max-width: 520px) { .leak-h .amt { flex-basis: 100%; margin-left: 0; } } /* on phones the amount sits under the name in every row, so the "Start here" row lines up with the rest */
.lbar { height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.lbar i { display: block; height: 100%; background: var(--pc); border-radius: 3px; }
/* loading placeholders, shown until the first data arrives */
.skel { display: inline-block; vertical-align: middle; border-radius: 6px; background: var(--rule); max-width: 100%; }
.skel.bar-ph { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .skel { background: linear-gradient(90deg, var(--rule) 0%, var(--accent-soft) 50%, var(--rule) 100%); background-size: 200% 100%; animation: shimmer 1.2s ease-in-out infinite; }
  @keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
}
/* bottom navigation on phones */
.bnav { display: none; }
.bnav a, .bnav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; padding: 6px 2px; border: 0; border-radius: 0; background: none; color: var(--muted); font: 600 .7rem/1.1 var(--body); text-decoration: none; min-width: 0; position: relative; }
.bnav .ic { height: 24px; display: grid; place-items: center; font-size: 1.25rem; color: inherit; }
.bnav .ic svg { width: 22px; height: 22px; }
.bnav .ic .swatch { width: 14px; height: 14px; }
.bnav .nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.bnav [aria-current="page"] { color: var(--ink); }
.bnav [aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--pc, var(--accent)); }
.bnav .plus .ic { width: 50px; height: 50px; margin-top: -20px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 1.9rem; font-weight: 400; box-shadow: 0 4px 12px rgb(0 0 0 / .2); border: 3px solid var(--panel); }
.overlay.bottom { align-items: flex-end; padding-bottom: 0; }
.overlay.bottom .sheet { border-radius: 14px 14px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
.menu-list { display: flex; flex-direction: column; gap: 8px; }
.menu-list button { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; font-size: 1rem; }
.menu-list button .ic { width: 28px; text-align: center; font-size: 1.3rem; }
.menu-list button small { display: block; font-weight: 400; color: var(--ink-2); font-size: .82rem; }
/* desktop: Add and More drop down under their header button */
.menu-pop-wrap { position: relative; }
.menu-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 25; width: max-content; min-width: 260px; max-width: min(340px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 6px; box-shadow: 0 8px 24px rgb(0 0 0 / .14); }
.menu-pop .menu-list { gap: 2px; }
.menu-pop .menu-list button { border: 0; padding: 10px 12px; background: transparent; }
.menu-pop .menu-list button:hover:not(:disabled), .menu-pop .menu-list button:focus-visible { background: var(--accent-soft); }
@media (max-width: 700px) {
  nav.tabs, .add-top { display: none; }
  header.top { justify-content: space-between; padding-bottom: 8px; }
  .bnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: var(--panel); border-top: 1px solid var(--rule); padding: 0 max(4px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(4px, env(safe-area-inset-left, 0px)); box-shadow: 0 -2px 10px rgb(0 0 0 / .06); }
  .wrap { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  /* Phones: no scroll bars on the page, wide tables or the frame strip (they still scroll by swiping). */
  html, body, .tbl-wrap, .frames, .overlay { scrollbar-width: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar, .tbl-wrap::-webkit-scrollbar, .frames::-webkit-scrollbar, .overlay::-webkit-scrollbar { display: none; }
}
/* your name in the header: opens your stats */
header.top { position: relative; }
.mebtn { display: inline-flex; align-items: center; gap: 8px; max-width: 160px; min-height: 40px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--panel); color: var(--ink); text-decoration: none; font-weight: 600; flex: none; }
.mebtn .swatch { width: 16px; height: 16px; }
.mebtn .emo { font-size: 18px; line-height: 1; }
.mename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mebtn:hover { border-color: var(--accent); }
.mebtn[aria-current="page"] { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.ulink { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.plink:hover .ulink { text-decoration-color: currentColor; }
/* footer */
.foot { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; padding-top: 12px; border-top: 1px solid var(--rule); font-size: .82rem; color: var(--muted); }
.foot a { color: var(--ink-2); }
/* feed */
.feed { gap: 10px; }
.fday { margin-top: 8px; }
.fitem { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; font-weight: 400; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 8px; background: var(--bg); }
.fitem:hover { border-color: var(--accent); }
.fitem.flite { padding: 10px 14px; gap: 2px; background: transparent; }
.fitem.flite:hover { border-color: var(--rule); }
.fitem.flive { border-color: var(--accent); background: var(--accent-soft); }
.live-tag { margin-left: auto; flex: none; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); border-radius: 10px; padding: 1px 8px; }
a.plink { color: inherit; text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
a.plink:hover { text-decoration-color: var(--accent); }
.fwho { display: flex; align-items: center; gap: 8px; line-height: 1.3; }
.fwho .emo, .fwho .swatch { margin-right: -2px; }
.fsub { font-size: .86rem; color: var(--ink-2); }
.fscores { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.fscore { display: inline-flex; align-items: baseline; gap: 6px; }
.fscore b { font-family: var(--display); font-size: 1.4rem; }
.fnote { font-size: .88rem; color: var(--ink-2); }
/* hole memory */
.memo { list-style: none; margin: 0; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; font-size: .86rem; color: var(--ink-2); }
.memo li { display: flex; gap: 8px; align-items: baseline; }
.memo li i { font-style: normal; flex: none; width: 1.1em; text-align: center; font-weight: 700; }
.memo .good i { color: var(--good); } .memo .warn i { color: var(--bad); } .memo .info i { color: var(--muted); }
.memo .warn { color: var(--ink); }
.yds { display: flex; flex-direction: column; gap: 2px; }
.yds input { width: 96px; height: 40px; }
.ytbl input { width: 76px; padding: 6px 8px; }
.ytbl select { width: 64px; padding: 6px 22px 6px 6px; background-position: right 6px center; background-size: 10px; }
.ytbl td, .ytbl th { padding: 4px 6px; }
/* tabs between the overview and each player's profile */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); margin-top: -8px; }
.tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--ink-2); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--pc, var(--accent)); }
/* your round / practice in progress: a tab with a red dot after the label */
.tabs .live-tab { gap: 6px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); flex: none; position: relative; top: -5px; }
.plink { color: inherit; text-decoration: none; }
.plink:hover h3 { text-decoration: underline; }
/* profile */
.view { display: flex; flex-direction: column; gap: 20px; }
.phero { border-top: 4px solid var(--pc); }
.phero .who { display: flex; align-items: center; gap: 10px; }
.phero .who .emo, .pcard .who .emo { font-size: 1.9rem; }
.emo-picks, .color-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.emo-picks button { width: 44px; height: 44px; padding: 0; font-size: 1.4rem; }
.emo-picks button[aria-pressed="true"], .color-picks button[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 1px; }
.color-picks button { width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 2px solid var(--panel); }
.preview { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 1.6rem; font-weight: 600; border-bottom: 3px solid var(--pc); padding-bottom: 6px; align-self: flex-start; }
.phero .who h2 { font-size: 2rem; text-transform: none; letter-spacing: .01em; }
.phero .stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.sw { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sw li { border-left: 3px solid var(--k); padding: 2px 0 2px 10px; display: flex; flex-direction: column; gap: 2px; }
.sw li b { font-weight: 600; }
.sw li .d { font-size: .88rem; color: var(--ink-2); }
.sw.good { --k: var(--good); } .sw.bad { --k: var(--bad); }
/* Strengths and Weaknesses: the colored line runs down the whole container (like Coach's read), not beside each item. */
.panel.sgood { border-left: 4px solid var(--good); } .panel.sbad { border-left: 4px solid var(--bad); }
.sgood .sw li, .sbad .sw li { border-left: 0; padding-left: 0; }
.src { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border: 1px solid var(--rule-strong); border-radius: 999px; padding: 0 7px; margin-left: 6px; vertical-align: 1px; white-space: nowrap; }
.coach { border-left: 4px solid var(--accent); }
.plan { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.plan li .d { font-size: .88rem; color: var(--ink-2); }
.callout { background: var(--accent-soft); border-radius: 6px; padding: 10px 12px; }
.balance { display: flex; flex-direction: column; gap: 12px; }
.bal-row { display: grid; grid-template-columns: 140px 1fr; gap: 4px 12px; align-items: center; font-size: .88rem; }
.bal-row .nm { font-weight: 600; grid-row: span 2; }
.bal-bar { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.bal-bar i { display: block; height: 8px; border-radius: 4px; min-width: 2px; }
.bal-bar i.need { background: var(--bad); } .bal-bar i.time { background: var(--accent); }
.bal-key { display: flex; gap: 2px 16px; flex-wrap: wrap; font-size: .82rem; color: var(--ink-2); }
.bal-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.scard { border: 1px solid var(--rule); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: var(--bg); text-align: left; font-weight: 400; }
.scard:hover { border-color: var(--accent); }
.scard .top { display: flex; justify-content: space-between; gap: 8px; }
.scard .focus { font-weight: 600; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { font-size: .76rem; padding: 1px 8px; border-radius: 999px; background: var(--panel); border: 1px solid var(--rule-strong); }
.tag.major { border-color: var(--bad); color: var(--bad); }
/* practice entry */
.blocks { display: flex; flex-direction: column; gap: 10px; }
.block { border-left: 4px solid var(--accent); background: var(--bg); border-radius: 6px; padding: 10px 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px 10px; align-items: end; }
.block input, .block select { background-color: var(--panel); }
.block .wide2 { grid-column: span 2; }
.feel button { min-width: 44px; }
/* swing capture */
.vid { width: 100%; max-height: 52vh; background: #000; border-radius: 6px; display: block; object-fit: contain; }
.scrub { display: flex; flex-direction: column; gap: 8px; }
.scrub input[type=range] { padding: 0; accent-color: var(--accent); }
.scrub .row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.scrub .row button { min-width: 44px; }
.frames { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.frame { position: relative; flex: none; width: 96px; display: flex; flex-direction: column; gap: 2px; font-size: .74rem; color: var(--ink-2); }
.frame img { width: 96px; height: 128px; object-fit: cover; border-radius: 4px; background: #000; cursor: pointer; }
.frame button { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; padding: 0; border-radius: 50%; font-size: .8rem; line-height: 1; }
.filebtn { position: relative; display: inline-flex; }
.filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.analysis { display: flex; flex-direction: column; gap: 12px; }
.analysis h3 { font-size: 1.15rem; }
.fault { border-left: 3px solid var(--k, var(--rule-strong)); padding-left: 10px; display: flex; flex-direction: column; gap: 2px; }
.fault.major { --k: var(--bad); } .fault.minor { --k: var(--flag); }
.fault .d { font-size: .88rem; color: var(--ink-2); }
@media (max-width: 480px) { .bal-row { grid-template-columns: 1fr; } .bal-row .nm { grid-row: auto; } .stats { grid-template-columns: repeat(2, 1fr); } h1 { font-size: 2rem; } }

.balls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.balls input { width: 7em; }
.balls-add { display: flex; gap: 6px; }
.balls-add button { min-height: 44px; }

.icon-btn { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); }
.icon-btn:hover { color: var(--ink); }
.phero .who .icon-btn { margin-left: -6px; position: relative; top: 2px; } /* sit a little closer to the name, on its baseline */
.course-field { display: flex; flex-direction: column; gap: 6px; }
.hole-fact { font-family: var(--display); font-size: 1.5rem; line-height: 1; }
#form-add input[readonly] { background: transparent; border-color: transparent; padding-left: 0; font-weight: 600; } /* course facts: shown, not edited */

/* Never let anything make the page wider than the screen (iPhone Safari wobbles sideways otherwise). */
html, body { max-width: 100%; overflow-x: clip; }

/* iPhone Safari zooms in on any text box with text under 16px and stays zoomed after the keyboard closes (the page
   then slides sideways). On touch screens, every text box gets at least 16px text, so it never zooms. Pinch-zoom
   still works. */
@media (pointer: coarse) { input, select, textarea { font-size: max(16px, 1em) !important; } }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.linkbtn:hover { text-decoration-color: var(--accent); }

/* Your Practice table: each session opens to show its drills */
.sess-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 2px; min-height: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; }
.sess-toggle .chev { color: var(--muted); transition: transform .15s; flex: none; }
.sess-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
.sess-row[data-open="true"] td { border-bottom-color: transparent; }
.sess-drills td { padding-top: 0; }
.sess-drills ol { list-style: decimal; margin: 0; padding: 4px 0 8px 46px; display: flex; flex-direction: column; gap: 6px; }
.sess-drills li { display: list-item; }
.sess-drills li > .drill-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.sess-drills li::marker { color: var(--muted); font-size: .9em; }