/* Role bar — the slim strip an operator sees at the top of every page.
 *
 * Loaded next to nine different page stylesheets, so it styles nothing but
 * its own classes and reads every colour from whichever design tokens the
 * host page happens to define. Three token vocabularies exist in this repo
 * (the scanner pages use --bg-elev/--text-dim, the document pages use
 * --panel/--dim, and ta.html's older sheet uses --bg-card/--text-2), so each
 * value falls through all three before reaching a literal.
 *
 * The background is OPAQUE and stays that way: WebKit refuses to paint the
 * translucent background of a bar pinned to the top of a page, which is how
 * page text bled through the header on every iPhone in August 2026.
 * tests/web/mobile_smoke.playwright.mjs fails the build if that comes back.
 */

.role-bar {
  --role-bar-surface: var(--bg-elev, var(--panel, var(--bg-card, #080c28)));
  --role-bar-line: var(--line, var(--border, var(--border-subtle, #1a2046)));
  --role-bar-quiet: var(--text-dim, var(--dim, var(--text-2, #7e84a8)));
  --role-bar-loud: var(--text, var(--text-primary, #e8eaf2));
  --role-bar-accent: var(--accent, var(--accent-brand, #a8a8e0));
  position: relative;
  /* Just above the full-page background overlays (index.css / analysis.css
   * paint a `position: fixed; inset: 0; z-index: 0` gradient), and BELOW
   * every pinned header on the site: .topbar is z-index 50 and
   * .verdict-pinned 40. The bar sits in normal flow above those headers, so
   * scrolling drags it across them for its own height — and the header, as
   * the thing that stays, has to win that overlap. */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 7px 20px;
  background: var(--role-bar-surface);
  border-bottom: 1px solid var(--role-bar-line);
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 12px;
  line-height: 1.4;
  color: var(--role-bar-quiet);
}

.role-bar-who {
  letter-spacing: 0.03em;
}

.role-bar-name {
  color: var(--role-bar-loud);
  font-weight: 600;
}

.role-bar-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.role-bar-link {
  color: var(--role-bar-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.role-bar-link:hover {
  border-bottom-color: var(--role-bar-accent);
}

.role-bar-logout {
  background: none;
  border: 1px solid var(--role-bar-line);
  border-radius: 5px;
  padding: 2px 10px;
  color: var(--role-bar-quiet);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

.role-bar-logout:hover {
  color: var(--role-bar-loud);
  border-color: var(--role-bar-quiet);
}

/* The footer's way in. Deliberately quiet — it is for the two people who
 * need it, not an invitation to everyone else. The role bar hides it once
 * it is up, because the bar already carries "Log out". */
.footer-login {
  font-size: 11px;
  opacity: 0.55;
}

.footer-login:hover {
  opacity: 1;
}

@media (max-width: 560px) {
  .role-bar {
    padding: 6px 14px;
    font-size: 11px;
    gap: 6px 12px;
  }
}