@charset "UTF-8";
/*! DEML Design Tokens — compiled from Viking-UI canonical tokens.
 *  Static CSS: npm run build:viking-ui:package */
/*! DEML Design Tokens
 *  Suite product chrome: ../tokens/suite-tokens.css (--suite-* + aliases)
 *  Primitive scales / charts: _variables.scss + _series-colors.scss
 *  Build: npm run build:viking-ui:package */
:root {
  color-scheme: dark light;
  /* ── Immutable DEML brand artwork colors ────────────────────────────────
     These are reserved for logos, favicons, app icons, and social previews.
     Product UI continues to use the semantic navy/electric token scales. */
  --viking-brand-navy: #070c20;
  --viking-brand-blue: #0078ff;
  /* ── Deep navy surfaces (precision-engineered industrial luxury) ────
     Stepped elevation for visual depth and hierarchy. Darker steps recede,
     mid steps provide rich card surfaces, lighter steps for raised controls.
     All elevation uses token stepping, never stacked opacity. */
  --viking-navy-1000: #01030a;
  --viking-navy-950: #020610;
  --viking-navy-900: #080d1f;
  --viking-navy-850: #0c1229;
  --viking-navy-800: #101b33;
  --viking-navy-750: #14203c;
  --viking-navy-700: #18263f;
  --viking-navy-650: #1c2a48;
  --viking-navy-600: #1e3054;
  --viking-navy-500: #284068;
  --viking-navy-400: #39547f;
  --viking-navy-300: #58719e;
  --viking-navy-200: #8fa2c2;
  --viking-navy-100: #d7e0ef;
  /* ── Electric blue accents (primary CTA, focus, links) ───────────────── */
  --viking-electric-900: #04225f;
  --viking-electric-800: #073a99;
  --viking-electric-700: #0a4fd4;
  --viking-electric-600: #1565f0;
  --viking-electric-500: #2176ff;
  --viking-electric-400: #4d94ff;
  --viking-electric-300: #7ab0ff;
  --viking-electric-200: #b6d3ff;
  --viking-electric-100: #e7f1ff;
  /* ── Charcoal surfaces (legacy alias — maps to navy in semantic tokens) ─ */
  --viking-charcoal-950: var(--viking-navy-950);
  --viking-charcoal-900: var(--viking-navy-900);
  --viking-charcoal-850: var(--viking-navy-850);
  --viking-charcoal-800: var(--viking-navy-800);
  --viking-charcoal-750: var(--viking-navy-750);
  --viking-charcoal-700: var(--viking-navy-700);
  --viking-charcoal-650: var(--viking-navy-650);
  --viking-charcoal-600: var(--viking-navy-600);
  --viking-charcoal-500: var(--viking-navy-500);
  --viking-charcoal-400: var(--viking-navy-400);
  --viking-charcoal-300: var(--viking-navy-300);
  --viking-charcoal-200: var(--viking-navy-200);
  --viking-charcoal-100: var(--viking-navy-100);
  /* ── Metallic accents (borders, dividers, subtle depth) ────────────────── */
  --viking-metallic-600: #555555;
  --viking-metallic-500: #666666;
  --viking-metallic-400: #777777;
  --viking-metallic-300: #999999;
  --viking-metallic-200: #aaaaaa;
  --viking-metallic-100: #bbbbbb;
  --viking-metallic-050: #e6e8ec;
  /* ── Primary accent — electric blue (CTAs, focus, links) ───────────────── */
  --viking-teal-700: var(--viking-electric-700);
  --viking-teal-600: var(--viking-electric-600);
  --viking-teal-500: var(--viking-electric-500);
  --viking-teal-400: var(--viking-electric-400);
  --viking-teal-300: var(--viking-electric-300);
  /* ── Secondary accent — rich crimson (emphasis, destructive) ───────────── */
  --viking-crimson-700: #7a2231;
  --viking-crimson-600: #922b3e;
  --viking-crimson-500: #a83344;
  --viking-crimson-400: #c44355;
  --viking-crimson-300: #dc6b78;
  --viking-crimson-100: #fde8ec;
  /* ── Refined accents — data, info, and product moments ────────────────── */
  --viking-cyan-600: #168aad;
  --viking-cyan-500: #1fa2c9;
  --viking-cyan-400: #47bee0;
  --viking-violet-600: #6f5bd7;
  --viking-violet-500: #8674f0;
  --viking-amber-600: #a77912;
  --viking-amber-500: #d69e2e;
  /* ── Status (refined for premium palette) ──────────────────────────────── */
  --viking-green-500: #2a9d8f;
  /* Suite gold — elevated from FORJD institutional accent (SUITE_UI_UNIFICATION) */
  --viking-gold-500: #d4af37;
  /* Info / chart series 6 — electric blue family */
  --viking-blue-500: var(--viking-electric-400);
  --viking-red-500: var(--viking-crimson-500);
  /* ── Neutrals ──────────────────────────────────────────────────────────── */
  --viking-ink-1000: #000000;
  --viking-ink-950: #050609;
  --viking-ink-900: #0c0f14;
  --viking-ink-800: #151a22;
  --viking-ink-700: #202735;
  --viking-slate-100: #f4f7fb;
  --viking-slate-050: #fbfcfe;
  --viking-white: #f5f5f5;
  --viking-white-pure: #ffffff;
  --viking-black: #000000;
  /* ── Spacing — 4px primitive grid, stable 8px compatibility scale ───────
     Existing numbered tokens retain their public values. New component work
     consumes semantic roles below, which combine 4px and 8px increments. */
  --viking-grid-unit: 4px;
  --viking-space-unit: 8px;
  --viking-space-0: 0;
  --viking-space-px: 1px; /* hairline borders only — not layout spacing */
  --viking-space-0-5: 4px;
  --viking-space-half: var(--viking-space-0-5); /* deprecated alias → 0-5 */
  --viking-space-1: 8px;
  --viking-space-2: 16px;
  --viking-space-3: 24px;
  --viking-space-4: 32px;
  --viking-space-5: 40px;
  --viking-space-6: 48px;
  --viking-space-7: 56px;
  --viking-space-8: 64px;
  --viking-space-9: 80px;
  --viking-space-10: 96px;
  --viking-space-11: 112px;
  --viking-space-12: 128px;
  --viking-space-14: 160px;
  --viking-space-16: 192px;
  --viking-space-20: 256px;
  --viking-space-24: 320px;
  /* Semantic spacing roles keep component rhythm boringly consistent. */
  --viking-space-inline-gap: var(--viking-space-0-5);
  --viking-space-control-gap: var(--viking-space-1);
  --viking-space-compact-gap: 12px;
  --viking-space-content-gap: var(--viking-space-2);
  --viking-space-container-gap: var(--viking-space-3);
  --viking-space-section-gap: var(--viking-space-4);
  --viking-space-page-gap: var(--viking-space-6);
  /* Deprecated aliases retain source compatibility during migration. */
  --viking-space-1-5: var(--viking-space-2);
  --viking-space-2-5: var(--viking-space-2);
  --viking-space-8-5: 72px;
  /* ── Surface recipes — deterministic hierarchy (dark-first) ──────────────
     Components consume these instead of raw navy steps for consistent depth. */
  --viking-surface-recipe: var(--viking-surface);
  --viking-surface-recipe-elevated: var(--viking-surface-raised);
  --viking-surface-recipe-inset: var(--viking-surface-inset);
  --viking-surface-recipe-muted: var(--viking-surface-alt);
  --viking-surface-muted: var(--viking-surface-alt);
  --viking-surface-control: var(--viking-surface-inset);
  /* ── Typography (Inter self-hosted — see _fonts.scss) ───────────────────── */
  --viking-font-family:
    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --viking-font-family-mono:
    ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas,
    monospace;
  --viking-font-size-2xs: 11px;
  --viking-font-size-3xs: 10px;
  --viking-font-size-xs: 12px;
  --viking-font-size-sm: 14px;
  --viking-font-size-ui: 14px;
  --viking-font-size-base: 16px;
  /* Alias used widely in surface SCSS — keep in sync with base */
  --viking-font-size: var(--viking-font-size-base);
  --viking-font-size-md: 18px;
  --viking-font-size-lg: 20px;
  --viking-font-size-xl: 24px;
  --viking-font-size-2xl: 30px;
  --viking-font-size-3xl: 36px;
  --viking-font-size-4xl: 48px;
  --viking-font-size-5xl: 60px;
  --viking-font-size-6xl: 72px;
  --viking-font-size-display: clamp(2.5rem, 7vw, 3rem);
  --viking-font-size-display-lg: clamp(2.25rem, 5vw, 3.75rem);
  --viking-font-size-display-md: clamp(2rem, 4.5vw, 3rem);
  --viking-font-size-headline: clamp(1.35rem, 3.2vw, 2rem);
  --viking-font-size-headline-quiet: clamp(1.2rem, 2.6vw, 1.65rem);
  --viking-font-size-title: clamp(1.5rem, 3.5vw, 2rem);
  --viking-font-size-title-lg: clamp(1.75rem, 5vw, 2.5rem);
  --viking-font-size-title-sm: clamp(1.35rem, 3vw, 1.75rem);
  --viking-font-size-lead: 1.25rem;
  --viking-font-size-lead-fluid: clamp(1.05rem, 2vw, 1.25rem);
  --viking-font-weight-regular: 400;
  --viking-font-weight-medium: 500;
  --viking-font-weight-semibold: 600;
  --viking-font-weight-bold: 700;
  --viking-font-weight-extrabold: 800;
  --viking-line-height-none: 1;
  --viking-line-height-tight: 1.2;
  --viking-line-height-snug: 1.35;
  --viking-line-height-normal: 1.5;
  --viking-line-height-relaxed: 1.6;
  --viking-line-height-loose: 1.7;
  /* Industrial tracking elevated from FORJD brand/caps roles (suite lock) */
  --viking-letter-spacing-tighter: -0.03em;
  --viking-letter-spacing-tight: -0.03em;
  --viking-letter-spacing-normal: 0;
  --viking-letter-spacing-wide: 0.08em;
  --viking-letter-spacing-wider: 0.1em;
  --viking-letter-spacing-caps: 0.1em;
  --viking-letter-spacing-display: 0.14em;
  --viking-type-caption: var(--viking-font-weight-medium)
    var(--viking-font-size-xs) / var(--viking-line-height-normal)
    var(--viking-font-family);
  --viking-type-body-sm: var(--viking-font-weight-regular)
    var(--viking-font-size-sm) / var(--viking-line-height-normal)
    var(--viking-font-family);
  --viking-type-body: var(--viking-font-weight-regular)
    var(--viking-font-size-base) / var(--viking-line-height-normal)
    var(--viking-font-family);
  --viking-type-body-lg: var(--viking-font-weight-regular)
    var(--viking-font-size-md) / var(--viking-line-height-relaxed)
    var(--viking-font-family);
  --viking-type-heading-sm: var(--viking-font-weight-semibold)
    var(--viking-font-size-lg) / var(--viking-line-height-tight)
    var(--viking-font-family);
  --viking-type-heading: var(--viking-font-weight-bold)
    var(--viking-font-size-2xl) / var(--viking-line-height-tight)
    var(--viking-font-family);
  --viking-type-display: var(--viking-font-weight-extrabold)
    var(--viking-font-size-4xl) / var(--viking-line-height-none)
    var(--viking-font-family);
  --viking-type-label: var(--viking-font-weight-semibold)
    var(--viking-font-size-sm) / var(--viking-line-height-snug)
    var(--viking-font-family);
  --viking-type-heading-lg: var(--viking-font-weight-bold)
    var(--viking-font-size-3xl) / var(--viking-line-height-tight)
    var(--viking-font-family);
  /* Semantic type roles */
  --viking-text-heading: var(--viking-text);
  --viking-text-body: var(--viking-text);
  --viking-surface-header: var(--viking-surface-raised);
  --viking-text-on-header: var(--viking-text);
  /* ── Border radius — 6–12px premium feel ─────────────────────────────────── */
  --viking-radius-xs: 4px;
  --viking-radius-sm: 6px;
  --viking-radius: 8px;
  --viking-radius-md: 10px;
  --viking-radius-lg: 12px;
  --viking-radius-xl: 16px;
  --viking-radius-2xl: 24px;
  --viking-radius-pill: 999px;
  --viking-radius-full: var(--viking-radius-pill);
  /* Professional rounding: friendly, but never bubbly. */
  --viking-card-radius: var(--viking-radius-lg);
  --viking-button-radius: var(--viking-radius);
  /* ── Elevation — sophisticated machined depth and hierarchy ─────────────
     Dark navy benefits from layered low-opacity drops + crisp metallic
     top-edge specular highlights. Higher elevation = stronger drop + brighter
     inset line. Use token stepping for surfaces; shadows provide tactile lift.
     Never stack many layers — prefer stepped navy + one good shadow. */
  --viking-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --viking-shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.12);
  --viking-shadow-md:
    0 2px 4px rgba(0, 0, 0, 0.18), 0 10px 24px rgba(0, 0, 0, 0.16);
  --viking-shadow-lg:
    0 4px 8px rgba(0, 0, 0, 0.2), 0 20px 40px rgba(0, 0, 0, 0.2);
  --viking-shadow-xl:
    0 24px 48px rgba(0, 0, 0, 0.36), 0 8px 18px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --viking-shadow-inner:
    inset 0 1px 2px rgba(0, 0, 0, 0.32),
    inset 0 -1px 0 rgba(255, 255, 255, 0.015);
  --viking-shadow-hover:
    0 2px 4px rgba(0, 0, 0, 0.2), 0 12px 28px rgba(0, 0, 0, 0.2);
  --viking-shadow-focus:
    0 0 0 var(--viking-ring-offset) var(--viking-bg),
    0 0 0 calc(var(--viking-ring-offset) + var(--viking-ring-width))
      var(--viking-ring);
  --viking-surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  /* Border contracts */
  --viking-border-width: 1px;
  --viking-border-style: solid;
  /* ── Refined surface layering for depth (dark-first) ───────────────────── */
  --viking-surface-inset: var(--viking-navy-850);
  /* ── Chart scale — responsive dashboard inlay ─────────────────────────── */
  --viking-chart-ratio: 2 / 1;
  --viking-chart-plot-height: clamp(
    var(--viking-space-20),
    46cqi,
    var(--viking-space-24)
  );
  --viking-chart-min-height: clamp(12rem, 26vw, 20rem);
  --viking-chart-max-height: none;
  --viking-chart-fill-min-height: clamp(13rem, 28vw, 21rem);
  --viking-chart-fill-max-height: none;
  --viking-chart-fill-min-height-lg: clamp(15rem, 30vw, 23rem);
  --viking-chart-fill-max-height-lg: none;
  --viking-chart-empty-min-height: var(--viking-chart-fill-min-height);
  --viking-chart-empty-min-height-lg: var(--viking-chart-fill-min-height-lg);
  /* Panel shells sized to the plot (header + body + breathing) */
  --viking-chart-panel-min-height-md: 20rem;
  --viking-chart-panel-min-height-lg: 22rem;
  --viking-chart-panel-body-min-height-md: 15rem;
  --viking-chart-panel-body-min-height-lg: 16.5rem;
  --viking-chart-sparkline-height: 2.75rem;
  --viking-chart-map-min-height: 24rem;
  --viking-chart-padding: var(--viking-space-2) var(--viking-space-2);
  /* ── Breakpoints (THEME.md mobile-first) ────────────────────────────────── */
  --viking-bp-sm: 600px;
  --viking-bp-md: 768px;
  --viking-bp-sidebar: 901px;
  --viking-bp-lg: 1024px;
  --viking-bp-xl: 1440px;
  --viking-bp-2xl: 1920px;
  /* ── Motion ──────────────────────────────────────────────────────────────── */
  --viking-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --viking-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --viking-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --viking-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --viking-duration-instant: 75ms;
  --viking-duration-fast: 150ms;
  --viking-duration: 250ms;
  --viking-duration-slow: 350ms;
  --viking-duration-slower: 500ms;
  --viking-transition-colors:
    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),
    fill var(--viking-duration) var(--viking-ease-default),
    stroke var(--viking-duration) var(--viking-ease-default);
  --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),
    fill var(--viking-duration) var(--viking-ease-default),
    stroke var(--viking-duration) var(--viking-ease-default),
    transform var(--viking-duration) var(--viking-ease-default),
    opacity var(--viking-duration) var(--viking-ease-default);
  --viking-transition: all var(--viking-duration) var(--viking-ease-default);
  --viking-transition-fast: all var(--viking-duration-fast)
    var(--viking-ease-default);
  --viking-transition-transform: transform var(--viking-duration)
    var(--viking-ease-emphasized);
  /* ── Interactive state (1px lift / press — match suite-tokens) ───────────── */
  --viking-state-hover-lift: -1px;
  --viking-state-press-sink: 1px;
  --viking-state-nudge: 2px;
  --viking-state-reveal-distance: 0.5rem;
  --viking-state-active-scale: var(--suite-active-scale, 0.985);
  --viking-state-disabled-opacity: 0.48;
  /* ── Controls (40px dense desktop; ≥44px touch on mobile) ─────────────── */
  --viking-touch-target-min: 44px;
  --viking-control-height: 40px;
  --viking-control-height-sm: 32px;
  --viking-control-height-xs: 24px;
  --viking-control-padding-x: var(--viking-space-2); /* 16px — on-grid */
  --viking-btn-min-width: 120px;
  --viking-select-panel-bg: var(--viking-surface-raised);
  --viking-select-half-max-width: min(100%, 24rem);
  /* ── Unified component language ───────────────────────────────────────── */
  --viking-component-radius: var(--viking-radius);
  --viking-component-surface-radius: var(--viking-radius-lg);
  --viking-component-border: var(--viking-border);
  --viking-component-border-hover: var(--viking-border-strong);
  --viking-component-border-active: var(--viking-border-accent);
  --viking-component-bg: var(--viking-surface);
  --viking-component-bg-subtle: var(--viking-surface-alt);
  --viking-component-bg-inset: var(--viking-surface-inset);
  --viking-component-hover-bg: var(--viking-state-hover-bg);
  --viking-component-selected-bg: var(--viking-state-selected-bg);
  --viking-component-shadow: var(--viking-shadow-xs);
  --viking-component-shadow-raised: var(--viking-shadow-sm);
  --viking-focus-shadow: 0 0 0 3px var(--viking-accent-soft);
  --viking-badge-height: 24px;
  --viking-table-cell-padding-y: var(--viking-space-1-5);
  --viking-table-cell-padding-x: var(--viking-space-2);
  --viking-navigation-item-height: var(--viking-touch-target-min);
  /* ── Layout ────────────────────────────────────────────────────────────── */
  --viking-container-max-width: 1260px;
  --viking-container-max-width-wide: 1440px; /* dashboard/analytics pages */
  --viking-container-wide-max-width: var(--viking-container-max-width-wide);
  --viking-container-max-width-readable: 48rem;
  --viking-navbar-height: var(--viking-space-7); /* 56px */
  --viking-sidebar-width: 256px; /* 32 × 8px — on-grid layout constant */
  --viking-trailing-width: 20rem;
  --viking-split-panel-height-compact: 12rem;
  --viking-split-panel-height-default: 20rem;
  --viking-split-panel-height-large: 28rem;
  --viking-layout-item-compact: 16rem; /* 256px / 32 grid units */
  --viking-layout-item-default: 20rem; /* 320px / 40 grid units */
  --viking-layout-item-wide: 24rem; /* 384px / 48 grid units */
  --viking-layout-columns: 12;
  --viking-layout-column-gap: var(--viking-space-3);
  --viking-layout-row-gap: var(--viking-space-3);
  /* ── Layout rhythm — premium spacing enforcement (THEME.md §3) ───────────
     All gaps/padding resolve to --viking-space-* integer steps (or 0-5 tight).
     App pages share the same stack/card tokens via viking-ui.css. */
  --viking-page-gutter: clamp(
    var(--viking-space-2),
    4vw,
    var(--viking-space-4)
  );
  --viking-page-gutter-lg: var(--viking-space-4);
  --viking-page-gutter-xl: var(--viking-space-8);
  --viking-page-stack-gap: var(--viking-space-5);
  --viking-page-section-gap: var(--viking-space-9);
  --viking-dashboard-grid-gap: var(--viking-space-2);
  --viking-section-padding-y: var(--viking-space-8);
  --viking-section-padding-y-compact: var(--viking-space-4);
  --viking-card-padding: var(--viking-space-3);
  --viking-card-padding-compact: var(--viking-space-2);
  --viking-card-content-gap: var(--viking-space-3);
  --viking-card-content-gap-compact: var(--viking-space-compact-gap);
  --viking-panel-padding: var(--viking-space-3);
  --viking-panel-header-padding: var(--viking-space-2) var(--viking-space-3);
  --viking-form-max-width: 42rem;
  --viking-form-narrow-max-width: 28rem;
  --viking-content-readable-max-width: 48rem;
  --viking-card-min-width: 0;
  --viking-card-max-width: none;
  --viking-metric-card-min-height: 7.25rem;
  --viking-metric-card-tall-min-height: 9.5rem;
  --viking-metric-card-min-width: 10rem;
  --viking-surface-hairline-strength: 36%;
  /* Semantic component surfaces and seams */
  --viking-surface-container: var(--viking-surface);
  --viking-surface-container-muted: var(--viking-surface-alt);
  --viking-border-container: var(--viking-border);
  --viking-border-control: var(--viking-border-strong);
  --viking-border-divider: var(--viking-border-subtle);
  /* ── Layering ────────────────────────────────────────────────────────────── */
  --viking-z-overlay: 1000;
  --viking-z-toast: 1100;
  --viking-z-tooltip: 1200;
  --viking-z-external-challenge: 2147483647;
  /* ── Chart — clean minimal SVG analytics (2:1, soft grid, cursor) ─ */
  --viking-chart-text-size: var(--viking-font-size-xs);
  --viking-chart-axis-size: var(--viking-chart-text-size);
  --viking-chart-axis-size-mobile: var(--viking-chart-text-size);
  --viking-chart-label-size: var(--viking-chart-text-size);
  /* Internal breathing (gutters + viewport padding) */
  --viking-chart-gutter-default: 16px 24px 48px 48px; /* top right bottom left — 8px grid */
  --viking-chart-gutter-fill: 8px 16px 32px 32px;
  --viking-chart-padding: var(--viking-space-2) 0;
  --viking-chart-padding-fill: var(--viking-space-1) 0;
  /* Grid & axes */
  --viking-chart-grid-stroke: color-mix(
    in srgb,
    var(--viking-text-muted) 15%,
    transparent
  );
  --viking-chart-grid-width: 1;
  --viking-chart-grid-dash: 4 4;
  --viking-chart-axis-stroke: color-mix(
    in srgb,
    var(--viking-text-muted) 40%,
    transparent
  );
  --viking-chart-axis-width: 1;
  --viking-chart-tick-length: 4px;
  --viking-chart-axis-color: var(--viking-text-muted);
  --viking-chart-cursor-stroke: color-mix(
    in srgb,
    var(--viking-text) 32%,
    transparent
  );
  --viking-chart-cursor-width: 1;
  --viking-chart-cursor-dash: 4 4;
  /* Lines, areas, points, bars */
  --viking-chart-line-width: 2;
  --viking-chart-line-width-fill: 2;
  --viking-chart-area-opacity: 0.2;
  --viking-chart-area-opacity-start: 0.48;
  --viking-chart-area-opacity-end: 0;
  --viking-chart-point-radius: 5;
  --viking-chart-point-stroke: var(--viking-surface);
  --viking-chart-bar-radius: 2px;
  --viking-chart-bar-min-height: 3px;
  /* Legend */
  --viking-chart-legend-gap: var(--viking-space-2) var(--viking-space-3);
  --viking-chart-legend-margin: var(--viking-space-3) 0 0;
  --viking-chart-legend-margin-fill: var(--viking-space-4) 0 0;
  --viking-chart-swatch-size: 8px;
  --viking-chart-legend-size: var(--viking-chart-text-size);
  /* Tooltip */
  --viking-chart-tooltip-bg: color-mix(
    in srgb,
    var(--viking-surface) 94%,
    transparent
  );
  --viking-chart-tooltip-border: color-mix(
    in srgb,
    var(--viking-border) 65%,
    transparent
  );
  --viking-chart-tooltip-text: var(--viking-text);
  --viking-chart-tooltip-size: var(--viking-chart-text-size);
  --viking-chart-tooltip-padding: 6px 10px;
  --viking-chart-tooltip-radius: var(--viking-radius);
  /* Empty / loading */
  --viking-chart-empty-padding: var(--viking-space-5) var(--viking-space-4);
  --viking-chart-empty-gap: var(--viking-space-3);
  /* ── Icons ─────────────────────────────────────────────────────────────────── */
  --viking-icon-size-sm: 16px;
  --viking-icon-size-md: 20px;
  --viking-icon-size-lg: 24px;
  --viking-icon-stroke-width: 1.75;
  --viking-icon-stroke-width-sm: 1.5;
  /* Navbar / Drakkar brand mark — keep Angular and static navbar.js in sync */
  --viking-icon-stroke-width-brand: 1.8;
}

/* ── Dark mode (default) ───────────────────────────────────────────────────
   Suite lock (docs/SUITE_UI_UNIFICATION.md): void-black austerity from FORJD
   + electric command primary from DEML. Solid industrial borders — not washes. */
:root,
html[data-theme=dark] {
  color-scheme: dark;
  --viking-bg: #0a0a0a;
  --viking-bg-subtle: #050505;
  --viking-bg-inverted: var(--viking-white-pure);
  --viking-surface: #111111;
  --viking-surface-alt: #1a1a1a;
  --viking-surface-inset: #050505;
  --viking-surface-raised: #141414;
  --viking-surface-overlay: #111111;
  --viking-text: var(--viking-white);
  --viking-text-muted: var(--viking-metallic-200);
  --viking-text-subtle: var(--viking-metallic-300);
  --viking-text-disabled: var(--viking-metallic-400);
  --viking-text-link: var(--viking-electric-300);
  --viking-text-link-hover: var(--viking-electric-200);
  --viking-text-inverted: var(--viking-bg);
  --viking-border: #222222;
  --viking-border-strong: #666666;
  --viking-border-subtle: color-mix(
    in srgb,
    var(--viking-border) 70%,
    transparent
  );
  --viking-border-accent: color-mix(
    in srgb,
    var(--viking-electric-500) 72%,
    transparent
  );
  --viking-accent: var(--viking-electric-500);
  --viking-accent-hover: var(--viking-electric-400);
  --viking-accent-active: var(--viking-electric-700);
  --viking-accent-content: var(--viking-white-pure);
  --viking-accent-soft: color-mix(
    in srgb,
    var(--viking-electric-500) 18%,
    transparent
  );
  --viking-accent-muted: color-mix(
    in srgb,
    var(--viking-electric-500) 10%,
    transparent
  );
  --viking-accent-strong: var(--viking-electric-300);
  --viking-accent-secondary: var(--viking-crimson-600);
  --viking-accent-secondary-hover: var(--viking-crimson-500);
  --viking-accent-secondary-active: var(--viking-crimson-700);
  --viking-accent-secondary-content: var(--viking-white-pure);
  --viking-accent-secondary-soft: color-mix(
    in srgb,
    var(--viking-crimson-600) 16%,
    transparent
  );
  --viking-success: var(--viking-green-500);
  --viking-success-soft: color-mix(
    in srgb,
    var(--viking-green-500) 14%,
    transparent
  );
  --viking-warning: var(--viking-gold-500);
  --viking-warning-soft: color-mix(
    in srgb,
    var(--viking-gold-500) 16%,
    transparent
  );
  --viking-danger: var(--viking-crimson-500);
  --viking-danger-soft: color-mix(
    in srgb,
    var(--viking-crimson-500) 16%,
    transparent
  );
  --viking-info: var(--viking-blue-500);
  --viking-info-soft: color-mix(
    in srgb,
    var(--viking-blue-500) 14%,
    transparent
  );
  --viking-danger-text: var(--viking-crimson-300);
  --viking-success-text: #5ec4b6;
  --viking-warning-text: #e8c25a;
  --viking-gold-text: #e8c96a;
  --viking-on-danger: var(--viking-white-pure);
  --viking-ring: var(--viking-electric-400);
  --viking-ring-width: 2px;
  --viking-ring-offset: 2px;
  --viking-overlay-backdrop: color-mix(
    in srgb,
    var(--viking-charcoal-950) 72%,
    transparent
  );
  --viking-surface-glass: color-mix(
    in srgb,
    var(--viking-charcoal-800) 82%,
    transparent
  );
  --viking-surface-glass-blur: 12px;
  --viking-state-hover-bg: color-mix(
    in srgb,
    var(--viking-electric-500) 10%,
    transparent
  );
  --viking-state-active-bg: color-mix(
    in srgb,
    var(--viking-electric-700) 14%,
    transparent
  );
  --viking-state-selected-bg: color-mix(
    in srgb,
    var(--viking-electric-500) 18%,
    transparent
  );
  --viking-state-disabled-bg: color-mix(
    in srgb,
    var(--viking-metallic-600) 20%,
    transparent
  );
  --viking-shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.26), 0 4px 12px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --viking-shadow-md:
    0 2px 4px rgba(0, 0, 0, 0.24), 0 10px 24px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --viking-shadow-lg:
    0 4px 8px rgba(0, 0, 0, 0.26), 0 20px 40px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --viking-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);
}

/* ── Light mode ──────────────────────────────────────────────────────────── */
html[data-theme=light] {
  color-scheme: light;
  --viking-bg: var(--viking-slate-050);
  --viking-bg-subtle: var(--viking-slate-100);
  --viking-bg-inverted: var(--viking-charcoal-900);
  --viking-surface: var(--viking-white-pure);
  --viking-surface-alt: var(--viking-slate-100);
  --viking-surface-inset: var(--viking-metallic-050);
  --viking-surface-raised: var(--viking-white-pure);
  --viking-surface-overlay: var(--viking-white-pure);
  --viking-text: var(--viking-charcoal-900);
  --viking-text-muted: var(--viking-metallic-500);
  --viking-text-subtle: var(--viking-metallic-400);
  --viking-text-disabled: var(--viking-metallic-500);
  --viking-text-link: var(--viking-electric-700);
  --viking-text-link-hover: var(--viking-electric-700);
  --viking-text-inverted: var(--viking-white-pure);
  --viking-border: var(--viking-navy-100);
  --viking-border-strong: var(--viking-navy-300);
  --viking-border-subtle: color-mix(
    in srgb,
    var(--viking-metallic-600) 22%,
    transparent
  );
  --viking-border-accent: color-mix(
    in srgb,
    var(--viking-electric-600) 58%,
    transparent
  );
  --viking-accent: var(--viking-electric-600);
  --viking-accent-hover: var(--viking-electric-500);
  --viking-accent-active: var(--viking-electric-700);
  --viking-accent-content: var(--viking-white-pure);
  --viking-accent-soft: color-mix(
    in srgb,
    var(--viking-electric-600) 14%,
    transparent
  );
  --viking-accent-muted: color-mix(
    in srgb,
    var(--viking-electric-600) 8%,
    transparent
  );
  --viking-accent-strong: var(--viking-electric-400);
  --viking-accent-secondary: var(--viking-crimson-700);
  --viking-accent-secondary-hover: var(--viking-crimson-600);
  --viking-accent-secondary-active: var(--viking-crimson-700);
  --viking-accent-secondary-content: var(--viking-white-pure);
  --viking-accent-secondary-soft: color-mix(
    in srgb,
    var(--viking-crimson-700) 12%,
    transparent
  );
  --viking-success-soft: color-mix(
    in srgb,
    var(--viking-green-500) 12%,
    transparent
  );
  --viking-warning-soft: color-mix(
    in srgb,
    var(--viking-gold-500) 14%,
    transparent
  );
  --viking-danger-soft: color-mix(
    in srgb,
    var(--viking-crimson-500) 12%,
    transparent
  );
  --viking-info-soft: color-mix(
    in srgb,
    var(--viking-blue-500) 12%,
    transparent
  );
  --viking-danger-text: var(--viking-crimson-700);
  --viking-success-text: #187066;
  --viking-warning-text: #7a580e;
  --viking-gold-text: #7a6410;
  --viking-on-danger: var(--viking-white-pure);
  --viking-ring: var(--viking-electric-500);
  --viking-overlay-backdrop: color-mix(
    in srgb,
    var(--viking-charcoal-900) 45%,
    transparent
  );
  --viking-surface-glass: color-mix(
    in srgb,
    var(--viking-white-pure) 88%,
    transparent
  );
  --viking-surface-glass-blur: 10px;
  --viking-state-hover-bg: color-mix(
    in srgb,
    var(--viking-electric-600) 8%,
    transparent
  );
  --viking-state-active-bg: color-mix(
    in srgb,
    var(--viking-electric-700) 12%,
    transparent
  );
  --viking-state-selected-bg: color-mix(
    in srgb,
    var(--viking-electric-600) 14%,
    transparent
  );
  --viking-state-disabled-bg: color-mix(
    in srgb,
    var(--viking-metallic-600) 12%,
    transparent
  );
  --viking-shadow-sm:
    0 1px 2px rgba(17, 24, 39, 0.06), 0 4px 12px rgba(17, 24, 39, 0.06);
  --viking-shadow-md:
    0 2px 4px rgba(17, 24, 39, 0.06), 0 10px 24px rgba(17, 24, 39, 0.08);
  --viking-shadow-lg:
    0 4px 8px rgba(17, 24, 39, 0.07), 0 20px 40px rgba(17, 24, 39, 0.1);
  --viking-shadow-hover:
    0 2px 4px rgba(17, 24, 39, 0.08), 0 12px 28px rgba(17, 24, 39, 0.11);
}

/* Respect system preference when no explicit theme is set */
@media (prefers-color-scheme: light) {
  html:not([data-theme=dark]) {
    color-scheme: light;
    --viking-bg: var(--viking-slate-050);
    --viking-bg-subtle: var(--viking-slate-100);
    --viking-bg-inverted: var(--viking-charcoal-900);
    --viking-surface: var(--viking-white-pure);
    --viking-surface-alt: var(--viking-slate-100);
    --viking-surface-inset: var(--viking-metallic-050);
    --viking-surface-raised: var(--viking-white-pure);
    --viking-surface-overlay: var(--viking-white-pure);
    --viking-text: var(--viking-charcoal-900);
    --viking-text-muted: var(--viking-metallic-500);
    --viking-text-subtle: var(--viking-metallic-400);
    --viking-text-disabled: var(--viking-metallic-300);
    --viking-text-link: var(--viking-electric-700);
    --viking-text-link-hover: var(--viking-electric-600);
    --viking-text-inverted: var(--viking-white-pure);
    --viking-border: color-mix(
      in srgb,
      var(--viking-metallic-600) 22%,
      transparent
    );
    --viking-border-strong: color-mix(
      in srgb,
      var(--viking-metallic-600) 38%,
      transparent
    );
    --viking-border-subtle: color-mix(
      in srgb,
      var(--viking-metallic-600) 12%,
      transparent
    );
    --viking-border-accent: color-mix(
      in srgb,
      var(--viking-electric-600) 58%,
      transparent
    );
    --viking-accent: var(--viking-electric-600);
    --viking-accent-hover: var(--viking-electric-500);
    --viking-accent-active: var(--viking-electric-700);
    --viking-accent-content: var(--viking-white-pure);
    --viking-accent-soft: color-mix(
      in srgb,
      var(--viking-electric-600) 10%,
      transparent
    );
    --viking-accent-muted: color-mix(
      in srgb,
      var(--viking-electric-600) 8%,
      transparent
    );
    --viking-accent-strong: var(--viking-electric-400);
    --viking-accent-secondary: var(--viking-crimson-700);
    --viking-accent-secondary-hover: var(--viking-crimson-600);
    --viking-accent-secondary-active: var(--viking-crimson-700);
    --viking-accent-secondary-content: var(--viking-white-pure);
    --viking-accent-secondary-soft: color-mix(
      in srgb,
      var(--viking-crimson-700) 8%,
      transparent
    );
    --viking-success-soft: color-mix(
      in srgb,
      var(--viking-green-500) 12%,
      transparent
    );
    --viking-warning-soft: color-mix(
      in srgb,
      var(--viking-gold-500) 14%,
      transparent
    );
    --viking-danger-soft: color-mix(
      in srgb,
      var(--viking-crimson-500) 12%,
      transparent
    );
    --viking-info-soft: color-mix(
      in srgb,
      var(--viking-blue-500) 12%,
      transparent
    );
    --viking-danger-text: var(--viking-crimson-700);
    --viking-on-danger: var(--viking-white-pure);
    --viking-ring: var(--viking-electric-500);
    --viking-overlay-backdrop: color-mix(
      in srgb,
      var(--viking-charcoal-900) 45%,
      transparent
    );
    --viking-surface-glass: color-mix(
      in srgb,
      var(--viking-white-pure) 88%,
      transparent
    );
    --viking-surface-glass-blur: 10px;
    --viking-state-hover-bg: color-mix(
      in srgb,
      var(--viking-electric-600) 8%,
      transparent
    );
    --viking-state-active-bg: color-mix(
      in srgb,
      var(--viking-electric-700) 12%,
      transparent
    );
    --viking-state-selected-bg: color-mix(
      in srgb,
      var(--viking-electric-600) 14%,
      transparent
    );
    --viking-state-disabled-bg: color-mix(
      in srgb,
      var(--viking-metallic-600) 12%,
      transparent
    );
    --viking-shadow-sm:
      0 1px 2px rgba(17, 17, 17, 0.06), 0 1px 3px rgba(17, 17, 17, 0.08);
    --viking-shadow-md:
      0 2px 4px rgba(17, 17, 17, 0.06), 0 4px 8px rgba(17, 17, 17, 0.08);
    --viking-shadow-lg:
      0 4px 8px rgba(17, 17, 17, 0.06), 0 12px 24px rgba(17, 17, 17, 0.1);
  }
}
/* Fallback when suite-tokens.css is not loaded (suite SoT still wins when present) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --viking-duration-instant: 0ms;
    --viking-duration-fast: 0ms;
    --viking-duration: 0ms;
    --viking-duration-slow: 0ms;
    --viking-state-hover-lift: 0px;
    --viking-state-press-sink: 0px;
    --viking-state-nudge: 0px;
    --viking-state-reveal-distance: 0px;
    --viking-state-active-scale: 1;
    --viking-transition-interactive: none;
    --viking-transition-colors: none;
    --viking-transition-transform: none;
  }
}
:root {
  /* Prefer suite Role B when suite-tokens.css is loaded first (Pass 1).
     Fallbacks keep SCSS-only compiles working. */
  --viking-series-1: var(--suite-series-1, var(--viking-electric-500));
  --viking-series-2: var(--suite-series-2, var(--viking-crimson-600));
  --viking-series-3: var(--suite-series-3, var(--viking-green-500));
  --viking-series-4: var(--suite-series-4, var(--viking-gold-500));
  --viking-series-5: var(--suite-series-5, var(--viking-crimson-500));
  --viking-series-6: var(--suite-series-6, var(--viking-blue-500));
  --viking-series-7: var(--suite-series-7, var(--viking-charcoal-700));
  --viking-series-8: var(--suite-series-8, var(--viking-metallic-500));
  --viking-series-default: var(--suite-series-default, var(--viking-series-1));
  /* Premium palette v3 — electric primary, crimson secondary, semantic + muted slots */
  --viking-series-palette: var(--viking-series-1), var(--viking-series-2),
    var(--viking-series-3), var(--viking-series-4), var(--viking-series-5),
    var(--viking-series-6), var(--viking-series-7), var(--viking-series-8);
}

:root {
  /* Primitive aliases (short names used in older SCSS) */
  --charcoal-950: var(--viking-charcoal-950);
  --charcoal-900: var(--viking-charcoal-900);
  --charcoal-800: var(--viking-charcoal-800);
  --charcoal-700: var(--viking-charcoal-700);
  --charcoal-600: var(--viking-charcoal-600);
  --charcoal-500: var(--viking-charcoal-500);
  --metallic-600: var(--viking-metallic-600);
  --metallic-500: var(--viking-metallic-500);
  --metallic-400: var(--viking-metallic-400);
  --metallic-300: var(--viking-metallic-300);
  --metallic-200: var(--viking-metallic-200);
  --metallic-100: var(--viking-metallic-100);
  --white: var(--viking-white-pure);
  --black: var(--viking-black);
  /* Typography floors */
  --base-font-size: var(--viking-font-size-base);
  --ui-font-size: var(--viking-font-size-sm);
  --header-letter-spacing: var(--viking-letter-spacing-tight);
  /* Spacing — legacy --space-N (aliases onto 8px primary viking scale) */
  --grid-unit: var(--viking-grid-unit);
  --space-0: var(--viking-space-0);
  --space-half: var(--viking-space-0-5);
  --space-0-5: var(--viking-space-0-5);
  --space-1: var(--viking-space-1);
  --space-1-5: var(--viking-space-2);
  --space-2: var(--viking-space-2);
  --space-2-5: var(--viking-space-2);
  --space-3: var(--viking-space-3);
  --space-4: var(--viking-space-4);
  --space-5: var(--viking-space-5);
  --space-6: var(--viking-space-6);
  --space-7: var(--viking-space-7);
  --space-8: var(--viking-space-8);
  --space-8-5: var(--viking-space-8-5);
  --space-9: var(--viking-space-9);
  --space-10: var(--viking-space-10);
  --space-11: var(--viking-space-11);
  --space-12: var(--viking-space-12);
  --space-14: var(--viking-space-14);
  --space-16: var(--viking-space-16);
  --space-20: var(--viking-space-20);
  --space-24: var(--viking-space-24);
  --grid-gap: var(--viking-space-3);
  --card-padding: var(--viking-card-padding);
  /* Layout rhythm aliases */
  --page-gutter: var(--viking-page-gutter);
  --page-gutter-lg: var(--viking-page-gutter-lg);
  --page-stack-gap: var(--viking-page-stack-gap);
  --page-section-gap: var(--viking-page-section-gap);
  --form-max-width: var(--viking-form-max-width);
  --form-narrow-max-width: var(--viking-form-narrow-max-width);
  --content-readable-max-width: var(--viking-content-readable-max-width);
  /* Layout */
  --container-max-width: var(--viking-container-max-width);
  --navbar-height: var(--viking-navbar-height);
  --btn-min-width: var(--viking-btn-min-width);
  /* Radii */
  --border-radius-xs: var(--viking-radius-xs);
  --border-radius-sm: var(--viking-radius-sm);
  --border-radius-md: var(--viking-radius);
  --border-radius-lg: var(--viking-radius-lg);
  --border-radius-xl: var(--viking-radius-xl);
  --border-radius-pill: var(--viking-radius-pill);
  /* Motion & elevation */
  --transition-smooth: var(--viking-transition);
  --shadow-sm: var(--viking-shadow-sm);
  --shadow-md: var(--viking-shadow-md);
  --shadow-lg: var(--viking-shadow-lg);
  --shadow-hover: var(--viking-shadow-hover);
  /* Semantic short names */
  --primary-color: var(--viking-electric-500);
  --accent-color: var(--viking-crimson-600);
  /* Focus */
  --focus-ring-width: var(--viking-ring-width);
  --focus-ring-offset: var(--viking-ring-offset);
}

:root,
html[data-theme=dark] {
  --color-primary: var(--viking-electric-500);
  --color-on-primary: var(--viking-white-pure);
  --color-primary-container: var(--viking-electric-400);
  --color-on-primary-container: var(--viking-charcoal-900);
  --color-surface: var(--viking-charcoal-800);
  --color-on-surface: var(--viking-white);
  --color-background: var(--viking-charcoal-900);
  --color-on-background: var(--viking-white);
  --color-surface-variant: var(--viking-charcoal-700);
  --color-success: var(--viking-green-500);
  --color-warning: var(--viking-gold-500);
  --color-error: var(--viking-crimson-500);
  --color-info: var(--viking-blue-500);
  --color-gauge-red: var(--color-error);
  --border: var(--viking-border);
  --border-layout: var(--viking-border-strong);
  --hover-color: var(--viking-electric-400);
  --bg-color: var(--viking-bg);
  --text-color: var(--viking-text);
  --text-muted: var(--viking-text-muted);
  --card-bg: var(--viking-surface);
  --navbar-bg: color-mix(in srgb, var(--viking-bg) 96%, transparent);
  --link-color: var(--viking-electric-300);
  --link-hover-color: var(--viking-electric-400);
  --hero-title-color: var(--viking-white);
  --primary-text-color: var(--viking-electric-300);
  --button-primary: var(--color-primary);
  --button-primary-text: var(--viking-white-pure);
  --color-dark-grey-btn-bg: var(--viking-charcoal-700);
  --color-dark-grey-btn-text: var(--viking-white);
  --focus-ring-color: var(--viking-electric-400);
}

html[data-theme=light] {
  --color-primary: var(--viking-electric-600);
  --color-on-primary: var(--viking-white-pure);
  --color-primary-container: var(--viking-teal-500);
  --color-on-primary-container: var(--viking-white-pure);
  --color-surface: var(--viking-white-pure);
  --color-on-surface: var(--viking-charcoal-900);
  --color-background: var(--viking-white-pure);
  --color-on-background: var(--viking-charcoal-900);
  --color-surface-variant: var(--viking-surface-alt);
  --color-success: var(--viking-green-500);
  --color-warning: var(--viking-gold-500);
  --color-error: var(--viking-crimson-700);
  --color-info: var(--viking-blue-500);
  --color-gauge-red: var(--color-error);
  --border: var(--viking-border);
  --border-layout: var(--viking-border-strong);
  --hover-color: var(--viking-electric-500);
  --bg-color: var(--viking-bg);
  --text-color: var(--viking-text);
  --text-muted: var(--viking-text-muted);
  --card-bg: var(--viking-surface);
  --navbar-bg: color-mix(in srgb, var(--viking-white-pure) 96%, transparent);
  --link-color: var(--viking-electric-700);
  --link-hover-color: var(--viking-electric-600);
  --hero-title-color: var(--viking-charcoal-900);
  --primary-text-color: var(--viking-electric-700);
  --button-primary: var(--color-primary);
  --button-primary-text: var(--color-on-primary);
  --color-dark-grey-btn-bg: var(--viking-charcoal-800);
  --color-dark-grey-btn-text: var(--viking-white);
  --focus-ring-color: var(--viking-electric-500);
}

@media (prefers-color-scheme: light) {
  html:not([data-theme=dark]) {
    --color-primary: var(--viking-electric-600);
    --color-on-primary: var(--viking-white-pure);
    --color-primary-container: var(--viking-teal-500);
    --color-on-primary-container: var(--viking-white-pure);
    --color-surface: var(--viking-white-pure);
    --color-on-surface: var(--viking-charcoal-900);
    --color-background: var(--viking-white-pure);
    --color-on-background: var(--viking-charcoal-900);
    --color-surface-variant: var(--viking-surface-alt);
    --color-success: var(--viking-green-500);
    --color-warning: var(--viking-gold-500);
    --color-error: var(--viking-crimson-700);
    --color-info: var(--viking-blue-500);
    --color-gauge-red: var(--color-error);
    --border: var(--viking-border);
    --border-layout: var(--viking-border-strong);
    --hover-color: var(--viking-electric-500);
    --bg-color: var(--viking-bg);
    --text-color: var(--viking-text);
    --text-muted: var(--viking-text-muted);
    --card-bg: var(--viking-surface);
    --navbar-bg: color-mix(in srgb, var(--viking-white-pure) 96%, transparent);
    --link-color: var(--viking-electric-700);
    --link-hover-color: var(--viking-electric-600);
    --hero-title-color: var(--viking-charcoal-900);
    --primary-text-color: var(--viking-electric-700);
    --button-primary: var(--color-primary);
    --button-primary-text: var(--color-on-primary);
    --color-dark-grey-btn-bg: var(--viking-charcoal-800);
    --color-dark-grey-btn-text: var(--viking-white);
    --focus-ring-color: var(--viking-electric-500);
  }
}
body {
  font-size: var(--base-font-size);
  color: var(--text-color);
  background-color: var(--bg-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: var(--header-letter-spacing);
}

/*!
 * SUITE TOKENS — Pass 1 canonical design system (DEML + FORJD)
 * ----------------------------------------------------------------------------
 * AUTHORITATIVE SOURCE (edit only here):
 *   packages/viking-ui/src/tokens/suite-tokens.css
 *
 * Docs:     packages/viking-ui/src/tokens/SUITE_TOKENS.md
 * Lock:     packages/viking-ui/src/tokens/suite-tokens.lock.json
 * Law:      docs/SUITE_UI_UNIFICATION.md
 *
 * Consumers (no external style packages for the look):
 *   - viking-ui (build prepends into design-tokens / viking-ui / viking-app)
 *   - forjd-ui  (vendored via `npm run sync:suite` — sibling copy, not npm)
 *   - deml.app · marketing · backend.deml.app · ui.deml.app
 *   - forjd.co · backend.forjd.co · ui.forjd.co
 *
 * Strategy:
 *   High-end **dark-first** void austerity (forjd.co + SpaceX restraint).
 *   Light is **opt-in only** via <html data-theme="light"> (same roles, lightness shift).
 *
 * Roles (do not collapse):
 *   A — Product chrome (surfaces, ink, primary, institutional gold, status)
 *   B — Chart series palette (--suite-series-*) — may evolve independently of chrome
 *   C — PDF / print report tokens live outside this file (fjord-report-tokens.json; suite-aligned chrome)
 *
 * Provenance (existing hexes only — no new brand hues):
 *   Void surfaces ← forjd.co · Electric command ← DEML · Gold ← FORJD institutional
 *
 * RULE: Everything downstream consumes only these variables.
 *       No hard-coded product colors/spacing outside this file (brand SVG assets ok).
 */

/* =============================================================================
   DARK (default) — product suite identity
   ============================================================================= */
:root,
html[data-theme="dark"] {
  color-scheme: dark;

  /* --- Brand artwork only (logos / favicons / OG — not product chrome) --- */
  --suite-brand-navy: #070c20;
  --suite-brand-blue: #0078ff;

  /* --- Surface levels (Role A) --- */
  --suite-bg: #0a0a0a;
  --suite-bg-subtle: #050505;
  --suite-surface: #111111;
  --suite-surface-2: #1a1a1a;
  --suite-surface-elevated: #141414;
  --suite-surface-inset: #050505;
  --suite-overlay: color-mix(in srgb, var(--suite-bg) 72%, transparent);

  /* --- Ink / text --- */
  --suite-ink: #f5f5f5;
  --suite-ink-muted: #aaaaaa;
  --suite-ink-subtle: #999999;
  --suite-ink-disabled: #777777;
  --suite-ink-on-primary: #ffffff;
  --suite-ink-inverse: #0a0a0a;

  /* --- Borders (strong ≥3:1 UI contrast on void surfaces — WCAG 1.4.11) --- */
  --suite-border: #222222;
  --suite-border-strong: #666666;
  --suite-border-control: var(--suite-border-strong);
  --suite-border-subtle: color-mix(
    in srgb,
    var(--suite-border) 70%,
    transparent
  );
  --suite-hairline: color-mix(in srgb, var(--suite-primary) 28%, transparent);

  /* --- Primary / accent (electric command) ---
     Fill/hover are darkened for ≥4.5:1 white-on-fill. Brand hue kept on series-1.
     --suite-primary-strong is the AA text/link color on dark surfaces. */
  --suite-primary: #1565f0;
  --suite-primary-hover: #0f5ae0;
  --suite-primary-active: #0a4fd4;
  --suite-primary-soft: color-mix(
    in srgb,
    var(--suite-primary) 18%,
    transparent
  );
  --suite-primary-strong: #7ab0ff;
  --suite-accent: var(--suite-primary);
  --suite-accent-hover: var(--suite-primary-strong);
  /* Institutional gold — chrome / prestige moments (not chart series by default) */
  --suite-gold: #d4af37;
  --suite-gold-soft: color-mix(in srgb, var(--suite-gold) 16%, transparent);
  --suite-gold-text: #e8c96a;

  /* --- Status (fills keep brand chroma; *-text is AA foreground on surfaces) --- */
  --suite-success: #2a9d8f;
  --suite-success-soft: color-mix(
    in srgb,
    var(--suite-success) 16%,
    transparent
  );
  --suite-success-text: #5ec4b6;
  --suite-success-fill: #1a7066;
  --suite-warning: #d69e2e;
  --suite-warning-soft: color-mix(
    in srgb,
    var(--suite-warning) 16%,
    transparent
  );
  --suite-warning-text: #e8c25a;
  --suite-danger: #a83344;
  --suite-danger-soft: color-mix(in srgb, var(--suite-danger) 16%, transparent);
  --suite-danger-text: #dc6b78;
  --suite-info: var(--suite-primary-strong);

  /* --- Focus / ring (bright for visibility — not the darkened fill hover) --- */
  --suite-focus: #4d94ff;
  --suite-ring: #4d94ff;
  --suite-ring-width: 2px;
  --suite-ring-offset: 2px;

  /* --- Chart series (Role B) — tokenized; prefer these over hard-coded hexes --- */
  --suite-series-1: #2176ff;
  --suite-series-2: #922b3e;
  --suite-series-3: var(--suite-success);
  --suite-series-4: var(--suite-gold);
  --suite-series-5: var(--suite-danger);
  --suite-series-6: #4d94ff;
  --suite-series-7: #162544;
  --suite-series-8: #666666;
  --suite-series-default: var(--suite-series-1);

  /* --- Typography (industrial Inter + clean modern stack) --- */
  --suite-font-sans:
    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --suite-font-mono:
    ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas,
    monospace;

  --suite-text-2xs: 0.6875rem; /* 11px */
  --suite-text-xs: 0.75rem; /* 12px */
  --suite-text-sm: 0.875rem; /* 14px */
  --suite-text-md: 0.875rem; /* 14px UI chrome */
  --suite-text-base: 1rem; /* 16px body */
  --suite-text-lg: 1.125rem; /* 18px */
  --suite-text-xl: 1.5rem; /* 24px */
  --suite-text-2xl: 1.875rem; /* 30px */
  --suite-text-3xl: 2.25rem; /* 36px */
  --suite-text-4xl: 3rem; /* 48px */
  --suite-text-display: clamp(2.5rem, 7vw, 3rem);
  --suite-text-display-lg: clamp(2.25rem, 5vw, 3.75rem);
  --suite-text-display-md: clamp(2rem, 4.5vw, 3rem);
  /* Hero industrial titles — fluid, tokenized clamps */
  --suite-text-headline: clamp(1.35rem, 3.2vw, 2rem);
  --suite-text-headline-quiet: clamp(1.2rem, 2.6vw, 1.65rem);
  --suite-text-title: clamp(1.5rem, 3.5vw, 2rem);
  --suite-text-title-lg: clamp(1.75rem, 5vw, 2.5rem);
  --suite-text-title-sm: clamp(1.35rem, 3vw, 1.75rem);
  --suite-text-lead: 1.25rem; /* 20px section lead */
  --suite-text-lead-fluid: clamp(1.05rem, 2vw, 1.25rem);

  --suite-weight-regular: 400;
  --suite-weight-medium: 500;
  --suite-weight-semibold: 600;
  --suite-weight-bold: 700;
  --suite-weight-extrabold: 800;

  --suite-leading-none: 1;
  --suite-leading-tight: 1.2;
  --suite-leading-snug: 1.35;
  --suite-leading-normal: 1.5;
  --suite-leading-relaxed: 1.6;

  --suite-tracking-tight: -0.03em;
  --suite-tracking-normal: 0;
  --suite-tracking-wide: 0.08em;
  --suite-tracking-caps: 0.1em;
  --suite-tracking-brand: 0.14em;

  /* --- Spacing (THEME.md: 8px primary grid; 4px tight exception) --- */
  --suite-space-unit: 8px;
  --suite-space-0: 0;
  --suite-space-px: 1px;
  --suite-space-0-5: 4px;
  --suite-space-1: 8px;
  --suite-space-2: 16px;
  --suite-space-3: 24px;
  --suite-space-4: 32px;
  --suite-space-5: 40px;
  --suite-space-6: 48px;
  --suite-space-7: 56px;
  --suite-space-8: 64px;
  --suite-space-9: 80px;
  --suite-space-10: 96px;
  --suite-space-11: 112px;
  --suite-space-12: 128px;
  --suite-space-14: 160px;
  --suite-space-16: 192px;

  --suite-space-compact: 12px;
  --suite-page-gutter: clamp(1rem, 4vw, 1.5rem);
  /* Major section rhythm — more air between stages; not card/list density */
  --suite-section-gap: clamp(3rem, 7vw, 5rem);
  /* Related blocks inside a section (header→grid, band stack) */
  --suite-block-gap: clamp(1.75rem, 3.5vw, 2.5rem);
  /* Dense operational rows (tables, status, meta) */
  --suite-density-gap: var(--suite-space-1);
  --suite-cluster-gap: var(--suite-space-2);
  --suite-content-max: 78.75rem; /* 1260px */
  --suite-readable-max: 48rem;
  /* Mobile touch target (WCAG AA / SaaS) */
  --suite-touch: 2.75rem; /* 44px */
  /* Dense desktop control frame; mobile interactive targets use --suite-touch */
  --suite-control-height: 2.5rem; /* 40px */
  --suite-control-height-sm: 2rem; /* 32px */
  --suite-control-height-lg: var(--suite-touch);
  /* Shared control chrome — buttons, inputs, selects align to this grid */
  --suite-control-px: var(--suite-space-2);
  --suite-control-px-lg: var(--suite-space-3);
  --suite-control-fs: var(--suite-text-md);
  --suite-control-fs-sm: var(--suite-text-sm);
  --suite-control-check: 1.25rem; /* checkbox / radio glyph */
  /* Soft inner focus for fields (pairs with :focus-visible outline) */
  --suite-control-focus-ring: 0 0 0 1px
    color-mix(in srgb, var(--suite-primary) 42%, transparent);

  /* --- Radius --- */
  --suite-radius-xs: 4px;
  --suite-radius-sm: 6px;
  --suite-radius: 8px;
  --suite-radius-lg: 12px;
  --suite-radius-xl: 16px;
  --suite-radius-pill: 999px;
  --suite-radius-control: var(--suite-radius);
  --suite-radius-surface: var(--suite-radius-lg);

  /* --- Elevation (machined, stepped — never decorative glow stacks) --- */
  /* Drop shadows: short/hard near-edge + soft ambient; keep opacity low */
  --suite-shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.28);
  --suite-shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.28), 0 3px 10px rgba(0, 0, 0, 0.14);
  --suite-shadow-md:
    0 2px 4px rgba(0, 0, 0, 0.26), 0 8px 20px rgba(0, 0, 0, 0.16);
  --suite-shadow-lg:
    0 4px 8px rgba(0, 0, 0, 0.28), 0 16px 36px rgba(0, 0, 0, 0.22);
  --suite-shadow-hover:
    0 2px 4px rgba(0, 0, 0, 0.28), 0 10px 22px rgba(0, 0, 0, 0.18);
  /* Top-edge specular — primary depth cue on dark steel */
  --suite-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  /* Recessed wells (tables, tablists, metric panels) */
  --suite-shadow-inset:
    inset 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  /* Overlay glass — modals / loading only; not base cards */
  --suite-glass: color-mix(
    in srgb,
    var(--suite-surface-elevated) 82%,
    transparent
  );
  --suite-glass-strong: color-mix(
    in srgb,
    var(--suite-surface-elevated) 92%,
    transparent
  );
  --suite-glass-blur: 8px;
  /* Composed elevation recipes (prefer these in chrome) */
  --suite-elevation-1: var(--suite-highlight);
  --suite-elevation-2: var(--suite-shadow-sm), var(--suite-highlight);
  --suite-elevation-3: var(--suite-shadow-md), var(--suite-highlight);
  --suite-elevation-4: var(--suite-shadow-lg), var(--suite-highlight);
  --suite-elevation-hover: var(--suite-shadow-hover), var(--suite-highlight);
  --suite-elevation-inset: var(--suite-shadow-inset);

  /* --- Z-index scale --- */
  --suite-z-base: 0;
  --suite-z-dropdown: 1000;
  --suite-z-sticky: 1100;
  --suite-z-overlay: 1200;
  --suite-z-modal: 1300;
  --suite-z-toast: 1400;
  --suite-z-max: 1500;

  /* --- Motion (aerospace: short, decisive, no bounce) --- */
  --suite-ease: cubic-bezier(0.2, 0, 0, 1);
  --suite-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --suite-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --suite-duration-instant: 75ms;
  --suite-duration-fast: 150ms;
  --suite-duration: 250ms;
  --suite-duration-slow: 350ms;
  /* Geometry: 1px lift / press — perceptible, never theatrical */
  --suite-hover-lift: -1px;
  --suite-press-sink: 1px;
  --suite-nudge: 2px;
  --suite-reveal-distance: 0.5rem;
  --suite-active-scale: 0.985;
  --suite-transition:
    background-color var(--suite-duration-fast) var(--suite-ease),
    border-color var(--suite-duration-fast) var(--suite-ease),
    color var(--suite-duration-fast) var(--suite-ease),
    opacity var(--suite-duration-fast) var(--suite-ease),
    box-shadow var(--suite-duration-fast) var(--suite-ease),
    transform var(--suite-duration-fast) var(--suite-ease);
  --suite-transition-transform: transform var(--suite-duration-fast)
    var(--suite-ease-emphasized);
  --suite-transition-colors:
    background-color var(--suite-duration-fast) var(--suite-ease),
    border-color var(--suite-duration-fast) var(--suite-ease),
    color var(--suite-duration-fast) var(--suite-ease),
    box-shadow var(--suite-duration-fast) var(--suite-ease);

  /* --- Breakpoints (THEME.md mobile-first contract) --- */
  --suite-bp-sm: 600px;
  --suite-bp-md: 768px;
  --suite-bp-sidebar: 901px;
  --suite-bp-lg: 1024px;
  --suite-bp-xl: 1440px;
  --suite-bp-2xl: 1920px;

  /* =========================================================================
     Compatibility aliases — viking-ui + forjd-ui
     Prefer --suite-* in new code. Aliases must stay byte-identical via var().
     ========================================================================= */

  /* Viking semantic */
  --viking-bg: var(--suite-bg);
  --viking-bg-subtle: var(--suite-bg-subtle);
  --viking-surface: var(--suite-surface);
  --viking-surface-alt: var(--suite-surface-2);
  --viking-surface-raised: var(--suite-surface-elevated);
  --viking-surface-inset: var(--suite-surface-inset);
  --viking-surface-overlay: var(--suite-surface);
  --viking-surface-recipe: var(--suite-surface);
  --viking-surface-recipe-elevated: var(--suite-surface-elevated);
  --viking-border: var(--suite-border);
  --viking-border-strong: var(--suite-border-strong);
  --viking-border-subtle: var(--suite-border-subtle);
  --viking-border-control: var(--suite-border-control);
  --viking-border-container: var(--suite-border);
  --viking-border-accent: var(--suite-hairline);
  --viking-text: var(--suite-ink);
  --viking-text-muted: var(--suite-ink-muted);
  --viking-text-subtle: var(--suite-ink-subtle);
  --viking-text-disabled: var(--suite-ink-disabled);
  --viking-accent: var(--suite-primary);
  --viking-accent-hover: var(--suite-primary-hover);
  --viking-accent-active: var(--suite-primary-active);
  --viking-accent-soft: var(--suite-primary-soft);
  --viking-accent-strong: var(--suite-primary-strong);
  --viking-accent-content: var(--suite-ink-on-primary);
  --viking-gold-500: var(--suite-gold);
  --viking-gold-text: var(--suite-gold-text);
  --viking-success: var(--suite-success);
  --viking-success-text: var(--suite-success-text);
  --viking-warning: var(--suite-warning);
  --viking-warning-text: var(--suite-warning-text);
  --viking-danger: var(--suite-danger);
  --viking-danger-text: var(--suite-danger-text);
  --viking-ring: var(--suite-ring);
  --viking-ring-width: var(--suite-ring-width);
  --viking-ring-offset: var(--suite-ring-offset);
  --viking-font-family: var(--suite-font-sans);
  --viking-font-family-mono: var(--suite-font-mono);
  --viking-font-size-2xs: var(--suite-text-2xs);
  --viking-font-size-xs: var(--suite-text-xs);
  --viking-font-size-sm: var(--suite-text-sm);
  --viking-font-size-ui: var(--suite-text-md);
  --viking-font-size-base: var(--suite-text-base);
  --viking-font-size-md: var(--suite-text-lg);
  --viking-font-size-lg: var(--suite-text-xl);
  --viking-font-size-xl: var(--suite-text-xl);
  --viking-font-size-2xl: var(--suite-text-2xl);
  --viking-font-size-3xl: var(--suite-text-3xl);
  --viking-font-size-4xl: var(--suite-text-4xl);
  --viking-font-size-5xl: 3.75rem;
  --viking-font-size-6xl: 4.5rem;
  --viking-font-size-display: var(--suite-text-display);
  --viking-font-size-display-lg: var(--suite-text-display-lg);
  --viking-font-size-display-md: var(--suite-text-display-md);
  --viking-font-size-headline: var(--suite-text-headline);
  --viking-font-size-headline-quiet: var(--suite-text-headline-quiet);
  --viking-font-size-title: var(--suite-text-title);
  --viking-font-size-title-lg: var(--suite-text-title-lg);
  --viking-font-size-title-sm: var(--suite-text-title-sm);
  --viking-font-size-lead: var(--suite-text-lead);
  --viking-font-size-lead-fluid: var(--suite-text-lead-fluid);
  --viking-font-weight-regular: var(--suite-weight-regular);
  --viking-font-weight-medium: var(--suite-weight-medium);
  --viking-font-weight-semibold: var(--suite-weight-semibold);
  --viking-font-weight-bold: var(--suite-weight-bold);
  --viking-font-weight-extrabold: var(--suite-weight-extrabold);
  --viking-line-height-none: var(--suite-leading-none);
  --viking-line-height-tight: var(--suite-leading-tight);
  --viking-line-height-snug: var(--suite-leading-snug);
  --viking-line-height-normal: var(--suite-leading-normal);
  --viking-line-height-relaxed: var(--suite-leading-relaxed);
  --viking-letter-spacing-tight: var(--suite-tracking-tight);
  --viking-letter-spacing-normal: var(--suite-tracking-normal);
  --viking-letter-spacing-wide: var(--suite-tracking-wide);
  --viking-letter-spacing-caps: var(--suite-tracking-caps);
  --viking-letter-spacing-display: var(--suite-tracking-brand);
  --viking-space-0: var(--suite-space-0);
  --viking-space-px: var(--suite-space-px);
  --viking-space-0-5: var(--suite-space-0-5);
  --viking-space-1: var(--suite-space-1);
  --viking-space-2: var(--suite-space-2);
  --viking-space-3: var(--suite-space-3);
  --viking-space-4: var(--suite-space-4);
  --viking-space-5: var(--suite-space-5);
  --viking-space-6: var(--suite-space-6);
  --viking-space-7: var(--suite-space-7);
  --viking-space-8: var(--suite-space-8);
  --viking-space-9: var(--suite-space-9);
  --viking-space-10: var(--suite-space-10);
  --viking-space-11: var(--suite-space-11);
  --viking-space-12: var(--suite-space-12);
  --viking-space-14: var(--suite-space-14);
  --viking-space-16: var(--suite-space-16);
  --viking-space-compact-gap: var(--suite-space-compact);
  --viking-touch-target-min: var(--suite-touch);
  --viking-radius-xs: var(--suite-radius-xs);
  --viking-radius-sm: var(--suite-radius-sm);
  --viking-radius: var(--suite-radius);
  --viking-radius-lg: var(--suite-radius-lg);
  --viking-radius-xl: var(--suite-radius-xl);
  --viking-radius-pill: var(--suite-radius-pill);
  --viking-shadow-xs: var(--suite-shadow-xs);
  --viking-shadow-sm: var(--suite-shadow-sm);
  --viking-shadow-md: var(--suite-shadow-md);
  --viking-shadow-lg: var(--suite-shadow-lg);
  --viking-shadow-hover: var(--suite-shadow-hover);
  --viking-shadow-inner: var(--suite-shadow-inset);
  --viking-surface-highlight: var(--suite-highlight);
  --viking-elevation-1: var(--suite-elevation-1);
  --viking-elevation-2: var(--suite-elevation-2);
  --viking-elevation-3: var(--suite-elevation-3);
  --viking-elevation-4: var(--suite-elevation-4);
  --viking-elevation-hover: var(--suite-elevation-hover);
  --viking-elevation-inset: var(--suite-elevation-inset);
  --viking-glass: var(--suite-glass);
  --viking-glass-strong: var(--suite-glass-strong);
  --viking-glass-blur: var(--suite-glass-blur);
  --viking-duration-instant: var(--suite-duration-instant);
  --viking-duration-fast: var(--suite-duration-fast);
  --viking-duration: var(--suite-duration);
  --viking-duration-slow: var(--suite-duration-slow);
  --viking-ease-out: var(--suite-ease-out);
  --viking-ease-emphasized: var(--suite-ease-emphasized);
  --viking-state-hover-lift: var(--suite-hover-lift);
  --viking-state-press-sink: var(--suite-press-sink);
  --viking-state-nudge: var(--suite-nudge);
  --viking-state-reveal-distance: var(--suite-reveal-distance);
  --viking-state-active-scale: var(--suite-active-scale);
  --viking-transition-interactive: var(--suite-transition);
  --viking-transition-colors: var(--suite-transition-colors);
  --viking-transition-transform: var(--suite-transition-transform);
  --viking-control-height: var(--suite-control-height);
  --viking-control-height-sm: var(--suite-control-height-sm);
  --viking-control-height-lg: var(--suite-control-height-lg);
  --viking-control-px: var(--suite-control-px);
  --viking-control-fs: var(--suite-control-fs);
  --viking-control-check: var(--suite-control-check);
  --viking-control-focus-ring: var(--suite-control-focus-ring);
  --viking-page-gutter: var(--suite-page-gutter);
  --viking-page-section-gap: var(--suite-section-gap);
  --viking-page-stack-gap: var(--suite-block-gap);
  --viking-block-gap: var(--suite-block-gap);
  --viking-density-gap: var(--suite-density-gap);
  --viking-container-max-width: var(--suite-content-max);
  --viking-content-readable-max-width: var(--suite-readable-max);
  --viking-bp-sm: var(--suite-bp-sm);
  --viking-bp-md: var(--suite-bp-md);
  --viking-bp-sidebar: var(--suite-bp-sidebar);
  --viking-bp-lg: var(--suite-bp-lg);
  --viking-bp-xl: var(--suite-bp-xl);
  --viking-bp-2xl: var(--suite-bp-2xl);
  --viking-brand-navy: var(--suite-brand-navy);
  --viking-brand-blue: var(--suite-brand-blue);
  --viking-series-1: var(--suite-series-1);
  --viking-series-2: var(--suite-series-2);
  --viking-series-3: var(--suite-series-3);
  --viking-series-4: var(--suite-series-4);
  --viking-series-5: var(--suite-series-5);
  --viking-series-6: var(--suite-series-6);
  --viking-series-7: var(--suite-series-7);
  --viking-series-8: var(--suite-series-8);
  --viking-series-default: var(--suite-series-default);
  --viking-z-dropdown: var(--suite-z-dropdown);
  --viking-z-modal: var(--suite-z-modal);
  --viking-z-toast: var(--suite-z-toast);

  /* FORJD aliases
     --fj-space-* map is FROZEN (legacy compact scale). Prefer --suite-space-*.
     Do not invent new --fj-space-* in product code. */
  --fj-bg: var(--suite-bg);
  --fj-surface: var(--suite-surface);
  --fj-surface-2: var(--suite-surface-2);
  --fj-surface-elevated: var(--suite-surface-elevated);
  --fj-border: var(--suite-border);
  --fj-border-strong: var(--suite-border-strong);
  --fj-border-control: var(--suite-border-control);
  --fj-hairline: var(--suite-hairline);
  --fj-overlay: var(--suite-overlay);
  --fj-primary: var(--suite-primary);
  --fj-primary-hover: var(--suite-primary-hover);
  --fj-primary-active: var(--suite-primary-active);
  --fj-primary-soft: var(--suite-primary-soft);
  --fj-primary-strong: var(--suite-primary-strong);
  --fj-focus: var(--suite-focus);
  --fj-ring: var(--suite-ring);
  --fj-ring-width: var(--suite-ring-width);
  --fj-ring-offset: var(--suite-ring-offset);
  --fj-gold: var(--suite-gold);
  --fj-gold-soft: var(--suite-gold-soft);
  --fj-gold-text: var(--suite-gold-text);
  --fj-accent: var(--suite-accent);
  --fj-accent-hover: var(--suite-accent-hover);
  --fj-warning: var(--suite-warning);
  --fj-warning-text: var(--suite-warning-text);
  --fj-danger: var(--suite-danger);
  --fj-danger-text: var(--suite-danger-text);
  --fj-success: var(--suite-success);
  --fj-success-text: var(--suite-success-text);
  --fj-text: var(--suite-ink);
  --fj-text-muted: var(--suite-ink-muted);
  --fj-text-subtle: var(--suite-ink-subtle);
  --fj-text-disabled: var(--suite-ink-disabled);
  --fj-text-on-primary: var(--suite-ink-on-primary);
  --fj-font-sans: var(--suite-font-sans);
  --fj-font-mono: var(--suite-font-mono);
  --fj-text-xs: var(--suite-text-xs);
  --fj-text-sm: var(--suite-text-sm);
  --fj-text-md: var(--suite-text-md);
  --fj-text-base: var(--suite-text-base);
  --fj-text-lg: var(--suite-text-lg);
  --fj-text-xl: var(--suite-text-xl);
  --fj-text-2xl: var(--suite-text-2xl);
  --fj-text-display: var(--suite-text-display);
  --fj-text-headline: var(--suite-text-headline);
  --fj-text-headline-quiet: var(--suite-text-headline-quiet);
  --fj-text-lead: var(--suite-text-lead);
  --fj-leading-tight: var(--suite-leading-tight);
  --fj-leading-snug: var(--suite-leading-snug);
  --fj-leading-normal: var(--suite-leading-normal);
  --fj-tracking-tight: var(--suite-tracking-tight);
  --fj-tracking-wide: var(--suite-tracking-wide);
  --fj-tracking-brand: var(--suite-tracking-brand);
  --fj-tracking-caps: var(--suite-tracking-caps);
  --fj-radius: var(--suite-radius);
  --fj-radius-xs: var(--suite-radius-xs);
  --fj-radius-sm: var(--suite-radius-sm);
  --fj-radius-lg: var(--suite-radius-lg);
  --fj-radius-xl: var(--suite-radius-xl);
  --fj-radius-pill: var(--suite-radius-pill);
  --fj-radius-control: var(--suite-radius-control);
  --fj-radius-surface: var(--suite-radius-surface);
  --fj-space-1: var(--suite-space-0-5);
  --fj-space-2: var(--suite-space-1);
  --fj-space-3: var(--suite-space-compact);
  --fj-space-4: var(--suite-space-2);
  --fj-space-5: var(--suite-space-2);
  --fj-space-6: var(--suite-space-3);
  --fj-space-7: var(--suite-space-3);
  --fj-space-8: var(--suite-space-4);
  --fj-space-10: var(--suite-space-5);
  --fj-space-12: var(--suite-space-6);
  --fj-touch-target: var(--suite-touch);
  --fj-control-height: var(--suite-control-height);
  --fj-control-height-sm: var(--suite-control-height-sm);
  --fj-control-height-lg: var(--suite-control-height-lg);
  --fj-control-px: var(--suite-control-px);
  --fj-control-fs: var(--suite-control-fs);
  --fj-control-check: var(--suite-control-check);
  --fj-control-focus-ring: var(--suite-control-focus-ring);
  --fj-page-gutter: var(--suite-page-gutter);
  --fj-section-gap: var(--suite-section-gap);
  --fj-block-gap: var(--suite-block-gap);
  --fj-density-gap: var(--suite-density-gap);
  --fj-content-max: var(--suite-content-max);
  --fj-readable-max: var(--suite-readable-max);
  --fj-bp-md: var(--suite-bp-md);
  --fj-bp-lg: var(--suite-bp-lg);
  --fj-ease: var(--suite-ease);
  --fj-ease-out: var(--suite-ease-out);
  --fj-ease-emphasized: var(--suite-ease-emphasized);
  --fj-duration-instant: var(--suite-duration-instant);
  --fj-duration-fast: var(--suite-duration-fast);
  --fj-duration: var(--suite-duration);
  --fj-duration-slow: var(--suite-duration-slow);
  --fj-transition: var(--suite-transition);
  --fj-transition-transform: var(--suite-transition-transform);
  --fj-hover-lift: var(--suite-hover-lift);
  --fj-active-scale: var(--suite-active-scale);
  --fj-press-sink: var(--suite-press-sink);
  --fj-nudge: var(--suite-nudge);
  --fj-reveal-distance: var(--suite-reveal-distance);
  --fj-highlight: var(--suite-highlight);
  --fj-elevation-1: var(--suite-elevation-1);
  --fj-elevation-2: var(--suite-elevation-2);
  --fj-elevation-3: var(--suite-elevation-3);
  --fj-elevation-4: var(--suite-elevation-4);
  --fj-elevation-hover: var(--suite-elevation-hover);
  --fj-elevation-inset: var(--suite-elevation-inset);
  --fj-glass: var(--suite-glass);
  --fj-glass-strong: var(--suite-glass-strong);
  --fj-glass-blur: var(--suite-glass-blur);
  --fj-transition-interactive: var(--suite-transition);
  --fj-transition-colors: var(--suite-transition-colors);
  --fj-z-dropdown: var(--suite-z-dropdown);
  --fj-z-modal: var(--suite-z-modal);
  --fj-z-toast: var(--suite-z-toast);
}

/* =============================================================================
   LIGHT (opt-in) — same roles, shifted lightness only (no hue inversion)
   Activate: <html data-theme="light">
   Product default remains dark; light is for marketing/docs that support it.
   ============================================================================= */
html[data-theme="light"] {
  color-scheme: light;

  --suite-bg: #fbfcfe;
  --suite-bg-subtle: #f4f7fb;
  --suite-surface: #ffffff;
  --suite-surface-2: #f4f7fb;
  --suite-surface-elevated: #ffffff;
  --suite-surface-inset: #f4f7fb;
  --suite-overlay: color-mix(in srgb, #ffffff 72%, transparent);

  --suite-ink: #080d1f;
  --suite-ink-muted: #555555;
  --suite-ink-subtle: #666666;
  --suite-ink-disabled: #666666;
  --suite-ink-on-primary: #ffffff;
  --suite-ink-inverse: #f5f5f5;

  --suite-border: #d7e0ef;
  --suite-border-strong: #58719e;
  --suite-border-control: var(--suite-border-strong);
  --suite-border-subtle: color-mix(
    in srgb,
    var(--suite-border) 70%,
    transparent
  );

  --suite-primary: #1565f0;
  --suite-primary-hover: #0a4fd4;
  --suite-primary-active: #073a99;
  --suite-primary-soft: color-mix(
    in srgb,
    var(--suite-primary) 12%,
    transparent
  );
  --suite-primary-strong: #073a99;
  --suite-accent-hover: var(--suite-primary-strong);
  --suite-focus: var(--suite-primary);
  --suite-ring: var(--suite-primary);

  /* Status text on light surfaces (fills keep brand chroma for soft/chart use) */
  --suite-gold-text: #7a6410;
  --suite-success-text: #187066;
  --suite-success-fill: #1a7066;
  --suite-warning-text: #7a580e;
  --suite-danger-text: #a83344;

  /* Series stay chromatically stable; only series-7 (muted baseline) lightens */
  --suite-series-7: #8fa2c2;
  --suite-series-8: #999999;

  --suite-shadow-xs: 0 1px 1px rgba(8, 13, 31, 0.05);
  --suite-shadow-sm:
    0 1px 2px rgba(8, 13, 31, 0.05), 0 3px 10px rgba(8, 13, 31, 0.05);
  --suite-shadow-md:
    0 2px 4px rgba(8, 13, 31, 0.06), 0 8px 20px rgba(8, 13, 31, 0.07);
  --suite-shadow-lg:
    0 4px 8px rgba(8, 13, 31, 0.07), 0 16px 36px rgba(8, 13, 31, 0.09);
  --suite-shadow-hover:
    0 2px 4px rgba(8, 13, 31, 0.07), 0 10px 22px rgba(8, 13, 31, 0.08);
  --suite-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --suite-shadow-inset:
    inset 0 1px 2px rgba(8, 13, 31, 0.06), inset 0 0 0 1px rgba(8, 13, 31, 0.04);
  --suite-glass: color-mix(in srgb, #ffffff 78%, transparent);
  --suite-glass-strong: color-mix(in srgb, #ffffff 90%, transparent);
  --suite-elevation-1: var(--suite-highlight);
  --suite-elevation-2: var(--suite-shadow-sm), var(--suite-highlight);
  --suite-elevation-3: var(--suite-shadow-md), var(--suite-highlight);
  --suite-elevation-4: var(--suite-shadow-lg), var(--suite-highlight);
  --suite-elevation-hover: var(--suite-shadow-hover), var(--suite-highlight);
  --suite-elevation-inset: var(--suite-shadow-inset);
}

/* WCAG 2.3.3 — zero motion tokens; consumers must not invent alternate timings */
@media (prefers-reduced-motion: reduce) {
  :root {
    --suite-duration-instant: 0ms;
    --suite-duration-fast: 0ms;
    --suite-duration: 0ms;
    --suite-duration-slow: 0ms;
    --suite-hover-lift: 0px;
    --suite-press-sink: 0px;
    --suite-nudge: 0px;
    --suite-reveal-distance: 0px;
    --suite-active-scale: 1;
    --suite-transition: none;
    --suite-transition-transform: none;
    --suite-transition-colors: none;
  }
}

/* Opaque fallbacks — glass blur is hierarchy aid, not required */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --suite-glass-blur: 0px;
    --suite-glass: var(--suite-surface-elevated);
    --suite-glass-strong: var(--suite-surface-elevated);
  }
}

/*!
 * 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;
  }
}

/*!
 * SUITE LANDING — Pass 3 product-family stage (DEML + FORJD + community)
 * ----------------------------------------------------------------------------
 * forjd.co · deml.app / · dataengineeringformachinelearning.com
 * Atmosphere + hero + section rhythm only. Tokens + suite-components for chrome.
 * Dual/triple class aliases keep historical markup working during lockstep.
 * Docs: SUITE_LANDING.md
 */

/* =============================================================================
   Stage — void atmosphere (SpaceX power + Porsche precision + electric command)
   ============================================================================= */
:is(.suite-landing, .fj-landing, .landing-container, .community-home) {
  /* Restrained command atmosphere — no neon orbs; stepped light only. */
  /* Single electric wash — calm confidence over layered theater */
  --_suite-landing-glow: color-mix(
    in srgb,
    var(--suite-primary) 11%,
    transparent
  );
  position: relative;
  isolation: isolate;
  min-height: 100%;
  font-family: var(--suite-font-sans);
  color: var(--suite-ink);
}

/*
 * Atmosphere uses absolute (not fixed) so it works inside Angular app shells
 * that apply transform/containment on main content. Covers full landing height.
 */
:is(.suite-landing, .fj-landing)::before,
.landing-container.suite-landing::before,
.community-home.suite-landing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      100% 70% at 12% -10%,
      var(--_suite-landing-glow),
      transparent 62%
    ),
    var(--suite-bg);
}

:is(.suite-landing, .fj-landing)::after,
.landing-container.suite-landing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--suite-border) 40%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--suite-border) 40%, transparent) 1px,
      transparent 1px
    );
  background-size: var(--suite-space-10) var(--suite-space-10);
  mask-image: radial-gradient(ellipse at 30% 0%, black 0%, transparent 48%);
}

/* Children above atmosphere */
:is(.suite-landing, .fj-landing, .landing-container.suite-landing) > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  :is(.suite-landing, .fj-landing)::after,
  .landing-container.suite-landing::after {
    opacity: 0.04;
  }
}

/*
 * Constrained delivery — solid void, skip grid mask + paint-heavy hairlines.
 * High-end / wide viewports keep the electric wash + grid.
 * prefers-reduced-data is progressive (unsupported browsers ignore the clause).
 */
@media (max-width: 600px), (prefers-reduced-data: reduce) {
  :is(.suite-landing, .fj-landing)::before,
  .landing-container.suite-landing::before,
  .community-home.suite-landing::before {
    background: var(--suite-bg);
  }

  :is(.suite-landing, .fj-landing)::after,
  .landing-container.suite-landing::after {
    content: none;
    display: none;
  }

  :is(.suite-landing-feature, .landing__feature)
    :is(.suite-card, .viking-card, .fj-card)::before,
  :is(.suite-landing-steps, .landing__steps)
    :is(.suite-landing-feature, .landing__feature)
    :is(.suite-card, .viking-card, .fj-card)::before,
  :is(.landing__band-panel) :is(.suite-card, .viking-card, .fj-card)::before {
    content: none;
    display: none;
  }
}

/* --- Page stack --- */
:is(.suite-landing, .fj-landing, .landing, .showcase-layout.suite-landing) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-section-gap);
  padding-block: var(--suite-space-8) var(--suite-space-14);
  min-height: min(100dvh, 100%);
  max-width: var(--suite-content-max);
  margin-inline: auto;
  padding-inline: var(--suite-page-gutter);
  box-sizing: border-box;
}

/* When nested inside forjd-page-shell which already gutters */
forjd-page-shell :is(.suite-landing, .fj-landing, .landing) {
  max-width: none;
  padding-inline: 0;
}

/*
 * deml.app product-home uses .page-inner-wrapper (layout-shell) AND suite-landing.
 * Collapse double gutters / grid so the stage owns the column rhythm.
 */
.page-inner-wrapper.suite-landing,
.page-inner-wrapper.showcase-layout.suite-landing {
  display: flex;
  flex-direction: column;
  gap: var(--suite-section-gap);
  max-width: var(--suite-content-max);
  margin-inline: auto;
  padding-inline: var(--suite-page-gutter);
  padding-block: var(--suite-space-6) var(--suite-space-10);
  min-height: 0;
  grid-template-columns: unset;
}

.page-inner-wrapper.suite-landing .suite-landing-hero,
.page-inner-wrapper.suite-landing .viking-unified-hero,
.page-inner-wrapper.suite-landing .landing__hero {
  /* Leave room for navbar + footer — avoid 78dvh hero crushing the fold */
  min-height: min(52dvh, 26rem);
  padding-block: var(--suite-space-5) var(--suite-space-3);
  max-width: 40rem;
}

.page-inner-wrapper.suite-landing .suite-landing-brand,
.page-inner-wrapper.suite-landing .hero-brand {
  /* Match forjd.co display brand weight — no deml-only shrink */
  font-size: var(--suite-text-display);
  letter-spacing: var(--suite-tracking-brand);
  color: var(--suite-ink);
  text-shadow: none;
}

/* Quiet secondary mark on community marketing (not a competing display title) */
.suite-landing-mark-label {
  margin: 0;
  font-family: var(--suite-font-mono);
  font-size: var(--suite-text-xs);
  font-weight: var(--suite-weight-medium);
  letter-spacing: var(--suite-tracking-caps);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--suite-ink-muted) 85%, transparent);
}

/* suite-card already pads — don't double-pad step/pillar tiles */
.page-inner-wrapper.suite-landing
  :is(.quick-start-step, .security-pillar).suite-card {
  padding: var(--suite-space-3);
}

/* =============================================================================
   Hero — tall, vivid, industrial display type
   ============================================================================= */
:is(
  .suite-landing-hero,
  .fj-landing-hero,
  .landing__hero,
  .viking-unified-hero
) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-3);
  max-width: 52rem;
  /* Mobile-first: keep steps in the first scroll; grow tall only on large viewports */
  min-height: min(52dvh, 26rem);
  justify-content: center;
  padding-block: var(--suite-space-7) var(--suite-space-5);
}

/* Expensive type rhythm — tighten brand↔headline; open lede→actions */
:is(.suite-landing-mark, .landing__hero-mark)
  + :is(.suite-landing-brand, .fj-brand, .landing__brand) {
  margin-top: calc(-1 * var(--suite-space-0-5));
}

:is(.suite-landing-brand, .fj-brand, .landing__brand)
  + :is(.suite-landing-headline, .landing__hero-line, .fj-headline) {
  margin-top: calc(-1 * var(--suite-space-1));
}

:is(.suite-landing-lede, .landing__lede, .fj-lede)
  + :is(.suite-landing-actions, .landing__actions) {
  margin-top: var(--suite-space-2);
}

/* Instant hero — no staggered reveal (calm confidence over clever motion) */

@media (min-width: 768px) {
  :is(
    .suite-landing-hero,
    .fj-landing-hero,
    .landing__hero,
    .viking-unified-hero
  ) {
    gap: var(--suite-space-4);
    min-height: min(58dvh, 30rem);
    padding-block: var(--suite-space-9) var(--suite-space-6);
  }
}

@media (min-width: 1024px) {
  :is(
    .suite-landing-hero,
    .fj-landing-hero,
    .landing__hero,
    .viking-unified-hero
  ) {
    min-height: min(64dvh, 34rem);
    padding-block: var(--suite-space-10) var(--suite-space-6);
  }
}

/* Short / landscape viewports — keep brand + CTAs in the first screen */
@media (max-height: 500px), (max-height: 420px) and (orientation: landscape) {
  :is(
    .suite-landing-hero,
    .fj-landing-hero,
    .landing__hero,
    .viking-unified-hero
  ) {
    min-height: 0;
    justify-content: flex-start;
    padding-block: var(--suite-space-4) var(--suite-space-3);
    gap: var(--suite-space-2);
  }
}

/* Status pill — 80% quiet Production; 20% data-tone + in-badge Retry */
:is(
  .suite-landing-badge,
  .hero-badge,
  .viking-unified-hero-badge,
  .community-eyebrow
) {
  display: inline-flex;
  align-items: center;
  gap: var(--suite-space-1);
  width: fit-content;
  max-width: min(100%, 32rem);
  margin: 0;
  padding: var(--suite-space-1) var(--suite-space-2);
  border: 1px solid color-mix(in srgb, var(--suite-primary) 28%, transparent);
  border-radius: var(--suite-radius-pill);
  background: color-mix(in srgb, var(--suite-primary) 10%, transparent);
  color: var(--suite-primary-strong);
  font-family: var(--suite-font-mono);
  font-size: var(--suite-text-xs);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-caps);
  text-transform: uppercase;
  box-shadow: var(--suite-highlight);
}

/* Loading chapter — muted confirming, not success green yet */
:is(
  .suite-landing-badge,
  .hero-badge,
  .viking-unified-hero-badge
)[data-phase="loading"] {
  border-color: color-mix(in srgb, var(--suite-border-strong) 80%, transparent);
  background: color-mix(in srgb, var(--suite-surface-2) 80%, transparent);
  color: var(--suite-ink-muted);
}

:is(
    .suite-landing-badge,
    .hero-badge,
    .viking-unified-hero-badge
  )[data-phase="loading"]
  .badge-dot {
  background: var(--suite-ink-muted);
  animation: suite-confirm 1.4s var(--suite-ease) infinite;
}

:is(
  .suite-landing-badge,
  .hero-badge,
  .viking-unified-hero-badge
)[data-tone="warning"] {
  border-color: color-mix(in srgb, var(--suite-warning) 45%, transparent);
  background: color-mix(in srgb, var(--suite-warning) 12%, transparent);
  color: var(--suite-warning);
}

:is(
  .suite-landing-badge,
  .hero-badge,
  .viking-unified-hero-badge
)[data-tone="danger"] {
  border-color: color-mix(in srgb, var(--suite-danger) 45%, transparent);
  background: color-mix(in srgb, var(--suite-danger) 12%, transparent);
  color: var(--suite-danger);
}

:is(
    .suite-landing-badge,
    .hero-badge,
    .viking-unified-hero-badge
  )[data-tone="warning"]
  .badge-dot,
:is(
    .suite-landing-badge,
    .hero-badge,
    .viking-unified-hero-badge
  )[data-tone="danger"]
  .badge-dot {
  background: currentColor;
}

:is(.badge-dot, .pulse-dot) {
  width: var(--suite-space-0-5);
  height: var(--suite-space-0-5);
  border-radius: var(--suite-radius-pill);
  background: var(--suite-success);
  flex-shrink: 0;
}

/* Pulse only when explicitly marked live — static otherwise */
:is(.badge-dot).pulse-dot {
  animation: suite-pulse 3.6s var(--suite-ease) infinite;
}

:is(.badge-text) {
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Compact edge retry — 44px touch floor; lives in the badge, not a callout */
:is(.suite-landing-badge-retry) {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  margin-inline-start: var(--suite-space-0-5);
  min-height: var(--suite-touch);
  min-width: var(--suite-touch);
  padding: 0 var(--suite-space-2);
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: var(--suite-radius-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: var(--suite-transition-colors);
}

:is(.suite-landing-badge-retry):hover,
:is(.suite-landing-badge-retry):focus-visible {
  background: color-mix(in srgb, currentColor 14%, transparent);
  outline: none;
}

:is(.suite-landing-badge-retry):focus-visible {
  outline: var(--suite-ring-width) solid var(--suite-ring);
  outline-offset: var(--suite-ring-offset);
}

/* One quiet edge line under the badge — never displaces hero → CTAs → sequence */
:is(.suite-landing-edge, .landing__ready-edge) {
  margin: calc(var(--suite-space-1) * -1) 0 0;
  max-width: 36rem;
  color: var(--suite-ink-muted);
  font-family: var(--suite-font-sans);
  font-size: var(--suite-text-sm);
  font-weight: var(--suite-weight-regular);
  letter-spacing: var(--suite-tracking-normal);
  line-height: var(--suite-leading-snug);
  text-transform: none;
}

:is(.suite-landing-mark, .landing__hero-mark) {
  width: min(3.75rem, 16vw);
  height: auto;
  margin-bottom: 0;
  filter: none;
}

/* Display brand wordmark */
:is(.suite-landing-brand, .landing__brand, .hero-brand, .fj-brand) {
  margin: 0;
  font-family: var(--suite-font-sans);
  font-size: var(--suite-text-display);
  font-weight: var(--suite-weight-extrabold);
  letter-spacing: var(--suite-tracking-brand);
  line-height: var(--suite-leading-tight);
  color: var(--suite-ink);
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: none;
}

/* Primary headline under brand (or standalone title on marketing) */
:is(
  .suite-landing-headline,
  .landing__hero-line,
  .fj-headline,
  .title,
  .viking-unified-hero-title
) {
  margin: 0;
  font-size: var(--suite-text-headline);
  font-weight: var(--suite-weight-medium);
  letter-spacing: var(--suite-tracking-tight);
  max-width: 36rem;
  color: var(--suite-ink);
  line-height: var(--suite-leading-tight);
  text-wrap: balance;
}

/* When brand + title coexist, title is slightly quieter industrial sub */
.suite-landing-brand
  + :is(.title, .viking-unified-hero-title, .suite-landing-headline),
.hero-brand + :is(.title, .viking-unified-hero-title) {
  font-size: var(--suite-text-headline-quiet);
  color: color-mix(in srgb, var(--suite-ink) 92%, var(--suite-primary) 8%);
  max-width: 32rem;
}

:is(
  .suite-landing-lede,
  .landing__lede,
  .fj-lede,
  .subtitle,
  .viking-unified-hero-lead
) {
  margin: 0;
  max-width: var(--suite-readable-max);
  font-size: var(--suite-text-lg);
  color: var(--suite-ink-muted);
  line-height: var(--suite-leading-relaxed);
  text-wrap: pretty;
}

:is(
  .suite-landing-actions,
  .landing__actions,
  .viking-unified-hero-actions,
  .cta-group
) {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--suite-space-3);
  width: 100%;
  margin-top: var(--suite-space-1);
}

/* Flat CTA row (marketing / deml) — children are suite-btn */
:is(
    .suite-landing-actions,
    .landing__actions,
    .viking-unified-hero-actions,
    .cta-group
  )
  > :is(.suite-btn, .viking-btn, .fj-btn, forjd-button, viking-button) {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}

:is(
    .suite-landing-actions,
    .landing__actions,
    .viking-unified-hero-actions,
    .cta-group
  )
  > :is(forjd-button, viking-button)
  :is(.suite-btn, .viking-btn, .fj-btn) {
  width: 100%;
  justify-content: center;
}

/* Tiered CTAs — primary command row + quiet secondary instrument strip */
:is(.suite-landing-actions-primary, .landing__actions-primary) {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--suite-cluster-gap);
  width: 100%;
}

:is(.suite-landing-actions-secondary, .landing__actions-secondary) {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--suite-space-1);
  width: 100%;
  padding-top: var(--suite-space-1);
  border-top: 1px solid color-mix(in srgb, var(--suite-border) 80%, transparent);
}

:is(.suite-landing-actions-primary, .landing__actions-primary)
  > :is(forjd-button, viking-button, .suite-btn, .viking-btn, .fj-btn),
:is(.suite-landing-actions-secondary, .landing__actions-secondary)
  > :is(
    forjd-button,
    viking-button,
    .suite-btn,
    .viking-btn,
    .fj-btn,
    forjd-theme-toggle,
    viking-theme-toggle
  ) {
  width: 100%;
  box-sizing: border-box;
}

:is(.suite-landing-actions-primary, .landing__actions-primary)
  :is(.suite-btn, .viking-btn, .fj-btn),
:is(.suite-landing-actions-secondary, .landing__actions-secondary)
  :is(.suite-btn, .viking-btn, .fj-btn) {
  width: 100%;
  justify-content: center;
}

/* Secondary ghosts — color only (no lift) so the toolbar stays calm */
:is(.suite-landing-actions-secondary, .landing__actions-secondary)
  :is(.suite-btn, .viking-btn, .fj-btn)[data-variant="ghost"]:hover:not(
    :disabled
  ):not([aria-disabled="true"]),
:is(.suite-landing-actions-secondary, .landing__actions-secondary)
  :is(.suite-btn, .viking-btn, .fj-btn)[data-variant="ghost"]:active:not(
    :disabled
  ) {
  transform: none;
}

@media (min-width: 600px) {
  :is(
      .suite-landing-actions,
      .landing__actions,
      .viking-unified-hero-actions,
      .cta-group
    ):not(:has(.suite-landing-actions-primary)):not(
      :has(.landing__actions-primary)
    ) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    gap: var(--suite-cluster-gap);
  }

  :is(
      .suite-landing-actions,
      .landing__actions,
      .viking-unified-hero-actions,
      .cta-group
    ):not(:has(.suite-landing-actions-primary)):not(
      :has(.landing__actions-primary)
    )
    > :is(.suite-btn, .viking-btn, .fj-btn, forjd-button, viking-button) {
    width: auto;
  }

  :is(
      .suite-landing-actions,
      .landing__actions,
      .viking-unified-hero-actions,
      .cta-group
    ):not(:has(.suite-landing-actions-primary)):not(
      :has(.landing__actions-primary)
    )
    > :is(forjd-button, viking-button)
    :is(.suite-btn, .viking-btn, .fj-btn) {
    width: auto;
  }

  :is(.suite-landing-actions-primary, .landing__actions-primary) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
  }

  :is(.suite-landing-actions-primary, .landing__actions-primary)
    > :is(forjd-button, viking-button, .suite-btn, .viking-btn, .fj-btn),
  :is(.suite-landing-actions-primary, .landing__actions-primary)
    :is(.suite-btn, .viking-btn, .fj-btn) {
    width: auto;
  }

  :is(.suite-landing-actions-secondary, .landing__actions-secondary) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    gap: var(--suite-space-1);
  }

  :is(.suite-landing-actions-secondary, .landing__actions-secondary)
    > :is(
      forjd-button,
      viking-button,
      .suite-btn,
      .viking-btn,
      .fj-btn,
      forjd-theme-toggle,
      viking-theme-toggle
    ),
  :is(.suite-landing-actions-secondary, .landing__actions-secondary)
    :is(.suite-btn, .viking-btn, .fj-btn) {
    width: auto;
  }
}

/* CTA content helpers inside suite-btn */
:is(.cta-content) {
  display: inline-flex;
  align-items: center;
  gap: var(--suite-space-1);
}

:is(.cta-label) {
  font: inherit;
  color: inherit;
}

:is(.cta-button) {
  /* structural alias only — chrome from suite-btn */
}

@keyframes suite-pulse {
  0% {
    box-shadow: 0 0 0 0
      color-mix(in srgb, var(--suite-success) 50%, transparent);
  }
  70% {
    box-shadow: 0 0 0 0.45rem transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/* Soft confirm breath — loading chapter (opacity only) */
@keyframes suite-confirm {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.badge-dot).pulse-dot,
  :is(
      .suite-landing-badge,
      .hero-badge,
      .viking-unified-hero-badge
    )[data-phase="loading"]
    .badge-dot {
    animation: none;
    opacity: 1;
  }

  :is(.showcase-link, .community-showcase-cta):hover {
    transform: none;
  }
}

/* =============================================================================
   Section headers / tags
   ============================================================================= */
:is(
  .suite-landing-section-header,
  .landing__section-header,
  .viking-unified-section-header,
  .quick-start-header,
  .security-pillars-header,
  .pricing-header
) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-2);
  max-width: var(--suite-readable-max);
  margin-bottom: var(--suite-block-gap);
}

:is(.suite-landing-tag, .landing__tag, .section-tag, .strip-label) {
  margin: 0;
  color: var(--suite-ink-muted);
  font-family: var(--suite-font-mono);
  font-size: var(--suite-text-sm);
  letter-spacing: var(--suite-tracking-caps);
  text-transform: uppercase;
  font-weight: var(--suite-weight-medium);
}

:is(
  .suite-landing-section-title,
  .landing__section-title,
  .suite-landing-section-header h2,
  .viking-unified-section-header h2,
  .quick-start-header h2,
  .security-pillars-header h2,
  .pricing-header h2
) {
  margin: 0;
  font-size: var(--suite-text-2xl);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-tight);
  color: var(--suite-ink);
  line-height: var(--suite-leading-tight);
  text-wrap: balance;
}

:is(
  .suite-landing-section-lede,
  .landing__section-lede,
  .suite-landing-section-header p,
  .viking-unified-section-header p,
  .quick-start-header p,
  .security-pillars-header p,
  .pricing-header p
) {
  margin: 0;
  color: var(--suite-ink-muted);
  font-size: var(--suite-text-md);
  line-height: var(--suite-leading-normal);
  max-width: var(--suite-readable-max);
}

/* Shared type roles */
:is(.suite-eyebrow, .fj-eyebrow) {
  margin: 0;
  font-family: var(--suite-font-mono);
  font-size: var(--suite-text-sm);
  letter-spacing: var(--suite-tracking-caps);
  text-transform: uppercase;
  color: var(--suite-gold);
  font-weight: var(--suite-weight-medium);
}

:is(.suite-display, .fj-display) {
  margin: 0;
  font-size: var(--suite-text-display);
  font-weight: var(--suite-weight-bold);
  letter-spacing: var(--suite-tracking-tight);
  line-height: var(--suite-leading-tight);
  color: var(--suite-ink);
  text-transform: uppercase;
  text-wrap: balance;
}

:is(.suite-meta, .fj-meta, .suite-muted, .fj-muted) {
  margin: 0;
  color: var(--suite-ink-muted);
  font-size: var(--suite-text-md);
}

:is(.suite-error-text, .fj-error) {
  margin: 0;
  color: var(--suite-danger);
  font-size: var(--suite-text-md);
}

/* Panel titles: owned by suite-components.css (triple .suite- / .viking- / .fj-) */

/* =============================================================================
   Steps / grids / features
   ============================================================================= */
:is(.suite-landing-steps, .landing__steps, .quick-start-steps) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--suite-space-2);
}

@media (min-width: 768px) {
  :is(.suite-landing-steps, .landing__steps, .quick-start-steps) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--suite-space-3);
  }
}

/* 4-up only when each step can stay readable — avoid skinny desktop shrink */
@media (min-width: 1440px) {
  :is(.suite-landing-steps, .landing__steps, .quick-start-steps) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

:is(.suite-landing-step-num, .landing__step-num, .step-number) {
  margin: 0 0 var(--suite-space-2);
  color: var(--suite-primary);
  font-family: var(--suite-font-mono);
  font-size: var(--suite-text-sm);
  letter-spacing: var(--suite-tracking-wide);
  font-weight: var(--suite-weight-semibold);
}

:is(.suite-landing-grid, .landing__grid, .community-showcase-grid) {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--suite-space-2);
}

@media (min-width: 768px) {
  :is(.suite-landing-grid, .landing__grid, .community-showcase-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  :is(.suite-landing-grid, .landing__grid) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

:is(
  .suite-landing-feature,
  .landing__feature,
  .quick-start-step,
  .security-pillar,
  .community-showcase-card,
  .community-resource-link
) {
  display: block;
  min-height: 100%;
}

:is(.suite-landing-feature, .landing__feature, .quick-start-step) p,
:is(.quick-start-step) p,
:is(.security-pillar) span {
  margin: 0;
  color: var(--suite-ink-muted);
  font-size: var(--suite-text-md);
  line-height: var(--suite-leading-normal);
}

:is(.quick-start-step) h3,
:is(.security-pillar) strong,
:is(.community-showcase-card) h3 {
  margin: 0 0 var(--suite-space-1);
  color: var(--suite-ink);
  font-size: var(--suite-text-lg);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-tight);
}

/* Cards used as steps get suite card padding if only viking-card */
:is(.quick-start-step, .security-pillar).viking-card:not(.suite-card) {
  /* suite-card already applied when dual-classed */
}

.quick-start-step,
.security-pillar {
  padding: var(--suite-space-3) var(--suite-space-3) var(--suite-space-2);
  border: 1px solid var(--suite-border);
  border-radius: var(--suite-radius-surface);
  background: var(--suite-surface);
  box-shadow: var(--suite-elevation-1);
  transition: var(--suite-transition);
}

.quick-start-step:hover,
.quick-start-step:focus-visible,
.security-pillar:hover,
.security-pillar:focus-visible {
  border-color: var(--suite-border-strong);
  background: var(--suite-surface-elevated);
  /* Border/surface only — no lift on dense landing grids */
}

/* forjd-panel / viking-card tiles — hairline + quiet border hover (no lift) */
:is(.suite-landing-feature, .landing__feature)
  :is(.suite-card, .viking-card, .fj-card),
:is(.suite-landing-steps, .landing__steps)
  :is(.suite-landing-feature, .landing__feature)
  :is(.suite-card, .viking-card, .fj-card),
:is(.landing__band-panel) :is(.suite-card, .viking-card, .fj-card) {
  position: relative;
  height: 100%;
  overflow: hidden;
  transition: var(--suite-transition-colors);
}

:is(.suite-landing-feature, .landing__feature)
  :is(.suite-card, .viking-card, .fj-card)::before,
:is(.suite-landing-steps, .landing__steps)
  :is(.suite-landing-feature, .landing__feature)
  :is(.suite-card, .viking-card, .fj-card)::before,
:is(.landing__band-panel) :is(.suite-card, .viking-card, .fj-card)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--suite-primary) 28%, transparent),
    color-mix(in srgb, var(--suite-highlight) 55%, transparent) 40%,
    transparent 85%
  );
  opacity: 0.55;
}

:is(.suite-landing-feature, .landing__feature):hover
  :is(.suite-card, .viking-card, .fj-card),
:is(.suite-landing-steps, .landing__steps)
  :is(.suite-landing-feature, .landing__feature):hover
  :is(.suite-card, .viking-card, .fj-card) {
  border-color: var(--suite-border-strong);
  background: var(--suite-surface-elevated);
}

/* =============================================================================
   Capability bands (copy + metric panel)
   ============================================================================= */
:is(.suite-landing-bands, .landing__bands) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-section-gap);
}

:is(.suite-landing-band, .landing__band, .showcase-band) {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--suite-block-gap);
  align-items: stretch;
}

@media (min-width: 768px) {
  :is(.suite-landing-band, .landing__band, .showcase-band) {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--suite-space-8);
  }

  :is(.suite-landing-band, .landing__band)[data-reversed="true"],
  .landing__band--reversed,
  .showcase-band.reversed {
    direction: rtl;
  }

  :is(.suite-landing-band, .landing__band)[data-reversed="true"] > *,
  .landing__band--reversed > *,
  .showcase-band.reversed > * {
    direction: ltr;
  }
}

:is(.suite-landing-band-copy, .landing__band-copy, .showcase-band-copy) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-2);
  justify-content: center;
}

:is(.suite-landing-band-title, .landing__band-title, .showcase-band-copy h2) {
  margin: 0;
  font-size: var(--suite-text-xl);
  font-weight: var(--suite-weight-semibold);
  color: var(--suite-ink);
  letter-spacing: var(--suite-tracking-tight);
}

:is(.showcase-band-copy) p {
  margin: 0;
  color: var(--suite-ink-muted);
  line-height: var(--suite-leading-normal);
}

:is(.showcase-link, .community-showcase-cta) {
  display: inline-flex;
  align-items: center;
  gap: var(--suite-space-1);
  margin-top: var(--suite-space-1);
  color: var(--suite-primary);
  font-weight: var(--suite-weight-semibold);
  font-size: var(--suite-text-sm);
  text-decoration: none;
  letter-spacing: var(--suite-tracking-wide);
  transition: var(--suite-transition);
}

:is(.showcase-link, .community-showcase-cta):hover,
:is(.showcase-link, .community-showcase-cta):focus-visible {
  color: var(--suite-primary-hover);
  transform: translateX(var(--suite-nudge));
}

:is(.showcase-link-row) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--suite-space-3);
}

/* Metric panel inside bands */
:is(.suite-landing-metric-list, .landing__metric-list, .visual-metrics) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--suite-density-gap);
}

:is(.suite-landing-metric-list, .landing__metric-list) li,
:is(.visual-metric) {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--suite-space-3);
  border-bottom: 1px solid var(--suite-border);
  padding-block: var(--suite-space-1);
  font-size: var(--suite-text-md);
}

:is(.suite-landing-metric-list, .landing__metric-list) li:first-child,
:is(.visual-metric):first-child {
  padding-top: var(--suite-space-0-5);
}

:is(.suite-landing-metric-list, .landing__metric-list) li:last-child,
:is(.visual-metric):last-child {
  border-bottom: 0;
  padding-bottom: var(--suite-space-0-5);
}

:is(.suite-landing-metric-list, .landing__metric-list) span,
:is(.metric-label) {
  color: var(--suite-ink-muted);
  font-family: var(--suite-font-mono);
  letter-spacing: var(--suite-tracking-wide);
  text-transform: uppercase;
  font-size: var(--suite-text-xs);
}

:is(.suite-landing-metric-list, .landing__metric-list) strong,
:is(.metric-value) {
  color: var(--suite-ink);
  font-weight: var(--suite-weight-semibold);
  font-variant-numeric: tabular-nums;
}

:is(.visual-panel, .landing__band-panel) {
  min-height: 100%;
}

:is(.visual-panel-header) {
  display: flex;
  align-items: center;
  gap: var(--suite-space-2);
  margin-bottom: var(--suite-space-3);
  color: var(--suite-ink);
  font-weight: var(--suite-weight-semibold);
  font-size: var(--suite-text-sm);
}

/* =============================================================================
   Widget / pricing / community extras (suite DNA)
   ============================================================================= */
:is(.widget-showcase, .pricing-showcase, .security-pillars-band) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-block-gap);
}

:is(.widget-showcase-inner) {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--suite-space-5);
  align-items: center;
}

@media (min-width: 768px) {
  :is(.widget-showcase-inner) {
    grid-template-columns: 1fr 1fr;
  }
}

:is(.widget-copy) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-3);
}

:is(.embed-code) {
  margin: 0;
  padding: var(--suite-space-3);
  border: 1px solid var(--suite-border);
  border-radius: var(--suite-radius-surface);
  background: var(--suite-bg-subtle);
  overflow-x: auto;
}

:is(.embed-code) code {
  font-family: var(--suite-font-mono);
  font-size: var(--suite-text-xs);
  color: var(--suite-success);
  word-break: break-all;
}

/* Center copy with the single free-plan card */
:is(.pricing-showcase) {
  align-items: center;
}

:is(.pricing-showcase) .pricing-header {
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
}

:is(.pricing-showcase) .pricing-header p {
  max-width: none;
}

:is(.pricing-cards-container) {
  display: grid;
  justify-items: center;
  width: 100%;
}

:is(.pricing-card) {
  padding: var(--suite-space-5);
  border: 1px solid var(--suite-border-strong);
  border-radius: var(--suite-radius-surface);
  background: var(--suite-surface-elevated);
  /* Focal commercial surface — one step above peer cards */
  box-shadow: var(--suite-elevation-3);
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-3);
  width: 100%;
  max-width: 28rem;
  justify-self: center;
  margin-inline: auto;
}

:is(.pricing-card) h3 {
  margin: 0;
  font-size: var(--suite-text-xl);
  color: var(--suite-ink);
}

:is(.pricing-card) .price {
  font-size: var(--suite-text-4xl);
  font-weight: var(--suite-weight-bold);
  letter-spacing: var(--suite-tracking-tight);
  color: var(--suite-ink);
  font-variant-numeric: tabular-nums;
}

:is(.features-list) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--suite-space-2);
  color: var(--suite-ink-muted);
  font-size: var(--suite-text-md);
}

:is(.features-list) li {
  display: flex;
  align-items: center;
  gap: var(--suite-space-2);
}

:is(.security-pillars-grid) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--suite-space-2);
}

@media (min-width: 768px) {
  :is(.security-pillars-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

:is(.security-pillar) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-1);
}

/* Community cards */
:is(.community-showcase-card, .community-resource-link) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-density-gap);
  padding: var(--suite-space-3) var(--suite-space-3) var(--suite-space-2);
  border: 1px solid var(--suite-border);
  border-radius: var(--suite-radius-surface);
  background: var(--suite-surface);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--suite-elevation-1);
  transition: var(--suite-transition);
  min-height: 100%;
}

:is(.community-showcase-card):hover,
:is(.community-showcase-card):focus-visible,
:is(.community-resource-link):hover,
:is(.community-resource-link):focus-visible {
  border-color: var(--suite-border-strong);
  box-shadow: var(--suite-elevation-hover);
  background: var(--suite-surface-elevated);
  transform: translateY(var(--suite-hover-lift));
}

:is(.community-showcase-card) p,
:is(.community-resource-link) span {
  margin: 0;
  color: var(--suite-ink-muted);
  font-size: var(--suite-text-md);
  line-height: var(--suite-leading-normal);
}

:is(.community-showcase-card-title) {
  display: flex;
  align-items: center;
  gap: var(--suite-space-2);
}

:is(.community-resource-link) {
  flex-direction: row;
  align-items: center;
}

:is(.community-resource-link) > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-0-5);
}

:is(.community-resource-link) strong {
  color: var(--suite-ink);
  font-size: var(--suite-text-md);
}

:is(.community-resource-list) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--suite-space-2);
}

/* =============================================================================
   Meta footer strip — instrument ledger
   ============================================================================= */
:is(.suite-landing-meta, .landing__meta) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--suite-space-3) var(--suite-space-4);
  border-top: 1px solid var(--suite-border);
  padding-top: var(--suite-space-5);
  margin-top: var(--suite-space-3);
  font-size: var(--suite-text-sm);
  position: relative;
  align-items: start;
}

@media (min-width: 600px) {
  :is(.suite-landing-meta, .landing__meta) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--suite-space-3) var(--suite-space-5);
    padding-top: var(--suite-space-6);
  }
}

@media (min-width: 1024px) {
  :is(.suite-landing-meta, .landing__meta) {
    grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  }

  :is(.suite-landing-meta, .landing__meta) > div + div {
    border-inline-start: 1px solid
      color-mix(in srgb, var(--suite-border) 70%, transparent);
    padding-inline-start: var(--suite-space-4);
  }
}

:is(.suite-landing-meta, .landing__meta)::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: min(100%, 12rem);
  height: 1px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--suite-primary) 55%, transparent),
    transparent
  );
  opacity: 0.5;
}

:is(.suite-landing-meta, .landing__meta) span {
  display: block;
  color: var(--suite-ink-muted);
  font-family: var(--suite-font-mono);
  letter-spacing: var(--suite-tracking-caps);
  text-transform: uppercase;
  font-size: var(--suite-text-xs);
  margin-bottom: var(--suite-space-0-5);
}

:is(.suite-landing-meta, .landing__meta) a,
:is(.suite-landing-meta, .landing__meta) .suite-link,
:is(.suite-landing-meta, .landing__meta) .viking-link,
:is(.suite-landing-meta, .landing__meta) .fj-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--suite-touch);
  color: inherit;
  text-decoration: none;
  border-radius: var(--suite-radius-control);
  transition: var(--suite-transition-colors);
}

:is(.suite-landing-meta, .landing__meta) a:hover code,
:is(.suite-landing-meta, .landing__meta) a:focus-visible code,
:is(.suite-landing-meta, .landing__meta) .suite-link:hover code,
:is(.suite-landing-meta, .landing__meta) .suite-link:focus-visible code,
:is(.suite-landing-meta, .landing__meta) .viking-link:hover code,
:is(.suite-landing-meta, .landing__meta) .viking-link:focus-visible code,
:is(.suite-landing-meta, .landing__meta) .fj-link:hover code,
:is(.suite-landing-meta, .landing__meta) .fj-link:focus-visible code {
  color: var(--suite-primary);
}

:is(.suite-landing-meta, .landing__meta) code {
  color: var(--suite-ink);
  font-family: var(--suite-font-mono);
  word-break: break-all;
}

/*!
 * SUITE BACKEND — Pass 4 operational twin (backend.forjd.co + backend.deml.app)
 * ----------------------------------------------------------------------------
 * Quiet · centered · authoritative. Same tokens as product; no marketing chrome.
 * Dual selectors: .suite-backend-* / .backend-* / .fj-*
 * Docs: SUITE_BACKEND.md
 */

/* =============================================================================
   Document base — void, Inter, zero chrome noise
   ============================================================================= */
:is(
  html:has(.suite-backend-shell),
  html:has(.backend-splash-shell),
  body.suite-backend-splash,
  body.backend-splash,
  body.suite-backend-docs,
  body.backend-swagger,
  body.backend-redoc
) {
  margin: 0;
  min-height: 100%;
  background: var(--suite-bg);
  color: var(--suite-ink);
  font-family: var(--suite-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Splash: single soft electric bloom — quieter than product landing */
:is(body.suite-backend-splash, body.backend-splash) {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  background:
    radial-gradient(
      55% 42% at 50% 48%,
      color-mix(in srgb, var(--suite-primary) 7%, transparent),
      transparent 68%
    ),
    var(--suite-bg);
  color-scheme: dark;
}

:is(body.suite-backend-docs, body.backend-swagger, body.backend-redoc) {
  margin: 0;
  min-height: 100%;
  background: var(--suite-bg);
  color-scheme: dark;
}

/* =============================================================================
   Splash — perfectly centered logo only
   ============================================================================= */
:is(.suite-backend-shell, .backend-splash-shell) {
  box-sizing: border-box;
  min-height: 100dvh;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: var(--suite-space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Explicit dual-axis center for all engines */
  place-content: center;
  place-items: center;
  text-align: center;
}

:is(.suite-backend-logo, .backend-splash-logo) {
  display: block;
  width: min(7.5rem, 36vw);
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  margin-block: 0;
  border: 0;
  padding: 0;
  text-decoration: none;
  line-height: 0;
  /* Optical center: logo mark sits dead-center of the viewport */
  transform: translateZ(0);
  filter: drop-shadow(
    0 0 20px color-mix(in srgb, var(--suite-primary) 12%, transparent)
  );
  transition:
    transform var(--suite-duration-fast) var(--suite-ease),
    filter var(--suite-duration-fast) var(--suite-ease);
}

:is(.suite-backend-logo, .backend-splash-logo):hover {
  transform: translateY(var(--suite-hover-lift));
  filter: drop-shadow(
    0 0 26px color-mix(in srgb, var(--suite-primary) 18%, transparent)
  );
}

:is(.suite-backend-logo, .backend-splash-logo):focus-visible {
  outline: var(--suite-ring-width) solid var(--suite-ring);
  outline-offset: var(--suite-ring-offset);
  border-radius: var(--suite-radius);
}

:is(.suite-backend-logo, .backend-splash-logo) img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border: 0;
  vertical-align: middle;
}

/* Optional quiet product wordmark under mark (when present) */
:is(.suite-backend-wordmark, .backend-splash-wordmark) {
  margin: var(--suite-space-4) 0 0;
  font-family: var(--suite-font-sans);
  font-size: var(--suite-text-sm);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-brand);
  text-transform: uppercase;
  color: var(--suite-ink-muted);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  :is(.suite-backend-logo, .backend-splash-logo) {
    transition: none;
  }

  :is(.suite-backend-logo, .backend-splash-logo):hover {
    transform: none;
  }
}

/* =============================================================================
   Docs topbar — thin operational chrome (Swagger / ReDoc)
   ============================================================================= */
:is(.suite-backend-topbar, .backend-docs-topbar, .fj-topbar) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--suite-space-3);
  flex-wrap: wrap;
  box-sizing: border-box;
  min-height: var(--suite-control-height-lg);
  padding: 0 var(--suite-space-4);
  background: var(--suite-surface);
  border-bottom: 1px solid var(--suite-border);
  font-family: var(--suite-font-sans);
  box-shadow: var(--suite-highlight);
  position: sticky;
  top: 0;
  z-index: var(--suite-z-sticky);
}

:is(.suite-backend-topbar, .backend-docs-topbar, .fj-topbar) > a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--suite-touch);
}

:is(
  .suite-backend-brand,
  .backend-docs-brand,
  .fj-topbar .fj-brand,
  .suite-backend-topbar .fj-brand
) {
  font-family: var(--suite-font-mono);
  letter-spacing: var(--suite-tracking-caps);
  text-transform: uppercase;
  font-size: var(--suite-text-sm);
  font-weight: var(--suite-weight-semibold);
  color: var(--suite-primary);
  line-height: 1;
}

:is(.suite-backend-topbar, .backend-docs-topbar, .fj-topbar) nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--suite-space-1) var(--suite-space-3);
}

:is(.suite-backend-topbar, .backend-docs-topbar, .fj-topbar) nav a {
  color: var(--suite-ink-muted);
  font-size: var(--suite-text-xs);
  font-family: var(--suite-font-mono);
  letter-spacing: var(--suite-tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  min-height: var(--suite-touch);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--suite-space-1);
  border-radius: var(--suite-radius);
  transition: color var(--suite-duration-fast) var(--suite-ease);
}

:is(.suite-backend-topbar, .backend-docs-topbar, .fj-topbar) nav a:hover,
:is(.suite-backend-topbar, .backend-docs-topbar, .fj-topbar)
  nav
  a:focus-visible {
  color: var(--suite-primary);
}

:is(.suite-backend-topbar, .backend-docs-topbar, .fj-topbar)
  nav
  a:focus-visible {
  outline: var(--suite-ring-width) solid var(--suite-ring);
  outline-offset: var(--suite-ring-offset);
}

/* Docs content well — calm vertical rhythm */
:is(body.suite-backend-docs, body.backend-swagger, body.backend-redoc)
  #swagger-ui,
:is(body.suite-backend-docs, body.backend-swagger, body.backend-redoc) redoc {
  display: block;
  max-width: var(--suite-content-max);
  margin-inline: auto;
  padding: var(--suite-space-4) var(--suite-page-gutter) var(--suite-space-8);
  box-sizing: border-box;
}

/* Swagger opblock chrome — full skin lives in suite-apidocs.css */
:is(body.backend-swagger, body.suite-backend-docs) .swagger-ui .opblock {
  border-radius: var(--suite-radius);
  box-shadow: none;
}