/* Give phone navigation its own rows instead of shrinking links together. */
@media(max-width:600px){
  body>header:not(.topbar){height:auto;min-height:64px;display:flex;flex-wrap:wrap;gap:8px 16px;padding:12px 16px;align-items:center}
  body>header:not(.topbar)>a:first-child{flex:0 0 100%;min-width:0}
  body>header:not(.topbar)>nav{display:flex;flex-wrap:wrap;gap:8px 16px;min-width:0}
  body>header:not(.topbar) a,body>header:not(.topbar) button{flex-shrink:0;min-height:44px;display:inline-flex;align-items:center;white-space:normal}
  body>header.topbar{height:calc(116px + env(safe-area-inset-top));padding:calc(8px + env(safe-area-inset-top)) 16px 8px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .topbar>.wordmark{grid-column:1/-1;min-height:40px}
  .topbar>.top-actions{min-width:0;gap:8px}
  .topbar .top-actions>span{display:none}
  .topbar>a:last-child{min-height:44px;display:flex;align-items:center}
  body:has(>.topbar) .screen{top:calc(116px + env(safe-area-inset-top))}
}