/* One fixed navigation bar across the release editor and account views. */
.app-header{box-sizing:border-box;position:fixed;top:0;left:0;right:0;z-index:100;height:81px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 45px;border-bottom:1px solid #d9e5f0;background:#f8fbff;color:#001655;font:15px/1.55 Outfit,'Avenir Next',sans-serif;box-shadow:0 2px 10px #00165504}
.app-header .breadcrumb{font-size:10px;letter-spacing:1.4px;color:#566586;text-decoration:none;white-space:nowrap}
.app-header .top-actions{display:flex;align-items:center;gap:19px}
.app-header .text-btn{display:inline-flex;align-items:center;min-height:40px;padding:7px 0;background:transparent;color:#566586;font-size:12px;text-decoration:none;white-space:nowrap}
.app-header .text-btn:hover{color:#001655;text-decoration:underline}
.app-header .icon-btn{display:grid;place-items:center;width:39px;height:40px;min-height:40px;padding:0;margin:0;border:1px solid #d9e5f0;border-radius:8px;background:#fff;color:#001655;cursor:pointer;font-size:16px;line-height:1;list-style:none}
.app-header summary::-webkit-details-marker{display:none}.app-header-menu{position:relative}.app-header-menu[open]>summary{background:#eee7fa;border-color:#cbb6f0}
.app-header-options{position:absolute;right:0;top:49px;min-width:215px;padding:8px;background:#fff;border:1px solid #d9e5f0;border-radius:12px;box-shadow:0 12px 32px #00165517}
.app-header .app-header-options a,.app-header .app-header-options button{display:block;width:100%;padding:11px 13px;margin:0;min-height:42px;text-align:left;border:0;border-radius:7px;background:transparent;color:#001655;font:500 13px/1.5 Outfit,sans-serif;text-decoration:none}
.app-header .app-header-options a:hover,.app-header .app-header-options button:hover{background:#f1edfb}.app-header-options form{margin-top:7px;padding-top:7px;border-top:1px solid #e4e9f3}
.app-header :is(a,button,summary):focus-visible{outline:3px solid #6d52aa;outline-offset:3px}
body.app-page{display:block;padding:113px 24px 32px;scroll-padding-top:105px}body.app-page>main{margin:0 auto}body.app-page :is(input,select,textarea,summary,[tabindex]){scroll-margin-top:100px}
/* The editor is a viewport shell: the sidebar and header remain in place. */
body:has(>.shell){height:100dvh;overflow:hidden}.shell{height:100dvh;min-height:0;overflow:hidden;padding-top:81px}.shell>.sidebar{height:calc(100dvh - 81px);min-height:0;overflow:auto}.shell>.main-shell{height:calc(100dvh - 81px);min-height:0;padding-top:0;overflow:hidden;display:flex;flex-direction:column}.main-shell>.app-header{left:0}.main-shell>main{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scroll-padding-top:24px}.main-shell>main :is(input,select,textarea,[tabindex]){scroll-margin-top:24px}
.app-header #saveClose[hidden]{display:none!important}
@media(max-width:1200px){.main-shell>.app-header{left:0}.app-header{padding:0 28px}}
@media(max-width:1030px) and (min-width:761px){.main-shell>.app-header{height:81px}}
@media(max-width:760px){.app-header{height:61px;padding:0 20px}.app-header .breadcrumb{font-size:8px;letter-spacing:.6px}.app-header .top-actions{gap:12px}.app-header .text-btn{font-size:11px}.app-header .icon-btn{width:35px;height:37px;min-height:37px}.app-header-options{top:44px}.main-shell>.app-header{left:0}.shell{display:flex;flex-direction:column;padding-top:61px}.shell>.sidebar{height:auto;max-height:36dvh;flex-shrink:0;overflow:auto}.shell>.main-shell{height:auto;flex:1;min-height:0;padding-top:0}.main-shell>main{width:100%}body.app-page{padding:85px 16px 24px;scroll-padding-top:80px}body.app-page :is(input,select,textarea,summary,[tabindex]){scroll-margin-top:80px}.app-header .mobile-private{display:none}}
@media print{.app-header{display:none!important}body.app-page{padding:0}.shell,.shell>.main-shell,.main-shell>main{height:auto;overflow:visible}}

@media(max-width:760px){.main-shell>.app-header>div:first-child{display:none}.main-shell>.app-header>.top-actions{flex:1;gap:10px;justify-content:flex-end}.main-shell>.app-header>.top-actions>a[data-action=home]{margin-right:auto}.main-shell>.app-header>.top-actions>[data-action=share]{display:none!important}}
@media(min-width:761px){body.app-page .collaborator-directory{top:105px}}

@media print{body:has(>.shell){height:auto;overflow:visible}.shell{display:none!important}}

.app-header .app-wordmark{display:inline-flex;align-items:center;gap:9px;flex-shrink:0;line-height:1;text-decoration:none;color:#001655}.app-wordmark .wordmark-symbol{font-size:34px;font-weight:500}.app-wordmark .wordmark-text{font-size:25px;font-weight:750;letter-spacing:-1px}.app-wordmark .wordmark-text>span{font-weight:500}.app-header .release-return{color:#244b90}.app-header .home-nav-link{white-space:nowrap}
@media(max-width:1100px){.app-header .home-nav-link{display:none}}
@media(max-width:760px){.main-shell>.app-header>.app-wordmark .wordmark-text,.app-header:has(.release-return)>.app-wordmark .wordmark-text{display:none}.app-header .app-wordmark{gap:6px}.app-wordmark .wordmark-symbol{font-size:29px}.app-wordmark .wordmark-text{font-size:21px}.main-shell>.app-header>.top-actions>a[data-action=home]{display:none}.app-header .top-actions{gap:12px}}
@media(max-width:1100px){.main-shell>.app-header>.top-actions>a[data-action=home]{display:none}}

.app-header .header-account-name{display:block;min-width:0;max-width:none;overflow:visible;white-space:normal;flex:0 1 auto;color:#001655;font-size:13px;font-weight:750;line-height:1.5}.app-header .header-account-name[hidden]{display:none!important}@media(max-width:760px){.app-header .header-account-name{font-size:11px}}

/* Frosted navigation keeps scrolling content softly visible behind the header. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .app-header{background:rgb(248 251 255 / 80%);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:rgb(217 229 240 / 65%)}
}
@media(prefers-reduced-transparency:reduce){.app-header{background:#f8fbff;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Let desktop editor content pass behind the fixed frosted bar. */
@media(min-width:761px){
 .shell>.main-shell{margin-top:-81px;height:100dvh}
 .main-shell>main{padding-top:123px;scroll-padding-top:105px}
 .main-shell>main :is(input,select,textarea,[tabindex]){scroll-margin-top:105px}
}
@media(min-width:1441px){.main-shell>main{padding-top:129px}}
@media(min-width:761px) and (max-width:1200px){.main-shell>main{padding-top:111px}}

.app-header :is(.app-header-menu>summary,[data-action=menu]){position:relative}.app-header [data-access-notifications=true]::after{content:'';position:absolute;right:2px;top:2px;width:8px;height:8px;border-radius:50%;background:#d92d42;border:2px solid #fff;box-sizing:content-box;pointer-events:none}

.app-header .verified-badge{display:inline-flex;vertical-align:middle;margin-left:6px;line-height:1}.app-header .verified-badge svg{display:block}
.app-header .header-account-name{display:inline-flex;align-items:center}.app-header .header-account-label{overflow:visible;white-space:normal;overflow-wrap:anywhere;min-width:0}.app-header .verified-badge{flex-shrink:0}

.app-header .top-actions{min-width:0}.app-header .header-account-name{max-width:none;text-overflow:clip}.app-header .verified-badge{align-self:center}@media(max-width:400px){.app-header{padding-inline:12px}.app-header .top-actions{gap:8px}}

.app-header :is(.app-header-options,.more-menu) .header-account-name{display:flex;width:100%;max-width:300px;margin:0 0 4px;padding:11px 13px;border-bottom:1px solid #d9e5f0;font-size:14px;gap:0}.app-header :is(.app-header-options,.more-menu) .header-account-name[hidden]{display:none!important}

#installAppDialog{box-sizing:border-box;width:min(540px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:24px;border:1px solid #d9e5f0;border-radius:16px;background:#fff;color:#001655;font:14px/1.6 Outfit,sans-serif}#installAppDialog::backdrop{background:#00165588}#installAppDialog h2{margin:0 0 12px;color:#001655;font-size:23px;line-height:1.25}#installAppDialog p{font-size:13px;color:#566586}.install-browser-guide{margin:20px 0}.install-browser-guide dt{margin:16px 0 4px;font-weight:700;color:#001655}.install-browser-guide dd{margin:0;color:#566586;font-size:13px}#installAppDialog form{margin-top:20px}#installAppDialog .button{width:100%;min-height:44px;margin:0;border:0;border-radius:8px;background:#d4faff;color:#001655;font:600 14px/1.4 Outfit,sans-serif;padding:12px;cursor:pointer}#installAppDialog .button:focus-visible{outline:3px solid #3359a4;outline-offset:3px}

/* Purple seals on light surfaces; only the release banner uses pale teal. */
.verified-badge svg>path:first-child{fill:#1f1033;stroke:none}.verified-badge svg>path:last-child{stroke:#fff}
.release-account-verification .verified-badge svg>path:first-child{fill:#d4faff;stroke:#001655;stroke-width:1}.release-account-verification .verified-badge svg>path:last-child{stroke:#001655}
.release-heading-card{position:relative}.release-account-verification{position:absolute;right:28px;top:24px;display:flex;align-items:center;gap:6px;color:#d4faff;font-size:13px;font-weight:650}.release-account-verification[hidden]{display:none}.release-account-verification .button{margin:0;width:auto;background:#d4faff;color:#001655;min-height:40px;padding:8px 14px;font-size:13px}.release-heading-card:has(.release-account-verification:not([hidden])) .release-header-copy{padding-right:130px}
@media(max-width:980px){.release-account-verification{right:20px;top:20px}.release-heading-card:has(.release-account-verification:not([hidden])){padding-top:72px}.release-heading-card:has(.release-account-verification:not([hidden])) .release-header-copy{padding-right:0}}

/* Match the song picker to the contributor cards after their numbered rail. */
#editor:has(.contributor-timeline)>.song-navigation{width:calc(100% - 58px);margin-left:58px;box-sizing:border-box}#editor:has(.contributor-timeline)>.song-navigation .song-picker-field{flex-basis:220px}@media(max-width:600px){#editor:has(.contributor-timeline)>.song-navigation{width:calc(100% - 42px);margin-left:42px}}