/* Course Notes: a caddie book, reimagined. Paper, ink, forest and a little orange. */
:root {
  --paper: #f6f4ec;
  --paper-2: #eeebe1;
  --card: #fbfaf5;
  --ink: #252924;
  --ink-2: #5d635c;
  --line: #ddd8ca;
  --forest: #294737;
  --forest-soft: #dfe6dc;
  --orange: #ed6b36;
  --orange-soft: #fbe3d7;

  /* Names the app code already uses */
  --bg: var(--paper);
  --surface: var(--card);
  --surface-2: var(--paper-2);
  --text: var(--ink);
  --muted: var(--ink-2);
  --brand: var(--forest);
  --brand-ink: var(--paper);
  --brand-soft: var(--forest-soft);
  --accent: var(--orange);
  --danger: #b8402a;
  --ob: #c8372d;
  --fairway: #9db897;
  --dot: rgba(255, 255, 255, 0.95);
  --dot-ring: rgba(20, 30, 25, 0.75);
  --radius: 6px;
  --shadow: 0 1px 0 rgba(37, 41, 36, 0.04), 0 6px 18px -10px rgba(37, 41, 36, 0.25);

  --f-display: "Anton", "Oswald", Impact, "Arial Narrow", sans-serif;
  --f-head: "Oswald", "Arial Narrow", sans-serif;
  --f-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-hand: "Caveat", "Bradley Hand", cursive;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.5 var(--f-text);
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;
}
/* Faint topographic contours behind everything, like a field map. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cg fill='none' stroke='%23d9d3c3' stroke-width='1'%3E%3Cpath d='M380 40c60 10 110 60 100 120s-70 80-130 70-90-60-80-110 50-90 110-80z'/%3E%3Cpath d='M375 70c40 6 75 40 68 82s-48 55-90 48-60-40-54-74 34-62 76-56z'/%3E%3Cpath d='M370 100c22 3 40 22 36 45s-26 30-48 26-32-22-29-40 19-34 41-31z'/%3E%3Cpath d='M-20 330c80-40 160-20 210 30s60 130 0 170-170 20-230-20'/%3E%3Cpath d='M-20 365c60-28 125-14 165 24s45 100 0 130-130 14-178-16'/%3E%3Cpath d='M-20 400c40-18 88-8 116 18s32 70 0 92-92 10-126-12'/%3E%3Cpath d='M200 520c20-60 80-90 150-80s120 50 190 30'/%3E%3Cpath d='M240 520c18-40 62-60 112-54s90 34 168 16'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 520px 520px;
}
a { color: var(--forest); }
h1, h2, h3 { margin: 0; line-height: 1.05; font-weight: 400; }
h1 { font-family: var(--f-display); font-size: 2.6rem; letter-spacing: 0.005em; }
h2 { font-family: var(--f-head); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.01em; }
h3 { font-family: var(--f-mono); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-2); }
.eyebrow { font-family: var(--f-mono); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-2); }
.hand { font-family: var(--f-hand); color: var(--orange); font-size: 1.45rem; line-height: 1; text-decoration: none; display: inline-flex; flex-direction: column; align-items: flex-end; transform: rotate(-4deg); }
.hand::after { content: ""; width: 72%; height: 7px; margin-top: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8'%3E%3Cpath d='M2 6c25-4 60-6 96-3' fill='none' stroke='%23ed6b36' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top));
  background: rgba(246, 244, 236, 0.94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line); color: var(--ink);
}
.brand { color: var(--ink); text-decoration: none; font-family: var(--f-head); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.32em; text-transform: uppercase; white-space: nowrap; }
.toplinks { display: flex; gap: 18px; }
.toplink { color: var(--ink); font-size: 0.85rem; text-decoration: none; padding: 6px 0 5px; border-bottom: 2px solid transparent; white-space: nowrap; }
.toplink[aria-current] { border-bottom-color: var(--orange); }

main { max-width: 760px; margin: 0 auto; padding: 20px 16px 28px; }
.stack > * + * { margin-top: 16px; }
.muted { color: var(--ink-2); }
.small { font-size: 0.85rem; }

.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); padding: 16px; }
.card.flush { padding: 0; overflow: hidden; }

.hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.facts { display: flex; gap: 14px; flex-wrap: wrap; color: var(--ink-2); font-size: 0.92rem; }
.facts b { color: var(--ink); }
.pin { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; color: var(--ink); white-space: nowrap; }
.pin svg { width: 12px; height: 12px; fill: var(--ink); }

.progress { display: flex; align-items: center; gap: 12px; }
.progress .bar { flex: 1; height: 4px; border-radius: 2px; background: var(--paper-2); overflow: hidden; }
.progress .bar span { display: block; height: 100%; background: var(--orange); }

/* ---------- Home: find your next round ---------- */
.homehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.homehead h1 { font-size: clamp(2.4rem, 9vw, 3.4rem); }
.motto { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); line-height: 1.7; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.search { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 14px; }
.search svg { width: 17px; height: 17px; stroke: var(--ink); flex: 0 0 auto; }
.search input[type=text] { border: 0; background: transparent; padding: 13px 0; border-radius: 0; }
.search:focus-within { border-color: var(--ink-2); }
.search input[type=text]:focus { outline: none; }
.coursegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.coursecard { display: block; color: inherit; text-decoration: none; padding: 0; overflow: hidden; transition: transform 0.15s ease; }
.coursecard:hover { transform: translateY(-2px); }
.coursecard .cover { aspect-ratio: 16 / 10; background: var(--forest-soft); overflow: hidden; }
.coursecard .cover img, .coursecard .cover svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.coursecard .body { padding: 12px 14px 14px; }
.coursecard .namerow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.coursecard h2 { font-family: var(--f-display); font-weight: 400; font-size: 1.7rem; letter-spacing: 0.01em; }
.coursecard .meta { color: var(--ink-2); font-size: 0.88rem; margin-top: 2px; }
.coursecard .more { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 0.8rem; color: var(--ink-2); }
.coursecard .more .go { color: var(--orange); font-weight: 600; }
.credit { font-size: 0.8rem; color: var(--ink-2); }

/* ---------- Hole page ---------- */
.coursehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px 16px; flex-wrap: wrap; }
.coursehead .title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.coursehead h1 { font-size: clamp(2.1rem, 8vw, 2.8rem); }
.coursehead .back { font-size: 0.8rem; color: var(--ink-2); text-decoration: none; display: block; margin-bottom: 4px; }

/* Hole tabs, like page markers in a caddie book */
.holetabs { position: sticky; top: var(--topbar-h, 54px); z-index: 9; display: flex; overflow-x: auto; scrollbar-width: none; margin: 14px -16px 0; padding: 0 16px; background: rgba(246, 244, 236, 0.96); border-bottom: 1px solid var(--line); }
.holetabs::-webkit-scrollbar { display: none; }
.hn { flex: 0 0 auto; position: relative; min-width: 48px; padding: 12px 10px 11px; text-align: center; font-family: var(--f-mono); font-weight: 500; font-size: 0.82rem; color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.hn.done::after { content: ""; position: absolute; top: 6px; right: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--forest); }
.hn[aria-current] { border-bottom-color: var(--orange); font-weight: 700; }

/* The page: a card with a turned-up corner */
.notebook { position: relative; margin-top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 16px 14px; }
.notebook::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 30px; height: 30px; background: linear-gradient(135deg, var(--paper) 0 48%, #e7e2d4 50%, #f3f0e7 75%, #fff 100%); border-top-left-radius: 6px; box-shadow: -2px -2px 4px rgba(37, 41, 36, 0.12); }
.holehead2 { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.holehead2 .left { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.holehead2 h2.hole-title { font-family: var(--f-display); font-weight: 400; font-size: 2.3rem; line-height: 1; }
.holehead2 .stats { font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; padding-left: 14px; border-left: 1px solid var(--line); }
.notebook .photowrap { border-radius: 4px; overflow: hidden; }
.col { padding: 6px 0 4px; min-width: 0; margin-top: 14px; }
.col + .col { border-top: 1px solid var(--line); padding-top: 14px; }
.colhead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.colhead svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 1.6; flex: 0 0 auto; }
.colhead h2 { font-size: 1.15rem; }
.most { font-size: 0.9rem; }
.most b { font-weight: 600; }
.pagefoot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 12px; padding-right: 26px; border-top: 1px solid var(--line); }
.nextlink { color: var(--orange); font-weight: 600; text-decoration: none; font-size: 0.92rem; }
.nextlink:hover { text-decoration: underline; }

/* ---------- Buttons & forms ---------- */
.btn { white-space: nowrap; appearance: none; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: inherit; font-weight: 600; font-size: 0.92rem; padding: 10px 16px; border-radius: var(--radius); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; }
.btn.primary { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.btn.accent { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.small-btn { min-height: 34px; padding: 5px 12px; font-size: 0.85rem; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }

label.field { display: block; }
label.field > span, .field-label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; }
.field-label em, label.field > span em { font-weight: 400; font-style: normal; color: var(--ink-2); }
input[type=text], input[type=email], input[type=password], textarea { width: 100%; font: inherit; padding: 11px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); color: var(--ink); }
textarea { min-height: 84px; resize: vertical; }
input:focus, textarea:focus, .btn:focus-visible, .seg button:focus-visible, .hn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button { appearance: none; font: inherit; font-size: 0.9rem; border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 8px 14px; border-radius: var(--radius); cursor: pointer; min-height: 38px; }
.seg button[aria-pressed=true] { background: var(--forest); border-color: var(--forest); color: var(--paper); font-weight: 600; }
.seg .opt { font-style: normal; font-weight: 400; font-size: 0.72rem; opacity: 0.75; margin-left: 2px; }
.linkbtn { appearance: none; border: 0; background: none; color: var(--danger); font: inherit; font-size: 0.88rem; cursor: pointer; padding: 6px; }
.linkbtn.tobag, .linkbtn.edit { color: var(--forest); font-weight: 600; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Editor header ("Plan · Hole 4") */
.holehead { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.holehead .big { font-family: var(--f-display); font-size: 2.1rem; line-height: 1; }

/* ---------- Mini map ---------- */
.minimap { display: block; width: 100%; height: auto; background: #e9eee4; }
.minimap .fair { stroke: var(--fairway); stroke-width: 14; stroke-linecap: round; fill: none; opacity: 0.9; }
.minimap .flight { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; opacity: 0.55; }
.minimap .ob { stroke: var(--ob); stroke-width: 2.5; fill: none; stroke-dasharray: 6 4; }
.minimap .tee { fill: var(--ink); }
.minimap .basket { fill: var(--orange); stroke: var(--card); stroke-width: 2; }
.minimap text { fill: var(--ink-2); font-size: 11px; font-family: var(--f-mono); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 8px 2px 0; font-size: 0.78rem; color: var(--ink-2); }
.legend i { display: inline-block; width: 14px; height: 0; border-top: 2.5px dashed var(--ob); vertical-align: middle; margin-right: 5px; }
.legend i.b { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--orange); }
.legend i.t { width: 10px; height: 6px; border: 0; background: var(--ink); }
.mapcard { margin-top: 12px; border-top: 1px solid var(--line); }
.mapcard > summary { padding: 10px 0; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.mapcard > summary::-webkit-details-marker { display: none; }
.mapcard > summary::after { content: "Show +"; }
.mapcard[open] > summary::after { content: "Hide –"; }
.mapcard .minimap { border-radius: 4px; }
.card.mapcard { margin-top: 0; border-top: 1px solid var(--line); }
.card.mapcard > summary { padding: 12px 16px; }

/* ---------- Photo + targets ---------- */
.photo { position: relative; line-height: 0; background: #1e221f; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
/* Portrait photos are capped in height and centred; the box shrinks with the image so
   aim points and lines (positioned in % of the box) stay on the right spot. */
.photo { width: fit-content; max-width: 100%; margin: 0 auto; }
.photo img { display: block; width: auto; max-width: 100%; height: auto; max-height: 70vh; }
.notebook .photowrap { background: var(--paper-2); }
.photo.pickable { cursor: crosshair; }
.photo.drawing { touch-action: none; cursor: crosshair; }
.target { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 2px var(--dot-ring), 0 1px 4px rgba(0,0,0,0.5); pointer-events: none; }
.target.others { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; background: rgba(255, 214, 102, 0.95); }
.target.mine { width: 26px; height: 26px; margin: -13px 0 0 -13px; background: transparent; box-shadow: 0 0 0 3px var(--orange), 0 0 0 5px rgba(255,255,255,0.85); }
.target.mine::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--orange); }
.photo .hint { position: absolute; left: 10px; bottom: 10px; right: 10px; line-height: 1.3; font-size: 0.85rem; color: #fff; background: rgba(20, 24, 21, 0.62); padding: 8px 10px; border-radius: 4px; pointer-events: none; }
.nophoto { padding: 36px 16px; text-align: center; background: var(--paper-2); line-height: 1.4; border-radius: 4px; }
.nophoto p { margin: 0 0 4px; }

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.thumb { appearance: none; padding: 0; border: 2px solid transparent; border-radius: 4px; overflow: hidden; background: var(--paper-2); cursor: pointer; position: relative; aspect-ratio: 4 / 3; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb[aria-pressed=true] { border-color: var(--orange); }
.thumb .count { position: absolute; right: 6px; bottom: 6px; font-size: 0.72rem; background: rgba(20,24,21,0.7); color: #fff; padding: 2px 7px; border-radius: 3px; font-family: var(--f-mono); }
.thumb.add { display: grid; place-items: center; border: 1.5px dashed var(--ink-2); color: var(--forest); font-weight: 600; font-size: 0.85rem; text-align: center; padding: 8px; background: transparent; }
.photoswitch { margin-top: 10px; }
.guide { background: var(--paper-2); border-radius: var(--radius); padding: 12px 14px; font-size: 0.9rem; }
.guide ul { margin: 6px 0 0; padding-left: 20px; }

/* Flight lines */
.flightlayer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.flightlayer path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.fl-halo { stroke: rgba(255, 255, 255, 0.55); stroke-width: 7; }
.fl-mine { stroke: var(--orange); stroke-width: 4; }
.fl-other { stroke: rgba(255, 214, 102, 0.8); stroke-width: 3; }
.fl-live { stroke: #fff; stroke-width: 4; stroke-dasharray: 2 6; }
.flightend { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: rgba(255, 214, 102, 0.95); box-shadow: 0 0 0 2px rgba(20, 30, 25, 0.6); pointer-events: none; }
.flightend.mine { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--orange); box-shadow: 0 0 0 2px #fff; }

/* Label next to your aiming point on the photo */
.callout { position: absolute; display: flex; align-items: center; gap: 7px; padding: 6px 10px 6px 7px; border-radius: 4px; background: rgba(251, 250, 245, 0.94); color: var(--ink); font-size: 0.8rem; line-height: 1.15; white-space: nowrap; pointer-events: none; transform: translate(18px, -50%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); border-left: 3px solid var(--orange); }
.callout.l { transform: translate(calc(-100% - 18px), -50%); border-left: 0; border-right: 3px solid var(--orange); }
.callout b { display: block; font-family: var(--f-head); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; }
.callout span { display: block; color: var(--ink-2); font-size: 0.72rem; }
.callout .discicon { color: var(--ink-2); width: 34px; height: 19px; }

/* ---------- Stats ---------- */
.stat + .stat { margin-top: 14px; }
.bars { margin-top: 6px; display: grid; gap: 5px; }
.barrow { display: grid; grid-template-columns: 92px 1fr 40px; gap: 10px; align-items: center; font-size: 0.88rem; }
.barrow .track { height: 6px; background: var(--paper-2); border-radius: 3px; overflow: hidden; }
.barrow .fill { display: block; height: 100%; background: var(--forest); }
.barrow.top .fill { background: var(--orange); }
.barrow .pct { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; font-family: var(--f-mono); font-size: 0.78rem; }
.barrow .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.stat.wide .barrow { grid-template-columns: 1fr 40px; row-gap: 3px; }
.stat.wide .lbl { grid-column: 1 / -1; }
.allstats { margin-top: 10px; }
.allstats > summary { cursor: pointer; color: var(--forest); font-weight: 600; font-size: 0.85rem; list-style: none; }
.allstats > summary::-webkit-details-marker { display: none; }
.allstats[open] > summary { margin-bottom: 10px; }
.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.statgrid .stat + .stat { margin-top: 0; }
.plansHead { margin: 20px 0 10px; }
.otherplans { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.otherplan { border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; min-width: 0; }
.otherplan .eyebrow { margin-bottom: 6px; }
#more-plans { margin-top: 12px; }

.locked { text-align: left; }

/* ---------- Plan summary ---------- */
.summary dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 10px 0 0; font-size: 0.9rem; }
.summary dt { color: var(--ink-2); font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 2px; }
.summary dd { margin: 0; }
.cap, .summary dd.cap { text-transform: capitalize; }
.shots { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.shots li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; }
.shotno { width: 34px; height: 26px; border-radius: 3px; display: grid; place-items: center; font-family: var(--f-mono); font-size: 0.72rem; font-weight: 600; background: var(--paper-2); color: var(--ink); }
.shots li:first-child .shotno { background: var(--forest); color: var(--paper); }
.summary .shots + dl { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 10px; }
.notes { list-style: none; padding: 0; margin: 8px 0 0; }
.notes li { padding: 10px 12px; background: var(--paper-2); border-radius: 4px; font-size: 0.9rem; white-space: pre-wrap; }
.notes li + li { margin-top: 8px; }

/* Release angle as a picture */
.discicon { width: 40px; height: 22px; flex: 0 0 auto; }
.discicon line { stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.5; }
.discicon ellipse { fill: var(--orange); stroke: rgba(0, 0, 0, 0.35); stroke-width: 1; }
.shots .discicon { color: var(--ink-2); }

/* ---------- Plan editor ---------- */
.shotcard { border: 1px dashed var(--line); border-radius: var(--radius); padding: 12px; background: var(--paper); }
.shotcard > .row { margin-bottom: 10px; }
.sticky-save { position: sticky; bottom: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--paper) 70%, rgba(246,244,236,0)); }
.anglectl { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px 12px; }
.anglectl .angle-val { font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; }
.anglesvg { display: block; width: 100%; max-width: 320px; height: auto; margin: 4px auto 6px; }
.anglesvg .a-ref { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.6; }
.anglesvg .a-rim { fill: var(--orange); stroke: rgba(0, 0, 0, 0.35); stroke-width: 1.5; }
.anglesvg .a-dome { fill: rgba(255, 255, 255, 0.35); }
.anglesvg .a-disc { transition: transform 0.08s linear; }
.anglesvg .a-side { fill: var(--ink-2); font-size: 11px; font-weight: 600; font-family: var(--f-mono); }
.anglesvg .a-cap { fill: var(--ink-2); font-size: 9px; font-family: var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.anglerow { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.anglerow input[type=range] { width: 100%; accent-color: var(--orange); }

/* ---------- Bag + discs ---------- */
.bagchips { display: flex; flex-wrap: wrap; gap: 8px; }
.bagchip { appearance: none; font: inherit; font-size: 0.88rem; border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 7px 12px; border-radius: var(--radius); cursor: pointer; min-height: 38px; }
.bagchip span { color: var(--ink-2); font-size: 0.78rem; }
.bagchip[aria-pressed=true] { background: var(--forest); border-color: var(--forest); color: var(--paper); font-weight: 600; }
.bagchip[aria-pressed=true] span { color: inherit; opacity: 0.8; }
.bagchip .cdot { margin-right: 4px; }
.baglist { list-style: none; margin: 0; padding: 0; }
.baglist li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 16px; }
.baglist li + li { border-top: 1px solid var(--line); }
.baglist li.editing { background: var(--orange-soft); }
.cdot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sw { appearance: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); cursor: pointer; padding: 0; }
.sw.none { background: var(--card); color: var(--ink-2); font-weight: 700; }
.sw[aria-checked=true] { border-color: var(--card); box-shadow: 0 0 0 2.5px var(--ink); }
.pickeddisc { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }

/* ---------- Log in + profile ---------- */
.authwrap { max-width: 440px; margin: 0 auto; }
.googlebtn { display: flex; justify-content: center; min-height: 44px; }
.ordivider { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; }
.ordivider::before, .ordivider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.unit { position: relative; display: block; }
.unit input { padding-right: 34px; }
.unit i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--ink-2); font-family: var(--f-mono); font-size: 0.85rem; pointer-events: none; }
.distfield > span:first-child { font-weight: 500; }

/* ---------- My game plan ---------- */
.scorewrap { padding: 8px 10px; }
.scorecard { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.78rem; font-family: var(--f-mono); }
.scorecard + .scorecard { margin-top: 8px; border-top: 1px solid var(--line); }
.scorecard th, .scorecard td { text-align: center; padding: 4px 0; font-weight: 400; }
.scorecard th[scope=row] { text-align: left; color: var(--ink-2); width: 3.2em; letter-spacing: 0.06em; }
.scorecard td:last-child, .scorecard th:last-child { width: 2.8em; }
.scorecard .jump { appearance: none; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; padding: 2px 0; width: 100%; }
.scorecard .tick { color: var(--orange); font-weight: 700; }
.boardhole { scroll-margin-top: 70px; }
.boardhole > header { padding: 10px 12px 10px 14px; }
.boardhole .holeno { font-family: var(--f-display); font-size: 1.4rem; margin-right: 8px; }
.boardhole .photo { border-radius: 0; }
.boardnote { padding: 8px 16px 16px; }

/* ---------- Stamp (replaces the toast) ---------- */
#toast { position: fixed; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); transform: translateX(-50%) rotate(-1.5deg); z-index: 20; display: flex; align-items: center; gap: 10px; background: var(--card); color: var(--ink); border: 1px solid var(--line); padding: 10px 16px 10px 12px; border-radius: var(--radius); box-shadow: 0 10px 28px -12px rgba(37, 41, 36, 0.45); font-weight: 600; max-width: calc(100% - 32px); }
#toast .check { width: 26px; height: 26px; flex: 0 0 auto; stroke: var(--orange); fill: none; stroke-width: 2; }
#toast .arrow { width: 38px; height: 22px; flex: 0 0 auto; stroke: var(--orange); fill: none; stroke-width: 2; stroke-linecap: round; margin-left: 2px; }
#toast[hidden] { display: none; }
#toast:not([hidden]) { animation: stamp 0.25s ease-out; }
@keyframes stamp { from { transform: translateX(-50%) rotate(-1.5deg) scale(1.15); opacity: 0; } to { transform: translateX(-50%) rotate(-1.5deg) scale(1); opacity: 1; } }

.error { color: var(--danger); font-weight: 600; }

@media (max-width: 560px) {
  main { padding-top: 14px; }
  .coursehead .back { display: none; }
  .coursehead h1 { font-size: 1.9rem; }
  .coursehead .title { gap: 8px; }
  .holetabs { margin-top: 8px; }
  .notebook { margin-top: 12px; padding: 12px 12px 10px; }
  .holehead2 { margin-bottom: 10px; }
  .holehead2 .left { flex-wrap: nowrap; gap: 10px; }
  .holehead2 .stats { font-size: 0.7rem; letter-spacing: 0.1em; padding-left: 10px; white-space: nowrap; }
  .hand { font-size: 1.25rem; }
  .photo img { max-height: 52vh; }
  .statgrid { grid-template-columns: 1fr; }
  .holehead2 h2.hole-title { font-size: 1.75rem; }
  .barrow { grid-template-columns: 80px 1fr 36px; }
  .motto { display: none; }
}
@media (max-width: 420px) {
  .brand { letter-spacing: 0.2em; font-size: 0.85rem; }
  .toplinks { gap: 12px; }
  .toplink { font-size: 0.8rem; }
}
@media print {
  .topbar, .btn, .holetabs, #toast { display: none !important; }
  body { background: #fff; }
  body::before { display: none; }
  .card, .notebook { box-shadow: none; }
  .boardhole { break-inside: avoid; }
}
.plannote { margin: 0; font-size: 0.95rem; line-height: 1.45; white-space: pre-wrap; }
.shots + .plannote { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.plannote + dl { margin-top: 8px; }

/* Empty states (e.g. My bag when logged out) */
.emptystate { text-align: center; align-items: center; padding: 28px 20px; }
.emptystate svg { width: 64px; height: 64px; fill: none; stroke: var(--forest); stroke-width: 2.5; }
.emptystate h1 { margin: 0; }
.forgotlink { display: block; text-align: center; }