/*
 * ============================================================================
 * ETM Platform — Design System
 * ============================================================================
 *
 * Single-file design system consumed by every standalone platform page.
 * Loaded via <link rel="stylesheet"> from the shared head partial; no Vite
 * build step required.
 *
 * Structure:
 *   1. Tokens           — colors, spacing, typography, radii, shadows, motion
 *   2. Reset + base     — margin/box-sizing normalize + body typography
 *   3. Layout           — .ds-hero, .ds-shell, .ds-main, .ds-grid
 *   4. Primitives       — .ds-panel, .ds-card, .ds-table, .ds-metric, .ds-empty
 *   5. Form             — .ds-field, .ds-input, .ds-select, .ds-textarea, .ds-checkbox
 *   6. Controls         — .ds-btn (+ variants), .ds-link, .ds-icon-btn
 *   7. Status atoms     — .ds-chip, .ds-badge, .ds-flash, .ds-trend
 *   8. Text atoms       — .ds-code, .ds-mono, .ds-muted
 *   9. RTL              — logical properties throughout; no per-token override
 *
 * Class naming: `.ds-{primitive}` for the primitive, `.ds-{primitive}--{modifier}`
 * for variants (BEM without the element level — the primitive IS one element).
 *
 * Per-page CSS should:
 *   - Reference only tokens (never hardcoded hex/px)
 *   - Compose primitives (never redefine them)
 *   - Layer page-specific overrides with `.page-{name}` prefixes
 */

/* ============================================================================
 * 1. TOKENS
 * ============================================================================ */

:root {
    /* -- Brand (blue) -------------------------------------------------------- */
    --color-brand-50:  #eff6ff;
    --color-brand-100: #dbeafe;
    --color-brand-200: #bfdbfe;
    --color-brand-300: #93c5fd;
    --color-brand-400: #60a5fa;
    --color-brand-500: #3b82f6;
    --color-brand-600: #2563eb; /* primary */
    --color-brand-700: #1d4ed8;
    --color-brand-800: #1e40af;
    --color-brand-900: #1e3a8a;

    /* -- Neutrals (slate) ---------------------------------------------------- */
    --color-neutral-0:   #ffffff;
    --color-neutral-50:  #f8fafc;
    --color-neutral-100: #f1f5f9;
    --color-neutral-200: #e2e8f0;
    --color-neutral-300: #cbd5e1;
    --color-neutral-400: #94a3b8;
    --color-neutral-500: #64748b;
    --color-neutral-600: #475569;
    --color-neutral-700: #334155;
    --color-neutral-800: #1e293b;
    --color-neutral-900: #0f172a;
    --color-neutral-950: #020617;

    /* -- Status ------------------------------------------------------------- */
    --color-success-50:  #ecfdf5;
    --color-success-100: #d1fae5;
    --color-success-600: #059669;
    --color-success-700: #047857;

    --color-warning-50:  #fffbeb;
    --color-warning-100: #fef3c7;
    --color-warning-600: #d97706;
    --color-warning-700: #b45309;

    --color-danger-50:   #fef2f2;
    --color-danger-100:  #fee2e2;
    --color-danger-600:  #dc2626;
    --color-danger-700:  #b91c1c;

    --color-info-50:     #eff6ff;
    --color-info-100:    #dbeafe;
    --color-info-600:    #2563eb;
    --color-info-700:    #1d4ed8;

    /* -- Semantic (what components reference) ------------------------------- */
    --color-bg:            var(--color-neutral-50);
    --color-bg-elevated:   var(--color-neutral-0);
    --color-bg-muted:      var(--color-neutral-100);
    --color-bg-inverse:    var(--color-neutral-900);

    --color-text:          var(--color-neutral-900);
    /* Enterprise-readiness §10: muted text bumped one step darker
       (500 → 600) for WCAG AA contrast against the default surface. */
    --color-text-muted:    var(--color-neutral-600);
    --color-text-subtle:   var(--color-neutral-500);
    --color-text-inverse:  var(--color-neutral-0);

    --color-border:        var(--color-neutral-200);
    --color-border-strong: var(--color-neutral-300);

    --color-primary:       var(--color-brand-600);
    --color-primary-hover: var(--color-brand-700);
    --color-primary-soft:  var(--color-brand-50);
    --color-primary-text:  var(--color-brand-700);

    --color-focus-ring:    var(--color-brand-500);

    /* -- Spacing (4px grid) ------------------------------------------------- */
    --space-0:  0;
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  32px;
    --space-8:  40px;
    --space-9:  48px;
    --space-10: 64px;

    /* -- Radius ------------------------------------------------------------- */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* -- Elevation (shadows) ----------------------------------------------- */
    --elevation-1: 0 1px 2px rgba(15, 23, 42, 0.06);
    --elevation-2: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.05);
    --elevation-3: 0 4px 12px rgba(15, 23, 42, 0.08), 0 12px 24px rgba(15, 23, 42, 0.05);
    --elevation-4: 0 12px 30px rgba(15, 23, 42, 0.12);

    /* -- Motion ------------------------------------------------------------- */
    --motion-fast:  120ms;
    --motion-med:   220ms;
    --easing-standard: cubic-bezier(0.2, 0, 0, 1);

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

    /* Enterprise-readiness §10: raised minimums for readability.
       No token now falls below 12px — the previous 10/11px labels were
       accessibility failures at typical viewer distances.  */
    --font-size-xs:   12px;
    --font-size-sm:   13px;
    --font-size-base: 14px;
    --font-size-md:   15px;
    --font-size-lg:   17px;
    --font-size-xl:   21px;
    --font-size-2xl:  26px;
    --font-size-3xl:  32px;

    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-tight:   1.25;
    --line-height-snug:    1.4;
    --line-height-normal:  1.55;

    --letter-spacing-tight:  -0.01em;
    --letter-spacing-normal:  0;
    --letter-spacing-wide:    0.05em;
    --letter-spacing-wider:   0.08em;

    /* -- Focus ring --------------------------------------------------------- */
    --focus-ring: 0 0 0 2px var(--color-bg-elevated), 0 0 0 4px var(--color-focus-ring);

    /* -- Z-index scale ------------------------------------------------------ */
    --z-sticky: 10;
    --z-drawer: 50;
    --z-modal:  100;
    --z-toast:  200;
}

/* Arabic uses Tajawal — same tokens otherwise. */
[dir="rtl"] {
    --font-sans: "Tajawal", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ============================================================================
 * 2. RESET + BASE
 * ============================================================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text);
}

h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-lg); }
h3 { font-size: var(--font-size-md); }

p { margin: 0; }

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-4) 0;
}

/* Focus visible for keyboard users. */
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* ============================================================================
 * 3. LAYOUT
 * ============================================================================ */

/* Shell — max-width container used by hero + main. */
.ds-shell {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-5);
}

/* Hero — top band of every standalone page.
 * Uses `background: var(--color-bg-inverse)` for a deep-neutral slate
 * band. Pages that want an accent hero can add `.ds-hero--brand`. */
.ds-hero {
    background: var(--color-bg-inverse);
    color: var(--color-text-inverse);
    padding-block: var(--space-7);
}
.ds-hero__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-5);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.ds-hero__eyebrow {
    margin: 0 0 var(--space-1);
    opacity: 0.7;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    font-weight: var(--font-weight-medium);
}
.ds-hero__title {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-inverse);
}
.ds-hero__subtitle {
    margin: var(--space-2) 0 0;
    opacity: 0.75;
    font-size: var(--font-size-md);
    max-width: 60ch;
    line-height: var(--line-height-snug);
}
.ds-hero__actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}
.ds-hero__back {
    color: var(--color-text-inverse);
    opacity: 0.75;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ds-hero__back:hover { opacity: 1; }

.ds-hero--brand {
    background: linear-gradient(135deg, var(--color-brand-800) 0%, var(--color-brand-600) 100%);
}
.ds-hero--flat {
    background: var(--color-bg-elevated);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    padding-block: var(--space-5);
}
.ds-hero--flat .ds-hero__title { color: var(--color-text); }
.ds-hero--flat .ds-hero__subtitle { color: var(--color-text-muted); opacity: 1; }
.ds-hero--flat .ds-hero__eyebrow { color: var(--color-text-muted); opacity: 1; }
.ds-hero--flat .ds-hero__back { color: var(--color-primary); opacity: 1; }

/* Main — page content wrapper. */
.ds-main {
    max-width: 1200px;
    margin-inline: auto;
    padding: var(--space-7) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.ds-main--narrow { max-width: 800px; }
.ds-main--wide { max-width: 1400px; }

/* Grid — responsive card grid. Auto-fit stretches columns to fill. */
.ds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-4);
}
.ds-grid--tight { gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ds-grid--wide  { gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* ============================================================================
 * 4. PRIMITIVES — panels, cards, tables, metrics, empty
 * ============================================================================ */

/* Panel — top-level content block with an internal title.
 * Used for form sections, dashboard groups, standalone content areas. */
.ds-panel {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--elevation-1);
}
.ds-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.ds-panel__title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}
.ds-panel__hint {
    margin: 0 0 var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
}
.ds-panel__actions { display: flex; gap: var(--space-2); }

/* Card — smaller than panel, used inside grids and lists. */
.ds-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--elevation-1);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: box-shadow var(--motion-fast) var(--easing-standard),
                border-color var(--motion-fast) var(--easing-standard);
}
.ds-card--interactive { cursor: pointer; }
.ds-card--interactive:hover {
    box-shadow: var(--elevation-2);
    border-color: var(--color-border-strong);
}
.ds-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.ds-card__title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}
.ds-card__hint {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
}
.ds-card__link {
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}
.ds-card__link:hover { text-decoration: underline; }
.ds-card__warn {
    margin: var(--space-2) 0 0;
    color: var(--color-danger-700);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Card status accents — left border to signal state (matches gov-card pattern). */
.ds-card--good   { border-inline-start: 3px solid var(--color-success-600); }
.ds-card--watch  { border-inline-start: 3px solid var(--color-warning-600); }
.ds-card--action { border-inline-start: 3px solid var(--color-danger-600); }

/* Table — dense list rendering. Rows are 36px tall by default. */
.ds-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--elevation-1);
    font-size: var(--font-size-base);
}
.ds-table thead th {
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
    text-align: start;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.ds-table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr:hover { background: var(--color-bg-muted); }
.ds-table__num { text-align: end; font-variant-numeric: tabular-nums; }
.ds-table__actions {
    text-align: end;
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    align-items: center;
}

/* Metric — label + value pair. Used in dashboards + governance panels. */
.ds-metric { display: flex; flex-direction: column; gap: var(--space-1); }
.ds-metric__label {
    margin: 0;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
}
.ds-metric__value {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}
.ds-metric__value--big { font-size: var(--font-size-3xl); }
.ds-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-4);
}

/* Empty state — dashed panel with title + hint. */
.ds-empty {
    background: var(--color-bg-elevated);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-9) var(--space-6);
    text-align: center;
}
.ds-empty__title {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}
.ds-empty__body {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
}
.ds-empty__body code {
    background: var(--color-bg-muted);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
}

/* Pager — pagination footer. */
.ds-pager {
    margin-top: var(--space-4);
    display: flex;
    justify-content: center;
}

/* ============================================================================
 * 5. FORM
 * ============================================================================ */

.ds-form { display: flex; flex-direction: column; gap: var(--space-4); }
.ds-form__submit {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.ds-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    align-items: end;
}

.ds-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.ds-field__label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
}
.ds-field__hint {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-snug);
}
.ds-field__error {
    color: var(--color-danger-700);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}
.ds-field--inline {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    text-transform: none;
    font-weight: var(--font-weight-normal);
}

.ds-input,
.ds-select,
.ds-textarea {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--font-size-md);
    line-height: var(--line-height-snug);
    transition: border-color var(--motion-fast) var(--easing-standard),
                box-shadow var(--motion-fast) var(--easing-standard);
    width: 100%;
}
.ds-input:hover,
.ds-select:hover,
.ds-textarea:hover {
    border-color: var(--color-border-strong);
}
.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.ds-input:disabled,
.ds-select:disabled,
.ds-textarea:disabled {
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
    cursor: not-allowed;
}
.ds-textarea {
    resize: vertical;
    min-height: 80px;
    font-family: var(--font-sans);
}
.ds-textarea--mono {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.ds-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-md);
    cursor: pointer;
    user-select: none;
}
.ds-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
    margin: 0;
}

/* ============================================================================
 * 6. CONTROLS — buttons, links, icon buttons
 * ============================================================================ */

.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-elevated);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--motion-fast) var(--easing-standard),
                border-color var(--motion-fast) var(--easing-standard),
                color var(--motion-fast) var(--easing-standard);
    white-space: nowrap;
}
.ds-btn:hover {
    background: var(--color-bg-muted);
    border-color: var(--color-border-strong);
}
.ds-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.ds-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ds-btn--primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}
.ds-btn--primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}
.ds-btn--danger {
    background: var(--color-danger-600);
    color: var(--color-text-inverse);
    border-color: var(--color-danger-600);
}
.ds-btn--danger:hover {
    background: var(--color-danger-700);
    border-color: var(--color-danger-700);
}
.ds-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--color-text-muted);
}
.ds-btn--ghost:hover {
    background: var(--color-bg-muted);
    color: var(--color-text);
}
/* On dark hero band, ghost buttons need light-on-dark styling. */
.ds-hero:not(.ds-hero--flat) .ds-btn--ghost {
    background: rgba(255, 255, 255, 0.10);
    color: var(--color-text-inverse);
    border-color: rgba(255, 255, 255, 0.20);
}
.ds-hero:not(.ds-hero--flat) .ds-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.18);
    color: var(--color-text-inverse);
}

.ds-btn--sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
}

.ds-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}
.ds-link:hover { text-decoration: underline; }

.ds-inline-form { display: inline; margin: 0; }

/* ============================================================================
 * 7. STATUS ATOMS — chips, badges, flash, trend
 * ============================================================================ */

/* Chip — pill-shaped inline label. Higher information density than badge. */
.ds-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    line-height: 1.4;
    white-space: nowrap;
}
.ds-chip--good   { background: var(--color-success-100); color: var(--color-success-700); }
.ds-chip--warn   { background: var(--color-warning-100); color: var(--color-warning-700); }
.ds-chip--danger { background: var(--color-danger-100);  color: var(--color-danger-700); }
.ds-chip--info   { background: var(--color-info-100);    color: var(--color-info-700); }
.ds-chip--brand  { background: var(--color-primary-soft); color: var(--color-primary-text); }
.ds-chip--muted  { background: var(--color-bg-muted);    color: var(--color-text-muted); }
.ds-chip--sm { font-size: 10px; padding: 1px 6px; }

/* Badge — status marker with an optional colored dot prefix.
 * Slightly heavier weight than chip; used to call out row status. */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-bg-muted);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    white-space: nowrap;
}
.ds-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.ds-badge--good   { color: var(--color-success-700); background: var(--color-success-50); }
.ds-badge--warn   { color: var(--color-warning-700); background: var(--color-warning-50); }
.ds-badge--danger { color: var(--color-danger-700);  background: var(--color-danger-50); }

/* Flash — session status banner shown at the top of forms/pages. */
.ds-flash {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    background: var(--color-success-50);
    color: var(--color-success-700);
    border: 1px solid var(--color-success-100);
}
.ds-flash--warn { background: var(--color-warning-50); color: var(--color-warning-700); border-color: var(--color-warning-100); }
.ds-flash--danger { background: var(--color-danger-50); color: var(--color-danger-700); border-color: var(--color-danger-100); }
.ds-flash--info  { background: var(--color-info-50);   color: var(--color-info-700);   border-color: var(--color-info-100); }

/* Trend — direction + delta indicator (governance / dashboards).
 * `--inverted` swaps green/red for metrics where "up is bad". */
.ds-trend {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
}
.ds-trend--up   { background: var(--color-success-50); color: var(--color-success-700); }
.ds-trend--down { background: var(--color-danger-50);  color: var(--color-danger-700); }
.ds-trend--flat { background: var(--color-bg-muted);   color: var(--color-text-muted); }
.ds-trend--inverted.ds-trend--up   { background: var(--color-danger-50);  color: var(--color-danger-700); }
.ds-trend--inverted.ds-trend--down { background: var(--color-success-50); color: var(--color-success-700); }

/* ============================================================================
 * 8. TEXT ATOMS — code, muted, mono
 * ============================================================================ */

.ds-code {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    padding: 1px 6px;
    background: var(--color-bg-muted);
    border-radius: var(--radius-xs);
    color: var(--color-text);
}
.ds-mono { font-family: var(--font-mono); font-size: var(--font-size-sm); }
.ds-muted { color: var(--color-text-muted); }

/* JSON block (pretty-printed) — dark background for code readability. */
.ds-json {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-neutral-900);
    color: var(--color-neutral-100);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    overflow-x: auto;
    white-space: pre;
}

/* ============================================================================
 * 9. RESPONSIVE — mobile refinements
 * ============================================================================ */

@media (max-width: 640px) {
    .ds-hero__inner { flex-direction: column; align-items: flex-start; }
    .ds-hero__title { font-size: var(--font-size-xl); }
    .ds-panel { padding: var(--space-4); }
    .ds-main { padding: var(--space-5) var(--space-4); }
    .ds-form__grid { grid-template-columns: 1fr; }
}