/* Shared page-header contract: all operational pages, including client review. */
:root{--page-width:1680px;--page-top:28px;--page-title-size:40px;--page-header-gap:24px;--header-control-height:46px}
main#app:has(.hero){max-width:var(--page-width);padding-top:var(--page-top)}
#app .hero{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--page-header-gap);margin:0 0 var(--page-header-gap)}
#app .hero>div:first-child:not(.actions){flex:1 1 300px;min-width:0}
#app .hero h1{font:650 var(--page-title-size)/1.1 var(--font-heading);letter-spacing:-.045em;margin:8px 0 12px;overflow-wrap:anywhere;text-align:left}
#app .hero h1:first-child{margin-top:0}
#app .hero h1:last-child{margin-bottom:0}
#app .hero .eyebrow{font:400 11px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:0}
#app .hero p{font:400 15px/1.5 var(--font-body);color:var(--muted);max-width:620px;margin:0}
#app .event-workspace>.hero p,#app .hero p.directory-active-count{font:400 11px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
#app>.back,#app>.event-workspace>.back{min-height:40px;padding:8px 12px;margin:0 0 16px;font:700 11px/1.35 var(--mono);letter-spacing:.055em}
#app .hero>.actions,#app .hero>.crew-event-action{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;flex:0 1 auto;margin:0 0 0 auto;align-self:center}
#app .hero>button,#app .hero>.actions>button,#app .hero>.crew-event-action>button{min-height:var(--header-control-height);padding:12px 18px;font:700 11px/1.35 var(--mono);letter-spacing:.055em;text-transform:uppercase;white-space:normal;margin:0;align-self:center}
#app .hero>button,#app .hero>small,#app .hero>.project-sync-badge{margin-left:auto}
#app .hero>small,#app .hero>.project-sync-badge{font:400 11px/1.5 var(--mono);align-self:center}
@media(max-width:800px){:root{--page-title-size:32px}}
@media(max-width:650px){
 :root{--page-top:24px;--page-header-gap:20px}
 #app .hero{gap:16px}
 #app .hero>div:first-child:not(.actions){flex-basis:100%}
 #app .hero>.actions,#app .hero>.crew-event-action{width:100%;justify-content:flex-end}
 #app .hero>button{margin-left:auto}
 #app .hero button{max-width:100%}
}
#app .hero>.actions>button,#app .hero>.crew-event-action>button{flex:0 1 auto;white-space:nowrap}
#app-sync-slot{display:flex;align-items:flex-start;justify-content:flex-end;min-height:34px;max-width:calc(var(--page-width) + 10vw);margin:0 auto;padding:6px 5vw 0;pointer-events:none}
#app-sync-slot[hidden]{display:none}
#app-sync-slot .app-sync-status{display:block!important;max-width:min(100%,480px);margin:0!important;padding:0!important;border:0!important;background:transparent!important;color:var(--muted);font:400 10px/1.4 var(--mono);text-align:right;white-space:normal;overflow-wrap:anywhere}
@media(max-width:650px){#app-sync-slot{padding:6px 4vw 0;min-height:30px}#app-sync-slot .app-sync-status{font-size:9px}}
#app .hero>.crew-event-action{flex:1 0 100%;width:100%;justify-content:center;margin:0 auto}
#app .crew-event-action #open-event{min-width:min(100%,280px);background:var(--accent);border-color:var(--accent);color:var(--tone-101310,#101310)}

/* Workspace names use the same uppercase wordmark treatment. */
header .brand span{text-transform:uppercase;font-family:"Space Grotesk Logo","Space Grotesk",sans-serif;font-weight:650;letter-spacing:.028em}

/* Match the startup header shell to its authenticated layout before data loads. */
html[data-initial-role="producer"] #header-actions{min-width:100px;min-height:46px}