/* The board's navigation, last of the stylesheets so it wins (batch 2 merge, 12 Nov 2026). On a laptop: the pills in the top bar, as the
   slices drew them. On a phone (under 768 px): a tab bar along the bottom, as today's HQ page has, every screen one tap away on one line
   (seven screens wrapped onto two lines in the top bar). The page keeps room for it, and a toast sits above it. */
.bd .bd-nav{display:flex;align-items:center;gap:4px;margin-left:auto;flex-wrap:nowrap}
@media (max-width:767px){
  .bd .bd-top{flex-wrap:nowrap}
  .bd .bd-nav{position:fixed;z-index:55;left:0;right:0;bottom:0;margin:0;gap:0;justify-content:space-around;
    padding:0 2px env(safe-area-inset-bottom,0px);background:rgba(0,0,0,.92);border-top:1px solid var(--line-2);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  .bd .bd-nav a,.bd .bd-nav .bd-navl{flex:1 1 0;min-width:0;justify-content:center;min-height:52px;padding:0 1px;border-radius:0;
    font-size:12px;letter-spacing:-.01em;background:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bd .bd-nav a:hover{background:none}
  .bd .bd-nav a[aria-current="page"]{color:var(--accent);background:none}
  .bd{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .bd .toast{bottom:calc(68px + env(safe-area-inset-bottom,0px))}
}

/* (last edits merge) a section packs its rows to the top: when a column made it taller, the grid stretched one row (What you worked on: 964 px) */
.bd .sec{align-content:start}
.bd button.hr-prow{height:auto}
.bd .hr-chev{width:16px;height:16px;flex:none;color:var(--label-3,var(--label-2))}