/* ═══ THE TOP BAR, THIS SITE'S HALF · 2026-10-22 ═══════════════════════════
   bar3.css and bar3.js are the bar every Resolve property shares, kept
   byte-identical to the main site's copies (never edit them here). They read
   their colours and faces from tokens named the main site's way: --bg,
   --surface, --line, --text, --accent and so on. This site names the same
   colours differently (--bg-page, --text-primary, --gold), so this sheet maps
   one onto the other, and adds the wordmark the brand kit specifies.

   The tokens are set on the bar itself, not on :root, so no page that keeps
   its own --bg or --text for something else is touched. They point at the
   site's tokens rather than copying their values, so light mode follows on its
   own: theme.css redefines --bg-page and friends under data-theme="light".

   Linked after bar3.css on every page. Every rule is `.bar.bar-v2 …` for the
   same reason bar3's are: two classes beat the pages' one-class rules.
   ══════════════════════════════════════════════════════════════════════════ */

.bar.bar-v2 {
  --bg:         var(--bg-page);
  --surface:    var(--bg-raised);
  --line:       var(--border);
  /* the main site's hairline inside the grids sits 40% of the way from the
     page to the border: #36293D on charcoal, #DCCCE5 on lilac */
  --line-soft:  color-mix(in srgb, var(--border) 40%, var(--bg-page));
  --text:       var(--text-primary);
  --text-2:     var(--text-secondary);
  --accent:     var(--gold);
  --accent-ink: var(--on-gold);
  --display:    var(--font-display);
  --body:       var(--font-sans);
  --mono:       var(--font-meta);
  --r:          15px;
  font-family: var(--font-sans);
}

/* ── the wordmark, as the brand kit sets it (and the main site shows it) ──
   "resolve" tracked open in the text colour, the sport in the accent and in
   italic: the one italic Billy allows anywhere, the product word in the logo. */
.bar.bar-v2 .door .rr-mark {
  width: 34px; height: 34px; display: block; flex: none; overflow: visible;
}
.bar.bar-v2 .door .nm .q { letter-spacing: .06em; color: var(--text-primary); }
.bar.bar-v2 .door .nm .s {
  font-style: italic; letter-spacing: .02em; padding-right: .06em;
}
@media (max-width: 900px) {
  .bar.bar-v2 .door .rr-mark { width: 30px; height: 30px; }
}
@media (max-width: 420px) {
  .bar.bar-v2 .door .rr-mark { width: 28px; height: 28px; }
}
@media (max-width: 380px) {
  .bar.bar-v2 .door .nm { font-size: 15px; }
  .bar.bar-v2 .door .rr-mark { width: 26px; height: 26px; }
}

/* ── the light switch in the corner ───────────────────────────────────────
   theme.css styles the switch for the old bar: faded to 55% and gold. In the
   corner it is a control like the others, so it shows at full strength. */
.bar.bar-v2 .bar-tools .theme-toggle { opacity: 1; margin: 0; }
.bar.bar-v2 .bar-tools .theme-toggle:hover,
.bar.bar-v2 .bar-tools .theme-toggle:focus-visible { background: transparent; }

/* A cached theme.js from before the switch to this bar would pin its button
   to the top right corner of the page, over the corner of this bar. The bar
   is the only home it has now. */
body:has(.bar.bar-v2) > .theme-toggle { display: none; }

/* the dropdowns under the page links are lists of pages, so they read as text */
.bar.bar-v2 .bar-nav .dd-menu a { justify-content: flex-start; }