/* Header-only responsive presentation. Keep every control and its accessible label. */
@media(min-width:761px) and (max-width:1200px) and (min-height:501px){
 #topbar{padding-inline:20px;gap:12px}
 #topbar>.brand{gap:10px;min-width:0;flex-shrink:0;font-size:14px;letter-spacing:.04em}
 #topbar .top-actions{min-width:0;flex:1 1 auto}
 #topbar>.brand>span:not(.brand-mark){max-width:11ch;line-height:1.25}
 #topbar>.brand>i,#topbar>.brand>b{display:none}
 #topbar #network-status{display:block;flex:0 1 110px;min-width:0;max-width:110px;margin-right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(min-width:761px) and (max-width:800px) and (min-height:501px){
 #topbar>.brand>.brand-mark{display:none}
}
/* Keep compact controls readable; the actual retry/status control gets its own text row. */
@media(max-width:760px),(max-height:500px){
 #topbar>.brand{align-self:flex-start;margin-top:6px}
 #topbar .top-actions{gap:4px 2px;flex:1 1 0;flex-wrap:wrap;justify-content:space-between}
 #topbar .language-control{flex-basis:76px}
 #topbar .language-control select{width:76px;max-width:76px}
 #topbar #backpack-toggle{width:56px;min-width:56px;font-size:11px}
 #topbar #network-status{order:1;display:block;flex:1 0 100%;width:auto;min-width:0;max-width:none;min-height:32px;height:auto;margin:0;padding:6px 8px;font-size:11px;line-height:1.4;white-space:normal;overflow-wrap:anywhere;background:#12223a;border:1px solid #526586;border-radius:7px}
 #topbar .network-label{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
 /* Keep adjacent header actions and utility palettes below the expanded status row. */
 body .veil-party-toggle,body .veil-mission-return{top:112px}
 body .veil-party-panel{top:116px}
 #backpack-panel,#actions-panel,#music-panel{top:116px;max-height:calc(100vh - 132px);max-height:calc(100dvh - 132px)}
}
/* At narrow widths, give controls the space occupied by the decorative mark. */
@media(max-width:389px){
 #topbar>.brand{display:none}
}