/* Shared geometry; hosts retain their own palette, especially Portfolio. */
.app-navigation{display:flex;align-items:center;gap:6px;min-width:0;flex-shrink:0;font:inherit;color:inherit;--app-nav-surface:#fff;--app-nav-ink:#25312e;--app-nav-line:#cbd3cf;--app-nav-hover:#f0f3f2;--app-nav-accent:#315e4c}
.portfolio-header .app-navigation,.directory-header .app-navigation{--app-nav-surface:#25333e;--app-nav-ink:#f3f5f7;--app-nav-line:#62717e;--app-nav-hover:#344552;--app-nav-accent:#bed6ee}
.topnav .app-navigation{color:#eef9f1}
.topnav>.app-navigation{order:2;flex-shrink:0}.topnav>.topnav-brand,.topnav>div:not(.topnav-actions):not(.topnav-search){order:1}.topnav>.topnav-actions{order:3}.topnav>.topnav-search{order:4}
.app-navigation *{box-sizing:border-box}
.app-nav-menu>summary{display:flex;align-items:center;gap:7px;min-height:36px;max-width:220px;padding:6px 10px;border:1px solid currentColor;border-radius:8px;color:inherit;background:transparent;font:inherit;font-size:13px;text-decoration:none;cursor:pointer;list-style:none;white-space:nowrap}
.app-nav-menu>summary::-webkit-details-marker{display:none}
.app-nav-menu>summary span:first-child{overflow:hidden;text-overflow:ellipsis}
.app-nav-popup{position:fixed;z-index:30000;width:260px;max-width:calc(100vw - 16px);max-height:75vh;max-height:75dvh;overflow:auto;padding:8px;background:var(--app-nav-surface);color:var(--app-nav-ink);border:1px solid var(--app-nav-line);border-radius:10px;box-shadow:0 8px 26px #0003;text-align:left;white-space:normal}
.app-nav-popup>strong{display:block;padding:8px;font-size:12px;opacity:.75}
.app-navigation .app-nav-popup>a,.app-nav-popup>button{display:block;width:100%;min-height:40px;padding:10px;border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;font-size:14px;text-align:left;text-decoration:none;cursor:pointer;line-height:1.3}
.app-nav-popup>a:hover,.app-nav-popup>button:hover,.app-nav-popup>[aria-current=page]{background:var(--app-nav-hover);color:var(--app-nav-ink)}
.app-navigation :focus-visible,.app-tools :focus-visible{outline:2px solid var(--app-nav-accent);outline-offset:3px}
.app-navigation [hidden]{display:none!important}
.app-navigation [data-app-more-workspaces]>a{display:block;padding:10px 10px 10px 22px;min-height:40px;border-radius:6px;color:inherit;font-size:14px;line-height:1.3;text-decoration:none}
.app-navigation [data-app-more-workspaces]>a:hover{background:var(--app-nav-hover)}
.app-tools{width:min(760px,calc(100vw - 24px));max-height:85vh;max-height:85dvh;overflow:auto;padding:20px;border:1px solid var(--app-nav-line);border-radius:12px;background:var(--app-nav-surface);color:var(--app-nav-ink);font:14px/1.5 system-ui,sans-serif;text-align:left;white-space:normal}
.app-tools::backdrop{background:#0007}
.app-tools header{display:flex;align-items:center;justify-content:space-between;gap:12px}.app-tools h2{font-size:20px;margin:0}.app-tools h3{font-size:15px;margin:20px 0 8px}
.app-tools button,.app-tools input,.app-tools select{font:inherit;color:inherit;background:var(--app-nav-surface);border:1px solid var(--app-nav-line);border-radius:6px;padding:9px;min-height:40px}.app-tools label{display:block;margin-top:12px}.app-tools input,.app-tools select{width:100%}
.app-tools section>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.app-tools a{display:block;padding:12px;color:inherit;border:1px solid var(--app-nav-line);border-radius:8px;text-decoration:none}.app-tools a:hover{background:var(--app-nav-hover)}.app-tools a small{display:block;opacity:.8;line-height:1.4;margin-top:4px}.app-tools p{white-space:normal}
/* Header fragments join existing shells; they do not introduce another page scroll owner. */
.agv3-brand-row:has(.app-navigation){gap:10px}.portfolio-brand-area:has(.app-navigation){flex-wrap:wrap}.portfolio-header:has(.app-navigation){grid-template-columns:auto minmax(0,1fr) auto}
.navbar-inner:has(.app-navigation){overflow:visible!important}.pi-navbar-title:has(.app-navigation){overflow:visible!important;display:flex;align-items:center;gap:8px}.navbar:has(.app-navigation){z-index:1200}.pi-navbar-title:has(.app-navigation)>span{display:none}
.mu-back-float:has(.app-navigation){display:flex;align-items:center;gap:8px}.dm-topbar>.app-navigation{pointer-events:auto;align-self:start;background:#f5f8f4;color:#25312e;padding:5px;border-radius:8px}
.app-nav-context{font-size:13px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:760px){.app-nav-menu>summary{min-height:40px;padding:6px 8px;max-width:165px;font-size:12px}.app-tools section>div{grid-template-columns:1fr}.agv3-topbar:has(.app-navigation){flex-wrap:wrap;height:auto;gap:5px}.portfolio-header:has(.app-navigation){display:flex;flex-wrap:wrap}.portfolio-header .portfolio-brand-area{width:100%}.portfolio-tabs{min-width:0;flex:1}.pi-navbar-title:has(.app-navigation) .brand-lockup{display:none}.pi-navbar-title:has(.app-navigation){margin-left:8px!important}.app-nav-context{max-width:130px}}
/* AGV3 has a strict single-row header. Secondary actions live in the toolbar
   or its menu; labels compress before the header consumes another map row. */
#agTopbar:has(.app-navigation){display:flex;flex-flow:row nowrap!important;align-items:center;gap:8px;height:52px;min-height:52px;padding:4px 10px;overflow:visible}
#agTopbar:has(.app-navigation) .agv3-brand-area{flex:0 0 auto;width:auto;min-width:0}
#agTopbar:has(.app-navigation) .agv3-brand-row{flex-wrap:nowrap;gap:8px;min-width:0}
#agTopbar:has(.app-navigation) .agv3-top-actions{flex:1 1 auto;min-width:0;width:auto;flex-wrap:nowrap;justify-content:flex-end;gap:6px}
#agTopbar:has(.app-navigation) .agv3-farm-btn{min-width:0;max-width:240px;flex:0 1 auto}
#agTopbar:has(.app-navigation) .farm-btn-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#agTopbar:has(.app-navigation) .farm-btn-code{display:none}

.agv3-local-actions{display:flex;align-items:center;gap:5px}.agv3-local-actions #agGlobalCaptureModes{position:relative}
.agv3-local-actions #agCaptureModeMenu{z-index:25000;top:auto;bottom:calc(100% + 8px)}
.app-nav-popup>label{display:grid;gap:6px;padding:10px;font-size:13px}.app-nav-popup select{width:100%;font:inherit;color:var(--app-nav-ink);background:var(--app-nav-surface);border:1px solid var(--app-nav-line);padding:8px;border-radius:6px}
.app-nav-popup[popover]{margin:0;right:auto;bottom:auto}
.agv3-toolbar:has(.agv3-local-actions){grid-template-columns:auto minmax(60px,1fr) auto auto;flex-wrap:nowrap}
.agv3-local-actions .agv3-shell-icon-btn{width:34px;min-width:34px;height:34px;padding:7px}
.agv3-local-actions .agv3-ui-icon-label{display:none}
.agv3-local-actions .agv3-ui-icon{flex:0 0 20px;width:20px;height:20px}
.agv3-local-actions .agv3-mode-btn{min-width:95px;width:95px;flex:0 0 auto}
@media(max-width:760px){.agv3-toolbar:has(.agv3-local-actions){grid-template-columns:auto minmax(40px,1fr) auto}}
@media(max-width:420px){
 .app-navigation[data-workspace=registration] [data-app-workspace-label]{font-size:0}
 .app-navigation[data-workspace=registration] [data-app-workspace-label]::after{content:attr(data-short);font-size:12px}
 .portfolio-header [data-app-workspace-label]{font-size:0}
 .portfolio-header [data-app-workspace-label]::after{content:attr(data-short);font-size:12px}
 .portfolio-header .portfolio-brand [data-workspace-icon]{display:none}
 .portfolio-header .portfolio-brand-area{gap:6px;flex-wrap:nowrap}
 .portfolio-header .portfolio-brand .brand-lockup{font-size:16px}
}
@media(max-width:760px){
 .navbar-inner:has(.app-navigation)>.right[data-app-nav-proxied]{display:none}
 .navbar-inner:has(.app-navigation) .pi-navbar-title{max-width:calc(100% - 16px);width:calc(100% - 16px)}
 .navbar-inner .app-navigation{width:100%;min-width:0}

 .navbar-inner .app-nav-context{margin-left:auto;min-width:0;max-width:125px;flex:1 1 50px}
 html:has(.topnav>.app-navigation){--nav-h:108px}
 .topnav:has(>.app-navigation){flex-wrap:wrap;align-content:center;padding:6px 12px;gap:6px 10px}
 .topnav>.app-navigation{margin-left:auto}
 .topnav:has(>.app-navigation) .topnav-actions{width:100%;justify-content:flex-end;gap:8px}
 .topnav:has(>.app-navigation) .brand-lockup__badge{display:none}
 .topnav:has(>.app-navigation) .brand-lockup__wordmark{font-size:16px}
 .topnav:has(>.app-navigation) .topnav-brand{font-size:14px;max-width:170px}
 .register-site-head-inner:has(.app-navigation),.pricing-site-head-inner:has(.app-navigation){flex-wrap:wrap;gap:8px;padding:8px 0}
 .register-site-head-inner .app-navigation,.pricing-site-head-inner .app-navigation{margin-left:auto}
 .register-site-head-inner:has(.app-navigation) .brand-lockup__mark,.pricing-site-head-inner:has(.app-navigation) .brand-lockup__mark{display:none}
 .register-site-head-inner:has(.app-navigation) .register-site-mode,.pricing-site-head-inner:has(.app-navigation) .pricing-site-mode{max-width:none;width:100%;text-align:left}
 #agTopbar:has(.app-navigation){gap:4px;padding:4px 6px}
 #agTopbar:has(.app-navigation) .agv3-brand-row{gap:5px}
 #agTopbar:has(.app-navigation) .brand-lockup{font-size:18px}
 #agTopbar:has(.app-navigation) .brand-lockup__badge{display:none}
 #agTopbar:has(.app-navigation) [data-app-workspace-label]{font-size:0}
 #agTopbar:has(.app-navigation) [data-app-workspace-label]::after{content:'App';font-size:12px}
 #agTopbar:has(.app-navigation) .app-nav-menu>summary{padding:5px 7px;min-height:40px}
 #agTopbar:has(.app-navigation) .agv3-farm-btn{max-width:125px;flex:1 1 70px;padding:6px;min-height:40px}
 #agTopbar:has(.app-navigation) .agv3-farm-btn-icon{display:none}
 #agTopbar:has(.app-navigation) .agv3-top-actions{gap:4px}
 #agTopbar:has(.app-navigation) #agHelpBtn{display:none}
 #agTopbar:has(.app-navigation) #agGlobalCaptureModes{display:none}
 #agTopbar:has(.app-navigation) #agNotificationsBtn,#agTopbar:has(.app-navigation) #agShellSettingsBtn{flex:0 0 34px;width:34px;min-width:34px;min-height:40px;padding:7px}
 .agv3-local-actions{display:none}
 #agTopbar:has(.app-navigation) #agHeaderPhotoImportLink,#agTopbar:has(.app-navigation) #agRefreshBtn{display:none}
}
/* One icon column across native, admin, public and dynamically added actions.
   Outrank Framework7 navbar :has(svg:only-child), which otherwise treats text
   links containing our SVG slot as fixed-width icon-only controls. */
.app-navigation[data-app-navigation] .app-nav-popup .app-nav-icon-row,
.app-tools [data-results] .app-nav-icon-row {
  display:grid; grid-template-columns:18px minmax(0,1fr); column-gap:9px;
  align-items:center; text-align:left; width:100%; min-width:0; max-width:none; height:auto;
}

.app-navigation [data-app-icon-slot],.app-tools [data-app-icon-slot],
.app-navigation .app-nav-indicator {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; min-width:18px; flex:0 0 18px;
  color:inherit; pointer-events:none;
}
.app-navigation [data-app-icon-slot] svg,.app-tools [data-app-icon-slot] svg,
.app-navigation .app-nav-indicator svg {
  display:block; width:100%; height:100%; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.app-tools [data-results] .app-nav-icon-row > small { grid-column:2; }
.app-navigation .app-nav-menu[open] > summary .app-nav-indicator[data-agv3-ui-icon=chevron_down] { transform:rotate(180deg); }