/* ============================================================================
 * Sapient UI for PHP — sapient.css
 *
 * Extends Canvas theme (Bootstrap 5.3) with Sapient design tokens and
 * component classes. Loaded globally (decision: always load). Ported from
 * Flutter Sapient UI theme foundations:
 *   - SapientColors   -> --su-* color tokens
 *   - SapientSpacing  -> --su-space-* + --su-radius-* + --su-shadow-*
 *   - SapientTypography-> --su-text-* size + weight + line-height tokens
 *   - SapientConfig   -> theme presets via [data-su-theme="..."]
 *
 * Sapient components emit Canvas/Bootstrap classes (button, card, badge, btn,
 * alert) PLUS `su-*` modifier classes that consume these tokens. This means:
 *   1. Sapient components inherit all Canvas/Bootstrap styling by default.
 *   2. `su-*` classes add the Sapient design system layer (tokens, variants).
 *   3. Theme presets swap tokens by overriding --su-* on a data attribute.
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * 1. Design tokens — :root defaults (Professional Blue preset)
 * -------------------------------------------------------------------------- */
:root {
    /* Semantic colors */
    --su-primary: #2196F3;
    --su-primary-dark: #1976D2;
    --su-primary-light: #64B5F6;
    --su-secondary: #03DAC6;
    --su-tertiary: #7C4DFF;

    /* Palette override hooks — set by SapientAssetRegistry from website_design.
     * Default: initial = no override, falls through to --color-* bridge. */
    --ui-primary-override: initial;
    --ui-success-override: initial;
    --ui-info-override: initial;

    /* === Track 1: Brand Colors ===
     * Brand = the site's identity color.
     * Chain: ui-primary-override -> --color-primary (website_design) -> fallback.
     * Lets a red-brand site set ui_primary_override=#2563EB for admin UI while
     * keeping brand red for frontend/marketing surfaces. */
    --su-brand: var(--ui-primary-override, var(--color-primary, #2196F3));
    --su-brand-dark: var(--color-secondary, var(--su-brand));
    --su-brand-light: var(--color-accent, var(--su-brand));
    --su-on-brand: var(--color-text-on-primary, #FFFFFF);

    /* FLU FIX #1: --su-primary aliases --su-brand so all existing
     * var(--su-primary) rules go through the palette override chain. */
    --su-primary: var(--su-brand);
    --su-primary-dark: var(--su-brand-dark);
    --su-primary-light: var(--su-brand-light);

    /* === Track 2: Semantic Colors — three-level tonal system ===
     * FLU FIX #2: Bridge from existing website_design --color-* first,
     * then fall through to hardcoded defaults. Preserves backward compatibility. */

    /* Success — green family */
    --su-semantic-success: var(--ui-success-override, var(--color-secondary, #16A34A));
    --su-semantic-success-light: var(--ui-success-override, var(--color-secondary, #DCFCE7));
    --su-semantic-success-dark: var(--ui-success-override, var(--color-secondary, #15803D));

    /* Warning — amber family */
    --su-semantic-warning: var(--color-accent, #D97706);
    --su-semantic-warning-light: var(--color-accent, #FEF3C7);
    --su-semantic-warning-dark: var(--color-accent, #B45309);

    /* Danger — red family (distinct from brand red via tonal differentiation) */
    --su-semantic-danger: var(--color-error, #DC2626);
    --su-semantic-danger-light: var(--color-error, #FEE2E2);
    --su-semantic-danger-dark: var(--color-error, #B91C1C);

    /* Info — blue family */
    --su-semantic-info: var(--ui-info-override, var(--color-primary, #0284C7));
    --su-semantic-info-light: var(--ui-info-override, var(--color-primary, #DBEAFE));
    --su-semantic-info-dark: var(--ui-info-override, var(--color-primary, #0369A1));

    /* Status color aliases — keep existing --su-* references working */
    --su-success: var(--su-semantic-success);
    --su-success-light: var(--su-semantic-success-light);
    --su-warning: var(--su-semantic-warning);
    --su-warning-light: var(--su-semantic-warning-light);
    --su-error: var(--su-semantic-danger);
    --su-error-light: var(--su-semantic-danger-light);
    --su-info: var(--su-semantic-info);
    --su-info-light: var(--su-semantic-info-light);

    /* === Track 3: Component-Role Tokens ===
     * Composed from Track 1 + Track 2. Components consume these, never raw tokens. */

    /* Buttons */
    --su-btn-primary-bg: var(--su-brand);
    --su-btn-primary-fg: var(--su-on-brand);
    --su-btn-primary-hover-bg: var(--su-brand-dark);
    --su-btn-success-bg: var(--su-semantic-success);
    --su-btn-success-fg: #fff;
    --su-btn-success-hover-bg: var(--su-semantic-success-dark);
    --su-btn-warning-bg: var(--su-semantic-warning);
    --su-btn-warning-fg: #fff;
    --su-btn-warning-hover-bg: var(--su-semantic-warning-dark);
    --su-btn-danger-bg: var(--su-semantic-danger);
    --su-btn-danger-fg: #fff;
    --su-btn-danger-hover-bg: var(--su-semantic-danger-dark);
    --su-btn-info-bg: var(--su-semantic-info);
    --su-btn-info-fg: #fff;
    --su-btn-info-hover-bg: var(--su-semantic-info-dark);
    --su-btn-secondary-bg: var(--su-grey-100);
    --su-btn-secondary-fg: var(--su-on-surface);
    --su-btn-secondary-hover-bg: var(--su-grey-200);

    /* Cards */
    --su-card-header-bg: color-mix(in srgb, var(--su-brand) 6%, var(--su-card));
    --su-card-title-fg: var(--su-on-surface);
    --su-card-subtitle-fg: var(--su-on-surface-muted);
    --su-card-border: color-mix(in srgb, var(--su-brand) 8%, var(--su-grey-200));

    /* Badges — tint pattern (auto dark-mode safe via color-mix + transparent) */
    --su-badge-success-bg: color-mix(in srgb, var(--su-semantic-success) 15%, transparent);
    --su-badge-success-fg: var(--su-semantic-success-dark);
    --su-badge-success-border: color-mix(in srgb, var(--su-semantic-success) 25%, transparent);
    --su-badge-warning-bg: color-mix(in srgb, var(--su-semantic-warning) 15%, transparent);
    --su-badge-warning-fg: var(--su-semantic-warning-dark);
    --su-badge-warning-border: color-mix(in srgb, var(--su-semantic-warning) 25%, transparent);
    --su-badge-danger-bg: color-mix(in srgb, var(--su-semantic-danger) 15%, transparent);
    --su-badge-danger-fg: var(--su-semantic-danger-dark);
    --su-badge-danger-border: color-mix(in srgb, var(--su-semantic-danger) 25%, transparent);
    --su-badge-info-bg: color-mix(in srgb, var(--su-semantic-info) 15%, transparent);
    --su-badge-info-fg: var(--su-semantic-info-dark);
    --su-badge-info-border: color-mix(in srgb, var(--su-semantic-info) 25%, transparent);
    --su-badge-muted-bg: color-mix(in srgb, var(--su-grey-500) 15%, transparent);
    --su-badge-muted-fg: var(--su-on-surface-muted);
    --su-badge-muted-border: color-mix(in srgb, var(--su-grey-500) 25%, transparent);
    --su-badge-brand-bg: color-mix(in srgb, var(--su-brand) 15%, transparent);
    --su-badge-brand-fg: var(--su-brand-dark);
    --su-badge-brand-border: color-mix(in srgb, var(--su-brand) 25%, transparent);

    /* Focus ring */
    --su-focus-ring: var(--su-brand);
    --su-focus-ring-offset: 2px;

    /* Divider — brand-tinted */
    --su-divider: color-mix(in srgb, var(--su-brand) 8%, var(--su-grey-200));

    /* Selected state */
    --su-selected-bg: color-mix(in srgb, var(--su-brand) 10%, transparent);
    --su-selected-border: color-mix(in srgb, var(--su-brand) 30%, transparent);

    /* Link */
    --su-link: var(--su-brand);
    --su-link-hover: var(--su-brand-dark);

    /* Icon color schema — single source of truth for icon colors */
    --su-icon-fg: var(--su-on-surface-muted, #616161);
    --su-icon-fg-emphasis: var(--su-on-surface, #212121);
    --su-icon-fg-contrast: var(--su-on-brand, #FFFFFF);

    /* Skeleton loading */
    --su-skeleton-base: var(--su-grey-100);
    --su-skeleton-shine: var(--su-grey-200);

    /* SAPIRO business-category colors */
    --su-strategic: #1976D2;
    --su-analytical: #388E3C;
    --su-philosophical: #7B1FA2;
    --su-informative: #FF6F00;
    --su-responsible: #C2185B;
    --su-operational: #0288D1;

    /* Neutral grey palette */
    --su-grey-50: #FAFAFA;
    --su-grey-100: #F5F5F5;
    --su-grey-200: #EEEEEE;
    --su-grey-300: #E0E0E0;
    --su-grey-400: #BDBDBD;
    --su-grey-500: #9E9E9E;
    --su-grey-600: #757575;
    --su-grey-700: #616161;
    --su-grey-800: #424242;
    --su-grey-900: #212121;

    /* Surfaces */
    --su-surface: #FFFFFF;
    --su-background: #F5F5F5;
    --su-card: #FFFFFF;
    --su-on-surface: #212121;
    --su-on-surface-muted: #616161;

    /* Surface container hierarchy (M3) — FLU FIX #5: no duplicate --su-surface here */
    --su-surface-lowest: #FFFFFF;
    --su-surface-low: #F6F6F6;
    --su-surface-high: #E4E4E4;
    --su-surface-highest: #DBDBDB;

    /* Spacing scale (8px base) */
    --su-space-0: 0;
    --su-space-xxs: 2px;
    --su-space-xs: 4px;
    --su-space-sm: 8px;
    --su-space-md: 16px;
    --su-space-lg: 24px;
    --su-space-xl: 32px;
    --su-space-xxl: 48px;
    --su-space-xxxl: 64px;

    /* Radii */
    --su-radius-sm: 4px;
    --su-radius-md: 8px;
    --su-radius-lg: 16px;
    --su-radius-pill: 999px;

    /* Shadows / elevation */
    --su-shadow-none: none;
    --su-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --su-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --su-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.18);

    /* Typography */
    --su-font-default: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --su-font-display: "Playfair Display", Georgia, serif;
    --su-font-mono: ui-monospace, "Roboto Mono", "Courier New", monospace;

    --su-text-display-lg: 57px;
    --su-text-display-md: 45px;
    --su-text-display-sm: 36px;
    --su-text-headline-lg: 32px;
    --su-text-headline-md: 28px;
    --su-text-headline-sm: 24px;
    --su-text-title-lg: 22px;
    --su-text-title-md: 16px;
    --su-text-title-sm: 14px;
    --su-text-body-lg: 16px;
    --su-text-body-md: 14px;
    --su-text-body-sm: 12px;
    --su-text-label-lg: 14px;
    --su-text-label-md: 12px;
    --su-text-label-sm: 11px;

    --su-leading-tight: 1.2;
    --su-leading-normal: 1.5;
    --su-leading-relaxed: 1.75;
    --su-leading-loose: 2.0;

    /* Animation durations */
    --su-anim-fast: 150ms;
    --su-anim-medium: 300ms;
    --su-anim-slow: 500ms;
}

/* ----------------------------------------------------------------------------
 * 1b. Design token bridge — maps website_design --color-* to --su-*
 *
 * When SapientAssetRegistry injects :root { --color-primary: #dc2626; ... }
 * from the website_design table, this bridge re-derives the --su-* tokens
 * so all Sapient components automatically use the site's theme colors.
 *
 * Each --su-* uses the --color-* value with a fallback to the preset default.
 * This means: no website_design → preset blue. With website_design → site colors.
 * -------------------------------------------------------------------------- */
:root {
    /* === Bridge: maps website_design --color-* to --su-* tokens ===
     * When SapientAssetRegistry injects :root { --color-primary: #dc2626; ... }
     * from the website_design table, this bridge re-derives the --su-* tokens.
     *
     * The Track 1/2/3 tokens in the first :root block already reference --color-*
     * with fallbacks, so this block only needs to handle:
     *   1. Surface mappings (not in Track 1-3)
     *   2. Secondary/tertiary aliases (not part of the new system but still used)
     *   3. Bootstrap 5 bridge
     *   4. Surface hierarchy (FLU FIX #5: no duplicate --su-surface) */

    /* Secondary/accent mapped (legacy — used by some existing rules) */
    --su-secondary: var(--color-accent, #03DAC6);
    --su-tertiary: var(--color-secondary, #7C4DFF);

    /* Surfaces — mapped to website_design background/surface */
    --su-surface: var(--color-surface, #FFFFFF);
    --su-background: var(--color-background, #F5F5F5);
    --su-card: var(--color-surface, #FFFFFF);
    --su-on-surface: var(--color-text-primary, #212121);
    --su-on-surface-muted: var(--color-text-secondary, #616161);

    /* Surface hierarchy — subtle steps (FLU FIX #5: --su-surface NOT redefined here) */
    --su-surface-lowest: var(--color-background, #FFFFFF);
    --su-surface-low: var(--color-surface, #F6F6F6);
    --su-surface-high: var(--color-border, #E4E4E4);
    --su-surface-highest: var(--color-border, #DBDBDB);

    /* Link color — from website_design.link_color */
    --su-link: var(--color-link, var(--su-brand));

    /* Bootstrap 5 bridge — map --bs-primary to website_design.primary_color
     * This makes .text-primary, .bg-primary, .border-primary, .link-primary
     * all use the site's theme color. */
    --bs-primary: var(--color-primary, #0d6efd);
    --bs-primary-rgb: var(--color-primary-rgb, 13, 110, 253);
    --bs-link-color: var(--color-link, var(--color-primary, #0d6efd));
    --bs-link-color-rgb: var(--color-primary-rgb, 13, 110, 253);
}

/* ----------------------------------------------------------------------------
 * 2. Theme presets — override tokens by data attribute
 *    Applied via <body data-su-theme="ocean-blue"> or [data-su-theme="..."]
 * -------------------------------------------------------------------------- */
[data-su-theme="ocean-blue"] {
    --su-primary: #0077BE;
    --su-primary-dark: #004C8C;
    --su-primary-light: #4FC3F7;
}

[data-su-theme="forest-green"] {
    --su-primary: #388E3C;
    --su-primary-dark: #1B5E20;
    --su-primary-light: #81C784;
}

/* Dark mode overrides — full all-track override (toggle by [data-su-theme-dark="true"] on body) */
[data-su-theme-dark="true"] {
    /* Surfaces */
    --su-background: #121212;
    --su-surface: #1E1E1E;
    --su-card: #242424;
    --su-on-surface: #FFFFFF;
    --su-on-surface-muted: #BDBDBD;

    /* Surface hierarchy */
    --su-surface-lowest: #0E0E0E;
    --su-surface-low: #1A1A1A;
    --su-surface-high: #2C2C2C;
    --su-surface-highest: #383838;

    /* Grey palette shifts for dark mode */
    --su-grey-50: #1E1E1E;
    --su-grey-100: #242424;
    --su-grey-200: #2C2C2C;
    --su-grey-300: #383838;
    --su-grey-400: #424242;
    --su-grey-500: #616161;
    --su-grey-600: #757575;
    --su-grey-700: #BDBDBD;
    --su-grey-800: #E0E0E0;
    --su-grey-900: #F5F5F5;

    /* Semantic — brighter for dark backgrounds */
    --su-semantic-success: #4ADE80;
    --su-semantic-success-light: rgba(74, 222, 128, 0.15);
    --su-semantic-success-dark: #86EFAC;

    --su-semantic-warning: #FBBF24;
    --su-semantic-warning-light: rgba(251, 191, 36, 0.15);
    --su-semantic-warning-dark: #FCD34D;

    --su-semantic-danger: #F87171;
    --su-semantic-danger-light: rgba(248, 113, 113, 0.15);
    --su-semantic-danger-dark: #FCA5A5;

    --su-semantic-info: #60A5FA;
    --su-semantic-info-light: rgba(96, 165, 250, 0.15);
    --su-semantic-info-dark: #93C5FD;

    /* Status aliases follow semantic */
    --su-success: var(--su-semantic-success);
    --su-success-light: var(--su-semantic-success-light);
    --su-warning: var(--su-semantic-warning);
    --su-warning-light: var(--su-semantic-warning-light);
    --su-error: var(--su-semantic-danger);
    --su-error-light: var(--su-semantic-danger-light);
    --su-info: var(--su-semantic-info);
    --su-info-light: var(--su-semantic-info-light);

    /* Component roles needing explicit overrides */
    --su-btn-secondary-bg: var(--su-grey-200);
    --su-btn-secondary-fg: var(--su-on-surface);
    --su-btn-secondary-hover-bg: var(--su-grey-300);

    --su-card-border: color-mix(in srgb, var(--su-brand) 12%, var(--su-grey-700));
    --su-divider: color-mix(in srgb, var(--su-brand) 12%, var(--su-grey-700));

    /* Badge text — use LIGHT variant for contrast on dark */
    --su-badge-success-fg: var(--su-semantic-success-dark);
    --su-badge-warning-fg: var(--su-semantic-warning-dark);
    --su-badge-danger-fg: var(--su-semantic-danger-dark);
    --su-badge-info-fg: var(--su-semantic-info-dark);
    --su-badge-muted-fg: var(--su-on-surface-muted);
    --su-badge-brand-fg: var(--su-brand-light);

    /* Skeleton */
    --su-skeleton-base: var(--su-grey-200);
    --su-skeleton-shine: var(--su-grey-300);
}

/* ----------------------------------------------------------------------------
 * 3. Typography utilities — Sapient text roles
 * -------------------------------------------------------------------------- */
.su-text-display-lg {
    font-size: var(--su-text-display-lg);
    font-weight: 700;
    line-height: var(--su-leading-tight);
}

.su-text-display-md {
    font-size: var(--su-text-display-md);
    font-weight: 700;
    line-height: var(--su-leading-tight);
}

.su-text-display-sm {
    font-size: var(--su-text-display-sm);
    font-weight: 700;
    line-height: var(--su-leading-normal);
}

.su-text-headline-lg {
    font-size: var(--su-text-headline-lg);
    font-weight: 600;
    line-height: var(--su-leading-normal);
}

.su-text-headline-md {
    font-size: var(--su-text-headline-md);
    font-weight: 600;
    line-height: var(--su-leading-normal);
}

.su-text-headline-sm {
    font-size: var(--su-text-headline-sm);
    font-weight: 600;
    line-height: var(--su-leading-normal);
}

.su-text-title-lg {
    font-size: var(--su-text-title-lg);
    font-weight: 500;
    line-height: var(--su-leading-normal);
}

.su-text-title-md {
    font-size: var(--su-text-title-md);
    font-weight: 500;
    line-height: var(--su-leading-normal);
    letter-spacing: 0.5px;
}

.su-text-title-sm {
    font-size: var(--su-text-title-sm);
    font-weight: 500;
    line-height: var(--su-leading-normal);
    letter-spacing: 0.5px;
}

.su-text-body-lg {
    font-size: var(--su-text-body-lg);
    font-weight: 400;
    line-height: var(--su-leading-relaxed);
}

.su-text-body-md {
    font-size: var(--su-text-body-md);
    font-weight: 400;
    line-height: var(--su-leading-relaxed);
}

.su-text-body-sm {
    font-size: var(--su-text-body-sm);
    font-weight: 400;
    line-height: var(--su-leading-relaxed);
}

.su-text-label-lg {
    font-size: var(--su-text-label-lg);
    font-weight: 600;
}

.su-text-label-md {
    font-size: var(--su-text-label-md);
    font-weight: 600;
}

.su-text-label-sm {
    font-size: var(--su-text-label-sm);
    font-weight: 600;
}

.su-font-display {
    font-family: var(--su-font-display);
}

.su-font-mono {
    font-family: var(--su-font-mono);
}

/* ----------------------------------------------------------------------------
 * 3b. Text color utilities — unified text decoration schema (light + dark)
 * -------------------------------------------------------------------------- */
.su-text-strong {
    color: var(--su-on-surface);
}

.su-text-muted {
    color: var(--su-on-surface-muted);
}

.su-text-brand {
    color: var(--su-brand);
}

.su-text-on-brand {
    color: var(--su-on-brand);
}

/* ----------------------------------------------------------------------------
 * 4. Spacing utilities
 * -------------------------------------------------------------------------- */
.su-m-0 {
    margin: 0;
}

.su-mt-0 {
    margin-top: 0;
}

.su-mb-0 {
    margin-bottom: 0;
}

.su-p-0 {
    padding: 0;
}

.su-mt-sm {
    margin-top: var(--su-space-sm);
}

.su-mt-md {
    margin-top: var(--su-space-md);
}

.su-mt-lg {
    margin-top: var(--su-space-lg);
}

.su-mb-sm {
    margin-bottom: var(--su-space-sm);
}

.su-mb-md {
    margin-bottom: var(--su-space-md);
}

.su-mb-lg {
    margin-bottom: var(--su-space-lg);
}

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

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

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

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

.su-gap-md {
    gap: var(--su-space-md);
}

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

/* ----------------------------------------------------------------------------
 * 5. Badge — tint pattern (color-mix bg + semantic fg + border)
 *    Auto-adapts to dark mode via transparent color-mix.
 * -------------------------------------------------------------------------- */
.su-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--su-space-xs);
    padding: var(--su-space-xs) var(--su-space-sm);
    border-radius: var(--su-radius-sm);
    font-size: var(--su-text-label-md);
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color var(--su-anim-fast), border-color var(--su-anim-fast);
}

.su-badge-rounded {
    border-radius: var(--su-radius-pill);
}

.su-badge-outline {
    background: transparent !important;
    border: 1px solid currentColor;
}

/* Semantic — tint pattern */
.su-badge-success {
    background-color: var(--su-badge-success-bg);
    color: var(--su-badge-success-fg);
    border-color: var(--su-badge-success-border);
}

.su-badge-warning {
    background-color: var(--su-badge-warning-bg);
    color: var(--su-badge-warning-fg);
    border-color: var(--su-badge-warning-border);
}

.su-badge-error {
    background-color: var(--su-badge-danger-bg);
    color: var(--su-badge-danger-fg);
    border-color: var(--su-badge-danger-border);
}

.su-badge-info {
    background-color: var(--su-badge-info-bg);
    color: var(--su-badge-info-fg);
    border-color: var(--su-badge-info-border);
}

.su-badge-muted {
    background-color: var(--su-badge-muted-bg);
    color: var(--su-badge-muted-fg);
    border-color: var(--su-badge-muted-border);
}

.su-badge-primary {
    background-color: var(--su-badge-brand-bg);
    color: var(--su-badge-brand-fg);
    border-color: var(--su-badge-brand-border);
}

.su-badge-secondary {
    background-color: var(--su-badge-muted-bg);
    color: var(--su-badge-muted-fg);
    border-color: var(--su-badge-muted-border);
}

/* SAPIRO category badges — tint with SAPIRO colors */
.su-badge-strategic {
    background-color: color-mix(in srgb, var(--su-strategic) 15%, transparent);
    color: var(--su-strategic);
    border-color: color-mix(in srgb, var(--su-strategic) 25%, transparent);
}

.su-badge-analytical {
    background-color: color-mix(in srgb, var(--su-analytical) 15%, transparent);
    color: var(--su-analytical);
    border-color: color-mix(in srgb, var(--su-analytical) 25%, transparent);
}

.su-badge-philosophical {
    background-color: color-mix(in srgb, var(--su-philosophical) 15%, transparent);
    color: var(--su-philosophical);
    border-color: color-mix(in srgb, var(--su-philosophical) 25%, transparent);
}

.su-badge-informative {
    background-color: color-mix(in srgb, var(--su-informative) 15%, transparent);
    color: var(--su-informative);
    border-color: color-mix(in srgb, var(--su-informative) 25%, transparent);
}

.su-badge-responsible {
    background-color: color-mix(in srgb, var(--su-responsible) 15%, transparent);
    color: var(--su-responsible);
    border-color: color-mix(in srgb, var(--su-responsible) 25%, transparent);
}

.su-badge-operational {
    background-color: color-mix(in srgb, var(--su-operational) 15%, transparent);
    color: var(--su-operational);
    border-color: color-mix(in srgb, var(--su-operational) 25%, transparent);
}

/* Solid variant — high-contrast solid background (s2.2) */
.su-badge-solid.su-badge-success {
    background-color: var(--su-semantic-success);
    color: #fff;
    border-color: var(--su-semantic-success);
}

.su-badge-solid.su-badge-warning {
    background-color: var(--su-semantic-warning);
    color: #fff;
    border-color: var(--su-semantic-warning);
}

.su-badge-solid.su-badge-error {
    background-color: var(--su-semantic-danger);
    color: #fff;
    border-color: var(--su-semantic-danger);
}

.su-badge-solid.su-badge-info {
    background-color: var(--su-semantic-info);
    color: #fff;
    border-color: var(--su-semantic-info);
}

.su-badge-solid.su-badge-primary {
    background-color: var(--su-brand);
    color: var(--su-on-brand);
    border-color: var(--su-brand);
}

/* ----------------------------------------------------------------------------
 * 5b. Icon size utilities (s2.6)
 * -------------------------------------------------------------------------- */
.su-icon-xs {
    font-size: 12px;
}

.su-icon-sm {
    font-size: 14px;
}

.su-icon-md {
    font-size: 16px;
}

.su-icon-lg {
    font-size: 20px;
}

.su-icon-xl {
    font-size: 24px;
}

.su-icon-2xl {
    font-size: 32px;
}

/* ----------------------------------------------------------------------------
 * 6. Button — token-driven colors (s3.3), no Canvas color classes
 * -------------------------------------------------------------------------- */
.su-button {
    font-family: var(--su-font-default);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--su-space-xs);
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--su-anim-fast), border-color var(--su-anim-fast),
        color var(--su-anim-fast), transform 100ms ease, box-shadow var(--su-anim-fast);
}

.su-button:active {
    transform: scale(0.97);
}

/* Filled variants — from component-role tokens */
.su-button-primary {
    background-color: var(--su-btn-primary-bg);
    color: var(--su-btn-primary-fg);
    border-color: var(--su-btn-primary-bg);
}

.su-button-primary:hover {
    background-color: var(--su-btn-primary-hover-bg);
    border-color: var(--su-btn-primary-hover-bg);
}

.su-button-success {
    background-color: var(--su-btn-success-bg);
    color: var(--su-btn-success-fg);
    border-color: var(--su-btn-success-bg);
}

.su-button-success:hover {
    background-color: var(--su-btn-success-hover-bg);
    border-color: var(--su-btn-success-hover-bg);
}

.su-button-warning {
    background-color: var(--su-btn-warning-bg);
    color: var(--su-btn-warning-fg);
    border-color: var(--su-btn-warning-bg);
}

.su-button-warning:hover {
    background-color: var(--su-btn-warning-hover-bg);
    border-color: var(--su-btn-warning-hover-bg);
}

.su-button-error {
    background-color: var(--su-btn-danger-bg);
    color: var(--su-btn-danger-fg);
    border-color: var(--su-btn-danger-bg);
}

.su-button-error:hover {
    background-color: var(--su-btn-danger-hover-bg);
    border-color: var(--su-btn-danger-hover-bg);
}

.su-button-info {
    background-color: var(--su-btn-info-bg);
    color: var(--su-btn-info-fg);
    border-color: var(--su-btn-info-bg);
}

.su-button-info:hover {
    background-color: var(--su-btn-info-hover-bg);
    border-color: var(--su-btn-info-hover-bg);
}

.su-button-secondary {
    background-color: var(--su-btn-secondary-bg);
    color: var(--su-btn-secondary-fg);
    border-color: var(--su-grey-300);
}

.su-button-secondary:hover {
    background-color: var(--su-btn-secondary-hover-bg);
}

/* Outline variants */
.su-button-outline-primary {
    background: transparent;
    color: var(--su-btn-primary-bg);
    border: 1px solid var(--su-btn-primary-bg);
}

.su-button-outline-primary:hover {
    background-color: color-mix(in srgb, var(--su-btn-primary-bg) 10%, transparent);
}

.su-button-outline-success {
    background: transparent;
    color: var(--su-btn-success-bg);
    border: 1px solid var(--su-btn-success-bg);
}

.su-button-outline-success:hover {
    background-color: color-mix(in srgb, var(--su-btn-success-bg) 10%, transparent);
}

.su-button-outline-warning {
    background: transparent;
    color: var(--su-btn-warning-bg);
    border: 1px solid var(--su-btn-warning-bg);
}

.su-button-outline-warning:hover {
    background-color: color-mix(in srgb, var(--su-btn-warning-bg) 10%, transparent);
}

.su-button-outline-error {
    background: transparent;
    color: var(--su-btn-danger-bg);
    border: 1px solid var(--su-btn-danger-bg);
}

.su-button-outline-error:hover {
    background-color: color-mix(in srgb, var(--su-btn-danger-bg) 10%, transparent);
}

.su-button-outline-info {
    background: transparent;
    color: var(--su-btn-info-bg);
    border: 1px solid var(--su-btn-info-bg);
}

.su-button-outline-info:hover {
    background-color: color-mix(in srgb, var(--su-btn-info-bg) 10%, transparent);
}

.su-button-outline-secondary {
    background: transparent;
    color: var(--su-btn-secondary-fg);
    border: 1px solid var(--su-grey-400);
}

.su-button-outline-secondary:hover {
    background-color: color-mix(in srgb, var(--su-grey-500) 10%, transparent);
}

/* Border (light outline / tertiary) */
.su-button-border-primary {
    background: transparent;
    color: var(--su-btn-primary-bg);
    border: 1px solid var(--su-grey-300);
}

.su-button-border-primary:hover {
    border-color: var(--su-btn-primary-bg);
    color: var(--su-btn-primary-bg);
}

/* 3D shadow */
.su-button-3d {
    box-shadow: 0 2px 0 0 color-mix(in srgb, var(--su-btn-primary-bg) 50%, transparent);
}

.su-button-3d:active {
    box-shadow: 0 0 0 0 transparent;
    transform: translateY(2px);
}

.su-button-sm {
    padding: var(--su-space-xs) var(--su-space-md);
    font-size: var(--su-text-label-md);
}

.su-button-lg {
    padding: var(--su-space-md) var(--su-space-lg);
    font-size: var(--su-text-body-lg);
}

.su-button-block {
    display: flex;
    width: 100%;
}

.su-button[disabled],
.su-button.is-disabled {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}

.su-button-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: su-spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: var(--su-space-xs);
}

@keyframes su-spin {
    to {
        transform: rotate(360deg);
    }
}

/* === Animation keyframes (s1.4) === */
@keyframes su-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes su-slide-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes su-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(16px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes su-pulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--su-brand) 40%, transparent);
    }

    100% {
        box-shadow: 0 0 0 12px transparent;
    }
}

@keyframes su-breathe {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

@keyframes su-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes su-scale-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* === Animation utility classes (s1.5) === */
.su-animate-fade-in {
    animation: su-fade-in var(--su-anim-fast) ease-out;
}

.su-animate-slide-up {
    animation: su-slide-up var(--su-anim-medium) ease-out;
}

.su-animate-slide-in-right {
    animation: su-slide-in-right var(--su-anim-medium) ease-out;
}

.su-animate-scale-in {
    animation: su-scale-in var(--su-anim-fast) ease-out;
}

.su-animate-pulse {
    animation: su-pulse 600ms ease-out;
}

.su-animate-breathe {
    animation: su-breathe 2s ease-in-out infinite;
}

/* Stagger — parent class, children get incremental delay */
.su-animate-stagger>* {
    animation: su-fade-in var(--su-anim-fast) ease-out both;
}

.su-animate-stagger>*:nth-child(1) {
    animation-delay: 0ms;
}

.su-animate-stagger>*:nth-child(2) {
    animation-delay: 30ms;
}

.su-animate-stagger>*:nth-child(3) {
    animation-delay: 60ms;
}

.su-animate-stagger>*:nth-child(4) {
    animation-delay: 90ms;
}

.su-animate-stagger>*:nth-child(5) {
    animation-delay: 120ms;
}

.su-animate-stagger>*:nth-child(6) {
    animation-delay: 150ms;
}

.su-animate-stagger>*:nth-child(7) {
    animation-delay: 180ms;
}

.su-animate-stagger>*:nth-child(8) {
    animation-delay: 210ms;
}

.su-animate-stagger>*:nth-child(9) {
    animation-delay: 240ms;
}

.su-animate-stagger>*:nth-child(10) {
    animation-delay: 270ms;
}

/* Skeleton loading */
.su-skeleton {
    background: linear-gradient(90deg,
            var(--su-skeleton-base) 0%,
            var(--su-skeleton-shine) 50%,
            var(--su-skeleton-base) 100%);
    background-size: 200% 100%;
    animation: su-shimmer 1.5s infinite linear;
    border-radius: var(--su-radius-sm);
}

/* Hover lift — for cards, tiles */
.su-hover-lift {
    transition: transform var(--su-anim-fast) ease, box-shadow var(--su-anim-fast) ease;
}

.su-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--su-shadow-md);
}

/* Press — for buttons, icon buttons */
.su-press {
    transition: transform 100ms ease;
}

.su-press:active {
    transform: scale(0.97);
}

/* Expand animation — for collapsible sections */
.su-animate-expand {
    overflow: hidden;
    transition: max-height var(--su-anim-medium) ease, opacity var(--su-anim-medium) ease;
}

.su-animate-expand.su-collapsed {
    max-height: 0;
    opacity: 0;
}

.su-animate-expand.su-expanded {
    max-height: 1000px;
    opacity: 1;
}

/* === Focus ring — keyboard navigation only (s1.7) === */
.su-button:focus-visible,
.su-icon-button:focus-visible,
.su-list-tile:focus-visible,
.su-badge:focus-visible,
.su-card-link:focus-visible,
.su-page-header-crumb:focus-visible,
.su-page-header-chip:focus-visible {
    outline: 2px solid var(--su-focus-ring);
    outline-offset: var(--su-focus-ring-offset);
    border-radius: var(--su-radius-sm);
}

/* ----------------------------------------------------------------------------
 * 6b. Icon Button — square, icon-only, aria-label (s2.5)
 * -------------------------------------------------------------------------- */
.su-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--su-radius-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--su-anim-fast), border-color var(--su-anim-fast),
        color var(--su-anim-fast), transform 100ms ease;
    flex-shrink: 0;
    line-height: 1;
}

.su-icon-button:focus-visible {
    outline: 2px solid var(--su-focus-ring);
    outline-offset: var(--su-focus-ring-offset);
}

/* Sizes — square */
.su-icon-button-sm {
    width: 28px;
    height: 28px;
    font-size: 13px;
}

.su-icon-button-md {
    width: 36px;
    height: 36px;
    font-size: 16px;
}

.su-icon-button-lg {
    width: 44px;
    height: 44px;
    font-size: 20px;
}

/* Filled variants */
.su-icon-button-primary {
    background-color: var(--su-btn-primary-bg);
    color: var(--su-btn-primary-fg);
}

.su-icon-button-primary:hover {
    background-color: var(--su-btn-primary-hover-bg);
}

.su-icon-button-success {
    background-color: var(--su-btn-success-bg);
    color: var(--su-btn-success-fg);
}

.su-icon-button-success:hover {
    background-color: var(--su-btn-success-hover-bg);
}

.su-icon-button-warning {
    background-color: var(--su-btn-warning-bg);
    color: var(--su-btn-warning-fg);
}

.su-icon-button-warning:hover {
    background-color: var(--su-btn-warning-hover-bg);
}

.su-icon-button-error {
    background-color: var(--su-btn-danger-bg);
    color: var(--su-btn-danger-fg);
}

.su-icon-button-error:hover {
    background-color: var(--su-btn-danger-hover-bg);
}

.su-icon-button-info {
    background-color: var(--su-btn-info-bg);
    color: var(--su-btn-info-fg);
}

.su-icon-button-info:hover {
    background-color: var(--su-btn-info-hover-bg);
}

.su-icon-button-secondary {
    background-color: var(--su-btn-secondary-bg);
    color: var(--su-btn-secondary-fg);
}

.su-icon-button-secondary:hover {
    background-color: var(--su-btn-secondary-hover-bg);
}

/* Outline variants */
.su-icon-button-outline {
    background: transparent;
}

.su-icon-button-outline.su-icon-button-primary {
    color: var(--su-btn-primary-bg);
    border-color: var(--su-btn-primary-bg);
}

.su-icon-button-outline.su-icon-button-primary:hover {
    background-color: color-mix(in srgb, var(--su-btn-primary-bg) 10%, transparent);
}

.su-icon-button-outline.su-icon-button-success {
    color: var(--su-btn-success-bg);
    border-color: var(--su-btn-success-bg);
}

.su-icon-button-outline.su-icon-button-success:hover {
    background-color: color-mix(in srgb, var(--su-btn-success-bg) 10%, transparent);
}

.su-icon-button-outline.su-icon-button-warning {
    color: var(--su-btn-warning-bg);
    border-color: var(--su-btn-warning-bg);
}

.su-icon-button-outline.su-icon-button-warning:hover {
    background-color: color-mix(in srgb, var(--su-btn-warning-bg) 10%, transparent);
}

.su-icon-button-outline.su-icon-button-error {
    color: var(--su-btn-danger-bg);
    border-color: var(--su-btn-danger-bg);
}

.su-icon-button-outline.su-icon-button-error:hover {
    background-color: color-mix(in srgb, var(--su-btn-danger-bg) 10%, transparent);
}

.su-icon-button-outline.su-icon-button-info {
    color: var(--su-btn-info-bg);
    border-color: var(--su-btn-info-bg);
}

.su-icon-button-outline.su-icon-button-info:hover {
    background-color: color-mix(in srgb, var(--su-btn-info-bg) 10%, transparent);
}

.su-icon-button-outline.su-icon-button-secondary {
    color: var(--su-btn-secondary-fg);
    border-color: var(--su-grey-300);
}

.su-icon-button-outline.su-icon-button-secondary:hover {
    background-color: color-mix(in srgb, var(--su-grey-500) 10%, transparent);
}

/* Disabled / loading */
.su-icon-button.is-disabled,
.su-icon-button[disabled] {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* Dark mode — outline hover uses lighter mix */
[data-su-theme-dark="true"] .su-icon-button-outline:hover {
    background-color: color-mix(in srgb, currentColor 15%, transparent);
}

/* ----------------------------------------------------------------------------
 * 7. Card — extends Bootstrap .card with Sapient surface + shadow (s5.9)
 * -------------------------------------------------------------------------- */
.su-card {
    background-color: var(--su-card);
    border: 1px solid var(--su-card-border);
    border-radius: var(--su-radius-md);
    box-shadow: var(--su-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--su-anim-fast), transform var(--su-anim-fast);
    margin-bottom: var(--su-space-md);
}

/* Last card in a container has no bottom margin (prevents trailing gap) */
.su-card:last-child {
    margin-bottom: 0;
}

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

.su-card.su-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--su-shadow-md);
}

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

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

.su-card-elevated:hover {
    box-shadow: var(--su-shadow-lg);
}

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

.su-card-title {
    font-size: var(--su-text-title-lg);
    font-weight: 600;
    margin-bottom: var(--su-space-xs);
    color: var(--su-card-title-fg);
}

.su-card-subtitle {
    font-size: var(--su-text-body-sm);
    color: var(--su-card-subtitle-fg);
    margin-bottom: var(--su-space-sm);
}

.su-card-text {
    font-size: var(--su-text-body-md);
    color: var(--su-on-surface);
}

/* Brand-tinted card header */
.su-card-header {
    background: var(--su-card-header-bg);
    border-bottom: 1px solid var(--su-card-border);
    padding: var(--su-space-md);
}

/* ----------------------------------------------------------------------------
 * 8. Info card — title + value + icon
 * -------------------------------------------------------------------------- */
.su-info-card {
    padding: var(--su-space-md);
}

.su-info-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--su-radius-sm);
    background-color: color-mix(in srgb, var(--su-primary) 12%, transparent);
    color: var(--su-primary);
    font-size: 20px;
}

.su-info-card-value {
    font-size: var(--su-text-headline-sm);
    font-weight: 700;
}

.su-info-card-title {
    font-size: var(--su-text-body-sm);
    color: var(--su-on-surface-muted);
}

/* ----------------------------------------------------------------------------
 * 9. Stats card — label + value + trend
 * -------------------------------------------------------------------------- */
.su-stats-card {
    padding: var(--su-space-md);
}

.su-stats-card-label {
    font-size: var(--su-text-body-md);
    color: var(--su-on-surface-muted);
}

.su-stats-card-value {
    font-size: var(--su-text-headline-md);
    font-weight: 700;
}

.su-stats-card-change {
    font-size: var(--su-text-label-md);
    font-weight: 600;
}

.su-stats-card-change.up {
    color: var(--su-success);
}

.su-stats-card-change.down {
    color: var(--su-error);
}

/* ----------------------------------------------------------------------------
 * 9b. Live Card (s5.1) — Fiori KPI tile, finally has CSS!
 * -------------------------------------------------------------------------- */
.su-live-card {
    border: 1px solid var(--su-card-border);
    border-radius: var(--su-radius-md);
    box-shadow: var(--su-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--su-anim-fast), transform var(--su-anim-fast);
    background: var(--su-card);
}

.su-live-card:hover {
    box-shadow: var(--su-shadow-md);
}

.su-live-card .card-body {
    padding: var(--su-space-md);
}

.su-live-card-header {
    display: flex;
    align-items: center;
    gap: var(--su-space-sm);
    margin-bottom: var(--su-space-sm);
}

.su-live-card-icon {
    font-size: 16px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--su-radius-sm);
    flex-shrink: 0;
}

.su-live-card-title {
    font-size: var(--su-text-label-md);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--su-on-surface-muted);
    margin: 0;
}

.su-live-card-value {
    font-size: var(--su-text-headline-sm);
    font-weight: 700;
    color: var(--su-on-surface);
    line-height: 1.2;
    margin-bottom: var(--su-space-xs);
}

.su-live-card-subtitle {
    font-size: var(--su-text-body-sm);
    color: var(--su-on-surface-muted);
}

.su-live-card-footer {
    padding: var(--su-space-xs) var(--su-space-md);
    background: color-mix(in srgb, var(--su-brand) 4%, transparent);
    border-top: 1px solid var(--su-card-border);
}

/* Variant accents — colored left border + icon background */
.su-live-card-primary {
    border-left: 3px solid var(--su-brand);
}

.su-live-card-primary .su-live-card-icon {
    background: color-mix(in srgb, var(--su-brand) 12%, transparent);
    color: var(--su-brand);
}

.su-live-card-success {
    border-left: 3px solid var(--su-semantic-success);
}

.su-live-card-success .su-live-card-icon {
    background: color-mix(in srgb, var(--su-semantic-success) 12%, transparent);
    color: var(--su-semantic-success);
}

.su-live-card-warning {
    border-left: 3px solid var(--su-semantic-warning);
}

.su-live-card-warning .su-live-card-icon {
    background: color-mix(in srgb, var(--su-semantic-warning) 12%, transparent);
    color: var(--su-semantic-warning);
}

.su-live-card-info {
    border-left: 3px solid var(--su-semantic-info);
}

.su-live-card-info .su-live-card-icon {
    background: color-mix(in srgb, var(--su-semantic-info) 12%, transparent);
    color: var(--su-semantic-info);
}

.su-live-card-secondary {
    border-left: 3px solid var(--su-grey-400);
}

.su-live-card-secondary .su-live-card-icon {
    background: color-mix(in srgb, var(--su-grey-500) 12%, transparent);
    color: var(--su-on-surface-muted);
}

.su-live-card-error {
    border-left: 3px solid var(--su-semantic-danger);
}

.su-live-card-error .su-live-card-icon {
    background: color-mix(in srgb, var(--su-semantic-danger) 12%, transparent);
    color: var(--su-semantic-danger);
}

/* ----------------------------------------------------------------------------
 * 9c. Metric Row (s5.3) — horizontal KPI strip
 * -------------------------------------------------------------------------- */
.su-metric-row {
    border: 1px solid var(--su-card-border);
    border-radius: var(--su-radius-md);
    box-shadow: var(--su-shadow-sm);
    background: var(--su-card);
    overflow: hidden;
}

.su-metric-row-body {
    display: flex;
    align-items: stretch;
}

.su-metric-cell {
    flex: 1 1 0;
    padding: var(--su-space-md);
    min-width: 0;
}

.su-metric-cell-header {
    display: flex;
    align-items: center;
    gap: var(--su-space-xs);
    margin-bottom: var(--su-space-xs);
}

.su-metric-cell-icon {
    font-size: 14px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--su-radius-sm);
    flex-shrink: 0;
}

.su-metric-cell-label {
    font-size: var(--su-text-label-md);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--su-on-surface-muted);
}

.su-metric-cell-value {
    font-size: var(--su-text-headline-sm);
    font-weight: 700;
    color: var(--su-on-surface);
    line-height: 1.2;
}

.su-metric-divider {
    width: 1px;
    background: var(--su-divider);
    flex-shrink: 0;
}

.su-metric-cell-primary .su-metric-cell-icon {
    background: color-mix(in srgb, var(--su-brand) 12%, transparent);
    color: var(--su-brand);
}

.su-metric-cell-success .su-metric-cell-icon {
    background: color-mix(in srgb, var(--su-semantic-success) 12%, transparent);
    color: var(--su-semantic-success);
}

.su-metric-cell-warning .su-metric-cell-icon {
    background: color-mix(in srgb, var(--su-semantic-warning) 12%, transparent);
    color: var(--su-semantic-warning);
}

.su-metric-cell-error .su-metric-cell-icon {
    background: color-mix(in srgb, var(--su-semantic-danger) 12%, transparent);
    color: var(--su-semantic-danger);
}

.su-metric-cell-info .su-metric-cell-icon {
    background: color-mix(in srgb, var(--su-semantic-info) 12%, transparent);
    color: var(--su-semantic-info);
}

.su-metric-cell-muted .su-metric-cell-icon {
    background: color-mix(in srgb, var(--su-grey-500) 12%, transparent);
    color: var(--su-on-surface-muted);
}

@media (max-width: 768px) {
    .su-metric-row-body {
        flex-direction: column;
    }

    .su-metric-divider {
        width: 100%;
        height: 1px;
    }
}

/* ----------------------------------------------------------------------------
 * 9d. Action Card (s5.8)
 * -------------------------------------------------------------------------- */
.su-action-card {
    border: 1px solid var(--su-card-border);
    border-radius: var(--su-radius-md);
    box-shadow: var(--su-shadow-sm);
    background: var(--su-card);
    text-align: center;
    transition: box-shadow var(--su-anim-fast), transform var(--su-anim-fast);
}

.su-action-card-body {
    padding: var(--su-space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--su-space-sm);
}

.su-action-card-icon {
    font-size: 32px;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.su-action-card-primary .su-action-card-icon {
    background: color-mix(in srgb, var(--su-brand) 12%, transparent);
    color: var(--su-brand);
}

.su-action-card-success .su-action-card-icon {
    background: color-mix(in srgb, var(--su-semantic-success) 12%, transparent);
    color: var(--su-semantic-success);
}

.su-action-card-warning .su-action-card-icon {
    background: color-mix(in srgb, var(--su-semantic-warning) 12%, transparent);
    color: var(--su-semantic-warning);
}

.su-action-card-error .su-action-card-icon {
    background: color-mix(in srgb, var(--su-semantic-danger) 12%, transparent);
    color: var(--su-semantic-danger);
}

.su-action-card-info .su-action-card-icon {
    background: color-mix(in srgb, var(--su-semantic-info) 12%, transparent);
    color: var(--su-semantic-info);
}

.su-action-card-title {
    font-size: var(--su-text-title-lg);
    font-weight: 600;
    margin: 0;
    color: var(--su-on-surface);
}

.su-action-card-desc {
    font-size: var(--su-text-body-sm);
    color: var(--su-on-surface-muted);
    margin: 0;
}

.su-action-card-actions {
    margin-top: var(--su-space-sm);
}

/* ----------------------------------------------------------------------------
 * 9e. Data Card (s5.8)
 * -------------------------------------------------------------------------- */
.su-data-card {
    border: 1px solid var(--su-card-border);
    border-radius: var(--su-radius-md);
    box-shadow: var(--su-shadow-sm);
    background: var(--su-card);
    overflow: hidden;
}

.su-data-card-header {
    padding: var(--su-space-md);
    background: var(--su-card-header-bg);
    border-bottom: 1px solid var(--su-card-border);
}

.su-data-card-title {
    font-size: var(--su-text-title-md);
    font-weight: 600;
    margin: 0;
    color: var(--su-card-title-fg);
}

.su-data-card-body {
    padding: 0;
}

.su-data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--su-space-sm) var(--su-space-md);
    border-bottom: 1px solid var(--su-divider);
    gap: var(--su-space-md);
}

.su-data-row:last-child {
    border-bottom: none;
}

.su-data-row:hover {
    background: color-mix(in srgb, var(--su-brand) 3%, transparent);
}

.su-data-row-key {
    font-size: var(--su-text-body-sm);
    color: var(--su-on-surface-muted);
    font-weight: 500;
    flex-shrink: 0;
}

.su-data-row-value {
    font-size: var(--su-text-body-md);
    color: var(--su-on-surface);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.su-data-card-footer {
    padding: var(--su-space-sm) var(--su-space-md);
    background: color-mix(in srgb, var(--su-brand) 4%, transparent);
    border-top: 1px solid var(--su-card-border);
}

/* ----------------------------------------------------------------------------
 * 9f. Profile Card (s5.8)
 * -------------------------------------------------------------------------- */
.su-profile-card {
    border: 1px solid var(--su-card-border);
    border-radius: var(--su-radius-md);
    box-shadow: var(--su-shadow-sm);
    background: var(--su-card);
    overflow: hidden;
    text-align: center;
}

.su-profile-card-body {
    padding: var(--su-space-lg);
}

.su-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto var(--su-space-sm);
    display: block;
    border: 3px solid color-mix(in srgb, var(--su-brand) 20%, transparent);
}

.su-profile-name {
    font-size: var(--su-text-title-lg);
    font-weight: 600;
    margin: 0;
    color: var(--su-on-surface);
}

.su-profile-role {
    font-size: var(--su-text-body-sm);
    color: var(--su-on-surface-muted);
    margin-bottom: var(--su-space-md);
}

.su-profile-stats {
    display: flex;
    justify-content: center;
    gap: var(--su-space-lg);
    margin: var(--su-space-md) 0;
    padding: var(--su-space-sm) 0;
    border-top: 1px solid var(--su-divider);
    border-bottom: 1px solid var(--su-divider);
}

.su-profile-stat-value {
    font-size: var(--su-text-headline-sm);
    font-weight: 700;
    color: var(--su-on-surface);
    display: block;
}

.su-profile-stat-label {
    font-size: var(--su-text-label-sm);
    color: var(--su-on-surface-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.su-profile-actions {
    margin-top: var(--su-space-sm);
}

/* ----------------------------------------------------------------------------
 * 9g. Timeline Card (s5.8)
 * -------------------------------------------------------------------------- */
.su-timeline-card {
    border: 1px solid var(--su-card-border);
    border-radius: var(--su-radius-md);
    box-shadow: var(--su-shadow-sm);
    background: var(--su-card);
    overflow: hidden;
}

.su-timeline-card-header {
    padding: var(--su-space-md);
    background: var(--su-card-header-bg);
    border-bottom: 1px solid var(--su-card-border);
}

.su-timeline-card-title {
    font-size: var(--su-text-title-md);
    font-weight: 600;
    margin: 0;
    color: var(--su-card-title-fg);
}

.su-timeline-body {
    padding: var(--su-space-md);
    position: relative;
}

.su-timeline-item {
    display: flex;
    gap: var(--su-space-md);
    padding-bottom: var(--su-space-md);
    position: relative;
}

.su-timeline-item:last-child {
    padding-bottom: 0;
}

.su-timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background: var(--su-divider);
}

.su-timeline-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    z-index: 1;
}

.su-timeline-dot-success {
    background: color-mix(in srgb, var(--su-semantic-success) 15%, transparent);
    color: var(--su-semantic-success);
    border: 2px solid color-mix(in srgb, var(--su-semantic-success) 30%, transparent);
}

.su-timeline-dot-info {
    background: color-mix(in srgb, var(--su-semantic-info) 15%, transparent);
    color: var(--su-semantic-info);
    border: 2px solid color-mix(in srgb, var(--su-semantic-info) 30%, transparent);
}

.su-timeline-dot-error {
    background: color-mix(in srgb, var(--su-semantic-danger) 15%, transparent);
    color: var(--su-semantic-danger);
    border: 2px solid color-mix(in srgb, var(--su-semantic-danger) 30%, transparent);
}

.su-timeline-dot-warning {
    background: color-mix(in srgb, var(--su-semantic-warning) 15%, transparent);
    color: var(--su-semantic-warning);
    border: 2px solid color-mix(in srgb, var(--su-semantic-warning) 30%, transparent);
}

.su-timeline-dot-muted {
    background: color-mix(in srgb, var(--su-grey-500) 15%, transparent);
    color: var(--su-on-surface-muted);
    border: 2px solid color-mix(in srgb, var(--su-grey-500) 30%, transparent);
}

.su-timeline-content {
    flex: 1;
    min-width: 0;
}

.su-timeline-text {
    font-size: var(--su-text-body-md);
    color: var(--su-on-surface);
}

.su-timeline-time {
    font-size: var(--su-text-body-sm);
    color: var(--su-on-surface-muted);
    margin-top: 2px;
}

/* ----------------------------------------------------------------------------
 * 9h. TreeListView (s5.10) — group dividers, connector lines, animated collapse
 * -------------------------------------------------------------------------- */
.su-tree-list-view {
    border: 1px solid var(--su-card-border);
    border-radius: var(--su-radius-md);
    overflow: hidden;
    background: var(--su-card);
}

.su-tree-row[data-su-tree-depth="0"] {
    border-top: 2px solid var(--su-divider);
    padding-top: var(--su-space-sm);
    padding-bottom: var(--su-space-sm);
    background: color-mix(in srgb, var(--su-brand) 3%, transparent);
}

.su-tree-row[data-su-tree-depth="0"]:first-child {
    border-top: none;
}

.su-tree-row[data-su-tree-depth="0"] .su-list-tile-title {
    font-weight: 600;
    font-size: var(--su-text-body-lg);
}

.su-tree-row[data-su-tree-depth="1"] {
    background: var(--su-surface);
}

.su-tree-row[data-su-tree-depth="2"] {
    background: color-mix(in srgb, var(--su-brand) 2%, transparent);
}

.su-tree-row[data-su-tree-depth="3"] {
    background: var(--su-surface);
}

.su-tree-children {
    position: relative;
    transition: max-height var(--su-anim-medium) ease, opacity var(--su-anim-medium) ease;
    overflow: hidden;
}

.su-tree-children.su-collapsed {
    max-height: 0;
    opacity: 0;
}

.su-tree-children.su-expanded {
    max-height: 5000px;
    opacity: 1;
}

.su-tree-row-bordered {
    border-bottom: 1px solid var(--su-divider);
}

.su-tree-toggle {
    cursor: pointer;
    width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--su-on-surface-muted);
    transition: transform var(--su-anim-fast), color var(--su-anim-fast);
    flex-shrink: 0;
}

.su-tree-toggle:hover {
    color: var(--su-brand);
}

.su-tree-toggle.su-tree-expanded {
    transform: rotate(90deg);
    color: var(--su-brand);
}

.su-tree-row {
    display: flex;
    align-items: center;
    gap: var(--su-space-xs);
    padding: var(--su-space-xs) var(--su-space-sm);
    transition: background-color var(--su-anim-fast);
}

.su-tree-row-content {
    flex: 1;
    min-width: 0;
}

.su-tree-leaf {
    width: 20px;
    display: inline-block;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .su-tree-row {
        padding-left: var(--su-space-xs) !important;
    }

    .su-tree-row[data-su-tree-depth="2"],
    .su-tree-row[data-su-tree-depth="3"] {
        padding-left: var(--su-space-sm) !important;
    }
}

/* ----------------------------------------------------------------------------
 * 10. List tile (s4.2) — full width, responsive, animated expand
 * -------------------------------------------------------------------------- */
.su-list-tile {
    display: flex;
    align-items: center;
    gap: var(--su-space-md);
    width: 100%;
    padding: var(--su-space-sm) var(--su-space-md);
    border-radius: var(--su-radius-sm);
    text-decoration: none;
    color: var(--su-on-surface);
    transition: background-color var(--su-anim-fast), transform 100ms ease;
    box-sizing: border-box;
}

.su-list-tile:hover {
    background-color: color-mix(in srgb, var(--su-brand) 4%, var(--su-grey-100));
    color: var(--su-on-surface);
    text-decoration: none;
}

.su-list-tile-selected {
    background-color: var(--su-selected-bg);
    border-left: 3px solid var(--su-brand);
}

/* === ListTile Alignment Control (Flutter ListTile-inspired) === */

/* MainAxisAlignment — horizontal space distribution */
.su-tile-main-space-between {
    justify-content: space-between;
}

.su-tile-main-start {
    justify-content: flex-start;
}

.su-tile-main-center {
    justify-content: center;
}

.su-tile-main-end {
    justify-content: flex-end;
}

.su-tile-main-space-evenly {
    justify-content: space-evenly;
}

.su-tile-main-space-around {
    justify-content: space-around;
}

/* CrossAxisAlignment — vertical alignment of leading/trailing */
.su-tile-cross-center {
    align-items: center;
}

.su-tile-cross-start {
    align-items: flex-start;
}

.su-tile-cross-end {
    align-items: flex-end;
}

.su-tile-cross-stretch {
    align-items: stretch;
}

/* TitleAlignment — overrides cross-axis for leading/trailing relative to title text */
.su-tile-title-align-top {
    align-items: flex-start;
}

.su-tile-title-align-center {
    align-items: center;
}

.su-tile-title-align-bottom {
    align-items: flex-end;
}

/* Horizontal title gap — between leading/trailing and title block */
.su-tile-gap-xs {
    gap: var(--su-space-xs);
}

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

.su-tile-gap-md {
    gap: var(--su-space-md);
}

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

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

/* Content padding overrides */
.su-tile-padding-none {
    padding: 0;
}

.su-tile-padding-sm {
    padding: var(--su-space-xs) var(--su-space-sm);
}

.su-tile-padding-md {
    padding: var(--su-space-sm) var(--su-space-md);
}

.su-tile-padding-lg {
    padding: var(--su-space-md) var(--su-space-lg);
}

/* Leading area — enforce min-width and flex-shrink:0 so it doesn't collapse */
.su-list-tile-leading {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Trailing area — push to the far right, never shrink */
.su-list-tile-trailing {
    flex: 0 0 auto;
    color: var(--su-on-surface-muted);
    margin-left: auto;
    /* ensures trailing is pushed right even in start/center main-axis */
}

/* Content area — takes remaining space.
   No overflow clipping here — the title span handles its own ellipsis. */
.su-list-tile-content {
    flex: 1 1 auto;
    min-width: 0;
}

/* When a tile is inside a list row or tree row, the row provides padding.
   The tile should not add its own padding to avoid double-padding. */
.su-list-row>.su-list-tile,
.su-tree-row-content>.su-list-tile {
    padding: 0;
}

/* Content link — clickable title+subtitle area (contentHref) */
.su-tile-content-link:hover {
    color: var(--su-brand);
}

.su-tile-content-link:hover .su-list-tile-title {
    color: var(--su-brand);
}

/* Select mode checkbox */
.su-list-tile[data-select-mode] {
    cursor: pointer;
}

.su-list-tile[data-select-mode]:hover {
    background-color: color-mix(in srgb, var(--su-brand) 4%, transparent);
}

/* selectMode page — hide admin sidebar and appbar for distraction-free selection */
.admin-select-mode #admin-sidebar,
.admin-select-mode #admin-appbar {
    display: none !important;
}

/* SapientCard header actions — flex layout for title + actions */
.su-card-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.su-card-header-text {
    flex: 1 1 auto;
    min-width: 0;
}

.su-card-header-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* RelationshipBridge combined card — section spacing + drag handle */
.rb-section {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Media preview constraints (replaces inline style= on media elements) */
.su-media-preview {
    max-height: 500px;
    max-width: 100%;
}

.su-media-file-icon {
    font-size: 6rem;
}

/* Slider slide thumbnail (replaces inline style= in slides table) */
.su-slide-thumb {
    width: 48px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
}

/* Banner thumb (replaces inline style= in banner list) */
.su-banner-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
}

/* Design token color swatch (website design card) */
.su-design-swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Constrained input-group (layout tree-select search) */
.su-input-group-width {
    max-width: 400px;
}

/* Block picker thumbnail */
.su-picker-thumb {
    max-width: 60px;
}

/* RB tile media thumbnail */
.su-rb-thumb {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
}

/* Scrollable option boxes (feature value assignment) */
.su-scroll-120 {
    max-height: 120px;
    overflow-y: auto;
}

.su-scroll-200 {
    max-height: 200px;
    overflow-y: auto;
}

.su-scroll-250 {
    max-height: 250px;
    overflow-y: auto;
}

/* AdditionalInfo media preview */
.su-ai-img {
    max-height: 300px;
}

/* AdditionalInfo parent-child grouping */
.su-ai-children {
    margin-left: 1.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--cnvs-themecolor, #dc2626);
    margin-bottom: 1rem;
}

.su-ai-children>*+* {
    margin-top: 0.75rem;
}

/* Content Section — section body container (children of is_section parent) */
.su-ai-section-body {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.su-ai-section-body>*+* {
    margin-top: 1rem;
}

/* Content Section — Grid layouts for children */
.su-ai-section-body.su-ai-grid {
    display: grid;
    gap: 1rem;
}

.su-ai-section-body.su-ai-grid>*+* {
    margin-top: 0;
}

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

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

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

/* Responsive — collapse grids on mobile */
@media (max-width: 767.98px) {

    .su-ai-grid-2,
    .su-ai-grid-3,
    .su-ai-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Content Section — Feature Cards */
.su-ai-feature-cards {
    margin-bottom: 1rem;
}

.su-ai-feature-card {
    text-align: center;
}

.su-ai-feature-card-icon {
    color: var(--cnvs-themecolor, #dc2626);
}

/* Content Section — Value Props */
.su-ai-value-props {
    margin-bottom: 1rem;
}

.su-ai-value-prop-icon {
    color: var(--cnvs-themecolor, #dc2626);
}

/* Content Section — Feature Hero */
.su-ai-feature-hero {
    margin-bottom: 1rem;
}

.su-ai-feature-hero-image {
    max-height: 40vh;
    overflow: hidden;
}

.su-ai-feature-hero-image .su-overlay-image-img {
    width: 100%;
    max-height: 40vh;
    object-fit: cover;
}

/* Content Section — Stats Strip */
.su-ai-stats-strip {
    margin-bottom: 1rem;
    padding: 1rem 0;
}

.su-ai-stat-item {
    min-width: 120px;
}

.su-ai-stat-value {
    color: var(--cnvs-themecolor, #dc2626);
}

/* Content Section — Feature Split */
.su-ai-feature-split .section {
    margin-bottom: 2rem;
}

/* Dashboard2 zone render modes — Stacked + Grid */
.su-zone-stacked {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.su-zone-grid {
    display: grid;
    gap: 1rem;
}

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

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

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

.su-zone-grid-cell {
    min-width: 0;
}

@media (max-width: 767.98px) {

    .su-zone-grid-2,
    .su-zone-grid-3,
    .su-zone-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* SapientLazyImage — lazy-loaded image with sequential reveal */
.su-lazy-image {
    position: relative;
    overflow: hidden;
    display: block;
}

.su-lazy-image-rounded {
    border-radius: 6px;
}

.su-lazy-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Start invisible — fade in when loaded */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.su-lazy-image.su-lazy-loaded .su-lazy-image-img {
    opacity: 1;
}

/* Shimmer placeholder while loading */
.su-lazy-image:not(.su-lazy-loaded)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: su-lazy-shimmer 1.5s infinite linear;
}

@keyframes su-lazy-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.su-lazy-image-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* Media display — HeroSplit layout */
.su-media-hero-split {
    max-height: 25vh;
    min-height: 180px;
    overflow: hidden;
}

.su-media-hero-main {
    height: 25vh;
    min-height: 180px;
}

.su-media-hero-main .su-overlay-image,
.su-media-hero-main .su-overlay-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Thumbnail column — fills same height as cover, no scrollbars */
.su-media-hero-thumbs {
    height: 25vh;
    min-height: 180px;
    overflow: hidden;
}

/* CSS grid — simple 2×2, gap = spacing, border = separation */
.su-media-hero-thumb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    height: 100%;
    width: 100%;
}

.su-media-hero-thumb-tile {
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.su-media-hero-thumb-tile .su-lazy-image,
.su-media-hero-thumb-tile .su-lazy-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Media display — height constraint for all layout variants (25vh) */
.su-media-grid,
.su-media-masonry,
.su-media-carousel,
.su-media-instagram-grid,
.su-media-video-gallery,
.su-media-single {
    max-height: 25vh;
    min-height: 180px;
    overflow: hidden;
    margin-bottom: 1rem;
}

/* Gallery grid — images fill constrained height */
.su-media-grid .su-gallery-image {
    width: 100%;
    height: 25vh;
    max-height: 25vh;
    min-height: 180px;
    object-fit: cover;
}

/* Masonry — images fill constrained height */
.su-media-masonry .su-gallery-image {
    width: 100%;
    height: 25vh;
    max-height: 25vh;
    min-height: 180px;
    object-fit: cover;
}

/* Carousel — items fill constrained height */
.su-media-carousel .su-carousel-item,
.su-media-carousel .su-carousel-image {
    height: 25vh;
    max-height: 25vh;
    min-height: 180px;
    object-fit: cover;
}

/* Instagram grid — tiles fill constrained height */
.su-media-instagram-grid .su-lazy-image,
.su-media-instagram-grid .su-lazy-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.su-media-instagram-grid .col-6,
.su-media-instagram-grid .col-md-3 {
    height: calc(25vh / 2);
    min-height: 90px;
}

/* Video gallery — tiles fill constrained height */
.su-media-video-gallery .col-md-6,
.su-media-video-gallery .col-lg-4 {
    height: auto;
}

.su-media-video-gallery .su-media-video-thumb {
    max-height: 25vh;
}

/* Single image — fill constrained height */
.su-media-single .su-lazy-image,
.su-media-single .su-lazy-image-img {
    width: 100%;
    max-height: 25vh;
    min-height: 180px;
    object-fit: cover;
}

/* Full-width slider — constrain height */
.su-media-full-slider {
    max-height: 25vh;
    min-height: 180px;
    overflow: hidden;
}

.su-media-full-slider .swiper-slide-bg {
    height: 25vh;
    min-height: 180px;
    background-size: cover;
    background-position: center;
}

/* Parallax — constrain height */
.su-media-parallax {
    max-height: 25vh;
    min-height: 180px;
    overflow: hidden;
}

.su-media-parallax-thumbs {
    max-height: 25vh;
    overflow: hidden;
}

/* Lightbox overlay links — invisible but clickable */
.swiper-slide-lightbox,
.su-media-parallax-lightbox {
    z-index: 10;
    cursor: zoom-in;
}

/* Full-slide click layer (pure-media slides) — show_cta=0 + link set:
   invisible full-bleed anchor so clicking anywhere on the slide navigates.
   Sits above bg/mask (z:-1/0) but below the caption (z:20), so any
   caption content (rare when CTA is off) still wins the click. */
.su-hero-slide-link {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: transparent;
}

/* Hero slider gradient overlay — ensures white caption text is readable
   on any background image (dark or light). Subtle bottom-up gradient:
   transparent at top → semi-dark at bottom. Industry standard.
   z-index: 0 sits above bg (z-index: -1) but below caption (default flow). */
.swiper-slide-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.75) 0%,
            rgba(0, 0, 0, 0.45) 40%,
            rgba(0, 0, 0, 0.1) 75%,
            rgba(0, 0, 0, 0) 100%);
}

/* Banner with background image — full-width section with image + overlay */
.banner-with-bg {
    position: relative;
    overflow: hidden;
    min-height: 280px;
    display: flex;
    align-items: center;
    background-color: transparent !important;
    background-image: none !important;
    /* Full-width fluid — zero margins so it touches browser edges */
    margin: 0 !important;
    padding: 0 !important;
}

/* Fluid sections in container-fluid rows — zero Canvas .section margins
   so they touch browser edges like the header zone's slider-element does.
   The debug wrapper stays visible (it doesn't add spacing — .section does). */
.su-dashboard2-container.container-fluid>.section,
.su-dashboard2-container.container-fluid .section {
    margin: 0 !important;
    padding: 0 !important;
}

/* Card carousel sections in fluid rows still need bottom breathing room —
   restore vertical padding so the carousel doesn't sit flush against the
   next stacked section / page footer. Horizontal stays 0 (edge-to-edge). */
.su-dashboard2-container.container-fluid .section .su-carousel {
    margin-bottom: 3rem;
}

.banner-with-bg .banner-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
}

.banner-with-bg .banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0.6) 0%,
            rgba(0, 0, 0, 0.3) 50%,
            rgba(0, 0, 0, 0.1) 100%);
}

/* Magnific Popup — white background behind images (for transparent PNGs) */
.mfp-figure::after {
    background: #ffffff;
}

.mfp-image-holder .mfp-content {
    background: #ffffff;
}

.mfp-image-holder .mfp-bottom-bar {
    background: #ffffff;
}

/* Responsive — on mobile, hero split stacks vertically.
   Increase max height slightly and let thumbs wrap naturally. */
@media (max-width: 767.98px) {
    .su-media-hero-split {
        max-height: none;
    }

    .su-media-hero-main {
        height: auto;
        max-height: 30vh;
    }

    .su-media-hero-main .su-overlay-image-img {
        aspect-ratio: 16/9;
        height: auto;
    }

    .su-media-hero-thumbs {
        height: auto;
        max-height: none;
        overflow-y: visible;
    }
}

.su-ai-thumb {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    background-color: #f0f0f0;
    background-size: cover;
    background-position: center;
}

.su-ai-zoom {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 14px;
}

.su-ai-zoom-sm {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 9px;
    padding: 1px 3px;
    border-radius: 4px 0 4px 0;
}

/* ── Generic FK Picker (Phase C) ─────────────────────────────────────── */
.su-fk-picker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
}

.su-fk-preview {
    flex-shrink: 0;
    line-height: 0;
}

.su-fk-label {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
}

.su-fk-placeholder {
    color: var(--su-text-muted, #6c758d);
    background: #f0f0f0;
    border-radius: 4px;
}

.su-fk-preview-zoom {
    text-decoration: none;
}

.su-fk-preview-zoom:hover .su-ai-thumb {
    opacity: 0.85;
}

/* Narrow detail tables (geo detail views) */
.su-table-narrow {
    max-width: 600px;
}

.su-table-narrow th {
    width: 200px;
}

.su-th-label {
    width: 200px;
}

.su-max-w-600 {
    max-width: 600px;
}

/* RB target link — inline icon must stay inside the row (no bottom overflow) */
.su-list-tile .rb-target-link {
    display: inline-flex;
    align-items: center;
    gap: var(--su-space-xs);
    max-width: 100%;
    line-height: 1.3;
}

.su-list-tile .rb-target-link i {
    line-height: 1;
    flex-shrink: 0;
}

/* RB list rows — clip glyph overflows instead of spilling below the card */
.rb-list .su-list-tile {
    overflow: hidden;
}

.rb-section:last-child {
    border-bottom: none;
}

.rb-section:first-child .rb-section-header {
    margin-top: 0 !important;
}

.rb-section-header {
    padding: 4px 0;
}

.rb-section-label .su-badge {
    font-size: 0.8rem;
}

.rb-drag-handle {
    cursor: grab;
    opacity: 0.4;
}

.rb-drag-handle:active {
    cursor: grabbing;
}

.su-list-tile.dragging {
    opacity: 0.5;
}

.su-list-tile[data-target-slug] .rb-main-toggle,
.su-list-tile[data-target-slug] .rb-remove-btn {
    text-decoration: none;
    line-height: 1;
    font-size: 0.9rem;
}

.su-list-tile[data-target-slug] .rb-main-toggle:hover,
.su-list-tile[data-target-slug] .rb-remove-btn:hover {
    text-decoration: none;
}

/* Expandable tile — expand panel below the tile */
.su-tile-expandable {
    cursor: pointer;
}

.su-tile-expand-toggle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 4px;
    color: var(--su-on-surface-muted);
    font-size: 0.8rem;
    transition: transform var(--su-anim-fast), color var(--su-anim-fast);
}

.su-tile-expand-toggle:hover {
    color: var(--su-brand);
}

.su-tile-expanded .su-tile-expand-toggle {
    color: var(--su-brand);
    transform: rotate(180deg);
}

/* s4.3: Expand panel — animated via max-height transition (no display:none) */
.su-tile-expand-panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height var(--su-anim-medium) ease, opacity var(--su-anim-medium) ease;
    background: color-mix(in srgb, var(--su-brand) 3%, transparent);
    border-top: 1px solid var(--su-divider);
    border-bottom: 1px solid var(--su-divider);
}

.su-tile-expand-panel.su-expanded {
    max-height: 1000px;
    opacity: 1;
    padding: var(--su-space-sm) var(--su-space-md);
}

/* Allow expand panels to overflow their parent card (AI manage screen, RB manage) */
.ai-manage-section,
.ai-manage-section .su-card-body {
    overflow: visible !important;
}

/* AI section tiles — bolder for section distinction */
.su-list-tile[data-tile-type="section"] {
    background: color-mix(in srgb, var(--su-brand) 4%, transparent);
    border-radius: var(--su-radius-sm);
}

.su-list-tile[data-tile-type="section"] .su-list-tile-title {
    font-weight: 700;
}

/* AI section items (children) — lighter */
.su-list-tile[data-tile-type="item"] .su-list-tile-title {
    font-size: 0.9rem;
    color: var(--su-on-surface-muted);
}

/* Inline edit form inside expand panel */
.rb-edit-form .form-label.small {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #666;
}

.rb-edit-form .form-check-label.small {
    font-size: 0.8rem;
}

.rb-edit-actions {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 10px;
}

/* s4.1: Leading icon — 40px brand-tinted square */
.su-tile-leading-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--su-radius-sm);
    background: color-mix(in srgb, var(--su-brand) 8%, transparent);
    color: var(--su-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* s4.1: Leading avatar — 40px rounded image */
.su-tile-leading-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* s4.2: Leading initials — circular profile badge with initials */
.su-tile-initials {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #fff;
    flex-shrink: 0;
    text-transform: uppercase;
    user-select: none;
}

/* Brand variant — uses the site brand color */
.su-tile-initials-brand {
    background: var(--su-brand);
    color: var(--su-on-brand, #fff);
}

/* Auto-variant — 8 deterministic color options */
.su-tile-initials-v1 {
    background: #4F46E5;
    color: #fff;
}

.su-tile-initials-v2 {
    background: #059669;
    color: #fff;
}

.su-tile-initials-v3 {
    background: #DC2626;
    color: #fff;
}

.su-tile-initials-v4 {
    background: #D97706;
    color: #fff;
}

.su-tile-initials-v5 {
    background: #7C3AED;
    color: #fff;
}

.su-tile-initials-v6 {
    background: #0891B2;
    color: #fff;
}

.su-tile-initials-v7 {
    background: #DB2777;
    color: #fff;
}

.su-tile-initials-v8 {
    background: #2563EB;
    color: #fff;
}

/* Dark theme adjustments */
[data-su-theme-dark="true"] .su-tile-initials-brand {
    background: color-mix(in srgb, var(--su-brand) 70%, #000 30%);
}

/* Compact density — smaller initials circle */
.su-list-tile.su-density-compact .su-tile-initials {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

.su-list-tile-title {
    font-size: var(--su-text-body-lg);
    font-weight: 500;
    color: var(--su-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.su-list-tile-subtitle {
    font-size: var(--su-text-body-sm);
    color: var(--su-on-surface-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* s4.1: Trailing actions container — wraps multiple icon buttons */
.su-tile-actions {
    display: flex;
    align-items: center;
    gap: var(--su-space-xs);
    flex-shrink: 0;
}

/* s4.1: Density — compact mode */
.su-list-tile.su-density-compact {
    padding: var(--su-space-xs) var(--su-space-sm);
}

.su-list-tile.su-density-compact .su-tile-leading-icon,
.su-list-tile.su-density-compact .su-tile-leading-avatar {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.su-list-tile.su-density-compact .su-list-tile-title {
    font-size: var(--su-text-body-md);
}

/* Responsive */
@media (max-width: 768px) {
    .su-list-tile {
        gap: var(--su-space-sm);
        padding: var(--su-space-sm);
    }

    .su-tile-actions {
        gap: 2px;
    }

    .su-tile-leading-icon,
    .su-tile-leading-avatar,
    .su-tile-initials {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .su-tile-initials {
        font-size: 12px;
    }

    .su-list-tile-title {
        font-size: var(--su-text-body-md);
    }

    .su-list-tile-subtitle {
        display: none;
    }
}

@media (max-width: 480px) {
    .su-tile-actions .su-icon-button-sm {
        width: 32px;
        height: 32px;
    }
}

/* Dark mode */
[data-su-theme-dark="true"] .su-list-tile:hover {
    background-color: color-mix(in srgb, var(--su-brand) 8%, var(--su-grey-100));
}

[data-su-theme-dark="true"] .su-tile-leading-icon {
    background: color-mix(in srgb, var(--su-brand) 15%, transparent);
    color: var(--su-brand-light);
}

[data-su-theme-dark="true"] .su-tile-expand-panel {
    background: color-mix(in srgb, var(--su-brand) 5%, transparent);
}

/* ----------------------------------------------------------------------------
 * 11. Bullet point
 * -------------------------------------------------------------------------- */
.su-bullet {
    display: flex;
    align-items: flex-start;
    gap: var(--su-space-sm);
    font-size: var(--su-text-body-md);
    line-height: var(--su-leading-normal);
}

.su-bullet-dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-top: 0.55em;
    border-radius: 50%;
    background-color: currentColor;
}

/* ----------------------------------------------------------------------------
 * 12. Empty state
 * -------------------------------------------------------------------------- */
.su-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--su-space-xxl) var(--su-space-lg);
    text-align: center;
    color: var(--su-on-surface-muted);
}

.su-empty-state-icon {
    font-size: 48px;
    color: var(--su-grey-400);
    margin-bottom: var(--su-space-md);
}

.su-empty-state-title {
    font-size: var(--su-text-title-lg);
    font-weight: 600;
    color: var(--su-on-surface);
    margin-bottom: var(--su-space-xs);
}

.su-empty-state-message {
    font-size: var(--su-text-body-md);
    max-width: 420px;
    margin-bottom: var(--su-space-lg);
}

.su-empty-state-action {
    margin-top: var(--su-space-sm);
}

/* ----------------------------------------------------------------------------
 * 12a. Detail page layout — vertical spacing between stacked section cards
 * -------------------------------------------------------------------------- */
.su-detail-grid {
    margin-top: var(--su-space-md);
}

.su-detail-col>.card,
.su-detail-col>.su-card,
.su-detail-col>div>.card,
.su-detail-col>div>.su-card {
    margin-bottom: var(--su-space-md);
}

/* Also add spacing for RB widget and additional info containers */
.su-detail-col>div:not(.card):not(.su-card) {
    margin-bottom: var(--su-space-md);
}

.su-detail-col>div:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------------------------------
 *      Placed at top of module content, adjacent to admin app bar.
 *      Sticky positioning with proper spacing from page body.
 * -------------------------------------------------------------------------- */
.su-module-menu-bar {
    background: var(--su-card);
    border-bottom: 1px solid var(--su-card-border);
    position: sticky;
    top: 0;
    z-index: 1020;
    box-shadow: var(--su-shadow-sm);
    margin-bottom: var(--su-space-md);
    /* spacing between menu bar and page body */
}

.su-module-menu-inner {
    display: flex;
    align-items: center;
    padding: 0 var(--su-space-md);
    height: 52px;
    /* slightly taller for better touch targets */
    gap: var(--su-space-sm);
    max-width: 100%;
    overflow: hidden;
}

/* Module title — same font size as tabs, bold, unified text color */
.su-module-menu-title {
    display: flex;
    align-items: center;
    gap: var(--su-space-sm);
    font-weight: 700;
    font-size: var(--su-text-body-md);
    /* 14px — same as tabs, not smaller */
    color: var(--su-on-surface);
    white-space: nowrap;
    padding-right: var(--su-space-md);
    margin-right: var(--su-space-sm);
    border-right: 1px solid var(--su-divider);
    flex-shrink: 0;
}

.su-module-menu-title-icon {
    font-size: 16px;
}

/* Desktop tabs container */
.su-module-menu-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    overflow: hidden;
}

/* Individual tab — pill-shaped chip */
.su-module-menu-tab {
    display: flex;
    align-items: center;
    gap: var(--su-space-sm);
    padding: var(--su-space-xs) var(--su-space-md);
    border-radius: var(--su-radius-sm);
    text-decoration: none;
    white-space: nowrap;
    font-size: var(--su-text-body-md);
    /* 14px — matches title font size */
    font-weight: 500;
    color: var(--su-on-surface);
    transition: background-color var(--su-anim-fast), color var(--su-anim-fast);
    flex-shrink: 0;
}

.su-module-menu-tab:hover {
    background-color: color-mix(in srgb, var(--su-brand) 8%, transparent);
    color: var(--su-brand-dark);
    text-decoration: none;
}

/* Active tab — brand-color fill */
.su-module-menu-tab-active,
.su-module-menu-tab-active:hover {
    background-color: var(--su-brand);
    color: var(--su-on-brand);
    font-weight: 600;
}

/* Dropdown parent tab */
.su-module-menu-dropdown {
    position: relative;
}

.su-module-menu-caret {
    font-size: 10px;
    opacity: 0.7;
}

/* Dropdown menu — styled with tokens */
.su-module-menu-dropdown-menu {
    min-width: 220px;
    border-radius: var(--su-radius-md);
    border: 1px solid var(--su-card-border);
    box-shadow: var(--su-shadow-md);
    padding: var(--su-space-xs);
    margin-top: var(--su-space-xs);
}

.su-module-menu-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--su-space-sm);
    padding: var(--su-space-xs) var(--su-space-sm);
    border-radius: var(--su-radius-sm);
    font-size: var(--su-text-body-sm);
    color: var(--su-on-surface);
    transition: background-color var(--su-anim-fast);
}

.su-module-menu-dropdown-item:hover,
.su-module-menu-dropdown-item.active {
    background-color: color-mix(in srgb, var(--su-brand) 8%, transparent);
    color: var(--su-brand-dark);
}

.su-module-menu-dropdown-item-active {
    background-color: var(--su-brand);
    color: var(--su-on-brand);
    font-weight: 600;
}

.su-module-menu-dropdown-icon {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* Mobile hamburger — hidden on desktop, shown on mobile */
.su-module-menu-mobile {
    display: none;
    margin-left: auto;
}

.su-module-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--su-grey-300);
    border-radius: var(--su-radius-sm);
    background: transparent;
    color: var(--su-on-surface);
    cursor: pointer;
    transition: background-color var(--su-anim-fast);
}

.su-module-menu-toggle:hover {
    background-color: color-mix(in srgb, var(--su-brand) 8%, transparent);
}

/* Mobile popup — full-width dropdown */
.su-module-menu-popup {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--su-card);
    border-top: 1px solid var(--su-card-border);
    box-shadow: var(--su-shadow-md);
    z-index: 1030;
    max-height: 70vh;
    overflow-y: auto;
}

.su-module-menu-mobile-item {
    display: flex;
    align-items: center;
    gap: var(--su-space-sm);
    padding: var(--su-space-sm) var(--su-space-md);
    text-decoration: none;
    border-bottom: 1px solid var(--su-divider);
    color: var(--su-on-surface);
    font-size: var(--su-text-body-md);
    transition: background-color var(--su-anim-fast);
}

.su-module-menu-mobile-item:hover {
    background-color: color-mix(in srgb, var(--su-brand) 5%, transparent);
    text-decoration: none;
}

/* Mobile group (parent with children) */
.su-module-menu-mobile-group {
    border-bottom: 1px solid var(--su-divider);
}

.su-module-menu-mobile-group-title {
    display: flex;
    align-items: center;
    gap: var(--su-space-sm);
    padding: var(--su-space-sm) var(--su-space-md);
    font-weight: 600;
    color: var(--su-on-surface);
    font-size: var(--su-text-body-md);
}

.su-module-menu-mobile-group .su-module-menu-mobile-item {
    padding-left: var(--su-space-xl);
}

/* Responsive — show hamburger on mobile, hide desktop tabs */
@media (max-width: 767.98px) {
    .su-module-menu-tabs {
        display: none;
    }

    .su-module-menu-mobile {
        display: block;
    }

    .su-module-menu-title {
        border-right: none;
        padding-right: 0;
        margin-right: 0;
    }
}

/* Dark mode */
[data-su-theme-dark="true"] .su-module-menu-bar {
    background: var(--su-surface);
    border-bottom-color: var(--su-card-border);
}

[data-su-theme-dark="true"] .su-module-menu-title {
    color: var(--su-on-surface);
}

[data-su-theme-dark="true"] .su-module-menu-tab {
    color: var(--su-on-surface);
}

[data-su-theme-dark="true"] .su-module-menu-tab:hover {
    background-color: color-mix(in srgb, var(--su-brand) 15%, transparent);
    color: var(--su-brand-light);
}

[data-su-theme-dark="true"] .su-module-menu-tab-active {
    background-color: var(--su-brand);
    color: var(--su-on-brand);
}

[data-su-theme-dark="true"] .su-module-menu-dropdown-menu {
    background: var(--su-card);
    border-color: var(--su-card-border);
}

[data-su-theme-dark="true"] .su-module-menu-dropdown-item {
    color: var(--su-on-surface);
}

[data-su-theme-dark="true"] .su-module-menu-dropdown-item:hover {
    background-color: color-mix(in srgb, var(--su-brand) 15%, transparent);
}

[data-su-theme-dark="true"] .su-module-menu-toggle {
    border-color: var(--su-grey-600);
    color: var(--su-on-surface);
}

[data-su-theme-dark="true"] .su-module-menu-popup {
    background: var(--su-card);
    border-top-color: var(--su-card-border);
}

[data-su-theme-dark="true"] .su-module-menu-mobile-item {
    color: var(--su-on-surface);
    border-bottom-color: var(--su-divider);
}

/* ----------------------------------------------------------------------------
 * 13. Page header (s3.8) — token-based, responsive, gradient, dark mode
 * -------------------------------------------------------------------------- */
.su-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--su-space-md);
    margin-bottom: var(--su-space-lg);
    padding: var(--su-space-md) var(--su-space-lg);
    border-radius: var(--su-radius-md);
    background: var(--su-surface);
    border: 1px solid var(--su-card-border);
}

.su-page-header-gradient {
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--su-brand) 6%, var(--su-surface)) 0%,
            var(--su-surface) 60%);
}

.su-page-header-main {
    flex: 1 1 auto;
    min-width: 0;
}

.su-page-header-breadcrumb {
    font-size: var(--su-text-body-sm);
    color: var(--su-on-surface-muted);
    margin-bottom: var(--su-space-xs);
    display: flex;
    align-items: center;
    gap: var(--su-space-xs);
}

.su-page-header-crumb {
    color: var(--su-on-surface-muted);
    text-decoration: none;
    transition: color var(--su-anim-fast);
}

.su-page-header-crumb:hover {
    color: var(--su-link);
}

.su-page-header-sep {
    color: var(--su-grey-400);
    font-size: 0.75em;
}

.su-page-header-crumb-current {
    color: var(--su-on-surface);
    font-weight: 500;
}

.su-page-header-context {
    display: flex;
    align-items: center;
    gap: var(--su-space-xs);
    margin-bottom: var(--su-space-xs);
    flex-wrap: wrap;
}

.su-page-header-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--su-space-sm);
    border-radius: var(--su-radius-sm);
    background: color-mix(in srgb, var(--su-brand) 8%, transparent);
    color: var(--su-brand-dark);
    font-size: var(--su-text-body-sm);
    text-decoration: none;
    transition: background-color var(--su-anim-fast);
}

.su-page-header-chip:hover {
    background: color-mix(in srgb, var(--su-brand) 15%, transparent);
}

.su-page-header-chip-sep {
    color: var(--su-grey-400);
    font-size: 0.7em;
}

.su-page-header-title-row {
    display: flex;
    align-items: center;
    gap: var(--su-space-sm);
    flex-wrap: wrap;
}

.su-page-header-icon {
    font-size: var(--su-text-headline-md);
    color: var(--su-brand);
    flex-shrink: 0;
}

.su-page-header-title {
    font-size: var(--su-text-headline-md);
    font-weight: 600;
    margin: 0;
    color: var(--su-on-surface);
}

.su-page-header-subtitle {
    font-size: var(--su-text-body-md);
    color: var(--su-on-surface-muted);
    margin-top: var(--su-space-xs);
}

.su-page-header-actions {
    display: flex;
    gap: var(--su-space-sm);
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
}

.su-page-header-back {
    display: inline-flex;
    align-items: center;
    gap: var(--su-space-xs);
    color: var(--su-on-surface-muted);
    text-decoration: none;
    font-size: var(--su-text-body-sm);
    margin-bottom: var(--su-space-xs);
    transition: color var(--su-anim-fast);
}

.su-page-header-back:hover {
    color: var(--su-link);
}

/* Responsive */
@media (max-width: 768px) {
    .su-page-header {
        flex-direction: column;
        padding: var(--su-space-md);
    }

    .su-page-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .su-page-header-icon {
        font-size: var(--su-text-headline-sm);
    }

    .su-page-header-title {
        font-size: var(--su-text-headline-sm);
    }
}

/* Dark mode */
[data-su-theme-dark="true"] .su-page-header {
    background: var(--su-surface);
    border-color: var(--su-card-border);
}

[data-su-theme-dark="true"] .su-page-header-gradient {
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--su-brand) 12%, var(--su-surface)) 0%,
            var(--su-surface) 60%);
}

[data-su-theme-dark="true"] .su-page-header-chip {
    color: var(--su-brand-light);
}

/* ----------------------------------------------------------------------------
 * 14. Alert — extends Bootstrap .alert with Sapient tokens
 * -------------------------------------------------------------------------- */
.su-alert {
    border-radius: var(--su-radius-md);
    padding: var(--su-space-md);
}

/* FLU FIX #3: Alert uses same tint tokens as badges for consistency */
.su-alert-success {
    background-color: var(--su-badge-success-bg);
    border: 1px solid var(--su-badge-success-border);
    color: var(--su-badge-success-fg);
}

.su-alert-warning {
    background-color: var(--su-badge-warning-bg);
    border: 1px solid var(--su-badge-warning-border);
    color: var(--su-badge-warning-fg);
}

.su-alert-error {
    background-color: var(--su-badge-danger-bg);
    border: 1px solid var(--su-badge-danger-border);
    color: var(--su-badge-danger-fg);
}

.su-alert-info {
    background-color: var(--su-badge-info-bg);
    border: 1px solid var(--su-badge-info-border);
    color: var(--su-badge-info-fg);
}

.su-alert-title {
    font-weight: 600;
    margin-bottom: var(--su-space-xs);
}

.su-alert-dismissible {
    position: relative;
    padding-right: var(--su-space-xxl);
}

/* Dashboard2 — Container & spacing
 * ========================================================================== */

.su-dashboard2-container {
    padding-top: var(--su-space-xl, 2rem);
    padding-bottom: var(--su-space-xl, 2rem);
}

/* Stretched variant — less vertical padding, full horizontal */
.container-fluid.su-dashboard2-container {
    padding-left: 0;
    padding-right: 0;
}

/* Structural zones (Header/Footer) — always full-width, outside grid */
.su-zone-debug-header,
.su-zone-debug-footer {
    width: 100%;
    margin-bottom: var(--su-space-md);
}

/* ============================================================================
 * Dashboard2 — Editor Zone Debug Frames
 *
 * Visible only when isEditor=true. Each zone gets a styled frame with:
 * - Left accent bar colored by SAPIRO realm
 * - Zone name + icon + widget count badge + render mode badge
 * - Hover tooltip with full widget list + zone description
 * - Collapsible body (click header to toggle)
 * ========================================================================== */

.su-zone-debug {
    position: relative;
    margin-bottom: var(--su-space-md);
    border: 1px solid var(--su-color-border, #dee2e6);
    border-left: 4px solid #adb5bd;
    border-radius: 0 var(--su-radius-md, 6px) var(--su-radius-md, 6px) 0;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s ease;
}

.su-zone-debug:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* SAPIRO realm left-accent colors */
.su-zone-debug-header {
    border-left-color: #6c757d;
}

.su-zone-debug-strategic {
    border-left-color: #0d6efd;
}

.su-zone-debug-analytical {
    border-left-color: #198754;
}

.su-zone-debug-philosophical {
    border-left-color: #6f42c1;
}

.su-zone-debug-informative {
    border-left-color: #fd7e12;
}

.su-zone-debug-responsible {
    border-left-color: #dc3545;
}

.su-zone-debug-operational {
    border-left-color: #20c997;
}

.su-zone-debug-footer {
    border-left-color: #adb5bd;
}

/* Header bar — clickable collapse toggle */
.su-zone-debug-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    line-height: 1.5;
    transition: background 0.1s ease;
}

.su-zone-debug-bar:hover {
    background: #e9ecef;
}

/* Left accent square — realm color */
.su-zone-debug-accent {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
    background: currentColor;
    opacity: 0.7;
}

/* Realm border-color flows to accent via cascade on parent */

/* Realm badge — compact colored pill with icon + initial */
.su-zone-debug-realm {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    flex-shrink: 0;
}

.su-zone-debug-realm-icon {
    font-size: 11px;
    line-height: 1;
}

.su-zone-debug-realm-initial {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

/* Realm badge colors */
.su-zone-debug-header .su-zone-debug-realm {
    background: #6c757d;
}

.su-zone-debug-strategic .su-zone-debug-realm {
    background: #0d6efd;
}

.su-zone-debug-analytical .su-zone-debug-realm {
    background: #198754;
}

.su-zone-debug-philosophical .su-zone-debug-realm {
    background: #6f42c1;
}

.su-zone-debug-informative .su-zone-debug-realm {
    background: #fd7e12;
}

.su-zone-debug-responsible .su-zone-debug-realm {
    background: #dc3545;
}

.su-zone-debug-operational .su-zone-debug-realm {
    background: #20c997;
}

.su-zone-debug-footer .su-zone-debug-realm {
    background: #adb5bd;
}

/* Zone label — small muted text */
.su-zone-debug-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #495057;
    flex-shrink: 0;
}

/* Flexible spacer between label and widget list */
.su-zone-debug-spacer {
    flex: 1;
    min-width: 12px;
}

/* Widget name list — truncates with ellipsis */
.su-zone-debug-widgets {
    flex: 1;
    color: #6c757d;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Badge pills — count + mode */
.su-zone-debug-pills {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.su-zone-debug-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
}

.su-zone-debug-count {
    background: #e9ecef;
    color: #495057;
}

.su-zone-debug-mode {
    background: #cfe2ff;
    color: #084298;
}

/* Chevron */
.su-zone-debug-chevron {
    font-size: 10px;
    color: #adb5bd;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.su-zone-debug-bar.collapsed .su-zone-debug-chevron {
    transform: rotate(-90deg);
}

/* Body — widget content */
.su-zone-debug-body {
    /* No extra padding — widgets own their spacing */
}

/* ----------------------------------------------------------------------------
 * 14b. Collapsible section frame (SapientCollapsible organism)
 *      Zone-debug-frame pattern generalized for stacked admin widgets.
 * -------------------------------------------------------------------------- */
.su-collapsible {
    border: 1px solid var(--su-outline, #dee2e6);
    border-radius: var(--su-radius-md, 8px);
    background: var(--su-surface, #fff);
    margin-bottom: var(--su-space-md, 12px);
    overflow: hidden;
}

.su-collapsible-header {
    display: flex;
    align-items: center;
    gap: var(--su-space-sm, 8px);
    padding: var(--su-space-sm, 8px) var(--su-space-md, 12px);
    cursor: pointer;
    user-select: none;
    background: var(--su-surface-muted, #f8f9fa);
    border-bottom: 1px solid var(--su-outline, #dee2e6);
}

.su-collapsible-header:hover {
    background: var(--su-surface-muted-hover, #f1f3f5);
}

.su-collapsible-icon {
    flex-shrink: 0;
    color: var(--su-primary, #4361ee);
}

.su-collapsible-title {
    font-weight: 600;
    font-size: var(--su-text-body-md, 0.9rem);
    color: var(--su-on-surface, #212529);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.su-collapsible-subtitle {
    font-size: var(--su-text-body-sm, 0.8rem);
    color: var(--su-on-surface-muted, #6c757d);
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.su-collapsible-spacer {
    flex-grow: 1;
}

.su-collapsible-header .su-badge {
    flex-shrink: 0;
    font-size: var(--su-text-label-sm, 0.7rem);
    padding: 2px 8px;
}

.su-collapsible-chevron {
    font-size: 11px;
    color: #adb5bd;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.su-collapsible-header[aria-expanded="false"] .su-collapsible-chevron {
    transform: rotate(-90deg);
}

.su-collapsible-body {
    padding: var(--su-space-md, 12px);
}

/* ----------------------------------------------------------------------------
 * 14c. Stat Strip (SapientStatStrip organism)
 *      Compact "label: value" chips — replaces spacious LiveCard grids
 *      for inline metric groups (per-slot stats, provider metrics).
 * -------------------------------------------------------------------------- */
.su-stat-strip-chip .su-stat-strip-label {
    font-weight: 500;
    opacity: 0.85;
}

.su-stat-strip-chip .su-stat-strip-value {
    font-weight: 700;
    font-size: 1.02em;
}

/* ----------------------------------------------------------------------------
 * 14d. Collapsible Card (SapientCard ->collapsible())
 *      Header becomes the BS5 collapse toggle; chevron in trailing.
 * -------------------------------------------------------------------------- */
.su-card-collapsible .su-card-header {
    cursor: pointer;
    user-select: none;
}

.su-card-collapsible .su-card-header:hover {
    background: var(--su-surface-muted, #f8f9fa);
}

.su-card-chevron {
    font-size: 11px;
    color: #adb5bd;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.su-card-collapsible .su-card-header[aria-expanded="false"] .su-card-chevron {
    transform: rotate(-90deg);
}

/* Custom tooltip styling via title attribute — native browser tooltip
   gets the multi-line text set in the title attribute */

/* Empty layout columns — keep them visible even with no content */
.su-layout-col-empty {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.su-layout-col-empty::after {
    content: '';
    display: block;
}

.su-alert-close {
    position: absolute;
    top: var(--su-space-sm);
    right: var(--su-space-sm);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: inherit;
    opacity: 0.7;
}

.su-alert-close:hover {
    opacity: 1;
}

/* ----------------------------------------------------------------------------
 * 15. Form fields — extends Bootstrap .form-control
 * -------------------------------------------------------------------------- */
.su-field-label {
    font-size: var(--su-text-body-md);
    font-weight: 500;
    margin-bottom: var(--su-space-xs);
}

.su-field-required {
    color: var(--su-error);
    margin-left: var(--su-space-xxs);
}

.su-field-help {
    font-size: var(--su-text-body-sm);
    color: var(--su-on-surface-muted);
    margin-top: var(--su-space-xs);
}

.su-field-error-msg {
    font-size: var(--su-text-body-sm);
    color: var(--su-error);
    margin-top: var(--su-space-xs);
}

/* ----------------------------------------------------------------------------
 * 16. Button group
 * -------------------------------------------------------------------------- */
.su-button-group {
    display: inline-flex;
    gap: var(--su-space-sm);
    flex-wrap: wrap;
}

.su-button-group-end {
    justify-content: flex-end;
}

.su-button-group-center {
    justify-content: center;
}

.su-button-group-between {
    justify-content: space-between;
}

/* ----------------------------------------------------------------------------
 * 18. ListView organism
 *    Container: .su-list-view  (rows = .su-list-row)
 *    Density:   .su-list-density-comfortable | .su-list-density-compact
 *    Separators: .su-list-divider (+ .su-list-divider-indented)
 *    States:    .su-list-row[data-su-selected="true"], [data-su-item-id]
 *    AJAX:     .su-list-sentinel, .su-list-spinner
 *    Behaviors wired by assets/sapient-list.js: tap, long-press, load-more
 * -------------------------------------------------------------------------- */
.su-list-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--su-surface);
    border-radius: var(--su-radius-md);
    overflow: hidden;
}

.su-list-view+.su-list-view {
    margin-top: var(--su-space-md);
}

.su-list-row {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: default;
    transition: background-color var(--su-anim-fast);
}

.su-list-density-comfortable .su-list-row {
    padding: var(--su-space-sm) var(--su-space-md);
}

.su-list-density-compact .su-list-row {
    padding: 4px var(--su-space-sm);
}

/* Interactive rows (have an item id + a tap/longpress handler) */
.su-list-row[data-su-item-id] {
    cursor: pointer;
}

.su-list-row[data-su-item-id]:hover {
    background-color: var(--su-grey-100);
}

.su-list-row[data-su-item-id]:focus-visible {
    outline: 2px solid var(--su-primary);
    outline-offset: -2px;
}

.su-list-row[data-su-selected="true"] {
    background-color: color-mix(in srgb, var(--su-primary) 12%, transparent);
}

.su-list-row[data-su-selected="true"]:hover {
    background-color: color-mix(in srgb, var(--su-primary) 18%, transparent);
}

/* Keyboard focus + long-press flash feedback */
.su-list-row.is-su-pressing {
    background-color: color-mix(in srgb, var(--su-primary) 22%, transparent);
}

/* Separators */
.su-list-divider {
    border: 0;
    margin: 0;
    height: 1px;
    background-color: var(--su-grey-200);
}

.su-list-divider-indented {
    margin-left: var(--su-space-md);
    margin-right: var(--su-space-md);
}

/* Empty container */
.su-list-view.su-list-empty {
    padding: 0;
}

/* Infinite-scroll sentinel */
.su-list-sentinel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--su-space-md);
    color: var(--su-on-surface-muted);
    min-height: 48px;
}

.su-list-sentinel.su-is-loading .su-list-spinner {
    display: inline-block;
}

.su-list-sentinel:not(.su-is-loading) .su-list-spinner {
    display: none;
}

.su-list-sentinel.su-is-end::after {
    content: "— end of list —";
    font-size: var(--su-text-body-sm);
}

.su-list-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--su-grey-300);
    border-top-color: var(--su-primary);
    border-radius: 50%;
    animation: su-spin 0.6s linear infinite;
}

/* ----------------------------------------------------------------------------
 * 17. Reduced motion (s1.6) — disable all animations
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .su-animate-fade-in,
    .su-animate-slide-up,
    .su-animate-slide-in-right,
    .su-animate-scale-in,
    .su-animate-pulse,
    .su-animate-breathe,
    .su-animate-stagger>*,
    .su-skeleton,
    .su-hover-lift,
    .su-press,
    .su-animate-expand,
    .su-button-spinner {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    .su-card,
    .su-list-tile,
    .su-button {
        transition: none !important;
    }
}

/* ============================================================================
 * 18. Frontend Content Components — su-* class system
 *
 * Foundation for Sapient Creative Design Library (Phase 2: Canvas replacement).
 * PHP components emit ONLY su-* classes and data-su-* attributes.
 * CSS bridges su-* to Canvas behavior during coexistence period.
 * Tier 1 JS: self-contained sapient-*.js (vanilla, no jQuery).
 * Tier 2 JS: bridge files map data-su-* to Canvas auto-init.
 * Tier 3: pure CSS, no JS dependency.
 *
 * Component groups:
 *   A. Structural: SectionHeading, BreadcrumbTrail, ShapeDivider, StickyNav, FilterBar
 *   B. Content Display: ContentBody, Accordion, KeyValueList, Timeline, MetaList, ContentCard
 *   C. Media & People: Gallery, MediaCarousel, OverlayImage, AuthorCard
 * ========================================================================== */

/* === Frontend base variables === */
:root {
    --su-fe-gutter: 1rem;
    --su-fe-border-color: var(--su-divider, #e9ecef);
    --su-fe-surface: var(--su-surface, #ffffff);
    --su-fe-surface-alt: var(--su-surface-low, #f8f9fa);
    --su-fe-text: var(--su-on-surface, #212529);
    --su-fe-text-muted: var(--su-on-surface-muted, #6c757d);
    --su-fe-radius: var(--su-radius-md, 0.5rem);
    --su-fe-transition: var(--su-anim-fast, 0.15s ease);
}

/* === A1. Section Heading === */
.su-section-heading {
    margin-bottom: 2rem;
}

.su-section-heading-center {
    text-align: center;
}

.su-section-heading-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--su-brand, #0066cc);
    margin: 0 0 0.5rem;
}

.su-section-heading-title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--su-fe-text);
    margin: 0 0 0.5rem;
}

.su-section-heading-subtitle {
    font-size: 1.05rem;
    color: var(--su-fe-text-muted);
    margin: 0;
    max-width: 45rem;
}

.su-section-heading-center .su-section-heading-subtitle {
    margin-inline: auto;
}

/* Hero variant — large H1-style title for full-width Dashboard2 header zone */
.su-hero-heading {
    padding: 2rem 0 2.5rem;
}

.su-hero-heading .su-section-heading-eyebrow {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.su-hero-heading .su-section-heading-title {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.75rem;
}

.su-hero-heading .su-section-heading-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    max-width: 50rem;
    line-height: 1.5;
}

/* === A2. Breadcrumb Trail === */
.su-breadcrumb {
    margin-bottom: 1rem;
}

.su-breadcrumb .breadcrumb {
    margin: 0;
    font-size: 0.875rem;
}

.su-breadcrumb .breadcrumb-item a {
    color: var(--su-fe-text-muted);
    text-decoration: none;
    transition: color var(--su-fe-transition);
}

.su-breadcrumb .breadcrumb-item a:hover {
    color: var(--su-brand, #0066cc);
}

.su-breadcrumb .breadcrumb-item.active {
    color: var(--su-fe-text);
    font-weight: 500;
}

/* === A3. Shape Divider === */
.su-shape-divider {
    position: relative;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    line-height: 0;
    color: var(--su-fe-surface-alt);
    pointer-events: none;
}

.su-shape-divider-top {
    align-items: flex-end;
}

.su-shape-divider-bottom {
    align-items: flex-start;
}

.su-shape-divider svg {
    width: 100%;
    height: auto;
    display: block;
}

.su-shape-divider-top svg {
    transform: scaleY(-1);
}

/* === A4. Sticky Nav === */
.su-sticky-nav {
    position: sticky;
    top: 5rem;
    padding: 1rem 0;
}

.su-sticky-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.su-sticky-nav-item {
    margin: 0;
}

.su-sticky-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--su-fe-radius);
    font-size: 0.875rem;
    color: var(--su-fe-text-muted);
    text-decoration: none;
    transition: background var(--su-fe-transition), color var(--su-fe-transition);
}

.su-sticky-nav-link:hover {
    background: var(--su-fe-surface-alt);
    color: var(--su-fe-text);
}

.su-sticky-nav-link.su-active {
    background: color-mix(in srgb, var(--su-brand, #0066cc) 10%, transparent);
    color: var(--su-brand, #0066cc);
    font-weight: 500;
}

.su-sticky-nav-link i {
    font-size: 1rem;
    flex-shrink: 0;
}

/* === A5. Filter Bar === */
.su-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.su-filter-bar-filters {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.su-filter-bar-filter {
    margin: 0;
}

.su-filter-bar-filter a {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    border-radius: var(--su-fe-radius);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--su-fe-text-muted);
    text-decoration: none;
    border: 1px solid transparent;
    transition: all var(--su-fe-transition);
}

.su-filter-bar-filter a:hover {
    color: var(--su-fe-text);
    background: var(--su-fe-surface-alt);
}

.su-filter-bar-filter.su-active a {
    color: var(--su-brand, #0066cc);
    background: color-mix(in srgb, var(--su-brand, #0066cc) 10%, transparent);
}

.su-filter-bar-sort {
    margin-inline-start: auto;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--su-fe-border-color);
    border-radius: var(--su-fe-radius);
    font-size: 0.8125rem;
    color: var(--su-fe-text);
    background: var(--su-fe-surface);
}

/* === A6. Public Search Panel === */
/* Chromeless frontend search panel (SapientPublicSearchPanel).
 * No card border, no shadow — Canvas editorial aesthetic.
 * Distinct from A5 Filter Bar (Isotope grid filter, client-side JS). */
.su-public-search {
    background: color-mix(in srgb, var(--su-brand, #2196F3) 3%, var(--su-fe-surface, #fff));
    padding: 1rem 1.25rem;
    border-radius: var(--su-fe-radius, 0.5rem);
    margin-bottom: 1.5rem;
}

.su-public-search-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Row 1: Search bar — full width */
.su-public-search-search {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.su-public-search-input {
    flex: 1 1 auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--su-fe-border-color);
    border-radius: var(--su-fe-radius);
    font-size: 0.9rem;
    color: var(--su-fe-text);
    background: var(--su-fe-surface);
    transition: border-color var(--su-fe-transition);
}

.su-public-search-input:focus {
    outline: none;
    border-color: var(--su-brand, #2196F3);
}

.su-public-search-submit {
    padding: 0.5rem 1.25rem;
    background: var(--su-brand, #2196F3);
    color: var(--su-on-brand, #fff);
    border: none;
    border-radius: var(--su-fe-radius);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--su-fe-transition);
    white-space: nowrap;
}

.su-public-search-submit:hover {
    background: var(--su-brand-dark, #1976D2);
}

/* Row 2: Filters + checkboxes — full width, inline items wrap */
.su-public-search-filters {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.su-public-search-select {
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--su-fe-border-color);
    border-radius: var(--su-fe-radius);
    font-size: 0.85rem;
    color: var(--su-fe-text);
    background: var(--su-fe-surface);
    cursor: pointer;
    transition: border-color var(--su-fe-transition);
}

.su-public-search-select:focus {
    outline: none;
    border-color: var(--su-brand, #2196F3);
}

.su-public-search-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.85rem;
    color: var(--su-fe-text-muted);
    cursor: pointer;
    user-select: none;
}

.su-public-search-checkbox input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--su-brand, #2196F3);
}

/* Row 3: View modes + display toggles grouped, responsive */
.su-public-search-options {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.su-public-search-view-modes {
    display: flex;
    gap: 0.25rem;
}

.su-public-search-view-mode {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--su-fe-text-muted);
    text-decoration: none;
    border: 1px solid var(--su-fe-border-color);
    border-radius: var(--su-fe-radius);
    transition: all var(--su-fe-transition);
}

.su-public-search-view-mode:hover {
    color: var(--su-brand, #2196F3);
    border-color: var(--su-brand, #2196F3);
}

.su-public-search-view-mode.active {
    background: var(--su-brand, #2196F3);
    color: var(--su-on-brand, #fff);
    border-color: var(--su-brand, #2196F3);
}

.su-public-search-toggles {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    margin-left: auto;
}

/* === B1. Content Body (Prose) === */
.su-prose {
    color: var(--su-fe-text);
    font-size: 1rem;
    line-height: 1.7;
}

.su-prose-compact {
    font-size: 0.9375rem;
    line-height: 1.6;
}

.su-prose>*:first-child {
    margin-top: 0;
}

.su-prose>*:last-child {
    margin-bottom: 0;
}

.su-prose h1,
.su-prose h2,
.su-prose h3,
.su-prose h4,
.su-prose h5,
.su-prose h6 {
    font-weight: 700;
    line-height: 1.25;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    color: var(--su-fe-text);
}

.su-prose h1 {
    font-size: 2rem;
}

.su-prose h2 {
    font-size: 1.625rem;
}

.su-prose h3 {
    font-size: 1.375rem;
}

.su-prose h4 {
    font-size: 1.125rem;
}

.su-prose h5 {
    font-size: 1rem;
}

.su-prose h6 {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.su-prose p {
    margin: 0 0 1rem;
}

.su-prose ul,
.su-prose ol {
    margin: 0 0 1rem;
    padding-inline-start: 1.5rem;
}

.su-prose li {
    margin-bottom: 0.25rem;
}

.su-prose blockquote {
    margin: 1.5rem 0;
    padding: 0.75rem 1.25rem;
    border-inline-start: 4px solid var(--su-brand, #0066cc);
    background: var(--su-fe-surface-alt);
    border-radius: 0 var(--su-fe-radius) var(--su-fe-radius) 0;
    font-style: italic;
    color: var(--su-fe-text-muted);
}

.su-prose blockquote p:last-child {
    margin-bottom: 0;
}

.su-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--su-fe-radius);
    margin: 1rem 0;
}

.su-prose a {
    color: var(--su-link, var(--su-brand, #0066cc));
    text-decoration: underline;
    text-underline-offset: 2px;
}

.su-prose a:hover {
    color: var(--su-link-hover, var(--su-brand-dark, #0052a3));
}

.su-prose pre {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--su-fe-surface-alt);
    border-radius: var(--su-fe-radius);
    overflow-x: auto;
    font-family: var(--su-font-mono, 'Courier New', monospace);
    font-size: 0.875rem;
}

.su-prose code {
    font-family: var(--su-font-mono, 'Courier New', monospace);
    font-size: 0.875em;
    padding: 0.125rem 0.375rem;
    background: var(--su-fe-surface-alt);
    border-radius: 0.25rem;
}

.su-prose pre code {
    padding: 0;
    background: none;
}

.su-prose table {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
}

.su-prose table th,
.su-prose table td {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--su-fe-border-color);
    text-align: start;
}

.su-prose table th {
    background: var(--su-fe-surface-alt);
    font-weight: 600;
}

.su-prose hr {
    border: none;
    border-top: 1px solid var(--su-fe-border-color);
    margin: 2rem 0;
}

/* ============================================================================
   Admin Scaffold — single-scrollbar layout (Option A)
   Admin-only: sapient.css is loaded by AdminShell, not the frontend.
   Shared app bar/sidebar base styles live in sapient-admin-menu.css.
   ========================================================================== */
.su-admin-scaffold {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Neutralize the legacy fixed-sidebar content offsets from
       sapient-admin-menu.css (flex layout handles spacing instead). */
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Admin layout wrapper — overrides Canvas #wrapper overflow:hidden */
.su-admin-wrapper {
    overflow: visible;
}

.su-admin-scaffold .su-admin-appbar {
    flex-shrink: 0;
}

.su-admin-body {
    display: flex;
    align-items: flex-start;
    flex: 1 1 auto;
}

/* Sticky sidebar — no own scrollbar; the page scrolls as one.
   The sidebar keeps its natural height so its bottom items are reached
   by scrolling the page (global right scrollbar). */
.su-admin-scaffold #admin-sidebar {
    position: sticky;
    top: var(--su-admin-appbar-h, 56px);
    height: auto;
    overflow: visible;
    flex-shrink: 0;
    align-self: flex-start;
}

.su-admin-scaffold #admin-mvc-content {
    margin-left: 0;
    width: auto;
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
}

/* Desktop collapse toggle (sapient-admin.js) */
body.su-admin-sidebar-collapsed .su-admin-scaffold #admin-sidebar {
    display: none;
}

.su-admin-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--su-divider, #dee2e6);
    background: var(--su-surface, #f8f9fa);
    color: var(--su-on-surface-muted, #6c757d);
    font-size: 0.8rem;
}

.su-admin-footer-links {
    display: flex;
    gap: 1rem;
}

.su-admin-footer-link {
    color: inherit;
    text-decoration: none;
}

.su-admin-footer-link:hover {
    color: var(--su-link, var(--su-brand, #1a1a2e));
}

/* Mobile: off-canvas sidebar (overrides the sticky scaffold layout) */
@media (max-width: 991.98px) {
    .su-admin-scaffold #admin-sidebar {
        position: fixed;
        top: 0;
        height: 100%;
    }
}

/* ============================================================================
   Icon class safety net
   ----------------------------------------------------------------------------
   Font Awesome and Bootstrap Icons glyphs only render when their BASE class
   (fa / bi) is also present — it carries the font-family rule. All Sapient
   components now normalize via SapientComponent::iconClass(), but RAW <i>
   markup in views and embedded leading/trailing HTML strings bypasses that.
   These fallbacks guarantee the font-family for any bare fa-x or bi-x token,
   so a missing base class can never render as a broken glyph again.
   ========================================================================== */
i[class*="fa-"]:not([class~="fa"]):not([class~="fas"]):not([class~="far"]):not([class~="fab"]):not([class~="fad"]):not([class~="fal"]):not([class~="fa-solid"]):not([class~="fa-regular"]):not([class~="fa-brands"]) {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

i[class*="bi-"]:not([class~="bi"]) {
    font-family: "bootstrap-icons";
}

/* ----------------------------------------------------------------------------
 * Icon color doctrine — ONE explicit criterion, applied everywhere
 * ----------------------------------------------------------------------------
 * Tier 1 — FUNCTIONAL icons (an icon paired with text: buttons, menu bar,
 * tabs, list rows, badges, alerts, app bar, sidebar):
 *   The icon is part of its label — it ALWAYS takes the label's color
 *   (currentColor). Never colored independently. So a primary button's icon
 *   is white (label is white), a secondary button's icon is on-surface
 *   (label is on-surface), an active tab's icon is on-brand. Same rule,
 *   same result everywhere — different surfaces, not different decisions.
 *
 * Tier 2 — DECORATIVE/status icons (standalone, no adjacent label: empty
 * states, KPI/accent tiles): muted gray by default, or a component-owned
 * accent applied consistently within that component.
 * -------------------------------------------------------------------------- */
/* Standalone icons default to muted gray. :where() = zero specificity, so any
   explicit color class (component-owned colors or color utility classes) wins. */
i:where([class*="fa-"], [class*="bi-"], [class*="uil-"]) {
    color: var(--su-icon-fg);
}

/* Tier 1 enforcement — icons inside labeled containers follow the label */
.su-button i,
.su-icon-button i,
.su-badge i,
.su-alert i,
.su-admin-appbar i,
.su-admin-sidebar i,
.su-list-tile i,
.su-tile-leading-icon i,
.su-empty-state-icon i,
.su-timeline-marker i,
.su-key-value-check i,
.su-key-value-cross i,
.su-module-menu-title i,
.su-module-menu-tab i,
.su-module-menu-dropdown-item i,
.su-module-menu-mobile-item i,
.su-module-menu-mobile-group-title i,
.su-module-menu-toggle i {
    color: inherit;
}

/* Admin dashboard wrapper — unified content padding */
.admin-content-dashboard {
    padding: var(--su-space-md);
}

/* === B2. Accordion === */
.su-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.su-accordion-item {
    border: 1px solid var(--su-fe-border-color);
    border-radius: var(--su-fe-radius);
    overflow: hidden;
    background: var(--su-fe-surface);
}

.su-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
    background: var(--su-fe-surface-alt);
    transition: background var(--su-fe-transition);
}

.su-accordion-header:hover {
    background: color-mix(in srgb, var(--su-fe-surface-alt) 70%, var(--su-brand, #0066cc) 5%);
}

.su-accordion-title {
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--su-fe-text);
    flex: 1;
}

.su-accordion-icon {
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--su-fe-text-muted);
    transition: transform var(--su-fe-transition);
}

.su-accordion-icon-open {
    display: none;
}

.su-accordion-item[data-su-open="true"] .su-accordion-icon-closed {
    display: none;
}

.su-accordion-item[data-su-open="true"] .su-accordion-icon-open {
    display: inline-block;
}

.su-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.su-accordion-item[data-su-open="true"] .su-accordion-content {
    max-height: 2000px;
}

.su-accordion-header {
    cursor: pointer;
}

.su-accordion-content-inner {
    padding: 1rem 1.25rem;
    color: var(--su-fe-text);
    line-height: 1.6;
}

/* Accordion variants */
.su-accordion-card .su-accordion-item {
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.su-accordion-minimal .su-accordion-item {
    border: none;
    border-bottom: 1px solid var(--su-fe-border-color);
    border-radius: 0;
}

.su-accordion-minimal .su-accordion-header {
    background: transparent;
}

.su-accordion-pill .su-accordion-header {
    border-radius: var(--su-radius-pill, 9999px);
    margin: 0.25rem 0;
}

/* === FAQ detail — single-column centered stack (2026-10-05) === */
/* Compact centered card in the FAQ detail stack: mx-auto centers it
   horizontally; max-width keeps it from stretching to full container. */
.su-faq-detail-card {
    max-width: 34rem;
}

/* Answer block in accordion panels: readable line length, left-aligned
   text inside the centered column (prose centering is typographically
   wrong — the COLUMN is centered, the text keeps its natural start). */
.su-list-accordion-answer {
    max-width: 46rem;
}

/* === Box cover — full-width main-media ceiling (2026-10-08) === */
/* Covers replace the icon dot when an onboard box (ColumnGrid /
   FeaturedBox) has a main image: 16:9 ratio block, edge-to-edge above
   the box content, crop-filled for consistent card rhythm. */
.su-box-cover {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0.5rem;
}
.su-box-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* === B3. Key-Value List === */
.su-key-value-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.su-key-value-group-title {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--su-fe-text-muted);
    margin: 0 0 0.5rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--su-fe-border-color);
}

.su-key-value-items {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 0.5rem 1rem;
}

.su-key-value-items-2col {
    grid-template-columns: repeat(2, 1fr 1.5fr);
}

.su-key-value-item {
    display: contents;
}

.su-key-value-key {
    font-size: 0.875rem;
    color: var(--su-fe-text-muted);
    font-weight: 500;
}

.su-key-value-value {
    font-size: 0.875rem;
    color: var(--su-fe-text);
    margin: 0;
}

.su-key-value-check {
    color: var(--su-semantic-success, #198754);
}

.su-key-value-check i {
    margin-inline-end: 0.25rem;
}

.su-key-value-cross {
    color: var(--su-semantic-danger, #dc3545);
}

.su-key-value-cross i {
    margin-inline-end: 0.25rem;
}

.su-key-value-blank {
    color: var(--su-fe-text-muted);
}

/* === B4. Timeline === */
.su-timeline {
    position: relative;
    padding-inline-start: 1.75rem;
}

.su-timeline::before {
    content: '';
    position: absolute;
    inset-inline-start: 0.625rem;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 2px;
    background: var(--su-fe-border-color);
}

.su-timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
}

.su-timeline-item:last-child {
    margin-bottom: 0;
}

.su-timeline-marker {
    position: absolute;
    inset-inline-start: -1.75rem;
    top: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--su-fe-surface);
    border: 2px solid var(--su-brand, #0066cc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    color: var(--su-brand, #0066cc);
    z-index: 1;
}

.su-timeline-marker i {
    font-size: 0.625rem;
}

.su-timeline-date {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--su-fe-text-muted);
    margin: 0 0 0.25rem;
}

.su-timeline-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.su-timeline-title a {
    color: var(--su-fe-text);
    text-decoration: none;
}

.su-timeline-title a:hover {
    color: var(--su-brand, #0066cc);
}

.su-timeline-description {
    font-size: 0.875rem;
    color: var(--su-fe-text-muted);
    margin: 0;
}

/* === B5. Meta List === */
.su-meta-list {
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

.su-meta-list-2col {
    grid-template-columns: 1fr 1fr;
}

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

.su-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.su-meta-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--su-fe-text-muted);
}

.su-meta-value {
    font-size: 0.875rem;
    color: var(--su-fe-text);
    font-weight: 500;
}

/* === B6. Content Card === */
.su-content-card {
    background: var(--su-fe-surface);
    border: 1px solid var(--su-fe-border-color);
    border-radius: var(--su-fe-radius);
    overflow: hidden;
    transition: box-shadow var(--su-fe-transition), transform var(--su-fe-transition);
    height: 100%;
}

.su-content-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.su-content-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.su-content-card-image {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--su-fe-surface-alt);
}

.su-content-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.su-content-card:hover .su-content-card-image img {
    transform: scale(1.03);
}

.su-content-card-category {
    position: absolute;
    top: 0.625rem;
    inset-inline-start: 0.625rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--su-radius-pill, 9999px);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: color-mix(in srgb, var(--su-brand, #0066cc) 15%, white);
    color: var(--su-brand, #0066cc);
}

.su-content-card-featured {
    position: absolute;
    top: 0.625rem;
    inset-inline-end: 0.625rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--su-radius-pill, 9999px);
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--su-semantic-warning, #ffc107);
    color: #fff;
}

.su-content-card-body {
    padding: 1rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.su-content-card-title {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0 0 0.375rem;
    color: var(--su-fe-text);
    line-height: 1.3;
}

.su-content-card-summary {
    font-size: 0.875rem;
    color: var(--su-fe-text-muted);
    margin: 0 0 0.75rem;
    flex: 1;
}

.su-content-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
}

.su-content-card-date {
    font-size: 0.75rem;
    color: var(--su-fe-text-muted);
}

.su-content-card-author {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--su-fe-text-muted);
}

.su-content-card-author img {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    object-fit: cover;
}

/* Content card variants */
.su-content-card-horizontal .su-content-card-link {
    flex-direction: row;
}

.su-content-card-horizontal .su-content-card-image {
    width: 12rem;
    flex-shrink: 0;
    aspect-ratio: 1;
}

.su-content-card-overlay .su-content-card-image {
    aspect-ratio: 21/9;
}

.su-content-card-overlay .su-content-card-body {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: #fff;
}

.su-content-card-overlay .su-content-card-title,
.su-content-card-overlay .su-content-card-summary,
.su-content-card-overlay .su-content-card-date {
    color: #fff;
}

.su-content-card-overlay .su-content-card-summary {
    opacity: 0.85;
}

.su-content-card-compact .su-content-card-body {
    padding: 0.625rem 0.875rem;
}

.su-content-card-compact .su-content-card-title {
    font-size: 0.9375rem;
}

/* === C1. Gallery === */
.su-gallery {
    display: grid;
    gap: var(--su-fe-gutter);
}

.su-gallery-masonry {
    display: block;
    column-count: 4;
    column-gap: var(--su-fe-gutter);
}

.su-gallery-masonry .su-gallery-item {
    display: inline-block;
    width: 100%;
    margin-bottom: var(--su-fe-gutter);
    break-inside: avoid;
}

.su-gallery-cols-2 {
    grid-template-columns: repeat(2, 1fr);
    column-count: 2;
}

.su-gallery-cols-3 {
    grid-template-columns: repeat(3, 1fr);
    column-count: 3;
}

.su-gallery-cols-4 {
    grid-template-columns: repeat(4, 1fr);
    column-count: 4;
}

.su-gallery-cols-6 {
    grid-template-columns: repeat(6, 1fr);
    column-count: 6;
}

.su-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--su-fe-radius);
    cursor: pointer;
}

.su-gallery-image {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity var(--su-fe-transition), transform 0.3s ease;
}

.su-gallery-item:hover .su-gallery-image {
    opacity: 0.9;
    transform: scale(1.02);
}

.su-gallery-caption {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    padding: 0.625rem 0.875rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: #fff;
    font-size: 0.8125rem;
    opacity: 0;
    transition: opacity var(--su-fe-transition);
}

.su-gallery-item:hover .su-gallery-caption {
    opacity: 1;
}

/* === D1. Content Catalogue Landing (/content) === */
/* Category sections: heading row, side media, sub-category chips. */
/* Base classes .su-category-stack-heading/meta/link are structural markers
 * shared with SapientCategoryStack; the catalogue adds its own layout. */

/* Heading row — default: vertical stack (title, meta) */
.su-catalogue-heading {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

/* Heading row WITH category media: text block left, side image right */
.su-catalogue-heading-with-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1.5rem;
    row-gap: 0.25rem;
}

/* Side image column (SapientLazyImage renders the ratio box) */
.su-catalogue-heading-with-media .su-catalogue-heading-media {
    width: 180px;
    grid-column: 2;
    grid-row: 1 / span 2;
}

/* Mobile: image drops below the text, full width */
@media (max-width: 767.98px) {
    .su-catalogue-heading-with-media {
        grid-template-columns: minmax(0, 1fr);
    }

    .su-catalogue-heading-with-media .su-catalogue-heading-media {
        width: 100%;
        grid-column: 1;
        grid-row: auto;
    }
}

/* Sub-category chips (L2) — pill links */
.su-catalogue-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--su-fe-border-color, rgba(0, 0, 0, 0.1));
    border-radius: 999px;
    background: var(--su-fe-surface, #fff);
    color: inherit;
    text-decoration: none;
    font-size: 0.8125rem;
    transition: border-color var(--su-fe-transition, 0.2s),
        background var(--su-fe-transition, 0.2s);
}

.su-catalogue-chip:hover {
    border-color: var(--su-brand, #2196F3);
    background: color-mix(in srgb, var(--su-brand, #2196F3) 5%, var(--su-fe-surface, #fff));
    text-decoration: none;
}

/* Chip with thumbnail — small round image before the label */
.su-catalogue-chip-media {
    gap: 0.5rem;
}

.su-catalogue-chip-thumb {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

/* Empty category note (design: render, never skip) */
.su-catalogue-empty {
    opacity: 0.75;
}

/* === C2. Media Carousel === */
.su-carousel {
    position: relative;
}

.su-carousel-item {
    position: relative;
    border-radius: var(--su-fe-radius);
    overflow: hidden;
    background: var(--su-fe-surface);
}

/* Transparent cards inside carousel items — inner breathing room
   (the card's own padding renders inside the item's rounded frame) */
.su-carousel-item .su-card-transparent {
    height: 100%;
    margin: 0;
    box-sizing: border-box;
}

.su-carousel-item>.su-card-transparent {
    padding: 1.25rem;
}

.su-carousel-image {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.su-carousel-body {
    padding: 1rem;
}

.su-carousel-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.su-carousel-title a {
    color: var(--su-fe-text);
    text-decoration: none;
}

.su-carousel-title a:hover {
    color: var(--su-brand, #0066cc);
}

.su-carousel-subtitle {
    font-size: 0.875rem;
    color: var(--su-fe-text-muted);
    margin: 0;
}

.su-carousel-badge {
    position: absolute;
    top: 0.75rem;
    inset-inline-end: 0.75rem;
    z-index: 2;
}

/* === C3. Overlay Image === */
.su-overlay-image {
    position: relative;
    display: block;
    border-radius: var(--su-fe-radius);
    overflow: hidden;
    text-decoration: none;
}

.su-overlay-image-rounded {
    border-radius: var(--su-radius-lg, 0.75rem);
}

.su-overlay-image-16-9 .su-overlay-image-img {
    aspect-ratio: 16/9;
}

.su-overlay-image-4-3 .su-overlay-image-img {
    aspect-ratio: 4/3;
}

.su-overlay-image-1-1 .su-overlay-image-img {
    aspect-ratio: 1/1;
}

.su-overlay-image-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.su-overlay-image:hover .su-overlay-image-img {
    transform: scale(1.03);
}

.su-overlay-image-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
    opacity: 0;
    transition: opacity var(--su-fe-transition);
}

.su-overlay-image:hover .su-overlay-image-overlay {
    opacity: 1;
}

.su-overlay-image-icon {
    font-size: 1.5rem;
    color: #fff;
    transform: scale(0.8);
    transition: transform var(--su-fe-transition);
}

.su-overlay-image:hover .su-overlay-image-icon {
    transform: scale(1);
}

.su-overlay-image-caption {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    padding: 0.625rem 0.875rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: #fff;
    font-size: 0.8125rem;
    opacity: 0;
    transition: opacity var(--su-fe-transition);
}

.su-overlay-image:hover .su-overlay-image-caption {
    opacity: 1;
}

/* === C4. Author Card === */
.su-author-card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem;
    background: var(--su-fe-surface);
    border: 1px solid var(--su-fe-border-color);
    border-radius: var(--su-fe-radius);
}

.su-author-card-full {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
}

.su-author-card-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.su-author-card-full .su-author-card-avatar {
    width: 4.5rem;
    height: 4.5rem;
}

.su-author-card-info {
    flex: 1;
    min-width: 0;
}

.su-author-card-name {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.125rem;
}

.su-author-card-name a {
    color: var(--su-fe-text);
    text-decoration: none;
}

.su-author-card-name a:hover {
    color: var(--su-brand, #0066cc);
}

.su-author-card-role {
    font-size: 0.8125rem;
    color: var(--su-fe-text-muted);
    margin: 0 0 0.25rem;
}

.su-author-card-bio {
    font-size: 0.875rem;
    color: var(--su-fe-text-muted);
    margin: 0 0 0.5rem;
    line-height: 1.5;
}

.su-author-card-social {
    display: flex;
    gap: 0.5rem;
}

.su-author-card-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--su-fe-surface-alt);
    color: var(--su-fe-text-muted);
    text-decoration: none;
    transition: all var(--su-fe-transition);
}

.su-author-card-social-link:hover {
    background: var(--su-brand, #0066cc);
    color: #fff;
}

/* === Transparent Cards (Card layer — container-agnostic) === */

/* Stacked zone sections — vertical separation between widget outputs */
.su-zone-stacked-item+.su-zone-stacked-item {
    margin-top: 3rem;
}

.su-card-transparent {
    background: transparent;
    border: 1px solid var(--su-fe-border-color, rgba(0, 0, 0, 0.08));
    border-radius: var(--su-fe-radius, 0.5rem);
    padding: 1.5rem;
    height: 100%;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.su-card-transparent:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--su-brand, #0066cc);
}

/* --- Card Layouts (real design alternatives, same content) --- */

/* Shared: body column next to logo/avatar (business layout) */
.su-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    /* allow text to shrink beside the image */
}

/* Shared: header row (two-row layout) — logo/avatar + name side by side */
.su-card-header-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.su-card-header-row .su-card-name {
    margin: 0;
}

/* Shared: separator between header and summary/quote rows */
.su-card-separator {
    height: 1px;
    background: var(--su-fe-border-color, rgba(0, 0, 0, 0.08));
    margin: 0.75rem 0;
    width: 100%;
}

/* Shared: meta line (tier badge + website) */
.su-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Shared: summary text */
.su-card-summary {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--su-fe-text-muted, #7c5252);
    margin: 0;
}

/* Enrichment: framed logo — bordered padded tile */
.su-card-logo-framed .su-card-logo-wrap {
    border: 1px solid var(--su-fe-border-color, rgba(0, 0, 0, 0.08));
    border-radius: var(--su-fe-radius, 0.5rem);
    padding: 0.75rem;
    background: var(--su-fe-surface, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Enrichment: framed avatar — bordered circle */
.su-card-avatar-framed .su-card-avatar {
    border: 2px solid var(--su-fe-border-color, rgba(0, 0, 0, 0.12));
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
}

/* --- Partner Card layouts --- */

/* business: two-column — logo left, name + summary right */
.su-card-partner.su-card-business {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
}

.su-card-partner.su-card-business .su-card-logo-wrap {
    height: 64px;
    width: 96px;
    flex-shrink: 0;
}

/* stacked: centered vertical */
.su-card-partner.su-card-stacked {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.su-card-partner.su-card-stacked .su-card-logo-wrap {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* two-row: header (logo + name), separator, summary */
.su-card-partner.su-card-two-row {
    text-align: left;
    display: flex;
    flex-direction: column;
}

.su-card-partner.su-card-two-row .su-card-logo-wrap {
    height: 56px;
    width: 88px;
    flex-shrink: 0;
}

.su-card-partner .su-card-name {
    font-size: 0.9375rem;
    margin: 0;
}

/* --- Testimonial Card layouts --- */

/* business: two-column — avatar left, quote + author right */
.su-card-testimonial.su-card-business {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    text-align: left;
}

.su-card-testimonial.su-card-business .su-card-avatar {
    flex-shrink: 0;
}

/* stacked: centered vertical (default look) */
.su-card-testimonial.su-card-stacked {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

/* two-row: header (avatar + author), separator, quote */
.su-card-testimonial.su-card-two-row {
    text-align: left;
    display: flex;
    flex-direction: column;
}

.su-card-testimonial.su-card-two-row .su-card-avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

/* --- Partner / Testimonial Card (base) --- */

.su-card-testimonial .su-card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--su-fe-border-color, rgba(0, 0, 0, 0.08));
}

.su-card-quote {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--su-fe-text, #1a0a0a);
    font-style: italic;
    margin: 0;
    position: relative;
    padding: 0 0.5rem;
}

.su-card-quote-icon {
    font-size: 0.75rem;
    opacity: 0.4;
}

.su-card-rating {
    display: flex;
    gap: 2px;
    justify-content: center;
}

.su-card-business .su-card-rating,
.su-card-two-row .su-card-rating {
    justify-content: flex-start;
}

.su-card-star {
    font-size: 0.875rem;
}

.su-card-star-filled {
    color: #f59e0b;
}

.su-card-star-empty {
    color: var(--su-fe-border-color, rgba(0, 0, 0, 0.15));
}

.su-card-author {
    margin-top: 0.25rem;
}

.su-card-name {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.su-card-name a {
    color: var(--su-fe-text, #1a0a0a);
    text-decoration: none;
}

.su-card-name a:hover {
    color: var(--su-brand, #0066cc);
}

.su-card-role {
    font-size: 0.875rem;
    color: var(--su-fe-text-muted, #7c5252);
    margin: 0.125rem 0 0;
}

.su-card-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.su-card-logo {
    max-height: 80px;
    max-width: 100%;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.su-card-partner:hover .su-card-logo,
.su-card-testimonial:hover .su-card-avatar {
    filter: grayscale(0%);
    opacity: 1;
}

.su-card-tier {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
}

.su-card-website {
    font-size: 0.8125rem;
    color: var(--su-fe-text-muted, #7c5252);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.su-card-website:hover {
    color: var(--su-brand, #0066cc);
}

/* === Dark mode overrides for frontend components === */
[data-su-theme-dark="true"] {
    --su-fe-border-color: var(--su-divider, rgba(255, 255, 255, 0.12));
    --su-fe-surface: var(--su-surface, #1a1d24);
    --su-fe-surface-alt: var(--su-surface-low, #222630);
    --su-fe-text: var(--su-on-surface, #e9ecef);
    --su-fe-text-muted: var(--su-on-surface-muted, #9aa3b0);
}

[data-su-theme-dark="true"] .su-content-card-overlay .su-content-card-body {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
}

[data-su-theme-dark="true"] .su-accordion-header {
    background: var(--su-fe-surface-alt);
}

/* === Reduced motion for frontend components === */
@media (prefers-reduced-motion: reduce) {

    .su-content-card,
    .su-content-card-image img,
    .su-gallery-image,
    .su-overlay-image-img,
    .su-overlay-image-overlay,
    .su-overlay-image-icon,
    .su-overlay-image-caption,
    .su-gallery-caption,
    .su-accordion-content,
    .su-sticky-nav-link,
    .su-shape-divider svg,
    .su-public-search-input,
    .su-public-search-submit,
    .su-public-search-select,
    .su-public-search-view-mode {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* === Responsive: Public Search Panel stacks on mobile === */
@media (max-width: 575.98px) {

    /* Row 3: options row stacks vertically on mobile */
    .su-public-search-options {
        flex-direction: column;
        align-items: stretch;
    }

    .su-public-search-toggles {
        margin-left: 0;
        width: 100%;
    }
}

/* ==========================================================================
   FRONTEND TIER — Chromeless public-facing components
   Canvas editorial aesthetic: typography hierarchy + spacing + thin dividers.
   No card borders, no shadows, no rounded corners. Counterparts to the
   admin-tier SapientCard/SapientAccordion/SapientKeyValueList/SapientListTile.
   ========================================================================== */

/* ── SapientSection ────────────────────────────────────────────────── */

.su-section {
    margin-bottom: var(--su-space-lg, 2rem);
}

.su-section-divider {
    border-top: 1px solid var(--su-border, rgba(0, 0, 0, 0.08));
    padding-top: var(--su-space-lg, 2rem);
    margin-top: var(--su-space-lg, 2rem);
}

.su-section-heading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--su-text, #333);
    margin: 0 0 0.75rem 0;
    letter-spacing: -0.01em;
}

.su-section .su-section-heading {
    text-transform: none;
    opacity: 0.85;
}

.su-section-body {
    color: var(--su-text, #333);
    line-height: 1.7;
}

.su-section-body> :last-child {
    margin-bottom: 0;
}

/* ── SapientMetaGrid ───────────────────────────────────────────────── */

.su-meta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin: 0;
}

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

@media (max-width: 575.98px) {
    .su-meta-grid-2col {
        grid-template-columns: 1fr;
    }
}

.su-meta-grid-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.su-meta-grid-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--su-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.su-meta-grid-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--su-text, #333);
    margin: 0;
    line-height: 1.5;
}

.su-meta-grid-value a {
    color: var(--su-brand, #1abc9c);
    text-decoration: none;
    transition: color 0.2s ease;
}

.su-meta-grid-value a:hover {
    color: var(--su-brand-dark, #159a82);
    text-decoration: underline;
}

.su-meta-grid-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* ── SapientToggleGroup ────────────────────────────────────────────── */
/* Reuses the su-accordion JS mechanism (data-su-accordion attributes).
   Visual difference: no card wrapper, bottom-border separators, no corners. */

.su-toggle-group {
    margin: 0;
}

.su-toggle-item {
    border-bottom: 1px solid var(--su-border, rgba(0, 0, 0, 0.08));
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}

.su-toggle-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.su-toggle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    padding: 0;
}

.su-toggle-header:hover {
    color: var(--su-brand, #1abc9c);
}

.su-toggle-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: inherit;
    flex: 1 1 auto;
}

.su-toggle-icon {
    font-size: 0.85rem;
    color: var(--su-text-muted, #999);
    flex-shrink: 0;
    margin-left: 0.75rem;
}

.su-toggle-icon-open {
    display: none;
}

.su-toggle-item[data-su-open="true"] .su-toggle-icon-closed {
    display: none;
}

.su-toggle-item[data-su-open="true"] .su-toggle-icon-open {
    display: inline-block;
}

.su-toggle-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.su-toggle-item[data-su-open="true"] .su-toggle-content {
    max-height: 2000px;
}

.su-toggle-content-inner {
    padding-top: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--su-text-muted, #666);
}

/* Dark theme overrides */
[data-su-theme-dark="true"] .su-section-heading,
[data-su-theme-dark="true"] .su-section-body,
[data-su-theme-dark="true"] .su-meta-grid-value {
    color: var(--su-text-dark, #e0e0e0);
}

[data-su-theme-dark="true"] .su-meta-grid-label {
    color: var(--su-text-muted-dark, #888);
}

[data-su-theme-dark="true"] .su-section-divider,
[data-su-theme-dark="true"] .su-toggle-item {
    border-color: var(--su-border-dark, rgba(255, 255, 255, 0.1));
}

[data-su-theme-dark="true"] .su-toggle-content-inner {
    color: var(--su-text-muted-dark, #aaa);
}

/* ── SapientLinkList ───────────────────────────────────────────────── */

.su-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.su-link-list-dividers .su-link-list-item {
    border-bottom: 1px solid var(--su-border, rgba(0, 0, 0, 0.06));
    padding-bottom: 0.5rem;
}

.su-link-list-dividers .su-link-list-item:last-child {
    border-bottom: none;
}

.su-link-list-item {
    margin: 0;
}

.su-link-list-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: var(--su-text, #333);
    transition: color 0.2s ease;
    padding: 0.125rem 0;
}

.su-link-list-link:hover {
    color: var(--su-brand, #1abc9c);
    text-decoration: none;
}

.su-link-list-icon {
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
    color: var(--su-text-muted, #999);
    font-size: 0.9rem;
}

.su-link-list-thumb {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--su-fe-radius, 0.375rem);
    overflow: hidden;
}

.su-link-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.su-link-list-link:hover .su-link-list-icon {
    color: var(--su-brand, #1abc9c);
}

.su-link-list-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.su-link-list-label {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
}

.su-link-list-subtitle {
    font-size: 0.8rem;
    color: var(--su-text-muted, #999);
    line-height: 1.3;
}

/* Dark theme for link list */
[data-su-theme-dark="true"] .su-link-list-link {
    color: var(--su-text-dark, #e0e0e0);
}

[data-su-theme-dark="true"] .su-link-list-dividers .su-link-list-item {
    border-color: var(--su-border-dark, rgba(255, 255, 255, 0.08));
}

[data-su-theme-dark="true"] .su-link-list-icon,
[data-su-theme-dark="true"] .su-link-list-subtitle {
    color: var(--su-text-muted-dark, #888);
}

/* ── SapientFeatureBox ─────────────────────────────────────────────── */

.su-feature-box {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.su-feature-box-compact {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
}

.su-feature-box-center {
    text-align: center;
    align-items: center;
}

.su-feature-box-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--su-brand, #1abc9c);
    background: color-mix(in srgb, var(--su-brand, #1abc9c) 8%, transparent);
    border-radius: 0.5rem;
}

.su-feature-box-compact .su-feature-box-icon {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    border-radius: 0.375rem;
}

.su-feature-box-content {
    flex: 1 1 auto;
}

.su-feature-box-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--su-text, #333);
    margin: 0 0 0.25rem 0;
    line-height: 1.4;
}

.su-feature-box-description {
    font-size: 0.875rem;
    color: var(--su-text-muted, #777);
    line-height: 1.6;
    margin: 0 0 0.5rem 0;
}

.su-feature-box-link {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--su-brand, #1abc9c);
    text-decoration: none;
    transition: color 0.2s ease;
}

.su-feature-box-link:hover {
    color: var(--su-brand-dark, #159a82);
    text-decoration: underline;
}

.su-feature-box-link i {
    font-size: 0.75rem;
    margin-left: 0.25rem;
    transition: transform 0.2s ease;
}

.su-feature-box-link:hover i {
    transform: translateX(2px);
}

/* Dark theme */
[data-su-theme-dark="true"] .su-feature-box-title {
    color: var(--su-text-dark, #e0e0e0);
}

[data-su-theme-dark="true"] .su-feature-box-description {
    color: var(--su-text-muted-dark, #aaa);
}

/* ── SapientPromoBanner ────────────────────────────────────────────── */

.su-promo-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 2.5rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--su-brand, #1abc9c) 5%, var(--su-surface, #f8f9fa));
    border: 1px solid color-mix(in srgb, var(--su-brand, #1abc9c) 12%, transparent);
    background-size: cover;
    background-position: center;
    margin-bottom: 2rem;
}

.su-promo-banner-center {
    flex-direction: column;
    text-align: center;
    justify-content: center;
}

.su-promo-banner-content {
    flex: 1 1 300px;
}

.su-promo-banner-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--su-text, #333);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.su-promo-banner-subtitle {
    font-size: 0.95rem;
    color: var(--su-text-muted, #777);
    line-height: 1.6;
    margin: 0;
}

.su-promo-banner-action {
    flex-shrink: 0;
}

.su-promo-banner-button {
    display: inline-block;
    padding: 0.625rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: var(--su-brand, #1abc9c);
    border-radius: 2rem;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.15s ease;
}

.su-promo-banner-button:hover {
    background: var(--su-brand-dark, #159a82);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Inside su-prose (markdown bodies), the link rule `.su-prose a` (element +
   class = specificity 0-1-1) beats `.su-promo-banner-button` (0-1-0) and
   recolors the button text to the link color — blue-on-brand-blue.
   Match the specificity INSIDE prose so the button stays white. */
.su-prose .su-promo-banner-button,
.su-prose a.su-promo-banner-button {
    color: #fff;
}

.su-prose .su-promo-banner-button:hover,
.su-prose a.su-promo-banner-button:hover {
    color: #fff;
}

/* Dark theme */
[data-su-theme-dark="true"] .su-promo-banner {
    background: color-mix(in srgb, var(--su-brand, #1abc9c) 8%, var(--su-surface-dark, #222));
    border-color: color-mix(in srgb, var(--su-brand, #1abc9c) 15%, transparent);
}

[data-su-theme-dark="true"] .su-promo-banner-title {
    color: var(--su-text-dark, #e0e0e0);
}

[data-su-theme-dark="true"] .su-promo-banner-subtitle {
    color: var(--su-text-muted-dark, #aaa);
}

/* ── Category tree children indentation ────────────────────────────── */

.su-cat-tree-children {
    padding-left: 1.25rem;
    margin-top: 0.25rem;
    border-left: 2px solid var(--su-border, rgba(0, 0, 0, 0.06));
}

[data-su-theme-dark="true"] .su-cat-tree-children {
    border-color: var(--su-border-dark, rgba(255, 255, 255, 0.08));
}

/* ============================================================================
   Navigation separator — vertical divider in the appbar menu
   ----------------------------------------------------------------------------
   Renders as a thin vertical line spanning the full height of the menu bar,
   creating visual grouping between menu sections (e.g. Docs | Resources
   separated from Implementers).
   ========================================================================== */
.primary-menu .nav-separator {
    list-style: none;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

.primary-menu .nav-separator hr {
    width: 1px;
    height: 24px;
    margin: 0;
    border: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
    background: none;
}

[data-su-theme-dark="true"] .primary-menu .nav-separator hr {
    border-left-color: rgba(255, 255, 255, 0.15);
}

/* ----------------------------------------------------------------------------
 * 21. Search panel — compact search zone
 *
 * Used by SapientSearchPanel::compactSearch(). Caps the search input width
 * so filter dropdowns appended after it stay on a single toolbar row.
 * -------------------------------------------------------------------------- */
.su-search-compact {
    max-width: 340px;
}

/* ----------------------------------------------------------------------------
 * E. Markdown Editor (SapientMarkdownEditor)
 *
 * Admin authoring surface: toolbar + textarea (the real form field) +
 * split live-preview pane. The preview pane receives server-rendered HTML
 * from the shared RichTextRenderer — su-prose children inherit the same
 * public typography (styled globally above), so preview == production.
 * Split pane: 2 equal columns at md+; single column below md (preview
 * stacks under the textarea, mobile reading order preserved).
 * -------------------------------------------------------------------------- */
.su-markdown-editor {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.su-markdown-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 0.25rem;
    background: var(--su-surface, #f8f9fa);
    border: 1px solid var(--su-card-border, #dee2e6);
    border-radius: var(--su-radius-md, 6px) var(--su-radius-md, 6px) 0 0;
    border-bottom: none;
}

.su-markdown-editor-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border: 1px solid transparent;
    border-radius: var(--su-radius-sm, 4px);
    background: transparent;
    color: var(--su-on-surface, #212529);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease;
}

.su-markdown-editor-btn i {
    font-size: 0.8125rem;
    line-height: 1;
}

.su-markdown-editor-btn:hover {
    background: color-mix(in srgb, var(--su-brand) 10%, transparent);
    color: var(--su-brand-dark, #0052a3);
}

.su-markdown-editor-btn-bold {
    font-weight: 800;
}

.su-markdown-editor-btn-italic {
    font-style: italic;
    font-family: Georgia, serif;
}

.su-markdown-editor-toolbar-sep {
    width: 1px;
    height: 20px;
    margin: 0 0.375rem;
    background: var(--su-divider, #dee2e6);
    flex-shrink: 0;
}

/* Hover usage hints — every toolbar button carries data-hint (the
   component/directive grammar). Pure CSS: ::after renders the attr on
   hover/focus with a 300ms delay, positioned under the toolbar, capped
   width so long grammar hints wrap. No JS, CSP-safe. */
.su-markdown-editor-btn {
    position: relative;
}

.su-markdown-editor-btn::after {
    content: attr(data-hint);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1080;
    display: none;
    width: max-content;
    max-width: 320px;
    padding: 0.5rem 0.75rem;
    border-radius: var(--su-radius-sm, 4px);
    background: #212529;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.su-markdown-editor-btn:hover::after,
.su-markdown-editor-btn:focus-visible::after {
    display: block;
    animation: su-md-hint-in 0.15s ease 0.3s both;
}

@keyframes su-md-hint-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Edge buttons: keep the tooltip on-canvas (left-most button would clip) */
.su-markdown-editor-btn:first-child::after {
    left: 0;
    transform: none;
}

/* Dark theme — lighter surface for contrast */
[data-su-theme-dark="true"] .su-markdown-editor-btn::after {
    background: #e4e4ef;
    color: #16161f;
}

.su-markdown-editor-panes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: stretch;
}

/* Below md: single column — preview stacks under the textarea */
@media (max-width: 767.98px) {
    .su-markdown-editor-panes {
        grid-template-columns: minmax(0, 1fr);
    }
}

.su-markdown-editor-input {
    width: 100%;
    min-height: 22rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--su-card-border, #dee2e6);
    border-radius: 0 0 0 var(--su-radius-md, 6px);
    background: var(--su-card, #fff);
    color: var(--su-on-surface, #212529);
    font-family: var(--su-font-mono, 'Courier New', monospace);
    font-size: 0.875rem;
    line-height: 1.6;
    resize: vertical;
    outline: none;
}

.su-markdown-editor-input:focus {
    border-color: var(--su-brand, #0066cc);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--su-brand) 15%, transparent);
}

/* Source-only variant (html/plain rows) — textarea + note, no panes grid */
.su-markdown-editor-source-only .su-markdown-editor-input {
    border-radius: var(--su-radius-md, 6px);
}

.su-markdown-editor-preview {
    min-height: 22rem;
    max-height: 40rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--su-card-border, #dee2e6);
    border-radius: 0 var(--su-radius-md, 6px) var(--su-radius-md, 6px) 0;
    background: var(--su-fe-surface-alt, #f8f9fa);
    overflow-y: auto;
}

/* Preview pane carries server-rendered su-prose markup — the global
   su-prose rules apply; add scroll containment + inner margin only. */
.su-markdown-editor-preview>*:first-child {
    margin-top: 0;
}

.su-markdown-editor-preview>*:last-child {
    margin-bottom: 0;
}

.su-markdown-editor-preview-error {
    color: var(--su-on-surface-muted, #6c757d);
    font-size: 0.8125rem;
    font-style: italic;
}

.su-markdown-editor-note {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--su-on-surface-muted, #6c757d);
}

/* Format select row (editable-format builds) — select is the REAL
   body_format form field; note explains the rendering switch. */
.su-markdown-editor-format-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.su-markdown-editor-format-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--su-on-surface, #212529);
    margin: 0;
}

.su-markdown-editor-format {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--su-card-border, #dee2e6);
    border-radius: var(--su-radius-sm, 4px);
    background: var(--su-card, #fff);
    color: var(--su-on-surface, #212529);
    font-size: 0.8125rem;
    outline: none;
}

.su-markdown-editor-format:focus {
    border-color: var(--su-brand, #0066cc);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--su-brand) 15%, transparent);
}

.su-markdown-editor-format-note {
    font-size: 0.75rem;
    color: var(--su-on-surface-muted, #6c757d);
}

/* p3.10 — Convert button (beside the format select). Stateless transform;
   hidden in plain state (no conversion defined for plain text). */
.su-markdown-editor-convert {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--su-card-border, #dee2e6);
    border-radius: var(--su-radius-sm, 4px);
    background: var(--su-card, #fff);
    color: var(--su-on-surface, #212529);
    font-size: 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.su-markdown-editor-convert:hover:not(:disabled) {
    border-color: var(--su-brand, #0066cc);
    color: var(--su-brand, #0066cc);
}

.su-markdown-editor-convert:disabled {
    opacity: 0.55;
    cursor: progress;
}

.su-markdown-editor-format-plain .su-markdown-editor-convert {
    display: none;
}

/* p3.10 — Restore chip (per-field previous-version recall). Renders only
   when a scratch slot exists; click populates the field client-side
   (non-destructive — user saves manually). */
.su-field-undo {
    display: inline-flex;
    margin-bottom: 0.75rem;
}

.su-field-undo-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    border: 1px dashed var(--su-card-border, #dee2e6);
    border-radius: var(--su-radius-sm, 4px);
    background: var(--su-card, #fff);
    color: var(--su-on-surface-muted, #6c757d);
    font-size: 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.su-field-undo-btn:hover:not(:disabled) {
    border-color: var(--su-brand, #0066cc);
    border-style: solid;
    color: var(--su-brand, #0066cc);
}

.su-field-undo-btn:disabled {
    opacity: 0.55;
    cursor: progress;
}

.su-field-undo-icon {
    font-size: 0.85rem;
    line-height: 1;
}

.su-field-undo-label {
    font-weight: 600;
}

.su-field-undo-date {
    opacity: 0.75;
}

/* Format states — the root carries su-markdown-editor-format-{format}.
   html/plain: toolbar + preview hidden, source note shown, textarea
   takes the full width. markdown: everything visible. */
.su-markdown-editor-format-html .su-markdown-editor-toolbar,
.su-markdown-editor-format-plain .su-markdown-editor-toolbar {
    display: none;
}

.su-markdown-editor-format-html .su-markdown-editor-panes,
.su-markdown-editor-format-plain .su-markdown-editor-panes {
    grid-template-columns: minmax(0, 1fr);
}

.su-markdown-editor-format-html .su-markdown-editor-preview,
.su-markdown-editor-format-plain .su-markdown-editor-preview {
    display: none;
}

.su-markdown-editor-format-html .su-markdown-editor-input {
    border-radius: var(--su-radius-md, 6px);
}

.su-markdown-editor-format-plain .su-markdown-editor-input {
    border-radius: var(--su-radius-md, 6px);
}

.su-markdown-editor-note-html,
.su-markdown-editor-note-plain {
    display: none;
}

.su-markdown-editor-format-html .su-markdown-editor-note-html {
    display: block;
}

.su-markdown-editor-format-plain .su-markdown-editor-note-plain {
    display: block;
}

/* Dark theme — [data-su-theme-dark] admin variant */
[data-su-theme-dark="true"] .su-markdown-editor-toolbar,
[data-su-theme-dark="true"] .su-markdown-editor-preview {
    background: var(--su-grey-100, #1e1e2e);
    border-color: var(--su-card-border, #2a2a3a);
}

[data-su-theme-dark="true"] .su-markdown-editor-input {
    background: var(--su-surface, #16161f);
    border-color: var(--su-card-border, #2a2a3a);
    color: var(--su-on-surface, #e4e4ef);
}

[data-su-theme-dark="true"] .su-markdown-editor-btn {
    color: var(--su-on-surface, #e4e4ef);
}

[data-su-theme-dark="true"] .su-markdown-editor-btn:hover {
    background: color-mix(in srgb, var(--su-brand) 18%, transparent);
    color: var(--su-brand-light, #7fb4ff);
}

[data-su-theme-dark="true"] .su-markdown-editor-toolbar-sep {
    background: var(--su-card-border, #2a2a3a);
}

[data-su-theme-dark="true"] .su-markdown-editor-note,
[data-su-theme-dark="true"] .su-markdown-editor-preview-error {
    color: var(--su-on-surface-muted, #9a9ab0);
}

[data-su-theme-dark="true"] .su-markdown-editor-format {
    background: var(--su-surface, #16161f);
    border-color: var(--su-card-border, #2a2a3a);
    color: var(--su-on-surface, #e4e4ef);
}

[data-su-theme-dark="true"] .su-markdown-editor-format-label {
    color: var(--su-on-surface, #e4e4ef);
}

[data-su-theme-dark="true"] .su-markdown-editor-format-note {
    color: var(--su-on-surface-muted, #9a9ab0);
}

/* ================================================================
   T6: Hero text color mode — .su-hero-text-light / .su-hero-text-dark
   ================================================================

   Admins declare per entity (content_registrations.hero_text_style /
   slide_registration.hero_text_style) whether the hero background is
   dark or light, because runtime cannot reliably detect an image's
   brightness. NULL (inherit) changes nothing — current rendering stays.

   Consumers:
     - SapientHeroBackground  (content detail hero — class on section)
     - SapientHeroSlider     (onboard hero slider — class on .swiper-slide)
   --------------------------------------------------------------- */

/* light: white text pinned (safety net) */
.su-hero-text-light .slider-caption,
.su-hero-text-light .canvas-hero-content {
    color: #fff;
}

.su-hero-text-light .slider-caption h2,
.su-hero-text-light .slider-caption p,
.su-hero-text-light .canvas-hero-content h1,
.su-hero-text-light .canvas-hero-content h2,
.su-hero-text-light .canvas-hero-content p,
.su-hero-text-light .canvas-hero-content .text-white {
    color: #fff;
}

/* dark: dark text on a light image. Neutralizes the always-on dark washes
   (slider gradient overlay / hero overlay) so dark text is readable. */
.su-hero-text-dark {
    background-color: transparent !important;
}

.su-hero-text-dark .swiper-slide-overlay {
    display: none;
}

.su-hero-text-dark .slider-caption,
.su-hero-text-dark .canvas-hero-content {
    color: #212529;
}

.su-hero-text-dark .slider-caption h2,
.su-hero-text-dark .slider-caption p,
.su-hero-text-dark .canvas-hero-content h1,
.su-hero-text-dark .canvas-hero-content h2,
.su-hero-text-dark .canvas-hero-content .text-white {
    /* FIXED HEX — never a --cnvs-contrast-* token here. Those tokens are
       theme-relative: Canvas redefines them inside .dark scope
       (style.css: .dark { --cnvs-contrast-900: #f8f9fa }) so a token-based
       "dark text" resolved to near-WHITE on slides carrying class="dark".
       The admin explicitly declared a light image — force a fixed dark. */
    color: #212529 !important;
}

/* Subtitle muted variant — beats Bootstrap .text-white-50 (same !important,
   higher specificity: 2 classes + element vs 1 class). */
.su-hero-text-dark .slider-caption p,
.su-hero-text-dark .canvas-hero-content p.lead {
    color: rgba(33, 37, 41, 0.8) !important;
}

/* ribbon: dark grey band behind the caption + white text. The robust
   answer for light/white background images — readability comes from
   the band, never from the image's brightness.

   STRUCTURE: the class paints the caption block directly on SLIDES —
   the full-height band (Canvas .slider-caption carries height:100%)
   is the intended, operator-approved look. On the content hero the
   .canvas-hero-content block hugs its content, so the band hugs
   the title/summary there. Works for BOTH surfaces. */
.su-hero-caption-ribbon {
    background-color: rgba(26, 26, 46, 0.92);   /* --hepo footer identity tone */
    border-radius: 0.5rem;
    padding: 2rem 2.25rem !important;
    margin: 0 !important;
    color: #fff;
    backdrop-filter: blur(2px);
    max-width: 100%;                             /* never overflow the container */
    /* Left-aligned captions: the band hugs the text, not the full column.
       (Centered captions stretch — see .slider-caption-center override.) */
    align-self: flex-start;
}

.su-hero-caption-ribbon h2,
.su-hero-caption-ribbon h1,
.su-hero-caption-ribbon p {
    color: #fff !important;
}

/* Bootstrap .text-white-50 inside the ribbon: keep white, keep the 50% veil */
.su-hero-caption-ribbon .text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Breadcrumbs on the band (content detail hero) — white variant */
.su-hero-caption-ribbon .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.6) !important;
}

.su-hero-caption-ribbon .breadcrumb-item.active {
    color: #fff !important;
}

/* Centered caption: the band should hug the text there too */
.su-hero-caption-ribbon.slider-caption-center {
    align-self: auto;
    margin: 0 auto !important;
}

/* Canvas dark-section headings may set their own h2 colors — pin the
   ribbon's h2 to white with the same specificity ladder as above. */
.su-hero-text-ribbon .slider-caption h2,
.su-hero-text-ribbon .canvas-hero-content h2 {
    color: #fff !important;
}

/* ================================================================
   T6.2: Onboard hero slider — caption width + title size
   ================================================================

   Problem: the Canvas default reserves only 550px for slide text
   (--cnvs-slider-caption-width). Long titles wrap to many lines,
   overflow the flex-centered caption block, and visually "climb" to
   the top of the slide.

   Fixes (scoped to .su-hero-slider — the onboard hero slider section;
   Canvas defaults + media-gallery sliders stay untouched):
     - caption width 550px → 770px  (+40%)
     - title size 4.5rem → 3.6rem  (−20%)
   --------------------------------------------------------------- */

.su-hero-slider .slider-caption {
    max-width: 770px;
}

.su-hero-slider .slider-caption h2 {
    font-size: 3.6rem;
}

/* Subtitle — same color as the title (inherits the caption palette per
   active text mode) + half the title size (3.6rem → 1.8rem).
   CASCADE ANALYSIS (v2): Canvas's .text-smaller is font-size:80% !important
   (style.css:17175) and BS .text-white-50 is color !important — the base
   rule below (non-important) LOSES to both. The two killers underneath
   carry !important at (0,2,1): they beat the utilities (0,1,0)!important,
   and LOSE to the dark-mode palette rule (0,3,1)!important — so every text
   mode keeps its established color. Ribbon: caption div carries
   su-hero-caption-ribbon (color:#fff), inherit resolves correctly; the
   ribbon .text-white-50 veil rule is (0,2,0) so the killer wins the tie
   and the subtitle goes full white = title color, as requested. */
.su-hero-slider .slider-caption p {
    color: inherit;
    font-size: 1.8rem;
    line-height: 1.35;
}

/* Kill ONLY the two !important utilities on hero subtitles — scoped to
   hero sliders so global Canvas usage elsewhere is untouched. Deliberately
   (0,2,1): above utilities, below the dark-mode (0,3,1) palette rule. */
.slider-caption p.text-white-50 {
    color: inherit !important;
}

.slider-caption p.text-smaller {
    font-size: 1.8rem !important;
}

/* Mobile — keep the half-title ratio (title 5.5vw → subtitle 2.75vw).
   The !important killer must repeat here: media-query base rule is
   non-important and would lose to .text-smaller's 80%!important. */
@media (max-width: 767.98px) {
    .su-hero-slider .slider-caption p {
        font-size: 2.75vw;
    }

    .slider-caption p.text-smaller {
        font-size: 2.75vw !important;
    }
}

/* Keep the responsive mobile sizes from Canvas (5.5vw) untouched. */

/* ================================================================
   T6.6: Slide cover system — color mask + explicit gradients
   ================================================================

   Editor-controlled layers over the slide background image, emitted by
   SapientHeroSlider::renderSlide(). Both optional and combinable.
   --------------------------------------------------------------- */

/* Color mask — solid color over the full slide (background-color +
   opacity are inline from the slide's mask_color/mask_opacity).
   'theme' color uses var(--color-primary) — the tenant palette emitted
   in <head> by SapientAssetRegistry. z:0 = same layer as the gradient;
   mask div is emitted BEFORE the gradient so the wash sits closest to
   the text. */
.su-hero-slide-mask {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Explicit gradient survival: su-hero-text-dark hides the AUTO gradient
   (.swiper-slide-overlay, plain class). An EXPLICIT editor gradient
   (su-hero-slide-overlay-explicit) overrides that suppression — the
   editor's word is final over automatic behavior (approved matrix).
   Also neutralize the auto gradient's own CSS background so the inline
   ramp is the only paint on the element. */
.su-hero-text-dark .swiper-slide-overlay.su-hero-slide-overlay-explicit {
    display: block !important;
    background: none !important;
}

/* ================================================================
   T6.3: Hero slider countdown — su-hero-countdown bar
   ================================================================

   A bar that fills across each slide's duration — the slide countdown.
   Own markup (NOT Swiper pagination): sapient-hero-slider.js drives the
   inner bar with a CSS width transition synced to each slide's autoplay
   delay, so per-slide durations make the bar speed match the timing.
   Immune to Swiper version differences — never fights Canvas's init.
   --------------------------------------------------------------- */

.su-hero-countdown {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 30;
    overflow: hidden;
}

.su-hero-countdown-bar {
    height: 100%;
    width: 0%;
    /* Light blue countdown fill (operator choice 2026-09-13) — reads on
       dark and light images alike, distinct from the red theme. */
    background: #93c5fd;
    transform-origin: left center;
}

/* Dark-text slides (light image) — keep the track visible on white bg.
   The bar sits outside the slide element (sibling of .swiper-wrapper),
   so scope via the section-level mode class on the active slide is not
   possible — use a neutral track that reads on both palettes instead. */
.su-hero-slider .su-hero-countdown {
    background: rgba(0, 0, 0, 0.15);
}

/* ================================================================
   T6.4: Hero slider pause/play control — .su-hero-pause
   ================================================================

   Bottom-right control. Default shows the pause icon (show running);
   .su-hero-paused swaps to the play icon. Frosted pill so it reads over
   any image, blue accent on hover matches the countdown bar.
   --------------------------------------------------------------- */
.su-hero-pause {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 35;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(26, 26, 46, 0.55);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}

.su-hero-pause:hover {
    background: rgba(26, 26, 46, 0.8);
    border-color: #93c5fd;
}

.su-hero-pause:active {
    transform: scale(0.93);
}

.su-hero-pause .uil-play {
    display: none;
}

.su-hero-pause.su-hero-paused .uil-pause {
    display: none;
}

.su-hero-pause.su-hero-paused .uil-play {
    display: block;
}

/* Keyboard focus ring (a11y) */
.su-hero-pause:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

/* Mobile — smaller control, above the thin bar */
@media (max-width: 767.98px) {
    .su-hero-pause {
        right: 12px;
        bottom: 14px;
        width: 32px;
        height: 32px;
    }

    .su-hero-countdown {
        height: 3px;
    }
}

/* Bullets variant (when pagination_type = bullets) — Swiper native dots,
   styled. Canvas inits these; we only tune the look.
   2026-09-13 (UX): dots now render with BOTH types — the bar counts down
   at the bottom edge, the dots sit just above it as "where am I / jump to
   slide" navigation (Canvas init makes them clickable). */
.su-hero-slider .swiper-pagination {
    bottom: 22px !important;
    height: auto;
    background: transparent;
}

.su-hero-slider .swiper-pagination-bullets {
    height: auto;
    background: transparent;
}

.su-hero-slider .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    width: 12px;
    height: 12px;
    margin: 0 5px !important;
    transition: all 0.3s ease;
    cursor: pointer;
}

.su-hero-slider .swiper-pagination-bullet-active {
    background: #fff;
    transform: scale(1.3);
}

/* ================================================================
   T6.5: Hero slider swipe gesture hint — .su-hero-swipe-hint
   ================================================================

   First-visit-only nudge for touch users: "Swipe to browse" with chevrons.
   Desktop (hover-capable) devices never see it — the media query below
   is the gate. Bridge JS dismisses it on first touch or after 4s.
   --------------------------------------------------------------- */

.su-hero-swipe-hint {
    position: absolute;
    left: 50%;
    bottom: 48px;
    transform: translateX(-50%);
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(26, 26, 46, 0.7);
    color: #fff;
    font-size: 0.85rem;
    pointer-events: none; /* never blocks touch scrolling */
    opacity: 1;
    transition: opacity 0.4s ease;
}

.su-hero-swipe-hint .uil {
    font-size: 1rem;
    animation: su-hero-hint-pulse 1.6s ease-in-out infinite;
}

.su-hero-swipe-hint.su-hero-swipe-hint-out {
    opacity: 0;
}

@keyframes su-hero-hint-pulse {
    0%, 100% { opacity: 0.45; transform: translateX(0); }
    50% { opacity: 1; }
}

/* Touch-only: hide on devices with a real pointer */
@media (hover: hover) and (pointer: fine) {
    .su-hero-swipe-hint {
        display: none;
    }
}

/* ----------------------------------------------------------------------------
 * 20. Modal — Sapient themed dialog (driven by js/sapient-modal.js)
 * -------------------------------------------------------------------------- */
.su-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* open transition: backdrop fade + dialog rise */
    opacity: 0;
    transition: opacity 0.18s ease;
}

.su-modal.su-modal-open {
    opacity: 1;
}

.su-modal[hidden] {
    display: none;
}

.su-modal-centered {
    align-items: center;
    padding: var(--su-space-md, 1rem);
}

.su-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 18, 34, 0.72);
    cursor: pointer;
}

.su-modal-static .su-modal-backdrop {
    cursor: default;
}

.su-modal-dialog {
    position: relative;
    margin: calc(var(--su-space-lg, 1.5rem) + env(safe-area-inset-top, 0)) var(--su-space-md, 1rem);
    width: 100%;
    max-width: var(--su-modal-w, 560px);
    display: flex;
    justify-content: center;
    transform: translateY(12px) scale(0.985);
    transition: transform 0.18s ease;
}

.su-modal-open .su-modal-dialog {
    transform: translateY(0) scale(1);
}

.su-modal-sm { --su-modal-w: 380px; }
.su-modal-md { --su-modal-w: 560px; }
.su-modal-lg { --su-modal-w: min(1280px, 92vw); }

.su-modal-fullscreen .su-modal-dialog {
    max-width: none;
    margin: 0;
    height: 100%;
}

.su-modal-fullscreen .su-modal-inner {
    border-radius: 0;
    height: 100%;
}

.su-modal-inner {
    position: relative;
    width: 100%;
    max-height: calc(100vh - 2 * (var(--su-space-lg, 1.5rem) + env(safe-area-inset-top, 0)));
    display: flex;
    flex-direction: column;
    background: var(--su-color-surface, #fff);
    border-radius: var(--su-radius-lg, 12px);
    box-shadow: 0 18px 60px rgba(10, 12, 28, 0.35);
    overflow: hidden;
}

.su-modal-scrollable .su-modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.su-modal-header {
    display: flex;
    align-items: center;
    gap: var(--su-space-sm, 0.5rem);
    padding: var(--su-space-sm, 0.5rem) var(--su-space-md, 1rem);
    border-bottom: 1px solid rgba(120, 130, 160, 0.18);
}

.su-modal-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: var(--su-text-body-md, 0.95rem);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.su-modal-counter {
    flex: 0 0 auto;
    font-size: var(--su-text-body-sm, 0.8rem);
    color: var(--su-color-text-muted, #6c7585);
    font-variant-numeric: tabular-nums;
}

.su-modal-close {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    width: 34px;
    height: 34px;
    border-radius: var(--su-radius-md, 8px);
    color: inherit;
    opacity: 0.65;
    cursor: pointer;
}

.su-modal-close:hover,
.su-modal-close:focus-visible {
    opacity: 1;
    background: rgba(120, 130, 160, 0.15);
}

.su-modal-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    justify-content: center;
    padding: var(--su-space-sm, 0.5rem);
}

.su-modal-content {
    display: flex;
    justify-content: center;
    width: 100%;
}

.su-modal-media {
    max-width: 100%;
    max-height: calc(100vh - 180px);
    border-radius: var(--su-radius-md, 8px);
}

/* Images fill the dialog width so a zoomed view is meaningfully larger
   than the grid thumbnail (which caps at ~160px). Height stays capped
   to the viewport; width drives, keeping the aspect ratio. */
.su-modal-media-image {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.su-modal-media-audio {
    width: 100%;
    margin: auto;
}

/* Gallery nav arrows — lightbox style, themed */
.su-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(20, 24, 44, 0.55);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(2px);
}

.su-modal-nav:hover,
.su-modal-nav:focus-visible {
    background: rgba(20, 24, 44, 0.8);
}

.su-modal-prev { left: var(--su-space-sm, 0.5rem); }
.su-modal-next { right: var(--su-space-sm, 0.5rem); }

/* Phones: near-fullscreen, smaller chrome, media capped to the viewport */
@media (max-width: 575.98px) {
    .su-modal-dialog {
        margin: 0.5rem;
    }

    .su-modal {
        align-items: center;
    }

    .su-modal-inner {
        max-height: calc(100vh - 1rem);
    }

    .su-modal-media {
        max-height: 70vh;
    }

    .su-modal-nav {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }
}