/*
 * Top bar, every page (app screen and document pages): wordmark at left, nav at right, and the search box centred on
 * the viewport (not on the space left between them) at one width, so it sits at the same x, y and width everywhere.
 * No rule under the bar. Phones: the box fills the space after the wordmark (the nav is hidden there).
 * Every page uses the same `.ask` box, placeholder and typing demo.
 */
.topbar{position:relative;height:56px;display:flex;align-items:center;gap:24px;padding:0 24px 0 48px;border-bottom:0;background:#fff}
.topbar nav{margin-left:auto;align-items:center}
.topbar nav a.donate{height:32px;display:inline-flex;align-items:center;padding:0 12px;border:1px solid var(--line-strong);color:var(--ink)}
.topbar .ask{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:min(640px,calc(100vw - 2 * 220px));height:40px;
  display:flex;align-items:center;gap:12px;padding:0;border:0;border-bottom:2px solid var(--ink);background:transparent}
.topbar .ask .prompt{color:var(--hot);font:500 18px/22px var(--mono)}
.topbar .ask input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 18px/24px var(--sans);color:var(--ink)}
.topbar .ask input::placeholder{color:var(--quiet)}
@media (max-width:900px){
  .topbar{padding:0 12px;gap:12px}
  .topbar .brand-version{display:none}
  .topbar nav{display:none}
  .topbar .ask{position:relative;inset:auto;transform:none;width:auto;flex:1;min-width:0}
  .topbar .ask input{font-size:16px}
}