/* Canonical header layout. Loaded after styles.css to replace legacy patches. */
.topbar{display:grid;grid-template-columns:minmax(96px,1fr) max-content;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap;margin-bottom:8px;width:100%}
.brand-lockup{display:flex;align-items:center;justify-content:flex-start;min-width:0;max-width:100%;overflow:hidden}
.project-logo{margin-top:0;width:clamp(112px,18vw,180px);max-height:52px;height:auto;object-fit:contain}
.project-logo-dark{display:none}
:root[data-theme="dark"] .project-logo-light{display:none}
:root[data-theme="dark"] .project-logo-dark{display:block}
:root:not([data-theme="dark"]) .project-logo-light{display:block}
:root:not([data-theme="dark"]) .project-logo-dark{display:none}
.session-controls{display:flex;align-items:center;justify-content:flex-end;justify-self:end;margin-left:auto;gap:5px;flex-wrap:nowrap;min-width:0;max-width:100%;overflow:hidden}
.session-controls .btn.icon{width:34px;height:34px;padding:0;font-size:16px;flex:0 0 auto}
.session-controls .btn.mini{padding:7px 9px;font-size:11.5px;line-height:1;border-radius:999px;flex:0 0 auto}
.session-controls .badge{font-size:11px;line-height:1;padding:7px 8px;max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
@media (max-width:759px){
  #app{padding-top:8px}
  .topbar{grid-template-columns:minmax(88px,1fr) max-content;gap:4px}
  .project-logo{width:clamp(96px,28vw,124px);max-height:42px}
  .session-controls{gap:4px}
  .session-controls .btn.icon{width:30px;height:30px;font-size:14px}
  .session-controls .btn.mini{padding:6px 7px;font-size:10px}
  .session-controls .badge{font-size:9.5px;padding:6px;max-width:70px}
}
@media (max-width:430px){
  .topbar{grid-template-columns:minmax(82px,1fr) max-content;gap:3px}
  .project-logo{width:96px;max-height:38px}
  .session-controls{gap:3px}
  .session-controls .role-badge{display:none}
  .session-controls .btn.icon{width:29px;height:29px;font-size:14px}
  .session-controls .btn.mini{padding:5px 6px;font-size:10px}
}
@media (max-width:380px){
  .project-logo{width:88px;max-height:36px}
  .session-controls .btn.icon{width:28px;height:28px;font-size:13px}
  .session-controls .btn.mini{padding:5px;font-size:9.5px}
}