/* ============================================================
   EGW ONLINE SERVICE — Platform Stylesheet
   ============================================================
   This file extends the parent EGW Diaspora design tokens.
   All shared tokens (--navy-*, --gold-*, --neutral-*, --color-*,
   --font-*, --space-*, --shadow-*, --elevation-*) come from
   /assets/css/global.css in the parent theme.

   We add only platform-specific tokens (--eos-*) and components.
   ============================================================ */

:root {
  /* Platform-scoped tokens */
  --eos-nav-h:          76px;
  --eos-statusbar-h:    44px;
  --eos-content-max:    1320px;
  --eos-content-narrow: 1080px;
  --eos-side-w:         360px;
  --eos-radius:         var(--border-radius-lg, 8px);
  --eos-radius-lg:      14px;
  --eos-radius-xl:      22px;
  --eos-trans:          var(--transition-base, 250ms ease);

  --eos-live:           #E53935;
  --eos-live-soft:      rgba(229,57,53,.10);
  --eos-gold:           var(--gold-500, #F5A312);
}

[data-theme="dark"] {
  --eos-live:           #FF6B66;
  --eos-live-soft:      rgba(255,107,102,.14);
}

/* ============================================================
   Base scaffolding
   ============================================================ */
body.eos-app {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
}

.eos-main { display: block; }

.eos-container {
  width: 100%;
  max-width: var(--eos-content-max);
  margin: 0 auto;
  padding: 0 24px;
}

.eos-prose {
  max-width: 720px;
  margin: 0 auto;
  font-size: var(--font-size-lg);
  line-height: 1.7;
}
.eos-prose p { margin-bottom: 1.2em; }
.eos-prose h2 { font-family: var(--font-heading); margin-top: 1.8em; font-size: var(--font-size-3xl); }

.skip-link {
  position: absolute; top: -100px; left: 12px;
  background: var(--color-accent); color: #fff; padding: 10px 16px;
  border-radius: 4px; z-index: 9999;
}
.skip-link:focus { top: 8px; }

/* ============================================================
   Status bar (LIVE / Next service)
   ============================================================ */
.eos-statusbar {
  height: var(--eos-statusbar-h);
  background: var(--color-bg-dark);
  color: #f3f3f3;
  font-size: var(--font-size-sm);
  position: sticky; top: 0; z-index: 100;
}
.eos-statusbar-inner {
  max-width: var(--eos-content-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex; align-items: center; gap: 16px; justify-content: space-between;
  white-space: nowrap; overflow: hidden;
}
.eos-statusbar-live, .eos-statusbar-next {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.eos-statusbar-live { color: #fff; }
.eos-statusbar-live strong { color: var(--eos-live); letter-spacing: .08em; }
.eos-statusbar-title { opacity: .85; overflow: hidden; text-overflow: ellipsis; max-width: 30ch; }
.eos-statusbar-time { font-variant-numeric: tabular-nums; opacity: .8; }
.eos-statusbar-cta {
  color: #fff; opacity: .9; font-weight: 500;
  border-left: 1px solid rgba(255,255,255,.18);
  padding-left: 16px; margin-left: 8px;
  transition: opacity var(--eos-trans);
}
.eos-statusbar-cta:hover { opacity: 1; }

.eos-live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--eos-live);
  box-shadow: 0 0 0 0 var(--eos-live);
  animation: eosLivePulse 1.6s ease-out infinite;
  flex-shrink: 0;
}
.eos-statusbar-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-400, #FFBE3D);
  flex-shrink: 0;
}
@keyframes eosLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(229,57,53,.45); }
  70%  { box-shadow: 0 0 0 12px rgba(229,57,53,0); }
  100% { box-shadow: 0 0 0 0 rgba(229,57,53,0); }
}

/* ============================================================
   Primary nav
   ============================================================ */
.eos-nav {
  position: sticky;
  top: var(--eos-statusbar-h);
  z-index: 95;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--color-border-subtle);
}
[data-theme="dark"] .eos-nav,
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .eos-nav { background: rgba(31,31,30,.92); }
}
[data-theme="dark"] .eos-nav { background: rgba(31,31,30,.92); }

.eos-nav-inner {
  height: var(--eos-nav-h);
  max-width: var(--eos-content-max);
  margin: 0 auto;
  padding: 0 24px;
  /* Three-column grid keeps the nav links visually centered regardless
     of how wide the logo or the right-side tools are. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}



.eos-nav-links {
  display: flex; align-items: center; gap: 4px;
  justify-content: center;
  margin: 0; padding: 0; list-style: none;
}
.eos-nav-links a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 15px; font-weight: 500;
  color: var(--color-text-muted);
  transition: all var(--eos-trans);
  white-space: nowrap;
}
.eos-nav-links a:hover { background: var(--color-bg-alt); color: var(--color-text); }
.eos-nav-links a.is-active { background: var(--color-accent); color: var(--color-text-light); }
.eos-nav-links a.eos-nav-cta {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  color: #000; font-weight: 700;
}
.eos-nav-links a.eos-nav-cta:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.eos-nav-live-pill {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 8px;
  background: var(--eos-live);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  border-radius: 999px;
}

.eos-nav-tools { display: flex; align-items: center; gap: 8px; justify-self: end; }
.eos-nav-tools button,
.eos-nav-account {
  background: transparent; border: 1px solid var(--color-border);
  width: 40px; height: 40px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--color-text-muted);
  transition: all var(--eos-trans);
}
.eos-nav-tools button:hover,
.eos-nav-account:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.eos-nav-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

.eos-hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  width: 40px; height: 40px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
}
.eos-hamburger span {
  display: block; height: 2px; background: var(--color-text);
  border-radius: 2px;
}

/* Mobile drawer */
.eos-mobile-nav {
  position: fixed; inset: 0;
  background: var(--color-bg);
  z-index: 999;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.5,.1,.2,1);
  padding: 0 0 max(40px, env(safe-area-inset-bottom)) 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.eos-mobile-nav.is-open { transform: translateX(0); }
.eos-mobile-nav ul { list-style: none; padding: 0; margin: 0; }
.eos-mobile-nav li { border-bottom: 1px solid var(--color-border-subtle); }
.eos-mobile-nav a {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 4px;
  font-size: 18px; font-family: var(--font-heading); font-weight: 500;
  color: var(--color-text);
}
.eos-mobile-meta a { color: var(--color-text-muted); font-size: 14px; padding: 24px 4px; }

/* Search overlay */
.eos-search-overlay {
  position: fixed; inset: 0;
  background: rgba(11,27,50,.72);
  z-index: 998;
  display: none;
  backdrop-filter: blur(8px);
}
.eos-search-overlay.is-open { display: flex; align-items: flex-start; justify-content: center; padding-top: 16vh; }
.eos-search-inner {
  width: min(720px, 90vw);
  background: var(--color-bg);
  border-radius: var(--eos-radius-lg);
  box-shadow: var(--elevation-modal);
  overflow: hidden;
}
.eos-search-form {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border-subtle);
}
.eos-search-form input {
  flex: 1; border: 0; background: transparent;
  font-size: 18px; padding: 8px 0;
  color: var(--color-text);
}
.eos-search-form input:focus { outline: none; }
.eos-search-close { border: 0; background: transparent; cursor: pointer; color: var(--color-text-muted); padding: 6px; }
.eos-search-results {
  max-height: 60vh; overflow-y: auto; padding: 8px;
}
.eos-search-result {
  display: flex; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer;
}
.eos-search-result:hover { background: var(--color-bg-alt); }
.eos-search-result img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.eos-search-result h4 { font-size: 15px; margin: 0; color: var(--color-text); }
.eos-search-result p { font-size: 13px; color: var(--color-text-muted); margin: 4px 0 0; }
.eos-search-result .eos-result-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-accent); font-weight: 700;
}

/* ============================================================
   Buttons
   ============================================================ */
.eos-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  cursor: pointer;
  transition: all var(--eos-trans);
  border: 1px solid transparent;
  text-decoration: none;
  line-height: 1;
}
.eos-btn-primary {
  background: var(--color-accent);
  color: var(--color-text-light);
  box-shadow: var(--elevation-card-sm);
}
.eos-btn-primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--elevation-card);
}
.eos-btn-outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.eos-btn-outline:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.eos-btn-outline-sm { padding: 8px 14px; font-size: 13px; }
.eos-btn-light {
  background: #fff;
  color: #000;
  box-shadow: var(--elevation-card);
}
.eos-btn-light:hover { background: #f7f7f7; }
.eos-btn-link {
  background: transparent; padding: 8px 12px; color: var(--color-accent);
  border: 0;
}
.eos-btn-link:hover { background: var(--color-accent-subtle); }
.eos-btn-lg { padding: 16px 28px; font-size: 16px; }

/* ============================================================
   Sections & section heads
   ============================================================ */
.eos-section {
  padding: clamp(48px, 7vw, 96px) 0;
}
.eos-section + .eos-section { padding-top: 0; }

.eos-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.eos-section-head h2 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  margin: 8px 0 0;
  letter-spacing: -.02em;
  color: var(--color-text-strong);
}
.eos-section-head p { color: var(--color-text-muted); max-width: 56ch; margin-top: 8px; }
.eos-section-head-tight { margin-bottom: 16px; }
.eos-section-link {
  font-weight: 500; color: var(--color-accent);
  display: inline-flex; gap: 6px; align-items: center;
}

.eos-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: 600;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-accent);
}

.eos-section-title-sm { font-family: var(--font-heading); font-size: var(--font-size-xl); margin-bottom: 12px; }
.eos-section-title-md { font-family: var(--font-heading); font-size: var(--font-size-3xl); margin: 32px 0 16px; }

/* ============================================================
   Page head (shared by sub pages)
   ============================================================ */
.eos-page-head {
  padding: clamp(64px, 9vw, 120px) 0 clamp(40px, 5vw, 60px);
  background:
    radial-gradient(120% 80% at 50% 0%, var(--color-accent-subtle), transparent 60%),
    var(--color-bg);
  border-bottom: 1px solid var(--color-border-subtle);
}
.eos-page-head h1 {
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 12px 0 0;
  color: var(--color-text-strong);
}
.eos-page-lead {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  max-width: 68ch;
  margin-top: 16px;
}

.eos-page-head-image {
  background-size: cover;
  background-position: center;
  color: #fff;
  position: relative;
}
.eos-page-head-image::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,27,50,.45), rgba(11,27,50,.75));
}
.eos-page-head-image > * { position: relative; }
.eos-page-head-image h1, .eos-page-head-image .eos-page-lead { color: #fff; }

/* ============================================================
   Hero
   ============================================================ */
.eos-hero {
  position: relative;
  min-height: clamp(560px, 78vh, 760px);
  display: flex; align-items: center;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
.eos-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.06);
  filter: brightness(.9) saturate(.95);
  z-index: -2;
  animation: eosHeroDrift 24s ease-in-out infinite alternate;
}
@keyframes eosHeroDrift {
  from { transform: scale(1.06) translateY(0); }
  to   { transform: scale(1.12) translateY(-12px); }
}
.eos-hero-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 100% at 0% 100%, rgba(11,27,50,.85), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.6) 100%);
  z-index: -1;
}
.eos-hero-inner {
  max-width: var(--eos-content-max);
  width: 100%;
  margin: 0 auto;
  padding: clamp(80px, 12vh, 120px) 24px clamp(80px, 12vh, 120px);
}
.eos-hero-content { max-width: 760px; }
.eos-hero .eos-eyebrow { color: #fff; opacity: .9; }
.eos-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(40px, 6.2vw, 80px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.025em;
  margin: 16px 0 0;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.eos-hero-tagline {
  font-size: clamp(16px, 1.6vw, 20px);
  margin-top: 16px;
  opacity: .92;
  max-width: 56ch;
}
.eos-hero-when {
  font-size: 14px;
  margin-top: 12px;
  opacity: .85;
  letter-spacing: .04em;
}
.eos-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* Marquee */
.eos-hero-marquee {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,.08);
  border-top: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  padding: 12px 0;
  backdrop-filter: blur(6px);
}
.eos-marquee-track {
  display: flex; gap: 64px;
  animation: eosMarquee 40s linear infinite;
  white-space: nowrap;
  width: max-content;
  font-size: 14px; letter-spacing: .05em; opacity: .85;
}
@keyframes eosMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Countdown */
.eos-countdown { display: flex; gap: 16px; margin-top: 28px; }
.eos-countdown-unit {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  padding: 12px 16px;
  min-width: 72px;
  text-align: center;
  backdrop-filter: blur(6px);
}
.eos-countdown-unit .num {
  display: block;
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.eos-countdown-unit .lbl {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .8;
}
.eos-countdown-lg .eos-countdown-unit { padding: 18px 22px; min-width: 92px; }
.eos-countdown-lg .num { font-size: 44px; }

/* ============================================================
   Quick-action cards
   ============================================================ */
.eos-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.eos-quick-card {
  display: flex; flex-direction: column;
  padding: 32px 28px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--eos-radius-lg);
  color: var(--color-text);
  transition: all var(--eos-trans);
  position: relative;
}
.eos-quick-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: var(--elevation-card-hover);
}
.eos-quick-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  margin-bottom: 16px;
}
.eos-quick-card h3 { font-family: var(--font-heading); font-size: var(--font-size-2xl); font-weight: 700; margin: 0; color: var(--color-text-strong); }
.eos-quick-card p  { font-size: 14px; color: var(--color-text-muted); margin: 8px 0 16px; flex: 1; }
.eos-quick-go {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--color-accent);
}

/* ============================================================
   Card grids (media, events, replays)
   ============================================================ */
.eos-card-grid { display: grid; gap: 24px; }
.eos-card-grid-2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.eos-card-grid-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.eos-card-grid-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.eos-media-card {
  display: block;
  background: var(--color-bg-alt);
  border-radius: var(--eos-radius-lg);
  overflow: hidden;
  color: var(--color-text);
  border: 1px solid var(--color-border-subtle);
  transition: all var(--eos-trans);
}
.eos-media-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--elevation-card-hover);
  border-color: var(--color-border-strong);
}
.eos-media-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--neutral-200);
  overflow: hidden;
}
.eos-media-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.eos-media-card:hover .eos-media-thumb img { transform: scale(1.04); }
.eos-media-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.4));
  color: #fff;
  opacity: 0;
  transition: opacity var(--eos-trans);
}
.eos-media-card:hover .eos-media-play { opacity: 1; }
.eos-media-dur {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(0,0,0,.7); color: #fff;
  font-size: 11px; padding: 3px 7px; border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.eos-media-meta { padding: 16px 18px; }
.eos-media-meta h3 {
  font-family: var(--font-heading);
  font-size: 17px; font-weight: 700;
  margin: 0;
  line-height: 1.3;
}
.eos-media-meta p { font-size: 13px; color: var(--color-text-muted); margin: 6px 0 0; }
.eos-media-series {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-accent);
  font-weight: 700;
  margin-bottom: 6px;
}

/* Horizontal rail (carousel-style) */
.eos-rail {
  display: flex; gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 16px;
  margin: 0 -4px;
  scrollbar-width: thin;
}
.eos-rail::-webkit-scrollbar { height: 8px; }
.eos-rail::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 4px; }
.eos-rail-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text);
}
.eos-rail-thumb { aspect-ratio: 16/9; position: relative; background: var(--neutral-200); }
.eos-rail-thumb img { width: 100%; height: 100%; object-fit: cover; }
.eos-rail-info { padding: 12px 14px; }
.eos-rail-info h3 { font-size: 14px; margin: 0; font-family: var(--font-heading); }
.eos-rail-info p { font-size: 12px; color: var(--color-text-muted); margin: 2px 0 0; }

/* Series card */
.eos-series-card {
  position: relative;
  flex: 0 0 320px;
  aspect-ratio: 16/9;
  background: var(--neutral-300);
  border-radius: 12px;
  overflow: hidden;
  color: #fff;
  scroll-snap-align: start;
}
.eos-series-card img { width: 100%; height: 100%; object-fit: cover; }
.eos-series-card-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.8));
}
.eos-series-card-meta h3 { font-family: var(--font-heading); font-size: 18px; margin: 0; }
.eos-series-card-meta p  { font-size: 12px; opacity: .85; margin: 2px 0 0; }

/* ============================================================
   Banner slider
   ============================================================ */
.eos-slider {
  position: relative;
  border-radius: var(--eos-radius-xl);
  overflow: hidden;
}
.eos-slider-track {
  display: flex;
  transition: transform .6s cubic-bezier(.5,.1,.2,1);
}
.eos-slide {
  flex: 0 0 100%;
  aspect-ratio: 16/6;
  background-size: cover; background-position: center;
  display: flex; align-items: center;
  color: #fff;
  position: relative;
}
.eos-slide::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.1) 30%, rgba(0,0,0,.8));
}
.eos-slide-content {
  position: relative;
  padding: 32px 40px;
  max-width: 60ch;
}
.eos-slide-content h3 { font-family: var(--font-heading); font-size: clamp(22px, 3vw, 36px); margin: 0 0 8px; }
.eos-slide-content p  { opacity: .9; margin: 0 0 16px; }
.eos-slider-prev, .eos-slider-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff;
  border: 0; cursor: pointer;
  font-size: 22px;
  z-index: 2;
}
.eos-slider-prev { left: 16px; }
.eos-slider-next { right: 16px; }
.eos-slider-dots {
  position: absolute; bottom: 14px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px;
  z-index: 2;
}
.eos-slider-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.4);
  cursor: pointer;
}
.eos-slider-dot.is-active { background: #fff; }

/* ============================================================
   Scripture + Announcements + Engage tiles
   ============================================================ */
.eos-scripture-section {
  padding: clamp(60px, 8vh, 100px) 0;
  background: var(--color-bg-alt);
}
.eos-scripture {
  display: block;
  position: relative;
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  padding: 36px 32px 40px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(11, 27, 50, .06);
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.55;
  color: var(--color-text-strong);
}
.eos-scripture p {
  margin: 0;
  padding: 0;
  border: 0;
  text-align: center;
}
.eos-quote-mark {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(56px, 7vw, 88px);
  line-height: .6;
  margin: 0 0 12px;
  opacity: .25;
  color: var(--color-accent);
  text-align: center;
}

.eos-announcements ul { list-style: none; padding: 0; }
.eos-announce-list { display: grid; gap: 16px; }
.eos-announce-item {
  padding: 20px 24px;
  background: var(--color-bg-alt);
  border-left: 4px solid var(--color-accent);
  border-radius: 8px;
}
.eos-announce-item h3 { font-family: var(--font-heading); font-size: 18px; margin: 4px 0; }
.eos-announce-item p  { font-size: 14px; color: var(--color-text-muted); margin: 0; }
.eos-announce-date {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-accent); font-weight: 700;
}

.eos-engage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.eos-engage-card {
  padding: 36px 32px;
  background: var(--color-bg-alt);
  border-radius: var(--eos-radius-lg);
  border: 1px solid var(--color-border-subtle);
}
.eos-engage-card h3 { font-family: var(--font-heading); font-size: 22px; margin: 0 0 12px; }
.eos-engage-card p  { color: var(--color-text-muted); margin: 0 0 20px; }

/* ============================================================
   Schedule
   ============================================================ */
.eos-schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.eos-schedule-item {
  padding: 24px;
  background: var(--color-bg-alt);
  border-radius: var(--eos-radius);
  border: 1px solid var(--color-border-subtle);
}
.eos-schedule-item h3 { font-family: var(--font-heading); font-size: 18px; margin: 0 0 8px; }

/* ============================================================
   Event card / list
   ============================================================ */
.eos-event-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--eos-radius-lg);
  overflow: hidden;
}
.eos-event-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.eos-event-body { padding: 20px 24px; }
.eos-event-when {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-accent); font-weight: 700;
}
.eos-event-body h3 { font-family: var(--font-heading); font-size: 22px; margin: 6px 0; }

.eos-events-list { display: grid; gap: 20px; }
.eos-event-row {
  display: grid;
  grid-template-columns: 110px 240px 1fr;
  gap: 24px;
  align-items: center;
  background: var(--color-bg-alt);
  border-radius: var(--eos-radius-lg);
  border: 1px solid var(--color-border-subtle);
  padding: 20px 24px;
}
.eos-event-date {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  border-right: 1px solid var(--color-border-subtle);
  padding-right: 20px;
}
.eos-event-month { font-size: 12px; color: var(--color-accent); font-weight: 700; letter-spacing: .12em; }
.eos-event-day { font-family: var(--font-heading); font-size: 42px; font-weight: 800; line-height: 1; }
.eos-event-dow { font-size: 11px; color: var(--color-text-muted); letter-spacing: .1em; text-transform: uppercase; }
.eos-event-thumb img { width: 100%; height: 140px; object-fit: cover; border-radius: 8px; }
.eos-event-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }

/* ============================================================
   Two-column layout (prayer / testimony pages)
   ============================================================ */
.eos-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
}
.eos-two-col-main h2 { font-family: var(--font-heading); font-size: var(--font-size-3xl); margin: 0 0 16px; }
.eos-two-col-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--eos-nav-h) + var(--eos-statusbar-h) + 16px); align-self: start; }

.eos-card-panel {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--eos-radius-lg);
  padding: 28px;
  margin-bottom: 24px;
}
.eos-card-panel h3 { font-family: var(--font-heading); margin: 0 0 12px; }
.eos-bullets { list-style: none; padding: 0; }
.eos-bullets li { padding: 8px 0; border-bottom: 1px solid var(--color-border-subtle); font-size: 14px; }
.eos-bullets li:last-child { border-bottom: 0; }

/* ============================================================
   Forms
   ============================================================ */
.eos-form { display: flex; flex-direction: column; gap: 16px; }
.eos-form-tight { gap: 12px; }
.eos-form label { display: block; font-size: 13px; font-weight: 600; color: var(--color-text-muted); }
.eos-form input[type="text"],
.eos-form input[type="email"],
.eos-form input[type="url"],
.eos-form input[type="number"],
.eos-form textarea,
.eos-form select {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 15px;
  font-family: inherit;
  transition: border-color var(--eos-trans), box-shadow var(--eos-trans);
}
.eos-form input:focus, .eos-form textarea:focus, .eos-form select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}
.eos-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.eos-checkbox { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 400; color: var(--color-text); cursor: pointer; }
.eos-checkbox input { width: 18px; height: 18px; accent-color: var(--color-accent); }
.eos-form-help { font-size: 12px; color: var(--color-text-muted); margin-top: 8px; }

/* Filter bar (library) */
.eos-filter-bar {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 32px;
  padding: 16px;
  background: var(--color-bg-alt);
  border-radius: var(--eos-radius-lg);
  border: 1px solid var(--color-border-subtle);
}
.eos-filter-search { display: flex; align-items: center; gap: 8px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px; padding: 0 12px; }
.eos-filter-search input { flex: 1; border: 0; padding: 12px 0; background: transparent; }
.eos-filter-bar select { padding: 12px 14px; }

.eos-pagination { margin-top: 32px; text-align: center; }
.eos-pagination .page-numbers {
  display: inline-block;
  padding: 8px 14px; margin: 0 2px;
  border-radius: 8px;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.eos-pagination .page-numbers.current {
  background: var(--color-accent); color: var(--color-text-light); border-color: var(--color-accent);
}

/* ============================================================
   Prayer wall
   ============================================================ */
.eos-prayer-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.eos-prayer-card {
  background: var(--color-bg-alt);
  border-radius: var(--eos-radius);
  border: 1px solid var(--color-border-subtle);
  padding: 20px 22px;
  display: flex; flex-direction: column;
  gap: 12px;
}
.eos-prayer-card header { display: flex; align-items: center; gap: 12px; }
.eos-prayer-card header strong { font-family: var(--font-heading); font-size: 15px; }
.eos-prayer-topic {
  font-size: 11px; padding: 2px 8px;
  background: var(--color-accent-subtle); color: var(--color-accent);
  border-radius: 999px; letter-spacing: .1em; text-transform: uppercase;
}
.eos-prayer-card p { color: var(--color-text-muted); font-size: 14px; flex: 1; }
.eos-prayer-card footer { display: flex; justify-content: space-between; align-items: center; }
.eos-prayer-pray {
  background: var(--color-accent-subtle); border: 0;
  color: var(--color-accent);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px; font-weight: 600;
  transition: all var(--eos-trans);
}
.eos-prayer-pray:hover { background: var(--color-accent); color: #fff; }
.eos-prayer-pray.is-prayed { background: var(--gold-500); color: #000; }
.eos-prayer-card footer time { font-size: 11px; color: var(--color-text-subtle); }

/* ============================================================
   Testimony grid
   ============================================================ */
.eos-testimony-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 16px;
}
.eos-testimony-card {
  background: var(--color-bg-alt);
  border-radius: var(--eos-radius-lg);
  border: 1px solid var(--color-border-subtle);
  overflow: hidden;
}
.eos-testimony-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.eos-testimony-body { padding: 20px 22px; }
.eos-testimony-body h3 { font-family: var(--font-heading); font-size: 18px; margin: 0 0 8px; }
.eos-testimony-body p { font-size: 14px; color: var(--color-text-muted); margin: 0 0 12px; }
.eos-testimony-body footer { font-size: 12px; color: var(--color-text-subtle); }
.eos-testimony-body footer strong { color: var(--color-text); font-family: var(--font-heading); }

/* ============================================================
   Give
   ============================================================ */
.eos-give-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.eos-give-card {
  background: var(--color-bg-alt);
  border-radius: var(--eos-radius-lg);
  padding: 32px 28px;
  border: 1px solid var(--color-border-subtle);
}
.eos-give-card h2 { font-family: var(--font-heading); font-size: 24px; margin: 0 0 8px; }
.eos-give-detail {
  max-width: 720px; margin: 48px auto 0; padding: 24px;
  font-size: 15px; color: var(--color-text-muted);
  border-top: 1px solid var(--color-border-subtle);
}

/* ============================================================
   Account
   ============================================================ */
.eos-account-head-inner { display: flex; align-items: center; gap: 24px; }
.eos-account-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; box-shadow: var(--elevation-card); }
.eos-account-cta { display: flex; gap: 12px; }
.eos-account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.eos-account-list { list-style: none; padding: 0; margin: 0; }
.eos-account-list li {
  display: flex; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--color-border-subtle);
  font-size: 14px;
}
.eos-account-list li span { color: var(--color-text-muted); font-size: 12px; }

/* ============================================================
   Podcasts
   ============================================================ */
.eos-podcast-platforms { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.eos-podcast-pill {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  font-size: 13px; font-weight: 500;
  color: var(--color-text);
}
.eos-podcast-list { display: grid; gap: 20px; }
.eos-podcast-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  background: var(--color-bg-alt);
  border-radius: var(--eos-radius-lg);
  padding: 16px;
  border: 1px solid var(--color-border-subtle);
}
.eos-podcast-row img { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; }
.eos-podcast-body h3 { font-family: var(--font-heading); margin: 0 0 4px; font-size: 18px; }
.eos-podcast-meta { font-size: 12px; color: var(--color-text-muted); }
.eos-podcast-player { width: 100%; margin-top: 12px; }

/* ============================================================
   Watch meta (under player)
   ============================================================ */
.eos-watch-meta {
  display: flex; gap: 24px; flex-wrap: wrap;
  align-items: flex-start;
  margin: 24px 0;
}
.eos-watch-meta-main { flex: 1; min-width: 280px; }
.eos-watch-status { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--eos-live); }
.eos-watch-title { font-family: var(--font-heading); font-size: clamp(24px, 3.2vw, 36px); margin: 8px 0 4px; }
.eos-watch-credits { color: var(--color-text-muted); font-size: 14px; }
.eos-watch-scripture { font-style: italic; color: var(--color-text); margin-top: 12px; font-family: var(--font-heading); }

.eos-watch-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.eos-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  font-size: 13px; font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
}
.eos-chip:hover { background: var(--color-accent-subtle); color: var(--color-accent); border-color: var(--color-accent); }

.eos-watch-description { font-size: 15px; line-height: 1.7; max-width: 70ch; color: var(--color-text-muted); margin: 16px 0 32px; }

/* ============================================================
   Next-steps floating CTA
   ============================================================ */
.eos-next-steps {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
}
.eos-next-steps-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  background: var(--color-accent);
  color: var(--color-text-light);
  border: 0; border-radius: 999px;
  font-weight: 700; font-size: 14px;
  cursor: pointer;
  box-shadow: var(--elevation-card-hover);
}
.eos-next-steps-toggle:hover { transform: translateY(-2px); }
.eos-next-steps-panel {
  position: absolute;
  right: 0; bottom: calc(100% + 12px);
  display: none;
  width: 280px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--eos-radius-lg);
  box-shadow: var(--elevation-modal);
  padding: 8px;
}
.eos-next-steps.is-open .eos-next-steps-panel { display: flex; flex-direction: column; gap: 2px; }
.eos-step {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  color: var(--color-text);
  font-size: 14px; font-weight: 500;
}
.eos-step:hover { background: var(--color-bg-alt); }
.eos-step svg { color: var(--color-accent); }

/* ============================================================
   Footer
   ============================================================ */
.eos-footer {
  background: var(--color-bg-footer);
  color: #cdcdcd;
  padding: 64px 0 0;
  margin-top: 64px;
}
.eos-footer-inner {
  max-width: var(--eos-content-max);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
}
.eos-footer-tagline { font-size: 13px; color: #999; max-width: 38ch; margin-top: 16px; }
.eos-footer-col h4 {
  color: #fff;
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.eos-footer-col a {
  display: block;
  color: #aaa;
  font-size: 14px;
  padding: 4px 0;
}
.eos-footer-col a:hover { color: var(--gold-400); }
.eos-footer-bottom {
  max-width: var(--eos-content-max);
  margin: 48px auto 0;
  padding: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 12px; color: #777;
}
.eos-footer-bottom a { color: #aaa; }

/* ============================================================
   Toast / Confirm (parent ships globally, but ensure stacking)
   ============================================================ */
.egw-toast-container { z-index: 9999; }

/* ============================================================
   Empty states
   ============================================================ */
.eos-empty {
  text-align: center;
  padding: 80px 24px;
  background: var(--color-bg-alt);
  border-radius: var(--eos-radius-lg);
  border: 1px dashed var(--color-border);
}
.eos-empty h2 { font-family: var(--font-heading); margin-bottom: 8px; }
.eos-empty p  { color: var(--color-text-muted); }
.eos-empty-small { color: var(--color-text-muted); padding: 16px 0; }

/* ============================================================
   404
   ============================================================ */
.eos-404 { text-align: center; padding-top: 32px; }
.eos-404 .eos-eyebrow { font-size: 32px; }
.eos-404-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px; max-width: 720px; margin: 40px auto 0;
}

/* ============================================================
   Reveal animations (intersection-driven)
   ============================================================ */
.eos-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.eos-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .eos-nav-links { display: none; }
  .eos-hamburger { display: inline-flex; }
  .eos-two-col { grid-template-columns: 1fr; }
  .eos-two-col-side { position: static; }
  .eos-footer-inner { grid-template-columns: 1fr 1fr; }
  .eos-event-row { grid-template-columns: 1fr; }
  .eos-event-date { flex-direction: row; gap: 12px; border-right: 0; padding-right: 0; }
  .eos-filter-bar { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .eos-statusbar-cta { display: none; }
  .eos-statusbar-title { max-width: 20ch; }
  .eos-hero-ctas .eos-btn { padding: 12px 18px; font-size: 14px; }
  .eos-countdown-unit { padding: 10px 12px; min-width: 60px; }
  .eos-countdown-unit .num { font-size: 26px; }
  .eos-section-head { flex-direction: column; align-items: stretch; }
  .eos-form-row { grid-template-columns: 1fr; }
  .eos-footer-inner { grid-template-columns: 1fr; }
  .eos-filter-bar { grid-template-columns: 1fr; }
  .eos-next-steps { right: 12px; bottom: 12px; }
  .eos-next-steps-toggle { padding: 12px 16px; font-size: 13px; }
}

/* ============================================================
   THEME TOGGLE - tooltip + active-mode dot
   ============================================================ */
.theme-toggle { position: relative; }
.theme-toggle::after {
  content: attr(aria-label);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  font-size: 11px; font-weight: 600;
  background: var(--color-text);
  color: var(--color-bg);
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s, transform .18s;
  z-index: 200;
}
.theme-toggle:hover::after,
.theme-toggle:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.theme-toggle::before {
  content: "";
  position: absolute;
  right: 5px; bottom: 5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 1.5px solid var(--color-bg);
  pointer-events: none;
}
[data-theme="dark"] .theme-toggle::before { background: var(--gold-500); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle::before { background: var(--gold-500); }
}

/* ============================================================
   LOGO LOCKUP - mirrors the Ephesus Broadcast pattern
   ------------------------------------------------------------
   - Logo image + two-line wordmark, 10px gap, no divider
   - Both lines UPPERCASE
   - Top "EPHESUS" smaller (11px), bottom "ONLINE SERVICE" bigger (16px)
   - Letter-spacing per Broadcast spec
   ============================================================ */
.eos-logo,
.eos-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}

.eos-logo img,
.eos-footer-logo img {
  height: 44px;
  width: auto;
  display: block;
}

/* Light/dark logo swap */
.eos-logo .logo-dark { display: none; }
[data-theme="dark"] .eos-logo .logo-light { display: none; }
[data-theme="dark"] .eos-logo .logo-dark  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .eos-logo .logo-light { display: none; }
  :root:not([data-theme="light"]) .eos-logo .logo-dark  { display: block; }
}

/* Wordmark */
.eos-logo-wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.02;
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-text-strong);
}

.eos-logo-wordmark-top {
  font-size: 11px;
  letter-spacing: .14em;
  opacity: .82;
}
.eos-logo-wordmark-bot {
  font-size: 16px;
  letter-spacing: .06em;
}

/* Footer wordmark - same shape, lighter on the dark footer surface */
.eos-footer-logo .eos-logo-wordmark { color: #fff; }
.eos-footer-logo .eos-logo-wordmark-top { color: #cccccc; }


/* ============================================================
   DIASPORA POSITIONING (v1.5)
   ------------------------------------------------------------
   - Slim "Diaspora" ribbon sits below the status bar on every page
   - Full Diaspora band on the homepage (between hero and CTAs)
   - Footer affiliation tag above the tagline
   ============================================================ */

/* Slim ribbon (visible on every page) */
.eos-diaspora-ribbon {
  background: linear-gradient(90deg, var(--navy-800), var(--navy-700));
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(0,0,0,.18);
}
.eos-diaspora-ribbon-inner {
  max-width: var(--eos-content-max);
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
}
.eos-diaspora-pill {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--gold-500);
  color: #1A1A1A;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.eos-diaspora-text {
  opacity: .92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Homepage Diaspora band */
.eos-diaspora-band {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(245,163,18,.10), transparent 60%),
    var(--color-bg-alt);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}
.eos-diaspora-band-inner {
  max-width: 880px;
  text-align: center;
}
.eos-diaspora-band h2 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--color-text-strong);
  margin: 12px 0 16px;
}
.eos-diaspora-band p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 70ch;
  margin: 0 auto;
}
.eos-diaspora-band-note {
  margin-top: 18px !important;
  font-size: 14px !important;
  padding-top: 18px;
  border-top: 1px solid var(--color-border-subtle);
}
.eos-diaspora-band-note a {
  color: var(--color-accent);
  font-weight: 600;
  margin-left: 4px;
}
.eos-diaspora-band-note a:hover { color: var(--color-accent-hover); }

/* Footer affiliation */
.eos-footer-affiliation {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin: 16px 0 6px;
}

/* Responsive */
@media (max-width: 720px) {
  .eos-diaspora-ribbon-inner {
    padding: 8px 16px;
    gap: 10px;
    font-size: 12px;
  }
  .eos-diaspora-text { white-space: normal; line-height: 1.4; }
  .eos-diaspora-band h2 { font-size: 26px; }
  .eos-diaspora-band p { font-size: 15px; }
}
@media (max-width: 480px) {
  .eos-diaspora-pill { font-size: 10px; padding: 2px 10px; }
}

/* ============================================================
   DISMISSIBLE BARS (v1.5.1)
   Close button shared by status bar + Diaspora ribbon.
   ============================================================ */
.eos-bar-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: inherit;
  opacity: .65;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity var(--eos-trans), background var(--eos-trans), border-color var(--eos-trans);
}
.eos-bar-close:hover,
.eos-bar-close:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .22);
  outline: none;
}
.eos-bar-close:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}

/* Allow the status-bar / diaspora-ribbon to lay out the close at the far right */
.eos-statusbar-inner,
.eos-diaspora-ribbon-inner {
  position: relative;
}

/* Hidden state - applied by platform.js when the user dismisses */
.eos-statusbar.is-dismissed,
.eos-diaspora-ribbon.is-dismissed {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
/* When the user dismisses the status bar, the nav becomes the new sticky anchor at top:0. */
body.eos-statusbar-dismissed .eos-nav {
  top: 0 !important;
}
body.eos-statusbar-dismissed {
  --eos-statusbar-h: 0px;
}


/* Slim out on mobile so the X doesn't crowd the text */
@media (max-width: 640px) {
  .eos-bar-close { width: 24px; height: 24px; margin-left: 8px; }
}


/* ============================================================
   SERVICE SCHEDULE — 3-up grid override (v1.6.3)
   ============================================================ */
.eos-schedule-grid.eos-schedule-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .eos-schedule-grid.eos-schedule-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .eos-schedule-grid.eos-schedule-grid-3 { grid-template-columns: 1fr; }
}


/* ============================================================
   DARK / LIGHT MODE — mirrors main site v3.10.64
   ============================================================ */

/* Toggle button — same dimensions & behavior as the main site. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid var(--color-border, rgba(0,0,0,.1));
  border-radius: 999px;
  background: var(--color-bg-alt, #F4F5F7);
  color: var(--color-text, #1A1A1A);
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .15s;
}
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { width: 22px; height: 22px; display: block; }
.theme-toggle:hover {
  background: var(--color-text, #1A1A1A);
  color: var(--color-bg, #fff);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transform: translateY(-1px);
}
[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block !important; }

/* Logo dark/light swap — matches main site convention. */
.logo-light { display: block; }
.logo-dark  { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark  { display: block; }

/* When the OS prefers dark and the user has not explicitly opted in,
   flip to the dark palette automatically. Same selector the main site
   uses so the rule cascades cleanly across the whole ecosystem. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:           #1F1F1E;
    --color-bg-alt:       #2C2C2A;
    --color-bg-dark:      #121212;
    --color-bg-footer:    #121212;
    --color-bg-subtle:    #252523;
    --color-bg-muted:     #2C2C2A;
    --color-text:         #F8F8F6;
    --color-text-strong:  #FFFFFF;
    --color-text-light:   #1F1F1E;
    --color-text-muted:   #C3C2B7;
    --color-text-subtle:  #8A8778;
    --color-text-link:    #FFF1D3;
    --color-text-link-hover: #FFF7E6;
    --color-border:        rgba(226, 225, 218, 0.12);
    --color-border-strong: rgba(226, 225, 218, 0.25);
    --color-border-subtle: rgba(226, 225, 218, 0.06);
  }
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark  { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block !important; }
}

/* Explicit user-chosen dark theme — identical palette so the manual
   toggle yields the same visual as the system preference. */
[data-theme="dark"] {
  --color-bg:           #1F1F1E;
  --color-bg-alt:       #2C2C2A;
  --color-bg-dark:      #121212;
  --color-bg-footer:    #121212;
  --color-bg-subtle:    #252523;
  --color-bg-muted:     #2C2C2A;
  --color-text:         #F8F8F6;
  --color-text-strong:  #FFFFFF;
  --color-text-light:   #1F1F1E;
  --color-text-muted:   #C3C2B7;
  --color-text-subtle:  #8A8778;
  --color-text-link:    #FFF1D3;
  --color-text-link-hover: #FFF7E6;
  --color-border:        rgba(226, 225, 218, 0.12);
  --color-border-strong: rgba(226, 225, 218, 0.25);
  --color-border-subtle: rgba(226, 225, 218, 0.06);
}

/* EOS-platform-specific surface adjustments in dark mode. */
[data-theme="dark"] .eos-statusbar         { background: #0E0E0D; border-bottom: 1px solid rgba(255,255,255,.06); }
[data-theme="dark"] .eos-nav               { background: #1A1A19; border-bottom: 1px solid rgba(255,255,255,.06); }
[data-theme="dark"] .eos-diaspora-ribbon   { background: linear-gradient(90deg, #122948, #1B3A5C); }
[data-theme="dark"] .eos-scripture         { background: #2C2C2A; border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .eos-footer            { background: #121212; }
[data-theme="dark"] .eos-schedule-item,
[data-theme="dark"] .eos-card,
[data-theme="dark"] .eos-quick-action,
[data-theme="dark"] .eos-next-step         { background: #2C2C2A; border-color: rgba(255,255,255,.08); color: var(--color-text); }
[data-theme="dark"] .eos-card h3,
[data-theme="dark"] .eos-schedule-item h3,
[data-theme="dark"] .eos-quick-action h3,
[data-theme="dark"] .eos-next-step h3      { color: var(--color-text-strong); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .eos-statusbar       { background: #0E0E0D; border-bottom: 1px solid rgba(255,255,255,.06); }
  :root:not([data-theme="light"]) .eos-nav             { background: #1A1A19; border-bottom: 1px solid rgba(255,255,255,.06); }
  :root:not([data-theme="light"]) .eos-diaspora-ribbon { background: linear-gradient(90deg, #122948, #1B3A5C); }
  :root:not([data-theme="light"]) .eos-scripture       { background: #2C2C2A; border-color: rgba(255,255,255,.08); }
  :root:not([data-theme="light"]) .eos-footer          { background: #121212; }
  :root:not([data-theme="light"]) .eos-schedule-item,
  :root:not([data-theme="light"]) .eos-card,
  :root:not([data-theme="light"]) .eos-quick-action,
  :root:not([data-theme="light"]) .eos-next-step       { background: #2C2C2A; border-color: rgba(255,255,255,.08); color: var(--color-text); }
}

/* ============================================================
   v2.1.2 — Vertical rhythm + hero variants + overlay variable.
   Appended last so it wins over the earlier defaults.
   ============================================================ */

/* Tighten the inter-section rhythm: every section gets a generous
   top+bottom, and immediately adjacent sections collapse a bit. */
.eos-section {
  padding-top:    clamp(64px, 8vw, 112px);
  padding-bottom: clamp(64px, 8vw, 112px);
}
.eos-section + .eos-section {
  padding-top: clamp(32px, 4vw, 56px) !important;
}
@media (max-width: 720px) {
  .eos-section {
    padding-top:    clamp(40px, 9vw, 64px);
    padding-bottom: clamp(40px, 9vw, 64px);
  }
}

/* Footer needs breathing room from the section above it. */
.eos-footer { margin-top: clamp(40px, 6vw, 80px); }

/* Hero height variants driven by the customizer. */
.eos-hero--compact  { min-height: clamp(420px, 60vh, 560px); }
.eos-hero--standard { min-height: clamp(560px, 78vh, 760px); }
.eos-hero--full     { min-height: 100vh; }

/* Customizer-set overlay opacity. Defaults preserved via var fallback. */
.eos-hero-overlay {
  background:
    radial-gradient(120% 100% at 0% 100%, rgba(11,27,50, calc(var(--eos-hero-overlay, .55) + .30)), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0, calc(var(--eos-hero-overlay, .55) * .55)) 0%, rgba(0,0,0, var(--eos-hero-overlay, .55)) 100%);
}

/* Front-page hero content was previously top-cramped on mid-tablet sizes. */
@media (min-width: 901px) and (max-width: 1199px) {
  .eos-hero-inner { padding-top: clamp(96px, 12vh, 140px); padding-bottom: clamp(72px, 8vh, 108px); }
}

/* ============================================================
   v2.1.3 — Watch layout fallback (mirrors v1.5.2 player.css)
   Guarantees a desktop grid even if watch.css doesn't load.
   ============================================================ */

/* v1.5.2 hyphenated class names — always-on layout */
.eos-watch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--eos-side-w, 360px);
  gap: 24px;
  max-width: var(--eos-content-max, 1320px);
  margin: 24px auto 80px;
  padding: 0 24px;
  align-items: start;
  position: relative; /* anchor for v2.1.129 absolute-positioned resizer */
}
.eos-watch-stage { min-width: 0; }
.eos-watch .eos-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--eos-radius-lg, 14px);
  overflow: hidden;
  isolation: isolate;
}
.eos-watch .eos-player-frame { position: absolute; inset: 0; }
.eos-watch .eos-player-frame iframe,
.eos-watch .eos-player-frame video { width: 100%; height: 100%; border: 0; background: #000; }

/* v2.x BEM class names — same shape, separate selectors so both
   markup styles render without needing watch.css. */
.eos-watch__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--eos-side-w, 360px);
  gap: 28px;
  max-width: var(--watch-content-max, 1480px);
  margin: 24px auto 80px;
  padding: 0 28px;
  align-items: start;
}
.eos-watch__stage { min-width: 0; }
.eos-watch__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--eos-radius-lg, 14px);
  overflow: hidden;
  isolation: isolate;
}
.eos-watch__player iframe,
.eos-watch__player video { width: 100%; height: 100%; border: 0; background: #000; }

@media (max-width: 1099px) {
  .eos-watch,
  .eos-watch__layout {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   v2.1.7 — Simplified footer bottom row (socials inline)
   ============================================================ */
.eos-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  margin-top: 32px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 13px;
  color: #9aa0a6;
}
.eos-footer-copy { margin: 0; flex: 1 1 240px; }
.eos-footer-legal {
  margin: 0;
  flex: 1 1 240px;
  text-align: right;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.eos-footer-legal a {
  color: #c9ccd3;
  text-decoration: none;
  transition: color .2s;
}
.eos-footer-legal a:hover { color: #ffffff; }
.eos-footer-legal span { opacity: .45; }

.eos-footer-socials {
  list-style: none;
  margin: 0; padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  order: 0;
}
.eos-footer-socials li { margin: 0; }
.eos-footer-socials a {
  width: 32px; height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c9ccd3;
  background: transparent;
  text-decoration: none;
  transition: color .2s, background .2s, transform .15s;
}
.eos-footer-socials a:hover,
.eos-footer-socials a:focus-visible {
  color: #ffffff;
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
  outline: none;
}
.eos-footer-socials svg { display: block; }

@media (max-width: 720px) {
  .eos-footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .eos-footer-legal { text-align: left; justify-content: flex-start; flex: 1 1 100%; }
  .eos-footer-copy  { flex: 1 1 100%; }
}

/* ============================================================
   v2.1.8 — Hero text alignment + custom color
   Driven by the Customizer (Online Service Platform → Landing Page Hero).
   ============================================================ */

/* Apply the color when the operator has set --eos-hero-text inline.
   Default cascade keeps everything white over dark imagery. */
.eos-hero[style*="--eos-hero-text"] .eos-hero-content,
.eos-hero[style*="--eos-hero-text"] .eos-hero-content .eos-eyebrow,
.eos-hero[style*="--eos-hero-text"] .eos-hero-title,
.eos-hero[style*="--eos-hero-text"] .eos-hero-tagline,
.eos-hero[style*="--eos-hero-text"] .eos-hero-when,
.eos-hero[style*="--eos-hero-text"] .eos-countdown .num,
.eos-hero[style*="--eos-hero-text"] .eos-countdown .lbl { color: var(--eos-hero-text) !important; }

/* Hero alignment — LEFT (default) */
.eos-hero--align-left .eos-hero-content {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}
.eos-hero--align-left .eos-hero-tagline { margin-left: 0; margin-right: auto; }
.eos-hero--align-left .eos-countdown,
.eos-hero--align-left .eos-hero-ctas    { justify-content: flex-start; }
.eos-hero--align-left .eos-hero-when    { text-align: left; }

/* Hero alignment — CENTER */
.eos-hero--align-center .eos-hero-content {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.eos-hero--align-center .eos-hero-tagline { margin-left: auto; margin-right: auto; }
.eos-hero--align-center .eos-countdown,
.eos-hero--align-center .eos-hero-ctas    { justify-content: center; }
.eos-hero--align-center .eos-hero-when    { text-align: center; }

/* Hero alignment — RIGHT */
.eos-hero--align-right .eos-hero-content {
  text-align: right;
  margin-left: auto;
  margin-right: 0;
}
.eos-hero--align-right .eos-hero-tagline { margin-left: auto; margin-right: 0; }
.eos-hero--align-right .eos-countdown,
.eos-hero--align-right .eos-hero-ctas    { justify-content: flex-end; }
.eos-hero--align-right .eos-hero-when    { text-align: right; }

/* ============================================================
   v2.1.9 — Hero proportional font scale.
   --eos-hero-scale is set inline on the section by the Customizer.
   Defaults to 1 so heroes without the variable behave identically.
   ============================================================ */
.eos-hero { --eos-hero-scale: 1; }

.eos-hero .eos-eyebrow {
  font-size: calc(13px * var(--eos-hero-scale));
}
.eos-hero-title {
  font-size: clamp(
    calc(28px * var(--eos-hero-scale)),
    calc(6.2vw * var(--eos-hero-scale)),
    calc(80px * var(--eos-hero-scale))
  );
}
.eos-hero-tagline {
  font-size: clamp(
    calc(15px * var(--eos-hero-scale)),
    calc(1.6vw * var(--eos-hero-scale)),
    calc(20px * var(--eos-hero-scale))
  );
}
.eos-hero-when {
  font-size: calc(14px * var(--eos-hero-scale));
}
.eos-hero .eos-countdown-unit { padding: calc(12px * var(--eos-hero-scale)) calc(16px * var(--eos-hero-scale)); }
.eos-hero .eos-countdown .num {
  font-size: clamp(
    calc(22px * var(--eos-hero-scale)),
    calc(3vw * var(--eos-hero-scale)),
    calc(36px * var(--eos-hero-scale))
  );
}
.eos-hero .eos-countdown .lbl {
  font-size: calc(10px * var(--eos-hero-scale));
}

/* Belt — make absolutely sure the date/time follows the alignment
   class even if anything else tries to pin it. */
.eos-hero--align-left   .eos-hero-when { text-align: left;   }
.eos-hero--align-center .eos-hero-when { text-align: center; }
.eos-hero--align-right  .eos-hero-when { text-align: right;  }

/* ============================================================
   v2.1.10 — Hero when-line + countdown alignment hardening.
   The when-line was visually drifting because it had no width
   floor: with text-align: right but a default block width that
   collapsed near the title's wrapped right edge, it landed off.
   Force the when-line to span the full content width and the
   countdown to share its parent's full row, then pin alignment
   to the section class.
   ============================================================ */
.eos-hero .eos-hero-when {
  display: block;
  width: 100%;
  max-width: none !important;
  box-sizing: border-box;
  padding: 0;
  margin-top: 12px;
  margin-bottom: 0;
}
.eos-hero .eos-countdown {
  display: flex;
  width: 100%;
  margin-top: 28px;
  flex-wrap: wrap;
}

.eos-hero--align-left   .eos-hero-when { text-align: left   !important; margin-left: 0;    margin-right: auto; }
.eos-hero--align-center .eos-hero-when { text-align: center !important; margin-left: auto; margin-right: auto; }
.eos-hero--align-right  .eos-hero-when { text-align: right  !important; margin-left: auto; margin-right: 0;    }

.eos-hero--align-left   .eos-countdown { justify-content: flex-start !important; }
.eos-hero--align-center .eos-countdown { justify-content: center     !important; }
.eos-hero--align-right  .eos-countdown { justify-content: flex-end   !important; }

/* Also harden the tagline / eyebrow so they stay glued to the same edge */
.eos-hero--align-left   .eos-eyebrow,
.eos-hero--align-left   .eos-hero-title,
.eos-hero--align-left   .eos-hero-tagline { text-align: left   !important; }
.eos-hero--align-center .eos-eyebrow,
.eos-hero--align-center .eos-hero-title,
.eos-hero--align-center .eos-hero-tagline { text-align: center !important; }
.eos-hero--align-right  .eos-eyebrow,
.eos-hero--align-right  .eos-hero-title,
.eos-hero--align-right  .eos-hero-tagline { text-align: right  !important; }

/* Tagline width caps: when right-aligned, pin the right edge.
   When left-aligned, pin the left edge. Center stays auto. */
.eos-hero--align-left   .eos-hero-tagline { margin-left: 0;    margin-right: auto; }
.eos-hero--align-center .eos-hero-tagline { margin-left: auto; margin-right: auto; }
.eos-hero--align-right  .eos-hero-tagline { margin-left: auto; margin-right: 0;    }

/* ============================================================
   v2.1.11 — Hamburger: hide on desktop, match other icon weight.
   Force-hide at >1100px (desktop). Show only on tablet/mobile.
   Bars match the search-icon dark color so they're visible against
   the white header in light mode.
   ============================================================ */
.eos-hamburger {
  display: none !important;
}
@media (max-width: 1100px) {
  .eos-hamburger { display: inline-flex !important; }
}

/* Match the bar color to other header icons — currentColor follows
   the nav text color which is var(--color-text-strong) in light mode
   and white in dark mode. */
.eos-hamburger span {
  background: currentColor !important;
}
.eos-nav .eos-hamburger {
  color: var(--color-text-strong, #1A1A1A);
}
[data-theme="dark"] .eos-nav .eos-hamburger {
  color: var(--color-text-strong, #FFFFFF);
}

/* ============================================================
   v2.1.12 — Sign-in icon (replaces "Sign in" text in header)
   ============================================================ */
.eos-nav-signin.eos-nav-signin--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--color-border, rgba(0,0,0,.1));
  border-radius: 999px;
  background: var(--color-bg-alt, #F4F5F7);
  color: var(--color-text-strong, #1A1A1A);
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.eos-nav-signin.eos-nav-signin--icon svg { display: block; }
.eos-nav-signin.eos-nav-signin--icon:hover,
.eos-nav-signin.eos-nav-signin--icon:focus-visible {
  background: var(--color-text-strong, #1A1A1A);
  color: var(--color-bg, #fff);
  border-color: var(--color-text-strong, #1A1A1A);
  transform: translateY(-1px);
  outline: none;
}

/* Screen-reader-only utility for the icon's accessible label. */
.eos-nav-signin .screen-reader-text {
  position: absolute !important;
  clip: rect(1px,1px,1px,1px);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 1px; width: 1px;
  margin: -1px; overflow: hidden;
  padding: 0;
  border: 0;
  word-wrap: normal !important;
}

[data-theme="dark"] .eos-nav-signin.eos-nav-signin--icon {
  background: #2C2C2A;
  color: #FFFFFF;
  border-color: rgba(255,255,255,.14);
}
[data-theme="dark"] .eos-nav-signin.eos-nav-signin--icon:hover {
  background: #FFFFFF;
  color: #1F1F1E;
  border-color: #FFFFFF;
}

/* ============================================================
   v2.1.13 — Nav tools always flush right.
   On desktop the 3-column grid (1fr | auto | 1fr) was correct, but
   below the nav-links breakpoint (≤1100px) column 2 collapses to 0
   and column 3 still claims 1fr — which sometimes left the tools
   floating mid-row rather than hugging the right edge. Switch to a
   flex layout at that breakpoint so the tools always sit flush right
   with margin-left:auto.
   ============================================================ */
@media (max-width: 1100px) {
  .eos-nav-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    gap: 12px;
  }
  .eos-nav-tools {
    margin-left: auto !important;
    justify-self: end;
  }
  .eos-logo { margin-right: auto; }
}

/* Belt — make sure justify-self:end always wins on the tools cell at
   wider breakpoints too. */
.eos-nav-tools { justify-self: end !important; margin-left: auto; }

/* ============================================================
   v2.1.13 — Full responsive sweep (desktop / tablet / mobile)
   Appended last so these rules win over any earlier defaults.
   Breakpoints — desktop: >1100px, tablet: 768-1100px, mobile: <768px
   ============================================================ */

/* ---- Universal ----------------------------------------- */
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, iframe, svg { max-width: 100%; height: auto; }
.eos-container, .eos-watch__layout, .eos-section, .eos-footer-inner { box-sizing: border-box; }

/* Respect iOS safe-area insets for sticky bars + footer. */
.eos-statusbar, .eos-diaspora-ribbon { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.eos-nav-inner   { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.eos-footer      { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.eos-watch__panel{ padding-bottom: env(safe-area-inset-bottom); }

/* ---- DESKTOP (>1100px) — refine, don't change ---------- */
@media (min-width: 1101px) {
  .eos-nav-inner { grid-template-columns: 1fr auto 1fr; }
  .eos-nav-tools { justify-self: end !important; }
}

/* ---- TABLET (≤1100px) ---------------------------------- */
@media (max-width: 1100px) {
  .eos-nav-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    gap: 10px;
    padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  }
  .eos-nav-links { display: none; }
  .eos-nav-tools { gap: 6px; margin-left: auto !important; }
  .eos-hamburger { display: inline-flex !important; }

  /* Hero — smaller min-height + tighter padding so it never dominates */
  .eos-hero { min-height: clamp(420px, 60vh, 560px); }
  .eos-hero-inner { padding: clamp(80px, 14vh, 120px) 20px clamp(48px, 8vh, 80px); }

  /* Footer — stack columns in pairs */
  .eos-footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; }

  /* Watch — single column, panel becomes bottom drawer (already in
     watch.css; rule below is a fallback if watch.css fails to load) */
  .eos-watch,
  .eos-watch__layout {
    grid-template-columns: 1fr !important;
    padding: 0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right));
  }

  /* Service schedule — 2 columns */
  .eos-schedule-grid.eos-schedule-grid-3 { grid-template-columns: 1fr 1fr !important; }

  /* Quick-action / next-step / event cards */
  .eos-quick-grid       { grid-template-columns: 1fr 1fr; gap: 16px; }
  .eos-watch__nextsteps { grid-template-columns: 1fr 1fr; }
}

/* ---- MOBILE (≤720px) ----------------------------------- */
@media (max-width: 720px) {
  /* Status bar — drop the secondary text so the CTA + countdown fit */
  .eos-statusbar-inner { gap: 8px; font-size: 12px; }
  .eos-statusbar-cta   { display: none; }
  .eos-statusbar-title { max-width: 22ch; }

  /* Diaspora ribbon — wrap multi-line */
  .eos-diaspora-ribbon-inner { padding: 8px 14px; gap: 10px; font-size: 12px; }
  .eos-diaspora-text { white-space: normal; line-height: 1.4; }

  /* Hero — center content, single-line countdown */
  .eos-hero { min-height: clamp(380px, 70vh, 520px); }
  .eos-hero-title { font-size: clamp(28px, 8vw, 42px) !important; }
  .eos-hero-tagline { font-size: 14px !important; }
  .eos-countdown { gap: 8px; }
  .eos-countdown-unit { padding: 10px 12px; min-width: 64px; }
  .eos-countdown-unit .num { font-size: 22px; }
  .eos-countdown-unit .lbl { font-size: 9px; }

  /* Marquee — bottom-pinned, smaller text */
  .eos-hero-marquee { padding: 8px 0; font-size: 12px; }

  /* Sections collapse to single columns */
  .eos-quick-grid,
  .eos-watch__nextsteps,
  .eos-card-grid-2,
  .eos-card-grid-3,
  .eos-card-grid-4,
  .eos-schedule-grid.eos-schedule-grid-3 { grid-template-columns: 1fr !important; }

  /* Footer — single column stack */
  .eos-footer-inner { grid-template-columns: 1fr; gap: 24px; padding: 0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right)); }

  /* Footer bottom — already responsive in v2.1.7 but reinforce */
  .eos-footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
  .eos-footer-copy, .eos-footer-legal { text-align: center; justify-content: center; flex: 1 1 100%; }
  .eos-footer-socials { order: 1; }

  /* Replay rail — narrower cards */
  .eos-rail,
  .eos-watch__rail { grid-auto-columns: 200px !important; }

  /* Hero alignment fallback — center on mobile regardless of operator
     choice so a single-column layout doesn't look lopsided. */
  .eos-hero--align-left  .eos-hero-content,
  .eos-hero--align-right .eos-hero-content { margin: 0 auto; text-align: center; }
  .eos-hero--align-left  .eos-countdown,
  .eos-hero--align-right .eos-countdown { justify-content: center !important; }
  .eos-hero--align-left  .eos-hero-when,
  .eos-hero--align-right .eos-hero-when { text-align: center !important; }
}

/* ---- SMALL PHONE (≤380px) ------------------------------ */
@media (max-width: 380px) {
  .eos-nav { --eos-nav-h: 62px; }
  .eos-nav-tools { gap: 4px; }
  .eos-nav-tools button,
  .eos-nav-account,
  .eos-nav-signin.eos-nav-signin--icon,
  .theme-toggle { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
  .eos-hero-title { font-size: 26px !important; }
  .eos-hero-tagline { font-size: 13px !important; }
  .eos-countdown-unit { padding: 8px 10px; min-width: 56px; }
  .eos-countdown-unit .num { font-size: 18px; }
}

/* ---- TOUCH-ONLY — generous hit targets ----------------- */
@media (hover: none) and (pointer: coarse) {
  .eos-nav-links a,
  .eos-mobile-nav a,
  .eos-side-tab,
  .eos-watch__tab,
  .eos-quick-card,
  .eos-rail-card,
  .eos-watch__rail-card,
  .eos-chip,
  .eos-btn { min-height: 44px; }
  .eos-pc-btn { min-width: 44px; min-height: 44px; }
  /* Disable hover-only reveals — show controls inline */
  .eos-player-controls { opacity: 1; transform: none; }
  .eos-watch__controls { opacity: 1; transform: none; }
}

/* ---- ORIENTATION — landscape phones -------------------- */
@media (max-width: 900px) and (orientation: landscape) {
  .eos-hero { min-height: 100vh; }
  .eos-hero-inner { padding-top: 80px; padding-bottom: 32px; }
}

/* ---- REDUCED MOTION ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---- PRINT --------------------------------------------- */
@media print {
  .eos-statusbar, .eos-diaspora-ribbon, .eos-nav, .eos-footer,
  .eos-hero-marquee, .eos-player-controls, .eos-watch__controls,
  .eos-watch__panel, .eos-side, .eos-watch__share-dialog { display: none !important; }
  .eos-hero { min-height: auto; color: #000; }
  .eos-hero-bg, .eos-hero-overlay { display: none !important; }
}


/* ============================================================
   v2.1.14 — Mobile drawer: compact head + close button.
   ============================================================ */
.eos-mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px max(20px, env(safe-area-inset-right)) 14px max(20px, env(safe-area-inset-left));
  padding-top: max(14px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--color-border-subtle, rgba(0,0,0,.08));
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 2;
}
.eos-mobile-nav-brand {
  font-family: var(--font-heading, sans-serif);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-muted, #5F6368);
}
.eos-mobile-nav-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  min-width: 40px;
  border: 1px solid var(--color-border, rgba(0,0,0,.1));
  border-radius: 999px;
  background: var(--color-bg-alt, #F4F5F7);
  color: var(--color-text-strong, #1A1A1A);
  cursor: pointer;
  transition: background .2s, color .2s, transform .15s;
}
.eos-mobile-nav-close:hover,
.eos-mobile-nav-close:focus-visible {
  background: var(--color-text-strong, #1A1A1A);
  color: var(--color-bg, #fff);
  transform: scale(.95);
  outline: none;
}
[data-theme="dark"] .eos-mobile-nav-close {
  background: #2C2C2A;
  color: #FFFFFF;
  border-color: rgba(255,255,255,.14);
}

/* Drawer body — give the list reasonable side padding now that the
   sticky head owns the top edge. */
.eos-mobile-nav ul {
  padding: 8px max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
  flex: 1;
}

/* ============================================================
   v2.1.31 — Notes panel: status indicator + meta row
   ============================================================ */
.eos-notes textarea {
  width: 100%;
  min-height: 240px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,.10));
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
  background: var(--color-bg, #fff);
  color: var(--color-text, #1a1a1a);
  resize: vertical;
  box-sizing: border-box;
}
.eos-notes textarea:focus {
  outline: 2px solid var(--color-accent, #F5A312);
  outline-offset: 2px;
  border-color: transparent;
}
.eos-notes-help { margin: 0 0 10px; color: var(--color-text-muted, #5F6368); font-size: 12px; }
.eos-notes-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.eos-notes-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.eos-notes-actions .eos-btn { display: inline-flex; align-items: center; gap: 4px; }
.eos-notes-status {
  font-size: 12px;
  color: var(--color-text-muted, #5F6368);
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.eos-notes-status::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #1B8B3A; /* green when saved */
  transition: background .2s, transform .25s;
}
.eos-notes-status.is-busy::before {
  background: var(--color-accent, #F5A312); /* gold while saving */
  animation: eos-notes-pulse 1s ease-in-out infinite;
}
@keyframes eos-notes-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.3); opacity: .55; }
}
[data-theme="dark"] .eos-notes textarea {
  background: #2C2C2A;
  color: #F8F8F6;
  border-color: rgba(255,255,255,.10);
}


/* ============================================================
   v2.1.32 — Chat dual-mode + Bible inline reader
   ============================================================ */

/* Chat-mode segmented control */
.eos-chat-mode {
  display: flex;
  gap: 4px;
  margin: 0 0 12px;
  padding: 4px;
  background: var(--color-bg-alt, #F4F5F7);
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,.06));
  border-radius: 999px;
}
.eos-chat-mode-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted, #5F6368);
  cursor: pointer;
  transition: background .18s, color .18s;
}
.eos-chat-mode-btn:hover { color: var(--color-text-strong, #1a1a1a); }
.eos-chat-mode-btn.is-on {
  background: var(--color-text-strong, #1a1a1a);
  color: #fff;
}
.eos-chat-mode-btn svg { width: 14px; height: 14px; }

/* Chat panes — only one visible at a time */
.eos-chat-pane { display: none; min-height: 0; }
.eos-chat-pane.is-active { display: flex; flex-direction: column; flex: 1; min-height: 360px; }
.eos-chat-pane > .eos-chat,
.eos-chat-pane > .eos-chat-embed { flex: 1; }
.eos-chat-pane .eos-chat-embed { width: 100%; min-height: 480px; border: 0; background: var(--color-bg-alt, #F4F5F7); border-radius: 8px; }

[data-theme="dark"] .eos-chat-mode { background: #2C2C2A; border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .eos-chat-mode-btn { color: #C3C2B7; }
[data-theme="dark"] .eos-chat-mode-btn.is-on { background: #fff; color: #1F1F1E; }

/* Bible quick-jump pills — now buttons (was anchors) */
.eos-bible-quick { list-style: none; padding: 0; margin: 12px 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.eos-bible-quick button {
  background: var(--color-bg-alt, #F4F5F7);
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,.06));
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--color-text, #1a1a1a);
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.eos-bible-quick button:hover { background: var(--color-accent, #F5A312); color: #1a1a1a; transform: translateY(-1px); }

/* Bible reader form */
.eos-bible-form { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; }
.eos-bible-form input,
.eos-bible-form select {
  padding: 10px 12px;
  border: 1px solid var(--color-border, rgba(0,0,0,.12));
  border-radius: 8px;
  font: inherit; font-size: 13px;
  background: var(--color-bg, #fff);
  color: var(--color-text, #1a1a1a);
}
.eos-bible-form input:focus,
.eos-bible-form select:focus { outline: 2px solid var(--color-accent, #F5A312); outline-offset: 1px; border-color: transparent; }
.eos-bible-form .eos-btn { padding: 10px 16px; }

/* Bible result card */
.eos-bible-result { margin-top: 14px; }
.eos-bible-loading { padding: 12px; font-size: 13px; color: var(--color-text-muted, #5F6368); }
.eos-bible-error {
  padding: 12px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.22);
  border-radius: 8px;
  color: #B91C1C;
  font-size: 13px;
}
.eos-bible-card {
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,.08));
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
}
.eos-bible-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border-subtle, rgba(0,0,0,.06));
  background: var(--color-bg-alt, #F4F5F7);
}
.eos-bible-card-head h4 { margin: 0; font-family: var(--font-heading, sans-serif); font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.eos-bible-trans { display: inline-block; margin-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted, #5F6368); }
.eos-bible-card-tools { display: inline-flex; gap: 4px; }
.eos-bible-card-tools button,
.eos-bible-card-tools a {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,.10));
  border-radius: 999px;
  background: var(--color-bg, #fff);
  color: var(--color-text, #1a1a1a);
  cursor: pointer;
  transition: background .15s, color .15s;
  text-decoration: none;
}
.eos-bible-card-tools button:hover,
.eos-bible-card-tools a:hover { background: var(--color-text-strong, #1a1a1a); color: #fff; }
.eos-bible-card-body {
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-text, #1a1a1a);
  max-height: 260px;
  overflow-y: auto;
  transition: max-height .25s ease;
}
.eos-bible-card[data-expand="1"] .eos-bible-card-body { max-height: 70vh; }
.eos-bible-verse { margin: 0 0 8px; }
.eos-bible-verse sup {
  display: inline-block;
  min-width: 18px;
  font-weight: 700;
  color: var(--color-accent, #F5A312);
  margin-right: 4px;
  vertical-align: baseline;
  font-size: 11px;
}

[data-theme="dark"] .eos-bible-card { background: #2C2C2A; border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .eos-bible-card-head { background: #1F1F1E; border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .eos-bible-card-tools button,
[data-theme="dark"] .eos-bible-card-tools a { background: #2C2C2A; border-color: rgba(255,255,255,.10); color: #F8F8F6; }
[data-theme="dark"] .eos-bible-card-tools button:hover,
[data-theme="dark"] .eos-bible-card-tools a:hover { background: #fff; color: #1F1F1E; }
[data-theme="dark"] .eos-bible-quick button { background: #2C2C2A; border-color: rgba(255,255,255,.08); color: #F8F8F6; }
[data-theme="dark"] .eos-bible-quick button:hover { background: var(--color-accent, #F5A312); color: #1a1a1a; }
[data-theme="dark"] .eos-bible-form input,
[data-theme="dark"] .eos-bible-form select { background: #2C2C2A; color: #F8F8F6; border-color: rgba(255,255,255,.10); }

@media (max-width: 540px) {
  .eos-bible-form { grid-template-columns: 1fr; }
}

/* ============================================================
   v2.1.35 — Universal expand controls for Chat / Notes / Bible
   ============================================================ */

/* The toolbar lives at the top-right of each panel */
.eos-side-expand {
  position: absolute;
  top: 10px;
  right: 12px;
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--color-bg-alt, #F4F5F7);
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,.08));
  border-radius: 999px;
  z-index: 5;
}
.eos-side-expand-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--color-text-muted, #5F6368);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s, transform .12s;
}
.eos-side-expand-btn:hover { background: var(--color-bg, #fff); color: var(--color-text-strong, #1a1a1a); }
.eos-side-expand-btn:active { transform: scale(.92); }
.eos-side-expand-btn.is-on {
  background: var(--color-accent, #F5A312);
  color: #1a1a1a;
}

/* Each panel that contains the toolbar must be position:relative */
.eos-side-panel[data-eos-panel="chat"],
.eos-side-panel[data-eos-panel="notes"],
.eos-side-panel[data-eos-panel="bible"] { position: relative; }

/* Padding on the panel so content doesn't sit under the toolbar */
.eos-side-panel[data-eos-panel="chat"]  > .eos-chat-mode,
.eos-side-panel[data-eos-panel="chat"]  > .eos-chat-pane:first-of-type,
.eos-side-panel[data-eos-panel="notes"] > .eos-notes,
.eos-side-panel[data-eos-panel="bible"] > .eos-bible { padding-top: 8px; }

/* The default side panel is constrained by .eos-watch grid + sticky max-height (in player.css).
   Expand states override that by adding classes to the body/eos-watch container. */

/* === V (vertical) — grow taller, push sticky max-height higher === */
body.eos-side-expand-v .eos-side {
  max-height: calc(100vh - 80px) !important;
  min-height: calc(100vh - 80px);
}
body.eos-side-expand-v .eos-side-panel.is-active { min-height: calc(100vh - 220px); }

/* === H (horizontal) — make the side panel wider, player narrower === */
body.eos-side-expand-h .eos-watch {
  grid-template-columns: minmax(0, 1fr) minmax(420px, 720px) !important;
}

/* === FULL — both: panel overlays the entire watch area === */
body.eos-side-expand-full .eos-watch-stage { display: none; }
body.eos-side-expand-full .eos-watch {
  grid-template-columns: 1fr !important;
  max-width: 1600px;
}
body.eos-side-expand-full .eos-side {
  max-height: calc(100vh - 80px) !important;
  min-height: calc(100vh - 80px);
  position: sticky;
  top: 16px;
}
body.eos-side-expand-full .eos-side-panel.is-active { min-height: calc(100vh - 220px); }

/* On mobile, expand modes just go full-viewport regardless */
@media (max-width: 1100px) {
  body.eos-side-expand-v .eos-side,
  body.eos-side-expand-h .eos-side,
  body.eos-side-expand-full .eos-side {
    position: fixed; inset: 0; z-index: 9000;
    max-height: 100vh !important;
    min-height: 100vh !important;
    margin: 0; border-radius: 0;
    overflow-y: auto;
  }
  body.eos-side-expand-v,
  body.eos-side-expand-h,
  body.eos-side-expand-full { overflow: hidden; }
}

[data-theme="dark"] .eos-side-expand { background: #1F1F1E; border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .eos-side-expand-btn { color: #C3C2B7; }
[data-theme="dark"] .eos-side-expand-btn:hover { background: #2C2C2A; color: #fff; }

/* ============================================================
   v2.1.36 — Bible recents list
   ============================================================ */
.eos-bible-recents-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0 6px;
}
.eos-bible-recents-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-muted, #5F6368);
}
.eos-bible-recents-clear {
  background: transparent; border: 0;
  font-size: 11px; font-weight: 700;
  color: var(--color-text-muted, #5F6368);
  cursor: pointer;
  padding: 4px 8px; border-radius: 999px;
  transition: color .15s, background .15s;
}
.eos-bible-recents-clear:hover { background: var(--color-bg-alt, #F4F5F7); color: var(--color-text-strong, #1a1a1a); }
.eos-bible-recents-empty {
  margin: 4px 0 12px;
  font-size: 12px;
  color: var(--color-text-muted, #5F6368);
  font-style: italic;
}

/* Recents pills — same shape as v2.1.32 quick pills but with an X */
.eos-bible-quick { list-style: none; padding: 0; margin: 6px 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.eos-bible-quick li { display: inline-flex; align-items: stretch; }
.eos-bible-quick .eos-bible-recent {
  background: var(--color-bg-alt, #F4F5F7);
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,.06));
  border-right: 0;
  border-radius: 999px 0 0 999px;
  padding: 6px 10px 6px 14px;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--color-text, #1a1a1a);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, transform .12s;
}
.eos-bible-quick .eos-bible-recent em {
  font-style: normal;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .1em;
  padding: 2px 6px;
  background: rgba(245,163,18,.18);
  color: var(--color-accent, #F5A312);
  border-radius: 999px;
}
.eos-bible-quick .eos-bible-recent:hover { background: var(--color-accent, #F5A312); transform: translateY(-1px); color: #1a1a1a; }
.eos-bible-quick .eos-bible-recent:hover em { background: rgba(0,0,0,.12); color: #1a1a1a; }
.eos-bible-quick .eos-bible-recent-x {
  background: var(--color-bg-alt, #F4F5F7);
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,.06));
  border-radius: 0 999px 999px 0;
  padding: 0 9px;
  font: inherit;
  color: var(--color-text-muted, #5F6368);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.eos-bible-quick .eos-bible-recent-x:hover { background: #E53935; color: #fff; }

[data-theme="dark"] .eos-bible-quick .eos-bible-recent,
[data-theme="dark"] .eos-bible-quick .eos-bible-recent-x { background: #2C2C2A; border-color: rgba(255,255,255,.08); color: #F8F8F6; }
[data-theme="dark"] .eos-bible-quick .eos-bible-recent:hover { background: var(--color-accent, #F5A312); color: #1a1a1a; }

/* ============================================================
   v2.1.39 — Events page pagination
   ============================================================ */
.eos-ev-pager {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 18px;
  padding: 14px 16px;
  background: var(--color-bg-alt, #F4F5F7);
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,.06));
  border-radius: 12px;
  margin: 14px 0;
  font-size: 13px;
  color: var(--color-text, #1a1a1a);
}
.eos-ev-pager-top    { margin-top: 4px; }
.eos-ev-pager-bottom { margin-bottom: 8px; }
.eos-ev-pager:empty  { display: none; }

.eos-ev-pg-summary { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.eos-ev-pg-summary strong { color: var(--color-text-strong, #1a1a1a); }
.eos-ev-pg-pp {
  background: #fff;
  border: 1px solid var(--color-border, rgba(0,0,0,.12));
  border-radius: 999px;
  padding: 5px 28px 5px 12px;
  font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.eos-ev-pg-pp:hover { border-color: var(--color-accent, #F5A312); }

.eos-ev-pg-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.eos-ev-pg-nums { display: inline-flex; align-items: center; gap: 4px; margin: 0 6px; }

.eos-ev-pg-num,
.eos-ev-pg-arrow {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 34px; height: 34px; padding: 0 10px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(0,0,0,.12));
  border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--color-text, #1a1a1a);
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s, transform .08s;
}
.eos-ev-pg-num:hover,
.eos-ev-pg-arrow:not(:disabled):hover {
  background: var(--color-accent, #F5A312); color: #1a1a1a;
  border-color: var(--color-accent, #F5A312);
  transform: translateY(-1px);
}
.eos-ev-pg-num.is-on {
  background: var(--color-accent, #F5A312); color: #1a1a1a;
  border-color: var(--color-accent, #F5A312);
  box-shadow: 0 1px 0 rgba(0,0,0,.06) inset;
}
.eos-ev-pg-arrow svg { width: 14px; height: 14px; }
.eos-ev-pg-arrow:disabled { opacity: .35; cursor: not-allowed; }
.eos-ev-pg-gap { padding: 0 6px; color: var(--color-text-muted, #5F6368); user-select: none; }

.eos-ev-pg-jump { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted, #5F6368); }
.eos-ev-pg-jump label { font-weight: 600; }
.eos-ev-pg-jump-input {
  width: 70px; height: 32px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(0,0,0,.12));
  border-radius: 8px;
  padding: 0 10px;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--color-text, #1a1a1a);
  text-align: center;
  -moz-appearance: textfield;
}
.eos-ev-pg-jump-input::-webkit-outer-spin-button,
.eos-ev-pg-jump-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.eos-ev-pg-jump-input:focus {
  outline: none; border-color: var(--color-accent, #F5A312);
  box-shadow: 0 0 0 3px rgba(245, 163, 18, .25);
}
.eos-ev-pg-jump-input.eos-ev-pg-error {
  border-color: #e74c3c;
  animation: eos-ev-pg-shake .35s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes eos-ev-pg-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.eos-ev-pg-of { color: var(--color-text-muted, #5F6368); font-weight: 500; }

[data-theme="dark"] .eos-ev-pager { background: #1f1f1d; border-color: rgba(255,255,255,.08); color: #F8F8F6; }
[data-theme="dark"] .eos-ev-pg-num,
[data-theme="dark"] .eos-ev-pg-arrow,
[data-theme="dark"] .eos-ev-pg-pp,
[data-theme="dark"] .eos-ev-pg-jump-input { background: #2C2C2A; border-color: rgba(255,255,255,.12); color: #F8F8F6; }
[data-theme="dark"] .eos-ev-pg-num.is-on { color: #1a1a1a; }

/* Tablet */
@media (max-width: 900px) {
  .eos-ev-pager { gap: 10px 12px; padding: 12px; }
  .eos-ev-pg-summary { flex: 1 1 100%; justify-content: space-between; }
  .eos-ev-pg-nav { margin-left: 0; flex: 1 1 100%; justify-content: center; }
  .eos-ev-pg-jump { flex: 1 1 100%; justify-content: center; }
}

/* Mobile — compact numeric strip, hide First/Last labels */
@media (max-width: 600px) {
  .eos-ev-pg-arrow { min-width: 36px; padding: 0 8px; font-size: 0; }
  .eos-ev-pg-arrow svg { width: 16px; height: 16px; }
  .eos-ev-pg-num { min-width: 30px; height: 32px; padding: 0 8px; font-size: 12px; }
  .eos-ev-pg-nums { gap: 3px; margin: 0 4px; }
  .eos-ev-pg-jump-input { width: 60px; }
}

/* ============================================================
   v2.1.40 — Events sort: grouped dropdown
   ============================================================ */
.eos-ev-dd-menu .eos-ev-dd-group {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-muted, #5F6368);
  padding: 8px 12px 4px;
  pointer-events: none;
}
.eos-ev-dd-menu .eos-ev-dd-group:first-child { padding-top: 4px; }


/* ============================================================
 * v2.1.84 — Blueprint type + spacing system applied site-wide.
 *
 * Mirrors the Account Hub's EGW_Layout_System_Spec:
 *   - 8-pt spacing scale (--space-1 … --space-12)
 *   - Locked radius scale (sm/md/lg/xl/pill)
 *   - Fluid clamp() type for h1–h6, body and small text
 *   - 44px touch targets on buttons/inputs
 *   - text-wrap: balance on headings for centred copy
 * ============================================================ */
:root {
  /* 8-pt spacing scale */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
  --space-9: 40px; --space-10: 48px; --space-11: 56px; --space-12: 64px;
  /* Locked radius scale */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-pill: 999px;
  /* Fluid type scale */
  --type-h1: clamp(2rem, 4vw + 1rem, 3.25rem);
  --type-h2: clamp(1.5rem, 2.4vw + 0.6rem, 2.25rem);
  --type-h3: clamp(1.25rem, 1.6vw + 0.5rem, 1.5rem);
  --type-h4: clamp(1.125rem, 0.6vw + 1rem, 1.25rem);
  --type-h5: 1rem;
  --type-h6: 0.875rem;
  --type-body:  1rem;
  --type-small: 0.8125rem;
  --type-eyebrow: 0.6875rem;
}

/* Apply the fluid scale to native heading levels (token-aware so overrides
   still win) — uses :where() so author-specific selectors trump it. */
:where(.eos-app h1, .eos-app .h1) { font-size: var(--type-h1); line-height: 1.1;  letter-spacing: -0.02em; text-wrap: balance; }
:where(.eos-app h2, .eos-app .h2) { font-size: var(--type-h2); line-height: 1.18; letter-spacing: -0.015em; text-wrap: balance; }
:where(.eos-app h3, .eos-app .h3) { font-size: var(--type-h3); line-height: 1.22; letter-spacing: -0.01em;  text-wrap: balance; }
:where(.eos-app h4, .eos-app .h4) { font-size: var(--type-h4); line-height: 1.3; }
:where(.eos-app h5, .eos-app .h5) { font-size: var(--type-h5); line-height: 1.35; }
:where(.eos-app h6, .eos-app .h6) { font-size: var(--type-h6); line-height: 1.4; }
:where(.eos-app p, .eos-app li)   { font-size: var(--type-body); line-height: 1.6; }
:where(.eos-app small, .eos-app .eos-small) { font-size: var(--type-small); line-height: 1.5; }

/* Touch-target floor for interactive controls (44px per blueprint). */
:where(.eos-app .eos-btn, .eos-app button.eos-btn, .eos-app .eos-chip, .eos-app .eos-ev-view-btn) {
  min-height: 44px;
}
:where(.eos-app .eos-input, .eos-app input[type="text"], .eos-app input[type="search"], .eos-app input[type="email"], .eos-app input[type="url"], .eos-app select) {
  min-height: 44px;
}

/* Section-level centred copy uses balanced wrap so two-line titles distribute
   evenly — mirrors the centred-masthead pattern from the Hub login. */
:where(.eos-app .eos-centred, .eos-app .eos-section--centred) { text-align: center; margin-inline: auto; }
:where(.eos-app .eos-centred > h1, .eos-app .eos-centred > h2, .eos-app .eos-section--centred > h1, .eos-app .eos-section--centred > h2) {
  text-wrap: balance;
}


/* ============================================================
 * v2.1.85 — Motion + hover system ported from the Accounts Hub
 * (egw-polish.css v3.0.2). Mirrors the Hub's smooth transitions,
 * card hover-lift, icon scale, section fade-up + reduced-motion
 * guard. Applied site-wide via .eos-app scope.
 * ============================================================ */
:root {
  --motion-fast:  150ms;
  --motion-base:  220ms;
  --motion-slow:  320ms;
  --motion-ease:  cubic-bezier(.2, .7, .3, 1);
  --hover-lift:   translateY(-3px);
  --hover-lift-sm: translateY(-2px);
  --hover-shadow: 0 12px 28px rgba(16, 24, 40, .12);
  --hover-shadow-sm: 0 8px 20px rgba(16, 24, 40, .14);
}

/* Universal smooth transitions on interactive elements */
.eos-app a,
.eos-app button,
.eos-app .eos-btn,
.eos-app .eos-chip,
.eos-app .eos-card,
.eos-app .eos-quick-card,
.eos-app .eos-step,
.eos-app .eos-watch__step,
.eos-app .eos-ev-card,
.eos-app .eos-ev-card-link,
.eos-app .eos-ev-view-btn,
.eos-app .eos-bc-card,
.eos-app .eos-section-link {
  transition:
    transform var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) ease,
    background-color var(--motion-base) ease,
    border-color var(--motion-base) ease,
    color var(--motion-base) ease,
    filter var(--motion-base) ease,
    opacity var(--motion-base) ease;
}
.eos-app input,
.eos-app select,
.eos-app textarea {
  transition:
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    background-color var(--motion-fast) ease;
}

/* Card hover-lift — main interactive cards across the platform. */
.eos-app .eos-quick-card:hover,
.eos-app .eos-card:hover,
.eos-app .eos-ev-card:hover,
.eos-app .eos-bc-card:hover,
.eos-app .eos-watch__step:hover,
.eos-app .eos-step:hover {
  transform: var(--hover-lift);
  box-shadow: var(--hover-shadow);
}
.eos-app .eos-quick-card:active,
.eos-app .eos-card:active,
.eos-app .eos-ev-card:active,
.eos-app .eos-watch__step:active,
.eos-app .eos-step:active {
  transform: translateY(-1px);
}

/* Icon scale on card hover — mirrors prof-mod / eos-quick-card icon flourish. */
.eos-app .eos-quick-card svg,
.eos-app .eos-step svg,
.eos-app .eos-watch__step-icon {
  transition: transform var(--motion-base) var(--motion-ease);
}
.eos-app .eos-quick-card:hover svg,
.eos-app .eos-step:hover svg,
.eos-app .eos-watch__step:hover .eos-watch__step-icon {
  transform: scale(1.07);
}

/* Section entrance fade-up — matches egwFadeUp from the Hub. */
@keyframes eosFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.eos-app .eos-section--enter,
.eos-app .eos-watch__panel,
.eos-app .eos-ev-grid,
.eos-app .eos-ev-list,
.eos-app .eos-quick-grid {
  animation: eosFadeUp var(--motion-base) var(--motion-ease) both;
}

/* Subtle chip / pill hover */
.eos-app .eos-chip:hover {
  transform: translateY(-1px);
}

/* Buttons get a brightness lift on hover (mirrors egw-lead-card__go:hover) */
.eos-app .eos-btn:hover,
.eos-app .eos-btn-primary:hover {
  filter: brightness(1.05);
}

/* Focus-visible ring — accessibility baseline (blueprint spec). */
.eos-app a:focus-visible,
.eos-app button:focus-visible,
.eos-app .eos-btn:focus-visible,
.eos-app .eos-chip:focus-visible,
.eos-app input:focus-visible,
.eos-app select:focus-visible,
.eos-app textarea:focus-visible {
  outline: 2px solid var(--color-accent, #F5A312);
  outline-offset: 2px;
}

/* Respect reduced motion — Hub-style guard. */
@media (prefers-reduced-motion: reduce) {
  .eos-app *,
  .eos-app *::before,
  .eos-app *::after {
    animation: none !important;
    transition: none !important;
  }
  .eos-app .eos-quick-card:hover,
  .eos-app .eos-card:hover,
  .eos-app .eos-ev-card:hover,
  .eos-app .eos-bc-card:hover,
  .eos-app .eos-watch__step:hover,
  .eos-app .eos-step:hover,
  .eos-app .eos-quick-card:hover svg,
  .eos-app .eos-step:hover svg,
  .eos-app .eos-watch__step:hover .eos-watch__step-icon {
    transform: none !important;
  }
}

/* ============================================================
 * v2.1.129 — Watch layout resizer handle (absolute-positioned)
 * ============================================================ */
.eos-watch__resizer {
  position: absolute;
  width: 18px;
  cursor: col-resize;
  display: block;             /* grip is absolutely-positioned sticky inside */
  border-radius: 8px;
  background: transparent;
  outline: none;
  user-select: none;
  touch-action: none;
  z-index: 5;
  /* top, height, left set by JS based on the side panel edge. */
  transition: background 120ms ease, opacity 120ms ease;
}
.eos-watch__resizer:hover { background: rgba(245,163,18,0.10); }
.eos-watch__resizer:focus-visible {
  box-shadow: 0 0 0 2px rgba(245,163,18,0.55);
}
/* Always-visible vertical hairline */
.eos-watch__resizer::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(0,0,0,0.14);
  border-radius: 2px;
  transition: width 120ms ease, background 120ms ease;
  transform: translateX(-50%);
}
[data-theme="dark"] .eos-watch__resizer::before { background: rgba(255,255,255,0.18); }
.eos-watch__resizer:hover::before { background: rgba(245,163,18,0.75); width: 3px; }
[data-theme="dark"] .eos-watch__resizer:hover::before { background: rgba(245,163,18,0.85); }

/* Grip indicator — STICKY at viewport vertical centre so it's always visible. */
.eos-watch__resizer-grip {
  position: sticky;
  top: 45vh;                     /* anchors to upper-middle of viewport */
  display: block;
  margin: 0 auto;
  width: 4px;
  height: 36px;
  border-radius: 3px;
  background: rgba(0,0,0,0.35);
  z-index: 2;
  box-shadow: 0 0 0 4px rgba(0,0,0,0.06);
  transition: background 120ms ease, height 120ms ease, width 120ms ease, box-shadow 120ms ease;
}
[data-theme="dark"] .eos-watch__resizer-grip {
  background: rgba(255,255,255,0.45);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.04);
}
.eos-watch__resizer:hover .eos-watch__resizer-grip {
  background: #F5A312;
  height: 52px;
  width: 5px;
  box-shadow: 0 0 0 6px rgba(245,163,18,0.18);
}
.eos-watch__resizer.is-dragging {
  background: rgba(245,163,18,0.18);
}
.eos-watch__resizer.is-dragging::before {
  background: #F5A312;
  width: 3px;
}
.eos-watch__resizer.is-dragging .eos-watch__resizer-grip {
  background: #F5A312;
  height: 68px;
  width: 6px;
  box-shadow: 0 0 0 8px rgba(245,163,18,0.28);
}

/* Readout pill that follows the cursor during drag */
.eos-watch__resizer-readout {
  position: fixed;
  top: 12px;
  background: #1A1A2E;
  color: #FFCB6F;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  letter-spacing: 0.4px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 0);
  white-space: nowrap;
  transition: opacity 120ms ease;
  z-index: 9999;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.eos-watch__resizer.is-dragging .eos-watch__resizer-readout {
  opacity: 1;
}

[data-theme="dark"] .eos-watch__resizer::before { background: rgba(255,255,255,0.10); }
[data-theme="dark"] .eos-watch__resizer-grip { background: rgba(255,255,255,0.30); }
[data-theme="dark"] .eos-watch__resizer:hover { background: rgba(245,163,18,0.12); }
[data-theme="dark"] .eos-watch__resizer.is-dragging { background: rgba(245,163,18,0.20); }

/* Hide the resizer at the breakpoints where the layout already collapses
   to a single column (existing rules at <=1100px in player.css). */
@media (max-width: 1100px) {
  .eos-watch__resizer { display: none !important; }
}

/* While dragging, prevent text selection across the page. */
body.is-watch-resizing,
body.is-watch-resizing * {
  user-select: none !important;
  cursor: col-resize !important;
}