/* Family bar — the Grind Labs half of the strip that carries a reader between
   grindlabs.ca / lagrind.ca and grindmarket.ca.

   Ships to hub-site/_hub-redesign/20260908/content/family-bar.css and is loaded last
   in <head>, after button-polish.css.

   Same geometry as the Grind Market half (Sol/GRIND_MARKET_2026-09-12/build/site/
   src/creator-market.css): a 35 px row — 34 px of tabs plus the 1 px rule — above the
   header, on one line from 1440 px down to 320 px. Hub tokens only; no value is
   hardcoded and nothing outside .family-* is touched.

   .site-header is sticky at top:0 (content/hub-polish.css). The strip stands in the
   normal flow above it, so it scrolls away and the header still pins to the viewport
   top: no header offset to adjust, no layout shift. #main-nav.is-open is absolutely
   positioned against .site-header, so the open mobile menu is unaffected too. */

.family-bar{background:var(--paper);border-bottom:1px solid var(--line-soft)}
.family-inner{display:flex;align-items:center;gap:14px;min-height:34px;white-space:nowrap}

/* .header-inner drops the .wrap measure on the public hub (content/hub-theme.css);
   the strip follows it so the first tab sits under the logo at every width. */
html[data-complete-hub] .family-bar .family-inner{width:100%;max-width:none}

.family-tab{position:relative;display:inline-flex;align-items:center;min-height:34px;padding-inline:7px;border-radius:var(--radius-sm);font-size:12px;font-weight:500;color:var(--ink-soft)}
.family-tab:first-child{margin-left:-7px}
.family-tab:hover{color:var(--ink)}
.family-tab[aria-current=page]{color:var(--ink);font-weight:700}
.family-tab[aria-current=page]::after{content:'';position:absolute;left:7px;right:7px;bottom:0;height:2px;background:var(--accent)}

/* The hub's a:focus-visible ring (assets/site.css) sits 5 px outside the box; on the
   first row of the page its upper edge would fall outside the viewport. Same ring,
   tucked inside the row. */
.family-tab:focus-visible{outline-offset:-3px}

@media(max-width:640px){.family-inner{gap:10px}}
@media(max-width:360px){.family-inner{gap:6px}.family-tab{font-size:11.5px;padding-inline:5px}.family-tab:first-child{margin-left:-5px}.family-tab[aria-current=page]::after{left:5px;right:5px}}