/* ============================================
   <xm-app-bar> — screen header on the desk surface.

   Surface / ink (AD-13): the app bar belongs to the DESK family —
   background var(--md-sys-color-surface), title ink var(--md-sys-color-on-surface),
   secondary var(--md-sys-color-on-surface-variant). NOT the inverse-surface ink
   used by cards / drawers.

   Hairline: a single 1px bottom border (--md-sys-color-outline-variant).
   Never 2px.

   BEM: block `app-bar`; elements `__leading` `__title` `__nav` `__action`;
   modifiers `--xs|--sm|--md|--lg`. Sticky is driven from :host([sticky]).
   ============================================ */

.app-bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  box-sizing: border-box;
  width: 100%;
  padding: 0 var(--s-4);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

/* ---------- Sizes — one shared bar height per size ---------- */
.app-bar--xs { min-height: 40px; }
.app-bar--sm { min-height: 48px; }
.app-bar--md { min-height: 56px; }
.app-bar--lg { min-height: 64px; }

/* ---------- Leading ---------- */
.app-bar__leading {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}
.app-bar__leading.is-empty {
  display: none;
}

/* ---------- Title ---------- */
.app-bar__title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--md-sys-typescale-title-medium-font);
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  color: var(--md-sys-color-on-surface);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-bar__nav {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: var(--s-2);
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
}
.app-bar__nav ::slotted(*) {
  align-self: stretch;
}
.app-bar__nav.is-empty {
  display: none;
}

/* ---------- Action (singular trailing region) ---------- */
.app-bar__action {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
  margin-inline-start: auto;
}
.app-bar__action.is-empty {
  display: none;
}

/* ---------- Sticky ---------- */
:host([sticky]) .app-bar {
  position: sticky;
  top: 0;
  z-index: 1;
}