/* EAS Bookings — design tokens and base styles.
   Adapted from the UKBJJA design system: calmer, lighter, spacious. */

:root {
  --brand:        #1f3a8a;
  --brand-dark:   #142654;
  --brand-soft:   #eef2ff;
  --accent-red:   #d4173a;
  --accent-green: #009c3b;
  --accent-yellow:#ffdf00;

  --bg:              #f6f7fb;
  --surface:         #ffffff;
  --surface-2:       #fafbff;
  --border:          #e4e7ef;
  --border-strong:   #cdd2de;
  --text:            #1d2433;
  --text-muted:      #6b7280;
  --text-subtle:     #9aa1ad;

  --success:         #15803d;
  --success-bg:      #dcfce7;
  --warning:         #b45309;
  --warning-bg:      #fef3c7;
  --danger:          #b91c1c;
  --danger-bg:       #fee2e2;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(20, 24, 50, 0.04);
  --shadow:    0 4px 16px rgba(20, 24, 50, 0.06);
  --shadow-lg: 0 12px 32px rgba(20, 24, 50, 0.10);

  --header-h:  64px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* -------- Brand mark -------- */
.brand-mark {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--brand), var(--brand-dark));
  color: #fff; font-weight: 800; letter-spacing: 0.5px;
  box-shadow: var(--shadow-sm);
  font-size: 12px;
}

/* -------- Site header (top nav) -------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  max-width: 1100px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 18px;
}
.site-header__brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; color: var(--text); text-decoration: none; font-size: 16px;
  flex: 0 1 auto; min-width: 0;
}
.site-header__brand:hover { text-decoration: none; }
.site-header__brand .brand-mark { width: 34px; height: 34px; font-size: 11.5px; flex: 0 0 auto; }
/* Club names run long ("Easy After-school Jiu-Jitsu"). Clip with an ellipsis so
   the brand never wraps into a tower of words when the window is narrow. */
.site-header__brand-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 13em;
}
.site-header__logo {
  width: 34px; height: 34px; object-fit: contain; border-radius: 8px;
  background: #fff; padding: 2px; flex: 0 0 auto;
}
.site-header__brand small {
  display: block; color: var(--text-muted); font-weight: 500; font-size: 11px;
  letter-spacing: 0.4px; text-transform: uppercase;
}

.club-switcher {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  flex: 0 1 auto; max-width: 180px; text-overflow: ellipsis;
  padding: 6px 28px 6px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: #fff; color: var(--text);
  font-size: 13px; font-weight: 500; cursor: pointer;
  max-width: 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.club-switcher:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* The nav is the only flexible part of the header: it takes the leftover room
   and scrolls sideways inside it, so extra links (Shop, Videos, Coach, Admin…)
   never squash the brand or push the buttons off the row. */
.site-nav {
  display: flex; gap: 6px;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 2px;               /* room for the .is-active underline */
  scrollbar-width: none; -ms-overflow-style: none;
  /* Fade the trailing edge so a clipped link reads as "there's more this way". */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  position: relative;
  display: inline-block;
  flex: 0 0 auto; white-space: nowrap;
  padding: 8px 12px; border-radius: 8px;
  color: var(--text); text-decoration: none;
  font-weight: 500; font-size: 14px;
}
.site-nav a:hover { background: var(--brand-soft); color: var(--brand-dark); text-decoration: none; }
.site-nav a.is-active { color: var(--brand-dark); }
.site-nav a.is-active::after {
  content: ""; position: absolute; bottom: -2px; left: 12px; right: 12px;
  height: 2px; background: var(--brand); border-radius: 2px;
}
/* "Admin: {club}" — keep the club name but cap it; full name is in the title. */
.site-nav__club {
  display: inline-block; vertical-align: bottom; max-width: 8em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.site-header__cta { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.site-header__user {
  color: var(--text-muted); font-size: 12.5px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}

/* Laptops: tighten the spacing a notch before anything has to be clipped. */
@media (max-width: 1200px) {
  .site-header__inner { gap: 14px; }
  .site-nav a { padding: 8px 10px; }
}

/* Small laptops / tablets: once the links and a long club name are competing
   for one line, give the nav a full-width row of its own underneath. */
@media (max-width: 1024px) {
  .site-header__inner {
    padding: 10px 16px;
    gap: 10px 14px;
    flex-wrap: wrap;
  }
  .site-header__brand { font-size: 15px; }
  .site-header__cta { margin-left: auto; }
  .site-nav {
    order: 3;
    width: 100%;
    flex: 0 0 100%;
    gap: 2px;
  }
  .site-nav a { padding: 6px 10px; font-size: 13px; }
  .site-nav__club { max-width: none; }
}

@media (max-width: 640px) {
  .site-header__inner { padding: 10px 14px; }
  .site-header__brand { font-size: 14px; }
  .site-header__brand-name { max-width: 11em; }
  .site-header__brand .brand-mark { width: 30px; height: 30px; font-size: 11px; }
  .site-header__logo { width: 30px; height: 30px; }
  .site-header__user { display: none; }
  .club-switcher { max-width: 130px; }
}

/* -------- Main wrapper -------- */
main.page {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}
main.page--narrow { max-width: 720px; }
main.page--wide   { max-width: 1200px; }
main.page--bleed  { max-width: none; padding: 0; }

.page__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
/* Toolbar of page-level actions in a heading row. Kept as a flex row with its
   own gap so a mix of ghost + primary buttons reads as one group and wraps
   tidily on a phone instead of running together. */
.page__head .actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page__title { font-size: 22px; font-weight: 700; margin: 0; }
.page__sub   { color: var(--text-muted); font-size: 14px; margin: 4px 0 0; }
.page__back  {
  font-size: 13px; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 4px;
  margin-bottom: 8px;
}
.page__back:hover { color: var(--text); text-decoration: none; }

/* -------- Card primitive -------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.card__title { font-size: 15.5px; font-weight: 600; margin: 0; }
.card__body { padding: 18px; }

.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: 1fr 1fr; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }

/* -------- Buttons -------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 16px;
  background: var(--brand); color: #fff;
  border: 1px solid var(--brand); border-radius: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); text-decoration: none; color: #fff; }
.btn:disabled, .btn.is-disabled {
  opacity: 0.5; cursor: not-allowed; background: var(--brand); border-color: var(--brand);
}
.btn--secondary { background: #fff; color: var(--brand); }
.btn--secondary:hover { background: var(--brand-soft); color: var(--brand-dark); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--text); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.btn--sm { height: 30px; padding: 0 12px; font-size: 12.5px; }
.btn--xl { height: 48px; padding: 0 22px; font-size: 15px; border-radius: 10px; }
.btn--block { width: 100%; }

.btn--accent { background: #f97316; border-color: #f97316; }
.btn--accent:hover { background: #c2410c; border-color: #c2410c; }

.btn--danger { background: var(--danger); border-color: var(--danger); }
.btn--danger:hover { background: #8a1414; border-color: #8a1414; }

.btn-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--brand); font: inherit; text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }
.btn-link--danger { color: var(--danger); }
.btn-link--muted  { color: var(--text-muted); }

/* -------- Social sign-on -------- */
.btn--oauth {
  background: #fff; color: #3c4043;
  border: 1px solid var(--border-strong); gap: 10px; font-weight: 600;
}
.btn--oauth:hover { background: var(--surface-2); color: #3c4043; border-color: #b6bcc8; }
.btn--oauth .oauth-icon { flex: 0 0 18px; }
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--text-muted); font-size: 13px; margin: 16px 0;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--border);
}
.connected-accounts { display: flex; flex-direction: column; gap: 4px; }
.connected-account {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.connected-account:last-child { border-bottom: 0; }
.connected-account__id { display: flex; align-items: center; gap: 10px; font-size: 14px; }

/* -------- Tables -------- */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.table-wrap--scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th, .table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th {
  color: var(--text-muted); font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.4px;
  background: var(--surface-2);
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--surface-2); }
.table .actions { display: flex; align-items: center; gap: 12px; font-size: 12.5px; }
.table .actions form { display: inline; margin: 0; }
/* Opt-in: stack the actions one per line on phones, for columns whose labels
   are too long to sit side by side (e.g. "Act as owner"). Deliberately NOT the
   default — most action columns live in a .table-wrap--scroll table where a
   single line is correct, and wrapping them makes every row several times
   taller. */
@media (max-width: 640px) {
  .table .actions--stack { flex-direction: column; align-items: flex-start; gap: 8px; }
}

.num { text-align: right; font-variant-numeric: tabular-nums; }
.num--muted { color: var(--text-muted); }

/* -------- Badges / pills -------- */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
}
.badge--success   { background: var(--success-bg); color: var(--success); }
.badge--warning   { background: var(--warning-bg); color: var(--warning); }
.badge--danger    { background: var(--danger-bg);  color: var(--danger);  }
.badge--info      { background: var(--brand-soft); color: var(--brand-dark); }
.badge--muted     { background: #e5e7eb; color: #374151; }
.badge--accent    { background: #ffedd5; color: #9a3412; }
.badge--promo     {
  background: #fef3c7; color: #92400e;
  text-decoration: none; margin-left: 8px;
  border: 1px solid #fbbf24;
}
.badge--promo:hover { background: #fde68a; }

/* -------- Forms -------- */
.form-grid {
  display: grid; gap: 14px 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-grid .form-row--wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row label, .form-label {
  font-size: 12.5px; font-weight: 600; color: var(--text-muted);
}
.form-row .form-hint, .form-hint {
  font-size: 11.5px; color: var(--text-subtle); margin-top: 1px;
}
.form-static {
  font-size: 14px; font-weight: 600; color: var(--text);
  padding: 8px 0;
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="tel"],
.form-row input[type="number"],
.form-row input[type="date"],
.form-row input[type="time"],
.form-row input[type="search"],
.form-row select,
.form-row textarea,
.input {
  width: 100%;
  height: 40px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2);
  font-size: 14px; outline: none;
  font-family: inherit;
  color: var(--text);
}
.form-row textarea, textarea.input { height: auto; padding: 9px 12px; min-height: 96px; resize: vertical; line-height: 1.5; }
.form-row select, select.input { background: var(--surface-2); appearance: auto; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus,
.input:focus { border-color: var(--brand); background: #fff; }

.form-row .req { color: var(--danger); }

.form-row .form-error, .form-error {
  font-size: 11.5px; color: var(--danger); margin-top: 2px; font-weight: 500;
}
.form-row input.is-invalid,
.form-row select.is-invalid,
.form-row textarea.is-invalid,
.input.is-invalid {
  border-color: var(--danger);
  background: var(--danger-bg);
}

.child-block__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.child-block__head .fieldset__title { font-size: 15px; font-weight: 600; }

.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; align-items: center; flex-wrap: wrap; }
.form-actions--start { justify-content: flex-start; }

fieldset.card { border: 1px solid var(--border); padding: 0; margin: 0; }
fieldset.card legend.card__legend {
  padding: 0 4px;
  margin: 0 0 4px 14px;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.fieldset {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}
.fieldset + .fieldset { margin-top: 16px; }
.fieldset__title {
  font-size: 15px; font-weight: 600;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* Input with currency prefix */
.input--prefixed { position: relative; }
.input--prefixed > span {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 14px; pointer-events: none;
}
/* The £ prefix sits at left:12px, so the input's text must clear it. The base
   `.form-row input[type=...]` rule sets `padding:0 12px` at a higher specificity
   (0,2,1), so the override must be scoped under .form-row to out-rank it —
   otherwise the typed value renders underneath the £. */
.input--prefixed > input,
.form-row .input--prefixed > input { padding-left: 26px; }

/* Radio/checkbox rows */
.choice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  background: var(--surface);
  transition: border-color 100ms, background 100ms;
}
.choice:hover { border-color: var(--border-strong); background: var(--surface-2); }
.choice input[type="checkbox"], .choice input[type="radio"] { margin-top: 3px; accent-color: var(--brand); }
.choice--selected,
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.choice__body { flex: 1; }
.choice__title { font-weight: 600; font-size: 14px; color: var(--text); }
.choice__sub   { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.choice__right { text-align: right; font-size: 13px; }

.choice.is-disabled { opacity: 0.55; cursor: not-allowed; }
.choice.is-disabled:hover { border-color: var(--border); background: var(--surface); }

.choice-list { display: flex; flex-direction: column; gap: 8px; }

/* Inline checkbox/radio (non-card style) */
.inline-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.inline-check input { accent-color: var(--brand); }

/* -------- Flash banners -------- */
.flash {
  padding: 11px 14px; border-radius: 8px; font-size: 13.5px;
  margin-bottom: 16px;
  border: 1px solid transparent;
}
.flash--success { background: var(--success-bg); color: var(--success); border-color: #bbf7d0; }
.flash--error   { background: var(--danger-bg);  color: var(--danger);  border-color: #fecaca; }
.flash--warning { background: var(--warning-bg); color: var(--warning); border-color: #fde68a; }
.flash--info    { background: var(--brand-soft); color: var(--brand-dark); border-color: #c7d2fe; }
.flash ul { margin: 4px 0 0; padding-left: 20px; }
.flash p { margin: 0; }
.flash strong { display: block; margin-bottom: 2px; }

/* -------- Hero (landing) -------- */
.hero {
  position: relative;
  padding: 72px 24px 88px;
  background:
    radial-gradient(circle at 20% 10%, rgba(31, 58, 138, 0.08), transparent 60%),
    radial-gradient(circle at 80% 90%, rgba(212, 23, 58, 0.06), transparent 50%),
    linear-gradient(180deg, #f6f7fb, #ffffff);
  text-align: center;
  overflow: hidden;
}
.hero__inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }
.hero__logo {
  display: block;
  max-width: 340px;
  max-height: 140px;
  margin: 0 auto 18px;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(20, 24, 50, 0.15));
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 14px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-dark);
  font-weight: 600; font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase;
  margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.hero h1 em { font-style: normal; color: var(--brand); }
.hero__sub {
  font-size: clamp(15px, 2vw, 17px);
  color: var(--text-muted);
  max-width: 580px;
  margin: 0 auto 26px;
  line-height: 1.55;
}
.hero__ctas { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* -------- Sections -------- */
.section { padding: 56px 24px; }
.section--tight { padding: 36px 24px; }
.section--alt { background: var(--surface-2); border-block: 1px solid var(--border); }
.section__inner { max-width: 1100px; margin: 0 auto; }
.section__head { margin-bottom: 28px; text-align: center; }
.section__eyebrow {
  font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--brand); font-weight: 700; margin-bottom: 6px;
}
.section__title { font-size: clamp(22px, 3.5vw, 30px); font-weight: 800; margin: 0; }
.section__sub { color: var(--text-muted); margin-top: 8px; max-width: 580px; margin-inline: auto; }

/* -------- Feature grid -------- */
.features {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.feature {
  padding: 24px 22px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface);
}
.feature__icon {
  width: 44px; height: 44px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand-dark);
  margin-bottom: 14px;
}
.feature__icon svg { width: 22px; height: 22px; }
.feature--red    .feature__icon { background: #fde0e6; color: var(--accent-red); }
.feature--green  .feature__icon { background: #def7e5; color: var(--accent-green); }
.feature--orange .feature__icon { background: #ffedd5; color: #9a3412; }
.feature--blue   .feature__icon { background: #dbe4ff; color: #1d4ed8; }
.feature--purple .feature__icon { background: #ede4ff; color: #6d28d9; }
.feature__title { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.feature__body  { color: var(--text-muted); font-size: 13.5px; line-height: 1.55; margin: 0; }

/* Landing "How It Works" editor — card head + icon/accent pickers (admin) */
.hiw-card { transition: opacity 0.12s; }
.hiw-card.is-dragging { opacity: 0.5; }
.hiw-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hiw-card__head [data-remove-card] { margin-left: auto; }
.hiw-card__num  { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
.hiw-card__grip { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 30px; cursor: grab; color: var(--text-muted); border-radius: 6px; touch-action: none; -webkit-user-select: none; user-select: none; }
.hiw-card__grip:hover { color: var(--brand); background: var(--surface-2); }
.hiw-card__grip:active { cursor: grabbing; }

.icon-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.icon-picker__opt { cursor: pointer; margin: 0; }
.icon-picker__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.icon-picker__chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  transition: border-color 0.12s, color 0.12s, background 0.12s, box-shadow 0.12s;
}
.icon-picker__chip svg { width: 20px; height: 20px; }
.icon-picker__opt:hover .icon-picker__chip { border-color: var(--brand); color: var(--brand); }
.icon-picker__opt:has(input:checked) .icon-picker__chip {
  border-color: var(--brand); color: var(--brand);
  background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand);
}
.icon-picker__opt:has(input:focus-visible) .icon-picker__chip { box-shadow: 0 0 0 2px var(--brand); }

.accent-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.accent-picker__opt { cursor: pointer; margin: 0; }
.accent-picker__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.accent-picker__dot {
  display: inline-block; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border);
  transition: box-shadow 0.12s;
}
.accent-picker__opt:has(input:checked) .accent-picker__dot { box-shadow: 0 0 0 2px #111827; }
.accent-picker__opt:has(input:focus-visible) .accent-picker__dot { box-shadow: 0 0 0 3px var(--brand); }

/* -------- CTA band -------- */
.cta-band {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  padding: 44px 24px;
  text-align: center;
  border-radius: var(--radius-lg);
}
.cta-band h2 { font-size: clamp(20px, 3vw, 26px); margin: 0 0 8px; font-weight: 800; }
.cta-band p  { margin: 0 0 18px; opacity: 0.86; max-width: 540px; margin-inline: auto; }
.cta-band .btn { background: #fff; color: var(--brand-dark); border-color: #fff; }
.cta-band .btn:hover { background: rgba(255,255,255,0.92); border-color: rgba(255,255,255,0.92); color: var(--brand-dark); }
.cta-band .btn--secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.cta-band .btn--secondary:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.7); color: #fff; }

/* -------- Site footer -------- */
.site-footer {
  background: #0f172a;
  color: #cbd5e1;
  padding: 36px 24px 22px;
  font-size: 13px;
  margin-top: auto;
}
.site-footer__inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center;
}
.site-footer__brand { display: flex; align-items: center; gap: 10px; }
.site-footer__brand strong { color: #fff; font-size: 15px; }
.site-footer__tag { color: #94a3b8; font-size: 12.5px; }
.site-footer__spacer { flex: 1; }
.site-footer__legal { color: #94a3b8; font-size: 12px; }
.site-footer__legal a { color: #cbd5e1; text-decoration: none; }
.site-footer__legal a:hover { color: #fff; text-decoration: underline; }
.site-footer__sep { margin: 0 8px; color: #475569; }

/* -------- Event/class cards -------- */
.event-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Category sections on the browse-classes page */
.class-section { margin-bottom: 30px; }
.class-section:last-child { margin-bottom: 0; }
.class-section__head {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px;
  padding-bottom: 8px;
  font-size: 15px; font-weight: 700; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.class-section__head .cat-dot { margin-right: 0; width: 14px; height: 14px; }
.class-section__count {
  margin-left: auto;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 9px;
}
/* On a section header the count sits next to the reorder arrows, so it no
   longer needs to claim all the slack on its own. */
.class-section__head .class-section__count { margin-left: auto; }
.class-section__head .reorder { margin-left: 4px; }

/* Up/down reorder arrows (category ordering: categories manager, class admin
   page, and the owner view of the browse sections). */
.reorder { display: inline-flex; gap: 3px; vertical-align: middle; }
.reorder__form { display: inline; margin: 0; }
.reorder__btn {
  appearance: none; -webkit-appearance: none;
  cursor: pointer; padding: 0;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; line-height: 1;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.reorder__btn:hover:not(:disabled) { color: var(--text); border-color: var(--text-muted); }
.reorder__btn:disabled { opacity: 0.32; cursor: default; }

/* "Category order" panel on the class admin page. */
.cat-order {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 18px;
}
.cat-order__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cat-order__head .muted { font-size: 12px; }
.cat-order__manage { margin-left: auto; font-size: 13px; white-space: nowrap; }
.cat-order__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cat-order__item { display: flex; align-items: center; gap: 8px; }
.cat-order__name { font-weight: 600; }
.cat-order__count { font-size: 12px; margin-left: auto; }

.event-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.event-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.event-card__banner {
  position: relative;
  height: 72px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
}
/* Banner colour is driven per-card from the class's category (inline style in
   views/classes/index.php); uncategorised cards use the brand default above. */
.event-card--full .event-card__banner { background: linear-gradient(135deg, #475569, #1e293b); }

.event-card__date {
  position: absolute; top: 12px; left: 14px;
  background: rgba(255,255,255,0.97);
  border-radius: 8px;
  width: 54px; padding: 4px 0 6px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.event-card__date small {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--text-muted);
}
.event-card__date strong {
  display: block; font-size: 20px; font-weight: 700; color: var(--text);
  line-height: 1.1;
}
.event-card__type-chip {
  position: absolute; top: 14px; right: 12px;
  background: rgba(0,0,0,0.35); color: #fff;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
}

.event-card__body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; }
.event-card__title { font-weight: 700; font-size: 15px; line-height: 1.3; margin: 0 0 4px; color: var(--text); }
.event-card__title a { color: inherit; text-decoration: none; }
.event-card__title a:hover { color: var(--brand); }
.event-card__sub   { font-size: 12.5px; color: var(--text-muted); margin: 0 0 8px; }
.event-card__coach { font-size: 12.5px; color: var(--text-muted); margin: 0 0 8px; }
.event-card__coach-label { font-weight: 600; color: var(--text); }
.event-card__desc  { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 4px 0 8px; }

.event-card__meta {
  font-size: 12.5px; color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  margin-top: auto;
}
.event-card__meta .sep { color: var(--text-subtle); }

/* Day / time / date box on browse-classes cards */
.event-card__when {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin: 2px 0 10px;
}
.event-card__when-cell { flex: 1; padding: 6px 8px; text-align: center; }
.event-card__when-cell + .event-card__when-cell { border-left: 1px solid var(--border); }
.event-card__when-label {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--text-muted); font-weight: 600;
}
.event-card__when-value {
  display: block; font-size: 13px; font-weight: 700; color: var(--text); margin-top: 2px;
}

.event-card__footer {
  display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.event-card__price { font-weight: 700; }
.event-card__price small { color: var(--text-muted); font-weight: 500; font-size: 11.5px; }
.event-card__actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-left: auto;
}

/* -------- Event hero (class detail) -------- */
.event-hero {
  border-radius: 12px; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.event-hero__banner {
  height: 108px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
}
.event-hero--alt1 .event-hero__banner { background: linear-gradient(135deg, #6366f1, #4338ca); }
.event-hero--alt2 .event-hero__banner { background: linear-gradient(135deg, #0891b2, #155e75); }
.event-hero--alt3 .event-hero__banner { background: linear-gradient(135deg, #f97316, #c2410c); }
.event-hero--alt4 .event-hero__banner { background: linear-gradient(135deg, #7c3aed, #4c1d95); }
.event-hero--full .event-hero__banner { background: linear-gradient(135deg, #475569, #1e293b); }
.event-hero__body {
  padding: 18px 22px 22px;
  display: grid; grid-template-columns: 84px 1fr auto;
  gap: 20px; align-items: start;
}
.event-hero__date {
  margin-top: -46px;
  background: #fff;
  border-radius: 12px;
  padding: 10px 0 12px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  width: 84px;
}
.event-hero__date small { display:block; font-size: 11px; letter-spacing: 0.6px; color: var(--text-muted); text-transform: uppercase; font-weight: 700; }
.event-hero__date strong { display:block; font-size: 28px; font-weight: 800; line-height: 1; margin-top: 1px; }
.event-hero__date span   { display:block; font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.event-hero__title { font-size: 22px; font-weight: 700; margin: 0 0 4px; line-height: 1.2; }
.event-hero__sub   { color: var(--text-muted); font-size: 13.5px; margin: 0; }
.event-hero__price { text-align: right; }
.event-hero__price strong { font-size: 22px; font-weight: 800; color: var(--text); display: block; }
.event-hero__price small  { color: var(--text-muted); font-size: 11.5px; }
@media (max-width: 720px) {
  .event-hero__body { grid-template-columns: 1fr; }
  .event-hero__date { margin-top: -36px; }
  .event-hero__price { text-align: left; }
}

/* Summary chips below hero */
.summary-strip {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 18px;
}
.summary-strip__cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}
.summary-strip__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); font-weight: 600; }
.summary-strip__value { font-size: 17px; font-weight: 700; margin-top: 3px; color: var(--text); }
.summary-strip__sub   { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* Sessions chips */
.session-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.session-chip {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
}
.session-chip__date { font-weight: 500; color: var(--text); }
.session-chip__time { color: var(--text-muted); font-size: 12px; }
.session-chip--has-bookings { background: var(--brand-soft); border-color: #c7d2fe; }
.session-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); display: inline-block; }

/* -------- KPI cards (admin dashboard) -------- */
.kpi-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.kpi__label { font-size: 11.5px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.kpi__value { font-size: 28px; font-weight: 800; line-height: 1.1; margin-top: 4px; color: var(--text); }
.kpi__sub { color: var(--text-muted); font-size: 12px; margin-top: 4px; }

/* -------- Filter tabs (admin bookings) -------- */
.tabs-bar {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.tabs-bar__tab {
  position: relative;
  padding: 9px 16px;
  font-size: 13.5px; font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 6px;
}
.tabs-bar__tab:hover { color: var(--text); text-decoration: none; }
.tabs-bar__tab.is-active {
  color: var(--brand-dark);
  border-bottom-color: var(--brand);
  font-weight: 600;
}
.tabs-bar__tab small {
  font-size: 11.5px; color: var(--text-subtle);
  background: var(--surface-2);
  padding: 1px 7px; border-radius: 999px; font-weight: 600;
}
.tabs-bar__tab.is-active small { background: var(--brand-soft); color: var(--brand-dark); }

/* -------- List search bar -------- */
.list-search {
  display: flex; gap: 8px; align-items: center;
  margin: 0 0 18px; flex-wrap: wrap;
}
.list-search .input {
  flex: 1 1 260px; max-width: 380px; height: 40px;
}
.list-search .btn { flex: 0 0 auto; height: 40px; }

/* -------- Login card -------- */
.auth-shell {
  min-height: calc(100vh - var(--header-h) - 80px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: linear-gradient(160deg, #eef2ff 0%, #f6f7fb 40%, #fff 100%);
  flex: 1;
}
.auth-card {
  width: 100%; max-width: 400px;
  background: #fff; border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 28px 26px;
  border: 1px solid var(--border);
}
.auth-card__title { font-size: 20px; font-weight: 700; margin: 6px 0 2px; }
.auth-card__sub { color: var(--text-muted); font-size: 13.5px; margin: 0 0 18px; }
.auth-card__footer { color: var(--text-muted); font-size: 13px; margin-top: 14px; text-align: center; }

/* -------- Misc -------- */
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.row-flex { display: flex; align-items: center; gap: 10px; }
.row-flex--wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: 14px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.empty a { color: var(--brand); font-weight: 600; }

.callout {
  background: var(--brand-soft);
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--brand-dark);
}
.callout--warn { background: var(--warning-bg); border-color: #fde68a; color: var(--warning); }
.callout--danger { background: var(--danger-bg); border-color: #fca5a5; color: var(--danger); }
.callout strong { color: inherit; }

.consent-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-muted);
  max-height: 200px;
  overflow-y: auto;
  line-height: 1.6;
}
.consent-box p { margin: 0 0 8px; }
.consent-box p:last-child { margin-bottom: 0; }

.medical-note {
  font-size: 12px; color: var(--warning);
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
}

.h-stack { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v-stack { display: flex; flex-direction: column; gap: 10px; }
.v-stack--lg { gap: 18px; }

/* ============================================================
   Calendar — week timetable + month overview
   ============================================================ */

.cal-toolbar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.cal-toolbar__group {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* Venue filter select sits inline in the toolbar, styled like the header club
   switcher but a touch wider so venue names aren't clipped. */
.cal-venue-filter { max-width: 220px; }

/* Browse-classes filter bar: holds the venue dropdown above the card grid.
   Only rendered when the catalogue spans more than one venue. */
.classes-toolbar { display: flex; justify-content: flex-end; margin: 0 0 16px; }
@media (max-width: 560px) {
  .classes-toolbar { justify-content: stretch; }
  .classes-toolbar .cal-venue-filter { max-width: none; width: 100%; }
}

.cal-event {
  display: block;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--brand-soft);
  border: 1px solid #cdd6ff;
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
  transition: transform 100ms, box-shadow 100ms;
  position: relative;
  overflow: hidden;
}
.cal-event:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.cal-event__time {
  display: inline-block;
  font-weight: 700;
  color: var(--brand);
  margin-right: 4px;
}
.cal-event__title {
  display: inline;
  font-weight: 600;
}
.cal-event__meta {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-top: 4px;
}
.cal-tag {
  display: inline-flex; align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.06);
  color: var(--text-muted);
  white-space: nowrap;
}
.cal-tag--age { background: #e0e7ff; color: var(--brand); border-color: #cbd5ff; }
.cal-tag--gender { background: #fce7f3; color: #9d174d; border-color: #f5b3d3; }
.cal-tag--free { background: var(--success-bg); color: var(--success); border-color: #bbf7d0; }
.cal-tag--venue { background: #eef1f6; color: #475569; border-color: #d7dee9; }
.cal-event__badge {
  position: absolute;
  top: 4px; right: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--danger-bg);
  color: var(--danger);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.cal-event__badge--ok { background: var(--success-bg); color: var(--success); }
.cal-event__badge--info { background: #dbeafe; color: var(--brand); }

/* Owner-only edit affordance. The card click now opens the register, so editing
   the class moves to this small inline ✎ at the start of the card (handled by JS
   in the calendar view). Inline (not absolute) so it never collides with the
   status badge pinned top-right on dense week cards. */
.cal-event__edit {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  margin-right: 4px;
  padding: 1px 3px;
  border-radius: 4px;
  color: var(--text-muted);
  opacity: 0.6;
  cursor: pointer;
  vertical-align: baseline;
}
.cal-event__edit:hover,
.cal-event__edit:focus-visible {
  opacity: 1;
  color: var(--brand);
  background: rgba(255, 255, 255, 0.85);
  outline: none;
}

/* Category colour fills the box. Set as --cat-* custom properties inline on the
   element (see renderCard); applied here so a class selector — not inline CSS —
   carries the background, leaving the cancelled hatch below free to override. */
.cal-event--cat { background: var(--cat-bg); border-color: var(--cat-bd); }
.cal-event--cat .cal-event__time { color: var(--cat-fg); }

/* Booking status no longer recolours the whole box (category owns the colour
   now) — it shows as a ring / dim / dashed treatment that composes over the
   category colour, alongside the corner badge. */
.cal-event--booked { box-shadow: inset 0 0 0 2px var(--success); }
.cal-event--coach  { box-shadow: inset 0 0 0 2px #2563eb; }
.cal-event--full   { opacity: 0.5; }
.cal-event--cancelled {
  background: repeating-linear-gradient(45deg,
      var(--surface-2), var(--surface-2) 4px,
      var(--border) 4px, var(--border) 5px);
  color: var(--text-muted);
  text-decoration: line-through;
  border-color: var(--border);
}
.cal-event--draft {
  border-style: dashed;
  opacity: 0.72;
}

/* Private-space bookings (#26). A distinct slate block, non-interactive. The
   "busy" variant (someone who may see the venue but not the detail) is a
   hatched "Unavailable" so it reads as blocked-off rather than a class. */
.cal-event--space {
  background: #eef2f7;
  border-color: #c3ccd9;
  border-left: 3px solid #64748b;
  color: #334155;
  cursor: default;
}
.cal-event--space .cal-event__time { color: #475569; }
.cal-event--space-busy {
  background: repeating-linear-gradient(45deg,
      #eef2f7, #eef2f7 5px, #dbe2ea 5px, #dbe2ea 6px);
  color: #64748b;
}
:root[data-theme="dark"] .cal-event--space,
:root[data-theme="dark"] .cal-agenda__event--space {
  background: #2a3341; border-color: #3d4757; color: #cbd5e1; border-left-color: #64748b;
}
:root[data-theme="dark"] .cal-event--space-busy {
  background: repeating-linear-gradient(45deg, #2a3341, #2a3341 5px, #333d4c 5px, #333d4c 6px);
}
.cal-agenda__event--space { border-left: 3px solid #64748b; background: #eef2f7; color: #334155; cursor: default; }
.cal-month__dot--space { background: #64748b; }
.cal-legend__sw--space { background: #eef2f7; border: 1px solid #64748b; }

/* -------- Month grid -------- */
.cal-month {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cal-month__head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.cal-month__dow {
  padding: 8px 10px;
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  text-align: center;
}
.cal-month__body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cal-month__cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-height: 96px;
  padding: 6px;
  background: var(--surface);
  display: flex; flex-direction: column; gap: 4px;
}
.cal-editable .cal-month__cell { cursor: pointer; }
.cal-editable .cal-week__day { cursor: pointer; }
.cal-month__cell:nth-child(7n) { border-right: none; }
.cal-month__cell.is-outside { background: var(--surface-2); color: var(--text-subtle); }
.cal-month__cell.is-today { background: #f0f4ff; }
.cal-month__cell-head {
  display: flex; justify-content: space-between; align-items: center;
}
.cal-month__dom {
  font-weight: 700;
  font-size: 13px;
}
.cal-month__cell.is-today .cal-month__dom {
  background: var(--brand);
  color: #fff;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.cal-month__count {
  font-size: 10.5px;
  color: var(--text-subtle);
  font-weight: 600;
}
.cal-month__events {
  display: flex; flex-direction: column; gap: 3px;
}

/* -------- Week timetable -------- */
.cal-week {
  --cal-row-h: 60px;
  --cal-gap-h: 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cal-week__head {
  display: grid;
  grid-template-columns: 64px repeat(7, 1fr);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.cal-week__hours-head { padding: 8px; }
.cal-week__day-head {
  padding: 10px 8px;
  text-align: center;
  border-left: 1px solid var(--border);
}
.cal-week__day-head.is-today { background: #f0f4ff; }
.cal-week__dow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.cal-week__dom {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
}
.cal-week__day-head.is-today .cal-week__dom { color: var(--brand); }
.cal-week__body {
  display: grid;
  grid-template-columns: 64px repeat(7, 1fr);
  position: relative;
}
.cal-week__hours {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
}
.cal-week__hour {
  height: var(--cal-row-h);
  padding: 4px 8px;
  font-size: 11px;
  color: var(--text-subtle);
  border-bottom: 1px solid var(--border);
  text-align: right;
}
.cal-week__day {
  position: relative;
  border-right: 1px solid var(--border);
}
.cal-week__day:last-child { border-right: none; }
.cal-week__day.is-today { background: #f0f4ff44; }
/* One hour row in a day column. Its bottom border draws the hourly grid line;
   events sit inside it, positioned by minute and sized by their duration. */
.cal-week__cell {
  position: relative;
  height: var(--cal-row-h);
  border-bottom: 1px solid var(--border);
}
.cal-week__event-wrap {
  position: absolute;
  left: 3px; right: 3px;
  min-height: 36px;            /* keep very short classes legible */
  z-index: 2;
  box-sizing: border-box;
}
/* Card fills its duration-sized wrap; content clips (see .cal-event overflow). */
.cal-week__event-wrap > .cal-event { height: 100%; }
/* The week grid is tight, so a card shows only its time + title — the box's
   height and colour already carry duration and status, and the full detail is
   in the card's hover tooltip and on the class page. Time sits on its own line
   above the title rather than running inline with it. */
.cal-week__event-wrap .cal-event__meta { display: none; }
.cal-week__event-wrap .cal-event__time { display: block; margin-right: 0; }
.cal-week__event-wrap .cal-event__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;        /* clean ellipsis instead of a hard mid-word cut */
  overflow: hidden;
  font-weight: 600;
}
.cal-week__hour--ingap { display: block; }

/* Collapsed empty stretch between day-parts (e.g. morning → lunch → evening),
   shown as a hatched "⋯" band. Clicking it expands to --gap-full (the hours it
   hides, at full row height) so nothing is clipped and the quiet time can be
   inspected or — later — booked into. The gutter band (a button) and each day's
   gapcell share a data-gap index and toggle together (script at page foot). */
.cal-week__gap {
  display: flex;
  flex-direction: column;
  justify-content: center;     /* centre the dots while collapsed */
  align-items: flex-end;       /* right-aligned, like the hour labels */
  width: 100%;
  height: var(--cal-gap-h);
  margin: 0; padding: 0 8px;
  font: inherit;
  color: var(--text-subtle);
  border: none;
  border-bottom: 1px solid var(--border);
  background: repeating-linear-gradient(-45deg,
      var(--surface-2), var(--surface-2) 5px, transparent 5px, transparent 7px);
  cursor: pointer;
  overflow: hidden;
  transition: height 160ms ease;
}
.cal-week__gap:hover { color: var(--brand); }
.cal-week__gap-dots { font-size: 15px; letter-spacing: 1px; line-height: 1; }
.cal-week__gap-hours { display: none; width: 100%; }
.cal-week__gap.is-expanded {
  height: var(--gap-full);
  justify-content: flex-start;
  background: var(--surface);
}
.cal-week__gap.is-expanded .cal-week__gap-dots { display: none; }
.cal-week__gap.is-expanded .cal-week__gap-hours { display: block; }

/* The matching band across each day column. Clickable while collapsed (to
   expand); once expanded it's click-through so owners can click the revealed
   hours to add a session. Expanded state layers faint hourly grid lines over
   the hatch so it reads like normal (empty) hours. */
.cal-week__gapcell {
  height: var(--cal-gap-h);
  border-bottom: 1px solid var(--border);
  background: repeating-linear-gradient(-45deg,
      var(--surface-2), var(--surface-2) 5px, transparent 5px, transparent 7px);
  opacity: 0.6;
  cursor: pointer;
  transition: height 160ms ease;
}
.cal-week__gapcell.is-expanded {
  height: var(--gap-full);
  opacity: 1;
  cursor: default;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(var(--cal-row-h) - 1px),
      var(--border) calc(var(--cal-row-h) - 1px), var(--border) var(--cal-row-h)),
    repeating-linear-gradient(-45deg,
      var(--surface-2), var(--surface-2) 5px, transparent 5px, transparent 7px);
}
.cal-week__tail { flex-shrink: 0; }

/* Colour swatch dot — category manager list + legend. */
.cat-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  vertical-align: -1px;
  margin-right: 6px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

/* -------- Legend -------- */
.cal-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-muted);
}
.cal-legend__sw {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 3px;
  vertical-align: -2px;
  margin-right: 4px;
  border: 1px solid var(--border);
}
.cal-legend__sw--booked { box-shadow: inset 0 0 0 2px var(--success); }
.cal-legend__sw--coach  { box-shadow: inset 0 0 0 2px #2563eb; }
.cal-legend__sw--full   { background: var(--surface-2); opacity: 0.5; }
.cal-legend__sw--cancelled { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 3px, var(--border) 3px, var(--border) 4px); }
.cal-legend__sw--draft { background: var(--surface-2); border-style: dashed; }

/* -------- Dialog (owner edit) -------- */
.cal-dialog {
  border: none;
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  max-width: 460px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}
.cal-dialog::backdrop {
  background: rgba(20, 24, 50, 0.4);
  backdrop-filter: blur(2px);
}
.cal-dialog__title {
  margin: 0 0 6px;
  font-size: 18px;
}
.cal-dialog__actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px;
}

/* Form pop-up: a wider, padding-free dialog that hosts the full New / Edit class
   form in an <iframe> (calendar owner view). */
.cal-dialog--frame {
  padding: 0;
  width: min(680px, 96vw);
  max-width: none;
  overflow: visible;
}
.cal-dialog--frame #cal-form-frame {
  display: block;
  width: 100%;
  height: min(86vh, 780px);
  border: 0;
  border-radius: var(--radius-lg);
}
.cal-frame__close {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.cal-frame__close:hover { background: var(--border); }

/* Narrower screens — month cells get tighter, week becomes scrollable */
@media (max-width: 720px) {
  .cal-month__cell { min-height: 70px; padding: 4px; }
  .cal-event__meta { display: none; }
  .cal-week { overflow-x: auto; }
  .cal-week__head, .cal-week__body { min-width: 720px; }
}

/* ============================================================
   Calendar — Agenda (mobile-friendly stacked-list mode)
   ============================================================ */

.cal-agenda { display: none; flex-direction: column; gap: 12px; margin-top: 14px; }
.cal-agenda__day {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  scroll-margin-top: 12px;
}
.cal-agenda__day:target {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-soft), var(--shadow-sm);
}
.cal-agenda__day-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.cal-agenda__day-head.is-today { background: var(--brand-soft); }
.cal-agenda__dow {
  font-weight: 700; text-transform: uppercase;
  font-size: 11.5px; letter-spacing: 0.4px;
  color: var(--text-muted);
}
.cal-agenda__day-head.is-today .cal-agenda__dow { color: var(--brand-dark); }
.cal-agenda__dom { font-weight: 700; font-size: 15px; color: var(--text); }
.cal-agenda__day-head.is-today .cal-agenda__dom { color: var(--brand); }
.cal-agenda__count {
  margin-left: auto;
  font-size: 11.5px; color: var(--text-muted);
}
.cal-agenda__events {
  display: flex; flex-direction: column;
  padding: 8px; gap: 6px;
}
.cal-agenda__event {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid #cdd6ff;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--text);
  text-decoration: none;
  min-height: 48px;
  transition: transform 100ms, box-shadow 100ms;
}
.cal-agenda__event:hover {
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.cal-agenda__event .agenda-time {
  font-weight: 700; color: var(--brand);
  font-size: 13.5px; min-width: 46px; flex-shrink: 0;
}
.cal-agenda__event .agenda-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.cal-agenda__event .agenda-title {
  flex: 1; min-width: 0;
  font-weight: 600; font-size: 13.5px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis;
}
.cal-agenda__event .agenda-venue {
  font-size: 11.5px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Category colour fills the row, mirroring the desktop chip (.cal-event--cat)
   so the category colour key reads the same on mobile. Set as --cat-* inline
   (see renderAgendaCard); cancelled keeps its hatch below, so it's skipped. */
.cal-agenda__event--cat { background: var(--cat-bg); border-color: var(--cat-bd); }
.cal-agenda__event--cat .agenda-time { color: var(--cat-fg); }

/* Booking status composes over the category colour as a ring / dim / dash —
   the same treatment as the desktop chip — so the colour still shows through. */
.cal-agenda__event--booked { box-shadow: inset 0 0 0 2px var(--success); }
.cal-agenda__event--coach  { box-shadow: inset 0 0 0 2px #2563eb; }
.cal-agenda__event--full   { opacity: 0.5; }
.cal-agenda__event--cancelled {
  background: repeating-linear-gradient(45deg,
      var(--surface-2), var(--surface-2) 4px,
      var(--border) 4px, var(--border) 5px);
  border-color: var(--border);
  color: var(--text-muted); text-decoration: line-through;
}
.cal-agenda__event--cancelled .agenda-time { color: var(--text-muted); }
.cal-agenda__event--draft {
  border-style: dashed;
  opacity: 0.72;
}
/* Reuse the chip badge as an inline pill inside the agenda row. */
.cal-agenda__event .cal-event__badge {
  position: static;
  flex-shrink: 0;
}
.cal-agenda__empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
}

/* Month grid: compact "dots" strip for mobile (per cell). */
.cal-month__dots { display: none; gap: 3px; flex-wrap: wrap; margin-top: 3px; }
.cal-month__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}
.cal-month__dot--booked    { background: var(--success); }
.cal-month__dot--coach     { background: #2563eb; }
.cal-month__dot--full      { background: var(--danger); }
.cal-month__dot--cancelled { background: var(--text-subtle); }
.cal-month__dot--draft     { background: transparent; border: 1px dashed var(--text-muted); }
.cal-month__more {
  font-size: 9px; font-weight: 700; color: var(--text-muted);
  line-height: 6px; align-self: center;
}

/* Below 640px: switch grids into mobile-friendly layouts. */
@media (max-width: 640px) {
  /* Week view: hide the grid entirely; agenda takes over. */
  .cal-week { display: none; }
  .cal-agenda { display: flex; }

  /* Month view: keep the grid but strip event titles down to dots.
     The agenda below the grid carries the full detail. */
  .cal-month__events .cal-event { display: none; }
  .cal-month__events .cal-month__dots { display: flex; }
  .cal-month__cell { min-height: 54px; padding: 4px; cursor: pointer; }
  .cal-month__count { display: none; }
  .cal-month__dom { font-size: 12px; }
  .cal-month__cell.is-today .cal-month__dom { width: 20px; height: 20px; font-size: 11px; }
  .cal-month__dow { padding: 6px 4px; font-size: 10.5px; }

  /* Calendar toolbar tightens up. */
  .cal-toolbar { gap: 8px; }
  .cal-toolbar__group { padding: 3px; }
}

/* ============================================================
   Mobile refinements (phones up to ~640px)
   ============================================================ */

@media (max-width: 640px) {
  /* Inputs at 16px prevent iOS Safari from auto-zooming on focus. */
  .form-row input[type="text"],
  .form-row input[type="email"],
  .form-row input[type="password"],
  .form-row input[type="tel"],
  .form-row input[type="number"],
  .form-row input[type="date"],
  .form-row input[type="time"],
  .form-row input[type="search"],
  .form-row select,
  .form-row textarea,
  .input {
    font-size: 16px;
  }

  /* Tighter page wrapper — reclaim ~16px of side padding for content. */
  main.page { padding: 18px 14px 44px; }
  main.page--bleed { padding: 0; }

  /* Bigger tap targets for small buttons on touch screens. */
  .btn--sm { height: 36px; padding: 0 12px; font-size: 13px; }
  .btn-link { padding: 6px 2px; }

  /* Page head: titles smaller, action lays out below. */
  .page__head { gap: 8px; margin-bottom: 14px; }
  .page__title { font-size: 19px; }
  .page__sub { font-size: 13px; }

  /* Card / fieldset breathing room. */
  .card__head { padding: 12px 14px; gap: 8px; flex-wrap: wrap; }
  .card__title { font-size: 14.5px; }
  .card__body { padding: 14px; }
  .fieldset { padding: 16px 14px; }
  .fieldset__title { font-size: 14.5px; margin-bottom: 12px; padding-bottom: 10px; }

  /* Hero compaction. */
  .hero { padding: 36px 16px 44px; }
  .hero__logo { max-width: 220px; max-height: 96px; margin-bottom: 12px; }
  .hero__eyebrow { margin-bottom: 14px; }
  .hero h1 { margin-bottom: 12px; }
  .hero__sub { margin-bottom: 20px; }
  .hero__ctas .btn--xl,
  .hero__ctas .btn { width: 100%; }
  .hero__ctas { flex-direction: column; align-items: stretch; }

  /* Sections. */
  .section { padding: 32px 16px; }
  .section--tight { padding: 24px 16px; }
  .section__head { margin-bottom: 20px; }
  .features { gap: 12px; }
  .feature { padding: 18px 16px; }

  /* CTA band stacks. */
  .cta-band { padding: 28px 18px; border-radius: 12px; }
  .cta-band .btn--xl { width: 100%; }

  /* Footer wraps cleanly. */
  .site-footer { padding: 24px 16px 18px; }
  .site-footer__inner { gap: 10px; }
  .site-footer__spacer { display: none; }

  /* Auth screen breathing space. */
  .auth-shell { padding: 16px; min-height: auto; }
  .auth-card { padding: 22px 18px; }

  /* Tables: tighter cells (keep horizontal scroll for wide tables). */
  .table th, .table td { padding: 9px 10px; }
  .table { font-size: 13px; }
  .table th { font-size: 11px; }
  /* Admin tables: cap inline max-widths so remaining columns stay on screen. */
  .table td[style*="max-width"] { max-width: 160px !important; }

  /* Callouts and flash: titles can grow tall; just give them room. */
  .callout { padding: 12px 14px; font-size: 13px; }
  .flash { padding: 10px 12px; font-size: 13px; }

  /* Choice rows: stack right-side info under the body. */
  .choice { flex-wrap: wrap; }
  .choice__right { width: 100%; text-align: left; padding-left: 26px; }

  /* Tabs bar: a little tighter so labels fit. */
  .tabs-bar__tab { padding: 8px 12px; font-size: 13px; }

  /* Event hero on mobile already stacks; tighten gaps. */
  .event-hero__body { padding: 14px 16px 18px; gap: 12px; }
  .event-hero__title { font-size: 19px; }

  /* Summary strip: two columns max, then one. */
  .summary-strip { grid-template-columns: 1fr 1fr; gap: 10px; }
  .summary-strip__cell { padding: 10px 12px; }
  .summary-strip__value { font-size: 16px; }

  /* Calendar legend wraps better. */
  .cal-legend { gap: 8px 14px; font-size: 11.5px; }
}

/* Very narrow phones (≤ 380px) — extra defensive. */
@media (max-width: 380px) {
  main.page { padding: 14px 12px 36px; }
  .page__title { font-size: 18px; }
  .hero h1 { font-size: 26px; }
  .summary-strip { grid-template-columns: 1fr; }
  .site-header__inner { padding: 8px 12px; gap: 8px; }
  .site-header__brand span:not(.brand-mark) { display: none; } /* keep just the brand mark */
  .auth-card { padding: 18px 14px; }
}

/* Mobile-aware utilities — hide on phones / show only on phones. */
.mobile-only { display: none; }
@media (max-width: 640px) {
  .hide-mobile { display: none !important; }
  .mobile-only { display: block; }
  .mobile-only.inline { display: inline; }
}

/* -------- Payments / invoices (roadmap #36) -------- */
.section-title {
  font-size: 17px; font-weight: 700; color: var(--text);
  margin: 0 0 12px;
}

/* Inline payment-status chip on booking cards + admin lists. */
.pay-chip {
  display: inline-block; vertical-align: middle;
  padding: 1px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
  text-transform: uppercase;
  background: #e5e7eb; color: #374151;
}
.pay-chip--unpaid   { background: var(--warning-bg); color: var(--warning); }
.pay-chip--paid     { background: var(--success-bg); color: var(--success); }
.pay-chip--refunded { background: var(--brand-soft); color: var(--brand-dark); }
/* Clickable "Pay now" chip — links to the card-payment page. */
a.pay-chip--pay { background: var(--brand); color: #fff; text-decoration: none; }
a.pay-chip--pay:hover { filter: brightness(1.08); }

/* Invoice document + its screen-only toolbar. */
.invoice-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.invoice-toolbar .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.invoice-doc {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 30px;
  box-shadow: var(--shadow-sm);
}
.invoice-doc__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border);
}
.invoice-doc__from { display: flex; align-items: center; gap: 12px; }
.invoice-doc__logo { max-width: 120px; max-height: 56px; object-fit: contain; }
.invoice-doc__club { font-size: 18px; font-weight: 700; color: var(--text); }
.invoice-doc__meta { text-align: right; }
.invoice-doc__doctitle { font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--text-subtle); }
.invoice-doc__num { font-size: 20px; font-weight: 700; color: var(--text); margin: 2px 0 6px; }
.invoice-doc__parties {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.invoice-doc__dates { text-align: right; font-size: 13px; }
.invoice-doc__label {
  display: inline-block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px; color: var(--text-subtle);
}
.invoice-doc__items { width: 100%; margin-top: 6px; }
.invoice-doc__items tfoot th { border-top: 2px solid var(--border-strong); font-size: 15px; }
.invoice-doc__note { margin-top: 16px; font-size: 12.5px; }

/* Print: drop the app chrome + toolbar; let the document own the page. */
@media print {
  .site-header, .site-footer, .invoice-toolbar, .no-print, .flash, .callout { display: none !important; }
  main.page { padding: 0 !important; max-width: none !important; }
  .invoice-doc { border: none; box-shadow: none; padding: 0; }
}

/* Pagination footer for long list views (roadmap #76). */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; font-size: 13px; color: var(--text-muted);
}
.pager__summary { white-space: nowrap; }
.pager__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.pager__perpage { display: inline-flex; align-items: center; gap: 6px; }
.pager__perpage-label { white-space: nowrap; }
.pager__select {
  height: 30px; padding: 0 8px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface-2); color: var(--text);
  font-family: inherit; font-size: 12.5px; appearance: auto;
}
.pager__nav { display: inline-flex; align-items: center; gap: 8px; }
.pager__page { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Disabled prev/next stays ghost-flat, not the filled-brand default. */
.pager .btn.is-disabled {
  background: transparent; border-color: transparent; color: var(--text-subtle);
}

/* Inline "?" help tooltips beside field headings (roadmap #78). Shows on hover,
   keyboard focus, and tap — so it works for mouse, keyboard and touch alike. */
.hint { position: relative; display: inline-flex; vertical-align: middle; margin-left: 5px; }
.hint__btn {
  width: 16px; height: 16px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--text-muted); font-size: 11px; font-weight: 700; line-height: 1;
  cursor: help; display: inline-flex; align-items: center; justify-content: center;
}
.hint__btn:hover, .hint__btn:focus-visible { border-color: var(--brand); color: var(--brand); }
.hint__bubble {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 240px; z-index: 60;
  background: #1f2937; color: #fff; padding: 8px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 400; line-height: 1.45; text-align: left;
  letter-spacing: normal; text-transform: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none;
}
.hint__bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #1f2937;
}
.hint:hover .hint__bubble, .hint:focus-within .hint__bubble { opacity: 1; visibility: visible; }

/* A "?" hint sitting in a table header opens UPWARD by default, where the
   table-wrap's overflow:hidden clips it against the top edge (the coaches
   "Can sell" column). In a header, flip the bubble to open downward into the
   table body, and pair the wrap with .table-wrap--hints so a right-hand
   column's bubble isn't clipped on the side either. */
.table th .hint__bubble { bottom: auto; top: calc(100% + 8px); }
.table th .hint__bubble::after {
  top: auto; bottom: 100%;
  border-top-color: transparent; border-bottom-color: #1f2937;
}
.table-wrap--hints { overflow: visible; }

/* Collapsible card: a <form>.collapse-card wrapping a <details> whose <summary>
   is a full-width clickable header. The native disclosure marker is hidden in
   favour of a chevron that rotates when open (auto-emails page). */
.collapse-card { overflow: hidden; }
.collapse-card__summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px;
}
.collapse-card__summary::-webkit-details-marker { display: none; }
.collapse-card__summary::marker { content: ""; }
.collapse-card__summary:hover { background: var(--surface-2); }
.collapse-card__title { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.collapse-card__chev { color: var(--text-muted); font-size: 20px; line-height: 1; transition: transform .15s ease; }
.collapse-card details[open] > .collapse-card__summary .collapse-card__chev { transform: rotate(90deg); }
.collapse-card__body { padding: 2px 20px 18px; }

/* ---------------------------------------------------------------------------
   Club shop product photos (#64). A product can carry several photos
   (migration 086): one big picture with a thumbnail strip under it that swaps
   the big one. Single-photo products render just the picture, so the old
   one-thumbnail look is unchanged.
   --------------------------------------------------------------------------- */
.product-photos { flex: none; width: 72px; }
.product-photos--sm { width: 56px; }
.product-photos__main {
  display: block; width: 72px; height: 72px;
  object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border); background: #fff;
}
.product-photos--sm .product-photos__main { width: 56px; height: 56px; border-radius: 6px; }
.product-photos__strip { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.product-photos__thumb {
  padding: 0; border: 1px solid var(--border); border-radius: 4px;
  background: #fff; cursor: pointer; line-height: 0; opacity: .65;
}
.product-photos__thumb img { width: 20px; height: 20px; object-fit: cover; border-radius: 3px; }
.product-photos__thumb:hover { opacity: 1; }
.product-photos__thumb.is-current { opacity: 1; border-color: var(--brand); }

/* Photo editor on the product form: each photo with its main/delete controls. */
.product-gallery-edit { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.product-gallery-edit__item { margin: 0; width: 108px; }
.product-gallery-edit__item img {
  display: block; width: 108px; height: 108px; object-fit: cover;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
}
.product-gallery-edit__item figcaption { margin-top: 4px; font-size: 12px; }
.product-gallery-edit__item .inline-check { display: flex; align-items: center; gap: 5px; }