/* Studio Shell v2 navigation layer.
   Keep the shell overflow-visible so the desktop edge toggle and collapsed
   flyouts can cross the sidebar boundary. Only primary navigation may consume
   and scroll the remaining vertical space. */
:root{--sidebar:248px}
.sidebar{display:flex;flex-direction:column;overflow:visible!important}
.sidebar-primary-nav{flex:1 1 auto!important;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:2px;scrollbar-width:thin}
.sidebar-system-nav{flex:0 0 auto!important;margin-top:6px}
.sidebar-toggle-row,.sidebar-account,.sidebar-head{flex:0 0 auto!important}
.sidebar-primary-nav::-webkit-scrollbar{width:5px}
.sidebar-primary-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}
.mobile-navigation{display:none}
/* Owner density polish 2026-09-27.
   Reduce only non-domain shell chrome: ~5% smaller expanded brand and a compact,
   balanced divider around the account footer. */
@media(min-width:701px){
  /* Viewport-height adaptive brand: preserve the current maximum on tall
     displays, then reclaim vertical space smoothly before the primary-nav
     needs its fallback scrollbar. */
  .sidebar:not(.collapsed) .sidebar-head{margin-bottom:clamp(7px,1.25dvh,14px)!important}
  .sidebar:not(.collapsed) .brand{margin-bottom:clamp(8px,1.35dvh,15px)!important;gap:clamp(3px,.55dvh,6px)!important}
  .sidebar:not(.collapsed) .brand-mark{min-height:clamp(76px,9.6dvh,95px)!important}
  .sidebar:not(.collapsed) .brand-mark img{
    width:clamp(78px,9.8dvh,99px)!important;
    height:clamp(78px,9.8dvh,99px)!important
  }
  .sidebar:not(.collapsed) .brand-copy>span{font-size:clamp(22px,2.55dvh,25.7px)!important}
  .sidebar:not(.collapsed) .brand-copy>small{font-size:clamp(9px,1.05dvh,11px)!important}
  .sidebar-account{margin-top:6px}
  .sidebar-user{padding-top:6px}
}


/* Shared navigation vocabulary. Identity rows, children and active location
   have intentionally different visual weights so the sidebar does not become
   a wall of identical pills. */
.nav-destination,.nav-section>summary,.mobile-nav-group,.mobile-nav-back{font:inherit}
.nav-icon{width:20px;min-width:20px;text-align:center;display:inline-grid;place-items:center}
.nav-section{position:relative;margin:1px 0}
.nav-section>summary{list-style:none;display:grid;grid-template-columns:20px minmax(0,1fr) 18px;gap:10px;align-items:center;min-height:40px;padding:8px 10px;border-radius:10px;color:#fff;opacity:.82;cursor:pointer;user-select:none}
.nav-section>summary::-webkit-details-marker{display:none}
.nav-section>summary::marker{content:""}
.nav-section>summary em,.nav-destination em{font-style:normal;min-width:0}
.nav-section>summary:hover,.nav-section>summary:focus-visible,.nav-section.active>summary{background:rgba(255,255,255,.1);opacity:1}
.nav-section>summary:focus-visible,.mobile-nav-group:focus-visible,.mobile-nav-back:focus-visible{outline:2px solid rgba(216,181,106,.9);outline-offset:1px}
.nav-chevron{justify-self:end;font-size:20px;line-height:1;opacity:.6;transition:transform .16s ease}
.nav-section[open]>summary .nav-chevron{transform:rotate(90deg)}
.nav-children{display:grid;gap:2px;margin:2px 4px 6px 29px;padding-left:8px;border-left:1px solid rgba(255,255,255,.16)}
.nav-children .nav-destination{min-height:34px;padding:7px 9px;font-size:13.25px;opacity:.68}
.nav-children .nav-destination .nav-icon{display:none}
.nav-children .nav-destination.active{background:rgba(216,181,106,.18);box-shadow:inset 2px 0 #d8b56a;opacity:1}
.sidebar-primary-nav>.nav-destination{min-height:40px}

/* Anchor the collapse affordance to the start of the SYSTEM section.
   The row itself has zero layout height, so it does not create an empty gap.
   Because it sits immediately before .sidebar-system-nav in the DOM, the
   control follows that section naturally when the primary navigation grows
   or shrinks. */
.sidebar-toggle-row{position:relative;height:0;min-height:0;overflow:visible;z-index:8}
.sidebar-toggle{position:absolute!important;right:-16px!important;top:12px!important;width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;display:grid!important;place-items:center;cursor:pointer;z-index:9;transform:none!important}
.sidebar.collapsed .sidebar-toggle{right:-16px!important}
.sidebar-toggle>span{display:block;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #d8b56a}
.sidebar.collapsed .sidebar-toggle>span{border-right:0;border-left:8px solid #d8b56a}
.sidebar-toggle:hover>span{filter:brightness(1.08)}
.sidebar-toggle:focus-visible{outline:2px solid rgba(216,181,106,.75);outline-offset:1px}

/* Collapsed desktop = icon rail. The JS interaction layer forces <details>
   open on pointer hover because browser closed-details rendering otherwise
   makes CSS-only hover flyouts unreliable. */
@media(min-width:701px){
  .sidebar.collapsed .sidebar-primary-nav{overflow:visible!important;padding-right:0}
  .sidebar.collapsed .sidebar-primary-nav>.nav-destination{justify-content:center;padding-left:8px;padding-right:8px}
  .sidebar.collapsed .sidebar-primary-nav>.nav-destination>em{display:none}
  .sidebar.collapsed .nav-section>summary{grid-template-columns:1fr;justify-items:center;padding-left:8px;padding-right:8px}
  .sidebar.collapsed .nav-section>summary>em,.sidebar.collapsed .nav-section>summary>.nav-chevron{display:none}
  .sidebar.collapsed .nav-section .nav-children{display:none;position:absolute;left:calc(100% + 16px);top:0;z-index:140;width:225px;margin:0;padding:8px;border:1px solid var(--line);border-radius:12px;background:#fffdf8;color:var(--ink);box-shadow:0 16px 40px rgba(20,45,38,.25)}
  .sidebar.collapsed .nav-section:hover .nav-children,.sidebar.collapsed .nav-section:focus-within .nav-children{display:grid}
  /* Invisible hit area spans the visual gap from the icon rail to the flyout,
     so a pointer can cross the gap without collapsing the group. */
  .sidebar.collapsed .nav-children::after{content:"";position:absolute;right:100%;top:0;width:16px;height:100%;pointer-events:auto}
  .sidebar.collapsed .nav-children::before{content:attr(aria-label);display:block;padding:5px 8px 7px;color:var(--green);font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
  .sidebar.collapsed .nav-children .nav-destination{display:flex!important;color:var(--ink)!important;opacity:1!important;font-size:13px!important;justify-content:flex-start!important;min-height:38px}
  .sidebar.collapsed .nav-children .nav-destination>em{display:block!important;color:inherit!important;font-size:inherit!important;width:auto!important;max-width:none!important;overflow:visible!important;visibility:visible!important;opacity:1!important}
  .sidebar.collapsed .nav-children .nav-destination.active{background:var(--soft)!important;box-shadow:inset 2px 0 var(--gold)}
}

/* Account footer remains the account control. */
.sidebar-account{position:relative;min-width:0}
.sidebar-user{list-style:none;cursor:pointer;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center;border-top:1px solid rgba(255,255,255,.12);padding:12px 5px 2px;min-width:0;border-radius:8px}
.sidebar-user::-webkit-details-marker{display:none}
.sidebar-user::marker{content:""}
.sidebar-user:hover{background:rgba(255,255,255,.06)}
.sidebar-user .user-avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.15);font-weight:800}
.sidebar-user .user-meta{min-width:0}
.sidebar-user .user-meta b,.sidebar-user .user-meta span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user .user-meta b{font-size:12px}
.sidebar-user .user-meta span{font-size:10.5px;opacity:.6}
.sidebar.collapsed .sidebar-user{grid-template-columns:1fr;justify-items:center;padding-left:0;padding-right:0}
.sidebar.collapsed .sidebar-user .user-meta{display:none}
.sidebar.collapsed .sidebar-user .user-avatar{margin:auto}
.account-popover{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:160;display:grid;gap:3px;padding:6px;background:#fffdf8;color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 35px rgba(20,45,38,.22);min-width:210px}
.sidebar-account:not([open]) .account-popover{display:none}
.sidebar.collapsed .account-popover{left:calc(100% + 16px);right:auto;bottom:0;width:220px}
.account-popover a,.account-popover button{display:grid!important;grid-template-columns:22px 1fr!important;gap:8px!important;align-items:center;width:100%;min-height:38px;padding:8px 9px!important;margin:0;border:0;border-radius:8px;background:transparent;color:var(--ink)!important;text-decoration:none;font:inherit;font-size:13px!important;text-align:left;opacity:1!important;cursor:pointer}
.account-popover a:hover,.account-popover button:hover{background:var(--soft)!important}
.account-popover a>span,.account-popover button>span{width:22px!important;text-align:center;color:var(--green)}
.account-popover em{font-style:normal}

/* Create launcher is a separate action surface, not navigation. */
.create-menu{padding:8px!important;min-width:245px!important;max-width:min(320px,calc(100vw - 24px))}
.create-menu-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 10px 7px;border-bottom:1px solid #ece8df}
.create-menu-title b{color:var(--green);font-size:14px}
.create-menu-title span{font-size:10.5px;color:var(--muted)}
.create-menu-group{display:grid;gap:2px;padding:7px 0 3px}
.create-menu-group+ .create-menu-group{border-top:1px solid #f0ece4}
.create-menu-group>small{padding:2px 10px 4px;color:var(--muted);font-size:9.5px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.create-menu .create-menu-group a,.create-menu .create-menu-group button{display:grid!important;grid-template-columns:22px 1fr;gap:7px;align-items:center;padding:8px 10px!important;border-radius:8px;font-size:13px!important;text-decoration:none;color:var(--ink)}
.create-menu .create-menu-group a:hover,.create-menu .create-menu-group button:hover{background:var(--soft)}
.create-menu .create-menu-group span{color:var(--green);font-weight:800}
.create-menu .create-menu-group em{font-style:normal}

@media(max-height:760px) and (min-width:701px){
  .sidebar{padding-top:12px;padding-bottom:12px}
  .brand{margin-bottom:10px}
  .sidebar a,.nav-section>summary{padding-top:7px;padding-bottom:7px}
  .nav-group{margin-top:9px}
}

/* Mobile root stays compact. Opening a group adds .mobile-subnav-open and gives
   the drill-down a small amount of extra width only where it is useful. */
@media(max-width:700px){
  .desktop-navigation{display:none!important}
  .mobile-navigation{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
  .sidebar{position:fixed!important;top:0!important;bottom:0!important;left:0!important;width:min(78vw,330px)!important;max-width:330px!important;height:100dvh!important;padding:14px 14px 10px!important;transform:translateX(-104%);transition:transform .2s ease,width .16s ease;box-shadow:18px 0 50px rgba(16,36,31,.28);z-index:120!important}
  .sidebar.open{transform:translateX(0)}
  .sidebar.collapsed{width:min(78vw,330px)!important;padding:14px 14px 10px!important}
  .sidebar.mobile-subnav-open,.sidebar.collapsed.mobile-subnav-open{width:min(82vw,350px)!important;max-width:350px!important}
  .drawer-scrim{z-index:110!important;background:rgba(19,32,29,.44)!important;backdrop-filter:blur(1px)}
  .mobile-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 3px 12px;border-bottom:1px solid rgba(255,255,255,.12)}
  .mobile-drawer-head>div{display:grid;gap:1px}
  .mobile-drawer-head b{font-size:15px}
  .mobile-drawer-head small{font-size:9.5px;opacity:.58;letter-spacing:.08em;text-transform:uppercase}
  .mobile-drawer-head button{width:38px;height:38px;border:0;border-radius:10px;background:rgba(255,255,255,.1);color:#fff;font-size:24px;line-height:1;cursor:pointer}
  .mobile-nav-root,.mobile-nav-subpanel{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 1px 5px}
  .mobile-current-path{display:grid;gap:2px;margin:0 3px 10px;padding:9px 10px;border:1px solid rgba(216,181,106,.25);border-radius:10px;background:rgba(216,181,106,.1)}
  .mobile-current-path small{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#e5c889}
  .mobile-current-path strong{font-size:12.5px;color:#fff}
  .mobile-nav-list{display:grid!important;gap:3px!important;justify-items:start}
  .mobile-nav-list .mobile-nav-destination,.mobile-nav-group,.mobile-nav-back{width:max-content;max-width:100%;display:grid!important;grid-template-columns:22px max-content 18px;gap:9px;align-items:center;justify-content:start;min-height:44px;padding:8px 10px!important;border:0;border-radius:10px;background:transparent;color:#fff!important;text-decoration:none;text-align:left;font-size:14px!important;line-height:1.25;opacity:.86;cursor:pointer}
  .mobile-nav-list .mobile-nav-destination{grid-template-columns:22px max-content;justify-content:start!important;font-size:14px!important}
  .mobile-nav-label{display:block!important;position:static!important;width:auto!important;max-width:100%!important;min-width:0!important;overflow:visible!important;clip:auto!important;visibility:visible!important;opacity:1!important;color:inherit!important;font-size:14px!important;line-height:1.25!important;font-style:normal!important;white-space:normal}
  .mobile-nav-list .mobile-nav-destination:hover,.mobile-nav-list .mobile-nav-destination.active,.mobile-nav-group:hover,.mobile-nav-group.active,.mobile-nav-back:hover{background:rgba(255,255,255,.11)!important;opacity:1}
  .mobile-nav-list .mobile-nav-destination.active,.mobile-nav-group.active{box-shadow:inset 3px 0 #d8b56a}
  .mobile-nav-group .nav-chevron{transform:none!important;display:block!important;color:#e5c889;font-size:18px}
  .mobile-nav-subpanel .mobile-nav-list{justify-items:stretch}
  .mobile-nav-subpanel .mobile-nav-list .mobile-nav-destination{width:100%!important;grid-template-columns:22px minmax(0,1fr)}
  .mobile-nav-subpanel .mobile-nav-list .mobile-nav-destination.active{background:rgba(216,181,106,.17)!important;box-shadow:inset 3px 0 #d8b56a;opacity:1!important}
  .mobile-system-link{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12)}
  .mobile-system-link .mobile-nav-destination{width:max-content!important;max-width:100%;display:grid!important;grid-template-columns:22px max-content;gap:9px;align-items:center;justify-content:start!important;min-height:44px;padding:8px 10px!important;color:#fff!important;text-decoration:none;border-radius:10px;opacity:.8;font-size:14px!important}
  .mobile-system-link .mobile-nav-destination .mobile-nav-label{font-size:14px!important}
  .mobile-system-link .mobile-nav-destination.active,.mobile-system-link .mobile-nav-destination:hover{background:rgba(255,255,255,.1);opacity:1}
  .mobile-nav-back{width:100%!important;grid-template-columns:22px minmax(0,1fr);margin-bottom:7px;background:rgba(255,255,255,.08);opacity:1}
  .mobile-nav-back>span:first-child{font-size:22px;color:#d8b56a}
  .sidebar-account{flex:0 0 auto;margin-top:auto}
  .sidebar-account .account-popover,.sidebar.collapsed .account-popover{left:0;right:0;bottom:calc(100% + 8px);width:auto}
  .sidebar-user,.sidebar.collapsed .sidebar-user{grid-template-columns:34px minmax(0,1fr);justify-items:stretch;padding-left:5px;padding-right:5px}
  .sidebar.collapsed .sidebar-user .user-meta{display:block}
  .sidebar.collapsed .sidebar-user .user-avatar{margin:0}
  .create-menu{right:12px!important;top:76px!important;max-height:70dvh;overflow:auto}
}