/*!
 * IDDS — INA Digital Design System (core)
 * Government design foundation for a multi-domain CMS (53+ dinas domains,
 * one codebase, per-domain look). Aligned with design.inadigital.go.id
 * pattern guides and 2026/2027 UI standards (soft depth, generous spacing,
 * large radii, accessible contrast, reduced-motion aware).
 *
 * This file is a TOKEN + PRIMITIVE layer. It is intentionally framework-
 * agnostic and scoped so it can sit on top of a theme without fighting it.
 * Per-domain branding is injected at runtime via CSS custom properties
 * (see _brand-vars.blade.php) so every domain can override --idds-primary,
 * logo, radius, etc. without touching this file.
 */

/* =========================================================================
   1. DESIGN TOKENS
   ========================================================================= */
:root {
    /* Brand — overridable per domain via _brand-vars.blade.php ------------ */
    --idds-primary-h: 222;
    --idds-primary-s: 89%;
    --idds-primary-l: 55%;
    --idds-primary: hsl(var(--idds-primary-h) var(--idds-primary-s) var(--idds-primary-l));
    --idds-primary-50: hsl(var(--idds-primary-h) var(--idds-primary-s) 97%);
    --idds-primary-100: hsl(var(--idds-primary-h) var(--idds-primary-s) 93%);
    --idds-primary-200: hsl(var(--idds-primary-h) var(--idds-primary-s) 85%);
    --idds-primary-300: hsl(var(--idds-primary-h) var(--idds-primary-s) 74%);
    --idds-primary-500: var(--idds-primary);
    --idds-primary-600: hsl(var(--idds-primary-h) var(--idds-primary-s) 47%);
    --idds-primary-700: hsl(var(--idds-primary-h) var(--idds-primary-s) 39%);
    --idds-primary-contrast: #ffffff;

    /* Government accent (INA red) ----------------------------------------- */
    --idds-accent: #e5231b;
    --idds-accent-600: #c41a13;

    /* Neutrals ------------------------------------------------------------ */
    --idds-white: #ffffff;
    --idds-gray-25: #fcfcfd;
    --idds-gray-50: #f8fafc;
    --idds-gray-100: #f1f5f9;
    --idds-gray-200: #e5e9f0;
    --idds-gray-300: #d3dae6;
    --idds-gray-400: #9aa6b8;
    --idds-gray-500: #6b7789;
    --idds-gray-600: #4b5565;
    --idds-gray-700: #333c4a;
    --idds-gray-800: #1f2733;
    --idds-gray-900: #0f1620;

    /* Semantic ------------------------------------------------------------ */
    --idds-success: #12864e;
    --idds-success-bg: #e7f6ee;
    --idds-warning: #b45309;
    --idds-warning-bg: #fdf3e3;
    --idds-danger: #c4241c;
    --idds-danger-bg: #fdeceb;
    --idds-info: #0b6bcb;
    --idds-info-bg: #e6f0fb;

    /* Surfaces & text ----------------------------------------------------- */
    --idds-bg: var(--idds-gray-50);
    --idds-surface: var(--idds-white);
    --idds-surface-2: var(--idds-gray-50);
    --idds-border: var(--idds-gray-200);
    --idds-border-strong: var(--idds-gray-300);
    --idds-text: var(--idds-gray-800);
    --idds-text-muted: var(--idds-gray-500);
    --idds-text-subtle: var(--idds-gray-400);

    /* Typography — Plus Jakarta Sans (INA brand type) --------------------- */
    --idds-font-sans: "Plus Jakarta Sans", "Inter", system-ui, -apple-system,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --idds-font-heading: var(--idds-font-sans);
    --idds-fs-xs: 0.75rem;
    --idds-fs-sm: 0.875rem;
    --idds-fs-base: 1rem;
    --idds-fs-lg: 1.125rem;
    --idds-fs-xl: 1.375rem;
    --idds-fs-2xl: 1.75rem;
    --idds-fs-3xl: 2.25rem;
    --idds-fs-4xl: 3rem;
    --idds-lh-tight: 1.2;
    --idds-lh-normal: 1.6;
    --idds-fw-regular: 400;
    --idds-fw-medium: 500;
    --idds-fw-semibold: 600;
    --idds-fw-bold: 700;

    /* Spacing scale (4px base) ------------------------------------------- */
    --idds-space-1: 0.25rem;
    --idds-space-2: 0.5rem;
    --idds-space-3: 0.75rem;
    --idds-space-4: 1rem;
    --idds-space-5: 1.5rem;
    --idds-space-6: 2rem;
    --idds-space-7: 3rem;
    --idds-space-8: 4rem;

    /* Radius — 2026/2027 favours softer, larger corners ------------------ */
    --idds-radius-sm: 8px;
    --idds-radius-md: 12px;
    --idds-radius-lg: 16px;
    --idds-radius-xl: 24px;
    --idds-radius-pill: 999px;

    /* Elevation — soft, layered shadows ---------------------------------- */
    --idds-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --idds-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
    --idds-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);
    --idds-shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.12), 0 4px 8px rgba(16, 24, 40, 0.05);
    --idds-shadow-focus: 0 0 0 3px hsl(var(--idds-primary-h) var(--idds-primary-s) var(--idds-primary-l) / 0.28);

    /* Motion -------------------------------------------------------------- */
    --idds-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --idds-dur-fast: 120ms;
    --idds-dur: 200ms;
    --idds-dur-slow: 320ms;

    /* Layout -------------------------------------------------------------- */
    --idds-container: 1200px;
    --idds-header-h: 72px;
    --idds-sidebar-w: 264px;
}

/* Dark scheme tokens (opt-in via [data-bs-theme="dark"] used by the theme) */
[data-bs-theme="dark"] {
    --idds-bg: #0b1220;
    --idds-surface: #121a2a;
    --idds-surface-2: #0f1826;
    --idds-border: #24304a;
    --idds-border-strong: #33415f;
    --idds-text: #e7ecf5;
    --idds-text-muted: #9fb0c9;
    --idds-text-subtle: #728099;
    --idds-primary-50: hsl(var(--idds-primary-h) var(--idds-primary-s) 16%);
    --idds-primary-100: hsl(var(--idds-primary-h) var(--idds-primary-s) 22%);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --idds-dur-fast: 0ms;
        --idds-dur: 0ms;
        --idds-dur-slow: 0ms;
    }
    * { scroll-behavior: auto !important; }
}

/* =========================================================================
   2. PRIMITIVES (scoped under .idds to avoid clobbering host theme globals)
   ========================================================================= */
.idds,
.idds * { box-sizing: border-box; }

.idds {
    font-family: var(--idds-font-sans);
    color: var(--idds-text);
    font-size: var(--idds-fs-base);
    line-height: var(--idds-lh-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.idds h1, .idds h2, .idds h3, .idds h4, .idds h5, .idds h6 {
    font-family: var(--idds-font-heading);
    font-weight: var(--idds-fw-bold);
    line-height: var(--idds-lh-tight);
    color: var(--idds-text);
    letter-spacing: -0.01em;
}

.idds a { color: var(--idds-primary-600); text-decoration: none; transition: color var(--idds-dur) var(--idds-ease); }
.idds a:hover { color: var(--idds-primary-700); }

.idds :focus-visible {
    outline: none;
    box-shadow: var(--idds-shadow-focus);
    border-radius: var(--idds-radius-sm);
}

/* Layout helpers ---------------------------------------------------------- */
.idds-container {
    width: 100%;
    max-width: var(--idds-container);
    margin-inline: auto;
    padding-inline: var(--idds-space-4);
}
.idds-stack > * + * { margin-top: var(--idds-space-4); }
.idds-grid { display: grid; gap: var(--idds-space-5); }
.idds-grid--2 { grid-template-columns: repeat(2, 1fr); }
.idds-grid--3 { grid-template-columns: repeat(3, 1fr); }
.idds-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 992px) { .idds-grid--3, .idds-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .idds-grid--2, .idds-grid--3, .idds-grid--4 { grid-template-columns: 1fr; } }

.idds-section { padding-block: var(--idds-space-7); }
.idds-eyebrow {
    display: inline-block;
    font-size: var(--idds-fs-sm);
    font-weight: var(--idds-fw-semibold);
    color: var(--idds-primary-600);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* =========================================================================
   3. BUTTONS
   ========================================================================= */
.idds-btn {
    --_bg: var(--idds-primary);
    --_fg: var(--idds-primary-contrast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--idds-space-2);
    font-family: inherit;
    font-weight: var(--idds-fw-semibold);
    font-size: var(--idds-fs-sm);
    line-height: 1;
    padding: 0.75rem 1.25rem;
    border-radius: var(--idds-radius-md);
    border: 1px solid transparent;
    background: var(--_bg);
    color: var(--_fg);
    cursor: pointer;
    transition: transform var(--idds-dur-fast) var(--idds-ease),
        box-shadow var(--idds-dur) var(--idds-ease),
        background-color var(--idds-dur) var(--idds-ease);
    text-decoration: none;
}
.idds-btn:hover { color: var(--_fg); box-shadow: var(--idds-shadow-md); transform: translateY(-1px); }
.idds-btn:active { transform: translateY(0); }
.idds-btn--primary { --_bg: var(--idds-primary); --_fg: var(--idds-primary-contrast); }
.idds-btn--primary:hover { --_bg: var(--idds-primary-600); }
.idds-btn--secondary {
    --_bg: var(--idds-surface); --_fg: var(--idds-text);
    border-color: var(--idds-border-strong);
}
.idds-btn--secondary:hover { --_bg: var(--idds-gray-50); }
.idds-btn--ghost { --_bg: transparent; --_fg: var(--idds-primary-600); }
.idds-btn--ghost:hover { --_bg: var(--idds-primary-50); box-shadow: none; }
.idds-btn--danger { --_bg: var(--idds-danger); --_fg: #fff; }
.idds-btn--lg { padding: 0.95rem 1.75rem; font-size: var(--idds-fs-base); }
.idds-btn--sm { padding: 0.5rem 0.85rem; font-size: var(--idds-fs-xs); }
.idds-btn--block { display: flex; width: 100%; }

/* =========================================================================
   4. CARDS  (pattern: card-data)
   ========================================================================= */
.idds-card {
    background: var(--idds-surface);
    border: 1px solid var(--idds-border);
    border-radius: var(--idds-radius-lg);
    box-shadow: var(--idds-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--idds-dur) var(--idds-ease),
        transform var(--idds-dur) var(--idds-ease),
        border-color var(--idds-dur) var(--idds-ease);
}
.idds-card--hover:hover { box-shadow: var(--idds-shadow-lg); transform: translateY(-3px); border-color: var(--idds-primary-200); }
.idds-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--idds-gray-100); }
.idds-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--idds-dur-slow) var(--idds-ease); }
.idds-card--hover:hover .idds-card__media img { transform: scale(1.05); }
.idds-card__body { padding: var(--idds-space-5); }
.idds-card__title { font-size: var(--idds-fs-lg); margin: 0 0 var(--idds-space-2); }
.idds-card__title a { color: inherit; }
.idds-card__title a:hover { color: var(--idds-primary-600); }
.idds-card__excerpt { color: var(--idds-text-muted); font-size: var(--idds-fs-sm); margin: 0; }
.idds-card__meta {
    display: flex; align-items: center; gap: var(--idds-space-3);
    color: var(--idds-text-subtle); font-size: var(--idds-fs-xs);
    margin-top: var(--idds-space-3);
}

/* Metric card (dashboard) ------------------------------------------------- */
.idds-metric { padding: var(--idds-space-5); }
.idds-metric__label { font-size: var(--idds-fs-sm); color: var(--idds-text-muted); font-weight: var(--idds-fw-medium); }
.idds-metric__value { font-size: var(--idds-fs-3xl); font-weight: var(--idds-fw-bold); line-height: 1.1; margin-top: var(--idds-space-2); }
.idds-metric__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--idds-fs-xs); font-weight: var(--idds-fw-semibold); margin-top: var(--idds-space-2); }
.idds-metric__delta--up { color: var(--idds-success); }
.idds-metric__delta--down { color: var(--idds-danger); }
.idds-metric__icon {
    width: 44px; height: 44px; border-radius: var(--idds-radius-md);
    display: grid; place-items: center; font-size: 1.15rem;
    background: var(--idds-primary-50); color: var(--idds-primary-600);
}

/* =========================================================================
   5. BADGES / CHIPS / TAGS
   ========================================================================= */
.idds-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0.25rem 0.65rem; border-radius: var(--idds-radius-pill);
    font-size: var(--idds-fs-xs); font-weight: var(--idds-fw-semibold);
    background: var(--idds-gray-100); color: var(--idds-gray-700);
    line-height: 1.4;
}
.idds-badge--primary { background: var(--idds-primary-50); color: var(--idds-primary-700); }
.idds-badge--success { background: var(--idds-success-bg); color: var(--idds-success); }
.idds-badge--warning { background: var(--idds-warning-bg); color: var(--idds-warning); }
.idds-badge--danger { background: var(--idds-danger-bg); color: var(--idds-danger); }
.idds-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.idds-chip {
    display: inline-flex; align-items: center;
    padding: 0.5rem 1rem; border-radius: var(--idds-radius-pill);
    border: 1px solid var(--idds-border-strong); background: var(--idds-surface);
    color: var(--idds-text); font-size: var(--idds-fs-sm); font-weight: var(--idds-fw-medium);
    cursor: pointer; transition: all var(--idds-dur) var(--idds-ease);
}
.idds-chip:hover { border-color: var(--idds-primary-300); color: var(--idds-primary-700); }
.idds-chip--active { background: var(--idds-primary); border-color: var(--idds-primary); color: #fff; }

/* =========================================================================
   6. FORMS  (pattern: login-register, searchbar)
   ========================================================================= */
.idds-field { display: block; margin-bottom: var(--idds-space-4); }
.idds-label { display: block; font-size: var(--idds-fs-sm); font-weight: var(--idds-fw-semibold); margin-bottom: var(--idds-space-2); color: var(--idds-text); }
.idds-label__req { color: var(--idds-accent); }
.idds-input,
.idds-select,
.idds-textarea {
    width: 100%;
    font-family: inherit;
    font-size: var(--idds-fs-base);
    color: var(--idds-text);
    background: var(--idds-surface);
    border: 1px solid var(--idds-border-strong);
    border-radius: var(--idds-radius-md);
    padding: 0.75rem 1rem;
    transition: border-color var(--idds-dur) var(--idds-ease), box-shadow var(--idds-dur) var(--idds-ease);
}
.idds-input::placeholder, .idds-textarea::placeholder { color: var(--idds-text-subtle); }
.idds-input:focus, .idds-select:focus, .idds-textarea:focus {
    outline: none; border-color: var(--idds-primary); box-shadow: var(--idds-shadow-focus);
}
.idds-input:disabled { background: var(--idds-gray-100); cursor: not-allowed; }
.idds-hint { font-size: var(--idds-fs-xs); color: var(--idds-text-muted); margin-top: 6px; }
.idds-field--error .idds-input { border-color: var(--idds-danger); }
.idds-field--error .idds-hint { color: var(--idds-danger); }

/* Search bar -------------------------------------------------------------- */
.idds-search { position: relative; }
.idds-search .idds-input { padding-left: 2.75rem; border-radius: var(--idds-radius-pill); }
.idds-search__icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--idds-text-subtle); pointer-events: none; }

/* =========================================================================
   7. TABLE  (pattern: table)
   ========================================================================= */
.idds-table-wrap {
    background: var(--idds-surface);
    border: 1px solid var(--idds-border);
    border-radius: var(--idds-radius-lg);
    overflow: hidden;
    box-shadow: var(--idds-shadow-sm);
}
.idds-table { width: 100%; border-collapse: collapse; font-size: var(--idds-fs-sm); }
.idds-table thead th {
    text-align: left; padding: var(--idds-space-4) var(--idds-space-5);
    background: var(--idds-gray-50); color: var(--idds-text-muted);
    font-weight: var(--idds-fw-semibold); font-size: var(--idds-fs-xs);
    text-transform: uppercase; letter-spacing: 0.03em;
    border-bottom: 1px solid var(--idds-border);
    white-space: nowrap;
}
.idds-table tbody td { padding: var(--idds-space-4) var(--idds-space-5); border-bottom: 1px solid var(--idds-border); color: var(--idds-text); vertical-align: middle; }
.idds-table tbody tr { transition: background-color var(--idds-dur-fast) var(--idds-ease); }
.idds-table tbody tr:hover { background: var(--idds-primary-50); }
.idds-table tbody tr:last-child td { border-bottom: 0; }

/* =========================================================================
   8. HEADER  (pattern: header)
   ========================================================================= */
.idds-header {
    position: sticky; top: 0; z-index: 1030;
    background: color-mix(in srgb, var(--idds-surface) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--idds-border);
}
.idds-header__inner { display: flex; align-items: center; gap: var(--idds-space-5); min-height: var(--idds-header-h); }
.idds-header__brand { display: flex; align-items: center; gap: var(--idds-space-3); font-weight: var(--idds-fw-bold); color: var(--idds-text); }
.idds-header__brand img { height: 40px; width: auto; }
.idds-nav { display: flex; align-items: center; gap: var(--idds-space-2); margin-inline-start: auto; }
.idds-nav__link {
    padding: 0.6rem 0.9rem; border-radius: var(--idds-radius-md);
    color: var(--idds-text); font-weight: var(--idds-fw-medium); font-size: var(--idds-fs-sm);
    transition: background-color var(--idds-dur) var(--idds-ease), color var(--idds-dur) var(--idds-ease);
}
.idds-nav__link:hover { background: var(--idds-primary-50); color: var(--idds-primary-700); }
.idds-nav__link--active { color: var(--idds-primary-700); }
.idds-nav__link--active::after { content: ""; display: block; height: 2px; border-radius: 2px; background: var(--idds-primary); margin-top: 4px; }
.idds-header.is-scrolled { box-shadow: var(--idds-shadow-sm); }

/* Government top strip (identitas resmi) ---------------------------------- */
.idds-gov-strip {
    background: var(--idds-gray-900); color: #cfd8e6;
    font-size: var(--idds-fs-xs); padding: 6px 0;
}
.idds-gov-strip a { color: #fff; font-weight: var(--idds-fw-semibold); }

/* =========================================================================
   9. SIDEBAR  (pattern: sidebar)
   ========================================================================= */
.idds-sidebar {
    width: var(--idds-sidebar-w);
    background: var(--idds-surface);
    border-right: 1px solid var(--idds-border);
    padding: var(--idds-space-4);
    display: flex; flex-direction: column; gap: var(--idds-space-1);
}
.idds-sidebar__group { font-size: var(--idds-fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--idds-text-subtle); font-weight: var(--idds-fw-semibold); padding: var(--idds-space-4) var(--idds-space-3) var(--idds-space-2); }
.idds-sidebar__link {
    display: flex; align-items: center; gap: var(--idds-space-3);
    padding: 0.7rem 0.85rem; border-radius: var(--idds-radius-md);
    color: var(--idds-text); font-weight: var(--idds-fw-medium); font-size: var(--idds-fs-sm);
    transition: background-color var(--idds-dur) var(--idds-ease), color var(--idds-dur) var(--idds-ease);
}
.idds-sidebar__link:hover { background: var(--idds-gray-50); color: var(--idds-primary-700); }
.idds-sidebar__link--active { background: var(--idds-primary-50); color: var(--idds-primary-700); font-weight: var(--idds-fw-semibold); }
.idds-sidebar__link i { width: 20px; text-align: center; }

/* =========================================================================
   10. BLOG  (patterns: blog-section, blog-post)
   ========================================================================= */
.idds-article { max-width: 760px; margin-inline: auto; }
.idds-article__header { margin-bottom: var(--idds-space-6); }
.idds-article__title { font-size: var(--idds-fs-3xl); margin: var(--idds-space-3) 0; }
.idds-article__lead { font-size: var(--idds-fs-lg); color: var(--idds-text-muted); }
.idds-article__cover { border-radius: var(--idds-radius-lg); overflow: hidden; margin-bottom: var(--idds-space-6); box-shadow: var(--idds-shadow-md); }
.idds-prose { font-size: var(--idds-fs-lg); line-height: 1.8; color: var(--idds-gray-700); }
.idds-prose > * + * { margin-top: var(--idds-space-5); }
.idds-prose h2 { font-size: var(--idds-fs-2xl); margin-top: var(--idds-space-7); }
.idds-prose h3 { font-size: var(--idds-fs-xl); margin-top: var(--idds-space-6); }
.idds-prose img { border-radius: var(--idds-radius-md); max-width: 100%; height: auto; }
.idds-prose blockquote {
    border-inline-start: 4px solid var(--idds-primary); padding-inline-start: var(--idds-space-5);
    color: var(--idds-text-muted); font-style: italic;
}

/* =========================================================================
   11. 404 / EMPTY STATES  (pattern: 404-section)
   ========================================================================= */
.idds-empty { text-align: center; padding: var(--idds-space-8) var(--idds-space-4); }
.idds-empty__code { font-size: clamp(4rem, 18vw, 9rem); font-weight: var(--idds-fw-bold); line-height: 1; background: linear-gradient(120deg, var(--idds-primary), var(--idds-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.idds-empty__title { font-size: var(--idds-fs-2xl); margin: var(--idds-space-4) 0 var(--idds-space-2); }
.idds-empty__text { color: var(--idds-text-muted); max-width: 480px; margin: 0 auto var(--idds-space-5); }

/* =========================================================================
   12. FOOTER  (pattern: footer)
   ========================================================================= */
.idds-footer { background: var(--idds-gray-900); color: #b9c4d4; padding-block: var(--idds-space-7) var(--idds-space-5); }
.idds-footer a { color: #d7e0ee; }
.idds-footer a:hover { color: #fff; }
.idds-footer__title { color: #fff; font-size: var(--idds-fs-sm); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--idds-space-4); }
.idds-footer__bottom { border-top: 1px solid rgba(255,255,255,0.08); margin-top: var(--idds-space-6); padding-top: var(--idds-space-5); font-size: var(--idds-fs-sm); color: #8a99ad; }

/* =========================================================================
   13. UTILITIES
   ========================================================================= */
.idds-muted { color: var(--idds-text-muted); }
.idds-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idds-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.idds-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.idds-divider { height: 1px; background: var(--idds-border); border: 0; margin-block: var(--idds-space-5); }
.idds-skeleton { background: linear-gradient(90deg, var(--idds-gray-100) 25%, var(--idds-gray-200) 37%, var(--idds-gray-100) 63%); background-size: 400% 100%; animation: idds-shimmer 1.4s ease infinite; border-radius: var(--idds-radius-sm); }
@keyframes idds-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* =========================================================================
   14. BROADCAST RECEIVER (cross-domain announcements)
   ========================================================================= */
.idds-broadcast {
    padding-block: .65rem;
    background: color-mix(in srgb, var(--idds-primary, #1a365d) 6%, #fff);
    border-bottom: 1px solid color-mix(in srgb, var(--idds-primary, #1a365d) 12%, #e2e8f0);
    position: relative;
    z-index: 20;
}
.idds-broadcast__inner {
    width: min(100% - 2rem, 1200px);
    margin-inline: auto;
}
.idds-broadcast__bar {
    display: flex; align-items: center; gap: var(--idds-space-4, 1rem);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--idds-primary, #1a365d) 10%, #fff),
        #fff 40%);
    border: 1px solid color-mix(in srgb, var(--idds-primary, #1a365d) 18%, #e2e8f0);
    border-radius: var(--idds-radius-md, 10px);
    padding: 0.65rem 1rem;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
}
.idds-broadcast__tag {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--idds-fs-xs, .7rem); font-weight: 800;
    color: #fff; text-transform: uppercase; letter-spacing: .04em;
    background: var(--idds-primary, #1a365d);
    padding: .35rem .65rem;
    border-radius: 999px;
}
.idds-broadcast__track { display: flex; gap: var(--idds-space-6, 1.5rem); white-space: nowrap; overflow: hidden; flex: 1; min-width: 0; }
.idds-broadcast__item { font-size: var(--idds-fs-sm, .875rem); color: var(--idds-text, #0f172a); }
.idds-broadcast__item a { color: var(--idds-primary, #1a365d); font-weight: 650; text-decoration: none; }
.idds-broadcast__item a:hover { text-decoration: underline; }
.idds-broadcast__src { color: var(--idds-text-subtle, #64748b); font-style: normal; font-size: var(--idds-fs-xs, .75rem); }
.idds-broadcast__cards { margin-top: var(--idds-space-4, 1rem); }

/* Keep bar clear of left/right icon rails */
@media (min-width: 992px) {
    body.mp-left .idds-broadcast { padding-left: var(--mp-rail, 72px); }
    body.mp-right .idds-broadcast { padding-right: var(--mp-rail, 72px); }
    body.mp-bottom .idds-broadcast { margin-bottom: 0; }
}

/* Reveal-on-scroll hook (progressive enhancement) ------------------------- */
.idds-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--idds-dur-slow) var(--idds-ease), transform var(--idds-dur-slow) var(--idds-ease); }
.idds-reveal.is-visible { opacity: 1; transform: none; }