/* Navigation presentation is independent of business-page styles. */
.sidebar:has(.area-navigation) { background: #f8f9fd; border-color: #e4e8f1; }
.area-navigation { gap: .35rem; scrollbar-width: thin; scrollbar-color: #cbd2e3 transparent; }
.area-navigation .nav-group { margin: .2rem 0; flex-shrink: 0; }
.area-navigation .nav-group summary { min-height: 44px; padding: .7rem .7rem; color: #29354e; background: transparent; font-size: .83rem; font-weight: 650; letter-spacing: 0; text-transform: none; border-radius: 9px; }
.area-navigation .nav-group summary::after { color: #8590a8; }
.area-navigation .nav-group summary:hover { background: #edf0f8; }
.area-navigation .nav-group[open] summary { color: #3448a6; background: #e9edfb; }
.area-navigation .nav-links { gap: .1rem; padding: .35rem 0 .4rem .5rem; margin-left: .4rem; border-left: 1px solid #dce1ef; }
.area-navigation .nav-link { min-height: 44px; padding: .65rem .65rem; color: #526078; background: transparent; border: 1px solid transparent; border-radius: 8px; font-size: .8rem; line-height: 1.4; overflow-wrap: anywhere; }
.area-navigation .nav-link:hover { color: #3045a3; background: #edf0fa; }
.area-navigation .nav-link.active { color: #2f4298; background: #e8edff; font-weight: 700; border-color: #dbe2fc; }
.area-navigation .nav-link:focus-visible, .work-area-link:focus-visible, .nav-module-directory:focus-visible { outline: 2px solid #4259d7; outline-offset: -2px; }
.nav-home-links { display: grid; gap: .15rem; padding-bottom: .75rem; border-bottom: 1px solid #e3e7f0; margin-bottom: .8rem; }
.nav-home-links a { text-decoration: none; display: flex; align-items: center; }
.nav-home-links .nav-home { min-height: 44px; padding: .65rem; border-radius: 8px; color: #263653; font-size: .8rem; font-weight: 700; }
.nav-home-links .nav-home[aria-current="page"] { background: #e8edff; }
.nav-home:focus-visible { outline: 2px solid #4259d7; outline-offset: -2px; }
.area-navigation .nav-home { font-weight: 700; color: #263653; }
.navigation-label { display: block; padding: .2rem .7rem .65rem; color: #647188; font-size: .65rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.work-area-selector { display: grid; gap: .15rem; }
.work-area-link, .work-area-static { display: flex; gap: .65rem; align-items: center; min-height: 44px; padding: .65rem .7rem; border-radius: 8px; color: #59667e; font-size: .79rem; font-weight: 600; line-height: 1.4; text-decoration: none; }
.work-area-link::before, .work-area-static::before { content: ''; flex: 0 0 6px; height: 6px; border-radius: 2px; background: #a8b3cf; }
.work-area-link:hover { background: #f0f2f8; color: #3448a6; }
.work-area-link.selected, .work-area-static { color: #3045a3; background: #e9edfb; }
.work-area-link.selected::before, .work-area-static::before { background: #5065c7; }
.area-caption { padding: .1rem .7rem .75rem; margin: .7rem 0 .35rem; color: #647188; font-size: .72rem; line-height: 1.65; border-bottom: 1px solid #e3e7f0; }
.nav-section-label { padding: .9rem .65rem .2rem; color: #647188; font-size: .63rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.nav-module-directory { display: block; padding: .75rem .65rem; color: #5165b4; font-size: .72rem; text-decoration: none; }
.area-navigation .favorites-group { padding-top: .65rem; margin-top: .85rem; border-top: 1px solid #e3e7f0; }
.navigation-result-list { display: grid; gap: .3rem; }
.navigation-result small { display: block; margin-top: .4rem; color: #647188; font-size: .65rem; line-height: 1.5; font-weight: 400; }
.navigation-directory { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.2rem; max-width: 1300px; padding: .5rem 0 2rem; }
.directory-card { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 1.6rem; border: 1px solid #e2e6f0; border-radius: 16px; background: #fff; box-shadow: 0 3px 14px rgba(35, 49, 86, .025); transition: border-color .15s, box-shadow .15s; }
.directory-card:hover { border-color: #bbc6e6; box-shadow: 0 6px 22px rgba(35, 49, 86, .06); }
.directory-eyebrow { display: block; padding: .28rem .55rem; color: #55658a; background: #f2f4fa; border: 1px solid #e9edf6; border-radius: 6px; font-size: .63rem; line-height: 1.5; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.directory-card h2 { margin: 1.05rem 0 .55rem; font-size: 1.12rem; line-height: 1.4; font-weight: 720; }
.directory-title { color: #26334e; text-decoration: none; }
.directory-title:hover { color: #4259bf; }
.directory-card > p { margin: 0 0 1.25rem; color: #647188; font-size: .82rem; line-height: 1.75; max-width: 46ch; }
.directory-shortcuts { display: flex; flex-wrap: wrap; gap: .2rem .65rem; margin-top: auto; padding: .2rem 0 1.1rem; }
.directory-link { display: inline-flex; align-items: center; min-height: 44px; color: #435aa8; font-size: .79rem; line-height: 1.5; text-decoration: none; }
.directory-shortcuts .directory-link { border-bottom: 1px solid #edf0f8; }
.directory-link:hover, .directory-browse:hover { color: #263e97; text-decoration: underline; }
.directory-browse { width: 100%; min-height: 44px; display: flex; align-items: center; padding-top: .8rem; border-top: 1px solid #edf0f6; color: #566baf; font-size: .76rem; font-weight: 600; text-decoration: none; }
.directory-title:focus-visible, .directory-link:focus-visible, .directory-browse:focus-visible { outline: 2px solid #4259d7; outline-offset: 3px; border-radius: 3px; }
.directory-section { padding: 1.25rem 1.5rem; border: 1px solid #e2e6f0; background: #fff; border-radius: 14px; }
.directory-section h2 { margin: .25rem 0 .8rem; color: #526078; font-size: .78rem; letter-spacing: .04em; }
.directory-page-list { display: grid; gap: .2rem; }
.directory-page-list a { padding: .45rem 0; border-top: 1px solid #f0f2f7; }
.directory-empty { grid-column: 1 / -1; padding: 2rem; border: 1px dashed #d8deeb; border-radius: 14px; background: #fbfcff; color: #68768e; line-height: 1.7; }
.directory-empty h2 { color: #34415b; font-size: 1.1rem; }
.navigation-close { position: absolute; right: .5rem; top: .7rem; width: 44px; height: 44px; font-size: 1.5rem; color: #64718c; background: transparent; }
.navigation-backdrop { position: fixed; inset: 0; z-index: 5; background: rgba(22, 33, 57, .38); border: 0; padding: 0; }
@media (max-width: 900px) {
  .app-shell.nav-open .sidebar { width: min(320px, calc(100vw - 36px)); max-width: 100%; height: 100dvh; }
  .app-shell.sidebar-collapsed.nav-open .sidebar { display: flex; }
  .nav-open .sidebar .brand { padding-right: 2.5rem; }
}
@media (max-width: 500px) {
  .navigation-directory { gap: .85rem; }
  .directory-card { padding: 1.25rem; border-radius: 13px; }
}
@media (prefers-reduced-motion: reduce) { .directory-card { transition: none; } }