/* ═══ THE TOP BAR, version 3 · 2026-10-22 ═════════════════════════════════
   ONE bar for every Resolve property: this site, the fourteen sport sites,
   oracle, the account site, DeepDive and resolve fantasy. Each of them carries
   a byte-identical copy of this file and of bar3.js (new file names because
   /assets/* is cached for a week and Cloudflare ignores ?v=).

     [ ◎ resolve nba ▾ ]  home  live  players  teams ▾  …     ☾  log in

   THE NAME IS THE DOOR. It opens the same menu on every site, built from
   assets/family-menu.json by tools/family_menu.py, never typed by hand. The
   page's own links sit beside it. Every control gathers in the right corner,
   and exactly one of them is about signing in.

   ON A PHONE (≤1024px) the bar is the name and ONE menu button, nothing else
   (Billy, 2026-10-22). Both open the same panel. The panel then carries this
   site's own links first (.dp-here), the family menu, and at the foot the
   light switch and log in, which bar3.js moves out of the bar into .dp-foot.
   There is no separate drawer any more, anywhere.

   ⚠️ Every rule is written `.bar.bar-v2 …` on purpose. Pages still carry their
   own inline `.bar { … }` block, which would otherwise win on source order
   because inline <style> comes after this <link>. Two classes beat one.

   ⚠️ Colour and radius come from each page's own :root, with a literal
   fallback on every one. A property whose tokens have other names (the sport
   sites say --text-primary, --gold) maps them onto these in its own stylesheet.
   ══════════════════════════════════════════════════════════════════════════ */

.bar.bar-v2 {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-start;
  padding: 0 22px;
  min-height: 62px;
  /* the page colour, not a fixed plum. The old value was a hardcoded
     rgba(49,16,59,.7) that light mode then had to paint over a second time,
     and the small grey text was below the readable minimum on that band. */
  background: var(--bg, #201825);
  backdrop-filter: none;
  border-bottom: 1px solid var(--line, #563B66);
  position: sticky;
  top: 0;
  z-index: 50;
}

/* ── the door ─────────────────────────────────────────────────────────── */
.bar.bar-v2 .door {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 6px 11px 6px 8px;
  border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--text, #C8DACE);
  font-family: var(--body, sans-serif); cursor: pointer;
  text-decoration: none;
}
.bar.bar-v2 .door:hover,
.bar.bar-v2 .door[aria-expanded="true"] {
  border-color: var(--line, #563B66);
  background: var(--surface, #241F2C);
}
.bar.bar-v2 .door:focus-visible {
  outline: 2px solid var(--accent, #7aad8e); outline-offset: 2px;
}
.bar.bar-v2 .door img { height: 30px; width: auto; display: block; }
.bar.bar-v2 .door .nm {
  font-family: var(--display, Georgia, serif); font-weight: 400;
  font-size: 21px; letter-spacing: -.01em; white-space: nowrap;
}
.bar.bar-v2 .door .nm .q { color: var(--text-2, #9FAEA5); }
.bar.bar-v2 .door .nm .s { color: var(--accent, #7aad8e); }
.bar.bar-v2 .door .car { font-size: 11px; color: var(--text-2, #9FAEA5);
  display: inline-block; transition: transform .16s; }
.bar.bar-v2 .door[aria-expanded="true"] .car { transform: rotate(180deg); }

/* ── the page's own links ─────────────────────────────────────────────── */
.bar.bar-v2 .bar-nav { display: flex; align-items: center; gap: 2px; flex: none; }
.bar.bar-v2 .bar-nav a {
  color: var(--text-2, #9FAEA5); text-decoration: none; font-size: 14px;
  padding: 10px 11px; border-radius: 9px; min-height: 44px;
  display: inline-flex; align-items: center;
}
.bar.bar-v2 .bar-nav a:hover { color: var(--text, #C8DACE); background: var(--surface, #241F2C); }
.bar.bar-v2 .bar-nav a.on { color: var(--text, #C8DACE); background: var(--surface, #241F2C); }

/* ── the controls, all of them, in the right corner ───────────────────── */
.bar.bar-v2 .bar-tools {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
}
.bar.bar-v2 .bar-cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; min-height: 44px;
  color: var(--accent-ink, #201825); background: var(--accent, #7aad8e);
  padding: 9px 15px; border-radius: 9px;
  border: 1px solid var(--accent, #7aad8e); text-decoration: none;
}
.bar.bar-v2 .bar-cta:hover { filter: brightness(1.06); }
.bar.bar-v2 .bar-quiet {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; color: var(--text-2, #9FAEA5); text-decoration: none;
  padding: 8px 11px; border-radius: 9px;
}
.bar.bar-v2 .bar-quiet:hover { color: var(--text, #C8DACE); background: var(--surface, #241F2C); }

/* theme.js injects the light switch here rather than beside the logo */
.bar.bar-v2 .bar-tools .theme-toggle,
.bar.bar-v2 .bar-tools .theme-toggle-mobile {
  position: static; display: inline-flex; align-items: center;
  justify-content: center; min-height: 44px; min-width: 44px;
  border: 1px solid var(--line, #563B66); border-radius: 9px;
  background: transparent; color: var(--text-2, #9FAEA5);
  padding: 6px 9px; cursor: pointer; left: auto; top: auto; transform: none;
}
.bar.bar-v2 .bar-tools .theme-toggle:hover { color: var(--accent, #7aad8e); }
.bar.bar-v2 .bar-tools .theme-toggle i { font-size: 15px; }

/* THE one menu button. It only shows on a phone, and it opens the same panel
   as the name. The old .hamburger (which opened a separate drawer) is retired. */
.bar.bar-v2 .menu-btn {
  display: none; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; margin-left: auto;
  border: 1px solid var(--line, #563B66); border-radius: 9px;
  background: transparent; color: var(--text, #C8DACE); padding: 8px 10px;
  cursor: pointer; font-size: 20px; line-height: 1;
}
.bar.bar-v2 .menu-btn[aria-expanded="true"] { background: var(--surface, #241F2C); }
.bar.bar-v2 .menu-btn:focus-visible { outline: 2px solid var(--accent, #7aad8e); outline-offset: 2px; }
.bar.bar-v2 .hamburger { display: none !important; }

/* ── a page link that holds more links (sport sites: teams ▾, positions ▾) ── */
.bar.bar-v2 .bar-nav .dd { position: relative; display: inline-flex; }
.bar.bar-v2 .bar-nav .dd-btn {
  color: var(--text-2, #9FAEA5); font: inherit; font-size: 14px;
  padding: 10px 11px; border-radius: 9px; min-height: 44px;
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; cursor: pointer; white-space: nowrap;
}
.bar.bar-v2 .bar-nav .dd-btn::after { content: "\25BE"; font-size: 10px; transition: transform .16s; }
.bar.bar-v2 .bar-nav .dd-btn[aria-expanded="true"]::after { transform: rotate(180deg); }
.bar.bar-v2 .bar-nav .dd-btn:hover,
.bar.bar-v2 .bar-nav .dd-btn[aria-expanded="true"],
.bar.bar-v2 .bar-nav .dd-btn.on { color: var(--text, #C8DACE); background: var(--surface, #241F2C); }
.bar.bar-v2 .bar-nav .dd-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 210px; display: flex; flex-direction: column; gap: 2px;
  background-color: var(--bg, #201825);
  background-image: linear-gradient(
    color-mix(in srgb, var(--text, #C8DACE) 6%, var(--bg, #201825)),
    color-mix(in srgb, var(--text, #C8DACE) 6%, var(--bg, #201825)));
  border: 1px solid var(--line, #563B66); border-radius: var(--r, 12px);
  padding: 6px;
}
.bar.bar-v2 .bar-nav .dd-menu[hidden] { display: none; }
.bar.bar-v2 .bar-nav .dd-menu a { width: 100%; }

/* ── what is behind the name ──────────────────────────────────────────── */
.bar.bar-v2 .door-wrap { position: relative; display: inline-flex; flex: none; }
.bar.bar-v2 .door-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  width: 560px; max-width: calc(100vw - 28px);
  background-color: var(--bg, #201825);
  background-image: linear-gradient(
    color-mix(in srgb, var(--text, #C8DACE) 6%, var(--bg, #201825)),
    color-mix(in srgb, var(--text, #C8DACE) 6%, var(--bg, #201825)));
  border: 1px solid var(--line, #563B66);
  border-radius: var(--r, 12px);
  padding: 12px;
  max-height: calc(100vh - 78px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* a hairline, not a soft shadow. That is the house rule everywhere else. */
  box-shadow: none;
}
.bar.bar-v2 .door-panel[hidden] { display: none; }
/* an open menu sits above anything that floats on the page, and the oracle's
   floating tab (oracle.resolveresearcher.com/static/buddy.js, on most pages of
   most properties, itself at z-index 2147483000) steps out of the way */
html.rr-menu-open .bar.bar-v2 { z-index: 2147483600; }
html.rr-menu-open #rr-oracle-buddy { visibility: hidden; }
/* The sibling properties that get a row of their own at the top of the door,
   above the grids: the oracle and, since 2026-09-18 on this site, the brief.
   The brief is sold on its own for $5/mo and most of the people who buy it
   never open the detector, so it switches property here, alongside the
   oracle, the same way it already does in the detector's own copy of this bar. */
.bar.bar-v2 .dp-feature {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  padding: 12px 13px; border: 1px solid var(--line, #563B66);
  border-radius: 11px; background: var(--bg, #201825); margin-bottom: 12px;
  min-height: 44px;
}
.bar.bar-v2 .dp-feature .dot { color: var(--accent, #7aad8e); font-size: 15px; }
.bar.bar-v2 .dp-feature b { display: block; font-size: 15px; color: var(--text, #C8DACE); font-weight: 600; }
.bar.bar-v2 .dp-feature span { display: block; color: var(--text-2, #9FAEA5); font-size: 13px; }
.bar.bar-v2 .dp-label {
  display: block; font-family: var(--mono, var(--body, sans-serif));
  font-size: 10px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-2, #9FAEA5);
  padding: 10px 4px 6px;
}
.bar.bar-v2 .dp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bar.bar-v2 .dp-grid a {
  text-decoration: none; font-size: 13.5px; color: var(--text-2, #9FAEA5);
  padding: 9px 10px; border-radius: 8px;
  border: 1px solid var(--line-soft, var(--line, #563B66));
  min-height: 44px; display: flex; align-items: center;
}
.bar.bar-v2 .dp-grid a:hover { color: var(--text, #C8DACE); border-color: var(--accent, #7aad8e); }
.bar.bar-v2 .dp-grid a.hub { color: var(--text, #C8DACE); }
/* the property you are on is lit, in place, so nothing moves between sites */
.bar.bar-v2 .dp-grid a.on {
  color: var(--text, #C8DACE); border-color: var(--accent, #7aad8e);
  background: color-mix(in srgb, var(--accent, #7aad8e) 10%, transparent);
}
.bar.bar-v2 .dp-feature.on { border-color: var(--accent, #7aad8e); }
.bar.bar-v2 .bar-nav a, .bar.bar-v2 .dp-grid a { white-space: nowrap; }

/* phone only: this site's own links lead the panel, the controls close it */
.bar.bar-v2 .dp-here { display: none; }
.bar.bar-v2 .dp-here .dp-label { padding-top: 2px; }
.bar.bar-v2 .dp-here .dp-sub { grid-column: 1 / -1; font-size: 11px;
  color: var(--text-2, #9FAEA5); padding: 6px 4px 0; letter-spacing: .04em; }
.bar.bar-v2 .dp-here { padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line, #563B66); }
.bar.bar-v2 .dp-foot { display: none; }

/* ── a narrower screen: the links tighten before anything gives ───────── */
@media (max-width: 1240px) {
  .bar.bar-v2 { gap: 10px; padding: 0 16px; }
  .bar.bar-v2 .bar-nav a, .bar.bar-v2 .bar-nav .dd-btn { padding: 10px 8px; font-size: 13.5px; }
  .bar.bar-v2 .door .nm { font-size: 19px; }
}

/* ── a phone or a tablet: the name and one menu button ───────────────── */
@media (max-width: 1024px) {
  .bar.bar-v2 { padding: 0 14px; gap: 10px; min-height: 58px; }
  .bar.bar-v2 .bar-nav { display: none; }
  .bar.bar-v2 > .bar-tools { display: none; }   /* until bar3.js moves it */
  .bar.bar-v2 .door .nm { font-size: 18px; }
  .bar.bar-v2 .door img { height: 26px; }
  .bar.bar-v2 .menu-btn { display: inline-flex; }
  .bar.bar-v2 .door-panel {
    position: fixed; top: 58px; left: 8px; right: 8px; width: auto;
    max-width: none; max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px);
  }
  .bar.bar-v2 .dp-grid { grid-template-columns: repeat(2, 1fr); }
  .bar.bar-v2 .dp-here { display: block; }
  .bar.bar-v2 .dp-here[data-dupe="site"] ~ .dp-group[data-group="site"],
  .bar.bar-v2 .dp-here[data-dupe="sports"] ~ .dp-group[data-group="sports"],
  .bar.bar-v2 .dp-here[data-dupe="fantasy"] ~ .dp-group[data-group="fantasy"],
  .bar.bar-v2 .dp-here[data-dupe="ai"] ~ .dp-group[data-group="ai"] { display: none; }
  /* No scroll lock here on purpose: html{overflow:hidden} threw
     /sportshome/ back to the top (a page whose body sets its own overflow
     becomes the scroller). A property that has tested a lock on its own
     pages adds it in its own stylesheet (resolve fantasy does). */
  .bar.bar-v2 .dp-foot {
    display: block; margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--line, #563B66);
  }
  .bar.bar-v2 .dp-foot .bar-tools {
    margin: 0; display: flex; align-items: center; gap: 10px;
    justify-content: space-between;
  }
  .bar.bar-v2 .dp-foot .theme-toggle {
    gap: 8px; padding: 6px 12px; width: auto; height: auto; white-space: nowrap;
  }
  .bar.bar-v2 .dp-foot .theme-toggle::after {
    content: attr(title); font-family: var(--body, sans-serif); font-size: 14px;
  }
  .bar.bar-v2 .dp-foot .bar-cta { padding: 9px 15px; }
  .bar.bar-v2 .dp-foot .bar-cta .lbl { display: inline; }
}
@media (max-width: 420px) {
  .bar.bar-v2 .door .nm { font-size: 16px; }
  .bar.bar-v2 .door { padding: 6px 7px 6px 5px; gap: 7px; }
}

/* ── the sign-in pages ────────────────────────────────────────────────────
   These keep a reduced bar on purpose. A page whose whole job is to get one
   form filled in should not offer fifteen ways to leave, so the name is a
   plain link home rather than a door, and the one counterpart action ("new
   here? sign up") sits in the same right corner as everywhere else. On a
   phone that corner stays in the bar, because there is no panel to move to. */
.bar.bar-v2.bar-plain .door { cursor: pointer; }
@media (max-width: 1024px) {
  .bar.bar-v2.bar-plain > .bar-tools { display: flex; }
}
@media (max-width: 560px) {
  .bar.bar-v2.bar-plain .bar-tools > span { display: none; }
}
.bar.bar-v2 .bar-tools > span {
  font-size: 14px; color: var(--text-2, #9FAEA5);
}
.bar.bar-v2 .bar-tools > a:not(.bar-cta) {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; color: var(--accent, #7aad8e); text-decoration: none;
  font-weight: 600; padding: 8px 11px; border-radius: 9px;
}
.bar.bar-v2 .bar-tools > a:not(.bar-cta):hover {
  background: var(--surface, #241F2C);
}