/* COURSES NEAR ME (coursepick.js) and the unmapped course view on Play (app.js). The picker list reuses the Ranges rows (ranges.css). */
.bar-title{cursor:pointer;border-radius:12px;min-height:44px;-webkit-tap-highlight-color:transparent}
.bar-title:active{background:rgba(255,255,255,.08)}
/* the down chevron says the course name opens the picker (a pseudo element, so the hole bar text itself is unchanged) */
.bar-title #courseName::after{content:'';display:inline-block;width:12px;height:8px;margin-left:8px;vertical-align:middle;background:currentColor;filter:drop-shadow(0 1px 1px rgba(0,0,0,.9));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.bar-title:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}
#coursepick .rg-row.cp-row{cursor:pointer}
#coursepick .rg-row.cp-row:focus-visible{outline:2px solid var(--green-2);outline-offset:2px}
#coursepick .rg-list .rg-attr{margin:12px 0 0;font:400 13px/1.45 var(--f-text);color:var(--ink-2)}
#coursepick .rg-attr a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
#coursepick .rg-about{margin:8px 0 12px;font:400 13px/1.45 var(--f-text);color:var(--ink-3)}
#coursepick .rg-about summary{cursor:pointer;color:var(--ink-2)}
#coursepick .rg-about p{margin:8px 0 0;font:400 13px/1.45 var(--f-text);color:var(--ink-3)}
#coursepick .rg-about a{color:var(--ink-2)}
/* the last search comes back with a Change area link right under it */
#coursepick .title-sub:has(+ .cp-change){margin-bottom:4px}
#coursepick .rg-change.cp-change{margin:0 0 16px;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
/* course photo on top of each row, straight from the course's website; the placeholder sits under it until the photo has loaded */
#coursepick .cp-photo{position:relative;display:block;width:100%;aspect-ratio:16/9;margin:0 0 12px;border-radius:12px;overflow:hidden;background:var(--surface-2)}
#coursepick .cp-photo svg{position:absolute;left:50%;top:50%;width:32px;height:32px;margin:-16px 0 0 -16px;color:var(--ink-3)}
#coursepick .cp-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
#coursepick .cp-photo.ok img{opacity:1}
#coursepick .cp-photo.ok svg{display:none}
#coursepick a.cp-photo{text-decoration:none;color:inherit}
#coursepick .cp-photo .cp-credit{position:absolute;right:8px;bottom:8px;display:none;max-width:calc(100% - 16px);padding:4px 8px;border-radius:4px;background:rgba(0,0,0,.6);
  color:#fff;font:500 12px/1.2 var(--f-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#coursepick .cp-photo.ok .cp-credit{display:block}
#coursepick .cp-photo:focus-visible{outline:2px solid var(--green-2);outline-offset:2px}
#coursepick .textbtn.cp-hide{display:inline-flex;margin:4px 0 0}
/* an unmapped course: the yardage card holds one quiet line */
.card.soon{display:block;padding:16px;gap:0}
.card.soon > :not(.card-soon):not(.card-change){display:none}
.card .card-soon{margin:0;padding:0;font:500 15px/1.4 var(--f-body);color:rgba(255,255,255,.82);text-align:left}
.card .card-change{display:none}
.card.soon .card-change{display:inline-flex;align-items:center;justify-content:center;height:44px;margin:12px 0 0;padding:0 16px;border:1px solid rgba(255,255,255,.6);border-radius:10px;
  background:rgba(8,18,13,.35);color:#fff;font:600 15px/1 var(--f-text);cursor:pointer;-webkit-tap-highlight-color:transparent}
.card.soon .card-change:active{background:rgba(255,255,255,.12)}
.card.soon .card-change:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}
.bar.soon button:disabled{opacity:.3;cursor:default}
/* a state's course list ("Courses in <State> (<count>)") */
#coursepick .toptitle.cp-title{white-space:normal;overflow:visible}
/* onesearch: suggestions under the one field, and the pick one list for a city in several states */
#coursepick .cp-sugs{margin:0}
#coursepick .cp-sugs[hidden]{display:none}
#coursepick .cp-sugs .cp-sug{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);color:inherit;cursor:pointer}
#coursepick .cp-sugs .cp-sug:focus-visible{outline:2px solid var(--green-2);outline-offset:-2px}

/* auditfix2: a soft shimmer in the photo box until its picture loads (the box gets .ok on load); none with reduced motion */
#coursepick .cp-photo:not(.ok)::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.07) 50%,rgba(255,255,255,0) 70%);background-size:220% 100%;animation:cp-shimmer 1.4s ease-in-out infinite}
@keyframes cp-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){#coursepick .cp-photo:not(.ok)::before{animation:none}}

/* BUILD3: the save button on the photo (44px, top right), the Saved chip, the town line and the brothers line */
#coursepick .cp-pw{position:relative}
#coursepick .cp-save{position:absolute;top:4px;right:4px;z-index:2;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer}
#coursepick .cp-save svg{width:24px;height:24px;padding:4px;border-radius:50%;background:rgba(0,0,0,.55);box-sizing:content-box}
#coursepick .cp-save.on svg path{fill:currentColor}
#coursepick .cp-save:focus-visible{outline:2px solid var(--green-2);outline-offset:-2px}
#coursepick .cp-chips{display:flex;column-gap:8px;margin:0 0 16px}
#coursepick .cp-chip{display:inline-flex;align-items:center;column-gap:4px;height:44px;margin:0;padding:0 16px;border:1px solid var(--line, rgba(255,255,255,.2));border-radius:22px;background:transparent;color:var(--ink);font:600 15px/1 var(--f-text);cursor:pointer}
#coursepick .cp-chip svg{width:18px;height:18px}
#coursepick .cp-chip[aria-pressed=true]{background:var(--green);border-color:var(--green);color:#fff}
#coursepick .cp-chip[aria-pressed=true] svg path{fill:currentColor}
#coursepick .cp-chip:focus-visible{outline:2px solid var(--green-2);outline-offset:2px}
#coursepick .cp-bros{margin:4px 0 0;color:var(--ink-2)}

/* MEMBERPHOTO: the Add Photo button beside the bookmark (44px), a member cover, the gallery's arrows */
#coursepick .cp-add{position:absolute;top:4px;right:52px;z-index:2;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer}
#coursepick .cp-add svg{width:24px;height:24px;padding:4px;border-radius:50%;background:rgba(0,0,0,.55);box-sizing:content-box}
#coursepick .cp-add:focus-visible{outline:2px solid var(--green-2);outline-offset:-2px}
#coursepick .cp-mcover{cursor:pointer}
.cp-gal .cp-gal-nav{position:absolute;top:50%;z-index:2;width:44px;height:44px;margin:-22px 0 0;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font:600 28px/1 var(--f-head);cursor:pointer}
.cp-gal .cp-gal-nav.prev{left:8px}
.cp-gal .cp-gal-nav.next{right:8px}
.cp-gal .cp-gal-nav:disabled{opacity:.3;cursor:default}
.cp-gal .ww-acts .textbtn{min-height:44px}
.sheet .cp-add-pick label{display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer}
.cp-gal .ww-acts{left:12px;right:12px;flex-wrap:wrap;gap:8px}
.cp-gal .ww-acts .textbtn{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;white-space:nowrap;background:rgba(0,0,0,.6);border-radius:10px}