/* SLE-T7-topbar — canonical topbar primitive per campscout v2.
 *
 * Light surface (var(--wh)), 2px yellow underline, 22px DM Serif title.
 * The dark/inverted topbar is NOT canonical — secretariat's local dark
 * topbar is being aligned to this pattern in Plan 3.
 *
 * Companions:
 *  - .topbar-search  — fake search input that opens a ⌘K command palette
 *  - .topbar-sub     — secondary line under the title
 *  - .topbar-back-btn — back/cancel button anchored left
 *  - .topbar .tour-help-btn / #changeFeedToggle — 30×30 icon-buttons
 *  - .sync-dot       — green/yellow/red live-sync indicator
 *
 * Depends on tokens.css.
 */
.topbar {
  background: var(--wh);
  padding: 0.75rem 1.5rem;
  flex-shrink: 0;
  position: relative;
  border-bottom: 2px solid var(--y);
  display: flex;
  align-items: center;
  gap: var(--sp-2h);
}
.topbar h1,
.topbar-title {
  color: var(--bk);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.15;
  max-width: calc(100% - 140px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.topbar-sub {
  color: var(--g4);
  font-size: var(--fs-sm);
  margin-top: 0.1rem;
  max-width: calc(100% - 140px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--dur-normal);
}
.topbar-content {
  flex: 1;
  min-width: 0;
}
.topbar-actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

/* Search palette trigger — collapses below 640px. */
.topbar-search {
  display: none;
  align-items: center;
  gap: var(--sp-1h);
  background: var(--g1);
  border: 1px solid var(--g2);
  border-radius: var(--radius-sm);
  padding: 0.32rem 0.65rem;
  font-size: var(--fs-sm);
  color: var(--g4);
  cursor: pointer;
  min-width: 240px;
  margin-left: auto;
  margin-right: var(--sp-2);
  transition: background var(--dur-normal), border-color var(--dur-normal);
}
.topbar-search:hover {
  background: var(--wh);
  border-color: var(--g3);
  color: var(--bk);
}
.topbar-search-text { flex: 1; text-align: left; }
.topbar-search-kbd {
  font-family: var(--sans);
  font-size: 0.62rem;
  background: var(--wh);
  border: 1px solid var(--g2);
  color: var(--g4);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
}

/* Icon buttons — 30×30 hairline white. */
.topbar .icon-btn,
.topbar .tour-help-btn,
.topbar #changeFeedToggle {
  appearance: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wh);
  border: 1px solid var(--g2);
  border-radius: var(--radius-sm);
  color: var(--bk);
  font-size: var(--fs-md);
  cursor: pointer;
  padding: 0;
  transition: background var(--dur-normal), border-color var(--dur-normal);
}
.topbar .icon-btn:hover,
.topbar .tour-help-btn:hover,
.topbar #changeFeedToggle:hover {
  background: var(--g1);
  border-color: var(--g3);
}

/* Back-button — anchored left, white surface, g2 border. */
.topbar-back-btn,
.topbar-menu {
  background: var(--wh);
  border: 1px solid var(--g2);
  color: var(--bk);
  border-radius: var(--radius-sm);
  padding: 0.28rem 0.65rem;
  font-size: var(--fs-md);
  cursor: pointer;
  margin-right: 0.75rem;
  transition: background var(--dur-normal), border-color var(--dur-normal);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.topbar-back-btn:hover,
.topbar-menu:hover {
  background: var(--g1);
  border-color: var(--g3);
}

/* Per-Abteilung logo (2026-06-01) — rendered by @suite/lib/abteilung-logo
 * before the group switcher. ~28px square with subtle rounding; the
 * `--abteilung-accent` custom property is also applied to the topbar
 * root (or any opted-in container) so individual rules can pick it up
 * via `var(--abteilung-accent, …)`. Keep this rule a single source of
 * truth — per-app stylesheets should drop their local copies.
 *
 * Both `.abteilung-logo` (canonical, new) and `.topbar-abteilung-logo`
 * (legacy class still emitted for back-compat) are matched so apps
 * mid-migration keep working. */
.abteilung-logo,
.topbar-abteilung-logo {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  object-fit: contain;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: var(--sp-1h, 0.5rem);
}

/* Per-user profile picture (2026-06-01) — rendered by @suite/lib/user-avatar
 * into the existing topbar / sidebar avatar hosts (matos .topbar-profile,
 * secretariat .u-av, campscout #uAv). Same 28px round footprint as
 * abteilung-logo but with full circular rounding to match the "avatar"
 * affordance. object-fit:cover preserves aspect ratio without letterboxing.
 * Hosts that don't render an <img> (because the user has no picture or
 * the URL was rejected by safeHttpUrl) keep their existing initials
 * fallback — see @suite/lib/user-avatar's mountUserAvatar. */
.user-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Sync indicator — used inside the topbar for live-collaboration state. */
.sync-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.sync-dot.syncing {
  background: var(--y);
  animation: sync-pulse 0.7s ease-in-out infinite alternate;
}
.sync-dot.conflict { background: var(--red); }
@keyframes sync-pulse { from { opacity: 0.5 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .sync-dot.syncing { animation: none; }
}

/* Responsive overrides — aligned to Camp v2 Style Guide §19 breakpoints:
 *   phone:    max-width 639px
 *   tablet:   min-width 640px  (sidebar↔drawer / nav swap)
 *   desktop:  min-width 960px  (density tweaks)
 *
 * The historical 768/840/480/1400 breakpoints were collapsed into 640/960
 * by the 2026-06-02 suite-wide breakpoint sweep — see
 * shared/tests/css-breakpoints.test.js for the static contract. */
@media (max-width: 639px) {
  /* Phone — denser padding + smaller title + collapsed search trigger. */
  .topbar { padding: 0.65rem 0.75rem 0.6rem; }
  .topbar h1,
  .topbar-title { font-size: var(--fs-lg); max-width: calc(100% - 110px); }
  .topbar-sub { max-width: calc(100% - 110px); }
  .topbar-back-btn,
  .topbar-menu { font-size: var(--fs-sm); padding: 0.22rem 0.45rem; }
  .topbar-search { display: inline-flex; min-width: 0; padding: 0.45rem; }
  .topbar-search .topbar-search-text { display: none; }
  .topbar-search-kbd { display: none; }
}
@media (min-width: 640px) {
  /* Tablet+ — search palette gets full pill chrome. */
  .topbar-search { display: inline-flex; min-width: 240px; }
}
@media (min-width: 960px) {
  /* Desktop — relaxed gutters on wide viewports. */
  .topbar { padding: 0.9rem clamp(2rem, 6vw, 9rem); }
}
@media (pointer: coarse) {
  /* Touch reaches 44×44 via padding while keeping the visual at 30px. */
  .topbar .icon-btn,
  .topbar .tour-help-btn,
  .topbar #changeFeedToggle { width: 44px; height: 44px; }
}