/* 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;}
/* Branded conic-gradient ring (teal -> orange -> gold) instead of a plain
   single-color spinner, so even this earliest "resolving your session"
   moment feels like part of the product rather than a generic loader. */
.app-auth-spinner{width:34px;height:34px;border-radius:50%;padding:3px;background:conic-gradient(from 0deg,var(--teal),var(--orange),var(--gold),var(--teal));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));animation:appAuthSpin .9s linear infinite;}
@keyframes appAuthSpin{to{transform:rotate(360deg);}}

/* ---------- "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);}
.app-more-btn:hover{background:var(--navy-06);color:var(--navy);}
.app-more-btn svg{stroke:currentColor;display:block;}

.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;}

.app-more-drawer{position:fixed;top:0;left:0;bottom:0;width:min(340px,86vw);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);}
.app-more-close:hover{background:var(--navy-06);}
.app-more-close svg{stroke:currentColor;display:block;}
.app-more-id{display:flex;flex-direction:column;align-items:flex-start;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:'DM Sans',sans-serif;font-weight:500;font-size:17.5px;margin-bottom:10px;}
.app-more-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.app-more-name{font-family:'DM Sans',sans-serif;font-weight:600;font-size:16.5px;color:var(--navy);margin-bottom:2px;}
.app-more-view-profile{font-size:13px;font-weight:500;color:var(--teal-dark);}

.app-more-list{flex:1;padding:6px 0 4px;}
.app-more-section{padding:10px 22px 6px;}
.app-more-section-label{font-size:12px;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:14.5px;font-weight:500;cursor:pointer;}
.app-more-item:hover,.app-more-item:active,.app-more-item.active{color:var(--icon-green);}
.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;}
.app-more-item:hover .app-more-item-icon,.app-more-item:active .app-more-item-icon,.app-more-item.active .app-more-item-icon{color:var(--icon-green);}
.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;}
.app-more-item-danger:hover{color:#96281B;}
.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:'DM Sans',sans-serif;font-weight:500;font-size:13.5px;color:var(--navy);}
.app-more-premium-sub{font-size:12px;color:var(--navy-65);margin-top:1px;}
.app-more-premium-caret{color:var(--navy-45);flex-shrink:0;}

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

/* ---------- 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:var(--shadow-nav);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:13.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);}
/* Colorful animated glow ring in place of the old static "Search
   ProfilePro" placeholder copy -- a slowly rotating brand-color conic
   gradient that only shows once the field is actually focused, so the
   search bar reads as alive/inviting instead of a plain gray pill with
   text in it. Sits on a pseudo-element behind the input (z-index:-1)
   so it never interferes with typing or the magnifier icon. */
.app-nav-search::before{content:'';position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:conic-gradient(from 0deg,#F0C465,#ED7546,#0F766D,#D96B52,#F0C465);opacity:0;transition:opacity .3s var(--ease);z-index:-1;animation:appSearchSpin 3.5s linear infinite;pointer-events:none;}
.app-nav-search:focus-within::before{opacity:1;}
.app-nav-search:focus-within svg{color:var(--icon-green);}
@keyframes appSearchSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.app-nav-search::before{animation:none;}}
.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:12px;font-weight:500;transition:color .2s var(--ease);}
.app-nav-link svg{stroke:currentColor;}
.app-nav-link:hover{color:var(--icon-green);}
.app-nav-link:active,.app-nav-link.active{color:var(--icon-green);}

/* "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);}
.app-navlink-dd-wrap:hover .app-navlink-dd-main{color:var(--icon-green);}
.app-navlink-dd-wrap.active .app-navlink-dd-main,
.app-navlink-dd-wrap.active .app-navlink-caret-btn{color:var(--icon-green);}
.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);}
.app-navlink-caret-btn:hover{color:var(--icon-green);}
.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:13.5px;font-weight:500;color:var(--navy-80);text-align:left;}
.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:14px;}
/* 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;}
  .app-nav-msg-mobile:hover,.app-nav-search-mobile:hover{color:var(--icon-green);}
  /* 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:13.5px;font-family:'DM Sans',sans-serif;border:1.5px solid var(--navy-10);transition:border-color .2s var(--ease);}
.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;}

/* 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:13.5px;font-family:'DM Sans',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:'DM Sans',sans-serif;font-weight:600;font-size:14px;color:var(--navy);}
.app-dropdown-head .adh-email{font-size:12px;color:var(--navy-45);margin-top:1px;word-break:break-all;}
.app-dropdown a,.app-dropdown button{display:block;width:100%;text-align:left;padding:10px 10px;border-radius:8px;font-size:14px;color:var(--navy-80);font-weight:500;}
.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:7px 6px calc(7px + 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:var(--icon-green);}
  .abn-link svg{stroke:currentColor;stroke-width:2.3;width:25px;height:25px;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:12px;font-family:'DM Sans',sans-serif;}
  .abn-link.active .abn-avatar{border-color:var(--icon-green);}
  .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:34px;height:34px;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:20px;height:20px;stroke:#fff;}
  /* room so the floating bottom nav never covers page content */
  body.app-body{padding-bottom:88px;}
}
/* 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,.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:var(--navy-10);border-radius:4px;margin:8px auto 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:15.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{display:flex;align-items:center;}

/* ---------- 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:'DM Sans',sans-serif;font-weight:500;font-size:26.5px;letter-spacing:-.02em;color:var(--navy);margin-bottom:22px;}
@media (max-width:720px){.app-welcome{font-size:23px;margin-bottom:16px;}}

/* ---------- Dashboard (home.html) ---------- */
.app-main-wide{max-width:1180px;}
.dash-sub{font-size:14.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:'DM Sans',sans-serif;font-size:15px;font-weight:600;color:var(--navy);margin-bottom:4px;}
.dash-banner p{font-size:13px;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);}
.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:'DM Sans',sans-serif;font-size:15.5px;font-weight:600;color:var(--navy);margin-bottom:5px;}
.dash-card p{font-size:13px;color:var(--navy-45);line-height:1.5;}

/* 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;}
.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:15px;font-family:'DM Sans',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:14.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:'DM Sans',sans-serif;font-size:17.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);}
.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:13.5px;font-family:'DM Sans',sans-serif;flex-shrink:0;}
.pmw-avatar img{width:100%;height:100%;object-fit:cover;}
.post-modal-who .pmw-name{font-family:'DM Sans',sans-serif;font-weight:600;font-size:14.5px;color:var(--navy);}
.post-modal-who .pmw-title{font-size:12px;color:var(--navy-45);}
#postComposerText{flex:1;min-height:140px;resize:none;border:none;outline:none;font-size:16px;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:12.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:'DM Sans',sans-serif;font-size:16px;color:var(--navy-65);margin-bottom:6px;}
.feed-empty p{font-size:13.5px;}
.feed-loading{text-align:center;padding:40px 20px;color:var(--navy-45);font-size:13.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:15px;font-family:'DM Sans',sans-serif;}
.post-avatar img{width:100%;height:100%;object-fit:cover;}
.post-author-name{font-family:'DM Sans',sans-serif;font-weight:600;font-size:14.5px;color:var(--navy);}
.post-author-title{font-size:12.5px;color:var(--navy-45);margin-top:1px;}
.post-time{font-size:12px;color:var(--navy-45);margin-top:2px;}
.post-content{font-size:14.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-pill);font-size:14px;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;}
.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);}
.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);}
.app-btn-secondary:hover{background:var(--navy-10);}
.app-btn-sm{padding:7px 14px;font-size:12.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:12.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:13px;font-weight:500;color:rgba(255,255,255,.75);}
.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:12px;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);}
.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:16px;margin-bottom:8px;}
.simple-section p{font-size:14.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:'DM Sans',sans-serif;font-size:15px;font-weight:600;color:var(--navy);margin-bottom:6px;}
.simple-card p{font-size:13.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:'DM Sans',sans-serif;font-size:14.5px;font-weight:600;color:var(--navy);margin-bottom:5px;}
.simple-faq p{font-size:13.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:14.5px;font-weight:500;color:var(--navy-45);transition:color .2s var(--ease),border-color .2s var(--ease);}
.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:13px;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:12px;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:15px;font-weight:600;line-height:1.35;}
.res-badge{font-size:12px;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:13px;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:12px;}
.res-card-action{font-size:12.5px;font-weight:500;color:var(--teal-dark);white-space:nowrap;}
.res-card-action:hover{color:var(--navy);}
.res-section{margin-bottom:8px;}
.res-section h2{font-size:18px;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:15px;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:12.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
   (community-app.html, 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;}

/* Post composer (posts.html) -- simplified, X/Twitter-style: no audience
   selector (this app has exactly one community, so "who can see this"
   isn't a real choice -- removed rather than left as dead UI). 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. */
.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;margin-bottom:14px;flex-shrink:0;}
.pcc-cancel{background:none;border:none;font-family:inherit;font-size:14.5px;color:var(--navy-65);cursor:pointer;padding:6px 4px;}
.pcc-cancel:hover{color:var(--navy);}
.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;}
.post-compose-card textarea{display:block;width:100%;flex:1;min-height:120px;resize:none;border:none;padding:6px 0;font-size:22px;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;gap:4px;padding-top:14px;margin-top:auto;border-top:1px solid var(--navy-06);flex-shrink:0;}
.pcc-tool{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:none;color:var(--teal);cursor:pointer;transition:background .2s var(--ease);}
.pcc-tool svg{width:21px;height:21px;}
.pcc-tool:hover{background:var(--navy-06);}
.pcc-reply-note{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--navy-45);margin-top:12px;padding-top:12px;border-top:1px solid var(--navy-06);flex-shrink:0;}
.pcc-image-preview{position:relative;margin-top:4px;border-radius:var(--r-md);overflow:hidden;max-height:340px;background:var(--navy-06);flex-shrink:0;}
.pcc-image-preview img{display:block;width:100%;max-height:340px;object-fit:contain;}
.pcc-image-remove{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;background:rgba(18,20,25,.65);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.pcc-image-remove:hover{background:rgba(18,20,25,.85);}

/* "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 removed audience
   selector 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;}
.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:12px;font-family:'DM Sans',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:14px;font-weight:600;color:var(--navy);}
.pcc-postas-opt-sub{display:block;font-size:12.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:2;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--orange-dark);color:#fff;font-size:12px;font-weight:500;line-height:16px;text-align:center;font-family:'DM Sans',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:'DM Sans',sans-serif;font-size:17.5px;font-weight:600;color:var(--navy);}
.app-section-head p{font-size:12.5px;color:var(--navy-45);margin-top:2px;}
.app-section-link{font-size:13px;font-weight:500;color:var(--teal-dark);white-space:nowrap;flex-shrink:0;}
.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:10px;background:none;color:var(--teal-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:500;font-size:13px;font-family:'DM Sans',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:'DM Sans',sans-serif;font-weight:500;font-size:14.5px;color:var(--navy);line-height:1.35;}
a.app-row-title:hover{color:var(--teal-dark);}
.app-row-meta{font-size:12.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:12px;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:12.5px;color:var(--navy-45);}
.app-row-trail strong{display:block;font-family:'DM Sans',sans-serif;font-weight:500;font-size:13.5px;color:var(--navy);}
.app-row-status{font-size:12px;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:13.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:'DM Sans',sans-serif;font-weight:500;font-size:20px;color:var(--navy);line-height:1.1;}
.app-stat-label{font-size:12px;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:14px;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(100vh - 220px);min-height:460px;}
@media (max-width:720px){.msg-shell{height:calc(100vh - 190px);}}

.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);}
.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:15px;font-family:'DM Sans',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:'DM Sans',sans-serif;font-weight:600;font-size:14px;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:12px;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:13px;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;}}
.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:13.5px;font-family:'DM Sans',sans-serif;}
.msg-thread-avatar img{width:100%;height:100%;object-fit:cover;}
.msg-thread-name{font-family:'DM Sans',sans-serif;font-weight:600;font-size:14.5px;color:var(--navy);}
.msg-thread-title{font-size:12px;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:14px;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:12px;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:14px;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);}
.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:'DM Sans',sans-serif;font-size:15px;color:var(--navy-65);margin-bottom:6px;}
.msg-thread-empty p,.msg-list-empty p{font-size:13px;}
.msg-error-banner{margin:14px 16px 0;padding:10px 14px;border-radius:10px;background:var(--orange-10);color:var(--orange-dark);font-size:13px;}

/* ---------- 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;}
.notif-row:hover{background:var(--navy-06);}
.notif-row.unread{background:var(--teal-08);}
.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:'DM Sans',sans-serif;font-weight:500;font-size:14px;color:var(--navy);}
.notif-time{font-size:12px;color:var(--navy-45);flex-shrink:0;}
.notif-msg{font-size:13.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:13px;color:var(--navy-45);}
.notif-mark-all{font-size:13px;font-weight:500;color:var(--teal-dark);}
.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:linear-gradient(135deg,var(--teal-08),var(--navy-06));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:26.5px;font-family:'DM Sans',sans-serif;}
.mp-head-info{flex:1;min-width:200px;}
.mp-name{font-family:'DM Sans',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:15px;margin-top:4px;}
.mp-loc{color:var(--navy-65);font-size:13.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:13.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:'DM Sans',sans-serif;font-size:16px;font-weight:600;color:var(--navy);margin-bottom:14px;}
.mp-card p{color:var(--navy-80);font-size:14px;line-height:1.65;}
.mp-empty-note{color:var(--navy-45);font-size:13.5px;}

.mp-skills{display:flex;flex-wrap:wrap;gap:8px;}
.mp-skill-chip{background:var(--navy-06);color:var(--navy-80);font-size:13px;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:14px;color:var(--navy);}
.mp-item-meta{color:var(--navy-45);font-size:12.5px;margin:2px 0 6px;}

.mp-link-row{display:flex;align-items:center;gap:8px;font-size:13.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;}
.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:'DM Sans',sans-serif;font-size:15px;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:13.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:12px;font-weight:500;padding:5px 12px;border-radius:100px;}

.mp-loading{text-align:center;padding:60px 20px;color:var(--navy-45);font-size:13.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:'DM Sans',sans-serif;font-size:19px;font-weight:600;color:var(--navy);margin-bottom:10px;}
.mp-empty-card p{color:var(--navy-65);font-size:14px;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:'DM Sans',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:13.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:13.5px;font-weight:500;margin-bottom:18px;}
.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);}
.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:'DM Sans',sans-serif;font-weight:500;font-size:14px;color:var(--navy);}
.biz-action-sub{font-size:12px;color:var(--navy-45);margin-top:1px;}

/* Create / Edit Business Profile form -- LinkedIn-style "Edit Page" layout */
.biz-form-title{font-family:'DM Sans',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:13.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:24.5px;font-family:'DM Sans',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);}
.biz-form-logo-edit:hover{background:var(--navy-06);color:var(--teal-dark);}
.biz-form-logo-name{font-size:13px;font-weight:600;color:var(--navy-80);margin-bottom:2px;}
.biz-form-hint{font-size:12px;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:13px;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);}
.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:13px;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:14px;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:12.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:'DM Sans',sans-serif;font-weight:500;font-size:14px;color:var(--navy);margin-bottom:3px;}
.biz-toggle-sub{font-size:12.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:'DM Sans',sans-serif;font-weight:500;font-size:15px;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:12.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) ---------- */
.settings-list{margin-top:8px;max-width:640px;}
.settings-item{border-bottom:1px solid var(--navy-06);}
.settings-item:first-child{border-top:1px solid var(--navy-06);}
.settings-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:16px 4px;font-family:'DM Sans',sans-serif;font-weight:500;font-size:15px;color:var(--navy);}
.settings-item summary::-webkit-details-marker{display:none;}
.settings-item summary .si-icon{width:26px;height:26px;background:none;display:flex;align-items:center;justify-content:center;color:var(--icon-black);flex-shrink:0;}
.settings-item summary .si-icon svg{stroke:currentColor;}
.settings-item summary .si-chev{margin-left:auto;color:var(--navy-45);transition:transform .2s var(--ease);flex-shrink:0;}
.settings-item[open] summary .si-chev{transform:rotate(180deg);}
.settings-item-body{padding:0 4px 22px 40px;}
.settings-item-desc{font-size:13px;color:var(--navy-45);margin:-4px 0 14px;}
.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:14px;color:var(--navy);font-weight:500;}
.settings-row-sub{font-size:12.5px;color:var(--navy-45);margin-top:2px;}
.settings-field{margin-bottom:14px;}
.settings-field label{display:block;font-size:12.5px;font-weight:500;color:var(--navy-65);margin-bottom:6px;}
.settings-field input{width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--navy-10);font-size:14px;color:var(--navy);background:var(--white);font-family:inherit;}
.settings-field input:focus{outline:none;border-color:var(--teal);}
.settings-save-msg{font-size:12.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:12.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:12.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:14px;color:var(--navy);font-weight:500;}
.settings-team-sub{font-size:12px;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:13px;color:var(--navy-45);padding:8px 0;}

.settings-legal-list{margin-top:30px;padding-top:20px;border-top:1px solid var(--navy-06);max-width:640px;}
.settings-legal-list a,.settings-legal-list button{display:block;width:100%;text-align:left;padding:10px 4px;font-size:13.5px;color:var(--navy-65);border-radius:8px;}
.settings-legal-list a:hover,.settings-legal-list button:hover{color:var(--navy);background:var(--navy-06);}
.settings-legal-list .adl-logout{color:var(--orange-dark);}
.settings-version{font-size:12px;color:var(--navy-25);margin-top:10px;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;}
.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:12px;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:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--navy-45);margin-bottom:6px;}
.rc-title{font-family:'DM Sans',sans-serif;font-size:15.5px;font-weight:500;color:var(--navy);line-height:1.35;margin-bottom:6px;}
.rc-desc{font-size:13px;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:12.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:14px;}

/* 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:13.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:12px;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:14px;color:var(--navy-80);background:none;transition:background .15s;}
.app-search-suggest-item:hover,.app-search-suggest-item.active{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-remove{flex-shrink:0;color:var(--navy-45);padding:4px;border-radius:50%;}
.app-search-suggest-remove:hover{background:var(--navy-10);color:var(--navy);}
.app-search-suggest-empty{padding:10px 18px 16px;font-size:13px;color:var(--navy-45);line-height:1.55;}
.app-search-suggest-divider{height:1px;background:var(--navy-06);margin:8px 0;}

/* ==========================================================================
   Shared branded loading indicator -- three orbiting brand-colored dots,
   used anywhere a page previously just showed "Loading…"/"Searching…" text
   (see appLoaderHTML() in app-shell.js). 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{position:relative;width:40px;height:40px;flex-shrink:0;}
.app-loader-orbit span{position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;margin:-4px;animation:appOrbit 1.1s cubic-bezier(.5,0,.5,1) infinite;}
.app-loader-orbit span:nth-child(1){background:var(--teal);animation-delay:0s;}
.app-loader-orbit span:nth-child(2){background:var(--orange);animation-delay:.13s;}
.app-loader-orbit span:nth-child(3){background:var(--gold);animation-delay:.26s;}
@keyframes appOrbit{0%{transform:rotate(0deg) translateX(16px) rotate(0deg);}100%{transform:rotate(360deg) translateX(16px) rotate(-360deg);}}
.app-loader-text{font-size:13.5px;color:var(--navy-45);}
.app-loader.inline{flex-direction:row;padding:10px 0;gap:10px;}
.app-loader.inline .app-loader-orbit{width:22px;height:22px;}
.app-loader.inline .app-loader-orbit span{width:5px;height:5px;margin:-2.5px;animation-name:appOrbitSm;}
@keyframes appOrbitSm{0%{transform:rotate(0deg) translateX(9px) rotate(0deg);}100%{transform:rotate(360deg) translateX(9px) rotate(-360deg);}}

/* ==========================================================================
   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:'DM Sans',sans-serif;font-size:17.5px;color:var(--navy);margin-bottom:7px;}
.app-empty2 p{font-size:13.5px;color:var(--navy-65);max-width:340px;margin:0 auto;line-height:1.6;}
.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:13.5px;font-weight:500;color:var(--navy);transition:all .25s;}
.app-empty2-action:hover{background:var(--navy);color:var(--white);border-color:var(--navy);}

/* 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;}
.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:'DM Sans',sans-serif;font-weight:600;font-size:18px;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* 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;}
.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;}

/* 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:calc(100dvh - 164px);}
  .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:14px;}
  .app-row-sub{white-space:normal;overflow-wrap:anywhere;}
  .app-section-head{align-items:flex-start;}
  .app-section-head h2{font-size:16px;}
  .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:16px !important;}
}