.kitchen-header-context {
  position: relative;
  anchor-name: --kitchen-header-context;
  display: flex;
  align-items: center;
  gap: var(--space-sm-md);
  min-width: 0;
}

.kitchen-header-context .app-navbar-brand-title {
  line-height: var(--leading-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.kitchen-header-members {
  anchor-name: --kitchen-members-trigger;
}

.kitchen-header-chevron { width: 20px; height: 20px; flex-shrink: 0; }

.kitchen-switcher { min-width: 0; }
.kitchen-switcher summary { display: flex; min-height: 44px; cursor: pointer; list-style: none; }
.kitchen-switcher summary::-webkit-details-marker { display: none; }

.kitchen-switcher-panel {
  position: absolute;
  z-index: var(--z-popover);
  top: calc(100% + 10px);
  left: 0;
  width: min(290px, calc(100vw - 28px));
  padding: var(--space-sm);
  font: inherit;
  font-size: var(--text-body);
  border: var(--line);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  box-shadow: none;
}

.kitchen-switcher-choice, .kitchen-switcher-create {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm-md);
  width: 100%;
  min-height: 48px;
  padding: var(--space-sm-md) var(--space-sm-md);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.kitchen-switcher-choice[aria-current="true"] { background: var(--color-hover); }
.kitchen-switcher-check { color: var(--color-heeler); }
.kitchen-switcher-create { justify-content: flex-start; margin-top: var(--space-sm); border-top: 1.5px solid var(--color-border); border-radius: 0; }

.kitchen-header-context :is(button, summary, a):focus-visible,
.kitchen-create :is(input, a):focus-visible {
  outline: 2px solid var(--color-heeler);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .kitchen-switcher-choice:hover, .kitchen-switcher-create:hover { background: var(--color-hover); }
  .kitchen-header-members:hover { background: var(--color-cream-dark); color: var(--ui-text-strong); }
}

.kitchen-header-members:active, .kitchen-switcher-choice:active { transform: scale(0.97); }

.kitchen-create { max-width: 480px; margin: var(--space-xl) auto; padding: var(--space-lg); }
.kitchen-create form { display: grid; gap: var(--space-sm-md); margin-top: var(--space-lg); }
.kitchen-create input[type="text"] { width: 100%; min-height: 48px; padding: var(--input-padding); font: inherit; }
.kitchen-create-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-lg); margin-top: var(--space-sm-md); }
.kitchen-create-cancel { color: var(--color-heeler-dark); font-weight: var(--weight-bold); }
.kitchen-create-submit { min-height: 44px; padding: var(--space-sm-md) var(--space-md); border: 0; border-radius: var(--radius-sm); font: inherit; background: var(--color-heeler); color: var(--color-paper); cursor: pointer; }
.kitchen-create-error { color: var(--color-tomato-ink); }

@media (max-width: 600px) {
  .kitchen-header-context { gap: var(--space-sm); max-width: 100%; }
  .kitchen-header-context .app-navbar-brand { flex: 1; overflow: hidden; }
  .kitchen-header-context .kitchen-switcher { flex: 1; min-width: 0; }
  .kitchen-header-context .app-navbar-brand-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kitchen-create { margin: var(--space-md) auto; padding: var(--space-md); }
}

@media (prefers-reduced-motion: reduce) {
  .kitchen-header-members:active, .kitchen-switcher-choice:active { transform: none; }
}

@media (max-width: 350px) {
  .kitchen-header-context { gap: var(--space-xs); }
  .kitchen-header-context .app-navbar-brand { gap: var(--space-sm); }
  .kitchen-header-context .app-navbar-brand-title { font-size: var(--text-body); }
  .kitchen-header-members { padding-inline: var(--space-xs); font-size: var(--text-label); }
}
