/* The staging instance's bar (dist/staging-bar.js, templates/staging_bar.html; Maxim, 2 November 2026: staging is "a copy
   of production with refreshed data automatically once a day or by refreshing manually"): amber, unlike anything of the
   app, on top of every page of staging alone. In the workspace it sticks to the top, and the sidebar and a test account's
   bar stick right below it. On the sign-in pages, whose body centres the card as a grid, it is fixed and the body keeps
   its 30 px free. */
.staging-bar{position:sticky;top:0;z-index:10001;box-sizing:border-box;min-height:30px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 12px;padding:3px 16px;background:#f5b400;color:#1a1300;border-bottom:1px solid #b07c00;font:600 13px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;text-align:center}
:where(:root[data-theme="dark"]) .staging-bar:not(:where(.theme-light,.theme-light *)){background:#d99a00;color:#1a1300;border-bottom-color:#7a5600}
@media (prefers-color-scheme:dark){:where(:root:not([data-theme="light"])) .staging-bar:not(:where(.theme-light,.theme-light *)){background:#d99a00;color:#1a1300;border-bottom-color:#7a5600}}
.staging-bar time{font-weight:700}
.staging-bar .staging-refresh{min-height:0;padding:1px 10px;border:1px solid currentColor;border-radius:6px;background:transparent;color:inherit;font:inherit;font-size:12px;cursor:pointer;box-shadow:none}
.staging-bar .staging-refresh:hover{background:color-mix(in srgb,currentColor 14%,transparent)}
.staging-bar .staging-status:empty{display:none}
.staging-bar.staging-bar-fixed{position:fixed;left:0;right:0}
body:has(> .staging-bar-fixed){border-top:30px solid transparent;box-sizing:border-box}
html:has(> body > .staging-bar){scroll-padding-top:30px}
/* Below 641 px the sidebar is a static top bar (style.css): nothing to move there, and the bar, two lines on a phone,
   scrolls away with the page instead of keeping its room. */
@media (min-width:641px){
 body:has(> .staging-bar:not(.staging-bar-fixed)) .sidebar{top:30px;height:calc(100vh - 30px)}
 body:has(> .staging-bar:not(.staging-bar-fixed)) .shell{min-height:calc(100vh - 30px)}
 body:has(> .staging-bar:not(.staging-bar-fixed)) .test-account-bar{top:30px}
}
@media (max-width:640px){.staging-bar:not(.staging-bar-fixed){position:relative}html:has(> body > .staging-bar:not(.staging-bar-fixed)){scroll-padding-top:0}}
/* The sign-in pages' bar takes two lines on a phone: the body keeps that room. */
@media (max-width:560px){.staging-bar.staging-bar-fixed{min-height:44px}body:has(> .staging-bar-fixed){border-top-width:44px}html:has(> body > .staging-bar){scroll-padding-top:44px}}
@media print{.staging-bar{display:none}body:has(> .staging-bar-fixed){border-top:0}}