/* The Backlion app header for pages that don't load rider.css (the mix requests page): the same bar as
   Rider, Crew, account and help — logo to the dashboard, page title, Test/Live tag, account menu.
   Values copy rider.css so the bars match; colours come from the Crew/Rider tokens. */
.app-bar{--bar-surface:#FFFFFF;--bar-ink:#18221D;--bar-muted:#5A6861;--bar-line:#D9E0DA;--bar-soft:#F7E2DD;
  display:flex;align-items:center;gap:10px;padding:8px 14px;padding-top:max(8px,env(safe-area-inset-top));border-bottom:1px solid var(--bar-line);background:var(--bar-surface);color:var(--bar-ink);position:sticky;top:0;z-index:10;
  font:14px/1.45 "Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif}
@media (prefers-color-scheme:dark){.app-bar{--bar-surface:#19211D;--bar-ink:#E6ECE8;--bar-muted:#97A59E;--bar-line:#2A3530;--bar-soft:#3A1E18}}
.app-bar .brand{display:flex;align-items:center;gap:10px;min-width:0}
.app-bar .brand-home{display:block;margin:0;color:inherit}
.app-bar .brand-mark{width:28px;height:28px;flex:none;display:block}
.app-bar .brand-t{font:700 22px/1 "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
.app-bar .bar-end{display:flex;gap:6px;align-items:center;margin-left:auto}
.app-bar details.menu{position:relative}
.app-bar details.menu>summary{list-style:none}
.app-bar details.menu>summary::-webkit-details-marker{display:none}
.app-bar .env-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font:700 11px "Hanken Grotesk",system-ui,sans-serif;letter-spacing:.6px;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.app-bar .env-pill::after{content:"▾";font-size:9px;opacity:.7}
.app-bar .env-menu.test .env-pill{background:#ffd54a;color:#3a2c00}
.app-bar .env-menu.live .env-pill{background:#1f9d55;color:#fff}
.app-bar .menu-pop{position:absolute;left:0;top:calc(100% + 6px);min-width:260px;max-width:min(320px,calc(100vw - 32px));background:var(--bar-surface);border:1px solid var(--bar-line);border-radius:12px;box-shadow:0 10px 28px #0003;padding:6px;display:grid;gap:2px;z-index:40}
.app-bar .menu-pop button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;padding:8px 10px;border-radius:8px;border:0;background:none;color:var(--bar-ink);font:600 14px "Hanken Grotesk",system-ui,sans-serif;cursor:pointer;width:100%;min-height:0}
.app-bar .menu-pop small{color:var(--bar-muted);font-weight:400;font-size:12px}
.app-bar .menu-pop button:hover,.app-bar .menu-pop [aria-current="true"]{background:var(--bar-soft)}
@media (max-width:600px){.app-bar{gap:8px;padding-left:10px;padding-right:10px}.app-bar .brand{gap:8px}.app-bar .brand-t{font-size:20px}}