/* why: portal-owned layer over the synced chrome: stacking, dark tokens, bottom bar */
/* trap: theme tokens are scoped to .mfam-chrome, so dark values are re-set here */
.mast.mfam-chrome { z-index: 60; font: 400 var(--t-16)/1.5 var(--sans); color: var(--ink); -webkit-font-smoothing: auto; }
.mast.mfam-chrome *, .mast.mfam-chrome *::before, .mast.mfam-chrome *::after { box-sizing: border-box; }
:where(.mast) a { color: var(--ink); text-decoration: none; }
.mast .logo img { display: block; max-width: none; }
.mast .btn { margin: 0; box-shadow: none; }
.mast .btn--solid { color: var(--on-accent); }
.mast form.member-pick__form { margin: 0; display: inline-flex; }
/* trap: scoped .btn display (0,2,0) beats the theme's .member-pick__up{display:none} on phones */
@media (max-width: 640px) { .mast .member-pick__up { display: none; } }
.mast button { font-family: var(--sans); }
/* why: client pages share the bar's .wrap box, so logo edge = content edge; staff stays full width.
   ref: mirrors theme .wrap (76rem, 48px, 16px under 760); test_client_main_matches_bar_wrap. */
body > main.client-main { max-width: 76rem; padding-left: 3rem; padding-right: 3rem; }
@media (max-width: 760px) { body > main.client-main { padding-left: 1rem; padding-right: 1rem; } }
:root[data-theme="dark"] .mfam-chrome {
  --bg: #12151a; --tint: #232833; --field: #1a1e26;
  --line: #3d4759; --line-strong: #4a566b; --line-control: #5b667a;
  --ink: #e7e9ee; --ink-2: #b9c0cc; --ink-3: #97a1b3;
  --accent: #58a0ef; --accent-hover: #7ab3f3; --on-accent: #12151a;
  --accent-ink: #58a0ef; --accent-ink-hover: #7ab3f3; --accent-tint: #1d2a40; --neg: #f16161;
  color-scheme: dark;
}
:root[data-theme="dark"] .mast .logo img { filter: invert(1); }

:root { --pbar-h: 40px; }
body:has(> .pbar) { padding-bottom: calc(var(--pbar-h) + env(safe-area-inset-bottom, 0px)); }
.pbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: flex; align-items: center; gap: 12px;
  height: calc(var(--pbar-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 16px env(safe-area-inset-bottom, 0px);
  background: var(--panel); border-top: 1px solid var(--border);
  font-size: 13px; line-height: 1.2;
}
.pbar-name { flex: none; font-size: 14px; color: var(--text); font-weight: 600; white-space: nowrap; }
.pbar-extra { display: flex; align-items: center; min-width: 0; flex: 0 1 320px; }
.pbar-extra .q-select { width: 100%; padding: 4px 8px; font-size: 13px; text-overflow: ellipsis; }
.pbar-nav { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pbar-nav::-webkit-scrollbar { display: none; }
.pbar-nav a { flex: none; color: var(--mute); text-decoration: none; padding: 5px 10px; border-radius: 4px; white-space: nowrap; }
.pbar-nav a.on { color: var(--text); background: var(--panel2); }
.pbar-nav a:hover { color: var(--text); }
.pbar .gsearch { flex: none; }
.pbar .gsearch-list { top: auto; bottom: calc(100% + 8px); }
.pbar .ver-badge { flex: none; }
.pbar .theme-toggle { margin-left: auto; flex: none; }
.pbar-nav ~ .theme-toggle { margin-left: 0; }
@media (max-width: 760px) {
  .pbar { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .pbar.has-nav .pbar-name, .pbar.has-extra .pbar-name { display: none; }
  .pbar .gsearch { display: none; }
  .pbar-nav { gap: 0; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent); }
  .pbar-nav a { padding: 5px 8px; }
}