/* The read-only preview's strip (tools/preview). Linked last in a preview build's index.html and nowhere in the production build.
   One strip across the top of every page says what this is. The app already reserves room at the top of every page head, banner, sheet and list for the phone's
   status bar (--safe-top; --top is the larger of that and the critical banner), so the strip takes that room: --safe-top grows by the strip's height and nothing
   moves under it (the same way the sandbox's strip does, tools/sandbox/runtime/sandbox.css). Colors come from the app's own tokens; Montserrat is inherited. */
:root { --pv-h: 28px; --pv-total: calc(env(safe-area-inset-top, 0px) + var(--pv-h)); --safe-top: var(--pv-total); }
html.is-present { --safe-top: var(--pv-total); }
html.is-present #app { padding-top: var(--pv-total); }
html.is-present .crit { top: var(--pv-total); }

.pvr-strip {
  position: fixed; top: 0; left: 0; right: 0; z-index: 55;
  display: flex; align-items: center; justify-content: center; gap: var(--s-3, 12px);
  height: var(--pv-total); padding: env(safe-area-inset-top, 0px) max(var(--s-3, 12px), env(safe-area-inset-right)) 0 max(var(--s-3, 12px), env(safe-area-inset-left));
  background: var(--strip-bg, #1a1c24); border-bottom: 1px solid var(--line-strong, #3a3d48); color: var(--text-2, #c9ccd6);
  font-size: 0.75rem; font-weight: 600; line-height: 1.25; letter-spacing: 0.02em; text-align: center;
}
.pvr-mark { flex: none; width: 6px; height: 6px; background: var(--accent-mark, #c41230); }
.pvr-text { min-width: 0; }
.present-exit { top: calc(var(--pv-total) + var(--s-3, 12px)); }
html.has-crit .present-exit { top: calc(var(--pv-total) + 2px); }
@media print { .pvr-strip { display: none; } }