html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
  overflow-x: clip; /* prevent horizontal scrollbar from full-bleed calc(-50vw+50%) sections; 'clip' (unlike 'hidden') does not create a scroll container, so position:sticky works correctly */
  scrollbar-gutter: stable; /* always reserve vertical scrollbar space so content width — and therefore the navbar — never shifts between scrollable and non-scrollable pages */
  --app-header-h: 72px; /* approximate header (navbar + mb-3) height; used by the sticky-footer fill calc so header + main reaches the viewport bottom independent of footer height */
  --footer-peek-h: 48px; /* sliver of the footer left visible at the bottom of short pages as a "more below" cue (SiteStickyFooterLayoutPolish-1) */
}

body {
    background: ghostwhite;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Sticky footer shell (ShortPageFooterPushDownFix-2, refined by SiteStickyFooterLayout-1): body above
   is a full-height flex column. The public content wrapper is the only .container that is a direct
   child of body (the nav's and the footer's .container are nested deeper), so it is the flex item
   between header and footer. It grows to absorb leftover vertical space, and its <main> fills that
   wrapper. The footer never shrinks. No fixed/absolute positioning, no per-page spacers.

   The min-height makes the wrapper fill the viewport below the header (header + main ≈ viewport), so
   on short pages the footer is pushed to the bottom even when the footer itself is taller than the
   remaining viewport (the tall mobile marketing footer would otherwise ride up because body's 100vh
   budget was fully consumed by header + footer, leaving no free space for main to grow). On long pages
   the content exceeds this minimum and the page scrolls naturally. The 100vh line is the fallback for
   browsers without dvh; the 100dvh line wins where supported and tracks the visible mobile viewport.

   --footer-peek-h is also subtracted (SiteStickyFooterLayoutPolish-1) so a small sliver of the footer
   stays visible at the bottom of short pages as a "more content below" cue, instead of the footer
   sitting exactly at/just below the fold. */
body > .container {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: calc(100vh - var(--app-header-h) - var(--footer-peek-h));
  min-height: calc(100dvh - var(--app-header-h) - var(--footer-peek-h));
}

body > .container > main {
  flex: 1 0 auto;
}

.site-footer {
  flex-shrink: 0;
}

.site-logo {
  height: 40px;
  width: auto;
}

.header-avatar {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f97316;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  margin-left: .25rem;
  transition: background .15s;
}

.header-avatar:hover {
  background: #ea580c;
  color: #fff;
}

.header-avatar:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

/* ── Public header — mobile menu ────────────────────────────────────── */

@media (max-width: 575.98px) {
  .navbar-collapse .navbar-nav {
    align-items: stretch !important;
  }

  .navbar-collapse .navbar-nav + .navbar-nav {
    border-top: 1px solid #dee2e6;
    padding-top: .375rem;
    margin-top: .375rem;
  }

  .navbar-collapse .nav-link {
    padding-top: .625rem;
    padding-bottom: .625rem;
  }
}

/* Active public nav item — a slightly heavier weight only, in keeping with EventsLog's restrained
   style. No underline, no tab indicator. The weight change flows naturally into the mobile menu. */
.navbar-light .navbar-nav .nav-link.active {
  font-weight: 600;
}

/* Desktop nav hover — lightweight SaaS-style affordance: a very light blue pill on hover/focus with
   a small radius and a smooth transition. Desktop only (≥576px, where the bar is horizontal); the
   collapsed mobile menu is left untouched. Scoped to .nav-link, so the outlined Request Access
   button keeps its own hover. */
@media (min-width: 576px) {
  .navbar-light .navbar-nav .nav-link {
    border-radius: .375rem;
    transition: background-color .15s ease;
  }

  .navbar-light .navbar-nav .nav-link:hover,
  .navbar-light .navbar-nav .nav-link:focus-visible {
    background-color: #eff4fb;
  }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ── Skip-to-content link ────────────────────────────────────────────── */

.skip-to-main:focus {
  position: fixed !important;
  top: 0;
  left: 0;
  width: auto !important;
  height: auto !important;
  padding: .5rem 1.125rem !important;
  background: #fff;
  color: #212529;
  font-weight: 600;
  font-size: .9375rem;
  z-index: 9999;
  margin: 0 !important;
  border: 2px solid #0d6efd !important;
  border-radius: 0 0 .375rem 0;
  clip: auto !important;
  white-space: normal !important;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* ── Public Organizer Page (.op-*) ──────────────────────────────────────── */

.op-page {
  padding-bottom: 2.5rem;
}

/* Full-width banner (fills Bootstrap container, outside .op-page 760px constraint) */

.op-banner-full {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background-color: #e9ecef;
  display: block;
}

@media (min-width: 576px) {
  .op-banner-full {
    height: 320px;
  }
}

.op-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* op-page stacks after the banner; identity-group card handles the logo overlap */

.op-page.op-has-banner {
  position: relative;
  z-index: 1;
}

/* Centered inner content wrapper — used inside full-width section bands */

.op-inner {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

/* Identity group: centered card with max-width; white panel when banner present */

.op-identity-group {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.75rem;
}

.op-has-banner .op-identity-group {
  background: #fff;
  border-radius: .5rem;
  padding: 0 1.25rem 1.25rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .09);
  margin-bottom: 1.5rem;
}

/* No-banner fallback: full-width soft hero band */

.op-page:not(.op-has-banner) .op-identity-group {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  background: #f8f9fa;
  padding: 3rem 0 2rem;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 2rem;
}

.op-page:not(.op-has-banner) .op-identity {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0;
}

.op-page:not(.op-has-banner) .op-actions {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 1.25rem;
  margin-bottom: 0;
}

/* Identity: logo + heading + tagline */

.op-identity {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 0;
}

.op-has-banner .op-identity {
  flex-direction: column;
  gap: .75rem;
  padding-top: 0;
  padding-bottom: 0;
}

@media (min-width: 576px) {
  .op-has-banner .op-identity {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.25rem;
    padding-top: 0;
  }
}

.op-logo-wrap {
  flex-shrink: 0;
}

.op-has-banner .op-logo-wrap {
  margin-top: -36px;
  margin-bottom: .5rem;
}

@media (min-width: 576px) {
  .op-has-banner .op-logo-wrap {
    margin-top: -48px;
    margin-bottom: 0;
  }
}

.op-logo {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 50%;
  background-color: #f8f9fa;
  display: block;
}

.op-has-banner .op-logo {
  width: 80px;
  height: 80px;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

@media (min-width: 576px) {
  .op-has-banner .op-logo {
    width: 96px;
    height: 96px;
  }
}

.op-identity-text {
  flex: 1;
  min-width: 0;
  padding-top: .25rem;
}

.op-has-banner .op-identity-text {
  padding-top: 0;
}

@media (min-width: 576px) {
  .op-has-banner .op-identity-text {
    padding-top: .5rem;
  }
}

.op-heading {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .25rem;
  word-break: break-word;
}

@media (min-width: 576px) {
  .op-heading {
    font-size: 2.25rem;
  }
}

.op-tagline {
  font-size: 1rem;
  color: #6c757d;
  margin-bottom: 0;
  line-height: 1.5;
}

/* Link / CTA buttons */

.op-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 2rem;
}

.op-has-banner .op-actions {
  margin-bottom: 0;
  margin-top: .25rem;
}

@media (min-width: 576px) {
  .op-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.op-link-btn {
  display: block;
  padding: .5rem 1.375rem;
  border: 1.5px solid #343a40;
  border-radius: 2rem;
  color: #212529;
  background-color: transparent;
  font-size: .9375rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  line-height: 1.4;
  transition: background-color .15s, color .15s;
}

.op-link-btn:hover {
  background-color: #212529;
  color: #fff;
  text-decoration: none;
}

.op-link-btn:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
}

/* Content sections */

.op-sections {
  margin-bottom: 1.5rem;
}

.op-section {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

.op-section .op-inner {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.op-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: .625rem;
}

.op-section-body {
  line-height: 1.75;
  margin-bottom: 0;
}

/* Section variant bands — horizontal page blocks */

.op-section--light {
  background: #ffffff;
}

.op-section--accent {
  background: #dbeafe;
}

.op-section--dark {
  background: #212529;
  color: #fff;
}

.op-section--dark .op-section-title {
  color: #fff;
}

.op-section--dark .op-section-body {
  color: #dee2e6;
}

.op-section--soft-blue {
  background: #eff6ff;
}

.op-section--soft-warm {
  background: #fffbeb;
}

.op-section--soft-green {
  background: #f0fdf4;
}

/* Upcoming events */

.op-events {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  /* No top divider before the events group — the uppercase section heading provides the separation
     (OrganizerEventListSpacingPolish-1). padding-top keeps space above the heading; the larger
     margin-bottom adds breathing room after the last event before the next section. */
  padding-top: 1.5rem;
  margin-bottom: 2.5rem;
}

.op-events-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #6c757d;
  margin-bottom: .875rem;
}

.op-event-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .875rem 0;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 0;
}

.op-event-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.op-event-date-badge {
  flex: 0 0 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  background: #f1f3f5;
  border-radius: .375rem;
  text-align: center;
  padding: .375rem .25rem;
  line-height: 1;
}

.op-event-date-month {
  display: block;
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6c757d;
  margin-bottom: .1875rem;
}

.op-event-date-day {
  display: block;
  font-size: 1.375rem;
  font-weight: 700;
  color: #212529;
  line-height: 1;
}

/* Third badge line (organizer page): the year, matching the small muted month line above the day.
   Only rendered where an .op-event-date-year span exists, so the /events badge is unaffected. */
.op-event-date-year {
  display: block;
  font-size: .625rem;
  font-weight: 600;
  color: #6c757d;
  margin-top: .1875rem;
  line-height: 1;
}

/* Public event date badge — calm navy/gray hierarchy on a modestly larger, more legible badge
   (OrganizerPublicPagePolish-4; extended to the /events list in PublicEventsListStyleConsistency-1).
   Applies to both the organizer page (.op-events) and the /events listing (.hp-event-list) so the
   two badges match. Readability comes from size/weight, not bright color. */
.op-events .op-event-date-badge,
.hp-event-list .op-event-date-badge {
  flex: 0 0 58px;          /* ~20% larger than the base 48px */
  min-height: 62px;        /* ~20% larger than the base 52px */
  padding: .5rem .25rem;
}

.op-events .op-event-date-month,
.hp-event-list .op-event-date-month {
  font-size: .75rem;       /* slightly larger */
  color: #1e3a5f;          /* muted navy */
}

.op-events .op-event-date-day,
.hp-event-list .op-event-date-day {
  font-size: 1.625rem;     /* dominant — largest/boldest */
  color: #1e293b;          /* strong near-black navy */
}

.op-events .op-event-date-year,
.hp-event-list .op-event-date-year {
  font-size: .6875rem;     /* slightly larger, still secondary */
  color: #495057;          /* muted gray, readable (AA) */
  font-weight: 600;
}

.op-event-content {
  flex: 1;
  min-width: 0;
  padding-top: .375rem;
}

.op-event-title {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  color: #2c7ac7;
  text-decoration: none;
  line-height: 1.3;
  margin-bottom: .375rem;
}

.op-event-title:hover,
.op-event-title:focus-visible {
  color: #1f5e9e;
  text-decoration: underline;
}

.op-event-title:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
  border-radius: 2px;
}

.op-event-meta {
  font-size: .8125rem;
  color: #6c757d;
  margin-bottom: 0;
  line-height: 1.4;
}

/* Contact */

.op-contact {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid #dee2e6;
  padding-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.op-contact-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #6c757d;
  margin-bottom: .875rem;
}

.op-contact address {
  font-style: normal;
}

.op-contact-line {
  margin-bottom: .375rem;
  line-height: 1.5;
}

.op-contact-line:last-child {
  margin-bottom: 0;
}

.op-contact-link {
  color: #212529;
  text-decoration: none;
}

.op-contact-link:hover {
  text-decoration: underline;
}

.op-contact-link:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Labeled contact rows (OrganizerPublicPagePolish-1): a visible field label above each value, with
   a decorative leading icon (envelope / phone / map marker). */
/* Contact rows (OrganizerPublicPagePolish-4): icon is a fixed left gutter aligned to the label
   line; the label and value share the right column, so the value aligns under the label text — not
   under the icon. Same pattern for Email, Phone, and Address. */
.op-contact-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: 1rem;
}

.op-contact-row:last-child {
  margin-bottom: 0;
}

.op-contact-icon {
  flex: 0 0 1.1rem;
  text-align: center;
  font-size: .8125rem;
  /* Match the .75rem uppercase label's line box so the icon centers on the label text rather than
     floating above it (OrganizerContactConnectOrderPolish-1; fine-tuned in
     OrganizerContactIconAlignmentFineTune-1). */
  line-height: 1.125rem;
  margin-top: .1875rem;
  color: #6c757d;
}

.op-contact-row-body {
  min-width: 0;
}

.op-contact-row-label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6c757d;
  margin-bottom: .25rem;
  line-height: 1.5;
}

.op-contact-row-value {
  margin-bottom: 0;
  line-height: 1.5;
}

/* Footer note */

.op-footer {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  border-top: 1px solid #dee2e6;
  padding-top: 1.5rem;
}

.op-footer-note {
  font-size: .8125rem;
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 0;
}
/* ── Admin image preview ─────────────────────────────────────── */
.admin-preview-logo {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid #dee2e6;
  display: block;
}

.admin-preview-banner {
  width: 100%;
  max-height: 120px;
  object-fit: cover;
  border-radius: .375rem;
  border: 1px solid #dee2e6;
  display: block;
  margin-top: .25rem;
}
/* ── Focal point preview frame ───────────────────────────────────── */
.media-focal-frame {
  position: relative;
  overflow: hidden;
  border-radius: .375rem;
  border: 1px solid #dee2e6;
  background: #f8f9fa;
  cursor: crosshair;
  display: block;
  margin-bottom: .5rem;
}

.media-focal-frame--banner {
  aspect-ratio: 16 / 5;
  width: 100%;
}

.media-focal-frame--logo {
  aspect-ratio: 1 / 1;
  width: 120px;
  border-radius: 50%;
}

.media-focal-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}

.media-focal-marker {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.55), 0 1px 6px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: left 0.07s ease, top 0.07s ease;
}

.media-focal-marker::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)) 50% 50% / 60% 1.5px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)) 50% 50% / 1.5px 60% no-repeat;
}

.media-focal-marker::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
}

@keyframes focalPulse {
  0%   { transform: translate(-50%, -50%) scale(1); }
  40%  { transform: translate(-50%, -50%) scale(1.3); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.media-focal-marker--pulse {
  animation: focalPulse 0.22s ease-out;
}

/* ── Public Event Page (.ep-*) ──────────────────────────────────────── */

.ep-page {
  padding-bottom: 2.5rem;
}

.ep-page.ep-has-banner {
  position: relative;
  z-index: 1;
}

/* Full-width banner */

.ep-banner-full {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background-color: #e9ecef;
  display: block;
}

@media (min-width: 576px) {
  .ep-banner-full {
    height: 320px;
  }
}

.ep-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Header group: white card when banner present; full-width hero when no banner */

.ep-header-group {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 1.75rem;
}

.ep-has-banner .ep-header-group {
  background: #fff;
  border-radius: .5rem;
  padding: 0 1.25rem 1.25rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .09);
  margin-bottom: 1.5rem;
}

/* No-banner: contained gradient hero card */

.ep-page:not(.ep-has-banner) .ep-header-group {
  background: linear-gradient(135deg, #f3f6fa 0%, #eef3f8 100%);
  border: 1px solid #d9e2ec;
  border-radius: .75rem;
  margin-top: 1rem;
  padding: 2rem 1.5rem 1.75rem;
  margin-bottom: 2rem;
}

.ep-page:not(.ep-has-banner) .ep-identity {
  padding-top: 0;
}

.ep-page:not(.ep-has-banner) .ep-actions {
  margin-top: 1.25rem;
}

/* No-banner hero: the soft gradient background (#f3f6fa→#eef3f8) drops the countdown green and
   muted #6c757d text below WCAG AA (4.5:1) — measured 4.06:1 and 4.20:1 worst case. Darken these
   text colors in the no-banner scope only; banner events keep their colors on the white card,
   where they already pass. WCAG 2.1 SC 1.4.3 (PublicEventNoBannerContrastFix-1). */
.ep-page:not(.ep-has-banner) .ep-meta-countdown {
  color: #157347;
}

.ep-page:not(.ep-has-banner) .ep-organizer,
.ep-page:not(.ep-has-banner) .ep-meta-secondary,
.ep-page:not(.ep-has-banner) .ep-status-msg,
.ep-page:not(.ep-has-banner) .ep-action-note {
  color: #5c636a;
}

/* Identity: logo + title + organizer byline */

.ep-identity {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 0;
}

.ep-has-banner .ep-identity {
  flex-direction: column;
  gap: .75rem;
  padding-top: 0;
  padding-bottom: 0;
}

@media (min-width: 576px) {
  .ep-has-banner .ep-identity {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.25rem;
    padding-top: 0;
  }
}

/* Organizer logo */

.ep-logo-wrap {
  flex-shrink: 0;
}

.ep-has-banner .ep-logo-wrap {
  margin-top: -36px;
  margin-bottom: .5rem;
}

@media (min-width: 576px) {
  .ep-has-banner .ep-logo-wrap {
    margin-top: -48px;
    margin-bottom: 0;
  }
}

.ep-logo {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 50%;
  background-color: #f8f9fa;
  display: block;
}

.ep-has-banner .ep-logo {
  width: 80px;
  height: 80px;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

@media (min-width: 576px) {
  .ep-has-banner .ep-logo {
    width: 96px;
    height: 96px;
  }
}

/* Header text: title + byline */

.ep-header-text {
  flex: 1;
  min-width: 0;
  padding-top: .25rem;
}

.ep-has-banner .ep-header-text {
  padding-top: 0;
}

@media (min-width: 576px) {
  .ep-has-banner .ep-header-text {
    padding-top: .5rem;
  }
}

.ep-status-badge {
  display: inline-block;
  margin-bottom: .375rem;
}

.ep-title {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .25rem;
  word-break: break-word;
}

@media (min-width: 576px) {
  .ep-title {
    font-size: 2.25rem;
  }
}

.ep-organizer {
  font-size: .9375rem;
  color: #6c757d;
  margin-bottom: 0;
  line-height: 1.5;
}

.ep-organizer-link {
  color: #2c7ac7;
  font-weight: 500;
  text-decoration: none;
}

.ep-organizer-link:hover,
.ep-organizer-link:focus-visible {
  color: #1f5e9e;
  text-decoration: underline;
}

.ep-organizer-link:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Meta rows: date/time prominent; timezone, location, type muted below */

.ep-meta {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-top: .875rem;
  margin-bottom: .875rem;
}

.ep-meta-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .4rem;
  font-size: .9375rem;
  font-weight: 600;
  color: #212529;
  line-height: 1.5;
}

.ep-meta-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .4rem;
  font-size: .875rem;
  color: #6c757d;
  line-height: 1.5;
}

.ep-meta-sep {
  color: #adb5bd;
  user-select: none;
}

.ep-meta-type {
  font-style: italic;
}

/* Upcoming-event countdown line: between the date row and the location/category row.
   Bootstrap success green (#198754) — more visible than the muted secondary row, a
   positive upcoming-event signal. Semibold (600) to match the date row's emphasis.
   Informational only — not a status/badge. */
.ep-meta-countdown {
  font-size: .9375rem;
  font-weight: 600;
  color: #198754;
  line-height: 1.5;
}

/* Action buttons */

.ep-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
}

.ep-status-msg {
  width: 100%;
  font-size: .9375rem;
  color: #6c757d;
  margin-bottom: .25rem;
}

/* Explanatory note shown in the action area when a Register/Donate button is hidden because its
   time window is not open. Small muted line — neutral, not an alert; secondary to lifecycle notices. */
.ep-action-note {
  width: 100%;
  font-size: .875rem;
  color: #6c757d;
  margin-top: .25rem;
  margin-bottom: 0;
}

/* Completed-event informational notice — replaces the muted .ep-status-msg for Status=Completed.
   Soft-yellow band draws attention more than the prior soft-blue; blue text and icon keep the
   notice reading as informational, not as an error or validation warning. */
.ep-completed-notice {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem;
  margin-bottom: .75rem;
  background-color: #fff8db;
  border: 1px solid #f3d36b;
  border-radius: .5rem;
  color: #0d3b8f;
}

.ep-completed-notice-icon {
  font-size: 1.25rem;
  color: #2563eb;
  flex-shrink: 0;
  line-height: 1;
}

.ep-completed-notice-text {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: #0d3b8f;
}

.ep-actions .btn {
  padding: .625rem 1.25rem;
  font-size: 1rem;
}

/* Content body */

.ep-body {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Public note — organizer-controlled short visitor message rendered near the top of the body.
   Calm neutral informational container: soft light-blue tint + border, no status colors, no icon,
   no title. Visible but intentionally secondary to the hero's Completed/Cancelled lifecycle notices.
   Negative side margins cancel .ep-body's 1rem inset so the card background aligns with the hero
   card edge; the 1.25rem horizontal padding matches the hero header-group's left padding so the
   text starts on the same column as the hero title/meta. */
.ep-public-note {
  margin-top: 1.25rem;
  margin-left: -1rem;
  margin-right: -1rem;
  padding: 1rem 1.25rem;
  background-color: #f4f8fc;
  border: 1px solid #d6e3f0;
  border-radius: .5rem;
}

.ep-public-note-text {
  margin-bottom: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: #344054;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Facts section — groups the core event facts (short description, About, and the schedule/location/
   capacity details). Rendered as a full-width band using the same full-bleed technique and Soft Blue
   background (#eff6ff) as the page-builder ".ep-section--soft-blue" option, rather than another white
   card — this reduces card repetition (hero/notice/organizer) and gives the schedule/where-when more
   presence as a section of the page. Class name retained from FactsCardImplementation-1. */
.ep-facts-card {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-top: 3rem;
  padding-bottom: 3rem;
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  background: #eff6ff;
}

/* Card owns the outer top/bottom padding — drop the leading/trailing subsection padding so it does
   not double against the card edge. First child may be short description, About, or the details
   section (all conditional except details, which is always last). Inter-subsection rhythm and the
   .ep-short-desc/.ep-about dividers are unchanged. */
.ep-facts-card > :first-child {
  padding-top: 0;
}

.ep-facts-card > :last-child {
  padding-bottom: 0;
}

/* About / description */

.ep-about {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #dee2e6;
}

.ep-section-heading {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #6c757d;
  margin-bottom: .625rem;
}

.ep-section-body {
  line-height: 1.75;
  margin-bottom: 0;
}

/* Details grid: schedule, location, capacity */

.ep-details-section {
  padding-top: 1.25rem;
  padding-bottom: 1.5rem;
}

.ep-details-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 2.5rem;
}

@media (min-width: 576px) {
  .ep-details-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

.ep-details-label {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  color: #212529;
  margin-bottom: .625rem;
}

.ep-address {
  font-style: normal;
  line-height: 1.65;
  color: #495057;
}

/* Outbound map/directions links in the Location block (EventLocationDirections-1).
   Lightweight — one subtle primary link + a secondary text link; not a heavy button group,
   so it never competes with the Register/Donate CTAs. */
.ep-directions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1rem;
  margin-top: .6rem;
}

/* Both links use the standard EventsLog contextual link style (matches .ep-organizer-link):
   same size and weight, normal-weight contextual link color — not buttons/CTAs. */
.ep-directions-primary,
.ep-directions-secondary {
  font-size: .9375rem;
  font-weight: 500;
  color: #2c7ac7;
  text-decoration: none;
}

.ep-directions-primary:hover,
.ep-directions-primary:focus-visible,
.ep-directions-secondary:hover,
.ep-directions-secondary:focus-visible {
  color: #1f5e9e;
  text-decoration: underline;
}

.ep-directions-primary i,
.ep-directions-secondary i {
  margin-right: .35rem;
}

/* Icons stay slightly muted/secondary so the text remains the primary element — they match the
   other event-detail fact icons (#212529 @ .7) rather than the link color. */
.ep-directions i,
.ep-directions .fa-solid {
  color: #212529;
  opacity: .7;
}

.ep-directions-secondary:hover {
  text-decoration: underline;
}

/* Schedule block — improved hierarchy and scannability */

.ep-schedule-heading {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  color: #212529;
  margin-bottom: .625rem;
}

.ep-details-icon {
  font-size: .875rem;
  flex-shrink: 0;
  opacity: .7;
}

.ep-schedule-day-group + .ep-schedule-day-group {
  margin-top: .875rem;
  padding-top: .875rem;
  border-top: 1px solid #e9ecef;
}

.ep-schedule-date {
  font-size: 1rem;
  font-weight: 700;
  color: #343a40;
  margin-bottom: .375rem;
  line-height: 1.4;
}

.ep-schedule-sessions {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ep-schedule-session {
  display: flex;
  flex-direction: column;
  padding-top: .25rem;
  padding-bottom: .25rem;
}

.ep-schedule-session + .ep-schedule-session {
  border-top: 1px solid #f1f3f5;
}

.ep-session-title {
  font-size: 1rem;
  font-weight: 600;
  color: #212529;
  line-height: 1.4;
}

.ep-session-time {
  font-size: .9375rem;
  color: #5c6672;
  line-height: 1.4;
  margin-bottom: 0;
}

.ep-schedule-tz {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  color: #6c757d;
  margin-top: .75rem;
  padding-top: .625rem;
  border-top: 1px solid #e9ecef;
  margin-bottom: 0;
}

.ep-schedule-tz .fa-clock {
  color: #adb5bd;
  font-size: .75rem;
  flex-shrink: 0;
}

/* Short description: intro copy above About */

.ep-short-desc {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #dee2e6;
}

/* Event page content sections */

.ep-sections {
  margin-bottom: 1.5rem;
}

.ep-section {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

.ep-section .ep-inner {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.ep-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: .625rem;
}

.ep-section--default {
  /* white background; border from .ep-section */
}

.ep-section--light {
  background: #f8f9fa;
  border-bottom-color: #e3e6ea;
}

.ep-section--accent {
  background: #eef4fb;
  border-bottom: none;
}


.ep-section--dark {
  background: #212529;
  color: #fff;
  border-bottom: none;
}

.ep-section--dark .ep-inner {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.ep-section--dark .ep-section-title {
  color: #fff;
}

.ep-section--dark .ep-section-body {
  color: #dee2e6;
}

.ep-section--soft-blue {
  background: #eff6ff;
}

.ep-section--soft-warm {
  background: #fffbeb;
}

.ep-section--soft-green {
  background: #f0fdf4;
}

/* Footer note */

.ep-footer {
  margin-top: 2rem;
  border-top: 1px solid #dee2e6;
  padding-top: 1.5rem;
  margin-bottom: 1rem;
}

.ep-footer-note {
  font-size: .8125rem;
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 0;
}

/* ── Event detail share buttons ─────────────────────────────────────── */

.ep-share-actions {
  display: flex;
  justify-content: flex-end;
  gap: .375rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.ep-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid #adb5bd;
  color: #6c757d;
  background: transparent;
  text-decoration: none;
  font-size: .875rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: border-color .15s, color .15s, background-color .15s;
}

.ep-share-button:hover {
  border-color: #343a40;
  color: #212529;
  background: #f8f9fa;
  text-decoration: none;
}

.ep-share-button:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
}

/* ── Event detail organizer card ─────────────────────────────────────── */

/* Negative side margins cancel .ep-body's 1rem inset so the card background aligns with the hero
   card edge; the 1.25rem horizontal padding matches the hero header-group's left padding so the
   organizer label/content starts on the same column as the hero title/meta. */
.ep-organizer-section {
  margin-top: 2.5rem;
  margin-left: -1rem;
  margin-right: -1rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid #dbe5f1;
  border-radius: .75rem;
}

.ep-organizer-section-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #6c757d;
  margin-bottom: .625rem;
}

.ep-organizer-section-link {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-size: .9375rem;
  font-weight: 600;
  color: #2c7ac7;
  text-decoration: none;
}

.ep-organizer-section-link:hover,
.ep-organizer-section-link:focus-visible {
  color: #1f5e9e;
}

/* Underline only the organizer name on hover/focus — not the logo image or the arrow. */
.ep-organizer-section-link:hover span:not(.ep-organizer-section-arrow),
.ep-organizer-section-link:focus-visible span:not(.ep-organizer-section-arrow) {
  text-decoration: underline;
}

.ep-organizer-section-link:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
  border-radius: 2px;
}

.ep-organizer-section-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #dee2e6;
  flex-shrink: 0;
}

.ep-organizer-section-arrow {
  flex-shrink: 0;
  font-size: .75rem;
  color: #adb5bd;
}

/* Action page (register / donate) event/organizer context line */

.action-page-context {
  font-size: 1.0625rem;
  color: #495057;
  margin-bottom: 1.5rem;
}

/* ── Public banner family ─────────────────────────────────────────── */

.public-banner {
  width: 100%;
  overflow: hidden;
  background-color: #e9ecef;
  display: block;
}

.public-banner > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.public-banner--hero {
  height: 220px;
}

@media (min-width: 576px) {
  .public-banner--hero {
    height: 320px;
  }
}

.public-banner--action {
  height: 140px;
  margin-bottom: 1.25rem;
}

@media (min-width: 576px) {
  .public-banner--action {
    height: 200px;
  }
}

/* Action page (register / donate) compact organizer banner */

.action-page-banner {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: .375rem;
  margin-bottom: 1.25rem;
}

/* ── Homepage (.hp-*) ─────────────────────────────────────────────── */

.hp-hero {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-top: 3rem;
  padding-bottom: 2.5rem;
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  background: linear-gradient(135deg, #f8fbff 0%, #eef4fb 100%);
  border-bottom: 1px solid #dbe5f1;
  margin-bottom: 2.5rem;
}

.hp-hero-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .5rem;
}

@media (min-width: 576px) {
  .hp-hero-title {
    font-size: 2.75rem;
  }
}

.hp-hero-lead {
  font-size: 1.0625rem;
  color: #6c757d;
  margin-bottom: 0;
  max-width: 52ch;
}

.hp-section-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #6c757d;
  margin-bottom: 0;
}

.hp-event-list {
  /* No top divider before the first event (PublicEventsListSpacingAndCssDeployCheck-1) — the page's
     "Upcoming Events" hero heading and the section's top padding provide the separation. The bottom
     margin adds breathing room after the last event before the footer. Row separators between events
     come from .op-event-card's border-bottom (unchanged). */
  margin-bottom: 2.5rem;
}

.hp-org-cta {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  background: #f8fbff;
  border-top: 1px solid #dbe5f1;
  margin-top: 2.5rem;
}

/* ── Public page full-bleed section system ─────────────────────────────── */

/* Breaks out of the Bootstrap container so section backgrounds reach the
   viewport edges, while content re-aligns with the container via the
   inverse calc. 50% refers to the containing block (<main>) width, not
   the element's own width, so the math works at every breakpoint. */
.public-page-intro {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-top: 2.5rem;
  padding-bottom: 2rem;
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  background: linear-gradient(135deg, #f8fbff 0%, #eef4fb 100%);
  border-bottom: 1px solid #dbe5f1;
  margin-bottom: 0;
}

.public-page-intro h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: #212529;
}

@media (min-width: 576px) {
  .public-page-intro h1 {
    font-size: 2.25rem;
  }
}

.public-page-intro p {
  color: #6c757d;
  font-size: 1rem;
  margin-bottom: 0;
  max-width: 60ch;
}

.public-page-content {
  padding-top: 2rem;
}

/* Public static/content-page contextual links (PublicStaticPageLinkStyle-1): one consistent
   EventsLog blue for in-content links on About / Terms / Refunds (and reusable for future static
   content). No underline at rest; underline + visible focus on hover/keyboard. Scoped to this
   class only — NOT a global anchor change, and intentionally not auto-applied to all content. */
.public-content-link {
  color: #2c7ac7;
  text-decoration: none;
}

.public-content-link:hover,
.public-content-link:focus-visible {
  color: #1f5e9e;
  text-decoration: underline;
}

.public-content-link:focus-visible {
  outline: 2px solid #258cfb;
  outline-offset: 2px;
  border-radius: 2px;
}

/* .public-form-card is defined with the shared public form-card family above
   (ContactPage-VisualPolish-Implement-1) — it carries the tint plus the stronger
   input border, matching the registration/enrollment forms. */

/* ── Marketing homepage (MarketingHomeOrganizerPivot-1 / MarketingHomeVisualRefinement-1) ──
   Organizer-acquisition homepage. Reuses .hp-hero / .hp-org-cta full-width bands and
   .public-page-content; this block adds the section/card/tag/chip vocabulary plus a warm,
   scoped CTA accent (#b45309). The .btn-mk-* classes are scoped — they do NOT override
   Bootstrap's global .btn-primary, so other pages are unaffected. */

/* Scoped marketing CTA. Softer, welcoming primary: light-blue fill, navy border, near-black text
   (dark text on #cbe0fb ≈ 12:1, passes WCAG AA). Hover/focus fills navy with white text (~11:1).
   Scoped to .btn-mk-primary — does NOT touch Bootstrap's global .btn-primary. */
.btn-mk-primary {
  background-color: #cbe0fb;
  border-color: #1e3a5f;
  color: #111827;
}

.btn-mk-primary:hover,
.btn-mk-primary:focus {
  background-color: #1e3a5f;
  border-color: #1e3a5f;
  color: #fff;
}

.btn-mk-outline {
  background-color: transparent;
  border-color: #1e3a5f;
  color: #1e3a5f;
}

.btn-mk-outline:hover,
.btn-mk-outline:focus {
  background-color: #1e3a5f;
  border-color: #1e3a5f;
  color: #fff;
}

.btn-mk-primary:focus-visible,
.btn-mk-outline:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
}

/* Full-width section bands — the background defines chapter separation. Each band breaks out to
   the full viewport using the same calc technique as .hp-hero / .ep-section, then re-pads so its
   content aligns to the same centered container content edge as the hero. Bands sit flush;
   alternating tint/white surfaces mark each chapter (no rounded section cards). */
.mk-fullband {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  background: #fff;
}

.mk-fullband--tint {
  background: #f5f8fc;
}

/* Section heading: near-black content anchor + a short warm accent rule (the one orange touch). */
.mk-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
  margin-bottom: .875rem;
}

.mk-section-title::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: .5rem;
  background: #b45309;
  border-radius: 2px;
}

/* Hero heading + reserved (CSS-only) visual panel */
.mk-hero-title {
  color: #111827;
}

.mk-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 16rem;
  padding: 2.25rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
  box-shadow: 0 1px 10px rgba(30, 58, 95, .15);
}

/* Compact 3-stage lifecycle teaser inside the hero panel — vertical, icon-led, short labels,
   no numbers/paragraphs. Differs from the horizontal numbered "How it works" cards below.
   The node is a wrapper <span> (not the Font Awesome <i>), so flex centering is not overridden
   by Font Awesome's `.fa-solid { display: inline-block }`. */
.mk-lifecycle {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mk-lifecycle-step {
  display: flex;
  align-items: center;
  gap: .85rem;
}

.mk-lifecycle-node {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
}

.mk-lifecycle-node i {
  font-size: 1.1rem;
  line-height: 1;
}

/* Connector line linking each node to the next (fills the flex gap). */
.mk-lifecycle-step:not(:last-child) .mk-lifecycle-node::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 1.5rem;
  background: rgba(255, 255, 255, .25);
}

.mk-lifecycle-label {
  color: rgba(255, 255, 255, .92);
  font-weight: 600;
  font-size: 1rem;
}

.mk-section-intro {
  max-width: 60ch;
  margin-bottom: 1.5rem;
}

.mk-attendee-onramp {
  font-size: .9375rem;
}

/* Audience categories as compact organization-type tiles (not filter chips). */
.mk-audience-tile {
  display: flex;
  align-items: center;
  gap: .65rem;
  height: 100%;
  background: #fff;
  border: 1px solid #e6edf4;
  border-radius: .625rem;
  padding: .8rem .9rem;
  font-size: .9375rem;
  line-height: 1.3;
  color: #344054;
}

.mk-audience-tile i {
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
  color: #1e3a5f;
  font-size: 1rem;
}

.mk-step {
  height: 100%;
}

.mk-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #e9eff7;
  color: #1e3a5f;
  font-weight: 700;
  font-size: 1.0625rem;
  margin-bottom: .875rem;
}

.mk-step-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #212529;
  margin-bottom: .25rem;
}

.mk-step-text {
  font-size: .9375rem;
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 0;
}

.mk-card {
  height: 100%;
  background: #fff;
  border: 1px solid #e6edf4;
  border-radius: .75rem;
  padding: 1.5rem;
}

.mk-card--soon {
  background: #fbfcfe;
}

.mk-card-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .625rem 0 .375rem;
}

/* Element+class selector (i.mk-card-icon) raises specificity above Font Awesome's
   `.fa-solid { display: inline-block }`, which loads after site.css and would otherwise win at
   equal specificity and disable the flex centering. line-height:1 prevents vertical glyph drift. */
i.mk-card-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #eef2f7;
  color: #1e3a5f;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
}

.mk-card--soon .mk-card-icon {
  background: #f1f3f5;
  color: #9aa4b2;
}

.mk-card-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #212529;
  margin: 0;
}

.mk-card-text {
  font-size: .9375rem;
  color: #495057;
  line-height: 1.6;
  margin-bottom: 0;
}

.mk-final-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: .5rem;
}

/* Final CTA: a calm light band (inherits .hp-org-cta's light background + top border) with extra
   padding for separation. Navy primary + navy-outline secondary keep button styling consistent
   with nav and hero. */
.mk-final-cta {
  margin-top: 1.5rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.mk-final-text {
  color: #6c757d;
  max-width: 60ch;
}

/* PublicFooterPolish-3: text-focused closing CTA — a left-aligned, width-constrained content block
   anchored to the container's left edge (no icon). Reads as product copy rather than a centered
   marketing banner. Button classes (.btn-mk-primary / .btn-mk-outline) are unchanged. */
.mk-final-inner {
  max-width: 640px;
}

.mk-tag {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .15rem .5rem;
  border-radius: 999px;
}

.mk-tag--now {
  background: #e7f5ec;
  color: #157347;
}

.mk-tag--early {
  background: #fff4e0;
  color: #9a6700;
}

.mk-tag--soon {
  background: #eef1f5;
  color: #5c636a;
}

/* ── Org page share buttons ──────────────────────────────────────────── */

.op-share-actions {
  display: flex;
  justify-content: flex-end;
  gap: .375rem;
  flex-wrap: wrap;
  margin-top: .75rem;
  padding-bottom: .25rem;
}

.op-page:not(.op-has-banner) .op-share-actions {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.op-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid #adb5bd;
  color: #6c757d;
  background: transparent;
  text-decoration: none;
  font-size: .875rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: border-color .15s, color .15s, background-color .15s;
}

.op-share-button:hover {
  border-color: #343a40;
  color: #212529;
  background: #f8f9fa;
  text-decoration: none;
}

.op-share-button:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
}

/* ── Org page profile links (Connect section) ────────────────────────── */

.op-profile-links {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #dbe5f1;
  border-radius: .75rem;
}

.op-profile-links-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #6c757d;
  margin-bottom: .875rem;
}

.op-profile-links-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

@media (min-width: 576px) {
  .op-profile-links-list {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.op-profile-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.375rem;
  border: 1.5px solid #343a40;
  border-radius: 2rem;
  color: #212529;
  background-color: transparent;
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.4;
  transition: background-color .15s, color .15s;
}

.op-profile-link:hover {
  background-color: #212529;
  color: #fff;
  text-decoration: none;
}

.op-profile-link:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
}

.op-profile-link-icon {
  flex-shrink: 0;
  width: 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Org page editor — sticky jump nav on desktop */

@media (min-width: 992px) {
  .org-page-editor-nav-sticky {
    position: sticky;
    top: 1rem;
  }
}

/* Org page editor — nav link default + active state */

.org-page-editor-nav a {
  color: #6c757d;
  transition: color 0.15s;
}

.org-page-editor-nav a.ope-nav-active {
  color: #212529;
  font-weight: 600;
}

@media (min-width: 992px) {
  .org-page-editor-nav a {
    padding-left: 0.5rem;
    border-left: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
  }
  .org-page-editor-nav a.ope-nav-active {
    border-left-color: #0d6efd;
  }
}

/* Org page editor — floating back to top button */

.org-page-editor-backtop {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #6c757d;
  color: #fff;
  border-radius: 50%;
  text-decoration: none;
  font-size: 1rem;
  z-index: 1030;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  opacity: 0.75;
  transition: opacity 0.15s;
}

.org-page-editor-backtop:hover {
  opacity: 1;
  color: #fff;
}

/* ── OrgDesk Event Edit — horizontal section nav ────────────────────── */

.event-edit-section-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: .125rem;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: .375rem;
  margin-bottom: 1.25rem;
  position: sticky;
  top: 0;
  z-index: 10;
}

.event-edit-section-nav a {
  flex-shrink: 0;
  padding: .3125rem .75rem;
  font-size: .875rem;
  color: #6c757d;
  text-decoration: none;
  border-radius: .25rem;
  white-space: nowrap;
  transition: color .15s, background-color .15s;
}

.event-edit-section-nav a:hover {
  color: #212529;
  background-color: #f1f3f5;
}

.event-edit-section-nav a:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: -2px;
}

.event-edit-section-nav a.event-edit-nav-active {
  color: #212529;
  font-weight: 600;
  background-color: #e8f0fe;
}

/* Push anchor targets below the sticky section nav */
#panel-publish,
#panel-event-details,
#panel-schedule,
#panel-location,
#panel-registration,
#panel-donations,
#panel-checkin,
#panel-internal,
/* Organizer capabilities jump-link targets (OrganizerCapabilitiesAlignment-1) reuse the
   same sticky-nav offset so anchored sections clear the sticky section nav. */
#cap-donation,
#cap-fee-payments,
#cap-ticketing,
#cap-attendance,
#cap-audience-messaging,
#cap-direct-create {
  scroll-margin-top: 2.5rem;
}

/* OrgDesk Event Edit — floating back-to-top button */

.event-edit-back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #6c757d;
  color: #fff;
  border-radius: 50%;
  text-decoration: none;
  font-size: 1rem;
  z-index: 1030;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  opacity: 0.75;
  transition: opacity 0.15s;
}

.event-edit-back-to-top:hover {
  opacity: 1;
  color: #fff;
}

/* OrgDesk Event Edit — publish card subtle tint */

.event-edit-publish-card {
  background-color: var(--bs-tertiary-bg, #f8f9fa);
}

/* ── Operational search control ──────────────────────────────────────── */

.operational-search {
  max-width: 720px;
}

/* ── Front Desk mobile polish ────────────────────────────────────────── */

.fd-card-registered {
  background-color: #f3f7f4;
}

.fd-selected {
  background-color: #dbeafe;
  color: #1e40af;
  border-color: #93c5fd;
}

.fd-selected:hover {
  background-color: #bfdbfe;
  color: #1e3a8a;
  border-color: #60a5fa;
}

.fd-page-dot {
  display: inline-block;
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background-color: #198754;
  flex-shrink: 0;
}

.fd-page-dot-closed {
  background-color: #6c757d;
}

.fd-actor-line {
  font-size: 0.75rem;
}

.fd-visitor-badge {
  background-color: #dbeafe;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

@media (max-width: 767.98px) {
  .fd-event-card-row {
    flex-direction: column;
  }
  .fd-event-controls {
    align-items: flex-start !important;
    width: 100%;
    border-top: 1px solid #dee2e6;
    padding-top: 0.75rem;
    margin-top: 0.5rem;
  }
  .fd-primary-btn {
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }
  /* MobileCheckInErgonomics-1 — wire the 44px touch token (--el-touch-min) to the per-attendee check-in
     action row so every action (Check In/Out, Leave/Join Session, Undo, Add Donation) is a comfortable
     touch target during live door check-in. A slightly wider gap separates the primary action from the
     adjacent Undo to reduce accidental taps. Primary actions also dropped btn-sm (per the Front Desk design
     doc). No layout, workflow, or business-logic change. */
  .fd-attendee-actions {
    gap: 0.75rem !important;
  }
  .fd-attendee-actions .btn {
    min-height: var(--el-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── Admin layout footer ─────────────────────────────────────────────── */

.admin-footer {
  /* OrganizerShellPolish-1: a step deeper than the context strip (#f8f9fa) so the footer
     stops reading as the strip's twin, with muted-navy text that faintly echoes the header
     — a quiet bookend, deliberately not a second dark slab. */
  background-color: var(--el-footer-bg);
  border-top: 1px solid #dde2e8;
  color: rgba(30, 45, 64, .65);
  padding: 1.75rem 0;
  font-size: .875rem;
}

/* ── Admin layout — back to top button ───────────────────────────────── */

.admin-back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e2d40;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 1.125rem;
  line-height: 1;
  z-index: 1035;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, background .15s;
}

.admin-back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.admin-back-to-top:hover {
  background: #111e2b;
  color: #fff;
}

/* ── Public/client layout — back to top button ───────────────────────────
   Same behavior as the admin button (.admin-back-to-top), but in the EventsLog
   orange theme used by the header avatar (#f97316). Public layout only. */
.public-back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f97316;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 1.125rem;
  line-height: 1;
  z-index: 1035;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, background .15s;
}

.public-back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.public-back-to-top:hover {
  background: #ea580c;
  color: #fff;
}

.public-back-to-top:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

/* ── Public site footer ───────────────────────────────────────────────── */

.site-footer {
  background-color: #282A35;
  color: #f8f9fa;
}

.site-footer-muted {
  color: rgba(255, 255, 255, .75);
  font-size: .9rem;
}

.site-footer-link {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
}

.site-footer-link:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer-link:focus-visible {
  outline: 2px solid #9ec5fe;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Footer brand column (PublicFooterPolish-1) */
.site-footer-logo {
  height: 34px;
  width: auto;
}

.site-footer-brand-text {
  color: rgba(255, 255, 255, .70);
  font-size: .9rem;
  max-width: 34ch;
  margin-top: .75rem;
  margin-bottom: 0;
}

/* Footer column headings + link lists. Headings carry the column separation (PublicFooterPolish-2,
   Option B): brighter, heavier, and a touch more letter-spacing rather than vertical divider lines. */
.site-footer-heading {
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 1rem;
}

/* Decorative footer inline icon (e.g. envelope) — inherits the muted footer tone, sits before its
   link with a small gap. aria-hidden in markup keeps it out of the accessibility tree. */
.site-footer-icon {
  color: rgba(255, 255, 255, .55);
  margin-right: .4rem;
}

.site-footer-links {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.site-footer-links li + li {
  margin-top: .5rem;
}

/* Bottom bar divider */
.site-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
}

/* ── Event context sidebar navigation ────────────────────────────────── */

.event-sidebar {
  padding: .75rem 0;
}

@media (min-width: 768px) {
  .event-sidebar {
    position: sticky;
    top: 1rem;
    /* OnboardingPolish-1 follow-up: the manager rail gained the Messages item (~36px taller), pushing it
       just past the old `100vh - 5rem` cap so a prominent scrollbar showed at common desktop heights
       (~viewport 798–834px) where the content only barely overflowed. Reclaiming the over-reserved space
       (5rem → 2rem) drops the overflow threshold below the pre-Messages baseline, so the rail fits without
       a bar at normal heights; on genuinely short viewports it still scrolls, now with an unobtrusive thin
       scrollbar instead of the default heavy one. CSS-only; no items removed, no order/behavior change. */
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(33, 37, 41, .28) transparent;
  }
}

.event-sidebar-group-label {
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #495057;
  padding: 0 .75rem;
  margin-top: 0;
  margin-bottom: .375rem;
}

.event-sidebar-group + .event-sidebar-group {
  margin-top: 1.25rem;
  border-top: 1px solid #e9ecef;
  padding-top: .5rem;
}

.event-sidebar-nav li {
  list-style: none;
}

.event-sidebar-nav a,
.event-sidebar-nav .event-sidebar-item--disabled {
  display: block;
  padding: .4375rem .75rem;
  font-size: .875rem;
  color: #495057;
  text-decoration: none;
  /* RailComfort-1: right-rounded selected bar. Left corners stay modest (4px) so the
     blue left border reads anchored to the rail; the right edge softens (8px). The 4px
     transparent left border is reserved on every item, so activating a row adds no shift. */
  border-radius: .25rem .5rem .5rem .25rem;
  border-left: 4px solid transparent;
  transition: color .15s, background-color .15s;
}

.event-sidebar-nav a:hover {
  color: #212529;
  background-color: #f1f3f5;
  text-decoration: none;
}

.event-sidebar-nav a:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: -2px;
  border-radius: .25rem .5rem .5rem .25rem;
}

.event-sidebar-nav a[aria-current="page"] {
  color: #212529;
  font-weight: 600;
  background-color: #e8f0fe;
  border-left-color: #0d6efd;
}

.event-sidebar-item--disabled {
  color: #adb5bd;
  cursor: default;
}

.event-sidebar-item--disabled-reason {
  display: block;
  font-size: .7rem;
  color: #adb5bd;
  padding: 0 .75rem .3125rem 1rem;
  line-height: 1.3;
}

.event-sidebar-sub-item a,
.event-sidebar-sub-item .event-sidebar-item--disabled {
  padding-left: 1.75rem;
  /* RailComfort-1: keep nested rows compact so the longest (admin event) rail stays
     usable — only top-level rows get the roomier vertical padding. */
  padding-top: .3125rem;
  padding-bottom: .3125rem;
  font-size: .8125rem;
}

.event-sidebar-escape {
  padding: .5rem .75rem;
  border-top: 1px solid #e9ecef;
  margin-top: .75rem;
}

.event-sidebar-escape a {
  font-size: .8125rem;
  color: #6c757d;
  text-decoration: none;
}

.event-sidebar-escape a:hover {
  color: #212529;
  text-decoration: underline;
}

/* Mobile typography and tap density polish */
@media (max-width: 767.98px) {
  .event-sidebar-nav a,
  .event-sidebar-nav .event-sidebar-item--disabled {
    padding-top: .8125rem;
    padding-bottom: .8125rem;
    font-size: 1rem;
    font-weight: 500;
  }

  .event-sidebar-nav a {
    color: #2f343b;
  }

  .event-sidebar-sub-item a,
  .event-sidebar-sub-item .event-sidebar-item--disabled {
    font-size: .9rem;
  }

  .event-sidebar-group-label {
    font-size: .875rem;
  }
}

/* Event Menu trigger button — mobile only (d-md-none keeps it off desktop) */
.event-menu-trigger {
  --bs-btn-color: #343a40;
  --bs-btn-border-color: #6c757d;
  padding-top: .5rem;
  padding-bottom: .5rem;
  font-weight: 500;
}

/* Responsive column separator — md+: right border */
.event-sidebar-col {
  padding-bottom: 0;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .event-sidebar-col {
    border-right: 1px solid #dee2e6;
  }
}

/* ── Mobile identity-card tightening — event detail + organizer ──────── */

@media (max-width: 575.98px) {
  .ep-has-banner .ep-header-group {
    padding: 0 1rem 1rem;
  }

  .ep-has-banner .ep-logo-wrap {
    margin-top: -28px;
    margin-bottom: .25rem;
  }

  .ep-has-banner .ep-logo {
    width: 64px;
    height: 64px;
  }

  .ep-has-banner .ep-identity {
    gap: .5rem;
  }

  .ep-title {
    font-size: 1.5rem;
  }

  .ep-meta {
    margin-top: .625rem;
    margin-bottom: .625rem;
  }

  .ep-share-actions {
    margin-top: 1rem;
    gap: .375rem;
    justify-content: flex-end;
  }

  .op-has-banner .op-identity-group {
    padding: 0 1rem 1rem;
  }

  .op-has-banner .op-logo-wrap {
    margin-top: -28px;
    margin-bottom: .25rem;
  }

  .op-has-banner .op-logo {
    width: 64px;
    height: 64px;
  }

  .op-has-banner .op-identity {
    gap: .5rem;
  }

  .op-heading {
    font-size: 1.5rem;
  }

  .op-share-actions {
    margin-top: .5rem;
    gap: .375rem;
    justify-content: flex-end;
  }
}

.event-operator-bottom-nav {
  margin-top: 4.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed #ccc;
}

.event-operator-bottom-nav .btn {
  min-width: 4.5rem;
}

/* ============================================================================
   Recurring schedule page (/s/{slug}-{id}) — RecurringEvents-PublicUX-SchedulePage-1
   Scoped s-* classes only. Recurring-only page; no bleed into op-*/ep-*/one-off
   pages. Reuses .op-share-* (share buttons) and .hp-event-list/.op-event-card
   (upcoming cards) read-only, without modifying them.
   ============================================================================ */

/* Banner — fills the Bootstrap container width (matches the organizer hero banner) */
.s-banner {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: #e9ecef;
  border-radius: .5rem;
  display: block;
}

.s-banner > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 576px) {
  .s-banner {
    height: 300px;
  }
}

/* Hero / identity */
.s-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  /* Tight gap so the Next Session block reads as a continuation of the hero. */
  margin-bottom: 1.25rem;
}

/* No banner: a soft hero band so the page still looks intentional */
.s-hero--plain {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: .5rem;
  padding: 1.75rem 1.5rem;
  margin-top: .25rem;
}

/* With banner: white card that overlaps the banner slightly */
.s-hero--has-banner {
  background: #fff;
  border-radius: .5rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .09);
  padding: 1.25rem 1.5rem;
  margin-top: -2.5rem;
  position: relative;
  z-index: 1;
}

.s-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
  flex: 1 1 auto;
}

.s-logo-wrap {
  flex-shrink: 0;
}

.s-logo {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
  background-color: #f8f9fa;
  display: block;
}

.s-hero--has-banner .s-logo {
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

@media (min-width: 576px) {
  .s-logo {
    width: 88px;
    height: 88px;
  }
}

.s-hero-text {
  min-width: 0;
}

.s-eyebrow {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .75rem;
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
  margin: 0 0 .25rem;
}

.s-title {
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 0 0 .35rem;
}

@media (min-width: 576px) {
  .s-title {
    font-size: 2rem;
  }
}

.s-org {
  margin: 0;
  color: var(--bs-secondary-color, #6c757d);
}

.s-hero-actions {
  flex-shrink: 0;
}

/* Content — spans the full container width so every section (Next session, When it
   meets, Upcoming dates, Hosted by) shares the same left/right rhythm as the hero/banner
   instead of floating in a narrower column. */
.s-content {
  width: 100%;
}

.s-section {
  margin-bottom: 2.25rem;
}

.s-section-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 .9rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.s-section-icon {
  /* Charcoal, not link-blue — supports the heading without drawing attention. */
  color: #495057;
  font-size: 1rem;
}

.s-section-lead {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .9375rem;
  margin: 0 0 1rem;
}

/* Activity summary (Phase 1.5) — a calm lead paragraph directly under the hero. */
.s-summary {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: #343a40;
  margin: 0 0 1.75rem;
}

/* About body (Phase 1.5) — plain text; preserve author line breaks without raw HTML. Slightly
   larger type + more open line-height so longer descriptions read comfortably (no cards/panels). */
.s-about-body {
  white-space: pre-line;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #343a40;
}

/* Calendar (.ics) download link (Phase 1.5) — secondary action tied to the schedule list: sits
   between the upcoming-dates lead and the first month group, right-aligned on desktop. Stays a link
   (existing contextual text color via .public-content-link), never a button. */
.s-ics-download {
  text-align: right;
  font-size: .9375rem;
  margin: 0 0 1.1rem;
}

.s-ics-download a {
  font-weight: 600;
}

/* Neutral icon treatment matching the section-heading icons (.s-section-icon) so the calendar glyph
   reads as part of the site icon system; only the link text carries the contextual link color. */
.s-ics-icon {
  color: #495057;
}

/* Next session spotlight — the strongest informational block on the page, but a calm
   neutral surface (no accent border / tint) so it reads as a continuation of the hero,
   not a selected/alert card. */
.s-next-session {
  display: flex;
  align-items: stretch;
  gap: 1.1rem;
  /* Soft blue so the panel and the date badge share a matching cool treatment. */
  border: 1px solid #c7dceb;
  border-radius: .6rem;
  background: #eff6ff;
  padding: 1.25rem 1.4rem;
  margin-bottom: 2rem;
}

.s-next-badge {
  flex-shrink: 0;
  width: 76px;
  border-radius: .5rem;
  /* Soft blue accent matching the outer panel — readable dark-blue text,
     not a dark "stat widget" tile. */
  background: #c2e7ff;
  border: 1px solid #9cdbf1;
  color: #08008f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .5rem 0;
  line-height: 1.1;
}

.s-next-badge-month {
  text-transform: uppercase;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .03em;
}

.s-next-badge-day {
  font-size: 1.6rem;
  font-weight: 700;
}

.s-next-badge-year {
  font-size: .75rem;
  opacity: .85;
}

.s-next-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.s-next-eyebrow {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .75rem;
  font-weight: 700;
  color: #495057;
  margin: 0 0 .15rem;
}

.s-next-title {
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--bs-body-color, #212529);
}

.s-next-title:hover {
  text-decoration: underline;
}

.s-next-meta {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .9375rem;
  margin: .2rem 0 .4rem;
}

/* Relative-time line ("Starts in N days") — informational, warm to match the badge. */
.s-next-starts {
  font-weight: 600;
  color: #8f4700;
  margin: 0 0 .85rem;
}

.s-next-cta {
  align-self: flex-start;
}

/* Recurrence-derived "Next scheduled meeting" fallback (no generated Event). Reuses the
   .s-next-session card; these two lines replace the linked title + "View this session" action. */
.s-next-meeting-date {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--bs-body-color, #212529);
  margin: 0 0 .2rem;
}

.s-next-meeting-note {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .85rem;
  margin: .15rem 0 0;
}

/* Hosted-by — compact organizer trust block */
.s-organizer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .85rem;
  border: 1px solid #e9ecef;
  border-radius: .5rem;
  background: #fff;
  padding: .85rem 1rem;
  margin-bottom: 2.25rem;
}

.s-organizer-logo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 50%;
  background-color: #f8f9fa;
}

.s-organizer-text {
  min-width: 0;
  flex: 1 1 auto;
}

.s-organizer-eyebrow {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .7rem;
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
  margin: 0;
}

.s-organizer-name {
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--bs-body-color, #212529);
}

a.s-organizer-name:hover {
  text-decoration: underline;
}

/* Led by — instructor/presenter cards (PublicProfiles-PublicRendering-1). Presentation only. */
/* ── Shared public form-card family ──────────────────────────────────────────
   One definition for the public bordered/tinted form panels so registration,
   class enrollment, and the contact page share a single look instead of drifting
   (ContactPage-VisualPolish-Implement-1; promoted in PublicEnrollment-VisualPolish-Implement-1).
   `.public-form-card` is the generic name; `.reg-card` is the original registration alias —
   both resolve here. Pair with Bootstrap's `border rounded p-3 mb-3` utilities in markup.
   Used by /e/.../register, /s/.../join, and /contact. */
.reg-card,
.public-form-card {
  background-color: #fbfcfe;
}

.reg-card .form-control,
.public-form-card .form-control {
  border-color: #adb5bd;
}

.s-led-by-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 576px) {
  .s-led-by-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

.s-led-by-card {
  /* flow-root establishes a block-formatting context so the floated avatar is fully
     contained — short cards (little/no bio) keep their height and the photo never spills
     past the bottom border. Content (role/name/bio) flows from the card's left edge so it
     aligns with the rest of the page, and the bio reclaims width beneath the photo. */
  display: flow-root;
  border: 1px solid #e9ecef;
  border-radius: .6rem;
  background: #fff;
  padding: 1rem 1.1rem;
}

.s-led-by-avatar {
  /* Small avatar anchored at the top-right; text wraps to its left and beneath it. */
  float: right;
  width: 64px;
  height: 64px;
  margin: 0 0 .5rem .9rem;
  object-fit: cover;
  border-radius: 50%;
  background-color: #f8f9fa;
}

/* Neutral placeholder when there is no active photo */
.s-led-by-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
  font-size: 1.6rem;
  border: 1px solid #e9ecef;
}

.s-led-by-body {
  min-width: 0;
}

.s-led-by-role {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--bs-secondary-color, #6c757d);
  margin: 0 0 .1rem;
}

.s-led-by-name {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--bs-body-color, #212529);
  margin: 0 0 .35rem;
}

.s-led-by-bio {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .9375rem;
  margin: 0;
}

/* When it meets — pattern presented as schedule cards */
.s-pattern-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
}

@media (min-width: 576px) {
  .s-pattern-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .s-pattern-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.s-pattern-card {
  border: 1px solid #e9ecef;
  border-radius: .5rem;
  background: #fff;
  padding: 1rem 1.1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.s-pattern-card-cadence {
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: .25rem;
}

.s-pattern-card-time {
  font-weight: 500;
  color: var(--bs-body-color, #212529);
}

.s-pattern-card-duration {
  color: var(--bs-secondary-color, #6c757d);
  font-weight: 400;
  margin-left: .15rem;
}

.s-pattern-card-location {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .9375rem;
  margin-top: .4rem;
}

.s-pattern-card-pin {
  color: var(--bs-secondary-color, #adb5bd);
  margin-right: .35rem;
}

.s-tz-note {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .8125rem;
  margin: .65rem 0 0;
}

/* Empty state */
.s-empty {
  border: 1px dashed #d6d9dd;
  border-radius: .5rem;
  background: #f8f9fa;
  padding: 2rem 1.25rem;
  text-align: center;
}

.s-empty-icon {
  font-size: 1.75rem;
  color: var(--bs-secondary-color, #adb5bd);
  margin-bottom: .5rem;
}

.s-empty-title {
  font-weight: 600;
  margin: 0 0 .25rem;
}

.s-empty-text {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .9375rem;
  margin: 0;
}

/* ============================================================================
   Organizer page (/o) — recurring event card treatment
   RecurringEvents-PublicUX-OrganizerCards-1
   Additive op-recurring-* classes + a card modifier. Applied only to recurring
   cards (EventSeriesId.HasValue). Base .op-event-card / one-time cards are NOT
   modified and must stay visually identical.
   ============================================================================ */

/* Recurring modifier carries no border accent — the card must not read as
   selected/active. The amber status badge alone signals "recurring schedule". */
.op-event-card--recurring {
  /* intentionally no border/background change to the base card */
}

/* Status marker, deliberately NOT link-blue: soft amber pill with dark text so
   it reads as a status, distinct from the blue title link. */
.op-recurring-badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #8a5a00;
  background: #fff3cd;
  border: 1px solid #ffe69c;
  border-radius: 999px;
  padding: .18rem .7rem;
  margin-bottom: .35rem;
}

/* Card-level location, shown once when every pattern rule shares the same concise location
   (CardPolish-1). Secondary weight so it doesn't compete with the title. */
.op-recurring-cardloc {
  font-size: .8125rem;
  font-weight: 500;
  color: #6c757d;
  margin: 0 0 .4rem;
}

/* Pattern rules — cadence-first hierarchy (CardPolish-1). Each rule stacks a lead cadence token
   over a secondary time/duration/location detail line, so multi-rule cards scan down a clean
   left edge and wrap cleanly on mobile (no mid-segment breaks, no orphaned separators). */
.op-recurring-patterns {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: 0 0 .4rem;
}

.op-recurring-cadence {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--bs-body-color, #212529);
  line-height: 1.3;
}

.op-recurring-detail {
  display: block;
  font-size: .8125rem;
  color: #6c757d;
  line-height: 1.35;
}

.op-recurring-next-label {
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
  margin-right: .2rem;
}

.op-recurring-relative {
  color: var(--bs-secondary-color, #6c757d);
}

/* "View full schedule" link on a Regular activities block (OrganizerPage-RegularActivities-1).
   Lightweight contextual link; the activity title is also a link to /s. */
.op-recurring-viewlink {
  display: inline-block;
  margin-top: .35rem;
  font-size: .9375rem;
  font-weight: 500;
}

/* ============================================================================
   Featured Recurring Schedule card (OrganizerPage-FeaturedRecurringSchedule-1).
   Shown when the organizer has only 1–2 recurring schedules in list mode, so a
   single offering reads as a primary offering, not a thin list row. A calm white
   panel (same surface tokens as .op-schedule / .op-profile-links) whose extra size
   is earned by real content: title, cadence, locations, next 3 dates, CTA.
   ============================================================================ */
.op-featured-activity {
  background: #fff;
  border: 1px solid #dbe5f1;
  border-radius: .75rem;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1rem;
}

.op-featured-title {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  text-decoration: none;
  line-height: 1.25;
  margin: .4rem 0 .25rem;
}

.op-featured-title:hover,
.op-featured-title:focus-visible {
  color: #2c7ac7;
  text-decoration: underline;
}

.op-featured-cardloc {
  font-size: .9375rem;
  font-weight: 500;
  color: #6c757d;
  margin: 0 0 .75rem;
}

.op-featured-patterns {
  display: flex;
  flex-direction: column;
  gap: .9rem;            /* modest breathing room between distinct recurrence-rule groups */
  margin: .5rem 0 1rem;
}

.op-featured-cadence {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--bs-body-color, #212529);
  line-height: 1.3;
}

.op-featured-detail {
  display: block;
  font-size: .875rem;
  color: #6c757d;
  line-height: 1.4;
}

/* Upcoming next-3 preview — the content that earns the card's extra height and
   proves the schedule is live, without duplicating the /s timetable. */
.op-featured-upcoming {
  border-top: 1px solid #e3e8ef;
  padding-top: 1rem;
  margin-bottom: 1.1rem;
}

.op-featured-upcoming-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6c757d;
  margin: 0 0 .5rem;
}

.op-featured-upcoming-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.op-featured-upcoming-list li {
  font-size: .9375rem;
  color: #212529;
  font-variant-numeric: tabular-nums;
}

.op-featured-occ-loc {
  color: #6c757d;
}

.op-featured-cta {
  display: inline-block;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
}

.op-featured-cta:hover,
.op-featured-cta:focus-visible {
  text-decoration: underline;
}

@media (max-width: 575.98px) {
  .op-featured-activity {
    padding: 1.25rem 1.25rem;
  }
  .op-featured-title {
    font-size: 1.3125rem;
  }
}

/* ============================================================================
   Activity Schedule (OrganizerPage-ActivitySchedule-1) — day-grouped rendering of
   weekly recurring rules on /o. Compact, lean rows; no grid/table; same layout on
   desktop and mobile. Additive op-schedule-* classes only.
   ============================================================================ */

/* Single light panel around the schedule body — matches the /o card surface
   (white, soft blue-grey border, rounded, comfortable padding, no heavy shadow). */
.op-schedule {
  background: #fff;
  border: 1px solid #dbe5f1;
  border-radius: .75rem;
  padding: 1.25rem 1.5rem;
}

/* Shared location shown once under the heading (single-location schedules). */
.op-schedule-location {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .9375rem;
  margin: -.25rem 0 1.1rem;
}

/* Day section header — simple but clear: weight + a definite divider, generous top space. */
.op-schedule-day {
  font-size: 1rem;
  font-weight: 700;
  margin: 1.5rem 0 .25rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid #e3e8ef;
}

/* First day sits flush with the panel top (or the shared-location line). */
.op-schedule-location + .op-schedule-day,
.op-events-label + .op-schedule-day {
  margin-top: 0;
}

.op-schedule-rows {
  display: flex;
  flex-direction: column;
}

/* Aligned two columns: time | activity. Grid (not a table) so times and titles
   line up across all rows of a day. */
.op-schedule-row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  align-items: baseline;
  gap: .15rem 1rem;
  padding: .55rem 0;
}

.op-schedule-row + .op-schedule-row {
  border-top: 1px solid #f1f4f8;
}

.op-schedule-time {
  color: #495057;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.op-schedule-activity {
  min-width: 0;
}

.op-schedule-title {
  font-weight: 500;
  /* EventsLog contextual link color (matches .public-content-link and the recurring schedule
     links), not the brighter Bootstrap default link blue. */
  color: #2c7ac7;
  text-decoration: none;
}

.op-schedule-title:hover,
.op-schedule-title:focus-visible {
  color: #1f5e9e;
  text-decoration: underline;
}

/* Mixed-location: muted, smaller, on its own line beneath the title. */
.op-schedule-loc {
  display: block;
  color: var(--bs-secondary-color, #6c757d);
  font-size: .875rem;
  margin-top: .1rem;
}

@media (max-width: 575.98px) {
  .op-schedule {
    padding: 1rem 1.1rem;
  }

  /* Mobile: stack time above the activity (same conceptual day → entries layout). */
  .op-schedule-row {
    grid-template-columns: 1fr;
    gap: .1rem;
  }
}

/* ============================================================================
   Event detail page (/e) — recurring "More dates in this schedule" block
   RecurringEvents-PublicUX-OccurrenceAffordance-1 (placement: -OccurrenceAffordancePlacement-1)
   Additive ep-recurring-* classes. Rendered only for recurring occurrences whose
   schedule page is publicly reachable, low in the page (after Schedule/Location,
   before the Organizer card). Supportive — deliberately lighter than the hero.
   One-time event pages render none of this and base .ep-* styles are not modified.
   ============================================================================ */

/* Neutral, low-emphasis supporting card — no accent color, soft border. */
.ep-recurring-more {
  background: #f8f9fa;
  border: 1px solid #eceef0;
  border-radius: .5rem;
  padding: 1rem 1.1rem;
  margin: 1.5rem 0;
}

.ep-recurring-more-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 .5rem;
}

.ep-recurring-more-note {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .9375rem;
  margin: 0;
}

.ep-recurring-more-link {
  font-weight: 500;
  font-size: .9375rem;
  /* Same EventsLog contextual link styling as the sibling date links above. */
  color: #2c7ac7;
  text-decoration: none;
}

.ep-recurring-more-link:hover,
.ep-recurring-more-link:focus-visible {
  color: #1f5e9e;
  text-decoration: underline;
}

.ep-recurring-siblings {
  list-style: none;
  padding: 0;
  margin: 0 0 .65rem;
}

.ep-recurring-sibling + .ep-recurring-sibling {
  border-top: 1px solid #eef0f2;
}

.ep-recurring-sibling-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .6rem;
  text-decoration: none;
  /* EventsLog contextual link color (matches .public-content-link and the recurring schedule
     links), not the brighter Bootstrap default link blue. */
  color: #2c7ac7;
  padding: .4rem 0;
}

.ep-recurring-sibling-link:hover {
  color: #1f5e9e;
}

.ep-recurring-sibling-link:hover time {
  text-decoration: underline;
}

.ep-recurring-sibling-loc {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .9rem;
}

/* ============================================================================
   Schedule page (/s) — Upcoming dates, grouped by month
   RecurringEvents-PublicUX-ScheduleUpcomingDates-1
   Scoped s-upcoming-* classes. Date-focused rows (the title repeats across a
   recurring schedule, so it is intentionally omitted here). Reuses no shared
   op-event-card styles.
   ============================================================================ */

/* Subtle warm divider marking the transition from the schedule summary ("When it meets")
   to individual occurrence browsing. Thin light-warm line with generous spacing — no heavy hr. */
.s-upcoming {
  border-top: 1px solid #e7e2d6;
  padding-top: 2.25rem;
  margin-top: .5rem;
}

.s-upcoming-count {
  color: var(--bs-secondary-color, #6c757d);
}

.s-upcoming-month + .s-upcoming-month {
  margin-top: 1.25rem;
}

.s-upcoming-month-label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
  margin: 0 0 .4rem;
}

.s-upcoming-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #e9ecef;
  border-radius: .5rem;
  overflow: hidden;
  background: #fff;
}

.s-upcoming-row + .s-upcoming-row {
  border-top: 1px solid #f0f1f3;
}

.s-upcoming-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .55rem;
  padding: .6rem .9rem;
  text-decoration: none;
  color: var(--bs-body-color, #212529);
}

.s-upcoming-link:hover {
  background: #f8f9fa;
}

.s-upcoming-link:hover .s-upcoming-date {
  color: #1f5e9e;
  text-decoration: underline;
}

.s-upcoming-date {
  font-weight: 600;
  /* EventsLog contextual link color (matches .public-content-link and the organizer/events
     pages), not the brighter Bootstrap default link blue. */
  color: #2c7ac7;
}

.s-upcoming-time {
  color: var(--bs-body-color, #212529);
}

.s-upcoming-sep {
  color: var(--bs-secondary-color, #adb5bd);
}

.s-upcoming-loc {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .9375rem;
}

/* ============================================================================
   OrganizerExperiencePolish-1A — accessibility / readability / table polish
   ----------------------------------------------------------------------------
   Conservative polish only (no redesign, no layout/workflow change). Almost
   everything here is SCOPED to the organizer/admin/staff app shell via
   `.app-shell` (added to the _AdminLayout <body>); the public site (_Layout)
   is intentionally left untouched so its hand-tuned op-/ep-/mk- styling is
   unaffected. Introduces a tiny `--el-*` design-token seed used only by the
   improvements below — NOT a full token system.
   Implements review findings A1, A2, A3, M3, V4, and M1 (first pass).
   ============================================================================ */

:root {
  /* A1 — muted/help/metadata ink. Replaces the borderline #6c757d (≈4.2:1 on
     the soft gradients) with a value that clears WCAG AA (≈5.5–6:1) on white,
     ghostwhite, and the gradient panels. */
  --el-text-muted: #5c636a;
  /* A3 — disabled rail items: was #adb5bd (~1.9:1, effectively invisible). */
  --el-nav-disabled: #6c757d;
  /* V4 — subtle zebra stripe for dense tables. */
  --el-table-stripe: #f4f7fa;
  /* M3 — comfortable minimum touch target. */
  --el-touch-min: 2.75rem; /* 44px */

  /* OrganizerShellPolish-1 — app-shell chrome tokens (navy app bar + brand + footer).
     The navy reuses the value already present on the back-to-top button; the orange is
     EventsLog's existing accent, reserved exclusively for the ".net" wordmark suffix. */
  --el-appbar: #1e2d40;                       /* header background (deep admin navy) */
  --el-appbar-edge: #16212f;                  /* header bottom hairline, a shade darker */
  --el-appbar-ink: #ffffff;                   /* primary navbar text/links */
  --el-appbar-ink-dim: rgba(255, 255, 255, .70); /* secondary navbar text (View Site, username) */
  --el-appbar-active: #7fb3e6;                /* navbar active/hover accent (desaturated brand blue) */
  --el-brand-accent: #f97316;                 /* ".net" orange — wordmark ONLY, never reused */
  --el-context-name: #1e2d40;                 /* organizer name in the context strip (echoes header) */
  --el-footer-bg: #eef1f5;                    /* footer band, one step deeper than the strip */
}

/* A2 — base typography: nudge the mobile root from 14px to 15px for easier
   reading on phones (older organizers). Desktop (>=768px) stays 16px. rem-based
   layout scales uniformly, so this is a gentle ~7% bump, not a redesign. */
@media (max-width: 767.98px) {
  html { font-size: 15px; }
}

/* A1 — muted text contrast inside the app shell. Drives the ~950 Bootstrap
   `.text-muted` / `.text-body-secondary` usages plus form help text. */
.app-shell {
  --bs-secondary-color: var(--el-text-muted);
}

.app-shell .text-muted,
.app-shell .text-body-secondary,
.app-shell .form-text,
.app-shell small.text-muted {
  color: var(--el-text-muted) !important;
}

/* V4 — zebra striping for readability/scanning of dense tables. Uses
   Bootstrap's own `--bs-table-bg-type` channel so `.table-hover`
   (`--bs-table-bg-state`) still layers on top. The stripe is applied to EVERY
   cell of a striped row so the whole row shares one background.
   Contextual ROWS (`table-warning`/`table-success`/…) are excluded so their
   status colour is never clobbered. The exclusion is applied at the row level
   only — a per-cell `:not([class*="table-"])` was removed (OrganizerExperience
   Polish-4C) because it matched Bootstrap responsive display utilities such as
   `d-md-table-cell`, which left some cells unstriped and produced mixed
   backgrounds across a single row. No tbody cell uses a contextual `table-*`
   class, so no cell-level protection is needed. Header rows live in <thead>,
   so the tbody-scoped selector leaves `.table-light` headers untouched. */
.app-shell .table > tbody > tr:nth-of-type(odd):not([class*="table-"]) > * {
  --bs-table-bg-type: var(--el-table-stripe);
}

/* A3 — disabled navigation contrast (both rails share .event-sidebar-*). */
.app-shell .event-sidebar-item--disabled,
.app-shell .event-sidebar-item--disabled-reason {
  color: var(--el-nav-disabled);
}

/* M3 — touch targets on phones only (desktop pointer keeps the compact rail).
   Rail links and the in-app navbar links get a comfortable >=44px target. */
@media (max-width: 767.98px) {
  .app-shell .event-sidebar-nav a,
  .app-shell .event-sidebar-nav .event-sidebar-item--disabled,
  .app-shell .event-sidebar-sub-item a {
    min-height: var(--el-touch-min);
    padding-top: .625rem;
    padding-bottom: .625rem;
    display: flex;
    align-items: center;
  }

  .app-shell .navbar .nav-link {
    padding-top: .6rem;
    padding-bottom: .6rem;
  }
}

/* M1 (first pass) — wide data tables get a horizontal-scroll container plus a
   sensible minimum width on phones, so they scroll instead of compressing into
   unreadable columns. Card-stack transforms are intentionally deferred to a
   later slice. Applied only to tables explicitly marked `.el-table-scroll`. */
@media (max-width: 767.98px) {
  .app-shell .el-table-scroll > .table {
    min-width: 42rem;
    margin-bottom: 0;
  }
}

/* ============================================================================
   OrganizerShellPolish-1 — navy app bar, EventsLog.net lockup, nav states, badge
   ----------------------------------------------------------------------------
   Option C shell: a deep-navy global bar replaces the near-black Bootstrap default,
   carrying the EventsLog.net wordmark with a single restrained-orange ".net" spark.
   The active nav state mirrors the rail's blue accent (left-bar on the rail → bottom-
   bar on the dark bar). App-shell scoped only; the public _Layout marketing theme is
   untouched. ORANGE DISCIPLINE: --el-brand-accent appears here on ".net" and nowhere
   else in the console — the active state is intentionally blue, not orange.
   ============================================================================ */
.app-shell .el-appbar {
  background-color: var(--el-appbar);
  border-bottom: 1px solid var(--el-appbar-edge);
}

/* Brand lockup: "EventsLog" white/600 + ".net" orange/500 at ~92% size, one token. */
.app-shell .el-appbar .navbar-brand {
  font-weight: 600;
  color: var(--el-appbar-ink);
}
.app-shell .el-appbar .el-brand-name {
  color: var(--el-appbar-ink);
  font-weight: 600;
}
.app-shell .el-appbar .el-brand-tld {
  color: var(--el-brand-accent);
  font-weight: 500;
  font-size: .92em;
}

/* Admin role chip: a quiet light pill on the navy bar, not a second accent. */
.app-shell .el-appbar .el-admin-badge {
  background-color: rgba(255, 255, 255, .14);
  color: #fff;
  font-weight: 600;
}

/* Nav links. Primary stay full white (their .text-white utility); secondary
   (.el-nav-dim) drop to --el-appbar-ink-dim, brighter than the former text-white-50
   so they clear AA on navy. A transparent 2px under-border is reserved on EVERY link
   so activating one causes no layout shift; the active link fills that border with the
   blue accent and brightens to white. */
.app-shell .el-appbar .navbar-nav .nav-link {
  border-bottom: 2px solid transparent;
}
.app-shell .el-appbar .navbar-nav .nav-link.el-nav-dim {
  color: var(--el-appbar-ink-dim);
}
.app-shell .el-appbar .navbar-nav .nav-link:hover,
.app-shell .el-appbar .navbar-nav .nav-link:focus-visible {
  color: #fff;
}
.app-shell .el-appbar .navbar-nav .nav-link.active {
  color: #fff;
  border-bottom-color: var(--el-appbar-active);
}
.app-shell .el-appbar .navbar-nav .nav-link:focus-visible {
  outline: 2px solid var(--el-appbar-active);
  outline-offset: 2px;
  border-radius: .15rem;
}

/* ============================================================================
   OrganizerExperiencePolish-4 — organizer context bar
   ----------------------------------------------------------------------------
   The light strip directly under the global navbar is the single, fixed home
   for the active organizer name. Calm and readable — a context label, not a
   loud banner and not a normal underlined hyperlink. Left-aligned, full-width
   above the rail/content. Scoped to the admin/organizer/staff shell only.
   ============================================================================ */
.app-shell .topbar-context {
  padding-top: .4rem;     /* slightly more breathing room than the former py-1 (.25rem) */
  padding-bottom: .4rem;
}

.app-shell .topbar-context .breadcrumb {
  font-size: .9375rem;    /* a touch larger than .small for readability; still calm */
  margin-bottom: 0;
  align-items: center;
}

/* Context links (e.g. the organizer name on a class/event page) read as a calm label,
   not an inline hyperlink: no default underline, but an accessible hover/focus affordance. */
.app-shell .topbar-context a {
  /* OrganizerShellPolish-1: secondary scope links (e.g. "People") read muted so the
     organizer anchor below stands out. The first segment is re-asserted navy/600 below. */
  color: #5c636a;
  text-decoration: none;
}
.app-shell .topbar-context a:hover,
.app-shell .topbar-context a:focus-visible {
  color: #1f5e9e;
  text-decoration: underline;
}
.app-shell .topbar-context a:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
  border-radius: .15rem;
}

/* The organizer (first segment) is the prominent, fixed anchor. Subsequent scope
   segments (class / event) and the current leaf stay readable but secondary. */
.app-shell .topbar-context .breadcrumb-item:first-child,
.app-shell .topbar-context .breadcrumb-item:first-child a {
  /* OrganizerShellPolish-1: the organizer name is the anchor — navy (echoing the header)
     and a touch larger, so the strip reads as the seam between the dark bar and light content. */
  font-weight: 600;
  color: var(--el-context-name);
  font-size: 1rem;
}
.app-shell .topbar-context .breadcrumb-item.active {
  color: #5c636a;
}

/* ============================================================================
   OrganizerExperiencePolish-4A — admin link styling correction
   ----------------------------------------------------------------------------
   Root cause: EventsLog's admin link style (#2c7ac7, no default underline) was
   only applied via per-page `<style> main a` blocks on a few class/schedule
   pages. Pages without that block fell back to Bootstrap's default blue
   underlined links (e.g. /people), and because the rails now render inside
   <main>, those `main a` blocks (and the global content rule below) out-specify
   the rail's own `.event-sidebar-nav a` rules and tinted rail links blue
   (e.g. /schedules). Fix: one global admin content-link rule, plus rail link
   colors re-asserted at higher specificity so neither the content rule nor any
   page-level `main a` block can hijack them. CSS only; no markup/layout change.
   ============================================================================ */

/* Content links inside the admin shell: EventsLog blue, no default underline;
   accessible underline + darker color on hover/focus. Buttons are excluded.
   Scoped to <main>, so the top context bar (in <header>) keeps its own styling. */
.app-shell main a:not(.btn) {
  color: #2c7ac7;
  text-decoration: none;
}
.app-shell main a:not(.btn):hover,
.app-shell main a:not(.btn):focus-visible {
  color: #1f5e9e;
  text-decoration: underline;
}

/* Rails (organizer / class / event) stay navigation-styled: dark text, never the
   content-blue, never underlined. These re-assert only color/decoration at a
   specificity that beats the content rule above and any page-level `main a` block;
   backgrounds, borders, weight, outline and padding still come from the base
   `.event-sidebar*` rules (cascaded per-property). */
.app-shell .event-sidebar .event-sidebar-nav a {
  color: #495057;
  text-decoration: none;
}
.app-shell .event-sidebar .event-sidebar-nav a:hover,
.app-shell .event-sidebar .event-sidebar-nav a:focus-visible {
  color: #212529;
  text-decoration: none;
}
.app-shell .event-sidebar .event-sidebar-nav a[aria-current="page"] {
  color: #212529;
}

/* Event-rail "escape" link keeps its muted style (it is not an .event-sidebar-nav item). */
.app-shell .event-sidebar .event-sidebar-escape a {
  color: #6c757d;
  text-decoration: none;
}
.app-shell .event-sidebar .event-sidebar-escape a:hover,
.app-shell .event-sidebar .event-sidebar-escape a:focus-visible {
  color: #212529;
  text-decoration: underline;
}

/* ============================================================================
   OrganizerExperiencePolish-6 — reusable admin/event form pattern
   ----------------------------------------------------------------------------
   Small, Bootstrap-compatible, .app-shell-scoped. Adapts the public form model
   (soft region + visible field boundaries + grouped/width-disciplined fields)
   for admin/event workspace forms — with NO public hero/marketing styling.
   Public pages (_Layout / .public-form-card) are a different scope and are not
   affected. Opt-in via class; never changes inputs globally.
     .el-form-panel   — soft bordered form region (pair with p-3/p-md-4/mb-* utils)
     .el-form         — marker for "admin form": stronger field borders only
                        (no bg/border) for pages already grouped in cards
     .el-field-grid   — responsive paired fields (stack on mobile)
     .el-form-actions — consistent action footer
     .el-field-narrow — width cap for short numeric/date inputs
   ============================================================================ */

.app-shell .el-form-panel {
  background-color: #fbfcfe;
  border: 1px solid #dee2e6;
  border-radius: .5rem;
}

/* Stronger field boundaries — only inside an opted-in admin form (.el-form-panel
   or .el-form), so no global input change. Resting state only: :focus and the
   validation states (.is-invalid/.is-valid) are excluded so Bootstrap's focus
   ring/border and red/green validation borders remain fully intact and distinct. */
.app-shell .el-form-panel .form-control:not(:focus):not(.is-invalid):not(.is-valid),
.app-shell .el-form-panel .form-select:not(:focus):not(.is-invalid):not(.is-valid),
.app-shell .el-form .form-control:not(:focus):not(.is-invalid):not(.is-valid),
.app-shell .el-form .form-select:not(:focus):not(.is-invalid):not(.is-valid) {
  border-color: #adb5bd;
}

/* Responsive paired fields — single column on phones; side-by-side when there's
   room (mirrors the existing .s-led-by-grid approach). Row gap is 0 because the
   paired field wrappers already carry Bootstrap mb-* spacing. */
.app-shell .el-field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1rem;
}
@media (min-width: 576px) {
  .app-shell .el-field-grid {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
}

/* Consistent action footer — primary + secondary grouped with a light divider. */
.app-shell .el-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #e9ecef;
}

/* Width cap for short numeric/date inputs inside a panel/grid. */
.app-shell .el-field-narrow {
  max-width: 14rem;
}

/* ============================================================================
   KPI / stat cards (OrganizerExperiencePolish-KPI-1, calmed in KPI-1A)
   Reusable, calm, centered number-cards for report pages. App-shell scoped so
   public/marketing pages are untouched. Hierarchy comes from a whisper-warm
   off-white card (distinct from the cool ghostwhite page yet not stark white),
   a defined hairline border, generous spacing, and a bold near-black number;
   exactly one --primary card per logical section gets a very subtle cool-blue
   tint + a 3px top accent edge (the established active-blue) so it reads as the
   focal metric against the warm neutrals.
   KPI-1A: icons were REMOVED from the report markup — they dominated the small
   cards and added clutter. The optional .el-kpi-icon support is RETAINED (muted
   + smaller) for any future opt-in surface, but the report pages no longer use
   it. Colour vocabulary reuses existing values: #eff6ff/#c7dceb (soft-blue
   panel), #0d6efd (active accent), --el-text-muted (AA-cleared label ink).
   Numbers stay near-black. No gradient, no animation, no hover, no dark tiles,
   no bright colour, no category colour-coding.
   ============================================================================ */
:root {
  --el-kpi-bg: #fcfbf8;           /* non-primary: whisper-warm off-white */
  --el-kpi-border: #e6e3dc;       /* defined warm hairline */
  --el-kpi-icon: #6c757d;         /* optional icon: muted (unused on reports) */
  --el-kpi-value: #212529;
  --el-kpi-primary-bg: #eff6ff;
  --el-kpi-primary-border: #c7dceb;
  --el-kpi-primary-accent: #0d6efd;
}

/* Grid: 2-up on phones AND tablets, 4-up at >=lg. KPI-2 moved the multi-column
   breakpoint from md to lg: in the md range the rail is a visible sidebar, so a
   4-up grid inside a report panel cramped and wrapped labels. 2-up stays roomy
   on tablets; full width unlocks 4-up. --thirds is the 3-up money variant. Cards
   stretch to equal height per row (grid default align-items: stretch). */
.app-shell .el-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
@media (min-width: 992px) {
  .app-shell .el-kpi-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .app-shell .el-kpi-grid--thirds {
    grid-template-columns: repeat(3, 1fr);
  }
}

.app-shell .el-kpi-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--el-kpi-bg);
  border: 1px solid var(--el-kpi-border);
  border-radius: .625rem;
  padding: 1.25rem 1rem;
}

/* One per section. Subtle tint + a 3px top accent edge (replaces the 1px top
   border; border-box keeps outer heights equal across the row). The top edge is
   a real border, so the primary stays distinguishable in print where the tint
   is dropped. */
.app-shell .el-kpi-card--primary {
  background: var(--el-kpi-primary-bg);
  border-color: var(--el-kpi-primary-border);
  border-top: 3px solid var(--el-kpi-primary-accent);
}

/* Optional, opt-in only — RETAINED for future surfaces but unused on the report
   pages (KPI-1A removed the icon markup there). Muted + small so it never
   dominates if a future page chooses to include it. */
.app-shell .el-kpi-icon {
  color: var(--el-kpi-icon);
  font-size: .9rem;
  line-height: 1;
  margin-bottom: .4rem;
}

.app-shell .el-kpi-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--el-kpi-value);
  font-variant-numeric: tabular-nums;
}

.app-shell .el-kpi-label {
  font-size: .8125rem;
  line-height: 1.25;
  color: var(--el-text-muted);
  margin-top: .2rem;
}

.app-shell .el-kpi-meta {
  font-size: .75rem;
  line-height: 1.25;
  color: var(--el-text-muted);
  margin-top: .1rem;
}

/* Phones: trim the number and padding so a 2-up grid stays compact. */
@media (max-width: 767.98px) {
  .app-shell .el-kpi-value {
    font-size: 1.5rem;
  }
  .app-shell .el-kpi-card {
    padding: 1rem .7rem;
  }
}

/* ============================================================================
   Report section panels (OrganizerExperiencePolish-KPI-2)
   Wraps each report block (heading + cards/table + notes/links) in a calm,
   bordered surface so sections read as distinct units instead of one long
   sheet. An extension of the existing .el-form-panel vocabulary (same #fbfcfe
   surface, #dee2e6 hairline, .5rem radius) — not a new design system. Neutral
   surface only: no per-section colour (gentle separation comes from the border
   + the inter-panel gap, not decoration). App-shell scoped; report pages only.
   ============================================================================ */
.app-shell .el-report-section {
  background-color: #fbfcfe;
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  break-inside: avoid; /* keep a panel together in print where possible */
}
@media (min-width: 768px) {
  .app-shell .el-report-section {
    padding: 1.5rem 1.75rem;
  }
}
.app-shell .el-report-section:last-child {
  margin-bottom: 0;
}

/* Section heading: clearly stronger than table column headers, still restrained.
   A hairline rule under the title separates it from the section body. */
.app-shell .el-report-section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #212529;
  margin: 0 0 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid #edf0f3;
}

/* Organizer status summary — the old run-on "Status: …" line presented as calm
   labeled chips. Subtle bordered pills, no colour, sit on the panel surface. */
.app-shell .el-report-statline {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}
.app-shell .el-stat {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  background: #fff;
  border: 1px solid #e6e9ee;
  border-radius: .375rem;
  padding: .3rem .65rem;
  font-size: .8125rem;
  line-height: 1.2;
}
.app-shell .el-stat-label {
  color: var(--el-text-muted);
}
.app-shell .el-stat-value {
  font-weight: 600;
  color: #212529;
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   Shared workspace content gutter (OrganizerExperiencePolish-WorkspaceGutter-1)
   Promotes the report-page content gutter into a shared organizer/class/event
   workspace convention. Every workspace page uses the same rail + content row:
   `.event-sidebar-col` immediately followed by the `.col-md-9` content column,
   so one adjacent-sibling rule gives the whole workspace consistent breathing
   space off the rail/divider — no per-page markup. md+ only (the rail is an
   offcanvas below md, so mobile is unaffected). This supersedes the
   report-specific `.el-report-body` (now removed) as the single source of truth.
   ============================================================================ */
@media (min-width: 768px) {
  .app-shell .event-sidebar-col + .col-md-9 {
    padding-left: 1.5rem;
  }
}
@media (min-width: 992px) {
  .app-shell .event-sidebar-col + .col-md-9 {
    padding-left: 2rem;
  }
}