/* The online TEST deployment (js/test-site.js). The "TEST SITE" bar is fixed to the top of every screen; the fixed parts of the shell and the page content start below it.
   --testbar-h is 0 and none of the rules below applies unless <html class="test-site"> is set, so a real store's layout is untouched. No inline styles anywhere (the policy forbids them). */
:root { --testbar-h: 0px; }
:root.test-site { --testbar-h: 32px; }

.test-site-bar {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 300; box-sizing: border-box; block-size: var(--testbar-h);
  display: flex; align-items: center; justify-content: center; gap: var(--s-1); padding: 0 var(--s-3); overflow: hidden;
  background: var(--warn-soft); color: var(--warn); border-block-end: 1px solid var(--warn); font-size: var(--fs-xs); line-height: 1.25; text-align: center;
}
.test-site-tag { letter-spacing: 0.06em; font-weight: 800; }

:root.test-site .sidebar { inset-block-start: var(--testbar-h); }
:root.test-site .topbar { inset-block-start: var(--testbar-h); }
:root.test-site .main { padding-block-start: calc(var(--testbar-h) + var(--topbar-h) + var(--s-5)); }
:root.test-site .login-wrap { padding-block-start: calc(var(--testbar-h) + var(--s-4)); }
:root.test-site .skip:focus { inset-block-start: calc(var(--testbar-h) + var(--s-2)); }
@media (max-width: 1023px) { :root.test-site .main { padding-block-start: calc(var(--testbar-h) + var(--topbar-h) + var(--s-4)); } }
@media (min-width: 1180px) { :root.test-site .bn-col-preview { inset-block-start: calc(var(--testbar-h) + var(--topbar-h) + var(--s-4)); } }
@media (max-width: 480px) { :root.test-site .bell-pop { inset-block-start: calc(var(--testbar-h) + var(--topbar-h) + 4px); } }
/* on a phone the sentence may need two lines */
@media (max-width: 560px) { :root.test-site { --testbar-h: 48px; } .test-site-bar { font-size: 12px; } }
@media print { :root.test-site { --testbar-h: 0px; } .test-site-bar { position: static; block-size: auto; padding-block: var(--s-1); } }

/* the notice while a sleeping API host wakes up, and the card shown at start */
.waking-note { /* at the bottom, like a toast: never over the top bar, the menu button or the sign-in form */
  position: fixed; inset-block-end: var(--s-4); inset-inline: var(--s-3); margin-inline: auto; z-index: 250; max-inline-size: 520px; box-sizing: border-box;
  padding: var(--s-2) var(--s-4); border: 1px solid var(--warn); border-radius: var(--r-md); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); text-align: center; font-size: var(--fs-sm);
}
@media (max-width: 1023px) { .waking-note { inset-block-end: calc(var(--tabbar-h) + var(--s-3)); } }
.card.waking { text-align: center; }
.card.waking::before { /* a pseudo-element: base.css hides empty children of .stack */
  content: ''; display: block; inline-size: 36px; block-size: 36px; margin: 0 auto var(--s-4); border-radius: 50%; border: 4px solid var(--accent-soft); border-block-start-color: var(--accent); animation: waking-turn 1s linear infinite;
}
@keyframes waking-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .card.waking::before { animation: none; } }