/* Passport navigation. All shades come from the existing C4 theme. */
:root{--sidebar-ink:var(--brand-hover);--sidebar-topline:color-mix(in srgb,var(--text) 4%,transparent);--sidebar-direction:1;--sidebar-row:var(--surface-raised);--sidebar-icon:color-mix(in srgb,var(--text) 7%,var(--surface-raised));--sidebar-selected:var(--mp);--sidebar-selected-ink:var(--mw);--sidebar-row-shadow:0 2px 3px color-mix(in srgb,var(--text) 10%,transparent),0 8px 16px -10px color-mix(in srgb,var(--text) 30%,transparent)}
:root[data-theme=dark]{--sidebar-ink:var(--brand);--sidebar-topline:color-mix(in srgb,var(--text) 6%,transparent);--sidebar-row-shadow:0 2px 4px color-mix(in srgb,var(--bg) 70%,transparent),0 10px 18px -10px color-mix(in srgb,var(--bg) 95%,transparent)}
:root[dir=rtl]{--sidebar-direction:-1}
#main:has(.app-shell){animation:none;transform:none}
.app-shell{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:stretch;height:calc(100dvh - var(--passport-offset,132px));min-height:0;position:relative}
.app-shell>.app-sidebar{display:flex;flex-direction:column;width:264px;min-width:0;min-height:0;height:100%;padding:24px 12px 12px;position:relative;top:auto;overflow:visible;z-index:30;border:0;border-inline-end:1px solid color-mix(in srgb,var(--line) 60%,transparent);background:linear-gradient(to bottom,color-mix(in srgb,var(--surface-raised) 3%,var(--surface)),var(--surface));box-shadow:inset 0 1px var(--sidebar-topline);transition:width 200ms ease-out}
.sidebar-header{display:flex;align-items:center;gap:10px;flex-shrink:0;padding-inline:8px;margin-block-end:24px;min-height:44px;position:relative}
.sidebar-header>img{width:28px;height:28px;object-fit:contain;flex-shrink:0}
.sidebar-brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.sidebar-logo{width:28px;height:28px;object-fit:contain;flex-shrink:0}
.app-sidebar .app-sidebar-title{display:block;min-width:0;padding:0;font-size:9px;line-height:1.6;letter-spacing:.12em;color:var(--muted);font-weight:600}
.sidebar-collapse,.sidebar-close,.passport-mobilebar button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:44px;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--bg);color:var(--muted)}
.sidebar-collapse{margin-inline-start:auto;border-color:transparent;background:none}
.sidebar-collapse .icon{transform:rotate(calc(90deg * var(--sidebar-direction)));transition:transform 200ms ease-out}
.sidebar-close,.passport-mobilebar,.sidebar-backdrop{display:none}
.app-sidebar .sidebar-nav{display:flex;flex-direction:column;position:relative;isolation:isolate;flex:1;min-height:0;width:auto;gap:10px;padding:4px 4px 16px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 30%,transparent) transparent}
.app-sidebar .sidebar-nav a{display:flex;align-items:center;flex-shrink:0;min-height:56px;padding:8px;padding-inline-end:12px;gap:10px;position:relative;border:1px solid var(--line);border-radius:var(--rp);font-size:14px;line-height:1.35;font-weight:600;letter-spacing:-.015em;color:var(--text);background:var(--sidebar-row);box-shadow:var(--sidebar-row-shadow);white-space:normal;transition:background-color 160ms ease-out,color 160ms ease-out,transform 160ms ease-out}
.sidebar-label{min-width:0;overflow-wrap:break-word}
.app-sidebar .sidebar-nav a>.icon{box-sizing:border-box;width:34px;height:34px;padding:8px;border-radius:var(--radius-control);background:var(--sidebar-icon);stroke-width:1.5;color:var(--text);transform:none;transition:transform 160ms ease-out,color 160ms ease-out,background-color 160ms ease-out}
.app-sidebar .sidebar-nav a.active,.app-sidebar .sidebar-nav a.active:hover{color:var(--sidebar-selected-ink);background:transparent;border-color:transparent;box-shadow:var(--sidebar-row-shadow),inset 0 1px color-mix(in srgb,var(--mw) 16%,transparent);font-weight:700}
.app-sidebar .sidebar-nav a.active>.icon{color:var(--sidebar-selected-ink);background:color-mix(in srgb,var(--mw) 18%,transparent)}
.sidebar-active{position:absolute;inset-inline:4px;top:0;height:var(--sidebar-active-h,56px);z-index:-1;pointer-events:none;overflow:hidden;border-radius:var(--rp);background:var(--sidebar-selected);transform:translateY(var(--sidebar-active-y,4px));transition:transform 220ms cubic-bezier(.2,.8,.2,1)}
.sidebar-nav:not(.has-active) .sidebar-active{opacity:0}
.app-sidebar .sidebar-nav:not(.has-active) a.active{background:var(--sidebar-selected)}
.app-sidebar :is(a,button):focus-visible,.passport-mobilebar button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sidebar-profile{position:relative;flex-shrink:0;margin-block-start:12px;border-block-start:1px solid var(--line);padding-block-start:12px}
.app-sidebar .app-identity{display:flex;align-items:center;width:100%;min-height:64px;gap:10px;margin:0;padding:10px 8px;border:0;border-radius:var(--radius-control);background:none;color:var(--text);text-align:start;transition:background-color 160ms ease-out,transform 160ms ease-out}
.app-identity .avatar{width:36px;height:36px;box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 30%,transparent)}
.identity-copy{flex:1;min-width:0}
.app-identity strong{font-size:13px;font-weight:600;overflow-wrap:anywhere}
.app-identity small{display:block;font-size:11px;line-height:1.5;color:var(--muted)}
.app-identity>.icon{width:18px;height:18px;color:var(--muted)}
.sidebar-profile-menu{position:absolute;bottom:calc(100% + 8px);inset-inline:0;z-index:3;padding:6px;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-rest)}
.sidebar-profile-menu[hidden]{display:none}
.sidebar-profile-menu :is(a,button){display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 12px;font-size:12px;text-align:start;border:0;border-radius:var(--radius-control);background:none;color:var(--text)}
.sidebar-profile-menu p{margin:6px 12px;font-size:10px;color:var(--muted)}
.app-shell>.app-content{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
@media(hover:hover){.app-sidebar .sidebar-nav a:hover:not(.active){background:color-mix(in srgb,var(--brand) 4%,var(--sidebar-row));color:var(--sidebar-ink);transform:translateY(-1px)}.sidebar-profile-menu :is(a,button):hover,.sidebar-collapse:hover,.sidebar-close:hover{background:color-mix(in srgb,var(--brand) 7%,transparent);color:var(--sidebar-ink)}.app-sidebar .sidebar-nav a:hover>.icon{transform:translateX(calc(2px * var(--sidebar-direction)))}.app-sidebar .sidebar-nav a:hover:not(.active)>.icon{color:var(--sidebar-ink);background:color-mix(in srgb,var(--brand) 8%,var(--sidebar-row))}.app-identity:hover{background:color-mix(in srgb,var(--brand) 6%,transparent);transform:translateY(-1px)}}
.app-sidebar .sidebar-nav a:active{transform:translateY(1px)}
@media(min-width:981px){body:has(.app-shell){overflow:hidden}.sidebar-collapsed>.app-sidebar{width:72px;padding-inline:8px}.sidebar-collapsed .sidebar-header{padding:0;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:16px}.sidebar-collapsed .sidebar-brand{flex:none;justify-content:center;width:100%}.sidebar-collapsed .app-sidebar-title{display:none}.sidebar-collapsed .sidebar-collapse{margin:0}.sidebar-collapsed .sidebar-collapse .icon{transform:rotate(calc(-90deg * var(--sidebar-direction)))}.sidebar-collapsed .sidebar-nav{padding-inline:2px;overflow-x:visible}.sidebar-collapsed .sidebar-nav a{justify-content:center;min-height:52px;padding-inline:0}.sidebar-collapsed .sidebar-label{position:absolute;inset-inline-start:calc(100% + 12px);padding:8px 12px;max-width:240px;white-space:nowrap;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface-raised);color:var(--text);box-shadow:var(--shadow-rest);opacity:0;visibility:hidden;pointer-events:none;z-index:4;transition:opacity 160ms ease-out}.sidebar-collapsed .sidebar-active{inset-inline:2px}.sidebar-collapsed .app-identity{justify-content:center;padding-inline:0}.sidebar-collapsed .identity-copy,.sidebar-collapsed .app-identity>.icon{display:none}.sidebar-collapsed .sidebar-profile-menu{width:230px;inset-inline-start:0;inset-inline-end:auto}}
@media(max-width:980px){.app-shell{display:block;height:auto;min-height:calc(100dvh - 120px)}.app-shell>.app-content{height:auto;overflow:visible;padding:24px 20px 48px}.passport-mobilebar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-block-end:1px solid var(--line);background:var(--bg)}.passport-mobilebar button{gap:10px;font-size:12px;color:var(--text)}.passport-mobilebar .icon{width:18px;height:18px}.app-shell>.app-sidebar{position:fixed;inset-block:0;inset-inline-start:0;top:0;width:min(320px,calc(100vw - 32px));height:100dvh;padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom));z-index:140;transform:translateX(calc(-102% * var(--sidebar-direction)));visibility:hidden;transition:transform 220ms cubic-bezier(.2,.8,.2,1),visibility 0s 220ms;touch-action:pan-y}.sidebar-open>.app-sidebar{visibility:visible;transform:translateX(0);transition-delay:0s}.sidebar-close{display:inline-flex;margin-inline-start:auto}.sidebar-collapse{display:none}.sidebar-open>.sidebar-backdrop{display:block;position:fixed;inset:0;width:100%;height:100%;z-index:139;border:0;background:color-mix(in srgb,var(--navy) 55%,transparent)}.app-sidebar .app-sidebar-title{display:block}.app-sidebar .app-identity{display:flex}.app-sidebar .sidebar-nav{display:flex;width:auto}.app-sidebar .sidebar-nav a{min-height:56px;font-size:14px;gap:10px;padding:8px;padding-inline-end:12px;border-radius:var(--rp)}.app-sidebar .sidebar-nav a>.icon{width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){.app-sidebar,.sidebar-active,.app-sidebar *{transition:none!important}.app-sidebar .sidebar-nav a,.app-sidebar .sidebar-nav a>.icon,.app-identity:hover{transform:none!important}}

.sidebar-tooltip{position:fixed;z-index:145;display:block;max-width:260px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface-raised);color:var(--text);box-shadow:var(--shadow-rest);font-size:12px;line-height:1.5;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 160ms ease-out}.sidebar-tooltip[data-open=true]{opacity:1;visibility:visible}@media(prefers-reduced-motion:reduce){.sidebar-tooltip{transition:none}}

:root[dir=rtl] .app-sidebar{border:0;border-inline-end:1px solid color-mix(in srgb,var(--line) 60%,transparent)}

.passport-current-page{min-width:0;font-size:12px;line-height:1.5;font-weight:600;color:var(--muted);text-align:end;overflow-wrap:anywhere}
@media(max-width:980px){.passport-mobilebar button{min-width:0;flex-shrink:0}.passport-mobilebar button span{min-width:0;white-space:normal;text-align:start}}

/* Slim pill rows with light outline glyphs inside quiet tiles. */
.app-sidebar .sidebar-nav a{min-height:48px;padding-block:6px;border:1px solid var(--line);box-shadow:var(--sidebar-row-shadow);border-radius:var(--rp);font-size:15px;font-weight:600}
.app-sidebar .sidebar-nav a>.icon{width:28px;height:28px;padding:5px;border-radius:9px;background:var(--sidebar-icon);stroke-width:1.5}
.app-sidebar .sidebar-nav a.active>.icon{background:color-mix(in srgb,var(--mw) 20%,transparent)}
.app-sidebar .sidebar-active{border-radius:var(--rp)}
