/* 06-components/_topbar.css — .c-topbar: wordmark, module links, who chip. One per app.
   The bar is iron in both themes: the dark frame the pale page hangs in. */
.c-topbar { position: sticky; top: 0; z-index: var(--z-topbar); display: flex; align-items: center; gap: var(--space-lg); min-height: var(--height-topbar); padding-inline: var(--gutter-page); background: var(--bar-ground); color: var(--bar-ink); border-bottom: var(--stroke) solid var(--bar-rule); }
.c-topbar__brand { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; color: var(--bar-ink); }
.c-topbar__brand:hover { color: var(--bar-ink); }
/* The mark: a sawn end, growth rings in pine. Drawn in CSS, no image. */
.c-topbar__mark { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); flex: none; background-color: var(--pine-400); background-image: repeating-radial-gradient(circle at 68% 62%, var(--pine-300) 0 2px, var(--pine-700) 2px 3px); }
.c-topbar__word { font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wordmark); font-size: var(--text-md); line-height: 1.1; }
.c-topbar__module { display: block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--bar-ink-muted); margin-top: 2px; }
.c-topbar__nav { display: flex; align-items: stretch; align-self: stretch; gap: var(--space-2xs); }
.c-topbar__link { display: inline-flex; align-items: center; gap: var(--space-xs); padding-inline: var(--space-sm); border-bottom: 3px solid transparent; border-top: 3px solid transparent; color: var(--bar-ink-muted); font-weight: var(--weight-medium); text-decoration: none; }
.c-topbar__link:hover { color: var(--bar-ink); background: var(--bar-hover); }
.c-topbar__link[aria-current="page"] { color: var(--bar-ink); border-bottom-color: var(--accent); }
.c-topbar__link svg { width: 1rem; height: 1rem; }
.c-topbar__link--coming { color: var(--bar-ink-muted); opacity: 0.6; }
.c-topbar__link--coming:hover { background: none; color: var(--bar-ink-muted); cursor: default; }
.c-topbar__spacer { flex: 1; }
@media (max-width: 56.24rem) { .c-topbar__spacer { display: none; } }
.c-topbar__end { position: relative; display: flex; align-items: center; gap: var(--space-xs); }
.c-topbar .c-button--ghost { color: var(--bar-ink-muted); }
.c-topbar .c-button--ghost:hover { color: var(--bar-ink); background: var(--bar-hover); }
@media (max-width: 56.24rem) {
  .c-topbar { flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); padding-block: var(--space-xs); }
  .c-topbar__nav { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter-page)); padding-inline: var(--gutter-page); }
  .c-topbar__nav::-webkit-scrollbar { display: none; }
  .c-topbar__link { padding-inline: var(--space-xs); padding-block: var(--space-xs); white-space: nowrap; }
  .c-topbar__end { margin-inline-start: auto; }
  .c-menu__trigger-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .c-menu__trigger { padding-inline-end: var(--space-2xs); }
}
@media (pointer: coarse) { .c-topbar__link { min-height: var(--height-control); } }