:root { --church-navy: #4b3025; --church-blue: #8b5e3c; --church-brown-dark: #3a251c; --church-brown-light: #f4ebe3; --church-ink: #2d241f; --bs-primary: #8b5e3c; --bs-primary-rgb: 139, 94, 60; --bs-link-color: #79502f; --bs-link-hover-color: #4b3025; --bs-focus-ring-color: rgb(139 94 60 / 25%); }
body { background: #f8fafc; color: var(--church-ink); min-height: 100vh; }
.bg-primary { background-color: var(--church-navy) !important; }
.text-primary { color: var(--church-blue) !important; }
.btn-primary { color: #fff; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--church-brown-dark); border-color: var(--church-brown-dark); }
.btn-outline-primary { color: var(--church-blue); border-color: var(--church-blue); }
.btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--church-blue); border-color: var(--church-blue); color: #fff; }
.form-check-input:checked { background-color: var(--church-blue); border-color: var(--church-blue); }
.btn-primary { background-color: var(--church-blue); border-color: var(--church-blue); }
.hero { color: #fff; background: linear-gradient(125deg, #3a251c, #8b5e3c); }
.hero-icon { font-size: 8rem; line-height: 1; opacity: .8; }
.event-card { border: 1px solid #e2e8f0; border-radius: 1rem; box-shadow: 0 2px 8px rgb(15 23 42 / 3%); }
.event-card .card-body { padding: 1.25rem; }
.feature-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.5rem; }
.date-tile { background: var(--church-brown-light); color: var(--church-brown-dark); border-radius: .8rem; padding: .6rem .2rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.date-tile span, .date-tile small { text-transform: uppercase; font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.date-tile strong { font-size: 1.8rem; line-height: 1.25; }
footer { margin-top: auto; }
.offline-page { display: grid; place-items: center; padding: 2rem; }
.offline-page main { max-width: 32rem; background: white; padding: 2rem; border-radius: 1rem; }
@media print { nav, footer, button { display: none !important; } body { background: #fff; } .event-card { box-shadow: none; break-inside: avoid; } }

.hero { background-color: #4b3025; color: #fff; background-repeat: no-repeat; }
.hero a { text-decoration: none; }
@media print { nav, footer, button, .btn { display: none !important; } body { background: #fff; } }

/* iOS installed PWA: extend the brown navigation background into the status-bar safe area. */
@media (display-mode: standalone) {
  .navbar { padding-top: calc(.5rem + env(safe-area-inset-top)); }
}

/* Calendar views and event categories */
.calendar-grid{border:1px solid var(--bs-border-color);border-radius:.75rem;overflow:hidden;background:#fff}.calendar-weekdays,.calendar-cells{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.calendar-weekdays{background:#f4ebe3;font-weight:700;text-align:center}.calendar-weekdays>div{padding:.65rem .25rem;border-right:1px solid #e5d8ce}.calendar-day{min-width:0;min-height:110px;padding:.4rem;border-top:1px solid #e5d8ce;border-right:1px solid #e5d8ce;overflow:hidden}.calendar-day.outside{background:#faf8f6}.calendar-day-number{font-size:.8rem;font-weight:700;margin-bottom:.35rem}.calendar-event{display:block;border-radius:.3rem;padding:.22rem .3rem;margin:.2rem 0;font-size:.72rem;line-height:1.25;overflow-wrap:anywhere}.calendar-event span{font-weight:700}.calendar-event-block{padding:.5rem;margin:.35rem 0;border-radius:.4rem;font-size:.8rem;overflow-wrap:anywhere}.event-public{background:#e7efe4;border-color:#6c8b61!important;color:#254a24}.event-ministry{background:#f6e5c9;border-color:#b67b27!important;color:#65400b}.event-members{background:#e9e0f2;border-color:#8562a8!important;color:#4a2d67}.event-legend{display:inline-block;width:.8rem;height:.8rem;border-radius:.2rem;margin-right:.35rem;vertical-align:-.08rem}.calendar-week .calendar-day{min-height:220px}.calendar-week .calendar-day-number{font-size:.85rem}.calendar-month .calendar-day{min-height:105px}@media(max-width:700px){.calendar-day{min-height:80px;padding:.2rem}.calendar-weekdays>div{font-size:.7rem}.calendar-event{font-size:.62rem;padding:.15rem}.calendar-month .calendar-day{min-height:78px}.calendar-week .calendar-cells{grid-template-columns:1fr}.calendar-week .calendar-weekdays{display:none}.calendar-week .calendar-day{min-height:0;padding:.65rem}.calendar-week .calendar-day-number{font-size:1rem}}@media print{nav,.btn,.calendar-legend{display:none!important}.calendar-day{break-inside:avoid}}


/* Calendar v6: explicit seven-column CSS Grid (no external calendar library). */
.calendar-grid{display:block;width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid #e3d5c8;border-radius:.85rem;background:#fff}
.calendar-weekdays,.calendar-cells{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;min-width:720px;width:100%}
.calendar-weekdays{background:#f4ebe3;color:#3a251c;font-weight:700;text-align:center;border-bottom:1px solid #e3d5c8}
.calendar-weekdays>div{padding:.7rem .35rem;border-right:1px solid #e3d5c8}
.calendar-cells{grid-auto-rows:minmax(112px,auto)}
.calendar-day{box-sizing:border-box;min-width:0;min-height:112px;padding:.45rem;border-top:1px solid #e8ded6;border-right:1px solid #e8ded6;overflow-wrap:anywhere;background:#fff}
.calendar-month .calendar-day{min-height:112px}
.calendar-week .calendar-weekdays,.calendar-week .calendar-cells{min-width:980px}
.calendar-week .calendar-cells{grid-auto-rows:minmax(230px,auto)}
.calendar-week .calendar-day{min-height:230px}
.calendar-day.outside{background:#faf7f4}
.calendar-day-number{font-size:.8rem;font-weight:700;margin-bottom:.45rem}
.calendar-event{display:block;width:100%;border:0;border-left:3px solid;border-radius:.3rem;padding:.25rem .3rem;margin:.22rem 0;font-size:.72rem;line-height:1.3;overflow-wrap:anywhere;text-align:left}
.calendar-event-block{display:block;border-left:3px solid;padding:.55rem;margin:.4rem 0;border-radius:.4rem;font-size:.78rem;line-height:1.35;overflow-wrap:anywhere}
.event-public{background:#e7efe4;border-color:#6c8b61!important;color:#254a24}
.event-ministry{background:#f6e5c9;border-color:#b67b27!important;color:#65400b}
.event-members{background:#e9e0f2;border-color:#8562a8!important;color:#4a2d67}
.event-legend{display:inline-block;width:.8rem;height:.8rem;border-radius:.2rem;margin-right:.35rem;vertical-align:-.08rem}
.announcement-image{display:block;max-width:100%;max-height:520px;object-fit:contain;object-position:left center;background:#f8f4f0}

/* Announcement images reserve their intrinsic aspect ratio and show a quiet placeholder while loading. */
.announcement-image.is-loading {
  background: linear-gradient(100deg, #eee6df 8%, #faf7f4 18%, #eee6df 33%);
  background-size: 220% 100%;
  animation: announcement-image-shimmer 1.25s ease-in-out infinite;
}
@keyframes announcement-image-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .announcement-image.is-loading { animation: none; background: #eee6df; }
}

@media(max-width:700px){.calendar-weekdays,.calendar-cells{min-width:720px}.calendar-week .calendar-weekdays,.calendar-week .calendar-cells{min-width:980px}.calendar-day{padding:.35rem}.calendar-day-number{font-size:.75rem}.calendar-event{font-size:.68rem;padding:.22rem}.calendar-week .calendar-cells{grid-auto-rows:minmax(200px,auto)}.calendar-week .calendar-day{min-height:200px}}
@media print{.calendar-grid{overflow:visible}.calendar-weekdays,.calendar-cells,.calendar-week .calendar-weekdays,.calendar-week .calendar-cells{min-width:0}.calendar-day{break-inside:avoid}}

/* Prevent long browser user-agent strings from forcing account device cards wider. */
.min-w-0 { min-width: 0; }

/* App-like shell and bottom tab bar. Safe-area padding is important for iPhone home indicators. */
body.app-shell { min-height: 100vh; min-height: 100svh; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.app-topbar { position: sticky; top: 0; z-index: 1035; background: #fff; border-bottom: 1px solid #eadfd7; box-shadow: 0 2px 10px rgb(58 37 28 / 4%); }
.app-topbar-inner { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: max(16px, env(safe-area-inset-top, 0px)); }
.app-brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--church-navy); font-weight: 750; text-decoration: none; min-width: 0; }
.app-brand img { flex: 0 0 auto; object-fit: contain; }
.app-brand span { overflow-wrap: anywhere; }
.language-switch { display: inline-flex; align-items: center; padding: .22rem; gap: .15rem; flex-shrink: 0; background: #f4ebe3; border-radius: 999px; }
.language-switch a { min-width: 2.5rem; text-align: center; padding: .32rem .65rem; border-radius: 999px; color: #65442f; text-decoration: none; font-size: .78rem; font-weight: 750; }
.language-switch a.active { color: #fff; background: var(--church-blue); box-shadow: 0 1px 3px rgb(0 0 0 / 12%); }
.app-main { flex: 1 0 auto; width: 100%; }
.app-footer { margin-bottom: calc(0px - env(safe-area-inset-bottom)); }
.bottom-tabbar { position: fixed; z-index: 1030; left: 0; right: 0; bottom: 0; padding: .38rem max(.3rem, env(safe-area-inset-left)) calc(.3rem + env(safe-area-inset-bottom)) max(.3rem, env(safe-area-inset-right)); background: rgb(255 255 255 / 96%); border-top: 1px solid #e5d8ce; box-shadow: 0 -4px 18px rgb(58 37 28 / 7%); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.bottom-tabbar-inner { display: grid; grid-template-columns: repeat(var(--tab-count, 5), minmax(0, 1fr)); width: 100%; max-width: 820px; margin: 0 auto; }
.app-tab { min-width: 0; display: flex; min-height: 54px; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; padding: .25rem .1rem; color: #756960; text-decoration: none; border-radius: .8rem; -webkit-tap-highlight-color: transparent; }
.app-tab:hover { color: var(--church-navy); background: #f8f3ef; }
.app-tab.active { color: var(--church-blue); }
.app-tab-icon { height: 1.7rem; display: flex; align-items: center; justify-content: center; font-size: 1.55rem; line-height: 1; font-weight: 500; }
.app-tab-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .67rem; line-height: 1.15; font-weight: 650; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: .7rem; }
.section-link { flex-shrink: 0; font-size: .92rem; font-weight: 650; text-decoration: none; }
.home-announcement-card { border: 1px solid #e9d9cc; border-radius: 1rem; overflow: hidden; box-shadow: 0 4px 18px rgb(58 37 28 / 5%); }
.home-announcement-card .announcement-image { width: 100%; max-height: 290px; object-fit: cover; object-position: center; }
.announcement-preview { overflow-wrap: anywhere; }
.quick-link-card { min-height: 90px; display: flex; align-items: center; gap: .9rem; padding: 1.1rem; border: 1px solid #e8dcd3; border-radius: 1rem; background: #fff; color: var(--church-ink); text-decoration: none; box-shadow: 0 2px 8px rgb(15 23 42 / 3%); }
.quick-link-card:hover { border-color: #b58a6c; color: var(--church-navy); box-shadow: 0 5px 16px rgb(58 37 28 / 7%); }
.quick-link-icon { display: flex; width: 2.9rem; height: 2.9rem; flex: 0 0 2.9rem; align-items: center; justify-content: center; border-radius: .9rem; background: #f4ebe3; color: var(--church-blue); font-size: 1.8rem; }
.quick-link-card strong, .quick-link-card small { display: block; }
.quick-link-card small { margin-top: .2rem; color: #786b62; font-size: .83rem; }
.quick-link-arrow { margin-left: auto; color: var(--church-blue); font-size: 1.3rem; }
.admin-page .card { min-width: 0; border-color: #e8ded6; border-radius: 1rem; }
.admin-page .card-body { min-width: 0; }
.admin-page .form-control, .admin-page .form-select { min-width: 0; }
.admin-page .table-responsive { margin-inline: -.25rem; }
.admin-page .table { margin-bottom: 0; }
.admin-page .table td, .admin-page .table th { overflow-wrap: anywhere; vertical-align: top; }
.admin-page .admin-user-table { width: 100%; }
.admin-page .admin-user-table td:first-child { min-width: 125px; }
@media (max-width: 767.98px) {
  body.app-shell { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .app-topbar-inner { min-height: 58px; }
  .app-brand { font-size: .95rem; }
  .app-brand img { width: 31px; height: 31px; }
  .app-main { padding-left: 1rem; padding-right: 1rem; }
  .app-hero { padding: 1.35rem !important; }
  .app-hero .display-5 { font-size: 2rem; }
  .app-hero .lead { font-size: 1rem; }
  .app-hero .btn { font-size: .9rem; padding: .6rem .8rem; margin-bottom: .25rem; }
  .bottom-tabbar { padding-top: .28rem; }
  .app-tab { min-height: 49px; }
  .app-tab-icon { height: 1.45rem; font-size: 1.35rem; }
  .app-tab-label { font-size: .6rem; letter-spacing: -.01em; }
  .admin-page .card-body { padding: 1rem !important; }
  .admin-page .admin-user-table, .admin-page .admin-user-table tbody,
  .admin-page .admin-user-table tr, .admin-page .admin-user-table td { display: block; width: 100%; }
  .admin-page .admin-user-table thead { display: none; }
  .admin-page .admin-user-table tbody tr { border: 1px solid #e8ded6; border-radius: .85rem; padding: .5rem .7rem; margin-bottom: .8rem; background: #fff; }
  .admin-page .admin-user-table td { border: 0; border-bottom: 1px solid #f0e8e2; padding: .65rem .1rem; }
  .admin-page .admin-user-table td:last-child { border-bottom: 0; }
  .admin-page .admin-user-table td::before { content: attr(data-label); display: block; margin-bottom: .25rem; color: #786b62; font-size: .72rem; font-weight: 750; letter-spacing: .025em; text-transform: uppercase; }
  .admin-page .admin-push-table { min-width: 690px; }
  .admin-page .admin-long-action { width: 100%; white-space: normal; }
}
@media print {
  .app-topbar, .bottom-tabbar, .app-footer { display: none !important; }
  body.app-shell { padding-bottom: 0; }
}
.account-title-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.account-signout-form { margin-left: auto; }
@media (max-width: 575.98px) { .account-title-row { align-items: flex-start; } .account-signout-form { margin-left: 0; } }


/* Admin app navigation and compact management cards. */
.admin-page { --admin-border: #e8dcd3; --admin-muted: #786b62; }
.admin-page[hidden], .admin-screen[hidden] { display: none !important; }
.admin-page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.admin-back-link { display: inline-block; color: var(--church-blue); text-decoration: none; font-weight: 700; font-size: .9rem; margin-bottom: .45rem; }
.admin-section-nav { position: sticky; top: .4rem; z-index: 20; display: flex; flex-wrap: nowrap; gap: .4rem; overflow-x: auto; overscroll-behavior-x: contain; padding: .55rem; margin: 0 0 1.1rem; border: 1px solid var(--admin-border); border-radius: .9rem; background: rgb(255 255 255 / 96%); box-shadow: 0 5px 18px rgb(58 37 28 / 7%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); scrollbar-width: thin; }
.admin-section-nav a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 38px; padding: .48rem .75rem; border-radius: .65rem; color: #5e4839; text-decoration: none; font-weight: 700; font-size: .82rem; white-space: nowrap; }
.admin-section-nav a:hover { background: #f8f3ef; }
.admin-section-nav a.active { color: #fff; background: var(--church-blue); }
.admin-screen-intro { margin: .2rem 0 1rem; }
.admin-stat-card { height: 100%; display: flex; flex-direction: column; padding: 1rem; text-decoration: none; color: var(--church-ink); background: #fff; border: 1px solid var(--admin-border); border-radius: 1rem; box-shadow: 0 2px 8px rgb(58 37 28 / 3%); }
.admin-stat-card .display-6 { line-height: 1.1; margin: .3rem 0; color: var(--church-brown-dark); font-weight: 800; }
.admin-stat-card small { color: var(--admin-muted); line-height: 1.35; }
.admin-stat-card:hover { border-color: #b58a6c; box-shadow: 0 5px 16px rgb(58 37 28 / 7%); }
.admin-launch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.admin-launch-card { min-width: 0; min-height: 94px; display: flex; align-items: center; gap: .7rem; padding: .9rem; color: var(--church-ink); text-decoration: none; border: 1px solid var(--admin-border); border-radius: 1rem; background: #fff; box-shadow: 0 2px 8px rgb(58 37 28 / 3%); }
.admin-launch-card:hover { color: var(--church-brown-dark); border-color: #b58a6c; box-shadow: 0 5px 16px rgb(58 37 28 / 7%); }
.admin-launch-icon { flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: .8rem; color: var(--church-brown-dark); background: var(--church-brown-light); font-size: 1.35rem; }
.admin-launch-card strong, .admin-launch-card small { display: block; }
.admin-launch-card strong { line-height: 1.25; font-size: .92rem; }
.admin-launch-card small { margin-top: .25rem; line-height: 1.3; color: var(--admin-muted); font-size: .76rem; }
.admin-launch-arrow { margin-left: auto; color: var(--church-blue); font-size: 1.35rem; }
.admin-pending-list { display: grid; gap: .6rem; }
.admin-pending-card { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; padding: .8rem 0; border-top: 1px solid #f0e8e2; }
.admin-pending-card:first-child { border-top: 0; padding-top: 0; }
.admin-member-list, .admin-contact-list { display: grid; gap: .7rem; }
.admin-member-card, .admin-contact-manage-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid var(--admin-border); border-radius: 1rem; background: #fff; box-shadow: 0 2px 8px rgb(58 37 28 / 3%); }
.admin-member-summary { min-width: 0; display: flex; gap: .75rem; flex: 1 1 16rem; }
.admin-avatar { width: 2.7rem; height: 2.7rem; flex: 0 0 2.7rem; display: grid; place-items: center; border-radius: 50%; background: var(--church-brown-light); color: var(--church-brown-dark); font-weight: 800; font-size: 1.05rem; }
.admin-member-phone { display: inline-block; color: var(--church-blue); text-decoration: none; margin-top: .1rem; }
.admin-role-badge { background: #f4ebe3; color: #65442f; font-weight: 650; }
.admin-member-actions { width: min(100%, 22rem); flex: 0 1 22rem; }
.admin-role-form .form-select { min-width: 0; }
.admin-role-form .btn { white-space: nowrap; }
.admin-contact-manage-card { align-items: center; }
@media (max-width: 767.98px) {
  .admin-section-nav { top: .25rem; margin-inline: -.15rem; }
  .admin-section-nav a { min-height: 36px; padding: .42rem .65rem; font-size: .78rem; }
  .admin-launch-grid { grid-template-columns: 1fr; }
  .admin-launch-card { min-height: 78px; padding: .8rem; }
  .admin-pending-card { align-items: flex-start; }
  .admin-pending-card > div:last-child { width: 100%; }
  .admin-pending-card form { flex: 1 1 auto; }
  .admin-pending-card form .btn { width: 100%; }
  .admin-member-card { display: block; }
  .admin-member-actions { width: 100%; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid #f0e8e2; }
  .admin-contact-manage-card { align-items: flex-start; flex-direction: column; }
  .admin-contact-manage-card > div:last-child { width: 100%; }
  .admin-contact-manage-card .btn { min-width: 5rem; }
}
@media (min-width: 768px) {
  .admin-launch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Pastors and church contacts directory. */
.contact-directory { max-width: 960px; margin-inline: auto; }
.directory-hero { display: flex; align-items: center; gap: 1rem; padding: 1.3rem; color: #fff; border-radius: 1.1rem; background: linear-gradient(125deg, #3a251c, #8b5e3c); }
.directory-hero p { color: rgb(255 255 255 / 86%); line-height: 1.45; }
.directory-hero-icon { width: 3.2rem; height: 3.2rem; display: grid; place-items: center; flex: 0 0 3.2rem; border-radius: .9rem; background: rgb(255 255 255 / 15%); font-size: 1.8rem; }
.directory-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.directory-contact-card { min-width: 0; padding: 1.15rem; background: #fff; border: 1px solid #e8dcd3; border-radius: 1rem; box-shadow: 0 2px 8px rgb(58 37 28 / 4%); }
.directory-contact-heading { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.directory-avatar { width: 3rem; height: 3rem; flex: 0 0 3rem; display: grid; place-items: center; border-radius: 50%; background: #f4ebe3; color: #3a251c; font-weight: 800; font-size: 1.1rem; }
.directory-contact-title { color: #79502f; font-weight: 700; font-size: .88rem; }
.directory-contact-description { color: #62554d; font-size: .92rem; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; }
.directory-email-link { display: block; margin-top: .75rem; font-size: .86rem; overflow-wrap: anywhere; }
@media (max-width: 700px) { .directory-contact-grid { grid-template-columns: 1fr; } .directory-hero { align-items: flex-start; padding: 1rem; } .directory-hero-icon { width: 2.75rem; height: 2.75rem; flex-basis: 2.75rem; } }


/* Device-aware PWA installation coach. */
.install-pwa-card { border-color: #d9c3b3; background: linear-gradient(180deg, #fffdfb 0%, #fff 100%); }
.install-pwa-title-row { display: flex; align-items: flex-start; gap: 1rem; }
.install-pwa-app-icon { flex: 0 0 3.5rem; width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border-radius: 1rem; background: #f4ebe3; box-shadow: 0 2px 7px rgb(58 37 28 / 8%); }
.install-pwa-app-icon img { display: block; width: 3rem; height: 3rem; object-fit: contain; }
.install-pwa-eyebrow { color: #80583d; font-size: .7rem; letter-spacing: .11em; font-weight: 800; }
.install-pwa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.install-pwa-help { padding-top: 1rem; border-top: 1px solid #eadfd7; }
.install-pwa-steps { display: grid; gap: .9rem; padding-left: 1.5rem; margin: 0 0 1rem; }
.install-pwa-steps li { padding-left: .2rem; }
.install-pwa-steps li strong, .install-pwa-steps li > span { display: block; margin-top: .2rem; color: #62554d; font-size: .91rem; line-height: 1.45; }
.install-pwa-icon-guide { width: fit-content; min-width: 8.5rem; margin-top: .55rem; padding: .45rem .8rem .55rem; display: flex; align-items: center; flex-direction: column; gap: .15rem; border: 1px solid #ead6c7; border-radius: .85rem; background: #fff8f2; color: #503728; }
.install-pwa-guide-arrow { font-size: 1.65rem; line-height: 1; color: #9a5d32; font-weight: 800; animation: install-pwa-nudge 1.25s ease-in-out infinite; }
.install-pwa-share-example { width: 2.65rem; height: 2.65rem; display: grid; place-items: center; border: 2px solid #503728; border-radius: .65rem; background: #fff; }
.install-pwa-menu-example { width: 2.65rem; height: 2.65rem; display: grid; place-items: center; border: 2px solid #503728; border-radius: .65rem; background: #fff; font-size: 1.8rem; font-weight: 800; line-height: 1; }
.install-pwa-icon-guide > span:last-child { font-size: .73rem; font-weight: 700; color: #72523e; }
.install-pwa-note { padding: .75rem .85rem; border-left: 4px solid #a36f49; border-radius: .25rem; background: #faf2eb; font-size: .9rem; line-height: 1.45; }
@keyframes install-pwa-nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .install-pwa-guide-arrow { animation: none; } }
@media (max-width: 575.98px) {
  .install-pwa-title-row { gap: .75rem; }
  .install-pwa-app-icon { width: 2.85rem; height: 2.85rem; flex-basis: 2.85rem; }
  .install-pwa-app-icon img { width: 2.5rem; height: 2.5rem; }
  .install-pwa-title-row h2 { font-size: 1.2rem; }
  .install-pwa-actions .btn { flex: 1 1 auto; }
}


/* Fixed bottom navigation: equal slots and a fixed icon row keep every icon aligned. */
.app-bottom-nav {
  position: fixed;
  z-index: 1030;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  padding: .4rem max(.35rem, env(safe-area-inset-left)) calc(.4rem + env(safe-area-inset-bottom)) max(.35rem, env(safe-area-inset-right));
  background: rgba(255,255,255,.97);
  border-top: 1px solid #e3d5c8;
  box-shadow: 0 -4px 18px rgb(58 37 28 / 8%);
  backdrop-filter: blur(12px);
}
.app-bottom-nav-item {
  box-sizing: border-box;
  flex: 1 1 0;
  width: auto;
  max-width: none;
  min-width: 0;
  display: grid;
  grid-template-rows: 1.5rem 2.4em;
  align-content: start;
  justify-items: center;
  gap: .15rem;
  padding: .2rem .1rem;
  color: #74665d;
  text-decoration: none;
  border-radius: .65rem;
  font-size: .66rem;
  line-height: 1.15;
  text-align: center;
}
.app-bottom-nav-item:hover,
.app-bottom-nav-item:focus-visible { color: var(--church-brown-dark); background: #f8f1eb; }
.app-bottom-nav-item.active { color: var(--church-brown-dark); font-weight: 700; }
.app-bottom-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1.5rem;
  font-size: 1.25rem;
  line-height: 1;
}
.app-bottom-nav-label {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}
.app-bottom-nav-label-compact { display: none; }
body:has(.app-bottom-nav) { padding-bottom: calc(5.1rem + env(safe-area-inset-bottom)); }
@media (max-width: 700px) {
  .app-bottom-nav-item { font-size: .62rem; padding-left: 0; padding-right: 0; }
  .app-bottom-nav-label-full { display: none; }
  .app-bottom-nav-label-compact { display: block; overflow-wrap: normal; word-break: normal; hyphens: manual; }
}
@media (min-width: 701px) {
  .app-bottom-nav-label-full { overflow-wrap: anywhere; }
}
@media (min-width: 992px) {
  .app-bottom-nav { left: 50%; right: auto; bottom: 1rem; transform: translateX(-50%); width: min(720px, calc(100% - 2rem)); border: 1px solid #e3d5c8; border-radius: 1rem; padding: .45rem .75rem; box-shadow: 0 8px 30px rgb(58 37 28 / 14%); }
  body:has(.app-bottom-nav) { padding-bottom: 6rem; }
}
@media print { .app-bottom-nav { display: none !important; } }


/* Calendar improvements: continuous multi-day bars live inside the same day grid. */
.calendar-month .calendar-weekdays,
.calendar-month-weeks,
.calendar-month-week-headers,
.calendar-month-week-body {
  min-width: 720px;
  width: 100%;
}
.calendar-month-weeks { display: block; }
.calendar-month-week { display: block; }
.calendar-month-week-headers,
.calendar-month-day-contents {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}
.calendar-month-week-headers { background: #fff; }
.calendar-month-day-header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  min-height: 1.85rem;
  padding: .2rem .35rem;
  text-align: right;
  font-size: .74rem;
  font-weight: 700;
  border-right: 1px solid #e8ded6;
  background: #fff;
}
.calendar-month-day-header.outside,
.calendar-month-day-content.outside { background: #faf7f4; }
.calendar-month-day-header.outside { color: transparent; }
.calendar-month-week-body {
  position: relative;
  --calendar-lane-height: 1.15rem;
}
.calendar-month-day-contents {
  position: relative;
  z-index: 1;
}
.calendar-month-day-content {
  box-sizing: border-box;
  min-width: 0;
  min-height: 88px;
  padding: calc(var(--calendar-bar-lanes, 0) * var(--calendar-lane-height) + .28rem) .2rem .25rem;
  border-right: 1px solid #e8ded6;
  border-bottom: 1px solid #e8ded6;
  overflow-wrap: anywhere;
  background: #fff;
}
.calendar-month-bars {
  position: absolute;
  z-index: 2;
  top: .22rem;
  left: 0;
  right: 0;
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(var(--calendar-bar-lanes, 1), var(--calendar-lane-height));
  align-items: stretch;
  padding: 0;
  pointer-events: none;
}
.calendar-span-event {
  box-sizing: border-box;
  display: block;
  width: calc(100% - 2px);
  min-width: 0;
  height: 1.1rem;
  margin: 0 1px;
  padding: .03rem .22rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 0;
  border-left: 3px solid;
  border-radius: .22rem;
  font-size: .63rem;
  line-height: 1.05rem;
  text-align: left;
  cursor: default;
  pointer-events: none;
}
.calendar-date-number {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  line-height: 1;
}
.calendar-date-number.is-today {
  color: #fff;
  background: var(--church-blue, #8b5e3c);
  box-shadow: 0 0 0 2px #ead9cb;
  font-weight: 800;
}
.calendar-month-event-item[hidden] { display: none !important; }
.calendar-month-day-content .calendar-event {
  margin: .12rem 0;
  padding: .14rem .2rem;
  font-size: .63rem;
  line-height: 1.2;
}
.calendar-more-toggle {
  display: block;
  width: 100%;
  margin-top: .14rem;
  padding: .12rem .2rem;
  border: 0;
  border-radius: .2rem;
  background: transparent;
  color: var(--bs-secondary-color, #6c757d);
  font-size: .64rem;
  line-height: 1.25;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.calendar-more-toggle:hover,
.calendar-more-toggle:focus-visible { text-decoration: underline; }
.calendar-week .calendar-weekdays > .calendar-weekday-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  min-height: 3.6rem;
}
@media (max-width: 700px) {
  .calendar-month-day-header { min-height: 1.65rem; padding: .1rem .18rem; font-size: .7rem; }
  .calendar-month-week-body { --calendar-lane-height: 1.05rem; }
  .calendar-month-day-content { min-height: 78px; padding-top: calc(var(--calendar-bar-lanes, 0) * var(--calendar-lane-height) + .2rem); padding-right: .15rem; padding-bottom: .2rem; padding-left: .15rem; }
  .calendar-month-day-content .calendar-event { font-size: .6rem; padding: .13rem .15rem; }
  .calendar-span-event { height: 1rem; font-size: .6rem; line-height: .96rem; }
  .calendar-date-number { width: 1.35rem; height: 1.35rem; }
  .calendar-more-toggle { font-size: .6rem; padding: .12rem .15rem; }
  .calendar-week .calendar-weekdays > .calendar-weekday-cell { min-height: 3.25rem; padding: .35rem .15rem; font-size: .72rem; }
}

/* Compact homepage Coming up list: optimized for narrow phone screens. */
.upcoming-events-list {
  overflow: hidden;
  border: 1px solid #e8dcd3;
  border-radius: .85rem;
  background: #fff;
}
.upcoming-event {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  padding: .62rem .8rem;
}
.upcoming-event + .upcoming-event {
  border-top: 1px solid #f0e7e0;
}
.upcoming-event-when {
  display: flex;
  flex: 0 0 6.1rem;
  flex-direction: column;
  gap: .12rem;
  min-width: 0;
  line-height: 1.2;
}
.upcoming-event-date {
  color: var(--church-blue);
  font-size: .76rem;
  font-weight: 750;
  white-space: nowrap;
}
.upcoming-event-time {
  color: #786b62;
  font-size: .72rem;
  white-space: nowrap;
}
.upcoming-event-details {
  flex: 1 1 auto;
  min-width: 0;
}
.upcoming-event-service-details {
  color: #66574f;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.event-details-description {
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.upcoming-event-title {
  margin: 0;
  color: var(--church-ink);
  font-size: .94rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.upcoming-event-location {
  overflow: hidden;
  margin: .16rem 0 0;
  color: #786b62;
  font-size: .74rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .upcoming-event {
    gap: .55rem;
    padding: .55rem .65rem;
  }
  .upcoming-event-when {
    flex-basis: 5.65rem;
  }
  .upcoming-event-date {
    font-size: .72rem;
  }
  .upcoming-event-time,
  .upcoming-event-location {
    font-size: .7rem;
  }
  .upcoming-event-title {
    font-size: .88rem;
    line-height: 1.2;
  }
}


/* Member avatars: uploaded portraits or stable initials circles. */
.member-avatar {
  --member-avatar-color: #765548;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: var(--member-avatar-color);
  color: #fff;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .015em;
  vertical-align: middle;
  user-select: none;
}
.member-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.member-avatar--xs { width: 1.75rem; height: 1.75rem; font-size: .62rem; }
.member-avatar--sm { width: 2.25rem; height: 2.25rem; font-size: .76rem; }
.member-avatar--md { width: 2.8rem; height: 2.8rem; font-size: .95rem; }
.member-avatar--lg { width: 4.75rem; height: 4.75rem; font-size: 1.35rem; }
.member-author-line { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.member-author-line > div { min-width: 0; }
.prayer-comment-item { display: flex; align-items: flex-start; gap: .55rem; margin-bottom: .9rem; }
.prayer-comment-avatar { flex: 0 0 auto; padding-top: .05rem; }
.prayer-comment-content { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.avatar-upload-form { max-width: 36rem; }
.avatar-upload-form .form-control[type="file"] { min-width: 0; }
@media (max-width: 575.98px) {
  .member-avatar--lg { width: 4.25rem; height: 4.25rem; font-size: 1.2rem; }
  .member-author-line { gap: .5rem; }
}

/* Version 11: contextual notification setup and compact mobile account profile */
.notification-setup-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.1rem;
  color: #3a271e;
  background: #fff8ee;
  border: 1px solid #e8cba8;
  border-left: 4px solid #8a5a3d;
  border-radius: 1rem;
  box-shadow: 0 3px 12px rgba(58, 39, 30, .06);
}
.notification-setup-banner[hidden] { display: none !important; }
.notification-setup-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #ead7c3; color: #5c3827; font-size: 1.3rem; }
.notification-setup-content { min-width: 0; }
.notification-setup-content p { line-height: 1.45; }
.notification-setup-content [data-notification-status]:empty { display: none; }
.notification-setup-actions { flex-shrink: 0; }
.account-profile-layout { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); align-items: start; gap: 1.1rem; }
.account-profile-avatar-column { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.account-profile-avatar-column > .member-avatar { flex-shrink: 0; }
.account-profile-main { min-width: 0; }
.account-profile-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.account-display-name-form { max-width: 38rem; }
.account-role-badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.account-contact-summary { display: grid; gap: .4rem; overflow-wrap: anywhere; }
.account-photo-details { font-size: .82rem; text-align: center; }
.account-photo-details summary { cursor: pointer; color: #6f4532; text-decoration: underline; text-underline-offset: .15rem; }
.account-photo-details .form-text { text-align: left; }
.account-phone-verify-banner { border-radius: 1rem; }
.account-warning-icon { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; flex: 0 0 auto; font-weight: 800; color: #66420b; border: 1px solid currentColor; }
@media (max-width: 575.98px) {
  .notification-setup-banner { grid-template-columns: auto minmax(0,1fr); gap: .7rem; padding: .9rem; align-items: start; }
  .notification-setup-icon { width: 2.2rem; height: 2.2rem; font-size: 1.1rem; }
  .notification-setup-actions { grid-column: 1 / -1; }
  .notification-setup-actions .btn { width: 100%; }
  .account-profile-layout { grid-template-columns: 1fr; gap: .8rem; }
  .account-profile-avatar-column { flex-direction: row; align-items: center; justify-content: flex-start; gap: .7rem; }
  .account-profile-avatar-column .account-photo-details { text-align: left; }
  .account-profile-heading-row { align-items: center; }
  .account-display-name-form .input-group { flex-wrap: wrap; }
  .account-display-name-form .form-control { flex: 1 1 100%; border-radius: .5rem !important; }
  .account-display-name-form .btn { flex: 1 1 auto; border-radius: .5rem !important; margin-top: .35rem; }
}


/* Release 12: phone-width calendars, readable event titles and compact agenda. */
.event-list-title {
  display: inline-block;
  width: auto;
  max-width: 100%;
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  text-align: left !important;
  color: inherit;
  font: inherit;
  line-height: inherit;
  box-shadow: none !important;
  vertical-align: baseline;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.event-list-title:hover { text-decoration: underline; }
.calendar-month .calendar-weekdays,
.calendar-month-weeks,
.calendar-month-week-headers,
.calendar-month-week-body,
.calendar-week .calendar-weekdays,
.calendar-week .calendar-cells {
  min-width: 0;
  width: 100%;
}
.calendar-grid { overflow-x: hidden; }
.calendar-week-mobile-date { display: none; align-items: center; gap: .35rem; }
.calendar-mobile-agenda { display: none; }
.calendar-mobile-agenda-list {
  overflow: hidden;
  border: 1px solid #e8dcd3;
  border-radius: .8rem;
  background: #fff;
}
.calendar-mobile-agenda-item {
  display: flex;
  border-left: 4px solid;
  padding: .75rem .85rem;
  background: #fff;
}
.calendar-mobile-agenda-item + .calendar-mobile-agenda-item { border-top: 1px solid #f0e7e0; }
.calendar-mobile-agenda-main { min-width: 0; width: 100%; }
.calendar-mobile-agenda-item .event-list-title { font-weight: 750; }
.calendar-pagination .btn.disabled { pointer-events: none; opacity: .45; }
.notification-setup-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .45rem; }
.upcoming-event-date { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .calendar-grid { overflow-x: hidden; border-radius: .65rem; }
  .calendar-month .calendar-weekdays,
  .calendar-month-weeks,
  .calendar-month-week-headers,
  .calendar-month-week-body { min-width: 0; width: 100%; }
  .calendar-month .calendar-weekdays,
  .calendar-month-week-headers,
  .calendar-month-day-contents { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
  .calendar-month .calendar-weekdays > div { min-width: 0; padding: .35rem 0; font-size: .58rem; }
  .calendar-month-day-header { min-width: 0; min-height: 1.45rem; padding: .05rem; justify-content: center; font-size: .62rem; }
  .calendar-month-week-body { --calendar-lane-height: .72rem; }
  .calendar-month-day-content { min-height: 3.4rem; padding-top: calc(var(--calendar-bar-lanes, 0) * var(--calendar-lane-height) + .12rem); padding-right: .08rem; padding-bottom: .14rem; padding-left: .08rem; }
  .calendar-month-day-content .calendar-event { display: block; width: 100%; min-width: 0; margin: .08rem 0; padding: .08rem .1rem; font-size: .55rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
  .calendar-month-day-content .calendar-event span { font-weight: 750; }
  .calendar-span-event { height: .68rem; line-height: .65rem; font-size: .48rem; padding: 0 .08rem; }
  .calendar-date-number { width: 1.25rem; height: 1.25rem; font-size: .72rem; }
  .calendar-more-toggle { font-size: .52rem; line-height: 1.1; padding: .08rem 0; }
  .calendar-week .calendar-cells { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: auto; min-width: 0 !important; width: 100%; }
  .calendar-week .calendar-day { min-height: 0; padding: .7rem .65rem; border-right: 0; }
  .calendar-week .calendar-day-number { font-size: .95rem; margin-bottom: .45rem; }
  .calendar-week .calendar-event-block { margin: .3rem 0; padding: .55rem .65rem; font-size: .82rem; }
  .calendar-mobile-agenda { display: block; }
  /* The mobile week grid is already stacked into a day-by-day agenda; avoid duplicating it below. */
  .calendar-mobile-agenda-week { display: none !important; }
  .calendar-mobile-agenda-item { padding: .65rem .7rem; }
  .notification-setup-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .notification-setup-actions .btn { width: auto; }
  .upcoming-event { align-items: flex-start; }
  .upcoming-event-when { flex-basis: 6rem; }
}
@media print {
  .calendar-mobile-agenda { display: none !important; }
  .calendar-grid { overflow: visible; }
}


/* Version 12.1 accessibility and polish. */
html.large-text { font-size: 125%; }
.app-bottom-nav-icon .bi { display: block; line-height: 1; font-size: 1.2rem; }
.upcoming-event { min-width: 0; }
.upcoming-event-when { flex: 0 0 6.2rem; width: 6.2rem; max-width: 38%; }
.upcoming-event-date { display: block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: normal; line-height: 1.25; }
.upcoming-event-details { flex: 1 1 0; width: 0; min-width: 0; overflow-wrap: anywhere; }
.upcoming-event-title { max-width: 100%; overflow-wrap: anywhere; word-break: normal; }
@media (max-width: 700px) {
  .app-hero-public { min-height: 0; padding: .65rem !important; margin-bottom: 1rem !important; background-position: center 45%; }
  .app-hero-public > .row { margin: 0; }
  .app-hero-public > .row > .col-lg-8 { padding: 0; }
  .app-hero-public > .row > .col-lg-4 { display: none !important; }
  .app-hero-public .app-hero-copy { display: none !important; }
  .app-hero-public .app-hero-actions .btn { font-size: .9rem; padding: .4rem .7rem; }
  .upcoming-event { align-items: flex-start; gap: .6rem; }
  .upcoming-event-when { flex-basis: 6.15rem; width: 6.15rem; max-width: 39%; }
  .upcoming-event-details { min-width: 0; }
}


/* Version 12.2 home hero, church links, and account deletion. */
.app-hero-home {
  min-height: 0;
  padding: 1.15rem 1.4rem !important;
  margin-bottom: .85rem !important;
  border: 1px solid rgb(255 255 255 / 12%);
  background-repeat: no-repeat;
  background-position: center 48%;
  background-size: cover;
}
.app-home-hero-copy { max-width: 52rem; }
.app-home-hero-title { color: #fff; font-size: clamp(1.55rem, 3.8vw, 2.25rem); line-height: 1.15; font-weight: 800; text-wrap: balance; }
.app-home-hero-subtitle { color: rgb(255 255 255 / 88%); font-size: 1rem; font-weight: 550; }
.app-hero-home .app-hero-actions { margin-top: .8rem !important; }
.app-hero-home .app-hero-actions .btn { padding: .4rem .7rem; }
.home-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.home-feature-card { display: flex; min-width: 0; min-height: 86px; align-items: center; gap: .7rem; padding: .85rem; border: 1px solid #e8dcd3; border-radius: 1rem; background: #fff; color: var(--church-ink); text-decoration: none; box-shadow: 0 2px 8px rgb(15 23 42 / 3%); }
.home-feature-card:hover { color: var(--church-navy); border-color: #b58a6c; box-shadow: 0 5px 16px rgb(58 37 28 / 7%); }
.home-feature-icon { display: grid; flex: 0 0 2.55rem; width: 2.55rem; height: 2.55rem; place-items: center; border-radius: .8rem; background: #f4ebe3; color: var(--church-blue); font-size: 1.45rem; }
.home-feature-copy { display: block; min-width: 0; flex: 1 1 auto; }
.home-feature-copy > strong, .home-feature-copy > small { display: block; }
.home-feature-copy > strong { line-height: 1.25; }
.home-feature-copy > small { margin-top: .18rem; color: #786b62; font-size: .78rem; line-height: 1.3; }
.home-feature-arrow { flex: 0 0 auto; align-self: flex-start; color: var(--church-blue); }
.home-give-card { align-items: flex-start; }
.home-zelle-email { overflow-wrap: anywhere; font-size: .73rem !important; }
.home-give-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.home-give-actions .btn { white-space: normal; line-height: 1.2; }
.home-copy-status { display: block; margin-top: .3rem; color: #47623d; overflow-wrap: anywhere; }
.account-danger-zone { background: #fffdfc; }
.account-danger-zone summary { cursor: pointer; }
@media (max-width: 700px) {
  .app-hero-home { padding: .95rem 1rem !important; background-position: center 45%; }
  .app-home-hero-title { font-size: clamp(1.45rem, 6vw, 1.8rem); }
  .app-home-hero-subtitle { font-size: .9rem; }
  .home-feature-grid { grid-template-columns: 1fr; gap: .55rem; }
  .home-feature-card { min-height: 0; padding: .7rem .8rem; }
  .home-feature-icon { width: 2.35rem; height: 2.35rem; flex-basis: 2.35rem; font-size: 1.3rem; }
  .home-give-card { align-items: flex-start; }
}


/* Community: prayer/voting tabs and anonymous voting ballots */
.community-page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.15rem; }
.community-tabs { display:flex; gap:.35rem; padding:.3rem; border:1px solid #e8dcd3; border-radius:1rem; background:#f8f3ef; }
.community-tab { flex:1 1 0; min-width:0; padding:.72rem .8rem; border-radius:.72rem; color:#63483b; text-align:center; text-decoration:none; font-weight:650; font-size:.94rem; }
.community-tab:hover { color:#3c251b; background:#efe4dc; }
.community-tab.active { color:#fff; background:#6d4633; box-shadow:0 2px 7px rgb(58 37 28 / 12%); }
.community-voting-card { border:1px solid #e8dcd3; border-radius:1rem; box-shadow:0 2px 8px rgb(58 37 28 / 3%); }
.voting-description { overflow-wrap:anywhere; }
.voting-option { display:flex; align-items:flex-start; gap:.7rem; width:100%; margin:.35rem 0; padding:.8rem .85rem; border:1px solid #e8dcd3; border-radius:.85rem; background:#fff; cursor:pointer; }
.voting-option:has(input:checked) { border-color:#8b6148; background:#fcf7f3; box-shadow:0 0 0 1px #8b6148 inset; }
.voting-option .form-check-input { flex:0 0 auto; margin-top:.2rem; }
.voting-state-note { padding:.8rem .9rem; border-radius:.8rem; background:#f8f3ef; color:#674a3b; }
.voting-admin-results-inline { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-bottom:.7rem; }
.voting-result-row + .voting-result-row { margin-top:.7rem; }
.voting-progress { height:.6rem; margin-top:.3rem; overflow:hidden; border-radius:999px; background:#eee5df; }
.voting-progress .progress-bar { border-radius:999px; background:#81583f; transition:width .25s ease; }
@media (max-width:575.98px) { .community-page-heading { margin-bottom:1rem; } .community-tab { padding:.68rem .35rem; font-size:.88rem; } .voting-option { padding:.72rem; } }

/* Version 13: lightweight app-style navigation feedback. */
#app-navigation-progress { position:fixed; z-index:2000; inset:0 0 auto 0; height:3px; pointer-events:none; opacity:0; transition:opacity .12s ease; }
#app-navigation-progress.visible { opacity:1; }
#app-navigation-progress span { display:block; width:28%; height:100%; border-radius:0 3px 3px 0; background:#8b5e3c; transform:translateX(-120%); }
#app-navigation-progress.visible span { animation:ibethany-nav-progress 1.05s ease-in-out infinite; }
#app-navigation-progress.slow span { width:42%; animation-duration:1.25s; }
main.app-main.app-nav-arrived { animation:ibethany-content-arrive .16s ease-out both; }
@keyframes ibethany-nav-progress { from { transform:translateX(-120%); } to { transform:translateX(380%); } }
@keyframes ibethany-content-arrive { from { opacity:.86; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { #app-navigation-progress span, main.app-main.app-nav-arrived { animation:none !important; } #app-navigation-progress, main.app-main { transition:none !important; } }


/* Version 13.2 calendar usability. */
.calendar-week.calendar-grid { overflow: clip !important; }
.calendar-week .calendar-weekdays {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  box-shadow: 0 3px 8px rgb(58 37 28 / 12%);
}
.calendar-week .calendar-day { scroll-margin-top: 4.75rem; }
.calendar-month-date-select {
  font: inherit;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.calendar-month-date-select[aria-pressed="true"] {
  background: var(--church-brown, #4b3025);
  color: #fff;
  box-shadow: 0 0 0 2px #ead9cb;
  font-weight: 800;
}
.calendar-month-date-select.is-today[aria-pressed="true"] { background: #4b3025; color: #fff; }
.calendar-month-date-select:focus-visible { outline: 2px solid #8b5e3c; outline-offset: 3px; }
.calendar-mobile-agenda-month { display: block; }
.calendar-mobile-agenda-month-days > [hidden] { display: none !important; }
.calendar-mobile-agenda-month .calendar-mobile-agenda-list { margin-bottom: .5rem; }
@media (max-width: 700px) {
  .calendar-week .calendar-weekdays { display: none; }
  .calendar-month-date-select { -webkit-tap-highlight-color: transparent; }
}
@media print {
  .calendar-week .calendar-weekdays { position: static; box-shadow: none; }
  .calendar-mobile-agenda-month { display: none !important; }
}


/* Version 13.7.1: keep one native page scroll while the Month grid stays
   pinned above its agenda on phones. The agenda itself never gets an inner
   scrollbar, so vertical touch gestures have only one scroll target. */
.calendar-scroll-context-month.calendar-single-scroll .calendar-month-sticky {
  position: static;
  z-index: auto;
  isolation: auto;
  background: #f8fafc;
  padding-bottom: .2rem;
}
.calendar-scroll-context-month.calendar-single-scroll .calendar-agenda-scroll-panel {
  position: static;
  display: block;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto;
  -webkit-overflow-scrolling: auto;
  scrollbar-gutter: auto;
}
.calendar-scroll-context-week.calendar-single-scroll .calendar-week .calendar-weekdays {
  position: sticky;
  top: calc(4.75rem + env(safe-area-inset-top, 0px));
  z-index: 30;
  box-shadow: 0 3px 8px rgb(58 37 28 / 12%);
  background: #f8fafc;
}
.calendar-weekday-cell[data-calendar-week-date] { cursor: pointer; }
.calendar-weekday-cell[data-calendar-week-date]:focus-visible { outline: 2px solid #8b5e3c; outline-offset: -2px; }
.calendar-compact-event-card .card-body { padding: .65rem .75rem; }
.calendar-compact-event-card .date-tile { transform: scale(.9); transform-origin: top left; }
.calendar-compact-event-card h2 { font-size: 1rem; margin-bottom: .2rem !important; }
.calendar-compact-event-card .col > p:not(.small) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.calendar-compact-event-card p { margin-bottom: .3rem !important; }
@media (max-width: 767.98px) {
  /* Give the topbar clear separation from the iOS translucent status-bar area. */
  .app-main { padding-top: 1rem; }
  .calendar-scroll-context-month.calendar-single-scroll .calendar-month-sticky {
    position: sticky;
    top: max(3.625rem, calc(2rem + env(safe-area-inset-top, 0px)));
    z-index: 40;
    isolation: isolate;
    background: #f8fafc;
    box-shadow: 0 4px 10px rgb(58 37 28 / 10%);
  }
  .calendar-scroll-context-week.calendar-single-scroll .calendar-week .calendar-weekdays {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
    min-width: 0 !important;
    position: sticky;
    top: calc(4.75rem + env(safe-area-inset-top, 0px));
  }
  .calendar-scroll-context-week.calendar-single-scroll .calendar-week .calendar-weekdays > div {
    min-width: 0;
    padding: .35rem .08rem;
    font-size: .68rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
  }
  .calendar-scroll-context-week.calendar-single-scroll .calendar-week .calendar-cells {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    width: 100%;
  }
  .calendar-weekday-cell[data-calendar-selected="true"] .calendar-date-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8rem;
    min-height: 1.8rem;
    border-radius: 50%;
    background: var(--church-navy, #4b3025);
    color: #fff;
    box-shadow: 0 0 0 2px #ead9cb;
  }
  .calendar-scroll-context-week .calendar-day[data-calendar-selected="true"] {
    background: #fff8f2;
    box-shadow: inset 0 0 0 2px #8b5e3c;
    border-radius: .25rem;
  }
  .calendar-week .calendar-day { scroll-margin-top: calc(7rem + env(safe-area-inset-top, 0px)); }
  .calendar-mobile-agenda-month { scroll-margin-top: calc(6rem + env(safe-area-inset-top, 0px)); }
  .calendar-compact-event-card .card-body { padding: .55rem .6rem; }
  .calendar-compact-event-card .row { --bs-gutter-x: .5rem; }
}
@media (min-width: 768px) {
  .calendar-scroll-context-week .calendar-day[data-calendar-selected="true"] {
    background: #fff8f2;
    box-shadow: inset 0 0 0 2px #8b5e3c;
  }
  .calendar-weekday-cell[data-calendar-selected="true"] .calendar-date-number {
    border-radius: 50%;
    background: var(--church-navy, #4b3025);
    color: #fff;
    padding: .18rem .42rem;
  }
}
@media print {
  .calendar-month-sticky, .calendar-scroll-context-week .calendar-week .calendar-weekdays { position: static !important; box-shadow: none !important; }
  .calendar-agenda-scroll-panel { height: auto !important; overflow: visible !important; }
}

/* Version 13.4: compact, non-interactive Month grid. Event details open from the agenda below. */
.calendar-month-day-content .calendar-event {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
.calendar-span-event { cursor: default; pointer-events: none; }
@media (max-width: 700px) {
  .calendar-month .calendar-weekdays > div { padding: .22rem 0; font-size: .56rem; }
  .calendar-month-day-header { min-height: 1.28rem; padding: .03rem; }
  .calendar-month-week-body { --calendar-lane-height: .6rem; }
  .calendar-month-bars { top: .1rem; }
  .calendar-month-day-content {
    min-height: 2.3rem;
    padding-top: calc(var(--calendar-bar-lanes, 0) * var(--calendar-lane-height) + .06rem);
    padding-right: .06rem;
    padding-bottom: .08rem;
    padding-left: .06rem;
  }
  .calendar-month-day-content .calendar-event {
    margin: .035rem 0;
    padding: .045rem .06rem;
    font-size: .5rem;
    line-height: 1.08;
    border-left-width: 2px;
  }
  .calendar-month-day-content .calendar-event span { font-weight: 750; }
  .calendar-span-event { height: .56rem; line-height: .54rem; font-size: .45rem; padding: 0 .04rem; border-left-width: 2px; }
  .calendar-more-toggle { margin-top: .06rem; font-size: .49rem; line-height: 1.05; padding: .04rem 0; }
}
@media (max-width: 380px) {
  .calendar-month-day-content .calendar-event { font-size: .46rem; padding-right: .035rem; padding-left: .035rem; }
  .calendar-month .calendar-weekdays > div { font-size: .53rem; }
  .calendar-span-event { font-size: .42rem; }
}

/* Version 13.8: safe-area-aware topbar and coordinated sticky calendar headings. */
:root {
  --app-topbar-safe-padding: 0px;
  --app-topbar-content-height: 64px;
  --app-topbar-height: calc(var(--app-topbar-safe-padding) + var(--app-topbar-content-height));
  --calendar-sticky-gap: 6px;
  --calendar-sticky-top: calc(var(--app-topbar-height) + var(--calendar-sticky-gap));
}
.app-topbar { padding-top: var(--app-topbar-safe-padding); }
.app-topbar-inner { min-height: var(--app-topbar-content-height); padding-top: 0 !important; }

.calendar-period-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .45rem .75rem;
  flex-wrap: wrap;
  padding: .55rem .65rem;
  background: #f8fafc;
  color: var(--church-ink, #2d241f);
}
.calendar-period-heading h2 { margin: 0; font-size: 1rem; font-weight: 750; }
.calendar-period-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.calendar-period-nav .btn { white-space: nowrap; }
.calendar-month-period-heading {
  border: 1px solid #e3d5c8;
  border-bottom: 0;
  border-radius: .75rem .75rem 0 0;
}
.calendar-month-sticky .calendar-grid.calendar-month {
  border-top: 0;
  border-radius: 0 0 .75rem .75rem;
}
.calendar-week .calendar-week-sticky {
  position: sticky;
  top: var(--calendar-sticky-top);
  z-index: 40;
  isolation: isolate;
  background: #f8fafc;
  box-shadow: 0 4px 10px rgb(58 37 28 / 12%);
}
.calendar-week .calendar-week-period-heading { display: block; border-bottom: 1px solid #e5d8ce; }
.calendar-week .calendar-period-subrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .35rem .65rem;
  flex-wrap: wrap;
}
.calendar-swipe-hint { color: #786b62; font-size: .73rem; line-height: 1.25; }
.calendar-week .calendar-week-sticky .calendar-weekdays {
  display: grid !important;
  position: static !important;
  top: auto !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  width: 100%;
  min-width: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid #e5d8ce;
}
.calendar-week .calendar-week-sticky .calendar-weekdays > div {
  min-width: 0;
  padding: .4rem .12rem;
  font-size: .72rem;
}
.calendar-week .calendar-cells { min-width: 0; width: 100%; }
.calendar-list-heading {
  position: sticky;
  top: var(--calendar-sticky-top);
  z-index: 40;
  margin: 0 0 .75rem;
  padding: .7rem .8rem;
  border: 1px solid #e5d8ce;
  border-radius: .75rem;
  background: #f8fafc;
  box-shadow: 0 4px 10px rgb(58 37 28 / 10%);
  scroll-margin-top: var(--calendar-sticky-top);
}
.calendar-list-heading h2 { margin: 0; }
.calendar-month-sticky { scroll-margin-top: var(--calendar-sticky-top); }
.calendar-month-period-heading { scroll-margin-top: var(--calendar-sticky-top); }

@media (max-width: 767.98px) {
  :root { --app-topbar-safe-padding: max(16px, env(safe-area-inset-top, 0px)); --app-topbar-content-height: 58px; }
  .app-main { padding-top: 1rem; }
  .app-topbar-inner { min-height: var(--app-topbar-content-height); }
  .calendar-period-heading { padding: .45rem .5rem; gap: .35rem .55rem; }
  .calendar-period-heading h2 { font-size: .95rem; }
  .calendar-period-nav { gap: .2rem; }
  .calendar-period-nav .btn { padding: .25rem .4rem; font-size: .73rem; }
  .calendar-week .calendar-week-sticky .calendar-weekdays > div { padding: .3rem .03rem; font-size: .64rem; }
  .calendar-week .calendar-period-subrow { align-items: flex-start; }
  .calendar-swipe-hint { flex: 1 1 100%; }
  .calendar-scroll-context-month.calendar-single-scroll .calendar-month-sticky {
    position: sticky;
    top: var(--calendar-sticky-top);
    z-index: 40;
    isolation: isolate;
    background: #f8fafc;
    box-shadow: 0 4px 10px rgb(58 37 28 / 12%);
    padding-bottom: .15rem;
  }
  .calendar-scroll-context-month.calendar-single-scroll .calendar-month-sticky .calendar-period-heading {
    padding-top: .4rem;
    padding-bottom: .4rem;
  }
  .calendar-month-sticky .calendar-grid.calendar-month { box-shadow: none; }
  .calendar-week .calendar-day { scroll-margin-top: calc(var(--app-topbar-height) + 8rem); }
  .calendar-list-heading { padding: .6rem .7rem; }
}
@media (min-width: 768px) {
  .calendar-scroll-context-month .calendar-month-sticky { position: static; top: auto; box-shadow: none; }
}
@media print {
  .app-topbar { padding-top: 0; }
  .app-topbar-inner { min-height: auto; }
  .calendar-week .calendar-week-sticky, .calendar-list-heading, .calendar-month-sticky { position: static !important; top: auto !important; box-shadow: none !important; }
  .calendar-swipe-hint { display: none !important; }
}


/* Version 13.9: align sticky calendar surfaces exactly with the safe-area-aware
   app header; keep pinned headings opaque while the document scrolls beneath. */
:root {
  --app-topbar-height: calc(var(--app-topbar-safe-padding) + var(--app-topbar-content-height) + 1px);
  --calendar-sticky-gap: 0px;
  --calendar-sticky-top: var(--app-topbar-height);
}
.calendar-scroll-context-week.calendar-single-scroll .calendar-week .calendar-week-sticky {
  top: var(--app-topbar-height) !important;
  z-index: 1034;
  background: #fff;
}
.calendar-scroll-context-month.calendar-single-scroll .calendar-month-sticky {
  top: var(--app-topbar-height) !important;
  z-index: 1034;
  background: #fff;
}
.calendar-scroll-context-month.calendar-single-scroll .calendar-month-sticky .calendar-period-heading,
.calendar-scroll-context-month.calendar-single-scroll .calendar-month-sticky .calendar-grid.calendar-month {
  background-color: #fff;
}
.calendar-list-context { position: relative; isolation: isolate; }
.calendar-list-heading {
  top: var(--app-topbar-height) !important;
  z-index: 1034 !important;
  isolation: isolate;
  background: #fff !important;
  opacity: 1;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 5px 12px rgb(58 37 28 / 14%);
}
.calendar-list-heading::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: inherit;
  background: #fff;
}
.calendar-month-agenda-heading {
  font-size: .82rem !important;
  line-height: 1.25;
  font-weight: 750;
  margin-bottom: .35rem !important;
}
.calendar-mobile-agenda-month .calendar-mobile-agenda-item {
  padding: .42rem .55rem;
  border-left-width: 3px;
}
.calendar-mobile-agenda-month .calendar-mobile-agenda-item .small {
  font-size: .68rem;
  line-height: 1.2;
  margin-bottom: .15rem !important;
}
.calendar-mobile-agenda-month .event-list-title {
  font-size: .85rem;
  line-height: 1.25;
  padding: 0;
  text-align: left;
}
.calendar-mobile-agenda-month .calendar-mobile-agenda-main > .small.mt-1,
.calendar-mobile-agenda-month .calendar-mobile-agenda-main > a.small {
  font-size: .7rem;
  line-height: 1.2;
  margin-top: .18rem !important;
}
.calendar-mobile-agenda-month .calendar-mobile-agenda-list { border-radius: .6rem; }
.calendar-period-nav .btn .bi { vertical-align: -.06em; }

/* Type-ahead member assignment UI for Admin > Ministries. */
.ministry-member-autocomplete { position: relative; }
.ministry-member-suggestions {
  position: absolute;
  z-index: 1060;
  top: calc(100% + .2rem);
  left: 0;
  right: 0;
  max-height: 16rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #d9c8ba;
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 10px 28px rgb(58 37 28 / 17%);
}
.ministry-member-suggestions[hidden] { display: none !important; }
.ministry-member-suggestion {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem .8rem;
  border: 0;
  border-bottom: 1px solid #f0e7e0;
  background: #fff;
  color: #2d241f;
  text-align: left;
}
.ministry-member-suggestion:last-child { border-bottom: 0; }
.ministry-member-suggestion:hover,
.ministry-member-suggestion.active { background: #f7eee7; }
.ministry-member-suggestion small { color: #786b62; white-space: nowrap; }
.ministry-member-suggestion-empty { padding: .75rem .8rem; color: #786b62; font-size: .875rem; }
.ministry-selected-heading { display: flex; align-items: center; gap: .75rem; }
.ministry-selected-icon { display: grid; place-items: center; flex: 0 0 2.65rem; height: 2.65rem; border-radius: .8rem; background: #f4ebe3; color: var(--church-blue, #4b3025); font-size: 1.3rem; }
.ministry-assigned-members-list { display: grid; gap: .55rem; }
.ministry-assigned-member { display: flex; align-items: center; gap: .7rem; padding: .65rem; border: 1px solid #e8dcd3; border-radius: .8rem; background: #fff; }
.ministry-assigned-avatar { display: grid; place-items: center; flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #f4ebe3; color: #65442f; font-weight: 800; }
.ministry-empty-members { display: flex; align-items: center; gap: .65rem; padding: .9rem; border: 1px dashed #d9c8ba; border-radius: .8rem; color: #786b62; }
.ministry-empty-members .bi { font-size: 1.25rem; }
@media (max-width: 767.98px) {
  .calendar-scroll-context-week.calendar-single-scroll .calendar-week .calendar-week-sticky,
  .calendar-scroll-context-month.calendar-single-scroll .calendar-month-sticky,
  .calendar-list-heading { scroll-margin-top: var(--app-topbar-height); }
  .calendar-month-agenda-heading { font-size: .78rem !important; }
  .calendar-mobile-agenda-month .calendar-mobile-agenda-item { padding: .38rem .48rem; }
  .ministry-assigned-member { align-items: flex-start; flex-wrap: wrap; }
  .ministry-assigned-member form { margin-left: auto !important; }
}


/* v13.9.2: Calendar begins flush beneath the sticky app header. Bootstrap's
   py-4 utility is !important, so override it specifically for this page. */
.app-main.calendar-page-main { padding-top: 0 !important; }