/* ──────────────────────────────────────────────
   USL LOTC Dashboard — Stylesheet
   Brand: Blue #0A3161 · Green #28724F · White
   ────────────────────────────────────────────── */

:root {
  --blue-900: #071e3d;
  --blue-800: #0a3161;
  --blue-700: #0e4275;
  --blue-600: #135a99;
  --blue-100: #dce8f5;
  --blue-50:  #eef4fb;

  --green-700: #1b5e3b;
  --green-600: #28724f;
  --green-500: #2e8b57;
  --green-100: #d4edda;
  --green-50:  #eaf6ee;

  --white: #ffffff;
  --gray-50:  #f8f9fb;
  --gray-100: #f0f2f5;
  --gray-200: #dfe3e8;
  --gray-300: #c4cdd5;
  --gray-400: #919eab;
  --gray-500: #637381;
  --gray-700: #454f5b;
  --gray-900: #212b36;

  --red-500: #d32f2f;
  --red-50:  #fdecea;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.1);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.12);
  --transition: 0.2s ease;

  /* Page background is white; --page-bg exists so the few places that used the
     old cream have one token to follow rather than a hard-coded literal. */
  --page-bg: #ffffff;

  --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--gray-900);
  background: var(--page-bg);
  line-height: 1.6;
  min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: 0.95rem; }

/* ─────────── TOP BAR ─────────── */
.top-bar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--blue-800); color: var(--white);
  box-shadow: var(--shadow-md);
}
.top-bar__brand { display: flex; align-items: center; gap: 0.85rem; }
.top-bar__logo {
  height: 48px; width: auto; flex-shrink: 0;
  object-fit: contain;
}
.top-bar__title { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; font-weight: 700; }
.top-bar__subtitle { font-size: 0.75rem; opacity: 0.8; }
.app-version {
  display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.4rem;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.3px;
  background: rgba(255, 255, 255, 0.18); border-radius: 999px;
  vertical-align: middle;
}

/* ── Signed-in user (top bar) ── */
.top-bar__user { display: flex; align-items: center; gap: 0.6rem; }
.top-bar__avatar { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.5); object-fit: cover; display: block; }
.top-bar__avatar-btn {
  display: inline-flex; padding: 0; border: none; background: none; cursor: pointer;
  border-radius: 50%; line-height: 0; transition: var(--transition);
}
.top-bar__avatar-btn:hover .top-bar__avatar { border-color: var(--white); }
.top-bar__avatar-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

/* USL page sign-out avatar lives in the header, pushed to the far right. */
.usl-signout-btn { margin-left: auto; align-self: center; }

/* ── USL view (embedded standalone page) ── */
.usl-frame { width: 100%; height: calc(100vh - 70px); border: 0; display: block; background: var(--page-bg); }

/* ── Coordinator sign-in gate ── */
.auth-gate { display: grid; place-items: center; padding: 3rem 1rem; min-height: 60vh; }
.auth-gate__card {
  background: var(--white); border: 1px solid var(--blue-100); border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-md); padding: 2.5rem 2rem; max-width: 380px; width: 100%; text-align: center;
}
.auth-gate__logo { width: 64px; height: 64px; object-fit: contain; margin-bottom: 1rem; }
.auth-gate__card h2 { font-family: var(--font-display); font-size: 1.5rem; color: var(--blue-800); margin-bottom: 0.5rem; }
.auth-gate__card p { font-size: 0.9rem; color: var(--gray-500); margin-bottom: 1.5rem; line-height: 1.5; }
.btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem;
  width: 100%; padding: 0.7rem 1rem; background: var(--white); color: #3c4043;
  border: 1.5px solid var(--gray-300); border-radius: var(--radius-md, 8px);
  font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: var(--transition);
}
.btn-google:hover { background: #f7f8f9; box-shadow: var(--shadow-sm); }

.auth-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; color: var(--gray-400); font-size: 0.78rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--gray-200); }

.email-auth { display: flex; flex-direction: column; gap: 0.6rem; }
.auth-input {
  width: 100%; padding: 0.65rem 0.8rem; border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-md, 8px); font-size: 0.9rem; font-family: inherit;
}
.auth-input:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(19,90,153,0.12); }
.btn-email {
  width: 100%; padding: 0.7rem 1rem; background: var(--blue-800); color: var(--white);
  border: none; border-radius: var(--radius-md, 8px); font-size: 0.92rem; font-weight: 600;
  cursor: pointer; transition: var(--transition);
}
.btn-email:hover { background: var(--blue-700); }
.btn-email:disabled { opacity: 0.6; cursor: not-allowed; }
.auth-link {
  background: none; border: none; color: var(--blue-600); font-size: 0.82rem;
  cursor: pointer; padding: 0.25rem; text-decoration: underline;
}
.auth-link:hover { color: var(--blue-800); }
.auth-gate__hint { margin-top: 0.9rem !important; margin-bottom: 0 !important; font-size: 0.78rem !important; color: var(--gray-400) !important; }
.auth-gate__error { margin-top: 1rem; margin-bottom: 0; color: #c62828; font-size: 0.85rem; font-weight: 600; }

/* ── View Toggle ── */
.view-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: transparent;
  padding: 0;
}
.view-toggle__btn {
  display: flex; align-items: center; gap: 6px;
  padding: 0.45rem 0.85rem;
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
  font-size: 0.85rem; font-weight: 500; transition: var(--transition);
}
.view-toggle__btn:hover {
  color: var(--white);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.55);
}
.view-toggle__btn.active {
  background: var(--white);
  color: var(--blue-800);
  border-color: var(--white);
  box-shadow: var(--shadow-sm);
}

/* ─────────── VIEWS ─────────── */
.view { padding: 1.5rem; max-width: 1280px; margin: 0 auto; }
.hidden { display: none !important; }

/* Admin coordinator view — full-width, flush to left edge */
#view-coordinator.view {
  max-width: none;
  margin: 0;
  padding: 0;
}
#view-coordinator .auth-gate { padding: 2rem 1.5rem; }
#view-coordinator .dashboard { gap: 0; align-items: stretch; }
#view-coordinator .calendar-dashboard {
  display: block;
  grid-template-columns: 1fr;
}
#view-coordinator .calendar-panel {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 108px);
  width: 100%;
}
#view-coordinator .calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}
#view-coordinator .calendar-toolbar__actions,
#view-coordinator .calendar-toolbar__views {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.calendar-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--gray-700);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.calendar-view-btn:hover { background: var(--blue-50); border-color: var(--blue-200); }
.calendar-view-btn.active {
  background: var(--blue-800);
  border-color: var(--blue-800);
  color: var(--white);
}
#view-coordinator .events-list-view {
  flex: 1;
  padding: 1rem 1.25rem 1.5rem;
  background: var(--white);
  overflow-y: auto;
}
.events-list--full {
  max-height: none;
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  align-content: start;
}
.events-list--full .events-list__empty {
  grid-column: 1 / -1;
}
.events-list--full .events-list__item {
  display: grid;
  grid-template-columns: 110px 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem 0.85rem;
  padding: 0.75rem 1rem;
}
/* Tiny event thumbnail beside the date. Height is capped to the row's text line
   so rows never grow taller. */
.events-list__item-thumb {
  width: 34px;
  height: 22px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--gray-100);
  display: block;
  align-self: center;
  margin: -4px 0;
}
.events-list__item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.events-list__item-thumb--empty {
  background: repeating-linear-gradient(45deg, var(--gray-100), var(--gray-100) 4px, var(--gray-50) 4px, var(--gray-50) 8px);
}
.events-list__item-meta {
  font-size: 0.78rem;
  color: var(--gray-500);
  white-space: nowrap;
}
#view-coordinator .saved-events {
  border-radius: 0;
  box-shadow: none;
  border-right: 1px solid var(--gray-200);
  min-height: calc(100vh - 108px);
}
#view-coordinator .form-placeholder,
#view-coordinator .event-form,
#view-coordinator #events-cal-overview {
  border-radius: 0;
  box-shadow: none;
}
#view-coordinator #events-cal-overview,
#view-coordinator .event-form {
  flex: 1;
  min-width: 0;
}
#view-coordinator #events-cal-overview {
  min-height: 0;
}
#view-coordinator .calendar--full {
  max-width: none;
}
#view-coordinator .calendar--full .calendar__grid {
  min-height: calc(100vh - 280px);
}
#view-coordinator .admin-cal-overview {
  flex: 1;
  padding: 0.75rem 1.25rem 1.25rem;
}
#view-coordinator .calendar__header {
  padding: 0.5rem 1.25rem;
}
#view-coordinator .cal-month-year {
  font-size: 1.05rem;
}
#view-coordinator .cal-nav {
  width: 28px;
  height: 28px;
}
#view-coordinator .cal-nav svg {
  width: 16px;
  height: 16px;
}
.form-back-btn {
  flex-shrink: 0;
  margin-right: 0.35rem;
}
#view-coordinator .form-tab-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
#view-coordinator .form-tabs {
  flex: 1 1 auto;
  min-width: 0;
}
#view-coordinator .form-tab-bar__actions {
  margin-left: auto;
  flex-shrink: 0;
}
.special-dates-list-row__dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.special-extra-fields {
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.25rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: 8px;
}
.special-extra-fields__hint {
  margin: 0 0 0.65rem;
}
.special-date-modal {
  max-width: 620px;
  width: min(620px, 94vw);
  text-align: left;
  padding: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(90vh, 820px);
}
.special-date-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gray-400);
  cursor: pointer;
}
.special-date-modal__close:hover { color: var(--gray-700); }
.special-date-modal .special-date-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  min-width: 0;
}
.special-date-form__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  -webkit-overflow-scrolling: touch;
}
.special-date-modal .special-date-form__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0;
  min-width: 0;
  flex-shrink: 0;
  padding: 1.35rem 1.75rem 1rem;
  border-bottom: 1px solid var(--gray-100);
  background: var(--white);
}
.special-date-textarea {
  padding: 0.6rem 0.75rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--gray-50);
  color: var(--gray-900);
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.45;
  resize: vertical;
  min-height: 2.75rem;
}
.special-date-textarea:focus {
  outline: none;
  border-color: var(--blue-600);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(19,90,153,.12);
}
.special-date-textarea--sm { min-height: 2.5rem; }
.special-date-modal .field-row {
  min-width: 0;
}
.special-date-modal .field-row .field {
  min-width: 0;
}
.special-date-photos-field .field-hint {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin: 0.2rem 0 0.65rem;
}
.special-date-modal .publish-toggle {
  flex-wrap: wrap;
}
.day-action-modal {
  max-width: 420px;
  width: 92%;
  text-align: center;
  padding: 1.75rem 2rem 2rem;
  position: relative;
}
.day-action-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gray-400);
  cursor: pointer;
}
.day-action-modal__close:hover { color: var(--gray-700); }
.day-action-modal__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--blue-800);
  margin: 0 0 0.35rem;
}
.day-action-modal__date {
  font-size: 0.9rem;
  color: var(--gray-500);
  margin: 0 0 1rem;
}
.day-action-modal__add-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-400);
  margin: 0 0 0.5rem;
  text-align: left;
}
.day-action-existing {
  text-align: left;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--gray-100);
}
.day-action-existing__heading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  margin: 0 0 0.5rem;
}
.day-action-event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.day-action-event-list__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--gray-50);
}
.day-action-event-list__dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.day-action-event-list__info {
  flex: 1;
  min-width: 0;
}
.day-action-event-list__title {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.day-action-event-list__meta {
  font-size: 0.72rem;
  color: var(--gray-500);
}
.special-dates-list-modal {
  max-width: 560px;
  width: min(560px, 94vw);
  text-align: left;
  padding: 1.5rem 1.75rem 1.75rem;
  position: relative;
}
.special-dates-list-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gray-400);
  cursor: pointer;
}
.special-dates-list-modal__close:hover { color: var(--gray-700); }
.special-dates-list-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
  padding-right: 1.5rem;
}
.special-dates-list-modal__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--blue-800);
  margin: 0;
}
.special-dates-list-modal__hint {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin: 0 0 1rem;
  line-height: 1.45;
}
.special-dates-list-content {
  max-height: min(60vh, 420px);
  overflow-y: auto;
}
.special-dates-list-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--gray-100);
}
.special-dates-list-row:last-child { border-bottom: none; }
.special-dates-list-section + .special-dates-list-section { margin-top: 0.9rem; }
.special-dates-list-section__title {
  margin: 0 0 0.15rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
}
.special-dates-list-section__count {
  margin-left: 0.25rem;
  font-weight: 600;
  color: var(--gray-400);
}
.special-dates-list-section__empty {
  margin: 0.5rem 0;
  font-size: 0.82rem;
  color: var(--gray-500);
}
.special-dates-list-row__body { flex: 1; min-width: 0; }
.special-dates-list-row__title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--gray-900);
}
.special-dates-list-row__date {
  font-size: 0.78rem;
  color: var(--gray-500);
}
.special-dates-list-row__badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: #f3e5f5;
  color: #7b1fa2;
}
.special-dates-list-row__badge--draft {
  background: var(--gray-100);
  color: var(--gray-500);
}
.day-action-modal__choices {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.day-action-modal__choices .btn {
  width: 100%;
  justify-content: center;
  gap: 0.45rem;
}
#view-coordinator .student-list-panel {
  max-width: none;
  margin: 0;
  padding: 1.25rem 1.25rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
#view-coordinator .user-access-panel {
  max-width: none;
  margin: 0;
  padding: 0.75rem 1.25rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.user-access__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.65rem 0.85rem;
  margin-bottom: 0.65rem;
  width: 100%;
}
.user-access-subtabs {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: #f8fafc;
}
.user-access-subtab {
  border: 0;
  background: transparent;
  color: var(--gray-700);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.user-access-subtab.active {
  background: var(--blue-800);
  color: #fff;
}
.user-access-subtab__count {
  display: inline-flex;
  min-width: 1.25rem;
  justify-content: center;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  font-size: 0.72rem;
}
.user-access-subtab.active .user-access-subtab__count {
  background: rgba(255,255,255,0.22);
  color: #fff;
}
#user-access-roster-view { width: 100%; }
.user-access-pending-view { width: 100%; }
.user-access-pending-view.hidden { display: none; }
.user-access-pending__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1rem;
  margin-bottom: 0.85rem;
  width: 100%;
}
.user-access-pending__lead {
  margin: 0 0 0.25rem;
  font-size: 0.88rem;
  color: var(--gray-700);
  line-height: 1.4;
  max-width: 40rem;
}
.user-access-pending__meta {
  margin: 0;
  font-size: 0.78rem;
  color: var(--gray-500);
}
.user-access-pending__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.ua-pending-status {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
}
.ua-pending-status--pending { background: #fff7ed; color: #c2410c; }
.ua-pending-status--already { background: #ecfdf5; color: #047857; }
.ua-pending-status--granted { background: #eff6ff; color: #1d4ed8; }
.ua-pending-students {
  font-size: 0.78rem;
  color: var(--gray-700);
  max-width: 16rem;
}
.user-access-activity-view { width: 100%; }
.user-access-activity-view.hidden { display: none; }
.ua-activity-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.55rem;
  width: 100%;
  margin-bottom: 0.85rem;
}
.ua-activity-stat {
  background: #f8fafc;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.ua-activity-stat__n {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--blue-800);
  line-height: 1.1;
}
.ua-activity-stat__l {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ua-activity-type {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
}
.ua-activity-type--login { background: #eff6ff; color: #1d4ed8; }
.ua-activity-type--visit { background: #f1f5f9; color: #475569; }
.ua-activity-breakdown { margin-top: 0.75rem; }
.ua-activity-breakdown__title {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ua-activity-note {
  margin: 0 0 0.65rem;
  font-size: 0.8rem;
  color: var(--gray-500);
}
.ua-activity-uid {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--gray-500);
  max-width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-access__roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.65rem;
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}
.user-access-role-card {
  background: #fff;
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-md, 10px);
  padding: 0.65rem 0.75rem;
}
.user-access-role-card__title {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
}
.user-access-role-card__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--gray-600, #4b5563);
}
.user-access-role-card__list li + li {
  margin-top: 0.25rem;
}
.user-access__content {
  background: white;
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  align-self: flex-start;
  max-width: 100%;
}
.user-access-tbl { min-width: 520px; }
.user-access-tbl__actions { white-space: nowrap; text-align: right; }
.user-access-tbl__name { min-width: 6.5rem; }
.ua-name-input {
  width: 100%;
  max-width: 9rem;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.28rem 0.4rem;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: #fff;
  color: var(--gray-900);
}
.ua-name-input:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 2px rgba(10, 49, 97, 0.12);
}
.ua-name-input:disabled { opacity: 0.6; }
.user-access-role-select {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: #fff;
  max-width: 100%;
}
.user-access-add-form {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0.5rem 0.55rem;
  width: 100%;
  margin: 0.75rem 0 1rem;
  padding: 0.7rem 0.85rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: 10px;
  overflow-x: auto;
}
.user-access-add-form__field {
  margin: 0;
  min-width: 0;
  flex: 0 0 auto;
}
.user-access-add-form__field label,
.user-access-add-form__tags-label {
  display: block;
  margin: 0 0 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gray-500);
  white-space: nowrap;
}
.user-access-add-form__field--name { width: 7.25rem; }
.user-access-add-form__field--email { flex: 1 1 12rem; min-width: 11rem; }
.user-access-add-form__field--role { width: 8.5rem; }
.user-access-add-form__field input,
.user-access-add-form__field select {
  width: 100%;
  padding: 0.4rem 0.5rem;
  font-size: 0.85rem;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: #fff;
  height: 2.15rem;
  box-sizing: border-box;
}
.user-access-add-form__tags {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
}
.user-access-add-form__tag-row {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 2.15rem;
}
.user-access-tag-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.user-access-tag-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.user-access-tag-toggle span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.15rem;
  padding: 0 0.7rem;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gray-700);
  white-space: nowrap;
  box-sizing: border-box;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.user-access-tag-toggle:hover span {
  border-color: #c5d4e8;
  color: var(--blue-800);
}
.user-access-tag-toggle input#user-access-add-tag-faculty:checked + span {
  background: #5b21b6;
  border-color: #5b21b6;
  color: #fff;
}
.user-access-tag-toggle input#user-access-add-tag-parent:checked + span {
  background: #9d174d;
  border-color: #9d174d;
  color: #fff;
}
.user-access-add-form__submit {
  flex: 0 0 auto;
  height: 2.15rem;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .user-access-add-form {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .user-access-add-form__field--email { flex: 1 1 100%; min-width: 0; }
}
.role-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.role-badge--super { background: #fef3c7; color: #92400e; }
.role-badge--admin { background: #dbeafe; color: #1e40af; }
.role-badge--usl { background: #dcfce7; color: #166534; }
.groups-field > .groups-header { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; margin-bottom: 0.45rem; }
.groups-field > .groups-header .logistics-collapse-title > label,
.groups-field > .groups-header > label:first-child { font-weight: 700; font-size: 0.88rem; color: var(--blue-800); margin: 0; }
.groups-count-label { font-size: 0.78rem; font-weight: 600; color: var(--gray-700); display: inline-flex; align-items: center; gap: 0.35rem; }
.groups-count-input { width: 52px; padding: 0.28rem 0.4rem; border: 1.5px solid var(--gray-300); border-radius: 6px; font-size: 0.85rem; text-align: center; }
.groups-tally { font-size: 0.8rem; color: var(--gray-500); margin-left: auto; }
.groups-hint { margin: 0 0 0.65rem; font-size: 0.78rem; }
.transport-vehicles.groups-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; align-content: start; }
@media (max-width: 720px) {
  .transport-vehicles.groups-grid { grid-template-columns: 1fr; }
}
.transport-group--usl .transport-group__header { background: #5c6bc0; }
.assign-chip {
  display: inline-flex; align-items: center; gap: 0.28rem;
  padding: 0.18rem 0.55rem 0.18rem 0.35rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 500; cursor: grab; user-select: none;
  border: 1px solid transparent;
}
.assign-chip:active { cursor: grabbing; }
.assign-chip.dragging { opacity: 0.35; }
/* Adults (chaperone / parent / faculty) share one bold purple style so they
   stand out clearly against student chips in the Groups section. */
.assign-chip--participant,
.assign-chip--parent,
.assign-chip--faculty {
  background: #ede9fe;
  border-color: #c4b5fd;
  color: #5b21b6;
  font-weight: 700;
}
.transport-adult-chip { cursor: grab; }
.transport-adult-chip__group {
  font-size: 0.62rem;
  font-weight: 700;
  opacity: 0.7;
  margin-left: 0.15rem;
}
.lot-group-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem;
  padding: 0.35rem 0.55rem; border-radius: 8px; background: #e3f2fd; border: 1px solid #90caf9;
  cursor: grab; user-select: none; min-width: 110px;
}
.lot-group-chip:active { cursor: grabbing; }
.lot-group-chip.dragging { opacity: 0.35; }
.lot-group-chip--usl { background: #e8eaf6; border-color: #9fa8da; }
.lot-group-chip__label { font-size: 0.78rem; font-weight: 700; color: var(--blue-800); }
.lot-group-chip__meta { font-size: 0.65rem; color: var(--gray-700); }
.transport-drop-zone--groups {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 0.45rem;
}
.transport-lot-group-block {
  flex: 1 1 200px;
  min-width: 190px;
  max-width: 260px;
  align-self: flex-start;
  border: 1px solid #90caf9;
  border-radius: 8px;
  background: #f8fbff;
  cursor: grab;
  user-select: none;
  overflow: hidden;
}
.transport-lot-group-block:active { cursor: grabbing; }
.transport-lot-group-block.dragging { opacity: 0.4; }
.transport-lot-group-block--usl { border-color: #9fa8da; background: #f3f4fb; }
.transport-lot-group-block__header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.35rem;
  padding: 0.3rem 0.5rem; background: #e3f2fd; border-bottom: 1px solid #bbdefb;
}
.transport-lot-group-block--usl .transport-lot-group-block__header { background: #e8eaf6; border-bottom-color: #c5cae9; }
.transport-lot-group-block__title { font-size: 0.76rem; font-weight: 700; color: var(--blue-800); }
.transport-lot-group-block__meta { font-size: 0.62rem; color: var(--gray-700); white-space: nowrap; }
.transport-lot-group-block__roster {
  padding: 0.3rem 0.45rem 0.35rem;
  display: flex; flex-direction: column; gap: 0.12rem;
}
.transport-roster-line {
  display: flex; align-items: baseline; gap: 0.3rem;
  font-size: 0.68rem; color: var(--gray-900); line-height: 1.3;
}
.transport-roster-line--student {
  cursor: grab;
  border-radius: 4px;
  padding: 0.12rem 0.25rem;
  margin: 0 -0.15rem;
}
.transport-roster-line--student:hover {
  background: #e3f2fd;
  outline: 1px dashed #90caf9;
}
.transport-roster-line--student:active { cursor: grabbing; }
.transport-roster-line--student.dragging { opacity: 0.35; }
.transport-lot-group-block--splitting { outline: 2px dashed var(--blue-600); outline-offset: 1px; }
.transport-roster-line__grade {
  flex-shrink: 0; font-size: 0.58rem; font-weight: 700; color: var(--blue-700);
  background: #e3f2fd; padding: 0 0.25rem; border-radius: 3px;
}
.transport-roster-line__tag {
  flex-shrink: 0; font-size: 0.55rem; font-weight: 800; text-transform: uppercase;
  color: var(--gray-500); min-width: 3.2rem;
}
.transport-roster-line--faculty .transport-roster-line__tag { color: #5b21b6; }
.transport-roster-line--parent .transport-roster-line__tag { color: #9d174d; }
.transport-roster-line--chaperone .transport-roster-line__tag { color: #00695c; }
.student-group-mark {
  font-size: 0.58em;
  font-weight: 800;
  color: var(--blue-700);
  margin-left: 0.2em;
  vertical-align: super;
  line-height: 0;
  letter-spacing: 0;
}
.student-chip .student-group-mark { font-size: 0.65em; }
.transport-lot-group-block__split-note,
.transport-capacity-warn {
  font-size: 0.65rem; font-weight: 600; color: #b45309;
  background: #fffbeb; border-top: 1px solid #fcd34d;
  padding: 0.28rem 0.45rem; line-height: 1.35;
}
.transport-lot-group-block--partial { border-style: dashed; }
.transport-lot-group-block__split-note--info {
  color: #0369a1; background: #f0f9ff; border-top-color: #7dd3fc;
}
.transport-group-tags { display: inline-flex; flex-wrap: wrap; gap: 0.2rem; margin-left: 0.35rem; }
.transport-group-tag {
  font-size: 0.62rem; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: rgba(255,255,255,.22); color: inherit;
}
.transport-notice {
  font-size: 0.8rem; color: #b45309; background: #fffbeb; border: 1px solid #fcd34d;
  border-radius: 8px; padding: 0.55rem 0.75rem; margin-bottom: 0.65rem;
}
.tag-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  margin: 0.1rem 0.15rem 0.1rem 0;
}
.tag-badge--faculty { background: #ede9fe; color: #5b21b6; }
.tag-badge--parent { background: #fce7f3; color: #9d174d; }
.tag-badge--family { background: #ccfbf1; color: #115e59; }
.tag-badge--us { background: #e0f2fe; color: #075985; }
.tag-badge--ms { background: #dcfce7; color: #166534; }
/* Parent division, from the contacts import (distinct from the student tags). */
.tag-badge--is-parent { background: #fff1e0; color: #9a4a06; }
.tag-badge--ms-parent { background: #e8f5ec; color: #1c6b3a; }
.tag-badge--us-parent { background: #e8eefc; color: #1e3a8a; }
.user-access-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
}
.user-access-tag-option {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
}
.user-access-tag-option input { margin: 0; }
#user-access-filters.grade-tabs {
  flex-wrap: wrap;
}
#user-access-filters .ua-filter-sep {
  width: 1px;
  align-self: stretch;
  min-height: 1.6rem;
  background: var(--gray-300, #d1d5db);
  margin: 0 0.15rem;
}
#view-coordinator .analytics-panel { padding: 1.5rem 1.25rem; }
#view-coordinator #panel-summary {
  padding: 0.75rem 1.25rem 1.25rem;
  gap: 0.85rem;
}
#panel-summary .analytics-header--summary {
  justify-content: flex-start;
}

/* ─────────── DASHBOARD LAYOUT ─────────── */
.dashboard { display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; align-items: start; }

/* ── Saved Events Sidebar ── */
.saved-events {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 1.25rem;
  position: sticky; top: 90px;
}
.events-list {
  list-style: none; margin-top: 0.75rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  max-height: calc(100vh - 220px); overflow-y: auto;
}
.events-list__empty { font-size: 0.85rem; color: var(--gray-400); text-align: center; padding: 1.5rem 0; }
.events-list__item {
  padding: 0.65rem 0.75rem; border-radius: var(--radius-sm);
  background: var(--gray-50); border: 1px solid var(--gray-200);
  cursor: pointer; transition: var(--transition);
  display: flex; align-items: center; gap: 0.5rem;
}
.events-list__item:hover { border-color: var(--blue-600); background: var(--blue-50); }
.events-list__item.published { border-left: 3px solid var(--green-600); }
.events-list__item.active {
  background: var(--blue-800); border-color: var(--blue-800);
  box-shadow: 0 2px 8px rgba(10, 49, 97, 0.25);
}
.events-list__item.active .events-list__item-title { color: #fff; }
.events-list__item.active .events-list__item-date { color: rgba(255, 255, 255, 0.7); }
.events-list__item.active:hover { background: var(--blue-800); border-color: var(--blue-800); }
.events-list__item-title { font-size: 0.85rem; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.events-list__item-date { font-size: 0.7rem; color: var(--gray-400); white-space: nowrap; }

/* ── Create Event Button ── */
.btn-create-event {
  width: 100%; margin-top: 0.5rem; margin-bottom: 0.5rem;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.7rem 1rem; border: 2px dashed var(--green-600);
  border-radius: var(--radius-md); background: var(--green-50, #e8f5e9);
  color: var(--green-700, #2e7d32); font-size: 0.88rem; font-weight: 700;
  cursor: pointer; transition: var(--transition);
}
.btn-create-event:hover {
  background: var(--green-600); color: var(--white);
  border-style: solid;
}

/* ── Form Placeholder ── */
.form-placeholder {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 3rem 2rem;
  display: flex; align-items: center; justify-content: center;
  min-height: 500px;
}
.form-placeholder__content {
  text-align: center; max-width: 420px;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.form-placeholder__content h3 {
  font-family: var(--font-display); font-size: 2.6rem;
  color: var(--gray-400); margin: 0;
}
.form-placeholder__content p {
  font-size: 1.5rem; color: var(--gray-400); line-height: 1.6; margin: 0;
}
.form-placeholder__steps {
  display: flex; flex-direction: column; gap: 0.75rem;
  text-align: left; margin-top: 0.75rem;
  list-style: disc; padding-left: 1.25rem;
}
.form-placeholder__steps span {
  font-size: 1.35rem; color: var(--gray-400); line-height: 1.5;
  display: list-item;
}
.form-placeholder__steps em { color: var(--blue-600); font-style: normal; font-weight: 600; }

/* ── Form Top Bar ── */
/* ── Form Tab Bar ── */
.form-tab-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center;
  gap: 0.75rem; flex-wrap: wrap;
  background: var(--white);
  border-bottom: 2px solid var(--gray-200);
  /* Full-bleed across the form's padding — derived from it, never re-typed. */
  margin: calc(-1 * var(--form-pad-top, 1.75rem)) calc(-1 * var(--form-pad-x, 2rem)) 1.25rem;
  padding: 0.5rem var(--form-pad-x, 2rem);
  max-width: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.form-tabs {
  display: flex; gap: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.form-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 0.65rem 1.15rem;
  border: none; background: none;
  font-size: 0.82rem; font-weight: 600; color: var(--gray-400);
  border-bottom: 2.5px solid transparent; margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s; white-space: nowrap; cursor: pointer;
}
.form-tab:hover { color: var(--gray-700); }
.form-tab.active { color: var(--blue-800); border-bottom-color: var(--blue-800); }
.form-tab svg { display: block; flex-shrink: 0; }
.form-tab-bar__actions {
  display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
  margin-left: auto;
  flex-shrink: 0;
}
.form-tab-panel { display: flex; flex-direction: column; gap: 1.25rem; padding-top: 1.25rem; }
.form-tab-panel.hidden { display: none; }

/* kept for any legacy references */
.form-top-bar { display: none; }
.form-top-bar__actions { display: none; }

/* ── Delete Button ── */
.btn--danger {
  background: #dc3545; color: var(--white);
  display: flex; align-items: center; gap: 0.35rem;
}
.btn--danger:hover { background: #c82333; }

/* ── Confirmation Modal ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.15s ease;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 2rem; max-width: 400px; width: 90%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  text-align: center;
}
.modal-box h3 {
  font-family: var(--font-display); font-size: 1.35rem;
  color: var(--gray-900); margin: 0 0 0.5rem;
}
.modal-box p {
  font-size: 0.9rem; color: var(--gray-500);
  line-height: 1.5; margin: 0 0 1.5rem;
}
.modal-actions {
  display: flex; gap: 0.75rem; justify-content: center;
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}

/* ─────────── EVENT FORM ─────────── */
.event-form {
  --form-pad-x: 2rem;
  --form-pad-top: 1.75rem;
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--form-pad-top) var(--form-pad-x);
  display: flex; flex-direction: column; gap: 0;
  overflow: hidden;
}
.section-heading {
  font-family: var(--font-display); font-size: 1.25rem; color: var(--blue-800);
  border-bottom: 2px solid var(--blue-100); padding-bottom: 0.5rem;
}

/* ── Fields ── */
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label, .field legend {
  font-size: 0.8rem; font-weight: 600; color: var(--gray-700);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.field label small { text-transform: none; font-weight: 400; color: var(--gray-400); letter-spacing: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

input[type="text"], input[type="tel"], input[type="date"], textarea, .event-form select {
  padding: 0.6rem 0.75rem; border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm); background: var(--gray-50);
  color: var(--gray-900); transition: var(--transition);
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--blue-600);
  background: var(--white); box-shadow: 0 0 0 3px rgba(19,90,153,.12);
}
textarea { resize: vertical; min-height: 72px; }

/* ── Chip Checkboxes ── */
fieldset.field, .dynamic-section {
  padding: 0.85rem 1rem 0.75rem;
  margin: 0;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
}
fieldset.field legend, .dynamic-section legend {
  padding: 0 0.4rem;
}

.field--school {
  display: flex; flex-direction: column; justify-content: flex-end;
}
.field--prep-materials {
  margin-top: 0.85rem;
}
.field-row--prep-notes {
  align-items: stretch;
  margin-top: 0.85rem;
}
.field-row--prep-notes .field--prep-materials {
  margin-top: 0;
}
.field--admin-notes {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.4rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: #f8fafc;
  min-height: 100%;
}
.field--admin-notes.hidden { display: none; }
.admin-notes-launch {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--blue-800);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-notes-launch:hover {
  border-color: var(--blue-700);
  box-shadow: 0 1px 4px rgba(10, 49, 97, 0.12);
}
.admin-notes-launch__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.admin-notes-launch__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--blue-800);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}
.admin-notes-launch__count.hidden { display: none; }
.admin-notes-launch-hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--gray-500);
  line-height: 1.35;
}
.admin-notes-modal {
  max-width: 36rem;
  width: min(94vw, 36rem);
}
.admin-notes-modal__lead {
  margin: 0 0 0.85rem;
  font-size: 0.85rem;
  color: var(--gray-500);
  line-height: 1.4;
}
.admin-notes-list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 40vh;
  overflow: auto;
}
.admin-notes-list:empty { display: none; }
.admin-notes-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: #f8fafc;
  width: 100%;
  box-sizing: border-box;
}
.admin-notes-item__body {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
.admin-notes-item__text {
  display: block;
  width: 100%;
  margin: 0;
  font-size: 0.88rem;
  color: var(--gray-900);
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.admin-notes-item__meta {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.68rem;
  color: var(--gray-400);
}
.admin-notes-item__remove {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--gray-400);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.1rem 0.25rem;
}
.admin-notes-item__remove:hover { color: #b91c1c; }
.admin-notes-empty {
  margin: 0 0 0.85rem;
  font-size: 0.85rem;
  color: var(--gray-400);
}
.admin-notes-empty.hidden { display: none; }
.admin-notes-compose__label {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
}
.admin-notes-compose__input {
  width: 100%;
  resize: vertical;
  min-height: 4.5rem;
  margin-bottom: 0.65rem;
}
.admin-notes-compose__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.admin-notes-compose__actions .admin-notes-email-now {
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}
.admin-notes-email-now__hint {
  font-size: 0.68rem;
  color: var(--gray-400);
  line-height: 1.2;
  padding-left: 0.1rem;
}
.admin-notes-email-now__hint.hidden { display: none; }
@media (max-width: 720px) {
  .field-row--prep-notes { grid-template-columns: 1fr; }
}

.prep-materials-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  float: none;
  max-width: calc(100% - 0.5rem);
  padding: 0 0.15rem 0 0.4rem;
}
.prep-materials-legend__title {
  font: inherit;
  color: inherit;
  white-space: nowrap;
}
.prep-materials-btn {
  flex-shrink: 0;
  padding: 0.2rem 0.5rem !important;
  font-size: 0.7rem !important;
  gap: 0.28rem;
  margin-left: 0.15rem;
}
.prep-materials-body {
  min-height: 1.35rem;
}
.prep-materials-thumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  width: 100%;
}
.prep-materials-thumbs.is-empty { display: none; }
.prep-materials-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--gray-500);
  line-height: 1.35;
}
.prep-materials-hint.is-hidden { display: none; }
.prep-mat-thumb {
  position: relative;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  background: #f8fafc;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-700);
  flex-shrink: 0;
}
.prep-mat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prep-mat-thumb__icon { display: inline-flex; }
.prep-mat-thumb__remove {
  position: absolute;
  top: 1px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 11px;
  line-height: 14px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.prep-mat-thumb:hover .prep-mat-thumb__remove { opacity: 1; }

.prep-mat-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 13.5rem;
  height: 1.85rem;
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  background: #f8fafc;
  overflow: hidden;
  flex-shrink: 0;
}
.prep-mat-link__body {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  padding: 0 1.05rem 0 0.12rem;
  text-decoration: none;
  color: var(--blue-700);
}
.prep-mat-link__body:hover .prep-mat-link__url { text-decoration: underline; }
.prep-mat-link__thumb {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
  background: #e2e8f0;
}
.prep-mat-link__thumb--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-700);
}
.prep-mat-link__url {
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.prep-mat-link__remove {
  position: absolute;
  top: 1px;
  right: 2px;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 11px;
  line-height: 14px;
  text-align: center;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.prep-mat-link:hover .prep-mat-link__remove { opacity: 1; }
.prep-link-modal { max-width: 26rem; }
.prep-link-modal__lead {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  color: var(--gray-700);
  line-height: 1.4;
}
.prep-link-modal__actions { margin-bottom: 0.85rem; }
.prep-link-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 1rem;
}
.prep-link-modal__field input { font-weight: 400; }

.edm-date-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  position: relative;
}
.edm-date-block .edm-date { margin: 0; }
.edm-date-tools {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.edm-prep-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.edm-prep-wrap.hidden { display: none; }
.edm-prep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.16);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.edm-prep-btn:hover,
.edm-prep-btn[aria-expanded="true"] {
  background: rgba(255,255,255,0.28);
  border-color: rgba(255,255,255,0.55);
}
.edm-prep-popover {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 40;
  width: min(15.5rem, calc(100vw - 2.5rem));
  max-height: 12.5rem;
  overflow: auto;
  padding: 0.45rem 0.5rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--gray-200, #e5e7eb);
  background: #fff;
  box-shadow: 0 8px 22px rgba(10, 49, 97, 0.18);
  color: var(--blue-800, #0a3161);
}
.edm-prep-popover.hidden { display: none; }
.edm-prep-popover__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--gray-100, #f3f4f6);
}
.edm-prep-popover__title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gray-500, #6b7280);
}
.edm-prep-popover__close {
  border: none;
  background: transparent;
  color: var(--gray-400, #9ca3af);
  font-size: 1.05rem;
  line-height: 1;
  padding: 0 0.15rem;
  cursor: pointer;
}
.edm-prep-popover__close:hover { color: var(--blue-800, #0a3161); }
.edm-prep-materials {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  margin: 0;
  max-width: 100%;
}
.edm-prep-thumb {
  width: 100%;
  min-height: 1.85rem;
  height: auto;
  border-radius: 5px;
  border: 1px solid var(--gray-200, #e5e7eb);
  background: #f8fafc;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  padding: 0.2rem 0.4rem 0.2rem 0.25rem;
  color: var(--blue-700, #1d4ed8);
  flex-shrink: 0;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 600;
}
.edm-prep-thumb img {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 3px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.edm-prep-thumb__icon { display: inline-flex; flex-shrink: 0; }
.edm-prep-thumb--youtube {
  background: #fff5f5;
  border-color: #fecaca;
  color: #b91c1c;
}
.edm-prep-thumb--youtube svg { display: block; }
.edm-prep-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 1.85rem;
  padding: 0.2rem 0.4rem 0.2rem 0.2rem;
  border-radius: 5px;
  border: 1px solid var(--gray-200, #e5e7eb);
  background: #f8fafc;
  color: var(--blue-800, #0a3161);
  text-decoration: none;
  overflow: hidden;
  flex-shrink: 0;
}
.edm-prep-link:hover .edm-prep-link__url { text-decoration: underline; }
.edm-prep-link__thumb {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--gray-100, #f3f4f6);
}
.edm-prep-link__thumb--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-700, #1d4ed8);
}
.edm-prep-link__url {
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  color: inherit;
}

/* Prep media viewer — sits above the event detail modal */
.prep-media-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.prep-media-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.prep-media-overlay__stage {
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prep-media-overlay__img,
.prep-media-overlay__video {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  background: #000;
  object-fit: contain;
}
.prep-media-overlay__video {
  width: min(92vw, 960px);
  outline: none;
}
.prep-media-overlay__close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  z-index: 1;
}
.prep-media-overlay__close:hover { opacity: 1; }

.checkbox-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.chip-check { position: relative; }
.chip-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-check span {
  display: inline-block; padding: 0.4rem 1rem;
  border: 1.5px solid var(--gray-300); border-radius: 999px;
  font-size: 0.85rem; font-weight: 500; color: var(--gray-500);
  cursor: pointer; transition: var(--transition); user-select: none;
}
.chip-check input:checked + span { background: var(--green-600); color: var(--white); border-color: var(--green-600); }
.chip-check span:hover { border-color: var(--green-500); }

/* ── Dynamic Sections ── */
.dynamic-section legend {
  font-size: 0.8rem; font-weight: 600; color: var(--gray-700);
  text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 0.5rem;
}
.dynamic-rows { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.65rem; }

.dynamic-row {
  display: flex; align-items: center; gap: 0.5rem;
  animation: fadeSlideIn 0.25s ease;
}
.dynamic-row input[type="text"],
.dynamic-row input[type="tel"] {
  flex: 1 1 0; min-width: 0; padding: 0.5rem 0.65rem;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  background: var(--gray-50); font-size: 0.9rem; transition: var(--transition);
}

.btn-remove-row {
  width: 20px; height: 20px; border: none; font-size: 0.7rem;
  background: var(--red-50); color: var(--red-500); border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 1.1rem; font-weight: 700; transition: var(--transition);
  flex-shrink: 0; line-height: 1;
}
.btn-remove-row:hover { background: var(--red-500); color: var(--white); }

/* ═══════════ TIME PICKER ═══════════ */
.time-picker {
  display: flex; align-items: center; gap: 2px;
  background: var(--gray-50); border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm); padding: 2px; flex-shrink: 0;
  transition: var(--transition);
}
.time-picker:focus-within {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(19,90,153,.12);
}
.time-picker select {
  border: none; background: transparent; color: var(--gray-900);
  font-size: 0.88rem; font-weight: 600;
  padding: 0.4rem 0.1rem 0.4rem 0.4rem;
  cursor: pointer; appearance: none; -webkit-appearance: none;
  text-align: center; min-width: 38px;
}
.time-picker select:focus { outline: none; }

.tp-range-sep {
  font-weight: 700; color: var(--gray-400); font-size: 0.95rem;
  line-height: 1; user-select: none; flex-shrink: 0; padding: 0 1px;
}
/* Give the detail field a smaller floor so both time pickers fit on one row. */
.schedule-row input[type="text"] { min-width: 80px; }
.schedule-col-labels {
  display: flex; gap: 0.5rem; margin-bottom: 0.35rem;
  padding-left: 24px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--gray-400);
}
.schedule-col-labels span:nth-child(1),
.schedule-col-labels span:nth-child(2) { width: 108px; flex-shrink: 0; }
.schedule-col-labels span:nth-child(2) { margin-left: 6px; }
.schedule-col-labels span:nth-child(3) { flex: 1; }

/* Schedule groups overview + block layout */
.schedule-groups-bar { margin-bottom: 0.45rem; }
.schedule-groups-toggle {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; font-weight: 600; color: var(--gray-700); cursor: pointer; user-select: none;
}
.schedule-groups-toggle input { accent-color: var(--blue-700); }
.schedule-groups-overview { margin-bottom: 0.55rem; }
.schedule-groups-grid {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.schedule-groups-card {
  flex: 1 1 140px; max-width: 220px;
  padding: 0.4rem 0.55rem; border-radius: 8px;
  border: 1px solid var(--gray-200); background: var(--gray-50);
  font-size: 0.72rem; line-height: 1.35;
}
.schedule-groups-card--usl { border-color: #9fa8da; background: #eef0fb; }
.schedule-groups-card__title { font-weight: 700; color: var(--blue-800); font-size: 0.75rem; }
.schedule-groups-card__meta { color: var(--gray-500); margin-top: 0.1rem; }
.schedule-groups-card__names { color: var(--gray-700); margin-top: 0.15rem; }

.schedule-block {
  display: flex; flex-direction: column; gap: 0.2rem;
  border-radius: 8px; padding: 0.15rem 0;
}
.schedule-block.row-dragging { opacity: 0.55; }
.schedule-block__body { padding-left: 1.65rem; display: flex; flex-direction: column; gap: 0.25rem; }
.schedule-mode-toggle {
  display: inline-flex; gap: 0.15rem; flex-shrink: 0;
  background: var(--gray-100); border-radius: 6px; padding: 1px 2px;
  border: 1px solid var(--gray-200);
}
.schedule-mode-opt {
  display: inline-flex; align-items: center; gap: 0.12rem;
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  color: var(--gray-500); cursor: pointer; padding: 0.12rem 0.28rem; border-radius: 4px;
  letter-spacing: 0.02em; user-select: none;
}
.schedule-mode-opt:has(input:checked) { background: white; color: var(--blue-700); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.schedule-mode-opt input { margin: 0; width: 0.65rem; height: 0.65rem; accent-color: var(--blue-700); }
.schedule-detail-input.hidden { display: none; }
.schedule-group-lines {
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.45rem;
}
.schedule-group-lines.hidden { display: none; }
.schedule-group-line {
  display: inline-flex; align-items: center; gap: 0.25rem; flex: 1 1 160px; min-width: 0;
}
.schedule-group-line__label {
  flex-shrink: 0; font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  color: var(--blue-700); background: var(--blue-50); padding: 0.12rem 0.35rem; border-radius: 4px;
  min-width: 2.4rem; text-align: center;
}
.schedule-group-line input {
  flex: 1; min-width: 0; padding: 0.28rem 0.45rem; font-size: 0.78rem;
  border: 1px solid var(--gray-200); border-radius: 5px; background: white;
}
.schedule-subtimes { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.25rem; }
.schedule-subtime-row {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.35rem 0.4rem 0.4rem 0.55rem;
  border-left: 2px solid var(--gray-200);
  background: var(--gray-50);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.schedule-subtime-row__main {
  display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
}
.schedule-subtime-row .time-picker { gap: 0; padding: 1px; }
.schedule-subtime-row .time-picker select {
  min-width: 28px; padding: 0.3rem 0.05rem 0.3rem 0.15rem; font-size: 0.78rem;
}
.schedule-subtime-row .schedule-detail-input {
  flex: 1; min-width: 8rem; padding: 0.35rem 0.5rem; font-size: 0.82rem;
  border: 1px solid var(--gray-200); border-radius: var(--radius-sm); background: #fff;
}
.schedule-subtime-row .schedule-group-lines {
  margin-left: 0.15rem;
}
.schedule-add-sub-btn {
  flex-shrink: 0; padding: 0.15rem 0.4rem !important; font-size: 0.65rem !important;
  line-height: 1.2; min-height: 0;
}
.schedule-line--sub { padding-left: 1rem; opacity: 0.92; }
.schedule-line--sub .schedule-line__time { min-width: 70px; font-size: 0.8rem; }
.edm-schedule-sub { padding-left: 1rem; opacity: 0.9; }
.edm-schedule-sub .edm-time { font-size: 0.85em; }

/* Drag handle for reordering schedule rows */
.row-drag-handle {
  flex-shrink: 0; width: 18px; display: grid; place-items: center;
  color: var(--gray-400); cursor: grab; border-radius: var(--radius-sm);
  transition: var(--transition); align-self: stretch;
}
.row-drag-handle:hover { color: var(--gray-900); background: var(--gray-100); }
.row-drag-handle:active { cursor: grabbing; }
.schedule-row.row-dragging { opacity: 0.5; }

.schedule-row .time-picker { gap: 0; padding: 1px; }
.schedule-row .time-picker select { min-width: 30px; padding: 0.4rem 0.05rem 0.4rem 0.2rem; }

.tp-sep {
  font-weight: 700; color: var(--gray-400); font-size: 0.9rem;
  line-height: 1; user-select: none;
}
.tp-ampm {
  background: var(--blue-50) !important; border-radius: 4px;
  color: var(--blue-700) !important; font-size: 0.78rem !important;
  font-weight: 700 !important; padding: 0.4rem 0.35rem !important;
  min-width: 42px !important;
}

/* ── Thumbnail Placeholder ── */
.thumbnail-placeholder {
  border: 2px dashed var(--gray-300); border-radius: var(--radius-md);
  padding: 1.25rem; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  color: var(--gray-400); gap: 0.5rem; min-height: 160px;
  background: var(--gray-50); transition: var(--transition);
  overflow: hidden;
}
.thumbnail-placeholder:hover { border-color: var(--blue-600); }
.thumbnail-placeholder p { font-size: 0.85rem; line-height: 1.4; }
.thumbnail-placeholder small { opacity: 0.7; }

/* ── Publish Toggle ── */
/* ── Multi-day toggle pill ── */
.end-date-label { display: flex; align-items: center; gap: 0.45rem; }
.multiday-toggle {
  width: 32px; height: 18px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--gray-300); position: relative; flex-shrink: 0; transition: background 0.22s;
  padding: 0;
}
.multiday-toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%; background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform 0.22s;
}
.multiday-toggle[aria-pressed="true"] { background: var(--green-600); }
.multiday-toggle[aria-pressed="true"]::after { transform: translateX(14px); }
#event-end-date:disabled { opacity: 0.35; cursor: not-allowed; }

.publish-toggle { display: flex; align-items: center; gap: 0.65rem; cursor: pointer; user-select: none; }
.publish-toggle input { display: none; }
.toggle-track {
  width: 46px; height: 26px; border-radius: 999px;
  background: var(--gray-300); position: relative; transition: background 0.3s ease;
}
.toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; background: var(--white);
  border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform 0.3s ease;
}
.publish-toggle input:checked ~ .toggle-track { background: var(--green-600); }
.publish-toggle input:checked ~ .toggle-track .toggle-thumb { transform: translateX(20px); }
.toggle-label { font-size: 0.85rem; font-weight: 600; color: var(--gray-700); }

/* ── Form Actions ── */
.form-actions { display: none; } /* moved into form-tab-bar */
.form-actions__buttons { display: none; }

/* ─────────── BUTTONS ─────────── */
.btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.25rem; border: none; border-radius: var(--radius-sm);
  font-size: 0.875rem; font-weight: 600; transition: var(--transition);
}
.btn--primary { background: var(--blue-800); color: var(--white); }
.btn--primary:hover { background: var(--blue-700); }
.btn--ghost { background: transparent; color: var(--gray-500); border: 1.5px solid var(--gray-200); }
.btn--ghost:hover { border-color: var(--gray-400); color: var(--gray-700); }
.btn--outline { background: transparent; color: var(--blue-600); border: 1.5px dashed var(--blue-100); }
.btn--outline:hover { background: var(--blue-50); border-color: var(--blue-600); }
.btn--sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; }

/* ═══════════ PUBLIC VIEW ═══════════ */
#view-public.view { padding-top: 0.65rem; }
.public-feed { max-width: 1140px; margin: 0 auto; }

/* ── Public LOTC overview + category chart ── */
.pub-cal-layout {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 260px);
  gap: 1rem;
  align-items: start;
}
.pub-cal-main { min-width: 0; }
.pub-lotc-overview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0.45rem 0.65rem;
}
.pub-lotc-month {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 0.4rem 0.45rem 0.45rem;
  box-shadow: var(--shadow-sm);
}
.pub-lotc-month__title {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--blue-800);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
}
.pub-lotc-month__events {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.pub-lotc-event {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  cursor: pointer;
  font-size: 0.62rem;
  line-height: 1.25;
  padding: 0.18rem 0.35rem;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pub-lotc-event:hover { filter: brightness(1.08); }
.pub-lotc-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--gray-400);
  font-size: 0.88rem;
  padding: 1.5rem 1rem;
  margin: 0;
}
.pub-cal-chart {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 0.75rem 0.65rem 0.5rem;
  position: sticky;
  top: 90px;
}
.pub-cal-chart__title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--blue-800);
}
.pub-cal-chart__sub {
  margin: 0.15rem 0 0.5rem;
  font-size: 0.68rem;
  color: var(--gray-400);
}
.chart-wrap--pub-category { height: 240px; min-height: 240px; }
.chart-wrap--empty::after {
  content: "No events to chart";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  color: var(--gray-400);
}

@media (max-width: 860px) {
  .pub-cal-layout { grid-template-columns: 1fr; }
  .pub-cal-chart { position: static; }
  .pub-lotc-overview { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ── Sub Tabs + Filters toolbar ── */
/* Panels fill in from Firestore after the tab is shown. Scroll anchoring
   treats that late content as a reason to keep the previous view stable, which
   nudged a freshly opened tab down so its heading sat under the sticky bars.
   These panels open at the top by design and never need anchoring. */
.subtab-panel, .subtab-panel * { overflow-anchor: none; }

.pub-toolbar {
  /* Pinned under the (also sticky) top bar so the tabs never scroll away.
     --topbar-h is measured in JS, since the bar's height changes with the
     breakpoint and with whether the title wraps. */
  position: sticky;
  top: var(--topbar-h, 64px);
  z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: nowrap;
  margin-bottom: 0.85rem;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--gray-200);
  background: var(--page-bg);
}
.pub-toolbar__right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  flex-shrink: 0;
  min-width: 0;
}
.usl-cal-sync-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  padding: 0.35rem 0.75rem;
  border: 1.5px solid var(--blue-600);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--blue-700);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.usl-cal-sync-btn:hover {
  background: #eff6ff;
  border-color: var(--blue-700);
  color: var(--blue-800);
}
.usl-cal-sync-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}
.usl-cal-sync-btn svg { display: block; flex-shrink: 0; }
.usl-cal-feed-modal { max-width: 32rem; }
.usl-cal-feed-modal__google-one-tap {
  display: flex;
  width: 100%;
  justify-content: center;
  margin: 0.15rem 0 0.55rem;
  text-decoration: none;
  box-sizing: border-box;
}
.usl-cal-feed-modal__one-tap-hint {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  color: var(--gray-700);
  line-height: 1.4;
}
.usl-cal-feed-modal__lead {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--gray-700);
  line-height: 1.45;
}
.usl-cal-feed-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 1rem;
}
.usl-cal-feed-modal__field input {
  font-weight: 400;
  font-size: 0.82rem;
}
.usl-cal-feed-modal__actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}
.usl-cal-feed-modal__hint {
  margin: 0.85rem 0 0;
  font-size: 0.78rem;
  color: var(--gray-400);
  line-height: 1.4;
}

.sub-tabs {
  display: flex; gap: 0;
  margin-bottom: 0; border-bottom: none;
  flex-shrink: 0;
}
.sub-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 0.45rem 1rem; border: none; background: none;
  font-size: 0.85rem; font-weight: 700; color: var(--gray-400);
  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: var(--transition);
}
.sub-tab:hover { color: var(--gray-700); }
.sub-tab.active { color: var(--blue-800); border-bottom-color: var(--blue-800); }
.sub-tab svg { display: block; }

/* Badge on My Signups tab */
.subtab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--green-700); color: white;
  font-size: 0.65rem; font-weight: 700; border-radius: 999px;
  margin-left: 2px;
}

/* My Signups panel */
.my-signups { padding: 0.5rem 0; }

/* Driver record box (My Signups) */
.driver-record-box { margin-top: 1rem; }
.driver-record-box + .driver-record-box { margin-top: 0.75rem; }
.driver-record-box:empty { display: none; }
.driver-record {
  border: 1px solid var(--gray-200); background: white;
  border-radius: var(--radius-md); padding: 1rem 1.1rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 1rem;
}
.driver-record--incomplete {
  border-color: #f0c14a;
  background: #fff8e1;
}
.driver-record--incomplete .driver-record__icon {
  background: #fef3c7;
  color: #b45309;
}
.driver-record--approved { border-color: var(--green-700); background: #f2fbf4; }
.driver-record__head { display: flex; align-items: flex-start; gap: 0.7rem; flex: 1 1 260px; min-width: 240px; }
.driver-record__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%; background: var(--green-50, #eef7f0); color: var(--green-700);
}
.driver-record__text { min-width: 0; }
.driver-record__title { margin: 0 0 0.15rem; font-size: 0.95rem; font-weight: 700; color: var(--gray-800, #1f2937); }
.driver-record__desc { margin: 0; font-size: 0.8rem; line-height: 1.4; color: var(--gray-500, #6b7280); }
.driver-record__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.45rem; }
.driver-record__link { white-space: nowrap; }
.driver-record__status {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; font-weight: 600; border-radius: 999px;
  padding: 0.2rem 0.6rem;
}
.driver-record__status--ok { color: var(--green-700); background: #e5f6e9; }
.driver-record__status--pending { color: #92400e; background: #fde68a; }

/* User Access — driver record column */
.ua-driverrec { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; cursor: pointer; }
.ua-driverrec input { cursor: pointer; width: 15px; height: 15px; }
.ua-driverrec__label { color: var(--gray-500, #6b7280); white-space: nowrap; }
.ua-driverrec input:checked + .ua-driverrec__label { color: var(--green-700); font-weight: 600; }
.ua-driverrec--na { color: var(--gray-300, #d1d5db); cursor: default; }
.my-signups__list { display: flex; flex-direction: column; gap: 1rem; }
.my-signups__empty {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 3rem 1rem; color: var(--gray-400); text-align: center;
}
.my-signups__empty svg { opacity: 0.4; }
.my-signups__empty p { margin: 0; font-size: 0.9rem; }
.my-signups__cta { font-size: 0.82rem !important; color: var(--gray-400); }

/* ── USL Feedback tab ── */
.usl-feedback {
  max-width: 40rem;
  padding: 0.75rem 0 2rem;
}
.usl-feedback__intro {
  margin: 0 0 1.1rem;
  color: var(--gray-700);
  font-size: 0.92rem;
  line-height: 1.45;
}
.usl-feedback__form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: #fff;
}
.usl-feedback__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-700);
}
.usl-feedback__field select,
.usl-feedback__field textarea {
  font: inherit;
  font-weight: 400;
  color: var(--gray-900);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.65rem;
  background: #fff;
}
.usl-feedback__field textarea {
  resize: vertical;
  min-height: 7rem;
  line-height: 1.45;
}
.usl-feedback__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.usl-feedback__hint {
  font-size: 0.82rem;
  color: var(--gray-500);
  font-weight: 400;
}
.usl-feedback__mine {
  margin-top: 1.5rem;
}
.usl-feedback__mine-title {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  color: var(--gray-900);
}
.usl-feedback__mine-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.usl-feedback__empty {
  margin: 0;
  color: var(--gray-400);
  font-size: 0.88rem;
}
.usl-feedback-note {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--gray-50);
}
.usl-feedback-note header {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  color: var(--gray-500);
}
.usl-feedback-note__topic {
  font-weight: 600;
  color: var(--blue-800);
}
.usl-feedback-note p {
  margin: 0;
  white-space: pre-wrap;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--gray-900);
}

/* ── Admin Feedback inbox ── */
.admin-feedback-panel {
  padding: 1rem 1.25rem 2rem;
}
.admin-feedback__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.admin-feedback__subtitle {
  margin: 0.35rem 0 0;
  color: var(--gray-500);
  font-size: 0.88rem;
}
.admin-feedback__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 52rem;
}
.admin-feedback__empty {
  margin: 0;
  color: var(--gray-400);
  font-size: 0.9rem;
  padding: 1.5rem 0;
}
.admin-feedback-card {
  padding: 0.9rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: #fff;
}
.admin-feedback-card header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}
.admin-feedback-card__email {
  display: block;
  font-size: 0.8rem;
  color: var(--gray-500);
  font-weight: 400;
}
.admin-feedback-card__meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.78rem;
  color: var(--gray-500);
}
.admin-feedback-card__topic {
  font-weight: 600;
  color: var(--blue-800);
}
.admin-feedback-card p {
  margin: 0 0 0.65rem;
  white-space: pre-wrap;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--gray-900);
}
.admin-feedback__filters {
  margin: 0 0 1rem;
}
.admin-feedback-card__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.my-signup-card {
  display: flex; flex-direction: column; align-items: stretch;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200); background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  overflow: hidden;
}
.my-signup__toolbar {
  display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--gray-200);
  background: var(--white);
}
.my-signup__feed {
  padding: 0.65rem;
  background: var(--gray-50);
}
.my-signup__feed .pub-accordion-item {
  width: 100%;
}
.my-signup__loading { font-size: 0.82rem; color: var(--gray-400); font-style: italic; }
.my-signup__role {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 0.25rem 0.65rem; border-radius: 999px; white-space: nowrap;
}
.my-signup__role--driver  { background: #dcfce7; color: var(--green-700); }
.my-signup__role--chap    { background: #f1f5f9; color: var(--gray-500); }
.my-signup__seats-wrap {
  display: flex; align-items: center; gap: 0.4rem; white-space: nowrap;
}
.my-signup__seats-label { font-size: 0.75rem; font-weight: 600; color: var(--gray-500); }
.my-signup__seats-input {
  width: 52px; padding: 0.25rem 0.4rem;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  font-size: 0.82rem; text-align: center; background: var(--gray-50);
}
.my-signup__seats-input:focus { outline: none; border-color: var(--blue-600); background: white; }
.my-signup__seats-save { padding: 0.25rem 0.6rem !important; font-size: 0.75rem !important; }
.my-signup__gcal {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.28rem 0.65rem;
  border: 1.5px solid var(--green-600);
  border-radius: var(--radius);
  background: #ecfdf5;
  color: var(--green-700);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition);
}
.my-signup__gcal:hover {
  background: #d1fae5;
  border-color: var(--green-700);
  color: var(--green-800);
}
.my-signup__cancel {
  font-size: 0.75rem; font-weight: 600;
  color: var(--gray-400); background: none; border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm); padding: 0.25rem 0.65rem; cursor: pointer;
  transition: var(--transition); white-space: nowrap;
  position: relative; z-index: 2; flex-shrink: 0;
}
.my-signup__cancel:hover { color: #dc2626; border-color: #fca5a5; background: #fff5f5; }

/* ── Public Filters (inline right of sub-tabs) ── */
.pub-filters {
  display: flex; gap: 0.5rem 0.65rem; align-items: center; flex-wrap: nowrap;
  margin-left: 0;
  margin-bottom: 0; padding: 0;
  background: transparent; border: none; border-radius: 0;
  flex-shrink: 1;
  min-width: 0;
}
.pub-filter-group {
  display: flex; align-items: center; gap: 0.25rem;
}
.pub-filter-label {
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--gray-400); margin-right: 0.1rem;
}
.pub-filter-btn {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  padding: 0.18rem 0.5rem; border-radius: 999px;
  border: 1.5px solid var(--gray-200); background: var(--white);
  color: var(--gray-400); cursor: pointer; transition: var(--transition);
}
.pub-filter-btn:hover { border-color: var(--blue-400); color: var(--blue-600); }
.pub-filter-btn.active {
  background: var(--blue-600); color: var(--white);
  border-color: var(--blue-600);
}
.pub-filter-select {
  font-size: 0.72rem; padding: 0.22rem 0.45rem;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  background: var(--white); color: var(--gray-700); cursor: pointer;
  max-width: 150px;
}
.pub-filter-select:focus { border-color: var(--blue-400); outline: none; }

/* ── Category Colors ── */
.cat-civic          { --cat-bg: #E3F2FD; --cat-fg: #1565C0; --cat-border: #1565C0; }
.cat-service        { --cat-bg: #FFF3E0; --cat-fg: #E65100; --cat-border: #E65100; }
.cat-cultural       { --cat-bg: #F3E5F5; --cat-fg: #7B1FA2; --cat-border: #7B1FA2; }
.cat-history        { --cat-bg: #FBE9E7; --cat-fg: #BF360C; --cat-border: #BF360C; }
.cat-nature         { --cat-bg: #E8F5E9; --cat-fg: #2E7D32; --cat-border: #2E7D32; }
.cat-career         { --cat-bg: #E0F7FA; --cat-fg: #00838F; --cat-border: #00838F; }
.cat-stem           { --cat-bg: #FFF8E1; --cat-fg: #F9A825; --cat-border: #F9A825; }

/* ── Category Badge ── */
.category-badge {
  font-size: 0.65rem; font-weight: 600;
  padding: 0.15rem 0.55rem; border-radius: 999px;
  background: var(--cat-bg, var(--blue-50));
  color: var(--cat-fg, var(--blue-600));
  white-space: nowrap; flex-shrink: 0;
}

/* ── Feed Cards (Accordion) ── */
.public-cards { display: flex; flex-direction: column; gap: 0.5rem; }

/* Fixed compact feed cards — square thumb sets height; no stretch below summary */
.pub-accordion-item {
  --pub-feed-card-height: 7.25rem;
  --pub-feed-thumb-size: var(--pub-feed-card-height);
  display: flex;
  align-items: stretch;
  height: var(--pub-feed-card-height);
  min-height: var(--pub-feed-card-height);
  max-height: var(--pub-feed-card-height);
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--cat-border, var(--blue-600));
  overflow: hidden;
}
.pub-feed-thumb {
  flex: 0 0 var(--pub-feed-thumb-size);
  width: var(--pub-feed-thumb-size);
  height: var(--pub-feed-thumb-size);
  aspect-ratio: 1 / 1;
  align-self: stretch;
  background: var(--gray-100);
  cursor: pointer;
  overflow: hidden;
}
.pub-feed-thumb--empty {
  cursor: default;
  background: linear-gradient(145deg, var(--gray-100), var(--gray-200));
}
.pub-feed-thumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 1 / 1;
  transition: transform 0.2s ease;
}
.pub-feed-thumb:hover .pub-feed-thumb__img {
  transform: scale(1.03);
}
.pub-feed-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pub-accordion-item .pub-card-header {
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: none;
  flex-shrink: 0;
  flex-wrap: nowrap;
  padding: 0.4rem 0.55rem 0.1rem;
  gap: 0.2rem;
}
.pub-accordion-item .pub-feed-header {
  width: 100%;
  min-width: 0;
}
.pub-accordion-item .event-photos-strip { display: none; }
.pub-accordion-item .pub-card-header__title {
  font-family: var(--font-display);
  font-weight: 700;
}
.pub-accordion-item .pub-card-header__date {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--blue-800);
}
.pub-accordion-item .pub-card {
  border: none;
  border-radius: 0;
  box-shadow: none;
  animation: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
}
.pub-accordion-item .pub-card__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  padding: 0 0.55rem 0.4rem;
}
.pub-accordion-item .pub-card__body > * { min-height: 0; }
.pub-accordion-item .pub-card__summary {
  margin: 0;
  font-size: 1.17rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
@media (min-width: 641px) {
  .pub-accordion-item {
    --pub-feed-card-height: 8rem;
    height: auto;
    max-height: none;
    min-height: var(--pub-feed-card-height);
  }
  .pub-accordion-item .pub-feed-thumb {
    align-self: flex-start;
  }
  .pub-accordion-item .pub-feed-header__title-row {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    font-size: 1.23rem;
    line-height: 1.2;
    gap: 0;
  }
  .pub-accordion-item .pub-feed-header__meta {
    display: contents;
  }
  .pub-accordion-item .pub-feed-header__title-gap {
    flex: 0 0 0.75em;
    width: 0.75em;
    min-width: 0.75em;
  }
  .pub-accordion-item .pub-feed-header__title-cluster {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    flex: 0 1 auto;
  }
  .pub-accordion-item .pub-card-header__title {
    flex: 0 1 auto;
    min-width: 0;
    font-size: inherit;
    line-height: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pub-accordion-item .pub-card-header__grades {
    flex: 0 0 auto;
    margin-right: 0;
  }
  .pub-accordion-item .pub-card-header__grades .grade-badge {
    font-size: 0.52em;
    padding: 0.12em 0.42em;
  }
  .pub-accordion-item .pub-feed-header__title-row .category-badge {
    flex: 0 0 auto;
    font-size: 0.42em;
    line-height: 1.2;
  }
  .pub-accordion-item .pub-feed-header__title-row .pub-card__signup-btn {
    flex: 0 0 auto;
    font-size: 0.7em;
    padding: 0.22em 0.45em;
    margin-left: 0.35rem;
    white-space: nowrap;
  }
  .pub-accordion-item .pub-feed-header__title-row .pub-feed-cars-needed {
    font-size: 0.62em;
    padding: 0.16em 0.42em;
    margin-left: 0.25rem;
  }
  .pub-accordion-item .pub-card-header__date {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 0.5rem;
    font-size: inherit;
    line-height: inherit;
    white-space: nowrap;
  }
  .pub-accordion-item .pub-card__summary {
    font-size: 0.82rem;
    line-height: 1.4;
    -webkit-line-clamp: 4;
  }
}
@media (max-width: 640px) {
  .pub-accordion-item {
    height: auto;
    max-height: none;
    min-height: var(--pub-feed-card-height);
  }
  .pub-accordion-item .pub-feed-thumb {
    align-self: flex-start;
  }
  .pub-accordion-item .pub-card-header {
    flex-wrap: wrap;
    padding: 0.3rem 0.5rem 0.1rem;
    align-items: flex-start;
  }
  /* USL feed — short title: title + date on row 1, category + join on row 2 */
  .pub-accordion-item .pub-feed-header__title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    width: 100%;
    min-width: 0;
    font-size: 0.95rem;
    line-height: 1.2;
    gap: 0;
  }
  .pub-accordion-item .pub-feed-header__title-cluster {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
  }
  .pub-accordion-item .pub-card-header__title {
    font-size: inherit;
    line-height: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .pub-accordion-item .pub-card-header__grades {
    flex: 0 0 auto;
    margin-right: 0;
  }
  .pub-accordion-item .pub-card-header__grades .grade-badge {
    font-size: 0.52em;
    padding: 0.1em 0.36em;
  }
  .pub-accordion-item .pub-card-header__date {
    grid-column: 2;
    grid-row: 1;
    font-size: inherit;
    line-height: inherit;
    white-space: nowrap;
    margin-left: 0;
    padding-left: 0.5rem;
    align-self: start;
  }
  .pub-accordion-item .pub-feed-header__meta {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.15rem;
  }
  .pub-accordion-item .pub-feed-header__title-gap {
    display: none;
  }
  .pub-accordion-item .pub-feed-header__meta .category-badge {
    font-size: 0.42em;
    line-height: 1.2;
  }
  .pub-accordion-item .pub-feed-header__meta .pub-card__signup-btn {
    font-size: 0.35em;
    padding: 0.22em 0.45em;
    white-space: nowrap;
  }
  /* USL feed — long title: date on row 1 right, title + category + join inline below */
  .pub-accordion-item .pub-feed-header__title-row--title-wraps {
    display: block;
  }
  .pub-accordion-item .pub-feed-header__title-row--title-wraps .pub-card-header__date {
    display: block;
    text-align: right;
    padding-left: 0;
    margin-bottom: 0.1rem;
  }
  .pub-accordion-item .pub-feed-header__title-row--title-wraps .pub-feed-header__title-cluster {
    display: inline;
  }
  .pub-accordion-item .pub-feed-header__title-row--title-wraps .pub-card-header__title {
    display: inline;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .pub-accordion-item .pub-feed-header__title-row--title-wraps .pub-card-header__grades {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 0.3em;
  }
  .pub-accordion-item .pub-feed-header__title-row--title-wraps .pub-feed-header__meta {
    display: inline-flex;
    align-items: center;
    vertical-align: baseline;
    margin-top: 0;
    gap: 0;
    flex-wrap: nowrap;
  }
  .pub-accordion-item .pub-feed-header__title-row--title-wraps .pub-feed-header__title-gap {
    display: inline-block;
    flex: 0 0 0.75em;
    width: 0.75em;
    min-width: 0.75em;
  }
  .pub-accordion-item .pub-card__summary {
    font-size: 0.82rem;
    line-height: 1.35;
  }
}
/* USL page feed (signed-in) on mobile only: larger category badge + "Chaperone
   this Event" button (~30%), and a tighter card so there's less empty space
   below the text. Scoped to #public-events so the public page is unaffected. */
@media (max-width: 640px) {
  #public-events .pub-accordion-item, #events-feed .pub-accordion-item { --pub-feed-card-height: 6.25rem; }
  #public-events .pub-accordion-item .pub-feed-header__meta .category-badge,
  #events-feed .pub-accordion-item .pub-feed-header__meta .category-badge {
    font-size: 0.55em;
  }
  #public-events .pub-accordion-item .pub-feed-header__meta .pub-card__signup-btn,
  #events-feed .pub-accordion-item .pub-feed-header__meta .pub-card__signup-btn {
    font-size: 0.46em;
    padding: 0.28em 0.55em;
  }
  #public-events .pub-accordion-item .pub-feed-header__meta .pub-feed-cars-needed,
  #events-feed .pub-accordion-item .pub-feed-header__meta .pub-feed-cars-needed {
    font-size: 0.4em;
    padding: 0.2em 0.45em;
  }
}
.pub-feed-month {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem 0 0.1rem;
  margin-top: 0.15rem;
}
.pub-feed-month:first-child {
  margin-top: 0;
  padding-top: 0;
}
.pub-feed-month__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-400);
  white-space: nowrap;
}
.pub-feed-month::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}
.public-cards__empty {
  text-align: center; padding: 3rem; color: var(--gray-300);
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
}
.public-cards__empty p { font-size: 0.95rem; color: var(--gray-400); }

/* Collapsed header row */
.pub-card-header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 1rem; background: var(--white);
  border-radius: var(--radius-md) var(--radius-md) 0 0; box-shadow: var(--shadow-sm);
  transition: var(--transition); user-select: none;
  border: 1.5px solid var(--cat-border, var(--blue-600)); border-bottom: none;
}
.pub-card-header--static {
  cursor: default;
}
.pub-card-header__main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  min-width: 0;
  flex: 1;
}
.pub-card-header.open { border-color: var(--cat-border, var(--blue-600)); border-radius: var(--radius-md) var(--radius-md) 0 0; }

.pub-card-header__chevron {
  width: 20px; height: 20px; flex-shrink: 0; color: var(--gray-400);
  transition: transform 0.3s ease;
}
.pub-card-header.open .pub-card-header__chevron { transform: rotate(90deg); color: var(--cat-border, var(--blue-600)); }

.pub-card-header__title {
  font-family: var(--font-display); font-size: 1.08rem; color: var(--blue-800);
  line-height: 1.25;
}
.pub-card-header__main .category-badge {
  flex-shrink: 0;
}
.pub-card-header__grades { display: flex; gap: 0.2rem; flex-shrink: 0; align-items: center; margin-right: auto; }
.pub-card-header__grades .grade-badge {
  font-size: 0.44rem; padding: 0.08rem 0.32rem;
}
.pub-card-header__date {
  font-size: 0.78rem; font-weight: 600; color: var(--blue-600);
  white-space: nowrap; flex-shrink: 0;
}
.pub-card-header__meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
  margin-left: auto;
}
.pub-card-header__meta .pub-card__signup-btn {
  white-space: nowrap;
  font-size: 0.72rem;
  padding: 0.35rem 0.65rem;
}
.pub-feed-cars-needed {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #9a3412;
  background: #ffedd5;
  border: 1px solid #fdba74;
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  line-height: 1.2;
}

/* Expanded card body */
.pub-card {
  background: var(--white); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
  border: 1.5px solid var(--cat-border, var(--blue-600)); border-top: none;
  animation: fadeSlideIn 0.25s ease;
}

/* ── Small Thumbnail in Card (portrait 3:4) ── */
.pub-card__thumb-small {
  float: right;
  width: 100px; height: 133px;
  margin: 0 0 0.75rem 1rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pub-card__thumb-small:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.pub-card__thumb-img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}

/* ── Lightbox ── */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.lightbox-overlay.active {
  opacity: 1; pointer-events: auto;
}
.lightbox-img {
  max-width: 90vw; max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  object-fit: contain;
  animation: lightboxIn 0.3s ease;
}
@keyframes lightboxIn {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.lightbox-close {
  position: absolute; top: 1.25rem; right: 1.5rem;
  background: none; border: none;
  color: white; font-size: 2.5rem; font-weight: 300;
  cursor: pointer; line-height: 1;
  opacity: 0.7; transition: opacity 0.2s;
}
.lightbox-close:hover { opacity: 1; }

/* ── Event photo gallery (admin + public) ── */
.field-hint { font-size: 0.82rem; color: var(--gray-400); margin: 0.25rem 0 0.75rem; line-height: 1.45; }
.event-photos-field { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--gray-100); }
.event-photos-empty { font-size: 0.85rem; color: var(--gray-400); font-style: italic; margin: 0 0 0.75rem; }
.event-photos-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.65rem; margin-bottom: 0.75rem;
}
.event-photos-grid__item {
  position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden;
  box-shadow: var(--shadow-sm); background: var(--gray-100);
}
.event-photos-grid__item img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.event-photos-grid__remove {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  border: none; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff;
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.event-photos-upload-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; }

.events-list__item--calendar { opacity: 0.92; }
.events-list__cal-badge {
  font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--blue-100); color: var(--blue-700); padding: 1px 5px; border-radius: 4px;
  margin-left: 0.35rem; vertical-align: middle;
}

.event-photos-strip {
  flex-shrink: 0; border: none; background: none; padding: 0; cursor: pointer;
  position: relative; border-radius: 6px; overflow: hidden; margin-left: auto;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.event-photos-strip__thumb { width: 40px; height: 40px; object-fit: cover; display: block; }
.event-photos-strip__count {
  position: absolute; bottom: 1px; right: 1px; background: rgba(10,49,97,.9);
  color: #fff; font-size: 0.58rem; font-weight: 700; padding: 0 4px; border-radius: 999px;
}

.event-photos-gallery {
  display: flex; align-items: center; gap: 0.75rem; width: 100%;
  margin: 0.5rem 0 0.75rem; padding: 0.65rem 0.75rem;
  border: 1px solid var(--gray-100); border-radius: var(--radius-md);
  background: var(--gray-50); cursor: pointer; text-align: left;
}
.event-photos-gallery__label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--blue-600); white-space: nowrap;
}
.event-photos-gallery__thumbs { display: flex; gap: 0.35rem; align-items: center; }
.event-photos-gallery__thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.event-photos-gallery__more {
  font-size: 0.75rem; font-weight: 600; color: var(--gray-500);
  background: var(--white); padding: 0.25rem 0.5rem; border-radius: 6px;
}

.edm-photos-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.edm-upload-hint {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  color: var(--gray-500, #6b7280);
  line-height: 1.4;
}
.edm-upload-status {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,.92);
}
.parent-photos-pending {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--blue-100);
}
.parent-photos-pending__title {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--blue-800);
}
/* Admin photo tiles: the picture, who sent it, then a small quiet row of text
   actions beneath -- never over the picture, where they hid the photo being
   judged. */
#event-photos-grid,
#parent-photos-pending-grid,
#parent-photos-private-grid,
#club-approvals-pending-grid,
#club-approvals-approved-grid {
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  align-items: start;
}
.parent-photo-tile { display: flex; flex-direction: column; min-width: 0; }
.parent-photo-tile__frame {
  display: block; width: 100%; aspect-ratio: 1; padding: 0; border: none;
  border-radius: 8px; overflow: hidden; background: var(--gray-100);
  box-shadow: var(--shadow-sm); cursor: zoom-in;
}
.parent-photo-tile__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.parent-photo-tile__who {
  margin-top: 0.3rem; font-size: 0.66rem; font-weight: 600; color: var(--gray-500, #6b7280);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.parent-photo-tile__actions {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 0.05rem 0.35rem; margin-top: 0.1rem;
}
.parent-photo-tile__act {
  border: none; background: none; padding: 0.15rem 0; cursor: pointer;
  font: 600 0.66rem/1.2 var(--font-sans, sans-serif); color: var(--blue-700, #1d4d8f);
}
.parent-photo-tile__act:hover { text-decoration: underline; }
.parent-photo-tile__act--approve { color: #15803d; }
.parent-photo-tile__act--danger { color: #b42318; }
/* Small text, but still a comfortable tap on a phone. */
@media (pointer: coarse) { .parent-photo-tile__act { padding: 0.4rem 0; } }

.parent-photos-pending__title { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.parent-photos-review-btn {
  border: none; background: none; padding: 0; cursor: pointer;
  font: 600 0.74rem/1.2 var(--font-sans, sans-serif); color: var(--blue-600, #2563eb);
}
.parent-photos-review-btn:hover { text-decoration: underline; }

/* One-by-one review. Above the plain photo carousel (10000). */
.parent-review {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(8, 12, 20, 0.95); color: #fff;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  padding: max(0.5rem, env(safe-area-inset-top)) 0.75rem max(0.6rem, env(safe-area-inset-bottom));
}
.parent-review.hidden { display: none; }
.parent-review__top { display: flex; align-items: center; gap: 0.75rem; min-height: 44px; }
.parent-review__count { font: 700 0.85rem/1 var(--font-sans, sans-serif); white-space: nowrap; }
.parent-review__who {
  flex: 1; min-width: 0; font-size: 0.8rem; color: rgba(255,255,255,.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.parent-review__close {
  background: none; border: none; color: #fff; font-size: 2rem; line-height: 1;
  width: 44px; height: 44px; cursor: pointer;
}
.parent-review__stage {
  position: relative; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.parent-review__img {
  max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px;
  user-select: none; -webkit-user-drag: none;
}
.parent-review__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.14); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
}
.parent-review__nav--prev { left: 0.25rem; }
.parent-review__nav--next { right: 0.25rem; }
.parent-review__bar { display: flex; justify-content: center; gap: 0.6rem; padding-top: 0.7rem; flex-wrap: wrap; }
.parent-review__act {
  min-width: 96px; min-height: 44px; padding: 0 1.1rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff;
  font: 600 0.9rem/1 var(--font-sans, sans-serif); cursor: pointer;
}
.parent-review__act--approve { background: #16a34a; border-color: #16a34a; }
.parent-review__act--danger { color: #fca5a5; border-color: rgba(252,165,165,.5); }
.parent-review__act:disabled { opacity: 0.5; cursor: progress; }
.parent-review__hint { margin: 0.45rem 0 0; text-align: center; font-size: 0.72rem; color: rgba(255,255,255,.55); }
@media (pointer: coarse) { .parent-review__hint { display: none; } }
.edm-photo-thumb {
  border: none; padding: 0; background: none; cursor: pointer; border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.edm-photo-thumb img { width: 72px; height: 72px; object-fit: cover; display: block; }

.photo-carousel-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.88);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.photo-carousel-overlay.active { opacity: 1; pointer-events: auto; }
.photo-carousel__stage { max-width: 92vw; max-height: 75vh; display: flex; align-items: center; justify-content: center; }
.photo-carousel__img { max-width: 92vw; max-height: 75vh; object-fit: contain; border-radius: 8px; }
.photo-carousel__close {
  position: absolute; top: 1rem; right: 1.25rem; background: none; border: none;
  color: #fff; font-size: 2.4rem; cursor: pointer; line-height: 1;
}
.photo-carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.15); border: none; color: #fff;
  font-size: 2.5rem; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
}
.photo-carousel__nav--prev { left: 1rem; }
.photo-carousel__nav--next { right: 1rem; }
.photo-carousel__caption { color: #fff; font-size: 0.9rem; margin: 0.75rem 0 0; }
.photo-carousel__counter { color: rgba(255,255,255,.75); font-size: 0.8rem; margin: 0.25rem 0 0; }

.pub-card__body { padding: 1rem 1.25rem 1.25rem; overflow: hidden; }
.pub-card__grades { display: flex; gap: 0.35rem; margin-bottom: 0.5rem; }
.grade-badge {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 0.2rem 0.65rem; border-radius: 999px;
  background: var(--green-100); color: var(--green-700);
}
.pub-card__date {
  font-size: 0.78rem; font-weight: 600; color: var(--blue-600);
  margin-bottom: 0.35rem;
}

.pub-card__title { font-family: var(--font-display); font-size: 1.3rem; color: var(--blue-800); margin-bottom: 0.4rem; }
.pub-card__summary { font-size: 0.9rem; color: var(--gray-500); margin-bottom: 1rem; line-height: 1.55; }
.pub-card__meta { display: flex; gap: 1.5rem; font-size: 0.8rem; color: var(--gray-400); flex-wrap: wrap; }
.pub-card__meta strong { color: var(--gray-700); font-weight: 600; }

.pub-card__schedule { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--gray-100); }
.pub-card__schedule-soon {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--gray-400);
  font-style: italic;
}
.pub-card__schedule h4,
.pub-card__checklist h4 {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--gray-400); margin-bottom: 0.4rem;
}
.schedule-line { display: flex; gap: 0.75rem; padding: 0.25rem 0; font-size: 0.85rem; }
.schedule-line__time { color: var(--blue-600); font-weight: 600; min-width: 90px; }
.schedule-line__detail { color: var(--gray-700); }

.pub-card__checklist { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--gray-100); }
.pub-card__signup-btn--signed { cursor: default; }
.checklist-item {
  font-size: 0.85rem; color: var(--gray-700);
  padding: 0.15rem 0 0.15rem 1.1rem; position: relative;
}
.checklist-item::before { content: '☐'; position: absolute; left: 0; color: var(--green-600); }

/* ═══════════ CALENDAR ═══════════ */
.calendar {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.calendar__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; background: var(--blue-800); color: var(--white);
}
.cal-month-year {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 700;
}
.cal-nav {
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.15); color: var(--white);
  display: grid; place-items: center; transition: var(--transition);
}
.cal-nav:hover { background: rgba(255,255,255,.3); }
.cal-nav svg { display: block; }

.calendar__dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--blue-50); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--blue-600);
}
.calendar__dow span {
  text-align: center; padding: 0.55rem 0;
}

.calendar__grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--gray-100);
}

.cal-day {
  min-height: 90px; padding: 0.4rem;
  border-bottom: 1px solid var(--gray-100);
  border-right: 1px solid var(--gray-100);
  position: relative; transition: background 0.15s ease;
  overflow: hidden;
}
.cal-day:nth-child(7n) { border-right: none; }
.cal-day:hover { background: var(--blue-50); }
.cal-day.today { background: var(--green-50); }
.cal-day.other-month { background: var(--gray-50); opacity: 0.45; }
.cal-day.selected { background: var(--blue-100); }

.cal-day__num {
  font-size: 0.78rem; font-weight: 600; color: var(--gray-500);
  margin-bottom: 0.25rem;
}
.cal-day.today .cal-day__num {
  background: var(--green-600); color: var(--white);
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
}

.cal-event-pill {
  display: block; font-size: 0.95rem; font-weight: 600;
  padding: 1px 5px; margin-bottom: 2px; border-radius: 3px;
  word-break: normal; overflow-wrap: break-word; hyphens: auto;
  white-space: normal;
  cursor: pointer; transition: var(--transition); line-height: 1.25;
}
.cal-event-pill--is { background: #e3f2fd; color: #1565c0; }
.cal-event-pill--ms { background: #e8f5e9; color: #2e7d32; }
.cal-event-pill--us { background: #fff3e0; color: #e65100; }
.cal-event-pill--multi { background: var(--blue-100); color: var(--blue-800); }

/* ── Type-based calendar colors ── */
.cal-event-pill--lotc       { background: #28724F; color: #ffffff; }   /* LOTC / saved events */
.cal-event-pill--workday    { background: #e0e0e0; color: #424242; }   /* teacher workdays, inservice */
.cal-event-pill--holiday    { background: #fdecea; color: #c62828; }   /* holidays / no school */
.cal-event-pill--break      { background: #ede7f6; color: #5e35b1; }   /* fall/winter/spring break */
.cal-event-pill--openhouse  { background: #fff8e1; color: #b8860b; }   /* open houses, back to school night */
.cal-event-pill--testing    { background: #e1f5fe; color: #0277bd; }   /* Stanford / OLSAT testing */
.cal-event-pill--milestone  { background: #fce4ec; color: #ad1457; }   /* graduations, traditions, orientation */
.cal-event-pill--summer     { background: #fff3e0; color: #e65100; }   /* summer gatherings / community events */
.cal-event-pill--special    { background: #f3e5f5; color: #6a1b9a; }   /* special dates (testing, pictures, etc.) */
.cal-event-pill--abbrev     { font-size: 0.87rem; padding: 1px 4px; line-height: 1.25; }
.cal-event-pill--other      { background: #eceff1; color: #37474f; }   /* everything else */

.cal-event-pill:hover { filter: brightness(0.92); }

/* ── Calendar legend (removed — hidden to give the calendar more space) ── */
.cal-legend {
  display: none;
}
.cal-legend__item {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.75rem; color: var(--blue-800);
}
.cal-legend__dot {
  width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0;
}

/* ── Calendar Detail Panel ── */
.cal-detail {
  margin-top: 1.25rem;
  animation: fadeSlideIn 0.3s ease;
}
.cal-detail__heading {
  font-family: var(--font-display); font-size: 1.08rem;
  color: var(--blue-800); margin-bottom: 0.75rem;
  padding-bottom: 0.4rem; border-bottom: 2px solid var(--blue-100);
}

/* ─────────── TOAST ─────────── */
.toast {
  position: fixed; bottom: 1.5rem; left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--gray-900); color: var(--white);
  padding: 0.75rem 1.5rem; border-radius: var(--radius-md);
  font-size: 0.9rem; font-weight: 500; box-shadow: var(--shadow-lg);
  opacity: 0; transition: transform 0.35s ease, opacity 0.35s ease;
  pointer-events: none; z-index: 200; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Budget Tab ── */
.budget-table {
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-md);
  overflow: hidden; background: var(--white);
}
.budget-header-row {
  display: grid; grid-template-columns: 1fr 140px 36px;
  gap: 0; background: var(--gray-50);
  border-bottom: 1.5px solid var(--gray-200);
  padding: 0.5rem 0.75rem;
}
.budget-header-row span {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--gray-500);
}
.budget-row {
  display: grid; grid-template-columns: 1fr 140px 36px;
  gap: 0; border-bottom: 1px solid var(--gray-100); align-items: center;
}
.budget-row:last-child { border-bottom: none; }
.budget-row .budget-desc,
.budget-row .budget-amt {
  border: none; border-radius: 0; background: transparent;
  padding: 0.55rem 0.75rem; font-size: 0.9rem; color: var(--gray-900);
  outline: none; width: 100%;
}
.budget-row .budget-desc { border-right: 1px solid var(--gray-100); }
.budget-row .budget-amt  { border-right: 1px solid var(--gray-100); text-align: right; }
.budget-row .budget-desc::placeholder,
.budget-row .budget-amt::placeholder  { color: var(--gray-300); }
.budget-row:focus-within { background: var(--blue-50); }
.budget-del {
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer;
  color: var(--gray-300); padding: 0.4rem; transition: color 0.15s;
}
.budget-del:hover { color: #b91c1c; }
.budget-add-row {
  padding: 0.6rem 0.75rem; border-top: 1.5px dashed var(--gray-200);
  background: var(--gray-50);
}
.budget-total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.65rem 0.75rem; border-top: 2px solid var(--gray-200);
  background: var(--gray-50);
}
.budget-total-label {
  font-size: 0.85rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--gray-700);
}
.budget-total-amount {
  font-size: 1.05rem; font-weight: 700; color: var(--blue-800);
}

/* ── Thumbnail Generation ── */
.thumb-actions { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.btn--generate {
  background: var(--green-600); color: var(--white);
  font-size: 0.78rem; padding: 0.45rem 1rem; border-radius: 999px;
}
.btn--generate:hover { background: var(--green-500); }
.btn--generate:disabled { opacity: 0.6; cursor: not-allowed; }

.thumb-spinner {
  width: 28px; height: 28px; border: 3px solid var(--gray-200);
  border-top-color: var(--blue-600); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.thumb-preview {
  width: 140px; max-width: 100%; border-radius: var(--radius-md); margin-top: 0;
  display: block; object-fit: cover; cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.thumb-preview:hover { transform: scale(1.04); box-shadow: 0 4px 16px rgba(0,0,0,0.18); }
.thumb-spinner-wrap {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1rem; padding: 2.5rem 1rem; width: 100%;
}
.thumb-spinner-ring {
  width: 48px; height: 48px;
  border: 4px solid var(--gray-200);
  border-top-color: var(--blue-800);
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}
.thumb-spinner-label {
  font-size: 0.82rem; color: var(--gray-400); font-style: italic; margin: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.thumbnail-placeholder:has(.thumb-preview),
.thumbnail-placeholder:has(.internal-pdf-card) {
  justify-content: flex-start; align-items: flex-start;
  min-height: 0; padding: 0.75rem;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ─────────── ANIMATIONS ─────────── */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────── ANALYTICS PANELS ─────────── */
.analytics-panel {
  display: flex; flex-direction: column; gap: 1.25rem;
  padding: 1.5rem 0;
}
.analytics-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.75rem;
}
.grade-filter-bar { display: flex; gap: 0.4rem; }

/* Stat cards row */
.analytics-stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}
.stat-card {
  background: var(--white); border-radius: var(--radius-md);
  border: 1.5px solid var(--gray-100); box-shadow: var(--shadow-sm);
  padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.2rem;
}
.stat-card__value {
  font-size: 1.6rem; font-weight: 700; color: var(--blue-800); line-height: 1;
}
.stat-card__label {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--gray-400);
}
.stat-card--ok .stat-card__value { color: #15803d; }

/* ─────────── VOLUNTEER CENTER ─────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.volunteer-center-panel {
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: 1.35rem 1.25rem 2rem;
}
.volunteer-center__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.volunteer-center__subtitle {
  margin: 0.25rem 0 0; font-size: 0.86rem; color: var(--gray-500); line-height: 1.4;
}
.volunteer-center__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.65rem;
}
.vc-stat {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px;
  padding: 0.7rem 0.85rem; display: flex; flex-direction: column; gap: 0.15rem;
}
.vc-stat__value { font-size: 1.35rem; font-weight: 700; color: var(--blue-800); line-height: 1.1; }
.vc-stat__label { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gray-500); }
.volunteer-center__layout {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 0.9rem; align-items: start;
}
@media (max-width: 960px) {
  .volunteer-center__layout { grid-template-columns: 1fr; }
}
.volunteer-center__card {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px;
  padding: 0.9rem 1rem 1rem;
}
.volunteer-center__card--directory { padding-bottom: 0.75rem; }
.volunteer-center__card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; margin-bottom: 0.25rem;
}
.volunteer-center__card-head--wrap { flex-wrap: wrap; }
.volunteer-center__card-head h3 {
  margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--blue-800);
}
.volunteer-center__hint {
  margin: 0 0 0.65rem; font-size: 0.78rem; color: var(--gray-500); line-height: 1.4;
}
.vc-search { display: block; min-width: min(100%, 280px); flex: 1; }
.vc-search input {
  width: 100%; padding: 0.45rem 0.65rem; border: 1px solid var(--gray-200);
  border-radius: 8px; font-size: 0.85rem; background: #fff;
}
.vc-filter-chips {
  display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.7rem;
}
.vc-chip {
  border: 1px solid var(--gray-200); background: var(--gray-50); color: var(--gray-700);
  border-radius: 999px; padding: 0.28rem 0.65rem; font-size: 0.72rem; font-weight: 600;
  cursor: pointer;
}
.vc-chip:hover { border-color: var(--blue-200, #bfdbfe); color: var(--blue-800); }
.vc-chip.active {
  background: var(--blue-800); border-color: var(--blue-800); color: #fff;
}
.vc-spotlight__count { margin: 0 0 0.45rem; font-size: 0.72rem; color: var(--gray-500); font-weight: 600; }
.vc-spotlight-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.vc-spotlight-item {
  width: 100%; text-align: left; border: 1px solid var(--gray-100); background: var(--gray-50);
  border-radius: 8px; padding: 0.5rem 0.65rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.12rem;
}
.vc-spotlight-item:hover { border-color: #c5d4e8; background: #f5f8fc; }
.vc-spotlight-item strong { font-size: 0.82rem; color: var(--blue-800); }
.vc-spotlight-item span {
  font-size: 0.74rem; color: var(--gray-700); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vc-live-list {
  display: flex; flex-direction: column; gap: 0.5rem;
  max-height: 28rem; overflow-y: auto; padding-right: 0.15rem;
}
.vc-live-card {
  border: 1px solid var(--gray-150, #e8eef5); border-radius: 8px; padding: 0.55rem 0.65rem; background: #fbfcfe;
}
.vc-live-card header { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.vc-live-card strong { font-size: 0.86rem; color: var(--gray-900); }
.vc-live-card__roles { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #1f6b4a; }
.vc-live-card__contact { margin: 0.2rem 0 0.35rem; font-size: 0.74rem; color: var(--gray-500); }
.vc-live-card__events { margin: 0; padding-left: 1rem; font-size: 0.74rem; color: var(--gray-700); }
.vc-live-card__events li { margin: 0.12rem 0; }
.vc-live-card__events span { color: var(--gray-500); margin-right: 0.25rem; }
.vc-live-card__events em { font-style: normal; color: var(--gray-500); }
.vc-directory { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.55rem; }
.vc-profile {
  border: 1px solid var(--gray-200); border-radius: 10px; background: #fff; overflow: hidden;
}
.vc-profile--flash { outline: 2px solid var(--blue-600); outline-offset: 1px; }
.vc-profile > summary {
  list-style: none; cursor: pointer; display: grid;
  grid-template-columns: minmax(10rem, 1.1fr) minmax(8rem, 1fr) minmax(7rem, 0.9fr);
  gap: 0.45rem 0.75rem; align-items: center;
  padding: 0.65rem 0.8rem; font-size: 0.82rem;
}
.vc-profile > summary::-webkit-details-marker { display: none; }
.vc-profile__name { font-weight: 700; color: var(--blue-800); }
.vc-profile__meta { color: var(--gray-700); font-size: 0.76rem; }
.vc-profile__students { color: var(--gray-500); font-size: 0.74rem; text-align: right; }
.vc-profile__body {
  border-top: 1px solid var(--gray-100); padding: 0.7rem 0.85rem 0.85rem;
  display: flex; flex-direction: column; gap: 0.45rem; background: #fafbfd;
}
.vc-profile__row {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.5rem; font-size: 0.8rem;
}
.vc-profile__row > span { font-weight: 700; color: var(--gray-500); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; }
.vc-profile__row ul { margin: 0; padding-left: 1.05rem; }
.vc-profile__row a { color: var(--blue-800); }
.vc-profile__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.2rem; }
.vc-tag {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.12rem 0.4rem; border-radius: 4px; background: #eef3f9; color: var(--blue-800);
}
.vc-empty { margin: 0.35rem 0; font-size: 0.82rem; color: var(--gray-500); line-height: 1.4; }
@media (max-width: 720px) {
  .vc-profile > summary {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
  .vc-profile__students { text-align: left; }
  .vc-profile__row { grid-template-columns: 1fr; gap: 0.15rem; }
}
.stat-card--low .stat-card__value { color: #b45309; }
.stat-card--over .stat-card__value { color: #b91c1c; }

/* Chart grid */
.analytics-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;
}
.analytics-grid--wide { grid-template-columns: 1fr; }
.analytics-card {
  background: var(--white); border-radius: var(--radius-md);
  border: 1.5px solid var(--gray-100); box-shadow: var(--shadow-sm);
  padding: 1.25rem;
}
.analytics-card--full { grid-column: 1 / -1; }
.analytics-card__title {
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--gray-500); margin: 0 0 1rem;
}
.chart-wrap { position: relative; height: 220px; }
.chart-wrap--category { height: 300px; min-height: 300px; }
.chart-wrap--sm { height: 180px; }
.chart-wrap--tall { height: 300px; }

/* Budget rollup table */
.budget-rollup-tbl {
  width: 100%; border-collapse: collapse; font-size: 0.88rem;
}
.budget-rollup-tbl th {
  text-align: left; font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--gray-500); font-weight: 700;
  padding: 0.5rem 0.75rem; border-bottom: 1.5px solid var(--gray-200);
}
.budget-rollup-tbl td {
  padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--gray-100);
  color: var(--gray-900);
}
.budget-rollup-tbl tfoot td {
  border-top: 2px solid var(--gray-200); border-bottom: none;
  background: var(--gray-50); padding: 0.65rem 0.75rem;
}
.budget-rollup-tbl tbody tr:hover { background: var(--blue-50); }

/* ─────────── AUTO-SAVE INDICATOR ─────────── */
.autosave-indicator {
  font-size: 0.78rem; font-weight: 600; white-space: nowrap;
  transition: opacity 0.3s, color 0.3s;
  opacity: 0;
}
.autosave-indicator.saving {
  color: var(--gray-400); opacity: 1;
}
.autosave-indicator.saved {
  color: #15803d; opacity: 1;
}
.autosave-indicator.error {
  color: #dc2626; opacity: 1;
}

/* Danger zone button */
.btn-danger-sm {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 1rem; font-size: 0.82rem; font-weight: 600;
  background: #fef2f2; color: #b91c1c;
  border: 1.5px solid #fca5a5; border-radius: var(--radius-sm);
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.btn-danger-sm:hover { background: #fee2e2; border-color: #ef4444; }

/* ─────────── RESPONSIVE ─────────── */
@media (max-width: 960px) {
  .dashboard { grid-template-columns: 1fr; gap: 1rem; }
  .saved-events { position: static; order: -1; }
  .events-list { max-height: 200px; }
  .events-list--full { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* On <body> this quietly makes body a scroll container, which disables
     position:sticky for every descendant -- including the tab bar. The root
     element's overflow propagates to the viewport instead, so the sideways
     clamp survives and sticky keeps working. */
  html { overflow-x: hidden; }
  /* Let the admin list view flow to the bottom of the page and use the page's
     own scroll, instead of being trapped in a short internal scroll box.
     The #id override beats the earlier `.events-list { max-height:200px }` rule
     that otherwise caps the full list and gives it its own short scrollbar. */
  #view-coordinator .calendar-panel { min-height: 0; }
  #view-coordinator .events-list-view { flex: none; overflow: visible; padding-bottom: 2rem; }
  #events-list.events-list--full { max-height: none; overflow: visible; }
  /* Brand on its own row; the view switcher and the user avatar share the next
     row so the avatar stays tight beside the Public / USL / Admin buttons. */
  .top-bar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.65rem; padding: 0.75rem 0.85rem; }
  .top-bar__brand { flex: 1 1 100%; }
  .top-bar .view-toggle { flex: 0 1 auto; }
  .top-bar #top-bar-user { margin-left: auto; }
  .top-bar .btn-staff-login { margin-left: auto; }
  .top-bar__title { font-size: 1.15rem; }
  /* Hide the School/Category feed filters on mobile and reclaim the space. */
  .pub-filters { display: none; }
  .pub-toolbar__right { margin-left: auto; }
  .usl-cal-sync-btn { padding: 0.3rem 0.55rem; font-size: 0.72rem; }
  /* USL/volunteer page: keep the Google sign-out icon on the SAME line as the
     title by letting the brand share the row and shrinking the title to fit. */
  .volunteer-link-mode .top-bar { flex-wrap: nowrap; }
  .volunteer-link-mode .top-bar__brand { flex: 1 1 auto; min-width: 0; }
  .volunteer-link-mode .top-bar__title { font-size: 1rem; }
  .volunteer-link-mode .top-bar__logo { height: 38px; }
  .volunteer-link-mode .usl-signout-btn { flex: 0 0 auto; }
  .view:not(#view-coordinator) { padding: 0.75rem 0.6rem; }
  .event-form { --form-pad-x: 0.85rem; --form-pad-top: 1rem; }
  .form-tab-bar { margin-bottom: 1rem; padding-top: 0.4rem; padding-bottom: 0.4rem; flex-wrap: wrap; }
  /* Wrap instead of scrolling: a silent overflow hid the Budget tab entirely
     with no affordance that there was anything to scroll to. */
  .form-tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 0.15rem; }
  .form-tab { padding: 0.55rem 0.8rem; font-size: 0.75rem; }
  .form-tab-bar__actions { gap: 0.4rem; }
  /* The action row is flex-shrink:0 at its full one-line width (~670px with the
     Logistics buttons showing), so on a phone it could never wrap. It pushed the
     page wider than the screen and the browser zoomed out, shrinking the whole
     admin page into a strip. Give it its own full-width row under the tabs and
     let the buttons wrap. Same selector as the desktop rule so this one wins. */
  #view-coordinator .form-tab-bar__actions { flex: 1 1 100%; min-width: 0; margin-left: 0; }
  /* A fixed 210px Unassigned column left the buses ~130px wide on a phone and
     clipped each bus's driver picker. Stack them. The #view-coordinator prefix is
     needed: the base .transport-layout rule comes later in this file and would
     otherwise override this. */
  #view-coordinator .transport-layout { grid-template-columns: minmax(0, 1fr); }
  /* User Access > Add User tags. The checkbox row was nowrap inside a field
     that never shrinks, so Faculty through MS Student sat on one line wider than
     a phone (411px, then 486px once Family was added) and widened the page.
     Give the field its own row and let the checkboxes wrap. */
  .user-access-add-form__tags { flex: 1 1 100%; }
  .user-access-add-form__tag-row { flex-wrap: wrap; height: auto; row-gap: 0.3rem; }
  .publish-toggle .toggle-label { display: none; }
  .saved-events { padding: 0.9rem; }
  .pub-card__body { padding: 1rem; }
  /* Five sub-tabs no longer fit one phone row. Let the strip wrap and let the
     Calendar Sync button ride along on the wrapped row instead of pushing the
     last tab (IS) off the right edge. */
  .pub-toolbar {
    flex-wrap: wrap; column-gap: 0.5rem; row-gap: 0.25rem;
    margin-bottom: 0.65rem; align-items: center;
  }
  /* One line, always. Calendar Sync now lives on the Calendar page, so the
     five tabs have the full width and just need to stop wrapping. */
  .sub-tabs { display: flex; flex-wrap: nowrap; width: 100%; min-width: 0; justify-content: space-between; }
  .sub-tab { flex: 0 1 auto; min-width: 0; }
  .pub-toolbar__right { flex-shrink: 0; margin-left: auto; }
  .pub-filters { width: 100%; margin-left: 0; justify-content: flex-start; flex-wrap: wrap; }
  .calendar__header { padding: 0.75rem 0.85rem; }
  .field-row { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions__buttons { justify-content: flex-end; }
  .pub-card__thumb-small { width: 80px; height: 107px; margin-left: 0.65rem; }
  .cal-day { min-height: 70px; }
  .cal-event-pill {
    font-size: 0.78rem; line-height: 1.15; letter-spacing: -0.15px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Public card header — title + category on one line */
  .pub-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    padding: 0.65rem 0.9rem;
  }
  .pub-card-header__main {
    flex: 1 1 100%;
  }
  .pub-card-header__meta {
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: flex-end;
  }
  .pub-card-header__date {
    margin-left: 0;
  }
}
@media (max-width: 480px) {
  .view:not(#view-coordinator) { padding: 0.5rem 0.4rem; }
  .top-bar { padding: 0.65rem 0.65rem; }
  .view-toggle__btn { font-size: 0.78rem; padding: 0.4rem 0.75rem; }
  .view-toggle__btn svg { display: none; }
  .event-form { --form-pad-x: 0.7rem; --form-pad-top: 0.9rem; }
  .saved-events { padding: 0.75rem; }
  /* Tighter dynamic-section walls so schedule rows fit */
  fieldset.field, .dynamic-section { padding: 0.7rem 0.6rem 0.6rem; }
  .dynamic-row { gap: 0.4rem; }
  /* Trim time-picker on narrow phones so it can't push the row off-screen */
  .time-picker { padding: 1px; gap: 0; }
  .time-picker select { min-width: 32px; padding: 0.35rem 0.05rem 0.35rem 0.25rem; font-size: 0.82rem; }
  .tp-ampm { min-width: 36px !important; padding: 0.35rem 0.25rem !important; font-size: 0.72rem !important; }
  .btn-remove-row { width: 22px; height: 22px; }
  /* A schedule row holds eight controls; on a phone they need 527px in one
     line, which made the whole page scroll sideways and left the header and
     tab bar narrower than the form. Wrap the row instead: times and the remove
     button on top, the detail box underneath. */
  .schedule-row { flex-wrap: wrap; row-gap: 0.35rem; }
  .schedule-row .schedule-detail-input { order: 3; flex: 1 1 60%; min-width: 0; }
  .schedule-row .schedule-add-sub-btn { order: 4; }
  .schedule-row .btn-remove-row { order: 2; margin-left: auto; }
  /* The column headings line up with a single-line row, not a wrapped one. */
  .schedule-col-labels { display: none; }
  .schedule-block__body { padding-left: 0.9rem; }
  .form-placeholder { padding: 2rem 1rem; min-height: 380px; }
  .form-placeholder__content h3 { font-size: 1.85rem; }
  .form-placeholder__content p { font-size: 1.05rem; }
  .form-placeholder__steps span { font-size: 0.95rem; }
  .pub-card__body { padding: 0.85rem; }
  .pub-card__thumb-small { width: 72px; height: 96px; margin: 0 0 0.6rem 0.6rem; }
  .pub-toolbar { margin-bottom: 0.5rem; padding-bottom: 0.35rem; }
  .sub-tab { padding: 0.4rem 0.34rem; font-size: 0.74rem; gap: 4px; letter-spacing: 0.02em; }
  .sub-tab svg { width: 14px; height: 14px; }
  .pub-filters { gap: 0.5rem; }
  .pub-filter-group { gap: 0.25rem; }
  .calendar__header { padding: 0.65rem 0.75rem; }
  .cal-month-year { font-size: 1.08rem; }
  .cal-nav { width: 30px; height: 30px; }
  .cal-day { min-height: 56px; padding: 0.2rem 0.2rem 0; }
  .cal-day__num { font-size: 0.7rem; }
  /* Slightly tighter text so words fit without breaking after 1–2 letters, and
     clamp long titles to 3 lines with the last line pinned to the box bottom. */
  .cal-event-pill {
    font-size: 0.72rem; padding: 1px 3px; line-height: 1.12; letter-spacing: -0.2px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; margin-bottom: 1px;
  }
  .modal-box { padding: 1.5rem 1.25rem; width: 92%; }
  .toast { left: 0.75rem; right: 0.75rem; transform: translateY(120%); white-space: normal; text-align: center; }
  .toast.show { transform: translateY(0); }
}

/* ═══════════════ PUBLIC LANDING GATE ═══════════════ */
.public-gate {
  display: grid; place-items: center;
  min-height: calc(100vh - 70px); padding: 2rem 1rem;
  background: var(--page-bg);
}
.public-gate__card {
  background: white; border-radius: 16px;
  box-shadow: 0 4px 32px rgba(0,0,0,.10);
  padding: 2.5rem 2rem; max-width: 380px; width: 100%; text-align: center;
}
.public-gate__logo { width: 72px; height: 72px; object-fit: contain; margin: 0 auto 1rem; display: block; }
.public-gate__title { font-size: 1.1rem; font-weight: 700; color: var(--blue-800); margin: 0 0 0.2rem; line-height: 1.3; }
.public-gate__sub { font-size: 0.82rem; color: var(--gray-400); margin: 0 0 0.35rem; }
.public-gate__hint { font-size: 0.78rem; color: var(--gray-400); margin: 0 0 1.25rem; }
.signin-browser-help {
  margin-top: 1rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  background: #f4f1ea;
  text-align: center;
}
.signin-browser-help p,
.auth-gate__card .signin-browser-help p,
.public-gate__card .signin-browser-help p {
  margin: 0 0 0.65rem !important;
  font-size: 0.78rem !important;
  line-height: 1.4;
  color: var(--gray-500) !important;
  font-weight: 500;
}
.signin-browser-help .btn { width: 100%; }
.signin-browser-help--warn {
  background: #fff4e5;
  border: 1px solid #f0c36d;
}
.public-gate__form { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.5rem; }

/* ═══════════════ USL VOLUNTEER SIGN-IN BAR ═══════════════ */
.usl-signin-bar {
  background: #1e3a5f; border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 0.55rem 1.25rem; font-size: 0.82rem; color: rgba(255,255,255,.9);
}
.usl-signin-bar__prompt { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.usl-signin-bar__user  { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.usl-signin-bar__hint  { font-size: 0.78rem; color: rgba(255,255,255,.6); font-style: italic; flex: 1; }
.usl-avatar {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4);
}
.usl-username { font-weight: 600; }
.usl-user-email { font-size: 0.78rem; color: rgba(255,255,255,.7); margin-right: 0.25rem; }
.btn-usl-signin {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.7rem; border-radius: 6px; border: 1.5px solid rgba(255,255,255,.3);
  background: white; color: #333; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: box-shadow 0.15s;
}
.btn-usl-signin:hover { box-shadow: 0 2px 6px rgba(0,0,0,.2); }
/* Subtle staff login lock button */
.btn-staff-login {
  position: absolute; bottom: 6px; right: 10px;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.25); padding: 4px; border-radius: 4px;
  transition: color 0.2s;
  line-height: 1;
}
.btn-staff-login:hover { color: rgba(255,255,255,.6); }
.btn-staff-login.hidden { display: none; }

.usl-or { font-size: 0.75rem; color: rgba(255,255,255,.5); }
.usl-email-form { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.usl-email-form input {
  padding: 0.27rem 0.55rem; border-radius: 6px; border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1); color: white; font-size: 0.78rem;
  outline: none; width: 140px;
}
.usl-email-form input::placeholder { color: rgba(255,255,255,.5); }
.usl-email-form input:focus { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.18); }

/* ═══════════════ DRIVER SIGNUP MODAL ═══════════════ */
/* ── Event Detail Modal (public view) ── */
.event-detail-modal {
  max-width: 520px; width: 95%; position: relative;
  padding: 0; overflow: hidden; text-align: left;
  display: flex; flex-direction: column; max-height: 90vh;
}
.event-detail-modal__close {
  position: absolute; top: 0.75rem; right: 0.9rem;
  background: none; border: none; font-size: 1.4rem;
  color: rgba(255,255,255,.75); cursor: pointer; z-index: 1;
  line-height: 1; padding: 0.2rem 0.4rem;
}
.event-detail-modal__close:hover { color: white; }
.event-detail-modal__header {
  background: var(--blue-800); color: white;
  padding: 1.5rem 1.75rem 1.25rem;
}
.edm-internal-graphic {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.edm-internal-graphic.hidden { display: none; }
.edm-internal-graphic__btn {
  display: block;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 5px;
  overflow: hidden;
  background: rgba(255,255,255,0.16);
  cursor: zoom-in;
  flex-shrink: 0;
}
.edm-internal-graphic__btn:hover {
  border-color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.28);
}
.edm-internal-graphic__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background: #fff;
}
.edm-header-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 0.5rem; padding-right: 2.25rem;
}
.edm-category-badge {
  display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; background: rgba(255,255,255,.18); color: rgba(255,255,255,.9);
  padding: 0.2rem 0.6rem; border-radius: 999px;
}
.edm-category-badge:empty { display: none; }
.edm-upload-icon-btn {
  display: inline-flex; align-items: center; gap: 0.35rem; flex-shrink: 0; cursor: pointer;
  margin-left: auto; padding: 0.3rem 0.65rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
  color: white; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35);
  transition: var(--transition);
}
.edm-upload-icon-btn:hover { background: rgba(255,255,255,.28); }
.edm-upload-icon-btn.hidden { display: none; }
.edm-upload-icon-btn svg { flex-shrink: 0; }
.edm-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.35rem; line-height: 1.3; }
.edm-date  { font-size: 0.82rem; color: rgba(255,255,255,.7); margin: 0; }
.edm-header-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.85rem;
}
.edm-header-photos.hidden { display: none; }
.edm-header-photo {
  padding: 0;
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(0,0,0,.15);
  line-height: 0;
  transition: border-color 0.15s, transform 0.15s;
}
.edm-header-photo:hover {
  border-color: rgba(255,255,255,.85);
  transform: scale(1.03);
}
.edm-header-photo img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  display: block;
}
.edm-header-photo--more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  cursor: pointer;
}
.event-detail-modal__body {
  padding: 1.25rem 1.75rem; overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 1.1rem;
}
.edm-section__heading {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--blue-800);
  margin: 0 0 0.5rem; padding-bottom: 0.3rem;
  border-bottom: 1.5px solid var(--blue-100);
}
.edm-section__text { font-size: 0.9rem; color: var(--gray-700); margin: 0; line-height: 1.6; }
.edm-schedule-list, .edm-checklist-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.edm-schedule-list li {
  display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.88rem; color: var(--gray-700);
}
.edm-schedule-list li .edm-time {
  font-weight: 600; color: var(--blue-800); white-space: nowrap; min-width: 0;
}
.edm-checklist-list li {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.88rem; color: var(--gray-700);
}
.edm-checklist-list li::before {
  content: ""; display: block; width: 14px; height: 14px; flex-shrink: 0;
  border: 1.5px solid var(--gray-300); border-radius: 3px;
}
.edm-tbd { color: var(--gray-400); font-style: italic; }
.edm-details-list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.edm-details-row { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.5rem 0.75rem; font-size: 0.88rem; }
.edm-details-row dt { font-weight: 700; color: var(--blue-800); margin: 0; }
.edm-details-row dd { margin: 0; color: var(--gray-700); line-height: 1.5; }
.edm-details-row dd a { color: var(--blue-800); }
.event-detail-modal__footer {
  padding: 1rem 1.75rem; border-top: 1px solid var(--gray-100);
  display: flex; justify-content: flex-end; gap: 0.65rem;
}
.event-detail-modal__footer.hidden { display: none; }
.edm-signed-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1.25rem; border: none; border-radius: var(--radius-sm);
  font-size: 0.875rem; font-weight: 700;
  background: var(--green-700); color: white; cursor: default;
  box-shadow: 0 0 0 3px rgba(21,128,61,.2);
}

.driver-modal { max-width: 420px; position: relative; }
.driver-modal__close {
  position: absolute; top: 0.75rem; right: 0.75rem;
  background: none; border: none; font-size: 1.4rem; line-height: 1;
  cursor: pointer; color: var(--gray-400); transition: color 0.15s;
}
.driver-modal__close:hover { color: var(--gray-700); }
.driver-modal__header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.2rem; }
.driver-modal__header h3 { margin: 0; font-size: 1.05rem; color: var(--blue-800); }
.driver-modal__event-name { font-size: 0.88rem; color: var(--gray-500); margin: 0 0 1rem; font-style: italic; }
.driver-modal__field { margin-bottom: 0.85rem; }
.driver-modal__field label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--gray-700); margin-bottom: 0.3rem; }
.driver-modal__field small { font-weight: 400; opacity: 0.7; }
.driver-modal__hint { font-size: 0.75rem; color: var(--gray-400); margin: -0.4rem 0 0.75rem; font-style: italic; min-height: 1rem; }
.driver-modal__actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1rem; }
.driver-modal__already { font-size: 0.85rem; color: var(--green-700); margin-top: 0.75rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Self-signed volunteer rows in chaperones section */
.chaperone-row--selfsigned {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  font-size: 0.82rem;
  pointer-events: none;
  opacity: 0.9;
}
.selfsigned-badge {
  grid-column: 1;
  justify-self: start;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
  background: var(--green-700); color: white;
  padding: 0.15rem 0.45rem; border-radius: 999px;
  white-space: nowrap;
}
.chap-ss-name  { grid-column: 2; font-weight: 600; color: var(--gray-900); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chap-ss-email { grid-column: 3; color: var(--gray-500); font-style: italic; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chap-ss-phone { grid-column: 4; color: var(--gray-700); min-width: 0; }
.chap-ss-role  { grid-column: 5 / 7; justify-self: start; font-weight: 600; font-size: 0.78rem; white-space: nowrap; }
/* Row disables pointer events; re-enable just the admin remove button. */
.chaperone-row--selfsigned .chap-ss-remove { grid-column: 7; pointer-events: auto; }

/* Chaperone-only toggle */
.chap-only-label { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none; }
.chap-only-label input[type="checkbox"] { display: none; }
.chap-only-pill {
  padding: 0.3rem 0.85rem; border-radius: 999px;
  border: 1.5px solid var(--gray-300); background: white;
  font-size: 0.8rem; font-weight: 600; color: var(--gray-500);
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.chap-only-label input:checked + .chap-only-pill {
  background: var(--blue-800); border-color: var(--blue-800); color: white;
}
.chap-only-hint { font-size: 0.75rem; color: var(--gray-400); }
#dsf-seats-field.greyed { opacity: 0.38; pointer-events: none; }
#dsf-driving-options.greyed { opacity: 0.38; pointer-events: none; }
#dsf-drivers-off-hint { color: var(--gray-500); font-style: italic; }

/* LOTC event pills get a pointer cursor in the public view to hint they're clickable */
.public-feed .cal-event-pill { cursor: pointer; }
.public-feed .cal-event-pill:hover { filter: brightness(1.08); }
.public-feed .cal-event-pill--lotc { cursor: pointer; }
.public-feed .cal-event-pill--lotc:hover { filter: brightness(1.12); }

/* Self-signed car groups in admin transport */
.transport-group--selfsigned .transport-group__header { background: #2e7d32; }
.transport-group--selfsigned .transport-group__header::after {
  content: "Self-signed"; font-size: 0.65rem; font-weight: 400; opacity: 0.85;
  margin-left: 0.5rem; background: rgba(255,255,255,.2); padding: 1px 5px; border-radius: 4px;
}

/* ═══════════════ ADMIN SUB-NAV ═══════════════ */
.admin-subnav {
  display: flex; gap: 0; background: var(--blue-900); padding: 0 1rem;
  border-bottom: 2px solid rgba(255,255,255,0.1);
  /* overflow-x:auto alone makes overflow-y compute to auto, which shows a
     useless vertical scrollbar on Windows. Keep horizontal scroll for narrow
     screens, but never allow vertical scroll on this bar. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.admin-subnav::-webkit-scrollbar { height: 4px; width: 0; }
.admin-subnav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 4px; }
.admin-subnav__btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.6rem 1.1rem; background: none; border: none;
  color: rgba(255,255,255,0.65); font-size: 0.83rem; font-weight: 600;
  cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap; flex: 0 0 auto;
}
.admin-subnav__btn:hover { color: #fff; }
.admin-subnav__btn.active { color: #fff; border-bottom-color: var(--gold, #F5B731); }

/* ── Admin Special Dates Calendar ── */
.admin-calendar-panel {
  display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 0;
  min-height: calc(100vh - 120px);
  width: 100%;
}
.admin-calendar-main {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.calendar-dates-sidebar {
  background: var(--white); border-right: 1px solid var(--gray-100);
  padding: 1.25rem 1rem; overflow-y: auto;
  min-width: 0;
}
.calendar-dates-sidebar__hint {
  font-size: 0.78rem; color: var(--gray-400); margin: 0 0 1rem; line-height: 1.45;
}
.btn-view-full-calendar {
  width: 100%; margin-bottom: 0.5rem;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.65rem 1rem; border: 1.5px solid var(--blue-600);
  border-radius: var(--radius-md); background: var(--white);
  color: var(--blue-800); font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: var(--transition);
}
.btn-view-full-calendar:hover { background: var(--blue-50); }
.btn-view-full-calendar.active {
  background: var(--blue-800); border-color: var(--blue-800); color: var(--white);
}
.admin-cal-overview {
  flex: 1;
  padding: 1rem 1.25rem 1.5rem;
  background: var(--white);
  overflow-y: auto;
  min-width: 0;
  box-sizing: border-box;
}
.admin-cal-overview .calendar {
  box-shadow: var(--shadow-sm);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.admin-cal-overview .calendar__dow,
.admin-cal-overview .calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.admin-cal-overview .cal-day {
  min-width: 0;
  max-width: 100%;
  min-height: 78px;
  padding: 0.25rem;
  box-sizing: border-box;
  overflow: hidden;
}
.admin-cal-overview .cal-event-pill {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 0.81rem;
  padding: 1px 2px;
  line-height: 1.25;
  word-break: break-word;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset;
  max-height: none;
  white-space: normal;
}
/* Mobile only: clamp admin-calendar event titles to 3 lines (desktop keeps
   full titles). Placed after the base .admin-cal-overview rule so it wins. */
@media (max-width: 720px) {
  .admin-cal-overview .cal-event-pill {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: normal; overflow-wrap: break-word; hyphens: auto;
    font-size: 0.74rem; line-height: 1.14; letter-spacing: -0.15px;
  }
}
.admin-cal-overview .cal-legend {
  margin-top: 0.75rem;
  padding: 0.75rem 0.5rem 0;
}
.special-date-form,
#special-date-placeholder.form-placeholder {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
}
#view-coordinator .admin-cal-overview .cal-event-pill {
  cursor: pointer;
  pointer-events: auto;
}
.cal-day--readonly { cursor: default; }
.cal-event-pill--readonly { cursor: default; pointer-events: none; }
.special-date-form {
  padding: 1.5rem 2rem; background: var(--white); overflow-y: auto;
}
.special-date-form__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--gray-100);
}
.special-date-form__title { margin: 0; font-size: 1.1rem; color: var(--blue-800); }
.special-date-form__actions { display: flex; gap: 0.5rem; }
.label-optional { font-weight: 400; color: var(--gray-400); font-size: 0.85em; }

.pub-special-date-item {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.55rem 0.75rem; margin-bottom: 0.35rem;
  background: #faf5fc; border-radius: 6px; cursor: pointer;
  font-size: 0.88rem;
}
.pub-special-date-item__photos {
  display: flex;
  gap: 0.35rem;
  margin-left: auto;
  flex-shrink: 0;
}
.pub-special-date-item__photo {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--gray-200);
}
.cal-day-card {
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 0.65rem;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
  background: var(--white);
}
.cal-day-card:hover {
  border-color: var(--blue-200);
  box-shadow: var(--shadow-sm);
}
.cal-day-card__head {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.cal-day-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.35rem;
}
.cal-day-card__title {
  font-weight: 700;
  color: var(--gray-900);
  font-size: 0.95rem;
}
.cal-day-card__meta {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-top: 0.15rem;
}
.cal-day-card__summary {
  font-size: 0.85rem;
  color: var(--gray-700);
  margin: 0.5rem 0 0;
  line-height: 1.45;
}
.cal-day-card__photos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.65rem;
}
.cal-day-card__photo {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--gray-200);
}
.cal-day-card__photo-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 6px;
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 0.78rem;
  font-weight: 700;
}
.pub-special-date-item__dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.pub-special-date-item__title { font-weight: 600; color: var(--blue-800, #1a365d); }
.pub-special-date-item__note { color: var(--gray-500); font-size: 0.82rem; }
.pub-special-date-item__date { margin-left: auto; font-size: 0.78rem; color: var(--gray-400); }

@media (max-width: 768px) {
  .admin-calendar-panel { grid-template-columns: 1fr; }
  .calendar-dates-sidebar { border-right: none; border-bottom: 1px solid var(--gray-100); max-height: 240px; }
  .admin-cal-overview .cal-event-pill { font-size: 0.73rem; }
}

/* ═══════════════ STUDENT LIST PANEL ═══════════════ */
.student-list-panel {
  max-width: none;
  margin: 0;
  padding: 1.25rem 1.25rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.student-list__header {
  display: flex; align-items: flex-end; justify-content: flex-start;
  flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.65rem; width: 100%;
}
.student-list__header-main {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.65rem 0.85rem;
}
.grade-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.grade-tab {
  padding: 0.3rem 0.85rem; border: 1.5px solid var(--gray-300);
  border-radius: 999px; background: white; font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: var(--transition); color: var(--gray-500);
}
.grade-tab:hover { border-color: var(--blue-600); color: var(--blue-800); }
.grade-tab.active { background: var(--blue-800); border-color: var(--blue-800); color: white; }
.grade-tab span { font-weight: 400; opacity: 0.75; margin-left: 2px; }
.student-list__content {
  background: white;
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  align-self: flex-start;
  max-width: 100%;
}
.student-loading { padding: 2rem; text-align: center; color: var(--gray-400); }
.student-table {
  border-collapse: collapse;
  width: auto;
  max-width: 100%;
}
.student-table th,
.student-table td {
  padding: 0.45rem 0.65rem;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.88rem;
  vertical-align: middle;
}
.student-table th { background: var(--blue-800); color: white; font-size: 0.77rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.student-table tr:last-child td { border-bottom: none; }
.student-table tr:nth-child(even) td { background: #fafbfc; }
.student-count-bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid #f0f0f0;
}
.student-count { padding: 0; font-size: 0.8rem; color: var(--gray-400); border-bottom: none; }
.student-list-lock-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.15rem;
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: #fff;
  color: var(--gray-500);
  font-size: 0.72rem;
  font-weight: 650;
  cursor: pointer;
  transition: var(--transition);
}
.student-list-lock-btn:hover {
  border-color: var(--gray-400);
  color: var(--gray-700);
}
.student-list-lock-btn.is-locked {
  background: #f8fafc;
  color: var(--gray-500);
}
.student-list-lock-btn:not(.is-locked) {
  border-color: #86efac;
  background: #f0fdf4;
  color: #15803d;
}
.student-table--locked .ua-name-input:disabled {
  opacity: 1;
  color: var(--gray-900);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  cursor: default;
}
.student-add-form-wrap {
  margin: 0;
  padding: 0;
}
.student-add-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.45rem 0.65rem;
}
.student-add-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gray-700);
}
.student-add-form__field input,
.student-add-form__field select {
  min-width: 130px;
  padding: 0.35rem 0.5rem;
  border: 1.5px solid var(--gray-300);
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 400;
}
.student-add-form__field input:focus,
.student-add-form__field select:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}
.grade-badge--is { background: #e3f2fd; color: #1565c0; }
.grade-badge--ms { background: #e8f5e9; color: #2e7d32; }
.grade-badge--us { background: #fff3e0; color: #e65100; }
.student-table__num {
  color: var(--gray-400);
  font-size: 0.75rem;
  width: 2rem;
  text-align: right;
  padding-left: 0.65rem;
  padding-right: 0.35rem;
}
.student-table__name { min-width: 6.5rem; }
.student-table__name .ua-name-input { max-width: 10rem; }
.student-table__actions {
  white-space: nowrap;
  text-align: right;
  padding-right: 0.65rem;
}
.student-remove-btn {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gray-400);
  background: none;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  transition: var(--transition);
}
.student-remove-btn:hover {
  color: #dc2626;
  border-color: #fca5a5;
  background: #fff5f5;
}
.student-table th:nth-child(2),
.student-table td:nth-child(2) { padding-right: 0.85rem; }
.student-table th:nth-child(3),
.student-table td:nth-child(3) { padding-left: 0.25rem; padding-right: 0.65rem; }
.student-table th:nth-child(4),
.student-table td:nth-child(4) { padding-left: 0.25rem; padding-right: 0.65rem; }
.sep-enable {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  cursor: pointer;
  vertical-align: middle;
}
.sep-enable-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.sep-enable__dot {
  display: block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 1.5px solid var(--gray-300);
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.sep-enable:hover .sep-enable__dot {
  border-color: var(--blue-500);
}
.sep-enable-input:focus-visible + .sep-enable__dot {
  outline: 2px solid var(--blue-600);
  outline-offset: 1px;
}
.sep-enable-input:checked + .sep-enable__dot,
.sep-enable--on .sep-enable__dot {
  border-color: var(--blue-700);
  background: radial-gradient(circle at center, var(--blue-700) 0 35%, #fff 38%);
}
.sep-selects-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}
.sep-selects-wrap .sep-enable {
  margin-top: 0.35rem;
  flex-shrink: 0;
}
.sep-selects {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 12rem;
}
.sep-select {
  font-size: 0.78rem; padding: 0.22rem 0.4rem;
  border: 1.5px solid var(--gray-300); border-radius: 6px;
  background: white; color: var(--gray-700); width: 12rem; max-width: 14rem;
  cursor: pointer; transition: border-color 0.15s;
}
.sep-select:hover { border-color: var(--blue-500); }
.sep-select:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 2px rgba(37,99,235,.12); }
.sep-select option { font-size: 0.8rem; }
.student-special-rule {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700;
  color: #5b21b6; background: #ede9fe; border: 1px solid #c4b5fd;
  padding: 0.12rem 0.45rem; border-radius: 999px; white-space: nowrap;
}
.student-special-rule--none {
  color: var(--gray-300, #d1d5db); background: transparent; border: none; font-weight: 500;
}

/* ═══════════════ DRIVER TOGGLE (chaperone row) ═══════════════ */
/* Every participant row (parent / chaperone / faculty / volunteer) shares one
   grid so Name / Email / Phone / Driver / Seats line up column-to-column even
   when a given type is missing some fields. */
.chaperone-row {
  display: grid;
  grid-template-columns:
    108px               /* category / volunteer badge */
    minmax(0, 1.1fr)    /* name  */
    minmax(0, 1.3fr)    /* email */
    minmax(0, 1fr)      /* phone */
    auto                /* driver / role */
    58px                /* seats */
    1.4rem;             /* remove */
  align-items: center;
  gap: 0.4rem;
  min-height: 34px;
  padding: 0.15rem 0.35rem;
}
.chap-manual-fields { display: contents; }
.chap-faculty-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  grid-column: 2 / 7;      /* faculty picker spans name → seats */
}
.chap-faculty-wrap[hidden],
.chap-manual-fields[hidden] {
  display: none !important;
}
.chap-faculty-select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.38rem 0.5rem;
  border: 1.5px solid var(--gray-300);
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  background: white;
}
.chap-category {
  grid-column: 1;
  min-width: 0;
  padding: 0.38rem 0.45rem;
  border: 1.5px solid var(--gray-300);
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  background: white;
}
#formtab-logistics .chaperone-row input[type="text"],
#formtab-logistics .chaperone-row input[type="email"],
#formtab-logistics .chaperone-row input[type="tel"] {
  min-width: 0;
  width: 100%;
  padding: 0.38rem 0.5rem;
  font-size: 0.82rem;
}
.chaperone-row .chap-name  { grid-column: 2; }
.chaperone-row .chap-email { grid-column: 3; }
.chaperone-row input[type="tel"] { grid-column: 4; }
.chaperone-row .driver-label { grid-column: 5; justify-self: start; }
.chaperone-row .seats-input  { grid-column: 6; }
.chaperone-row .btn-remove-row { grid-column: 7; }
.chaperone-row .chap-faculty-select { color: var(--blue-800); }
.chaperone-row--faculty { background: #f5f3ff; border-radius: 6px; }
/* Logistics tab — tighter chaperones box */
#formtab-logistics {
  gap: 0.75rem;
  padding-top: 1.25rem;
}
#formtab-logistics .logistics-chaperones {
  padding: 0.45rem 0.65rem 0.45rem;
}
#formtab-logistics .participants-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  flex-wrap: wrap;
  width: calc(100% - 0.5rem);
  float: none;
  padding: 0 0.35rem;
}
.participants-need-toggles {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.drivers-needed-toggle {
  flex-shrink: 0;
}
.drivers-needed-toggle .toggle-label {
  font-size: 0.8rem;
  white-space: nowrap;
}
.logistics-collapse-title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.logistics-collapse-title > label,
.logistics-collapse-title > span {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--blue-800);
  margin: 0;
}
.participants-legend .logistics-collapse-title > span {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.logistics-collapse-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  background: var(--gray-50);
  color: var(--blue-800);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.logistics-collapse-btn:hover {
  background: var(--blue-50, #eff6ff);
  border-color: var(--blue-200, #bfdbfe);
}
.logistics-collapse-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.logistics-collapsible.is-collapsed .logistics-collapse-body,
.logistics-collapsible.is-collapsed .logistics-collapse-tools {
  display: none !important;
}
.logistics-collapsible.is-collapsed.groups-field > .groups-header,
.logistics-collapsible.is-collapsed.transport-field > .transport-header {
  margin-bottom: 0;
}
.logistics-collapsible.is-collapsed.logistics-chaperones {
  padding-bottom: 0.35rem;
}
.seat-capacity-summary {
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
  margin-left: auto;
}
.seat-capacity-summary__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 4.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: var(--gray-50, #f8fafc);
  border: 1px solid var(--gray-200);
  line-height: 1.15;
}
.seat-capacity-summary__label {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gray-500);
}
.seat-capacity-summary__value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--blue-800);
  font-variant-numeric: tabular-nums;
}
.seat-capacity-summary__stat--gap .seat-capacity-summary__value {
  color: #b45309;
}
.seat-capacity-summary__stat--ok .seat-capacity-summary__value {
  color: #15803d;
}
.seat-capacity-summary__detail {
  font-size: 0.62rem;
  color: var(--gray-500);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  max-width: 9rem;
  text-align: right;
}
.participants-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
/* Two-column participant cards (same density idea as Groups / Transport) */
#formtab-logistics .logistics-chaperones .dynamic-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  align-content: start;
  margin-bottom: 0.4rem;
}
@media (max-width: 720px) {
  #formtab-logistics .logistics-chaperones .dynamic-rows {
    grid-template-columns: 1fr;
  }
}
#formtab-logistics .chaperone-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: #fff;
  min-height: 0;
  /* Reset the wide single-row grid columns — each cell is half-width now. */
  grid-template-columns: none;
}
#formtab-logistics .chaperone-row .chap-category {
  flex: 0 0 96px;
  width: 96px;
  grid-column: auto;
}
#formtab-logistics .chaperone-row .chap-name,
#formtab-logistics .chaperone-row .chap-email,
#formtab-logistics .chaperone-row input[type="tel"] {
  flex: 1 1 110px;
  min-width: 90px;
  grid-column: auto;
}
#formtab-logistics .chaperone-row .driver-label {
  flex: 0 0 auto;
  grid-column: auto;
  justify-self: unset;
}
#formtab-logistics .chaperone-row .seats-input {
  flex: 0 0 52px;
  width: 52px;
  grid-column: auto;
}
#formtab-logistics .chaperone-row .btn-remove-row {
  flex: 0 0 auto;
  margin-left: auto;
  grid-column: auto;
}
#formtab-logistics .chap-faculty-wrap {
  flex: 1 1 160px;
  grid-column: auto;
}
#formtab-logistics .chaperone-row--selfsigned {
  pointer-events: none;
}
#formtab-logistics .chaperone-row--selfsigned .selfsigned-badge {
  flex: 0 0 auto;
  grid-column: auto;
  justify-self: unset;
}
#formtab-logistics .chaperone-row--selfsigned .chap-ss-name,
#formtab-logistics .chaperone-row--selfsigned .chap-ss-email,
#formtab-logistics .chaperone-row--selfsigned .chap-ss-phone {
  flex: 1 1 100px;
  min-width: 80px;
  grid-column: auto;
}
#formtab-logistics .chaperone-row--selfsigned .chap-ss-role {
  flex: 0 0 auto;
  grid-column: auto;
  justify-self: unset;
}
#formtab-logistics .chaperone-row--selfsigned .chap-ss-remove {
  flex: 0 0 auto;
  margin-left: auto;
  grid-column: auto;
  pointer-events: auto;
}
.driver-label {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.78rem; font-weight: 600; color: var(--green-700); cursor: pointer; white-space: nowrap;
}
.driver-label input[type="checkbox"] { accent-color: var(--green-600); width: 14px; height: 14px; cursor: pointer; }
.seats-input {
  width: 58px; padding: 0.38rem 0.45rem; border: 1.5px solid var(--gray-300);
  border-radius: 6px; font-size: 0.85rem; text-align: center;
}

/* ═══════════════ TRANSPORTATION SECTION ═══════════════ */
.transport-field > .transport-header { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.transport-field > .transport-header .logistics-collapse-title > label,
.transport-field > .transport-header > label { font-weight: 700; font-size: 0.88rem; color: var(--blue-800); margin: 0; }
.transport-tally { font-size: 0.8rem; color: var(--gray-500); margin-left: auto; }
.transport-pdf-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--gray-700) !important;
  cursor: pointer;
  user-select: none;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: #fff;
}
.transport-pdf-toggle input { width: 14px; height: 14px; margin: 0; cursor: pointer; }

/* ═══════════════ AD-HOC PLANNING ═══════════════ */
.adhoc-field {
  margin-top: 0.35rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--gray-200);
}
.adhoc-header {
  display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap;
  margin-bottom: 0.55rem;
}
.adhoc-header > label:first-child {
  font-weight: 700; font-size: 0.88rem; color: var(--blue-800); margin: 0;
}
.adhoc-enable-toggle {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem !important; font-weight: 600 !important;
  color: var(--gray-700) !important; cursor: pointer; user-select: none;
  padding: 0.2rem 0.55rem; border: 1px solid var(--gray-200);
  border-radius: 6px; background: #fff;
}
.adhoc-enable-toggle input { width: 14px; height: 14px; margin: 0; cursor: pointer; accent-color: var(--blue-700); }
.adhoc-hint {
  margin: 0 0 0.65rem; font-size: 0.78rem; color: var(--gray-500); line-height: 1.4;
}
.adhoc-planning-body.hidden { display: none; }
.adhoc-station-lines {
  display: flex; flex-direction: column; gap: 0.3rem;
  margin-top: 0.15rem;
}
.adhoc-station-lines.hidden { display: none; }
.adhoc-station-line {
  display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
}
.adhoc-station-line__label {
  flex-shrink: 0; font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  color: #6d4c41; background: #efebe9; padding: 0.12rem 0.4rem; border-radius: 4px;
  min-width: 2.8rem; text-align: center;
}
.adhoc-station-staff {
  flex: 0 1 11rem; min-width: 8rem; max-width: 14rem;
  padding: 0.28rem 0.4rem; font-size: 0.78rem;
  border: 1px solid var(--gray-200); border-radius: 5px; background: #fff;
}
.adhoc-station-note {
  flex: 1; min-width: 8rem; padding: 0.28rem 0.45rem; font-size: 0.78rem;
  border: 1px solid var(--gray-200); border-radius: 5px; background: #fff;
}
.adhoc-station-actions {
  display: flex; align-items: center; gap: 0.35rem; margin-top: 0.1rem;
}
.adhoc-subtime-row .adhoc-station-lines { margin-left: 0.15rem; }

/* Two-column layout: vehicles left, unassigned right */
.transport-layout { display: grid; grid-template-columns: 1fr 210px; gap: 0.75rem; align-items: start; }
.transport-vehicles { display: flex; flex-direction: column; gap: 0.75rem; }

/* Sticky unassigned panel — follows the coordinator down the page while placing
   groups, and stops once its container scrolls past. Sits just below the sticky
   form tab bar. */
.transport-unassigned-panel { position: sticky; top: 4.25rem; align-self: start; z-index: 5; }
.transport-unassigned-panel .transport-group {
  display: flex; flex-direction: column;
  max-height: calc(100vh - 6rem);
}

/* position:sticky is defeated by an ancestor with overflow:hidden. The admin
   form uses the page's own scroll, so let sticky escape the form box here. */
#view-coordinator .event-form { overflow: visible; }
.transport-unassigned-panel .transport-drop-zone {
  flex: 1; overflow-y: auto; flex-direction: column !important;
  flex-wrap: nowrap !important; align-items: stretch !important;
}
.transport-unassigned-panel .student-chip { width: 100%; justify-content: flex-start; }

.transport-group { border: 1.5px solid var(--gray-200); border-radius: 10px; overflow: hidden; }
.transport-bus-remove {
  margin-left: auto; flex: 0 0 auto;
  width: 22px; height: 22px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18); color: #fff;
  font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.transport-bus-remove:hover { background: #c0392b; }

.transport-group--unassigned { border-color: #cbd5e1; }
.transport-group__header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.75rem; background: var(--blue-800); color: white;
  font-size: 0.8rem; font-weight: 700; flex-shrink: 0;
}
.transport-group--unassigned .transport-group__header { background: #e2e8f0; color: var(--blue-800); border-bottom: 1px solid #cbd5e1; }
.transport-group__header--collapsible { cursor: pointer; }
.transport-collapse-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; padding: 0;
  border: none; border-radius: 4px;
  background: rgba(255,255,255,.18); color: inherit;
  transition: background 0.15s ease;
}
.transport-collapse-btn:hover { background: rgba(255,255,255,.32); }
.transport-group--collapsed .transport-group__header { border-bottom: none; }
/* Collapsed vehicles hide their drop zone. Needs !important because
   .transport-drop-zone sets an explicit display that overrides [hidden]. */
.transport-group--collapsed .transport-drop-zone { display: none !important; }
.transport-group__title { flex-shrink: 0; white-space: nowrap; }
.transport-group--bus .transport-group__header { flex-wrap: nowrap; gap: 0.35rem; }
.bus-driver-select {
  flex-shrink: 0;
  max-width: 11rem;
  padding: 0.12rem 1.4rem 0.12rem 0.4rem;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 6px;
  background: rgba(255,255,255,.14) 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='%23fff' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0.35rem center;
  color: white;
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
}
.bus-driver-select:hover { background-color: rgba(255,255,255,.22); }
.bus-driver-select:focus { outline: 2px solid rgba(255,255,255,.55); outline-offset: 1px; }
.bus-driver-select option { color: var(--gray-900); background: white; }
.transport-group__cap { opacity: 0.75; font-weight: 400; font-size: 0.75rem; margin-left: auto; }
.transport-drop-zone {
  min-height: 52px; padding: 0.5rem 0.6rem; display: flex; flex-wrap: wrap;
  gap: 0.35rem; align-content: flex-start; transition: background 0.12s;
}
.transport-drop-zone.drag-over { background: #e8f4fd !important; outline: 2px dashed var(--blue-600); outline-offset: -3px; }
.transport-drop-hint { font-size: 0.72rem; color: var(--gray-300); font-style: italic; align-self: center; padding: 0.25rem 0.4rem; }

/* ── Student chips ── */
.student-chip {
  display: inline-flex; align-items: center; gap: 0.28rem;
  padding: 0.18rem 0.55rem 0.18rem 0.35rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 500; cursor: grab; user-select: none;
  border: 1px solid transparent; transition: box-shadow 0.12s, opacity 0.12s;
}
.student-chip:active { cursor: grabbing; }
.student-chip.dragging { opacity: 0.35; }
.student-chip:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.18); }
.student-chip--is { background: #e3f2fd; border-color: #90caf9; color: #1565c0; }
.student-chip--ms { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }
.student-chip--us { background: #fff3e0; border-color: #ffcc80; color: #e65100; }
.student-chip--sep-watch {
  box-shadow: 0 0 0 2px #ab47bc;
  background-image: repeating-linear-gradient(
    -45deg, transparent, transparent 4px, rgba(171, 71, 188, 0.08) 4px, rgba(171, 71, 188, 0.08) 8px
  );
}
.student-chip--sep-violation {
  background: #ffebee !important;
  border-color: #e53935 !important;
  color: #b71c1c !important;
  box-shadow: 0 0 0 2px #e53935;
  font-weight: 700;
}
.transport-group--sep-violation .transport-group__header {
  background: linear-gradient(90deg, #c62828 0%, #d32f2f 55%, #37474f 55%);
}
.transport-group--sep-violation .transport-group__header::after {
  content: "Separation conflict";
  margin-left: 0.5rem;
  font-size: 0.65rem;
  font-weight: 400;
  opacity: 0.9;
  background: rgba(255,255,255,.2);
  padding: 1px 6px;
  border-radius: 4px;
}
.student-chip__grade { font-size: 0.62rem; font-weight: 800; opacity: 0.7; }

/* ═══════════════ COMMUNICATION TAB ═══════════════ */
.comm-intro { margin-bottom: 18px; }
.comm-recipients { margin-top: 12px; }
.comm-history-btn { margin-top: 12px; }

/* Send-history popup */
.comm-history-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10, 49, 97, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.comm-history-modal {
  background: #fff; border-radius: 12px; width: 100%; max-width: 620px;
  max-height: 82vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); overflow: hidden;
}
.comm-history-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--gray-200, #e5e7eb);
}
.comm-history-modal__head h3 { margin: 0; font-size: 1rem; color: #0A3161; }
.comm-history-modal__close {
  border: none; background: none; font-size: 1.6rem; line-height: 1;
  cursor: pointer; color: var(--gray-400, #9ca3af); padding: 0 4px;
}
.comm-history-modal__close:hover { color: var(--gray-600, #4b5563); }
.comm-history-modal__body { padding: 14px 18px; overflow-y: auto; }
.comm-history-section { margin-bottom: 18px; }
.comm-history-section:last-child { margin-bottom: 0; }
.comm-history-section h4 {
  margin: 0 0 8px; font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: .03em; color: #28724F; display: flex; align-items: center; gap: 8px;
}
.comm-history-count {
  background: var(--gray-100, #f3f4f6); color: var(--gray-600, #4b5563);
  font-size: 0.7rem; font-weight: 700; border-radius: 999px; padding: 1px 8px;
}
.comm-history-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.comm-history-table th {
  text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--gray-400, #9ca3af); font-weight: 700; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--gray-200, #e5e7eb);
}
.comm-history-table td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--gray-100, #f3f4f6); color: #333; vertical-align: top; }
.comm-history-empty { margin: 0; font-size: 0.82rem; color: var(--gray-400, #9ca3af); }
.comm-recipients__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #28724F;
  margin-bottom: 6px;
}
.comm-recipients__empty {
  font-size: 0.85rem;
  color: #637381;
  background: #f6f9fc;
  border: 1px dashed #d6e2f0;
  border-radius: 8px;
  padding: 10px 14px;
}
.comm-recip-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.comm-recip-chip {
  background: #eaf2fb;
  color: #0A3161;
  border: 1px solid #d6e2f0;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.8rem;
  font-weight: 600;
}
.comm-previews {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.comm-preview-card {
  border: 1px solid #e6ecf3;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.comm-preview-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  background: #f6f9fc;
  border-bottom: 1px solid #e6ecf3;
}
.comm-preview-card__title {
  font-weight: 700;
  color: #0A3161;
  font-size: 0.95rem;
  margin-right: 10px;
}
.comm-preview-card__when {
  font-size: 0.78rem;
  color: #637381;
}
.comm-preview-card__subject {
  font-size: 0.8rem;
  color: #334;
}
.comm-preview-card__body {
  padding: 22px;
  background: #f0f3f7;
}

/* Event image + internal graphic side by side to save vertical space. */
.images-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
.images-row--internal-only { grid-template-columns: minmax(0, 1fr); }
/* Internal graphic + its PDF side by side (the public Event Image slot is hidden). */
.images-row--internal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 640px) {
  .images-row--internal { grid-template-columns: 1fr; }
}

/* ── Internal Planning PDF card ── */
#internal-pdf-placeholder-hint {
  max-width: 22ch;
}
.internal-pdf-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
  padding: 0; border: none; background: none; cursor: pointer; font: inherit;
  color: var(--blue-800);
}
.internal-pdf-card__thumb { position: relative; display: block; line-height: 0; }
.internal-pdf-card__thumb img {
  width: 140px; max-width: 100%; border-radius: var(--radius-md); display: block;
  object-fit: cover; box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.internal-pdf-card:hover .internal-pdf-card__thumb img {
  transform: scale(1.04); box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.internal-pdf-card__badge {
  position: absolute; left: 6px; bottom: 6px;
  background: #c0392b; color: #fff; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.06em; padding: 2px 6px; border-radius: 4px; line-height: 1.4;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.internal-pdf-card__label { font-size: 0.78rem; font-weight: 600; }
.internal-pdf-card:hover .internal-pdf-card__label { text-decoration: underline; }
.internal-pdf-card.is-busy { pointer-events: none; opacity: 0.55; }
.internal-pdf-card:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 3px; border-radius: var(--radius-md); }
.images-row .field { margin: 0; }
@media (max-width: 640px) {
  .images-row { grid-template-columns: 1fr; }
}

.internal-tag {
  display: inline-block;
  margin-left: 6px;
  background: #fff4d6;
  color: #8a5a00;
  border: 1px solid #f5d98a;
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.faculty-pictorial-email-modal {
  max-width: min(640px, 94vw);
  text-align: left;
}
.faculty-pictorial-email-modal .fpe-meta {
  display: grid;
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
  font-size: 0.88rem;
}
.faculty-pictorial-email-modal .fpe-meta strong {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  margin-bottom: 0.2rem;
}
.faculty-pictorial-email-modal .fpe-test-badge {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  background: #f5b731;
  color: #0a3161;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.faculty-pictorial-email-modal .fpe-attach-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.faculty-pictorial-email-modal .fpe-preview-label {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
}
.faculty-pictorial-email-modal .fpe-preview-frame {
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: #f8fafc;
  padding: 0.75rem;
  max-height: 42vh;
  overflow: auto;
  margin-bottom: 1rem;
}
.faculty-pictorial-email-modal .fpe-preview-frame iframe {
  width: 100%;
  min-height: 280px;
  border: 0;
  background: #fff;
  border-radius: 6px;
}

/* ── Clubs beta (Feed → LOTCs | Clubs + My Clubs) ── */
.feed-clubs-toolbar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin: 0 0 0.85rem;
}
.feed-clubs-toolbar.hidden { display: none; }
.feed-source-toggle {
  display: inline-flex;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.feed-source-toggle__btn {
  border: none;
  background: transparent;
  color: var(--gray-500);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.38rem 0.85rem;
  cursor: pointer;
  line-height: 1.2;
}
.feed-source-toggle__btn.active {
  background: var(--blue-800);
  color: #fff;
}
.feed-my-clubs-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}
.feed-my-clubs-btn.is-active {
  border-color: var(--blue-800);
  color: var(--blue-800);
  background: #eef3f9;
}
.clubs-feed-wrap.hidden,
.my-clubs-panel.hidden { display: none; }
.my-clubs-empty-hint {
  font-size: 0.85rem;
  color: var(--gray-400);
}
.club-feed-card.pub-accordion-item {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
  cursor: pointer;
}
.club-feed-card .pub-feed-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 0.55rem 0.75rem;
}
.club-feed-card__body { min-width: 0; width: 100%; }
.club-feed-card__top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.club-feed-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.club-follow-btn {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0.22rem 0.7rem !important;
  font-size: 0.75rem !important;
}
.club-feed-card__follow-stack {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
}
.club-feed-card__following-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gray-500);
  line-height: 1.1;
}
.club-feed-card__follow-stack .club-follow-btn {
  margin-left: 0;
}
.club-feed-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.35rem;
  margin-top: 0.28rem;
  font-size: 0.75rem;
  color: var(--gray-500);
  line-height: 1.3;
}
.club-feed-card__date {
  font-weight: 700;
  color: var(--green-700);
}
.club-feed-card__sep { opacity: 0.55; }
.club-feed-card__reg {
  font-weight: 700;
  color: #b45309;
}
.club-feed-card__activity {
  margin: 0.28rem 0 0;
  font-size: 0.8rem;
  color: var(--gray-700);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 560px) {
  .club-feed-card .pub-feed-thumb {
    flex-basis: 4.5rem;
    width: 4.5rem;
    min-height: 4.5rem;
  }
  .club-feed-card__title { font-size: 0.9rem; }
  .feed-my-clubs-btn { margin-left: 0; }
}
.club-modal {
  position: relative;
  max-width: 440px;
  width: min(94vw, 440px);
  padding: 0;
  overflow: hidden;
  text-align: left;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.club-modal__close {
  position: absolute;
  top: 0.65rem;
  right: 0.75rem;
  z-index: 2;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(255,255,255,.8);
  cursor: pointer;
  padding: 0.2rem 0.45rem;
}
.club-modal__close:hover { color: #fff; }
.club-modal__header {
  position: relative;
  background: var(--blue-800);
  color: #fff;
  padding: 1.25rem 1.5rem 1.1rem;
}
.club-modal__title {
  margin: 0 2rem 0.25rem 0;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
}
.club-modal__when {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.9;
}
.club-modal__flyer {
  display: inline-block;
  margin: 0.65rem 0 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.35);
  line-height: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.club-modal__flyer.hidden { display: none; }
.club-modal__flyer img {
  display: block;
  width: 4.25rem;
  height: auto;
  vertical-align: top;
}
.club-modal__flyer:hover {
  outline: 2px solid rgba(255,255,255,.7);
  outline-offset: 1px;
}
.club-modal__body {
  padding: 1rem 1.25rem 0.25rem;
}
.club-modal__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 0.85rem;
  margin: 0 0 1rem;
}
.club-modal__facts div { min-width: 0; }
.club-modal__facts dt {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-400);
}
.club-modal__facts dd {
  margin: 0.15rem 0 0;
  font-size: 0.88rem;
  color: var(--gray-900);
}
.club-modal__section h4 {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
}
.club-modal__section p {
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--gray-700);
}
.club-modal__week h4 { color: var(--green-700); }
.club-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem 1.1rem;
  border-top: 1px solid var(--gray-100);
}
.my-clubs-panel .club-feed-card + .club-feed-card {
  margin-top: 0.5rem;
}

/* Clubs calendar (parents page) — weekday grid + per-club pill colors */
#public-feed-section.cal-source--clubs .calendar__dow,
#public-feed-section.cal-source--clubs .calendar__grid {
  grid-template-columns: repeat(5, 1fr);
}
#public-feed-section.cal-source--clubs .calendar .cal-day:nth-child(7n) {
  border-right: 1px solid var(--gray-100);
}
#public-feed-section.cal-source--clubs .calendar .cal-day:nth-child(5n) {
  border-right: none;
}
#public-feed-section.cal-source--clubs .cal-event-pill {
  font-size: 0.665rem;
  padding: 1px 4px;
  margin-bottom: 1px;
  line-height: 1.2;
  border: none;
  width: 100%;
  text-align: left;
}
#public-feed-section.cal-source--clubs .cal-event-pill.cal-event-pill--holiday {
  background: #fdecea;
  color: #c62828;
  font-weight: 700;
}
.cal-event-pill.club-cal--chess { background: #334155; color: #fff; }
.cal-event-pill.club-cal--music { background: #7c3aed; color: #fff; }
.cal-event-pill.club-cal--quiz-bowl { background: #2563eb; color: #fff; }
.cal-event-pill.club-cal--novel { background: #b45309; color: #fff; }
.cal-event-pill.club-cal--board-games { background: #0f766e; color: #fff; }
.cal-event-pill.club-cal--photography { background: #57534e; color: #fff; }
.cal-event-pill.club-cal--pickleball { background: #16a34a; color: #fff; }
.cal-event-pill.club-cal--art { background: #db2777; color: #fff; }
.cal-event-pill.club-cal--jigsaw { background: #0891b2; color: #fff; }
.cal-event-pill.club-cal--reading-nook { background: #c026a3; color: #fff; }
.cal-event-pill.club-cal--default { background: #28724F; color: #fff; }
@media (max-width: 640px) {
  #public-feed-section.cal-source--clubs .cal-event-pill {
    font-size: 0.532rem;
    padding: 0 3px;
    line-height: 1.15;
  }
}

/* ─────────── USER ACCESS SEARCH ─────────── */
.ua-search-row { margin: 0 0 0.6rem; }
.ua-search {
  position: relative; display: flex; align-items: center;
  max-width: 380px;
}
.ua-search__icon {
  position: absolute; left: 0.6rem; color: var(--gray-400); pointer-events: none;
}
.ua-search__input {
  width: 100%; padding: 0.5rem 2rem 0.5rem 2rem;
  border: 1px solid var(--gray-300); border-radius: var(--radius-md);
  font: inherit; font-size: 0.88rem; color: var(--blue-800); background: #fff;
  transition: var(--transition);
}
.ua-search__input:focus {
  outline: none; border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(10, 49, 97, 0.10);
}
.ua-search__input::-webkit-search-cancel-button { display: none; }
.ua-search__clear {
  position: absolute; right: 0.35rem; border: none; background: none;
  font-size: 1.25rem; line-height: 1; color: var(--gray-400);
  cursor: pointer; padding: 0 0.35rem; border-radius: 4px;
}
.ua-search__clear:hover { color: var(--blue-800); }

/* ─────────── IS PHOTO / VIDEO GALLERY ─────────── */
.is-gal { padding: 0.25rem 0 2.5rem; }
.is-gal__bar {
  display: flex; align-items: center; gap: 0.5rem;
  flex-wrap: nowrap; margin-bottom: 0.75rem;
}
.is-gal__bar .is-gal__weekwrap { flex: 1 1 auto; min-width: 0; }
.is-gal__bar .is-gal__weekly,
.is-gal__bar .is-gal__upload { flex: 0 0 auto; white-space: nowrap; }
.is-gal__title {
  margin: 0; font-family: var(--font-display, inherit);
  font-size: 1.35rem; color: var(--blue-800);
}
.is-gal__sub { margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--gray-400); }
.is-gal__upload {
  display: inline-flex; align-items: center; gap: 0.4rem;
  cursor: pointer; flex-shrink: 0;
}
.is-gal__status {
  margin: 0 0 0.75rem; font-size: 0.83rem; padding: 0.5rem 0.7rem;
  border-radius: var(--radius-md); background: var(--gray-50); color: var(--gray-500, #6b7785);
}
.is-gal__status--ok    { background: #e8f5ec; color: #1c6b3a; }
.is-gal__status--error { background: #fdeaea; color: #a4262c; }
.is-gal__empty { text-align: center; color: var(--gray-400); padding: 2.5rem 1rem; }

/* Mobile first: two columns on a phone, more as the screen grows. */
.is-gal__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (min-width: 560px)  { .is-gal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; } }
@media (min-width: 900px)  { .is-gal__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem; } }
@media (min-width: 1240px) { .is-gal__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.is-gal__tile {
  position: relative; margin: 0; border-radius: var(--radius-md);
  overflow: hidden; background: var(--gray-100, #eef1f4);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}
.is-gal__open {
  display: block; width: 100%; padding: 0; border: none; background: none;
  cursor: pointer; line-height: 0; position: relative;
}
.is-gal__media {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  background: var(--gray-200, #dfe4ea);
}
/* Shown when media genuinely fails, instead of an unexplained grey square. */
.is-gal__fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.35rem; background: var(--gray-100, #eef1f4); color: var(--gray-400);
  font-size: 0.72rem; text-align: center; cursor: pointer; padding: 0.5rem;
}
.is-gal__fallback-txt { font-weight: 600; }
.is-gal__fallback:hover { background: var(--gray-200, #dfe4ea); }
/* The video element paints its first frame; keep it filling the tile. */
video.is-gal__media { background: #000; }

.is-gal__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; padding-left: 3px;
}
.is-gal__cap {
  margin: 0; padding: 0.4rem 0.5rem; font-size: 0.76rem; line-height: 1.35;
  color: var(--blue-800); background: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.is-gal__tools {
  position: absolute; top: 0.35rem; right: 0.35rem;
  display: flex; gap: 0.25rem;
}
.is-gal__tool {
  position: relative;
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); color: var(--blue-800);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}
/* Keep the small circle, but grow the tappable area to the 44px minimum so
   these are comfortable on a phone without covering the photo. */
.is-gal__tool::after { content: ""; position: absolute; inset: -7px; }
@media (hover: none) and (pointer: coarse) {
  .is-gal__tool { width: 34px; height: 34px; }
  .is-gal__tool::after { inset: -5px; }
  .is-gal__tools { gap: 0.4rem; }
}
/* Gallery picker for the dual-access account. Fixed rather than absolute so
   the sticky tab bar cannot clip it. */
.gal-div-menu {
  position: fixed; z-index: 200;
  background: #fff; border: 1px solid var(--gray-300, #cbd5e1);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(10, 49, 97, 0.18);
  padding: 4px; min-width: 96px;
  display: flex; flex-direction: column; gap: 2px;
}
.gal-div-menu__item {
  border: none; background: none; text-align: left; cursor: pointer;
  padding: 9px 14px; border-radius: 7px;
  font: 700 0.82rem/1 var(--font-sans, sans-serif);
  letter-spacing: 0.04em; color: var(--blue-800, #0a3161);
}
.gal-div-menu__item:hover { background: #eef3fa; }
.gal-div-menu__item.is-active { background: var(--blue-800, #0a3161); color: #fff; }

.is-gal__vtools {
  position: absolute; top: 0.35rem; right: 0.35rem;
  display: flex; gap: 0.25rem;
}
@media (hover: none) and (pointer: coarse) { .is-gal__vtools { gap: 0.4rem; } }
.is-gal__tool.is-busy { opacity: 0.55; cursor: progress; }
.is-gal__tool:hover { background: #fff; }
.is-gal__tool--danger:hover { color: #c0392b; }

/* ── Caption sheet ── */
body.is-cap-open { overflow: hidden; }
.is-cap { position: fixed; inset: 0; z-index: 1300; }
.is-cap.hidden { display: none; }
.is-cap__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.is-cap__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #fff; border-radius: 16px 16px 0 0;
  padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease;
}
@media (min-width: 640px) {
  .is-cap__panel {
    left: 50%; right: auto; bottom: 50%;
    width: min(460px, 92vw); transform: translate(-50%, 50%);
    border-radius: var(--radius-md);
  }
}
.is-cap__grabber {
  width: 38px; height: 4px; border-radius: 2px; background: var(--gray-300);
  margin: 0.25rem auto 0.75rem;
}
@media (min-width: 640px) { .is-cap__grabber { display: none; } }
.is-cap__row { display: flex; gap: 0.75rem; align-items: flex-start; }
.is-cap__thumb {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 8px;
  overflow: hidden; background: var(--gray-200, #dfe4ea);
}
.is-cap__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.is-cap__thumb--video {
  background: var(--blue-800) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='23 7 16 12 23 17 23 7'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}
.is-cap__field { flex: 1; min-width: 0; }
.is-cap__label {
  display: block; font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--gray-400); margin-bottom: 0.25rem;
}
.is-cap__input {
  width: 100%; padding: 0.6rem 0.7rem;
  border: 1px solid var(--gray-300); border-radius: var(--radius-md);
  /* 16px minimum stops iOS Safari from zooming the page on focus. */
  font: inherit; font-size: 16px; color: var(--blue-800); background: #fff;
}
.is-cap__input:focus {
  outline: none; border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(10, 49, 97, 0.10);
}
.is-cap__meta {
  display: flex; justify-content: flex-end;
  font-size: 0.72rem; color: var(--gray-400); margin-top: 0.25rem;
}
.is-cap__actions {
  display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.85rem;
}
.is-cap__actions .btn { min-height: 44px; padding-inline: 1.1rem; }

/* ── Full-screen viewer ── */
body.is-viewer-open { overflow: hidden; }
.is-viewer {
  position: fixed; inset: 0; z-index: 1250;
  background: rgba(0, 0, 0, 0.94);
  display: flex; flex-direction: column;
}
.is-viewer.hidden { display: none; }
.is-viewer__stage {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 3rem 0.5rem 0.5rem;
}
.is-viewer__media {
  max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 4px; display: block;
}
.is-viewer__close {
  position: absolute; top: calc(0.5rem + env(safe-area-inset-top)); right: 0.6rem;
  width: 44px; height: 44px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff;
  font-size: 1.7rem; line-height: 1; cursor: pointer; z-index: 2;
}
.is-viewer__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff;
  font-size: 1.8rem; line-height: 1; cursor: pointer; z-index: 2;
}
.is-viewer__nav--prev { left: 0.5rem; }
.is-viewer__nav--next { right: 0.5rem; }
.is-viewer__nav.hidden, .is-viewer__tools.hidden { display: none; }
/* Touch devices swipe instead — the arrows only crowd a phone screen. */
@media (hover: none) and (pointer: coarse) { .is-viewer__nav { display: none; } }
.is-viewer__foot {
  flex-shrink: 0; text-align: center; color: #fff;
  padding: 0.6rem 1rem calc(1rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.is-viewer__cap {
  margin: 0; font-size: 0.92rem; line-height: 1.45; max-width: 40rem;
}
.is-viewer__cap:empty { display: none; }
.is-viewer__counter { margin: 0; font-size: 0.76rem; opacity: 0.6; }
.is-viewer__tools { display: flex; gap: 0.5rem; }
.is-viewer__tools .btn {
  color: #fff; border-color: rgba(255, 255, 255, 0.35); min-height: 40px;
}
.is-viewer__tools .btn:hover { background: rgba(255, 255, 255, 0.12); }
.is-viewer__del:hover { color: #ff8a80; border-color: #ff8a80; }

/* ─────────── IS WEEKLY EMAIL (pick 3 + preview) ─────────── */
.is-gal__weekly { display: inline-flex; align-items: center; gap: 0.4rem; }
.is-gal__weekly-count {
  font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.4rem;
  border-radius: 999px; background: var(--blue-800); color: #fff;
}
.is-gal__pickhint {
  margin: 0 0 0.75rem; font-size: 0.8rem; color: var(--gray-400);
}

.is-gal__tool--star.is-on { background: #ffd54a; color: #6b4c00; }
.is-gal__tile--picked { outline: 3px solid var(--blue-800); outline-offset: -3px; }
.is-gal__rank {
  position: absolute; top: 0.35rem; left: 0.35rem;
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px;
  background: var(--blue-800); color: #fff;
  font-size: 0.72rem; font-weight: 700; line-height: 22px; text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

/* ── Preview modal ── */
body.is-mail-open { overflow: hidden; }
.is-mail { position: fixed; inset: 0; z-index: 1320; }
.is-mail.hidden { display: none; }
.is-mail__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.is-mail__box {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--gray-50, #f6f7f9);
}
@media (min-width: 720px) {
  .is-mail__box {
    inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(560px, 94vw); max-height: 92vh;
    border-radius: var(--radius-md); overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
  }
}
.is-mail__head {
  display: flex; align-items: center; gap: 0.6rem;
  padding: calc(0.75rem + env(safe-area-inset-top)) 1rem 0.7rem;
  background: #fff; border-bottom: 1px solid var(--gray-200, #e6e9ef);
  flex-shrink: 0;
}
.is-mail__head .is-mail__title { flex: 1 1 auto; min-width: 0; }
.is-mail__head .is-mail__send { flex: 0 0 auto; margin-left: auto; }
.is-mail__head .is-mail__close { flex: 0 0 auto; }
.is-mail__title { margin: 0; font-size: 1.05rem; color: var(--blue-800); }
.is-mail__when { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--gray-400); }
.is-mail__close {
  border: none; background: none; font-size: 1.7rem; line-height: 1;
  color: var(--gray-400); cursor: pointer; padding: 0 0.3rem;
}
.is-mail__subject {
  padding: 0.6rem 1rem; background: #fff; font-size: 0.85rem;
  color: var(--blue-800); border-bottom: 1px solid var(--gray-200, #e6e9ef);
  display: flex; gap: 0.5rem; align-items: baseline;
}
.is-mail__subject-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--gray-400); flex-shrink: 0;
}
.is-mail__stage {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
  display: flex; justify-content: center; align-items: flex-start;
}
/* Phone-width frame: this is how ~90% of readers will see it. */
.is-mail__phone {
  width: 100%; max-width: 380px; align-self: flex-start;
  border: 1px solid var(--gray-300); border-radius: 14px;
  overflow: hidden; background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
}
/* Height is set from the email's own content in JS, so the modal scrolls the
   whole message rather than the iframe scrolling inside a short window. */
.is-mail__frame {
  width: 100%; height: 60vh; border: 0; display: block; background: #fff;
}
.is-mail__note {
  margin: 0; padding: 0.5rem 1rem; font-size: 0.78rem;
  color: var(--gray-400); text-align: center; background: #fff;
  border-top: 1px solid var(--gray-200, #e6e9ef);
}
.is-mail__foot {
  padding: 0.75rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
  background: #fff; display: flex; justify-content: flex-end;
}
.is-mail__foot .btn { min-height: 44px; }

/* Personalised intro for the weekly IS email */
.is-mail__notewrap {
  background: #fff; padding: 0.6rem 1rem 0.7rem;
  border-bottom: 1px solid var(--gray-200, #e6e9ef);
}
.is-mail__notelabel {
  display: block; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--gray-400); margin-bottom: 0.3rem;
}
.is-mail__noteopt { font-weight: 500; text-transform: none; letter-spacing: 0; }
.is-mail__noteinput {
  width: 100%; resize: none; overflow: hidden; padding: 0.55rem 0.7rem;
  min-height: 2.4rem;
  border: 1px solid var(--gray-300); border-radius: var(--radius-md);
  /* 16px keeps iOS from zooming the page when it takes focus. */
  font: inherit; font-size: 16px; line-height: 1.45;
  color: var(--blue-800); background: #fff; box-sizing: border-box;
}
.is-mail__noteinput:focus {
  outline: none; border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(10, 49, 97, 0.10);
}
.is-mail__notemeta {
  display: flex; justify-content: flex-end;
  font-size: 0.72rem; color: var(--gray-400); margin-top: 0.2rem;
}

/* Week picker, left of the Weekly Email button */
.is-gal__weekwrap { display: inline-flex; align-items: center; gap: 0.4rem; }
.is-gal__weeklabel {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--gray-400);
}
.is-gal__weekselect {
  /* 16px stops iOS zooming the page when the picker takes focus. */
  font: inherit; font-size: 16px;
  width: 100%; min-width: 0;
  padding: 0.4rem 0.5rem; min-height: 40px;
  border: 1px solid var(--gray-300); border-radius: var(--radius-md);
  background: #fff; color: var(--blue-800); cursor: pointer;
  max-width: 60vw;
}
.is-gal__weekselect:focus {
  outline: none; border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(10, 49, 97, 0.10);
}
@media (max-width: 480px) {
  .is-gal__actions { width: 100%; }
  .is-gal__weekwrap { flex: 1 1 auto; min-width: 0; }
  .is-gal__weekselect { flex: 1 1 auto; min-width: 0; max-width: none; }
}

/* Manual send row at the top of the weekly-email preview */
.is-mail__sendbar {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.6rem 1rem; background: #fff;
  border-bottom: 1px solid var(--gray-200, #e6e9ef);
}
.is-mail__send { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; }
.is-mail__send[disabled] { opacity: 0.6; pointer-events: none; }
.is-mail__sendnote {
  font-size: 0.76rem; color: var(--gray-400);
  margin: 0; padding: 0.4rem 1rem; background: #fff; flex-shrink: 0;
}
.is-mail__sendnote.hidden { display: none; }
.is-mail__sendnote--ok { color: #1c6b3a; font-weight: 600; }
.is-mail__sendnote--error { color: #a4262c; font-weight: 600; }

/* Calendar page: LOTCs/Clubs on the left, Calendar Sync hard right, one line. */
.cal-toolbar {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%; flex-wrap: nowrap;
}
.cal-toolbar .feed-source-toggle { flex: 0 0 auto; }
.cal-toolbar .feed-source-toggle.hidden { display: none; }
.cal-toolbar__sync { margin-left: auto; flex: 0 0 auto; }
@media (max-width: 420px) {
  /* Keep the button on the line by dropping to the icon on very small phones. */
  .cal-toolbar__sync .usl-cal-sync-btn__label { display: none; }
}

/* ── White cards on a white page ──
   The page background used to be off-white, which was what separated these
   cards from it. On white they need a hairline of their own; box-sizing is
   border-box everywhere, so this changes no outer dimension. */
.saved-events,
.calendar,
.pub-accordion-item,
.analytics-panel,
.student-list-panel,
.volunteer-center-panel,
.user-access-panel,
.admin-feedback-panel {
  border: 1px solid var(--gray-200);
}
/* The coordinator shell deliberately runs edge-to-edge; keep it flush. */
#view-coordinator .event-form { border: none; }

/* All three IS controls share one row; tighten them on phones so they fit. */
@media (max-width: 520px) {
  .is-gal__bar { gap: 0.35rem; }
  .is-gal__bar .is-gal__weeklabel { display: none; }
  .is-gal__bar .btn { padding: 0.45rem 0.6rem; font-size: 0.78rem; }
  .is-gal__weekselect { font-size: 16px; padding-inline: 0.4rem; }
}

/* ── Feed card, mobile layout ──
   Three rows in the text column:
     1. title (single line, ellipsised) with the date pushed hard right
     2. IS/MS/US, category, cars/chaperone needed, sign-up
     3. description, clamped to two lines
   The card is sized by that content rather than a fixed height, and the
   thumbnail stretches to match it, so the image meets the top and bottom
   edges exactly instead of leaving a sliver. */
@media (max-width: 640px) {
  /* One height for every card, matching the September LOTC cards. The square
     thumbnail follows it, so no card stretches taller than another. */
  .pub-accordion-item {
    --pub-feed-card-height: 5.5rem;
    height: var(--pub-feed-card-height);
    min-height: var(--pub-feed-card-height);
    max-height: var(--pub-feed-card-height);
    overflow: hidden;
  }
  /* Fixed WIDTH, height stretched to the card. The width must be definite:
     with width:auto the column took its basis from the image's intrinsic size
     (a 5184px photo), and aspect-ratio then dragged the card to match. */
  .pub-accordion-item .pub-feed-thumb {
    flex: 0 0 var(--pub-feed-card-height);
    width: var(--pub-feed-card-height);
    height: auto;
    min-height: 100%;
    align-self: stretch;
    aspect-ratio: auto;
  }
  .pub-accordion-item .pub-feed-thumb__img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }

  /* Grid, not flex: a wrapping flex row assigns items to lines by their
     unshrunk widths, so where the badges landed depended on how long the title
     and date happened to be. Grid places them explicitly.
       row 1:  title .................. date
       row 2:  IS/MS/US ...... category, cars, sign-up  */
  .pub-accordion-item .pub-feed-header__title-cluster { display: contents; }
  .pub-accordion-item .pub-feed-header__title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 0.5rem;
    row-gap: 0.1rem;
    align-items: center;
  }
  .pub-accordion-item .pub-card-header__title {
    grid-row: 1; grid-column: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 700;
  }
  .pub-accordion-item .pub-card-header__date {
    grid-row: 1; grid-column: 2;
    justify-self: end;
    white-space: nowrap;
    font-size: 0.78rem;
  }
  /* Both span the full row and justify to opposite ends. Sharing one cell this
     way keeps them off column 2, which previously took its width from the
     WIDEST of the date and this badge row -- so a card with "cars needed"
     squeezed its title down to 54% while a card without ran to 77%. */
  .pub-accordion-item .pub-card-header__grades {
    grid-row: 2; grid-column: 1 / -1;
    justify-self: start;
    display: flex; gap: 0.2rem; align-items: center;
  }
  .pub-accordion-item .pub-feed-header__meta {
    grid-row: 2; grid-column: 1 / -1;
    justify-self: end;
    display: flex; align-items: center; gap: 0.3rem;
    flex-wrap: nowrap;
    margin-top: 0;
  }
  .pub-accordion-item .pub-feed-header__title-gap { display: none; }

  /* Folded in from the old polish block, which used to sit LATER in the file
     and quietly undid the rules above it: it re-set a fixed card height,
     put aspect-ratio back on the thumb, and turned the title into a two-line
     -webkit-box, which is why titles were wrapping to five lines and the
     thumbnail stopped filling the card. */
  .pub-accordion-item .pub-card-header { padding: 0.4rem 0.55rem 0.05rem; gap: 0.15rem; }
  .pub-accordion-item .pub-feed-main { justify-content: flex-start; }
  .pub-accordion-item .pub-card { flex: 0 1 auto; }
  .pub-accordion-item .pub-card__body { flex: 0 1 auto; padding: 0 0.55rem 0.4rem; }
  .pub-accordion-item .pub-card__summary {
    font-size: 0.82rem; line-height: 1.32; -webkit-line-clamp: 2;
  }
}

@media (max-width: 380px) {
  .pub-accordion-item .pub-card-header__title { font-size: 0.95rem; }
  .pub-accordion-item .pub-card__summary { font-size: 0.79rem; -webkit-line-clamp: 2; }
}

/* Parents Feed -> Events: calendar events an admin has highlighted. They reuse
   the LOTC feed card; a warm left edge marks them as featured. */
#events-feed .pub-accordion-item--highlight { border-left: 4px solid #d4a017; }

/* Admin Calendar Events list: the Highlight toggle on each row. */
.special-dates-list-highlight.is-on {
  background: #fff4d6;
  border-color: #d4a017;
  color: #7a5600;
}

/* PUSH (test) sits just left of Calendar Sync. It takes over the auto margin that
   pushes the pair to the right, but only while it is visible, so Calendar Sync
   stays right-aligned for everyone who does not see PUSH. */
.cal-toolbar__push { margin-left: auto; flex: 0 0 auto; letter-spacing: 0.04em; }
.cal-toolbar__push:not(.hidden) + .cal-toolbar__sync { margin-left: 0.5rem; }
.cal-toolbar__push.is-on { background: #eaf6ee; border-color: #2e7d32; color: #1b5e20; }

/* Desktop: the Calendar Events list and its editor are 3x wider so events are easier
   to edit.
   Phones and narrow windows keep the original sizes above. */
@media (min-width: 721px) {
  .special-dates-list-modal { max-width: 1680px; width: min(1680px, 94vw); }
  .special-date-modal { max-width: 1860px; width: min(1860px, 94vw); }
}

/* Parent videos, shown wherever event photos are: feed, calendar, event popup,
   admin grids. Small tiles show the first frame with a play badge; the full
   viewers play the clip. */
.event-media-video { position: relative; display: inline-block; vertical-align: middle; line-height: 0; }
.event-media-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box; padding-left: 2px;
  background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 10px; line-height: 22px; text-align: center;
  pointer-events: none;
}
video.event-photos-strip__thumb,
video.event-photos-gallery__thumb,
video.pub-special-date-item__photo,
video.cal-day-card__photo { background: #000; pointer-events: none; }
.edm-header-photo video { width: 64px; height: 64px; object-fit: cover; display: block; background: #000; pointer-events: none; }
.event-photos-grid__item .event-media-video { display: block; width: 100%; height: 100%; }
.event-photos-grid__item video { width: 100%; height: 100%; object-fit: cover; cursor: pointer; background: #000; }
.parent-photo-tile--video .parent-photo-tile__frame { position: relative; }
.parent-photo-tile__frame video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; pointer-events: none; }
.parent-review__video { max-width: 100%; max-height: 100%; border-radius: 6px; background: #000; }
.photo-carousel__video { max-width: 92vw; max-height: 75vh; border-radius: 8px; background: #000; }
.photo-carousel__img[hidden],
.photo-carousel__video[hidden],
.parent-review__img[hidden],
.parent-review__video[hidden] { display: none !important; }

/* Gallery folders: same tile size as a photo, with the newest item as the
   cover, a folder chip, and the item count. */
.is-gal__tile--folder .is-gal__open { background: #eef2f9; }
.is-gal__tile--folder .is-gal__media { filter: brightness(0.82); }
.is-gal__folderblank {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
  width: 100%; height: 100%; color: #7d8ba6;
  background: repeating-linear-gradient(45deg, #eef2f9, #eef2f9 8px, #e6ecf6 8px, #e6ecf6 16px);
}
.is-gal__folderblanktext {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: #67748f;
}
.is-gal__folderchip {
  position: absolute; top: 6px; left: 6px; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(31, 51, 99, 0.88); color: #fff; pointer-events: none;
}
.is-gal__foldernum {
  position: absolute; right: 6px; bottom: 6px; pointer-events: none;
  background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 0.68rem; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
}
.is-gal__cap--folder {
  font-weight: 700; color: var(--blue-800, #1f3363);
}
.is-gal__tile--folder .is-gal__cap { display: block; }

/* The bar shown while a folder is open. */
.is-gal__folderbar {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin: 0 0 0.6rem; padding: 0.5rem 0.65rem;
  background: #eef2f9; border-radius: 8px;
}
.is-gal__folderbar.hidden { display: none; }
.is-gal__back {
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: none; border: none; cursor: pointer; padding: 4px 2px;
  color: var(--blue-800, #1f3363); font-size: 0.85rem; font-weight: 700;
}
.is-gal__back:hover { text-decoration: underline; }
.is-gal__foldername {
  font-weight: 700; color: var(--blue-800, #1f3363); font-size: 0.95rem;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.is-gal__foldercount { font-size: 0.8rem; color: #64708a; }
.is-gal__folderacts { margin-left: auto; display: flex; gap: 0.3rem; }
.is-gal__folderacts.hidden { display: none; }
.is-gal__folderdel { color: #b3261e; }
.is-cap__thumb--folder { display: flex; align-items: center; justify-content: center; background: #eef2f9; }
.is-cap__thumb--folder::after {
  content: "\1F4C1"; font-size: 22px; line-height: 1;
}
@media (max-width: 480px) {
  .is-gal__folderacts { margin-left: 0; width: 100%; }
}

/* In-app prompt / confirm, replacing the browser dialogs that come with a
   "prevent this page from creating more dialogs" checkbox. */
.usl-ask { z-index: 10002; }   /* above the one-by-one review (10001) */
.usl-ask__box { max-width: 380px; text-align: left; padding: 1.35rem 1.4rem 1.15rem; }
.usl-ask__title { font-size: 1.05rem; margin: 0 0 0.4rem; color: var(--blue-800, #1f3363); }
.usl-ask__body { margin: 0 0 0.9rem; font-size: 0.88rem; line-height: 1.4; color: #5b6680; }
.usl-ask__body.hidden { display: none; }
.usl-ask__input {
  width: 100%; box-sizing: border-box; padding: 0.55rem 0.65rem; font-size: 0.95rem;
  border: 1px solid var(--gray-300, #cbd2de); border-radius: 7px; margin-bottom: 0.9rem;
}
.usl-ask__input:focus { outline: none; border-color: #4ca591; box-shadow: 0 0 0 3px rgba(76, 165, 145, 0.18); }
.usl-ask__actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.usl-ask__danger { background: #b3261e; color: #fff; border: 1px solid #b3261e; }
.usl-ask__danger:hover { background: #8f1d17; border-color: #8f1d17; }

/* Comms panel: the family Weekly Preview builder. */
.comms-panel__head { margin-bottom: 1rem; }

.wkb__bar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.wkb__weekwrap { display: inline-flex; align-items: center; gap: 0.4rem; }
.wkb__weeklabel { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64708a; }
.wkb__weekselect { padding: 0.4rem 0.55rem; border: 1px solid var(--gray-300, #cbd2de); border-radius: 7px; font-size: 0.9rem; }
.wkb__saved { font-size: 0.8rem; color: #64708a; }
.wkb__acts { margin-left: auto; display: flex; gap: 0.35rem; flex-wrap: wrap; }
.wkb__hint { margin: 0 0 0.9rem; }
.wkb__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.wkb__edit .field { margin-bottom: 0.75rem; }
.wkb__sub { font-weight: 400; color: #8a94a8; font-size: 0.78rem; }
.wkb__days { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.9rem; }
.wkb-day { border: 1px solid var(--gray-200, #e5e9f0); border-radius: 8px; padding: 0.6rem 0.7rem; }
.wkb-day__head { font-weight: 700; color: var(--blue-800, #1f3363); font-size: 0.88rem; margin-bottom: 0.35rem; }
.wkb-day__empty { margin: 0 0 0.4rem; font-size: 0.82rem; color: #8a94a8; }
.wkb-day__note { width: 100%; box-sizing: border-box; margin-top: 0.4rem; padding: 0.35rem 0.5rem; font-size: 0.85rem; border: 1px solid var(--gray-300, #cbd2de); border-radius: 6px; }
.wkb-item { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.85rem; padding: 0.15rem 0; cursor: pointer; }
.wkb-item__label {
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; background: #eef2f9; color: #4a5875; white-space: nowrap;
}
.wkb-item__label--lotc { background: #eaf6f1; color: #2f8a76; }
.wkb-item__label--event { background: #fdf3e0; color: #8a5a00; }
.wkb-item__title { font-weight: 600; color: #33415c; }
.wkb-item__note { color: #8a94a8; font-size: 0.8rem; }
.wkb__previewwrap { border: 1px solid var(--gray-200, #e5e9f0); border-radius: 8px; overflow: hidden; position: sticky; top: 0.5rem; }
.wkb__previewhead {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #64708a; padding: 0.45rem 0.7rem; background: #f4f6fa; border-bottom: 1px solid var(--gray-200, #e5e9f0);
}
.wkb__preview { max-height: 72vh; overflow: auto; background: #eef3f1; }
@media (max-width: 900px) {
  .wkb__cols { grid-template-columns: minmax(0, 1fr); }
  .wkb__previewwrap { position: static; }
  .wkb__acts { margin-left: 0; width: 100%; }
}

/* Club media gallery (My Clubs ▸ Media Gallery). Tiles and folders reuse the
   IS/MS gallery styles; only the switch and its bar are new. */
.clubmedia__switch { display: flex; margin: 0 0 0.7rem; }
.clubmedia__switchbtn { display: inline-flex; align-items: center; gap: 0.35rem; }
.clubmedia__switchbtn.is-on { background: #eaf6ee; border-color: #2e7d32; color: #1b5e20; }
.clubmedia.hidden { display: none; }
.clubmedia__bar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.cdm-upload { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.cdm-upload.hidden { display: none; }
.cdm-upload-status { margin: 0.5rem 1.25rem 0; font-size: 0.85rem; color: var(--gray-700, #454f5b); }
.cdm-upload-status.hidden { display: none; }

/* Logistics display board: the riding list on a big landscape screen. */
body.logi-board-open { overflow: hidden; }
.logi-board {
  position: fixed; inset: 0; z-index: 7000; display: flex; flex-direction: column;
  background: #0d1b33; color: #fff; padding: 0.8rem 1rem 1rem;
}
.logi-board.hidden { display: none; }
/* One compact line: event, tally, then the buttons. */
.logi-board__bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: nowrap; padding-bottom: 0.5rem; }
.logi-board__title { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; }
.logi-board__event {
  font-size: 1.35rem; font-weight: 800; letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.logi-board__tally { font-size: 0.95rem; color: #9db2d9; white-space: nowrap; }
.logi-board__acts { display: flex; gap: 0.45rem; margin-left: auto; flex-shrink: 0; }
.logi-board__grid {
  --board-name-size: 2.4rem;
  flex: 1 1 auto; min-height: 0; display: grid; gap: 0.7rem; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(clamp(210px, 18vw, 340px), 1fr));
  /* minmax(0, 1fr): rows share the screen height and never grow to fit a
     packed bus. That is what lets a card's names clip, so the fit can shrink
     the type until they show -- with plain 1fr the row just got taller and
     the bottom of the bus slid off the screen. */
  grid-auto-rows: minmax(0, 1fr);
}
.logi-board-card {
  display: flex; flex-direction: column; min-height: 0; min-width: 0; cursor: default;
  background: #16294a; border: 2px solid #26406e; border-radius: 12px; padding: 0.55rem 0.7rem 0.7rem;
}
.logi-board-card--waiting { background: #3a2a14; border-color: #7a5a22; }
.logi-board-card--group { background: #172c4f; }
/* Name rows never squash to share the height: a full card must overflow so
   the fit can see it and bring the type down. */
.logi-board-name, .logi-board-adult { flex: 0 0 auto; }
.logi-board-card--selfsigned { border-color: #2e7d59; }
.logi-board-card--target { border-color: #6fa8ff; box-shadow: 0 0 0 2px rgba(111, 168, 255, 0.35) inset; cursor: pointer; }
.logi-board-card.is-over { border-color: #9ec5ff; background: #1d3663; }
.logi-board-card__head { border-bottom: 1px solid #2b4570; padding-bottom: 0.35rem; margin-bottom: 0.4rem; }
.logi-board-card__name { font-size: 1.35rem; font-weight: 800; display: block; line-height: 1.15; }
.logi-board-card__seats { font-size: 0.95rem; color: #9db2d9; font-weight: 700; }
.logi-board-card__driver {
  font-size: 0.95rem; color: #cfe0ff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.logi-board-card__body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.1rem; }
.logi-board-card__empty { margin: 0.4rem 0 0; color: #7d92bb; font-size: 1rem; font-style: italic; }
.logi-board-name {
  display: block; width: 100%; text-align: left; background: none; border: none; color: #fff;
  font-size: var(--card-name-size, var(--board-name-size)); font-weight: 700; line-height: 1.12; letter-spacing: 0.005em;
  padding: 0.02em 0.15em; border-radius: 6px; cursor: pointer;
  white-space: nowrap; overflow: hidden;   /* one line each; the fit keeps it inside the card */
  /* No font-size transition: the fit pass measures each card as it sizes it,
     and an animating size would be measured mid-flight and come out wrong. */
  /* The board handles the pointer itself, so the browser must not claim the
     press for scrolling, text selection or its own drag. */
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.logi-board-name:hover { background: rgba(255, 255, 255, 0.08); }
.logi-board-name.is-picked { background: #ffd54a; color: #1a1a1a; }
.logi-board-name.is-dragging { opacity: 0.5; }
.logi-board-name--adult {
  color: #a9c3ef; font-weight: 600;
  font-size: calc(var(--card-name-size, var(--board-name-size)) * 0.72);
}
/* Vehicles / Groups switch in the bar. */
.logi-board__modes { display: inline-flex; flex-shrink: 0; border: 1px solid #3a5a95; border-radius: 8px; overflow: hidden; }
.logi-board__mode {
  background: transparent; color: #cfe0ff; border: none; font: inherit; font-weight: 700; font-size: 0.9rem;
  padding: 0.3rem 0.85rem; cursor: pointer;
}
.logi-board__mode + .logi-board__mode { border-left: 1px solid #3a5a95; }
.logi-board__mode.is-on { background: #6fa8ff; color: #0d1b33; }
.logi-board-adult {
  font-size: calc(var(--card-name-size, var(--board-name-size)) * 0.62); color: #a9c3ef; font-weight: 600; line-height: 1.15; padding: 0 0.15em;
  white-space: nowrap; overflow: hidden;
}
@media (max-width: 700px) {
  .logi-board__event { font-size: 1.1rem; }
  .logi-board__tally { display: none; }
}

/* The toast rides inside the board while it is full screen. */
.logi-board > .toast { z-index: 10; }

/* Board diagnostics (?boarddebug=1). */
.logi-board__debug { font-size: 0.8rem; color: #ffd54a; font-family: monospace; white-space: nowrap; }
.logi-board__debug[hidden] { display: none; }

/* The name riding under the finger during a drag on the display board. */
.logi-board-ghost {
  position: fixed; z-index: 30; pointer-events: none;
  transform: translate(-50%, -50%);
  background: #ffd54a; color: #1a1a1a; font-weight: 800; white-space: nowrap;
  font-size: var(--board-name-size, 2rem);   /* the same size as the name it lifted */
  line-height: 1.12; padding: 0.02em 0.4em; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.logi-board-ghost[hidden] { display: none; }

/* Weekly email: the small formatting toolbar beside note fields. */
.wkb-fieldrow { display: flex; align-items: flex-start; gap: 0.35rem; }
.wkb-fieldrow > textarea, .wkb-fieldrow > input { flex: 1 1 auto; min-width: 0; }
.wkb-day__noterow { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; }
.wkb-day__noterow .wkb-day__note { margin-top: 0; flex: 1 1 auto; min-width: 0; }
.wkb-fmt { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.wkb-fmt__btn {
  width: 26px; height: 26px; padding: 0; border: 1px solid var(--gray-300, #cbd2de); border-radius: 5px;
  background: #fff; color: var(--blue-800, #1f3363); font-size: 0.8rem; line-height: 1; cursor: pointer;
}
.wkb-fmt__btn:hover { background: #eef2f9; }
.wkb__fmthint { margin: 0.3rem 0 0; font-size: 0.75rem; }
.wkb__fmthint code { font-size: 0.72rem; background: #f1f4f9; padding: 0 3px; border-radius: 3px; }

/* ── RSVPs: editor block and replies ── */
.special-rsvp-field {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--gray-50);
}
.special-rsvp-options { display: flex; flex-direction: column; gap: 0.55rem; }
.special-rsvp-options > .field-hint { margin: 0; }
.special-rsvp-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--gray-900); cursor: pointer; }
.special-rsvp-check input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--green-600); }
.special-rsvp-closes { max-width: 280px; }
.special-rsvp-closes .field-hint { margin: 0.25rem 0 0; }
.special-rsvp-results { border-top: 1px solid var(--gray-200); padding-top: 0.75rem; margin-top: 0.25rem; }
.special-rsvp-results__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.special-rsvp-results__title { margin: 0; font-size: 0.95rem; color: var(--blue-800); }
.special-rsvp-results__count { font-weight: 500; color: var(--gray-500); font-size: 0.85rem; margin-left: 0.35rem; }
.special-rsvp-results__tools { display: flex; gap: 0.4rem; }
.special-rsvp-stats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0; }
.special-rsvp-stat { background: var(--white); border: 1px solid var(--gray-200); border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.82rem; color: var(--gray-700); }
.special-rsvp-stat b { color: var(--blue-800); }
.special-rsvp-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.special-rsvp-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; background: var(--white); }
.special-rsvp-table th, .special-rsvp-table td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--gray-100); vertical-align: top; }
.special-rsvp-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); }
.special-rsvp-table tr.is-no td { color: var(--gray-400); }
.special-rsvp-who { font-weight: 600; color: var(--gray-900); }
.special-rsvp-table tr.is-no .special-rsvp-who { color: var(--gray-500); }
.special-rsvp-email { font-size: 0.78rem; color: var(--gray-500); word-break: break-all; }
.special-rsvp-when { white-space: nowrap; color: var(--gray-500); }
.special-rsvp-results__empty { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--gray-500); font-style: italic; }

/* ── RSVP widget in the event popup ── */
.edm-rsvp { display: flex; flex-direction: column; gap: 0.65rem; }
.edm-rsvp__lead { margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--gray-900); }
.edm-rsvp__muted { margin: 0; font-size: 0.85rem; color: var(--gray-500); font-weight: 400; }
.edm-rsvp__mine { margin: 0; font-size: 0.92rem; color: var(--green-600); font-weight: 600; }
.edm-rsvp__note { font-weight: 400; color: var(--gray-700); }
.edm-rsvp__choice { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.edm-rsvp__opt {
  flex: 1 1 140px;
  padding: 0.6rem 0.8rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-700);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.edm-rsvp__opt.is-on { border-color: var(--green-600); background: rgba(76,165,145,.12); color: var(--blue-800); }
.edm-rsvp__fields { display: flex; flex-direction: column; gap: 0.5rem; }
.edm-rsvp__field { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.88rem; color: var(--gray-700); }
.edm-rsvp__field small { color: var(--gray-400); }
.edm-rsvp__field input {
  width: 5.5rem;
  padding: 0.45rem 0.6rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font: inherit;
  text-align: center;
  background: var(--white);
}
.edm-rsvp__field--note { flex-wrap: wrap; }
.edm-rsvp__field--note input { flex: 1 1 200px; width: auto; text-align: left; min-width: 0; }
.edm-rsvp__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.edm-rsvp__status { margin: 0; font-size: 0.82rem; color: #b42318; }
.edm-rsvp__status:empty { display: none; }
.edm-rsvp__tally { margin: 0; font-size: 0.92rem; color: var(--gray-900); }
.edm-rsvp__tally b { color: var(--blue-800); }

/* The feed-picture slot: its caption sits under the thumbnail, not beside it. */
.event-photos-grid .feed-image-caption { grid-column: 1 / -1; flex-basis: 100%; width: 100%; margin: 0; }

/* ── Medical bags ── */
.med-badge {
  display: inline-block; vertical-align: middle; margin-left: 0.3em;
  font-size: 0.62em; line-height: 1; font-weight: 800;
  color: #fff; background: #d0342c; border-radius: 4px; padding: 0.12em 0.28em 0.1em;
  font-family: "Segoe UI Symbol", "Apple Symbols", system-ui, sans-serif;
}
.medbag-hint { margin: 0 0 0.6rem; }
.medbag-hint .med-badge { font-size: 0.7rem; margin: 0 0.1em; }
.medbag-holders { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; min-height: 1.8rem; }
.medbag-empty { margin: 0.2rem 0; font-size: 0.85rem; color: var(--gray-500); font-style: italic; }
.medbag-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #fff3f2; border: 1.5px solid #f1b8b3; border-radius: 999px; padding: 0.25rem 0.35rem 0.25rem 0.6rem;
  font-size: 0.88rem; color: var(--gray-900); font-weight: 600;
}
.medbag-chip .med-badge { margin: 0; }
.medbag-chip__role { font-size: 0.72rem; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.03em; }
.medbag-chip__remove {
  width: 1.35rem; height: 1.35rem; border: none; border-radius: 50%; background: transparent; color: var(--gray-500);
  font-size: 1rem; line-height: 1; cursor: pointer; padding: 0;
}
.medbag-chip__remove:hover { background: #d0342c; color: #fff; }
.medbag-picker { position: relative; max-width: 520px; }
.medbag-search { width: 100%; }
.medbag-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  background: var(--white); border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14); max-height: 300px; overflow-y: auto; padding: 0.25rem;
}
.medbag-results.hidden { display: none; }
.medbag-result {
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; width: 100%;
  border: none; background: transparent; text-align: left; padding: 0.5rem 0.65rem; border-radius: 6px;
  font: inherit; font-size: 0.9rem; color: var(--gray-900); cursor: pointer;
}
.medbag-result:hover, .medbag-result.is-first { background: var(--gray-50); }
.medbag-result:hover { background: #fff3f2; }
.medbag-result__role { font-size: 0.75rem; color: var(--gray-500); white-space: nowrap; }
.medbag-results__empty { padding: 0.5rem 0.65rem; font-size: 0.85rem; color: var(--gray-500); font-style: italic; }

/* On the dark display board the cross reads small and stays on the name's line. */
.logi-board-name .med-badge, .logi-board-adult .med-badge { font-size: 0.5em; margin-left: 0.35em; }

/* ── RSVP link for families (special-event editor) ── */
.special-rsvp-link { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin: 0.15rem 0 0.2rem; }
.special-rsvp-link__label { flex: 1 1 100%; font-size: 0.8rem; color: var(--gray-500); }
.special-rsvp-link__url { flex: 1 1 260px; min-width: 0; font-size: 0.82rem; padding: 0.4rem 0.55rem; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); background: var(--white); color: var(--gray-700); }

/* ── Chaperone Info ── */
.chap-info-flag {
  margin: 0 0 0.9rem; padding: 0.5rem 0.75rem; font-size: 0.85rem; font-weight: 600;
  color: #b42318; background: #fdecea; border: 1px solid #f5b5ae; border-radius: 8px;
}
.chap-info-section textarea { width: 100%; font: inherit; padding: 0.55rem 0.7rem; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); background: var(--gray-50); resize: vertical; }
.chap-info-section textarea:focus { outline: none; border-color: var(--blue-600); background: var(--white); }
#edm-chap-note { white-space: pre-wrap; }

/* ── Buses shared with another LOTC the same day ── */
.transport-bus-note {
  margin: 0 0 0.7rem; padding: 0.5rem 0.75rem; font-size: 0.83rem; line-height: 1.45;
  color: #7a4d00; background: #fff7e6; border: 1px solid #f3d38a; border-radius: 8px;
}
.transport-bus-note--clash { color: #b42318; background: #fdecea; border-color: #f5b5ae; }
.transport-group--unavailable { border-style: dashed; opacity: 0.6; }
.transport-group--unavailable .transport-group__header { background: #f1f4f8; color: var(--gray-500); }
.transport-group--clash { border-color: #d0342c; }
.transport-group__booked { margin-left: 0.4rem; font-size: 0.7rem; font-weight: 700; color: #b42318; white-space: nowrap; }
.transport-group--unavailable .transport-group__booked { color: #7a4d00; }
.transport-drop-hint--booked { color: #7a4d00; font-style: italic; }

/* ── Club photo approvals ── */
.club-approvals__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.9rem; margin-top: 0.9rem; }
.club-approval { display: flex; flex-direction: column; background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 10px; overflow: hidden; }
.club-approval__media { position: relative; display: block; width: 100%; height: 0; padding: 0 0 72%; border: none; background: var(--gray-100); cursor: pointer; overflow: hidden; }
.club-approval__media img, .club-approval__media video, .club-approval__media .event-media-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.club-approval__media .is-gal__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.club-approval__body { padding: 0.65rem 0.8rem 0.8rem; display: flex; flex-direction: column; gap: 0.2rem; }
.club-approval__club { font-weight: 700; color: var(--blue-800); }
.club-approval__who { font-size: 0.86rem; color: var(--gray-700); }
.club-approval__who span { color: var(--gray-500); font-size: 0.78rem; }
.club-approval__when { font-size: 0.78rem; color: var(--gray-500); }
.club-approval__actions { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.club-approvals__empty { margin: 1.2rem 0; color: var(--gray-500); font-style: italic; }
.is-gal__tile--pending .is-gal__open { outline: 2px dashed #d99a12; outline-offset: -2px; }
.is-gal__pending { position: absolute; left: 6px; top: 6px; z-index: 2; background: #fff3cd; color: #7a4d00; border: 1px solid #f3d38a; border-radius: 999px; padding: 0.15rem 0.5rem; font-size: 0.68rem; font-weight: 700; }
.is-gal__tool--ok { color: #1f7a4d; }
.is-gal__tool--ok:hover { background: #1f7a4d; color: #fff; }
/* The club-photo approver's admin page: only that tab exists for them. */
body.club-approver-only .admin-subnav { justify-content: flex-start; }

/* Club Photos page: week picker, then the same sections an LOTC's photos use. */
.club-approvals__bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.8rem; }
.club-approvals__weekwrap { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; font-weight: 600; color: var(--gray-700); }
.club-approvals__weekwrap select { font: inherit; padding: 0.35rem 0.5rem; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); background: var(--white); }
.club-approvals__tally { font-size: 0.82rem; color: var(--gray-500); }
.club-approvals__section { margin-top: 1rem; padding-top: 0.9rem; }
.club-approvals__section .parent-photo-tile__who { white-space: normal; line-height: 1.25; }

/* Your RSVPs: a compact list under the LOTC sign-ups. */
.my-rsvps { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--gray-100); }
.my-rsvps__title { margin: 0 0 0.4rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-500); }
.my-rsvps__list { display: flex; flex-direction: column; gap: 0.3rem; }
.my-rsvp {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.6rem;
  width: 100%; text-align: left; padding: 0.45rem 0.65rem; border: 1px solid var(--gray-200); border-radius: 8px;
  background: var(--white); font: inherit; font-size: 0.82rem; color: var(--gray-700); cursor: pointer;
}
.my-rsvp:hover { border-color: var(--blue-600); }
.my-rsvp__when { font-weight: 700; color: var(--blue-800); white-space: nowrap; }
.my-rsvp__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-rsvp__status { white-space: nowrap; font-weight: 600; color: var(--gray-500); }
.my-rsvp--yes .my-rsvp__status { color: var(--green-600); }
.my-rsvp--none .my-rsvp__status { color: #b45309; }
.my-rsvp__act { font-weight: 700; color: var(--blue-600); white-space: nowrap; }
@media (max-width: 480px) {
  .my-rsvp { grid-template-columns: auto 1fr auto; }
  .my-rsvp__status { grid-column: 2; grid-row: 2; }
  .my-rsvp__act { grid-row: 1 / span 2; }
}

/* Pending parent uploads sit above the approved photos on the Images tab. */
.parent-photos-pending--first { margin: 0 0 1.1rem; padding: 0 0 1rem; border-top: none; border-bottom: 1px dashed var(--blue-100); }
.parent-photos-pending--first .parent-photos-pending__title { color: #b45309; }

/* Media tab: the same gallery tiles, as folders per source. */
.media-gal__hint { margin-left: auto; font-size: 0.8rem; color: var(--gray-500); white-space: nowrap; }
.media-gal__folder .is-gal__cap--folder { display: flex; flex-direction: column; gap: 0.1rem; }
.media-gal__title { font-weight: 700; color: var(--gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-gal__kind { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--gray-500); }
.media-gal__folder--lotc .media-gal__kind { color: var(--blue-600); }
.media-gal__folder--event .media-gal__kind { color: #7c3aed; }
.media-gal__folder--club .media-gal__kind { color: var(--green-600); }