.course-picker {
  --course-picker-green: var(--club-green, #226f54);
  --course-picker-ink: var(--ink, #13231b);
  --course-picker-muted: var(--ink-soft, #66736c);
  --course-picker-line: var(--line, #dfdbcf);
  display: flex;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  color: var(--course-picker-ink);
  font-family: inherit;
}

.bottom-sheet .sheet-content:has(> .course-picker) {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.course-picker :is(button, input) { font: inherit; }
.course-picker button { color: inherit; }
.course-picker [hidden] { display: none !important; }
.course-picker :is(button, input):focus-visible { outline: 2px solid var(--course-picker-green); outline-offset: 2px; }
.course-picker-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.course-picker-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .55rem;
  align-items: center;
  flex: 0 0 auto;
  padding: .25rem 1rem .85rem;
  background: #fff;
}
.course-picker-search {
  position: relative;
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr) auto;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 .75rem;
  border-radius: .72rem;
  background: #f1f3f1;
  color: var(--course-picker-muted);
}
.course-picker-search > svg { width: 1.05rem; height: 1.05rem; }
.course-picker-search input {
  min-width: 0;
  height: 2.75rem;
  padding: 0 .55rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--course-picker-ink);
  font-size: 1rem;
}
.course-picker-search input::placeholder { color: #7a8580; }
.course-picker-search > button {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -.75rem;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--course-picker-muted);
}
.course-picker-search > button svg { width: .9rem; height: .9rem; }
.course-picker-cancel {
  min-width: 3.6rem;
  min-height: 2.75rem;
  padding: 0 .15rem;
  border: 0;
  background: transparent;
  color: var(--course-picker-green)!important;
  font-size: .875rem;
  font-weight: 740;
}

.course-picker-row {
  display: grid;
  grid-template-columns: 1.55rem minmax(0, 1fr) 1.25rem;
  align-items: center;
  gap: .65rem;
  width: 100%;
  min-height: 2.75rem;
  padding: .4rem .15rem;
  border: 0;
  border-bottom: 1px solid var(--course-picker-line);
  background: transparent;
  text-align: left;
}
.course-picker-row > svg:first-child { width: 1.05rem; height: 1.05rem; color: #6e7c75; }
.course-picker-row > svg:last-child { width: 1.1rem; height: 1.1rem; color: var(--course-picker-green); }
.course-picker-row span { min-width: 0; overflow-wrap: anywhere; font-size: .9rem; font-weight: 660; line-height: 1.3; }
.course-picker-all { flex: 0 0 auto; border-top: 1px solid var(--course-picker-line); }
.course-picker-list-region { position: relative; min-height: 0; flex: 1 1 auto; }
.course-picker-scroll { height: 100%; overflow: auto; overscroll-behavior: contain; }
.course-picker-list { min-height: 100%; padding:0 1rem max(1.25rem,env(safe-area-inset-bottom,0px)); }
.course-picker-list h3 {
  margin: 0;
  padding: .85rem .15rem .4rem;
  color: var(--course-picker-muted);
  font-size: .75rem;
  font-weight: 760;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.course-picker-empty { display: grid; justify-items: start; gap: .35rem; padding: 1.25rem .15rem; }
.course-picker-empty strong { font-size: .9rem; }
.course-picker-empty span { color: var(--course-picker-muted); font-size: .875rem; line-height: 1.4; }
.course-picker-empty button { min-height: 2.75rem; padding: .45rem 0; border: 0; background: transparent; color: var(--course-picker-green); font-size: .875rem; font-weight: 750; }

/* Keep one accessible search label and a visible focus edge inside the sheet. */
.course-picker-header { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem 1rem .25rem; background:#fff; }
.course-picker-header h2 { margin:0; font-size:1.0625rem; line-height:1.3; }
.course-picker-header h2:focus { outline:none; }
.course-picker-search { border:1px solid #b9c8bf; }
.course-picker-search:focus-within { border-color:var(--course-picker-green); box-shadow:inset 0 0 0 1px var(--course-picker-green); }
.course-picker-search input:focus-visible { outline:0; }
.course-picker-search input { font-size:1rem; }
.course-picker-search > svg { grid-column:1; }
.course-picker-search input { grid-column:2; }
.course-picker-search > button { grid-column:3; }