/* Topbar — organism for the application chrome's top navigation bar.
 *
 * Created in U5 (issue #476) per CLAUDE.md §2 R4 (per-component CSS).
 * Extended in U2 (issue #502) with the non-wordmark .lc-topbar family
 * (verbatim move from components.css — no rule body changed). */

/* ─── v2 DS — topbar wordmark ─── */
.lc-topbar__wordmark {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
}

/* ─── navigation (moved from components.css in U2 / issue #502) ─── */
.lc-topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  /* Use padding-block/inline (logical) so this selector wins over Pico's
     body > header { padding-block: ... } on the same property */
  padding-block: var(--sp-3);
  padding-inline: var(--sp-5);
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-rule);
}
.lc-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-serif);
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  text-decoration: none;
  line-height: 1;
}
.lc-topbar__icon {
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  display: block;
}
.lc-topbar__nav {
  display: flex;
  gap: var(--sp-1);
  margin-left: var(--sp-5);
}
.lc-topbar__link {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-14);
  color: var(--color-ink-muted);
  border-radius: var(--r-2);
  text-decoration: none;
  line-height: 1;
}
.lc-topbar__link:hover { color: var(--color-ink); background: var(--color-surface); }
.lc-topbar__link[aria-current="page"] { color: var(--color-ink); font-weight: var(--fw-medium); background: var(--color-surface); }