/* Fuyu People PWA / mobile app layer */
.network-status{position:fixed;top:0;left:0;right:0;z-index:9999;background:#7b1d1d;color:#fff;text-align:center;padding:8px 14px;font-size:12px;font-weight:800;box-shadow:0 4px 18px rgba(0,0,0,.22)}
.pwa-install-bar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:9000;width:min(560px,calc(100% - 28px));background:#111;color:#fff;border:1px solid #383838;border-left:6px solid #ffc400;border-radius:18px;padding:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);display:flex;gap:12px;align-items:center}
.pwa-install-bar[hidden]{display:none}
.pwa-install-logo{width:44px;height:44px;border-radius:13px;background:#ffc400;padding:8px;flex:none}
.pwa-install-copy{min-width:0;flex:1}.pwa-install-copy strong{display:block;font-size:14px}.pwa-install-copy small{display:block;color:#bdbdbd;margin-top:3px;font-size:11px;line-height:1.35}
.pwa-install-actions{display:flex;gap:7px}.pwa-install-actions button{border:0;border-radius:11px;padding:10px 12px;font-weight:900;cursor:pointer}.pwa-install-actions .install{background:#ffc400;color:#111}.pwa-install-actions .dismiss{background:#282828;color:#fff}
.mobile-bottom-nav{display:none}
.pwa-standalone .site-header{padding-top:env(safe-area-inset-top)}
.pwa-standalone body{overscroll-behavior-y:none}

@media(max-width:800px){
  body.employee-mode,body.candidate-mode,body.hrd-mode{padding-bottom:84px}
  .site-footer{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  .mobile-bottom-nav{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:8000;grid-template-columns:repeat(5,1fr);background:rgba(17,17,17,.98);border-top:2px solid #ffc400;padding:7px 5px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(0,0,0,.22);backdrop-filter:blur(14px)}
  .mobile-bottom-nav a,.mobile-bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#ddd;background:transparent;border:0;text-decoration:none;font-size:9px;font-weight:850;min-height:48px;padding:4px 2px;border-radius:10px}
  .mobile-bottom-nav .icon{width:21px;height:21px}.mobile-bottom-nav a:active,.mobile-bottom-nav button:active{background:#282828;color:#ffc400}
  .mobile-bottom-nav .primary{background:#ffc400;color:#111;margin-top:-17px;border-radius:16px;box-shadow:0 10px 24px rgba(255,196,0,.28);min-height:58px}
  .pwa-install-bar{bottom:92px;padding:12px}.pwa-install-actions{flex-direction:column}.pwa-install-actions button{padding:8px 10px}
}
@media(max-width:420px){
  .pwa-install-copy small{display:none}.pwa-install-logo{width:40px;height:40px}.pwa-install-bar{gap:8px}
}
@media(max-width:700px){.performance-matrix{min-height:420px}.matrix-person{font-size:.65rem;padding:6px 8px}.theory-question{grid-template-columns:1fr}.question-number{width:36px;height:36px}.bonus-snapshot-grid{grid-template-columns:1fr}.management-outlet-grid{grid-template-columns:1fr}}

/* V8.9.2 — critical mobile bottom navigation isolation fix
   The generic mobile `nav` rule in style.css must never turn this dock
   into a full-screen overlay. Keep the dock pinned only to the bottom. */
@media (max-width:800px){
  nav.mobile-bottom-nav{
    display:grid !important;
    position:fixed !important;
    top:auto !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:100% !important;
    height:auto !important;
    min-height:68px !important;
    max-height:none !important;
    margin:0 !important;
    padding:7px 5px calc(7px + env(safe-area-inset-bottom)) !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    grid-auto-rows:minmax(48px,auto) !important;
    align-items:end !important;
    gap:3px !important;
    overflow:visible !important;
    background:rgba(17,17,17,.98) !important;
    border:0 !important;
    border-top:2px solid #ffc400 !important;
    border-radius:0 !important;
    box-shadow:0 -10px 30px rgba(0,0,0,.22) !important;
    transform:none !important;
  }
  nav.mobile-bottom-nav a,
  nav.mobile-bottom-nav button{
    position:relative !important;
    display:flex !important;
    width:100% !important;
    height:auto !important;
    min-height:48px !important;
    max-height:64px !important;
    margin:0 !important;
    padding:4px 2px !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:10px !important;
    background:transparent !important;
    color:#ddd !important;
    font-size:9px !important;
    font-weight:850 !important;
    line-height:1.15 !important;
    white-space:normal !important;
    text-align:center !important;
  }
  nav.mobile-bottom-nav a.primary,
  nav.mobile-bottom-nav button.primary{
    min-height:58px !important;
    max-height:66px !important;
    margin-top:-17px !important;
    background:#ffc400 !important;
    color:#111 !important;
    border-radius:16px !important;
    box-shadow:0 10px 24px rgba(255,196,0,.28) !important;
  }
  nav.mobile-bottom-nav .icon{
    width:21px !important;
    height:21px !important;
    flex:0 0 21px !important;
  }
  nav.mobile-bottom-nav span{
    display:block !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  body.employee-mode main.container,
  body.candidate-mode main.container,
  body.hrd-mode main.container,
  body.management-mode main.container{
    min-height:calc(100vh - 160px) !important;
  }
}

@media (max-width:380px){
  nav.mobile-bottom-nav a,
  nav.mobile-bottom-nav button{font-size:8px !important}
  nav.mobile-bottom-nav .icon{width:19px !important;height:19px !important;flex-basis:19px !important}
}

/* V8.9.4 — reliable complete menu drawer for Employee, HRD, and Management
   Important stacking fix: .site-header creates its own stacking context. While the
   menu is open, lift the whole header above the backdrop so menu cards cannot be
   hidden behind the dark overlay. */
.mobile-nav-backdrop{display:none}
@media (max-width:820px){
  body.nav-open{overflow:hidden}
  body.nav-open .site-header{z-index:9200 !important}

  body.employee-mode .employee-mega-nav,
  body.management-mode .management-mega-nav,
  body.hrd-mode .hr-mega-nav{
    display:none !important;
    position:fixed !important;
    z-index:30 !important;
    top:var(--fuyu-header-bottom,82px) !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    padding:16px 14px calc(28px + env(safe-area-inset-bottom)) !important;
    grid-template-columns:1fr !important;
    align-content:start !important;
    gap:12px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    background:#101010 !important;
    border:0 !important;
    border-top:2px solid #ffc400 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  body.employee-mode.nav-open .employee-mega-nav,
  body.management-mode.nav-open .management-mega-nav,
  body.hrd-mode.nav-open .hr-mega-nav{
    display:grid !important;
  }
  body.employee-mode .employee-mega-nav .nav-section,
  body.management-mode .management-mega-nav .nav-section,
  body.hrd-mode .hr-mega-nav .nav-section{
    display:block !important;
    min-width:0 !important;
    padding:16px !important;
    border:1px solid #343434 !important;
    border-radius:18px !important;
    background:#1a1a1a !important;
  }
  body.employee-mode .employee-mega-nav .nav-section>strong,
  body.management-mode .management-mega-nav .nav-section>strong,
  body.hrd-mode .hr-mega-nav .nav-section>strong{
    display:block !important;
    margin:0 2px 10px !important;
    color:#ffc400 !important;
    font-size:11px !important;
    letter-spacing:.12em !important;
    line-height:1.4 !important;
  }
  body.employee-mode .employee-mega-nav .nav-section>div,
  body.management-mode .management-mega-nav .nav-section>div,
  body.hrd-mode .hr-mega-nav .nav-section>div{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  body.employee-mode .employee-mega-nav a,
  body.management-mode .management-mega-nav a,
  body.hrd-mode .hr-mega-nav a{
    position:relative !important;
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
    min-height:54px !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    margin:0 !important;
    padding:12px !important;
    overflow:visible !important;
    border:1px solid #303030 !important;
    border-radius:13px !important;
    background:#222 !important;
    color:#f0f0ed !important;
    font-size:12px !important;
    font-weight:800 !important;
    line-height:1.25 !important;
    white-space:normal !important;
    text-align:left !important;
  }
  body.employee-mode .employee-mega-nav a .icon,
  body.management-mode .management-mega-nav a .icon,
  body.hrd-mode .hr-mega-nav a .icon{
    width:20px !important;
    height:20px !important;
    flex:0 0 20px !important;
    color:#ffc400 !important;
  }
  body.employee-mode .employee-mega-nav a.nav-whistle,
  body.hrd-mode .hr-mega-nav a.nav-whistle{
    border-color:#ffc400 !important;
    background:#ffc400 !important;
    color:#111 !important;
  }
  body.employee-mode .employee-mega-nav a.nav-whistle .icon,
  body.hrd-mode .hr-mega-nav a.nav-whistle .icon{color:#111 !important}
  body.employee-mode .employee-mega-nav a.nav-logout{
    border-color:#6f2929 !important;
    background:#2a1717 !important;
    color:#ffb3b3 !important;
  }
  .mobile-nav-backdrop{
    display:block;
    position:fixed;
    z-index:9100;
    inset:var(--fuyu-header-bottom,82px) 0 0;
    background:rgba(0,0,0,.58);
    backdrop-filter:blur(3px);
  }
  .mobile-nav-backdrop[hidden]{display:none !important}
  body.nav-open nav.mobile-bottom-nav{z-index:9050 !important}
}
@media (max-width:430px){
  body.employee-mode .employee-mega-nav .nav-section>div,
  body.management-mode .management-mega-nav .nav-section>div,
  body.hrd-mode .hr-mega-nav .nav-section>div{
    grid-template-columns:1fr !important;
  }
  body.employee-mode .employee-mega-nav,
  body.management-mode .management-mega-nav,
  body.hrd-mode .hr-mega-nav{
    padding-left:12px !important;
    padding-right:12px !important;
  }
}