/* @font-face — registers 'Chubb Publico App' (the Marina token font-family name)
   using font files already served from the project's public/adb2c/assets/chubb-fonts/ directory.
   CAMO-230: required so Marina CSS token --cds-typography-font-family-* resolves correctly
   instead of falling back to Georgia. */

@font-face {
  font-family: 'Chubb Publico App';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/adb2c/assets/chubb-fonts/publico-light.woff2') format('woff2'),
       url('/adb2c/assets/chubb-fonts/publico-light.woff') format('woff');
}

@font-face {
  font-family: 'Chubb Publico App';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/adb2c/assets/chubb-fonts/publico-roman.woff2') format('woff2'),
       url('/adb2c/assets/chubb-fonts/publico-roman.woff') format('woff');
}

@font-face {
  font-family: 'Chubb Publico App';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/adb2c/assets/chubb-fonts/publico-medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Chubb Publico App';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/adb2c/assets/chubb-fonts/publico-bold.woff2') format('woff2'),
       url('/adb2c/assets/chubb-fonts/publico-bold.woff') format('woff');
}
/* ── Marina Design System — CSS Custom Properties ──────────────────────────
   Consumer entry point for all Marina token values.
   version: 2.0.0
   Referenced by: new-marina-app, new-nx-marina-workspace, marina-doc skills.

   Structure (Option A — incremental SD pipeline):
     1. @import tokens-foundations.css  — auto-generated by Style Dictionary
     2. @import tokens-components.css   — auto-generated by Style Dictionary
     3. @import tokens-semantic.css     — auto-generated by Style Dictionary (theme, dark mode, accents)
     4. :root { ... }                   — hand-maintained overrides (spacing, grid, shadow,
                                          typography, utility gaps not yet in the SD pipeline)

   Regenerate auto-generated files: npm exec nx run marina:build-tokens

   NOTE: @font-face declarations are NOT included here — they are generated
   per-app because font asset paths differ by framework and build root.
   ─────────────────────────────────────────────────────────────────────────── */

/* Foundation tokens (auto-generated — color, shadow, spacing, radius, border, motion, grid, typography) */

/**
 * Marina Design System — Foundation Tokens (auto-generated)
 * DO NOT hand-edit. Edit JSON sources in libs/marina/src/tokens/foundations/
 */

:root {
  --cds-border-none: 0px;
  --cds-border-xs: 1px;
  --cds-border-sm: 2px;
  --cds-border-md: 3px;
  --cds-border-lg: 4px;
  --cds-border-xl: 6px;
  --cds-radius-none: 0px;
  --cds-radius-small: 4px;
  --cds-radius-base: 8px;
  --cds-radius-brand: 16px;
  --cds-radius-circle: 1000px;
  --cds-color-primary-blue: #000ECC;
  --cds-color-primary-purple: #6526D9;
  --cds-color-primary-teal: #4BCCE5;
  --cds-color-primary-green: #7FCD32;
  --cds-color-primary-yellow: #FFA300;
  --cds-color-primary-pink: #FC0386;
  --cds-color-supplementary-blue-200: #99A0FF;
  --cds-color-supplementary-blue-300: #6671FF;
  --cds-color-supplementary-blue-400: #3341FF;
  --cds-color-supplementary-blue-500: #000066;
  --cds-color-supplementary-purple-200: #C1A8F0;
  --cds-color-supplementary-purple-300: #A37DE8;
  --cds-color-supplementary-purple-400: #8452E0;
  --cds-color-supplementary-purple-500: #3D0066;
  --cds-color-supplementary-teal-200: #D2F3F9;
  --cds-color-supplementary-teal-300: #A6E6F2;
  --cds-color-supplementary-teal-400: #79DAEC;
  --cds-color-supplementary-teal-500: #005866;
  --cds-color-supplementary-green-200: #E5F5D6;
  --cds-color-supplementary-green-300: #CCEBAD;
  --cds-color-supplementary-green-400: #B2E184;
  --cds-color-supplementary-green-500: #1A5A0D;
  --cds-color-supplementary-yellow-200: #FFECCC;
  --cds-color-supplementary-yellow-300: #FFDA99;
  --cds-color-supplementary-yellow-400: #FFC766;
  --cds-color-supplementary-yellow-500: #632003;
  --cds-color-supplementary-pink-200: #FECDE7;
  --cds-color-supplementary-pink-300: #FE9ACE;
  --cds-color-supplementary-pink-400: #FD6886;
  --cds-color-supplementary-pink-500: #660036;
  --cds-color-neutral-200: #F2F2F2;
  --cds-color-neutral-300: #B3B3B3;
  --cds-color-neutral-400: #808080;
  --cds-color-neutral-500: #4D4D4D;
  --cds-color-neutral-800: #262626;
  --cds-color-neutral-white: #FFFFFF;
  --cds-color-neutral-black: #191919;
  --cds-color-branding-blue: #150F96;
  --cds-color-branding-purple: #6E27C5;
  --cds-color-branding-turquoise: #01C1D6;
  --cds-color-branding-magenta: #FF0198;
  --cds-color-branding-green: #7ACB00;
  --cds-color-branding-yellow: #FFB617;
  --cds-color-utility-success-light-bg: #C6F3C6;
  --cds-color-utility-success-saturated: #49C449;
  --cds-color-utility-success-shade: #0E580E;
  --cds-color-utility-error-light-bg: #F3AC99;
  --cds-color-utility-error-saturated: #FF8A8A;
  --cds-color-utility-error-shade: #AA010E;
  --cds-color-utility-caution-light-bg: #FECC93;
  --cds-color-utility-caution-shade: #FA6700;
  --cds-color-utility-wcag-focus-state: #386CF7;
  --cds-color-utility-wcag-inline-link: #1E1EEA;
  --cds-color-utility-wcag-inline-link-hover: #1414D2;
  --cds-color-utility-wcag-inline-link-hover-inverse: #8EBAF5;
  --cds-color-utility-wcag-inline-link-visited: #5C11CE;
  --cds-color-utility-wcag-inline-link-visited-inverse: #C59AF9;
  --cds-color-utility-wcag-inline-link-inverse: #76B0F3;
  --cds-color-utility-overlay-scrim-a80: #222222cc;
  --cds-color-gradient-yellow-100: #FFE7BB;
  --cds-color-gradient-yellow-200: #FFCB69;
  --cds-color-gradient-yellow-300: #FFB617;
  --cds-color-gradient-yellow-400: #946C14;
  --cds-color-gradient-yellow-500: #6C4E18;
  --cds-color-gradient-yellow-600: #543E15;
  --cds-color-gradient-yellow-700: #3B2B12;
  --cds-color-gradient-yellow-800: #2A200F;
  --cds-color-gradient-green-100: #DEF1C1;
  --cds-color-gradient-green-200: #B5E07C;
  --cds-color-gradient-green-300: #7ACB00;
  --cds-color-gradient-green-400: #51820D;
  --cds-color-gradient-green-500: #3C5D15;
  --cds-color-gradient-green-600: #314814;
  --cds-color-gradient-green-700: #243211;
  --cds-color-gradient-green-800: #1B240E;
  --cds-color-gradient-turquoise-100: #C2F3FB;
  --cds-color-gradient-turquoise-200: #79E2F2;
  --cds-color-gradient-turquoise-300: #01C1D6;
  --cds-color-gradient-turquoise-400: #00808F;
  --cds-color-gradient-turquoise-500: #005D67;
  --cds-color-gradient-turquoise-600: #0D4850;
  --cds-color-gradient-turquoise-700: #113237;
  --cds-color-gradient-turquoise-800: #112427;
  --cds-color-gradient-magenta-100: #FFE3EE;
  --cds-color-gradient-magenta-200: #FFA4D0;
  --cds-color-gradient-magenta-300: #FF0198;
  --cds-color-gradient-magenta-400: #E10082;
  --cds-color-gradient-magenta-500: #9C1D5F;
  --cds-color-gradient-magenta-600: #83004B;
  --cds-color-gradient-magenta-700: #511933;
  --cds-color-gradient-magenta-800: #391525;
  --cds-color-gradient-purple-100: #F1E7F9;
  --cds-color-gradient-purple-200: #E0CAF2;
  --cds-color-gradient-purple-300: #B98EE1;
  --cds-color-gradient-purple-400: #9056D2;
  --cds-color-gradient-purple-500: #6E27C5;
  --cds-color-gradient-purple-600: #572297;
  --cds-color-gradient-purple-700: #3C1C63;
  --cds-color-gradient-purple-800: #2D1645;
  --cds-color-gradient-blue-100: #E7E9EE;
  --cds-color-gradient-blue-200: #CED3DE;
  --cds-color-gradient-blue-300: #ADB7CD;
  --cds-color-gradient-blue-400: #556AAB;
  --cds-color-gradient-blue-500: #354EA2;
  --cds-color-gradient-blue-600: #21369D;
  --cds-color-gradient-blue-700: #150F96;
  --cds-color-gradient-blue-800: #11007B;
  --cds-breakpoint-xs: 375px; /** Portrait Phones */
  --cds-breakpoint-sm: 768px; /** Tablets */
  --cds-breakpoint-md: 1024px; /** Laptops */
  --cds-breakpoint-lg: 1440px; /** Large Devices */
  --cds-breakpoint-xl: 1920px; /** Extra Large Devices */
  --cds-grid-column-number-xs: 4; /** Portrait Phones */
  --cds-grid-column-number-sm: 8; /** Tablets */
  --cds-grid-column-number-md: 12; /** Laptops */
  --cds-grid-column-number-lg: 12; /** Large Devices */
  --cds-grid-column-number-xl: 12; /** Extra Large Devices */
  --cds-grid-min-width-xs: 71.75px; /** Portrait Phones */
  --cds-grid-min-width-sm: 67px; /** Tablets */
  --cds-grid-min-width-md: 53px; /** Laptops */
  --cds-grid-min-width-lg: 78px; /** Large Devices */
  --cds-grid-fixed-width-xl: 108px; /** Extra Large Devices */
  --cds-grid-margins-xs: 20px; /** Portrait Phones */
  --cds-grid-margins-sm: 60px; /** Tablets */
  --cds-grid-margins-md: 62px; /** Laptops */
  --cds-grid-margins-lg: 120px; /** Large Devices */
  --cds-grid-margins-xl: auto; /** Extra Large Devices */
  --cds-grid-gutter-xs: 16px; /** Portrait Phones */
  --cds-grid-gutter-sm: 16px; /** Tablets */
  --cds-grid-gutter-md: 24px; /** Laptops */
  --cds-grid-gutter-lg: 24px; /** Large Devices */
  --cds-grid-gutter-xl: 24px; /** Extra Large Devices */
  --cds-motion-duration-fast: 150ms;
  --cds-motion-duration-default: 200ms;
  --cds-motion-duration-slow: 300ms;
  --cds-motion-easing-default: ease;
  --cds-motion-easing-in: ease-in;
  --cds-motion-easing-out: ease-out;
  --cds-shadow-opacity-base: 0.30;
  --cds-shadow-opacity-ambient: 0.15;
  --cds-shadow-m1: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --cds-shadow-m2: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --cds-shadow-m3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
  --cds-shadow-m4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
  --cds-typography-font-family-desktop-headline-1-light: Chubb Publico;
  --cds-typography-font-family-desktop-headline-1-roman: Chubb Publico;
  --cds-typography-font-family-desktop-headline-1-medium: Chubb Publico;
  --cds-typography-font-family-desktop-headline-2-light: Chubb Publico;
  --cds-typography-font-family-desktop-headline-2-roman: Chubb Publico;
  --cds-typography-font-family-desktop-headline-2-medium: Chubb Publico;
  --cds-typography-font-family-desktop-headline-3-light: Chubb Publico;
  --cds-typography-font-family-desktop-headline-3-roman: Chubb Publico;
  --cds-typography-font-family-desktop-headline-3-medium: Chubb Publico;
  --cds-typography-font-family-desktop-headline-4-light: Chubb Publico;
  --cds-typography-font-family-desktop-headline-4-roman: Chubb Publico;
  --cds-typography-font-family-desktop-headline-4-medium: Chubb Publico;
  --cds-typography-font-family-desktop-headline-5-roman: Chubb Publico;
  --cds-typography-font-family-desktop-headline-5-medium: Chubb Publico;
  --cds-typography-font-family-desktop-headline-6-roman: Chubb Publico;
  --cds-typography-font-family-desktop-headline-6-medium: Chubb Publico;
  --cds-typography-font-family-mobile-headline-1-light: Chubb Publico;
  --cds-typography-font-family-mobile-headline-1-roman: Chubb Publico;
  --cds-typography-font-family-mobile-headline-1-medium: Chubb Publico;
  --cds-typography-font-family-mobile-headline-2-light: Chubb Publico;
  --cds-typography-font-family-mobile-headline-2-roman: Chubb Publico;
  --cds-typography-font-family-mobile-headline-2-medium: Chubb Publico;
  --cds-typography-font-family-mobile-headline-3-light: Chubb Publico;
  --cds-typography-font-family-mobile-headline-3-roman: Chubb Publico;
  --cds-typography-font-family-mobile-headline-3-medium: Chubb Publico;
  --cds-typography-font-family-mobile-headline-4-light: Chubb Publico;
  --cds-typography-font-family-mobile-headline-4-roman: Chubb Publico;
  --cds-typography-font-family-mobile-headline-4-medium: Chubb Publico;
  --cds-typography-font-family-mobile-headline-5-roman: Chubb Publico;
  --cds-typography-font-family-mobile-headline-5-medium: Chubb Publico;
  --cds-typography-font-family-mobile-headline-6-roman: Chubb Publico;
  --cds-typography-font-family-mobile-headline-6-medium: Chubb Publico;
  --cds-typography-font-family-body-regular-base: Lato;
  --cds-typography-font-family-body-regular-underlined: Lato;
  --cds-typography-font-family-body-bold-base: Lato;
  --cds-typography-font-family-body-bold-underlined: Lato;
  --cds-typography-font-family-body-sm-regular-underlined: Lato;
  --cds-typography-font-family-body-sm-regular-base: Lato;
  --cds-typography-font-family-body-sm-bold-underlined: Lato;
  --cds-typography-font-family-body-sm-bold-base: Lato;
  --cds-typography-font-family-eyebrow-regular: Lato;
  --cds-typography-font-family-eyebrow-bold: Lato;
  --cds-typography-font-size-desktop-headline-1-light: 3.875rem;
  --cds-typography-font-size-desktop-headline-1-roman: 3.875rem;
  --cds-typography-font-size-desktop-headline-1-medium: 3.875rem;
  --cds-typography-font-size-desktop-headline-2-light: 3.125rem;
  --cds-typography-font-size-desktop-headline-2-roman: 3.125rem;
  --cds-typography-font-size-desktop-headline-2-medium: 3.125rem;
  --cds-typography-font-size-desktop-headline-3-light: 2.5rem;
  --cds-typography-font-size-desktop-headline-3-roman: 2.5rem;
  --cds-typography-font-size-desktop-headline-3-medium: 2.5rem;
  --cds-typography-font-size-desktop-headline-4-light: 2.125rem;
  --cds-typography-font-size-desktop-headline-4-roman: 2.125rem;
  --cds-typography-font-size-desktop-headline-4-medium: 2.125rem;
  --cds-typography-font-size-desktop-headline-5-roman: 1.625rem;
  --cds-typography-font-size-desktop-headline-5-medium: 1.625rem;
  --cds-typography-font-size-desktop-headline-6-roman: 1.25rem;
  --cds-typography-font-size-desktop-headline-6-medium: 1.25rem;
  --cds-typography-font-size-mobile-headline-1-light: 3.125rem;
  --cds-typography-font-size-mobile-headline-1-roman: 3.125rem;
  --cds-typography-font-size-mobile-headline-1-medium: 3.125rem;
  --cds-typography-font-size-mobile-headline-2-light: 2.5rem;
  --cds-typography-font-size-mobile-headline-2-roman: 2.5rem;
  --cds-typography-font-size-mobile-headline-2-medium: 2.5rem;
  --cds-typography-font-size-mobile-headline-3-light: 2.125rem;
  --cds-typography-font-size-mobile-headline-3-roman: 2.125rem;
  --cds-typography-font-size-mobile-headline-3-medium: 2.125rem;
  --cds-typography-font-size-mobile-headline-4-light: 1.625rem;
  --cds-typography-font-size-mobile-headline-4-roman: 1.625rem;
  --cds-typography-font-size-mobile-headline-4-medium: 1.625rem;
  --cds-typography-font-size-mobile-headline-5-roman: 1.375rem;
  --cds-typography-font-size-mobile-headline-5-medium: 1.375rem;
  --cds-typography-font-size-mobile-headline-6-roman: 1.125rem;
  --cds-typography-font-size-mobile-headline-6-medium: 1.125rem;
  --cds-typography-font-size-body-regular-base: 1rem;
  --cds-typography-font-size-body-regular-underlined: 1rem;
  --cds-typography-font-size-body-bold-base: 1rem;
  --cds-typography-font-size-body-bold-underlined: 1rem;
  --cds-typography-font-size-body-sm-regular-underlined: 0.8125rem;
  --cds-typography-font-size-body-sm-regular-base: 0.8125rem;
  --cds-typography-font-size-body-sm-bold-underlined: 0.8125rem;
  --cds-typography-font-size-body-sm-bold-base: 0.8125rem;
  --cds-typography-font-size-eyebrow-regular: 1rem;
  --cds-typography-font-size-eyebrow-bold: 1rem;
  --cds-typography-font-weight-desktop-headline-1-light: 300;
  --cds-typography-font-weight-desktop-headline-1-roman: 400;
  --cds-typography-font-weight-desktop-headline-1-medium: 500;
  --cds-typography-font-weight-desktop-headline-2-light: 300;
  --cds-typography-font-weight-desktop-headline-2-roman: 400;
  --cds-typography-font-weight-desktop-headline-2-medium: 500;
  --cds-typography-font-weight-desktop-headline-3-light: 300;
  --cds-typography-font-weight-desktop-headline-3-roman: 400;
  --cds-typography-font-weight-desktop-headline-3-medium: 500;
  --cds-typography-font-weight-desktop-headline-4-light: 300;
  --cds-typography-font-weight-desktop-headline-4-roman: 400;
  --cds-typography-font-weight-desktop-headline-4-medium: 500;
  --cds-typography-font-weight-desktop-headline-5-roman: 400;
  --cds-typography-font-weight-desktop-headline-5-medium: 500;
  --cds-typography-font-weight-desktop-headline-6-roman: 400;
  --cds-typography-font-weight-desktop-headline-6-medium: 500;
  --cds-typography-font-weight-mobile-headline-1-light: 300;
  --cds-typography-font-weight-mobile-headline-1-roman: 400;
  --cds-typography-font-weight-mobile-headline-1-medium: 500;
  --cds-typography-font-weight-mobile-headline-2-light: 300;
  --cds-typography-font-weight-mobile-headline-2-roman: 400;
  --cds-typography-font-weight-mobile-headline-2-medium: 500;
  --cds-typography-font-weight-mobile-headline-3-light: 300;
  --cds-typography-font-weight-mobile-headline-3-roman: 400;
  --cds-typography-font-weight-mobile-headline-3-medium: 500;
  --cds-typography-font-weight-mobile-headline-4-light: 300;
  --cds-typography-font-weight-mobile-headline-4-roman: 400;
  --cds-typography-font-weight-mobile-headline-4-medium: 500;
  --cds-typography-font-weight-mobile-headline-5-roman: 400;
  --cds-typography-font-weight-mobile-headline-5-medium: 500;
  --cds-typography-font-weight-mobile-headline-6-roman: 400;
  --cds-typography-font-weight-mobile-headline-6-medium: 500;
  --cds-typography-font-weight-body-regular-base: 400;
  --cds-typography-font-weight-body-regular-underlined: 400;
  --cds-typography-font-weight-body-bold-base: 700;
  --cds-typography-font-weight-body-bold-underlined: 700;
  --cds-typography-font-weight-body-sm-regular-underlined: 400;
  --cds-typography-font-weight-body-sm-regular-base: 400;
  --cds-typography-font-weight-body-sm-bold-underlined: 700;
  --cds-typography-font-weight-body-sm-bold-base: 700;
  --cds-typography-font-weight-eyebrow-regular: 400;
  --cds-typography-font-weight-eyebrow-bold: 700;
  --cds-typography-line-height-desktop-headline-1-light: 4.5rem;
  --cds-typography-line-height-desktop-headline-1-roman: 4.5rem;
  --cds-typography-line-height-desktop-headline-1-medium: 4.5rem;
  --cds-typography-line-height-desktop-headline-2-light: 3.75rem;
  --cds-typography-line-height-desktop-headline-2-roman: 3.75rem;
  --cds-typography-line-height-desktop-headline-2-medium: 3.75rem;
  --cds-typography-line-height-desktop-headline-3-light: 2.875rem;
  --cds-typography-line-height-desktop-headline-3-roman: 2.875rem;
  --cds-typography-line-height-desktop-headline-3-medium: 2.875rem;
  --cds-typography-line-height-desktop-headline-4-light: 2.5rem;
  --cds-typography-line-height-desktop-headline-4-roman: 2.5rem;
  --cds-typography-line-height-desktop-headline-4-medium: 2.5rem;
  --cds-typography-line-height-desktop-headline-5-roman: 1.875rem;
  --cds-typography-line-height-desktop-headline-5-medium: 1.875rem;
  --cds-typography-line-height-desktop-headline-6-roman: 1.5rem;
  --cds-typography-line-height-desktop-headline-6-medium: 1.5rem;
  --cds-typography-line-height-mobile-headline-1-light: 3.75rem;
  --cds-typography-line-height-mobile-headline-1-roman: 3.75rem;
  --cds-typography-line-height-mobile-headline-1-medium: 3.75rem;
  --cds-typography-line-height-mobile-headline-2-light: 2.875rem;
  --cds-typography-line-height-mobile-headline-2-roman: 2.875rem;
  --cds-typography-line-height-mobile-headline-2-medium: 2.875rem;
  --cds-typography-line-height-mobile-headline-3-light: 2.5rem;
  --cds-typography-line-height-mobile-headline-3-roman: 2.875rem;
  --cds-typography-line-height-mobile-headline-3-medium: 2.875rem;
  --cds-typography-line-height-mobile-headline-4-light: 1.875rem;
  --cds-typography-line-height-mobile-headline-4-roman: 1.875rem;
  --cds-typography-line-height-mobile-headline-4-medium: 1.875rem;
  --cds-typography-line-height-mobile-headline-5-roman: 1.625rem;
  --cds-typography-line-height-mobile-headline-5-medium: 1.375rem;
  --cds-typography-line-height-mobile-headline-6-roman: 1.375rem;
  --cds-typography-line-height-mobile-headline-6-medium: 1.375rem;
  --cds-typography-line-height-body-regular-base: 1.375rem;
  --cds-typography-line-height-body-regular-underlined: 1.375rem;
  --cds-typography-line-height-body-bold-base: 1.375rem;
  --cds-typography-line-height-body-bold-underlined: 1.375rem;
  --cds-typography-line-height-body-sm-regular-underlined: 1.125rem;
  --cds-typography-line-height-body-sm-regular-base: 1.125rem;
  --cds-typography-line-height-body-sm-bold-underlined: 1.125rem;
  --cds-typography-line-height-body-sm-bold-base: 1.125rem;
  --cds-typography-line-height-eyebrow-regular: 1.375rem;
  --cds-typography-line-height-eyebrow-bold: 1.375rem;
  --spacing-zero: 0px;
  --spacing-one: 1px;
  --spacing-xs1: 0.125rem;
  --spacing-xs2: 0.25rem;
  --spacing-sm1: 0.5rem;
  --spacing-sm2: 0.75rem;
  --spacing-md1: 1rem;
  --spacing-md2: 1.25rem;
  --spacing-lg1: 1.5rem;
  --spacing-lg2: 2rem;
  --spacing-xl1: 2.5rem;
  --spacing-xl2: 3rem;
  --spacing-xxl1: 4rem;
  --spacing-xxl2: 6rem;
  --spacing-xxl3: 8rem;
}

/* Component design tokens (auto-generated — button, checkbox, input, etc. configuration) */

/**
 * Marina Design System — Component Tokens (auto-generated)
 * DO NOT hand-edit. Edit JSON sources in libs/marina/src/tokens/components/
 */

:root {
  --cds-component-button-border: none;
  --cds-component-button-cursor: pointer;
  --cds-component-button-display: inline-flex;
  --cds-component-button-align-items: center;
  --cds-component-button-primary-hover-text-decoration: underline;
  --cds-component-button-primary-active-text-decoration: underline;
  --cds-component-button-primary-disabled-text-decoration: none;
  --cds-component-button-primary-disabled-cursor: not-allowed;
  --cds-component-button-primary-disabled-pointer-events: none;
  --cds-component-button-secondary-background-color: transparent;
  --cds-component-button-secondary-box-sizing: border-box;
  --cds-component-button-secondary-hover-text-decoration: underline;
  --cds-component-button-secondary-active-text-decoration: underline;
  --cds-component-button-secondary-disabled-text-decoration: none;
  --cds-component-button-secondary-disabled-cursor: not-allowed;
  --cds-component-button-secondary-disabled-pointer-events: none;
  --cds-component-button-ghost-background-color: transparent;
  --cds-component-button-ghost-border: none;
  --cds-component-button-ghost-hover-text-decoration: underline;
  --cds-component-button-ghost-active-text-decoration: underline;
  --cds-component-button-ghost-disabled-text-decoration: none;
  --cds-component-button-ghost-disabled-pointer-events: none;
  --cds-component-button-ghost-disabled-border: none;
  --cds-component-button-ghost-disabled-cursor: not-allowed;
  --cds-component-button-success-hover-text-decoration: underline;
  --cds-component-button-success-active-text-decoration: underline;
  --cds-component-button-success-disabled-text-decoration: none;
  --cds-component-button-success-disabled-cursor: not-allowed;
  --cds-component-button-success-disabled-pointer-events: none;
  --cds-component-button-danger-hover-text-decoration: underline;
  --cds-component-button-danger-active-text-decoration: underline;
  --cds-component-button-danger-disabled-text-decoration: none;
  --cds-component-button-danger-disabled-cursor: not-allowed;
  --cds-component-button-danger-disabled-pointer-events: none;
  --cds-component-button-warning-hover-text-decoration: underline;
  --cds-component-button-warning-active-text-decoration: none;
  --cds-component-button-warning-disabled-text-decoration: none;
  --cds-component-button-warning-disabled-cursor: not-allowed;
  --cds-component-button-warning-disabled-pointer-events: none;
  --cds-component-button-info-background-color: transparent;
  --cds-component-button-info-border: none;
  --cds-component-button-info-hover-text-decoration: underline;
  --cds-component-button-info-active-text-decoration: underline;
  --cds-component-button-info-disabled-text-decoration: none;
  --cds-component-button-info-disabled-cursor: not-allowed;
  --cds-component-button-info-disabled-pointer-events: none;
  --cds-component-button-info-disabled-border: none;
  --cds-component-checkbox-label-cursor: pointer;
  --cds-component-checkbox-label-margin: 0;
  --cds-component-checkbox-label-display: flex;
  --cds-component-checkbox-label-justify-content: center;
  --cds-component-checkbox-label-align-items: center;
  --cds-component-checkbox-container-display: inline-block;
  --cds-component-checkbox-container-height: fit-content;
  --cds-component-checkbox-container-input-position: absolute;
  --cds-component-checkbox-container-input-cursor: pointer;
  --cds-component-checkbox-container-input-opacity: 0;
  --cds-component-checkbox-artboard-display: flex;
  --cds-component-checkbox-artboard-justify-content: center;
  --cds-component-checkbox-artboard-align-items: center;
  --cds-component-checkbox-artboard-position: relative;
  --cds-component-checkbox-artboard-focus-box-sizing: border-box;
  --cds-component-date-input-group-disabled-cursor: not-allowed;
  --cds-component-date-input-group-disabled-pointer-events: cursor;
  --cds-component-divider-border: none;
  --cds-component-header-base: none;
  --cds-component-icon-base: none;
  --cds-component-input-width: 100%;
  --cds-component-input-height: 46px;
  --cds-component-input-outline: none;
  --cds-component-input-border-radius: 0;
  --cds-component-input-border-base: none;
  --cds-component-input-label-display: flex;
  --cds-component-input-label-align-items: center;
  --cds-component-input-help-text-container-display: flex;
  --cds-component-input-help-text-container-flex-direction: column;
  --cds-component-input-container-position: relative;
  --cds-component-input-prefix-display: flex;
  --cds-component-input-prefix-align-items: center;
  --cds-component-input-suffix-display: flex;
  --cds-component-input-suffix-align-items: center;
  --cds-component-input-group-display: flex;
  --cds-component-input-group-align-items: center;
  --cds-component-input-group-disabled-cursor: default;
  --cds-component-input-group-disabled-pointer-events: none;
  --cds-component-list-base: none;
  --cds-component-loading-bar-base: none;
  --cds-component-logo-base: none;
  --cds-component-progress-bar-base: none;
  --cds-component-progress-tracker-vertical-base: none;
  --cds-component-radio-base: none;
  --cds-component-segment-control-base: none;
  --cds-component-select-choice-base: none;
  --cds-component-select-multiple-base: none;
  --cds-component-switch-base: none;
  --cds-component-tag-border-radius: 20px;
  --cds-component-tag-border-base: none;
  --cds-component-text-link-container-width: fit-content;
  --cds-component-text-link-container-display: flex;
  --cds-component-text-link-container-height: 22px;
  --cds-component-text-link-container-span-display: flex;
  --cds-component-text-link-container-span-justify-content: center;
  --cds-component-text-link-container-span-align-items: center;
  --cds-component-text-link-display: inline-flex;
  --cds-component-text-link-background-color: transparent;
  --cds-component-text-link-text-decoration: none;
  --cds-component-text-link-focus-outline: none;
  --cds-component-text-link-disabled-cursor: default;
  --cds-component-text-link-disabled-pointer-event: none;
  --cds-component-textarea-display: block;
  --cds-component-toggle-container-display: inline-block;
  --cds-component-toggle-input-height: 0;
  --cds-component-toggle-input-width: 0;
  --cds-component-toggle-input-opacity: 0;
  --cds-component-toggle-input-position: absolute;
  --cds-component-toggle-label-container-position: relative;
  --cds-component-toggle-label-container-display: flex;
  --cds-component-toggle-switch-container-display: block;
  --cds-component-toggle-switch-container-width: 48px;
  --cds-component-toggle-switch-container-height: 24px;
  --cds-component-toggle-switch-container-border-radius: 24px;
  --cds-component-toggle-switch-container-enabled-off-icon-visibility: hidden;
  --cds-component-toggle-switch-container-enabled-off-icon-opacity: 0;
  --cds-component-toggle-switch-container-enabled-on-icon-visibility: visible;
  --cds-component-toggle-switch-container-enabled-on-icon-opacity: 1;
  --cds-component-toggle-ellipse-disabled-hover-outline: none;
  --cds-component-toggle-ellipse-off-position: absolute;
  --cds-component-toggle-ellipse-off-width: 20px;
  --cds-component-toggle-ellipse-off-height: 20px;
  --cds-component-toggle-ellipse-off-border-radius: 24px;
  --cds-component-toggle-ellipse-on-translate-x: translateX(24px);
  --cds-component-toggle-text-align-items: center;
  --cds-component-toggle-text-display: flex;
  --cds-component-toggle-icon-on-visibility: hidden;
  --cds-component-toggle-icon-on-opacity: 0;
  --cds-component-toggle-icon-on-position: absolute;
  --cds-component-toggle-icon-off-position: absolute;
  --cds-component-tooltip-width: 300px;
  --cds-component-button-gap: var(--spacing-sm1);
  --cds-component-button-font-family: var(--cds-typography-font-family-body-bold-base);
  --cds-component-button-font-size: var(--cds-typography-font-size-body-bold-base);
  --cds-component-button-font-weight: var(--cds-typography-font-weight-body-bold-base);
  --cds-component-button-line-height: var(--cds-typography-line-height-body-bold-base);
  --cds-component-button-hover-font-family: var(--cds-typography-font-family-body-bold-underlined);
  --cds-component-button-hover-font-size: var(--cds-typography-font-size-body-bold-underlined);
  --cds-component-button-hover-font-weight: var(--cds-typography-font-weight-body-bold-underlined);
  --cds-component-button-hover-line-height: var(--cds-typography-line-height-body-bold-underlined);
  --cds-component-button-active-font-family: var(--cds-typography-font-family-body-bold-underlined);
  --cds-component-button-active-font-size: var(--cds-typography-font-size-body-bold-underlined);
  --cds-component-button-active-font-weight: var(--cds-typography-font-weight-body-bold-underlined);
  --cds-component-button-active-line-height: var(--cds-typography-line-height-body-bold-underlined);
  --cds-component-button-padding: var(--spacing-sm2) var(--spacing-xl1) var(--spacing-sm2) var(--spacing-xl1);
  --cds-component-button-primary-background-color: var(--cds-color-neutral-black);
  --cds-component-button-primary-hover-background-color: var(--cds-color-neutral-500);
  --cds-component-button-primary-focus-background-color: var(--cds-color-neutral-black);
  --cds-component-button-primary-focus-border: 2px solid var(--cds-color-utility-wcag-focus-state);
  --cds-component-button-primary-active-background-color: var(--cds-color-neutral-500);
  --cds-component-button-primary-active-border: 2px solid var(--cds-color-utility-wcag-focus-state);
  --cds-component-button-primary-disabled-background-color: var(--cds-color-neutral-200);
  --cds-component-button-primary-disabled-text-color: var(--cds-color-neutral-400);
  --cds-component-button-primary-text-color: var(--cds-color-neutral-white);
  --cds-component-button-secondary-border-color: var(--cds-color-neutral-black);
  --cds-component-button-secondary-hover-border-color: var(--cds-color-neutral-500);
  --cds-component-button-secondary-focus-border-color: var(--cds-color-utility-wcag-focus-state);
  --cds-component-button-secondary-active-border-color: var(--cds-color-utility-wcag-focus-state);
  --cds-component-button-secondary-disabled-background-color: var(--cds-color-neutral-200);
  --cds-component-button-secondary-disabled-text-color: var(--cds-color-neutral-400);
  --cds-component-button-secondary-disabled-border: 1px solid var(--cds-color-neutral-200);
  --cds-component-button-secondary-text-color: var(--cds-color-neutral-black);
  --cds-component-button-ghost-focus-border-color: var(--cds-color-utility-wcag-focus-state);
  --cds-component-button-ghost-active-border-color: var(--cds-color-utility-wcag-focus-state);
  --cds-component-button-ghost-disabled-background-color: var(--cds-color-neutral-200);
  --cds-component-button-ghost-disabled-text-color: var(--cds-color-neutral-400);
  --cds-component-button-ghost-text-color: var(--cds-color-neutral-black);
  --cds-component-button-success-background-color: var(--cds-color-utility-success-shade);
  --cds-component-button-success-hover-background-color: var(--cds-color-utility-success-saturated);
  --cds-component-button-success-focus-background-color: var(--cds-color-utility-success-shade);
  --cds-component-button-success-focus-border: 2px solid var(--cds-color-utility-wcag-focus-state);
  --cds-component-button-success-active-background-color: var(--cds-color-utility-success-saturated);
  --cds-component-button-success-active-border: 2px solid var(--cds-color-utility-wcag-focus-state);
  --cds-component-button-success-disabled-background-color: var(--cds-color-neutral-200);
  --cds-component-button-success-disabled-text-color: var(--cds-color-neutral-400);
  --cds-component-button-success-text-color: var(--cds-color-neutral-white);
  --cds-component-button-danger-background-color: var(--cds-color-utility-error-shade);
  --cds-component-button-danger-hover-background-color: var(--cds-color-utility-error-saturated);
  --cds-component-button-danger-focus-background-color: var(--cds-color-utility-error-shade);
  --cds-component-button-danger-focus-border: 2px solid var(--cds-color-utility-wcag-focus-state);
  --cds-component-button-danger-active-background-color: var(--cds-color-utility-error-saturated);
  --cds-component-button-danger-active-border: 2px solid var(--cds-color-utility-wcag-focus-state);
  --cds-component-button-danger-disabled-background-color: var(--cds-color-neutral-200);
  --cds-component-button-danger-disabled-text-color: var(--cds-color-neutral-400);
  --cds-component-button-danger-text-color: var(--cds-color-neutral-white);
  --cds-component-button-warning-background-color: var(--cds-color-utility-caution-shade);
  --cds-component-button-warning-hover-background-color: var(--cds-color-utility-caution-shade);
  --cds-component-button-warning-focus-background-color: var(--cds-color-utility-caution-shade);
  --cds-component-button-warning-focus-border: 2px solid var(--cds-color-utility-wcag-focus-state);
  --cds-component-button-warning-active-background-color: var(--cds-color-utility-caution-shade);
  --cds-component-button-warning-active-border: 2px solid var(--cds-color-utility-wcag-focus-state);
  --cds-component-button-warning-disabled-background-color: var(--cds-color-neutral-200);
  --cds-component-button-warning-disabled-text-color: var(--cds-color-neutral-400);
  --cds-component-button-warning-text-color: var(--cds-color-neutral-white);
  --cds-component-button-info-font-family: var(--cds-typography-font-family-body-regular-base);
  --cds-component-button-info-font-size: var(--cds-typography-font-size-body-regular-base);
  --cds-component-button-info-font-weight: var(--cds-typography-font-weight-body-regular-base);
  --cds-component-button-info-line-height: var(--cds-typography-line-height-body-regular-base);
  --cds-component-button-info-hover-font-family: var(--cds-typography-font-family-body-regular-underlined);
  --cds-component-button-info-hover-font-size: var(--cds-typography-font-size-body-regular-underlined);
  --cds-component-button-info-hover-font-weight: var(--cds-typography-font-weight-body-regular-underlined);
  --cds-component-button-info-hover-line-height: var(--cds-typography-line-height-body-regular-underlined);
  --cds-component-button-info-focus-border-color: var(--cds-color-utility-wcag-focus-state);
  --cds-component-button-info-active-border-color: var(--cds-color-utility-wcag-focus-state);
  --cds-component-button-info-active-font-family: var(--cds-typography-font-family-body-regular-underlined);
  --cds-component-button-info-active-font-size: var(--cds-typography-font-size-body-regular-underlined);
  --cds-component-button-info-active-font-weight: var(--cds-typography-font-weight-body-regular-underlined);
  --cds-component-button-info-active-line-height: var(--cds-typography-line-height-body-regular-underlined);
  --cds-component-button-info-disabled-text-color: var(--cds-color-neutral-400);
  --cds-component-button-info-text-color: var(--cds-color-utility-wcag-inline-link);
  --cds-component-checkbox-height: var(--spacing-md1);
  --cds-component-checkbox-width: var(--spacing-md1);
  --cds-component-checkbox-label-font-size: var(--cds-typography-font-size-body-regular-base);
  --cds-component-checkbox-label-font-family: var(--cds-typography-font-family-body-regular-base);
  --cds-component-checkbox-label-font-weight: var(--cds-typography-font-weight-body-regular-base);
  --cds-component-checkbox-label-line-height: var(--cds-typography-line-height-body-regular-base);
  --cds-component-checkbox-label-color: var(--cds-color-neutral-black);
  --cds-component-checkbox-label-gap: var(--spacing-xs2);
  --cds-component-checkbox-artboard-height: var(--spacing-lg1);
  --cds-component-checkbox-artboard-width: var(--spacing-lg1);
  --cds-component-checkbox-artboard-hover-background-color: var(--cds-color-neutral-300);
  --cds-component-checkbox-artboard-left: var(--spacing-zero);
  --cds-component-checkbox-artboard-border-radius: var(--spacing-xs2);
  --cds-component-checkbox-artboard-focus-border: 1px solid var(--cds-color-utility-wcag-focus-state);
  --cds-component-date-input-width: var(--cds-component-input-width);
  --cds-component-date-input-height: var(--cds-component-input-height);
  --cds-component-date-input-outline: var(--cds-component-input-outline);
  --cds-component-date-input-border-radius: var(--cds-component-input-border-radius);
  --cds-component-date-input-border-base: var(--cds-component-input-border-base);
  --cds-component-date-input-label-display: var(--cds-component-input-label-display);
  --cds-component-date-input-label-align-items: var(--cds-component-input-label-align-items);
  --cds-component-date-input-help-text-container-display: var(--cds-component-input-help-text-container-display);
  --cds-component-date-input-help-text-container-flex-direction: var(--cds-component-input-help-text-container-flex-direction);
  --cds-component-date-input-container-position: var(--cds-component-input-container-position);
  --cds-component-date-input-prefix-display: var(--cds-component-input-prefix-display);
  --cds-component-date-input-prefix-align-items: var(--cds-component-input-prefix-align-items);
  --cds-component-date-input-suffix-display: var(--cds-component-input-suffix-display);
  --cds-component-date-input-suffix-align-items: var(--cds-component-input-suffix-align-items);
  --cds-component-date-input-group-display: var(--cds-component-input-group-display);
  --cds-component-date-input-group-align-items: var(--cds-component-input-group-align-items);
  --cds-component-input-border-bottom: 1px solid var(--cds-color-neutral-400);
  --cds-component-input-padding: var(--spacing-zero);
  --cds-component-input-background-color: var(--cds-color-neutral-200);
  --cds-component-input-color: var(--cds-color-neutral-black);
  --cds-component-input-placeholder-color: var(--cds-color-neutral-500);
  --cds-component-input-hover-border-bottom: 2px solid var(--cds-color-neutral-500);
  --cds-component-input-focus-border: 2px solid var(--cds-color-utility-wcag-focus-state);
  --cds-component-input-active-state-border-bottom: 2px solid var(--cds-color-neutral-black);
  --cds-component-input-filled-state-border-bottom: 2px solid var(--cds-color-neutral-black);
  --cds-component-input-disabled-color: var(--cds-color-neutral-400);
  --cds-component-input-disabled-hover-border-bottom: 1px solid var(--cds-color-neutral-400);
  --cds-component-input-disabled-placeholder-color: var(--cds-color-neutral-400);
  --cds-component-input-disabled-filled-border-bottom: 1px solid var(--cds-color-neutral-400);
  --cds-component-input-error-state-color: var(--cds-color-utility-error-shade);
  --cds-component-input-error-state-border-bottom: 1px solid var(--cds-color-utility-error-shade);
  --cds-component-input-error-state-hover-border-bottom: 2px solid var(--cds-color-utility-error-shade);
  --cds-component-input-error-state-filled-border-bottom: 2px solid var(--cds-color-utility-error-shade);
  --cds-component-input-error-state-disabled-border-bottom: 1px solid var(--cds-color-neutral-400);
  --cds-component-input-text-font-size: var(--cds-typography-font-size-body-regular-base);
  --cds-component-input-text-font-family: var(--cds-typography-font-family-body-regular-base);
  --cds-component-input-text-font-weight: var(--cds-typography-font-weight-body-regular-base);
  --cds-component-input-text-line-height: var(--cds-typography-line-height-body-regular-base);
  --cds-component-input-text-indent: var(--spacing-sm2);
  --cds-component-input-label-font-size: var(--cds-typography-font-size-body-regular-base);
  --cds-component-input-label-font-family: var(--cds-typography-font-family-body-regular-base);
  --cds-component-input-label-font-weight: var(--cds-typography-font-weight-body-regular-base);
  --cds-component-input-label-line-height: var(--cds-typography-line-height-body-regular-base);
  --cds-component-input-label-color: var(--cds-color-neutral-black);
  --cds-component-input-label-margin-bottom: var(--spacing-xs2);
  --cds-component-input-label-gap: var(--spacing-xs2);
  --cds-component-input-help-text-font-size: var(--cds-typography-font-size-body-sm-regular-base);
  --cds-component-input-help-text-font-family: var(--cds-typography-font-family-body-sm-regular-base);
  --cds-component-input-help-text-font-weight: var(--cds-typography-font-weight-body-sm-regular-base);
  --cds-component-input-help-text-line-height: var(--cds-typography-line-height-body-sm-regular-base);
  --cds-component-input-help-text-container-margin-top: var(--spacing-xs2);
  --cds-component-input-help-text-container-gap: var(--spacing-xs2);
  --cds-component-input-help-text-color: var(--cds-color-neutral-500);
  --cds-component-loading-bar-help-text-container-margin-top: var(--spacing-sm1);
  --cds-component-select-choice-help-text-container-margin-top: var(--spacing-xs2);
  --cds-component-select-multiple-help-text-container-margin-top: var(--spacing-xs2);
  --cds-component-tag-padding: var(--spacing-xs2) var(--spacing-sm2);
  --cds-component-tag-background-success: var(--cds-color-utility-success-light-bg);
  --cds-component-tag-background-danger: var(--cds-color-utility-error-light-bg);
  --cds-component-tag-background-warning: var(--cds-color-utility-caution-light-bg);
  --cds-component-tag-background-info: var(--cds-color-neutral-200);
  --cds-component-tag-background-input: var(--cds-color-neutral-white);
  --cds-component-tag-text-color: var(--cds-color-neutral-black);
  --cds-component-tag-font-size: var(--cds-typography-font-size-body-sm-regular-base);
  --cds-component-tag-font-weight: var(--cds-typography-font-weight-body-sm-regular-base);
  --cds-component-tag-font-family: var(--cds-typography-font-family-body-sm-regular-base);
  --cds-component-tag-line-height: var(--cds-typography-line-height-body-sm-regular-base);
  --cds-component-tag-hover-border: 1px solid var(--cds-color-neutral-black);
  --cds-component-tag-focus-border: 1px solid var(--cds-color-utility-wcag-focus-state);
  --cds-component-tag-active-border: 1px solid var(--cds-color-neutral-black);
  --cds-component-tag-disabled-text-color: var(--cds-color-neutral-400);
  --cds-component-tag-disabled-icon-color: var(--cds-color-neutral-400);
  --cds-component-text-link-icon-color: var(--cds-color-utility-wcag-inline-link);
  --cds-component-text-link-container-span-gap: var(--spacing-sm1);
  --cds-component-text-link-font-family: var(--cds-typography-font-family-body-regular-base);
  --cds-component-text-link-font-size: var(--cds-typography-font-size-body-regular-base);
  --cds-component-text-link-font-weight: var(--cds-typography-font-weight-body-regular-base);
  --cds-component-text-link-line-height: var(--cds-typography-line-height-body-regular-base);
  --cds-component-text-link-color: var(--cds-color-utility-wcag-inline-link);
  --cds-component-text-link-hover-font-family: var(--cds-typography-font-family-body-regular-underlined);
  --cds-component-text-link-hover-font-size: var(--cds-typography-font-size-body-regular-underlined);
  --cds-component-text-link-hover-font-weight: var(--cds-typography-font-weight-body-regular-underlined);
  --cds-component-text-link-hover-line-height: var(--cds-typography-line-height-body-regular-underlined);
  --cds-component-text-link-hover-container-span-border-bottom: 1px solid var(--cds-color-utility-wcag-inline-link);
  --cds-component-text-link-active-font-family: var(--cds-typography-font-family-body-regular-underlined);
  --cds-component-text-link-active-font-size: var(--cds-typography-font-size-body-regular-underlined);
  --cds-component-text-link-active-font-weight: var(--cds-typography-font-weight-body-regular-underlined);
  --cds-component-text-link-active-line-height: var(--cds-typography-line-height-body-regular-underlined);
  --cds-component-text-link-active-color: var(--cds-color-utility-wcag-inline-link);
  --cds-component-text-link-active-container-border: 2px solid var(--cds-color-utility-wcag-focus-state);
  --cds-component-text-link-active-container-span-border-bottom: 1px solid var(--cds-color-utility-wcag-inline-link);
  --cds-component-text-link-focus-border: 2px solid var(--cds-color-utility-wcag-focus-state);
  --cds-component-text-link-disabled-color: var(--cds-color-neutral-400);
  --cds-component-text-link-disabled-icon-color: var(--cds-color-neutral-400);
  --cds-component-textarea-help-text-container-margin-top: var(--spacing-xs2);
  --cds-component-toggle-label-container-gap: var(--spacing-sm1);
  --cds-component-toggle-switch-container-background-color-off: var(--cds-color-neutral-400);
  --cds-component-toggle-switch-container-background-color-on: var(--cds-color-neutral-black);
  --cds-component-toggle-switch-container-focus-border: 2px solid var(--cds-color-utility-wcag-focus-state);
  --cds-component-toggle-switch-container-focus-off-icon-left: calc(var(--spacing-sm1) + var(--spacing-xs1));
  --cds-component-toggle-switch-container-focus-off-icon-top: calc(var(--spacing-sm1) + var(--spacing-xs1));
  --cds-component-toggle-switch-container-focus-on-icon-left: calc(var(--spacing-lg2) + var(--spacing-one));
  --cds-component-toggle-switch-container-focus-on-icon-top: calc(var(--spacing-sm1) + var(--spacing-one));
  --cds-component-toggle-switch-container-disabled-background-color: var(--cds-color-neutral-200);
  --cds-component-toggle-ellipse-focus-left: var(--spacing-xs2);
  --cds-component-toggle-ellipse-focus-top: var(--spacing-xs2);
  --cds-component-toggle-ellipse-hover-outline-color: var(--cds-color-neutral-200);
  --cds-component-toggle-ellipse-disabled-background-color: var(--cds-color-neutral-200);
  --cds-component-toggle-ellipse-off-left: var(--spacing-xs1);
  --cds-component-toggle-ellipse-off-top: var(--spacing-xs1);
  --cds-component-toggle-text-disabled-color: var(--cds-color-neutral-400);
  --cds-component-toggle-text-color: var(--cds-color-neutral-black);
  --cds-component-toggle-text-font-family: var(--cds-typography-font-family-body-regular-base);
  --cds-component-toggle-text-font-weight: var(--cds-typography-font-weight-body-regular-base);
  --cds-component-toggle-text-font-size: var(--cds-typography-font-size-body-regular-base);
  --cds-component-toggle-text-line-height: var(--cds-typography-line-height-body-regular-base);
  --cds-component-toggle-icon-on-left: calc(var(--spacing-lg2) - var(--spacing-one));
  --cds-component-toggle-icon-on-top: calc(var(--spacing-sm1) - var(--spacing-one));
  --cds-component-toggle-icon-on-color: var(--cds-color-neutral-400);
  --cds-component-toggle-icon-off-left: var(--spacing-sm1);
  --cds-component-toggle-icon-off-top: var(--spacing-sm1);
  --cds-component-toggle-icon-off-color: var(--cds-color-neutral-400);
  --cds-component-tooltip-stroke-border-default: 1px solid var(--cds-color-neutral-black);
  --cds-component-tooltip-stroke-border-blue: 1px solid var(--cds-color-primary-blue);
  --cds-component-tooltip-stroke-border-purple: 1px solid var(--cds-color-primary-purple);
  --cds-component-tooltip-stroke-border-magenta: 1px solid var(--cds-color-primary-pink);
  --cds-component-tooltip-stroke-border-turquoise: 1px solid var(--cds-color-primary-teal);
  --cds-component-tooltip-stroke-border-green: 1px solid var(--cds-color-primary-green);
  --cds-component-tooltip-stroke-border-yellow: 1px solid var(--cds-color-primary-yellow);
  --cds-component-tooltip-stroke-background-color-default: var(--cds-color-neutral-white);
  --cds-component-tooltip-stroke-background-color-blue: var(--cds-color-neutral-white);
  --cds-component-tooltip-stroke-background-color-purple: var(--cds-color-neutral-white);
  --cds-component-tooltip-stroke-background-color-magenta: var(--cds-color-neutral-white);
  --cds-component-tooltip-stroke-background-color-turquoise: var(--cds-color-neutral-white);
  --cds-component-tooltip-stroke-background-color-green: var(--cds-color-neutral-white);
  --cds-component-tooltip-stroke-background-color-yellow: var(--cds-color-neutral-white);
  --cds-component-tooltip-stroke-text-color-default: var(--cds-color-neutral-black);
  --cds-component-tooltip-stroke-text-color-blue: var(--cds-color-neutral-black);
  --cds-component-tooltip-stroke-text-color-purple: var(--cds-color-neutral-black);
  --cds-component-tooltip-stroke-text-color-magenta: var(--cds-color-neutral-black);
  --cds-component-tooltip-stroke-text-color-turquoise: var(--cds-color-neutral-black);
  --cds-component-tooltip-stroke-text-color-green: var(--cds-color-neutral-black);
  --cds-component-tooltip-stroke-text-color-yellow: var(--cds-color-neutral-black);
  --cds-component-tooltip-fill-background-color-default: var(--cds-color-neutral-black);
  --cds-component-tooltip-fill-background-color-blue: var(--cds-color-primary-blue);
  --cds-component-tooltip-fill-background-color-purple: var(--cds-color-primary-purple);
  --cds-component-tooltip-fill-background-color-magenta: var(--cds-color-primary-pink);
  --cds-component-tooltip-fill-background-color-turquoise: var(--cds-color-primary-teal);
  --cds-component-tooltip-fill-background-color-green: var(--cds-color-primary-green);
  --cds-component-tooltip-fill-background-color-yellow: var(--cds-color-primary-yellow);
  --cds-component-tooltip-fill-text-color-default: var(--cds-color-neutral-white);
  --cds-component-tooltip-fill-text-color-blue: var(--cds-color-neutral-white);
  --cds-component-tooltip-fill-text-color-purple: var(--cds-color-neutral-white);
  --cds-component-tooltip-fill-text-color-magenta: var(--cds-color-neutral-black);
  --cds-component-tooltip-fill-text-color-turquoise: var(--cds-color-neutral-black);
  --cds-component-tooltip-fill-text-color-green: var(--cds-color-neutral-black);
  --cds-component-tooltip-fill-text-color-yellow: var(--cds-color-neutral-black);
  --cds-component-tooltip-fill-border-default: 1px solid var(--cds-color-neutral-black);
  --cds-component-tooltip-fill-border-blue: 1px solid var(--cds-color-neutral-black);
  --cds-component-tooltip-fill-border-purple: 1px solid var(--cds-color-neutral-black);
  --cds-component-tooltip-fill-border-magenta: 1px solid var(--cds-color-neutral-black);
  --cds-component-tooltip-fill-border-turquoise: 1px solid var(--cds-color-neutral-black);
  --cds-component-tooltip-fill-border-green: 1px solid var(--cds-color-neutral-black);
  --cds-component-tooltip-fill-border-yellow: 1px solid var(--cds-color-neutral-black);
  --cds-component-tooltip-padding-left: var(--spacing-sm2);
  --cds-component-tooltip-padding-right: var(--spacing-sm2);
  --cds-component-tooltip-padding-top: var(--spacing-sm2);
  --cds-component-tooltip-padding-bottom: var(--spacing-sm2);
  --cds-component-tooltip-shadow: var(--cds-shadow-m2);
  --cds-component-tooltip-font-family: var(--cds-typography-font-family-body-regular-base);
  --cds-component-tooltip-font-weight: var(--cds-typography-font-weight-body-regular-base);
  --cds-component-tooltip-font-size: var(--cds-typography-font-size-body-regular-base);
  --cds-component-tooltip-line-height: var(--cds-typography-line-height-body-regular-base);
  --cds-component-date-input-border-bottom: var(--cds-component-input-border-bottom);
  --cds-component-date-input-padding: var(--cds-component-input-padding);
  --cds-component-date-input-background-color: var(--cds-component-input-background-color);
  --cds-component-date-input-color: var(--cds-component-input-color);
  --cds-component-date-input-placeholder-color: var(--cds-component-input-placeholder-color);
  --cds-component-date-input-hover-border-bottom: var(--cds-component-input-hover-border-bottom);
  --cds-component-date-input-focus-border: var(--cds-component-input-focus-border);
  --cds-component-date-input-active-state-border-bottom: var(--cds-component-input-active-state-border-bottom);
  --cds-component-date-input-filled-state-border-bottom: var(--cds-component-input-filled-state-border-bottom);
  --cds-component-date-input-disabled-color: var(--cds-component-input-disabled-color);
  --cds-component-date-input-disabled-hover-border-bottom: var(--cds-component-input-disabled-hover-border-bottom);
  --cds-component-date-input-disabled-placeholder-color: var(--cds-component-input-disabled-placeholder-color);
  --cds-component-date-input-disabled-filled-border-bottom: var(--cds-component-input-disabled-filled-border-bottom);
  --cds-component-date-input-error-state-color: var(--cds-component-input-error-state-color);
  --cds-component-date-input-error-state-border-bottom: var(--cds-component-input-error-state-border-bottom);
  --cds-component-date-input-error-state-hover-border-bottom: var(--cds-component-input-error-state-hover-border-bottom);
  --cds-component-date-input-error-state-filled-border-bottom: var(--cds-component-input-error-state-filled-border-bottom);
  --cds-component-date-input-error-state-disabled-border-bottom: var(--cds-component-input-error-state-disabled-border-bottom);
  --cds-component-date-input-text-font-size: var(--cds-component-input-text-font-size);
  --cds-component-date-input-text-font-family: var(--cds-component-input-text-font-family);
  --cds-component-date-input-text-font-weight: var(--cds-component-input-text-font-weight);
  --cds-component-date-input-text-line-height: var(--cds-component-input-text-line-height);
  --cds-component-date-input-text-indent: var(--cds-component-input-text-indent);
  --cds-component-date-input-label-font-size: var(--cds-component-input-label-font-size);
  --cds-component-date-input-label-font-family: var(--cds-component-input-label-font-family);
  --cds-component-date-input-label-font-weight: var(--cds-component-input-label-font-weight);
  --cds-component-date-input-label-line-height: var(--cds-component-input-label-line-height);
  --cds-component-date-input-label-color: var(--cds-component-input-label-color);
  --cds-component-date-input-label-margin-bottom: var(--cds-component-input-label-margin-bottom);
  --cds-component-date-input-label-gap: var(--cds-component-input-label-gap);
  --cds-component-date-input-help-text-font-size: var(--cds-component-input-help-text-font-size);
  --cds-component-date-input-help-text-font-family: var(--cds-component-input-help-text-font-family);
  --cds-component-date-input-help-text-font-weight: var(--cds-component-input-help-text-font-weight);
  --cds-component-date-input-help-text-line-height: var(--cds-component-input-help-text-line-height);
  --cds-component-date-input-help-text-container-margin-top: var(--cds-component-input-help-text-container-margin-top);
  --cds-component-date-input-help-text-container-gap: var(--cds-component-input-help-text-container-gap);
  --cds-component-date-input-help-text-color: var(--cds-component-input-help-text-color);
}

/* Semantic theme tokens (auto-generated — light/dark mode, brand accent overrides) */

/**
 * Marina Design System — Semantic Theme Tokens (auto-generated)
 * DO NOT hand-edit. Edit JSON sources in libs/marina/src/tokens/semantic/
 *
 * Set data-mode="light|dark" on <html> or <body>.
 * Set data-accent="blue|purple|teal|green|yellow|pink|white" for brand accent.
 * Components reference --cds-theme-* — never primitive tokens directly.
 */

:root,
[data-mode="light"] {
  --cds-theme-bg: var(--cds-color-neutral-white);
  --cds-theme-text: var(--cds-color-neutral-black);
  --cds-theme-accent: var(--cds-color-neutral-black);
  --cds-theme-on-accent: var(--cds-color-neutral-white);
  --cds-theme-accent-hover: var(--cds-color-neutral-500);
  --cds-theme-accent-light: var(--cds-color-neutral-400);
  --cds-theme-icon-hover: var(--cds-color-neutral-500);
  --cds-theme-icon-focus: var(--cds-color-neutral-400);
}

[data-mode="dark"] {
  --cds-theme-bg: var(--cds-color-neutral-black);
  --cds-theme-text: var(--cds-color-neutral-white);
  --cds-theme-accent: var(--cds-color-neutral-white);
  --cds-theme-on-accent: var(--cds-color-neutral-black);
  --cds-theme-accent-hover: var(--cds-color-neutral-300);
  --cds-theme-accent-light: var(--cds-color-neutral-300);
  --cds-theme-icon-hover: var(--cds-color-neutral-200);
  --cds-theme-icon-focus: var(--cds-color-neutral-white);
}

/* OS-level dark mode — auto-applies when the consuming app has not set data-mode explicitly.
   [data-mode="dark"] wins via higher specificity. Use [data-mode="light"] to opt out per-subtree. */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --cds-theme-bg: var(--cds-color-neutral-black);
    --cds-theme-text: var(--cds-color-neutral-white);
    --cds-theme-accent: var(--cds-color-neutral-white);
    --cds-theme-on-accent: var(--cds-color-neutral-black);
    --cds-theme-accent-hover: var(--cds-color-neutral-300);
    --cds-theme-accent-light: var(--cds-color-neutral-300);
    --cds-theme-icon-hover: var(--cds-color-neutral-200);
    --cds-theme-icon-focus: var(--cds-color-neutral-white);
  }
}

/* Brand accent overrides — compose with data-mode.
   --cds-theme-accent-hover: one gradient shade lighter (scale: -200 lightest → primary → -500 darkest) */
[data-accent="blue"] { --cds-theme-accent: var(--cds-color-primary-blue); --cds-theme-on-accent: var(--cds-color-neutral-white); --cds-theme-accent-hover: var(--cds-color-supplementary-blue-500); --cds-theme-accent-light: var(--cds-color-supplementary-blue-200); --cds-theme-icon-hover: var(--cds-color-primary-blue); --cds-theme-icon-focus: var(--cds-color-supplementary-blue-500); }
[data-accent="purple"] { --cds-theme-accent: var(--cds-color-primary-purple); --cds-theme-on-accent: var(--cds-color-neutral-white); --cds-theme-accent-hover: var(--cds-color-supplementary-purple-500); --cds-theme-accent-light: var(--cds-color-supplementary-purple-200); --cds-theme-icon-hover: var(--cds-color-primary-purple); --cds-theme-icon-focus: var(--cds-color-supplementary-purple-500); }
[data-accent="teal"] { --cds-theme-accent: var(--cds-color-primary-teal); --cds-theme-on-accent: var(--cds-color-neutral-black); --cds-theme-accent-hover: var(--cds-color-supplementary-teal-400); --cds-theme-accent-light: var(--cds-color-supplementary-teal-200); --cds-theme-icon-hover: var(--cds-color-primary-teal); --cds-theme-icon-focus: var(--cds-color-supplementary-teal-500); }
[data-accent="green"] { --cds-theme-accent: var(--cds-color-primary-green); --cds-theme-on-accent: var(--cds-color-neutral-black); --cds-theme-accent-hover: var(--cds-color-supplementary-green-400); --cds-theme-accent-light: var(--cds-color-supplementary-green-200); --cds-theme-icon-hover: var(--cds-color-primary-green); --cds-theme-icon-focus: var(--cds-color-supplementary-green-500); }
[data-accent="yellow"] { --cds-theme-accent: var(--cds-color-primary-yellow); --cds-theme-on-accent: var(--cds-color-neutral-black); --cds-theme-accent-hover: var(--cds-color-supplementary-yellow-400); --cds-theme-accent-light: var(--cds-color-supplementary-yellow-200); --cds-theme-icon-hover: var(--cds-color-primary-yellow); --cds-theme-icon-focus: var(--cds-color-supplementary-yellow-500); }
[data-accent="pink"] { --cds-theme-accent: var(--cds-color-primary-pink); --cds-theme-on-accent: var(--cds-color-neutral-white); --cds-theme-accent-hover: var(--cds-color-supplementary-pink-400); --cds-theme-accent-light: var(--cds-color-supplementary-pink-200); --cds-theme-icon-hover: var(--cds-color-primary-pink); --cds-theme-icon-focus: var(--cds-color-supplementary-pink-500); }
[data-accent="white"] { --cds-theme-accent: var(--cds-color-neutral-white); --cds-theme-on-accent: var(--cds-color-neutral-black); --cds-theme-accent-hover: var(--cds-color-neutral-300); --cds-theme-accent-light: var(--cds-color-neutral-200); --cds-theme-icon-hover: var(--cds-color-neutral-300); --cds-theme-icon-focus: var(--cds-color-neutral-400); }
:root {
  /* Neutral */
  --cds-color-neutral-white:   #FFFFFF;
  --cds-color-neutral-100:     #F9F9F9;  /* derived — midpoint white↔200; Figma-only in DS v2.0.x */
  --cds-color-neutral-200:     #F2F2F2;
  --cds-color-neutral-300:     #B3B3B3;
  --cds-color-neutral-400:     #808080;
  --cds-color-neutral-500:     #4D4D4D;
  --cds-color-neutral-600:     #404040;  /* derived — linear step 500→black ÷4; Figma-only in DS v2.0.x */
  --cds-color-neutral-700:     #333333;  /* derived */
  --cds-color-neutral-800:     #262626;  /* derived */
  --cds-color-neutral-black:   #191919;

  /* Utility */
  --cds-color-utility-success-light-bg:              #C6F3C6;
  --cds-color-utility-success-shade:                 #0E580E;
  --cds-color-utility-caution-light-bg:              #FECC93;
  --cds-color-utility-caution-shade:                 #FA6700;
  --cds-color-utility-error-light-bg:                #F3AC99;
  --cds-color-utility-error-shade:                   #AA010E;
  --cds-color-utility-wcag-inline-link:              #1E1EEA;
  --cds-color-utility-wcag-inline-link-hover:        #1414D2;
  --cds-color-utility-wcag-inline-link-visited:      #5C11CE;
  --cds-color-utility-wcag-inline-link-inverse:      #76B0F3;
  --cds-color-utility-wcag-inline-link-hover-inverse:   #8EBAF5;
  --cds-color-utility-wcag-inline-link-visited-inverse: #C59AF9;
  --cds-color-utility-wcag-focus-state:              #386CF7;
  --cds-color-utility-hover-black:                   #00000033;
  --cds-color-utility-hover-white:                   #FFFFFF33;
  --cds-color-utility-overlay-scrim-default:         #222222cc;
  --cds-color-utility-overlay-scrim-inverse:         #4D4D4Dcc;

  /* Spacing — NO cds- prefix (intentional) */
  --spacing-zero:  0px;
  --spacing-one:   1px;
  --spacing-xs1:   0.125rem;  /*  2px */
  --spacing-xs2:   0.25rem;   /*  4px */
  --spacing-sm1:   0.5rem;    /*  8px */
  --spacing-sm2:   0.75rem;   /* 12px */
  --spacing-md1:   1rem;      /* 16px */
  --spacing-md2:   1.25rem;   /* 20px */
  --spacing-lg1:   1.5rem;    /* 24px */
  --spacing-lg2:   2rem;      /* 32px */
  --spacing-xl1:   2.5rem;    /* 40px */
  --spacing-xl2:   3rem;      /* 48px */
  --spacing-xxl1:  4rem;      /* 64px */
  --spacing-xxl2:  6rem;      /* 96px */
  --spacing-xxl3:  8rem;      /* 128px */

  /* Grid — Breakpoints */
  --cds-breakpoint-xs:  375px;
  --cds-breakpoint-sm:  768px;
  --cds-breakpoint-md:  1024px;
  --cds-breakpoint-lg:  1440px;
  --cds-breakpoint-xl:  1920px;

  /* Grid — Columns */
  --cds-grid-column-number-xs:  4;
  --cds-grid-column-number-sm:  8;
  --cds-grid-column-number-md:  12;
  --cds-grid-column-number-lg:  12;
  --cds-grid-column-number-xl:  12;

  /* Grid — Minimum column width (flexible, xs–lg) */
  --cds-grid-min-width-xs:  71.75px;
  --cds-grid-min-width-sm:  67px;
  --cds-grid-min-width-md:  53px;
  --cds-grid-min-width-lg:  78px;

  /* Grid — Fixed column width (xl only) */
  --cds-grid-fixed-width-xl:  108px;

  /* Grid — Gutters */
  --cds-grid-gutter-xs:   16px;
  --cds-grid-gutter-sm:   16px;
  --cds-grid-gutter-md:   24px;
  --cds-grid-gutter-lg:   24px;
  --cds-grid-gutter-xl:   24px;

  /* Grid — Margins */
  --cds-grid-margins-xs:  20px;
  --cds-grid-margins-sm:  60px;
  --cds-grid-margins-md:  62px;
  --cds-grid-margins-lg:  120px;
  --cds-grid-margins-xl:  auto;

  /* Elevation / Shadow */
  --cds-shadow-opacity-base:    0.30;  /* key shadow layer — override to tune elevation contrast */
  --cds-shadow-opacity-ambient: 0.15;  /* ambient/spread layer */
  --cds-shadow-m1: 0px 1px 2px rgba(0,0,0,var(--cds-shadow-opacity-base)), 0px 1px 3px 1px rgba(0,0,0,var(--cds-shadow-opacity-ambient));
  --cds-shadow-m2: 0px 2px 6px 2px rgba(0,0,0,var(--cds-shadow-opacity-ambient)), 0px 1px 2px 0px rgba(0,0,0,var(--cds-shadow-opacity-base));
  --cds-shadow-m3: 0px 4px 8px 3px rgba(0,0,0,var(--cds-shadow-opacity-ambient)), 0px 1px 3px rgba(0,0,0,var(--cds-shadow-opacity-base));
  --cds-shadow-m4: 0px 6px 10px 4px rgba(0,0,0,var(--cds-shadow-opacity-ambient)), 0px 2px 3px rgba(0,0,0,var(--cds-shadow-opacity-base));

  /* Corner Radius */
  --cds-radius-none:   0px;
  --cds-radius-small:  4px;
  --cds-radius-base:   8px;
  --cds-radius-brand:  16px;
  --cds-radius-circle: 1000px;

  /* Border Thickness */
  --cds-border-none: 0px;
  --cds-border-xs:   1px;
  --cds-border-sm:   2px;
  --cds-border-md:   3px;
  --cds-border-lg:   4px;
  --cds-border-xl:   6px;

  /* Motion / Animation */
  --cds-motion-duration-fast:    150ms;
  --cds-motion-duration-default: 200ms;
  --cds-motion-duration-slow:    300ms;
  --cds-motion-easing-default:   ease;
  --cds-motion-easing-in:        ease-in;
  --cds-motion-easing-out:       ease-out;

  /* Typography — English Headlines (Desktop) — Chubb Publico App, light (300) only
     Source: @marina/code-kit/dist/tokens/foundations/css/_foundation.css          */
  --cds-typography-font-family-desktop-headline-1-light: 'Chubb Publico App', Georgia, serif;
  --cds-typography-font-size-desktop-headline-1-light:   3.875rem;  /* 62px */
  --cds-typography-font-weight-desktop-headline-1-light: 300;
  --cds-typography-line-height-desktop-headline-1-light: 4.5rem;    /* 72px */

  --cds-typography-font-family-desktop-headline-2-light: 'Chubb Publico App', Georgia, serif;
  --cds-typography-font-size-desktop-headline-2-light:   3.125rem;  /* 50px */
  --cds-typography-font-weight-desktop-headline-2-light: 300;
  --cds-typography-line-height-desktop-headline-2-light: 3.75rem;   /* 60px */

  --cds-typography-font-family-desktop-headline-3-light: 'Chubb Publico App', Georgia, serif;
  --cds-typography-font-size-desktop-headline-3-light:   2.5rem;    /* 40px */
  --cds-typography-font-weight-desktop-headline-3-light: 300;
  --cds-typography-line-height-desktop-headline-3-light: 2.875rem;  /* 46px */

  --cds-typography-font-family-desktop-headline-4-light: 'Chubb Publico App', Georgia, serif;
  --cds-typography-font-size-desktop-headline-4-light:   2.125rem;  /* 34px */
  --cds-typography-font-weight-desktop-headline-4-light: 300;
  --cds-typography-line-height-desktop-headline-4-light: 2.5rem;    /* 40px */

  /* Typography — English Headlines (Mobile) */
  --cds-typography-font-family-mobile-headline-1-light: 'Chubb Publico App', Georgia, serif;
  --cds-typography-font-size-mobile-headline-1-light:   3.125rem;  /* 50px */
  --cds-typography-font-weight-mobile-headline-1-light: 300;
  --cds-typography-line-height-mobile-headline-1-light: 3.75rem;   /* 60px */

  --cds-typography-font-family-mobile-headline-2-light: 'Chubb Publico App', Georgia, serif;
  --cds-typography-font-size-mobile-headline-2-light:   2.5rem;    /* 40px */
  --cds-typography-font-weight-mobile-headline-2-light: 300;
  --cds-typography-line-height-mobile-headline-2-light: 2.875rem;  /* 46px */

  --cds-typography-font-family-mobile-headline-3-light: 'Chubb Publico App', Georgia, serif;
  --cds-typography-font-size-mobile-headline-3-light:   2.125rem;  /* 34px */
  --cds-typography-font-weight-mobile-headline-3-light: 300;
  --cds-typography-line-height-mobile-headline-3-light: 2.5rem;    /* 40px */

  --cds-typography-font-family-mobile-headline-4-light: 'Chubb Publico App', Georgia, serif;
  --cds-typography-font-size-mobile-headline-4-light:   1.625rem;  /* 26px */
  --cds-typography-font-weight-mobile-headline-4-light: 300;
  --cds-typography-line-height-mobile-headline-4-light: 1.875rem;  /* 30px */

  /* Typography — English Titles (Desktop) — Lato */
  --cds-typography-font-family-desktop-title-1-light: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-desktop-title-1-light:   2.5rem;    /* 40px */
  --cds-typography-font-weight-desktop-title-1-light: 300;
  --cds-typography-line-height-desktop-title-1-light: 2.875rem;  /* 46px */

  --cds-typography-font-family-desktop-title-1-regular: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-desktop-title-1-regular:   2.5rem;
  --cds-typography-font-weight-desktop-title-1-regular: 400;
  --cds-typography-line-height-desktop-title-1-regular: 2.875rem;

  --cds-typography-font-family-desktop-title-1-bold: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-desktop-title-1-bold:   2.5rem;
  --cds-typography-font-weight-desktop-title-1-bold: 700;
  --cds-typography-line-height-desktop-title-1-bold: 2.875rem;

  --cds-typography-font-family-desktop-title-2-light: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-desktop-title-2-light:   2.125rem;  /* 34px */
  --cds-typography-font-weight-desktop-title-2-light: 300;
  --cds-typography-line-height-desktop-title-2-light: 2.5rem;    /* 40px */

  --cds-typography-font-family-desktop-title-2-regular: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-desktop-title-2-regular:   2.125rem;
  --cds-typography-font-weight-desktop-title-2-regular: 400;
  --cds-typography-line-height-desktop-title-2-regular: 2.5rem;

  --cds-typography-font-family-desktop-title-2-bold: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-desktop-title-2-bold:   2.125rem;
  --cds-typography-font-weight-desktop-title-2-bold: 700;
  --cds-typography-line-height-desktop-title-2-bold: 2.5rem;

  --cds-typography-font-family-desktop-title-3-regular: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-desktop-title-3-regular:   1.625rem;  /* 26px */
  --cds-typography-font-weight-desktop-title-3-regular: 400;
  --cds-typography-line-height-desktop-title-3-regular: 1.875rem;  /* 30px */

  --cds-typography-font-family-desktop-title-3-bold: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-desktop-title-3-bold:   1.625rem;
  --cds-typography-font-weight-desktop-title-3-bold: 700;
  --cds-typography-line-height-desktop-title-3-bold: 1.875rem;

  --cds-typography-font-family-desktop-title-4-regular: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-desktop-title-4-regular:   1.375rem;  /* 22px */
  --cds-typography-font-weight-desktop-title-4-regular: 400;
  --cds-typography-line-height-desktop-title-4-regular: 1.625rem;  /* 26px */

  --cds-typography-font-family-desktop-title-4-bold: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-desktop-title-4-bold:   1.375rem;
  --cds-typography-font-weight-desktop-title-4-bold: 700;
  --cds-typography-line-height-desktop-title-4-bold: 1.625rem;

  /* Typography — English Titles (Mobile) — Lato */
  --cds-typography-font-family-mobile-title-1-light: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-mobile-title-1-light:   2.125rem;  /* 34px */
  --cds-typography-font-weight-mobile-title-1-light: 300;
  --cds-typography-line-height-mobile-title-1-light: 2.5rem;    /* 40px */

  --cds-typography-font-family-mobile-title-1-regular: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-mobile-title-1-regular:   2.125rem;
  --cds-typography-font-weight-mobile-title-1-regular: 400;
  --cds-typography-line-height-mobile-title-1-regular: 2.5rem;

  --cds-typography-font-family-mobile-title-1-bold: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-mobile-title-1-bold:   2.125rem;
  --cds-typography-font-weight-mobile-title-1-bold: 700;
  --cds-typography-line-height-mobile-title-1-bold: 2.5rem;

  --cds-typography-font-family-mobile-title-2-light: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-mobile-title-2-light:   1.625rem;  /* 26px */
  --cds-typography-font-weight-mobile-title-2-light: 300;
  --cds-typography-line-height-mobile-title-2-light: 1.875rem;  /* 30px */

  --cds-typography-font-family-mobile-title-2-regular: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-mobile-title-2-regular:   1.625rem;
  --cds-typography-font-weight-mobile-title-2-regular: 400;
  --cds-typography-line-height-mobile-title-2-regular: 1.875rem;

  --cds-typography-font-family-mobile-title-2-bold: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-mobile-title-2-bold:   1.625rem;
  --cds-typography-font-weight-mobile-title-2-bold: 700;
  --cds-typography-line-height-mobile-title-2-bold: 1.875rem;

  --cds-typography-font-family-mobile-title-3-regular: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-mobile-title-3-regular:   1.375rem;  /* 22px */
  --cds-typography-font-weight-mobile-title-3-regular: 400;
  --cds-typography-line-height-mobile-title-3-regular: 1.625rem;  /* 26px */

  --cds-typography-font-family-mobile-title-3-bold: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-mobile-title-3-bold:   1.375rem;
  --cds-typography-font-weight-mobile-title-3-bold: 700;
  --cds-typography-line-height-mobile-title-3-bold: 1.625rem;

  --cds-typography-font-family-mobile-title-4-regular: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-mobile-title-4-regular:   1.125rem;  /* 18px */
  --cds-typography-font-weight-mobile-title-4-regular: 400;
  --cds-typography-line-height-mobile-title-4-regular: 1.375rem;  /* 22px */

  --cds-typography-font-family-mobile-title-4-bold: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-mobile-title-4-bold:   1.125rem;
  --cds-typography-font-weight-mobile-title-4-bold: 700;
  --cds-typography-line-height-mobile-title-4-bold: 1.375rem;

  /* Typography — English Body — Lato, fixed across all breakpoints */
  --cds-typography-font-family-body-regular-base: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-body-regular-base:   1rem;      /* 16px */
  --cds-typography-font-weight-body-regular-base: 400;
  --cds-typography-line-height-body-regular-base: 1.375rem;  /* 22px */

  --cds-typography-font-family-body-regular-underlined: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-body-regular-underlined:   1rem;
  --cds-typography-font-weight-body-regular-underlined: 400;
  --cds-typography-line-height-body-regular-underlined: 1.375rem;

  --cds-typography-font-family-body-bold-base: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-body-bold-base:   1rem;
  --cds-typography-font-weight-body-bold-base: 700;
  --cds-typography-line-height-body-bold-base: 1.375rem;

  --cds-typography-font-family-body-bold-underlined: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-body-bold-underlined:   1rem;
  --cds-typography-font-weight-body-bold-underlined: 700;
  --cds-typography-line-height-body-bold-underlined: 1.375rem;

  --cds-typography-font-family-body-sm-regular-base: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-body-sm-regular-base:   0.8125rem;  /* 13px */
  --cds-typography-font-weight-body-sm-regular-base: 400;
  --cds-typography-line-height-body-sm-regular-base: 1.125rem;   /* 18px */

  --cds-typography-font-family-body-sm-regular-underlined: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-body-sm-regular-underlined:   0.8125rem;
  --cds-typography-font-weight-body-sm-regular-underlined: 400;
  --cds-typography-line-height-body-sm-regular-underlined: 1.125rem;

  --cds-typography-font-family-body-sm-bold-base: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-body-sm-bold-base:   0.8125rem;
  --cds-typography-font-weight-body-sm-bold-base: 700;
  --cds-typography-line-height-body-sm-bold-base: 1.125rem;

  --cds-typography-font-family-body-sm-bold-underlined: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-body-sm-bold-underlined:   0.8125rem;
  --cds-typography-font-weight-body-sm-bold-underlined: 700;
  --cds-typography-line-height-body-sm-bold-underlined: 1.125rem;

  /* Typography — English Eyebrow — Lato, ALL CAPS */
  --cds-typography-font-family-eyebrow-regular: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-eyebrow-regular:   1rem;      /* 16px */
  --cds-typography-font-weight-eyebrow-regular: 400;
  --cds-typography-line-height-eyebrow-regular: 1.375rem;  /* 22px */

  --cds-typography-font-family-eyebrow-bold: 'Lato', Verdana, sans-serif;
  --cds-typography-font-size-eyebrow-bold:   1rem;
  --cds-typography-font-weight-eyebrow-bold: 700;
  --cds-typography-line-height-eyebrow-bold: 1.375rem;

  /* Typography — Korean (Devkit shorthands — official token names not published in Code Reference)
     Font: Spoqa Han Sans Neo. Apply --cds-type-korean-body-ls (-0.4%) to all Korean body text.  */
  --cds-type-korean-desktop-headline-1-size: 3rem;      /* 48px */
  --cds-type-korean-desktop-headline-1-lh:   4rem;      /* 64px */
  --cds-type-korean-desktop-headline-2-size: 2.5rem;    /* 40px */
  --cds-type-korean-desktop-headline-2-lh:   3.5rem;    /* 56px */
  --cds-type-korean-desktop-headline-3-size: 2.25rem;   /* 36px */
  --cds-type-korean-desktop-headline-3-lh:   3.125rem;  /* 50px */
  --cds-type-korean-desktop-headline-4-size: 2rem;      /* 32px */
  --cds-type-korean-desktop-headline-4-lh:   2.75rem;   /* 44px */
  --cds-type-korean-desktop-headline-5-size: 1.75rem;   /* 28px */
  --cds-type-korean-desktop-headline-5-lh:   2.5rem;    /* 40px */
  --cds-type-korean-desktop-headline-6-size: 1.5rem;    /* 24px */
  --cds-type-korean-desktop-headline-6-lh:   2.25rem;   /* 36px */
  --cds-type-korean-desktop-headline-7-size: 1.25rem;   /* 20px */
  --cds-type-korean-desktop-headline-7-lh:   1.75rem;   /* 28px */

  --cds-type-korean-mobile-headline-1-size: 2.5rem;    /* 40px */
  --cds-type-korean-mobile-headline-1-lh:   3.5rem;    /* 56px */
  --cds-type-korean-mobile-headline-2-size: 2.25rem;   /* 36px */
  --cds-type-korean-mobile-headline-2-lh:   3.125rem;  /* 50px */
  --cds-type-korean-mobile-headline-3-size: 2rem;      /* 32px */
  --cds-type-korean-mobile-headline-3-lh:   2.75rem;   /* 44px */
  --cds-type-korean-mobile-headline-4-size: 1.75rem;   /* 28px */
  --cds-type-korean-mobile-headline-4-lh:   2.5rem;    /* 40px */
  --cds-type-korean-mobile-headline-5-size: 1.5rem;    /* 24px */
  --cds-type-korean-mobile-headline-5-lh:   2.25rem;   /* 36px */
  --cds-type-korean-mobile-headline-6-size: 1.25rem;   /* 20px */
  --cds-type-korean-mobile-headline-6-lh:   1.75rem;   /* 28px */
  --cds-type-korean-mobile-headline-7-size: 1.125rem;  /* 18px */
  --cds-type-korean-mobile-headline-7-lh:   1.625rem;  /* 26px */

  --cds-type-korean-body-size:    1rem;        /* 16px */
  --cds-type-korean-body-lh:      1.5rem;      /* 24px */
  --cds-type-korean-body-sm-size: 0.875rem;    /* 14px */
  --cds-type-korean-body-sm-lh:   1.25rem;     /* 20px */
  --cds-type-korean-body-xs-size: 0.75rem;     /* 12px */
  --cds-type-korean-body-xs-lh:   1.125rem;    /* 18px */
  --cds-type-korean-body-ls:      -0.004em;    /* -0.4% — apply to all Korean body text */

  /* Typography — Thai (Devkit shorthands — official token names not published in Code Reference)
     Headlines: Kittithada. Body: Cordia New.                                                    */
  --cds-type-thai-desktop-headline-1-size: 3.875rem;  /* 62px */
  --cds-type-thai-desktop-headline-1-lh:   4.188rem;  /* 67px */
  --cds-type-thai-desktop-headline-2-size: 3.125rem;  /* 50px */
  --cds-type-thai-desktop-headline-2-lh:   3.375rem;  /* 54px */
  --cds-type-thai-desktop-headline-3-size: 2.5rem;    /* 40px */
  --cds-type-thai-desktop-headline-3-lh:   2.7rem;    /* 43.2px */
  --cds-type-thai-desktop-headline-4-size: 2.25rem;   /* 36px */
  --cds-type-thai-desktop-headline-4-lh:   2.431rem;  /* 38.9px */
  --cds-type-thai-desktop-headline-5-size: 2rem;      /* 32px */
  --cds-type-thai-desktop-headline-5-lh:   2.163rem;  /* 34.6px */
  --cds-type-thai-desktop-headline-6-size: 1.75rem;   /* 28px */
  --cds-type-thai-desktop-headline-6-lh:   1.888rem;  /* 30.2px */

  --cds-type-thai-mobile-headline-1-size: 3.125rem;  /* 50px */
  --cds-type-thai-mobile-headline-1-lh:   3.375rem;  /* 54px */
  --cds-type-thai-mobile-headline-2-size: 2.5rem;    /* 40px */
  --cds-type-thai-mobile-headline-2-lh:   2.7rem;    /* 43.2px */
  --cds-type-thai-mobile-headline-3-size: 2.25rem;   /* 36px */
  --cds-type-thai-mobile-headline-3-lh:   2.431rem;  /* 38.9px */
  --cds-type-thai-mobile-headline-4-size: 2rem;      /* 32px */
  --cds-type-thai-mobile-headline-4-lh:   2.163rem;  /* 34.6px */
  --cds-type-thai-mobile-headline-5-size: 1.75rem;   /* 28px */
  --cds-type-thai-mobile-headline-5-lh:   1.888rem;  /* 30.2px */
  --cds-type-thai-mobile-headline-6-size: 1.5rem;    /* 24px */
  --cds-type-thai-mobile-headline-6-lh:   1.619rem;  /* 25.9px */

  --cds-type-thai-body-size:    1.25rem;   /* 20px */
  --cds-type-thai-body-lh:      1.4rem;    /* 22.4px */
  --cds-type-thai-body-sm-size: 1rem;      /* 16px */
  --cds-type-thai-body-sm-lh:   1.119rem;  /* 17.9px */
}

/* OS-level reduced motion — zero out all duration tokens so every component
   using var(--cds-motion-duration-*) for transitions/animations automatically
   respects the user's preference. WCAG 2.3.3 (AAA). Per-component overrides
   remain as a safety net but this is the canonical token-level fix. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cds-motion-duration-fast:    0ms;
    --cds-motion-duration-default: 0ms;
    --cds-motion-duration-slow:    0ms;
  }
}
/* CAMO-230: Override Marina typography font-family tokens from Lato to Chubb Publico App.
   Loaded after @chubb/marina-css/styles/tokens.css (marina-components) so these
   :root declarations win in the cascade. */

/* CAMO-230: Project font-size tokens — legacy parity (measured from SIT computed styles).
   --cds-font-size-heading-m: 21.33px — legacy page H1 (all authenticated informational pages).
   --cds-font-size-body-m:    13.33px  — legacy <p> body text on informational pages (AboutUs,
                                        Services, Product, ContactUs, Claims, Default).
   --cds-typography-font-size-body-regular-base: 13.33px — legacy body { font-size: 10pt } parity. */
:root {
  --cds-font-size-heading-m: 1.3333rem; /* 21.33px */
  --cds-font-size-body-m:    13.33px;
  --cds-typography-font-size-body-regular-base: 13.33px;
}

/* VN locale: @font-face for 'Chubb Publico Text Roman' is injected via JS in AppLayout.tsx
   with unicode-range restricted to U+0000-1DFF, U+1F00-FFFF (excludes U+1E00-U+1EFF Latin
   Extended Additional where Vietnamese precomposed chars live). Injecting via JS bypasses
   Vite 6.4.3 which silently strips unicode-range from @font-face in processed CSS files.
   A static @font-face here without unicode-range would override the restricted one and cause
   PublicoText-Roman.otf (which lacks VN glyphs) to be selected for Vietnamese code points,
   producing split-diacritic rendering. Mirrors MCIS-12566. */
:root {
  /* Titles — Desktop */
  --cds-typography-font-family-desktop-title-1-light:   'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-desktop-title-1-regular: 'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-desktop-title-1-bold:    'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-desktop-title-2-light:   'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-desktop-title-2-regular: 'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-desktop-title-2-bold:    'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-desktop-title-3-regular: 'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-desktop-title-3-bold:    'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-desktop-title-4-regular: 'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-desktop-title-4-bold:    'Chubb Publico App', Georgia, serif;

  /* Titles — Mobile */
  --cds-typography-font-family-mobile-title-1-light:    'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-mobile-title-1-regular:  'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-mobile-title-1-bold:     'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-mobile-title-2-light:    'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-mobile-title-2-regular:  'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-mobile-title-2-bold:     'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-mobile-title-3-regular:  'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-mobile-title-3-bold:     'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-mobile-title-4-regular:  'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-mobile-title-4-bold:     'Chubb Publico App', Georgia, serif;

  /* Body */
  --cds-typography-font-family-body-regular-base:          'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-body-regular-underlined:     'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-body-bold-base:              'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-body-bold-underlined:        'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-body-sm-regular-base:        'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-body-sm-regular-underlined:  'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-body-sm-bold-base:           'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-body-sm-bold-underlined:     'Chubb Publico App', Georgia, serif;

  /* Eyebrow */
  --cds-typography-font-family-eyebrow-regular: 'Chubb Publico App', Georgia, serif;
  --cds-typography-font-family-eyebrow-bold:    'Chubb Publico App', Georgia, serif;
}

/* VN locale: override all font-family tokens to Chubb Publico Text Roman.
   body.locale-vn is toggled by AppLayout when useCountry().isVN is true.
   body.locale-vn beats :root in the cascade (0,1,1 > 0,0,1).
   'Times New Roman' is the first fallback because it has full Vietnamese glyph coverage
   on Windows. When Chubb Publico Text Roman's unicode-range excludes U+1E00-U+1EFF
   (Vietnamese precomposed chars), the browser falls through to Times New Roman which
   renders them as unified glyphs without split-diacritic artifacts. */
body.locale-vn {
  --cds-typography-font-family-desktop-title-1-light:   'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-desktop-title-1-regular: 'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-desktop-title-1-bold:    'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-desktop-title-2-light:   'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-desktop-title-2-regular: 'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-desktop-title-2-bold:    'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-desktop-title-3-regular: 'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-desktop-title-3-bold:    'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-desktop-title-4-regular: 'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-desktop-title-4-bold:    'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-mobile-title-1-light:    'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-mobile-title-1-regular:  'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-mobile-title-1-bold:     'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-mobile-title-2-light:    'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-mobile-title-2-regular:  'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-mobile-title-2-bold:     'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-mobile-title-3-regular:  'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-mobile-title-3-bold:     'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-mobile-title-4-regular:  'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-mobile-title-4-bold:     'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-body-regular-base:         'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-body-regular-underlined:   'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-body-bold-base:            'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-body-bold-underlined:      'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-body-sm-regular-base:      'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-body-sm-regular-underlined:'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-body-sm-bold-base:         'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-body-sm-bold-underlined:   'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-eyebrow-regular: 'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
  --cds-typography-font-family-eyebrow-bold:    'Chubb Publico Text Roman', 'Times New Roman', Georgia, serif;
}
/* 2026-09-03 KIGAN01: MCIS-21028 - Global: Marina variants show bottom-border only and gray
   background by default. Override site-wide to full 2px box border + white background on all
   editable field wrappers to match legacy form appearance. !important on both border and background
   is intentional — Marina's per-variant rules sit at 0,2,0 specificity and page-level CSS can stack
   stale transparent overrides via HMR, so !important is the only reliable win. Disabled/read-only
   state rules carry matching !important to restore gray at higher specificity. Applies to
   MarinaTextInput, MarinaSelectChoice, MarinaTextArea, MarinaDateInputGuarded.
   2026-09-08 KIGAN01: Added marina-date-input__field-wrapper — same border/background treatment.
   Also adds box-sizing: border-box to marina-date-input__field: the Marina date input CSS omits
   this (unlike marina-text-input which declares it), so its min-height: 44px is a content-only
   floor that inflates the rendered field by ~24px (top+bottom spacing-sm2 padding). */

.marina-text-input__field-wrapper,
.marina-select-choice__field-wrapper,
.marina-text-area__field-wrapper,
.marina-date-input__field-wrapper {
  border: var(--cds-border-sm, 2px) solid var(--cds-color-neutral-500, #4D4D4D) !important;
  background: var(--cds-color-neutral-white, #ffffff) !important;
}

/* marina-date-input__field lacks box-sizing: border-box — enforce it so min-height: 44px
   is the total height (matching marina-text-input__field behaviour). */
.marina-date-input__field {
  box-sizing: border-box;
}

/* Chromium/Windows does not inherit font-family from body on native <select> elements — force it
   here so all MarinaSelectChoice dropdowns render in Chubb Publico App, not Arial (CAMO-230). */
.marina-select-choice__select {
  font-family: var(--cds-typography-font-family-body-regular-base, 'Chubb Publico App', Georgia, serif);
}

/* Disabled / read-only: lighter border, gray background, grayed text.
   marina-date-input uses a Lit WC whose _inputState does not update reactively when the
   disabled prop is set after mount, so marina-date-input--disabled class is never applied.
   :has(input[disabled]) targets the inner <input disabled> directly as a reliable fallback. */
.marina-text-input--disabled .marina-text-input__field-wrapper,
.marina-text-input--read-only .marina-text-input__field-wrapper,
.marina-select-choice--disabled .marina-select-choice__field-wrapper,
.marina-date-input--disabled .marina-date-input__field-wrapper,
.marina-date-input__field-wrapper:has(input[disabled]),
.marina-text-area--disabled .marina-text-area__field-wrapper {
  border-color: var(--cds-color-neutral-300, #B3B3B3) !important;
  background: var(--cds-color-neutral-200, #ebebeb) !important;
  opacity: 1 !important;
}

.marina-text-input--disabled .marina-text-input__field,
.marina-text-input--read-only .marina-text-input__field,
.marina-select-choice--disabled .marina-select-choice__select,
.marina-select-choice--disabled .marina-select-choice__caret,
.marina-text-area--disabled .marina-text-area__textarea {
  color: var(--cds-color-neutral-400, #999999);
}

/* Error state: red border. */
.marina-text-input--error .marina-text-input__field-wrapper,
.marina-select-choice--error .marina-select-choice__field-wrapper {
  border-color: var(--cds-color-utility-error-base, #c00) !important;
}
/* =============================================================================
   marina-header — Navigation Header Block
   Spec: .claude/marina-design/navigation/header.md (DS v2.0.2)
   Distribution: copy-to-own via registry.json
   All values via CSS custom properties — never raw hex or hardcoded px.
   ============================================================================= */

/* -------------------------------------------------------------------------- */
/* Component tokens — wrap foundation/theme tokens for local reuse             */
/* -------------------------------------------------------------------------- */
.marina-header {
  --marina-header-bg:           var(--cds-theme-bg);
  --marina-header-text:         var(--cds-theme-text);
  --marina-header-accent:       var(--cds-theme-accent);
  --marina-header-icon-hover:   var(--cds-theme-icon-hover);
  --marina-header-icon-focus:   var(--cds-theme-icon-focus);
  --marina-header-divider:      var(--cds-color-neutral-300);
  --marina-header-stroke:       var(--cds-border-md);  /* 3px */
  --marina-header-height:       56px;
  --marina-header-height-xs:    44px;
  --marina-header-height-compact: 48px;
  --marina-header-logo-width:   157px;
  --marina-header-logo-width-xs: 90px;
}

/* -------------------------------------------------------------------------- */
/* Base — shared across all breakpoints                                        */
/* -------------------------------------------------------------------------- */
.marina-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--marina-header-height);
  background-color: var(--marina-header-bg);
  color: var(--marina-header-text);
  border-bottom: var(--marina-header-stroke) solid var(--marina-header-accent);
  transition: height var(--cds-motion-duration-default) var(--cds-motion-easing-default), box-shadow var(--cds-motion-duration-default) var(--cds-motion-easing-default);
}

/* Scroll-compact state — applied via JS (see Angular/React impl) */
.marina-header--compact {
  height: var(--marina-header-height-compact);
  box-shadow: var(--cds-shadow-m1);
}

/* -------------------------------------------------------------------------- */
/* Inner container                                                              */
/* -------------------------------------------------------------------------- */
.marina-header__inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: var(--cds-grid-margins-lg);   /* 120px — lg default */
  padding-right: var(--cds-grid-margins-lg);
}

/* -------------------------------------------------------------------------- */
/* Logo area — brand wrapper groups logo, divider, and site name               */
/* -------------------------------------------------------------------------- */

/* Brand wrapper — flex sub-container; site name wraps within it when no space */
.marina-header__brand {
  display: flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
}

.marina-header__logo-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.marina-header__logo {
  width: var(--marina-header-logo-width);
  height: auto;
  display: block;
}

/* Logo divider — vertical separator between logo and site name; Md+ only */
.marina-header__logo-divider {
  display: none;
  width: 1px;
  height: var(--spacing-md1);
  background-color: var(--marina-header-divider);
  margin: 0 var(--spacing-md1) 0 var(--spacing-xs2);
  flex-shrink: 0;
}

/* Site name */
.marina-header__site-name {
  font-family: var(--cds-typography-font-family-body-regular-base);
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  color: var(--marina-header-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

/* -------------------------------------------------------------------------- */
/* Spacer — pushes nav to the right                                             */
/* -------------------------------------------------------------------------- */
.marina-header__spacer {
  flex: 1 1 auto;
  min-width: var(--spacing-md1); /* 16px minimum gap */
}

/* -------------------------------------------------------------------------- */
/* Navigation                                                                   */
/* -------------------------------------------------------------------------- */
.marina-header__nav {
  display: none; /* hidden on Xs/Sm — hamburger shown instead */
  align-items: center;
  gap: var(--spacing-lg1);
}

.marina-header__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-lg1);
}

.marina-header__nav-item {
  position: relative;
}

/* Left-aligned nav variant */
.marina-header__nav--left {
  margin-right: auto;
}

/* Nav divider — between nav and action icons; Md+ only, only when both present */
.marina-header__nav-divider {
  display: none;
  width: 1px;
  height: var(--spacing-md1);
  background-color: var(--marina-header-divider);
  margin-left: var(--spacing-md1);
  margin-right: var(--spacing-xs2);
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------- */
/* Action icons                                                                 */
/* -------------------------------------------------------------------------- */
.marina-header__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md1);
  flex-shrink: 0;
}

.marina-header__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--marina-header-text);
  padding: 0;
}

.marina-header__action-btn svg {
  width: var(--spacing-md1);
  height: var(--spacing-md1);
  fill: currentColor;
}

.marina-header__action-btn:hover:not(:focus-visible) {
  color: var(--marina-header-icon-hover);
}

.marina-header__action-btn:focus-visible {
  outline: var(--cds-border-sm) solid var(--marina-header-icon-focus);
  outline-offset: var(--cds-border-sm);
  border-radius: var(--cds-radius-none);
}

/* -------------------------------------------------------------------------- */
/* Hamburger button — Xs/Sm only                                               */
/* -------------------------------------------------------------------------- */
.marina-header__hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--marina-header-text);
  padding: 0;
  flex-shrink: 0;
}

.marina-header__hamburger svg {
  width: var(--spacing-md1);
  height: var(--spacing-md1);
  fill: currentColor;
}

.marina-header__hamburger:focus-visible {
  outline: var(--cds-border-sm) solid var(--marina-header-icon-focus);
  outline-offset: 4px;
}

/* -------------------------------------------------------------------------- */
/* Cobranded — partner logo                                                     */
/* -------------------------------------------------------------------------- */
.marina-header__cobranded-logos {
  display: flex;
  align-items: center;
  gap: var(--spacing-md1);
  flex-shrink: 0;
  margin-right: var(--spacing-md2);
}

.marina-header__partner-logo {
  height: auto;
  display: block;
}

/* -------------------------------------------------------------------------- */
/* Dark mode — auto-invert black logo to white                                 */
/* -------------------------------------------------------------------------- */
[data-mode="dark"] .marina-header__logo {
  filter: brightness(0) invert(1);
}

/* -------------------------------------------------------------------------- */
/* Breakpoints                                                                  */
/* -------------------------------------------------------------------------- */

/* Xs: 375px–767px */
@media (max-width: 767px) {
  /* spec: 44px base; grows to 62px when site name wraps below */
  .marina-header {
    height: auto;
    min-height: var(--marina-header-height-xs); /* 44px */
  }

  /* No shrink on scroll for Xs */
  .marina-header--compact {
    height: auto;
    min-height: var(--marina-header-height-xs);
    box-shadow: none;
  }

  .marina-header__inner {
    padding-left: var(--cds-grid-margins-xs);   /* 20px */
    padding-right: var(--cds-grid-margins-xs);
    padding-top: var(--spacing-sm2);    /* 12px — spec top spacing */
    padding-bottom: var(--spacing-sm1); /* 8px  — spec bottom spacing */
  }

  .marina-header__logo {
    width: var(--marina-header-logo-width-xs);
  }

  .marina-header__actions {
    gap: var(--spacing-lg2); /* 32px between icons on Xs */
  }

  /* show divider on Xs when site name is inline */
  .marina-header__logo-divider {
    display: block;
  }

  /* prevent shrink-to-0 truncation so brand wraps instead */
  .marina-header__site-name {
    flex-shrink: 0;
    max-width: 100%;
  }

  /* overflow: hidden lets outer flex shrink brand; children wrap instead of overflowing */
  .marina-header__brand {
    overflow: hidden;
    flex-wrap: wrap;
    align-content: center;
  }
}

/* Sm: 768px–1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  /* spec: 56px base; grows to 66px when site name wraps below */
  .marina-header {
    height: auto;
    min-height: var(--marina-header-height); /* 56px */
  }

  /* spec: Sm compact shrinks to 48px (padding reduces) */
  .marina-header--compact {
    height: auto;
    min-height: var(--marina-header-height-compact); /* 48px */
  }

  .marina-header__inner {
    padding-left: var(--cds-grid-margins-sm);   /* 60px */
    padding-right: var(--cds-grid-margins-sm);
    padding-top: var(--spacing-sm2);    /* 12px — spec top spacing */
    padding-bottom: var(--spacing-sm2); /* 12px — spec bottom spacing */
  }

  /* spec: Sm compact — reduce padding to 8px each side */
  .marina-header--compact .marina-header__inner {
    padding-top: var(--spacing-sm1);    /* 8px */
    padding-bottom: var(--spacing-sm1); /* 8px */
  }

  .marina-header__actions {
    gap: var(--spacing-lg2); /* 32px between icons on Sm */
  }

  /* show divider on Sm when site name is inline */
  .marina-header__logo-divider {
    display: block;
  }

  /* prevent shrink-to-0 truncation so brand wraps instead */
  .marina-header__site-name {
    flex-shrink: 0;
    max-width: 100%;
  }

  /* overflow: hidden lets outer flex shrink brand; children wrap instead of overflowing */
  .marina-header__brand {
    overflow: hidden;
    flex-wrap: wrap;
    align-content: center;
  }
}

/* Xs/Sm — site-name-wrapped modifier: toggled by JS when site name is on row 2 */
@media (max-width: 1023px) {
  /* hide divider when site name has wrapped — no longer inline with logo */
  .marina-header__brand--site-name-wrapped .marina-header__logo-divider {
    display: none;
  }
}

/* Xs — site-name wrapped: indent to align with Chubb SVG visual content (x=16 in 185-unit viewBox at 90px ≈ 8px) */
@media (max-width: 767px) {
  .marina-header__brand--site-name-wrapped .marina-header__site-name {
    margin-left: var(--spacing-sm1); /* 8px */
  }
}

/* Sm — site-name wrapped: indent to align with Chubb SVG visual content (x=16 in 185-unit viewBox at 157px ≈ 14px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .marina-header__brand--site-name-wrapped .marina-header__site-name {
    margin-left: var(--spacing-sm2); /* 12px */
  }
}

/* Md: 1024px–1439px */
@media (min-width: 1024px) and (max-width: 1439px) {
  .marina-header__inner {
    padding-left: var(--cds-grid-margins-md);   /* 62px */
    padding-right: var(--cds-grid-margins-md);
  }
}

/* Md+: ≥1024px — show nav, logo divider, nav divider (when both nav + actions exist) */
@media (min-width: 1024px) {
  .marina-header__logo-divider {
    display: block;
  }

  .marina-header__nav {
    display: flex;
  }

  .marina-header__hamburger {
    display: none;
  }

  /* Show nav divider only when nav + action icons both present */
  .marina-header__nav + .marina-header__nav-divider {
    display: block;
  }
}

/* Xl: ≥1920px — content centred; margins handled by max-width + auto margin */
@media (min-width: 1920px) {
  .marina-header__inner {
    max-width: 1920px;
    margin: 0 auto;
    /* padding inherits lg value (120px); centering via margin: 0 auto above */
  }
}

/* ── Reduced motion ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .marina-header,
  .marina-header * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* ── marina-utility-button — Light DOM styles ──────────────────
   Spec: .claude/marina-design/actions-and-inputs/utility-buttons.md
   Same sizing/typography as marina-button.
   Colors are FIXED utility tokens — never brand-accent-driven.
   ─────────────────────────────────────────────────────────────── */

.marina-utility-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm1);
  height: var(--spacing-xl1);
  padding: 0 var(--spacing-sm2);
  border-radius: var(--cds-radius-small);
  border: var(--cds-border-xs) solid transparent;
  font-family: var(--cds-typography-font-family-body-bold-base);
  font-size: var(--cds-typography-font-size-body-bold-base);
  font-weight: var(--cds-typography-font-weight-body-bold-base);
  line-height: var(--cds-typography-line-height-body-bold-base);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  transition: background-color var(--cds-motion-duration-fast) var(--cds-motion-easing-default), color var(--cds-motion-duration-fast) var(--cds-motion-easing-default), border-color var(--cds-motion-duration-fast) var(--cds-motion-easing-default);
}

/* ── Focus ring (shared across all variants and alert types) ─── */
.marina-utility-button:focus-visible {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: var(--cds-border-sm);
}

/* ══════════════════════════════════════════════════════════════
   SUCCESS — --cds-color-utility-success-shade (#0E580E)
   ══════════════════════════════════════════════════════════════ */

/* Primary — success */
.marina-utility-button--success.marina-utility-button--primary {
  background-color: var(--cds-color-utility-success-shade);
  border-color: transparent;
  color: var(--cds-color-neutral-white);
}

.marina-utility-button--success.marina-utility-button--primary:hover:not([disabled]):not(.marina-utility-button--disabled) {
  background-image: linear-gradient(
    var(--cds-color-utility-hover-white),
    var(--cds-color-utility-hover-white)
  );
  text-decoration: underline;
}

.marina-utility-button--success.marina-utility-button--primary:active:not([disabled]):not(.marina-utility-button--disabled) {
  background-image: linear-gradient(
    var(--cds-color-utility-hover-white),
    var(--cds-color-utility-hover-white)
  );
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: var(--cds-border-sm);
  text-decoration: underline;
}

/* Secondary — success */
.marina-utility-button--success.marina-utility-button--secondary {
  background-color: transparent;
  border-color: var(--cds-color-utility-success-shade);
  color: var(--cds-color-utility-success-shade);
}

.marina-utility-button--success.marina-utility-button--secondary:hover:not([disabled]):not(.marina-utility-button--disabled) {
  text-decoration: underline;
}

.marina-utility-button--success.marina-utility-button--secondary:active:not([disabled]):not(.marina-utility-button--disabled) {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: var(--cds-border-sm);
  text-decoration: underline;
}

/* Ghost — success */
.marina-utility-button--success.marina-utility-button--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--cds-color-utility-success-shade);
}

.marina-utility-button--success.marina-utility-button--ghost:hover:not([disabled]):not(.marina-utility-button--disabled) {
  background-color: var(--cds-color-utility-hover-black);
  text-decoration: underline;
}

.marina-utility-button--success.marina-utility-button--ghost:active:not([disabled]):not(.marina-utility-button--disabled) {
  background-color: var(--cds-color-utility-hover-black);
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: var(--cds-border-sm);
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════
   DANGER — --cds-color-utility-error-shade (#AA010E)
   ══════════════════════════════════════════════════════════════ */

/* Primary — danger */
.marina-utility-button--danger.marina-utility-button--primary {
  background-color: var(--cds-color-utility-error-shade);
  border-color: transparent;
  color: var(--cds-color-neutral-white);
}

.marina-utility-button--danger.marina-utility-button--primary:hover:not([disabled]):not(.marina-utility-button--disabled) {
  background-image: linear-gradient(
    var(--cds-color-utility-hover-white),
    var(--cds-color-utility-hover-white)
  );
  text-decoration: underline;
}

.marina-utility-button--danger.marina-utility-button--primary:active:not([disabled]):not(.marina-utility-button--disabled) {
  background-image: linear-gradient(
    var(--cds-color-utility-hover-white),
    var(--cds-color-utility-hover-white)
  );
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: var(--cds-border-sm);
  text-decoration: underline;
}

/* Secondary — danger */
.marina-utility-button--danger.marina-utility-button--secondary {
  background-color: transparent;
  border-color: var(--cds-color-utility-error-shade);
  color: var(--cds-color-utility-error-shade);
}

.marina-utility-button--danger.marina-utility-button--secondary:hover:not([disabled]):not(.marina-utility-button--disabled) {
  text-decoration: underline;
}

.marina-utility-button--danger.marina-utility-button--secondary:active:not([disabled]):not(.marina-utility-button--disabled) {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: var(--cds-border-sm);
  text-decoration: underline;
}

/* Ghost — danger */
.marina-utility-button--danger.marina-utility-button--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--cds-color-utility-error-shade);
}

.marina-utility-button--danger.marina-utility-button--ghost:hover:not([disabled]):not(.marina-utility-button--disabled) {
  background-color: var(--cds-color-utility-hover-black);
  text-decoration: underline;
}

.marina-utility-button--danger.marina-utility-button--ghost:active:not([disabled]):not(.marina-utility-button--disabled) {
  background-color: var(--cds-color-utility-hover-black);
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: var(--cds-border-sm);
  text-decoration: underline;
}

/* ── Disabled (all variants + alert types) ───────────────────── */
.marina-utility-button[disabled],
.marina-utility-button--disabled {
  background-color: var(--cds-color-neutral-200);
  background-image: none;
  color: var(--cds-color-neutral-400);
  border-color: var(--cds-color-neutral-200);
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
}

.marina-utility-button--ghost[disabled],
.marina-utility-button--ghost.marina-utility-button--disabled {
  background-color: transparent;
  border-color: transparent;
}

/* ── Reduced motion ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .marina-utility-button,
  .marina-utility-button * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* 2026-03-25 YETENG0: MCIS-18628 - Story 1.24: AppLayout shell styles (Marina tokens + fallbacks) */
/* 2026-03-26 YETENG0: MCIS-18628 - Dark/light mode: OS preference via tokens-semantic.css cascade */
/* All var(--cds-*) MUST have fallback values — @chubb/marina-css may not be installed */

/* ─── Body — follows Marina theme tokens ────────────────────────────────────── */
body {
  margin: 0; /* KIGAN01 CAMO-169: browser default 8px margin offsets .app-layout from viewport top */
  background-color: var(--cds-theme-bg, #ffffff);
  color: var(--cds-theme-text, #191919);
  font-family: var(--cds-typography-font-family-body-regular-base, 'Chubb Publico App', Georgia, serif);
}

/* ─── Root layout shell ─────────────────────────────────────────────────────── */
/* KIGAN01 CAMO-169: Switch from grid to flex-column so the footer is always pushed to
   the viewport bottom on short pages without fixing the container height.
   CSS Grid with min-height: 100vh does not establish a definite block size for 1fr
   track resolution — 1fr collapses to content height first, then min-height inflates
   the container, leaving blank space below the footer. Flexbox avoids this: flex: 1
   on .app-layout__body fills the remaining space correctly with only min-height.
   window remains the scroll container (no fixed height set — overflow-y:auto on
   <main> stays inactive, per AppLayout.tsx). window.scrollTo(0,0) on route change
   continues to work. */
.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* NOT overflow:hidden — MarinaAlertBannerContainer is position:sticky (needs visible overflow) */
  overflow: visible;
}

/* ─── Body (sidebar + main content area) ──────────────────────────────────── */
.app-layout__body {
  flex: 1; /* KIGAN01 CAMO-169: fills remaining space between header+alerts and footer */
  display: flex;
  flex-direction: row;
  /* NOT overflow:hidden — required for sticky alert banner */
  overflow: visible;
}

/* ─── Main content area ────────────────────────────────────────────────────── */
/* NOT overflow-y:auto — window is the scroll container (no bounded height on <main>).
   overflow-y:auto would create a CSS scroll container that clips absolutely-positioned
   children such as Marina's date-picker calendar popup. */
.app-layout__main {
  flex: 1;
  overflow-y: visible;
  padding: var(--cds-spacing-md1, 24px);
}

/* All page-level <h1> elements in the main content area — whether bare or carrying
   marina-heading marina-heading--1 — must match the 1.25rem used by static page titles
   (About, Contact, etc.). marina-heading--1 would otherwise render larger; this rule
   wins via specificity (class + element > class alone).
   Margins align with the static pages (Services, About…) which use equivalent inline values;
   inline styles on those pages take precedence here, so this only affects admin pages. */
.app-layout__main h1 {
  font-size: 1.3333rem; /* 21.33px — legacy h1 computed value */
  margin-top: var(--cds-spacing-sm2, 0.75rem);
  margin-bottom: var(--cds-spacing-md1, 24px);
}

/* ─── Header user bar (CargoAdvantage® extension inside MarinaHeader actions) ── */
.app-header__user-bar {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-sm1, 8px);
}

/* ─── Alert banner container: sticky below header ──────────────────────────── */
/* MarinaAlertBannerContainer must be position:sticky so alerts persist while scrolling. */
/* top = header height (auto height overridden to sticky). */
.marina-alert-banner-container {
  position: sticky;
  top: 0;
  z-index: 99; /* below header (z-index:100) so header remains on top */
}

/* ─── Marina date picker popup — z-index override ──────────────────────────── */
/* Marina sets .marina-date-input__positioner to z-index:50, but the sticky header is 100.
   When the calendar opens upward near the top of the viewport (--above flip), the month/year
   header and day-name rows are hidden behind the navigation bar. Override to 101 so the
   calendar always renders above the sticky header and alert banner. */
.marina-date-input__positioner {
  z-index: 101;
}

/* ─── Breadcrumb — legacy computes 12px ────────────────────────────────────── */
.app-layout__main .marina-breadcrumb {
  font-size: 0.75rem; /* 12px — legacy breadcrumb computed value */
}

/* ─── Header nav links focus ring — WCAG 2.1 AA §2.4.7 ────────────────────── */
.marina-header__nav-link:focus-visible {
  outline: 2px solid var(--cds-theme-accent, #c00);
  outline-offset: -2px;
}

/* ─── Header logo: invert black → white in dark mode ──────────────────────── */
/* Uses chubb-logo-black.svg (standard Marina corporate branding).             */
/* filter:invert(1) is correct for a single-colour SVG logo.                  */
[data-mode="dark"] .marina-header__logo {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) .marina-header__logo {
    filter: invert(1);
  }
}

/* ─── marina-header: MCIS two-column layout overrides ──────────────────────── */
/* Real Marina: position:fixed, 56px tall, single flex row.                      */
/* MCIS deviation: sticky, auto height, brand left + right column (actions/nav). */

.marina-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: auto; /* Marina sets 56px — override so right column can grow */
}

/* Two-column: brand left (stretched full height), right section fills remainder */
.marina-header__inner {
  display: flex;
  flex-direction: row;
  align-items: stretch; /* brand + right column both fill the full header height */
  height: auto;
  padding: 0 var(--cds-spacing-lg2, 32px);
}

/* Brand: fills full header height, logo vertically centred within it */
.marina-header__brand {
  display: flex;
  align-items: center;
}

/* Right column — actions pinned to top, nav pinned to bottom */
.marina-header__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  flex: 1;
}

/* Top-right: user actions — minimal strip, clearly secondary */
.marina-header__actions {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-sm1, 8px);
  padding: 4px 0;
}

.app-header__username {
  font-size: 0.8333rem; /* 13.33px — legacy Welcome span computed value */
  color: var(--marina-header-text, var(--cds-theme-text, #191919));
  border-right: var(--cds-border-xs, 1px) solid var(--marina-header-divider, var(--cds-color-neutral-300, #b3b3b3));
  padding-right: var(--spacing-sm1, 8px);
}

/* Ghost button in actions strip: compact to match 0.75rem username text */
/* KIGAN01 CAMO-171: was .marina-button--ghost — MarinaUtilityButton emits marina-utility-button--ghost */
.marina-header__actions .marina-utility-button--ghost {
  /* KIGAN01 CAMO-173/CAMO-230: Chubb Publico App covers U+1E00-1EFF (confirmed via OS/2 table),
     so all glyphs including Vietnamese diacritics render from a single font at the correct weight. */
  font-family: var(--cds-typography-font-family-body-regular-base, 'Chubb Publico App', Georgia, serif);
  font-synthesis: none;
  font-size: 0.8333rem; /* 13.33px — matches legacy logout/utility strip */
  padding: 2px var(--cds-spacing-sm1, 8px); /* tighter than Marina default; keeps actions strip slim */
  height: auto; /* Marina utility button has a fixed height; let line-height drive height in the strip */
}

/* Bottom-right: nav tabs, right-aligned, no divider */
.marina-header__bottom {
  display: flex;
  align-items: stretch;
  width: 100%;
  justify-content: flex-end;
  padding-bottom: 2px;
}

/* marina-header__nav is display:none by default in Marina CSS (mobile hamburger).
   Always show inside our bottom row — layout is desktop-first for MCIS. */
.marina-header__bottom .marina-header__nav {
  display: flex;
}

/* ─── marina-header__nav-link — MCIS copy-to-own (no MarinaDropdownMenu) ─── */
/* Real Marina uses MarinaDropdownMenu per nav item; we use flat links.         */
/* These classes do not exist in @chubb/marina-css — defined here only.        */
.marina-header__nav-link {
  display: inline-flex;
  align-items: center;
  padding: var(--cds-spacing-md1, 16px) var(--cds-spacing-sm2, 12px);
  /* KIGAN01 CAMO-77/CAMO-230: Chubb Publico App covers U+1E00-1EFF (confirmed via OS/2 table),
     so all glyphs including Vietnamese diacritics render from a single font at the correct weight. */
  font-family: var(--cds-typography-font-family-body-regular-base, 'Chubb Publico App', Georgia, serif);
  font-synthesis: none;
  font-size: 0.9167rem; /* 14.67px — legacy top-nav link computed value */
  font-weight: var(--cds-typography-font-weight-body-bold-base, 700);
  color: var(--marina-header-text, var(--cds-theme-text, #191919));
  text-decoration: none;
  /* --marina-header-stroke is a width token (e.g. 3px), not a full border shorthand.
     Separate width/style/color so the token applies correctly. */
  border-bottom-width: var(--marina-header-stroke, 3px);
  border-bottom-style: solid;
  border-bottom-color: transparent;
  white-space: nowrap;
  transition: border-color var(--cds-motion-duration-fast, 150ms) var(--cds-motion-easing-default, ease),
              color var(--cds-motion-duration-fast, 150ms) var(--cds-motion-easing-default, ease);
  box-sizing: border-box;
}

.marina-header__nav-link:hover {
  border-bottom-color: var(--marina-header-accent, var(--cds-theme-accent, #c00));
}

.marina-header__nav-link--active {
  border-bottom-color: var(--marina-header-accent, var(--cds-theme-accent, #c00));
  color: var(--marina-header-accent, var(--cds-theme-accent, #c00));
}

/* ─── GSR country selector — SubPageAuthenticate.Master line 207 ─────────── */
/* Overlay pattern mirrors MarinaFooterLanguageSelector (marina-footer__language). */
/* Wrapper has border + ::after chevron; select is position:absolute/color:transparent. */
.app-header__gsr-country {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-xs2, 4px);
  height: 20px;
  padding: 0 20px 0 var(--cds-spacing-sm1, 8px); /* right padding leaves room for ::after chevron */
  border: 1px solid var(--marina-header-divider, var(--cds-color-neutral-300, #b3b3b3));
  border-radius: 2px;
  background: transparent;
  position: relative;
  cursor: pointer;
}

.app-header__gsr-country::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--marina-header-text, var(--cds-theme-text, #191919));
  pointer-events: none;
}

.app-header__gsr-country-prefix {
  font-size: 0.8333rem; /* 13.33px — matches legacy header text */
  color: var(--marina-header-text, var(--cds-theme-text, #191919));
  white-space: nowrap;
  flex-shrink: 0;
}

.app-header__gsr-country-value {
  font-size: 0.8333rem;
  font-weight: 700;
  color: var(--marina-header-text, var(--cds-theme-text, #191919));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  max-width: 120px;
}

.app-header__gsr-country-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  color: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit; /* CAMO-230: Chromium/Windows won't inherit font-family from body on <select> */
  font-size: 0.8333rem;
}

/* color:transparent on the <select> cascades into <option> in some browsers — override explicitly */
.app-header__gsr-country-select option {
  background-color: var(--cds-color-neutral-white, #ffffff);
  color: var(--cds-color-neutral-black, #191919);
}

.app-header__gsr-country-select:focus-visible {
  outline: 2px solid var(--cds-theme-accent, #c00);
  outline-offset: 2px;
}

/* marina-utility-button and marina-text-link styles come from             */
/* @chubb/marina-css/components/* — resolved by marinaCssPlugin.           */
/* Do NOT redefine Marina component classes here (gap analysis §12).       */
/* Exception: .marina-header__actions .marina-utility-button--ghost above  */
/* is a deliberate header-strip override: size (CAMO-171), font-mixing     */
/* fix for VN diacritics (CAMO-173, mirrors .marina-header__nav-link).     */
/* marina-side-nav — Layer 1a CSS
 * Block pattern (copy-to-own via @chubb/marina-blocks)
 * BEM root: .marina-side-nav
 * Dark mode: set data-mode="dark" on .marina-side-nav or an ancestor
 * ------------------------------------------------------------------
 * Token: --cds-color-neutral-lightest is absent from the design token
 * scale. Divider uses --cds-color-neutral-200 as the approved fallback.
 * See .claude/design-inconsistencies.md DI-007.
 */

/* ============================================================
   ANGULAR HOST — constrain the <marina-side-nav> custom element host
   so height: 100% on the inner <nav> resolves correctly and the
   panel can scroll when content overflows
   ============================================================ */

marina-side-nav {
  display: block;
  height: 100%;
  min-height: 0;
  /* overflow: hidden omitted — inner .marina-side-nav handles its own clipping;
     hidden here would clip the box-shadow on the <nav> child */
}

/* ============================================================
   ROOT PANEL
   ============================================================ */

.marina-side-nav {
  display: flex;
  flex-direction: column;
  background-color: var(--cds-theme-bg, var(--cds-color-neutral-white));
  width: 300px;
  height: 100%;
  overflow: hidden;
  transition: width 0.2s ease;
  box-sizing: border-box;
  box-shadow: var(--cds-shadow-m2);
  position: relative;
  z-index: 10;
}

.marina-side-nav.marina-side-nav--collapsed {
  width: calc(var(--spacing-xl1) + var(--spacing-sm1)); /* 40px + 8px = 48px */
  overflow: visible;
  z-index: 20;
}

/* ============================================================
   NAV TRIGGER (expand / collapse toggle button)
   ============================================================ */

.marina-side-nav__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cds-theme-text, var(--cds-color-neutral-black));
  padding: var(--spacing-xs2);
  width: var(--spacing-xl1);   /* 40px */
  height: var(--spacing-xl1);  /* 40px */
  box-sizing: border-box;
  border-radius: var(--cds-radius-small);
  font-family: inherit;
  align-self: flex-start;
  margin: var(--spacing-xs2) auto var(--spacing-xs2) var(--spacing-md2);
  flex-shrink: 0;
}

.marina-side-nav__trigger:hover {
  background-color: var(--cds-color-neutral-200);
}

.marina-side-nav__trigger:active {
  background-color: var(--cds-color-neutral-300);
}

.marina-side-nav__trigger:focus-visible {
  outline: 2px solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: 2px;
}

.marina-side-nav__trigger svg {
  width: 16px;
  height: 16px;
  color: inherit;
  flex-shrink: 0;
}

/* ============================================================
   PANEL (scrollable content area)
   ============================================================ */

.marina-side-nav__panel {
  flex: 1;
  min-height: 0; /* allows flex child to shrink below content size so overflow-y: auto activates */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 var(--spacing-md2); /* 20px left/right inset for all panel content */
  scrollbar-width: thin;
  scrollbar-color: var(--cds-color-neutral-300) transparent;
}

.marina-side-nav__panel::-webkit-scrollbar {
  width: 4px;
}

.marina-side-nav__panel::-webkit-scrollbar-track {
  background: transparent;
}

.marina-side-nav__panel::-webkit-scrollbar-thumb {
  background-color: var(--cds-color-neutral-300);
  border-radius: var(--cds-radius-circle);
}

/* Hide panel content when collapsed except icons */
.marina-side-nav--collapsed .marina-side-nav__panel {
  overflow: visible;
  padding: 0; /* remove side padding — collapsed items use their own margins */
}

/* ============================================================
   SECTION
   ============================================================ */

.marina-side-nav__section {
  display: flex;
  flex-direction: column;
}

/* ============================================================
   SECTION HEADER (non-interactive label)
   ============================================================ */

.marina-side-nav__section-header {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm2) 0;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: var(--cds-typography-line-height-eyebrow-bold); /* 22px */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cds-theme-text, var(--cds-color-neutral-black));
  white-space: nowrap;
  overflow: hidden;
  font-family: inherit;
}

/* Hide section headers when collapsed */
.marina-side-nav--collapsed .marina-side-nav__section-header {
  display: none;
}

/* ============================================================
   DIVIDER (non-interactive separator)
   ============================================================ */

.marina-side-nav__divider {
  height: 1px;
  background-color: var(--cds-color-neutral-200);
  margin: var(--spacing-xs2) 0;
  border: none;
}

/* Hide dividers when collapsed */
.marina-side-nav--collapsed .marina-side-nav__divider {
  display: none;
}

/* ============================================================
   NAV ITEM (shared base for category + page types)
   ============================================================ */

.marina-side-nav__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm1);
  padding: var(--spacing-sm2);
  background-color: transparent;
  color: var(--cds-theme-text, var(--cds-color-neutral-black));
  border: none;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  border-radius: 0;
  text-decoration: none;
  font-size: 1rem;
  line-height: var(--cds-typography-line-height-body-regular-base); /* 22px */
  font-family: inherit;
}

.marina-side-nav__item:hover {
  background-color: var(--cds-color-neutral-200);
  border-radius: var(--cds-radius-small);
}

.marina-side-nav__item:active {
  background-color: var(--cds-color-neutral-300);
  border-radius: var(--cds-radius-small);
}

.marina-side-nav__item:focus-visible {
  outline: 2px solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: -2px;
  border-radius: var(--cds-radius-small);
}

/* Active state */
.marina-side-nav__item--state-active {
  background-color: var(--cds-color-neutral-300);
  border-radius: var(--cds-radius-small);
}

.marina-side-nav__item--state-active .marina-side-nav__item-label {
  font-weight: 700;
  color: var(--cds-color-neutral-black);
}

/* Disabled state */
.marina-side-nav__item--state-disabled {
  color: var(--cds-color-neutral-300);
  pointer-events: none;
  cursor: default;
}

.marina-side-nav__item--state-disabled .marina-side-nav__item-icon svg {
  color: var(--cds-color-neutral-300);
}

/* Level indentation — base values (no icons) */
.marina-side-nav__item--level-2 {
  padding-left: var(--spacing-md2); /* 20px */
}

.marina-side-nav__item--level-3 {
  padding-left: var(--spacing-lg2); /* 32px */
}

/* With icons — indent aligns sub-item text past icon (16px) + gap (8px) */
.marina-side-nav--with-icons .marina-side-nav__item--level-2 {
  padding-left: calc(var(--spacing-lg2) + var(--spacing-xs2)); /* 36px */
}

.marina-side-nav--with-icons .marina-side-nav__item--level-3 {
  padding-left: calc(var(--spacing-xl1) + var(--spacing-md2)); /* 60px */
}

/* ============================================================
   ITEM ICON (level-1 only)
   ============================================================ */

.marina-side-nav__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.marina-side-nav__item-icon svg {
  width: 16px;
  height: 16px;
  color: inherit; /* inherits from .marina-side-nav__item — works in both light and dark mode */
}

/* ============================================================
   ITEM LABEL
   ============================================================ */

.marina-side-nav__item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}

/* Hide labels when collapsed */
.marina-side-nav--collapsed .marina-side-nav__item-label {
  display: none;
}

/* ============================================================
   ITEM CHEVRON (category expand/collapse indicator)
   ============================================================ */

.marina-side-nav__item-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: auto;
  transition: transform 0.2s ease;
}

.marina-side-nav__item-chevron svg {
  width: 16px;
  height: 16px;
  color: inherit;
}

/* Rotate chevron when category is expanded */
.marina-side-nav__item--expanded > .marina-side-nav__item-chevron {
  transform: rotate(180deg);
}

/* Hide chevrons when collapsed */
.marina-side-nav--collapsed .marina-side-nav__item-chevron {
  display: none;
}

/* ============================================================
   SUB-ITEMS CONTAINER (children of category items)
   ============================================================ */

.marina-side-nav__sub-items {
  display: none;
  flex-direction: column;
}

.marina-side-nav__sub-items--expanded {
  display: flex;
}

/* Hide sub-items when nav is collapsed */
.marina-side-nav--collapsed .marina-side-nav__sub-items {
  display: none;
}

/* ============================================================
   WITH-ICONS MODIFIER
   When no icons: collapsed state hides level-1 item labels,
   showing only the trigger. When with-icons: icons remain visible.
   ============================================================ */

/* Icon placeholder spacing when icons are hidden */
.marina-side-nav:not(.marina-side-nav--with-icons) .marina-side-nav__item-icon {
  display: none;
}

/* When collapsed without icons, hide items entirely (only trigger visible) */
.marina-side-nav--collapsed:not(.marina-side-nav--with-icons) .marina-side-nav__panel {
  display: none;
}

/* When collapsed: trigger stays 40×40px, centers itself in the narrow panel */
.marina-side-nav--collapsed .marina-side-nav__trigger {
  align-self: center;
  margin: var(--spacing-xs2) var(--spacing-sm1);
}

/* When collapsed with icons: each item is 40×40px with 4px side margins and 2px vertical gap */
.marina-side-nav--collapsed.marina-side-nav--with-icons .marina-side-nav__item {
  justify-content: center;
  width: var(--spacing-xl1);   /* 40px */
  height: var(--spacing-xl1);  /* 40px */
  padding: 0;
  margin: 0 var(--spacing-xs2) var(--spacing-xs1);
  border-radius: var(--cds-radius-small);
  flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Xl (1920px+) — expanded, 420px wide, item padding 24px top/bottom 20px left/right */
@media (min-width: 1920px) {
  .marina-side-nav {
    width: 420px;
  }

  .marina-side-nav--collapsed {
    width: calc(var(--spacing-xl1) + 2 * var(--spacing-sm1)); /* 56px */
  }

  .marina-side-nav__trigger {
    min-height: var(--spacing-lg1);
  }

  .marina-side-nav__item {
    padding: var(--spacing-lg1) 0;
  }

  .marina-side-nav__item--level-2 {
    padding-left: var(--spacing-md2);
  }

  .marina-side-nav__item--level-3 {
    padding-left: var(--spacing-lg2);
  }

  .marina-side-nav--with-icons .marina-side-nav__item--level-2 {
    padding-left: calc(var(--spacing-lg2) + var(--spacing-xs2)); /* 36px */
  }

  .marina-side-nav--with-icons .marina-side-nav__item--level-3 {
    padding-left: calc(var(--spacing-xl1) + var(--spacing-md2)); /* 60px */
  }
}

/* Lg (1440–1919px) — expanded, 300–380px, trigger 12px top/bottom */
@media (min-width: 1440px) and (max-width: 1919px) {
  .marina-side-nav {
    width: 340px;
  }

  .marina-side-nav--collapsed {
    width: calc(var(--spacing-xl1) + 2 * var(--spacing-sm1)); /* 56px */
  }

  .marina-side-nav__trigger {
    padding-top: var(--spacing-sm2);
    padding-bottom: var(--spacing-sm2);
  }
}

/* Md (1024–1439px) — expanded, 269–373px, trigger 12px top/bottom */
@media (min-width: 1024px) and (max-width: 1439px) {
  .marina-side-nav {
    width: 300px;
  }

  .marina-side-nav--collapsed {
    width: calc(var(--spacing-xl1) + 2 * var(--spacing-sm1)); /* 56px */
  }

  .marina-side-nav__trigger {
    padding-top: var(--spacing-sm2);
    padding-bottom: var(--spacing-sm2);
  }
}

/* Sm (768–1023px) — expanded, 210–274px, trigger 12px top/bottom */
@media (min-width: 768px) and (max-width: 1023px) {
  .marina-side-nav {
    width: 240px;
  }

  .marina-side-nav--collapsed {
    width: calc(var(--spacing-xl1) + 2 * var(--spacing-sm1)); /* 56px */
  }

  .marina-side-nav__trigger {
    padding-top: var(--spacing-sm2);
    padding-bottom: var(--spacing-sm2);
  }
}

/* Xs (375–767px) — overlay panel slides in from left edge */
@media (max-width: 767px) {
  .marina-side-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 320px;
    height: 100%;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  .marina-side-nav.marina-side-nav--expanded {
    transform: translateX(0);
  }

  /* Collapsed: nav is off-screen; trigger is a D-shaped peek tab at the left edge */
  .marina-side-nav--collapsed {
    width: auto;
    box-shadow: none;
    background: transparent;
    overflow: visible;
  }

  /* Expanded: trigger sits inside the nav at top-left (same as larger breakpoints) */
  .marina-side-nav--expanded .marina-side-nav__trigger {
    position: static;
    border-radius: var(--cds-radius-small);
    box-shadow: none;
    background-color: transparent;
    padding: var(--spacing-xs2);
    width: var(--spacing-xl1);  /* 40px */
    height: var(--spacing-xl1); /* 40px */
  }

  /* Collapsed: D-shaped peek tab — flat left edge flush with screen, rounded right side.
     The nav has transform: translateX(-100%), making position:fixed relative to the
     nav's local coordinate space. left: 100% = nav's right edge = viewport left: 0. */
  .marina-side-nav--collapsed .marina-side-nav__trigger {
    position: fixed;
    left: 100%;                           /* nav right edge → viewport left: 0 */
    top: var(--spacing-md1);              /* 16px from top */
    width: var(--spacing-xl1);            /* 40px */
    height: var(--spacing-xl1);           /* 40px */
    border-radius: 0 var(--cds-radius-circle) var(--cds-radius-circle) 0; /* D-shape: right corners only */
    box-shadow: var(--cds-shadow-m2);
    background-color: var(--cds-theme-bg, var(--cds-color-neutral-white));
    padding: var(--spacing-xs2);
    align-self: unset;
    margin: 0;
    z-index: 201;
    overflow: visible;
  }

  .marina-side-nav--collapsed .marina-side-nav__trigger:hover {
    background-color: var(--cds-color-neutral-200);
  }

  .marina-side-nav--collapsed .marina-side-nav__trigger:focus-visible {
    outline: 2px solid var(--cds-color-utility-wcag-focus-state);
    outline-offset: 0;
    background-color: var(--cds-theme-bg, var(--cds-color-neutral-white));
  }

  .marina-side-nav--collapsed .marina-side-nav__trigger:active {
    background-color: var(--cds-color-neutral-300);
    box-shadow: var(--cds-shadow-m2);
  }

  .marina-side-nav--collapsed .marina-side-nav__trigger:disabled,
  .marina-side-nav--collapsed .marina-side-nav__trigger[disabled] {
    background-color: var(--cds-theme-bg, var(--cds-color-neutral-white));
    color: var(--cds-color-neutral-300);
    pointer-events: none;
    box-shadow: none;
  }
}

/* ============================================================
   DARK MODE
   ============================================================ */

:is([data-mode="dark"]) .marina-side-nav {
  background-color: var(--cds-theme-bg, var(--cds-color-neutral-black));
}

:is([data-mode="dark"]) .marina-side-nav__section-header {
  color: var(--cds-theme-text, var(--cds-color-neutral-white));
}

:is([data-mode="dark"]) .marina-side-nav__item {
  color: var(--cds-theme-text, var(--cds-color-neutral-white));
}

:is([data-mode="dark"]) .marina-side-nav__item:hover {
  background-color: var(--cds-color-neutral-500);
}

:is([data-mode="dark"]) .marina-side-nav__item:focus-visible {
  background-color: var(--cds-color-neutral-black);
}

:is([data-mode="dark"]) .marina-side-nav__item--state-active {
  background-color: var(--cds-color-neutral-400);
}

:is([data-mode="dark"]) .marina-side-nav__item--state-active .marina-side-nav__item-label {
  color: var(--cds-color-neutral-white);
}

/* icon and chevron SVGs use color: inherit — they pick up white from the parent item in dark mode */

:is([data-mode="dark"]) .marina-side-nav__trigger {
  color: var(--cds-theme-text, var(--cds-color-neutral-white));
}

:is([data-mode="dark"]) .marina-side-nav__trigger:hover {
  background-color: var(--cds-color-neutral-500);
}

:is([data-mode="dark"]) .marina-side-nav__divider {
  background-color: var(--cds-color-neutral-500);
}

@media (max-width: 767px) {
  :is([data-mode="dark"]) .marina-side-nav--collapsed .marina-side-nav__trigger {
    background-color: var(--cds-theme-bg, var(--cds-color-neutral-black));
  }
}
/* 2026-04-01 YETENG0: MCIS-18628 - marina-side-nav MCIS-specific overrides
 * Marina source: marina-components/libs/marina-css/src/components/marina-side-nav/marina-side-nav.css
 * Only classes NOT in Marina spec live here.
 *
 * DEVIATION 1: Accent left-border active indicator
 *   Marina default active state: background-color neutral-300 only.
 *   MCIS adds a 3px Chubb-red left border for stronger scannability.
 *   Transparent border reserved on all items to prevent layout shift on activation.
 */

/* KIGAN01 CAMO-169: sidebar fills full height of .app-layout__body (flex row, flex:1).
   Marina CSS sets an explicit height on .marina-side-nav that prevents align-self:stretch
   from expanding it. height:auto resets that so stretch can fill the flex container's
   cross-axis (confirmed via runtime: auto → 516px = body height; 100% → 140px = content). */
.marina-side-nav {
  align-self: stretch;
  height: auto;
}

@media (min-width: 1440px) {
  .marina-side-nav {
    width: 280px;
  }
}

@media (max-width: 1439px) {
  .marina-side-nav {
    width: 260px;
  }
}

/* Reserve 3px left for active indicator — no layout shift */
/* font-size: 0.8333rem (13.33px) mirrors legacy #sub_navigation a { font-size: 10pt } */
.marina-side-nav .marina-side-nav__item {
  border-left: 3px solid transparent;
  transition: border-color var(--cds-motion-duration-fast, 150ms) var(--cds-motion-easing-default, ease);
  font-size: 0.8333rem;
}

.marina-side-nav .marina-side-nav__item--state-active {
  border-left-color: var(--cds-theme-accent, #c00);
}
/* =============================================================================
   marina-footer — Navigation Footer Block
   Spec: .claude/marina-design/navigation/footer.md (DS v2.0.1)
   Distribution: copy-to-own via registry.json + @chubb/marina-react + @chubb/marina-angular/footer
   All values via CSS custom properties — never raw hex or hardcoded px.

   BEM classes:
     .marina-footer                     — root block (always dark)
     .marina-footer__inner              — max-width container
     .marina-footer__utility            — top row: logo + links + social icons
     .marina-footer__logo-wrap          — logo slot (single or cobranded)
     .marina-footer__logo               — <img> Chubb white logo
     .marina-footer__partner-logo       — <img> partner logo (cobranded only)
     .marina-footer__links              — contact / text links area
     .marina-footer__social             — social media icons slot (right-aligned)
     .marina-footer__social-icon        — individual social icon wrapper
     .marina-footer__divider            — horizontal rule between utility and footer items
     .marina-footer__items              — footer links row (copyright, privacy, terms…)
     .marina-footer__fine-print         — optional fine print text below items
     .marina-footer__language           — optional language selector (<select>)
   Modifier:
     .marina-footer--cobranded          — shows partner logo beside Chubb logo
   ============================================================================= */

/* -------------------------------------------------------------------------- */
/* Component tokens — footer is always dark; never uses --cds-theme-* tokens  */
/* -------------------------------------------------------------------------- */
.marina-footer {
  --marina-footer-bg:         var(--cds-color-neutral-black);
  --marina-footer-text:       var(--cds-color-neutral-white);
  --marina-footer-divider:    var(--cds-color-neutral-300);
  --marina-footer-fine-print: var(--cds-color-neutral-300);

  /* Logo widths per breakpoint (Xs uses Sm value — spec leaves Xs blank) */
  --marina-footer-logo-width-xl: 180px;
  --marina-footer-logo-width-lg: 120px;
  --marina-footer-logo-width-md: 62px;
  --marina-footer-logo-width-sm: 60px;

  /* Horizontal padding per breakpoint */
  --marina-footer-pad-xl:  var(--spacing-lg2);  /* 32px */
  --marina-footer-pad-lg:  var(--spacing-lg2);  /* 32px */
  --marina-footer-pad-md:  var(--spacing-lg2);  /* 32px */
  --marina-footer-pad-sm:  var(--spacing-md1);  /* 16px */
  --marina-footer-pad-xs:  var(--spacing-lg2);  /* 32px */

  /* Row spacing — first value: padding top/bottom of footer block;
     second value: gap between utility section and footer-items row.
     Spec table provides two values per breakpoint; interpretation:
       [outer-padding] / [inner-row-gap]
     ⚠ Spec gap: Xs logo width not specified — using Sm value (60px). */
  --marina-footer-outer-pad-xl: var(--spacing-lg2);  /* 32px */
  --marina-footer-inner-gap-xl: var(--spacing-lg1);  /* 24px */

  --marina-footer-outer-pad-lg: var(--spacing-lg2);  /* 32px */
  --marina-footer-inner-gap-lg: var(--spacing-md2);  /* 20px */

  --marina-footer-outer-pad-md: var(--spacing-md1);  /* 16px */
  --marina-footer-inner-gap-md: var(--spacing-md2);  /* 20px */

  --marina-footer-outer-pad-sm: var(--spacing-md2);  /* 20px */
  --marina-footer-inner-gap-sm: var(--spacing-lg2);  /* 32px */

  --marina-footer-outer-pad-xs: var(--spacing-lg1);  /* 24px */
  --marina-footer-inner-gap-xs: var(--spacing-lg2);  /* 32px */

  /* Additional constants (all breakpoints) */
  --marina-footer-social-gap: var(--spacing-md2);  /* 20px — from surrounding content */
}

/* -------------------------------------------------------------------------- */
/* Base — shared across all breakpoints                                        */
/* -------------------------------------------------------------------------- */
.marina-footer {
  background-color: var(--marina-footer-bg);
  color: var(--marina-footer-text);
  width: 100%;
}

/* Inner container — constrains content width at XL */
.marina-footer__inner {
  padding-left: var(--marina-footer-pad-xl);
  padding-right: var(--marina-footer-pad-xl);
  padding-top: var(--marina-footer-outer-pad-xl);
  padding-bottom: var(--marina-footer-outer-pad-xl);
  max-width: 1920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--marina-footer-inner-gap-xl);
}

/* -------------------------------------------------------------------------- */
/* Utility section — logo + links + social (top row)                          */
/* -------------------------------------------------------------------------- */
.marina-footer__utility {
  display: flex;
  align-items: center;
  gap: var(--spacing-md2);
}

/* Logo slot */
.marina-footer__logo-wrap {
  display: flex;
  align-items: center;
  gap: var(--spacing-md1);
  flex-shrink: 0;
}

.marina-footer__logo {
  width: var(--marina-footer-logo-width-xl);
  height: auto;
  display: block;
}

/* Partner logo — only visible in --cobranded variant */
.marina-footer__partner-logo {
  display: none;
  height: auto;
  /* Balanced with Chubb logo — consumer sets explicit width via inline style or wrapper */
}

.marina-footer--cobranded .marina-footer__partner-logo {
  display: block;
}

/* Links area — grows to fill available space */
.marina-footer__links {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md1);
}

.marina-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs2);
  color: var(--marina-footer-text);
  font-family: var(--cds-typography-font-family-body-regular-base);
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  text-decoration: none;
}

.marina-footer__links a svg,
.marina-footer__links a img {
  flex-shrink: 0;
  fill: currentColor;
}

.marina-footer__links a:hover {
  text-decoration: underline;
}

.marina-footer__links a:focus-visible {
  outline: var(--cds-border-sm) solid var(--marina-footer-text);
  outline-offset: var(--cds-border-sm);
  border-radius: var(--cds-radius-none);
}

/* Social icons — always right-aligned */
.marina-footer__social {
  display: flex;
  align-items: center;
  gap: var(--marina-footer-social-gap);
  flex-shrink: 0;
  margin-left: auto;
}

.marina-footer__social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs2);  /* 4px — icon 16px + 4px each side = 24px total */
  color: var(--marina-footer-text);
  text-decoration: none;
}

.marina-footer__social-icon svg {
  width: var(--spacing-md1);   /* 16px */
  height: var(--spacing-md1);  /* 16px */
  fill: currentColor;
}

.marina-footer__social-icon:focus-visible {
  outline: var(--cds-border-sm) solid var(--marina-footer-text);
  outline-offset: var(--cds-border-sm);
  border-radius: var(--cds-radius-none);
}

/* -------------------------------------------------------------------------- */
/* Divider                                                                      */
/* -------------------------------------------------------------------------- */
.marina-footer__divider {
  border: none;
  border-top: var(--cds-border-xs) solid var(--marina-footer-divider);
  margin: 0;
}

/* -------------------------------------------------------------------------- */
/* Footer items row — copyright, privacy, terms, etc.                          */
/* -------------------------------------------------------------------------- */
.marina-footer__items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md1);
}

.marina-footer__items a,
.marina-footer__items span {
  color: var(--marina-footer-text);
  font-family: var(--cds-typography-font-family-body-regular-base);
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  text-decoration: none;
  white-space: nowrap;
}

.marina-footer__items a:hover {
  text-decoration: underline;
}

.marina-footer__items a:focus-visible {
  outline: var(--cds-border-sm) solid var(--marina-footer-text);
  outline-offset: var(--cds-border-sm);
  border-radius: var(--cds-radius-none);
}

/* Language selector — sits in the utility section, after social icons */
/* Spec: 198×26px container, Neutral/300 border 1px, transparent fill */
.marina-footer__language {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs2);              /* 4px between "Language:" and selected value */
  width: 198px;
  height: 26px;
  padding: var(--spacing-xs1) var(--spacing-sm1); /* 2px 8px */
  border: var(--cds-border-xs) solid var(--marina-footer-divider); /* 1px solid neutral-300 */
  background: transparent;
  position: relative;
}

.marina-footer__language::after {
  content: '';
  position: absolute;
  right: var(--spacing-sm1);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--marina-footer-text);
  pointer-events: none;
  flex-shrink: 0;
}

/* "Language:" visible prefix — Body regular, white */
.marina-footer__language-prefix {
  color: var(--marina-footer-text);
  font-family: var(--cds-typography-font-family-body-regular-base);
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-regular-base);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Current value display — Body bold, white; fills remaining space */
.marina-footer__language-value {
  flex: 1;
  min-width: 0;
  color: var(--marina-footer-text);
  font-family: var(--cds-typography-font-family-body-regular-base);
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-bold-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* Select — invisible full-width overlay so the native popup spans the full 198px container */
.marina-footer__language-select,
.marina-footer__language select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  color: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  font-family: var(--cds-typography-font-family-body-regular-base);
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-bold-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
}

.marina-footer__language-select option,
.marina-footer__language select option {
  background-color: var(--cds-color-neutral-black);
  color: var(--cds-color-neutral-white);
  padding: var(--spacing-xs2) var(--spacing-sm1); /* 4px 8px */
}

.marina-footer__language-select:focus-visible,
.marina-footer__language select:focus-visible {
  outline: var(--cds-border-sm) solid var(--marina-footer-text);
  outline-offset: var(--cds-border-sm);
}

/* -------------------------------------------------------------------------- */
/* Fine print — optional; below footer items; body-sm (13px)                  */
/* -------------------------------------------------------------------------- */
.marina-footer__fine-print {
  color: var(--marina-footer-fine-print);
  font-family: var(--cds-typography-font-family-body-sm-regular-base);
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
  font-weight: var(--cds-typography-font-weight-body-sm-regular-base);
  line-height: var(--cds-typography-line-height-body-sm-regular-base);
}

/* -------------------------------------------------------------------------- */
/* Breakpoints                                                                  */
/* -------------------------------------------------------------------------- */

/* Lg: 1440px–1919px */
@media (min-width: 1440px) and (max-width: 1919px) {
  .marina-footer__inner {
    padding-left: var(--marina-footer-pad-lg);
    padding-right: var(--marina-footer-pad-lg);
    padding-top: var(--marina-footer-outer-pad-lg);
    padding-bottom: var(--marina-footer-outer-pad-lg);
    gap: var(--marina-footer-inner-gap-lg);
  }

  .marina-footer__logo {
    width: var(--marina-footer-logo-width-lg);
  }
}

/* Md: 1024px–1439px */
@media (min-width: 1024px) and (max-width: 1439px) {
  .marina-footer__inner {
    padding-left: var(--marina-footer-pad-md);
    padding-right: var(--marina-footer-pad-md);
    padding-top: var(--marina-footer-outer-pad-md);
    padding-bottom: var(--marina-footer-outer-pad-md);
    gap: var(--marina-footer-inner-gap-md);
  }

  .marina-footer__logo {
    width: var(--marina-footer-logo-width-md);
  }
}

/* Sm: 768px–1023px — utility section begins to stack; footer items 2-col */
@media (min-width: 768px) and (max-width: 1023px) {
  .marina-footer__inner {
    padding-left: var(--marina-footer-pad-sm);
    padding-right: var(--marina-footer-pad-sm);
    padding-top: var(--marina-footer-outer-pad-sm);
    padding-bottom: var(--marina-footer-outer-pad-sm);
    gap: var(--marina-footer-inner-gap-sm);
  }

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

  .marina-footer__logo {
    width: var(--marina-footer-logo-width-sm);
  }

  .marina-footer__social {
    margin-left: 0; /* no longer pushed right — wraps naturally */
  }

}

/* Xs: 375px–767px — fully stacked */
@media (max-width: 767px) {
  .marina-footer__inner {
    padding-left: var(--marina-footer-pad-xs);
    padding-right: var(--marina-footer-pad-xs);
    padding-top: var(--marina-footer-outer-pad-xs);
    padding-bottom: var(--marina-footer-outer-pad-xs);
    gap: var(--marina-footer-inner-gap-xs);
  }

  /* ⚠ Spec gap: Xs logo width not specified — using Sm value (60px) */
  .marina-footer__logo {
    width: var(--marina-footer-logo-width-sm);
  }

  .marina-footer__utility {
    flex-direction: column;
    align-items: flex-start;
  }

  .marina-footer__links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm2);
  }

  .marina-footer__social {
    margin-left: 0;
  }

  .marina-footer__items {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm2);
  }

  /* Language selector full-width on Xs */
  .marina-footer__language {
    width: 100%;
  }

  .marina-footer__language select {
    width: 100%;
  }
}
/* 2026-03-25 YETENG0: MCIS-18628 - Story 1.24: marina-footer styles (Marina token + fallbacks) */
/* 2026-10-05 KIGAN01: CAMO-230 - font-size only; background/padding/color left to Marina package CSS */
/* 2026-10-07 KIGAN01: CAMO-230 - scope token override so Marina child rules (font-size: var(...)) also resolve to legacy 8pt (10.67px) */
/* 2026-10-12 KIGAN01: CAMO-230 - bumped to 13.33px (0.8333rem) to match body/nav font size per legacy parity review */

.marina-footer {
  --cds-typography-font-size-body-regular-base: 0.8333rem; /* 13.33px — matches body/nav legacy 10pt */
  font-size: 0.8333rem; /* fallback for elements not using the token */
}

.marina-footer__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--cds-spacing-sm1, 8px);
}
/* ── marina-alert-banner — Light DOM styles ────────────────────── */

/* ── Sticky queue container ───────────────────────────────────── */

.marina-alert-banner-container {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm1); /* 8px between banners on Sm+ */
  width: 100%;
  box-sizing: border-box;
}

/* ── Single banner ────────────────────────────────────────────── */

.marina-alert-banner {
  display: flex;
  align-items: flex-start;
  min-height: 56px;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--cds-color-neutral-white);
  border-radius: var(--cds-radius-small);
  box-shadow: var(--cds-shadow-m3);
  /* Full border — color overridden per type; left side gets 6px accent stroke */
  border: var(--cds-border-xs) solid var(--cds-color-neutral-black);
  /* Left accent stroke — color overridden per type */
  border-left: 6px solid var(--cds-color-neutral-black);
  /* Md / Lg / Xl spacing (≥ 1024px): top/bottom 12px, left/right 20px */
  padding: var(--spacing-sm2) var(--spacing-md2);
}

/* ── Alert types — border color (all sides) + icon color ─────── */

.marina-alert-banner--informational {
  border-color: var(--cds-color-neutral-black);
}

.marina-alert-banner--error {
  border-color: var(--cds-color-utility-error-shade);
}

.marina-alert-banner--success {
  border-color: var(--cds-color-utility-success-shade);
}

.marina-alert-banner--caution {
  border-color: var(--cds-color-utility-caution-shade);
}

/* ── Status icon (24 × 24px) ──────────────────────────────────── */

.marina-alert-banner__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: var(--spacing-lg1);
  height: var(--spacing-lg1);
  margin-right: var(--spacing-sm1);
  color: var(--cds-color-neutral-black);
}

.marina-alert-banner--error .marina-alert-banner__icon {
  color: var(--cds-color-utility-error-shade);
}

.marina-alert-banner--success .marina-alert-banner__icon {
  color: var(--cds-color-utility-success-shade);
}

.marina-alert-banner--caution .marina-alert-banner__icon {
  color: var(--cds-color-utility-caution-shade);
}

/* ── Content area ─────────────────────────────────────────────── */

.marina-alert-banner__content {
  flex: 1;
  min-width: 0;
  font-family: var(--cds-typography-font-family-body-regular-base);
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  color: var(--cds-color-neutral-black);
}

/* ── Title (bold) ─────────────────────────────────────────────── */

.marina-alert-banner__title {
  display: block;
  font-weight: var(--cds-typography-font-weight-body-bold-base);
}

/* ── Body text ────────────────────────────────────────────────── */

.marina-alert-banner__body {
  display: block;
}

/* ── Action link — below (default) ───────────────────────────── */

.marina-alert-banner__action {
  display: block;
  margin-top: var(--spacing-xs2);
  font-family: var(--cds-typography-font-family-body-regular-base);
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  color: var(--cds-color-utility-wcag-inline-link);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.marina-alert-banner__action:hover {
  color: var(--cds-color-utility-wcag-inline-link-hover);
}

.marina-alert-banner__action:visited {
  color: var(--cds-color-utility-wcag-inline-link-visited);
}

.marina-alert-banner__action:focus-visible {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: var(--cds-border-sm);
  border-radius: var(--cds-radius-none);
}

/* ── Action link — right position ────────────────────────────── */

.marina-alert-banner--action-right .marina-alert-banner__action {
  display: inline;
  margin-top: 0;
  margin-left: var(--spacing-sm1);
}

/* ── Close button (always visible) ───────────────────────────── */

.marina-alert-banner__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* 32px hit target around the 16px icon */
  width: 32px;
  height: 32px;
  margin-left: var(--spacing-sm1);
  /* Align close button vertically with the icon — offset by 4px so it sits at the text cap-height */
  margin-top: -4px;
  /* Pull toward right edge — counteracts right container padding */
  margin-right: calc(-1 * var(--spacing-sm2));
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cds-color-neutral-black);
  border-radius: var(--cds-radius-small);
}

.marina-alert-banner__close svg {
  width: var(--spacing-md1);
  height: var(--spacing-md1);
}

.marina-alert-banner__close:hover {
  background-color: var(--cds-color-utility-hover-black);
}

.marina-alert-banner__close:focus-visible {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: var(--cds-border-sm);
}

/* ── Responsive: Sm (768–1023px) — all sides 16px ────────────── */

@media (max-width: 1023px) {
  .marina-alert-banner {
    padding: var(--spacing-md1);
  }
}

/* ── Dark mode ────────────────────────────────────────────────── */

:is([data-mode="dark"]) .marina-alert-banner {
  background-color: var(--cds-color-neutral-black);
  color: var(--cds-color-neutral-white);
}

:is([data-mode="dark"]) .marina-alert-banner--informational {
  border-color: var(--cds-color-neutral-300);
}

:is([data-mode="dark"]) .marina-alert-banner__icon {
  color: var(--cds-color-neutral-white);
}

:is([data-mode="dark"]) .marina-alert-banner__content {
  color: var(--cds-color-neutral-white);
}

:is([data-mode="dark"]) .marina-alert-banner__action {
  color: var(--cds-color-utility-wcag-inline-link-inverse);
}

:is([data-mode="dark"]) .marina-alert-banner__action:hover {
  color: var(--cds-color-utility-wcag-inline-link-hover-inverse);
}

:is([data-mode="dark"]) .marina-alert-banner__action:visited {
  color: var(--cds-color-utility-wcag-inline-link-visited-inverse);
}

:is([data-mode="dark"]) .marina-alert-banner__close {
  color: var(--cds-color-neutral-white);
}

:is([data-mode="dark"]) .marina-alert-banner__close:hover {
  background-color: var(--cds-color-utility-hover-white);
}

/* ── Responsive: Xl (1920px+) — cap width, center in viewport ── */

@media (min-width: 1920px) {
  .marina-alert-banner-container {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Responsive: Xs (375–767px) — left/right 8px ─────────────── */

@media (max-width: 767px) {
  .marina-alert-banner {
    padding-left: var(--spacing-sm1);
    padding-right: var(--spacing-sm1);
  }

  .marina-alert-banner-container {
    gap: var(--spacing-xs2); /* 4px inter-banner gap on Xs */
  }

  /* Xs: action-right degrades to below — CSS only, no JS */
  .marina-alert-banner--action-right .marina-alert-banner__action {
    display: block;
    margin-left: 0;
    margin-top: var(--spacing-xs2);
  }
}
.idle-timeout-dialog {
  border: 1px solid var(--marina-color-border-default, #cccccc);
  border-radius: 4px;
  padding: 24px;
  width: 350px;
  max-width: 90vw;
}

.idle-timeout-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.idle-timeout-dialog__actions {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
/* informational.css
   2026-03-26 YETENG0: MCIS-18628 - Story 2.10/2.11 CR fix: add .sr-only utility + new-tab accessible indicator
   Shared dark mode link override for all informational pages (About, Product, Contact, Services).
   Marina standard link token (--cds-color-utility-wcag-inline-link = #1E1EEA) is fixed dark blue —
   not readable on dark backgrounds. Pattern mirrors app-layout.css theming: data-mode attr + OS
   media query fallback. */

/* Screen-reader-only utility — visually hidden but accessible to assistive technology */
/* WCAG 2.4.4: informs SR users when a link opens in a new tab */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* CAMO-230: Legacy content links are 13.33px; Marina text-link explicit 1rem overrides inheritance */
.informational-link {
  font-size: 0.8333rem; /* 13.33px */
}

[data-mode="dark"] .informational-link,
[data-mode="dark"] .informational-link:visited {
  color: var(--cds-color-neutral-white);
}

[data-mode="dark"] .informational-link:hover {
  color: var(--cds-color-neutral-white);
  text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) .informational-link,
  :root:not([data-mode="light"]) .informational-link:visited {
    color: var(--cds-color-neutral-white);
  }

  :root:not([data-mode="light"]) .informational-link:hover {
    color: var(--cds-color-neutral-white);
    text-decoration: underline;
  }
}
/* ─────────────────────────────────────────────────────────────────────────────
   marina-pagination — CDS v2.0.1
   Spec: .claude/marina-design/navigation/pagination.md
   Text/accent: --cds-theme-text / --cds-theme-accent (resolved by data-mode + data-accent)
   Focus ring: --cds-color-utility-wcag-focus-state (primitive — never changes with accent)
   ─────────────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════════
   Root container
   ══════════════════════════════════════════════════════════════════════════════ */

.marina-pagination {
  display: block;
}

/* ── Nav row ──────────────────────────────────────────────────────────────── */

.marina-pagination__nav {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0 var(--spacing-sm2); /* 12px outer padding */
}

/* ══════════════════════════════════════════════════════════════════════════════
   Caret buttons — prev / next / skip-first / skip-last
   ══════════════════════════════════════════════════════════════════════════════ */

.marina-pagination__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs2); /* 4px between icon and label */
  padding: var(--spacing-xs2); /* 4px — hit target around icon */
  background: none;
  border: none;
  border-radius: var(--cds-radius-small);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--cds-typography-font-size-body-regular-base);    /* 1rem */
  font-weight: var(--cds-typography-font-weight-body-regular-base); /* 400 */
  line-height: var(--cds-typography-line-height-body-regular-base); /* 1.375rem */
  color: var(--cds-theme-text);
  outline: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* ── Hover ────────────────────────────────────────────────────────────────── */

.marina-pagination__button:hover:not(.marina-pagination__button--disabled) {
  background-color: var(--cds-color-neutral-200);
}

/* ── Focus ────────────────────────────────────────────────────────────────── */

.marina-pagination__button:focus-visible {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: 2px;
  border-radius: var(--cds-radius-small);
}

/* ── Active (pressed) ─────────────────────────────────────────────────────── */

.marina-pagination__button:active:not(.marina-pagination__button--disabled) {
  background-color: var(--cds-color-neutral-300);
}

/* ── Disabled ─────────────────────────────────────────────────────────────── */

.marina-pagination__button--disabled,
.marina-pagination__button:disabled {
  color: var(--cds-color-neutral-300);
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Icon inside button ───────────────────────────────────────────────────── */

.marina-pagination__button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;  /* spec: caret button icons always 24px */
  height: 24px;
  flex-shrink: 0;
}

/* ── Text label beside icon (shown in --with-labels variant) ──────────────── */

.marina-pagination__label {
  white-space: nowrap;
}

/* Label hidden by default; shown only in --with-labels variant */
.marina-pagination__label {
  display: none;
}

.marina-pagination--with-labels .marina-pagination__label {
  display: inline;
}

/* ── Spacing between caret sections ──────────────────────────────────────── */

/* Gap between skip-first and prev (12px) */
.marina-pagination__button + .marina-pagination__button {
  margin-left: var(--spacing-sm2); /* 12px */
}

/* Reset: nav section gap; pages sit closer to prev/next */
.marina-pagination__pages {
  margin: 0 var(--spacing-sm2); /* 12px left+right between pages section and buttons */
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm1); /* 8px between page numbers / ellipsis */
}

/* ══════════════════════════════════════════════════════════════════════════════
   Page number buttons
   ══════════════════════════════════════════════════════════════════════════════ */

.marina-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: var(--spacing-xs2) var(--spacing-sm1); /* 4px 8px */
  background: none;
  border: none;
  border-bottom: var(--cds-border-sm) solid transparent; /* reserve space for active underline */
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--cds-typography-font-size-body-regular-base);    /* 1rem */
  font-weight: var(--cds-typography-font-weight-body-regular-base); /* 400 */
  line-height: var(--cds-typography-line-height-body-regular-base); /* 1.375rem */
  color: var(--cds-theme-text);
  outline: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* ── Hover ────────────────────────────────────────────────────────────────── */

.marina-pagination__page:hover:not(.marina-pagination__page--active):not(.marina-pagination__page--disabled) {
  background-color: var(--cds-color-neutral-200);
}

/* ── Focus ────────────────────────────────────────────────────────────────── */

.marina-pagination__page:focus-visible {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: 2px;
  border-radius: var(--cds-radius-small);
}

/* ── Active (pressed, not selected) ──────────────────────────────────────── */

.marina-pagination__page:active:not(.marina-pagination__page--disabled) {
  background-color: var(--cds-color-neutral-300);
}

/* ── Current page (selected) ─────────────────────────────────────────────── */

.marina-pagination__page--active {
  font-weight: var(--cds-typography-font-weight-body-bold-base); /* 700 — body bold */
  border-bottom-color: var(--cds-theme-accent);
  cursor: default;
  pointer-events: none;
}

/* ── Disabled ─────────────────────────────────────────────────────────────── */

.marina-pagination__page--disabled,
.marina-pagination__page:disabled {
  color: var(--cds-color-neutral-300);
  cursor: not-allowed;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Ellipsis (truncation marker) — non-interactive
   ══════════════════════════════════════════════════════════════════════════════ */

.marina-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0 var(--spacing-xs2);
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  color: var(--cds-theme-text);
  cursor: default;
  user-select: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════════════════════════════════════════════ */

/* --cds-theme-text and --cds-theme-accent flip automatically via tokens-semantic.css
   when [data-mode="dark"] is set on an ancestor. Only primitive-token overrides
   (disabled colors, hover backgrounds) need explicit dark rules. */

/* ── Caret button ─────────────────────────────────────────────────────────── */

:is([data-mode="dark"]) .marina-pagination__button:hover:not(.marina-pagination__button--disabled) {
  background-color: var(--cds-color-neutral-500);
}

:is([data-mode="dark"]) .marina-pagination__button:active:not(.marina-pagination__button--disabled) {
  background-color: var(--cds-color-neutral-400);
}

:is([data-mode="dark"]) .marina-pagination__button--disabled,
:is([data-mode="dark"]) .marina-pagination__button:disabled {
  color: var(--cds-color-neutral-400);
}

/* ── Page numbers ─────────────────────────────────────────────────────────── */

:is([data-mode="dark"]) .marina-pagination__page:hover:not(.marina-pagination__page--active):not(.marina-pagination__page--disabled) {
  background-color: var(--cds-color-neutral-500);
}

:is([data-mode="dark"]) .marina-pagination__page:active:not(.marina-pagination__page--disabled) {
  background-color: var(--cds-color-neutral-400);
}

:is([data-mode="dark"]) .marina-pagination__page--disabled,
:is([data-mode="dark"]) .marina-pagination__page:disabled {
  color: var(--cds-color-neutral-400);
}

/* ══════════════════════════════════════════════════════════════════════════════
   Pagination Nav Handle — compact variant
   ══════════════════════════════════════════════════════════════════════════════ */

.marina-pagination-handle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm1);
}

.marina-pagination-handle__label {
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  color: var(--cds-theme-text);
  white-space: nowrap;
}

/* Reuse button styles from nav */
.marina-pagination-handle .marina-pagination__button {
  padding: var(--spacing-xs2);
}

/* ══════════════════════════════════════════════════════════════════════════════
   Items Shown Adjuster — items-per-page select (minimal underline style)
   ══════════════════════════════════════════════════════════════════════════════ */

.marina-items-shown-adjuster {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm1); /* 8px between label and select */
}

.marina-items-shown-adjuster__label {
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  color: var(--cds-theme-text);
  white-space: nowrap;
}

/* Wrapper — relative container so caret can be absolutely positioned over select's padding */
.marina-items-shown-adjuster__select-wrapper {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.marina-items-shown-adjuster__select {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-bold-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  color: var(--cds-theme-text);
  background-color: transparent;
  background-image: linear-gradient(var(--cds-theme-text), var(--cds-theme-text));
  background-size: calc(100% - var(--spacing-md2)) 0px; /* 0px = hidden; width stops before caret column */
  background-position: bottom left;
  background-repeat: no-repeat;
  border: none;
  border-radius: 0;
  padding: 0 var(--spacing-md2) 0 0; /* right padding widens native picker to match visible area */
  cursor: pointer;
  outline: none;
}

/* Underline appears + becomes 2px thick when the dropdown is open (select is focused) */
.marina-items-shown-adjuster__select-wrapper:focus-within .marina-items-shown-adjuster__select {
  background-size: calc(100% - var(--spacing-md2)) var(--cds-border-sm);
  outline: none;
}

/* Caret — absolutely positioned over the select's right padding area so picker width covers it */
.marina-items-shown-adjuster__caret {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--cds-theme-text);
  fill: currentColor;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

/* No box outline — underline change is the open/focus indicator */

/* ══════════════════════════════════════════════════════════════════════════════
   Page Jumper — select dropdown (minimal underline style)
   ══════════════════════════════════════════════════════════════════════════════ */

.marina-page-jumper {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm1); /* 8px between label and select */
}

.marina-page-jumper__label {
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  color: var(--cds-theme-text);
  white-space: nowrap;
}

/* Wrapper — relative container so caret can be absolutely positioned over select's padding */
.marina-page-jumper__select-wrapper {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.marina-page-jumper__select {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-bold-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  color: var(--cds-theme-text);
  background-color: transparent;
  background-image: linear-gradient(var(--cds-theme-text), var(--cds-theme-text));
  background-size: calc(100% - var(--spacing-md2)) 0px; /* 0px = hidden; width stops before caret column */
  background-position: bottom left;
  background-repeat: no-repeat;
  border: none;
  border-radius: 0;
  padding: 0 var(--spacing-md2) 0 0; /* right padding widens native picker to match visible area */
  cursor: pointer;
  outline: none;
}

/* Underline appears + becomes 2px thick when the dropdown is open (select is focused) */
.marina-page-jumper__select-wrapper:focus-within .marina-page-jumper__select {
  background-size: calc(100% - var(--spacing-md2)) var(--cds-border-sm);
  outline: none;
}

/* Caret — absolutely positioned over the select's right padding area so picker width covers it */
.marina-page-jumper__caret {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--cds-theme-text);
  fill: currentColor;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

/* No box outline — underline change is the open/focus indicator */

/* ══════════════════════════════════════════════════════════════════════════════
   Items Shown Indicator — read-only display text
   ══════════════════════════════════════════════════════════════════════════════ */

.marina-items-shown-indicator {
  display: inline-flex;
  align-items: center;
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  color: var(--cds-theme-text);
  white-space: nowrap;
}

.marina-items-shown-indicator__count {
  font-weight: var(--cds-typography-font-weight-body-bold-base); /* 700 — emphasize counts */
}
/* 2026-04-07 YETENG0: MCIS-18628 - marina-pagination--centered modifier (absent from Marina CSS) */
/* marina-pagination is display:block; marina-pagination__nav is display:inline-flex.
   text-align:center on the block parent horizontally centres the inline-flex child. */
.marina-pagination--centered {
  text-align: center;
}

/* 2026-07-14 KIGAN01: MCIS-18628 - Story 3-63 AC4: item-count range text above the nav controls */
.marina-pagination__range {
  text-align: center;
  color: var(--cds-color-neutral-600, #666666);
  font-size: var(--cds-font-size-body-s, 0.875rem);
  margin-bottom: var(--spacing-sm1, 8px);
}
/* 2026-04-20 YETENG0: MCIS-18628 - Story 3-10: Open Policy feature styles */

/* ── List Page Toolbar & Filters ─────────────────────────────────────────── */

.open-policies__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--cds-spacing-400, 1rem);
}

.open-policies__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-300, 0.75rem);
  align-items: flex-end;
}

.open-policies__filter-item {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 300px;
}

/* 2026-07-21 KIGAN01: MCIS-18628 - Search button moved to its own line below the input fields,
   matching legacy's own markup (radBtnSearch sits in a separate row below the search TextBoxes,
   OpenPolicyEU.aspx:164-184). .open-policies__filters no longer carries its own margin-bottom —
   the search-form wrapper owns the spacing so the field row and button row sit close together. */
.open-policies__search-form {
  margin-bottom: var(--cds-spacing-400, 1rem);
}

.open-policies__search-error {
  margin-top: var(--cds-spacing-200, 0.5rem);
}

.open-policies__search-form .open-policies__filter-actions {
  margin-top: var(--cds-spacing-200, 0.5rem);
}

/* 2026-07-21 KIGAN01: MCIS-18628 - all 6 quick filters (now including the duplicated Policy Number/
   Policy Holder Name) sit directly against the listing with no gap — matches the other admin list
   modules' own filter-bar-close-to-table convention (e.g. oas-group-list.css's .oas-list__filter-bar,
   margin-bottom: 0) rather than this page's previous extra gap before the table.
   CSS Grid (not flex) here, with grid-template-columns set inline from the same COLUMN_WIDTHS the
   table's own columns use (OpenPolicyListPage.tsx) — each filter's width lines up with the column
   it filters instead of an unrelated fixed 160px per item. */
.open-policies__filters--tight {
  display: grid;
  align-items: end;
  gap: var(--cds-spacing-200, 0.5rem);
  margin-bottom: 0;
}

.open-policies__filters--tight .open-policies__filter-item {
  min-width: 0;
  max-width: none;
}

.open-policies__filter-actions {
  display: flex;
  gap: var(--cds-spacing-200, 0.5rem);
  align-items: flex-end;
  padding-bottom: 2px;
}

.open-policies__alert {
  margin-bottom: var(--cds-spacing-400, 1rem);
}

.open-policies__table {
  margin-top: var(--cds-spacing-200, 0.5rem);
}

/* Allow long text to wrap inside specific table cells */
.marina-data-table .open-policies__cell--wrap {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  align-items: flex-start;
}

/* ── Marina Form Section (copy-to-own from marina-blocks/marina-form-section) ── */
/* Same structure as user-form.css — every feature that uses marina-form-section owns its copy. */

.open-policy-form-page {
  max-width: 900px;
}

.marina-form-section {
  margin-bottom: var(--spacing-lg2, 2rem);
  border: 1px solid var(--cds-color-neutral-400);
  border-radius: var(--cds-border-radius-md);
  /* overflow: visible — dropdowns inside must escape the container */
}

/* Section heading: dark header bar matching other admin forms (UserFormPage, VoyageDetailPage) */
.marina-form-section__heading {
  font-family: var(--cds-typography-font-family-headline);
  font-size: 1rem;
  font-weight: 700;
  background: var(--cds-color-neutral-700);
  color: var(--cds-color-neutral-white);
  padding: var(--spacing-sm2, 0.75rem) var(--spacing-md1, 1rem);
  border-bottom: 1px solid var(--cds-color-neutral-400);
  border-left: 4px solid var(--cds-theme-accent, #C00);
  border-radius: var(--cds-border-radius-md) var(--cds-border-radius-md) 0 0;
  margin: 0;
}

/* Fields grid: 2-column layout; neutral-100 fills gap cells */
.marina-form-section__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm2, 0.75rem);
  padding: var(--spacing-md1, 1rem);
  background: var(--cds-color-neutral-100);
}

/* Field cell */
.marina-form-section__field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs2, 0.25rem);
  background: var(--cds-color-neutral-200);
  border-radius: var(--cds-border-radius-sm);
  color: var(--cds-color-neutral-black);
  min-width: 0;
}

/* Full-width field (spans both columns) */
.marina-form-section__field--full {
  grid-column: 1 / -1;
}

/* field-wrapper inherits cell background — no seam at border-radius */
.marina-form-section__field .marina-text-input__field-wrapper,
.marina-form-section__field .marina-select-choice__field-wrapper {
  background: transparent;
}

/* Constrain select-choice inside grid cells */
.marina-form-section__field .marina-select-choice,
.marina-form-section__field .marina-select-choice__field-wrapper {
  min-width: 0;
  width: 100%;
}

.marina-form-section__field .marina-select-choice__select {
  width: 100%;
  min-width: 0;
}

@media (max-width: 575px) {
  .marina-form-section__fields {
    grid-template-columns: 1fr;
  }
}

/* ── Form Page — details intro (AC5: legacy lblDetailsTitle, "Please Enter Company Details:") ── */

.open-policy-form__details-intro {
  font-weight: var(--marina-font-weight-semibold, 600);
  color: var(--marina-color-text-primary, #191919);
  margin: 0 0 var(--spacing-md1, 1rem) 0;
}

/* ── Form Page — radio groups ─────────────────────────────────────────────── */
/* Used inside marina-form-section__field--full for Policy Holder / Broker toggles */

.open-policy-form__radio-group {
  display: flex;
  gap: var(--cds-spacing-400, 1rem);
  padding: var(--spacing-sm1, 0.5rem) var(--spacing-sm2, 0.75rem);
  flex-wrap: wrap;
}

.open-policy-form__radio-label {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-100, 0.25rem);
  font-weight: normal;
  cursor: pointer;
}

/* Hint text inside labels (e.g. "select Chubb Branch first") */
.open-policy-form__hint {
  font-size: 0.8125rem;
  color: var(--cds-color-neutral-500, #666);
}

/* 2026-07-21 KIGAN01: MCIS-18628 - Story 3-78 live-testing follow-up: Japan's Policy Number field is
   3 parts (fixed "M" prefix + 4-digit + "-" + 3-digit), matching legacy's OpenPolicy.aspx layout. */
.open-policy-form__policy-num-parts {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.open-policy-form__policy-num-parts .marina-text-input {
  width: 5rem;
}
.open-policy-form__policy-num-prefix {
  font-weight: 600;
}

/* 2026-07-21 KIGAN01: MCIS-18628 - Story 3-78 live-testing follow-up: the gray-fill box previously
   stretched full-width with the "of every month" suffix squeezed inside it (select-choice's own
   .marina-select-choice__select is flex:1, filling all remaining space in that shared box). The
   gray-fill box now hugs just the select; the suffix sits outside it as plain text. */
.open-policy-form__closing-day-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm2, 0.75rem);
}
/* Found in code review: single-class selector tied in specificity with the base .marina-select-choice
   rule (also width:100%, single class) — outcome would have depended on unverified CSS bundle load
   order. Compound selector guarantees this wins regardless of order. */
.marina-select-choice.open-policy-form__closing-day-select-choice {
  width: auto;
  flex: 0 0 auto;
}
.open-policy-form__closing-day-select-choice .marina-select-choice__select {
  /* 2026-07-21 KIGAN01: MCIS-18628 - live-testing follow-up: 5.5rem only fit the short *selected*
     values (e.g. "15", "END") — the unselected placeholder text ("Select Closing Day…") was getting
     cramped/clipped against the caret. Widened to comfortably fit the placeholder. */
  width: 13rem;
  flex: 0 0 auto;
}
.open-policy-form__closing-day-suffix {
  white-space: nowrap;
}

/* ── Form Page — action buttons row ─────────────────────────────────────── */

.open-policy-form__actions {
  display: flex;
  gap: var(--spacing-sm2, 0.75rem);
  margin-top: var(--spacing-lg2, 2rem);
}

.open-policy-form__actions .marina-button {
  min-width: 120px;
}

/* 2026-04-27 YETENG0: MCIS-18628 - Story 3-9: Japan delete confirmation dialog */

.open-policies__delete-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.open-policies__delete-dialog-content {
  background: var(--cds-color-neutral-white);
  border-radius: var(--cds-border-radius-md);
  padding: var(--spacing-lg2, 2rem);
  max-width: 480px;
  width: 90%;
}

.open-policies__delete-dialog-actions {
  display: flex;
  gap: var(--cds-spacing-300, 0.75rem);
  margin-top: var(--cds-spacing-400, 1rem);
  justify-content: flex-end;
}

/* 2026-04-24 YETENG0: MCIS-18628 - Story X-13: inline style replacements */

/* Alert wrapper — replaces style={{ marginBottom: 'var(--cds-spacing-16, 1rem)' }} */
.open-policy-form__alert-wrapper {
  margin-bottom: var(--marina-spacing-md, 1rem);
}

/* Required field asterisk — replaces style={{ color: 'var(--cds-color-error, red)' }} */
.open-policy-form__required-star {
  color: var(--marina-color-feedback-error, #c00);
}
/* ── marina-checkbox ────────────────────────────────────────────── */
.marina-checkbox {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs2);
  font-family: var(--cds-typography-font-family-body-regular-base);
}

/* Label row: box + text side-by-side */
.marina-checkbox__label {
  display: inline-flex;
  align-items: flex-start; /* artboard anchors to first line of text, even when label wraps */
  gap: var(--spacing-xs2);
  cursor: pointer;
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  color: var(--cds-color-neutral-black); /* spec: label text — neutral-black */
  user-select: none;
}

.marina-checkbox__label--disabled {
  cursor: not-allowed;
  color: var(--cds-color-neutral-300); /* spec: disabled text --cds-color-neutral-300 (light mode) */
}

/* Visually hidden native input — preserves keyboard / pointer events */
.marina-checkbox__input {
  position: absolute;
  width: var(--spacing-lg1); /* 24px touch target area */
  height: var(--spacing-lg1);
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.marina-checkbox__input:disabled {
  cursor: not-allowed;
}

/* Touch target — 24×24px hover/focus background */
.marina-checkbox__artboard {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-lg1);   /* 24px touch target */
  height: var(--spacing-lg1);
  flex-shrink: 0;
  border-radius: var(--cds-radius-small);
  transition: background-color var(--cds-motion-duration-fast) var(--cds-motion-easing-out);
}

/* Visual indicator — 16×16px inside the 24×24 artboard */
.marina-checkbox__box {
  position: relative; /* establishes containing block for absolutely positioned icons */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-md1);   /* 16px indicator */
  height: var(--spacing-md1);
  border-radius: var(--cds-radius-none); /* spec: nearly square — reference uses 1px, closest token is 0 */
  border: var(--cds-border-xs) solid var(--cds-color-neutral-black); /* spec: unchecked border */
  background-color: transparent;
  box-sizing: border-box;
  transition: background-color var(--cds-motion-duration-fast) var(--cds-motion-easing-out), border-color var(--cds-motion-duration-fast) var(--cds-motion-easing-out);
}

/* Unchecked hover — fill the 24×24 artboard */
.marina-checkbox__label:hover .marina-checkbox__artboard {
  background-color: var(--cds-color-neutral-300);
}

/* Checked state — spec: accent fill via --cds-theme-accent */
.marina-checkbox__box--checked {
  background-color: var(--cds-theme-accent, var(--cds-color-neutral-black));
  border-color: var(--cds-theme-accent, var(--cds-color-neutral-black));
}

/* Indeterminate state — spec: accent fill via --cds-theme-accent */
.marina-checkbox__box--indeterminate {
  background-color: var(--cds-theme-accent, var(--cds-color-neutral-black));
  border-color: var(--cds-theme-accent, var(--cds-color-neutral-black));
}

/* Error state (unchecked) */
.marina-checkbox__box--error {
  border-color: var(--cds-color-utility-error-shade);
}

/* Error state (checked) */
.marina-checkbox__box--error.marina-checkbox__box--checked,
.marina-checkbox__box--error.marina-checkbox__box--indeterminate {
  background-color: var(--cds-color-utility-error-shade);
  border-color: var(--cds-color-utility-error-shade);
}

/* Disabled unchecked */
.marina-checkbox__box--disabled {
  border-color: var(--cds-color-neutral-400);
  background-color: transparent;
}

/* Disabled checked / indeterminate */
.marina-checkbox__box--disabled.marina-checkbox__box--checked,
.marina-checkbox__box--disabled.marina-checkbox__box--indeterminate {
  background-color: var(--cds-color-neutral-400);
  border-color: var(--cds-color-neutral-400);
}

/* Suppress hover on disabled */
.marina-checkbox__label:has(.marina-checkbox__input:disabled) .marina-checkbox__artboard {
  background-color: transparent;
}

/* Checkmark SVG icon — absolutely positioned so show/hide never shifts __box layout */
.marina-checkbox__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  pointer-events: none;
  color: var(--cds-color-neutral-white); /* spec: icon is always white on accent fill */
  width: 10px;
  height: 10px;
}

.marina-checkbox__box--checked .marina-checkbox__icon--check {
  display: block;
}

.marina-checkbox__box--indeterminate .marina-checkbox__icon--minus {
  display: block;
}

/* Focus ring — drawn on the 24×24 artboard (spec: 24×24px, 2px stroke, --cds-radius-small) */
.marina-checkbox__input:focus-visible ~ .marina-checkbox__box {
  outline: none;
}
.marina-checkbox__artboard:has(.marina-checkbox__input:focus-visible) {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: var(--cds-border-sm);
}

/* Read-only label */
.marina-checkbox__label--read-only {
  cursor: default;
}

/* Read-only unchecked — invisible box, no border */
.marina-checkbox__box--read-only {
  border-color: transparent;
  background-color: transparent;
}

/* Read-only checked / indeterminate — neutral fill, no accent */
.marina-checkbox__box--read-only.marina-checkbox__box--checked,
.marina-checkbox__box--read-only.marina-checkbox__box--indeterminate {
  background-color: var(--cds-color-neutral-black);
  border-color: var(--cds-color-neutral-black);
}

/* Read-only icon — subdued (neutral-300) */
.marina-checkbox__box--read-only .marina-checkbox__icon {
  color: var(--cds-color-neutral-300);
}

/* Suppress hover on read-only */
.marina-checkbox__label:has(.marina-checkbox__input[readonly]) .marina-checkbox__artboard {
  background-color: transparent;
}

/* ── Dark mode ───────────────────────────────────────────────────────────── */

[data-mode="dark"] .marina-checkbox__label {
  color: var(--cds-color-neutral-white);
}

[data-mode="dark"] .marina-checkbox__label--disabled {
  color: var(--cds-color-neutral-400);
}

[data-mode="dark"] .marina-checkbox__box {
  border-color: var(--cds-color-neutral-white);
}

[data-mode="dark"] .marina-checkbox__label:hover .marina-checkbox__artboard {
  background-color: var(--cds-color-neutral-300);
}

[data-mode="dark"] .marina-checkbox__box--disabled {
  border-color: var(--cds-color-neutral-400);
}

[data-mode="dark"] .marina-checkbox__box--disabled.marina-checkbox__box--checked,
[data-mode="dark"] .marina-checkbox__box--disabled.marina-checkbox__box--indeterminate {
  background-color: var(--cds-color-neutral-400);
  border-color: var(--cds-color-neutral-400);
}

/* Dark — suppress hover on disabled */
[data-mode="dark"] .marina-checkbox__label:has(.marina-checkbox__input:disabled) .marina-checkbox__artboard {
  background-color: transparent;
}

/* Dark — error text */
[data-mode="dark"] .marina-checkbox .marina-inline-alert__summary {
  color: var(--cds-color-utility-error-light-bg);
}

/* Dark — read-only checked: white fill, neutral-300 icon */
[data-mode="dark"] .marina-checkbox__box--read-only.marina-checkbox__box--checked,
[data-mode="dark"] .marina-checkbox__box--read-only.marina-checkbox__box--indeterminate {
  background-color: var(--cds-color-neutral-white);
  border-color: var(--cds-color-neutral-white);
}

[data-mode="dark"] .marina-checkbox__box--read-only .marina-checkbox__icon {
  color: var(--cds-color-neutral-300);
}

/* Dark — suppress hover on read-only */
[data-mode="dark"] .marina-checkbox__label:has(.marina-checkbox__input[readonly]) .marina-checkbox__artboard {
  background-color: transparent;
}

/* ── Label links (labelParts) ────────────────────────────────────────────── */

/* Shared appearance for link and action parts */
.marina-checkbox__label-link {
  color: var(--cds-color-primary-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.marina-checkbox__label-link:hover {
  color: var(--cds-color-supplementary-blue-500);
}

/* Action parts — reset button chrome, keep inline flow */
.marina-checkbox__label-link--action {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Focus ring on action buttons */
.marina-checkbox__label-link--action:focus-visible {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: var(--cds-border-sm);
  border-radius: var(--cds-radius-none);
}

/* ── Dark mode — label links ─────────────────────────────────────────────── */

[data-mode="dark"] .marina-checkbox__label-link {
  color: var(--cds-color-supplementary-blue-200);
}

[data-mode="dark"] .marina-checkbox__label-link:hover {
  color: var(--cds-color-supplementary-blue-300);
}

/* Help text (non-error — plain helper text) */
.marina-checkbox__help-text {
  font-family: var(--cds-typography-font-family-body-sm-regular-base);
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
  font-weight: var(--cds-typography-font-weight-body-sm-regular-base);
  line-height: var(--cds-typography-line-height-body-sm-regular-base);
  color: var(--cds-color-neutral-500);
}

/* Inline-alert used as field feedback — strip box; icon 16px; body-regular + error color */
.marina-checkbox .marina-inline-alert {
  border-color: transparent;
  background-color: transparent;
  padding: 0;
  align-items: center;
}

.marina-checkbox .marina-inline-alert__icon {
  width: var(--spacing-md1);
  height: var(--spacing-md1);
}

.marina-checkbox .marina-inline-alert__summary {
  font-family: var(--cds-typography-font-family-body-sm-regular-base);
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
  font-weight: var(--cds-typography-font-weight-body-sm-regular-base);
  line-height: var(--cds-typography-line-height-body-sm-regular-base);
  color: var(--cds-color-utility-error-shade);
}

/* ── Reduced motion ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .marina-checkbox,
  .marina-checkbox * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
.marina-text-area {
  display: block;
  font-family: var(--cds-typography-font-family-body-regular-base);
}

.marina-text-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs2);
}

/* ── Field wrapper (Gray Fill default) — border/background lives here ── */

.marina-text-area__field-wrapper {
  display: flex;
  background: var(--cds-color-neutral-200);
  border: none;
  /* spec: gray-fill default stroke is neutral-500, 1px (differs from text-input neutral-400) */
  border-bottom: var(--cds-border-xs) solid var(--cds-color-neutral-500);
  border-radius: 0;
  transition: border-color var(--cds-motion-duration-fast) var(--cds-motion-easing-out), box-shadow var(--cds-motion-duration-fast) var(--cds-motion-easing-out), outline-color var(--cds-motion-duration-fast) var(--cds-motion-easing-out);
}

/* ── Textarea (inside wrapper) ──────────────────────────────────────── */

.marina-text-area__textarea {
  flex: 1;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  /* spec: horizontal padding --spacing-sm2 (12px); vertical default 12px */
  padding: var(--spacing-sm2);
  font-family: var(--cds-typography-font-family-body-regular-base);
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  color: var(--cds-color-neutral-black);
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  resize: none;
  -webkit-appearance: none;
  appearance: none;
}

.marina-text-area__textarea::placeholder {
  color: var(--cds-color-neutral-500);
}

/* ── Resizable ───────────────────────────────────────────────────────── */
/* spec: resizable prop allows vertical resize; disabled/read-only always prevent resize */

.marina-text-area--resizable .marina-text-area__textarea {
  resize: vertical;
}

/* Combined selectors prevent specificity trap from --resizable modifier */
.marina-text-area--disabled .marina-text-area__textarea,
.marina-text-area--read-only .marina-text-area__textarea {
  resize: none;
}

/* ── Text height — fill variants use min-height; minimal uses fixed height ── */
/* spec: 68px/90px/112px heights are fixed for Minimal only;
   gray-fill + white-fill use min-height so scroll/resize still works */

.marina-text-area--lines-2 .marina-text-area__textarea { min-height: 68px; }
.marina-text-area--lines-3 .marina-text-area__textarea { min-height: 90px; }
.marina-text-area--lines-4 .marina-text-area__textarea { min-height: 112px; }

/* Minimal fixed height — scrollbar appears when content exceeds the limit */
.marina-text-area--variant-minimal.marina-text-area--lines-2 .marina-text-area__textarea {
  height: 68px;
  overflow-y: auto;
}
.marina-text-area--variant-minimal.marina-text-area--lines-3 .marina-text-area__textarea {
  height: 90px;
  overflow-y: auto;
}
.marina-text-area--variant-minimal.marina-text-area--lines-4 .marina-text-area__textarea {
  height: 112px;
  overflow-y: auto;
}

/* ── Hover — Gray Fill: color-themed bottom stroke ───────────────────── */
/* spec: hover not applied on Minimal; box-shadow avoids layout shift */

.marina-text-area--variant-gray-fill:not(.marina-text-area--filled):not(.marina-text-area--error) .marina-text-area__field-wrapper:has(textarea:hover:not(:disabled):not([readonly]):not(:focus)) {
  border-bottom-color: var(--cds-theme-accent);
  box-shadow: inset 0 -1px 0 0 var(--cds-theme-accent);
}
.marina-text-area--variant-gray-fill.marina-text-area--filled:not(.marina-text-area--error) .marina-text-area__field-wrapper:has(textarea:hover:not(:disabled):not([readonly]):not(:focus)) {
  border-bottom-color: var(--cds-theme-accent);
}

/* ── Focus state ─────────────────────────────────────────────────────── */

.marina-text-area--focus .marina-text-area__field-wrapper,
.marina-text-area__field-wrapper:focus-within {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: 0;
}

/* ── Active state ────────────────────────────────────────────────────── */

.marina-text-area--active .marina-text-area__field-wrapper {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: 0;
}

/* ── Filled state ────────────────────────────────────────────────────── */
/* spec: gray-fill + white-fill filled → neutral-black 2px stroke */

.marina-text-area--variant-gray-fill.marina-text-area--filled .marina-text-area__field-wrapper,
.marina-text-area--variant-white-fill.marina-text-area--filled .marina-text-area__field-wrapper {
  border-bottom-color: var(--cds-color-neutral-black);
  border-bottom-width: var(--cds-border-sm);
}

/* ── Error state ─────────────────────────────────────────────────────── */
/* spec: gray-fill + white-fill error → full-border error stroke */

.marina-text-area--variant-gray-fill.marina-text-area--error .marina-text-area__field-wrapper,
.marina-text-area--variant-white-fill.marina-text-area--error .marina-text-area__field-wrapper {
  border: var(--cds-border-sm) solid var(--cds-color-utility-error-shade);
}

.marina-text-area--error .marina-text-area__textarea::placeholder {
  color: var(--cds-color-utility-error-shade);
}

/* ── Disabled state ──────────────────────────────────────────────────── */

.marina-text-area--disabled .marina-text-area__field-wrapper {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Read Only state ─────────────────────────────────────────────────── */

.marina-text-area--read-only .marina-text-area__field-wrapper {
  background: var(--cds-color-neutral-200);
  border-color: transparent;
  cursor: default;
}

.marina-text-area--read-only .marina-text-area__textarea {
  cursor: default;
  color: var(--cds-color-neutral-500);
}

/* ── White Fill variant ──────────────────────────────────────────────── */

.marina-text-area--variant-white-fill .marina-text-area__field-wrapper {
  background: var(--cds-color-neutral-white);
  border: none;
  border-bottom: var(--cds-border-xs) solid var(--cds-color-neutral-400);
  border-radius: 0;
}

/* Hover — White Fill */
.marina-text-area--variant-white-fill:not(.marina-text-area--filled):not(.marina-text-area--error) .marina-text-area__field-wrapper:has(textarea:hover:not(:disabled):not([readonly]):not(:focus)) {
  border-bottom-color: var(--cds-theme-accent);
  box-shadow: inset 0 -1px 0 0 var(--cds-theme-accent);
}
.marina-text-area--variant-white-fill.marina-text-area--filled:not(.marina-text-area--error) .marina-text-area__field-wrapper:has(textarea:hover:not(:disabled):not([readonly]):not(:focus)) {
  border-bottom-color: var(--cds-theme-accent);
}

/* Error + focused: hide full error border; focus ring alone signals active field */
.marina-text-area--variant-gray-fill.marina-text-area--error.marina-text-area--focus .marina-text-area__field-wrapper,
.marina-text-area--variant-white-fill.marina-text-area--error.marina-text-area--focus .marina-text-area__field-wrapper {
  border: none;
  border-bottom: var(--cds-border-xs) solid var(--cds-color-neutral-400);
}

.marina-text-area--variant-minimal.marina-text-area--error.marina-text-area--focus .marina-text-area__field-wrapper {
  border-color: var(--cds-color-utility-wcag-focus-state);
}

/* ── Minimal variant ─────────────────────────────────────────────────── */
/* spec: full border stroke (all 4 sides), no fill, no color theme */

.marina-text-area--variant-minimal .marina-text-area__field-wrapper {
  background: transparent;
  border: var(--cds-border-sm) solid var(--cds-color-neutral-400);
  border-radius: 0;
}

/* Minimal focus: color-only change — border-width stays sm, no layout shift */
.marina-text-area--variant-minimal.marina-text-area--focus .marina-text-area__field-wrapper,
.marina-text-area--variant-minimal .marina-text-area__field-wrapper:focus-within {
  outline: none;
  border-color: var(--cds-color-utility-wcag-focus-state);
}

/* Minimal active */
.marina-text-area--variant-minimal.marina-text-area--active .marina-text-area__field-wrapper {
  outline: none;
  border-color: var(--cds-color-utility-wcag-focus-state);
}

/* Minimal filled */
.marina-text-area--variant-minimal.marina-text-area--filled .marina-text-area__field-wrapper {
  border-color: var(--cds-color-neutral-black);
}

/* Minimal error */
.marina-text-area--variant-minimal.marina-text-area--error .marina-text-area__field-wrapper {
  border-color: var(--cds-color-utility-error-shade);
}

/* ── Compact padding ─────────────────────────────────────────────────── */
/* spec: compact → 8px top/bottom (--spacing-sm1) */

.marina-text-area--padding-compact .marina-text-area__textarea {
  padding-top: var(--spacing-sm1);
  padding-bottom: var(--spacing-sm1);
}

/* ── Body-sm text size ───────────────────────────────────────────────── */

.marina-text-area--text-sm .marina-text-area__textarea,
.marina-text-area--text-sm .marina-label {
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
  font-weight: var(--cds-typography-font-weight-body-sm-regular-base);
  font-family: var(--cds-typography-font-family-body-sm-regular-base);
  line-height: var(--cds-typography-line-height-body-sm-regular-base);
}

/* ── Character count ─────────────────────────────────────────────────── */
/* spec: {current}/{max} format; body-sm; right-aligned; aria-live="polite" on element */

.marina-text-area__char-count {
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
  font-weight: var(--cds-typography-font-weight-body-sm-regular-base);
  font-family: var(--cds-typography-font-family-body-sm-regular-base);
  line-height: var(--cds-typography-line-height-body-sm-regular-base);
  color: var(--cds-color-neutral-black);
  text-align: end;
}

/* ── Feedback (error) — rendered by marina-inline-alert ─────────────── */

.marina-text-area__feedback .marina-inline-alert {
  border-color: transparent;
  background-color: transparent;
  padding: 0;
  align-items: center;
}

.marina-text-area__feedback .marina-inline-alert__icon {
  width: var(--spacing-md1);
  height: var(--spacing-md1);
}

.marina-text-area__feedback .marina-inline-alert__summary {
  font-family: var(--cds-typography-font-family-body-sm-regular-base);
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
  font-weight: var(--cds-typography-font-weight-body-sm-regular-base);
  line-height: var(--cds-typography-line-height-body-sm-regular-base);
}

.marina-text-area__feedback[type='error'] .marina-inline-alert__summary {
  color: var(--cds-color-utility-error-shade);
}

/* ── Help text ───────────────────────────────────────────────────────── */

.marina-text-area__help-text {
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
  font-weight: var(--cds-typography-font-weight-body-sm-regular-base);
  font-family: var(--cds-typography-font-family-body-sm-regular-base);
  line-height: var(--cds-typography-line-height-body-sm-regular-base);
  color: var(--cds-color-neutral-500);
}

/* ── Dark mode — appended last; activates when ancestor has [data-mode="dark"] ── */

/* Gray Fill dark — base */
:is([data-mode="dark"]) .marina-text-area--variant-gray-fill .marina-text-area__field-wrapper {
  background: var(--cds-color-neutral-500);
  border-bottom-color: var(--cds-color-neutral-400);
}

/* Gray Fill dark filled */
:is([data-mode="dark"]) .marina-text-area--variant-gray-fill.marina-text-area--filled .marina-text-area__field-wrapper {
  border-bottom-color: var(--cds-color-neutral-200);
  border-bottom-width: var(--cds-border-sm);
}

/* White/Black Fill dark */
:is([data-mode="dark"]) .marina-text-area--variant-white-fill .marina-text-area__field-wrapper {
  background: var(--cds-color-neutral-black);
  border-bottom-color: var(--cds-color-neutral-300);
}

/* Minimal dark */
:is([data-mode="dark"]) .marina-text-area--variant-minimal .marina-text-area__field-wrapper {
  background: var(--cds-color-neutral-black);
  border-color: var(--cds-color-neutral-300);
}

/* Minimal filled dark */
:is([data-mode="dark"]) .marina-text-area--variant-minimal.marina-text-area--filled .marina-text-area__field-wrapper {
  border-color: var(--cds-color-neutral-200);
}

/* Dark — active/focus: all variants get focus-state outline */
:is([data-mode="dark"]) .marina-text-area--focus .marina-text-area__field-wrapper,
:is([data-mode="dark"]) .marina-text-area__field-wrapper:focus-within,
:is([data-mode="dark"]) .marina-text-area--active .marina-text-area__field-wrapper {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
}

/* spec: Gray Fill dark active → double stroke: neutral-white inset 2px + wcag-focus-state outline 2px */
:is([data-mode="dark"]) .marina-text-area--variant-gray-fill.marina-text-area--focus .marina-text-area__field-wrapper,
:is([data-mode="dark"]) .marina-text-area--variant-gray-fill .marina-text-area__field-wrapper:focus-within,
:is([data-mode="dark"]) .marina-text-area--variant-gray-fill.marina-text-area--active .marina-text-area__field-wrapper {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  box-shadow: inset 0 0 0 var(--cds-border-sm) var(--cds-color-neutral-white);
}

/* Minimal dark — focus/active: no outline; border-color change only */
:is([data-mode="dark"]) .marina-text-area--variant-minimal.marina-text-area--focus .marina-text-area__field-wrapper,
:is([data-mode="dark"]) .marina-text-area--variant-minimal .marina-text-area__field-wrapper:focus-within,
:is([data-mode="dark"]) .marina-text-area--variant-minimal.marina-text-area--active .marina-text-area__field-wrapper {
  outline: none;
  border-color: var(--cds-color-utility-wcag-focus-state);
}

/* Dark — error */
:is([data-mode="dark"]) .marina-text-area--variant-gray-fill.marina-text-area--error .marina-text-area__field-wrapper,
:is([data-mode="dark"]) .marina-text-area--variant-white-fill.marina-text-area--error .marina-text-area__field-wrapper {
  border: var(--cds-border-sm) solid var(--cds-color-utility-error-shade);
}

:is([data-mode="dark"]) .marina-text-area--variant-minimal.marina-text-area--error .marina-text-area__field-wrapper {
  border-color: var(--cds-color-utility-error-shade);
}

/* Dark — read-only */
:is([data-mode="dark"]) .marina-text-area--read-only .marina-text-area__field-wrapper {
  background: var(--cds-color-neutral-500);
}

/* Dark — typography */
:is([data-mode="dark"]) .marina-text-area__textarea {
  color: var(--cds-color-neutral-white);
}

:is([data-mode="dark"]) .marina-text-area__textarea::placeholder {
  color: var(--cds-color-neutral-200);
}

:is([data-mode="dark"]) .marina-text-area--error .marina-text-area__textarea::placeholder {
  color: var(--cds-color-utility-error-shade);
}

:is([data-mode="dark"]) .marina-text-area__help-text,
:is([data-mode="dark"]) .marina-text-area__char-count {
  color: var(--cds-color-neutral-white);
}

/* ── Reduced motion ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .marina-text-area,
  .marina-text-area * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* ── marina-inline-alert — Light DOM styles ────────────────────── */
.marina-internal-alert {
  display: contents;
}

.marina-inline-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm1);
  padding: var(--spacing-sm2);
  border-radius: var(--cds-radius-base);
  border: var(--cds-border-xs) solid transparent;
  background-color: var(--cds-color-neutral-white);
  box-sizing: border-box;
}

/* ── Alert types ──────────────────────────────────────────────── */

/* Informational — no confirmed neutral-600 token; use neutral-500 as closest verified dark neutral */
.marina-inline-alert--informational {
  border-color: var(--cds-color-neutral-500);
  color: var(--cds-color-neutral-black);
}

.marina-inline-alert--informational .marina-inline-alert__icon {
  color: var(--cds-color-neutral-black);
}

.marina-inline-alert--error {
  border-color: var(--cds-color-utility-error-shade);
  color: var(--cds-color-neutral-black);
}

.marina-inline-alert--error .marina-inline-alert__icon {
  color: var(--cds-color-utility-error-shade);
}

.marina-inline-alert--success {
  border-color: var(--cds-color-utility-success-shade);
  color: var(--cds-color-neutral-black);
}

.marina-inline-alert--success .marina-inline-alert__icon {
  color: var(--cds-color-utility-success-shade);
}

.marina-inline-alert--caution {
  border-color: var(--cds-color-utility-caution-shade);
  color: var(--cds-color-neutral-black);
}

.marina-inline-alert--caution .marina-inline-alert__icon {
  color: var(--cds-color-utility-caution-shade);
}

/* ── Icon wrapper ─────────────────────────────────────────────── */
.marina-inline-alert__icon-wrapper {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding-top: 0;
}

.marina-inline-alert__icon {
  display: block;
  flex-shrink: 0;
  fill: currentColor;
}

/* ── Body ─────────────────────────────────────────────────────── */
.marina-inline-alert__body {
  flex: 1;
  min-width: 0;
}

.marina-inline-alert__summary {
  display: inline;
  font-family: var(--cds-typography-font-family-body-bold-base);
  font-size: var(--cds-typography-font-size-body-bold-base);
  font-weight: var(--cds-typography-font-weight-body-bold-base);
  line-height: var(--cds-typography-line-height-body-bold-base);
  color: var(--cds-color-neutral-black);
}

.marina-inline-alert__message {
  display: inline;
  font-family: var(--cds-typography-font-family-body-regular-base);
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  color: var(--cds-color-neutral-black);
}

.marina-inline-alert__summary + .marina-inline-alert__message {
  margin-inline-start: 0.25em;
}

/* Children content (e.g., <ul>, <p>) should appear below summary/message */
.marina-inline-alert__body
  > :not(.marina-inline-alert__summary):not(.marina-inline-alert__message) {
  display: block;
  margin-top: var(--spacing-sm1);
}

/* ── Close button ─────────────────────────────────────────────── */
.marina-inline-alert__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--cds-color-neutral-black);
  border-radius: var(--cds-radius-small);
  margin-inline-start: auto;
}

.marina-inline-alert__close svg {
  fill: currentColor;
}

.marina-inline-alert__close:hover {
  background-color: var(--cds-color-utility-hover-white);
}

.marina-inline-alert__close:hover {
  color: var(--cds-color-neutral-500);
}

.marina-inline-alert__close:focus-visible {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: var(--cds-border-sm);
}

/* ── Dark mode ─────────────────────────────────────────────────── */

:is([data-mode='dark']) .marina-inline-alert {
  background-color: var(--cds-color-neutral-black);
}

:is([data-mode='dark']) .marina-inline-alert--informational {
  border-color: var(--cds-color-neutral-300);
  color: var(--cds-color-neutral-white);
}

:is([data-mode='dark'])
  .marina-inline-alert--informational
  .marina-inline-alert__icon {
  color: var(--cds-color-neutral-white);
}

:is([data-mode='dark']) .marina-inline-alert--error,
:is([data-mode='dark']) .marina-inline-alert--success,
:is([data-mode='dark']) .marina-inline-alert--caution {
  color: var(--cds-color-neutral-white);
}

:is([data-mode='dark']) .marina-inline-alert__summary,
:is([data-mode='dark']) .marina-inline-alert__message {
  color: var(--cds-color-neutral-white);
}

:is([data-mode='dark']) .marina-inline-alert__close {
  color: var(--cds-color-neutral-white);
}

:is([data-mode='dark']) .marina-inline-alert__close:hover {
  background-color: var(--cds-color-utility-hover-white);
}
/* ── marina-tooltip — Light DOM styles ────────────────────────── */
marina-tooltip,
.marina-internal-tooltip {
  display: contents;
}

.marina-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* ── Trigger button (used by marina-internal-tooltip) ─────────── */
.marina-tooltip__trigger {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-md1);
  height: var(--spacing-md1);
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  box-shadow: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  line-height: 1;
  flex-shrink: 0;
  box-sizing: content-box;
}

.marina-tooltip__trigger svg {
  display: block;
}

.marina-tooltip__trigger:focus-visible {
  outline: var(--cds-border-sm) solid var(--cds-color-primary-blue);
  outline-offset: var(--cds-border-sm);
  border-radius: var(--cds-radius-small);
}

/* ── Bubble ────────────────────────────────────────────────────── */
.marina-tooltip__bubble {
  position: absolute;
  z-index: 100;
  display: none;
  flex-direction: column;
  gap: 0;
  padding: var(--spacing-sm2);
  box-shadow: var(--cds-shadow-m2);
  pointer-events: none;
  box-sizing: border-box;
  white-space: normal;
  /* Expand to fit content on one line, bounded by max-width.
     Without this, flex-direction:column collapses to the min-content width
     (longest single word), making the bubble too narrow. */
  width: max-content;
}

.marina-tooltip__bubble--visible {
  display: flex;
}

/* ── Text size / max-width ─────────────────────────────────────── */
.marina-tooltip__bubble--body-regular {
  max-width: 300px;
}

.marina-tooltip__bubble--body-sm {
  max-width: 160px;
}

/* ── Style variants ────────────────────────────────────────────── */
.marina-tooltip__bubble--stroke {
  background-color: var(--cds-color-neutral-white);
  border: var(--cds-border-xs) solid var(--cds-color-neutral-black);
  color: var(--cds-color-neutral-black);
}

.marina-tooltip__bubble--fill {
  background-color: var(--cds-color-neutral-black);
  border: none;
  color: var(--cds-color-neutral-white);
}

/* ── Text ──────────────────────────────────────────────────────── */
.marina-tooltip__text {
  display: block;
}

.marina-tooltip__bubble--body-regular .marina-tooltip__text {
  font-family: var(--cds-typography-font-family-body-regular-base);
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
}

.marina-tooltip__bubble--body-sm .marina-tooltip__text {
  font-family: var(--cds-typography-font-family-body-sm-regular-base);
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
  font-weight: var(--cds-typography-font-weight-body-sm-regular-base);
  line-height: var(--cds-typography-line-height-body-sm-regular-base);
}

/* ── Directions — bubble positioning ──────────────────────────── */
/*
  Bubble is offset -4px so the caret (centered on the 16px trigger)
  sits at 12px from the bubble's left edge — matching the DS spec.
  Gap from trigger: --spacing-sm1 (8px) per spec.
  Directions per spec: below-right, below-left, above-right, above-left.
*/

/* below-right: bubble below trigger, expanding right */
.marina-tooltip__bubble--below-right {
  top: calc(100% + var(--spacing-sm1));
  left: -4px;
}

/* below-left: bubble below trigger, expanding left */
.marina-tooltip__bubble--below-left {
  top: calc(100% + var(--spacing-sm1));
  right: -4px;
}

/* above-right: bubble above trigger, expanding right */
.marina-tooltip__bubble--above-right {
  bottom: calc(100% + var(--spacing-sm1));
  left: -4px;
}

/* above-left: bubble above trigger, expanding left */
.marina-tooltip__bubble--above-left {
  bottom: calc(100% + var(--spacing-sm1));
  right: -4px;
}

/* ── Caret child element (retired) ────────────────────────────── */
/* Caret is now rendered via ::before / ::after on the bubble.
   The <span class="marina-tooltip__caret"> element remains in the DOM
   for backwards compatibility but is visually hidden. */
.marina-tooltip__caret {
  display: none;
}

/* ── Caret — two-triangle technique ───────────────────────────── */
/*
  Stroke variant: ::before (outer black) + ::after (inner white)
    ::before base at outer border (top: -8px → base at y=0)
    ::after  base 1px inside border (top: -7px → base at y=1) — the inner
             white overlaps the 1px border edge, eliminating the seam gap.
    Fill variant: ::before only (solid black, matches fill background).

  Horizontal alignment:
    caret_center = trigger_half + 4px (compensates for bubble's ±4px offset)
    outer (8px sides): left = trigger_width/2 + 4 − 8 = trigger_width/2 − 4
    inner (7px sides): left = trigger_width/2 + 4 − 7 = trigger_width/2 − 3
*/

/* ─── BELOW (▲ pointing up) ──────────────────────────────────── */

/* Stroke outer black triangle — base at outer top border */
.marina-tooltip__bubble--stroke.marina-tooltip__bubble--below-right::before,
.marina-tooltip__bubble--stroke.marina-tooltip__bubble--below-left::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--cds-color-neutral-black);
  top: -8px; /* base at y=0 — outer top border */
}

/* Stroke inner white triangle — base 1px inside border, closes the seam */
.marina-tooltip__bubble--stroke.marina-tooltip__bubble--below-right::after,
.marina-tooltip__bubble--stroke.marina-tooltip__bubble--below-left::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 8px solid var(--cds-color-neutral-white);
  top: -7px; /* base at y=1 — 1px inside the bubble border, no seam */
}

/* Fill: single black triangle (no border, seamless) */
.marina-tooltip__bubble--fill.marina-tooltip__bubble--below-right::before,
.marina-tooltip__bubble--fill.marina-tooltip__bubble--below-left::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--cds-color-neutral-black);
  top: -8px;
}

/* ─── ABOVE (▽ pointing down) ────────────────────────────────── */

/* Stroke outer black triangle */
.marina-tooltip__bubble--stroke.marina-tooltip__bubble--above-right::before,
.marina-tooltip__bubble--stroke.marina-tooltip__bubble--above-left::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--cds-color-neutral-black);
  bottom: -8px;
  top: auto;
}

/* Stroke inner white triangle */
.marina-tooltip__bubble--stroke.marina-tooltip__bubble--above-right::after,
.marina-tooltip__bubble--stroke.marina-tooltip__bubble--above-left::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid var(--cds-color-neutral-white);
  bottom: -7px;
  top: auto;
}

/* Fill: single black triangle above */
.marina-tooltip__bubble--fill.marina-tooltip__bubble--above-right::before,
.marina-tooltip__bubble--fill.marina-tooltip__bubble--above-left::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--cds-color-neutral-black);
  bottom: -8px;
  top: auto;
}

/* ── Horizontal caret positioning ─────────────────────────────── */
/*
  For -right variants (bubble left: -4px): use `left`
  For -left  variants (bubble right: -4px): use `right`
*/
.marina-tooltip__bubble--below-right::before,
.marina-tooltip__bubble--above-right::before {
  left: calc(var(--marina-tooltip-trigger-width, 16px) / 2 - 4px);
}
.marina-tooltip__bubble--below-right::after,
.marina-tooltip__bubble--above-right::after {
  left: calc(var(--marina-tooltip-trigger-width, 16px) / 2 - 3px);
}

.marina-tooltip__bubble--below-left::before,
.marina-tooltip__bubble--above-left::before {
  right: calc(var(--marina-tooltip-trigger-width, 16px) / 2 - 4px);
}
.marina-tooltip__bubble--below-left::after,
.marina-tooltip__bubble--above-left::after {
  right: calc(var(--marina-tooltip-trigger-width, 16px) / 2 - 3px);
}
/* ── marina-internal-label — shared label row styles ───────────────────── */
.marina-internal-label {
  display: contents;
}

.marina-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs2);
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-regular-base);
  font-family: var(--cds-typography-font-family-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  color: var(--cds-color-neutral-black);
}

.marina-label__required {
  color: var(--cds-color-neutral-black);
}

/* ── Dark mode ─────────────────────────────────────────────────────────── */
:is([data-mode="dark"]) .marina-label,
:is([data-mode="dark"]) .marina-label__required {
  color: var(--cds-color-neutral-white);
}
/* marina-date-picker — light mode styles (CHUBB-14a)
 * Dark mode: CHUBB-14b
 * Month/year views: CHUBB-14b
 * Spec: .claude/marina-design/actions-and-inputs/date-picker.md
 */

/* ── Container ─────────────────────────────────────────────────────────────── */

.marina-date-picker {
  background: var(--cds-color-neutral-white);
  border: 1px solid var(--cds-color-neutral-300);
  border-radius: var(--cds-radius-small);
  box-shadow: var(--cds-shadow-m2);
  min-width: 322px;
  padding: var(--spacing-sm2);
  box-sizing: border-box;
  display: inline-block;
  font-family: var(--cds-typography-font-family-body-regular-base);
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
}

/* Month/year view size modifiers */

.marina-date-picker--month-view {
  min-width: 158px;
  width: 322px;
}

.marina-date-picker--year-view {
  min-width: 191px;
  width: 322px;
}

/* ── Header ────────────────────────────────────────────────────────────────── */

.marina-date-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: calc(-1 * var(--spacing-sm2));
  margin-right: calc(-1 * var(--spacing-sm2));
  padding-left: var(--spacing-sm2);
  padding-right: var(--spacing-sm2);
  padding-bottom: var(--spacing-sm2);
  margin-bottom: var(--spacing-sm2);
  border-bottom: var(--cds-border-xs) solid var(--cds-color-neutral-300);
}

.marina-date-picker__header-labels {
  display: flex;
  gap: var(--spacing-xs2);
  align-items: center;
}

/* Month/year selector text — Body/Body bold */
.marina-date-picker__month-trigger,
.marina-date-picker__year-trigger {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: var(--cds-typography-font-weight-body-bold-base);
  color: var(--cds-color-neutral-black);
  border-radius: var(--cds-radius-small);
  text-decoration: none;
}

.marina-date-picker__month-trigger:hover,
.marina-date-picker__year-trigger:hover {
  text-decoration: underline;
  color: var(--cds-color-neutral-black);
}

.marina-date-picker__month-trigger:focus-visible,
.marina-date-picker__year-trigger:focus-visible {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: var(--cds-border-sm);
  color: var(--cds-color-neutral-black);
}

/* Year range label in year picker header */
.marina-date-picker__year-range-label {
  font-weight: bold;
  color: var(--cds-color-neutral-black);
}

/* ── Navigator buttons ─────────────────────────────────────────────────────── */

.marina-date-picker__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-lg1);
  height: var(--spacing-lg1);
  padding: var(--spacing-xs2);
  background: var(--cds-color-neutral-white);
  border: none;
  border-radius: var(--cds-radius-small);
  cursor: pointer;
  color: var(--cds-color-neutral-black);
  box-sizing: border-box;
}

.marina-date-picker__nav-btn:hover:not(:disabled) {
  background: var(--cds-color-neutral-200);
}

.marina-date-picker__nav-btn:focus-visible {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: var(--cds-border-sm);
}

.marina-date-picker__nav-btn:disabled {
  color: var(--cds-color-neutral-300);
  cursor: default;
}

/* ── Grid: weekday header + day cells ──────────────────────────────────────── */

.marina-date-picker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 4px;
}

/* Row wrappers carry ARIA role="row" but must not affect the 7-column grid layout */
.marina-date-picker__grid-row {
  display: contents;
}

.marina-date-picker__weekday {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  justify-self: center;
  height: 44px;
  color: var(--cds-color-neutral-black);
  font-size: inherit;
  box-sizing: border-box;
}

/* ── Day cells ─────────────────────────────────────────────────────────────── */

.marina-date-picker__day-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  justify-self: center;
  height: 34px;
  background: var(--cds-color-neutral-white);
  border: none;
  border-radius: var(--cds-radius-small);
  cursor: pointer;
  color: var(--cds-color-neutral-black);
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  box-sizing: border-box;
  position: relative;
}

/* Today indicator — 1px stroke (default, not selected) */
.marina-date-picker__day-cell--today:not(.marina-date-picker__day-cell--selected) {
  box-shadow: inset 0 0 0 1px var(--cds-color-neutral-500);
}

/* Hover (not selected, not disabled) */
.marina-date-picker__day-cell:hover:not(.marina-date-picker__day-cell--selected):not(.marina-date-picker__day-cell--disabled):not(:disabled) {
  background: var(--cds-color-neutral-200);
}

/* Today + hover keeps indicator */
.marina-date-picker__day-cell--today:hover:not(.marina-date-picker__day-cell--selected):not(.marina-date-picker__day-cell--disabled):not(:disabled) {
  background: var(--cds-color-neutral-200);
  box-shadow: inset 0 0 0 1px var(--cds-color-neutral-500);
}

/* Focus */
.marina-date-picker__day-cell:focus-visible {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: var(--cds-border-sm);
  position: relative;
  z-index: 1;
}

/* Selected */
.marina-date-picker__day-cell--selected {
  background: var(--cds-color-neutral-500);
  color: var(--cds-color-neutral-white);
}

.marina-date-picker__day-cell--selected:hover {
  background: var(--cds-color-neutral-500);
}

/* Disabled */
.marina-date-picker__day-cell--disabled,
.marina-date-picker__day-cell:disabled {
  color: var(--cds-color-neutral-300);
  background: var(--cds-color-neutral-white);
  cursor: default;
  pointer-events: none;
}

/* Today + disabled keeps indicator */
.marina-date-picker__day-cell--today.marina-date-picker__day-cell--disabled,
.marina-date-picker__day-cell--today:disabled {
  box-shadow: inset 0 0 0 1px var(--cds-color-neutral-500);
}

/* Empty cells (padding around month) */
.marina-date-picker__day-cell--empty {
  background: none;
  cursor: default;
  pointer-events: none;
}

/* Range selection — start/end anchors: same fill as selected */
.marina-date-picker__day-cell--range-start:not(.marina-date-picker__day-cell--disabled),
.marina-date-picker__day-cell--range-end:not(.marina-date-picker__day-cell--disabled) {
  background: var(--cds-color-neutral-500);
  color: var(--cds-color-neutral-white);
  border-radius: var(--cds-radius-small);
}

/* Range selection — intermediate cells */
.marina-date-picker__day-cell--in-range:not(.marina-date-picker__day-cell--disabled) {
  background: var(--cds-color-neutral-500);
  color: var(--cds-color-neutral-white);
  border-radius: var(--cds-radius-small);
}

/* ── Month grid ─────────────────────────────────────────────────────────────── */

.marina-date-picker__month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.marina-date-picker__month-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  background: var(--cds-color-neutral-white);
  border: none;
  border-radius: var(--cds-radius-small);
  cursor: pointer;
  color: var(--cds-color-neutral-black);
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  box-sizing: border-box;
  padding: 0 var(--spacing-sm1);
}

.marina-date-picker__month-cell:hover:not(.marina-date-picker__month-cell--disabled):not(:disabled) {
  background: var(--cds-color-neutral-200);
}

.marina-date-picker__month-cell:focus-visible {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: var(--cds-border-sm);
  position: relative;
  z-index: 1;
}

.marina-date-picker__month-cell--selected {
  background: var(--cds-color-neutral-500);
  color: var(--cds-color-neutral-white);
}

.marina-date-picker__month-cell--selected:hover {
  background: var(--cds-color-neutral-500);
}

.marina-date-picker__month-cell--disabled,
.marina-date-picker__month-cell:disabled {
  color: var(--cds-color-neutral-300);
  background: var(--cds-color-neutral-white);
  cursor: default;
  pointer-events: none;
}

/* ── Year grid ──────────────────────────────────────────────────────────────── */

.marina-date-picker__year-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.marina-date-picker__year-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  background: var(--cds-color-neutral-white);
  border: none;
  border-radius: var(--cds-radius-small);
  cursor: pointer;
  color: var(--cds-color-neutral-black);
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  box-sizing: border-box;
  padding: 0 var(--spacing-sm1);
}

.marina-date-picker__year-cell:hover:not(.marina-date-picker__year-cell--disabled):not(:disabled) {
  background: var(--cds-color-neutral-200);
}

.marina-date-picker__year-cell:focus-visible {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: var(--cds-border-sm);
  position: relative;
  z-index: 1;
}

.marina-date-picker__year-cell--selected {
  background: var(--cds-color-neutral-500);
  color: var(--cds-color-neutral-white);
}

.marina-date-picker__year-cell--selected:hover {
  background: var(--cds-color-neutral-500);
}

.marina-date-picker__year-cell--disabled,
.marina-date-picker__year-cell:disabled {
  color: var(--cds-color-neutral-300);
  background: var(--cds-color-neutral-white);
  cursor: default;
  pointer-events: none;
}

/* ── Dark mode ─────────────────────────────────────────────────────────────── */

[data-mode="dark"] .marina-date-picker {
  background: var(--cds-color-neutral-500);
  border-color: var(--cds-color-neutral-300);
}

/* Header separator — dark mode */
[data-mode="dark"] .marina-date-picker__header {
  border-bottom-color: var(--cds-color-neutral-400);
}

/* Header labels — dark mode (neutral-600 does not exist; use neutral-white per hover spec) */
[data-mode="dark"] .marina-date-picker__month-trigger,
[data-mode="dark"] .marina-date-picker__year-trigger {
  color: var(--cds-color-neutral-white);
}

[data-mode="dark"] .marina-date-picker__month-trigger:hover,
[data-mode="dark"] .marina-date-picker__year-trigger:hover {
  color: var(--cds-color-neutral-white);
  text-decoration: underline;
}

[data-mode="dark"] .marina-date-picker__month-trigger:focus-visible,
[data-mode="dark"] .marina-date-picker__year-trigger:focus-visible {
  color: var(--cds-color-neutral-white);
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: var(--cds-border-sm);
}

[data-mode="dark"] .marina-date-picker__year-range-label {
  color: var(--cds-color-neutral-white);
}

/* Navigators — dark mode */
[data-mode="dark"] .marina-date-picker__nav-btn {
  background: var(--cds-color-neutral-500);
  color: var(--cds-color-neutral-white);
}

[data-mode="dark"] .marina-date-picker__nav-btn:hover:not(:disabled) {
  background: var(--cds-color-neutral-400);
}

[data-mode="dark"] .marina-date-picker__nav-btn:focus-visible {
  outline: var(--cds-border-sm) solid var(--cds-color-neutral-white);
  outline-offset: var(--cds-border-sm);
  box-shadow: 0 0 0 4px var(--cds-color-utility-wcag-focus-state);
}

[data-mode="dark"] .marina-date-picker__nav-btn:disabled {
  background: var(--cds-color-neutral-500);
  color: var(--cds-color-neutral-300);
}

/* Weekdays — dark mode */
[data-mode="dark"] .marina-date-picker__weekday {
  color: var(--cds-color-neutral-white);
}

/* Day cells — dark mode */
[data-mode="dark"] .marina-date-picker__day-cell {
  background: var(--cds-color-neutral-500);
  color: var(--cds-color-neutral-white);
}

[data-mode="dark"] .marina-date-picker__day-cell--today:not(.marina-date-picker__day-cell--selected) {
  box-shadow: inset 0 0 0 1px var(--cds-color-neutral-200);
}

[data-mode="dark"] .marina-date-picker__day-cell:hover:not(.marina-date-picker__day-cell--selected):not(.marina-date-picker__day-cell--disabled):not(:disabled) {
  background: var(--cds-color-neutral-400);
}

[data-mode="dark"] .marina-date-picker__day-cell--today:hover:not(.marina-date-picker__day-cell--selected):not(.marina-date-picker__day-cell--disabled):not(:disabled) {
  background: var(--cds-color-neutral-400);
  box-shadow: inset 0 0 0 1px var(--cds-color-neutral-200);
}

[data-mode="dark"] .marina-date-picker__day-cell:focus-visible {
  outline: var(--cds-border-sm) solid var(--cds-color-neutral-white);
  outline-offset: var(--cds-border-sm);
  box-shadow: 0 0 0 4px var(--cds-color-utility-wcag-focus-state);
}

[data-mode="dark"] .marina-date-picker__day-cell--selected {
  background: var(--cds-color-neutral-white);
  color: var(--cds-color-neutral-black);
}

[data-mode="dark"] .marina-date-picker__day-cell--selected:hover {
  background: var(--cds-color-neutral-white);
}

[data-mode="dark"] .marina-date-picker__day-cell--disabled,
[data-mode="dark"] .marina-date-picker__day-cell:disabled {
  background: var(--cds-color-neutral-500);
  color: var(--cds-color-neutral-300);
}

[data-mode="dark"] .marina-date-picker__day-cell--today.marina-date-picker__day-cell--disabled,
[data-mode="dark"] .marina-date-picker__day-cell--today:disabled {
  box-shadow: inset 0 0 0 1px var(--cds-color-neutral-300);
}

[data-mode="dark"] .marina-date-picker__day-cell--empty {
  background: none;
}

/* Month cells — dark mode */
[data-mode="dark"] .marina-date-picker__month-cell {
  background: var(--cds-color-neutral-500);
  color: var(--cds-color-neutral-white);
}

[data-mode="dark"] .marina-date-picker__month-cell:hover:not(.marina-date-picker__month-cell--disabled):not(:disabled) {
  background: var(--cds-color-neutral-400);
}

[data-mode="dark"] .marina-date-picker__month-cell:focus-visible {
  outline: var(--cds-border-sm) solid var(--cds-color-neutral-white);
  outline-offset: var(--cds-border-sm);
  box-shadow: 0 0 0 4px var(--cds-color-utility-wcag-focus-state);
}

[data-mode="dark"] .marina-date-picker__month-cell--selected {
  background: var(--cds-color-neutral-white);
  color: var(--cds-color-neutral-black);
}

[data-mode="dark"] .marina-date-picker__month-cell--selected:hover {
  background: var(--cds-color-neutral-white);
}

[data-mode="dark"] .marina-date-picker__month-cell--disabled,
[data-mode="dark"] .marina-date-picker__month-cell:disabled {
  background: var(--cds-color-neutral-500);
  color: var(--cds-color-neutral-300);
}

/* Year cells — dark mode */
[data-mode="dark"] .marina-date-picker__year-cell {
  background: var(--cds-color-neutral-500);
  color: var(--cds-color-neutral-white);
}

[data-mode="dark"] .marina-date-picker__year-cell:hover:not(.marina-date-picker__year-cell--disabled):not(:disabled) {
  background: var(--cds-color-neutral-400);
}

[data-mode="dark"] .marina-date-picker__year-cell:focus-visible {
  outline: var(--cds-border-sm) solid var(--cds-color-neutral-white);
  outline-offset: var(--cds-border-sm);
  box-shadow: 0 0 0 4px var(--cds-color-utility-wcag-focus-state);
}

[data-mode="dark"] .marina-date-picker__year-cell--selected {
  background: var(--cds-color-neutral-white);
  color: var(--cds-color-neutral-black);
}

[data-mode="dark"] .marina-date-picker__year-cell--selected:hover {
  background: var(--cds-color-neutral-white);
}

[data-mode="dark"] .marina-date-picker__year-cell--disabled,
[data-mode="dark"] .marina-date-picker__year-cell:disabled {
  background: var(--cds-color-neutral-500);
  color: var(--cds-color-neutral-300);
}

/* Range — dark mode: start/end anchors */
[data-mode="dark"] .marina-date-picker__day-cell--range-start:not(.marina-date-picker__day-cell--disabled),
[data-mode="dark"] .marina-date-picker__day-cell--range-end:not(.marina-date-picker__day-cell--disabled) {
  background: var(--cds-color-neutral-white);
  color: var(--cds-color-neutral-black);
  border-radius: var(--cds-radius-small);
}

/* Range — dark mode: intermediate cells */
[data-mode="dark"] .marina-date-picker__day-cell--in-range:not(.marina-date-picker__day-cell--disabled) {
  background: var(--cds-color-neutral-white);
  color: var(--cds-color-neutral-black);
  border-radius: var(--cds-radius-small);
}

/* ── Picker-level disabled ──────────────────────────────────────────────────── */
/* When the entire picker has disabled=true, grey out all interactive elements.
   Zag only marks out-of-month padding cells as cell-disabled, so we use a
   container class to mute all content visually. */

.marina-date-picker--disabled {
  pointer-events: none;
}

.marina-date-picker--disabled .marina-date-picker__day-cell:not(.marina-date-picker__day-cell--selected),
.marina-date-picker--disabled .marina-date-picker__month-cell:not(.marina-date-picker__month-cell--selected),
.marina-date-picker--disabled .marina-date-picker__year-cell:not(.marina-date-picker__year-cell--selected),
.marina-date-picker--disabled .marina-date-picker__month-trigger,
.marina-date-picker--disabled .marina-date-picker__year-trigger,
.marina-date-picker--disabled .marina-date-picker__nav-btn {
  color: var(--cds-color-neutral-300);
  background: var(--cds-color-neutral-white);
  box-shadow: none;
}

/* Dark mode picker-level disabled */
[data-mode="dark"] .marina-date-picker--disabled .marina-date-picker__day-cell:not(.marina-date-picker__day-cell--selected),
[data-mode="dark"] .marina-date-picker--disabled .marina-date-picker__month-cell:not(.marina-date-picker__month-cell--selected),
[data-mode="dark"] .marina-date-picker--disabled .marina-date-picker__year-cell:not(.marina-date-picker__year-cell--selected),
[data-mode="dark"] .marina-date-picker--disabled .marina-date-picker__month-trigger,
[data-mode="dark"] .marina-date-picker--disabled .marina-date-picker__year-trigger,
[data-mode="dark"] .marina-date-picker--disabled .marina-date-picker__nav-btn {
  color: var(--cds-color-neutral-300);
  background: var(--cds-color-neutral-500);
  box-shadow: none;
}
.marina-date-input {
  display: block;
  position: relative;
  font-family: var(--cds-typography-font-family-body-regular-base);
  /* Component-scoped token for the dark-mode double-stroke effect.
     0 values are CSS-spec unitless zeros; color/dimension are fully tokenized. */
  --marina-date-input-dark-double-stroke: 0 var(--cds-border-sm) 0 0
    var(--cds-color-utility-wcag-focus-state);
}

.marina-date-input {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs2);
}

/* ── Control (Default / Gray Fill) ───────────────────────────────────── */

.marina-date-input__field-wrapper {
  display: flex;
  align-items: center;
  background: var(--cds-color-neutral-200);
  border: none;
  border-bottom: var(--cds-border-xs) solid var(--cds-color-neutral-400);
  border-radius: 0;
  min-height: 44px;
  transition: border-color var(--cds-motion-duration-fast)
      var(--cds-motion-easing-out),
    box-shadow var(--cds-motion-duration-fast) var(--cds-motion-easing-out);
}

/* Filled — Gray Fill: neutral-black 2px stroke (matches text-input filled behaviour) */
.marina-date-input--variant-gray-fill.marina-date-input--filled
  .marina-date-input__field-wrapper {
  border-bottom-color: var(--cds-color-neutral-black);
  border-bottom-width: var(--cds-border-sm);
}

/* Hover — Gray Fill: box-shadow adds visual 2px weight without changing border-width — no layout shift */
.marina-date-input--variant-gray-fill:not(.marina-date-input--filled)
  .marina-date-input__field-wrapper:hover:not([data-disabled]):not(
    :focus-within
  ) {
  border-bottom-color: var(--cds-theme-accent);
  box-shadow: inset 0 -1px 0 0 var(--cds-theme-accent);
}

/* ── White Fill variant ───────────────────────────────────────────────── */

.marina-date-input--variant-white-fill .marina-date-input__field-wrapper {
  background: var(--cds-color-neutral-white);
  border: none;
  border-bottom: var(--cds-border-xs) solid var(--cds-color-neutral-400);
  border-radius: 0;
}

/* Filled — White Fill: must come after white-fill base rule to preserve border-bottom-width: sm */
.marina-date-input--variant-white-fill.marina-date-input--filled
  .marina-date-input__field-wrapper {
  border-bottom-color: var(--cds-color-neutral-black);
  border-bottom-width: var(--cds-border-sm);
}

/* Hover — White Fill: box-shadow adds visual 2px weight without changing border-width — no layout shift */
.marina-date-input--variant-white-fill:not(.marina-date-input--filled)
  .marina-date-input__field-wrapper:hover:not([data-disabled]):not(
    :focus-within
  ) {
  border-bottom-color: var(--cds-theme-accent);
  box-shadow: inset 0 -1px 0 0 var(--cds-theme-accent);
}

/* ── Minimal variant ──────────────────────────────────────────────────── */

.marina-date-input--variant-minimal .marina-date-input__field-wrapper {
  background: transparent;
  border: var(--cds-border-sm) solid var(--cds-color-neutral-400);
  border-radius: 0;
}

.marina-date-input__field {
  flex: 1;
  border: none;
  background: transparent;
  padding: var(--spacing-sm2) var(--spacing-md1);
  font-family: var(--cds-typography-font-family-body-regular-base);
  font-size: var(--cds-typography-font-size-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  color: var(--cds-color-neutral-black);
  min-height: 44px;
}

/* Suppress browser default outline only when JS has applied the managed focus class —
   the parent control renders the Marina focus ring instead */
.marina-date-input--focus .marina-date-input__field {
  outline: none;
}

/* CSS-only fallback: show control focus ring when field is focused but JS hasn't fired */
.marina-date-input__field-wrapper:focus-within {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: 0;
}

/* Minimal variant: border-only focus ring (no outline — same as JS-managed rule) */
.marina-date-input--variant-minimal
  .marina-date-input__field-wrapper:focus-within {
  outline: none;
  border-color: var(--cds-color-utility-wcag-focus-state);
}

.marina-date-input__field::placeholder {
  color: var(--cds-color-neutral-500);
}

.marina-date-input__trigger {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--spacing-sm1);
  color: var(--cds-color-neutral-black);
  display: flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
}

.marina-date-input__trigger:focus-visible {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: 0;
}

/* ── Focus state ─────────────────────────────────────────────────────── */

/* Gray Fill + White Fill focus: outline avoids layout shift */
.marina-date-input--focus .marina-date-input__field-wrapper,
.marina-date-input--variant-gray-fill.marina-date-input--focus
  .marina-date-input__field-wrapper,
.marina-date-input--variant-white-fill.marina-date-input--focus
  .marina-date-input__field-wrapper {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: 0;
}

/* Minimal focus: color-only change — border-width stays 2px, no layout shift */
.marina-date-input--variant-minimal.marina-date-input--focus
  .marina-date-input__field-wrapper {
  border-color: var(--cds-color-utility-wcag-focus-state);
}

/* ── Error state ──────────────────────────────────────────────────────── */

/* Gray Fill + White Fill: full-border (all 4 sides) error stroke */
.marina-date-input--variant-gray-fill.marina-date-input--error
  .marina-date-input__field-wrapper,
.marina-date-input--variant-white-fill.marina-date-input--error
  .marina-date-input__field-wrapper {
  border: var(--cds-border-sm) solid var(--cds-color-utility-error-shade);
}

.marina-date-input--variant-minimal.marina-date-input--error
  .marina-date-input__field-wrapper {
  border-color: var(--cds-color-utility-error-shade);
}

/* Error + focused — hide full error border; focus ring alone signals the field is active */
.marina-date-input--variant-gray-fill.marina-date-input--error.marina-date-input--focus
  .marina-date-input__field-wrapper,
.marina-date-input--variant-white-fill.marina-date-input--error.marina-date-input--focus
  .marina-date-input__field-wrapper {
  border: none;
  border-bottom: var(--cds-border-xs) solid var(--cds-color-neutral-400);
}

.marina-date-input--variant-minimal.marina-date-input--error.marina-date-input--focus
  .marina-date-input__field-wrapper {
  border-color: var(--cds-color-utility-wcag-focus-state);
}

/* Disabled state */
.marina-date-input--disabled .marina-date-input__field-wrapper {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Inline-alert used as field feedback — strip box; icon 16px; body-regular + error color */
.marina-date-input .marina-inline-alert {
  border-color: transparent;
  background-color: transparent;
  padding: 0;
  align-items: center;
}

.marina-date-input .marina-inline-alert__icon {
  width: var(--spacing-md1);
  height: var(--spacing-md1);
}

.marina-date-input .marina-inline-alert__summary {
  font-family: var(--cds-typography-font-family-body-sm-regular-base);
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
  font-weight: var(--cds-typography-font-weight-body-sm-regular-base);
  line-height: var(--cds-typography-line-height-body-sm-regular-base);
  color: var(--cds-color-utility-error-shade);
}

.marina-date-input__help-text {
  font-family: var(--cds-typography-font-family-body-sm-regular-base);
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
  font-weight: var(--cds-typography-font-weight-body-sm-regular-base);
  line-height: var(--cds-typography-line-height-body-sm-regular-base);
  color: var(--cds-color-neutral-500);
}

/* Calendar popover */
.marina-date-input__positioner {
  position: absolute;
  z-index: 50;
  top: 100%;
  margin-top: var(--spacing-xs2);
}

/* Flip above the input when there is insufficient viewport space below */
.marina-date-input__positioner--above {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: var(--spacing-xs2);
}

.marina-date-input__content {
  /* Visual styling removed — marina-date-picker owns its own background, padding, shadow. */
}

.marina-date-input__calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm1);
}

.marina-date-input__nav-btn,
.marina-date-input__view-trigger {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--cds-typography-font-family-body-regular-base);
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-bold-base);
  color: var(--cds-color-neutral-black);
  padding: var(--spacing-xs2) var(--spacing-sm1);
  border-radius: var(--cds-radius-small);
  min-height: 44px;
  min-width: 44px;
}

.marina-date-input__nav-btn:hover,
.marina-date-input__view-trigger:hover {
  background: var(--cds-color-neutral-200);
}

.marina-date-input__nav-btn:focus-visible,
.marina-date-input__view-trigger:focus-visible {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: 0;
}

.marina-date-input__calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--spacing-xs1);
}

.marina-date-input__weekday {
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
  font-weight: var(--cds-typography-font-weight-body-bold-base);
  color: var(--cds-color-neutral-500);
  text-align: center;
  padding: var(--spacing-xs2);
}

.marina-date-input__day-cell {
  background: transparent;
  border: none;
  border-radius: var(--cds-radius-small);
  cursor: pointer;
  font-family: var(--cds-typography-font-family-body-regular-base);
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
  color: var(--cds-color-neutral-black);
  padding: var(--spacing-xs2);
  text-align: center;
  min-height: 36px;
  transition: background 100ms ease-out;
}

.marina-date-input__day-cell:hover:not([data-disabled]) {
  background: var(--cds-color-neutral-200);
}

.marina-date-input__day-cell:focus-visible {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: 0;
}

.marina-date-input__day-cell[data-selected] {
  background: var(--cds-color-primary-blue);
  color: var(--cds-color-neutral-white);
}

.marina-date-input__day-cell[data-today]:not([data-selected]) {
  font-weight: var(--cds-typography-font-weight-body-bold-base);
  text-decoration: underline;
}

.marina-date-input__day-cell[data-disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.marina-date-input__day-cell[data-outside-range] {
  color: var(--cds-color-neutral-400);
}

/* ── Compact padding variant (AC-2) ──────────────────────────────────────── */
/* Overrides min-height: 44px (touch target floor) — compact is intentionally
   for dense desktop contexts where 44px targets are not required. */

.marina-date-input--padding-compact .marina-date-input__field-wrapper {
  min-height: 0;
}

.marina-date-input--padding-compact .marina-date-input__field {
  padding-top: var(--spacing-sm1);
  padding-bottom: var(--spacing-sm1);
  min-height: 0;
}

.marina-date-input--padding-compact .marina-date-input__trigger {
  padding-top: var(--spacing-xs2);
  padding-bottom: var(--spacing-xs2);
  min-height: 0;
}

/* ── Body-sm text size variant (AC-2) ────────────────────────────────────── */

.marina-date-input--text-sm .marina-label {
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
  font-weight: var(--cds-typography-font-weight-body-sm-regular-base);
  line-height: var(--cds-typography-line-height-body-sm-regular-base);
}

.marina-date-input--text-sm .marina-date-input__field {
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
}

.marina-date-input--text-sm .marina-date-input__help-text {
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
}

/* ── Read-only state (AC-3) ──────────────────────────────────────────────── */

.marina-date-input--read-only .marina-date-input__field-wrapper {
  background: transparent;
  cursor: default;
}

.marina-date-input--read-only .marina-date-input__field {
  cursor: default;
  pointer-events: none;
}

/* ── Dark mode (AC-4) ────────────────────────────────────────────────────── */

/* Typography — all variants */
:is([data-mode='dark']) .marina-date-input__field,
:is([data-mode='dark']) .marina-date-input__help-text {
  color: var(--cds-color-neutral-white);
}

:is([data-mode='dark']) .marina-date-input__field::placeholder {
  color: var(--cds-color-neutral-200);
}

/* Calendar icon (trigger) */
:is([data-mode='dark']) .marina-date-input__trigger {
  color: var(--cds-color-neutral-white);
}

/* Gray Fill dark — fill neutral-500, bottom stroke neutral-400 (AC-4) */
:is([data-mode='dark'])
  .marina-date-input--variant-gray-fill
  .marina-date-input__field-wrapper {
  background: var(--cds-color-neutral-500);
  border-bottom-color: var(--cds-color-neutral-400);
}

/* Gray Fill dark error — full border */
:is([data-mode='dark'])
  .marina-date-input--variant-gray-fill.marina-date-input--error
  .marina-date-input__field-wrapper {
  border: var(--cds-border-sm) solid var(--cds-color-utility-error-shade);
}

/* Gray Fill dark error + focused — hide full error border; focus ring takes over */
:is([data-mode='dark'])
  .marina-date-input--variant-gray-fill.marina-date-input--error.marina-date-input--focus
  .marina-date-input__field-wrapper {
  border: none;
  border-bottom: var(--cds-border-xs) solid var(--cds-color-neutral-400);
}

/* Gray Fill dark error + active — double stroke: neutral-white inner + wcag-focus-state outer (AC-5) */
:is([data-mode='dark'])
  .marina-date-input--variant-gray-fill.marina-date-input--error.marina-date-input--active
  .marina-date-input__field-wrapper {
  border-bottom: var(--cds-border-sm) solid var(--cds-color-neutral-white);
  box-shadow: var(--marina-date-input-dark-double-stroke);
}

/* White/Black Fill dark — fill neutral-black, bottom stroke neutral-400 (AC-4) */
:is([data-mode='dark'])
  .marina-date-input--variant-white-fill
  .marina-date-input__field-wrapper {
  background: var(--cds-color-neutral-black);
  border-bottom-color: var(--cds-color-neutral-400);
}

/* White/Black Fill dark error — full border */
:is([data-mode='dark'])
  .marina-date-input--variant-white-fill.marina-date-input--error
  .marina-date-input__field-wrapper {
  border: var(--cds-border-sm) solid var(--cds-color-utility-error-shade);
}

/* Minimal dark — typography only; container fill/border pending design confirmation (AC-4) */
/* TODO: confirm Minimal dark mode container fill and border with design — DS v2.0.1 has no dark table for Minimal */

/* ── Reduced motion ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .marina-date-input,
  .marina-date-input * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* =============================================================================
   marina-search-input
   Spec: .claude/marina-design/actions-and-inputs/search-input.md
   Border treatment mirrors marina-text-input:
     gray-fill / white-fill → bottom border only, border-radius: 0
     minimal                → full 2px border, border-radius: 0
   ============================================================================= */

/* ── Container ────────────────────────────────────────────────────────────── */

.marina-search-input {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs2); /* 4px between field and feedback */
}

/* ── Field wrapper (Gray Fill default) ────────────────────────────────────── */

.marina-search-input__field-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  border: none;
  border-bottom: var(--cds-border-xs) solid var(--cds-color-neutral-400);
  border-radius: 0;
  padding-block: var(--spacing-sm2); /* 12px default */
  padding-inline: var(--spacing-sm2);
  gap: var(--spacing-xs2); /* 4px icon-to-text gap */
  background-color: var(--cds-color-neutral-200); /* gray-fill default */
  cursor: text;
  transition: border-color var(--cds-motion-duration-fast)
      var(--cds-motion-easing-out),
    border-width var(--cds-motion-duration-fast) var(--cds-motion-easing-out),
    box-shadow var(--cds-motion-duration-fast) var(--cds-motion-easing-out),
    outline-color var(--cds-motion-duration-fast) var(--cds-motion-easing-out);
}

/* ── Search icon ───────────────────────────────────────────────────────────── */
/* Spec: always present (16×16px); stays visible in all states including filled. */
/* Clear icon appears on the right when filled — it does not replace the search icon. */

.marina-search-input__search-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--cds-color-neutral-black);
  pointer-events: none;
}

/* ── Spinner (async options loading) ──────────────────────────────── */
/* Flex item inside field-wrapper — matches search icon as sibling element */

.marina-search-input__spinner {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* ── Input ─────────────────────────────────────────────────────────────────── */

.marina-search-input__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--cds-typography-font-family-body-regular-base);
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  color: var(--cds-color-neutral-black);
  caret-color: var(--cds-color-neutral-black);
}

.marina-search-input__input::placeholder {
  color: var(--cds-color-neutral-500);
}

/* ── Clear button + icon ──────────────────────────────────────────────────── */

.marina-search-input__clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--cds-color-neutral-black);
}

.marina-search-input__clear-icon {
  width: 16px;
  height: 16px;
}

/* ── Prediction menu ─────────────────────────────────────────────────────── */

.marina-search-input__content {
  position: absolute;
  top: calc(100% + var(--spacing-xs2));
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 200;
  border-radius: var(--cds-radius-small);
  overflow: hidden;
  background-color: var(--cds-color-neutral-white);
  box-shadow: var(--cds-shadow-m3);
}

.marina-search-input__list {
  list-style: none;
  margin: 0;
  padding-block: var(--spacing-xs2);
  padding-inline: 0;
  max-height: 240px;
  overflow-y: auto;
}

.marina-search-input__item {
  padding-block: var(--spacing-sm2);
  padding-inline: var(--spacing-sm2);
  font-family: var(--cds-typography-font-family-body-regular-base);
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  color: var(--cds-color-neutral-black);
  cursor: pointer;
  user-select: none;
}

.marina-search-input__item--highlighted {
  background-color: var(--cds-color-neutral-100);
}

.marina-search-input__item--selected {
  font-weight: var(--cds-typography-font-weight-body-bold-base);
}

.marina-search-input__item--disabled {
  color: var(--cds-color-neutral-300);
  cursor: not-allowed;
  pointer-events: none;
}

/* Focus ring on keyboard navigation only */
.marina-search-input__item:focus-visible {
  outline: 2px solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: -2px;
}

.marina-search-input__empty {
  list-style: none;
  padding-block: var(--spacing-sm2);
  padding-inline: var(--spacing-sm2);
  color: var(--cds-color-neutral-500);
  cursor: default;
}

/* ── Text size variants ─────────────────────────────────────────────────────── */

.marina-search-input--text-sm .marina-search-input__input,
.marina-search-input--text-sm .marina-search-input__item {
  font-family: var(--cds-typography-font-family-body-sm-regular-base);
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
  font-weight: var(--cds-typography-font-weight-body-sm-regular-base);
  line-height: var(--cds-typography-line-height-body-sm-regular-base);
}

/* ── Padding variant ─────────────────────────────────────────────────────── */

.marina-search-input--padding-compact .marina-search-input__field-wrapper {
  padding-block: var(--spacing-sm1); /* 8px compact */
}

/* ── Style variant: gray-fill ─────────────────────────────────────────────── */
/* Base field-wrapper is already gray-fill; variant selector explicit for clarity */

.marina-search-input--variant-gray-fill .marina-search-input__field-wrapper {
  background-color: var(--cds-color-neutral-200);
  border-bottom-color: var(--cds-color-neutral-400);
}

/* Hover unfilled: box-shadow adds virtual 2px weight without layout shift */
.marina-search-input--variant-gray-fill:not(.marina-search-input--filled):not(
    .marina-search-input--error
  )
  .marina-search-input__field-wrapper:hover {
  border-bottom-color: var(--cds-theme-accent);
  box-shadow: inset 0 -1px 0 0 var(--cds-theme-accent);
}

/* Hover filled: already 2px — change color only */
.marina-search-input--variant-gray-fill.marina-search-input--filled:not(
    .marina-search-input--error
  )
  .marina-search-input__field-wrapper:hover {
  border-bottom-color: var(--cds-theme-accent);
}

/* ── Style variant: white-fill ─────────────────────────────────────────────── */

.marina-search-input--variant-white-fill .marina-search-input__field-wrapper {
  background-color: var(--cds-color-neutral-white);
  border-bottom-color: var(--cds-color-neutral-400);
}

/* Hover unfilled */
.marina-search-input--variant-white-fill:not(.marina-search-input--filled):not(
    .marina-search-input--error
  )
  .marina-search-input__field-wrapper:hover {
  border-bottom-color: var(--cds-theme-accent);
  box-shadow: inset 0 -1px 0 0 var(--cds-theme-accent);
}

/* Hover filled */
.marina-search-input--variant-white-fill.marina-search-input--filled:not(
    .marina-search-input--error
  )
  .marina-search-input__field-wrapper:hover {
  border-bottom-color: var(--cds-theme-accent);
}

/* ── Style variant: minimal ────────────────────────────────────────────────── */
/* Full 2px border (no accent theme), no fill */

.marina-search-input--variant-minimal .marina-search-input__field-wrapper {
  background-color: transparent;
  border: var(--cds-border-sm) solid var(--cds-color-neutral-500);
}

/* ── Filled state ───────────────────────────────────────────────────────────── */

/* Gray-fill + white-fill filled: 2px bottom stroke → neutral-black */
.marina-search-input--variant-gray-fill.marina-search-input--filled
  .marina-search-input__field-wrapper,
.marina-search-input--variant-white-fill.marina-search-input--filled
  .marina-search-input__field-wrapper {
  border-bottom-color: var(--cds-color-neutral-black);
  border-bottom-width: var(--cds-border-sm);
}

/* Minimal filled: border-color → neutral-black */
.marina-search-input--variant-minimal.marina-search-input--filled
  .marina-search-input__field-wrapper {
  border-color: var(--cds-color-neutral-black);
}

/* ── Focus state ────────────────────────────────────────────────────────────── */
/* Gray/white fill: outline sits outside wrapper (no layout shift) */

.marina-search-input--focus .marina-search-input__field-wrapper {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: 0;
}

/* Minimal focus: no outline — color-only border change */
.marina-search-input--variant-minimal.marina-search-input--focus
  .marina-search-input__field-wrapper {
  outline: none;
  border-color: var(--cds-color-utility-wcag-focus-state);
}

/* Error + focused on gray/white: hide full error border while focused */
.marina-search-input--variant-gray-fill.marina-search-input--error.marina-search-input--focus
  .marina-search-input__field-wrapper,
.marina-search-input--variant-white-fill.marina-search-input--error.marina-search-input--focus
  .marina-search-input__field-wrapper {
  border: none;
  border-bottom: var(--cds-border-xs) solid var(--cds-color-neutral-400);
}

/* Error + focused on minimal */
.marina-search-input--variant-minimal.marina-search-input--error.marina-search-input--focus
  .marina-search-input__field-wrapper {
  border-color: var(--cds-color-utility-wcag-focus-state);
}

/* ── Error state ────────────────────────────────────────────────────────────── */

/* Gray/white fill error: full border (all 4 sides) */
.marina-search-input--variant-gray-fill.marina-search-input--error
  .marina-search-input__field-wrapper,
.marina-search-input--variant-white-fill.marina-search-input--error
  .marina-search-input__field-wrapper {
  border: var(--cds-border-xs) solid var(--cds-color-utility-error-shade);
}

/* Gray/white fill filled error: 2px full border */
.marina-search-input--variant-gray-fill.marina-search-input--error.marina-search-input--filled
  .marina-search-input__field-wrapper,
.marina-search-input--variant-white-fill.marina-search-input--error.marina-search-input--filled
  .marina-search-input__field-wrapper {
  border-width: var(--cds-border-sm);
}

/* Minimal error: change border color only */
.marina-search-input--variant-minimal.marina-search-input--error
  .marina-search-input__field-wrapper {
  border-color: var(--cds-color-utility-error-shade);
}

.marina-search-input__input:invalid {
  box-shadow: none; /* suppress native browser validation styling */
}

/* ── Disabled state ─────────────────────────────────────────────────────────── */

.marina-search-input--disabled .marina-search-input__field-wrapper {
  border-bottom-color: var(--cds-color-neutral-300);
  cursor: not-allowed;
  pointer-events: none;
}

.marina-search-input--disabled .marina-search-input__input::placeholder {
  color: var(--cds-color-neutral-300);
}

.marina-search-input--disabled .marina-search-input__input {
  color: var(--cds-color-neutral-300);
  pointer-events: none;
}

/* ── Read-only state ────────────────────────────────────────────────────────── */

.marina-search-input--read-only .marina-search-input__field-wrapper {
  pointer-events: none;
}

.marina-search-input--read-only .marina-search-input__input {
  pointer-events: none;
}

/* ── Helper/feedback text ───────────────────────────────────────────────────── */

.marina-search-input__help-text {
  font-family: var(--cds-typography-font-family-body-sm-regular-base);
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
  font-weight: var(--cds-typography-font-weight-body-sm-regular-base);
  line-height: var(--cds-typography-line-height-body-sm-regular-base);
  color: var(--cds-color-neutral-black);
}

/* Error feedback — strip inline-alert chrome (matches marina-text-input pattern) */
.marina-search-input__feedback .marina-inline-alert {
  border-color: transparent;
  background-color: transparent;
  padding: 0;
  align-items: center;
}

.marina-search-input__feedback .marina-inline-alert__icon {
  width: var(--spacing-md1);
  height: var(--spacing-md1);
}

.marina-search-input__feedback .marina-inline-alert__summary {
  font-family: var(--cds-typography-font-family-body-sm-regular-base);
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
  font-weight: var(--cds-typography-font-weight-body-sm-regular-base);
  line-height: var(--cds-typography-line-height-body-sm-regular-base);
  color: var(--cds-color-utility-error-shade);
}

/* =============================================================================
   Dark mode — [data-mode="dark"]
   ============================================================================= */

/* Dark gray-fill */
[data-mode='dark']
  .marina-search-input--variant-gray-fill
  .marina-search-input__field-wrapper {
  background-color: var(--cds-color-neutral-500);
  border-bottom-color: var(--cds-color-neutral-200);
}

[data-mode='dark']
  .marina-search-input--variant-gray-fill
  .marina-search-input__input {
  color: var(--cds-color-neutral-white);
  caret-color: var(--cds-color-neutral-white);
}

[data-mode='dark']
  .marina-search-input--variant-gray-fill
  .marina-search-input__input::placeholder {
  color: var(--cds-color-neutral-200);
}

/* Dark gray-fill filled: 2px neutral-white bottom stroke */
[data-mode='dark']
  .marina-search-input--variant-gray-fill.marina-search-input--filled
  .marina-search-input__field-wrapper {
  border-bottom-color: var(--cds-color-neutral-white);
  border-bottom-width: var(--cds-border-sm);
}

/* Dark gray-fill hover unfilled */
[data-mode='dark']
  .marina-search-input--variant-gray-fill:not(.marina-search-input--filled):not(
    .marina-search-input--error
  )
  .marina-search-input__field-wrapper:hover {
  border-bottom-color: var(--cds-color-neutral-white);
  box-shadow: inset 0 -1px 0 0 var(--cds-color-neutral-white);
}

/* Dark gray-fill: icons use white */
[data-mode='dark']
  .marina-search-input--variant-gray-fill
  .marina-search-input__search-icon,
[data-mode='dark']
  .marina-search-input--variant-gray-fill
  .marina-search-input__clear-btn {
  color: var(--cds-color-neutral-white);
}

/* ── Dark white/black-fill ─────────────────────────────────────────────────── */

[data-mode='dark']
  .marina-search-input--variant-white-fill
  .marina-search-input__field-wrapper {
  background-color: var(--cds-color-neutral-black);
  border-bottom-color: var(--cds-color-neutral-300);
}

[data-mode='dark']
  .marina-search-input--variant-white-fill
  .marina-search-input__input {
  color: var(--cds-color-neutral-white);
  caret-color: var(--cds-color-neutral-white);
}

[data-mode='dark']
  .marina-search-input--variant-white-fill
  .marina-search-input__input::placeholder {
  color: var(--cds-color-neutral-200);
}

/* Dark white-fill filled: 2px neutral-white bottom stroke */
[data-mode='dark']
  .marina-search-input--variant-white-fill.marina-search-input--filled
  .marina-search-input__field-wrapper {
  border-bottom-color: var(--cds-color-neutral-white);
  border-bottom-width: var(--cds-border-sm);
}

[data-mode='dark']
  .marina-search-input--variant-white-fill
  .marina-search-input__search-icon,
[data-mode='dark']
  .marina-search-input--variant-white-fill
  .marina-search-input__clear-btn {
  color: var(--cds-color-neutral-white);
}

/* ── Dark minimal ──────────────────────────────────────────────────────────── */

[data-mode='dark']
  .marina-search-input--variant-minimal
  .marina-search-input__field-wrapper {
  background-color: transparent;
  border-color: var(--cds-color-neutral-400);
}

[data-mode='dark']
  .marina-search-input--variant-minimal
  .marina-search-input__input {
  color: var(--cds-color-neutral-white);
  caret-color: var(--cds-color-neutral-white);
}

/* Dark minimal filled */
[data-mode='dark']
  .marina-search-input--variant-minimal.marina-search-input--filled
  .marina-search-input__field-wrapper {
  border-color: var(--cds-color-neutral-white);
}

/* ── Dark focus ─────────────────────────────────────────────────────────────── */
/* Spec: inner neutral-white 2px + outer wcag-focus-state 2px (double stroke) */

[data-mode='dark']
  .marina-search-input--focus
  .marina-search-input__field-wrapper {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: 0;
}

/* Dark minimal focus: border-color change (no outline) */
[data-mode='dark']
  .marina-search-input--variant-minimal.marina-search-input--focus
  .marina-search-input__field-wrapper {
  outline: none;
  border-color: var(--cds-color-utility-wcag-focus-state);
}

/* ── Dark prediction menu ──────────────────────────────────────────────────── */

[data-mode='dark'] .marina-search-input__content {
  background-color: var(--cds-color-neutral-500);
  border: var(--cds-border-xs) solid var(--cds-color-neutral-400);
  box-shadow: none;
}

[data-mode='dark'] .marina-search-input__item {
  color: var(--cds-color-neutral-white);
}

[data-mode='dark'] .marina-search-input__item--highlighted {
  background-color: var(--cds-color-neutral-400);
}

[data-mode='dark'] .marina-search-input__empty {
  color: var(--cds-color-neutral-200);
}

/* ── Dark disabled ─────────────────────────────────────────────────────────── */

[data-mode='dark']
  .marina-search-input--disabled
  .marina-search-input__field-wrapper {
  border-bottom-color: var(--cds-color-neutral-400);
}

[data-mode='dark']
  .marina-search-input--disabled
  .marina-search-input__input::placeholder {
  color: var(--cds-color-neutral-400);
}

[data-mode='dark'] .marina-search-input--disabled .marina-search-input__input {
  color: var(--cds-color-neutral-400);
}

/* ── Dark error ─────────────────────────────────────────────────────────────── */

[data-mode='dark']
  .marina-search-input--variant-gray-fill.marina-search-input--error
  .marina-search-input__field-wrapper,
[data-mode='dark']
  .marina-search-input--variant-white-fill.marina-search-input--error
  .marina-search-input__field-wrapper {
  border: var(--cds-border-xs) solid var(--cds-color-utility-error-shade);
}

[data-mode='dark']
  .marina-search-input--variant-minimal.marina-search-input--error
  .marina-search-input__field-wrapper {
  border-color: var(--cds-color-utility-error-shade);
}