/* GENERATED COPY — do not edit.
 * Source: shared/purple-tokens.css
 * Synced by scripts/sync-shared.mjs (runs as part of npm run cf:deploy:site).
 * Edit the source and re-run the deploy; edits here are overwritten.
 */
/**
 * purple-topbar.css — the one top bar, on every surface.
 * ============================================================================
 *
 * Paired with shared/purple-topbar.js, which renders the markup. Loaded after
 * shared/purple-tokens.css, from which it takes every value.
 *
 * WHY THIS EXISTS
 * ---------------
 * Each surface had grown its own header: the apex a floating pill with a brand
 * mark, Contact button and hamburger drawer; the ML Study Lab a flat bar with
 * its own tab strip and a separate light/dark button; the Kubernetes console a
 * plain row of utility links with a third theme toggle; the account page a
 * fourth. Four headers, three separate theme switches, one brand.
 *
 * This is that header, once. Page-specific navigation goes in the centre slot
 * (the ML Study Lab puts its tab strip there); everything else — brand,
 * contact, apps, account, theme — is identical everywhere.
 *
 * SCALING
 * -------
 * Sized with clamp() against the viewport rather than fixed pixels or
 * breakpoint jumps, so it grows with the window instead of snapping between
 * two states. The one hard breakpoint is the brand wordmark, which is hidden
 * on narrow screens because the mark alone is unambiguous.
 */

/* --------------------------------------------------------------------------
 * Bar
 * ----------------------------------------------------------------------- */
.pi-topbar {
  position: sticky;
  top: 0;
  /* Above every app's own sticky sub-navigation (those sit at z-index 40). */
  z-index: 100;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 18px);
  width: min(var(--pi-max-width), calc(100vw - clamp(16px, 3vw, 48px)));
  margin: clamp(8px, 1.4vw, 18px) auto 0;
  padding: clamp(8px, 0.9vw, 12px) clamp(10px, 1.2vw, 16px);
  border: 1px solid var(--pi-paper-border);
  border-radius: var(--pi-radius-lg);
  background: color-mix(in srgb, var(--pi-paper) 92%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: var(--pi-shadow-sm);
  font-family: var(--pi-font-sans);
  font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.95rem);
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .pi-topbar { background: var(--pi-paper); }
}

/* --------------------------------------------------------------------------
 * Brand
 * ----------------------------------------------------------------------- */
.pi-topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--pi-ink);
  font-weight: var(--pi-weight-bold);
  white-space: nowrap;
  flex: none;
}

.pi-topbar-mark {
  width: clamp(28px, 2.4vw, 34px);
  height: clamp(28px, 2.4vw, 34px);
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: var(--pi-weight-bold);
  background: linear-gradient(135deg, var(--pi-accent-strong) 0%, var(--pi-accent) 100%);
  flex: none;
}

.pi-topbar-brand:hover .pi-topbar-wordmark { color: var(--pi-accent-text); }

@media (max-width: 640px) {
  .pi-topbar-wordmark { display: none; }
}

/* --------------------------------------------------------------------------
 * Centre slot — page-specific navigation
 *
 * Scrolls horizontally rather than wrapping: a header that changes height as
 * tabs wrap shifts the whole page underneath it.
 * ----------------------------------------------------------------------- */
.pi-topbar-slot {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.pi-topbar-slot::-webkit-scrollbar { display: none; }

/* Empty slot still claims the space, so brand sits left and actions right. */
.pi-topbar-slot:empty { flex: 1; }

/* --------------------------------------------------------------------------
 * Actions
 * ----------------------------------------------------------------------- */
.pi-topbar-actions {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.7vw, 10px);
  flex: none;
}

.pi-topbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: clamp(7px, 0.7vw, 10px) clamp(12px, 1.1vw, 18px);
  border-radius: var(--pi-radius-pill);
  font-weight: var(--pi-weight-bold);
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, var(--pi-accent-strong) 0%, var(--pi-accent) 100%);
  white-space: nowrap;
}
.pi-topbar-cta:hover { filter: brightness(1.08); }
.pi-topbar-cta:focus-visible { outline: var(--pi-focus-ring); outline-offset: var(--pi-focus-offset); }

@media (max-width: 520px) {
  .pi-topbar-cta-label { display: none; }
  .pi-topbar-cta { padding: 9px 11px; }
}

.pi-topbar-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: clamp(36px, 3vw, 42px);
  height: clamp(36px, 3vw, 42px);
  padding: 0;
  background: var(--pi-surface);
  border: 1px solid var(--pi-line);
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--pi-transition-fast), border-color var(--pi-transition-fast);
}
.pi-topbar-toggle:hover { background: var(--pi-accent-wash); border-color: var(--pi-accent); }
.pi-topbar-toggle:focus-visible { outline: var(--pi-focus-ring); outline-offset: var(--pi-focus-offset); }
.pi-topbar-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--pi-ink);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
 * Drawer
 * ----------------------------------------------------------------------- */
.pi-topbar-drawer {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  display: none;
  flex-direction: column;
  min-width: min(300px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--pi-paper-border);
  border-radius: var(--pi-radius-lg);
  background: var(--pi-paper);
  box-shadow: var(--pi-shadow);
}
.pi-topbar-drawer.is-open { display: flex; }

/* The bar is the positioning context for the drawer. */
.pi-topbar { position: sticky; }
.pi-topbar-actions { position: relative; }

.pi-topbar-eyebrow {
  margin: 4px 12px 6px;
  color: var(--pi-muted);
  font-size: var(--pi-text-xs);
  font-weight: var(--pi-weight-bold);
  letter-spacing: var(--pi-tracking-label);
  text-transform: uppercase;
}

.pi-topbar-drawer a,
.pi-topbar-drawer button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--pi-muted);
  font: inherit;
  font-weight: var(--pi-weight-semibold);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--pi-transition-fast), color var(--pi-transition-fast);
}
.pi-topbar-drawer a:hover,
.pi-topbar-drawer button:hover,
.pi-topbar-drawer a:focus-visible,
.pi-topbar-drawer button:focus-visible {
  color: var(--pi-ink);
  background: var(--pi-accent-wash);
}

.pi-topbar-drawer a[aria-current="page"] {
  color: var(--pi-accent-text);
  background: var(--pi-accent-wash);
}

.pi-topbar-rule {
  height: 1px;
  margin: 6px 8px;
  border: 0;
  background: var(--pi-line);
}

.pi-topbar-ico { width: 1.05em; height: 1.05em; flex: none; }

.pi-topbar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(6, 10, 16, 0.36);
  backdrop-filter: blur(2px);
}

/* --------------------------------------------------------------------------
 * Tabs rendered into the centre slot
 *
 * The ML Study Lab's tab strip moves in here. Defined alongside the bar so the
 * two cannot drift apart in height or rhythm.
 * ----------------------------------------------------------------------- */
.pi-topbar .pi-tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--pi-muted);
  font: inherit;
  font-weight: var(--pi-weight-semibold);
  padding: clamp(5px, 0.55vw, 8px) clamp(10px, 1vw, 15px);
  border-radius: var(--pi-radius-pill);
  cursor: pointer;
  white-space: nowrap;
}
.pi-topbar .pi-tab:hover { color: var(--pi-ink); background: var(--pi-accent-wash); }
.pi-topbar .pi-tab.is-active {
  color: var(--pi-accent-text);
  background: var(--pi-accent-wash);
  border-color: color-mix(in srgb, var(--pi-accent) 35%, transparent);
}
.pi-topbar .pi-tab:focus-visible { outline: var(--pi-focus-ring); outline-offset: var(--pi-focus-offset); }