/* Details-inspired navigation: a quiet full-width bar and tactile pill actions. */
.site-header.details-navigation{
 position:fixed;inset:0 0 auto;transform:none;width:100%;max-width:none;min-height:76px;height:auto;
 display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:var(--space-4);
 padding:var(--space-4) var(--space-5);border:0;border-radius:0;box-shadow:none;
 background:linear-gradient(#111210ed,#111210b8);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
 color:var(--text-primary);transition:background .18s;
}
.site-header.details-navigation.is-scrolled{background:#111210f2;border-bottom:1px solid var(--border-subtle)}
.site-header.details-navigation.is-gallery{
 background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none;transition:none;
}
.site-header.details-navigation.is-gallery > :not(.wordmark){display:none}
.site-header.details-navigation.is-gallery > .wordmark{
 width:44px;height:44px;border-radius:50%;background:#111210e8;color:var(--text-primary);pointer-events:auto;
}
.details-navigation .wordmark{width:32px;min-height:40px;margin-right:var(--space-1);flex:0 0 auto}
.details-navigation .wordmark span{font-size:30px}
.site-header.details-navigation nav{display:flex;flex-direction:row;align-items:center;gap:var(--space-1);max-width:none}
.details-navigation nav a{padding:8px 14px;border-radius:var(--radius-pill);font-size:var(--type-control);line-height:var(--leading-control);color:var(--text-secondary);opacity:1;white-space:nowrap;transition:background .14s,color .14s}
.details-navigation nav a:hover,.details-navigation nav a[aria-current=page]{background:#ffffff10;color:var(--text-primary)}
.header-actions{display:flex;align-items:center;gap:var(--space-3);margin-left:auto;flex:0 0 auto}
.details-navigation .header-actions button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;font:var(--weight-medium) var(--type-control)/var(--leading-control) var(--font-ui);border-radius:var(--radius-pill);min-height:44px;padding:8px 16px;white-space:nowrap;touch-action:manipulation;transition:background .14s,border-color .14s,transform .14s}
.header-actions svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.details-navigation .header-actions .header-create{gap:8px;padding-inline:20px;background:transparent;color:var(--text-primary);border:1px solid var(--border-subtle);font-size:var(--type-body)}
.details-navigation .header-actions .header-resume{width:44px;padding:0;background:transparent;color:var(--text-primary);border:1px solid var(--border-subtle)}
.details-navigation .header-create:hover,.details-navigation .header-resume:hover{border-color:var(--border-strong);background:#ffffff08}
.details-navigation .header-resume:disabled{opacity:.5;cursor:wait}
.details-navigation .header-actions .header-login{color:var(--text-primary);background:transparent;border:1px solid var(--border-subtle)}
.details-navigation .header-login:hover{background:#ffffff08;border-color:var(--border-strong)}
.details-navigation .header-actions .header-login.has-avatar{width:44px;height:44px;padding:0;overflow:hidden}
.details-navigation .header-login.has-avatar>span:not(.account-avatar){display:none}
.details-navigation .header-actions .header-menu-toggle{width:44px;min-width:44px;padding:0;background:transparent;color:var(--text-secondary);border:0}
.header-menu-toggle svg{transition:transform .18s ease}
.header-menu-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.details-navigation .header-menu-toggle:hover,.details-navigation .header-menu-toggle[aria-expanded=true]{background:#ffffff0d}
.header-action-status{position:absolute;top:calc(100% + 8px);right:var(--space-5);max-width:min(340px,calc(100vw - 32px));padding:12px 16px;background:var(--surface-panel);border:1px solid var(--border-subtle);border-radius:var(--radius-card);font-size:var(--type-support);line-height:var(--leading-body);box-shadow:0 8px 24px #0003}
.header-menu{position:absolute;right:var(--space-5);top:calc(100% - 4px);width:280px;max-width:calc(100vw - 24px);padding:6px;border:1px solid #ffffff12;border-radius:18px;background:#191b18f7;box-shadow:0 12px 40px #0005;backdrop-filter:blur(22px);transform-origin:top right}
.header-menu>a,.header-menu>button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:0;border-radius:12px;padding:12px;color:var(--text-primary);background:transparent;text-align:left;font:400 var(--type-control)/var(--leading-control) var(--font-ui)}
.header-menu>a:hover,.header-menu>button:hover{background:#ffffff08}
.header-menu>a>span:last-child{color:var(--text-muted)}
.header-menu .header-menu-profile{background:#ffffff06;padding-block:14px}
.header-menu-profile>span:nth-child(2){flex:1;min-width:0}
.header-menu-profile strong{display:block;font-size:var(--type-control);font-weight:500}
.header-menu-profile small{display:block;color:var(--text-secondary);font-size:var(--type-small);line-height:var(--leading-support);margin-top:3px}
.profile-symbol{width:32px;height:32px;border:1px solid #ffffff20;border-radius:50%;display:grid;place-items:center;font-size:22px}
.account-avatar{position:relative;display:inline-grid;place-items:center;flex:0 0 auto;width:32px;height:32px;overflow:hidden;border-radius:var(--radius-pill);background:var(--surface-raised);color:var(--text-primary);font:var(--weight-medium) var(--type-small)/1 var(--font-ui);isolation:isolate}
.account-avatar[hidden]{display:none}
.account-avatar img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.account-avatar img[hidden]{display:none}
.account-avatar-nav{width:42px;height:42px;background:linear-gradient(145deg,#ecb2db,#dda697);color:var(--text-on-light)}
.account-identity{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5)}
.account-identity .account-description{margin:0;min-width:0;overflow-wrap:anywhere}
.account-avatar-profile{width:48px;height:48px;font-size:var(--type-body);border:1px solid var(--border-subtle)}
/* Editor identity stays in the tool rail, leaving the canvas header-free. */
#studio .editor-tools{overflow:hidden;padding-bottom:max(12px,env(safe-area-inset-bottom))}
#studio .editor-home{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:56px;min-height:44px;margin-bottom:8px;border-radius:var(--radius-control);font:400 30px/1 Arial,sans-serif;letter-spacing:0;color:var(--text-primary)}
#studio .editor-home:hover{background:var(--surface-hover)}
#studio .editor-tool-list{display:flex;flex:1;flex-direction:column;align-items:center;gap:4px;min-height:0;overflow:auto;scrollbar-width:none}
#studio .editor-tools .editor-account{flex:0 0 auto;width:44px;min-height:44px;align-self:center;margin-top:8px;padding:6px;border-radius:var(--radius-pill);background:transparent}
#studio .editor-tools .editor-account:hover{background:var(--surface-hover)}
#studio .editor-tools .account-avatar-editor{width:32px;height:32px;font-size:var(--type-small);border:1px solid var(--border-subtle)}
@media(max-width:700px){
 #studio .editor-tools{gap:4px;padding:3px 5px;align-items:center}
 #studio .editor-home{width:50px;margin:0}
 #studio .editor-tool-list{flex-direction:row;align-items:center;gap:0;min-width:0;overflow:visible}
 #studio .editor-tool-list [data-editor-tool]{width:auto;min-width:0;flex:1;min-height:50px}
 #studio .editor-tools .editor-account{margin:0;flex:0 0 44px}
}
.header-menu-divider{height:1px;background:var(--border-subtle);margin:6px}
.header-menu .language-picker{display:flex;align-items:center;margin:0;padding:4px 6px;gap:6px;position:relative}
.header-menu .language-trigger{border:0;background:#ffffff08;min-height:38px;border-radius:10px;padding:8px 12px;font-size:var(--type-control)}
.header-menu .language-menu{position:static;display:flex;flex-wrap:wrap;flex:1;gap:3px;width:auto;padding:0;background:transparent;border:0;box-shadow:none}
.header-menu .language-menu button{padding:8px 7px;min-height:38px;font-size:var(--type-small);color:var(--text-secondary)}
.header-menu .language-menu button[aria-pressed=true]{background:#ffffff10;color:#fff}
/* Account surfaces share the product tokens; no simulated signed-in state. */
.account-dialog{width:min(560px,calc(100% - 32px));max-width:560px;max-height:calc(100dvh - 48px);overflow:auto;background:var(--surface-panel);color:var(--text-primary);padding:32px;border:1px solid var(--border-subtle);border-radius:var(--radius-panel);box-shadow:0 20px 80px #0007;color-scheme:dark}
.account-description,.account-message,.account-empty{font-size:var(--type-support);line-height:var(--leading-body);color:var(--text-secondary)}
.account-description{font-size:var(--type-body);margin:0 0 24px}
.account-providers{display:grid;gap:10px}
.social-login{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:48px;padding:12px 18px;border:1px solid var(--border-strong);border-radius:var(--radius-control);color:var(--text-primary);background:var(--surface-raised);font-size:var(--type-control);font-weight:500}
.social-login:not(:disabled):hover{background:var(--surface-hover)}
.social-login:disabled{opacity:.45;cursor:not-allowed}
.provider-icon{font-family:Arial,sans-serif;font-size:18px;width:22px}
.account-message{min-height:20px;margin:16px 0}
.account-dialog .account-local-access,.account-dialog .account-profile-login,.account-dialog .account-signout{font:400 var(--type-control)/var(--leading-control) var(--font-ui);background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-control);padding:12px 16px;color:var(--text-primary);min-height:44px}
.account-local-access,.account-profile-login{width:100%}
.account-dialog .account-local-access:hover,.account-dialog .account-profile-login:hover,.account-dialog .account-signout:hover{background:#ffffff08}
.account-profile-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.account-save{font:500 var(--type-control)/var(--leading-control) var(--font-ui);background:var(--text-primary);color:var(--text-on-light);border:0;border-radius:var(--radius-control);padding:12px 16px;min-height:44px}
.account-save:disabled{opacity:.4;cursor:not-allowed}
.account-book-section{margin-block:24px}
.account-book-section h3{font-size:var(--type-control);line-height:var(--leading-heading);font-weight:600;margin:0 0 12px;color:var(--text-secondary)}
.account-book-list{display:grid;gap:8px}
.account-book-card{width:100%;display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--border-subtle);border-radius:var(--radius-card);background:#ffffff04;color:var(--text-primary);text-align:left}
.account-book-card:hover:not(:disabled){background:#ffffff0b;border-color:var(--border-strong)}
.account-book-thumb{flex:0 0 48px;display:grid;place-items:center;width:48px;height:60px;background:#ffffff0b;border-radius:4px;overflow:hidden;font-size:24px}
.account-book-thumb img{width:100%;height:100%;object-fit:cover}
.account-book-copy{flex:1;min-width:0}
.account-book-copy strong{display:block;font-size:var(--type-control);font-weight:500;overflow-wrap:anywhere}
.account-book-copy small{display:block;font-size:var(--type-small);line-height:var(--leading-support);color:var(--text-secondary);margin-top:4px}
.account-book-arrow{font-size:18px;color:var(--text-muted)}
.account-book-views{display:flex;gap:4px;padding:4px;border-radius:var(--radius-control);background:var(--surface-raised)}
.account-book-views button{flex:1;min-height:44px;border:0;border-radius:var(--radius-control);padding:10px 14px;color:var(--text-secondary);background:transparent;font:500 var(--type-control)/var(--leading-control) var(--font-ui)}
.account-book-views button[aria-pressed="true"]{color:var(--text-primary);background:var(--surface-hover)}
.account-book-row{display:flex;align-items:center;gap:4px;border:1px solid var(--border-subtle);border-radius:var(--radius-card);padding-right:6px;background:#ffffff04}
.account-book-row .account-book-card{flex:1;min-width:0;width:auto;border:0;background:transparent}
.account-book-action{flex:none;min-height:44px;padding:10px;border:0;border-radius:var(--radius-control);background:transparent;color:var(--text-secondary);font:400 var(--type-control)/var(--leading-control) var(--font-ui)}
.account-book-delete:hover{color:#ffc4ba;background:#f8766814}
.account-book-restore:hover{color:var(--text-primary);background:var(--surface-hover)}
.account-book-action:focus-visible,.account-book-card:focus-visible,.account-book-views button:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}
.account-delete-name{font-size:var(--type-body);font-weight:500;overflow-wrap:anywhere;margin:16px 0}
.account-delete .account-description{margin-bottom:12px}
.account-delete .account-message:empty{display:none}
@media(max-width:700px){
 .site-header.details-navigation{padding:12px;min-height:68px;gap:8px;flex-wrap:nowrap}
 .site-header.details-navigation nav{display:none}
 .details-navigation .header-actions{flex:1;justify-content:flex-end;gap:6px;min-width:0;flex-wrap:nowrap}
 .details-navigation .header-actions button{padding:8px 12px;font-size:var(--type-small)}
 .details-navigation .header-actions .header-create{gap:6px;padding-inline:12px;font-size:var(--type-control)}
 .header-actions svg{width:20px;height:20px}
 .header-menu{right:12px;width:280px}
 .account-book-row .account-book-card{gap:10px}
 .account-book-arrow{display:none}
}
@media(max-width:360px){.site-header.details-navigation{padding-inline:10px;gap:4px}.details-navigation .wordmark{width:28px;margin-right:0}.details-navigation .header-actions{gap:4px}.details-navigation .header-actions .header-create,.details-navigation .header-actions .header-login:not(.has-avatar){padding-inline:10px}}
@media(prefers-reduced-motion:reduce){.details-navigation *{transition:none!important}}
.account-save{max-width:100%;overflow-wrap:anywhere;white-space:normal;text-align:left}
.header-menu .language-menu{flex-direction:row;align-items:center}
.header-menu .language-menu button{width:auto;min-width:0;flex:1;padding-inline:6px}

/* Contextual sign-in is part of the editor, with a clear way back to work. */
.account-auth-actions{display:flex;flex-direction:column;gap:8px;margin-top:24px}
.account-auth-actions button{min-height:44px;padding:12px 16px;border-radius:var(--radius-control);font:500 var(--type-control)/var(--leading-control) var(--font-ui)}
.account-keep-editing{background:var(--surface-raised);border:1px solid var(--border-subtle);color:var(--text-primary)}
.account-leave-guest{background:transparent;border:0;color:var(--text-secondary)}
.account-auth-actions button:not(:disabled):hover{filter:brightness(1.12)}
.account-auth-actions button:focus-visible,.social-login:focus-visible{outline:2px solid var(--text-primary);outline-offset:3px}
.account-auth-actions button:disabled{opacity:.5;cursor:wait}
.account-login[aria-busy="true"] .account-description{margin-bottom:16px}
.account-dialog [hidden]{display:none!important}