/* ═══════════════════════════════════════════════════════════════════
   <studio-appbar> — the shared studio chrome.

   The bar has to read correctly under TWO token systems: the kit
   (frontend-shared/theme.css, used by /social and /cadence) and
   MainFrame (static/css/design-system.css, eight palettes). It owns no
   palette of its own — every paint goes through an --ab-* token whose
   fallback chain walks kit → MainFrame → a literal floor, so the bar
   inherits whichever system the host loaded.

   TWO surfaces, deliberately:
     • the BAR reads from the host's chrome tokens (in the React apps
       that surface is dark in BOTH schemes — --chrome is light-dark()
       with two dark values — so bar ink must come from the chrome ink
       family, never from --ink);
     • the POPOVERS read from the host's card tokens, so a menu is a
       light card in a light scheme and a dark card in a dark one.

   Literal colours may only exist in the :root block below (ui-gate).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ab-h: 52px;
  --ab-h-phone: 48px;

  /* The bar surface. kit: --chrome · MainFrame: --chrome-bg (its
     app-header token, themed per palette) → --bg-secondary. */
  --ab-bg: var(--chrome, var(--chrome-bg, var(--bg-secondary, #101a26)));
  /* Ink ON that surface. social/cadence publish --chrome-ink; MainFrame
     publishes --chrome-fg. The literal is the bare-kit floor, where
     --chrome is dark in both schemes and a light ink is always right. */
  --ab-ink: var(--chrome-ink, var(--chrome-fg, var(--text-primary, #e6ecf5)));
  --ab-muted: var(--chrome-muted, var(--chrome-fg-muted, #93a3b5));
  --ab-line: var(--chrome-line, var(--chrome-border, rgb(255 255 255 / 0.13)));
  --ab-accent: var(--chrome-accent, var(--navy-bright, var(--accent, #7fb2ec)));

  /* Popover surface — the host's card, so menus follow the scheme. */
  --ab-panel: var(--card, var(--bg-secondary, #15212e));
  --ab-panel-ink: var(--ink, var(--text-primary, #e6ecf5));
  --ab-panel-muted: var(--muted, var(--text-secondary, #8fa0b0));
  --ab-panel-faint: var(--faint, var(--text-muted, #7b8da0));
  --ab-panel-line: var(--line, var(--border, #263247));
  --ab-panel-tint: var(--card-tint, var(--bg-tertiary, #1a2534));
  /* MainFrame contrast-checks --accent-text for accent ON a background;
     raw --accent is the tile/fill colour. Prefer the checked one. */
  --ab-panel-accent: var(--navy-bright, var(--accent-text, var(--accent, #2563a8)));
  --ab-panel-danger: var(--danger, var(--error, #c0392b));

  /* The unread badge is fixed on purpose: every chained alternative
     (accent, --danger) fails contrast against white in one of the four
     host × scheme combinations. 5.0:1 white-on-red everywhere. */
  --ab-badge-bg: #c0392b;
  --ab-badge-ink: #ffffff;

  --ab-r: var(--radius, var(--radius-sm, 8px));
  --ab-r-sm: var(--r-sm, var(--radius-xs, 6px));
  --ab-pill: var(--r-pill, var(--radius-full, 999px));
  --ab-shadow: var(--e3, var(--shadow-lg, 0 18px 44px rgb(0 0 0 / 0.34)));
  --ab-font: var(--font-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  --ab-display: var(--font-display, var(--font-heading, 'Iowan Old Style', Georgia, serif));
  --ab-fast: var(--d-fast, var(--duration-fast, 120ms));
  --ab-ease: var(--ease, var(--ease-out, cubic-bezier(0.25, 0.6, 0.3, 1)));
}

/* ── The bar ──────────────────────────────────────────────────── */
studio-appbar {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: var(--ab-h);
  padding: 0 12px;
  box-sizing: border-box;
  position: relative;
  font-family: var(--ab-font);
  font-size: 13px;
  color: var(--ab-ink);
  background: var(--ab-bg);
  border-bottom: 1px solid var(--ab-line);
}
studio-appbar * { box-sizing: border-box; }
studio-appbar [hidden] { display: none !important; }

studio-appbar > .ab-left { order: 10; position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
studio-appbar > [slot='nav'] { order: 30; display: flex; align-items: center; gap: 4px; min-width: 0; margin-left: 10px; }
studio-appbar > .ab-gap { order: 40; flex: 1 1 auto; min-width: 8px; }
studio-appbar > [slot='actions'] { order: 50; display: flex; align-items: center; gap: 6px; }
studio-appbar > .ab-right { order: 60; display: flex; align-items: center; gap: 2px; }
studio-appbar .ab-anchor { position: relative; display: flex; align-items: center; }

/* ── Wordmark ─────────────────────────────────────────────────── */
.ab-mark {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 4px 4px; border-radius: var(--ab-r-sm);
  color: var(--ab-ink); text-decoration: none; min-width: 0;
}
.ab-mark:hover { background: color-mix(in srgb, var(--ab-ink) 8%, transparent); }
/* The monogram is an accent TINT carrying the bar's ink, never ink on a
   solid accent: "what is legible on the accent" has a different answer
   in each of the four host × scheme combinations, a tint has one. */
.ab-mono {
  display: grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: var(--ab-r-sm);
  background: color-mix(in srgb, var(--ab-accent) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ab-accent) 45%, transparent);
  color: var(--ab-ink);
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.01em;
}
.ab-name {
  font-family: var(--ab-display);
  font-size: 16px; font-weight: 600; letter-spacing: -0.012em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* MainFrame's wordmark is the one that is set, not written. */
.ab-mark[data-app='mainframe'] .ab-name {
  font-family: var(--ab-font);
  font-size: 12.5px; font-weight: 750;
  text-transform: uppercase; letter-spacing: 0.13em;
}

/* ── Icon buttons ─────────────────────────────────────────────── */
.ab-icon {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 32px; min-width: 32px; padding: 0 7px;
  border: 0; border-radius: var(--ab-r-sm);
  background: none; color: var(--ab-muted); cursor: pointer;
  font: inherit; line-height: 1;
  transition: background var(--ab-fast) var(--ab-ease), color var(--ab-fast) var(--ab-ease);
}
.ab-icon:hover { background: color-mix(in srgb, var(--ab-ink) 9%, transparent); color: var(--ab-ink); }
.ab-icon[aria-expanded='true'] { background: color-mix(in srgb, var(--ab-ink) 13%, transparent); color: var(--ab-ink); }
studio-appbar :focus-visible {
  outline: 2px solid var(--ab-accent);
  outline-offset: 2px;
}

.ab-switch { padding: 0 4px 0 6px; }
.ab-caret { display: inline-flex; opacity: 0.75; }
.ab-kbd {
  font-family: var(--ab-font); font-size: 10px; font-weight: 650; letter-spacing: 0.02em;
  padding: 1px 4px; border-radius: 4px;
  border: 1px solid var(--ab-line);
  color: var(--ab-muted);
}

/* Bell + badge */
.ab-bell { position: relative; }
.ab-badge {
  position: absolute; top: 2px; right: 0;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--ab-pill);
  background: var(--ab-badge-bg); color: var(--ab-badge-ink);
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px var(--ab-bg);
}

/* Avatar */
.ab-avatar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; width: 32px; margin-left: 2px; padding: 0;
  border: 0; border-radius: var(--ab-pill); background: none; cursor: pointer;
}
.ab-avatar {
  display: grid; place-items: center; overflow: hidden;
  width: 26px; height: 26px; border-radius: var(--ab-pill);
  background: color-mix(in srgb, var(--ab-ink) 14%, transparent);
  color: var(--ab-ink);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px var(--ab-line);
}
.ab-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-avatar-btn:hover .ab-avatar { box-shadow: inset 0 0 0 1px var(--ab-accent); }
.ab-avatar.lg { width: 34px; height: 34px; font-size: 12.5px; }

/* ── Popovers ─────────────────────────────────────────────────── */
.ab-pop {
  position: absolute; top: calc(100% - 2px); right: 0;
  z-index: var(--z-menu, 60);
  display: none;
  min-width: 216px;
  padding: 6px;
  border: 1px solid var(--ab-panel-line); border-radius: var(--ab-r);
  background: var(--ab-panel); color: var(--ab-panel-ink);
  box-shadow: var(--ab-shadow);
  font-size: 13px;
}
.ab-pop.open { display: block; animation: ab-drop var(--ab-fast) var(--ab-ease); }
@keyframes ab-drop { from { opacity: 0; transform: translateY(-4px); } }
.ab-pop-switch { left: 0; right: auto; min-width: 244px; }
.ab-pop-title {
  padding: 5px 8px 6px;
  font-size: var(--caps-size, 10.5px); font-weight: 750;
  letter-spacing: var(--caps-track, 0.07em); text-transform: uppercase;
  color: var(--ab-panel-faint);
}

/* Switcher rows */
.ab-app {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: var(--ab-r-sm);
  color: var(--ab-panel-ink); text-decoration: none;
}
.ab-app:hover { background: var(--ab-panel-tint); }
.ab-app.current { background: color-mix(in srgb, var(--ab-panel-accent) 12%, transparent); }
.ab-app-mono {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: var(--ab-r-sm);
  background: color-mix(in srgb, var(--ab-panel-ink) 8%, transparent);
  color: var(--ab-panel-muted);
  font-size: 12.5px; font-weight: 800;
}
.ab-app.current .ab-app-mono {
  background: color-mix(in srgb, var(--ab-panel-accent) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ab-panel-accent) 45%, transparent);
  color: var(--ab-panel-accent);
}
.ab-app-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ab-app-label { font-size: 13px; font-weight: 650; letter-spacing: -0.005em; }
.ab-app-hint { font-size: 11px; color: var(--ab-panel-faint); }
.ab-app-tick { color: var(--ab-panel-accent); display: flex; }

/* Avatar menu */
.ab-who {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--ab-panel-line);
}
.ab-who .ab-avatar {
  background: color-mix(in srgb, var(--ab-panel-ink) 10%, transparent);
  color: var(--ab-panel-ink);
  box-shadow: inset 0 0 0 1px var(--ab-panel-line);
}
.ab-who-text { min-width: 0; }
.ab-who-name {
  font-size: 13.5px; font-weight: 650; letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ab-who-handle {
  font-size: 11.5px; color: var(--ab-panel-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ab-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px; border: 0; border-radius: var(--ab-r-sm);
  background: none; color: var(--ab-panel-ink); text-decoration: none;
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.ab-item:hover { background: var(--ab-panel-tint); }
.ab-item svg { color: var(--ab-panel-muted); flex: none; }

/* ── Bell panel ───────────────────────────────────────────────── */
.ab-pop-bell { width: 380px; max-width: calc(100vw - 16px); padding: 0; }
.ab-bell-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px 8px 12px; border-bottom: 1px solid var(--ab-panel-line);
}
.ab-bell-head .ab-pop-title { padding: 0; flex: 1; }
.ab-chips { display: flex; gap: 4px; }
.ab-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border: 1px solid transparent; border-radius: var(--ab-pill);
  background: var(--ab-panel-tint); color: var(--ab-panel-muted);
  font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.ab-chip.on {
  background: color-mix(in srgb, var(--ab-panel-accent) 15%, transparent);
  border-color: color-mix(in srgb, var(--ab-panel-accent) 34%, transparent);
  color: var(--ab-panel-accent);
}
.ab-chip-n { font-size: 10.5px; font-weight: 800; opacity: 0.85; }

.ab-notes { max-height: min(52vh, 420px); overflow-y: auto; padding: 4px; }
.ab-group {
  padding: 8px 8px 4px;
  font-size: var(--caps-size, 10.5px); font-weight: 750;
  letter-spacing: var(--caps-track, 0.07em); text-transform: uppercase;
  color: var(--ab-panel-faint);
}
.ab-note {
  position: relative;
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 9px 20px 9px 9px; border: 0; border-radius: var(--ab-r-sm);
  background: none; color: var(--ab-panel-ink);
  font: inherit; text-align: left; cursor: pointer;
}
.ab-note:hover { background: var(--ab-panel-tint); }
.ab-note.unread { background: color-mix(in srgb, var(--ab-panel-accent) 8%, transparent); }
.ab-note.unread:hover { background: color-mix(in srgb, var(--ab-panel-accent) 14%, transparent); }
.ab-note-mark {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; margin-top: 1px; border-radius: var(--ab-pill);
  background: color-mix(in srgb, var(--ab-panel-ink) 8%, transparent);
  color: var(--ab-panel-muted);
}
.ab-note.unread .ab-note-mark {
  background: color-mix(in srgb, var(--ab-panel-accent) 18%, transparent);
  color: var(--ab-panel-accent);
}
.ab-note-body { min-width: 0; flex: 1; }
.ab-note-title { font-size: 12.8px; font-weight: 650; line-height: 1.35; letter-spacing: -0.004em; }
.ab-note.unread .ab-note-title { font-weight: 750; }
.ab-note-text {
  margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--ab-panel-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ab-note-meta { margin-top: 3px; font-size: 11px; color: var(--ab-panel-faint); }
.ab-dot {
  position: absolute; top: 14px; right: 9px;
  width: 7px; height: 7px; border-radius: var(--ab-pill);
  background: var(--ab-panel-accent);
}

.ab-empty { padding: 34px 20px; text-align: center; color: var(--ab-panel-faint); }
.ab-empty-glyph { display: inline-flex; color: color-mix(in srgb, var(--ab-panel-ink) 22%, transparent); }
.ab-empty-line {
  margin-top: 8px; font-family: var(--ab-display); font-size: 14px;
  color: var(--ab-panel-muted);
}
.ab-bell-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-top: 1px solid var(--ab-panel-line);
}
.ab-bell-foot .ab-gap { flex: 1; }
.ab-link {
  padding: 3px 6px; border: 0; border-radius: var(--ab-r-sm);
  background: none; color: var(--ab-panel-accent);
  font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.ab-link:hover { background: var(--ab-panel-tint); }
.ab-link.danger { color: var(--ab-panel-danger); }

/* ── Phone: wordmark · bell · avatar. Hosts keep their own tab bar,
   so the nav slot, the actions slot and the search button all go — unless
   the host sets `keep-actions`, for a bar that is someone's ONLY route to
   an action (MainFrame's contractor view keeps its Wall Remote button). ── */
@media (max-width: 640px) {
  /* Same 12px side inset as desktop (8px put the last glyph ~16px from
     the screen edge, which read as cramped on a phone), plus the notch
     insets in landscape. */
  studio-appbar {
    height: var(--ab-h-phone); gap: 2px;
    padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
  }
  studio-appbar > .ab-right { gap: 4px; }
  studio-appbar > [slot='nav'],
  studio-appbar:not([keep-actions]) > [slot='actions'],
  .ab-search { display: none !important; }
  .ab-pop-bell { width: calc(100vw - 24px); }
  .ab-pop { position: fixed; top: calc(var(--ab-h-phone) + 2px); right: 12px; left: auto; }
  .ab-pop-switch { left: 12px; right: auto; }
}
/* Below a 360px viewport the monogram carries the wordmark alone. */
@media (max-width: 359px) {
  .ab-name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  studio-appbar *, .ab-pop { transition: none !important; animation: none !important; }
}