/* The Sermons page (sermons/index.php): map on top, the sermon list under it. Light / dark from <html data-bs-theme>
   (the tokens are css/sw_sermon_browser.css's). Mobile first: 16px gutters, nothing wider than the screen. */
body.swsp-page { background: var(--swsb-surface); color: var(--swsb-text); }
.swsp { padding: calc(var(--header-height, 56px) + env(safe-area-inset-top, 0px) + 8px) 0 40px; }
.swsp__wrap { max-width: 1040px; padding-left: 16px; padding-right: 16px; }
.swsp .seo-breadcrumbs { margin: 8px 0 4px; }
.swsp .seo-breadcrumbs a, .swsp .seo-breadcrumbs li { color: var(--swsb-muted); }
.swsp__title { font-size: 1.7rem; font-weight: 800; margin: 4px 0 4px; color: var(--swsb-text); letter-spacing: -0.01em; }
.swsp__lead { color: var(--swsb-muted); margin: 0 0 16px; max-width: 60ch; line-height: 1.5; }
.swsp__h2 { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--swsb-text); }
.swsp__map { margin-bottom: 20px; }
.swsp__map .swcm-section__box { border-color: var(--swsb-border); height: 300px; }
@media (max-width: 640px) { .swsp__map .swcm-section__box { height: 220px; } .swsp__title { font-size: 1.45rem; } }
.swsp__map .swcm-section__note { color: var(--swsb-muted); opacity: 1; }
.swsp__map .swcm-legend { color: var(--swsb-muted); }
.swsp__list { background: var(--swsb-bg); border: 1px solid var(--swsb-border); border-radius: 18px; padding: 14px; }
@media (min-width: 640px) { .swsp__list { padding: 18px; } }
.swsp__plain { list-style: none; margin: 0; padding: 0; }
.swsp__plain li { padding: 10px 0; border-bottom: 1px solid var(--swsb-border); display: flex; flex-direction: column; gap: 2px; }
.swsp__plain a { color: var(--swsb-text); font-weight: 600; }
.swsp__plain span { color: var(--swsb-muted); font-size: 0.85rem; }
.swsp__empty { color: var(--swsb-muted); }
.swsp__browse { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.swsp__details { background: var(--swsb-bg); border: 1px solid var(--swsb-border); border-radius: 14px; padding: 4px 14px; }
.swsp__details summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; color: var(--swsb-text); }
.swsp__details .seo-badges { padding: 4px 0 12px; }
[data-bs-theme="dark"] .swsp .seo-badge { background: var(--swsb-surface-2); color: var(--swsb-text); border-color: var(--swsb-border); }
[data-bs-theme="dark"] .swsp .seo-pagination__link { color: var(--swsb-text); }