/* Shared navigation layout; canonical Design System tokens are not redefined. */
[data-app-navigation]{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
[data-app-navigation] a{font:600 14px/1.3 system-ui,sans-serif;text-decoration:none;padding:10px 12px;white-space:nowrap;color:var(--text-dim);border:1px solid transparent;border-radius:6px}
[data-app-navigation] a[aria-current=page]{color:var(--text-accent);border-color:var(--accent)}
[data-app-navigation] a:hover{color:var(--text)}
.service-status{display:inline-flex;flex:none;align-items:center;gap:5px;font:500 11px/1.4 system-ui,sans-serif;padding:3px 7px;border-radius:4px;border:1px solid currentColor;white-space:nowrap;color:var(--text-dim)}
.service-status::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.service-status.ready{color:var(--state-success)}
.service-status.unavailable{color:var(--state-error)}
[data-workspace-navigation]{display:flex;gap:16px;align-items:center;flex:none;margin:0 0 16px;border-bottom:1px solid var(--border)}
[data-workspace-navigation] a{padding:8px 4px;text-decoration:none;color:var(--text-dim);font:500 14px/1.4 system-ui,sans-serif}
[data-workspace-navigation] a[aria-current=page]{color:var(--text-accent);border-bottom:2px solid var(--accent)}
.top-actions,.gallery-app-header{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.gallery-app-header{justify-content:space-between;margin-bottom:22px}
.creation .topbar{flex-wrap:wrap;flex-shrink:0}
@media(max-width:767px){[data-app-navigation] a{padding:9px 10px!important;font-size:13px}.creation #workspace{height:auto;min-height:100dvh}.creation .layout{min-height:650px}}
/* One static application header on every workspace; only layout is local. */
html .app-header{display:grid;grid-template-columns:200px minmax(0,1fr) 140px;align-items:center;gap:16px;width:calc(100% - 32px);min-height:72px;margin:16px auto;padding:0;border:0;box-sizing:border-box}
html .app-header h1{font:var(--weight-bold) 24px/1.15 var(--serif);margin:6px 0;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html .app-header>div{display:flex;flex-direction:column;gap:0;min-width:0}
html .app-header .eyebrow{font:var(--weight-medium) var(--size-2)/1.4 var(--sans);letter-spacing:.16em;color:var(--text-accent);margin:0}
html .app-header [data-app-navigation]{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px}
html .app-header [data-app-navigation] a{padding:10px 12px;font:var(--weight-medium) 14px/1.3 var(--sans);color:var(--text-dim);border:1px solid transparent}
html .app-header [data-app-navigation] [aria-current=page]{color:var(--text-accent);border-color:var(--accent)}
html .app-header .service-status{justify-self:end;font-family:var(--sans)}
html .app-header~main{padding-top:0}
html .creation #workspace{height:calc(100dvh - 104px)}
@media(max-width:767px){html .app-header{grid-template-columns:minmax(0,1fr) 140px}html .app-header [data-app-navigation]{grid-row:2;grid-column:1/-1}html .app-header .service-status{grid-row:1;grid-column:2}html .creation #workspace{height:auto;min-height:0}}
/* Account actions belong to the application header, outside the creation tools. */
html .app-header:has(.account-menu){grid-template-columns:200px minmax(0,1fr) auto auto}
html .app-header:has(.account-menu) .service-status{grid-row:1;grid-column:3}
.app-header .account-menu{position:relative;grid-row:1;grid-column:4;justify-self:end;z-index:100;margin:0;padding:0;border:0}
.account-menu>summary{cursor:pointer;padding:10px 12px;border:1px solid var(--border);border-radius:6px;color:var(--text);font:var(--weight-medium) 14px/1.3 var(--sans);white-space:nowrap}
.account-menu>summary:focus-visible{outline:2px solid var(--state-focus-ring,var(--accent));outline-offset:3px}
.account-menu-content{position:absolute;right:0;top:calc(100% + 8px);width:min(360px,calc(100vw - 32px));padding:20px;box-sizing:border-box;border:1px solid var(--border);border-radius:8px;background:var(--bg-raised);box-shadow:0 12px 32px #0008;color:var(--text);font:14px/1.5 var(--sans)}
.account-menu-content #identityLogin{display:grid;gap:12px}
.account-menu-content label{display:grid;gap:6px;margin:0}
.account-menu-content input{width:100%;box-sizing:border-box}
.account-menu-content #identityState{margin:0 0 14px}
.account-menu-content #identityError:empty{display:none}
.account-menu-content .token span{display:flex;gap:8px}
@media(max-width:767px){html .app-header:has(.account-menu){grid-template-columns:minmax(0,1fr) auto auto}html .app-header:has(.account-menu) .service-status{grid-column:2}.app-header .account-menu{grid-column:3}}
.external-link-icon{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.16em;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}

/* UI tools share one responsive workspace submenu. */
[data-workspace-navigation]{flex-wrap:wrap;row-gap:4px}