/*
 * Öğrenci seçici (student-picker.js): the shared student list of Bilye Yarışı and the tournament roster picks. A search
 * field and a first-letter strip over rows in Turkish alphabetical order. Names wrap instead of being cut, so two students
 * who share a first name stay apart; a row's tags sit under its name and never take its width. Colours come from
 * tokens.css (light, dark, high contrast); motion is transform only.
 */
.sp { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sp__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.sp__search { flex: 1 1 220px; max-width: 360px; min-width: 0; }
.sp__field {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  color: var(--ink);
  font: 700 18px var(--font-sans);
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: 12px;
}
.sp__field::placeholder { color: var(--ink-3); font-weight: 600; opacity: 1; }
.sp__field:focus { border-color: var(--brand); outline: none; }
.sp__letters { display: flex; flex: 999 1 320px; flex-wrap: wrap; gap: 4px; min-width: 0; }
.sp__letter, .sp__clear {
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  color: var(--ink);
  font: 800 17px var(--font-sans);
  background: var(--surface-2);
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out, ease-out);
}
.sp__letter:hover, .sp__clear:hover { border-color: var(--line-strong); }
.sp__letter[aria-pressed="true"] { color: var(--on-primary); background: var(--brand-grad); border-color: transparent; }
.sp__letter:active, .sp__clear:active, .sp__row:active { transform: scale(.97); }
.sp__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); grid-auto-rows: minmax(48px, auto); align-content: start; gap: 6px; }
.sp__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 48px;
  padding: 6px 12px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  background: var(--surface-2);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out, ease-out);
}
.sp__row[hidden] { display: none; }
.sp__row:hover { border-color: var(--line-strong); }
.sp__check { width: 24px; height: 24px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.sp__row:has(.sp__check:checked) { background: var(--brand-tint); border-color: var(--brand); }
.sp__row:has(.sp__check:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.sp__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.sp__name { max-width: 100%; overflow-wrap: anywhere; }
.sp__row:not(:has(.sp__check:checked)) .sp__name { color: var(--ink-2); }
.sp__row.is-picked .sp__name { text-decoration: line-through; text-decoration-thickness: 2px; }
.sp__tag { padding: 1px 8px; color: var(--ink-2); font-size: 13px; font-weight: 750; white-space: nowrap; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
.sp__tag--picked { color: var(--gold-ink); background: var(--gold-tint); border-color: var(--gold-line); }
.sp__none { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 12px 14px; color: var(--ink); font-size: 17px; font-weight: 650; background: var(--surface-2); border: 2px dashed var(--line-strong); border-radius: 12px; }
.sp__none[hidden] { display: none; }
.sp__clear { padding: 0 14px; font-size: 16px; background: var(--surface); border-color: var(--line-strong); }

/* The smartboard is read from the back row: bigger rows, letters and type. */
body.board-view .sp__field { min-height: 56px; font-size: 21px; }
body.board-view .sp__letter { min-width: 52px; min-height: 52px; font-size: 20px; }
body.board-view .sp__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); grid-auto-rows: minmax(64px, auto); }
body.board-view .sp__row { min-height: 64px; font-size: 21px; }
body.board-view .sp__check { width: 28px; height: 28px; }

/* Phones: the letters stay one row that scrolls sideways inside itself; two columns of names. */
@media (max-width: 680px) {
  .sp__search { flex-basis: 100%; max-width: none; }
  .sp__letters { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 2px; }
  .sp__letter { flex: none; }
  .sp__grid, body.board-view .sp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp__row { padding: 6px 10px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp__letter, .sp__clear, .sp__row { transition: none; }
  .sp__letter:active, .sp__clear:active, .sp__row:active { transform: none; }
}