/* Global CSS Variables, Layers, and Dark Mode */
/* 37signals-compliant design token system */

/* ========================================
   DEFINE CASCADE LAYERS
   ======================================== */
@layer reset, base, layout, components, utilities;

/* ========================================
   DESIGN TOKENS - DARK MODE (DEFAULT)
   ======================================== */

:root {
  /* ========================================
     SPACING TOKENS
     ======================================== */
  --space-3xs: 0.25rem; /* 4px */
  --space-2xs: 0.5rem; /* 8px */
  --space-xs: 0.75rem; /* 12px */
  --space-sm: 1rem; /* 16px */
  --space-md: 1.5rem; /* 24px */
  --space-lg: 2rem; /* 32px */
  --space-xl: 3rem; /* 48px */
  --space-2xl: 4rem; /* 64px */
  --space-3xl: 6rem; /* 96px */
  --space-4xl: 8rem; /* 128px */
  --space-5xl: 10rem; /* 160px */
  --space-6xl: 12rem; /* 192px */

  --inline-space: 1ch;
  --block-space: 1rem;

  /* ========================================
     TYPOGRAPHY TOKENS
     ======================================== */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem; /* 36px */
  --text-5xl: 3rem; /* 48px */

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* ========================================
     OKLCH COLOR TOKENS - DARK MODE (DEFAULT)
     ======================================== */

  /* Canvas (backgrounds) */
  --lch-canvas: 20% 0.0195 232.58; /* Dark background */
  --lch-canvas-subtle: 22% 0.02 232; /* Slightly lighter */
  --lch-canvas-secondary: 25% 0.025 232; /* Secondary dark bg */

  /* Ink (text colors) */
  --lch-ink-darkest: 96.02% 0.0034 260; /* Almost white */
  --lch-ink-dark: 85% 0.01 260; /* Light gray */
  --lch-ink: 75% 0.015 260; /* Medium light gray */
  --lch-ink-light: 65% 0.02 260; /* Medium gray */
  --lch-ink-lighter: 55% 0.025 260; /* Darker gray */
  --lch-ink-lightest: 45% 0.03 260; /* Dark gray */
  --lch-ink-inverted: 26% 0.05 264; /* Dark text for light bg */

  /* Primary/Brand (blue) */
  --lch-primary-50: 97.1% 0.013 260;
  --lch-primary-100: 93.6% 0.032 260;
  --lch-primary-200: 88.5% 0.062 260;
  --lch-primary-300: 80.8% 0.114 260;
  --lch-primary-400: 70.4% 0.191 260;
  --lch-primary-500: 63.7% 0.237 260; /* Main brand color */
  --lch-primary-600: 57.7% 0.245 260;
  --lch-primary-700: 50.5% 0.213 260;
  --lch-primary-800: 44.4% 0.177 260;
  --lch-primary-900: 39.6% 0.141 260;

  /* Success (green) */
  --lch-success-50: 97.1% 0.013 142;
  --lch-success-100: 93.6% 0.032 142;
  --lch-success-200: 88.5% 0.062 142;
  --lch-success-300: 80.8% 0.114 142;
  --lch-success-400: 70.4% 0.191 142;
  --lch-success-500: 63.7% 0.237 142;
  --lch-success-600: 57.7% 0.245 142;
  --lch-success-700: 50.5% 0.213 142;
  --lch-success-800: 44.4% 0.177 142;
  --lch-success-900: 39.6% 0.141 142;

  /* Warning (yellow/orange) */
  --lch-warning-50: 97.1% 0.013 75;
  --lch-warning-100: 93.6% 0.032 75;
  --lch-warning-200: 88.5% 0.062 75;
  --lch-warning-300: 80.8% 0.114 75;
  --lch-warning-400: 70.4% 0.191 75;
  --lch-warning-500: 63.7% 0.237 75;
  --lch-warning-600: 57.7% 0.245 75;
  --lch-warning-700: 50.5% 0.213 75;
  --lch-warning-800: 44.4% 0.177 75;
  --lch-warning-900: 39.6% 0.141 75;

  /* Danger/Error (red) */
  --lch-danger-50: 97.1% 0.013 20;
  --lch-danger-100: 93.6% 0.032 20;
  --lch-danger-200: 88.5% 0.062 20;
  --lch-danger-300: 80.8% 0.114 20;
  --lch-danger-400: 70.4% 0.191 20;
  --lch-danger-500: 63.7% 0.237 20;
  --lch-danger-600: 57.7% 0.245 20;
  --lch-danger-700: 50.5% 0.213 20;
  --lch-danger-800: 44.4% 0.177 20;
  --lch-danger-900: 39.6% 0.141 20;

  /* Borders (dark mode) */
  --lch-border: 35% 0.015 232; /* Dark border */
  --lch-border-dark: 45% 0.02 232; /* Medium border */
  --lch-border-darker: 55% 0.025 232; /* Lighter border */

  /* Dark mode: Use brighter primary for better visibility */
  --lch-primary-500: 70% 0.2 260;

  /* ========================================
     SEMANTIC COLOR ALIASES
     ======================================== */
  --color-canvas: oklch(var(--lch-canvas));
  --color-canvas-subtle: oklch(var(--lch-canvas-subtle));
  --color-canvas-secondary: oklch(var(--lch-canvas-secondary));

  --color-ink: oklch(var(--lch-ink));
  --color-ink-dark: oklch(var(--lch-ink-dark));
  --color-ink-darkest: oklch(var(--lch-ink-darkest));
  --color-ink-light: oklch(var(--lch-ink-light));
  --color-ink-lighter: oklch(var(--lch-ink-lighter));
  --color-ink-lightest: oklch(var(--lch-ink-lightest));
  --color-ink-inverted: oklch(var(--lch-ink-inverted));

  --color-primary: oklch(var(--lch-primary-500));
  --color-primary-hover: oklch(var(--lch-primary-600));
  --color-primary-light: oklch(var(--lch-primary-100));
  --color-primary-dark: oklch(var(--lch-primary-700));

  --color-success: oklch(var(--lch-success-500));
  --color-success-light: oklch(var(--lch-success-100));
  --color-success-dark: oklch(var(--lch-success-700));

  --color-warning: oklch(var(--lch-warning-500));
  --color-warning-light: oklch(var(--lch-warning-100));
  --color-warning-dark: oklch(var(--lch-warning-700));

  --color-danger: oklch(var(--lch-danger-500));
  --color-danger-light: oklch(var(--lch-danger-100));
  --color-danger-dark: oklch(var(--lch-danger-700));

  --color-border: oklch(var(--lch-border));
  --color-border-dark: oklch(var(--lch-border-dark));
  --color-border-darker: oklch(var(--lch-border-darker));

  /* ========================================
     BORDER RADIUS TOKENS
     ======================================== */
  --radius-sm: 0.25rem; /* 4px */
  --radius-base: 0.5rem; /* 8px */
  --radius-lg: 0.75rem; /* 12px */
  --radius-xl: 1rem; /* 16px */
  --radius-2xl: 1.5rem; /* 24px */
  --radius-full: 9999px; /* Fully rounded */

  /* ========================================
     SHADOW TOKENS (dark mode - stronger shadows)
     ======================================== */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6),
    0 4px 6px -4px rgb(0 0 0 / 0.6);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.7),
    0 8px 10px -6px rgb(0 0 0 / 0.7);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.4);

  /* ========================================
     Z-INDEX SCALE
     ======================================== */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-nav: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-tooltip: 60;
  --z-notification: 70;

  /* ========================================
     ANIMATION TOKENS
     ======================================== */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;

  /* ========================================
     LAYOUT TOKENS
     ======================================== */
  --main-padding: clamp(
    var(--inline-space),
    3vw,
    calc(var(--inline-space) * 3)
  );
  --container-width: 1280px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;

  /* ========================================
     BREAKPOINTS (for reference in JS)
     ======================================== */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}

/* ========================================
   DARK MODE (explicit toggle)
   Same as default, for toggle functionality
   ======================================== */
html[data-theme="dark"] {
  --lch-canvas: 20% 0.0195 232.58;
  --lch-canvas-subtle: 22% 0.02 232;
  --lch-canvas-secondary: 25% 0.025 232;

  --lch-ink-darkest: 96.02% 0.0034 260;
  --lch-ink-dark: 85% 0.01 260;
  --lch-ink: 75% 0.015 260;
  --lch-ink-light: 65% 0.02 260;
  --lch-ink-lighter: 55% 0.025 260;
  --lch-ink-lightest: 45% 0.03 260;
  --lch-ink-inverted: 26% 0.05 264;

  --lch-border: 35% 0.015 232;
  --lch-border-dark: 45% 0.02 232;
  --lch-border-darker: 55% 0.025 232;

  /* Brighter primary for dark mode */
  --lch-primary-500: 70% 0.2 260;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6),
    0 4px 6px -4px rgb(0 0 0 / 0.6);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.7),
    0 8px 10px -6px rgb(0 0 0 / 0.7);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.4);
}

/* ========================================
   LIGHT MODE (opt-in via data-theme="light")
   ======================================== */
html[data-theme="light"] {
  --lch-canvas: 100% 0 0; /* Pure white */
  --lch-canvas-subtle: 98% 0 0; /* Off-white */
  --lch-canvas-secondary: 96% 0.005 264; /* Light gray bg */

  --lch-ink-darkest: 26% 0.05 264; /* Almost black */
  --lch-ink-dark: 40% 0.03 264; /* Dark gray */
  --lch-ink: 50% 0.02 264; /* Medium gray */
  --lch-ink-light: 65% 0.02 264; /* Light gray */
  --lch-ink-lighter: 75% 0.01 264; /* Lighter gray */
  --lch-ink-lightest: 85% 0.005 264; /* Very light gray */
  --lch-ink-inverted: 96.02% 0.0034 260; /* White text */

  --lch-border: 92% 0 0; /* Light border */
  --lch-border-dark: 85% 0.005 264; /* Medium border */
  --lch-border-darker: 75% 0.01 264; /* Dark border */

  /* Standard primary for light mode */
  --lch-primary-500: 63.7% 0.237 260;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* ========================================
   RESPONSIVE TYPOGRAPHY
   ======================================== */
@media (max-width: 639px) {
  :root {
    --text-xs: 0.8rem;
    --text-sm: 0.925rem;
    --text-base: 1.05rem;
    --text-lg: 1.2rem;
    --text-xl: 1.35rem;
  }
}
/* Modern CSS Reset */
/* Based on Josh Comeau's reset with 37signals patterns */

@layer reset {
  /* Box sizing */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Remove default margins */
  * {
    margin: 0;
  }

  /* Body defaults */
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

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

  /* Form elements inherit font */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  /* Remove button styling */
  button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  /* Avoid text overflows */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  /* Root stacking context */
  #root,
  #__next {
    isolation: isolate;
  }

  /* Remove list styles */
  ol,
  ul {
    list-style: none;
    padding: 0;
  }

  /* Link defaults */
  a {
    text-decoration: inherit;
    color: inherit;
  }

  /* Table defaults */
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  /* Form defaults */
  fieldset {
    border: 0;
    padding: 0;
    margin: 0;
  }

  /* Remove default styles for dialog */
  dialog {
    border: none;
    padding: 0;
  }
}
/* Base Element Styles */
/* Default styling for HTML elements */

@layer base {
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-block-size: 100vh;
  }

  body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--line-height-normal);
    color: var(--color-ink);
    background-color: var(--color-canvas);
    min-height: 100vh;
  }

  /* Typography */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-darkest);
    line-height: var(--line-height-tight);
  }

  h1 {
    font-size: var(--text-5xl);
    margin-block-end: var(--space-lg);
  }

  h2 {
    font-size: var(--text-4xl);
    margin-block-end: var(--space-md);
  }

  h3 {
    font-size: var(--text-3xl);
    margin-block-end: var(--space-md);
  }

  h4 {
    font-size: var(--text-2xl);
    margin-block-end: var(--space-sm);
  }

  h5 {
    font-size: var(--text-xl);
    margin-block-end: var(--space-sm);
  }

  h6 {
    font-size: var(--text-lg);
    margin-block-end: var(--space-xs);
  }

  p {
    margin-block-end: var(--space-sm);
  }

  /* Links */
  a {
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out);

    @media (any-hover: hover) {
      &:hover {
        color: var(--color-primary-hover);
      }
    }

    &:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
      border-radius: var(--radius-sm);
    }
  }

  /* Code */
  code,
  kbd,
  samp,
  pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  code {
    background-color: var(--color-canvas-secondary);
    padding: 0.125em 0.375em;
    border-radius: var(--radius-sm);
  }

  pre {
    background-color: var(--color-canvas-secondary);
    padding: var(--space-md);
    border-radius: var(--radius-base);
    overflow-x: auto;
    margin-block-end: var(--space-md);

    code {
      background-color: transparent;
      padding: 0;
    }
  }

  /* Horizontal rule */
  hr {
    border: none;
    border-block-start: 1px solid var(--color-border);
    margin-block: var(--space-lg);
  }

  /* Strong and emphasis */
  strong,
  b {
    font-weight: var(--font-weight-bold);
  }

  em,
  i {
    font-style: italic;
  }

  /* Small text */
  small {
    font-size: var(--text-sm);
  }

  /* Mark/highlight */
  mark {
    background-color: var(--color-warning-light);
    color: var(--color-ink-darkest);
    padding: 0.125em 0.25em;
    border-radius: var(--radius-sm);
  }

  /* Blockquote */
  blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding-inline-start: var(--space-md);
    padding-block: var(--space-sm);
    margin-block-end: var(--space-md);
    font-style: italic;
    color: var(--color-ink-light);
  }

  /* Lists */
  ol,
  ul {
    padding-inline-start: var(--space-lg);
    margin-block-end: var(--space-md);

    li {
      margin-block-end: var(--space-2xs);
    }
  }

  ol {
    list-style-type: decimal;
  }

  ul {
    list-style-type: disc;
  }

  /* Definition list */
  dl {
    margin-block-end: var(--space-md);

    dt {
      font-weight: var(--font-weight-semibold);
      color: var(--color-ink-darkest);
      margin-block-end: var(--space-2xs);
    }

    dd {
      margin-inline-start: var(--space-md);
      margin-block-end: var(--space-sm);
      color: var(--color-ink);
    }
  }

  /* Focus visible */
  :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  /* Selection */
  ::selection {
    background-color: var(--color-primary-light);
    color: var(--color-ink-darkest);
  }

  /* Scrollbar (WebKit) */
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  ::-webkit-scrollbar-track {
    background-color: var(--color-canvas-secondary);
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--color-border-darker);
    border-radius: var(--radius-full);
    border: 2px solid var(--color-canvas-secondary);

    &:hover {
      background-color: var(--color-ink-light);
    }
  }

  /* Layout Body Classes */
  .layout-dashboard {
    min-block-size: 100vh;
    background: var(--color-canvas-subtle);
  }

  .layout-minimal {
    min-block-size: 100vh;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    background: var(--color-canvas);
  }

  .layout-application {
    min-block-size: 100vh;
  }

  .layout-application.has-navbar {
    padding-block-start: 6rem;
  }

  @media (min-width: 1024px) {
    .layout-application.has-navbar {
      padding-block-start: 4rem;
    }
  }

  .layout-application.has-container {
    max-inline-size: 72rem;
    margin-inline: auto;
    padding-inline: var(--space-md);
  }

  @media (min-width: 640px) {
    .layout-application.has-container {
      padding-inline: var(--space-xl);
    }
  }

  @media (min-width: 1024px) {
    .layout-application.has-container {
      padding-inline: var(--space-2xl);
    }
  }

  /* Main content wrapper */
  .main {
    display: flex;
    flex-direction: column;
  }

  .main.has-footer-spacing {
    padding-block-end: 5rem;
  }

  .main > main {
    flex: 1;
  }

  .main > main.has-padding {
    padding-inline: var(--space-sm);
  }

  @media (min-width: 1024px) {
    .main > main.has-padding {
      padding-inline: 0;
    }
  }

  .main > main.full-height {
    min-block-size: 100%;
  }
}
/* Layout Primitives */
/* Grid, container, and layout utilities */

@layer layout {
  /* Container */
  .container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--main-padding);
    max-width: var(--container-width);
  }

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

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

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

  .container--fluid {
    max-width: none;
  }

  /* Section spacing */
  .section {
    padding-block: var(--space-2xl);
  }

  .section--sm {
    padding-block: var(--space-lg);
  }

  .section--lg {
    padding-block: var(--space-3xl);
  }

  /* Grid */
  .grid {
    display: grid;
    gap: var(--space-md);
  }

  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid--auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  }

  .grid--auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  }

  /* Responsive variants */
  @media (max-width: 768px) {
    .grid--2,
    .grid--3,
    .grid--4 {
      grid-template-columns: 1fr;
    }
  }

  /* Flex utilities */
  .flex {
    display: flex;
  }

  .flex--row {
    flex-direction: row;
  }

  .flex--col {
    flex-direction: column;
  }

  .flex--wrap {
    flex-wrap: wrap;
  }

  .flex--center {
    align-items: center;
    justify-content: center;
  }

  .flex--between {
    justify-content: space-between;
  }

  .flex--around {
    justify-content: space-around;
  }

  .flex--evenly {
    justify-content: space-evenly;
  }

  /* Stack (vertical spacing) */
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .stack--xs {
    gap: var(--space-xs);
  }

  .stack--sm {
    gap: var(--space-sm);
  }

  .stack--lg {
    gap: var(--space-lg);
  }

  .stack--xl {
    gap: var(--space-xl);
  }

  /* Cluster (horizontal spacing with wrapping) */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
  }

  .cluster > * {
    flex: 0 0 auto;
  }

  /* Sidebar Layout */
  .layout-with-sidebar {
    display: flex;
    min-height: 100vh;
  }

  .layout-with-sidebar > aside {
    flex-shrink: 0;
  }

  .layout-with-sidebar > main,
  .layout-with-sidebar__main {
    flex: 1;
    min-width: 0;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Main Content Area */
  .main-content {
    padding: var(--space-md);
    flex: 1;
  }

  @media (min-width: 640px) {
    .main-content {
      padding: var(--space-xl);
    }
  }

  .main-content--no-top-padding {
    padding-block-start: 0;
  }

  /* Mobile Header */
  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    border-block-end: 1px solid var(--color-border);
    background: var(--color-canvas);
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
  }

  @media (min-width: 1024px) {
    .mobile-header {
      display: none;
    }
  }

  .mobile-header__menu-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-ink-dark);
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
  }

  .mobile-header__menu-icon {
    inline-size: 1.5rem;
    block-size: 1.5rem;
  }

  .mobile-header__menu-badge {
    position: absolute;
    inset-block-start: -0.25rem;
    inset-inline-end: -0.25rem;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    background: var(--color-danger);
    border-radius: 50%;
  }

  .mobile-header__menu-text {
    font-weight: var(--font-weight-medium);
  }

  .mobile-header__logo {
    block-size: 1.5rem;
    inline-size: auto;
    max-inline-size: 6.25rem;
  }

  .mobile-header__spacer {
    inline-size: 3.5rem;
  }

  /* Content Container */
  .content-container {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    max-inline-size: 80rem;
    margin-inline: auto;
    flex: 1;
    min-height: 0;
  }

  /* Breadcrumb Container */
  .breadcrumb-container {
    display: none;
    padding: var(--space-md) var(--space-xl);
    padding-block-end: var(--space-sm);
  }

  @media (min-width: 1024px) {
    .breadcrumb-container {
      display: block;
    }
  }

  /* Page Header Container */
  .page-header-container {
    padding: var(--space-md) var(--space-xl);
    padding-block-end: var(--space-lg);
  }

  /* Backdrop */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: oklch(from var(--lch-ink-darkest) l c h / 0.6);
    z-index: 40;
    transition: opacity 300ms var(--ease-out);
    opacity: 0;
  }

  @media (max-width: 1023px) {
    .sidebar-backdrop.is-visible {
      display: block;
      opacity: 1;
    }
  }

  /* Page Header Pattern */
  .page-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-block-end: var(--space-lg);
  }

  .page-header__content h2 {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
  }

  .page-header__content p {
    margin-block-start: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--color-ink);
  }

  /* Stats Grid Pattern */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-md);
    margin-block-end: var(--space-lg);
  }

  .stat-card {
    background-color: var(--color-canvas-secondary);
    border-radius: var(--radius-base);
    padding: var(--space-md);
  }

  .stat-card__label {
    font-size: var(--text-sm);
    color: var(--color-ink);
    margin-block-end: var(--space-xs);
  }

  .stat-card__value {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-darkest);
  }

  /* Detail Header Pattern */
  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-block-end: var(--space-lg);
  }

  .detail-header__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
    margin-block-end: var(--space-sm);
  }

  .detail-header__meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .detail-header__actions {
    display: flex;
    gap: var(--space-sm);
  }

  /* Form Container */
  .form-container {
    max-width: 42rem;
  }

  .form-container--wide {
    max-width: 48rem;
  }
}
/* Utility Classes */
/* Minimal, focused utilities - ~60 total */

@layer utilities {
  /* Display */
  .hidden {
    display: none !important;
  }

  .block {
    display: block;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  /* Visibility */
  .invisible {
    visibility: hidden;
  }

  .visually-hidden {
    clip-path: inset(50%);
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
  }

  /* Text alignment */
  .text-left {
    text-align: left;
  }

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

  .text-right {
    text-align: right;
  }

  /* Text decoration */
  .underline {
    text-decoration: underline;
  }

  .no-underline {
    text-decoration: none;
  }

  /* Text transform */
  .uppercase {
    text-transform: uppercase;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .capitalize {
    text-transform: capitalize;
  }

  /* Font weight */
  .font-normal {
    font-weight: var(--font-weight-normal);
  }

  .font-medium {
    font-weight: var(--font-weight-medium);
  }

  .font-semibold {
    font-weight: var(--font-weight-semibold);
  }

  .font-bold {
    font-weight: var(--font-weight-bold);
  }

  /* Font size */
  .text-xs {
    font-size: var(--text-xs);
  }

  .text-sm {
    font-size: var(--text-sm);
  }

  .text-base {
    font-size: var(--text-base);
  }

  .text-lg {
    font-size: var(--text-lg);
  }

  .text-xl {
    font-size: var(--text-xl);
  }

  .text-2xl {
    font-size: var(--text-2xl);
  }

  /* Text color helpers */
  .text-muted {
    color: var(--color-ink-light);
  }

  .text-subtle {
    color: var(--color-ink-lighter);
  }

  .text-primary {
    color: var(--color-primary);
  }

  .text-success {
    color: var(--color-success);
  }

  .text-warning {
    color: var(--color-warning-dark);
  }

  .text-danger {
    color: var(--color-danger);
  }

  /* Link utilities */
  .link {
    color: var(--color-ink-darkest);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
  }

  @media (any-hover: hover) {
    .link:hover {
      color: var(--color-primary);
    }
  }

  .link--muted {
    color: var(--color-ink);
    font-weight: var(--font-weight-normal);
  }

  @media (any-hover: hover) {
    .link--muted:hover {
      color: var(--color-ink-darkest);
    }
  }

  .link--primary {
    color: var(--color-primary);
  }

  @media (any-hover: hover) {
    .link--primary:hover {
      text-decoration: underline;
    }
  }

  /* Flex utilities */
  .flex-1 {
    flex: 1;
  }

  /* Background helpers */
  .bg-canvas {
    background-color: var(--color-canvas);
  }

  .bg-secondary {
    background-color: var(--color-canvas-secondary);
  }

  /* Spacing utilities (block) */
  .mb-0 {
    margin-block-end: 0;
  }

  .mb-xs {
    margin-block-end: var(--space-xs);
  }

  .mb-sm {
    margin-block-end: var(--space-sm);
  }

  .mb-md {
    margin-block-end: var(--space-md);
  }

  .mb-lg {
    margin-block-end: var(--space-lg);
  }

  .mt-xs {
    margin-block-start: var(--space-xs);
  }

  .mt-sm {
    margin-block-start: var(--space-sm);
  }

  .mt-md {
    margin-block-start: var(--space-md);
  }

  .mt-lg {
    margin-block-start: var(--space-lg);
  }

  .my-md {
    margin-block: var(--space-md);
  }

  /* Padding utilities */
  .p-0 {
    padding: 0;
  }

  .p-sm {
    padding: var(--space-sm);
  }

  .p-md {
    padding: var(--space-md);
  }

  .p-lg {
    padding: var(--space-lg);
  }

  .pt-lg {
    padding-block-start: var(--space-lg);
  }

  .pt-xl {
    padding-block-start: var(--space-xl);
  }

  .pt-2xl {
    padding-block-start: var(--space-2xl);
  }

  .pt-3xl {
    padding-block-start: var(--space-3xl);
  }

  .pt-navbar {
    padding-block-start: 5rem;
  }

  /* Overflow */
  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-scroll {
    overflow: scroll;
  }

  /* Position */
  .relative {
    position: relative;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .sticky {
    position: sticky;
  }

  /* Page layouts */
  .page-center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 100vh;
    padding: var(--space-2xl) var(--space-md);
  }

  /* Width */
  .w-full {
    width: 100%;
  }

  .w-auto {
    width: auto;
  }

  /* Height */
  .h-full {
    height: 100%;
  }

  .h-screen {
    height: 100vh;
  }

  /* Pointer events */
  .pointer-events-none {
    pointer-events: none;
  }

  .pointer-events-auto {
    pointer-events: auto;
  }

  /* Cursor */
  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-not-allowed {
    cursor: not-allowed;
  }

  /* User select */
  .select-none {
    user-select: none;
  }

  .select-text {
    user-select: text;
  }

  /* Rounded */
  .rounded {
    border-radius: var(--radius-base);
  }

  .rounded-sm {
    border-radius: var(--radius-sm);
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-full {
    border-radius: var(--radius-full);
  }

  /* Shadow */
  .shadow {
    box-shadow: var(--shadow-base);
  }

  .shadow-sm {
    box-shadow: var(--shadow-sm);
  }

  .shadow-md {
    box-shadow: var(--shadow-md);
  }

  .shadow-lg {
    box-shadow: var(--shadow-lg);
  }

  .shadow-none {
    box-shadow: none;
  }

  /* Truncate text */
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Animations */
  .fade-in {
    animation: fadeIn var(--duration-base) var(--ease-out);
  }

  .slide-in {
    animation: slideIn var(--duration-base) var(--ease-out);
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideIn {
    from {
      transform: translateY(1rem);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* Responsive utilities */
  @media (max-width: 639px) {
    .sm\:hidden {
      display: none;
    }
  }

  @media (min-width: 640px) {
    .sm\:block {
      display: block;
    }
  }

  @media (min-width: 768px) {
    .md\:block {
      display: block;
    }
  }

  @media (min-width: 1024px) {
    .lg\:block {
      display: block;
    }
  }

  /* Transform utilities for mobile menu */
  .translate-x-0 {
    transform: translateX(0);
  }

  .-translate-x-full {
    transform: translateX(-100%);
  }

  /* Opacity utilities */
  .opacity-0 {
    opacity: 0;
  }

  .opacity-100 {
    opacity: 1;
  }

  /* Flex utilities */
  .flex-gap-sm {
    display: flex;
    gap: var(--space-sm);
  }

  .flex-row {
    display: flex;
    flex-direction: row;
  }

  /* Table utilities */
  .table-row-link {
    display: table-row;
    text-decoration: none;
    color: inherit;
  }

  .table-row-link:hover {
    color: inherit;
  }

  /* Icon utilities */
  .icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
  }

  .icon--sm {
    width: 1rem;
    height: 1rem;
  }

  .icon--lg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .icon--xl {
    width: 2rem;
    height: 2rem;
  }

  .icon--2xl {
    width: 3rem;
    height: 3rem;
  }

  .icon--success {
    color: var(--color-success);
  }

  .icon--danger {
    color: var(--color-danger);
  }

  .icon--warning {
    color: var(--color-warning-dark);
  }

  .icon--info {
    color: var(--color-primary);
  }

  .icon--muted {
    color: var(--color-ink-light);
  }
}
/* Accordion Component */
/* Collapsible content sections using native <details> element */

@layer components {
  .accordion {
    /* CSS Variable API */
    --accordion-border-color: var(--color-border);
    --accordion-background: var(--color-canvas);
    --accordion-padding: var(--space-md);
    --accordion-border-radius: var(--radius-base);
    --accordion-transition: var(--duration-base) var(--ease-in-out);

    background-color: var(--accordion-background);
    border: 1px solid var(--accordion-border-color);
    border-radius: var(--accordion-border-radius);
    margin-block-end: var(--space-xs);
  }

  .accordion-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--accordion-padding);
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-weight: var(--font-weight-medium);
  }

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

  .accordion-summary::marker {
    display: none;
  }

  @media (any-hover: hover) {
    .accordion-summary:hover {
      background-color: var(--color-canvas-subtle);
    }
  }

  .accordion-summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
  }

  .accordion-title {
    flex: 1;
  }

  .accordion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin-inline-start: var(--space-sm);
    transition: transform var(--accordion-transition);
  }

  .accordion-icon::before {
    content: "▼";
    font-size: var(--text-sm);
    color: var(--color-ink-light);
  }

  .accordion[open] .accordion-icon {
    transform: rotate(180deg);
  }

  .accordion-content {
    padding: 0 var(--accordion-padding) var(--accordion-padding);
    animation: accordion-expand var(--accordion-transition);
  }

  @keyframes accordion-expand {
    from {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @supports (animation-timeline: scroll()) {
    .accordion-content {
      @starting-style {
        opacity: 0;
        transform: translateY(-0.5rem);
      }
    }
  }

  /* Variants */
  .accordion--primary {
    --accordion-border-color: var(--color-primary);
  }

  .accordion--primary .accordion-summary {
    background-color: oklch(var(--lch-primary-50));
  }

  .accordion--bordered {
    border-width: 2px;
  }

  .accordion--flush {
    border: 0;
    border-radius: 0;
    border-block-end: 1px solid var(--accordion-border-color);
  }

  .accordion--flush:last-child {
    border-block-end: 0;
  }
}
/* Alert Component */
/* Notification/alert messages with contextual styling */

@layer components {
  .alert {
    --alert-background: var(--color-canvas-secondary);
    --alert-border-color: var(--color-border-dark);
    --alert-color: var(--color-ink);
    --alert-icon-color: var(--color-ink-light);

    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    border: 1px solid var(--alert-border-color);
    border-radius: var(--radius-base);
    background-color: var(--alert-background);
    color: var(--alert-color);
    border-inline-start-width: 4px;
  }

  .alert__icon {
    flex-shrink: 0;
    color: var(--alert-icon-color);
    inline-size: 1.25em;
    block-size: 1.25em;
  }

  .alert__content {
    flex: 1;
    min-width: 0;
  }

  .alert__title {
    font-weight: var(--font-weight-semibold);
    margin-block-end: var(--space-2xs);
    color: var(--alert-color);
  }

  .alert__message {
    font-size: var(--text-sm);
    color: var(--alert-color);
  }

  .alert__dismiss {
    flex-shrink: 0;
    appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--space-2xs);
    color: var(--alert-icon-color);
    border-radius: var(--radius-sm);
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  .alert__dismiss:hover {
    background-color: oklch(var(--lch-ink) / 0.1);
  }

  /* Variants */
  .alert--info {
    --alert-background: var(--color-primary-light);
    --alert-border-color: var(--color-primary);
    --alert-color: var(--color-primary-dark);
    --alert-icon-color: var(--color-primary);
  }

  .alert--success {
    --alert-background: var(--color-success-light);
    --alert-border-color: var(--color-success);
    --alert-color: var(--color-success-dark);
    --alert-icon-color: var(--color-success);
  }

  .alert--warning {
    --alert-background: var(--color-warning-light);
    --alert-border-color: var(--color-warning);
    --alert-color: var(--color-warning-dark);
    --alert-icon-color: var(--color-warning-dark);
  }

  .alert--danger {
    --alert-background: var(--color-danger-light);
    --alert-border-color: var(--color-danger);
    --alert-color: var(--color-danger-dark);
    --alert-icon-color: var(--color-danger);
  }

  /* Impersonation Banner */
  .impersonation-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-xs) var(--space-md);
    background-color: var(--color-primary);
    color: var(--color-canvas);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
  }

  .impersonation-banner a {
    color: var(--color-canvas);
    text-decoration: underline;
  }

  .impersonation-banner a:hover {
    opacity: 0.9;
  }
}
/* Avatar Component */
/* User avatars with sizes, groups, and status indicators */

@layer components {
  .avatar {
    --avatar-size: 2.5rem;
    --avatar-background: var(--color-canvas-secondary);
    --avatar-color: var(--color-ink);
    --avatar-border-color: var(--color-canvas);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--avatar-size);
    block-size: var(--avatar-size);
    background-color: var(--avatar-background);
    color: var(--avatar-color);
    border-radius: var(--radius-full);
    font-size: calc(var(--avatar-size) * 0.4);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    overflow: hidden;
    flex-shrink: 0;
  }

  .avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* Sizes */
  .avatar--xs {
    --avatar-size: 1.5rem;
  }

  .avatar--sm {
    --avatar-size: 2rem;
  }

  .avatar--lg {
    --avatar-size: 3rem;
  }

  .avatar--xl {
    --avatar-size: 4rem;
  }

  .avatar--2xl {
    --avatar-size: 6rem;
  }

  /* Square variant */
  .avatar--square {
    border-radius: var(--radius-base);
  }

  /* Status indicator */
  .avatar__status {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    inline-size: 25%;
    block-size: 25%;
    border-radius: var(--radius-full);
    border: 2px solid var(--avatar-border-color);
  }

  .avatar__status--online {
    background-color: var(--color-success);
  }

  .avatar__status--offline {
    background-color: var(--color-ink-lighter);
  }

  .avatar__status--busy {
    background-color: var(--color-danger);
  }

  .avatar__status--away {
    background-color: var(--color-warning);
  }

  /* Avatar group */
  .avatar-group {
    display: inline-flex;
    align-items: center;
  }

  .avatar-group .avatar {
    border: 2px solid var(--color-canvas);
  }

  .avatar-group .avatar:not(:first-child) {
    margin-inline-start: calc(var(--avatar-size) * -0.3);
  }

  .avatar-group__more {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--avatar-size);
    block-size: var(--avatar-size);
    background-color: var(--avatar-background);
    color: var(--avatar-color);
    border-radius: var(--radius-full);
    font-size: calc(var(--avatar-size) * 0.4);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 0;
  }
}
/* Badge Component */
/* Small status indicators and labels */

@layer components {
  .badge {
    --badge-background: var(--color-canvas-secondary);
    --badge-color: var(--color-ink);
    --badge-border-color: transparent;
    --badge-font-size: var(--text-xs);
    --badge-padding-y: 0.25em;
    --badge-padding-x: 0.625em;
    --badge-border-radius: var(--radius-full);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375em;
    padding: var(--badge-padding-y) var(--badge-padding-x);
    font-size: var(--badge-font-size);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    background-color: var(--badge-background);
    color: var(--badge-color);
    border: 1px solid var(--badge-border-color);
    border-radius: var(--badge-border-radius);
  }

  /* Dot indicator */
  .badge__dot {
    inline-size: 0.5em;
    block-size: 0.5em;
    border-radius: var(--radius-full);
    background-color: currentColor;
  }

  /* Variants */
  .badge--primary {
    --badge-background: var(--color-primary);
    --badge-color: var(--color-ink-inverted);
  }

  .badge--secondary {
    --badge-background: var(--color-canvas-secondary);
    --badge-color: var(--color-ink-dark);
    --badge-border-color: var(--color-border);
  }

  .badge--success {
    --badge-background: var(--color-success);
    --badge-color: var(--color-ink-inverted);
  }

  .badge--warning {
    --badge-background: var(--color-warning);
    --badge-color: var(--color-ink-darkest);
  }

  .badge--danger {
    --badge-background: var(--color-danger);
    --badge-color: var(--color-ink-inverted);
  }

  /* Outline variants */
  .badge--outline-primary {
    --badge-background: transparent;
    --badge-color: var(--color-primary);
    --badge-border-color: var(--color-primary);
  }

  .badge--outline-success {
    --badge-background: transparent;
    --badge-color: var(--color-success);
    --badge-border-color: var(--color-success);
  }

  .badge--outline-warning {
    --badge-background: transparent;
    --badge-color: var(--color-warning-dark);
    --badge-border-color: var(--color-warning);
  }

  .badge--outline-danger {
    --badge-background: transparent;
    --badge-color: var(--color-danger);
    --badge-border-color: var(--color-danger);
  }

  /* Sizes */
  .badge--sm {
    --badge-font-size: 0.6875rem;
    --badge-padding-y: 0.125em;
    --badge-padding-x: 0.5em;
  }

  .badge--lg {
    --badge-font-size: var(--text-sm);
    --badge-padding-y: 0.375em;
    --badge-padding-x: 0.75em;
  }

  /* Pill shape */
  .badge--pill {
    --badge-border-radius: var(--radius-full);
  }

  /* Squared shape */
  .badge--square {
    --badge-border-radius: var(--radius-sm);
  }
}
/* Breadcrumbs Component */
/* Navigation breadcrumb trail */

@layer components {
  .breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .breadcrumb__item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-sm);
  }

  .breadcrumb__item:not(:last-child)::after {
    content: "/";
    color: var(--color-ink-light);
  }

  .breadcrumb__item a {
    color: var(--color-primary);
    text-decoration: none;
  }

  @media (any-hover: hover) {
    .breadcrumb__item a:hover {
      text-decoration: underline;
    }
  }

  .breadcrumb__item[aria-current="page"] {
    color: var(--color-ink);
    font-weight: var(--font-weight-medium);
  }
}
/* Button Component */
/* 37signals-compliant button with CSS variable API */

@layer components {
  .btn {
    /* CSS Variable API - customizable per instance */
    --btn-background: var(--color-canvas);
    --btn-border-color: var(--color-border-dark);
    --btn-color: var(--color-ink);
    --btn-padding-y: 0.5em;
    --btn-padding-x: 1.1em;
    --btn-border-radius: var(--radius-base);
    --btn-font-size: var(--text-sm);
    --btn-font-weight: var(--font-weight-medium);
    --btn-hover-brightness: 0.95;

    /* Base styles */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    background-color: var(--btn-background);
    color: var(--btn-color);
    border: 1px solid var(--btn-border-color);
    border-radius: var(--btn-border-radius);
    cursor: pointer;
    transition: filter var(--duration-fast) var(--ease-out);
    user-select: none;
  }

  @media (any-hover: hover) {
    .btn:hover {
      filter: brightness(var(--btn-hover-brightness));
    }
  }

  .btn:active {
    transform: translateY(1px);
  }

  .btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .btn[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
  }

  /* Dark mode adjustments */
  html[data-theme="dark"] .btn {
    --btn-hover-brightness: 1.15;
  }

  /* Variants */
  .btn--primary {
    --btn-background: var(--color-primary);
    --btn-border-color: var(--color-primary);
    --btn-color: #fff;
  }

  .btn--secondary {
    --btn-background: var(--color-canvas-secondary);
    --btn-border-color: var(--color-border);
    --btn-color: var(--color-ink-darkest);
  }

  .btn--success {
    --btn-background: var(--color-success);
    --btn-border-color: var(--color-success);
    --btn-color: #fff;
  }

  .btn--danger {
    --btn-background: var(--color-danger);
    --btn-border-color: var(--color-danger);
    --btn-color: #fff;
  }

  .btn--warning {
    --btn-background: var(--color-warning);
    --btn-border-color: var(--color-warning);
    --btn-color: #1a1a1a;
  }

  .btn--ghost {
    --btn-background: transparent;
    --btn-border-color: transparent;
    --btn-color: var(--color-ink);
  }

  .btn--link {
    --btn-background: transparent;
    --btn-border-color: transparent;
    --btn-color: var(--color-primary);
    --btn-padding-x: 0;
    --btn-padding-y: 0;
    text-decoration: underline;
  }

  .btn--outline-primary {
    --btn-background: transparent;
    --btn-border-color: var(--color-primary);
    --btn-color: var(--color-primary);
  }

  @media (any-hover: hover) {
    .btn--outline-primary:hover {
      --btn-background: var(--color-primary);
      --btn-color: var(--color-ink-inverted);
    }
  }

  /* Sizes */
  .btn--xs {
    --btn-font-size: var(--text-xs);
    --btn-padding-y: 0.25em;
    --btn-padding-x: 0.75em;
  }

  .btn--sm {
    --btn-font-size: var(--text-sm);
    --btn-padding-y: 0.375em;
    --btn-padding-x: 0.875em;
  }

  .btn--lg {
    --btn-font-size: var(--text-lg);
    --btn-padding-y: 0.625em;
    --btn-padding-x: 1.5em;
  }

  .btn--xl {
    --btn-font-size: var(--text-xl);
    --btn-padding-y: 0.75em;
    --btn-padding-x: 2em;
  }

  /* Full width */
  .btn--block {
    display: flex;
    width: 100%;
  }

  /* Icon buttons */
  .btn--icon {
    --btn-padding-x: var(--btn-padding-y);
    aspect-ratio: 1;
  }

  /* SVG icons inside buttons */
  .btn svg {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
  }

  /* Button group */
  .btn-group {
    display: inline-flex;
    gap: 0;
  }

  .btn-group .btn {
    border-radius: 0;
  }

  .btn-group .btn:first-child {
    border-start-start-radius: var(--btn-border-radius);
    border-end-start-radius: var(--btn-border-radius);
  }

  .btn-group .btn:last-child {
    border-start-end-radius: var(--btn-border-radius);
    border-end-end-radius: var(--btn-border-radius);
  }

  .btn-group .btn:not(:last-child) {
    border-inline-end-width: 0;
  }
}
/* Calendar Component */
/* Event list and calendar display */

@layer components {
  /* Calendar Event List */
  .calendar-events {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  /* Calendar Event Card */
  .calendar-event {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .calendar-event:hover {
      border-color: var(--color-primary);
      box-shadow: 0 1px 3px oklch(from var(--lch-ink-darkest) l c h / 0.1);
    }
  }

  /* Calendar Event Date Block */
  .calendar-event__date {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 4rem;
    padding: var(--space-xs);
    background: var(--color-canvas-secondary);
    border-radius: var(--radius-sm);
    text-align: center;
  }

  .calendar-event__date-month {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .calendar-event__date-day {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
    line-height: 1;
    margin-block-start: var(--space-2xs);
  }

  .calendar-event__date-year {
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    margin-block-start: var(--space-2xs);
  }

  /* Calendar Event Content */
  .calendar-event__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  /* Individual Event Item */
  .calendar-event__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-sm);
    background: var(--color-canvas-secondary);
    border-radius: var(--radius-base);
    transition: background var(--duration-fast) var(--ease-out);
  }

  .calendar-event__item + .calendar-event__item {
    margin-block-start: var(--space-xs);
  }

  @media (any-hover: hover) {
    .calendar-event__item:hover {
      background: var(--color-canvas-tertiary);
    }
  }

  .calendar-event__title {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink-darkest);
    text-decoration: none;
    display: block;
    line-height: 1.4;
  }

  @media (any-hover: hover) {
    .calendar-event__title:hover {
      color: var(--color-primary);
    }
  }

  .calendar-event__meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    font-size: var(--text-xs);
    color: var(--color-ink-light);
  }

  .calendar-event__meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
  }

  .calendar-event__meta-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
  }

  /* Calendar Event Actions */
  .calendar-event__actions {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  /* Status Variants */
  .calendar-event--completed {
    opacity: 0.7;
  }

  .calendar-event--completed .calendar-event__date {
    background: var(--color-success-light);
  }

  .calendar-event--completed .calendar-event__title {
    text-decoration: line-through;
    color: var(--color-ink);
  }

  .calendar-event--overdue {
    border-color: var(--color-danger-light);
    background: oklch(from var(--lch-danger) l c h / 0.03);
  }

  .calendar-event--overdue .calendar-event__date {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
  }

  .calendar-event--upcoming {
    border-color: var(--color-primary-light);
  }

  .calendar-event--upcoming .calendar-event__date {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
  }

  /* Responsive adjustments */
  @media (max-width: 640px) {
    .calendar-event {
      flex-direction: column;
    }

    .calendar-event__date {
      width: 100%;
      flex-direction: row;
      justify-content: flex-start;
      gap: var(--space-sm);
      padding: var(--space-sm);
    }

    .calendar-event__date-month {
      order: 2;
    }

    .calendar-event__date-day {
      order: 1;
    }

    .calendar-event__date-year {
      order: 3;
      margin-block-start: 0;
    }

    .calendar-event__actions {
      width: 100%;
      justify-content: flex-start;
    }
  }
}
/* Card Component */
/* 37signals-compliant card with CSS variable API */

@layer components {
  .card {
    --card-background: var(--color-canvas);
    --card-border-color: var(--color-border);
    --card-border-radius: var(--radius-lg);
    --card-padding: var(--space-lg);
    --card-shadow: var(--shadow-base);

    background-color: var(--card-background);
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    padding: var(--card-padding);
    box-shadow: var(--card-shadow);
  }

  /* Nested elements using __ convention */
  .card__header {
    margin-block-end: var(--space-md);
    padding-block-end: var(--space-md);
    border-block-end: 1px solid var(--color-border);
  }

  .card__title {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-darkest);
    margin: 0;
  }

  .card__subtitle {
    font-size: var(--text-sm);
    color: var(--color-ink-light);
    margin-block-start: var(--space-2xs);
  }

  /* Standalone title (without header wrapper) */
  h3.card__title,
  h2.card__title {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    margin-block-end: var(--space-md);
    color: var(--color-ink-darkest);
  }

  .card__heading {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    margin-block-end: var(--space-md);
    color: var(--color-ink-darkest);
  }

  .card__body {
    color: var(--color-ink);
  }

  .card__footer {
    margin-block-start: var(--space-md);
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }

  /* Variants using -- convention */
  .card--elevated {
    --card-shadow: var(--shadow-lg);
    --card-border-color: transparent;
  }

  .card--flat {
    --card-shadow: none;
  }

  .card--bordered {
    border-width: 2px;
  }

  .card--primary {
    --card-background: var(--color-primary-light);
    --card-border-color: var(--color-primary);
  }

  .card--success {
    --card-background: var(--color-success-light);
    --card-border-color: var(--color-success);
  }

  .card--warning {
    --card-background: var(--color-warning-light);
    --card-border-color: var(--color-warning);
  }

  .card--danger {
    --card-background: var(--color-danger-light);
    --card-border-color: var(--color-danger);
  }

  /* Interactive states */
  .card--clickable {
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .card--clickable:hover {
      --card-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }
  }

  .card--clickable:active {
    transform: translateY(0);
  }

  .card--compact {
    --card-padding: var(--space-md);
  }

  .card--spacious {
    --card-padding: var(--space-xl);
  }
}
/* Chip/Tag Component */
/* Small removable labels for filters, tags, selections */

@layer components {
  .chip {
    /* CSS Variable API */
    --chip-background: var(--color-canvas-secondary);
    --chip-color: var(--color-ink);
    --chip-padding: var(--space-xs) var(--space-sm);
    --chip-border-radius: var(--radius-full);
    --chip-border-color: transparent;

    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--chip-padding);
    font-size: var(--text-sm);
    color: var(--chip-color);
    background-color: var(--chip-background);
    border: 1px solid var(--chip-border-color);
    border-radius: var(--chip-border-radius);
    white-space: nowrap;
  }

  .chip-text {
    line-height: 1.5;
  }

  .chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1rem;
    block-size: 1rem;
    padding: 0;
    margin-inline-start: var(--space-2xs);
    font-size: var(--text-lg);
    line-height: 1;
    color: var(--chip-color);
    background: transparent;
    border: 0;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .chip-remove:hover {
      background-color: oklch(from var(--chip-background) calc(l - 0.05) c h);
    }
  }

  .chip-remove:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
  }

  /* Size Variants */
  .chip--sm {
    --chip-padding: var(--space-2xs) var(--space-xs);
    font-size: var(--text-xs);
  }

  .chip--lg {
    --chip-padding: var(--space-sm) var(--space-md);
    font-size: var(--text-base);
  }

  /* Color Variants */
  .chip--primary {
    --chip-background: oklch(var(--lch-primary-100));
    --chip-color: oklch(var(--lch-primary-700));
  }

  .chip--success {
    --chip-background: oklch(var(--lch-success-100));
    --chip-color: oklch(var(--lch-success-700));
  }

  .chip--warning {
    --chip-background: oklch(var(--lch-warning-100));
    --chip-color: oklch(var(--lch-warning-700));
  }

  .chip--danger {
    --chip-background: oklch(var(--lch-danger-100));
    --chip-color: oklch(var(--lch-danger-700));
  }

  /* Outline Variant */
  .chip--outline {
    --chip-background: transparent;
    --chip-border-color: var(--color-border);
  }

  .chip--outline.chip--primary {
    --chip-border-color: oklch(var(--lch-primary-400));
    --chip-color: oklch(var(--lch-primary-600));
  }

  .chip--outline.chip--success {
    --chip-border-color: oklch(var(--lch-success-400));
    --chip-color: oklch(var(--lch-success-600));
  }

  .chip--outline.chip--warning {
    --chip-border-color: oklch(var(--lch-warning-400));
    --chip-color: oklch(var(--lch-warning-600));
  }

  .chip--outline.chip--danger {
    --chip-border-color: oklch(var(--lch-danger-400));
    --chip-color: oklch(var(--lch-danger-600));
  }

  /* Interactive Chip (button-like) */
  .chip--interactive {
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    border: 1px solid var(--color-border);
    background-color: var(--color-canvas);
  }

  @media (any-hover: hover) {
    .chip--interactive:hover {
      border-color: var(--color-primary-300);
      background-color: oklch(var(--lch-primary) / 0.05);
    }
  }

  .chip--interactive.is-active {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-canvas);
  }

  .chip--interactive.is-hidden {
    display: none;
  }
}
/* Command Palette Component */
/* Quick search/navigation overlay (Cmd+K style) */

@layer components {
  .command-palette {
    /* CSS Variable API */
    --command-palette-width: 40rem;
    --command-palette-max-height: 30rem;
    --command-palette-background: var(--color-canvas);
    --command-palette-z-index: var(--z-modal);

    position: fixed;
    inset-block-start: 20vh;
    inset-inline-start: 50%;
    z-index: var(--command-palette-z-index);
    inline-size: var(--command-palette-width);
    max-inline-size: calc(100vw - var(--space-lg) * 2);
    max-block-size: var(--command-palette-max-height);
    margin: 0;
    padding: 0;
    background-color: var(--command-palette-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2xl);
    transform: translateX(-50%);
    transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  }

  .command-palette::backdrop {
    background-color: oklch(from var(--color-ink-darkest) l c h / 0.3);
    backdrop-filter: blur(4px);
  }

  .command-palette:not([open]) {
    display: block;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%) scale(0.95);
  }

  @supports (animation-timeline: scroll()) {
    .command-palette[open] {
      @starting-style {
        opacity: 0;
        transform: translateX(-50%) scale(0.95);
      }
    }
  }

  .command-palette-container {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    overflow: hidden;
  }

  .command-palette-input {
    inline-size: 100%;
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-lg);
    color: var(--color-ink-darkest);
    background-color: transparent;
    border: 0;
    border-block-end: 1px solid var(--color-border);
    outline: none;
  }

  .command-palette-input::placeholder {
    color: var(--color-ink-light);
  }

  .command-palette-results {
    flex: 1;
    margin: 0;
    padding: var(--space-xs);
    overflow-y: auto;
    list-style: none;
  }

  .command-palette-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    color: var(--color-ink);
    border-radius: var(--radius-base);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .command-palette-item:hover {
      background-color: var(--color-canvas-subtle);
    }
  }

  .command-palette-item--selected {
    background-color: oklch(var(--lch-primary-50));
    color: var(--color-primary);
  }

  .command-palette-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    font-size: var(--text-base);
  }

  .command-palette-label {
    flex: 1;
    font-size: var(--text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .command-palette-shortcut {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--text-xs);
    color: var(--color-ink-light);
  }

  .command-palette-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    background-color: var(--color-canvas-subtle);
    border-block-start: 1px solid var(--color-border);
  }

  .command-palette-hint {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  /* Empty State */
  .command-palette-empty {
    padding: var(--space-2xl);
    text-align: center;
    color: var(--color-ink-light);
  }

  .command-palette-empty-text {
    font-size: var(--text-sm);
  }
}
/* Context Menu Component */
/* Right-click menu (similar to dropdown but triggered by context) */

@layer components {
  .context-menu {
    /* CSS Variable API */
    --context-menu-background: var(--color-canvas);
    --context-menu-border-color: var(--color-border);
    --context-menu-min-width: 12rem;
    --context-menu-shadow: var(--shadow-xl);

    position: fixed;
    z-index: var(--z-dropdown);
    display: none;
    min-inline-size: var(--context-menu-min-width);
    margin: 0;
    padding: var(--space-xs) 0;
    background-color: var(--context-menu-background);
    border: 1px solid var(--context-menu-border-color);
    border-radius: var(--radius-base);
    box-shadow: var(--context-menu-shadow);
    list-style: none;
  }

  .context-menu[data-open] {
    display: block;
  }

  .context-menu-item {
    margin: 0;
    padding: 0;
  }

  .context-menu-item > button,
  .context-menu-item > a {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    inline-size: 100%;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-ink);
    text-align: start;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .context-menu-item > button:hover,
    .context-menu-item > a:hover {
      background-color: var(--color-canvas-subtle);
    }
  }

  .context-menu-item > button:focus-visible,
  .context-menu-item > a:focus-visible {
    outline: none;
    background-color: oklch(var(--lch-primary-50));
    color: var(--color-primary);
  }

  .context-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    font-size: var(--text-base);
  }

  .context-menu-label {
    flex: 1;
  }

  .context-menu-shortcut {
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    margin-inline-start: var(--space-md);
  }

  /* Divider */
  .context-menu-divider {
    block-size: 1px;
    margin-block: var(--space-xs);
    background-color: var(--color-border);
  }

  /* Danger Variant */
  .context-menu-item--danger > button,
  .context-menu-item--danger > a {
    color: var(--color-danger);
  }

  @media (any-hover: hover) {
    .context-menu-item--danger > button:hover,
    .context-menu-item--danger > a:hover {
      background-color: oklch(var(--lch-danger-50));
    }
  }

  /* Disabled State */
  .context-menu-item--disabled > button,
  .context-menu-item--disabled > a {
    color: var(--color-ink-light);
    cursor: not-allowed;
    opacity: 0.5;
  }

  @media (any-hover: hover) {
    .context-menu-item--disabled > button:hover,
    .context-menu-item--disabled > a:hover {
      background-color: transparent;
    }
  }
}
@layer components {
  .definition-list {
    display: grid;
    gap: var(--space-md);
  }

  .definition-list__item {
    display: grid;
    grid-template-columns: minmax(120px, 200px) 1fr;
    gap: var(--space-sm);
    align-items: start;
  }

  .definition-list__item dt {
    font-weight: var(--font-weight-medium);
    color: var(--color-ink-medium);
    font-size: var(--text-sm);
    padding-block-start: 2px; /* Align with dd text baseline */
  }

  .definition-list__item dd {
    color: var(--color-ink-darkest);
  }

  /* Responsive: Stack on small screens */
  @media (max-width: 640px) {
    .definition-list__item {
      grid-template-columns: 1fr;
      gap: var(--space-xs);
    }
  }

  /* Two-column layout variant */
  .definition-list--two-column {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  .definition-list--two-column .definition-list__item {
    grid-template-columns: auto 1fr;
  }
}
/* Details List Component */
/* Key-value list for displaying structured information */

@layer components {
  .details-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin: 0;
    padding: 0;
  }

  .details-list__item {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: var(--space-md);
    align-items: start;
  }

  .details-list__item--full {
    grid-template-columns: 1fr;
  }

  .details-list__label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink);
    margin: 0;
  }

  .details-list__icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    color: var(--color-ink-light);
  }

  .details-list__value {
    font-size: var(--text-sm);
    color: var(--color-ink-darkest);
    margin: 0;
    line-height: 1.6;
  }

  .details-list__value-meta {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    margin-block-start: var(--space-2xs);
  }

  .details-list__value--preserve-whitespace {
    white-space: pre-wrap;
  }

  .details-list__note {
    margin-block-start: var(--space-sm);
    padding: var(--space-sm);
    background: var(--color-canvas-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--color-ink);
  }

  .details-list__inline-group {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }

  /* Responsive */
  @media (max-width: 640px) {
    .details-list__item {
      grid-template-columns: 1fr;
      gap: var(--space-xs);
    }

    .details-list__label {
      padding-block-end: 0;
    }
  }
}
/* Divider Component */
/* Horizontal and vertical separators with optional text */

@layer components {
  .divider {
    --divider-color: var(--color-border);
    --divider-thickness: 1px;

    border: none;
    border-block-start: var(--divider-thickness) solid var(--divider-color);
    margin-block: var(--space-md);

    /* With text */
    &--text {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      border: none;
      margin-block: var(--space-md);

      &::before,
      &::after {
        content: "";
        flex: 1;
        border-block-start: var(--divider-thickness) solid var(--divider-color);
      }

      span {
        font-size: var(--text-sm);
        color: var(--color-ink-light);
        white-space: nowrap;
      }
    }

    /* Vertical */
    &--vertical {
      display: inline-block;
      inline-size: var(--divider-thickness);
      block-size: 100%;
      min-block-size: 1rem;
      border-block-start: none;
      border-inline-start: var(--divider-thickness) solid var(--divider-color);
      margin-inline: var(--space-sm);
      margin-block: 0;
      vertical-align: middle;
    }

    /* Spacing variants */
    &--sm {
      margin-block: var(--space-sm);
    }

    &--lg {
      margin-block: var(--space-lg);
    }

    /* Thickness variants */
    &--thick {
      --divider-thickness: 2px;
    }
  }
}
/* Document List Component */
/* Display list of documents with icons and metadata */

@layer components {
  .document-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .document-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-block-end: 1px solid var(--color-border);
    transition: background var(--duration-fast) var(--ease-out);
  }

  .document-list__item:last-child {
    border-block-end: none;
  }

  @media (any-hover: hover) {
    .document-list__item:hover {
      background: var(--color-canvas-secondary);
    }
  }

  .document-list__icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: var(--color-ink-light);
  }

  .document-list__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .document-list__name {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .document-list__name:hover {
      color: var(--color-primary-hover);
      text-decoration: underline;
    }
  }

  .document-list__meta {
    font-size: var(--text-xs);
    color: var(--color-ink-light);
  }
}
/* Drawer/Sheet Component */
/* Slide-in panel from side or bottom (alternative to modal) */

@layer components {
  .drawer {
    /* CSS Variable API */
    --drawer-width: 24rem;
    --drawer-background: var(--color-canvas);
    --drawer-z-index: var(--z-modal);
    --drawer-transition: var(--duration-base) var(--ease-in-out);

    position: fixed;
    z-index: var(--drawer-z-index);
    inline-size: var(--drawer-width);
    block-size: 100vh;
    max-inline-size: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--drawer-background);
    border: 0;
    box-shadow: var(--shadow-2xl);
    transition: transform var(--drawer-transition),
      opacity var(--drawer-transition);
  }

  .drawer::backdrop {
    background-color: oklch(from var(--color-ink-darkest) l c h / 0.5);
    backdrop-filter: blur(4px);
  }

  .drawer:not([open]) {
    display: block;
    pointer-events: none;
    opacity: 0;
  }

  /* Position Variants */
  .drawer--right {
    inset-block-start: 0;
    inset-inline-end: 0;
  }

  .drawer--right:not([open]) {
    transform: translateX(100%);
  }

  .drawer--left {
    inset-block-start: 0;
    inset-inline-start: 0;
  }

  .drawer--left:not([open]) {
    transform: translateX(-100%);
  }

  .drawer--bottom {
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: auto;
    max-block-size: 80vh;
  }

  .drawer--bottom:not([open]) {
    transform: translateY(100%);
  }

  @supports (animation-timeline: scroll()) {
    .drawer[open] {
      @starting-style {
        opacity: 0;
      }
    }

    .drawer--right[open] {
      @starting-style {
        transform: translateX(100%);
      }
    }

    .drawer--left[open] {
      @starting-style {
        transform: translateX(-100%);
      }
    }

    .drawer--bottom[open] {
      @starting-style {
        transform: translateY(100%);
      }
    }
  }

  /* Content Structure */
  .drawer-content {
    display: flex;
    flex-direction: column;
    block-size: 100%;
  }

  .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-block-end: 1px solid var(--color-border);
  }

  .drawer-title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-darkest);
  }

  .drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    font-size: var(--text-2xl);
    line-height: 1;
    color: var(--color-ink-light);
    background: transparent;
    border: 0;
    border-radius: var(--radius-base);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .drawer-close:hover {
      background-color: var(--color-canvas-secondary);
      color: var(--color-ink);
    }
  }

  .drawer-close:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .drawer-body {
    flex: 1;
    padding: var(--space-lg);
    overflow-y: auto;
  }

  /* Size Variants */
  .drawer--sm {
    --drawer-width: 20rem;
  }

  .drawer--lg {
    --drawer-width: 32rem;
  }

  .drawer--xl {
    --drawer-width: 40rem;
  }
}
/* Dropdown/Popup Component */
/* Using :has() for parent-aware styling */

@layer components {
  .dropdown {
    position: relative;
    display: inline-block;
  }

  .dropdown__trigger {
    cursor: pointer;
  }

  .dropdown__menu {
    --dropdown-background: var(--color-canvas);
    --dropdown-border-color: var(--color-border);
    --dropdown-min-width: 12rem;

    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: var(--z-dropdown);
    min-inline-size: var(--dropdown-min-width);
    margin-block-start: var(--space-2xs);
    padding: var(--space-xs);
    background-color: var(--dropdown-background);
    border: 1px solid var(--dropdown-border-color);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(-0.5rem);
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-out),
      transform var(--duration-fast) var(--ease-out);
  }

  /* Show when active */
  .dropdown__menu[data-state="open"],
  .dropdown:has([aria-expanded="true"]) .dropdown__menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .dropdown__menu--right {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }

  .dropdown__menu--top {
    inset-block-start: auto;
    inset-block-end: 100%;
    margin-block-start: 0;
    margin-block-end: var(--space-2xs);
  }

  .dropdown__item {
    display: block;
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-sm);
    color: var(--color-ink);
    text-decoration: none;
    text-align: start;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .dropdown__item:hover {
      background-color: var(--color-canvas-secondary);
    }
  }

  .dropdown__item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
  }

  .dropdown__item--danger {
    color: var(--color-danger);
  }

  .dropdown__divider {
    block-size: 1px;
    margin-block: var(--space-2xs);
    background-color: var(--color-border);
  }

  .dropdown__header {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Alternative popup class - duplicate dropdown styles */
  .popup {
    position: relative;
    display: inline-block;
  }

  .popup__trigger {
    cursor: pointer;
  }

  .popup__menu {
    --dropdown-background: var(--color-canvas);
    --dropdown-border-color: var(--color-border);
    --dropdown-min-width: 12rem;

    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: var(--z-dropdown);
    min-inline-size: var(--dropdown-min-width);
    margin-block-start: var(--space-2xs);
    padding: var(--space-xs);
    background-color: var(--dropdown-background);
    border: 1px solid var(--dropdown-border-color);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(-0.5rem);
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-out),
      transform var(--duration-fast) var(--ease-out);
  }

  .popup__menu[data-state="open"],
  .popup:has([aria-expanded="true"]) .popup__menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .popup__menu--right {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }

  .popup__menu--top {
    inset-block-start: auto;
    inset-block-end: 100%;
    margin-block-start: 0;
    margin-block-end: var(--space-2xs);
  }

  .popup__item {
    display: block;
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-sm);
    color: var(--color-ink);
    text-decoration: none;
    text-align: start;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .popup__item:hover {
      background-color: var(--color-canvas-secondary);
    }
  }

  .popup__item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
  }

  .popup__item--danger {
    color: var(--color-danger);
  }

  .popup__divider {
    block-size: 1px;
    margin-block: var(--space-2xs);
    background-color: var(--color-border);
  }

  .popup__header {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Single-dash variants for compatibility with existing markup */
  .dropdown-menu {
    --dropdown-background: var(--color-canvas);
    --dropdown-border-color: var(--color-border);
    --dropdown-min-width: 12rem;

    display: flex;
    flex-direction: column;
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: var(--z-dropdown);
    min-inline-size: var(--dropdown-min-width);
    margin-block-start: var(--space-2xs);
    padding: var(--space-xs);
    background-color: var(--dropdown-background);
    border: 1px solid var(--dropdown-border-color);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-lg);
  }

  /* Hidden state using .hidden class */
  .dropdown-menu.hidden {
    display: none;
  }

  .dropdown-item {
    display: block;
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-sm);
    color: var(--color-ink);
    text-decoration: none;
    text-align: start;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .dropdown-item:hover {
      background-color: var(--color-canvas-secondary);
    }
  }

  .dropdown-item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
  }

  .dropdown-item--active {
    background-color: var(--color-canvas-secondary);
    font-weight: var(--font-weight-medium);
  }

  .dropdown-item--danger {
    color: var(--color-danger);
  }

  .dropdown-divider {
    block-size: 1px;
    margin-block: var(--space-2xs);
    background-color: var(--color-border);
  }

  .dropdown-icon {
    width: 1rem;
    height: 1rem;
    margin-inline-start: var(--space-2xs);
    transition: transform var(--duration-fast) var(--ease-out);
  }
}
/* Empty State Component */
/* Placeholder when lists/tables are empty */

@layer components {
  .empty-state {
    /* CSS Variable API */
    --empty-state-color: var(--color-ink-light);
    --empty-state-icon-size: 4rem;
    --empty-state-max-width: 24rem;
    --empty-state-padding: var(--space-2xl);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    max-inline-size: var(--empty-state-max-width);
    margin-inline: auto;
    padding: var(--empty-state-padding);
    text-align: center;
    color: var(--empty-state-color);
  }

  .empty-state-icon {
    font-size: var(--empty-state-icon-size);
    line-height: 1;
    opacity: 0.8;
  }

  .empty-state-title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink);
  }

  .empty-state-message {
    margin: 0;
    font-size: var(--text-base);
    line-height: var(--line-height-normal);
  }

  .empty-state .btn {
    margin-block-start: var(--space-sm);
  }

  /* Size Variants */
  .empty-state--sm {
    --empty-state-icon-size: 2.5rem;
    --empty-state-max-width: 18rem;
    --empty-state-padding: var(--space-lg);
  }

  .empty-state--sm .empty-state-title {
    font-size: var(--text-lg);
  }

  .empty-state--sm .empty-state-message {
    font-size: var(--text-sm);
  }

  .empty-state--lg {
    --empty-state-icon-size: 6rem;
    --empty-state-max-width: 32rem;
    --empty-state-padding: var(--space-3xl);
  }

  .empty-state--lg .empty-state-title {
    font-size: var(--text-2xl);
  }

  .empty-state--lg .empty-state-message {
    font-size: var(--text-lg);
  }
}
@layer components {
  /* ========================================
     FAQ Section
     Accordion-style frequently asked questions
     ======================================== */

  .faq-section {
    display: flex;
    justify-content: center;
    padding: var(--space-2xl) var(--space-lg);
  }

  @media (min-width: 64rem) {
    .faq-section {
      padding: 6rem var(--space-lg);
    }
  }

  .faq-section__container {
    width: 100%;
    max-width: 80rem;
  }

  .faq-section__header {
    margin-bottom: 4rem;
  }

  .faq-section__title {
    font-size: clamp(1.875rem, 5vw, 2.25rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
    margin-bottom: var(--space-sm);
    line-height: 1.2;
    max-width: 64rem;
  }

  .faq-section__subtitle {
    font-size: clamp(1.25rem, 3vw, 1.875rem);
    color: var(--color-ink-light);
    max-width: 48rem;
    line-height: 1.5;
  }

  .faq-section__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  /* FAQ Item */
  .faq-section__item {
    background-color: var(--color-canvas);
    border-radius: 1rem;
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: border-color var(--duration-normal);
  }

  .faq-section__item:hover {
    border-color: var(--color-primary-300);
  }

  .faq-section__button {
    width: 100%;
    padding: var(--space-lg) var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color var(--duration-normal);
  }

  .faq-section__button:hover {
    background-color: var(--color-canvas-subtle);
  }

  /* Question */
  .faq-section__question {
    flex: 1;
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-darkest);
    margin: 0;
    line-height: 1.4;
  }

  @media (min-width: 48rem) {
    .faq-section__question {
      font-size: clamp(1.25rem, 2vw, 1.5rem);
    }
  }

  /* Caret */
  .faq-section__caret-wrapper {
    flex-shrink: 0;
  }

  .faq-section__caret {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-ink-light);
    transition: transform var(--duration-normal);
  }

  .faq-section__item.is-open .faq-section__caret {
    transform: rotate(180deg);
  }

  /* Content */
  .faq-section__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration-normal);
  }

  .faq-section__answer {
    padding: 0 var(--space-lg) var(--space-lg);
  }

  .faq-section__answer-text {
    font-size: clamp(1rem, 2vw, 1.125rem);
    color: var(--color-ink);
    line-height: 1.6;
    margin: 0;
  }

  @media (min-width: 48rem) {
    .faq-section__answer-text {
      font-size: clamp(1.125rem, 2vw, 1.25rem);
    }
  }
}
/* Features Section Component */
/* Card grid layout with visual mockups */

@layer components {
  /* ========================================
     FEATURES CONTAINER
     ======================================== */
  .features {
    padding-block: var(--space-3xl);
    background: var(--color-canvas);
  }

  @media (min-width: 1024px) {
    .features {
      padding-block: 5rem;
    }
  }

  .features__container {
    inline-size: 100%;
    max-inline-size: 80rem;
    margin-inline: auto;
    padding-inline: var(--space-lg);
  }

  /* ========================================
     FEATURES HEADER
     ======================================== */
  .features__header {
    margin-block-end: 4rem;
  }

  .features__title {
    font-size: clamp(1.875rem, 5vw, 2.25rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
    margin-block-end: var(--space-sm);
  }

  .features__subtitle {
    font-size: clamp(1.25rem, 3vw, 1.875rem);
    color: var(--color-ink-light);
    max-inline-size: 48rem;
    line-height: 1.5;
  }

  /* ========================================
     FEATURES ROWS
     ======================================== */
  .features__row {
    display: grid;
    gap: var(--space-lg);
    margin-block-end: var(--space-lg);
  }

  .features__row:last-child {
    margin-block-end: 0;
  }

  .features__row--three {
    grid-template-columns: 1fr;
  }

  .features__row--two {
    grid-template-columns: 1fr;
  }

  @media (min-width: 768px) {
    .features__row--three {
      grid-template-columns: repeat(2, 1fr);
    }

    .features__row--two {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .features__row--three {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* ========================================
     FEATURE CARDS
     ======================================== */
  .features__card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-xl);
    overflow: hidden;
    min-block-size: 28rem;
    transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
  }

  .features__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.15);
  }

  @media (min-width: 1024px) {
    .features__card {
      min-block-size: 32rem;
    }
  }

  /* Card Color Variants - Dark mode colors (app is permanently dark) */
  .features__card--blue {
    background: #1e3a5f;
  }

  .features__card--blue-light {
    background: #1e3a5f;
  }

  .features__card--red {
    background: #4c1d1d;
  }

  .features__card--gray {
    background: #2d3748;
  }

  .features__card--green {
    background: #14412a;
  }

  .features__card--purple {
    background: #3b1f5c;
  }

  .features__card--yellow {
    background: #4a3419;
  }

  /* ========================================
     CARD CONTENT
     ======================================== */
  .features__card-content {
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  /* Card Label - Dark mode colors (app is permanently dark) */
  .features__card-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    color: #93c5fd;
  }

  .features__card--blue .features__card-label,
  .features__card--blue-light .features__card-label {
    color: #93c5fd;
  }

  .features__card--red .features__card-label {
    color: #fca5a5;
  }

  .features__card--gray .features__card-label {
    color: #cbd5e1;
  }

  .features__card--green .features__card-label {
    color: #86efac;
  }

  .features__card--purple .features__card-label {
    color: #d8b4fe;
  }

  .features__card--yellow .features__card-label {
    color: #fcd34d;
  }

  .features__card-label-icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  /* Card Title */
  .features__card-title {
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
    line-height: 1.2;
    max-inline-size: 20ch;
  }

  .features__card-title--dark {
    color: var(--color-ink-darkest);
  }

  /* Card Link */
  .features__card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-darkest);
    text-decoration: none;
    transition: gap 200ms var(--ease-out);
  }

  .features__card-link:hover {
    gap: var(--space-sm);
  }

  .features__card-link svg {
    inline-size: 1rem;
    block-size: 1rem;
    transition: transform 200ms var(--ease-out);
  }

  .features__card-link:hover svg {
    transform: translateX(4px);
  }

  .features__card-link--dark {
    color: var(--color-ink-darkest);
  }

  /* ========================================
     CARD VISUAL / MOCKUPS
     ======================================== */
  .features__card-visual {
    flex: 1;
    padding: var(--space-lg);
    padding-block-start: 0;
    padding-inline-end: 0;
    padding-block-end: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    overflow: hidden;
  }

  /* ========================================
     MOCK UI COMPONENTS
     ======================================== */
  .features__mock {
    background: var(--color-canvas);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    inline-size: 100%;
    max-inline-size: 20rem;
    overflow: hidden;
    transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
    transform: translate(1.5rem, 1.5rem);
  }

  .features__card:hover .features__mock {
    transform: translate(1.5rem, 1.5rem) scale(1.02);
    box-shadow: 0 8px 16px -4px rgb(0 0 0 / 0.15);
  }

  /* Mock card borders matching parent card colors */
  .features__card--blue .features__mock {
    border: 2px solid #3b82f6;
  }

  .features__card--red .features__mock {
    border: 2px solid #ef4444;
  }

  .features__card--yellow .features__mock {
    border: 2px solid #f59e0b;
  }

  .features__card--green .features__mock {
    border: 2px solid #22c55e;
  }

  .features__card--gray .features__mock {
    border: 2px solid #94a3b8;
  }

  .features__card--purple .features__mock {
    border: 2px solid #a855f7;
  }

  .features__mock-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    border-block-end: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .features__mock-title {
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-darkest);
  }

  .features__mock-count {
    font-size: 0.75rem;
    color: var(--color-ink-light);
    background: var(--color-primary-100);
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-full);
  }

  /* ========================================
     FORMATION MOCK
     ======================================== */
  .features__mock--formation .features__mock-list {
    padding: var(--space-sm);
  }

  /* Formation complete bar - Dark mode (app is permanently dark) */
  .features__mock-complete {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: #1e3a5f;
    border-block-start: 1px solid var(--color-border);
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: #93c5fd;
  }

  .features__mock-complete svg {
    inline-size: 1rem;
    block-size: 1rem;
    flex-shrink: 0;
  }

  /* ========================================
     COMPLIANCE MOCK
     ======================================== */
  .features__mock--compliance .features__mock-list {
    padding: var(--space-sm);
  }

  .features__mock-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
  }

  .features__mock-item:hover {
    background: var(--color-surface);
  }

  .features__mock-date {
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink);
    min-inline-size: 3rem;
  }

  .features__mock-desc {
    font-size: 0.8125rem;
    color: var(--color-ink);
    flex: 1;
  }

  /* ========================================
     COMPLIANCE + AI MOCK
     ======================================== */
  .features__mock--compliance-ai .features__mock-list {
    padding: var(--space-sm);
  }

  /* AI hint - Dark mode (app is permanently dark) */
  .features__mock-ai-hint {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: #4c1d1d;
    border-block-start: 1px solid var(--color-border);
    font-size: 0.75rem;
    color: #fca5a5;
  }

  .features__mock-ai-icon {
    inline-size: 1rem;
    block-size: 1rem;
    flex-shrink: 0;
  }

  /* ========================================
     BADGES
     ======================================== */
  .features__mock-badge {
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.025em;
  }

  /* Badge colors - Dark mode (app is permanently dark) */
  .features__mock-badge--success {
    background: #1e3a5f;
    color: #93c5fd;
  }

  .features__mock-badge--warning {
    background: #4c1d1d;
    color: #fca5a5;
  }

  .features__mock-badge--info {
    background: #2d3748;
    color: #cbd5e1;
  }

  .features__mock-badge--new {
    background: #4c1d1d;
    color: #fca5a5;
  }

  .features__mock-badge--active {
    background: #1e3a5f;
    color: #93c5fd;
  }

  /* ========================================
     ADDRESS / MAIL MOCK
     ======================================== */
  .features__mock--address .features__mock-mail {
    padding: var(--space-sm);
  }

  .features__mock-mail-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
  }

  .features__mock-mail-item:hover {
    background: var(--color-surface);
  }

  .features__mock-mail-icon {
    inline-size: 2rem;
    block-size: 2rem;
    background: var(--color-border);
    border-radius: var(--radius-sm);
  }

  .features__mock-mail-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .features__mock-mail-from {
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-darkest);
  }

  .features__mock-mail-subject {
    font-size: 0.75rem;
    color: var(--color-ink-light);
  }

  /* ========================================
     NOMINEES MOCK
     ======================================== */
  .features__mock--nominees .features__mock-profiles {
    padding: var(--space-sm);
  }

  .features__mock-profile {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
  }

  .features__mock-profile:hover {
    background: var(--color-surface);
  }

  .features__mock-avatar {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: var(--radius-full);
  }

  .features__mock-profile-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .features__mock-profile-name {
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-darkest);
  }

  .features__mock-profile-role {
    font-size: 0.75rem;
    color: var(--color-ink-light);
  }

  /* ========================================
     CHAT / AI MOCK
     ======================================== */
  .features__mock--chat .features__mock-messages {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .features__mock-message {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    max-inline-size: 90%;
  }

  .features__mock-message p {
    font-size: 0.8125rem;
    line-height: 1.4;
    margin: 0;
  }

  .features__mock-message--user {
    background: #2563eb;
    color: var(--color-canvas);
    align-self: flex-end;
    border-end-end-radius: var(--radius-sm);
  }

  .features__mock-message--ai {
    background: var(--color-surface);
    color: var(--color-ink);
    align-self: flex-start;
    border-end-start-radius: var(--radius-sm);
  }

  /* ========================================
     COMBINED SERVICES MOCK
     ======================================== */
  .features__mock--combined .features__mock-services {
    padding: var(--space-sm);
  }

  .features__mock-service {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
  }

  .features__mock-service:hover {
    background: var(--color-surface);
  }

  .features__mock-service-icon {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    flex-shrink: 0;
  }

  .features__mock-service-icon svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  /* Service icon backgrounds - Dark mode (app is permanently dark) */
  .features__mock-service-icon--address {
    background: #1e3a5f;
    color: #93c5fd;
  }

  .features__mock-service-icon--agent {
    background: #4c1d1d;
    color: #fca5a5;
  }

  .features__mock-service-icon--nominee {
    background: #2d3748;
    color: #cbd5e1;
  }

  .features__mock-service-icon--bank {
    background: #3b1f5c;
    color: #d8b4fe;
  }

  .features__mock-service-icon--tax {
    background: #14412a;
    color: #86efac;
  }

  .features__mock-service-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .features__mock-service-title {
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-darkest);
  }

  .features__mock-service-desc {
    font-size: 0.75rem;
    color: var(--color-ink-light);
  }

  /* ========================================
     TAXES MOCK
     ======================================== */
  .features__mock--taxes .features__mock-list {
    padding: var(--space-sm);
  }

  /* ========================================
     PRESENCE MOCK
     ======================================== */
  .features__mock--presence .features__mock-services {
    padding: var(--space-sm);
  }

  /* ========================================
     BANKING MOCK
     ======================================== */
  .features__mock--banking .features__mock-services {
    padding: var(--space-sm);
  }

  /* ========================================
     LICENSES MOCK
     ======================================== */
  .features__mock--licenses .features__mock-list {
    padding: var(--space-sm);
  }
}
/* File Upload/Dropzone Component */
/* Drag-and-drop file upload area */

@layer components {
  .file-upload {
    /* CSS Variable API */
    --file-upload-border-color: var(--color-border-dark);
    --file-upload-background: var(--color-canvas-subtle);
    --file-upload-min-height: 8rem;
    --file-upload-border-radius: var(--radius-base);

    position: relative;
  }

  .file-upload-input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .file-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-block-size: var(--file-upload-min-height);
    padding: var(--space-xl);
    background-color: var(--file-upload-background);
    border: 2px dashed var(--file-upload-border-color);
    border-radius: var(--file-upload-border-radius);
    cursor: pointer;
    text-align: center;
    transition: all var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .file-upload-label:hover {
      border-color: var(--color-primary);
      background-color: oklch(var(--lch-primary-50));
    }
  }

  .file-upload-input:focus-visible + .file-upload-label {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .file-upload-icon {
    font-size: var(--text-3xl);
    line-height: 1;
  }

  .file-upload-text {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink);
  }

  .file-upload-hint {
    font-size: var(--text-sm);
    color: var(--color-ink-light);
  }

  /* Drag Over State (requires JS to add class) */
  .file-upload--dragover .file-upload-label {
    border-color: var(--color-primary);
    background-color: oklch(var(--lch-primary-50));
    border-style: solid;
  }

  /* Loading State */
  .file-upload--loading .file-upload-label {
    cursor: wait;
    opacity: 0.7;
  }

  /* Error State */
  .file-upload--error .file-upload-label {
    border-color: var(--color-danger);
    background-color: oklch(var(--lch-danger-50));
  }

  /* Preview List */
  .file-upload-preview {
    margin-block-start: var(--space-md);
  }

  .file-upload-preview-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .file-upload-preview-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background-color: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
  }

  .file-upload-preview-name {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .file-upload-preview-size {
    font-size: var(--text-xs);
    color: var(--color-ink-light);
  }

  .file-upload-preview-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    padding: 0;
    font-size: var(--text-lg);
    color: var(--color-danger);
    background: transparent;
    border: 0;
    border-radius: var(--radius-base);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .file-upload-preview-remove:hover {
      background-color: oklch(var(--lch-danger-50));
    }
  }

  /* Compact Variant */
  .file-upload--compact {
    --file-upload-min-height: 5rem;
  }

  .file-upload--compact .file-upload-label {
    padding: var(--space-md);
  }

  .file-upload--compact .file-upload-icon {
    font-size: var(--text-xl);
  }

  .file-upload--compact .file-upload-text {
    font-size: var(--text-sm);
  }
}
@layer components {
  .final-cta {
    padding: var(--space-3xl) 0;
  }

  @media (min-width: 64rem) {
    .final-cta {
      padding: 6rem 0;
    }
  }

  .final-cta__container {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    text-align: center;
  }

  .final-cta__title {
    font-size: clamp(1.875rem, 4vw, 2.25rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
    margin-bottom: var(--space-md);
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
  }

  .final-cta__description {
    font-size: clamp(1.25rem, 2.5vw, 1.875rem);
    color: var(--color-ink);
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-2xl);
    line-height: 1.6;
  }

  .final-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
    margin-bottom: var(--space-2xl);
  }

  .final-cta__footer {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-xl);
  }

  .final-cta__copyright {
    font-size: 0.875rem;
    color: var(--color-ink-light);
    text-align: center;
    margin-bottom: var(--space-md);
  }

  .final-cta__addresses {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    text-align: center;
  }

  @media (min-width: 64rem) {
    .final-cta__addresses {
      flex-direction: row;
      justify-content: center;
      gap: var(--space-xl);
    }
  }

  .final-cta__address {
    font-size: 0.8125rem;
    font-style: normal;
    color: var(--color-ink-light);
    line-height: 1.5;
  }

  /* ========================================
     PUBLIC FOOTER (standalone)
     Used on public pages without CTA
     ======================================== */
  .public-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--space-xl) 0;
  }

  .public-footer__container {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    text-align: center;
  }

  .public-footer__copyright {
    font-size: 0.875rem;
    color: var(--color-ink-light);
    text-align: center;
    margin-bottom: var(--space-md);
  }

  .public-footer__addresses {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    text-align: center;
  }

  @media (min-width: 64rem) {
    .public-footer__addresses {
      flex-direction: row;
      justify-content: center;
      gap: var(--space-xl);
    }
  }

  .public-footer__address {
    font-size: 0.8125rem;
    font-style: normal;
    color: var(--color-ink-light);
    line-height: 1.5;
  }
}
/* Flash Message Component */
/* 37signals-compliant flash notifications */

@layer components {
  #flash {
    position: fixed;
    top: var(--space-lg);
    right: var(--space-lg);
    left: var(--space-lg);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: 28rem;
    margin-inline: auto;
  }

  @media (min-width: 640px) {
    #flash {
      left: auto;
      margin-inline: 0;
    }
  }

  .flash-message {
    animation: flash-slide-in 0.3s ease-out;
  }

  .flash-message.flash-removing {
    animation: flash-slide-out 0.3s ease-in forwards;
  }

  .flash__content {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    background-color: var(--color-canvas);
    border: 1px solid;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(8px);
  }

  .flash__icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
  }

  .flash__body {
    flex: 1;
    min-width: 0;
  }

  .flash__text {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
  }

  .flash__close {
    flex-shrink: 0;
    display: inline-flex;
    color: currentColor;
    opacity: 0.6;
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .flash__close:hover {
    opacity: 1;
  }

  .flash__close:focus {
    outline: none;
  }

  .flash__close svg {
    width: 1rem;
    height: 1rem;
  }

  /* Success variant */
  .flash-success .flash__content {
    border-color: var(--color-success);
    color: var(--color-success);
  }

  .flash-success .flash__icon {
    color: var(--color-success);
  }

  .flash-success .flash__text {
    color: var(--color-ink);
  }

  /* Error variant */
  .flash-error .flash__content {
    border-color: var(--color-danger);
    color: var(--color-danger);
  }

  .flash-error .flash__icon {
    color: var(--color-danger);
  }

  .flash-error .flash__text {
    color: var(--color-ink);
  }

  /* Warning variant */
  .flash-warning .flash__content {
    border-color: var(--color-warning);
    color: var(--color-warning);
  }

  .flash-warning .flash__icon {
    color: var(--color-warning);
  }

  .flash-warning .flash__text {
    color: var(--color-ink);
  }

  /* Info variant */
  .flash-info .flash__content {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  .flash-info .flash__icon {
    color: var(--color-primary);
  }

  .flash-info .flash__text {
    color: var(--color-ink);
  }

  /* Animations */
  @keyframes flash-slide-in {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes flash-slide-out {
    from {
      transform: translateX(0);
      opacity: 1;
    }
    to {
      transform: translateX(100%);
      opacity: 0;
    }
  }
}
/* Form Components */
/* Input, select, textarea, checkbox, radio with CSS variable APIs */

@layer components {
  /* ========================================
     INPUT BASE
     ======================================== */
  .input {
    --input-background: var(--color-canvas);
    --input-border-color: var(--color-border-dark);
    --input-color: var(--color-ink);
    --input-padding-y: 0.5em;
    --input-padding-x: 0.75em;
    --input-border-radius: var(--radius-base);
    --input-font-size: var(--text-base);

    display: block;
    width: 100%;
    padding: var(--input-padding-y) var(--input-padding-x);
    font-size: var(--input-font-size);
    line-height: 1.5;
    color: var(--input-color);
    background-color: var(--input-background);
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    transition: border-color var(--duration-fast) var(--ease-out),
      box-shadow var(--duration-fast) var(--ease-out);
  }

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

  .input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px oklch(var(--lch-primary-500) / 0.1);
  }

  .input[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-canvas-secondary);
  }

  .input[readonly] {
    background-color: var(--color-canvas-secondary);
    cursor: default;
  }

  .input--error {
    border-color: var(--color-danger);
  }

  .input--error:focus {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px oklch(var(--lch-danger-500) / 0.1);
  }

  .input--success {
    border-color: var(--color-success);
  }

  .input--success:focus {
    border-color: var(--color-success);
    box-shadow: 0 0 0 3px oklch(var(--lch-success-500) / 0.1);
  }

  /* Code input variant - for OTP/verification codes */
  .input--code {
    font-size: var(--text-2xl);
    text-align: center;
    font-family: var(--font-mono);
    letter-spacing: 0.5em;
    padding-inline-start: 0.5em;
  }

  /* ========================================
     TEXTAREA
     ======================================== */
  .textarea {
    --input-background: var(--color-canvas);
    --input-border-color: var(--color-border-dark);
    --input-color: var(--color-ink);
    --input-padding-y: 0.5em;
    --input-padding-x: 0.75em;
    --input-border-radius: var(--radius-base);
    --input-font-size: var(--text-base);

    display: block;
    width: 100%;
    padding: var(--input-padding-y) var(--input-padding-x);
    font-size: var(--input-font-size);
    line-height: 1.5;
    color: var(--input-color);
    background-color: var(--input-background);
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    transition: border-color var(--duration-fast) var(--ease-out),
      box-shadow var(--duration-fast) var(--ease-out);
    resize: vertical;
    min-height: 5em;
  }

  .textarea::placeholder {
    color: var(--color-ink-lighter);
  }

  .textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px oklch(var(--lch-primary-500) / 0.1);
  }

  .textarea[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-canvas-secondary);
  }

  .textarea[readonly] {
    background-color: var(--color-canvas-secondary);
    cursor: default;
  }

  /* Textarea with auto-grow support */
  .input--textarea {
    --input-background: var(--color-canvas);
    --input-border-color: var(--color-border-dark);
    --input-color: var(--color-ink);
    --input-padding-y: 0.5em;
    --input-padding-x: 0.75em;
    --input-border-radius: var(--radius-base);
    --input-font-size: var(--text-base);

    display: block;
    width: 100%;
    padding: var(--input-padding-y) var(--input-padding-x);
    font-size: var(--input-font-size);
    line-height: 1.5;
    color: var(--input-color);
    background-color: var(--input-background);
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    transition: border-color var(--duration-fast) var(--ease-out),
      box-shadow var(--duration-fast) var(--ease-out);
    resize: vertical;
    min-height: 5em;
  }

  @supports (field-sizing: content) {
    .input--textarea {
      field-sizing: content;
      max-block-size: calc(10lh + (2 * var(--input-padding-y)));
      min-block-size: calc(3lh + (2 * var(--input-padding-y)));
    }
  }

  .input--textarea::placeholder {
    color: var(--color-ink-lighter);
  }

  .input--textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px oklch(var(--lch-primary-500) / 0.1);
  }

  .input--textarea[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-canvas-secondary);
  }

  .input--textarea[readonly] {
    background-color: var(--color-canvas-secondary);
    cursor: default;
  }

  /* ========================================
     SELECT
     ======================================== */
  .select {
    --select-background: var(--color-canvas);
    --select-border-color: var(--color-border-dark);
    --select-color: var(--color-ink);
    --select-padding-y: 0.5em;
    --select-padding-x: 0.75em;
    --select-border-radius: var(--radius-base);
    --select-font-size: var(--text-base);

    display: block;
    width: 100%;
    appearance: none;
    padding: var(--select-padding-y) var(--select-padding-x);
    padding-inline-end: 2.5em;
    font-size: var(--select-font-size);
    line-height: 1.5;
    color: var(--select-color);
    background-color: var(--select-background);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-position: right 0.5em center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    border: 1px solid var(--select-border-color);
    border-radius: var(--select-border-radius);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
      box-shadow var(--duration-fast) var(--ease-out);
  }

  .select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px oklch(var(--lch-primary-500) / 0.1);
  }

  .select[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-canvas-secondary);
  }

  /* ========================================
     CHECKBOX AND RADIO
     ======================================== */
  .checkbox,
  .radio {
    --checkbox-size: 1.25em;
    --checkbox-border-color: var(--color-border-dark);
    --checkbox-checked-background: var(--color-primary);
    --checkbox-checked-border: var(--color-primary);

    appearance: none;
    inline-size: var(--checkbox-size);
    block-size: var(--checkbox-size);
    border: 2px solid var(--checkbox-border-color);
    border-radius: var(--radius-sm);
    background-color: var(--color-canvas);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all var(--duration-fast) var(--ease-out);
  }

  .checkbox:checked,
  .radio:checked {
    background-color: var(--checkbox-checked-background);
    border-color: var(--checkbox-checked-border);
  }

  .checkbox:checked::after,
  .radio:checked::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-size: 100% 100%;
  }

  .checkbox:focus-visible,
  .radio:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .checkbox[disabled],
  .radio[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .radio {
    border-radius: var(--radius-full);
  }

  .radio:checked::after {
    background-image: none;
    background-color: white;
    border-radius: var(--radius-full);
    inset: 3px;
  }

  /* ========================================
     FORM GROUP
     ======================================== */
  .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-block-end: var(--space-md);
  }

  /* ========================================
     FORM LABEL
     ======================================== */
  .form-label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink-dark);
  }

  .form-label--required::after {
    content: " *";
    color: var(--color-danger);
  }

  /* ========================================
     FORM HELPER TEXT
     ======================================== */
  .form-help {
    font-size: var(--text-sm);
    color: var(--color-ink-light);
  }

  /* ========================================
     FORM ERROR TEXT
     ======================================== */
  .form-error {
    font-size: var(--text-sm);
    color: var(--color-danger);
  }

  /* ========================================
     INPUT GROUP (prefix/suffix)
     ======================================== */
  .input-group {
    display: flex;
    gap: 0;
  }

  .input-group .input,
  .input-group .select {
    border-radius: 0;
  }

  .input-group .input:first-child:not(:last-child),
  .input-group .select:first-child:not(:last-child) {
    border-start-start-radius: var(--input-border-radius);
    border-end-start-radius: var(--input-border-radius);
  }

  .input-group .input:last-child:not(:first-child),
  .input-group .select:last-child:not(:first-child) {
    border-start-end-radius: var(--input-border-radius);
    border-end-end-radius: var(--input-border-radius);
  }

  .input-group__addon {
    display: flex;
    align-items: center;
    padding-inline: var(--space-sm);
    background-color: var(--color-canvas-secondary);
    border: 1px solid var(--color-border-dark);
    color: var(--color-ink-light);
    white-space: nowrap;
    font-size: var(--text-sm);
  }

  .input-group__addon:first-child {
    border-start-start-radius: var(--input-border-radius);
    border-end-start-radius: var(--input-border-radius);
    border-inline-end: 0;
  }

  .input-group__addon:last-child {
    border-start-end-radius: var(--input-border-radius);
    border-end-end-radius: var(--input-border-radius);
    border-inline-start: 0;
  }

  /* ========================================
     CHECKBOX/RADIO GROUP
     ======================================== */
  .checkbox-group,
  .radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .checkbox-item,
  .radio-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .checkbox-item label,
  .radio-item label {
    cursor: pointer;
    user-select: none;
  }

  /* Checkbox forms (button_to with checkbox inside) */
  .checkbox-form {
    all: unset;
    display: block;
    cursor: pointer;
    margin: 0;
    padding: 0;
  }

  .checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
    user-select: none;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    transition: background-color 0.15s ease;
  }

  .checkbox-label:hover {
    background-color: var(--color-bg-subtle);
  }

  .checkbox-label input[type="checkbox"] {
    cursor: pointer;
    pointer-events: none; /* Let the label handle clicks */
  }
}
/* Hero Component */
/* Large hero section for landing pages with title, description, CTA, and postcard-style visuals */

@layer components {
  /* ========================================
     HERO CONTAINER
     ======================================== */
  .hero {
    position: relative;
    overflow: hidden;
  }

  .hero__container {
    position: relative;
    inline-size: 100%;
    max-inline-size: 80rem;
    margin-inline: auto;
    padding-inline: var(--space-lg);
    padding-block: var(--space-xl);
  }

  @media (min-width: 640px) {
    .hero__container {
      padding-block: var(--space-2xl);
    }
  }

  @media (min-width: 1024px) {
    .hero__container {
      padding-block: var(--space-3xl);
    }
  }

  /* ========================================
     HERO GRID LAYOUT
     ======================================== */
  .hero__grid {
    display: grid;
    gap: var(--space-2xl);
    align-items: center;
  }

  @media (min-width: 1024px) {
    .hero__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 4rem;
    }
  }

  /* ========================================
     HERO CONTENT
     ======================================== */
  .hero__content {
    order: 1;
  }

  /* ========================================
     HERO BADGES
     ======================================== */
  .hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-block-end: var(--space-lg);
  }

  .hero__badge {
    display: inline-block;
    padding: var(--space-2xs) var(--space-md);
    background: var(--color-canvas-secondary);
    color: var(--color-ink);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
  }

  /* ========================================
     HERO TYPOGRAPHY
     ======================================== */
  .hero__title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-ink-darkest);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-block-end: var(--space-lg);
  }

  .hero__description {
    font-size: clamp(1.25rem, 2.5vw, 1.875rem);
    color: var(--color-ink-light);
    line-height: 1.5;
    margin-block-end: var(--space-xl);
  }

  /* ========================================
     HERO CTA
     ======================================== */
  .hero__cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  @media (min-width: 640px) {
    .hero__cta {
      flex-direction: row;
    }
  }

  /* ========================================
     HERO TRUST INDICATORS
     ======================================== */
  .hero__trust {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-xl);
    border-block-start: 1px solid var(--color-border);
  }

  .hero__trust-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-lg);
    font-size: var(--text-sm);
    color: var(--color-ink-light);
  }

  .hero__trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .hero__trust-icon {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    color: var(--color-success);
    flex-shrink: 0;
  }

  /* ========================================
     HERO TESTIMONIAL
     ======================================== */
  .hero__testimonial {
    order: 2;
    position: relative;
    block-size: 26rem;
  }

  @media (min-width: 640px) {
    .hero__testimonial {
      block-size: 32rem;
    }
  }

  @media (min-width: 1024px) {
    .hero__testimonial {
      block-size: 28rem;
    }
  }

  /* Testimonial Slide */
  .hero__testimonial-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 500ms var(--ease-out), visibility 500ms;
  }

  .hero__testimonial-slide--active {
    opacity: 1;
    visibility: visible;
  }

  /* Background Shape */
  .hero__testimonial-shape {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: 14rem;
    block-size: 16rem;
    background: #dbeafe;
    border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
    z-index: 1;
  }

  @media (min-width: 640px) {
    .hero__testimonial-shape {
      inline-size: 16rem;
      block-size: 18rem;
    }
  }

  /* Color Variants for Background Shape */
  .hero__testimonial-slide--blue .hero__testimonial-shape {
    background: #dbeafe;
  }

  .hero__testimonial-slide--green .hero__testimonial-shape {
    background: #dcfce7;
  }

  .hero__testimonial-slide--purple .hero__testimonial-shape {
    background: #f3e8ff;
  }

  .hero__testimonial-slide--yellow .hero__testimonial-shape {
    background: #fef9c3;
  }

  .hero__testimonial-slide--red .hero__testimonial-shape {
    background: #fee2e2;
  }

  /* Dark mode shape colors - slightly muted */
  html[data-theme="dark"] .hero__testimonial-slide--blue .hero__testimonial-shape {
    background: oklch(35% 0.08 260);
  }

  html[data-theme="dark"] .hero__testimonial-slide--green .hero__testimonial-shape {
    background: oklch(35% 0.08 142);
  }

  html[data-theme="dark"] .hero__testimonial-slide--purple .hero__testimonial-shape {
    background: oklch(35% 0.08 300);
  }

  html[data-theme="dark"] .hero__testimonial-slide--yellow .hero__testimonial-shape {
    background: oklch(35% 0.08 85);
  }

  html[data-theme="dark"] .hero__testimonial-slide--red .hero__testimonial-shape {
    background: oklch(35% 0.08 25);
  }

  /* Person Image */
  .hero__testimonial-image {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: 12rem;
    block-size: 14rem;
    z-index: 2;
    overflow: hidden;
    border-radius: var(--radius-lg);
  }

  @media (min-width: 640px) {
    .hero__testimonial-image {
      inline-size: 14rem;
      block-size: 16rem;
    }
  }

  .hero__testimonial-image img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center top;
  }

  /* Info Card */
  .hero__testimonial-card {
    position: absolute;
    inset-block-start: 15rem;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: calc(100% - 1rem);
    max-inline-size: 18rem;
    background: var(--color-canvas);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgb(0 0 0 / 0.15);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  @media (min-width: 640px) {
    .hero__testimonial-card {
      inset-block-start: 17rem;
      max-inline-size: 20rem;
    }
  }

  /* Quote */
  .hero__testimonial-card-quote {
    font-size: 0.9375rem;
    font-style: italic;
    color: var(--color-ink);
    line-height: 1.5;
    margin: 0;
  }

  /* Person info */
  .hero__testimonial-card-person {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-block-start: var(--space-xs);
    border-block-start: 1px solid var(--color-border);
  }

  .hero__testimonial-card-person-name {
    font-size: 0.875rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
  }

  .hero__testimonial-card-person-role {
    font-size: 0.75rem;
    color: var(--color-ink-light);
  }

}
/* Kbd Component */
/* Visual styling for keyboard shortcuts */

@layer components {
  .kbd {
    /* CSS Variable API */
    --kbd-background: var(--color-canvas);
    --kbd-border-color: var(--color-border-dark);
    --kbd-color: var(--color-ink-darkest);
    --kbd-padding: 0.125em 0.4em;
    --kbd-font-size: 0.875em;

    display: inline-block;
    padding: var(--kbd-padding);
    font-family: var(--font-mono);
    font-size: var(--kbd-font-size);
    line-height: 1;
    color: var(--kbd-color);
    background-color: var(--kbd-background);
    border: 1px solid var(--kbd-border-color);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 0 var(--kbd-border-color), inset 0 0 0 0.0625em var(--color-canvas);
    white-space: nowrap;
  }

  /* Platform Variants */
  .kbd--mac {
    font-family: -apple-system, BlinkMacSystemFont, var(--font-sans);
  }

  .kbd--windows {
    /* Use default styles */
  }

  /* Size Variants */
  .kbd--sm {
    --kbd-padding: 0.0625em 0.3em;
    --kbd-font-size: 0.75em;
  }

  .kbd--lg {
    --kbd-padding: 0.25em 0.5em;
    --kbd-font-size: 1em;
  }
}
/* List Group Component */
/* Enhanced list with actions, metadata, selection states */

@layer components {
  .list-group {
    /* CSS Variable API */
    --list-group-border-color: var(--color-border);
    --list-group-background: var(--color-canvas);

    margin: 0;
    padding: 0;
    list-style: none;
    background-color: var(--list-group-background);
    border: 1px solid var(--list-group-border-color);
    border-radius: var(--radius-base);
  }

  .list-group-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background-color: var(--list-group-background);
    border-block-end: 1px solid var(--list-group-border-color);
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  .list-group-item:last-child {
    border-block-end: 0;
  }

  @media (any-hover: hover) {
    .list-group-item:hover {
      background-color: var(--color-canvas-subtle);
    }
  }

  .list-group-content {
    flex: 1;
    min-inline-size: 0;
  }

  .list-group-title {
    margin: 0 0 var(--space-2xs) 0;
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-darkest);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .list-group-text {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-ink-light);
    line-height: var(--line-height-normal);
  }

  .list-group-meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block-start: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--color-ink-light);
  }

  .list-group-actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  /* Interactive Items (Clickable) */
  .list-group-item--interactive {
    cursor: pointer;
  }

  @media (any-hover: hover) {
    .list-group-item--interactive:hover {
      background-color: oklch(var(--lch-primary-50));
    }
  }

  .list-group-item--interactive:active {
    transform: scale(0.99);
  }

  /* Active/Selected State */
  .list-group-item--active {
    background-color: oklch(var(--lch-primary-50));
    border-inline-start: 3px solid var(--color-primary);
  }

  .list-group-item--active .list-group-title {
    color: var(--color-primary);
  }

  /* Striped Variant */
  .list-group--striped .list-group-item:nth-child(even) {
    background-color: var(--color-canvas-subtle);
  }

  /* Flush Variant (No Borders) */
  .list-group--flush {
    border: 0;
    border-radius: 0;
  }

  .list-group--flush .list-group-item:first-child {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
  }

  .list-group--flush .list-group-item:last-child {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }

  /* Compact Variant */
  .list-group--compact .list-group-item {
    padding: var(--space-sm);
  }

  .list-group--compact .list-group-title {
    font-size: var(--text-sm);
  }

  .list-group--compact .list-group-text {
    font-size: var(--text-xs);
  }
}
@layer components {
  .loading-skeleton {
    padding: var(--space-md);
  }

  .loading-skeleton__title {
    height: 24px;
    width: 140px;
    background: var(--color-canvas-light);
    border-radius: var(--radius-sm);
    margin-block-end: var(--space-md);
    animation: pulse 1.5s ease-in-out infinite;
  }

  .loading-skeleton__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .loading-skeleton__line {
    height: 16px;
    background: var(--color-canvas-light);
    border-radius: var(--radius-sm);
    animation: pulse 1.5s ease-in-out infinite;
  }

  /* Stagger animation for multiple lines */
  .loading-skeleton__line:nth-child(1) {
    animation-delay: 0s;
  }

  .loading-skeleton__line:nth-child(2) {
    animation-delay: 0.2s;
  }

  .loading-skeleton__line:nth-child(3) {
    animation-delay: 0.4s;
  }

  @keyframes pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }

  /* Compact variant for smaller cards */
  .loading-skeleton--compact {
    padding: var(--space-sm);
  }

  .loading-skeleton--compact .loading-skeleton__title {
    height: 20px;
    width: 100px;
    margin-block-end: var(--space-sm);
  }

  .loading-skeleton--compact .loading-skeleton__line {
    height: 14px;
  }
}
/* Mail Item Components */

/* Container */
.mail-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Summary Card */
.mail-summary {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  font-size: var(--text-sm);
}

.mail-summary__content {
  flex: 1;
  min-width: 0;
}

.mail-summary__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block-end: var(--space-sm);
}

.mail-summary__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.mail-summary__text {
  font-size: var(--text-sm);
  color: var(--color-ink-darkest);
  line-height: 1.6;
}

/* Tags/Badges */
.mail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.mail-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

.mail-tag--primary {
  background-color: oklch(0.95 0.05 240);
  color: oklch(0.4 0.15 240);
}

.mail-tag--warning {
  background-color: oklch(0.95 0.08 60);
  color: oklch(0.4 0.15 60);
}

.mail-tag--info {
  background-color: oklch(0.95 0.05 280);
  color: oklch(0.4 0.15 280);
}

/* Sections */
.mail-section {
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid oklch(0.9 0.05 240);
}

.mail-section__label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink);
  margin-block-end: 0.25rem;
}

.mail-section__value {
  font-size: var(--text-sm);
  color: var(--color-ink-darkest);
}

/* Key Information Grid */
.mail-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  font-size: var(--text-xs);
}

@media (min-width: 640px) {
  .mail-info-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.mail-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.mail-info-item__icon {
  margin-block-start: 0.125rem;
  flex-shrink: 0;
}

.mail-info-item__label {
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-darkest);
}

.mail-info-item__description {
  color: var(--color-ink);
}

/* Action Items List */
.mail-action-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.mail-action-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-sm);
}

.mail-action-item__text {
  color: var(--color-ink-darkest);
}

.mail-action-item__deadline {
  font-size: var(--text-xs);
  color: var(--color-ink);
}

/* Warnings */
.mail-warnings {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mail-warning {
  font-size: var(--text-xs);
  color: var(--color-danger);
}

.mail-warning__title {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-danger);
  margin-block-end: var(--space-sm);
}

/* Details Article */
.mail-details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  font-size: var(--text-sm);
}

.mail-details__title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  margin-block-end: var(--space-md);
}

.mail-details__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.mail-details__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.mail-details__item-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-light);
}

.mail-details__item-value {
  margin-block-start: 0.25rem;
  font-size: var(--text-sm);
  color: var(--color-ink-darkest);
}

.mail-details__divider {
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--color-border-light);
}

/* Documents */
.mail-documents {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.mail-document {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm);
  background-color: var(--color-canvas-secondary);
  border-radius: var(--radius-md);
}

.mail-document__info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.mail-document__icon {
  padding: var(--space-xs);
  background-color: oklch(0.95 0.05 240);
  border-radius: var(--radius-sm);
}

.mail-document__name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-darkest);
}

.mail-document__size {
  font-size: var(--text-xs);
  color: var(--color-ink-light);
}

.mail-document__link {
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.mail-document__link:hover {
  color: var(--color-primary-dark);
}

/* Icon utilities */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.icon--sm {
  width: 1rem;
  height: 1rem;
}

.icon--primary {
  color: oklch(0.5 0.15 240);
}

.icon--success {
  color: var(--color-success);
}

.icon--warning {
  color: oklch(0.5 0.15 60);
}

.icon--danger {
  color: var(--color-danger);
}

/* Utilities */
.flex-1 {
  flex: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
/* Modal/Dialog Component */
/* With @starting-style for entry animations */

@layer components {
  .modal {
    --modal-background: var(--color-canvas);
    --modal-max-width: 32rem;
    --modal-padding: var(--space-xl);
    --modal-border-radius: var(--radius-lg);

    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
  }

  .modal[open] {
    opacity: 1;
    transform: scale(1);
  }

  @starting-style {
    .modal[open] {
      opacity: 0;
      transform: scale(0.95);
    }
  }

  .modal:not([open]) {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
  }

  .modal {
    transition: opacity var(--duration-base) var(--ease-out),
      transform var(--duration-base) var(--ease-out),
      overlay var(--duration-base) allow-discrete,
      display var(--duration-base) allow-discrete;
  }

  /* Backdrop */
  .modal::backdrop {
    background-color: oklch(var(--lch-ink-darkest) / 0.5);
    backdrop-filter: blur(4px);
  }

  @starting-style {
    .modal[open]::backdrop {
      opacity: 0;
    }
  }

  /* Content */
  .modal__content {
    position: relative;
    background-color: var(--modal-background);
    border-radius: var(--modal-border-radius);
    box-shadow: var(--shadow-2xl);
    max-width: var(--modal-max-width);
    width: 100%;
    max-height: calc(100vh - 2 * var(--space-md));
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Handle nested turbo-frame and form elements */
  .modal__content > turbo-frame,
  .modal__content > form,
  .modal__content > turbo-frame > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .modal__header {
    flex-shrink: 0;
    padding: var(--modal-padding);
    padding-block-end: var(--space-md);
    border-block-end: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
  }

  .modal__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-darkest);
    margin: 0;
  }

  .modal__close {
    appearance: none;
    background: transparent;
    border: none;
    padding: var(--space-xs);
    cursor: pointer;
    color: var(--color-ink-light);
    border-radius: var(--radius-sm);
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .modal__close:hover {
      background-color: var(--color-canvas-secondary);
      color: var(--color-ink);
    }
  }

  .modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--modal-padding);
    color: var(--color-ink);
  }

  .modal__footer {
    flex-shrink: 0;
    padding: var(--modal-padding);
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
  }

  /* Size variants */
  .modal--sm {
    --modal-max-width: 24rem;
  }

  .modal--lg {
    --modal-max-width: 48rem;
  }

  .modal--xl {
    --modal-max-width: 64rem;
  }

  .modal--full {
    --modal-max-width: calc(100vw - 2 * var(--space-md));
  }

  /* Alternative dialog (native HTML dialog) - duplicate modal styles */
  dialog.dialog {
    --modal-background: var(--color-canvas);
    --modal-max-width: 32rem;
    --modal-padding: var(--space-xl);
    --modal-border-radius: var(--radius-lg);

  /* Custom modal backdrop and container for non-dialog modals */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: oklch(var(--lch-ink-darkest) / 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
    padding: var(--space-md);
  }

  .modal-container {
    position: relative;
    background-color: var(--color-canvas);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2xl);
    max-width: 32rem;
    width: 100%;
    max-height: calc(100vh - 2 * var(--space-md));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: var(--z-modal);
  }

  .modal-container .modal__content {
    display: flex;
    flex-direction: column;
    max-height: inherit;
  }

    /* Reset native dialog styles */
    border: none;
    background: transparent;
    max-width: none;
    max-height: none;
    padding: var(--space-md);
    margin: 0;

    /* Positioning */
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;

    transition: opacity var(--duration-base) var(--ease-out),
      transform var(--duration-base) var(--ease-out),
      overlay var(--duration-base) allow-discrete,
      display var(--duration-base) allow-discrete;
  }

  /* Size variants for dialog */
  dialog.dialog--sm {
    --modal-max-width: 24rem;
  }

  dialog.dialog--md {
    --modal-max-width: 36rem;
  }

  dialog.dialog--lg {
    --modal-max-width: 48rem;
  }

  dialog.dialog--xl {
    --modal-max-width: 64rem;
  }

  dialog.dialog[open] {
    opacity: 1;
    transform: scale(1);
  }

  @starting-style {
    dialog.dialog[open] {
      opacity: 0;
      transform: scale(0.95);
    }
  }

  dialog.dialog:not([open]) {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
  }

  dialog.dialog::backdrop {
    background-color: oklch(var(--lch-ink-darkest) / 0.5);
    backdrop-filter: blur(4px);
  }

  @starting-style {
    dialog.dialog[open]::backdrop {
      opacity: 0;
    }
  }
}
/* Public Navbar Component */
/* Fixed navbar with rounded card design for landing/marketing pages */

@layer components {
  /* ========================================
     PUBLIC NAVBAR WRAPPER
     Fixed container that positions navbar
     ======================================== */
  .navbar-public-wrapper {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-nav);
    display: flex;
    justify-content: center;
    padding-inline: var(--space-lg);
    transition: background-color 300ms ease;
  }

  /* Transparent background for public home page */
  .navbar-public-wrapper--transparent {
    background: transparent;
  }

  /* Solid background for other pages */
  .navbar-public-wrapper--solid {
    background: var(--color-canvas);
  }

  /* ========================================
     PUBLIC NAVBAR
     Inner navbar card with rounded corners
     ======================================== */
  .navbar-public {
    position: relative;
    margin-block-start: var(--space-md);
    margin-block-end: var(--space-md);
    inline-size: 100%;
    max-inline-size: 80rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-canvas);
    color: var(--color-ink);
    border-radius: var(--radius-xl);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
  }

  /* ========================================
     BRAND / LOGO
     ======================================== */
  .navbar-public__brand {
    display: flex;
    justify-content: flex-start;
  }

  @media (min-width: 1024px) {
    .navbar-public__brand {
      inline-size: 0;
      flex: 1;
    }
  }

  .navbar-public__logo {
    inline-size: 8rem;
  }

  /* ========================================
     MOBILE TOGGLE BUTTON
     ======================================== */
  .navbar-public__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs);
    border-radius: var(--radius-md);
    color: var(--color-ink-light);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out),
      background-color var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .navbar-public__toggle:hover {
      color: var(--color-ink);
      background-color: var(--color-canvas-secondary);
    }
  }

  .navbar-public__toggle:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  @media (min-width: 1024px) {
    .navbar-public__toggle {
      display: none;
    }
  }

  .navbar-public__toggle-icon {
    inline-size: 1.5rem;
    block-size: 1.5rem;
  }

  /* Screen reader only text */
  .navbar-public__sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* ========================================
     DESKTOP MENU
     ======================================== */
  .navbar-public__desktop {
    display: none;
  }

  @media (min-width: 1024px) {
    .navbar-public__desktop {
      display: flex;
      align-items: center;
      flex: 1;
      justify-content: flex-end;
    }
  }

  /* Nav links group - centered between logo and auth */
  .navbar-public__links {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Individual nav link */
  .navbar-public__link {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-sm);
    color: var(--color-ink);
    text-decoration: none;
    border-radius: var(--radius-base);
    background: transparent;
    border: none;
    font: inherit;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .navbar-public__link:hover {
      background-color: var(--color-canvas-secondary);
    }
  }

  /* ========================================
     USER MENU DROPDOWN
     ======================================== */
  .navbar-public__user {
    position: relative;
    margin-inline-start: var(--space-md);
  }

  .navbar-public__user-button {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    color: var(--color-ink);
    background: transparent;
    border: none;
    border-radius: var(--radius-base);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .navbar-public__user-button:hover {
      background-color: var(--color-canvas-secondary);
    }
  }

  .navbar-public__user-icon {
    inline-size: 1rem;
    block-size: 1rem;
  }

  /* User dropdown menu */
  .navbar-public__user-menu {
    position: absolute;
    inset-inline-end: 0;
    margin-block-start: var(--space-xs);
    inline-size: 12rem;
    background: var(--color-canvas);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding-block: var(--space-2xs);
    z-index: 50;
    border: 1px solid var(--color-border);
  }

  .navbar-public__user-menu[hidden] {
    display: none;
  }

  .navbar-public__user-email {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-ink-light);
    border-block-end: 1px solid var(--color-border);
  }

  .navbar-public__user-menu-item {
    display: block;
    inline-size: 100%;
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-ink);
    text-decoration: none;
    text-align: start;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .navbar-public__user-menu-item:hover {
      background-color: var(--color-canvas-secondary);
    }
  }

  /* ========================================
     AUTH BUTTONS
     ======================================== */
  .navbar-public__auth {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-inline-start: var(--space-md);
  }

  /* ========================================
     MOBILE MENU
     ======================================== */
  .navbar-public__mobile {
    inline-size: 100%;
    margin-block-start: var(--space-md);
  }

  .navbar-public__mobile.hidden {
    display: none;
  }

  @media (min-width: 1024px) {
    .navbar-public__mobile {
      display: none !important;
    }
  }

  .navbar-public__mobile-nav {
    padding-block-start: var(--space-xs);
    padding-block-end: var(--space-md);
  }

  .navbar-public__mobile-nav-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .navbar-public__mobile-link {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink);
    text-decoration: none;
    text-align: start;
    background: transparent;
    border: none;
    cursor: pointer;
    inline-size: 100%;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .navbar-public__mobile-link:hover {
      background-color: var(--color-canvas-secondary);
    }
  }

  .navbar-public__mobile-divider {
    border-block-start: 1px solid var(--color-border);
    margin-block: var(--space-xs);
  }

  .navbar-public__mobile-user {
    padding-block-start: var(--space-xs);
  }

  .navbar-public__mobile-email {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-ink-light);
  }

  .navbar-public__mobile-button {
    display: block;
    inline-size: 100%;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-danger);
    text-align: start;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .navbar-public__mobile-button:hover {
      background-color: var(--color-canvas-secondary);
    }
  }
}
/* Navigation Components */
/* Navbar, sidebar, breadcrumbs, tabs */

@layer components {
  /* ========================================
     NAVBAR
     ======================================== */
  .navbar {
    --navbar-background: var(--color-canvas);
    --navbar-border-color: var(--color-border);
    --navbar-height: 4rem;
    --navbar-padding: var(--space-md);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    block-size: var(--navbar-height);
    padding-inline: var(--navbar-padding);
    background-color: var(--navbar-background);
    border-block-end: 1px solid var(--navbar-border-color);
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-nav);
  }

  .navbar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-darkest);
    text-decoration: none;
  }

  .navbar__menu {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .navbar__item a {
    display: block;
    padding: var(--space-xs) var(--space-sm);
    color: var(--color-ink);
    text-decoration: none;
    border-radius: var(--radius-base);
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .navbar__item a:hover {
      background-color: var(--color-canvas-secondary);
    }
  }

  .navbar__item a[aria-current="page"] {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-weight: var(--font-weight-medium);
  }

  .navbar--fixed {
    position: fixed;
    inset-inline: 0;
  }

  /* ========================================
     SIDEBAR
     ======================================== */
  .sidebar {
    --sidebar-width: 16rem;
    --sidebar-background: var(--color-canvas);
    --sidebar-border-color: var(--color-border);

    inline-size: var(--sidebar-width);
    block-size: 100%;
    background-color: var(--sidebar-background);
    border-inline-end: 1px solid var(--sidebar-border-color);
    padding: var(--space-lg);
    overflow-y: auto;
  }

  .sidebar__section {
    margin-block-end: var(--space-lg);
  }

  .sidebar__section:last-child {
    margin-block-end: 0;
  }

  .sidebar__title {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-ink-light);
    margin-block-end: var(--space-sm);
  }

  .sidebar__menu {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .sidebar__item a {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    color: var(--color-ink);
    text-decoration: none;
    border-radius: var(--radius-base);
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .sidebar__item a:hover {
      background-color: var(--color-canvas-secondary);
    }
  }

  .sidebar__item a[aria-current="page"] {
    background-color: var(--color-primary);
    color: var(--color-ink-inverted);
    font-weight: var(--font-weight-medium);
  }

  /* ========================================
     BREADCRUMBS
     ======================================== */
  .breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .breadcrumb__item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-sm);
  }

  .breadcrumb__item:not(:last-child)::after {
    content: "/";
    color: var(--color-ink-light);
  }

  .breadcrumb__item a {
    color: var(--color-primary);
    text-decoration: none;
  }

  @media (any-hover: hover) {
    .breadcrumb__item a:hover {
      text-decoration: underline;
    }
  }

  .breadcrumb__item[aria-current="page"] {
    color: var(--color-ink);
    font-weight: var(--font-weight-medium);
  }

  /* ========================================
     TABS
     ======================================== */
  .tabs {
    --tabs-border-color: var(--color-border);
    --tabs-active-color: var(--color-primary);
  }

  .tabs__list {
    display: flex;
    gap: 0;
    border-block-end: 2px solid var(--tabs-border-color);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .tabs__item button,
  .tabs__item a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink-light);
    text-decoration: none;
    background: transparent;
    border: none;
    border-block-end: 2px solid transparent;
    margin-block-end: -2px;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out),
      border-color var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .tabs__item button:hover,
    .tabs__item a:hover {
      color: var(--color-ink);
    }
  }

  .tabs__item button[aria-selected="true"],
  .tabs__item a[aria-selected="true"],
  .tabs__item button[aria-current="page"],
  .tabs__item a[aria-current="page"] {
    color: var(--tabs-active-color);
    border-block-end-color: var(--tabs-active-color);
  }

  .tabs__panel {
    padding-block-start: var(--space-lg);
  }

  .tabs__panel[hidden] {
    display: none;
  }
}
/* Pagination Component */
/* Page navigation with numbered pages */

@layer components {
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xl) var(--space-lg);
    margin-block-start: var(--space-2xl);
  }

  .pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    height: 3rem;
    padding-inline: var(--space-md);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    color: var(--color-ink);
    text-decoration: none;
    background-color: white;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  @media (any-hover: hover) {
    .pagination__link:hover:not(.pagination__link--active):not(
        .pagination__link--disabled
      ) {
      background-color: var(--color-primary-lightest, #f0f4ff);
      border-color: var(--color-primary);
      color: var(--color-primary);
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
  }

  .pagination__link:active:not(.pagination__link--active):not(
      .pagination__link--disabled
    ) {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  }

  .pagination__link--active {
    background: linear-gradient(
      135deg,
      var(--color-primary),
      var(--color-primary-dark, #3b5bdb)
    );
    border-color: var(--color-primary);
    color: white;
    cursor: default;
    font-weight: var(--font-weight-semibold);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }

  .pagination__link--disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    background-color: var(--color-canvas-secondary);
  }

  .pagination__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    height: 3rem;
    color: var(--color-ink-light);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.05em;
    user-select: none;
  }

  /* ========================================
     MOBILE/DESKTOP VARIANTS
     ======================================== */
  .pagination__mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
  }

  @media (min-width: 640px) {
    .pagination__mobile {
      display: none;
    }
  }

  .pagination__desktop {
    display: none;
  }

  @media (min-width: 640px) {
    .pagination__desktop {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-lg);
    }
  }

  /* Button */
  .pagination__button {
    display: inline-flex;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: oklch(var(--lch-ink-darkest));
    background-color: oklch(var(--lch-canvas));
    border: 1px solid oklch(var(--lch-primary-300));
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
  }

  .pagination__button:hover {
    background-color: oklch(var(--lch-canvas-secondary));
    border-color: oklch(var(--lch-primary-500));
  }

  .pagination__button--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Info */
  .pagination__info {
    font-size: var(--text-sm);
    color: oklch(var(--lch-ink));
  }

  /* Summary */
  .pagination__summary {
    font-size: var(--text-sm);
    color: oklch(var(--lch-ink));
  }

  .pagination__summary-value {
    font-weight: var(--font-weight-semibold);
    color: oklch(var(--lch-ink-darkest));
  }

  /* Controls */
  .pagination__controls {
    display: inline-flex;
    gap: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  /* Navigation arrows */
  .pagination__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    color: oklch(var(--lch-ink-light));
    background-color: oklch(var(--lch-canvas));
    border: 1px solid oklch(var(--lch-primary-300));
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
  }

  .pagination__nav svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  .pagination__nav:hover {
    background-color: oklch(var(--lch-canvas-secondary));
    color: oklch(var(--lch-primary-600));
  }

  .pagination__nav--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__nav--prev {
    border-start-start-radius: var(--radius-md);
    border-end-start-radius: var(--radius-md);
  }

  .pagination__nav--next {
    border-start-end-radius: var(--radius-md);
    border-end-end-radius: var(--radius-md);
  }

  /* Page numbers */
  .pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: oklch(var(--lch-ink-darkest));
    background-color: oklch(var(--lch-canvas));
    border-block: 1px solid oklch(var(--lch-primary-300));
    border-inline-end: 1px solid oklch(var(--lch-primary-300));
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
  }

  .pagination__page:hover {
    background-color: oklch(var(--lch-canvas-secondary));
    color: oklch(var(--lch-primary-600));
  }

  .pagination__page--current {
    background-color: oklch(var(--lch-primary-600));
    color: oklch(var(--lch-ink-inverted));
    font-weight: var(--font-weight-semibold);
    cursor: default;
  }
}
/* Popover Component */
/* Floating content container (richer than tooltip, interactive) */

@layer components {
  .popover {
    /* CSS Variable API */
    --popover-background: var(--color-canvas);
    --popover-border-color: var(--color-border);
    --popover-max-width: 20rem;
    --popover-shadow: var(--shadow-xl);
    --popover-transition: var(--duration-fast) var(--ease-out);

    position: relative;
  }

  .popover-trigger {
    /* Inherit button styles */
  }

  .popover-content {
    position: absolute;
    z-index: var(--z-dropdown);
    inline-size: max-content;
    max-inline-size: var(--popover-max-width);
    margin: 0;
    padding: 0;
    background-color: var(--popover-background);
    border: 1px solid var(--popover-border-color);
    border-radius: var(--radius-base);
    box-shadow: var(--popover-shadow);
    inset: unset;
    transition: opacity var(--popover-transition),
      transform var(--popover-transition);
  }

  .popover-content:not(:popover-open) {
    display: none;
  }

  @supports (animation-timeline: scroll()) {
    .popover-content:popover-open {
      @starting-style {
        opacity: 0;
        transform: scale(0.95);
      }
    }
  }

  /* Position Variants */
  .popover-content.popover--top {
    inset-block-end: calc(100% + var(--space-xs));
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  .popover-content.popover--bottom {
    inset-block-start: calc(100% + var(--space-xs));
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  .popover-content.popover--left {
    inset-inline-end: calc(100% + var(--space-xs));
    inset-block-start: 50%;
    transform: translateY(-50%);
  }

  .popover-content.popover--right {
    inset-inline-start: calc(100% + var(--space-xs));
    inset-block-start: 50%;
    transform: translateY(-50%);
  }

  /* Content Structure */
  .popover-header {
    padding: var(--space-md);
    border-block-end: 1px solid var(--color-border);
  }

  .popover-header > * {
    margin: 0;
  }

  .popover-body {
    padding: var(--space-md);
  }

  .popover-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-block-start: 1px solid var(--color-border);
  }

  /* Optional Arrow */
  .popover-content::before {
    content: "";
    position: absolute;
    inline-size: 0;
    block-size: 0;
    border: 0.5rem solid transparent;
    display: none;
  }

  .popover-content.popover--has-arrow::before {
    display: block;
  }

  .popover-content.popover--top.popover--has-arrow::before {
    inset-block-start: 100%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    border-block-start-color: var(--popover-border-color);
  }

  .popover-content.popover--bottom.popover--has-arrow::before {
    inset-block-end: 100%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    border-block-end-color: var(--popover-border-color);
  }

  .popover-content.popover--left.popover--has-arrow::before {
    inset-inline-start: 100%;
    inset-block-start: 50%;
    transform: translateY(-50%);
    border-inline-start-color: var(--popover-border-color);
  }

  .popover-content.popover--right.popover--has-arrow::before {
    inset-inline-end: 100%;
    inset-block-start: 50%;
    transform: translateY(-50%);
    border-inline-end-color: var(--popover-border-color);
  }
}
/* Progress Indicators */
/* Progress bars, spinners, skeletons */

@layer components {
  /* ========================================
     PROGRESS BAR
     ======================================== */
  .progress {
    --progress-background: var(--color-canvas-secondary);
    --progress-fill-background: var(--color-primary);
    --progress-height: 0.5rem;
    --progress-border-radius: var(--radius-full);

    inline-size: 100%;
    block-size: var(--progress-height);
    background-color: var(--progress-background);
    border-radius: var(--progress-border-radius);
    overflow: hidden;
  }

  .progress__fill {
    block-size: 100%;
    background-color: var(--progress-fill-background);
    border-radius: var(--progress-border-radius);
    transition: inline-size var(--duration-slow) var(--ease-out);
  }

  /* Variants */
  .progress--success {
    --progress-fill-background: var(--color-success);
  }

  .progress--warning {
    --progress-fill-background: var(--color-warning);
  }

  .progress--danger {
    --progress-fill-background: var(--color-danger);
  }

  /* Sizes */
  .progress--sm {
    --progress-height: 0.375rem;
  }

  .progress--lg {
    --progress-height: 0.75rem;
  }

  /* Indeterminate animation */
  .progress--indeterminate .progress__fill {
    inline-size: 40% !important;
    animation: indeterminate 1.5s ease-in-out infinite;
  }

  @keyframes indeterminate {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(350%);
    }
  }

  /* ========================================
     SPINNER
     ======================================== */
  .spinner {
    --spinner-size: 2rem;
    --spinner-color: var(--color-primary);
    --spinner-border-width: 2px;

    inline-size: var(--spinner-size);
    block-size: var(--spinner-size);
    border: var(--spinner-border-width) solid var(--color-canvas-secondary);
    border-block-start-color: var(--spinner-color);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
  }

  /* Sizes */
  .spinner--sm {
    --spinner-size: 1rem;
    --spinner-border-width: 1.5px;
  }

  .spinner--lg {
    --spinner-size: 3rem;
    --spinner-border-width: 3px;
  }

  .spinner--xl {
    --spinner-size: 4rem;
    --spinner-border-width: 4px;
  }

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

  /* ========================================
     SKELETON (loading placeholders)
     ======================================== */
  .skeleton {
    --skeleton-background: var(--color-canvas-secondary);
    --skeleton-highlight: var(--color-canvas-subtle);

    background: linear-gradient(
      90deg,
      var(--skeleton-background) 25%,
      var(--skeleton-highlight) 50%,
      var(--skeleton-background) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--radius-base);
  }

  .skeleton--text {
    block-size: 1em;
    margin-block-end: 0.5em;
  }

  .skeleton--heading {
    block-size: 2em;
    inline-size: 60%;
    margin-block-end: 0.5em;
  }

  .skeleton--circle {
    border-radius: var(--radius-full);
    aspect-ratio: 1;
  }

  .skeleton--rect {
    inline-size: 100%;
    block-size: 8rem;
  }

  @keyframes skeleton-loading {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
}
/* Radio Card Component
 * 
 * A card-style radio button for selecting between options.
 * Useful for forms where users pick between entity types, plans, options, etc.
 * 
 * Structure:
 * <label class="radio-card">
 *   <input type="radio" class="radio-card__input" />
 *   <div class="radio-card__content">
 *     <span class="radio-card__title">Option Title</span>
 *     <p class="radio-card__description">Optional description</p>
 *   </div>
 * </label>
 */

@layer components {
  .radio-card {
    position: relative;
    display: block;
    padding: var(--space-md);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-canvas);
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .radio-card:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-subtle);
  }

  .radio-card:has(.radio-card__input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-subtle);
    box-shadow: 0 0 0 3px var(--color-primary-subtle);
  }

  .radio-card:has(.radio-card__input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .radio-card__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  .radio-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .radio-card__title {
    font-weight: var(--font-weight-medium);
    font-size: var(--text-base);
    color: var(--color-ink);
  }

  .radio-card__description {
    font-size: var(--text-sm);
    color: var(--color-ink-light);
    margin: 0;
    line-height: 1.5;
  }

  /* Optional indicator (checkmark) */
  .radio-card::before {
    content: "";
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-canvas);
    transition: all 0.2s ease;
  }

  .radio-card:has(.radio-card__input:checked)::before {
    border-color: var(--color-primary);
    background: var(--color-primary);
    box-shadow: inset 0 0 0 3px var(--color-canvas);
  }

  /* Disabled state */
  .radio-card:has(.radio-card__input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
}
/* Range/Slider Component */
/* Styled native range input for numeric values */

@layer components {
  .range {
    /* CSS Variable API */
    --range-track-height: 0.375rem;
    --range-thumb-size: 1.25rem;
    --range-track-color: var(--color-canvas-secondary);
    --range-fill-color: var(--color-primary);

    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .range-input {
    inline-size: 100%;
    block-size: var(--range-thumb-size);
    margin: 0;
    background: transparent;
    cursor: pointer;
    appearance: none;
  }

  /* Track Styles */
  .range-input::-webkit-slider-runnable-track {
    inline-size: 100%;
    block-size: var(--range-track-height);
    background-color: var(--range-track-color);
    border: 0;
    border-radius: var(--radius-full);
  }

  .range-input::-moz-range-track {
    inline-size: 100%;
    block-size: var(--range-track-height);
    background-color: var(--range-track-color);
    border: 0;
    border-radius: var(--radius-full);
  }

  /* Thumb Styles */
  .range-input::-webkit-slider-thumb {
    inline-size: var(--range-thumb-size);
    block-size: var(--range-thumb-size);
    margin-block-start: calc(
      (var(--range-track-height) - var(--range-thumb-size)) / 2
    );
    background-color: var(--range-fill-color);
    border: 2px solid var(--color-canvas);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    appearance: none;
    transition: box-shadow var(--duration-fast) var(--ease-out);
  }

  .range-input::-moz-range-thumb {
    inline-size: var(--range-thumb-size);
    block-size: var(--range-thumb-size);
    background-color: var(--range-fill-color);
    border: 2px solid var(--color-canvas);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    appearance: none;
    transition: box-shadow var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .range-input::-webkit-slider-thumb:hover {
      box-shadow: var(--shadow-md);
    }

    .range-input::-moz-range-thumb:hover {
      box-shadow: var(--shadow-md);
    }
  }

  /* Focus State */
  .range-input:focus-visible {
    outline: none;
  }

  .range-input:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .range-input:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  /* Disabled State */
  .range-input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  /* Labels */
  .range-labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--color-ink-light);
  }

  /* Size Variants */
  .range--sm {
    --range-track-height: 0.25rem;
    --range-thumb-size: 1rem;
  }

  .range--lg {
    --range-track-height: 0.5rem;
    --range-thumb-size: 1.5rem;
  }
}
/* Sidebar Component */
/* 37signals-compliant sidebar with CSS variable API */

@layer components {
  .sidebar-primary {
    --sidebar-width: 16rem;
    --sidebar-background: var(--color-canvas);
    --sidebar-border-color: oklch(from var(--color-border) l c h / 0.3);

    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    block-size: 100vh;
    inline-size: var(--sidebar-width);
    background-color: var(--sidebar-background);
    border-inline-end: 1px solid var(--sidebar-border-color);
    display: flex;
    flex-direction: column;
    z-index: var(--z-nav);
    transform: translateX(-100%);
    transition: transform 300ms ease-out;
    overflow-y: auto;

    @media (min-width: 1024px) {
      position: sticky;
      transform: translateX(0);
    }

    &.is-open {
      transform: translateX(0);
    }
  }

  .sidebar-primary__header {
    padding: var(--space-md);
    border-block-end: 1px solid oklch(from var(--color-border) l c h / 0.3);
  }

  .sidebar-primary__logo {
    display: flex;
    justify-content: center;

    img {
      block-size: 1.75rem;
      inline-size: auto;
    }
  }

  .sidebar-primary__profile {
    display: none;
  }

  .sidebar-primary__avatar {
    flex-shrink: 0;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-lg);
    background-color: var(--color-primary);
    color: var(--color-ink-inverted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--text-base);

    img {
      inline-size: 100%;
      block-size: 100%;
      border-radius: inherit;
      object-fit: cover;
    }
  }

  .sidebar-primary__profile-info {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
  }

  .sidebar-primary__profile-name {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-darkest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sidebar-primary__profile-email {
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Business Switcher Styles */
  .sidebar-primary__business-switcher {
    position: relative;
    margin-block: var(--space-md);
    margin-inline: 0;
  }

  .sidebar-primary__business-switcher-button {
    width: 100%;
    padding: var(--space-sm);
    background: var(--color-canvas-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    
    &:hover {
      background: var(--color-canvas-highlight);
      border-color: var(--color-border-strong);
    }
    
    &:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }
  }

  .sidebar-primary__business-switcher-content {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .sidebar-primary__business-switcher-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-ink-light);
    
    svg {
      width: 100%;
      height: 100%;
    }
  }

  .sidebar-primary__business-switcher-info {
    flex: 1;
    min-width: 0;
    text-align: left;
  }

  .sidebar-primary__business-switcher-label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink-darkest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
  }

  .sidebar-primary__business-switcher-sublabel {
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    margin: 0;
  }

  .sidebar-primary__business-switcher-arrow {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: var(--color-ink-light);
    transition: transform 0.2s ease;
    
    svg {
      width: 100%;
      height: 100%;
    }
  }

  [aria-expanded="true"] .sidebar-primary__business-switcher-arrow {
    transform: rotate(180deg);
  }

  .sidebar-primary__business-switcher-dropdown {
    position: absolute;
    top: calc(100% + var(--space-xs));
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 24rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .sidebar-primary__business-switcher-dropdown-inner {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-xs);
  }

  .sidebar-primary__business-switcher-item {
    display: block;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background-color 0.15s ease;
    
    &:hover {
      background-color: var(--color-canvas-subtle);
    }
    
    &:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: -2px;
    }
    
    &.is-active {
      background-color: var(--color-primary-subtle);
    }
  }

  .sidebar-primary__business-switcher-item-content {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .sidebar-primary__business-switcher-item-logo {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
    flex-shrink: 0;
  }

  .sidebar-primary__business-switcher-item-info {
    flex: 1;
    min-width: 0;
  }

  .sidebar-primary__business-switcher-item-name {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink-darkest);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sidebar-primary__business-switcher-item-meta {
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sidebar-primary__business-switcher-item-check {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: var(--color-primary);
    
    svg {
      width: 100%;
      height: 100%;
    }
  }

  .sidebar-primary__business-switcher-dropdown-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--space-xs);
  }

  .sidebar-primary__business-switcher-footer-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-ink);
    font-size: var(--text-sm);
    transition: background-color 0.15s ease;
    
    &:hover {
      background-color: var(--color-canvas-subtle);
    }
    
    &:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: -2px;
    }
    
    svg {
      width: 1rem;
      height: 1rem;
      color: var(--color-ink-light);
    }
  }

  /* Hide business switcher in collapsed state */
  .is-collapsed .sidebar-primary__business-switcher {
    display: none;
  }

  .sidebar-primary__nav {
    flex: 1;
    overflow-y: auto;
    padding-block: var(--space-xs);
    padding-inline: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
  }

  .sidebar-primary__nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-inline: var(--space-md);
  }

  .sidebar-primary__nav-section {
    margin-block-end: var(--space-xs);
  }

  .sidebar-primary__nav-section-title {
    padding-inline: var(--space-sm);
    padding-block: var(--space-3xs) var(--space-2xs);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .sidebar-primary__nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.375rem var(--space-sm);
    color: var(--color-ink-base);
    text-decoration: none;
    border-radius: var(--radius-base);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    transition: all 150ms var(--ease-out);
    position: relative;
  }

  .sidebar-primary__nav-item:hover {
    background: var(--color-canvas-subtle);
    color: var(--color-ink-darkest);
  }

  .sidebar-primary__nav-item.is-active {
    background: var(--color-primary);
    color: var(--color-ink-inverted);
    font-weight: var(--font-weight-semibold);
  }

  .sidebar-primary__nav-icon {
    flex-shrink: 0;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    color: var(--color-ink-light);
    position: relative;
    transition: color 150ms var(--ease-out);
  }

  .sidebar-primary__nav-item:hover .sidebar-primary__nav-icon {
    color: var(--color-ink-darkest);
  }

  .sidebar-primary__nav-item.is-active .sidebar-primary__nav-icon {
    color: var(--color-ink-inverted);
  }

  .sidebar-primary__nav-icon svg {
    inline-size: 100%;
    block-size: 100%;
  }

  .sidebar-primary__nav-icon-badge {
    position: absolute;
    inset-block-start: -0.5rem;
    inset-inline-end: -0.5rem;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    background-color: var(--color-danger);
    color: var(--color-ink-inverted);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sidebar-primary__nav-label {
    flex: 1;
  }

  .sidebar-primary__nav-badge {
    background-color: var(--color-danger);
    color: var(--color-ink-inverted);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-full);
    padding-inline: var(--space-xs);
    padding-block: 0.125rem;
    min-inline-size: 1.25rem;
    line-height: 1;
    text-align: center;
  }

  .sidebar-primary__nav-item.is-active .sidebar-primary__nav-badge {
    background-color: var(--color-ink-inverted);
    color: var(--color-primary);
  }

  .sidebar-primary__footer {
    padding: var(--space-sm);
    border-block-start: 1px solid oklch(from var(--color-border) l c h / 0.3);
  }

  .sidebar-primary__footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .sidebar-primary__footer-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.375rem var(--space-sm);
    color: var(--color-ink-base);
    text-decoration: none;
    border-radius: var(--radius-base);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    transition: all 150ms var(--ease-out);
    background: none;
    border: none;
    cursor: pointer;
    inline-size: 100%;
  }

  .sidebar-primary__footer-item:hover {
    background: var(--color-canvas-subtle);
    color: var(--color-ink-darkest);
  }

  /* Fix for button_to form in footer - ensure proper flex layout */
  .sidebar-primary__footer-list form {
    display: block;
    width: 100%;
  }
  
  .sidebar-primary__footer-list form button.sidebar-primary__footer-item {
    width: 100%;
    text-align: left;
  }

  .sidebar-primary__footer-item.logout {
    color: var(--color-danger);
    border: none;
    background: transparent;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
  }

  .sidebar-primary__footer-item.logout:hover {
    background: var(--color-danger-subtle);
    color: var(--color-danger-dark);
  }

  .sidebar-primary__footer-icon {
    flex-shrink: 0;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    color: var(--color-ink-light);
    transition: color 150ms var(--ease-out);
  }

  .sidebar-primary__footer-item:hover .sidebar-primary__footer-icon {
    color: var(--color-ink-darkest);
  }

  .sidebar-primary__footer-item.logout .sidebar-primary__footer-icon {
    color: var(--color-danger);
  }

  .sidebar-primary__footer-item.logout:hover .sidebar-primary__footer-icon {
    color: var(--color-danger-dark);
  }

  .sidebar-primary__footer-icon svg {
    inline-size: 100%;
    block-size: 100%;
  }

  .sidebar-primary__footer-label {
    flex: 1;
  }

  .sidebar-primary__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 29;
  }

  .sidebar-primary__backdrop.is-visible {
    display: block;
  }
}
/* Steps/Stepper Component */
/* Multi-step progress indicator for wizards/onboarding */

@layer components {
  .steps {
    /* CSS Variable API */
    --steps-marker-size: 2rem;
    --steps-line-color: var(--color-border);
    --steps-active-color: var(--color-primary);
    --steps-completed-color: var(--color-success);
    --steps-gap: var(--space-md);

    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .steps-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    flex: 1;
    text-align: center;
  }

  .steps-item:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--steps-marker-size) / 2);
    inset-inline-start: calc(50% + var(--steps-marker-size) / 2);
    inline-size: calc(100% - var(--steps-marker-size));
    block-size: 2px;
    background-color: var(--steps-line-color);
    z-index: -1;
  }

  .steps-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--steps-marker-size);
    block-size: var(--steps-marker-size);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-light);
    background-color: var(--color-canvas);
    border: 2px solid var(--steps-line-color);
    border-radius: var(--radius-full);
    transition: all var(--duration-fast) var(--ease-out);
  }

  .steps-label {
    font-size: var(--text-sm);
    color: var(--color-ink-light);
    transition: color var(--duration-fast) var(--ease-out);
  }

  /* Active State */
  .steps-item--active .steps-marker {
    color: var(--color-canvas);
    background-color: var(--steps-active-color);
    border-color: var(--steps-active-color);
  }

  .steps-item--active .steps-label {
    color: var(--color-ink-darkest);
    font-weight: var(--font-weight-medium);
  }

  /* Completed State */
  .steps-item--completed .steps-marker {
    color: var(--color-canvas);
    background-color: var(--steps-completed-color);
    border-color: var(--steps-completed-color);
  }

  .steps-item--completed .steps-marker::before {
    content: "✓";
  }

  .steps-item--completed .steps-label {
    color: var(--color-ink);
  }

  .steps-item--completed:not(:last-child)::after {
    background-color: var(--steps-completed-color);
  }

  /* Responsive: Vertical Layout */
  @media (max-width: 48rem) {
    .steps {
      flex-direction: column;
      align-items: flex-start;
    }

    .steps-item {
      flex-direction: row;
      align-items: center;
      inline-size: 100%;
      text-align: start;
      padding-block-end: var(--space-lg);
    }

    .steps-item:not(:last-child)::after {
      inset-block-start: calc(var(--steps-marker-size) + var(--space-xs));
      inset-inline-start: calc(var(--steps-marker-size) / 2);
      inline-size: 2px;
      block-size: calc(100% - var(--steps-marker-size));
    }

    .steps-item:last-child {
      padding-block-end: 0;
    }
  }

  /* Compact Variant */
  .steps--compact {
    --steps-marker-size: 1.5rem;
    --steps-gap: var(--space-sm);
  }

  .steps--compact .steps-label {
    font-size: var(--text-xs);
  }
}
/* Table Component */
/* Responsive tables with multiple variants */

@layer components {
  .table {
    --table-background: var(--color-canvas);
    --table-border-color: var(--color-border);
    --table-header-background: rgba(0, 0, 0, 0.02);
    --table-header-color: var(--color-ink-darkest);
    --table-cell-padding-y: 0.75rem;
    --table-cell-padding-x: 1rem;

    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background-color: var(--table-background);

    /* Table header */
    thead {
      background-color: var(--table-header-background);

      th {
        padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-semibold);
        text-align: left;
        color: var(--table-header-color);
        border-block-end: 1px solid var(--table-border-color);
      }
    }

    /* Table body */
    tbody {
      tr {
        border-block-end: 1px solid var(--table-border-color);
        transition: background-color var(--duration-fast) var(--ease-out);

        @media (any-hover: hover) {
          &:hover {
            background-color: var(--color-canvas-secondary);
          }
        }

        &:last-child {
          border-block-end: none;
        }
      }

      td {
        padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
        font-size: var(--text-sm);
        color: var(--color-ink);
      }
    }

    /* Table footer */
    tfoot {
      background-color: var(--table-header-background);
      border-block-start: 2px solid var(--table-border-color);

      td {
        padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        color: var(--table-header-color);
      }
    }

    /* Variants */
    &--bordered {
      border: 1px solid var(--table-border-color);
      border-radius: var(--radius-base);
      overflow: hidden;

      thead th,
      tbody td {
        border-inline-end: 1px solid var(--table-border-color);

        &:last-child {
          border-inline-end: none;
        }
      }
    }

    &--striped {
      tbody tr:nth-child(even) {
        background-color: var(--color-canvas-subtle);
      }
    }

    &--compact {
      --table-cell-padding-y: 0.5rem;
      --table-cell-padding-x: 0.75rem;
    }

    &--spacious {
      --table-cell-padding-y: 1rem;
      --table-cell-padding-x: 1.5rem;
    }
  }

  /* Responsive table wrapper */
  .table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);

    .table {
      border: none;
    }
  }

  /* Sortable table headers */
  .table-sortable {
    th {
      cursor: pointer;
      user-select: none;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        inline-end: 0.5rem;
        block-start: 50%;
        transform: translateY(-50%);
        opacity: 0.3;
        inline-size: 0.75rem;
        block-size: 0.75rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M5 12l5 5 5-5H5zm10-4L10 3 5 8h10z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
      }

      @media (any-hover: hover) {
        &:hover {
          background-color: var(--color-canvas-subtle);
        }
      }

      &[aria-sort="ascending"]::after {
        opacity: 1;
        transform: translateY(-50%) rotate(180deg);
      }

      &[aria-sort="descending"]::after {
        opacity: 1;
      }
    }
  }

  /* Clickable table rows */
  .table__row--clickable {
    cursor: pointer;

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-canvas-secondary);
      }
    }

    td {
      transition: background-color var(--duration-fast) var(--ease-out);
    }
  }

  /* Clickable table cell links */
  .table-cell-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);

    @media (any-hover: hover) {
      &:hover {
        color: var(--color-primary-dark);
        text-decoration: underline;
      }
    }
  }
}
/* Tabs Component */
/* Tabbed navigation interface */

@layer components {
  .tabs {
    --tabs-border-color: var(--color-border);
    --tabs-active-color: var(--color-primary);
  }

  .tabs__list {
    display: flex;
    gap: 0;
    border-block-end: 2px solid var(--tabs-border-color);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .tabs__item button,
  .tabs__item a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink-light);
    text-decoration: none;
    background: transparent;
    border: none;
    border-block-end: 2px solid transparent;
    margin-block-end: -2px;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out),
      border-color var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .tabs__item button:hover,
    .tabs__item a:hover {
      color: var(--color-ink);
    }
  }

  .tabs__item button[aria-selected="true"],
  .tabs__item a[aria-selected="true"],
  .tabs__item button[aria-current="page"],
  .tabs__item a[aria-current="page"] {
    color: var(--tabs-active-color);
    border-block-end-color: var(--tabs-active-color);
  }

  .tabs__panel {
    padding-block-start: var(--space-lg);
  }

  .tabs__panel[hidden] {
    display: none;
  }
}
/* Tasks Component */
/* Task list and task card display */

@layer components {
  /* Task List Container */
  .tasks-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  /* Task Card */
  .task-card {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .task-card:hover {
      border-color: var(--color-primary);
      box-shadow: 0 1px 3px oklch(from var(--lch-ink-darkest) l c h / 0.1);
    }
  }

  /* Task Priority Indicator */
  .task-card__priority {
    flex-shrink: 0;
    width: 0.25rem;
    border-radius: var(--radius-full);
    background: var(--color-border);
  }

  .task-card--priority-urgent .task-card__priority {
    background: var(--color-danger);
  }

  .task-card--priority-high .task-card__priority {
    background: var(--color-warning);
  }

  .task-card--priority-normal .task-card__priority {
    background: var(--color-primary);
  }

  .task-card--priority-low .task-card__priority {
    background: var(--color-ink-light);
  }

  /* Task Content */
  .task-card__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .task-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
  }

  .task-card__title {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink-darkest);
    text-decoration: none;
    display: block;
    line-height: 1.4;
    transition: color var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .task-card__title:hover {
      color: var(--color-primary);
    }
  }

  .task-card__badges {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    flex-shrink: 0;
  }

  .task-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    font-size: var(--text-xs);
    color: var(--color-ink-light);
  }

  .task-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .task-card__meta-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
  }

  .task-card__context {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    margin-block-start: var(--space-2xs);
  }

  /* Status Variants */
  .task-card--completed {
    opacity: 0.65;
    border-color: oklch(from var(--lch-border) l c h / 0.5);
  }

  .task-card--completed .task-card__title {
    text-decoration: line-through;
    color: var(--color-ink);
  }

  .task-card--overdue {
    border-color: var(--color-danger-light);
    background: oklch(from var(--lch-danger) l c h / 0.03);
  }

  .task-card--overdue .task-card__meta-item--due-date {
    color: var(--color-danger);
    font-weight: var(--font-weight-medium);
  }

  /* Responsive */
  @media (max-width: 640px) {
    .task-card {
      flex-direction: column;
      padding: var(--space-sm);
    }

    .task-card__priority {
      width: 100%;
      height: 0.25rem;
    }

    .task-card__header {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-sm);
    }

    .task-card__badges {
      width: 100%;
    }

    .task-card__meta {
      gap: var(--space-sm);
    }
  }
}
@layer components {
  /* ========================================
     Testimonials Section
     Customer testimonials with colored cards
     ======================================== */

  .testimonials-section {
    padding-block: var(--space-3xl);
    background: var(--color-canvas);
  }

  @media (min-width: 1024px) {
    .testimonials-section {
      padding-block: 5rem;
    }
  }

  .testimonials-section__container {
    inline-size: 100%;
    max-inline-size: 80rem;
    margin-inline: auto;
    padding-inline: var(--space-lg);
  }

  .testimonials-section__header {
    margin-block-end: 4rem;
  }

  .testimonials-section__title {
    font-size: clamp(1.875rem, 5vw, 2.25rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
    margin-block-end: var(--space-sm);
    line-height: 1.2;
  }

  .testimonials-section__subtitle {
    font-size: clamp(1.25rem, 3vw, 1.875rem);
    color: var(--color-ink-light);
    max-inline-size: 48rem;
    line-height: 1.5;
  }

  /* Grid */
  .testimonials-section__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  @media (min-width: 48rem) {
    .testimonials-section__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .testimonials-section__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* Card Base - Dark mode (app is permanently dark) */
  .testimonials-section__card {
    background: #2d3748;
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
  }

  .testimonials-section__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.15);
  }

  /* Quote */
  .testimonials-section__quote {
    flex: 1;
    position: relative;
  }

  .testimonials-section__quote-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--space-sm);
    opacity: 0.2;
    color: var(--color-ink);
  }

  .testimonials-section__text {
    font-size: 1rem;
    color: var(--color-ink-darkest);
    line-height: 1.6;
    margin: 0;
  }

  @media (min-width: 48rem) {
    .testimonials-section__text {
      font-size: 1.0625rem;
    }
  }

  /* Stat Badge - Dark mode (app is permanently dark) */
  .testimonials-section__stat {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: rgb(0 0 0 / 0.2);
    border-radius: var(--radius-lg);
    align-self: flex-start;
  }

  .testimonials-section__stat-value {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
  }

  .testimonials-section__stat-label {
    font-size: 0.875rem;
    color: var(--color-ink-light);
  }

  /* Author - Dark mode (app is permanently dark) */
  .testimonials-section__author {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-block-start: auto;
    padding-block-start: var(--space-md);
    border-block-start: 1px solid rgb(255 255 255 / 0.1);
  }

  .testimonials-section__avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    border: 2px solid var(--color-canvas);
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
  }

  .testimonials-section__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .testimonials-section__author-info {
    flex: 1;
    min-width: 0;
  }

  .testimonials-section__name {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-darkest);
    margin-bottom: 0.125rem;
  }

  .testimonials-section__role {
    font-size: 0.875rem;
    color: var(--color-ink);
  }
}
/* Timeline Component */
/* Chronological event display (activity feeds, history) */

@layer components {
  .timeline {
    /* CSS Variable API */
    --timeline-line-color: var(--color-border);
    --timeline-marker-size: 0.75rem;
    --timeline-spacing: var(--space-md);

    margin: 0;
    padding: 0;
    list-style: none;
  }

  .timeline-item {
    position: relative;
    padding-inline-start: var(--space-xl);
    padding-block-end: var(--timeline-spacing);
  }

  .timeline-item:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--timeline-marker-size) / 2);
    inset-block-start: calc(var(--timeline-marker-size) + var(--space-xs));
    inline-size: 2px;
    block-size: calc(100% - var(--timeline-marker-size));
    background-color: var(--timeline-line-color);
  }

  .timeline-marker {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: var(--space-2xs);
    inline-size: var(--timeline-marker-size);
    block-size: var(--timeline-marker-size);
    background-color: var(--color-canvas);
    border: 2px solid var(--timeline-line-color);
    border-radius: var(--radius-full);
  }

  .timeline-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .timeline-time {
    font-size: var(--text-xs);
    color: var(--color-ink-light);
  }

  .timeline-text {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-ink);
    line-height: var(--line-height-normal);
  }

  .timeline-title {
    margin: 0 0 var(--space-2xs) 0;
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-darkest);
  }

  /* Marker Color Variants */
  .timeline-marker--primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
  }

  .timeline-marker--success {
    background-color: var(--color-success);
    border-color: var(--color-success);
  }

  .timeline-marker--warning {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
  }

  .timeline-marker--danger {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
  }

  /* Compact Variant */
  .timeline--compact {
    --timeline-spacing: var(--space-sm);
  }

  .timeline--compact .timeline-item {
    padding-inline-start: var(--space-lg);
  }

  .timeline--compact .timeline-text {
    font-size: var(--text-xs);
  }

  /* Detailed Variant */
  .timeline--detailed .timeline-item {
    padding-block-end: var(--space-lg);
  }

  .timeline--detailed .timeline-content {
    gap: var(--space-sm);
  }
}
/* Toggle/Switch Component */
/* Binary on/off switch (visual alternative to checkbox) */

@layer components {
  .toggle {
    /* CSS Variable API */
    --toggle-width: 3rem;
    --toggle-height: 1.5rem;
    --toggle-knob-size: 1.25rem;
    --toggle-background: var(--color-canvas-secondary);
    --toggle-background-checked: var(--color-primary);
    --toggle-border-color: var(--color-border);
    --toggle-transition: var(--duration-fast) var(--ease-out);

    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    user-select: none;
  }

  .toggle-input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .toggle-switch {
    position: relative;
    display: inline-block;
    inline-size: var(--toggle-width);
    block-size: var(--toggle-height);
    background-color: var(--toggle-background);
    border: 1px solid var(--toggle-border-color);
    border-radius: var(--radius-full);
    transition: background-color var(--toggle-transition);
  }

  .toggle-switch::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0.125rem;
    inline-size: var(--toggle-knob-size);
    block-size: var(--toggle-knob-size);
    background-color: var(--color-canvas);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    transform: translateY(-50%);
    transition: transform var(--toggle-transition);
  }

  .toggle-input:checked + .toggle-switch {
    background-color: var(--toggle-background-checked);
    border-color: var(--toggle-background-checked);
  }

  .toggle-input:checked + .toggle-switch::before {
    transform: translateY(-50%)
      translateX(calc(var(--toggle-width) - var(--toggle-knob-size) - 0.25rem));
  }

  .toggle-input:focus-visible + .toggle-switch {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .toggle-input:disabled + .toggle-switch {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .toggle-input:disabled ~ .toggle-label {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .toggle-label {
    font-size: var(--text-sm);
    color: var(--color-ink);
  }

  /* Size Variants */
  .toggle--sm {
    --toggle-width: 2.5rem;
    --toggle-height: 1.25rem;
    --toggle-knob-size: 1rem;
  }

  .toggle--lg {
    --toggle-width: 3.5rem;
    --toggle-height: 1.75rem;
    --toggle-knob-size: 1.5rem;
  }

  /* Color Variants */
  .toggle--success .toggle-input:checked + .toggle-switch {
    --toggle-background-checked: var(--color-success);
  }

  .toggle--danger .toggle-input:checked + .toggle-switch {
    --toggle-background-checked: var(--color-danger);
  }
}
/* Tooltip Component */
/* Using popover API when available */

@layer components {
  .tooltip {
    --tooltip-background: var(--color-ink-darkest);
    --tooltip-color: var(--color-ink-inverted);
    --tooltip-max-width: 20rem;
    --tooltip-padding: var(--space-xs) var(--space-sm);

    position: absolute;
    z-index: var(--z-tooltip);
    max-inline-size: var(--tooltip-max-width);
    padding: var(--tooltip-padding);
    font-size: var(--text-sm);
    line-height: var(--line-height-normal);
    color: var(--tooltip-color);
    background-color: var(--tooltip-background);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-out);

    /* Arrow */
    &::after {
      content: "";
      position: absolute;
      inline-size: 0;
      block-size: 0;
      border: 4px solid transparent;
    }

    /* Show on hover */
    [data-tooltip]:hover &,
    &[data-state="open"] {
      opacity: 1;
    }

    /* Positions */
    &--top {
      inset-block-end: calc(100% + 0.5rem);
      inset-inline-start: 50%;
      transform: translateX(-50%);

      &::after {
        inset-block-start: 100%;
        inset-inline-start: 50%;
        transform: translateX(-50%);
        border-block-start-color: var(--tooltip-background);
      }
    }

    &--bottom {
      inset-block-start: calc(100% + 0.5rem);
      inset-inline-start: 50%;
      transform: translateX(-50%);

      &::after {
        inset-block-end: 100%;
        inset-inline-start: 50%;
        transform: translateX(-50%);
        border-block-end-color: var(--tooltip-background);
      }
    }

    &--left {
      inset-inline-end: calc(100% + 0.5rem);
      inset-block-start: 50%;
      transform: translateY(-50%);

      &::after {
        inset-inline-start: 100%;
        inset-block-start: 50%;
        transform: translateY(-50%);
        border-inline-start-color: var(--tooltip-background);
      }
    }

    &--right {
      inset-inline-start: calc(100% + 0.5rem);
      inset-block-start: 50%;
      transform: translateY(-50%);

      &::after {
        inset-inline-end: 100%;
        inset-block-start: 50%;
        transform: translateY(-50%);
        border-inline-end-color: var(--tooltip-background);
      }
    }
  }
}
/* Tree View Component */
/* Hierarchical navigation (file explorer style) */

@layer components {
  .tree {
    /* CSS Variable API */
    --tree-indent: var(--space-lg);
    --tree-item-height: 2rem;
    --tree-icon-size: 1.25rem;

    margin: 0;
    padding: 0;
    list-style: none;
  }

  .tree-item {
    margin: 0;
    padding: 0;
  }

  .tree-branch {
    /* Uses native <details> element */
  }

  .tree-label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-block-size: var(--tree-item-height);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-sm);
    color: var(--color-ink);
    cursor: pointer;
    border-radius: var(--radius-base);
    list-style: none;
    user-select: none;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  .tree-label::-webkit-details-marker {
    display: none;
  }

  .tree-label::marker {
    display: none;
  }

  @media (any-hover: hover) {
    .tree-label:hover {
      background-color: var(--color-canvas-subtle);
    }
  }

  .tree-label:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
  }

  /* Expand/Collapse Icon */
  .tree-label::before {
    content: '▶';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--tree-icon-size);
    block-size: var(--tree-icon-size);
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    transition: transform var(--duration-fast) var(--ease-out);
  }

  .tree-branch[open] > .tree-label::before {
    transform: rotate(90deg);
  }

  .tree-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--tree-icon-size);
    block-size: var(--tree-icon-size);
    font-size: var(--text-base);
  }

  .tree-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Children (nested items) */
  .tree-children {
    margin: 0;
    padding-inline-start: var(--tree-indent);
    list-style: none;
  }

  /* Leaf Node (no children, just a link/item) */
  .tree-item--leaf {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-block-size: var(--tree-item-height);
    padding: var(--space-xs) var(--space-sm);
    padding-inline-start: calc(var(--space-sm) + var(--tree-icon-size) + var(--space-xs));
    font-size: var(--text-sm);
    color: var(--color-ink);
    text-decoration: none;
    border-radius: var(--radius-base);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .tree-item--leaf:hover {
      background-color: var(--color-canvas-subtle);
    }
  }

  .tree-item--leaf:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
  }

  /* Selected State */
  .tree-item--selected,
  .tree-label--selected {
    background-color: oklch(var(--lch-primary-50));
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
  }

  /* Compact Variant */
  .tree--compact {
    --tree-item-height: 1.75rem;
    --tree-indent: var(--space-md);
  }

  .tree--compact .tree-label,
  .tree--compact .tree-item--leaf {
    font-size: var(--text-xs);
  }
}
/* Trust Section Component */
/* Social proof section showing trusted company logos */

@layer components {
  /* ========================================
     TRUST SECTION CONTAINER
     ======================================== */
  .trust-section {
    background: var(--color-canvas-subtle);
    border-block: 1px solid var(--color-border);
    padding-block: var(--space-2xl);
  }

  .trust-section__container {
    inline-size: 100%;
    max-inline-size: 80rem;
    margin-inline: auto;
    padding-inline: var(--space-lg);
  }

  @media (min-width: 768px) {
    .trust-section__container {
      padding-inline: var(--space-2xl);
    }
  }

  /* ========================================
     TRUST SECTION LABEL
     ======================================== */
  .trust-section__label {
    text-align: center;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-block-end: var(--space-xl);
  }

  /* ========================================
     TRUST SECTION LOGOS
     ======================================== */
  .trust-section__logos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    align-items: center;
  }

  @media (min-width: 640px) {
    .trust-section__logos {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .trust-section__logos {
      grid-template-columns: repeat(6, 1fr);
      gap: var(--space-xl);
    }
  }

  .trust-section__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 4rem;
    padding: var(--space-md);
    opacity: 0.6;
    transition: opacity 200ms var(--ease-out);
  }

  .trust-section__logo:hover {
    opacity: 1;
  }

  .trust-section__logo span {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink);
  }
}
/* Authentication Pages - 37signals compliant */
@layer components {
  .auth-page {
    display: grid;
    place-items: center;
    min-block-size: 100vh;
    background: var(--color-canvas);
    padding: var(--space-sm);
  }

  .auth-page__container {
    inline-size: 100%;
    max-inline-size: 24rem;
  }

  .auth-page__logo {
    display: flex;
    justify-content: center;
    margin-block-end: var(--space-md);
  }

  .auth-page__logo-image {
    block-size: 3rem;
    inline-size: auto;
    object-fit: contain;
  }

  .auth-card__logo {
    display: none;
  }

  .auth-card__logo-image {
    display: none;
  }

  .auth-page__footer {
    margin-block-start: var(--space-xl);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-ink-light);
  }

  .auth-card {
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    padding: var(--space-xl);
  }

  .auth-card__header {
    margin-block-end: var(--space-lg);
  }

  .auth-card__title {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-darkest);
    margin: 0;
    line-height: 1.2;
  }

  .auth-card__subtitle {
    margin-block-start: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--color-ink-dark);
    line-height: 1.5;
  }

  /* Auth form footer */
  .auth-form__footer {
    margin-block-start: var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
  }

  .auth-form__footer .link {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
  }
}
/* Blog/Posts Pages */
/* Styling for public blog listing, post detail, and category pages */

@layer components {
  /* ========================================
     BLOG PAGE HEADER
     ======================================== */
  .blog-header {
    text-align: center;
    padding-block-start: var(--space-lg);
    padding-block-end: var(--space-xl);
    max-inline-size: 48rem;
    margin-inline: auto;
  }

  .blog-header__breadcrumb {
    font-size: var(--text-sm);
    color: var(--color-ink-light);
    margin-block-end: var(--space-md);
  }

  .blog-header__breadcrumb a {
    color: var(--color-primary);
    text-decoration: none;
  }

  .blog-header__breadcrumb a:hover {
    text-decoration: underline;
  }

  .blog-header__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-ink-darkest);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-block-end: var(--space-md);
  }

  .blog-header__description {
    font-size: var(--text-lg);
    color: var(--color-ink-light);
    line-height: 1.6;
  }

  /* ========================================
     BLOG GRID
     ======================================== */
  .blog-grid {
    display: grid;
    gap: var(--space-xl);
    padding-block-end: var(--space-3xl);
  }

  @media (min-width: 640px) {
    .blog-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .blog-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* ========================================
     BLOG CARD
     ======================================== */
  .blog-card {
    display: flex;
    flex-direction: column;
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .blog-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
    }
  }

  .blog-card__image-link {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-canvas-secondary);
  }

  .blog-card__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--duration-base) var(--ease-out);
  }

  .blog-card:hover .blog-card__image {
    transform: scale(1.05);
  }

  .blog-card__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-lg);
    gap: var(--space-sm);
  }

  .blog-card__category {
    display: inline-block;
    align-self: flex-start;
    padding: var(--space-2xs) var(--space-sm);
    background: var(--color-primary);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-base);
    text-decoration: none;
  }

  .blog-card__category:hover {
    filter: brightness(1.1);
  }

  .blog-card__title {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
    line-height: 1.3;
  }

  .blog-card__title a {
    color: inherit;
    text-decoration: none;
  }

  .blog-card__title a:hover {
    color: var(--color-primary);
  }

  .blog-card__excerpt {
    font-size: var(--text-sm);
    color: var(--color-ink-light);
    line-height: 1.6;
    flex: 1;
  }

  .blog-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    padding-block-start: var(--space-sm);
    margin-block-start: auto;
  }

  .blog-card__author {
    font-weight: var(--font-weight-medium);
  }

  .blog-card__date {
    color: var(--color-ink-lighter);
  }

  /* ========================================
     BLOG PAGINATION
     ======================================== */
  .blog-pagination {
    display: flex;
    justify-content: center;
    padding-block: var(--space-xl);
  }

  /* ========================================
     BLOG EMPTY STATE
     ======================================== */
  .blog-empty {
    text-align: center;
    padding: var(--space-3xl) var(--space-lg);
    background: var(--color-canvas-secondary);
    border-radius: var(--radius-lg);
  }

  .blog-empty__title {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
    margin-block-end: var(--space-sm);
  }

  .blog-empty__message {
    font-size: var(--text-base);
    color: var(--color-ink-light);
    margin-block-end: var(--space-lg);
  }

  /* ========================================
     BLOG POST DETAIL
     ======================================== */
  .blog-post {
    padding-block-end: var(--space-3xl);
  }

  .blog-post__wrapper {
    max-inline-size: 48rem;
    margin-inline: auto;
  }

  /* Back Link */
  .blog-post__back {
    padding-block: var(--space-lg);
  }

  .blog-post__back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--text-sm);
    color: var(--color-ink-light);
    text-decoration: none;
    transition: color var(--duration-fast);
  }

  .blog-post__back-link:hover {
    color: var(--color-primary);
  }

  /* Header */
  .blog-post__header {
    margin-block-end: var(--space-xl);
  }

  .blog-post__category {
    display: inline-block;
    padding: var(--space-2xs) var(--space-sm);
    background: var(--color-primary);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-base);
    text-decoration: none;
    margin-block-end: var(--space-md);
  }

  .blog-post__category:hover {
    filter: brightness(1.1);
  }

  .blog-post__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-ink-darkest);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-block-end: var(--space-md);
  }

  .blog-post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-ink-light);
  }

  .blog-post__author strong {
    color: var(--color-ink-darkest);
  }

  .blog-post__date {
    color: var(--color-ink-lighter);
  }

  /* Featured Image */
  .blog-post__featured-image {
    margin: 0;
    margin-block-end: var(--space-xl);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .blog-post__image {
    inline-size: 100%;
    block-size: auto;
    display: block;
  }

  /* Content */
  .blog-post__content {
    margin-block-end: var(--space-3xl);
  }

  .blog-post__content.prose {
    font-size: var(--text-lg);
    color: var(--color-ink);
    line-height: 1.8;
  }

  .blog-post__content.prose h2 {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
    margin-block: var(--space-xl) var(--space-md);
  }

  .blog-post__content.prose h3 {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
    margin-block: var(--space-lg) var(--space-sm);
  }

  .blog-post__content.prose p {
    margin-block-end: var(--space-md);
  }

  .blog-post__content.prose ul,
  .blog-post__content.prose ol {
    margin-block-end: var(--space-md);
    padding-inline-start: var(--space-lg);
  }

  .blog-post__content.prose li {
    margin-block-end: var(--space-xs);
  }

  .blog-post__content.prose blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding-inline-start: var(--space-lg);
    margin-inline: 0;
    margin-block: var(--space-lg);
    font-style: italic;
    color: var(--color-ink-light);
  }

  .blog-post__content.prose a {
    color: var(--color-primary);
    text-decoration: underline;
  }

  .blog-post__content.prose a:hover {
    text-decoration: none;
  }

  .blog-post__content.prose img {
    max-inline-size: 100%;
    block-size: auto;
    border-radius: var(--radius-lg);
    margin-block: var(--space-lg);
  }

  .blog-post__content.prose pre {
    background: var(--color-canvas-secondary);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    margin-block: var(--space-lg);
    font-size: var(--text-sm);
  }

  .blog-post__content.prose code {
    background: var(--color-canvas-secondary);
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: var(--radius-base);
    font-size: 0.9em;
  }

  .blog-post__content.prose pre code {
    background: none;
    padding: 0;
  }

  /* Related Posts */
  .blog-post__related {
    padding-block-start: var(--space-2xl);
  }

  .blog-post__related-title {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
    margin-block-end: var(--space-lg);
  }

  .blog-post__related-grid {
    display: grid;
    gap: var(--space-lg);
  }

  @media (min-width: 640px) {
    .blog-post__related-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* Related posts use smaller cards */
  .blog-post__related-grid .blog-card {
    font-size: var(--text-sm);
  }

  .blog-post__related-grid .blog-card__title {
    font-size: var(--text-base);
  }

  .blog-post__related-grid .blog-card__content {
    padding: var(--space-md);
  }
}
/* Dashboard Page Styles */

/* Welcome Banner */
.dashboard-welcome {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(
    135deg,
    oklch(var(--lch-primary-600)) 0%,
    oklch(60% 0.25 300) 50%,
    oklch(65% 0.22 350) 100%
  );
  box-shadow: var(--shadow-lg);
  margin-block-end: var(--space-xl);
}

.dashboard-welcome__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.2;
}

.dashboard-welcome__content {
  position: relative;
  padding: var(--space-xl);
  max-inline-size: 48rem;
}

.dashboard-welcome__heading {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink-inverted);
  letter-spacing: -0.02em;
}

.dashboard-welcome__description {
  margin-block-start: var(--space-md);
  font-size: var(--text-lg);
  color: oklch(from var(--lch-primary-600) calc(l + 0.3) c h);
  max-inline-size: 42rem;
}

/* Quick Actions Grid */
.dashboard-actions {
  display: grid;
  gap: var(--space-lg);
  margin-block-end: var(--space-2xl);
}

@media (min-width: 640px) {
  .dashboard-actions {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .dashboard-actions {
    grid-template-columns: repeat(3, 1fr);
  }
}

.dashboard-action-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  background: var(--color-canvas);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: all 200ms var(--ease-out);
}

.dashboard-action-card:hover {
  box-shadow: var(--shadow-md);
  border-color: oklch(var(--lch-primary-300));
}

.dashboard-action-card--purple:hover {
  border-color: oklch(60% 0.25 300);
}

.dashboard-action-card--pink:hover {
  border-color: oklch(65% 0.22 350);
}

.dashboard-action-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-block-end: var(--space-md);
}

.dashboard-action-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--radius-base);
  transition: all 200ms var(--ease-out);
}

.dashboard-action-card__icon--blue {
  background: oklch(var(--lch-primary-100));
  color: var(--color-primary);
}

.dashboard-action-card:hover .dashboard-action-card__icon--blue {
  background: var(--color-primary);
  color: var(--color-ink-inverted);
}

.dashboard-action-card__icon--purple {
  background: oklch(95% 0.05 300);
  color: oklch(55% 0.25 300);
}

.dashboard-action-card:hover .dashboard-action-card__icon--purple {
  background: oklch(55% 0.25 300);
  color: var(--color-ink-inverted);
}

.dashboard-action-card__icon--pink {
  background: oklch(95% 0.05 350);
  color: oklch(60% 0.22 350);
}

.dashboard-action-card:hover .dashboard-action-card__icon--pink {
  background: oklch(60% 0.22 350);
  color: var(--color-ink-inverted);
}

.dashboard-action-card__icon svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.dashboard-action-card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-darkest);
}

.dashboard-action-card__description {
  font-size: var(--text-sm);
  color: var(--color-ink);
  margin-block-end: var(--space-md);
}

.dashboard-action-card__link {
  margin-block-start: auto;
  display: flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
}

.dashboard-action-card--purple .dashboard-action-card__link {
  color: oklch(55% 0.25 300);
}

.dashboard-action-card--pink .dashboard-action-card__link {
  color: oklch(60% 0.22 350);
}

.dashboard-action-card:hover .dashboard-action-card__link {
  color: var(--color-primary-hover);
}

.dashboard-action-card--purple:hover .dashboard-action-card__link {
  color: oklch(50% 0.25 300);
}

.dashboard-action-card--pink:hover .dashboard-action-card__link {
  color: oklch(55% 0.22 350);
}

.dashboard-action-card__arrow {
  margin-inline-start: var(--space-xs);
  transition: transform 200ms var(--ease-out);
}

.dashboard-action-card:hover .dashboard-action-card__arrow {
  transform: translateX(0.25rem);
}

/* Companies Section */
.dashboard-companies {
  background: var(--color-canvas);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.dashboard-companies__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  border-block-end: 1px solid var(--color-border);
}

.dashboard-companies__heading {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-darkest);
}

.dashboard-companies__view-all {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  text-decoration: none;
}

.dashboard-companies__view-all:hover {
  color: var(--color-primary-hover);
}

.dashboard-companies__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dashboard-company-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  border-block-end: 1px solid oklch(var(--lch-border));
  transition: background-color 200ms var(--ease-out);
}

.dashboard-company-item:last-child {
  border-block-end: none;
}

.dashboard-company-item:hover {
  background: var(--color-canvas-subtle);
}

.dashboard-company-item__content {
  display: flex;
  min-inline-size: 0;
  gap: var(--space-md);
}

.dashboard-company-item__avatar {
  inline-size: 3rem;
  block-size: 3rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-canvas-subtle);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
}

.dashboard-company-item__info {
  min-inline-size: 0;
  flex: 1;
}

.dashboard-company-item__name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-darkest);
  text-decoration: none;
}

.dashboard-company-item__name:hover {
  color: var(--color-primary);
}

.dashboard-company-item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-block-start: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-ink);
}

.dashboard-company-item__meta-dot {
  inline-size: 0.125rem;
  block-size: 0.125rem;
  fill: currentColor;
}

.dashboard-company-item__details {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.dashboard-company-item__status {
  display: none;
  flex-direction: column;
  align-items: flex-end;
}

@media (min-width: 640px) {
  .dashboard-company-item__status {
    display: flex;
  }
}

.dashboard-company-item__status-text {
  font-size: var(--text-sm);
  color: var(--color-ink-darkest);
}

.dashboard-company-item__status-time {
  margin-block-start: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-ink);
}

.dashboard-company-item__chevron {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex-shrink: 0;
  color: var(--color-ink-light);
}

/* Empty State */
.dashboard-empty {
  text-align: center;
  padding: var(--space-3xl) var(--space-md);
}

.dashboard-empty__icon {
  inline-size: 3rem;
  block-size: 3rem;
  margin-inline: auto;
  color: var(--color-ink-light);
}

.dashboard-empty__heading {
  margin-block-start: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-darkest);
}

.dashboard-empty__description {
  margin-block-start: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.dashboard-empty__actions {
  margin-block-start: var(--space-lg);
}

.dashboard-empty__button {
  display: inline-flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-inverted);
  background: var(--color-primary);
  border-radius: var(--radius-base);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background-color 200ms var(--ease-out);
}

.dashboard-empty__button:hover {
  background: var(--color-primary-hover);
}

.dashboard-empty__button svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-inline-end: var(--space-xs);
}

/* Responsive Adjustments */
@media (min-width: 640px) {
  .dashboard-welcome__content {
    padding: var(--space-2xl);
  }

  .dashboard-welcome__heading {
    font-size: var(--text-4xl);
  }
}
/* Error Pages Styles */
@layer components {
  .error-page {
    display: flex;
    min-block-size: 100vh;
  }

  @media (max-width: 767px) {
    .error-page {
      flex-direction: column;
    }
  }

  .error-page__content {
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl);
  }

  @media (min-width: 768px) {
    .error-page__content {
      inline-size: 50%;
    }
  }

  .error-page__container {
    max-inline-size: 24rem;
  }

  .error-page__code {
    font-size: var(--text-5xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
    line-height: 1;
  }

  @media (min-width: 768px) {
    .error-page__code {
      font-size: 9rem;
    }
  }

  .error-page__divider {
    inline-size: 4rem;
    block-size: 0.25rem;
    background-color: var(--color-primary);
    margin-block: var(--space-sm) var(--space-lg);
  }

  @media (min-width: 768px) {
    .error-page__divider {
      margin-block: var(--space-lg) var(--space-xl);
    }
  }

  .error-page__message {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-normal);
    color: var(--color-ink-dark);
    line-height: var(--line-height-normal);
    margin-block-end: var(--space-2xl);
  }

  @media (min-width: 768px) {
    .error-page__message {
      font-size: var(--text-3xl);
      font-weight: 300;
    }
  }

  .error-page__background {
    position: relative;
    inline-size: 100%;
    block-size: 20rem;
  }

  @media (min-width: 768px) {
    .error-page__background {
      inline-size: 50%;
      block-size: auto;
      min-block-size: 100vh;
    }
  }

  .error-page__background-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--color-canvas-secondary);
  }

  @media (min-width: 768px) {
    .error-page__background-image {
      background-position: left;
    }
  }

  @media (min-width: 1024px) {
    .error-page__background-image {
      background-position: center;
    }
  }
}
/* Events Pages */
/* Styling for public event listing, detail, and registration pages */

@layer components {
  /* ========================================
     EVENTS PAGE HEADER
     ======================================== */
  .events-header {
    text-align: center;
    padding-block-start: var(--space-lg);
    padding-block-end: var(--space-xl);
    max-inline-size: 48rem;
    margin-inline: auto;
  }

  .events-header__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-ink-darkest);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-block-end: var(--space-md);
  }

  .events-header__description {
    font-size: var(--text-lg);
    color: var(--color-ink-light);
    line-height: 1.6;
  }

  /* ========================================
     EVENTS GRID
     ======================================== */
  .events-grid {
    display: grid;
    gap: var(--space-lg);
    padding-block-end: var(--space-3xl);
  }

  @media (min-width: 640px) {
    .events-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .events-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* ========================================
     EVENT CARD
     ======================================== */
  .event-card {
    --event-accent: #dbeafe;
    --event-accent-dark: #2563eb;
    display: flex;
    flex-direction: column;
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
  }

  @media (any-hover: hover) {
    .event-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
    }
  }

  /* Color Variants */
  .event-card--blue {
    --event-accent: #dbeafe;
    --event-accent-dark: #2563eb;
  }

  .event-card--green {
    --event-accent: #dcfce7;
    --event-accent-dark: #16a34a;
  }

  .event-card--purple {
    --event-accent: #f3e8ff;
    --event-accent-dark: #9333ea;
  }

  .event-card--yellow {
    --event-accent: #fef9c3;
    --event-accent-dark: #ca8a04;
  }

  .event-card--red {
    --event-accent: #fee2e2;
    --event-accent-dark: #dc2626;
  }

  /* Dark mode color variants */
  html[data-theme="dark"] .event-card--blue {
    --event-accent: oklch(35% 0.08 260);
    --event-accent-dark: oklch(70% 0.2 260);
  }

  html[data-theme="dark"] .event-card--green {
    --event-accent: oklch(35% 0.08 142);
    --event-accent-dark: oklch(70% 0.2 142);
  }

  html[data-theme="dark"] .event-card--purple {
    --event-accent: oklch(35% 0.08 300);
    --event-accent-dark: oklch(70% 0.2 300);
  }

  html[data-theme="dark"] .event-card--yellow {
    --event-accent: oklch(35% 0.08 85);
    --event-accent-dark: oklch(70% 0.2 85);
  }

  html[data-theme="dark"] .event-card--red {
    --event-accent: oklch(35% 0.08 25);
    --event-accent-dark: oklch(70% 0.2 25);
  }

  .event-card__image {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--event-accent);
    overflow: hidden;
  }

  .event-card__image img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .event-card__badge {
    position: absolute;
    inset-block-start: var(--space-sm);
    inset-inline-start: var(--space-sm);
    padding: var(--space-2xs) var(--space-sm);
    background: var(--color-canvas);
    color: var(--event-accent-dark);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-sm);
  }

  .event-card__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-lg);
    gap: var(--space-sm);
  }

  .event-card__title {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
    line-height: 1.3;
  }

  .event-card__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    font-size: var(--text-sm);
    color: var(--color-ink-light);
  }

  .event-card__meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
  }

  .event-card__meta-icon {
    inline-size: 1rem;
    block-size: 1rem;
    flex-shrink: 0;
    color: var(--event-accent-dark);
  }

  .event-card__description {
    font-size: var(--text-sm);
    color: var(--color-ink-light);
    line-height: 1.5;
    flex: 1;
  }

  .event-card__cta {
    margin-block-start: auto;
    padding-block-start: var(--space-sm);
  }

  /* ========================================
     EVENT DETAIL HERO
     ======================================== */
  .event-hero {
    position: relative;
    background: var(--color-canvas-secondary);
  }

  .event-hero__image {
    inline-size: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
  }

  @media (max-width: 639px) {
    .event-hero__image {
      aspect-ratio: 16 / 9;
    }
  }

  .event-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 0.7) 0%, transparent 50%);
  }

  .event-hero__content {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: var(--space-xl);
    color: #fff;
  }

  @media (min-width: 640px) {
    .event-hero__content {
      padding: var(--space-2xl);
    }
  }

  .event-hero__badge {
    display: inline-block;
    padding: var(--space-2xs) var(--space-sm);
    background: var(--color-primary);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-base);
    margin-block-end: var(--space-sm);
  }

  .event-hero__title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: var(--font-weight-extrabold);
    line-height: 1.2;
    margin-block-end: var(--space-sm);
  }

  .event-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    font-size: var(--text-sm);
    opacity: 0.9;
  }

  .event-hero__meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
  }

  /* ========================================
     EVENT CONTENT
     ======================================== */
  .event-content {
    max-inline-size: 80rem;
    margin-inline: auto;
    padding-inline: var(--space-lg);
    padding-block: var(--space-2xl);
  }

  .event-content__grid {
    display: grid;
    gap: var(--space-2xl);
  }

  @media (min-width: 1024px) {
    .event-content__grid {
      grid-template-columns: 2fr 1fr;
      gap: var(--space-3xl);
    }
  }

  .event-content__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
  }

  .event-content__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  @media (min-width: 1024px) {
    .event-content__sidebar {
      position: sticky;
      inset-block-start: var(--space-lg);
      align-self: start;
    }
  }

  /* Event Info Card */
  .event-info-card {
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
  }

  .event-info-card__title {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-block-end: var(--space-md);
  }

  .event-info-card__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .event-info-card__item {
    display: flex;
    gap: var(--space-sm);
  }

  .event-info-card__icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    color: var(--color-primary);
    flex-shrink: 0;
  }

  .event-info-card__label {
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .event-info-card__value {
    font-size: var(--text-base);
    color: var(--color-ink-darkest);
    font-weight: var(--font-weight-medium);
  }

  /* Event Description */
  .event-description {
    font-size: var(--text-base);
    color: var(--color-ink);
    line-height: 1.7;
  }

  .event-description h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
    margin-block: var(--space-lg) var(--space-sm);
  }

  .event-description p {
    margin-block-end: var(--space-md);
  }

  /* ========================================
     EVENT SPEAKERS
     ======================================== */
  .event-speakers {
    padding-block: var(--space-xl);
  }

  .event-speakers__title {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
    margin-block-end: var(--space-lg);
  }

  .event-speakers__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .event-speaker {
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    background: var(--color-canvas-secondary);
    border-radius: var(--radius-lg);
  }

  .event-speaker__header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-block-end: var(--space-md);
  }

  .event-speaker__photo {
    inline-size: 5rem;
    block-size: 5rem;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
  }

  .event-speaker__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .event-speaker__name {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
  }

  .event-speaker__title {
    font-size: var(--text-sm);
    color: var(--color-ink-light);
  }

  .event-speaker__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--text-sm);
    color: var(--color-primary);
    text-decoration: none;
    margin-block-start: var(--space-2xs);
  }

  .event-speaker__link:hover {
    text-decoration: underline;
  }

  .event-speaker__bio {
    font-size: var(--text-sm);
    color: var(--color-ink);
    line-height: 1.6;
  }

  /* ========================================
     EVENT SCHEDULE
     ======================================== */
  .event-schedule {
    padding-block: var(--space-xl);
  }

  .event-schedule__title {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
    margin-block-end: var(--space-lg);
  }

  .event-schedule__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .event-session {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-canvas-secondary);
    border-radius: var(--radius-lg);
  }

  .event-session__time {
    flex-shrink: 0;
    min-inline-size: 5rem;
  }

  .event-session__time-value {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
  }

  .event-session__time-duration {
    font-size: var(--text-xs);
    color: var(--color-ink-light);
  }

  .event-session__content {
    flex: 1;
  }

  .event-session__title {
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
    margin-block-end: var(--space-2xs);
  }

  .event-session__description {
    font-size: var(--text-sm);
    color: var(--color-ink-light);
    line-height: 1.5;
    margin-block-end: var(--space-xs);
  }

  .event-session__speakers {
    font-size: var(--text-sm);
    color: var(--color-ink);
  }

  .event-session__location {
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    margin-block-start: var(--space-xs);
  }

  /* ========================================
     EVENT REGISTRATION
     ======================================== */
  .event-registration {
    max-inline-size: 32rem;
    margin-inline: auto;
    padding-block: var(--space-2xl);
  }

  .event-registration__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--text-sm);
    color: var(--color-ink-light);
    text-decoration: none;
    margin-block-end: var(--space-lg);
  }

  .event-registration__back:hover {
    color: var(--color-primary);
  }

  .event-registration__card {
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .event-registration__header {
    padding: var(--space-lg);
    border-block-end: 1px solid var(--color-border);
    background: var(--color-canvas-secondary);
  }

  .event-registration__title {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
    margin-block-end: var(--space-2xs);
  }

  .event-registration__date {
    font-size: var(--text-sm);
    color: var(--color-ink-light);
  }

  .event-registration__body {
    padding: var(--space-lg);
  }

  /* ========================================
     EVENT CONFIRMATION
     ======================================== */
  .event-confirmation {
    max-inline-size: 32rem;
    margin-inline: auto;
    padding-block: var(--space-3xl);
    text-align: center;
  }

  .event-confirmation__icon {
    inline-size: 4rem;
    block-size: 4rem;
    margin-inline: auto;
    margin-block-end: var(--space-lg);
    background: oklch(70% 0.2 142 / 0.15);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .event-confirmation__icon svg {
    inline-size: 2rem;
    block-size: 2rem;
    color: oklch(70% 0.2 142);
  }

  .event-confirmation__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
    margin-block-end: var(--space-sm);
  }

  .event-confirmation__message {
    font-size: var(--text-base);
    color: var(--color-ink-light);
    margin-block-end: var(--space-xl);
  }

  .event-confirmation__details {
    background: var(--color-canvas-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-block-end: var(--space-xl);
    text-align: start;
  }

  .event-confirmation__details-title {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-block-end: var(--space-sm);
  }

  .event-confirmation__details-content {
    font-size: var(--text-base);
    color: var(--color-ink-darkest);
    line-height: 1.6;
  }

  .event-confirmation__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
  }

  /* ========================================
     EVENTS EMPTY STATE
     ======================================== */
  .events-empty {
    text-align: center;
    padding: var(--space-3xl) var(--space-lg);
    background: var(--color-canvas-secondary);
    border-radius: var(--radius-lg);
  }

  .events-empty__title {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-darkest);
    margin-block-end: var(--space-sm);
  }

  .events-empty__message {
    font-size: var(--text-base);
    color: var(--color-ink-light);
  }
}
/* Public Pages (Landing/Marketing) */
/* Page-specific composition and layout overrides for public-facing pages */
/* Use components like .hero, .navbar-public, .btn, .card, etc. */

@layer components {
  /* Page compositions and overrides go here if needed */
  /* Currently empty - all styles are in reusable components */
}
/*
 * Default Trix editor styles. See Action Text overwrites below.
*/

trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none; }

trix-toolbar * {
  box-sizing: border-box; }

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto; }

trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px; }
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 1.5vw; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button-group:not(:first-child) {
        margin-left: 0; } }

trix-toolbar .trix-button-group-spacer {
  flex-grow: 1; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button-group-spacer {
      display: none; } }

trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent; }
  trix-toolbar .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-toolbar .trix-button.trix-active {
    background: #cbeefa;
    color: black; }
  trix-toolbar .trix-button:not(:disabled) {
    cursor: pointer; }
  trix-toolbar .trix-button:disabled {
    color: rgba(0, 0, 0, 0.125); }
  @media (max-width: 768px) {
    trix-toolbar .trix-button {
      letter-spacing: -0.01em;
      padding: 0 0.3em; } }

trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button--icon {
      height: 2em;
      max-width: calc(0.8em + 3.5vw); } }
  trix-toolbar .trix-button--icon::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button--icon::before {
        right: 6%;
        left: 6%; } }
  trix-toolbar .trix-button--icon.trix-active::before {
    opacity: 1; }
  trix-toolbar .trix-button--icon:disabled::before {
    opacity: 0.125; }

trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%; }

trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-dialogs {
  position: relative; }

trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5; }

trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
  trix-toolbar .trix-input--dialog.validate:invalid {
    box-shadow: #F00 0px 0px 1.5px 1px; }

trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none; }

trix-toolbar .trix-dialog--link {
  max-width: 600px; }

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline; }
  trix-toolbar .trix-dialog__link-fields .trix-input {
    flex: 1; }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 0 0 content;
    margin: 0; }

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none; }

trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
  background: none; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::-moz-selection {
  background: highlight; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::selection {
  background: highlight; }

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent; }

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight; }

trix-editor .attachment {
  position: relative; }
  trix-editor .attachment:hover {
    cursor: default; }

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text; }

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in; }
  trix-editor .attachment__progress[value="100"] {
    opacity: 0; }

trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center; }

trix-editor .trix-button-group {
  display: inline-flex; }

trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent; }
  trix-editor .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-editor .trix-button.trix-active {
    background: #cbeefa; }
  trix-editor .trix-button:not(:disabled) {
    cursor: pointer; }

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); }
  trix-editor .trix-button--remove::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%; }
  trix-editor .trix-button--remove:hover {
    border-color: #333; }
    trix-editor .trix-button--remove:hover::before {
      opacity: 1; }

trix-editor .attachment__metadata-container {
  position: relative; }

trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px; }
  trix-editor .attachment__metadata .attachment__name {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  trix-editor .attachment__metadata .attachment__size {
    margin-left: 0.2em;
    white-space: nowrap; }

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word; }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0; }
  .trix-content h1 {
    font-size: 1.2em;
    line-height: 1.2; }
  .trix-content blockquote {
    border: 0 solid #ccc;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em; }
  .trix-content [dir=rtl] blockquote,
  .trix-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em; }
  .trix-content li {
    margin-left: 1em; }
  .trix-content [dir=rtl] li {
    margin-right: 1em; }
  .trix-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto; }
  .trix-content img {
    max-width: 100%;
    height: auto; }
  .trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%; }
    .trix-content .attachment a {
      color: inherit;
      text-decoration: none; }
      .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
        color: inherit; }
  .trix-content .attachment__caption {
    text-align: center; }
    .trix-content .attachment__caption .attachment__name + .attachment__size::before {
      content: ' \2022 '; }
  .trix-content .attachment--preview {
    width: 100%;
    text-align: center; }
    .trix-content .attachment--preview .attachment__caption {
      color: #666;
      font-size: 0.9em;
      line-height: 1.2; }
  .trix-content .attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid #bbb;
    border-radius: 5px; }
  .trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative; }
    .trix-content .attachment-gallery .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%; }
    .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
      flex-basis: 50%;
      max-width: 50%; }

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}
/* Trix Editor Custom Styling - Gmail-like with Symbols */

/* Hide the default text in Trix buttons */
trix-toolbar .trix-button-group button.trix-button--icon span {
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  display: inline-block;
  width: auto;
}

/* Add custom symbols using ::before pseudo-elements */
trix-toolbar .trix-button--icon-bold::before {
  content: "B";
  font-weight: bold;
  font-size: 14px;
  display: inline-block;
  text-indent: 0;
}

trix-toolbar .trix-button--icon-italic::before {
  content: "I";
  font-style: italic;
  font-size: 14px;
  display: inline-block;
  text-indent: 0;
}

trix-toolbar .trix-button--icon-strike::before {
  content: "S";
  text-decoration: line-through;
  font-size: 14px;
  display: inline-block;
  text-indent: 0;
}

trix-toolbar .trix-button--icon-link::before {
  content: "🔗";
  font-size: 14px;
  display: inline-block;
  text-indent: 0;
}

trix-toolbar .trix-button--icon-heading-1::before {
  content: "H";
  font-weight: bold;
  font-size: 16px;
  display: inline-block;
  text-indent: 0;
}

trix-toolbar .trix-button--icon-quote::before {
  content: "❝";
  font-size: 14px;
  display: inline-block;
  text-indent: 0;
}

trix-toolbar .trix-button--icon-code::before {
  content: "</>";
  font-family: monospace;
  font-size: 12px;
  display: inline-block;
  text-indent: 0;
}

trix-toolbar .trix-button--icon-bullet-list::before,
trix-toolbar .trix-button--icon-bullets::before {
  content: "•";
  font-size: 18px;
  line-height: 14px;
  display: inline-block;
  text-indent: 0;
}

trix-toolbar .trix-button--icon-number-list::before,
trix-toolbar .trix-button--icon-numbers::before {
  content: "1.";
  font-size: 14px;
  display: inline-block;
  text-indent: 0;
}

trix-toolbar .trix-button--icon-decrease-nesting-level::before,
trix-toolbar .trix-button--icon-decrease-indentation-level::before {
  content: "⇤";
  font-size: 14px;
  display: inline-block;
  text-indent: 0;
}

trix-toolbar .trix-button--icon-increase-nesting-level::before,
trix-toolbar .trix-button--icon-increase-indentation-level::before {
  content: "⇥";
  font-size: 14px;
  display: inline-block;
  text-indent: 0;
}

trix-toolbar .trix-button--icon-undo::before {
  content: "↶";
  font-size: 14px;
  display: inline-block;
  text-indent: 0;
}

trix-toolbar .trix-button--icon-redo::before {
  content: "↷";
  font-size: 14px;
  display: inline-block;
  text-indent: 0;
}

trix-toolbar .trix-button--icon-attach::before {
  content: "📎";
  font-size: 14px;
  display: inline-block;
  text-indent: 0;
}

/* Gmail-style toolbar */
trix-toolbar {
  background: #f1f3f4;
  border: 1px solid #dadce0;
  border-radius: 8px 8px 0 0;
  padding: 8px;
}

trix-toolbar .trix-button-group {
  border: none;
  margin-right: 8px;
}

trix-toolbar .trix-button-group--text-tools {
  border: none;
}

trix-toolbar .trix-button-group--block-tools {
  border: none;
}

trix-toolbar .trix-button-group--file-tools {
  border: none;
}

trix-toolbar .trix-button-group--history-tools {
  border: none;
}

trix-toolbar .trix-button {
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  color: #5f6368;
  font-size: 14px;
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

trix-toolbar .trix-button:not(:disabled):hover {
  background: #e8eaed;
  color: #202124;
}

trix-toolbar .trix-button.trix-active {
  background: #e8f0fe;
  color: #1967d2;
}

/* Gmail-style editor */
trix-editor {
  background: white;
  border: 1px solid #dadce0;
  border-top: none;
  border-radius: 0 0 8px 8px;
  min-height: 200px;
  padding: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

trix-editor:focus {
  outline: none;
  border-color: #1967d2;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1);
}

/* Dialog styling */
.trix-dialog {
  background: white;
  border: 1px solid #dadce0;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Attachment styling */
.trix-editor .attachment {
  border: 1px solid #dadce0;
  border-radius: 4px;
  padding: 8px;
  margin: 8px 0;
}
/* Trix Editor SVG Icon Styles - Based on crewsbase working implementation */

/* Default Trix editor styles */
trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none;
}

trix-toolbar * {
  box-sizing: border-box;
}

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto;
}

trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px;
}

trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 1.5vw;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
}

trix-toolbar .trix-button-group-spacer {
  flex-grow: 1;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button-group-spacer {
    display: none;
  }
}

trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: #333;
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
  background: transparent;
}

trix-toolbar .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}

trix-toolbar .trix-button.trix-active {
  background: #007bff;
  color: white;
}

trix-toolbar .trix-button:not(:disabled) {
  cursor: pointer;
}

trix-toolbar .trix-button:disabled {
  color: #333;
  opacity: 0.3;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button {
    letter-spacing: -0.01em;
    padding: 0 0.3em;
  }
}

/* Icon button styles with SVG backgrounds */
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button--icon {
    height: 2em;
    max-width: calc(0.8em + 3.5vw);
  }
}

trix-toolbar .trix-button--icon::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.8;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: brightness(0) saturate(100%) invert(0.3);
}

@media (max-width: 768px) {
  trix-toolbar .trix-button--icon::before {
    right: 6%;
    left: 6%;
  }
}

trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(1);
}

trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.3;
}

/* SVG Icon definitions */
trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%;
}

trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}