/* P-120 Navigation Architecture v2
   Ecosystem navigation only. Does not alter assessment, scoring, or mobile bottom navigation. */

:root{
  --ecosystem-panel-bg:color-mix(in srgb,var(--paper,#f6f4ed) 94%,transparent);
  --ecosystem-border:color-mix(in srgb,var(--ink,#171715) 18%,transparent);
  --ecosystem-soft:color-mix(in srgb,var(--ink,#171715) 4%,transparent);
  --ecosystem-accent:#5f8f8a;
}

/* Desktop ecosystem entry lives inside the existing top navigation. */
.ecosystem-nav-v2{position:relative;display:inline-flex;align-items:center}
.ecosystem-nav-v2 .ecosystem-trigger{display:inline-flex;align-items:center;gap:6px}
.ecosystem-nav-v2 .ecosystem-trigger:after{content:"";width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.62;transition:transform .18s ease}
.ecosystem-nav-v2.is-open .ecosystem-trigger:after{transform:rotate(225deg) translate(-1px,-1px)}

.ecosystem-panel-v2{
  position:absolute;z-index:120;top:calc(100% + 13px);right:-18px;
  width:min(560px,calc(100vw - 40px));padding:14px;
  border:1px solid var(--ecosystem-border);border-radius:22px;
  background:var(--ecosystem-panel-bg);box-shadow:0 28px 70px rgba(20,22,20,.18);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  opacity:0;visibility:hidden;transform:translateY(-7px) scale(.985);transform-origin:90% 0;
  transition:opacity .18s ease,transform .2s ease,visibility .18s;
}
.ecosystem-nav-v2.is-open .ecosystem-panel-v2{opacity:1;visibility:visible;transform:none}
.ecosystem-panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:3px 5px 11px;border-bottom:1px solid var(--ecosystem-border)}
.ecosystem-panel-head strong{font-family:"Noto Serif",Georgia,serif;font-size:18px;font-weight:600;letter-spacing:-.015em}
.ecosystem-panel-head span{font-size:9px;text-transform:uppercase;letter-spacing:.13em;font-weight:800;color:var(--muted)}
.ecosystem-grid-v2{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:10px}
.ecosystem-column-v2{display:grid;gap:7px;align-content:start}
.ecosystem-column-label{padding:4px 7px 2px;font-size:9px;line-height:1.2;text-transform:uppercase;letter-spacing:.15em;font-weight:850;color:var(--muted)}
.ecosystem-item-v2{appearance:none;width:100%;border:1px solid transparent;background:transparent;color:var(--ink);border-radius:15px;padding:12px 12px;text-align:left;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.ecosystem-item-v2:hover:not([aria-disabled="true"]){background:var(--ecosystem-soft);border-color:var(--ecosystem-border);transform:translateY(-1px)}
.ecosystem-item-copy{min-width:0}
.ecosystem-item-title{display:block;font-size:13px;font-weight:760;line-height:1.25}
.ecosystem-item-note{display:block;margin-top:4px;color:var(--muted);font-size:10px;font-weight:580;line-height:1.35}
.ecosystem-item-status{flex:0 0 auto;margin-top:1px;border:1px solid var(--ecosystem-border);border-radius:999px;padding:4px 6px;font-size:8px;text-transform:uppercase;letter-spacing:.09em;font-weight:850;color:var(--muted);white-space:nowrap}
.ecosystem-item-v2[aria-disabled="true"]{cursor:default;opacity:.62}
.ecosystem-item-v2[aria-disabled="true"] .ecosystem-item-title:after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;margin-left:7px;vertical-align:middle;background:var(--ecosystem-accent);opacity:.75}

/* Extended Research Set gets a home in Explore, so the old extra desktop/mobile entries are suppressed. */
html.nav-architecture-v2-ready .topnav > .extended-navlink{display:none!important}
html.nav-architecture-v2-ready .mobile-menu-body .extended-mobile-menu-link{display:none!important}

/* Mobile information architecture. Existing drawer remains the shell. */
.ecosystem-mobile-group-v2{display:grid;gap:8px}
.ecosystem-mobile-group-v2 .ecosystem-mobile-section-label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:2px}
.ecosystem-mobile-group-v2 .ecosystem-mobile-section-label > span:first-child{font-size:10px;text-transform:uppercase;letter-spacing:.14em;font-weight:850;color:var(--muted)}
.ecosystem-mobile-section-count{font-size:9px;color:var(--muted);opacity:.72}
.ecosystem-mobile-link-v2{position:relative}
.ecosystem-mobile-link-v2 .ecosystem-mobile-status{border:1px solid var(--ecosystem-border);border-radius:999px;padding:4px 7px;font-size:8px;line-height:1;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:850;white-space:nowrap}
.ecosystem-mobile-link-v2[aria-disabled="true"]{opacity:.66;cursor:default}
.ecosystem-mobile-link-v2[aria-disabled="true"]:active{transform:none}

/* Give the drawer groups a clearer editorial rhythm without changing its mechanics. */
html.nav-architecture-v2-ready .mobile-menu-body{gap:20px}
html.nav-architecture-v2-ready .mobile-menu-group > .eyebrow{font-size:10px;letter-spacing:.145em}
html.nav-architecture-v2-ready .chapter-mobile-group{margin-top:0}
html.nav-architecture-v2-ready .p120-language-mobile-group{margin-top:0}

/* Android/mobile drawer stability guard.
   The legacy v1.3 drawer uses entrance animations with opacity:0 as the from-state.
   Dynamic ecosystem/language/chapter groups can be observed and re-evaluated while
   the drawer is open, which on some Chromium/Android builds restarts those animations
   and leaves real, clickable rows visually transparent. The drawer is now content-led:
   fixed auto rows, no per-row entrance animation, stable touch targets. */
@media(max-width:1080px){
  html.nav-architecture-v2-ready .mobile-menu{
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
  }
  html.nav-architecture-v2-ready .mobile-menu-body{
    display:grid;
    grid-auto-rows:max-content;
    align-content:start;
    min-height:0;
  }
  html.nav-architecture-v2-ready .mobile-menu-group,
  html.nav-architecture-v2-ready .ecosystem-mobile-group-v2,
  html.nav-architecture-v2-ready .chapter-mobile-group,
  html.nav-architecture-v2-ready .p120-language-mobile-group{
    height:auto!important;
    min-height:0!important;
    align-content:start!important;
  }
  body.mobile-menu-open html.nav-architecture-v2-ready .mobile-menu-group > *,
  body.mobile-menu-open .nav-architecture-v2-ready .mobile-menu-group > *,
  html.nav-architecture-v2-ready body.mobile-menu-open .mobile-menu-group > *,
  html.nav-architecture-v2-ready body.mobile-menu-open .mobile-menu-progress{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
  html.nav-architecture-v2-ready body.mobile-menu-open .mobile-menu-link,
  html.nav-architecture-v2-ready body.mobile-menu-open .mobile-menu-action,
  html.nav-architecture-v2-ready body.mobile-menu-open .ecosystem-mobile-link-v2{
    visibility:visible!important;
    pointer-events:auto;
  }
  html.nav-architecture-v2-ready body.mobile-menu-open [aria-disabled="true"]{
    pointer-events:none;
  }
}

/* Mobile header control polish — one optical geometry across the public app.
   Legacy Mobile UX positioned the three absolute bars vertically but did not anchor
   them horizontally. Chromium could therefore resolve their static x-position off-centre.
   Keep the 48px touch target; only normalize the glyph and the calm hamburger → close motion. */
@media(max-width:820px){
  .mobile-menu-toggle{
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
    padding:0;
    display:inline-grid;
    place-items:center;
    flex:0 0 48px;
  }
  .mobile-menu-toggle span{
    width:24px;
    height:2px;
    left:50%;
    top:50%;
    margin-left:-12px;
    margin-top:-1px;
    border-radius:999px;
    transform-origin:center;
    transition:transform .18s cubic-bezier(.2,.7,.2,1),opacity .14s ease,background .18s ease;
  }
  .mobile-menu-toggle span:nth-child(1){top:50%;transform:translateY(-7px)}
  .mobile-menu-toggle span:nth-child(2){top:50%;transform:none}
  .mobile-menu-toggle span:nth-child(3){top:50%;transform:translateY(7px)}
  body.mobile-menu-open .mobile-menu-toggle span:nth-child(1){top:50%;transform:rotate(45deg)}
  body.mobile-menu-open .mobile-menu-toggle span:nth-child(2){top:50%;opacity:0;transform:scaleX(.35)}
  body.mobile-menu-open .mobile-menu-toggle span:nth-child(3){top:50%;transform:rotate(-45deg)}
}

body[data-theme='graphite']{
  --ecosystem-panel-bg:rgba(29,27,24,.96);
  --ecosystem-border:rgba(242,238,229,.16);
  --ecosystem-soft:rgba(255,255,255,.055);
}
body[data-theme='museum']{
  --ecosystem-panel-bg:rgba(244,241,229,.96);
  --ecosystem-border:rgba(47,125,120,.23);
  --ecosystem-soft:rgba(47,125,120,.065);
  --ecosystem-accent:#2f7d78;
}
body[data-theme='ivory']{
  --ecosystem-panel-bg:rgba(247,242,230,.97);
  --ecosystem-border:rgba(56,72,67,.24);
  --ecosystem-soft:rgba(56,72,67,.055);
}

@media(max-width:1080px){.ecosystem-nav-v2{display:none!important}}
@media(max-width:620px){
  .ecosystem-mobile-group-v2 .mobile-menu-link{padding:13px 13px}
  .ecosystem-mobile-group-v2 .mobile-menu-link small{max-width:245px}
}
@media(prefers-reduced-motion:reduce){
  .ecosystem-panel-v2,.ecosystem-nav-v2 .ecosystem-trigger:after,.ecosystem-item-v2,.mobile-menu-toggle span{transition:none!important}
}