@charset "UTF-8";
/*! Viking-UI Interactive Components — framework-agnostic CSS primitives.
 *  Load after design-tokens.css for Astro, Django, or any HTML project.
 *  Build: npm run build:viking-ui:package */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter/InterVariable.woff2") format("woff2 supports variations"), url("fonts/inter/InterVariable.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: optional;
  src: url("fonts/inter/InterVariable-Italic.woff2") format("woff2 supports variations"), url("fonts/inter/InterVariable-Italic.woff2") format("woff2-variations");
}
:root {
  /* Touch targets — WCAG 2.5.5 / mobile-first minimum hit area */
  --viking-touch-target-min: 44px;
  --viking-touch-target-comfort: 44px;
  /* Interactive state */
  --viking-state-disabled-opacity: 0.48;
  --viking-state-hover-lift: -1px;
  --viking-state-active-scale: var(--suite-active-scale, 0.985);
  --viking-state-press-inset: inset 0 1px 2px rgba(0, 0, 0, 0.28);
  --viking-shadow-hover: var(
    --shadow-hover,
    0 2px 4px rgba(0, 0, 0, 0.25),
    0 12px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05)
  );
  --viking-surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --viking-transition-interactive:
    color var(--viking-duration) var(--viking-ease-default),
    background-color var(--viking-duration) var(--viking-ease-default),
    border-color var(--viking-duration) var(--viking-ease-default),
    box-shadow var(--viking-duration) var(--viking-ease-default),
    transform var(--viking-duration-fast) var(--viking-ease-default),
    opacity var(--viking-duration-fast) var(--viking-ease-default);
  --viking-transition-transform: transform var(--viking-duration-fast)
    var(--viking-ease-default);
}

/* Shared keyframes */
@keyframes viking-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes viking-slide-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes viking-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes viking-modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes viking-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes viking-shimmer {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -80% 0;
  }
}
@keyframes viking-pulse-soft {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.72;
  }
}
@keyframes viking-shake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-4px);
  }
  40%, 80% {
    transform: translateX(4px);
  }
}
@keyframes viking-tooltip-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes viking-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Shared focus-ring utilities — use on interactive hosts without duplicating tokens */
.viking-focus-ring:focus-visible {
  outline: var(--viking-ring-width) solid var(--viking-ring);
  outline-offset: var(--viking-ring-offset);
}

.viking-focus-ring-inset:focus-visible {
  outline: var(--viking-ring-width) solid var(--viking-ring);
  outline-offset: calc(var(--viking-ring-offset) * -1);
}

/* Expand visual-only controls to touch-friendly hit areas without changing layout */
.viking-touch-target {
  position: relative;
  min-width: var(--viking-touch-target-min);
  min-height: var(--viking-touch-target-min);
}

.viking-touch-target::before {
  content: "";
  position: absolute;
  inset: 50%;
  width: max(100%, var(--viking-touch-target-min));
  height: max(100%, var(--viking-touch-target-min));
  transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
  :root {
    --viking-touch-target-comfort: 36px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.viking-heading {
  margin: 0 0 var(--viking-space-3) 0;
  font-family: var(--viking-font-family);
  font-weight: var(--viking-font-weight-bold);
  letter-spacing: var(--viking-letter-spacing-tight);
  line-height: var(--viking-line-height-tight);
  color: var(--viking-text);
}

.viking-heading-xl {
  font-size: var(--viking-font-size-xl);
  margin-bottom: var(--viking-space-4);
}

.viking-heading-lg {
  font-size: var(--viking-font-size-lg);
  margin-bottom: var(--viking-space-3);
}

.viking-heading-sm {
  font-size: var(--viking-font-size-lg);
  font-weight: var(--viking-font-weight-semibold);
  margin-bottom: var(--viking-space-2);
}

/* Marketing / hero display — opt-in */
.viking-heading.viking-font-display,
.viking-heading-xl.viking-font-display,
.viking-font-display.viking-heading,
.viking-font-display.viking-heading-xl {
  font-weight: var(--viking-font-weight-extrabold, 800);
  letter-spacing: var(--viking-letter-spacing-caps, 0.08em);
  text-transform: uppercase;
  line-height: var(--viking-line-height-none, 1);
}

.viking-heading-xl.viking-font-display,
.viking-font-display.viking-heading-xl {
  font-size: clamp(var(--viking-font-size-2xl, 30px), 4.5vw, var(--viking-font-size-4xl, 48px));
}

.viking-text {
  margin: 0 0 var(--viking-space-2) 0;
  line-height: var(--viking-line-height-relaxed);
  color: var(--viking-text);
}

.viking-text-muted {
  margin: 0 0 var(--viking-space-2) 0;
  line-height: var(--viking-line-height-relaxed);
  color: var(--viking-text-muted);
  max-width: var(--viking-content-readable-max-width, 48rem);
}

.viking-label {
  display: block;
  font-size: var(--viking-font-size-xs);
  font-weight: var(--viking-font-weight-semibold);
  letter-spacing: var(--viking-letter-spacing-caps);
  text-transform: uppercase;
  color: var(--viking-text-muted);
  margin-bottom: var(--viking-space-0-5);
}

.viking-metric {
  display: block;
  font-size: var(--viking-font-size-xl);
  font-weight: var(--viking-font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--viking-text);
  margin-bottom: var(--viking-space-1);
}

.viking-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--viking-space-0-5);
  min-height: var(--viking-badge-height);
  padding: 0 var(--viking-space-1);
  font-size: var(--viking-font-size-xs);
  font-weight: var(--viking-font-weight-semibold);
  letter-spacing: var(--viking-letter-spacing-wide);
  border-radius: var(--viking-radius-pill);
  border: var(--viking-border-width) var(--viking-border-style) var(--viking-component-border);
  background: var(--viking-component-bg-subtle);
  color: var(--viking-text);
  white-space: nowrap;
}

.viking-badge-accent {
  background: var(--viking-accent-soft);
  border-color: color-mix(in srgb, var(--viking-accent) 32%, transparent);
  color: var(--viking-accent-strong);
}

.viking-badge-success {
  background: color-mix(in srgb, var(--viking-success) 18%, var(--viking-surface));
  border-color: color-mix(in srgb, var(--viking-success) 40%, transparent);
  color: var(--viking-success);
}

.viking-badge-warning {
  background: color-mix(in srgb, var(--viking-warning) 18%, var(--viking-surface));
  border-color: color-mix(in srgb, var(--viking-warning) 40%, transparent);
  color: var(--viking-warning);
}

.viking-badge-danger {
  background: color-mix(in srgb, var(--viking-danger) 18%, var(--viking-surface));
  border-color: color-mix(in srgb, var(--viking-danger) 40%, transparent);
  color: var(--viking-danger);
}

.viking-badge-subtle {
  background: var(--viking-surface-alt);
  color: var(--viking-text-muted);
  font-size: var(--viking-font-size-2xs);
}

.viking-callout-static {
  padding: var(--viking-space-2);
  border-radius: var(--viking-radius);
  border: 1px solid var(--viking-border);
  background: var(--viking-surface-alt);
}

.viking-callout-static strong {
  display: block;
  margin-bottom: var(--viking-space-0-5);
}

.viking-callout-static p {
  margin: 0;
  font-size: var(--viking-font-size-sm);
  color: var(--viking-text-muted);
}

.viking-callout-info {
  border-color: color-mix(in srgb, var(--viking-accent) 35%, var(--viking-border));
  background: color-mix(in srgb, var(--viking-accent) 8%, var(--viking-surface));
}

.viking-callout-warning {
  border-color: color-mix(in srgb, var(--viking-warning) 35%, var(--viking-border));
  background: color-mix(in srgb, var(--viking-warning) 8%, var(--viking-surface));
}

.viking-callout-success {
  border-color: color-mix(in srgb, var(--viking-success) 35%, var(--viking-border));
  background: color-mix(in srgb, var(--viking-success) 8%, var(--viking-surface));
}

.viking-callout-danger {
  border-color: color-mix(in srgb, var(--viking-danger) 35%, var(--viking-border));
  background: color-mix(in srgb, var(--viking-danger) 8%, var(--viking-surface));
}

.viking-progress {
  width: 100%;
  height: var(--viking-space-1);
  border-radius: var(--viking-radius-pill);
  background: var(--viking-surface-alt);
  overflow: hidden;
}

.viking-progress-bar {
  height: 100%;
  width: var(--viking-progress-value, 0%);
  background: var(--viking-accent);
  border-radius: inherit;
  transition: width var(--viking-duration) var(--viking-ease-out);
}

.viking-progress-value-33,
.viking-bar-value-33 {
  --viking-progress-value: 33%;
}

.viking-progress-value-72,
.viking-bar-value-72 {
  --viking-progress-value: 72%;
}

.viking-progress-value-94,
.viking-bar-value-94 {
  --viking-progress-value: 94%;
}

.viking-progress-indeterminate .viking-progress-bar {
  width: 40%;
  animation: viking-progress-slide 1.2s ease-in-out infinite;
}

@keyframes viking-progress-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(350%);
  }
}
.viking-skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--viking-space-2);
}

.viking-skeleton-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--viking-space-1);
}

.viking-skeleton {
  background: linear-gradient(90deg, var(--viking-surface-alt) 25%, var(--viking-surface-raised) 50%, var(--viking-surface-alt) 75%);
  background-size: 200% 100%;
  animation: viking-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--viking-radius-sm);
}

.viking-skeleton-circle {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.viking-skeleton-line {
  height: 0.75rem;
}

.viking-skeleton-line-short {
  width: 60%;
}

@keyframes viking-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.viking-field-label {
  display: block;
  font-size: var(--viking-font-size-sm);
  font-weight: var(--viking-font-weight-semibold);
  color: var(--viking-text);
  letter-spacing: var(--viking-letter-spacing-wide);
  line-height: var(--viking-line-height-tight);
  margin: 0 0 var(--viking-space-1);
}

.viking-field,
.viking-field-static {
  display: flex;
  flex-direction: column;
  gap: var(--viking-space-2);
}

.viking-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: var(--viking-space-1);
  cursor: pointer;
  font-size: var(--viking-font-size-sm);
  min-height: var(--viking-touch-target-min, 44px);
}

.viking-checkbox-label input {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--viking-accent);
}

.viking-select-native {
  width: 100%;
  min-height: var(--viking-control-height, 40px);
  padding: 0 var(--viking-space-2);
  border: 1px solid var(--viking-border);
  border-radius: var(--viking-radius);
  background: var(--viking-surface);
  color: var(--viking-text);
  font-family: inherit;
  font-size: var(--viking-font-size-sm);
}

.viking-select-native:focus-visible {
  outline: var(--viking-ring-width, 2px) solid var(--viking-ring);
  outline-offset: var(--viking-ring-offset, 2px);
}

.viking-table-wrap {
  overflow-x: auto;
  width: 100%;
  background: var(--viking-component-bg);
  border: var(--viking-border-width) var(--viking-border-style) var(--viking-component-border);
  border-radius: var(--viking-component-surface-radius);
  box-shadow: var(--viking-component-shadow);
}

.viking-table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: var(--viking-font-size-sm);
}

.viking-table th,
.viking-table td {
  padding: var(--viking-table-cell-padding-y) var(--viking-table-cell-padding-x);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--viking-border);
}

.viking-table th {
  color: var(--viking-text-muted);
  font-weight: var(--viking-font-weight-semibold);
  font-size: var(--viking-font-size-xs);
  letter-spacing: var(--viking-letter-spacing-wide);
  background: var(--viking-component-bg-subtle);
}

.viking-table tbody tr:hover td {
  background: color-mix(in srgb, var(--viking-accent) 6%, var(--viking-component-bg));
}

.viking-tabs {
  display: inline-flex;
  gap: var(--viking-space-0-5);
  padding: var(--viking-space-0-5);
  border: 1px solid var(--viking-border);
  border-radius: var(--viking-radius);
  background: var(--viking-surface-alt);
}

.viking-tab {
  padding: var(--viking-space-1) var(--viking-space-2);
  border: none;
  border-radius: var(--viking-radius-sm);
  background: transparent;
  color: var(--viking-text-muted);
  font-size: var(--viking-font-size-sm);
  font-weight: var(--viking-font-weight-medium);
  cursor: pointer;
  min-height: var(--viking-touch-target-min, 44px);
}

.viking-tab-active {
  background: var(--viking-surface);
  color: var(--viking-text);
  box-shadow: var(--viking-shadow-xs);
}

.viking-tab:focus-visible {
  outline: var(--viking-ring-width, 2px) solid var(--viking-ring);
  outline-offset: var(--viking-ring-offset, 2px);
}

.viking-page-header-static {
  display: flex;
  flex-direction: column;
  gap: var(--viking-space-2);
  padding: var(--viking-space-4);
  border: 1px solid var(--viking-border);
  border-radius: var(--viking-card-radius, var(--viking-radius-xl));
  background: var(--viking-surface-recipe, var(--viking-surface));
  box-shadow: var(--viking-shadow-md);
}

.viking-kbd-static {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  min-width: 1.75rem;
  font-family: inherit;
  font-size: calc(var(--viking-font-size) * 0.75);
  line-height: 1;
  padding: 0.25rem 0.45rem;
  border-radius: calc(var(--viking-radius) / 2);
  border: 1px solid var(--viking-border);
  background: var(--viking-surface-alt);
  box-sizing: border-box;
  vertical-align: middle;
}

.viking-divider-labeled {
  display: flex;
  align-items: center;
  gap: var(--viking-space-2);
  color: var(--viking-text-muted);
  font-size: var(--viking-font-size-xs);
}

.viking-divider-labeled::before,
.viking-divider-labeled::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--viking-border);
}

.viking-demo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--viking-space-2);
}

.viking-demo-row > * {
  align-self: center;
}

.viking-demo-row-stack {
  flex-direction: column;
  align-items: stretch;
}

.viking-breadcrumbs-static {
  display: flex;
  align-items: center;
  font-size: var(--viking-font-size-sm);
  line-height: 1;
}

.viking-breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--viking-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: var(--viking-control-height-sm, 36px);
}

.viking-breadcrumbs-list li {
  display: inline-flex;
  align-items: center;
  gap: var(--viking-space-1);
  min-height: 1.5rem;
  line-height: 1;
}

.viking-breadcrumbs-list li:not(:last-child)::after {
  content: "/";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1em;
  color: var(--viking-text-muted);
  line-height: 1;
  flex-shrink: 0;
}

.viking-breadcrumbs-list a {
  display: inline-flex;
  align-items: center;
  color: var(--viking-accent);
  text-decoration: none;
  line-height: 1;
}

.viking-breadcrumbs-list a:hover {
  text-decoration: underline;
}

.viking-select-demo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--viking-space-0-5);
  width: 100%;
  max-width: 16rem;
}

.viking-select-trigger-static {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--viking-space-1);
  width: 100%;
  min-height: var(--viking-control-height, 46px);
  padding: 0 var(--viking-space-2);
  font-family: inherit;
  font-size: var(--viking-font-size);
  color: var(--viking-text);
  text-align: left;
  background: var(--viking-surface);
  border: 1px solid var(--viking-border-strong);
  border-radius: var(--viking-radius);
  box-shadow: var(--viking-shadow-sm);
  cursor: default;
  box-sizing: border-box;
}

.viking-select-panel-static {
  margin: 0;
  padding: var(--viking-space-0-5);
  list-style: none;
  border: 1px solid var(--viking-border);
  border-radius: var(--viking-radius);
  background: var(--viking-select-panel-bg, var(--viking-surface-raised, var(--viking-surface)));
  box-shadow: var(--viking-shadow-md);
}

.viking-select-panel-static li {
  display: flex;
  align-items: center;
  min-height: var(--viking-control-height-sm, 36px);
  padding: 0 var(--viking-space-2);
  border-radius: var(--viking-radius-sm);
  color: var(--viking-text-muted);
  font-size: var(--viking-font-size-sm);
  line-height: 1.2;
}

.viking-select-panel-static li[aria-selected=true],
.viking-select-panel-static li.is-selected {
  color: var(--viking-text);
  background: var(--viking-accent-soft);
  font-weight: var(--viking-font-weight-semibold, 600);
}

.viking-pagination-static {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--viking-space-2);
}

.viking-switch-static {
  display: inline-flex;
  align-items: center;
  gap: var(--viking-space-1);
  cursor: pointer;
  font-size: var(--viking-font-size-sm);
  min-height: var(--viking-touch-target-min, 44px);
}

.viking-switch-static input {
  width: 2.5rem;
  height: 1.375rem;
  accent-color: var(--viking-accent);
}

.viking-kanban-demo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--viking-space-2);
}

.viking-kanban-col {
  flex: 1;
  min-width: 10rem;
  padding: var(--viking-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--viking-space-1);
}

.viking-kanban-card {
  padding: var(--viking-space-1) var(--viking-space-2);
  border: 1px solid var(--viking-border);
  border-radius: var(--viking-radius-sm);
  background: var(--viking-surface-alt);
  font-size: var(--viking-font-size-sm);
}

.viking-uptime-demo {
  display: flex;
  flex-direction: column;
  gap: var(--viking-space-2);
  width: 100%;
  min-width: 0;
}

.viking-uptime-segments {
  display: flex;
  gap: calc(var(--viking-space-0-5) / 2);
  width: 100%;
  min-width: 0;
  height: var(--viking-space-3);
  padding: var(--viking-space-0-5);
  border-radius: var(--viking-radius-full);
  background: var(--viking-surface-inset);
  box-sizing: border-box;
}

.viking-uptime-seg {
  flex: 1 1 0;
  min-width: 3px;
  border-radius: var(--viking-radius-pill);
}

.viking-uptime-up {
  background: var(--viking-success);
}

.viking-uptime-degraded {
  background: var(--viking-warning);
}

.viking-uptime-down {
  background: var(--viking-danger);
}

.viking-sheet-demo {
  max-width: 20rem;
  padding: var(--viking-space-2);
}

.viking-wizard-demo {
  max-width: 24rem;
  padding: var(--viking-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--viking-space-2);
}

@media (prefers-reduced-motion: reduce) {
  .viking-skeleton,
  .viking-progress-indeterminate .viking-progress-bar {
    animation: none;
  }
}
.viking-hud-panel {
  display: flex;
  flex-direction: column;
  gap: var(--viking-space-4);
  padding: var(--viking-space-5);
  border: 1px solid var(--viking-border);
  border-radius: var(--viking-radius-xl);
  background: var(--viking-surface-recipe, var(--viking-surface));
  box-shadow: var(--viking-shadow-sm);
}

.viking-avatar-static {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--viking-border);
  background: var(--viking-surface-alt);
  font-size: var(--viking-font-size-xs);
  font-weight: var(--viking-font-weight-bold);
  color: var(--viking-text);
}

.viking-avatar-accent {
  background: var(--viking-accent-soft);
  border-color: var(--viking-accent);
  color: var(--viking-accent);
}

.viking-empty-state-static {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--viking-space-2);
  padding: var(--viking-space-4);
  text-align: center;
  border: 1px dashed var(--viking-border);
  border-radius: var(--viking-card-radius, var(--viking-radius-xl));
  max-width: 24rem;
}

.viking-spinner-static {
  display: inline-block;
  box-sizing: border-box;
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  flex: 0 0 1.25rem;
  aspect-ratio: 1/1;
  border: 2px solid var(--viking-border);
  border-top-color: var(--viking-accent);
  border-radius: 50%;
  /* Spin in place about the element center (not an orbital path). */
  transform-origin: 50% 50%;
  animation: viking-spinner-spin 0.8s linear infinite;
  vertical-align: middle;
}

@keyframes viking-spinner-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.viking-loading-overlay-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--viking-space-2);
  padding: var(--viking-space-3);
  max-width: 20rem;
}

.viking-separator-static {
  border: 0;
  border-top: 1px solid var(--viking-border);
  margin: var(--viking-space-1) 0;
}

.viking-icon-badge-static {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--viking-icon-badge-size, var(--viking-space-6));
  height: var(--viking-icon-badge-size, var(--viking-space-6));
  padding: var(--viking-icon-badge-padding, var(--viking-space-0-5));
  box-sizing: border-box;
  border-radius: var(--viking-radius-lg);
  border: none;
  background: var(--viking-accent-soft);
  color: var(--viking-accent-strong);
  box-shadow: var(--viking-shadow-sm);
  font-size: var(--viking-font-size-sm);
  line-height: 1;
  align-self: center;
}

/* Card header: icon badge + title share one cross-axis */
.viking-card-header {
  display: flex;
  align-items: center;
  gap: var(--viking-space-2);
  min-width: 0;
}

.viking-card-header > .viking-icon-badge-static,
.viking-card-header > .viking-heading,
.viking-card-header > .viking-heading-xl,
.viking-card-header > strong.viking-heading {
  margin: 0;
  align-self: center;
}

.viking-card-header > .viking-heading,
.viking-card-header > .viking-heading-xl,
.viking-card-header > strong.viking-heading {
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
}

.viking-textarea-static {
  width: 100%;
  min-height: 5rem;
  padding: var(--viking-space-2);
  border: 1px solid var(--viking-border);
  border-radius: var(--viking-radius);
  background: var(--viking-surface);
  color: var(--viking-text);
  font-family: inherit;
  font-size: var(--viking-font-size-sm);
  resize: vertical;
}

.viking-textarea-static:focus-visible {
  outline: var(--viking-ring-width) solid var(--viking-ring);
  outline-offset: var(--viking-ring-offset);
}

.viking-radio-static {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--viking-space-1);
}

.viking-radio-static label {
  display: inline-flex;
  align-items: center;
  gap: var(--viking-space-1);
  font-size: var(--viking-font-size-sm);
  min-height: var(--viking-touch-target-min, 44px);
}

.viking-slider-static {
  width: 100%;
  accent-color: var(--viking-accent);
}

.viking-otp-static {
  display: flex;
  justify-content: center;
  width: 100%;
}

.viking-otp-input-static {
  width: min(100%, var(--viking-content-readable-max-width));
  min-width: 0;
  min-height: var(--viking-control-height);
  padding: 0 var(--viking-control-padding-x);
  box-sizing: border-box;
  text-align: center;
  border: 1px solid var(--viking-border-strong);
  border-radius: var(--viking-radius-md);
  background: var(--viking-surface-recipe-muted);
  color: var(--viking-text);
  font-size: var(--viking-font-size-lg);
  font-weight: var(--viking-font-weight-semibold);
  letter-spacing: var(--viking-letter-spacing-caps);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--viking-shadow-xs);
}

.viking-file-upload-static {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--viking-space-2);
  text-align: center;
}

.viking-pillbox-static {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--viking-space-1);
  padding: var(--viking-space-1);
  border: 1px solid var(--viking-border);
  border-radius: var(--viking-radius);
  background: var(--viking-surface-alt);
}

.viking-gauge-demo,
.viking-ring-gauge-demo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--viking-space-1);
}

.viking-gauge-demo svg {
  display: block;
  overflow: visible;
}

.viking-gauge-demo .viking-metric {
  font-variant-numeric: tabular-nums;
  font-weight: var(--viking-font-weight-extrabold, 800);
  letter-spacing: var(--viking-letter-spacing-tight);
}

.viking-chart-empty-static {
  text-align: center;
}

.viking-status-metric-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--viking-space-2);
  width: 100%;
  min-width: 0;
  padding: var(--viking-space-2);
  border: 1px solid var(--viking-border);
  border-radius: var(--viking-radius);
  background: var(--viking-surface-alt);
  box-sizing: border-box;
}

.viking-bar-static {
  display: flex;
  flex-direction: column;
  gap: var(--viking-space-0-5);
  max-width: 16rem;
}

.viking-bar-track {
  width: 100%;
  height: var(--viking-space-1);
  border-radius: var(--viking-radius-pill);
  background: var(--viking-surface-alt);
  overflow: hidden;
}

.viking-bar-fill {
  height: 100%;
  width: var(--viking-progress-value, 0%);
  background: var(--viking-accent);
  border-radius: inherit;
}

.viking-nav-menu-static,
.viking-sidebar-nav-static {
  display: flex;
  flex-direction: column;
  gap: var(--viking-space-0-5);
  max-width: 14rem;
}

.viking-nav-item-static,
.viking-sidebar-nav-item {
  display: block;
  padding: var(--viking-space-1) var(--viking-space-2);
  border-radius: var(--viking-radius-sm);
  color: var(--viking-text-muted);
  text-decoration: none;
  font-size: var(--viking-font-size-sm);
}

.viking-nav-item-static.is-active,
.viking-sidebar-nav-item.is-active {
  background: var(--viking-accent-soft);
  color: var(--viking-accent);
  font-weight: var(--viking-font-weight-semibold);
}

.viking-menubar-static {
  display: inline-flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  gap: var(--viking-space-0-5);
  padding: var(--viking-space-0-5);
  border: 1px solid var(--viking-border);
  border-radius: var(--viking-radius);
  background: var(--viking-surface-alt);
}

.viking-command-static {
  display: flex;
  flex-direction: column;
  gap: var(--viking-space-1);
}

.viking-accordion-static {
  padding: var(--viking-space-2);
  border: 1px solid var(--viking-border);
  border-radius: var(--viking-radius);
  background: var(--viking-surface-alt);
}

.viking-accordion-static summary {
  cursor: pointer;
  list-style: none;
}

.viking-accordion-static summary::-webkit-details-marker {
  display: none;
}

.viking-timeline-static {
  margin: 0;
  padding: 0 0 0 var(--viking-space-3);
  border-left: 2px solid var(--viking-border);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--viking-space-2);
}

.viking-carousel-static {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--viking-space-2);
  width: min(100%, 28rem);
  margin-inline: auto;
  text-align: center;
}

.viking-carousel-static > * {
  margin-block: 0;
}

.viking-carousel-static .viking-demo-row {
  justify-content: center;
}

.viking-toggle-group-static {
  display: inline-flex;
  gap: var(--viking-space-0-5);
  padding: var(--viking-space-0-5);
  border: 1px solid var(--viking-border);
  border-radius: var(--viking-radius);
  background: var(--viking-surface-alt);
}

.viking-fab-static {
  position: absolute;
  right: var(--viking-space-2);
  bottom: var(--viking-space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--viking-border-strong);
  border-radius: 50%;
  background: var(--viking-accent);
  color: var(--viking-accent-content);
  font-size: var(--viking-font-size-xl);
  cursor: pointer;
  box-shadow: var(--viking-shadow-md);
}

.viking-scroll-area-static {
  max-height: 8rem;
  overflow-y: auto;
  padding: var(--viking-space-2);
  border: 1px solid var(--viking-border);
  border-radius: var(--viking-radius);
  background: var(--viking-surface-alt);
}

.viking-button-group-static {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--viking-space-0-5);
}

.viking-icon-color-accent {
  color: var(--viking-accent);
}

.viking-icon-color-muted {
  color: var(--viking-text-muted);
}

.viking-whitepaper-cta-static {
  display: flex;
  flex-direction: column;
  gap: var(--viking-space-2);
  max-width: 24rem;
}

.viking-search-result-static {
  display: flex;
  align-items: center;
  gap: var(--viking-space-0-5);
  width: 100%;
  padding: var(--viking-space-1) var(--viking-space-2);
  border-radius: var(--viking-radius);
  border: 1px solid transparent;
  background: transparent;
  cursor: default;
  text-decoration: none;
  text-align: left;
  color: inherit;
  transition: var(--viking-transition-interactive);
}

.viking-search-result-static:hover {
  background: color-mix(in srgb, var(--viking-accent) 5%, transparent);
  border-color: color-mix(in srgb, var(--viking-accent) 30%, transparent);
}

.viking-search-result-title {
  font-size: var(--viking-font-size-sm);
  font-weight: var(--viking-font-weight-semibold);
  color: var(--viking-text);
}

.viking-search-result-snippet {
  font-size: var(--viking-font-size-xs);
  color: var(--viking-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .viking-spinner-static {
    animation: none;
  }
}
.viking-stack {
  display: flex;
  flex-direction: column;
  gap: var(--viking-stack-gap, var(--viking-space-6));
  align-items: var(--viking-stack-align, stretch);
}

.viking-stack--tight {
  --viking-stack-gap: var(--viking-space-2);
}

.viking-stack--compact {
  --viking-stack-gap: var(--viking-space-3);
}

.viking-stack--loose {
  --viking-stack-gap: var(--viking-space-8);
}

.viking-stack--center {
  --viking-stack-align: center;
}

.viking-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--viking-cluster-gap, var(--viking-space-2));
  align-items: var(--viking-cluster-align, center);
  justify-content: var(--viking-cluster-justify, flex-start);
}

.viking-cluster--between {
  --viking-cluster-justify: space-between;
}

.viking-cluster--end {
  --viking-cluster-justify: flex-end;
}

.viking-cluster--tight {
  --viking-cluster-gap: var(--viking-space-0-5);
}

.viking-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--viking-inline-gap, var(--viking-space-0-5));
}

.viking-inline--wide {
  --viking-inline-gap: var(--viking-space-1);
}

.viking-grid {
  display: grid;
  gap: var(--viking-grid-gap, var(--viking-layout-column-gap));
  width: 100%;
  align-items: stretch;
}

/* Equal-height content is opt-in so content-led grids retain natural rows. */
.viking-grid--equal-rows,
.viking-main-grid--equal-rows {
  grid-auto-rows: 1fr;
}

.viking-grid > *,
.viking-main-grid > * {
  min-width: 0;
}

.viking-grid--equal-rows > :where(viking-card,
.viking-card,
viking-metric-card,
.viking-metric-card,
viking-chart-panel,
.viking-chart-panel,
.viking-panel-card,
.viking-hud-panel),
.viking-main-grid--equal-rows > :where(viking-card,
.viking-card,
viking-metric-card,
.viking-metric-card,
viking-chart-panel,
.viking-chart-panel,
.viking-panel-card,
.viking-hud-panel) {
  align-self: stretch;
  height: 100%;
}

/* Keep structured card actions aligned even when body copy lengths differ. */
.viking-grid--equal-rows > :where(viking-card, .viking-card, viking-metric-card, .viking-metric-card) > :where(.viking-card-footer, viking-card-footer) {
  margin-block-start: auto;
}

/* Angular grids compose through viking-grid-item hosts. Stretch both the host
   and its surface child so equal-row cards stay equal through that wrapper. */
.viking-grid--equal-rows > :where(viking-grid-item, .viking-grid-item) {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.viking-grid--equal-rows > :where(viking-grid-item, .viking-grid-item) > :where(viking-card,
.viking-card,
viking-metric-card,
.viking-metric-card,
viking-chart-panel,
.viking-chart-panel,
.viking-panel-card,
.viking-hud-panel) {
  align-self: stretch;
  height: 100%;
}

.viking-grid--tight {
  --viking-grid-gap: var(--viking-space-2);
}

.viking-grid--loose {
  --viking-grid-gap: var(--viking-space-8);
}

/* Mobile-first grid foundation: always start single column */
.viking-grid.viking-grid--1,
.viking-grid.viking-grid--2,
.viking-grid.viking-grid--3,
.viking-grid.viking-grid--4,
.viking-grid.viking-grid--6 {
  grid-template-columns: 1fr;
}

.viking-grid.viking-grid--12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.viking-grid-item {
  display: block;
  min-width: 0;
  grid-column: 1/-1;
}

.viking-grid-item--span-1 {
  grid-column: span 1;
}

.viking-grid-item--span-2 {
  grid-column: span 2;
}

.viking-grid-item--span-3 {
  grid-column: span 3;
}

.viking-grid-item--span-4 {
  grid-column: span 4;
}

.viking-grid-item--span-5 {
  grid-column: span 5;
}

.viking-grid-item--span-6 {
  grid-column: span 6;
}

.viking-grid-item--span-7 {
  grid-column: span 7;
}

.viking-grid-item--span-8 {
  grid-column: span 8;
}

.viking-grid-item--span-9 {
  grid-column: span 9;
}

.viking-grid-item--span-10 {
  grid-column: span 10;
}

.viking-grid-item--span-11 {
  grid-column: span 11;
}

.viking-grid-item--span-12 {
  grid-column: span 12;
}

.viking-grid--12 > :not(viking-grid-item):not(.viking-grid-item) {
  grid-column: 1/-1;
}

/* Intrinsic grid: cards add or remove columns based on actual available width. */
.viking-grid--auto {
  --viking-grid-item-min: var(--viking-layout-item-default);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--viking-grid-item-min)), 1fr));
}

.viking-grid--item-compact {
  --viking-grid-item-min: var(--viking-layout-item-compact);
}

.viking-grid--item-wide {
  --viking-grid-item-min: var(--viking-layout-item-wide);
}

/* Balanced content columns for dashboard cards, forms, and marketing bands. */
.viking-column-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--viking-layout-column-gap);
  row-gap: var(--viking-layout-row-gap);
  width: 100%;
  min-width: 0;
  align-items: stretch;
}

.viking-column-layout:is(.viking-column-layout--1,
.viking-column-layout--2,
.viking-column-layout--3,
.viking-column-layout--4,
.viking-column-layout--auto) {
  display: grid;
  column-gap: var(--viking-layout-column-gap);
  row-gap: var(--viking-layout-row-gap);
}

.viking-column-layout > * {
  min-width: 0;
}

.viking-column-layout--equal-rows {
  grid-auto-rows: 1fr;
}

.viking-column-layout--equal-rows > * {
  height: 100%;
}

/* Form fields align from the top so optional helper and error copy never
   pushes neighboring controls onto mismatched baselines. */
.viking-form-grid {
  align-items: start;
}

.viking-form-grid > * {
  align-self: start;
  width: 100%;
}

.viking-column-layout--tight {
  column-gap: var(--viking-space-control-gap);
  row-gap: var(--viking-space-control-gap);
}

.viking-column-layout--loose {
  column-gap: var(--viking-space-section-gap);
  row-gap: var(--viking-space-section-gap);
}

.viking-column-layout.viking-column-layout--auto {
  --viking-column-layout-item-min: var(--viking-layout-item-default);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--viking-column-layout-item-min)), 1fr));
}

.viking-column-layout--item-compact {
  --viking-column-layout-item-min: var(--viking-layout-item-compact);
}

.viking-column-layout--item-wide {
  --viking-column-layout-item-min: var(--viking-layout-item-wide);
}

/* Intrinsic switcher: a flexible row that becomes a readable stack naturally. */
.viking-switcher {
  --viking-switcher-gap: var(--viking-space-6);
  --viking-switcher-item-min: var(--viking-layout-item-default);
  display: flex;
  flex-wrap: wrap;
  gap: var(--viking-switcher-gap);
  align-items: stretch;
  width: 100%;
}

.viking-switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--viking-switcher-item-min) - 100%) * 999);
  min-width: 0;
}

.viking-switcher--compact {
  --viking-switcher-item-min: var(--viking-layout-item-compact);
}

.viking-switcher--wide {
  --viking-switcher-item-min: var(--viking-layout-item-wide);
}

.viking-switcher--tight {
  --viking-switcher-gap: var(--viking-space-2);
}

.viking-switcher--loose {
  --viking-switcher-gap: var(--viking-space-8);
}

/* Tablet and up: predictable scaling */
@media (min-width: 768px) {
  .viking-grid.viking-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .viking-grid.viking-grid--3,
  .viking-grid.viking-grid--4,
  .viking-grid.viking-grid--6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .viking-grid.viking-grid--12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .viking-grid-item--span-md-1 {
    grid-column: span 1;
  }
  .viking-grid-item--span-md-2 {
    grid-column: span 2;
  }
  .viking-grid-item--span-md-3 {
    grid-column: span 3;
  }
  .viking-grid-item--span-md-4 {
    grid-column: span 4;
  }
  .viking-grid-item--span-md-5 {
    grid-column: span 5;
  }
  .viking-grid-item--span-md-6 {
    grid-column: span 6;
  }
  .viking-grid-item--span-md-7 {
    grid-column: span 7;
  }
  .viking-grid-item--span-md-8 {
    grid-column: span 8;
  }
  .viking-grid-item--span-md-9 {
    grid-column: span 9;
  }
  .viking-grid-item--span-md-10 {
    grid-column: span 10;
  }
  .viking-grid-item--span-md-11 {
    grid-column: span 11;
  }
  .viking-grid-item--span-md-12 {
    grid-column: span 12;
  }
  .viking-column-layout.viking-column-layout--2,
  .viking-column-layout.viking-column-layout--3,
  .viking-column-layout.viking-column-layout--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .viking-grid.viking-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .viking-grid.viking-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .viking-grid.viking-grid--6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .viking-grid-item--span-lg-1 {
    grid-column: span 1;
  }
  .viking-grid-item--span-lg-2 {
    grid-column: span 2;
  }
  .viking-grid-item--span-lg-3 {
    grid-column: span 3;
  }
  .viking-grid-item--span-lg-4 {
    grid-column: span 4;
  }
  .viking-grid-item--span-lg-5 {
    grid-column: span 5;
  }
  .viking-grid-item--span-lg-6 {
    grid-column: span 6;
  }
  .viking-grid-item--span-lg-7 {
    grid-column: span 7;
  }
  .viking-grid-item--span-lg-8 {
    grid-column: span 8;
  }
  .viking-grid-item--span-lg-9 {
    grid-column: span 9;
  }
  .viking-grid-item--span-lg-10 {
    grid-column: span 10;
  }
  .viking-grid-item--span-lg-11 {
    grid-column: span 11;
  }
  .viking-grid-item--span-lg-12 {
    grid-column: span 12;
  }
  .viking-column-layout.viking-column-layout--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .viking-column-layout.viking-column-layout--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Explicit full-width single column utility for dense content */
.viking-grid--1 {
  grid-template-columns: 1fr;
}

.viking-divider {
  border: 0;
  border-top: 1px solid var(--viking-border-subtle);
  margin: var(--viking-space-4) 0;
}

.viking-divider--strong {
  border-top-color: var(--viking-border);
}

/* Strong mobile-first main content grid for pages/sections */
.viking-main-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--viking-grid-gap, var(--viking-space-4));
  width: 100%;
  align-items: stretch;
}

@media (min-width: 768px) {
  .viking-main-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .viking-main-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.viking-surface-panel,
.glass-panel {
  background: var(--viking-surface-recipe, var(--viking-surface));
  border: 1px solid color-mix(in srgb, var(--viking-border-strong) 78%, var(--viking-border));
  border-radius: var(--viking-card-radius, var(--viking-radius-xl));
  box-shadow: var(--viking-shadow-md);
  position: relative;
  overflow: hidden;
}
.viking-surface-panel::before,
.glass-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--viking-metallic-200) var(--viking-surface-hairline-strength, 36%), transparent), transparent);
  pointer-events: none;
}

.viking-status-dot {
  display: inline-block;
  width: var(--viking-space-1);
  height: var(--viking-space-1);
  border-radius: var(--viking-radius-pill);
  background: currentColor;
  flex-shrink: 0;
}

.viking-status-dot--pulse,
.telemetry-pulse {
  position: relative;
}

.viking-status-dot--pulse::after,
.telemetry-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0.35;
  animation: viking-pulse-soft 2s var(--viking-ease-default) infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .viking-status-dot--pulse::after,
  .telemetry-pulse::after {
    animation: none;
    opacity: 0.45;
  }
}
.viking-page-shell,
.page-inner-wrapper,
.viking-page-container {
  width: 100%;
  max-width: var(--viking-container-max-width, var(--container-max-width, 1260px));
  margin-inline: auto;
  padding-inline: var(--viking-page-gutter, var(--viking-space-2));
  padding-block: var(--viking-space-6, var(--viking-space-6)) var(--viking-space-8, var(--viking-space-8));
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--viking-page-stack-gap, var(--viking-space-6));
}

.viking-page-shell > *,
.page-inner-wrapper > *,
.viking-page-container > * {
  min-width: 0;
}

.dashboard-page-container .page-inner-wrapper,
.dashboard-page-container .viking-page-container,
.viking-app-page .page-inner-wrapper,
.viking-dashboard-page .page-inner-wrapper {
  max-width: var(--viking-container-max-width-wide, 1440px);
  padding-block: var(--viking-space-3) var(--viking-space-5);
  padding-inline: var(--viking-page-gutter);
}
@media (min-width: 600px) {
  .dashboard-page-container .page-inner-wrapper,
  .dashboard-page-container .viking-page-container,
  .viking-app-page .page-inner-wrapper,
  .viking-dashboard-page .page-inner-wrapper {
    padding-block: var(--viking-space-4) var(--viking-space-6);
    padding-inline: var(--viking-page-gutter-lg);
  }
}
@media (min-width: 1440px) {
  .dashboard-page-container .page-inner-wrapper,
  .dashboard-page-container .viking-page-container,
  .viking-app-page .page-inner-wrapper,
  .viking-dashboard-page .page-inner-wrapper {
    padding-inline: var(--viking-page-gutter-xl);
  }
}

.dashboard-page-container > .dashboard-content-area > .page-inner-wrapper {
  width: 100%;
  max-width: var(--viking-container-max-width, 1260px);
  margin-inline: auto;
  box-sizing: border-box;
}

@media (min-width: 1440px) {
  .viking-page-shell,
  .page-inner-wrapper,
  .viking-page-container,
  .viking-section-inner {
    padding-inline: var(--viking-page-gutter-xl, var(--viking-space-7));
  }
}
.viking-section {
  display: block;
  width: 100%;
  padding-block: var(--viking-section-padding-y, var(--viking-space-10)); /* More generous premium rhythm to match component showcase */
}

.viking-content-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--viking-page-section-gap, var(--viking-space-6, var(--space-6, var(--viking-space-6))));
  width: 100%;
}

.viking-content-stack--tight {
  gap: var(--viking-page-stack-gap, var(--viking-space-4, var(--space-4, var(--viking-space-4))));
}

.viking-section--compact {
  padding-block: var(--viking-section-padding-y-compact, var(--viking-space-4, var(--space-4, var(--viking-space-4))));
}

.viking-section--hero {
  padding-block: var(--viking-space-8, var(--space-8, var(--viking-space-8))) var(--viking-space-6, var(--space-6, var(--viking-space-6)));
}
@media (min-width: 768px) {
  .viking-section--hero {
    padding-block: var(--viking-space-10) var(--viking-space-8, var(--viking-space-8));
  }
}

.viking-section-inner {
  width: 100%;
  max-width: var(--viking-container-max-width, var(--container-max-width, 1260px));
  margin-inline: auto;
  padding-inline: var(--viking-page-gutter, var(--viking-space-4, var(--viking-space-4)));
  box-sizing: border-box;
}

.viking-section-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--viking-space-3);
  margin-bottom: var(--viking-page-section-gap, var(--viking-space-8));
  max-width: 48rem;
}

.viking-section-title {
  margin: 0 0 var(--viking-space-3) 0;
  font-family: var(--viking-font-family);
  font-size: var(--viking-font-size-xl);
  font-weight: var(--viking-font-weight-bold);
  letter-spacing: var(--viking-letter-spacing-tight);
  color: var(--viking-text);
}

.viking-section-lead {
  margin: 0 0 var(--viking-space-4) 0;
  font-family: var(--viking-font-family);
  font-size: var(--viking-font-size);
  line-height: var(--viking-line-height-relaxed);
  color: var(--viking-text-muted);
}

/* CTAs: stack on mobile, horizontal row from tablet up */
.viking-cta-row {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--viking-space-2);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (min-width: 600px) {
  .viking-cta-row {
    flex-direction: row;
    align-items: center;
    gap: var(--viking-space-3);
    width: auto;
    max-width: 100%;
  }
}

.viking-cta-row .viking-btn,
.viking-cta-row a.viking-btn,
.viking-cta-row a.cta-button {
  display: inline-flex;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--viking-touch-target-min, var(--viking-control-height));
}
@media (min-width: 600px) {
  .viking-cta-row .viking-btn,
  .viking-cta-row a.viking-btn,
  .viking-cta-row a.cta-button {
    width: auto;
    min-width: var(--viking-btn-min-width, var(--btn-min-width, 120px));
    min-height: var(--viking-control-height);
    flex: 0 1 auto;
  }
}

.viking-app-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100%;
  width: 100%;
}

.viking-app-layout__main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: calc(100vh - var(--viking-navbar-height));
}

.viking-app-layout__sidebar,
.viking-app-layout__tools {
  position: fixed;
  inset-block: var(--viking-navbar-height) 0;
  z-index: var(--viking-z-overlay);
  display: block;
  width: min(var(--viking-sidebar-width), 100vw - var(--viking-space-8));
  overflow-y: auto;
  background: var(--viking-surface);
  box-shadow: var(--viking-shadow-lg);
  transition: transform var(--viking-duration) var(--viking-ease-emphasized);
}

.viking-app-layout__sidebar {
  inset-inline-start: 0;
  border-right: 1px solid var(--viking-border-container);
  transform: translateX(-100%);
}

.viking-app-layout__sidebar--open {
  transform: translateX(0);
}

.viking-app-layout__tools {
  inset-inline-end: 0;
  width: min(var(--viking-trailing-width), 100vw - var(--viking-space-8));
  border-left: 1px solid var(--viking-border-container);
  transform: translateX(100%);
}

.viking-app-layout__tools--open {
  transform: translateX(0);
}

.viking-app-layout__header,
.viking-app-layout__content,
.viking-app-layout__footer {
  padding-inline: var(--viking-page-gutter);
}

.viking-app-layout__notifications:empty,
.viking-app-layout__breadcrumbs:empty {
  display: none;
}

.viking-app-layout__notifications,
.viking-app-layout__breadcrumbs {
  min-width: 0;
}

.viking-app-layout__drawer {
  position: fixed;
  inset-block: var(--viking-navbar-height) 0;
  inset-inline-end: 0;
  z-index: calc(var(--viking-z-overlay) + 1);
  display: flex;
  flex-direction: column;
  width: min(var(--viking-trailing-width), 100vw - var(--viking-space-8));
  color: var(--viking-text);
  background: var(--viking-surface-container);
  border-left: 1px solid var(--viking-border-container);
  box-shadow: var(--viking-shadow-lg);
}

.viking-app-layout__drawer-header,
.viking-app-layout__split-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--viking-space-control-gap);
  min-height: var(--viking-touch-target-min);
  padding: var(--viking-space-control-gap) var(--viking-space-content-gap);
  color: var(--viking-text-heading);
  font: var(--viking-type-label);
  border-bottom: 1px solid var(--viking-border-divider);
}

.viking-app-layout__drawer-body,
.viking-app-layout__split-panel-body {
  min-width: 0;
  padding: var(--viking-space-content-gap);
  overflow: auto;
}

.viking-app-layout__drawer-body {
  flex: 1 1 auto;
}

.viking-app-layout__split-panel {
  display: none;
  min-width: 0;
  color: var(--viking-text);
  background: var(--viking-surface-container);
  border-top: 1px solid var(--viking-border-container);
  box-shadow: var(--viking-shadow-lg);
}

.viking-app-layout__split-panel--open {
  display: flex;
  flex-direction: column;
}

.viking-app-layout--split-panel-compact .viking-app-layout__split-panel {
  height: var(--viking-split-panel-height-compact);
}

.viking-app-layout--split-panel-default .viking-app-layout__split-panel {
  height: var(--viking-split-panel-height-default);
}

.viking-app-layout--split-panel-large .viking-app-layout__split-panel {
  height: var(--viking-split-panel-height-large);
}

.viking-app-layout__header {
  display: flex;
  align-items: center;
  gap: var(--viking-space-2);
  padding-block: var(--viking-space-3);
  border-bottom: 1px solid var(--viking-border-divider);
}

.viking-app-layout__header-content {
  flex: 1 1 auto;
  min-width: 0;
}

.viking-app-layout__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--viking-touch-target-min);
  height: var(--viking-touch-target-min);
  padding: 0;
  color: var(--viking-text);
  background: var(--viking-surface-alt);
  border: 1px solid var(--viking-border);
  border-radius: var(--viking-radius);
  cursor: pointer;
  transition: var(--viking-transition-colors);
}

.viking-app-layout__toggle:hover {
  color: var(--viking-accent-strong);
  border-color: var(--viking-accent-strong);
}

.viking-app-layout__toggle:focus-visible {
  outline: var(--viking-ring-width) solid var(--viking-ring);
  outline-offset: var(--viking-ring-offset);
}

.viking-app-layout__content {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--viking-page-stack-gap);
  padding-block: var(--viking-space-2);
}

.viking-app-layout__footer {
  padding-block: var(--viking-space-3);
  border-top: 1px solid var(--viking-border-divider);
}

.viking-app-layout--compact .viking-app-layout__content {
  --viking-page-stack-gap: var(--viking-space-3);
}

.viking-app-layout--loose .viking-app-layout__content {
  --viking-page-stack-gap: var(--viking-space-8);
}

.viking-app-layout__scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--viking-z-overlay) - 1);
  padding: 0;
  background: var(--viking-overlay-backdrop);
  border: 0;
}

.viking-page-template {
  display: block;
  width: 100%;
}

.viking-page-template__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--viking-page-stack-gap);
  width: min(100%, var(--viking-container-max-width));
  margin-inline: auto;
  padding-inline: var(--viking-page-gutter);
  box-sizing: border-box;
}

.viking-page-template__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: flex-start;
  gap: var(--viking-space-content-gap);
  padding-block-end: var(--viking-space-3);
  border-bottom: 1px solid var(--viking-border-divider);
}

.viking-page-template__heading {
  flex: 1 1 var(--viking-layout-item-default);
  min-width: 0;
}

.viking-page-template__actions {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: var(--viking-space-2);
  align-items: center;
  justify-content: flex-end;
}

.viking-page-template__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--viking-space-container-gap);
  min-width: 0;
}

.viking-page-template__footer {
  padding-block-start: var(--viking-space-3);
  border-top: 1px solid var(--viking-border-divider);
}

.viking-page-template--narrow .viking-page-template__inner {
  width: min(100%, var(--viking-content-readable-max-width));
}

.viking-page-template--wide .viking-page-template__inner {
  width: min(100%, var(--viking-container-wide-max-width));
}

.viking-page-template--full .viking-page-template__inner {
  width: 100%;
  max-width: none;
}

.viking-page-template--compact .viking-page-template__inner {
  gap: var(--viking-space-4);
}

.viking-page-template--compact .viking-page-template__content {
  gap: var(--viking-space-4);
}

.viking-page-template--loose .viking-page-template__inner {
  gap: var(--viking-space-8);
}

.viking-page-template--loose .viking-page-template__content {
  gap: var(--viking-space-8);
}

.viking-content-layout {
  display: block;
  width: 100%;
  min-width: 0;
}

.viking-content-layout__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--viking-space-section-gap);
  width: min(100%, var(--viking-container-max-width));
  margin-inline: auto;
  padding-inline: var(--viking-page-gutter);
  box-sizing: border-box;
}

.viking-content-layout__breadcrumbs:empty,
.viking-content-layout__notifications:empty,
.viking-content-layout__actions:empty,
.viking-content-layout__footer:empty {
  display: none;
}

.viking-content-layout__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--viking-space-content-gap);
  padding-block-end: var(--viking-space-content-gap);
  border-bottom: 1px solid var(--viking-border-divider);
}

.viking-content-layout__header:not(:has(.viking-content-layout__heading > *)) {
  display: none;
}

.viking-content-layout__heading {
  flex: 1 1 var(--viking-layout-item-default);
  min-width: 0;
}

.viking-content-layout__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--viking-space-control-gap);
}

.viking-content-layout__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--viking-space-section-gap);
  min-width: 0;
}

.viking-content-layout--readable .viking-content-layout__inner,
.viking-content-layout--documentation .viking-content-layout__inner,
.viking-content-layout--form .viking-content-layout__inner {
  width: min(100%, var(--viking-content-readable-max-width));
}

.viking-content-layout--wide .viking-content-layout__inner,
.viking-content-layout--dashboard .viking-content-layout__inner {
  width: min(100%, var(--viking-container-wide-max-width));
}

.viking-content-layout--full .viking-content-layout__inner,
.viking-content-layout--collection .viking-content-layout__inner {
  width: 100%;
  max-width: none;
}

.viking-content-layout--compact .viking-content-layout__inner,
.viking-content-layout--compact .viking-content-layout__body {
  gap: var(--viking-space-container-gap);
}

.viking-content-layout--loose .viking-content-layout__inner,
.viking-content-layout--loose .viking-content-layout__body {
  gap: var(--viking-space-page-gap);
}

.viking-content-layout--header-high-contrast .viking-content-layout__header {
  padding: var(--viking-space-container-gap);
  color: var(--viking-text-on-header);
  background: var(--viking-surface-header);
  border-color: var(--viking-border-accent);
  border-radius: var(--viking-card-radius);
}

.viking-box {
  min-width: 0;
  box-sizing: border-box;
}

.viking-box--surface,
.viking-box--muted,
.viking-box--inset {
  border: 1px solid var(--viking-border-container);
  border-radius: var(--viking-radius-lg);
}

.viking-box--surface {
  background: var(--viking-surface-container);
}

.viking-box--muted {
  background: var(--viking-surface-muted);
}

.viking-box--inset {
  background: var(--viking-surface-control);
  border-color: var(--viking-border-divider);
  box-shadow: var(--viking-shadow-inner);
}

.viking-box--padding-compact {
  padding: var(--viking-space-control-gap);
}

.viking-box--padding-default {
  padding: var(--viking-space-content-gap);
}

.viking-box--padding-loose {
  padding: var(--viking-space-container-gap);
}

.viking-box--stack {
  display: flex;
  flex-direction: column;
  gap: var(--viking-space-content-gap);
}

.viking-box--cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--viking-space-control-gap);
}

.viking-box--align-center {
  text-align: center;
}

.viking-box--align-end {
  text-align: end;
}

.viking-section-template {
  display: block;
  min-width: 0;
  padding: var(--viking-panel-padding);
  background: var(--viking-surface-recipe);
  border: var(--viking-border-width) var(--viking-border-style) var(--viking-border-container);
  border-radius: var(--viking-card-radius);
  box-shadow: var(--viking-shadow-xs), var(--viking-surface-highlight);
}

.viking-section__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: flex-start;
  gap: var(--viking-space-content-gap);
  margin-block-end: var(--viking-space-content-gap);
}
@media (min-width: 768px) {
  .viking-section__header {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.viking-section__header:has(.viking-section__icon) {
  grid-template-columns: auto minmax(0, 1fr);
}
@media (min-width: 768px) {
  .viking-section__header:has(.viking-section__icon) {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
}

.viking-section__heading-group {
  min-width: 0;
}

.viking-section__actions {
  margin-inline-start: 0;
  justify-self: stretch;
}
@media (min-width: 768px) {
  .viking-section__actions {
    margin-inline-start: auto;
    justify-self: end;
  }
}

.viking-section__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--viking-accent);
}

.viking-section__title {
  margin: 0;
  color: var(--viking-text-heading);
  font: var(--viking-type-heading-sm);
  letter-spacing: var(--viking-letter-spacing-tight);
}

.viking-section--large .viking-section__title {
  font-size: var(--viking-font-size-lg);
  letter-spacing: normal;
  text-transform: none;
}

.viking-section__description {
  max-width: var(--viking-content-readable-max-width);
  margin: var(--viking-space-1) 0 0;
  color: var(--viking-text-muted);
  font: var(--viking-type-body-sm);
}

.viking-section__divider {
  height: 1px;
  margin-block-end: var(--viking-space-3);
  background: var(--viking-border-subtle);
}

.viking-section__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--viking-space-container-gap);
}

.viking-section--stack .viking-section__body {
  display: flex;
  flex-direction: column;
}

.viking-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--viking-card-content-gap);
  min-width: 0;
  width: 100%;
  color: var(--viking-text);
  border: var(--viking-border-width) var(--viking-border-style) var(--viking-border-container);
  border-radius: var(--viking-card-radius);
  box-shadow: var(--viking-shadow-xs), var(--viking-surface-highlight);
}

.viking-container--width-readable {
  max-width: var(--viking-container-max-width-readable);
}

.viking-container--width-default {
  max-width: var(--viking-container-max-width);
}

.viking-container--width-wide {
  max-width: var(--viking-container-max-width-wide);
}

.viking-container--width-full {
  max-width: none;
}

.viking-container--centered {
  margin-inline: auto;
}

.viking-container--surface {
  background: var(--viking-surface-recipe);
}

.viking-container--inset {
  background: var(--viking-surface-recipe-inset);
  border-color: var(--viking-border-subtle);
  box-shadow: var(--viking-shadow-inner);
}

.viking-container--transparent {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.viking-container--padding-default {
  padding: var(--viking-panel-padding);
}

.viking-container--padding-compact {
  padding: var(--viking-card-padding-compact);
}

.viking-container--padding-none {
  padding: 0;
}

.viking-container__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: flex-start;
  gap: var(--viking-space-content-gap);
  padding-block-end: var(--viking-space-3);
  border-bottom: 1px solid var(--viking-border-subtle);
}
@media (min-width: 768px) {
  .viking-container__header {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.viking-container__header:has(.viking-container__icon) {
  grid-template-columns: auto minmax(0, 1fr);
}
@media (min-width: 768px) {
  .viking-container__header:has(.viking-container__icon) {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
}

.viking-container__icon {
  flex: 0 0 auto;
  color: var(--viking-accent);
}

.viking-container__heading-group,
.viking-container__body {
  min-width: 0;
}

.viking-container__title {
  margin: 0;
  color: var(--viking-text);
  font-size: var(--viking-font-size-lg);
  font-weight: var(--viking-font-weight-semibold);
}

.viking-container__description {
  max-width: var(--viking-content-readable-max-width);
  margin: var(--viking-space-1) 0 0;
  color: var(--viking-text-muted);
  font-size: var(--viking-font-size-sm);
}

.viking-container__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--viking-space-2);
  align-items: center;
  justify-content: flex-end;
  margin-inline-start: auto;
}

.viking-container__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--viking-space-3);
}

@media (min-width: 768px) {
  .viking-app-layout__header,
  .viking-app-layout__content,
  .viking-app-layout__footer,
  .viking-page-template__inner {
    padding-inline: var(--viking-page-gutter-lg);
  }
  .viking-content-layout__inner {
    padding-inline: var(--viking-page-gutter-lg);
  }
  .viking-section--grid .viking-section__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .viking-page-template__header {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
@media (min-width: 1024px) {
  .viking-app-layout--sidebar-open {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .viking-app-layout--sidebar-toggle-only > .viking-app-layout__main > .viking-app-layout__header {
    display: none;
  }
  .viking-app-layout__sidebar {
    position: sticky;
    inset: auto;
    top: 0;
    grid-column: 1;
    grid-row: 1/-1;
    width: auto;
    height: 100%;
    border-right: 1px solid var(--viking-border);
    box-shadow: none;
  }
  .viking-app-layout--sidebar-open > .viking-app-layout__main {
    grid-column: 2;
  }
  .viking-app-layout__scrim {
    display: none;
  }
  .viking-app-layout--drawer-open .viking-app-layout__scrim {
    display: block;
  }
}
@media (min-width: 1440px) {
  .viking-app-layout--tools-open:not(.viking-app-layout--sidebar-open) {
    grid-template-columns: minmax(0, 1fr) var(--viking-trailing-width);
  }
  .viking-app-layout--sidebar-open.viking-app-layout--tools-open {
    grid-template-columns: auto minmax(0, 1fr) var(--viking-trailing-width);
  }
  .viking-app-layout__tools {
    position: sticky;
    inset: auto;
    top: 0;
    grid-column: -1;
    grid-row: 1/-1;
    width: auto;
    height: 100%;
    border-left: 1px solid var(--viking-border);
    box-shadow: none;
  }
}
.viking-btn,
a.viking-btn,
button.viking-btn {
  --viking-btn-depth-shadow: none;
  --viking-btn-hover-shadow: var(--viking-shadow-xs);
  --viking-btn-press-shadow: var(--viking-shadow-inner);
  font-family: var(--viking-font-family);
  font-size: var(--viking-font-size-ui);
  font-weight: var(--viking-font-weight-semibold);
  letter-spacing: var(--viking-letter-spacing-caps);
  line-height: var(--viking-line-height-snug);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--viking-space-control-gap);
  min-height: var(--viking-control-height);
  padding: 0 var(--viking-control-padding-x);
  border-radius: var(--viking-component-radius);
  border: var(--viking-border-width) var(--viking-border-style) transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--viking-transition-interactive);
  width: auto;
  min-width: var(--viking-btn-min-width, 0);
  white-space: nowrap;
  position: relative;
  background-clip: padding-box;
  isolation: isolate;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  box-shadow: var(--viking-btn-depth-shadow);
}
.viking-btn:focus-visible,
a.viking-btn:focus-visible,
button.viking-btn:focus-visible {
  outline: var(--viking-ring-width) solid var(--viking-ring);
  outline-offset: var(--viking-ring-offset);
  z-index: 1;
}
.viking-btn::before,
a.viking-btn::before,
button.viking-btn::before {
  display: none;
}
.viking-btn::after,
a.viking-btn::after,
button.viking-btn::after {
  display: none;
}
.viking-btn:disabled, .viking-btn[aria-busy=true],
a.viking-btn:disabled,
a.viking-btn[aria-busy=true],
button.viking-btn:disabled,
button.viking-btn[aria-busy=true] {
  opacity: var(--viking-state-disabled-opacity);
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.viking-btn[aria-busy=true]::before, .viking-btn[aria-busy=true] .viking-btn-label,
a.viking-btn[aria-busy=true]::before,
a.viking-btn[aria-busy=true] .viking-btn-label,
button.viking-btn[aria-busy=true]::before,
button.viking-btn[aria-busy=true] .viking-btn-label {
  opacity: 0.78;
  transform: translateY(1px);
}
.viking-btn[aria-busy=true],
a.viking-btn[aria-busy=true],
button.viking-btn[aria-busy=true] {
  cursor: wait;
}
.viking-btn[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact),
a.viking-btn[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact),
button.viking-btn[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact) {
  min-width: var(--viking-btn-loading-min-width, var(--viking-btn-min-width, 120px));
}
.viking-btn viking-icon,
.viking-btn .viking-icon,
.viking-btn [data-viking-icon],
a.viking-btn viking-icon,
a.viking-btn .viking-icon,
a.viking-btn [data-viking-icon],
button.viking-btn viking-icon,
button.viking-btn .viking-icon,
button.viking-btn [data-viking-icon] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--viking-icon-size-md);
  height: var(--viking-icon-size-md);
  line-height: 1;
  pointer-events: none;
  flex: 0 0 auto;
  margin-block: calc(var(--viking-space-0-5) * -1);
  align-self: center;
}
.viking-btn .viking-btn-label,
a.viking-btn .viking-btn-label,
button.viking-btn .viking-btn-label {
  display: inline-flex;
  align-items: center;
  gap: var(--viking-space-1);
  line-height: 1.2;
  min-height: var(--viking-icon-size-md);
  min-width: 0;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

.viking-btn-primary,
a.viking-btn-primary,
button.viking-btn-primary {
  --viking-btn-depth-shadow: none;
  --viking-btn-hover-shadow: var(--viking-shadow-xs);
  --viking-btn-press-shadow: var(--viking-shadow-inner);
  font-family: var(--viking-font-family);
  font-size: var(--viking-font-size-ui);
  font-weight: var(--viking-font-weight-semibold);
  letter-spacing: var(--viking-letter-spacing-caps);
  line-height: var(--viking-line-height-snug);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--viking-space-control-gap);
  min-height: var(--viking-control-height);
  padding: 0 var(--viking-control-padding-x);
  border-radius: var(--viking-component-radius);
  border: var(--viking-border-width) var(--viking-border-style) transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--viking-transition-interactive);
  width: auto;
  min-width: var(--viking-btn-min-width, 0);
  white-space: nowrap;
  position: relative;
  background-clip: padding-box;
  isolation: isolate;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  box-shadow: var(--viking-btn-depth-shadow);
}
.viking-btn-primary:focus-visible,
a.viking-btn-primary:focus-visible,
button.viking-btn-primary:focus-visible {
  outline: var(--viking-ring-width) solid var(--viking-ring);
  outline-offset: var(--viking-ring-offset);
  z-index: 1;
}
.viking-btn-primary::before,
a.viking-btn-primary::before,
button.viking-btn-primary::before {
  display: none;
}
.viking-btn-primary::after,
a.viking-btn-primary::after,
button.viking-btn-primary::after {
  display: none;
}
.viking-btn-primary:disabled, .viking-btn-primary[aria-busy=true],
a.viking-btn-primary:disabled,
a.viking-btn-primary[aria-busy=true],
button.viking-btn-primary:disabled,
button.viking-btn-primary[aria-busy=true] {
  opacity: var(--viking-state-disabled-opacity);
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.viking-btn-primary[aria-busy=true]::before, .viking-btn-primary[aria-busy=true] .viking-btn-label,
a.viking-btn-primary[aria-busy=true]::before,
a.viking-btn-primary[aria-busy=true] .viking-btn-label,
button.viking-btn-primary[aria-busy=true]::before,
button.viking-btn-primary[aria-busy=true] .viking-btn-label {
  opacity: 0.78;
  transform: translateY(1px);
}
.viking-btn-primary[aria-busy=true],
a.viking-btn-primary[aria-busy=true],
button.viking-btn-primary[aria-busy=true] {
  cursor: wait;
}
.viking-btn-primary[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact),
a.viking-btn-primary[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact),
button.viking-btn-primary[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact) {
  min-width: var(--viking-btn-loading-min-width, var(--viking-btn-min-width, 120px));
}
.viking-btn-primary viking-icon,
.viking-btn-primary .viking-icon,
.viking-btn-primary [data-viking-icon],
a.viking-btn-primary viking-icon,
a.viking-btn-primary .viking-icon,
a.viking-btn-primary [data-viking-icon],
button.viking-btn-primary viking-icon,
button.viking-btn-primary .viking-icon,
button.viking-btn-primary [data-viking-icon] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--viking-icon-size-md);
  height: var(--viking-icon-size-md);
  line-height: 1;
  pointer-events: none;
  flex: 0 0 auto;
  margin-block: calc(var(--viking-space-0-5) * -1);
  align-self: center;
}
.viking-btn-primary .viking-btn-label,
a.viking-btn-primary .viking-btn-label,
button.viking-btn-primary .viking-btn-label {
  display: inline-flex;
  align-items: center;
  gap: var(--viking-space-1);
  line-height: 1.2;
  min-height: var(--viking-icon-size-md);
  min-width: 0;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}
.viking-btn-primary,
a.viking-btn-primary,
button.viking-btn-primary {
  background: var(--viking-accent);
  color: var(--viking-accent-content);
  border-color: color-mix(in srgb, var(--viking-accent) 82%, var(--viking-black));
  box-shadow: var(--viking-btn-depth-shadow);
}
.viking-btn-primary:hover:not(:disabled):not([aria-busy=true]),
a.viking-btn-primary:hover:not(:disabled):not([aria-busy=true]),
button.viking-btn-primary:hover:not(:disabled):not([aria-busy=true]) {
  background: var(--viking-accent-hover);
  border-color: var(--viking-accent-hover);
  color: var(--viking-accent-content);
  box-shadow: var(--viking-btn-hover-shadow);
  transform: translateY(var(--viking-state-hover-lift));
}
.viking-btn-primary:active:not(:disabled):not([aria-busy=true]),
a.viking-btn-primary:active:not(:disabled):not([aria-busy=true]),
button.viking-btn-primary:active:not(:disabled):not([aria-busy=true]) {
  transform: translateY(0) scale(var(--viking-state-active-scale));
  border-color: color-mix(in srgb, var(--viking-accent) 82%, var(--viking-black));
  box-shadow: var(--viking-btn-press-shadow);
}

.viking-btn-secondary,
a.viking-btn-secondary,
button.viking-btn-secondary {
  --viking-btn-depth-shadow: none;
  --viking-btn-hover-shadow: var(--viking-shadow-xs);
  --viking-btn-press-shadow: var(--viking-shadow-inner);
  font-family: var(--viking-font-family);
  font-size: var(--viking-font-size-ui);
  font-weight: var(--viking-font-weight-semibold);
  letter-spacing: var(--viking-letter-spacing-caps);
  line-height: var(--viking-line-height-snug);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--viking-space-control-gap);
  min-height: var(--viking-control-height);
  padding: 0 var(--viking-control-padding-x);
  border-radius: var(--viking-component-radius);
  border: var(--viking-border-width) var(--viking-border-style) transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--viking-transition-interactive);
  width: auto;
  min-width: var(--viking-btn-min-width, 0);
  white-space: nowrap;
  position: relative;
  background-clip: padding-box;
  isolation: isolate;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  box-shadow: var(--viking-btn-depth-shadow);
}
.viking-btn-secondary:focus-visible,
a.viking-btn-secondary:focus-visible,
button.viking-btn-secondary:focus-visible {
  outline: var(--viking-ring-width) solid var(--viking-ring);
  outline-offset: var(--viking-ring-offset);
  z-index: 1;
}
.viking-btn-secondary::before,
a.viking-btn-secondary::before,
button.viking-btn-secondary::before {
  display: none;
}
.viking-btn-secondary::after,
a.viking-btn-secondary::after,
button.viking-btn-secondary::after {
  display: none;
}
.viking-btn-secondary:disabled, .viking-btn-secondary[aria-busy=true],
a.viking-btn-secondary:disabled,
a.viking-btn-secondary[aria-busy=true],
button.viking-btn-secondary:disabled,
button.viking-btn-secondary[aria-busy=true] {
  opacity: var(--viking-state-disabled-opacity);
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.viking-btn-secondary[aria-busy=true]::before, .viking-btn-secondary[aria-busy=true] .viking-btn-label,
a.viking-btn-secondary[aria-busy=true]::before,
a.viking-btn-secondary[aria-busy=true] .viking-btn-label,
button.viking-btn-secondary[aria-busy=true]::before,
button.viking-btn-secondary[aria-busy=true] .viking-btn-label {
  opacity: 0.78;
  transform: translateY(1px);
}
.viking-btn-secondary[aria-busy=true],
a.viking-btn-secondary[aria-busy=true],
button.viking-btn-secondary[aria-busy=true] {
  cursor: wait;
}
.viking-btn-secondary[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact),
a.viking-btn-secondary[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact),
button.viking-btn-secondary[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact) {
  min-width: var(--viking-btn-loading-min-width, var(--viking-btn-min-width, 120px));
}
.viking-btn-secondary viking-icon,
.viking-btn-secondary .viking-icon,
.viking-btn-secondary [data-viking-icon],
a.viking-btn-secondary viking-icon,
a.viking-btn-secondary .viking-icon,
a.viking-btn-secondary [data-viking-icon],
button.viking-btn-secondary viking-icon,
button.viking-btn-secondary .viking-icon,
button.viking-btn-secondary [data-viking-icon] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--viking-icon-size-md);
  height: var(--viking-icon-size-md);
  line-height: 1;
  pointer-events: none;
  flex: 0 0 auto;
  margin-block: calc(var(--viking-space-0-5) * -1);
  align-self: center;
}
.viking-btn-secondary .viking-btn-label,
a.viking-btn-secondary .viking-btn-label,
button.viking-btn-secondary .viking-btn-label {
  display: inline-flex;
  align-items: center;
  gap: var(--viking-space-1);
  line-height: 1.2;
  min-height: var(--viking-icon-size-md);
  min-width: 0;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}
.viking-btn-secondary,
a.viking-btn-secondary,
button.viking-btn-secondary {
  background: var(--viking-accent-secondary);
  color: var(--viking-accent-secondary-content);
  border-color: color-mix(in srgb, var(--viking-accent-secondary) 82%, var(--viking-black));
  box-shadow: var(--viking-btn-depth-shadow);
}
.viking-btn-secondary:hover:not(:disabled):not([aria-busy=true]),
a.viking-btn-secondary:hover:not(:disabled):not([aria-busy=true]),
button.viking-btn-secondary:hover:not(:disabled):not([aria-busy=true]) {
  background: var(--viking-accent-secondary-hover);
  border-color: var(--viking-accent-secondary-hover);
  color: var(--viking-accent-secondary-content);
  box-shadow: var(--viking-btn-hover-shadow);
  transform: translateY(var(--viking-state-hover-lift));
}
.viking-btn-secondary:active:not(:disabled):not([aria-busy=true]),
a.viking-btn-secondary:active:not(:disabled):not([aria-busy=true]),
button.viking-btn-secondary:active:not(:disabled):not([aria-busy=true]) {
  transform: translateY(0) scale(var(--viking-state-active-scale));
  border-color: color-mix(in srgb, var(--viking-accent-secondary) 82%, var(--viking-black));
  box-shadow: var(--viking-btn-press-shadow);
}

.viking-btn-outline,
a.viking-btn-outline,
button.viking-btn-outline {
  --viking-btn-depth-shadow: none;
  --viking-btn-hover-shadow: var(--viking-shadow-xs);
  --viking-btn-press-shadow: var(--viking-shadow-inner);
  font-family: var(--viking-font-family);
  font-size: var(--viking-font-size-ui);
  font-weight: var(--viking-font-weight-semibold);
  letter-spacing: var(--viking-letter-spacing-caps);
  line-height: var(--viking-line-height-snug);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--viking-space-control-gap);
  min-height: var(--viking-control-height);
  padding: 0 var(--viking-control-padding-x);
  border-radius: var(--viking-component-radius);
  border: var(--viking-border-width) var(--viking-border-style) transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--viking-transition-interactive);
  width: auto;
  min-width: var(--viking-btn-min-width, 0);
  white-space: nowrap;
  position: relative;
  background-clip: padding-box;
  isolation: isolate;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  box-shadow: var(--viking-btn-depth-shadow);
}
.viking-btn-outline:focus-visible,
a.viking-btn-outline:focus-visible,
button.viking-btn-outline:focus-visible {
  outline: var(--viking-ring-width) solid var(--viking-ring);
  outline-offset: var(--viking-ring-offset);
  z-index: 1;
}
.viking-btn-outline::before,
a.viking-btn-outline::before,
button.viking-btn-outline::before {
  display: none;
}
.viking-btn-outline::after,
a.viking-btn-outline::after,
button.viking-btn-outline::after {
  display: none;
}
.viking-btn-outline:disabled, .viking-btn-outline[aria-busy=true],
a.viking-btn-outline:disabled,
a.viking-btn-outline[aria-busy=true],
button.viking-btn-outline:disabled,
button.viking-btn-outline[aria-busy=true] {
  opacity: var(--viking-state-disabled-opacity);
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.viking-btn-outline[aria-busy=true]::before, .viking-btn-outline[aria-busy=true] .viking-btn-label,
a.viking-btn-outline[aria-busy=true]::before,
a.viking-btn-outline[aria-busy=true] .viking-btn-label,
button.viking-btn-outline[aria-busy=true]::before,
button.viking-btn-outline[aria-busy=true] .viking-btn-label {
  opacity: 0.78;
  transform: translateY(1px);
}
.viking-btn-outline[aria-busy=true],
a.viking-btn-outline[aria-busy=true],
button.viking-btn-outline[aria-busy=true] {
  cursor: wait;
}
.viking-btn-outline[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact),
a.viking-btn-outline[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact),
button.viking-btn-outline[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact) {
  min-width: var(--viking-btn-loading-min-width, var(--viking-btn-min-width, 120px));
}
.viking-btn-outline viking-icon,
.viking-btn-outline .viking-icon,
.viking-btn-outline [data-viking-icon],
a.viking-btn-outline viking-icon,
a.viking-btn-outline .viking-icon,
a.viking-btn-outline [data-viking-icon],
button.viking-btn-outline viking-icon,
button.viking-btn-outline .viking-icon,
button.viking-btn-outline [data-viking-icon] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--viking-icon-size-md);
  height: var(--viking-icon-size-md);
  line-height: 1;
  pointer-events: none;
  flex: 0 0 auto;
  margin-block: calc(var(--viking-space-0-5) * -1);
  align-self: center;
}
.viking-btn-outline .viking-btn-label,
a.viking-btn-outline .viking-btn-label,
button.viking-btn-outline .viking-btn-label {
  display: inline-flex;
  align-items: center;
  gap: var(--viking-space-1);
  line-height: 1.2;
  min-height: var(--viking-icon-size-md);
  min-width: 0;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}
.viking-btn-outline,
a.viking-btn-outline,
button.viking-btn-outline {
  background: var(--viking-surface-recipe, var(--viking-surface));
  color: var(--viking-text);
  border-color: var(--viking-border-strong);
  box-shadow: var(--viking-btn-depth-shadow);
}
.viking-btn-outline:hover:not(:disabled):not([aria-busy=true]),
a.viking-btn-outline:hover:not(:disabled):not([aria-busy=true]),
button.viking-btn-outline:hover:not(:disabled):not([aria-busy=true]) {
  background: color-mix(in srgb, var(--viking-accent) 5%, var(--viking-surface-alt));
  border-color: color-mix(in srgb, var(--viking-accent) 45%, var(--viking-border-strong));
  color: var(--viking-text);
  box-shadow: var(--viking-btn-hover-shadow);
  transform: translateY(var(--viking-state-hover-lift));
}
.viking-btn-outline:active:not(:disabled):not([aria-busy=true]),
a.viking-btn-outline:active:not(:disabled):not([aria-busy=true]),
button.viking-btn-outline:active:not(:disabled):not([aria-busy=true]) {
  transform: translateY(0) scale(var(--viking-state-active-scale));
  border-color: var(--viking-border-strong);
  box-shadow: var(--viking-btn-press-shadow);
}

.viking-btn-danger,
a.viking-btn-danger,
button.viking-btn-danger {
  --viking-btn-depth-shadow: none;
  --viking-btn-hover-shadow: var(--viking-shadow-xs);
  --viking-btn-press-shadow: var(--viking-shadow-inner);
  font-family: var(--viking-font-family);
  font-size: var(--viking-font-size-ui);
  font-weight: var(--viking-font-weight-semibold);
  letter-spacing: var(--viking-letter-spacing-caps);
  line-height: var(--viking-line-height-snug);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--viking-space-control-gap);
  min-height: var(--viking-control-height);
  padding: 0 var(--viking-control-padding-x);
  border-radius: var(--viking-component-radius);
  border: var(--viking-border-width) var(--viking-border-style) transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--viking-transition-interactive);
  width: auto;
  min-width: var(--viking-btn-min-width, 0);
  white-space: nowrap;
  position: relative;
  background-clip: padding-box;
  isolation: isolate;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  box-shadow: var(--viking-btn-depth-shadow);
}
.viking-btn-danger:focus-visible,
a.viking-btn-danger:focus-visible,
button.viking-btn-danger:focus-visible {
  outline: var(--viking-ring-width) solid var(--viking-ring);
  outline-offset: var(--viking-ring-offset);
  z-index: 1;
}
.viking-btn-danger::before,
a.viking-btn-danger::before,
button.viking-btn-danger::before {
  display: none;
}
.viking-btn-danger::after,
a.viking-btn-danger::after,
button.viking-btn-danger::after {
  display: none;
}
.viking-btn-danger:disabled, .viking-btn-danger[aria-busy=true],
a.viking-btn-danger:disabled,
a.viking-btn-danger[aria-busy=true],
button.viking-btn-danger:disabled,
button.viking-btn-danger[aria-busy=true] {
  opacity: var(--viking-state-disabled-opacity);
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.viking-btn-danger[aria-busy=true]::before, .viking-btn-danger[aria-busy=true] .viking-btn-label,
a.viking-btn-danger[aria-busy=true]::before,
a.viking-btn-danger[aria-busy=true] .viking-btn-label,
button.viking-btn-danger[aria-busy=true]::before,
button.viking-btn-danger[aria-busy=true] .viking-btn-label {
  opacity: 0.78;
  transform: translateY(1px);
}
.viking-btn-danger[aria-busy=true],
a.viking-btn-danger[aria-busy=true],
button.viking-btn-danger[aria-busy=true] {
  cursor: wait;
}
.viking-btn-danger[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact),
a.viking-btn-danger[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact),
button.viking-btn-danger[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact) {
  min-width: var(--viking-btn-loading-min-width, var(--viking-btn-min-width, 120px));
}
.viking-btn-danger viking-icon,
.viking-btn-danger .viking-icon,
.viking-btn-danger [data-viking-icon],
a.viking-btn-danger viking-icon,
a.viking-btn-danger .viking-icon,
a.viking-btn-danger [data-viking-icon],
button.viking-btn-danger viking-icon,
button.viking-btn-danger .viking-icon,
button.viking-btn-danger [data-viking-icon] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--viking-icon-size-md);
  height: var(--viking-icon-size-md);
  line-height: 1;
  pointer-events: none;
  flex: 0 0 auto;
  margin-block: calc(var(--viking-space-0-5) * -1);
  align-self: center;
}
.viking-btn-danger .viking-btn-label,
a.viking-btn-danger .viking-btn-label,
button.viking-btn-danger .viking-btn-label {
  display: inline-flex;
  align-items: center;
  gap: var(--viking-space-1);
  line-height: 1.2;
  min-height: var(--viking-icon-size-md);
  min-width: 0;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}
.viking-btn-danger,
a.viking-btn-danger,
button.viking-btn-danger {
  background: var(--viking-danger);
  color: var(--viking-on-danger);
  border-color: color-mix(in srgb, var(--viking-danger) 85%, var(--viking-black));
  box-shadow: var(--viking-btn-depth-shadow);
}
.viking-btn-danger:hover:not(:disabled):not([aria-busy=true]),
a.viking-btn-danger:hover:not(:disabled):not([aria-busy=true]),
button.viking-btn-danger:hover:not(:disabled):not([aria-busy=true]) {
  background: color-mix(in srgb, var(--viking-danger) 88%, var(--viking-white));
  border-color: color-mix(in srgb, var(--viking-danger) 92%, var(--viking-white));
  color: var(--viking-on-danger);
  box-shadow: var(--viking-btn-hover-shadow);
  transform: translateY(var(--viking-state-hover-lift));
}
.viking-btn-danger:active:not(:disabled):not([aria-busy=true]),
a.viking-btn-danger:active:not(:disabled):not([aria-busy=true]),
button.viking-btn-danger:active:not(:disabled):not([aria-busy=true]) {
  transform: translateY(0) scale(var(--viking-state-active-scale));
  border-color: color-mix(in srgb, var(--viking-danger) 72%, var(--viking-black));
  background: color-mix(in srgb, var(--viking-danger) 84%, var(--viking-black));
  box-shadow: var(--viking-btn-press-shadow);
}

.viking-btn-ghost,
a.viking-btn-ghost,
button.viking-btn-ghost {
  --viking-btn-depth-shadow: none;
  --viking-btn-hover-shadow: var(--viking-shadow-xs);
  --viking-btn-press-shadow: var(--viking-shadow-inner);
  font-family: var(--viking-font-family);
  font-size: var(--viking-font-size-ui);
  font-weight: var(--viking-font-weight-semibold);
  letter-spacing: var(--viking-letter-spacing-caps);
  line-height: var(--viking-line-height-snug);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--viking-space-control-gap);
  min-height: var(--viking-control-height);
  padding: 0 var(--viking-control-padding-x);
  border-radius: var(--viking-component-radius);
  border: var(--viking-border-width) var(--viking-border-style) transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--viking-transition-interactive);
  width: auto;
  min-width: var(--viking-btn-min-width, 0);
  white-space: nowrap;
  position: relative;
  background-clip: padding-box;
  isolation: isolate;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  box-shadow: var(--viking-btn-depth-shadow);
}
.viking-btn-ghost:focus-visible,
a.viking-btn-ghost:focus-visible,
button.viking-btn-ghost:focus-visible {
  outline: var(--viking-ring-width) solid var(--viking-ring);
  outline-offset: var(--viking-ring-offset);
  z-index: 1;
}
.viking-btn-ghost::before,
a.viking-btn-ghost::before,
button.viking-btn-ghost::before {
  display: none;
}
.viking-btn-ghost::after,
a.viking-btn-ghost::after,
button.viking-btn-ghost::after {
  display: none;
}
.viking-btn-ghost:disabled, .viking-btn-ghost[aria-busy=true],
a.viking-btn-ghost:disabled,
a.viking-btn-ghost[aria-busy=true],
button.viking-btn-ghost:disabled,
button.viking-btn-ghost[aria-busy=true] {
  opacity: var(--viking-state-disabled-opacity);
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.viking-btn-ghost[aria-busy=true]::before, .viking-btn-ghost[aria-busy=true] .viking-btn-label,
a.viking-btn-ghost[aria-busy=true]::before,
a.viking-btn-ghost[aria-busy=true] .viking-btn-label,
button.viking-btn-ghost[aria-busy=true]::before,
button.viking-btn-ghost[aria-busy=true] .viking-btn-label {
  opacity: 0.78;
  transform: translateY(1px);
}
.viking-btn-ghost[aria-busy=true],
a.viking-btn-ghost[aria-busy=true],
button.viking-btn-ghost[aria-busy=true] {
  cursor: wait;
}
.viking-btn-ghost[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact),
a.viking-btn-ghost[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact),
button.viking-btn-ghost[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact) {
  min-width: var(--viking-btn-loading-min-width, var(--viking-btn-min-width, 120px));
}
.viking-btn-ghost viking-icon,
.viking-btn-ghost .viking-icon,
.viking-btn-ghost [data-viking-icon],
a.viking-btn-ghost viking-icon,
a.viking-btn-ghost .viking-icon,
a.viking-btn-ghost [data-viking-icon],
button.viking-btn-ghost viking-icon,
button.viking-btn-ghost .viking-icon,
button.viking-btn-ghost [data-viking-icon] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--viking-icon-size-md);
  height: var(--viking-icon-size-md);
  line-height: 1;
  pointer-events: none;
  flex: 0 0 auto;
  margin-block: calc(var(--viking-space-0-5) * -1);
  align-self: center;
}
.viking-btn-ghost .viking-btn-label,
a.viking-btn-ghost .viking-btn-label,
button.viking-btn-ghost .viking-btn-label {
  display: inline-flex;
  align-items: center;
  gap: var(--viking-space-1);
  line-height: 1.2;
  min-height: var(--viking-icon-size-md);
  min-width: 0;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}
.viking-btn-ghost,
a.viking-btn-ghost,
button.viking-btn-ghost {
  background: transparent;
  color: var(--viking-text);
  min-width: auto;
  box-shadow: none;
  border-color: transparent;
}
.viking-btn-ghost:hover:not(:disabled):not([aria-busy=true]),
a.viking-btn-ghost:hover:not(:disabled):not([aria-busy=true]),
button.viking-btn-ghost:hover:not(:disabled):not([aria-busy=true]) {
  background: var(--viking-component-hover-bg);
  color: var(--viking-text);
  border-color: transparent;
  box-shadow: none;
}
.viking-btn-ghost:active:not(:disabled):not([aria-busy=true]),
a.viking-btn-ghost:active:not(:disabled):not([aria-busy=true]),
button.viking-btn-ghost:active:not(:disabled):not([aria-busy=true]) {
  transform: translateY(0) scale(var(--viking-state-active-scale));
  background: var(--viking-accent-soft);
  color: var(--viking-accent-strong);
}

.viking-btn-subtle,
a.viking-btn-subtle,
button.viking-btn-subtle {
  --viking-btn-depth-shadow: none;
  --viking-btn-hover-shadow: var(--viking-shadow-xs);
  --viking-btn-press-shadow: var(--viking-shadow-inner);
  font-family: var(--viking-font-family);
  font-size: var(--viking-font-size-ui);
  font-weight: var(--viking-font-weight-semibold);
  letter-spacing: var(--viking-letter-spacing-caps);
  line-height: var(--viking-line-height-snug);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--viking-space-control-gap);
  min-height: var(--viking-control-height);
  padding: 0 var(--viking-control-padding-x);
  border-radius: var(--viking-component-radius);
  border: var(--viking-border-width) var(--viking-border-style) transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--viking-transition-interactive);
  width: auto;
  min-width: var(--viking-btn-min-width, 0);
  white-space: nowrap;
  position: relative;
  background-clip: padding-box;
  isolation: isolate;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  box-shadow: var(--viking-btn-depth-shadow);
}
.viking-btn-subtle:focus-visible,
a.viking-btn-subtle:focus-visible,
button.viking-btn-subtle:focus-visible {
  outline: var(--viking-ring-width) solid var(--viking-ring);
  outline-offset: var(--viking-ring-offset);
  z-index: 1;
}
.viking-btn-subtle::before,
a.viking-btn-subtle::before,
button.viking-btn-subtle::before {
  display: none;
}
.viking-btn-subtle::after,
a.viking-btn-subtle::after,
button.viking-btn-subtle::after {
  display: none;
}
.viking-btn-subtle:disabled, .viking-btn-subtle[aria-busy=true],
a.viking-btn-subtle:disabled,
a.viking-btn-subtle[aria-busy=true],
button.viking-btn-subtle:disabled,
button.viking-btn-subtle[aria-busy=true] {
  opacity: var(--viking-state-disabled-opacity);
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.viking-btn-subtle[aria-busy=true]::before, .viking-btn-subtle[aria-busy=true] .viking-btn-label,
a.viking-btn-subtle[aria-busy=true]::before,
a.viking-btn-subtle[aria-busy=true] .viking-btn-label,
button.viking-btn-subtle[aria-busy=true]::before,
button.viking-btn-subtle[aria-busy=true] .viking-btn-label {
  opacity: 0.78;
  transform: translateY(1px);
}
.viking-btn-subtle[aria-busy=true],
a.viking-btn-subtle[aria-busy=true],
button.viking-btn-subtle[aria-busy=true] {
  cursor: wait;
}
.viking-btn-subtle[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact),
a.viking-btn-subtle[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact),
button.viking-btn-subtle[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact) {
  min-width: var(--viking-btn-loading-min-width, var(--viking-btn-min-width, 120px));
}
.viking-btn-subtle viking-icon,
.viking-btn-subtle .viking-icon,
.viking-btn-subtle [data-viking-icon],
a.viking-btn-subtle viking-icon,
a.viking-btn-subtle .viking-icon,
a.viking-btn-subtle [data-viking-icon],
button.viking-btn-subtle viking-icon,
button.viking-btn-subtle .viking-icon,
button.viking-btn-subtle [data-viking-icon] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--viking-icon-size-md);
  height: var(--viking-icon-size-md);
  line-height: 1;
  pointer-events: none;
  flex: 0 0 auto;
  margin-block: calc(var(--viking-space-0-5) * -1);
  align-self: center;
}
.viking-btn-subtle .viking-btn-label,
a.viking-btn-subtle .viking-btn-label,
button.viking-btn-subtle .viking-btn-label {
  display: inline-flex;
  align-items: center;
  gap: var(--viking-space-1);
  line-height: 1.2;
  min-height: var(--viking-icon-size-md);
  min-width: 0;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}
.viking-btn-subtle,
a.viking-btn-subtle,
button.viking-btn-subtle {
  background: transparent;
  color: var(--viking-text-muted);
  border-color: var(--viking-border-subtle);
  min-width: auto;
  box-shadow: none;
}
.viking-btn-subtle:hover:not(:disabled):not([aria-busy=true]),
a.viking-btn-subtle:hover:not(:disabled):not([aria-busy=true]),
button.viking-btn-subtle:hover:not(:disabled):not([aria-busy=true]) {
  color: var(--viking-text);
  background: var(--viking-component-hover-bg);
  border-color: var(--viking-component-border-hover);
  box-shadow: none;
}
.viking-btn-subtle:active:not(:disabled):not([aria-busy=true]),
a.viking-btn-subtle:active:not(:disabled):not([aria-busy=true]),
button.viking-btn-subtle:active:not(:disabled):not([aria-busy=true]) {
  transform: translateY(0) scale(var(--viking-state-active-scale));
  border-color: var(--viking-border);
  background: color-mix(in srgb, var(--viking-accent-soft) 70%, var(--viking-surface));
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--viking-black) 24%, transparent);
}

.viking-btn-filled,
a.viking-btn-filled,
button.viking-btn-filled {
  --viking-btn-depth-shadow: none;
  --viking-btn-hover-shadow: var(--viking-shadow-xs);
  --viking-btn-press-shadow: var(--viking-shadow-inner);
  font-family: var(--viking-font-family);
  font-size: var(--viking-font-size-ui);
  font-weight: var(--viking-font-weight-semibold);
  letter-spacing: var(--viking-letter-spacing-caps);
  line-height: var(--viking-line-height-snug);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--viking-space-control-gap);
  min-height: var(--viking-control-height);
  padding: 0 var(--viking-control-padding-x);
  border-radius: var(--viking-component-radius);
  border: var(--viking-border-width) var(--viking-border-style) transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--viking-transition-interactive);
  width: auto;
  min-width: var(--viking-btn-min-width, 0);
  white-space: nowrap;
  position: relative;
  background-clip: padding-box;
  isolation: isolate;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  box-shadow: var(--viking-btn-depth-shadow);
}
.viking-btn-filled:focus-visible,
a.viking-btn-filled:focus-visible,
button.viking-btn-filled:focus-visible {
  outline: var(--viking-ring-width) solid var(--viking-ring);
  outline-offset: var(--viking-ring-offset);
  z-index: 1;
}
.viking-btn-filled::before,
a.viking-btn-filled::before,
button.viking-btn-filled::before {
  display: none;
}
.viking-btn-filled::after,
a.viking-btn-filled::after,
button.viking-btn-filled::after {
  display: none;
}
.viking-btn-filled:disabled, .viking-btn-filled[aria-busy=true],
a.viking-btn-filled:disabled,
a.viking-btn-filled[aria-busy=true],
button.viking-btn-filled:disabled,
button.viking-btn-filled[aria-busy=true] {
  opacity: var(--viking-state-disabled-opacity);
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.viking-btn-filled[aria-busy=true]::before, .viking-btn-filled[aria-busy=true] .viking-btn-label,
a.viking-btn-filled[aria-busy=true]::before,
a.viking-btn-filled[aria-busy=true] .viking-btn-label,
button.viking-btn-filled[aria-busy=true]::before,
button.viking-btn-filled[aria-busy=true] .viking-btn-label {
  opacity: 0.78;
  transform: translateY(1px);
}
.viking-btn-filled[aria-busy=true],
a.viking-btn-filled[aria-busy=true],
button.viking-btn-filled[aria-busy=true] {
  cursor: wait;
}
.viking-btn-filled[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact),
a.viking-btn-filled[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact),
button.viking-btn-filled[aria-busy=true]:not(.viking-square):not(.viking-btn-square):not(.viking-compact) {
  min-width: var(--viking-btn-loading-min-width, var(--viking-btn-min-width, 120px));
}
.viking-btn-filled viking-icon,
.viking-btn-filled .viking-icon,
.viking-btn-filled [data-viking-icon],
a.viking-btn-filled viking-icon,
a.viking-btn-filled .viking-icon,
a.viking-btn-filled [data-viking-icon],
button.viking-btn-filled viking-icon,
button.viking-btn-filled .viking-icon,
button.viking-btn-filled [data-viking-icon] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--viking-icon-size-md);
  height: var(--viking-icon-size-md);
  line-height: 1;
  pointer-events: none;
  flex: 0 0 auto;
  margin-block: calc(var(--viking-space-0-5) * -1);
  align-self: center;
}
.viking-btn-filled .viking-btn-label,
a.viking-btn-filled .viking-btn-label,
button.viking-btn-filled .viking-btn-label {
  display: inline-flex;
  align-items: center;
  gap: var(--viking-space-1);
  line-height: 1.2;
  min-height: var(--viking-icon-size-md);
  min-width: 0;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}
.viking-btn-filled,
a.viking-btn-filled,
button.viking-btn-filled {
  background: var(--viking-surface-recipe-muted, var(--viking-surface-alt));
  color: var(--viking-text);
  border-color: var(--viking-border);
  box-shadow: var(--viking-shadow-xs);
}
.viking-btn-filled:hover:not(:disabled):not([aria-busy=true]),
a.viking-btn-filled:hover:not(:disabled):not([aria-busy=true]),
button.viking-btn-filled:hover:not(:disabled):not([aria-busy=true]) {
  border-color: color-mix(in srgb, var(--viking-accent) 45%, var(--viking-border));
  background: color-mix(in srgb, var(--viking-accent) 8%, var(--viking-surface-alt));
  box-shadow: var(--viking-btn-hover-shadow);
  transform: translateY(var(--viking-state-hover-lift));
}
.viking-btn-filled:active:not(:disabled):not([aria-busy=true]),
a.viking-btn-filled:active:not(:disabled):not([aria-busy=true]),
button.viking-btn-filled:active:not(:disabled):not([aria-busy=true]) {
  transform: translateY(0) scale(var(--viking-state-active-scale));
  box-shadow: var(--viking-btn-press-shadow);
  border-color: color-mix(in srgb, var(--viking-accent) 20%, var(--viking-border));
  background: color-mix(in srgb, var(--viking-surface-alt) 84%, var(--viking-accent));
}

.viking-btn.viking-outline {
  background: var(--viking-surface-recipe, var(--viking-surface));
  color: var(--viking-text);
  border-color: var(--viking-border-strong);
  box-shadow: var(--viking-btn-depth-shadow);
}
.viking-btn.viking-outline:hover:not(:disabled):not([aria-busy=true]) {
  background: color-mix(in srgb, var(--viking-accent) 5%, var(--viking-surface-alt));
  border-color: color-mix(in srgb, var(--viking-accent) 45%, var(--viking-border-strong));
  color: var(--viking-text);
  box-shadow: var(--viking-btn-hover-shadow);
  transform: translateY(var(--viking-state-hover-lift));
}
.viking-btn.viking-outline:active:not(:disabled):not([aria-busy=true]) {
  transform: translateY(0) scale(var(--viking-state-active-scale));
  border-color: var(--viking-border-strong);
  box-shadow: var(--viking-btn-press-shadow);
}

.viking-btn.viking-primary {
  background: var(--viking-accent);
  color: var(--viking-accent-content);
  border-color: color-mix(in srgb, var(--viking-accent) 82%, var(--viking-black));
  box-shadow: var(--viking-btn-depth-shadow);
}
.viking-btn.viking-primary:hover:not(:disabled):not([aria-busy=true]) {
  background: var(--viking-accent-hover);
  border-color: var(--viking-accent-hover);
  color: var(--viking-accent-content);
  box-shadow: var(--viking-btn-hover-shadow);
  transform: translateY(var(--viking-state-hover-lift));
}
.viking-btn.viking-primary:active:not(:disabled):not([aria-busy=true]) {
  transform: translateY(0) scale(var(--viking-state-active-scale));
  border-color: color-mix(in srgb, var(--viking-accent) 82%, var(--viking-black));
  box-shadow: var(--viking-btn-press-shadow);
}

.viking-btn.viking-secondary {
  background: var(--viking-accent-secondary);
  color: var(--viking-accent-secondary-content);
  border-color: color-mix(in srgb, var(--viking-accent-secondary) 82%, var(--viking-black));
  box-shadow: var(--viking-btn-depth-shadow);
}
.viking-btn.viking-secondary:hover:not(:disabled):not([aria-busy=true]) {
  background: var(--viking-accent-secondary-hover);
  border-color: var(--viking-accent-secondary-hover);
  color: var(--viking-accent-secondary-content);
  box-shadow: var(--viking-btn-hover-shadow);
  transform: translateY(var(--viking-state-hover-lift));
}
.viking-btn.viking-secondary:active:not(:disabled):not([aria-busy=true]) {
  transform: translateY(0) scale(var(--viking-state-active-scale));
  border-color: color-mix(in srgb, var(--viking-accent-secondary) 82%, var(--viking-black));
  box-shadow: var(--viking-btn-press-shadow);
}

.viking-btn.viking-filled {
  background: var(--viking-surface-recipe-muted, var(--viking-surface-alt));
  color: var(--viking-text);
  border-color: var(--viking-border);
  box-shadow: var(--viking-shadow-xs);
}
.viking-btn.viking-filled:hover:not(:disabled):not([aria-busy=true]) {
  border-color: color-mix(in srgb, var(--viking-accent) 45%, var(--viking-border));
  background: color-mix(in srgb, var(--viking-accent) 8%, var(--viking-surface-alt));
  box-shadow: var(--viking-btn-hover-shadow);
  transform: translateY(var(--viking-state-hover-lift));
}
.viking-btn.viking-filled:active:not(:disabled):not([aria-busy=true]) {
  transform: translateY(0) scale(var(--viking-state-active-scale));
  box-shadow: var(--viking-btn-press-shadow);
  border-color: color-mix(in srgb, var(--viking-accent) 20%, var(--viking-border));
  background: color-mix(in srgb, var(--viking-surface-alt) 84%, var(--viking-accent));
}

.viking-btn.viking-danger {
  background: var(--viking-danger);
  color: var(--viking-on-danger);
  border-color: color-mix(in srgb, var(--viking-danger) 85%, var(--viking-black));
  box-shadow: var(--viking-btn-depth-shadow);
}
.viking-btn.viking-danger:hover:not(:disabled):not([aria-busy=true]) {
  background: color-mix(in srgb, var(--viking-danger) 88%, var(--viking-white));
  border-color: color-mix(in srgb, var(--viking-danger) 92%, var(--viking-white));
  color: var(--viking-on-danger);
  box-shadow: var(--viking-btn-hover-shadow);
  transform: translateY(var(--viking-state-hover-lift));
}
.viking-btn.viking-danger:active:not(:disabled):not([aria-busy=true]) {
  transform: translateY(0) scale(var(--viking-state-active-scale));
  border-color: color-mix(in srgb, var(--viking-danger) 72%, var(--viking-black));
  background: color-mix(in srgb, var(--viking-danger) 84%, var(--viking-black));
  box-shadow: var(--viking-btn-press-shadow);
}

.viking-btn.viking-ghost {
  background: transparent;
  color: var(--viking-text);
  min-width: auto;
  box-shadow: none;
  border-color: transparent;
}
.viking-btn.viking-ghost:hover:not(:disabled):not([aria-busy=true]) {
  background: var(--viking-component-hover-bg);
  color: var(--viking-text);
  border-color: transparent;
  box-shadow: none;
}
.viking-btn.viking-ghost:active:not(:disabled):not([aria-busy=true]) {
  transform: translateY(0) scale(var(--viking-state-active-scale));
  background: var(--viking-accent-soft);
  color: var(--viking-accent-strong);
}

.viking-btn.viking-subtle {
  background: transparent;
  color: var(--viking-text-muted);
  border-color: var(--viking-border-subtle);
  min-width: auto;
  box-shadow: none;
}
.viking-btn.viking-subtle:hover:not(:disabled):not([aria-busy=true]) {
  color: var(--viking-text);
  background: var(--viking-component-hover-bg);
  border-color: var(--viking-component-border-hover);
  box-shadow: none;
}
.viking-btn.viking-subtle:active:not(:disabled):not([aria-busy=true]) {
  transform: translateY(0) scale(var(--viking-state-active-scale));
  border-color: var(--viking-border);
  background: color-mix(in srgb, var(--viking-accent-soft) 70%, var(--viking-surface));
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--viking-black) 24%, transparent);
}

.viking-btn.viking-compact {
  min-width: 0;
}

.viking-btn.viking-full {
  width: 100%;
  min-width: 0;
}

.viking-btn-label {
  display: inline-flex;
  align-items: center;
  line-height: inherit;
}

.viking-btn-spinner {
  flex: 0 0 auto;
  display: inline-block;
  box-sizing: border-box;
  width: var(--viking-icon-size-sm, 18px);
  height: var(--viking-icon-size-sm, 18px);
  min-width: var(--viking-icon-size-sm, 18px);
  min-height: var(--viking-icon-size-sm, 18px);
  aspect-ratio: 1;
  border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
  border-top-color: currentColor;
  border-radius: var(--viking-radius-pill) !important;
  animation: viking-spin 0.8s linear infinite;
  margin-inline-end: var(--viking-space-0-5);
  background: transparent;
  box-shadow: none;
}

.viking-control {
  display: flex;
  align-items: center;
  gap: var(--viking-space-control-gap);
  min-height: var(--viking-control-height);
  padding: 0 var(--viking-control-padding-x);
  font-family: var(--viking-font-family);
  font-size: var(--viking-font-size);
  color: var(--viking-text);
  background: var(--viking-component-bg-inset);
  border: var(--viking-border-width) var(--viking-border-style) var(--viking-component-border);
  border-radius: var(--viking-component-radius);
  box-shadow: none;
  transition: var(--viking-transition-interactive);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.viking-control:hover:not(.viking-disabled):not(.viking-loading):not(:disabled) {
  background: var(--viking-component-bg-subtle);
  border-color: var(--viking-component-border-hover);
}
.viking-control:focus-within:not(.viking-loading) {
  outline: var(--viking-ring-width) solid var(--viking-ring);
  outline-offset: var(--viking-ring-offset);
  border-color: var(--viking-component-border-active);
  box-shadow: var(--viking-focus-shadow);
}

.viking-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--viking-space-container-gap);
  width: 100%;
  max-width: var(--viking-form-max-width);
}
@media (min-width: 600px) {
  .viking-form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .viking-form-row--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.viking-form-section-actions viking-button .viking-btn,
.viking-modal-footer viking-button .viking-btn,
.viking-sheet-footer viking-button .viking-btn,
.viking-empty-state-actions viking-button .viking-btn,
.viking-chart-empty-actions viking-button .viking-btn {
  min-width: 0;
}

.viking-input,
.viking-input-shell {
  display: flex;
  align-items: center;
  gap: var(--viking-space-control-gap);
  min-height: var(--viking-control-height);
  padding: 0 var(--viking-control-padding-x);
  font-family: var(--viking-font-family);
  font-size: var(--viking-font-size);
  color: var(--viking-text);
  background: var(--viking-component-bg-inset);
  border: var(--viking-border-width) var(--viking-border-style) var(--viking-component-border);
  border-radius: var(--viking-component-radius);
  box-shadow: none;
  transition: var(--viking-transition-interactive);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.viking-input:hover:not(.viking-disabled):not(.viking-loading):not(:disabled),
.viking-input-shell:hover:not(.viking-disabled):not(.viking-loading):not(:disabled) {
  background: var(--viking-component-bg-subtle);
  border-color: var(--viking-component-border-hover);
}
.viking-input:focus-within:not(.viking-loading),
.viking-input-shell:focus-within:not(.viking-loading) {
  outline: var(--viking-ring-width) solid var(--viking-ring);
  outline-offset: var(--viking-ring-offset);
  border-color: var(--viking-component-border-active);
  box-shadow: var(--viking-focus-shadow);
}

.viking-input input,
.viking-input-shell input,
input.viking-input-native {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none !important;
  background: transparent;
  color: var(--viking-text);
  font-family: var(--viking-font-family);
  font-size: var(--viking-font-size);
  padding: 0;
}
.viking-input input::placeholder,
.viking-input-shell input::placeholder,
input.viking-input-native::placeholder {
  color: var(--viking-text-subtle);
}
.viking-input input:disabled,
.viking-input-shell input:disabled,
input.viking-input-native:disabled {
  cursor: not-allowed;
}

.viking-input-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--viking-touch-target-comfort);
  min-height: var(--viking-touch-target-comfort);
  border: none;
  background: transparent;
  color: var(--viking-text-muted);
  cursor: pointer;
  padding: var(--viking-space-0-5);
  border-radius: var(--viking-component-radius);
  transition: var(--viking-transition-interactive);
  position: relative;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.viking-input-clear:hover {
  color: var(--viking-text);
  background: var(--viking-component-hover-bg);
}
.viking-input-clear:focus-visible {
  outline: var(--viking-ring-width) solid var(--viking-ring);
  outline-offset: var(--viking-ring-offset);
}
.viking-input-clear:active {
  transform: scale(var(--viking-state-active-scale));
}

.viking-input-kbd {
  font-family: var(--viking-font-family-mono);
  font-size: var(--viking-font-size-xs);
  color: var(--viking-text-muted);
  background: var(--viking-surface-alt);
  border: 1px solid var(--viking-border);
  border-radius: var(--viking-radius-xs);
  padding: 0 var(--viking-space-0-5);
  line-height: 1.4;
}

.viking-input-icon {
  color: var(--viking-text-muted);
  flex-shrink: 0;
}

.viking-input-shell.viking-disabled,
.viking-input-shell.viking-loading,
.viking-input.viking-disabled,
.viking-input.viking-loading {
  opacity: var(--viking-state-disabled-opacity);
}

.viking-input-shell.viking-loading,
.viking-input.viking-loading {
  cursor: wait;
}

/* ==========================================================================
   Viking-UI Chart System — clean minimal SVG analytics language
   Bounded 2:1 plots, soft grids, hover cursor, circular legend dots,
   tabular numerals, dark-mode first. Token-driven throughout.
   ========================================================================== */
.viking-chart,
viking-chart {
  container-type: inline-size;
  min-width: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}

/* Viewport — minimal chrome */
.viking-chart-viewport {
  position: relative;
  width: 100%;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: visible;
  padding: 0;
  box-sizing: border-box;
  border: none;
  background: transparent;
}

.viking-chart-fill .viking-chart-viewport {
  padding: 0;
}

/* Subtle dashed horizontal grid */
.viking-chart-grid {
  stroke: var(--viking-chart-grid-stroke, color-mix(in srgb, var(--viking-text-muted) 16%, transparent));
  stroke-width: var(--viking-chart-grid-width, 1);
  stroke-dasharray: var(--viking-chart-grid-dash, 4 4);
}

/* Thin axis + ticks */
.viking-chart-axis-line,
.viking-chart-tick {
  stroke: var(--viking-chart-axis-stroke, color-mix(in srgb, var(--viking-text-muted) 28%, transparent));
  stroke-width: var(--viking-chart-axis-width, 1);
}

.viking-chart-axis-y,
.viking-chart-axis-x {
  fill: var(--viking-chart-axis-color, var(--viking-text-muted));
  font-size: var(--viking-chart-axis-size-mobile, var(--viking-font-size-base));
  font-family: var(--viking-font-family);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums lining-nums;
}

.viking-chart-axis-x {
  font-weight: var(--viking-font-weight-regular);
}

.viking-chart-axis-y {
  font-weight: var(--viking-font-weight-medium);
}

/* Hover cursor (vertical guide) */
.viking-chart-cursor {
  stroke: var(--viking-chart-cursor-stroke, color-mix(in srgb, var(--viking-text) 32%, transparent));
  stroke-width: var(--viking-chart-cursor-width, 1);
  stroke-dasharray: var(--viking-chart-cursor-dash, 3 3);
  pointer-events: none;
}

.viking-chart-cursor-area {
  fill: color-mix(in srgb, var(--viking-text) 6%, transparent);
  stroke: none;
  pointer-events: none;
}

/* Data lines */
.viking-chart-line {
  fill: none;
  stroke-width: var(--viking-chart-line-width, 2);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.viking-chart-fill .viking-chart-line {
  stroke-width: var(--viking-chart-line-width-fill, 2);
}

/* Soft semi-transparent area fill */
.viking-chart-area {
  opacity: 1;
  stroke: none;
  fill-opacity: 1;
}

.viking-chart-area-stop-start,
.viking-chart-area-stop-end {
  stop-color: currentColor;
}

.viking-chart-area-stop-start {
  stop-opacity: var(--viking-chart-area-opacity-start);
}

.viking-chart-area-stop-end {
  stop-opacity: var(--viking-chart-area-opacity-end);
}

.viking-chart-sparkline .viking-chart-area {
  opacity: 0.14;
}

.viking-chart-sparkline .viking-chart-line {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Points */
.viking-chart-point {
  stroke: var(--viking-chart-point-stroke, var(--viking-surface));
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* Bars — soft rounded tops */
.viking-chart-bar {
  opacity: 0.92;
}

/* Donut */
.viking-chart-donut-slice {
  stroke: var(--viking-surface);
  stroke-width: 2;
}

.viking-chart-donut-hole {
  fill: var(--viking-surface);
}

.viking-chart-donut-total {
  fill: var(--viking-text);
  font-size: var(--viking-chart-text-size, var(--viking-font-size-base));
  font-weight: 700;
  font-family: var(--viking-font-family);
  font-variant-numeric: tabular-nums lining-nums;
}

.viking-chart-fill .viking-chart-donut-total {
  font-size: var(--viking-chart-text-size, var(--viking-font-size-base));
}

/* Legend — small circular indicators */
.viking-chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--viking-space-1) var(--viking-space-2);
  margin: var(--viking-chart-legend-margin, var(--viking-space-3) 0 0);
  font-size: var(--viking-chart-legend-size, var(--viking-font-size-base));
  color: var(--viking-text-muted);
  padding-inline: var(--viking-space-1);
}

.viking-chart-fill .viking-chart-legend {
  margin: var(--viking-chart-legend-margin-fill, var(--viking-space-4) 0 0);
}

.viking-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--viking-space-1);
  line-height: 1.2;
}

.viking-chart-swatch {
  width: var(--viking-chart-swatch-size, 8px);
  height: var(--viking-chart-swatch-size, 8px);
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
  border: none;
}

/* Tooltip — compact, opaque SaaS chrome */
.viking-chart-tooltip {
  position: absolute;
  z-index: var(--viking-z-tooltip, 40);
  pointer-events: none;
  display: none;
  flex-direction: column;
  gap: var(--viking-space-0-5);
  min-width: 80px;
  padding: var(--viking-space-0-5) var(--viking-space-1);
  background: var(--viking-chart-tooltip-bg, color-mix(in srgb, var(--viking-surface) 94%, transparent));
  border: 1px solid var(--viking-chart-tooltip-border, color-mix(in srgb, var(--viking-border) 65%, transparent));
  border-radius: var(--viking-chart-tooltip-radius, var(--viking-radius));
  box-shadow: var(--viking-shadow-sm);
  backdrop-filter: none;
  font-size: var(--viking-chart-tooltip-size, var(--viking-font-size-base));
  color: var(--viking-chart-tooltip-text, var(--viking-text));
  white-space: nowrap;
}

.viking-chart-tooltip.visible {
  display: flex;
}

.viking-chart-tooltip .tt-label {
  font-weight: var(--viking-font-weight-medium);
  color: var(--viking-text-muted);
  font-size: var(--viking-chart-tooltip-size, var(--viking-font-size-base));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.viking-chart-tooltip .tt-value {
  font-weight: var(--viking-font-weight-semibold);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum";
}

.viking-chart-tooltip .tt-series-value {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--viking-space-1);
  font-size: var(--viking-font-size-xs);
}

.viking-chart-tooltip .tt-series-value strong {
  font-weight: var(--viking-font-weight-semibold);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Zoom reset — restrained */
.viking-chart-zoom-reset {
  position: absolute;
  top: var(--viking-space-0-5);
  right: var(--viking-space-0-5);
  z-index: 2;
  padding: var(--viking-space-0-5) var(--viking-space-1);
  font-size: var(--viking-font-size-sm);
  font-family: var(--viking-font-family);
  color: var(--viking-text-muted);
  background: color-mix(in srgb, var(--viking-surface) 90%, transparent);
  border: 1px solid var(--viking-border);
  border-radius: var(--viking-radius-md);
  cursor: pointer;
  transition: var(--viking-transition-fast);
}

.viking-chart-zoom-reset:hover {
  background: var(--viking-surface);
  color: var(--viking-text);
}

.viking-chart-zoom-reset:focus-visible {
  outline: var(--viking-ring-width) solid var(--viking-ring);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .viking-chart-axis-y,
  .viking-chart-axis-x {
    font-size: max(var(--viking-chart-label-size, var(--viking-font-size-base)), var(--viking-chart-axis-size, var(--viking-font-size-base)));
  }
  .viking-chart-legend {
    gap: var(--viking-chart-legend-gap, var(--viking-space-2) var(--viking-space-3));
    font-size: var(--viking-chart-legend-size, var(--viking-font-size-xs));
  }
  .viking-chart-tooltip {
    min-width: 88px;
    padding: var(--viking-chart-tooltip-padding, var(--viking-space-1) var(--viking-space-1));
    font-size: var(--viking-chart-tooltip-size, var(--viking-font-size-xs));
  }
}
.viking-chart-sparkline {
  --viking-chart-line-width: 1.75;
  --viking-chart-area-opacity: 0.16;
}

.viking-chart-sparkline .viking-chart-legend {
  display: none;
}

/* Flux-like fixed plot containment: the viewport owns one bounded block size.
   Grid stretching can add panel breathing room but can never stretch the SVG. */
.viking-chart:not(.viking-chart-sparkline) {
  height: var(--viking-chart-plot-height);
  min-height: var(--viking-chart-plot-height);
  max-height: var(--viking-chart-plot-height);
}

.viking-chart:not(.viking-chart-sparkline) svg {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
}

.viking-chart-fill {
  flex: 0 0 auto;
}

/* Chart panels: a consistent grid-aligned analytics container. */
.viking-chart-panel,
viking-chart-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  container-type: inline-size;
  container-name: viking-chart-panel;
  min-width: 0;
  overflow: hidden;
  color: var(--viking-text);
  background: var(--viking-surface-recipe);
  border: var(--viking-border-width) var(--viking-border-style) var(--viking-border-container);
  border-radius: var(--viking-card-radius);
  box-shadow: var(--viking-shadow-xs), var(--viking-surface-highlight);
}

.viking-chart-panel-body,
.card-body-clean.viking-chart-panel-body {
  background: transparent;
  border: none;
  padding: var(--viking-space-content-gap);
}

@container viking-chart-panel (min-width: 37.5rem) {
  .viking-chart-panel-body,
  .card-body-clean.viking-chart-panel-body {
    padding: var(--viking-space-content-gap) var(--viking-space-container-gap) var(--viking-space-container-gap);
  }
}
.viking-chart-panel-body viking-chart,
.viking-chart-panel-body .viking-chart {
  width: 100%;
  min-height: 0;
  flex: 0 0 auto;
  border: none;
  box-shadow: none;
  background: transparent;
}

/* Empty / loading */
.viking-chart-empty-state {
  padding: var(--viking-chart-empty-padding, var(--viking-space-5) var(--viking-space-4));
  gap: var(--viking-chart-empty-gap, var(--viking-space-3));
}

.viking-chart-skeleton {
  width: 100%;
  height: 100%;
  min-height: var(--viking-chart-fill-min-height, clamp(16rem, 32vw, 18rem));
  border-radius: var(--viking-radius-md);
  background: linear-gradient(90deg, var(--viking-charcoal-700) 25%, var(--viking-charcoal-600) 50%, var(--viking-charcoal-700) 75%);
  background-size: 200% 100%;
  animation: viking-shimmer 1.4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .viking-chart-skeleton {
    animation: none;
    background: var(--viking-surface-alt);
  }
}
@keyframes viking-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* ==========================================================================
   Page mockup window — contained product chrome for docs / optional stages.
   Flat by default (forjd.co density). No overflow spill across page content.
   ========================================================================== */
.viking-page-mockup,
.hero-mockup {
  overflow: hidden;
  width: 100%;
  max-width: none;
  position: relative;
  z-index: 1;
}

.viking-page-mockup-window,
.mockup-window {
  background: var(--viking-charcoal-800, var(--viking-surface));
  border: 1px solid color-mix(in srgb, var(--viking-metallic-400, var(--viking-border)) 54%, transparent);
  border-radius: var(--viking-radius-lg, 12px);
  overflow: hidden;
  box-shadow: var(--viking-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.35));
  position: relative;
  width: 100%;
  min-width: 0;
  transform: none;
}
.viking-page-mockup-window::before,
.mockup-window::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--viking-metallic-500, var(--viking-border)) 28%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--viking-white, var(--viking-white-pure)) 7%, transparent);
  opacity: 0.75;
}

.viking-page-mockup-titlebar,
.mockup-titlebar {
  display: flex;
  align-items: center;
  gap: var(--viking-space-1);
  padding: var(--viking-space-2) var(--viking-space-2);
  background: var(--viking-charcoal-900, var(--viking-surface-alt));
  border-bottom: 1px solid color-mix(in srgb, var(--viking-metallic-400, var(--viking-border)) 42%, transparent);
}
.viking-page-mockup-titlebar .mockup-dot,
.viking-page-mockup-titlebar .viking-page-mockup-dot,
.mockup-titlebar .mockup-dot,
.mockup-titlebar .viking-page-mockup-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--viking-text-muted);
  opacity: 0.5;
}
.viking-page-mockup-titlebar .mockup-dot:first-child,
.viking-page-mockup-titlebar .viking-page-mockup-dot:first-child,
.mockup-titlebar .mockup-dot:first-child,
.mockup-titlebar .viking-page-mockup-dot:first-child {
  background: var(--viking-crimson-500, var(--viking-danger));
  opacity: 0.8;
}
.viking-page-mockup-titlebar .mockup-dot:nth-child(2),
.viking-page-mockup-titlebar .viking-page-mockup-dot:nth-child(2),
.mockup-titlebar .mockup-dot:nth-child(2),
.mockup-titlebar .viking-page-mockup-dot:nth-child(2) {
  background: var(--viking-gold-500, var(--viking-warning));
  opacity: 0.8;
}
.viking-page-mockup-titlebar .mockup-dot:nth-child(3),
.viking-page-mockup-titlebar .viking-page-mockup-dot:nth-child(3),
.mockup-titlebar .mockup-dot:nth-child(3),
.mockup-titlebar .viking-page-mockup-dot:nth-child(3) {
  background: var(--viking-accent-strong, var(--viking-accent));
  opacity: 0.8;
}
.viking-page-mockup-titlebar .mockup-title,
.viking-page-mockup-titlebar .viking-page-mockup-title,
.mockup-titlebar .mockup-title,
.mockup-titlebar .viking-page-mockup-title {
  margin-left: var(--viking-space-1);
  font-size: var(--viking-font-size-sm);
  font-family: var(--viking-font-family-mono, ui-monospace, monospace);
  color: var(--viking-electric-200, var(--viking-text-muted));
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.viking-page-mockup-body,
.mockup-body {
  display: flex;
  min-height: 280px;
}

.viking-page-mockup-sidebar,
.mockup-sidebar {
  width: 48px;
  padding: var(--viking-space-2) var(--viking-space-1);
  display: flex;
  flex-direction: column;
  gap: var(--viking-space-2);
  border-right: 1px solid color-mix(in srgb, var(--viking-metallic-400, var(--viking-border)) 36%, transparent);
  background: var(--viking-charcoal-900, var(--viking-surface-alt));
  flex-shrink: 0;
}
.viking-page-mockup-sidebar .mockup-nav-item,
.viking-page-mockup-sidebar .viking-page-mockup-nav-item,
.mockup-sidebar .mockup-nav-item,
.mockup-sidebar .viking-page-mockup-nav-item {
  height: 32px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--viking-text-muted) 20%, transparent);
}
.viking-page-mockup-sidebar .mockup-nav-item.active,
.viking-page-mockup-sidebar .viking-page-mockup-nav-item.active,
.mockup-sidebar .mockup-nav-item.active,
.mockup-sidebar .viking-page-mockup-nav-item.active {
  background: color-mix(in srgb, var(--viking-accent) 35%, transparent);
  box-shadow: inset 0 0 0 1px var(--viking-accent);
}

.viking-page-mockup-main,
.mockup-main {
  flex: 1;
  min-width: 0;
  padding: var(--viking-card-padding, var(--viking-space-3));
  display: flex;
  flex-direction: column;
  gap: var(--viking-space-3);
}

.viking-page-mockup-gauges,
.mockup-gauges {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--viking-space-2);
}
@media (min-width: 600px) {
  .viking-page-mockup-gauges,
  .mockup-gauges {
    grid-template-columns: repeat(3, 1fr);
  }
}

.viking-page-mockup-gauge,
.mockup-gauge {
  background: var(--viking-charcoal-700, var(--viking-surface-alt));
  border: 1px solid color-mix(in srgb, var(--viking-metallic-400, var(--viking-border)) 42%, transparent);
  border-radius: var(--viking-radius-lg);
  padding: var(--viking-card-padding-compact, var(--viking-space-2));
  text-align: center;
}
.viking-page-mockup-gauge.primary,
.mockup-gauge.primary {
  border-color: var(--viking-accent);
}
.viking-page-mockup-gauge .gauge-label,
.viking-page-mockup-gauge .viking-page-mockup-gauge-label,
.mockup-gauge .gauge-label,
.mockup-gauge .viking-page-mockup-gauge-label {
  display: block;
  font-size: var(--viking-font-size-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--viking-metallic-200, var(--viking-text-muted));
  margin-bottom: var(--viking-space-0-5);
}
.viking-page-mockup-gauge .gauge-val,
.viking-page-mockup-gauge .viking-page-mockup-gauge-val,
.mockup-gauge .gauge-val,
.mockup-gauge .viking-page-mockup-gauge-val {
  font-size: var(--viking-font-size-lead);
  font-weight: 800;
  color: var(--viking-white, var(--viking-text));
  font-variant-numeric: tabular-nums;
}

.viking-page-mockup-chart,
.mockup-chart {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: var(--viking-space-0-5);
  padding: var(--viking-card-padding-compact, var(--viking-space-2));
  background: var(--viking-charcoal-950, var(--viking-bg));
  border-radius: var(--viking-radius-lg);
  border: 1px solid color-mix(in srgb, var(--viking-metallic-400, var(--viking-border)) 36%, transparent);
  min-height: 100px;
}
.viking-page-mockup-chart .chart-bar,
.viking-page-mockup-chart .viking-page-mockup-bar,
.mockup-chart .chart-bar,
.mockup-chart .viking-page-mockup-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--viking-accent), var(--viking-accent-strong, var(--viking-accent)));
  border-radius: 4px 4px 0 0;
  opacity: 0.85;
  height: calc(var(--chart-bar-height, 50) * 1%);
  min-height: 8px;
}
.viking-page-mockup-chart .chart-bar[data-height="20"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="20"],
.mockup-chart .chart-bar[data-height="20"],
.mockup-chart .viking-page-mockup-bar[data-height="20"] {
  --chart-bar-height: 20;
}
.viking-page-mockup-chart .chart-bar[data-height="21"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="21"],
.mockup-chart .chart-bar[data-height="21"],
.mockup-chart .viking-page-mockup-bar[data-height="21"] {
  --chart-bar-height: 21;
}
.viking-page-mockup-chart .chart-bar[data-height="22"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="22"],
.mockup-chart .chart-bar[data-height="22"],
.mockup-chart .viking-page-mockup-bar[data-height="22"] {
  --chart-bar-height: 22;
}
.viking-page-mockup-chart .chart-bar[data-height="23"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="23"],
.mockup-chart .chart-bar[data-height="23"],
.mockup-chart .viking-page-mockup-bar[data-height="23"] {
  --chart-bar-height: 23;
}
.viking-page-mockup-chart .chart-bar[data-height="24"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="24"],
.mockup-chart .chart-bar[data-height="24"],
.mockup-chart .viking-page-mockup-bar[data-height="24"] {
  --chart-bar-height: 24;
}
.viking-page-mockup-chart .chart-bar[data-height="25"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="25"],
.mockup-chart .chart-bar[data-height="25"],
.mockup-chart .viking-page-mockup-bar[data-height="25"] {
  --chart-bar-height: 25;
}
.viking-page-mockup-chart .chart-bar[data-height="26"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="26"],
.mockup-chart .chart-bar[data-height="26"],
.mockup-chart .viking-page-mockup-bar[data-height="26"] {
  --chart-bar-height: 26;
}
.viking-page-mockup-chart .chart-bar[data-height="27"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="27"],
.mockup-chart .chart-bar[data-height="27"],
.mockup-chart .viking-page-mockup-bar[data-height="27"] {
  --chart-bar-height: 27;
}
.viking-page-mockup-chart .chart-bar[data-height="28"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="28"],
.mockup-chart .chart-bar[data-height="28"],
.mockup-chart .viking-page-mockup-bar[data-height="28"] {
  --chart-bar-height: 28;
}
.viking-page-mockup-chart .chart-bar[data-height="29"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="29"],
.mockup-chart .chart-bar[data-height="29"],
.mockup-chart .viking-page-mockup-bar[data-height="29"] {
  --chart-bar-height: 29;
}
.viking-page-mockup-chart .chart-bar[data-height="30"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="30"],
.mockup-chart .chart-bar[data-height="30"],
.mockup-chart .viking-page-mockup-bar[data-height="30"] {
  --chart-bar-height: 30;
}
.viking-page-mockup-chart .chart-bar[data-height="31"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="31"],
.mockup-chart .chart-bar[data-height="31"],
.mockup-chart .viking-page-mockup-bar[data-height="31"] {
  --chart-bar-height: 31;
}
.viking-page-mockup-chart .chart-bar[data-height="32"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="32"],
.mockup-chart .chart-bar[data-height="32"],
.mockup-chart .viking-page-mockup-bar[data-height="32"] {
  --chart-bar-height: 32;
}
.viking-page-mockup-chart .chart-bar[data-height="33"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="33"],
.mockup-chart .chart-bar[data-height="33"],
.mockup-chart .viking-page-mockup-bar[data-height="33"] {
  --chart-bar-height: 33;
}
.viking-page-mockup-chart .chart-bar[data-height="34"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="34"],
.mockup-chart .chart-bar[data-height="34"],
.mockup-chart .viking-page-mockup-bar[data-height="34"] {
  --chart-bar-height: 34;
}
.viking-page-mockup-chart .chart-bar[data-height="35"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="35"],
.mockup-chart .chart-bar[data-height="35"],
.mockup-chart .viking-page-mockup-bar[data-height="35"] {
  --chart-bar-height: 35;
}
.viking-page-mockup-chart .chart-bar[data-height="36"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="36"],
.mockup-chart .chart-bar[data-height="36"],
.mockup-chart .viking-page-mockup-bar[data-height="36"] {
  --chart-bar-height: 36;
}
.viking-page-mockup-chart .chart-bar[data-height="37"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="37"],
.mockup-chart .chart-bar[data-height="37"],
.mockup-chart .viking-page-mockup-bar[data-height="37"] {
  --chart-bar-height: 37;
}
.viking-page-mockup-chart .chart-bar[data-height="38"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="38"],
.mockup-chart .chart-bar[data-height="38"],
.mockup-chart .viking-page-mockup-bar[data-height="38"] {
  --chart-bar-height: 38;
}
.viking-page-mockup-chart .chart-bar[data-height="39"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="39"],
.mockup-chart .chart-bar[data-height="39"],
.mockup-chart .viking-page-mockup-bar[data-height="39"] {
  --chart-bar-height: 39;
}
.viking-page-mockup-chart .chart-bar[data-height="40"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="40"],
.mockup-chart .chart-bar[data-height="40"],
.mockup-chart .viking-page-mockup-bar[data-height="40"] {
  --chart-bar-height: 40;
}
.viking-page-mockup-chart .chart-bar[data-height="41"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="41"],
.mockup-chart .chart-bar[data-height="41"],
.mockup-chart .viking-page-mockup-bar[data-height="41"] {
  --chart-bar-height: 41;
}
.viking-page-mockup-chart .chart-bar[data-height="42"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="42"],
.mockup-chart .chart-bar[data-height="42"],
.mockup-chart .viking-page-mockup-bar[data-height="42"] {
  --chart-bar-height: 42;
}
.viking-page-mockup-chart .chart-bar[data-height="43"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="43"],
.mockup-chart .chart-bar[data-height="43"],
.mockup-chart .viking-page-mockup-bar[data-height="43"] {
  --chart-bar-height: 43;
}
.viking-page-mockup-chart .chart-bar[data-height="44"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="44"],
.mockup-chart .chart-bar[data-height="44"],
.mockup-chart .viking-page-mockup-bar[data-height="44"] {
  --chart-bar-height: 44;
}
.viking-page-mockup-chart .chart-bar[data-height="45"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="45"],
.mockup-chart .chart-bar[data-height="45"],
.mockup-chart .viking-page-mockup-bar[data-height="45"] {
  --chart-bar-height: 45;
}
.viking-page-mockup-chart .chart-bar[data-height="46"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="46"],
.mockup-chart .chart-bar[data-height="46"],
.mockup-chart .viking-page-mockup-bar[data-height="46"] {
  --chart-bar-height: 46;
}
.viking-page-mockup-chart .chart-bar[data-height="47"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="47"],
.mockup-chart .chart-bar[data-height="47"],
.mockup-chart .viking-page-mockup-bar[data-height="47"] {
  --chart-bar-height: 47;
}
.viking-page-mockup-chart .chart-bar[data-height="48"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="48"],
.mockup-chart .chart-bar[data-height="48"],
.mockup-chart .viking-page-mockup-bar[data-height="48"] {
  --chart-bar-height: 48;
}
.viking-page-mockup-chart .chart-bar[data-height="49"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="49"],
.mockup-chart .chart-bar[data-height="49"],
.mockup-chart .viking-page-mockup-bar[data-height="49"] {
  --chart-bar-height: 49;
}
.viking-page-mockup-chart .chart-bar[data-height="50"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="50"],
.mockup-chart .chart-bar[data-height="50"],
.mockup-chart .viking-page-mockup-bar[data-height="50"] {
  --chart-bar-height: 50;
}
.viking-page-mockup-chart .chart-bar[data-height="51"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="51"],
.mockup-chart .chart-bar[data-height="51"],
.mockup-chart .viking-page-mockup-bar[data-height="51"] {
  --chart-bar-height: 51;
}
.viking-page-mockup-chart .chart-bar[data-height="52"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="52"],
.mockup-chart .chart-bar[data-height="52"],
.mockup-chart .viking-page-mockup-bar[data-height="52"] {
  --chart-bar-height: 52;
}
.viking-page-mockup-chart .chart-bar[data-height="53"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="53"],
.mockup-chart .chart-bar[data-height="53"],
.mockup-chart .viking-page-mockup-bar[data-height="53"] {
  --chart-bar-height: 53;
}
.viking-page-mockup-chart .chart-bar[data-height="54"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="54"],
.mockup-chart .chart-bar[data-height="54"],
.mockup-chart .viking-page-mockup-bar[data-height="54"] {
  --chart-bar-height: 54;
}
.viking-page-mockup-chart .chart-bar[data-height="55"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="55"],
.mockup-chart .chart-bar[data-height="55"],
.mockup-chart .viking-page-mockup-bar[data-height="55"] {
  --chart-bar-height: 55;
}
.viking-page-mockup-chart .chart-bar[data-height="56"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="56"],
.mockup-chart .chart-bar[data-height="56"],
.mockup-chart .viking-page-mockup-bar[data-height="56"] {
  --chart-bar-height: 56;
}
.viking-page-mockup-chart .chart-bar[data-height="57"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="57"],
.mockup-chart .chart-bar[data-height="57"],
.mockup-chart .viking-page-mockup-bar[data-height="57"] {
  --chart-bar-height: 57;
}
.viking-page-mockup-chart .chart-bar[data-height="58"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="58"],
.mockup-chart .chart-bar[data-height="58"],
.mockup-chart .viking-page-mockup-bar[data-height="58"] {
  --chart-bar-height: 58;
}
.viking-page-mockup-chart .chart-bar[data-height="59"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="59"],
.mockup-chart .chart-bar[data-height="59"],
.mockup-chart .viking-page-mockup-bar[data-height="59"] {
  --chart-bar-height: 59;
}
.viking-page-mockup-chart .chart-bar[data-height="60"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="60"],
.mockup-chart .chart-bar[data-height="60"],
.mockup-chart .viking-page-mockup-bar[data-height="60"] {
  --chart-bar-height: 60;
}
.viking-page-mockup-chart .chart-bar[data-height="61"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="61"],
.mockup-chart .chart-bar[data-height="61"],
.mockup-chart .viking-page-mockup-bar[data-height="61"] {
  --chart-bar-height: 61;
}
.viking-page-mockup-chart .chart-bar[data-height="62"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="62"],
.mockup-chart .chart-bar[data-height="62"],
.mockup-chart .viking-page-mockup-bar[data-height="62"] {
  --chart-bar-height: 62;
}
.viking-page-mockup-chart .chart-bar[data-height="63"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="63"],
.mockup-chart .chart-bar[data-height="63"],
.mockup-chart .viking-page-mockup-bar[data-height="63"] {
  --chart-bar-height: 63;
}
.viking-page-mockup-chart .chart-bar[data-height="64"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="64"],
.mockup-chart .chart-bar[data-height="64"],
.mockup-chart .viking-page-mockup-bar[data-height="64"] {
  --chart-bar-height: 64;
}
.viking-page-mockup-chart .chart-bar[data-height="65"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="65"],
.mockup-chart .chart-bar[data-height="65"],
.mockup-chart .viking-page-mockup-bar[data-height="65"] {
  --chart-bar-height: 65;
}
.viking-page-mockup-chart .chart-bar[data-height="66"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="66"],
.mockup-chart .chart-bar[data-height="66"],
.mockup-chart .viking-page-mockup-bar[data-height="66"] {
  --chart-bar-height: 66;
}
.viking-page-mockup-chart .chart-bar[data-height="67"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="67"],
.mockup-chart .chart-bar[data-height="67"],
.mockup-chart .viking-page-mockup-bar[data-height="67"] {
  --chart-bar-height: 67;
}
.viking-page-mockup-chart .chart-bar[data-height="68"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="68"],
.mockup-chart .chart-bar[data-height="68"],
.mockup-chart .viking-page-mockup-bar[data-height="68"] {
  --chart-bar-height: 68;
}
.viking-page-mockup-chart .chart-bar[data-height="69"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="69"],
.mockup-chart .chart-bar[data-height="69"],
.mockup-chart .viking-page-mockup-bar[data-height="69"] {
  --chart-bar-height: 69;
}
.viking-page-mockup-chart .chart-bar[data-height="70"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="70"],
.mockup-chart .chart-bar[data-height="70"],
.mockup-chart .viking-page-mockup-bar[data-height="70"] {
  --chart-bar-height: 70;
}
.viking-page-mockup-chart .chart-bar[data-height="71"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="71"],
.mockup-chart .chart-bar[data-height="71"],
.mockup-chart .viking-page-mockup-bar[data-height="71"] {
  --chart-bar-height: 71;
}
.viking-page-mockup-chart .chart-bar[data-height="72"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="72"],
.mockup-chart .chart-bar[data-height="72"],
.mockup-chart .viking-page-mockup-bar[data-height="72"] {
  --chart-bar-height: 72;
}
.viking-page-mockup-chart .chart-bar[data-height="73"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="73"],
.mockup-chart .chart-bar[data-height="73"],
.mockup-chart .viking-page-mockup-bar[data-height="73"] {
  --chart-bar-height: 73;
}
.viking-page-mockup-chart .chart-bar[data-height="74"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="74"],
.mockup-chart .chart-bar[data-height="74"],
.mockup-chart .viking-page-mockup-bar[data-height="74"] {
  --chart-bar-height: 74;
}
.viking-page-mockup-chart .chart-bar[data-height="75"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="75"],
.mockup-chart .chart-bar[data-height="75"],
.mockup-chart .viking-page-mockup-bar[data-height="75"] {
  --chart-bar-height: 75;
}
.viking-page-mockup-chart .chart-bar[data-height="76"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="76"],
.mockup-chart .chart-bar[data-height="76"],
.mockup-chart .viking-page-mockup-bar[data-height="76"] {
  --chart-bar-height: 76;
}
.viking-page-mockup-chart .chart-bar[data-height="77"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="77"],
.mockup-chart .chart-bar[data-height="77"],
.mockup-chart .viking-page-mockup-bar[data-height="77"] {
  --chart-bar-height: 77;
}
.viking-page-mockup-chart .chart-bar[data-height="78"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="78"],
.mockup-chart .chart-bar[data-height="78"],
.mockup-chart .viking-page-mockup-bar[data-height="78"] {
  --chart-bar-height: 78;
}
.viking-page-mockup-chart .chart-bar[data-height="79"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="79"],
.mockup-chart .chart-bar[data-height="79"],
.mockup-chart .viking-page-mockup-bar[data-height="79"] {
  --chart-bar-height: 79;
}
.viking-page-mockup-chart .chart-bar[data-height="80"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="80"],
.mockup-chart .chart-bar[data-height="80"],
.mockup-chart .viking-page-mockup-bar[data-height="80"] {
  --chart-bar-height: 80;
}
.viking-page-mockup-chart .chart-bar[data-height="81"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="81"],
.mockup-chart .chart-bar[data-height="81"],
.mockup-chart .viking-page-mockup-bar[data-height="81"] {
  --chart-bar-height: 81;
}
.viking-page-mockup-chart .chart-bar[data-height="82"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="82"],
.mockup-chart .chart-bar[data-height="82"],
.mockup-chart .viking-page-mockup-bar[data-height="82"] {
  --chart-bar-height: 82;
}
.viking-page-mockup-chart .chart-bar[data-height="83"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="83"],
.mockup-chart .chart-bar[data-height="83"],
.mockup-chart .viking-page-mockup-bar[data-height="83"] {
  --chart-bar-height: 83;
}
.viking-page-mockup-chart .chart-bar[data-height="84"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="84"],
.mockup-chart .chart-bar[data-height="84"],
.mockup-chart .viking-page-mockup-bar[data-height="84"] {
  --chart-bar-height: 84;
}
.viking-page-mockup-chart .chart-bar[data-height="85"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="85"],
.mockup-chart .chart-bar[data-height="85"],
.mockup-chart .viking-page-mockup-bar[data-height="85"] {
  --chart-bar-height: 85;
}
.viking-page-mockup-chart .chart-bar[data-height="86"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="86"],
.mockup-chart .chart-bar[data-height="86"],
.mockup-chart .viking-page-mockup-bar[data-height="86"] {
  --chart-bar-height: 86;
}
.viking-page-mockup-chart .chart-bar[data-height="87"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="87"],
.mockup-chart .chart-bar[data-height="87"],
.mockup-chart .viking-page-mockup-bar[data-height="87"] {
  --chart-bar-height: 87;
}
.viking-page-mockup-chart .chart-bar[data-height="88"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="88"],
.mockup-chart .chart-bar[data-height="88"],
.mockup-chart .viking-page-mockup-bar[data-height="88"] {
  --chart-bar-height: 88;
}
.viking-page-mockup-chart .chart-bar[data-height="89"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="89"],
.mockup-chart .chart-bar[data-height="89"],
.mockup-chart .viking-page-mockup-bar[data-height="89"] {
  --chart-bar-height: 89;
}
.viking-page-mockup-chart .chart-bar[data-height="90"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="90"],
.mockup-chart .chart-bar[data-height="90"],
.mockup-chart .viking-page-mockup-bar[data-height="90"] {
  --chart-bar-height: 90;
}
.viking-page-mockup-chart .chart-bar[data-height="91"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="91"],
.mockup-chart .chart-bar[data-height="91"],
.mockup-chart .viking-page-mockup-bar[data-height="91"] {
  --chart-bar-height: 91;
}
.viking-page-mockup-chart .chart-bar[data-height="92"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="92"],
.mockup-chart .chart-bar[data-height="92"],
.mockup-chart .viking-page-mockup-bar[data-height="92"] {
  --chart-bar-height: 92;
}
.viking-page-mockup-chart .chart-bar[data-height="93"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="93"],
.mockup-chart .chart-bar[data-height="93"],
.mockup-chart .viking-page-mockup-bar[data-height="93"] {
  --chart-bar-height: 93;
}
.viking-page-mockup-chart .chart-bar[data-height="94"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="94"],
.mockup-chart .chart-bar[data-height="94"],
.mockup-chart .viking-page-mockup-bar[data-height="94"] {
  --chart-bar-height: 94;
}
.viking-page-mockup-chart .chart-bar[data-height="95"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="95"],
.mockup-chart .chart-bar[data-height="95"],
.mockup-chart .viking-page-mockup-bar[data-height="95"] {
  --chart-bar-height: 95;
}
.viking-page-mockup-chart .chart-bar[data-height="96"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="96"],
.mockup-chart .chart-bar[data-height="96"],
.mockup-chart .viking-page-mockup-bar[data-height="96"] {
  --chart-bar-height: 96;
}
.viking-page-mockup-chart .chart-bar[data-height="97"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="97"],
.mockup-chart .chart-bar[data-height="97"],
.mockup-chart .viking-page-mockup-bar[data-height="97"] {
  --chart-bar-height: 97;
}
.viking-page-mockup-chart .chart-bar[data-height="98"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="98"],
.mockup-chart .chart-bar[data-height="98"],
.mockup-chart .viking-page-mockup-bar[data-height="98"] {
  --chart-bar-height: 98;
}
.viking-page-mockup-chart .chart-bar[data-height="99"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="99"],
.mockup-chart .chart-bar[data-height="99"],
.mockup-chart .viking-page-mockup-bar[data-height="99"] {
  --chart-bar-height: 99;
}
.viking-page-mockup-chart .chart-bar[data-height="100"],
.viking-page-mockup-chart .viking-page-mockup-bar[data-height="100"],
.mockup-chart .chart-bar[data-height="100"],
.mockup-chart .viking-page-mockup-bar[data-height="100"] {
  --chart-bar-height: 100;
}

.viking-page-mockup-chart.is-line,
.mockup-chart.is-line {
  align-items: stretch;
  position: relative;
  overflow: hidden;
}
.viking-page-mockup-chart.is-line::before,
.mockup-chart.is-line::before {
  content: "";
  position: absolute;
  inset: 18% 8% 22% 8%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--viking-accent) 28%, transparent), transparent 70%);
  clip-path: polygon(0% 70%, 12% 55%, 24% 62%, 38% 40%, 52% 48%, 66% 28%, 80% 35%, 100% 18%, 100% 100%, 0% 100%);
  opacity: 0.85;
}
.viking-page-mockup-chart.is-line::after,
.mockup-chart.is-line::after {
  content: "";
  position: absolute;
  inset: 18% 8% 22% 8%;
  border-top: 2px solid var(--viking-accent);
  clip-path: polygon(0% 70%, 12% 55%, 24% 62%, 38% 40%, 52% 48%, 66% 28%, 80% 35%, 100% 18%, 100% 20%, 80% 37%, 66% 30%, 52% 50%, 38% 42%, 24% 64%, 12% 57%, 0% 72%);
  opacity: 0.95;
}
.viking-page-mockup-chart.is-line .chart-bar,
.viking-page-mockup-chart.is-line .viking-page-mockup-bar,
.mockup-chart.is-line .chart-bar,
.mockup-chart.is-line .viking-page-mockup-bar {
  display: none;
}

.viking-page-mockup-stats,
.mockup-stats-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--viking-space-2);
}
@media (min-width: 600px) {
  .viking-page-mockup-stats,
  .mockup-stats-row {
    grid-template-columns: repeat(3, 1fr);
  }
}
.viking-page-mockup-stats .mockup-stat,
.viking-page-mockup-stats .viking-page-mockup-stat,
.mockup-stats-row .mockup-stat,
.mockup-stats-row .viking-page-mockup-stat {
  background: var(--viking-charcoal-700, var(--viking-surface-alt));
  border: 1px solid color-mix(in srgb, var(--viking-metallic-400, var(--viking-border)) 42%, transparent);
  border-radius: var(--viking-radius-lg);
  padding: var(--viking-card-padding-compact, var(--viking-space-2));
}
.viking-page-mockup-stats .mockup-stat span,
.viking-page-mockup-stats .viking-page-mockup-stat span,
.mockup-stats-row .mockup-stat span,
.mockup-stats-row .viking-page-mockup-stat span {
  display: block;
  font-size: var(--viking-font-size-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--viking-text-muted);
  margin-bottom: var(--viking-space-0-5);
}
.viking-page-mockup-stats .mockup-stat strong,
.viking-page-mockup-stats .viking-page-mockup-stat strong,
.mockup-stats-row .mockup-stat strong,
.mockup-stats-row .viking-page-mockup-stat strong {
  font-size: var(--viking-font-size-base);
  font-weight: 700;
  color: var(--viking-text);
  font-variant-numeric: tabular-nums;
}

.page-mockup-stage {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
}

.viking-page-mockup--showcase {
  width: min(100%, 36rem);
  margin-inline: auto;
  padding: var(--viking-space-3) var(--viking-space-4);
}

@media (min-width: 600px) {
  .viking-page-mockup--showcase {
    padding: var(--viking-space-4) var(--viking-space-6);
  }
}
:root,
[data-density=default] {
  --viking-density-name: default;
}

[data-density=compact] {
  --viking-density-name: compact;
  --viking-control-height: 40px;
  --viking-control-padding-x: var(--viking-space-control-gap);
  --viking-page-stack-gap: var(--viking-space-container-gap);
  --viking-page-section-gap: var(--viking-space-section-gap);
  --viking-card-padding: var(--viking-space-content-gap);
  --viking-card-padding-compact: var(--viking-space-compact-gap);
  --viking-card-content-gap: var(--viking-space-compact-gap);
  --viking-panel-padding: var(--viking-space-container-gap);
  --viking-section-padding-y: var(--viking-space-section-gap);
}

[data-density=comfortable] {
  --viking-density-name: comfortable;
  --viking-control-height: 48px;
  --viking-control-padding-x: var(--viking-space-content-gap);
  --viking-page-stack-gap: var(--viking-space-page-gap);
  --viking-page-section-gap: var(--viking-space-10);
  --viking-card-padding: var(--viking-space-4);
  --viking-card-padding-compact: var(--viking-space-container-gap);
  --viking-card-content-gap: var(--viking-space-container-gap);
  --viking-panel-padding: var(--viking-space-4);
  --viking-section-padding-y: var(--viking-space-10);
}

/*!
 * SUITE COMPONENTS — Pass 2 owned primitive chrome (DEML + FORJD)
 * ----------------------------------------------------------------------------
 * Tokens: suite-tokens.css only. Zero external UI theme packages.
 * Selectors accept .suite-*, .viking-*, .fj-* — identical look everywhere.
 * Pattern: headless Angular/WC behavior + these classes.
 * Docs: SUITE_COMPONENTS.md · Law: docs/SUITE_UI_UNIFICATION.md
 *
 * Aesthetic: SpaceX restraint · Palantir density · Porsche precision ·
 *            Spartan/Flux composability · mobile-first touch ≥ --suite-touch
 *
 * Interaction language (all interactive primitives):
 *   · Motion: transition var(--suite-transition); lift/press via --suite-hover-lift / --suite-press-sink
 *   · Focus: :focus-visible → --suite-ring (+ width/offset); never mouse :focus rings
 *   · Disabled: opacity ~0.55 + cursor:not-allowed; no hover/active transforms
 *   · Spacing: control grid --suite-touch (mobile) → --suite-control-height (≥768px)
 *   · Reduced motion: kill-switch at file end (prefers-reduced-motion)
 */

/* =============================================================================
   Focus management + keyboard a11y (suite-wide contract — WCAG 2.2 AA)
   Ring: --suite-ring / width / offset. Prefer :focus-visible (keyboard), not mouse.
   ============================================================================= */

/* WCAG 2.4.11 Focus Not Obscured — sticky nav/footer clearance */
html {
  scroll-padding-top: var(--suite-space-7, 56px);
  scroll-padding-bottom: var(--suite-space-4);
}

:focus-visible {
  scroll-margin-top: var(--suite-space-7, 56px);
  scroll-margin-bottom: var(--suite-space-3);
}

/* Screen-reader only — keep in tab order with .suite-sr-only-focusable */
:is(.suite-sr-only, .viking-sr-only, .fj-sr-only, .sr-only, .visually-hidden) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: calc(-1 * var(--suite-space-px)) !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip link — first focusable in document; reveals on keyboard focus only */
:is(.suite-skip-link, .viking-skip-link, .fj-skip-link, .skip-link) {
  position: absolute;
  top: var(--suite-space-2);
  left: var(--suite-space-2);
  z-index: var(--suite-z-max);
  display: inline-flex;
  align-items: center;
  min-height: var(--suite-touch);
  padding: 0 var(--suite-space-2);
  border: 1px solid var(--suite-border-strong);
  border-radius: var(--suite-radius-control);
  background: var(--suite-surface-elevated);
  color: var(--suite-ink);
  font-family: var(--suite-font-sans);
  font-size: var(--suite-text-sm);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-wide);
  text-decoration: none;
  box-shadow: var(--suite-elevation-3);
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

:is(.suite-skip-link, .viking-skip-link, .fj-skip-link, .skip-link):focus,
:is(
  .suite-skip-link,
  .viking-skip-link,
  .fj-skip-link,
  .skip-link
):focus-visible {
  clip: auto;
  clip-path: none;
  width: auto;
  height: auto;
  overflow: visible;
  white-space: nowrap;
  outline: var(--suite-ring-width) solid var(--suite-ring);
  outline-offset: var(--suite-ring-offset);
}

/*
 * Landmark that receives skip-link / SPA route focus must not paint a page-sized
 * ring. Scripted .focus() often matches :focus-visible in Chromium — suppress both.
 * Interactive children keep their own :focus-visible rings.
 */
:is(#main-content, [data-suite-main], .suite-main):focus,
:is(#main-content, [data-suite-main], .suite-main):focus-visible {
  outline: none;
}

/* Shared ring token helper */
:is(.suite-focus-ring, .viking-focus-ring, .fj-focus-ring):focus-visible {
  outline: var(--suite-ring-width) solid var(--suite-ring);
  outline-offset: var(--suite-ring-offset);
}

/* Mouse focus: no outline; keyboard :focus-visible keeps the ring */
:is(
    .suite-btn,
    .viking-btn,
    .fj-btn,
    .suite-tab,
    .viking-tab,
    .fj-tab,
    .suite-nav-link,
    .viking-nav-link,
    .fj-nav-link,
    .suite-link,
    .viking-link,
    .fj-link,
    .suite-card,
    .viking-card,
    .fj-card
  ):focus:not(:focus-visible) {
  outline: none;
}

/* Interactive suite controls + ARIA widgets (visible keyboard focus — WCAG 2.4.7 / 2.4.11) */
:is(
  .suite-btn,
  .viking-btn,
  .fj-btn,
  .suite-input,
  .viking-input,
  .fj-input,
  .suite-textarea,
  .viking-textarea,
  .fj-textarea,
  .suite-select,
  .viking-select,
  .fj-select,
  .suite-checkbox,
  .viking-checkbox,
  .fj-checkbox,
  .suite-switch,
  .viking-switch,
  .fj-switch,
  .suite-radio,
  .viking-radio,
  .fj-radio,
  .suite-tab,
  .viking-tab,
  .fj-tab,
  .suite-nav-link,
  .viking-nav-link,
  .fj-nav-link,
  .suite-link,
  .viking-link,
  .fj-link,
  .suite-toast,
  .viking-toast,
  .fj-toast,
  .suite-callout,
  .viking-callout,
  .fj-callout
):focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="menuitemcheckbox"]:focus-visible,
[role="menuitemradio"]:focus-visible,
[role="option"]:focus-visible,
[role="switch"]:focus-visible,
[role="link"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="radio"]:focus-visible,
[role="combobox"]:focus-visible,
[role="listbox"]:focus-visible,
[role="slider"]:focus-visible,
[role="spinbutton"]:focus-visible,
[role="separator"][tabindex]:focus-visible,
[role="treeitem"]:focus-visible,
[role="gridcell"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: var(--suite-ring-width) solid var(--suite-ring);
  outline-offset: var(--suite-ring-offset);
}

/* Shells own the ring — suppress inner native outline, paint ring on the shell */
:is(.suite-input-shell, .viking-input-shell, .fj-input-shell)
  :is(input, textarea, select):focus,
:is(.suite-input-shell, .viking-input-shell, .fj-input-shell)
  :is(input, textarea, select):focus-visible {
  outline: none;
}

:is(
  .suite-input-shell,
  .viking-input-shell,
  .fj-input-shell,
  .suite-textarea-shell,
  .viking-textarea-shell,
  .fj-textarea-shell
):focus-within {
  outline: var(--suite-ring-width) solid var(--suite-ring);
  outline-offset: var(--suite-ring-offset);
}

/* Dialog / sheet: ensure keyboard users see focus inside modal layer */
:is(
  .suite-dialog,
  .viking-dialog,
  .fj-dialog,
  .suite-sheet,
  .viking-sheet,
  .fj-sheet
):focus,
:is(
  .suite-dialog,
  .viking-dialog,
  .fj-dialog,
  .suite-sheet,
  .viking-sheet,
  .fj-sheet
):focus-visible {
  outline: none;
}

:is(
    .suite-dialog,
    .viking-dialog,
    .fj-dialog,
    .suite-sheet,
    .viking-sheet,
    .fj-sheet
  )
  :focus-visible {
  outline: var(--suite-ring-width) solid var(--suite-ring);
  outline-offset: var(--suite-ring-offset);
}

@media (forced-colors: active) {
  :is(
    .suite-btn,
    .viking-btn,
    .fj-btn,
    .suite-tab,
    .viking-tab,
    .fj-tab,
    .suite-nav-link,
    .viking-nav-link,
    .fj-nav-link,
    .suite-link,
    .viking-link,
    .fj-link
  ):focus-visible,
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 3px solid CanvasText;
    outline-offset: var(--suite-ring-offset);
  }
}

/* =============================================================================
   Button
   ============================================================================= */
:is(.suite-btn, .viking-btn, .fj-btn) {
  /* Shared control grid — matches inputs / selects / tabs */
  --_control-h: var(--suite-touch);
  --_control-px: var(--suite-control-px-lg);
  --_control-fs: var(--suite-control-fs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--suite-space-1);
  height: var(--_control-h);
  min-height: var(--_control-h);
  min-width: var(--_control-h);
  padding: 0 var(--_control-px);
  border: 1px solid transparent;
  border-radius: var(--suite-radius-control);
  font-family: var(--suite-font-sans);
  font-size: var(--_control-fs);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-caps);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: var(--suite-transition);
  box-sizing: border-box;
  vertical-align: middle;
}

/* Dense desktop controls; keep 44px touch on small screens */
@media (min-width: 768px) {
  :is(.suite-btn, .viking-btn, .fj-btn):not([data-size="sm"]):not(
      [data-size="lg"]
    ):not(.viking-btn-sm):not(.viking-btn-lg):not(.suite-btn-sm):not(
      .suite-btn-lg
    ):not(.fj-btn-sm):not(.fj-btn-lg) {
    --_control-h: var(--suite-control-height);
  }
}

:is(.suite-btn, .viking-btn, .fj-btn)[data-size="sm"],
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-sm,
:is(.suite-btn, .viking-btn, .fj-btn).suite-btn-sm,
:is(.suite-btn, .viking-btn, .fj-btn).fj-btn-sm {
  /* Mobile: keep WCAG touch floor; dense height from tablet up */
  --_control-h: var(--suite-touch);
  --_control-px: var(--suite-control-px);
  --_control-fs: var(--suite-control-fs-sm);
}

@media (min-width: 768px) {
  :is(.suite-btn, .viking-btn, .fj-btn)[data-size="sm"],
  :is(.suite-btn, .viking-btn, .fj-btn).viking-btn-sm,
  :is(.suite-btn, .viking-btn, .fj-btn).suite-btn-sm,
  :is(.suite-btn, .viking-btn, .fj-btn).fj-btn-sm {
    --_control-h: var(--suite-control-height-sm);
  }
}

:is(.suite-btn, .viking-btn, .fj-btn)[data-size="lg"],
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-lg,
:is(.suite-btn, .viking-btn, .fj-btn).suite-btn-lg,
:is(.suite-btn, .viking-btn, .fj-btn).fj-btn-lg {
  --_control-h: var(--suite-control-height-lg);
  --_control-px: var(--suite-space-4);
  --_control-fs: var(--suite-text-base);
}

:is(.suite-btn, .viking-btn, .fj-btn)[data-square="true"],
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-square,
:is(.suite-btn, .viking-btn, .fj-btn).suite-btn-square {
  /* Keep icon toggles at the suite touch floor for switch / voice targeting */
  --_square: max(var(--_control-h), var(--suite-touch));
  width: var(--_square);
  min-width: var(--_square);
  height: var(--_square);
  min-height: var(--_square);
  padding-inline: 0;
}

:is(.suite-btn, .viking-btn, .fj-btn).viking-full,
:is(.suite-btn, .viking-btn, .fj-btn).suite-btn-full,
:is(.suite-btn, .viking-btn, .fj-btn).fj-full {
  width: 100%;
}

/* Shared lift / press — all variants */
:is(.suite-btn, .viking-btn, .fj-btn):hover:not(:disabled):not(
    [aria-disabled="true"]
  ) {
  transform: translateY(var(--suite-hover-lift));
}

:is(.suite-btn, .viking-btn, .fj-btn):active:not(:disabled):not(
    [aria-disabled="true"]
  ) {
  transform: translateY(var(--suite-press-sink));
}

:is(.suite-btn, .viking-btn, .fj-btn):disabled,
:is(.suite-btn, .viking-btn, .fj-btn)[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* Primary — electric command */
:is(.suite-btn, .viking-btn, .fj-btn)[data-variant="primary"],
:is(.suite-btn, .viking-btn, .fj-btn).suite-btn-primary,
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-primary,
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-filled,
:is(.suite-btn, .viking-btn, .fj-btn).fj-btn-primary {
  background: var(--suite-primary);
  color: var(--suite-ink-on-primary);
  border-color: var(--suite-primary);
  box-shadow: var(--suite-elevation-1);
}

:is(.suite-btn, .viking-btn, .fj-btn)[data-variant="primary"]:hover:not(
    :disabled
  ),
:is(.suite-btn, .viking-btn, .fj-btn).suite-btn-primary:hover:not(:disabled),
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-primary:hover:not(:disabled),
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-filled:hover:not(:disabled),
:is(.suite-btn, .viking-btn, .fj-btn).fj-btn-primary:hover:not(:disabled) {
  background: var(--suite-primary-hover);
  border-color: var(--suite-primary-hover);
  box-shadow: var(--suite-elevation-2);
}

:is(.suite-btn, .viking-btn, .fj-btn)[data-variant="primary"]:active:not(
    :disabled
  ),
:is(.suite-btn, .viking-btn, .fj-btn).suite-btn-primary:active:not(:disabled),
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-primary:active:not(:disabled),
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-filled:active:not(:disabled),
:is(.suite-btn, .viking-btn, .fj-btn).fj-btn-primary:active:not(:disabled) {
  background: var(--suite-primary-active);
  border-color: var(--suite-primary-active);
  box-shadow: var(--suite-elevation-inset);
}

/* Secondary — raised machine surface */
:is(.suite-btn, .viking-btn, .fj-btn)[data-variant="secondary"],
:is(.suite-btn, .viking-btn, .fj-btn).suite-btn-secondary,
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-secondary,
:is(.suite-btn, .viking-btn, .fj-btn).fj-btn-secondary {
  background: var(--suite-surface-2);
  color: var(--suite-ink);
  border-color: var(--suite-border-strong);
  box-shadow: var(--suite-elevation-1);
}

:is(.suite-btn, .viking-btn, .fj-btn)[data-variant="secondary"]:hover:not(
    :disabled
  ),
:is(.suite-btn, .viking-btn, .fj-btn).suite-btn-secondary:hover:not(:disabled),
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-secondary:hover:not(:disabled),
:is(.suite-btn, .viking-btn, .fj-btn).fj-btn-secondary:hover:not(:disabled) {
  border-color: var(--suite-primary);
  color: var(--suite-primary-strong);
  background: var(--suite-surface-elevated);
  box-shadow: var(--suite-elevation-2);
}

:is(.suite-btn, .viking-btn, .fj-btn)[data-variant="secondary"]:active:not(
    :disabled
  ),
:is(.suite-btn, .viking-btn, .fj-btn).suite-btn-secondary:active:not(:disabled),
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-secondary:active:not(
    :disabled
  ),
:is(.suite-btn, .viking-btn, .fj-btn).fj-btn-secondary:active:not(:disabled) {
  background: var(--suite-surface);
  box-shadow: var(--suite-elevation-inset);
}

/* Outline — severe geometry */
:is(.suite-btn, .viking-btn, .fj-btn)[data-variant="outline"],
:is(.suite-btn, .viking-btn, .fj-btn).suite-btn-outline,
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-outline,
:is(.suite-btn, .viking-btn, .fj-btn).fj-btn-outline {
  background: transparent;
  color: var(--suite-ink);
  border-color: var(--suite-border-strong);
  box-shadow: none;
}

:is(.suite-btn, .viking-btn, .fj-btn)[data-variant="outline"]:hover:not(
    :disabled
  ),
:is(.suite-btn, .viking-btn, .fj-btn).suite-btn-outline:hover:not(:disabled),
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-outline:hover:not(:disabled),
:is(.suite-btn, .viking-btn, .fj-btn).fj-btn-outline:hover:not(:disabled) {
  background: var(--suite-surface);
  border-color: var(--suite-primary-strong);
  color: var(--suite-primary-strong);
  box-shadow: var(--suite-elevation-1);
}

:is(.suite-btn, .viking-btn, .fj-btn)[data-variant="outline"]:active:not(
    :disabled
  ),
:is(.suite-btn, .viking-btn, .fj-btn).suite-btn-outline:active:not(:disabled),
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-outline:active:not(:disabled),
:is(.suite-btn, .viking-btn, .fj-btn).fj-btn-outline:active:not(:disabled) {
  background: var(--suite-surface-2);
  box-shadow: var(--suite-elevation-inset);
}

/* Ghost / subtle — quiet chrome */
:is(.suite-btn, .viking-btn, .fj-btn)[data-variant="ghost"],
:is(.suite-btn, .viking-btn, .fj-btn)[data-variant="subtle"],
:is(.suite-btn, .viking-btn, .fj-btn).suite-btn-ghost,
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-ghost,
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-subtle,
:is(.suite-btn, .viking-btn, .fj-btn).fj-btn-ghost {
  background: transparent;
  color: var(--suite-ink-muted);
  border-color: transparent;
  box-shadow: none;
}

:is(.suite-btn, .viking-btn, .fj-btn)[data-variant="ghost"]:hover:not(
    :disabled
  ),
:is(.suite-btn, .viking-btn, .fj-btn)[data-variant="subtle"]:hover:not(
    :disabled
  ),
:is(.suite-btn, .viking-btn, .fj-btn).suite-btn-ghost:hover:not(:disabled),
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-ghost:hover:not(:disabled),
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-subtle:hover:not(:disabled),
:is(.suite-btn, .viking-btn, .fj-btn).fj-btn-ghost:hover:not(:disabled) {
  background: var(--suite-surface-2);
  color: var(--suite-ink);
  box-shadow: var(--suite-elevation-1);
}

:is(.suite-btn, .viking-btn, .fj-btn)[data-variant="ghost"]:active:not(
    :disabled
  ),
:is(.suite-btn, .viking-btn, .fj-btn)[data-variant="subtle"]:active:not(
    :disabled
  ),
:is(.suite-btn, .viking-btn, .fj-btn).suite-btn-ghost:active:not(:disabled),
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-ghost:active:not(:disabled),
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-subtle:active:not(:disabled),
:is(.suite-btn, .viking-btn, .fj-btn).fj-btn-ghost:active:not(:disabled) {
  background: var(--suite-surface);
  box-shadow: var(--suite-elevation-inset);
}

/* Danger */
:is(.suite-btn, .viking-btn, .fj-btn)[data-variant="danger"],
:is(.suite-btn, .viking-btn, .fj-btn).suite-btn-danger,
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-danger,
:is(.suite-btn, .viking-btn, .fj-btn).fj-btn-danger {
  background: var(--suite-danger);
  color: var(--suite-ink-on-primary);
  border-color: var(--suite-danger);
  box-shadow: var(--suite-elevation-1);
}

:is(.suite-btn, .viking-btn, .fj-btn)[data-variant="danger"]:hover:not(
    :disabled
  ),
:is(.suite-btn, .viking-btn, .fj-btn).suite-btn-danger:hover:not(:disabled),
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-danger:hover:not(:disabled),
:is(.suite-btn, .viking-btn, .fj-btn).fj-btn-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--suite-danger) 88%, var(--suite-ink));
  border-color: color-mix(in srgb, var(--suite-danger) 88%, var(--suite-ink));
  box-shadow: var(--suite-elevation-2);
}

:is(.suite-btn, .viking-btn, .fj-btn)[data-variant="danger"]:active:not(
    :disabled
  ),
:is(.suite-btn, .viking-btn, .fj-btn).suite-btn-danger:active:not(:disabled),
:is(.suite-btn, .viking-btn, .fj-btn).viking-btn-danger:active:not(:disabled),
:is(.suite-btn, .viking-btn, .fj-btn).fj-btn-danger:active:not(:disabled) {
  box-shadow: var(--suite-elevation-inset);
}

/* Button spinner (loading) */
:is(.suite-btn-spinner, .viking-btn-spinner, .fj-btn-spinner) {
  width: 1rem;
  height: 1rem;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: var(--suite-radius-pill);
  animation: suite-spin var(--suite-duration) linear infinite;
  flex-shrink: 0;
}

:is(.suite-btn-kbd, .viking-btn-kbd, .fj-btn-kbd) {
  margin-inline-start: var(--suite-space-1);
  padding: 0 var(--suite-space-1);
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: var(--suite-radius-xs);
  font-family: var(--suite-font-mono);
  font-size: var(--suite-text-2xs);
  font-weight: var(--suite-weight-medium);
  opacity: 0.85;
}

/* Text link (inline, not button) */
:is(.suite-link, .viking-link, .fj-link) {
  color: var(--suite-primary);
  font-family: var(--suite-font-sans);
  font-weight: var(--suite-weight-medium);
  text-decoration: none;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition:
    var(--suite-transition-colors),
    background-size var(--suite-duration-fast) var(--suite-ease);
  cursor: pointer;
}

:is(.suite-link, .viking-link, .fj-link):hover,
:is(.suite-link, .viking-link, .fj-link):focus-visible {
  color: var(--suite-primary-hover);
  background-size: 100% 1px;
}

/* =============================================================================
   Theme toggle (light / dark / system preference)
   ============================================================================= */
:is(
  .suite-theme-toggle,
  .viking-theme-toggle,
  .fj-theme-toggle,
  .theme-toggle-btn
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--suite-touch);
  height: var(--suite-touch);
  min-width: var(--suite-touch);
  min-height: var(--suite-touch);
  padding: 0;
  border: 1px solid
    color-mix(in srgb, var(--suite-primary) 32%, var(--suite-border-strong));
  border-radius: var(--suite-radius-control);
  background: color-mix(in srgb, var(--suite-primary) 8%, var(--suite-surface));
  color: var(--suite-primary);
  box-shadow: var(--suite-elevation-1);
  cursor: pointer;
  transition: var(--suite-transition);
  -webkit-tap-highlight-color: transparent;
  font-family: var(--suite-font-sans);
}

@media (min-width: 768px) {
  :is(
    .suite-theme-toggle,
    .viking-theme-toggle,
    .fj-theme-toggle,
    .theme-toggle-btn
  ) {
    width: var(--suite-control-height);
    height: var(--suite-control-height);
    min-width: var(--suite-control-height);
    min-height: var(--suite-control-height);
  }
}

:is(
  .suite-theme-toggle,
  .viking-theme-toggle,
  .fj-theme-toggle,
  .theme-toggle-btn
):hover {
  border-color: var(--suite-primary-hover);
  background: color-mix(
    in srgb,
    var(--suite-primary) 14%,
    var(--suite-surface-2)
  );
  box-shadow: var(--suite-elevation-2);
  transform: translateY(var(--suite-hover-lift));
}

:is(
  .suite-theme-toggle,
  .viking-theme-toggle,
  .fj-theme-toggle,
  .theme-toggle-btn
):active {
  transform: translateY(var(--suite-press-sink));
  box-shadow: var(--suite-elevation-inset);
}

:is(
  .suite-theme-toggle,
  .viking-theme-toggle,
  .fj-theme-toggle,
  .theme-toggle-btn
):active {
  transform: translateY(var(--suite-press-sink));
}

:is(
  .suite-theme-toggle,
  .viking-theme-toggle,
  .fj-theme-toggle,
  .theme-toggle-btn
):focus-visible {
  outline: var(--suite-ring-width) solid var(--suite-ring);
  outline-offset: var(--suite-ring-offset);
}

:is(
    .suite-theme-toggle,
    .viking-theme-toggle,
    .fj-theme-toggle,
    .theme-toggle-btn
  )
  svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

/* =============================================================================
   Field + Input / Textarea / Select
   ============================================================================= */
:is(.suite-field, .viking-field, .fj-field) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-density-gap);
  font-family: var(--suite-font-sans);
  width: 100%;
}

:is(.suite-field-label-wrap, .viking-field-label-wrap, .fj-field-label-wrap) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-0-5);
}

:is(
  .suite-label,
  .viking-label,
  .fj-label,
  .suite-field-label,
  .viking-field-label,
  .fj-field-label
) {
  font-size: var(--suite-text-sm);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-wide);
  color: var(--suite-ink);
}

:is(
  .suite-field-description,
  .viking-field-description,
  .fj-field-description
) {
  margin: 0;
  font-size: var(--suite-text-sm);
  color: var(--suite-ink-muted);
  line-height: var(--suite-leading-normal);
}

:is(.suite-field-error, .viking-field-error, .fj-field-error) {
  margin: 0;
  font-size: var(--suite-text-sm);
  font-weight: var(--suite-weight-semibold);
  color: var(--suite-danger);
}

:is(
  .suite-input,
  .viking-input,
  .fj-input,
  .suite-textarea,
  .viking-textarea,
  .fj-textarea,
  .suite-select,
  .viking-select,
  .fj-select
) {
  /* Same control grid as .suite-btn */
  --_control-h: var(--suite-touch);
  --_control-px: var(--suite-control-px);
  --_control-fs: var(--suite-control-fs);
  display: block;
  width: 100%;
  height: var(--_control-h);
  min-height: var(--_control-h);
  box-sizing: border-box;
  margin: 0;
  padding: 0 var(--_control-px);
  border: 1px solid var(--suite-border-control, var(--suite-border-strong));
  border-radius: var(--suite-radius-control);
  background-color: var(--suite-surface-inset);
  color: var(--suite-ink);
  font-family: var(--suite-font-sans);
  font-size: var(--_control-fs);
  line-height: 1.25;
  /* Recessed well — tactile “machined” field */
  box-shadow: var(--suite-elevation-inset);
  transition: var(--suite-transition);
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 768px) {
  :is(
      .suite-input,
      .viking-input,
      .fj-input,
      .suite-select,
      .viking-select,
      .fj-select
    ):not([data-size="sm"]):not([data-size="lg"]) {
    --_control-h: var(--suite-control-height);
  }
}

:is(
  .suite-input,
  .viking-input,
  .fj-input,
  .suite-select,
  .viking-select,
  .fj-select
)[data-size="sm"] {
  --_control-h: var(--suite-touch);
  --_control-fs: var(--suite-control-fs-sm);
}

@media (min-width: 768px) {
  :is(
    .suite-input,
    .viking-input,
    .fj-input,
    .suite-select,
    .viking-select,
    .fj-select
  )[data-size="sm"] {
    --_control-h: var(--suite-control-height-sm);
  }
}

:is(
  .suite-input,
  .viking-input,
  .fj-input,
  .suite-select,
  .viking-select,
  .fj-select
)[data-size="lg"] {
  --_control-h: var(--suite-control-height-lg);
  --_control-px: var(--suite-control-px-lg);
}

:is(.suite-textarea, .viking-textarea, .fj-textarea) {
  height: auto;
  min-height: calc(var(--suite-touch) * 2.5);
  resize: vertical;
  padding-block: var(--suite-space-2);
  line-height: var(--suite-leading-normal);
}

:is(
  .suite-input,
  .viking-input,
  .fj-input,
  .suite-textarea,
  .viking-textarea,
  .fj-textarea,
  .suite-select,
  .viking-select,
  .fj-select
)::placeholder {
  color: var(--suite-ink-subtle);
}

:is(
    .suite-input,
    .viking-input,
    .fj-input,
    .suite-textarea,
    .viking-textarea,
    .fj-textarea,
    .suite-select,
    .viking-select,
    .fj-select
  ):hover:not(:disabled):not(:focus) {
  border-color: var(--suite-border-strong);
  background-color: var(--suite-surface-2);
  box-shadow: var(--suite-elevation-1);
}

:is(
  .suite-input,
  .viking-input,
  .fj-input,
  .suite-textarea,
  .viking-textarea,
  .fj-textarea,
  .suite-select,
  .viking-select,
  .fj-select
):focus {
  border-color: var(--suite-primary);
  background-color: var(--suite-surface);
  box-shadow: var(--suite-control-focus-ring), var(--suite-elevation-1);
}

:is(
  .suite-input,
  .viking-input,
  .fj-input,
  .suite-textarea,
  .viking-textarea,
  .fj-textarea,
  .suite-select,
  .viking-select,
  .fj-select
):focus-visible {
  outline: var(--suite-ring-width) solid var(--suite-ring);
  outline-offset: var(--suite-ring-offset);
}

:is(
  .suite-input,
  .viking-input,
  .fj-input,
  .suite-textarea,
  .viking-textarea,
  .fj-textarea,
  .suite-select,
  .viking-select,
  .fj-select
):disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

:is(
  .suite-input,
  .viking-input,
  .fj-input,
  .suite-textarea,
  .viking-textarea,
  .fj-textarea,
  .suite-select,
  .viking-select,
  .fj-select
)[aria-invalid="true"],
:is(.suite-field, .viking-field, .fj-field)[data-invalid="true"]
  :is(
    .suite-input,
    .viking-input,
    .fj-input,
    .suite-textarea,
    .viking-textarea,
    .fj-textarea,
    .suite-select,
    .viking-select,
    .fj-select
  ) {
  border-color: var(--suite-danger);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--suite-danger) 40%, transparent),
    var(--suite-elevation-inset);
}

:is(.suite-select, .viking-select, .fj-select) {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--suite-ink-muted) 50%),
    linear-gradient(135deg, var(--suite-ink-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: var(--suite-space-5);
  cursor: pointer;
}

/* =============================================================================
   Checkbox + Radio + Switch
   ============================================================================= */
:is(
  .suite-checkbox,
  .viking-checkbox,
  .fj-checkbox,
  .suite-radio,
  .viking-radio,
  .fj-radio
) {
  display: inline-flex;
  align-items: center;
  gap: var(--suite-space-2);
  min-height: var(--suite-touch);
  font-family: var(--suite-font-sans);
  font-size: var(--suite-control-fs-sm);
  color: var(--suite-ink);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: var(--suite-transition-colors);
}

:is(
    .suite-checkbox,
    .viking-checkbox,
    .fj-checkbox,
    .suite-radio,
    .viking-radio,
    .fj-radio
  ):hover:not(:has(input:disabled)) {
  color: var(--suite-ink);
}

:is(
    .suite-checkbox,
    .viking-checkbox,
    .fj-checkbox,
    .suite-radio,
    .viking-radio,
    .fj-radio
  )
  input {
  width: var(--suite-control-check);
  height: var(--suite-control-check);
  margin: 0;
  accent-color: var(--suite-primary);
  flex-shrink: 0;
  cursor: pointer;
  transition: var(--suite-transition-transform);
}

:is(
    .suite-checkbox,
    .viking-checkbox,
    .fj-checkbox,
    .suite-radio,
    .viking-radio,
    .fj-radio
  ):active:not(:has(input:disabled))
  input {
  transform: scale(0.92);
}

/* Focus lands on the native input — surface the suite ring on the control. */
:is(
    .suite-checkbox,
    .viking-checkbox,
    .fj-checkbox,
    .suite-radio,
    .viking-radio,
    .fj-radio
  )
  input:focus-visible {
  outline: var(--suite-ring-width) solid var(--suite-ring);
  outline-offset: var(--suite-ring-offset);
}

:is(
  .suite-checkbox,
  .viking-checkbox,
  .fj-checkbox,
  .suite-radio,
  .viking-radio,
  .fj-radio
):has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

:is(.suite-switch, .viking-switch, .fj-switch) {
  --_track-w: 2.75rem;
  --_track-h: 1.5rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--suite-space-2);
  min-height: var(--suite-touch);
  cursor: pointer;
  font-family: var(--suite-font-sans);
  font-size: var(--suite-text-sm);
  color: var(--suite-ink);
  user-select: none;
}

:is(.suite-switch, .viking-switch, .fj-switch) input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

:is(.suite-switch-track, .viking-switch-track, .fj-switch-track) {
  width: var(--_track-w);
  height: var(--_track-h);
  border-radius: var(--suite-radius-pill);
  background: var(--suite-surface-inset);
  border: 1px solid var(--suite-border-strong);
  position: relative;
  transition: var(--suite-transition);
  flex-shrink: 0;
  box-shadow: var(--suite-elevation-inset);
}

:is(.suite-switch, .viking-switch, .fj-switch):hover
  :is(.suite-switch-track, .viking-switch-track, .fj-switch-track) {
  border-color: var(--suite-border-strong);
  background: var(--suite-surface-2);
  box-shadow: var(--suite-elevation-1);
}

:is(.suite-switch, .viking-switch, .fj-switch):active
  :is(.suite-switch-track, .viking-switch-track, .fj-switch-track) {
  transform: scale(0.96);
  box-shadow: var(--suite-elevation-inset);
}

:is(.suite-switch-track, .viking-switch-track, .fj-switch-track)::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(var(--_track-h) - 6px);
  height: calc(var(--_track-h) - 6px);
  border-radius: var(--suite-radius-pill);
  background: var(--suite-ink);
  transition: var(--suite-transition);
  box-shadow: var(--suite-shadow-xs);
}

:is(.suite-switch, .viking-switch, .fj-switch)
  input:checked
  + :is(.suite-switch-track, .viking-switch-track, .fj-switch-track) {
  background: var(--suite-primary);
  border-color: var(--suite-primary);
}

:is(.suite-switch, .viking-switch, .fj-switch)
  input:checked
  + :is(.suite-switch-track, .viking-switch-track, .fj-switch-track)::after {
  left: calc(100% - (var(--_track-h) - 4px));
  background: var(--suite-ink-on-primary);
}

:is(.suite-switch, .viking-switch, .fj-switch)
  input:focus-visible
  + :is(.suite-switch-track, .viking-switch-track, .fj-switch-track) {
  outline: var(--suite-ring-width) solid var(--suite-ring);
  outline-offset: var(--suite-ring-offset);
}

:is(.suite-switch, .viking-switch, .fj-switch):has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

/* =============================================================================
   Card / Badge / Separator / Avatar
   ============================================================================= */
:is(.suite-card, .viking-card, .fj-card) {
  display: grid;
  gap: var(--suite-space-2);
  width: 100%;
  box-sizing: border-box;
  background: var(--suite-surface);
  border: 1px solid var(--suite-border);
  border-radius: var(--suite-radius-surface);
  padding: var(--suite-space-3);
  color: var(--suite-ink);
  /* Resting: border + top hairline only — drop shadow reserved for raised/hover */
  box-shadow: var(--suite-elevation-1);
  transition: var(--suite-transition);
}

:is(.suite-card, .viking-card, .fj-card)[data-density="compact"] {
  gap: var(--suite-density-gap);
  padding: var(--suite-space-2);
}

:is(.suite-card, .viking-card, .fj-card)[data-interactive="true"] {
  cursor: pointer;
}

:is(.suite-card, .viking-card, .fj-card)[data-interactive="true"]:hover {
  border-color: var(--suite-border-strong);
  background: var(--suite-surface-elevated);
  box-shadow: var(--suite-elevation-hover);
  transform: translateY(var(--suite-hover-lift));
}

:is(.suite-card, .viking-card, .fj-card)[data-interactive="true"]:active {
  transform: translateY(0);
  box-shadow: var(--suite-elevation-1);
}

:is(
    .suite-card,
    .viking-card,
    .fj-card
  )[data-interactive="true"]:focus-visible {
  outline: var(--suite-ring-width) solid var(--suite-ring);
  outline-offset: var(--suite-ring-offset);
}

:is(.suite-card, .viking-card, .fj-card)[data-elevated="true"] {
  background: var(--suite-surface-elevated);
  border-color: var(--suite-border-strong);
  box-shadow: var(--suite-elevation-3);
}

/* Panel titles — live in components (not landing-only) so Storybook + adapters match */
:is(.suite-panel-title, .viking-panel-title, .fj-panel-title) {
  margin: 0 0 var(--suite-space-2);
  font-family: var(--suite-font-sans);
  font-size: var(--suite-text-lg);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-tight);
  line-height: var(--suite-leading-snug);
  color: var(--suite-ink);
}

:is(.suite-badge, .viking-badge, .fj-badge) {
  display: inline-flex;
  align-items: center;
  gap: var(--suite-space-0-5);
  min-height: 1.5rem;
  padding: 0 var(--suite-space-1);
  border-radius: var(--suite-radius-pill);
  border: 1px solid var(--suite-border);
  background: var(--suite-surface-2);
  color: var(--suite-ink);
  font-family: var(--suite-font-sans);
  font-size: var(--suite-text-xs);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-wide);
  white-space: nowrap;
  line-height: 1;
  box-sizing: border-box;
}

:is(.suite-badge, .viking-badge, .fj-badge)[data-tone="accent"],
:is(.suite-badge, .viking-badge, .fj-badge).suite-badge-accent,
:is(.suite-badge, .viking-badge, .fj-badge).viking-badge-accent,
:is(.suite-badge, .viking-badge, .fj-badge).fj-badge-accent {
  background: var(--suite-primary-soft);
  border-color: color-mix(in srgb, var(--suite-primary) 32%, transparent);
  color: var(--suite-primary-strong);
}

:is(.suite-badge, .viking-badge, .fj-badge)[data-tone="success"],
:is(.suite-badge, .viking-badge, .fj-badge).suite-badge-success,
:is(.suite-badge, .viking-badge, .fj-badge).viking-badge-success,
:is(.suite-badge, .viking-badge, .fj-badge).fj-badge-success {
  background: var(--suite-success-soft);
  border-color: color-mix(in srgb, var(--suite-success) 32%, transparent);
  color: var(--suite-success-text);
}

:is(.suite-badge, .viking-badge, .fj-badge)[data-tone="warning"],
:is(.suite-badge, .viking-badge, .fj-badge).suite-badge-warning,
:is(.suite-badge, .viking-badge, .fj-badge).viking-badge-warning,
:is(.suite-badge, .viking-badge, .fj-badge).fj-badge-warning {
  background: var(--suite-warning-soft);
  border-color: color-mix(in srgb, var(--suite-warning) 32%, transparent);
  color: var(--suite-warning-text);
}

:is(.suite-badge, .viking-badge, .fj-badge)[data-tone="danger"],
:is(.suite-badge, .viking-badge, .fj-badge).suite-badge-danger,
:is(.suite-badge, .viking-badge, .fj-badge).viking-badge-danger,
:is(.suite-badge, .viking-badge, .fj-badge).fj-badge-danger {
  background: var(--suite-danger-soft);
  border-color: color-mix(in srgb, var(--suite-danger) 32%, transparent);
  color: var(--suite-danger-text);
}

:is(.suite-badge, .viking-badge, .fj-badge)[data-tone="gold"],
:is(.suite-badge, .viking-badge, .fj-badge).suite-badge-gold {
  background: var(--suite-gold-soft);
  border-color: color-mix(in srgb, var(--suite-gold) 36%, transparent);
  color: var(--suite-gold-text);
}

:is(.suite-separator, .viking-separator, .fj-separator) {
  border: 0;
  border-top: 1px solid var(--suite-border);
  margin: var(--suite-space-3) 0;
  display: block;
  width: 100%;
  background: transparent;
}

:is(
  .suite-separator,
  .viking-separator,
  .fj-separator
)[data-orientation="vertical"],
:is(
  .suite-separator,
  .viking-separator,
  .fj-separator
)[aria-orientation="vertical"] {
  border-top: 0;
  border-left: 1px solid var(--suite-border);
  width: 1px;
  height: auto;
  min-height: 1em;
  align-self: stretch;
  margin: 0 var(--suite-space-2);
}

:is(.suite-avatar, .viking-avatar, .fj-avatar) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--suite-space-5);
  height: var(--suite-space-5);
  border-radius: var(--suite-radius-pill);
  background: var(--suite-surface-2);
  border: 1px solid var(--suite-border);
  color: var(--suite-ink-muted);
  font-family: var(--suite-font-mono);
  font-size: var(--suite-text-xs);
  font-weight: var(--suite-weight-semibold);
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
}

:is(.suite-avatar, .viking-avatar, .fj-avatar)[data-size="sm"] {
  width: var(--suite-space-4);
  height: var(--suite-space-4);
  font-size: var(--suite-text-2xs);
}

:is(.suite-avatar, .viking-avatar, .fj-avatar)[data-size="lg"] {
  width: var(--suite-space-6);
  height: var(--suite-space-6);
  font-size: var(--suite-text-sm);
}

:is(.suite-avatar, .viking-avatar, .fj-avatar) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Markup should set width/height + decoding="async"; lazy unless above-fold */
}

/* =============================================================================
   Tabs / Nav
   ============================================================================= */
:is(.suite-tabs, .viking-tabs, .fj-tabs) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-3);
  width: 100%;
}

:is(.suite-tabs-list, .viking-tabs-list, .fj-tabs-list) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--suite-space-0-5);
  padding: var(--suite-space-0-5);
  border: 1px solid var(--suite-border);
  border-radius: var(--suite-radius-surface);
  background: var(--suite-surface-inset);
  /* Recessed well — selected tab reads as raised within */
  box-shadow: var(--suite-elevation-inset);
}

:is(.suite-tab, .viking-tab, .fj-tab) {
  --_control-h: var(--suite-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--_control-h);
  min-height: var(--_control-h);
  padding: 0 var(--suite-control-px);
  border: 1px solid transparent;
  border-radius: var(--suite-radius-control);
  background: transparent;
  color: var(--suite-ink-muted);
  font-family: var(--suite-font-sans);
  font-size: var(--suite-control-fs-sm);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-wide);
  line-height: 1;
  cursor: pointer;
  transition: var(--suite-transition);
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 768px) {
  :is(.suite-tab, .viking-tab, .fj-tab) {
    --_control-h: var(--suite-control-height);
  }
}

:is(.suite-tab, .viking-tab, .fj-tab):hover:not([aria-selected="true"]):not(
    [data-active="true"]
  ):not(:disabled):not([aria-disabled="true"]) {
  color: var(--suite-ink);
  background: var(--suite-bg-subtle);
  box-shadow: var(--suite-elevation-1);
  transform: translateY(var(--suite-hover-lift));
}

:is(.suite-tab, .viking-tab, .fj-tab):active:not([aria-selected="true"]):not(
    :disabled
  ):not([aria-disabled="true"]) {
  transform: translateY(var(--suite-press-sink));
}

:is(.suite-tab, .viking-tab, .fj-tab)[aria-selected="true"],
:is(.suite-tab, .viking-tab, .fj-tab)[data-active="true"] {
  background: var(--suite-surface-elevated);
  color: var(--suite-ink);
  border-color: var(--suite-border-strong);
  box-shadow: var(--suite-elevation-1);
}

:is(.suite-tab, .viking-tab, .fj-tab):disabled,
:is(.suite-tab, .viking-tab, .fj-tab)[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

:is(.suite-tab, .viking-tab, .fj-tab):focus-visible {
  outline: var(--suite-ring-width) solid var(--suite-ring);
  outline-offset: var(--suite-ring-offset);
}

:is(.suite-tab-panel, .viking-tab-panel, .fj-tab-panel)[hidden] {
  display: none;
}

:is(.suite-nav, .viking-nav, .fj-nav),
:is(.suite-nav-inner, .viking-nav-inner, .fj-nav-inner) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--suite-space-1);
  align-items: center;
}

:is(.suite-nav-link, .viking-nav-link, .fj-nav-link) {
  --_control-h: var(--suite-touch);
  display: inline-flex;
  align-items: center;
  height: var(--_control-h);
  min-height: var(--_control-h);
  padding: 0 var(--suite-control-px);
  border-radius: var(--suite-radius-control);
  color: var(--suite-ink-muted);
  font-family: var(--suite-font-mono);
  font-size: var(--suite-control-fs-sm);
  letter-spacing: var(--suite-tracking-caps);
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: var(--suite-transition);
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 768px) {
  :is(.suite-nav-link, .viking-nav-link, .fj-nav-link) {
    --_control-h: var(--suite-control-height);
  }
}

:is(.suite-nav-link, .viking-nav-link, .fj-nav-link):hover,
:is(.suite-nav-link, .viking-nav-link, .fj-nav-link):focus-visible {
  color: var(--suite-primary);
  background: var(--suite-primary-soft);
  transform: translateY(var(--suite-hover-lift));
}

:is(.suite-nav-link, .viking-nav-link, .fj-nav-link):active {
  transform: translateY(var(--suite-press-sink));
}

:is(.suite-nav-link, .viking-nav-link, .fj-nav-link)[aria-current="page"],
:is(.suite-nav-link, .viking-nav-link, .fj-nav-link)[data-active="true"] {
  color: var(--suite-primary);
  background: var(--suite-primary-soft);
  box-shadow: var(--suite-elevation-1);
}

/* =============================================================================
   Dialog / Sheet
   ============================================================================= */
:is(
  .suite-dialog,
  .viking-dialog,
  .fj-dialog,
  .suite-sheet,
  .viking-sheet,
  .fj-sheet
) {
  border: 1px solid var(--suite-border-strong);
  border-radius: var(--suite-radius-surface);
  background: var(--suite-glass-strong);
  color: var(--suite-ink);
  box-shadow: var(--suite-elevation-4);
  -webkit-backdrop-filter: blur(var(--suite-glass-blur));
  backdrop-filter: blur(var(--suite-glass-blur));
  padding: 0;
  max-width: min(32rem, calc(100vw - var(--suite-space-4)));
  width: 100%;
  font-family: var(--suite-font-sans);
}

:is(
  .suite-dialog,
  .viking-dialog,
  .fj-dialog,
  .suite-sheet,
  .viking-sheet,
  .fj-sheet
)::backdrop {
  background: var(--suite-overlay);
  -webkit-backdrop-filter: blur(var(--suite-glass-blur));
  backdrop-filter: blur(var(--suite-glass-blur));
}

:is(
  .suite-dialog-header,
  .viking-dialog-header,
  .fj-dialog-header,
  .suite-sheet-header,
  .viking-sheet-header,
  .fj-sheet-header
) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--suite-space-2);
  padding: var(--suite-space-3);
  border-bottom: 1px solid var(--suite-border);
}

:is(
  .suite-dialog-title,
  .viking-dialog-title,
  .fj-dialog-title,
  .suite-sheet-title,
  .viking-sheet-title,
  .fj-sheet-title
) {
  margin: 0;
  font-size: var(--suite-text-lg);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-tight);
  line-height: var(--suite-leading-tight);
}

:is(
  .suite-dialog-body,
  .viking-dialog-body,
  .fj-dialog-body,
  .suite-sheet-body,
  .viking-sheet-body,
  .fj-sheet-body
) {
  padding: var(--suite-space-3);
  line-height: var(--suite-leading-normal);
  color: var(--suite-ink);
}

:is(
  .suite-dialog-footer,
  .viking-dialog-footer,
  .fj-dialog-footer,
  .suite-sheet-footer,
  .viking-sheet-footer,
  .fj-sheet-footer
) {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--suite-space-2);
  padding: var(--suite-space-3);
  border-top: 1px solid var(--suite-border);
}

/* =============================================================================
   Search / command palette (⌘K · /)
   ============================================================================= */
/* Closed <dialog> must stay display:none — author display:flex overrides UA rules. */
:is(
  .suite-search-palette-backdrop,
  .viking-search-palette-backdrop,
  .fj-search-palette-backdrop
):not([open]) {
  display: none;
}

:is(
  .suite-search-palette-backdrop,
  .viking-search-palette-backdrop,
  .fj-search-palette-backdrop
)[open] {
  position: fixed;
  inset: 0;
  z-index: var(--suite-z-overlay, 10001);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh var(--suite-space-2) var(--suite-space-2);
  border: none;
  max-width: none;
  width: 100%;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

:is(
  .suite-search-palette-backdrop,
  .viking-search-palette-backdrop,
  .fj-search-palette-backdrop
)::backdrop {
  background: var(--suite-overlay);
  -webkit-backdrop-filter: blur(var(--suite-glass-blur));
  backdrop-filter: blur(var(--suite-glass-blur));
}

:is(.suite-search-palette, .viking-search-palette, .fj-search-palette) {
  display: flex;
  flex-direction: column;
  width: min(100%, 37.5rem);
  max-width: min(37.5rem, calc(100vw - var(--suite-space-4)));
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--suite-border-strong);
  border-radius: var(--suite-radius-surface);
  background: var(--suite-glass-strong);
  color: var(--suite-ink);
  box-shadow: var(--suite-elevation-4);
  -webkit-backdrop-filter: blur(var(--suite-glass-blur));
  backdrop-filter: blur(var(--suite-glass-blur));
  font-family: var(--suite-font-sans);
  position: relative;
  isolation: isolate;
}

:is(.suite-search-palette, .viking-search-palette, .fj-search-palette)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--suite-border-strong) 55%, transparent),
    transparent
  );
  pointer-events: none;
  z-index: 1;
}

:is(
  .suite-search-palette-header,
  .viking-search-palette-header,
  .fj-search-palette-header
) {
  display: flex;
  align-items: center;
  gap: var(--suite-space-1);
  padding: var(--suite-space-2);
  border-bottom: 1px solid var(--suite-border);
  background: color-mix(
    in srgb,
    var(--suite-bg) 26%,
    var(--suite-surface-elevated)
  );
}

:is(
  .suite-search-palette-header,
  .viking-search-palette-header,
  .fj-search-palette-header
):focus-within {
  border-bottom-color: var(--suite-accent);
  box-shadow: inset 0 -2px 0
    color-mix(in srgb, var(--suite-accent) 28%, transparent);
}

:is(
  .suite-search-palette-input,
  .viking-search-palette-input,
  .fj-search-palette-input
) {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--suite-ink);
  font: inherit;
  font-size: var(--suite-text-md);
  box-shadow: none;
  padding: var(--suite-space-1) 0;
  min-height: var(--suite-touch, 44px);
}

:is(
  .suite-search-palette-input,
  .viking-search-palette-input,
  .fj-search-palette-input
)::placeholder {
  color: var(--suite-ink-muted);
}

:is(
  .suite-search-palette-close,
  .viking-search-palette-close,
  .fj-search-palette-close
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--suite-touch, 44px);
  min-height: var(--suite-touch, 44px);
  border: none;
  border-radius: var(--suite-radius-control);
  background: transparent;
  color: var(--suite-ink-muted);
  cursor: pointer;
  font: inherit;
}

:is(
  .suite-search-palette-close,
  .viking-search-palette-close,
  .fj-search-palette-close
):hover {
  color: var(--suite-ink);
  background: color-mix(in srgb, var(--suite-accent) 12%, transparent);
}

:is(
  .suite-search-palette-close,
  .viking-search-palette-close,
  .fj-search-palette-close
):focus-visible {
  outline: var(--suite-ring-width, 2px) solid
    var(--suite-ring, var(--suite-accent));
  outline-offset: var(--suite-ring-offset, 2px);
}

:is(
  .suite-search-palette-body,
  .viking-search-palette-body,
  .fj-search-palette-body
) {
  max-height: 50vh;
  overflow-y: auto;
  padding: var(--suite-space-2);
}

:is(
  .suite-search-palette-footer,
  .viking-search-palette-footer,
  .fj-search-palette-footer
) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--suite-space-1);
  padding: var(--suite-space-1) var(--suite-space-2);
  border-top: 1px solid var(--suite-border);
  font-size: var(--suite-text-xs);
  color: var(--suite-ink-muted);
}

:is(.suite-kbd, .viking-kbd, .fj-kbd) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: var(--suite-space-0-5) var(--suite-space-1);
  border: 1px solid var(--suite-border);
  border-radius: calc(var(--suite-radius-control) / 2);
  background: var(--suite-surface);
  font-family: inherit;
  font-size: var(--suite-text-2xs, var(--suite-text-xs));
  color: var(--suite-ink-muted);
}

:is(.suite-search-results, .viking-search-results, .fj-search-results) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-1);
}

:is(
  .suite-search-group-header,
  .viking-search-group-header,
  .fj-search-group-header
) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--suite-space-1);
  margin: var(--suite-space-1) 0 var(--suite-space-0-5);
  padding: 0 var(--suite-space-1);
}

:is(
  .suite-search-group-label,
  .viking-search-group-label,
  .fj-search-group-label
) {
  margin: 0;
  padding: 0;
  font-size: var(--suite-text-2xs, var(--suite-text-xs));
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-caps, 0.06em);
  text-transform: uppercase;
  color: var(--suite-ink-muted);
}

:is(
  .suite-search-clear-recent,
  .viking-search-clear-recent,
  .fj-search-clear-recent
) {
  border: none;
  background: transparent;
  color: var(--suite-ink-muted);
  font: inherit;
  font-size: var(--suite-text-2xs, var(--suite-text-xs));
  letter-spacing: var(--suite-tracking-caps, 0.06em);
  text-transform: uppercase;
  cursor: pointer;
  padding: var(--suite-space-0-5) var(--suite-space-1);
  border-radius: var(--suite-radius-control);
  min-height: var(--suite-touch, 44px);
}

:is(
  .suite-search-clear-recent,
  .viking-search-clear-recent,
  .fj-search-clear-recent
):hover {
  color: var(--suite-ink);
  background: color-mix(in srgb, var(--suite-accent) 12%, transparent);
}

:is(.suite-search-result, .viking-search-result, .fj-search-result) {
  display: flex;
  align-items: center;
  gap: var(--suite-space-1);
  min-height: var(--suite-control-height, 40px);
  padding: var(--suite-space-1) var(--suite-space-2);
  border: 1px solid var(--suite-border-subtle, var(--suite-border));
  border-radius: var(--suite-radius-control);
  background: var(--suite-surface);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

:is(.suite-search-result, .viking-search-result, .fj-search-result):hover,
:is(.suite-search-result, .viking-search-result, .fj-search-result).is-selected,
:is(
  .suite-search-result,
  .viking-search-result,
  .fj-search-result
)[aria-selected="true"] {
  background: color-mix(in srgb, var(--suite-accent) 10%, var(--suite-surface));
  border-color: color-mix(
    in srgb,
    var(--suite-accent) 42%,
    var(--suite-border-strong)
  );
  box-shadow: var(--suite-elevation-1, var(--suite-elevation-2));
}

:is(
  .suite-search-result,
  .viking-search-result,
  .fj-search-result
):focus-visible {
  outline: var(--suite-ring-width, 2px) solid
    var(--suite-ring, var(--suite-accent));
  outline-offset: var(--suite-ring-offset, 2px);
}

:is(
  .suite-search-result-title,
  .viking-search-result-title,
  .fj-search-result-title
) {
  font-size: var(--suite-text-sm);
  font-weight: var(--suite-weight-semibold);
  color: var(--suite-ink);
}

:is(
  .suite-search-result-snippet,
  .viking-search-result-snippet,
  .fj-search-result-snippet
) {
  font-size: var(--suite-text-xs);
  color: var(--suite-ink-muted);
}

:is(.suite-search-empty, .viking-search-empty, .fj-search-empty) {
  margin: 0;
  padding: var(--suite-space-3);
  text-align: center;
  color: var(--suite-ink-muted);
  font-size: var(--suite-text-sm);
}

:is(.suite-sheet, .viking-sheet, .fj-sheet) {
  margin: 0;
  height: 100%;
  max-height: 100dvh;
  max-width: min(24rem, 100vw);
  border-radius: 0;
}

:is(.suite-sheet, .viking-sheet, .fj-sheet)[data-side="right"] {
  margin-left: auto;
  border-left: 1px solid var(--suite-border);
}

:is(.suite-sheet, .viking-sheet, .fj-sheet)[data-side="left"] {
  margin-right: auto;
  border-right: 1px solid var(--suite-border);
}

/* =============================================================================
   Table
   ============================================================================= */
:is(.suite-table-wrap, .viking-table-wrap, .fj-table-wrap) {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--suite-border);
  border-radius: var(--suite-radius-surface);
  background: var(--suite-surface);
  /* Recessed data well — content, not floating chrome */
  box-shadow: var(--suite-elevation-inset);
}

:is(.suite-table, .viking-table, .fj-table) {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--suite-font-sans);
  font-size: var(--suite-text-sm);
  color: var(--suite-ink);
}

:is(.suite-table, .viking-table, .fj-table) th,
:is(.suite-table, .viking-table, .fj-table) td {
  padding: var(--suite-space-1) var(--suite-space-2);
  text-align: left;
  border-bottom: 1px solid var(--suite-border);
  vertical-align: middle;
}

:is(.suite-table, .viking-table, .fj-table) th {
  font-size: var(--suite-text-xs);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-wide);
  text-transform: uppercase;
  color: var(--suite-ink-muted);
  background: var(--suite-bg-subtle);
  white-space: nowrap;
}

:is(.suite-table, .viking-table, .fj-table) tbody tr:last-child td {
  border-bottom: 0;
}

:is(.suite-table, .viking-table, .fj-table) tbody tr:hover td {
  background: color-mix(in srgb, var(--suite-primary) 6%, transparent);
}

:is(.suite-table, .viking-table, .fj-table) tbody tr.is-selected td,
:is(.suite-table, .viking-table, .fj-table) tbody tr[data-selected="true"] td {
  background: color-mix(in srgb, var(--suite-accent) 10%, var(--suite-surface));
}

:is(.suite-table-select, .viking-table-select, .fj-table-select) {
  width: var(--suite-touch, 44px);
  text-align: center;
  vertical-align: middle;
}

/* Bulk action bar (ADR-0021) — same surface language as elevated cards */
:is(.suite-bulk-toolbar, .viking-bulk-toolbar, .fj-bulk-toolbar) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--suite-space-2);
  padding: var(--suite-space-2) var(--suite-space-3);
  margin-bottom: var(--suite-space-2);
  border: 1px solid var(--suite-border-strong);
  border-radius: var(--suite-radius-surface);
  background: color-mix(
    in srgb,
    var(--suite-accent) 8%,
    var(--suite-surface-elevated)
  );
  color: var(--suite-ink);
  box-shadow: var(--suite-elevation-2);
  transition: var(--suite-transition);
}

:is(
  .suite-bulk-toolbar-count,
  .viking-bulk-toolbar-count,
  .fj-bulk-toolbar-count
) {
  margin: 0;
  font-size: var(--suite-text-sm);
  font-weight: var(--suite-weight-semibold);
}

:is(
  .suite-bulk-toolbar-actions,
  .viking-bulk-toolbar-actions,
  .fj-bulk-toolbar-actions
) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--suite-space-1);
}

/* Progressive disclosure (ADR-0022) — advanced sections collapsed by default */
:is(.suite-disclosure, .viking-disclosure, .fj-disclosure) {
  border: 1px solid var(--suite-border);
  border-radius: var(--suite-radius-surface);
  background: var(--suite-surface);
  overflow: hidden;
}

:is(.suite-disclosure, .viking-disclosure, .fj-disclosure)[data-level="inset"] {
  border-style: dashed;
  background: color-mix(in srgb, var(--suite-surface) 92%, var(--suite-bg));
}

:is(
  .suite-disclosure-trigger,
  .viking-disclosure-trigger,
  .fj-disclosure-trigger
) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--suite-space-2);
  width: 100%;
  min-height: var(--suite-touch);
  margin: 0;
  padding: var(--suite-space-2) var(--suite-space-3);
  border: 0;
  background: transparent;
  color: var(--suite-ink);
  font-family: var(--suite-font-sans);
  text-align: left;
  cursor: pointer;
  transition: var(--suite-transition);
  -webkit-tap-highlight-color: transparent;
}

:is(
    .suite-disclosure-trigger,
    .viking-disclosure-trigger,
    .fj-disclosure-trigger
  ):hover:not(:disabled):not([aria-disabled="true"]) {
  background: color-mix(in srgb, var(--suite-accent) 6%, transparent);
}

:is(
    .suite-disclosure-trigger,
    .viking-disclosure-trigger,
    .fj-disclosure-trigger
  ):active:not(:disabled):not([aria-disabled="true"]) {
  background: color-mix(in srgb, var(--suite-accent) 10%, transparent);
}

:is(
  .suite-disclosure-trigger,
  .viking-disclosure-trigger,
  .fj-disclosure-trigger
):disabled,
:is(
  .suite-disclosure-trigger,
  .viking-disclosure-trigger,
  .fj-disclosure-trigger
)[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

:is(
  .suite-disclosure-trigger,
  .viking-disclosure-trigger,
  .fj-disclosure-trigger
):focus-visible {
  outline: var(--suite-ring-width) solid var(--suite-ring);
  outline-offset: calc(-1 * var(--suite-ring-offset));
}

:is(.suite-disclosure-copy, .viking-disclosure-copy, .fj-disclosure-copy) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--suite-space-0-5);
  min-width: 0;
}

:is(.suite-disclosure-badge, .viking-disclosure-badge, .fj-disclosure-badge) {
  font-size: var(--suite-text-xs);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-wide);
  text-transform: uppercase;
  color: var(--suite-ink-muted);
}

:is(
  .suite-disclosure-heading,
  .viking-disclosure-heading,
  .fj-disclosure-heading
) {
  font-size: var(--suite-text-sm);
  font-weight: var(--suite-weight-semibold);
  color: var(--suite-ink);
}

:is(
  .suite-disclosure-description,
  .viking-disclosure-description,
  .fj-disclosure-description
) {
  font-size: var(--suite-text-sm);
  color: var(--suite-ink-muted);
  line-height: var(--suite-leading-normal, 1.5);
}

:is(
  .suite-disclosure-chevron,
  .viking-disclosure-chevron,
  .fj-disclosure-chevron
) {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: var(--suite-ink-muted);
}

/* CSS chevron for forjd-disclosure (no icon package) */
span:is(
  .suite-disclosure-chevron,
  .viking-disclosure-chevron,
  .fj-disclosure-chevron
) {
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.35rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--suite-duration-fast, 120ms) ease;
}

:is(.suite-disclosure, .viking-disclosure, .fj-disclosure)[data-open="true"]
  span:is(
    .suite-disclosure-chevron,
    .viking-disclosure-chevron,
    .fj-disclosure-chevron
  ) {
  transform: rotate(225deg);
  margin-top: 0.55rem;
}

:is(.suite-disclosure-panel, .viking-disclosure-panel, .fj-disclosure-panel) {
  padding: 0 var(--suite-space-3) var(--suite-space-3);
  border-top: 1px solid var(--suite-border);
}

/* Keyboard shortcut help (ADR-0023) */
:is(.suite-shortcut-help, .viking-shortcut-help, .fj-shortcut-help) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-3);
}

:is(
  .suite-shortcut-help-lede,
  .viking-shortcut-help-lede,
  .fj-shortcut-help-lede
) {
  margin: 0;
  font-size: var(--suite-text-sm);
  color: var(--suite-ink-muted);
  line-height: var(--suite-leading-normal, 1.5);
}

:is(
  .suite-shortcut-help-group,
  .viking-shortcut-help-group,
  .fj-shortcut-help-group
) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-1);
}

:is(
  .suite-shortcut-help-group-title,
  .viking-shortcut-help-group-title,
  .fj-shortcut-help-group-title
) {
  margin: 0;
  font-size: var(--suite-text-xs);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-wide);
  text-transform: uppercase;
  color: var(--suite-ink-muted);
}

:is(
  .suite-shortcut-help-list,
  .viking-shortcut-help-list,
  .fj-shortcut-help-list
) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-1);
}

:is(
  .suite-shortcut-help-row,
  .viking-shortcut-help-row,
  .fj-shortcut-help-row
) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--suite-space-2);
  padding: var(--suite-space-1) 0;
  border-bottom: 1px solid var(--suite-border);
}

:is(
    .suite-shortcut-help-list,
    .viking-shortcut-help-list,
    .fj-shortcut-help-list
  )
  > li:last-child
  :is(
    .suite-shortcut-help-row,
    .viking-shortcut-help-row,
    .fj-shortcut-help-row
  ) {
  border-bottom: 0;
}

:is(
  .suite-shortcut-help-label,
  .viking-shortcut-help-label,
  .fj-shortcut-help-label
) {
  margin: 0;
  font-size: var(--suite-text-sm);
  font-weight: var(--suite-weight-semibold);
  color: var(--suite-ink);
}

:is(
  .suite-shortcut-help-desc,
  .viking-shortcut-help-desc,
  .fj-shortcut-help-desc
) {
  margin: var(--suite-space-0-5) 0 0;
  font-size: var(--suite-text-xs);
  color: var(--suite-ink-muted);
}

:is(
  .suite-shortcut-help-keys,
  .viking-shortcut-help-keys,
  .fj-shortcut-help-keys
) {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--suite-space-0-5);
  flex: 0 0 auto;
}

/* Preferences panel (ADR-0024) */
:is(.suite-preferences, .viking-preferences, .fj-preferences) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-3);
}

:is(.suite-preferences-lede, .viking-preferences-lede, .fj-preferences-lede) {
  margin: 0;
  font-size: var(--suite-text-sm);
  color: var(--suite-ink-muted);
  line-height: var(--suite-leading-normal, 1.5);
}

:is(
  .suite-preferences-section,
  .viking-preferences-section,
  .fj-preferences-section
) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-2);
}

:is(
  .suite-preferences-heading,
  .viking-preferences-heading,
  .fj-preferences-heading
) {
  margin: 0;
  font-size: var(--suite-text-xs);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-wide);
  text-transform: uppercase;
  color: var(--suite-ink-muted);
}

:is(
  .suite-preferences-theme,
  .viking-preferences-theme,
  .fj-preferences-theme,
  .suite-preferences-actions,
  .viking-preferences-actions,
  .fj-preferences-actions
) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--suite-space-1);
}

/* Activity log list (ADR-0027) */
:is(.suite-activity, .viking-activity, .fj-activity) {
  display: block;
  min-width: 0;
}

:is(.suite-activity-empty, .viking-activity-empty, .fj-activity-empty) {
  margin: 0;
  font-size: var(--suite-text-sm);
  color: var(--suite-ink-muted);
  line-height: var(--suite-leading-normal, 1.5);
}

:is(.suite-activity-list, .viking-activity-list, .fj-activity-list) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 16rem;
  overflow: auto;
  border: 1px solid var(--suite-border-subtle);
  border-radius: var(--suite-radius);
  background: var(--suite-bg);
}

:is(.suite-activity-item, .viking-activity-item, .fj-activity-item) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--suite-space-1) var(--suite-space-2);
  padding: var(--suite-space-1) var(--suite-space-2);
  border-block-end: 1px solid var(--suite-border-subtle);
}

:is(.suite-activity-item, .viking-activity-item, .fj-activity-item):last-child {
  border-block-end: none;
}

:is(.suite-activity-main, .viking-activity-main, .fj-activity-main) {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 12rem;
}

:is(.suite-activity-label, .viking-activity-label, .fj-activity-label) {
  font-size: var(--suite-text-sm);
  font-weight: var(--suite-weight-medium);
  color: var(--suite-ink);
  line-height: var(--suite-leading-tight, 1.25);
}

:is(.suite-activity-detail, .viking-activity-detail, .fj-activity-detail) {
  font-size: var(--suite-text-xs);
  color: var(--suite-ink-muted);
  line-height: var(--suite-leading-normal, 1.5);
}

:is(.suite-activity-time, .viking-activity-time, .fj-activity-time) {
  font-size: var(--suite-text-xs);
  color: var(--suite-ink-muted);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Onboarding checklist (ADR-0025) */
:is(.suite-onboarding, .viking-onboarding, .fj-onboarding) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-3);
  padding: var(--suite-space-3);
  border: 1px solid var(--suite-border);
  border-radius: var(--suite-radius-surface);
  background: var(--suite-surface);
  box-shadow: var(--suite-elevation-1);
}

:is(
  .suite-onboarding-header,
  .viking-onboarding-header,
  .fj-onboarding-header
) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--suite-space-2);
}

:is(.suite-onboarding-copy, .viking-onboarding-copy, .fj-onboarding-copy) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-0-5);
  min-width: 0;
  flex: 1 1 16rem;
}

:is(
  .suite-onboarding-eyebrow,
  .viking-onboarding-eyebrow,
  .fj-onboarding-eyebrow
) {
  margin: 0;
  font-size: var(--suite-text-xs);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-wide);
  text-transform: uppercase;
  color: var(--suite-accent);
}

:is(.suite-onboarding-title, .viking-onboarding-title, .fj-onboarding-title) {
  margin: 0;
  font-size: var(--suite-text-lg);
  font-weight: var(--suite-weight-semibold);
  color: var(--suite-ink);
  line-height: var(--suite-leading-tight, 1.25);
}

:is(
  .suite-onboarding-description,
  .viking-onboarding-description,
  .fj-onboarding-description
) {
  margin: 0;
  font-size: var(--suite-text-sm);
  color: var(--suite-ink-muted);
  line-height: var(--suite-leading-normal, 1.5);
  max-width: 42rem;
}

:is(
  .suite-onboarding-progress,
  .viking-onboarding-progress,
  .fj-onboarding-progress
) {
  margin: 0;
  font-size: var(--suite-text-xs);
  font-weight: var(--suite-weight-medium);
  color: var(--suite-ink-muted);
  white-space: nowrap;
}

:is(.suite-onboarding-list, .viking-onboarding-list, .fj-onboarding-list) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-1);
}

:is(.suite-onboarding-item, .viking-onboarding-item, .fj-onboarding-item) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--suite-space-2);
  padding: var(--suite-space-2);
  border: 1px solid var(--suite-border-subtle);
  border-radius: var(--suite-radius);
  background: var(--suite-bg);
}

:is(
  .suite-onboarding-item,
  .viking-onboarding-item,
  .fj-onboarding-item
)[data-done="true"] {
  border-color: var(--suite-border);
}

:is(.suite-onboarding-row, .viking-onboarding-row, .fj-onboarding-row) {
  display: flex;
  align-items: flex-start;
  gap: var(--suite-space-2);
  flex: 1 1 12rem;
  min-width: 0;
  cursor: pointer;
}

:is(.suite-onboarding-check, .viking-onboarding-check, .fj-onboarding-check) {
  margin-block-start: 0.2rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--suite-accent);
  flex: 0 0 auto;
}

:is(.suite-onboarding-body, .viking-onboarding-body, .fj-onboarding-body) {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

:is(
  .suite-onboarding-step-title,
  .viking-onboarding-step-title,
  .fj-onboarding-step-title
) {
  font-size: var(--suite-text-sm);
  font-weight: var(--suite-weight-semibold);
  color: var(--suite-ink);
}

:is(
  .suite-onboarding-step-detail,
  .viking-onboarding-step-detail,
  .fj-onboarding-step-detail
) {
  font-size: var(--suite-text-xs);
  color: var(--suite-ink-muted);
  line-height: var(--suite-leading-normal, 1.5);
}

:is(
  .suite-onboarding-action,
  .viking-onboarding-action,
  .fj-onboarding-action
) {
  font-size: var(--suite-text-sm);
  font-weight: var(--suite-weight-medium);
  color: var(--suite-accent);
  text-decoration: none;
  white-space: nowrap;
}

:is(
  .suite-onboarding-action,
  .viking-onboarding-action,
  .fj-onboarding-action
):hover {
  text-decoration: underline;
}

:is(
  .suite-onboarding-action,
  .viking-onboarding-action,
  .fj-onboarding-action
):focus-visible {
  outline: 2px solid var(--suite-ring);
  outline-offset: 2px;
  border-radius: var(--suite-radius-sm, 4px);
}

:is(
  .suite-onboarding-footer,
  .viking-onboarding-footer,
  .fj-onboarding-footer
) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--suite-space-1);
  align-items: center;
}

/* Dense operational tables (Palantir-adjacent) */
:is(.suite-table, .viking-table, .fj-table)[data-density="compact"] th,
:is(.suite-table, .viking-table, .fj-table)[data-density="compact"] td {
  padding: var(--suite-space-0-5) var(--suite-space-2);
  font-size: var(--suite-text-xs);
}

/* =============================================================================
   Toast (Sonner-style host)
   ============================================================================= */
:is(.suite-toast-host, .viking-toast-host, .fj-toast-host) {
  position: fixed;
  inset-block-end: var(--suite-space-3);
  inset-inline-end: var(--suite-space-3);
  z-index: var(--suite-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-2);
  width: min(22rem, calc(100vw - var(--suite-space-4)));
  pointer-events: none;
}

:is(
  .suite-toast-host,
  .viking-toast-host,
  .fj-toast-host
)[data-position="top-right"] {
  inset-block-end: auto;
  inset-block-start: var(--suite-space-3);
}

:is(
  .suite-toast-host,
  .viking-toast-host,
  .fj-toast-host
)[data-position="bottom-center"] {
  inset-inline: 50% auto auto 50%;
  transform: translateX(-50%);
}

:is(.suite-toast, .viking-toast, .fj-toast) {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--suite-space-2);
  padding: var(--suite-space-2) var(--suite-space-3);
  border: 1px solid var(--suite-border-strong);
  border-radius: var(--suite-radius-surface);
  background: var(--suite-glass-strong);
  color: var(--suite-ink);
  box-shadow: var(--suite-elevation-3);
  -webkit-backdrop-filter: blur(var(--suite-glass-blur));
  backdrop-filter: blur(var(--suite-glass-blur));
  font-family: var(--suite-font-sans);
  font-size: var(--suite-text-sm);
  animation: suite-toast-in var(--suite-duration-fast) var(--suite-ease);
}

:is(.suite-toast-action, .viking-toast-action, .fj-toast-action) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--suite-touch, 44px);
  padding: var(--suite-space-0-5) var(--suite-space-1);
  border: none;
  border-radius: var(--suite-radius-control);
  background: transparent;
  color: var(--suite-accent);
  font: inherit;
  font-weight: var(--suite-weight-semibold);
  cursor: pointer;
}

:is(.suite-toast-action, .viking-toast-action, .fj-toast-action):hover {
  background: color-mix(in srgb, var(--suite-accent) 12%, transparent);
}

:is(.suite-toast-action, .viking-toast-action, .fj-toast-action):focus-visible {
  outline: var(--suite-ring-width, 2px) solid
    var(--suite-ring, var(--suite-accent));
  outline-offset: var(--suite-ring-offset, 2px);
}

:is(.suite-toast-body, .viking-toast-body, .fj-toast-body) {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: var(--suite-space-0-5);
}

:is(.suite-toast-title, .viking-toast-title, .fj-toast-title) {
  margin: 0;
  font-weight: var(--suite-weight-semibold);
  color: var(--suite-ink);
}

:is(
  .suite-toast-description,
  .viking-toast-description,
  .fj-toast-description
) {
  margin: 0;
  color: var(--suite-ink-muted);
  line-height: var(--suite-leading-normal);
}

:is(.suite-toast, .viking-toast, .fj-toast)[data-tone="success"] {
  border-color: color-mix(in srgb, var(--suite-success) 40%, transparent);
}

:is(.suite-toast, .viking-toast, .fj-toast)[data-tone="danger"] {
  border-color: color-mix(in srgb, var(--suite-danger) 40%, transparent);
}

:is(.suite-toast, .viking-toast, .fj-toast)[data-tone="warning"] {
  border-color: color-mix(in srgb, var(--suite-warning) 40%, transparent);
}

:is(.suite-toast, .viking-toast, .fj-toast)[data-tone="info"],
:is(.suite-toast, .viking-toast, .fj-toast)[data-tone="accent"] {
  border-color: color-mix(in srgb, var(--suite-primary) 40%, transparent);
}

/* Priority: quieter lows, sticky criticals (ADR-0020) */
:is(.suite-toast, .viking-toast, .fj-toast)[data-priority="low"] {
  box-shadow: var(--suite-elevation-1);
  opacity: 0.96;
}

:is(.suite-toast, .viking-toast, .fj-toast)[data-priority="high"] {
  box-shadow: var(--suite-elevation-3);
}

:is(.suite-toast, .viking-toast, .fj-toast)[data-priority="critical"] {
  box-shadow: var(--suite-elevation-4);
  border-width: 1px;
}

:is(.suite-toast, .viking-toast, .fj-toast)[data-priority="critical"]
  :is(.suite-toast-title, .viking-toast-title, .fj-toast-title) {
  font-weight: var(--suite-weight-bold, 700);
}

/* =============================================================================
   Skeleton / Empty / Loading / Error / Progress / Spinner
   Feedback surfaces: helpful copy hierarchy + machined chrome (not generic gray)
   ============================================================================= */
:is(.suite-skeleton, .viking-skeleton, .fj-skeleton) {
  display: block;
  border-radius: var(--suite-radius-control);
  background: linear-gradient(
    105deg,
    var(--suite-surface-2) 0%,
    var(--suite-surface-2) 40%,
    color-mix(in srgb, var(--suite-primary) 12%, var(--suite-surface-elevated))
      50%,
    var(--suite-surface-2) 60%,
    var(--suite-surface-2) 100%
  );
  background-size: 220% 100%;
  animation: suite-shimmer 1.6s var(--suite-ease) infinite;
  border: 1px solid color-mix(in srgb, var(--suite-border) 70%, transparent);
}

:is(.suite-skeleton, .viking-skeleton, .fj-skeleton)[data-variant="text"] {
  height: var(--suite-text-sm);
  max-width: 16rem;
}

:is(.suite-skeleton, .viking-skeleton, .fj-skeleton)[data-variant="rect"] {
  min-height: 4rem;
}

:is(.suite-skeleton, .viking-skeleton, .fj-skeleton)[data-variant="circle"] {
  width: var(--suite-space-5);
  height: var(--suite-space-5);
  border-radius: var(--suite-radius-pill);
}

/* Stacked skeleton recipe — lists / cards while hydrating */
:is(.suite-skeleton-stack, .viking-skeleton-stack, .fj-skeleton-stack) {
  display: grid;
  gap: var(--suite-space-2);
  width: 100%;
  padding: var(--suite-space-3);
  border: 1px solid var(--suite-border);
  border-radius: var(--suite-radius-surface);
  background: var(--suite-surface);
  box-shadow: var(--suite-highlight);
}

:is(.suite-skeleton-stack, .viking-skeleton-stack, .fj-skeleton-stack)
  > :is(
    .suite-skeleton,
    .viking-skeleton,
    .fj-skeleton
  )[data-variant="text"]:nth-child(odd) {
  max-width: 72%;
}

:is(.suite-skeleton-stack, .viking-skeleton-stack, .fj-skeleton-stack)
  > :is(
    .suite-skeleton,
    .viking-skeleton,
    .fj-skeleton
  )[data-variant="text"]:nth-child(even) {
  max-width: 48%;
}

/* Virtual list — fixed-height windowing for unbounded queues/feeds */
:is(.suite-virtual-list, .viking-virtual-list, .fj-virtual-list) {
  display: block;
  min-width: 0;
  width: 100%;
}

:is(
  .suite-virtual-list__viewport,
  .viking-virtual-list__viewport,
  .fj-virtual-list__viewport
) {
  overflow: auto;
  overscroll-behavior: contain;
  contain: strict;
  width: 100%;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--suite-primary) var(--suite-surface-2);
}

:is(
  .suite-virtual-list__item,
  .viking-virtual-list__item,
  .fj-virtual-list__item
) {
  box-sizing: border-box;
  width: 100%;
}

/* Explore / card grids — browser-native containment when not windowed */
:is(.viking-explore-card, .suite-explore-card) {
  content-visibility: auto;
  contain-intrinsic-size: auto 17.5rem;
}

/* Page shell — progressive loading so routes never feel blank */
:is(.suite-page-skeleton, .viking-page-skeleton, .fj-page-skeleton) {
  display: grid;
  gap: var(--suite-space-4);
  width: 100%;
  min-width: 0;
}

:is(.suite-page-skeleton, .viking-page-skeleton, .fj-page-skeleton)
  .suite-page-skeleton__metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--suite-space-3);
}

:is(.suite-page-skeleton, .viking-page-skeleton, .fj-page-skeleton)
  .suite-page-skeleton__charts,
:is(.suite-page-skeleton, .viking-page-skeleton, .fj-page-skeleton)
  .suite-page-skeleton__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--suite-space-3);
}

:is(.suite-page-skeleton, .viking-page-skeleton, .fj-page-skeleton)
  .suite-page-skeleton__nav {
  display: grid;
  gap: var(--suite-space-2);
  padding: var(--suite-space-2);
}

:is(.suite-page-skeleton, .viking-page-skeleton, .fj-page-skeleton)
  .suite-page-skeleton__list,
:is(.suite-page-skeleton, .viking-page-skeleton, .fj-page-skeleton)
  .suite-page-skeleton__form {
  min-height: 12rem;
}

@media (min-width: 768px) {
  :is(.suite-page-skeleton, .viking-page-skeleton, .fj-page-skeleton)
    .suite-page-skeleton__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :is(.suite-page-skeleton, .viking-page-skeleton, .fj-page-skeleton)
    .suite-page-skeleton__charts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :is(.suite-page-skeleton, .viking-page-skeleton, .fj-page-skeleton)
    .suite-page-skeleton__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Empty state --- */
:is(.suite-empty, .viking-empty, .fj-empty) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--suite-space-2);
  padding: var(--suite-space-6) var(--suite-space-4);
  text-align: center;
  color: var(--suite-ink-muted);
  border: 1px solid var(--suite-border);
  border-radius: var(--suite-radius-surface);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--suite-primary) 4%, var(--suite-surface)) 0%,
    var(--suite-surface) 48%
  );
  box-shadow: var(--suite-elevation-1);
  font-family: var(--suite-font-sans);
  animation: suite-fade-in var(--suite-duration) var(--suite-ease) both;
}

:is(.suite-empty, .viking-empty, .fj-empty)[data-density="compact"] {
  padding: var(--suite-space-4) var(--suite-space-3);
  gap: var(--suite-space-1);
}

:is(.suite-empty, .viking-empty, .fj-empty)[data-variant="inset"] {
  border-style: dashed;
  background: var(--suite-bg-subtle);
  box-shadow: var(--suite-elevation-inset);
}

:is(.suite-empty-icon, .viking-empty-icon, .fj-empty-icon) {
  display: grid;
  place-items: center;
  width: var(--suite-space-7);
  height: var(--suite-space-7);
  margin-bottom: var(--suite-space-1);
  border-radius: var(--suite-radius-surface);
  background: var(--suite-primary-soft);
  color: var(--suite-primary);
  border: 1px solid color-mix(in srgb, var(--suite-primary) 22%, transparent);
  box-shadow: var(--suite-elevation-1);
}

:is(.suite-empty-icon, .viking-empty-icon, .fj-empty-icon) svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

:is(.suite-empty-eyebrow, .viking-empty-eyebrow, .fj-empty-eyebrow) {
  margin: 0;
  font-size: var(--suite-text-2xs);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-caps);
  text-transform: uppercase;
  color: var(--suite-ink-subtle);
}

:is(.suite-empty-title, .viking-empty-title, .fj-empty-title) {
  margin: 0;
  color: var(--suite-ink);
  font-size: var(--suite-text-lg);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-tight);
  line-height: var(--suite-leading-snug);
}

:is(
  .suite-empty-text,
  .viking-empty-text,
  .fj-empty-text,
  .suite-empty-description,
  .viking-empty-description,
  .fj-empty-description
) {
  margin: 0;
  max-width: 28rem;
  line-height: var(--suite-leading-relaxed, var(--suite-leading-normal));
  font-size: var(--suite-text-sm);
  color: var(--suite-ink-muted);
}

:is(.suite-empty-hint, .viking-empty-hint, .fj-empty-hint) {
  margin: 0;
  max-width: 26rem;
  font-family: var(--suite-font-mono);
  font-size: var(--suite-text-2xs);
  line-height: var(--suite-leading-normal);
  letter-spacing: var(--suite-tracking-wide);
  color: var(--suite-ink-subtle);
}

:is(.suite-empty-actions, .viking-empty-actions, .fj-empty-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--suite-space-2);
  justify-content: center;
  margin-block-start: var(--suite-space-1);
}

:is(.suite-empty-actions, .viking-empty-actions, .fj-empty-actions):empty {
  display: none;
}

/* --- Loading (inline panel + overlay) --- */
:is(.suite-loading, .viking-loading, .fj-loading) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--suite-space-2);
  padding: var(--suite-space-6) var(--suite-space-4);
  text-align: center;
  border: 1px solid var(--suite-border);
  border-radius: var(--suite-radius-surface);
  background: var(--suite-surface);
  box-shadow: var(--suite-highlight);
  font-family: var(--suite-font-sans);
  color: var(--suite-ink-muted);
  animation: suite-fade-in var(--suite-duration-fast) var(--suite-ease) both;
}

:is(.suite-loading-title, .viking-loading-title, .fj-loading-title) {
  margin: 0;
  color: var(--suite-ink);
  font-size: var(--suite-text-sm);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-wide);
}

:is(.suite-loading-text, .viking-loading-text, .fj-loading-text) {
  margin: 0;
  max-width: 24rem;
  font-size: var(--suite-text-sm);
  line-height: var(--suite-leading-normal);
  color: var(--suite-ink-muted);
}

:is(.suite-loading-overlay, .viking-loading-overlay, .fj-loading-overlay) {
  position: absolute;
  inset: 0;
  z-index: var(--suite-z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  animation: suite-fade-in var(--suite-duration-fast) var(--suite-ease-out) both;
}

:is(.suite-loading-overlay, .viking-loading-overlay, .fj-loading-overlay)
  > .suite-loading-backdrop {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--suite-bg) 62%, transparent);
  -webkit-backdrop-filter: blur(var(--suite-glass-blur));
  backdrop-filter: blur(var(--suite-glass-blur));
}

:is(.suite-loading-panel, .viking-loading-panel, .fj-loading-panel) {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--suite-space-2);
  padding: var(--suite-space-3) var(--suite-space-4);
  border: 1px solid var(--suite-border-strong);
  border-radius: var(--suite-radius-surface);
  background: var(--suite-glass-strong);
  box-shadow: var(--suite-elevation-3);
  -webkit-backdrop-filter: blur(var(--suite-glass-blur));
  backdrop-filter: blur(var(--suite-glass-blur));
  max-width: min(20rem, 90%);
}

/* --- Error state panel (recovery-oriented; not field-level .suite-error-text) --- */
:is(.suite-error-state, .viking-error-state, .fj-error-state) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--suite-space-2);
  padding: var(--suite-space-6) var(--suite-space-4);
  text-align: center;
  border: 1px solid
    color-mix(in srgb, var(--suite-danger) 28%, var(--suite-border));
  border-radius: var(--suite-radius-surface);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--suite-danger) 8%, var(--suite-surface)) 0%,
    var(--suite-surface) 52%
  );
  box-shadow: var(--suite-elevation-1);
  font-family: var(--suite-font-sans);
  color: var(--suite-ink-muted);
  animation: suite-fade-in var(--suite-duration) var(--suite-ease) both;
}

:is(.suite-error-state-icon, .viking-error-state-icon, .fj-error-state-icon) {
  display: grid;
  place-items: center;
  width: var(--suite-space-7);
  height: var(--suite-space-7);
  margin-bottom: var(--suite-space-1);
  border-radius: var(--suite-radius-surface);
  background: var(--suite-danger-soft);
  color: var(--suite-danger);
  border: 1px solid color-mix(in srgb, var(--suite-danger) 28%, transparent);
  box-shadow: var(--suite-elevation-1);
}

:is(.suite-error-state-icon, .viking-error-state-icon, .fj-error-state-icon)
  svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

:is(
  .suite-error-state-title,
  .viking-error-state-title,
  .fj-error-state-title
) {
  margin: 0;
  color: var(--suite-ink);
  font-size: var(--suite-text-lg);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-tight);
  line-height: var(--suite-leading-snug);
}

:is(
  .suite-error-state-text,
  .viking-error-state-text,
  .fj-error-state-text,
  .suite-error-state-description,
  .viking-error-state-description,
  .fj-error-state-description
) {
  margin: 0;
  max-width: 28rem;
  font-size: var(--suite-text-sm);
  line-height: var(--suite-leading-relaxed, var(--suite-leading-normal));
  color: var(--suite-ink-muted);
}

:is(.suite-error-state-hint, .viking-error-state-hint, .fj-error-state-hint) {
  margin: 0;
  max-width: 26rem;
  font-family: var(--suite-font-mono);
  font-size: var(--suite-text-2xs);
  letter-spacing: var(--suite-tracking-wide);
  color: var(--suite-ink-subtle);
}

:is(
  .suite-error-state-actions,
  .viking-error-state-actions,
  .fj-error-state-actions
) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--suite-space-2);
  justify-content: center;
  margin-block-start: var(--suite-space-1);
}

:is(
  .suite-error-state-actions,
  .viking-error-state-actions,
  .fj-error-state-actions
):empty {
  display: none;
}

:is(.suite-progress, .viking-progress, .fj-progress) {
  display: block;
  width: 100%;
  height: 0.375rem;
  border-radius: var(--suite-radius-pill);
  background: var(--suite-surface-2);
  border: 1px solid var(--suite-border);
  overflow: hidden;
}

:is(.suite-progress-bar, .viking-progress-bar, .fj-progress-bar) {
  display: block;
  height: 100%;
  width: var(--_progress, 0%);
  background: var(--suite-primary);
  border-radius: inherit;
  transition: width var(--suite-duration) var(--suite-ease);
}

:is(.suite-spinner, .viking-spinner, .fj-spinner) {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--suite-border-strong);
  border-top-color: var(--suite-primary);
  border-radius: var(--suite-radius-pill);
  animation: suite-spin var(--suite-duration) linear infinite;
  flex-shrink: 0;
}

:is(.suite-spinner, .viking-spinner, .fj-spinner)[data-size="lg"] {
  width: 1.75rem;
  height: 1.75rem;
  border-width: 2.5px;
}

/* =============================================================================
   Callout
   ============================================================================= */
:is(.suite-callout, .viking-callout, .fj-callout) {
  --_callout-rail: color-mix(in srgb, var(--suite-primary) 55%, transparent);
  display: flex;
  gap: var(--suite-space-2);
  padding: var(--suite-space-3);
  border: 1px solid var(--suite-border);
  border-radius: var(--suite-radius-surface);
  background: var(--suite-surface);
  color: var(--suite-ink);
  font-family: var(--suite-font-sans);
  font-size: var(--suite-text-sm);
  line-height: var(--suite-leading-normal);
  /* Machined left rail — expensive ops alert, not a flat banner */
  box-shadow:
    var(--suite-elevation-1),
    inset 3px 0 0 var(--_callout-rail);
}

:is(.suite-callout, .viking-callout, .fj-callout)[data-tone="accent"] {
  --_callout-rail: color-mix(in srgb, var(--suite-primary) 70%, transparent);
  background: var(--suite-primary-soft);
  border-color: color-mix(in srgb, var(--suite-primary) 28%, transparent);
}

:is(.suite-callout, .viking-callout, .fj-callout)[data-tone="warning"] {
  --_callout-rail: color-mix(in srgb, var(--suite-warning) 75%, transparent);
  background: var(--suite-warning-soft);
  border-color: color-mix(in srgb, var(--suite-warning) 32%, transparent);
}

:is(.suite-callout, .viking-callout, .fj-callout)[data-tone="danger"] {
  --_callout-rail: color-mix(in srgb, var(--suite-danger) 75%, transparent);
  background: var(--suite-danger-soft);
  border-color: color-mix(in srgb, var(--suite-danger) 32%, transparent);
  color: var(--suite-ink);
}

:is(.suite-callout, .viking-callout, .fj-callout)[data-tone="success"] {
  --_callout-rail: color-mix(in srgb, var(--suite-success) 75%, transparent);
  background: var(--suite-success-soft);
  border-color: color-mix(in srgb, var(--suite-success) 32%, transparent);
}

:is(.suite-callout-heading, .viking-callout-heading, .fj-callout-heading) {
  margin: 0 0 var(--suite-space-0-5);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-wide);
  color: var(--suite-ink);
}

:is(.suite-callout-text, .viking-callout-text, .fj-callout-text) {
  color: var(--suite-ink-muted);
  line-height: var(--suite-leading-normal);
}

/* =============================================================================
   Status list
   ============================================================================= */
:is(.suite-status-list, .viking-status-list, .fj-status-list) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

:is(.suite-status-list, .viking-status-list, .fj-status-list) li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--suite-space-2);
  font-family: var(--suite-font-mono);
  font-size: var(--suite-text-sm);
  padding: var(--suite-space-0-5) 0;
  border-bottom: 1px solid var(--suite-border);
  min-height: var(--suite-touch);
}

@media (min-width: 768px) {
  :is(.suite-status-list, .viking-status-list, .fj-status-list) li {
    min-height: var(--suite-control-height-sm);
  }
}

:is(.suite-status-list, .viking-status-list, .fj-status-list) li:last-child {
  border-bottom: 0;
}

:is(
  .suite-status-list__name,
  .viking-status-list__name,
  .fj-status-list__name
) {
  color: var(--suite-ink);
}

:is(
  .suite-status-list__state,
  .viking-status-list__state,
  .fj-status-list__state
) {
  color: var(--suite-ink-muted);
}

:is(.suite-status-list, .viking-status-list, .fj-status-list)
  li[data-ok="true"]
  :is(
    .suite-status-list__state,
    .viking-status-list__state,
    .fj-status-list__state
  ) {
  color: var(--suite-success);
}

:is(.suite-status-list, .viking-status-list, .fj-status-list)
  li[data-ok="false"]
  :is(
    .suite-status-list__state,
    .viking-status-list__state,
    .fj-status-list__state
  ) {
  color: var(--suite-danger);
}

/* =============================================================================
   Pipeline flow (read-only workflow steps)
   ============================================================================= */
:is(.suite-pipeline-flow, .viking-pipeline-flow, .fj-pipeline-flow) {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--suite-font-sans);
}

@media (min-width: 768px) {
  :is(
    .suite-pipeline-flow,
    .viking-pipeline-flow,
    .fj-pipeline-flow
  )[data-orientation="horizontal"] {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
  }
}

:is(
  .suite-pipeline-flow__step,
  .viking-pipeline-flow__step,
  .fj-pipeline-flow__step
) {
  display: flex;
  gap: var(--suite-space-2);
  min-width: 0;
  flex: 1 1 auto;
}

@media (min-width: 768px) {
  :is(
      .suite-pipeline-flow,
      .viking-pipeline-flow,
      .fj-pipeline-flow
    )[data-orientation="horizontal"]
    :is(
      .suite-pipeline-flow__step,
      .viking-pipeline-flow__step,
      .fj-pipeline-flow__step
    ) {
    flex-direction: column;
    gap: var(--suite-space-1);
  }
}

:is(
  .suite-pipeline-flow__rail,
  .viking-pipeline-flow__rail,
  .fj-pipeline-flow__rail
) {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  :is(
      .suite-pipeline-flow,
      .viking-pipeline-flow,
      .fj-pipeline-flow
    )[data-orientation="horizontal"]
    :is(
      .suite-pipeline-flow__rail,
      .viking-pipeline-flow__rail,
      .fj-pipeline-flow__rail
    ) {
    flex-direction: row;
    width: 100%;
    align-items: center;
  }
}

:is(
  .suite-pipeline-flow__marker,
  .viking-pipeline-flow__marker,
  .fj-pipeline-flow__marker
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--suite-space-3);
  height: var(--suite-space-3);
  border-radius: var(--suite-radius-pill);
  border: 1px solid var(--suite-border-strong);
  background: var(--suite-surface);
  color: var(--suite-ink-muted);
  font-family: var(--suite-font-mono);
  font-size: var(--suite-text-xs);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-wide);
  flex-shrink: 0;
}

:is(
    .suite-pipeline-flow__step,
    .viking-pipeline-flow__step,
    .fj-pipeline-flow__step
  )[data-kind="process"]
  :is(
    .suite-pipeline-flow__marker,
    .viking-pipeline-flow__marker,
    .fj-pipeline-flow__marker
  ) {
  border-color: var(--suite-accent);
  color: var(--suite-accent);
}

:is(
    .suite-pipeline-flow__step,
    .viking-pipeline-flow__step,
    .fj-pipeline-flow__step
  )[data-kind="detect"]
  :is(
    .suite-pipeline-flow__marker,
    .viking-pipeline-flow__marker,
    .fj-pipeline-flow__marker
  ) {
  border-color: var(--suite-warning);
  color: var(--suite-warning);
}

:is(
  .suite-pipeline-flow__connector,
  .viking-pipeline-flow__connector,
  .fj-pipeline-flow__connector
) {
  flex: 1;
  width: 2px;
  min-height: var(--suite-space-2);
  background: var(--suite-border);
}

@media (min-width: 768px) {
  :is(
      .suite-pipeline-flow,
      .viking-pipeline-flow,
      .fj-pipeline-flow
    )[data-orientation="horizontal"]
    :is(
      .suite-pipeline-flow__connector,
      .viking-pipeline-flow__connector,
      .fj-pipeline-flow__connector
    ) {
    width: auto;
    height: 2px;
    min-height: 0;
    min-width: var(--suite-space-2);
  }
}

:is(
  .suite-pipeline-flow__body,
  .viking-pipeline-flow__body,
  .fj-pipeline-flow__body
) {
  flex: 1;
  min-width: 0;
  padding-bottom: var(--suite-space-3);
}

@media (min-width: 768px) {
  :is(
      .suite-pipeline-flow,
      .viking-pipeline-flow,
      .fj-pipeline-flow
    )[data-orientation="horizontal"]
    :is(
      .suite-pipeline-flow__body,
      .viking-pipeline-flow__body,
      .fj-pipeline-flow__body
    ) {
    padding-bottom: 0;
    padding-inline-end: var(--suite-space-2);
  }
}

:is(
  .suite-pipeline-flow__title,
  .viking-pipeline-flow__title,
  .fj-pipeline-flow__title
) {
  margin: 0;
  font-size: var(--suite-text-sm);
  font-weight: var(--suite-weight-semibold);
  color: var(--suite-ink);
  line-height: var(--suite-leading-tight);
}

:is(
  .suite-pipeline-flow__detail,
  .viking-pipeline-flow__detail,
  .fj-pipeline-flow__detail
) {
  margin: var(--suite-space-0-5) 0 0;
  font-size: var(--suite-text-sm);
  color: var(--suite-ink-muted);
  line-height: var(--suite-leading-normal);
}

:is(
  .suite-pipeline-flow__empty,
  .viking-pipeline-flow__empty,
  .fj-pipeline-flow__empty
) {
  margin: 0;
  font-size: var(--suite-text-sm);
  color: var(--suite-ink-muted);
}

/* =============================================================================
   Stream status (near-real-time; never claims "Live")
   ============================================================================= */
:is(.suite-stream-status, .viking-stream-status, .fj-stream-status) {
  display: inline-flex;
  align-items: center;
  gap: var(--suite-space-1);
  min-height: var(--suite-control-height-sm);
  padding: 0 var(--suite-space-2);
  border: 1px solid var(--suite-border);
  border-radius: var(--suite-radius-pill);
  background: var(--suite-surface);
  font-family: var(--suite-font-sans);
  font-size: var(--suite-text-xs);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-wide);
  color: var(--suite-ink-muted);
  box-sizing: border-box;
}

:is(
  .suite-stream-status,
  .viking-stream-status,
  .fj-stream-status
)[data-tone="accent"] {
  color: var(--suite-accent);
  border-color: color-mix(
    in srgb,
    var(--suite-accent) 40%,
    var(--suite-border)
  );
}

:is(
  .suite-stream-status,
  .viking-stream-status,
  .fj-stream-status
)[data-tone="warning"] {
  color: var(--suite-warning-text);
  border-color: color-mix(
    in srgb,
    var(--suite-warning) 40%,
    var(--suite-border)
  );
}

:is(
  .suite-stream-status__dot,
  .viking-stream-status__dot,
  .fj-stream-status__dot
) {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--suite-radius-pill);
  background: currentColor;
  flex-shrink: 0;
}

:is(
  .suite-stream-status__label,
  .viking-stream-status__label,
  .fj-stream-status__label
) {
  line-height: var(--suite-leading-tight);
  white-space: nowrap;
}

/* =============================================================================
   Page shell / section / stack
   ============================================================================= */
:is(.suite-page-shell, .viking-page-shell, .fj-page-shell) {
  display: block;
  width: 100%;
  max-width: var(--suite-content-max);
  margin-inline: auto;
  padding-inline: var(--suite-page-gutter);
  box-sizing: border-box;
}

:is(.suite-section, .viking-section, .fj-section) {
  display: block;
  margin-block: var(--suite-section-gap);
}

:is(.suite-section, .viking-section, .fj-section):first-child {
  margin-block-start: 0;
}

:is(.suite-stack, .viking-stack, .fj-stack) {
  display: flex;
  flex-direction: column;
  gap: var(--_stack-gap, var(--suite-block-gap));
}

:is(
  .suite-stack,
  .viking-stack,
  .fj-stack,
  .suite-page-shell,
  .viking-page-shell,
  .fj-page-shell
).suite-stack--tight,
:is(
  .suite-stack,
  .viking-stack,
  .fj-stack,
  .suite-page-shell,
  .viking-page-shell,
  .fj-page-shell
).fj-stack--tight,
:is(.suite-stack, .viking-stack, .fj-stack).viking-stack--tight {
  --_stack-gap: var(--suite-space-2);
}

:is(
  .suite-stack,
  .viking-stack,
  .fj-stack,
  .suite-page-shell,
  .viking-page-shell,
  .fj-page-shell
).suite-stack--compact,
:is(
  .suite-stack,
  .viking-stack,
  .fj-stack,
  .suite-page-shell,
  .viking-page-shell,
  .fj-page-shell
).fj-stack--compact {
  --_stack-gap: var(--suite-space-3);
}

:is(
  .suite-stack,
  .viking-stack,
  .fj-stack,
  .suite-page-shell,
  .viking-page-shell,
  .fj-page-shell
).suite-stack--loose,
:is(
  .suite-stack,
  .viking-stack,
  .fj-stack,
  .suite-page-shell,
  .viking-page-shell,
  .fj-page-shell
).fj-stack--loose {
  --_stack-gap: var(--suite-section-gap);
}

:is(.suite-stack, .viking-stack, .fj-stack).suite-stack--center,
:is(.suite-stack, .viking-stack, .fj-stack).fj-stack--center,
:is(.suite-stack, .viking-stack, .fj-stack).viking-stack--center {
  align-items: center;
  text-align: center;
}

:is(.suite-stack, .viking-stack, .fj-stack)[data-direction="row"] {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

/* =============================================================================
   Media (images) — responsive by default; pair with loading/decoding/fetchpriority
   Hero / LCP: data-priority="high" + fetchpriority="high" + loading="eager"
   Content: loading="lazy" decoding="async" (set on <img> — CSS cannot set these)
   ============================================================================= */
:is(.suite-media, .viking-media, .fj-media) {
  display: block;
  max-width: 100%;
}

:is(.suite-media, .viking-media, .fj-media) img,
:is(.suite-media, .viking-media, .fj-media) picture {
  display: block;
  max-width: 100%;
  height: auto;
}

:is(.suite-media, .viking-media, .fj-media)[data-priority="high"] img {
  content-visibility: visible;
}

:is(.suite-landing-mark, .landing__hero-mark) {
  display: block;
  width: 4rem;
  height: 4rem;
  max-width: 100%;
  object-fit: contain;
  content-visibility: visible;
}

/* =============================================================================
   Motion
   ============================================================================= */
@keyframes suite-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@keyframes suite-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes suite-fade-in {
  from {
    opacity: 0;
    transform: translateY(var(--suite-reveal-distance, 0.5rem));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes suite-toast-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* WCAG 2.3.3 Animation from Interactions — suite-wide reduced-motion contract.
   Tokens zero durations; this kill-switch covers hardcoded keyframes (shimmer/spin)
   and smooth scrolling so FORJD (suite CSS only) matches DEML a11y.scss. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  :is(.suite-skeleton, .viking-skeleton, .fj-skeleton) {
    animation: none !important;
    background: var(--suite-surface-2);
  }

  :is(
    .suite-empty,
    .viking-empty,
    .fj-empty,
    .suite-loading,
    .viking-loading,
    .fj-loading,
    .suite-loading-overlay,
    .viking-loading-overlay,
    .fj-loading-overlay,
    .suite-error-state,
    .viking-error-state,
    .fj-error-state,
    .suite-dialog,
    .viking-dialog,
    .fj-dialog,
    .suite-sheet,
    .viking-sheet,
    .fj-sheet,
    .suite-toast,
    .viking-toast,
    .fj-toast
  ) {
    animation: none !important;
  }

  :is(
    .suite-btn-spinner,
    .viking-btn-spinner,
    .fj-btn-spinner,
    .suite-spinner,
    .viking-spinner,
    .fj-spinner
  ) {
    animation: none !important;
    border-top-color: var(--suite-primary);
  }

  :is(.suite-btn, .viking-btn, .fj-btn):hover:not(:disabled),
  :is(.suite-btn, .viking-btn, .fj-btn):active:not(:disabled),
  :is(.suite-card, .viking-card, .fj-card)[data-interactive="true"]:hover,
  :is(.suite-card, .viking-card, .fj-card)[data-interactive="true"]:active,
  :is(.suite-tab, .viking-tab, .fj-tab):hover,
  :is(.suite-tab, .viking-tab, .fj-tab):active,
  :is(.suite-nav-link, .viking-nav-link, .fj-nav-link):hover,
  :is(.suite-nav-link, .viking-nav-link, .fj-nav-link):active,
  :is(
    .suite-theme-toggle,
    .viking-theme-toggle,
    .fj-theme-toggle,
    .theme-toggle-btn
  ):hover,
  :is(
    .suite-theme-toggle,
    .viking-theme-toggle,
    .fj-theme-toggle,
    .theme-toggle-btn
  ):active,
  :is(
    .suite-disclosure-trigger,
    .viking-disclosure-trigger,
    .fj-disclosure-trigger
  ):hover,
  :is(
    .suite-disclosure-trigger,
    .viking-disclosure-trigger,
    .fj-disclosure-trigger
  ):active {
    transform: none;
  }
}

/* =============================================================================
   Elevation utilities — hierarchy only (never decorative stacks)
   1 flat hairline · 2 raised panel · 3 floating · 4 modal · inset wells
   ============================================================================= */
:is(.suite-elevation-1, .viking-elevation-1, .fj-elevation-1) {
  box-shadow: var(--suite-elevation-1);
}

:is(.suite-elevation-2, .viking-elevation-2, .fj-elevation-2) {
  box-shadow: var(--suite-elevation-2);
}

:is(.suite-elevation-3, .viking-elevation-3, .fj-elevation-3) {
  box-shadow: var(--suite-elevation-3);
}

:is(.suite-elevation-4, .viking-elevation-4, .fj-elevation-4) {
  box-shadow: var(--suite-elevation-4);
}

:is(.suite-elevation-inset, .viking-elevation-inset, .fj-elevation-inset) {
  box-shadow: var(--suite-elevation-inset);
}

/* Glass only on floating chrome — pair with elevation-3/4 */
:is(.suite-glass, .viking-glass, .fj-glass) {
  background: var(--suite-glass);
  border-color: var(--suite-border-strong);
  -webkit-backdrop-filter: blur(var(--suite-glass-blur));
  backdrop-filter: blur(var(--suite-glass-blur));
}

:is(.suite-glass-strong, .viking-glass-strong, .fj-glass-strong) {
  background: var(--suite-glass-strong);
  border-color: var(--suite-border-strong);
  -webkit-backdrop-filter: blur(var(--suite-glass-blur));
  backdrop-filter: blur(var(--suite-glass-blur));
}

@media (prefers-reduced-transparency: reduce) {
  :is(
    .suite-dialog,
    .viking-dialog,
    .fj-dialog,
    .suite-sheet,
    .viking-sheet,
    .fj-sheet,
    .suite-search-palette,
    .viking-search-palette,
    .fj-search-palette,
    .suite-toast,
    .viking-toast,
    .fj-toast,
    .suite-loading-panel,
    .viking-loading-panel,
    .fj-loading-panel,
    .suite-glass,
    .viking-glass,
    .fj-glass,
    .suite-glass-strong,
    .viking-glass-strong,
    .fj-glass-strong
  ) {
    background: var(--suite-surface-elevated);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  :is(
    .suite-dialog,
    .viking-dialog,
    .fj-dialog,
    .suite-sheet,
    .viking-sheet,
    .fj-sheet,
    .suite-search-palette-backdrop,
    .viking-search-palette-backdrop,
    .fj-search-palette-backdrop
  )::backdrop,
  :is(.suite-loading-overlay, .viking-loading-overlay, .fj-loading-overlay)
    > .suite-loading-backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}