/* =========================================================
   MMUST CU PHASE 39.2.1 — MOBILE SOCIAL · NAV · SEARCH POLISH
   Palette lock: Blue #0099FF · Orange #FF9900 · White #FFFFFF
   Additive overrides only. No application/business logic changes.
   ========================================================= */
:root{
  --p3921-blue:#0099FF;
  --p3921-orange:#FF9900;
  --p3921-white:#FFFFFF;
  --p3921-soft:#F5F7FA;
  --p3921-grey:#CCCCCC;
  --p3921-charcoal:#1F2937;
}

/* ---------------------------------------------------------
   1. Public phone top bar — visible SVG search action.
   --------------------------------------------------------- */
.mobile-header-search{
  display:none;
  width:44px;
  height:44px;
  flex:0 0 44px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--p3921-grey);
  border-radius:12px;
  background:var(--p3921-white);
  color:var(--p3921-blue);
  box-shadow:0 4px 14px rgba(31,41,55,.05);
  transition:border-color .18s ease,color .18s ease,background .18s ease,transform .18s ease;
}
.mobile-header-search [data-lucide],
.mobile-header-search svg,
.mobile-header-search .ui-svg-icon{width:21px;height:21px;display:block}
.mobile-header-search:hover,
.mobile-header-search:focus-visible{
  border-color:var(--p3921-orange);
  color:var(--p3921-white);
  background:var(--p3921-blue);
  outline:3px solid rgba(255,153,0,.35);
  outline-offset:2px;
}
@media(max-width:1380px){
  .public-site-body .mobile-header-search{display:inline-flex;margin-left:auto}
  .public-site-body .v3-menu-button{flex:0 0 auto}
}
@media(max-width:600px){
  .public-site-body .v3-nav-wrap{gap:8px}
  .public-site-body .mobile-header-search{width:42px;height:42px;flex-basis:42px;border-radius:11px}
}
@media(max-width:390px){
  .public-site-body .v3-brand strong{font-size:11px!important;line-height:1.12}
  .public-site-body .v3-brand small{font-size:8px!important}
  .public-site-body .mobile-header-search{width:40px;height:40px;flex-basis:40px}
  .public-site-body .v3-menu-button{width:40px!important;height:40px!important}
}

/* ---------------------------------------------------------
   2. Public drawer + Member Portal close controls.
   Prevent dark/black cancel buttons and use true SVG X icons.
   --------------------------------------------------------- */
.drawer-close,
.portal-sidebar-close{
  -webkit-appearance:none!important;
  appearance:none!important;
  opacity:1!important;
  filter:none!important;
  display:grid;
  place-items:center;
  border:2px solid var(--p3921-blue)!important;
  background:var(--p3921-white)!important;
  color:var(--p3921-blue)!important;
  box-shadow:0 5px 16px rgba(0,153,255,.12)!important;
  font-size:24px!important;
  line-height:1!important;
  cursor:pointer;
}
.drawer-close{width:42px!important;height:42px!important;border-radius:12px!important}
.portal-sidebar-close{width:42px!important;height:42px!important;border-radius:11px!important}
.drawer-close [data-lucide],.drawer-close svg,
.portal-sidebar-close [data-lucide],.portal-sidebar-close svg,
.drawer-close .ui-svg-icon,.portal-sidebar-close .ui-svg-icon{
  width:21px!important;height:21px!important;display:block
}
.drawer-close:hover,.drawer-close:focus-visible,
.portal-sidebar-close:hover,.portal-sidebar-close:focus-visible{
  border-color:var(--p3921-orange)!important;
  background:var(--p3921-blue)!important;
  color:var(--p3921-white)!important;
  outline:3px solid rgba(255,153,0,.40)!important;
  outline-offset:2px!important;
}
/* app.css intentionally hides the portal close button on desktop. */
@media(min-width:1051px){.portal-sidebar-close{display:none!important}}
@media(max-width:1050px){.portal-sidebar-close{display:grid!important}}

/* ---------------------------------------------------------
   3. Homepage social handles — ALWAYS two cards per row on
      phones, including narrow screens below 430px.
   --------------------------------------------------------- */
@media(max-width:700px){
  .social-home-section .social-links-cards{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .social-home-section .social-links-cards .social-link{
    min-width:0!important;
    min-height:158px!important;
    padding:13px!important;
    border-radius:14px!important;
  }
  .social-home-section .social-links-cards .social-link-icon{
    width:42px!important;height:42px!important;border-radius:11px!important
  }
  .social-home-section .social-links-cards .social-link-icon svg{width:20px!important;height:20px!important}
  .social-home-section .social-links-cards .social-link-copy{margin-top:12px!important;padding-right:8px!important}
  .social-home-section .social-links-cards .social-link-copy small{font-size:9px!important;letter-spacing:.045em!important}
  .social-home-section .social-links-cards .social-link-copy strong{font-size:10px!important;line-height:1.3!important;overflow-wrap:anywhere!important}
  .social-home-section .social-links-cards .social-link-copy span{font-size:9px!important;line-height:1.4!important;margin-top:5px!important}
  .social-home-section .social-link-arrow{right:10px!important;top:12px!important;font-size:17px!important}
}
@media(max-width:430px){
  .social-home-section .social-links-cards{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .social-home-section .social-links-cards .social-link{min-height:146px!important;padding:11px!important}
  .social-home-section .social-links-cards .social-link-icon{width:38px!important;height:38px!important}
  .social-home-section .social-links-cards .social-link-copy span{display:none!important}
  .social-home-section .social-links-cards .social-link-copy strong{font-size:9px!important}
}

/* ---------------------------------------------------------
   4. Search page — MMUST CU branded visual system.
   --------------------------------------------------------- */
.phase39-search-hero{
  background:
    radial-gradient(circle at 88% 22%,rgba(255,153,0,.72) 0 4%,rgba(255,153,0,.24) 5% 18%,rgba(255,153,0,0) 39%),
    linear-gradient(135deg,#007FCC 0%,var(--p3921-blue) 62%,#0A7DC2 100%)!important;
  border-bottom:6px solid var(--p3921-orange);
  color:var(--p3921-white);
}
.phase39-search-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,rgba(255,255,255,.10),transparent 38% 62%,rgba(255,153,0,.10));
  pointer-events:none;
}
.phase39-search-hero:after{
  width:300px!important;height:300px!important;right:-100px!important;top:-120px!important;
  background:radial-gradient(circle,rgba(255,153,0,.72),rgba(255,153,0,0) 68%)!important;
}
.phase39-search-hero .container{position:relative;z-index:1}
.phase39-search-hero .eyebrow{color:var(--p3921-white)!important}
.phase39-search-hero h1{color:var(--p3921-white)!important}
.phase39-search-hero p{color:rgba(255,255,255,.92)!important}
.phase39-search-form{
  border:2px solid rgba(255,255,255,.90)!important;
  box-shadow:0 18px 45px rgba(0,76,128,.22)!important;
}
.phase39-search-form>[data-lucide],.phase39-search-form svg{color:var(--p3921-blue)!important}
.phase39-search-form .button.primary{
  background:var(--p3921-orange)!important;
  border-color:var(--p3921-orange)!important;
  color:#111!important;
}
.phase39-search-form .button.primary:hover,
.phase39-search-form .button.primary:focus-visible{
  background:var(--p3921-blue)!important;
  border-color:var(--p3921-blue)!important;
  color:var(--p3921-white)!important;
}
.phase39-search-section{
  background:linear-gradient(180deg,var(--p3921-white) 0%,#F3FAFF 54%,var(--p3921-soft) 100%)!important;
}
.phase39-search-intro .eyebrow,
.phase39-search-results-head .eyebrow{color:var(--p3921-blue)!important}
.phase39-search-suggestions a{
  border-color:rgba(0,153,255,.28)!important;
  color:var(--p3921-blue)!important;
}
.phase39-search-suggestions a:hover,
.phase39-search-suggestions a:focus-visible{
  border-color:var(--p3921-orange)!important;
  background:var(--p3921-blue)!important;
  color:var(--p3921-white)!important;
  outline:none;
}
.phase39-search-result{
  border:1px solid #DCE5EC!important;
}
.phase39-search-result:nth-child(even){border-color:#DCE5EC!important}
.phase39-search-result:hover,
.phase39-search-result:focus-visible{
  border-color:rgba(0,153,255,.55)!important;
  outline:3px solid rgba(255,153,0,.28)!important;
  outline-offset:2px!important;
}
.phase39-result-icon{
  background:rgba(0,153,255,.10)!important;
  color:var(--p3921-blue)!important;
  border:1px solid rgba(0,153,255,.18);
}
.phase39-search-result:nth-child(even) .phase39-result-icon{
  background:rgba(255,153,0,.13)!important;
  color:#C96E00!important;
  border-color:rgba(255,153,0,.30);
}
.phase39-result-copy small{color:#C96E00!important}
.phase39-result-arrow{color:var(--p3921-blue)!important}
.phase39-search-empty{
  border-top:5px solid var(--p3921-blue)!important;
  background:var(--p3921-white)!important;
}
.phase39-empty-icon{color:var(--p3921-orange)!important}

/* Mobile search stays spacious and thumb-friendly. */
@media(max-width:600px){
  .phase39-search-hero{border-bottom-width:5px}
  .phase39-search-form{padding:7px 7px 7px 11px!important;border-radius:14px!important}
  .phase39-search-form input{font-size:16px!important}
  .phase39-search-form .button{width:auto!important;min-width:82px!important;padding:0 12px!important}
  .phase39-search-result{padding:12px 10px!important}
}

@media(prefers-reduced-motion:reduce){
  .mobile-header-search{transition:none!important}
}

/* Phase 39.2.1 controls use local inline SVGs: immediate, colourable and CDN-independent. */
.phase3921-static-icon{width:21px;height:21px;display:block;flex:0 0 auto;color:inherit}
.drawer-close .phase3921-static-icon,.portal-sidebar-close .phase3921-static-icon{width:21px!important;height:21px!important}

/* ---------------------------------------------------------
   5. Phase 39.2.1 clean-edge audit.
   Coloured vertical stripes are no longer used as a generic
   decorative motif. Status is communicated with a complete
   border, soft tint, icon or badge instead.
   --------------------------------------------------------- */
.phase11-dashboard .dashboard-welcome,
.dashboard-welcome,
.mission-card,
.team-preview-card,
.account-found,
.join-mission,
.join-note,
.media-admin-note,
.legacy-source-row,
.internal-archive-note,
.historical-load-message,
.gallery-load-message,
.media-member-cta-card,
.community-unassigned-card,
.notification-info-card,
.request-value-box,
.helpdesk-notification-list article,
.member-chair-oversight,
.profile-photo-manager,
.about-theme-card,
.about-affiliations,
.legacy-profile-note>.container,
.weekly-source-note,
.legacy-registration-identity,
.formation-window-banner,
.formation-current-cycle-note,
.public-discovery-links a,
.contact-channel-stack>a,
.contact-location-line,
.home-give-strip-inner,
.give-note{
  border-left-width:1px!important;
  border-left-style:solid!important;
  border-left-color:#D9E1E8!important;
}
.phase11-dashboard .dashboard-welcome,
.dashboard-welcome{
  border:1px solid #CFEAFB!important;
  box-shadow:0 10px 28px rgba(31,41,55,.05)!important;
}
.phase39-search-result{
  border:1px solid #DCE5EC!important;
  box-shadow:0 5px 16px rgba(31,41,55,.035)!important;
}
.phase39-search-result:nth-child(even){border-color:#DCE5EC!important}
.phase39-search-result:hover,
.phase39-search-result:focus-visible{
  border-color:rgba(0,153,255,.55)!important;
  box-shadow:0 10px 26px rgba(0,153,255,.08)!important;
}
.portal-nav-section>a{border-left-width:1px!important}
.portal-nav-section>a:hover,
.portal-nav-section>a:focus-visible{border-left-color:#CCCCCC!important}
.portal-nav-section>a.is-active{
  border:1px solid #C9EAFF!important;
  background:#EDF8FF!important;
  box-shadow:none!important;
}
.notice-card.is-pinned,
.community-notice-row.is-pinned,
.notification-feed-card.pinned,
.helpdesk-member-card.has-update,
.member-event-card.is-registered{
  border:1px solid rgba(255,153,0,.50)!important;
  background:#FFF9EF!important;
}
.notification-feed-card.unread,
.member-notice-card.is-unread,
.member-event-card.is-checked-in{
  border:1px solid rgba(0,153,255,.40)!important;
  background:#F2FAFF!important;
}
.alert.success{
  border:1px solid rgba(0,153,255,.42)!important;
  background:#F2FAFF!important;
}
.alert.error,
.warning{
  border:1px solid rgba(255,153,0,.55)!important;
  background:#FFF9EF!important;
}
.join-steps>div.active{
  border:1px solid rgba(255,153,0,.52)!important;
  background:#FFF9EF!important;
}
.join-steps>div.done{
  border:1px solid rgba(0,153,255,.38)!important;
  background:#F2FAFF!important;
}
.formation-active-note,
.formation-closed-note,
.formation-current-cycle-note,
.formation-window-banner{
  border:1px solid #D7E1E9!important;
}
.formation-active-note{border-color:rgba(0,153,255,.38)!important}
.formation-active-note.completed{border-color:rgba(255,153,0,.48)!important}
.formation-window-banner{border-color:rgba(0,153,255,.42)!important}
.formation-window-banner.orange{border-color:rgba(255,153,0,.55)!important}
.weekly-event-card.featured{border-left-width:1px!important;border-color:rgba(255,153,0,.48)!important}
.regular-gathering{border-left:0!important;border:1px solid rgba(255,255,255,.28)!important}
.home-give-strip-inner{border:1px solid #D9E1E8!important}
.mobile-give-link{border-left-width:1px!important}

/* ---------------------------------------------------------
   6. Gallery filters — simple, compact and phone friendly.
   --------------------------------------------------------- */
.gallery-filter-bar{
  display:grid;
  grid-template-columns:minmax(240px,1.7fr) minmax(130px,.65fr) minmax(140px,.7fr) auto auto;
  gap:10px;
  align-items:end;
  margin-top:18px;
  margin-bottom:24px;
  padding:15px;
  border:1px solid #DCE4EB;
  border-radius:15px;
  background:#FFFFFF;
  box-shadow:0 8px 24px rgba(31,41,55,.045);
}
.gallery-filter-bar label{display:grid;gap:6px;min-width:0;color:#344054;font-size:10px;font-weight:900;letter-spacing:.035em;text-transform:uppercase}
.gallery-filter-bar input,.gallery-filter-bar select{
  min-height:43px;width:100%;border:1px solid #CCD6DF;border-radius:10px;background:#fff;color:#1F2937;padding:0 11px;font:inherit;text-transform:none;letter-spacing:0
}
.gallery-filter-bar input:focus,.gallery-filter-bar select:focus{outline:3px solid rgba(0,153,255,.13);border-color:var(--p3921-blue)}
.gallery-filter-search>div{position:relative;display:flex;align-items:center}
.gallery-filter-search>div>svg,.gallery-filter-search>div>[data-lucide]{position:absolute;left:11px;width:17px;height:17px;color:var(--p3921-blue);pointer-events:none}
.gallery-filter-search input{padding-left:37px}
.gallery-filter-bar .button{min-height:43px!important;margin:0!important;white-space:nowrap}
@media(max-width:820px){
  .gallery-filter-bar{grid-template-columns:minmax(0,1fr) minmax(115px,.55fr);gap:9px}
  .gallery-filter-search{grid-column:1/-1}
  .gallery-filter-bar .button{width:100%!important}
}
@media(max-width:430px){
  .gallery-filter-bar{width:min(100% - 18px,1260px);padding:11px;grid-template-columns:1fr 1fr}
  .gallery-filter-bar label>span{font-size:9px}
  .gallery-filter-bar input,.gallery-filter-bar select{min-height:40px;font-size:12px}
  .gallery-filter-bar .button{min-height:40px!important;padding:0 9px!important;font-size:10px!important}
}

/* ---------------------------------------------------------
   7. In-app member document viewer.
   --------------------------------------------------------- */
.member-document-viewer-page{padding-bottom:50px!important}
.document-viewer-head{align-items:center!important}
.document-viewer-summary{
  display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;padding:11px 13px;
  border:1px solid #DCE5EC;border-radius:12px;background:#F7FBFE;color:#536170
}
.document-viewer-summary svg,.document-viewer-summary [data-lucide]{width:18px;height:18px;flex:0 0 18px;color:var(--p3921-blue);margin-top:1px}
.document-viewer-summary p{margin:0!important;font-size:12px!important;line-height:1.5!important}
.document-viewer-shell{
  min-height:640px;padding:10px;border:1px solid #D8E1E8;border-radius:18px;background:#fff;
  box-shadow:0 12px 34px rgba(31,41,55,.06);overflow:hidden
}
.document-viewer-frame{display:block;width:100%;height:min(76vh,900px);min-height:620px;border:0;border-radius:12px;background:#F5F7FA}
.document-image-stage{min-height:620px;display:grid;place-items:center;padding:20px;border-radius:12px;background:#F5F7FA}
.document-image-stage img{display:block;max-width:100%;max-height:78vh;width:auto;height:auto;border-radius:10px;box-shadow:0 8px 28px rgba(31,41,55,.10)}
.document-audio-stage,.document-viewer-external,.document-viewer-empty{min-height:520px;display:grid;place-items:center;align-content:center;gap:12px;text-align:center}
.document-audio-stage>svg,.document-viewer-external>svg,.document-viewer-empty>svg{width:46px;height:46px;color:var(--p3921-blue)}
.document-audio-stage audio{width:min(100%,620px);margin-top:8px}
.document-viewer-external p{max-width:540px;margin:0 auto 6px;color:#667085}
@media(max-width:700px){
  .document-viewer-head .head-actions{display:flex!important;flex-wrap:wrap}
  .document-viewer-shell{width:min(100% - 18px,1260px);min-height:470px;padding:6px;border-radius:14px}
  .document-viewer-frame{height:70vh;min-height:470px;border-radius:10px}
  .document-image-stage{min-height:460px;padding:10px}
  .document-audio-stage,.document-viewer-external,.document-viewer-empty{min-height:430px;padding:18px}
}

/* ---------------------------------------------------------
   8. Concise copy rhythm — prevent support text from taking
      over card hierarchy while keeping full content readable.
   --------------------------------------------------------- */
.member-portal-content .resource-description,
.member-portal-content .announcement-row p,
.member-portal-content .community-feature-card p{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden
}
@media(max-width:600px){
  .member-portal-content .resource-description,
  .member-portal-content .announcement-row p,
  .member-portal-content .community-feature-card p{-webkit-line-clamp:2}
}

/* Member Portal blanket card-edge normalization: no decorative side stripe. */
.member-portal-content .panel,
.member-portal-content .stat-card,
.member-portal-content .notice-card,
.member-portal-content .member-event-card,
.member-portal-content .modern-resource-card,
.member-portal-content .modern-sermon-card,
.member-portal-content .community-unassigned-card,
.member-portal-content .profile-photo-manager,
.member-portal-content .notification-feed-card,
.member-portal-content .member-notice-card,
.member-portal-content .helpdesk-member-card,
.member-portal-content .request-value-box,
.member-portal-content .formation-window-banner,
.member-portal-content .formation-current-cycle-note,
.member-portal-content .legacy-registration-identity{
  border-left-width:1px!important;
}
.mock-cards div,.file-list>a{border-left-width:1px!important;border-left-color:#D9E1E8!important}
.member-story-copy{border-left:0!important}