/* ---------- GATEHOUSE Modern UI (29 Sep 2026) ---------- */
/* tokens: one motion + radius + focus system for the whole app */
html body.pfh-app{--mu-ease:cubic-bezier(.22,1,.36,1);--mu-fast:150ms;--mu-mid:220ms;--mu-ring:#E07A2F;--mu-r-sm:10px;--mu-r-md:14px;--mu-r-lg:20px}
html body.pfh-app ::selection{background:rgba(63,191,132,.28);color:inherit}
/* the top bar: a lit bottom edge */
html body.pfh-app .pa-bar{box-shadow:0 10px 30px -18px rgba(11,23,41,.8)}
html body.pfh-app .pa-bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#2E7D5B,#3FBF84 40%,#E07A2F);opacity:.9;pointer-events:none}
/* the Jump-to button next to search */
html body.pfh-app .pa-bar .mu-k{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 10px 0 12px;border-radius:12px!important;border:1px solid rgba(255,255,255,.16)!important;background:rgba(255,255,255,.06)!important;color:#DDE7E4!important;font:600 13.5px/1 "Space Grotesk","Archivo",system-ui,sans-serif!important;cursor:pointer;box-shadow:none!important;width:auto!important;transition:background var(--mu-fast),border-color var(--mu-fast)}
html body.pfh-app .pa-bar .mu-k:hover,html body.pfh-app .pa-bar .mu-k:focus{background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.3)!important;color:#FFFFFF!important}
html body.pfh-app .pa-bar .mu-k svg{width:16px;height:16px;flex:none}
html body.pfh-app .pa-bar .mu-k kbd{padding:3px 6px;border-radius:6px;background:rgba(255,255,255,.12);box-shadow:inset 0 -1px 0 rgba(0,0,0,.3);font:700 11px/1 ui-monospace,Menlo,Consolas,monospace;color:#FFFFFF}
@media (max-width:900px){html body.pfh-app .pa-bar .mu-k span,html body.pfh-app .pa-bar .mu-k kbd{display:none}html body.pfh-app .pa-bar .mu-k{width:44px!important;justify-content:center;padding:0!important}}
/* the command palette */
.mu-pal{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;background:rgba(11,23,41,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:mu-fade var(--mu-fast,150ms) ease-out}
.mu-pal[hidden]{display:none!important}
.mu-pal__box{width:min(640px,100%);max-height:min(560px,76vh);display:flex;flex-direction:column;border-radius:20px;background:#FFFFFF;box-shadow:0 30px 80px -30px rgba(11,23,41,.75),0 0 0 1px rgba(20,35,63,.08);overflow:hidden;animation:mu-pop 220ms cubic-bezier(.22,1,.36,1);font-family:"Space Grotesk","Archivo",system-ui,sans-serif;color:#1B2230}
.mu-pal__top{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #E6EAE8}
.mu-pal__top svg{width:20px;height:20px;flex:none;color:#2E7D5B}
.mu-pal__in{flex:1;min-width:0;height:44px;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;font:500 18px/1.2 "Space Grotesk","Archivo",system-ui,sans-serif!important;color:#14233F!important;padding:0!important}
.mu-pal__in::placeholder{color:#7A8290}
.mu-pal__esc{padding:4px 8px;border-radius:7px;background:#F1F4F2;font:700 11px/1 ui-monospace,Menlo,Consolas,monospace;color:#5E6672}
.mu-pal__list{list-style:none;margin:0;padding:8px;overflow-y:auto;overscroll-behavior:contain}
.mu-pal__g{margin:10px 10px 4px;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#5E6672}
.mu-pal__o{display:flex;align-items:center;gap:12px;min-height:46px;padding:8px 12px;border-radius:12px;cursor:pointer;font-size:15px;font-weight:600;color:#14233F}
.mu-pal__o i{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:#EEF4F1;color:#1E5C42;font-style:normal;font-size:14px;font-weight:800}
.mu-pal__o small{margin-left:auto;font-size:12px;font-weight:600;color:#7A8290}
.mu-pal__o mark{background:none;color:#2E7D5B;font-weight:800;padding:0}
.mu-pal__o[aria-selected="true"]{background:#14233F;color:#FFFFFF}
.mu-pal__o[aria-selected="true"] i{background:rgba(255,255,255,.14);color:#FFFFFF}
.mu-pal__o[aria-selected="true"] mark{color:#6FD3A4}
.mu-pal__o[aria-selected="true"] small{color:#C9D3E0}
.mu-pal__none{padding:22px 14px;text-align:center;color:#5E6672;font-size:15px}
.mu-pal__foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid #E6EAE8;font-size:12px;color:#5E6672}
.mu-pal__foot b{padding:2px 6px;border-radius:5px;background:#F1F4F2;font:700 11px/1.3 ui-monospace,Menlo,Consolas,monospace;color:#14233F}
@keyframes mu-fade{from{opacity:0}}
@keyframes mu-pop{from{opacity:0;transform:translateY(-8px) scale(.98)}}
@media (max-width:640px){.mu-pal{padding:8px}.mu-pal__box{max-height:88vh}.mu-pal__foot{display:none}}
/* one focus ring everywhere, visible only for keyboard users */
html body.pfh-app :is(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--mu-ring)!important;outline-offset:2px!important}
html body.pfh-app .mu-pal .mu-pal__in:focus-visible,html body .mu-pal .mu-pal__in:focus{outline:0!important}
/* everything you can press answers the press */
html body.pfh-app :is(.pa-create,.pa-a,.pa-ib,.pa-dash,.pa-helpbtn,#buddypress .button,#buddypress button,#buddypress input[type=submit],.evc-btn,.nb-btn,.rb-btn,.wb-btn,.im-btn,.rf-btn,.rf-tog,.rf-act,.rf-chipbtn,.ch-q,.rf-ck__b,.rf-wt__b){transition:background-color var(--mu-fast) ease,border-color var(--mu-fast) ease,color var(--mu-fast) ease,box-shadow var(--mu-mid) var(--mu-ease),scale var(--mu-fast) var(--mu-ease)}
html body.pfh-app :is(.pa-create,.pa-a,.pa-ib,.pa-dash,.pa-helpbtn,#buddypress .button,#buddypress button,#buddypress input[type=submit],.evc-btn,.nb-btn,.rb-btn,.wb-btn,.im-btn,.rf-btn,.rf-tog,.rf-act,.rf-chipbtn,.ch-q,.rf-ck__b,.rf-wt__b):active{scale:.97}
html body.pfh-app :is(button,summary,[role=button],label[for],select){cursor:pointer}
/* the sidebar: modern hover and a lit active item */
html body.pfh-app .pa-side .pa-a:hover{background:rgba(255,255,255,.7)!important}
html body.pfh-app .pa-side .pa-a.is-on{box-shadow:0 1px 2px rgba(11,23,41,.06),0 10px 24px -16px rgba(11,23,41,.45),inset 3px 0 0 #2E7D5B!important}
html body.pfh-app .pa-side .pa-a svg{transition:translate var(--mu-mid) var(--mu-ease)}
html body.pfh-app .pa-side .pa-a:hover svg{translate:0 -1px}
/* thin scrollbars on the app's scroll areas */
html body.pfh-app :is(.pa-side,.pa-npanel,.pa-hpanel,.mu-pal__list){scrollbar-width:thin;scrollbar-color:rgba(20,35,63,.25) transparent}
/* loading: skeleton cards instead of a "please wait" box */
html body.pfh-app #buddypress .bp-feedback.loading{position:relative;display:block!important;min-height:132px;padding:0!important;border:0!important;border-radius:18px!important;background:#FFFFFF!important;box-shadow:inset 0 0 0 1px rgba(20,35,63,.07)!important;overflow:hidden}
html body.pfh-app #buddypress .bp-feedback.loading>*{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
html body.pfh-app #buddypress .bp-feedback.loading::before{content:"";position:absolute;left:20px;top:20px;width:44px;height:44px;border-radius:14px;background:#EEF1EF}
html body.pfh-app #buddypress .bp-feedback.loading::after{content:"";position:absolute;left:80px;right:24px;top:22px;height:96px;background:linear-gradient(#EEF1EF,#EEF1EF) 0 0/38% 12px no-repeat,linear-gradient(#EEF1EF,#EEF1EF) 0 26px/90% 10px no-repeat,linear-gradient(#EEF1EF,#EEF1EF) 0 46px/80% 10px no-repeat,linear-gradient(#EEF1EF,#EEF1EF) 0 66px/55% 10px no-repeat,linear-gradient(100deg,transparent 30%,rgba(255,255,255,.85) 50%,transparent 70%) -150% 0/60% 100% no-repeat;animation:mu-shimmer 1.4s linear infinite}
@keyframes mu-shimmer{to{background-position:0 0,0 26px,0 46px,0 66px,250% 0}}
/* phones: every icon button is a real touch target */
@media (pointer:coarse){html body.pfh-app .pa-bar :is(.pa-ib,summary.pa-ib){min-width:44px;min-height:44px}}
@media (prefers-reduced-motion:reduce){
 html body.pfh-app *{scroll-behavior:auto!important}
 html body.pfh-app :is(.pa-create,.pa-a,.pa-ib,#buddypress .button,#buddypress button,.evc-btn,.nb-btn,.rb-btn,.wb-btn,.im-btn,.rf-btn,.ch-q):active{scale:none}
 .mu-pal,.mu-pal__box{animation:none}
 html body.pfh-app #buddypress .bp-feedback.loading::after{animation:none}
}
/* dark */
html body.pfh-app.pfh-dark .mu-pal__box{background:#151A21;color:#E6EAF0;box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 0 1px #2A323D}
html body.pfh-app.pfh-dark .mu-pal__top,html body.pfh-app.pfh-dark .mu-pal__foot{border-color:#2A323D}
html body.pfh-app.pfh-dark .mu-pal__in{color:#FFFFFF!important}
html body.pfh-app.pfh-dark .mu-pal__o{color:#E6EAF0}html body.pfh-app.pfh-dark .mu-pal__o i{background:#1E2B25;color:#6FD3A4}
html body.pfh-app.pfh-dark .mu-pal__o[aria-selected="true"]{background:#2E7D5B}
html body.pfh-app.pfh-dark .mu-pal__esc,html body.pfh-app.pfh-dark .mu-pal__foot b{background:#1C232C;color:#E6EAF0}
html body.pfh-app.pfh-dark .pa-side .pa-a:hover{background:rgba(255,255,255,.06)!important}
html body.pfh-app.pfh-dark #buddypress .bp-feedback.loading{background:#151A21!important}
html body.pfh-app.pfh-dark #buddypress .bp-feedback.loading::before{background:#1C232C}
html body.pfh-app.pfh-dark #buddypress .bp-feedback.loading::after{background:linear-gradient(#1C232C,#1C232C) 0 0/38% 12px no-repeat,linear-gradient(#1C232C,#1C232C) 0 26px/90% 10px no-repeat,linear-gradient(#1C232C,#1C232C) 0 46px/80% 10px no-repeat,linear-gradient(#1C232C,#1C232C) 0 66px/55% 10px no-repeat,linear-gradient(100deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%) -150% 0/60% 100% no-repeat}