/* packages/ui/src/styles/index.css */

/* ===========================
   BASE DESIGN SYSTEM
   =========================== */

/* Import complete design system from @donotdev/components */

/* packages/components/src/styles/index.css */

/* 1. Core design tokens - foundation variables */

/* packages/components/src/styles/variables.css */

:root {
  /* ===========================
     BREAKPOINT SYSTEM - SINGLE SOURCE OF TRUTH
     Used by: CSS @media queries, JavaScript hooks, responsive components
     Note: CSS variables don't work in @media, so we use hardcoded px values
     =========================== */
  --breakpoint-mobile: 768px; /* < 768 = mobile */
  --breakpoint-tablet: 1024px; /* 768-1023 = tablet */
  --breakpoint-laptop: 1440px; /* 1024-1439 = laptop (key layout split) */
  --breakpoint-desktop: 1920px; /* 1440+ = desktop */

  /* ===========================
     INTERACTIVE ELEMENTS
     Standard touch-friendly sizing for all interactive components
     =========================== */
  --touch-target: 48px;
  --icon-md: 24px; /* Standard icon size */
  --icon-touch: 32px; /* Large icon size (reserved) */

  /* ===========================
     SPACING SYSTEM - BASE TOKENS (DEFAULT/STANDARD)
     Modern gap-based spacing with semantic tokens
     
     CRITICAL RULE: 2/4/8 SCALE ONLY
     All spacing values MUST follow the 2/4/8 scale:
     - 0.5rem (8px) = gap-2
     - 1rem (16px) = gap-4  
     - 2rem (32px) = gap-8
     - Multiples of 8px are acceptable (3rem=48px, 4rem=64px, 6rem=96px)
     
     These are STANDARD density defaults - density system overrides below
     =========================== */

  /**
   * Gap system — 4 tiers, viewport-safe.
   *
   * Each gap uses min(rem, 2vw) so that on extreme narrow viewports
   * (<400px) all gaps converge to 2% of viewport width instead of
   * holding fixed rem values that eat into content. On normal+
   * screens the rem value wins and the 2vw floor is irrelevant.
   *
   * Density overrides below follow the same pattern — their clamp()
   * values are wrapped in min(..., 2vw) so the viewport floor
   * applies regardless of density tier.
   */
  --gap-none: 0;
  --gap-sm: min(0.5rem, 2vw); /* 8px or 2vw, whichever is smaller */
  --gap-md: min(1rem, 2vw); /* 16px or 2vw */
  --gap-lg: min(2rem, 2vw); /* 32px or 2vw */

  /* ===========================
     DIALOG SIZE VARIANTS
     Modal dialog max-widths for different content types
     =========================== */
  --dialog-auto: 32rem; /* ~512px - default dialog size */
  --dialog-form: 28rem; /* ~448px - form dialogs */
  --dialog-text: 42rem; /* ~672px - text content dialogs */
  --dialog-image: 56rem; /* ~896px - image dialogs */
  --dialog-code: 72rem; /* ~1152px - code/content dialogs */

  /* ===========================
     Z-INDEX SYSTEM - GLOBAL HIERARCHY
     Single source of truth for stacking order across all components
     =========================== */
  --z-header: 100;
  --z-sidebar: 90;
  --z-footer: 1;
  --z-overlay: 40;
  --z-breadcrumbs: 10;
  --z-dropdown: 50;
  --z-modal: 1000;
  --z-tooltip: 1100;
  --z-toast: 1200;

  /* ===========================
     THEME COLORS (HIGH CONTRAST LIGHT DEFAULTS)
     =========================== */
  color-scheme: light dark;

  /* Theme flag - defaults to light (0), overridden by themes */
  --theme-is-dark: 0;

  /* Base colors */
  --background: #ffffff;
  --foreground: #000000;
  --text-color: #000000;

  /* Brand colors */
  --primary: #00bcd4; /* Cyan */
  --primary-foreground: #000000;
  --secondary: #047857; /* Emerald-700 - WCAG AA compliant (5.48:1 with white) */
  --secondary-foreground: #ffffff;
  --accent: #ff9800; /* Orange */
  --accent-foreground: #000000;

  /* Status colors */
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --success: #047857; /* Emerald-700 - WCAG AA compliant (5.48:1 with white) */
  --success-foreground: #ffffff;
  --warning: #f59e0b;
  --warning-foreground: #000000;

  /* UI colors (Computed) */
  --muted: color-mix(in oklab, var(--foreground) 5%, var(--background));
  --muted-foreground: color-mix(
    in oklab,
    var(--foreground) 75%,
    var(--background)
  );
  --border: color-mix(in oklab, var(--foreground) 15%, var(--background));
  --input: var(--muted);
  --ring: var(--primary);
  --placeholder: rgb(from var(--muted-foreground) r g b / 0.6);

  /* Containers (Flat design by default) */
  --card: var(--background);
  --card-foreground: var(--foreground);
  --popover: var(--card);
  --popover-foreground: var(--card-foreground);

  /*
   * Root card snapshot — computed once on :root from --card/--card-foreground,
   * then inherited unchanged. Variant blocks (e.g. primary) override --card but
   * never touch these, so data-variant='default' can reset --card back to the
   * root value even when nested inside another variant.
   */
  --card-base: var(--card);
  --card-foreground-base: var(--card-foreground);

  /* ===========================
     BORDER RADIUS - 3 VALUES ONLY
     =========================== */
  --radius: 0.75rem; /* 12px - default */
  --radius-none: 0; /* square */
  --radius-md: var(--radius); /* 12px - default rounded */
  --radius-full: 9999px; /* pill shape */

  /* Component-specific radius */
  --radius-interactive: 0; /* Buttons, links = square */
  --radius-surface: var(--radius-md); /* Cards, dialogs = rounded */
  --radius-floating: var(--radius-none); /* Dropdowns, popovers = square */

  /* ===========================
     TYPOGRAPHY
     =========================== */

  /* DRY: Default font for everything */
  --font-family: var(--font-sans);

  /* Sans-serif: Inter (2026 standard) */
  --font-sans:
    Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
    Arial, sans-serif;

  /* Serif: Playfair Display (headlines) */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Headlines use sans by default (serif available for opt-in) */
  --font-headline: var(--font-sans);

  --font-mono:
    ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, Monaco,
    'Liberation Mono', monospace;

  /* Typography Scale - Musical Scale System (STANDARD density defaults - Major Third 1.25×) */
  --font-size-xs: 0.75rem; /* 12px - captions, shortcuts, meta */
  --font-size-sm: 0.875rem; /* 14px - small text, captions */
  --font-size-base: 1rem; /* 16px - body text, DEFAULT */
  --font-size-lg: 1.25rem; /* 20px - base × 1.25¹ - emphasized text */
  --font-size-xl: 1.563rem; /* 25px - base × 1.25² - headings */
  --font-size-2xl: 1.953rem; /* 31px - base × 1.25³ - large headings */
  --font-size-3xl: 2.441rem; /* 39px - base × 1.25⁴ - hero text */

  /* Line Height - Musical Scale System (matches font scale ratio) */
  --line-height: 1.25; /* Major Third - Standard density default */

  /* Font Weight - Semantic weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600; /* Bold/strong text */
  --font-weight-bold: 700;

  /* ===========================
     PREMIUM VISUAL DNA
     =========================== */

  /* Hairline lines (translucent, work on light & dark) */
  --line-1: color-mix(in oklab, var(--foreground) 6%, transparent);
  --line-2: color-mix(in oklab, var(--foreground) 10%, transparent);
  --border-hairline: 1px;
  --border-width: 2px;
  --border-huge: 3px;

  /* Shadow System - 3 LEVELS: none, md (default), xl */
  --shadow-color: color-mix(in oklab, var(--foreground) 12%, transparent);
  --shadow-color-light: color-mix(in oklab, var(--foreground) 8%, transparent);
  --shadow-color-medium: color-mix(
    in oklab,
    var(--foreground) 10%,
    transparent
  );

  /* Shadow definitions - RTL versions flip x-offset */
  --shadow-sm:
    0.5px 1px 2px -0.5px var(--shadow-color),
    0.25px 0.5px 1px -0.25px var(--shadow-color-light);
  --shadow-sm-rtl:
    -0.5px 1px 2px -0.5px var(--shadow-color),
    -0.25px 0.5px 1px -0.25px var(--shadow-color-light);

  --shadow-md:
    1px 2px 4px -1px var(--shadow-color),
    0.5px 1px 2px -0.5px var(--shadow-color-medium);
  --shadow-md-rtl:
    -1px 2px 4px -1px var(--shadow-color),
    -0.5px 1px 2px -0.5px var(--shadow-color-medium);

  --shadow-xl:
    6px 12px 24px -6px var(--shadow-color),
    3px 6px 12px -3px var(--shadow-color-light);
  --shadow-xl-rtl:
    -6px 12px 24px -6px var(--shadow-color),
    -3px 6px 12px -3px var(--shadow-color-light);

  /* Root shadow snapshots — same principle as --card-base (see above) */
  --shadow-md-base: var(--shadow-md);
  --shadow-xl-base: var(--shadow-xl);

  /* Per-variant shadows — essences override these with different colors/shapes */
  --shadow-primary: var(--shadow-md);
  --shadow-primary-xl: var(--shadow-xl);
  --shadow-secondary: var(--shadow-md);
  --shadow-secondary-xl: var(--shadow-xl);

  /* Interactive shadows */
  --shadow-interactive: 0 0 0 3px
    color-mix(in oklab, var(--ring) 20%, transparent);
  --shadow-focus: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
  --shadow-none: none;

  /* ===========================
     ANIMATION SYSTEM
     =========================== */

  /* Motion easing */
  --ease-heavy: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Duration tokens */
  --dur-fast: 0.15s;
  --dur-normal: 0.3s;
  --dur-slow: 0.5s;
  --dur-heavy: 0.7s;
  --dur-hero: 1s;

  /* Performance hints */
  --will-change-transform: transform;
  --will-change-none: auto;

  /* ===========================
     OPACITY SYSTEM
     Standard scale: 0, 0.3, 0.6, 0.9, 1
     (0 and 1 are hardcoded, only 3 variables needed)
     =========================== */
  --opacity-subtle: 0.3;
  --opacity-muted: 0.6;
  --opacity-strong: 0.9;

  /* ===========================
     PANEL/POPOVER WIDTHS
     Standard widths for contextual panels, popovers, and tooltips
     =========================== */
  --panel-width-sm: 16rem; /* 256px - compact panels */
  --panel-width-md: 20rem; /* 320px - standard panels */
  --panel-width-lg: 24rem; /* 384px - wide panels */
  --panel-width-xl: 28rem; /* 448px - extra wide panels */

  /* ===========================
     CONTENT WIDTH - BASE TOKEN
     Base token for content width constraints
     Layout system computes actual --content-width accounting for sidebar
     =========================== */
  --max-content-width: 87.5rem; /* 1480px - default ideal max */
  --content-width: var(
    --max-content-width
  ); /* Default: use max (layout overrides) */
}

/* ===========================
   DENSITY SYSTEM
   Semantic spacing and typography presets based on context
   Applied via [data-density] attribute on root or container
   =========================== */

/* Compact (Admin/Data) - Dense, information-dense layouts - Minor Third (1.2×) */

[data-density='compact'] {
  /* Base sizes: Fluid responsiveness for all text, zoom-safe */
  --font-size-base: clamp(
    0.875rem,
    0.8125rem + 0.25vw,
    0.9375rem
  ); /* 14-15px fluid */
  --font-size-lg: clamp(
    1.05rem,
    0.9375rem + 0.5vw,
    1.125rem
  ); /* 17-18px fluid */
  --font-size-xl: clamp(
    1.26rem,
    1.125rem + 0.75vw,
    1.375rem
  ); /* 20-22px fluid */
  /* Display sizes: Musical scale + fluid responsiveness */
  --font-size-2xl: clamp(
    1.512rem,
    1.375rem + 0.75vw,
    1.625rem
  ); /* 24-26px fluid */
  --font-size-3xl: clamp(1.814rem, 1.625rem + 1vw, 2rem); /* 29-32px fluid */
  --gap-sm: min(
    clamp(0.375rem, 0.3125rem + 0.25vw, 0.5rem),
    2vw
  ); /* 6-8px fluid, 2vw floor */
  --gap-md: min(
    clamp(0.75rem, 0.625rem + 0.5vw, 0.875rem),
    2vw
  ); /* 12-14px fluid, 2vw floor */
  --gap-lg: min(
    clamp(1.5rem, 1.25rem + 1vw, 1.75rem),
    2vw
  ); /* 24-28px fluid, 2vw floor */
  --line-height: 1.2; /* Minor Third - All text */
}

/* Standard (Docs/SaaS) - DEFAULT, balanced for readability */

[data-density='standard'] {
  /* Base sizes: Fluid responsiveness for all text, zoom-safe */
  --font-size-base: clamp(
    1rem,
    0.9375rem + 0.25vw,
    1.0625rem
  ); /* 16-17px fluid */
  --font-size-lg: clamp(
    1.25rem,
    1.125rem + 0.5vw,
    1.375rem
  ); /* 20-22px fluid */
  --font-size-xl: clamp(
    1.563rem,
    1.375rem + 0.75vw,
    1.75rem
  ); /* 25-28px fluid */
  /* Display sizes: Musical scale + fluid responsiveness */
  --font-size-2xl: clamp(1.953rem, 1.75rem + 1vw, 2.25rem); /* 31-36px fluid */
  --font-size-3xl: clamp(
    2.441rem,
    2rem + 1.5vw,
    3rem
  ); /* 39-48px fluid - hero text */
  --gap-sm: min(
    clamp(0.5rem, 0.4375rem + 0.25vw, 0.625rem),
    2vw
  ); /* 8-10px fluid, 2vw floor */
  --gap-md: min(
    clamp(1rem, 0.875rem + 0.5vw, 1.25rem),
    2vw
  ); /* 16-20px fluid, 2vw floor */
  --gap-lg: min(
    clamp(2rem, 1.75rem + 1vw, 2.5rem),
    2vw
  ); /* 32-40px fluid, 2vw floor */
  --line-height: 1.25; /* Major Third - All text */
}

/* Expressive (Marketing) - Perfect Fourth (1.333×) + Fluid typography (2025 best practice) */

[data-density='expressive'] {
  /* Base sizes: Fluid responsiveness for all text, zoom-safe */
  --font-size-base: clamp(1rem, 0.875rem + 0.5vw, 1.125rem); /* 16-18px fluid */
  --font-size-lg: clamp(1.25rem, 1rem + 0.75vw, 1.5rem); /* 20-24px fluid */
  --font-size-xl: clamp(1.5rem, 1rem + 1vw, 2rem); /* 24-32px fluid */
  /* Display sizes: Musical scale + fluid responsiveness for drama */
  --font-size-2xl: clamp(
    2.666rem,
    2rem + 1.5vw,
    3.5rem
  ); /* base × 1.333³ fluid */
  --font-size-3xl: clamp(
    3.555rem,
    2.5rem + 2.5vw,
    5rem
  ); /* base × 1.333⁴ fluid */
  --gap-sm: min(
    clamp(0.5rem, 0.375rem + 0.25vw, 0.75rem),
    2vw
  ); /* 8-12px fluid, 2vw floor */
  --gap-md: min(
    clamp(1rem, 0.75rem + 0.5vw, 1.5rem),
    2vw
  ); /* 16-24px fluid, 2vw floor */
  --gap-lg: min(
    clamp(2rem, 1.5rem + 1vw, 3rem),
    2vw
  ); /* 32-48px fluid, 2vw floor */
  --line-height: 1.33; /* Perfect Fourth - All text */
}

/* 2. Theme system - color palette definitions */

/* packages/components/src/styles/themes.css */

/* ===========================
   CORE THEMES (FRAMEWORK DEFAULTS)
   Aligned with Demo App High Contrast Themes
   =========================== */

/* Light Theme (Default/High Contrast Light) */

/* Framework provides ONLY light theme as minimal default */

/* Users define their own themes (including dark) in their themes.css */

/* Note: :root defaults in variables.css should match this */

:root {
  --theme-icon: 'Sun';
  --theme-label: 'Light';
  --theme-is-dark: 0;

  /* Colors */
  --foreground: #000000;
  --background: #ffffff;
  --primary: #00bcd4; /* Cyan */
  --secondary: #047857; /* Emerald-700 - WCAG AA compliant (5.48:1 with white) */
  --accent: #ff9800; /* Orange */

  /* Semantic */
  --success: #047857; /* Emerald-700 - WCAG AA compliant (5.48:1 with white) */
  --warning: #f59e0b;
  --destructive: #dc2626;

  /* Surfaces (Glow provides shading) */
  --card: var(--background);
  --card-foreground: var(--foreground);
  --popover: var(--card);
  --popover-foreground: var(--card-foreground);

  /* Text Variants */
  --primary-foreground: var(--foreground);
  --secondary-foreground: var(--background);
  --accent-foreground: var(--foreground);
  --success-foreground: var(--background);
  --warning-foreground: var(--foreground);
  --destructive-foreground: var(--background);
}

/* 3. Base styles - document setup and resets */

/* packages/components/src/styles/base.css */

/* ===========================
    DOCUMENT STRUCTURE
    =========================== */

html {
  touch-action: manipulation;
  height: 100%;
  width: 100%;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

@supports (overscroll-behavior: none) {

body {
    overscroll-behavior: none;
}
  }

body {

  width: 100%;
  height: 100%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

#root {
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* ===========================
    SCROLLBAR STYLING
    Theme-aware, square edges (interactive element)
    =========================== */

/* Firefox */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--muted-foreground) var(--muted);
}

/* Webkit (Chrome, Safari, Edge) */

::-webkit-scrollbar {
  width: 0.5rem;
  background-color: var(--muted);
}

::-webkit-scrollbar-thumb {
  background-color: var(--muted-foreground);
  border-radius: var(--radius-interactive);
}

:is(::-webkit-scrollbar-thumb):hover {
    background-color: var(--accent);
  }

/* ===========================
    GLOBAL TRANSITIONS
    =========================== */

/* Removed global * transitions to prevent jank and hover delays */

/* Component-specific transitions are handled individually for better performance */

/* Reset and base styles */

:root {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Remove default margin and padding */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Set core body defaults — font-family here so theme tokens on :root cascade cleanly */

body {
  font-family: var(--font-family, var(--font-sans));
  min-height: 100dvh;
  line-height: var(--line-height);
  text-rendering: optimizeSpeed;
  font-size: var(--font-size-base);
}

/* Make images easier to work with */

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
  font: inherit;
}

/* ===========================
   BASE LINK STYLING
   Remove browser defaults, provide framework defaults
   =========================== */

a:not(.dndev-interactive),a:not(.dndev-interactive):link,a:not(.dndev-interactive):visited {
      color: var(--primary);
      text-decoration: none;
      transition: color var(--dur-fast) var(--ease-in-out);
    }

a:not(.dndev-interactive):hover {
      color: var(--primary);
    }

a:not(.dndev-interactive):active {
      color: var(--primary);
    }

a:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: var(--radius-interactive);
  }

/* Main element - no focus outline (programmatic focus for keyboard nav) */

main:focus-visible {
  outline: none;
}

/* ===========================
   BASE TYPOGRAPHY - RESET ONLY
   Zero margins, components own their spacing
   Use .prose wrapper for content pages (docs, markdown)
   =========================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height);
  color: var(--foreground);
  background: transparent;
  text-wrap: balance; /* Equalize line lengths, prevent orphans */
  text-transform: var(--text-transform-heading, none);
  letter-spacing: var(--letter-spacing-heading, normal);
}

:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-headline);
}

h1 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

h4 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

h5,
h6 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

p {
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height);
  color: var(--foreground);
  background: transparent;
  text-wrap: pretty; /* Optimize last line, avoid orphans */
}

ul,
ol {
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height);
  color: var(--foreground);
  background: transparent;
  list-style-position: outside;
  text-wrap: pretty;
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

li {
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height);
  color: var(--foreground);
  background: transparent;
}

/* Semantic HTML - strong and em */

strong {
  font-weight: var(--font-weight-semibold);
  font-size: inherit; /* Inherit parent font size (body text) */
  line-height: inherit;
  color: inherit;
  background: transparent;
}

em {
  font-style: italic;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: transparent;
}

/* Remove all animations and transitions for people that prefer not to see them */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 4. Component patterns (Shared classes) */

/* packages/components/src/styles/patterns.css */

/* Menu scroll area pattern - shared by DropdownMenu, Select, Combobox */

.dndev-menu-scroll-area {
  max-height: 50dvh;
}

.dndev-menu-scroll-area .dndev-scroll-area-viewport {
  max-height: 50dvh;
}

/* ===========================
         FORM COMPONENTS (BASE)
         =========================== */

/* Input base class - text inputs, textarea, select */

.dndev-input {
  display: flex;
  width: 100%;
  border-radius: var(--radius-interactive);
  border: var(--border-hairline) solid var(--line-2);
  background-color: transparent;
  color: var(--foreground);
  padding-inline-start: var(--gap-md);
  padding-inline-end: var(--gap-md);
  padding-top: var(--gap-sm);
  padding-bottom: var(--gap-sm);
  font-size: max(16px, var(--font-size-base));
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-normal) var(--ease-in-out);
  /* Touch target for mobile */
  height: var(--touch-target);
  touch-action: manipulation;

  /* Textarea specific - resize from bottom-right only */
}

.dndev-input:is(textarea) {
    resize: vertical;
    min-height: var(--touch-target);
    max-height: 50dvh;
    overflow-y: auto;
    height: auto;
  }

.dndev-input::-moz-placeholder {
    color: var(--placeholder);
  }

.dndev-input::placeholder {
    color: var(--placeholder);
  }

.dndev-input:hover {
    border-color: var(--ring);
  }

.dndev-input:focus {
    border-color: var(--ring);
    outline: none;
    box-shadow: var(--shadow-focus);
  }

.dndev-input:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus), var(--shadow-interactive);
  }

.dndev-input:disabled {
    cursor: not-allowed;
    opacity: var(--opacity-muted);
  }

/* Error state - destructive variant */

.dndev-input[data-variant='destructive'] {
    border-color: var(--destructive);
  }

.dndev-input[data-variant='destructive']:focus {
      border-color: var(--destructive);
      box-shadow: 0 0 0 3px
        color-mix(in oklab, var(--destructive) 50%, transparent);
    }

.dndev-input[data-variant='destructive']:focus-visible {
      box-shadow:
        0 0 0 3px color-mix(in oklab, var(--destructive) 50%, transparent),
        0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent);
    }

/* File input specific styles */

.dndev-input[type='file']::file-selector-button {
    border: 0;
    background-color: transparent;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
  }

/* Radix UI and other non-native placeholders (e.g. Select, DatePicker triggers) */

[data-placeholder] {
  color: var(--placeholder);
}

/* Control base class - checkbox, radio, switch, slider */

.dndev-control {
  flex-shrink: 0;
  border: var(--border-width) solid
    color-mix(in oklab, var(--foreground) 25%, var(--background));
  background-color: transparent;
  transition: all var(--dur-fast) var(--ease-in-out);
  color: var(--primary);
  cursor: pointer;
  outline: none;
}

.dndev-control:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus), var(--shadow-interactive);
  }

.dndev-control:disabled {
    cursor: not-allowed;
    opacity: var(--opacity-muted);
    pointer-events: none;
  }

/* Variants - set colors and border-color using framework variables */

.dndev-control[data-variant='primary'] {
    color: var(--primary);
    border-color: var(--primary);
  }

.dndev-control[data-variant='secondary'] {
    color: var(--secondary);
    border-color: var(--secondary);
  }

.dndev-control[data-variant='muted'] {
    color: var(--muted-foreground);
    border-color: var(--border);
  }

.dndev-control[data-variant='accent'] {
    color: var(--accent);
    border-color: var(--accent);
  }

.dndev-control[data-variant='success'] {
    color: var(--success);
    border-color: var(--success);
  }

.dndev-control[data-variant='warning'] {
    color: var(--warning);
    border-color: var(--warning);
  }

.dndev-control[data-variant='destructive'] {
    color: var(--destructive);
    border-color: var(--destructive);
  }

/* ===========================
         BASE CLASSES - SURFACE & INTERACTIVE
         =========================== */

/* SURFACE - Static elevated containers (cards, dialogs, sheets) */

.dndev-surface {
  /* Glow formulas - defined here so they recompute when variants change --card */
  /* Creates gradual shades: base card color tinted with foreground color */
  /* Light mode (0): 10% / 5% / 0% - subtle shading */
  /* Dark mode (1): 25% / 15% / 7% - more visible contrast */
  --surface-glow-start: color-mix(
    in oklab,
    var(--card) calc(90% - 15% * var(--theme-is-dark)),
    var(--card-foreground) calc(10% + 15% * var(--theme-is-dark))
  );
  --surface-glow-mid: color-mix(
    in oklab,
    var(--card) calc(95% - 10% * var(--theme-is-dark)),
    var(--card-foreground) calc(5% + 10% * var(--theme-is-dark))
  );
  --surface-glow-end: var(--card);
  --surface-ring: color-mix(
    in oklab,
    var(--card) calc(92% - 12% * var(--theme-is-dark)),
    var(--card-foreground) calc(8% + 12% * var(--theme-is-dark))
  );
  --surface-glow-gradient: linear-gradient(
    135deg,
    var(--surface-glow-end) 0%,
    var(--surface-glow-mid) 50%,
    var(--surface-glow-start) 100%
  );

  background: var(--surface-glow-gradient);
  color: var(--card-foreground);
  border: var(--border-hairline) solid var(--line-2);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-md);
  padding: var(--gap-md); /* 1rem / 16px default */
  padding-block-start: calc(
    var(--gap-md) + var(--gap-sm)
  ); /* Extra top padding for FloatingLabels */
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition:
    transform var(--dur-normal) var(--ease-in-out),
    box-shadow var(--dur-normal) var(--ease-in-out);

  /* Override end for dark mode (color-mix with 0% doesn't work) */
}

.dark .dndev-surface {
    --surface-glow-end: color-mix(
      in oklab,
      var(--card) 93%,
      var(--card-foreground) 7%
    );
  }

/* Disable glow with data-glow='blank' */

.dndev-surface[data-glow='blank'] {
    background: var(--card);
  }

.dndev-surface:dir(rtl) {
    background: linear-gradient(
      135deg,
      var(--surface-glow-start) 0%,
      var(--surface-glow-mid) 50%,
      var(--surface-glow-end) 100%
    );
  }

/* Size variants - ONLY 3 sizes */

.dndev-surface[data-size='sm'] {
    padding: var(--gap-sm);
  }

/* 8px */

.dndev-surface[data-size='md'] {
    padding: var(--gap-md);
  }

/* 16px - default */

.dndev-surface[data-size='lg'] {
    padding: var(--gap-lg);
  }

/* 32px */

/* Hover behaviors */

.dndev-surface[data-hover='lift']:hover {
    transform: scale(1.02);
  }

.dndev-surface[data-hover='glow']:hover {
      box-shadow:
        var(--shadow-xl),
        0 0 40px color-mix(in oklab, var(--foreground) 30%, transparent);
    }

.dndev-surface[data-hover='glow']:dir(rtl):hover {
      box-shadow:
        var(--shadow-xl-rtl),
        0 0 40px color-mix(in oklab, var(--foreground) 30%, transparent);
    }

/* Role-specific defaults */

.dndev-surface[data-role='card'] {
    padding: var(--gap-md);
    border-radius: var(--radius-surface);
  }

/* Elevated cards - stronger shadow */

/* Apply if elevated=true OR (clickable=true AND elevated!=false) */

.dndev-surface[data-elevated='true'],.dndev-surface[data-clickable='true']:not([data-elevated='false']) {
    box-shadow: var(--shadow-xl);
  }

:is(.dndev-surface[data-elevated='true'],.dndev-surface[data-clickable='true']:not([data-elevated='false'])):dir(rtl) {
      box-shadow: var(--shadow-xl-rtl);
    }

/* Clickable cards - hover effects */

.dndev-surface[data-clickable='true'] {
    cursor: pointer;
    transition:
      transform var(--dur-normal) var(--ease-in-out),
      box-shadow var(--dur-normal) var(--ease-in-out),
      border-color var(--dur-normal) var(--ease-in-out);
  }

.dndev-surface[data-clickable='true']:hover {
      transform: translateY(-5px);
      border-color: var(--accent);
      box-shadow:
        var(--shadow-xl),
        0 0 0 1px var(--accent);
    }

.dndev-surface[data-clickable='true']:dir(rtl):hover {
      box-shadow:
        var(--shadow-xl-rtl),
        0 0 0 1px var(--accent);
    }

.dndev-surface[data-role='floating'] {
    box-shadow: none;
    will-change: var(--will-change-none);
  }

.dndev-surface[data-role='floating']:hover {
      transform: none;
    }

/**
   * Variant system - 6 surface variants
   * - default: Standard card/surface (--card colors)
   * - muted: Subtle background (--muted colors)
   * - primary: Primary brand color (--primary colors)
   * - secondary: Secondary brand color (--secondary colors)
   * - accent: Highlighted/active state (--accent colors, sets context for children)
   * - destructive: Error/danger state (--destructive colors)
   * 
   * Variants override --card and --card-foreground.
   * Primary/secondary also override --shadow-md/--shadow-xl for per-variant shadows.
   * Default resets --card from --card-base (root snapshot) so nested default cards
   * inside other variants get the root card color, not the parent's.
   * Surface glow gradient is computed from --theme-is-dark flag and not affected by variants.
   */

.dndev-surface[data-variant='default'] {
    --card: var(--card-base);
    --card-foreground: var(--card-foreground-base);
    --shadow-md: var(--shadow-md-base);
    --shadow-xl: var(--shadow-xl-base);
  }

.dndev-surface[data-variant='muted'] {
    --card: var(--muted);
    --card-foreground: var(--muted-foreground);
    border-color: var(--border);
  }

.dndev-surface[data-variant='primary'] {
    --card: var(--primary);
    --card-foreground: var(--primary-foreground);
    --shadow-md: var(--shadow-primary);
    --shadow-xl: var(--shadow-primary-xl);
    border-color: var(--primary);
  }

.dndev-surface[data-variant='secondary'] {
    --card: var(--secondary);
    --card-foreground: var(--secondary-foreground);
    --shadow-md: var(--shadow-secondary);
    --shadow-xl: var(--shadow-secondary-xl);
    border-color: var(--secondary);
  }

.dndev-surface[data-variant='accent'] {
    --card: var(--accent);
    --card-foreground: var(--accent-foreground);
    border-color: var(--accent);

    /* Context variables - children read these for adaptation */
    --surface-text: var(--accent-foreground);
    --surface-bg: var(--accent);
  }

.dndev-surface[data-variant='destructive'] {
    --card: var(--destructive);
    --card-foreground: var(--destructive-foreground);
    border-color: var(--destructive);
  }

.dndev-surface[data-variant='success'] {
    --card: var(--success);
    --card-foreground: var(--success-foreground);
    border-color: var(--success);
  }

.dndev-surface[data-variant='warning'] {
    --card: var(--warning);
    --card-foreground: var(--warning-foreground);
    border-color: var(--warning);
  }

.dndev-surface[data-variant='outline'] {
    background: transparent;
    color: var(--foreground);
    border: var(--border-hairline) solid var(--border);
    box-shadow: none;
  }

.dndev-surface[data-variant='glass'] {
    background: color-mix(in oklab, var(--card) 55%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: var(--border-hairline) solid
      color-mix(in oklab, var(--card-foreground) 25%, transparent);
    box-shadow:
      var(--shadow-lg),
      inset 0 1px 0 0
        color-mix(in oklab, var(--card-foreground) 10%, transparent);
  }

/* Separator style */

.dndev-surface [data-orientation='horizontal'][role='separator'] {
    height: 1px;
    background-color: var(--border);
    margin-block-start: var(--gap-sm);
    margin-block-end: var(--gap-sm);
    margin-inline-start: calc(-1 * var(--gap-sm)); /* Extend to edges */
    margin-inline-end: calc(-1 * var(--gap-sm));
  }

/* FLOATING - Floating containers (popovers, dropdowns, menus, tooltips, navigation) */

.dndev-floating {
  /* Glow formulas - defined here so they recompute when variants change --popover */
  /* Creates gradual shades: base popover color tinted with foreground color */
  /* Light mode (0): 10% / 5% / 0% - subtle shading */
  /* Dark mode (1): 25% / 15% / 7% - more visible contrast */
  --floating-glow-start: color-mix(
    in oklab,
    var(--popover) calc(90% - 15% * var(--theme-is-dark)),
    var(--popover-foreground) calc(10% + 15% * var(--theme-is-dark))
  );
  --floating-glow-mid: color-mix(
    in oklab,
    var(--popover) calc(95% - 10% * var(--theme-is-dark)),
    var(--popover-foreground) calc(5% + 10% * var(--theme-is-dark))
  );
  --floating-glow-end: var(--popover);
  --floating-ring: color-mix(
    in oklab,
    var(--popover) calc(92% - 12% * var(--theme-is-dark)),
    var(--popover-foreground) calc(8% + 12% * var(--theme-is-dark))
  );
  --floating-glow-gradient: linear-gradient(
    135deg,
    var(--floating-glow-end) 0%,
    var(--floating-glow-mid) 50%,
    var(--floating-glow-start) 100%
  );

  background: var(--floating-glow-gradient);
  color: var(--popover-foreground);
  border: var(--border-hairline) solid var(--line-2);
  border-radius: var(--radius-floating);
  box-shadow: var(--shadow-md);
  padding: var(--gap-md); /* 1rem / 16px default */
  padding-block-start: calc(
    var(--gap-md) + var(--gap-sm)
  ); /* Extra top padding for FloatingLabels */
  position: relative;
  overflow: hidden;
  contain: layout style;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition:
    transform var(--dur-normal) var(--ease-in-out),
    box-shadow var(--dur-normal) var(--ease-in-out);

  /* Override end for dark mode (color-mix with 0% doesn't work) */
}

.dark .dndev-floating {
    --floating-glow-end: color-mix(
      in oklab,
      var(--popover) 93%,
      var(--popover-foreground) 7%
    );
  }

/* Disable glow with data-glow='blank' */

.dndev-floating[data-glow='blank'] {
    background: var(--popover);
  }

.dndev-floating:dir(rtl) {
    background: linear-gradient(
      135deg,
      var(--floating-glow-start) 0%,
      var(--floating-glow-mid) 50%,
      var(--floating-glow-end) 100%
    );
  }

/* Size variants - ONLY 3 sizes */

.dndev-floating[data-size='sm'] {
    padding: var(--gap-sm);
  }

/* 8px */

.dndev-floating[data-size='md'] {
    padding: var(--gap-md);
  }

/* 16px - default */

.dndev-floating[data-size='lg'] {
    padding: var(--gap-lg);
  }

/* 32px */

/* Hover behaviors */

.dndev-floating[data-hover='lift']:hover {
    transform: scale(1.02);
  }

.dndev-floating[data-hover='glow']:hover {
      box-shadow:
        var(--shadow-xl),
        0 0 40px color-mix(in oklab, var(--foreground) 30%, transparent);
    }

.dndev-floating[data-hover='glow']:dir(rtl):hover {
      box-shadow:
        var(--shadow-xl-rtl),
        0 0 40px color-mix(in oklab, var(--foreground) 30%, transparent);
    }

/* Role-specific defaults */

.dndev-floating[data-role='card'] {
    padding: var(--gap-md);
    border-radius: var(--radius-surface);
  }

.dndev-floating[data-role='floating'] {
    box-shadow: none;
    will-change: var(--will-change-none);
  }

.dndev-floating[data-role='floating']:hover {
      transform: none;
    }

/**
   * Variant system - 6 floating variants
   * - default: Standard floating panel (--popover colors)
   * - muted: Subtle background (--muted colors)
   * - primary: Primary brand color (--primary colors)
   * - secondary: Secondary brand color (--secondary colors)
   * - accent: Highlighted/active state (--accent colors, sets context for children)
   * - destructive: Error/danger state (--destructive colors)
   * 
   * Variants only override --popover and --popover-foreground.
   * Floating glow gradient is computed from --theme-is-dark flag and not affected by variants.
   */

.dndev-floating[data-variant='muted'] {
    --popover: var(--muted);
    --popover-foreground: var(--muted-foreground);
    border-color: var(--border);
  }

.dndev-floating[data-variant='primary'] {
    --popover: var(--primary);
    --popover-foreground: var(--primary-foreground);
    border-color: var(--primary);
  }

.dndev-floating[data-variant='secondary'] {
    --popover: var(--secondary);
    --popover-foreground: var(--secondary-foreground);
    border-color: var(--secondary);
  }

.dndev-floating[data-variant='accent'] {
    --popover: var(--accent);
    --popover-foreground: var(--accent-foreground);
    border-color: var(--accent);

    /* Context variables - children read these for adaptation */
    --surface-text: var(--accent-foreground);
    --surface-bg: var(--accent);
  }

.dndev-floating[data-variant='destructive'] {
    --popover: var(--destructive);
    --popover-foreground: var(--destructive-foreground);
    border-color: var(--destructive);
  }

.dndev-floating[data-variant='success'] {
    --popover: var(--success);
    --popover-foreground: var(--success-foreground);
    border-color: var(--success);
  }

.dndev-floating[data-variant='warning'] {
    --popover: var(--warning);
    --popover-foreground: var(--warning-foreground);
    border-color: var(--warning);
  }

/* Separator style */

.dndev-floating [data-orientation='horizontal'][role='separator'] {
    height: 1px;
    background-color: var(--border);
    margin-block-start: var(--gap-sm);
    margin-block-end: var(--gap-sm);
    margin-inline-start: calc(-1 * var(--gap-sm)); /* Extend to edges */
    margin-inline-end: calc(-1 * var(--gap-sm));
  }

/**
 * INTERACTIVE - All clickable elements (buttons, nav items, menu items, tabs)
 *
 * 4 button variants:
 * - default/primary: Filled primary (primary action) - aliases
 * - outline: Outlined (secondary action)
 * - ghost: Minimal (tertiary action)
 * - destructive: Danger action
 *
 * Context-aware: Buttons automatically adapt to parent surface variant
 */

.dndev-interactive {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  min-height: var(--touch-target);
  padding: var(--gap-sm);
  border-radius: var(--radius-interactive);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-transform: var(--text-transform-button, none);
  transition: var(--transition-fast);
  cursor: pointer;
  border: var(--border-hairline) solid transparent;
  /* Base - filled primary (industry standard) */
  background: var(--primary);
  color: var(--primary-foreground);

  /* ── Shared states ── */
}

.dndev-interactive:hover {
    background: color-mix(in oklab, var(--primary) 85%, var(--foreground));
  }

.dndev-interactive:active:not(:disabled) {
    scale: 0.97;
  }

.dndev-interactive:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus), var(--shadow-interactive);
  }

.dndev-interactive:disabled {
    pointer-events: none;
    opacity: var(--opacity-muted);
  }

.dndev-interactive[data-display='compact'] {
    width: var(--touch-target);
    height: var(--touch-target);
    padding: 0;
    flex-shrink: 0;
  }

/* ═══════════════════════════
     FILLED VARIANTS — hover = darken/lighten the bg color
     ═══════════════════════════ */

.dndev-interactive[data-variant='primary'] {
    background: var(--primary);
    color: var(--primary-foreground);
  }

.dndev-interactive[data-variant='accent'] {
    background: var(--accent);
    color: var(--accent-foreground);
  }

.dndev-interactive[data-variant='accent']:hover {
      background: color-mix(in oklab, var(--accent) 85%, var(--foreground));
    }

.dndev-interactive[data-variant='secondary'] {
    background: var(--secondary);
    color: var(--secondary-foreground);
  }

.dndev-interactive[data-variant='secondary']:hover {
      background: color-mix(in oklab, var(--secondary) 85%, var(--foreground));
    }

.dndev-interactive[data-variant='success'] {
    background: var(--success);
    color: var(--success-foreground);
  }

.dndev-interactive[data-variant='success']:hover {
      background: color-mix(in oklab, var(--success) 85%, var(--foreground));
    }

.dndev-interactive[data-variant='warning'] {
    background: var(--warning);
    color: var(--warning-foreground);
  }

.dndev-interactive[data-variant='warning']:hover {
      background: color-mix(in oklab, var(--warning) 85%, var(--foreground));
    }

.dndev-interactive[data-variant='muted'] {
    background: var(--muted);
    color: var(--muted-foreground);
  }

.dndev-interactive[data-variant='muted']:hover {
      background: color-mix(in oklab, var(--muted) 80%, var(--foreground) 20%);
    }

/* ═══════════════════════════
     GHOST VARIANTS — hover = subtle tint + text color shift
     ═══════════════════════════ */

/* Shared ghost hover — one rule for all transparent interactive elements */

.dndev-interactive[data-variant='outline'],.dndev-interactive[data-variant='ghost'],.dndev-interactive[data-role='nav-trigger'],.dndev-interactive[data-role='menu-item'],.dndev-interactive[data-role='command-item'] {
    background: transparent;
    color: var(--foreground);
  }

:is(.dndev-interactive[data-variant='outline'],.dndev-interactive[data-variant='ghost'],.dndev-interactive[data-role='nav-trigger'],.dndev-interactive[data-role='menu-item'],.dndev-interactive[data-role='command-item']):hover {
      background: rgb(from var(--primary) r g b / 0.1);
      color: var(--primary);
    }

/* Outline adds border on top of ghost base */

.dndev-interactive[data-variant='outline'] {
    border: var(--border-hairline) solid var(--border);
  }

/* Destructive ghost — same paradigm, different color */

.dndev-interactive[data-variant='destructive'] {
    background: transparent;
    color: var(--destructive);
    border: var(--border-hairline) solid var(--destructive);
  }

.dndev-interactive[data-variant='destructive']:hover {
      background: rgb(from var(--destructive) r g b / 0.1);
      color: var(--destructive);
    }

/* Link variant — text-only, no background shift */

.dndev-interactive[data-variant='link'] {
    background: transparent;
    color: var(--muted-foreground);
    padding: 0;
    min-height: auto;
    font-size: var(--font-size-base);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--dur-fast) ease-out;
  }

.dndev-interactive[data-variant='link']:hover {
      color: var(--primary);
    }

/* Context-aware: ONLY inside accent surfaces */

/* Default buttons flip colors */

:is(.dndev-surface[data-variant='accent'] .dndev-interactive,.dndev-floating[data-variant='accent'] .dndev-interactive):not([data-variant]) {
      background: var(--surface-text);
      color: var(--surface-bg);
    }

/* Outline/Ghost adapt */

[data-variant='outline']:is(.dndev-surface[data-variant='accent'] .dndev-interactive,.dndev-floating[data-variant='accent'] .dndev-interactive),[data-variant='ghost']:is(.dndev-surface[data-variant='accent'] .dndev-interactive,.dndev-floating[data-variant='accent'] .dndev-interactive) {
      color: var(--surface-text);
    }

:is([data-variant='outline']:is(.dndev-surface[data-variant='accent'] .dndev-interactive,.dndev-floating[data-variant='accent'] .dndev-interactive),[data-variant='ghost']:is(.dndev-surface[data-variant='accent'] .dndev-interactive,.dndev-floating[data-variant='accent'] .dndev-interactive)):hover {
        background: rgb(from var(--surface-text) r g b / 0.1);
        color: var(--surface-text);
      }

/* Unified menu/command/nav item base — ghost hover inherited from shared rule above */

.dndev-interactive[data-role='menu-item'],.dndev-interactive[data-role='command-item'],.dndev-interactive[data-role='nav-trigger'] {
    min-height: auto;
    padding-block: var(--gap-sm);
    padding-inline: 0;
    font-size: var(--font-size-base);
    border-radius: var(--radius-interactive);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    position: relative;
    text-decoration: none;

    /* Remove gap when compact (no label to space from) */
  }

[data-display='compact']:is(.dndev-interactive[data-role='menu-item'],.dndev-interactive[data-role='command-item'],.dndev-interactive[data-role='nav-trigger']) {
      gap: 0 !important;
    }

.dndev-interactive[data-role='menu-item']:focus-visible,.dndev-interactive[data-role='menu-item'][data-highlighted] {
      background: rgb(from var(--primary) r g b / 0.1);
      color: var(--primary);
      outline: 2px solid var(--ring);
      outline-offset: 0;
    }

.dndev-interactive[data-role='menu-item'][data-disabled] {
      pointer-events: none;
      opacity: var(--opacity-muted);
    }

.dndev-interactive[data-role='menu-item'][data-inset='true'] {
      padding-inline-start: var(--gap-lg);
    }

.dndev-interactive[data-role='menu-item'][data-inset='true'] .dndev-menu-indicator {
        position: absolute;
        inset-inline-start: var(--gap-md);
        display: flex;
        align-items: center;
        justify-content: center;
      }

.dndev-interactive[data-role='command-item'] {
    width: 100%;
  }

.dndev-interactive[data-role='command-item'][data-selected='true'] {
      background: rgb(from var(--primary) r g b / 0.1);
      color: var(--primary);
    }

.dndev-interactive[data-role='command-item'][data-disabled='true'] {
      pointer-events: none;
      opacity: var(--opacity-muted);
    }

.dndev-interactive[data-role='command-item']:focus-visible {
      outline: none;
      box-shadow: var(--shadow-focus), var(--shadow-interactive);
    }

/* Specific containers that need start-align (not general stacks/grids) */

.dndev-nav-menu-list[data-vertical='true'] .dndev-interactive,
.dndev-floating .dndev-interactive,
.dndev-command-group .dndev-interactive,
.sidebar-top .dndev-interactive,
.sidebar-content .dndev-interactive,
.sidebar-bottom .dndev-interactive {
  justify-content: flex-start;
  width: 100%; /* Stretch to fill container */
}

/* Remove right border from outline buttons in sidebar - resize handle provides separator */

.sidebar-content .dndev-interactive[data-variant='outline'],
.sidebar-bottom .dndev-interactive[data-variant='outline'] {
  border-inline-end: none;
}

/* Sidebar tooltip positioning - right in LTR, left in RTL */

.sidebar-top,
.sidebar-content,
.sidebar-bottom {
  --tooltip-side: right;
}

[dir='rtl'] .sidebar-top,
[dir='rtl'] .sidebar-content,
[dir='rtl'] .sidebar-bottom {
  --tooltip-side: left;
}

/* INTERACTIVE LABEL - Unified label class for all interactive elements */

.dndev-interactive-label {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: var(--text-transform-label, none);
}

/* Compact mode - always hide label */

.dndev-interactive-label[data-display='compact'] {
  display: none;
}

/* Full mode - always show label */

.dndev-interactive-label[data-display='full'] {
  display: inline-flex;
}

/* Auto mode - container-responsive, hidden in narrow containers */

.dndev-interactive-label[data-display='auto'] {
  display: inline-flex;
}

/* CONTROL - Form controls (switch, toggle, checkbox, radio, slider) */

.dndev-control {
  /* Control color variables - computed for light/dark mode */
  --control-bg: color-mix(in oklab, var(--foreground) 20%, var(--background));
  --control-border: color-mix(
    in oklab,
    var(--foreground) 70%,
    var(--background)
  );

  background-color: var(--control-bg);
  border: var(--border-width) solid var(--control-border);
  transition: all var(--dur-fast) var(--ease-in-out);
  cursor: pointer;

  /* Hover state */
}

.dndev-control:hover:not(:disabled) {
    background-color: color-mix(
      in oklab,
      var(--control-bg) 80%,
      var(--control-border) 20%
    );
  }

/* Focus state */

.dndev-control:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus), var(--shadow-interactive);
  }

/* Disabled state */

.dndev-control:disabled {
    cursor: not-allowed;
    opacity: var(--opacity-muted);
  }

/* Checked/On/Pressed states - fill with border color */

.dndev-control[data-state='checked'],.dndev-control[data-state='on'],.dndev-control[data-pressed='true'] {
    background-color: var(--control-border);
    /* --card-base: root snapshot, not overridden by variant blocks (safe inside any surface) */
    color: var(--card-base);
  }

/* CONTROL GROUP - Shared pattern for grouped controls (RadioGroup, Checkbox groups) */

.dndev-control-group {
  display: grid;
  gap: var(--gap-md); /* 16px - standard spacing between grouped items */

  /* Control + label pattern - used by RadioGroup, CheckboxFieldComponent, etc. */
}

.dndev-control-group label {
    display: flex;
    align-items: center;
    gap: var(--gap-sm); /* 8px - spacing between control and label */
    font-size: var(--font-size-base);
    color: var(--foreground);
    cursor: pointer;
    transition: color var(--transition-fast);

    /* Subtle hover on label text */
  }

:is(.dndev-control-group label):hover {
      color: var(--primary);
    }

/* Selected state - label color changes */

:is(.dndev-control-group label):has([data-state='checked']),:is(.dndev-control-group label):has([data-state='on']) {
      color: var(--primary);
      font-weight: var(--font-weight-medium);
    }

/**
   * Variant system - 8 control variants
   * Variants override --control-border to use semantic colors
   * Off state: shows variant color in border
   * On state: fills with variant color
   */

.dndev-control-group[data-variant='primary'] {
    --control-border: var(--primary);
  }

.dndev-control-group[data-variant='secondary'] {
    --control-border: var(--secondary);
  }

.dndev-control-group[data-variant='muted'] {
    --control-border: var(--muted-foreground);
  }

.dndev-control-group[data-variant='accent'] {
    --control-border: var(--accent);
  }

.dndev-control-group[data-variant='success'] {
    --control-border: var(--success);
  }

.dndev-control-group[data-variant='warning'] {
    --control-border: var(--warning);
  }

.dndev-control-group[data-variant='destructive'] {
    --control-border: var(--destructive);
  }

/* Default variant explicitly (same as base) */

.dndev-control-group[data-variant='default'] {
    --control-border: color-mix(
      in oklab,
      var(--foreground) 70%,
      var(--background)
    );
  }

/* Unified container pattern: DropdownMenu, NavigationMenu (sidebar), Command palette */

/* Completes global rule: adds padding-inside behavior */

.dndev-floating,
.dndev-command-group,
.dndev-nav-menu-list[data-vertical='true'] {
  /* Zero gap between items - they touch vertically */
  gap: var(--gap-none);

  /* Add horizontal padding to container (not children) */
}

:is(.dndev-floating,.dndev-command-group,.dndev-nav-menu-list[data-vertical='true']) .dndev-interactive[data-role='menu-item'],:is(.dndev-floating,.dndev-command-group,.dndev-nav-menu-list[data-vertical='true']) .dndev-interactive[data-role='command-item'],:is(.dndev-floating,.dndev-command-group,.dndev-nav-menu-list[data-vertical='true']) .dndev-interactive[data-role='nav-trigger'] {
    padding-inline-start: var(--gap-sm);
    padding-inline-end: var(--gap-sm);
    color: var(--popover-foreground);

    /* Remove padding if compact (icon alone) */
  }

[data-display='compact']:is(:is(.dndev-floating,.dndev-command-group,.dndev-nav-menu-list[data-vertical='true']) .dndev-interactive[data-role='menu-item'],:is(.dndev-floating,.dndev-command-group,.dndev-nav-menu-list[data-vertical='true']) .dndev-interactive[data-role='command-item'],:is(.dndev-floating,.dndev-command-group,.dndev-nav-menu-list[data-vertical='true']) .dndev-interactive[data-role='nav-trigger']) {
      padding-inline-start: 0 !important;
      padding-inline-end: 0 !important;
    }

/* Navigation menu (vertical): Always 48px buttons, consistent padding-block */

.dndev-nav-menu-list[data-vertical='true'] .dndev-interactive[data-role='menu-item'],.dndev-nav-menu-list[data-vertical='true'] .dndev-interactive[data-role='nav-trigger'] {
    /* Ensure 48px height always - override padding-block to maintain exact height */
    height: var(--touch-target);
    min-height: var(--touch-target);
    padding-block: 0; /* No vertical padding - buttons fill exact 48px */
  }

/* Remove padding from dropdown menu content (buttons touch edges) */

.dndev-menu-content {
  padding: 0;
}

/* Menu label */

.dndev-menu-label {
  padding: var(--gap-sm) var(--gap-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.dndev-menu-label[data-inset='true'] {
    padding-inline-start: var(--gap-lg);
  }

/* Menu separator */

.dndev-menu-separator {
  margin-inline-start: calc(-1 * var(--gap-md));
  margin-inline-end: calc(-1 * var(--gap-md));
  margin-top: var(--gap-sm);
  margin-bottom: var(--gap-sm);
  height: 1px;
  background-color: var(--border);
}

/* Menu shortcut */

.dndev-menu-shortcut {
  margin-inline-start: auto;
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  opacity: var(--opacity-muted);
}

/* NOTIFICATION - Overlay elements (toasts, tooltips) - inverted floating colors for high contrast */

.dndev-notification {
  display: grid;
  gap: var(--gap-sm);
  padding: var(--gap-md);
  border-radius: var(--radius-floating);
  border: var(--border-hairline) solid var(--border);
  /* Inverted floating colors: popover-foreground as background, popover as foreground */
  background: color-mix(in oklab, var(--popover-foreground) 95%, transparent);
  color: var(--popover);
  position: relative;
  /* Glassmorphism effect */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* RTL-aware shadows - base shadow set here, variants add glows */
  --notification-shadow-base: var(--shadow-xl);
  box-shadow: var(--notification-shadow-base);
}

.dndev-notification:dir(rtl) {
    --notification-shadow-base: var(--shadow-xl-rtl);
  }

/* Notification variants - only override border + glow, bg/color inherited from base */

.dndev-notification[data-variant='default'] {
    border: var(--border-hairline) solid var(--border);
  }

.dndev-notification[data-variant='info'] {
    border: var(--border-width) solid var(--accent);
    box-shadow:
      var(--notification-shadow-base),
      0 0 0 1px color-mix(in oklab, var(--accent) 20%, transparent);
  }

.dndev-notification[data-variant='success'] {
    border: var(--border-width) solid var(--success);
    box-shadow:
      var(--notification-shadow-base),
      0 0 0 1px color-mix(in oklab, var(--success) 20%, transparent);
  }

.dndev-notification[data-variant='warning'] {
    border: var(--border-width) solid var(--warning);
    box-shadow:
      var(--notification-shadow-base),
      0 0 0 1px color-mix(in oklab, var(--warning) 20%, transparent);
  }

.dndev-notification[data-variant='error'],.dndev-notification[data-variant='destructive'] {
    border: var(--border-width) solid var(--destructive);
    box-shadow:
      var(--notification-shadow-base),
      0 0 0 1px color-mix(in oklab, var(--destructive) 20%, transparent);
  }

.dndev-notification[data-variant='primary'] {
    border: var(--border-width) solid var(--primary);
    box-shadow:
      var(--notification-shadow-base),
      0 0 0 1px color-mix(in oklab, var(--primary) 20%, transparent);
  }

.dndev-notification[data-variant='secondary'] {
    border: var(--border-width) solid var(--secondary);
    box-shadow:
      var(--notification-shadow-base),
      0 0 0 1px color-mix(in oklab, var(--secondary) 20%, transparent);
  }

.dndev-notification[data-variant='accent'] {
    border: var(--border-width) solid var(--accent);
    box-shadow:
      var(--notification-shadow-base),
      0 0 0 1px color-mix(in oklab, var(--accent) 20%, transparent);
  }

/* ===========================
         OVERLAY
         =========================== */

.dndev-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in oklab, var(--foreground) 40%, transparent);
  backdrop-filter: blur(8px);
  will-change: opacity;
  z-index: var(--z-overlay);
  animation: overlay-in var(--dur-normal) var(--ease-in-out);
}

.dndev-overlay[data-state='closed'] {
    animation: overlay-out var(--dur-normal) var(--ease-in-out);
  }

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes dialog-out {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.96);
  }
}

@keyframes overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes overlay-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ===========================
         UTILITY COMPONENTS
         =========================== */

.dndev-spinner {
  display: inline-block;
  width: var(--icon-md);
  height: var(--icon-md);
  border: 2px solid currentColor;
  border-radius: var(--radius-full);
  border-inline-end-color: transparent;
  animation: spin 1s linear infinite;
}

/* ===========================
         MODAL/DIALOG/SHEET SHARED RULES
         =========================== */

.dndev-modal-content {
  position: fixed;
  inset-inline-start: 50%;
  top: 50%;
  z-index: calc(var(--z-modal) + 1);
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 100%;
  gap: var(--gap-sm);
  padding-block: var(--gap-md);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  animation: dialog-in var(--dur-normal) var(--ease-in-out);
}

.dndev-modal-content[data-state='closed'] {
    animation: dialog-out var(--dur-normal) var(--ease-in-out);
  }

/* Dialog content size variants */

.dndev-modal-content[data-content-size='auto'],.dndev-modal-content[data-content-size='form'],.dndev-modal-content[data-content-size='text'] {
    max-height: 80dvh;
  }

.dndev-modal-content[data-content-size='auto'] {
    max-width: var(--dialog-auto);
  }

.dndev-modal-content[data-content-size='form'] {
    max-width: var(--dialog-form);
  }

.dndev-modal-content[data-content-size='text'] {
    max-width: var(--dialog-text);
  }

.dndev-modal-content[data-content-size='image'] {
    max-width: var(--dialog-image);
    max-height: 85dvh;
  }

.dndev-modal-content[data-content-size='code'] {
    max-width: var(--dialog-code);
    max-height: 90dvh;
  }

.dndev-modal-content[data-content-size='full'] {
    max-width: 95vw;
    max-height: 95dvh;
  }

.dndev-alert-dialog-content {
  max-width: var(--dialog-auto);
}

.dndev-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  flex-shrink: 0;
  min-height: var(--touch-target);
  padding-inline: var(--gap-md);
}

.dndev-modal-footer {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--gap-sm);
  flex-shrink: 0;
  padding-inline: var(--gap-md);
}

@media (width >= 640px) {

.dndev-modal-footer {
    flex-direction: row;
    justify-content: flex-end;
}
  }

.dndev-modal-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: visible;
  min-height: 0;
  padding-inline: var(--gap-md);
}

.dndev-modal-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
}

.dndev-modal-description {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--muted-foreground);
}

.dndev-modal-close {
  position: absolute;
  inset-inline-end: var(--gap-sm);
  top: var(--gap-sm);
  opacity: var(--opacity-muted);
}

.dndev-modal-close:hover {
    opacity: 1;
  }

.dndev-modal-cancel {
  margin-top: var(--gap-sm);
}

@media (width >= 640px) {

.dndev-modal-cancel {
    margin-top: 0;
}
  }

/* ===========================
         MENU SHARED RULES (Dropdown, Context, Select)
         =========================== */

/* The main content panel for all menus */

.dndev-menu-content {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: var(--radius-floating);
  min-width: 15ch; /* Character-based: scales with font size, ensures readable width */
  width: -moz-fit-content;
  width: fit-content; /* Stretch to fit children */
  gap: var(--gap-none);
}

.dndev-menu-item-details {
  display: flex;
  flex-direction: column;
}

/* ===========================
         AUTH FORM PATTERNS
         =========================== */

/* Auth form step indicator */

.dndev-auth-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  padding: var(--gap-sm);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-semibold);
  transition: all var(--dur-fast) var(--ease-in-out);
}

.dndev-auth-step[data-state='active'] {
    background-color: var(--primary);
    color: var(--primary-foreground);
  }

.dndev-auth-step[data-state='pending'] {
    background-color: var(--muted);
    color: var(--muted-foreground);
  }

.dndev-auth-step[data-state='completed'] {
    background-color: var(--success);
    color: var(--success-foreground);
  }

/* Opacity data attribute */

[data-opacity='50'] {
  opacity: 0.5;
}

[data-opacity='70'] {
  opacity: 0.7;
}

/* Inset data attribute - indent content */

[data-inset='true'] {
  padding-inline-start: var(--gap-md);
}

/* Bare mode - no visual chrome, used inside FloatingLabel or custom wrappers */

[data-bare] {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

[data-bare]:hover,[data-bare]:focus,[data-bare]:focus-visible {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

/* Password strength bar height override */

.dndev-password-strength-bar {
  height: 4px;
}

.dndev-password-requirements .dndev-password-requirement-item {
  transition: color var(--dur-fast) var(--ease-in-out);
}

.dndev-password-requirements .dndev-password-requirement-item svg {
  transition: color var(--dur-fast) var(--ease-in-out);
}

/* ===========================
         HERO ANIMATIONS
         =========================== */

.network-node {
  fill: var(--foreground);
  animation: universal-float 4s ease-in-out infinite;
  --opacity-start: 0.3;
  --opacity-mid: 0.8;
  --transform-start: scale(1);
  --transform-mid: scale(1.1);
}

.network-line {
  stroke: var(--foreground);
  stroke-width: 1;
  animation: universal-float 6s ease-in-out infinite;
  --opacity-start: 0.1;
  --opacity-mid: 0.5;
  --transform-start: scale(1);
  --transform-mid: scale(1);
}

.wave-flow {
  background: linear-gradient(
    45deg,
    transparent 30%,
    color-mix(in oklab, var(--accent) 20%, transparent) 50%,
    transparent 70%
  );
  animation: universal-float 8s ease-in-out infinite;
  --transform-start: translateX(-20%) rotate(0deg);
  --transform-mid: translateX(20%) rotate(3deg);
}

.particle-float {
  animation: universal-slide 10s linear infinite;
  --opacity-start: 0.2;
  --opacity-end: 0;
  --transform-start: translateY(0px) rotate(0deg);
  --transform-end: translateY(-100px) rotate(360deg);
}

.geometric-rotate {
  animation: universal-float 20s linear infinite;
  --opacity-start: 0.1;
  --opacity-mid: 0.2;
  --transform-start: rotate(0deg) scale(1);
  --transform-mid: rotate(180deg) scale(1.1);
}

.perspective-1000 {
  perspective: 1000px;
}

.transform-style-preserve-3d {
  transform-style: preserve-3d;
}

.dndev-animate-fade-in-up {
  animation: universal-slide var(--dur-heavy) ease-out forwards;
}

.animation-delay-100 {
  animation-delay: 100ms;
}

/* ===========================
   MARKETING UTILITIES
   =========================== */

.dndev-marketing-stack {
  display: grid;
  gap: var(--gap-md);
}

.dndev-marketing-cluster {
  display: flex;
  gap: var(--gap-sm);
  align-items: center;
  justify-content: center;
}

/* 5. Individual Component Styles */

/* packages/components/src/atomic/Accordion/Accordion.css */

.dndev-accordion {
  width: 100%;
  min-width: 0;
}

.dndev-accordion-item {
  border-bottom: 1px solid var(--border);
  min-width: 0;
  width: 100%;
}

.dndev-accordion-header {
  display: flex;
  width: 100%;
  min-width: 0;
}

.dndev-interactive[data-role='accordion-trigger'] {
  flex: 1;
  min-width: 0;
  min-height: auto;
  padding: var(--gap-md) 0;
  justify-content: space-between;
  background: transparent;
  color: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.dndev-interactive[data-role='accordion-trigger']:hover {
    background: transparent;
    text-decoration: underline;
  }

.dndev-interactive[data-role='accordion-trigger'][data-state='open'] svg {
    transform: rotate(180deg);
  }

.dndev-accordion-trigger-icon {
  flex-shrink: 0;
  width: var(--icon-md);
  height: var(--icon-md);
  transition: transform var(--dur-normal) var(--ease-in-out);
}

.dndev-accordion-content {
  overflow: hidden;
  font-size: var(--font-size-base);
  width: 100%;
  min-width: 0;
  text-align: start;
}

.dndev-accordion-content[data-state='open'] {
  animation: slideDown var(--dur-normal) var(--ease-in-out);
}

.dndev-accordion-content[data-state='closed'] {
  animation: slideUp var(--dur-normal) var(--ease-in-out);
}

@keyframes slideDown {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: var(--radix-collapsible-content-height);
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    height: var(--radix-collapsible-content-height);
    opacity: 1;
  }
  to {
    height: 0;
    opacity: 0;
  }
}

.dndev-accordion-content-inner {
  padding-bottom: var(--gap-md);
  padding-top: 0;
  width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* packages/components/src/atomic/Alert/Alert.css */

.dndev-surface[role='alert'] {
  display: flex;
  /* Variants handled by .dndev-surface variants in patterns.css via CSS variables */
}

.dndev-alert-title {
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: -0.025em;
}

.dndev-alert-description {
  font-size: var(--font-size-sm);
}

/* packages/components/src/atomic/Avatar/Avatar.css */

.dndev-avatar {
  position: relative;
  display: flex;
  width: var(--icon-touch);
  height: var(--icon-touch);
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-full);
}

.dndev-avatar-image {
  aspect-ratio: 1;
  width: 100%;
  height: 100%;
}

.dndev-avatar-fallback {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--muted);
}

/* packages/components/src/atomic/Badge/Badge.css */

.dndev-badge-base {
  /* Badge-specific overrides: pill shape and sizing */
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: var(--radius-full); /* Pill shape, not surface rounded */
  padding-inline-start: var(--gap-sm);
  padding-inline-end: var(--gap-sm);
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  box-shadow: none; /* Badges don't need shadows */
}

.dndev-badge-base:focus {
    outline: none;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
      calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow:
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
      var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: var(--ring);
    --tw-ring-offset-width: 2px;
  }

/* Variants handled by .dndev-surface variants in patterns.css via CSS variables */

/* Exception: outline variant is Badge-specific (transparent bg, primary border/text) */

.dndev-badge-base[data-variant='outline'] {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
  }

/* packages/components/src/advanced/Bento/Bento.css */

/**
 * Bento Grid Styles
 * Asymmetric grid layout with variable cell spanning
 */

[data-bento-grid] {
  display: grid;
  width: 100%;
}

/* Mobile (0-767px) */

[data-bento-grid] {
  grid-template-columns: repeat(var(--bento-columns-mobile, 1), 1fr);
}

/* Tablet (768-1023px) */

@media (width >= 768px) {
  [data-bento-grid] {
    grid-template-columns: repeat(var(--bento-columns-tablet, 2), 1fr);
  }
}

/* Desktop (1024-1439px) */

@media (width >= 1024px) {
  [data-bento-grid] {
    grid-template-columns: repeat(var(--bento-columns-desktop, 3), 1fr);
  }
}

/* Wide (1440px+) */

@media (width >= 1440px) {
  [data-bento-grid] {
    grid-template-columns: repeat(var(--bento-columns-wide, 4), 1fr);
  }
}

[data-bento-grid][data-gap='tight'] {
  gap: var(--gap-sm);
}

[data-bento-grid][data-gap='medium'] {
  gap: var(--gap-md);
}

[data-bento-grid][data-gap='large'] {
  gap: var(--gap-lg);
}

[data-bento-cell] {
  grid-column: span var(--cell-cols, 1);
  grid-row: span var(--cell-rows, 1);
  min-width: 0; /* Prevent overflow */
}

/* Responsive cell spanning - clamp to available columns */

@media (width < 768px) {
  [data-bento-cell] {
    --cell-cols: min(var(--cell-cols, 1), var(--bento-columns-mobile, 1));
  }
}

@media (width >= 768px) and (width < 1024px) {
  [data-bento-cell] {
    --cell-cols: min(var(--cell-cols, 1), var(--bento-columns-tablet, 2));
  }
}

@media (width >= 1024px) and (width < 1440px) {
  [data-bento-cell] {
    --cell-cols: min(var(--cell-cols, 1), var(--bento-columns-desktop, 3));
  }
}

@media (width >= 1440px) {
  [data-bento-cell] {
    --cell-cols: min(var(--cell-cols, 1), var(--bento-columns-wide, 4));
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  [data-bento-cell] {
    transition: none !important;
  }
}

/* ===========================
   TECH BENTO STYLES
   Used by TechBento component in @donotdev/ui
   =========================== */

.dndev-tech-bento {
  width: 100%;
}

.dndev-tech-bento-grid {
  display: block;
  margin-top: var(--gap-md);
}

/* Tech card - override Card's grid layout for centered content */

.dndev-tech-card {
  height: 100%;
  min-height: 120px;
  display: flex !important; /* Override Card's grid layout */
  align-items: center;
  justify-content: center;
  align-content: center; /* Override Card's align-content: start */
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.dndev-tech-card[data-hover='true'] {
    border-color: var(--tech-color);
    box-shadow: 0 4px 12px
      color-mix(in srgb, var(--tech-color) 12%, transparent);
  }

.dndev-tech-card .dndev-tech-card-logo {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    backface-visibility: hidden;
    transform: translateZ(0);
    color: var(--foreground);
  }

:is(.dndev-tech-card .dndev-tech-card-logo) svg {
      width: 100%;
      height: 100%;
      display: block;
    }

[data-tech='vercel']:is(.dndev-tech-card .dndev-tech-card-logo) {
      color: var(--foreground);
    }

@media (prefers-reduced-motion: reduce) {

.dndev-tech-card {
    transition: none;
}
  }

/* packages/components/src/atomic/Blockquote/Blockquote.css */

/*
 * Blockquote Component - Industry-standard patterns
 * Semantic figure + blockquote + figcaption structure
 * Three variants optimized for different content types
 */

.dndev-blockquote {
  position: relative;
  margin-block: calc(var(--gap-lg) * 1.25); /* 2em vertical separation */
  margin-inline: 0;
  box-sizing: border-box;
}

.dndev-blockquote *,
.dndev-blockquote *::before,
.dndev-blockquote *::after {
  box-sizing: border-box;
}

/* Blockquote content (inner <blockquote> element) */

.dndev-blockquote blockquote {
  margin: 0;
  padding: 0;
}

.dndev-blockquote-content {
  font-size: var(--font-size-lg); /* 20px - emphasized text */
  line-height: 1.7; /* Industry standard for readability */
  font-weight: var(--font-weight-normal);
  color: inherit;
  margin: 0;
}

/* Attribution (figcaption) */

.dndev-blockquote-caption {
  display: block;
  font-style: normal;
  font-size: var(--font-size-sm);
  color: var(--muted-foreground);
  margin-block-start: var(--gap-md); /* 16px gap from quote */
}

.dndev-blockquote-author {
  font-weight: var(--font-weight-semibold);
  font-style: normal;
  color: inherit;
}

.dndev-blockquote-source {
  font-weight: var(--font-weight-normal);
}

/*
 * VARIANT: Default (Documentation/Technical)
 * Optimized for technical documentation and tutorials
 * Features: Left border, subtle background, no italic
 */

.dndev-blockquote[data-variant='default'] blockquote {
  padding: var(--gap-md) calc(var(--gap-md) + 4px) var(--gap-md) var(--gap-lg);
  background: var(--muted);
  border-inline-start: 4px solid var(--primary);
  border-inline-end: none;
  border-block-start: none;
  border-block-end: none;
  border-radius: var(--radius-interactive) var(--radius-surface)
    var(--radius-surface) var(--radius-interactive);
  overflow: hidden;
}

.dndev-blockquote[data-variant='default'] .dndev-blockquote-content {
  font-style: normal; /* No italic for technical content */
}

/*
 * VARIANT: Editorial (Articles/Blogs)
 * Optimized for long-form editorial content
 * Features: Serif font, italic, minimal styling, left border
 */

.dndev-blockquote[data-variant='editorial'] blockquote {
  padding-inline-start: var(--gap-lg);
  border-inline-start: 3px solid var(--foreground);
}

.dndev-blockquote[data-variant='editorial'] .dndev-blockquote-content {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: var(--font-size-xl); /* 25px - larger for editorial impact */
  color: inherit;
  opacity: 0.95;
}

.dndev-blockquote[data-variant='editorial'] .dndev-blockquote-caption {
  padding-inline-start: var(--gap-lg); /* Align with quote */
}

/*
 * VARIANT: Testimonial (Marketing/Landing Pages)
 * Optimized for marketing content and customer testimonials
 * Features: Card with shadow, decorative quote mark
 */

.dndev-blockquote[data-variant='testimonial'] {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-surface);
  padding: calc(var(--gap-lg) + var(--gap-md)); /* 2.5rem */
  box-shadow:
    0 1px 3px 0 hsl(var(--foreground-hsl) / 0.1),
    0 1px 2px -1px hsl(var(--foreground-hsl) / 0.1);
}

.dndev-blockquote[data-variant='testimonial'] blockquote {
  position: relative;
  padding-block-start: var(--gap-md); /* Space for quote mark */
}

/* Decorative opening quote mark */

.dndev-blockquote[data-variant='testimonial'] blockquote::before {
  content: '"';
  position: absolute;
  inset-block-start: -0.25em;
  inset-inline-start: -0.125em;
  font-size: 4rem;
  line-height: 1;
  color: var(--primary);
  opacity: 0.15;
  font-family: Georgia, serif;
  font-weight: var(--font-weight-bold);
  pointer-events: none;
}

.dndev-blockquote[data-variant='testimonial'] .dndev-blockquote-content {
  font-style: normal;
  position: relative;
  z-index: 1; /* Above decorative quote */
}

/* Responsive adjustments */

@media (max-width: 640px) {
  .dndev-blockquote {
    margin-block: var(--gap-lg);
  }

  .dndev-blockquote-content {
    font-size: var(--font-size-base); /* Slightly smaller on mobile */
  }

  .dndev-blockquote[data-variant='editorial'] .dndev-blockquote-content {
    font-size: var(--font-size-lg);
  }

  .dndev-blockquote[data-variant='testimonial'] {
    padding: var(--gap-lg);
  }
}

/* packages/components/src/atomic/Button/Button.css */

/* Label styling moved to patterns.css (.dndev-interactive-label) */

/* Loading state */

[data-loading] {
  cursor: wait;
  pointer-events: none;
}

/* Button spinner - inherits size from button font-size */

.dndev-button-spinner {
  flex-shrink: 0;
}

/* Progress ring for upload percentage */

.dndev-button-progress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dndev-progress-ring {
  width: 1em;
  height: 1em;
  transform: rotate(-90deg);
}

/* packages/components/src/atomic/ButtonGroup/ButtonGroup.css */

.dndev-button-group {
  display: inline-flex;
  align-items: stretch;
}

/* Orientation */

.dndev-button-group[data-orientation='horizontal'] {
  flex-direction: row;
}

.dndev-button-group[data-orientation='vertical'] {
  flex-direction: column;
}

/* --- Horizontal border collapse --- */

.dndev-button-group[data-orientation='horizontal']
  > .dndev-interactive
  + .dndev-interactive {
  margin-inline-start: -1px;
}

.dndev-button-group[data-orientation='horizontal']
  > .dndev-interactive:first-child {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.dndev-button-group[data-orientation='horizontal']
  > .dndev-interactive:last-child {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.dndev-button-group[data-orientation='horizontal']
  > .dndev-interactive:not(:first-child):not(:last-child) {
  border-radius: 0;
}

/* --- Vertical border collapse --- */

.dndev-button-group[data-orientation='vertical']
  > .dndev-interactive
  + .dndev-interactive {
  margin-block-start: -1px;
}

.dndev-button-group[data-orientation='vertical']
  > .dndev-interactive:first-child {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.dndev-button-group[data-orientation='vertical']
  > .dndev-interactive:last-child {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

.dndev-button-group[data-orientation='vertical']
  > .dndev-interactive:not(:first-child):not(:last-child) {
  border-radius: 0;
}

/* Hover/focus z-index lift to show full border */

.dndev-button-group > .dndev-interactive:hover,
.dndev-button-group > .dndev-interactive:focus-visible {
  z-index: 1;
  position: relative;
}

/* Disabled group */

.dndev-button-group[aria-disabled='true'] {
  opacity: var(--opacity-muted);
  pointer-events: none;
}

/* packages/components/src/atomic/Calendar/Calendar.css */

/**
 * Calendar Component Styles
 * All sizes use --touch-target with border INSIDE (box-sizing: border-box)
 */

/* ===========================
   CONTAINER
   =========================== */

.dndev-calendar {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--popover-foreground);
  background: var(--popover);
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-floating);
  box-shadow: var(--shadow-md);
}

/* ===========================
   MONTH VIEW (header + days grid)
   =========================== */

.dndev-calendar-months {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dndev-calendar-month {
  position: relative;
}

/* ===========================
   HEADER: NAV BUTTONS (prev/next)
   =========================== */

.dndev-calendar-nav {
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: var(--touch-target);
  pointer-events: none;
  z-index: 1;
}

/* Merged Borders Pattern: Container owns outer, children own separators */

.dndev-calendar-nav-button {
  position: absolute;
  top: 0;
  width: var(--touch-target);
  height: var(--touch-target);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  border-radius: 0;
  border: none;
  border-bottom: var(--border-hairline) solid var(--border);
  background: transparent;
  color: var(--foreground);
}

.dndev-calendar-nav-button:hover {
  background: var(--primary);
  color: var(--primary-foreground);
}

.dndev-calendar-nav-previous {
  inset-inline-start: 0;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.dndev-calendar-nav-next {
  inset-inline-end: 0;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

/* ===========================
   HEADER: CAPTION (month/year dropdowns)
   =========================== */

.dndev-calendar-caption {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: var(--touch-target);
  width: 100%;
  padding-inline: var(--touch-target);
  padding-block: 0;
  gap: 0;
  box-sizing: border-box;
  border: none;
  border-bottom: var(--border-hairline) solid var(--border);
}

.dndev-calendar-caption-label {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===========================
   MONTH/YEAR DROPDOWN BUTTONS (opens 12 months / years grid)
   =========================== */

.dndev-calendar-dropdowns {
  display: flex;
  flex-direction: row;
  width: calc(100% - calc(var(--touch-target) * 2));
  height: 100%;
  gap: 0;
  margin-inline: var(--touch-target);
}

.dndev-calendar-dropdown-month {
  flex: 1;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
}

.dndev-calendar-dropdown-year {
  flex: 1;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
}

.dndev-calendar-dropdown-trigger {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border-top: none !important;
}

.dndev-calendar-dropdown-selected,
.dndev-calendar-dropdown-grid [data-selected='true'] {
  color: var(--primary);
  font-weight: var(--font-weight-semibold);
  background-color: transparent;
}

/* ===========================
   DAYS GRID
   =========================== */

.dndev-calendar-table {
  width: auto;
  border-collapse: collapse;
  table-layout: fixed;
}

.dndev-calendar-weekday {
  width: var(--touch-target);
  height: var(--touch-target);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--muted-foreground);
}

.dndev-calendar-day {
  width: var(--touch-target);
  height: var(--touch-target);
  padding: 0;
  text-align: center;
  border: none;
  box-sizing: border-box;
  vertical-align: middle;
}

/* ===========================
   DAY BUTTON STATES
   =========================== */

.dndev-calendar-day-button {
  width: var(--touch-target);
  height: var(--touch-target);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--popover-foreground);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-interactive);
  border: var(--border-width) solid transparent;
  box-sizing: border-box;
}

/* Hover (regular day) - accent bg, full 48px, no border */

.dndev-calendar-day-button:hover:not([disabled]) {
  background: var(--accent);
  color: var(--accent-foreground);
  border: var(--border-width) solid transparent;
}

/* Selected - primary bg + fg, full 48px, no border */

.dndev-calendar-day-selected .dndev-calendar-day-button {
  background: var(--primary);
  color: var(--primary-foreground);
  border: var(--border-width) solid transparent;
  font-weight: var(--font-weight-semibold);
}

/* Today - just secondary border */

.dndev-calendar-day-today .dndev-calendar-day-button {
  border-color: var(--secondary);
}

/* Hover + Selected - accent bg (hover) + primary border (selected) */

.dndev-calendar-day-selected .dndev-calendar-day-button:hover:not([disabled]) {
  background: var(--accent);
  color: var(--accent-foreground);
  border-color: var(--primary);
}

/* Hover + Today - accent bg (hover) + secondary border (today) */

.dndev-calendar-day-today .dndev-calendar-day-button:hover:not([disabled]) {
  background: var(--accent);
  color: var(--accent-foreground);
  border-color: var(--secondary);
}

/* Selected + Today - primary bg + fg (selected) + secondary border (today) */

.dndev-calendar-day-today.dndev-calendar-day-selected
  .dndev-calendar-day-button {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--secondary);
}

/* Hover + Selected + Today - accent bg (hover) + secondary border (today) */

.dndev-calendar-day-today.dndev-calendar-day-selected
  .dndev-calendar-day-button:hover:not([disabled]) {
  background: var(--accent);
  color: var(--accent-foreground);
  border-color: var(--secondary);
}

/* Outside Days - interactive but always muted to show they're from different month */

.dndev-calendar-day-outside .dndev-calendar-day-button {
  color: var(--muted-foreground);
  font-style: italic;
}

.dndev-calendar-day-outside .dndev-calendar-day-button:hover:not([disabled]) {
  color: var(--muted-foreground);
}

.dndev-calendar-day-outside.dndev-calendar-day-selected
  .dndev-calendar-day-button {
  color: var(--muted-foreground);
}

.dndev-calendar-day-outside.dndev-calendar-day-selected
  .dndev-calendar-day-button:hover:not([disabled]) {
  color: var(--muted-foreground);
}

.dndev-calendar-day-outside.dndev-calendar-day-today
  .dndev-calendar-day-button {
  color: var(--muted-foreground);
}

.dndev-calendar-day-outside.dndev-calendar-day-today
  .dndev-calendar-day-button:hover:not([disabled]) {
  color: var(--muted-foreground);
}

.dndev-calendar-day-outside.dndev-calendar-day-today.dndev-calendar-day-selected
  .dndev-calendar-day-button {
  color: var(--muted-foreground);
}

.dndev-calendar-day-outside.dndev-calendar-day-today.dndev-calendar-day-selected
  .dndev-calendar-day-button:hover:not([disabled]) {
  color: var(--muted-foreground);
}

/* Hidden Days */

.dndev-calendar-day-hidden {
  visibility: hidden;
}

/* packages/components/src/atomic/CallToAction/CallToAction.css */

.dndev-cta {
  color: var(--foreground);
  /* Padding for background - vertical only, horizontal handled by content */
  padding-block: var(--gap-lg);
}

/* Tone variants - leverage existing data-tone system */

/* Ghost (default) - no background */

.dndev-cta[data-tone='ghost'],
.dndev-cta:not([data-tone]) {
  background: transparent;
}

.dndev-cta[data-tone='base'] {
  background: var(--background);
}

.dndev-cta[data-tone='muted'] {
  background: var(--muted);
}

.dndev-cta[data-tone='contrast'] {
  background: var(--foreground);
  /* --card not --background: inverted text must be opaque (--background can be transparent in some themes) */
  color: var(--card);
}

.dndev-cta[data-tone='accent'] {
  background: color-mix(in oklab, var(--accent) 5%, transparent);
}

/* Bleed: full viewport width */

.dndev-cta--bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Background image with overlay for text readability */

.dndev-cta--bg-image {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.dndev-cta--bg-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.4),
    rgba(0, 0, 0, 0.6)
  );
  z-index: 0;
}

.dndev-cta--bg-image > * {
  position: relative;
  z-index: 1;
}

.dndev-cta--bg-image,
.dndev-cta--bg-image .dndev-cta-content {
  color: white;
}

.dndev-cta-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  align-items: center;
  max-width: var(--content-width);
  margin-inline: auto;
  /* Padding to match PageContainer behavior */
  padding-inline: var(--gap-md);
}

@media (width >= 1024px) {

.dndev-cta-content {
    padding-inline: var(--gap-lg);
}
  }

/* Text alignment */

.dndev-cta-content[data-text-align='start'] {
  text-align: start;
}

.dndev-cta-content[data-text-align='center'] {
  text-align: center;
}

.dndev-cta-content[data-text-align='end'] {
  text-align: end;
}

/* Item alignment (align-items) */

.dndev-cta-content[data-align='start'] {
  align-items: flex-start;
}

.dndev-cta-content[data-align='center'] {
  align-items: center;
}

.dndev-cta-content[data-align='end'] {
  align-items: flex-end;
}

.dndev-cta-content[data-align='stretch'] {
  align-items: stretch;
}

/* Content justification (justify-content) */

.dndev-cta-content[data-justify='start'] {
  justify-content: flex-start;
}

.dndev-cta-content[data-justify='center'] {
  justify-content: center;
}

.dndev-cta-content[data-justify='end'] {
  justify-content: flex-end;
}

.dndev-cta-content[data-justify='between'] {
  justify-content: space-between;
}

.dndev-cta-content[data-justify='around'] {
  justify-content: space-around;
}

.dndev-cta-content[data-justify='evenly'] {
  justify-content: space-evenly;
}

.dndev-cta-actions {
  display: flex;
  flex-direction: row;
  gap: var(--gap-md);
  justify-content: center;
}

.dndev-cta-actions .dndev-interactive {
    min-width: 150px;
  }

/* Button contrast overrides */

.dndev-cta-actions .dndev-interactive[data-variant='primary'] {
    background: var(--foreground);
    /* --card not --background: inverted text must be opaque */
    color: var(--card);
    border-color: var(--foreground);
  }

:is(.dndev-cta-actions .dndev-interactive[data-variant='primary']):hover {
      background: var(--primary);
      color: var(--primary-foreground);
      border-color: var(--primary);
    }

.dndev-cta-actions .dndev-interactive[data-variant='outline'] {
    background: transparent;
    color: var(--foreground);
    border-color: var(--foreground);
  }

:is(.dndev-cta-actions .dndev-interactive[data-variant='outline']):hover {
      background: var(--foreground);
      /* --card not --background: inverted text must be opaque */
      color: var(--card);
      border-color: var(--foreground);
    }

/* packages/components/src/atomic/Card/Card.css */

/* Card layout - grid with gap */

.dndev-card {
  display: grid;
  gap: var(--gap-md);
  text-align: start;
  align-content: start;
}

.dndev-card-header {
  display: flex;
  flex-direction: column;
}

.dndev-card-header > .dndev-stack {
  min-width: 0;
}

.dndev-card-header > .dndev-stack > .dndev-card-title {
  flex: 1;
  min-width: 0;
}

.dndev-card-title {
  margin: 0;
  min-width: 0;
  word-wrap: break-word;
}

.dndev-surface .dndev-card-subtitle {
  margin-top: 0;
  margin-bottom: 0;
  min-width: 0;
  word-wrap: break-word;
  color: color-mix(in oklab, var(--card-foreground) 70%, transparent);
}

/* packages/components/src/atomic/Checkbox/Checkbox.css */

.dndev-control[data-type='checkbox'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-md);
  height: var(--icon-md);
  aspect-ratio: 1;
  border-radius: 4px;
}

.dndev-control[data-type='checkbox'][data-state='checked'] {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
  }

.dndev-control[data-type='checkbox'][data-variant='primary'][data-state='checked'] {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
  }

.dndev-control[data-type='checkbox'][data-variant='secondary'][data-state='checked'] {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: var(--secondary-foreground);
  }

.dndev-control[data-type='checkbox'][data-variant='muted'][data-state='checked'] {
    background-color: var(--muted);
    border-color: var(--border);
    color: var(--muted-foreground);
  }

.dndev-control[data-type='checkbox'][data-variant='accent'][data-state='checked'] {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--accent-foreground);
  }

.dndev-control[data-type='checkbox'][data-variant='success'][data-state='checked'] {
    background-color: var(--success);
    border-color: var(--success);
    color: var(--success-foreground);
  }

.dndev-control[data-type='checkbox'][data-variant='warning'][data-state='checked'] {
    background-color: var(--warning);
    border-color: var(--warning);
    color: var(--warning-foreground);
  }

.dndev-control[data-type='checkbox'][data-variant='destructive'][data-state='checked'] {
    background-color: var(--destructive);
    border-color: var(--destructive);
    color: var(--destructive-foreground);
  }

/* Checkbox indicator (check mark) */

.dndev-control[data-type='checkbox'] [data-radix-checkbox-indicator] {
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.dndev-control[data-type='checkbox'] [data-radix-checkbox-indicator] svg {
  width: var(--icon-md);
  height: var(--icon-md);
  animation: checkbox-check-in var(--dur-fast) var(--ease-in-out);
}

/* Smooth check mark animation */

@keyframes checkbox-check-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* packages/components/src/atomic/Collapsible/Collapsible.css */

.dndev-collapsible {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.dndev-collapsible-content {
  overflow: hidden;
  width: 100%;
}

.dndev-collapsible-content[data-state='open'] {
  animation: slideDown var(--dur-normal) var(--ease-in-out);
  overflow: visible; /* Allow dropdowns/overlays to escape when open */
}

.dndev-collapsible-content[data-state='closed'] {
  animation: slideUp var(--dur-normal) var(--ease-in-out);
}

@keyframes slideDown {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: var(--radix-collapsible-content-height);
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    height: var(--radix-collapsible-content-height);
    opacity: 1;
  }
  to {
    height: 0;
    opacity: 0;
  }
}

.dndev-collapsible-trigger {
  width: 100%;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-in-out);
}

.dndev-collapsible-trigger:hover {
  opacity: var(--opacity-strong);
}

.dndev-collapsible-trigger:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-interactive);
}

.dndev-collapsible-icon {
  width: var(--size-md);
  height: var(--size-md);
  flex-shrink: 0;
  color: var(--accent);
  transition: transform var(--dur-normal) var(--ease-in-out);
}

.dndev-collapsible-chevron {
  transform: rotate(0deg);
  transition: transform var(--dur-normal) var(--ease-in-out);
}

.dndev-collapsible[data-state='open'] .dndev-collapsible-chevron {
  transform: rotate(180deg);
}

/* packages/components/src/atomic/ColorPicker/ColorPicker.css */

.dndev-color-picker {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

/* Swatch grid */

.dndev-color-swatches {
  display: grid;
  grid-template-columns: repeat(var(--color-picker-columns, 8), 1fr);
  gap: var(--gap-sm);
}

/* Individual swatch */

.dndev-color-swatch {
  width: 100%;
  aspect-ratio: 1;
  min-width: 28px;
  min-height: 28px;
  border-radius: var(--radius-interactive);
  border: 2px solid transparent;
  background-color: var(--swatch-color);
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-in-out),
    box-shadow var(--dur-fast) var(--ease-in-out),
    border-color var(--dur-fast) var(--ease-in-out);
  padding: 0;
  position: relative;
}

.dndev-color-swatch:hover {
  transform: scale(1.15);
  box-shadow: var(--shadow-md);
  z-index: 1;
}

.dndev-color-swatch:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.dndev-color-swatch:focus:not(:focus-visible) {
  outline: none;
}

/* Selected swatch — ring */

.dndev-color-swatch[aria-checked='true'] {
  border-color: var(--foreground);
  box-shadow:
    0 0 0 2px var(--background),
    0 0 0 4px var(--foreground);
}

/* Checkmark on selected */

.dndev-color-swatch[aria-checked='true']::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 40%;
  height: 22%;
  border-bottom: 2px solid;
  border-inline-start: 2px solid;
  transform: rotate(-45deg) translateY(-15%);
}

/* Contrast-aware checkmark color */

.dndev-color-swatch[aria-checked='true'][data-light='true']::after {
  color: #000000;
}

.dndev-color-swatch[aria-checked='true'][data-light='false']::after {
  color: #ffffff;
}

/* Custom color section */

.dndev-color-custom {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.dndev-color-custom-label {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  font-size: var(--font-size-sm);
  color: var(--muted-foreground);
  cursor: pointer;
}

.dndev-color-custom input[type='color'] {
  width: var(--touch-target);
  height: var(--touch-target);
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-interactive);
  padding: 2px;
  cursor: pointer;
  background: none;
}

.dndev-color-custom input[type='color']:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Hex display */

.dndev-color-hex {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--muted-foreground);
  text-transform: uppercase;
}

/* Disabled */

.dndev-color-picker[aria-disabled='true'] {
  opacity: var(--opacity-muted);
  pointer-events: none;
}

/* packages/components/src/atomic/Combobox/Combobox.css */

/* ──────────────────────────────────────────────────
   Trailing icon group — flex row inside the input area
   ────────────────────────────────────────────────── */

.dndev-combobox-trailing {
  position: absolute;
  inset-inline-end: var(--gap-sm);
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--gap-tight, 4px);
  z-index: 1;
  pointer-events: none; /* pass clicks through to input by default */
}

/* Input padding: reserve space for trailing content.
   --combobox-pad-end is set as an inline CSS variable on .dndev-combobox-wrapper. */

.dndev-combobox-wrapper .dndev-input {
  padding-inline-end: var(--combobox-pad-end);
}

/* Action buttons (create "+", clear "X") */

.dndev-combobox-action-btn {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-md);
  height: var(--icon-md);
  border-radius: var(--radius-interactive, var(--radius-sm, 4px));
  cursor: pointer;
  pointer-events: auto; /* re-enable clicks on buttons */
  color: var(--muted-foreground);
  opacity: var(--opacity-muted, 0.5);
  transition:
    opacity var(--dur-fast) var(--ease-in-out),
    background-color var(--dur-fast) var(--ease-in-out);
}

.dndev-combobox-action-btn:hover {
  opacity: 1;
  background-color: var(--accent, rgba(0, 0, 0, 0.06));
}

.dndev-combobox-action-btn:focus-visible {
  opacity: 1;
  outline: none;
  box-shadow:
    0 0 0 2px var(--ring),
    0 0 0 4px rgb(from var(--ring) r g b / 0.2);
}

.dndev-combobox-action-btn:active {
  opacity: 0.8;
}

.dndev-combobox-action-btn svg {
  width: var(--size-icon-sm, 16px);
  height: var(--size-icon-sm, 16px);
}

/* Create button accent color */

.dndev-combobox-action-btn--create {
  color: var(--primary);
}

/* Clear button */

.dndev-combobox-action-btn--clear {
  color: var(--muted-foreground);
}

/* Chevron indicator (non-interactive, just visual) */

.dndev-combobox-chevron {
  width: var(--icon-md);
  height: var(--icon-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground);
  opacity: var(--opacity-muted);
  pointer-events: none;
}

.dndev-combobox-chevron svg {
  width: var(--icon-md);
  height: var(--icon-md);
  transition: transform var(--dur-fast) var(--ease-in-out);
}

.dndev-combobox-open .dndev-combobox-chevron svg {
  transform: rotate(180deg);
}

/* Spinner replaces chevron */

.dndev-combobox-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-md);
  height: var(--icon-md);
  pointer-events: none;
}

/* ──────────────────────────────────────────────────
   Chips-inside mode — wrapper becomes the visual input
   ────────────────────────────────────────────────── */

.dndev-combobox-wrapper--chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-tight, 4px);
  border: var(--border-hairline) solid var(--line-2);
  border-radius: var(--radius-interactive);
  padding: var(--gap-tight, 4px);
  padding-inline-end: var(--combobox-pad-end);
  min-height: var(--touch-target);
  cursor: text;
  transition: all var(--dur-normal) var(--ease-in-out);
}

.dndev-combobox-wrapper--chips:hover {
  border-color: var(--ring);
}

.dndev-combobox-open .dndev-combobox-wrapper--chips {
  border-color: var(--ring);
}

/* Input inside chips wrapper: grow to fill, no min height */

.dndev-combobox-wrapper--chips .dndev-input {
  flex: 1 1 80px;
  min-width: 80px;
  height: auto;
  padding: var(--gap-tight, 4px) var(--gap-sm);
}

/* ──────────────────────────────────────────────────
   Dropdown content
   ────────────────────────────────────────────────── */

.dndev-combobox-content {
  width: var(--radix-popover-trigger-width);
  min-width: var(--radix-popover-trigger-width);
  max-width: var(--radix-popover-trigger-width);
  display: flex;
  flex-direction: column;
  padding: 0;
}

.dndev-combobox-option {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gap-sm) var(--gap-md);
  cursor: pointer;
  border-radius: var(--radius-interactive);
  transition: background-color var(--dur-fast) var(--ease-in-out);
}

.dndev-combobox-option:disabled {
  opacity: var(--opacity-muted);
  cursor: not-allowed;
}

.dndev-combobox-option-highlighted:not(:disabled) {
  background-color: var(--accent);
  opacity: var(--opacity-strong);
}

.dndev-combobox-option-selected {
  font-weight: var(--font-weight-medium);
  background-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.dndev-combobox-option-selected.dndev-combobox-option-highlighted {
  background-color: var(--accent);
}

.dndev-combobox-option-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-tight);
  flex: 1;
}

.dndev-combobox-option-label {
  font-size: var(--font-size-sm);
  color: var(--foreground);
}

.dndev-combobox-option-description {
  font-size: var(--font-size-xs);
  color: var(--muted-foreground);
}

.dndev-combobox-option-check {
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--primary);
  flex-shrink: 0;
  margin-inline-start: auto;
  padding-inline-start: var(--gap-sm);
}

.dndev-combobox-empty {
  padding: var(--gap-lg) var(--gap-md);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--muted-foreground);
}

/* Creatable option styling */

.dndev-combobox-option-create {
  color: var(--primary);
  font-style: italic;
}

.dndev-combobox-option-create-icon {
  width: var(--icon-md);
  height: var(--icon-md);
  margin-inline-end: var(--gap-sm);
  flex-shrink: 0;
}

/* packages/components/src/atomic/DualCard/DualCard.css */

.dndev-dual-card {
  width: 100%;
  padding: var(--gap-lg);
}

.dndev-dual-card .dndev-dual-card-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--gap-lg);
    align-items: stretch;
  }

.dndev-dual-card .dndev-dual-card-left,.dndev-dual-card .dndev-dual-card-right {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    min-width: 0;
  }

:is(.dndev-dual-card .dndev-dual-card-left,.dndev-dual-card .dndev-dual-card-right) .dndev-dual-card-content {
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }

:is(:is(.dndev-dual-card .dndev-dual-card-left,.dndev-dual-card .dndev-dual-card-right) .dndev-dual-card-content) .dndev-list {
        text-align: start;
      }

.dndev-dual-card .dndev-dual-card-title {
    margin: 0;
  }

.dndev-dual-card .dndev-dual-card-subtitle {
    margin: 0;
  }

.dndev-dual-card .dndev-dual-card-content {
    flex: 1;
  }

.dndev-dual-card .dndev-dual-card-cta {
    margin-top: auto;
  }

.dndev-dual-card .dndev-dual-card-separator {
    height: 80%;
    align-self: center;
  }

/* Responsive: stack to 1 column on mobile */

@media (width < 768px) {
    .dndev-dual-card .dndev-dual-card-container {
      grid-template-columns: 1fr;
      gap: var(--gap-md);
    }

    .dndev-dual-card .dndev-dual-card-separator {
      display: none;
    }
  }

/* packages/components/src/advanced/Code/Code.css */

.dndev-code {
  /* Code-specific overrides: background color, text color, and layout */
  display: flex;
  flex-direction: column;
  background: var(--muted);
  /* Override surface gradient with code-specific dark background */
  color: var(--muted-foreground);
  /* Override surface text color for dark background */
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  min-height: 0;
  /* Inherit from dndev-surface: padding, border, border-radius, box-shadow */
}

.dndev-code[data-compact='true'] {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.dndev-code[data-glow='blank']::before {
  display: none;
}

.dndev-code-header {
  display: flex;
  align-items: center;
  padding: var(--gap-sm);
  border-bottom: var(--border-hairline) solid var(--line-2);
  font-size: var(--font-size-xs);
  color: var(--muted-foreground);
}

.dndev-code-traffic-lights {
  display: flex;
  gap: var(--gap-sm);
}

.dndev-code-traffic-light {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}

.dndev-code-traffic-light[data-color='red'] {
  background-color: #ef4444;
}

.dndev-code-traffic-light[data-color='yellow'] {
  background-color: #eab308;
}

.dndev-code-traffic-light[data-color='green'] {
  background-color: #22c55e;
}

.dndev-code-language {
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
}

.dndev-code-line-count {
  opacity: var(--opacity-muted);
}

.dndev-code-content {
  flex: 1;
  min-height: 0;
  min-width: 0;
}

.dndev-code-pre {
  margin: 0;
  padding: var(--gap-md);
  text-align: start;
  white-space: pre;
  overflow-x: auto;
  overflow-y: visible;
}

.dndev-code-pre[data-compact='true'] {
  padding: var(--gap-sm);
}

.dndev-code-pre[data-wrap='true'] {
  white-space: pre-wrap;
}

.dndev-code-line-numbers {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding-inline-end: var(--gap-md);
  text-align: end;
  font-size: inherit;
  /* Match parent code font-size */
  opacity: var(--opacity-muted);
  width: 3rem;
  flex-shrink: 0;
  color: var(--muted-foreground);
  line-height: 1.5;
  /* Consistent line height */
}

.dndev-code-line-number {
  line-height: 1.5;
  min-height: 1.5em;
  font-size: inherit;
}

.dndev-code-code {
  flex: 1;
  min-width: 0;
  text-align: start;
  display: block;
  line-height: 1.5;
  /* Match line numbers */
  font-size: var(--font-size-sm);
  /* Explicit match with line numbers */
}

/* Ensure shiki-generated code respects line-height AND font-size */

.dndev-code-code pre,
.dndev-code-code code {
  line-height: inherit;
  font-size: inherit;
}

/* Shiki wraps each line in <span class="line"> — force consistent sizing */

.dndev-code-code .line {
  display: block;
  line-height: 1.5;
  font-size: inherit;
  min-height: 1.5em;
}

/* Empty Shiki lines still need height to stay in sync with line numbers */

.dndev-code-code .line:empty::after {
  content: '\00a0';
}

/* packages/components/src/atomic/Command/Command.css */

.dndev-command {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.dndev-command-input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  border-bottom: 1px solid var(--border);
  padding: var(--gap-md);
  flex-shrink: 0;
  position: relative;
  width: 100%;
}

.dndev-command-input-wrapper > .dndev-relative {
  flex: 1;
  min-width: 0;
  width: 100%;
}

.dndev-command-input-wrapper .dndev-command-input {
  flex: 1;
  min-width: 0;
}

.dndev-command-input {
  border: none;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
}

.dndev-command-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: var(--z-tooltip);
}

.dndev-command-empty {
  text-align: center;
  font-size: var(--font-size-sm);
  padding-top: var(--gap-lg);
  padding-bottom: var(--gap-lg);
}

.dndev-command-group {
  display: flex;
  flex-direction: column;
  overflow: visible;
  color: var(--foreground);
  padding: var(--gap-sm);
  gap: var(--gap-none);
}

.dndev-command-shortcut {
  margin-inline-start: auto;
  font-size: var(--font-size-sm);
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
}

.dndev-command-item-description {
  font-size: var(--font-size-xs);
  color: var(--muted-foreground);
  margin-top: 0.125rem;
  line-height: 1.2;
}

.dndev-command-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  padding: var(--gap-sm) var(--gap-md);
  border-top: 1px solid var(--border);
  font-size: var(--font-size-xs);
  color: var(--muted-foreground);
  flex-shrink: 0;
  margin: 0;
}

.dndev-command-footer-shortcuts {
  display: flex;
  gap: var(--gap-md);
  align-items: center;
  justify-content: space-between;
  flex: 1;
}

.dndev-command-footer-shortcut {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.dndev-command-footer-key {
  padding: 0.125rem 0.375rem;
  border-radius: 2px;
  background: var(--muted);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

/* No overrides - all base styling handled by patterns.css */

/* Component-specific: gap adjustments for responsive layout */

.dndev-interactive[data-role='command-item'] {
  gap: var(--gap-sm);
}

/* Desktop: icon + label | path | favorite in row */

@media (width >= 1024px) {
  .dndev-interactive[data-role='command-item'] {
    gap: var(--gap-md);
  }

  .dndev-command-item-label {
    flex: 1;
  }

  .dndev-command-item-path {
    font-size: var(--font-size-sm);
    color: var(--muted-foreground);
    flex-shrink: 0;
  }

  .dndev-command-favorite-button {
    flex-shrink: 0;
  }
}

/* Mobile: icon + (label/path stacked) | favorite */

@media (width <= 1023px) {
  .dndev-interactive[data-role='command-item'] {
    flex-wrap: wrap;
  }

  .dndev-command-item-label {
    flex: 1;
    order: 1;
  }

  .dndev-command-item-path {
    flex-basis: 100%;
    order: 3;
    font-size: var(--font-size-xs);
    color: var(--muted-foreground);
    padding-inline-start: calc(var(--icon-md) + var(--gap-sm));
  }

  .dndev-command-favorite-button {
    order: 2;
    flex-shrink: 0;
  }
}

/* Inherit accent-foreground when parent is selected/hovered */

.dndev-interactive[data-role='command-item'][data-selected='true']
  .dndev-command-item-path,
.dndev-interactive[data-role='command-item']:hover .dndev-command-item-path {
  color: inherit;
}

.dndev-command-favorite-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: var(--opacity-muted);
  transition: opacity var(--dur-normal) var(--ease-in-out);
  flex-shrink: 0;
}

.dndev-command-favorite-button:hover {
  opacity: 1;
}

.dndev-command-favorite-button[data-favorited='true'] svg {
  fill: currentColor;
  opacity: 1;
}

.dndev-command-item[data-selected='true'] .dndev-command-favorite-button,
.dndev-interactive[data-role='command-item'][data-selected='true']
  .dndev-command-favorite-button {
  opacity: 1;
}

/* packages/components/src/atomic/CommandDialog/CommandDialog.css */

.dndev-command-dialog-content {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: calc(var(--z-modal) + 1);
  transform: translate(-50%, -50%) !important;
  display: flex;
  flex-direction: column;
  width: 90vw;
  max-width: 640px;
  height: 70vh;
  max-height: 640px;
  padding: 0 !important;
  gap: 0;
  overflow: hidden;
  border-radius: 0;
  background: var(--background);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
}

.dndev-command-dialog-content  > .dndev-command {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

.dndev-command-dialog-content  > .dndev-command-footer {
    flex-shrink: 0;
  }

.dndev-command-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  padding: var(--gap-md);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.dndev-command-dialog-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
  margin: 0;
  flex: 1;
}

.dndev-command-dialog-close {
  flex-shrink: 0;
  opacity: var(--opacity-muted);
}

.dndev-command-dialog-close:hover {
    opacity: 1;
  }

.dndev-command-close-inline {
  flex-shrink: 0;
  opacity: var(--opacity-muted);
}

.dndev-command-close-inline:hover {
    opacity: 1;
  }

/* packages/components/src/atomic/ContextMenu/ContextMenu.css */

.dndev-context-menu-sub-content {
  min-width: 15ch; /* Character-based: scales with font size */
  padding: var(--gap-sm);
}

.dndev-context-menu-radio-indicator {
  width: var(--gap-sm);
  height: var(--gap-sm);
}

/* packages/components/src/atomic/CopyToClipboard/CopyToClipboard.css */

.dndev-copy-button-transition {
  transition: transform var(--dur-fast) ease-out;
}

.dndev-copy-button-scaled {
  transform: scale(0.95);
}

/* packages/components/src/atomic/DescriptionList/DescriptionList.css */

.dndev-description-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  text-align: start;
}

.dndev-description-list[data-orientation='horizontal'] {
    gap: var(--gap-lg);
  }

.dndev-description-list[data-orientation='horizontal'] .dndev-description-item {
      flex-direction: row;
      align-items: baseline;
      justify-content: space-between;
    }

.dndev-description-list[data-orientation='horizontal'] .dndev-description-term {
      flex-shrink: 0;
      min-width: 120px;
    }

.dndev-description-list[data-orientation='horizontal'] .dndev-description-details {
      flex: 1;
      text-align: end;
    }

.dndev-description-list .dndev-description-item {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

.dndev-description-list .dndev-description-term {
    display: block;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--muted-foreground);
  }

.dndev-description-list .dndev-description-details {
    font-size: var(--font-size-base);
    color: inherit;
    margin: 0;
  }

/* packages/components/src/atomic/Dialog/Dialog.css */

/* packages/components/src/atomic/DropdownMenu/DropdownMenu.css */

/* Force labels visible in dropdown menus (overrides COMPACT/AUTO) */

.dndev-menu-content .dndev-interactive-label {
  display: inline-flex !important;
}

/* Auto margin for trailing icons/indicators */

.dndev-dropdown-menu-trailing {
  margin-inline-start: auto;
}

/* Checkmark icon for checked items */

.dndev-dropdown-menu-checkmark {
  width: 1rem;
  height: 1rem;
}

.dndev-dropdown-sub-content-custom {
  padding: var(--gap-sm);
}

/* Checked state styling */

.dndev-interactive[data-role='menu-item'][data-state='checked'] {
  color: var(--secondary-foreground);
}

/* Checked + hover state */

.dndev-interactive[data-role='menu-item'][data-state='checked']:hover,
.dndev-interactive[data-role='menu-item'][data-state='checked']:focus-visible,
.dndev-interactive[data-role='menu-item'][data-state='checked'][data-highlighted] {
  background-color: var(--accent);
  color: var(--secondary-foreground);
}

/* packages/components/src/atomic/FeatureFallback/FeatureFallback.css */

.dndev-feature-fallback-card {
  max-width: var(--content-text);
  border: none;
}

.dndev-feature-fallback-title {
  color: var(--muted-foreground);
}

.dndev-feature-fallback-text {
  color: var(--muted-foreground);
}

/* packages/components/src/atomic/FileButton/FileButton.css */

.dndev-file-button-label {
  cursor: pointer;
}

/* packages/components/src/atomic/Grid/Grid.css */

.dndev-grid-component {
  display: grid;
  min-width: 0;
  width: 100%;
  /* Default: use mobile columns */
  grid-template-columns: repeat(var(--grid-cols-mobile, 1), 1fr);
}

/* Responsive columns via media queries */

/* Tablet: 768px+ */

@media (min-width: 768px) {
  .dndev-grid-component {
    grid-template-columns: repeat(var(--grid-cols-tablet, 1), 1fr);
  }
}

/* Laptop: 1024px+ (key layout split) */

@media (min-width: 1024px) {
  .dndev-grid-component {
    grid-template-columns: repeat(var(--grid-cols-laptop, 1), 1fr);
  }
}

/* Desktop: 1440px+ */

@media (min-width: 1440px) {
  .dndev-grid-component {
    grid-template-columns: repeat(var(--grid-cols-desktop, 1), 1fr);
  }
}

/* Responsive templateColumns via custom properties */

.dndev-grid-component[data-responsive-tpl='true'] {
  grid-template-columns: var(--grid-tpl-mobile);
}

@media (min-width: 768px) {
  .dndev-grid-component[data-responsive-tpl='true'] {
    grid-template-columns: var(--grid-tpl-tablet);
  }
}

@media (min-width: 1024px) {
  .dndev-grid-component[data-responsive-tpl='true'] {
    grid-template-columns: var(--grid-tpl-laptop);
  }
}

@media (min-width: 1440px) {
  .dndev-grid-component[data-responsive-tpl='true'] {
    grid-template-columns: var(--grid-tpl-desktop);
  }
}

/* Responsive grid areas via custom properties */

.dndev-grid-component[data-responsive-areas='true'] {
  grid-template-areas: var(--grid-areas-mobile);
}

@media (min-width: 768px) {
  .dndev-grid-component[data-responsive-areas='true'] {
    grid-template-areas: var(--grid-areas-tablet);
  }
}

@media (min-width: 1024px) {
  .dndev-grid-component[data-responsive-areas='true'] {
    grid-template-areas: var(--grid-areas-laptop);
  }
}

@media (min-width: 1440px) {
  .dndev-grid-component[data-responsive-areas='true'] {
    grid-template-areas: var(--grid-areas-desktop);
  }
}

/* Spacing from CSS variables */

.dndev-grid-component[data-gap='none'] {
  gap: var(--gap-none);
}

.dndev-grid-component[data-gap='tight'] {
  gap: var(--gap-sm);
}

.dndev-grid-component[data-gap='medium'] {
  gap: var(--gap-md);
}

.dndev-grid-component[data-gap='large'] {
  gap: var(--gap-lg);
}

/* Alignment */

.dndev-grid-component[data-align='start'] {
  align-items: start;
}

.dndev-grid-component[data-align='center'] {
  align-items: center;
}

.dndev-grid-component[data-align='end'] {
  align-items: end;
}

.dndev-grid-component[data-align='stretch'] {
  align-items: stretch;
}

/* Text alignment */

.dndev-grid-component[data-text-align='start'] {
  text-align: start;
}

.dndev-grid-component[data-text-align='center'] {
  text-align: center;
}

.dndev-grid-component[data-text-align='end'] {
  text-align: end;
}

/* Justify items (horizontal alignment) */

.dndev-grid-component[data-justify='start'] {
  justify-items: start;
}

.dndev-grid-component[data-justify='center'] {
  justify-items: center;
}

.dndev-grid-component[data-justify='end'] {
  justify-items: end;
}

.dndev-grid-component[data-justify='stretch'] {
  justify-items: stretch;
}

/*
 * GRID AREA COMPONENT
 * Named grid areas for semantic grid layouts
 * Note: grid-area is set via inline style (layout prop, not styling prop)
 */

.dndev-grid-area {
  /* Grid area assignment handled via inline style */
  min-width: 0; /* Allow grid areas to shrink below content size (required for grid to work properly) */
  overflow: hidden; /* Hide overflow by default (prevents wrapping) */
}

/* Override overflow when explicitly set via prop */

.dndev-grid-area[data-overflow='visible'] {
  overflow: visible;
}

.dndev-grid-area[data-overflow='auto'] {
  overflow: auto;
}

.dndev-grid-area[data-overflow='scroll'] {
  overflow: scroll;
}

/* Rigid: prevent GridArea from shrinking */

.dndev-grid-area[data-rigid='true'] {
  flex-shrink: 0;
}

/* packages/components/src/atomic/HeroSection/HeroSection.css */

.dndev-hero-badge {
  display: inline-block;
  font-size: var(--font-size-sm);
}

.dndev-hero-section {
  /* Content constraint + centered */
  max-width: var(--content-width);
  margin-inline: auto;
  /* Padding with hero background - responsive to match PageContainer */
  padding-inline: var(--gap-md);
  padding-block: var(--gap-lg);
}

@media (width >= 1024px) {

.dndev-hero-section {
    padding-inline: var(--gap-lg);
}
  }

.dndev-hero-section {

  display: flex;
  flex-direction: column;
}

.dndev-hero-section h1 {
    font-family: var(--font-headline, var(--font-sans));
  }

/* Text alignment */

.dndev-hero-section[data-text-align='start'] {
    text-align: start;
  }

.dndev-hero-section[data-text-align='center'] {
    text-align: center;
  }

.dndev-hero-section[data-text-align='end'] {
    text-align: end;
  }

/* Item alignment (align-items) */

.dndev-hero-section[data-align='start'] {
    align-items: flex-start;
  }

.dndev-hero-section[data-align='center'] {
    align-items: center;
  }

.dndev-hero-section[data-align='end'] {
    align-items: flex-end;
  }

.dndev-hero-section[data-align='stretch'] {
    align-items: stretch;
  }

/* Content justification (justify-content) */

.dndev-hero-section[data-justify='start'] {
    justify-content: flex-start;
  }

.dndev-hero-section[data-justify='center'] {
    justify-content: center;
  }

.dndev-hero-section[data-justify='end'] {
    justify-content: flex-end;
  }

.dndev-hero-section[data-justify='between'] {
    justify-content: space-between;
  }

.dndev-hero-section[data-justify='around'] {
    justify-content: space-around;
  }

.dndev-hero-section[data-justify='evenly'] {
    justify-content: space-evenly;
  }

/* Bleed: full viewport width */

.dndev-hero-section--bleed {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
}

/* Background image with overlay for text readability */

.dndev-hero-section--bg-image {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.dndev-hero-section--bg-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.4),
    rgba(0, 0, 0, 0.6)
  );
  z-index: 0;
}

.dndev-hero-section--bg-image > * {
  position: relative;
  z-index: 1;
}

.dndev-hero-section--bg-image,
.dndev-hero-section--bg-image .dndev-hero-subtitle {
  color: white;
}

.dndev-hero-subtitle {
  font-size: var(--font-size-lg); /* 20px - muted via component */
}

/* packages/components/src/atomic/HoverCard/HoverCard.css */

.dndev-hovercard-content {
  width: -moz-max-content;
  width: max-content;
  max-width: min(90vw, 24rem); /* 90% viewport or 384px, whichever is smaller */
  outline: none;
}

/* packages/components/src/atomic/Icons/IconBox.css */

.dndev-icon-box {
  width: var(--touch-target);
  height: var(--touch-target);
  padding: 0;
  border: 1px solid var(--card-foreground);
  border-radius: var(--radius-surface);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* packages/components/src/atomic/InfiniteScroll/InfiniteScroll.css */

.dndev-infinite-scroll-grid {
  display: grid;
  gap: var(--gap-md);
}

.dndev-infinite-scroll-grid[data-cols='1'] {
    grid-template-columns: 1fr;
  }

.dndev-infinite-scroll-grid[data-cols='2'] {
    grid-template-columns: 1fr;
  }

.dndev-infinite-scroll-grid[data-cols='3'] {
    grid-template-columns: 1fr;
  }

.dndev-infinite-scroll-grid[data-cols='4'] {
    grid-template-columns: 1fr;
  }

.dndev-infinite-scroll-grid[data-cols='5'] {
    grid-template-columns: 1fr;
  }

.dndev-infinite-scroll-grid[data-cols='6'] {
    grid-template-columns: 1fr;
  }

@media (width >= 768px) {
    .dndev-infinite-scroll-grid[data-cols='2'],.dndev-infinite-scroll-grid[data-cols='3'],.dndev-infinite-scroll-grid[data-cols='4'],.dndev-infinite-scroll-grid[data-cols='5'],.dndev-infinite-scroll-grid[data-cols='6'] {
      grid-template-columns: repeat(2, 1fr);
    }
  }

@media (width >= 1024px) {
    .dndev-infinite-scroll-grid[data-cols='3'],.dndev-infinite-scroll-grid[data-cols='4'],.dndev-infinite-scroll-grid[data-cols='5'],.dndev-infinite-scroll-grid[data-cols='6'] {
      grid-template-columns: repeat(3, 1fr);
    }
  }

@media (width >= 1280px) {
    .dndev-infinite-scroll-grid[data-cols='4'],.dndev-infinite-scroll-grid[data-cols='5'],.dndev-infinite-scroll-grid[data-cols='6'] {
      grid-template-columns: repeat(4, 1fr);
    }
  }

@media (width >= 1536px) {
    .dndev-infinite-scroll-grid[data-cols='5'] {
      grid-template-columns: repeat(5, 1fr);
    }

    .dndev-infinite-scroll-grid[data-cols='6'] {
      grid-template-columns: repeat(6, 1fr);
    }
  }

/* Infinite Scroll components */

.dndev-infinite-scroll-loading-container {
  color: var(--muted-foreground);
}

.dndev-infinite-scroll-end-title {
  color: var(--muted-foreground);
}

.dndev-infinite-scroll-end-text {
  color: var(--muted-foreground);
}

.dndev-infinite-scroll-more-text {
  color: var(--muted-foreground);
}

.dndev-infinite-scroll-end-container {
  padding-block: var(--gap-lg);
}

/* packages/components/src/advanced/ImageGallery/ImageGallery.css */

.image-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  outline: none;
}

.image-gallery:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-lg);
}

/* Empty state */

.image-gallery--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--muted);
  border-radius: var(--radius-lg);
}

.image-gallery__placeholder {
  color: var(--muted-foreground);
  font-size: var(--font-size-sm);
}

/* Main image container */

.image-gallery__main {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-surface);
  background-color: var(--muted);
}

.image-gallery__main-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  position: relative;
}

/* Navigation arrows */

.image-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--radius-full);
  /* --card not --background: surface must be opaque */
  background-color: var(--card);
  color: var(--foreground);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.2s ease,
    background-color 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 2;
}

.image-gallery__main:hover .image-gallery__nav,
.image-gallery:focus-within .image-gallery__nav {
  opacity: 1;
}

.image-gallery__nav:hover {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.image-gallery__nav:focus-visible {
  opacity: 1;
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.image-gallery__nav--prev {
  inset-inline-start: var(--gap-md);
}

.image-gallery__nav--next {
  inset-inline-end: var(--gap-md);
}

/* Thumbnails */

.image-gallery__thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

.image-gallery__thumbnail {
  flex: 0 0 auto;
  width: 80px;
  height: 60px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-surface);
  overflow: hidden;
  cursor: pointer;
  background: none;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

.image-gallery__thumbnail:hover {
  border-color: var(--muted-foreground);
}

.image-gallery__thumbnail:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.image-gallery__thumbnail--selected {
  border-color: var(--primary);
}

.image-gallery__thumbnail-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* Responsive adjustments */

@media (max-width: 640px) {
  .image-gallery__thumbnail {
    width: 60px;
    height: 45px;
  }

  .image-gallery__nav {
    width: 36px;
    height: 36px;
    opacity: 0.8;
  }

  .image-gallery__nav svg {
    width: 20px;
    height: 20px;
  }
}

/* packages/components/src/atomic/Input/Input.css */

/* Hide number input spinners - cleaner UI for price/range inputs */

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'] {
  -moz-appearance: textfield;
}

/* Input with leading icon (search, etc.) */

.dndev-input-with-leading-icon {
  padding-inline-start: calc(var(--gap-md) + var(--icon-md) + var(--gap-sm));
}

/* Input with trailing icon */

.dndev-input-with-trailing-icon {
  padding-inline-end: calc(var(--gap-md) + var(--icon-md) + var(--gap-sm));
}

/* Icon container inside input */

.dndev-input-icon {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
  color: var(--muted-foreground);
}

.dndev-input-icon-leading {
  inset-inline-start: var(--gap-md);
}

.dndev-input-icon-trailing {
  inset-inline-end: var(--gap-md);
}

/* packages/components/src/advanced/JsonViewer/JsonViewer.css */

.dndev-json-viewer {
  position: relative;
}

.dndev-json-viewer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-sm);
  margin-bottom: var(--gap-sm);
}

.dndev-json-viewer-container {
  background-color: var(--muted);
  border-radius: var(--radius-surface);
  padding: 1rem;
  overflow: auto;
  max-height: 600px;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.dndev-json-node {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
}

.dndev-json-key {
  color: var(--foreground);
  font-weight: var(--font-weight-semibold);
}

.dndev-json-value {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.dndev-json-value-string {
  color: rgb(22, 163, 74);
}

.dark .dndev-json-value-string {
    color: rgb(74, 222, 128);
  }

.dndev-json-value-number {
  color: rgb(37, 99, 235);
}

.dark .dndev-json-value-number {
    color: rgb(96, 165, 250);
  }

.dndev-json-value-boolean {
  color: rgb(147, 51, 234);
}

.dark .dndev-json-value-boolean {
    color: rgb(196, 181, 253);
  }

.dndev-json-value-null {
  color: var(--muted-foreground);
}

.dndev-json-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  cursor: pointer;
  border-radius: var(--radius-interactive);
  padding-inline-start: 0.25rem;
  padding-inline-end: 0.25rem;
  margin-inline-start: -0.25rem;
  margin-inline-end: -0.25rem;
}

.dndev-json-toggle:hover {
    background-color: rgb(from var(--muted) r g b / 0.5);
  }

.dndev-json-bracket {
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.dndev-json-icon {
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.125rem;
  color: var(--muted-foreground);
}

.dndev-json-count {
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.dndev-json-children {
  margin-inline-start: 1rem;
  margin-top: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-inline-start: 1px solid var(--border);
  padding-inline-start: 0.75rem;
}

/* packages/components/src/atomic/Label/Label.css */

.dndev-label-base {
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--ease-in-out);
  transition-duration: var(--dur-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sm);
}

.dndev-label-base:has( + *:disabled) {
    cursor: not-allowed;
    opacity: var(--opacity-muted);
  }

.dndev-label-base:hover {
    color: var(--primary);
  }

.dndev-label-base:focus {
    color: var(--primary);
  }

.dndev-label-base[data-plain='true'] {
    cursor: default;
  }

.dndev-label-base[data-plain='true']:hover {
      color: inherit;
    }

.dndev-label-base[data-plain='true']:focus {
      color: inherit;
    }

.dndev-label-icon {
  width: var(--icon-md);
  height: var(--icon-md);
}

.dndev-label-icon[data-position='leading'] {
    margin-inline-end: var(--gap-sm);
  }

.dndev-label-icon[data-position='trailing'] {
    margin-inline-start: var(--gap-sm);
  }

/* Floating Fieldset - native border-cutting via legend */

.dndev-floating-fieldset {
  position: relative;
  border: var(--border-hairline) solid var(--line-2);
  border-radius: var(--radius-interactive);
  margin: 0;
  padding: 0;
  background-color: transparent;
  transition: all var(--dur-normal) var(--ease-in-out);
  text-align: start;
  /* Flex-aware: allow fieldset to shrink in flex containers */
  min-width: 0;
  width: 100%;
}

.dndev-floating-fieldset:hover {
  border-color: var(--ring);
}

.dndev-floating-fieldset:focus-within {
  border-color: var(--ring);
}

.dndev-floating-fieldset[data-disabled='true'] {
  opacity: var(--opacity-muted);
  cursor: not-allowed;
}

/* Legend sits on border - browser natively cuts border */

.dndev-floating-legend {
  margin-inline-start: var(--gap-sm);
  padding: 0 var(--gap-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--foreground);
  /* Ellipsis by default */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dndev-floating-legend label {
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-tight);
}

.dndev-floating-fieldset[data-disabled='true'] .dndev-floating-legend {
  color: var(--muted-foreground);
}

/* Disable truncation when explicitly set to false */

.dndev-floating-legend[data-truncate='false'] {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/* Input inside fieldset uses bare mode via data-bare attribute (set by Input component) */

/* This rule is kept for non-Input children that might need border removal */

.dndev-floating-fieldset > .dndev-input:not([data-bare]) {
  border: none;
  box-shadow: none;
  background: transparent;
}

/* packages/components/src/atomic/List/List.css */

.dndev-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding-inline-start: 0; /* Controllable via parent/style prop */
  margin: 0;
  list-style-position: outside;
  text-align: start; /* Always start-aligned, even when parent is centered */
}

.dndev-list[data-gap='none'] {
    gap: var(--gap-none);
  }

.dndev-list[data-gap='tight'] {
    gap: var(--gap-sm);
  }

.dndev-list[data-gap='medium'] {
    gap: var(--gap-md);
  }

.dndev-list[data-gap='large'] {
    gap: var(--gap-lg);
  }

/* Modern ::marker approach - only when list-style is not 'none' */

.dndev-list[data-ordered='true'] {
    list-style-type: decimal;
  }

.dndev-list:not([data-ordered='true']):not([style*='list-style: none']) {
    list-style-type: disc;
  }

/* Density variants */

.dndev-list[data-density='dense'] {
    gap: var(--gap-none);
  }

.dndev-list[data-density='dense'] .dndev-list-item {
      font-size: var(--font-size-xs);
    }

.dndev-list[data-density='narrow'] {
    gap: var(--gap-sm);
  }

.dndev-list[data-density='narrow'] .dndev-list-item {
      font-size: var(--font-size-sm);
    }

.dndev-list[data-density='expressive'] {
    gap: var(--gap-md);
  }

.dndev-list[data-density='expressive'] .dndev-list-item {
      font-size: var(--font-size-base);
    }

/* Always use flex layout for consistent alignment */

.dndev-list .dndev-list-item {
    font-size: var(--font-size-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    list-style: none; /* Remove native marker */
    margin-block: 0;
    padding-inline-start: 0;
  }

:is(.dndev-list .dndev-list-item) .dndev-list-item-icon {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }

:is(.dndev-list .dndev-list-item) .dndev-list-item-content {
      flex: 1;
      text-align: start; /* Text aligned start */
    }

/* packages/components/src/atomic/NavigationMenu/NavigationMenu.css */

.dndev-nav-menu-base {
  position: relative;
  z-index: var(--z-header);
  display: flex;
  flex: 1 1 0%;
}

.dndev-nav-menu-base[data-vertical='true'] {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

.dndev-nav-menu-base[data-vertical='true'] .dndev-interactive[data-role='nav-trigger'] {
      width: 100%;
      justify-content: flex-start;
    }

.dndev-nav-menu-base[data-vertical='true'] .dndev-interactive[data-role='menu-item'] {
      width: 100%;
      justify-content: flex-start;
    }

.dndev-nav-menu-base[data-vertical='false'] {
    max-width: -moz-max-content;
    max-width: max-content;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

.dndev-nav-menu-base[data-vertical='false'] .dndev-interactive[data-role='nav-trigger'] {
      width: -moz-max-content;
      width: max-content;
      justify-content: center;
    }

.dndev-nav-menu-base[data-vertical='false'] .dndev-interactive[data-role='menu-item'] {
      width: -moz-max-content;
      width: max-content;
      justify-content: center;
    }

.dndev-nav-menu-list {
  display: flex;
  flex: 1 1 0%;
  list-style: none;
}

.dndev-nav-menu-list[data-vertical='true'] {
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-none);
  }

.dndev-nav-menu-list[data-vertical='false'] {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--gap-none);
  }

/* Navigation trigger - NavigationMenu-specific styles only */

.dndev-interactive[data-role='nav-trigger'] {
  height: var(--touch-target);
}

.dndev-interactive[data-role='nav-trigger']:focus {
    outline: none;
  }

.dndev-interactive[data-role='nav-trigger'][data-active='true'],.dndev-interactive[data-role='nav-trigger'][data-state='open'] {
    background-color: rgb(from var(--accent) r g b / 0.5);
  }

.dndev-nav-menu-trigger-icon {
  position: relative;
  top: 1px;
  margin-inline-start: var(--gap-sm);
  height: var(--icon-md);
  width: var(--icon-md);
  transition-property: transform;
  transition-timing-function: var(--ease-in-out);
  transition-duration: var(--dur-normal);
}

.dndev-nav-menu-trigger-icon[data-state='open'] {
    transform: rotate(180deg);
  }

.dndev-nav-menu-content {
  inset-inline-start: 0;
  top: 0;
  width: 100%;
}

@media (width >= 768px) {

.dndev-nav-menu-content {
    position: absolute;
    width: auto;
}
  }

.dndev-nav-menu-viewport-wrapper {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  display: flex;
  justify-content: center;
}

.dndev-nav-menu-viewport {
  position: relative;
  margin-top: var(--gap-sm);
  height: var(--radix-navigation-menu-viewport-height);
  width: 100%;
  overflow: hidden;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
}

@media (width >= 768px) {

.dndev-nav-menu-viewport {
    width: var(--radix-navigation-menu-viewport-width);
}
  }

.dndev-nav-menu-indicator {
  top: 100%;
  z-index: 1;
  display: flex;
  height: var(--gap-sm);
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.dndev-nav-menu-indicator-inner {
  position: relative;
  top: 60%;
  height: var(--gap-sm);
  width: var(--gap-sm);
  transform: rotate(45deg);
  border-start-start-radius: 2px;
  background-color: var(--border);
  box-shadow: var(--shadow-md);
}

/* Navigation Menu Content Grid */

.dndev-nav-menu-grid-container {
  padding: var(--gap-md);
}

.dndev-nav-menu-grid-featured {
  grid-template-columns: 0.75fr 1fr;
}

.dndev-nav-menu-grid-standard {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.dndev-nav-menu-featured-item {
  grid-row: span 3;
  height: 100%;
  padding: var(--gap-md);
  border-radius: var(--radius-floating);
  background: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--muted) 50%, transparent),
    var(--muted)
  );
  text-decoration: none;
  outline: none;
}

.dndev-nav-menu-featured-title {
  margin-bottom: var(--gap-sm);
  margin-top: var(--gap-md);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.dndev-nav-menu-featured-description {
  font-size: var(--font-size-sm);
  color: var(--muted-foreground);
}

.dndev-nav-menu-item-container {
  padding: var(--gap-md);
  border-radius: var(--radius-floating);
  text-decoration: none;
  outline: none;
}

.dndev-nav-menu-item-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.dndev-nav-menu-item-description {
  font-size: var(--font-size-sm);
  color: var(--muted-foreground);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* No overrides - all styling handled by patterns.css base rules */

/* packages/components/src/atomic/PasswordInput/PasswordInput.css */

.dndev-password-input-with-toggle {
  padding-inline-end: calc(var(--gap-xl) + var(--gap-md)) !important;
}

/* Eye icon toggle - ALWAYS at end, cannot be overridden */

.dndev-password-toggle-button {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  inset-inline-end: var(--gap-sm) !important;
  inset-inline-start: unset !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: var(--gap-tight) !important;
  display: flex !important;
  align-items: center !important;
  opacity: var(--opacity-muted) !important;
  transition: opacity var(--dur-fast) var(--ease-in-out) !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
  z-index: 1 !important;
}

.dndev-password-toggle-button:hover,
.dndev-password-toggle-button:focus {
  opacity: 1 !important;
  outline: none !important;
}

.dndev-password-toggle-icon {
  color: var(--muted-foreground);
  width: var(--icon-sm);
  height: var(--icon-sm);
}

/* packages/components/src/atomic/Pagination/Pagination.css */

.dndev-pagination {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  width: 100%;
}

.dndev-pagination-info {
  display: none;
}

.dndev-pagination-size {
  display: flex;
  align-items: center;
}

.dndev-pagination-size-label {
  display: none;
}

.dndev-pagination-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  width: 100%;
}

.dndev-pagination-list {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.dndev-pagination-button {
  width: var(--touch-target);
  height: var(--touch-target);
  padding: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Desktop: Show all elements in one row */

@media (min-width: 768px) {
  .dndev-pagination-info,
  .dndev-pagination-size {
    display: flex;
    align-items: center;
    white-space: nowrap;
  }

  .dndev-pagination-size-label {
    margin-inline-end: var(--gap-sm);
  }

  .dndev-pagination-nav {
    justify-content: flex-end;
    width: auto;
    margin-inline-start: auto;
    /* Push to end */
  }
}

/* packages/components/src/atomic/Popover/Popover.css */

/* Popover content width constraints and wrapping */

/* Targets Radix UI PopoverContent element */

[data-radix-popover-content],
.dndev-floating[data-radix-popover-content] {
  max-width: min(90vw, 400px);
  width: -moz-max-content;
  width: max-content;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* packages/components/src/atomic/Progress/Progress.css */

.dndev-progress {
  position: relative;
  height: var(--gap-md);
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-full);
  background-color: var(--secondary);
}

.dndev-progress [data-radix-progress-indicator] {
  height: 100%;
  width: 100%;
  flex: 1;
  background-color: var(--primary);
  transition: transform var(--dur-normal) var(--ease-in-out);

  /* Variant colors */
}

[data-variant='default']:is(.dndev-progress [data-radix-progress-indicator]) {
    background-color: var(--primary);
  }

[data-variant='accent']:is(.dndev-progress [data-radix-progress-indicator]) {
    background-color: var(--accent);
  }

[data-variant='success']:is(.dndev-progress [data-radix-progress-indicator]) {
    background-color: var(--success);
  }

[data-variant='warning']:is(.dndev-progress [data-radix-progress-indicator]) {
    background-color: var(--warning);
  }

[data-variant='destructive']:is(.dndev-progress [data-radix-progress-indicator]) {
    background-color: var(--destructive);
  }

/* packages/components/src/atomic/RadioGroup/RadioGroup.css */

/* Uses shared .dndev-control-group pattern from patterns.css */

/* Root is display: grid - items are direct children */

/* Variant colors for checked labels - override base pattern */

.dndev-radio-group[data-variant='primary'] label:has([data-state='checked']) {
    color: var(--primary);
  }

.dndev-radio-group[data-variant='secondary'] label:has([data-state='checked']) {
    color: var(--secondary);
  }

.dndev-radio-group[data-variant='muted'] label:has([data-state='checked']) {
    color: var(--muted-foreground);
  }

.dndev-radio-group[data-variant='accent'] label:has([data-state='checked']) {
    color: var(--accent);
  }

.dndev-radio-group[data-variant='success'] label:has([data-state='checked']) {
    color: var(--success);
  }

.dndev-radio-group[data-variant='warning'] label:has([data-state='checked']) {
    color: var(--warning);
  }

.dndev-radio-group[data-variant='destructive'] label:has([data-state='checked']) {
    color: var(--destructive);
  }

.dndev-control[data-type='radio'] {
  width: var(--icon-md);
  height: var(--icon-md);
  border-radius: var(--radius-full);
  border-width: var(--border-hairline);
  background-color: transparent;
}

.dndev-control[data-type='radio'][data-state='checked'] {
    background-color: var(--primary);
  }

.dndev-control[data-type='radio'][data-variant='primary'][data-state='checked'] {
    background-color: var(--primary);
  }

.dndev-control[data-type='radio'][data-variant='secondary'][data-state='checked'] {
    background-color: var(--secondary);
  }

.dndev-control[data-type='radio'][data-variant='muted'][data-state='checked'] {
    background-color: var(--muted);
  }

.dndev-control[data-type='radio'][data-variant='accent'][data-state='checked'] {
    background-color: var(--accent);
  }

.dndev-control[data-type='radio'][data-variant='success'][data-state='checked'] {
    background-color: var(--success);
  }

.dndev-control[data-type='radio'][data-variant='warning'][data-state='checked'] {
    background-color: var(--warning);
  }

.dndev-control[data-type='radio'][data-variant='destructive'][data-state='checked'] {
    background-color: var(--destructive);
  }

.dndev-control[data-type='radio'] [data-radix-radio-group-indicator] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

:is(.dndev-control[data-type='radio'] [data-radix-radio-group-indicator])::before {
      content: '';
      display: block;
      width: 0.5rem;
      height: 0.5rem;
      border-radius: var(--radius-full);
      background-color: var(--primary-foreground);
    }

.dndev-control[data-type='radio'][data-variant='primary'] [data-radix-radio-group-indicator]::before {
    background-color: var(--primary-foreground);
  }

.dndev-control[data-type='radio'][data-variant='secondary'] [data-radix-radio-group-indicator]::before {
    background-color: var(--secondary-foreground);
  }

.dndev-control[data-type='radio'][data-variant='muted'] [data-radix-radio-group-indicator]::before {
    background-color: var(--muted-foreground);
  }

.dndev-control[data-type='radio'][data-variant='accent'] [data-radix-radio-group-indicator]::before {
    background-color: var(--accent-foreground);
  }

.dndev-control[data-type='radio'][data-variant='success'] [data-radix-radio-group-indicator]::before {
    background-color: var(--success-foreground);
  }

.dndev-control[data-type='radio'][data-variant='warning'] [data-radix-radio-group-indicator]::before {
    background-color: var(--warning-foreground);
  }

.dndev-control[data-type='radio'][data-variant='destructive'] [data-radix-radio-group-indicator]::before {
    background-color: var(--destructive-foreground);
  }

/* packages/components/src/atomic/RangeInput/RangeInput.css */

.dndev-range-input {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: var(--gap-tight);
  width: 100%;
}

.dndev-range-input > .dndev-input,
.dndev-range-input > .dndev-relative {
  min-width: 0;
}

/* packages/components/src/atomic/Select/Select.css */

.dndev-select-trigger {
  justify-content: space-between;
  align-items: center;
}

.dndev-select-loading-container {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.dndev-select-loading-spinner {
  border-radius: var(--radius-full);
  border: 2px solid currentColor;
  border-top-color: transparent;
}

.dndev-select-trigger [data-radix-select-icon] {
  opacity: var(--opacity-muted);
  width: var(--icon-md);
  height: var(--icon-md);
}

.dndev-select-trigger [data-radix-select-value] {
  font-size: var(--font-size-sm);
}

.dndev-select-content {
  width: var(--radix-select-trigger-width);
  min-width: var(--radix-select-trigger-width);
}

[data-radix-select-viewport] {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.dndev-interactive[data-radix-select-item] {
  width: 100%;
  justify-content: flex-start;
  text-align: start;
}

.dndev-interactive[data-radix-select-item] [data-radix-select-item-text] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  flex: 1;
}

.dndev-select-item-description {
  font-size: var(--font-size-xs);
  color: var(--muted-foreground);
}

.dndev-interactive[data-radix-select-item] [data-radix-select-item-indicator] {
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.dndev-interactive[data-radix-select-item]
  [data-radix-select-item-indicator]
  svg {
  width: 1rem;
  height: 1rem;
}

/* packages/components/src/atomic/ScrollArea/ScrollArea.css */

.dndev-scroll-area {
  position: relative;
  overflow: hidden;
}

.dndev-scroll-area-viewport {
  height: 100%;
  width: 100%;
  border-radius: inherit;
}

.dndev-scroll-bar {
  display: flex;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: colors var(--dur-fast) var(--ease-in-out);
}

.dndev-scroll-bar[data-orientation='vertical'] {
    height: 100%;
    width: 0.625rem;
    border-inline-start: var(--border-hairline) solid transparent;
    padding: var(--border-hairline);
  }

.dndev-scroll-bar[data-orientation='horizontal'] {
    height: 0.625rem;
    border-top: var(--border-hairline) solid transparent;
    padding: var(--border-hairline);
  }

.dndev-scroll-bar-thumb {
  position: relative;
  border-radius: var(--radius-full);
  background-color: var(--border);
}

.dndev-scroll-bar-thumb[data-orientation='vertical'] {
    flex: 1;
  }

/* Scrollbar on end side (right in LTR, left in RTL) */

.dndev-scroll-area-end .dndev-scroll-bar[data-orientation='vertical'] {
  inset-inline-end: 0;
  inset-inline-start: auto;
}

/* packages/components/src/atomic/Section/Section.css */

/* Full-width section wrapper for tone backgrounds */

.dndev-section-full-width {
  width: 100%;
}

/* Bleed: background spans full viewport width, content stays padded */

.dndev-section-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.dndev-section-bleed > .dndev-section-content {
  max-width: none;
}

/* Content wrapper: constrained + centered + padded */

.dndev-section-content {
  /* Respects PageContainer's --content-width (passed through breakthrough root) */
  max-width: var(--content-width);
  margin-inline: auto;
  min-width: 0; /* Allow shrinking so max-width wins when content would force wider */
  /* Padding with section background - responsive to match PageContainer */
  padding-inline: var(--gap-md);
  padding-top: var(--gap-lg);
  padding-bottom: var(--gap-lg);
}

@media (width >= 1024px) {

.dndev-section-content {
    padding-inline: var(--gap-lg);
}
  }

/* Propagate text-align to all section content via CSS inheritance */

.dndev-section-full-width[data-text-align='start'] > .dndev-section-content {
  text-align: start;
}

.dndev-section-full-width[data-text-align='center'] > .dndev-section-content {
  text-align: center;
}

.dndev-section-full-width[data-text-align='end'] > .dndev-section-content {
  text-align: end;
}

/* Item alignment (align-items) on content container */

.dndev-section-content[data-align='start'] {
  align-items: flex-start;
}

.dndev-section-content[data-align='center'] {
  align-items: center;
}

.dndev-section-content[data-align='end'] {
  align-items: flex-end;
}

.dndev-section-content[data-align='stretch'] {
  align-items: stretch;
}

/* Content justification (justify-content) on content container */

.dndev-section-content[data-justify='start'] {
  justify-content: flex-start;
}

.dndev-section-content[data-justify='center'] {
  justify-content: center;
}

.dndev-section-content[data-justify='end'] {
  justify-content: flex-end;
}

.dndev-section-content[data-justify='between'] {
  justify-content: space-between;
}

.dndev-section-content[data-justify='around'] {
  justify-content: space-around;
}

.dndev-section-content[data-justify='evenly'] {
  justify-content: space-evenly;
}

/* Section title: uppercase, accent color, letter spacing */

.dndev-section-title {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent) !important;
  margin-block-end: var(--gap-md);
  text-align: center; /* DEFAULT - works without attribute selector */
}

.dndev-section-full-width[data-text-align='start'] .dndev-section-title {
  text-align: start;
}

.dndev-section-full-width[data-text-align='center'] .dndev-section-title {
  text-align: center;
}

.dndev-section-full-width[data-text-align='end'] .dndev-section-title {
  text-align: end;
}

/* Collapsible title trigger */

.dndev-section-title-trigger {
  width: 100%;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-in-out);
  margin-block-end: var(--gap-md);
}

.dndev-section-title-trigger .dndev-section-title {
  margin-block-end: 0;
}

.dndev-section-title-trigger:hover {
  opacity: var(--opacity-strong);
}

.dndev-section-title-trigger:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-interactive);
}

.dndev-section-icon {
  width: var(--size-md);
  height: var(--size-md);
  flex-shrink: 0;
  color: var(--accent);
  transition: transform var(--dur-normal) var(--ease-in-out);
}

.dndev-section-full-width[data-text-align='start']
  .dndev-section-title-trigger {
  justify-content: flex-start;
}

.dndev-section-full-width[data-text-align='center']
  .dndev-section-title-trigger {
  justify-content: center;
}

.dndev-section-full-width[data-text-align='end'] .dndev-section-title-trigger {
  justify-content: flex-end;
}

/* packages/components/src/atomic/Separator/Separator.css */

.dndev-separator {
  flex-shrink: 0;
  background-color: var(--line-2);
  margin-inline: auto;
}

.dndev-separator[data-orientation='horizontal'] {
    height: 2px;
    width: 80%;

    /* Inside Section: cap to content width */
  }

.dndev-section .dndev-separator[data-orientation='horizontal'] {
      max-width: calc(var(--content-width) * 0.8);
    }

.dndev-separator[data-orientation='vertical'] {
    width: 1px;
    height: 100%;
  }

/* Default variant - uses line color */

.dndev-separator[data-variant='default'] {
    background-color: var(--line-2);
  }

/* Muted variant */

.dndev-separator[data-variant='muted'] {
    background-color: var(--line-1);
    opacity: var(--opacity-muted);

    /* Context-aware: inside muted surface, use accent (contrasting) */
  }

.dndev-surface[data-variant='muted'] .dndev-separator[data-variant='muted'] {
      background-color: var(--accent);
      opacity: var(--opacity-strong);
    }

/* Primary variant */

.dndev-separator[data-variant='primary'] {
    background-color: var(--primary);
    opacity: var(--opacity-strong);

    /* Context-aware: inside primary surface, use primary-foreground (contrasting) */
  }

.dndev-surface[data-variant='primary'] .dndev-separator[data-variant='primary'] {
      background-color: var(--primary-foreground);
      opacity: 1;
    }

/* Context-aware: inside default surface, use accent (contrasting) */

.dndev-surface:not([data-variant]) .dndev-separator[data-variant='primary'] {
      background-color: var(--accent);
    }

/* Secondary variant */

.dndev-separator[data-variant='secondary'] {
    background-color: var(--secondary);
    opacity: var(--opacity-strong);

    /* Context-aware: inside secondary surface, use secondary-foreground (contrasting) */
  }

.dndev-surface[data-variant='secondary'] .dndev-separator[data-variant='secondary'] {
      background-color: var(--secondary-foreground);
      opacity: 1;
    }

/* Accent variant */

.dndev-separator[data-variant='accent'] {
    background-color: var(--accent);
    opacity: var(--opacity-strong);

    /* Context-aware: inside accent surface, use accent-foreground (contrasting) */
  }

.dndev-surface[data-variant='accent'] .dndev-separator[data-variant='accent'] {
      background-color: var(--accent-foreground);
      opacity: 1;
    }

/* Success variant */

.dndev-separator[data-variant='success'] {
    background-color: var(--success);
    opacity: var(--opacity-strong);

    /* Context-aware: inside success surface, use success-foreground (contrasting) */
  }

.dndev-surface[data-variant='success'] .dndev-separator[data-variant='success'] {
      background-color: var(--success-foreground);
      opacity: 1;
    }

/* Warning variant */

.dndev-separator[data-variant='warning'] {
    background-color: var(--warning);
    opacity: var(--opacity-strong);

    /* Context-aware: inside warning surface, use warning-foreground (contrasting) */
  }

.dndev-surface[data-variant='warning'] .dndev-separator[data-variant='warning'] {
      background-color: var(--warning-foreground);
      opacity: 1;
    }

/* Destructive variant */

.dndev-separator[data-variant='destructive'] {
    background-color: var(--destructive);
    opacity: var(--opacity-strong);

    /* Context-aware: inside destructive surface, use destructive-foreground (contrasting) */
  }

.dndev-surface[data-variant='destructive'] .dndev-separator[data-variant='destructive'] {
      background-color: var(--destructive-foreground);
      opacity: 1;
    }

/* packages/components/src/atomic/Sheet/Sheet.css */

.dndev-sheet-content {
  position: fixed;
  display: flex;
  flex-direction: column;
  z-index: var(--z-modal);
  background: var(--card);
  /* Ensure background is opaque */
  color: var(--card-foreground);
  box-shadow: var(--shadow-xl);
  /* Focus Tunnel: Deep elevation */
  overflow: hidden;
  /* Scroll Trap: Container clips overflow */

  /* Motion Physics: Base state */
  will-change: transform, opacity;

  /* Open state animation - "Heavy" ease for premium feel */
}

.dndev-sheet-content[data-state='open'] {
    animation: sheet-slide-in var(--dur-heavy) var(--ease-heavy);
  }

/* Closed state animation */

.dndev-sheet-content[data-state='closed'] {
    animation: sheet-slide-out var(--dur-normal) var(--ease-in-out);
  }

/* Sheet positioning by side - SPATIAL METAPHOR */

/* Physical properties intentional: Sheet anchors to viewport edges regardless of text direction.
     Logical inset-inline would incorrectly swap sides in RTL for left/right sheet variants. */

/* RIGHT / LEFT (Desktop Panels) */

.dndev-sheet-content[data-side='right'],.dndev-sheet-content[data-side='left'] {
    top: 0;
    bottom: 0;
    width: 80%;
    max-width: 56rem;
    /* Standard panel width */
    height: 100%;
    /* Full height */
    border-radius: 0;
    /* Square edges for panel metaphor */
  }

.dndev-sheet-content[data-side='right'] {
    /* Physical positioning: right edge */
    right: 0;
    left: auto;
    /* Border on logical start (left in LTR, right in RTL) */
    border-inline-start: var(--border-hairline) solid var(--line-1);
  }

.dndev-sheet-content[data-side='left'] {
    /* Physical positioning: left edge */
    left: 0;
    right: auto;
    /* Border on logical end (right in LTR, left in RTL) */
    border-inline-end: var(--border-hairline) solid var(--line-1);
  }

/* TOP / BOTTOM (Mobile Cards) */

.dndev-sheet-content[data-side='top'],.dndev-sheet-content[data-side='bottom'] {
    left: 0;
    right: 0;
    /* Card metaphor: Detached from opposite edge */
    height: auto;
    max-height: 92dvh;
    /* Never touch top edge */
    width: 100%;
    margin-inline: auto;

    /* On larger screens, constrain width */
  }

@media (width >=768px) {

.dndev-sheet-content[data-side='top'],.dndev-sheet-content[data-side='bottom'] {
      max-width: 56rem;
      width: 90%;
      border-radius: var(--radius-lg);
      /* Fully rounded card on desktop */
  }
    }

.dndev-sheet-content[data-side='top'] {
    top: 0;
    border-bottom: var(--border-hairline) solid var(--line-1);
    /* Rounded bottom corners only */
    border-end-start-radius: var(--radius-lg);
    border-end-end-radius: var(--radius-lg);
  }

.dndev-sheet-content[data-side='bottom'] {
    bottom: 0;
    border-top: var(--border-hairline) solid var(--line-1);
    /* Rounded top corners only */
    border-start-start-radius: var(--radius-lg);
    border-start-end-radius: var(--radius-lg);
  }

/* DRAG HANDLE PILL - Visual affordance for draggable sheets */

.dndev-sheet-drag-handle {
  width: 2.5rem;
  height: 0.25rem;
  background: var(--line-2);
  border-radius: var(--radius-full);
  margin: var(--gap-sm) auto 0;
  flex-shrink: 0;
  cursor: grab;
  transition: background-color var(--dur-fast) var(--ease-in-out);
}

.dndev-sheet-drag-handle:active {
    cursor: grabbing;
  }

/* Positioning for bottom sheets */

.dndev-sheet-content[data-side='bottom'] > .dndev-sheet-drag-handle {
  margin-top: var(--gap-sm);
  margin-bottom: 0;
}

/* Positioning for top sheets */

.dndev-sheet-content[data-side='top'] > .dndev-sheet-drag-handle {
  margin-top: max(var(--gap-sm), env(safe-area-inset-top));
  margin-bottom: 0;
}

/* HEADER - Pinned, No Padding (Tight Layout) */

/* Industry standard: Title always on start, X always on end (consistent across all sides) */

.dndev-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  flex-shrink: 0;
  /* Never shrink */
  min-height: var(--touch-target);
  /* No padding - tight layout: [ Title               X ] */
  padding-block: 0;
  /* RTL-aware: padding on logical start only */
  padding-inline-start: var(--gap-md);
  padding-inline-end: 0; /* X button has its own spacing */
  border-bottom: var(--border-hairline) solid var(--line-1);
  /* Separator */

  /* Thumb Ergonomics: Top Safe Area (only for top sheets) */
}

.dndev-sheet-content[data-side='top'] .dndev-sheet-header {
    padding-top: max(0, env(safe-area-inset-top));
  }

/* Adjust header padding when drag handle is present (sibling selector) */

.dndev-sheet-content[data-side='bottom']
  .dndev-sheet-drag-handle
  ~ .dndev-sheet-header,
.dndev-sheet-content[data-side='top']
  .dndev-sheet-drag-handle
  ~ .dndev-sheet-header {
  padding-top: 0;
}

/* BODY - Scrollable */

.dndev-sheet-body {
  flex: 1;
  /* Consumes available space */
  overflow-y: auto;
  /* Independent scroll */
  overflow-x: hidden;
  padding: var(--gap-md);
  overscroll-behavior: contain;
  /* Prevent body scroll chaining */
}

/* FOOTER - Pinned */

.dndev-sheet-footer {
  flex-shrink: 0;
  /* Never shrink */
  padding: var(--gap-md);
  border-top: var(--border-hairline) solid var(--line-1);
  /* Separator */
  display: flex;
  flex-direction: column-reverse;
  /* Mobile-first stacking */
  gap: var(--gap-sm);

  /* Desktop: Row layout */
}

@media (width >=640px) {

.dndev-sheet-footer {
    flex-direction: row;
    justify-content: flex-end;
}
  }

.dndev-sheet-footer {

  /* Thumb Ergonomics: Bottom Safe Area (Home Indicator) */
  padding-bottom: max(var(--gap-md), env(safe-area-inset-bottom));
}

.dndev-sheet-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
}

.dndev-sheet-close {
  /* Position relative - flex handles alignment */
  position: relative;
  margin-inline-start: auto;
  /* Push to end (RTL-aware: end = right in LTR, left in RTL) */
  margin-inline-end: var(--gap-sm);
  /* Spacing from edge - use margin not padding to keep icon centered */
  opacity: var(--opacity-muted);
}

.dndev-sheet-close:hover {
    opacity: 1;
  }

/* ===========================
   ANIMATIONS (Motion Physics)
   =========================== */

/* Slide In/Out Keyframes - Context Aware */

@keyframes sheet-slide-in {
  from {
    opacity: 0;
    transform: var(--slide-enter-transform);
  }

  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes sheet-slide-out {
  from {
    opacity: 1;
    transform: translate(0, 0);
  }

  to {
    opacity: 0;
    transform: var(--slide-exit-transform);
  }
}

/* Define Transforms based on Side */

.dndev-sheet-content[data-side='right'] {
  --slide-enter-transform: translateX(100%);
  --slide-exit-transform: translateX(100%);
}

.dndev-sheet-content[data-side='left'] {
  --slide-enter-transform: translateX(-100%);
  --slide-exit-transform: translateX(-100%);
}

.dndev-sheet-content[data-side='bottom'] {
  --slide-enter-transform: translateY(100%);
  --slide-exit-transform: translateY(100%);
}

.dndev-sheet-content[data-side='top'] {
  --slide-enter-transform: translateY(-100%);
  --slide-exit-transform: translateY(-100%);
}

/* packages/components/src/atomic/Skeleton/Skeleton.css */

.dndev-skeleton {
  background-color: var(--muted);
}

.dndev-skeleton-pulse {
  animation: dndev-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes dndev-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: var(--opacity-muted);
  }
}

.dndev-skeleton-wave {
  background: linear-gradient(
    90deg,
    var(--muted) 0%,
    var(--muted-foreground) 50%,
    var(--muted) 100%
  );
  background-size: 200% 100%;
  animation: dndev-wave 1.5s ease-in-out infinite;
}

@keyframes dndev-wave {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.dndev-skeleton-shimmer {
  background: linear-gradient(
    90deg,
    var(--muted) 0%,
    color-mix(in oklab, var(--muted) 80%, var(--foreground) 20%) 50%,
    var(--muted) 100%
  );
  background-size: 200% 100%;
  animation: dndev-shimmer 2s ease-in-out infinite;
}

@keyframes dndev-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* packages/components/src/atomic/SkipLink/SkipLink.css */

.dndev-skip-links {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--gap-sm);
  pointer-events: none;
}

.dndev-skip-link {
  /* Off-screen by default — still in focus order */
  position: absolute;
  transform: translateY(-200%);
  opacity: 0;
  pointer-events: none;

  /* Visual style when visible */
  display: inline-flex;
  align-items: center;
  padding: var(--gap-sm) var(--gap-md);
  background: var(--foreground);
  color: var(--background);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-interactive);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-xl);

  /* Smooth appearance transition */
  transition:
    transform var(--dur-normal) var(--ease-in-out),
    opacity var(--dur-normal) var(--ease-in-out);
}

/* Visible on focus */

.dndev-skip-link:focus {
  position: relative;
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* packages/components/src/atomic/Slider/Slider.css */

.dndev-slider {
  position: relative;
  display: flex;
  width: 100%;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  /* Ensure stops/marks are positioned relative to root */
  isolation: isolate;
}

.dndev-slider-track {
  position: relative;
  width: 100%;
  flex-grow: 1;
  overflow: hidden;
  border-radius: var(--radius-full);
  background-color: var(--muted);
  height: 0.375rem;
}

.dndev-slider-range {
  position: absolute;
  height: 100%;
  border-radius: var(--radius-full);
  transition: all var(--dur-normal) var(--ease-in-out);
  background-color: var(--primary);
}

.dndev-slider[data-variant='default'] .dndev-slider-range {
  background-color: var(--primary);
}

.dndev-slider[data-variant='primary'] .dndev-slider-range {
  background-color: var(--primary);
}

.dndev-slider[data-variant='secondary'] .dndev-slider-range {
  background-color: var(--secondary);
}

.dndev-slider[data-variant='muted'] .dndev-slider-range {
  background-color: var(--muted-foreground);
}

.dndev-slider[data-variant='accent'] .dndev-slider-range {
  background-color: var(--accent);
}

.dndev-slider[data-variant='success'] .dndev-slider-range {
  background-color: var(--success);
}

.dndev-slider[data-variant='warning'] .dndev-slider-range {
  background-color: var(--warning);
}

.dndev-slider[data-variant='destructive'] .dndev-slider-range {
  background-color: var(--destructive);
}

.dndev-slider-thumb {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  border-radius: var(--radius-full);
  /* --card not --background: surface must be opaque (--background can be transparent in some themes) */
  background-color: var(--card);
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-md);
  transition: all var(--dur-fast) var(--ease-in-out);
  cursor: grab;
  touch-action: none;
}

.dndev-slider-thumb:hover {
  box-shadow: var(--shadow-lg);
  transform: scale(1.1);
}

.dndev-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
}

.dndev-slider[data-variant='default'] .dndev-slider-thumb,
.dndev-slider[data-variant='primary'] .dndev-slider-thumb {
  border-color: var(--primary);
}

.dndev-slider[data-variant='secondary'] .dndev-slider-thumb {
  border-color: var(--secondary);
}

.dndev-slider[data-variant='muted'] .dndev-slider-thumb {
  border-color: var(--muted-foreground);
}

.dndev-slider[data-variant='accent'] .dndev-slider-thumb {
  border-color: var(--accent);
}

.dndev-slider[data-variant='success'] .dndev-slider-thumb {
  border-color: var(--success);
}

.dndev-slider[data-variant='warning'] .dndev-slider-thumb {
  border-color: var(--warning);
}

.dndev-slider[data-variant='destructive'] .dndev-slider-thumb {
  border-color: var(--destructive);
}

.dndev-slider-thumb:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--ring),
    0 0 0 4px rgb(from var(--ring) r g b / 0.2),
    var(--shadow-md);
}

/* Container for slider + value */

.dndev-slider-container {
  width: 100%;
}

/* Value display inside thumb */

.dndev-slider-value {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--foreground);
  /* --card not --background: surface must be opaque */
  background-color: var(--card);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-interactive);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  pointer-events: none;
}

/* packages/components/src/atomic/Spinner/Spinner.css */

/**
 * Spinner Component Styles
 *
 * Natural sizing - spinner inherits from parent context (1em = parent font-size)
 * Overlay variant fixed at touch-target size for visibility
 */

/* Base spinner - natural sizing (inherits from parent) */

.dndev-spinner {
  width: 1em;
  height: 1em;
  border: 2px solid transparent;
  border-top-color: var(--primary);
  border-inline-end-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}

/* Color variants - uses THEME_VARIANT */

.dndev-spinner[data-variant='default'] {
  border-top-color: var(--foreground);
  border-inline-end-color: var(--foreground);
}

.dndev-spinner[data-variant='muted'] {
  border-top-color: var(--muted-foreground);
  border-inline-end-color: var(--muted-foreground);
}

.dndev-spinner[data-variant='primary'] {
  border-top-color: var(--primary);
  border-inline-end-color: var(--primary);
}

.dndev-spinner[data-variant='secondary'] {
  border-top-color: var(--secondary);
  border-inline-end-color: var(--secondary);
}

.dndev-spinner[data-variant='accent'] {
  border-top-color: var(--accent);
  border-inline-end-color: var(--accent);
}

.dndev-spinner[data-variant='success'] {
  border-top-color: var(--success);
  border-inline-end-color: var(--success);
}

.dndev-spinner[data-variant='warning'] {
  border-top-color: var(--warning);
  border-inline-end-color: var(--warning);
}

.dndev-spinner[data-variant='destructive'] {
  border-top-color: var(--destructive);
  border-inline-end-color: var(--destructive);
}

/* Overlay variant - full-page loading */

.dndev-spinner-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(from var(--background) r g b / 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-overlay, 9999);
  transition: opacity var(--dur-normal, 0.2s) var(--ease-in-out, ease-in-out);
}

/* Overlay spinner uses fixed touch-target size */

.dndev-spinner-overlay .dndev-spinner {
  width: var(--icon-touch, 48px);
  height: var(--icon-touch, 48px);
  border-width: 3px;
}

/* Container overlay - scoped to parent (position: relative) */

.dndev-spinner-overlay--container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(from var(--background) r g b / 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-overlay, 9999);
  transition: opacity var(--dur-normal, 0.2s) var(--ease-in-out, ease-in-out);
}

.dndev-spinner-overlay--container .dndev-spinner {
  width: var(--icon-lg, 32px);
  height: var(--icon-lg, 32px);
  border-width: 3px;
}

/* Spinner content wrapper (spinner + message) */

.dndev-spinner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-md, 12px);
}

/* Message text below spinner */

.dndev-spinner-message {
  color: var(--muted-foreground);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 500;
}

/* Spinner animation */

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

/* packages/components/src/atomic/Stack/Stack.css */

/*
 * STACK COMPONENT
 * Flexible layout container for 1D layouts
 */

.dndev-stack {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.dndev-stack[data-width='fit'] {
    width: -moz-fit-content;
    width: fit-content;
  }

.dndev-stack[data-width='auto'] {
    width: auto;
  }

.dndev-stack[data-centered='true'] {
    margin-inline: auto;
  }

/* Higher specificity to ensure row direction takes precedence */

.dndev-stack[data-direction='row'],div.dndev-stack[data-direction='row'] {
    flex-direction: row;
  }

.dndev-stack[data-direction='row-reverse'] {
    flex-direction: row-reverse;
  }

.dndev-stack[data-direction='column-reverse'] {
    flex-direction: column-reverse;
  }

.dndev-stack[data-wrap='wrap'] {
    flex-wrap: wrap;
  }

.dndev-stack[data-wrap='nowrap'] {
    flex-wrap: nowrap;
  }

.dndev-stack[data-wrap='wrap-reverse'] {
    flex-wrap: wrap-reverse;
  }

/* Alignment */

.dndev-stack[data-align='start'] {
    align-items: flex-start;
  }

.dndev-stack[data-align='center'] {
    align-items: center;
  }

.dndev-stack[data-align='end'] {
    align-items: flex-end;
  }

.dndev-stack[data-align='stretch'] {
    align-items: stretch;
  }

.dndev-stack[data-align='baseline'] {
    align-items: baseline;
  }

/* Justification */

.dndev-stack[data-justify='start'] {
    justify-content: flex-start;
  }

.dndev-stack[data-justify='center'] {
    justify-content: center;
  }

.dndev-stack[data-justify='end'] {
    justify-content: flex-end;
  }

.dndev-stack[data-justify='between'] {
    justify-content: space-between;
  }

.dndev-stack[data-justify='around'] {
    justify-content: space-around;
  }

.dndev-stack[data-justify='evenly'] {
    justify-content: space-evenly;
  }

/* Spacing from CSS variables */

.dndev-stack[data-gap='none'] {
    gap: var(--gap-none);
  }

.dndev-stack[data-gap='tight'] {
    gap: var(--gap-sm);
  }

.dndev-stack[data-gap='medium'] {
    gap: var(--gap-md);
  }

.dndev-stack[data-gap='large'] {
    gap: var(--gap-lg);
  }

/* Row direction: allow children to shrink (required for flexbox to work properly) */

.dndev-stack[data-direction='row'] > * {
    min-width: 0;
  }

/* Default: hide overflow when nowrap (prevents wrapping) */

.dndev-stack[data-direction='row'][data-wrap='nowrap']:not([data-overflow]) > * {
    overflow: hidden;
  }

/* Default: show overflow when wrap is enabled (allows wrapping) */

.dndev-stack[data-direction='row'][data-wrap='wrap']:not([data-overflow]) > *,.dndev-stack[data-direction='row'][data-wrap='wrap-reverse']:not([data-overflow]) > * {
    overflow: visible;
  }

/* Override overflow when explicitly set via prop */

.dndev-stack[data-direction='row'][data-overflow='hidden'] > * {
    overflow: hidden;
  }

.dndev-stack[data-direction='row'][data-overflow='visible'] > * {
    overflow: visible;
  }

.dndev-stack[data-direction='row'][data-overflow='auto'] > * {
    overflow: auto;
  }

.dndev-stack[data-direction='row'][data-overflow='scroll'] > * {
    overflow: scroll;
  }

/* Rigid: prevent children from shrinking */

.dndev-stack[data-rigid='true'] > * {
    flex-shrink: 0;
  }

/* Nowrap: prevent text wrapping in children */

.dndev-stack[data-nowrap='true'] > * {
    white-space: nowrap;
  }

/* Force: children respect parent alignment (override align-self) */

.dndev-stack[data-force='true'] > * {
    align-self: inherit !important;
  }

/* Text alignment */

.dndev-stack[data-text-align='start'] {
    text-align: start;
  }

.dndev-stack[data-text-align='center'] {
    text-align: center;
  }

.dndev-stack[data-text-align='end'] {
    text-align: end;
  }

/* packages/components/src/atomic/Stepper/Stepper.css */

.dndev-stepper-container:focus,.dndev-stepper-container:focus-visible {
    outline: none;
  }

.dndev-stepper-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  flex-wrap: wrap;
}

.dndev-stepper-nav-item {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.dndev-interactive[data-role='stepper-button'],
.dndev-interactive[data-role='stepper-button']:focus,
.dndev-interactive[data-role='stepper-button']:focus-visible {
  outline: none;
}

.dndev-interactive[data-role='stepper-button'] {
  width: var(--touch-target);
  height: var(--touch-target);
  padding: 0;
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  border-width: 2px;
  border-style: solid;
}

.dndev-interactive[data-role='stepper-button'][data-state='active'] {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
    transform: scale(1.1);
  }

.dndev-interactive[data-role='stepper-button'][data-state='completed'] {
    background-color: rgb(from var(--primary) r g b / 0.2);
    color: var(--primary);
    border-color: rgb(from var(--primary) r g b / 0.5);
  }

.dndev-interactive[data-role='stepper-button'][data-state='completed']:hover {
      background-color: rgb(from var(--primary) r g b / 0.3);
    }

.dndev-interactive[data-role='stepper-button'][data-state='pending'] {
    background-color: var(--muted);
    color: var(--muted-foreground);
    border-color: var(--border);
  }

.dndev-interactive[data-role='stepper-button'][data-state='pending']:hover {
      background-color: rgb(from var(--muted) r g b / 0.8);
    }

.dndev-stepper-connector {
  width: 2rem;
  height: 1px;
  transition-property: background-color;
  transition-timing-function: var(--ease-in-out);
  transition-duration: var(--dur-fast);
}

.dndev-stepper-connector[data-completed='true'] {
    background-color: var(--primary);
  }

.dndev-stepper-connector[data-completed='false'] {
    background-color: var(--border);
  }

.dndev-stepper-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  margin-top: var(--gap-md);
}

.dndev-stepper-info {
  font-size: var(--font-size-sm);
  color: inherit;
}

.dndev-stepper-card-content {
  border-width: 2px;
}

.dndev-stepper-button-min-width {
  min-width: var(--touch-target);
}

/* packages/components/src/atomic/Switch/Switch.css */

.dndev-switch {
  all: unset;
  width: 2.75rem;
  height: 1.5rem;
  background-color: var(--control-bg);
  border: 2px solid var(--control-border);
  border-radius: 9999px;
  position: relative;
  cursor: pointer;
  transition: all var(--dur-normal) var(--ease-in-out);
}

.dndev-switch[data-state='checked'] {
    background-color: var(--control-border);
  }

/* Variants - use .dndev-control system */

.dndev-switch[data-variant='primary'] {
    --control-border: var(--primary);
  }

.dndev-switch[data-variant='secondary'] {
    --control-border: var(--secondary);
  }

.dndev-switch[data-variant='muted'] {
    --control-border: var(--muted-foreground);
  }

.dndev-switch[data-variant='accent'] {
    --control-border: var(--accent);
  }

.dndev-switch[data-variant='success'] {
    --control-border: var(--success);
  }

.dndev-switch[data-variant='warning'] {
    --control-border: var(--warning);
  }

.dndev-switch[data-variant='destructive'] {
    --control-border: var(--destructive);
  }

.dndev-switch[data-variant='default'] {
    --control-border: color-mix(
      in oklab,
      var(--foreground) 70%,
      var(--background)
    );
  }

.dndev-switch:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

.dndev-switch:disabled {
    cursor: not-allowed;
    opacity: var(--opacity-muted);
  }

.dndev-switch-thumb {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--foreground);
  border-radius: 9999px;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-normal) var(--ease-in-out);
  transform: translateX(0.125rem);
  will-change: transform;
}

.dndev-switch[data-state='checked'] .dndev-switch-thumb {
  transform: translateX(calc(2.75rem - 1.25rem - 0.125rem));
}

/* Switch with labels container */

.dndev-switch-with-labels {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sm);
  flex-wrap: wrap;
}

/* Labels - keep switch and its labels on one line when possible */

.dndev-switch-with-labels > .dndev-switch {
  flex-shrink: 0;
}

.dndev-switch-label {
  font-size: var(--font-size-sm);
  transition:
    color var(--dur-normal) var(--ease-in-out),
    font-weight var(--dur-normal) var(--ease-in-out);
  white-space: nowrap;
}

/* Unchecked label - active when switch is unchecked */

.dndev-switch-with-labels:not(:has(.dndev-switch[data-state='checked']))
  .dndev-switch-label-unchecked,
.dndev-switch-with-labels[data-checked='false'] .dndev-switch-label-unchecked {
  color: var(--foreground);
  font-weight: var(--font-weight-medium);
}

.dndev-switch-with-labels:has(.dndev-switch[data-state='checked'])
  .dndev-switch-label-unchecked,
.dndev-switch-with-labels[data-checked='true'] .dndev-switch-label-unchecked {
  color: var(--muted-foreground);
  font-weight: var(--font-weight-normal);
}

/* Checked label - active when switch is checked */

.dndev-switch-with-labels:has(.dndev-switch[data-state='checked'])
  .dndev-switch-label-checked,
.dndev-switch-with-labels[data-checked='true'] .dndev-switch-label-checked {
  color: var(--foreground);
  font-weight: var(--font-weight-medium);
}

.dndev-switch-with-labels:not(:has(.dndev-switch[data-state='checked']))
  .dndev-switch-label-checked,
.dndev-switch-with-labels[data-checked='false'] .dndev-switch-label-checked {
  color: var(--muted-foreground);
  font-weight: var(--font-weight-normal);
}

/* packages/components/src/atomic/Table/Table.css */

.dndev-table-wrapper {
  position: relative;
  width: 100%;
  overflow-y: auto;
  border-radius: 0;
  border: 1px solid var(--border);
}

.dndev-table {
  width: 100%;
  caption-side: bottom;
  font-size: var(--font-size-sm);
  border-collapse: collapse;
}

.dndev-table-header {
  background-color: var(--accent);
}

/* Filter row above header */

.dndev-table-filter-row {
  border: 1px solid var(--border);
  border-bottom: none;
}

.dndev-table-filter-row .dndev-table-head {
  background-color: var(--muted);
  padding: var(--gap-xs);
  height: auto;
  min-height: auto;
}

.dndev-table-body {
  /* Base body styles */
}

/* Table row styles */

.dndev-table-row {
  border-bottom: 1px solid var(--border);
  transition: background-color var(--dur-fast) ease-out;
}

.dndev-table-row:hover {
    background-color: color-mix(in oklab, var(--accent) 15%, transparent);
  }

/* Cursor pointer for clickable rows */

.dndev-table-row.dndev-cursor-pointer {
  cursor: pointer;
}

/* Zebra striping for data tables */

.dndev-table-body .dndev-table-row:nth-child(even) {
  background-color: var(--muted);
}

:is(.dndev-table-body .dndev-table-row:nth-child(even)):hover {
    background-color: color-mix(
      in oklab,
      var(--muted) 80%,
      var(--foreground) 20%
    );
  }

.dndev-table-body tr:last-child {
  border-bottom: 0;
}

/* Table footer styles */

.dndev-table-footer {
  border-top: 1px solid var(--border);
  background-color: color-mix(in srgb, var(--muted) 50%, transparent);
  font-weight: var(--font-weight-medium);
}

/* Table head (th) styles */

.dndev-table-head {
  text-align: start;
  vertical-align: middle;
  font-weight: var(--font-weight-medium);
  color: var(--muted-foreground);
  height: var(--touch-target);
  padding-inline: var(--gap-md);
  padding-block: var(--gap-sm);
}

/* Header cells use accent foreground for contrast */

.dndev-table-header .dndev-table-head {
  color: var(--accent-foreground);
}

[data-sortable='true']:is(.dndev-table-header .dndev-table-head) {
    cursor: pointer;
  }

[data-align='center']:is(.dndev-table-header .dndev-table-head) {
    text-align: center;
  }

[data-align='end']:is(.dndev-table-header .dndev-table-head) {
    text-align: end;
  }

[data-align='start']:is(.dndev-table-header .dndev-table-head) {
    text-align: start;
  }

/* Active filter indicator */

.dndev-table-filter-active {
  color: var(--primary);
}

/* Table cell (td) styles */

.dndev-table-cell {
  vertical-align: middle;
  padding-inline: var(--gap-md);
  padding-block: var(--gap-sm);
  min-height: var(--touch-target);
  line-height: 1.5; /* Ensure consistent line height for empty cells */
}

.dndev-table-cell[data-align='center'] {
    text-align: center;
  }

.dndev-table-cell[data-align='end'] {
    text-align: end;
  }

.dndev-table-cell[data-align='start'] {
    text-align: start;
  }

/* Excel-like grid lines variant */

.dndev-table-grid .dndev-table-head,
.dndev-table-grid .dndev-table-cell {
  border: 1px solid var(--border);
  padding: 0;
}

.dndev-table-grid .dndev-table-row {
  border-bottom: 1px solid var(--border);
}

.dndev-table-grid .dndev-table-row:last-child {
  border-bottom: 1px solid var(--border);
}

/* Input components inside grid cells should be borderless and fit snugly */

.dndev-table-grid .dndev-table-cell .dndev-input,
.dndev-table-grid .dndev-table-cell input[type='text'],
.dndev-table-grid .dndev-table-cell input[type='number'] {
  border: none;
  background: transparent;
  width: 100%;
  height: 100%;
  box-shadow: none;
}

.dndev-table-grid .dndev-table-cell .dndev-input:focus,
.dndev-table-grid .dndev-table-cell input:focus {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* Table caption styles */

.dndev-table-caption {
  font-size: var(--font-size-sm);
  color: var(--muted-foreground);
  padding: var(--gap-md);
}

/* DataTable search container */

.dndev-table-search-container {
  max-width: var(--content-narrow);
}

.dndev-table-search-icon {
  position: absolute;
  inset-inline-start: var(--gap-md);
  top: 50%;
  transform: translateY(-50%);
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--muted-foreground);
  pointer-events: none;
  z-index: 1;
}

.dndev-table-search-input {
  padding-inline-start: calc(var(--gap-md) + var(--icon-md) + var(--gap-sm));
}

/* Skeleton rows - apply standard skeleton pulse animation to entire rows */

/* Keep existing background colors (zebra striping) - just add opacity pulse */

.dndev-table-body .dndev-table-row.dndev-skeleton-row {
  animation: dndev-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;

  /* Keep hover state but disabled (pointer-events: none prevents hover) */
}

:is(.dndev-table-body .dndev-table-row.dndev-skeleton-row):hover {
    /* Inherit from parent .dndev-table-row hover styles */
  }

/* Even rows keep their var(--muted) background, just pulse */

.dndev-table-body .dndev-table-row.dndev-skeleton-row:nth-child(even) {
  animation: dndev-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

:is(.dndev-table-body .dndev-table-row.dndev-skeleton-row:nth-child(even)):hover {
    /* Inherit from parent .dndev-table-row:nth-child(even) hover styles */
  }

/* Skeleton bars inside cells - adapt to row background for visibility */

/* Odd rows (transparent background): use default var(--muted) skeleton */

/* Even rows (var(--muted) background): use lighter skeleton for contrast */

.dndev-table-body .dndev-table-row.dndev-skeleton-row .dndev-skeleton {
  background-color: var(--muted);
}

.dndev-table-body
  .dndev-table-row.dndev-skeleton-row:nth-child(even)
  .dndev-skeleton {
  /* Even rows have var(--muted) background, so skeleton should be lighter for contrast */
  background-color: color-mix(
    in oklab,
    var(--muted) 60%,
    var(--foreground) 40%
  );
}

/* Use the same pulse animation as standard skeleton (from Skeleton.css) */

@keyframes dndev-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: var(--opacity-muted);
  }
}

/* packages/components/src/atomic/Tabs/Tabs.css */

/* Tabs list: use flexbox for natural wrapping, not grid */

.dndev-grid-component[role='tablist'] {
  display: flex !important;
  flex-wrap: wrap;
  width: 100%;
  gap: var(--gap-sm);
}

/* Tab trigger - flexbox sizing */

.dndev-interactive[data-role='tab-trigger'] {
  flex: 1 1 auto; /* Grow to fill, shrink to content, wrap naturally */
  min-width: -moz-max-content;
  min-width: max-content; /* Don't shrink below content */
  font-size: var(--font-size-base);
  word-break: break-word;
  border: var(--border-hairline) solid var(--line-2); /* Show clickable area */

  /* Fallback (no variant): inactive = primary, active = foreground/card */
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.dndev-interactive[data-role='tab-trigger'][data-state='active'] {
    /* --card not --background: active tab surface must be opaque (--background can be transparent in some themes) */
    background-color: var(--card);
    color: var(--foreground);
    box-shadow: var(--shadow-sm);
    border-color: var(--primary);
  }

/* Default/Primary variant: inactive = primary, active = foreground/card */

.dndev-interactive[data-role='tab-trigger'][data-variant='default'],.dndev-interactive[data-role='tab-trigger'][data-variant='primary'] {
    background-color: var(--primary);
    color: var(--primary-foreground);
  }

[data-state='active']:is(.dndev-interactive[data-role='tab-trigger'][data-variant='default'],.dndev-interactive[data-role='tab-trigger'][data-variant='primary']) {
      /* --card not --background: active tab surface must be opaque */
      background-color: var(--card);
      color: var(--foreground);
      box-shadow: var(--shadow-sm);
      border-color: var(--primary);
    }

/* Secondary variant: inactive = secondary, active = foreground/card */

.dndev-interactive[data-role='tab-trigger'][data-variant='secondary'] {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
  }

.dndev-interactive[data-role='tab-trigger'][data-variant='secondary'][data-state='active'] {
      /* --card not --background: active tab surface must be opaque */
      background-color: var(--card);
      color: var(--foreground);
      box-shadow: var(--shadow-sm);
      border-color: var(--secondary);
    }

/* Accent variant: inactive = accent, active = foreground/card */

.dndev-interactive[data-role='tab-trigger'][data-variant='accent'] {
    background-color: var(--accent);
    color: var(--accent-foreground);
  }

.dndev-interactive[data-role='tab-trigger'][data-variant='accent'][data-state='active'] {
      /* --card not --background: active tab surface must be opaque */
      background-color: var(--card);
      color: var(--foreground);
      box-shadow: var(--shadow-sm);
      border-color: var(--accent);
    }

/* Muted variant: inactive = muted, active = primary (to contrast) */

.dndev-interactive[data-role='tab-trigger'][data-variant='muted'] {
    background-color: var(--muted);
    color: var(--muted-foreground);
  }

.dndev-interactive[data-role='tab-trigger'][data-variant='muted'][data-state='active'] {
      background-color: var(--primary);
      color: var(--primary-foreground);
      box-shadow: var(--shadow-sm);
      border-color: var(--primary);
    }

/* Warning variant: inactive = warning, active = foreground/card */

.dndev-interactive[data-role='tab-trigger'][data-variant='warning'] {
    background-color: var(--warning);
    color: var(--warning-foreground);
  }

.dndev-interactive[data-role='tab-trigger'][data-variant='warning'][data-state='active'] {
      /* --card not --background: active tab surface must be opaque */
      background-color: var(--card);
      color: var(--foreground);
      box-shadow: var(--shadow-sm);
      border-color: var(--warning);
    }

/* Success variant: inactive = success, active = foreground/card */

.dndev-interactive[data-role='tab-trigger'][data-variant='success'] {
    background-color: var(--success);
    color: var(--success-foreground);
  }

.dndev-interactive[data-role='tab-trigger'][data-variant='success'][data-state='active'] {
      /* --card not --background: active tab surface must be opaque */
      background-color: var(--card);
      color: var(--foreground);
      box-shadow: var(--shadow-sm);
      border-color: var(--success);
    }

/* Destructive variant: inactive = destructive, active = foreground/card */

.dndev-interactive[data-role='tab-trigger'][data-variant='destructive'] {
    background-color: var(--destructive);
    color: var(--destructive-foreground);
  }

.dndev-interactive[data-role='tab-trigger'][data-variant='destructive'][data-state='active'] {
      /* --card not --background: active tab surface must be opaque */
      background-color: var(--card);
      color: var(--foreground);
      box-shadow: var(--shadow-sm);
      border-color: var(--destructive);
    }

.dndev-tabs-content {
  margin-top: var(--gap-md);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dndev-tabs-content:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
  }

.dndev-tabs-content[data-state='inactive'] {
    display: none;
  }

/* packages/components/src/atomic/Tag/Tag.css */

.dndev-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sm);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-in-out);

  /* Default variant */
  background-color: var(--secondary);
  color: var(--secondary-foreground);
}

.dndev-tag .dndev-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-inline-start: 2px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    transition: opacity var(--dur-fast);
  }

:is(.dndev-tag .dndev-tag-remove):hover {
      opacity: 1;
      background-color: rgba(0, 0, 0, 0.1);
    }

:is(.dndev-tag .dndev-tag-remove):focus-visible {
      outline: 2px solid var(--ring);
    }

.dndev-tag .dndev-tag-remove-icon {
    width: 10px;
    height: 10px;
  }

/* Sizes */

.dndev-tag-sm {
  padding: 0.125rem 0.5rem;
  font-size: var(--font-size-xs);
  height: 20px;
}

.dndev-tag-md {
  padding: 0.25rem 0.75rem;
  font-size: var(--font-size-sm);
  height: 24px;
}

.dndev-tag-lg {
  padding: 0.375rem 0.875rem;
  font-size: var(--font-size-base);
  height: 32px;
}

/* Variants */

.dndev-tag-outline {
  background-color: transparent;
  border-color: var(--border);
  color: var(--foreground);
}

.dndev-tag-accent {
  background-color: var(--accent);
  color: var(--accent-foreground);
  border-color: transparent;
}

/* Interactive States */

.dndev-tag-interactive {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.dndev-tag-interactive:hover {
    opacity: 0.8;
  }

.dndev-tag-interactive:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

.dndev-tag-disabled {
  pointer-events: none;
  opacity: 0.5;
}

.dndev-tag-sm .dndev-tag-remove-icon {
    width: 8px;
    height: 8px;
  }

.dndev-tag-lg .dndev-tag-remove-icon {
    width: 12px;
    height: 12px;
  }

/* packages/components/src/atomic/Text/Text.css */

.dndev-text-base[data-text-align='start'] {
  text-align: start;
}

.dndev-text-base[data-text-align='center'] {
  text-align: center;
}

.dndev-text-base[data-text-align='end'] {
  text-align: end;
}

.dndev-text-base {
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height);
  background-color: transparent; /* Text never has background, only color changes */

  /* Respect semantic HTML elements */
}

.dndev-text-base:is(strong) {
    font-weight: var(--font-weight-semibold);
  }

.dndev-text-base:is(em) {
    font-style: italic;
  }

.dndev-text-base[data-variant='default'] {
    color: inherit;
  }

.dndev-text-base[data-variant='muted'] {
    color: var(--muted-foreground);
  }

.dndev-text-base[data-variant='primary'] {
    color: var(--primary);
  }

.dndev-text-base[data-variant='secondary'] {
    color: var(--secondary);
  }

.dndev-text-base[data-variant='accent'] {
    color: var(--accent);
  }

.dndev-text-base[data-variant='success'] {
    color: var(--success);
  }

.dndev-text-base[data-variant='warning'] {
    color: var(--warning);
  }

.dndev-text-base[data-variant='destructive'] {
    color: var(--destructive);
  }

.dndev-text-base[data-variant='code'] {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--muted);
    padding: 0.1em 0.4em;
    border-radius: var(--radius-interactive);
  }

/* Level overrides — headline font for all heading levels */

.dndev-text-base[data-level^='h'] {
    font-family: var(--font-headline);
  }

.dndev-text-base[data-level='h1'] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
  }

.dndev-text-base[data-level='h2'] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
  }

.dndev-text-base[data-level='h3'] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
  }

.dndev-text-base[data-level='h4'] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
  }

.dndev-text-base[data-level='body'] {
    font-size: var(--font-size-base);
  }

.dndev-text-base[data-level='small'] {
    font-size: var(--font-size-sm);
  }

.dndev-text-base[data-level='caption'] {
    font-size: var(--font-size-sm);
  }

/* Font weight overrides (after level rules, so weight prop overrides level defaults) */

.dndev-text-base[data-font-weight='normal'] {
    font-weight: var(--font-weight-normal);
  }

.dndev-text-base[data-font-weight='medium'] {
    font-weight: var(--font-weight-medium);
  }

.dndev-text-base[data-font-weight='semibold'] {
    font-weight: var(--font-weight-semibold);
  }

.dndev-text-base[data-font-weight='bold'] {
    font-weight: var(--font-weight-bold);
  }

.dndev-text-base[data-italic] {
    font-style: italic;
  }

/* packages/components/src/atomic/Toaster/Toaster.css */

.dndev-toast-viewport {
  position: fixed;
  top: var(--gap-md);
  z-index: 100;
  display: flex;
  flex-direction: column-reverse;
  max-height: 100dvh;
  width: 100%;
  padding: var(--gap-md);

  /* Hide when no toasts */
}

.dndev-toast-viewport:not(:has(*)) {
    display: none;
  }

@media (width >= 640px) {

.dndev-toast-viewport {
    bottom: var(--gap-md);
    inset-inline-end: var(--gap-md);
    top: auto;
    flex-direction: column;
    max-width: 420px;
}
  }

.dndev-toast-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.dndev-toast-description {
  font-size: var(--font-size-sm);
  opacity: var(--opacity-strong);
}

.dndev-interactive[data-role='toast-action'] {
  height: 2rem;
  flex-shrink: 0;
  padding-inline-start: var(--gap-md);
  padding-inline-end: var(--gap-md);
  border-radius: var(--radius-interactive);
  border: 1px solid var(--border);
  font-size: var(--font-size-sm);
}

.dndev-interactive[data-role='toast-action']:hover {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
  }

.dndev-toast-close {
  position: absolute;
  inset-inline-end: var(--gap-sm);
  top: var(--gap-sm);
  padding: 0;
  color: var(--muted-foreground);
  transition: color var(--dur-fast) var(--ease-in-out);
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dndev-toast-close:hover {
    color: var(--popover);
  }

/* Toast animations - entry/exit using Radix data-state */

.dndev-notification[data-state='open'] {
  animation: toast-slide-in-mobile var(--dur-normal) var(--ease-heavy);
}

@media (width >= 640px) {
  .dndev-notification[data-state='open'] {
    animation: toast-slide-in-desktop var(--dur-normal) var(--ease-heavy);
  }
}

.dndev-notification[data-state='closed'] {
  animation: toast-fade-out var(--dur-normal) var(--ease-in-out);
}

@keyframes toast-slide-in-mobile {
  from {
    opacity: 0;
    transform: translateY(-100%) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toast-slide-in-desktop {
  from {
    opacity: 0;
    transform: translateX(calc(100% + var(--gap-md))) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toast-fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.96);
  }
}

/* Notification variants are defined in patterns.css (shared by tooltips and toasts) */

/* packages/components/src/atomic/Toggle/Toggle.css */

.dndev-interactive[data-state='off'] {
  background: var(--muted);
  color: var(--muted-foreground);
  border: none;
}

.dndev-interactive[data-state='off']:hover:not(:disabled) {
    background: color-mix(in oklab, var(--muted) 80%, black 20%);
  }

.dndev-interactive[data-state='on'] {
  background: var(--primary);
  color: var(--primary-foreground);
}

.dndev-interactive[data-state='on'][data-variant='default'],.dndev-interactive[data-state='on'][data-variant='primary'] {
    background: var(--primary);
    color: var(--primary-foreground);
  }

.dndev-interactive[data-state='on'][data-variant='secondary'] {
    background: var(--secondary);
    color: var(--secondary-foreground);
  }

.dndev-interactive[data-state='on'][data-variant='muted'] {
    background: var(--muted);
    color: var(--muted-foreground);
  }

.dndev-interactive[data-state='on'][data-variant='accent'] {
    background: var(--accent);
    color: var(--accent-foreground);
  }

.dndev-interactive[data-state='on'][data-variant='success'] {
    background: var(--success);
    color: var(--success-foreground);
  }

.dndev-interactive[data-state='on'][data-variant='warning'] {
    background: var(--warning);
    color: var(--warning-foreground);
  }

.dndev-interactive[data-state='on'][data-variant='destructive'] {
    background: var(--destructive);
    color: var(--destructive-foreground);
  }

.dndev-interactive[data-variant='outline'][data-state='off'] {
  background: transparent;
  color: var(--foreground);
  border: 1px solid var(--border);
}

.dndev-interactive[data-variant='outline'][data-state='off']:hover:not(:disabled) {
    background: var(--primary);
    color: var(--primary-foreground);
  }

.dndev-interactive[data-variant='outline'][data-state='on'] {
  background: var(--primary);
  color: var(--primary-foreground);
  border: 1px solid var(--primary);
}

/* packages/components/src/atomic/ToggleGroup/ToggleGroup.css */

.dndev-toggle-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sm);
  padding: 0.125rem;
  border-radius: var(--radius-interactive);
  background-color: var(--muted);
  border: var(--border-width) solid var(--border);
}

.dndev-toggle-group .dndev-interactive {
    border: none;
    border-radius: var(--radius-interactive);
    background-color: transparent !important;
    min-height: auto;
    padding: var(--gap-sm) var(--gap-md);
    font-size: var(--font-size-sm);
  }

[data-state='off']:is(.dndev-toggle-group .dndev-interactive) {
      background: transparent !important;
      color: var(--muted-foreground) !important;
    }

[data-state='off']:is(.dndev-toggle-group .dndev-interactive):hover:not(:disabled) {
      background-color: color-mix(
        in oklab,
        var(--muted) 80%,
        black 20%
      ) !important;
    }

[data-state='on']:is(.dndev-toggle-group .dndev-interactive) {
      background-color: var(--primary) !important;
      color: var(--primary-foreground) !important;
      box-shadow: var(--shadow-md);
    }

[data-variant='primary'][data-state='on']:is(.dndev-toggle-group .dndev-interactive) {
      background-color: var(--primary);
      color: var(--primary-foreground);
    }

[data-variant='secondary'][data-state='on']:is(.dndev-toggle-group .dndev-interactive) {
      background-color: var(--secondary);
      color: var(--secondary-foreground);
    }

[data-variant='accent'][data-state='on']:is(.dndev-toggle-group .dndev-interactive) {
      background-color: var(--accent);
      color: var(--accent-foreground);
    }

[data-variant='success'][data-state='on']:is(.dndev-toggle-group .dndev-interactive) {
      background-color: var(--success);
      color: var(--success-foreground);
    }

[data-variant='warning'][data-state='on']:is(.dndev-toggle-group .dndev-interactive) {
      background-color: var(--warning);
      color: var(--warning-foreground);
    }

[data-variant='destructive'][data-state='on']:is(.dndev-toggle-group .dndev-interactive) {
      background-color: var(--destructive);
      color: var(--destructive-foreground);
    }

.dndev-toggle-group[data-variant='outline'] {
    background-color: transparent;
    border-color: var(--border);
  }

[data-state='off']:is(.dndev-toggle-group[data-variant='outline'] .dndev-interactive) {
        background: transparent;
        color: var(--foreground);
      }

[data-state='off']:is(.dndev-toggle-group[data-variant='outline'] .dndev-interactive):hover:not(:disabled) {
        background-color: var(--primary);
        color: var(--primary-foreground);
      }

[data-state='on']:is(.dndev-toggle-group[data-variant='outline'] .dndev-interactive) {
        background-color: var(--primary);
        color: var(--primary-foreground);
        border: 1px solid var(--primary);
      }

/* packages/components/src/atomic/Tooltip/Tooltip.css */

.dndev-tooltip {
  z-index: var(--z-tooltip);
  /* Inverted colors for high contrast - industry standard (Vercel, GitHub, Stripe) */
  background: var(--foreground);
  /* --card not --background: inverted text must be opaque (--background can be transparent in some themes) */
  color: var(--card);
  box-shadow: var(--shadow-lg); /* Stronger shadow for visibility */
  padding: 0.375rem 0.5rem; /* 6px 8px - industry standard */
  font-size: var(--font-size-xs); /* 12px */
  border-radius: var(--radius-floating);
  max-width: 12.5rem; /* 200px */
}

/* packages/components/src/atomic/TreeView/TreeView.css */

/* Root tree list */

.dndev-tree {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--font-size-base);
}

/* Child groups */

.dndev-tree [role='group'] {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-inline-start: var(--gap-lg);
}

/* Collapse animation for child groups */

.dndev-tree [role='group'][data-state='open'] {
  animation: dndev-tree-expand var(--dur-normal) var(--ease-in-out);
  overflow: visible;
}

.dndev-tree [role='group'][data-state='closed'] {
  animation: dndev-tree-collapse var(--dur-normal) var(--ease-in-out);
  overflow: hidden;
  display: none;
}

@keyframes dndev-tree-expand {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dndev-tree-collapse {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* Node content row */

.dndev-tree-node-content {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: var(--gap-xs) var(--gap-sm);
  border-radius: var(--radius-interactive);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-in-out),
    color var(--dur-fast) var(--ease-in-out);
  min-height: var(--touch-target);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.dndev-tree-node-content:hover {
  background: var(--muted);
}

/* Selected state */

[role='treeitem'][aria-selected='true'] > .dndev-tree-node-content {
  background: var(--primary);
  color: var(--primary-foreground);
}

[role='treeitem'][aria-selected='true'] > .dndev-tree-node-content:hover {
  background: var(--primary);
  opacity: 0.9;
}

/* Focus ring — keyboard only */

[role='treeitem']:focus-visible > .dndev-tree-node-content {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

[role='treeitem']:focus:not(:focus-visible) > .dndev-tree-node-content {
  outline: none;
}

/* Expand/collapse chevron */

.dndev-tree-node-expand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-md);
  height: var(--icon-md);
  flex-shrink: 0;
  transition: transform var(--dur-normal) var(--ease-in-out);
  color: var(--muted-foreground);
}

[role='treeitem'][aria-expanded='true']
  > .dndev-tree-node-content
  > .dndev-tree-node-expand {
  transform: rotate(90deg);
}

/* Leaf spacer — invisible, maintains alignment */

.dndev-tree-node-expand[data-leaf='true'] {
  visibility: hidden;
}

/* Node icon */

.dndev-tree-node-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: var(--icon-md);
  height: var(--icon-md);
}

/* Node label */

.dndev-tree-node-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Disabled */

[role='treeitem'][aria-disabled='true'] > .dndev-tree-node-content {
  opacity: var(--opacity-muted);
  pointer-events: none;
  cursor: default;
}

/* --- Connector lines (optional) --- */

.dndev-tree[data-show-lines='true'] [role='group'] {
  position: relative;
}

.dndev-tree[data-show-lines='true'] [role='group']::before {
  content: '';
  position: absolute;
  inset-inline-start: calc(var(--icon-md) / 2);
  top: 0;
  bottom: var(--gap-sm);
  border-inline-start: 1px solid var(--border);
  pointer-events: none;
}

.dndev-tree[data-show-lines='true']
  [role='group']
  > [role='treeitem']
  > .dndev-tree-node-content::before {
  content: '';
  position: absolute;
  inset-inline-start: calc(var(--icon-md) / 2 - var(--gap-lg));
  width: var(--gap-sm);
  border-bottom: 1px solid var(--border);
  pointer-events: none;
}

.dndev-tree[data-show-lines='true']
  [role='group']
  > [role='treeitem']
  > .dndev-tree-node-content {
  position: relative;
}

/* packages/components/src/atomic/VideoPlayer/VideoPlayer.css */

/**
 * @fileoverview VideoPlayer component styles
 * @description Styles for video player with modal support for YouTube/Vimeo embeds
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */

/* Container for inline video */

.dndev-video-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Video iframe */

.dndev-video-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Thumbnail button trigger */

.dndev-video-thumbnail {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  display: block;
}

.dndev-video-thumbnail img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }

/* SVG placeholder - zero bytes, instant render */

.dndev-video-placeholder {
  width: 100%;
  height: 100%;
  display: block;
}

/* Play button overlay */

.dndev-video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(from var(--background) r g b / 0.3);
  transition: background var(--dur-normal) var(--ease-in-out);
}

.dndev-video-play-overlay:hover {
    background: rgb(from var(--background) r g b / 0.5);
  }

/* Play icon */

.dndev-video-play-icon {
  width: 4rem;
  height: 4rem;
  color: var(--foreground);
  filter: drop-shadow(0 2px 8px rgb(from var(--background) r g b / 0.5));
}

/* Loading overlay - shown while iframe loads */

.dndev-video-loading-overlay {
  z-index: 1;
}

.dndev-video-loading-overlay .dndev-video-play-overlay {
    background: rgb(from var(--background) r g b / 0.6);
  }

/* Modal dialog wrapper */

.dndev-video-dialog {
  max-width: 90vw;
}

.dndev-video-dialog .dndev-modal-body {
    padding: 0;
    overflow: hidden;
  }

.dndev-video-dialog .dndev-video-frame {
    aspect-ratio: 16/9;
    max-height: calc(90vh - 5rem);
  }

/* packages/components/src/advanced/Crawl/Crawl.css */

/* ===========================
   1. CSS VARIABLES (Fluid - Expressive Density)
   =========================== */

:root {
  /* Animation & 3D Settings */
  --crawl-perspective: 600px;
  --crawl-tilt: 40deg;

  /* Typography - FLUID (No Breakpoints) */
  /* Formula: clamp(min, rem + vw, max) for zoom support */
  --crawl-body-size: clamp(1.6rem, 1rem + 2.5vw, 3rem);
  --crawl-title-size: clamp(3rem, 1.5rem + 6vw, 8rem);
  --crawl-intro-font-size: clamp(2rem, 1rem + 3vw, 4rem);

  /* Spacing */
  --crawl-content-line: 1.2;
  --crawl-body-margin: 0.9em;
  --crawl-title-margin: 3em;

  /* Colors - Hardcoded SW Yellow (not theme colors) */
  --crawl-text-color: #ffc909;
  --crawl-intro-color: #4a9eff;

  /* Effects */
  /* --crawl-text-shadow: 0 0 8px rgba(255, 201, 9, 1), 0 0 16px rgba(255, 201, 9, 0.8); */
  --crawl-text-shadow: 0 0 12px rgba(255, 201, 9, 1);
  --crawl-intro-shadow:
    0 0 30px rgba(74, 158, 255, 0.9), 0 0 60px rgba(74, 158, 255, 0.6),
    0 0 90px rgba(74, 158, 255, 0.4), 0 0 120px rgba(74, 158, 255, 0.2);

  /* Intro Overlay */
  --crawl-intro-duration: 2000ms;
}

/* ===========================
   2. CONTAINER & LAYOUT (Cinematic Breakout)
   =========================== */

.dndev-crawl-container {
  /* 1. Context */
  position: relative;
  background: #000;
  contain: layout style paint;
  perspective: var(--crawl-perspective);
  backface-visibility: hidden;

  /* 2. THE CINEMATIC BREAKOUT (150vw) */
  /* This forces the element to be 1.5x wider than the screen */
  width: 150vw;

  /* 3. The "Dead Center" Lock */
  /* Move start edge to the exact center of parent... */
  inset-inline-start: 50%;
  /* ...then pull back by exactly half of OWN width (75vw) */
  transform: translate3d(-50%, 0, 0);

  /* 4. Reset Constraints */
  margin: 0;
  margin-top: 0 !important; /* Override PageContainer gap - always sit flush with header */
  padding: 0;
  max-width: none; /* Critical: Ignore parent max-width constraints */

  /* 5. Sizing & Safety */
  min-height: calc(100dvh - var(--header-height));
  overflow: hidden; /* Critical: Hides the text as it flies "past" the camera */
}

/* Override PageContainer gap and margin-top for Crawl - always first child */

/* Remove top gap only, keep bottom gap normal */

.dndev-container > .dndev-crawl-container:first-child {
  margin-top: 0 !important;
}

/* Override PageContainer's margin-top when Crawl is first child */

.dndev-container:has(> .dndev-crawl-container:first-child) {
  margin-top: 0 !important;
}

/* ===========================
   3. STAR FIELD BACKGROUND (Canvas)
   =========================== */

.dndev-crawl-stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  contain: layout style paint;
  pointer-events: none;
}

/* Starfield layers using SVG pattern (no canvas, no resize issues) */

.dndev-crawl-stars-layer-1,
.dndev-crawl-stars-layer-2,
.dndev-crawl-stars-layer-3 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='500' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='23' cy='17' r='1' fill='white' opacity='1'/%3E%3Ccircle cx='47' cy='89' r='1' fill='white' opacity='0.8'/%3E%3Ccircle cx='91' cy='43' r='0.5' fill='white' opacity='1'/%3E%3Ccircle cx='131' cy='67' r='1' fill='white' opacity='0.6'/%3E%3Ccircle cx='163' cy='19' r='0.5' fill='%23ddd' opacity='0.8'/%3E%3Ccircle cx='197' cy='73' r='1' fill='white' opacity='1'/%3E%3Ccircle cx='211' cy='41' r='0.5' fill='white' opacity='0.7'/%3E%3Ccircle cx='233' cy='97' r='1' fill='%23eee' opacity='0.9'/%3E%3Ccircle cx='251' cy='13' r='0.5' fill='white' opacity='1'/%3E%3Ccircle cx='277' cy='59' r='1' fill='white' opacity='0.5'/%3E%3Ccircle cx='293' cy='83' r='0.5' fill='%23ddd' opacity='0.8'/%3E%3Ccircle cx='317' cy='31' r='1' fill='white' opacity='1'/%3E%3Ccircle cx='337' cy='71' r='0.5' fill='white' opacity='0.8'/%3E%3Ccircle cx='359' cy='7' r='1' fill='%23eee' opacity='0.9'/%3E%3Ccircle cx='373' cy='53' r='0.5' fill='white' opacity='1'/%3E%3Ccircle cx='389' cy='79' r='1' fill='white' opacity='0.6'/%3E%3Ccircle cx='401' cy='23' r='0.5' fill='%23ddd' opacity='0.8'/%3E%3Ccircle cx='419' cy='61' r='1' fill='white' opacity='1'/%3E%3Ccircle cx='433' cy='37' r='0.5' fill='white' opacity='0.7'/%3E%3Ccircle cx='449' cy='87' r='1' fill='%23eee' opacity='0.9'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
}

.dndev-crawl-stars-layer-1 {
  --layer-base-opacity: 1;
  opacity: 1;
  background-size: 400px 250px;
  animation: dndev-stars-twinkle 4s ease-in-out infinite;
  animation-delay: 0s;
}

.dndev-crawl-stars-layer-2 {
  --layer-base-opacity: 0.7;
  opacity: 0.7;
  background-size: 300px 200px;
  animation: dndev-stars-twinkle 2.5s ease-in-out infinite;
  animation-delay: 1s;
}

.dndev-crawl-stars-layer-3 {
  --layer-base-opacity: 0.5;
  opacity: 0.5;
  background-size: 200px 150px;
  animation: dndev-stars-twinkle 1.8s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes dndev-stars-twinkle {
  0%,
  100% {
    opacity: var(--layer-base-opacity);
  }
  50% {
    opacity: calc(var(--layer-base-opacity) * 1.43);
  }
}

/* ===========================
   4. 3D CONTAINER & TEXT ANIMATION
   =========================== */

.dndev-crawl-3d-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  perspective: var(--crawl-perspective);
  transform-style: preserve-3d;
  contain: layout style;
  backface-visibility: hidden;
  will-change: auto;
}

.dndev-crawl-text {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transform: rotateX(var(--crawl-tilt)) translate3d(0, 0, 0);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  contain: layout style;
}

/* ===========================
   5. TEXT CONTENT STYLES
   Simple: yellow text, big shadows, centered
   =========================== */

.dndev-crawl-content {
  color: var(--crawl-text-color);
  font-size: var(--crawl-body-size);
  line-height: var(--crawl-content-line);
  font-weight: var(--font-weight-bold);
  text-align: center;
  text-shadow: var(--crawl-text-shadow);
  position: relative;
  z-index: 2;
  width: 60%;
  max-width: 60%;
  margin-inline: auto;
  padding: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Title - bigger, same styling */

.dndev-crawl-title,
.dndev-crawl-content h1,
.dndev-crawl-content h2,
.dndev-crawl-content p {
  color: var(--crawl-text-color);
  font-weight: var(--font-weight-bold);
  text-align: center;
  text-shadow: var(--crawl-text-shadow);

  /* Responsive - remove shadows on mobile/tablet for performance */
}

@media (width <= 1023px) {

.dndev-crawl-title,
.dndev-crawl-content h1,
.dndev-crawl-content h2,
.dndev-crawl-content p {
    text-shadow: none;
}
  }

.dndev-crawl-title,
.dndev-crawl-content h1,
.dndev-crawl-content h2 {
  font-size: var(--crawl-title-size);
  margin-bottom: var(--crawl-title-margin);
  padding: 0;
  margin-inline: 0;
}

.dndev-crawl-content p {
  font-size: var(--crawl-body-size);
  margin-bottom: var(--crawl-body-margin);
}

/* Responsive - allow wrapping on mobile */

@media (width >= 1024px) {
  .dndev-crawl-title {
    white-space: nowrap;
  }
}

/* ===========================
   6. INTRO OVERLAY STYLES
   =========================== */

.dndev-crawl-intro {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.8) 100%
  );
}

.dndev-crawl-intro-content {
  color: var(--crawl-intro-color);
  font-size: var(--crawl-intro-font-size);
  font-weight: 900;
  text-align: center;
  text-shadow: var(--crawl-intro-shadow);
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 60%;
  max-width: 60%;
  margin-inline: auto;
  margin-block: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  white-space: normal;
}

.dndev-crawl-intro-mobile {
  animation: dndev-intro-fade-mobile var(--crawl-intro-duration) ease-in-out
    forwards;
}

.dndev-crawl-intro-desktop {
  animation: dndev-intro-fade-desktop calc(var(--crawl-intro-duration) * 2)
    ease-in-out forwards;
}

/* ===========================
   7. ANIMATIONS & KEYFRAMES
   =========================== */

@keyframes dndev-crawl-animation {
  from {
    transform: rotateX(var(--crawl-tilt)) translate3d(0, 100dvh, 0);
  }
  to {
    transform: rotateX(var(--crawl-tilt))
      translate3d(0, calc(-1 * var(--crawl-content-height)), 0);
  }
}

/* ===========================
   8. ACCESSIBILITY & PERFORMANCE
   =========================== */

/* Reduced Motion Preference */

@media (prefers-reduced-motion: reduce) {
  .dndev-crawl-text {
    animation: none !important;
  }

  .dndev-crawl-3d-container {
    transform: rotateX(0deg) translate3d(0, 0, 0) !important;
  }

  .dndev-crawl-content {
    position: static !important;
    transform: none !important;
    animation: none !important;
  }

  .dndev-crawl-intro-mobile,
  .dndev-crawl-intro-desktop {
    animation: none !important;
  }
}

/* High Contrast Preference */

@media (prefers-contrast: high) {
  .dndev-crawl-stars {
    filter: contrast(1.5) brightness(1.2);
  }
}

/* Reduced Motion Class (applied programmatically) */

.dndev-crawl-reduced-motion {
  animation: none !important;
  transform: none !important;
}

.dndev-crawl-reduced-motion .dndev-crawl-content {
    position: static !important;
    transform: none !important;
  }

.dndev-crawl-reduced-motion .dndev-crawl-stars-layer-1,.dndev-crawl-reduced-motion .dndev-crawl-stars-layer-2,.dndev-crawl-reduced-motion .dndev-crawl-stars-layer-3 {
    animation: none !important;
  }

/* packages/components/src/advanced/Marquee/Marquee.css */

/* Marquee track */

[data-marquee-track] {
  will-change: var(--will-change-transform);
  animation: universal-marquee var(--marquee-duration, 0ms)
    var(--marquee-easing, linear) infinite;
  animation-direction: var(--marquee-direction, normal);

  /* Vertical marquee */
}

[data-marquee-track][data-marquee-direction='vertical'] {
    --transform-start: translateY(0);
    --transform-end: translateY(calc(-1 * var(--marquee-distance, 0px)));
  }

/* Bounce behavior */

[data-marquee-track][data-marquee-behavior='bounce'] {
    animation-name: universal-float;
    --transform-start: translateX(0);
    --transform-mid: translateX(calc(-1 * var(--marquee-distance, 0px)));
    --opacity-start: 1;
    --opacity-mid: 1;
  }

/* Accessibility */

@media (prefers-reduced-motion: reduce) {

[data-marquee-track] {
    animation: none !important;
    transform: none !important;
}
  }

.group:hover [data-marquee-track],.group:focus-within [data-marquee-track] {
    animation-play-state: paused;
  }

/* packages/components/src/advanced/Reveal/Reveal.css */

/* Cleanup keyframe — removes will-change after animation completes for GPU memory */

@keyframes dndev-reveal-cleanup {
  to {
    will-change: auto;
  }
}

.dndev-reveal-container {
  /* Performance */
  contain: layout style;
  will-change: contents;
}

.dndev-reveal-container.dndev-reveal-visible .dndev-reveal-item {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    /* Performance cleanup */
    animation: dndev-reveal-cleanup var(--reveal-duration, 0.6s)
      var(--reveal-easing, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
  }

@media (prefers-reduced-motion: reduce) {

.dndev-reveal-container.dndev-reveal-visible .dndev-reveal-item {
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;
      will-change: auto;
  }
    }

.dndev-reveal-item {
  /* Default hidden state */
  opacity: 0;
  transform: translate3d(0, 0, 0);

  /* Performance */
  will-change: transform, opacity;
  backface-visibility: hidden;

  /* Transitions */
  transition:
    opacity var(--reveal-duration, 0.6s)
      var(--reveal-easing, cubic-bezier(0.22, 1, 0.36, 1)),
    transform var(--reveal-duration, 0.6s)
      var(--reveal-easing, cubic-bezier(0.22, 1, 0.36, 1));

  /* Stagger timing */
  transition-delay: var(--reveal-delay, 0ms);

  /* Direction transforms */
}

.dndev-reveal-item[data-direction='left'] {
    transform: translate3d(calc(-1 * var(--reveal-distance, 5vw)), 0, 0);
  }

.dndev-reveal-item[data-direction='right'] {
    transform: translate3d(var(--reveal-distance, 5vw), 0, 0);
  }

.dndev-reveal-item[data-direction='top'] {
    transform: translate3d(0, calc(-1 * var(--reveal-distance, 5vw)), 0);
  }

.dndev-reveal-item[data-direction='bottom'] {
    transform: translate3d(0, var(--reveal-distance, 5vw), 0);
  }

.dndev-reveal-item[data-direction='fade-in'] {
    transform: translate3d(0, 0, 0);
  }

.dndev-reveal-item[data-visible='true'] {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

/* Accessibility */

@media (prefers-reduced-motion: reduce) {

.dndev-reveal-item {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
}
  }

/* packages/components/src/advanced/Roadmap/Roadmap.css */

.dndev-roadmap {
  width: 100%;
  position: relative;
}

/* =========================
   DESKTOP LAYOUT
   ========================= */

.dndev-roadmap-desktop {
  position: relative;
}

/* Progress line container - from center of first icon to center of last icon */

.dndev-roadmap-timeline {
  position: absolute;
  top: calc(var(--touch-target) / 2); /* Center of node */
  inset-inline-start: calc(
    100% / var(--step-count) / 2
  ); /* Center of first grid cell */
  inset-inline-end: calc(
    100% / var(--step-count) / 2
  ); /* Center of last grid cell */
  height: 4px;
  z-index: 0;
}

.dndev-roadmap-timeline-bg {
  position: absolute;
  inset: 0;
  background: var(--muted);
  border-radius: var(--radius-full);
}

.dndev-roadmap-timeline-progress {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  height: 100%;
  background: linear-gradient(
    to right,
    var(--primary),
    var(--accent),
    var(--primary)
  );
  border-radius: var(--radius-full);
  transition: width var(--dur-slow) var(--ease-in-out);
}

/* Grid for steps */

.dndev-roadmap-grid {
  display: grid;
  gap: var(--gap-lg);
  position: relative;
  z-index: 1;
}

/* Individual step container */

.dndev-roadmap-step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Timeline node (icon circle) */

.dndev-roadmap-node {
  width: var(--touch-target);
  height: var(--touch-target);
  border-radius: var(--radius-full);
  border: var(--border-huge) solid var(--muted);
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur-normal) var(--ease-in-out);
  margin-bottom: var(--gap-lg);
  flex-shrink: 0;
}

.dndev-roadmap-node[data-active='true'] {
  border-color: var(--accent);
  box-shadow: 0 0 20px color-mix(in oklab, var(--accent) 40%, transparent);
  transform: scale(1.1);
}

.dndev-roadmap-node svg {
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--muted-foreground);
  transition: color var(--dur-normal) var(--ease-in-out);
}

.dndev-roadmap-node[data-active='true'] svg {
  color: var(--accent);
}

/* Card styling - extra top padding for badge overlap, push footer to bottom */

.dndev-roadmap-card {
  position: relative;
  height: 100%;
  padding-top: calc(var(--gap-lg) + var(--gap-sm)) !important;
  align-content: space-between;
}

.dndev-roadmap-step:hover .dndev-roadmap-card,
.dndev-roadmap-card[data-active='true'] {
  border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
  transform: translateY(calc(-1 * var(--gap-sm)));
  box-shadow: var(--shadow-xl);
}

/* Phase badge - absolute overlay top-end */

.dndev-roadmap-phase {
  position: absolute;
  top: var(--gap-sm);
  inset-inline-end: var(--gap-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px var(--gap-sm); /* Tight vertical padding for badge */
  border-radius: var(--radius-interactive);
  background: var(--accent);
  color: var(--accent-foreground);
}

/* Description - sm, foreground, start */

.dndev-roadmap-description {
  font-size: var(--font-size-sm);
  color: var(--foreground);
  line-height: var(--line-height);
  margin: 0;
  margin-bottom: var(--gap-md);
  text-align: start;
}

/* =========================
   MOBILE LAYOUT
   ========================= */

.dndev-roadmap-mobile {
  position: relative;
  padding-inline-start: 0;
  padding-bottom: var(--gap-lg);
}

/* Vertical timeline line - centered, with animated progress */

.dndev-roadmap-timeline-vertical {
  position: absolute;
  inset-inline-start: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--muted);
  transform: translateX(-50%);
  z-index: 0;
  border-radius: var(--radius-full);
}

.dndev-roadmap-timeline-vertical-progress {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  background: linear-gradient(
    to bottom,
    var(--primary),
    var(--accent),
    var(--primary)
  );
  border-radius: var(--radius-full);
  transition: height var(--dur-slow) var(--ease-in-out);
}

/* Step container - flex column to stack Node -> Card */

.dndev-roadmap-step-mobile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.dndev-roadmap-step-mobile:last-child {
  margin-bottom: 0;
}

/* Mobile node - relative positioning, centered, with top margin from previous card */

.dndev-roadmap-node-mobile {
  position: relative;
  inset-inline-start: auto;
  top: auto;
  margin-top: var(--gap-md); /* Space from previous card's bottom */
  margin-bottom: var(--gap-md); /* Space before current card */
  width: var(--touch-target);
  height: var(--touch-target);
  border-radius: var(--radius-full);
  border: var(--border-huge) solid var(--muted);
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur-normal) var(--ease-in-out);
  z-index: 1;
}

/* First step's icon has no top margin */

.dndev-roadmap-step-mobile:first-child .dndev-roadmap-node-mobile {
  margin-top: 0;
}

.dndev-roadmap-node-mobile[data-active='true'] {
  border-color: var(--accent);
  box-shadow: 0 0 15px color-mix(in oklab, var(--accent) 30%, transparent);
}

.dndev-roadmap-node-mobile svg {
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--muted-foreground);
}

.dndev-roadmap-node-mobile[data-active='true'] svg {
  color: var(--accent);
}

/* Mobile card - full width, with active state */

.dndev-roadmap-card-mobile {
  position: relative;
  width: 100%;
  padding-top: calc(var(--gap-lg) + var(--gap-sm)) !important;
  align-content: space-between;
  background: var(--card);
  z-index: 1;
  transition: all var(--dur-normal) var(--ease-in-out);
}

.dndev-roadmap-card-mobile[data-active='true'] {
  border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
  box-shadow: var(--shadow-lg);
}

/* Only apply hover on devices that support it */

@media (hover: hover) {
  .dndev-roadmap-card-mobile:hover {
    border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
  }
}

/* packages/components/src/advanced/StackedCards/StackedCards.css */

/* Container */

.dndev-stacked-cards-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: min(100%, var(--content-width, 60rem));
  margin-inline: auto;
  position: relative;
}

/* Each stack item */

.dndev-stack-item {
  width: 100%;
  position: relative;
  transition: max-height var(--dur-heavy) var(--ease-heavy);
  overflow: hidden;

  /* Active card - full height */
}

.dndev-stack-item[data-stacked='false'] {
    max-height: none;
  }

/* Stacked card - only bottom edge visible */

.dndev-stack-item[data-stacked='true'] {
    max-height: 3.5rem;
  }

@media (prefers-reduced-motion: reduce) {

.dndev-stack-item {
    transition: none;
}
  }

/* Card content - hidden when stacked */

.dndev-stack-item[data-stacked='true'] .dndev-stack-content {
  opacity: 0;
  pointer-events: none;
}

/* Stack content wrapper */

.dndev-stack-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding-bottom: 3.5rem; /* Space for number bar */
  transition: opacity var(--dur-normal) var(--ease-in-out);
}

/* Number bar - always visible at bottom */

.dndev-stack-number {
  position: absolute;
  inset-inline-start: var(--gap-lg);
  bottom: 0;
  height: 3.5rem;
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--muted-foreground);
  z-index: 10;
}

/* Body layout */

.dndev-stacked-cards-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  width: 100%;
  align-items: start;
}

@media (width >= 1024px) {

.dndev-stacked-cards-body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    width: 100%;
    align-items: center;
}
  }

.dndev-stacked-cards-left {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  text-align: start;
}

.dndev-stacked-cards-left .dndev-card-header + p {
  margin-top: 0;
}

.dndev-stacked-cards-separator {
  display: block;
}

@media (width < 1024px) {

.dndev-stacked-cards-separator {
    width: 80% !important;
    height: 2px !important;
    margin-inline: auto;
    margin-block: var(--gap-sm);
    align-self: center;
}
  }

@media (width >= 1024px) {

.dndev-stacked-cards-separator {
    width: 1px !important;
    height: 100% !important;
    align-self: stretch;
}
  }

.dndev-stacked-cards-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-sm);
  text-align: start;
}

.dndev-stacked-cards-cta {
  padding-top: var(--gap-sm);
}

/* 6. Animation keyframes */

/* packages/components/src/styles/animations.css */

/* ========== UNIVERSAL ANIMATIONS ========== */

@keyframes universal-float {
  0%,
  100% {
    opacity: var(--opacity-start, 0.3);
    transform: var(--transform-start, translateY(0) scale(1) rotate(0deg));
  }

  50% {
    opacity: var(--opacity-mid, 0.8);
    transform: var(
      --transform-mid,
      translateY(-10px) scale(1.1) rotate(180deg)
    );
  }
}

@keyframes universal-slide {
  0% {
    opacity: var(--opacity-start, 0);
    transform: var(--transform-start, translateY(2rem));
  }

  100% {
    opacity: var(--opacity-end, 1);
    transform: var(--transform-end, translateY(0));
  }
}

@keyframes universal-marquee {
  from {
    transform: var(--transform-start, translateX(0));
  }

  to {
    transform: var(--transform-end, translateX(-50%));
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: var(--opacity-muted);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-25%);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes scale-in {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ========== ROUTING ANIMATIONS ========== */

/* Fade transition (default) */

@keyframes routing-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Slide transitions (RTL-aware) */

@keyframes routing-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes routing-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========== CRAWL ANIMATIONS ========== */

@keyframes dndev-stars-twinkle {
  0%,
  100% {
    opacity: var(--opacity-subtle);
    filter: brightness(0.8);
  }
  25% {
    opacity: var(--opacity-strong);
    filter: brightness(1.2);
  }
  50% {
    opacity: 1;
    filter: brightness(1.5);
  }
  75% {
    opacity: var(--opacity-muted);
    filter: brightness(1.1);
  }
}

@keyframes dndev-intro-fade-mobile {
  0% {
    opacity: 1;
    visibility: visible;
  }

  50% {
    opacity: 1;
    visibility: visible;
  }

  100% {
    opacity: 0;
    transform: scale(1);
    visibility: hidden;
  }
}

@keyframes dndev-intro-fade-desktop {
  0% {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
  }

  100% {
    opacity: 0;
    transform: scale(2);
    visibility: hidden;
  }
}

/* ========== BREATHING ANIMATIONS ========== */

@keyframes breath-cycle-442 {
  0% {
    clip-path: inset(100% 0 0 0);
  }
  25% {
    clip-path: inset(0 0 0 0);
  }
  50% {
    clip-path: inset(0 0 0 0);
  }
  87.5% {
    clip-path: inset(100% 0 0 0);
  }
  100% {
    clip-path: inset(100% 0 0 0);
  }
}

@keyframes breath-cycle-sigh {
  0% {
    clip-path: inset(100% 0 0 0);
  }
  20% {
    clip-path: inset(0 0 0 0);
  }
  40% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(100% 0 0 0);
  }
}

/* 7. Utility classes - FINAL (layout + sizing only) */

/* packages/components/src/styles/utilities.css */

/**
 * Development-only debug utilities
 * THOSE ARE VERY IMPORTANT FOR OUR APPS!
 */

:root {
  --debug-enabled: 0;
}

/* Used by DebugTools component - do not remove */

.debug-layout {
  outline: calc(var(--debug-enabled) * 2px) solid rgba(255, 0, 0, 0.5) !important;
}

/* Used by DebugTools component via CSS variables - do not remove */

.debug-flex {
  outline: calc(var(--debug-enabled) * 2px) dashed rgba(255, 165, 0, 0.8) !important;
}

/* Used by DebugTools component via CSS variables - do not remove */

.debug-component {
  outline: calc(var(--debug-enabled) * 1px) dotted rgba(0, 255, 0, 0.6) !important;
}

/* Auto-apply debug borders when data-debug attribute is present */

/* Layout elements - red borders */

[data-debug='true'] .dndev-layout,[data-debug='true'] header[role='banner'],[data-debug='true'] main[role='main'],[data-debug='true'] aside[role='navigation'],[data-debug='true'] footer[role='contentinfo'] {
    outline: 2px solid rgba(255, 0, 0, 0.5) !important;
  }

/* Flex containers - orange dashed borders */

[data-debug='true'] .flex,[data-debug='true'] .flex-col,[data-debug='true'] .flex-row,[data-debug='true'] .inline-flex {
    outline: 2px dashed rgba(255, 165, 0, 0.8) !important;
  }

/* Grid containers - orange dashed borders */

[data-debug='true'] .grid,[data-debug='true'] [class*='grid'] {
    outline: 2px dashed rgba(255, 165, 0, 0.8) !important;
  }

/* Components - green dotted borders */

[data-debug='true'] [class*='dndev-'],[data-debug='true'] [class*='card'],[data-debug='true'] button,[data-debug='true'] input,[data-debug='true'] select,[data-debug='true'] textarea {
    outline: 1px dotted rgba(0, 255, 0, 0.6) !important;
  }

/* ===========================
   ACCESSIBILITY
   =========================== */

/* Screen reader only - hides element visually but keeps it accessible to screen readers */

.dndev-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ===========================
   DISPLAY
   =========================== */

.dndev-flex {
  display: flex;
}

.dndev-flex-col {
  flex-direction: column;
}

/* Used in feature packages (auth, oauth, crud) - do not remove */

.dndev-flex-col-reverse {
  flex-direction: column-reverse;
}

/* Used in feature packages (auth, oauth, crud) - do not remove */

.dndev-flex-row {
  flex-direction: row;
}

.dndev-flex-wrap {
  flex-wrap: wrap;
}

/* Used in feature packages (auth, oauth, crud) - do not remove */

.dndev-flex-nowrap {
  flex-wrap: nowrap;
}

.dndev-flex-1 {
  flex: 1 1 0%;
}

.dndev-flex-shrink-0 {
  flex-shrink: 0;
}

.dndev-inline-flex {
  display: inline-flex;
}

.dndev-grid {
  display: grid;
}

/* Used in feature packages (crud FormLayout) - do not remove */

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

.dndev-block {
  display: block;
}

/* Used in feature packages (crud, ui) - do not remove */

.dndev-inline {
  display: inline;
}

.dndev-hidden {
  display: none;
}

/* ===========================
   FLEXBOX ALIGNMENT
   =========================== */

.dndev-items-start {
  align-items: flex-start;
}

.dndev-items-center {
  align-items: center;
}

/* Used in feature packages (auth, oauth) - do not remove */

.dndev-items-end {
  align-items: flex-end;
}

/* Used in feature packages (auth, oauth) - do not remove */

.dndev-items-stretch {
  align-items: stretch;
}

.dndev-justify-start {
  justify-content: flex-start;
}

.dndev-justify-center {
  justify-content: center;
}

.dndev-justify-end {
  justify-content: flex-end;
}

.dndev-justify-between {
  justify-content: space-between;
}

/* ===========================
   GAP (4-tier system)
   =========================== */

.dndev-gap-none {
  gap: var(--gap-none);
}

.dndev-gap-sm {
  gap: var(--gap-sm);
}

.dndev-gap-md {
  gap: var(--gap-md);
}

.dndev-gap-lg {
  gap: var(--gap-lg);
}

/* ===========================
   UNIVERSAL DATA ATTRIBUTES
   Work with any element
   =========================== */

/* Gap system */

[data-gap='none'] {
  gap: var(--gap-none);
}

[data-gap='tight'] {
  gap: var(--gap-sm);
}

[data-gap='medium'] {
  gap: var(--gap-md);
}

[data-gap='large'] {
  gap: var(--gap-lg);
}

/* Grid columns - gridCols is max columns, cards min 350px */

[data-cols='1'] {
  grid-template-columns: repeat(1, minmax(350px, 1fr));
  align-items: stretch;
}

[data-cols='2'] {
  grid-template-columns: repeat(2, minmax(350px, 1fr));
  align-items: stretch;
}

@media (width <=699px) {

[data-cols='2'] {
    grid-template-columns: repeat(1, minmax(350px, 1fr));
}
  }

[data-cols='3'] {
  grid-template-columns: repeat(3, minmax(350px, 1fr));
  align-items: stretch;
}

@media (width <=1049px) {

[data-cols='3'] {
    grid-template-columns: repeat(2, minmax(350px, 1fr));
}
  }

@media (width <=699px) {

[data-cols='3'] {
    grid-template-columns: repeat(1, minmax(350px, 1fr));
}
  }

[data-cols='4'] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;

  /* Responsive: reduce columns when container is narrow */
}

@media (width <=1399px) {

[data-cols='4'] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
  }

@media (width <=1049px) {

[data-cols='4'] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
  }

@media (width <=699px) {

[data-cols='4'] {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
  }

/* Tone backgrounds - apply directly to section element (like CallToAction) */

/* Ghost (default) - transparent, allows background images to show through */

.dndev-section-full-width[data-tone='ghost'],.dndev-section-full-width:not([data-tone]) {
    background: transparent;
  }

.dndev-section-full-width[data-tone='base'] {
    background: var(--background);
  }

.dndev-section-full-width[data-tone='muted'] {
    background: var(--muted);
  }

.dndev-section-full-width[data-tone='contrast'] {
    background: var(--background);
    color: var(--foreground);
  }

.dndev-section-full-width[data-tone='accent'] {
    background: color-mix(in oklab, var(--accent) 5%, transparent);
  }

/* HeroSection tone backgrounds - same system as Section/CallToAction */

/* Ghost (default) - transparent, allows background images to show through */

.dndev-hero-section[data-tone='ghost'],.dndev-hero-section:not([data-tone]) {
    background: transparent;
  }

.dndev-hero-section[data-tone='base'] {
    background: var(--background);
  }

.dndev-hero-section[data-tone='muted'] {
    background: var(--muted);
  }

.dndev-hero-section[data-tone='contrast'] {
    background: var(--background);
    color: var(--foreground);
  }

.dndev-hero-section[data-tone='accent'] {
    background: color-mix(in oklab, var(--accent) 5%, transparent);
  }

/* Fallback for other elements using data-tone (not sections) */

[data-tone='base']:not(.dndev-section-full-width) {
    background: var(--background);
  }

[data-tone='muted']:not(.dndev-section-full-width) {
    background: var(--muted);
  }

[data-tone='elevated']:not(.dndev-section-full-width) {
    background: var(--background);
  }

[data-tone='contrast']:not(.dndev-section-full-width) {
    background: var(--background);
    color: var(--foreground);
  }

[data-tone='accent']:not(.dndev-section-full-width) {
    background: color-mix(in oklab, var(--accent) 5%, transparent);
  }

/* ===========================
   UNIVERSAL COLOR VARIANTS
   REMOVED: Variants are now scoped per CSS family
   - .dndev-surface variants in patterns.css (sets --card / --card-foreground)
   - .dndev-floating variants in patterns.css (sets --popover / --popover-foreground)
   - .dndev-interactive variants in patterns.css (direct colors for buttons)
   - .dndev-notification variants in patterns.css (inverted floating colors)
   - .dndev-text-base variants in Text.css (color only)
   =========================== */

/* Code element - semantic HTML (monospace font only, inherits size/weight) */

code {
  font-family: var(--font-mono);
  font-size: inherit;
  /* Inherit parent size */
  font-weight: inherit;
  /* Inherit parent weight */
  line-height: inherit;
  color: inherit;
  background: transparent;
  /* No background by default */
}

/* Code variant - visual styling (background, padding, can apply to any element) */

[data-variant='code'] {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  /* Default small size */
  background: var(--muted);
  color: var(--muted-foreground);
  padding: var(--gap-sm) var(--gap-md);
  display: inline-block;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  border-radius: var(--radius-interactive);
}

/* Code element + variant = semantic + visual (monospace + background) */

code[data-variant='code'] {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  background: var(--muted);
  color: var(--muted-foreground);
  padding: var(--gap-sm) var(--gap-md);
  display: inline-block;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  border-radius: var(--radius-interactive);
}

/* Heading + code variant = heading size/weight + code background */

h1[data-variant='code'],
h2[data-variant='code'],
h3[data-variant='code'],
h4[data-variant='code'] {
  font-family: var(--font-mono);
  /* Size and weight inherited from heading styles */
  background: var(--muted);
  color: var(--muted-foreground);
  padding: var(--gap-sm) var(--gap-md);
  display: inline-block;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  border-radius: var(--radius-interactive);
}

/* ===========================
   SIZING (ONLY 2 UTILITIES)
   =========================== */

.dndev-size-md {
  width: var(--icon-md);
  /* 20px */
  height: var(--icon-md);
}

.dndev-size-touch {
  width: var(--touch-target);
  /* 48px */
  height: var(--touch-target);
}

/* ===========================
   LAYOUT HELPERS
   =========================== */

.dndev-w-full {
  width: 100%;
}

.dndev-h-full {
  height: 100%;
}

.dndev-min-w-0 {
  min-width: 0;
}

.dndev-max-w-none {
  max-width: none;
}

.dndev-mx-auto {
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.dndev-ml-auto {
  margin-inline-start: auto;
}

.dndev-mt-0 {
  margin-top: 0;
}

.dndev-relative {
  position: relative;
  min-width: 0;
  /* Allow flex items to shrink below content size */
}

.dndev-absolute {
  position: absolute;
}

.dndev-fixed {
  position: fixed;
}

.dndev-abs-centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.dndev-overflow-hidden {
  overflow: hidden;
}

.dndev-overflow-y-auto {
  overflow-y: auto;
}

.dndev-overflow-x-hidden {
  overflow-x: hidden;
}

/* ===========================
   TEXT ALIGNMENT (RTL-aware)
   =========================== */

.dndev-text-center {
  text-align: center;
}

.dndev-text-start {
  text-align: start;
}

.dndev-text-end {
  text-align: end;
}

/* Universal data attribute for text alignment (works with any element) */

[data-text-align='start'] {
  text-align: start;
}

[data-text-align='center'] {
  text-align: center;
}

[data-text-align='end'] {
  text-align: end;
}

.dndev-inset-0 {
  inset: 0;
}

.dndev-inset-y-0 {
  top: 0;
  bottom: 0;
}

.dndev-inset-inline-start-0 {
  inset-inline-start: 0;
}

.dndev-min-h-0 {
  min-height: 0;
}

.dndev-ms-auto {
  margin-inline-start: auto;
}

.dndev-pointer-events-none {
  pointer-events: none;
}

.dndev-pointer-events-auto {
  pointer-events: auto;
}

.dndev-cursor-pointer {
  cursor: pointer;
}

.dndev-aspect-video {
  aspect-ratio: 16 / 9;
}

.dndev-object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

/* ===========================
   RESPONSIVE DISPLAY
   =========================== */

@media (width >=768px) {
  .dndev-md\:block {
    display: block;
  }

  .dndev-md\:hidden {
    display: none;
  }

  .dndev-md\:flex {
    display: flex;
  }

  .dndev-md\:grid {
    display: grid;
  }

  .dndev-md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dndev-md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width >=1024px) {
  .dndev-lg\:block {
    display: block;
  }

  .dndev-lg\:hidden {
    display: none;
  }
}

/* ===========================
   ANIMATIONS
   =========================== */

.dndev-animate-spin {
  animation: spin 1s linear infinite;
}

.dndev-animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.dndev-animate-bounce {
  animation: bounce 1s infinite;
}

.dndev-animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

.dndev-animate-slide-in {
  animation: slide-in 0.3s ease-out;
}

.dndev-animate-scale-in {
  animation: scale-in 0.2s ease-out;
}

/* ===========================
   ACCESSIBILITY
   =========================== */

.dndev-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================
   PROSE - SEMANTIC TYPOGRAPHY FOR CONTENT PAGES
   Wrap docs/markdown/article content in .prose for semantic margins
   Components are unaffected - they own their own spacing
   =========================== */

.prose {
  color: var(--color-fg);
  text-align: start;
  line-height: 1.75;

  /* ── Headings (typography standards) ──
     Global heading sizes are for page-level use; .prose scales them down for article context. */
}

.prose h1 {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.111;
    margin-block-start: 0;
    margin-block-end: 0.889rem;
  }

.prose h2 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.333;
    margin-block-start: 2rem;
    margin-block-end: 1rem;
  }

.prose h3 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.6;
    margin-block-start: 1.6rem;
    margin-block-end: 0.6rem;
  }

.prose h4,.prose h5,.prose h6 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    margin-block-start: 1.5rem;
    margin-block-end: 0.5rem;
  }

/* ── Block elements ── */

.prose p {
    margin-block: 1.25rem;
  }

.prose blockquote {
    font-weight: 500;
    font-style: italic;
    color: var(--color-fg-muted, var(--color-fg));
    border-inline-start: 0.25rem solid var(--color-border);
    padding-inline-start: 1rem;
    margin-block: 1.6rem;
    margin-inline: 0;
  }

.prose blockquote p:first-of-type::before {
    content: open-quote;
  }

.prose blockquote p:last-of-type::after {
    content: close-quote;
  }

.prose hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin-block: 3rem;
  }

/* ── Lists ── */

.prose ul,.prose ol {
    padding-inline-start: 1.625rem;
    margin-block: 1.25rem;
  }

.prose ol {
    list-style-type: decimal;
  }

.prose ul {
    list-style-type: disc;
  }

.prose li {
    margin-block: 0.5rem;
    padding-inline-start: 0.375rem;
  }

/* Nested lists: tighter spacing */

.prose li > ul,.prose li > ol {
    margin-block: 0.5rem;
  }

/* ── Links ── */

.prose a {
    color: var(--color-accent, var(--color-fg));
    text-decoration: underline;
    font-weight: 500;
    text-underline-offset: 2px;
  }

/* ── Inline elements ── */

.prose strong {
    font-weight: 600;
  }

/* Inline code (not inside pre) */

.prose :not(pre) > code {
    font-size: 0.875em;
    font-weight: 600;
    background: var(
      --color-surface-raised,
      var(--color-bg-muted, rgba(0, 0, 0, 0.05))
    );
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
  }

/* Code blocks */

.prose pre {
    overflow-x: auto;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.714;
    margin-block: 1.714rem;
    border-radius: var(--radius-md, 0.375rem);
  }

.prose pre code {
    background: transparent;
    border: none;
    padding: 0;
    font-weight: inherit;
    font-size: inherit;
  }

/* ── Tables (typography standards) ── */

.prose table {
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.714;
    margin-block: 2rem;
    text-indent: 0;
    border-collapse: collapse;
  }

.prose thead {
    border-bottom: 1px solid var(--color-border);
  }

.prose thead th {
    color: var(--color-fg);
    font-weight: 600;
    vertical-align: bottom;
    text-align: start;
    padding: 0 0.571rem 0.571rem;
  }

.prose thead th:first-child {
    padding-inline-start: 0;
  }

.prose thead th:last-child {
    padding-inline-end: 0;
  }

.prose tbody tr {
    border-bottom: 1px solid var(--color-border-muted, var(--color-border));
  }

.prose tbody tr:last-child {
    border-bottom: none;
  }

.prose tbody td {
    vertical-align: baseline;
    text-align: start;
    padding: 0.571rem;
  }

.prose tbody td:first-child {
    padding-inline-start: 0;
  }

.prose tbody td:last-child {
    padding-inline-end: 0;
  }

/* ── Media ── */

.prose img,.prose video {
    max-width: 100%;
    height: auto;
    margin-block: 2rem;
  }

.prose figure {
    margin-block: 2rem;
    margin-inline: 0;
  }

.prose figure > img,.prose figure > video {
    margin-block: 0;
  }

.prose figcaption {
    color: var(--color-fg-muted, var(--color-fg));
    font-size: 0.875rem;
    line-height: 1.4;
    margin-block-start: 0.857rem;
  }

/* ── Keyboard ── */

.prose kbd {
    font-weight: 500;
    font-family: inherit;
    font-size: 0.875em;
    color: var(--color-fg);
    background: var(
      --color-surface-raised,
      var(--color-bg-muted, rgba(0, 0, 0, 0.05))
    );
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
    box-shadow:
      0 0 0 1px var(--color-border),
      0 2px 0 var(--color-border);
  }

/* ── Definition lists ── */

.prose dl {
    margin-block: 1.25rem;
  }

.prose dt {
    font-weight: 600;
    margin-block-start: 1.25rem;
  }

.prose dd {
    margin-inline-start: 1.625rem;
    margin-block-start: 0.5rem;
  }

/* ── Edge cleanup ── */

.prose  > :first-child {
    margin-block-start: 0;
  }

.prose  > :last-child {
    margin-block-end: 0;
  }

/* ===========================
   SHADOW CONTROL (Universal)
   Works with any element
   =========================== */

[data-shadow='none'] {
  box-shadow: none;
}

[data-shadow='md'] {
  box-shadow: var(--shadow-md);
}

[data-shadow='md']:dir(rtl) {
    box-shadow: var(--shadow-md-rtl);
  }

[data-shadow='xl'] {
  box-shadow: var(--shadow-xl);
}

[data-shadow='xl']:dir(rtl) {
    box-shadow: var(--shadow-xl-rtl);
  }

/* ===========================
   RADIUS CONTROL (Universal)
   Works with any element
   =========================== */

[data-radius='none'] {
  border-radius: var(--radius-none);
}

[data-radius='md'] {
  border-radius: var(--radius-md);
}

[data-radius='full'] {
  border-radius: var(--radius-full);
}

/* ===========================
   GRADIENT TEXT (Universal)
   Data attribute-based gradient text utilities
   Top 3 industry hero variants: primary, subtle, accent
   =========================== */

[data-gradient-text='primary'] {
  background: linear-gradient(
    to right,
    var(--foreground),
    var(--primary),
    var(--foreground)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-gradient-text='accent'] {
  background: linear-gradient(
    to right,
    var(--foreground),
    var(--accent),
    var(--foreground)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===========================
   Z-INDEX UTILITIES
   =========================== */

.dndev-z-header {
  z-index: var(--z-header);
}

.dndev-z-sidebar {
  z-index: var(--z-sidebar);
}

.dndev-z-footer {
  z-index: var(--z-footer);
}

.dndev-z-overlay {
  z-index: var(--z-overlay);
}

.dndev-z-breadcrumbs {
  z-index: var(--z-breadcrumbs);
}

.dndev-z-dropdown {
  z-index: var(--z-dropdown);
}

.dndev-z-modal {
  z-index: var(--z-modal);
}

.dndev-z-tooltip {
  z-index: var(--z-tooltip);
}

.dndev-z-toast {
  z-index: var(--z-toast);
}

/* ===========================
   HEIGHT UTILITIES - DYNAMIC VIEWPORT
   Standard dvh values for layout (mobile-friendly)
   =========================== */

/* Full height */

.dndev-h-screen {
  height: 100dvh;
}

.dndev-min-h-screen {
  min-height: 100dvh;
}

.dndev-max-h-screen {
  max-height: 100dvh;
}

/* 90dvh - Large modals/dialogs */

.dndev-h-90 {
  height: 90dvh;
}

.dndev-min-h-90 {
  min-height: 90dvh;
}

.dndev-max-h-90 {
  max-height: 90dvh;
}

/* 80dvh - Standard modals/dialogs */

.dndev-h-80 {
  height: 80dvh;
}

.dndev-min-h-80 {
  min-height: 80dvh;
}

.dndev-max-h-80 {
  max-height: 80dvh;
}

/* 60dvh - Compact sections */

.dndev-h-60 {
  height: 60dvh;
}

.dndev-min-h-60 {
  min-height: 60dvh;
}

.dndev-max-h-60 {
  max-height: 60dvh;
}

/* ===========================
   LAYOUT SYSTEM (UI-SPECIFIC)
   =========================== */

/* Layout-specific CSS custom properties */

/* packages/ui/src/styles/layout-variables.css */

/* ===========================
   DEFAULT VALUES (Landing Preset)
   All presets inherit these - only override what's different
     =========================== */

:root {
  /* Layout structure dimensions */
  /* Height values include borders (box-sizing: border-box) */
  /* Content heights are multiples of 12px, then add 2px border */
  --header-height: 62px;
  /* 60px content + 2px border-bottom */
  --header-padding: 1rem;
  --sidebar-width: 0px;
  --sidebar-padding: 0px;
  --footer-height: 50px;
  /* 48px content + 2px border-top */
  --footer-padding: 1rem;

  /* Layout-specific horizontal padding (for breadcrumbs, full-width components) */
  /* PageContainer uses density system for spacing and typography */
  --content-padding: var(--gap-md);
  /* Controlled by density system - minimal horizontal padding for layout elements */

  /* Component-specific sizing (derived from layout dimensions) */
  --header-icon-size: calc(var(--header-height) - 2rem);
  --header-logo-max-height: calc(var(--header-height) - 1rem);
  --sidebar-item-height: var(--touch-target);
  --sidebar-icon-size: var(--icon-md);
  --sidebar-edge-padding: 1rem;
  --sidebar-edge-padding-collapsed: 0.5rem;
  --sidebar-resize-handle-width: 6px;

  /* Content width - max constraint only, grid handles sidebar space */
  /* PageContainer sets --max-content-width per variant, components use --content-width */
  --max-content-width: 100%;
  --content-width: var(--max-content-width, 100%);

  /* Narrow content (mobile-first PWA, app-like single column) - single source of truth */
  --narrow-content-max: 37.5rem;
  /* 600px */
  --narrow-form-max: 30rem;
  /* 480px - inner form/input width within narrow layout */

  /* Content Area Calculations */
  /* Header content area (excludes sidebar on some presets) */
  --header-content-width: 100%;

  /* ===========================
     ROUTING ANIMATIONS
     Overridable in themes.css: --routing-animation: slide; or --routing-animation: none;
     =========================== */

  /* Single animation type (fade, slide, or none to disable) - app-wide */
  --routing-animation: none;
  --routing-default-duration: var(--dur-normal);

  /* Breakpoint-specific durations */
  --routing-mobile-duration: var(--routing-default-duration);
  --routing-tablet-duration: var(--routing-default-duration);
  --routing-desktop-duration: var(--routing-default-duration);
  --routing-wide-duration: var(--routing-default-duration);
}

/* ===========================
   ROUTING ANIMATIONS - KEYFRAMES
   =========================== */

@keyframes routeFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes routeFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Slide animations - RTL-aware */

@keyframes routeSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

@keyframes routeSlideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* RTL slide animations: @keyframes can't be scoped with :dir(rtl).
   RTL direction is handled via logical properties in the consuming components. */

/* Routing animations - applied to main content area */

/* Default: visible (progressive enhancement - content shows even if JS fails) */

main[role='main'] {
  opacity: 1;
}

/* Fade animation - keyframes handle opacity 0→1 */

main[role='main'][data-routing-animation='fade'] {
  animation: routeFadeIn var(--routing-default-duration, 300ms) ease-in forwards;
}

/* Slide animation - keyframes handle opacity 0→1 */

main[role='main'][data-routing-animation='slide'] {
  animation: routeSlideIn var(--routing-default-duration, 300ms) ease-in
    forwards;
}

/* No animation - already visible by default, explicit for clarity */

main[role='main'][data-routing-animation='none'] {
  animation: none;
  opacity: 1;
}

/* Mobile (< 768px) */

@media (width < 768px) {
  main[role='main'][data-routing-animation='fade'] {
    animation: routeFadeIn
      var(--routing-mobile-duration, var(--routing-default-duration, 300ms))
      ease-in forwards;
  }

  main[role='main'][data-routing-animation='slide'] {
    animation: routeSlideIn
      var(--routing-mobile-duration, var(--routing-default-duration, 300ms))
      ease-in forwards;
  }
}

/* Tablet (768px - 1023px) */

@media (width >=768px) and (width <=1023px) {
  main[role='main'][data-routing-animation='fade'] {
    animation: routeFadeIn
      var(--routing-tablet-duration, var(--routing-default-duration, 300ms))
      ease-in forwards;
  }

  main[role='main'][data-routing-animation='slide'] {
    animation: routeSlideIn
      var(--routing-tablet-duration, var(--routing-default-duration, 300ms))
      ease-in forwards;
  }
}

/* Desktop (1024px - 1439px) */

@media (width >=1024px) and (width <=1439px) {
  main[role='main'][data-routing-animation='fade'] {
    animation: routeFadeIn
      var(--routing-desktop-duration, var(--routing-default-duration, 300ms))
      ease-in forwards;
  }

  main[role='main'][data-routing-animation='slide'] {
    animation: routeSlideIn
      var(--routing-desktop-duration, var(--routing-default-duration, 300ms))
      ease-in forwards;
  }
}

/* Wide (>= 1440px) */

@media (width >=1440px) {
  main[role='main'][data-routing-animation='fade'] {
    animation: routeFadeIn
      var(--routing-wide-duration, var(--routing-default-duration, 300ms))
      ease-in forwards;
  }

  main[role='main'][data-routing-animation='slide'] {
    animation: routeSlideIn
      var(--routing-wide-duration, var(--routing-default-duration, 300ms))
      ease-in forwards;
  }
}

/* Respect prefers-reduced-motion - disable all routing animations */

@media (prefers-reduced-motion: reduce) {
  main[role='main'] {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* Header content width adjustments for sidebar layouts */

[data-layout='moolti'],
[data-layout='docs'],
[data-layout='blog'] {
  --header-content-width: calc(100% - var(--sidebar-width));
}

/* Mobile/Tablet: Hide sidebars - WCAG & Lighthouse best practices */

@media (width <=1023px) {
  .dndev-layout aside[role='navigation'].sidebar,
  aside[role='navigation'].sidebar {
    display: none !important;
  }
}

/* ===========================
   LAYOUT CONTAINER
   Relative positioning container for absolute positioned elements
   =========================== */

.dndev-layout {
  position: relative;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  display: grid;
  /* Grid structure: 3 rows, 2 columns */
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
  grid-template-rows: var(--header-height) 1fr minmax(
      var(--footer-height),
      auto
    );
  grid-template-columns: var(--sidebar-width) 1fr;
}

/* Footer inline: renders inside main, grid drops to 2 rows */

.dndev-layout[data-footer-inline] {
  grid-template-areas:
    'header header'
    'sidebar main';
  grid-template-rows: var(--header-height) 1fr;
}

/* Footer inside main: spacing + sizing */

main[role='main'] > footer[role='contentinfo'] {
  margin-top: var(--gap-lg);
  flex-shrink: 0;
  height: auto;
}

main[role='main'] > footer[role='contentinfo'] > * {
  height: auto;
  min-height: var(--footer-height);
}

/* Presets with no footer at all */

[data-layout='moolti'] footer[role='contentinfo'],
[data-layout='plain'] footer[role='contentinfo'] {
  display: none;
}

/* ===========================
   LAYOUT ZONE POSITIONING RULES
   Follows logical flow: Header → Sidebar → Main → Footer
   =========================== */

/* Header: Always at top, full width, defined height */

/* box-sizing: border-box ensures borders are included in height (already set globally, explicit here for clarity) */

header[role='banner'] {
  grid-area: header;
  box-sizing: border-box;
  height: var(--header-height);
  min-height: var(--header-height);
  max-height: var(--header-height);
  position: relative;
  z-index: var(--z-header);
  contain: layout style;
  overflow: visible; /* Allow absolutely positioned children's shadows to extend beyond bounds */

  /* Container queries support for responsive components */
  container-type: inline-size;
  container-name: header;

  /* Flex container to properly wrap Grid/flex children from preset headers */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  padding-inline-start: var(--content-padding);
  padding-inline-end: var(--content-padding);

  background: var(--background);
  border-bottom: var(--border-hairline) solid var(--border);

  /* Mobile: Sticky header (for presets that keep header visible) */
}

@media (width <=1023px) {

header[role='banner'] {
    position: sticky;
    top: 0;
}
  }

.header-start {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 100%;
  max-height: 100%;
  gap: var(--gap-sm);
  overflow: visible; /* Allow shadows to show */
  /* Theme-controlled padding for shadows that extend beyond bounds (e.g., brutalist hard-offset shadows) */
  /* Shadows extend rightward, so only end padding needed */
  /* Defaults to 0 for themes with diffused shadows that don't extend beyond bounds */
  padding-inline-end: var(--header-shadow-padding, 0);
}

.header-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  height: 100%;
  max-height: 100%;
  margin-inline-start: auto;
  gap: var(--gap-sm);
  overflow: visible; /* Allow shadows to show */
  /* Theme-controlled padding for shadows that extend beyond bounds (e.g., brutalist hard-offset shadows) */
  /* Shadows extend rightward, so only end padding needed */
  /* Defaults to 0 for themes with diffused shadows that don't extend beyond bounds */
  padding-inline-end: var(--header-shadow-padding, 0);
}

/* Viewport-centered center content - absolutely positioned overlay */

header[role='banner'] .header-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: -moz-fit-content;
  width: fit-content;
  z-index: 1;
  /* Theme-controlled padding for shadows that extend beyond bounds (e.g., brutalist hard-offset shadows) */
  /* Shadows extend rightward, so only end padding needed */
  /* Defaults to 0 for themes with diffused shadows that don't extend beyond bounds */
  padding-inline-end: var(--header-shadow-padding, 0);
}

/* ===========================
   ICON HEIGHT FIX
   =========================== */

/* AppIcon SVG height fix - ensures SVG respects --header-height */

.h-\[var\(--header-height\)\] svg,
[class*='h-[var(--header-height)'] svg {
  height: 100%;
  width: auto;
}

/* Sidebar: Underneath header, left = 0, width controlled by grid column */

/* box-sizing: border-box ensures borders are included in width (already set globally, explicit here for clarity) */

aside[role='navigation'].sidebar {
  grid-area: sidebar;
  box-sizing: border-box;
  min-width: calc(var(--sidebar-resize-handle-width) + 48px);
  /* Min: 48px content + 6px handle = 54px */
  max-width: calc(var(--sidebar-resize-handle-width) + 400px);
  /* Max: 400px content + 6px handle = 406px */
  z-index: var(--z-sidebar);
  overflow: none;
  /* No clipping needed - handle is in grid */
  contain: layout style;
  padding: 0;
  display: grid;
  grid-template-columns: auto var(--sidebar-resize-handle-width);
  /* Content | Handle - column 1 width set inline */
  grid-template-rows: auto 1fr auto;
  /* Top | Content | Bottom */
  height: 100%;

  /* Theme-aware styling - 100% controlled by theme system */
  background: var(--background);
  /* No border - resize handle is the visual separator */

  /* Desktop presets with no sidebar: Hide sidebar element for performance/accessibility */
  /* Landing, Plain, Game have --sidebar-width: 0px, also need display: none */
}

[data-layout='landing']:root aside.sidebar[role='navigation'],[data-layout='plain']:root aside.sidebar[role='navigation'],[data-layout='game']:root aside.sidebar[role='navigation'] {
    display: none;
  }

/* Moolti: Sidebar spans full height (no header/footer on desktop) */

[data-layout='moolti']:root aside.sidebar[role='navigation'] {
    grid-row: 1 / -1;
  }

/* ===========================
   RESIZABLE SIDEBAR STYLES
   =========================== */

/* Resize handle - now in grid column 2, no absolute positioning needed */

aside[role='navigation'].sidebar .dndev-sidebar-resize-handle {
  grid-column: 2;
  grid-row: 1 / -1;
  width: var(--sidebar-resize-handle-width);
  cursor: col-resize;
  background: var(--border);
  z-index: var(--z-sidebar);
  transition: background var(--dur-fast);
  pointer-events: auto;
}

aside[role='navigation'].sidebar .dndev-sidebar-resize-handle:hover,
aside[role='navigation'].sidebar .dndev-sidebar-resize-handle:focus-visible {
  background: var(--primary);
  outline: none;
}

/* Active drag state */

aside[role='navigation'].sidebar[data-dragging='true']
  .dndev-sidebar-resize-handle {
  background: var(--primary);
}

/* Touch-friendly handle */

@media (hover: none) {
  aside[role='navigation'].sidebar .dndev-sidebar-resize-handle {
    width: calc(var(--sidebar-resize-handle-width) * 2);
    /* 12px for touch */
  }
}

/* Landing: AUTO display mode - compact below wide breakpoint (< 1440px) */

@media (width < 1440px) {
  [data-layout='landing']
    header[role='banner']
    [data-display='auto']
    .dndev-interactive-label {
    display: none;
  }
}

/* Sidebar zones: top, content, bottom - shared layout rules */

/* All zones: flex column, no padding, 100% width, vertical stacking */

/* Explicit grid-row ensures correct placement even when top slot is missing */

.sidebar-top,
.sidebar-content,
.sidebar-bottom {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--gap-none);
  gap: var(--gap-none);
}

/* Zone-specific overrides with explicit grid rows */

.sidebar-top {
  grid-row: 1;
  flex-shrink: 0;
  gap: var(--gap-sm);
  padding-block-end: var(--gap-md);
}

.sidebar-content {
  grid-row: 2;
  overflow-y: auto;
  min-height: 0;
  justify-content: center;
  /* Zero gap between items - they touch vertically */
  gap: var(--gap-none);

  /* Add horizontal padding to menu items */
}

.sidebar-content .dndev-interactive[data-role='menu-item'],.sidebar-content .dndev-interactive[data-role='command-item'],.sidebar-content .dndev-interactive[data-role='nav-trigger'] {
    padding-inline-start: var(--gap-sm);
    padding-inline-end: var(--gap-sm);

    /* Remove padding if compact (icon alone) */
  }

[data-display='compact']:is(.sidebar-content .dndev-interactive[data-role='menu-item'],.sidebar-content .dndev-interactive[data-role='command-item'],.sidebar-content .dndev-interactive[data-role='nav-trigger']) {
      padding-inline-start: 0 !important;
      padding-inline-end: 0 !important;
    }

/* Ensure 48px height always - override padding-block to maintain exact height */

.sidebar-content .dndev-interactive[data-role='menu-item'],.sidebar-content .dndev-interactive[data-role='nav-trigger'] {
    height: var(--touch-target);
    min-height: var(--touch-target);
    padding-block: 0;
    /* No vertical padding - buttons fill exact 48px */
  }

/* Other interactive elements (not menu items) - consistent padding */

.sidebar-content .dndev-interactive:not([data-role='menu-item']):not([data-role='command-item']):not([data-role='nav-trigger']) {
    padding-inline-start: var(--gap-sm);
    padding-inline-end: var(--gap-sm);
  }

.sidebar-bottom {
  grid-row: 3;
  flex-shrink: 0;
  gap: var(--gap-sm);
  padding-block-start: var(--gap-md);
}

/* Interactive elements in all zones: full width */

.sidebar-top .dndev-interactive,
.sidebar-content .dndev-interactive,
.sidebar-bottom .dndev-interactive {
  width: 100%;
  min-width: 0;
  /* justify-content handled by patterns.css parent selector */
}

/* Hide kbd elements in sidebar when collapsed - prevents collapse blocking */

aside[role='navigation'].sidebar[data-collapsed='true'] .dndev-interactive kbd {
  display: none;
}

/* Force sidebar children to shrink - no blocking resize */

aside.sidebar[role='navigation'] .sidebar-top,aside.sidebar[role='navigation'] .sidebar-bottom {
    overflow: hidden;
  }

aside.sidebar[role='navigation'] .sidebar-content {
    overflow-x: hidden;
    /* Prevent horizontal scroll, allow vertical */
  }

aside.sidebar[role='navigation'] .dndev-interactive {
    overflow: hidden;
  }

aside.sidebar[role='navigation'] .dndev-interactive-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

/* Sidebar top slot: consistent 48px, no padding shift */

.sidebar-top .dndev-interactive {
    height: var(--touch-target);
    min-height: var(--touch-target);
    padding-block: 0;

    /* When collapsed, ensure compact buttons have no padding */
  }

[data-display='compact']:is(.sidebar-top .dndev-interactive) {
      padding-inline: 0 !important;
      width: var(--touch-target);
      justify-content: center;
    }

/* Collapsed sidebar: hide labels, center icons */

/* Hide all auto-display labels */

aside.sidebar[role='navigation'][data-collapsed='true'] .dndev-interactive-label[data-display='auto'] {
    display: none;
  }

/* Center all interactive elements */

aside.sidebar[role='navigation'][data-collapsed='true'] .dndev-interactive {
    padding-inline: 0;
    justify-content: center;
  }

/* AppBranding: hide title, center logo */

aside.sidebar[role='navigation'][data-collapsed='true'] .app-branding-link {
    width: 100%;
    justify-content: center;
  }

aside.sidebar[role='navigation'][data-collapsed='true'] .app-branding {
    justify-content: center;
  }

:is(aside.sidebar[role='navigation'][data-collapsed='true'] .app-branding) .app-branding-title {
      display: none;
    }

/* Main content: Starts at header-height and sidebar-width */

main[role='main'] {
  grid-area: main;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  contain: layout style;

  /* First child after breadcrumbs grows to fill space, never shrinks (scroll container owns overflow) */
}

main[role='main'] > *:not(.breadcrumbs-container):first-of-type,main[role='main'] > .breadcrumbs-container + * {
    flex: 1 0 auto;
  }

/* Footer: Full width by default, app presets start after sidebar */

/* box-sizing: border-box ensures borders are included in height */

footer[role='contentinfo'] {
  grid-area: footer;
  box-sizing: border-box;
  grid-column: 1 / -1;
  min-height: var(--footer-height);
  z-index: var(--z-footer);

  background: var(--background);
  border-top: var(--border-hairline) solid var(--border);

  /* Flex container for vertical centering only - components handle horizontal layout */
  display: flex;
  align-items: center;

  /* No padding - preset components handle their own spacing */
  padding: 0;

  /* Children take full width and height - components handle their own layout */
}

footer[role='contentinfo'] > * {
    width: 100%;
    height: 100%;
    padding-inline-start: var(--content-padding);
    padding-inline-end: var(--content-padding);
  }

/* Mobile: Allow footer to grow when content wraps */

@media (width <=1023px) {

footer[role='contentinfo'] {
    height: auto;
}

    footer[role='contentinfo'] > * {
      height: auto;
      min-height: var(--footer-height);
    }
  }

/* Footer text styles */

footer[role='contentinfo'] .footer-copyright {
  color: var(--muted-foreground);
  font-size: var(--font-size-xs);
}

footer[role='contentinfo'] a:not(.dndev-interactive) {
  transition: color var(--dur-fast) ease-out;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--muted-foreground);
  font-size: var(--font-size-sm);
  background: transparent;
}

footer[role='contentinfo'] a:not(.dndev-interactive):hover {
  color: var(--primary);
}

/* ===========================
   MERGED BAR - Mobile Navigation
   Position:fixed trigger bar + Sheet
   CSS toggles visibility based on preset + breakpoint
   =========================== */

.merged-bar {
  position: fixed;
  inset-inline: 0;
  display: none;
  /* Hidden by default - CSS shows on mobile */
  align-items: center;
  background: var(--background);
  z-index: var(--z-header);
  contain: layout style;

  /* Safe area padding for notched devices */
  padding-inline-start: max(var(--content-padding), env(safe-area-inset-left));
  padding-inline-end: max(var(--content-padding), env(safe-area-inset-right));
}

.merged-bar[data-position='top'] {
  top: 0;
  height: var(--header-height);
  border-bottom: 2px solid var(--border);
  padding-top: env(safe-area-inset-top);
}

.merged-bar[data-position='bottom'] {
  bottom: 0;
  height: 48px;
  border-top: 2px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}

.merged-bar-trigger {
  width: 100%;
  height: 100%;
}

.merged-bar-sheet-content {
  padding: var(--gap-md);
  height: 100%;
}

.merged-bar-sheet-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Mobile (<1024px): Show merged-bar, hide zones */

@media (width <=1023px) {
  /* Presets with mergedBar: top (admin, moolti, game, docs) */
  [data-layout='admin'] .merged-bar[data-position='top'],
  [data-layout='moolti'] .merged-bar[data-position='top'],
  [data-layout='game'] .merged-bar[data-position='top'],
  [data-layout='docs'] .merged-bar[data-position='top'] {
    display: flex;
  }

  [data-layout='admin'] .dndev-layout,
  [data-layout='moolti'] .dndev-layout,
  [data-layout='game'] .dndev-layout,
  [data-layout='docs'] .dndev-layout {
    /* Remove padding-top - grid already accounts for header-height, mergedBar is fixed and doesn't affect grid flow */
    /* Content won't go under mergedBar because grid positions main after header row */
  }

  [data-layout='admin'] header[role='banner'],
  [data-layout='moolti'] header[role='banner'],
  [data-layout='game'] header[role='banner'],
  [data-layout='docs'] header[role='banner'] {
    display: none;
  }

  /* Presets with mergedBar: bottom (blog) */
  [data-layout='blog'] .merged-bar[data-position='bottom'] {
    display: flex;
  }

  [data-layout='blog'] .dndev-layout {
    padding-bottom: calc(48px + env(safe-area-inset-bottom));
  }

  [data-layout='blog'] footer[role='contentinfo'] {
    display: none;
  }
}

/* Desktop (>=1024px): Always hide merged-bar */

@media (width >=1024px) {
  .merged-bar {
    display: none !important;
  }
}

/* ===========================
   PRESET DEFINITIONS
   Each preset only shows what's different from defaults
   =========================== */

/**
 * ADMIN PRESET
 * Perfect for: Admin panels, dashboards, management interfaces
 * Overrides: Adds sidebar (240px), constrains width (1480px), tighter spacing
 */

[data-layout='admin'] {
  /* Desktop/Wide (>=1024px) - only overrides */
  --sidebar-width: var(--custom-sidebar-width, 240px);

  /* Admin: Mobile/Tablet (<1024px) - only overrides */
}

@media (width <=1023px) {

[data-layout='admin'] {
    --sidebar-width: 0px;
    /* Override: hide sidebar on mobile */
}
  }

/**
 * MOOLTI PRESET
 * Perfect for: SaaS applications, productivity tools, focused workflows
 * Overrides: No header/footer (sidebar only), sidebar (256px), balanced spacing
 */

[data-layout='moolti'] {
  /* Desktop/Wide (>=1024px) - only overrides */
  --header-height: 0px;
  --sidebar-width: var(--custom-sidebar-width, 256px);
  --footer-height: 0px;
}

[data-layout='moolti'] header[role='banner'] {
    display: none;
  }

[data-layout='moolti'] footer[role='contentinfo'] {
    display: none;
  }

/* Moolti: Mobile/Tablet (<1024px) - only overrides */

@media (width <=1023px) {

[data-layout='moolti'] {
    --header-height: 62px;
    --sidebar-width: 0px;
}
  }

/**
 * DOCS PRESET
 * Perfect for: Documentation sites, knowledge bases, content platforms
 * Overrides: No header, sidebar (300px), comfortable reading spacing
 */

[data-layout='docs'] {
  /* Desktop/Wide (>=1024px) - only overrides */
  --header-height: 0px;
  /* Override: no header - maximizes reading space */
  --sidebar-width: var(--custom-sidebar-width, 300px);
}

[data-layout='docs'] header[role='banner'] {
    display: none;
  }

/* Docs: Mobile/Tablet (<1024px) - only overrides */

@media (width <=1023px) {

[data-layout='docs'] {
    --sidebar-width: 0px;
    /* Override: hide sidebar on mobile */
}
  }

/**
 * LANDING PRESET (Default)
 * Perfect for: Marketing sites, landing pages, public content
 * Uses all default values - no overrides needed
 */

/**
 * BLOG PRESET
 * Perfect for: Blogs, news sites, content management
 * Overrides: Sidebar (280px), constrains width (1480px), content-focused spacing
 */

[data-layout='blog'] {
  --sidebar-width: var(--custom-sidebar-width, 280px);

  /* Blog: Mobile/Tablet (<1024px) - only overrides */
}

@media (width <=1023px) {

[data-layout='blog'] {
    --header-height: 0px;
    --sidebar-width: 0px;
}

    [data-layout='blog'] header[role='banner'] {
      display: none;
    }
  }

/**
 * PLAIN PRESET
 * Perfect for: Full-screen apps, embedded widgets, clean content
 * Overrides: No header/footer/sidebar, minimal spacing
 */

[data-layout='plain'] {
  --header-height: 0px;
  --sidebar-width: 0px;
  --footer-height: 0px;
}

[data-layout='plain'] header[role='banner'] {
    display: none;
  }

[data-layout='plain'] aside.sidebar[role='navigation'] {
    display: none;
  }

[data-layout='plain'] footer[role='contentinfo'] {
    display: none;
  }

/* Plain: Mobile/Tablet (<1024px) - same as desktop, no overrides needed */

/**
 * GAME PRESET
 * Perfect for: Mobile gaming apps, full-screen experiences, touch interfaces
 * Overrides: Minimal spacing for maximum screen real estate
 */

[data-layout='game'] {
  --header-height: 92px;

  /* Game: Mobile/Tablet (<1024px) - only overrides */
}

@media (width <=1023px) {

[data-layout='game'] {
    --footer-height: 0px;
}

    [data-layout='game'] footer[role='contentinfo'] {
      display: none;
    }
  }

/* ===========================
   BREADCRUMBS CONTAINER
   Global breadcrumbs styling
   =========================== */

.breadcrumbs-container {
  /* Sticky: stays pinned at top of scrollable main area */
  position: sticky;
  top: 0;
  z-index: var(--z-breadcrumbs);

  /* Prevent flex grow - should stay at natural height */
  flex: 0 0 auto;
  /* Opaque background so scrolling content doesn't show through */
  background: var(--background);
  border-bottom: 1px solid rgb(from var(--border) r g b / 0.5);

  /* Hide breadcrumbs container when breadcrumbs return null (smart variant on simple routes) */
}

.breadcrumbs-container:not(:has([role='navigation'])) {
    display: none;
  }

/* Breadcrumbs navigation */

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding-inline-start: var(--gap-sm);
  font-size: var(--font-size-base);
  min-height: 32px;
  color: var(--muted-foreground);
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sm);
}

.breadcrumbs .separator,
.breadcrumbs .icon {
  color: color-mix(in srgb, var(--muted-foreground) 50%, transparent);
  width: var(--icon-md);
  height: var(--icon-md);
  flex-shrink: 0;
}

.breadcrumb-link {
  transition: color var(--dur-fast) ease-out;
  color: var(--muted-foreground);
  text-decoration: none;
}

.breadcrumb-link:hover {
  color: var(--primary);
}

.breadcrumb-link:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.breadcrumb-label {
  color: var(--foreground);
  font-weight: var(--font-weight-medium);
}

/* ===========================
   FRAMEWORK INTEGRATION NOTES
   =========================== */

/*
 * USAGE:
 * Use CSS variables directly in CSS or inline styles in components.
 *
 * 1. Direct CSS variable in CSS:
 *    .my-component { height: var(--header-height); }
 *
 * 2. Direct CSS variable in inline style:
 *    style={{ height: 'var(--header-height)' }}
 *
 * 3. Runtime customization:
 *    Use AppProviders layoutOverrides prop for runtime CSS variable injection:
 *    <AppProviders
 *      layoutOverrides={{
 *        '--header-height': '96px',
 *        '--sidebar-width': '320px',
 *      }}
 *    />
 */

/* ===========================
   PAGE CONTAINER
   Semantic layout wrapper with width constraints
   =========================== */

.dndev-container {
  width: 100%;
  max-width: var(--content-width);
  min-width: 0; /* Allow shrinking in flex so max-width wins */
  flex: 1 1 auto;

  /* First child spacing when enabled */
}

.dndev-container[data-gap-first='true'] > *:first-child {
    padding-top: var(--gap-lg);
  }

/* First Section child gets gap-md spacing from top */

.dndev-container  > .dndev-section-full-width:first-child {
    margin-top: var(--gap-md);
  }

.dndev-container {

  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gap-lg);
  /* Controlled by density system */
  /* Default: centered */
  margin-inline-start: auto;
  margin-inline-end: auto;
  /* Always have padding to prevent edge touching */
  padding-inline: var(--gap-md);

  /* Disable centering when explicitly set to false */
}

.dndev-container[data-centered='false'] {
    margin-inline-start: 0;
    margin-inline-end: 0;
    justify-content: flex-start;
  }

/* Full width - no constraints */

.dndev-container[data-variant='full'] {
    --max-content-width: 100%;
    max-width: none;
  }

/* Standard width - responsive */

.dndev-container[data-variant='standard'] {
    --max-content-width: min(87.5rem, 100%);
    max-width: var(--content-width);
    /* 1480px max, but never exceeds container width */
  }

/* Docs width - responsive */

.dndev-container[data-variant='docs'] {
    --max-content-width: min(56.25rem, 100%);
    max-width: var(--content-width);
    /* 900px max, but never exceeds container width */
  }

/* Narrow width - mobile-first single column (PWA, app-like on every device) */

.dndev-container[data-variant='narrow'] {
    --max-content-width: min(var(--narrow-content-max), 100%);
    max-width: var(--content-width);
    /* 600px max, but never exceeds container width */
  }

/* Fixed frame - fills parent exactly, prevents parent scroll */

.dndev-container[data-variant='fixed'] {
    --max-content-width: 100%;
    /* Fill main area */
    max-width: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    gap: 0;
    padding-inline: 0;
    /* Exception: fullscreen games need no padding */
  }

/* Remove gap entirely when only one child */

.dndev-container:has( > *:only-child) {
    gap: 0;
  }

/* ===========================
   BREAKTHROUGH COMPONENTS
   Components that break out of PageContainer width constraints
   =========================== */

/* 
 * ARCHITECTURAL DECISION:
 * Breakthrough CSS lives in @donotdev/ui (not @donotdev/components) because:
 * 
 * 1. **Dependency on PageContainer**: The breakthrough pattern (negative margins + calc width)
 *    only works correctly when inside PageContainer, which provides the padding to break out of.
 * 
 * 2. **Components Package Independence**: @donotdev/components must work standalone without UI.
 *    When used without PageContainer, breakthrough CSS causes overlapping/breaking issues.
 * 
 * 3. **Scoped Application**: By scoping to `.dndev-container >`, breakthrough only applies
 *    when components are children of PageContainer, ensuring safe standalone usage.
 * 
 * 4. **Package Boundaries**: UI package manages layout relationships (PageContainer ↔ components).
 *    Components package provides standalone, reusable components.
 */

/* Breakthrough pattern: only applies inside PageContainer */

.dndev-container > .dndev-section-full-width,
.dndev-container > .dndev-cta,
.dndev-container > .dndev-tech-bento {
  /* Break out of PageContainer padding and max-width constraint */
  /* Account for sidebar: --sidebar-width is 0px for presets without sidebar */
  width: calc(100dvw - var(--sidebar-width));
  max-width: calc(100dvw - var(--sidebar-width));
  margin-inline: calc((-50dvw + var(--sidebar-width) / 2) + 50%);
  /* Eat gap BEFORE section only */
  margin-top: calc(-1 * var(--gap-lg));
  margin-bottom: 0;
  /* Pass through so inner content (e.g. .dndev-section-content) can use it */
  --content-width: var(--max-content-width, 100%);
}

/* HeroSection: only breakthrough when it has fullHeight (needs full viewport background) */

.dndev-container > .dndev-hero-section[style*='height'] {
  width: calc(100dvw - var(--sidebar-width));
  max-width: calc(100dvw - var(--sidebar-width));
  margin-inline: calc((-50dvw + var(--sidebar-width) / 2) + 50%);
  margin-top: calc(-1 * var(--gap-lg));
  margin-bottom: 0;
  --content-width: var(--max-content-width, 100%);
}

.footer-mobile-button:hover {
  background-color: rgb(from var(--muted) r g b / 0.5);
}

/* ===========================
   LAYOUT COMPONENT STYLES
   =========================== */

/* GameContainer - Content + CTA grid for game screens */

/* packages/ui/src/components/layout/GameContainer.css */

/* Container - fills parent */

.dndev-game-container {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  width: 100%;
}

/* Content Area - Scrollable with centering */

.dndev-game-container__content {
  display: flex;
  flex-direction: column;
  min-height: 0; /* Critical: Allow shrinking for scroll */
  width: 100%;
}

/* Scroll wrapper - stretches to full width so scrollbar is at viewport edge */

.dndev-game-container__scroll-wrapper {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  align-self: stretch;
}

/* ScrollArea - fills wrapper */

.dndev-game-container__scroll {
  width: 100%;
  height: 100%;
}

/* Content alignment variants */

.dndev-game-container__content[data-align='center'] {
  align-items: center;
}

.dndev-game-container__content[data-align='start'] {
  align-items: flex-start;
}

.dndev-game-container__content[data-align='stretch'] {
  align-items: stretch;
}

/* Content justify variants */

.dndev-game-container__content[data-justify='center'] {
  justify-content: center;
}

.dndev-game-container__content[data-justify='start'] {
  justify-content: flex-start;
}

.dndev-game-container__content[data-justify='end'] {
  justify-content: flex-end;
}

.dndev-game-container__content[data-justify='between'] {
  justify-content: space-between;
}

/* Narrow content wrapper - constrained by --narrow-content-max, centered inside scroll */

/* height: 100% fills the scroll viewport so children can use percentage heights.
   Content taller than viewport still scrolls — overflow propagates to the scroll container. */

.dndev-game-container__content-narrow {
  width: 100%;
  max-width: var(--narrow-content-max);
  margin-inline: auto;
  height: 100%;
}

/* CTA Zone - Fixed at bottom; safe area for notched devices */

.dndev-game-container__cta {
  display: flex;
  flex-direction: column;
  padding-top: var(--gap-md);
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 2px solid var(--border);
}

/* CTA Button */

.dndev-game-container__cta-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--gap-sm);
  width: 100%;
}

.dndev-game-container__cta-button {
  height: var(--touch-target);
  width: 100%;
  border-radius: 0;
}

/* AppIcon - header icon styling */

.app-icon-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  width: auto;
  height: var(--header-height);
}

.app-icon-header svg {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ===========================
   APP BRANDING
   =========================== */

.app-branding-link {
  display: inline-flex;
  height: 100%;
}

.app-branding {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sm);
  height: 100%;
}

.app-branding-logo {
  display: inline-flex;
  flex-shrink: 0;
  /* Use header-height when available, fallback to touch-target for sidebar */
  height: max(
    calc(var(--header-height) - 2 * var(--gap-sm)),
    var(--touch-target)
  );
  width: auto;
}

.app-branding-logo svg,
.app-branding-logo img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.app-branding-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* COMPACT mode - always hide title */

.app-branding[data-display='compact'] .app-branding-title {
  display: none;
}

/* FULL mode - always show title */

.app-branding[data-display='full'] .app-branding-title {
  display: inline;
}

/* AUTO mode - responds to header-start container query in layout-variables.css */

.app-branding[data-display='auto'] .app-branding-title {
  display: inline;
}
