/* The top bar over every Kairo app's pages (kairo/_topbar.html.erb): where
   the reader is on the left; on the right the page's own controls, the bell
   (kairo/notifications.css), the pill out to the reader's apps and whatever
   the app adds. Neo's dashboard bar, made everyone's.

   Only tokens, never base.css's aliases: Journey and the website load the
   tokens and fonts and nothing else of the system's. Its height is
   `--topbar`, which a shell may set so its rail's masthead shares the bar's
   line, and its contents line up with a page column as wide as
   `--kairo-topbar-width`, where a shell centres one. */

.kairo-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  font-family: var(--k-type-body-font-family);
  background: color-mix(in srgb, var(--k-color-ivory) 92%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--k-color-line);
}

.kairo-topbar__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  box-sizing: border-box;
  max-width: var(--kairo-topbar-width, none);
  height: var(--topbar, 64px);
  margin: 0 auto;
  padding: 0 28px;
}

.kairo-crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--k-color-muted);
}

.kairo-crumbs > * {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The separator belongs to the step after it, so a lone page has none. */
.kairo-crumbs > * + *::before {
  content: "/";
  margin-inline-end: 10px;
  font-weight: 400;
  color: var(--k-color-control-border);
}

.kairo-crumbs b {
  font-weight: 700;
  color: var(--k-color-ink-soft);
}

.kairo-crumbs a {
  color: inherit;
  text-decoration: none;
}

.kairo-crumbs a:hover {
  color: var(--k-color-violet-deep);
}

/* Pushed right; the bell and the pills sit in one row, the pills close
   enough to read as a pair. */
.kairo-topbar__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}

/* The way out to the reader's apps on gokairo.ai: a pill in ink, since it
   leaves the app rather than doing something in it. An app's own pill
   (Neo's Ask Neo) wears the same shape in violet. */
.kairo-apps-link {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 40px;
  padding: 0 14px 0 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--k-color-ink);
  text-decoration: none;
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-line);
  border-radius: var(--k-radius-pill);
  transition: background-color var(--k-duration-fast) var(--k-ease-standard),
    border-color var(--k-duration-fast) var(--k-ease-standard);
}

.kairo-apps-link:hover {
  background: var(--k-color-lavender-soft);
  border-color: var(--k-color-lavender);
}

.kairo-apps-link svg {
  width: 16px;
  height: 16px;
  fill: var(--k-color-violet);
}

/* The steps before the page go first, then the crumb altogether: by then
   the page's own heading names it. */
@media (width <= 860px) {
  .kairo-topbar__inner {
    gap: 12px;
  }

  .kairo-crumbs > :not(:last-child) {
    display: none;
  }

  .kairo-crumbs > :last-child::before {
    content: none;
  }
}

@media (width <= 680px) {
  .kairo-crumbs {
    display: none;
  }

  .kairo-topbar__inner {
    padding: 0 12px;
  }
}

/* The pill keeps its mark and loses its words. */
@media (width <= 560px) {
  .kairo-apps-link span {
    display: none;
  }

  .kairo-apps-link {
    padding: 0 12px;
  }
}