/* snpz — the sticky top bar, on every public page except index.html (which inlines its own).
 *
 * It is index.html's `.tbar` value for value: cream at 80% behind a 14px backdrop blur, a
 * hairline under it, the pill wordmark at 32px, the nav links at 14.5px/700 with .82 opacity,
 * and the call to action as an ink pill. The old bar (flat yellow, 2px black rule, hidden
 * altogether under 600px) is gone — a visitor on a phone kept no way back to the site.
 *
 * The markup is fixed by server/selfcheck-site.js: <header class="tbar">, .tbar-logo, .tbar-r,
 * .tbar-rx, and .tbar-try ("Test the receptionist") as the last thing in the nav.
 */

.tbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 20px;
  /* full-bleed cream, but the mark and the nav stay inside 1400px: no inner wrapper exists in
     the markup, so the cap is a padding sum rather than a max-width. */
  padding: 11px max(20px, calc(50% - 700px));
  background: #fbf4eacc;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid #11111114;
}

.tbar-logo { display: block; flex: none; }
.tbar-logo img { height: 32px; width: auto; display: block; }

.tbar-r { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.tbar-rx {
  color: var(--text); text-decoration: none; font-weight: 700; font-size: 14.5px;
  letter-spacing: -.01em; opacity: .82; white-space: nowrap;
}
.tbar-rx:hover { opacity: 1; }

.tbar-try {
  background: var(--ink); color: #fff; text-decoration: none;
  padding: 9px 17px; border-radius: 99px; font-weight: 800; font-size: 14px;
  letter-spacing: -.01em; white-space: nowrap;
}
.tbar-try:hover { background: #000; }

/* Phone: the links fold away, the mark and the one button stay (index.html does the same). */
@media (max-width: 860px) { .tbar { gap: 12px; } .tbar-r { gap: 14px; } }
@media (max-width: 760px) { .tbar-rx { display: none; } }
/* ...except "Set up now" (/start, 2026-09-22): the one link that goes to /go stays on a phone */
@media (max-width: 760px) { .tbar-rx.tbar-go { display: inline; } }
@media (max-width: 380px) { .tbar-try { padding: 9px 13px; font-size: 13px; } }