/* Shared top-bar chrome for every page on the marketing site.
 *
 * The brand mark and the app CTA are the two things a visitor sees on every
 * page, so they are defined once here and loaded by both the landing page
 * (styles.css) and the server-rendered quotes pages (quotes.css). They had
 * drifted badly: the quotes wordmark's dot was 5px against the landing's 7px,
 * and the quotes "Join" button was a solid ink pill where the landing's is an
 * outlined one — so the same brand read as two different sites.
 *
 * Load this BEFORE the page stylesheet, so a page can still override layout
 * (the quotes topbar wraps and carries more links) without having to restate
 * the mark itself.
 *
 * Layout that legitimately differs — `.topbar` width and padding, `.topnav`
 * gaps, the quotes section's `aria-current` underline — stays in the page
 * stylesheets. Only identity lives here.
 */

/* The quotes stylesheet has no pulse token of its own; declaring it here keeps
   the shared rules self-contained on both pages. */
:root {
  --motion-pulse: 1200ms;
}

/* ── Wordmark ────────────────────────────────────────────────── */

.wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 21px;
  color: var(--ink);
  white-space: nowrap;
}

/* The quotes stylesheet underlines links on hover; the mark is not that kind
   of link. */
.wordmark:hover {
  color: var(--ink);
  text-decoration: none;
}

.wordmark .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--clay);
  vertical-align: 6px;
}

/* Section name after the product name — "sharpthought quotes". Lighter and
   upright, so it reads as a place within the product rather than part of the
   brand itself. */
.wordmark-section {
  font-style: normal;
  font-weight: 400;
  color: var(--ink2);
  margin-left: 7px;
}

/* ── App CTA ─────────────────────────────────────────────────── */

.topnav-app {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 8px 15px;
  min-height: 44px;
  color: var(--ink);
}

.topnav-app:hover {
  border-color: var(--clay);
  text-decoration: none;
}

/* Avatar/icon hint, shown only once session-hint.js confirms a live session
   via the st_session_hint cookie (logged-out default: empty, collapsed). */
.topnav-app-avatar {
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 999px;
  overflow: hidden;
  background: var(--paper2);
  color: var(--ink2);
  /* Sizing for the fallback initial when there is no bundled avatar. */
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.topnav-app-avatar img {
  display: block;
  width: 100%;
  height: 100%;
}

.topnav-app.st-logged-in .topnav-app-avatar {
  display: inline-flex;
}

body.st-logged-in .topnav-app.st-logged-in {
  font-weight: 500;
}

/* ── Signed-in dot ───────────────────────────────────────────── */
/* Sage dot on the app link once a session cookie is present, pulsing gently
   to say "you are already signed in". Asserted by apps/web/src/styles.test.ts. */

@keyframes st-dot-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.12); }
}

body.st-logged-in .topnav-app .topnav-app-avatar::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 2px var(--ink);
}

body.st-logged-in .topnav-app .topnav-app-avatar {
  position: relative;
  animation: st-dot-pulse var(--motion-pulse) ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  body.st-logged-in .topnav-app .topnav-app-avatar {
    animation: none;
  }
}