/* St. Joseph's Yorkville CYO — shared styles. Palette drawn from the
   parish crest (royal blue + gold); typography is a clean, bold sans
   in the spirit of modern product UI (e.g. Altruist), not the crest's
   ornamental lettering — this is a functional tool, not a marketing page. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Bebas+Neue&display=swap');

:root {
  --navy: #1F3DA3;
  --navy-dark: #16296E;
  --gold: #E8B923;
  --gold-dark: #C89A1B;
  --bg: #f7f8fa;
  --card: #ffffff;
  --text: #1f2430;
  --text-muted: #667085;
  --border: #e3e6ec;
  --danger: #c0392b;
  --success: #1e7d4b;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 10px 28px rgba(16, 24, 40, 0.16), 0 4px 10px rgba(16, 24, 40, 0.08);
  --navy-tint: #EEF1FB;
  --gold-tint: #FDF3D9;
  --orange: #E4602A;
  --orange-dark: #C24E1F;
  --orange-tint: #FDEBE0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy); }

.topbar {
  background: var(--navy);
  color: #fff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 3px solid var(--gold);
}

.topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-mark {
  width: 30px;
  height: 30px;
  display: flex;
  flex-shrink: 0;
}
.brand-mark svg { width: 100%; height: 100%; }

.topbar nav {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  flex: 1;
}

.topbar nav a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 7px;
  transition: background-color 150ms ease, color 150ms ease;
}

.topbar nav a.active {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-weight: 600;
}

.topbar nav a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* Hamburger — hidden on desktop, shown at the mobile breakpoint below */
.nav-toggle {
  display: none;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.2); }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.topbar.nav-open .nav-toggle .icon-open { display: none; }
.topbar.nav-open .nav-toggle .icon-close { display: block; }

.logout-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}

.account-menu { position: relative; flex-shrink: 0; }

.avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: var(--navy-dark);
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease;
}
.avatar-btn:hover { border-color: #fff; transform: translateY(-1px); }

.account-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 46px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  min-width: 210px;
  overflow: hidden;
  z-index: 20;
}
.account-dropdown.open { display: block; }

.account-dropdown-label {
  padding: 12px 14px;
  font-size: 0.78rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.account-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 11px 14px;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
}
.account-dropdown-item:hover { background: var(--navy-tint); color: var(--navy-dark); }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 20px 72px;
}

h1 {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1;
  margin: 0 0 var(--space-5);
  color: var(--navy);
  letter-spacing: 0.015em;
}

h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.08rem;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Page header: title + optional action, with the gold rule as the motif */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  border-bottom: 3px solid var(--gold);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-5);
}
.page-head h1 { margin: 0; }

.crumb {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.crumb a { color: var(--text-muted); text-decoration: none; font-weight: 600; }
.crumb a:hover { color: var(--navy); text-decoration: underline; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 11px 18px;
  border-radius: 9px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  min-height: 42px;
  transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.btn:hover { background: var(--navy-dark); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.secondary { background: #fff; color: var(--navy); border: 1px solid var(--border); }
.btn.secondary:hover { background: var(--navy-tint); border-color: var(--navy); }
.btn.small { padding: 6px 12px; font-size: 0.8rem; min-height: 34px; }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #9e2f24; }

input, select, textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  min-height: 44px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(31, 61, 163, 0.14);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin: var(--space-4) 0 6px;
  color: var(--text);
}

.required::after {
  content: " *";
  color: var(--danger);
}

.form-row {
  display: flex;
  gap: 10px;
}
.form-row > * { flex: 1; }

/* Horizontally scrollable tables get edge shadows so it's visible that there's
   more to the right. The white "cover" layers scroll with the content (local),
   the shadows don't (scroll) — so each shadow only shows while there is
   actually more content that way, and fades out at either end. Pure CSS. */
.table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  background:
    linear-gradient(to right, var(--card) 30%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left, var(--card) 30%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(16, 24, 40, 0.22), rgba(16, 24, 40, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(16, 24, 40, 0.22), rgba(16, 24, 40, 0)) right center;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 16px 100%, 16px 100%;
  background-attachment: local, local, scroll, scroll;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th, td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  /* Wrap between words so long values (school names, notes) don't force the
     table wider than the page — but never break inside a word, which is what
     produced "Unassign ed" / "GENDE R". */
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
/* Headers and buttons stay on one line */
thead th { white-space: nowrap; }
td .btn { white-space: nowrap; }
/* Opt-in for values that must never wrap at all (dates) */
th.nowrap, td.nowrap { white-space: nowrap; }

thead th {
  color: var(--navy);
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--navy-tint);
  border-bottom: 2px solid var(--border);
}
thead th:first-child { border-top-left-radius: 12px; }
thead th:last-child { border-top-right-radius: 12px; }

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--navy-tint); }

td a { font-weight: 600; text-decoration: none; }
td a:hover { text-decoration: underline; }

.empty-state {
  color: var(--text-muted);
  padding: var(--space-6) var(--space-3);
  text-align: center;
  font-size: 0.92rem;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 12px;
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.badge.paid { background: #e6f4ec; color: var(--success); }
.badge.balance { background: #fbeae7; color: var(--danger); }
.badge.role { background: var(--navy-tint); color: var(--navy); }

/* Coach roster: each linked adult, with contact details */
.guardian { padding: 6px 0; }
.guardian + .guardian { border-top: 1px dashed var(--border); margin-top: 6px; }
.guardian-name { font-weight: 700; }
.guardian-contact { font-size: 0.86rem; line-height: 1.6; white-space: normal; }
.guardian-emergency { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; white-space: normal; }

.optional-note { font-weight: 400; color: var(--text-muted); }

/* Bulk-selection bar (All Athletes) */
.select-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  background: var(--navy-tint);
  border: 1px solid var(--navy);
  border-radius: 12px;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.select-count { font-weight: 700; color: var(--navy); }

.col-check { width: 44px; text-align: center; }
.col-check input { cursor: pointer; }
td.col-check { padding-left: 10px; padding-right: 10px; }

/* Role filter chips (Super Admin account list) */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.filter-chip {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 15px;
  min-height: 38px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.filter-chip:hover { background: var(--navy-tint); border-color: var(--navy); }
.filter-chip.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.filter-count {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 600;
}
@media (max-width: 700px) {
  .filter-count { margin-left: 0; width: 100%; }
}

.helper-text { color: var(--text-muted); font-size: 0.85rem; margin-top: 4px; }
.error-text { color: var(--danger); font-size: 0.88rem; margin-top: 10px; }
.success-text { color: var(--success); font-size: 0.88rem; margin-top: 10px; }

.search-input { max-width: 260px; }

.centered-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6) var(--space-5) var(--space-5);
  width: 100%;
  max-width: 400px;
  text-align: center;
  border-top: 5px solid var(--gold);
}

.auth-mark {
  width: 52px;
  height: 52px;
  margin: 0 auto var(--space-4);
  display: block;
}

.auth-card .logo {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-weight: 400;
  color: var(--navy);
  font-size: 1.9rem;
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin-bottom: var(--space-2);
}

.auth-card p.subtitle {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: var(--space-5);
}

/* ---- Small layout utilities (replacing scattered inline styles) ---- */
.m-0 { margin: 0 !important; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-0 { margin-bottom: 0; }
.w-auto { width: auto; }
.w-full { width: 100%; }
.text-muted { color: var(--text-muted); }
.select-inline { max-width: 260px; }
.field-narrow { width: 90px; }
.label-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
}
.checkbox-inline { width: auto; min-height: 0; display: inline-block; }
.row-flex { display: flex; gap: 6px; }
.divider-row { border-bottom: 1px solid var(--border); padding: 10px 0; }
.divider-under { border-bottom: 1px solid var(--border); padding-bottom: var(--space-3); }
.card-inset {
  background: var(--bg);
  margin-top: var(--space-5);
  box-shadow: none;
  border: 1px solid var(--border);
}
.detail-label { width: 220px; color: var(--text-muted); }
.text-left { text-align: left; }

/* Card accents used by admin screens */
.card.card-danger { border-color: #f3d2cc; border-top: 3px solid var(--danger); }
.card.card-warn { border-color: #EBD9A6; background: var(--gold-tint); }

.hint-tight { margin-top: -8px; margin-bottom: var(--space-4); }

/* Full-width draggable row (custom field reordering) */
.chip.chip-row {
  width: 100%;
  box-sizing: border-box;
  cursor: grab;
  padding: 10px 12px;
}
.chip.chip-row.drag-over {
  border-color: var(--navy);
  background: var(--navy-tint);
  box-shadow: inset 0 2px 0 var(--navy);
}
.chip-grip {
  display: inline-flex;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-right: 8px;
  vertical-align: -3px;
}
.chip-grip svg { width: 14px; height: 16px; }

/* Profile form (shared by the full page and the desktop modal) */
.form-section-head {
  margin-top: var(--space-5);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--gold);
  font-size: 1rem;
}
.form-section-head.first { margin-top: 0; }

.form-actions {
  margin-top: var(--space-5);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Desktop profile modal (was inline cssText in profile-form.js) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 30, 0.5);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  z-index: 1000;
}
.modal-card {
  max-width: 480px;
  width: 100%;
  margin: 0;
  box-shadow: var(--shadow-lg);
}

.h2-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}
.h2-icon svg { width: 19px; height: 19px; color: var(--gold-dark); flex-shrink: 0; }

/* Admin-defined custom fields rendered into player/parent forms */
.custom-field + .custom-field { margin-top: var(--space-2); }
.custom-field label { margin-top: var(--space-4); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}

.stat-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-4);
  text-align: center;
  border-top: 3px solid var(--gold);
}
.stat-box .num {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: 2.1rem;
  line-height: 1;
  font-weight: 400;
  color: var(--navy);
  letter-spacing: 0.02em;
}
.stat-box .label {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

@media (max-width: 640px) {
  table { font-size: 0.82rem; }
  th, td { padding: 9px 10px; }
  .container { padding: 20px 14px 56px; }
  h1 { font-size: 2rem; }

  /* Brand on the left, hamburger + avatar on the right. The nav collapses
     into a stacked menu that pushes the page down when opened — no sideways
     scrolling and no guessing that there's more off-screen. */
  .topbar { flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 10px 14px; }
  .topbar .brand { order: 1; margin-right: auto; }
  .nav-toggle { display: inline-flex; order: 2; }
  .account-menu { order: 3; }

  .topbar nav {
    order: 4;
    flex: 0 0 100%;
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2) 0 var(--space-1);
    margin-top: var(--space-2);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  .topbar.nav-open nav { display: flex; }
  .topbar nav a {
    padding: 12px 10px;
    font-size: 0.98rem;
    border-radius: 8px;
  }
  .topbar nav a.active { background: rgba(255, 255, 255, 0.18); }

  .page-head { align-items: flex-start; }
}

/* Stacked "card" rows for the parent- and coach-facing tables. These are read
   on phones by the least technical audience, so they never scroll sideways —
   each row becomes a labelled block instead. Labels come from the column
   headers via data-label (set in nav.js). */
@media (max-width: 700px) {
  .table-stack { display: block; }
  .table-stack thead { display: none; }
  /* width:auto (not 100%) so cells that carry horizontal margins — the title
     rule below — stay inside the card instead of overflowing it. */
  .table-stack tbody,
  .table-stack tr,
  .table-stack td { display: block; width: auto; }

  .table-stack tr {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    margin-bottom: var(--space-3);
    padding: var(--space-2) 0;
    box-shadow: var(--shadow);
  }
  .table-stack tr:last-child { margin-bottom: 0; }
  .table-stack tbody tr:hover td { background: transparent; }

  .table-stack td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    border: none;
    padding: 7px 14px;
    white-space: normal;
    text-align: right;
    /* Long unbroken values (email addresses especially) must wrap rather than
       run past the card edge on a narrow phone. */
    overflow-wrap: anywhere;
    min-width: 0;
  }
  .table-stack td::before {
    content: attr(data-label);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    text-align: left;
    flex-shrink: 0;
  }
  /* First cell (the name) reads as the card's title */
  .table-stack td:first-child {
    font-family: 'Bebas Neue', 'Inter', sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    padding-top: 10px;
    text-align: left;
    justify-content: flex-start;
    border-bottom: 2px solid var(--gold);
    margin: 0 14px var(--space-2);
    padding-left: 0;
    padding-right: 0;
  }
  .table-stack td:first-child::before { display: none; }
  /* When a table leads with a tick box, that cell must not become the card
     title — the name cell after it does instead. */
  .table-stack td.col-check {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0;
    border-bottom: none;
    margin: 0;
    padding: 10px 14px 2px;
    justify-content: flex-start;
    gap: var(--space-2);
    width: auto;
  }
  .table-stack td.col-check::before {
    content: "Select";
    display: inline;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    order: 2;
  }
  .table-stack td.col-check:empty { display: none; }

  .table-stack td.col-check + td {
    font-family: 'Bebas Neue', 'Inter', sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    text-align: left;
    justify-content: flex-start;
    border-bottom: 2px solid var(--gold);
    margin: 0 14px var(--space-2);
    padding: 4px 0 8px;
  }
  .table-stack td.col-check + td::before { display: none; }

  /* Title cell that's genuinely blank (e.g. an account with no name yet) */
  .table-stack td[data-blank]::after {
    content: "No name on file";
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    font-style: italic;
    letter-spacing: 0;
    color: var(--text-muted);
  }
  /* Action cells: no label needed — the button says what it does. Covers both
     a blank header and one literally titled "Edit". */
  .table-stack td:not([data-label]),
  .table-stack td:has(> .btn:only-child) { justify-content: flex-end; padding-top: var(--space-2); }
  .table-stack td:has(> .btn:only-child)::before { display: none; }

  /* No scroll shadows needed once rows are stacked */
  .table-stack-wrap { background: none; overflow-x: visible; }
}
/* ============================================================
   Public landing page (before sign-in)
   Bento-grid layout, athletic display type, court-line motif.
   Display font (Bebas Neue) is scoped to this page only — the
   authenticated app screens stay on Inter.
   ============================================================ */

.public-body { background: var(--bg); }

/* --- Slim sticky public header --- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(22, 41, 110, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 10px 20px;
}

.site-nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.site-nav .btn.gold {
  padding: 9px 18px;
  font-size: 0.9rem;
  box-shadow: none;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Full name where it fits; the approved short form when space is tight */
.brand-short { display: none; }
@media (max-width: 520px) {
  .brand-full { display: none; }
  .brand-short { display: inline; }
}

/* --- Hero --- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 800px 420px at 15% 0%, rgba(232, 185, 35, 0.20), transparent 62%),
    radial-gradient(ellipse 700px 460px at 92% 88%, rgba(228, 96, 42, 0.24), transparent 60%),
    linear-gradient(155deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: #fff;
  padding: clamp(56px, 9vw, 104px) 24px clamp(64px, 8vw, 96px);
  border-bottom: 4px solid var(--gold);
}

.court-lines {
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: min(620px, 58%);
  opacity: 0.16;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(232, 185, 35, 0.16);
  border: 1px solid rgba(232, 185, 35, 0.4);
  color: var(--gold);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: var(--space-5);
}
.hero-kicker .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.hero h1 {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-weight: 400;
  color: #fff;
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 0.94;
  letter-spacing: 0.005em;
  margin: 0 0 var(--space-5);
  max-width: 20ch;
}
.hero h1 .accent { color: var(--gold); }

.hero-sub {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  max-width: 46ch;
  line-height: 1.6;
  margin: 0 0 var(--space-6);
}

.hero-cta-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

.btn.gold {
  background: var(--gold);
  color: var(--navy-dark);
  font-size: 1rem;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(232, 185, 35, 0.32);
}
.btn.gold:hover { background: var(--gold-dark); }

.btn.ghost-light {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  padding: 13px 24px;
  border-radius: 10px;
  font-weight: 600;
}
.btn.ghost-light:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

/* --- Bento grid --- */
.bento-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 80px) 24px;
}

.bento-heading {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.01em;
  color: var(--navy);
  margin: 0 0 var(--space-2);
  line-height: 1;
}
.bento-heading-sub {
  color: var(--text-muted);
  margin: 0 0 var(--space-6);
  font-size: 1.02rem;
}

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.bento-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: var(--space-5);
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.bento-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.bento-card.span-1 { grid-column: span 1; }
.bento-card.span-3 { grid-column: span 3; }
.bento-card.span-4 { grid-column: span 4; }

.bento-card h3 {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-3);
  color: var(--navy);
}

.bento-card p {
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0 0 var(--space-3);
  font-size: 0.96rem;
}
.bento-card p:last-child { margin-bottom: 0; }

.card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--navy-tint);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}
.card-icon svg { width: 21px; height: 21px; }

/* Color variants */
.bento-card.tone-navy {
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-dark) 100%);
  border-color: transparent;
  color: #fff;
}
.bento-card.tone-navy h3 { color: #fff; }
.bento-card.tone-navy p { color: rgba(255, 255, 255, 0.82); }
.bento-card.tone-navy .card-icon { background: rgba(255, 255, 255, 0.14); color: var(--gold); }

.bento-card.tone-orange {
  background: var(--orange-tint);
  border-color: #F5C4AC;
}
.bento-card.tone-orange .card-icon { background: #fff; color: var(--orange-dark); }
.bento-card.tone-orange p { color: #5b6577; }

.bento-card.tone-gold {
  background: var(--gold-tint);
  border-color: #EBD9A6;
}
.bento-card.tone-gold .card-icon { background: #fff; color: var(--navy); }
.bento-card.tone-gold p { color: #5b6577; }

/* Big display number (fees) */
.card-bignum {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: clamp(3.4rem, 8vw, 4.6rem);
  line-height: 0.9;
  color: var(--navy);
  letter-spacing: 0.01em;
}
.card-bignum-label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

/* Practice schedule — day rows instead of a table */
.day-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: auto; }
.day-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--bg);
  border-radius: 12px;
  padding: 10px 12px;
}
.tone-navy .day-row { background: rgba(255, 255, 255, 0.1); }

.day-abbr {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--navy);
  background: #fff;
  border-radius: 8px;
  width: 52px;
  text-align: center;
  padding: 3px 0;
  flex-shrink: 0;
}
.tone-navy .day-abbr { background: var(--gold); color: var(--navy-dark); }

.day-team { font-size: 0.92rem; font-weight: 600; color: var(--text); }
.tone-navy .day-team { color: #fff; }

/* Prominent single-date callouts (info session, open gym nights) — the date
   is the one fact a parent actually needs, so it sits right under the copy
   (not pinned to the bottom of the card) and reads much larger than body
   text, in the orange accent so it stands apart from the gold used
   elsewhere on the card. */
.date-callout-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.date-callout {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: var(--space-3);
  row-gap: 2px;
  background: var(--orange-tint);
  border: 1px solid #F4C6AE;
  border-radius: 12px;
  padding: 12px 16px;
}
.date-callout-tag {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--orange-dark);
  flex-shrink: 0;
  min-width: 52px;
}
.date-callout-value {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: 1.65rem;
  line-height: 1.1;
  letter-spacing: 0.015em;
  color: var(--navy-dark);
}

/* "To be confirmed" state (practice nights) */
.tbd-block {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-4);
}
.tbd-mark {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--gold);
  border: 2px dashed rgba(232, 185, 35, 0.55);
  border-radius: 12px;
  padding: 8px 18px 5px;
  flex-shrink: 0;
}
.tbd-note {
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

/* Multiple contacts in one card */
.contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: auto;
  padding-top: var(--space-4);
}
.contact-name {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 3px;
  color: var(--text);
}
.tone-navy .contact-name { color: #fff; }
.contact-pending {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-style: italic;
}
.tone-navy .contact-pending { color: rgba(255, 255, 255, 0.62); }

/* Season timeline (game schedule) */
.timeline {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
}
.timeline-node { flex: 1; text-align: center; position: relative; }
.timeline-node::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: var(--border);
}
.timeline-node:last-child::before { display: none; }
.timeline-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  border: 4px solid var(--card);
  outline: 2px solid var(--gold);
  margin: 0 auto 10px;
  position: relative;
  z-index: 1;
}
.timeline-month {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: 1.35rem;
  color: var(--navy);
  letter-spacing: 0.04em;
  line-height: 1;
}
.timeline-note { font-size: 0.76rem; color: var(--text-muted); margin-top: 3px; }

/* Photo cards. The navy background shows while the image loads (and if one
   is ever missing), so the card never renders as a blank hole. */
.bento-card.card-photo {
  padding: 0;
  overflow: hidden;
  border: none;
  min-height: 260px;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 100%);
  align-items: center;
  justify-content: center;
}
.bento-card.card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bento-card.card-photo:hover { transform: none; }

/* Contact link inside cards */
.card-link {
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 1px;
}
.card-link:hover { border-bottom-color: var(--navy); }
.tone-navy .card-link { color: var(--gold); border-bottom-color: rgba(255,255,255,0.4); }

.card-meta {
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

/* --- Closing CTA --- */
.cta-band {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(155deg, rgba(31, 61, 163, 0.85) 0%, rgba(22, 41, 110, 0.90) 100%),
    url("/img/game-action.jpg") center 38% / cover no-repeat;
  color: #fff;
  text-align: center;
  padding: clamp(56px, 8vw, 88px) 24px;
  border-top: 4px solid var(--gold);
}
.cta-band h2 {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-weight: 400;
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-3);
}
.cta-band h2 .accent { color: var(--gold); }
.cta-band p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 48ch;
  margin: 0 auto var(--space-5);
  font-size: 1.04rem;
}

.public-footer {
  text-align: center;
  padding: var(--space-6) 20px var(--space-7);
  background: var(--navy-dark);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.85rem;
}
.public-footer a { color: var(--gold); font-weight: 700; }

/* --- Scroll reveal ---
   Scoped to .js so the content is visible by default when JavaScript
   is unavailable or fails — never hide content behind a script. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .bento-card:hover { transform: none; }
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-card, .bento-card.span-3, .bento-card.span-4 { grid-column: span 2; }
  .bento-card.span-1 { grid-column: span 1; }
  .court-lines { opacity: 0.1; right: -22%; }
}

@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; gap: var(--space-3); }
  .bento-card,
  .bento-card.span-1,
  .bento-card.span-3,
  .bento-card.span-4 { grid-column: span 1; }
  .court-lines { display: none; }
  .timeline { flex-direction: column; gap: var(--space-3); }
  .timeline-node { display: flex; align-items: center; gap: var(--space-3); text-align: left; }
  .timeline-node::before { display: none; }
  .timeline-dot { margin: 0; }
}

/* Drag-and-drop team board
   Class names here are load-bearing: nav/teams scripts toggle .drag-over and
   render .chip / .coach-chip / .mobile-move-select. Restyle, don't rename. */
.board {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-3);
}

.board-column {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  min-width: 240px;
  max-width: 260px;
  flex: 0 0 auto;
  padding: var(--space-3);
  transition: background-color 150ms ease, border-color 150ms ease;
}

.board-column.drag-over {
  background: var(--navy-tint);
  border-color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--navy);
}

.board-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--gold);
}

.board-delete {
  font-size: 1.15rem;
  line-height: 1;
  background: none;
  border: none;
  padding: 2px 6px;
  flex-shrink: 0;
}

/* Keeps the coach strip a visible drop area even when a team has no coach —
   though the whole column accepts drops, so this is only a visual cue. */
.board-coaches { min-height: 8px; }

/* The gold rule lives on .board-column-head (which wraps every column's
   title), not on the h3 — having it on both drew two lines. */
.board-column h3 {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  margin: 0;
  color: var(--navy);
}
.board-column h3 a { color: var(--navy); text-decoration: none; }
.board-column h3 a:hover { text-decoration: underline; }

.chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 0.84rem;
  font-weight: 500;
  cursor: grab;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  transition: box-shadow 150ms ease, border-color 150ms ease;
}
.chip:hover { border-color: var(--navy); box-shadow: var(--shadow); }

.chip.coach-chip {
  background: var(--gold-tint);
  border-color: #E4CE8E;
  font-weight: 600;
}
.chip:active { cursor: grabbing; }
.chip .chip-x {
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 700;
  padding: 0 4px;
  border-radius: 4px;
  line-height: 1;
}
.chip .chip-x:hover { color: var(--danger); background: #fbeae7; }

.coach-pool {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.coach-pool .chip { margin-bottom: 0; }

.mobile-move-select {
  width: 100%;
  margin-top: 6px;
  font-size: 0.78rem;
  padding: 5px 7px;
  min-height: 34px;
  border-radius: 7px;
}

.dnd-hint {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.55;
  background: var(--navy-tint);
  border-left: 3px solid var(--navy);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  margin: 0 0 var(--space-4);
}