/* ═══ THE TOP BAR ═════════════════════════════════════════════════════════
   ONE definition for every page on this site.

   Until now the bar was copied into each page's inline <style>, 42 times, and
   the copies had drifted: the home page carried four dropdowns in the middle,
   /sportshome/ carried nine sport links plus three dropdowns, and the two did
   not line up. This file is the single source, and the pattern is the one
   already shipping on the fourteen sport sites, on resolve leagues, and on
   both draft assistants: THE NAME IS THE DOOR.

     [ resolve research ▾ ]  home  writings  about  pricing     ☾  account  ☰

   The name leads the bar and opens everything that switches property. The
   page's own links sit beside it. Every control gathers in the right corner.
   On a phone it is one menu button, never a row of bare carets.

   ⚠️ Every rule is written `.bar.bar-v2 …` on purpose. Each page still carries
   its own inline `.bar { … }` block, which would otherwise win on source order
   because inline <style> comes after this <link>. Two classes beat one, so
   this file wins wherever it speaks and stays silent everywhere else.

   ⚠️ Colour and radius come from each page's own :root, with a literal
   fallback on every one, because a handful of pages define fewer tokens than
   the rest and a bar that paints nothing is worse than a bar that is 1px off.
   ══════════════════════════════════════════════════════════════════════════ */

.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; }
.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;
}
.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, on the pages that carry a drawer */
.bar.bar-v2 .hamburger {
  display: none; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; position: static;
  border: 1px solid var(--line, #563B66); border-radius: 9px;
  background: transparent; color: var(--text, #C8DACE); padding: 8px 10px;
  cursor: pointer;
}
.bar.bar-v2 .hamburger i { font-size: 20px; }

/* ── what is behind the name ──────────────────────────────────────────── */
.bar.bar-v2 .door-wrap { position: relative; display: inline-flex; }
.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; }
.bar.bar-v2 .dp-oracle {
  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-oracle i,
.bar.bar-v2 .dp-oracle .dot { color: var(--accent, #7aad8e); font-size: 15px; }
.bar.bar-v2 .dp-oracle b { display: block; font-size: 15px; color: var(--text, #C8DACE); font-weight: 600; }
.bar.bar-v2 .dp-oracle span { display: block; color: var(--text-2, #9FAEA5); font-size: 13px; }
.bar.bar-v2 .dp-label {
  display: block; font-family: var(--mono, ui-monospace, monospace);
  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); }
.bar.bar-v2 .dp-site { display: none; }

@media (max-width: 900px) {
  .bar.bar-v2 { padding: 0 14px; gap: 10px; min-height: 58px; }
  .bar.bar-v2 .bar-nav { display: none; }
  .bar.bar-v2 .door .nm { font-size: 18px; }
  .bar.bar-v2 .door img { height: 26px; }
  .bar.bar-v2 .hamburger { display: inline-flex; }
  .bar.bar-v2 .door-panel { width: calc(100vw - 28px); left: -8px; }
  .bar.bar-v2 .dp-grid { grid-template-columns: repeat(2, 1fr); }
  /* on a phone the bar's own links have nowhere to sit, so the panel carries
     them. On a page with no drawer this is the only place they exist. */
  .bar.bar-v2 .dp-site { display: block; }
}
/* ── the narrow end ──────────────────────────────────────────────────────
   At 390 the full bar measures 415px, so something has to give. What gives is
   the words on the controls, never the controls themselves: the account button
   keeps its 44px target and drops to its icon, and the sign-in pages' "new
   here?" aside drops out. The name stays whole, because the name is the door. */
@media (max-width: 560px) {
  .bar.bar-v2 { gap: 8px; }
  .bar.bar-v2 .bar-tools { gap: 8px; }
  .bar.bar-v2 .bar-cta { padding: 9px; min-width: 44px; justify-content: center; }
  .bar.bar-v2 .bar-cta .lbl { display: none; }
  .bar.bar-v2 .bar-cta i { font-size: 18px; }
  .bar.bar-v2 .bar-tools > span { display: none; }
}
@media (max-width: 420px) {
  .bar.bar-v2 .dp-grid { grid-template-columns: repeat(2, 1fr); }
  .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. */
.bar.bar-v2.bar-plain .door { cursor: pointer; }
.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);
}