:root {
  /* paper (light, default) */
  --paper: #f1f4ea;
  --paper-raised: #fbfcf7;
  --ink: #172018;
  --ink-dim: #5c6b5a;
  --line: #d8dfc9;
  --accent: #1f4d36;
  --accent-contrast: #f1f4ea;
  --accent-soft: rgba(31, 77, 54, 0.1);
  --shadow: 0 10px 28px -14px rgba(23, 32, 24, 0.28);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #10170f;
    --paper-raised: #171f16;
    --ink: #ecf0e5;
    --ink-dim: #96a691;
    --line: #2a362a;
    --accent: #d9b45c;
    --accent-contrast: #17210e;
    --accent-soft: rgba(217, 180, 92, 0.14);
    --shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  --paper: #10170f;
  --paper-raised: #171f16;
  --ink: #ecf0e5;
  --ink-dim: #96a691;
  --line: #2a362a;
  --accent: #d9b45c;
  --accent-contrast: #17210e;
  --accent-soft: rgba(217, 180, 92, 0.14);
  --shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.55);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
}

body {
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* min-height is shy of a full 100vh by exactly body's own bottom padding (see
   above) -- otherwise the two stack to just past the viewport on every view,
   forcing a sliver of scroll even when there's nowhere near enough content to
   need it. */
.app {
  max-width: 560px;
  margin: 0 auto;
  min-height: calc(100vh - 28px - env(safe-area-inset-bottom));
}

/* ---------- Masthead ---------- */
.masthead {
  padding: calc(22px + env(safe-area-inset-top)) 20px 18px;
  border-bottom: 3px solid var(--ink);
  /* Pinned above every view (Achievements/Leaderboard's own sticky header rows
     below stack under it via --masthead-h, measured in app.js's
     updateStickyHeaderOffsets and kept live on resize) so the score card and app
     version stay visible while a long list scrolls underneath. */
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--paper);
}

.masthead-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 18px;
}

.masthead-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.menu-btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  transform: translateY(3px);
}

.wordmark {
  margin: 0;
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-wrap: balance;
}

.wordmark-sub {
  font-family: "Spline Sans Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
  text-transform: uppercase;
}

.score-label {
  display: block;
  font-family: "Spline Sans Mono", monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 6px;
}

.score-block {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 14px;
}

.score-number {
  position: relative;
  display: inline-block;
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 72px;
  line-height: 0.82;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.score-gain-badge {
  position: absolute;
  left: 0;
  top: -46px;
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--accent-contrast);
  background: var(--accent);
  padding: 4px 10px;
  transition: transform 0.9s cubic-bezier(0.3, 1.4, 0.6, 1);
}

.score-gain-badge.floating {
  background: none;
  color: var(--accent);
  padding: 0;
  transition: transform 1.1s ease-out, opacity 1.1s ease-out;
}

.score-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 6px;
}

.rank-name {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.unlocked-count {
  font-family: "Spline Sans Mono", monospace;
  font-size: 11.5px;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

.rank-progress-track {
  height: 6px;
  background: var(--line);
  overflow: hidden;
  margin-bottom: 6px;
}

.rank-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.4s ease;
}

.rank-progress-label {
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  color: var(--ink-dim);
}

.app-version {
  display: block;
  margin-top: 8px;
  font-family: "Spline Sans Mono", monospace;
  font-size: 10px;
  color: var(--ink-dim);
  opacity: 0.55;
}

.scope-switcher {
  display: flex;
  gap: 2px;
  padding: 12px 20px 0;
}

/* Achievements' own Player/Course toggle stacks directly under the pinned
   masthead (see .masthead's own comment) -- offset by --masthead-h so it sits
   right below it rather than under/overlapping it. Leaderboard's own title and
   tabs are NOT sticky (see .leaderboard-header/.leaderboard-tabs-row below) --
   only the masthead itself stays pinned there, and the title/tabs scroll away
   with the rest of the list underneath it. */
#achievements-scope {
  position: sticky;
  top: var(--masthead-h, 0px);
  z-index: 14;
  background: var(--paper);
}

/* Player/Course and Everyone/Friends now sit on one row (see index.html) -- the
   row itself supplies the padding both switchers used to bring individually as
   stacked rows, so it's zeroed on the switchers here to avoid doubling up. */
.leaderboard-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px 14px;
}

.leaderboard-tabs-row .scope-switcher {
  padding: 0;
}

.scope-tab {
  flex: none;
  padding: 8px 16px;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-family: "Source Sans 3", sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.scope-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.hidden {
  display: none !important;
}

/* ---------- Tabs ---------- */
.tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 2px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 0 20px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

/* Stacks below the pinned masthead + Player/Course toggle (see .masthead's own
   comment) instead of .tabs' own plain top:0, which would otherwise stick right
   under the viewport edge and overlap them once both are also stuck. */
#category-tabs {
  top: var(--stacked-header-h, 0px);
  z-index: 13;
}

.tab {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 12px 11px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--ink-dim);
  font-family: "Source Sans 3", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}

.tab svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  flex: none;
}

.tab.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* Course-scoped tab bars carry a 6th "Community" tab -- shrink so all six fit
   on a phone screen without horizontal scrolling. */
.tabs-compact {
  gap: 3px;
  padding: 0 8px;
  overflow-x: visible;
}

.tabs-compact .tab {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.15;
  padding: 9px 0;
  font-size: 9.5px;
}

.tabs-compact .tab svg {
  display: none;
}

/* On a real phone width, "Milestones"/"Community" leave almost no slack before
   colliding with their neighbor -- 9.5px is close to the ceiling there. Wider
   screens have real room to spare, so scale the label up as width grows. */
@media (min-width: 480px) {
  .tabs-compact .tab {
    font-size: 12px;
  }
}

@media (min-width: 640px) {
  .tabs-compact .tab {
    font-size: 14px;
  }
}

/* ---------- Range finder ---------- */
.rangefinder {
  margin: 14px 20px 4px;
  padding: 16px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
}

.round-panel .rangefinder {
  margin: 0 0 14px;
  background: var(--paper);
}

.rf-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.rf-label {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.rf-status {
  font-family: "Spline Sans Mono", monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.rf-status.live {
  color: var(--accent);
  animation: rf-pulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .rf-status.live {
    animation: none;
  }
}

@keyframes rf-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.rf-readout {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}

.rf-yards {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.rf-yards-unit {
  font-family: "Spline Sans Mono", monospace;
  font-size: 13px;
  color: var(--ink-dim);
}

.rf-detail {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.4;
  min-height: 1.4em;
}

.rf-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rf-btn {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  border: none;
  cursor: pointer;
}

.rf-btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
  padding: 11px 18px;
  flex: 1;
}

.rf-btn-ghost {
  background: none;
  color: var(--ink-dim);
  padding: 8px 0;
  text-decoration: underline;
}

.rf-unlocks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.rf-unlock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  background: var(--paper);
  border: 1px solid var(--line);
}

.rf-unlock-row.done {
  opacity: 0.6;
}

.rf-unlock-title {
  font-size: 13px;
  font-weight: 700;
}

.rf-unlock-points {
  font-family: "Spline Sans Mono", monospace;
  font-size: 12px;
  color: var(--ink-dim);
  margin-left: 6px;
}

.rf-unlock-btn {
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  padding: 7px 10px;
  white-space: nowrap;
  cursor: pointer;
}

.rf-unlock-done-label {
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  color: var(--ink-dim);
  text-transform: uppercase;
}

/* ---------- Ledger (achievement rows) ---------- */
.ledger {
  display: flex;
  flex-direction: column;
}

.row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  color: var(--ink);
  font: inherit;
}

.row-box {
  flex: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--ink-dim);
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row-box svg {
  width: 13px;
  height: 13px;
  opacity: 0;
  stroke: var(--accent-contrast);
}

.row.unlocked .row-box {
  background: var(--accent);
  border-color: var(--accent);
}

.row.unlocked .row-box svg {
  opacity: 1;
}

/* Read-only rows (viewing another player's achievements): no empty-checkbox
   outline, since an empty box implies a tappable control regardless of the
   row's own tag/click handling. Achieved ones still show the normal solid
   checkmark badge; not-yet-achieved ones show nothing at all -- there's
   nothing to invite tapping. */
.row-box.static {
  border: none;
}

.row.unlocked .row-box.static {
  background: var(--accent);
}

.row-body {
  min-width: 0;
}

.row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.tier-tag {
  font-family: "Spline Sans Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.row-title {
  font-size: 15px;
  font-weight: 700;
}

.row.unlocked .row-title {
  color: var(--ink);
}

.row:not(.unlocked) .row-title {
  color: var(--ink-dim);
}

.row-desc {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.4;
}

.row-date {
  margin-top: 4px;
  font-family: "Spline Sans Mono", monospace;
  font-size: 10.5px;
  color: var(--accent);
}

.row-points {
  font-family: "Spline Sans Mono", monospace;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-dim);
  padding-top: 1px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.row.unlocked .row-points {
  color: var(--accent);
}

/* ---------- Footer ---------- */
.footer {
  padding: 24px 20px;
  text-align: center;
}

.reset-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-family: "Source Sans 3", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 16px;
}

.footer-hint {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--ink-dim);
  opacity: 0.8;
}

/* ---------- Courses ---------- */
.course-search {
  padding: 16px 20px 0;
}

.course-search-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: "Source Sans 3", sans-serif;
  font-size: 15px;
}

.course-search-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.nearby-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 0;
}

.nearby-label {
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}

.nearby-radius {
  flex: none;
}

.course-search-status {
  margin: 10px 20px 0;
  font-family: "Spline Sans Mono", monospace;
  font-size: 12px;
  color: var(--ink-dim);
  min-height: 1.2em;
}

.course-results {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}

.course-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  text-align: left;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.course-result-name {
  font-size: 14.5px;
  font-weight: 700;
  display: block;
}

.course-result-meta {
  font-family: "Spline Sans Mono", monospace;
  font-size: 11.5px;
  color: var(--ink-dim);
}

.course-result-par {
  font-family: "Spline Sans Mono", monospace;
  font-size: 12.5px;
  color: var(--ink-dim);
  white-space: nowrap;
}

.course-result-flag {
  display: block;
  margin-top: 2px;
  font-family: "Spline Sans Mono", monospace;
  font-size: 10.5px;
  font-style: italic;
  color: var(--ink-dim);
  opacity: 0.85;
}

#ach-course-detail,
#play-round,
#leaderboard-course-detail,
#community-course-detail {
  padding: 16px 20px 4px;
}

#leaderboard-course-picker {
  padding-top: 8px;
}

.course-back-btn {
  background: none;
  border: none;
  color: var(--ink-dim);
  font-family: "Spline Sans Mono", monospace;
  font-size: 12px;
  padding: 0 0 12px;
  cursor: pointer;
}

.course-detail-name {
  margin: 0 0 2px;
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 24px;
  text-transform: uppercase;
  text-wrap: balance;
}

.course-detail-meta {
  margin: 0 0 14px;
  font-family: "Spline Sans Mono", monospace;
  font-size: 12px;
  color: var(--ink-dim);
}

.course-progress {
  margin-bottom: 16px;
}

.course-progress-track {
  height: 4px;
  background: var(--line);
  overflow: hidden;
  margin-bottom: 4px;
}

.course-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.4s ease;
}

.course-progress-label {
  font-family: "Spline Sans Mono", monospace;
  font-size: 10.5px;
  color: var(--ink-dim);
}

/* ---------- Round tracking ---------- */
.round-panel {
  margin-bottom: 16px;
  padding: 14px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
}

/* HOLE PREVIEW FEATURE START -- everything down to the matching END comment
   (round-tabs, round-tab-viewport/track/page, hole-preview-*) is only used by
   the swipeable Score/Preview tabs inside the round panel. Delete this block +
   the matching HTML/app.js blocks + holemap.js to remove the feature without
   touching anything else. */
.round-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.round-tab {
  flex: 1;
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 7px 0;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-dim);
  cursor: pointer;
}

.round-tab.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.round-tab-viewport {
  overflow: hidden;
}

.round-tab-track {
  display: flex;
  align-items: flex-start;
  width: 300%;
  transition: transform 0.3s ease;
}

.round-tab-track[data-active="preview"] {
  transform: translateX(-33.3333%);
}

.round-tab-track[data-active="notes"] {
  transform: translateX(-66.6667%);
}

.round-tab-page {
  flex: 0 0 33.3333%;
  min-width: 0;
}

.hole-preview-map-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line);
  overflow: hidden;
  /* Traps Leaflet's own internal z-indexes (panes up to 700, controls up to 1000)
     inside this wrapper's own stacking context -- without this, they leak out and
     paint over the side menu (z-index 50/51), since .leaflet-container itself never
     sets a z-index of its own to contain them. */
  z-index: 0;
}

.hole-preview-map {
  width: 100%;
  height: 100%;
  background: var(--line);
  position: relative;
  /* Same containment problem as .hole-preview-map-wrap above, one level deeper --
     Leaflet gives .leaflet-container "position: relative" but never its own
     z-index, so "position: relative" alone does NOT establish a stacking context
     (that requires z-index to be something other than auto). Confirmed live on a
     real phone: this map div's internal panes (tile pane z-index 200, controls up
     to 1000) were leaking past this element and painting over .smith-draw-canvas's
     z-index:10 -- one wrap contained them from escaping the whole component, but
     nothing contained them from a *sibling inside that same wrap*. */
  z-index: 0;
}

.hole-preview-distance-row {
  position: absolute;
  top: 8px;
  right: 8px;
  max-width: 55%;
  text-align: right;
  z-index: 1000;
  pointer-events: none;
}

.hole-preview-distance-value {
  font-family: "Spline Sans Mono", monospace;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000, 0 0 5px rgba(0, 0, 0, 0.6);
}

.hole-preview-distance-caption {
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 4px rgba(0, 0, 0, 0.6);
}

/* Compound selectors (not just .hole-marker-tooltip alone) deliberately, since
   Leaflet's own .leaflet-tooltip rules are equal specificity and get injected into
   <head> later (on first map load, well after this stylesheet) -- a same-specificity
   rule declared later in source order would otherwise win and keep Leaflet's default
   white box/border/arrow instead of this app's outlined-text style. */
.leaflet-tooltip.hole-marker-tooltip {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  font-family: "Spline Sans Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 4px rgba(0, 0, 0, 0.6);
}

.leaflet-tooltip.hole-marker-tooltip::before {
  display: none;
}

/* Leaflet's own default UI chrome, restyled minimally to sit inside the app's
   ledger aesthetic instead of looking like a generic embedded map widget. The
   Esri attribution text stays visible -- required by their terms, not optional. */
.leaflet-control-attribution {
  font-family: "Spline Sans Mono", monospace;
  font-size: 9.5px;
  background: rgba(0, 0, 0, 0.55);
  color: #eee;
}

.leaflet-control-attribution a {
  color: #fff;
}

.hole-preview-placeholder {
  margin: 0;
  padding: 0 16px;
  text-align: center;
  font-family: "Spline Sans Mono", monospace;
  font-size: 11.5px;
  color: var(--ink-dim);
}

.course-request-offer {
  margin-top: 10px;
}

.course-request-btn {
  margin-bottom: 0;
}

.course-request-photo-label {
  display: block;
  margin: 12px 0 0;
  padding: 11px;
  text-align: center;
  background: none;
  border: 1px dashed var(--line);
  color: var(--ink-dim);
  font-size: 12.5px;
  cursor: pointer;
}

.course-request-photo-name {
  margin: 8px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--accent);
  word-break: break-all;
}

#course-request-form .onboarding-submit {
  margin-top: 12px;
}

.course-request-sent {
  margin: 0;
  padding: 11px;
  text-align: center;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  color: var(--accent);
  font-size: 13px;
}

.hole-adjust-tee-btn {
  margin-top: 8px;
  width: 100%;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  padding: 8px;
  cursor: pointer;
}

.hole-adjust-tee-btn.active {
  border-color: var(--accent);
  color: var(--accent);
}

.hole-adjust-tee-hint {
  margin: 6px 0 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--accent);
}
/* HOLE PREVIEW FEATURE END */

/* ---------- Smith Sheet (per-hole notes) ---------- */

.notes-hole-label {
  margin: 0 0 12px;
  font-family: "Spline Sans Mono", monospace;
  font-size: 12px;
  color: var(--ink-dim);
}

.notes-textarea {
  width: 100%;
  /* Matches .hole-preview-map-wrap's own footprint (the GPS map on the Preview tab)
     so the two tabs feel like the same-sized "card" as you swipe between them. */
  aspect-ratio: 3 / 4;
  padding: 12px 14px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: "Source Sans 3", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}

.notes-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
}

.notes-actions .notes-save-btn {
  width: auto;
  flex: none;
  padding: 8px 14px;
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.notes-save-status {
  font-family: "Spline Sans Mono", monospace;
  font-size: 12px;
  color: var(--accent);
}

.smith-pane-label {
  margin: 0 0 12px;
  text-align: center;
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent);
}

/* Height is pinned inline by syncSmithPaneHeight (app.js) to whichever pane is
   actually showing -- otherwise this row's height would default to its TALLEST
   pane (ordinary flexbox cross-axis sizing), leaving dead space under a shorter
   one. The transition just lets that height change animate alongside the
   horizontal slide instead of snapping. */
.smith-pane-viewport {
  overflow: hidden;
  transition: height 0.3s ease;
}

.smith-pane-track {
  display: flex;
  align-items: flex-start;
  width: 300%;
  transition: transform 0.3s ease;
}

.smith-pane-track[data-active="hole"] {
  transform: translateX(0%);
}

.smith-pane-track[data-active="green"] {
  transform: translateX(-33.3333%);
}

.smith-pane-track[data-active="notes"] {
  transform: translateX(-66.6667%);
}

.smith-pane {
  flex: 0 0 33.3333%;
  min-width: 0;
}

.smith-pane-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 14px 0 0;
}

.smith-pane-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: var(--line);
  cursor: pointer;
}

.smith-pane-dot.active {
  width: 18px;
  background: var(--accent);
}

/* Smith Sheet's two drawable map panels -- .hole-preview-map-wrap already supplies
   the 3:4 aspect ratio and the z-index stacking-context fix that keeps Leaflet's
   internal panes/controls from bleeding through the side menu (see that class's own
   comment); .smith-map-wrap-square overrides just the aspect ratio for the tight
   Green close-up. touch-action: none goes on both the wrap AND the canvas -- on a
   real phone a touch starting anywhere in this box (not just precisely on the
   canvas's own hit box) must never be handed to the browser's native scroll/zoom,
   or the page visibly pans/bounces under the user's finger instead of drawing.
   overscroll-behavior stops that same touch from rubber-banding the outer page.
   -webkit-touch-callout/user-select stop a different iOS-only behavior that
   touch-action doesn't cover: holding a finger down (exactly what drawing a
   stroke requires) reads to Safari as a long-press on an image/selectable
   region, popping up its native Copy/Look Up callout mid-stroke -- confirmed
   on a real iPhone, invisible in every prior desktop-browser test this
   feature went through. */
.smith-map-wrap {
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.smith-map-wrap-square {
  aspect-ratio: 1 / 1;
}

.smith-draw-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* Explicit z-index, not just later-in-the-DOM -- on a real phone, Leaflet's
     tile pane gets promoted to its own GPU compositing layer once tile images
     actually arrive over the network (near-instant on desktop from cache, which
     is why this never showed up in this session's own testing), and that new
     layer can paint above a sibling that's only "on top" by DOM order. An
     explicit z-index makes the stacking order a hard requirement instead of an
     implicit one, which compositing layers reliably respect. */
  z-index: 10;
}

/* Green panel's north indicator -- fixed circular badge in the top-right corner;
   only the needle (arrow + "N") rotates, counter to the map's own bearing, so it
   keeps pointing at true north no matter how the locked map is rotated to face
   the hole. pointer-events: none so it never steals a touch meant for drawing or
   the pinch-zoom gesture underneath it; z-index above the canvas so it stays
   legible over both the map and anything drawn on it. */
.smith-compass {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  pointer-events: none;
  z-index: 20;
}

.smith-compass-ring {
  fill: rgba(10, 10, 10, 0.55);
  stroke: rgba(244, 241, 234, 0.4);
  stroke-width: 1;
}

.smith-compass-needle {
  transform-origin: 20px 20px;
  transition: transform 0.2s ease;
}

.smith-compass-arrow {
  fill: var(--accent);
}

.smith-compass-label {
  font-family: "Spline Sans Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  fill: #f4f1ea;
}

/* Break-arrow slope tool's direction dial -- floats over the map's right
   edge, thumb reach for a finger already drawing on the green with the same
   hand. Unlike .smith-compass above (a passive, pointer-events:none readout
   of the map's own bearing), this one IS the input: drag anywhere inside it
   to aim, and every stamp placed on the green afterward points that way
   (see wireSmithGreenArrowCompass in app.js). touch-action: none plus its
   own pointer handlers stopping propagation keep a drag here from ever
   reaching the canvas underneath as a stray stroke. */
.smith-arrow-compass {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.5);
  border: 1px solid rgba(244, 241, 234, 0.35);
  touch-action: none;
  cursor: grab;
  z-index: 15;
}

.smith-arrow-compass:active {
  cursor: grabbing;
}

.smith-arrow-compass-svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.smith-arrow-compass-deg {
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  color: rgba(244, 241, 234, 0.75);
  white-space: nowrap;
  pointer-events: none;
}

.tool-btn {
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.tool-btn:active {
  background: var(--paper-raised);
}

.tool-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* Each drawing panel's own action row (Pen, Arrow, colors, Undo, Clear, Save) --
   .notes-actions already supplies the flex row/gap/spacing; this just lets it wrap
   instead of overflowing, since this row has far more items than the plain
   Save+status row it was originally built for. */
.draw-actions-row {
  flex-wrap: wrap;
}

/* Lets Pen/Arrow/swatches and the Elevation Rises/Falls toggle each be shown
   or hidden as one group (see index.html) while still laying out as if the
   wrapping <span> weren't there -- a plain inline span would otherwise nest
   its buttons inside one flex item instead of each joining the row's own wrap. */
.smith-tool-group {
  display: contents;
}

/* "Set Orientation" mode's own action row -- the hint takes the full row width
   (flex-basis 100%) so Reset/Cancel/Done always wrap onto their own line under
   it, rather than crowding an already-long instruction on a narrow phone. */
.smith-orient-hint {
  flex: 1 1 100%;
  font-family: "Spline Sans Mono", monospace;
  font-size: 11.5px;
  color: var(--ink-dim);
}

.draw-color-swatch {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--line);
  padding: 0;
  cursor: pointer;
}

.draw-color-swatch.active {
  border-color: var(--paper);
  box-shadow: 0 0 0 2px var(--ink);
}

.round-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.round-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex: none;
}

/* ---------- Score tab: Distance to Green + Thru status ---------- */
/* Shares a row with Discard/End Round instead of taking a full row of its own
   underneath them -- that emptied strip to the left of the buttons was wasted
   space once the round-summary text moved out of the old .round-header layout.
   No card chrome (background/border) here on purpose. Text sized up from this
   feature's first pass -- plenty of golfers using this are older and the
   original sizes were too small to read at a glance mid-round. Every line here
   starts flush left, matching the scorecard table's own left-aligned text --
   the flag icon sits with the Thru line specifically (not the distance line,
   which it used to prefix) so it can't push any of these lines out of that
   alignment. The distance line hides itself (geolocation unsupported, or no
   mapped hole geometry for this course) while Thru-status always shows --
   round status is meaningful with or without GPS. Live-updated the same way as
   Preview's own distance-to-green readout (same GPS watch, same geometry,
   just a second, map-free place it also gets written to -- see
   syncHoleLocateWatch/onHoleLocatePosition in app.js). */
.hole-status-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hole-distance-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.hole-distance-value {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: var(--accent);
  white-space: nowrap;
}

/* A geolocation error (see describeGeoError in geo.js) is a full sentence, not a
   short yardage readout -- the base style above is sized/weighted for "60 yd to
   green" and made that sentence overflow its `nowrap` width, running underneath
   the Discard/End Round buttons next to it instead of wrapping. Hopefully players
   rarely see this at all, but it should still look intentional when they do. */
.hole-distance-value.status-message {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-dim);
  white-space: normal;
}

/* Recommended Club -- inline with the distance itself rather than its own line,
   same idea as folding Thru-status into this row in the first place: the club
   that best matches the remaining distance, pulled from whichever of the
   player's own Bag clubs (courses.js's getBagClubs, in-bag ones only) has a
   saved distance closest to the current yardage. Hidden whenever there's no
   real distance yet (locating/error/not near the course) or the player hasn't
   saved any in-bag club with a distance to compare against. */
.hole-recommended-club {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hole-recommended-club-abbr {
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: "Spline Sans Mono", monospace;
  font-weight: 700;
  font-size: 13px;
  padding: 3px 8px;
  border-radius: 4px;
}

.hole-recommended-club-yards {
  font-family: "Spline Sans Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
}

/* A single text run with extra literal spaces between "Front:" and "Back:"
   collapses down to one regular space in HTML regardless of how many are
   typed -- these are two separate flex children with a real, controllable gap
   instead, so they read as clearly distinct values rather than running
   together. */
.hole-distance-spread {
  display: flex;
  gap: 20px;
  font-family: "Spline Sans Mono", monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-dim);
  white-space: nowrap;
}

.hole-thru-text {
  display: block;
  margin-top: 2px;
  font-family: "Spline Sans Mono", monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.round-end-btn {
  flex: none;
  width: 120px;
  text-align: center;
  font-family: "Spline Sans Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 12px 8px;
  border: 1px solid var(--accent);
  border-radius: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
}

.hole-stepper {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.hole-nav-btn {
  height: 40px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
}

.hole-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.hole-stepper-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hole-stepper-label {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.score-stepper {
  display: flex;
  align-items: center;
  gap: 18px;
}

.score-adjust-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: none;
  color: var(--accent);
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.score-value {
  min-width: 48px;
  text-align: center;
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 36px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.score-clear-btn {
  background: none;
  border: none;
  color: var(--ink-dim);
  font-family: "Spline Sans Mono", monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: underline;
  cursor: pointer;
}

.counter-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
}

.counter-block + .counter-block {
  border-top: 1px solid var(--line);
  margin-top: 2px;
}

.counter-label {
  font-family: "Spline Sans Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.score-adjust-btn.small {
  width: 34px;
  height: 34px;
  font-size: 18px;
}

.score-value.small {
  min-width: 34px;
  font-size: 24px;
}

.putts-stepper {
  gap: 14px;
}

.round-discard-btn {
  flex: none;
  width: 120px;
  text-align: center;
  font-family: "Spline Sans Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 12px 8px;
  border: 1px solid #fff;
  border-radius: 0;
  background: #c0392b;
  color: #fff;
  cursor: pointer;
}

.scorecard-table tr.score-row td {
  color: var(--accent);
  font-weight: 700;
}

.scorecard-table tr.putts-row td {
  color: var(--ink-dim);
  font-style: italic;
}

.scorecard-table tr.best-row td {
  color: var(--ink-dim);
  font-size: 11px;
}

.scorecard-table tr.guest-row td {
  color: var(--ink);
  font-weight: 600;
}

.scorecard-table tr.guest-row td:first-child {
  font-style: italic;
  text-transform: none;
}

.tee-select-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.round-guests {
  margin-bottom: 12px;
}

.round-guests-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.round-guests-list:empty {
  margin-bottom: 0;
}

.guest-pill-wrap {
  display: flex;
}

.guest-pill {
  padding: 6px 10px;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.guest-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.guest-pill-wrap .guest-pill {
  border-right: none;
}

.guest-remove-btn {
  padding: 0 8px;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.round-guest-add-row {
  display: flex;
  gap: 6px;
}

.round-guest-name-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: "Source Sans 3", sans-serif;
  font-size: 13px;
}

.round-guest-add-btn {
  flex: none;
  padding: 8px 12px;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.round-guest-limit-note {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--ink-dim);
}

.tee-select-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nine-toggle {
  display: flex;
  border: 1px solid var(--line);
}

.nine-toggle-btn {
  padding: 6px 12px;
  background: none;
  border: none;
  color: var(--ink-dim);
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.nine-toggle-btn + .nine-toggle-btn {
  border-left: 1px solid var(--line);
}

.nine-toggle-btn.active {
  background: var(--accent);
  color: var(--accent-contrast);
}

.tee-select-label {
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}

.tee-select {
  padding: 7px 10px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: "Source Sans 3", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: capitalize;
}

.scorecard-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  margin-bottom: 14px;
}

.scorecard-table {
  border-collapse: collapse;
  font-family: "Spline Sans Mono", monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.scorecard-table th,
.scorecard-table td {
  padding: 8px 9px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.scorecard-table th:first-child,
.scorecard-table td:first-child {
  position: sticky;
  left: 0;
  background: var(--paper-raised);
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
}

.scorecard-table th {
  color: var(--ink-dim);
  font-weight: 600;
  background: var(--paper-raised);
}

.scorecard-table td.subtotal,
.scorecard-table th.subtotal {
  background: var(--accent-soft);
  font-weight: 700;
  color: var(--ink);
}

.scorecard-table th.current-hole,
.scorecard-table td.current-hole {
  background: var(--accent-soft);
}

.scorecard-table td.hole-cell {
  cursor: pointer;
}

.scorecard-table td.hole-cell:active {
  background: var(--accent-soft);
}

/* Applies only to the active-round scorecard (max 9 hole columns + label + total,
   since FRONT/BACK already splits an 18-hole course in half before this renders) --
   sized to always fit the screen width with no horizontal scroll, unlike the plain
   .scorecard-table used by the round-history detail view, which can show a genuine
   18 holes + Out/In/Total at once and is expected to scroll for that. */
.scorecard-table-compact {
  table-layout: fixed;
  width: 100%;
}

.scorecard-table-compact th,
.scorecard-table-compact td {
  padding: 7px 2px;
  font-size: 10.5px;
}

.scorecard-table-compact th:first-child,
.scorecard-table-compact td:first-child {
  width: 19%;
  padding-left: 5px;
  padding-right: 2px;
  font-size: 9px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.15;
}

.scorecard-table-compact th:not(:first-child):not(.subtotal),
.scorecard-table-compact td:not(:first-child):not(.subtotal) {
  width: 7%;
}

.scorecard-table-compact th.subtotal,
.scorecard-table-compact td.subtotal {
  width: 18%;
}

.course-achievements-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.course-achievements-title {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.course-score {
  font-family: "Spline Sans Mono", monospace;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.course-achievements-hint {
  margin: 0 0 10px;
  font-size: 11.5px;
  color: var(--ink-dim);
  line-height: 1.4;
}

.course-ledger {
  margin: 0 -20px;
}

.category-group-header {
  padding: 10px 20px 4px;
  font-family: "Spline Sans Mono", monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.saved-courses-section {
  padding: 8px 20px 0;
}

.saved-courses-label {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 8px 0;
}

.saved-courses-list {
  display: flex;
  flex-direction: column;
}

.saved-course-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.saved-course-open {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: none;
  border: none;
  text-align: left;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  padding: 0;
}

.saved-course-remove {
  flex: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  padding: 6px 8px;
  cursor: pointer;
}

.saved-courses-empty {
  font-size: 12.5px;
  color: var(--ink-dim);
  padding: 4px 0 16px;
}

.round-history-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.round-history-score {
  flex: none;
  font-family: "Spline Sans Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.course-attribution {
  padding: 18px 20px 24px;
  font-size: 10.5px;
  color: var(--ink-dim);
  opacity: 0.7;
  line-height: 1.4;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 16px;
  right: 16px;
  top: calc(16px + env(safe-area-inset-top));
  max-width: 528px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ink);
  color: var(--paper);
  padding: 13px 16px;
  box-shadow: var(--shadow);
  transform: translateY(-140%);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
  pointer-events: none;
  z-index: 20;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast-mark {
  flex: none;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--accent);
}

.toast-mark svg {
  width: 14px;
  height: 14px;
  stroke: var(--accent);
}

.toast-title {
  font-family: "Spline Sans Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.toast-sub {
  font-size: 14px;
  font-weight: 600;
}

/* ---------- Start Round FAB ---------- */
/* Floats above every normal-flow view (Achievements/Play/Leaderboard) since none
   of those set their own z-index; Report a Bug (a real z-index:30 .onboarding
   overlay) automatically covers it for free, but Explore/Friends/Community/
   Account are plain hide-siblings panels like the primary views, so they each
   explicitly hide/re-show it themselves (see each one's own open and close
   functions in app.js). Never hidden based on round state anymore -- a red "+" starts a new
   round; while one's already active it switches to a blue arrow (.active-round,
   swapped icon) that jumps straight back to it from anywhere in the app. */
.start-round-fab {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 50%;
  background: #c0392b;
  border: 3px solid #f2c230;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 25;
}

.start-round-fab.active-round {
  background: #1f5fa8;
  border-color: #7ec8ff;
}

/* ---------- Side menu ---------- */
.side-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.side-menu-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 82%;
  max-width: 300px;
  background: var(--paper-raised);
  border-right: 1px solid var(--line);
  z-index: 51;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
  padding-top: env(safe-area-inset-top);
}

.side-menu.open {
  transform: translateX(0);
}

.side-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line);
}

.side-menu-title {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.side-menu-close {
  background: none;
  border: none;
  color: var(--ink-dim);
  font-size: 18px;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
}

.side-menu-body {
  flex: 1;
  padding: 8px 0;
}

.side-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 18px;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: "Source Sans 3", sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}

.side-menu-item.active {
  border-left-color: var(--accent);
  color: var(--accent);
}

.side-menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  margin-left: 8px;
  padding: 0 4px;
  border-radius: 9px;
  background: #e0392c;
  color: #fbe9e7;
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

.side-menu-footer {
  padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

.side-menu-version {
  display: block;
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-dim);
}

.side-menu-tagline {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink-dim);
}

/* ---------- Confirm dialog ---------- */
/* Replaces native confirm() everywhere in the app -- confirm() can't be shown at
   all inside some embedded preview browsers (they suppress native dialogs and
   auto-resolve to "cancel"), and this also just looks like the rest of the app. */
.confirm-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.confirm-dialog-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.confirm-dialog-card {
  width: 100%;
  max-width: 340px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  padding: 22px;
}

.confirm-dialog-message {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.45;
}

.confirm-dialog-actions {
  display: flex;
  gap: 10px;
}

.confirm-dialog-btn {
  flex: 1;
  padding: 12px;
  font-family: "Source Sans 3", sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.confirm-dialog-cancel {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
}

.confirm-dialog-ok {
  background: var(--accent);
  border: none;
  color: var(--accent-contrast);
}

/* ---------- Leaderboard ---------- */
.leaderboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 4px;
}

.leaderboard-title {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.leaderboard-status {
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  color: var(--ink-dim);
}


.leaderboard-list {
  padding: 8px 20px 0;
  display: flex;
  flex-direction: column;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  width: 100%;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.leaderboard-row.me {
  background: var(--accent-soft);
  margin: 0 -12px;
  padding: 12px;
  border-bottom-color: transparent;
}

.leaderboard-rank {
  font-family: "Spline Sans Mono", monospace;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-dim);
  text-align: center;
}

.leaderboard-name {
  font-size: 14.5px;
  font-weight: 700;
}

.leaderboard-home-icon {
  display: inline-flex;
  vertical-align: -2px;
  width: 13px;
  height: 13px;
  margin-left: 4px;
  color: var(--ink-dim);
}

.leaderboard-home-icon svg {
  width: 100%;
  height: 100%;
}

.leaderboard-name.real {
  color: #c9a227;
}

/* First 50 real signups -- a permanent public marker, unlike .real above (which
   is an admin-only debug aid for spotting dummy seed accounts). Declared after
   .real so it wins if a founder is ever viewed by an admin (both classes present). */
.leaderboard-name.founder {
  color: #e0342b;
}

.leaderboard-score {
  font-family: "Spline Sans Mono", monospace;
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.leaderboard-empty {
  padding: 20px 0;
  font-size: 13px;
  color: var(--ink-dim);
}

.leaderboard-hint {
  padding: 16px 20px 24px;
  font-size: 11.5px;
  color: var(--ink-dim);
  opacity: 0.8;
  text-align: center;
}

/* ---------- Onboarding ---------- */
.onboarding {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  padding: 20px;
}

.onboarding-card {
  width: 100%;
  max-width: 360px;
  text-align: center;
}

.onboarding-eyebrow {
  margin: 0;
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.onboarding-title {
  margin: 2px 0 14px;
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 34px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

.onboarding-hint {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.4;
}

.onboarding-input {
  width: 100%;
  padding: 13px 14px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: "Source Sans 3", sans-serif;
  font-size: 16px;
  text-align: center;
  margin-bottom: 10px;
}

.onboarding-home-course {
  margin: 22px 0 10px;
  text-align: left;
}

.onboarding-home-course-label {
  margin: 0 0 3px;
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.onboarding-home-course-optional {
  text-transform: none;
  letter-spacing: 0;
}

#onboarding-home-course-results.course-results,
#account-home-course-results.course-results {
  padding: 0;
  max-height: 160px;
  overflow-y: auto;
}

.onboarding-home-course-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  font-size: 14px;
}

.onboarding-home-course-change {
  flex: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  padding: 6px 10px;
  cursor: pointer;
}

.onboarding-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.onboarding-error {
  min-height: 1.3em;
  margin: 0 0 8px;
  font-size: 12.5px;
  color: #c0392b;
}

.onboarding-submit {
  width: 100%;
  padding: 13px;
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  font-family: "Source Sans 3", sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}

.onboarding-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.onboarding-link {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 0;
  background: none;
  border: none;
  color: var(--ink-dim);
  font-family: "Source Sans 3", sans-serif;
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
}

.onboarding-google-btn {
  margin-top: 10px;
  margin-bottom: 18px;
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--line);
}

/* ---------- Account panel ---------- */
/* Account is a full page like Achievements/Community, not a centered onboarding
   card -- .account-view-body just supplies the standard 20px page gutter, and the
   .onboarding-input/.onboarding-submit/.onboarding-hint field styles are reused
   as-is since they don't depend on the narrow centered card that wraps onboarding. */

.account-view-body {
  padding: 0 20px 24px;
}

.account-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
}

/* Account's own header swaps the top-right "X" close for a top-left back arrow
   next to the title, reused as the single back control on every Account screen --
   overrides .course-achievements-header's space-between since there's nothing on
   the right anymore. */
#account-panel .account-header {
  justify-content: flex-start;
  gap: 8px;
}

.account-header-back {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: -3px 0;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
}

/* Groups a reset hint tightly with the one button it explains, and puts real
   space between groups -- .onboarding-hint's own bottom margin alone pulled each
   hint toward the *previous* group's button instead of its own. */
.account-reset-group {
  margin-bottom: 28px;
}

.account-reset-group .onboarding-hint {
  margin-bottom: 10px;
}

.account-signout-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-dim);
}

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

.explore-hole-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 8px;
  margin: 4px 0 16px;
}

.explore-hole-btn {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: "Spline Sans Mono", monospace;
  font-size: 14px;
  font-weight: 700;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
}

.explore-hole-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

.explore-hole-btn.unavailable {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ---------- Friends ---------- */

/* The header, friend code, and Add a Friend form stay put while Requests/Sent/
   Your Friends -- the parts that can actually grow long -- scroll underneath,
   the same "pin the chrome, scroll the list" split as Achievements' own
   category tabs. Offset by --masthead-h so it sits right below the pinned
   masthead rather than under it. */
.friends-sticky-top {
  position: sticky;
  top: var(--masthead-h, 0px);
  z-index: 14;
  background: var(--paper);
}

/* .account-view-body has no top padding of its own (only sides + bottom) since
   most screens using it sit right under a header with its own bottom padding
   already -- but here that header's bottom border doubles as a visible divider,
   so the friend-code hint needs a little daylight of its own below it. */
.friends-sticky-top .account-view-body {
  padding-top: 14px;
}

.friend-code-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 18px;
  margin: 10px 0 18px;
  background: var(--accent-soft);
  border: 1px dashed var(--line);
  cursor: pointer;
  font: inherit;
  color: inherit;
}

#friends-code-text {
  font-family: "Spline Sans Mono", monospace;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.friend-code-copy-hint {
  font-family: "Spline Sans Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}

.friends-add-row {
  display: flex;
  gap: 8px;
}

.friends-add-row .onboarding-input {
  flex: 1;
}

.friends-add-row .onboarding-submit {
  width: auto;
  flex: none;
  padding: 0 16px;
}

/* ---------- Bag ---------- */
.bag-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

.bag-add-toggle-btn {
  background: none;
  border: 1px dashed var(--ink-dim);
  border-radius: 6px;
  color: var(--ink-dim);
  font-family: "Source Sans 3", sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.bag-add-toggle-btn.active {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent);
}

.bag-count {
  margin-left: auto;
  font-family: "Spline Sans Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

/* Turns red once the player has more clubs checked "in the bag" than the
   USGA/R&A 14-club limit allows -- a real rule, not an arbitrary cap, so this
   doubles as a useful warning rather than just decoration. */
.bag-count.over-limit {
  color: #c0392b;
}

.bag-add-form {
  border: 1px solid var(--line);
  padding: 14px;
  margin-bottom: 14px;
}

.bag-add-fields {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.bag-add-abbr-input,
.bag-add-name-input,
.bag-add-distance-input {
  padding: 10px 8px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
}

.bag-add-abbr-input {
  width: 50px;
  flex: none;
  text-align: center;
  font-family: "Spline Sans Mono", monospace;
  text-transform: uppercase;
}

.bag-add-name-input {
  flex: 1;
  min-width: 0;
}

.bag-add-distance-input {
  width: 64px;
  flex: none;
  text-align: center;
}

.bag-preset-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.bag-preset-chip {
  border: 1px solid var(--line);
  background: none;
  color: var(--ink);
  border-radius: 5px;
  padding: 5px 9px;
  font-family: "Spline Sans Mono", monospace;
  font-size: 12px;
  cursor: pointer;
}

.bag-delete-btn {
  width: 100%;
  background: none;
  border: 1px solid #c0392b;
  color: #c0392b;
  border-radius: 5px;
  padding: 10px;
  font-family: "Source Sans 3", sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 10px;
}

.bag-add-actions {
  display: flex;
  gap: 8px;
}

.bag-add-actions .tool-btn,
.bag-add-actions .onboarding-submit {
  flex: 1;
  width: auto;
}

/* Two separate tap targets, not one row-wide button -- the checkbox toggles
   in/out of the bag (a quick, frequent action), while tapping the club's own
   name/abbr/distance opens the edit form instead, so neither action can
   accidentally trigger the other. */
.bag-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  opacity: 0.55;
}

.bag-row.in-bag {
  opacity: 1;
}

.bag-row-check {
  flex: none;
  background: none;
  padding: 0;
  cursor: pointer;
  /* No border reset here -- .row-box's own 2px border (below) must stay in
     effect so this still looks like the achievement list's checkbox; a button
     defaults to no border of its own once background/padding are reset, so
     there's nothing here that would otherwise need overriding. */
}

.bag-row.in-bag .row-box {
  background: var(--accent);
  border-color: var(--accent);
}

.bag-row.in-bag .row-box svg {
  opacity: 1;
}

.bag-row-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
}

.bag-abbr {
  flex: none;
  width: 30px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Spline Sans Mono", monospace;
  font-weight: 700;
  font-size: 12px;
  background: var(--line);
  color: var(--ink-dim);
}

.bag-row.in-bag .bag-abbr {
  background: var(--accent);
  color: var(--accent-contrast);
}

.bag-row-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
}

.bag-row-distance {
  font-family: "Spline Sans Mono", monospace;
  font-size: 14px;
  color: var(--ink-dim);
}

.bag-row.in-bag .bag-row-distance {
  color: var(--accent);
}

#friends-incoming-section,
#friends-outgoing-section {
  margin-bottom: 8px;
}

/* ---------- Report a Bug ---------- */

.bug-report-textarea {
  text-align: left;
  resize: vertical;
  min-height: 110px;
  font-family: "Source Sans 3", sans-serif;
}

/* ---------- Community Achievements ---------- */

.community-view-header {
  margin: 0;
  padding: calc(16px + env(safe-area-inset-top)) 20px 14px;
  border-top: none;
  border-bottom: 1px solid var(--line);
}

.community-tab-panel {
  padding: 0 20px;
}

.community-proposal-form {
  margin-top: 14px;
}

.community-select {
  text-align: left;
  cursor: pointer;
}

.community-course-field {
  position: relative;
}

.community-course-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  max-height: 220px;
  overflow-y: auto;
  margin-top: -10px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-top: none;
}

.community-course-result {
  display: block;
  width: 100%;
  padding: 11px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  text-align: left;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.community-course-result:last-child {
  border-bottom: none;
}

.community-course-result:hover,
.community-course-result:focus {
  background: var(--accent-soft);
}

.community-course-empty {
  margin: 0;
  padding: 11px 14px;
  font-size: 12.5px;
  color: var(--ink-dim);
}

.community-search-input {
  margin-top: 14px;
  text-align: left;
}

.community-proposal-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 20px;
}

.community-proposal-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--paper-raised);
}

.community-proposal-row.approved {
  border-color: var(--accent);
}

.community-vote-controls {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.community-vote-btn {
  background: none;
  border: none;
  padding: 2px 6px;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.community-vote-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.community-vote-btn.up.active {
  color: var(--accent);
}

.community-vote-btn.down.active {
  color: #c0392b;
}

.community-vote-score {
  font-family: "Spline Sans Mono", monospace;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.community-proposal-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.community-proposal-course {
  font-family: "Spline Sans Mono", monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
}

.community-proposal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.community-proposal-desc {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.4;
}

.community-proposal-meta {
  margin-top: 4px;
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  color: var(--ink-dim);
}

.community-admin-actions {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.community-edit-input {
  text-align: left;
  margin-bottom: 6px;
  padding: 8px 10px;
  font-size: 14px;
}

.community-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.community-edit-actions .onboarding-submit {
  width: auto;
  padding: 8px 16px;
  font-size: 13px;
}