/* Site-wide home bar.
   Every page that isn't the homepage carries this strip so there is always
   one tap back to the front door, and the trail shows where you are.
   Self-contained on purpose: the tool pages don't load hub.css, and the
   Opportunity Board runs its own light/dark tokens. Nothing here inherits. */

.hubbar {
  background: #17233b; color: #fff;
  font-size: 13px; line-height: 1.35;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  position: relative; z-index: 50;
  /* the Opportunity Board's dark mode is nearly this navy - the hairline keeps
     the bar readable as a separate strip there */
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* The colour runs edge to edge, but the words line up with the column the
   page's own content sits in - otherwise the trail floats at the far left
   while the page starts 200px in. Every page sets --hb-w (its column width)
   and --hb-gut (twice its side gutter) to match itself. The two media queries
   below mirror the widths at which those pages narrow their own gutter, so
   the bar keeps step instead of drifting on small screens. */
.hubbar-inner {
  width: min(var(--hb-w, 1180px), calc(100% - var(--hb-gut, 36px)));
  margin: 0 auto; padding: 9px 0;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
@media (max-width: 680px) {   /* hub.css narrows .wrap here */
  .hubbar-inner {
    width: min(var(--hb-w, 1180px), calc(100% - var(--hb-gut-680, var(--hb-gut, 36px))));
  }
}
@media (max-width: 520px) {   /* the Assistant narrows .cor-wrap here */
  .hubbar-inner {
    width: min(var(--hb-w, 1180px),
               calc(100% - var(--hb-gut-520, var(--hb-gut-680, var(--hb-gut, 36px)))));
  }
}

.hubbar a { color: #fff; text-decoration: none; }
.hubbar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hubbar a:focus-visible { outline: 2px solid #9ec4ff; outline-offset: 2px; border-radius: 4px; }

.hubbar-home { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.hubbar-mark {
  display: inline-grid; place-items: center; width: 24px; height: 24px;
  border-radius: 7px; background: #fff; color: #17233b;
  font-size: 11px; font-weight: 800;
}
.hubbar-sep { opacity: .45; }
.hubbar-crumb { color: rgba(255,255,255,.86); }
.hubbar-here { color: rgba(255,255,255,.7); font-weight: 600; }

/* Pages whose body carries its own padding keep the bar inside it: a rounded
   strip rather than a full-bleed one. Pulling it edge-to-edge would mean
   negative margins matched to that padding, and those pages change padding at
   phone widths - the mismatch pushed the page sideways. This cannot overflow. */
.hubbar.inset { border-radius: 10px; margin-bottom: 12px; }

@media (max-width: 640px) {
  .hubbar { font-size: 12px; }
  .hubbar-inner { gap: 6px; padding: 8px 0; }
  .hubbar-drop { display: none; }   /* middle steps fold away; home + here stay */
}
@media print { .hubbar { display: none; } }