/* Sticky top bar: brand, actions and the profile chip. */

/* The bar sits inside .app's side padding but its background and border
   run the full screen width, so nothing scrolls past beside it. The padding
   pulls its content back in line with the page. */
header.top {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.top-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; /* last resort on very narrow screens: wrap, never overflow */
}
.brand {
  display: flex; align-items: baseline; gap: 8px;
}
.brand h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.01em;
  margin: 0;
}
.brand .tag {
  font-size: 13px;
  color: var(--ink-faint);
  display: none;
}
@media (min-width: 560px) { .brand .tag { display: inline; } }

.top-actions { display: flex; align-items: center; gap: 10px; }


.profile-chip {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  max-width: 190px;
}
.profile-chip .dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex: none;
}
.profile-chip .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.profile-chip .who .role { display: block; color: var(--ink-faint); font-size: 11px; }

/* Count badge on the avatar: everything waiting in the account panel. */
.profile-chip { position: relative; }
.icon-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--danger); color: #FFFFFF;
  border: 2px solid var(--bg);
  font-size: 10px; font-weight: 700; line-height: 14px;
  text-align: center;
}

/* Phones: the title gets smaller, "+ Add recipe" becomes "+" and the chip
   shrinks to its initials, so the row fits a 320px screen instead of
   pushing the page sideways. */
@media (max-width: 520px) {
  .brand h1 { font-size: 22px; }
  .top-actions { gap: 8px; }
  .add-btn { width: 36px; height: 36px; padding: 0; font-size: 20px; line-height: 1; }
  .add-btn .btn-label { display: none; }
  .profile-chip { padding: 6px; }
  .profile-chip .who { display: none; }
}