.badge-collection,
.badge-detail,
.badge-sheet-options,
.badge-notice {
  --badge-green: var(--club-green, #226f54);
  --badge-green-dark: var(--club-green-pressed, #174b39);
  --badge-gold: #c9982f;
  --badge-ink: var(--ink, #13231b);
  --badge-muted: var(--ink-soft, #536159);
  --badge-line: var(--line, #dfdbcf);
}
.badge-collection {
  padding: 1.5rem 0 .5rem;
  color: var(--badge-ink);
  font-family: inherit;
}
.badge-collection-head { display:flex; align-items:end; justify-content:space-between; gap:1rem; }
.badge-collection-head p { margin:0 0 .2rem; color:var(--badge-muted); font-size:.875rem; font-weight:750; letter-spacing:.035em; text-transform:uppercase; }
.badge-collection-head h3 { margin:0; font-size:1.35rem; line-height:1.15; letter-spacing:-.025em; }
.badge-collection-head > span { color:var(--badge-muted); font-size:.875rem; font-weight:700; }
.badge-illustrative-note { margin:.55rem 0 0; color:var(--badge-muted); font-size:.875rem; line-height:1.4; }
.badge-filter-row { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:.55rem; margin:1rem 0 1.15rem; }
.badge-filter-row button { display:flex; align-items:center; justify-content:space-between; min-width:0; min-height:2.75rem; padding:.55rem .75rem; border:1px solid var(--badge-line); border-radius:.72rem; background:#fff; color:var(--badge-ink); font-size:.875rem; font-weight:720; text-align:left; }
.badge-filter-row button span { margin-left:.45rem; color:var(--badge-green); font-size:1rem; }
.badge-preview { display:grid; gap:1.15rem; }
.badge-records { margin-top:1.15rem; }
.badge-rail-heading { display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; min-height:1.75rem; margin-bottom:.45rem; }
.badge-rail-heading h4 { margin:0; font-size:.875rem; font-weight:800; }
.badge-rail-heading span { color:var(--badge-muted); font-size:.875rem; line-height:1.25; text-align:right; }
.badge-rail { width:100%; }
.badge-rail-track { gap:.75rem; padding-right:.5rem; }
.badge-card { display:flex; flex:0 0 4.6rem; flex-direction:column; align-items:center; width:4.6rem; min-width:4.6rem; min-height:9.9rem; padding:.15rem 0 .25rem; border:0; background:transparent; color:var(--badge-ink); text-align:center; }
.badge-card-art { display:grid; width:3.2rem; height:3.2rem; flex:0 0 auto; place-items:center; border-radius:50%; background:#f7f5ee; box-shadow:inset 0 0 0 1px rgb(19 35 27 / 12%); transition:transform 150ms ease; }
.badge-card:hover .badge-card-art { transform:translateY(-1px); }
.badge-card:active .badge-card-art { transform:scale(.97); }
.badge-card-art img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.badge-card[data-state=next] .badge-card-art,
.badge-card[data-state=locked] .badge-card-art,
.badge-card[data-state=baseline] .badge-card-art,
.badge-card[data-state=unavailable] .badge-card-art { background:#f7f6f2; box-shadow:inset 0 0 0 1.5px #aeb6b1; }
.badge-card[data-state=next] .badge-card-art img { filter:grayscale(.82); opacity:.55; }
.badge-card[data-state=locked] .badge-card-art img,
.badge-card[data-state=baseline] .badge-card-art img,
.badge-card[data-state=unavailable] .badge-card-art img { filter:grayscale(1); opacity:.28; }
.badge-card-copy { display:flex; width:100%; flex-direction:column; align-items:center; margin-top:.4rem; }
.badge-card-copy strong { height:2.5em; overflow-wrap:anywhere; font-size:.875rem; font-weight:790; line-height:1.25; }
.badge-card-value { height:1.3em; margin-top:.15rem; color:var(--badge-ink); font-size:.875rem; font-weight:760; line-height:1.3; white-space:nowrap; }
.badge-card-state { height:1.25em; margin-top:.2rem; color:var(--badge-green); font-size:.875rem; font-weight:800; line-height:1.25; white-space:nowrap; }
.badge-card[data-state=next] .badge-card-state { color:#785e20; }
.badge-card[data-state=locked] .badge-card-state,
.badge-card[data-state=baseline] .badge-card-state,
.badge-card[data-state=unavailable] .badge-card-state { color:#667069; }
.badge-card-footer { display:grid; grid-template-rows:.25rem 1.2em; gap:.2rem; justify-items:center; width:100%; min-height:1.65rem; margin-top:.3rem; }
.badge-card-copy small { overflow-wrap:anywhere; color:var(--badge-muted); font-size:.875rem; line-height:1.2; }
.badge-progress { visibility:hidden; overflow:hidden; width:3.25rem; height:.25rem; border-radius:999px; background:#e6e3da; }
.badge-progress[data-visible=true] { visibility:visible; }
.badge-progress i { display:block; height:100%; border-radius:inherit; background:var(--badge-gold); }
.badge-view-all { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:3rem; margin:.5rem 0 0; padding:.2rem 0; border:0; border-top:1px solid var(--badge-line); background:transparent; color:var(--badge-ink); font-size:.875rem; font-weight:760; text-align:left; }
.badge-view-all span:last-child { color:var(--badge-green); font-size:1.1rem; }
.badge-full-collection { padding:0; }
.badge-category-tabs { display:grid; grid-template-columns:.65fr 1.35fr 1fr; gap:.3rem; padding-bottom:1rem; }
.badge-category-tabs button { min-height:2.75rem; padding:.4rem .25rem; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--badge-muted); font-size:.875rem; font-weight:730; }
.badge-category-tabs button[aria-pressed=true] { border-bottom-color:var(--badge-green); color:var(--badge-green); }
.badge-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem .25rem; align-items:start; }
.badge-grid .badge-card { width:100%; min-width:0; content-visibility:auto; contain-intrinsic-size:7rem 10rem; }
.badge-collapse { width:100%; min-height:2.75rem; margin-top:1rem; border:0; border-top:1px solid var(--badge-line); background:transparent; color:var(--badge-green); font-size:.875rem; font-weight:760; }
.badge-empty { margin:.25rem 0 1rem; padding:1rem; border-radius:.8rem; background:#f8f7f2; }
.badge-full-collection .badge-empty { margin:0 0 1rem; }
.badge-empty strong { display:block; font-size:.9rem; }
.badge-empty p { margin:.3rem 0 0; color:var(--badge-muted); font-size:.875rem; line-height:1.45; }
/* Single-source Fitbit detail composition; source-copy/palette mapping in source notes. */
.bottom-sheet:has(.badge-detail) { background:#fff; }
.bottom-sheet:has(.badge-detail) > .sheet-header { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.bottom-sheet:has(.badge-detail) > .sheet-content { padding-top:0; }
.badge-detail { display:flex; flex-direction:column; align-items:center; min-height:35rem; padding:0 0 1.5rem; color:var(--badge-ink); text-align:center; }
.badge-detail-back { display:flex; align-items:center; align-self:flex-start; gap:.15rem; min-height:2.75rem; padding:0; border:0; background:transparent; color:var(--badge-ink); font-size:1rem; }
.badge-detail-back svg { width:1.3rem; height:1.3rem; }
.badge-detail-heading { margin:2.4rem 0 0; width:100%; }
.badge-detail-heading h2 { margin:0; font-size:1.85rem; line-height:1.16; font-weight:600; letter-spacing:-.045em; }
.badge-detail-heading p { max-width:20rem; margin:.45rem auto 0; color:var(--badge-muted); font-size:.875rem; line-height:1.35; }
.badge-detail-art { display:block; width:13.5rem; height:13.5rem; max-width:72%; flex:0 0 auto; margin:2.2rem auto; border-radius:50%; object-fit:contain; }
.badge-detail[data-state=next] .badge-detail-art,
.badge-detail[data-state=locked] .badge-detail-art,
.badge-detail[data-state=unavailable] .badge-detail-art { filter:grayscale(1); opacity:.55; }
.badge-detail-result { width:100%; }
.badge-detail-result > strong { display:block; font-size:1rem; font-weight:600; }
.badge-detail-result > span { display:block; margin:.3rem 0 0; color:var(--badge-muted); font-size:.8rem; line-height:1.4; }
.badge-detail-progress { max-width:12rem; margin:1rem auto 0; }
.badge-detail-progress progress { display:block; width:100%; height:.3rem; border:0; border-radius:999px; overflow:hidden; background:#e8ebe5; accent-color:#af934e; }
.badge-detail-progress progress::-webkit-progress-bar { background:#e8ebe5; }
.badge-detail-progress progress::-webkit-progress-value { background:#af934e; border-radius:999px; }
.badge-detail-progress p { margin:.6rem 0 0; font-size:.9rem; line-height:1.35; }
.badge-detail-progress small { display:block; margin:.2rem 0 0; font-size:.75rem; color:var(--badge-muted); }
.badge-detail-previous { margin:.65rem 0 0; color:var(--badge-muted); font-size:.8rem; }
.badge-evidence-list { display:grid; width:100%; gap:0; margin:1.6rem 0 0; padding:0; list-style:none; }
.badge-source-link { display:flex; align-items:center; justify-content:space-between; gap:.5rem; width:100%; min-height:3.5rem; padding:.7rem 0; border:0; border-top:1px solid var(--badge-line); background:transparent; color:var(--badge-green); text-align:left; }
.badge-source-link strong { display:block; font-size:.875rem; font-weight:650; }
.badge-source-link small { display:block; margin:.2rem 0 0; color:var(--badge-muted); font-size:.75rem; line-height:1.3; }
.badge-source-link svg { flex:0 0 auto; }
.badge-sheet-options { display:grid; gap:.15rem; padding-bottom:1rem; }
.badge-sheet-options button { display:grid; grid-template-columns:minmax(0,1fr) 1.1rem; align-items:center; min-height:3rem; padding:.45rem .2rem; border:0; border-bottom:1px solid var(--badge-line); background:transparent; color:var(--badge-ink); font-size:.92rem; font-weight:680; text-align:left; }
.badge-sheet-options i { width:1.05rem; height:1.05rem; border:1.5px solid #9aa29d; border-radius:50%; }
.badge-sheet-options button[aria-pressed=true] i { border:4px solid var(--badge-green); }

.badge-detail { display:grid; gap:1rem; padding-bottom:1.25rem; color:var(--badge-ink); }
.badge-detail-hero { display:flex; gap:1rem; align-items:center; padding-bottom:1rem; border-bottom:1px solid var(--badge-line); }
.badge-detail-art { width:5rem; height:5rem; flex:0 0 auto; }
.badge-detail-art img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.badge-detail-hero[data-state=next] img,
.badge-detail-hero[data-state=locked] img,
.badge-detail-hero[data-state=baseline] img,
.badge-detail-hero[data-state=unavailable] img { filter:grayscale(1); opacity:.4; }
.badge-detail-hero div { min-width:0; }
.badge-detail-hero div span { display:block; color:var(--badge-muted); font-size:.875rem; font-weight:720; }
.badge-detail-hero div strong { display:block; margin-top:.2rem; font-size:1.35rem; line-height:1.2; }
.badge-detail-section h4 { margin:0; font-size:.875rem; letter-spacing:.035em; text-transform:uppercase; }
.badge-detail-section p { margin:.35rem 0 0; color:var(--badge-muted); font-size:.875rem; line-height:1.5; }
.badge-detail-facts { display:grid; margin:.7rem 0 0; }
.badge-detail-facts div { display:grid; grid-template-columns:7rem minmax(0,1fr); gap:.6rem; padding:.55rem 0; border-top:1px solid var(--badge-line); font-size:.875rem; line-height:1.35; }
.badge-detail-facts dt { color:var(--badge-muted); }
.badge-detail-facts dd { margin:0; font-weight:710; }
.badge-detail-unavailable { padding:.8rem; border-radius:.75rem; background:#f5f3ed; }
.badge-evidence-list { display:grid; gap:.45rem; margin:.55rem 0 0; padding:0; list-style:none; }
.badge-evidence-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.7rem; align-items:center; padding:.65rem 0; border-top:1px solid var(--badge-line); }
.badge-evidence-item strong,.badge-evidence-item span { display:block; }
.badge-evidence-item strong { font-size:.875rem; }
.badge-evidence-item span { margin-top:.2rem; color:var(--badge-muted); font-size:.875rem; line-height:1.35; }
.badge-evidence-item button { min-width:5.8rem; min-height:2.75rem; padding:.45rem .7rem; border:0; border-radius:.65rem; background:var(--badge-green); color:#fff; font-size:.875rem; font-weight:760; }
.badge-detail-note { margin:0; color:var(--badge-muted); font-size:.875rem; line-height:1.45; }

.badge-notice { position:relative; display:grid; grid-template-columns:2.7rem minmax(0,1fr) auto; gap:.65rem; align-items:center; padding:.65rem .75rem; border:1px solid rgb(34 111 84 / 22%); border-radius:.85rem; background:#f8faf6; color:var(--badge-ink); }
.badge-notice img { width:2.7rem; height:2.7rem; border-radius:50%; }
.badge-notice span,.badge-notice strong,.badge-notice small { display:block; }
.badge-notice span { color:var(--badge-green); font-size:.875rem; font-weight:800; text-transform:uppercase; }
.badge-notice strong { margin-top:.08rem; font-size:.875rem; }
.badge-notice small { margin-top:.08rem; color:var(--badge-muted); font-size:.875rem; }
.badge-notice > button { min-height:2.75rem; padding:.4rem .6rem; border:0; background:transparent; color:var(--badge-green); font-size:.875rem; font-weight:780; }
.badge-notice .badge-notice-dismiss { position:absolute; top:-.4rem; right:-.4rem; width:2.75rem; min-width:2.75rem; padding:0; border:1px solid var(--badge-line); border-radius:50%; background:#fff; color:var(--badge-muted); font-size:1.05rem; }

.badge-collection button:focus-visible,
.badge-detail button:focus-visible,
.badge-sheet-options button:focus-visible,
.badge-notice button:focus-visible { outline:2px solid var(--badge-green); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .badge-card-art { transition:none; } }
@container golf-content (max-width:350px) {
  .badge-rail-track { gap:.55rem; }
  .badge-card { flex-basis:4.45rem; width:4.45rem; min-width:4.45rem; }
  .badge-card-art { width:3.1rem; height:3.1rem; }
}

/* Native browser scrolling replaces only the prototype phone gesture runtime. */
.badge-native-carousel { display:block; width:100%; min-width:0; max-width:100%; overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; scrollbar-width:none; }
.badge-native-carousel::-webkit-scrollbar { display:none; }
.badge-native-carousel .badge-rail-track { display:flex; width:max-content; min-width:100%; }
.badge-native-carousel:focus-visible { outline:2px solid var(--badge-green); outline-offset:2px; }
.approved-badge-dialog { box-sizing:border-box; width:100%; max-width:32rem; max-height:93dvh; margin:auto auto 0; padding:1.25rem 1.25rem max(1.25rem,env(safe-area-inset-bottom,0px)); border:0; border-radius:1.5rem 1.5rem 0 0; background:#fff; color:var(--ink,#13231b); font:inherit; overflow:auto; overscroll-behavior:contain; }
.approved-badge-dialog::before { content:''; display:block; width:2.6rem; height:.3rem; margin:-.45rem auto 1rem; border-radius:999px; background:#c6c8c1; }
.approved-badge-dialog::backdrop { background:rgb(0 0 0 / 35%); }
.approved-badge-dialog:has(.course-picker) { height:80dvh; }