/* ═══ THE TOP BAR: THIS SITE'S OWN PART · 2026-10-22 ══════════════════════
   The account site (profile.*, detector.*, api.*) wears the family's bar,
   version 3. Its look and behaviour are /assets/bar3.css and /assets/bar3.js,
   byte-identical copies of the kit on the main site. Do not edit those two;
   anything this site needs on top of them lives here. Linked AFTER bar3.css.

   The markup itself is baked into every page by tools/bake_bar.py.

   Every rule is `.bar.bar-v2 …`, two classes, for the same reason bar3.css
   gives: a page's own `.bar` rules must never win.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · the kit's token names, from this site's ─────────────────────────
   bar3.css reads --bg --surface --line --text --accent …; this site calls
   them --bg-page --bg-card --border --text-primary --gold …. Mapped once,
   on the bar, so the panel and every control inside it inherit them in both
   themes (theme.css redefines the right-hand names for light mode). */
.bar.bar-v2 {
  --bg: var(--bg-page);
  --surface: var(--bg-card);
  --line: var(--border);
  --line-soft: var(--border-dashed, var(--border));
  --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-mono);
  --r: var(--radius-card, 16px);
}

/* ── 2 · collisions ──────────────────────────────────────────────────────
   ⛔ base.css styles `.bar` as a 5px SCORE BAR (height 5px, overflow hidden,
   rounded, a bottom margin). The header is `.bar` too. Without this the
   overflow clips the menu, which hangs below the bar, on every desktop page. */
.bar.bar-v2 {
  height: auto; overflow: visible; border-radius: 0; margin: 0;
  -webkit-backdrop-filter: none;
}
/* theme.css paints the light switch at 55% opacity, for when it floated in a
   corner by itself. In the bar it is one control among others. */
.bar.bar-v2 .bar-tools .theme-toggle { opacity: 1; }
.bar.bar-v2 .bar-tools .theme-toggle:hover { background: var(--surface); }
/* `hidden` must always win, or a signed-out visitor sees the account menu */
.bar.bar-v2 [hidden] { display: none !important; }

/* ── 3 · the mark and the name ───────────────────────────────────────────
   The one Resolve mark (brand kit 17c-1, 2026-10-23), the same on every page:
   two pictures in the door, the platinum disc (rr-mark-dk) for dark and the
   plum disc (rr-mark-lt) for light, and the theme HIDES the wrong one. Only
   ever hide: the one that shows keeps its context's own display.
   Light mode on this site is html[data-theme="light"], set before first
   paint by each page's inline script; no attribute (and no JavaScript) is
   dark, so the platinum disc is the default.
   ⛔ `!important` on purpose: bar3.css has `.bar.bar-v2 .door img
   { display:block }` at higher specificity than these two rules.
   "resolve" tracked open in the text colour, the product word in the accent
   and in italic, the ONE italic the house rules allow. */
html:not([data-theme="light"]) .rr-mark.rr-mark-lt { display: none !important; }
html[data-theme="light"] .rr-mark.rr-mark-dk { display: none !important; }
.bar.bar-v2 .door .rr-mark { width: 34px; height: 34px; display: block; flex: none; }
.bar.bar-v2 .door .nm .q { letter-spacing: .06em; color: var(--text); }
.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; }
}

/* ── 4 · the one sign-in control ─────────────────────────────────────────
   Signed out: "log in" (.js-auth-guest). Signed in: "account" (.js-auth-user),
   a small menu holding the account's own places and "log out". theme.js
   shows exactly one of them, and only after the server has said which. */
.bar.bar-v2 .acct { position: relative; display: inline-flex; }
.bar.bar-v2 .acct-btn { font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.bar.bar-v2 .acct-btn .car { font-size: 10px; transition: transform .16s; }
.bar.bar-v2 .acct-btn[aria-expanded="true"] .car { transform: rotate(180deg); }
.bar.bar-v2 .acct-btn:focus-visible,
.bar.bar-v2 .bar-cta:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.bar.bar-v2 .acct-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 210px; display: flex; flex-direction: column; gap: 2px;
  background-color: var(--bg);
  background-image: linear-gradient(
    color-mix(in srgb, var(--text) 6%, var(--bg)),
    color-mix(in srgb, var(--text) 6%, var(--bg)));
  border: 1px solid var(--line); border-radius: var(--r); padding: 6px;
}
.bar.bar-v2 .acct-menu a {
  color: var(--text-2); text-decoration: none; font-size: 14px;
  padding: 10px 11px; border-radius: 9px; min-height: 44px;
  display: flex; align-items: center; white-space: nowrap;
}
.bar.bar-v2 .acct-menu a:hover { color: var(--text); background: var(--surface); }
/* while the server is asked, a visitor whose browser says it is signed in
   sees neither control rather than the wrong one */
html.rr-auth-pending .bar.bar-v2 .js-auth-guest { visibility: hidden; }

/* On a phone bar3.js moves the corner into the foot of the menu. There the
   account menu opens in the flow, under the row, two links to a line, the
   same grid as everything above it. */
@media (max-width: 1024px) {
  .bar.bar-v2 .dp-foot .bar-tools {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  }
  .bar.bar-v2 .dp-foot .bar-tools > .theme-toggle { justify-self: start; }
  .bar.bar-v2 .dp-foot .bar-tools > .bar-cta,
  .bar.bar-v2 .dp-foot .acct-btn { grid-column: 2; justify-self: end; }
  .bar.bar-v2 .dp-foot .acct { display: contents; }
  .bar.bar-v2 .dp-foot .acct-menu {
    position: static; grid-column: 1 / -1; min-width: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
    background: none; border: 0; padding: 0;
  }
  .bar.bar-v2 .dp-foot .acct-menu[hidden] { display: none !important; }
  .bar.bar-v2 .dp-foot .acct-menu a {
    font-size: 13.5px; padding: 9px 10px; border-radius: 8px;
    border: 1px solid var(--line-soft);
  }
}