/* app-shell.css
   Authenticated ProfilePro app shell: desktop top nav, mobile bottom nav,
   account dropdown/sheet, Home feed, post composer.

   This is a SEPARATE experience from the public marketing site's
   header.site-nav / .mobile-overlay (styles.css) -- per the Step 1 spec, a
   logged-in user should not see the public marketing nav. Relies on the
   CSS variables already defined in :root by styles.css, so this file is
   always loaded alongside (never instead of) styles.css.
*/

html,body{max-width:100%;overflow-x:clip;}
body.app-body{background:var(--paper);min-height:100vh;}

/* Global [hidden] guarantee -- author `display` rules (by class or id)
   normally beat the browser's built-in [hidden]{display:none}, since
   author-normal declarations always win over the user-agent stylesheet
   regardless of selector specificity. Several role-toggled containers in
   this app (e.g. home.html's #hmProSections/.hm2-layout, #hmBizSections,
   .hm2-pearl-card, .hm-split-row) set `display` directly, which silently
   made el.hidden = true a no-op and let Professional/Business dashboard
   sections render at the same time. This restores [hidden] as the one
   rule nothing else in the app can accidentally override. */
[hidden]{display:none !important;}

/* ---------- Hybrid pages (professionals.html, jobs.html) ----------
   These pages ship BOTH the public marketing nav (header#siteNav /
   #mobileOverlay, from styles.css) and this authenticated shell in the
   same document. app-shell.js decides which one a visitor sees: hidden
   here by default, revealed only once `body.pp-authed` is set (a
   confirmed signed-in session), so a signed-out visitor only ever sees
   the normal public nav and never a flash of the authenticated one. */
body[data-app-hybrid] .app-nav{display:none;}
body[data-app-hybrid].pp-authed .app-nav{display:block;}
body[data-app-hybrid] .app-bottom-nav{display:none;}
@media (max-width:720px){
  body[data-app-hybrid].pp-authed .app-bottom-nav{display:flex;}
}

/* ---------- Auth-resolving loading overlay (hybrid pages only) ----------
   jobs.html / professionals.html / job-detail.html / professional-profile.html
   ship the public marketing page AND the authenticated app shell in one
   document, and Identity's signed-in/signed-out check is async. Without
   this, a signed-in visitor briefly sees the public marketing nav/page
   underneath before app-shell.js swaps it for the authenticated shell.
   This overlay covers the page (public content is still there underneath,
   untouched) the moment CSS loads -- before any JS runs -- and app-shell.js
   removes it (adding body.pp-auth-resolved) the instant it knows whether
   the visitor is signed in or out, revealing whichever is correct. */
.app-auth-loading{display:none;}
body[data-app-hybrid] .app-auth-loading{
  display:flex;position:fixed;inset:0;z-index:2000;
  background:var(--paper);align-items:center;justify-content:center;
}
body[data-app-hybrid].pp-auth-resolved .app-auth-loading{display:none;}
/* The earliest "resolving your session" moment uses the same four-colour
   dot loader as everywhere else (styles in the shared loader block below). */

/* ---------- "More" hamburger menu ----------
   Replaces the old app-footer's About/Resources/Academy/Community/Help/
   Terms/Privacy links now that the authenticated footer is gone -- a
   colorful slide-in drawer (Facebook/X-style) triggered from a hamburger
   button in the nav, instead of a plain link list. */
.app-more-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:var(--icon-black);flex-shrink:0;transition:background .2s var(--ease),color .2s var(--ease);}
@media (hover:hover){.app-more-btn:hover{background:var(--navy-06);color:var(--navy);}}
.app-more-btn svg{stroke:currentColor;display:block;}
/* ---- Round 8: the header hamburger used to double as the desktop
   sidebar-collapse toggle (see wireSidebarToggle in git history) --
   that's now the dedicated .app-sidebar-collapse-btn on the sidebar's
   own profile row instead (below), sitewide, so this button goes back
   to being mobile-only, its original job (the "More" drawer trigger).
   Hidden by #id rather than the shared .app-more-btn class so any
   other element that happens to reuse that class elsewhere is
   unaffected. ---- */
@media (min-width:721px){
  #appMoreMenuTrigger{display:none;}
}

.app-more-backdrop{position:fixed;inset:0;background:rgba(12,16,22,.5);backdrop-filter:blur(2px);z-index:1400;opacity:0;pointer-events:none;transition:opacity .3s var(--ease);}
.app-more-backdrop.is-open{opacity:1;pointer-events:auto;}

:root{--app-more-drawer-width:min(440px,75vw);}
.app-more-drawer{position:fixed;top:0;left:0;bottom:0;width:var(--app-more-drawer-width);background:var(--paper);z-index:1401;transform:translateX(-100%);transition:transform .35s var(--ease);display:flex;flex-direction:column;box-shadow:24px 0 60px -20px rgba(27,33,45,.35);overflow-y:auto;}
.app-more-backdrop.is-open .app-more-drawer{transform:translateX(0);}

.app-more-head{background:var(--white);padding:22px 22px 18px;position:relative;flex-shrink:0;border-bottom:1px solid var(--navy-06);}
.app-more-close{position:absolute;top:18px;right:18px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--icon-black);background:none;transition:background .2s var(--ease);}
@media (hover:hover){.app-more-close:hover{background:var(--navy-06);}}
.app-more-close svg{stroke:currentColor;display:block;}
.app-more-id{display:flex;flex-direction:row;align-items:center;gap:12px;padding-right:34px;text-decoration:none;cursor:pointer;}
.app-more-avatar{width:52px;height:52px;border-radius:50%;overflow:hidden;background:var(--navy-10);color:var(--navy);display:flex;align-items:center;justify-content:center;font-family:'Cabinet Grotesk',sans-serif;font-weight:500;font-size:16.5px;flex:0 0 52px;}
.app-more-avatar img,.app-more-head .app-more-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;}
.app-more-identity-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;}
.app-more-name{font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:15.5px;color:var(--navy);margin-bottom:2px;}
.app-more-view-profile{font-size:12px;font-weight:500;color:var(--navy-45);}

.app-more-list{flex:1;padding:6px 0 4px;}
.app-more-section{padding:10px 22px 6px;}
.app-more-section-label{font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--navy-45);margin-bottom:2px;}
.app-more-item{display:flex;align-items:center;gap:12px;padding:11px 0;color:var(--navy-85);text-decoration:none;border:none;background:none;width:100%;text-align:left;font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer;}
.app-more-item:active,.app-more-item.active{color:#111;}@media (hover:hover){.app-more-item:hover{color:#111;}}
.app-more-item-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--icon-black);flex-shrink:0;}
.app-more-item-icon svg{stroke:currentColor;display:block;}
/* Pearl AI's More-drawer tile uses the real orb artwork (not a tinted
   stroke icon like the others), so it needs its own sizing rule instead
   of inheriting the SVG-stroke treatment above. */
.app-more-item-icon-pearl img{width:100%;height:100%;object-fit:contain;display:block;}
.app-more-item:active .app-more-item-icon,.app-more-item.active .app-more-item-icon{color:#111;}@media (hover:hover){.app-more-item:hover .app-more-item-icon{color:#111;}}
.app-more-item-label{flex:1;}
.app-more-item-caret{color:var(--navy-45);flex-shrink:0;}
.app-more-item-ext{color:var(--navy-45);flex-shrink:0;}
.app-more-item-danger{color:#C0392B;}
.app-more-item-danger .app-more-item-icon{color:#C0392B;}
@media (hover:hover){.app-more-item-danger:hover{color:#96281B;}}
@media (hover:hover){.app-more-item-danger:hover .app-more-item-icon{color:#96281B;}}

.app-more-premium{display:flex;align-items:center;gap:12px;margin:14px 22px 4px;padding:13px 14px;border-radius:var(--r-md);background:var(--gold-16);cursor:pointer;flex-shrink:0;}
.app-more-premium-icon{width:24px;height:24px;color:var(--navy);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.app-more-premium-icon svg{stroke:currentColor;display:block;}
.app-more-premium-body{flex:1;min-width:0;}
.app-more-premium-title{font-family:'Cabinet Grotesk',sans-serif;font-weight:500;font-size:12.5px;color:var(--navy);}
.app-more-premium-sub{font-size:11px;color:var(--navy-65);margin-top:1px;}
.app-more-premium-caret{color:var(--navy-45);flex-shrink:0;}

.app-more-copyright{font-size:11px;color:var(--navy-45);padding:14px 22px 22px;flex-shrink:0;}

/* Legacy tile More menu (business-profile / analytics / meeting) — stack
   vertically like the standard list drawer, never beside each other. */
.app-more-tag{font-size:11.5px;color:var(--navy-45);margin-top:8px;line-height:1.4;max-width:260px;}
.app-more-head > img{height:28px;width:auto;display:block;}
.app-more-grid{display:flex;flex-direction:column;padding:8px 22px 4px;gap:0;}
.app-more-tile{display:flex;align-items:center;gap:12px;width:100%;padding:12px 0;color:var(--navy-85);text-decoration:none;font-size:13.5px;font-weight:500;border:none;background:none;font-family:inherit;cursor:pointer;text-align:left;}
.app-more-tile:active{color:#111;}@media (hover:hover){.app-more-tile:hover{color:#111;}}
.app-more-tile-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--icon-black);flex-shrink:0;}
.app-more-tile-icon svg{stroke:currentColor;display:block;}
@media (hover:hover){.app-more-tile:hover .app-more-tile-icon{color:#111;}}
.app-more-tile-label{flex:1;min-width:0;}
.app-more-foot{padding:8px 22px 18px;border-top:1px solid var(--navy-06);margin-top:auto;}
.app-more-foot-links{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;}
.app-more-foot-links a{display:block;padding:10px 0;font-size:13px;font-weight:500;color:var(--navy-65);text-decoration:none;}
@media (hover:hover){.app-more-foot-links a:hover{color:var(--navy);}}
.app-more-logout{display:flex;align-items:center;gap:10px;width:100%;padding:11px 0;border:none;background:none;color:#C0392B;font-size:13.5px;font-weight:500;font-family:inherit;cursor:pointer;text-align:left;}
.app-more-logout svg{flex-shrink:0;stroke:currentColor;}

/* ---------- Desktop top nav ---------- */
/* A real, full-bleed docked header (not a floating rounded card) -- flush
   to the top and both side edges, no border-radius, no inset margin. The
   shadow lives on the bar itself (its bottom edge) so it still reads as
   raised above the page content beneath it. */
.app-nav{position:sticky;top:0;left:0;right:0;z-index:1000;max-width:none;margin:0;border-radius:0;background:rgba(255,255,255,.96);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:none;border:none;border-bottom:1px solid rgba(27,33,45,.06);}
.app-nav-inner{max-width:1220px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:20px;}
@media (max-width:720px){
  .app-nav{top:0;border-radius:0;margin:0;}
}
.app-nav-logo{flex-shrink:0;display:flex;align-items:center;}
.app-nav-logo img{height:28px;width:auto;display:block;}
.app-nav-search{flex-shrink:0;position:relative;width:220px;border-radius:var(--r-pill);}
.app-nav-search input{width:100%;background:var(--navy-06);border:1px solid transparent;border-radius:var(--r-pill);padding:9px 14px 9px 36px;font-size:12.5px;color:var(--navy);outline:none;transition:background .25s var(--ease),border-color .25s var(--ease);}
.app-nav-search input:focus{background:var(--white);border-color:transparent;}
.app-nav-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--icon-black);pointer-events:none;transition:color .25s var(--ease);}
/* (The rotating green/orange gradient ring that used to appear around the
   header search on focus has been removed on purpose -- the field now just
   opens the small Recent-searches card, see .app-search-suggest below.) */
.app-nav-links{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;}
.app-nav-link{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 16px;border-radius:12px;color:var(--icon-black);font-size:11px;font-weight:500;transition:color .2s var(--ease);}
.app-nav-link svg{stroke:currentColor;}
@media (hover:hover){.app-nav-link:hover{color:#111;}}
.app-nav-link:active,.app-nav-link.active{color:#111;}

/* "Manage Work" nav item -- a real link to My Job Posts (the default view,
   per spec) plus a small caret button beside it that opens a dropdown with
   all three Manage Work destinations (My Job Posts / Interviews /
   Contracts). Two separate controls (not a button nested in the link) so
   the markup stays valid, but .app-navlink-dd-wrap styles them as one
   cohesive pill so it reads as a single nav item. */
.app-navlink-dd-wrap{position:relative;display:flex;align-items:stretch;border-radius:12px;}
.app-navlink-dd-wrap .app-navlink-dd-main{padding-right:4px;border-radius:12px 0 0 12px;color:var(--icon-black);}
@media (hover:hover){.app-navlink-dd-wrap:hover .app-navlink-dd-main{color:#111;}}
.app-navlink-dd-wrap.active .app-navlink-dd-main,
.app-navlink-dd-wrap.active .app-navlink-caret-btn{color:#111;}
.app-navlink-caret-btn{display:flex;align-items:center;justify-content:center;padding:8px 12px 8px 4px;border-radius:0 12px 12px 0;color:var(--icon-black);}
@media (hover:hover){.app-navlink-caret-btn:hover{color:#111;}}
.app-navlink-caret-btn svg{transition:transform .2s var(--ease);}
.app-navlink-caret-btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.app-navlink-dd{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);width:190px;background:var(--white);border-radius:var(--r-md);box-shadow:0 20px 44px -14px var(--navy-25);padding:8px;opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:1200;}
.app-navlink-dd.open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.app-navlink-dd a{display:block;padding:10px 12px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--navy-80);text-align:left;}
@media (hover:hover){.app-navlink-dd a:hover{background:var(--navy-06);color:var(--navy);}}
.app-navlink-dd a.active{color:var(--teal-dark);}

.app-nav-right{flex-shrink:0;display:flex;align-items:center;gap:6px;}
/* Notifications icon shown in the top area on mobile only -- the bottom
   nav itself holds Home/Jobs/People/Messages/Profile, with Notifications
   reachable from here instead. Desktop already has "Notifications" in
   .app-nav-links, so this stays hidden there. (Class name kept as
   .app-nav-msg-mobile for historical reasons -- it's just the mobile-only
   top-bar icon slot, not tied to Messages specifically.) */
.app-nav-msg-mobile,.app-nav-search-mobile{display:none;}
@media (max-width:720px){
  .app-nav-msg-mobile,.app-nav-search-mobile{display:flex;align-items:center;justify-content:center;width:34px;height:34px;color:var(--icon-black);flex-shrink:0;position:relative;}
  @media (hover:hover){.app-nav-msg-mobile:hover,.app-nav-search-mobile:hover{color:#111;}}
  /* Search now opens inline in the header instead of jumping to
     search.html -- .ans-icon-close is the X shown once expanded, and
     the real .app-nav-search field (same one desktop uses, with the
     same animated color ring above) slides into the space the
     logo/hamburger vacate. Submitting still lands on search.html;
     this just removes the jarring full-page hop for the common case
     of typing two or three letters and hitting enter. */
  .app-nav-search-mobile .ans-icon-close{display:none;}
  .app-nav.search-open .app-nav-search-mobile .ans-icon-search{display:none;}
  .app-nav.search-open .app-nav-search-mobile .ans-icon-close{display:flex;}
  .app-nav.search-open .app-more-btn,
  .app-nav.search-open .app-nav-logo,
  .app-nav.search-open .app-nav-msg-mobile,
  .app-nav.search-open .app-dropdown-wrap{display:none;}
  .app-nav.search-open .app-nav-search{display:flex;width:auto;flex:1;animation:appSearchExpand .22s var(--ease);}
  @keyframes appSearchExpand{from{opacity:0;transform:scaleX(.92);}to{opacity:1;transform:scaleX(1);}}
}
.app-nav-avatar-btn{position:relative;width:38px;height:38px;border-radius:50%;flex-shrink:0;padding:0;overflow:hidden;background:var(--navy-06);display:flex;align-items:center;justify-content:center;color:var(--navy-45);font-weight:500;font-size:12.5px;font-family:'Cabinet Grotesk',sans-serif;border:1.5px solid var(--navy-10);transition:border-color .2s var(--ease);}
@media (hover:hover){.app-nav-avatar-btn:hover{border-color:var(--navy-10);}}
.app-nav-avatar-btn img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;}
/* Keep header actions grouped consistently across ProfilePro apps. */
.app-nav-right .app-nav-icon-btn,.app-nav-right .pp-app-switcher-trigger{width:36px;height:36px;}

/* Account dropdown (desktop) */
.app-dropdown-wrap{position:relative;}
.app-dropdown{position:absolute;top:calc(100% + 12px);right:0;width:240px;background:var(--white);border-radius:var(--r-md);box-shadow:0 20px 44px -14px var(--navy-25);padding:10px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:1200;}
.app-dropdown.open{opacity:1;pointer-events:auto;transform:translateY(0);}
.app-dropdown-head{display:flex;align-items:center;gap:10px;padding:8px 10px 12px;border-bottom:1px solid var(--navy-06);margin-bottom:8px;}
.app-dropdown-head .adh-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;overflow:hidden;background:var(--navy-06);display:flex;align-items:center;justify-content:center;color:var(--navy-45);font-weight:500;font-size:12.5px;font-family:'Cabinet Grotesk',sans-serif;border:1.5px solid var(--navy-10);}
.app-dropdown-head .adh-avatar img{width:100%;height:100%;object-fit:cover;}
.app-dropdown-head .adh-name{font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:13px;color:var(--navy);}
.app-dropdown-head .adh-email{font-size:11px;color:var(--navy-45);margin-top:1px;word-break:break-all;}
.app-dropdown-profiles{padding:4px 2px 8px;border-bottom:1px solid var(--navy-06);margin-bottom:8px;}
.app-dropdown-profiles-label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--navy-45);padding:4px 10px 6px;}
.app-dropdown-profile{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;border-radius:8px;font-size:12.5px;color:var(--navy-80);font-weight:500;text-decoration:none;}
@media (hover:hover){.app-dropdown-profile:hover{background:var(--navy-06);color:var(--navy);}}
.app-dropdown-profile-avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;overflow:hidden;background:var(--navy-06);display:flex;align-items:center;justify-content:center;color:var(--navy-45);font-size:11px;font-weight:600;}
.app-dropdown-profile-avatar img{width:100%;height:100%;object-fit:cover;}
.app-dropdown-profile-meta{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px;align-items:flex-start;}
.app-dropdown-profile-name{font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.2;}
.app-dropdown-profile-type{font-size:11.5px;color:var(--navy-45);margin-top:0;line-height:1.2;}
.app-dropdown-profiles-empty{padding:4px 10px 6px;font-size:11.5px;color:var(--navy-45);line-height:1.4;}
.app-dropdown-profiles-empty a{display:inline;padding:0;color:var(--teal-dark);font-weight:600;}
.app-dropdown-profile-add{display:flex!important;align-items:center;gap:10px;color:var(--teal-dark)!important;font-weight:650!important;border-top:1px solid var(--navy-06);margin-top:5px;padding-top:11px!important;}
.app-dropdown-profile-add-mark{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--teal-08);font-size:21px;font-weight:400;line-height:1;flex-shrink:0;}
.app-dropdown a,.app-dropdown button{display:block;width:100%;text-align:left;padding:10px 10px;border-radius:8px;font-size:13px;color:var(--navy-80);font-weight:500;}
.app-dropdown a.app-dropdown-profile,.app-sheet a.app-dropdown-profile{display:flex;align-items:center;}
@media (hover:hover){.app-dropdown a:hover,.app-dropdown button:hover{background:var(--navy-06);color:var(--navy);}}
.app-dropdown .adl-logout{color:var(--orange-dark);}

@media (max-width:900px){
  .app-nav-links{display:none;}
  .app-nav-search{width:auto;flex:1;}
}
@media (max-width:720px){
  /* Below 900px .app-nav-links is already display:none, and here
     .app-nav-search is hidden too -- so .app-more-btn (hamburger), the
     logo, and .app-nav-right (notifications + avatar) become the ONLY
     visible flex children of .app-nav-inner. With three visible
     children and justify-content:space-between, the browser spreads
     all three evenly -- which puts the logo in the visual center of
     the header instead of sitting close to the hamburger on the left.
     Using flex-start here keeps the hamburger and logo hugging the
     left edge together, and margin-left:auto on .app-nav-right (below)
     is what pushes just the icon cluster out to the far right. */
  .app-nav-inner{padding:0 18px;height:56px;gap:12px;justify-content:flex-start;}
  .app-nav-search{display:none;}
  .app-nav-right{margin-left:auto;}
}

/* ---------- Mobile bottom nav ---------- */
/* Plain fixed footer bar, docked flush to all three edges with a top
   hairline -- not a floating rounded card. */
.app-bottom-nav{display:none;}
@media (max-width:720px){
  .app-bottom-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1000;
    background:rgba(255,255,255,.96);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
    border-top:1px solid rgba(27,33,45,.08);
    padding:10px 6px calc(12px + env(safe-area-inset-bottom));justify-content:space-around;align-items:center;
  }
  /* Icon-only bottom nav: labels are collapsed via font-size:0 rather than
     removed from markup (avoids touching 20+ duplicated HTML files), while
     the svg/avatar keep explicit px sizes so they're unaffected. */
  .abn-link{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;color:var(--icon-black);font-size:0;padding:9px 8px;flex:1;}
  /* The "gel" active bubble is a pseudo-element sized to hug just the icon
     (not the full 1/5-width flex segment) so it pops in behind whichever
     tab is active as you move between them, instead of a wide rectangle. */
  .abn-link::before{content:"";position:absolute;top:2px;left:50%;width:50px;height:36px;border-radius:999px;background:transparent;transform:translateX(-50%) scale(.82);transition:background-color .28s cubic-bezier(.34,1.56,.64,1),transform .28s cubic-bezier(.34,1.56,.64,1);z-index:0;}
  .abn-link.active::before{background:var(--navy-06);transform:translateX(-50%) scale(1);}
  .abn-link svg,.abn-link .abn-avatar{position:relative;z-index:1;}
  .abn-link.active{color:#111;}
  /* Facebook-style active tab line: a short rounded green bar sitting on
     the top edge of the bar above whichever tab is active. It grows in from
     the centre when you switch tabs. The compose "+" never gets one. */
  .abn-link::after{content:"";position:absolute;top:-10px;left:50%;width:44px;height:3px;border-radius:0 0 3px 3px;background:var(--teal,#1B7A6E);transform:translateX(-50%) scaleX(0);opacity:0;transition:transform .28s cubic-bezier(.34,1.56,.64,1),opacity .18s var(--ease);pointer-events:none;}
  .abn-link.active::after{transform:translateX(-50%) scaleX(1);opacity:1;}
  .abn-link-add::after{display:none;}
  .abn-link svg{stroke:currentColor;stroke-width:2.1;width:22px;height:22px;transition:stroke .2s var(--ease);}
  /* Icons ship with a hidden (fill-opacity:0) solid layer on their main
     shape -- on the active tab it fades in for the "filled" look, same
     idea as the reference mock (outline by default, solid when selected). */
  .abn-link svg .ic-fill{transition:fill-opacity .25s var(--ease);}
  .abn-link.active svg .ic-fill{fill-opacity:.16;}
  .abn-avatar{width:26px;height:26px;border-radius:50%;overflow:hidden;background:var(--navy-06);border:1.5px solid var(--navy-10);display:flex;align-items:center;justify-content:center;color:var(--navy-45);font-weight:500;font-size:11px;font-family:'Cabinet Grotesk',sans-serif;}
  .abn-link.active .abn-avatar{border-color:#111;}
  .abn-avatar img{width:100%;height:100%;object-fit:cover;}
  /* "+" compose entry -- sits centered between Jobs and People (with
     Profile removed from this bar, that's now the middle slot of five) so
     a person can start a community post from anywhere in the app, same
     destination as the community page's own floating compose button
     (posts.html). Styled as a solid accent pill rather than an outline
     icon so it reads as an action, not another destination tab. */
  .abn-link-add{padding:9px 8px;}
  .abn-link-add::before{display:none;}
  .abn-add-icon{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;background:var(--teal,#1B7A6E);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .2s var(--ease),background .2s var(--ease);}
  .abn-link-add:active .abn-add-icon{transform:scale(.92);}
  .abn-link-add svg{width:18px;height:18px;stroke:#fff;}
  /* room so the floating bottom nav never covers page content */
  body.app-body{padding-bottom:68px;}
}
/* Same fill-on-active treatment on desktop's horizontal nav links */
.app-nav-link svg .ic-fill{transition:fill-opacity .25s var(--ease);}
.app-nav-link.active svg .ic-fill{fill-opacity:.16;}@media (hover:hover){.app-nav-link:hover svg .ic-fill{fill-opacity:.16;}}

/* Mobile "Me" account sheet */
.app-sheet-backdrop{position:fixed;inset:0;background:var(--navy-45);z-index:1300;opacity:0;pointer-events:none;transition:opacity .25s var(--ease);}
.app-sheet-backdrop.open{opacity:1;pointer-events:auto;}
.app-sheet{position:fixed;left:0;right:0;bottom:0;z-index:1301;background:var(--white);border-radius:20px 20px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .3s var(--ease);}
.app-sheet-backdrop.open .app-sheet{transform:translateY(0);}
.app-sheet-handle{width:36px;height:4px;background:#000;border-radius:4px;margin:8px auto 14px;position:relative;}
.app-sheet-handle::before{content:'';position:absolute;left:-40px;right:-40px;top:-14px;bottom:-14px;}
.app-sheet .app-dropdown-head{border-bottom:1px solid var(--navy-06);}
.app-sheet a,.app-sheet button{display:block;width:100%;text-align:left;padding:13px 6px;border-radius:8px;font-size:14.5px;color:var(--navy-80);font-weight:500;border-bottom:1px solid var(--navy-06);}
.app-sheet a:last-of-type,.app-sheet button:last-of-type{border-bottom:none;}
.app-sheet .adl-logout{color:var(--orange-dark);}
/* .app-sheet button{display:block} above (for plain sheet links like
   View Profile/Settings) was beating .app-more-item's display:flex on
   specificity, so icon+label inside an .app-more-item stacked instead
   of sitting side by side. Restore the row layout here. */
.app-sheet button.app-more-item,.app-sheet button.inbox-sheet-row,.app-sheet button.msg-action-row{display:flex;align-items:center;min-height:44px;}
.app-more-profiles-submenu{margin:-4px 0 8px 32px;padding:4px 0 6px 10px;border-left:1px solid var(--navy-10);}
.app-more-profiles-submenu[hidden]{display:none;}
.app-more-profile-row{display:flex;align-items:center;gap:10px;padding:8px 0;color:var(--navy-80);text-decoration:none;font-size:12.5px;font-weight:500;}
@media (hover:hover){.app-more-profile-row:hover{color:#111;}}
.app-more-profile-row .app-dropdown-profile-avatar{width:30px;height:30px;}
.app-more-profile-row .app-dropdown-profile-name{font-size:12.5px;}
.app-more-profile-add{color:var(--teal-dark);font-weight:650;}
.app-more-profile-add-mark{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--teal-08);font-size:19px;line-height:1;flex-shrink:0;}
.app-more-item[aria-expanded="true"] .app-more-item-caret{transform:rotate(180deg);}
.app-more-item-caret{transition:transform .2s var(--ease);}

/* ---------- Home feed layout ---------- */
.app-main{width:100%;max-width:680px;margin:0 auto;padding:32px 24px 56px;}
@media (max-width:720px){.app-main{padding:20px 16px calc(96px + env(safe-area-inset-bottom));}}
.app-welcome{font-family:'Cabinet Grotesk',sans-serif;font-weight:500;font-size:25.5px;letter-spacing:-.02em;color:var(--navy);margin-bottom:22px;}
@media (max-width:720px){.app-welcome{font-size:22px;margin-bottom:16px;}}

/* ---------- Dashboard (home.html) ---------- */
.app-main-wide{max-width:1180px;}
.dash-sub{font-size:13.5px;color:var(--navy-45);margin-top:-14px;margin-bottom:26px;}
@media (max-width:720px){.dash-sub{margin-top:-8px;margin-bottom:20px;}}
.dash-banner{display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--teal-08);border:1px solid var(--teal-16);border-radius:var(--r-lg);padding:18px 22px;margin-bottom:26px;flex-wrap:wrap;}
.dash-banner h4{font-family:'Cabinet Grotesk',sans-serif;font-size:14px;font-weight:600;color:var(--navy);margin-bottom:4px;}
.dash-banner p{font-size:12px;color:var(--navy-65);}
.dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:900px){.dash-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.dash-grid{grid-template-columns:1fr;}}
.dash-card{display:block;background:var(--white);border:1px solid var(--card-stroke);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:22px;transition:box-shadow .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);}
@media (hover:hover){.dash-card:hover{box-shadow:var(--shadow-card-hover);border-color:var(--navy-10);transform:translateY(-2px);}}
.dash-card-icon{width:auto;height:auto;color:var(--teal-dark);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.dash-card h4{font-family:'Cabinet Grotesk',sans-serif;font-size:14.5px;font-weight:600;color:var(--navy);margin-bottom:5px;}
.dash-card p{font-size:12px;color:var(--navy-45);line-height:1.5;}

/* ---------- KYC "not verified yet" nudge banner (ppKycBannerHTML) ----------
   Faint green, no border, no shadow -- on purpose: this sits on pages like
   business-profile.html that deliberately strip shadows off every card, so
   the banner needs to carry its own look rather than inherit a card class. */
.pp-kyc-banner{position:relative;background:var(--teal-16);border-radius:18px;padding:20px 52px 20px 22px;margin-bottom:22px;box-shadow:none;}
.pp-kyc-banner-close{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--navy-45);flex-shrink:0;}
@media (hover:hover){.pp-kyc-banner-close:hover{background:rgba(27,33,45,.08);color:var(--navy);}}
.pp-kyc-banner-body h4{display:flex;align-items:center;gap:7px;font-family:'Cabinet Grotesk',sans-serif;font-size:15.5px;font-weight:700;color:var(--navy);margin-bottom:6px;}
.pp-kyc-banner-badge{display:inline-flex;color:var(--navy);flex-shrink:0;}
.pp-kyc-banner-body p{font-size:12.5px;color:var(--navy-65);line-height:1.55;margin-bottom:14px;max-width:520px;}
.pp-kyc-banner-cta{display:inline-flex;align-items:center;background:var(--navy);color:#fff;border:none;border-radius:var(--r-pill);padding:10px 20px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;text-decoration:none;box-shadow:none;}
@media (hover:hover){.pp-kyc-banner-cta:hover{background:#000;}}
@media (max-width:640px){.pp-kyc-banner{padding:18px 46px 18px 18px;border-radius:16px;}}

/* Composer */
.composer{background:var(--white);border:1px solid var(--card-stroke);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:16px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:box-shadow .2s var(--ease),border-color .2s var(--ease);margin-bottom:26px;}
@media (hover:hover){.composer:hover{box-shadow:var(--shadow-card-hover);border-color:var(--navy-10);}}
.composer-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;overflow:hidden;background:linear-gradient(135deg,var(--teal),var(--navy));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:500;font-size:14px;font-family:'Cabinet Grotesk',sans-serif;}
.composer-avatar img{width:100%;height:100%;object-fit:cover;}
.composer-prompt{flex:1;background:var(--navy-06);border-radius:var(--r-pill);padding:12px 18px;color:var(--navy-45);font-size:13.5px;}

/* Post creation modal */
.post-modal-backdrop{position:fixed;inset:0;background:var(--navy-45);z-index:1400;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s var(--ease);}
.post-modal-backdrop.open{opacity:1;pointer-events:auto;}
@media (min-width:641px){.post-modal-backdrop{align-items:center;}}
.post-modal{background:var(--white);width:100%;max-width:560px;border-radius:20px 20px 0 0;padding:22px;transform:translateY(24px);transition:transform .3s var(--ease);max-height:88vh;display:flex;flex-direction:column;}
@media (min-width:641px){.post-modal{border-radius:var(--r-lg);}}
.post-modal-backdrop.open .post-modal{transform:translateY(0);}
.post-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.post-modal-head h3{font-family:'Cabinet Grotesk',sans-serif;font-size:16.5px;font-weight:600;}
.post-modal-close{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--navy-45);}
@media (hover:hover){.post-modal-close:hover{background:var(--navy-06);color:var(--navy);}}
.post-modal-who{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.pmw-avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--teal),var(--navy));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:500;font-size:12.5px;font-family:'Cabinet Grotesk',sans-serif;flex-shrink:0;}
.pmw-avatar img{width:100%;height:100%;object-fit:cover;}
.post-modal-who .pmw-name{font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:13.5px;color:var(--navy);}
.post-modal-who .pmw-title{font-size:11px;color:var(--navy-45);}
#postComposerText{flex:1;min-height:140px;resize:none;border:none;outline:none;font-size:15px;line-height:1.5;color:var(--navy);font-family:inherit;}
#postComposerText::placeholder{color:var(--navy-45);}
.post-modal-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--navy-06);}
.post-modal-error{font-size:11.5px;color:var(--orange-dark);margin-top:8px;min-height:16px;}

/* Feed */
.feed-empty{text-align:center;padding:60px 20px;color:var(--navy-45);}
.feed-empty svg{margin:0 auto 16px;opacity:.5;}
.feed-empty h4{font-family:'Cabinet Grotesk',sans-serif;font-size:15px;color:var(--navy-65);margin-bottom:6px;}
.feed-empty p{font-size:12.5px;}
/* Illustrated feed empty states (errors keep the plain look) */
.feed-empty:not(.is-error){padding:40px 20px 48px;}
.feed-empty:not(.is-error)::before{content:'';display:block;width:190px;height:170px;max-width:62%;margin:0 auto 16px;background:url(/pp-empty-posts.webp) center/contain no-repeat;}
.feed-empty.is-search::before{background-image:url(/pp-empty-search.webp);}
.feed-empty.is-people::before{background-image:url(/pp-empty-connections.webp);}
.feed-empty:not(.is-error) svg{display:none;}
.feed-empty:not(.is-error) h4{font-size:18px;line-height:1.3;color:var(--navy);}
.feed-empty:not(.is-error) p{font-size:13.5px;max-width:340px;margin:0 auto;color:var(--navy-65);line-height:1.55;}
@media (max-width:720px){.feed-empty:not(.is-error)::before{width:160px;height:145px;}}
.feed-loading{text-align:center;padding:40px 20px;color:var(--navy-45);font-size:12.5px;}

.post-card{background:var(--white);border:1px solid var(--card-stroke);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:18px;margin-bottom:16px;}
.post-card-head{display:flex;align-items:flex-start;gap:11px;margin-bottom:12px;}
.post-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;overflow:hidden;background:linear-gradient(135deg,var(--teal),var(--navy));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:500;font-size:14px;font-family:'Cabinet Grotesk',sans-serif;}
.post-avatar img{width:100%;height:100%;object-fit:cover;}
.post-author-name{font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:13.5px;color:var(--navy);}
.post-author-title{font-size:11.5px;color:var(--navy-45);margin-top:1px;}
.post-time{font-size:11px;color:var(--navy-45);margin-top:2px;}
.post-content{font-size:13.5px;line-height:1.6;color:var(--navy-80);white-space:pre-wrap;word-break:break-word;}

/* Reused pill buttons -- same visual language as styles.css .btn, kept
   local so this file has no hard dependency on that class markup */
.app-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:var(--r-btn,10px);font-size:13px;font-weight:500;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);}
.app-btn-primary{background:var(--teal);color:#fff;}
@media (hover:hover){.app-btn-primary:hover{background:var(--teal-dark);}}
.app-btn-primary:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none;}
.app-btn-ghost{background:transparent;color:var(--navy-65);}
@media (hover:hover){.app-btn-ghost:hover{color:var(--navy);background:var(--navy-06);}}
/* Solid neutral button -- for a secondary action that should still read as
   a real, tappable button (not just muted text like .app-btn-ghost), e.g.
   "Delete" beside a primary "Confirm" on a connection-request card. */
.app-btn-secondary{background:var(--navy-06);color:var(--navy);}
@media (hover:hover){.app-btn-secondary:hover{background:var(--navy-10);}}
/* Bordered neutral button -- was referenced across messages.html/
   contract-detail.html without a definition; added so Back/Save
   Draft/Request changes/etc. read as real buttons, not bare text. */
.app-btn-outline{background:var(--white);color:var(--navy-80);border:1.5px solid var(--navy-10);}
@media (hover:hover){.app-btn-outline:hover{background:var(--navy-06);border-color:var(--navy-10);}}
.app-btn-outline:disabled{opacity:.5;cursor:default;}
.app-btn-sm{padding:7px 14px;font-size:11.5px;}

/* ---------- Authenticated app footer ---------- */
/* Per product decision: no footer at all once a user is signed in, on
   any authenticated-panel page. The public marketing footer
   (#siteFooter) is already hidden post-auth via app-shell.js; this
   keeps .app-footer permanently hidden too instead of swapping in a
   slimmer authenticated version, so signed-in users see no footer on
   either state. Markup is left in each page (harmless, display:none)
   rather than stripped from 28 files, matching how #siteFooter itself
   is already handled (hidden, not removed) for the signed-out case. */
.app-footer{display:none;background:var(--navy);color:rgba(255,255,255,.7);margin-top:40px;}
/* NOTE: no extra margin-bottom here on mobile -- body.app-body's own
   padding-bottom (below, in the bottom-nav block) already reserves the
   space the fixed .app-bottom-nav needs. Adding it again here used to
   double that reserved space, leaving a blank scrollable gap below the
   footer on mobile. */
.app-footer-inner{max-width:1220px;margin:0 auto;padding:36px 24px 28px;}
.app-footer-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.1);}
.app-footer-logo img{height:24px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.92;margin-bottom:6px;}
.app-footer-tag{font-size:11.5px;color:rgba(255,255,255,.45);max-width:260px;}
.app-footer-links{display:flex;flex-wrap:wrap;gap:10px 22px;}
.app-footer-links a{font-size:12px;font-weight:500;color:rgba(255,255,255,.75);}
@media (hover:hover){.app-footer-links a:hover{color:#fff;}}
.app-footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:16px;font-size:11px;color:rgba(255,255,255,.45);}
.app-footer-bottom-links{display:flex;gap:16px;}
.app-footer-bottom-links a{color:rgba(255,255,255,.55);}
@media (hover:hover){.app-footer-bottom-links a:hover{color:#fff;}}

/* ---------- Shared simple content pages (about/academy/community/help) ---------- */
.simple-section{margin-bottom:30px;}
.simple-section h3{font-size:15px;margin-bottom:8px;}
.simple-section p{font-size:13.5px;line-height:1.7;color:var(--navy-65);}
.simple-section a{color:var(--teal);text-decoration:underline;}
.simple-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:30px;}
@media (max-width:640px){.simple-grid{grid-template-columns:1fr;}}
.simple-card{background:var(--white);border:1px solid var(--card-stroke);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:20px;}
.simple-card h3{font-family:'Cabinet Grotesk',sans-serif;font-size:14px;font-weight:600;color:var(--navy);margin-bottom:6px;}
.simple-card p{font-size:12.5px;color:var(--navy-65);line-height:1.6;}
.simple-social-row{display:flex;flex-wrap:wrap;gap:10px;}
.simple-faq{padding:16px 0;border-bottom:1px solid var(--navy-06);}
.simple-faq:first-child{padding-top:0;}
.simple-faq h3{font-family:'Cabinet Grotesk',sans-serif;font-size:13.5px;font-weight:600;color:var(--navy);margin-bottom:5px;}
.simple-faq p{font-size:12.5px;color:var(--navy-65);line-height:1.6;}

/* ---------- Shared resource-style cards (resources-app.html, academy-app.html) ---------- */
.mw-tabs{display:flex;gap:26px;margin:-4px 0 30px;border-bottom:1.5px solid var(--navy-06);overflow-x:auto;}
.mw-tab{padding:0 0 12px;white-space:nowrap;border-bottom:2px solid transparent;font-size:13.5px;font-weight:500;color:var(--navy-45);transition:color .2s var(--ease),border-color .2s var(--ease);}
@media (hover:hover){.mw-tab:hover{color:var(--navy);}}
.mw-tab.active{color:var(--teal-dark);border-bottom-color:var(--teal-dark);}
.res-cats{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 26px;}
.res-cat-chip{background:var(--navy-06);color:var(--navy-80);font-size:12px;font-weight:500;padding:8px 16px;border-radius:100px;}

/* Category filter, moved off the page and into the header's filter-icon
   dropdown on resources-app.html (see .app-page-head-action) so the grid
   of resources starts right under the header instead of behind a row of
   chips. Reuses the .app-dropdown a/button base styling. */
.rc-filter-label{font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--navy-45);padding:8px 10px 6px;}
.rc-filter-item{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.rc-filter-item.active{background:var(--teal-08);color:var(--teal-dark);}
.rc-filter-item .rc-filter-check{flex-shrink:0;opacity:0;color:var(--teal-dark);}
.rc-filter-item.active .rc-filter-check{opacity:1;}
.res-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 28px;}
@media (max-width:760px){.res-grid{grid-template-columns:1fr;}}
.res-card{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--navy-06);}
.res-art{width:52px;height:52px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--teal-dark);background:var(--teal-08);}
.res-card.premium .res-art{color:#8a6a10;background:var(--gold-16);}
.res-card-body{flex:1;min-width:0;}
.res-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:4px;}
.res-card h3{font-size:14px;font-weight:600;line-height:1.35;}
.res-badge{font-size:11px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;padding:4px 9px;border-radius:100px;flex-shrink:0;display:inline-flex;align-items:center;gap:4px;}
.res-badge.free{background:var(--teal-16);color:var(--teal-dark);}
.res-badge.premium{background:var(--gold-16);color:#8a6a10;}
.res-card p{color:var(--navy-65);font-size:12px;line-height:1.55;margin-bottom:8px;}
.res-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.res-card .res-tag{color:var(--navy-45);font-size:11px;}
.res-card-action{font-size:11.5px;font-weight:500;color:var(--teal-dark);white-space:nowrap;}
@media (hover:hover){.res-card-action:hover{color:var(--navy);}}
.res-section{margin-bottom:8px;}
.res-section h2{font-size:17px;margin-bottom:6px;}

/* ---------- Posts page (posts.html) ----------
   The dedicated "Posts" nav destination -- a standalone authenticated page
   for composing a post, separate from the quick composer/modal on Home.
   Reuses the same who/avatar classes as the Home composer modal. */
.post-page-card{background:var(--white);border:1px solid var(--card-stroke);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:22px;}
.post-page-card textarea{display:block;width:100%;min-height:180px;resize:vertical;border:1px solid var(--navy-06);border-radius:10px;padding:13px 15px;font-size:14px;line-height:1.55;color:var(--navy);font-family:inherit;outline:none;margin-top:16px;transition:border-color .2s var(--ease);}
.post-page-card textarea:focus{border-color:var(--navy-15);}
.post-page-card textarea::placeholder{color:var(--navy-45);}
.post-page-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--navy-06);}
.post-page-error{font-size:11.5px;color:var(--orange-dark);margin-top:8px;min-height:16px;}

/* Post composer (posts.html) -- opens as a true full-screen sheet with no
   ProfilePro header/footer chrome, matching how Instagram/Facebook open
   "New post": just Cancel/Post at the top and the compose form, filling the
   whole viewport. It sends the user back into the normal app shell
   (the composer, header+footer intact) on Cancel or after publishing
   -- see the script at the bottom of posts.html. */
.post-compose-page{position:fixed;inset:0;z-index:50;background:var(--white);overflow-y:auto;display:flex;justify-content:center;}
.post-compose-page .post-compose-card{width:100%;max-width:640px;height:100%;min-height:100%;display:flex;flex-direction:column;}
/* Mobile: the composer opens as a sheet that slides up from the bottom
   (rounded top corners) instead of just snapping into place -- .pcc-open
   is added a frame after load and removed again just before Cancel/Post
   navigates away, so closing slides back down first. See posts.html's
   leaveComposer(). Desktop keeps the plain full-panel look (no slide). */
@media (max-width:720px){
  .post-compose-page{border-top-left-radius:20px;border-top-right-radius:20px;overflow:hidden;transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);}
  .post-compose-page.pcc-open{transform:translateY(0);overflow-y:auto;}
}

/* Post composer (posts.html). The textarea flex-grows to fill the screen
   so the toolbar sits right above the keyboard instead of leaving a dead
   gap underneath it, and the avatar sits in its own column next to the
   text like the reference. Who can see/reply (audience) is a bold icon
   button on the toolbar (.pcc-postopt) rather than a labelled dropdown --
   it reuses the same everyone/following/your_people choices the "..."
   menu on an already-published post offers (see PM_AUDIENCE_OPTIONS in
   post-engine.js), just applied at publish time instead of after the
   fact. Which community/topic this goes to (optional, only meaningful if
   the account has joined any) is a small text link above the textarea,
   same spot the reference screenshot's "Community or topic" row sits in
   -- kept separate from audience on purpose, they answer different
   questions (WHERE this posts vs WHO can see it). */
.post-compose-card{background:var(--white);border:none;border-radius:0;padding:14px 20px 20px;margin-top:0;display:flex;flex-direction:column;flex:1;min-height:100%;}
.pcc-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-shrink:0;}
.pcc-cancel{background:none;border:none;font-family:inherit;font-size:13.5px;color:var(--navy-65);cursor:pointer;padding:6px 4px;}
.pcc-cancel:disabled{opacity:.5;cursor:default;}
@media (hover:hover){.pcc-cancel:hover{color:var(--navy);}}
.pcc-topbar-right{display:flex;align-items:center;gap:14px;}
.pcc-drafts-wrap{position:relative;}
.pcc-drafts-btn{background:none;border:none;font-family:inherit;font-size:13.5px;font-weight:600;color:#111;cursor:pointer;padding:6px 2px;}
@media (hover:hover){.pcc-drafts-btn:hover{opacity:.8;}}
.pcc-compose-row{display:flex;align-items:flex-start;gap:12px;flex:1;min-height:0;}
.pcc-compose-col{flex:1;min-width:0;display:flex;flex-direction:column;}
.pcc-community-btn{display:inline-flex;align-items:center;gap:3px;align-self:flex-start;background:none;border:none;font-family:inherit;font-size:12px;font-weight:600;color:var(--navy-45);cursor:pointer;padding:4px 0 8px;margin:0;}
.pcc-community-btn svg{color:var(--navy-25);}
@media (hover:hover){.pcc-community-btn:hover{color:var(--navy-65);}}
.post-compose-card textarea{display:block;width:100%;flex:1;min-height:120px;resize:none;border:none;padding:6px 0;font-size:21px;line-height:1.4;color:var(--navy);font-family:inherit;outline:none;}
.post-compose-card textarea::placeholder{color:var(--navy-45);}
.pcc-toolbar{display:flex;align-items:center;justify-content:flex-start;gap:2px;padding-top:14px;margin-top:auto;border-top:1px solid var(--navy-06);flex-shrink:0;}
.pcc-postopt-wrap{position:relative;flex-shrink:0;}
.pcc-postopt{display:flex;align-items:center;gap:7px;height:42px;padding:0 14px;border:none;margin-right:4px;border-radius:var(--r-md);background:none;color:var(--navy);cursor:pointer;font-family:inherit;font-size:12px;font-weight:700;transition:background .2s var(--ease);}
.pcc-postopt svg{width:19px;height:19px;flex-shrink:0;}
@media (hover:hover){.pcc-postopt:hover{background:var(--navy-06);}}
.pcc-tool{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:none;color:var(--icon-black);cursor:pointer;transition:background .2s var(--ease);flex-shrink:0;}
.pcc-tool svg{width:24px;height:24px;}
.pcc-video-tool{border:none;}
@media (hover:hover){.pcc-tool:hover{background:var(--navy-06);}}
.pcc-reply-note{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--navy-45);margin-top:12px;padding-top:12px;border-top:1px solid var(--navy-06);flex-shrink:0;}
.pcc-image-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:4px;flex-shrink:0;}
.pcc-image-cell{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:1/1;background:var(--navy-06);}
.pcc-image-pending{display:flex;align-items:center;justify-content:center;}
.pcc-image-cell img,.pcc-image-cell video{display:block;width:100%;height:100%;object-fit:cover;}
.pcc-video-badge{position:absolute;left:6px;bottom:6px;display:flex;align-items:center;gap:3px;padding:3px 7px;border-radius:100px;background:rgba(18,20,25,.65);color:#fff;font-size:11px;font-weight:600;font-family:'Cabinet Grotesk',sans-serif;}
.pcc-video-badge svg{width:10px;height:10px;}
.pcc-image-remove{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:rgba(18,20,25,.65);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;}
@media (hover:hover){.pcc-image-remove:hover{background:rgba(18,20,25,.85);}}

/* Poll builder (posts.html) -- sits in the same spot the image grid does,
   mutually exclusive with it (a post is media OR a poll, same rule
   create-post.js enforces server-side -- see posts.html's pollDraft state
   and the photo/poll tool disabling that goes with it). */
.post-compose-card .pcc-has-poll textarea{flex:none;min-height:56px;max-height:32vh;field-sizing:content;}
.pcc-poll-builder{margin-top:10px;border:1.5px solid var(--navy-10);border-radius:var(--r-lg);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;background:var(--white);}
.pcc-poll-opts{display:flex;flex-direction:column;gap:10px;padding:12px 12px 14px;}
.pcc-poll-opt-row{display:flex;align-items:center;gap:10px;}
.pcc-poll-img{position:relative;flex-shrink:0;width:52px;height:52px;}
.pcc-poll-img-pick{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;border:none;border-radius:var(--r-md);background:var(--navy-06);color:var(--navy);cursor:pointer;overflow:hidden;}
.pcc-poll-img-pick img{width:100%;height:100%;object-fit:cover;display:block;}
@media (hover:hover){.pcc-poll-img-pick:hover{background:var(--navy-10);}}
.pcc-poll-img-has .pcc-poll-img-pick{background:none;}
.pcc-poll-img-x{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;border:2px solid var(--white);background:#272c33;color:#fff;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;}
.pcc-poll-opt-field{position:relative;flex:1;min-width:0;}
.pcc-poll-opt-input{display:block;width:100%;box-sizing:border-box;border:1.5px solid var(--navy-10);border-radius:var(--r-md);padding:14px 44px 14px 14px;font-family:inherit;font-size:15px;color:var(--navy);outline:none;background:none;}
.pcc-poll-opt-input::placeholder{color:var(--navy-45);}
.pcc-poll-opt-input:focus{border-color:var(--teal);}
.pcc-poll-count{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--navy-45);pointer-events:none;display:none;}
.pcc-poll-opt-field:focus-within .pcc-poll-count{display:block;}
.pcc-poll-slot{flex-shrink:0;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:none;padding:0;color:var(--teal);cursor:pointer;}
span.pcc-poll-slot{cursor:default;}
.pcc-poll-slot-x{background:#272c33;color:#fff;}
.pcc-poll-slot-x svg{width:14px;height:14px;}
.pcc-poll-slot-minus{color:var(--navy-45);}
.pcc-poll-slot-minus svg{width:14px;height:14px;}
@media (hover:hover){.pcc-poll-slot-plus:hover,.pcc-poll-slot-minus:hover{background:var(--navy-06);}.pcc-poll-slot-x:hover{background:#000;}}
.pcc-poll-length{border-top:1px solid var(--navy-10);}
.pcc-poll-length-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box;padding:16px 16px;cursor:pointer;background:none;border:none;font-family:inherit;text-align:left;}
.pcc-poll-length-label{font-size:15px;font-weight:700;color:var(--navy);}
.pcc-poll-length-val{display:inline-flex;align-items:center;gap:4px;font-size:15px;color:var(--navy-65);}
.pcc-poll-chev{transition:transform .2s var(--ease);}
.pcc-poll-length.open .pcc-poll-chev{transform:rotate(180deg);}
.pcc-poll-length.open .pcc-poll-length-row{border-bottom:1px solid var(--navy-10);}
/* days / hours / min wheel: 5 rows tall, the chosen row sits in the middle on a grey band */
.pcc-wheel{position:relative;display:grid;grid-template-columns:repeat(3,1fr);height:220px;padding:0 12px;box-sizing:border-box;}
.pcc-wheel-band{position:absolute;left:12px;right:12px;top:88px;height:44px;border-radius:10px;background:var(--navy-06);pointer-events:none;}
.pcc-wheel-col{position:relative;z-index:1;height:220px;overflow-y:auto;scroll-snap-type:y mandatory;scroll-padding-top:88px;scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 70%,transparent 100%);}
.pcc-wheel-col::-webkit-scrollbar{display:none;}
.pcc-wheel-pad{height:88px;}
.pcc-wheel-item{height:44px;display:flex;align-items:center;justify-content:flex-start;padding-left:22%;scroll-snap-align:start;font-size:18px;color:var(--navy-45);cursor:pointer;white-space:pre;}
.pcc-wheel-unit{display:none;}
.pcc-wheel-item.sel{color:var(--navy);font-weight:600;}
.pcc-wheel-item.sel .pcc-wheel-unit{display:inline;}
/* Photo/poll tools disable each other while the other is in use -- a post
   is media or a poll, never both. */
.pcc-tool-disabled{opacity:.35;pointer-events:none;}

/* "Post options" (audience) popover and the Drafts popover -- small
   anchored menus, same visual language as .pcc-postas-menu below.
   The audience button lives in the toolbar at the very bottom of the
   composer, so opening it downward (the old default) pushed the menu
   past the bottom of the screen -- you had to scroll the page just to
   see options that were supposedly already the last thing on screen.
   It opens upward instead, anchored to sit just above its button, which
   is always in view since the button itself is. Drafts stays anchored
   from the top bar, where opening downward is already fully on-screen. */
.pcc-audmenu,.pcc-drafts-menu{position:absolute;background:var(--white);border-radius:var(--r-md);box-shadow:0 18px 40px -14px rgba(27,33,45,.35);border:1px solid var(--navy-10);min-width:240px;padding:6px;display:none;z-index:6;max-height:60vh;overflow-y:auto;}
.pcc-audmenu{left:0;bottom:calc(100% + 6px);}
.pcc-drafts-menu{top:calc(100% + 6px);right:0;min-width:270px;max-width:88vw;}
.pcc-audmenu.open,.pcc-drafts-menu.open{display:block;}
.pcc-audmenu-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:9px 10px;border-radius:var(--r-sm,8px);background:none;border:none;cursor:pointer;font-family:inherit;color:var(--navy);}
@media (hover:hover){.pcc-audmenu-opt:hover{background:var(--navy-04,#f4f5f3);}}
.pcc-audmenu-opt.picked{background:var(--teal-08);}
.pcc-audmenu-opt svg{color:var(--teal);flex-shrink:0;}
.pcc-audmenu-label{display:block;font-size:13px;font-weight:600;color:var(--navy);}
.pcc-audmenu-desc{display:block;font-size:11px;color:var(--navy-45);margin-top:1px;}
.pcc-community-opt{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;padding:9px 10px;border-radius:var(--r-sm,8px);background:none;border:none;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:var(--navy);}
@media (hover:hover){.pcc-community-opt:hover{background:var(--navy-04,#f4f5f3);}}
.pcc-community-opt.picked{background:var(--teal-08);}
.pcc-community-opt svg{color:var(--teal);flex-shrink:0;}
.pcc-draft-save{display:block;width:100%;text-align:left;padding:10px;border-radius:var(--r-sm,8px);background:none;border:none;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:700;color:#111;}
@media (hover:hover){.pcc-draft-save:hover{background:var(--navy-04,#f4f5f3);}}
.pcc-draft-empty{padding:14px 10px;font-size:12px;color:var(--navy-45);text-align:center;}
.pcc-draft-item{display:flex;align-items:center;gap:4px;}
.pcc-draft-open{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;padding:9px 10px;border-radius:var(--r-sm,8px);background:none;border:none;cursor:pointer;font-family:inherit;}
@media (hover:hover){.pcc-draft-open:hover{background:var(--navy-04,#f4f5f3);}}
.pcc-draft-item-text{display:block;width:100%;font-size:12.5px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pcc-draft-item-time{font-size:11.5px;color:var(--navy-45);}
.pcc-draft-delete{flex-shrink:0;width:32px;height:32px;border-radius:50%;border:none;background:none;color:var(--navy-45);display:flex;align-items:center;justify-content:center;cursor:pointer;}
@media (hover:hover){.pcc-draft-delete:hover{background:var(--navy-06);color:var(--navy);}}

/* Cancel confirm sheet -- Save to drafts / Continue editing / Cancel.
   Bottom sheet on phones (slides up), centered card on wider screens. */
.pcc-cancel-backdrop{position:fixed;inset:0;z-index:80;background:rgba(15,23,26,.45);display:none;align-items:flex-end;justify-content:center;}
.pcc-cancel-backdrop.open{display:flex;}
.pcc-cancel-sheet{width:100%;max-width:420px;background:var(--white);border-radius:20px 20px 0 0;padding:22px 18px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 40px rgba(15,23,26,.2);}
.pcc-cancel-title{font-size:15px;font-weight:700;color:var(--navy);text-align:center;}
.pcc-cancel-sub{font-size:12px;color:var(--navy-45);text-align:center;margin:6px 0 18px;line-height:1.4;}
.pcc-cancel-opt{display:block;width:100%;text-align:center;padding:13px;border-radius:var(--r-md);background:var(--navy-04,#f4f5f3);border:none;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--navy);margin-top:8px;}
@media (hover:hover){.pcc-cancel-opt:hover{background:var(--navy-08);}}
.pcc-cancel-opt-primary{background:var(--teal);color:var(--white);}
@media (hover:hover){.pcc-cancel-opt-primary:hover{opacity:.9;background:var(--teal);}}
.pcc-cancel-opt-danger{color:#D93B3B;}
@media (min-width:601px){
  .pcc-cancel-backdrop{align-items:center;}
  .pcc-cancel-sheet{border-radius:18px;max-width:380px;}
}

/* "Post as" identity picker (posts.html) -- hidden entirely when the
   account owns no companies (see renderPostAs() there), same
   show-nothing-rather-than-a-single-disabled-option approach
   post-job.html's own "Post as" card uses. Not the same thing as
   .pcc-postopt above -- this is WHO is publishing, not WHO can see it. */
.pcc-avatar-wrap{position:relative;flex-shrink:0;}
.pcc-postas-menu{position:absolute;top:calc(100% + 6px);left:0;background:var(--white);border-radius:var(--r-md);box-shadow:0 18px 40px -14px rgba(27,33,45,.35);border:1px solid var(--navy-10);min-width:220px;padding:6px;display:none;z-index:6;}
.pcc-postas-menu.open{display:block;}
.pcc-postas-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;border-radius:var(--r-sm,8px);background:none;border:none;cursor:pointer;font-family:inherit;}
@media (hover:hover){.pcc-postas-opt:hover{background:var(--navy-04,#f4f5f3);}}
.pcc-postas-opt.picked{background:var(--teal-08);}
.pcc-postas-opt-logo{width:28px;height:28px;border-radius:50%;overflow:hidden;background:var(--navy-06);color:var(--navy-45);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:11px;font-family:'Cabinet Grotesk',sans-serif;flex-shrink:0;}
.pcc-postas-opt-logo img{width:100%;height:100%;object-fit:cover;}
.pcc-postas-opt-name{display:block;font-size:13px;font-weight:600;color:var(--navy);}
.pcc-postas-opt-sub{display:block;font-size:11.5px;color:var(--navy-45);}


/* ---------- Nav unread badges (Messages / Notifications) ----------
   Injected dynamically by app-shell.js next to the Messages and
   Notifications nav items (desktop top nav, mobile bottom nav, and the
   mobile top-bar Messages icon) whenever the signed-in account has unread
   conversations/notifications -- present on every authenticated page, not
   just messages.html/notifications.html themselves, so unread state is
   visible everywhere per spec ("show unread ... clearly"). Never fakes a
   count: only rendered when a real fetch returns unreadConversations /
   unreadCount greater than zero. */
.app-nav-link,.abn-link,.app-nav-msg-mobile{position:relative;}
.app-nav-badge{position:absolute;z-index:3;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--orange-dark);color:#fff;font-size:11px;font-weight:600;line-height:16px;text-align:center;font-family:'Cabinet Grotesk',sans-serif;box-shadow:0 0 0 2px var(--white);pointer-events:none;}
.app-nav-link .app-nav-badge{top:2px;right:20px;}
.abn-link .app-nav-badge{top:2px;right:calc(50% - 18px);}
.app-nav-msg-mobile .app-nav-badge{top:-3px;right:-3px;}

/* ---------- Messages (messages.html) ----------
   Two-pane layout: conversation list + active thread, matching the app's
   card language (white surfaces, --navy-06 borders, --r-lg radius). Below
   840px the two panes stack into a single-view mobile flow (list, or
   thread with a back button), same breakpoint spirit as the rest of the
   shell's responsive rules. */
.app-main-msg{max-width:1180px;}

/* ==========================================================================
   Shared "row list" system -- replaces boxed/bordered cards across the
   authenticated app (dashboard, jobs, people, activity, job posts, etc).
   A section is a heading + a flush list of rows separated by hairline
   dividers; no per-item background, border or shadow. Reuse this instead
   of introducing a new bordered card wherever a list of similar items
   needs to be shown. ========================================================== */
.app-section{margin-bottom:32px;}
.app-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
.app-section-head h2{font-family:'Cabinet Grotesk',sans-serif;font-size:16.5px;font-weight:600;color:var(--navy);}
.app-section-head p{font-size:11.5px;color:var(--navy-45);margin-top:2px;}
.app-section-link{font-size:12px;font-weight:500;color:var(--teal-dark);white-space:nowrap;flex-shrink:0;}
@media (hover:hover){.app-section-link:hover{color:var(--navy);}}

.app-row-list{display:flex;flex-direction:column;}
.app-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--navy-06);}
.app-row-list .app-row:last-child{border-bottom:none;}
.app-row-icon{width:38px;height:38px;border-radius:50%;background:none;color:var(--teal-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:500;font-size:12px;font-family:'Cabinet Grotesk',sans-serif;object-fit:cover;overflow:hidden;}
.app-row-icon img{width:100%;height:100%;object-fit:cover;}
.app-row-body{flex:1;min-width:0;}
.app-row-title{font-family:'Cabinet Grotesk',sans-serif;font-weight:500;font-size:13.5px;color:var(--navy);line-height:1.35;}
@media (hover:hover){a.app-row-title:hover{color:var(--teal-dark);}}
.app-row-meta{font-size:11.5px;color:var(--navy-45);margin-top:2px;}
.app-row-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.app-row-tag{font-size:11px;font-weight:500;letter-spacing:.02em;padding:3px 9px;border-radius:100px;background:var(--navy-06);color:var(--navy-65);}
.app-row-tag.accent{background:var(--orange-10);color:var(--orange-dark);}
.app-row-trail{flex-shrink:0;text-align:right;font-size:11.5px;color:var(--navy-45);}
.app-row-trail strong{display:block;font-family:'Cabinet Grotesk',sans-serif;font-weight:500;font-size:12.5px;color:var(--navy);}
.app-row-status{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;padding:5px 11px;border-radius:100px;flex-shrink:0;}
.app-row-status.active{background:var(--teal-16);color:var(--teal-dark);}
.app-row-status.under_review{background:var(--gold-16);color:#8a6a10;}
.app-row-status.incomplete{background:var(--orange-10);color:var(--orange-dark);}
.app-row-status.rejected{background:var(--navy-06);color:var(--navy-65);}

/* Empty / loading states -- no dashed box, just quiet centered copy so an
   empty section still reads as a finished part of the product. */
.app-row-empty{padding:22px 0;color:var(--navy-45);font-size:12.5px;line-height:1.6;text-align:center;}
.app-row-empty a{color:var(--teal-dark);font-weight:500;}
/* The teal-dark link color above is meant for plain text links in an
   empty state (e.g. "browse the full Job Board"), but its selector
   (.app-row-empty a) is more specific than .app-btn-primary's own
   color:#fff, so it was winning and turning solid buttons like
   "Post a Job" dark-on-teal instead of white-on-teal. Restore white
   text specifically for any button-styled link in this context. */
.app-row-empty .app-btn-primary{color:#fff;}
.app-row-skel{height:52px;border-bottom:1px solid var(--navy-06);position:relative;overflow:hidden;}
.app-row-skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(27,33,45,.05),transparent);animation:appRowShimmer 1.3s infinite;}
@keyframes appRowShimmer{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}

/* Inline stat row (e.g. profile views / unread messages) -- three plain
   items separated by dividers on mobile, sitting in a row on desktop,
   never boxed. */
.app-stat-row{display:flex;border:1px solid var(--navy-06);border-radius:var(--r-lg);overflow:hidden;}
.app-stat{flex:1;display:flex;align-items:center;gap:12px;padding:16px 18px;border-right:1px solid var(--navy-06);}
.app-stat:last-child{border-right:none;}
.app-stat-icon{color:var(--teal-dark);flex-shrink:0;}
.app-stat-num{font-family:'Cabinet Grotesk',sans-serif;font-weight:500;font-size:19px;color:var(--navy);line-height:1.1;}
.app-stat-label{font-size:11px;color:var(--navy-45);margin-top:1px;}
@media (max-width:560px){.app-stat-row{flex-direction:column;}
  .app-stat{border-right:none;border-bottom:1px solid var(--navy-06);}
  .app-stat:last-child{border-bottom:none;}}

/* Dashboard search -- sits right under the greeting, mirrors the reference
   mobile screen; reuses the same search endpoint as the nav search. */
.app-dash-search{position:relative;margin:18px 0 30px;}
.app-dash-search input{width:100%;background:var(--navy-06);border:1px solid transparent;border-radius:var(--r-pill);padding:13px 16px 13px 42px;font-size:13px;color:var(--navy);outline:none;transition:background .2s var(--ease),border-color .2s var(--ease);}
.app-dash-search input:focus{background:var(--white);border-color:var(--navy-10);}
.app-dash-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--navy-45);pointer-events:none;}
.msg-shell{display:flex;background:var(--white);border:1px solid var(--navy-06);border-radius:var(--r-lg);overflow:hidden;height:calc(100dvh - 200px);min-height:0;}
@media (max-width:840px){.msg-shell{height:auto;min-height:0;}}
@media (max-width:720px){.msg-shell{height:auto;}}

.msg-list-pane{width:340px;flex-shrink:0;border-right:1px solid var(--navy-06);display:flex;flex-direction:column;overflow-y:auto;}
@media (max-width:840px){
  .msg-list-pane{width:100%;border-right:none;}
  .msg-shell[data-view="thread"] .msg-list-pane{display:none;}
  .msg-shell:not([data-view="thread"]) .msg-thread-pane{display:none;}
}
.msg-list-row{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-bottom:1px solid var(--navy-06);cursor:pointer;transition:background .15s var(--ease);}
@media (hover:hover){.msg-list-row:hover{background:var(--navy-06);}}
.msg-list-row.active{background:var(--teal-08);}
.msg-list-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;overflow:hidden;background:linear-gradient(135deg,var(--teal),var(--navy));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:500;font-size:14px;font-family:'Cabinet Grotesk',sans-serif;}
.msg-list-avatar img{width:100%;height:100%;object-fit:cover;}
.msg-list-body{flex:1;min-width:0;}
.msg-list-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.msg-list-name{font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:13px;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.msg-list-row.unread .msg-list-name{color:var(--navy);}
.msg-list-time{font-size:11px;color:var(--navy-45);flex-shrink:0;}
.msg-list-preview{display:flex;align-items:center;gap:6px;margin-top:2px;}
.msg-list-preview span{font-size:12px;color:var(--navy-45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.msg-list-row.unread .msg-list-preview span{color:var(--navy-80);font-weight:500;}
.msg-unread-dot{width:9px;height:9px;border-radius:50%;background:var(--teal);flex-shrink:0;}

.msg-thread-pane{flex:1;display:flex;flex-direction:column;min-width:0;}
.msg-thread-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--navy-06);flex-shrink:0;}
.msg-thread-back{display:none;color:var(--navy-65);padding:4px;border-radius:8px;flex-shrink:0;}
@media (max-width:840px){.msg-thread-back{display:flex;}}
@media (hover:hover){.msg-thread-back:hover{background:var(--navy-06);color:var(--navy);}}
.msg-thread-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;overflow:hidden;background:linear-gradient(135deg,var(--teal),var(--navy));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:500;font-size:12.5px;font-family:'Cabinet Grotesk',sans-serif;}
.msg-thread-avatar img{width:100%;height:100%;object-fit:cover;}
.msg-thread-name{font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:13.5px;color:var(--navy);}
.msg-thread-title{font-size:11px;color:var(--navy-45);margin-top:1px;}
.msg-thread-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;}
.msg-bubble-row{display:flex;}
.msg-bubble-row.mine{justify-content:flex-end;}
.msg-bubble{max-width:74%;padding:10px 14px;border-radius:16px;font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word;}
.msg-bubble-row:not(.mine) .msg-bubble{background:var(--navy-06);color:var(--navy-80);border-bottom-left-radius:4px;}
.msg-bubble-row.mine .msg-bubble{background:var(--teal);color:#fff;border-bottom-right-radius:4px;}
.msg-bubble-time{font-size:11px;color:var(--navy-45);margin-top:3px;}
.msg-bubble-row.mine .msg-bubble-time{text-align:right;}
.msg-thread-foot{display:flex;align-items:flex-end;gap:10px;padding:14px 16px;border-top:1px solid var(--navy-06);flex-shrink:0;}
.msg-thread-foot textarea{flex:1;resize:none;max-height:120px;border:1px solid var(--navy-06);border-radius:14px;padding:10px 14px;font-size:13px;line-height:1.5;font-family:inherit;color:var(--navy);outline:none;transition:border-color .2s var(--ease);}
.msg-thread-foot textarea:focus{border-color:var(--navy-15);}
.msg-send-btn{width:40px;height:40px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s var(--ease),opacity .2s var(--ease);}
@media (hover:hover){.msg-send-btn:hover{background:var(--teal-dark);}}
.msg-send-btn:disabled{opacity:.45;cursor:default;}
.msg-thread-empty,.msg-list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:1;padding:40px 20px;color:var(--navy-45);}
.msg-thread-empty svg,.msg-list-empty svg{margin-bottom:14px;opacity:.5;}
.msg-thread-empty h4,.msg-list-empty h4{font-family:'Cabinet Grotesk',sans-serif;font-size:14px;color:var(--navy-65);margin-bottom:6px;}
.msg-thread-empty p,.msg-list-empty p{font-size:12px;}
.msg-error-banner{margin:14px 16px 0;padding:10px 14px;border-radius:10px;background:var(--orange-10);color:var(--orange-dark);font-size:12px;}

/* ---------- Notifications (notifications.html) ---------- */
.notif-list{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--navy-06);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);}
.notif-row{display:flex;align-items:flex-start;gap:13px;padding:16px 18px;border-bottom:1px solid var(--navy-06);cursor:pointer;transition:background .15s var(--ease);}
.notif-row:last-child{border-bottom:none;}
@media (hover:hover){.notif-row:hover{background:var(--navy-06);}}
.notif-row.unread{background:var(--teal-08);}
@media (hover:hover){.notif-row.unread:hover{background:var(--teal-16);}}
.notif-icon{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--navy-06);color:var(--navy-65);}
.notif-row.unread .notif-icon{background:var(--teal-16);color:var(--teal-dark);}
.notif-icon.rejected{background:var(--orange-10);color:var(--orange-dark);}
.notif-body{flex:1;min-width:0;}
.notif-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.notif-title{font-family:'Cabinet Grotesk',sans-serif;font-weight:500;font-size:13px;color:var(--navy);}
.notif-time{font-size:11px;color:var(--navy-45);flex-shrink:0;}
.notif-msg{font-size:12.5px;color:var(--navy-65);margin-top:3px;line-height:1.5;}
.notif-dot{width:9px;height:9px;border-radius:50%;background:var(--teal);flex-shrink:0;margin-top:4px;}
.notif-toolbar{display:flex;align-items:center;justify-content:space-between;margin:-14px 0 18px;}
.notif-toolbar span{font-size:12px;color:var(--navy-45);}
.notif-mark-all{font-size:12px;font-weight:500;color:var(--teal-dark);}
@media (hover:hover){.notif-mark-all:hover{color:var(--teal);text-decoration:underline;}}
.notif-mark-all:disabled{opacity:.5;cursor:default;text-decoration:none;}

/* ---------- My Profile (my-profile.html) ----------
   The authenticated, owner-only view of a Professional Profile -- reuses
   the same field shapes/data as the public professional-profile.html but
   is a separate page (own header/nav, an always-visible Edit Profile
   action, no "Contact" CTA, and a "no profile yet" state that explains
   the upside without forcing profile creation). */
.mp-cover{width:100%;height:150px;border-radius:0;background:#17332f url('/assets/default-cover.png') center/cover no-repeat;margin-bottom:18px;overflow:hidden;}
.mp-cover img{width:100%;height:100%;object-fit:cover;}
@media (max-width:640px){.mp-cover{height:100px;}}
.mp-head{display:flex;align-items:center;gap:20px;margin-bottom:26px;flex-wrap:wrap;}
.mp-avatar{width:84px;height:84px;border-radius:50%;object-fit:cover;flex-shrink:0;background:linear-gradient(135deg,var(--teal),var(--navy));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:25.5px;font-family:'Cabinet Grotesk',sans-serif;}
.mp-head-info{flex:1;min-width:200px;}
.mp-name{font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:clamp(22px,3vw,28px);color:var(--navy);letter-spacing:-.01em;}
.mp-title{color:var(--teal-dark);font-weight:500;font-size:14px;margin-top:4px;}
.mp-loc{color:var(--navy-65);font-size:12.5px;margin-top:5px;display:flex;align-items:center;gap:6px;}
.mp-edit-btn{flex-shrink:0;}
@media (max-width:640px){.mp-head{gap:14px;}.mp-edit-btn{width:100%;justify-content:center;order:3;}}

.mp-status-note{background:var(--gold-16);color:#8a6a10;border-radius:12px;padding:12px 16px;font-size:12.5px;margin-bottom:22px;}
.mp-status-note.rejected{background:var(--orange-10);color:var(--orange-dark);}

.mp-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start;}
@media (max-width:880px){.mp-grid{grid-template-columns:1fr;}}

.mp-card{background:var(--white);border:1px solid var(--card-stroke);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:24px;margin-bottom:18px;}
.mp-card h2{font-family:'Cabinet Grotesk',sans-serif;font-size:15px;font-weight:600;color:var(--navy);margin-bottom:14px;}
.mp-card p{color:var(--navy-80);font-size:13px;line-height:1.65;}
.mp-empty-note{color:var(--navy-45);font-size:12.5px;}

.mp-skills{display:flex;flex-wrap:wrap;gap:8px;}
.mp-skill-chip{background:var(--navy-06);color:var(--navy-80);font-size:12px;font-weight:500;padding:7px 14px;border-radius:100px;}

.mp-item{padding:14px 0;border-top:1px solid var(--navy-06);}
.mp-item:first-child{border-top:none;padding-top:0;}
.mp-item-title{font-weight:500;font-size:15px;color:var(--navy);}
.mp-item-meta{color:var(--navy-45);font-size:13px;margin:2px 0 6px;}
/* Shown only when an experience's company name matches a registered
   Business page (see netlify/functions/lib/company-match.js). */
.mp-item-logo{display:flex;gap:12px;align-items:flex-start;}
.mp-item-company-logo{width:36px;height:36px;border-radius:0;object-fit:contain;flex-shrink:0;background:transparent;border:0;margin-top:1px;}
.mp-item-body{flex:1;min-width:0;}
.mp-item-company-link{color:inherit;}
@media (hover:hover){.mp-item-company-link:hover{color:var(--teal-dark);text-decoration:underline;}}

.mp-link-row{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:8px 0;border-top:1px solid var(--navy-06);}
.mp-link-row:first-child{border-top:none;padding-top:0;}
.mp-link-label{color:var(--navy-45);min-width:96px;flex-shrink:0;}
.mp-link-row a{color:var(--teal-dark);word-break:break-all;}
@media (hover:hover){.mp-link-row a:hover{text-decoration:underline;}}

.mp-side-card{background:var(--white);border:1px solid var(--card-stroke);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:24px;}
.mp-side-card h2{font-family:'Cabinet Grotesk',sans-serif;font-size:14px;font-weight:600;color:var(--navy);margin-bottom:12px;}
.mp-side-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--navy-06);font-size:14.5px;}
.mp-side-row:first-child{border-top:none;padding-top:0;}
.mp-side-row-block{display:block;}
.mp-side-label{color:var(--navy-45);}
.mp-side-value{font-weight:500;text-align:right;}
.mp-side-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.mp-tag{background:var(--teal-08);color:var(--teal-dark);font-size:11px;font-weight:500;padding:5px 12px;border-radius:100px;}

.mp-loading{text-align:center;padding:60px 20px;color:var(--navy-45);font-size:12.5px;}

.mp-empty-card{max-width:520px;margin:20px auto 0;text-align:center;background:var(--white);border:1px solid var(--card-stroke);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:44px 32px;}
.mp-empty-icon{width:56px;height:56px;border-radius:50%;background:var(--teal-08);color:var(--teal-dark);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.mp-empty-card h2{font-family:'Cabinet Grotesk',sans-serif;font-size:18px;font-weight:600;color:var(--navy);margin-bottom:10px;}
.mp-empty-card p{color:var(--navy-65);font-size:13px;line-height:1.65;margin-bottom:14px;}
.mp-empty-card .app-btn{margin-top:10px;}

/* ---------- Business section (my-business.html, business-profile.html,
   business-form.html) ----------
   A ProfilePro account can exist with a Personal Profile only -- Business
   Profiles are a separate, optional layer on the same account, and one
   account can hold several of them (e.g. someone who runs more than one
   company). None of these classes touch .mp-* markup used by the personal
   profile; they only extend the same visual language. */

.biz-list-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:26px;}
.biz-list-title{font-family:'Cabinet Grotesk',sans-serif;font-weight:500;font-size:clamp(22px,3vw,28px);color:var(--navy);letter-spacing:-.01em;}
.biz-list-sub{color:var(--navy-65);font-size:12.5px;margin-top:6px;max-width:480px;}

.biz-card-arrow{color:var(--navy-45);flex-shrink:0;}

.biz-back-link{display:inline-flex;align-items:center;gap:6px;color:var(--navy-65);font-size:12.5px;font-weight:500;margin-bottom:18px;}
@media (hover:hover){.biz-back-link:hover{color:var(--navy);}}
/* On mobile, pages using .biz-back-link also use the sticky .app-page-head
   back arrow (data-simple-header) -- showing both is a duplicated "go back"
   control. Every current .biz-back-link page opts into the simple header,
   so this is safe to hide outright at the same breakpoint. Desktop never
   shows .app-page-head, so .biz-back-link remains the only back nav there. */
@media (max-width:840px){
  .biz-back-link{display:none;}
}

.biz-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px;}
@media (max-width:720px){.biz-actions{grid-template-columns:1fr;}}
.biz-action-card{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--card-stroke);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:16px;transition:box-shadow .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);}
@media (hover:hover){.biz-action-card:hover{box-shadow:var(--shadow-card-hover);border-color:var(--navy-10);transform:translateY(-2px);}}
.biz-action-icon{width:auto;height:auto;color:var(--teal-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.biz-action-title{font-family:'Cabinet Grotesk',sans-serif;font-weight:500;font-size:13px;color:var(--navy);}
.biz-action-sub{font-size:11px;color:var(--navy-65);margin-top:1px;}

/* Create / Edit Business Profile form -- LinkedIn-style "Edit Page" layout */
.biz-form-title{font-family:'Cabinet Grotesk',sans-serif;font-weight:500;font-size:clamp(21px,3vw,26px);color:var(--navy);letter-spacing:-.01em;}
.biz-form-sub{color:var(--navy-65);font-size:12.5px;margin-top:6px;margin-bottom:22px;max-width:560px;}
.biz-form-card{background:var(--white);border:1px solid var(--card-stroke);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:26px;max-width:600px;}

/* Logo: circular, capped size, with a small round edit-pencil badge --
   never lets a large uploaded image blow up the layout. */
.biz-form-logo-row{display:flex;align-items:center;gap:16px;margin-bottom:26px;}
.biz-form-logo-wrap{position:relative;width:84px;height:84px;flex-shrink:0;}
.biz-form-logo-preview{width:84px;height:84px;border-radius:50%;background:var(--navy-06);color:var(--navy-45);display:flex;align-items:center;justify-content:center;font-weight:500;font-size:23.5px;font-family:'Cabinet Grotesk',sans-serif;overflow:hidden;border:1px solid var(--navy-10);}
.biz-form-logo-preview img{width:100%;height:100%;object-fit:cover;display:block;}
.biz-form-logo-edit{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;background:var(--white);border:1px solid var(--navy-10);box-shadow:0 2px 8px rgba(27,33,45,.18);display:flex;align-items:center;justify-content:center;color:var(--navy-80);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease);}
@media (hover:hover){.biz-form-logo-edit:hover{background:var(--navy-06);color:var(--teal-dark);}}
.biz-form-logo-name{font-size:12px;font-weight:600;color:var(--navy-80);margin-bottom:2px;}
.biz-form-hint{font-size:11px;color:var(--navy-45);margin-top:7px;}

/* Cover photo: full-width banner preview above the logo row, same
   pencil-edit-badge pattern as the logo. */
.biz-form-cover-wrap{position:relative;width:100%;height:140px;border-radius:var(--r-lg,14px);margin-bottom:22px;overflow:hidden;}
.biz-form-cover-preview{width:100%;height:100%;background:linear-gradient(135deg,var(--teal-08),var(--navy-06));display:flex;align-items:center;justify-content:center;color:var(--navy-45);font-size:12px;overflow:hidden;border:1px solid var(--navy-10);}
.biz-form-cover-preview img{width:100%;height:100%;object-fit:cover;display:block;}
.biz-form-cover-edit{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:var(--white);border:1px solid var(--navy-10);box-shadow:0 2px 8px rgba(27,33,45,.18);display:flex;align-items:center;justify-content:center;color:var(--navy-80);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease);}
@media (hover:hover){.biz-form-cover-edit:hover{background:var(--navy-06);color:var(--teal-dark);}}

.biz-field{display:block;margin-bottom:18px;}
.biz-field span{display:block;font-size:12px;font-weight:500;color:var(--navy-80);margin-bottom:7px;}
.biz-field span em{color:var(--orange-dark);font-style:normal;margin-left:2px;}
.biz-field input,.biz-field textarea,.biz-field select{width:100%;border:1px solid var(--navy-06);border-radius:10px;padding:11px 14px;font-size:13px;color:var(--navy);font-family:inherit;outline:none;transition:border-color .2s var(--ease);background:var(--white);}
.biz-field input:focus,.biz-field textarea:focus,.biz-field select:focus{border-color:var(--navy-15);}
.biz-field input::placeholder,.biz-field textarea::placeholder{color:var(--navy-45);}
.biz-field input:disabled{background:var(--navy-06);color:var(--navy-45);cursor:not-allowed;}
.biz-field textarea{resize:vertical;line-height:1.55;}
.biz-field-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.biz-field-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:640px){.biz-field-row{grid-template-columns:1fr;}.biz-field-row-2{grid-template-columns:1fr;}}
.biz-field-check{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:11.5px;color:var(--navy-65);cursor:pointer;}
.biz-field-check input{width:auto;margin:0;}

/* Toggle rows: "Message button" / "Custom button" -- label + description
   on the left, an iOS-style switch on the right. */
.biz-toggle-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--navy-06);}
.biz-toggle-row:first-of-type{border-top:1px solid var(--navy-06);margin-top:4px;}
.biz-toggle-text{flex:1;}
.biz-toggle-title{font-family:'Cabinet Grotesk',sans-serif;font-weight:500;font-size:13px;color:var(--navy);margin-bottom:3px;}
.biz-toggle-sub{font-size:11.5px;color:var(--navy-45);line-height:1.5;}
.biz-switch{position:relative;width:42px;height:24px;flex-shrink:0;display:inline-block;}
.biz-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.biz-switch-track{position:absolute;inset:0;background:var(--navy-10);border-radius:100px;transition:background .2s var(--ease);}
.biz-switch-track::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--white);box-shadow:0 1px 3px rgba(27,33,45,.3);transition:transform .2s var(--ease);}
.biz-switch input:checked + .biz-switch-track{background:var(--teal);}
.biz-switch input:checked + .biz-switch-track::after{transform:translateX(18px);}
.biz-custom-btn-fields{display:grid;grid-template-columns:1fr 1.4fr;gap:12px;margin-top:14px;}
@media (max-width:640px){.biz-custom-btn-fields{grid-template-columns:1fr;}}

.biz-form-section-title{font-family:'Cabinet Grotesk',sans-serif;font-weight:500;font-size:14px;color:var(--navy);margin:28px 0 16px;padding-top:22px;border-top:1px solid var(--navy-06);}
.biz-form-section-title:first-of-type{margin-top:0;}

.biz-form-error{font-size:11.5px;color:var(--orange-dark);min-height:16px;margin-bottom:6px;}
.biz-form-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:8px;padding-top:18px;border-top:1px solid var(--navy-06);}

/* ---------- Settings page (settings.html) — X-style list→detail ---------- */
body[data-app-page="settings"]{background:#FAFAFA;}
body[data-app-page="settings"] .app-main{max-width:920px;padding-top:18px;}
/* Settings is a utility/detail page, not one of the primary tab
   destinations (Home/Jobs/People/Messages) the bottom nav represents --
   same reasoning as contract-detail.html's own immersive view. It had no
   page-specific override before, so it fell through to every mobile
   page's default-visible bottom nav. */
/* Settings keeps the bottom bar on its main list; it only hides once a section is opened (see settings.css). */
.settings-shell{margin-top:4px;}

/* ---------- Workspace pages (workspace.html, workspace-board.html) ----------
   Immersive, focused views like settings/contract-detail -- not a primary
   tab destination, so no bottom nav. Also: simplified header (hamburger +
   logo + search, no nav links) at EVERY width, not just the shared
   <900px breakpoint, per feedback that this page should look closer to a
   focused tool than the rest of the site chrome. */
body[data-app-page="workspace"] .app-nav-links{display:none;}
/* Workspace shows the bottom bar on phones like the other main pages. */
/* ---------- Contracts (contracts.html) ----------
   Same reasoning as Workspace above: not a primary tab destination,
   and contracts.html now hides .app-nav at every width in favor of
   its own .iv-header strip (back + "Contracts" + "+"), so the bottom
   tab bar would be the only nav left on mobile with nothing above it
   to anchor it -- drop it here too, same breakpoint. */
@media (max-width:720px){
  body[data-app-page="contracts"] .app-bottom-nav{display:none;}
}
.settings-search{margin:0 0 16px;max-width:560px;}
.settings-search-label{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;}
.settings-search-field{position:relative;}
.settings-search-field svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--navy-45);pointer-events:none;}
.settings-search input{width:100%;border:1px solid var(--navy-10);background:var(--white);border-radius:var(--r-pill);padding:11px 16px 11px 42px;font:inherit;color:var(--navy);outline:none;}
.settings-search input:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-08);}
.settings-search-empty{display:none;margin:-6px 0 16px;color:var(--navy-45);font-size:12px;}
.settings-search-empty.visible{display:block;}
.settings-nav{display:flex;flex-direction:column;gap:18px;}
.settings-nav-group{background:var(--white);border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(27,33,45,.04);}
.settings-nav-group-label{padding:14px 16px 6px;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--navy-45);text-transform:uppercase;}
.settings-nav-btn{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;background:transparent;border:none;border-bottom:1px solid var(--navy-06);padding:14px 16px;cursor:pointer;font-family:inherit;}
.settings-nav-btn:last-child{border-bottom:none;}
@media (hover:hover){.settings-nav-btn:hover{background:var(--navy-03,#F7F8F9);}}
.settings-nav-btn.active{background:var(--teal-08);}
.settings-nav-btn-icon{width:22px;height:22px;flex-shrink:0;margin-top:1px;color:var(--navy-65);display:flex;align-items:center;justify-content:center;}
.settings-nav-btn-icon svg{display:block;stroke:currentColor;}
.settings-nav-btn-text{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
.settings-nav-btn-title{display:block;font-size:14px;font-weight:600;color:var(--navy);line-height:1.25;}
.settings-nav-btn-sub{display:block;font-size:11.5px;color:var(--navy-45);line-height:1.35;font-weight:400;}
.settings-nav-btn-chev{flex-shrink:0;color:var(--navy-25);font-size:17px;font-weight:300;line-height:1;margin-top:2px;}
.settings-list{margin-top:0;display:none;}
.settings-shell.settings-detail-open .settings-list{display:block;}
.settings-shell.settings-detail-open .settings-nav{display:none;}
.settings-shell.settings-detail-open ~ .settings-legal-list{display:none;}
.settings-item{display:none;border:none;background:var(--white);border-radius:14px;padding:20px 18px 12px;box-shadow:0 1px 2px rgba(27,33,45,.04);}
.settings-item.settings-item-active,.settings-item[open]{display:block;}
.settings-item > summary{display:none;}
.settings-item > .settings-item-body{display:none;padding:0;}
.settings-item.settings-item-active > .settings-item-body,.settings-item[open] > .settings-item-body{display:block;}
.settings-item-body{padding:0;}
.settings-item-desc{font-size:12px;color:var(--navy-45);margin:0 0 14px;}
@media (min-width:900px){
  /* Desktop used to split into a permanent two-column layout here --
     the section list pinned in a sticky sidebar on the left, whichever
     section you'd opened just added as a second panel on the right,
     both always visible at once. That's the "scattered" look: nothing
     ever really left the screen, it just kept accumulating panels. Web
     now runs the exact same single-pane navigation as mobile (the list
     IS the page; opening a section replaces it with a full page of its
     own, with its own header title and a working back button -- see
     settings.html's usesPushNav()), just with a bit more breathing room
     per row since there's no need to conserve width the way mobile does. */
  .settings-item{padding:26px 28px 14px;}
  .settings-nav-btn{padding:16px 18px;}
}
.app-notif-prompt{position:fixed;top:0;left:0;right:0;z-index:1400;display:none;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:12px 16px;background:var(--navy);color:#fff;font-size:13px;font-weight:500;box-shadow:0 10px 28px -16px rgba(0,0,0,.45);}
.app-notif-prompt.is-open{display:flex;}
.app-notif-prompt-actions{display:flex;gap:8px;align-items:center;}
.app-notif-prompt button{border:none;border-radius:999px;padding:8px 14px;font-size:12px;font-weight:600;cursor:pointer;}
.app-notif-prompt-enable{background:#fff;color:var(--navy);}
.app-notif-prompt-dismiss{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)!important;}
body.has-notif-prompt{padding-top:56px;}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--navy-06);}
.settings-row:last-child{border-bottom:none;}
.settings-row-label{font-size:13px;color:var(--navy);font-weight:500;}
.settings-row-sub{font-size:11.5px;color:var(--navy-45);margin-top:2px;}
.settings-field{margin-bottom:14px;}
.settings-field label{display:block;font-size:11.5px;font-weight:500;color:var(--navy-65);margin-bottom:6px;}
.settings-field input,
.settings-field select{width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--navy-10);font-size:13px;color:var(--navy);background:var(--white);font-family:inherit;}
.settings-field select{appearance:none;-webkit-appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1L6 6L11 1" stroke="%231B212D" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>');background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;cursor:pointer;}
.settings-field input:focus,
.settings-field select:focus{outline:none;border-color:var(--teal);}
.settings-save-msg{font-size:11.5px;margin-top:8px;min-height:15px;}
.settings-save-msg.ok{color:var(--teal-dark);}
.settings-save-msg.err{color:var(--orange-dark);}
.settings-plan-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--r-pill);background:var(--teal-08);color:var(--teal-dark);font-size:11.5px;font-weight:500;margin-bottom:12px;}

.pp-switch{position:relative;display:inline-block;width:40px;height:23px;flex-shrink:0;}
.pp-switch input{opacity:0;width:0;height:0;position:absolute;}
.pp-switch .pp-slider{position:absolute;inset:0;background:var(--navy-10);border-radius:100px;transition:background .2s var(--ease);cursor:pointer;}
.pp-switch .pp-slider::before{content:'';position:absolute;width:17px;height:17px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.2);}
.pp-switch input:checked + .pp-slider{background:var(--teal);}
.pp-switch input:checked + .pp-slider::before{transform:translateX(17px);}
.pp-switch input:disabled + .pp-slider{opacity:.5;cursor:default;}

.settings-divider{border:none;border-top:1px solid var(--navy-06);margin:14px 0;}
.settings-2fa-panel{background:var(--navy-03,#F7F8F9);border-radius:12px;padding:14px;margin:2px 0 16px;}
.settings-2fa-qr{width:180px;height:180px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;background:var(--white);border-radius:10px;}
.settings-2fa-panel code{background:var(--navy-06);padding:2px 6px;border-radius:6px;font-size:11.5px;word-break:break-all;}
.settings-team-list{margin-top:16px;}
.settings-team-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--navy-06);}
.settings-team-row:last-child{border-bottom:none;}
.settings-team-name{font-size:13px;color:var(--navy);font-weight:500;}
.settings-team-sub{font-size:11px;color:var(--navy-45);margin-top:2px;}
.settings-team-status{font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.03em;padding:3px 9px;border-radius:100px;background:var(--teal-08);color:var(--teal-dark);}
.settings-team-status.pending{background:var(--gold,#F0C465);color:#7A5A00;}
.settings-team-empty{font-size:12px;color:var(--navy-45);padding:8px 0;}

.settings-legal-list{margin-top:22px;max-width:640px;}
.settings-legal-links{background:var(--white);border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(27,33,45,.04);margin-bottom:14px;}
.settings-legal-links a{display:block;width:100%;text-align:left;padding:12px 16px;font-size:12.5px;color:var(--navy-65);border-bottom:1px solid var(--navy-06);}
.settings-legal-links a:last-child{border-bottom:none;}
@media (hover:hover){.settings-legal-links a:hover{color:var(--navy);background:var(--navy-03,#F7F8F9);}}
.settings-account-actions{background:var(--white);border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(27,33,45,.04);padding:8px 0;}
.settings-logout-btn{display:block;width:100%;text-align:left;padding:14px 16px;font-size:14px;font-weight:600;color:var(--navy);background:transparent;border:none;cursor:pointer;font-family:inherit;}
@media (hover:hover){.settings-logout-btn:hover{background:var(--navy-03,#F7F8F9);}}
.settings-delete-link{display:block;width:100%;text-align:left;padding:12px 16px;font-size:13px;font-weight:500;color:var(--orange-dark);background:transparent;border:none;cursor:pointer;font-family:inherit;}
@media (hover:hover){.settings-delete-link:hover{background:rgba(237,117,70,.08);}}
.settings-version{font-size:11px;color:var(--navy-25);margin-top:14px;padding:0 4px;}

/* ---------- Resources (resources-app.html) -- colorful card redesign ----------
   Replaces plain icon-row cards with pretty gradient-art cards, matching
   the layout style of the reference (colorful top art block + badge,
   white body below with tags + two actions). Deliberately icon/gradient
   based instead of stock photography -- per product decision, no repeated
   stock photos on this page. Six gradient variants cycle by category so
   the grid reads as colorful rather than monochrome. */
.rc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:4px;}
.rc-card{border-radius:var(--r-lg);overflow:hidden;background:var(--white);border:1px solid var(--navy-06);box-shadow:var(--shadow-card);transition:transform .25s var(--ease),box-shadow .25s var(--ease);cursor:pointer;display:flex;flex-direction:column;}
@media (hover:hover){.rc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);}}
.rc-art{position:relative;height:130px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.rc-art svg{position:relative;z-index:1;color:rgba(255,255,255,.92);}
.rc-art-1{background:linear-gradient(135deg,#0F766D,#12303A);}
.rc-art-2{background:linear-gradient(135deg,#ED7546,#D9612F);}
.rc-art-3{background:linear-gradient(135deg,#3E64C8,#12303A);}
.rc-art-4{background:linear-gradient(135deg,#C77DFF,#6B3FA0);}
.rc-art-5{background:linear-gradient(135deg,#E0A800,#B5790A);}
.rc-art-6{background:linear-gradient(135deg,#2FA88A,#0B5850);}
.rc-badge{position:absolute;top:10px;right:10px;font-size:11px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;padding:5px 11px;border-radius:100px;z-index:1;display:inline-flex;align-items:center;gap:4px;}
.rc-badge.free{background:rgba(255,255,255,.92);color:var(--teal-dark);}
.rc-badge.premium{background:rgba(27,33,45,.85);color:#F4D06F;}
.rc-body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1;}
.rc-cat{font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--navy-45);margin-bottom:6px;}
.rc-title{font-family:'Cabinet Grotesk',sans-serif;font-size:14.5px;font-weight:500;color:var(--navy);line-height:1.35;margin-bottom:6px;}
.rc-desc{font-size:12px;color:var(--navy-65);line-height:1.55;margin-bottom:14px;flex:1;}
.rc-actions{display:flex;align-items:center;gap:8px;}
.rc-actions .app-btn{flex:1;}
.rc-price{font-size:11.5px;font-weight:500;color:var(--navy-45);margin-right:auto;}
.rc-empty{padding:40px 0;text-align:center;color:var(--navy-45);font-size:13px;}

/* detail modal reuses the shared .modal-backdrop/.modal-card from styles.css */
/* Static (non-modal) wrapper for a single resource's full detail, used by
   resource-detail.html now that "Details" opens its own page instead of
   the old in-page modal. Same white-card look as the rest of the app, just
   without the modal's fixed-overlay/opacity-animation baggage. */
.rc-detail-panel{background:var(--white);border:1px solid var(--navy-06);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:28px 26px;}
@media (max-width:520px){.rc-detail-panel{padding:22px 18px;}}
.rc-detail-art{height:150px;border-radius:var(--r-md);margin-bottom:18px;display:flex;align-items:center;justify-content:center;}
.rc-detail-art svg{color:rgba(255,255,255,.92);}
.rc-detail-list{margin-top:10px;padding-left:0;list-style:none;}
.rc-detail-list li{font-size:12.5px;color:var(--navy-80);padding:9px 0;border-bottom:1px solid var(--navy-06);display:flex;gap:10px;align-items:flex-start;}
.rc-detail-list li:last-child{border-bottom:none;}
.rc-detail-list li::before{content:'';width:16px;height:16px;margin-top:2px;flex-shrink:0;border-radius:50%;background:var(--teal-16);}

/* ==========================================================================
   Shared "search suggest" panel -- Recent searches + Try searching for,
   attached under any search input via the AppSearchSuggest() component in
   app-shell.js. Used by the header search (.app-nav-search, every
   app-shell page), jobs.html's own search bar, and search.html's search
   bar, so the "tap the search field" moment looks/behaves the same
   everywhere instead of jumping straight to a bare results page. ---- */
.app-search-suggest-wrap{position:relative;flex:1;min-width:0;}
.app-search-suggest{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--white);border:1px solid var(--navy-10);border-radius:var(--r-md);box-shadow:0 24px 50px -20px rgba(27,33,45,.3);max-height:min(70vh,520px);overflow-y:auto;z-index:60;padding:8px 0;}
.app-search-suggest.open{display:block;}
.app-search-suggest-label{padding:12px 18px 8px;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--navy-45);}
.app-search-suggest-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 18px;font-size:13px;color:var(--navy-80);background:none;transition:background .15s;}
.app-search-suggest-item.active{background:var(--navy-06);}@media (hover:hover){.app-search-suggest-item:hover{background:var(--navy-06);}}
.app-search-suggest-item svg{flex-shrink:0;color:var(--navy-45);}
.app-search-suggest-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.app-search-suggest-item span.app-search-suggest-remove{flex:0 0 auto;margin-left:auto;display:flex;align-items:center;justify-content:center;width:22px;height:22px;overflow:visible;white-space:normal;color:var(--navy-45);padding:0;border-radius:50%;}
@media (hover:hover){.app-search-suggest-item span.app-search-suggest-remove:hover{background:var(--navy-10);color:var(--navy);}}
.app-search-suggest-empty{padding:10px 18px 16px;font-size:12px;color:var(--navy-45);line-height:1.55;}
.app-search-suggest-divider{height:1px;background:var(--navy-06);margin:8px 0;}

/* ==========================================================================
   Shared loading indicator -- four brand-coloured dots that pulse in place
   (no rotating / orbiting / spinning motion anywhere). Used wherever a page
   shows "Loading…"/"Searching…" (see appLoaderHTML() in app-shell.js), on
   the full-page auth-resolving overlay (.app-auth-spinner) and on the
   composer's pending-media tile (.pcc-image-spinner). The class name
   .app-loader-orbit is kept only so existing markup keeps working.
   Respects prefers-reduced-motion via the global rule in styles.css. ---- */
.app-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:56px 20px;}
.app-loader-orbit,.app-auth-spinner,.pcc-image-spinner{display:flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;}
.app-loader-orbit span,.app-auth-spinner span,.pcc-image-spinner span{display:block;width:9px;height:9px;border-radius:50%;animation:appDotPulse 1s ease-in-out infinite;}
.app-loader-orbit span:nth-child(1),.app-auth-spinner span:nth-child(1),.pcc-image-spinner span:nth-child(1){background:#0F766D;animation-delay:0s;}
.app-loader-orbit span:nth-child(2),.app-auth-spinner span:nth-child(2),.pcc-image-spinner span:nth-child(2){background:#ED7546;animation-delay:.15s;}
.app-loader-orbit span:nth-child(3),.app-auth-spinner span:nth-child(3),.pcc-image-spinner span:nth-child(3){background:#F0C465;animation-delay:.3s;}
.app-loader-orbit span:nth-child(4),.app-auth-spinner span:nth-child(4),.pcc-image-spinner span:nth-child(4){background:#1B212D;animation-delay:.45s;}
@keyframes appDotPulse{0%,70%,100%{transform:scale(.55);opacity:.45;}35%{transform:scale(1);opacity:1;}}
.app-loader-text{font-size:12.5px;color:var(--navy-45);}
.app-loader.inline{flex-direction:row;padding:10px 0;gap:10px;}
.app-loader.inline .app-loader-orbit{gap:4px;}
.app-loader.inline .app-loader-orbit span{width:6px;height:6px;}

/* ==========================================================================
   Shared illustrated empty/error state -- replaces bare "No results found"
   / "Sorry, something went wrong" text with an icon (varies by cause: no
   results vs. couldn't load) + heading + message + optional action, in the
   same visual language as the rest of the app shell (see
   appEmptyStateHTML() in app-shell.js). ---- */
.app-empty2{text-align:center;padding:64px 20px;}
.app-empty2-icon{width:60px;height:60px;border-radius:50%;background:var(--navy-06);color:var(--navy-45);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;position:relative;}
.app-empty2-icon.warn{background:var(--orange-10);color:var(--orange-dark);}
.app-empty2-icon.info{background:var(--teal-08);color:var(--teal-dark);}
.app-empty2 h3{font-family:'Cabinet Grotesk',sans-serif;font-size:16.5px;color:var(--navy);margin-bottom:7px;}
.app-empty2 p{font-size:12.5px;color:var(--navy-65);max-width:340px;margin:0 auto;line-height:1.6;}
.app-empty2.has-art{padding:40px 20px 48px;}
.app-empty2-img{display:block;width:190px;max-width:62%;height:auto;margin:0 auto 18px;user-select:none;-webkit-user-drag:none;}
.app-empty2.has-art h3{font-size:18px;line-height:1.3;}
.app-empty2.has-art p{font-size:13.5px;max-width:320px;}
.app-empty2.has-art .app-empty2-action{margin-top:20px;border-color:var(--teal-dark,#0F766D);color:var(--teal-dark,#0F766D);padding:10px 22px;}
.app-empty2.has-art .app-empty2-action svg{flex:none;}
.app-empty2.has-art .app-empty2-action.solid{background:var(--teal-dark,#0F766D);color:#fff;}
@media (hover:hover){.app-empty2.has-art .app-empty2-action:hover{background:var(--teal-dark,#0F766D);color:#fff;border-color:var(--teal-dark,#0F766D);}}
@media (max-width:720px){.app-empty2-img{width:160px;}}
.app-empty2-action{display:inline-flex;align-items:center;gap:6px;margin-top:18px;border:1.5px solid var(--navy-10);border-radius:var(--r-pill);padding:10px 20px;font-size:12.5px;font-weight:500;color:var(--navy);transition:all .25s;}
@media (hover:hover){.app-empty2-action:hover{background:var(--navy);color:var(--white);border-color:var(--navy);}}
.app-empty2-action.solid{background:var(--teal);border-color:var(--teal);color:var(--white);font-weight:600;}
@media (hover:hover){.app-empty2-action.solid:hover{background:var(--teal-dark);border-color:var(--teal-dark);color:var(--white);}}

/* Per-cause empty-state animations -- distinct motion per `kind` so a
   dead connection reads differently at a glance from "nothing here yet"
   or a hard error, instead of every blank state looking the same.
   Kept subtle/looping (not one-shot) since these can sit on screen a
   while, and respects prefers-reduced-motion like the search glow does. */
.app-empty2-notFound svg{animation:appEmptySearchSweep 2.6s ease-in-out infinite;transform-origin:center;}
@keyframes appEmptySearchSweep{0%,100%{transform:rotate(0deg) translate(0,0);}25%{transform:rotate(-8deg) translate(-1px,-1px);}75%{transform:rotate(8deg) translate(1px,-1px);}}

.app-empty2-network{background:var(--orange-10);}
.app-empty2-network::before,.app-empty2-network::after{content:'';position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--orange-dark);opacity:0;animation:appEmptyPing 2s ease-out infinite;}
.app-empty2-network::after{animation-delay:1s;}
@keyframes appEmptyPing{0%{transform:scale(.85);opacity:.55;}100%{transform:scale(1.6);opacity:0;}}

.app-empty2-error{animation:appEmptyShake 3.2s ease-in-out infinite;}
.app-empty2-error svg{color:var(--orange-dark);}
@keyframes appEmptyShake{0%,88%,100%{transform:translateX(0);}90%{transform:translateX(-3px);}92%{transform:translateX(3px);}94%{transform:translateX(-2px);}96%{transform:translateX(2px);}98%{transform:translateX(0);}}

.app-empty2-empty svg{animation:appEmptyFloat 3s ease-in-out infinite;}
@keyframes appEmptyFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}

@media (prefers-reduced-motion:reduce){
  .app-empty2-notFound svg,.app-empty2-error,.app-empty2-empty svg{animation:none;}
  .app-empty2-network::before,.app-empty2-network::after{display:none;}
}

/* Shared shimmer skeleton loading block -- one definition used by every
   page's loading state (Community feed, profile pages, etc.) instead of
   each page inventing its own "Loading…" text or a one-off shimmer. */
.app-skel-block{position:relative;overflow:hidden;background:var(--navy-06);border-radius:var(--r-md);}
.app-skel-block::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(27,33,45,.08),transparent);animation:appShimmer 1.3s infinite;}
@keyframes appShimmer{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}

/* ---------- Simple page header: back button + centered page title,
   replacing the full ProfilePro logo/search/nav header on mobile for
   secondary/drilled-into pages. Desktop keeps the standard .app-nav
   (there's no "back" gesture to replace there). Opt in per page via
   data-simple-header on <body>; .app-page-head markup should be placed
   immediately before the page's existing <header class="app-nav">. */
.app-page-head{display:none;}
@media (max-width:840px){
  body[data-simple-header] .app-nav{display:none;}
  /* Specificity fix: body[data-app-hybrid].pp-authed .app-nav (near the top
     of this file) force-shows .app-nav once a session is confirmed, and
     that selector is more specific than the plain hide rule above, so it
     was winning even on simple-header pages -- the full ProfilePro nav
     (logo/search/menu) was reappearing under the "Job Details" back-button
     header for every signed-in visitor. Matching data-app-hybrid + pp-authed
     here too gives this rule higher specificity than that one, so it wins
     outright instead of losing the specificity comparison. */
  body[data-app-hybrid][data-simple-header].pp-authed .app-nav{display:none;}
  body[data-simple-header] .app-page-head{
    position:sticky;top:0;left:0;right:0;z-index:1000;
    display:grid;grid-template-columns:36px 1fr 36px;align-items:center;gap:8px;padding:14px 14px;
    background:rgba(255,255,255,.94);backdrop-filter:blur(14px) saturate(1.4);
    -webkit-backdrop-filter:blur(14px) saturate(1.4);
    border-bottom:1px solid var(--navy-06);
  }
}
.app-page-head-back{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--icon-black);background:none;border:none;cursor:pointer;}
@media (hover:hover){.app-page-head-back:hover{background:var(--navy-06);}}
.app-page-head-back svg{stroke:currentColor;}
.app-page-head-title{min-width:0;text-align:center;font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:17px;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Business Hub only: small logo/initial avatar next to the business
   name in the mobile page header -- filled by setBusinessHeadLogo()
   in app-shell.js once the business record loads. */
.app-page-head-mid{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;}
.bh-head-logo{width:24px;height:24px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--teal),var(--navy));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:11px;overflow:hidden;}
.bh-head-logo:empty{display:none;}
.bh-head-logo img{width:100%;height:100%;object-fit:cover;display:block;}
/* Optional right-side action slot (e.g. a filter icon) for pages that need
   one -- grid auto-placement drops this into the reserved 3rd 36px column,
   and pages that don't use it just leave that column empty, which keeps
   the title centered exactly as before this was added. */
.app-page-head-action{position:relative;width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--icon-black);background:none;border:none;cursor:pointer;}
@media (hover:hover){.app-page-head-action:hover{background:var(--navy-06);}}
.app-page-head-action svg{stroke:currentColor;}
.app-page-head-action.has-filter::after{content:'';position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--teal);border:1.5px solid var(--white);}
.app-page-head .app-dropdown-wrap{grid-column:3;}

/* Business page menu -- shared by business-profile.html and its four
   sibling pages (business-jobs/business-posts/business-analytics/
   business-settings.html), all reached only from My Profiles > a business
   you own. Each destination is a real, separate page (never a same-page
   content swap) -- see wireBusinessPageMenu() in app-shell.js. A page can
   drop a plain <span class="bpm-mount"></span> anywhere it wants the
   button+card to appear (the mobile .app-page-head-action slot, and/or a
   spot in the desktop body) -- the function fills every mount it finds. */
.bpm-mount{position:relative;display:inline-flex;}
.bpm-card{position:absolute;top:calc(100% + 8px);right:0;width:206px;background:var(--white);border-radius:var(--r-md);box-shadow:0 20px 44px -14px var(--navy-25);padding:6px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:1200;}
.bpm-card.open{opacity:1;pointer-events:auto;transform:translateY(0);}
.bpm-card a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--navy);text-decoration:none;}
.bpm-card a svg{flex-shrink:0;color:var(--navy-80);}
.bpm-card a.active{color:var(--teal-dark,#0F766D);background:var(--navy-04,#f4f5f3);}
.bpm-card a.active svg{color:var(--teal-dark,#0F766D);}
@media (hover:hover){.bpm-card a:hover{background:var(--navy-04,#f4f5f3);}}
.bpm-desktop-btn{display:none;}
@media (min-width:841px){
  .bpm-desktop-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;flex-shrink:0;color:var(--icon-black);background:var(--navy-06);border:none;cursor:pointer;}
  @media (hover:hover){.bpm-desktop-btn:hover{background:var(--navy-10);}}
}

/* Duplicate-title guard: pages that opt into the simple mobile header
   (data-simple-header) already show the page name in that sticky bar's
   centered title once the viewport drops to the same breakpoint the
   header itself appears at. Without this, the in-content page title
   below it repeats the same words a second time. Desktop never shows
   the simple header, so elements marked with this class stay visible
   there as the page's only title. Only applied to titles that literally
   restate the page (e.g. a "Post a Job" h1 under a "Post a Job" header)
   -- NOT to titles carrying unique content (a job's own name, a
   company's own name), which stay visible on every width. */
@media (max-width:840px){
  .app-hide-simple-header-dup{display:none;}
}

/* ---------- 2026 brand typography, density and mobile hardening ---------- */
.app-body{font-family:var(--font-body);color:var(--navy);}
.app-body :is(h1,h2,h3,h4,h5,h6,button,label,summary,nav,[class$="-title"],[class$="-name"],[class*="-title "],[class*="-name "]){font-family:var(--font-ui);}
.app-nav-inner{max-width:1220px;}
.app-nav-link,.app-navlink-caret-btn,.app-nav-avatar-btn,.app-more-btn,
.app-page-head-back,.app-page-head-action{min-width:44px;min-height:44px;}
.app-row{padding-block:12px;}
.app-section-head{margin-bottom:10px;}
.app-section-head h2{font-family:var(--font-ui);font-weight:650;}
.app-section-link{font-family:var(--font-ui);font-weight:650;}

@media (max-width:1024px){
  .app-nav-inner{padding-inline:20px;}
  .app-main-wide,.app-main-msg{max-width:100%;}
  .mp-grid,.biz-layout{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:768px){
  body.app-body{overflow-x:hidden;}
  .app-main,.app-main-wide,.app-main-msg{width:100%;max-width:none;}
  .app-section{margin-bottom:28px;}
  .app-sheet{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:max(20px,env(safe-area-inset-bottom));}
  .app-dropdown a,.app-dropdown button,.app-sheet a,.app-sheet button,
  .app-row-action,.settings-item summary{min-height:44px;}
  .msg-shell{min-height:0;}
  .msg-thread-foot{padding-bottom:max(12px,env(safe-area-inset-bottom));}
  .table-wrap,.mw-table-wrap,.an-table-wrap,.ja-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

@media (max-width:480px){
  .app-main,.app-main-wide,.app-main-msg{padding-inline:16px;}
  .app-row{gap:10px;padding-block:11px;}
  .app-row-title{font-size:13px;}
  .app-row-sub{white-space:normal;overflow-wrap:anywhere;}
  .app-section-head{align-items:flex-start;}
  .app-section-head h2{font-size:15px;}
  .app-page-head{padding-top:max(10px,env(safe-area-inset-top));}
  .app-bottom-nav{padding-bottom:max(8px,env(safe-area-inset-bottom));}
  .app-empty2{padding:36px 16px;}
  .mp-card,.mp-side-card,.biz-card,.simple-card{padding:18px 16px;}
  .biz-form-actions,.settings-actions{display:flex;flex-direction:column;align-items:stretch;}
  .biz-form-actions .btn,.settings-actions .btn{width:100%;justify-content:center;}
  input,select,textarea{font-size:15px !important;}
}

/* ==========================================================================
   Persistent desktop sidebar navigation (contract: Round 2 web layout)
   ==========================================================================
   Desktop-only (>=721px, matching every other desktop/mobile split already
   used in this file). Mobile is completely untouched: below 721px this
   sidebar never renders, and the existing .app-bottom-nav / .app-more-*
   hamburger drawer keep working exactly as before.

   Built and injected entirely from app-shell.js (buildSidebar()) rather
   than copy-pasted into all 30 app-shell pages, so there is exactly one
   place to maintain it. --app-sidebar-current is the single source of
   truth for the sidebar's current width; body padding-left and .app-nav's
   left offset both read the same variable so they stay in lockstep
   through the expand/collapse transition. */
:root{--app-sidebar-w:248px;--app-sidebar-w-collapsed:72px;}
body.app-body{--app-sidebar-current:var(--app-sidebar-w);}
body.app-body[data-sidebar-collapsed="true"]{--app-sidebar-current:var(--app-sidebar-w-collapsed);}

.app-sidebar{display:none;}
/* Desktop-only Messages/Notifications icons injected next to the account
   avatar by buildDesktopHeaderIcons() -- hidden by default (mobile keeps
   its own separate .app-nav-msg-mobile icon + bottom-nav Messages tab,
   see those rules above) and shown only at >=721px below. This default
   MUST come before the media query below (same pattern as
   .app-nav-msg-mobile/.app-nav-search-mobile above): a same-specificity
   rule declared after a media block wins over it regardless of the media
   condition, which previously made these icons render at every width and
   duplicate the existing mobile notification icon. */
.app-nav-desktop-icon{display:none;}
@media (min-width:721px){
  .app-sidebar{
    display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:1150;
    width:var(--app-sidebar-current);background:#f4faf7;
    border-right:1px solid var(--navy-06);transition:width .22s var(--ease);
  }
  /* Hybrid pages (professionals.html/jobs.html) only get the authenticated
     shell -- sidebar included -- once a session is confirmed (see
     body.pp-authed gating already used for .app-nav/.app-bottom-nav
     elsewhere in this file). Before that, a signed-out visitor sees the
     page's normal public marketing layout with no sidebar and no
     left padding. */
  body[data-app-hybrid]:not(.pp-authed) .app-sidebar{display:none;}
  body[data-app-hybrid]:not(.pp-authed){padding-left:0 !important;}
  body[data-app-hybrid]:not(.pp-authed) .app-nav{left:0 !important;}

  body.app-body{padding-left:var(--app-sidebar-current);transition:padding-left .22s var(--ease);}
  .app-nav{left:var(--app-sidebar-current);right:0;transition:left .22s var(--ease);}

  /* The old horizontal desktop nav links (Dashboard/Hire Professionals/
     Manage Work/Messages/Notifications) are fully superseded by the
     sidebar now -- hide them rather than delete the markup (used only by
     app-shell.js's existing active-state/dropdown wiring, which is a
     harmless no-op on a hidden element). */
  .app-nav-links{display:none !important;}
  .app-nav-search{width:auto;flex:1;max-width:640px;}
  .app-nav-right{gap:6px;}
  .app-nav-desktop-icon{display:flex;}
  /* .app-nav-inner is normally a centered max-width:1220px box -- fine
     when .app-nav spans the full viewport, but here .app-nav's own left
     edge already moves with the sidebar (expanded vs collapsed), so a
     second centered box inside it was re-centering on every toggle and
     leaving a gap between the icon cluster and the header's real right
     edge whenever the sidebar collapsed. Full-width here keeps Messages/
     Notifications/Profile pinned to the true right edge in both states. */
  .app-nav-inner{max-width:none;}
  /* Header pinned to the true right edge on every page (Home already does this with its own grid below).
     Before: the search stopped at 640px and the icon cluster sat straight after it, so collapsing the sidebar
     slid the whole header content left and left a growing gap on the right. Auto side-margins on the search
     soak up the spare room instead, so logo stays left, icons stay right, search sits between them. */
  body.app-body:not([data-app-page="home"]) .app-nav-search{margin-left:auto;margin-right:auto;}
}

/* Header icon-button styling shared by the new desktop Messages/
   Notifications icons (Profile keeps using the existing round avatar
   button/dropdown, untouched). No `display` here on purpose -- that's
   owned entirely by .app-nav-desktop-icon above so there's only ever one
   rule deciding visibility (an unconditional display:flex here previously
   won the cascade tie at every width and made the icons impossible to
   hide on mobile). */
.app-nav-icon-btn{position:relative;flex-shrink:0;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:var(--icon-black);}
@media (hover:hover){.app-nav-icon-btn:hover{background:var(--navy-06);color:#111;}}
.app-nav-icon-btn svg{stroke:currentColor;display:block;}
.app-nav-icon-btn .app-nav-badge{top:-2px;right:-2px;}

.app-sidebar-scroll{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;padding:16px 10px 12px;scrollbar-width:none;-ms-overflow-style:none;}
.app-sidebar-scroll::-webkit-scrollbar{width:0;height:0;display:none;}
.app-sidebar-logo-row{display:flex;align-items:center;padding:2px 10px 16px;flex-shrink:0;}
.app-sidebar-logo-row img{height:24px;width:auto;display:block;}
.app-sidebar-nav{display:flex;flex-direction:column;gap:2px;flex-shrink:0;}
.app-sidebar-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--navy-85);text-decoration:none;font-size:13.5px;font-weight:600;border:none;background:none;width:100%;text-align:left;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .18s var(--ease),color .18s var(--ease);}
@media (hover:hover){.app-sidebar-item:hover{background:var(--navy-06);color:var(--navy);}}
.app-sidebar-item.active{color:#111;background:var(--navy-06);}
.asi-icon{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:inherit;}
.asi-icon svg{stroke:currentColor;display:block;}
.asi-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.asi-caret{flex-shrink:0;color:var(--navy-45);transition:transform .2s var(--ease);}
/* Right-pointing chevron rotates to point down when its group is open --
   was a down-chevron flipping to up before this round; ICONS.caret in
   app-shell.js now draws the ">" shape itself. */
.app-sidebar-parent[aria-expanded="true"] .asi-caret{transform:rotate(90deg);}

/* ---- Profile row: avatar + name side by side, "Professional" underneath
   -- matches the account dropdown's own identity block instead of the
   plain icon+label row every other sidebar item uses. Collapsed state
   falls back to the same [data-sidebar-collapsed] rules as every other
   item (hides .asi-label), leaving just the round avatar photo. ---- */
.app-sidebar-profile{align-items:center;}
.app-sidebar-profile-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;background:var(--navy-06);color:var(--navy-45);border:1.5px solid var(--navy-10);flex-shrink:0;}
.app-sidebar-profile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;}
.app-sidebar-profile-text{display:flex;flex-direction:column;gap:1px;line-height:1.25;}
.app-sidebar-profile-name{font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:13px;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app-sidebar-profile-role{font-size:11px;color:var(--navy-45);}
[data-sidebar-collapsed="true"] .app-sidebar-profile{padding:8px 0;}

/* ---- Sidebar collapse toggle -- round 8: sitewide, replacing the old
   header-hamburger-does-double-duty approach (above) and the earlier
   board-page-only "click your own avatar to expand" behavior. A
   dedicated, always-visible button sits beside the profile row (not
   nested inside its <a>, which would be invalid HTML) so it's an
   unambiguous, distinct affordance rather than overloading the profile
   link with two different meanings depending on collapsed state -- the
   profile link now always just navigates to my-profile.html, on every
   page and in both sidebar states. Expanded: chevron points left,
   button sits at the end of the row. Collapsed: row stacks vertically
   (avatar on top, centered; chevron button in a second centered row
   directly beneath it, so a collapsed rail still has an obvious way
   back open) and the chevron flips to point right. ---- */
.app-sidebar-profile-row{display:flex;align-items:center;gap:2px;}
.app-sidebar-profile-row .app-sidebar-profile{flex:1;min-width:0;}
.app-sidebar-collapse-btn{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;color:var(--navy-45);background:none;border:none;cursor:pointer;}
@media (hover:hover){.app-sidebar-collapse-btn:hover{background:var(--navy-06);color:var(--navy);}}
.app-sidebar-collapse-btn svg{transition:transform .2s var(--ease);}
[data-sidebar-collapsed="true"] .app-sidebar-profile-row{flex-direction:column;gap:2px;}
[data-sidebar-collapsed="true"] .app-sidebar-profile-row .app-sidebar-profile{padding:8px 0 2px;}
[data-sidebar-collapsed="true"] .app-sidebar-collapse-btn{width:100%;}
[data-sidebar-collapsed="true"] .app-sidebar-collapse-btn svg{transform:rotate(180deg);}

.app-sidebar-group{position:relative;}
/* Every ">" group opens the same small floating card (not an inline
   accordion that pushes the rest of the nav down) -- same visual language
   as .app-dropdown: white rounded card, shadow, its own padding.

   position:fixed (not :absolute) is what makes it actually pop out onto
   the page instead of being trapped inside the sidebar's own scroll
   column: .app-sidebar-scroll (the nav's scrollable wrapper) sets
   overflow-x:hidden/overflow-y:auto so a long nav list can scroll, and an
   overflow:hidden/auto ancestor clips any descendant positioned relative
   to a containing block inside it -- absolute positioning included. Fixed
   positioning's containing block is the viewport instead (nothing in the
   sidebar chain uses transform/filter/perspective to change that), so it
   isn't subject to that clipping at all. Exact top/left are computed in
   JS (positionSidebarSubmenu(), app-shell.js) from the trigger button's
   own on-screen position each time it opens -- that single computation
   covers both the expanded row-drops-below placement and the collapsed
   icon-rail's beside-the-icon placement, so no separate collapsed-state
   anchoring rule is needed here any more. */
.app-sidebar-submenu{
  position:fixed;top:0;left:0;min-width:220px;max-width:264px;
  /* Tova does not load styles.css, so preserve an opaque flyout there. */
  background:#f4faf7;border:1px solid #e5f0ea;border-radius:var(--r-md,14px);box-shadow:0 20px 44px -14px var(--navy-25,rgba(18,35,43,.22));
  padding:8px;display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transform:translateX(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease);
  max-height:calc(100vh - 16px);overflow-y:auto;z-index:1200;
}
.app-sidebar-group.is-open > .app-sidebar-submenu{opacity:1;pointer-events:auto;transform:translateX(0);}
@media(max-width:720px){.app-sidebar-submenu{transform:translateY(-6px)}.app-sidebar-group.is-open > .app-sidebar-submenu{transform:translateY(0)}}
.app-sidebar-subitem{display:block;padding:9px 10px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--navy-70);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (hover:hover){.app-sidebar-subitem:hover{background:var(--navy-06);color:var(--navy);}}
.app-sidebar-subitem.active{color:var(--teal-dark);}

/* Flexible gap: Academy -> [grows/shrinks with viewport height] -> Settings.
   Responsive (flex-based) rather than a fixed margin, per spec. */
.app-sidebar-spacer{flex:1 1 24px;min-height:24px;}

.app-sidebar-bottom{display:flex;flex-direction:column;gap:2px;flex-shrink:0;padding-top:8px;border-top:1px solid var(--navy-06);}
.app-sidebar-item-premium{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--navy-85);font-size:13px;font-weight:500;cursor:default;white-space:nowrap;}
.app-sidebar-item-premium .asi-label{display:flex;flex-direction:column;gap:1px;}
.app-sidebar-premium-sub{font-size:11.5px;font-weight:400;color:var(--navy-45);white-space:normal;line-height:1.3;}
.app-sidebar-footer{font-size:11.5px;color:var(--navy-45);padding:10px 12px 2px;flex-shrink:0;}
.app-sidebar-logout{color:#C0392B;}
.app-sidebar-logout .asi-icon{color:#C0392B;}
@media (hover:hover){.app-sidebar-logout:hover{color:#96281B;background:rgba(192,57,43,.08);}}
@media (hover:hover){.app-sidebar-logout:hover .asi-icon{color:#96281B;}}

/* ---- Collapsed state: icons only, tooltip via the native title attr,
   nested navigation via a flyout beside the icon instead of an inline
   expand (there's no room to show it inline once labels are hidden). ---- */
[data-sidebar-collapsed="true"] .asi-label,
[data-sidebar-collapsed="true"] .asi-caret,
[data-sidebar-collapsed="true"] .app-sidebar-footer,
[data-sidebar-collapsed="true"] .app-sidebar-logo-row{display:none;}
[data-sidebar-collapsed="true"] .app-sidebar-item,
[data-sidebar-collapsed="true"] .app-sidebar-item-premium{justify-content:center;padding:11px 0;}

/* ---------------------------------------------------------------------
   Header simplification (this session): the account-avatar dropdown and
   the small icon-only mobile search trigger are both retired, site-wide,
   for web and mobile alike -- profile access already lives in the
   persistent sidebar's own profile row (desktop) and the "More" drawer's
   avatar/View-Profile header + My Profiles item (mobile), so the header's
   own avatar+dropdown was pure duplication. In its place, the real
   .app-nav-search field (same pill input every desktop width already
   used) is now shown universally, including at mobile widths where it
   used to collapse behind a magnifying-glass icon -- overriding the
   earlier "hide it below 720px" rule from further up this file. It still
   submits to search.html, which is the one place site search now lives
   (including community content), so no separate in-page community search
   toggle is needed either. Declared last on purpose so it wins over the
   earlier same-selector rules regardless of the media query they're in
   (same pattern already used elsewhere in this file). */
.app-dropdown-wrap,
.app-nav-search-mobile{display:none !important;}
@media (max-width:900px){
  .app-nav-search{display:flex !important;}
}
@media (max-width:720px){
  .app-nav-search{display:flex !important;width:auto;flex:1;max-width:none;}
  .app-nav-inner{gap:10px;}
  .app-nav-logo img{height:24px;}
}


/* ---------------------------------------------------------------------
   Home header (Round 3, stage 1) -- scoped to body[data-app-page="home"]
   ONLY. The site-wide "Header simplification" block above retired the
   account avatar and the mobile search icon for every page; Home gets
   them back here without touching any other page's header.

   Mobile (<=720px): [profile avatar -> opens the More menu] [ProfilePro
   logo, truly centered] [search icon + notifications, together on the
   right]. A 1fr/auto/1fr grid keeps the logo centered regardless of how
   wide the left and right groups are. The avatar lives inside
   #appMoreMenuTrigger (same button that used to be the hamburger), so the
   existing drawer wiring in app-shell.js needs no changes.

   Web (>=721px): search field stretches across the header; Messages,
   Notifications and the profile avatar (with its dropdown) sit at the
   right end. #appMoreMenuTrigger stays hidden there (sidebar does that job).
   Declared last, with !important + body-attr specificity, so it beats the
   earlier `display:none !important` rules on .app-dropdown-wrap /
   .app-nav-search-mobile. --------------------------------------------------- */
body[data-app-page="home"] .app-nav-me-trigger{width:40px;height:40px;padding:0;}
@media (hover:hover){body[data-app-page="home"] .app-nav-me-trigger:hover{background:none;}}
body[data-app-page="home"] .app-nav-me-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--navy-06);border:1.5px solid var(--navy-10);display:flex;align-items:center;justify-content:center;color:var(--navy-45);flex-shrink:0;}
body[data-app-page="home"] .app-nav-me-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;}
body[data-app-page="home"] .app-nav-me-avatar svg{width:20px;height:20px;}

@media (max-width:720px){
  body[data-app-page="home"] .app-nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:0 12px;height:56px;}
  body[data-app-page="home"] #appMoreMenuTrigger{justify-self:start;}
  body[data-app-page="home"] .app-nav-logo{justify-self:center;}
  body[data-app-page="home"] .app-nav-logo img{height:26px;}
  body[data-app-page="home"] .app-nav-search{display:none !important;}
  body[data-app-page="home"] .app-nav-right{justify-self:end;margin-left:0;gap:0;}
  body[data-app-page="home"] .app-nav-search-mobile{display:flex !important;width:40px;height:40px;}
  body[data-app-page="home"] .app-nav-msg-mobile{width:40px;height:40px;}
}
@media (min-width:721px){
  /* logo (left corner) | search (middle) | Messages, Notifications, avatar (right end).
     A 3-column grid so the icon group stays pinned to the true right edge whether the
     sidebar is expanded or collapsed (.app-nav's left edge moves, its right edge never does). */
  body[data-app-page="home"] .app-nav-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:24px;padding:0 24px;}
  body[data-app-page="home"] .app-nav-logo{justify-self:start;}
  body[data-app-page="home"] .app-nav-search{justify-self:center;flex:none;width:100%;max-width:820px;}
  body[data-app-page="home"] .app-nav-search input{padding-top:11px;padding-bottom:11px;font-size:13.5px;}
  body[data-app-page="home"] .app-nav-right{justify-self:end;margin-left:0;gap:10px;}
  /* Web: no profile avatar after the notification bell (the sidebar already
     has Profile / Settings / Logout). */
  body[data-app-page="home"] .app-dropdown-wrap{display:none !important;}
}
/* Home: header sits flat -- no drop shadow AND no bottom divider line
   (phone + web). The tab strip's own divider is removed in home.html. */
body[data-app-page="home"] .app-nav{box-shadow:none;border-bottom-color:transparent;}

/* ---------------------------------------------------------------------
   Header search -> "Recent searches" card (whole signed-in side).
   Web: clicking the header search field drops a small card (recent
   searches only, no suggested-queries list). Phone: the same list opens as
   a full-width strip on the line right under the header, the way the
   People page's search does. The header has backdrop-filter, which makes it
   the containing block for position:fixed children, and it is 56px tall on
   phones, so top:56px lands exactly under it either way. */
@media (min-width:721px){
  .app-nav .app-search-suggest{right:auto;width:360px;max-width:calc(100vw - 48px);}
}
@media (max-width:720px){
  /* Recent-searches card is web-only now -- on mobile the header search
     just opens straight to results, no dropdown. */
  .app-nav .app-search-suggest{display:none !important;}
}

/* No grey tap flash anywhere on the user side; no focus ring after a mouse/touch click
   (keyboard focus rings stay). Hover styles are wrapped in (hover:hover) so they never
   stick after a tap on a phone. */
html,body,*{-webkit-tap-highlight-color:transparent;}
a:focus:not(:focus-visible),button:focus:not(:focus-visible),[role="button"]:focus:not(:focus-visible),summary:focus:not(:focus-visible){outline:none;}

/* Unified app switcher and mobile ProfilePro side navigation */
.pp-app-switcher{position:relative;display:flex;align-items:center}.pp-app-switcher-trigger{display:flex!important;border:0;background:transparent;cursor:pointer}.pp-app-switcher-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:1500;width:224px;padding:12px;background:#fff;border:1px solid #e4e9ec;border-radius:14px;box-shadow:0 18px 48px #13263724}.pp-app-switcher-menu[hidden]{display:none}.pp-app-switcher-menu>b{display:block;padding:4px 8px 10px;color:#7a8793;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.pp-app-switcher-menu a{display:flex!important;align-items:center!important;gap:11px!important;padding:9px!important;border-radius:9px!important;text-decoration:none!important;color:#243547!important;font-weight:600!important}.pp-app-switcher-menu a:hover{background:#f2f7f6}.pp-app-switcher-menu a.is-current{background:#e8f4f1;color:#0f766d!important}.pp-app-switcher-menu img{width:26px;height:26px;object-fit:contain;border-radius:7px}.pp-app-switcher-trigger svg{stroke:currentColor}.app-sidebar-mobile-open{overflow:hidden!important}.app-sidebar-mobile-open:before{content:'';position:fixed;inset:0;z-index:1140;background:#0b19254f}@media(max-width:720px){#appMoreMenuTrigger{display:flex!important}.app-sidebar{display:flex!important;position:fixed;top:0;left:0;bottom:0;z-index:1150;width:min(300px,86vw);max-width:300px;transform:translateX(-105%);transition:transform .22s ease;background:#fff;box-shadow:0 0 0 transparent;--app-sidebar-current:300px}.app-sidebar-mobile-open .app-sidebar{transform:translateX(0);box-shadow:12px 0 40px #12243522}.app-sidebar-scroll{padding-top:max(14px,env(safe-area-inset-top))}.app-sidebar-collapse-btn{display:none!important}.app-bottom-nav{display:flex!important}.app-nav-inner{gap:9px!important;padding-left:12px!important}.app-nav-right{gap:5px!important}.pp-app-switcher-menu{position:fixed;right:10px;top:56px;width:min(230px,calc(100vw - 20px))}.pp-mobile-app-switcher-menu{position:fixed;left:50%;bottom:calc(72px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:1600;width:min(250px,calc(100vw - 24px))}.app-sidebar a[href="/storefront"],.app-sidebar a[href="room.html"],.app-sidebar a[href="resources-app.html"],.app-more-item[href="resources-app.html"]{display:none!important}.app-nav .pp-app-switcher{margin-right:2px}.app-nav .app-nav-desktop-icon{display:none!important}}

@media(max-width:720px){body[data-app-hybrid]:not(.pp-authed) .app-bottom-nav{display:none!important}.app-bottom-nav .pp-mobile-app-switcher-trigger{border:0;background:transparent;font:inherit;cursor:pointer}}

@media(max-width:720px){.app-sidebar{display:none!important}.app-sidebar-mobile-open:before{display:none!important}.app-more-item[href="resources-app.html"]{display:none!important}}

@media(min-width:721px){.app-nav .app-nav-desktop-icon[data-app-nav="messages"]{order:1}.app-nav .app-nav-desktop-icon[data-app-nav="notifications"]{order:2}.app-nav .pp-app-switcher{order:3}.app-nav .app-dropdown-wrap{order:4}}

/* Keep app header actions compact after page-specific header rules load. */
body.app-body .app-nav-right{gap:4px!important;}
body.app-body .app-nav-right .app-nav-desktop-icon,
body.app-body .app-nav-right .pp-app-switcher-trigger,
body.app-body .app-nav-right .app-nav-avatar-btn{margin:0!important;}

/* Account/profile menus remain operable, but do not show a dropdown arrow on
   the profile switcher anywhere in the app. Notifications and Messages have
   their own account-context controls; their arrows are removed below too. */
button.app-nav-avatar-btn::before,
button.app-nav-avatar-btn::after,
button.app-nav-me-trigger::before,
button.app-nav-me-trigger::after,
#appMoreProfileItem > .app-more-item-caret,
.app-more-profile-row > .app-more-item-caret,
.ntf-acct > svg,
.msg-inbox-switch-btn > .mis-chevron{display:none!important;}
body.app-body .app-nav-right .app-nav-desktop-icon,
body.app-body .app-nav-right .pp-app-switcher-trigger{width:36px;height:36px;}

/* Remove destinations the user asked to take off the ProfilePro menu bars. */
.app-sidebar a[href="resources-app.html"]{display:none!important;}
.app-more-item[href="resources-app.html"],
.app-more-tile[href="resources-app.html"]{display:none!important;}
@media(max-width:720px){
  /* Home is visible again in the mobile bottom bar (it used to be hidden here). */
  .app-bottom-nav a[href="workspace.html"]{display:none!important;}
  .app-more-item[href="academy-app.html"]{display:none!important;}
  html:has(body.app-body){scroll-behavior:auto;scrollbar-gutter:stable;}
  body.app-body{width:100%;min-height:100svh;overflow-x:clip;}
  body.app-body .app-main,body.app-body .app-main-wide{width:100%;max-width:100%;min-width:0;box-sizing:border-box;}
  body.app-body .app-main>*{min-width:0;}
}


/* ---------- Plain cards (no green/orange outline, no glow) ----------
   Every app card draws its border from --card-stroke and its glow from
   --shadow-card. In the signed-in app both are now neutral: a thin grey
   hairline and no shadow. Marketing pages (which don't load this file)
   keep their own look. */
:root{--card-stroke:rgba(27,33,45,.09);--shadow-card:none;--shadow-card-hover:none;}


/* ---------- Pages with no bottom tab bar (mobile) ----------
   Focused, drilled-into pages (Post a job, Job details) hide the 4-tab
   bar entirely and give its reserved space back. Opt in with
   data-no-bottom-nav on <body>. The selectors repeat the specificity of
   the rules that turn the bar on (hybrid + pp-authed, and the
   !important one for the mobile sidebar layout), so this wins everywhere. */
@media (max-width:720px){
  body[data-no-bottom-nav] .app-bottom-nav,
  body[data-no-bottom-nav].pp-authed .app-bottom-nav,
  body[data-app-hybrid][data-no-bottom-nav].pp-authed .app-bottom-nav{display:none !important;}
  body.app-body[data-no-bottom-nav]{padding-bottom:0;}
  body[data-no-bottom-nav] .app-main{padding-bottom:calc(32px + env(safe-area-inset-bottom));}
}

/* ---------- Experience list (experience-list.js): LinkedIn-style rows ---------- */
.xp-list{display:block;}
.xp-item{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--navy-06);}
.xp-item:first-child{border-top:none;padding-top:2px;}
.xp-logo{width:44px;height:44px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--white);border:1px solid var(--navy-10);}
.xp-logo-fallback{display:flex;align-items:center;justify-content:center;background:#e8e6e1;border-color:transparent;color:#7d8590;}
.xp-body{flex:1;min-width:0;}
.xp-role{font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:15.5px;line-height:1.3;color:var(--navy);overflow-wrap:anywhere;}
.xp-company{font-size:14.5px;line-height:1.4;color:var(--navy);margin-top:1px;overflow-wrap:anywhere;}
.xp-company-link{color:inherit;}
@media (hover:hover){.xp-company-link:hover{text-decoration:underline;}}
.xp-dates{font-size:13px;line-height:1.4;color:var(--navy-65);margin-top:1px;}
.xp-desc{font-size:14.5px;line-height:1.6;color:var(--navy-80);margin-top:8px;white-space:pre-line;overflow-wrap:anywhere;}
.xp-collapsed .xp-extra{display:none;}
.xp-show-all{display:flex;align-items:center;justify-content:center;gap:6px;width:calc(100% + 40px);margin:6px -20px -6px;padding:14px 0 6px;border-top:1px solid var(--navy-10);background:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--navy-80);cursor:pointer;}
.xp-show-all i{font-style:normal;font-size:15px;}
@media (hover:hover){.xp-show-all:hover{color:var(--navy);}}

/* header tighten (all ProfilePro app pages): search / chat / bell / apps / avatar sit close together */
.app-nav-right{gap:0 !important;}
.app-nav-right .app-nav-icon-btn,.app-nav-right .pp-app-switcher-trigger{width:34px;height:34px;}
@media (max-width:720px){
  .app-nav-msg-mobile,.app-nav-search-mobile{width:30px !important;height:34px;}
  .app-nav-right .app-nav-icon-btn,.app-nav-right .pp-app-switcher-trigger{width:30px !important;}
}

/* Skills as a plain list (My Profile + public profile): first 5 shown, rest behind "Show all (N)". */
.pp-skill-list{list-style:none;margin:0;padding:0;}
.pp-skill-list li{padding:10px 0;border-top:1px solid var(--navy-06);font-size:14.5px;line-height:1.4;color:var(--navy-80);overflow-wrap:anywhere;}
.pp-skill-list li:first-child{border-top:none;padding-top:0;}
.pp-skill-list.is-collapsed li.pp-skill-extra{display:none;}
.pp-skills-toggle{display:block;width:100%;margin-top:6px;padding:12px 0 2px;border:0;border-top:1px solid var(--navy-10);background:none;font-family:inherit;font-size:14px;font-weight:600;color:var(--navy-65);cursor:pointer;text-align:center;}
@media (hover:hover){.pp-skills-toggle:hover{color:var(--navy);}}

/* My Profiles menus: placeholder rows while the business list loads (instead of
   flashing "No business yet / Add a business"). */
.app-profile-skel{display:flex;align-items:center;gap:10px;padding:8px 12px}
.app-profile-skel-dot{width:34px;height:34px;border-radius:50%;background:#eceeed;flex:0 0 auto}
.app-profile-skel-lines{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
.app-profile-skel-lines i{display:block;height:9px;border-radius:6px;background:#eceeed}
.app-profile-skel-lines i:first-child{width:62%}
.app-profile-skel-lines i:last-child{width:34%}
.app-profile-skel-dot,.app-profile-skel-lines i{animation:appProfileSkel 1.2s ease-in-out infinite}
@keyframes appProfileSkel{0%,100%{opacity:1}50%{opacity:.5}}
@media (prefers-reduced-motion:reduce){.app-profile-skel-dot,.app-profile-skel-lines i{animation:none}}

/* ---- Composer: location tag (pin tool, chip, "Tag location" sheet) ---- */
.pcc-tool.pcc-tool-on{color:var(--teal);}
.pcc-loc-chip{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;max-width:100%;margin-top:10px;padding:6px 6px 6px 10px;border-radius:999px;background:var(--navy-06);color:var(--navy);font-size:13px;font-weight:600;}
.pcc-loc-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pcc-loc-chip svg{flex-shrink:0;color:var(--teal);}
.pcc-loc-chip button{flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:50%;background:none;color:var(--navy-65);cursor:pointer;}
@media (hover:hover){.pcc-loc-chip button:hover{background:var(--navy-10);}}
.pcc-loc-backdrop{position:fixed;inset:0;z-index:85;background:rgba(15,23,26,.45);display:none;align-items:flex-end;justify-content:center;}
.pcc-loc-backdrop.open{display:flex;}
.pcc-loc-sheet{width:100%;max-width:520px;height:88vh;max-height:88dvh;display:flex;flex-direction:column;background:var(--white);border-radius:20px 20px 0 0;box-shadow:0 -10px 40px rgba(15,23,26,.2);overflow:hidden;}
.pcc-loc-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px 18px 8px;}
.pcc-loc-title{font-size:16px;font-weight:800;color:var(--navy);text-align:center;}
.pcc-loc-remove,.pcc-loc-done{background:none;border:none;font-family:inherit;font-size:15px;cursor:pointer;padding:6px 0;}
.pcc-loc-remove{justify-self:start;color:var(--navy);}
.pcc-loc-remove:disabled{color:var(--navy-45);cursor:default;}
.pcc-loc-done{justify-self:end;font-weight:800;color:var(--navy);}
.pcc-loc-search{display:flex;align-items:center;gap:8px;margin:8px 14px 6px;padding:0 14px;height:46px;border-radius:999px;background:var(--navy-06);color:var(--navy-45);}
.pcc-loc-search input{flex:1;min-width:0;border:none;outline:none;background:none;font-family:inherit;font-size:15px;color:var(--navy);}
.pcc-loc-search input::placeholder{color:var(--navy-45);}
.pcc-loc-list{flex:1;overflow-y:auto;padding:4px 0 calc(16px + env(safe-area-inset-bottom,0px));}
.pcc-loc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box;text-align:left;padding:18px 18px;background:none;border:none;font-family:inherit;font-size:15px;font-weight:700;color:var(--navy);cursor:pointer;}
.pcc-loc-row.on{color:var(--teal);}
@media (hover:hover){.pcc-loc-row:hover{background:var(--navy-06);}}
.pcc-loc-msg{padding:28px 18px;text-align:center;font-size:13.5px;color:var(--navy-45);}
@media (min-width:721px){
  .pcc-loc-backdrop{align-items:center;}
  .pcc-loc-sheet{border-radius:18px;max-width:440px;height:560px;max-height:80vh;}
}


/* Buttons that sit inside text sections must keep their own colours
   (".simple-section a" / ".legal-wrap a" would otherwise turn them teal-on-teal). */
.simple-section a.app-btn-primary,.legal-wrap a.app-btn-primary{color:#fff;text-decoration:none;}

/* Mobile menu in web order: expandable groups (Professionals, Offerings, Campaigns, Tova, Workspace, Help) */
.app-more-group-btn{cursor:pointer;}
.app-more-sub{margin:-2px 0 6px 32px;padding:2px 0 4px 12px;border-left:2px solid #0F766D;}
.app-more-sub[hidden]{display:none;}
.app-more-sub-link{display:block;padding:9px 0;color:var(--navy-80);text-decoration:none;font-size:12.5px;font-weight:500;}
.app-more-sub-link:active{color:#111;}
@media (hover:hover){.app-more-sub-link:hover{color:#111;}}
.app-more-group-btn[aria-expanded="true"] .app-more-item-caret{transform:rotate(180deg);}

/* ---------- X-style Drafts sheet (posts.html) ---------- */
.pcc-drafts-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1200;display:none;align-items:flex-end;justify-content:center;}
.pcc-drafts-backdrop.open{display:flex;}
.pcc-drafts-sheet{background:#fff;width:100%;max-width:600px;height:92vh;height:92dvh;border-radius:16px 16px 0 0;display:flex;flex-direction:column;overflow:hidden;}
@media (min-width:721px){.pcc-drafts-backdrop{align-items:center;}.pcc-drafts-sheet{height:min(80vh,720px);border-radius:16px;}}
.pcc-drafts-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 16px;border-bottom:1px solid #eceff1;}
.pcc-drafts-title{font-weight:700;font-size:16px;color:#111;}
.pcc-drafts-cancel,.pcc-drafts-edit{background:none;border:none;font-family:inherit;font-size:15px;cursor:pointer;padding:4px 0;color:var(--teal);}
.pcc-drafts-cancel{justify-self:start;}.pcc-drafts-edit{justify-self:end;}
.pcc-drafts-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-left:16px;}
.pcc-drow{display:flex;align-items:center;border-bottom:1px solid #eceff1;}
.pcc-drow-open{flex:1;min-width:0;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;background:none;border:none;text-align:left;font-family:inherit;cursor:pointer;padding:22px 16px 22px 0;min-height:88px;}
.pcc-drow-text{flex:1;min-width:0;font-size:15px;line-height:1.35;color:#111;white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.pcc-drow-thumb{position:relative;flex:none;width:88px;height:88px;border-radius:14px;overflow:hidden;background:#eee;}
.pcc-drow-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.pcc-drow-count{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.7);color:#fff;font-size:11px;font-weight:600;border-radius:10px;padding:1px 7px;}
.pcc-drow-del{display:none;flex:none;margin-right:16px;background:#f4212e;color:#fff;border:none;border-radius:999px;font-family:inherit;font-size:13px;font-weight:600;padding:8px 14px;cursor:pointer;}
.pcc-drow.editing .pcc-drow-del{display:block;}
.pcc-drow-save{display:block;width:calc(100% - 16px);text-align:left;background:none;border:none;border-bottom:1px solid #eceff1;font-family:inherit;font-size:14px;font-weight:700;color:#111;padding:18px 0;cursor:pointer;}
.pcc-drafts-sheet .pcc-draft-empty{padding:48px 16px;font-size:14px;color:#6b7280;text-align:center;}

/* ---------- Mobile menu dropdowns, Selfany style ----------
   Open row is highlighted with a soft tint, chevron points right when closed and down
   when open, sub-items sit indented beside a vertical line, current sub-item is tinted. */
.app-more-item-caret{width:12px;height:12px;margin-right:2px;}
.app-more-item[aria-expanded="true"] .app-more-item-caret{transform:rotate(90deg);}
.app-more-item[aria-expanded="true"]{background:#f1f2f4;color:#111;font-weight:600;border-radius:12px;margin:0 -10px;padding:11px 10px;width:calc(100% + 20px);}
.app-more-item[aria-expanded="true"] .app-more-item-icon{color:#111;}
.app-more-sub,.app-more-profiles-submenu{margin:4px 0 8px 19px;padding:0 0 0 10px;border-left:2px solid #0F766D;}
.app-more-sub-link{display:block;padding:12px 12px;margin:2px 0;border-radius:10px;color:#4b5563;font-size:14px;font-weight:500;text-decoration:none;}
.app-more-sub-link.active{background:#f4f5f6;color:#111;font-weight:600;}
.app-more-profile-row{padding:10px 12px;}


/* Web only: lighter menu text. The side menu and top nav labels were too heavy and too black.
   Regular weight by default, medium for the current page. Phones keep their own sizes and weights. */
@media (min-width:721px){
  .app-sidebar-item, .app-sidebar-subitem, .app-sidebar-item-premium, .app-nav-link, .app-navlink-dd a{font-weight:400;}
  .app-sidebar-item.active, .app-sidebar-subitem.active, .app-nav-link.active, .app-navlink-dd a.active{font-weight:500;}
}

/* Bottom bar order: Home, People, Pearl (middle), Jobs, Messages. Pearl shows as her orb. */
.abn-pearl-orb{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;object-fit:cover;display:block;transition:transform .2s var(--ease),box-shadow .2s var(--ease);}
.abn-link-pearl::before{display:none;}
.abn-link-pearl:active .abn-pearl-orb{transform:scale(.92);}
.abn-link-pearl.active .abn-pearl-orb{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #111;}

/* Phone menu drawer (the sidebar reused on Tova / Offerings / Calendar / Workspace):
   groups open as an inline accordion under their row instead of a floating card,
   so the sub-items (Discover, My Offerings, Overview...) no longer sit on top of the next rows. */
@media (max-width:720px){
  .app-sidebar .app-sidebar-submenu{
    position:static !important;top:auto !important;left:auto !important;right:auto !important;
    min-width:0;max-width:none;width:auto;max-height:none;overflow:visible;
    display:none;flex-direction:column;opacity:1;pointer-events:auto;transform:none !important;
    background:transparent;box-shadow:none;border-radius:0;z-index:auto;
    margin:2px 0 8px 19px;padding:0 0 0 10px;border-left:2px solid #0F766D;
  }
  .app-sidebar .app-sidebar-group.is-open > .app-sidebar-submenu{display:flex;}
  .app-sidebar .app-sidebar-subitem{padding:12px;margin:2px 0;font-size:14px;color:#4b5563;border-radius:10px;}
  .app-sidebar .app-sidebar-subitem.active{background:#f4f5f6;color:#111;font-weight:600;}
}

/* Composer > Tag location: our own "Allow access to location" card (shown before the phone's pop-up) */
.pcc-loc-ask{margin:14px 16px;padding:18px;border-radius:16px;background:var(--navy-04,#f4f5f3);text-align:center;}
.pcc-loc-ask b{display:block;font-size:15px;font-weight:700;color:var(--navy,#1b212d);}
.pcc-loc-ask p{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--navy-65,#5c6470);}
.pcc-loc-ask-btns{display:flex;gap:10px;margin-top:14px;}
.pcc-loc-ask-btns button{flex:1;height:44px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;border:1.5px solid #000;}
.pcc-loc-allow{background:#000;color:#fff;}
.pcc-loc-skip{background:#fff;color:#000;}


/* ---- Menu drawer: the page slides over (curved edge) and the menu sits behind it on the feed's grey ---- */
.app-more-backdrop{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;}
.app-more-drawer{background:var(--canvas,#F3F2F1);box-shadow:none;transform:translateX(-14%);opacity:0;transition:transform .35s cubic-bezier(.22,.61,.36,1),opacity .25s ease;}
.app-more-backdrop.is-open .app-more-drawer{transform:none;opacity:1;}
body.pp-menu-anim > *:not(.app-more-backdrop):not(script):not(style):not(link):not(.app-sidebar){transition:transform .35s cubic-bezier(.22,.61,.36,1),border-radius .35s ease,box-shadow .35s ease;}
body.pp-menu-open{background:#fff;}
body.pp-menu-open > *:not(.app-more-backdrop):not(script):not(style):not(link):not(.app-sidebar){transform:translateX(var(--app-more-drawer-width));}
/* One continuous sheet: only the very top-left (header) and very bottom-left (bottom bar) are curved, the middle stays straight,
   so there are no notches. A soft shadow runs down the whole left edge, like X. */
body.pp-menu-open > .app-nav,body.pp-menu-open > .app-page-head{border-top-left-radius:28px;}
body.pp-menu-open > .app-bottom-nav{border-bottom-left-radius:28px;}
body.pp-menu-open > .app-bottom-nav::after,body.pp-menu-drag > .app-bottom-nav::after{display:none;}
body.pp-menu-open > main,body.pp-menu-drag > main{border-radius:0;}
body.pp-menu-open:not(:has(> .app-bottom-nav)) > main,body.pp-menu-drag:not(:has(> .app-bottom-nav)) > main{border-bottom-left-radius:28px;}
body.pp-menu-open > main,body.pp-menu-open > .app-nav,body.pp-menu-open > .app-page-head,body.pp-menu-open > .app-bottom-nav{box-shadow:-10px 0 28px -6px rgba(0,0,0,.30),-1px 0 0 rgba(0,0,0,.05);}

/* ==========================================================================
   Headers stay put: solid (no see-through, no blur), and no rubber-band
   bounce pulling the page and header around. Content never shows through.
   ========================================================================== */
html:has(body.app-body){overscroll-behavior-y:none;scroll-padding-top:76px;}
body.app-body{overscroll-behavior-y:none;}
.app-nav,
body[data-simple-header] .app-page-head,
.st-phead,.st-mhead{
  background:#fff !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
.app-nav,body[data-simple-header] .app-page-head{box-shadow:0 1px 0 var(--navy-06,#eceef0) !important;}

/* Workspace stays in every menu (phone drawer, ProfilePro sidebar drawer, desktop sidebar). */
.app-more-item[href="workspace.html"],.app-sidebar a[href="workspace.html"]{display:flex !important;}

/* Menu / sidebar: active item = faint green fill (like Settings) + green icon, web and mobile */
.app-sidebar-item.active,
.app-sidebar-subitem.active,
X
.app-sidebar-item.active .asi-icon,
.app-sidebar-item.active .asi-icon svg,
.app-more-item.active .app-more-item-icon,
.app-more-item.active .app-more-item-icon svg{color:var(--teal-dark,#0f766d) !important;}
.app-sidebar-item.active .asi-icon svg [fill]:not([fill="none"]):not([fill="#fff"]):not([fill="white"]){fill:currentColor;}
.app-more-item.active{padding-left:10px;padding-right:10px;margin:0 -10px;width:calc(100% + 20px);border-radius:10px;box-sizing:border-box;}
.app-sidebar-subitem.active{color:var(--teal-dark,#0f766d);}

/* ---- Bottom nav: icon + name (Feed, People, Pearl, Jobs, Messages) ----
   The labels were always in the markup, just collapsed to font-size:0.
   Pearl is an image-only tab, so its name comes from ::after. Phones only. */
@media (max-width:720px){
  .app-bottom-nav .abn-link{font-size:10.5px;font-weight:500;line-height:1.15;gap:3px;letter-spacing:.01em;
    padding:7px 2px 6px;min-width:0;white-space:nowrap;}
  .app-bottom-nav .abn-link.active{font-weight:600;}
  /* the active pill hugs the icon only, so keep it up around the icon */
  .app-bottom-nav .abn-link::before{top:3px;height:30px;width:46px;}
  .app-bottom-nav .abn-link-pearl{gap:3px;}
  .app-bottom-nav .abn-link-pearl::after{content:"Pearl";position:relative;z-index:1;font-size:10.5px;line-height:1.15;}
  .app-bottom-nav .abn-link-pearl.active::after{font-weight:600;}
  .app-bottom-nav .abn-link-pearl .abn-pearl-orb{width:24px;height:24px;}
  .app-bottom-nav .abn-link-add{font-size:0;}
}
@media (max-width:760px){
  /* pp-icons.js centres the active pill on the whole link (top:50%); with a
     label under the icon it must sit on the icon instead. */
  .app-bottom-nav .abn-link:not(.abn-link-add)::before{top:2px !important;margin-top:0 !important;height:32px !important;}
  .app-bottom-nav .abn-link:not(.abn-link-add){padding:6px 2px 5px !important;}
}

/* ---- Menu bars: the highlight behind a hovered / pressed / selected item is a faint GREEN, not grey ----
   (web sidebar, its sub-items and parent rows, the phone drawer, the bottom-nav pill) */
:root{--menu-green:#E8F4F1;}
html body .app-sidebar .app-sidebar-item.active,
html body .app-sidebar .app-sidebar-item:active,
html body .app-sidebar .app-sidebar-parent.active,
html body .app-sidebar .app-sidebar-subitem.active,
html body .app-sidebar .app-sidebar-subitem:active,
html body .app-more-item.active,html body .app-more-item:active,
html body .app-more-sub-link.active,html body .app-more-sub-link:active,
html body .app-more-group-btn:active,
html body .app-sidebar-collapse-btn:active{background:var(--menu-green);}
@media (hover:hover){
  html body .app-sidebar .app-sidebar-item:hover,
  html body .app-sidebar .app-sidebar-subitem:hover,
  html body .app-sidebar .app-sidebar-parent:hover,
  html body .app-more-item:hover,html body .app-more-sub-link:hover,
  html body .app-more-group-btn:hover{background:var(--menu-green);}
}
html body .abn-link.active::before,html body .app-bottom-nav .abn-link.active::before{background:var(--menu-green);}
html body .abn-link:active::before{background:var(--menu-green);transform:translateX(-50%) scale(1);}

/* ---- Selected / pressed menu item = the business Dashboard look: faint green fill + GREEN icon + GREEN text ----
   Web sidebar (items, parent rows, sub-items), phone menu drawer (items, sub-links) and the bottom-nav pill.
   Before, only the fill was green; the icon/text stayed black. Loaded last so it wins over the earlier rules. */
:root{--menu-green:#E8F4F1;--menu-green-ink:#0B5850;}
html body .app-sidebar .app-sidebar-item.active,
html body .app-sidebar .app-sidebar-item:active,
html body .app-sidebar .app-sidebar-parent.active,
html body .app-sidebar .app-sidebar-parent:active,
html body .app-sidebar .app-sidebar-subitem.active,
html body .app-sidebar .app-sidebar-subitem:active,
html body .app-more-item.active,
html body .app-more-item:active,
html body .app-more-sub-link.active,
html body .app-more-sub-link:active,
html body .app-more-group-btn:active{background:var(--menu-green);color:var(--menu-green-ink);font-weight:600;}
html body .app-sidebar .app-sidebar-item.active .asi-label,
html body .app-sidebar .app-sidebar-item:active .asi-label,
html body .app-sidebar .app-sidebar-parent.active .asi-label,
html body .app-sidebar .app-sidebar-parent:active .asi-label,
html body .app-more-item.active .app-more-item-label,
html body .app-more-item:active .app-more-item-label{color:var(--menu-green-ink);}
html body .app-sidebar .app-sidebar-item.active .asi-icon,
html body .app-sidebar .app-sidebar-item.active .asi-icon svg,
html body .app-sidebar .app-sidebar-item:active .asi-icon,
html body .app-sidebar .app-sidebar-item:active .asi-icon svg,
html body .app-sidebar .app-sidebar-parent.active .asi-icon,
html body .app-sidebar .app-sidebar-parent.active .asi-icon svg,
html body .app-sidebar .app-sidebar-parent:active .asi-icon,
html body .app-sidebar .app-sidebar-parent:active .asi-icon svg,
html body .app-sidebar .app-sidebar-parent.active .asi-caret,
html body .app-more-item.active .app-more-item-icon,
html body .app-more-item.active .app-more-item-icon svg,
html body .app-more-item:active .app-more-item-icon,
html body .app-more-item:active .app-more-item-icon svg,
html body .app-more-item.active .app-more-item-caret{color:var(--menu-green-ink);}
html body .app-sidebar .app-sidebar-item.active .asi-icon svg [stroke]:not([stroke="none"]),
html body .app-more-item.active .app-more-item-icon svg [stroke]:not([stroke="none"]){stroke:currentColor;}
/* phone drawer rows: the green fill gets a little room around the icon + label */
html body .app-more-item.active,html body .app-more-item:active{padding-left:10px;padding-right:10px;margin:0 -10px;width:calc(100% + 20px);border-radius:10px;box-sizing:border-box;}
/* bottom nav: green pill behind the icon, icon and name go green */
html body .app-bottom-nav .abn-link.active,
html body .abn-link.active{color:var(--menu-green-ink);}
html body .app-bottom-nav .abn-link.active svg,
html body .abn-link.active svg{stroke:currentColor;}
html body .app-bottom-nav .abn-link:active:not(.abn-link-add){color:var(--menu-green-ink);}

/* More drawer refinements: X-like white sheet, stronger primary rows, and
   no green selected/pressed fill. Keep the utility rows at their base size. */
.app-more-premium,.app-sidebar-item-premium{display:none !important;}
@media(max-width:720px){
  .app-more-drawer{background:#fff;}
  .app-more-item:not([href="settings.html"]):not(.app-more-item-danger){font-size:15.5px;padding-top:13px;padding-bottom:13px;}
  .app-more-item:not([href="settings.html"]):not(.app-more-item-danger) .app-more-item-icon{width:24px;height:24px;}
  .app-more-item:not([href="settings.html"]):not(.app-more-item-danger) .app-more-item-icon svg{width:22px;height:22px;}
  .app-more-group-btn[aria-expanded="true"]:not(.app-more-item-danger){padding-top:13px;padding-bottom:13px;}
}
html body .app-more-item.active,html body .app-more-item:active,
html body .app-more-sub-link.active,html body .app-more-sub-link:active,
html body .app-more-group-btn:active{background:transparent !important;box-shadow:none !important;}
html body .app-more-item.active,html body .app-more-item:active,
html body .app-more-sub-link.active,html body .app-more-sub-link:active{color:var(--navy-85,#1b212d) !important;}
html body .app-more-item.active .app-more-item-label,html body .app-more-item:active .app-more-item-label,
html body .app-more-item.active .app-more-item-icon,html body .app-more-item:active .app-more-item-icon,
html body .app-more-item.active .app-more-item-icon svg,html body .app-more-item:active .app-more-item-icon svg{color:var(--icon-black,#111) !important;}

/* Hashtag suggestions under the composer text box (posts.html) */
.pcc-tag-panel{max-height:260px;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--navy-06);margin:4px 0 6px;-webkit-overflow-scrolling:touch;}
.pcc-tag-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:10px 2px;border:none;background:none;font-family:inherit;text-align:left;cursor:pointer;color:var(--navy);-webkit-tap-highlight-color:transparent;}
.pcc-tag-name{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.pcc-tag-count{font-size:14px;font-weight:400;color:var(--navy-45);flex-shrink:0;}
@media (hover:hover){.pcc-tag-row:hover{background:var(--navy-06);}}
.pcc-men-row{justify-content:flex-start;gap:12px;}
.pcc-men-av{width:38px;height:38px;border-radius:50%;background:var(--navy-06);color:var(--navy-65);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;overflow:hidden;flex-shrink:0;}
.pcc-men-av img{width:100%;height:100%;object-fit:cover;display:block;}
.pcc-men-text{display:flex;flex-direction:column;min-width:0;}
.pcc-men-name{font-size:15px;font-weight:600;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pcc-men-title{font-size:13px;font-weight:400;color:var(--navy-45);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Collaborators sheet (posts.html) */
.pcc-tool.has-value{color:var(--teal);}
.pcc-collab-head{padding:14px 18px 4px;font-size:15px;font-weight:800;color:var(--navy);}
.pcc-collab-note{padding:0 18px 8px;font-size:13px;line-height:1.4;color:var(--navy-45);}
.pcc-collab-picked{display:flex;align-items:center;gap:12px;padding:8px 18px;}
.pcc-collab-picked .pcc-men-text{flex:1;}
.pcc-collab-x{flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:50%;background:none;color:var(--navy-45);cursor:pointer;}
@media (hover:hover){.pcc-collab-x:hover{background:var(--navy-06);color:var(--navy);}}
.pcc-collab-row{width:100%;box-sizing:border-box;padding:10px 18px;background:none;border:none;font-family:inherit;text-align:left;cursor:pointer;display:flex;align-items:center;}
@media (hover:hover){.pcc-collab-row:hover{background:var(--navy-06);}}

@media(max-width:720px){
  .app-bottom-nav{min-height:72px;padding-top:10px!important;padding-bottom:calc(18px + env(safe-area-inset-bottom))!important;bottom:0!important;transform:none;box-shadow:none!important}
  /* Solid white extension below the bar so no page content shows under it */
  .app-bottom-nav::after{content:"";position:absolute;left:0;right:0;top:100%;height:24px;background:#fff;pointer-events:none}
  body{font-size:1.025em} h1{font-size:1.04em} h2,h3{font-size:1.03em}
  .pcc-tool{color:var(--teal)!important}.pcc-tool svg{width:21px!important;height:21px!important}.pcc-postopt{color:var(--teal)!important}
  .pcc-drafts-cancel,.pcc-drafts-edit{color:var(--teal)!important}
  .pcc-tag-panel{max-width:100%;max-height:min(34vh,260px);overflow-y:auto;overscroll-behavior:contain}
  .post-compose-page,.post-compose-card{max-width:100vw;box-sizing:border-box;overflow-x:hidden}.pcc-compose-col{min-width:0;max-width:100%}
}

.pcc-more-tool{margin-left:auto!important;color:var(--teal)!important;font-weight:800;font-size:23px;letter-spacing:2px}.pcc-more-tool span{transform:translateY(-5px)}
.pcc-more-panel{display:grid;gap:0;border:1px solid var(--navy-10);border-radius:14px;margin-top:10px;overflow:hidden;background:#fff}.pcc-more-panel[hidden]{display:none}.pcc-more-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-bottom:1px solid var(--navy-06);font-size:13px}.pcc-more-row:last-child{border-bottom:0}.pcc-more-row span{display:grid;gap:3px}.pcc-more-row small{font-size:11px;color:var(--navy-45)}.pcc-more-row input[type=datetime-local]{max-width:180px;font:inherit;color:var(--teal)}.pcc-more-row input[type=checkbox]{accent-color:var(--teal);width:19px;height:19px}
.pcc-cover-pick{position:absolute;left:6px;top:6px;border:0;border-radius:20px;padding:4px 8px;background:#172b35aa;color:#fff;font-family:inherit;font-size:10px;font-weight:600;cursor:pointer}.pcc-cover-pick.active{background:var(--teal)}

.pcc-image-cell .pcc-video-frame{position:absolute;left:6px;right:6px;bottom:5px;width:calc(100% - 12px);height:14px;z-index:3;accent-color:var(--teal);opacity:.92}.pcc-video-badge{bottom:22px!important}.pcc-image-cell input[type=range]{touch-action:pan-x}

@media(max-width:720px){.pcc-more-panel:not([hidden]){position:fixed;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:1800;box-shadow:0 12px 36px rgba(11,35,43,.18);animation:pccMoreUp .22s cubic-bezier(.2,.8,.2,1)}}@keyframes pccMoreUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}


/* ---- Composer: tighter icon row, no layout shake while typing ---- */
.pcc-toolbar{gap:0;}
.pcc-tool{width:38px;height:40px;}
.pcc-more-tool{margin-left:0!important;}
@media (max-width:720px){
  .pcc-toolbar{gap:0;margin-left:-8px;padding-top:10px;padding-bottom:calc(6px + env(safe-area-inset-bottom));}
  .pcc-postopt{padding:0 6px 0 8px;margin-right:0;height:40px;}
  .pcc-postopt span{display:none;}
  .pcc-tool{width:36px;height:40px;}
  .pcc-tool svg{width:21px!important;height:21px!important;}
  .pcc-more-tool{margin-left:0!important;font-size:21px;letter-spacing:1px;}
  /* The sheet itself never scrolls (that's what made it shift and shake
     as the keyboard opened and the caret moved). Only the writing area
     scrolls, inside a fixed-height card. */
  .post-compose-page,.post-compose-page.pcc-open{overflow:hidden!important;overscroll-behavior:none;}
  .post-compose-page .post-compose-card{height:100%;min-height:0;max-height:100%;overflow:hidden;}
  .pcc-compose-row{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
  .post-compose-card textarea{min-height:96px;overflow-y:auto;overscroll-behavior:contain;}
  .pcc-toolbar{flex-shrink:0;}
}
html.pcc-lock,html.pcc-lock body{overflow:hidden!important;height:100%;overscroll-behavior:none;}

/* Composer on web: same compact look as the phone version (smaller type, smaller green icons) */
.post-compose-card textarea{font-size:17px;line-height:1.45;}
.post-compose-card textarea::placeholder{font-size:17px;}
.pcc-tool{color:var(--teal)!important;}
.pcc-tool svg{width:21px!important;height:21px!important;}
.pcc-postopt{color:var(--teal)!important;font-size:12.5px;}
.pcc-drafts-cancel,.pcc-drafts-edit{color:var(--teal)!important;}
.pcc-cancel{font-size:13px;}
.pcc-drafts-btn{font-size:13px;}
.pcc-toolbar{padding-top:10px;}
@media (min-width:721px){
  .post-compose-page .post-compose-card{max-width:600px;}
  .pcc-toolbar{margin-left:-6px;}
}

/* Stage 10: composer shake fix. The # and @ suggestion lists float above the toolbar instead of sitting in the page flow,
   and the text box never changes height because a list opened or closed. */
.pcc-toolbar{position:relative;}
.pcc-toolbar>.pcc-tag-panel{position:absolute;left:0;right:0;bottom:100%;z-index:8;margin:0;padding:0 14px;background:var(--white);border-top:none;border-radius:14px 14px 0 0;box-shadow:0 -8px 22px rgba(15,35,32,.10);max-height:min(34vh,260px);}
@media (max-width:720px){ .pcc-toolbar>.pcc-tag-panel{left:8px;} }
.post-compose-card textarea{overflow-anchor:none;}
.pcc-people-chip{margin-top:8px;}

/* Stage 17c: edge-swipe menu follows the finger (no easing while dragging; the menu is clipped to the area the page has uncovered) */
body.pp-menu-drag{background:#fff;}
body.pp-menu-drag > *:not(.app-more-backdrop):not(script):not(style):not(link):not(.app-sidebar){transform:translateX(var(--pp-drag-x,0px)) !important;transition:none !important;}
body.pp-menu-drag > .app-nav,body.pp-menu-drag > .app-page-head{border-top-left-radius:28px;}
body.pp-menu-drag > .app-bottom-nav{border-bottom-left-radius:28px;}
body.pp-menu-drag > main,body.pp-menu-drag > .app-nav,body.pp-menu-drag > .app-page-head,body.pp-menu-drag > .app-bottom-nav{box-shadow:-10px 0 28px -6px rgba(0,0,0,.30),-1px 0 0 rgba(0,0,0,.05);}
body.pp-menu-drag .app-more-drawer{transition:none !important;transform:none !important;opacity:1 !important;clip-path:inset(0 calc(100% - var(--pp-drag-x,0px)) 0 0);}
body.pp-menu-drag .app-more-backdrop{pointer-events:none;}

/* Page switcher (stage 1) */
.app-dropdown-profile-active{background:var(--navy-06);}
.app-dropdown-profile-active .app-dropdown-profile-type{color:var(--navy);font-weight:600;}
.app-acting-initial{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:600;color:var(--navy-60,#555);}
.app-switch-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,12px);background:#111;color:#fff;font-size:13px;padding:10px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:100000;}
.app-switch-toast.show{opacity:1;transform:translate(-50%,0);}

/* Page-switcher identity follow-up: no dropdown arrows on any page, business or professional.
   (Account switching lives in the avatar menu / sidebar; Notifications, Messages, Wallet, Room etc. never show a caret.) */
.app-navlink-caret-btn,
.ntf-acct svg,
.ntf-acct > svg,
.msg-inbox-switch-btn .mis-chevron,
.msg-inbox-switch-btn > svg,
#appMoreProfileItem .app-more-item-caret,
#appMoreProfileItem > svg,
.app-more-profile-row .app-more-item-caret,
.app-dropdown-wrap .app-nav-avatar-btn::after,
.app-nav-me-trigger svg:not(.pp-ham){display:none!important;}
/* Menu icon fix: the rule above used to hide the hamburger too, leaving an empty button on Feed and other pages. */
.app-more-btn svg.pp-ham,.app-nav-me-trigger svg.pp-ham,.uni-menu-btn svg.pp-ham{display:block!important;width:22px;height:22px;stroke:currentColor;}

/* ---- Header Page switcher (Facebook-style card on web, bottom sheet on phones) ---- */
.pp-page-switch-btn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;cursor:pointer;}
.pp-page-switch-btn[hidden]{display:none!important;}
.pp-page-switch-btn[aria-expanded="true"]{color:#0F766D;}
.pp-sw-backdrop{position:fixed;inset:0;z-index:2990;display:none;background:transparent;}
.pp-sw-backdrop.open{display:block;}
.pp-sw-panel{position:fixed;z-index:3000;display:none;width:360px;max-width:calc(100vw - 16px);max-height:min(70vh,560px);flex-direction:column;background:#fff;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.06);font-family:inherit;color:#262626;}
.pp-sw-panel.open{display:flex;}
.pp-sw-title{padding:14px 16px 8px;font-size:17px;font-weight:700;}
.pp-sw-list{overflow-y:auto;padding:0 8px;flex:1 1 auto;overscroll-behavior:contain;}
.pp-sw-row{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:8px;color:inherit;text-decoration:none;}
@media (hover:hover){.pp-sw-row:hover{background:rgba(0,0,0,.05);}}
.pp-sw-av{width:40px;height:40px;border-radius:50%;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#F4EDE1;color:#262626;font-weight:600;font-size:15px;}
.pp-sw-av img{width:100%;height:100%;object-fit:cover;display:block;}
.pp-sw-meta{display:flex;flex-direction:column;min-width:0;flex:1;}
.pp-sw-name{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pp-sw-cap{font-size:13px;color:#6b6b6b;}
.pp-sw-check{color:#0F766D;display:flex;flex-shrink:0;}
.pp-sw-row.is-active .pp-sw-name{color:#0F766D;}
.pp-sw-foot{padding:6px 8px 10px;border-top:1px solid rgba(0,0,0,.08);margin-top:6px;}
.pp-sw-add{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:8px;color:inherit;text-decoration:none;font-size:15px;font-weight:600;}
@media (hover:hover){.pp-sw-add:hover{background:rgba(0,0,0,.05);}}
.pp-sw-plus{width:40px;height:40px;border-radius:50%;background:#EDEDED;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;font-weight:400;}
.pp-sw-all{display:block;margin:6px 8px 0;padding:10px;border-radius:8px;background:#EDEDED;color:inherit;text-align:center;text-decoration:none;font-size:15px;font-weight:600;}
body.pp-sw-lock{overflow:hidden;}
@media (max-width:720px){
  .pp-sw-backdrop.open{background:rgba(0,0,0,.4);}
  .pp-sw-panel{top:auto!important;left:0!important;right:0!important;bottom:0;width:auto;max-width:none;max-height:78vh;border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);}
  .pp-sw-panel::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:#d0d0d0;margin:8px auto 0;}
}

/* =====================================================================
   Stage 7 - mobile standards (Facebook-style)
   1) Mobile menu = two cards per row, icon on top, label underneath.
   2) Profile switcher = bottom sheet that slides up and drags down to close.
   3) Switching profile = full-screen "Switching to X..." splash, then a
      "Switched to X  Undo" bar above the bottom navigation.
   ===================================================================== */

/* ---- 1) Mobile menu grid ---- */
@media (max-width:720px){
  :root{--app-more-drawer-width:min(440px,88vw);}
  .app-more-section:not(.app-more-section-standalone){
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;gap:10px;padding:14px 14px 4px;
  }
  .app-more-section:not(.app-more-section-standalone) > .app-more-section-label{grid-column:1/-1;margin:4px 2px 0;}
  .app-more-section:not(.app-more-section-standalone) .app-more-group{display:contents;}
  html body .app-more-section:not(.app-more-section-standalone) .app-more-item{
    display:flex !important;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:16px;
    width:auto !important;margin:0 !important;min-height:78px;padding:12px !important;box-sizing:border-box;
    background:#fff !important;border:1px solid #d9dde2;border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.04);
    text-align:left;font-size:14.5px !important;font-weight:500;color:var(--navy-85,#1b212d);
    -webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s;
  }
  html body .app-more-section:not(.app-more-section-standalone) .app-more-item:active{background:#f3f4f6 !important;}
  html body .app-more-section:not(.app-more-section-standalone) .app-more-item .app-more-item-icon{width:26px !important;height:26px !important;}
  html body .app-more-section:not(.app-more-section-standalone) .app-more-item .app-more-item-icon svg{width:24px !important;height:24px !important;}
  html body .app-more-section:not(.app-more-section-standalone) .app-more-item .app-more-item-icon-pearl img{width:24px;height:24px;}
  html body .app-more-section:not(.app-more-section-standalone) .app-more-item-label{flex:none;line-height:1.2;}
  html body .app-more-section:not(.app-more-section-standalone) .app-more-item-caret{display:none !important;}
  /* the page you are on / an open group gets a teal outline, no fill */
  html body .app-more-section:not(.app-more-section-standalone) .app-more-item.active,
  html body .app-more-section:not(.app-more-section-standalone) .app-more-item[aria-expanded="true"]{
    border-color:#0F766D;box-shadow:0 0 0 1px #0F766D inset;font-weight:600;
  }
  /* opened groups / My Profiles lists take a full row under the cards */
  .app-more-section:not(.app-more-section-standalone) .app-more-sub,
  .app-more-section:not(.app-more-section-standalone) .app-more-profiles-submenu{
    grid-column:1/-1;margin:0;padding:6px;border-left:0;border-radius:12px;background:#f6f7f8;border:1px solid #e6e9ed;
  }
  .app-more-section:not(.app-more-section-standalone) .app-more-sub[hidden],
  .app-more-section:not(.app-more-section-standalone) .app-more-profiles-submenu[hidden]{display:none;}
  .app-more-section:not(.app-more-section-standalone) .app-more-sub-link{padding:12px;margin:0;border-radius:9px;font-size:14px;}
  .app-more-section:not(.app-more-section-standalone) .app-more-sub-link.active{background:#fff;color:#0F766D;font-weight:600;}
}

/* ---- 2) Profile switcher sheet (phones) ---- */
.pp-sw-add{width:100%;box-sizing:border-box;}
@media (max-width:720px){
  .pp-sw-backdrop{opacity:0;transition:opacity .3s ease;}
  .pp-sw-backdrop.open{display:block;background:rgba(0,0,0,.45);}
  .pp-sw-backdrop.show{opacity:1;}
  .pp-sw-panel{
    display:flex;visibility:hidden;transform:translateY(100%);transition:transform .32s cubic-bezier(.22,.61,.36,1),visibility 0s linear .32s;
    max-height:82vh;border-radius:18px 18px 0 0;touch-action:pan-y;will-change:transform;background:#fff;
    padding-bottom:max(12px,env(safe-area-inset-bottom,0px));
  }
  .pp-sw-panel.open{visibility:visible;transition:transform .32s cubic-bezier(.22,.61,.36,1),visibility 0s;}
  .pp-sw-panel.show{transform:translateY(0);}
  .pp-sw-panel::before{width:44px;height:5px;border-radius:3px;background:#cfd3d8;margin:9px auto 10px;flex:none;}
  .pp-sw-title{display:none;}
  .pp-sw-list{margin:0 12px;padding:0;border:1px solid #dcdfe4;border-radius:14px;overflow-y:auto;flex:0 1 auto;}
  .pp-sw-row,.pp-sw-add{padding:12px 14px;border-radius:0;gap:12px;}
  .pp-sw-row + .pp-sw-row,.pp-sw-row + .pp-sw-add{border-top:1px solid #eceef1;}
  .pp-sw-row:active,.pp-sw-add:active{background:#f3f4f6;}
  .pp-sw-av{width:46px;height:46px;}
  .pp-sw-name{font-size:16px;}
  .pp-sw-meta{gap:5px;align-items:flex-start;}
  .pp-sw-cap{display:inline-block;font-size:12.5px;font-weight:600;color:#3f4650;background:#e9ecf0;border-radius:999px;padding:2px 10px;line-height:1.5;}
  .pp-sw-check{width:24px;height:24px;border-radius:50%;background:#0F766D;color:#fff;align-items:center;justify-content:center;}
  .pp-sw-check svg{width:15px;height:15px;}
  .pp-sw-plus{width:46px;height:46px;background:#eceef1;}
  .pp-sw-foot{border-top:0;margin-top:10px;padding:0 12px;}
  .pp-sw-all{margin:0;padding:13px;border-radius:12px;}
}

/* ---- 3) Switch splash + "Switched to" bar ---- */
.pp-switching{
  position:fixed;inset:0;z-index:100001;background:#fff;color:#5b6168;display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;transition:opacity .28s ease;
}
.pp-switching.show{opacity:1;}
.pp-switching-mid{display:flex;flex-direction:column;align-items:center;transform:translateY(-4vh);}
.pp-switching-ring{position:relative;width:104px;height:104px;display:flex;align-items:center;justify-content:center;}
.pp-switching-av{width:84px;height:84px;border-radius:50%;overflow:hidden;background:#F4EDE1;display:flex;align-items:center;justify-content:center;color:#262626;font-size:34px;font-weight:600;}
.pp-switching-av img{width:100%;height:100%;object-fit:cover;display:block;}
.pp-switching-spin{position:absolute;inset:0;width:100%;height:100%;color:#6b7078;animation:ppSwitchSpin 1s linear infinite;}
@keyframes ppSwitchSpin{to{transform:rotate(360deg);}}
.pp-switching-text{margin:20px 24px 0;font-size:16px;line-height:1.35;color:#1c1e21;text-align:center;max-width:300px;word-break:break-word;}
.pp-switching-brand{position:absolute;left:50%;bottom:calc(36px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:44px;height:44px;border-radius:12px;display:block;}
/* hide the old page the instant a switched-to Home starts loading, so it never flashes before the splash */
html.pp-switch-pending body > *:not(.pp-switching){visibility:hidden !important;animation:ppSwitchReveal 0s 4.5s forwards;}
@keyframes ppSwitchReveal{to{visibility:visible;}}

.pp-switched{
  position:fixed;left:12px;right:12px;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:100000;
  display:flex;align-items:center;gap:14px;padding:12px 18px 12px 12px;border-radius:16px;
  background:rgba(48,50,54,.94);color:#fff;box-shadow:0 8px 28px rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(24px);transition:opacity .28s ease,transform .32s cubic-bezier(.22,.61,.36,1);
  max-width:520px;margin:0 auto;
}
.pp-switched.show{opacity:1;transform:translateY(0);}
.pp-switched-av{width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0;background:#F4EDE1;color:#262626;display:flex;align-items:center;justify-content:center;font-weight:600;}
.pp-switched-av img{width:100%;height:100%;object-fit:cover;display:block;}
.pp-switched-text{flex:1;min-width:0;font-size:15px;line-height:1.3;color:#d7d9dd;overflow:hidden;text-overflow:ellipsis;}
.pp-switched-text b{color:#fff;font-weight:600;}
.pp-switched-undo{border:0;background:transparent;color:#5EEAD4;font:inherit;font-size:15px;font-weight:600;padding:8px 2px 8px 8px;cursor:pointer;flex-shrink:0;}
@media (min-width:721px){
  .pp-switched{left:24px;right:auto;bottom:28px;margin:0;width:auto;min-width:320px;}
}

/* Stage 8 - a Page uses the same Jobs page as a professional; the only thing removed is "My applications"
   (a Page never applies). Hidden by CSS so it never flashes before the identity script runs. */
body.app-acting-page a[href="my-applications.html"],
html.pp-acting-page a[href="my-applications.html"]{display:none !important;}

/* ---- Business pages: no Boards or Certificates ---------------------------------
   A business page never uses the learner Certificates tab or the Workspace "Boards" shortcut, so both
   are removed everywhere (web sidebar, phone menu, Storefront tabs) while acting as a business. */
body.app-acting-page .app-sidebar-subitem[href^="workspace.html?view=my"],
body.app-acting-page .app-more-sub-link[href^="workspace.html?view=my"],
body.app-acting-page .wm-nav-item[data-view="certificates"],
body.app-acting-page [data-wmu-view="certificates"],
body.app-acting-page a[href*="certificates"]{display:none!important;}

/* Composer (posts.html): the bottom menu bar stays hidden on every screen size and every step of the post flow. */
body[data-app-page="posts"] .app-bottom-nav,
body[data-app-page="posts"].pp-authed .app-bottom-nav,
body[data-app-hybrid][data-app-page="posts"].pp-authed .app-bottom-nav{display:none !important;}
body.app-body[data-app-page="posts"]{padding-bottom:0;}

/* ---- Stage 2: sidebar brand row (wordmark open, square mark collapsed) ---- */
.app-sidebar-brand-row{padding:4px 8px 14px 10px;gap:6px;justify-content:space-between;}
.app-sidebar-brand{display:flex;align-items:center;min-width:0;flex:1;text-decoration:none;}
.app-sidebar-brand-word{height:26px;width:auto;display:block;}
.app-sidebar-brand-mark{display:none;width:36px;height:36px;border-radius:10px;}
[data-sidebar-collapsed="true"] .app-sidebar-brand-row{padding:6px 0 10px;align-items:center;}
[data-sidebar-collapsed="true"] .app-sidebar-brand{flex:none;justify-content:center;width:100%;}
[data-sidebar-collapsed="true"] .app-sidebar-brand-word{display:none;}
[data-sidebar-collapsed="true"] .app-sidebar-brand-mark{display:block;}
@media (max-width:720px){.app-sidebar-brand-row{padding:6px 14px 14px;}}

/* ---- Stage 3: header avatar = Page switcher trigger (Facebook-style) ----
   The old "header simplification" rules hid the header avatar everywhere. It comes back on every
   page (web and phones) with a small chevron badge; tapping it opens the switcher card / sheet.
   On phone Home the avatar already lives inside the More-menu trigger, so it stays hidden there. */
body.app-body .app-nav-right .app-dropdown-wrap{display:block!important;position:relative;flex-shrink:0;}
body.app-body .app-nav-right .app-dropdown-wrap .app-nav-avatar-btn{display:flex;width:40px;height:40px;cursor:pointer;}
.app-dropdown-wrap .pp-av-chevron{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;background:#e4e6eb;color:#050505;border:2px solid #fff;box-sizing:border-box;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.app-dropdown-wrap .pp-av-chevron svg{width:9px;height:9px;display:block;}
.app-dropdown-wrap:has(.app-nav-avatar-btn[aria-expanded="true"]) .pp-av-chevron{background:#0F766D;color:#fff;}
body[data-app-page="home"] .app-nav-right .app-dropdown-wrap{display:block!important;}
@media (max-width:720px){
  body.app-body .app-nav-right .app-dropdown-wrap .app-nav-avatar-btn{width:36px;height:36px;}
  body[data-app-page="home"] .app-nav-right .app-dropdown-wrap{display:none!important;}
}


/* ---- Stage 4: collapse button = Brevo-style panel icon ----
   A rounded window with a left panel line replaces the old chevron. The icon no longer
   rotates; the left panel fills in when the menu is collapsed so the state is readable. */
.app-sidebar-collapse-btn{width:34px;height:34px;border-radius:9px;}
.app-sidebar-collapse-btn .asp-fill{opacity:0;transition:opacity .15s var(--ease);}
[data-sidebar-collapsed="true"] .app-sidebar-collapse-btn svg{transform:none;}
[data-sidebar-collapsed="true"] .app-sidebar-collapse-btn .asp-fill{opacity:.35;}
@media (hover:hover){.app-sidebar-collapse-btn:hover .asp-fill{opacity:.2;}[data-sidebar-collapsed="true"] .app-sidebar-collapse-btn:hover .asp-fill{opacity:.5;}}

/* ---- Menu cleanup stage 1: collapsed brand mark smaller (green mark, white glyph) ---- */
.app-sidebar-brand-mark{width:27px;height:27px;border-radius:8px;}
[data-sidebar-collapsed="true"] .app-sidebar-brand-row{padding:8px 0 12px;}
[data-sidebar-collapsed="true"] .app-sidebar-collapse-btn{display:none;}
[data-sidebar-collapsed="true"] .app-sidebar-brand{cursor:pointer;}
.app-sidebar-brand-word{height:30px;}
@media(max-width:720px){.app-sidebar{background:#f4faf7!important;}}
.em-setup-guide ol{display:grid;gap:12px;padding:0;margin:16px 0 0;list-style:none;counter-reset:email-setup;}
.em-setup-guide li{counter-increment:email-setup;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:3px 10px;align-items:center;padding:12px;border:1px solid #e8eeeb;border-radius:12px;}
.em-setup-guide li:before{content:counter(email-setup);grid-row:span 2;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#e5f3eb;color:#26745d;font-size:12px;font-weight:700;}
.em-setup-guide li b{font-size:13px;color:var(--navy);}
.em-setup-guide li span{grid-column:2;color:var(--navy-60);font-size:12px;line-height:1.45;}
.em-setup-guide li em{grid-column:3;grid-row:1/3;font-size:11px;font-style:normal;color:#7b6843;background:#faf4e7;padding:5px 8px;border-radius:99px;white-space:nowrap;}
.em-setup-guide li em.is-ready{color:#17664d;background:#e7f5ed;}
.em-dom-form :disabled{opacity:.55;cursor:not-allowed;}
@media(max-width:600px){.em-setup-guide li{grid-template-columns:28px minmax(0,1fr);}.em-setup-guide li em{grid-column:2;grid-row:auto;justify-self:start;margin-top:4px}.em-setup-guide li span{grid-column:2;}}


/* Menu + onboarding - Stage 3: the default (no photo) avatar is the same person silhouette
   My Profile uses: white filled shape on the teal->navy circle. Replaces the thin outline icon. */
body :is(.app-nav-avatar-btn,.adh-avatar,.app-more-avatar,.app-sidebar-profile-avatar,.pp-sw-av,#appMoreTriggerAvatar,#appMobileNavAvatar,#jnRailAvatar,#jnHeaderAvatar):has(> svg.pp-av-silhouette){background:linear-gradient(135deg,var(--teal),var(--navy))!important;color:#fff!important;border-color:transparent!important;}
svg.pp-av-silhouette{width:52%;height:52%;display:block;}

/* Stage 5: legible, roomier sidebar with a soft green surface on desktop and mobile. */
.app-sidebar{background:#f2f8f4!important;}
.app-sidebar-scroll{scrollbar-width:none;-ms-overflow-style:none;}
.app-sidebar-scroll::-webkit-scrollbar{width:0;height:0;display:none;}
.app-sidebar-item{font-size:14.5px!important;font-weight:500!important;gap:13px;padding:11px 13px;}
.app-sidebar-item.active{font-weight:600!important;}
.asi-icon{width:22px;height:22px;}
.asi-icon svg{width:22px;height:22px;}
.app-sidebar-submenu{background:#f2f8f4!important;border-color:#e1eee5!important;}
.app-sidebar-subitem{font-size:13.5px!important;font-weight:500!important;padding:10px 11px;}
.app-sidebar-subitem.active{font-weight:600!important;}
.app-sidebar-brand-word{height:32px!important;}
.app-sidebar-brand-mark{width:32px!important;height:32px!important;border-radius:9px!important;}
.app-sidebar-collapse-btn{width:36px;height:36px;border-radius:10px;color:#35554a;}
.app-sidebar-collapse-btn svg{width:21px;height:21px;}
@media(max-width:720px){.app-sidebar{background:#f2f8f4!important;}}

/* Media viewer keeps the creator and short post text with the opened image. */
.comm-imgview-post-meta{flex:0 0 auto;max-width:min(720px,94vw);width:100%;margin:0 auto;padding:8px 20px 0;color:#fff;}
.comm-imgview-author{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;}
.comm-imgview-avatar{width:30px;height:30px;flex:0 0 30px;border-radius:50%;overflow:hidden;background:#34433f;display:grid;place-items:center;font-size:12px;}
.comm-imgview-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.comm-imgview-caption{margin:6px 0 0 39px;font-size:13px;line-height:1.4;color:rgba(255,255,255,.88);max-height:3.9em;overflow:auto;}
@media(max-width:520px){.comm-imgview-post-meta{padding-inline:16px}.comm-imgview-caption{font-size:12.5px}}

/* Feed keeps its account/profile switcher beside notifications on phones too. */
@media(max-width:720px){body[data-app-page="home"] .app-nav-right .app-dropdown-wrap{display:block!important;}}


/* Stage 5: apply the quiet green menu surface and readable sizing to the mobile drawer. */
.app-more-drawer,.app-more-head,.app-more-list,.app-more-section,.app-more-profiles-submenu{background:#f2f8f4!important;}
.app-more-item{font-size:14.5px!important;font-weight:500!important;gap:13px;padding:12px 0;}
.app-more-item-icon{width:23px;height:23px;}
.app-more-item-icon svg{width:22px;height:22px;}
.app-more-item-label{font-weight:500;}
.app-more-close{width:34px;height:34px;}
.app-more-close svg{width:21px;height:21px;}
.app-more-premium{background:#eaf4ed;}
@media(max-width:720px){*{scrollbar-width:none!important;-ms-overflow-style:none!important;}*::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;background:transparent!important;}.app-more-drawer{background:#f2f8f4!important;}}


/* Company marks keep the original silhouette and transparent edges of the uploaded asset. */
.mp-item-company-logo,.pp-exp-company-logo{border-radius:0!important;object-fit:contain!important;background:transparent!important;border:0!important;}
@media(max-width:720px){
 .app-bottom-nav .abn-link.active::before,.app-bottom-nav .abn-link:not(.abn-link-add)::before{background:transparent!important;transform:translateX(-50%)!important;}
 .app-bottom-nav .abn-link:not(.abn-link-add)::after{width:58px!important;height:3px!important;border-radius:0!important;top:-10px!important;transform:translateX(-50%) scaleX(0)!important;}
 .app-bottom-nav .abn-link.active:not(.abn-link-add)::after{transform:translateX(-50%) scaleX(1)!important;}
}

/* Stage 2: smaller profile icon in the phone menu header */
.app-more-avatar{width:36px!important;height:36px!important;flex:0 0 36px!important;font-size:13px!important;}
.app-more-avatar svg{width:20px!important;height:20px!important;}
.app-more-name{font-size:14px!important;margin-bottom:1px!important;}
.app-more-view-profile{font-size:11.5px!important;}
.app-more-id{gap:10px!important;}

/* Stage 2: web menu a little smaller and lighter */
@media (min-width:721px){
  html body .app-sidebar .app-sidebar-item{font-size:13px;padding:8px 12px;gap:11px;font-weight:400;}
  html body .app-sidebar .app-sidebar-item.active{font-weight:500;}
  html body .app-sidebar .asi-icon{width:18px;height:18px;}
  html body .app-sidebar .asi-icon svg{width:18px;height:18px;}
  html body .app-sidebar .app-sidebar-subitem{font-size:12.5px!important;font-weight:400!important;padding:8px 11px;}
  html body .app-sidebar .app-sidebar-subitem.active{font-weight:500!important;}
  html body .app-sidebar .app-sidebar-profile-name{font-size:13px;font-weight:500;}
}

/* Stage 2: Pearl AI now has the bottom menu bar too, so lift its chat box above it on phones */
@media (max-width:720px){
  body[data-app-page="pearl"] .pa-layout{bottom:calc(72px + env(safe-area-inset-bottom))!important;height:auto!important;}
  body[data-app-page="pearl"].pearl-keyboard-open .app-bottom-nav{display:none!important;}
  body[data-app-page="pearl"].pearl-keyboard-open .pa-layout{bottom:0!important;}
}


/* ---- Mobile: Messages in the header, Profile in the bottom bar; menu tidy-up ---- */
@media (max-width:720px){
  /* the header avatar is replaced by the Messages icon; the page switcher now opens from the bottom bar */
  .app-nav .app-nav-right > .app-dropdown-wrap{display:none!important;}
  .abn-profile-btn{background:none;border:0;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .abn-profile-btn .abn-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
  .abn-profile-btn .abn-avatar svg{width:16px;height:16px;stroke:none;}
  .abn-profile-btn[aria-expanded="true"] .abn-avatar{border-color:#111;}
  /* no X in the menu: tap anything (an item or outside the menu) to close it */
  .app-more-close{display:none!important;}
  .app-more-id{padding-right:12px;}
  /* slight background around the profile name / photo / status block */
  .app-more-id{background:var(--navy-06,rgba(27,33,45,.06));border-radius:14px;padding:12px 14px;}
}

/* ---- Phones: no profile avatar in the header (Profile lives in the bottom bar) ----
   Earlier rules (body.app-body ... display:block!important, and the Home-page rules) out-ranked the
   hide rule above, so the avatar showed after Messages. This one is the most specific, so it wins everywhere.
   The element stays in the page (display:none) because the page switcher still looks it up. */
@media (max-width:720px){
  html body.app-body .app-nav .app-nav-right .app-dropdown-wrap,
  html body[data-app-page] .app-nav .app-nav-right .app-dropdown-wrap,
  html body[data-app-hybrid] .app-nav .app-nav-right .app-dropdown-wrap{display:none!important;}
}

/* Stage 2: one default (no photo) avatar everywhere: soft teal circle with the filled person, as shown in Pearl. */
body :is(.app-nav-avatar-btn,.adh-avatar,.app-more-avatar,.app-sidebar-profile-avatar,.pp-sw-av,#appMoreTriggerAvatar,#appMobileNavAvatar,#jnRailAvatar,#jnHeaderAvatar,.pearl-av):has(> svg.pp-av-silhouette){background:rgba(15,118,109,.12)!important;color:#0B5850!important;border-color:transparent!important;}

/* Bottom bar: always pinned to the screen. Its own layer keeps it from drifting while a page scrolls. */
@media (max-width:720px){
  .app-bottom-nav{position:fixed!important;left:0;right:0;bottom:0;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
}

/* Bottom bar: Profile avatar matches the other tabs (same size, same label line) on every page */
@media (max-width:760px){
  .app-bottom-nav .abn-link .abn-avatar{box-sizing:border-box;width:27px!important;height:27px!important;min-width:27px;flex:0 0 27px;margin:-2px 0 -1px;}
  .app-bottom-nav .abn-profile-btn{line-height:1.15;font-size:10.5px;font-weight:500;padding:6px 8px!important;align-self:stretch;justify-content:center;}
  .app-bottom-nav .abn-profile-btn .abn-avatar img{width:100%;height:100%;border-radius:50%;}
}

/* ===== PHONES: every popup / "more" / "+" menu is a slide-up sheet; scrollbars hidden; headers + bottom bar fixed ===== */
@media (max-width:760px){
  html,body,*{scrollbar-width:none!important;-ms-overflow-style:none!important}
  *::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
  html:has(body.app-body){scrollbar-gutter:auto!important}

  /* centred cards become bottom sheets (My profile's own settings excluded) */
  body:not([data-app-page="profile"]) .modal-backdrop,
  body:not([data-app-page="profile"]) .wm-modal-backdrop:not([hidden]){display:flex!important;align-items:flex-end!important;justify-content:center!important;padding:0!important}
  body:not([data-app-page="profile"]) .modal-backdrop .modal-card,
  body:not([data-app-page="profile"]) .wm-modal-backdrop .wm-modal{width:100%!important;max-width:none!important;margin:0!important;max-height:90vh;overflow-y:auto;border-radius:22px 22px 0 0!important;padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  body:not([data-app-page="profile"]) .modal-backdrop.open .modal-card{transform:translateY(0)!important;opacity:1!important;animation:ppSheetUp .26s ease-out}
  body:not([data-app-page="profile"]) .modal-backdrop:not(.open) .modal-card{transform:translateY(100%)!important}
  body:not([data-app-page="profile"]) .wm-modal-backdrop:not([hidden]) .wm-modal{animation:ppSheetUp .26s ease-out}

  /* small menus (plus, more, filter, export) slide up from the bottom too */
  .wmu-add-menu:not([hidden]),.wms-menu:not([hidden]),.wm-pur-menu:not([hidden]),.rm-create-menu,.tova-quick-menu:not([hidden]){
    position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;max-width:none!important;min-width:0!important;
    max-height:75vh;overflow-y:auto;z-index:100001!important;border:0!important;border-radius:22px 22px 0 0!important;
    padding:14px 12px calc(14px + env(safe-area-inset-bottom))!important;background:#fff;
    box-shadow:0 0 0 100vmax rgba(15,20,25,.38),0 -10px 40px rgba(15,20,25,.2)!important;animation:ppSheetUp .24s ease-out}
  .wmu-add-menu:not([hidden])::before,.wms-menu:not([hidden])::before,.wm-pur-menu:not([hidden])::before,.rm-create-menu::before,.tova-quick-menu:not([hidden])::before{content:"";display:block;width:38px;height:4px;border-radius:4px;background:#d5dad7;margin:0 auto 10px}
  .wmu-add-item,.wms-menu button,.wm-pur-menu button,.rm-create-menu button,.tova-quick-menu button{padding:14px 12px!important;font-size:15px!important}

  /* headers stay put */
  .app-nav,.wm-topbar,.room-topbar{position:sticky!important;top:0!important}
  .app-bottom-nav{position:fixed!important;bottom:0!important}
}
@keyframes ppSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ===== One search bar style everywhere: white, faint grey outline, no blue/green tint or focus ring ===== */
html body .wm-global-search,html body .wm-cpn-search,html body .room-top-search,html body .wsh-top-search,html body .wsh-mobile-search,
html body .app-nav-search input,html body .app-dash-search input,html body .st-search input,html body .wm-cat-search,
html body .wm-pur-search .wm-input{background:#fff!important;border:1px solid rgba(27,33,45,.10)!important;box-shadow:none!important;}
html body .wm-global-search:focus-within,html body .wm-cpn-search:focus-within,html body .room-top-search:focus-within,html body .wsh-top-search:focus-within,
html body .app-nav-search input:focus,html body .app-dash-search input:focus,html body .st-search input:focus,html body .wm-cat-search:focus,
html body .wm-pur-search .wm-input:focus{border-color:rgba(27,33,45,.22)!important;box-shadow:none!important;outline:none!important;}
html body .wm-global-search input,html body .wm-cpn-search input,html body .room-top-search input,html body .wsh-top-search input{background:transparent!important;border:0!important;box-shadow:none!important;outline:none!important;}


/* ===== PHONES: every slide-up sheet sits in front of the bottom nav, reads at the feed "More" size and has an icon per line ===== */
@media (max-width:760px){
  /* popups (sequences, forms, store form...) used to sit under the bottom nav; they now cover it */
  html body .wm-modal-backdrop:not([hidden]){z-index:100000!important}
  html body .wm-modal-backdrop:not([hidden]) .wm-modal{max-height:92vh!important;max-height:92dvh!important;padding-bottom:calc(22px + env(safe-area-inset-bottom))!important;box-shadow:0 -10px 40px rgba(15,20,25,.22)}
  html body .wm-modal-backdrop:not([hidden]){background:rgba(12,16,22,.5)}
  /* dim layer behind a slide-up menu (added by app-shell.js) */
  .pp-sheet-bd{position:fixed;inset:0;z-index:100000;background:rgba(12,16,22,.5);animation:ppSheetFade .2s ease-out}
  .pp-sheet-bd[hidden]{display:none}
  @keyframes ppSheetFade{from{opacity:0}to{opacity:1}}
  /* the menus themselves */
  html body .wmu-add-menu:not([hidden]),html body .wms-menu:not([hidden]),html body .wm-pur-menu:not([hidden]),html body .rm-create-menu,html body .tova-quick-menu:not([hidden]),html body .em-more-menu.is-sheet{
    position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;max-width:none!important;min-width:0!important;
    max-height:80vh!important;max-height:80dvh!important;overflow-y:auto;z-index:100001!important;background:#fff!important;border:0!important;border-radius:20px 20px 0 0!important;
    padding:6px 18px calc(18px + env(safe-area-inset-bottom))!important;box-shadow:0 -10px 40px rgba(15,20,25,.22)!important;margin:0!important}
  html body .wmu-add-menu:not([hidden])::before,html body .wms-menu:not([hidden])::before,html body .wm-pur-menu:not([hidden])::before,html body .rm-create-menu::before,html body .tova-quick-menu:not([hidden])::before,html body .em-more-menu.is-sheet::before{
    width:40px;height:5px;border-radius:5px;background:#000;margin:8px auto 10px}
  /* one line = icon + text, same size as the feed "More" menu (14px) */
  html body .wmu-add-item,html body .wms-menu button,html body .wm-pur-menu>button,html body .rm-create-menu button,html body .tova-quick-menu button,html body .em-more-menu.is-sheet button{
    display:flex!important;flex-direction:row!important;align-items:center!important;gap:14px!important;width:100%;min-height:44px;padding:12px 4px!important;font-size:14px!important;font-weight:500;line-height:1.3;
    color:#1B212D;background:none!important;border:0;border-radius:0;text-align:left}
  html body .wmu-add-item b{font-size:14px!important;font-weight:600;color:#1B212D}
  html body .wmu-add-item small{font-size:12px!important;color:#667085}
  .pp-sheet-txt{display:flex;flex-direction:column;gap:2px;min-width:0;align-items:flex-start;text-align:left}
  .pp-sheet-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;color:#0F766D}
  .pp-sheet-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  html body .em-more-menu.is-sheet button svg{width:20px;height:20px;flex:none}
  html body .em-more-menu.is-sheet button.is-danger,html body .em-more-menu.is-sheet button.is-danger svg{color:#9a3a2e}
  html body .wm-pur-menu>button.is-active{color:#0F766D;font-weight:600}
}
@media (max-width:760px){
  html body .em-filter-menu:not([hidden]) .em-fl > span{font-size:14px;font-weight:600;color:#1B212D}
  html body .em-filter-menu:not([hidden]) .em-fl select{font-size:14px}
}