/* ============================================================
   Vakio Component Library
   ============================================================ */
/* ── Variable bridge: map new token names → existing design-system tokens ── */
:root {
    --color-surface: var(--surface-card);
    --color-surface-alt: var(--surface-elevated);
    --color-border: var(--surface-border);
    --color-border-subtle: var(--surface-border);
    --color-border-hover: var(--surface-border-mid);
    --color-text: var(--text-primary);
    --color-muted: var(--text-muted);
    --color-accent: var(--color-teal);
    --color-accent-text: var(--color-teal);
    --color-accent-subtle: var(--color-teal-glow);
    --color-accent-border: var(--color-teal);
    --color-success: var(--color-green);
    --color-success-text: var(--color-green);
    --color-success-subtle: var(--color-green-glow);
    --color-success-border: var(--color-green);
    --color-warning-text: var(--color-amber);
    --color-warning-subtle: var(--color-amber-glow);
    --color-warning-border: var(--color-amber);
    --color-danger: var(--color-red);
    --color-danger-text: var(--color-red);
    --color-danger-subtle: var(--color-red-glow);
    --color-danger-border: var(--color-red);
    --color-danger-hover: #c62828;
    --color-skeleton: var(--surface-elevated);
    --radius-full: var(--radius-pill);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
    --shadow-md: var(--shadow-card);
    --shadow-lg: var(--shadow-hover);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.5);
    --spinner-xs-size: 12px;
}

/* ── Light theme: semantic colour token overrides ───────────────────── */
[data-theme="light"] {
    --color-accent-text:    #0E7490;
    --color-accent-subtle:  rgba(14,116,144,0.10);
    --color-accent-border:  #0E7490;
    --color-success-text:   #0E7490;
    --color-success-subtle: rgba(14,116,144,0.10);
    --color-success-border: #0E7490;
    --color-green:          #0E7490;
    --color-green-glow:     rgba(14,116,144,0.10);
}

/* ── Buttons ───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 0.625rem var(--space-5);
  border: none; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
  cursor: pointer; transition: all var(--transition-base);
  white-space: nowrap; user-select: none; outline: none;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary {
  background: var(--color-teal); color: var(--color-navy);
  box-shadow: 0 0 0 0 var(--color-teal-glow);
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-teal-hover);
  box-shadow: 0 0 20px var(--color-teal-glow);
  transform: translateY(-1px);
}
.btn-secondary {
  background: var(--surface-elevated); color: var(--text-primary);
  border: 1px solid var(--surface-border-mid);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--surface-card-hover); border-color: var(--color-teal);
}
.btn-ghost {
  background: transparent; color: var(--text-secondary);
}
.btn-ghost:hover:not(:disabled) { color: var(--text-primary); background: var(--surface-elevated); }
.btn-danger { background: var(--color-red); color: #fff; }
.btn-sm { padding: 0.375rem var(--space-3); font-size: var(--text-xs); }
.btn-lg { padding: 0.875rem var(--space-8); font-size: var(--text-base); }
.btn-icon { padding: 0.5rem; border-radius: var(--radius-sm); }

/* ── Cards ─────────────────────────────────────────── */
.card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition: all var(--transition-base);
  overflow-wrap: break-word;
}
.card-hover:hover {
  border-color: var(--surface-border-mid);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* ── Form controls ─────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); }
.form-input {
  background: var(--surface-elevated);
  border: 1px solid var(--surface-border-mid);
  border-radius: var(--radius-md);
  padding: 0.75rem var(--space-4);
  color: var(--text-primary);
  font-family: var(--font-body); font-size: var(--text-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none; width: 100%;
}
.form-input:focus {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px var(--color-teal-glow);
}
.form-input::placeholder { color: var(--text-muted); }
.form-error { font-size: var(--text-sm); color: var(--color-red); }
textarea.form-input { resize: vertical; min-height: 80px; }

/* ── Badge ─────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge-teal   { background: var(--color-teal-glow); color: var(--color-teal); }
.badge-amber {
    background: var(--color-gold-glow);
    color: var(--color-gold);
}
.badge-red    { background: var(--color-red-glow); color: var(--color-red); }
.badge-green  { background: var(--color-green-glow); color: var(--color-green); }
.badge-muted  { background: var(--surface-elevated); color: var(--text-muted); }
/* PRD-033 UMS-1 T1.2 — Company Knowledge / Platform Reference source badge.
   Aliases badge-teal (existing teal token palette) so 'blue'-labelled markup
   in ModuleDetailPage._kbSourcesHtml and the tenant-KB source badge render
   with a distinct hue rather than falling back to the base .badge styling. */
.badge-blue   { background: var(--color-teal-glow); color: var(--color-teal); }

/* ── Spinner ───────────────────────────────────────── */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--surface-border-mid);
  border-top-color: var(--color-teal);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
.spinner-lg { width: 36px; height: 36px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Progress bar ──────────────────────────────────── */
.progress-track {
  width: 100%; height: 4px;
  background: var(--surface-elevated);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-teal), var(--color-teal-hover));
  border-radius: var(--radius-pill);
  transition: width var(--transition-slow);
}
.progress-indeterminate .progress-fill {
  width: 40% !important;
  animation: progress-slide 1.4s ease-in-out infinite;
}
@keyframes progress-slide {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}

/* ── ProfileDrawer — right-side slide-over panel (T5) ── */
.pdr-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 300;
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.pdr-backdrop.pdr-open {
    display: block;
    opacity: 1;
}

.pdr-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 85vw);
    background: var(--surface-bg, #15122E);
    border-left: 1px solid var(--color-gold-border, rgba(196,154,60,0.18));
    z-index: 301;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    padding: 20px 20px 32px;
}
.pdr-panel.pdr-open {
    transform: translateX(0);
}

/* Close button */
.pdr-close {
    align-self: flex-end;
    background: none;
    border: none;
    color: var(--text-muted, #8A8078);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    border-radius: 4px;
    margin-bottom: 8px;
    transition: color 0.15s, background 0.15s;
}
.pdr-close:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }

/* Identity block */
.pdr-identity {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}
.pdr-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-teal, #00B4A2);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}
.pdr-identity-text { flex: 1; min-width: 0; }
.pdr-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.pdr-designation {
    font-size: 12px;
    color: var(--color-gold, #C49A3C);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pdr-tenant {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted, #8A8078);
    flex-wrap: wrap;
}
.pdr-tenant-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-teal, #00B4A2);
    flex-shrink: 0;
}
.pdr-role-chip {
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: rgba(255,255,255,0.07);
    color: var(--text-primary);
}
.pdr-role-chip.pdr-role-owner  { background: rgba(196,154,60,0.18); color: var(--color-gold); }
.pdr-role-chip.pdr-role-admin  { background: rgba(0,180,162,0.15);  color: var(--color-teal); }

/* Stats section */
.pdr-stats-section { margin-bottom: 16px; }
.pdr-stats-loading {
    display: flex; justify-content: center; padding: 12px 0;
}
.pdr-spinner {
    width: 20px; height: 20px;
    border: 2px solid rgba(255,255,255,0.1);
    border-top-color: var(--color-teal, #00B4A2);
    border-radius: 50%;
    animation: pdr-spin 0.7s linear infinite;
}
@keyframes pdr-spin { to { transform: rotate(360deg); } }

.pdr-stat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 13px;
}
.pdr-stat-row:last-child { border-bottom: none; }
.pdr-stat-icon { font-size: 15px; flex-shrink: 0; }
.pdr-stat-label { flex: 1; color: var(--text-muted, #8A8078); }
.pdr-stat-value { font-weight: 700; color: var(--text-primary); }

/* Portfolio CTA */
.pdr-cta { margin-bottom: 16px; }
.pdr-btn-portfolio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--color-teal, #00B4A2), #007A6E);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
}
.pdr-btn-portfolio:hover  { opacity: 0.9; }
.pdr-btn-portfolio:active { transform: scale(0.98); }

/* Divider */
.pdr-divider {
    height: 1px;
    background: var(--color-gold-border, rgba(196,154,60,0.18));
    margin: 4px 0 16px;
}

/* Quick links */
.pdr-links { display: flex; flex-direction: column; gap: 2px; }
.pdr-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 8px;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.pdr-link:hover { background: rgba(255,255,255,0.05); }
.pdr-link svg   { opacity: 0.7; flex-shrink: 0; }
.pdr-link--danger       { color: var(--color-danger, #ef4444); }
.pdr-link--danger:hover { background: rgba(239,68,68,0.08); }
.pdr-link--danger svg   { opacity: 0.8; }

/* ── App shell (global header + footer layout) ──────── */
#vakio-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#vakio-main-slot {
    flex: 1;
}

/* Profile avatar button in AppHeader */
.app-header-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary, #00B4A2);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}
.app-header-avatar:hover,
.app-header-avatar:focus-visible {
    border-color: rgba(255,255,255,0.5);
    box-shadow: 0 0 0 3px rgba(0,180,162,0.3);
    outline: none;
}

/* ── Top nav ───────────────────────────────────────── */
.topnav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-8);
    height: 64px;
    background: rgba(21,18,46,0.96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-gold-border);
}

.topnav-brand {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.01em;
    line-height: 1;
}

.topnav-brand-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    line-height: 1;
    cursor: pointer;
}

.topnav-brand-hindi {
    font-family: var(--font-devanagari);
    font-size: 10px;
    font-weight: 500;
    color: var(--color-gold);
    letter-spacing: 0.04em;
    opacity: 0.9;
}

/* Hero variant — auth pages (login, forgot password, change password) */
.topnav-brand--hero {
    font-size: 32px;
}

.topnav-role-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

    .topnav-role-badge.admin {
        background: rgba(167,139,250,0.08);
        border: 1px solid rgba(167,139,250,0.2);
        color: #A78BFA;
    }

    .topnav-role-badge.employee {
        background: rgba(52,211,153,0.08);
        border: 1px solid rgba(52,211,153,0.2);
        color: #34D399;
    }

    .topnav-role-badge.icc {
        background: rgba(96,165,250,0.08);
        border: 1px solid rgba(96,165,250,0.2);
        color: #60A5FA;
    }

    .topnav-role-badge.chro {
        background: rgba(196,154,60,0.10);
        border: 1px solid rgba(196,154,60,0.18);
        color: #C49A3C;
    }

    .topnav-role-badge.user {
        background: rgba(52,211,153,0.08);
        border: 1px solid rgba(52,211,153,0.2);
        color: #34D399;
    }

.topnav-role-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ── Topnav links ───────────────────────────────────── */
.topnav-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.topnav-link:hover {
    background: rgba(255,255,255,0.07);
    color: var(--text-primary);
}
.topnav-link--active {
    color: var(--color-teal);
    background: rgba(0,180,162,0.1);
}

/* ── Dashboard shell — full-height flex column ─────── */
.dashboard-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.dashboard-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── Site footer ───────────────────────────────────── */
.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-8);
    height: 36px;
    background: rgba(21,18,46,0.98);
    border-top: 1px solid rgba(196,154,60,0.10);
    flex-shrink: 0;
}

.site-footer-copy {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.site-footer-links {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

    .site-footer-links a {
        font-size: var(--text-xs);
        color: var(--text-muted);
        text-decoration: none;
        transition: color var(--transition-fast);
    }

        .site-footer-links a:hover {
            color: var(--color-gold);
        }

.site-footer-sep {
    width: 1px;
    height: 10px;
    background: var(--surface-border);
}

.site-footer-conf {
    font-size: var(--text-xs);
    color: var(--color-gold-dim);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
/* ── Topnav brand + role additions ────────────────── */
.topnav-brand-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    line-height: 1;
    cursor: pointer;
}

.topnav-brand-hindi {
    font-family: 'Noto Serif Devanagari', serif;
    font-size: 9px;
    font-weight: 500;
    color: var(--color-amber);
    letter-spacing: 0.04em;
    opacity: 0.85;
}

.topnav-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

    .topnav-role-badge.admin {
        background: rgba(167,139,250,0.08);
        border: 1px solid rgba(167,139,250,0.2);
        color: #A78BFA;
    }

    .topnav-role-badge.employee {
        background: rgba(52,211,153,0.08);
        border: 1px solid rgba(52,211,153,0.2);
        color: #34D399;
    }

    .topnav-role-badge.icc {
        background: rgba(96,165,250,0.08);
        border: 1px solid rgba(96,165,250,0.2);
        color: #60A5FA;
    }

    .topnav-role-badge.chro {
        background: rgba(196,154,60,0.10);
        border: 1px solid rgba(196,154,60,0.18);
        color: #C49A3C;
    }

    .topnav-role-badge.user {
        background: rgba(52,211,153,0.08);
        border: 1px solid rgba(52,211,153,0.2);
        color: #34D399;
    }

.topnav-role-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ── Site footer ───────────────────────────────────── */
.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-8);
    height: 36px;
    background: rgba(21,18,46,0.98);
    border-top: 1px solid rgba(196,154,60,0.10);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.site-footer-copy {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.site-footer-links {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

    .site-footer-links a {
        font-size: var(--text-xs);
        color: var(--text-muted);
        text-decoration: none;
        transition: color var(--transition-fast);
    }

        .site-footer-links a:hover {
            color: var(--color-amber);
        }

.site-footer-sep {
    width: 1px;
    height: 10px;
    background: var(--surface-border);
}

.site-footer-conf {
    font-size: var(--text-xs);
    color: var(--color-amber);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.6;
}

    .topnav-actions { display: flex; align-items: center; gap: var(--space-3); }

/* ── Alert ─────────────────────────────────────────── */
.alert {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.alert-error   { background: var(--color-red-glow); color: var(--color-red); border: 1px solid var(--color-red); }
.alert-success { background: var(--color-green-glow); color: var(--color-green); border: 1px solid var(--color-green); }
.alert-info    { background: var(--color-teal-glow); color: var(--color-teal); border: 1px solid var(--color-teal); }

/* ── Utility ───────────────────────────────────────── */
.hidden  { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); }
.flex    { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mb-4  { margin-bottom: var(--space-4); }
.text-muted   { color: var(--text-muted); font-size: var(--text-sm); }
.text-sm      { font-size: var(--text-sm); }
.font-semibold { font-weight: 600; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-full { width: 100%; }
.loading-text { color: var(--text-muted); }
.text-danger  { color: var(--color-red); }
.text-success { color: var(--color-green); }
.text-link    { color: var(--color-teal); text-decoration: underline; }
.td-empty          { color: var(--text-muted); padding: 12px 8px; }
.form-error-inline { color: var(--color-red); font-size: 12px; margin-top: 6px; }
.empty-state-center { padding: 24px; text-align: center; }
.loading-center    { padding: 32px; text-align: center; }
.modules-grid      { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 360px)); gap: 16px; }
.audit-filter-grid { display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: 8px; align-items: end; }
.pg-two-col        { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: flex-start; }
.pg-empty-hint     { padding: 18px; color: var(--text-muted); font-size: 13px; }
.bil-placeholder   { padding: 20px; }
.bil-info-grid     { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bil-credits-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; }
.cd-overview-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.comp-detail-grid  { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; }
.pgd-layout        { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: flex-start; }
.feeler-kpi-grid   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.feeler-rec-list   { margin: 0; padding-left: 16px; }
.feeler-rec-li     { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.mod-section-subtitle { margin: 0 0 12px; font-size: 13px; }
.tbl-act-col       { padding: 6px 8px; }
.btn-retry-sm      { margin-left: 6px; font-size: 10px; padding: 1px 6px; }
.tbl-upload-label  { cursor: pointer; font-size: 11px; }
.tbl-rm-btn        { background: none; border: none; cursor: pointer; font-size: 11px; margin-left: 6px; }

/* ── UX-GAP-1 Sprint additions ─────────────────────── */
.btn-xs              { padding: 3px 10px; font-size: var(--text-xs); }
.page-header__actions { display: flex; gap: 8px; align-items: center; }
.card--filter        { padding: 12px; margin-bottom: 12px; }
.card--padded        { padding: 16px; }
.audit-thead-row     { border-bottom: 2px solid var(--surface-border-mid); }
.audit-th            { text-align: left; padding: 6px 8px; }
.audit-row           { border-bottom: 1px solid var(--surface-border); }
.audit-td            { padding: 6px 8px; }
.audit-pagination-row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: var(--text-xs); }
.audit-pagination-nav { display: flex; gap: 6px; }
.audit-actor-wrap { position: relative; }
.audit-actor-sug { position: absolute; top: 100%; left: 0; right: 0; z-index: 200; margin: 2px 0 0; padding: 4px 0; list-style: none; background: var(--surface-elevated); border: 1px solid var(--surface-border-mid); border-radius: var(--radius-md); box-shadow: 0 4px 12px rgba(0,0,0,.35); max-height: 240px; overflow-y: auto; }
.audit-actor-sug__item { display: flex; flex-direction: column; padding: 7px 12px; cursor: pointer; gap: 2px; }
.audit-actor-sug__item:hover { background: var(--surface-border); }
.audit-actor-sug__name { font-size: var(--text-sm); color: var(--text-primary); }
.audit-actor-sug__email { font-size: var(--text-xs); color: var(--text-muted); }
.audit-actor-uuid { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.cd-section-title    { margin: 0 0 12px; font-size: 14px; }
.cd-risk-section     { margin-bottom: 20px; }
.cd-bar-row          { display: flex; justify-content: space-between; font-size: var(--text-xs); margin-bottom: 4px; }
.cd-bar-track        { background: var(--surface-border); border-radius: 6px; height: 10px; overflow: hidden; }
.cd-bar-sub          { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.cd-th               { text-align: left; padding: 6px 8px; }
.cd-status-td        { padding: 6px 8px; }
.cd-status-td--overdue { padding: 6px 8px; color: var(--color-red); text-transform: capitalize; }
.cd-status-td--muted   { padding: 6px 8px; color: var(--text-muted); }
.cd-risk-footer      { text-align: right; font-size: var(--text-xs); color: var(--text-muted); margin: 0; }
.ctx-panel           { background: var(--surface-elevated); border-radius: var(--radius-lg); padding: 28px 32px; width: 520px; max-width: 96vw; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-hover); }
.ctx-panel-header    { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ctx-panel-title     { margin: 0; font-size: 16px; font-weight: 700; }
.ctx-panel-desc      { color: var(--text-secondary); font-size: var(--text-sm); margin-bottom: 20px; }
.ctx-panel-grid      { display: grid; gap: 14px; }
.ctx-panel-hint      { font-size: var(--text-xs); color: var(--text-muted); }
.ctx-label           { font-size: var(--text-xs); font-weight: 600; color: var(--text-primary); text-transform: uppercase; letter-spacing: .5px; }
.ctx-msg-box         { margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: var(--text-sm); }
.ctx-footer          { display: flex; gap: 10px; margin-top: 24px; justify-content: flex-end; }
.ws-doc-info         { display: flex; align-items: center; gap: 8px; }
.ws-doc-info--wrap   { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topics-heading-row  { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.topics-heading      { margin: 0; }
.topics-intro-text   { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-5); }

/* Feeler pages */
.feeler-wrap          { max-width: 480px; margin: 0 auto; }
.feeler-wrap--md      { max-width: 520px; margin: 0 auto; }
.feeler-wrap--lg      { max-width: 600px; margin: 0 auto; }
.feeler-title         { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.feeler-subtitle      { margin: 0 0 20px; font-size: 13px; color: var(--text-secondary); }
.feeler-label         { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.feeler-token-input   { margin: 6px 0 12px; }
.feeler-result-card   { background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: 10px; padding: 16px; }
.feeler-result-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.feeler-result-title  { font-weight: 700; color: var(--text-primary); }
.feeler-meta          { margin: 0 0 6px; font-size: 12px; color: var(--text-secondary); }
.feeler-meta--spaced  { margin: 0 0 12px; font-size: 12px; color: var(--text-secondary); }
.feeler-divider       { border-top: 1px solid var(--surface-border); padding-top: 10px; }
.feeler-tl-label      { margin: 0 0 8px; font-size: 11px; font-weight: 600; color: var(--text-primary); }
.feeler-tl-item       { display: flex; gap: 10px; margin-bottom: 8px; align-items: flex-start; }
.feeler-tl-dot        { width: 8px; height: 8px; border-radius: 50%; background: var(--color-gold); flex-shrink: 0; margin-top: 4px; }
.feeler-tl-date       { font-size: 11px; color: var(--text-muted); }
.feeler-tl-text       { margin: 0; font-size: 12px; color: var(--text-secondary); }
.feeler-chat-hd       { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.feeler-chat-nm       { margin: 0; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.feeler-chat-sub      { margin: 0; font-size: 11px; color: var(--text-muted); }
.feeler-chat-win      { height: 260px; overflow-y: auto; background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.feeler-chat-input-row { display: flex; gap: 8px; margin-top: 10px; }
.feeler-chat-disc     { margin: 8px 0 0; font-size: 11px; color: var(--text-muted); text-align: center; }
.feeler-msg-row       { display: flex; justify-content: flex-start; }
.feeler-msg-row--user { justify-content: flex-end; }
.feeler-msg-bubble    { max-width: 75%; padding: 9px 13px; border-radius: 12px 12px 12px 4px; background: var(--surface-card); color: var(--text-primary); font-size: 13px; line-height: 1.45; border: 1px solid var(--surface-border); }
.feeler-msg-bubble--user { border-radius: 12px 12px 4px 12px; background: var(--color-teal); color: var(--text-primary); border: none; }
.feeler-findings-hd   { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.feeler-findings-left .feeler-findings-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.feeler-findings-left .feeler-findings-meta  { margin: 0; font-size: 11px; color: var(--text-muted); }
.feeler-loader        { padding: 24px; text-align: center; color: var(--color-teal); }
.feeler-loader-track  { margin-top: 6px; height: 3px; background: var(--surface-border); border-radius: 4px; overflow: hidden; }
.feeler-loader-fill   { height: 100%; background: var(--color-teal); width: 0%; transition: width 1.8s ease; border-radius: 4px; }
.feeler-findings-card { background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: 10px; overflow: hidden; }
.feeler-findings-meta-hd { background: var(--surface-elevated); padding: 12px 16px; border-bottom: 1px solid var(--surface-border); }
.feeler-findings-meta-row { display: flex; gap: 10px; }
.feeler-fnd-label     { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.feeler-findings-body { padding: 14px 16px; }
.feeler-sec-title     { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--text-primary); }
.feeler-sec-text      { margin: 0 0 14px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.feeler-findings-footer { padding: 10px 16px; background: var(--surface-elevated); border-top: 1px solid var(--surface-border); font-size: 11px; color: var(--text-muted); display: flex; gap: 10px; }
.feeler-report-hd     { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.feeler-report-title  { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.feeler-report-meta   { margin: 0; font-size: 11px; color: var(--text-muted); }
.feeler-report-btns   { display: flex; gap: 8px; }
.feeler-kpi-cell      { background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: 8px; padding: 10px; text-align: center; }
.feeler-kpi-val       { margin: 0 0 2px; font-size: 20px; font-weight: 800; }
.feeler-kpi-val--teal { color: var(--color-teal); }
.feeler-kpi-val--green { color: var(--color-green); }
.feeler-kpi-val--red  { color: var(--color-red); }
.feeler-kpi-val--gold { color: var(--color-gold); }
.feeler-kpi-label     { margin: 0; font-size: 11px; color: var(--text-secondary); }
.feeler-nature-card   { background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.feeler-nature-title  { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: var(--text-primary); }
.feeler-nature-row    { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.feeler-nature-label  { font-size: 12px; color: var(--text-primary); width: 90px; text-transform: capitalize; }
.feeler-nature-track  { flex: 1; height: 6px; background: var(--surface-border); border-radius: 4px; overflow: hidden; }
.feeler-nature-val    { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.feeler-dept-card     { background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: 10px; overflow: hidden; }
.feeler-dept-hd       { padding: 10px 14px; background: var(--surface-elevated); border-bottom: 1px solid var(--surface-border); }
.feeler-dept-title    { margin: 0; font-size: 12px; font-weight: 700; color: var(--text-primary); }
.feeler-dept-th       { text-align: left; padding: 8px 14px; color: var(--text-secondary); font-weight: 600; }
.feeler-dept-td       { padding: 8px 14px; color: var(--text-primary); }
.feeler-dept-td--right { padding: 8px 14px; text-align: right; font-weight: 600; color: var(--text-primary); }
.feeler-dept-row      { border-top: 1px solid var(--surface-border); }
.feeler-toast         { margin-top: 12px; padding: 10px 14px; background: var(--color-green-glow); border: 1px solid var(--color-green); border-radius: 8px; font-size: 13px; color: var(--color-green); }

/* ── Animations ────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
.animate-fade-in  { animation: fadeIn var(--transition-slow) both; }
.animate-slide-down { animation: slideDown var(--transition-base) both; }
.animate-pulse    { animation: pulse 2s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════════════════════════
   1. Dashboard
══════════════════════════════════════════════════════════════════════════ */

.dashboard-page {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.page-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 var(--space-1);
}

.page-subtitle {
    color: var(--color-muted);
    font-size: var(--text-sm);
    margin: 0;
}

/* ── POSH module entry banner ──────────────────────────────── */
.posh-entry-banner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(135deg, var(--surface-card), var(--surface-card-hover));
    border-left: 3px solid var(--color-gold);
    border: 1px solid var(--color-gold-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.posh-entry-banner__left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
}

.posh-entry-banner__icon {
    font-size: 22px;
    flex-shrink: 0;
}

.posh-entry-banner__title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.posh-entry-banner__sub {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: 1px;
}

.posh-entry-banner__badges {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-shrink: 0;
}
/* ── Document list ─────────────────────────────────────────── */
.docs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.doc-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: box-shadow 150ms ease, border-color 150ms ease;
}

    .doc-card:hover {
        box-shadow: var(--shadow-md);
        border-color: var(--color-border-hover);
    }

.doc-card--processing {
    border-color: var(--color-warning-border);
}

.doc-card--failed {
    border-color: var(--color-danger-border);
}

.doc-card--removing {
    animation: card-slide-out 280ms ease forwards;
}

@keyframes card-slide-out {
    to {
        opacity: 0;
        transform: translateX(16px);
        max-height: 0;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
}

.doc-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    color: var(--color-accent);
}

    .doc-card__icon svg {
        width: 20px;
        height: 20px;
    }

.doc-card__content {
    flex: 1;
    min-width: 0;
}

.doc-card__name-row {
    margin-bottom: var(--space-2);
}

.doc-card__name {
    font-weight: 600;
    font-size: var(--text-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.doc-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.doc-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.doc-card__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
}

    .badge svg {
        width: 12px;
        height: 12px;
    }

.badge--category {
    background: var(--color-accent-subtle);
    color: var(--color-accent-text);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

.badge--topics {
    background: var(--color-success-subtle);
    color: var(--color-success-text);
}

.badge-confidence {
    opacity: 0.7;
    margin-left: 2px;
}

.badge--confirmed {
    background: var(--color-success-subtle);
    color: var(--color-success-text);
}

.badge-confirmed-tick {
    margin-left: 4px;
    font-size: 11px;
}

/* ── Status chips ────────────────────────────────────────────── */
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
}

.status-chip--processing {
    background: var(--color-warning-subtle);
    color: var(--color-warning-text);
}

.status-chip--ready {
    background: var(--color-success-subtle);
    color: var(--color-success-text);
}

.status-chip--error {
    background: var(--color-danger-subtle);
    color: var(--color-danger-text);
}

/* ── PLIB-FE-2 — Policy Library status chips + scope icons ──────────────── */

/* Policy status chips — used in RepositoryPage document rows */
.plib-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--radius-full, 999px);
    font-size: var(--text-xs, 11px);
    font-weight: 600;
    flex-shrink: 0;
}
.plib-status-chip--draft      { background: rgba(100,116,139,0.15); color: #64748b; }
.plib-status-chip--review     { background: rgba(245,158,11,0.15);  color: #92400e; }
.plib-status-chip--published  { background: rgba(16,185,129,0.15);  color: #065f46; }
.plib-status-chip--archived   { background: rgba(99,102,241,0.12);  color: #3730a3; }
.plib-status-chip--superseded { background: rgba(239,68,68,0.12);   color: #991b1b; }

/* Scope icon — displayed inline before the status chip */
.plib-scope-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
    color: var(--text-muted);
}

/* Light-theme overrides for plib chips */
@media (prefers-color-scheme: light) {
    .plib-status-chip--draft      { background: rgba(100,116,139,0.12); color: #374151; }
    .plib-status-chip--review     { background: rgba(245,158,11,0.12);  color: #78350f; }
    .plib-status-chip--published  { background: rgba(16,185,129,0.12);  color: #064e3b; }
    .plib-status-chip--archived   { background: rgba(99,102,241,0.10);  color: #312e81; }
    .plib-status-chip--superseded { background: rgba(239,68,68,0.10);   color: #7f1d1d; }
}
[data-theme="light"] .plib-status-chip--draft      { background: rgba(100,116,139,0.12); color: #374151; }
[data-theme="light"] .plib-status-chip--review     { background: rgba(245,158,11,0.12);  color: #78350f; }
[data-theme="light"] .plib-status-chip--published  { background: rgba(16,185,129,0.12);  color: #064e3b; }
[data-theme="light"] .plib-status-chip--archived   { background: rgba(99,102,241,0.10);  color: #312e81; }
[data-theme="light"] .plib-status-chip--superseded { background: rgba(239,68,68,0.10);   color: #7f1d1d; }

/* ── Skeleton ────────────────────────────────────────────────── */
.skeleton {
    background: var(--color-skeleton);
    border-radius: var(--radius-md);
    animation: shimmer 1.4s ease infinite;
}

@keyframes shimmer {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}

.skeleton--icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.skeleton--line {
    height: 14px;
    margin-bottom: var(--space-2);
}

.skeleton--wide {
    width: 60%;
}

.skeleton--medium {
    width: 40%;
}

.skeleton--narrow {
    width: 25%;
}

.skeleton--btn {
    width: 120px;
    height: 36px;
    flex-shrink: 0;
}

.skeleton--title {
    height: 24px;
    width: 160px;
    margin-bottom: var(--space-6);
}

.skeleton--capsule {
    height: 100px;
    width: 100%;
    margin-bottom: var(--space-3);
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. Confirm modal
══════════════════════════════════════════════════════════════════════════ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 8000;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    animation: fade-in 180ms ease;
}

    /* Prevent display:flex from overriding the HTML hidden attribute */
    .modal-backdrop[hidden] {
        display: none !important;
    }

.modal-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    max-width: 440px;
    width: 100%;
    box-shadow: var(--shadow-xl);
    animation: slide-up 200ms ease;
}

.modal-title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin: 0 0 var(--space-3);
}

.modal-body {
    color: var(--color-muted);
    margin: 0 0 var(--space-6);
    line-height: 1.6;
}

.modal-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

.btn-danger {
    background: var(--color-danger);
    color: #fff;
    border: none;
}

    .btn-danger:hover {
        background: var(--color-danger-hover);
    }


/* ═══════════════════════════════════════════════════════════════════════════
   Legal Modal
══════════════════════════════════════════════════════════════════════════ */

.legal-modal-card {
    background: var(--surface-card);
    border: 1px solid var(--surface-border-mid);
    border-radius: var(--radius-xl);
    max-width: 680px;
    width: 100%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    animation: slide-up 200ms ease;
}

.legal-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6) var(--space-8) var(--space-4);
    border-bottom: 1px solid var(--surface-border);
    flex-shrink: 0;
}

.legal-modal-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.legal-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-6) var(--space-8);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.75;
    scroll-behavior: smooth;
}

.legal-modal-body::-webkit-scrollbar {
    width: 4px;
}
.legal-modal-body::-webkit-scrollbar-track {
    background: transparent;
}
.legal-modal-body::-webkit-scrollbar-thumb {
    background: var(--surface-border-mid);
    border-radius: var(--radius-pill);
}

.legal-modal-body h3 {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-teal);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: var(--space-6) 0 var(--space-2);
}
.legal-modal-body h3:first-child { margin-top: 0; }

.legal-modal-body p { margin: 0 0 var(--space-3); }

.legal-modal-body ul {
    margin: 0 0 var(--space-3);
    padding-left: var(--space-5);
}
.legal-modal-body ul li { margin-bottom: var(--space-1); }

.legal-modal-body a {
    color: var(--color-teal);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.legal-modal-body a:hover { color: var(--color-teal-hover); }

.legal-effective {
    font-size: var(--text-xs);
    color: var(--text-muted);
    background: var(--surface-elevated);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--color-teal);
    margin-bottom: var(--space-5);
}

.legal-contact-block {
    background: var(--surface-elevated);
    border: 1px solid var(--surface-border-mid);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-5);
}
.legal-contact-block h3 {
    color: var(--text-primary) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: var(--text-base) !important;
    margin-top: 0 !important;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
}
.legal-table td {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--surface-border);
}
.legal-table tr:nth-child(even) td {
    background: var(--surface-elevated);
}
.legal-table td:first-child { color: var(--text-secondary); font-weight: 500; }
.legal-table td:last-child  { color: var(--color-teal); font-weight: 600; }

.legal-inline-link {
    background: none;
    border: none;
    color: var(--color-teal);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0;
}
.legal-inline-link:hover { color: var(--color-teal-hover); }

.legal-closing {
    margin-top: var(--space-6);
    font-style: italic;
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.legal-modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-4) var(--space-8) var(--space-6);
    border-top: 1px solid var(--surface-border);
    flex-shrink: 0;
}

/* Footer link buttons — replaces anchor tags */
.site-footer-links .footer-legal-btn {
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    transition: color var(--transition-fast);
}
.site-footer-links .footer-legal-btn:hover {
    color: var(--color-gold);
}
/* MR-5: footer buttons minimum 44px tap target on mobile */
@media (max-width: 768px) {
    .site-footer-links .footer-legal-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 0 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. Toasts
══════════════════════════════════════════════════════════════════════════ */

.toast {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: 9000;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 250ms ease, transform 250ms ease;
    pointer-events: none;
}

.toast--visible {
    opacity: 1;
    transform: translateY(0);
}

.toast--info {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.toast--error {
    background: var(--color-danger-subtle);
    border: 1px solid var(--color-danger-border);
    color: var(--color-danger-text);
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. Workspace
══════════════════════════════════════════════════════════════════════════ */

.workspace-page {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* ── Nav bar ──────────────────────────────────────────────── */
.workspace-nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 56px;
}

.workspace-nav__doc-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.workspace-doc-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workspace-nav__right {
    flex-shrink: 0;
}

.in-progress-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: var(--color-warning-subtle);
    color: var(--color-warning-text);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* ── Main ─────────────────────────────────────────────────── */
.workspace-main {
    flex: 1;
    padding: var(--space-6);
}

/* ── Processing view ──────────────────────────────────────── */
.processing-view {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.processing-card {
    text-align: center;
    max-width: 420px;
    padding: var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.processing-icon {
    margin-bottom: var(--space-5);
}

    .processing-icon svg {
        width: 64px;
        height: 64px;
        color: var(--color-accent);
    }

.processing-arc {
    transform-origin: 24px 24px;
    animation: rotate-arc 1.2s linear infinite;
}

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

.processing-title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin: 0 0 var(--space-2);
}

.processing-subtitle {
    color: var(--color-muted);
    margin: 0 0 var(--space-6);
}

.processing-hint {
    color: var(--color-muted);
    font-size: var(--text-sm);
    margin: var(--space-6) 0 var(--space-4);
}

/* ── Stepper ─────────────────────────────────────────────── */
.processing-stepper {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.stepper-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: var(--text-sm);
}

    .stepper-item:last-child {
        border-bottom: none;
    }

.stepper-indicator {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .stepper-indicator svg {
        width: 18px;
        height: 18px;
        color: var(--color-success);
    }

.stepper-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border);
}

.stepper-label {
    font-weight: 500;
}

.stepper-item--complete .stepper-label {
    color: var(--color-success-text);
}

.stepper-item--active .stepper-label {
    color: var(--color-accent-text);
    font-weight: 600;
}

.stepper-item--pending .stepper-label {
    color: var(--color-muted);
}

/* ── Workspace view top bar (processing view) ─────────── */
.ws-view-topbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

/* ── Topics view ─────────────────────────────────────────── */
.topics-view {
    max-width: 760px;
    margin: 0 auto;
}

.topics-header {
    margin-bottom: var(--space-6);
}

/* ── Topics top bar: back + confidence capsule | avatar bar ── */
.topics-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.topics-topbar__left {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.topics-topbar__right {
    flex-shrink: 0;
}

.topics-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xl);
    font-weight: 700;
    margin: 0 0 var(--space-2);
}

.topics-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 700;
}

.topics-hint {
    color: var(--color-muted);
    font-size: var(--text-sm);
    margin: 0;
}

.topics-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. TopicCapsule
══════════════════════════════════════════════════════════════════════════ */

.topic-capsule {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: visible !important;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

    .topic-capsule:hover {
        box-shadow: var(--shadow-sm);
    }

    /* State border accents */
    .topic-capsule[data-topic-state="composing_story"],
    .topic-capsule[data-topic-state="regenerating"] {
        border-color: var(--color-warning-border);
    }

    .topic-capsule[data-topic-state="approved"],
    .topic-capsule[data-topic-state="rendering_video"] {
        border-color: var(--color-accent-border);
    }

    .topic-capsule[data-topic-state="video_ready"] {
        border-color: var(--color-success-border);
    }

    .topic-capsule[data-topic-state="failed"] {
        border-color: var(--color-danger-border);
    }

/* ── Header ────────────────────────────────────────────────── */
.tc-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-subtle);
}

.tc-index-badge {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-accent-subtle);
    color: var(--color-accent-text);
    font-size: var(--text-xs);
    font-weight: 700;
}

.tc-title-group {
    flex: 1;
    min-width: 0;
}

.tc-title {
    font-family: var(--font-body) !important;
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.tc-desc {
    font-size: var(--text-sm);
    color: var(--color-muted);
    margin: 0;
}

.tc-meta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
}

.tc-relevance {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-accent-text);
}

.tc-state-badge {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.tc-state-badge--processing {
    background: var(--color-warning-subtle);
    color: var(--color-warning-text);
}

.tc-state-badge--ready {
    background: var(--color-accent-subtle);
    color: var(--color-accent-text);
}

.tc-state-badge--approved {
    background: var(--color-accent-subtle);
    color: var(--color-accent-text);
}

.tc-state-badge--done {
    background: var(--color-success-subtle);
    color: var(--color-success-text);
}

.tc-state-badge--error {
    background: var(--color-danger-subtle);
    color: var(--color-danger-text);
}

.tc-state-badge--warning {
    background: #fef3c7;
    color: #92400e;
}

/* ── Body ──────────────────────────────────────────────────── */
.tc-body {
    padding: var(--space-4) var(--space-5);
    overflow: visible;
}

/* Generate button */
.tc-btn-generate {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

    .tc-btn-generate svg {
        width: 16px;
        height: 16px;
    }

/* Progress row */
.tc-progress-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.tc-progress-label {
    font-weight: 500;
}

/* Stream preview */
.tc-stream-preview {
    font-style: normal !important;
    color: var(--color-teal) !important;
    background: var(--surface-elevated) !important;
    font-size: var(--text-sm) !important;
    padding: var(--space-3) var(--space-4) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    white-space: normal !important;
}

/* ETA */
.tc-eta {
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin-top: var(--space-2);
}

/* Error row */
.tc-error-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    font-size: var(--text-sm);
    color: var(--color-danger-text);
}

    .tc-error-row svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

.tc-error-row--warn {
    color: #92400e;
}

/* ── Story panel ────────────────────────────────────────────── */
.tc-story-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--surface-elevated);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--color-teal);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.tc-story-panel--readonly {
    margin-bottom: var(--space-4);
}

.tc-story-duration {
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin: 0 0 var(--space-3);
}

.tc-story-scenes {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-right: var(--space-2);
}

.tc-scene {
    padding: var(--space-3) var(--space-4);
    background: var(--surface-card);
    border-radius: var(--radius-md);
}

.tc-scene-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-teal);
    margin-bottom: var(--space-2);
    font-family: var(--font-body);
}

.tc-scene-text {
    font-size: var(--text-sm);
    line-height: 1.7;
    margin: 0;
    color: var(--text-secondary);
    font-family: var(--font-body);
}

.tc-story-actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
    padding-top: var(--space-3);
    border-top: 1px solid var(--surface-border);
    margin-top: var(--space-1);
}

.tc-btn-regen {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

    .tc-btn-regen svg {
        width: 15px;
        height: 15px;
    }

.tc-feedback-wrap {
    margin-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tc-feedback-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm);
    resize: vertical;
}

    .tc-feedback-input:focus {
        outline: 2px solid var(--color-accent);
        border-color: transparent;
    }

/* ── Snippet badge (inline, below player) ─────────────────── */
.tc-snippet-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-accent-subtle);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-accent-text);
}

    .tc-snippet-badge svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }


/* ═══════════════════════════════════════════════════════════════════════════
   6. VideoPlayer
══════════════════════════════════════════════════════════════════════════ */

/* ── Inline (normal) ──────────────────────────────────────── */
.vp-wrap {
    position: relative;
    background: #000;
    border-radius: var(--radius-lg);
    overflow: hidden;
    /* Force 16:9 aspect ratio for inline */
    aspect-ratio: 16 / 9;
    width: 100%;
}

.vp-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Click area covers full video */
.vp-click-area {
    position: absolute;
    inset: 0;
    cursor: pointer;
    z-index: 1;
}

/* Big play icon */
.vp-big-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    opacity: 1;
    transition: opacity 200ms;
}

    .vp-big-play svg {
        width: 56px;
        height: 56px;
        color: rgba(255,255,255,.85);
        filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
    }

.vp-wrap.is-playing .vp-big-play {
    opacity: 0;
}

/* Controls bar */
.vp-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    background: linear-gradient(transparent, rgba(0,0,0,.75));
    padding: var(--space-4) var(--space-3) var(--space-3);
    opacity: 0;
    transition: opacity 220ms ease;
}

.vp-wrap:hover .vp-controls,
.vp-wrap:focus-within .vp-controls {
    opacity: 1;
}

.vp-scrubber-wrap {
    padding: 0 0 4px;
}

.vp-scrubber {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 3px;
    background: rgba(255,255,255,.3);
    border-radius: 2px;
    cursor: pointer;
    outline: none;
}

    .vp-scrubber::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
    }

    .vp-scrubber:hover {
        height: 5px;
    }

.vp-controls-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.vp-ctrl-btn {
    background: none;
    border: none;
    padding: 4px;
    color: rgba(255,255,255,.9);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 150ms, background 150ms;
}

    .vp-ctrl-btn:hover {
        color: #fff;
        background: rgba(255,255,255,.15);
    }

    .vp-ctrl-btn svg {
        width: 18px;
        height: 18px;
        display: block;
    }

.vp-time {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,.85);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vp-spacer {
    flex: 1;
}

.vp-vol-slider {
    width: 70px;
    -webkit-appearance: none;
    appearance: none;
    height: 3px;
    background: rgba(255,255,255,.3);
    border-radius: 2px;
    cursor: pointer;
    outline: none;
}

    .vp-vol-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
    }

/* ── Expanded / full-viewport overlay ────────────────────── */
/* ── VideoPlayer expanded — portal overlay fix ── */
.vp-wrap--expanded {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    border-radius: 0 !important;
    aspect-ratio: unset !important;
    z-index: 9000 !important;
    background: rgba(21,18,46,0.98) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    padding: 60px var(--space-6) var(--space-8) !important;
    transform: none !important;
}

    .vp-wrap--expanded .vp-video {
        width: auto !important;
        height: auto !important;
        max-width: min(900px, 90vw) !important;
        max-height: 55vh !important;
        aspect-ratio: 16/9 !important;
        border-radius: var(--radius-lg) !important;
        object-fit: contain !important;
        flex-shrink: 0;
    }

    .vp-wrap--expanded .vp-click-area {
        display: none !important;
    }

    .vp-wrap--expanded .vp-big-play {
        display: none !important;
    }

    .vp-wrap--expanded .vp-controls {
        position: static !important;
        width: min(900px, 90vw) !important;
        background: none !important;
        opacity: 1 !important;
        padding: var(--space-3) 0 0 !important;
        flex-shrink: 0;
    }

/* Snippet panel inside expanded overlay */
.vp-snippet-panel {
    width: min(900px, 90vw);
    margin-top: var(--space-6);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    color: rgba(255,255,255,0.85);
    flex-shrink: 0;
}

    .vp-expanded-close:hover {
        background: rgba(255,255,255,0.22);
    }

    .vp-expanded-close svg {
        width: 20px;
        height: 20px;
    }

/* Snippet panel inside expanded overlay */
.vp-snippet-panel {
    width: min(900px, 90vw);
    margin-top: var(--space-6);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    color: rgba(255,255,255,0.85);
    flex-shrink: 0;
}

    .vp-wrap--expanded .vp-scrubber,
    .vp-wrap--expanded .vp-vol-slider {
        background: rgba(255,255,255,.25);
    }

/* Close button in expanded mode */

.vp-snippet-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.vp-snippet-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0;
    color: rgba(255,255,255,.6);
}

    .vp-snippet-title svg {
        width: 16px;
        height: 16px;
    }

.vp-snippet-takeaway {
    font-size: var(--text-base);
    font-weight: 500;
    margin: 0;
    line-height: 1.6;
}

.vp-snippet-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

    .vp-snippet-points li {
        padding-left: var(--space-4);
        position: relative;
        font-size: var(--text-sm);
        line-height: 1.55;
    }

        .vp-snippet-points li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 8px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--color-accent);
        }

.vp-snippet-quiz {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.vp-quiz-question {
    font-size: var(--text-sm);
    font-weight: 600;
    margin: 0;
}

.vp-quiz-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.vp-quiz-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    cursor: pointer;
}

    .vp-quiz-option input {
        margin-top: 2px;
        flex-shrink: 0;
    }

.vp-quiz-result {
    font-size: var(--text-sm);
    font-weight: 600;
    margin: 0;
}

    .vp-quiz-result.is-correct {
        color: var(--color-success-text);
    }

    .vp-quiz-result.is-wrong {
        color: var(--color-danger-text);
    }


/* ═══════════════════════════════════════════════════════════════════════════
   7. Utilities
══════════════════════════════════════════════════════════════════════════ */

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.spinner-xs {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

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

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

.btn-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    padding: 0;
}

    .btn-icon svg {
        width: 17px;
        height: 17px;
    }

.inline-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-8);
    text-align: center;
    color: var(--color-danger-text);
}

.workspace-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-12);
    text-align: center;
    color: var(--color-muted);
}

    .workspace-error svg {
        width: 48px;
        height: 48px;
        color: var(--color-danger);
        opacity: .6;
    }

/* Responsive */
@media (max-width: 768px) {
    .doc-card {
        flex-wrap: wrap;
    }

    .doc-card__actions {
        width: 100%;
        justify-content: flex-end;
    }

    .workspace-main {
        padding: var(--space-4);
    }

    .workspace-nav {
        padding: var(--space-3);
    }

    .vp-wrap--expanded .vp-video {
        max-width: 100%;
    }

    .vp-wrap--expanded .vp-controls {
        width: 100%;
        padding: var(--space-3);
    }

    .vp-snippet-panel {
        width: 100%;
        border-radius: 0;
    }

    .modal-card {
        padding: var(--space-5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton, .processing-arc, .spinner, .spinner-xs {
        animation: none;
    }

    .topic-capsule, .vp-controls, .doc-card {
        transition: none;
    }
}

/* Story panel — collapsed state */
.tc-story-panel--hidden {
    display: none;
}

.tc-story-collapsed-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    border: 1px dashed var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-muted);
    margin-top: var(--space-2);
}

.tc-video-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--surface-border);
}

.progress-spin {
    animation: spin 1s linear infinite;
    flex-shrink: 0;
}
/* Hide badge entirely when count is 0 — belt-and-suspenders */
.in-progress-badge[hidden] {
    display: none !important;
}

/* =============================================================================
   TopicCapsule — Professional redesign
   Append to end of components.css
   ============================================================================= */

/* ── Capsule shell ─────────────────────────────────────────────────────────── */

.topic-capsule {
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-xl);
    overflow: visible !important;
    transition: box-shadow 250ms ease, border-color 250ms ease, transform 200ms ease;
    position: relative;
}

    .topic-capsule::before {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: calc(var(--radius-xl) + 1px);
        pointer-events: none;
        opacity: 0;
        transition: opacity 300ms ease;
        z-index: 0;
    }

    /* State glow effects — replaces the ugly left bar */
    .topic-capsule[data-topic-state="composing_story"]::before,
    .topic-capsule[data-topic-state="regenerating"]::before {
        background: linear-gradient(135deg, rgba(245,166,35,0.25) 0%, rgba(245,166,35,0.05) 60%, transparent 100%);
        opacity: 1;
    }

    .topic-capsule[data-topic-state="story_ready"]::before {
        background: linear-gradient(135deg, rgba(0,180,162,0.2) 0%, rgba(0,180,162,0.04) 60%, transparent 100%);
        opacity: 1;
    }

    .topic-capsule[data-topic-state="approved"]::before,
    .topic-capsule[data-topic-state="rendering_video"]::before {
        background: linear-gradient(135deg, rgba(0,180,162,0.3) 0%, rgba(0,180,162,0.06) 60%, transparent 100%);
        opacity: 1;
    }

    .topic-capsule[data-topic-state="video_ready"]::before {
        background: linear-gradient(135deg, rgba(0,196,140,0.25) 0%, rgba(0,196,140,0.04) 60%, transparent 100%);
        opacity: 1;
    }

    .topic-capsule[data-topic-state="failed"]::before {
        background: linear-gradient(135deg, rgba(229,57,53,0.2) 0%, rgba(229,57,53,0.04) 60%, transparent 100%);
        opacity: 1;
    }

    /* Matching border tint per state */
    .topic-capsule[data-topic-state="composing_story"],
    .topic-capsule[data-topic-state="regenerating"] {
        border-color: rgba(245,166,35,0.35);
        box-shadow: 0 4px 24px rgba(245,166,35,0.08);
    }

    .topic-capsule[data-topic-state="story_ready"] {
        border-color: rgba(0,180,162,0.3);
        box-shadow: 0 4px 24px rgba(0,180,162,0.08);
    }

    .topic-capsule[data-topic-state="approved"],
    .topic-capsule[data-topic-state="rendering_video"] {
        border-color: rgba(0,180,162,0.4);
        box-shadow: 0 4px 32px rgba(0,180,162,0.12);
    }

    .topic-capsule[data-topic-state="video_ready"] {
        border-color: rgba(0,196,140,0.35);
        box-shadow: 0 4px 32px rgba(0,196,140,0.1);
    }

    .topic-capsule[data-topic-state="failed"] {
        border-color: rgba(229,57,53,0.3);
    }

/* ── Header ────────────────────────────────────────────────────────────────── */

.tc-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    position: relative;
    z-index: 1;
}

.tc-index-badge {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-teal-glow);
    border: 1.5px solid rgba(0,180,162,0.4);
    color: var(--color-teal);
    font-size: var(--text-xs);
    font-weight: 700;
    font-family: var(--font-body);
    margin-top: 2px;
}

.tc-title-group {
    flex: 1;
    min-width: 0;
}

.tc-title {
    font-family: var(--font-body) !important;
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 4px;
    line-height: 1.3;
}

.tc-desc {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.tc-meta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    margin-top: 2px;
}

.tc-relevance {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-teal);
    letter-spacing: 0.02em;
}

.tc-state-badge {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.tc-state-badge--processing {
    background: var(--color-amber-glow);
    color: var(--color-amber);
}

.tc-state-badge--ready {
    background: var(--color-teal-glow);
    color: var(--color-teal);
}

.tc-state-badge--approved {
    background: var(--color-teal-glow);
    color: var(--color-teal);
}

.tc-state-badge--done {
    background: var(--color-green-glow);
    color: var(--color-green);
}

.tc-state-badge--error {
    background: var(--color-red-glow);
    color: var(--color-red);
}

/* ── Body ──────────────────────────────────────────────────────────────────── */

.tc-body {
    padding: 0 var(--space-6) var(--space-5);
    position: relative;
    z-index: 1;
}

.tc-btn-generate {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.tc-progress-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-family: var(--font-body);
}

.tc-progress-label {
    font-weight: 500;
    color: var(--color-amber);
}

.tc-stream-preview {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-teal);
    background: var(--color-teal-glow);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-2);
    border: 1px solid rgba(0,180,162,0.2);
    animation: pulse 2s ease-in-out infinite;
}

.tc-error-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    font-size: var(--text-sm);
    color: var(--color-red);
    font-family: var(--font-body);
}

/* ── Tabs ──────────────────────────────────────────────────────────────────── */

.tc-tabs {
    display: flex;
    gap: 2px;
    padding: var(--space-1);
    background: var(--surface-elevated);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    width: fit-content;
}

.tc-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px var(--space-4);
    border-radius: calc(var(--radius-md) - 2px);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    position: relative;
}

    .tc-tab:hover:not(.tc-tab--active) {
        color: var(--text-secondary);
        background: rgba(255,255,255,0.04);
    }

.tc-tab--active {
    background: var(--surface-card);
    color: var(--text-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

    .tc-tab--active svg {
        color: var(--color-teal);
    }

.tc-tab--edit {
    border: 1px solid transparent;
    transition: all var(--transition-fast), border-color .15s;
}

    .tc-tab--edit:hover:not(.tc-tab--active) {
        border-color: rgba(245,158,11,.25);
        color: var(--color-warning, #f59e0b);
    }

    .tc-tab--edit.tc-tab--active {
        color: var(--color-warning, #f59e0b);
        border-color: rgba(245,158,11,.3);
        background: rgba(245,158,11,.08);
        box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    }

    .tc-tab--edit.tc-tab--active svg {
        color: var(--color-warning, #f59e0b);
    }

.tc-tab-spinner {
    width: 10px;
    height: 10px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
}

/* ── Tab panes ─────────────────────────────────────────────────────────────── */

.tc-tab-panes {
    width: 100%;
}

.tc-tab-pane {
    display: none;
    animation: fadeIn 200ms ease both;
}

.tc-tab-pane--active {
    display: block;
}

.tc-pane-empty {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-style: italic;
    padding: var(--space-3) 0;
    font-family: var(--font-body);
}

/* ── Story pane ────────────────────────────────────────────────────────────── */

.tc-story-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tc-story-duration {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-body);
    margin: 0;
}

.tc-story-scenes {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-height: 320px;
    overflow-y: auto;
    padding-right: var(--space-1);
}

    .tc-story-scenes::-webkit-scrollbar {
        width: 4px;
    }

    .tc-story-scenes::-webkit-scrollbar-track {
        background: transparent;
    }

    .tc-story-scenes::-webkit-scrollbar-thumb {
        background: var(--surface-border-mid);
        border-radius: 4px;
    }

.tc-scene {
    background: var(--surface-elevated);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    border: 1px solid var(--surface-border);
    transition: border-color var(--transition-fast);
}

    .tc-scene:hover {
        border-color: var(--surface-border-mid);
    }

.tc-scene-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.tc-scene-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-teal-glow);
    color: var(--color-teal);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-body);
}

.tc-scene-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-teal);
    font-family: var(--font-body);
}

.tc-scene-text {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
}

.tc-story-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding-top: var(--space-3);
    border-top: 1px solid var(--surface-border);
}

.tc-btn-regen {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.tc-feedback-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface-elevated);
    border-radius: var(--radius-md);
    border: 1px solid var(--surface-border-mid);
    animation: slideDown 180ms ease both;
}

.tc-feedback-input {
    font-size: var(--text-sm) !important;
    min-height: 60px;
}

.tc-story-collapsed-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-elevated);
    border-radius: var(--radius-md);
    border: 1px dashed var(--surface-border-mid);
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-family: var(--font-body);
}

/* ── Video pane ────────────────────────────────────────────────────────────── */

.tc-video-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-10) var(--space-6);
    gap: var(--space-3);
}

.tc-video-loading-icon svg {
    color: var(--text-muted);
}

.tc-video-loading-label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0;
}

.tc-eta {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.tc-btn-expand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* ── Preview result pane (story_ready — scene 1 preview) ─────────────────── */

.tc-preview-result {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--surface-border, rgba(196,154,60,0.12));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-card, #1B1840);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tc-preview-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tc-preview-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-gold, #C49A3C);
}

.tc-preview-hint {
    font-size: 11px;
    color: var(--text-muted, #8A8BB0);
    margin-left: auto;
}

.tc-preview-video {
    width: 100%;
    display: block;
    border-radius: 8px;
    max-height: 340px;
    background: #000;
    border: 1px solid var(--surface-border, rgba(196,154,60,0.12));
}

.tc-preview-loading {
    margin-top: var(--space-4);
    padding: var(--space-3);
    border: 1px dashed var(--surface-border, rgba(196,154,60,0.12));
    border-radius: var(--radius-md, 8px);
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted, #8A8BB0);
    font-size: 13px;
}

/* ── Snippet pane ──────────────────────────────────────────────────────────── */

.tc-snippet-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.tc-snippet-takeaway {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4) var(--space-5);
    background: var(--color-teal-glow);
    border-left: 3px solid var(--color-teal);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

    .tc-snippet-takeaway svg {
        flex-shrink: 0;
        color: var(--color-teal);
        margin-top: 2px;
    }

    .tc-snippet-takeaway p {
        font-family: var(--font-body);
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--text-primary);
        line-height: 1.6;
        margin: 0;
    }

.tc-snippet-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

    .tc-snippet-points li {
        font-family: var(--font-body);
        font-size: var(--text-sm);
        color: var(--text-secondary);
        padding-left: var(--space-5);
        position: relative;
        line-height: 1.55;
    }

        .tc-snippet-points li::before {
            content: '→';
            position: absolute;
            left: 0;
            color: var(--color-teal);
            font-weight: 700;
        }

.tc-snippet-quiz {
    background: var(--surface-elevated);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tc-quiz-question {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.tc-quiz-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tc-quiz-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--surface-border-mid);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

    .tc-quiz-option:hover {
        border-color: var(--color-teal);
        background: var(--color-teal-glow);
        color: var(--text-primary);
    }

    .tc-quiz-option input[type="radio"] {
        accent-color: var(--color-teal);
        flex-shrink: 0;
    }

.tc-quiz-result {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    margin: 0;
}

.tc-quiz-result--correct {
    background: var(--color-green-glow);
    color: var(--color-green);
}

.tc-quiz-result--wrong {
    background: var(--color-red-glow);
    color: var(--color-red);
}

/* Ensure hidden attribute is respected — overrides any display rules */
.tc-feedback-wrap[hidden] {
    display: none !important;
}

/* ── VideoPlayer expanded snippet — overlay colour overrides ── */
.vp-snippet-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #C49A3C;
    font-family: var(--font-body);
    margin-bottom: var(--space-1);
}

.vp-snippet-takeaway--overlay {
    background: rgba(0,180,162,0.15) !important;
    border-left-color: var(--color-teal) !important;
}

    .vp-snippet-takeaway--overlay p {
        color: rgba(255,255,255,0.9) !important;
    }

.vp-snippet-panel .tc-snippet-points li {
    color: rgba(255,255,255,0.75) !important;
}

.vp-snippet-panel .tc-snippet-quiz {
    background: rgba(196,154,60,0.06) !important;
    border: 1px solid rgba(196,154,60,0.15);
}

.vp-snippet-panel .tc-quiz-question {
    color: rgba(255,255,255,0.9) !important;
}

.vp-quiz-option--overlay {
    border-color: rgba(255,255,255,0.15) !important;
    color: rgba(255,255,255,0.7) !important;
}

    .vp-quiz-option--overlay:hover {
        border-color: var(--color-teal) !important;
        background: rgba(0,180,162,0.15) !important;
        color: rgba(255,255,255,0.9) !important;
    }

/* ── VideoPlayer expanded — two-column layout ── */
.vp-wrap--expanded {
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Left column — video + controls */
.vp-main-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 48px var(--space-5) var(--space-6) var(--space-6);
    overflow-y: auto;
}

/* Right column — snippet */
.vp-snippet-col {
    width: clamp(280px, 30vw, 360px); /* MR-011: shrinks proportionally between 769px-900px */
    flex-shrink: 0;
    height: 100vh;
    overflow-y: auto;
    border-left: 1px solid rgba(196,154,60,0.15);
    background: rgba(196,154,60,0.03);
    padding: 48px var(--space-5) var(--space-6);
}

.vp-wrap--expanded .vp-video {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: calc(100vh - 160px) !important;
    aspect-ratio: 16/9 !important;
    border-radius: var(--radius-lg) !important;
    object-fit: contain !important;
}

.vp-wrap--expanded .vp-controls {
    width: 100% !important;
    padding: var(--space-3) 0 0 !important;
}

/* Snippet panel inside col — no extra wrapper box needed */
.vp-snippet-col .vp-snippet-panel {
    width: 100% !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.vp-snippet-col .vp-snippet-header {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(196,154,60,0.18);
}

@media (max-width: 768px) {
    .vp-wrap--expanded {
        flex-direction: column !important;
        overflow-y: auto !important;
        padding: 48px var(--space-4) var(--space-6) !important;
    }

    .vp-main-col {
        height: auto;
        padding: 0;
    }

    .vp-snippet-col {
        width: 100%;
        height: auto;
        border-left: none;
        border-top: 1px solid rgba(196,154,60,0.15);
        padding: var(--space-5) 0 0;
    }
}

/* ============================================================
   ProfilePage (.pp-*)
   ============================================================ */

.pp-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-5);
}

/* ── Page header ─────────────────────────────────────────── */
.pp-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.pp-back-btn {
    background: none;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 0.875rem;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}
.pp-back-btn:hover { color: var(--color-text); background: var(--color-surface-alt); }

.pp-heading { margin: 0; font-size: 1.375rem; font-weight: 600; }
.pp-sub { color: var(--color-muted); font-size: 0.8125rem; margin-left: auto; }

/* ── Tab bar ─────────────────────────────────────────────── */
.pp-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-6);
    overflow-x: auto;
    scrollbar-width: none;
}
.pp-tabs::-webkit-scrollbar { display: none; }

.pp-tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    padding: var(--space-3) var(--space-4);
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.pp-tab-btn:hover { color: var(--color-text); }
.pp-tab-btn.active {
    color: var(--color-accent-text);
    border-bottom-color: var(--color-accent);
}

/* ── Tab content area ────────────────────────────────────── */
.pp-tab-content { min-height: 320px; }

/* ── Section headings ────────────────────────────────────── */
.pp-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 var(--space-4) 0;
}

/* ── Profile form ────────────────────────────────────────── */
.pp-form-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.pp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 768px) { .pp-form-grid { grid-template-columns: 1fr; } }

.pp-field { display: flex; flex-direction: column; gap: var(--space-1); }
.pp-field label { font-size: 0.8125rem; font-weight: 500; color: var(--color-muted); }
.pp-field input {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 0.9375rem;
    padding: var(--space-2) var(--space-3);
    transition: border-color 0.15s;
}
.pp-field input:focus { outline: none; border-color: var(--color-accent-border); }
.pp-field input[readonly] { opacity: 0.6; cursor: default; }

.pp-field-hint { font-size: 0.75rem; color: var(--color-muted); margin-top: 2px; }

.pp-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.pp-save-btn {
    background: var(--color-accent);
    border: none;
    border-radius: var(--radius-sm);
    color: #0D1B2A;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    padding: var(--space-2) var(--space-5);
    transition: opacity 0.15s;
}
.pp-save-btn:hover { opacity: 0.85; }
.pp-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.pp-save-msg { font-size: 0.8125rem; color: var(--color-success-text); align-self: center; }

/* ── My Learning stats grid ──────────────────────────────── */
.pp-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
@media (max-width: 768px) { .pp-stat-grid { grid-template-columns: 1fr; } }

.pp-stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
}
.pp-stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--space-1);
}
.pp-stat-value--amber { color: var(--color-amber); }
.pp-stat-value--teal  { color: var(--color-teal);  }
.pp-stat-value--gold  { color: #c49a3c; }

.pp-stat-label { font-size: 0.8125rem; color: var(--color-muted); }

/* ── Recent completions list ─────────────────────────────── */
.pp-completions-list { display: flex; flex-direction: column; gap: var(--space-3); }

.pp-completion-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}

.pp-thumb {
    width: 52px;
    height: 36px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--color-surface-alt);
    flex-shrink: 0;
}
.pp-thumb-placeholder {
    width: 52px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.pp-completion-info { flex: 1; min-width: 0; }
.pp-completion-title { font-size: 0.9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-completion-meta { display: flex; align-items: center; gap: var(--space-2); margin-top: 2px; }
.pp-domain-chip {
    font-size: 0.6875rem;
    font-weight: 500;
    background: var(--color-accent-subtle);
    color: var(--color-accent-text);
    border-radius: var(--radius-pill);
    padding: 1px 8px;
    margin: 4px auto 0;
}
.pp-cert-badge {
    font-size: 0.6875rem;
    background: rgba(196,154,60,0.15);
    color: #c49a3c;
    border-radius: var(--radius-pill);
    padding: 1px 8px;
}
.pp-completion-date { font-size: 0.75rem; color: var(--color-muted); margin-left: auto; flex-shrink: 0; }

/* ── Achievements / cert grid ────────────────────────────── */
.pp-cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
}

.pp-cert-card {
    background: var(--color-surface);
    border: 1px solid rgba(196,154,60,0.25);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}
.pp-cert-icon { font-size: 2.5rem; line-height: 1; }
.pp-cert-title { font-size: 0.9rem; font-weight: 600; }
.pp-cert-domain {
    font-size: 0.75rem;
    color: var(--color-muted);
    background: var(--color-surface-alt);
    border-radius: var(--radius-pill);
    padding: 2px 10px;
}
.pp-cert-date { font-size: 0.75rem; color: var(--color-muted); }
.pp-cert-id { font-size: 0.6875rem; color: var(--color-muted); font-family: monospace; }

/* ── Empty state ─────────────────────────────────────────── */
.pp-empty {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--color-muted);
}
.pp-empty-icon { font-size: 2.5rem; margin-bottom: var(--space-3); }
.pp-empty-text { font-size: 0.9375rem; }

/* ── Security tab ────────────────────────────────────────── */
.pp-security-section { margin-bottom: var(--space-6); }

.pp-pwd-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}
.pp-pwd-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.pp-pwd-info { flex: 1; }
.pp-pwd-label { font-size: 0.8125rem; font-weight: 500; color: var(--color-muted); margin-bottom: var(--space-2); }
.pp-pwd-status { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.pp-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 500;
    border-radius: var(--radius-pill);
    padding: 2px 10px;
}
.pp-badge--ok      { background: var(--color-success-subtle); color: var(--color-success-text); }
.pp-badge--warn    { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.pp-badge--danger  { background: var(--color-danger-subtle);  color: var(--color-danger-text);  }
.pp-badge--neutral { background: var(--color-surface-alt);    color: var(--color-muted);        }

.pp-change-pwd-btn {
    background: none;
    border: 1px solid var(--color-accent-border);
    border-radius: var(--radius-sm);
    color: var(--color-accent-text);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: var(--space-2) var(--space-4);
    transition: background 0.15s;
    white-space: nowrap;
}
.pp-change-pwd-btn:hover { background: var(--color-accent-subtle); }

/* ── Sessions list ───────────────────────────────────────── */
.pp-sessions-list { display: flex; flex-direction: column; gap: var(--space-2); }

.pp-session-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    transition: border-color 0.15s;
}
.pp-session-row--current {
    border-color: var(--color-accent-border);
    background: var(--color-accent-subtle);
}

.pp-session-icon { font-size: 1.375rem; flex-shrink: 0; }
.pp-session-info { flex: 1; min-width: 0; }
.pp-session-device { font-size: 0.875rem; font-weight: 500; }
.pp-session-meta { font-size: 0.75rem; color: var(--color-muted); margin-top: 2px; }
.pp-session-current-tag {
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--color-accent-subtle);
    color: var(--color-accent-text);
    border-radius: var(--radius-pill);
    padding: 2px 8px;
    flex-shrink: 0;
}

.pp-revoke-btn {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 3px 10px;
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
.pp-revoke-btn:hover { border-color: var(--color-danger-border); color: var(--color-danger-text); }

.pp-revoke-all-btn {
    background: none;
    border: 1px solid var(--color-danger-border);
    border-radius: var(--radius-sm);
    color: var(--color-danger-text);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: var(--space-2) var(--space-4);
    margin-top: var(--space-4);
    transition: background 0.15s;
}
.pp-revoke-all-btn:hover { background: var(--color-danger-subtle); }

/* ── Activity / coming-soon placeholder ──────────────────── */
.pp-coming-soon {
    text-align: center;
    padding: var(--space-10) var(--space-4);
    color: var(--color-muted);
}
.pp-coming-soon-icon { font-size: 3rem; margin-bottom: var(--space-3); }
.pp-coming-soon-title { font-size: 1.125rem; font-weight: 600; margin-bottom: var(--space-2); color: var(--color-text); }
.pp-coming-soon-desc  { font-size: 0.875rem; }

/* ============================================================
   ProfilePage v2 — actual class names used by ProfilePage.js
   (the older pp-* rules above kept for compat; these are the
    ones that are actually rendered)
   ============================================================ */

/* ── Page header ─────────────────────────────────────────── */
.pp-page-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}
.pp-heading-block { flex: 1; min-width: 0; }
.pp-tenant-label {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-muted);
    margin-top: 2px;
}

/* ── Tab bar ─────────────────────────────────────────────── */
.pp-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-6);
    overflow-x: auto;
    scrollbar-width: none;
}
.pp-tab-bar::-webkit-scrollbar { display: none; }

.pp-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    padding: var(--space-3) var(--space-4);
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.pp-tab:hover { color: var(--color-text); }
.pp-tab--active {
    color: var(--color-accent-text);
    border-bottom-color: var(--color-accent);
}

/* ── Section card ────────────────────────────────────────── */
.pp-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

/* ── Alerts ──────────────────────────────────────────────── */
.pp-alert {
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
}
.pp-alert--success {
    background: var(--color-success-subtle);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border, var(--color-success-subtle));
}
.pp-alert--error {
    background: var(--color-danger-subtle);
    color: var(--color-danger-text);
    border: 1px solid var(--color-danger-border, var(--color-danger-subtle));
}

/* ── Form group / label / input ──────────────────────────── */
.pp-form-group { display: flex; flex-direction: column; gap: var(--space-1); }

.pp-label { font-size: 0.8125rem; font-weight: 500; color: var(--color-muted); }

.pp-input {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 0.9375rem;
    padding: var(--space-2) var(--space-3);
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}
.pp-input:focus { outline: none; border-color: var(--color-accent-border); }
.pp-input--readonly { opacity: 0.6; cursor: default; }

/* ── Static field (read-only display) ────────────────────── */
.pp-static-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.9375rem;
    color: var(--color-text);
    padding: var(--space-2) 0;
    flex-wrap: wrap;
}

/* ── Role chips ──────────────────────────────────────────── */
.pp-role-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: var(--radius-pill);
    padding: 2px 10px;
    background: var(--color-surface-alt);
    color: var(--color-muted);
}
.pp-role-admin  { background: var(--color-accent-subtle);           color: var(--color-accent-text); }
.pp-role-owner  { background: rgba(196,154,60,0.15);                color: #c49a3c; }
.pp-role-member { background: var(--color-surface-alt);             color: var(--color-muted); }

/* ── Skeleton loader ─────────────────────────────────────── */
@keyframes pp-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}
.pp-skeleton-block { padding: var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pp-sk {
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg,
        var(--color-surface-alt) 25%,
        var(--color-border) 50%,
        var(--color-surface-alt) 75%);
    background-size: 600px 100%;
    animation: pp-shimmer 1.4s infinite linear;
    height: 14px;
}
.pp-sk--title  { height: 20px; width: 40%; }
.pp-sk--line   { width: 100%; }
.pp-sk--short  { width: 60%; }

/* ── Stat cards ──────────────────────────────────────────── */
.pp-stat-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
@media (max-width: 768px) { .pp-stat-cards { grid-template-columns: 1fr; } }

.pp-stat-card--amber { border-left: 3px solid var(--color-amber, #f59e0b); }
.pp-stat-card--teal  { border-left: 3px solid var(--color-teal,  #14b8a6); }
.pp-stat-card--gold  { border-left: 3px solid #c49a3c; }

.pp-stat-card-icon  { font-size: 1.5rem; margin-bottom: var(--space-1); }
.pp-stat-card-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--space-1);
    color: var(--color-text);
}
.pp-stat-card-label { font-size: 0.8125rem; color: var(--color-muted); }

/* ── Item list (recent completions) ──────────────────────── */
.pp-item-list { display: flex; flex-direction: column; gap: var(--space-3); }

.pp-item-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}

.pp-item-thumb {
    width: 52px;
    height: 36px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--color-surface-alt);
    flex-shrink: 0;
}
.pp-item-thumb--placeholder {
    width: 52px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
}

.pp-item-body { flex: 1; min-width: 0; }
.pp-item-title { font-size: 0.9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-item-meta  { display: flex; align-items: center; gap: var(--space-2); margin-top: 2px; font-size: 0.75rem; color: var(--color-muted); }

/* ── Certificate medal icon ──────────────────────────────── */
.pp-cert-medal { font-size: 2.5rem; line-height: 1; }

/* ── Empty state ─────────────────────────────────────────── */
.pp-empty-state {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--color-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}
.pp-empty-title { font-size: 1rem; font-weight: 600; color: var(--color-text); }
.pp-empty-sub   { font-size: 0.875rem; max-width: 380px; padding: 12px 0; }

/* ── Count badge ─────────────────────────────────────────── */
.pp-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    background: var(--color-surface-alt);
    color: var(--color-muted);
    padding: 0 6px;
    margin-left: var(--space-2);
    vertical-align: middle;
}

/* ── Password rows ───────────────────────────────────────── */
.pp-pw-status-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.pp-pw-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
}
.pp-pw-row--warn   { background: var(--color-warning-subtle, rgba(245,158,11,0.08)); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-2); }
.pp-pw-row--danger { background: var(--color-danger-subtle);  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-2); }

.pp-pw-label { font-size: 0.8125rem; font-weight: 500; color: var(--color-muted); min-width: 130px; flex-shrink: 0; }
.pp-pw-value { flex: 1; color: var(--color-text); }
.pp-pw-muted { color: var(--color-muted); }

.pp-pw-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    padding: 2px 10px;
}
.pp-pw-badge--ok     { background: var(--color-success-subtle); color: var(--color-success-text); }
.pp-pw-badge--warn   { background: var(--color-warning-subtle, rgba(245,158,11,0.15)); color: var(--color-warning-text, #b45309); }
.pp-pw-badge--danger { background: var(--color-danger-subtle);  color: var(--color-danger-text); }

/* ── Session list (v2 names) ─────────────────────────────── */
.pp-session-list { display: flex; flex-direction: column; gap: var(--space-2); }

.pp-session-device-icon { font-size: 1.375rem; flex-shrink: 0; }
.pp-session-hint { font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pp-current-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--color-accent-subtle);
    color: var(--color-accent-text);
    border-radius: var(--radius-pill);
    padding: 2px 8px;
}

.pp-btn-revoke-session {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 3px 10px;
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
    white-space: nowrap;
}
.pp-btn-revoke-session:hover { border-color: var(--color-danger-border); color: var(--color-danger-text); }

/* ============================================================
   AppHeader Notification Bell (.app-header-bell)
   ============================================================ */

.app-header-bell {
    position: relative;
    background: none;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    padding: 5px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.app-header-bell:hover { color: var(--color-text); background: var(--color-surface-alt); }
.app-header-bell:focus-visible { outline: 2px solid var(--color-accent-border); }

.app-header-bell-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--color-danger);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ============================================================
   NotificationPanel (.np-*)
   ============================================================ */

.np-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.np-backdrop--visible { opacity: 1; pointer-events: auto; }

.np-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(400px, 90vw);
    background: var(--surface-card);
    border-left: 1px solid var(--color-border);
    z-index: 1101;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(.4,0,.2,1);
    /* MR-016: overflow:hidden removed — np-body has overflow-y:auto; panel is flex col */
}
.np-panel--open { transform: translateX(0); }

/* ── Header ─────────────────────────────────────────────── */
.np-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.np-title { margin: 0; font-size: 1.0625rem; font-weight: 600; }

.np-text-btn {
    background: none;
    border: none;
    color: var(--color-accent-text);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}
.np-text-btn:hover { background: var(--color-accent-subtle); }

.np-close-btn {
    background: none;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    transition: color 0.15s, background 0.15s;
}
.np-close-btn:hover { color: var(--color-text); background: var(--color-surface-alt); }

/* ── Body ───────────────────────────────────────────────── */
.np-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2) 0;
}

/* ── Spinner ────────────────────────────────────────────── */
.np-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-8);
}

/* ── Empty state ────────────────────────────────────────── */
.np-empty {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--color-muted);
}
.np-empty-icon { font-size: 2.5rem; margin-bottom: var(--space-3); }
.np-empty-text { font-size: 0.9375rem; }

/* ── Notification row ───────────────────────────────────── */
.np-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border-subtle);
    transition: background 0.1s;
    position: relative;
}
.np-row:hover { background: var(--color-surface-alt); }
.np-row--unread { background: var(--color-accent-subtle); }
.np-row--unread:hover { background: var(--color-surface-alt); }

.np-row-icon { font-size: 1.25rem; flex-shrink: 0; line-height: 1.4; }

.np-row-content { flex: 1; min-width: 0; }
.np-row-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.np-row-body {
    font-size: 0.8125rem;
    color: var(--color-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.np-row-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-1);
}
.np-row-time { font-size: 0.6875rem; color: var(--color-muted); }
.np-mark-read-btn {
    background: none;
    border: none;
    color: var(--color-accent-text);
    cursor: pointer;
    font-size: 0.6875rem;
    padding: 0;
    transition: opacity 0.15s;
}
.np-mark-read-btn:hover { opacity: 0.75; }

.np-dismiss-btn {
    background: none;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.np-row:hover .np-dismiss-btn { opacity: 1; }
.np-dismiss-btn:hover { color: var(--color-danger-text); }

/* ── Footer ─────────────────────────────────────────────── */
.np-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-5);
    justify-content: center;
    flex-shrink: 0;
}
.np-load-more-btn {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    cursor: pointer;
    font-size: 0.8125rem;
    padding: var(--space-2) var(--space-5);
    transition: border-color 0.15s, color 0.15s;
}
.np-load-more-btn:hover { border-color: var(--color-accent-border); color: var(--color-text); }

/* ── UX-GAP-2: Compliance & data-protection pages ───────── */

/* Generic table scroll wrapper + table reset */
.tbl-scroll          { overflow-x: auto; }
.tbl-standard        { width: 100%; border-collapse: collapse; font-size: 12px; }
.text-center         { text-align: center; }
.text-primary        { color: var(--text-primary); }

/* Table utilities extending audit-* */
.text-xs             { font-size: var(--text-xs); }
.tbl-head-bg         { border-bottom: 2px solid var(--surface-border); background: var(--surface-elevated); }
.audit-th--right     { text-align: right; padding: 6px 8px; }
.audit-td--right     { padding: 6px 8px; text-align: right; }
.audit-td--cap       { padding: 6px 8px; text-transform: capitalize; }
.audit-td--mono      { padding: 6px 8px; font-family: var(--font-mono, monospace); }
.audit-td--bld-cap   { padding: 6px 8px; font-weight: 600; text-transform: capitalize; }
.audit-th--lg        { text-align: left; padding: 8px; }
.audit-th--lg-right  { text-align: right; padding: 8px; }
.audit-td--lg        { padding: 8px; }
.audit-td--lg-right  { padding: 8px; text-align: right; }
.audit-td--lg-min    { padding: 8px; min-width: 140px; }
.audit-td--nowrap    { padding: 6px 8px; white-space: nowrap; }

/* Card variants */
.card--flush         { padding: 0; }
.card--flush-x       { padding: 0; overflow-x: auto; }
.card--flush-h       { padding: 0; overflow: hidden; }

/* Section header row (title + filter/action) */
.card-hdr-row        { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 8px; }
.section-h3          { margin: 0; font-size: 14px; }
.section-h3--mb      { margin: 0 0 12px; font-size: 14px; }
.section-msg         { font-size: 12px; margin: 6px 0; }

/* Severity text (incident pages) */
.sev-low             { color: var(--text-muted);  font-weight: 600; text-transform: capitalize; }
.sev-medium          { color: var(--color-amber); font-weight: 600; text-transform: capitalize; }
.sev-high            { color: var(--color-red);   font-weight: 600; text-transform: capitalize; }
.sev-critical        { color: var(--color-red);   font-weight: 600; text-transform: capitalize; }

/* Job / campaign status text */
.st-open             { color: var(--color-red);    font-weight: 600; text-transform: capitalize; }
.st-investigating    { color: var(--color-amber);  font-weight: 600; text-transform: capitalize; }
.st-contained        { color: var(--color-teal);   font-weight: 600; text-transform: capitalize; }
.st-closed           { color: var(--color-green);  font-weight: 600; text-transform: capitalize; }
.st-queued           { color: var(--text-muted);   font-weight: 600; text-transform: capitalize; }
.st-in-progress      { color: var(--color-teal);   font-weight: 600; text-transform: capitalize; }
.st-ready            { color: var(--color-green);  font-weight: 600; text-transform: capitalize; }
.st-failed           { color: var(--color-red);    font-weight: 600; text-transform: capitalize; }
.st-draft            { color: var(--text-muted);   font-weight: 600; text-transform: capitalize; }
.st-active           { color: var(--color-teal);   font-weight: 600; text-transform: capitalize; }
.st-completed        { color: var(--color-green);  font-weight: 600; text-transform: capitalize; }
.st-cancelled        { color: var(--text-muted);   font-weight: 600; text-transform: capitalize; }

/* Incident notice/countdown banner */
.notice-banner       { padding: 12px 14px; border-radius: var(--radius-md); font-size: 13px; margin-bottom: 16px; }
.notice-banner--warn { background: var(--color-amber-glow); border: 1px solid var(--color-amber); color: var(--color-amber); }
.notice-banner--over { background: var(--color-red-glow);   border: 1px solid var(--color-red);   color: var(--color-red); }
.notice-banner-id    { margin-left: 8px; font-family: var(--font-mono, monospace); font-size: 11px; }

/* DSAR two-column layout — Start DSAR (left) + Recent jobs (right) */
.dsar-layout         { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start; }

/* DSAR member search results */
.dsar-result-item    { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--surface-border-mid); gap: 8px; }
.dsar-result-name    { font-size: 13px; }
.dsar-result-email   { font-size: 11px; overflow-wrap: break-word; word-break: break-all; min-width: 0; flex: 1; }

/* Filter bar card (used by RecertificationCenterPage / DSARCenterPage) */
.filter-bar-card     { display: flex; gap: 8px; align-items: center; }
.filter-label        { font-size: 12px; }

/* Recertification campaign progress bar */
.recert-prog-track   { background: var(--surface-border); border-radius: 6px; height: 8px; overflow: hidden; }
.recert-prog-fill    { background: var(--color-teal); height: 100%; }
.recert-prog-pct     { font-size: 11px; }

/* TenantRegeneratePage */
.regen-content       { max-width: 600px; margin: 0 auto; }
.regen-hdr           { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.regen-title         { flex: 1; margin: 0; }
.regen-warning       { padding: 24px; border-left: 4px solid var(--color-amber); }
.regen-warn-head     { margin: 0 0 12px; font-size: 14px; color: var(--color-amber); }
.regen-warn-body     { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.regen-btn-row       { display: flex; gap: 12px; margin-top: 20px; }
.regen-prog-panel    { padding: 16px; }
.regen-status-row    { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.regen-status-lbl    { font-size: 13px; font-weight: 600; text-transform: uppercase; }
.regen-done-at       { font-size: 12px; }
.regen-ready-box     { background: var(--color-green-glow); border: 1px solid var(--color-green); padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: 16px; }
.regen-ready-msg     { margin: 0; font-size: 13px; color: var(--color-green); }
.regen-topic-hd      { font-size: 11px; font-weight: 600; text-transform: uppercase; margin: 0 0 8px; }
.regen-topic-row     { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; border-bottom: 1px solid var(--surface-border-mid); }
.regen-topic-id      { flex: 1; }

/* ModuleDetailPage */
.md-badge-slot       { display: flex; gap: 6px; flex-wrap: wrap; }
/* PRD-033 UMS-1 T1.2 — module status + source badge row grouping. */
.md-badge-row        { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* PRD-033 UMS-7 T7.1 — doc-context chip.  Reuses design tokens (no hardcoded
   colours).  Logical properties (`margin-inline-*`, `padding-inline-*`) keep
   RTL layouts correct; the "×" glyph stays on the trailing edge naturally. */
.md-doc-context-chip           {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 12px 24px 0;
  background: var(--surface-elevated);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-primary);
}
.md-doc-context-chip__label    { color: var(--text-muted); font-weight: 500; }
.md-doc-context-chip__value    { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.md-doc-context-chip__dismiss  {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  margin-inline-start: 4px;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.md-doc-context-chip__dismiss:hover,
.md-doc-context-chip__dismiss:focus-visible {
  color: var(--text-primary);
  background: var(--surface-subtle);
  outline: 2px solid var(--color-focus, var(--color-teal));
  outline-offset: 1px;
}
.md-section-hdr      { padding: 12px 16px; border-bottom: 1px solid var(--surface-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.md-section-sum      { padding: 12px 16px; border-bottom: 1px solid var(--surface-border); font-size: 12px; line-height: 1.5; }
.md-list             { margin: 0; padding: 0; list-style: none; }
.md-list-item        { padding: 12px 16px; border-bottom: 1px solid var(--surface-border); display: flex; gap: 12px; align-items: flex-start; }
.md-lp-item          { padding: 12px 16px; border-top: 1px solid var(--surface-border); display: flex; gap: 12px; align-items: center; }
.md-lp-overflow      { padding: 10px 16px; border-top: 1px solid var(--surface-border); font-size: 12px; }
.md-topic-num        { font-size: 11px; font-family: var(--font-mono, monospace); width: 24px; }
.md-topic-body       { flex: 1; }
.md-topic-body-min   { flex: 1; min-width: 0; }
.md-topic-sub        { font-size: 12px; margin-top: 4px; }
.md-topic-state      { font-size: 11px; margin-top: 2px; }
.md-topic-src        { margin-top: 6px; }
.md-empty-padded     { padding: 24px; text-align: center; font-size: 13px; }
.md-col-flex         { display: flex; flex-direction: column; gap: 16px; }
.md-card-hdr-row     { padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.md-assign-desc      { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.md-assign-inner     { flex: 1; min-width: 240px; }
.md-assign-sub       { font-size: 12px; margin-top: 4px; line-height: 1.5; }
.md-assign-meta      { font-size: 12px; margin-top: 2px; }
.md-lp-info          { flex: 1; min-width: 0; }
.md-lp-sub           { font-size: 11px; margin-top: 2px; }
.md-rev-actions      { display: flex; gap: 6px; flex-wrap: wrap; }
.md-badge-pair       { display: flex; gap: 4px; flex-shrink: 0; }
.md-kbs-hdr          { padding: 12px 16px; border-bottom: 1px solid var(--surface-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.md-kbs-btn-grp      { display: flex; gap: 8px; flex-wrap: wrap; }
.md-kbs-upload       { padding: 16px; border-bottom: 1px solid var(--surface-border); background: var(--surface-elevated); }
.md-kbs-form         { display: flex; flex-direction: column; gap: 8px; max-width: 480px; }
.md-kbs-hint         { font-size: 12px; }
.md-kbs-status       { font-size: 12px; min-height: 16px; }
.md-kbs-btn-row      { display: flex; gap: 8px; }
.md-kbs-tbl          { width: 100%; border-collapse: collapse; font-size: 13px; }
.md-kbs-thead-row    { border-bottom: 1px solid var(--surface-border); text-align: left; font-size: 11px; text-transform: uppercase; }
.md-kbs-th           { padding: 8px 12px; }
.md-kbs-th--c        { padding: 8px 12px; text-align: center; }
.md-kbs-th--r        { padding: 8px 12px; text-align: right; }
.md-kbs-tr           { border-bottom: 1px solid var(--surface-border); }
.md-kbs-td           { padding: 10px 12px; }
.md-kbs-td--sm       { padding: 10px 12px; font-size: 13px; }
.md-kbs-td--c        { padding: 10px 12px; text-align: center; }
.md-kbs-td--muted    { padding: 10px 12px; font-size: 12px; }
.md-kbs-td--r        { padding: 10px 12px; text-align: right; white-space: nowrap; }
.md-rev-tbl-wrap     { margin: 0; min-width: 720px; }
.md-rev-bd           { font-size: 12px; }
.md-rev-dt           { font-size: 12px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* UX-GAP-3: Settings, Billing, Permissions & Auth pages     */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* SettingsPage */
.set-form-card      { padding: 18px; max-width: 720px; margin: 0 auto; }
.set-card-hdr       { margin: 0 0 8px; }
.set-sso-h3         { margin: 0; }
.set-sso-sub        { margin: 2px 0 0; font-size: 12px; }
.set-btn-row        { display: flex; gap: 8px; margin-top: 8px; }
.set-btn-row--lg    { display: flex; gap: 8px; margin-top: 16px; }
.set-chk-label      { display: block; margin-top: 4px; }
.set-color-row      { display: flex; gap: 8px; align-items: center; }
.set-color-input    { width: 48px; height: 32px; padding: 0; border: 1px solid var(--border-color); }
.set-pw-custom      { border-top: 1px solid var(--border-color); padding-top: 12px; margin-top: 8px; }
.set-table-card     { padding: 0; overflow-x: auto; max-width: 720px; margin: 0 auto; }
.set-table-inner    { margin: 0; min-width: 520px; }
.set-table-actions  { margin-top: 12px; display: flex; gap: 8px; max-width: 720px; margin-left: auto; margin-right: auto; }
.set-sso-hdr        { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

/* LearningPathBuilderPage */
.lpb-hdr-actions    { display: flex; gap: 8px; }
.lpb-pane           { padding: 12px; min-height: 420px; }
.lpb-pane-hdr       { margin: 0 0 8px; font-size: 14px; }
.lpb-chk-label      { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; cursor: pointer; }
.lpb-form-hint      { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.lpb-err            { color: var(--color-red); font-size: 12px; margin-top: 8px; }
.lpb-mod-btn        { display: flex; width: 100%; text-align: left; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--border-color); background: transparent; border-radius: 6px; cursor: pointer; }
.lpb-mod-btn--taken { background: var(--surface-muted); cursor: not-allowed; opacity: 0.6; }
.lpb-seq-item       { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 6px; margin-bottom: 6px; }
.lpb-seq-num        { font-size: 11px; width: 24px; }
.lpb-seq-body       { min-width: 0; flex: 1; }
.lpb-rm-btn         { color: var(--color-red); }

/* TenantBundlePage */
.tbd-page-hdr       { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.tbd-page-title     { flex: 1; margin: 0; }
.tbd-bundle-card    { margin-bottom: 10px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.tbd-bundle-inner   { flex: 1; }
.tbd-detail-card    { padding: 16px; }
.tbd-detail-hdr     { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.tbd-detail-title   { margin: 0; font-size: 14px; }
.tbd-tbl-hdr-row    { border-bottom: 2px solid var(--surface-border); }
.tbd-th             { text-align: left; padding: 6px 8px; }

/* TenantTopicsPage */
.ttp-page-hdr       { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ttp-page-title     { flex: 1; margin: 0; }
.ttp-count          { font-size: 12px; color: var(--text-muted); }
.ttp-approved-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.ttp-filter-card    { padding: 0; margin-bottom: 16px; }
.ttp-list-card      { padding: 0; }
.ttp-modal-hdr      { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: 0.01em; }
.ttp-modal-topic    { font-size: 13px; margin: 0 0 14px; color: var(--text-secondary); }
.ttp-modal-topic strong { color: var(--text-primary); font-weight: 600; }
.ttp-modal-label    { font-size: 12px; font-weight: 600; display: block; margin-bottom: 6px; color: var(--text-secondary); letter-spacing: 0.02em; }
.ttp-modal-ta {
    width: 100%;
    padding: 10px 12px;
    background: var(--surface-elevated);
    border: 1px solid var(--surface-border-mid);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    min-height: 96px;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ttp-modal-ta::placeholder { color: var(--text-muted); font-family: var(--font-body); }
.ttp-modal-ta:focus {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 3px var(--color-teal-glow);
}
.ttp-modal-footer   { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }

/* Missing BEM footer alias — auditor.css defines __header/__body/__close
   but not __footer. Mirror the spacing used by the other slots. */
.adm-modal__footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 16px 22px;
    border-top: 1px solid var(--surface-border);
}
/* tap-preview-slot — inline wrapper inside topic-card for TopicApprovalPreview */
.tap-preview-slot { padding: 0 16px 16px; }

/* PermissionGroupsPage — additions */
.pg-header-actions  { display: flex; gap: 8px; }
.pg-section-card    { padding: 0; }
.pg-section-hdr     { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.pg-section-sub     { font-size: 12px; margin: 0 0 10px; }
.pg-group-title     { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: break-word; word-break: break-word; }
.pg-group-actions   { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.pg-err             { color: var(--color-red); font-size: 12px; margin-top: 6px; }

/* UserSessionsPage */
.us-hdr-actions     { display: flex; gap: 8px; }
.us-danger-btn      { color: var(--color-red); }
.us-alert-panel     { padding: 12px; background: var(--surface-muted); border-radius: 8px; }
.us-table-card      { padding: 0; overflow-x: auto; }
.us-table-inner     { margin: 0; min-width: 860px; }

/* BillingPage */
.bil-tab-card       { padding: 18px; }
.bil-table-card     { padding: 0; overflow-x: auto; }
.bil-table-sm       { margin: 0; min-width: 720px; }
.bil-table-lg       { margin: 0; min-width: 860px; }
.bil-err            { color: var(--color-red); font-size: 12px; margin-top: 6px; }

/* InvitationAcceptPage */
.ia-heading         { text-align: center; margin: 0 0 8px; }
.ia-alert           { margin-bottom: var(--space-4); }
.ia-chk-group       { padding: 10px 12px; border: 1px solid var(--surface-border); border-radius: 8px; background: var(--surface-muted); }
.ia-chk-label       { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 13px; }
/* === UX-GAP-4 Batch A CSS additions === */

/* PermissionGroupDetailPage */
.pgd-actions-row { display: flex; gap: 8px; }
.pgd-loading { padding: 32px; text-align: center; }
.pgd-section { padding: 16px; }
.pgd-section-title { margin: 0 0 12px; }
.pgd-perm-label { display: flex; align-items: flex-start; gap: 8px; padding: 6px 4px; border-radius: 4px; }
.pgd-perm-label--clickable { cursor: pointer; }
.pgd-members-table { margin: 0 0 12px; }
.pgd-assign-row { display: flex; gap: 8px; }
.pgd-assign-select { flex: 1; }
.pgd-assign-section { border-top: 1px solid var(--border-color, #e5e7eb); padding-top: 12px; }
.pgd-btn-remove { color: var(--color-red); }
.pgd-mem-err { color: var(--color-red); font-size: 12px; margin-top: 6px; }

/* CreateTenantPage */
.ct-main-centered { align-items: center; justify-content: center; padding: var(--space-10) var(--space-6); }
.ct-select-pointer { cursor: pointer; }
.ct-consent-label { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.ct-spinner-sm { width: 14px; height: 14px; }

/* LearningPathsPage */
.lp-subtitle-margin { margin: 2px 0 0; }
.lp-loading-msg { padding: 24px; text-align: center; color: var(--text-secondary); }
.lp-detail-card { background: var(--surface-bg); border: 1px solid var(--surface-border); border-radius: var(--radius-sm); padding: 14px 16px; }
.lp-detail-meta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lp-audience-title { margin: 0 0 6px; font-size: 14px; }
.lp-asgn-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--surface-border); }
.lp-asgn-badge { flex-shrink: 0; }

/* LPEnrolmentsPage */
.lpe-filters-pad { padding: 8px var(--space-6, 16px) 0; }
.lpe-stages-margin { margin: 16px 0; }
.lpe-page-info { padding: 0 12px; }

/* ModulesPage */
.mod-loading { padding: 32px; text-align: center; }
.mod-section-title { margin: 0 0 4px; font-size: 18px; }
.mod-card-body { padding: 20px; cursor: pointer; transition: transform .15s; display: flex; flex-direction: column; gap: 8px; min-height: 130px; }
.mod-card-body--tenant { border-left: 3px solid #0d9488; }
.mod-card-name    { font-weight: 700; font-size: 14px; line-height: 1.4; }
.mod-card-version { font-size: 11px; color: var(--text-muted); margin-top: -2px; }
.mod-card-badges  { display: flex; flex-wrap: wrap; gap: 6px; }
.mod-card-footer  { margin-top: auto; display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.mod-act-label    { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,.08)); }

/* === UX-GAP-4 Batch B CSS additions === */

/* ProfilePage */
.pp-field-hint-visible { display:inline; margin-left:6px; }

/* RepositoryPage */
.repo-actions-row { display:flex; gap:8px; }
.repo-filters-row { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.repo-loading { padding:32px; text-align:center; }
.repo-table-wrap { padding:0; overflow-x:auto; }
.repo-table-inner { margin:0; min-width:900px; }

/* GrantRequestsPage */
.gr-actions-row { display:flex; gap:8px; margin-bottom:12px; }
.gr-loading { padding:32px; text-align:center; }
.gr-table-wrap { padding:0; overflow-x:auto; }
.gr-table-inner { margin:0; min-width:980px; }

/* AssignmentManagerPage */
/* (display:none violations fixed via .hidden class — no new layout classes needed) */

/* AssignmentProgressPage */
.vap-filters-pad { padding:8px var(--space-6) 0; }

/* DepartmentsPage */
.depts-loading { padding:32px; text-align:center; }
.depts-table-wrap { padding:0; overflow-x:auto; }
.depts-table-inner { margin:0; min-width:860px; }

/* InvitationsPage */
.inv-actions-row { display:flex; gap:8px; }
.inv-table-wrap { padding:0; overflow-x:auto; }
.inv-table-inner { margin:0; min-width:880px; }

/* === UX-GAP-4 Batch C CSS additions === */

/* ChangePasswordPage */
.cp-alert-mb { margin-bottom: var(--space-4); }
.cp-disabled-input { opacity: .6; cursor: not-allowed; }

/* FirstLoginChangePasswordPage */
.fl-alert-mb { margin-bottom: var(--space-4); }
.fl-disabled-input { opacity: .6; cursor: not-allowed; }

/* === IHD-3 Action Queue Widget === */

.action-queue-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.action-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-left: 3px solid transparent;
    border-bottom: 1px solid rgba(196, 154, 60, 0.10);
}

.action-item:last-child { border-bottom: none; }

.action-item--red    { border-left-color: #ef4444; }
.action-item--amber  { border-left-color: #f59e0b; }
.action-item--green  { border-left-color: #22c55e; }

.action-item__left {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.action-item__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

.action-item__dot--red   { background: #ef4444; }
.action-item__dot--amber { background: #f59e0b; }
.action-item__dot--green { background: #22c55e; }

.action-item__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.action-item__title {
    font-size: 13px;
    color: var(--text-primary, #e2e8f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action-item__subtitle {
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action-item__cta {
    flex-shrink: 0;
}

.action-queue__all-clear {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--text-muted, #94a3b8);
    margin: 0;
}

/* ── IHD-4: Compliance Donut Widget ─────────────────────────────────────── */
.home-widget--compliance-donut .home-widget__body {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 16px 16px;
    flex-wrap: wrap;
}

.compliance-donut {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap;
}

.compliance-donut__chart-wrap {
    flex: 0 0 160px;
    position: relative;
}

.compliance-donut__svg {
    width: 160px;
    height: 160px;
    display: block;
    overflow: visible;
}

/* Segment hover highlight */
.compliance-donut__svg .donut-segment {
    transition: opacity 0.15s ease;
}
.compliance-donut__svg:hover .donut-segment:not(:hover) {
    opacity: 0.55;
}

.compliance-donut__legend {
    flex: 1 1 120px;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.compliance-donut__legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-primary, #e2e8f0);
    border-radius: var(--radius-sm, 4px);
    padding: 2px 4px;
    transition: background 0.12s;
}
.compliance-donut__legend-item:hover {
    background: var(--surface-elevated, #1e293b);
}

.compliance-donut__legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.compliance-donut__legend-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted, #94a3b8);
}

.compliance-donut__legend-count {
    font-weight: 600;
    min-width: 24px;
    text-align: right;
}

.compliance-donut__legend-pct {
    min-width: 36px;
    text-align: right;
    color: var(--text-muted, #94a3b8);
}

/* ── IHD-4: Shared Chart Tooltip ────────────────────────────────────────── */
.chart-tooltip {
    position: fixed;
    z-index: 9999;
    display: none;
    padding: 8px 12px;
    background: var(--surface-elevated, #1e293b);
    border: 1px solid var(--surface-border, #334155);
    border-radius: var(--radius-md, 6px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    font-size: 12px;
    color: var(--text-primary, #e2e8f0);
    pointer-events: none;
    white-space: nowrap;
    line-height: 1.5;
    max-width: 240px;
}

/* ── IHD-6: Assignment Completion Funnel ─────────────────────────────────── */
.assignment-funnel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.funnel-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: var(--radius-md, 6px);
    background: var(--surface-elevated, #1e293b);
    border: 1px solid var(--surface-border, #334155);
}

.funnel-row__header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.funnel-row__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #e2e8f0);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.funnel-row__title:hover {
    text-decoration: underline;
}

.funnel-due-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.funnel-due-badge--amber {
    background: rgba(245,158,11,0.15);
    color: #f59e0b;
    border: 1px solid rgba(245,158,11,0.35);
}
.funnel-due-badge--red {
    background: rgba(239,68,68,0.15);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,0.35);
}

.funnel-row__bar {
    width: 100%;
    height: 10px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--surface-border, #334155);
}

.funnel-row__counts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
    align-items: center;
}

.funnel-count { white-space: nowrap; }
.funnel-count--blue  { color: #3b82f6; }
.funnel-count--amber { color: #f59e0b; }
.funnel-count--green { color: #22c55e; }
.funnel-count--red   { color: #ef4444; }

.funnel-row__cta {
    align-self: flex-end;
    margin-top: 2px;
}

.funnel-empty {
    font-size: 13px;
    color: var(--text-muted, #94a3b8);
    padding: 8px 0;
}

/* ── IHD-5: Department Compliance Heat Map ─────────────────────────── */

:root {
    --heatmap-green: rgba(34, 197, 94, 0.15);
    --heatmap-amber: rgba(245, 158, 11, 0.15);
    --heatmap-red:   rgba(239, 68, 68, 0.15);
    --heatmap-grey:  rgba(100, 116, 139, 0.12);

    --heatmap-green-border: rgba(34, 197, 94, 0.35);
    --heatmap-amber-border: rgba(245, 158, 11, 0.35);
    --heatmap-red-border:   rgba(239, 68, 68, 0.35);
    --heatmap-grey-border:  rgba(100, 116, 139, 0.25);
}

.dept-heatmap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.dept-cell {
    border-radius: 8px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    min-height: 76px;
}

.dept-cell:hover,
.dept-cell:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    outline: none;
}

.dept-cell__name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #e2e8f0);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
}

.dept-cell__pct {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.dept-cell__sub {
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
}

.home-widget__empty {
    font-size: 13px;
    color: var(--text-muted, #94a3b8);
    margin: 0;
    padding: 12px 0;
}

/* ── IHD-7: Credit Sparkline Widget ─────────────────────────────────────── */

/* Amber state: warm left border on the card */
.home-widget--amber {
    border-color: rgba(245, 158, 11, 0.45);
}

/* Amber header tint */
.home-widget__header--amber {
    background: rgba(245, 158, 11, 0.08);
    border-radius: 8px 8px 0 0;
    margin: -4px -6px 0;
    padding: 4px 6px;
}

/* "Top up →" CTA button */
.credit-sparkline__topup-cta {
    font-size: 12px;
    font-weight: 600;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--radius-sm, 4px);
    padding: 3px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.credit-sparkline__topup-cta:hover {
    background: rgba(245, 158, 11, 0.22);
    color: #fbbf24;
}

/* Widget body layout */
.credit-sparkline__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Sparkline SVG: full width, scales to container */
.credit-sparkline__chart-wrap {
    width: 100%;
    position: relative;
}

.credit-sparkline__svg {
    display: block;
    width: 100%;
    height: 70px;
    overflow: visible;
}

/* Invisible hit circles become visible on hover */
.credit-sparkline__svg .sparkline-hit:hover {
    fill: currentColor;
    r: 4;
}

/* Footer: balance + projected days */
.credit-sparkline__footer {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.credit-sparkline__pool-remaining {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
    letter-spacing: -0.5px;
    line-height: 1;
}

.credit-sparkline__proj-days {
    font-size: 12px;
    color: var(--text-muted, #94a3b8);
    line-height: 1.4;
}

/* ── IHD-8: My Learning Journey Widget ──────────────────────────────────── */

/* Pulsing ring keyframe for active node (CSS-only, no JS animation). */
@keyframes journey-pulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(20, 184, 166, 0.55); }
    50%       { box-shadow: 0 0 0 7px rgba(20, 184, 166, 0);    }
}

/* Horizontal scroll wrapper — allows long paths on small viewports. */
.journey-scroll-wrap {
    overflow-x: auto;
    padding-bottom: 4px;
}

/* Flex row that holds node-wraps and connector arrows. */
.journey-path {
    display: flex;
    align-items: flex-start;
    gap: 0;
    min-width: max-content;
}

/* Per-node column: circle + label + sublabel stacked. */
.journey-node-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 100px;
    max-width: 140px;
}

/* Node circle. */
.journey-node {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    cursor: default;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
}

.journey-node:focus-visible {
    outline: 2px solid var(--color-teal, #14b8a6);
    outline-offset: 3px;
}

/* Completed: filled green with checkmark. */
.journey-node--completed {
    background: rgba(34, 197, 94, 0.2);
    border: 2.5px solid #22c55e;
    color: #22c55e;
    cursor: pointer;
}
.journey-node--completed:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* Active: teal pulsing ring (CSS keyframe). */
.journey-node--active {
    background: rgba(20, 184, 166, 0.15);
    border: 2.5px solid var(--color-teal, #14b8a6);
    color: var(--color-teal, #14b8a6);
    cursor: pointer;
    animation: journey-pulse 2s ease-in-out infinite;
}
.journey-node--active:hover {
    transform: translateY(-2px);
}

/* Upcoming: grey outline, not interactive. */
.journey-node--upcoming {
    background: transparent;
    border: 2px solid var(--surface-border-mid, #475569);
    color: var(--text-muted, #94a3b8);
}

.journey-node__check,
.journey-node__index {
    pointer-events: none;
    user-select: none;
}

/* Label below node. */
.journey-node__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #e2e8f0);
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
    max-width: 120px;
}

/* Muted secondary text (e.g. "65% · Due Apr 30"). */
.journey-node__sublabel {
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
    text-align: center;
    line-height: 1.3;
}

/* Due date badge (IHD-8.4). */
.journey-node__due-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
    background: rgba(100, 116, 139, 0.15);
    color: var(--text-muted, #94a3b8);
    border: 1px solid rgba(100, 116, 139, 0.25);
}
.journey-node__due-badge--urgent {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.35);
}
.journey-node__due-badge--overdue {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.35);
}

/* Narrow progress bar below active node (IHD-8.4). */
.journey-node__progress {
    width: 80px;
    height: 4px;
    background: var(--surface-border, #334155);
    border-radius: 2px;
    overflow: hidden;
}
.journey-node__progress-fill {
    height: 100%;
    background: var(--color-teal, #14b8a6);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* Connector arrow between nodes. */
.journey-connector {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 14px; /* aligns with node circle centre */
    padding: 0 6px;
    font-size: 18px;
    color: var(--surface-border-mid, #475569);
    user-select: none;
}

/* Empty state within journey path. */
.journey-empty {
    font-size: 13px;
    color: var(--text-muted, #94a3b8);
    margin: 0;
    padding: 12px 0;
}

/* ── IHD-8: Team Onboarding Widget ──────────────────────────────────────── */

/* Horizontal funnel row. */
.onboarding-funnel {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 8px 0;
}

/* Individual step block. */
.onboarding-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 90px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.onboarding-step:hover,
.onboarding-step:focus-visible {
    background: var(--surface-elevated, #1e2a3a);
    transform: translateY(-2px);
    outline: none;
}

.onboarding-step__count {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
    letter-spacing: -0.5px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.onboarding-step__label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted, #94a3b8);
    text-align: center;
    white-space: nowrap;
}

/* Conversion arrow between steps. */
.onboarding-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 4px;
    flex-shrink: 0;
}

.onboarding-arrow__icon {
    font-size: 16px;
    color: var(--surface-border-mid, #475569);
    user-select: none;
    line-height: 1;
}

.onboarding-arrow__pct {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
    white-space: nowrap;
}

/* Amber: low-conversion step label + pct. */
.onboarding-arrow--amber .onboarding-arrow__icon {
    color: #f59e0b;
}
.onboarding-arrow__pct--amber {
    color: #f59e0b;
}

/* ── IHD-9: Persona-gated column width classes ───────────────────────────── */

/* Set the --home-cell-cols CSS var consumed by .home-widget-cell in home.css. */
.home-widget--cols-5  { --home-cell-cols: 5; }
.home-widget--cols-6  { --home-cell-cols: 6; }
.home-widget--cols-7  { --home-cell-cols: 7; }
.home-widget--cols-12 { --home-cell-cols: 12; }

/* ── IHD-9: Collapsed "Setup complete" badge (DayOneChecklistWidget) ─────── */

.home-checklist--collapsed {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-md, 8px);
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.home-checklist__badge {
    font-size: 13px;
    font-weight: 600;
    color: #10b981;
    flex: 1;
}

.home-checklist__expand-toggle {
    font-size: 13px;
    color: var(--text-muted, #94a3b8);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm, 4px);
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}

.home-checklist__expand-toggle:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary, #e2e8f0);
}

.home-checklist__expanded-section {
    margin-top: 10px;
}

/* ── AVS-6: Inheritance chip — reusable avatar source badge ───────────────── */

.adm-inherit-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* Topic-level override (teal/accent) */
.adm-inherit-chip--override {
    background: var(--adm-teal-glow, rgba(20,184,166,.12));
    color: var(--adm-teal, #14b8a6);
    border-color: rgba(20,184,166,.3);
}

/* Inherited from parent (muted) */
.adm-inherit-chip--inherited {
    background: var(--adm-bg-elevated, #1e2535);
    color: var(--adm-text-muted, #94a3b8);
    border-color: var(--adm-border, #2d3748);
}

/* Falling back to platform / environment default (amber) */
.adm-inherit-chip--default {
    background: var(--color-amber-glow, rgba(245,158,11,.1));
    color: var(--color-amber, #f59e0b);
    border-color: rgba(245,158,11,.25);
}

/* Avatar spinner overlay used during PATCH operations */
.adm-avatar-busy-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--adm-border, #2d3748);
    border-top-color: var(--adm-teal, #14b8a6);
    border-radius: 50%;
    animation: adm-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 4px;
}

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

/* Inline error / success banner in avatar rows */
.adm-avatar-msg {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    margin-top: 6px;
}
.adm-avatar-msg--error {
    background: var(--color-red-glow, rgba(239,68,68,.1));
    color: var(--color-red, #ef4444);
    border: 1px solid rgba(239,68,68,.25);
}
.adm-avatar-msg--success {
    background: var(--color-green-glow, rgba(34,197,94,.1));
    color: var(--color-green, #22c55e);
    border: 1px solid rgba(34,197,94,.25);
}

/* Empty-state placeholder for avatar sections */
.adm-avatar-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px dashed var(--adm-border, #2d3748);
    border-radius: 6px;
    background: var(--adm-bg-elevated, #1e2535);
    color: var(--adm-text-muted, #94a3b8);
    font-size: 12px;
    font-style: italic;
}

/* ── AVS: AvatarPickerDialog — shared across admin + tenant portals ─────────── */
/* workspace-avatar-scene.css carries the same rules for the tenant portal;     */
/* its .avp-overlay z-index (1200) overrides this one there. In the admin       */
/* portal only components.css loads, so 9500 clears the adm-modal-backdrop.    */
.avp-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(10, 8, 24, 0.82);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4, 16px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}

.avp-overlay--visible {
    opacity: 1;
    pointer-events: all;
}

.avp-dialog {
    background: var(--surface-card, #131929);
    border: 1px solid var(--surface-border-mid, #2d3748);
    border-radius: var(--radius-xl, 16px);
    width: 100%;
    max-width: 920px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,.7), 0 0 0 1px var(--surface-border, #1e293b);
    animation: avp-in .28s cubic-bezier(.16,1,.3,1) both;
}

@keyframes avp-in {
    from { transform: translateY(20px) scale(.97); opacity: 0; }
    to   { transform: translateY(0) scale(1);      opacity: 1; }
}

.avp-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--surface-border, #1e293b);
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--surface-card, #131929) 0%, var(--surface-card-hover, #1a2235) 100%);
}

.avp-title {
    font-family: var(--font-display, inherit);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--text-primary, #e2e8f0);
    margin: 0 0 4px;
}

.avp-subtitle {
    font-size: .75rem;
    color: var(--text-muted, #64748b);
    margin: 0;
}

.avp-close {
    background: none;
    border: none;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm, 4px);
    line-height: 1;
    transition: color .15s, background .15s;
    flex-shrink: 0;
}
.avp-close:hover {
    color: var(--text-primary, #e2e8f0);
    background: var(--surface-elevated, #1e293b);
}

.avp-body {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 0;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
@media (max-width: 768px) {
    .avp-body { grid-template-columns: 1fr; overflow-y: auto; }
}

.avp-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 16px 12px 24px;
    overflow: hidden;
    border-right: 1px solid var(--surface-border, #1e293b);
}

.avp-search-row { flex-shrink: 0; }

.avp-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.avp-search-icon {
    position: absolute;
    left: 10px;
    color: var(--text-muted, #64748b);
    pointer-events: none;
}

.avp-search-input {
    width: 100%;
    padding: 9px 12px 9px 36px;
    background: var(--surface-bg, #0a0e1a);
    border: 1px solid var(--surface-border, #1e293b);
    border-radius: var(--radius-sm, 4px);
    color: var(--text-primary, #e2e8f0);
    font-size: .875rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.avp-search-input:focus {
    border-color: var(--color-teal, #00b4a2);
    box-shadow: 0 0 0 3px var(--color-teal-glow, rgba(0,180,162,.15));
}
.avp-search-input::placeholder { color: var(--text-muted, #64748b); }

.avp-filters {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.avp-filters-loading { font-size: .75rem; color: var(--text-muted, #64748b); }

.avp-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
}

.avp-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.avp-filter-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted, #64748b);
}

.avp-filter-select {
    padding: 5px 10px;
    background: var(--surface-bg, #0a0e1a);
    border: 1px solid var(--surface-border, #1e293b);
    border-radius: var(--radius-sm, 4px);
    color: var(--text-primary, #e2e8f0);
    font-size: .75rem;
    cursor: pointer;
    outline: none;
    transition: border-color .15s;
}
.avp-filter-select:focus { border-color: var(--color-teal, #00b4a2); }

.avp-grid-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    gap: 8px;
}

.avp-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    overflow-y: auto;
    align-content: start;
    padding-right: 4px;
}
.avp-grid::-webkit-scrollbar { width: 4px; }
.avp-grid::-webkit-scrollbar-thumb { background: var(--surface-border-mid, #2d3748); border-radius: 2px; }

.avp-grid-empty,
.avp-grid-loading,
.avp-grid-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    color: var(--text-muted, #64748b);
    font-size: .875rem;
    text-align: center;
    gap: 8px;
}
.avp-grid-error { color: var(--color-danger, #ef4444); }

.avp-card {
    background: var(--surface-bg, #0a0e1a);
    border: 2px solid var(--surface-border, #1e293b);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .18s, transform .14s, box-shadow .18s;
    outline: none;
}
.avp-card:hover,
.avp-card:focus-visible {
    border-color: var(--color-teal, #00b4a2);
    transform: translateY(-2px);
    box-shadow: 0 0 0 3px var(--color-teal-glow, rgba(0,180,162,.15));
}
.avp-card--selected {
    border-color: var(--color-teal, #00b4a2) !important;
    box-shadow: 0 0 0 3px var(--color-teal-glow, rgba(0,180,162,.15)), 0 4px 16px rgba(0,180,162,.2) !important;
}

.avp-card__thumb-wrap {
    position: relative;
    width: 100%;
    padding-top: 100%;
    background: var(--surface-card-hover, #1a2235);
    overflow: hidden;
}
.avp-card__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.avp-card:hover .avp-card__thumb { transform: scale(1.04); }
.avp-card__thumb--placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-teal, #00b4a2);
    background: linear-gradient(135deg, var(--surface-card, #131929) 0%, rgba(0,180,162,.08) 100%);
}
.avp-card__badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--color-teal, #00b4a2);
    color: var(--color-navy, #0a0e1a);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 5px;
    border-radius: var(--radius-pill, 9999px);
}
.avp-card__info { padding: 6px 6px 8px; text-align: center; }
.avp-card__name {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-primary, #e2e8f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.avp-card__meta {
    display: block;
    font-size: .65rem;
    color: var(--text-muted, #64748b);
    margin-top: 2px;
    text-transform: capitalize;
}

.avp-pagination {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 4px;
}
.avp-page-btn {
    width: 28px;
    height: 28px;
    background: var(--surface-bg, #0a0e1a);
    border: 1px solid var(--surface-border, #1e293b);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    color: var(--text-muted, #64748b);
    font-size: .875rem;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.avp-page-btn:hover:not(:disabled) {
    border-color: var(--color-teal, #00b4a2);
    color: var(--color-teal, #00b4a2);
    background: var(--color-teal-glow, rgba(0,180,162,.15));
}
.avp-page-btn:disabled { opacity: .35; cursor: not-allowed; }
.avp-page-info { font-size: .75rem; color: var(--text-muted, #64748b); }

.avp-right {
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 12px;
    overflow-y: auto;
    border-left: 1px solid var(--surface-border, #1e293b);
    background: linear-gradient(180deg, var(--surface-card-hover, #1a2235) 0%, var(--surface-card, #131929) 100%);
}

.avp-preview-video-wrap {
    position: relative;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    background: var(--surface-bg, #0a0e1a);
    border: 1px solid var(--surface-border, #1e293b);
    aspect-ratio: 9/16;
}
.avp-preview-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.avp-no-preview {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted, #64748b);
    font-size: .75rem;
    text-align: center;
}

.avp-preview-meta { padding: 4px 0; }
.avp-preview-name {
    font-family: var(--font-display, inherit);
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-primary, #e2e8f0);
    margin: 0 0 6px;
}
.avp-preview-attrs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.avp-preview-tag {
    padding: 3px 8px;
    background: var(--color-teal-glow, rgba(0,180,162,.15));
    border: 1px solid rgba(0,180,162,.3);
    border-radius: var(--radius-pill, 9999px);
    font-size: .7rem;
    color: var(--color-teal, #00b4a2);
    text-transform: capitalize;
}
.avp-preview-langs { font-size: .7rem; color: var(--text-muted, #64748b); margin: 0; }
.avp-preview-hint {
    font-size: .8rem;
    color: var(--text-muted, #64748b);
    text-align: center;
    margin: 24px 0 0;
}

.avp-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--surface-border, #1e293b);
    flex-shrink: 0;
    flex-wrap: wrap;
    background: var(--surface-card, #131929);
}
.avp-save-error { font-size: .75rem; color: var(--color-danger, #ef4444); flex: 1; margin: 0; }

/* ──────────────────────────────────────────────────────────────────────────
   TopicCitationsPanel (CSUI-3) — tenant-side styling
   Mirrors admin.css rules but uses tenant design tokens (navy + gold + teal).
   Mounted by TenantTopicsPage and any other tenant page that imports the
   shared TopicCitationsPanel component.
   ──────────────────────────────────────────────────────────────────────── */
.tcp-card {
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    overflow: hidden;
}

.tcp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--surface-border);
}
.tcp-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}
.tcp-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: var(--color-teal-glow);
    color: var(--color-teal);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.tcp-loading-spinner { margin-left: auto; }

.tcp-status-msg {
    padding: 18px 20px;
    font-size: 13px;
    color: var(--text-muted);
}

.tcp-collapsed-bar { padding: 8px 0; }

.tcp-list { display: flex; flex-direction: column; }

.tcp-row {
    display: flex;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--surface-border);
    transition: background var(--transition-fast);
}
.tcp-row:last-child { border-bottom: none; }
.tcp-row:hover { background: var(--surface-card-hover); }

.tcp-row-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--surface-elevated);
    color: var(--text-secondary);
    font-size: 14px;
    border: 1px solid var(--surface-border);
}

.tcp-row-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tcp-source-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    word-break: break-word;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.tcp-row-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}
.tcp-page {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    background: var(--surface-elevated);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
}
.tcp-sep { color: var(--text-muted); }
.tcp-section-ref {
    color: var(--text-secondary);
    word-break: break-word;
}

.tcp-row-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.tcp-similarity {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}
.tcp-view-btn {
    color: var(--color-teal);
}
.tcp-view-btn:hover:not(:disabled) {
    color: var(--color-teal);
    background: var(--color-teal-glow);
}

/* Authority-level badge (L1..L5) */
.auth-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.auth-badge.auth-L1,
.auth-badge.auth-L2 {
    background: var(--color-green-glow);
    color: var(--color-green);
    border-color: rgba(0,196,140,0.25);
}
.auth-badge.auth-L3,
.auth-badge.auth-L4 {
    background: var(--color-amber-glow);
    color: var(--color-amber);
    border-color: var(--color-gold-border);
}
.auth-badge.auth-L5 {
    background: var(--surface-elevated);
    color: var(--text-secondary);
    border-color: var(--surface-border-mid);
}

/* Collapsible "Source text" reveal */
.tcp-chunk-details { margin-top: 4px; }
.tcp-chunk-details > summary {
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 0;
    user-select: none;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color var(--transition-fast);
}
.tcp-chunk-details > summary::-webkit-details-marker { display: none; }
.tcp-chunk-details > summary::before {
    content: '\25B8';
    font-size: 10px;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}
.tcp-chunk-details[open] > summary::before { transform: rotate(90deg); }
.tcp-chunk-details > summary:hover { color: var(--text-secondary); }

.citation-source-text {
    margin: 6px 0 0;
    padding: 12px 14px;
    background: var(--surface-bg);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 11.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 220px;
    overflow-y: auto;
}
.citation-source-text-empty {
    color: var(--text-muted);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REP-1 — Repository Preview Panel (WorkspacePage)
══════════════════════════════════════════════════════════════════════════ */

.ws-topic-row {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--surface-border, rgba(196,154,60,0.12));
    padding-bottom: 16px;
    margin-bottom: 16px;
}
.ws-topic-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.ws-preview-toggle {
    background: transparent;
    border: none;
    padding: 2px 0;
    cursor: pointer;
    color: var(--color-teal, #00B4A2);
    font-size: var(--text-xs, 12px);
    font-weight: 500;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.ws-preview-toggle:hover { opacity: 0.75; }

.ws-tap-slot {
    margin-top: 12px;
}

.ws-approval-pending-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    padding: 4px 8px;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-full);
    background: var(--surface-bg);
}

/* REP-2 — Maker-Checker Approval (WorkspacePage) */
.ws-approval-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
}

/* REP-1 — Repository reviewer stamps */
.ws-reviewer-stamps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ws-reviewer-stamp {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary, rgba(237,232,219,0.75));
}
.ws-reviewer-stamp__icon { font-size: 12px; line-height: 1; }

.ws-approval-badge-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ws-approval-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.ws-approval-badge--pending  { background: #FFF3CD; color: #856404; }
.ws-approval-badge--r1-done  { background: #D1ECF1; color: #0C5460; }
.ws-approval-badge--approved { background: rgba(0,180,162,0.12); color: var(--color-teal, #00B4A2); border: 1.5px solid var(--color-teal, #00B4A2); }
.ws-approval-badge--changes  { background: #F8D7DA; color: #721C24; }

.ws-approval-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ws-approval-err-msg {
    font-size: 11px;
    color: var(--color-red);
}

/* REP-1/REP-2 — Filter tabs */
.ws-filter-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 16px 0 12px;
    border-bottom: 1px solid var(--surface-border, rgba(196,154,60,0.12));
    margin-bottom: 4px;
}
.ws-filter-tab {
    padding: 5px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 100px;
    border: 2px solid var(--surface-border, rgba(196,154,60,0.2));
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ws-filter-tab:hover {
    border-color: var(--color-teal, #00B4A2);
    color: var(--color-teal, #00B4A2);
}
.ws-filter-tab--active {
    background: var(--color-teal, #00B4A2);
    border-color: var(--color-teal, #00B4A2);
    color: #fff;
}

/* REP-1/REP-2 — Review card */
.ws-review-card {
    padding: 16px;
    background: var(--surface-card, #1B1840);
    border-radius: 8px;
    border: 1px solid var(--surface-border, rgba(196,154,60,0.12));
    margin-bottom: 6px;
}
.ws-review-card__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.ws-review-card__num {
    font-size: 13px;
    color: var(--text-muted);
    flex-shrink: 0;
    min-width: 24px;
    padding-top: 2px;
    font-weight: 600;
}
.ws-review-card__title-wrap {
    flex: 1;
    min-width: 0;
}
.ws-review-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 4px;
}
.ws-review-card__desc {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.ws-review-card__badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 100px;
    white-space: nowrap;
    border: 1px solid transparent;
}
.ws-review-card__badge--pending  { background: #FFF3CD; color: #856404; border-color: #ffc107; }
.ws-review-card__badge--r1done   { background: #D1ECF1; color: #0C5460; border-color: #17a2b8; }
.ws-review-card__badge--approved { background: rgba(0,180,162,0.12); color: var(--color-teal, #00B4A2); border-color: var(--color-teal, #00B4A2); }
.ws-review-card__badge--changes  { background: #F8D7DA; color: #721C24; border-color: #dc3545; }

/* REP-1/REP-2 — Bottom action bar */
.ws-topic-bottom-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.ws-bottom-badge-slot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UGKB-1/UGKB-4/UGKB-6/UGKB-7 — KB Topic Row 1 Config Strip (WorkspacePage)
═══════════════════════════════════════════════════════════════════════════ */

/* Row 1: configuration strip — appears BEFORE .topic-card__actions (Row 2) */
.ws-topic-config-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    margin-bottom: 4px;
}

/* ws-config-tab — tab-style toggle button for Scenes/Avatar panels */
.ws-config-tab {
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    padding: 3px 10px;
    background: transparent;
    user-select: none;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.ws-config-tab:hover,
.ws-config-tab--active {
    color: var(--color-teal);
    border-color: var(--color-teal);
}

/* Container for the panel area below the config row */
.ws-config-tab-panels {
    width: 100%;
}
/* Individual tab panel — .hidden class hides it by default */
.ws-config-tab-panel {
    width: 100%;
}

/* Panel body inside the <details> */
.ws-topic-details-body {
    margin-top: 6px;
    padding: 10px 0;
    border-top: 1px solid var(--surface-border);
    width: 100%;
}

/* Variant pills strip in Row 1 */
.ws-variant-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* Individual variant status pill */
.ws-vpill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    white-space: nowrap;
}
.ws-vpill--ready {
    background: rgba(0, 180, 162, 0.12);
    border-color: var(--color-teal);
    color: var(--color-teal);
}
.ws-vpill--generating {
    background: rgba(251, 191, 36, 0.12);
    border-color: var(--color-amber);
    color: var(--color-amber);
}
.ws-vpill--not-started {
    background: var(--surface-elevated);
    border-color: var(--surface-border);
    color: var(--text-muted);
}
.ws-vpill-label {
    font-size: 11px;
}

/* Preview loading / error paragraphs (replaces inline style equivalents) */
.ws-preview-loading {
    font-size: 12px;
    padding: 12px 16px;
    color: var(--text-muted);
}
.ws-preview-error {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--color-red);
}

/* ═══════════════════════════════════════════════════════════════════════════
   UGKB-2 — KB Topic Row 1 Config Strip (ProjectsPage)
═══════════════════════════════════════════════════════════════════════════ */

.proj-topic-config-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 6px 0.75rem;
    border-bottom: 1px solid var(--surface-border);
}

/* proj-config-tab — tab-style toggle button for Scenes/Avatar panels in ProjectsPage */
.proj-config-tab {
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    padding: 3px 10px;
    background: transparent;
    user-select: none;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.proj-config-tab:hover,
.proj-config-tab--active {
    color: var(--color-teal);
    border-color: var(--color-teal);
}

/* Container for the panel area below the config row */
.proj-config-tab-panels {
    width: 100%;
}
/* Individual tab panel */
.proj-config-tab-panel {
    width: 100%;
}

.proj-topic-details-body {
    margin-top: 6px;
    padding: 8px 0;
    border-top: 1px solid var(--surface-border);
    width: 100%;
}

.proj-variant-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* REP-3 — My Learning Document Grouping */
.lms-doc-card {
    border-radius: 12px;
    border-left: 4px solid var(--doc-accent, #1a73e8);
    background: var(--surface-card);
    margin-bottom: 16px;
    box-shadow: var(--shadow-card, 0 1px 4px rgba(0,0,0,0.06));
    transition: box-shadow 0.15s;
}
.lms-doc-card:hover {
    box-shadow: var(--shadow-hover, 0 3px 12px rgba(0,0,0,0.10));
}
.lms-doc-card--company { --doc-accent: #1a73e8; }
.lms-doc-card--project { --doc-accent: #f59e0b; }

.lms-doc-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
}

.lms-doc-card__icon {
    font-size: 24px;
    flex-shrink: 0;
    line-height: 1;
}

.lms-doc-card__info {
    flex: 1;
    min-width: 0;
}

.lms-doc-card__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lms-doc-card__meta {
    font-size: 12px;
    color: var(--text-muted, #64748b);
    margin-top: 3px;
}

.lms-doc-card__pbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.lms-doc-card__pbar-track {
    flex: 1;
    height: 6px;
    background: var(--surface-border, #e5e7eb);
    border-radius: 3px;
    overflow: hidden;
}

.lms-doc-card__pbar-fill {
    height: 100%;
    background: var(--doc-accent, #1a73e8);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.lms-doc-card__pbar-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    min-width: 30px;
    text-align: right;
}

.lms-doc-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.lms-doc-card__open-btn {
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid var(--doc-accent, #1a73e8);
    background: transparent;
    color: var(--doc-accent, #1a73e8);
    white-space: nowrap;
    cursor: not-allowed;
    opacity: 0.45;
    transition: background 0.15s, color 0.15s;
}
.lms-doc-card__open-btn:not(:disabled) {
    cursor: pointer;
    opacity: 1;
}
.lms-doc-card__open-btn:not(:disabled):hover {
    background: var(--doc-accent, #1a73e8);
    color: #fff;
}

.lms-doc-card__toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    color: var(--text-muted, #64748b);
    font-size: 16px;
    border-radius: 4px;
    line-height: 1;
    transition: background 0.15s;
}
.lms-doc-card__toggle-btn:hover { background: var(--surface-elevated); }

.lms-doc-card__body {
    padding: 0 20px 16px;
}
.lms-doc-card__body[hidden] {
    display: none;
}

@media (max-width: 768px) {
    /* MR-064: canonical 768px breakpoint (was 640px)
       MR-090: Switch header to column so the doc card chevron/toggle never
               overflows the card right edge. The base has no flex-wrap so
               actions overflowed without this fix.
       MR-092: lms-doc-card__toggle-btn had 4px 8px padding → ~24px height;
               enforce 44×44 minimum tap area on mobile. */
    .lms-doc-card__header {
        flex-direction: column;
        align-items: stretch;
        padding: 14px 16px;
        gap: 10px;
    }
    .lms-doc-card__title  { font-size: .9rem; white-space: normal; }
    .lms-doc-card__info   { width: 100%; }
    .lms-doc-card__actions {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
    }
    .lms-doc-card__open-btn { display: none; }
    /* MR-092: expand toggle button touch target to 44×44 */
    .lms-doc-card__toggle-btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── Project Knowledge Base (PKB-6) ───────────────────────────────────────── */
.pkb-intent-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pkb-intent-badge--regulatory        { background: #fef2f2; color: #dc2626; }
.pkb-intent-badge--vendor_management { background: #f5f3ff; color: #7c3aed; }
.pkb-intent-badge--internal_quality  { background: #eff6ff; color: #2563eb; }
.pkb-intent-badge--skills_training   { background: #f0fdf4; color: #16a34a; }
.pkb-intent-badge--onboarding        { background: #fffbeb; color: #d97706; }

.pkb-kb-card {
    background: var(--surface-card, #ffffff);
    border: 1px solid var(--surface-border, #e2e8f0);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    transition: border-color 0.15s;
}
.pkb-kb-card:hover { border-color: var(--surface-border-mid, #cbd5e1); }
.pkb-kb-card__info { flex: 1; min-width: 0; }
.pkb-kb-card__name { font-weight: 600; color: var(--text-primary, #1e293b); margin-bottom: 0.25rem; }
.pkb-kb-card__meta { font-size: 0.8rem; color: var(--text-muted, #64748b); display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.pkb-kb-card__actions { display: flex; gap: 0.5rem; flex-shrink: 0; align-items: center; }

.pkb-source-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 500;
}
.pkb-source-tag--project_upload { background: #e0f2fe; color: #0369a1; }
.pkb-source-tag--company_link   { background: #fce7f3; color: #9d174d; }

.pkb-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.pkb-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

/* Cross-source topic picker tabs */
.cs-picker-tabs { display: flex; border-bottom: 2px solid var(--surface-border, #e2e8f0); margin-bottom: 1rem; }
.cs-picker-tab  {
    padding: 0.5rem 1rem;
    cursor: pointer;
    color: var(--text-muted, #64748b);
    font-size: 0.875rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.cs-picker-tab:hover { color: var(--text-primary, #1e293b); }
.cs-picker-tab--active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }
.cs-picker-topic-list { max-height: 320px; overflow-y: auto; }
.cs-picker-topic-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background 0.1s;
}
.cs-picker-topic-item:hover { background: var(--surface-elevated, #f8fafc); }
.cs-picker-topic-item--disabled { opacity: 0.5; cursor: not-allowed; }

/* Participant status chips (PKB-6.9) */
.pkb-participant-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pkb-participant-chip--invited  { background: #fffbeb; color: #d97706; }
.pkb-participant-chip--active   { background: #f0fdf4; color: #16a34a; }
.pkb-participant-chip--expired  { background: var(--surface-elevated, #f1f5f9); color: var(--text-muted, #64748b); }
.pkb-participant-chip--revoked  { background: #fef2f2; color: #dc2626; }

/* KB detail inline panel */
.pkb-detail-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.pkb-detail-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.pkb-detail-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin: 0;
}
.pkb-doc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--surface-border, #e2e8f0);
    gap: 0.75rem;
}
.pkb-doc-row:last-child { border-bottom: none; }
.pkb-doc-row__info { flex: 1; min-width: 0; }
.pkb-doc-row__name { font-size: 0.875rem; font-weight: 500; color: var(--text-primary, #1e293b); }
.pkb-doc-row__meta { font-size: 0.75rem; color: var(--text-muted, #64748b); margin-top: 0.125rem; }

/* UGKB-2 — pkb-topic-row structural classes (replaces inline styles) */
.pkb-topic-row {
    border-bottom: 1px solid var(--surface-border);
    display: flex;
    flex-direction: column;
}
.pkb-topic-row:last-child { border-bottom: none; }
.pkb-topic-row__header {
    padding: 0.4rem 0.75rem 0;
}
.pkb-topic-row__title {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 500;
}
.pkb-topic-row__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    padding: 0.3rem 0.75rem 0.5rem;
}
.pkb-topic-panels-slot {
    padding: 8px 0.75rem 12px;
}
.proj-approve-err-msg {
    font-size: 0.75rem;
    color: var(--color-red);
}

/* Tab bar for project detail page (PKB-6) */
.proj-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--surface-border, #e2e8f0);
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.proj-tab {
    padding: 0.625rem 1.25rem;
    cursor: pointer;
    color: var(--text-muted, #64748b);
    font-size: 0.875rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.proj-tab:hover { color: var(--text-primary, #1e293b); }
.proj-tab--active { color: var(--color-teal, #00b4a2); border-bottom-color: var(--color-teal, #00b4a2); font-weight: 600; }
.proj-tab-panel { display: none; }
.proj-tab-panel--active { display: block; }

/* MR-5: enforce 44px minimum tap targets on notification panel controls and inline CTAs (WCAG 2.5.5) */
@media (max-width: 768px) {
    .np-text-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .np-close-btn {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }
    .credit-sparkline__topup-cta {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    /* proj-tab: enforce tap target on mobile */
    .proj-tab {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* MR-5: .btn base — enforce 44×44px minimum tap target on all generic buttons at mobile/tablet */
@media (max-width: 768px) {
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* MR-5: .text-link — standalone anchor links (e.g., "Forgot password?" on LoginPage)
   measure 18px tall — enforce minimum 44px tap area (WCAG 2.5.5) */
@media (max-width: 768px) {
    .text-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* MR-5: .pp-tab — Profile page tabs are 42px, 2px short; enforce 44px minimum */
@media (max-width: 768px) {
    .pp-tab {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* MR-197: .pp-wrap — outer overflow-x:hidden contains .pp-tab-bar inner scroll
   so horizontal scroll from swipeable tabs does not propagate to document.scrollWidth
   (Rule 4b: tab-overflow-contain). */
@media (max-width: 768px) {
    .pp-wrap {
        overflow-x: hidden;
    }
    .pp-tab-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .pp-tab-bar::-webkit-scrollbar {
        display: none;
    }
    .pp-tab {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

/* MR-198: .pp-field input and .pp-input — font-size 0.9375rem (15px) triggers iOS Safari
   auto-zoom on focus. Raise to 16px minimum on mobile (Rule 6: input-font-size-16). */
@media (max-width: 768px) {
    .pp-field input,
    .pp-input {
        font-size: 16px; /* prevent iOS Safari auto-zoom on focus */
    }
}

/* MR-193: UserSessionsPage — device/agent metadata displayed with inline font-size:11px.
   Sub-12px text is unreadable on mobile (P8 check). Override to 12px minimum on mobile.
   The .us-table-inner wraps all session rows; target the nested div. */
@media (max-width: 768px) {
    .us-table-inner td div[style*="font-size:11px"],
    .us-table-inner td .text-muted {
        font-size: 12px;
    }
}

/* MR-196: UserSessionsPage header action row — two buttons crowd at 375px.
   Stack to full-width column on mobile so each button gets a tappable 44px area. */
@media (max-width: 768px) {
    .us-hdr-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .us-hdr-actions .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
    .us-page .page-header {
        flex-direction: column;
        align-items: stretch;
    }
}

/* MR-188: .ai-toggle-vis — AcceptInvitePage password show/hide buttons are positioned
   absolutely inside the password field with inline style only. Effective tap area ~24px.
   Add global rule to lift any element with this class to 44×44px (Rule 1: touch-target-44). */
.ai-toggle-vis {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* MR-189: .ai-switch-to-new — AcceptInvitePage "Create separate account" toggle button.
   Pure text-style button with no padding → ~28px effective height. Enforce 44px (Rule 1). */
#ai-switch-to-new {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* MR-190 / MR-205 / MR-206 / MR-207: .btn base — all .btn variants on mobile must meet
   WCAG 2.5.5 44px minimum touch target height. Base .btn has padding:0.625rem×2 + font
   ~14px ≈ 36px — 8px short. .btn-sm is even smaller (~29px). Enforce min-height:44px
   globally on mobile so every button (auth, upload, export, workspace, create-tenant)
   meets the minimum without requiring per-page overrides. */
@media (max-width: 768px) {
    .btn {
        min-height: 44px;
    }
    .auth-card .btn-sm {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* MR-5: two-column grid utilities — collapse to single column on mobile to prevent
   P6 form-input clipping (comp-detail-grid, pg-two-col, etc. push content off-screen) */
@media (max-width: 768px) {
    .comp-detail-grid,
    .pg-two-col,
    .pgd-layout,
    .bil-info-grid,
    .bil-credits-grid,
    .cd-overview-grid {
        grid-template-columns: 1fr;
    }
    .feeler-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* MR-065: .audit-filter-grid — 6-column (repeat(5,1fr) auto) filter bar used on
   AuditEventsPage and similar pages. At 375px each column is ~61px — too narrow
   for date inputs and select dropdowns. Collapse to 2-column layout on mobile. */
@media (max-width: 768px) {
    .audit-filter-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
}

/* MR-5: P8 sub-12px metadata/label elements in Workforce, Escalations, Compliance pages —
   feeler timeline labels (11px), feeler chat disclaimers (11px), feeler findings footers (11px),
   feeler KPI labels (11px), audit actor UUIDs (11px), notice/dsar/recert metadata (11px),
   lpb/md inline sequence/state labels (11px), action-item subtitles (11px), dept sub (11px),
   onboarding arrow percentages (11px), badge chips (var(--text-xs) ~10px in mobile UA context),
   text-muted utility class (var(--text-sm) ~11px in mobile UA), adm-required asterisk,
   repo-kb-chevron category expand toggles */
@media (max-width: 768px) {
    .feeler-tl-label,
    .feeler-tl-date,
    .feeler-chat-sub,
    .feeler-chat-disc,
    .feeler-findings-left .feeler-findings-meta,
    .feeler-findings-footer,
    .feeler-report-meta,
    .feeler-kpi-label,
    .audit-actor-uuid,
    .notice-banner-id,
    .dsar-result-email,
    .recert-prog-pct,
    .regen-topic-hd,
    .md-topic-num,
    .md-topic-state,
    .md-lp-sub,
    .lpb-form-hint,
    .lpb-seq-num,
    .tbl-upload-label,
    .tbl-rm-btn,
    .action-item__subtitle,
    .dept-cell__sub,
    .onboarding-arrow__pct,
    .badge,
    .text-muted,
    .text-sm,
    .repo-kb-chevron,
    .adm-required {
        font-size: 12px;
    }
}

/* MR-045: site-footer overflow on mobile — three flex children exceed 375px viewport width.
   Reduce padding, stack to column, centre-align content, hide decorative elements.
   P1 horizontal scroll: site-footer-conf ending at 452px was the primary overflow source. */
@media (max-width: 768px) {
    .site-footer {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: auto;
        padding: 8px 12px;
        gap: 4px;
        text-align: center;
    }
    .site-footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 12px;
    }
    .site-footer-sep {
        display: none;
    }
    .site-footer-conf {
        font-size: 10px;
        letter-spacing: 0.06em;
    }
    .site-footer-copy {
        font-size: 10px;
    }
}

/* ── Light theme: button overrides ────────────────────────────────── */

/* Primary button — brand indigo CTA (teal reserved for status/data/indicators) */
[data-theme="light"] .btn-primary {
    background: #0D9488;
    color: #EFF6FF;
    box-shadow: 0 2px 8px rgba(13,148,136,0.22);
}
[data-theme="light"] .btn-primary:hover:not(:disabled) {
    background: #0F766E;
    color: #EFF6FF;
    box-shadow: 0 4px 16px rgba(13,148,136,0.30);
    transform: translateY(-1px);
}

/* Secondary button — white card with visible border */
[data-theme="light"] .btn-secondary {
    background: #FFFFFF;
    color: #111827;
    border: 1.5px solid rgba(0,0,0,0.20);
}
[data-theme="light"] .btn-secondary:hover:not(:disabled) {
    background: #F7F8FA;
    border-color: #0D9488;
    color: #0D9488;
}

/* Ghost button — transparent, dark text, grey hover */
[data-theme="light"] .btn-ghost {
    color: #374151;
}
[data-theme="light"] .btn-ghost:hover:not(:disabled) {
    color: #111827;
    background: rgba(0, 0, 0, 0.06);
}

/* Outline-style buttons (teal border + teal text on white bg) */
[data-theme="light"] .btn-outline,
[data-theme="light"] .btn-teal-outline,
[data-theme="light"] [class*="btn-outline"] {
    background: #FFFFFF;
    color: #00897B;
    border: 1.5px solid #00897B;
}
[data-theme="light"] .btn-outline:hover:not(:disabled),
[data-theme="light"] .btn-teal-outline:hover:not(:disabled),
[data-theme="light"] [class*="btn-outline"]:hover:not(:disabled) {
    background: rgba(0,137,123,0.08);
    color: #006B62;
    border-color: #006B62;
}

/* ── vk-btn utility classes — theme-aware, replaces inline _btnStyle() ─── */
.vk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background 0.18s, box-shadow 0.18s, opacity 0.18s;
    border: none; white-space: nowrap; user-select: none; outline: none;
    font-family: inherit;
}
.vk-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.vk-btn--sm { padding: 5px 12px; font-size: 12px; }
.vk-btn--xs { padding: 3px 8px; font-size: 11px; }
.vk-btn--primary { background: var(--color-teal, #00b4a2); color: #0a0e1a; }
.vk-btn--primary:hover:not(:disabled) { background: #00c8b4; box-shadow: 0 0 16px rgba(0,180,162,.35); }
.vk-btn--secondary { background: var(--surface-elevated); color: var(--text-primary); border: 1px solid var(--surface-border-mid); }
.vk-btn--secondary:hover:not(:disabled) { background: var(--surface-card-hover); border-color: var(--color-teal); }
.vk-btn--ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--surface-border-mid); }
.vk-btn--ghost:hover:not(:disabled) { color: var(--text-primary); background: var(--surface-elevated); }
.vk-btn--outline { background: transparent; color: var(--color-teal); border: 1px solid var(--color-teal); }
.vk-btn--outline:hover:not(:disabled) { background: rgba(0,180,162,0.10); }
.vk-btn--danger { background: var(--color-red, #e53935); color: #fff; border: none; }
.vk-btn--danger:hover:not(:disabled) { background: #c62828; }
.vk-btn--success { background: var(--color-green, #16a34a); color: #fff; border: none; }
.vk-btn--success:hover:not(:disabled) { background: #15803d; }
/* Light theme overrides */
[data-theme="light"] .vk-btn--primary { background: #0D9488; color: #EFF6FF; box-shadow: 0 2px 8px rgba(13,148,136,0.22); }
[data-theme="light"] .vk-btn--primary:hover:not(:disabled) { background: #0F766E; color: #EFF6FF; box-shadow: 0 4px 16px rgba(13,148,136,0.28); }
[data-theme="light"] .vk-btn--secondary { background: #FFFFFF; color: #111827; border: 1.5px solid rgba(0,0,0,0.20); }
[data-theme="light"] .vk-btn--secondary:hover:not(:disabled) { background: #F7F8FA; border-color: #00897B; color: #00897B; }
[data-theme="light"] .vk-btn--ghost { background: transparent; color: #374151; border-color: rgba(0,0,0,0.16); }
[data-theme="light"] .vk-btn--ghost:hover:not(:disabled) { background: rgba(0,0,0,0.06); color: #111827; border-color: rgba(0,0,0,0.24); }
[data-theme="light"] .vk-btn--outline { background: #FFFFFF; color: #00897B; border-color: #00897B; }
[data-theme="light"] .vk-btn--outline:hover:not(:disabled) { background: rgba(0,137,123,0.08); color: #006B62; border-color: #006B62; }

/* ── Light theme: approved-state capsule text → bluish cyan ──────── */
[data-theme="light"] .ws-approval-badge--approved {
    background: rgba(14,116,144,0.10);
    color: #0E7490;
    border-color: #0E7490;
}
[data-theme="light"] .ws-review-card__badge--approved {
    background: rgba(14,116,144,0.10);
    color: #0E7490;
    border-color: #0E7490;
}

/* ── ALCG-11: LanguagePickerModal (lpm-*) ─────────────────────────────────── */
.lpm-lang-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--adm-border-mid, #334155);
    border-radius: var(--adm-radius-sm, 6px);
    cursor: pointer;
    font-size: 14px;
    color: var(--adm-text-primary, #e2e8f0);
    background: var(--adm-bg-card, #1e293b);
    transition: border-color 0.15s ease, background 0.15s ease;
    margin-bottom: 6px;
    line-height: 1.4;
}
.lpm-lang-option:last-child { margin-bottom: 0; }
.lpm-lang-option input[type="radio"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--adm-teal, #0d9488);
}
.lpm-lang-option:hover {
    border-color: var(--adm-teal, #0d9488);
    background: var(--adm-bg-elevated, #263548);
}
.lpm-lang-option--selected {
    border-color: var(--adm-teal, #0d9488);
    background: var(--adm-bg-elevated, #263548);
}
.lpm-lang-name {
    font-weight: 600;
    flex: 1;
}
.lpm-audience-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.lpm-audience-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 99px;
    background: var(--adm-teal-muted, rgba(13,148,136,0.15));
    color: var(--adm-teal, #0d9488);
    border: 1px solid rgba(13,148,136,0.3);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
/* Light-theme overrides */
[data-theme="light"] .lpm-lang-option {
    color: #111827;
    background: #ffffff;
    border-color: #d1d5db;
}
[data-theme="light"] .lpm-lang-option--selected,
[data-theme="light"] .lpm-lang-option:hover {
    border-color: #0d9488;
    background: #f0fdfa;
}
[data-theme="light"] .lpm-audience-badge {
    background: rgba(13,148,136,0.08);
    color: #0f766e;
    border-color: rgba(13,148,136,0.25);
}

/* ── AT-3: ModuleAudienceConfigPanel (mac-*) ─────────────────────────────── */
.mac-tab-root {
    padding: 20px 0;
}
.mac-panel {
    max-width: 720px;
    margin-bottom: 28px;
}
.mac-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
}
.mac-section-subtitle {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 16px 0 8px;
}
.mac-hint {
    font-size: 12px;
    margin: 0 0 14px;
    line-height: 1.6;
}
.mac-type-list {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    min-width: 0;
}
.mac-type-row {
    padding: 10px 12px;
    border: 1px solid var(--surface-border, rgba(196,154,60,0.12));
    border-radius: 6px;
    background: var(--surface-card, transparent);
    transition: border-color 0.15s;
}
.mac-type-row:has(.mac-type-chk:checked) {
    border-color: var(--color-primary, var(--color-teal, #00B4A2));
    background: rgba(0,180,162,0.04);
}
.mac-type-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
    flex: 1;
}
.mac-type-chk {
    accent-color: var(--color-primary, var(--color-teal, #00B4A2));
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    cursor: pointer;
}
.mac-type-name {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}
.mac-bloom-badge {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 99px;
    font-weight: 600;
    flex-shrink: 0;
    text-transform: capitalize;
}
.mac-type-desc {
    margin: 4px 0 0 23px;
    font-size: 12px;
    line-height: 1.5;
}
.mac-mode-section {
    margin-top: 20px;
}
.mac-radio-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 4px;
}
.mac-radio-label input[type="radio"] {
    accent-color: var(--color-primary, var(--color-teal, #00B4A2));
    margin-top: 3px;
    flex-shrink: 0;
}
.mac-radio-text {
    font-size: 13px;
    color: var(--text-primary);
}
.mac-mode-hint {
    margin: 2px 0 10px 22px;
    font-size: 12px;
    line-height: 1.5;
}
.mac-actions {
    margin-top: 18px;
    display: flex;
    gap: 8px;
}
.mac-status {
    font-size: 12px;
    margin-top: 8px;
    min-height: 18px;
}
.mac-status--ok  { color: var(--color-teal, #00B4A2); }
.mac-status--err { color: var(--color-error, #ef4444); }

/* Tone preview section */
.mac-preview-section {
    max-width: 720px;
    margin-bottom: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--surface-border, rgba(196,154,60,0.12));
}
.mac-preview-trigger-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.mac-preview-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 12px 0;
}
.mac-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.mac-preview-card {
    border: 1px solid var(--surface-border, rgba(196,154,60,0.12));
    border-radius: 8px;
    background: var(--surface-elevated, var(--surface-card));
    overflow: hidden;
}
.mac-preview-card-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--surface-border, rgba(196,154,60,0.12));
    background: rgba(0,0,0,0.04);
}
.mac-preview-card-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
}
.mac-preview-card-body {
    padding: 12px 14px;
}
.mac-preview-text {
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
}
.mac-preview-unavail {
    color: var(--color-amber, #f59e0b);
    font-style: italic;
}
.mac-credit-summary {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--surface-border, rgba(196,154,60,0.12));
    border-radius: 6px;
    background: var(--surface-elevated, transparent);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mac-credit-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mac-confirm-row {
    margin-top: 14px;
}

/* ── AT-3.5: TenantTopicsPage variant status (tvs-*, ttp-variant-*) ─────── */
.ttp-variant-section {
    padding: 8px 16px 10px;
    border-top: 1px solid var(--surface-border, rgba(196,154,60,0.08));
    background: rgba(0,0,0,0.02);
}
.ttp-variant-toggle {
    font-size: 11px;
    padding: 3px 8px;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.ttp-variant-body {
    margin-top: 8px;
}
.ttp-variant-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ttp-variant-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.ttp-variant-at-name {
    flex: 1;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
}
.ttp-variant-lang {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tvs-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 99px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.tvs-retry-btn {
    flex-shrink: 0;
}

/* Light-theme overrides for AT-3 */
[data-theme="light"] .mac-type-row {
    background: #f9fafb;
    border-color: #e5e7eb;
}
[data-theme="light"] .mac-type-row:has(.mac-type-chk:checked) {
    background: #f0fdfa;
    border-color: #0d9488;
}
[data-theme="light"] .mac-preview-card {
    background: #ffffff;
    border-color: #e5e7eb;
}
[data-theme="light"] .mac-preview-card-hdr {
    background: #f3f4f6;
    border-bottom-color: #e5e7eb;
}
[data-theme="light"] .mac-credit-summary {
    background: #f9fafb;
    border-color: #e5e7eb;
}
[data-theme="light"] .ttp-variant-section {
    background: #f9fafb;
    border-top-color: #e5e7eb;
}

/* ── AT-4.1: LearningViewerPage variant selector (vlp-variant-selector-*) ── */
.vlp-variant-selector-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-2, 8px) var(--space-4, 16px);
    background: var(--surface-elevated, rgba(255,255,255,0.06));
    border-block-end: 1px solid var(--surface-border, rgba(255,255,255,0.1));
    border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
    flex-wrap: wrap;
}
.vlp-variant-selector-label {
    font-size: var(--text-sm, 13px);
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
    white-space: nowrap;
}
.vlp-variant-selector-select {
    font-size: var(--text-sm, 13px);
    color: var(--text-primary, #e2e8f0);
    background: var(--surface-card, #1e293b);
    border: 1px solid var(--surface-border, rgba(255,255,255,0.12));
    border-radius: var(--radius-sm, 6px);
    padding: 4px var(--space-3, 12px) 4px var(--space-2, 8px);
    cursor: pointer;
    min-inline-size: 160px;
}
.vlp-variant-selector-select:focus-visible {
    outline: 2px solid var(--color-teal, #00B4A2);
    outline-offset: 2px;
}
.vlp-variant-selector-error {
    font-size: var(--text-xs, 11px);
    color: var(--color-red, #ef4444);
    margin-inline-start: auto;
}
/* Loading overlay on the player wrap while variant swap is in-flight */
.vlp-player-loading {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* Light-theme overrides */
[data-theme="light"] .vlp-variant-selector-wrap {
    background: #f8fafc;
    border-bottom-color: #e2e8f0;
}
[data-theme="light"] .vlp-variant-selector-label {
    color: #64748b;
}
[data-theme="light"] .vlp-variant-selector-select {
    color: #0f172a;
    background: #ffffff;
    border-color: #cbd5e1;
}

/* ══════════════════════════════════════════════════════════════════════════
   PLIB-REPO-1 (PRD-039) — Company Repository Learner View
   Full UX overhaul: page padding, filter bar, KB cards, doc rows, mobile.
   Modelled after adm-page-wrap (auditor.css) for padding cadence, and
   mod-card-body (ModulesPage) for card spacing, border-radius, and hover.
   List rows follow repo-table-inner precedent.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Page wrapper — mirrors adm-page-wrap padding cadence ───────────────── */
/* .page-content--repo is the scoped modifier on the root div of both        */
/* CompanyRepository pages. Scoping avoids polluting the generic .page-content */
/* that WorkspacePage, TenantBundlePage, and POSH pages also use.            */
/* adm-page-wrap (auditor.css) uses var(--space-6) top/bottom,               */
/* var(--space-8) inline. We mirror that exact cadence here.                 */
.page-content--repo {
    padding: var(--space-6) var(--space-8);
    color: var(--text-primary);
}

/* ── Page header — left-column layout ───────────────────────────────────── */
/* .page-header is display:flex; justify-content:space-between (components.css */
/* line ~903). Without a left wrapper the H1 + subtitle split to either end.   */
/* page-header__left collapses them into a vertical stack on the left side.    */
.page-header__left {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
}
/* Scope margin-bottom to repo page-header — avoids bleeding into other pages */
.page-content--repo .page-header {
    margin-block-end: var(--space-6);
}

/* ── Filter bar ─────────────────────────────────────────────────────────── */
/* .adm-filter-bar had zero CSS — browser rendered children as stacked blocks. */
/* Now: flex row, controls inline, search takes remaining width.               */
.adm-filter-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-block-end: var(--space-5);
}
/* Search input grows to fill remaining space */
.adm-filter-bar .adm-input {
    flex: 1 1 200px;
    width: auto;               /* override admin.css width:100% in this context */
    min-inline-size: 160px;
}
/* Dropdowns are compact — do not stretch */
.adm-filter-bar .adm-select {
    flex: 0 0 auto;
    width: auto;               /* override admin.css width:100% in this context */
    min-inline-size: 130px;
    max-inline-size: 200px;
}
/* Inline checkbox label — override any browser default block display */
.adm-filter-bar .adm-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    text-transform: none;      /* kill any inherited uppercase */
    letter-spacing: normal;
}
.adm-filter-bar .adm-checkbox {
    width: 15px;
    height: 15px;
    accent-color: var(--adm-teal, #00B4A2);
    cursor: pointer;
    flex-shrink: 0;
}
/* Focus ring on checkbox for keyboard nav */
.adm-filter-bar .adm-checkbox:focus-visible {
    outline: 2px solid var(--adm-teal, #00B4A2);
    outline-offset: 2px;
}

/* ── Pagination bar ──────────────────────────────────────────────────────── */
.adm-paging-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    font-size: 13px;
    color: var(--text-muted);
    border-block-start: 1px solid var(--surface-border);
    margin-block-start: var(--space-4);
}
.adm-paging-info {
    flex: 1;
    text-align: center;
    font-size: 12px;
}

/* ── KB page outer wrapper ───────────────────────────────────────────────── */
.repo-kb-grid {
    padding: 0;                /* page-content already handles outer padding */
}

/* ── KB card grid container ──────────────────────────────────────────────── */
.repo-kb-card-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* ── KB card ─────────────────────────────────────────────────────────────── */
.repo-kb-card {
    background: var(--surface-card, rgba(255,255,255,0.04));
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-block-size: 170px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    container-type: inline-size;
    position: relative;
}
/* Teal accent bar on left edge — appears on hover for visual elevation cue */
.repo-kb-card::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 3px;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    background: var(--adm-teal, #00B4A2);
    opacity: 0;
    transition: opacity .15s ease;
}
.repo-kb-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.22);
    border-color: var(--surface-border-mid);
}
.repo-kb-card:hover::before {
    opacity: 1;
}

.repo-kb-card__title {
    margin: 0;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-primary);
}

.repo-kb-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.repo-kb-card__description {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    flex: 1 1 auto;
    /* Clamp to 3 lines so tall descriptions don't warp the card grid */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.repo-kb-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block-start: auto;
    padding-block-start: 8px;
    border-block-start: 1px solid var(--surface-border);
}

.repo-kb-card__mandate-badge {
    /* inherits .adm-badge .adm-badge--danger — no extra layout needed */
    flex-shrink: 0;
}

.repo-kb-card__doc-count {
    font-size: 12px;
    color: var(--text-muted);
    flex: 1;
}

.repo-kb-card__actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-block-start: 4px;
}

/* ── Document list surface ────────────────────────────────────────────────── */
/* Wrap the rows list in a card-like surface for visual separation            */
.repo-doc-list {
    background: var(--surface-card, rgba(255,255,255,0.04));
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* ── Document list rows ───────────────────────────────────────────────────── */
.repo-doc-list__rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.repo-doc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-block-end: 1px solid var(--surface-border);
    transition: background .12s ease;
}
.repo-doc-row:last-child {
    border-block-end: none;
}
.repo-doc-row:hover {
    background: var(--surface-hover, rgba(255,255,255,.04));
}

.repo-doc-row__title {
    flex: 1 1 200px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.repo-doc-row__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0;
}

.repo-doc-row__type-badge {
    /* inherits .adm-badge .adm-badge--info */
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .05em;
}

.repo-doc-row__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.repo-doc-row__date {
    white-space: nowrap;
}

.repo-doc-row__actions {
    flex-shrink: 0;
    margin-inline-start: auto;
}

/* ── Loading spinner container ───────────────────────────────────────────── */
.repo-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 10px;
}

/* ── Shared empty state ───────────────────────────────────────────────────── */
.repo-empty-state {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-muted);
}
.repo-empty-icon {
    font-size: 40px;
    margin-block-end: 12px;
}
.repo-empty-msg {
    margin: 0;
    font-size: 14px;
}

/* ── Reduced-motion: disable card hover lift ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .repo-kb-card { transition: none; }
    .repo-kb-card::before { transition: none; }
    .repo-kb-card:hover { transform: none; box-shadow: none; }
    .repo-doc-row { transition: none; }
}

/* ── Light-theme overrides ───────────────────────────────────────────────── */
/* Dark theme surface-card is rgba(255,255,255,.04) — near-transparent.       */
/* In light theme we need a white elevated card, and a visible border.         */
[data-theme="light"] .repo-kb-card {
    background: #ffffff;
    border-color: rgba(0,0,0,0.10);
}
[data-theme="light"] .repo-kb-card:hover {
    border-color: rgba(0,0,0,0.18);
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
}
[data-theme="light"] .repo-doc-list {
    background: #ffffff;
    border-color: rgba(0,0,0,0.10);
}
[data-theme="light"] .repo-doc-row:hover {
    background: rgba(0,0,0,.03);
}

/* ── Responsive — tablet (≤ 768px) ──────────────────────────────────────── */
@media (max-width: 768px) {
    /* Page wrapper — reduce outer padding to match adm-page-wrap mobile */
    .page-content--repo {
        padding: 16px 16px;
    }

    /* Filter bar — stack vertically, each control full width */
    .adm-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .adm-filter-bar .adm-input,
    .adm-filter-bar .adm-select {
        width: 100%;
        min-inline-size: unset;
        max-inline-size: unset;
    }
    .adm-filter-bar .adm-filter-label {
        padding: 6px 0;
    }

    /* KB card grid — single column */
    .repo-kb-card-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* Doc rows — stack vertically */
    .repo-doc-row {
        flex-wrap: wrap;
        row-gap: 8px;
        padding: 12px 16px;
    }
    .repo-doc-row__title {
        flex: 1 1 100%;
        white-space: normal;    /* allow wrap on mobile, no ellipsis */
        overflow: visible;
        text-overflow: clip;
    }
    .repo-doc-row__badges {
        flex: 1 1 auto;
        order: 3;
    }
    .repo-doc-row__meta {
        flex: 0 0 auto;
        order: 4;
    }
    .repo-doc-row__actions {
        margin-inline-start: 0;
        order: 5;
        flex: 0 0 auto;
    }
}

/* ── Responsive — mobile (≤ 480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
    /* KB card Open button fills full width at smallest breakpoint */
    .repo-kb-card__actions {
        flex-direction: column;
    }
    .repo-kb-card__actions .adm-btn {
        width: 100%;
        justify-content: center;
    }
    /* Doc row Open button fills full width */
    .repo-doc-row__actions .adm-btn {
        width: 100%;
        justify-content: center;
    }
    /* Back button: ensure minimum 44px touch target */
    .page-header__left .adm-btn {
        min-block-size: 44px;
    }
}

/* ── AT-4.3: VariantCompletionMatrixWidget (vcm-*) ─────────────────────────── */
.vcm-slot {
    margin-block-start: var(--space-6, 24px);
}
.vcm-widget {
    background: var(--surface-card, rgba(255,255,255,0.04));
    border: 1px solid var(--surface-border, rgba(255,255,255,0.1));
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-5, 20px);
    overflow: hidden;
}
.vcm-header {
    margin-block-end: var(--space-4, 16px);
}
.vcm-title {
    font-size: var(--text-base, 15px);
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
    margin: 0 0 var(--space-1, 4px) 0;
}
.vcm-subtitle {
    font-size: var(--text-xs, 11px);
    color: var(--text-muted, #94a3b8);
    margin: 0;
}
/* Skeleton */
.vcm-skeleton-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}
.vcm-skeleton-row {
    height: 32px;
    border-radius: var(--radius-sm, 6px);
    background: var(--surface-elevated, rgba(255,255,255,0.06));
    animation: vcm-pulse 1.4s ease-in-out infinite;
}
@keyframes vcm-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}
/* Empty / error states */
.vcm-empty,
.vcm-error {
    font-size: var(--text-sm, 13px);
    color: var(--text-muted, #94a3b8);
    text-align: center;
    padding: var(--space-6, 24px) 0;
    margin: 0;
}
.vcm-error { color: var(--color-red, #ef4444); }
/* Scrollable wrapper for wide tables */
.vcm-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* Table */
.vcm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm, 13px);
    min-inline-size: 400px;
}
/* Caption: visually hidden but available to screen readers */
.vcm-table caption {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
/* Header cells */
.vcm-th {
    padding: var(--space-2, 8px) var(--space-3, 12px);
    text-align: start;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
    border-block-end: 1px solid var(--surface-border, rgba(255,255,255,0.1));
    white-space: nowrap;
    background: var(--surface-elevated, rgba(255,255,255,0.04));
}
.vcm-th--corner {
    min-inline-size: 160px;
}
.vcm-th--row {
    color: var(--text-primary, #e2e8f0);
    font-weight: 500;
    background: transparent;
    border-block-end: 1px solid var(--surface-border, rgba(255,255,255,0.06));
}
/* Data cells — colour comes from --vcm-cell-bg set inline */
.vcm-cell {
    padding: var(--space-2, 8px) var(--space-3, 12px);
    text-align: center;
    background-color: var(--vcm-cell-bg, transparent);
    border-block-end: 1px solid var(--surface-border, rgba(255,255,255,0.06));
    transition: filter 0.15s;
}
.vcm-cell:hover {
    filter: brightness(1.1);
}
.vcm-pct {
    font-size: var(--text-sm, 13px);
    font-weight: 600;
    /* Force dark text so % is readable on any background band */
    color: #1e293b;
}

/* Light-theme overrides */
[data-theme="light"] .vcm-widget {
    background: #ffffff;
    border-color: #e2e8f0;
}
[data-theme="light"] .vcm-skeleton-row {
    background: #f1f5f9;
}
[data-theme="light"] .vcm-th {
    background: #f8fafc;
    border-bottom-color: #e2e8f0;
    color: #475569;
}
[data-theme="light"] .vcm-th--row {
    color: #0f172a;
}
[data-theme="light"] .vcm-cell {
    border-bottom-color: #e2e8f0;
}
[data-theme="light"] .vcm-pct {
    color: #1e293b;
}

/* VariantBatchPage (vbp-*) ─────────────────────────────────────────────────── */
.vbp-breadcrumb-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: var(--space-3, 12px);
}
.vbp-breadcrumb-link {
    color: var(--text-muted);
    text-decoration: none;
}
.vbp-breadcrumb-link:hover { color: var(--text-primary); text-decoration: underline; }
.vbp-breadcrumb-sep    { margin: 0 4px; }
.vbp-breadcrumb-current { color: var(--text-secondary); }

.vbp-topic-subtitle { margin: 0; }

.vbp-lang-indicator {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
    font-size: 12px;
}
.vbp-lang-label { font-weight: 600; color: var(--text-secondary); }

.vbp-badge--dpa-pending {
    background: rgba(245, 158, 11, 0.10);
    color: var(--color-amber, #f59e0b);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: help;
}

.vbp-generate-hint {
    font-size: 12px;
    margin-bottom: 14px;
}
.vbp-lang-section    { margin-top: 14px; }
.vbp-lang-section-label {
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--text-secondary);
}
.vbp-lang-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.vbp-lang-hint { font-size: 11px; margin-top: 6px; }
.vbp-generate-actions { margin-top: 16px; }

/* ── TTLE-1: VariantBatchPage — topic title inline edit ── */
.vbp-title-edit-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--adm-text-secondary, #94a3b8);
    font-size: 14px;
    padding: 0 4px;
    vertical-align: middle;
    opacity: 0.65;
    transition: opacity 0.15s;
    line-height: 1;
    margin-inline-start: 6px;
}
.vbp-title-edit-btn:hover,
.vbp-title-edit-btn:focus-visible {
    opacity: 1;
}
.vbp-title-edit-btn:focus-visible {
    outline: 2px solid var(--adm-primary, #3b82f6);
    outline-offset: 2px;
    border-radius: var(--adm-radius-sm, 4px);
}

.vbp-title-edit-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.vbp-title-input {
    font-size: inherit;
    font-family: inherit;
    min-width: 220px;
    max-width: 480px;
    padding: 4px 8px;
}

.vbp-title-error {
    display: none;
    font-size: 11.5px;
    color: var(--adm-red, #ef4444);
    margin-inline-start: 2px;
}

[data-theme="light"] .vbp-title-edit-btn {
    color: var(--adm-text-secondary, #64748b);
}

@media (prefers-reduced-motion: reduce) {
    .vbp-title-edit-btn { transition: none; }
}

/* ── VariantBatchPage: inline video player accordion ── */
.vbp-player-row td {
    /* Remove standard table-cell padding so the player fills edge-to-edge. */
    padding: 0 !important;
}
.vbp-inline-player {
    background: #0d1117;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.vbp-player-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 640px;
}
.vbp-player-label {
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.vbp-fs-btn {
    font-size: 11px;
    color: var(--color-primary, #38bdf8);
    background: none;
    border: 1px solid var(--color-primary, #38bdf8);
    border-radius: 4px;
    padding: 3px 10px;
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.15s;
}
.vbp-fs-btn:hover {
    background: rgba(56, 189, 248, 0.10);
}
.vbp-fs-btn:focus-visible {
    outline: 2px solid var(--color-primary, #38bdf8);
    outline-offset: 2px;
}
.vbp-video-el {
    width: 100%;
    max-width: 640px;
    border-radius: 4px;
    display: block;
}
.vbp-player-error {
    font-size: 12px;
    color: var(--color-error, #f87171);
    margin: 0;
    text-align: center;
    max-width: 640px;
}

/* Light theme overrides for the inline player toolbar */
[data-theme="light"] .vbp-inline-player {
    background: #1a1f2e;
}
[data-theme="light"] .vbp-player-label {
    color: #94a3b8;
}

/* Reduced motion: suppress transition on the fullscreen button */
@media (prefers-reduced-motion: reduce) {
    .vbp-fs-btn { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UGKB-PATCH-2 — KB Generate Variants inline panel (WorkspacePage)
   All classes prefixed ws-vbp-* to avoid collision with vbp-* (VariantBatchPage)
═══════════════════════════════════════════════════════════════════════════ */

.ws-vbp-loading {
    font-size: 12px;
    padding: 6px 0;
}
.ws-vbp-aud-container {
    margin-bottom: 16px;
}
.ws-vbp-section-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 8px;
}
.ws-vbp-lang-label-text {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--text-primary);
}
.ws-vbp-lang-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.ws-vbp-lang-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
}
.ws-vbp-lang-locked {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 4px 10px;
    border: 1px solid var(--color-border-muted);
    border-radius: 4px;
    color: var(--text-muted);
    opacity: 0.6;
    cursor: not-allowed;
}
.ws-vbp-already-hint {
    color: var(--text-muted);
    font-size: 11px;
}
.ws-vbp-lang-hint {
    font-size: 12px;
    margin: 4px 0 12px;
}
.ws-vbp-val-msg {
    margin-top: 10px;
}
.ws-vbp-success-msg {
    margin-top: 10px;
}
.ws-vbp-gen-actions {
    margin-top: 12px;
    margin-bottom: 16px;
}
.ws-vbp-variants-section {
    margin-top: 20px;
}
.ws-vbp-variant-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 13px;
    flex-wrap: wrap;
}
.ws-vbp-aud-name {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 120px;
}
.ws-vbp-lang-code {
    color: var(--text-muted);
    font-size: 12px;
    min-width: 40px;
}
.ws-vbp-no-variants {
    font-size: 13px;
    color: var(--text-muted);
}
.ws-vbp-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-full, 999px);
    border: 1px solid transparent;
    white-space: nowrap;
}
.ws-vbp-badge--queued {
    background: rgba(251, 191, 36, 0.12);
    border-color: var(--color-amber, #fbbf24);
    color: var(--color-amber, #fbbf24);
}
.ws-vbp-badge--generating {
    background: rgba(20, 184, 166, 0.12);
    border-color: var(--color-teal, #14b8a6);
    color: var(--color-teal, #14b8a6);
}
.ws-vbp-badge--approved {
    background: rgba(34, 197, 94, 0.12);
    border-color: var(--color-green, #22c55e);
    color: var(--color-green, #22c55e);
}
.ws-vbp-badge--ready {
    background: rgba(34, 197, 94, 0.12);
    border-color: var(--color-green, #22c55e);
    color: var(--color-green, #22c55e);
}
.ws-vbp-badge--failed {
    background: rgba(239, 68, 68, 0.12);
    border-color: var(--color-red, #ef4444);
    color: var(--color-red, #ef4444);
}
.ws-vbp-badge--rejected {
    background: rgba(239, 68, 68, 0.12);
    border-color: var(--color-red, #ef4444);
    color: var(--color-red, #ef4444);
}
.ws-vbp-badge--muted {
    background: var(--surface-elevated, #1a1d2e);
    border-color: var(--surface-border, #2d3050);
    color: var(--text-muted);
}
.ws-vbp-badge--flagged {
    background: rgba(245, 158, 11, 0.12);
    border-color: var(--color-amber, #f59e0b);
    color: var(--color-amber, #f59e0b);
}
.ws-variant-approve-btn {
    font-size: 12px;
    color: var(--color-teal, #14b8a6);
    padding: 2px 8px;
    border: 1px solid var(--color-teal, #14b8a6);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    background: rgba(20, 184, 166, 0.08);
    white-space: nowrap;
    margin-inline-start: auto;
    transition: background 0.15s;
}
.ws-variant-approve-btn:hover:not(:disabled) {
    background: rgba(20, 184, 166, 0.18);
}
.ws-variant-approve-btn--flagged {
    color: var(--color-amber, #f59e0b);
    border-color: var(--color-amber, #f59e0b);
    background: rgba(245, 158, 11, 0.08);
}
.ws-variant-approve-btn--flagged:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.18);
}
.ws-variant-retry-btn {
    font-size: 12px;
    color: var(--color-red, #e53e3e);
    padding: 2px 8px;
    border: 1px solid var(--color-red, #e53e3e);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    background: transparent;
    white-space: nowrap;
    margin-inline-start: auto;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
.ws-variant-retry-btn:hover:not(:disabled) {
    background: var(--color-red, #e53e3e);
    color: #fff;
}
.ws-variant-retry-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.ws-vbp-expand-btn {
    font-size: 12px;
    color: var(--color-primary);
    padding: 0;
    border: none;
    cursor: pointer;
    background: none;
    text-decoration: underline;
    margin-inline-start: auto;
}
.ws-vbp-viewer {
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
}
.ws-vbp-video {
    width: 100%;
    max-height: 360px;
    border-radius: 4px;
}
.ws-vbp-coverage {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* ── OAUTH-EMAIL-3 T3.8 + EMP-1 T9d: Tenant Email Relay page (.ter-* namespace) */
.ter-status-card            { background:var(--surface-card); border:1px solid var(--surface-border); border-radius:8px; padding:20px; margin-block-end:20px; }
.ter-status-header          { display:flex; align-items:center; gap:12px; margin-block-end:12px; }
.ter-status-badges          { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
/* Verification-status badges */
.ter-badge-verified         { background:rgba(74,222,128,.15); color:#4ade80; border-radius:4px; padding:2px 8px; font-size:12px; font-weight:600; display:inline-block; }
.ter-badge-pending          { background:rgba(252,211,77,.15); color:#fcd34d; border-radius:4px; padding:2px 8px; font-size:12px; font-weight:600; display:inline-block; }
.ter-badge-failed           { background:rgba(248,113,113,.15); color:#f87171; border-radius:4px; padding:2px 8px; font-size:12px; font-weight:600; display:inline-block; }
/* Awaiting Confirmation — verification_status='pending' after test_sent; amber, distinct from generic pending */
.ter-badge-awaiting         { background:rgba(217,119,6,.15);  color:#d97706; border:1px solid rgba(217,119,6,.35); border-radius:4px; padding:2px 8px; font-size:12px; font-weight:600; display:inline-block; }
/* Provider-type badges — existing relay types */
.ter-badge-smtp             { background:rgba(100,116,139,.15); color:#64748b; border-radius:4px; padding:2px 8px; font-size:12px; font-weight:600; display:inline-block; }
.ter-badge-ses              { background:rgba(249,115,22,.15);  color:#f97316; border-radius:4px; padding:2px 8px; font-size:12px; font-weight:600; display:inline-block; }
.ter-badge-sendgrid         { background:rgba(26,86,219,.15);   color:#1a56db; border-radius:4px; padding:2px 8px; font-size:12px; font-weight:600; display:inline-block; }
.ter-badge-mailgun          { background:rgba(195,26,26,.15);   color:#c31a1a; border-radius:4px; padding:2px 8px; font-size:12px; font-weight:600; display:inline-block; }
.ter-badge-microsoft-graph  { background:rgba(0,120,212,.15);   color:#0078d4; border-radius:4px; padding:2px 8px; font-size:12px; font-weight:600; display:inline-block; }
.ter-badge-gmail-api        { background:rgba(234,67,53,.15);   color:#ea4335; border-radius:4px; padding:2px 8px; font-size:12px; font-weight:600; display:inline-block; }
/* EMP-1 T9d: provider-type badges for three new relay types */
.ter-badge-gmail-smtp       { background:rgba(234,67,53,.15);   color:#ea4335; border-radius:4px; padding:2px 8px; font-size:12px; font-weight:600; display:inline-block; }
.ter-badge-o365-smtp        { background:rgba(0,120,212,.15);   color:#0078d4; border-radius:4px; padding:2px 8px; font-size:12px; font-weight:600; display:inline-block; }
.ter-badge-oauth2-smtp      { background:rgba(124,58,237,.15);  color:#7c3aed; border-radius:4px; padding:2px 8px; font-size:12px; font-weight:600; display:inline-block; }
.ter-badge-outlook-smtp     { background:rgba(16,110,190,.15);  color:#106ebe; border:1px solid rgba(16,110,190,.35); border-radius:4px; padding:2px 8px; font-size:12px; font-weight:600; display:inline-block; }
.ter-meta-row               { display:flex; gap:24px; font-size:13px; color:var(--text-muted); margin-block-end:12px; flex-wrap:wrap; }
.ter-actions                { display:flex; gap:8px; flex-wrap:wrap; }
.ter-empty-card             { background:var(--surface-card); border:1px solid var(--surface-border); border-radius:8px; padding:32px; text-align:center; }
.ter-empty-icon             { font-size:32px; margin-block-end:12px; opacity:0.4; }
.ter-test-result            { padding:12px 16px; border-radius:6px; margin-block-start:12px; font-size:13px; }
.ter-test-ok                { background:rgba(74,222,128,.15); border:1px solid rgba(74,222,128,.4); color:#4ade80; }
.ter-test-fail              { background:rgba(248,113,113,.15); border:1px solid rgba(248,113,113,.4); color:#f87171; }
.ter-test-pending           { background:rgba(252,211,77,.15); border:1px solid rgba(252,211,77,.4); color:#fcd34d; }
.ter-oauth-guide            { background:var(--surface-elevated); border:1px solid var(--surface-border-mid); border-radius:6px; padding:12px 16px; margin:8px 0 16px; font-size:13px; color:var(--text-secondary); }
.ter-setup-steps            { margin:8px 0 0 16px; line-height:1.8; }
.ter-permission-denied      { color:var(--text-muted); }

/* MR-071: DSARCenterPage — two-column card layout overflows on mobile (≤768px).
   Root cause: .dsar-layout grid-template-columns: 280px 1fr is a hard two-column
   definition with no mobile override. On 375px the 280px left column plus 20px gap
   leaves only 75px for the right card — the right card is cut off and partially
   invisible. The Export button inside .dsar-result-item also overflows because the
   flex row has no gap and the button label is clipped. Long email addresses have no
   word-break rule and overflow their text node.
   Fix: at ≤768px collapse to single column, add word-break to email elements,
   ensure the Export button is full-width and has a min-height for tap target. */
@media (max-width: 768px) {
    .dsar-layout {
        grid-template-columns: 1fr;
    }

    .dsar-layout .card-hdr-row {
        flex-wrap: wrap;
    }

    .dsar-result-item {
        flex-wrap: wrap;
    }

    .dsar-result-item .btn-sm {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    .dsar-result-email {
        font-size: 12px;
    }
}

/* ── MR-086 / MR-087: Document Approval page — mobile header responsiveness ─ */
@media (max-width: 768px) {
    /* MR-086 (HIGH): Topic nav/action strip — wrap onto multiple rows on mobile.
       The ttp-page-hdr is a flat flex row on desktop containing: back button,
       h2 title, ws-doc-info (doc name + badges + Assign to KB), count, approved
       count. At 375px this overflows; break it into stacked rows. */
    .ttp-page-hdr {
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 12px;
    }

    /* Back button: full width on its own row so h2 gets a fresh line */
    .ttp-page-hdr > .btn-ghost:first-child {
        width: 100%;
        min-height: 44px;
        justify-content: flex-start;
        margin-bottom: 2px;
    }

    /* MR-087 (MEDIUM): Page heading — adequate top spacing after back button row */
    .ttp-page-title {
        flex: 1 1 100%;
        font-size: 18px;
        margin-top: 4px;
        margin-bottom: 4px;
    }

    /* ws-doc-info strip (doc name + badges + Assign to KB): full-width, wrapping */
    .ws-doc-info {
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }

    /* Doc name chip: allow shrink and truncate gracefully */
    .workspace-doc-name {
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
    }

    /* Count + approved-count: push to a new row, right-aligned */
    .ttp-count,
    .ttp-approved-count {
        flex: 1 1 auto;
        text-align: right;
        white-space: nowrap;
    }

    /* Assign to KB button: full width on mobile, meets 44px touch target */
    #btn-assign-kb {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        text-align: center;
        padding: 10px 16px;
    }

    /* Confirm domain / Review context buttons: full width on mobile */
    #btn-confirm-domain,
    #btn-review-context {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        text-align: center;
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   VREC-2 — Video Recovery UX (RecoveryModal + VariantBatchPage inline CTA)
   Scope: `.vrec-*` prefix. Companion classes reused from admin.css
   (`.adm-modal-backdrop`, `.adm-modal`, `.adm-btn`).
   Logical properties used throughout for RTL parity.
   ───────────────────────────────────────────────────────────────────────── */

/* Action-button cluster in the failed-variant row (VariantBatchPage). */
.vbp-action-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Modal body wrapper — a bit denser than the default adm-modal-body. */
.vrec-modal-body {
    padding-block: 18px;
    padding-inline: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Context strip — dl-based key/value pairs above the state region. */
.vrec-context-strip {
    display: grid;
    grid-template-columns: max-content 1fr;
    row-gap: 6px;
    column-gap: 14px;
    margin: 0;
    padding-block: 8px;
    padding-inline: 12px;
    border: 1px solid var(--adm-border, #334155);
    border-radius: var(--adm-radius-sm, 4px);
    background: var(--adm-bg-subtle, rgba(148, 163, 184, 0.06));
    font-size: 12.5px;
}

.vrec-context-label {
    color: var(--adm-text-secondary, #94a3b8);
    font-weight: 600;
    margin: 0;
}

.vrec-context-value {
    color: var(--adm-text-primary, #e2e8f0);
    margin: 0;
    word-break: break-word;
}

.vrec-context-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
}

/* State region — swapped by RecoveryModal._renderState(). */
.vrec-state-region {
    min-height: 60px;
}

.vrec-state-copy {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--adm-text-primary, #e2e8f0);
}

/* role="alert" copy gets a warm accent block. */
.vrec-state-copy[role="alert"] {
    padding-block: 10px;
    padding-inline: 12px;
    border-inline-start: 3px solid var(--color-danger-text, #f87171);
    background: rgba(248, 113, 113, 0.08);
    border-radius: var(--adm-radius-sm, 4px);
}

/* role="status" copy gets a positive accent block. */
.vrec-state-copy[role="status"] {
    padding-block: 10px;
    padding-inline: 12px;
    border-inline-start: 3px solid var(--color-success, #22c55e);
    background: rgba(34, 197, 94, 0.08);
    border-radius: var(--adm-radius-sm, 4px);
}

/* Footer alignment override — the standard adm-modal-footer already uses
   flex + justify-content:flex-end. VREC keeps this and adds gap tuning
   for the two-button layout. */
.vrec-modal-footer {
    gap: 10px;
}

/* Toast used by RecoveryModal._showToast — self-contained so the modal
   does not depend on a global toast helper. */
.vrec-toast {
    position: fixed;
    inset-block-end: 24px;
    inset-inline-end: 24px;
    z-index: 1100;
    max-width: 360px;
    padding-block: 12px;
    padding-inline: 16px;
    border-radius: var(--adm-radius-md, 6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    font-size: 13px;
    line-height: 1.4;
    color: #fff;
    animation: adm-fade-in 0.2s ease;
}

.vrec-toast--success {
    background: var(--color-success, #16a34a);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.vrec-toast--error {
    background: var(--color-danger, #dc2626);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Honour prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    .vrec-toast { animation: none; }
}

/* ── Sprint OWNER-ROLE-2026-08-21: Owner-role mobile responsiveness fixes ── */

/* MR-138: .adm-toggle-row is defined only in admin.css which is NOT loaded in the
   tenant shell. SettingsPage (Notifications tab) uses this class. Without a definition
   here the checkbox is 13x13px bare browser default — far below 44px WCAG 2.5.5.
   Mirror the admin.css definition here so it applies in the tenant shell context.
   PLIB-FE-2-FIX (2026-08-30): accent-color alone only tints the CHECKED-state fill —
   Chromium/most engines still paint the UNCHECKED box using the OS native control
   (flat white square on this dark theme), confirmed live via
   PolicyLibrarySharingModal.js's "Regulatory mandate" / "Distribution only" toggles.
   Switched to appearance:none + explicit border/background/checkmark so both the
   unchecked and checked states are intentionally themed against dark surfaces. */
.adm-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}
.adm-toggle-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid var(--adm-border-mid, rgba(255,255,255,0.2));
    border-radius: 4px;
    background: var(--adm-bg-elevated, #222d42);
    accent-color: var(--adm-teal, var(--color-teal, #00B4A2));
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.adm-toggle-row input[type="checkbox"]:checked {
    background: var(--adm-teal, var(--color-teal, #00B4A2));
    border-color: var(--adm-teal, var(--color-teal, #00B4A2));
}
.adm-toggle-row input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    inset-inline-start: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #0a0e1a;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.adm-toggle-row input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--adm-teal, var(--color-teal, #00B4A2));
    outline-offset: 2px;
}
.adm-toggle-row label {
    cursor: pointer;
    font-size: 14px;
    line-height: 1.5;
}
@media (max-width: 768px) {
    .adm-toggle-row input[type="checkbox"] {
        width: 24px;
        height: 24px;
    }
    .adm-toggle-row input[type="checkbox"]:checked::after {
        inset-inline-start: 8px;
        top: 3px;
        width: 6px;
        height: 12px;
    }
}

/* MR-135: BillingPage section label — "Current Plan", "Renewal", "Credits Remaining",
   "Account Type". Previously inline font-size:11px (below 12px readable minimum).
   Now uses class to allow CSS floor enforcement. */
.bil-section-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* MR-134: BillingPage plan-change row — select + button in flex row.
   Base: row is flex with gap; select has desktop min-width 240px (was inline).
   Mobile: stack select above button, full-width select, full-width button. */
.bil-plan-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.bil-plan-select {
    min-width: 240px;
    flex: 1;
}
@media (max-width: 768px) {
    .bil-plan-row {
        flex-direction: column;
        align-items: stretch;
    }
    .bil-plan-select {
        min-width: 0;
        width: 100%;
    }
    .bil-plan-row .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
}

/* MR-136: .adm-page-wrap padding reduction on mobile — used by BillingPage,
   SettingsPage, TeamPage. Base is 24px 32px; reduce to 12px 16px on mobile.
   Note: .adm-page-wrap is defined in auditor.css (lines 11–16); this override
   lives here so it applies inside the tenant shell where auditor.css loads last. */
@media (max-width: 768px) {
    .adm-page-wrap {
        padding: 12px 16px;
    }
}

/* MR-137/MR-139: .adm-tab-bar overflow on mobile — SettingsPage (10 tabs) and
   TeamPage (5 tabs) exceed 375px viewport width. Add overflow-x scroll containment
   so tabs are reachable by horizontal swipe.
   Pattern: tab bar gets overflow-x:auto (inner contained scroll), flex-wrap:nowrap
   (tabs stay single-row). adm-page-wrap gets overflow-x:hidden to prevent the
   contained tab bar scroll from propagating to document.scrollWidth. */
@media (max-width: 768px) {
    .adm-tab-bar,
    .adm-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;       /* Firefox — hide decorative scrollbar */
    }
    .adm-tab-bar::-webkit-scrollbar,
    .adm-tabs::-webkit-scrollbar {
        display: none;               /* WebKit — hide decorative scrollbar */
    }
    .adm-tab {
        flex-shrink: 0;              /* Prevent tabs from compressing below readable width */
        white-space: nowrap;
    }
    .adm-page-wrap {
        overflow-x: hidden;          /* Prevent tab bar inner scroll from expanding document.scrollWidth */
    }
}

/* ── PLIB-FE-1: Policy Library Page ────────────────────────────────────────────
   Classes for policy cards, bundle progress, and layout.
   All values reference existing CSS custom properties — no hardcoded tokens.
   ─────────────────────────────────────────────────────────────────────────── */

/* Card list grid */
.plib-card-list,
.plib-bundle-list {
    display: grid;
    gap: var(--spacing-md, 16px);
    margin-block-start: var(--spacing-md, 16px);
}

/* ── policy-card ── */
.policy-card {
    background: var(--adm-bg-card, var(--color-card-bg, #1e2330));
    border: 1px solid var(--adm-border, var(--color-border, rgba(255,255,255,.08)));
    border-radius: var(--adm-radius-md, 8px);
    padding: var(--spacing-md, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 8px);
}

.policy-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--adm-text-primary, var(--text-primary));
    margin: 0;
    line-height: 1.4;
}

.policy-card__desc {
    font-size: 0.875rem;
    color: var(--adm-text-secondary, var(--text-secondary));
    margin: 0;
}

/* Chip row — flex wrap, consistent gap */
.policy-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs, 4px);
    align-items: center;
}

/* Type indicator chip */
.policy-card__type-chip {
    /* inherits .adm-badge .adm-badge--neutral */
}

/* Mandate badge */
.policy-card__mandate-badge {
    /* inherits .adm-badge .adm-badge--warning */
}

/* Acknowledgement status badge */
.policy-card__ack-badge {
    /* inherits .adm-badge + modifier applied at render time */
}

/* Deadline countdown */
.policy-card__deadline-countdown {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--adm-amber, #f59e0b);
    background: var(--adm-amber-glow, rgba(245,158,11,.12));
    border: 1px solid rgba(245,158,11,.25);
    border-radius: var(--adm-radius-sm, 4px);
    padding: 2px 6px;
}

.policy-card__deadline-countdown--overdue {
    color: var(--adm-red, #ef4444);
    background: var(--adm-red-glow, rgba(239,68,68,.12));
    border-color: rgba(239,68,68,.25);
}

/* Language label — inherits adm-badge--info */
.policy-card__lang-label {
    /* inherits .adm-badge .adm-badge--info */
}

/* Actions row */
.policy-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs, 4px);
    align-items: center;
    margin-block-start: var(--spacing-xs, 4px);
}

/* Inline error per card */
.policy-card__inline-error {
    font-size: 0.75rem;
    color: var(--adm-red, #ef4444);
    margin-inline-start: var(--spacing-xs, 4px);
}

/* ── policy-bundle-progress ── */
.policy-bundle-progress {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 8px);
    margin-block: var(--spacing-xs, 4px);
}

/* Accessible container for role="progressbar" */
.policy-bundle-progress__bar {
    flex: 1;
    min-inline-size: 0;
}

.policy-bundle-progress__track {
    block-size: 6px;
    background: var(--adm-bg-elevated, rgba(255,255,255,.06));
    border-radius: 3px;
    overflow: hidden;
}

.policy-bundle-progress__fill {
    block-size: 100%;
    background: var(--adm-teal, #00b4a2);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.policy-bundle-progress__label {
    font-size: 0.75rem;
    color: var(--adm-text-secondary, var(--text-secondary));
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Bundle details / expandable item list ── */
.plib-bundle-details {
    margin-block-start: var(--spacing-sm, 8px);
    border-block-start: 1px solid var(--adm-border, rgba(255,255,255,.08));
    padding-block-start: var(--spacing-sm, 8px);
}

.plib-bundle-details__summary {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--adm-text-secondary, var(--text-secondary));
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.plib-bundle-details__summary::-webkit-details-marker { display: none; }
.plib-bundle-details__summary::before {
    content: '▶ ';
    font-size: 0.65em;
    vertical-align: middle;
}
.plib-bundle-details[open] .plib-bundle-details__summary::before {
    content: '▼ ';
}

.plib-bundle-items {
    margin-block-start: var(--spacing-sm, 8px);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.plib-bundle-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm, 8px);
    padding: 6px 0;
    border-block-end: 1px solid var(--adm-border, rgba(255,255,255,.05));
}

.plib-bundle-item:last-child { border-block-end: none; }

.plib-bundle-item__title {
    font-size: 0.875rem;
    color: var(--adm-text-primary, var(--text-primary));
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plib-bundle-item__ack {
    flex-shrink: 0;
}

.plib-bundle-items__empty {
    font-size: 0.875rem;
    color: var(--adm-text-muted, var(--text-muted));
    margin: 0;
}

/* ── Empty state ── */
.plib-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md, 16px);
    padding: var(--spacing-xl, 40px) var(--spacing-md, 16px);
    text-align: center;
}

.plib-empty-state__icon {
    font-size: 2.5rem;
    line-height: 1;
}

.plib-empty-state__message {
    font-size: 0.9375rem;
    color: var(--adm-text-secondary, var(--text-secondary));
    max-inline-size: 36ch;
    margin: 0;
}

/* ── Page info label (paging bar) ── */
.plib-page-info {
    font-size: 0.875rem;
    color: var(--adm-text-secondary, var(--text-secondary));
    padding-inline: var(--spacing-sm, 8px);
}

/* ── Responsive: single-column on narrow screens ── */
@media (max-width: 600px) {
    .policy-card__actions {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* MR-141: .page-header flex row — used by PermissionGroupsPage, InvitationsPage,
   GrantRequestsPage. At 375px the right-side action buttons can overflow if title
   is long or multiple buttons are present. Wrap to column at mobile. */
@media (max-width: 768px) {
    .page-header {
        flex-wrap: wrap;
    }
    .page-header .page-header__left {
        flex: 1 1 100%;
    }
    .page-header > .inv-actions-row,
    .page-header > .pg-header-actions,
    .page-header > button,
    .page-header > a {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .page-header > .inv-actions-row .btn,
    .page-header > .pg-header-actions .btn,
    .page-header > button.btn {
        min-height: 44px;
        flex: 1;
        justify-content: center;
    }
}