/* Desktop styles stay in app.css and user_menu.css. */
.navigation-toggle,.navigation-mobile-label,.nav .mobile-bottom-navigation,.mobile-account-sheet{display:none}
@media(max-width:1023px){
  :root{--mobile-nav-height:72px;--mobile-bottom-space:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom,0px))}
  /* A readable link list remains available when JavaScript is disabled. */
  .nav{height:auto;min-height:64px;padding:12px 16px;flex-wrap:wrap;gap:12px}
  .nav .brand-logo{height:32px;max-height:32px;max-width:145px}
  .nav nav{width:100%;flex-wrap:wrap;gap:12px}
  .mobile-navigation{padding-bottom:var(--mobile-bottom-space);scroll-padding-bottom:calc(var(--mobile-bottom-space) + 16px)}
  html:has(.mobile-navigation){scroll-padding-bottom:calc(var(--mobile-bottom-space) + 16px)}
  .mobile-navigation .nav{height:calc(64px + env(safe-area-inset-top,0px));min-height:calc(64px + env(safe-area-inset-top,0px));flex-wrap:nowrap;padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));gap:12px}
  .mobile-navigation .nav #global-navigation{display:none}
  .mobile-navigation .nav>.nav-publish-btn{min-height:44px;font-size:12px;gap:4px;padding:10px 12px;border-radius:10px;box-shadow:none;white-space:nowrap}
  .mobile-navigation .nav .mobile-bottom-navigation{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;align-items:stretch;position:fixed;inset:auto 0 0;z-index:500;width:100%;height:var(--mobile-bottom-space);padding:4px env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);box-sizing:border-box;background:#fbfaf6;border-top:1px solid #e5e9df;flex-wrap:nowrap}
  .mobile-navigation .navigation-desktop-label{display:none}
  .mobile-navigation .navigation-mobile-label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:11px;line-height:1.2;letter-spacing:0;font-weight:500}
  .mobile-navigation .navigation-mobile-label svg{width:23px;height:23px;flex-shrink:0}
  .mobile-navigation .nav .navigation-destination{display:flex !important;position:relative;min-width:0;min-height:60px;width:100%;align-items:center;justify-content:center;padding:4px 2px;gap:0 !important;background:transparent !important;border:0;border-radius:0;box-shadow:none !important;transform:none !important;color:#617268 !important;text-decoration:none}
  .mobile-navigation .nav .navigation-destination.mobile-is-active{color:var(--green) !important}
  .mobile-navigation .mobile-is-active .navigation-mobile-label{font-weight:700}
  .mobile-navigation .mobile-is-active .navigation-mobile-label svg{stroke-width:2.2}
  .mobile-navigation .nav .user-menu{min-width:0;width:100%}
  .mobile-navigation .navigation-destination>.user-avatar,.mobile-navigation .navigation-destination>.user-menu-name,.mobile-navigation .user-menu-trigger>span:last-child:not(.user-menu-badge){display:none}
  .mobile-navigation .navigation-destination .user-menu-badge{position:absolute;top:1px;left:calc(50% + 7px);min-width:17px;height:17px;font-size:10px;padding:0 4px;border:2px solid #fbfaf6;box-sizing:content-box}
  .mobile-navigation .nav a:focus-visible,.mobile-navigation .nav button:focus-visible,.mobile-account-sheet a:focus-visible,.mobile-account-sheet button:focus-visible{outline:2px solid var(--green);outline-offset:-3px}
  body.mobile-navigation:not(.keyboard-navigation) .nav :is(a,button):focus,body.mobile-navigation:not(.keyboard-navigation) dialog :is(a,button):focus{outline:none !important}
  .mobile-navigation .nav :is(a,button),.mobile-navigation dialog :is(a,button){-webkit-tap-highlight-color:transparent}
  .mobile-navigation.keyboard-navigation #create-job-modal :is(a,button):focus-visible{outline:2px solid var(--green);outline-offset:2px}
  .mobile-account-sheet[open]{display:block;position:fixed;inset:auto 0 0 !important;margin:0 auto !important;width:min(100%,480px);max-width:100%;max-height:calc(100dvh - env(safe-area-inset-top,0px) - 20px);padding:20px max(20px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;border:0;border-radius:22px 22px 0 0 !important;background:#fbfaf6;color:var(--ink);box-shadow:none;animation:account-appear .16s ease-out}
  .mobile-account-sheet[open]::backdrop{background:rgba(16,35,27,.35);backdrop-filter:none;-webkit-backdrop-filter:none}
  body.navigation-menu-open{overflow:hidden}
  body.mobile-sheet-open .nav{position:fixed;top:0;left:0;right:0}
  #create-job-modal[open]{inset:auto 0 0 !important;margin:0 auto !important;width:min(100%,480px) !important;max-width:100% !important;max-height:calc(100dvh - env(safe-area-inset-top,0px) - 20px) !important;border-radius:22px 22px 0 0 !important;background:#fbfaf6 !important;box-shadow:none !important;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;animation:account-appear .22s cubic-bezier(.2,.7,.2,1)}
  #create-job-modal[open]::backdrop{background:rgba(16,35,27,.35);backdrop-filter:none;-webkit-backdrop-filter:none}
  #create-job-modal .opp-modal-inner{padding:20px max(20px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px)) !important}
  #create-job-modal .opp-modal-head h2{color:var(--ink)}
  #create-job-modal .opp-modal-head .icon-button{width:44px;height:44px;background:transparent;color:var(--green);font-size:26px}
  .mobile-account-sheet{touch-action:pan-y;-webkit-overflow-scrolling:touch}
  .mobile-account-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .mobile-account-heading h2{font-family:inherit;font-size:20px;line-height:1.3;margin:0;font-weight:700}
  .mobile-account-heading button{width:44px;height:44px;padding:0;font-size:26px;line-height:1;background:transparent;color:var(--green);box-shadow:none;border:0;border-radius:50%}
  .mobile-account-sheet [data-account-content]>p{margin:0 0 20px;color:var(--muted);font-size:14px;line-height:1.5}
  .mobile-account-sheet [data-account-content]>a{display:flex;align-items:center;justify-content:center;min-height:48px;box-sizing:border-box;margin-top:10px;padding:12px;border-radius:10px;font-weight:700;text-decoration:none;color:var(--green);background:#edf3e8}
  .mobile-account-sheet [data-account-content]>a.button{background:var(--green);color:white}
  .mobile-account-sheet .user-menu-dropdown{position:static;min-width:0;width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;margin:0}
  .mobile-account-sheet .user-menu-dropdown a,.mobile-account-sheet .user-menu-dropdown button{min-height:48px;padding:12px 8px;font-size:14px}
  .mobile-account-sheet .user-menu-section-label{padding:8px;font-size:11px;color:var(--muted)}
  .mobile-account-sheet .user-menu-divider{background:#e5e9df;margin:8px 0}
  .mobile-account-sheet .user-menu-logout{color:#a33d35 !important}
  .mobile-navigation .chat-launcher{bottom:calc(var(--mobile-bottom-space) + 16px)}
  .mobile-navigation .chat-message-notice{bottom:calc(var(--mobile-bottom-space) + 86px)}
  body.navigation-menu-open .chat-launcher,body.navigation-menu-open .chat-float-panel,body.navigation-menu-open .chat-message-notice,body:has(#create-job-modal[open]) .chat-launcher,body:has(#create-job-modal[open]) .chat-float-panel,body:has(#create-job-modal[open]) .chat-message-notice{visibility:hidden;pointer-events:none}
  @media(min-width:701px){.mobile-navigation .chat-float-panel{bottom:calc(var(--mobile-bottom-space) + 86px);height:min(590px,calc(100dvh - var(--mobile-bottom-space) - 115px))}}
  @keyframes account-appear{from{transform:translateY(100%)}to{transform:translateY(0)}}
  @media(prefers-reduced-motion:reduce){.mobile-account-sheet[open],#create-job-modal[open]{animation:none}.mobile-account-sheet[open]::backdrop,#create-job-modal[open]::backdrop{animation:none}}
}