/* ============================================================
   COMPONENT · APPBAR  (c-appbar)
   The one shared chrome recipe for the topbar + footer, used by both the
   marketing and signed-in shells (D3) — brand wordmark, the c-plaque--phosphor
   status, the green c-led--ok c-led--pulse liveness dot, the theme toggle, and
   (signed-in) a single account menu (▾) so the cluster never wraps into a
   cramped four-button row on a phone. Replaces the near-identical .site-topbar /
   .app-topbar + .site-footer / .app-footer pair. Uses theme tokens only.
   ============================================================ */

/* ---- Topbar ---------------------------------------------------------- */
.c-appbar {
  position: sticky;
  top: 0;
  z-index: var(--z-overlay);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  border-bottom: var(--border-thick) solid var(--color-bezel-dark);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--shadow-color) 71%, transparent);
  backdrop-filter: blur(8px);
  padding-top: env(safe-area-inset-top, 0);
}
.c-appbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
}
.c-appbar__spacer { flex: 1; }
.c-appbar__status { flex-shrink: 0; }

.c-appbar a.c-button { text-decoration: none; }
.c-appbar a.c-button:hover { text-shadow: none; }

/* button_to (sign out) renders a wrapping <form>; keep it inline, no stray margin. */
.c-appbar nav form,
.c-appbar-foot nav form { margin: 0; }

/* ---- Account menu (disclosure) --------------------------------------- */
/* CSP-safe native <details> disclosure — no JS needed. The summary is a ghost
   button; the panel is an absolutely-positioned card under it. */
.c-appbar__menu { position: relative; }
.c-appbar__menu-toggle {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.c-appbar__menu-toggle::-webkit-details-marker { display: none; }
.c-appbar__menu-caret {
  transition: transform var(--dur-fast) var(--ease-snap);
  font-size: var(--fs-xs);
}
.c-appbar__menu[open] .c-appbar__menu-caret { transform: rotate(180deg); }
.c-appbar__menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: var(--z-modal);
  min-width: 11rem;
  display: flex;
  flex-direction: column;
  padding: var(--space-2);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-color) 55%, transparent);
}
.c-appbar__menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xs);
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  color: var(--color-text);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}
.c-appbar__menu-item:hover {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-text-emphasis);
  text-shadow: none;
}
.c-appbar__menu-item--button { font: inherit; }

/* ---- Space switcher (org-style dropdown, S2-3) ----------------------- */
/* Reuses the account-menu disclosure; the toggle shows the current space name. */
.c-space-switcher__name {
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-space-switcher__panel { left: 0; right: auto; min-width: 13rem; }
.c-space-switcher__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.c-space-switcher__item-name { flex: 1 1 auto; }
.c-space-switcher__kind {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.c-space-switcher__item.is-active { color: var(--color-text-emphasis); }
.c-space-switcher__check { color: var(--color-accent); }
/* Management subitems (Settings · Platforms · Data) read as children of the
   featured space row above. The design system marks "belongs-to" with an
   engraved left rail (cf. the active c-appnav link, the c-timeline groove) —
   not a list bullet. The rail drops in the shared text column, aligned under
   the parent's name; the child's only offset is the gap past the rail (no
   leading indent before a marker). Contiguous subitems share one continuous
   rail, so the three read as one bracketed group under the space. */
.c-space-switcher__subitem {
  margin-left: var(--space-3);
  border-left: var(--border-thick) solid var(--color-border-strong);
}
.c-space-switcher__subitem:hover { border-left-color: var(--color-accent); }
.c-space-switcher__create {
  margin-top: var(--space-1);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* ---- Footer ---------------------------------------------------------- */
.c-appbar-foot {
  margin-top: var(--space-8);
  padding-block: var(--space-6);
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0));
  border-top: var(--border-thick) solid var(--color-bezel-dark);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
}
.c-appbar-foot a.c-button { text-decoration: none; }
.c-appbar-foot a.c-button:hover { text-shadow: none; }
.c-appbar-foot__fine { font-size: var(--fs-xs); margin-top: var(--space-2); }
.c-appbar-foot__transmission {
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
}

/* ---- Responsive: collapse the status plaque on a phone. The account cluster
   no longer wraps — it is a single menu (▾) now, so the row stays one line. -- */
@media (max-width: 45rem) { /* --bp-md */
  /* Selectors are scoped through .c-appbar__nav so they out-specify the later
     .c-button { display: inline-flex } rule — otherwise Chat never hides and the
     cluster spills out of the topbar chassis on a phone. */
  .c-appbar__inner .c-appbar__status { display: none; }
  .c-appbar__nav .c-appbar__chat { display: none; } /* Chat stays reachable via the bottom bar */
  /* The signed-in cluster is just the theme toggle + account menu here — keep it
     on one line inside the chassis, never wrapping into a floating stack. */
  .c-appbar__nav { flex-wrap: nowrap; }

  /* CRITICAL (mobile-fit): at a real phone width the inner row — brand wordmark +
     "// PERSONAL OPS" tagline + "◐ DARK" toggle + "Account ▾" menu — is ~110px wider
     than the viewport, so it overflows to the right. That horizontal overflow inflates
     the mobile *layout viewport* past device-width, which in turn (a) widens the fixed
     bottom tab bar so its right tabs fall off-screen, (b) trips the 28rem query so the
     "More" sheet goes two-column, and (c) makes the page scroll sideways so nothing
     feels pinned. Fixing the bottom bar alone (the visible victim) does nothing — the
     CAUSE is this row. Drop the two decorative labels on phones and let the wordmark
     shrink so the row always fits and the layout viewport stays == device-width. */
  .c-appbar__inner .app-brand__sub { display: none; }   /* decorative "// PERSONAL OPS" tagline */
  .c-appbar__nav [data-theme-label] { display: none; }  /* theme toggle → icon-only (◐) */
  .c-appbar__brand { min-width: 0; overflow: hidden; }   /* wordmark is the shrink sink on tiny screens */
  .c-appbar__brand .app-brand__name { white-space: nowrap; }

  /* The footer is pinned to the bottom of the page (body is a 100dvh flex column,
     .app-shell flex:1 pushes it down). But the fixed bottom tab bar overlays the
     last ~3.5rem, so the footer's plaque + Settings/Account row landed *behind* it.
     Lift the footer's content above the bar (bar height + breathing + safe-area). */
  .c-appbar-foot { padding-bottom: calc(3.5rem + var(--space-5) + env(safe-area-inset-bottom, 0)); }
}