/* B only. Existing styles stay intact in A. */
:root { --ux-topbar-height: 72px; }
html { scroll-padding-top: calc(var(--ux-topbar-height) + 12px); }
.eh-ux-web :is(input,select,textarea,[id],a,button) { scroll-margin-top: calc(var(--ux-topbar-height) + 12px); }
.eh-ux-web .app-topbar { position: fixed; inset: 0 0 auto 264px; margin: 0; padding: 8px 18px; min-height: 64px; z-index: 1300; }
.eh-ux-web .app-main { padding-top: calc(var(--ux-topbar-height) + 16px); }
.eh-ux-web .app-sidebar { position: sticky; top: 0; height: 100dvh; align-self: flex-start; }
.eh-ux-web .app-sidebar-inner { position: static; top: auto; height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; scrollbar-gutter: stable; }
.eh-ux-web .topbar-actions { gap: 6px; }
.eh-ux-web :is(.topbar-action-icon,.topbar-notification-svg) { width: 18px; height: 18px; stroke-width: 1.8; }
.eh-ux-web :is(.topbar-help-button,.topbar-notification-button,.logout-btn) { min-width: 44px; min-height: 44px; }
.eh-ux-web .topbar-help-button { position: relative; }
.eh-ux-web .ux-menu-toggle { display: none; }
.ux-update-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--eh-primary-600,#c46b22); top: 7px; right: 7px; }
.ux-update-dot[hidden] { display: none; }
.ux-updates-dialog { width: min(620px,calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--eh-border); border-radius: 16px; background: var(--eh-surface,#fff); color: var(--eh-text,#222); overflow: hidden; }
.ux-updates-dialog::backdrop { background: rgb(15 23 42 / .45); }
.ux-updates-frame { display: flex; flex-direction: column; max-height: calc(100dvh - 28px); }
.ux-updates-header,.ux-updates-footer { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; }
.ux-updates-header { border-bottom: 1px solid var(--eh-border); }
.ux-updates-header h2 { margin: 0; }
.ux-updates-body { overflow-y: auto; min-height: 0; padding: 4px 20px 12px; overscroll-behavior: contain; }
.ux-updates-body article + article { border-top: 1px solid var(--eh-border); margin-top: 18px; }
.ux-updates-footer { border-top: 1px solid var(--eh-border); flex-wrap: wrap; }
.ux-updates-demo-label { color: var(--eh-muted); font-size: 13px; }
@media (max-width: 980px) {
    .eh-ux-web .app-topbar { left: 0; gap: 4px; padding: 6px; }
    .eh-ux-web .app-main { padding-top: calc(var(--ux-topbar-height) + 12px); }
    .eh-ux-web .ux-menu-toggle { display: inline-flex; flex: none; }
    .eh-ux-web .topbar-actions { gap: 2px; }
    .eh-ux-web .topbar-profile-link { max-width: 160px; }
    .eh-ux-web .app-sidebar { position: fixed; height: 100dvh; z-index: 1500; top: 0; }
    .eh-ux-web .app-mobile-nav-overlay { z-index: 1400; }
}
@media (max-width: 560px) {
    .eh-ux-web .topbar-profile-link { width: 44px; padding: 0; justify-content: center; }
    .eh-ux-web .topbar-profile-link [data-current-user-label], .eh-ux-web .logout-btn span { display: none; }
    .eh-ux-web .topbar-actions { flex: 1; justify-content: flex-end; }
    .eh-ux-web .topbar-activity { gap: 0; }
    .eh-ux-web .topbar-profile-icon { width: 26px; height: 26px; }
    .eh-ux-web .app-topbar { flex-wrap: wrap; }
    .eh-ux-web .topbar-notification-panel { position: fixed; top: calc(var(--ux-topbar-height) + 4px); left: 8px; right: 8px; width: auto; max-height: calc(100dvh - var(--ux-topbar-height) - 16px); }
}
@media print { .eh-ux-web .app-topbar { display:none; } .eh-ux-web .app-main { padding-top:0; } }

/* Password-change screens have no sidebar or navigation entry. */
.eh-ux-web .app-shell:not(:has(.app-sidebar)) .app-topbar { left: 0; }

/* Current-visit release notes retain a reachable header and close action at high zoom. */
.ux-updates-summary { color: var(--eh-text-muted); font-size: .9rem; margin: 10px 0 16px; }
.ux-updates-body article { overflow-wrap: anywhere; }
.ux-updates-footer a { overflow-wrap: anywhere; }
@media (max-height: 480px), (max-width: 520px) {
    .ux-updates-dialog { max-height: calc(100dvh - 12px); width: calc(100vw - 12px); }
    .ux-updates-frame { max-height: calc(100dvh - 16px); }
    .ux-updates-header,.ux-updates-footer { padding: 9px 12px; gap: 8px; }
    .ux-updates-body { padding: 0 12px 8px; }
}