/* 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:44px;padding:12px 16px;margin:0 0 20px;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}

/* 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}