/* admin.css — admin panel: login overlays, tab bar, results, schedule, settings, account */

/* ── Prevent iOS auto-zoom on focus: all form inputs must be ≥ 16px ── */
/* max(1rem, 16px) is 16px at the standard 16px base, ensuring no zoom regardless
   of user font-size settings while preserving inherited scaling above 16px. */
input, select, textarea { font-size: max(1rem, 16px); }

/* ── Admin tab bar ── */
.admin-tab-bar {
  display: flex;
  background: var(--surface);
  border-bottom: 0.07em solid var(--border);
  margin-bottom: 1.2em;
}
.admin-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  text-align: center;
  padding: 0.85em 0.3em;
  font-family: 'Oswald', sans-serif;
  font-size: clamp(0.78rem, 1.5vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 0.18em solid transparent;
  transition: all 0.15s;
  user-select: none;
}
.admin-tab.active { color: var(--blue-lt); border-bottom-color: var(--blue-lt); }
.admin-tab-panel { display: none; }
.admin-tab-panel.active { display: block; }
.admin-tab .tab-icon {
  width: 1.4em;
  height: 1.4em;
  flex-shrink: 0;
  display: none; /* shown only on mobile */
}

/* ── Empty slot card ── */
.empty-slot-card {
  border: 0.07em dashed var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 0.75em;
  background: var(--surface);
  opacity: 0.7;
}
.empty-slot-card:hover { opacity: 1; }

/* ── Login / change-password overlays ── */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-box {
  width: min(90vw, 340px);
  background: var(--surface);
  border: 0.07em solid var(--border);
  border-radius: var(--radius-md);
  padding: 2em 1.8em;
}
.login-title {
  font-family: Oswald, sans-serif;
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-lt);
  margin-bottom: 1.2em;
}
/* NO `display: none` here. Every one of these elements is shown by setting
   .hidden = false, and a class rule setting display beats removing the
   attribute — so the rule that looked like "starts hidden" actually made the
   element impossible to show. Wrong password, first-run setup, forced password
   change, admin password reset and both coach forms all failed in silence
   because of it. base.css has `[hidden] { display: none !important }`, which is
   what hides them; the markup carries `hidden` so they start that way. */
.login-error {
  color: var(--clear-color);
  font-size: 0.8em;
  margin-bottom: 0.6em;
}
.login-btn { width: 100%; margin-top: 0.25em; }
.login-desc { font-size: 0.8em; color: var(--text-mute); margin-bottom: 1.2em; }
/* The "you don't need an account" note. Boxed and left-aligned rather than
   muted body text: it is the most important thing on the page for the largest
   group of people who will ever see it, and mute-grey small print is exactly
   what someone hunting for a password scrolls past. */
.login-desc--who {
  text-align: left;
  color: var(--text-dim);
  background: var(--surface2);
  border-left: 0.2em solid var(--blue);
  border-radius: var(--radius-xs);
  padding: 0.8em 0.9em;
  line-height: 1.5;
}
.login-desc--who strong { color: var(--text); }
/* "View public bracket" escape hatch under the sign-in form (admin PWA) */
.login-public-link {
  display: block;
  text-align: center;
  margin-top: 1.1em;
  font-size: 0.8em;
  color: var(--text-dim);
  text-decoration: none;
}
.login-public-link:hover { color: var(--text); text-decoration: underline; }
@media (pointer: coarse) { .login-public-link { padding: 0.6em 0; } }
.field-label-hint { color: var(--text-mute); font-size: 0.85em; }
/* Required-lineup-field toggles: three independent switches read better as a
   checkbox row than three yes/no selects stacked down the page. */
.lineup-req-row { display: flex; flex-wrap: wrap; gap: 0.6em 1.4em; margin: 0.35em 0 0.15em; }
/* Push controls: the device button and its status share a line and wrap
   together on a phone. */
.push-device-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; }
/* `.settings-field label` is display:block, uppercase and dimmed — right for a
   field caption, wrong for a checkbox label. These are inside a settings-field,
   so they have to say so explicitly. */
.settings-field .lineup-req-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-bottom: 0;
  font-family: 'Barlow', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.settings-field .lineup-req-opt input {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  accent-color: var(--blue-lt);
  cursor: pointer;
}
@media (pointer: coarse) { .lineup-req-opt { min-height: 2.75rem; } }

/* ── Admin layout ── */
.admin-wrap { max-width: 65em; margin: 0 auto; padding: 1.2em 1em; }
.admin-title { font-family: 'Oswald', sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 0.25em; }
.admin-subtitle { font-size: 0.78em; color: var(--text-mute); margin-bottom: 1.2em; }
.admin-section-hdr { font-family: 'Oswald', sans-serif; font-size: 0.95em; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold); padding: 0.6em 0 0.35em; border-bottom: 0.13em solid var(--gold); margin: 1.7em 0 0.85em; }
.admin-round-hdr { font-family: 'Oswald', sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-dim); padding: 0.5em 0; border-bottom: 0.07em solid var(--border); margin: 1.2em 0 0.6em; display: flex; align-items: center; gap: 0.5em; }
.round-hdr-name { flex: 0 1 auto; }
.round-rename-btn { background: none; border: none; color: var(--text-mute); cursor: pointer; font-size: 0.9em; padding: 0.1em 0.35em; }
.round-rename-btn:hover { color: var(--text); }
.round-rename-inp { font-family: 'Barlow', sans-serif; font-size: 0.85rem; padding: 0.25em 0.5em; background: var(--surface2); color: var(--text); border: 0.07em solid var(--border); border-radius: var(--radius-xs); min-width: 12em; }
.sched-tier-round-hdr { font-family: 'Oswald', sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); padding: 0.45em 0 0.2em; }
.sched-add-slot-btn { display: block; width: 100%; margin: 0.5em 0; padding: 0.45em; font-family: 'Barlow', sans-serif; font-size: 0.78rem; color: var(--text-mute); background: none; border: 0.09em dashed var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.sched-add-slot-btn:hover { color: var(--text); border-color: var(--text-dim); }
.sched-add-round-row { display: flex; align-items: center; gap: 0.6em; margin-top: 1.2em; }
.sched-add-round-row .sched-add-slot-btn { width: auto; margin: 0; padding: 0.45em 1em; }
/* Legacy selectors kept for schedule editor compatibility */
.admin-game-id { font-family: 'Oswald', sans-serif; font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.07em; color: var(--blue-lt); flex-shrink: 0; }
.admin-winner-sel { font-family: 'Barlow', sans-serif; font-size: max(1rem, 16px); padding: 0.3em 0.5em; border-radius: var(--radius-xs); border: 0.07em solid var(--border); background: var(--surface2); color: var(--text); cursor: pointer; min-width: 9.4em; }
.admin-winner-sel:focus { outline: 0.13em solid var(--blue-lt); }
.admin-save-btn { white-space: nowrap; }
.admin-locked { font-size: 0.74rem; color: var(--text-mute); font-style: italic; }
/* Edit a finalized score. Same outline shape as Clear but in the interactive
   accent, not the destructive one — it corrects the game, it doesn't undo it. */
.admin-edit-btn { font-family: 'Oswald', sans-serif; font-size: var(--btn-font-size); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; padding: var(--btn-pad-v) var(--btn-pad-h-compact); border-radius: var(--radius-xs); border: 0.07em solid var(--blue-lt); background: transparent; color: var(--blue-lt); cursor: pointer; }
.admin-edit-btn:hover,
.admin-edit-btn:active { background: color-mix(in srgb, var(--blue-lt) 12%, transparent); }
/* A card being edited is visually distinct from a settled one. */
.admin-res-card--editing { border-color: var(--blue-lt); }


/* ── Delays admin chips ── */
.delay-chip-row { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 0.25em; }
.delay-chip {
  font-family: 'Oswald', sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.45em 0.9em;
  border-radius: var(--radius-sm);
  border: 0.07em solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.delay-chip:hover { color: var(--text); border-color: var(--text-dim); }
.delay-chip--sel  { background: var(--blue); border-color: var(--blue); color: #fff; }
.delay-chip--auto { background: var(--surface2); color: var(--text-dim); cursor: default; }
.delay-chips-empty { font-size: 0.76rem; color: var(--text-mute); font-style: italic; }

/* ── Delays admin offset rows ── */
.delay-offset-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 0;
  border-bottom: 0.07em solid var(--border);
}
.delay-offset-row:last-child { border-bottom: none; }
.delay-offset-val {
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
  min-width: 4em;
}
.delay-offset-desc {
  font-size: 0.82rem;
  color: var(--text-dim);
  flex: 1;
  min-width: 0;
}
.delay-offset-del {
  flex-shrink: 0;
  font-size: 0.72rem;
  padding: 0.2em 0.55em;
  min-height: 0;
}

/* ── Quick bar (mobile only — Games / Bucket Challenge above tab bar) ── */
.admin-quick-bar {
  display: none; /* hidden on desktop; shown via media query on mobile */
}

/* ── Results tab: card layout (mirrors By Round view) ── */
.admin-res-card {
  border: 0.07em solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  margin-bottom: 1.4em;
}
.admin-res-card--waiting { opacity: 0.45; }
.admin-res-card.upcoming { border-style: dashed; }

.admin-res-hdr {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em 1em;
  background: var(--surface2);
  border-bottom: 0.07em solid var(--border);
}
.admin-res-dt {
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  flex: 1;
}
.admin-res-day, .admin-res-time { font-family: 'Oswald', sans-serif; font-size: clamp(1.1rem, 0.18vw + 1.05rem, 1.4rem); font-weight: 700; color: var(--gold-lt); line-height: 1; }
/* Schedule drift, same colours and reading as the public card's badge:
   late is the losing colour, early the winning one. */
.admin-res-offset {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(0.82rem, 0.1vw + 0.8rem, 0.95rem);
  font-weight: 700;
  line-height: 1;
  margin-left: 0.1em;
}
.admin-res-offset--late  { color: var(--lose-color); }
.admin-res-offset--early { color: var(--win-color); }

.admin-res-team-row {
  display: flex;
  align-items: center;
  padding: 0.8em 1em;
  border-bottom: 0.07em solid var(--border);
  min-height: 3em;
  gap: 0.6em;
}
.admin-res-team-row:last-of-type { border-bottom: none; }
.admin-res-team { font-size: clamp(0.96rem, 0.05vw + 0.95rem, 1.06rem); font-weight: 600; flex: 1; }
.admin-res-team.won  { color: var(--win-color); }
.admin-res-team.lost { color: var(--lose-color); }
.admin-score-inp {
  width: 4.8em; flex-shrink: 0;
  font-family: 'Oswald', sans-serif; font-size: var(--text-lg); font-weight: 700;
  text-align: center; padding: 0.2em 0.4em;
  border-radius: var(--radius-xs); border: 0.07em solid var(--border);
  background: var(--surface2); color: var(--text);
  -moz-appearance: textfield;
}
.admin-score-inp::-webkit-outer-spin-button,
.admin-score-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.admin-score-inp:focus { outline: 0.13em solid var(--blue-lt); }
.admin-score-disp {
  font-family: 'Oswald', sans-serif; font-size: 1.1rem; font-weight: 700;
  color: var(--text); flex-shrink: 0; min-width: 2ch; text-align: right;
}

.admin-res-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6em;
  padding: 0.7em 1em;
  border-top: 0.07em solid var(--border);
  background: var(--surface2);
  flex-wrap: wrap;
}
.admin-res-footer .admin-winner-sel { flex: 1; min-width: 0; }

.admin-res-waiting {
  padding: 0.75em 1em;
  font-size: 0.82rem;
  color: var(--text-mute);
  font-style: italic;
}

/* ── Completed games section header ── */
.admin-completed-hdr { margin-top: 2em; color: var(--text-mute); }

/* ── Results mode bar (Games / Bucket Challenge switcher) ── */
.results-mode-bar {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 0 0.75em;
  border-bottom: 0.07em solid var(--border);
  margin-bottom: 0.75em;
  position: sticky;
  top: var(--hdr-h, 52px);
  z-index: 10;
  background: var(--bg);
}
.results-mode-btn {
  flex: 1;
  font-family: 'Oswald', sans-serif;
  font-size: var(--btn-font-size);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--btn-pad-v) var(--btn-pad-h-compact);
  border-radius: var(--radius-xs);
  border: 0.07em solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}
.results-mode-btn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.results-mode-btn:hover:not(.active) { color: var(--text); border-color: var(--text-dim); }

/* ── Schedule editor ── */
.sched-game-card { border: 0.07em solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 0.75em; background: var(--surface); }
.sched-game-hdr { display: flex; align-items: center; gap: 0.6em; padding: 0.6em 1em; background: var(--surface2); border-bottom: 0.07em solid var(--border); cursor: pointer; }
.sched-game-hdr-id { font-family: 'Oswald', sans-serif; font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.07em; color: var(--blue-lt); }
.sched-game-hdr-sid { color: var(--text-mute); font-size: 0.65em; }
.sched-game-hdr-time { font-size: var(--text-sm); color: var(--gold-lt); font-weight: 600; }
.sched-game-hdr-teams { font-size: 0.82rem; color: var(--text-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-game-hdr-teams.empty { font-style: italic; }
.sched-game-hdr-arrow { color: var(--text-mute); font-size: var(--text-xs); margin-left: auto; }
.sched-game-body { padding: 0.75em; display: none; }
.sched-game-body.open { display: block; }
.sched-field { margin-bottom: 0.6em; }
.sched-field label { display: block; font-family: 'Oswald', sans-serif; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.25em; }
.sched-field input,
.settings-field input { width: 100%; font-family: 'Barlow', sans-serif; font-size: max(1rem, 16px); padding: 0.43em 0.62em; border-radius: 0.25em; border: 0.07em solid var(--border); background: var(--surface2); color: var(--text); }
.sched-field input:focus,
.settings-field input:focus { outline: 0.13em solid var(--blue-lt); }
/* sched-save-btn: base styles from base.css primary-button rule */
.sched-status { font-size: 0.74rem; color: var(--win-color); margin-left: 0.5em; }
.sched-status:empty { display: none; }

/* Export buttons sit side by side and wrap on a phone. */
.export-row { display: flex; gap: 0.6em; flex-wrap: wrap; }

/* Undo offer for the last destructive write. Gold rather than red — it is a
   safety net being offered, not an error being reported. */
/* Undo sits in the schedule mode bar rather than a banner above the editor:
   it is a rare action, and a permanent full-width block explaining it cost
   more vertical space than the editor could spare. */
.sched-undo-btn {
  flex: 0 0 auto;
  border-color: var(--gold-lt);
  color: var(--gold-lt);
  white-space: nowrap;
}
.sched-undo-btn:hover,
.sched-undo-btn:active { background: color-mix(in srgb, var(--gold-lt) 12%, transparent); }

/* Bracket health panel — pre-publish warnings above the schedule editor.
   Left border carries the severity so the panel reads at a glance. */
.sched-health {
  border: 0.07em solid var(--border);
  border-left-width: 0.28em;
  border-radius: var(--radius-sm);
  background: var(--surface2);
  padding: 0.7em 0.9em;
  margin-bottom: 1.1em;
}
.sched-health--ok    { border-left-color: var(--win-color); }
.sched-health--warn  { border-left-color: var(--gold-lt); }
.sched-health--error { border-left-color: var(--lose-color); }
.sched-health-hdr {
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--text);
}
.sched-health--ok .sched-health-hdr { color: var(--text-dim); font-weight: 400; }
/* Only the healthy notice is dismissible — the × and the swipe handler are
   both bound on that render alone, so a warning cannot be swiped off the
   screen an hour before first pitch. */
.sched-health--dismissible {
  position: relative;
  padding-right: 2.6em;
  touch-action: pan-y;   /* let a vertical scroll through; we read the X drift */
}
.sched-health-x {
  position: absolute;
  top: 0.15em;
  right: 0.15em;
  width: 2.1em;
  height: 2.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  border: none;
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
  border-radius: var(--radius-xs);
  -webkit-tap-highlight-color: transparent;
}
.sched-health-x:hover { color: var(--text); background: var(--surface); }
@media (pointer: coarse) {
  .sched-health-x { width: 2.75rem; height: 2.75rem; }
  .sched-health--dismissible { padding-right: 3.1em; }
}
.sched-health-list { list-style: none; margin: 0.6em 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4em; }
.sched-health-item { font-size: 0.76rem; line-height: 1.45; color: var(--text-dim); }
.sched-health-item--error .sched-health-slot { color: var(--lose-color); }
.sched-health-item--warning .sched-health-slot { color: var(--gold-lt); }
.sched-health-slot { font-family: 'Oswald', sans-serif; font-weight: 500; }
.sched-action-row { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }
/* Top action row: identical layout to the results-tab nav bar — equal-width
   segmented buttons in a bar that sticks below the header while scrolling. */
.sched-action-row--top {
  padding: 0.6em 0 0.75em;
  margin-bottom: 0.75em;
  border-bottom: 0.07em solid var(--border);
  position: sticky;
  top: var(--hdr-h, 52px);
  z-index: 10;
  background: var(--bg);
}
.sched-action-row--top .sched-save-btn,
.sched-action-row--top .admin-public-btn { flex: 1; justify-content: center; }
.sched-action-row--top .sched-status { flex: 1 0 100%; text-align: center; margin-left: 0; }
.sched-game-footer { margin-top: 0.6em; padding-top: 0.6em; border-top: 0.07em solid var(--border); display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }
.sched-footer-note { flex: 1; min-width: 0; font-size: 0.65em; color: var(--text-mute); margin-left: 0.6em; }
.sched-game-save-btn { flex-shrink: 0; }
.sched-side-label { font-family: 'Oswald', sans-serif; font-size: 0.6em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-lt); padding: 0.4em 0 0.2em; }
.source-dropdown-row { display: flex; gap: 0.4em; align-items: center; flex-wrap: wrap; }
.source-dropdown-sep { font-size: 0.75em; color: var(--text-mute); }
.empty-slot-instructions { font-size: 0.72em; color: var(--text-mute); margin-bottom: 0.6em; font-style: italic; }
.admin-game-row--waiting { opacity: 0.4; }
.admin-game-teams--ready { color: var(--text); }

/* ── Settings dashboard layout ── */
.settings-layout {
  display: flex;
  align-items: flex-start;
  min-height: 100%;
}

/* ── Left sidebar (desktop: always visible) ── */
.settings-sidebar {
  width: 10em;
  flex-shrink: 0;
  padding: 0.25em 0;
  border-right: 0.07em solid var(--border);
  margin-right: 1.8em;
  position: sticky;
  top: 0;
  align-self: flex-start;
}
.settings-nav-item {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0.7em 0.8em 0.7em 0.6em;
  cursor: pointer;
  border-left: 0.2em solid transparent;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
  user-select: none;
}
.settings-nav-item:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.settings-nav-item.active {
  color: var(--gold-lt);
  border-left-color: var(--gold-lt);
  background: color-mix(in srgb, var(--gold) 7%, transparent);
}

/* ── Content area ── */
.settings-content {
  flex: 1;
  min-width: 0;
}
.settings-panel { display: none; }
.settings-panel.active { display: block; }


/* ── Backdrop (mobile only, behind the drawer) ── */
.settings-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 198;
  background: rgba(0,0,0,0.45);
}
.settings-backdrop.open { display: block; }

/* ── Settings tab ── */
.settings-section { margin-bottom: 2em; }
.settings-section-hdr { font-family: 'Oswald', sans-serif; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-lt); padding: 0.55em 0 0.45em; border-bottom: 0.12em solid var(--blue); margin-bottom: 1em; }
/* Collapsible section headers */
.collapsible-hdr { cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; }
.collapsible-hdr::after { content: '▾'; font-size: 0.85em; flex-shrink: 0; transition: transform 0.15s; }
.collapsible-hdr.section-closed::after { transform: rotate(-90deg); }
.collapsible-body.hidden { display: none; }
.settings-subsection-hdr { font-family: 'Oswald', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin: 0.2em 0 0.5em; }
.adv-toggle-label { display: flex; align-items: center; gap: 0.5em; font-family: 'Oswald', sans-serif; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); cursor: pointer; margin: 1em 0 0; }
.adv-toggle-label input[type="checkbox"] { width: 1em; height: 1em; flex-shrink: 0; accent-color: var(--blue-lt); cursor: pointer; }
.settings-field { margin-bottom: 0.85em; }
.settings-field label { display: block; font-family: 'Oswald', sans-serif; font-size: 0.62em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.3em; }
.settings-field select.styled { width: 100%; }
.settings-field .field-hint { font-size: 0.65em; color: var(--text-mute); margin-top: 0.2em; }
.settings-field--toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em 0.6em; }
.settings-field--toggle label { margin-bottom: 0; flex: 1; min-width: 0; }
.settings-field--toggle input[type="checkbox"] { width: auto; flex-shrink: 0; width: 1.1em; height: 1.1em; accent-color: var(--blue-lt); cursor: pointer; }
.settings-field--toggle .field-hint { flex: 0 0 100%; }
.settings-field-pair { border-left: 2px solid var(--border); padding-left: 0.85em; margin-bottom: 1em; }
.settings-field-pair .settings-field { margin-bottom: 0.6em; }
.settings-field-pair .settings-field:last-child { margin-bottom: 0; }
.settings-field--sub label { color: var(--text-mute); }
.settings-save-row { display: flex; align-items: center; gap: 0.6em; margin-top: 0.5em; }
/* Color picker rows — constrained for mobile */
.settings-content { overflow-x: hidden; }
.settings-panel.active { overflow-x: hidden; }
.field-color-input-row { display: flex; align-items: center; gap: 0.5em; margin-top: 0.25em; max-width: 100%; }
.field-color-picker { width: 1.8em; height: 2em; padding: 0.1em; border-radius: var(--radius-xs); border: 0.07em solid var(--border); background: var(--surface2); cursor: pointer; flex-shrink: 0; }
.field-color-preview { font-family: 'Oswald', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid; border-radius: 0.6em; padding: 0.1em 0.45em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9em; min-width: 0; }
.theme-color-swatch { display: inline-block; width: 2.4em; height: 1.6em; border-radius: var(--radius-xs); border: 0.07em solid var(--border); flex-shrink: 0; }

/* ── Account tab ── */
.account-username {
  font-family: 'Oswald', sans-serif;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--gold-lt);
  letter-spacing: 0.07em;
  padding: 0.3em 0;
}

/* ── Date/time pair inputs ── */
.datetime-pair {
  display: flex;
  gap: 0.5em;
  align-items: center;
  flex-wrap: wrap;
}
.datetime-pair input[type="date"],
.datetime-pair input[type="time"] {
  flex: 1;
  min-width: 8em;
}
.datetime-pair .dt-sep {
  font-size: 0.75em;
  color: var(--text-mute);
  flex-shrink: 0;
}
input[type="date"],
input[type="time"] {
  background: var(--surface2);
  color: var(--text);
  border: 0.07em solid var(--border);
  border-radius: 0.25em;
  padding: 0.3em 0.45em;
  font-family: 'Barlow', sans-serif;
  font-size: max(1rem, 16px);   /* under 16px triggers iOS zoom-on-focus */
}
input[type="date"]:focus,
input[type="time"]:focus {
  outline: none;
  border-color: var(--blue-lt);
}

/* ── User management ── */
.users-list { margin-bottom: 0.5em; }
.user-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.65em 0;
  border-bottom: 0.07em solid var(--border);
  flex-wrap: wrap;
}
.user-row:last-child { border-bottom: none; }
.user-name { font-weight: 600; font-size: var(--text-md); flex: 1; min-width: 0; }
.user-role {
  font-family: 'Oswald', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.18em 0.5em;
  border-radius: 0.25em;
  flex-shrink: 0;
}
.user-role--admin   { background: color-mix(in srgb, var(--blue-lt) 15%, transparent); color: var(--blue-lt); border: 0.07em solid var(--blue); }
.user-role--results { background: color-mix(in srgb, var(--gold) 10%, transparent);  color: var(--gold-lt);  border: 0.07em solid color-mix(in srgb, var(--gold) 40%, transparent); }
.user-actions { display: flex; gap: 0.4em; align-items: center; flex-shrink: 0; }
.user-delete-btn { color: var(--clear-color) !important; border-color: var(--clear-border) !important; }
.user-regen-btn { color: var(--gold) !important; border-color: var(--gold) !important; background: transparent !important; }
.user-regen-btn:hover { background: color-mix(in srgb, var(--gold) 10%, transparent) !important; }
.user-self-label { font-size: var(--text-xs); color: var(--text-mute); font-style: italic; }
.user-must-change { font-size: 0.68rem; color: var(--gold); font-style: italic; flex-shrink: 0; }

/* ── User row layout update for team info ── */
.user-info { display: flex; flex-direction: column; gap: 0.15em; flex: 1; min-width: 0; }
.user-team-name { font-size: 0.75rem; color: var(--gold-lt); font-style: italic; }
.user-role--team { background: color-mix(in srgb, var(--win-color) 10%, transparent); color: var(--win-color); border: 0.07em solid color-mix(in srgb, var(--win-color) 30%, transparent); }

/* ── Coach card ── */
.coach-card {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  padding: 0.75em 0;
  border-bottom: 0.07em solid var(--border);
}
.coach-card:last-child { border-bottom: none; }
.coach-card-name { font-weight: 600; font-size: var(--text-md); }
.coach-teams-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3em;
}
.coach-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  align-items: center;
  padding-top: 0.25em;
}
/* Lineup link panel(s), same markup Settings > Teams uses per team row
   (owner, 2026-08-02: "Add the team links ... to the coaches section") —
   .team-ed-linkpanel's own styling is unchanged, this only frames it here. */
.coach-team-link { margin-top: 0.2em; }
.coach-team-link-hdr {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-mute);
  margin-bottom: 0.2em;
}
/* ── Coach multi-team tags ── */
.coach-team-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  background: var(--surface2);
  border: 0.07em solid var(--border);
  border-radius: 0.25em;
  padding: 0.2em 0.45em 0.2em 0.55em;
  font-family: 'Barlow', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-dim);
}
.coach-team-remove {
  background: none;
  border: none;
  color: var(--text-mute);
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: 1;
  padding: 0 0.1em;
  opacity: 0.7;
}
.coach-team-remove:hover { color: var(--lose-color); opacity: 1; }
.coach-add-team-btn {
  background: none;
  border: 0.07em dashed var(--border);
  border-radius: 0.25em;
  color: var(--text-mute);
  cursor: pointer;
  font-family: 'Barlow', sans-serif;
  font-size: var(--text-sm);
  padding: 0.25em 0.6em;
  transition: color 0.15s, border-color 0.15s;
}
.coach-add-team-btn:hover { color: var(--blue-lt); border-color: var(--blue-lt); }
.coach-add-team-row {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.3em;
  flex-wrap: wrap;
}
.coach-add-team-row input {
  font-family: 'Barlow', sans-serif;
  font-size: max(1rem, 16px);
  padding: 0.3em 0.5em;
  border-radius: 0.25em;
  border: 0.07em solid var(--border);
  background: var(--surface2);
  color: var(--text);
  width: 12em;
}
.coach-add-team-row input:focus { outline: 0.13em solid var(--blue-lt); border-color: var(--blue-lt); }

/* ── Coach teams across tournaments (superadmin only) ── */
.coach-grants {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin-top: 0.5em;
  padding: 0.6em 0.7em;
  background: var(--bg);
  border: 0.07em solid var(--border);
  border-radius: var(--radius-xs);
}
.cg-row { display: flex; flex-direction: column; gap: 0.3em; }
.cg-row + .cg-row { padding-top: 0.5em; border-top: 0.07em solid var(--border); }
.cg-name {
  font-family: 'Oswald', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.cg-teams { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em; }
.cg-add   { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; }
.cg-sel   { max-width: 14em; }
.cg-note  { font-size: 0.74rem; color: var(--text-mute); font-style: italic; }

/* ── Coach link row ── */
.coach-link-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1em;
}
.coach-link-input {
  flex: 1;
  min-width: 0;
  font-family: 'Barlow', monospace;
  font-size: max(1rem, 16px);
  padding: 0.4em 0.6em;
  border-radius: 0.25em;
  border: 0.07em solid var(--border);
  background: var(--surface2);
  color: var(--text-dim);
}

/* ── Bucket admin editor ── */
.bucket-admin-list {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  max-width: 38em;
}
.bucket-admin-row {
  display: flex;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
  gap: 0.6em;
  padding: 0.55em 0.75em;
  border: 0.07em solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: 0.4em;
  cursor: default;
}
.bucket-admin-name {
  flex: 1;
  font-family: 'Oswald', sans-serif;
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bucket-admin-inp {
  width: 5.5em;
  padding: 0.35em 0.5em;
  background: var(--surface2);
  border: 0.07em solid var(--border);
  border-radius: 0.25em;
  color: var(--text);
  font-size: max(1rem, 16px);
  text-align: center;
}
.bucket-admin-inp:focus { outline: 0.13em solid var(--blue-lt); border-color: var(--blue-lt); }
.bucket-count-inp {
  width: 5em; flex-shrink: 0;
  font-family: 'Oswald', sans-serif; font-size: max(1rem, 16px); font-weight: 700;
  text-align: right; padding: 0.15em 0.4em;
  border-radius: var(--radius-xs); border: 0.07em solid var(--border);
  background: var(--surface2); color: var(--text);
}
.bucket-count-inp:focus { outline: 0.13em solid var(--blue-lt); }
.bucket-admin-row--hidden { opacity: 0.45; }
.bucket-admin-row--hidden .bucket-admin-name { text-decoration: line-through; }
.bucket-hide-btn {
  font-family: 'Oswald', sans-serif;
  font-size: var(--btn-font-size);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: var(--btn-pad-v) 0.55em;
  border-radius: var(--radius-xs);
  border: 0.07em solid var(--border);
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.bucket-hide-btn:hover { border-color: var(--text-dim); color: var(--text); }
.bucket-hide-btn.is-hidden { border-color: var(--gold); color: var(--gold-lt); }
.bucket-admin-divider {
  font-family: 'Oswald', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 0.6em 0 0.2em;
  border-top: 0.07em solid var(--border);
  margin-top: 0.4em;
}

/* ── Bucket drag handle ── */
.bucket-drag-handle {
  flex-shrink: 0;
  color: var(--text-mute);
  touch-action: none;      /* prevents scroll interception — pointer events fire immediately */
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.25em;
  min-width: 1.4em;
}
.bucket-drag-handle::before {
  content: '⠿';
  font-size: 1.1rem;
  line-height: 1;
}
.bucket-drag-handle:hover { color: var(--text-dim); }
.bucket-admin-row.drop-before { box-shadow: 0 -3px 0 0 var(--blue-lt); }
.bucket-admin-row.drop-after  { box-shadow: 0  3px 0 0 var(--blue-lt); }

/* ════════════════════════════════════════════════════════════
   MOBILE ADMIN — flex-order approach (tabs at bottom)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  html {
    height: 100%;
    height: 100svh;
    height: var(--app-h, 100svh);
  }
  body {
    height: 100%;
    height: 100svh;
    height: var(--app-h, 100svh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  /* position:sticky inside overflow:hidden body is a no-op and can break WebKit flex
     layout (content starts at y=0 behind the floating header). Use relative instead. */
  .site-header { flex-shrink: 0; position: relative; top: auto; }

  #adminWrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .admin-tab-bar,
  .lineup-nav,
  #lineupNav.admin-tab-bar {
    order: 10;
    flex-shrink: 0;
    margin-bottom: 0;
    border-bottom: none;
    border-top: 0.22em solid var(--gold);
    background: var(--bg);
    box-shadow: 0 -6px 24px rgba(0,0,0,0.55);
    padding-bottom: max(1em, env(safe-area-inset-bottom, 0px));
    padding-left: max(env(safe-area-inset-left, 0px), 1.2em);
    padding-right: max(env(safe-area-inset-right, 0px), 1.2em);
  }

  .admin-tab,
  .lineup-nav-tab {
    border-bottom: none;
    border-top: 0.25em solid transparent;
    padding: 0.75em 0.3em 0.9em;
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    gap: 0.3em;
    -webkit-tap-highlight-color: transparent;
    flex-direction: column;
  }

  .admin-tab .tab-icon,
  .lineup-nav-tab .tab-icon {
    display: block;
    width: 1.8em;
    height: 1.8em;
  }

  .admin-tab.active,
  .lineup-nav-tab.active {
    color: var(--gold-lt);
    border-bottom-color: transparent;
    border-top-color: var(--gold);
  }

  /* Settings tab: show gear when inactive, hamburger when active */
  .admin-tab[data-tab="settings"] .tab-icon--menu { display: none; }
  .admin-tab[data-tab="settings"].active .tab-icon--gear { display: none; }
  .admin-tab[data-tab="settings"].active .tab-icon--menu { display: block; }

  .admin-tab-panel.active {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 1em;
    min-height: 0;
  }

  /* Lineup AND Roster both manage their own padding via .lineup-wrap —
     Roster was missing from this carve-out, so it got THAT padding on top
     of .admin-tab-panel.active's generic 1em, narrowing its table for no
     reason Lineup shared (owner, 2026-08-02: "the look should be identical
     from one tab to the next"). */
  #tab-lineups.active, #tab-roster.active { padding: 0; }

  .results-mode-bar,
  .sched-action-row--top {
    margin-top: -1em;
    margin-left: -1em;
    margin-right: -1em;
    padding-left: 1em;
    padding-right: 1em;
    border-bottom: 0.07em solid var(--border);
    top: -1em;
  }

  /* Settings: collapse sidebar from layout flow on mobile */
  .settings-layout { display: block; }

  /* Sidebar becomes a bottom-right popover on mobile */
  .settings-sidebar {
    position: fixed;
    bottom: calc(var(--tabs-h, 5em) + env(safe-area-inset-bottom, 0px) + 0.5em);
    right: 0.75em;
    top: auto;
    left: auto;
    width: min(13em, 80vw);
    z-index: 199;
    background: var(--surface);
    border: 0.07em solid var(--border);
    border-radius: var(--radius-md);
    margin-right: 0;
    padding: 0.4em 0;
    overflow-y: auto;
    max-height: 60vh;
    transform: scale(0.85) translateY(1em);
    transform-origin: bottom right;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.18s ease, opacity 0.18s ease;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  }
  .settings-sidebar.open {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .settings-nav-item {
    border-left: none;
    border-radius: 0;
    padding: 0.9em 1.1em;
    font-size: 0.85rem;
    border-bottom: 0.07em solid var(--border);
  }
  .settings-nav-item:last-child { border-bottom: none; }
  .settings-nav-item.active { color: var(--gold-lt); background: color-mix(in srgb, var(--gold) 8%, transparent); }

  /* Quick bar: sits just above the tab bar (order:9 vs tab-bar order:10) */
  .admin-quick-bar--visible {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.55em 1.2em;
    border-top: 0.07em solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
    order: 9;
  }
  /* Hide in-panel Games/Bucket bar when quick bar is active on mobile */
  #tab-results .results-mode-bar { display: none; }

  /* Compact results cards to fit more per screen */
  .admin-res-card { margin-bottom: 0.85em; }
  .admin-res-hdr { padding: 0.4em 0.75em; }
  .admin-res-day, .admin-res-time { font-size: clamp(0.82rem, 0.14vw + 0.79rem, 1rem); }
  .admin-res-offset { font-size: 0.75rem; }
  .admin-res-team-row { padding: 0.5em 0.75em; min-height: 2.5em; }
  .admin-res-team { font-size: 0.88rem; }
  .admin-res-footer { padding: 0.45em 0.75em; }
  .admin-res-footer button { font-size: 0.72rem; }

}

/* ── Touch target sizing (coarse pointer = touchscreen) ── */
@media (pointer: coarse) {
  .admin-clear-btn   { min-height: 2.75rem; }
  .sched-save-btn    { min-height: 2.75rem; }
  .results-mode-btn  { min-height: 2.75rem; }
  .bucket-hide-btn   { min-height: 2.75rem; }
  .delay-chip        { min-height: 2.75rem; }
}
.sched-game-hdr-field { font-size: 0.68rem; font-weight: 600; color: var(--text-dim); border: 1px solid var(--border); border-radius: 0.6em; padding: 0.05em 0.45em; white-space: nowrap; }

/* ── Live scoring card ── */
.admin-res-card--live {
  border-color: var(--gold-lt);
  box-shadow: 0 0 0 1.5px var(--gold-lt), 0 2px 12px color-mix(in srgb, var(--gold) 18%, transparent);
}
.admin-live-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--live-color);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.admin-live-period-lbl {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dim);
  flex: 1;
  margin-left: 0.4em;
}
.admin-period-inp {
  width: 4.8em;
  text-align: center;
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.2em 0.4em;
  border: 0.07em solid var(--border);
  border-radius: 0.2em;
  background: var(--surface2);
  color: var(--text);
  flex-shrink: 0;
}
/* ── Results-card footer buttons: one shared box so heights/edges match ── */
/* Cancel / Final / Update / Live differ only in color; metrics are identical. */
.admin-res-footer button {
  font-family: 'Oswald', sans-serif;
  font-size: var(--btn-font-size);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0 1.05em;
  height: var(--btn-h);                 /* fixed height so labels can't change box size */
  border-radius: var(--radius-xs);
  border: 0.09em solid transparent;   /* every button has a border so box heights match */
  box-sizing: border-box;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
/* Cancel — outline (destructive) */
.admin-res-footer .admin-clear-btn { background: transparent; color: var(--clear-color); border-color: var(--clear-border); }
.admin-res-footer .admin-clear-btn:hover { background: color-mix(in srgb, var(--lose-color) 12%, transparent); }
/* Final — solid blue */
.admin-res-footer .admin-save-btn { background: var(--blue); color: #fff; border-color: var(--blue); }
.admin-res-footer .admin-save-btn:hover { background: var(--blue-lt); border-color: var(--blue-lt); }
/* Update — outline green */
/* Live — outline gold */
.admin-res-footer .admin-live-start-btn { background: transparent; color: var(--gold-lt); border-color: var(--gold-lt); }
.admin-res-footer .admin-live-start-btn:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); }
@media (pointer: coarse) {
  .admin-res-footer button { height: 2.4rem; }
}

/* ── Teams editor ──────────────────────────────────────────────────── */
.teams-editor-list { display: flex; flex-direction: column; gap: 0.35em; margin-bottom: 1em; }
.team-ed-row {
  display: flex;
  align-items: center;
  /* The lineup-link panel is a full-width child that wraps onto its own line
     under the row's controls. */
  flex-wrap: wrap;
  gap: 0.4em;
  background: var(--surface);
  border: 0.07em solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35em 0.5em;
  cursor: grab;
}
.team-ed-row[draggable="true"]:active { cursor: grabbing; }
.team-ed-row--dragging { opacity: 0.4; }
.team-ed-row--over { box-shadow: 0 -2px 0 0 var(--blue); }
.team-ed-handle {
  flex: none;
  color: var(--text-mute);
  font-size: 1.1rem;
  line-height: 1;
  cursor: grab;
  padding: 0 0.15em;
  user-select: none;
}
.team-ed-seed {
  flex: none;
  font-family: 'Barlow', sans-serif;
  font-size: 0.78rem;
  color: var(--text-mute);
  min-width: 2em;
  text-align: right;
}
.team-ed-name {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.9rem;
  padding: 0.2em 0.3em;
  border-radius: var(--radius-xs);
}
.team-ed-name:focus { outline: 1px solid var(--blue); background: var(--bg); }
.team-ed-up, .team-ed-down, .team-ed-link {
  flex: none;
  background: transparent;
  border: 0.07em solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-dim);
  font-size: 0.75rem;
  width: 1.6rem;
  height: 1.6rem;
  cursor: pointer;
  line-height: 1;
}
.team-ed-up:disabled, .team-ed-down:disabled { opacity: 0.2; cursor: not-allowed; }
.team-ed-up:not(:disabled):hover, .team-ed-down:not(:disabled):hover { color: var(--text); border-color: var(--text-dim); }
/* Lit when the team already has a link, so a TD can see at a glance which
   teams have been sent one. */
.team-ed-link--on { color: var(--blue); border-color: var(--blue); }
.team-ed-link:hover { color: var(--text); border-color: var(--text-dim); }
.team-ed-link[aria-expanded="true"] { color: var(--text); border-color: var(--text-dim); }
.team-ed-linkpanel {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  margin-top: 0.15em;
  padding: 0.5em;
  background: var(--bg);
  border: 0.07em solid var(--border);
  border-radius: var(--radius-xs);
  cursor: default;
}
.team-ed-linkurl {
  width: 100%;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  padding: 0.4em 0.5em;
  color: var(--text);
  background: var(--surface);
  border: 0.07em solid var(--border);
  border-radius: var(--radius-xs);
}
.team-ed-linkbtns { display: flex; flex-wrap: wrap; gap: 0.4em; }
.team-ed-linknote { margin: 0; font-size: 0.72rem; color: var(--text-mute); line-height: 1.4; }

/* Second line under a team's row: display name / short name / logo / lock —
   the same fields a coach can set for themselves, plus the admin-only lock.
   Full-width child, same trick .team-ed-linkpanel uses above; always open
   (not a toggled panel) since these are common enough to want visible by
   default rather than a click away. */
.team-ed-row2 {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6em;
  margin-top: 0.2em;
  padding-top: 0.4em;
  border-top: 0.07em solid var(--border);
  cursor: default;
}
.team-ed-field {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  font-size: 0.68rem;
  color: var(--text-mute);
}
.team-ed-field span { text-transform: uppercase; letter-spacing: 0.05em; }
.team-ed-field input {
  font-size: 0.82rem;
  padding: 0.3em 0.4em;
  color: var(--text);
  background: var(--bg);
  border: 0.07em solid var(--border);
  border-radius: var(--radius-xs);
  width: 9em;
}
.team-ed-field input:focus { outline: 1px solid var(--blue); }
.team-ed-logo { display: flex; align-items: center; gap: 0.4em; }
.team-ed-logo-preview {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  border: 0.07em solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg);
}
/* Coach panel's own Team tab — same picker, a bigger preview since it's the
   only thing on that row instead of one of several in a table. */
.team-tab-logo-preview {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  border: 0.07em solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg);
}
.team-tab-colors { display: flex; gap: 1.2em; align-items: flex-start; }
/* Sits between the two swatches in the same flex row — owner, 2026-08-02:
   "Add a button in team panel to swap primary & secondary colors, same for
   text/outline." margin-top roughly clears the label text above the swatch
   so the icon lines up with the swatch itself, not the taller column that
   also includes the Clear/Auto/None button underneath it. */
.team-tab-swap-btn {
  margin-top: 1.3em;
  width: 1.8rem;
  height: 1.8rem;
  border: 0.07em solid var(--border);
  border-radius: var(--radius-xs);
  background: none;
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.team-tab-swap-btn:hover { color: var(--text); border-color: var(--text-dim); }
.team-tab-color-field {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  font-size: 0.72rem;
  color: var(--text-mute);
}
.team-tab-color-field span { text-transform: uppercase; letter-spacing: 0.05em; }
.team-tab-color-field input[type="color"] {
  width: 3rem;
  height: 2.4rem;
  padding: 0;
  border: 0.07em solid var(--border);
  border-radius: var(--radius-xs);
  background: none;
  cursor: pointer;
}
/* Wraps just the <input type="color">, sized to it via inline-block content
   sizing (owner, 2026-08-02: "if a team hasn't selected a color... place a
   small red x through the box to indicate a selection hasn't been made" —
   then, on a first pass using rotate(45deg) bars: "it should go from corner
   to corner in the selector box and should not extend past the edges").
   A fixed-angle rotated bar only lines up with the actual corners when the
   box happens to be square, and every swatch here isn't (3rem x 2.4rem,
   2.2rem x 1.8rem) — linear-gradient's "to top right"/demo/"to bottom right"
   keywords compute the TRUE corner-to-corner angle from the box's own
   rendered aspect ratio, and a background layer is clipped to the box by
   definition, so the line can never overshoot it. Sits on both the coach
   Team tab's swatches (.team-tab-color-field) and admin's Teams editor
   (.team-ed-color-field), which share this CSS file. */
.color-swatch { position: relative; display: inline-block; line-height: 0; }
/* Chrome/Safari's native <input type="color"> reserves its own internal
   inset around the visible swatch (::-webkit-color-swatch-wrapper's default
   padding) — the element's own border-box is bigger than the color you
   actually see painted inside it. The X sizes itself to the wrapper's full
   box (correctly, per the corner-to-corner note above), so that gap showed
   up as the X overshooting the VISIBLE color rectangle even though it never
   overshot the input's own box (owner, 2026-08-02: "constrain it to the
   inner rectangle, not the outer most rectangle"). Zeroing the native inset
   makes the visible color fill the whole box, so the two rectangles become
   the same one instead of trying to shrink the X to match an inset that
   has no CSS custom property to measure. */
.color-swatch input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-swatch input[type="color"]::-webkit-color-swatch { border: none; }
.color-swatch--unset::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--lose-color) calc(50% - 1px), var(--lose-color) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--lose-color) calc(50% - 1px), var(--lose-color) calc(50% + 1px), transparent calc(50% + 1px));
}
.team-tab-style-row { display: flex; gap: 1em; margin-bottom: 0.6em; }
.team-tab-style-opt {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.85rem;
  color: var(--text-dim);
  cursor: pointer;
}
.team-tab-angle-row { display: flex; align-items: center; gap: 0.6em; }
.team-tab-angle-row label { font-size: 0.72rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.05em; }
.team-tab-angle-row input[type="range"] { flex: 1; max-width: 16em; }
.team-ed-logo-input { font-size: 0.72rem; max-width: 11em; color: var(--text-mute); }
.team-ed-logo-remove {
  font-size: 0.72rem;
  padding: 0.25em 0.5em;
  color: var(--text-dim);
  background: transparent;
  border: 0.07em solid var(--border);
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.team-ed-logo-remove:hover { color: var(--text); border-color: var(--text-dim); }
.team-ed-colors { display: flex; gap: 0.6em; }
.team-ed-color-field {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  font-size: 0.68rem;
  color: var(--text-mute);
}
.team-ed-color-field span { text-transform: uppercase; letter-spacing: 0.05em; }
.team-ed-color-field input[type="color"] {
  width: 2.2rem;
  height: 1.8rem;
  padding: 0;
  border: 0.07em solid var(--border);
  border-radius: var(--radius-xs);
  background: none;
  cursor: pointer;
}
.team-ed-color-clear {
  font-size: 0.65rem;
  color: var(--text-mute);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.15em 0 0;
}
.team-ed-lock {
  display: flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.78rem;
  color: var(--text-dim);
  cursor: pointer;
  flex: none;
  /* margin-left:auto no longer does anything useful here — .team-ed-name's
     own flex:1 already claims all free space in the row before this runs
     (owner, 2026-08-02: moved from teamProfileRow's now-removed second line
     into the primary row, alongside Edit/link/reorder, for the click-into-a-
     team restructure) — left off rather than carried over as dead styling. */
}
/* Opens the per-team detail view — same small-text-button look as the
   lineup-link panel's own buttons (.admin-edit-btn), just pinned to not
   shrink in a row that also has a flex:1 name field. */
.team-ed-edit { flex: none; }
.teams-detail-back { margin-bottom: 0.6em; }

/* Date set, clock time blank = "this day, time TBD" (see joinTime). Shown
   only in that state, so a row reads as deliberate rather than half-filled. */
.dt-tbd { display: none; }
.datetime-pair--tbd .dt-tbd {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-lt);
  border: 0.07em solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: var(--radius-xs);
  padding: 0.05em 0.4em;
  margin-left: 0.35em;
}

/* ── Teams tab: embedded coach panel ──────────────────────────────────
   The team detail view hosts /coach?embed=1 in an iframe (see the comment on
   #tab-teams in admin.html for why it is the real panel rather than a second
   copy). The frame is auto-sized to its content by sizeTeamsDetailFrame() in
   admin.js, so there is no inner scrollbar — a scroll region inside a scroll
   region is the thing that makes an embed feel like an embed, and on a phone
   it is genuinely hard to use. */
.teams-detail-bar {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 0.75em;
  padding-bottom: 0.6em;
  border-bottom: 0.07em solid var(--border);
}
.teams-detail-name {
  font-family: 'Oswald', sans-serif;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.03em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.teams-detail-frame {
  display: block;
  width: 100%;
  border: 0;
  /* Replaced by a measured pixel height once loaded; this is only what the
     frame occupies for the instant before that runs. */
  height: 32rem;
  overflow: hidden;
}

/* Embedded coach panel: it is a page inside a panel, so it must not re-assert
   page-level chrome. The header is hidden in JS (applyCoachEmbedMode); this
   drops the outer spacing that assumed one, and stops the body scrolling on
   its own now that the host frame is sized to the content. */
/* min-height:100vh on body (base.css) makes the embedded body always fill the
   iframe, so measuring body.scrollHeight just returns the height we last SET —
   and any padding added to it compounds every frame, growing the frame without
   bound (observed: +8px/frame, forever). Releasing the minimum here is what
   makes the measurement report CONTENT height instead. */
body.coach-embed {
  padding: 0;
  /* Deliberately NOT `background: transparent`: base.css sets `--bg` on :root
     for the DARK theme and overrides it under `body.light`, so a transparent
     body leaves the browser painting the iframe canvas from the document's
     dark color-scheme — a black panel inside a light admin page. Inheriting
     body's normal `background: var(--bg)` resolves the variable ON body,
     where the light override lives, and tracks the theme in both directions. */
  overflow: visible;
  min-height: 0;
  height: auto;
  display: block;
}
/* Below 1024px the panel becomes a full-height APP SHELL: body is a flex
   column, #adminWrap takes the slack with overflow:hidden, and the tab bar is
   ordered to the bottom as a nav. The iframe is narrower than that breakpoint
   at any host width, so the embed always gets it — and an app shell has no
   natural height to measure, which is what left the frame short with its tab
   bar stranded mid-content. These put the document back to normal flow so it
   has a real height, with the tab bar back at the top where a panel section
   reads correctly. Higher specificity than the media-query rules they undo, so
   source order does not matter. */
body.coach-embed #adminWrap {
  flex: none;
  min-height: 0;
  overflow: visible;
  display: block;
}
body.coach-embed .admin-tab-bar,
body.coach-embed #lineupNav.admin-tab-bar {
  order: 0;
  position: static;
  box-shadow: none;
  border-top: none;
  border-bottom: 0.07em solid var(--border);
  padding-bottom: 0;
  margin-bottom: 0.75em;
}
body.coach-embed .admin-tab-panel { overflow: visible; }
body.coach-embed .admin-container { padding-top: 0; }

/* Embedded admin panel (Results, via the public page's header-menu button —
   openQuickResults/sizeResultsEmbedFrame in bracket.js): same app-shell
   problem as body.coach-embed directly above, same fix. The tab bar is
   hidden outright here (applyAdminEmbedMode, admin.js) rather than
   repositioned, since this embed is scoped to Results only — so there is no
   .admin-tab-bar override to carry over from the coach-embed block. */
body.admin-embed {
  padding: 0;
  overflow: visible;
  min-height: 0;
  height: auto;
  display: block;
}
body.admin-embed #adminWrap {
  flex: none;
  min-height: 0;
  overflow: visible;
  display: block;
}
body.admin-embed .admin-tab-panel { overflow: visible; }
body.admin-embed .admin-container { padding-top: 0; }


/* Builder embedded in schedule tab — fill the full panel width */
#schedBuilderPanel .bld-main {
  max-width: none;
  margin: 0;
  padding: 0.75em 1em;
}

/* ── Names editor ── */
.sched-names-toolbar {
  display: flex;
  gap: 0.5em;
  align-items: center;
  padding: 0.75em 1em;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.sched-names-find, .sched-names-replace {
  flex: 1;
  min-width: 120px;
  font-family: 'Barlow', sans-serif;
  font-size: 0.9rem;
  padding: 0.4em 0.7em;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
}
/* ── Quick editor ── */
/* Two-line row (desktop-focused): line 1 = sid/label/time/field, line 2 =
   team1/vs/team2, indented under the sid column for breathing room. */
.quick-row { display: block; padding: 0.45em 0.2em; border-bottom: 0.07em solid var(--border); }
.quick-line { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }
.quick-line--teams { margin-top: 0.3em; padding-left: 4.9em; }
.quick-sid { font-family: 'Oswald', sans-serif; font-size: 0.6rem; letter-spacing: 0.05em; color: var(--text-mute); min-width: 4.2em; }
.quick-label { width: 11em; }
.quick-field { width: 6em; }
.quick-team { display: inline-flex; align-items: center; gap: 0.35em; min-width: 11em; }
.quick-team-inp { width: 10em; }
.quick-vs { color: var(--text-mute); font-size: 0.7rem; }
.quick-feed-toggle { display: inline-flex; align-items: center; gap: 0.2em; font-size: 0.68rem; color: var(--text-dim); cursor: pointer; }
/* Advanced-editor variant of the same toggle, sitting inside the field label */
.sched-src-toggle { display: inline-flex; align-items: center; gap: 0.25em; font-size: 0.85em; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-dim); cursor: pointer; margin-left: 0.7em; }
.sched-slot-hint { display: block; font-size: 0.72rem; color: var(--text-mute); margin-top: 0.25em; }
/* Feed side's inline winner/loser + game dropdowns — sized to fit the row */
.quick-team--feed .source-dropdown-row { display: inline-flex; align-items: center; gap: 0.3em; }
.quick-team--feed .admin-winner-sel { font-size: 0.78rem; padding: 0.25em 0.4em; min-width: 0; }
.quick-row input[type="text"] { font-size: 0.85rem; padding: 0.3em 0.45em; background: var(--surface2); color: var(--text); border: 0.07em solid var(--border); border-radius: var(--radius-xs); }
/* Compact the shared datetime-pair inputs when they sit inside a quick-row */
.quick-row .datetime-pair { gap: 0.3em; }
.quick-row .datetime-pair input[type="date"],
.quick-row .datetime-pair input[type="time"] { width: 7.2em; min-width: 0; flex: none; }
#quickEditorList { padding: 0 1em 3em; }
@media (max-width: 700px) {
  .quick-row { border: 0.07em solid var(--border); border-radius: var(--radius-sm); margin-bottom: 0.5em; padding: 0.5em; }
  .quick-line--teams { padding-left: 0; }
}

/* ── Multi-tournament (Phase C) ── */
/* Header tournament switcher — compact so it fits beside ← Bracket on phones */
.admin-tournament-switcher {
  max-width: 11em;
  font-size: var(--text-sm);
  padding: 0.35em 0.5em;
  border-radius: var(--radius-xs);
  border: 0.07em solid var(--border);
  background: var(--surface2);
  color: var(--text);
}
/* Checkbox-style settings field (tournaments panel Public toggle) */
.settings-field--check label { display: flex; align-items: center; gap: 0.5em; font-weight: 500; }
.settings-field--check input[type="checkbox"] { width: 1.1em; height: 1.1em; }
/* Scorekeeper-mode link, shaped like a mode button */
.results-mode-btn--link { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }

/* Roster: sort-by row above the table, and the player count on the left of
   the Save/Add Player actions row. */
.roster-sort-row { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.8em; flex-wrap: wrap; }
.roster-sort-label { font-size: 0.78rem; color: var(--text-mute); }
.roster-count { margin-right: auto; color: var(--text-dim); }

/* Logo picker (Application Colors) */
.logo-picker-row { display: flex; align-items: center; gap: 0.8em; flex-wrap: wrap; }
.logo-picker-row .site-logo { background: var(--surface2); border: 0.07em solid var(--border); padding: 0.2em; }
/* App-icon baker: preview at home-screen size with the platform corner
   radius so the TD sees what the phone will actually show. */
.icon-preview { width: 64px; height: 64px; border-radius: 14px; border: 0.07em solid var(--border); flex-shrink: 0; }
.icon-style-row select { flex: 0 1 auto; width: auto; }
.icon-style-row input[type="color"] { width: 3.2em; height: 2.2em; padding: 0.15em; flex-shrink: 0; }
/* Favicon preview at roughly tab size, doubled so it's actually inspectable. */
.favicon-preview {
  width: 32px; height: 32px;
  border-radius: 0.2em;
  border: 0.07em solid var(--border);
  background: var(--surface2);
  padding: 0.15em;
  flex-shrink: 0;
}

/* Custom crop editor: the whole logo letterboxed in a square stage with a
   draggable square selection over it. Positions are set in JS from the crop
   rectangle (source-image pixels), so nothing here assumes a stage size. */
.icon-crop { display: flex; gap: 1em; align-items: flex-start; flex-wrap: wrap; margin-top: 0.7em; }
.icon-crop-stage {
  position: relative;
  width: 240px; height: 240px;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2);
  border: 0.07em solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  touch-action: none;          /* pointer drags must not scroll the panel */
  user-select: none;
}
/* The image sits at ~68% of the stage so there is visible room around it for
   the selection square to be dragged BEYOND the artwork — that overhang is
   what letterboxes a rectangular logo instead of cutting its long side. */
.icon-crop-img { max-width: 68%; max-height: 68%; display: block; pointer-events: none; }
.icon-crop-actions { display: flex; gap: 0.5em; flex-wrap: wrap; }
.icon-crop-box {
  position: absolute;
  box-sizing: border-box;
  border: 0.14em solid var(--blue-lt);
  /* Dims everything outside the selection without extra elements. */
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  cursor: move;
  touch-action: none;
}
.icon-crop-handle {
  position: absolute;
  right: -0.5em; bottom: -0.5em;
  width: 1em; height: 1em;
  background: var(--blue-lt);
  border: 0.14em solid var(--surface);
  border-radius: 50%;
  cursor: nwse-resize;
  touch-action: none;
}
.icon-crop-side { display: flex; flex-direction: column; gap: 0.6em; align-items: flex-start; max-width: 20em; }
/* Square/Rectangle crop-shape toggle (owner, 2026-08-02: "allow a selector
   for square or rectangle crop"). */
.icon-crop-shape-toggle { display: flex; gap: 0.4em; }
.icon-crop-shape-btn {
  padding: 0.3em 0.8em;
  border: 0.07em solid var(--border);
  border-radius: var(--radius-xs);
  background: none;
  color: var(--text-dim);
  font-size: 0.85rem;
  cursor: pointer;
}
.icon-crop-shape-btn.is-active {
  background: var(--blue-lt);
  border-color: var(--blue-lt);
  color: #fff;
}
/* Wider than the default .login-box (340px) so the crop stage and its side
   panel can sit next to each other instead of always stacking. */
.team-logo-crop-box { width: min(90vw, 560px); }
@media (pointer: coarse) {
  .icon-crop-handle { width: 1.6em; height: 1.6em; right: -0.8em; bottom: -0.8em; }
}

/* Small icon buttons need real touch targets on phones/tablets — mouse
   users keep the compact sizes above. */
@media (pointer: coarse) {
  .team-ed-up, .team-ed-down, .team-ed-link { width: 2.75rem; height: 2.75rem; font-size: 0.95rem; }
  .coach-team-remove { padding: 0.55em 0.7em; margin: -0.55em -0.35em; }
  .delay-offset-del { min-height: 2.6rem; padding: 0.2em 0.9em; }
}

/* CSP refactor: classes replacing generated inline styles */
.bld-muted--pad { padding: 1em; }
.admin-subtitle--pad { padding: 0.5em 0; }
.admin-subtitle--flush { margin: 0; }

/* ── Swiss pairing bar (quick editor, swiss format only) ── */
.swiss-bar {
  display: flex;
  align-items: center;
  gap: 0.8em;
  flex-wrap: wrap;
  padding: 0.7em 0;
  border-bottom: 0.07em solid var(--border);
  margin-bottom: 0.6em;
}
.swiss-bar-hint {
  font-family: 'Barlow', sans-serif;
  font-size: var(--text-xs);
  color: var(--text-dim);
  flex: 1;
  min-width: 14em;
}

/* "Also coaches" on a staff user's row. Staff can already edit any team's
   lineups; this exists so a TD who coaches gets their OWN team on their OWN
   account rather than running a second coach login. Full-width child of the
   flex row, same trick .team-ed-row uses for its link panel. */
.user-coach-row {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 0.6em;
  margin-top: 0.5em;
  padding-top: 0.5em;
  border-top: 0.07em solid var(--border);
}
.user-coach-label {
  font-family: 'Oswald', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.user-coach-none { font-size: 0.78rem; color: var(--text-mute); font-style: italic; }
.user-coach-row .coach-add-team-row { flex: 0 0 100%; }

/* ── Move Game Times (long rain delay) ──────────────────────────────────
   Sits under the offset controls in the Delays panel. The offset annotates a
   printed time; this rewrites it. */
.resched-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.4em;
  flex-wrap: wrap;
}
.resched-count { font-size: 0.72rem; color: var(--text-dim); }

/* Capped and scrollable: a 61-game event would otherwise bury the controls
   below it, and this list sits in the middle of a form. */
.resched-list {
  max-height: 15em;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
}
/* Scoped to .settings-field the same way .lineup-req-opt above is, and for
   exactly the same reason: `.settings-field label` is display:block, uppercase
   and dimmed — right for a field caption, wrong for a row of controls. Without
   the extra specificity these rows do not flex at all and the checkbox strands
   itself at the far right. */
.settings-field .resched-row {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.36em 0.6em;
  margin-bottom: 0;
  font-family: 'Barlow', sans-serif;
  font-size: 0.76rem;
  letter-spacing: normal;
  text-transform: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.settings-field .resched-row:last-child { border-bottom: none; }
/* `.settings-field input` is width:100%, sized for the text fields that make
   up the rest of this panel. Applied to a checkbox it produces a ~975px-wide
   control that shoves the row's own text off the right-hand edge — the text is
   present and correctly coloured, just parked outside the row. Same family of
   trap as the display:block one above: a panel-wide input rule meets a control
   that is not a text box. */
.settings-field .resched-chk {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.resched-when { color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.resched-lbl  { color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Only the LIST rows let the label absorb slack — in a preview row that would
   shove the from → to pair against the far edge, away from the game it
   belongs to. */
.resched-list .resched-lbl { flex: 1; }
.resched-fld  { color: var(--text-mute); font-size: 0.7rem; white-space: nowrap; margin-left: auto; }

.resched-mode-row { display: flex; gap: 1.1em; flex-wrap: wrap; }
/* Same override as the rows above — these are choices, not field captions. */
.settings-field .resched-mode-row label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-bottom: 0;
  font-family: 'Barlow', sans-serif;
  font-size: 0.78rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
  cursor: pointer;
}
/* Same width:100% trap as the row checkboxes. */
.settings-field .resched-mode-row input { width: auto; margin: 0; padding: 0; flex: 0 0 auto; }
.settings-field .resched-mode-row label { white-space: nowrap; }
.resched-shift-row { display: flex; align-items: center; gap: 0.4em; }

.resched-preview {
  margin-top: 0.7em;
  padding: 0.6em 0.7em;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface2);
}
.resched-preview-hdr {
  font-size: 0.78rem;
  color: var(--text);
  margin-bottom: 0.45em;
  font-weight: 600;
}
.resched-move {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.74rem;
  padding: 0.18em 0;
  flex-wrap: wrap;
}
.resched-from  { color: var(--text-mute); text-decoration: line-through; white-space: nowrap; }
.resched-arrow { color: var(--text-mute); }
.resched-to    { color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* A move that crosses to a different DAY is the one a TD most needs to spot
   before applying — a Saturday game landing on Sunday is usually a typo in
   the shift amount. */
.resched-to--day { color: var(--gold-lt); font-weight: 600; }
.resched-note {
  margin-top: 0.55em;
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--text-dim);
}
.resched-err { font-size: 0.76rem; color: var(--lose-color); }

/* Coach list in the coach panel's Team tab (coaches managing coaches). */
.coach-list-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex-wrap: wrap;
  padding: 0.4em 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
}
.coach-list-row:last-child { border-bottom: none; }
.coach-list-name    { color: var(--text); font-weight: 600; }
.coach-list-teams   { color: var(--text-dim); flex: 1; min-width: 0; }
.coach-list-pending { color: var(--gold-lt); font-size: 0.7rem; }
.coach-list-btn     { padding: 0.2em 0.55em; font-size: 0.7rem; }

/* Invite-link banner: the whole line is the button, with a separate dismiss. */
.coach-pending-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--surface2);
  border-bottom: 1px solid var(--gold);
}
.coach-pending-main {
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: 0.6em 1em;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: 'Barlow', sans-serif;
  font-size: 0.78rem;
  line-height: 1.45;
  cursor: pointer;
}
.coach-pending-main:hover { color: var(--text); }
.coach-pending-main strong { color: var(--gold-lt); }
.coach-pending-x {
  flex: 0 0 auto;
  padding: 0 0.9em;
  background: none;
  border: none;
  border-left: 1px solid var(--border);
  color: var(--text-mute);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.coach-pending-x:hover { color: var(--text); }