* {
    box-sizing: border-box;
}

/* Home page only: shrink every rem-sized font (and anything that inherits
   its size from the root, including the header nav links and h1) by 10%.
   Scoped via :has() rather than a body-level rule since rem always resolves
   against the root regardless of which element declares it. */
html:has(body.landing-page) {
    font-size: 90%;
}

.form-grid.single-column {
    grid-template-columns: 1fr;
}

/* Honeypot: visually hidden but present in the DOM to catch bots. */
.hp-field {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f6f7fb;
    color: #1f2937;
}

body.join-group-page,
body.host-group-page {
    min-height: 100vh;
}

/* The photo lives on a viewport-sized fixed layer rather than on the body.
   With background-size:cover on the body itself, the area to cover was the
   whole DOCUMENT - so on these long forms a 1.9:1 landscape photo was scaled
   to match the page HEIGHT and overflowed the width enormously: 1.35x with
   half the image cropped on desktop, 2.27x with only 9% of it visible on a
   phone. Sized to the viewport instead, the area is roughly the image's own
   aspect ratio, so it sits at about 1:1 with almost no crop no matter how long
   the form gets.

   A fixed pseudo-element rather than background-attachment:fixed, which would
   achieve the same framing but is long-broken on iOS Safari. */
body.join-group-page::before,
body.host-group-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

body.join-group-page::before {
    background-image: url("/static/page-backgrounds/join-group-bg.jpg");
}

body.host-group-page::before {
    background-image: url("/static/page-backgrounds/host-group-bg.jpg");
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.7rem 1rem;
    background: #111827;
    color: #fff;
    /* No vertical padding - the header's height is just whatever the logo
       (the tallest element in it) needs, not padding on top of that. */
    padding: 0 1.35rem;
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.site-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.12rem;
}

.site-logo {
    display: block;
    width: 86px;
    height: auto;
}

.topbar h1 {
    margin: 0;
    font-size: 1.1rem;
}

.topbar nav a {
    color: #dbeafe;
    text-decoration: none;
    font-weight: 600;
}
.topbar nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.topbar nav a:hover {
    text-decoration: underline;
}
.nav-meta {
    color: #cbd5e1;
    font-size: 0.82rem;
}

.inline-nav-form {
    margin: 0;
}

.link-button {
    background: transparent;
    border: 0;
    color: #dbeafe;
    padding: 0;
    font-weight: 600;
}

.link-button:hover {
    text-decoration: underline;
    filter: none;
}

.container {
    max-width: 980px;
    margin: 1.5rem auto;
    padding: 0 1rem;
}

/* Duplicates the landing page's hero-video-spacer trick: guarantee a full
   viewport of content before the footer so it always sits below the fold
   and only appears once the user actually scrolls, instead of floating
   right below short pages' content. */
body:not(.landing-page) main.container {
    min-height: 100vh;
}

.hero-header-wrap {
    position: relative;
}

body.landing-page {
    margin: 0;
}

body.landing-page .hero-header-wrap .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    color: #1f2937;
    z-index: 50;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

body.landing-page .hero-header-wrap .topbar h1,
body.landing-page .hero-header-wrap .topbar nav a,
body.landing-page .hero-header-wrap .topbar .link-button {
    color: #1f2937;
}

body.landing-page .hero-header-wrap .topbar .nav-meta {
    color: #4b5563;
}

/* .site-logo's width is a fixed px value, so it doesn't respond to the
   root font-size shrink above like the rem-sized text does - shrink it
   to match by the same 10%. */
body.landing-page .site-logo {
    width: 77.4px;
}

body.landing-page main.container {
    margin: 0;
    max-width: none;
    padding: 0;
    /* .hero-video-fixed is position:fixed - a positioned element always
       paints above plain static (non-positioned) content in the same
       stacking context, even at z-index:0, regardless of DOM order. Without
       its own stacking context, content here would render underneath the
       fixed video the moment it scrolls into that viewport region. */
    position: relative;
    z-index: 1;
}

body.join-group-page .topbar,
body.host-group-page .topbar {
    background: #ffffff;
    color: #1f2937;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

body.join-group-page .topbar h1,
body.join-group-page .topbar nav a,
body.join-group-page .topbar .link-button,
body.host-group-page .topbar h1,
body.host-group-page .topbar nav a,
body.host-group-page .topbar .link-button {
    color: #1f2937;
}

body.join-group-page .topbar .nav-meta,
body.host-group-page .topbar .nav-meta {
    color: #4b5563;
}

body.join-group-page .card,
body.host-group-page .card {
    background: rgba(255, 255, 255, 0.8);
}

/* No longer position:fixed - height is driven by its content (the button
   row plus whatever panels follow), with a 100vh floor for short content.
   The video is an absolutely-positioned layer inside that stretches to
   match, so it simply ends wherever the content ends instead of the page
   needing an internal scrollbar to see content taller than one screen. */
.hero-video-fixed {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    z-index: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-video-fixed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
}

/* Two stacked video elements take turns being on top ("is-active"). The
   inactive one preloads the next clip underneath, out of view, so switching
   is an instant z-index swap (still a jump cut, never a fade) instead of a
   src-swap that has to fetch the clip over the network right when it's needed. */
.hero-cycle-video.is-active {
    z-index: 1;
}

.landing-about {
    max-width: 480px;
    padding: 1.4rem 1.6rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #374151;
}

.card.landing-about {
    background: rgba(255, 255, 255, 0.8);
}

/* Normal flow now (no absolute positioning, no scroll clipping) - the
   button row plus whatever panels (Group Directory, about blurb) follow it
   just stack and grow the hero-video-fixed parent along with them, via the
   flex centering on that parent. */
.hero-center-stack {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 900px;
    width: 100%;
    box-sizing: border-box;
    padding: 220px 1.5rem 3rem;
    /* Nudging the block down is done with a relative offset, not by growing
       padding-top. The hero centres this stack vertically (align-items:center),
       so extra padding makes the stack taller and centring hands half of it
       straight back - 30px of padding moved the block only 15px. Worse, once
       the stack grows past the hero's 100vh the centring stops compensating
       and the ratio changes again. A relative offset doesn't affect layout, so
       it shifts by exactly what it says at any viewport height.

       There is a ceiling on this though. The offset is visual only, so it
       pushes the bottom of the stack past the hero - which sets
       overflow:hidden - and only the empty space below the last card is
       expendable. That measures ~57px (the padding-bottom above plus the
       card's own margin), and it stays constant at any viewport size or number
       of published groups. At 50px there are ~7px left, so this is near the
       limit: going much further starts clipping the bottom card, and reducing
       the padding-bottom above would clip it too. */
    top: 50px;
}

.hero-cta-row {
    display: flex;
    gap: 1.25rem;
    width: 100%;
}

/* Shrink-to-fit rather than stretching to the stack's full width, so a
   short blurb or a directory with just one or two groups doesn't spread
   across the whole hero. */
.hero-panel {
    width: fit-content;
    max-width: 100%;
    margin: 0;
}

/* The directory needs real width to tile its cards side by side - shrink-
   to-fit (like the about blurb) would starve the grid below of room to
   compute more than one column. */
.group-directory-section {
    width: 100%;
}

.card.group-directory-section {
    background: rgba(255, 255, 255, 0.8);
}

.hero-cta-button {
    flex: 1 1 0;
    text-align: center;
    padding: 1.5rem 1.25rem;
    background: #ffffff;
    color: #4a2f1c;
    font-size: 1.15rem;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease;
}

.hero-cta-button:hover {
    transform: translateY(-2px);
}

.site-footer {
    position: relative;
    z-index: 1;
    background: #111827;
    color: #cbd5e1;
    text-align: center;
    padding: 1.75rem 1rem;
}

.site-footer p {
    margin: 0.2rem 0;
    font-size: 0.9rem;
}

/* Capped and centred so the long 1 Corinthians verse sets in a readable
   measure instead of running the full width of a wide screen. */
.site-footer-scripture {
    max-width: 44rem;
    margin: 0.9rem auto 0;
}

.site-footer-scripture p {
    font-size: 0.85rem;
    font-style: italic;
    line-height: 1.5;
}

.site-footer-scripture-ref {
    margin-bottom: 0.6rem !important;
    font-style: normal !important;
    color: #94a3b8;
}

.site-footer-scripture-ref:last-child {
    margin-bottom: 0 !important;
}

.site-footer-links {
    margin-top: 0.6rem !important;
    font-size: 0.8rem !important;
}

.site-footer-links a {
    color: #cbd5e1;
    text-decoration: underline;
}

.site-footer-links a:hover {
    color: #ffffff;
}

@media (max-width: 640px) {
    .hero-cta-row {
        flex-direction: column;
    }
}

.card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.card-header-actions {
    justify-content: flex-end;
}

.card-header-action-form {
    margin: 0;
}

.card-header-action-form button:not(.link-button) {
    margin-top: 0;
    margin-bottom: 0;
}

.notification-settings-form {
    display: block;
}
.notification-settings-form + .notification-settings-form {
    margin-top: 1rem;
}

.notification-block-title {
    margin: 0;
}
.notification-setup-collapsible {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.65rem 0.8rem;
    background: #f8fafc;
}

.notification-setup-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}

.notification-setup-summary::-webkit-details-marker {
    display: none;
}

.notification-setup-summary::after {
    content: "▸";
    font-size: 1.3rem;
    font-weight: 900;
    color: #1f2937;
    transform: rotate(0deg);
    transition: transform 0.15s ease;
}

.notification-setup-collapsible[open] .notification-setup-summary::after {
    transform: rotate(90deg);
}

.notification-setup-body {
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px solid #e5e7eb;
}

.notification-setup-actions {
    margin-top: 0.8rem;
}

.service-area-collapsible {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.65rem 0.8rem;
    background: #f8fafc;
    margin-bottom: 0.8rem;
}

.service-area-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}

.service-area-summary::-webkit-details-marker {
    display: none;
}

.service-area-summary::after {
    content: "▸";
    font-size: 1.3rem;
    font-weight: 900;
    color: #1f2937;
    transform: rotate(0deg);
    transition: transform 0.15s ease;
}

.service-area-collapsible[open] .service-area-summary::after {
    transform: rotate(90deg);
}

.service-area-collapsible > .service-area-details-body {
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px solid #e5e7eb;
}

.service-area-edit-link {
    font-weight: 600;
}

.service-area-summary-card {
    margin: 0.6rem 0;
}

.service-area-summary-card h4 {
    margin-top: 0;
}

.notification-setup-actions button:not(.link-button) {
    margin-top: 0;
}

.notification-block.separated {
    margin-top: 2rem;
    padding-top: 1.4rem;
    border-top: 1px solid #e5e7eb;
}

.notification-block .form-grid {
    margin-top: 0.75rem;
}

.email-provider-fields,
.sms-provider-fields {
    display: none;
}
.schedule-datetime-field {
    width: 100%;
}

.schedule-slot-form {
    grid-template-columns: minmax(220px, 280px) minmax(340px, 1fr);
    align-items: start;
}

.schedule-slot-left-column,
.schedule-slot-right-column {
    display: grid;
    gap: 0.8rem;
    align-content: start;
}

.schedule-slot-right-column {
    justify-items: start;
}

.schedule-slot-right-column .schedule-datetime-field {
    max-width: 460px;
}

.schedule-slot-right-column .actions.schedule-slot-actions {
    align-self: start;
    justify-self: start;
}

.quarter-datetime {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: nowrap;
}

.quarter-datetime .quarter-datetime-date {
    width: 10.5rem;
    min-width: 10.5rem;
}

.quarter-datetime .quarter-datetime-time {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
    width: fit-content;
}

.quarter-datetime .quarter-datetime-hour,
.quarter-datetime .quarter-datetime-minute {
    min-width: 4.25rem;
}

.quarter-datetime .quarter-datetime-colon {
    font-weight: 700;
}

@media (max-width: 860px) {
    .schedule-slot-form {
        grid-template-columns: 1fr;
    }
}
.email-provider-fields.active,
.sms-provider-fields.active {
    display: block;
}


.card.narrow {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

.forgot-password-link {
    margin: -0.4rem 0 0.2rem;
    font-size: 0.85rem;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.8rem;
}

.notification-test-grid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
}

.notification-test-grid .notification-test-sms-provider {
    grid-column: 1;
}

.notification-test-grid .notification-test-phone {
    grid-column: 2;
}

label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.95rem;
}

label.checkbox-label {
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
    padding-top: 1.9rem;
}

label.checkbox-label input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
}

input,
select,
textarea,
button {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.55rem 0.65rem;
    font-size: 0.95rem;
    font-family: inherit;
}

textarea {
    resize: vertical;
}

button {
    background: #2563eb;
    color: white;
    border-color: #2563eb;
    cursor: pointer;
    font-weight: 700;
}

button.secondary {
    background: #475569;
    border-color: #475569;
}

button.danger {
    background: #dc2626;
    border-color: #dc2626;
}

button:hover {
    filter: brightness(0.95);
}

button:not(.link-button) {
    margin-top: 10px;
    margin-bottom: 10px;
}

.actions {
    align-self: end;
}

.blocked-entry-interest-detail {
    text-align: left;
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 0.4rem;
}

.signup-consent-block {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.5rem;
}

.signup-consent-text {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.45;
    color: #1f2937;
}

.signup-consent-checkbox-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.55rem;
    font-weight: 400;
    font-size: 0.95rem;
}

.signup-consent-checkbox-row input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin-top: 0.12rem;
    flex: 0 0 auto;
}

.signup-consent-checkbox-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.signup-consent-save-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}

.signup-consent-save-column .consent-submit-button {
    margin: 0;
}

.signup-consent-checkbox-actions > .signup-consent-checkbox-row {
    flex: 1 1 420px;
}

.remember-details-row {
    max-width: 360px;
    line-height: 1.35;
    flex: 0 0 auto;
}

.remember-details-row span {
    font-size: 8pt;
    font-style: italic;
}

.consent-submit-button:disabled {
    background: #9ca3af;
    border-color: #9ca3af;
    color: #e5e7eb;
    cursor: not-allowed;
}

.consent-submit-button:disabled:hover {
    filter: none;
}

.signup-form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    align-self: start;
    margin-top: 0.1rem;
}

.muted {
    color: #6b7280;
    font-size: 0.9rem;
}

.host-source-tag {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    margin: 0 0.25rem 0.15rem 0;
    border-radius: 999px;
    background: #eef2f9;
    color: #2563eb;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.host-instructions {
    color: #000000;
}

.policy-page {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.policy-page h3 {
    margin-top: 1.8rem;
    scroll-margin-top: 1rem;
}

.policy-page ul.host-instructions {
    padding-left: 1.4rem;
    margin: 0.4rem 0 1rem;
}

.policy-page ul.host-instructions li {
    margin-bottom: 0.4rem;
}

.policy-toc {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin: 1.2rem 0;
}

.policy-toc p {
    margin: 0 0 0.4rem;
}

.policy-toc ul {
    margin: 0;
    padding-left: 1.2rem;
    columns: 2;
    column-gap: 1.5rem;
}

.policy-toc li {
    margin-bottom: 0.3rem;
    break-inside: avoid;
}

.admin-subnav {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.6rem 0.7rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.admin-subnav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    color: #374151;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.admin-subnav-link:hover {
    background: #f3f4f6;
}

.admin-subnav-link.active {
    background: #111827;
    color: #fff;
}

.admin-subnav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

.admin-subnav-link.active .admin-subnav-badge {
    background: #fff;
    color: #b91c1c;
}

.status-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

.status-badge.locked {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #f87171;
}

.status-badge.active {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #34d399;
}

.otp-resend-form {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid #e5e7eb;
}

.auth-loading-indicator {
    margin-top: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #475569;
    font-size: 0.9rem;
    font-weight: 600;
}

.auth-loading-indicator[hidden] {
    display: none !important;
}

.auth-loading-spinner {
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    border: 2px solid #cbd5e1;
    border-top-color: #2563eb;
    animation: auth-spinner-rotate 0.8s linear infinite;
}

@keyframes auth-spinner-rotate {
    to {
        transform: rotate(360deg);
    }
}

.alert {
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.8rem;
    border: 1px solid transparent;
}

.alert ul {
    margin: 0;
    padding-left: 1.1rem;
}

.alert.success {
    background: #ecfdf5;
    border-color: #34d399;
}

.alert.error {
    background: #fef2f2;
    border-color: #f87171;
}

.alert.info {
    background: #eff6ff;
    border-color: #60a5fa;
}

.flash-status-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.22);
    pointer-events: none;
}

.flash-status-modal-card {
    position: relative;
    width: min(640px, 100%);
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
    padding: 1.1rem 2.6rem 0.9rem 1.1rem;
    pointer-events: auto;
}

.flash-status-modal-body .alert {
    margin-bottom: 0.6rem;
}

.flash-status-modal-body .alert:last-child {
    margin-bottom: 0;
}

.flash-status-modal-close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    border: 0;
    border-radius: 999px;
    width: 2rem;
    height: 2rem;
    padding: 0;
    margin: 0;
    background: transparent;
    color: #475569;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.flash-status-modal-close:hover {
    background: #eef2ff;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.65rem 0.4rem;
    vertical-align: top;
}

.upcoming-slots-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.upcoming-slots-header h2 {
    margin: 0;
}

.upcoming-slots-sort-control {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.92rem;
    font-weight: 600;
    white-space: nowrap;
}

.upcoming-slots-sort-control select {
    min-width: 11rem;
    margin: 0;
}

.upcoming-slots-instructions {
    margin-top: 0.65rem;
    font-size: 1.02rem;
    line-height: 1.5;
}

.service-area-form {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.9rem;
    margin: 0.8rem 0;
}

.service-area-actions {
    justify-content: space-between;
}

.church-affiliation-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.6rem 0;
}

.church-affiliation-field label {
    margin: 0;
}

.church-affiliation-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 260px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    padding: 0.4rem 0;
    margin-top: 0.2rem;
}

.church-affiliation-dropdown[hidden] {
    display: none !important;
}

.church-affiliation-group[hidden] {
    display: none !important;
}

.church-affiliation-group-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    padding: 0.35rem 0.7rem 0.15rem;
}

.church-affiliation-option {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0.4rem 0.7rem;
    margin: 0;
    font-weight: 400;
    font-size: 0.92rem;
    color: #1f2937;
    cursor: pointer;
}

.church-affiliation-option[hidden] {
    display: none !important;
}

.church-affiliation-option:hover {
    background: #eff6ff;
}

.church-affiliation-empty {
    padding: 0.4rem 0.7rem;
    margin: 0;
    color: #6b7280;
    font-size: 0.88rem;
}

.church-affiliation-other-row {
    margin-top: 0.3rem;
}

/* The bare label{display:flex} rule outranks the browser's own
   [hidden]{display:none}, so without this guard the "Other church name" row
   stayed on screen even when a specific church was selected - on the admin
   Groups page as well as the host application. Same fix already applied to
   .modal-backdrop[hidden] and .church-pager[hidden]. */
.church-affiliation-other-row[hidden] {
    display: none;
}

/* The shared macro carries a vertical margin for the stacked admin layout. Left
   in place here it pushes the picker - and the Other church name field beside
   it - 9.6px below the phone/email row they share, so none of the labels or
   inputs line up. The form grid's own gap already provides that spacing. */
.host-group-page .church-affiliation-field {
    margin: 0;
}

.host-message-field textarea {
    height: 100%;
    min-height: 6rem;
}

/* grid-column:span N forces the auto-fit grid to reserve N tracks even on a
   narrow viewport where they'd overflow, so the span is scoped to widths
   that actually have room for it - on mobile the field just stacks normally. */
@media (min-width: 640px) {
    .host-message-field {
        grid-column: 1 / -1;
    }

    /* Host application only: put "Other church name" beside the affiliation
       picker rather than under it. Scoped to this page because the macro is
       shared with the admin Groups page, which keeps the stacked layout. */
    .host-group-page .church-affiliation-field {
        flex-direction: row;
        gap: 0.8rem;
        align-items: flex-start;
    }

    .host-group-page .church-affiliation-field > label {
        flex: 1 1 0;
        min-width: 0;
    }

    .host-group-page .church-affiliation-other-row {
        margin-top: 0;
    }

    /* Claim the second track only while the Other field is actually showing.
       Otherwise the picker would stretch to double width over empty space
       instead of lining up with the name and email fields above it. */
    .host-group-page .church-affiliation-field:has(.church-affiliation-other-row:not([hidden])) {
        grid-column: span 2;
    }

    /* ...and keep the dropdown under the picker rather than letting it stretch
       across the Other field too. */
    .host-group-page .church-affiliation-field:has(.church-affiliation-other-row:not([hidden])) .church-affiliation-dropdown {
        right: auto;
        width: calc(50% - 0.4rem);
    }
}

.form-row-pair {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.2rem;
    align-items: flex-start;
}

.interest-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.9rem;
    align-items: flex-end;
    margin-bottom: 0.6rem;
}

.interest-form-row > label,
.interest-form-row > .multi-select-field {
    flex: 1 1 160px;
    min-width: 140px;
    font-size: 0.8rem;
    gap: 0.25rem;
}

.interest-form-row input {
    font-size: 0.85rem;
    padding: 0.4rem 0.5rem;
}

.interest-form-row .actions-inline {
    flex: 0 0 auto;
}

.multi-select-field {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
}

.multi-select-field label {
    margin: 0;
    font-weight: 600;
    font-size: 0.8rem;
}

button.multi-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    background: #ffffff;
    color: #1f2937;
    font-weight: 400;
    font-size: 0.85rem;
    padding: 0.4rem 0.5rem;
    margin: 0;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
}

.multi-select-trigger-chevron {
    color: #64748b;
    font-size: 0.7rem;
}

.multi-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 240px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    padding: 0.3rem 0;
    margin-top: 0.2rem;
}

.multi-select-dropdown[hidden] {
    display: none !important;
}

.multi-select-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.7rem;
    margin: 0;
    font-weight: 400;
    font-size: 0.85rem;
    color: #1f2937;
    cursor: pointer;
}

.multi-select-option:hover {
    background: #eff6ff;
}

.multi-select-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

.multi-select-checkmark {
    width: 1rem;
    flex: 0 0 auto;
    visibility: hidden;
    color: #2563eb;
    font-weight: 700;
}

.multi-select-option input[type="checkbox"]:checked + .multi-select-checkmark {
    visibility: visible;
}

.selected-format-focus-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0.3rem 0 0.8rem;
    font-size: 0.8rem;
    color: #475569;
}

.selected-format-focus-item::before {
    content: "✓ ";
    color: #2563eb;
    font-weight: 700;
}

.host-review-city-title {
    margin: 1.4rem 0 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
}

.host-review-city-title:first-of-type {
    margin-top: 0.6rem;
    padding-top: 0;
    border-top: none;
}

.church-review-contacts {
    margin-bottom: 0.4rem;
}

/* The HTML `hidden` attribute is only `display: none` in the browser's default
   stylesheet, so ANY author `display` rule silently beats it - .form-grid uses
   `display: grid`, which left "hidden" edit forms fully visible on screen.
   Every element below is toggled via [hidden] and sets its own display, so the
   rule has to be restated here. */
.church-detail-form[hidden],
.church-detail-lines[hidden],
.review-contacts-form[hidden],
.review-contacts-view[hidden],
.review-contacts-list[hidden],
.church-pager[hidden],
.church-export-bar[hidden],
.church-review-block[hidden] {
    display: none;
}

/* ---------------------------------------------------------- text messages --- */
.sms-webhook-url {
    display: inline-block;
    padding: 0.35rem 0.6rem;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.85rem;
    word-break: break-all;
}

.textbee-webhook-help {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    line-height: 1.6;
}

.sms-layout {
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: 1rem;
    align-items: start;
}

.sms-thread-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 32rem;
    overflow-y: auto;
}

.sms-thread-item {
    display: block;
    padding: 0.55rem 0.7rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    text-decoration: none;
}

.sms-thread-item:hover {
    background: #f8fafc;
}

.sms-thread-item.is-selected {
    border-color: #2563eb;
    background: #eff5ff;
}

.sms-thread-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.sms-thread-name {
    font-weight: 600;
}

.sms-thread-phone,
.sms-thread-preview {
    font-size: 0.85rem;
    color: #64748b;
}

.sms-thread-preview {
    margin-top: 0.15rem;
    overflow-wrap: anywhere;
}

.sms-unread-dot {
    flex-shrink: 0;
    min-width: 1.25rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.sms-optout-tag {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 0.72rem;
    font-weight: 600;
}

.sms-thread-detail {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.8rem;
    min-height: 12rem;
}

.sms-detail-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #e2e8f0;
}

.sms-optout-banner {
    margin: 0.6rem 0 0;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 0.9rem;
}

.sms-messages {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.8rem;
    max-height: 26rem;
    overflow-y: auto;
}

.sms-bubble {
    max-width: 80%;
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    font-size: 0.9rem;
}

.sms-inbound {
    align-self: flex-start;
    background: #f1f5f9;
    color: #0f172a;
}

.sms-outbound {
    align-self: flex-end;
    background: #2563eb;
    color: #fff;
}

.sms-body {
    /* Inbound text is untrusted - Jinja escapes it; this only preserves the
       sender's own line breaks. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.sms-meta {
    margin-top: 0.2rem;
    font-size: 0.72rem;
    opacity: 0.7;
}

.sms-reply-note {
    margin: 0.8rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px solid #e2e8f0;
    font-size: 0.85rem;
}

.sms-reply-form {
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px solid #e2e8f0;
}

.sms-reply-label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
}

.sms-reply-form textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: inherit;
    font-size: 0.9rem;
    resize: vertical;
}

.sms-reply-form textarea:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
    border-color: #2563eb;
}

.sms-reply-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.sms-reply-count {
    font-size: 0.8rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .sms-reply-form textarea {
        min-height: 5rem;
    }

    .sms-reply-actions button {
        min-height: 44px;
    }
}

@media (max-width: 760px) {
    .sms-layout {
        grid-template-columns: 1fr;
    }

    .sms-thread-list {
        max-height: 18rem;
    }
}

.church-export-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.5rem 0 0.9rem;
}

.church-search-input {
    flex: 0 1 22rem;
    min-width: 12rem;
    min-height: 40px;
    padding: 0.45rem 0.7rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    color: #0f172a;
    background: #fff;
}

.church-search-input:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
    border-color: #2563eb;
}

.church-export-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.church-search-empty {
    margin: 0.5rem 0 0.9rem;
    color: #64748b;
    font-style: italic;
}

.church-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.9rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.9rem;
    color: #475569;
}

/* The second (bottom-of-list) pager sits under the last church, so it needs
   breathing room above and its divider on top rather than underneath. */
.church-pager + .church-pager,
.church-review-block + .church-pager,
.host-review-city-title ~ .church-pager:last-child {
    margin-top: 0.9rem;
    padding-top: 0.6rem;
    padding-bottom: 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: none;
}

.church-pager-size {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.church-pager-size select {
    min-height: 36px;
    padding: 0.25rem 0.4rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font: inherit;
    background: #fff;
    color: #0f172a;
}

.church-pager-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.church-pager-status {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.church-pager-button {
    min-height: 36px;
    padding: 0.35rem 0.8rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    color: #2563eb;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.church-pager-button:hover:not(:disabled),
.church-pager-button:focus-visible:not(:disabled) {
    background: #eef2f9;
    border-color: #b9c8dd;
}

.church-pager-button:disabled {
    color: #94a3b8;
    background: #f1f5f9;
    cursor: default;
}

@media (max-width: 640px) {
    .church-pager {
        justify-content: flex-start;
    }

    .church-pager-nav {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    .church-pager-button {
        min-height: 44px;
    }
}

.church-export-toggle {
    margin: 0;
    font-size: 0.9rem;
    white-space: nowrap;
}

.church-export-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0.45rem 0.9rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    color: #2563eb;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.church-export-link:hover,
.church-export-link:focus-visible {
    background: #eef2f9;
    border-color: #b9c8dd;
    text-decoration: none;
}

@media (max-width: 640px) {
    .church-export-bar {
        justify-content: flex-start;
    }

    .church-search-input {
        flex: 1 1 100%;
        min-height: 44px;
    }

    .church-export-actions {
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    .church-export-link {
        min-height: 44px;
        flex: 1 1 auto;
        justify-content: center;
    }
}

.church-review-block {
    padding: 0.6rem 0 0.8rem;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0.5rem;
}

.church-review-heading {
    font-weight: 600;
    font-size: 1rem;
    color: #0f172a;
}

.church-detail-record {
    padding: 0.35rem 0 0.4rem;
}

.church-detail-lines {
    /* Row padding + icon column, so the plain-text pastor line can be indented
       to start exactly where the linked rows' text starts. */
    --detail-row-pad: 0.7rem;
    --detail-icon-col: 1.25rem;
    --detail-icon-gap: 0.55rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: #334155;
    margin-top: 0.35rem;
}

/* The pastor line is plain text - keep it inline-sized so it doesn't read as
   a tap target next to the linked rows below it. */
.church-detail-lines > div {
    padding: 0.15rem 0;
}

/* Pastor line keeps a row to itself, indented so the "P" starts exactly where
   the linked rows' text starts (past the row padding and the icon column). */
.church-detail-pastors {
    flex: 1 0 100%;
    padding-left: calc(var(--detail-row-pad) + var(--detail-icon-col) + var(--detail-icon-gap));
}

/* Linked rows are full-width tap targets: >=44px tall per the iOS/Android
   minimum, so these are comfortable to hit with a thumb on a phone. */
.church-detail-lines a {
    display: flex;
    align-items: center;
    /* Size to content so the links share one line, wrapping as needed. */
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0.55rem var(--detail-row-pad);
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    background: #f8fafc;
    color: #2563eb;
    text-decoration: none;
    word-break: break-word;
    line-height: 1.3;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.church-detail-lines a::before {
    width: var(--detail-icon-col);
    margin-right: var(--detail-icon-gap);
    font-size: 1rem;
    text-align: center;
    flex-shrink: 0;
}

.church-detail-lines a[href^="tel:"]::before { content: "📞"; }
.church-detail-lines a[href^="mailto:"]::before { content: "✉️"; }
.church-detail-lines a[href*="maps.google.com"]::before { content: "📍"; }
.church-detail-lines a[target="_blank"]:not([href*="maps.google.com"])::before { content: "🌐"; }

.church-detail-lines a:hover,
.church-detail-lines a:focus-visible {
    background: #eef2f9;
    border-color: #b9c8dd;
    text-decoration: none;
}

.church-detail-lines a:active {
    background: #e2e8f0;
}

@media (max-width: 640px) {
    .church-detail-lines {
        /* Bumping the row padding here keeps the pastor-line indent in step,
           since both sides read the same variable. */
        --detail-row-pad: 0.8rem;
        font-size: 0.95rem;
        gap: 0.35rem;
    }

    .church-detail-lines a {
        /* Back to one per row on phones - full-width targets are easier to hit
           and long addresses/URLs get the room to stay readable. */
        flex: 1 0 100%;
        min-height: 48px;
        padding: 0.7rem var(--detail-row-pad);
    }
}

.church-detail-edit-toggle {
    margin-bottom: 0.15rem;
}

.church-detail-form {
    margin-top: 0.5rem;
}

.review-contacts-block {
    padding-top: 0.3rem;
}

.review-contacts-edit-toggle {
    margin-bottom: 0.3rem;
}

.review-contacts-list {
    list-style: none;
    margin: 0.2rem 0 0.3rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.9rem;
    color: #334155;
}

.review-contacts-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid #eef2f7;
}

.review-contacts-list li:last-child {
    border-bottom: none;
}

.review-contact-name {
    font-weight: 600;
}

.review-contacts-list a {
    color: #2563eb;
    text-decoration: none;
}

.review-contacts-list a:hover {
    text-decoration: underline;
}

.review-contact-tag {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    background: #e2e8f0;
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
}

.review-contacts-form {
    margin-top: 0.5rem;
}

.review-contacts-church-admin-label {
    grid-column: 1 / -1;
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0.5rem 0 0.25rem;
    text-align: right;
}

.password-checklist {
    list-style: none;
    margin: 0.2rem 0 0.8rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.82rem;
    color: #6b7280;
}

.password-checklist li::before {
    content: "○ ";
}

.password-checklist li.password-rule-met {
    color: #15803d;
}

.password-checklist li.password-rule-met::before {
    content: "✓ ";
    font-weight: 700;
}

.reference-fieldset {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.8rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 1rem;
}

.reference-fieldset legend {
    font-weight: 700;
    padding: 0 0.4rem;
}

.form-row-pair > label,
.form-row-pair > .field-group {
    flex: 1 1 220px;
    min-width: 200px;
    margin: 0;
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.6rem 0;
}

.field-group-label {
    font-weight: 600;
    font-size: 0.95rem;
}

.radio-row,
.checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
}

/* My Home Group's self-service create form: force each paired row (and the
   submit button) to span the form-grid's full width as its own row, instead
   of being auto-placed into a narrow column next to a much taller sibling
   (e.g. the long Format & focus checkbox list) - that's what was stretching
   the submit button to match that tall row's height. */
.home-group-create-form > .form-row-pair,
.home-group-create-form > .actions {
    grid-column: 1 / -1;
}

.home-group-create-form > .actions {
    margin-top: 0.4rem;
}

.radio-option,
.checkbox-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    font-weight: 400;
    font-size: 0.92rem;
}

.radio-option input,
.checkbox-option input {
    width: 1rem;
    height: 1rem;
    margin: 0;
}

.checkbox-option:has(input:disabled) {
    color: #9ca3af;
}

.management-block {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.9rem;
    margin: 0.8rem 0;
}

.management-block h3 {
    margin: 0 0 0.65rem;
}

.users-form-grid {
    align-items: start;
}
.users-create-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.users-form-grid h3 {
    grid-column: 1 / -1;
}

.users-form-grid input[type="text"],
.users-form-grid input[type="email"] {
    text-align: left;
}

.users-form-grid > label:not(.checkbox-label) {
    display: grid;
    grid-template-rows: minmax(2.4rem, auto) auto;
    align-content: start;
    gap: 0.35rem;
}

.users-field-label {
    display: flex;
    align-items: flex-end;
    line-height: 1.2;
}

.users-form-grid > label.checkbox-label.compact {
    padding-top: 2.45rem;
}

.users-password-stack {
    display: grid;
    gap: 0.35rem;
    align-content: start;
}
.users-password-stack > label:not(.checkbox-label) {
    display: grid;
    grid-template-rows: minmax(2.4rem, auto) auto;
    align-content: start;
    gap: 0.35rem;
    margin: 0;
}

.users-password-stack .users-reveal-row {
    padding-top: 0;
    align-self: start;
}
.users-save-active-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

.users-create-actions-row {
    grid-column: 2 / 4;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

.users-create-actions-row .actions {
    align-self: auto;
}

.users-save-active-row .actions {
    align-self: auto;
}

.users-active-inline {
    padding-top: 0;
    margin: 0;
}

.users-panel-footer {
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.users-panel-footer .remove-user-form {
    margin-left: auto;
}

.promote-church-admin-form {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.promote-church-select-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.users-left-input {
    text-align: left;
}

@media (max-width: 640px) {
    .topbar {
        padding: 0 1rem;
    }

    .site-logo {
        width: 68px;
    }

    .topbar h1 {
        font-size: 1rem;
    }

    .topbar nav {
        width: 100%;
        justify-content: flex-start;
        gap: 0.8rem;
    }
    .notification-test-grid {
        grid-template-columns: 1fr;
    }

    .notification-test-grid .notification-test-sms-provider,
    .notification-test-grid .notification-test-phone {
        grid-column: auto;
    }

    .upcoming-slots-header {
        align-items: flex-start;
    }

    .upcoming-slots-sort-control {
        width: 100%;
        justify-content: flex-start;
        white-space: normal;
    }

    .upcoming-slots-sort-control select {
        min-width: 0;
        width: 100%;
    }
    .users-create-form {
        grid-template-columns: 1fr;
    }

    .users-create-actions-row {
        grid-column: 1 / -1;
    }
}

.remove-user-button {
    padding: 0.7rem 1rem;
    margin: 0.15rem 0.2rem;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-backdrop[hidden] {
    display: none !important;
}

.modal-card {
    width: min(560px, 100%);
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem 1.1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.modal-card h3 {
    margin: 0 0 0.5rem;
}

.modal-card p {
    margin: 0 0 0.9rem;
}

.template-link-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 0;
    padding: 0;
    margin: 0.2rem 0 0.7rem;
    color: #2563eb;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: underline;
    cursor: pointer;
}

.template-link-button:hover {
    color: #1d4ed8;
}

.template-preview-button {
    margin-top: -0.3rem;
}

/* These two panels (message variables + message preview) are reference
   helpers meant to stay open alongside the form, not blocking dialogs - no
   dimming, and clicks pass through to the page except over the panel itself
   (see pointer-events below). Deliberately separate from .modal-backdrop /
   .modal-card, which other, genuinely-blocking confirmation dialogs
   (remove-team, schedule-short-notice) still use unchanged. */
.floating-panel-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
}

.floating-panel-backdrop[hidden] {
    display: none !important;
}

.floating-panel-card {
    position: fixed;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 2rem));
    max-height: min(80vh, 640px);
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem 1.1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    pointer-events: auto;
}

.template-vars-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    cursor: move;
    user-select: none;
}

.template-vars-modal-close {
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    color: #475569;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.template-vars-modal-close:hover {
    background: #eef2ff;
}

.template-vars-list {
    margin: 0 0 0.9rem;
    padding-left: 1.2rem;
}

.template-vars-list li {
    margin-bottom: 0.35rem;
}

.copy-list-status {
    margin-left: 0.6rem;
    font-size: 0.85rem;
}

.template-preview-body {
    white-space: pre-wrap;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
    font-size: 0.95rem;
}

.consent-checkbox-label {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.55rem;
    font-weight: 400;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #1f2937;
}

.consent-checkbox-label input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin-top: 0.15rem;
    flex: 0 0 auto;
}

#contact-hosts-submit-button:disabled {
    background: #bfdbfe;
    border-color: #bfdbfe;
    color: #1e40af;
    cursor: not-allowed;
}

#contact-hosts-submit-button:disabled:hover {
    filter: none;
}

.short-notice-modal-card {
    max-width: 540px;
}

.short-notice-modal-actions {
    justify-content: flex-end;
    gap: 0.65rem;
}

.short-notice-modal-actions button:not(.link-button) {
    margin: 0;
}

.permission-grid {
    margin-top: 0.8rem;
}

.permission-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto auto;
    gap: 0.8rem;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.4rem 0.2rem;
}

.permission-label {
    font-weight: 600;
}

.actions-inline {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.detail-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1rem;
    margin: 0 0 1rem;
}

.detail-list dt {
    font-weight: 600;
    color: #475569;
}

.detail-list dd {
    margin: 0;
}

.bar-chart {
    display: grid;
    grid-template-rows: auto 180px auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(64px, 1fr);
    column-gap: 0.6rem;
    padding: 0.5rem 0.25rem 0;
    margin-bottom: 1.2rem;
    overflow-x: auto;
}

/* grid-template-rows fixes the bar track to the same height/position in every
   column, so a label's line count (1 word vs several) can never shift where a
   bar's baseline sits - labels only ever grow the (independent) row below it. */
.bar-chart-track {
    display: flex;
    align-items: flex-end;
    justify-self: center;
    align-self: end;
    height: 180px;
}

.bar-chart-value {
    justify-self: center;
    align-self: end;
    font-size: 0.75rem;
    font-weight: 700;
    color: #52514e;
    margin-bottom: 0.25rem;
}

.bar-chart-bar {
    width: 28px;
    background: #2563eb;
    border-radius: 4px 4px 0 0;
    min-height: 2px;
}

.bar-chart-label {
    justify-self: center;
    align-self: start;
    margin-top: 0.4rem;
    font-size: 0.7rem;
    color: #898781;
    text-align: center;
    line-height: 1.15;
    width: 100%;
}

.checkbox-label.compact {
    padding-top: 0;
    font-weight: 600;
}

.right {
    text-align: right;
}

.action-link {
    display: inline-block;
    border-radius: 8px;
    padding: 0.48rem 0.72rem;
    text-decoration: none;
    font-weight: 700;
    color: #ffffff;
}

.action-link.green {
    background: #16a34a;
}

.slot-select-link {
    font-size: 0.82rem;
    white-space: nowrap;
}
.slot-action-hidden {
    display: none !important;
}

.action-link.green:hover {
    background: #15803d;
    text-decoration: none;
}

.action-link.disabled {
    background: #9ca3af;
    color: #f9fafb;
    cursor: not-allowed;
}

.home-group-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

/* Area chooser at the domain root - same card grid as the group directory so
   the two read as one family. Whole card is the link rather than just the
   heading, which is a much larger tap target on a phone. */
.area-directory-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.area-directory-card {
    display: block;
    margin-bottom: 0;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.area-directory-card:hover,
.area-directory-card:focus-visible {
    border-color: #2563eb;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.18);
}

.area-directory-card h3 {
    margin-top: 0;
    color: #1d4ed8;
}

.home-group-card {
    margin-bottom: 0;
}

.home-group-card h3 {
    margin-top: 0;
    margin-bottom: 0.4rem;
}

.home-group-card-address {
    font-size: 0.9rem;
    color: #4b5563;
}

.home-group-card-church {
    font-size: 0.9rem;
}

.publish-status-tag {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    margin-left: 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}

.publish-status-tag.is-published {
    background: #dcfce7;
    color: #15803d;
}

.publish-status-tag.is-unpublished {
    background: #fef3c7;
    color: #b45309;
}

.service-area-public-preview {
    margin: 0.6rem 0 1rem;
    padding: 0.8rem;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
}

.service-area-public-preview-label {
    margin-top: 0;
}

.home-group-map {
    margin-top: 0.6rem;
    border-radius: 8px;
    overflow: hidden;
}

.home-group-header-card .home-group-bio {
    font-size: 1.05rem;
}

.home-group-header-card .home-group-description {
    white-space: pre-line;
}