/* The top banner, shared by every page (index.html, help.html) so it never changes
 between pages. Uses the colour and size tokens each page defines on :root. */
header.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--blue); color: var(--accent-ink);
  border-bottom: 3px solid var(--yellow);
  padding: calc(env(safe-area-inset-top) + 4px) max(8px, env(safe-area-inset-right)) 4px max(14px, env(safe-area-inset-left));
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px;
  font-family: var(--font-body); line-height: 1.4;   /* fixed here so every page draws it the same */
}
.topbar .brand .home { color: inherit; text-decoration: none; border-radius: 4px; }
@media (hover: hover) { .topbar .brand .home:hover { text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 4px; } }
.topbar .brand { font-size: var(--fs-stage); margin: 0; flex: 1; min-width: 0; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .brand { font-family: var(--font-head); font-weight: 700; }
.topbar :focus-visible { outline-color: var(--yellow); }
.topbar .icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.topbar .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* tagline: beside "Keys" in the banner from 760px. On phones it's a line on the page just
   under the banner instead, so it scrolls away and the sticky banner stays one row high */
.topbar .tagline { display: none; color: var(--yellow-soft); font-weight: 500; line-height: 1.3; }
.tagline-strip { margin: 0 auto; max-width: var(--pagew); padding: 10px max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  color: var(--blue); font-size: var(--fs-meta); font-weight: 600; line-height: 1.35; }   /* one line on most phones */
@media (min-width: 760px) {
  .tagline-strip { display: none; }
  .topbar .tagline { display: block; }
  header.topbar { flex-wrap: nowrap; gap: 6px; }
  .topbar .brand { flex: 0 0 auto; }
  .topbar .tagline { order: 0; flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .tagline::before { content: "–"; margin: 0 8px 0 2px; color: rgba(255,255,255,.6); }
}
.hbtn {
  background: rgba(255,255,255,.14); color: #fff; border: 0;
  min-height: var(--tap); min-width: var(--tap); padding: 0 12px; border-radius: 10px;
  font-size: var(--fs-small); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  max-width: 40vw;
}
.hbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbtn:active, .hbtn[aria-current="page"] { background: rgba(255,255,255,.26); }
a.hbtn { text-decoration: none; }
@media (hover: hover) { .hbtn:hover { background: rgba(255,255,255,.22); } }
.hbtn.add { background: var(--yellow); color: var(--blue); font-weight: 750; padding: 0 12px 0 8px; gap: 4px; }
.hbtn.add:active { background: var(--yellow-soft); }
@media (hover: hover) { .hbtn.add:hover { background: var(--yellow-soft); } }
@media (max-width: 479px) { #menuBtn { padding: 0 10px 0 8px; gap: 4px; } }
/* small phones and zoomed-in views: the name moves into Settings (still read out) so the title fits */
@media (max-width: 379px) { .topbar .brand { font-size: var(--fs-body); } #menuBtn { padding: 0; } #whoLabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }