.app .app-drawer{width:85%;max-width:360px;background:linear-gradient(180deg,#0f2744 0%,#0f2744f5 65%,#0f2744c9 100%),url('../../assets/faithful-dawn.jpg') center bottom/cover;color:#f5f8fc}
/* The head is the church's mark and the close button, nothing else. It used
   to carry a 32px "Menu" title; a panel that slides out from the menu button
   does not need a caption (faithful-mobile-navigation.js removes it). */
.app .drawer-head{position:relative;min-height:68px;padding:12px 60px 12px 20px;gap:0;align-items:flex-start;justify-content:center;border-bottom:1px solid #ffffff1f}
.app .drawer-logo.drawer-wordmark{height:40px;max-width:100%}
.app .fmn-close{position:absolute;right:10px;top:12px;line-height:1;width:44px;height:44px;border:0;background:none;color:white;font-size:28px;border-radius:8px;cursor:pointer}
.app .drawer-scroll{padding:12px 12px 24px}
/* Rows are in the UI face at 17px, the same step the rest of the app uses for
   row and card titles. They were 20px Georgia -- a third typeface, found
   nowhere else on the phone. No chevrons: every row here navigates, so a "›"
   on each one distinguishes nothing; the filled row says where you are. */
.app .drawer-nav{gap:2px}
.app .drawer-item{min-height:50px;padding:0 14px;border-radius:14px;gap:14px;font:600 17px/1.3 var(--font-ui,Inter),sans-serif;letter-spacing:0;color:#edf7ff;text-align:left}
.app .drawer-item.active{background:#ffffff1f;box-shadow:none;color:#fff}
.app .drawer-item:active{background:#ffffff14}
.app .drawer-item-icon{width:24px;height:24px;color:#cfe3f7}
.app .drawer-item.active .drawer-item-icon{color:#8dccf3}
.app .drawer-link{min-height:48px;padding-left:14px;padding-right:14px;gap:14px;font:400 15px/1.4 var(--font-ui,Inter),sans-serif;color:#e1ebf6}
.app .drawer-section-label{font:600 12px/1.4 var(--font-ui,Inter),sans-serif;color:#a9c1d8;letter-spacing:.06em;margin-top:16px;padding-top:16px;border-top:1px solid #ffffff1f}
.app .drawer-divider{background:#ffffff1f;margin:10px 2px}
/* A label that opens the list is heading the only list there is: the phone
   drops "Get Connected" and "Quick Links", which left "MAIN" over everything. */
.app .drawer-scroll > .drawer-section-label:first-child{display:none}
/* The drawer is a grid so its last row can hold two siblings side by side:
   Settings (appended by faithful-destinations.js) and Sign Out (moved here by
   faithful-mobile-navigation.js). Head and list span both columns. */
.app #app-drawer{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto}
.app #app-drawer > .drawer-head,
.app #app-drawer > .drawer-scroll{grid-column:1/-1}
.app #app-drawer > .fd-settings-cog{grid-column:1;grid-row:3}
.app #app-drawer > .drawer-signout{grid-column:2;grid-row:3;width:auto;min-height:48px;margin:0;padding:12px 22px max(14px,env(safe-area-inset-bottom)) 18px;gap:10px;border-radius:0;border:solid #ffffff38;border-width:1px 0 0 1px;background:#173755;font:600 15px/1.4 var(--font-ui,Inter),sans-serif;color:#e1ebf6}
.app #app-drawer > .drawer-signout:active{background:#245173}
/* The crisis card is the one thing here that is not navigation, so it keeps its
   own surface -- on the same type scale as everything else. */
.app .app-drawer .drawer-crisis{border-radius:16px;padding:16px}
.app .app-drawer .drawer-crisis-title{font:600 15px/1.3 var(--font-ui,Inter),sans-serif}
.app .app-drawer .drawer-crisis-sub{font-size:13px;line-height:1.5}
/* The body line ("Access free, confidential resources and helplines.") says
   what the subline, the button and the footer already say between them. In the
   drawer it is the difference between the whole card fitting and its last line
   being cut off, so it is dropped here; the full wording stays on Leaders. */
.app .app-drawer .drawer-crisis-body{display:none}
.app .app-drawer .drawer-crisis-head{margin-bottom:12px}
.app .app-drawer .drawer-crisis-btn{min-height:48px;border-radius:24px;font:600 15px/1.2 var(--font-ui,Inter),sans-serif}
.app .app-drawer .drawer-crisis-foot{font-size:12px;line-height:1.5}
.app #app-drawer > .fd-settings-cog{font:600 15px/1.4 var(--font-ui,Inter),sans-serif;padding-left:26px;gap:14px}
.app #app-drawer > .fd-settings-cog > span:first-child{font-size:22px;width:24px;text-align:center}
/* faithful-destinations.js appends its screens (Settings, My story, Privacy...)
   to .app AFTER the tab bar, and .app is a flex column -- so on every one of
   those screens the tab bar was drawn at the TOP. order puts it back under
   whichever screen is showing; the overlays are absolutely positioned and do
   not take part. */
.app > .tabbar-zone{order:1}
.app .tabbar-zone{padding-left:0;padding-right:0;background:#fff;border-top:1px solid #d8e4ef}
.app .tabbar{border-radius:0;background:#fff;box-shadow:none;border:0;padding:4px 8px;backdrop-filter:none}
.app .tab{position:relative;min-height:52px;font-size:12px;color:#344d69;gap:3px}
.app .tab-icon{width:44px;height:30px;border-radius:18px;color:#284666}
.app .tab-icon svg{color:inherit!important;opacity:1}
.app .tab.active{color:#173353}
.app .tab.active .tab-icon{background:#e1effc;color:#0891b2;box-shadow:none}
.app .tab-badge{background:#1265ad;color:white;border:2px solid white;right:calc(50% - 24px);top:0;font-size:10px;min-width:17px;height:17px}
.app.menu-open .tabbar-zone{pointer-events:none;filter:brightness(.65)}
.app.menu-open .toast,.app.menu-open .watch-donate-toast{visibility:hidden}
.app .toast{background:#edf7ff;color:#173b5c;border:1px solid #d1e4f4;box-shadow:0 5px 18px #102d4b22;bottom:calc(var(--ios-tab-chrome-h) + 16px);border-radius:14px;font-size:13px}
.app .drawer-item:focus-visible,.app .drawer-link:focus-visible,.app .tab:focus-visible,.app .fmn-close:focus-visible{outline:3px solid #79c5ff;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.app .app-drawer,.app .app-drawer-backdrop{transition:none}}