@dataengineeringformachinelearning/viking-ui 4.0.3 → 4.0.5

package/src/styles/static-navbar.scss

@@ -1,1215 +0,0 @@
-// Shared navbar + theme toggle (frontend Angular, marketing Astro, backend Django).
-@use 'drakkar-buttons' as *;
-
-@mixin viking-navbar-search-shell-focus {
-  outline: var(--viking-ring-width, 2px) solid var(--viking-ring, var(--viking-ring));
-  outline-offset: var(--viking-ring-offset, 2px);
-}
-
-@mixin viking-navbar-utility-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: var(--viking-control-height, 40px);
-  height: var(--viking-control-height, 40px);
-  min-width: var(--viking-control-height, 40px);
-  padding: 0;
-  margin: 0;
-  border: 1px solid var(--viking-border-strong, var(--border));
-  border-radius: var(--viking-radius, 8px);
-  background: var(--viking-surface, var(--card-bg));
-  color: var(--viking-text, var(--text-color));
-  box-shadow: var(--viking-shadow-sm, var(--shadow-sm));
-  cursor: pointer;
-  transition: var(--viking-transition-interactive, all 0.25s ease);
-
-  &:hover {
-    border-color: var(--viking-accent-strong, var(--viking-ring));
-    background: var(--viking-surface-alt, var(--viking-charcoal-700));
-    color: var(--viking-text, var(--text-color));
-    box-shadow: var(--viking-shadow-md, var(--shadow-md));
-  }
-
-  &:focus-visible {
-    @include viking-navbar-search-shell-focus;
-  }
-}
-
-@mixin viking-navbar-search-shell {
-  display: flex;
-  align-items: center;
-  gap: var(--viking-space-1, 8px);
-  min-height: var(--viking-control-height, 40px);
-  padding: 0 var(--viking-space-2, 16px);
-  background: var(--viking-surface, var(--card-bg));
-  border: 1px solid var(--viking-border-strong, var(--border));
-  border-radius: var(--viking-radius, 8px);
-  box-shadow: var(--viking-shadow-sm, var(--shadow-sm));
-  transition: var(--viking-transition-interactive, border-color 0.25s ease, box-shadow 0.25s ease);
-
-  &:hover {
-    border-color: color-mix(in srgb, var(--viking-accent-strong, var(--viking-ring)) 55%, var(--viking-border-strong, var(--border)));
-    box-shadow: var(--viking-shadow-md, var(--shadow-md));
-  }
-}
-
-@mixin viking-navbar-search-panel {
-  margin: 0;
-  padding: var(--viking-space-1, 8px);
-  background: var(--viking-surface, var(--card-bg));
-  border: 1px solid var(--viking-border-strong, var(--border));
-  border-radius: var(--viking-radius, 8px);
-  box-shadow: var(--viking-shadow-md, var(--shadow-md));
-  max-height: 288px;
-  overflow: auto;
-  font-family: var(--viking-font-family, inherit);
-}
-
-.navbar {
-  position: sticky;
-  top: 0;
-  z-index: 50;
-  width: 100%;
-  min-height: var(--viking-navbar-height, 64px);
-  background-color: var(--navbar-bg, var(--viking-surface));
-  border-bottom: 1px solid var(--border-layout, var(--viking-border));
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  padding: 0 var(--viking-space-2, 16px);
-  box-sizing: border-box;
-  overflow: visible;
-  container-type: inline-size;
-  container-name: viking-navbar;
-
-  @media (min-width: 768px) {
-    padding-inline: var(--viking-space-3, 24px);
-  }
-  box-shadow: var(--viking-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.2));
-  isolation: isolate;
-}
-
-.navbar-brand {
-  margin-right: var(--viking-space-1, 8px);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--viking-space-1, 8px);
-  text-decoration: none;
-  overflow: visible;
-  flex-shrink: 0;
-  padding: 0;
-  min-height: 36px;
-  line-height: 1;
-  transition: filter 0.3s ease;
-}
-
-.navbar-title {
-  font-size: var(--base-font-size);
-  font-weight: 700;
-  line-height: 1.2;
-  color: var(--text-color);
-  letter-spacing: -0.02em;
-}
-
-.navbar-logo {
-  font-size: 28px;
-  width: 36px;
-  height: 36px;
-  line-height: 1;
-  color: var(--color-primary, var(--viking-accent));
-  overflow: visible;
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.navbar-brand .navbar-logo,
-.navbar-brand viking-icon.navbar-logo {
-  color: var(--color-primary, var(--viking-accent)) !important;
-}
-
-// Angular mat-icon defaults to overflow:hidden — clips ligature glyphs at tight sizes.
-.navbar-brand .navbar-logo.mat-icon,
-.navbar-brand mat-icon.navbar-logo {
-  overflow: visible !important;
-  width: 36px !important;
-  height: 36px !important;
-  font-size: 28px !important;
-  line-height: 36px !important;
-  padding: 0 !important;
-  box-sizing: border-box;
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-}
-
-.navbar-content {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  gap: var(--viking-space-1, 8px);
-  width: 100%;
-  max-width: var(--viking-container-max-width, 1260px);
-  margin-inline: auto;
-  min-width: 0;
-  min-height: var(--viking-navbar-height, 64px);
-}
-
-.navbar-left {
-  grid-column: 1;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  flex: 0 1 auto;
-  min-width: 0;
-  flex-shrink: 0;
-}
-
-.navbar-right {
-  grid-column: 3;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  flex: 0 0 auto;
-  gap: var(--viking-space-1, 8px);
-  min-width: 0;
-  flex-shrink: 0;
-}
-
-.navbar-search,
-.navbar-search viking-button-wc,
-.navbar-right viking-theme-toggle-wc,
-.navbar-right .menu-toggle-btn,
-.navbar-right viking-button.menu-toggle-btn,
-.navbar-right viking-button-wc.menu-toggle-btn {
-  flex: 0 0 auto;
-}
-
-.navbar-center {
-  grid-column: 2;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: 0;
-}
-
-.desktop-nav {
-  display: none;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  gap: var(--viking-space-1, 8px);
-  padding: var(--viking-space-half, 4px) 0;
-  min-width: 0;
-  max-width: 100%;
-  overflow: hidden;
-}
-
-.desktop-auth {
-  display: none;
-  align-items: center;
-  flex-shrink: 0;
-  gap: var(--viking-space-1, 8px);
-
-  viking-button,
-  viking-button-wc {
-    min-width: var(--viking-btn-min-width, 120px) !important;
-  }
-}
-
-.nav-btn {
-  position: relative;
-  font-size: var(--viking-font-size-sm, 14px) !important;
-  color: var(--nav-link-color, var(--text-muted)) !important;
-  font-weight: 600 !important;
-  text-transform: uppercase !important;
-  letter-spacing: 0.06em !important;
-  transition:
-    color 0.2s ease,
-    background-color 0.2s ease,
-    box-shadow 0.2s ease,
-    transform 0.2s ease !important;
-  border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0 !important;
-  padding: 0 var(--viking-space-1-5, 12px) !important;
-  height: var(--viking-control-height, 40px) !important;
-  line-height: var(--viking-control-height, 40px) !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  gap: 6px !important;
-  text-decoration: none;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  overflow: hidden;
-  flex-shrink: 1;
-  min-width: 0;
-  white-space: nowrap;
-}
-
-.nav-btn[hidden],
-.mobile-nav-btn[hidden] {
-  display: none !important;
-}
-
-.nav-btn .material-icons,
-.nav-btn svg,
-.nav-btn .viking-icon,
-.nav-btn [data-viking-icon],
-.mobile-nav-btn svg,
-.mobile-nav-btn [data-viking-icon],
-.auth-btn svg,
-.auth-btn [data-viking-icon],
-.theme-toggle-btn svg,
-.menu-toggle-btn svg,
-.navbar-search-trigger [data-viking-icon],
-.navbar-search-mobile-btn [data-viking-icon] {
-  margin: 0;
-  flex-shrink: 0;
-}
-
-.nav-btn svg,
-.mobile-nav-btn svg,
-.auth-btn svg,
-.nav-btn [data-viking-icon] svg,
-.mobile-nav-btn [data-viking-icon] svg,
-.auth-btn [data-viking-icon] svg {
-  width: 16px;
-  height: 16px;
-}
-
-.theme-toggle-btn svg,
-.menu-toggle-btn svg,
-.navbar-search-trigger svg,
-.navbar-search-mobile-btn svg,
-.theme-toggle-btn [data-viking-icon] svg,
-.menu-toggle-btn [data-viking-icon] svg,
-.navbar-search-trigger [data-viking-icon] svg,
-.navbar-search-mobile-btn [data-viking-icon] svg {
-  width: 24px;
-  height: 24px;
-}
-
-.navbar-search-trigger [data-viking-icon] svg,
-.navbar-search-mobile-btn [data-viking-icon] svg {
-  width: 20px;
-  height: 20px;
-}
-
-.nav-btn .material-icons {
-  font-size: var(--base-font-size);
-  width: 16px;
-  height: 16px;
-}
-
-.nav-btn::before {
-  content: '';
-  position: absolute;
-  inset: auto 16px 0;
-  height: 2px;
-  border-radius: 2px;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    color-mix(in srgb, var(--viking-accent) 80%, transparent),
-    transparent
-  );
-  opacity: 0;
-  transform: scaleX(0.4);
-  transition:
-    opacity 0.25s ease,
-    transform 0.25s ease;
-  pointer-events: none;
-}
-
-.nav-btn:hover {
-  color: var(--text-color) !important;
-  background-color: color-mix(in srgb, var(--viking-accent) 10%, transparent) !important;
-  transform: translateY(-1px);
-}
-
-.nav-btn:hover::before {
-  opacity: 1;
-  transform: scaleX(1);
-}
-
-html[data-theme='light'] {
-  --nav-link-color: color-mix(in srgb, var(--viking-charcoal-900) 88%, var(--white));
-
-  .nav-btn,
-  .mobile-nav-btn {
-    color: var(--nav-link-color) !important;
-  }
-
-  .menu-toggle-btn,
-  .theme-toggle-btn,
-  .navbar-search-trigger,
-  .navbar-search-mobile-btn {
-    color: var(--viking-text, var(--text-color)) !important;
-  }
-
-  .nav-btn:hover,
-  .mobile-nav-btn:hover {
-    background-color: color-mix(in srgb, var(--viking-accent) 10%, transparent) !important;
-  }
-}
-
-.nav-btn.active {
-  color: var(--text-color) !important;
-  background-color: color-mix(in srgb, var(--viking-accent) 14%, transparent) !important;
-  box-shadow:
-    inset 0 -2px 0 0 var(--viking-accent),
-    0 0 12px color-mix(in srgb, var(--viking-accent) 18%, transparent) !important;
-}
-
-.nav-btn.active::before {
-  opacity: 1;
-  transform: scaleX(1);
-}
-
-.navbar .theme-toggle-btn,
-.theme-toggle-btn {
-  @include viking-navbar-utility-btn;
-  display: inline-grid;
-  place-items: center;
-  padding: 0;
-  border-color: color-mix(
-    in srgb,
-    var(--viking-accent, var(--viking-accent)) 32%,
-    var(--viking-border-strong, var(--border))
-  );
-  background: color-mix(
-    in srgb,
-    var(--viking-accent, var(--viking-accent)) 8%,
-    var(--viking-surface, var(--card-bg))
-  );
-  color: var(--viking-accent-strong, var(--viking-ring));
-
-  svg,
-  viking-icon {
-    display: block;
-    width: 24px;
-    height: 24px;
-  }
-
-  &:hover {
-    border-color: var(--viking-accent-strong, var(--viking-ring));
-    background-color: color-mix(
-      in srgb,
-      var(--viking-accent, var(--viking-accent)) 14%,
-      var(--viking-surface, var(--card-bg))
-    );
-    color: var(--viking-accent-strong, var(--viking-ring));
-    box-shadow: var(--viking-shadow-md, var(--shadow-md));
-  }
-
-  &:active {
-    transform: scale(var(--viking-state-active-scale, 0.98));
-  }
-}
-
-.navbar .theme-toggle-btn .material-icons,
-.navbar .theme-toggle-btn svg,
-.theme-toggle-btn .material-icons,
-.theme-toggle-btn svg {
-  width: 24px;
-  height: 24px;
-}
-
-.menu-toggle-btn,
-viking-button.menu-toggle-btn,
-viking-button-wc.menu-toggle-btn,
-#navbar-search-trigger {
-  @include viking-navbar-utility-btn;
-  display: inline-grid !important;
-  place-items: center;
-  padding: 0;
-
-  svg,
-  viking-icon {
-    display: block;
-    width: 24px;
-    height: 24px;
-  }
-}
-
-.navbar-search viking-button-wc::part(control),
-viking-button-wc.menu-toggle-btn::part(control),
-.navbar-right viking-theme-toggle-wc::part(control) {
-  display: inline-grid;
-  place-items: center;
-  width: var(--viking-control-height, 40px);
-  min-width: var(--viking-control-height, 40px);
-  max-width: var(--viking-control-height, 40px);
-  height: var(--viking-control-height, 40px);
-  min-height: var(--viking-control-height, 40px);
-  padding: 0;
-  line-height: 1;
-  box-sizing: border-box;
-}
-
-.navbar-search viking-button-wc [data-viking-icon],
-viking-button-wc.menu-toggle-btn [data-viking-icon] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--viking-icon-size-md, 20px);
-  height: var(--viking-icon-size-md, 20px);
-  line-height: 1;
-}
-
-.menu-toggle-btn[aria-expanded='true'] {
-  border-color: var(--viking-accent, var(--viking-accent));
-  color: var(--viking-accent-strong, var(--viking-ring));
-  background: var(--viking-accent-soft, color-mix(in srgb, var(--viking-accent) 12%, transparent));
-  box-shadow: var(--viking-shadow-sm, var(--shadow-sm));
-}
-
-.divider {
-  height: 24px;
-  width: 0px;
-  background-color: var(--border);
-  margin: 0 8px;
-}
-
-.auth-btn .material-icons {
-  margin: 0;
-  font-size: var(--viking-font-size-sm, 14px);
-  width: 16px;
-  height: 16px;
-}
-
-.auth-btn,
-a.auth-btn,
-button.auth-btn {
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  gap: var(--viking-space-1, 8px) !important;
-  min-width: var(--viking-btn-min-width, 120px) !important;
-  height: var(--viking-control-height, 40px) !important;
-  min-height: var(--viking-control-height, 40px) !important;
-  padding: 0 var(--viking-space-2, 16px) !important;
-  border-radius: var(--viking-radius, 8px) !important;
-  letter-spacing: var(--viking-letter-spacing-caps, 0.08em) !important;
-  text-transform: uppercase !important;
-  white-space: nowrap !important;
-  line-height: 1 !important;
-}
-
-.auth-btn::part(control),
-viking-button.auth-btn::part(control),
-viking-button.auth-btn viking-button-wc::part(control),
-viking-button.auth-btn viking-button-wc,
-viking-button-wc.auth-btn::part(control),
-.auth-btn.viking-full::part(control) {
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  gap: var(--viking-space-1, 8px) !important;
-  min-width: var(--viking-btn-min-width, 120px) !important;
-  min-height: var(--viking-control-height, 40px) !important;
-  height: var(--viking-control-height, 40px) !important;
-  padding: 0 var(--viking-space-2, 16px) !important;
-  box-sizing: border-box !important;
-}
-
-.auth-signout-btn {
-  background: transparent !important;
-  color: var(--text-muted) !important;
-  font-weight: 600 !important;
-  border-radius: var(--viking-radius, 8px) !important;
-  padding: 0 var(--viking-space-2, 16px) !important;
-  border: 1px solid var(--border) !important;
-  height: var(--viking-control-height, 40px) !important;
-  line-height: var(--viking-control-height, 40px) !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  gap: var(--viking-space-1, 8px) !important;
-  white-space: nowrap !important;
-  text-transform: uppercase !important;
-  letter-spacing: 0.08em !important;
-  cursor: pointer;
-  transition: var(--viking-transition-interactive) !important;
-}
-
-.auth-signout-btn[hidden] {
-  display: none !important;
-}
-
-.auth-btn [data-viking-icon],
-.auth-btn [data-viking-icon] svg,
-.auth-signout-btn [data-viking-icon],
-.auth-signout-btn [data-viking-icon] svg {
-  margin: 0 !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  width: 16px !important;
-  height: 16px !important;
-  line-height: 1 !important;
-}
-
-.auth-signout-btn:hover {
-  color: var(--text-color) !important;
-  border-color: var(--viking-crimson-500) !important;
-  background: color-mix(in srgb, var(--viking-crimson-500) 10%, transparent) !important;
-}
-
-.mobile-menu:not(.open) {
-  display: none !important;
-}
-
-.mobile-menu {
-  display: none;
-  flex-direction: column;
-  position: absolute;
-  top: var(--viking-navbar-height, var(--navbar-height, 64px));
-  left: 0;
-  right: 0;
-  width: auto;
-  max-height: calc(100dvh - var(--viking-navbar-height, var(--navbar-height, 64px)));
-  overflow-x: hidden;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  -webkit-overflow-scrolling: touch;
-  background-color: var(--viking-surface, var(--card-bg));
-  box-shadow: var(--viking-shadow-md, var(--shadow-md));
-  border-bottom: 1px solid var(--viking-border, var(--border));
-  padding: var(--viking-space-3, 24px);
-  padding-bottom: calc(var(--viking-space-3, 24px) + env(safe-area-inset-bottom, 0px));
-  box-sizing: border-box;
-  z-index: 49;
-  gap: var(--viking-space-half, 4px);
-
-  viking-button,
-  viking-button-wc,
-  .mobile-auth-btn {
-    width: 100%;
-  }
-
-  .mobile-auth-btn,
-  .auth-signout-btn,
-  .mobile-auth-btn::part(control),
-  .mobile-auth-btn.auth-btn::part(control),
-  .mobile-auth-btn.auth-signout-btn::part(control) {
-    flex-shrink: 0;
-    width: 100%;
-  }
-
-  transform: translateY(-10px);
-  opacity: 0;
-  pointer-events: none;
-  transition:
-    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
-    opacity 0.25s ease;
-}
-
-.mobile-menu.open {
-  transform: translateY(0);
-  opacity: 1;
-  pointer-events: auto;
-  display: flex;
-}
-
-.mobile-nav-btn {
-  width: 100% !important;
-  justify-content: flex-start !important;
-  font-size: var(--viking-font-size-sm, 14px) !important;
-  font-weight: 600 !important;
-  text-transform: uppercase !important;
-  letter-spacing: 0.06em !important;
-  color: var(--viking-text-muted, var(--text-muted)) !important;
-  min-height: 44px !important;
-  border-radius: var(--viking-radius, 8px) !important;
-  padding: 0 var(--viking-space-2, 16px) !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  gap: var(--viking-space-1, 8px) !important;
-  text-decoration: none;
-  border: 1px solid transparent;
-  background: transparent;
-  transition: var(--viking-transition-interactive, all 0.25s ease);
-}
-
-.mobile-nav-btn .material-icons {
-  margin: 0;
-  font-size: 20px;
-  width: 20px;
-  height: 20px;
-}
-
-.mobile-nav-btn:hover {
-  color: var(--viking-text, var(--text-color)) !important;
-  background-color: var(--viking-accent-soft, color-mix(in srgb, var(--viking-accent) 8%, transparent)) !important;
-}
-
-.mobile-nav-btn.active {
-  color: var(--viking-text, var(--text-color)) !important;
-  background-color: var(--viking-accent-soft, color-mix(in srgb, var(--viking-accent) 12%, transparent)) !important;
-  box-shadow: inset 0 0 0 1px var(--viking-accent-strong, var(--viking-ring)) !important;
-}
-
-.mobile-divider {
-  height: 1px;
-  background-color: var(--viking-border, var(--border));
-  margin: var(--viking-space-2, 16px) 0 var(--viking-space-1, 8px);
-  flex-shrink: 0;
-}
-
-.mobile-menu .mobile-auth-btn {
-  margin-top: var(--viking-space-half, 4px);
-}
-
-.mobile-menu a.mobile-auth-btn:not(.auth-signout-btn),
-.mobile-menu a.mobile-auth-btn:not(.auth-signout-btn) span,
-.mobile-menu a.mobile-auth-btn:not(.auth-signout-btn) svg {
-  color: var(--viking-white-pure, var(--viking-white-pure)) !important;
-}
-
-.navbar-link {
-  font-size: 1rem;
-  color: var(--text-muted);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  text-decoration: none;
-  transition: var(--transition-smooth);
-}
-
-.navbar-link:hover {
-  color: var(--text-color);
-}
-
-.glowing-icon-sm {
-  color: var(--color-primary, var(--primary-text-color, var(--viking-accent))) !important;
-  transition: all 0.3s ease;
-}
-
-// Glow on the brand link wrapper so mat-icon overflow does not clip the filter.
-.navbar-brand.glowing-icon-sm,
-.navbar-brand:has(.glowing-icon-sm) {
-  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-primary) 60%, transparent));
-}
-
-.navbar-brand.glowing-icon-sm:hover,
-.navbar-brand:has(.glowing-icon-sm):hover {
-  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-primary) 90%, transparent));
-}
-
-.loader-logo.glowing-icon-sm,
-:not(.navbar-brand) > .glowing-icon-sm {
-  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-primary) 60%, transparent));
-}
-
-.loader-logo.glowing-icon-sm:hover,
-:not(.navbar-brand) > .glowing-icon-sm:hover {
-  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-primary) 90%, transparent));
-}
-
-// Algolia Experiences autocomplete — aligned with viking-autocomplete + search-palette.
-
-.navbar-search {
-  display: inline-flex;
-  align-items: center;
-  align-self: center;
-  flex: 0 0 auto;
-  justify-content: center;
-  max-width: none;
-  min-width: 0;
-  min-height: var(--viking-control-height, 40px);
-  margin: 0;
-  line-height: 0;
-
-  viking-button,
-  viking-button-wc {
-    flex-shrink: 0;
-  }
-}
-
-.algolia-autocomplete-host {
-  display: none;
-  font-family: var(--viking-font-family, inherit);
-
-  --aa-font-family: var(--viking-font-family, inherit);
-  --aa-font-size: var(--viking-font-size-sm, 14px);
-  --aa-spacing: var(--viking-space-1, 8px);
-  --aa-spacing-half: var(--viking-space-half, 4px);
-  --aa-panel-max-height: 288px;
-  --aa-panel-shadow: var(--viking-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.25));
-  --aa-icon-size: 20px;
-  --aa-icon-stroke-width: 2px;
-  --aa-primary-color-rgb: 20, 163, 168;
-  --aa-muted-color-rgb: 148, 163, 184;
-}
-
-// Command-palette modal — matches viking-search-palette on every breakpoint.
-.algolia-autocomplete-host.algolia-autocomplete-open {
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  position: fixed;
-  inset: 0;
-  z-index: var(--viking-z-overlay, 10001);
-  padding: 10vh var(--viking-space-2, 16px) var(--viking-space-2, 16px);
-  background: var(--viking-overlay-backdrop, rgba(0, 0, 0, 0.55));
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-  border: none;
-  box-shadow: none;
-  max-width: none;
-  width: auto;
-  min-width: 0;
-
-  .aa-Autocomplete,
-  .aa-DetachedContainer {
-    max-width: 600px;
-    width: 100%;
-    border: 1px solid var(--viking-border-strong, var(--viking-border, var(--border)));
-    border-radius: var(--viking-radius-lg, 12px);
-    background: var(--viking-surface, var(--card-bg));
-    box-shadow: var(--viking-shadow-lg, var(--shadow-md));
-    overflow: hidden;
-    font-family: var(--viking-font-family, inherit);
-    color: var(--viking-text, var(--text-color));
-    position: relative;
-  }
-
-  .aa-Autocomplete::before,
-  .aa-DetachedContainer::before {
-    content: '';
-    position: absolute;
-    inset: 0 0 auto;
-    height: 1px;
-    background: linear-gradient(
-      90deg,
-      transparent,
-      color-mix(in srgb, var(--viking-metallic-200) 22%, transparent),
-      transparent
-    );
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  .aa-Form,
-  form {
-    @include viking-navbar-search-shell;
-    margin: 0 !important;
-    border: 0 !important;
-    border-bottom: 1px solid var(--viking-border, var(--border)) !important;
-    border-radius: 0 !important;
-    box-shadow: none !important;
-    background: color-mix(in srgb, var(--viking-bg, var(--bg-color)) 20%, transparent);
-
-    &:focus-within {
-      border-bottom-color: var(--viking-accent, var(--viking-accent)) !important;
-      box-shadow: inset 0 -2px 0 var(--viking-accent-soft, color-mix(in srgb, var(--viking-accent) 12%, transparent)) !important;
-      outline: none;
-    }
-  }
-
-  .aa-Panel {
-    position: static;
-    margin: 0;
-    border: 0;
-    border-radius: 0;
-    box-shadow: none;
-    background: transparent;
-    max-height: 50vh;
-    padding: var(--viking-space-2, 16px);
-  }
-
-  &::after {
-    content: '⌘K toggle · Esc close';
-    display: block;
-    max-width: 600px;
-    width: 100%;
-    margin: 0 auto;
-    padding: var(--viking-space-1, 8px) var(--viking-space-2, 16px);
-    border: 1px solid var(--viking-border, var(--border));
-    border-top: 1px solid var(--viking-border, var(--border));
-    border-radius: 0 0 var(--viking-radius-lg, 12px) var(--viking-radius-lg, 12px);
-    background: var(--viking-surface, var(--card-bg));
-    font-size: calc(var(--viking-font-size, 16px) * 0.85);
-    color: var(--viking-text-muted, var(--text-muted));
-    text-align: center;
-    letter-spacing: 0.01em;
-  }
-}
-
-.navbar-search-trigger,
-.navbar-search-mobile-btn {
-  @include viking-navbar-utility-btn;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--viking-control-height, 40px);
-  height: var(--viking-control-height, 40px);
-  padding: 0;
-  flex-shrink: 0;
-  align-self: center;
-}
-
-.algolia-autocomplete-host .aa-Autocomplete,
-.algolia-autocomplete-host .aa-DetachedContainer {
-  width: 100%;
-}
-
-.algolia-autocomplete-host .aa-Form,
-.algolia-autocomplete-host form {
-  @include viking-navbar-search-shell;
-  margin: 0 !important;
-
-  &:focus-within {
-    @include viking-navbar-search-shell-focus;
-  }
-}
-
-.algolia-autocomplete-host .aa-InputWrapper {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-width: 0;
-  gap: var(--viking-space-1, 8px);
-  border: 0 !important;
-  box-shadow: none !important;
-  background: transparent !important;
-  padding: 0 !important;
-}
-
-.algolia-autocomplete-host .aa-InputWrapperPrefix,
-.algolia-autocomplete-host .aa-InputWrapperSuffix {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  align-self: center;
-  color: var(--viking-accent-strong, var(--viking-ring));
-  border: 0 !important;
-  box-shadow: none !important;
-  background: transparent !important;
-  padding: 0 !important;
-  line-height: 1;
-}
-
-// Hide Algolia default purple branding; prefix uses theme accent at control size.
-.algolia-autocomplete-host .aa-SubmitButton,
-.algolia-autocomplete-host .aa-DetachedSearchButton,
-.algolia-autocomplete-host .aa-Label,
-.algolia-autocomplete-host .aa-PoweredBy {
-  display: none !important;
-}
-
-.algolia-autocomplete-host .aa-InputWrapperPrefix svg,
-.algolia-autocomplete-host .aa-InputWrapperSuffix svg,
-.algolia-autocomplete-host .aa-InputWrapperPrefix img,
-.algolia-autocomplete-host .aa-InputWrapperSuffix img {
-  width: 20px !important;
-  height: 20px !important;
-  max-width: 20px !important;
-  max-height: 20px !important;
-  color: var(--viking-accent-strong, var(--viking-ring)) !important;
-  fill: currentColor !important;
-  stroke: currentColor !important;
-}
-
-.algolia-autocomplete-host .aa-Input,
-.algolia-autocomplete-host input {
-  flex: 1;
-  width: 100%;
-  min-width: 0;
-  min-height: 0 !important;
-  height: auto;
-  padding: 0 !important;
-  border: 0 !important;
-  border-radius: 0 !important;
-  outline: none !important;
-  background: transparent !important;
-  color: var(--viking-text, var(--text-color));
-  font: inherit;
-  font-size: var(--viking-font-size, 16px);
-  line-height: var(--viking-line-height-normal, 1.5);
-  box-shadow: none !important;
-}
-
-.algolia-autocomplete-host .aa-Input::placeholder,
-.algolia-autocomplete-host input::placeholder {
-  color: var(--viking-text-muted, var(--text-muted));
-}
-
-.algolia-autocomplete-host .aa-Panel {
-  @include viking-navbar-search-panel;
-  position: absolute;
-  top: calc(100% + var(--viking-space-1, 8px));
-  left: 0;
-  right: 0;
-  z-index: var(--viking-z-overlay, 10001);
-}
-
-.algolia-autocomplete-host .aa-PanelLayout,
-.algolia-autocomplete-host .aa-Source {
-  margin: 0;
-}
-
-.algolia-autocomplete-host .aa-List {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.algolia-autocomplete-host .aa-SourceHeader {
-  display: flex;
-  align-items: center;
-  gap: var(--viking-space-1, 8px);
-  padding: var(--viking-space-1, 8px) var(--viking-space-1, 8px) 0;
-  margin: 0;
-}
-
-.algolia-autocomplete-host .aa-SourceHeaderTitle {
-  font-size: calc(var(--viking-font-size-sm, 14px) * 0.85);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--viking-text-muted, var(--text-muted));
-}
-
-.algolia-autocomplete-host .aa-SourceHeaderLine {
-  flex: 1;
-  height: 1px;
-  background: var(--viking-border, var(--border));
-}
-
-.algolia-autocomplete-host .aa-Item {
-  border-radius: calc(var(--viking-radius, 8px) / 1.5);
-  padding: 0;
-  margin: 0;
-}
-
-.algolia-autocomplete-host .aa-ItemLink,
-.algolia-autocomplete-host .aa-ItemWrapper {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--viking-space-1-5, 12px);
-  min-height: var(--viking-control-height-sm, 36px);
-  padding: var(--viking-space-1-5, 12px);
-  border-radius: calc(var(--viking-radius, 8px) / 1.5);
-  color: var(--viking-text, var(--text-color));
-  text-decoration: none;
-  transition: var(--viking-transition-interactive, background-color 0.2s ease);
-}
-
-.algolia-autocomplete-host .aa-Item[aria-selected='true'] .aa-ItemLink,
-.algolia-autocomplete-host .aa-Item[aria-selected='true'] .aa-ItemWrapper,
-.algolia-autocomplete-host .aa-Item:hover .aa-ItemLink,
-.algolia-autocomplete-host .aa-Item:hover .aa-ItemWrapper {
-  background: var(--viking-accent-soft, color-mix(in srgb, var(--viking-accent) 12%, transparent));
-}
-
-.algolia-autocomplete-host .aa-ItemContent {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--viking-space-1-5, 12px);
-  min-width: 0;
-  flex: 1;
-}
-
-.algolia-autocomplete-host .aa-ItemIcon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: var(--viking-space-5, 40px);
-  height: var(--viking-space-5, 40px);
-  margin-top: 2px;
-  border-radius: var(--viking-radius, 8px);
-  background: var(--viking-surface-alt, var(--viking-charcoal-700)) !important;
-  box-shadow: none !important;
-  color: var(--viking-accent-strong, var(--viking-ring));
-  overflow: hidden;
-
-  img,
-  svg {
-    width: 20px;
-    height: 20px;
-    object-fit: contain;
-  }
-}
-
-.algolia-autocomplete-host .aa-Item[aria-selected='true'] .aa-ItemIcon,
-.algolia-autocomplete-host .aa-Item:hover .aa-ItemIcon {
-  color: var(--viking-accent, var(--viking-accent));
-}
-
-.algolia-autocomplete-host .aa-ItemContentBody {
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--viking-space-1, 8px) / 2);
-  min-width: 0;
-  flex: 1;
-}
-
-.algolia-autocomplete-host .aa-ItemContentTitle {
-  font-size: var(--viking-font-size, 16px);
-  font-weight: 600;
-  color: var(--viking-text, var(--text-color));
-  line-height: 1.3;
-}
-
-.algolia-autocomplete-host .aa-ItemContentDescription {
-  font-size: var(--viking-font-size-sm, 14px);
-  color: var(--viking-text-muted, var(--text-muted));
-  line-height: var(--viking-line-height-relaxed, 1.625);
-  white-space: normal;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  text-overflow: ellipsis;
-}
-
-.algolia-autocomplete-host mark,
-.algolia-autocomplete-host .aa-ItemContentTitle mark,
-.algolia-autocomplete-host .aa-ItemContentDescription mark {
-  background: color-mix(in srgb, var(--viking-accent, var(--viking-accent)) 20%, transparent);
-  color: var(--viking-accent, var(--viking-accent));
-  border-radius: 0;
-  padding: 0;
-  font-weight: 600;
-}
-
-.algolia-autocomplete-host .aa-ItemActions,
-.algolia-autocomplete-host .aa-GradientBottom,
-.algolia-autocomplete-host .aa-GradientTop {
-  display: none;
-}
-
-// Detached overlay (Algolia mobile / portal panel) — match search-palette modal.
-.aa-DetachedOverlay {
-  background: var(--viking-overlay-backdrop, rgba(0, 0, 0, 0.55)) !important;
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-}
-
-.aa-DetachedContainer {
-  font-family: var(--viking-font-family, inherit);
-  border: 1px solid var(--viking-border, var(--border)) !important;
-  border-radius: var(--viking-radius-lg, 12px) !important;
-  background: var(--viking-surface, var(--card-bg)) !important;
-  box-shadow: var(--viking-shadow-lg, var(--shadow-md)) !important;
-}
-
-.aa-DetachedContainer .aa-Form,
-.aa-DetachedContainer form {
-  @include viking-navbar-search-shell;
-  margin: var(--viking-space-1, 8px) !important;
-  border-bottom: 1px solid var(--viking-border, var(--border)) !important;
-  border-radius: var(--viking-radius, 8px) var(--viking-radius, 8px) 0 0 !important;
-  box-shadow: none !important;
-}
-
-.aa-DetachedContainer .aa-Panel {
-  @include viking-navbar-search-panel;
-  position: static !important;
-  border: 0 !important;
-  box-shadow: none !important;
-  max-height: 50vh !important;
-}
-
-@media (min-width: 768px) {
-  .navbar-content {
-    position: relative;
-  }
-
-  .navbar-center.desktop-nav {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 1;
-    pointer-events: auto;
-    max-width: min(100% - 22rem, 42rem);
-    overflow: hidden;
-    justify-content: center;
-  }
-
-  .navbar-left {
-    position: relative;
-    z-index: 2;
-    flex-shrink: 0;
-  }
-
-  .navbar-right {
-    position: relative;
-    z-index: 2;
-    flex-shrink: 0;
-    min-width: 12.5rem;
-    pointer-events: none;
-
-    > * {
-      pointer-events: auto;
-    }
-  }
-
-  .desktop-nav {
-    display: flex;
-  }
-
-  .desktop-auth {
-    display: flex;
-  }
-
-  .menu-toggle-btn,
-  viking-button.menu-toggle-btn {
-    display: none !important;
-  }
-
-  .mobile-menu:not(.open) {
-    display: none !important;
-  }
-
-  .mobile-menu.open {
-    display: none !important;
-  }
-
-  .navbar-right {
-    gap: var(--viking-space-2, 16px);
-  }
-
-  .desktop-nav {
-    gap: var(--viking-space-1, 8px);
-  }
-}
-
-// Compact desktop — icon-only nav labels when the bar is still tight.
-@container viking-navbar (min-width: 880px) and (max-width: 1120px) {
-  .nav-btn {
-    padding: 0 var(--viking-space-1, 8px) !important;
-    gap: 0 !important;
-  }
-
-  .nav-btn > span {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-}
-
-// Full desktop — restore nav link labels and spacing.
-@container viking-navbar (min-width: 1121px) {
-  .nav-btn {
-    padding: 0 var(--viking-space-2, 16px) !important;
-    gap: 8px !important;
-    font-size: var(--viking-font-size, 16px) !important;
-    letter-spacing: 0.08em !important;
-  }
-}