/* Brand link and version controls share a quiet text baseline. */
#appShell header .brand-lockup { display:inline-flex; align-items:baseline; gap:10px; min-width:0; color:var(--text); text-decoration:none; border-radius:4px; }
#projectBrand > .brand-icon { align-self:center; flex:none; }
#projectBrand:focus-visible { outline:2px solid var(--selected-border); outline-offset:5px; }
#versionBadge { position:relative; display:inline-flex; align-items:baseline; gap:6px; color:var(--muted); font-size:14px; font-weight:400; white-space:nowrap; }
.version-update { display:inline-flex; align-self:center; }
.version-update i { width:6px; height:6px; border-radius:50%; background:var(--primary); }
.version-update[hidden] { display:none; }
@media(max-width:600px) {
 #appShell header .brand-lockup { gap:8px; }
 #versionBadge { font-size:12px; }
}
/* Separate destinations while keeping the brand and version visually together. */
#appShell header .brand-lockup { position:relative; }
#projectBrand { display:inline-flex; align-items:baseline; gap:10px; color:inherit; text-decoration:none; }
#appShell #headerVersion { appearance:none; border:0; border-radius:4px; background:transparent; color:inherit; font:inherit; padding:0; min-height:0; line-height:inherit; box-shadow:none; cursor:pointer; }
#appShell #headerVersion:hover { color:var(--accent-text); }
#appShell #headerVersion:focus-visible { outline:2px solid var(--selected-border); outline-offset:4px; }
#appShell #headerVersion:disabled { cursor:progress; opacity:.65; }
#headerUpdate { padding:8px 5px; margin:-8px -5px; border-radius:4px; }
#headerUpdate:focus-visible { outline:2px solid var(--selected-border); outline-offset:2px; }
/* The speech bubble's left tip points back to the persistent update dot. */
.version-notice { position:absolute; left:calc(100% + 14px); top:50%; transform:translateY(calc(-50% + var(--notice-shift,0px))); z-index:100; box-sizing:border-box; padding:8px 12px; border:1px solid var(--border-strong); border-radius:12px; background:var(--surface); color:var(--text); box-shadow:var(--elevation); font-size:12px; font-weight:400; line-height:1.5; white-space:normal; overflow-wrap:anywhere; width:max-content; max-width:var(--notice-space,260px); }
.version-notice::before { content:""; position:absolute; left:-6px; top:calc(50% - var(--notice-shift,0px)); width:10px; height:10px; background:var(--surface); border-left:1px solid var(--border-strong); border-bottom:1px solid var(--border-strong); transform:translateY(-50%) rotate(45deg); }
.version-notice[hidden] { display:none; }
@media(max-width:600px) { #projectBrand { gap:8px; } }