/* ============================================================
   Vakio Design System — Tokens, Typography, Colours
   Refined enterprise aesthetic: deep navy + warm ivory + teal accent
   Font: DM Sans (everything) — Playfair Display kept only for the
   "Vakio" brand wordmark (.sidebar-brand / .topnav-brand) to match
   the Super Admin Portal's uniform DM Sans typography.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300&family=JetBrains+Mono:wght@400;600&family=Noto+Serif+Devanagari:wght@500&display=swap');

/* ── Structural tokens (theme-independent) ──────────── */
:root {
    /* Typography
       Admin Portal parity: DM Sans for headings + body (uniform sans).
       `--font-serif` is preserved for the Vakio brand wordmark ONLY
       (.sidebar-brand / .topnav-brand).  Do not reuse it elsewhere. */
    --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-devanagari: 'Noto Serif Devanagari', serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    /* Scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    /* Radii */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4,0,0.2,1);
    --transition-base: 250ms cubic-bezier(0.4,0,0.2,1);
    --transition-slow: 400ms cubic-bezier(0.4,0,0.2,1);
    /* Brand accent colours — unchanged across themes */
    --color-amber: #C49A3C;
    --color-amber-glow: rgba(196, 154, 60, 0.18);
    --color-gold: #C49A3C;
    --color-gold-light: #D9B05A;
    --color-gold-dim: #8A6B28;
    --color-gold-glow: rgba(196, 154, 60, 0.10);
    --color-gold-border: rgba(196, 154, 60, 0.18);
    --color-red: #E53935;
    --color-red-glow: rgba(229, 57, 53, 0.15);
    --color-green: #00C48C;
    --color-green-glow: rgba(0, 196, 140, 0.15);
    /* Colour fallbacks — dark theme values used as defaults so the page
       renders correctly even before ThemeManager.init() runs.
       These are overridden by [data-theme="dark"] or [data-theme="light"]. */
    --color-navy: #15122E;
    --color-navy-mid: #1B1840;
    --color-navy-light: #201D4A;
    --color-teal: #00B4A2;
    --color-teal-hover: #009E8E;
    --color-teal-glow: rgba(0, 180, 162, 0.18);
    --surface-bg: #15122E;
    --surface-card: #1B1840;
    --surface-card-hover: #201D4A;
    --surface-elevated: #252258;
    --surface-border: rgba(196,154,60,0.12);
    --surface-border-mid: rgba(196,154,60,0.22);
    --text-primary: #EDE8DB;
    --text-secondary: rgba(237,232,219,0.65);
    --text-muted: rgba(237,232,219,0.38);
    --text-teal: #00B4A2;
    --text-gold: #C49A3C;
    /* Semantic status text colours — readable on transparent/light backgrounds */
    --clr-ok:  #86EFAC;   /* green-300 on dark surface */
    --clr-err: #FCA5A5;   /* red-300   on dark surface */
    --shadow-card: 0 4px 24px rgba(0,0,0,0.35);
    --shadow-hover: 0 8px 40px rgba(0,0,0,0.45);
    --shadow-glow: 0 0 24px rgba(0, 180, 162, 0.18);
    --shell-surface: rgba(21, 18, 46, 0.98);
    --shell-border: rgba(196, 154, 60, 0.18);
}

/* ── Dark theme tokens (default) ───────────────────── */
[data-theme="dark"] {
    /* Brand */
    --color-navy: #15122E;
    --color-navy-mid: #1B1840;
    --color-navy-light: #201D4A;
    --color-teal: #00B4A2;
    --color-teal-hover: #009E8E;
    --color-teal-glow: rgba(0, 180, 162, 0.18);
    /* Surface */
    --surface-bg: #15122E;
    --surface-card: #1B1840;
    --surface-card-hover: #201D4A;
    --surface-elevated: #252258;
    --surface-border: rgba(196,154,60,0.12);
    --surface-border-mid: rgba(196,154,60,0.22);
    /* Text */
    --text-primary: #EDE8DB;
    --text-secondary: rgba(237,232,219,0.65);
    --text-muted: rgba(237,232,219,0.38);
    --text-teal: var(--color-teal);
    --text-gold: var(--color-gold);
    /* Shadows */
    --shadow-card: 0 4px 24px rgba(0,0,0,0.35);
    --shadow-hover: 0 8px 40px rgba(0,0,0,0.45);
    --shadow-glow: 0 0 24px var(--color-teal-glow);
    /* Shell */
    --shell-surface: rgba(21, 18, 46, 0.98);
    --shell-border: rgba(196, 154, 60, 0.18);
}

/* ── Light theme tokens ─────────────────────────────── */
[data-theme="light"] {
    /* Brand */
    --color-navy: #0D9488;
    --color-navy-mid: #E8ECF0;
    --color-navy-light: #DDE2E8;
    --color-teal:       #00897B;
    --color-teal-hover: #00796B;
    --color-teal-glow:  rgba(0,137,123,0.12);
    /* Surface — white cards on cool-neutral page background */
    --surface-bg:           #F0F2F5;
    --surface-base:         #F9FAFB;
    --surface-card:         #FFFFFF;
    --surface-card-hover:   #F7F8FA;
    --surface-elevated:     #FFFFFF;
    --surface-border:       rgba(0,0,0,0.08);
    --surface-border-mid:   rgba(0,0,0,0.14);
    /* Text */
    --text-primary:   #111827;
    --text-secondary: #374151;
    --text-muted:     #6B7280;
    --text-teal:      #00897B;
    /* Semantic status text colours — darkened for light backgrounds */
    --clr-ok:  #15803D;   /* green-700 on light surface */
    --clr-err: #B91C1C;   /* red-700   on light surface */
    --text-gold:      #B45309;
    /* Brand accents — legible on white */
    --color-amber:      #B45309;
    --color-amber-glow: rgba(180,83,9,0.10);
    --color-gold:       #B45309;
    --color-gold-light: #D97706;
    --color-gold-glow:  rgba(180,83,9,0.08);
    --color-gold-border:rgba(180,83,9,0.18);
    /* Shadows — visible lifts on light background */
    --shadow-card:  0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06);
    --shadow-hover: 0 4px 16px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
    --shadow-glow:  0 0 16px rgba(0,137,123,0.15);
    /* Shell-specific tokens consumed by tenant-shell.css */
    --shell-bg:      #F0F2F5;
    --shell-surface: #FFFFFF;
    --shell-border:  rgba(0,0,0,0.10);
    --shell-text:    #111827;
    --shell-text-dim:#6B7280;
}

/* Light-theme grid texture — subtle cool-neutral lines */
[data-theme="light"] body::before {
    background-image:
        linear-gradient(rgba(0,0,0,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.025) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* ── Reset & Base ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--surface-bg);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Subtle grid texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

#app { position: relative; z-index: 1; }

/* ── Typography ──────────────────────────────────────
   DM Sans headings — weights tuned for sans-serif (600/700) rather
   than the previous serif display face (400). */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); font-weight: 600; }
h4 { font-size: var(--text-xl); font-weight: 600; }

p { color: var(--text-secondary); }
a { color: var(--color-teal); text-decoration: none; transition: opacity var(--transition-fast); }
a:hover { opacity: 0.8; }

/* ── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-border-mid); border-radius: var(--radius-pill); }

/* ── RC-3: Invite Capability Selector ─────────────── */
.invite-capability-section {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--surface-border-mid);
}
.invite-capability-section__header {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.invite-capability-section__title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}
.invite-capability-section__hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: 400;
}
.invite-capability-section__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.capability-checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.capability-checkbox-item:hover {
    border-color: var(--surface-border-mid);
    background: var(--surface-card);
}
.capability-checkbox-item:has(input:checked) {
    border-color: var(--color-teal);
    background: rgba(0, 180, 162, 0.06);
}
.capability-checkbox-item__input {
    margin-top: 2px;
    accent-color: var(--color-teal);
    flex-shrink: 0;
}
.capability-checkbox-item__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.capability-checkbox-item__name {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.capability-checkbox-item__desc {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.4;
}
.capability-checkbox-item__badge {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-amber);
    background: var(--color-amber-glow);
    border: 1px solid var(--color-gold-border);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* ── RC-4: Capability Tags (permission group pills) ──── */
.capability-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border-radius: var(--radius-pill);
    background: rgba(0, 180, 162, 0.10);
    color: var(--color-teal);
    border: 1px solid rgba(0, 180, 162, 0.25);
}
.capability-tag--posh {
    background: rgba(167, 139, 250, 0.10);
    color: #A78BFA;
    border-color: rgba(167, 139, 250, 0.25);
}
.capability-tag-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.capability-tag--sm {
    font-size: 9px;
    padding: 1px 6px;
}
.capability-tag--empty {
    color: var(--text-muted, #64748B);
    font-size: 10px;
    font-style: italic;
}

/* ── RC-6: Topic Approval ────────────────────────────────────────────────── */

.approval-summary-bar {
    display: flex; gap: 12px; flex-wrap: wrap; padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    font-size: 12px; color: var(--text-muted, #64748B);
}
.approval-summary-bar__item {
    display: flex; align-items: center; gap: 4px;
}
.approval-summary-bar__dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.approval-summary-bar__dot--pending   { background: var(--amber-500, #f59e0b); }
.approval-summary-bar__dot--stage1    { background: var(--blue-500, #3b82f6); }
.approval-summary-bar__dot--approved  { background: var(--green-500, #22c55e); }
.approval-summary-bar__dot--changes   { background: var(--red-500, #ef4444); }
.approval-summary-bar__dot--revisions { background: var(--amber-500, #f59e0b); }

.approval-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 600; padding: 2px 8px;
    border-radius: 10px; white-space: nowrap;
}
.approval-badge--pending {
    background: #fef3c7; color: #92400e; border: 1px solid #fcd34d;
}
.approval-badge--stage1 {
    background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd;
}
.approval-badge--approved {
    background: #dcfce7; color: #166534; border: 1px solid #86efac;
}
[data-theme="light"] .approval-badge--approved {
    background: #CFFAFE;
    color: #0E7490;
    border-color: #67E8F9;
}
.approval-badge--changes {
    background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5;
}
/* SRV-FE-3 T5.5: Revisions-requested badge — amber, distinct from changes (red) */
.approval-badge--revisions {
    background: #fef3c7; color: #92400e; border: 1px solid #fcd34d;
}

/* SRV-FE-3 T5.5: Approval log note block (collapsible reviewer note in history rows) */
.approval-log-note {
    margin-block-start: 4px;
    font-size: 11px;
    color: var(--adm-text-secondary, #8A8BB0);
}
.approval-log-note summary {
    cursor: pointer;
    color: var(--color-primary, #3b82f6);
    font-size: 11px;
    user-select: none;
}
.approval-log-note-body {
    margin: 4px 0 0;
    padding: 6px 8px;
    background: var(--adm-bg-elevated, rgba(255,255,255,0.06));
    border-inline-start: 2px solid var(--adm-border-mid, rgba(255,255,255,0.1));
    border-radius: 2px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* SRV-FE-3 T5.5: Inline variant label badge inside approval log rows.
   Uses --adm-* tokens (same as adm-badge--neutral) so it renders
   correctly on both dark and light themes. */
.approval-log-variant-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--adm-bg-elevated, rgba(255,255,255,0.06));
    color: var(--adm-text-secondary, #8A8BB0);
    border: 1px solid var(--adm-border-mid, rgba(255,255,255,0.1));
    white-space: nowrap;
}

.reviewer-stamp {
    font-size: 11px; color: var(--text-muted, #64748B);
    display: flex; align-items: center; gap: 4px;
    margin-top: 4px;
}
.reviewer-stamp__icon { font-size: 12px; }

.topic-card {
    padding: 14px 16px; border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.topic-card:last-child { border-bottom: none; }
.topic-card__header {
    display: flex; align-items: flex-start; gap: 12px;
}
.topic-card__body { flex: 1; min-width: 0; }
.topic-card__title {
    font-weight: 600; font-size: 14px; margin: 0;
}
.topic-card__desc {
    font-size: 12px; color: var(--text-muted, #64748B); margin: 4px 0 0;
}
.topic-card__actions {
    display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px;
}

.topic-expand-toggle {
    background: none; border: none; cursor: pointer;
    font-size: 12px; color: var(--teal-600, #0d9488); padding: 4px 0;
    display: inline-flex; align-items: center; gap: 4px;
}
.topic-expand-toggle:hover { text-decoration: underline; }

.topic-content-preview {
    margin-top: 12px; padding: 12px; border-radius: 6px;
    background: var(--surface-elevated, #252258); border: 1px solid var(--surface-border, rgba(196,154,60,0.12));
    color: var(--text-primary, #EDE8DB);
}
.topic-content-preview__scene {
    padding: 8px 0; border-bottom: 1px solid var(--surface-border, rgba(196,154,60,0.12));
    font-size: 13px; line-height: 1.6; color: var(--text-secondary, rgba(237,232,219,0.65));
}
.topic-content-preview__scene:last-child { border-bottom: none; }
.topic-content-preview__scene-label {
    font-size: 10px; font-weight: 600; color: var(--text-gold, #C49A3C);
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;
}

.change-request-note {
    margin-top: 8px; padding: 10px 12px; border-radius: 6px;
    background: var(--color-red-glow, rgba(229,57,53,0.15)); border-left: 3px solid var(--color-red, #E53935);
    font-size: 12px; line-height: 1.5; color: var(--text-primary, #EDE8DB);
}

.four-eyes-error {
    margin-top: 8px; padding: 10px 12px; border-radius: 6px;
    background: var(--color-amber-glow, rgba(196,154,60,0.18)); border-left: 3px solid var(--color-amber, #C49A3C);
    font-size: 12px; line-height: 1.5; color: var(--text-primary, #EDE8DB);
}
.four-eyes-info {
    display: inline-block; padding: 4px 10px; border-radius: 6px;
    background: var(--color-amber-glow, rgba(196,154,60,0.18)); border: 1px solid var(--color-amber, #C49A3C);
    font-size: 11px; line-height: 1.5; color: var(--color-amber, #C49A3C);
}

.approval-filter-bar {
    display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px;
}

/* ── SSML-5A: Speech Hints — tap-point markers, preview, and state labels ── */

/* Inline boundary marker rendered between narration text segments.
   tabindex + role="button" + aria-pressed make it keyboard-operable (WCAG 2.1 AA). */
.ssml-tap-point {
    display: inline;
    cursor: pointer;
    color: var(--color-teal, #00B4A2);
    font-size: 0.8rem;
    padding: 0 3px;
    border-radius: 3px;
    transition: all var(--transition-fast);
    user-select: none;
    border-bottom: 2px solid rgba(0,180,162,0.5);
    background: rgba(0,180,162,0.10);
    font-weight: 600;
}
.ssml-tap-point:hover,
.ssml-tap-point:focus {
    color: var(--color-teal, #00B4A2);
    outline: 2px solid var(--color-teal-glow, rgba(0,180,162,0.18));
    outline-offset: 1px;
}
.ssml-tap-point--active {
    color: var(--color-teal, #00B4A2);
    font-weight: 600;
}

/* Teal inline marker shown in the live preview panel where a pause will occur. */
.ssml-pause-marker {
    display: inline;
    color: var(--color-teal, #00B4A2);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    user-select: none;
}

/* Container for one of the three mutually exclusive hint state messages. */
.ssml-hint-state {
    margin-block-start: var(--space-2);
    font-size: 0.85rem;
}
.ssml-hint-state--empty {
    color: var(--color-teal, #00B4A2);
    font-style: italic;
    padding: 6px 10px;
    background: rgba(0,180,162,0.08);
    border: 1px dashed rgba(0,180,162,0.30);
    border-radius: var(--radius-sm, 4px);
    font-size: 0.8rem;
}
.ssml-hint-state--reset {
    color: var(--color-amber, #C49A3C);
    background: var(--color-amber-glow, rgba(196,154,60,0.18));
    border: 1px solid var(--color-gold-border, rgba(196,154,60,0.18));
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Live preview panel (State 3) */
.ssml-preview-panel {
    margin-block-start: var(--space-3);
    padding: var(--space-3);
    background: rgba(0,180,162,0.06);
    border: 1px solid var(--color-teal-glow, rgba(0,180,162,0.18));
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--text-secondary);
}
.ssml-preview-panel__label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-teal, #00B4A2);
    margin-block-end: var(--space-2);
}
.ssml-preview-panel__legend {
    margin-block-start: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-style: italic;
}

/* Active pauses list (State 3) */
.ssml-pauses-list {
    margin-block-start: var(--space-3);
}
.ssml-pauses-list__header {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-block-end: var(--space-2);
}
.ssml-pauses-list__entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    border-block-end: 1px solid var(--surface-border);
}
.ssml-pauses-list__entry:last-of-type { border-block-end: none; }
.ssml-pauses-list__context {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}
.ssml-pauses-list__actions {
    margin-block-start: var(--space-3);
    display: flex;
    gap: var(--space-2);
}

/* Transient "Saved" / "Save failed" status text */
.ssml-save-status {
    display: inline-block;
    font-size: var(--text-xs);
    margin-inline-start: var(--space-2);
    transition: opacity var(--transition-slow);
}
.ssml-save-status--ok   { color: var(--clr-ok,  #86EFAC); }
.ssml-save-status--err  { color: var(--clr-err, #FCA5A5); }

[data-theme="light"] .ssml-tap-point { color: var(--color-teal, #00897B); border-bottom-color: rgba(0,137,123,0.30); }
[data-theme="light"] .ssml-tap-point:hover,
[data-theme="light"] .ssml-tap-point:focus { color: var(--color-teal, #00897B); }
[data-theme="light"] .ssml-tap-point--active { color: var(--color-teal, #00897B); }
[data-theme="light"] .ssml-pause-marker { color: var(--color-teal, #00897B); }
[data-theme="light"] .ssml-hint-state--reset {
    color: var(--color-amber, #B45309);
    background: var(--color-amber-glow, rgba(180,83,9,0.10));
    border-color: var(--color-gold-border, rgba(180,83,9,0.18));
}
[data-theme="light"] .ssml-preview-panel {
    background: rgba(0,137,123,0.06);
    border-color: var(--color-teal-glow, rgba(0,137,123,0.12));
}

/* ── SSML-5B: Audio Enrichment audit panel in RenderingConfigPage ─────────── */

.ssml-audit-panel {
    margin-block-start: 0.75rem;
    padding: 0.75rem;
    background: var(--surface-elevated, #252258);
    border: 1px solid var(--surface-border, rgba(196,154,60,0.12));
    border-radius: 6px;
    font-size: 0.85rem;
}
.ssml-audit-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary, rgba(237,232,219,0.65));
    padding: 0;
}
.ssml-audit-toggle:focus-visible {
    outline: 2px solid var(--color-teal, #00B4A2);
    outline-offset: 2px;
    border-radius: 2px;
}
.ssml-audit-body { margin-block-start: 0.5rem; }
.ssml-audit-label {
    color: var(--text-secondary, rgba(237,232,219,0.65));
    margin: 0 0 0.25rem;
}
.ssml-audit-label--sarvam { font-style: italic; }
.ssml-chip {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 999px;
    margin-inline-end: 0.25rem;
    margin-block-end: 0.25rem;
}
.ssml-chip--compliance {
    background: rgba(0,180,162,0.18);
    color: var(--color-teal, #00B4A2);
}
.ssml-chip--author {
    background: rgba(99,102,241,0.18);
    color: #A5B4FC;
}
.ssml-chip--compliance-sarvam {
    background: var(--color-amber-glow, rgba(196,154,60,0.18));
    color: var(--color-amber, #C49A3C);
}
.ssml-pre {
    margin-block-start: 0.5rem;
    padding: 0.5rem;
    background: var(--surface-card, #1B1840);
    border-radius: 4px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto;
    color: var(--text-primary, #EDE8DB);
    border: 1px solid var(--surface-border, rgba(196,154,60,0.12));
}

[data-theme="light"] .ssml-audit-panel {
    background: #f8fafc;
    border-color: #e2e8f0;
}
[data-theme="light"] .ssml-audit-toggle { color: #475569; }
[data-theme="light"] .ssml-audit-label  { color: #475569; }
[data-theme="light"] .ssml-chip--compliance {
    background: #ccfbf1;
    color: #065f46;
}
[data-theme="light"] .ssml-chip--author {
    background: #e0e7ff;
    color: #3730a3;
}
[data-theme="light"] .ssml-chip--compliance-sarvam {
    background: #fef3c7;
    color: #92400e;
}
[data-theme="light"] .ssml-pre {
    background: #f1f5f9;
    color: #1e293b;
    border-color: #e2e8f0;
}

/* ── SAPL-1: Per-scene audio player widget ─────────────────────────────────
   Rendered inside a .scene-block when audio status = 'ready'.
   Uses logical properties for RTL safety. No left/right hardcoded. */
.scene-audio-container {
    margin-block-start: var(--space-3);
    padding: var(--space-3);
    background: rgba(0, 180, 162, 0.06);
    border: 1px solid rgba(0, 180, 162, 0.18);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.scene-audio-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-teal, #00B4A2);
    letter-spacing: 0.02em;
}

.scene-audio-player {
    width: 100%;
    /* Respect prefers-reduced-motion — audio controls are purely interactive,
       so no animation is added. The browser's native controls are used. */
}

/* ── SAPL-1: Re-synthesise button states ────────────────────────────────── */
.scene-resynth-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-block-start: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-secondary, rgba(237,232,219,0.65));
    background: none;
    border: 1px solid var(--surface-border, rgba(196,154,60,0.12));
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast),
                background var(--transition-fast);
}

.scene-resynth-btn:hover:not(:disabled) {
    color: var(--color-teal, #00B4A2);
    border-color: var(--color-teal, #00B4A2);
    background: var(--color-teal-glow, rgba(0,180,162,0.08));
}

.scene-resynth-btn:focus-visible {
    outline: 2px solid var(--color-teal, #00B4A2);
    outline-offset: 2px;
}

.scene-resynth-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.scene-resynth-btn--failed {
    color: var(--clr-err, #FCA5A5);
    border-color: rgba(252, 165, 165, 0.35);
}

.scene-resynth-btn--failed:hover:not(:disabled) {
    color: var(--clr-err, #FCA5A5);
    border-color: rgba(252, 165, 165, 0.55);
    background: rgba(252, 165, 165, 0.08);
}

/* ── SAPL-1: Inline per-scene messages (dismissable) ────────────────────── */
.scene-resynth-msg {
    margin-block-start: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    justify-content: space-between;
}

.scene-resynth-msg--info {
    background: var(--color-teal-glow, rgba(0,180,162,0.10));
    color: var(--color-teal, #00B4A2);
    border: 1px solid rgba(0, 180, 162, 0.25);
}

.scene-resynth-msg--warn {
    background: var(--color-amber-glow, rgba(196,154,60,0.12));
    color: var(--color-amber, #C49A3C);
    border: 1px solid rgba(196, 154, 60, 0.28);
}

.scene-resynth-msg--error {
    background: var(--color-red-glow, rgba(229,57,53,0.12));
    color: var(--clr-err, #FCA5A5);
    border: 1px solid rgba(229, 57, 53, 0.28);
}

.scene-resynth-msg__dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    font-size: var(--text-sm);
    padding: 0 var(--space-1);
    line-height: 1;
}

.scene-resynth-msg__dismiss:hover { opacity: 1; }

.scene-resynth-msg__text { flex: 1; }

/* Soft-timeout inline link */
.scene-resynth-check-again {
    color: var(--color-teal, #00B4A2);
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    font-size: inherit;
    padding: 0;
    font-family: inherit;
}

.scene-resynth-check-again:focus-visible {
    outline: 2px solid var(--color-teal, #00B4A2);
    outline-offset: 2px;
}

/* ── SAPL-1: Non-dismissable approval block banner ──────────────────────── */
/* Injected into the approval modal when 409 SCENE_RESYNTH_IN_PROGRESS fires.
   Non-dismissable = no X button; resolves only on successful re-attempt. */
.sapl-approval-block {
    margin-block-start: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-amber-glow, rgba(196,154,60,0.14));
    border: 1px solid rgba(196, 154, 60, 0.38);
    color: var(--color-amber, #C49A3C);
    font-size: var(--text-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    /* role="alert" on the element ensures screen readers announce it */
}

.sapl-approval-block__icon {
    flex-shrink: 0;
    margin-block-start: 1px;
}

[data-theme="light"] .scene-audio-container {
    background: rgba(0, 137, 123, 0.05);
    border-color: rgba(0, 137, 123, 0.18);
}

[data-theme="light"] .scene-resynth-btn {
    color: #475569;
    border-color: #e2e8f0;
}

[data-theme="light"] .scene-resynth-btn:hover:not(:disabled) {
    color: var(--color-teal, #00897B);
    border-color: var(--color-teal, #00897B);
}

[data-theme="light"] .scene-resynth-btn--failed {
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.30);
}

[data-theme="light"] .scene-resynth-msg--info {
    background: #e6faf8;
    color: #065f46;
    border-color: rgba(0, 137, 123, 0.22);
}

[data-theme="light"] .scene-resynth-msg--warn {
    background: #fef9ec;
    color: #92400e;
    border-color: rgba(180, 83, 9, 0.22);
}

[data-theme="light"] .scene-resynth-msg--error {
    background: #fef2f2;
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.22);
}

[data-theme="light"] .sapl-approval-block {
    background: #fef9ec;
    border-color: rgba(180, 83, 9, 0.28);
    color: #92400e;
}

/* ── CLRX: Consent Ledger CXO Redesign ───────────────────────────────────── */

/* KPI header tiles */
.ap6-kpi-header {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.ap6-kpi-tile {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    padding: 16px;
    transition: border-color 0.2s;
}
.ap6-kpi-tile__label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.ap6-kpi-tile__value { font-size: 28px; font-weight: 700; line-height: 1; margin-bottom: 4px; color: var(--text-primary); }
.ap6-kpi-tile__subtitle { font-size: 11px; color: var(--text-muted); }
.ap6-kpi-tile--loading .ap6-kpi-tile__value { color: var(--text-muted); animation: ap6-pulse 1.4s ease-in-out infinite; }
.ap6-kpi-tile--ok { border-color: var(--color-green); }
.ap6-kpi-tile--ok .ap6-kpi-tile__value { color: var(--color-green); }
.ap6-kpi-tile--warning { border-color: var(--color-amber); }
.ap6-kpi-tile--warning .ap6-kpi-tile__value { color: var(--color-amber); }
.ap6-kpi-tile--critical { border-color: var(--color-red); }
.ap6-kpi-tile--critical .ap6-kpi-tile__value { color: var(--color-red); }
.ap6-kpi-tile--grey { border-color: var(--surface-border); }
.ap6-kpi-tile--grey .ap6-kpi-tile__value { color: var(--text-muted); }
@keyframes ap6-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

[data-theme="light"] .ap6-kpi-tile {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.09);
}
[data-theme="light"] .ap6-kpi-tile--ok     { border-color: var(--color-green); }
[data-theme="light"] .ap6-kpi-tile--warning  { border-color: var(--color-amber); }
[data-theme="light"] .ap6-kpi-tile--critical { border-color: var(--color-red); }
[data-theme="light"] .ap6-kpi-tile--grey    { border-color: rgba(0, 0, 0, 0.09); }

/* Badge visual hierarchy — size-differentiates GIVEN < WITHDRAWN < GAP.
   !important required: adm-badge--success base class sets display:block / width:100% */
.ap6-badge--given     { font-size: 11px; padding: 2px 6px;  font-weight: 500; display: inline-block !important; width: fit-content !important; }
.ap6-badge--withdrawn { font-size: 12px; padding: 3px 8px;  font-weight: 600; display: inline-block !important; width: fit-content !important; }
.ap6-badge--gap       { font-size: 13px; padding: 4px 10px; font-weight: 700; display: inline-block !important; width: fit-content !important; }

/* Regulatory callout bar */
.ap6-regulatory-callout {
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 12px;
    margin-bottom: 12px;
    line-height: 1.4;
}
.ap6-regulatory-callout--warning {
    background: #fffbeb;
    border: 1px solid #f59e0b;
    color: #92400e;
}
.ap6-regulatory-callout--critical {
    background: #fef2f2;
    border: 1px solid #ef4444;
    color: #7f1d1d;
    font-weight: 600;
}

/* Gap panel controls bar (lookback selector) */
.ap6-gap-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }

/* Purpose code monospace fallback for unknown codes — constrained to prevent column overflow */
.ap6-purpose-code { font-size: 10px; color: var(--text-muted); display: inline-block; vertical-align: middle;
                    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Purpose + source chip inline row — keeps chip next to label despite column flex layout */
.ap6-purpose-group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; max-width: 100%; }

/* Source origin chips */
.ap6-source-chip { display: inline-block; font-size: 10px; padding: 2px 7px; border-radius: 10px; font-weight: 600; vertical-align: middle; flex-shrink: 0; }
.ap6-source-chip--posh     { background: #ede9fe; color: #5b21b6; }
.ap6-source-chip--platform { background: #dbeafe; color: #1e40af; }
.ap6-source-chip--tenant   { background: #f3f4f6; color: #374151; }

/* Events risk labels */
.ap6-risk-label { font-size: 10px; padding: 2px 7px; border-radius: 10px; margin-left: 8px; font-weight: 600; vertical-align: middle; }
.ap6-risk-label--amber { background: #fffbeb; color: #92400e; border: 1px solid #f59e0b; }
.ap6-risk-label--red   { background: #fef2f2; color: #7f1d1d; border: 1px solid #ef4444; }