/* VeryBigExpert. Tokens mirror the Figma variables of the file « VeryBigExpert »
   (collections Primitives, Color, Size) and its text and effect styles; every
   rule of these stylesheets reads a token, never a raw value. The files of this
   folder are served as one stylesheet, in the order tokens, shell, components,
   data, home, app. Shell and components come from Blackswan's Cygnus dashboard. */

/* Inter and JetBrains Mono, embedded (variable weight, latin and latin-ext):
   the design never falls back to a system font. Files: assets/fonts. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("inter-latin-ext-v20.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("inter-latin-v20.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("jetbrains-mono-latin-ext-v24.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("jetbrains-mono-latin-v24.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --vbe-primitive-white: #ffffff;
  --vbe-primitive-black: #000000;
  --vbe-primitive-gray-25: #fcfcfc;
  --vbe-primitive-gray-50: #f7f7f7;
  --vbe-primitive-gray-100: #f2f2f2;
  --vbe-primitive-gray-200: #ebebeb;
  --vbe-primitive-gray-300: #dddddd;
  --vbe-primitive-gray-400: #d0d0d0;
  --vbe-primitive-gray-500: #a6a6a6;
  --vbe-primitive-gray-600: #8c8c8c;
  --vbe-primitive-gray-650: #707070;
  --vbe-primitive-gray-700: #606060;
  --vbe-primitive-gray-800: #4a4a4a;
  --vbe-primitive-gray-850: #303030;
  --vbe-primitive-gray-875: #262626;
  --vbe-primitive-gray-900: #1b1b1b;
  --vbe-primitive-gray-950: #101010;
  --vbe-primitive-gray-975: #0a0a0a;
  --vbe-primitive-green-100: #e8fcd9;
  --vbe-primitive-green-200: #2ced83;
  --vbe-primitive-green-500: #428e0b;
  --vbe-primitive-green-700: #183701;
  --vbe-primitive-green-900: #073630;
  --vbe-primitive-red-100: #ffe7e6;
  --vbe-primitive-red-200: #f78086;
  --vbe-primitive-red-500: #e2221a;
  --vbe-primitive-red-600: #ce1f18;
  --vbe-primitive-red-700: #650a06;
  --vbe-primitive-red-900: #5f0716;
  --vbe-primitive-amber-100: #ffefcc;
  --vbe-primitive-amber-200: #ffeb78;
  --vbe-primitive-amber-500: #ffac08;
  --vbe-primitive-amber-700: #432e00;
  --vbe-primitive-amber-900: #332e00;
  --vbe-primitive-blue-100: #d2f6fe;
  --vbe-primitive-blue-200: #a8d8ff;
  --vbe-primitive-blue-300: #97adff;
  --vbe-primitive-blue-400: #5b8af0;
  --vbe-primitive-blue-500: #1650d0;
  --vbe-primitive-blue-600: #008eb2;
  --vbe-primitive-blue-700: #004253;
  --vbe-primitive-blue-900: #003a5a;
  --vbe-primitive-purple-100: #f3eeff;
  --vbe-primitive-purple-200: #ddd0ff;
  --vbe-primitive-purple-300: #b79cff;
  --vbe-primitive-purple-500: #8051ff;
  --vbe-primitive-purple-700: #5700d1;
  --vbe-primitive-purple-900: #25005c;
  --vbe-primitive-teal-200: #a5e6dc;
  --vbe-primitive-teal-300: #62cbbd;
  --vbe-primitive-teal-500: #0f8f83;
  --vbe-primitive-pink-300: #ee8fd0;
  --vbe-primitive-pink-500: #c93a9c;
  --vbe-primitive-alpha-black-2: #00000005;
  --vbe-primitive-alpha-black-4: #0000000a;
  --vbe-primitive-alpha-black-6: #0000000f;
  --vbe-primitive-alpha-black-8: #00000014;
  --vbe-primitive-alpha-black-13: #00000021;
  --vbe-primitive-alpha-black-16: #00000029;
  --vbe-primitive-alpha-black-24: #0000003d;
  --vbe-primitive-alpha-black-50: #00000080;
  --vbe-primitive-alpha-white-8: #ffffff14;
  --vbe-primitive-alpha-white-10: #ffffff1a;
  --vbe-primitive-alpha-white-16: #ffffff29;
  --vbe-primitive-alpha-white-75: #ffffffbf;

  --vbe-color-bg-frame: var(--vbe-primitive-gray-975);
  --vbe-color-bg-frame-hover: var(--vbe-primitive-gray-900);
  --vbe-color-bg-frame-selected: var(--vbe-primitive-gray-875);
  --vbe-color-bg-canvas: var(--vbe-primitive-white);
  --vbe-color-bg-surface: var(--vbe-primitive-white);
  --vbe-color-bg-surface-secondary: var(--vbe-primitive-gray-50);
  --vbe-color-bg-surface-tertiary: var(--vbe-primitive-gray-100);
  --vbe-color-bg-surface-hover: var(--vbe-primitive-gray-50);
  --vbe-color-bg-surface-selected: var(--vbe-primitive-gray-100);
  --vbe-color-bg-input: var(--vbe-primitive-white);
  --vbe-color-bg-fill-brand: var(--vbe-primitive-gray-900);
  --vbe-color-bg-fill-brand-hover: var(--vbe-primitive-gray-950);
  --vbe-color-bg-fill-secondary: var(--vbe-primitive-gray-100);
  --vbe-color-bg-fill-secondary-hover: var(--vbe-primitive-gray-200);
  --vbe-color-bg-fill-disabled: var(--vbe-primitive-gray-50);
  --vbe-color-bg-fill-critical: var(--vbe-primitive-red-500);
  --vbe-color-bg-fill-critical-hover: var(--vbe-primitive-red-600);
  --vbe-color-bg-success: var(--vbe-primitive-green-100);
  --vbe-color-bg-critical: var(--vbe-primitive-red-100);
  --vbe-color-bg-warning: var(--vbe-primitive-amber-100);
  --vbe-color-bg-info: var(--vbe-primitive-blue-100);
  --vbe-color-bg-magic: var(--vbe-primitive-purple-100);
  --vbe-color-bg-overlay: var(--vbe-primitive-alpha-black-50);
  --vbe-color-text-default: var(--vbe-primitive-gray-950);
  --vbe-color-text-secondary: var(--vbe-primitive-gray-800);
  --vbe-color-text-tertiary: var(--vbe-primitive-gray-700);
  --vbe-color-text-disabled: var(--vbe-primitive-gray-500);
  --vbe-color-text-on-brand: var(--vbe-primitive-white);
  --vbe-color-text-on-critical: var(--vbe-primitive-white);
  --vbe-color-text-on-frame: var(--vbe-primitive-gray-400);
  --vbe-color-text-on-frame-secondary: var(--vbe-primitive-gray-600);
  --vbe-color-text-on-frame-active: var(--vbe-primitive-gray-50);
  --vbe-color-text-link: var(--vbe-primitive-blue-500);
  --vbe-color-text-success: var(--vbe-primitive-green-700);
  --vbe-color-text-critical: var(--vbe-primitive-red-700);
  --vbe-color-text-warning: var(--vbe-primitive-amber-700);
  --vbe-color-text-info: var(--vbe-primitive-blue-700);
  --vbe-color-text-magic: var(--vbe-primitive-purple-700);
  --vbe-color-border-default: var(--vbe-primitive-gray-300);
  --vbe-color-border-secondary: var(--vbe-primitive-gray-100);
  --vbe-color-border-strong: var(--vbe-primitive-gray-600);
  --vbe-color-border-focus: var(--vbe-primitive-blue-500);
  --vbe-color-border-critical: var(--vbe-primitive-red-500);
  --vbe-color-border-frame: var(--vbe-primitive-gray-875);
  --vbe-color-icon-default: var(--vbe-primitive-gray-950);
  --vbe-color-icon-secondary: var(--vbe-primitive-gray-700);
  --vbe-color-icon-disabled: var(--vbe-primitive-gray-500);
  --vbe-color-icon-on-brand: var(--vbe-primitive-white);
  --vbe-color-icon-on-frame: var(--vbe-primitive-gray-500);
  --vbe-color-icon-on-frame-active: var(--vbe-primitive-gray-50);
  --vbe-color-icon-success: var(--vbe-primitive-green-500);
  --vbe-color-icon-critical: var(--vbe-primitive-red-500);
  --vbe-color-icon-warning: var(--vbe-primitive-amber-500);
  --vbe-color-icon-info: var(--vbe-primitive-blue-600);
  --vbe-color-icon-magic: var(--vbe-primitive-purple-500);
  --vbe-color-chart-primary: var(--vbe-primitive-gray-900);
  --vbe-color-chart-muted: var(--vbe-primitive-gray-300);
  --vbe-color-chart-accent: var(--vbe-primitive-purple-500);
  /* One color per family of assets, on every screen. */
  --vbe-color-chart-immobilier-usage: var(--vbe-primitive-blue-500);
  --vbe-color-chart-immobilier-rapport: var(--vbe-primitive-blue-400);
  --vbe-color-chart-professionnel: var(--vbe-primitive-purple-500);
  --vbe-color-chart-assurance-vie: var(--vbe-primitive-teal-500);
  --vbe-color-chart-epargne-retraite: var(--vbe-primitive-teal-300);
  --vbe-color-chart-valeurs-mobilieres: var(--vbe-primitive-pink-500);
  --vbe-color-chart-disponibilites: var(--vbe-primitive-amber-500);
  --vbe-color-chart-dettes: var(--vbe-primitive-red-200);

  --vbe-space-0: 0px;
  --vbe-space-025: 1px;
  --vbe-space-050: 2px;
  --vbe-space-100: 4px;
  --vbe-space-150: 6px;
  --vbe-space-200: 8px;
  --vbe-space-300: 12px;
  --vbe-space-400: 16px;
  --vbe-space-500: 20px;
  --vbe-space-600: 24px;
  --vbe-space-800: 32px;
  --vbe-space-1000: 40px;
  --vbe-space-1200: 48px;
  --vbe-space-1600: 64px;
  --vbe-radius-none: 0px;
  --vbe-radius-100: 4px;
  --vbe-radius-150: 6px;
  --vbe-radius-200: 8px;
  --vbe-radius-250: 10px;
  --vbe-radius-300: 12px;
  --vbe-radius-400: 16px;
  --vbe-radius-500: 20px;
  --vbe-radius-full: 9999px;
  --vbe-border-width-default: 1px;
  --vbe-border-width-strong: 2px;
  --vbe-size-icon-sm: 16px;
  --vbe-size-icon-md: 20px;
  --vbe-size-icon-lg: 24px;
  --vbe-size-control-sm: 28px;
  --vbe-size-control-md: 32px;
  --vbe-size-control-lg: 44px;
  --vbe-size-avatar-sm: 24px;
  --vbe-size-avatar-md: 32px;
  --vbe-size-avatar-lg: 44px;
  --vbe-size-layout-sidebar: 248px;
  --vbe-size-layout-topbar: 56px;
  --vbe-size-layout-content-max: 1200px;
  --vbe-size-layout-desktop: 1440px;
  --vbe-size-layout-mobile: 390px;

  --vbe-font-family-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vbe-font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --vbe-font-size-275: 11px;
  --vbe-font-size-300: 12px;
  --vbe-font-size-325: 13px;
  --vbe-font-size-350: 14px;
  --vbe-font-size-400: 16px;
  --vbe-font-size-500: 20px;
  --vbe-font-size-600: 24px;
  --vbe-font-size-800: 32px;
  --vbe-font-size-1200: 48px;
  --vbe-font-line-height-400: 16px;
  --vbe-font-line-height-500: 20px;
  --vbe-font-line-height-600: 24px;
  --vbe-font-line-height-700: 28px;
  --vbe-font-line-height-800: 32px;
  --vbe-font-line-height-1000: 40px;
  --vbe-font-line-height-1400: 56px;

  /* Effect styles shadow/100 … shadow/600, as in Shopify's admin: a container
     (card) is a hairline and a soft halo instead of a border, a field adds a
     short shadow to its border, a popover and a dialog carry their own ring. */
  --vbe-shadow-100: 0 0 2px 0 var(--vbe-primitive-alpha-black-24), 0 2px 12px 0 var(--vbe-primitive-alpha-black-2), 0 4px 16px 0 var(--vbe-primitive-alpha-black-2), 0 4px 48px 0 var(--vbe-primitive-alpha-black-2);
  --vbe-shadow-200: 0 2px 3px -1px var(--vbe-primitive-alpha-black-4), 0 3px 4px -1.5px var(--vbe-primitive-alpha-black-4);
  --vbe-shadow-300: 0 0 0 1px var(--vbe-primitive-alpha-black-8), 0 2px 2px -1px var(--vbe-primitive-alpha-black-6), 0 3px 4px -2px var(--vbe-primitive-alpha-black-6), 0 6px 8px -3px var(--vbe-primitive-alpha-black-6), 0 12px 16px -4px var(--vbe-primitive-alpha-black-6);
  --vbe-shadow-400: 0 0 0 1px var(--vbe-primitive-alpha-black-8), 0 4px 6px -2px var(--vbe-primitive-alpha-black-6), 0 8px 12px -4px var(--vbe-primitive-alpha-black-6), 0 16px 24px -6px var(--vbe-primitive-alpha-black-6);
  --vbe-shadow-600: 0 0 0 1px var(--vbe-primitive-alpha-black-8), 0 2px 3px -1px var(--vbe-primitive-alpha-black-6), 0 4px 6px -2px var(--vbe-primitive-alpha-black-6), 0 8px 12px -4px var(--vbe-primitive-alpha-black-6), 0 16px 24px -6px var(--vbe-primitive-alpha-black-6), 0 32px 48px -8px var(--vbe-primitive-alpha-black-6);
  /* shadow/button-primary and shadow/button-critical: a filled button is lit
     from inside and lifted by a short shadow. Figma draws the inner light with
     two inner shadows of its own; the look is the same. */
  --vbe-shadow-button-lift: 0 1px 0.5px -0.5px var(--vbe-primitive-alpha-black-13), 0 1px 2px -0.5px var(--vbe-primitive-alpha-black-13), 0 4px 6px -2px var(--vbe-primitive-alpha-black-13), 0 2px 3px -1.5px var(--vbe-primitive-alpha-black-13);
  --vbe-shadow-button-primary: var(--vbe-shadow-button-lift), inset 0 0 4px 1px var(--vbe-primitive-gray-950), inset 0 0 4px 2px var(--vbe-primitive-alpha-white-10), inset 0 0 12px -6px var(--vbe-primitive-alpha-white-75);
  --vbe-shadow-button-critical: var(--vbe-shadow-button-lift), inset 0 0 4px 2px var(--vbe-primitive-alpha-white-10), inset 0 0 12px -6px var(--vbe-primitive-alpha-white-75);

  /* Motion, as in Shopify's admin: short, and eased out. Not Figma variables. */
  --vbe-motion-duration-100: 100ms;
  --vbe-motion-duration-150: 150ms;
  --vbe-motion-duration-250: 250ms;
  --vbe-motion-ease-out: cubic-bezier(0.19, 0.91, 0.38, 1);
  --vbe-motion-ease-out-emphasized: cubic-bezier(0.2, 0.8, 0, 1);

  /* Not Figma variables: the icons chevron-down (16 px) and check (12 px) as
     images, for native controls that cannot hold an SVG element. An image
     cannot read a variable, so the chevron carries the value of
     color/icon/secondary (and color/icon/disabled) of each mode; the check is
     only used as a mask. */
  --vbe-image-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23606060' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  --vbe-image-chevron-down-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a6a6a6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  --vbe-image-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3L4.5 8.5 2 6'/%3E%3C/svg%3E");
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --vbe-color-bg-frame: var(--vbe-primitive-black);
    --vbe-color-bg-canvas: var(--vbe-primitive-gray-975);
    --vbe-color-bg-surface: var(--vbe-primitive-gray-900);
    --vbe-color-bg-surface-secondary: var(--vbe-primitive-gray-875);
    --vbe-color-bg-surface-tertiary: var(--vbe-primitive-gray-850);
    --vbe-color-bg-surface-hover: var(--vbe-primitive-gray-875);
    --vbe-color-bg-surface-selected: var(--vbe-primitive-gray-850);
    --vbe-color-bg-input: var(--vbe-primitive-gray-900);
    --vbe-color-bg-fill-brand: var(--vbe-primitive-gray-25);
    --vbe-color-bg-fill-brand-hover: var(--vbe-primitive-gray-200);
    --vbe-color-bg-fill-secondary: var(--vbe-primitive-gray-850);
    --vbe-color-bg-fill-secondary-hover: var(--vbe-primitive-gray-800);
    --vbe-color-bg-fill-disabled: var(--vbe-primitive-gray-875);
    --vbe-color-bg-success: var(--vbe-primitive-green-900);
    --vbe-color-bg-critical: var(--vbe-primitive-red-900);
    --vbe-color-bg-warning: var(--vbe-primitive-amber-900);
    --vbe-color-bg-info: var(--vbe-primitive-blue-900);
    --vbe-color-bg-magic: var(--vbe-primitive-purple-900);
    --vbe-color-text-default: var(--vbe-primitive-gray-200);
    --vbe-color-text-secondary: var(--vbe-primitive-gray-400);
    --vbe-color-text-tertiary: var(--vbe-primitive-gray-500);
    --vbe-color-text-disabled: var(--vbe-primitive-gray-700);
    --vbe-color-text-on-brand: var(--vbe-primitive-gray-950);
    --vbe-color-text-link: var(--vbe-primitive-blue-300);
    --vbe-color-text-success: var(--vbe-primitive-green-200);
    --vbe-color-text-critical: var(--vbe-primitive-red-200);
    --vbe-color-text-warning: var(--vbe-primitive-amber-200);
    --vbe-color-text-info: var(--vbe-primitive-blue-200);
    --vbe-color-text-magic: var(--vbe-primitive-purple-200);
    --vbe-color-border-default: var(--vbe-primitive-gray-850);
    --vbe-color-border-secondary: var(--vbe-primitive-gray-875);
    --vbe-color-border-focus: var(--vbe-primitive-blue-300);
    --vbe-color-icon-default: var(--vbe-primitive-gray-300);
    --vbe-color-icon-secondary: var(--vbe-primitive-gray-500);
    --vbe-color-icon-disabled: var(--vbe-primitive-gray-700);
    --vbe-color-icon-on-brand: var(--vbe-primitive-gray-950);
    --vbe-color-icon-success: var(--vbe-primitive-green-200);
    --vbe-color-icon-critical: var(--vbe-primitive-red-200);
    --vbe-color-icon-info: var(--vbe-primitive-blue-200);
    --vbe-color-icon-magic: var(--vbe-primitive-purple-200);
    --vbe-color-chart-primary: var(--vbe-primitive-gray-200);
    --vbe-color-chart-muted: var(--vbe-primitive-gray-850);
    --vbe-color-chart-accent: var(--vbe-primitive-purple-200);
    --vbe-color-chart-immobilier-usage: var(--vbe-primitive-blue-300);
    --vbe-color-chart-immobilier-rapport: var(--vbe-primitive-blue-200);
    --vbe-color-chart-professionnel: var(--vbe-primitive-purple-300);
    --vbe-color-chart-assurance-vie: var(--vbe-primitive-teal-300);
    --vbe-color-chart-epargne-retraite: var(--vbe-primitive-teal-200);
    --vbe-color-chart-valeurs-mobilieres: var(--vbe-primitive-pink-300);
    --vbe-color-chart-disponibilites: var(--vbe-primitive-amber-200);
    --vbe-shadow-100: 0 0 0 1px var(--vbe-primitive-alpha-white-8), 0 4px 4px -1.5px var(--vbe-primitive-alpha-black-16), 0 5px 5px -2.5px var(--vbe-primitive-alpha-black-24);
    --vbe-shadow-300: 0 0 0 1px var(--vbe-primitive-alpha-white-16), 0 3px 6px -5px var(--vbe-primitive-alpha-black-16), 0 8px 24px -8px var(--vbe-primitive-alpha-black-50);
    --vbe-shadow-400: var(--vbe-shadow-300);
    --vbe-shadow-600: 0 0 0 1px var(--vbe-primitive-alpha-white-16), 0 16px 24px -6px var(--vbe-primitive-alpha-black-24), 0 32px 48px -8px var(--vbe-primitive-alpha-black-50);
    --vbe-shadow-button-primary: inset 0 -1px 0 0 var(--vbe-primitive-gray-500), inset 0 0 0 1px var(--vbe-primitive-alpha-black-8);
    --vbe-image-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a6a6a6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    --vbe-image-chevron-down-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23606060' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overscroll-behavior: none; }
body {
  margin: 0;
  background: var(--vbe-color-bg-frame);
  color: var(--vbe-color-text-default);
  font-family: var(--vbe-font-family-sans);
  font-size: var(--vbe-font-size-325);
  line-height: var(--vbe-font-line-height-500);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
/* Nothing moves for who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::backdrop { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Keyboard focus: a 2 px ring, 2 px away from the control. On the dark frame
   the ring takes the frame's active color: color/border/focus has less than
   3:1 against it in light mode. */
:focus-visible { outline: var(--vbe-border-width-strong) solid var(--vbe-color-border-focus); outline-offset: var(--vbe-space-050); }
.sidebar :focus-visible, .topbar :focus-visible, .skip-link:focus-visible { outline-color: var(--vbe-color-text-on-frame-active); }
.sidebar .menu__list :focus-visible, .topbar .menu__list :focus-visible { outline-color: var(--vbe-color-border-focus); }
/* What a script focuses to move the reading position (the page content, a
   message, a refreshed list, a dialog title) is not a control: no ring. */
[tabindex="-1"]:focus-visible { outline: 0; }
/* First element of the page: shown when the keyboard reaches it. */
.skip-link { position: fixed; top: var(--vbe-space-200); left: var(--vbe-space-200); z-index: 40; padding: var(--vbe-space-150) var(--vbe-space-300); border-radius: var(--vbe-radius-200); background: var(--vbe-color-bg-surface); color: var(--vbe-color-text-default); font-weight: 500; }
.skip-link:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Text styles ---------- */
.display-lg { font-size: var(--vbe-font-size-1200); line-height: var(--vbe-font-line-height-1400); font-weight: 500; letter-spacing: -0.02em; }
.h-3xl { font-size: var(--vbe-font-size-800); line-height: var(--vbe-font-line-height-1000); font-weight: 500; letter-spacing: -0.02em; }
.h-2xl { font-size: var(--vbe-font-size-600); line-height: var(--vbe-font-line-height-800); font-weight: 500; letter-spacing: -0.02em; }
.h-xl { font-size: var(--vbe-font-size-500); line-height: var(--vbe-font-line-height-700); font-weight: 500; letter-spacing: -0.02em; }
.h-lg { font-size: var(--vbe-font-size-400); line-height: var(--vbe-font-line-height-600); font-weight: 500; letter-spacing: -0.01em; }
.h-md { font-size: var(--vbe-font-size-350); line-height: var(--vbe-font-line-height-500); font-weight: 500; letter-spacing: -0.01em; }
.h-sm { font-size: var(--vbe-font-size-325); line-height: var(--vbe-font-line-height-500); font-weight: 500; letter-spacing: -0.01em; }
.h-xs { font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); font-weight: 500; letter-spacing: -0.005em; }
.b-xl { font-size: var(--vbe-font-size-400); line-height: var(--vbe-font-line-height-600); letter-spacing: 0; }
.b-lg { font-size: var(--vbe-font-size-350); line-height: var(--vbe-font-line-height-500); letter-spacing: -0.01em; }
.b-md { font-size: var(--vbe-font-size-325); line-height: var(--vbe-font-line-height-500); letter-spacing: -0.01em; }
.b-sm { font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); letter-spacing: -0.005em; }
.b-xs { font-size: var(--vbe-font-size-275); line-height: var(--vbe-font-line-height-400); font-weight: 500; letter-spacing: 0; }
.medium { font-weight: 500; }
.mono { font-family: var(--vbe-font-family-mono); font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); letter-spacing: 0; }
.mono-md { font-family: var(--vbe-font-family-mono); font-size: var(--vbe-font-size-325); line-height: var(--vbe-font-line-height-500); letter-spacing: 0; }
.secondary { color: var(--vbe-color-text-secondary); }
.tertiary { color: var(--vbe-color-text-tertiary); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Icons ---------- */
.icon { width: var(--vbe-size-icon-md); height: var(--vbe-size-icon-md); flex: none; fill: none; stroke: var(--vbe-color-icon-default); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* A Figma icon keeps its 1.5 px stroke at every size. */
.icon * { vector-effect: non-scaling-stroke; }
.icon--sm { width: var(--vbe-size-icon-sm); height: var(--vbe-size-icon-sm); }
.icon--secondary { stroke: var(--vbe-color-icon-secondary); }
.icon--success { stroke: var(--vbe-color-icon-success); }
.icon--warning { stroke: var(--vbe-color-icon-warning); }
.icon--critical { stroke: var(--vbe-color-icon-critical); }
.icon--info { stroke: var(--vbe-color-icon-info); }
/* App shell: sidebar, top bar, content panel, and the sign-in and error pages.
   The dark frame (sidebar on desktop, top bar on mobile) never moves: only the
   panel scrolls, inside its inset and its rounded corners. */
.app { display: flex; height: 100vh; height: 100dvh; padding: var(--vbe-space-200) var(--vbe-space-200) var(--vbe-space-200) 0; overflow: hidden; }
.sidebar { width: var(--vbe-size-layout-sidebar); flex: none; display: flex; flex-direction: column; gap: var(--vbe-space-400); padding: var(--vbe-space-400) var(--vbe-space-300) var(--vbe-space-300); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--vbe-color-border-strong) transparent; }
.sidebar__header { flex: none; display: flex; align-items: center; justify-content: space-between; min-height: var(--vbe-size-control-md); padding-left: var(--vbe-space-100); }
.sidebar__header a, .topbar a { display: flex; }
.sidebar__nav, .sidebar__group { flex: none; display: flex; flex-direction: column; gap: var(--vbe-space-025); }
.sidebar__spacer { flex: 1; }
.sidebar__section { padding: var(--vbe-space-200) var(--vbe-space-200) var(--vbe-space-100); color: var(--vbe-color-text-on-frame-secondary); font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); font-weight: 500; }
.logo { display: inline-flex; align-items: center; gap: var(--vbe-space-200); color: var(--vbe-color-text-on-frame-active); font-size: var(--vbe-font-size-400); line-height: var(--vbe-font-line-height-600); font-weight: 500; }
.logo__mark { flex: none; width: var(--vbe-size-control-sm); height: var(--vbe-size-control-sm); border-radius: var(--vbe-radius-200); background: var(--vbe-color-bg-surface); display: grid; place-items: center; }
.logo__mark svg { width: var(--vbe-size-control-sm); height: var(--vbe-size-control-sm); }
.logo__mark .line { stroke: var(--vbe-color-icon-default); stroke-width: 1.17; stroke-linecap: round; fill: none; }
.logo__mark .star { fill: var(--vbe-color-icon-default); }
.logo--canvas { color: var(--vbe-color-text-default); }
.logo--canvas .logo__mark { background: var(--vbe-color-bg-fill-brand); }
.logo--canvas .logo__mark .line { stroke: var(--vbe-color-icon-on-brand); }
.logo--canvas .logo__mark .star { fill: var(--vbe-color-icon-on-brand); }
.nav-item { flex: none; display: flex; align-items: center; gap: var(--vbe-space-200); height: var(--vbe-size-control-md); padding: 0 var(--vbe-space-200); border-radius: var(--vbe-radius-250); color: var(--vbe-color-text-on-frame); font-weight: 500; transition: background-color var(--vbe-motion-duration-100) var(--vbe-motion-ease-out), color var(--vbe-motion-duration-100) var(--vbe-motion-ease-out); }
.nav-item .icon { stroke: var(--vbe-color-icon-on-frame); transition: stroke var(--vbe-motion-duration-100) var(--vbe-motion-ease-out); }
.nav-item:hover { background: var(--vbe-color-bg-frame-hover); }
.nav-item[aria-current="page"] { position: relative; background: var(--vbe-color-bg-frame-selected); color: var(--vbe-color-text-on-frame-active); }
/* The fill of the current page has 1.3:1 against the frame: a bar of the
   active color marks it for those who cannot tell the two grays apart. */
.nav-item[aria-current="page"]::before { content: ""; position: absolute; inset: var(--vbe-space-200) auto var(--vbe-space-200) 0; width: var(--vbe-border-width-strong); border-radius: var(--vbe-radius-full); background: var(--vbe-color-icon-on-frame-active); }
.nav-item[aria-current="page"] .icon { stroke: var(--vbe-color-icon-on-frame-active); }
.nav-item__label { flex: 1; white-space: nowrap; }
.nav-item__count { flex: none; padding: 0 var(--vbe-space-150); border-radius: var(--vbe-radius-150); background: var(--vbe-color-bg-frame-selected); color: var(--vbe-color-text-on-frame); font-size: var(--vbe-font-size-275); line-height: var(--vbe-font-line-height-400); font-weight: 500; text-align: center; }
.nav-item[aria-current="page"] .nav-item__count { background: var(--vbe-color-bg-frame); }
.nav-user { flex: none; display: flex; align-items: center; gap: var(--vbe-space-200); padding: var(--vbe-space-150) var(--vbe-space-200); border-radius: var(--vbe-radius-250); color: var(--vbe-color-text-on-frame-active); font-weight: 500; transition: background-color var(--vbe-motion-duration-100) var(--vbe-motion-ease-out); }
.nav-user__name { flex: 1; }
.nav-user__env { flex: none; padding: 0 var(--vbe-space-150); border-radius: var(--vbe-radius-150); background: var(--vbe-color-bg-frame-selected); color: var(--vbe-color-text-on-frame); font-size: var(--vbe-font-size-275); line-height: var(--vbe-font-line-height-400); }
/* The operator row opens the account menu (who is signed in, sign out); the
   list sits above it, as wide as the sidebar's content. */
.menu.nav-account { display: block; flex: none; --vbe-shell-user: calc(var(--vbe-size-avatar-sm) + 2 * var(--vbe-space-150)); }
.nav-account > .nav-user:hover { background: var(--vbe-color-bg-frame-hover); }
.nav-account[open] > .nav-user { background: var(--vbe-color-bg-frame-selected); }
.nav-account .menu__list { width: calc(var(--vbe-size-layout-sidebar) - 2 * var(--vbe-space-300)); margin: 0; transform: translateY(calc(-100% - var(--vbe-shell-user) - var(--vbe-space-100))); }
.topbar { display: none; }

/* The sidebar collapsed to its icons. The header then shows the mark alone;
   the toggle covers it and appears on hover or keyboard focus. */
@media (min-width: 900px) {
  .app { --vbe-shell-rail: calc(var(--vbe-size-control-md) + 2 * var(--vbe-space-300)); }
  /* Collapsing and expanding slide: the labels are clipped, never wrapped. */
  .sidebar { transition: width var(--vbe-motion-duration-250) var(--vbe-motion-ease-out-emphasized); }
  .app[rail] .sidebar { width: var(--vbe-shell-rail); }
  .app[rail] .sidebar__header { position: relative; justify-content: center; padding-left: 0; }
  /* Hidden to the eye only: a link keeps its name for assistive technology. */
  .app[rail] .logo__name, .app[rail] .nav-item__label, .app[rail] .nav-user__name, .app[rail] .nav-user__env { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .app[rail] .sidebar__toggle { position: absolute; inset: 0; opacity: 0; border-radius: var(--vbe-radius-250); background: var(--vbe-color-bg-frame-selected); }
  .app[rail] .sidebar__header:hover .sidebar__toggle, .app[rail] .sidebar__toggle:focus-visible { opacity: 1; }
  /* Escape puts the mark back until the pointer leaves (`toggle-dismissed`,
     set by vbe-shell); without a pointer that hovers, the toggle is always shown. */
  .app[rail][toggle-dismissed] .sidebar__header:hover .sidebar__toggle:not(:focus-visible) { opacity: 0; }
  @media (hover: none) { .app[rail] .sidebar__toggle { opacity: 1; } }
  .app[rail] .nav-item { position: relative; justify-content: center; padding: 0; }
  .app[rail] .nav-item__count { position: absolute; top: var(--vbe-space-100); right: var(--vbe-space-100); width: var(--vbe-space-150); height: var(--vbe-space-150); padding: 0; border-radius: var(--vbe-radius-full); background: var(--vbe-color-icon-on-frame-active); font-size: 0; }
  .app[rail] .nav-item[aria-current="page"] .nav-item__count { background: var(--vbe-color-icon-on-frame-active); }
  .app[rail] .sidebar__section { height: var(--vbe-border-width-default); margin: var(--vbe-space-200) var(--vbe-space-200) calc(var(--vbe-space-200) - var(--vbe-border-width-default)); padding: 0; background: var(--vbe-color-border-frame); font-size: 0; line-height: 0; }
  .app[rail] .nav-user { justify-content: center; padding: var(--vbe-space-150) 0; }
}
/* The rounded box does not scroll: it clips the scroller inside it, classic
   scrollbar included, to its corners. Fixed boxes (menus, the log drawer) are
   not clipped by `overflow`. */
/* Only the panel scrolls: the document itself never does, whatever a visually
   hidden text would add to its height. */
body:has(> vbe-shell) { overflow: hidden; }
.sidebar { position: relative; }
.panel-frame { flex: 1; min-width: 0; min-height: 0; overflow: hidden; border-radius: var(--vbe-radius-500); background: var(--vbe-color-bg-canvas); }
.panel { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: none; padding: var(--vbe-space-800) var(--vbe-space-800) var(--vbe-space-1200); scrollbar-width: thin; scrollbar-color: var(--vbe-color-border-strong) transparent; }
.panel__inner { max-width: var(--vbe-size-layout-content-max); margin: 0 auto; display: flex; flex-direction: column; gap: var(--vbe-space-600); }
.auth { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--vbe-space-600); padding: var(--vbe-space-800); }
.auth__card { width: 420px; max-width: 100%; display: flex; flex-direction: column; gap: var(--vbe-space-600); padding: var(--vbe-space-800); border-radius: var(--vbe-radius-500); background: var(--vbe-color-bg-surface); box-shadow: var(--vbe-shadow-600); }
.auth__titles { display: flex; flex-direction: column; gap: var(--vbe-space-100); }
.auth__form { display: flex; flex-direction: column; gap: var(--vbe-space-400); }
.auth__form .field__label { font-size: var(--vbe-font-size-350); }
.auth__footnote { text-align: center; }
.auth__caption { color: var(--vbe-color-text-on-frame-secondary); font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); }
.error-page { min-height: calc(100vh - 2 * var(--vbe-space-200)); min-height: calc(100dvh - 2 * var(--vbe-space-200)); display: grid; place-items: center; background: var(--vbe-color-bg-canvas); border-radius: var(--vbe-radius-500); margin: var(--vbe-space-200); }

@media (max-width: 899px) {
  /* The navigation is a drawer as wide as the sidebar plus the top bar (304 px);
     it pushes the page aside, dimmed, as in "Navigation ouverte". */
  .app { --vbe-shell-drawer: calc(var(--vbe-size-layout-sidebar) + var(--vbe-size-layout-topbar)); flex-direction: column; padding: 0; }
  .sidebar { display: none; position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--vbe-shell-drawer); max-width: 100%; background: var(--vbe-color-bg-frame); }
  .app[nav-open] .sidebar { display: flex; }
  .app[nav-open] .topbar { visibility: hidden; }
  .app[nav-open] .panel-frame { transform: translate(var(--vbe-shell-drawer), var(--vbe-space-200)); }
  .app[nav-open]::after { content: ""; position: fixed; inset: var(--vbe-space-1600) 0 0 var(--vbe-shell-drawer); z-index: 25; border-radius: var(--vbe-radius-500) 0 0 0; background: var(--vbe-color-bg-overlay); }
  .topbar { flex: none; display: flex; align-items: center; justify-content: space-between; height: var(--vbe-size-layout-topbar); padding: 0 var(--vbe-space-200); }
  .topbar .icon-btn .icon { stroke: var(--vbe-color-icon-on-frame-active); }
  .menu.topbar__account { display: block; }
  .topbar__account > summary { display: grid; place-items: center; width: var(--vbe-size-control-lg); height: var(--vbe-size-control-lg); border-radius: var(--vbe-radius-300); }
  .topbar__account[open] > summary { background: var(--vbe-color-bg-frame-selected); }
  .topbar__account .menu__list { margin-left: calc(var(--vbe-size-control-lg) - 240px); }
  .panel-frame { border-radius: var(--vbe-radius-500) var(--vbe-radius-500) 0 0; }
  .panel { padding: var(--vbe-space-500) var(--vbe-space-400) var(--vbe-space-1000); }
  .panel__inner { gap: var(--vbe-space-500); }
  .auth { padding: var(--vbe-space-600) var(--vbe-space-400); }
  .auth__card { padding: var(--vbe-space-500); }
}
/* Components of the library: actions, feedback, forms, navigation. */

/* ---------- Button, Icon Button, Link ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--vbe-space-150); height: var(--vbe-size-control-md); padding: 0 var(--vbe-space-300); border: 0; border-radius: var(--vbe-radius-full); background: transparent; color: var(--vbe-color-text-default); font-size: var(--vbe-font-size-325); line-height: var(--vbe-font-line-height-500); font-weight: 500; white-space: nowrap; transition: background-color var(--vbe-motion-duration-100) var(--vbe-motion-ease-out), transform var(--vbe-motion-duration-100) var(--vbe-motion-ease-out); }
/* A press is felt: the button gives way a little. */
.btn:active:not(:disabled), .icon-btn:active:not(:disabled, [aria-disabled="true"]) { transform: scale(0.97); }
.btn .icon { width: var(--vbe-size-icon-sm); height: var(--vbe-size-icon-sm); stroke: var(--vbe-color-icon-default); }
.btn--primary { background: var(--vbe-color-bg-fill-brand); color: var(--vbe-color-text-on-brand); box-shadow: var(--vbe-shadow-button-primary); }
.btn--primary .icon { stroke: var(--vbe-color-icon-on-brand); }
.btn--primary:hover { background: var(--vbe-color-bg-fill-brand-hover); }
.btn--secondary { background: var(--vbe-color-bg-fill-secondary); }
.btn--secondary:hover { background: var(--vbe-color-bg-fill-secondary-hover); }
.btn--tertiary:hover { background: var(--vbe-color-bg-surface-tertiary); }
.btn--critical { background: var(--vbe-color-bg-fill-critical); color: var(--vbe-color-text-on-critical); box-shadow: var(--vbe-shadow-button-critical); }
.btn--critical .icon { stroke: var(--vbe-color-text-on-critical); }
.btn--critical:hover { background: var(--vbe-color-bg-fill-critical-hover); }
.btn--lg { height: var(--vbe-size-control-lg); padding: 0 var(--vbe-space-500); font-size: var(--vbe-font-size-350); }
.btn--block { width: 100%; }
.btn:disabled { background: var(--vbe-color-bg-fill-disabled); color: var(--vbe-color-text-disabled); box-shadow: none; cursor: default; }
.btn:disabled .icon { stroke: var(--vbe-color-icon-disabled); }
.btn--tertiary:disabled { background: transparent; }
.icon-btn { display: inline-grid; place-items: center; flex: none; width: var(--vbe-size-control-md); height: var(--vbe-size-control-md); padding: 0; border: 0; border-radius: var(--vbe-radius-full); background: transparent; transition: background-color var(--vbe-motion-duration-100) var(--vbe-motion-ease-out), transform var(--vbe-motion-duration-100) var(--vbe-motion-ease-out); }
.icon-btn .icon { width: var(--vbe-size-icon-sm); height: var(--vbe-size-icon-sm); stroke: var(--vbe-color-icon-secondary); }
.icon-btn:hover { background: var(--vbe-color-bg-surface-tertiary); }
.icon-btn:hover .icon { stroke: var(--vbe-color-icon-default); }
.icon-btn--secondary { background: var(--vbe-color-bg-fill-secondary); }
.icon-btn--secondary .icon { stroke: var(--vbe-color-icon-default); }
.icon-btn--secondary:hover { background: var(--vbe-color-bg-fill-secondary-hover); }
.icon-btn--frame .icon { stroke: var(--vbe-color-icon-on-frame); }
.icon-btn--frame:hover { background: var(--vbe-color-bg-frame-selected); }
.icon-btn--frame:hover .icon { stroke: var(--vbe-color-icon-on-frame-active); }
.icon-btn--lg { width: var(--vbe-size-control-lg); height: var(--vbe-size-control-lg); }
.icon-btn--lg .icon { width: var(--vbe-size-icon-md); height: var(--vbe-size-icon-md); }
/* No disabled Icon Button in the library: it follows the disabled Button. */
.icon-btn:disabled, .icon-btn[aria-disabled="true"] { pointer-events: none; cursor: default; }
.icon-btn:disabled .icon, .icon-btn[aria-disabled="true"] .icon { stroke: var(--vbe-color-icon-disabled); }
.icon-btn--secondary:disabled, .icon-btn--secondary[aria-disabled="true"] { background: var(--vbe-color-bg-fill-disabled); }
.link { color: var(--vbe-color-text-link); font-weight: 500; }

/* ---------- Badge, Status, Code, Kbd, Avatar ---------- */
.badge { display: inline-flex; align-items: center; gap: var(--vbe-space-150); padding: var(--vbe-space-050) var(--vbe-space-200); border-radius: var(--vbe-radius-150); background: var(--vbe-color-bg-surface-tertiary); color: var(--vbe-color-text-secondary); font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); font-weight: 500; white-space: nowrap; }
.badge::before { content: ""; flex: none; width: var(--vbe-space-150); height: var(--vbe-space-150); border-radius: var(--vbe-radius-full); background: var(--vbe-color-icon-secondary); }
.badge--plain::before { display: none; }
.badge--success { background: var(--vbe-color-bg-success); color: var(--vbe-color-text-success); }
.badge--success::before { background: var(--vbe-color-icon-success); }
.badge--warning { background: var(--vbe-color-bg-warning); color: var(--vbe-color-text-warning); }
.badge--warning::before { background: var(--vbe-color-icon-warning); }
.badge--critical { background: var(--vbe-color-bg-critical); color: var(--vbe-color-text-critical); }
.badge--critical::before { background: var(--vbe-color-icon-critical); }
.badge--info { background: var(--vbe-color-bg-info); color: var(--vbe-color-text-info); }
.badge--info::before { background: var(--vbe-color-icon-info); }
.badge--magic { background: var(--vbe-color-bg-magic); color: var(--vbe-color-text-magic); }
.badge--magic::before { background: var(--vbe-color-icon-magic); }
.status { display: inline-flex; align-items: center; gap: var(--vbe-space-200); color: var(--vbe-color-text-default); font-weight: 500; white-space: nowrap; }
.status::before { content: ""; flex: none; width: var(--vbe-space-200); height: var(--vbe-space-200); border-radius: var(--vbe-radius-full); background: var(--vbe-color-icon-success); }
.status--warning::before { background: var(--vbe-color-icon-warning); }
.status--critical::before { background: var(--vbe-color-icon-critical); }
.status--neutral::before { background: var(--vbe-color-icon-secondary); }
.code { display: inline-block; padding: var(--vbe-space-025) var(--vbe-space-150); border-radius: var(--vbe-radius-100); background: var(--vbe-color-bg-surface-tertiary); color: var(--vbe-color-text-default); font-family: var(--vbe-font-family-mono); font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); }
.kbd { display: inline-block; padding: var(--vbe-space-025) var(--vbe-space-150); border: var(--vbe-border-width-default) solid var(--vbe-color-border-default); border-radius: var(--vbe-radius-100); background: var(--vbe-color-bg-surface); color: var(--vbe-color-text-secondary); font-family: var(--vbe-font-family-sans); font-size: var(--vbe-font-size-275); line-height: var(--vbe-font-line-height-400); font-weight: 500; }
.avatar { display: inline-grid; place-items: center; width: var(--vbe-size-avatar-sm); height: var(--vbe-size-avatar-sm); border-radius: var(--vbe-radius-200); background: var(--vbe-color-bg-magic); color: var(--vbe-color-text-magic); font-size: var(--vbe-font-size-275); line-height: var(--vbe-font-line-height-400); font-weight: 500; flex: none; }
.avatar--md { width: var(--vbe-size-avatar-md); height: var(--vbe-size-avatar-md); font-size: var(--vbe-font-size-300); }

/* ---------- Banner, Empty State, Skeleton Row ---------- */
.banner { display: flex; align-items: flex-start; gap: var(--vbe-space-300); padding: var(--vbe-space-400); border-radius: var(--vbe-radius-300); background: var(--vbe-color-bg-info); color: var(--vbe-color-text-default); }
.banner__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--vbe-space-050); }
.banner__title { font-weight: 500; color: var(--vbe-color-text-info); }
.banner > .icon { stroke: var(--vbe-color-icon-info); }
.banner .btn { flex: none; }
.banner--success { background: var(--vbe-color-bg-success); }
.banner--success .banner__title { color: var(--vbe-color-text-success); }
.banner--success > .icon { stroke: var(--vbe-color-icon-success); }
.banner--warning { background: var(--vbe-color-bg-warning); }
.banner--warning .banner__title { color: var(--vbe-color-text-warning); }
.banner--warning > .icon { stroke: var(--vbe-color-icon-warning); }
.banner--critical { background: var(--vbe-color-bg-critical); }
.banner--critical .banner__title { color: var(--vbe-color-text-critical); }
.banner--critical > .icon { stroke: var(--vbe-color-icon-critical); }
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--vbe-space-400); padding: var(--vbe-space-1000) var(--vbe-space-600); text-align: center; }
.empty__icon { display: grid; place-items: center; flex: none; width: var(--vbe-space-1200); height: var(--vbe-space-1200); border-radius: var(--vbe-radius-full); background: var(--vbe-color-bg-surface-tertiary); }
.empty__icon .icon { stroke: var(--vbe-color-icon-secondary); }
.empty__text { display: flex; flex-direction: column; gap: var(--vbe-space-100); width: 100%; }
.skeleton-row { display: flex; align-items: center; gap: var(--vbe-space-300); padding: var(--vbe-space-400) var(--vbe-space-500); border-bottom: var(--vbe-border-width-default) solid var(--vbe-color-border-secondary); }
.skeleton-row:last-child { border-bottom: 0; }
.skeleton { height: var(--vbe-space-300); border-radius: var(--vbe-radius-100); background: var(--vbe-color-bg-surface-tertiary); }
.skeleton--block { width: var(--vbe-size-control-md); height: var(--vbe-size-control-md); border-radius: var(--vbe-radius-200); flex: none; }
.skeleton-row__lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--vbe-space-200); }
/* 320 and 140 px: the widths of the Figma Skeleton Row lines, which have no variable. */
.skeleton-row__lines .skeleton:first-child { width: min(320px, 100%); }
.skeleton-row__lines .skeleton:last-child { width: min(140px, 100%); }
.skeleton--badge { width: var(--vbe-space-1600); flex: none; }

/* ---------- Text Field (a select is a Text Field with a chevron-down) ---------- */
.field { display: flex; flex-direction: column; gap: var(--vbe-space-100); min-width: 0; }
.field__label { font-weight: 500; }
/* A label names its control; it is not one more way to click it. */
label.field__label { cursor: default; }
.field:has(.input--lg, .select--lg) .field__label { font-size: var(--vbe-font-size-350); }
.field__help { font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); color: var(--vbe-color-text-secondary); }
.field__help--error { color: var(--vbe-color-text-critical); }
.input, .select, .textarea { appearance: none; width: 100%; height: var(--vbe-size-control-md); padding: 0 var(--vbe-space-300); border: var(--vbe-border-width-default) solid var(--vbe-color-border-strong); border-radius: var(--vbe-radius-250); background-color: var(--vbe-color-bg-input); box-shadow: var(--vbe-shadow-200); color: var(--vbe-color-text-default); transition: border-color var(--vbe-motion-duration-100) var(--vbe-motion-ease-out), box-shadow var(--vbe-motion-duration-100) var(--vbe-motion-ease-out); }
.select { padding-right: calc(var(--vbe-space-300) + var(--vbe-size-icon-sm) + var(--vbe-space-200)); background-image: var(--vbe-image-chevron-down); background-repeat: no-repeat; background-position: right var(--vbe-space-300) center; background-size: var(--vbe-size-icon-sm); text-overflow: ellipsis; cursor: pointer; }
.input::placeholder, .textarea::placeholder { color: var(--vbe-color-text-tertiary); opacity: 1; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--vbe-color-border-critical); }
/* Focus: a 2 px inner stroke, drawn by the border and an inset shadow so the value does not move. */
.input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--vbe-color-border-focus); box-shadow: inset 0 0 0 var(--vbe-border-width-default) var(--vbe-color-border-focus), var(--vbe-shadow-200); }
.input:disabled, .input[readonly], .select:disabled, .textarea:disabled, .textarea[readonly] { background-color: var(--vbe-color-bg-fill-disabled); border-color: var(--vbe-color-border-secondary); box-shadow: none; color: var(--vbe-color-text-disabled); }
/* A read-only value is still read: color/text/disabled has less than 4.5:1 on the disabled fill. */
.input[readonly], .textarea[readonly] { color: var(--vbe-color-text-secondary); }
.select:disabled { background-image: var(--vbe-image-chevron-down-disabled); cursor: default; }
.input--lg, .select--lg { height: var(--vbe-size-control-lg); border-radius: var(--vbe-radius-300); font-size: var(--vbe-font-size-400); line-height: var(--vbe-font-line-height-600); }
.textarea { height: auto; min-height: 72px; padding: var(--vbe-space-200) var(--vbe-space-300); resize: vertical; }
.textarea.mono { font-family: var(--vbe-font-family-mono); }
/* A password or secret field with the button that shows what is typed. */
.secret { position: relative; display: block; }
.secret .input { padding-right: calc(var(--vbe-space-300) + var(--vbe-size-icon-sm) + var(--vbe-space-200)); }
.secret__reveal { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: calc(var(--vbe-size-icon-sm) + 2 * (var(--vbe-space-300) + var(--vbe-border-width-default))); height: var(--vbe-size-control-md); padding: 0; border: 0; border-radius: var(--vbe-radius-250); background: transparent; }
.secret:has(.input--lg) .secret__reveal { height: var(--vbe-size-control-lg); border-radius: var(--vbe-radius-300); }
.secret__reveal:hover .icon, .secret__reveal[aria-pressed="true"] .icon { stroke: var(--vbe-color-icon-default); }

/* ---------- Checkbox, Radio ---------- */
.check { display: inline-flex; align-items: center; gap: var(--vbe-space-200); }
.check input { appearance: none; display: grid; place-items: center; flex: none; width: var(--vbe-size-icon-sm); height: var(--vbe-size-icon-sm); margin: 0; border: var(--vbe-border-width-default) solid var(--vbe-color-border-strong); border-radius: var(--vbe-radius-100); background: var(--vbe-color-bg-input); cursor: pointer; }
.check input[type="radio"] { border-radius: var(--vbe-radius-full); }
.check input[type="checkbox"]:checked { border-color: var(--vbe-color-bg-fill-brand); background: var(--vbe-color-bg-fill-brand); }
.check input[type="checkbox"]:checked::before { content: ""; width: var(--vbe-space-300); height: var(--vbe-space-300); background: var(--vbe-color-icon-on-brand); mask: var(--vbe-image-check) center / contain no-repeat; }
.check input[type="radio"]:checked { border: var(--vbe-border-width-strong) solid var(--vbe-color-bg-fill-brand); background: var(--vbe-color-bg-fill-brand); box-shadow: inset 0 0 0 var(--vbe-space-050) var(--vbe-color-bg-input); }
.check:has(input:disabled) { color: var(--vbe-color-text-disabled); }
.check input:disabled { border-color: var(--vbe-color-border-secondary); background: var(--vbe-color-bg-fill-disabled); cursor: default; }
.check input[type="checkbox"]:disabled:checked { border-color: var(--vbe-color-icon-disabled); background: var(--vbe-color-icon-disabled); }
.check input[type="radio"]:disabled:checked { border-color: var(--vbe-color-icon-disabled); background: var(--vbe-color-icon-disabled); box-shadow: inset 0 0 0 var(--vbe-space-050) var(--vbe-color-bg-fill-disabled); }
.fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--vbe-space-300); }
.fieldset__legend { padding: 0 0 var(--vbe-space-200); display: flex; flex-direction: column; gap: var(--vbe-space-025); }
.fieldset__help { font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); color: var(--vbe-color-text-secondary); font-weight: 400; }
.choices { display: flex; flex-direction: column; gap: var(--vbe-space-300); }
.choice { display: flex; flex-direction: column; gap: var(--vbe-space-050); }
.choice__hint { padding-left: calc(var(--vbe-size-icon-sm) + var(--vbe-space-200)); font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); color: var(--vbe-color-text-secondary); }
/* Rights List: groups 20 px apart, each a heading/sm caption 12 px above its boxes. */
.rights { display: flex; flex-direction: column; gap: var(--vbe-space-500); }
.rights__group .fieldset__legend { padding-bottom: var(--vbe-space-300); }
/* A role or a right that cannot be changed is still what the page says of the
   account: color/text/disabled and color/icon/disabled have about 2:1 on a
   surface, the secondary ones 4.5:1 and 3:1. */
.rights .check:has(input:disabled), .choice .check:has(input:disabled) { color: var(--vbe-color-text-secondary); }
.rights .check input[type="checkbox"]:disabled:checked, .choice .check input[type="radio"]:disabled:checked { border-color: var(--vbe-color-icon-secondary); background: var(--vbe-color-icon-secondary); }
/* Selection=All: the rights of an administrator are stated, not chosen. The
   boxes are disabled for the keyboard and assistive technology and keep the
   look of the checked Checkbox. */
.rights--all .check:has(input:disabled) { color: var(--vbe-color-text-default); }
.rights--all .check input[type="checkbox"]:disabled:checked { border-color: var(--vbe-color-bg-fill-brand); background: var(--vbe-color-bg-fill-brand); }
/* The legend of the list in a dialog: a title and its help, 12 px above the first group. */
.rights-field { display: flex; flex-direction: column; min-width: 0; }
.row-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vbe-space-400); }
/* Option List: one choice among many, narrowed by the Search Field above it.
   It scrolls after seven rows. */
.option-picker { display: flex; flex-direction: column; gap: var(--vbe-space-300); min-width: 0; }
.option-picker .search { width: 100%; }
.option-list { display: flex; flex-direction: column; gap: var(--vbe-space-300); max-height: calc(7 * var(--vbe-font-line-height-500) + 8 * var(--vbe-space-300) + 2 * var(--vbe-border-width-default)); overflow-y: auto; overscroll-behavior: contain; padding: var(--vbe-space-300); border: var(--vbe-border-width-default) solid var(--vbe-color-border-default); border-radius: var(--vbe-radius-250); }
/* Option Row: the radio, its label, and a tag on the right when the choice needs a remark. */
.option { display: flex; flex: none; }
.option__label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.option .badge { flex: none; }
.option-skeleton { display: flex; flex: none; align-items: center; gap: var(--vbe-space-200); height: var(--vbe-font-line-height-500); }
.option-skeleton .skeleton:first-child { flex: none; width: var(--vbe-size-icon-sm); height: var(--vbe-size-icon-sm); border-radius: var(--vbe-radius-full); }
.option-skeleton .skeleton:last-child { width: min(160px, 100%); }
.option-skeleton:nth-child(2) .skeleton:last-child { width: min(220px, 100%); }
.option-skeleton:nth-child(3) .skeleton:last-child { width: min(120px, 100%); }

/* ---------- Search Field, Filter Chip, Tabs ---------- */
/* 320 px: the width of the Figma Search Field, which has no variable. */
.search { position: relative; display: flex; align-items: center; width: 320px; max-width: 100%; }
.search .icon { position: absolute; left: calc(var(--vbe-space-300) + var(--vbe-border-width-default)); width: var(--vbe-size-icon-sm); height: var(--vbe-size-icon-sm); stroke: var(--vbe-color-icon-secondary); pointer-events: none; }
.search .input { padding-left: calc(var(--vbe-space-300) + var(--vbe-size-icon-sm) + var(--vbe-space-200)); border-color: var(--vbe-color-border-default); }
.search .input:focus { border-color: var(--vbe-color-border-focus); }
/* A native select drawn as the Filter Chip: label, 4 px, chevron-down, 8 px. */
.chip { appearance: none; field-sizing: content; height: var(--vbe-size-control-sm); max-width: 100%; padding: 0 calc(var(--vbe-space-200) + var(--vbe-size-icon-sm) + var(--vbe-space-100)) 0 var(--vbe-space-300); border: 0; border-radius: var(--vbe-radius-full); background: var(--vbe-color-bg-fill-secondary) var(--vbe-image-chevron-down) no-repeat right var(--vbe-space-200) center / var(--vbe-size-icon-sm); color: var(--vbe-color-text-default); font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); font-weight: 500; text-overflow: ellipsis; cursor: pointer; transition: background-color var(--vbe-motion-duration-100) var(--vbe-motion-ease-out); }
.chip:hover:not(:disabled) { background-color: var(--vbe-color-bg-fill-secondary-hover); }
/* The chip has no border: the active one is ringed inside its box. */
.chip--active { background-color: var(--vbe-color-bg-surface-selected); box-shadow: inset 0 0 0 var(--vbe-border-width-default) var(--vbe-color-border-strong); }
.chip:disabled { background-color: var(--vbe-color-bg-fill-disabled); background-image: var(--vbe-image-chevron-down-disabled); color: var(--vbe-color-text-disabled); cursor: default; }
.tabs { display: flex; gap: var(--vbe-space-100); }
.tab { display: inline-flex; align-items: center; justify-content: center; gap: var(--vbe-space-150); height: var(--vbe-size-control-sm); padding: 0 var(--vbe-space-300); border-radius: var(--vbe-radius-full); color: var(--vbe-color-text-secondary); font-weight: 500; white-space: nowrap; }
.tab[aria-current] { background: var(--vbe-color-bg-surface-selected); color: var(--vbe-color-text-default); }

/* ---------- Copy Field, Breadcrumb, Pagination, Divider ---------- */
.copy-field { display: flex; align-items: center; gap: var(--vbe-space-200); padding: var(--vbe-space-100) var(--vbe-space-100) var(--vbe-space-100) var(--vbe-space-300); border: var(--vbe-border-width-default) solid var(--vbe-color-border-default); border-radius: var(--vbe-radius-250); background: var(--vbe-color-bg-surface-secondary); color: var(--vbe-color-text-default); }
.copy-field__value { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: var(--vbe-font-family-mono); font-size: var(--vbe-font-size-325); line-height: var(--vbe-font-line-height-500); }
.breadcrumb { display: flex; align-items: center; gap: var(--vbe-space-100); color: var(--vbe-color-text-secondary); }
.breadcrumb .icon { width: var(--vbe-size-icon-sm); height: var(--vbe-size-icon-sm); stroke: var(--vbe-color-icon-secondary); }
.breadcrumb [aria-current] { color: var(--vbe-color-text-default); font-weight: 500; }
a.list-row { transition: background-color var(--vbe-motion-duration-100) var(--vbe-motion-ease-out); }
a.list-row:hover { background: var(--vbe-color-bg-surface-hover); }
/* A row fills its card, which clips what overflows it: the ring is drawn inside. */
a.list-row:focus-visible { outline-offset: calc(-1 * var(--vbe-border-width-strong)); }
.pagination { display: flex; align-items: center; gap: var(--vbe-space-200); color: var(--vbe-color-text-secondary); }
.pagination__buttons { display: flex; gap: var(--vbe-space-100); }
.divider { display: flex; align-items: center; gap: var(--vbe-space-300); color: var(--vbe-color-text-tertiary); font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); }
.divider::before, .divider::after { content: ""; flex: 1; height: var(--vbe-border-width-default); background: var(--vbe-color-border-default); }

/* Every Text Field is Large on mobile, with its body/lg-medium label. */
@media (max-width: 899px) {
  .search { width: 100%; }
  .input, .select { height: var(--vbe-size-control-lg); border-radius: var(--vbe-radius-300); font-size: var(--vbe-font-size-400); line-height: var(--vbe-font-line-height-600); }
  .field__label { font-size: var(--vbe-font-size-350); }
  .secret__reveal { height: var(--vbe-size-control-lg); border-radius: var(--vbe-radius-300); }
  .row-fields { grid-template-columns: 1fr; }
}
/* Data: page header, toolbar, cards, list rows, tables, definitions, drawer. */

/* ---------- Page header (Section/Page Header) ---------- */
.page-header { display: flex; align-items: flex-end; gap: var(--vbe-space-400); }
.page-header__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--vbe-space-100); }
.page-header__actions { display: flex; flex: none; gap: var(--vbe-space-200); }
.page-header__actions form { display: contents; }
.contents { display: contents; }

/* ---------- Page grids ---------- */
.overview { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--vbe-space-400); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--vbe-space-400); min-width: 0; }
.columns-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vbe-space-400); align-items: start; }

/* ---------- Card and Card Header ---------- */
/* No border: the shadow draws the hairline of the card (de-layering). */
.card { border-radius: var(--vbe-radius-500); background: var(--vbe-color-bg-surface); box-shadow: var(--vbe-shadow-100); overflow: hidden; min-width: 0; }
.card__header { display: flex; align-items: center; gap: var(--vbe-space-300); padding: var(--vbe-space-300) var(--vbe-space-300) var(--vbe-space-300) var(--vbe-space-500); border-bottom: var(--vbe-border-width-default) solid var(--vbe-color-border-secondary); }
.card__titles { flex: 1; min-width: 0; }
.card__body { display: flex; flex-direction: column; gap: var(--vbe-space-400); padding: var(--vbe-space-500); }
.card__body--bordered { border-bottom: var(--vbe-border-width-default) solid var(--vbe-color-border-secondary); }
.card__body--prose { gap: var(--vbe-space-500); }
.card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--vbe-space-300); padding: var(--vbe-space-300) var(--vbe-space-500); }
.card__footer--actions { justify-content: flex-start; gap: var(--vbe-space-200); padding: var(--vbe-space-400) var(--vbe-space-500); border-top: var(--vbe-border-width-default) solid var(--vbe-color-border-secondary); }
/* The buttons that end a card (Section/Operator Account). */
.card__footer--buttons { justify-content: flex-start; gap: var(--vbe-space-200); border-top: var(--vbe-border-width-default) solid var(--vbe-color-border-secondary); }
.card__label { padding: var(--vbe-space-400) var(--vbe-space-500) var(--vbe-space-100); color: var(--vbe-color-text-secondary); }

/* ---------- List Row ---------- */
.list-row { display: flex; align-items: center; gap: var(--vbe-space-300); padding: var(--vbe-space-300) var(--vbe-space-500); border-bottom: var(--vbe-border-width-default) solid var(--vbe-color-border-secondary); min-width: 0; }
.list-row:last-child { border-bottom: 0; }
.list-row__icon { display: grid; place-items: center; width: var(--vbe-size-control-md); height: var(--vbe-size-control-md); border-radius: var(--vbe-radius-200); background: var(--vbe-color-bg-surface-tertiary); flex: none; }
.list-row__icon .icon { width: var(--vbe-size-icon-sm); height: var(--vbe-size-icon-sm); }
.list-row__content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* A long title or summary wraps: nothing a row says is cut. */
.list-row__title { font-weight: 500; overflow-wrap: anywhere; }
/* Title style=Code: code/sm-medium, whichever mono class the caller used. */
.list-row__title:has(> .mono, > .mono-md), .list-row__title > .mono, .list-row__title > .mono-md { font-family: var(--vbe-font-family-mono); font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); }
.list-row__subtitle { font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); color: var(--vbe-color-text-secondary); overflow-wrap: anywhere; }
.list-row__subtitle:empty { display: none; }
.list-row__meta { flex: none; font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); color: var(--vbe-color-text-tertiary); white-space: nowrap; }
.list-row > .badge { flex: none; }

/* ---------- Check Row ---------- */
.check-row { display: flex; align-items: flex-start; gap: var(--vbe-space-300); padding: var(--vbe-space-300) var(--vbe-space-500); border-bottom: var(--vbe-border-width-default) solid var(--vbe-color-border-secondary); }
.check-row:last-child { border-bottom: 0; }
.check-row__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--vbe-space-025); }
.check-row__name { font-family: var(--vbe-font-family-mono); font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-row__detail { font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); color: var(--vbe-color-text-secondary); overflow-wrap: anywhere; }
.check-row > .badge { flex: none; }

/* ---------- Definition ---------- */
.definitions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vbe-space-400); }
.card__body.definitions { display: grid; }
.definition { display: flex; flex-direction: column; gap: var(--vbe-space-050); min-width: 0; }
.definition dt { font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); color: var(--vbe-color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.definition dd { font-weight: 500; overflow-wrap: anywhere; }
.definition--wide { grid-column: 1 / -1; }
/* Value style=Code: code/md. */
.definition dd .mono, .definition dd .mono-md { font-size: var(--vbe-font-size-325); line-height: var(--vbe-font-line-height-500); font-weight: 400; }
.definitions--truncate dd, .definitions--truncate dd > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.definitions--truncate dd > * { display: block; }

/* ---------- Code Block and prose ---------- */
.code-block { margin: 0; padding: var(--vbe-space-400); border: var(--vbe-border-width-default) solid var(--vbe-color-border-secondary); border-radius: var(--vbe-radius-300); background: var(--vbe-color-bg-surface-secondary); font-family: var(--vbe-font-family-mono); font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); white-space: pre-wrap; overflow-wrap: anywhere; }
.titled { display: flex; flex-direction: column; gap: var(--vbe-space-200); min-width: 0; }
.prose { display: flex; flex-direction: column; gap: var(--vbe-space-100); }
.prose p { white-space: pre-line; }
.prose__lines { display: flex; flex-direction: column; }

/* ---------- Table Toolbar ---------- */
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--vbe-space-300); }
.toolbar__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vbe-space-200); min-width: 0; }

/* ---------- Tables (Table Header/* and Table Row/*) ----------
   A real <table> laid out as one grid per row: the column widths are those of
   the Figma rows (no token exists for them), the first column fills. */
.table { display: block; width: 100%; border-collapse: collapse; }
.table thead, .table tbody { display: block; }
.table tr { display: grid; grid-template-columns: var(--table-columns); align-items: center; column-gap: var(--vbe-space-400); padding: var(--vbe-space-300) var(--vbe-space-500); border-bottom: var(--vbe-border-width-default) solid var(--vbe-color-border-secondary); }
.table thead tr { padding-top: var(--vbe-space-200); padding-bottom: var(--vbe-space-200); background: var(--vbe-color-bg-surface-secondary); }
.table th, .table td { display: block; min-width: 0; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.table th { color: var(--vbe-color-text-secondary); font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); font-weight: 500; letter-spacing: -0.005em; }
.table th.num, .table td.num { text-align: right; }
.table td .badge { vertical-align: top; }
.table td a:focus-visible { outline-offset: calc(-1 * var(--vbe-border-width-strong)); }
.table--dense tbody tr { padding-top: var(--vbe-space-200); padding-bottom: var(--vbe-space-200); }
.table tbody tr { transition: background-color var(--vbe-motion-duration-100) var(--vbe-motion-ease-out); }
.table tbody tr:hover { background: var(--vbe-color-bg-surface-hover); }
.table tbody tr[aria-current="true"] { background: var(--vbe-color-bg-surface-selected); }
/* color/text/tertiary has less than 4.5:1 on the selected fill. */
.table tbody tr[aria-current="true"] .meta { color: var(--vbe-color-text-secondary); }
.table .action { display: flex; justify-content: flex-end; overflow: visible; }
.table .action form { display: contents; }
.table--clients { --table-columns: minmax(160px, 1fr) minmax(0, 110px) minmax(0, 100px) minmax(0, 80px) minmax(0, 60px) minmax(0, 100px) minmax(0, 100px) var(--vbe-size-control-md); }
.table--access { --table-columns: minmax(160px, 1fr) minmax(0, 170px) minmax(0, 230px) minmax(0, 150px) minmax(0, 130px) minmax(0, 90px) var(--vbe-size-control-md); }
.table--logs { --table-columns: minmax(0, 140px) minmax(0, 210px) minmax(0, 100px) minmax(0, 160px) minmax(160px, 1fr) minmax(0, 100px); }
.table--briefs { --table-columns: minmax(180px, 1fr) minmax(0, 130px) minmax(0, 190px) minmax(0, 100px) minmax(0, 90px) minmax(0, 70px) minmax(0, 120px) var(--vbe-size-control-md); }
.table--reports { --table-columns: minmax(160px, 1fr) minmax(0, 190px) minmax(0, 200px) minmax(0, 110px) minmax(0, 110px) var(--vbe-size-control-md); }
.table--operators { --table-columns: minmax(200px, 1fr) minmax(0, 150px) minmax(0, 190px) minmax(0, 150px) minmax(0, 130px) var(--vbe-size-control-md); }
.table--themes { --table-columns: minmax(200px, 1fr) minmax(0, 110px) minmax(0, 110px) minmax(0, 190px) minmax(0, 110px) minmax(0, 130px) var(--vbe-size-control-md); }
.table--theme-runs { --table-columns: minmax(200px, 1fr) minmax(0, 170px) minmax(0, 100px) minmax(0, 110px) minmax(0, 120px) minmax(0, 90px) var(--vbe-size-control-md); }
/* In a card of the detail page: the first column still fills. */
.table--theme-targets { --table-columns: minmax(140px, 1fr) minmax(0, 200px) minmax(0, 150px) minmax(0, 100px) var(--vbe-size-control-md); }
.table--theme-targets tbody tr:last-child { border-bottom: 0; }
.table--github-repos { --table-columns: minmax(140px, 1fr) minmax(0, 200px) minmax(0, 100px) var(--vbe-size-control-md); }
.table--coding { --table-columns: minmax(180px, 1fr) minmax(0, 130px) minmax(0, 180px) minmax(0, 150px) minmax(0, 170px) minmax(0, 110px) var(--vbe-size-control-md); }
.table--codex { --table-columns: minmax(200px, 1fr) minmax(0, 90px) minmax(0, 150px) minmax(0, 256px) minmax(0, 160px) var(--vbe-size-control-md); }
.table--codex tbody tr:last-child, .table--models tbody tr:last-child { border-bottom: 0; }
.table--models { --table-columns: minmax(200px, 1fr) minmax(0, 220px) minmax(0, 240px) minmax(0, 220px) var(--vbe-size-control-md); }
/* Rôle cell: the badges of a target, side by side. */
.cell-tags { display: flex; flex-wrap: wrap; gap: var(--vbe-space-150); }
/* Table Row/Operators and Table Row/Codex Accounts: a small avatar, the gap of the row before the texts. */
.table--operators .cell-avatar, .table--codex .cell-avatar { gap: var(--vbe-space-400); }
.table--operators .row-chevron .icon { stroke: var(--vbe-color-icon-secondary); }
.cell-title { display: flex; flex-direction: column; min-width: 0; }
.cell-title__main { font-weight: 500; }
.cell-title__main, .cell-title__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-title__sub { font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); color: var(--vbe-color-text-secondary); }
.cell-title--code .cell-title__main { font-family: var(--vbe-font-family-mono); font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); }
.cell-avatar { display: flex; align-items: center; gap: var(--vbe-space-300); min-width: 0; }
.cell-avatar .cell-title { flex: 1; }
.table a.cell-title:hover .cell-title__main, .table a.cell-avatar:hover .cell-title__main { text-decoration: underline; }
/* The chevron that ends a row leading to a detail page. */
.row-chevron .icon { stroke: var(--vbe-color-icon-default); }
/* What only the table form or only the row form of a list shows. */
.row-mobile { display: none; }

/* ---------- Quota Meter ----------
   A window of a quota: its length, a gauge, the share left and when it resets.
   The widths are those of the Figma component (no token exists for them). */
.quota { display: flex; flex-direction: column; gap: var(--vbe-space-100); min-width: 0; }
.quota__row { display: flex; align-items: center; gap: var(--vbe-space-200); font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); white-space: nowrap; }
.quota__window { flex: none; width: 24px; color: var(--vbe-color-text-secondary); }
.quota__value { flex: none; width: 36px; font-weight: 500; }
.quota__reset { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--vbe-color-text-secondary); }
.meter { flex: none; width: 64px; height: var(--vbe-space-100); border-radius: var(--vbe-radius-full); background: var(--vbe-color-bg-surface-tertiary); }
.meter rect { fill: var(--vbe-color-chart-primary); }
.meter--warning rect { fill: var(--vbe-color-icon-warning); }
.meter--critical rect { fill: var(--vbe-color-icon-critical); }

/* ---------- List states: loading, error ---------- */
.results { position: relative; min-width: 0; }
.results__loading { position: absolute; inset: 0; visibility: hidden; }
.toolbar.htmx-request ~ .results > .results__loading, .results:has(.htmx-request) > .results__loading { visibility: visible; transition: visibility 0s linear 300ms; }

/* ---------- Drawer (Section/Log Detail) ---------- */
.drawer { position: fixed; top: var(--vbe-space-600); right: var(--vbe-space-600); z-index: 20; display: flex; flex-direction: column; width: 440px; max-width: calc(100vw - 2 * var(--vbe-space-400)); max-height: calc(100vh - 2 * var(--vbe-space-600)); box-shadow: var(--vbe-shadow-400); }
.drawer > .card__header { flex: none; padding-top: var(--vbe-space-400); padding-bottom: var(--vbe-space-400); }
.drawer > .card__body { flex: 1; min-height: 0; gap: var(--vbe-space-500); overflow-y: auto; }
.drawer > .card__footer { flex: none; }
.drawer__title { font-family: var(--vbe-font-family-mono); font-size: var(--vbe-font-size-325); line-height: var(--vbe-font-line-height-500); font-weight: 400; }
.drawer__context { display: none; }

/* The row form of a table: below the width its columns need. */
@media (max-width: 1199px) {
  .table thead { display: none; }
  .table tr, .table--dense tbody tr { display: flex; gap: var(--vbe-space-300); padding: var(--vbe-space-300) var(--vbe-space-500); }
  .table td { display: none; }
  .table td.keep { display: block; flex: none; order: 2; }
  .table td.keep.lead { flex: 1; order: 0; }
  .table td.keep.meta { order: 1; font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); color: var(--vbe-color-text-tertiary); }
  .table td.keep.action { display: flex; order: 3; }
  .cell-avatar .avatar { display: none; }
  /* A narrow page is also a zoomed one: the title and the summary of a row
     wrap instead of being cut, so nothing they say is lost. */
  .table td.keep.lead .cell-title__main, .table td.keep.lead .cell-title__sub { white-space: normal; overflow-wrap: anywhere; }
  .row-mobile { display: revert; }
  .row-desktop { display: none; }
  .row-chevron, .row-chevron:hover { width: var(--vbe-size-icon-sm); height: var(--vbe-size-icon-sm); background: transparent; }
  /* A chevron only the row form shows (Opérateurs) is still the Icon Button box. */
  .row-chevron.row-mobile { display: inline-grid; }
  /* A detail page in one column shows its summary card first, then the cards
     in reading order. */
  .overview--detail { display: flex; flex-direction: column; align-items: stretch; }
  .overview--detail > .stack { display: contents; }
  .overview--detail > .stack:last-child > :first-child { order: -1; }
  .overview--run > .stack:first-child > :last-child { order: 1; }
}

@media (max-width: 899px) {
  .page-header { flex-direction: column; align-items: stretch; }
  .page-header h1, .page-header__title { font-size: var(--vbe-font-size-500); line-height: var(--vbe-font-line-height-700); letter-spacing: -0.02em; }
  .page-header__titles > p { font-size: var(--vbe-font-size-325); line-height: var(--vbe-font-line-height-500); }
  .page-header__actions .btn { flex: 1; min-width: 0; height: var(--vbe-size-control-lg); padding: 0 var(--vbe-space-500); font-size: var(--vbe-font-size-350); }
  /* Only decoration and what another page repeats is dropped on a narrow page. */
  .hide-m, .list-row__meta.hide-m, .list-row__icon.hide-m, .rows--plain .list-row__icon { display: none; }
  .overview, .columns-2 { grid-template-columns: minmax(0, 1fr); }
  .toolbar { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  /* Filters that do not fit wrap: a hidden horizontal scroll would make the
     page scroll in two directions. */
  .toolbar__filters > * { flex: none; }
  /* The detail of an event replaces the list. */
  :has(> .results .drawer) > :not(.results), .results:has(.drawer) #results > .card:not(.drawer), .results:has(.drawer) > .results__loading { display: none; }
  .drawer { position: static; width: auto; max-width: none; max-height: none; }
  .drawer > .card__body { overflow-y: visible; }
  .drawer__context { display: flex; margin-bottom: var(--vbe-space-500); }
}
/* Home sections: context bar, hero and question field, KPIs, chart, answers. */
.context-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vbe-space-300) var(--vbe-space-600); white-space: nowrap; }
/* The stats sit between the period and the server status. Where the three do
   not fit on one line the stats take a line of their own and wrap: none is
   ever hidden, at any width or text spacing. */
.context-bar__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--vbe-space-200) var(--vbe-space-800); min-width: 0; }
.inline-stat { display: flex; flex-direction: column; }
.inline-stat dt { font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); color: var(--vbe-color-text-secondary); }
.inline-stat dd { font-weight: 500; }
.hero { display: flex; flex-direction: column; align-items: center; gap: var(--vbe-space-800); padding: var(--vbe-space-1200) 0 var(--vbe-space-800); }
.hero__greeting { text-align: center; white-space: pre-line; }
.command { width: 720px; max-width: 100%; display: flex; flex-direction: column; gap: var(--vbe-space-300); padding: var(--vbe-space-400); border-radius: var(--vbe-radius-500); background: var(--vbe-color-bg-surface); box-shadow: var(--vbe-shadow-300); transition: box-shadow var(--vbe-motion-duration-100) var(--vbe-motion-ease-out); }
/* One line that grows with the question. Its bottom padding is the rest of the
   gap to the bar, so that a click anywhere above the bar lands in the field. */
.command__prompt { display: block; margin: 0; padding: 0 0 var(--vbe-space-500); border: 0; background: transparent; resize: none; field-sizing: content; max-height: calc(8 * var(--vbe-font-line-height-500)); font-size: var(--vbe-font-size-350); line-height: var(--vbe-font-line-height-500); }
.command__prompt:focus { outline: 0; }
/* The field has no box of its own: the card shows its focus, as a Text Field does. */
.command:has(.command__prompt:focus-visible) { box-shadow: inset 0 0 0 var(--vbe-border-width-strong) var(--vbe-color-border-focus), var(--vbe-shadow-300); }
/* While the field is empty its placeholder reads as its label; once a question
   is typed the label itself is shown, so the field never loses its name. */
.command__label { margin-bottom: calc(var(--vbe-space-100) - var(--vbe-space-300)); color: var(--vbe-color-text-secondary); font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); font-weight: 500; }
.command:has(.command__prompt:placeholder-shown) .command__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.command__prompt::placeholder { color: var(--vbe-color-text-tertiary); }
.command__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--vbe-space-300); }
.command__scope { display: flex; flex-wrap: wrap; gap: var(--vbe-space-200); min-width: 0; }
.quick-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--vbe-space-200); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vbe-space-400); }
.kpi { display: flex; flex-direction: column; gap: var(--vbe-space-200); padding: var(--vbe-space-500); border-radius: var(--vbe-radius-500); background: var(--vbe-color-bg-surface); box-shadow: var(--vbe-shadow-100); }
.kpi__delta { display: flex; align-items: center; gap: var(--vbe-space-200); min-width: 0; }
/* Bar Chart: bars share the width, 6 px apart, and stand on the baseline. */
.chart { display: flex; align-items: flex-end; gap: var(--vbe-space-150); height: 120px; }
/* color/chart/muted has 1.3:1 against the card: the bars take a color with at
   least 3:1 (WCAG 1.4.11), the current day stays the darkest. */
.chart__bar { flex: 1 1 0; min-width: 0; min-height: var(--vbe-space-050); border-radius: var(--vbe-radius-100); background: var(--vbe-color-border-strong); }
.chart__bar--current { background: var(--vbe-color-chart-primary); }
.chart__axis { display: flex; justify-content: space-between; color: var(--vbe-color-text-tertiary); font-size: var(--vbe-font-size-275); line-height: var(--vbe-font-line-height-400); font-weight: 500; }
.total { display: flex; align-items: center; gap: var(--vbe-space-300); }
/* List Row, Title style=Code: the title line is as high as the code style. */
.list-row__title > .mono { display: block; }
.on-mobile { display: none; }

/* Research Answer: the question, its source, then the summary and its
   evidence, the running state or the failure with its stored error code. */
.answer__header { display: flex; align-items: center; gap: var(--vbe-space-300); padding: var(--vbe-space-400) var(--vbe-space-500); border-bottom: var(--vbe-border-width-default) solid var(--vbe-color-border-secondary); }
.answer__header h2 { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.answer__source { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.answer__source dd { font-weight: 400; }
.answer__source dd span { display: block; }
.answer .skeleton-row:last-child { border-bottom: var(--vbe-border-width-default) solid var(--vbe-color-border-secondary); }
.answer__footer { display: flex; align-items: center; gap: var(--vbe-space-200); padding: var(--vbe-space-400) var(--vbe-space-500); }
.answer__footer p { flex: 1; min-width: 0; }
.answer__error { padding: var(--vbe-space-300) var(--vbe-space-500); }
.answer__error dd span { display: block; }
.answer__doubts { display: flex; flex-direction: column; gap: var(--vbe-space-100); padding: var(--vbe-space-400) var(--vbe-space-500); border-bottom: var(--vbe-border-width-default) solid var(--vbe-color-border-secondary); }
/* The summary, one paragraph per line, then the ranges read behind it: they
   wrap, and a long path breaks rather than widening the card. */
.answer__summary { display: flex; flex-direction: column; gap: var(--vbe-space-150); padding: var(--vbe-space-300) var(--vbe-space-500); border-bottom: var(--vbe-border-width-default) solid var(--vbe-color-border-secondary); }
.answer__summary p { overflow-wrap: anywhere; }
.answer__evidence { display: flex; flex-wrap: wrap; gap: var(--vbe-space-150) var(--vbe-space-200); padding: var(--vbe-space-300) var(--vbe-space-500); border-bottom: var(--vbe-border-width-default) solid var(--vbe-color-border-secondary); }
.answer__evidence .mono { min-width: 0; overflow-wrap: anywhere; }

/* Narrow desktop: the 360 px side column would squeeze the activity card, so
   the overview stacks, its two side cards pair up and the KPIs go two by two. */
@media (max-width: 1199px) {
  .context-bar__stats { order: 1; flex-basis: 100%; justify-content: flex-start; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-overview { grid-template-columns: minmax(0, 1fr); }
  .home-overview .stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

@media (max-width: 899px) {
  .context-bar__stats { column-gap: var(--vbe-space-600); }
  .home-overview .stack { grid-template-columns: minmax(0, 1fr); }
  .hero { align-items: stretch; gap: var(--vbe-space-500); padding: var(--vbe-space-200) 0 0; }
  .command { width: auto; }
  .hero__greeting { text-align: left; font-size: var(--vbe-font-size-500); line-height: var(--vbe-font-line-height-700); letter-spacing: -0.02em; }
  .command__prompt { padding-bottom: var(--vbe-space-300); max-height: calc(8 * var(--vbe-font-line-height-600)); font-size: var(--vbe-font-size-400); line-height: var(--vbe-font-line-height-600); }
  .command__bar { flex-direction: column; align-items: stretch; }
  .command__bar .btn, .quick-actions .btn { height: var(--vbe-size-control-lg); padding: 0 var(--vbe-space-500); font-size: var(--vbe-font-size-350); }
  .quick-actions { flex-direction: column; }
  .kpi-grid { gap: var(--vbe-space-300); }
  .kpi { padding: var(--vbe-space-400); }
  .on-desktop { display: none; }
  .on-mobile { display: inline; }
}
/* VeryBigExpert screens: the wealth file, its charts and the printed report.
   Sections of the Figma page « Écrans » that the dashboard library lacks. */

/* ---------- Avatar tones and sizes ---------- */
.avatar--lg { width: var(--vbe-size-avatar-lg); height: var(--vbe-size-avatar-lg); border-radius: var(--vbe-radius-300); font-size: var(--vbe-font-size-400); line-height: var(--vbe-font-line-height-600); }
.avatar--info { background: var(--vbe-color-bg-info); color: var(--vbe-color-text-info); }
.avatar--success { background: var(--vbe-color-bg-success); color: var(--vbe-color-text-success); }
.avatar--warning { background: var(--vbe-color-bg-warning); color: var(--vbe-color-text-warning); }

/* ---------- Page furniture ---------- */
.dossier-header { display: flex; flex-direction: column; gap: var(--vbe-space-400); }
.page-header--lead { align-items: center; }
.tabs { flex-wrap: wrap; }
.kpi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.columns-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vbe-space-400); align-items: stretch; }
.columns-2--stretch { align-items: stretch; }
.overview--form { grid-template-columns: minmax(0, 1fr) 440px; }
.overview--report { grid-template-columns: 300px minmax(0, 1fr); }
.quick-action { display: inline-flex; align-items: center; gap: var(--vbe-space-200); height: var(--vbe-size-control-md); padding: 0 var(--vbe-space-300); border-radius: var(--vbe-radius-full); background: var(--vbe-color-bg-surface-secondary); font-weight: 500; }
.quick-action .icon { width: var(--vbe-size-icon-sm); height: var(--vbe-size-icon-sm); }
a.quick-action:hover { background: var(--vbe-color-bg-surface-tertiary); }
.command__prompt { width: 100%; font-size: var(--vbe-font-size-400); line-height: var(--vbe-font-line-height-600); }
.sidebar__logout { display: contents; }
.nav-user form { display: contents; }

/* ---------- Figures, label rows, totals ---------- */
.figure { display: flex; flex-direction: column; gap: var(--vbe-space-050); min-width: 0; }
.figure__caption { color: var(--vbe-color-text-secondary); }
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vbe-space-400); }
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--vbe-space-200); }
.label-row > :first-child { color: var(--vbe-color-text-secondary); min-width: 0; }
.label-row > :last-child { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.indicator, .bars-block { display: flex; flex-direction: column; gap: var(--vbe-space-200); }
.card__body--loose { gap: var(--vbe-space-500); }
.card__body--row { display: flex; flex-direction: row; align-items: center; gap: var(--vbe-space-800); }
.card__body > .donut { align-self: center; }
.total-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--vbe-space-300); padding: calc(var(--vbe-space-200) + var(--vbe-space-050)) var(--vbe-space-500); border-bottom: var(--vbe-border-width-default) solid var(--vbe-color-border-secondary); }
.total-row:last-child { border-bottom: 0; }
.total-row > :first-child { color: var(--vbe-color-text-secondary); }
.total-row > :last-child { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.total-row--strong { background: var(--vbe-color-bg-surface-secondary); }
.total-row--strong > :first-child { color: var(--vbe-color-text-default); font-weight: 500; }
.list-row__value { flex: none; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.list-row--top { align-items: flex-start; }
.list-row__effect { padding-top: var(--vbe-space-150); }
.list-row > .icon { flex: none; width: var(--vbe-size-icon-sm); height: var(--vbe-size-icon-sm); }
.big { display: flex; flex-direction: column; gap: var(--vbe-space-050); flex: none; width: 160px; }
.grow { flex: 1; min-width: 0; }

/* ---------- Legend and swatches ---------- */
.legend { display: flex; flex-direction: column; gap: var(--vbe-space-200); min-width: 0; }
.legend--inline { flex-direction: row; flex-wrap: wrap; gap: var(--vbe-space-200) var(--vbe-space-500); }
.legend--columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vbe-space-200) var(--vbe-space-600); }
.legend__item { display: flex; align-items: center; gap: var(--vbe-space-200); font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); min-width: 0; }
.legend__label { flex: 1; min-width: 0; color: var(--vbe-color-text-secondary); }
.legend__share { color: var(--vbe-color-text-tertiary); font-variant-numeric: tabular-nums; }
.legend__value { flex: none; min-width: 84px; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.swatch { flex: none; width: var(--vbe-space-200); height: var(--vbe-space-200); border-radius: var(--vbe-radius-100); background: var(--vbe-color-chart-primary); }
.family { display: inline-flex; align-items: center; gap: var(--vbe-space-200); min-width: 0; }

/* ---------- Charts: SVG, colored by a class (the CSP allows no inline style) ---------- */
.c-immobilier-usage { --c: var(--vbe-color-chart-immobilier-usage); }
.c-immobilier-rapport { --c: var(--vbe-color-chart-immobilier-rapport); }
.c-professionnel { --c: var(--vbe-color-chart-professionnel); }
.c-assurance-vie { --c: var(--vbe-color-chart-assurance-vie); }
.c-epargne-retraite { --c: var(--vbe-color-chart-epargne-retraite); }
.c-valeurs-mobilieres { --c: var(--vbe-color-chart-valeurs-mobilieres); }
.c-disponibilites { --c: var(--vbe-color-chart-disponibilites); }
.c-dettes { --c: var(--vbe-color-chart-dettes); }
.c-primary { --c: var(--vbe-color-chart-primary); }
.c-muted { --c: var(--vbe-color-chart-muted); }
.c-accent { --c: var(--vbe-color-chart-accent); }
.c-track { --c: var(--vbe-color-bg-surface-tertiary); }
.c-gray-1 { --c: var(--vbe-color-icon-disabled); }
.c-gray-2 { --c: var(--vbe-color-icon-secondary); }
.swatch[class*="c-"] { background: var(--c); }
.donut { flex: none; width: 184px; height: 184px; transform: rotate(-90deg); }
.donut--sm { width: 132px; height: 132px; }
.donut circle { fill: none; stroke: var(--c); stroke-width: 5; }
.stackbar, .meter { display: block; width: 100%; height: var(--vbe-space-400); border-radius: var(--vbe-radius-150); overflow: hidden; background: var(--vbe-color-bg-surface-tertiary); }
.stackbar--lg { height: var(--vbe-space-600); }
.stackbar rect, .meter rect { fill: var(--c); }
.meter { height: var(--vbe-space-200); border-radius: var(--vbe-radius-full); }
.meter--lg { height: var(--vbe-space-400); }
.bars { display: flex; align-items: flex-end; gap: var(--vbe-space-200); height: 200px; }
.indicator > .bars { height: 96px; gap: var(--vbe-space-100); }
.bars__bar { flex: 1 1 0; min-width: 0; border-radius: var(--vbe-radius-150); background: var(--vbe-color-chart-muted); }
.bars__bar--current { background: var(--vbe-color-chart-primary); }

/* ---------- Tables of the screens ---------- */
.table--clients { --table-columns: minmax(200px, 1fr) minmax(0, 100px) minmax(0, 120px) minmax(0, 48px) minmax(0, 130px) minmax(0, 130px) minmax(0, 100px) var(--vbe-size-icon-sm); }
.table--enfants { --table-columns: minmax(100px, 1fr) minmax(0, 150px) minmax(0, 70px) minmax(0, 170px) minmax(0, 100px) minmax(0, 50px); }
.table--actifs { --table-columns: minmax(200px, 1fr) minmax(0, 230px) minmax(0, 110px) minmax(0, 110px) minmax(0, 60px); }
.table--dettes { --table-columns: minmax(200px, 1fr) minmax(0, 80px) minmax(0, 100px) minmax(0, 110px) minmax(0, 150px); }
.table--revenus { --table-columns: minmax(200px, 1fr) minmax(0, 220px) minmax(0, 140px) minmax(0, 120px); }
.table--tranches { --table-columns: minmax(160px, 1fr) minmax(0, 60px) minmax(0, 170px) minmax(0, 110px); }
.table--masse { --table-columns: minmax(200px, 1fr) minmax(0, 190px) minmax(0, 190px); }
.table--comparaison { --table-columns: minmax(160px, 1fr) minmax(0, 140px) minmax(0, 150px) minmax(0, 130px); }
.table--rapports { --table-columns: minmax(200px, 1fr) minmax(0, 220px) minmax(0, 160px) minmax(0, 150px) var(--vbe-size-icon-sm); }
.table--emprunt { --table-columns: minmax(60px, 1fr) minmax(0, 110px) minmax(0, 140px) minmax(0, 120px); }
.table--generations { --table-columns: minmax(140px, 1fr) minmax(0, 150px) minmax(0, 90px); }
.table--trimestres { --table-columns: minmax(80px, 1fr) minmax(0, 80px) minmax(0, 110px) minmax(0, 90px); }
.table--bareme { --table-columns: minmax(200px, 1fr) minmax(0, 120px); }
.table--cases { --table-columns: minmax(0, 60px) minmax(200px, 1fr) minmax(0, 130px); }
.table--complements { --table-columns: minmax(180px, 1fr) minmax(0, 130px) minmax(0, 150px) minmax(0, 120px) minmax(0, 120px); }
.table--societes { --table-columns: minmax(140px, 1fr) minmax(0, 110px) minmax(0, 100px) minmax(0, 140px) minmax(0, 150px); }
.table--projection { --table-columns: minmax(150px, 1fr) minmax(0, 110px) minmax(0, 110px) minmax(0, 100px) minmax(0, 50px) minmax(0, 100px) minmax(0, 120px) minmax(0, 130px); }
.table tbody tr.strong { background: var(--vbe-color-bg-surface-secondary); font-weight: 500; }
.table tbody tr:last-child { border-bottom: 0; }
.table td.num, .table th.num { font-variant-numeric: tabular-nums; }
.card > .table:not(:last-child) tbody tr:last-child { border-bottom: var(--vbe-border-width-default) solid var(--vbe-color-border-secondary); }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vbe-space-400); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-actions { display: flex; gap: var(--vbe-space-200); }
.fold > summary { list-style: none; cursor: pointer; }
.fold > summary::-webkit-details-marker { display: none; }
.fold[open] > summary { display: none; }
.check-row--plain { align-items: center; gap: var(--vbe-space-200); }

/* An amount: digits grouped, right-aligned against the unit shown in the box. */
.amount { position: relative; display: block; min-width: 0; }
.amount .input { padding-right: calc(var(--vbe-space-300) + 1.25em + var(--vbe-space-100)); text-align: right; font-variant-numeric: tabular-nums; }
.amount__unit { position: absolute; top: 0; right: var(--vbe-space-300); height: 100%; display: grid; place-items: center; color: var(--vbe-color-text-secondary); pointer-events: none; }

/* The forms of « Modifier le dossier »: fields in a grid, the button at their foot. */
.edit-form { align-items: flex-end; flex-wrap: wrap; }
.edit-form .check { align-self: end; min-height: var(--vbe-size-control-md); }
.form-grid__wide { grid-column: 1 / -1; }
.input--file { height: auto; padding: var(--vbe-space-150) var(--vbe-space-300); }
.row-form { display: flex; align-items: center; gap: var(--vbe-space-200); flex: none; }
.row-form .amount { width: 150px; }
.list-row > form { display: flex; flex: none; }
.list-row > .swatch { width: var(--vbe-space-300); height: var(--vbe-space-300); }
.fold > summary.card__footer { border-top: var(--vbe-border-width-default) solid var(--vbe-color-border-secondary); }
section[id] { scroll-margin-top: var(--vbe-space-400); }

.header-form { display: flex; align-items: center; gap: var(--vbe-space-200); }
.fold--table > summary { border-top: var(--vbe-border-width-default) solid var(--vbe-color-border-secondary); }
.fold--table[open] > summary { display: flex; border-bottom: var(--vbe-border-width-default) solid var(--vbe-color-border-secondary); }

/* ---------- Report ---------- */
.preview { display: flex; justify-content: center; padding: var(--vbe-space-800); border-radius: var(--vbe-radius-500); background: var(--vbe-color-bg-surface-secondary); }
.sheet { width: 660px; max-width: 100%; display: flex; flex-direction: column; gap: var(--vbe-space-600); padding: 56px; border-radius: var(--vbe-radius-100); background: var(--vbe-color-bg-surface); box-shadow: var(--vbe-shadow-300); }
.sheet + .sheet { margin-top: var(--vbe-space-600); }
.sheets { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.sheet__title { display: flex; flex-direction: column; gap: var(--vbe-space-100); padding-top: var(--vbe-space-600); }
.sheet__rule { height: var(--vbe-border-width-default); border: 0; margin: 0; background: var(--vbe-color-border-default); }
.sheet__footer { display: flex; justify-content: space-between; padding-top: var(--vbe-space-800); color: var(--vbe-color-text-tertiary); font-size: var(--vbe-font-size-300); line-height: var(--vbe-font-line-height-400); }
.sheet .definition dd { font-size: var(--vbe-font-size-500); line-height: var(--vbe-font-line-height-700); letter-spacing: -0.02em; }
.sheet .rows { display: flex; flex-direction: column; }
.sheet .rows .total-row { padding-left: 0; padding-right: 0; }

/* A line under another: the holders of a company, under the company. */
.list-row--sub { padding-left: var(--vbe-space-1000); background: var(--vbe-color-bg-surface-secondary); }

/* The chart of who holds what: boxes on rows, a link from each holder. */
.orgchart { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.orgchart__box { fill: var(--vbe-color-bg-surface-secondary); stroke: var(--vbe-color-border-default); stroke-width: var(--vbe-border-width-default); }
.orgchart__box--foyer { fill: var(--vbe-color-bg-surface-tertiary); }
.orgchart__link { fill: none; stroke: var(--vbe-color-border-strong); stroke-width: var(--vbe-border-width-default); }
.orgchart text { font-family: inherit; font-size: var(--vbe-font-size-300); fill: var(--vbe-color-text-secondary); }
.orgchart .orgchart__name { font-size: var(--vbe-font-size-325); font-weight: 500; fill: var(--vbe-color-text-default); }
.orgchart .orgchart__share { font-weight: 500; fill: var(--vbe-color-text-default); }

/* The financial assets cut four ways: two bars a row, each with its legend. */
.columns-2--cuts { gap: var(--vbe-space-600) var(--vbe-space-800); }

/* ---------- Rendez-vous: the minutes of a meeting and what they propose ---------- */
.textarea--notes { min-height: 240px; }
.minutes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vbe-space-500); }
.minutes__part { display: flex; flex-direction: column; gap: var(--vbe-space-200); min-width: 0; }
.minutes__list { display: flex; flex-direction: column; gap: var(--vbe-space-150); margin: 0; padding-left: var(--vbe-space-400); list-style: disc; color: var(--vbe-color-text-secondary); overflow-wrap: anywhere; }
.minutes__source { font-style: italic; }
.minutes__notes { border-top: var(--vbe-border-width-default) solid var(--vbe-color-border-secondary); }
.minutes__notes > summary { padding: var(--vbe-space-300) var(--vbe-space-500); cursor: pointer; }
.minutes__text { padding: 0 var(--vbe-space-500) var(--vbe-space-500); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--vbe-color-text-secondary); }
.card__label:has(> .badge) { display: flex; align-items: center; justify-content: space-between; gap: var(--vbe-space-300); }
/* A form that waits for an answer says so on its button. */
form[aria-busy="true"] .btn { cursor: progress; }

/* ---------- Connexions IA, and the consent an AI client asks for ---------- */
/* What a connection may do, as tags under its title. */
.list-row__tags { display: flex; flex-wrap: wrap; gap: var(--vbe-space-150); margin-top: var(--vbe-space-200); }
.steps { display: flex; flex-direction: column; gap: var(--vbe-space-300); }
.steps__list { padding-left: var(--vbe-space-500); display: flex; flex-direction: column; gap: var(--vbe-space-100); list-style: decimal; }
/* An address is copied whole. */
.copy-field__value { user-select: all; }
.examples { display: flex; flex-direction: column; gap: var(--vbe-space-400); }
.examples__case { display: flex; flex-direction: column; gap: var(--vbe-space-100); }
/* 520 px: the width of the Figma consent card, which has no variable. A consent has more to say than a sign-in. */
.auth__card--wide { width: 520px; }
.consent { gap: var(--vbe-space-600); }
.consent__client { display: flex; align-items: center; gap: var(--vbe-space-300); padding: var(--vbe-space-300) var(--vbe-space-400) var(--vbe-space-300) var(--vbe-space-300); border: var(--vbe-border-width-default) solid var(--vbe-color-border-default); border-radius: var(--vbe-radius-300); }
/* The files to tick show under their radio once it is chosen. */
.choice__more { display: none; padding: var(--vbe-space-150) 0 0 calc(var(--vbe-size-icon-sm) + var(--vbe-space-200)); }
.choice:has(> .check input:checked) > .choice__more { display: block; }
/* A right that is stated, not chosen, keeps the look of a ticked box. */
.consent .check input[type="checkbox"]:disabled:checked { border-color: var(--vbe-color-icon-secondary); background: var(--vbe-color-icon-secondary); }
.consent__actions { display: flex; gap: var(--vbe-space-300); }
.consent__actions .btn { flex: 1; }
.consent__summary { border: var(--vbe-border-width-default) solid var(--vbe-color-border-default); border-radius: var(--vbe-radius-300); }
.consent__summary .label-row { padding: var(--vbe-space-300) var(--vbe-space-400); border-bottom: var(--vbe-border-width-default) solid var(--vbe-color-border-secondary); }
.consent__summary .label-row:last-child { border-bottom: 0; }

@media (max-width: 1199px) {
  .minutes { grid-template-columns: minmax(0, 1fr); }
  .columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview--form, .overview--report { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .columns-3, .kpi-grid--3, .form-grid, .form-grid--3, .figures { grid-template-columns: minmax(0, 1fr); }
  .card__body--row { flex-direction: column; align-items: stretch; }
  .donut { align-self: center; }
  .sheet { padding: var(--vbe-space-600); }
  .page-header--lead { align-items: stretch; }
  .page-header--lead > .avatar { align-self: flex-start; }
  .preview { padding: var(--vbe-space-300); }
}
/* Printing a report: the sheets alone, on white, one per page. */
@media print {
  body { background: #fff; }
  .app { display: block; height: auto; padding: 0; overflow: visible; }
  .sidebar, .topbar, .page-header__actions, .breadcrumb, .report-side, .skip-link { display: none !important; }
  .panel-frame, .panel { overflow: visible; height: auto; padding: 0; border-radius: 0; }
  .overview--report { display: block; }
  .preview { padding: 0; background: none; }
  .sheet { width: auto; box-shadow: none; border-radius: 0; break-after: page; }
}