/* TopBar — LittleLives design system
   Tokens follow /tokens/semantics.web.json. In sv-frontend, replace custom
   props with Tailwind classes (bg-surface/*, text-content/*).
*/

:root {
  /* Primitives (subset) */
  --color-white:        #ffffff;
  --color-dim-06:       rgba(0, 0, 0, 0.06);
  --color-neutral-100:  #e6e6e6;
  --color-neutral-600:  #8b8b8b;
  --color-neutral-800:  #545454;
  --color-neutral-950:  #333333;
  --color-brand-50:     #e6f8fd;
  --color-brand-100:    #cdf4ff;
  --color-brand-400:    #33c6f0;
  --color-brand-500:    #00b8ec;
  --color-brand-800:    #005b82;
  --color-strawberry-800: #8a1f1f;     /* surface/default/error-strong */

  /* Semantics — mirror of /tokens/semantics.web.json */
  --surface-default-white:           var(--color-white);
  --surface-default-brand-soft:      var(--color-brand-50);
  --surface-default-brand-soft-alt:  var(--color-brand-100);
  --surface-default-error-strong:    var(--color-strawberry-800);
  --surface-hover-clear:             var(--color-dim-06);

  --content-neutral-primary:    var(--color-neutral-950);
  --content-neutral-secondary:  var(--color-neutral-800);
  --content-brand:              var(--color-brand-500);
  --content-brand-strong:       var(--color-brand-800);

  --stroke-neutral-soft-secondary: var(--color-neutral-100);
  --stroke-brand:                  var(--color-brand-400);
}

/* ---------- Bar ---------- */
.ll-top-bar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  padding: 0 24px;
  background: var(--surface-default-white);
  border-bottom: 1px solid var(--stroke-neutral-soft-secondary);
  font-family: 'Nunito Sans', system-ui, sans-serif;
  color: var(--content-neutral-primary);
  box-sizing: border-box;
}

/* ---------- Brand (logo) ---------- */
.ll-top-bar__brand {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  color: var(--content-brand);   /* SVG inherits via currentColor */
  text-decoration: none;
}

.ll-top-bar__brand svg {
  height: 28px;
  width: auto;
  display: block;
}

/* ---------- Action group ---------- */
.ll-top-bar__actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* ---------- Common action button ---------- */
.ll-top-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  height: 36px;
  background: transparent;
  border: 0;
  border-radius: 999px;     /* fully rounded — locale, bell, avatar */
  cursor: pointer;
  color: var(--content-neutral-secondary);
  font-family: inherit;
  font-size: 16px;          /* text-body-16-semibold */
  font-weight: 600;
  line-height: 1.5;
  transition: background 120ms ease, color 120ms ease;
}

.ll-top-bar__btn:hover {
  background: var(--surface-hover-clear);
}

.ll-top-bar__btn:focus-visible {
  outline: 2px solid var(--stroke-brand);
  outline-offset: -2px;
}

.ll-top-bar__btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Slot spans must flex-center their SVGs — otherwise the icons sit at the
   text baseline and drift below the cap-height of the label. */
.ll-top-bar__icon,
.ll-top-bar__caret,
.ll-top-bar__label {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* SVG icons fill via currentColor — replace fills/strokes at build time */
.ll-top-bar__btn svg [fill]:not([fill="none"]) { fill: currentColor; }
.ll-top-bar__btn svg [stroke]:not([stroke="none"]) { stroke: currentColor; }

/* ---------- Locale ---------- */
.ll-top-bar__locale .ll-top-bar__caret {
  width: 16px;
  height: 16px;
}

/* ---------- Bell ---------- */
.ll-top-bar__bell {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
}

.ll-top-bar__bell[data-has-new="true"] {
  color: var(--content-brand-strong);
}

.ll-top-bar__bell-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface-default-error-strong);
  color: var(--surface-default-white);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--surface-default-white);
}

/* ---------- Role pill ---------- */
.ll-top-bar__role {
  background: var(--surface-default-brand-soft);
  color: var(--content-brand-strong);
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;       /* role badge: 8px corners only */
  height: 36px;
}

.ll-top-bar__role:hover {
  background: var(--surface-default-brand-soft-alt);
}

/* ---------- Avatar ---------- */
.ll-top-bar__avatar {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: var(--surface-default-brand-soft-alt);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--content-brand-strong);
  font-weight: 700;
  font-size: 14px;
}

.ll-top-bar__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ll-top-bar__avatar:hover {
  filter: brightness(0.96);
}

.ll-top-bar__avatar:focus-visible {
  outline: 2px solid var(--stroke-brand);
  outline-offset: 2px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ll-top-bar__btn { transition: none !important; }
}