/* Saathly UI polish — 2026-09-27
   Visual-only overrides: homepage green copy, filled menu colors, glassy actions. */

:root{
  --saathly-green:#157347;
  --saathly-green-soft:#e7f6ee;
  --glass-bg:rgba(255,255,255,.52);
  --glass-line:rgba(255,255,255,.72);
  --glass-shadow:0 10px 28px rgba(82,24,54,.14);
}

/* Requested homepage copy: clear green on desktop + mobile. */
body.landing-mode .s20-reference-copy .s20-trust-line,
body.landing-mode .s20-reference-copy .s20-lede,
body.landing-mode .s20-cover .s20-hero-copy .s20-trust-line,
body.landing-mode .s20-cover .s20-hero-copy .s20-lede{
  color:var(--saathly-green)!important;
  -webkit-text-fill-color:var(--saathly-green)!important;
  text-shadow:none!important;
}

/* Filled desktop/side menu palette. */
body:not(.admin-mode) #nav a{
  border:1px solid transparent!important;
  font-weight:800!important;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease!important;
}
body:not(.admin-mode) #nav a[data-page="landing"]{background:#fff0f5!important;color:#8d174c!important;-webkit-text-fill-color:#8d174c!important;border-color:#f6cadb!important}
body:not(.admin-mode) #nav a[data-page="dashboard"]{background:#eef0ff!important;color:#4351a2!important;-webkit-text-fill-color:#4351a2!important;border-color:#dce0ff!important}
body:not(.admin-mode) #nav a[data-page="profile"]{background:#f2edff!important;color:#665298!important;-webkit-text-fill-color:#665298!important;border-color:#e1d8fa!important}
body:not(.admin-mode) #nav a[data-page="directory"]{background:#e8f4ff!important;color:#28688f!important;-webkit-text-fill-color:#28688f!important;border-color:#d4e8f7!important}
body:not(.admin-mode) #nav a[data-page="messages"]{background:#e7f7f0!important;color:#27705b!important;-webkit-text-fill-color:#27705b!important;border-color:#d0eadf!important}
body:not(.admin-mode) #nav a[data-page="notifications"]{background:#fff5dc!important;color:#8a6115!important;-webkit-text-fill-color:#8a6115!important;border-color:#f0ddb0!important}
body:not(.admin-mode) #nav a[data-page="plans"]{background:#fff0e7!important;color:#9b4b1e!important;-webkit-text-fill-color:#9b4b1e!important;border-color:#f2d6c4!important}
body:not(.admin-mode) #nav a[data-page="confessions"]{background:#ffe9f1!important;color:#a32e5d!important;-webkit-text-fill-color:#a32e5d!important;border-color:#f6cada!important}
body:not(.admin-mode) #nav a[data-page="stories"]{background:#eef9e7!important;color:#4d7b2d!important;-webkit-text-fill-color:#4d7b2d!important;border-color:#d9efca!important}
body:not(.admin-mode) #nav a[data-page="membership"]{background:#f8eaff!important;color:#7b3d91!important;-webkit-text-fill-color:#7b3d91!important;border-color:#e8d0f2!important}
body:not(.admin-mode) #nav a[data-page="settings"]{background:#eef1f4!important;color:#4c5967!important;-webkit-text-fill-color:#4c5967!important;border-color:#dfe5ea!important}
body:not(.admin-mode) #nav a[data-page="rules"]{background:#edf7f7!important;color:#376f70!important;-webkit-text-fill-color:#376f70!important;border-color:#d5e8e8!important}
body:not(.admin-mode) #nav a:hover{transform:translateY(-1px)!important;filter:saturate(1.08)!important;box-shadow:0 7px 18px rgba(57,28,46,.10)!important}
body:not(.admin-mode) #nav a.active{outline:2px solid currentColor!important;outline-offset:-2px!important;box-shadow:0 8px 20px rgba(57,28,46,.12)!important}

/* Mobile menu items keep distinct filled colors. */
@media(max-width:900px){
  body:not(.admin-mode) .mobile-bottom-nav a,
  body:not(.admin-mode) .mobile-bottom-nav button{
    border-radius:16px!important;
    border:1px solid transparent!important;
    box-shadow:0 5px 13px rgba(40,25,35,.07)!important;
  }
  body:not(.admin-mode) .mobile-bottom-nav [data-mobile-nav="home"]{background:#fff0f5!important;color:#8d174c!important;border-color:#f6cadb!important}
  body:not(.admin-mode) .mobile-bottom-nav [data-mobile-nav="explore"]{background:#e8f4ff!important;color:#28688f!important;border-color:#d4e8f7!important}
  body:not(.admin-mode) .mobile-bottom-nav [data-mobile-nav="messages"]{background:#e7f7f0!important;color:#27705b!important;border-color:#d0eadf!important}
  body:not(.admin-mode) .mobile-bottom-nav [data-mobile-nav="profile"]{background:#f2edff!important;color:#665298!important;border-color:#e0d7f6!important}
  body:not(.admin-mode) .mobile-bottom-nav .mobile-create{background:linear-gradient(145deg,rgba(255,224,116,.94),rgba(255,199,68,.88))!important;color:#5c4300!important;border-color:rgba(223,170,37,.44)!important;box-shadow:0 8px 18px rgba(163,112,0,.16)!important}
}

/* Glassy action language. Visual only; semantics and routes stay unchanged. */
.button,
.s20-button,
button:not(.mobile-menu):not(.scrim),
.card-link,
.header-create-plan{
  position:relative;
  overflow:hidden;
  -webkit-backdrop-filter:blur(14px) saturate(135%);
  backdrop-filter:blur(14px) saturate(135%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.58),var(--glass-shadow);
  transition:transform .13s ease,box-shadow .13s ease,filter .13s ease,background .13s ease;
}
.button::before,
.s20-button::before,
button:not(.mobile-menu):not(.scrim)::before,
.card-link::before,
.header-create-plan::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.38),rgba(255,255,255,.06) 44%,rgba(255,255,255,.18));
  opacity:.78;
}
.button>* , .s20-button>* , button:not(.mobile-menu):not(.scrim)>* , .card-link>* , .header-create-plan>*{position:relative;z-index:1}

/* Preserve primary identity while adding glass depth. */
.button,
.s20-button.primary,
.login-install-primary,
.membership-upgrade-cta{
  border-color:rgba(255,255,255,.46)!important;
  background:linear-gradient(135deg,rgba(177,24,82,.94),rgba(221,54,113,.90))!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.button.secondary,
.card-link,
.tabs button,
.text-button{
  background:rgba(255,255,255,.56)!important;
  border-color:rgba(155,91,119,.18)!important;
  color:#7b1647!important;
  -webkit-text-fill-color:#7b1647!important;
}

/* Click/press feedback: unmistakable glass press, no layout jump/glitch. */
.button:active,
.s20-button:active,
button:not(.mobile-menu):not(.scrim):active,
.card-link:active,
.header-create-plan:active{
  transform:translateY(1px) scale(.985)!important;
  filter:brightness(1.04) saturate(1.08)!important;
  box-shadow:inset 0 2px 10px rgba(255,255,255,.34),0 4px 12px rgba(71,25,49,.16)!important;
}

@media(prefers-reduced-motion:reduce){
  body:not(.admin-mode) #nav a,.button,.s20-button,button,.card-link,.header-create-plan{transition:none!important}
}

/* 2026-09-27: colorful open header + trust-card readability polish. */
body.landing-mode .s20-reference-cover{
  background:
    radial-gradient(circle at 8% 18%,rgba(255,148,176,.30),transparent 27%),
    radial-gradient(circle at 24% 6%,rgba(255,205,153,.25),transparent 24%),
    radial-gradient(circle at 72% 8%,rgba(150,220,216,.22),transparent 25%),
    radial-gradient(circle at 91% 14%,rgba(154,177,255,.24),transparent 28%),
    radial-gradient(circle at 86% 72%,rgba(174,229,190,.22),transparent 25%),
    radial-gradient(circle at 62% 70%,rgba(210,164,238,.20),transparent 27%),
    linear-gradient(135deg,#fffdfc 0%,#fff8fb 46%,#fffefe 100%)!important;
}

/* Logo and account area sit directly on the page — no long header card/box. */
body.landing-mode .s20-reference-header{
  margin:10px clamp(16px,3.2vw,52px) 0!important;
  padding:12px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
body.landing-mode .s20-reference-header .s20-brand-group,
body.landing-mode .s20-reference-header .s20-brand,
body.landing-mode .s20-reference-header #homeMenuToggle{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
body.landing-mode .s20-reference-header .s20-brand-image{
  display:block!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
}
body.landing-mode .s20-reference-header .s20-profile-trigger{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Respect section: three distinct, colorful, readable cards. */
body.landing-mode .s20-trust-grid article{
  border-width:1px!important;
  box-shadow:0 12px 28px rgba(54,35,49,.08)!important;
}
body.landing-mode .s20-trust-grid article:nth-child(1){
  background:linear-gradient(145deg,#ecfff4 0%,#dff7e9 100%)!important;
  border-color:#bde6cc!important;
}
body.landing-mode .s20-trust-grid article:nth-child(2){
  background:linear-gradient(145deg,#fff1f6 0%,#ffe2ec 100%)!important;
  border-color:#f4bfd3!important;
}
body.landing-mode .s20-trust-grid article:nth-child(3){
  background:linear-gradient(145deg,#eef3ff 0%,#e5e8ff 100%)!important;
  border-color:#c8d1f6!important;
}
body.landing-mode .s20-trust-grid article:nth-child(1)>span{background:#c9f0d8!important;color:#17623a!important}
body.landing-mode .s20-trust-grid article:nth-child(2)>span{background:#ffd3e3!important;color:#8c194d!important}
body.landing-mode .s20-trust-grid article:nth-child(3)>span{background:#d8defb!important;color:#34458f!important}
body.landing-mode .s20-trust-grid strong{
  color:#241823!important;
  -webkit-text-fill-color:#241823!important;
  font-weight:850!important;
}
body.landing-mode .s20-trust-grid p{
  color:#493a47!important;
  -webkit-text-fill-color:#493a47!important;
  font-weight:600!important;
}
body.landing-mode .s20-trust .s20-section-head h2{
  color:#241823!important;
  -webkit-text-fill-color:#241823!important;
}
body.landing-mode .s20-trust .s20-section-head>a{
  color:#6f1d48!important;
  -webkit-text-fill-color:#6f1d48!important;
  font-weight:800!important;
}

@media(max-width:760px){
  body.landing-mode .s20-reference-header{margin:6px 12px 0!important;padding:8px 0!important}
}


/* 2026-09-27 deploy-fix: readability audit for light/pastel surfaces. */
body.landing-mode .s20-reference-cover .s20-eyebrow{
  color:#6f1d48!important;
  -webkit-text-fill-color:#6f1d48!important;
  text-shadow:none!important;
  font-weight:850!important;
}
body.landing-mode .s20-reference-cover .s20-safety-line span{
  color:#3f2835!important;
  -webkit-text-fill-color:#3f2835!important;
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(111,29,72,.18)!important;
  font-weight:750!important;
  text-shadow:none!important;
}
body.landing-mode .s20-section-head .s20-eyebrow,
body.landing-mode .s20-section-head p,
body.landing-mode .s20-preview-card p,
body.landing-mode .s20-confession-card p,
body.landing-mode .s20-plan-card p,
body.landing-mode .s20-story-card p,
body.landing-mode .s20-trust-grid p{
  color:#4b3844!important;
  -webkit-text-fill-color:#4b3844!important;
}
body.landing-mode .s20-section-head h2,
body.landing-mode .s20-preview-card strong,
body.landing-mode .s20-confession-card strong,
body.landing-mode .s20-plan-card strong,
body.landing-mode .s20-story-card strong{
  color:#241823!important;
  -webkit-text-fill-color:#241823!important;
}
body.member-signed-in:not(.admin-mode) :is(.muted,.eyebrow,.lede,small,.help,.subtle){
  color:#5b4652!important;
  -webkit-text-fill-color:#5b4652!important;
}


/* Only signed-out visitors see blurred member portraits. */
body:not(.member-signed-in):not(.admin-mode) .profile-card .discover-photo-blur{
  filter:blur(13px)!important;
  transform:scale(1.08)!important;
}
body:not(.member-signed-in):not(.admin-mode) .profile-card:hover .discover-photo-blur{
  filter:blur(13px)!important;
  transform:scale(1.08)!important;
}


/* === 2026-09-27 focused profile/auth/homepage stability pass === */

/* Profile dialogs remain centered in the viewport; only their contents scroll. */
body:not(.admin-mode) #modal.profile-modal{
  position:fixed!important;
  inset:50% auto auto 50%!important;
  transform:translate(-50%,-50%)!important;
  margin:0!important;
  width:min(540px,calc(100vw - 24px))!important;
  max-height:min(88svh,820px)!important;
  overflow:hidden!important;
  border-radius:24px!important;
  overscroll-behavior:contain!important;
}
body:not(.admin-mode) #modal.profile-modal #modalBody{
  max-height:min(88svh,820px)!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
}
body:not(.admin-mode) #modal.profile-modal #closeModal{
  position:absolute!important;
  top:10px!important;
  right:22px!important;
  float:none!important;
  margin:0!important;
  z-index:12!important;
  display:grid!important;
  place-items:center;
  width:40px;
  height:40px;
  padding:0!important;
  line-height:1!important;
  font-size:24px;
}
@media(max-width:600px){
  body:not(.admin-mode) #modal.profile-modal{
    width:calc(100vw - 16px)!important;
    max-height:calc(100svh - 18px)!important;
    border-radius:22px!important;
  }
  body:not(.admin-mode) #modal.profile-modal #modalBody{max-height:calc(100svh - 18px)!important}
}

/* Password eye is always inside the input on the right. */
.password-field{position:relative!important;display:block!important;width:100%!important}
.password-field>input{width:100%!important;padding-left:14px!important;padding-right:52px!important}
.password-field>.password-toggle{
  position:absolute!important;
  left:auto!important;
  right:8px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:36px!important;
  height:36px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:10px!important;
  z-index:3!important;
}
.password-field>.password-toggle svg{width:20px!important;height:20px!important}

/* Discover is intentionally blurred while browsing. Anonymous profile preview keeps the
   original profile image behind privacy blur, then offers explicit account actions. */
body:not(.member-signed-in) .s20-profile-photo .discover-photo-blur{filter:blur(12px)!important;transform:scale(1.07)!important}
.anonymous-profile-blur{filter:blur(14px)!important;transform:scale(1.08)!important}
.anonymous-profile-gate{
  width:100%!important;
  padding:16px!important;
  border:1px solid #efc5d6!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#fff4f8,#f7f3ff)!important;
  color:#4b2537!important;
}
.anonymous-profile-gate strong{color:#541d36!important;font-size:16px!important}
.anonymous-profile-gate p{color:#674455!important;line-height:1.5!important}
.anonymous-profile-gate .modal-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important}
@media(max-width:480px){.anonymous-profile-gate .modal-actions{grid-template-columns:1fr!important}}

/* Direct public profile links are readable and preserve photo privacy for signed-out visitors. */
.public-profile-preview-card{max-width:560px;margin:0 auto;padding:22px;border:1px solid #efd2de;border-radius:24px;background:#fff8fb;text-align:center}
.public-profile-preview-photo{width:min(100%,420px);aspect-ratio:4/3;margin:0 auto 18px;border-radius:20px;overflow:hidden;background:#f4eaf0}
.public-profile-preview-photo img,.public-profile-preview-photo>div{width:100%;height:100%;object-fit:cover}

/* Homepage Confessions block: high contrast on its colored background. */
body.landing-mode .s20-confessions .s20-section-head.inverse .s20-eyebrow{
  color:#fff4f8!important;-webkit-text-fill-color:#fff4f8!important;font-weight:900!important
}
body.landing-mode .s20-confessions .s20-section-head.inverse h2{
  color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 2px 14px rgba(58,6,31,.28)!important
}
body.landing-mode .s20-confessions .s20-section-head.inverse p{
  color:#ffe9f2!important;-webkit-text-fill-color:#ffe9f2!important;font-weight:700!important
}
body.landing-mode .s20-confessions .s20-section-head.inverse>a{
  color:#fff!important;-webkit-text-fill-color:#fff!important;font-weight:900!important
}

/* Keep Exploring copy is intentionally dark on the light card/background. */
body.landing-mode .s20-final .s20-eyebrow{color:#66233f!important;-webkit-text-fill-color:#66233f!important;font-weight:900!important}
body.landing-mode .s20-final h2{color:#3d1b2b!important;-webkit-text-fill-color:#3d1b2b!important}
body.landing-mode .s20-final p{color:#604551!important;-webkit-text-fill-color:#604551!important;font-weight:650!important}

/* Mobile bell scrolls with the page instead of remaining stuck over content. */
@media(max-width:900px){
  body.member-signed-in:not(.admin-mode)>.mobile-notification-bell:not([hidden]){
    position:absolute!important;
    top:max(10px,env(safe-area-inset-top))!important;
    right:12px!important;
  }
}

/* Install Saathly dialog/card uses dark, high-contrast colors. */
dialog.login-install-modal{
  background:linear-gradient(145deg,#331321,#5f1c3b)!important;
  border-color:#7f3154!important;
  color:#fff!important;
  box-shadow:0 28px 80px rgba(45,10,29,.38)!important;
}
dialog.login-install-modal .eyebrow{color:#ffc6db!important;-webkit-text-fill-color:#ffc6db!important}
dialog.login-install-modal h2{color:#fff!important;-webkit-text-fill-color:#fff!important}
dialog.login-install-modal p{color:#f5dfe8!important;-webkit-text-fill-color:#f5dfe8!important}
dialog.login-install-modal .login-install-primary{
  background:linear-gradient(135deg,#f3c95f,#dda629)!important;
  border-color:#e0aa2d!important;
  color:#341d05!important;-webkit-text-fill-color:#341d05!important;
}
dialog.login-install-modal #loginSkipInstall{
  background:#fff!important;border-color:#f0d8e2!important;color:#5c1d39!important;-webkit-text-fill-color:#5c1d39!important;
}

/* Homepage icons share one flex row instead of independent page coordinates. */
body.landing-mode.member-signed-in:not(.admin-mode) .s20-reference-header .s20-auth{
  display:flex!important;flex-wrap:nowrap!important;align-items:center!important;
  justify-content:flex-end!important;gap:12px!important;padding-right:0!important;
}
body.landing-mode.member-signed-in:not(.admin-mode) .s20-reference-header :is(.s20-profile-trigger,.s20-header-bell){
  position:relative!important;inset:auto!important;flex:0 0 40px!important;
  width:40px!important;height:40px!important;margin:0!important;transform:none!important;align-self:center!important;
}
:is(.s20-header-bell,#memberHeaderActions #mobileNotificationBell){display:grid;place-items:center;box-sizing:border-box;width:40px!important;height:40px!important;padding:0!important;border:1px solid #ead9a8!important;border-radius:50%!important;background:#fff8df!important;color:#76540b!important;text-decoration:none;box-shadow:none!important}
:is(.s20-header-bell,#memberHeaderActions #mobileNotificationBell) svg{width:22px!important;height:22px!important;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
:is(.s20-header-bell,#memberHeaderActions #mobileNotificationBell) .notification-count{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;display:grid;place-items:center;border-radius:999px;background:#b3264c;color:#fff!important;-webkit-text-fill-color:#fff!important;border:2px solid #fff;font:800 10px 'DM Sans',sans-serif}
:is(.s20-header-bell,#memberHeaderActions #mobileNotificationBell) .notification-count[hidden]{display:none!important}
body.landing-mode.member-signed-in:not(.admin-mode)>.mobile-notification-bell{display:none!important}
/* The same aligned pair is available on every other signed-in member page. */
#memberHeaderActions{display:none}
body.member-signed-in:not(.landing-mode):not(.admin-mode) #memberHeaderActions:not([hidden]){
  display:flex;align-items:center;flex-wrap:nowrap;gap:12px;position:absolute;top:20px;right:24px;z-index:136;
}
#memberHeaderActions>a{position:relative;display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;box-sizing:border-box;margin:0;line-height:1}
#memberHeaderActions .s20-profile-trigger{filter:none}
#memberHeaderActions #mobileNotificationBell{position:relative!important;inset:auto!important;display:grid!important;transform:none!important}
body.member-signed-in:not(.landing-mode):not(.admin-mode) .topbar-actions{padding-right:108px}
body.member-signed-in:not(.landing-mode):not(.admin-mode) .topbar :is(#notificationBell,#topAuth){display:none!important}
@media(max-width:900px){
  body.member-signed-in:not(.landing-mode):not(.admin-mode) #memberHeaderActions:not([hidden]){top:max(10px,env(safe-area-inset-top));right:12px}
  body.member-signed-in:not(.landing-mode):not(.admin-mode)>.mobile-menu{padding-right:112px!important}
}

/* 2026-09-27 focused messaging / plans / photo-safety pass */
body:not(.admin-mode) .chat-send{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,#19a66b,#118a5a)!important;
  box-shadow:0 8px 18px rgba(17,138,90,.24),inset 0 1px 0 rgba(255,255,255,.42)!important;
}
body:not(.admin-mode) .chat-send svg{width:22px!important;height:22px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important}
body:not(.admin-mode) .chat-composer{position:sticky!important;bottom:0!important;z-index:4!important}
body:not(.admin-mode) .chat-messages{overscroll-behavior:contain;scroll-behavior:auto!important}

body:not(.admin-mode) .mobile-bottom-nav .mobile-create,
body:not(.admin-mode) .header-create-plan,
body.member-signed-in #nav a[data-nav-type="plans"]{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate;
  box-shadow:0 8px 20px rgba(198,84,27,.22),inset 0 1px 0 rgba(255,255,255,.55)!important;
}
body:not(.admin-mode) .mobile-bottom-nav .mobile-create::after,
body:not(.admin-mode) .header-create-plan::after,
body.member-signed-in #nav a[data-nav-type="plans"]::after{
  content:"";
  position:absolute;
  inset:-45% auto -45% -55%;
  width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  transform:skewX(-22deg);
  animation:saathlyPlanShine 2.8s ease-in-out infinite;
  pointer-events:none;
  z-index:2;
}
@keyframes saathlyPlanShine{0%,58%{left:-55%}82%,100%{left:125%}}
@media(prefers-reduced-motion:reduce){body:not(.admin-mode) .mobile-bottom-nav .mobile-create::after,body:not(.admin-mode) .header-create-plan::after,body.member-signed-in #nav a[data-nav-type="plans"]::after{animation:none}}

.member-photo-fallback{display:grid!important;place-items:center!important;background:linear-gradient(145deg,#f5e8ee,#e8eef7)!important;color:#5b3143!important;border:1px solid rgba(91,49,67,.12)!important}
.member-photo-fallback span{font:800 18px/1 'DM Sans',sans-serif;letter-spacing:.04em}
/* Full photo is a separate dialog: closing it preserves the profile and its scroll. */
.profile-photo-open{cursor:zoom-in}
.profile-photo-open:focus-visible{outline:3px solid #7a123f;outline-offset:3px}
#profilePhotoViewer{box-sizing:border-box;width:min(96vw,900px);max-width:96vw;height:90dvh;max-height:90dvh;padding:56px 12px 12px;border:0;border-radius:18px;background:#171217;overflow:hidden}
#profilePhotoViewer[open]{display:flex;align-items:center;justify-content:center}
#profilePhotoViewer::backdrop{background:rgba(0,0,0,.82)}
#profilePhotoViewer>img{width:100%;height:100%;object-fit:contain;border-radius:0;filter:none;transform:none}
#profilePhotoViewer>.demo-portrait{width:auto;height:100%;max-width:100%;aspect-ratio:4/5;filter:none;transform:none}
#profilePhotoViewer>.photo-viewer-close{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:40px;height:40px;min-width:40px;padding:0;border:1px solid #ddd;border-radius:50%;background:#fff;color:#241722;font:32px/1 Arial,sans-serif;cursor:pointer;z-index:1}
.s20-activity-avatar{width:46px;height:46px;border-radius:12px;overflow:hidden}
.s20-activity-avatar>:is(img,.demo-portrait,.member-photo-fallback){width:100%;height:100%;object-fit:cover}
body:not(.admin-mode) #notifications.inbox-notifications-panel{padding:18px;max-width:760px;margin-inline:auto;width:100%;box-sizing:border-box}
body:not(.admin-mode) #notifications h2{font-size:22px;line-height:1.3;margin:6px 0 14px}
body:not(.admin-mode) #notifications .review-list{display:grid;gap:8px}
body:not(.admin-mode) #notifications .notification-card{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:0;border:1px solid #ebd486!important;border-radius:12px;background:#fff5cc!important;box-shadow:none!important}
body:not(.admin-mode) #notifications .notification-card.is-read{background:#fffae9!important}
body:not(.admin-mode) #notifications .notification-card>div{flex:1;min-width:0;overflow-wrap:anywhere}
body:not(.admin-mode) #notifications .notification-card h3{font-size:14px;line-height:1.4;margin:0 0 4px}
body:not(.admin-mode) #notifications .notification-card p{font-size:13px;line-height:1.5;margin:0 0 5px}
body:not(.admin-mode) #notifications .notification-card small{font-size:11px}
body:not(.admin-mode) #notifications .button{font-size:12px!important;min-height:36px!important;padding:8px 12px!important;width:auto!important;line-height:1.3!important}
body:not(.admin-mode) #notifications #readAllNotifications{display:block;margin:14px 0 0 auto;background:#f6d76e!important;border:1px solid #dab74e!important;color:#49360b!important;-webkit-text-fill-color:#49360b!important;border-radius:9px}
body:not(.admin-mode) #notifications #readAllNotifications:disabled{opacity:.55;cursor:default}
body:not(.admin-mode) #notifications .notification-permission-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
@media(max-width:480px){body:not(.admin-mode) #notifications .notification-card{flex-wrap:wrap}.s20-activity-avatar{width:42px;height:42px}}
body:not(.admin-mode) [data-connection-summary]{background:#eef8f2!important;color:#244b39!important;border:1px solid #cde5d6!important;border-radius:16px;padding:14px 18px!important;white-space:normal;text-align:left;max-width:100%;box-sizing:border-box}
body:not(.admin-mode) [data-connection-summary] p{margin:6px 0 0;font-size:13px;line-height:1.5;color:#365947!important;font-weight:400}
.sent-request-card{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px;margin:12px 0;border:1px solid #cde5d6;border-radius:16px;background:#eef8f2;color:#244b39;overflow-wrap:anywhere}
.sent-request-card>div{min-width:0;flex:1 1 140px}.sent-request-card p{margin:5px 0}.sent-request-card .button{white-space:normal;max-width:100%}
/* Focused usability cleanup for audited member/public pages. Sidebar styling and confession colors are intentionally untouched. */
.install-app-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;margin:16px 0 10px;padding:11px 14px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:linear-gradient(135deg,#32101f,#5b1735);color:#fff!important;font:700 14px/1.25 'DM Sans',sans-serif;box-shadow:0 8px 20px rgba(15,3,9,.25);text-align:center;text-decoration:none;transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease}
.install-app-button:hover{background:linear-gradient(135deg,#45132a,#6d1c42);transform:translateY(-1px);box-shadow:0 11px 24px rgba(15,3,9,.32)}
.install-app-button:focus-visible{outline:3px solid #f5d17a;outline-offset:3px}
.s20-eyebrow{font-size:12px;letter-spacing:.1em}
.s20-section-head p,.s20-section-head>a{font-size:14px}
.s20-section-head>a{min-height:40px;display:inline-flex;align-items:center;padding:0 4px}
.s20-activity-item small,.s20-profile-copy>small,.s20-profile-copy p,.s20-profile-copy em{font-size:12px;line-height:1.5}
.s20-profile-photo span,.s20-profile-title b{font-size:11px}
.s20-profile-card{display:flex;flex-direction:column;border-radius:18px}
.s20-profile-copy{display:flex;flex:1;flex-direction:column}
.s20-profile-copy em{margin-bottom:10px}
.s20-profile-open{display:block;margin-top:auto;padding-top:8px;color:var(--s20-berry);font-size:13px;font-weight:800}
.s20-activity-item{border-radius:16px}
.s20-split{align-items:start}
.s20-activity-item,.s20-profile-card,.s20-plan-card{transition:transform .18s ease,box-shadow .18s ease}
.s20-activity-item:focus-visible,.s20-profile-card:focus-visible,.s20-plan-card:focus-visible{outline:3px solid #ad2458;outline-offset:3px}
.directory-filter-bar{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.directory-activity-select{margin:0;flex:1 1 240px;min-width:180px}
.directory-filter-bar>.button{align-self:flex-end;min-height:48px;margin:0}
.directory-page .page-head{margin-bottom:22px}
.directory-page .recommendation-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 14px;padding:14px 17px;border-radius:14px;background:#fff;border:1px solid rgba(103,37,57,.12)}
.directory-page .recommendation-strip strong{font-size:17px;font-weight:800;color:#431626}
.directory-page .recommendation-strip span{font-size:14px;color:#70545e}
.directory-page .profile-grid{align-items:stretch}
.directory-page .profile-card{display:flex;flex-direction:column;height:100%}
.directory-page .profile-card .profile-info{display:flex;flex:1;flex-direction:column}
.directory-page .profile-card .habit{margin-top:auto;padding-top:8px}
.directory-page .explore-connect-button{align-self:stretch;margin-top:auto;min-height:46px}
.directory-saved-button{white-space:nowrap}
.plans-page .page-head{align-items:flex-end}
.plans-page .page-head>.button{flex:0 0 auto;min-width:170px;min-height:48px}
.plans-page .plan-list-card{align-items:start;border-radius:16px}
.plans-page .plan-list-main{min-width:0}
.plans-page .plan-list-main h2{font:700 19px/1.3 'DM Sans',sans-serif;letter-spacing:-.02em;margin:5px 0 8px}
.plans-page .plan-list-icon{display:grid;place-items:center}
.plans-page .plan-list-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.plans-page .plan-filter-row{align-items:center}
.community-page .community-compose textarea{display:block;width:100%;max-width:none;min-height:120px}
.community-page .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.community-page .community-post-head h2{font-size:1px;line-height:1;margin:0}
.community-page .community-post-head h2:not(.sr-only){font-size:inherit}
.community-page .community-comment-wrap h3{margin:10px 0 6px;font-size:15px}
.community-page .community-comment-wrap>.hint{margin:6px 0;font-size:13px}
.community-page .confession-actions,.community-page .confession-share-row{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap;margin-top:8px}
.community-page .confession-share-row .text-button{min-height:40px;padding:8px 10px}
.member-settings-page #privacyForm label.check{min-height:44px;align-items:center;gap:12px}
.member-settings-page #privacyForm input[type="checkbox"]{width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;max-width:20px!important;max-height:20px!important;flex:0 0 20px!important;margin:0!important}
.member-settings-page #privacyForm input[type="checkbox"]::after{width:8px!important;height:8px!important}
.member-settings-page #openBlocked{min-height:44px;padding:10px 15px;text-decoration:none}
.member-settings-page .account-danger .button.danger{background:#a51d3d!important;border-color:#8f1735!important;color:#fff!important}
.member-settings-page .account-danger .button.danger:hover{background:#86162f!important}
.workspace:has(.directory-page) footer,.workspace:has(.plans-page) footer,.workspace:has(.community-page) footer,.workspace:has(.member-settings-page) footer{justify-content:center;gap:14px 24px;font-size:14px}
.workspace:has(.directory-page) footer a,.workspace:has(.plans-page) footer a,.workspace:has(.community-page) footer a,.workspace:has(.member-settings-page) footer a{display:inline-flex;align-items:center;min-height:40px;font-weight:600}
@media(max-width:720px){.s20-section-head p,.s20-section-head>a{font-size:13px}.s20-section-head>a{min-height:40px}.s20-activity-item small,.s20-profile-copy>small,.s20-profile-copy p,.s20-profile-copy em{font-size:12px}.directory-page .recommendation-strip{align-items:flex-start;flex-direction:column}.plans-page .page-head{align-items:flex-start}.plans-page .page-head>.button{width:100%}.workspace:has(.directory-page) footer,.workspace:has(.plans-page) footer,.workspace:has(.community-page) footer,.workspace:has(.member-settings-page) footer{justify-content:flex-start}.community-page .confession-share-row{margin-top:4px}}