/* AI WorkForce OS — dark, professional SaaS dashboard theme. */

:root {
  --bg: #0b0e14;
  --bg-elev: #12161f;
  --bg-elev-2: #171c27;
  --border: #232a37;
  --text: #e6e9ef;
  --text-muted: #8b94a7;
  --accent: #5b8cff;
  --accent-dim: #29406e;
  --danger: #ff5c5c;
  --danger-dim: #4a1f1f;
  --ok: #3ecf8e;
  --radius: 10px;
  --sidebar-w: 248px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.app {
  display: flex;
  min-height: 100vh;
}

/* --- Sidebar --- */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 20px;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), #9b6bff);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}

.brand-text {
  font-weight: 600;
  letter-spacing: 0.2px;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  transition: background 0.12s ease, color 0.12s ease;
}

.nav-item:hover {
  background: var(--bg-elev-2);
  color: var(--text);
}

.nav-item.active {
  background: var(--accent-dim);
  color: #fff;
}

.sidebar-footer {
  margin-top: auto;
  padding: 12px 8px 0;
  color: var(--text-muted);
  font-size: 11.5px;
}

/* --- Content --- */
.content {
  flex: 1;
  padding: 28px 34px;
  overflow-x: hidden;
}

.page-title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 650;
}

.muted {
  color: var(--text-muted);
  margin: 0 0 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.card-title {
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.card-value {
  font-size: 26px;
  font-weight: 700;
  margin: 8px 0 2px;
}

.card-sub {
  color: var(--text-muted);
  font-size: 12px;
}

.panel {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 18px;
}

.panel h2 {
  margin: 0 0 8px;
  font-size: 15px;
}

.panel.danger {
  border-color: var(--danger-dim);
}

.confirm {
  display: block;
  margin-bottom: 14px;
  color: var(--text);
}

.btn-danger {
  background: var(--danger);
  color: #1a0000;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-weight: 600;
  cursor: pointer;
}

.btn-danger:disabled {
  background: var(--danger-dim);
  color: var(--text-muted);
  cursor: not-allowed;
}

.btn-ok {
  background: var(--ok);
  color: #05130d;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-weight: 600;
  cursor: pointer;
}

/* --- Tables --- */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.table th,
.table td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
}

.table th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.table td code {
  color: var(--accent);
}

/* --- Badges --- */
.badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.badge.ok {
  color: var(--ok);
  border-color: #1f4a35;
}

/* --- Auth screen --- */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
}

.auth-card .brand {
  padding: 0 0 12px;
}

.field {
  display: block;
  color: var(--text-muted);
  font-size: 13px;
  margin: 12px 0 4px;
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 11px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
}

.auth-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-weight: 600;
  cursor: pointer;
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 16px;
  cursor: pointer;
}

.btn-ghost:hover {
  color: var(--text);
}

.small {
  font-size: 12px;
}

.error {
  color: var(--danger);
  font-size: 13px;
  margin: 10px 0 0;
}

.field select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 11px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
}

.code-block {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  color: var(--accent);
  font-size: 12.5px;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Consent gate (issue #21) — a wider auth card with the disclosure list. */
.consent-card {
  max-width: 640px;
}

.consent-points {
  margin: 14px 0;
  padding-left: 20px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
}

.consent-points li {
  margin-bottom: 7px;
}

.consent-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

@media (max-width: 720px) {
  .sidebar {
    width: 100%;
    position: static;
  }
  .app {
    flex-direction: column;
  }
}

/* ===========================================================================
   Mission Control (Epic #104, Phase 2) — enterprise operations dashboard.
   Scoped under `.mc`. Reuses the app :root tokens for dark, and overrides a
   small --mc-* set under [data-mc-theme="light"] so the page can theme
   independently. RTL via [dir="rtl"]; responsive single-column on mobile.
   =========================================================================== */
.mc {
    --mc-bg: var(--bg);
    --mc-panel: var(--bg-elev);
    --mc-panel-2: var(--bg-elev-2);
    --mc-border: var(--border);
    --mc-text: var(--text);
    --mc-muted: var(--text-muted);
    --mc-accent: var(--accent);
    --mc-ok: var(--ok);
    --mc-warn: #e0a53b;
    --mc-block: var(--danger);
    --mc-unavail: #8b94a7;
    color: var(--mc-text);
}
.mc[data-mc-theme="light"] {
    --mc-bg: #f6f8fc;
    --mc-panel: #ffffff;
    --mc-panel-2: #eef1f7;
    --mc-border: #d8dee9;
    --mc-text: #1b2130;
    --mc-muted: #5b6577;
    --mc-accent: #2f5fd0;
    --mc-ok: #1f9d63;
    --mc-warn: #b7791f;
    --mc-block: #c0392b;
    --mc-unavail: #6b7486;
    background: var(--mc-bg);
    padding: 0 4px;
    border-radius: var(--radius);
}

/* Header */
.mc-header {
    display: flex; flex-wrap: wrap; gap: 1rem;
    align-items: flex-start; justify-content: space-between;
    padding-bottom: 0.75rem; margin-bottom: 1rem;
    border-bottom: 1px solid var(--mc-border);
}
.mc-title { font-size: 22px; font-weight: 650; margin: 0; }
.mc-sub { color: var(--mc-muted); margin: 0.15rem 0 0; font-size: 13px; }
.mc-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.mc-meta-item { font-size: 12px; color: var(--mc-text); }
.mc-muted { color: var(--mc-muted); }
.mc-note { font-size: 11px; }

/* Buttons + language + theme */
.mc-btn {
    background: var(--mc-panel-2); color: var(--mc-text);
    border: 1px solid var(--mc-border); border-radius: 8px;
    padding: 0.35rem 0.7rem; font-size: 12px; cursor: pointer;
}
.mc-btn:hover { border-color: var(--mc-accent); }
.mc-btn[disabled] { opacity: 0.5; cursor: default; }
.mc-icon { padding: 0.35rem 0.55rem; }
.mc-lang { display: inline-flex; border: 1px solid var(--mc-border); border-radius: 8px; overflow: hidden; }
.mc-lang-btn {
    background: transparent; color: var(--mc-muted); border: 0;
    padding: 0.3rem 0.55rem; font-size: 12px; cursor: pointer;
}
.mc-lang-btn.active { background: var(--mc-accent); color: #fff; }

/* Screen-reader-only live region */
.mc-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Loading / error states */
.mc-state {
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
    padding: 3rem 1rem; text-align: center; color: var(--mc-muted);
}
.mc-error { border: 1px solid var(--mc-border); border-radius: var(--radius); background: var(--mc-panel); }
.mc-error h2 { margin: 0; color: var(--mc-text); }
.mc-spinner {
    width: 28px; height: 28px; border-radius: 50%;
    border: 3px solid var(--mc-border); border-top-color: var(--mc-accent);
    animation: mc-spin 0.9s linear infinite;
}
@keyframes mc-spin { to { transform: rotate(360deg); } }

/* Banners */
.mc-banners { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.mc-banner {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.6rem 0.85rem; border-radius: 8px; font-size: 13px;
    border: 1px solid var(--mc-border); background: var(--mc-panel);
}
.mc-banner-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }

/* KPI cards */
.mc-kpis {
    display: grid; gap: 0.75rem; margin-bottom: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.mc-kpi { background: var(--mc-panel); border: 1px solid var(--mc-border); border-radius: var(--radius); padding: 0.75rem 0.85rem; }
.mc-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--mc-muted); }
.mc-kpi-value { font-size: 24px; font-weight: 700; margin-top: 0.2rem; }
.mc-kpi-sub { font-size: 11px; color: var(--mc-muted); min-height: 13px; }
.mc-val { color: var(--mc-text); }
.mc-unavail { color: var(--mc-unavail); font-size: 15px; font-weight: 600; }

/* Panels grid */
.mc-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.mc-panel { background: var(--mc-panel); border: 1px solid var(--mc-border); border-radius: var(--radius); padding: 0.9rem 1rem; }
.mc-panel-title { font-size: 13px; font-weight: 600; margin: 0 0 0.6rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--mc-muted); }
.mc-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.28rem 0; border-bottom: 1px dashed var(--mc-border); }
.mc-row:last-child { border-bottom: 0; }
.mc-row-label { color: var(--mc-muted); font-size: 13px; }
.mc-row-val { font-weight: 600; font-size: 13px; }

/* Missions distribution bar */
.mc-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--mc-panel-2); margin-bottom: 0.6rem; }
.mc-seg { height: 100%; }
.mc-chips { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; }
.mc-chip-stat { font-size: 12px; display: inline-flex; align-items: center; gap: 0.35rem; }
.mc-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.mc-seg-run, .mc-dot.mc-seg-run { background: var(--mc-accent); }
.mc-seg-queue, .mc-dot.mc-seg-queue { background: #6b7bd6; }
.mc-seg-wait, .mc-dot.mc-seg-wait { background: var(--mc-warn); }
.mc-seg-done, .mc-dot.mc-seg-done { background: var(--mc-ok); }
.mc-seg-fail, .mc-dot.mc-seg-fail { background: var(--mc-block); }
.mc-seg-cancel, .mc-dot.mc-seg-cancel { background: #7a8394; }
.mc-seg-created, .mc-dot.mc-seg-created { background: #4a6fa5; }
.mc-seg-unknown, .mc-dot.mc-seg-unknown { background: repeating-linear-gradient(45deg, #8b94a7, #8b94a7 3px, #5b6577 3px, #5b6577 6px); }
.mc-unknown { font-style: italic; }

/* Budget progress */
.mc-progress { height: 8px; border-radius: 4px; background: var(--mc-panel-2); overflow: hidden; margin-bottom: 0.5rem; }
.mc-progress-fill { display: block; height: 100%; background: var(--mc-accent); }
.mc-progress-fill.mc-over { background: var(--mc-block); }

/* Chips + severity */
.mc-chip { display: inline-block; font-size: 11px; padding: 0.12rem 0.5rem; border-radius: 999px; border: 1px solid currentColor; font-weight: 600; }
.mc-kill { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.mc-sev-ok { color: var(--mc-ok); }
.mc-sev-warn { color: var(--mc-warn); }
.mc-sev-block { color: var(--mc-block); }
.mc-sev-unavail { color: var(--mc-unavail); }

/* Recent-activity timeline */
.mc-body > .mc-panel:last-child { margin-top: 0.75rem; }
.mc-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mc-event { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--mc-border); font-size: 13px; }
.mc-event:last-child { border-bottom: 0; }
.mc-event-time { font-variant-numeric: tabular-nums; color: var(--mc-text); }
.mc-rel { font-size: 11px; }
.mc-event-type { font-weight: 600; }
.mc-event-sum { color: var(--mc-muted); }
.mc-event-meta { font-size: 11px; display: inline-flex; gap: 0.5rem; flex-wrap: wrap; }
.mc-event-meta code { background: var(--mc-panel-2); padding: 0 0.3rem; border-radius: 4px; }

/* Accessibility: visible keyboard focus */
.mc button:focus-visible, .mc [tabindex]:focus-visible { outline: 2px solid var(--mc-accent); outline-offset: 2px; }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .mc-spinner { animation: none; }
}

/* RTL nudges (flex + logical properties handle most of it) */
.mc[dir="rtl"] .mc-header { text-align: right; }
.mc[dir="rtl"] .mc-kpi-label { letter-spacing: 0; }

/* Responsive: single column on small screens, no horizontal overflow */
@media (max-width: 720px) {
    .mc-header { flex-direction: column; }
    .mc-kpis { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .mc-grid { grid-template-columns: 1fr; }
    .mc-event { font-size: 12px; }
}

/* ===========================================================================
   AI Workforce Guide (Epic #104 / #102, Phase 1 slice 4) — scoped under
   `.guide`. Enterprise, calm, premium; restrained CSS-only animation with a
   reduced-motion fallback; RTL via [dir="rtl"]; responsive 3→1 columns.
   =========================================================================== */
.guide { color: var(--text); }
.g-layout {
    display: grid; gap: 0.85rem;
    grid-template-columns: 280px minmax(0, 1fr) 300px;
    align-items: start;
}
.g-left, .g-right { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; }
.g-main { min-width: 0; display: flex; flex-direction: column; gap: 0.7rem; }

.g-title { font-size: 20px; font-weight: 650; margin: 0; }
.g-muted { color: var(--text-muted); }
.g-hint { font-size: 11.5px; margin: 0.25rem 0 0; }
.g-panel { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1rem; }
.g-panel-title { font-size: 12px; font-weight: 600; margin: 0 0 0.55rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }

/* Buttons / chips / fields */
.g-btn {
    background: var(--bg-elev-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 0.4rem 0.75rem; font-size: 12.5px; cursor: pointer;
}
.g-btn:hover { border-color: var(--accent); }
.g-btn[disabled] { opacity: 0.5; cursor: default; }
.g-btn-sm { padding: 0.28rem 0.6rem; font-size: 12px; }
.g-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.g-chip { display: inline-block; font-size: 11px; padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid currentColor; }
.g-chip-btn {
    background: transparent; color: var(--text);
    border: 1px solid var(--border); border-radius: 999px;
    padding: 0.3rem 0.7rem; font-size: 12px; cursor: pointer;
}
.g-chip-btn:hover { border-color: var(--accent); }
.g-chip-btn.active { background: var(--accent-dim); border-color: var(--accent); color: #fff; }
.g-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.g-field { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.4rem 0; font-size: 12.5px; }
.g-field.g-check { flex-direction: row; align-items: center; gap: 0.5rem; }
.g-input, .g-select {
    background: var(--bg); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 0.45rem 0.6rem; font: inherit; font-size: 13px; width: 100%;
}
.g-select { max-width: 100%; }

/* Screen-reader-only live region */
.g-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.g-state { padding: 3rem 1rem; text-align: center; }

/* ----- Avatar ----- */
.g-avatar-panel { text-align: center; }
.g-avatar { width: 96px; height: 96px; margin: 0 auto 0.4rem; color: var(--accent); }
.g-av-svg, .g-av-img { width: 100%; height: 100%; border-radius: 50%; }
/* Subtle presence: gentle breathing only, disabled under reduced motion. */
.g-av-idle .g-av-svg { animation: g-breathe 5s ease-in-out infinite; }
.g-av-live .g-av-svg { animation: g-breathe 4s ease-in-out infinite; }
.g-av-thinking .g-av-ring { animation: g-pulse 1.4s ease-in-out infinite; }
.g-av-thinking { color: var(--accent); }
.g-av-speaking { color: var(--ok); }
.g-av-blocked { color: var(--danger); }
.g-av-blocked .g-av-svg { filter: grayscale(0.5); }
.g-av-error { color: var(--danger); }
.g-av-off { color: var(--text-muted); }
.g-av-off .g-av-svg { filter: grayscale(1) opacity(0.7); }
@keyframes g-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@keyframes g-pulse { 0%,100% { stroke-opacity: 0.25; } 50% { stroke-opacity: 0.8; } }
.g-av-name { font-size: 16px; font-weight: 650; }
.g-av-role { font-size: 11.5px; color: var(--text-muted); }
/* The persistent AI disclosure — always visible, never subdued to invisibility. */
.g-disclosure {
    display: inline-block; margin: 0.45rem auto; font-size: 11px; font-weight: 600;
    color: var(--text); background: var(--accent-dim);
    border: 1px solid var(--accent); border-radius: 999px; padding: 0.15rem 0.6rem;
}
.g-av-status { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: 12px; color: var(--text-muted); }
.g-av-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.g-av-controls { display: flex; justify-content: center; gap: 0.4rem; margin-top: 0.55rem; flex-wrap: wrap; }
.g-lang { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-top: 0.55rem; }
.g-lang-btn { background: transparent; color: var(--text-muted); border: 0; padding: 0.28rem 0.55rem; font-size: 12px; cursor: pointer; }
.g-lang-btn.active { background: var(--accent); color: #fff; }

/* ----- Conversation ----- */
.g-conv-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.g-conv-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.g-conv-item {
    background: transparent; color: var(--text-muted);
    border: 1px solid var(--border); border-radius: 999px;
    padding: 0.25rem 0.65rem; font-size: 11.5px; cursor: pointer;
    max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.g-conv-item.active { border-color: var(--accent); color: var(--text); background: var(--accent-dim); }
.g-conv { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1rem; min-height: 320px; }
.g-welcome h2 { margin: 0 0 0.4rem; font-size: 17px; }
.g-welcome p { margin: 0.25rem 0; font-size: 13.5px; }
.g-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }

.g-msgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.g-msg { border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.8rem; max-width: 92%; }
.g-msg-user { align-self: flex-end; background: var(--accent-dim); border-color: var(--accent-dim); }
.g-msg-guide { align-self: flex-start; background: var(--bg-elev-2); }
.g-msg-system { align-self: center; background: transparent; border-style: dashed; color: var(--text-muted); font-size: 12.5px; max-width: 100%; }
[dir="rtl"] .g-msg-user { align-self: flex-start; }
[dir="rtl"] .g-msg-guide { align-self: flex-end; }
.g-msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-bottom: 0.3rem; font-size: 11.5px; }
.g-msg-sender { font-weight: 650; }
.g-msg-avatar { width: 18px; height: 18px; display: inline-block; color: var(--accent); }
.g-msg-avatar svg { width: 100%; height: 100%; }
.g-msg-disclosure { font-size: 10.5px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 0 0.4rem; }
.g-msg-time { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.g-rel { font-size: 10.5px; }
.g-msg-body { font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.g-msg-foot { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.4rem; font-size: 11px; }
.g-pending { display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); font-size: 12.5px; }
.g-thinking { display: inline-flex; gap: 3px; }
.g-thinking span { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: g-dot 1.2s ease-in-out infinite; }
.g-thinking span:nth-child(2) { animation-delay: 0.15s; }
.g-thinking span:nth-child(3) { animation-delay: 0.3s; }
@keyframes g-dot { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }

/* Response states — text chips, never colour-only */
.g-rs { display: inline-block; font-size: 10.5px; font-weight: 600; border: 1px solid currentColor; border-radius: 999px; padding: 0.08rem 0.5rem; }
.g-rs-grounded { color: var(--ok); }
.g-rs-insufficient { color: #e0a53b; }
.g-rs-ungrounded { color: var(--text-muted); }
.g-rs-unknown { color: #b48ead; }

/* Safety/system notice — distinct, never a chat bubble */
.g-notice {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
    border: 1px solid var(--danger); border-radius: 10px;
    background: var(--danger-dim); color: var(--text);
    padding: 0.55rem 0.8rem; font-size: 12.5px;
}

/* Composer */
.g-composer { display: flex; gap: 0.5rem; align-items: flex-end; }
.g-composer .g-input { min-height: 64px; resize: vertical; }

/* Citations */
.g-citation { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.65rem; margin-top: 0.45rem; background: var(--bg); }
.g-cit-head { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; font-size: 12px; }
.g-cit-label { font-weight: 700; color: var(--accent); }
.g-cit-title { font-weight: 600; }
.g-cit-excerpt { margin: 0.3rem 0; padding: 0.25rem 0.6rem; border-inline-start: 3px solid var(--accent-dim); font-size: 12px; color: var(--text-muted); }
.g-cit-foot { display: flex; flex-wrap: wrap; gap: 0.6rem; font-size: 10.5px; }
.g-cit-link { color: var(--accent); }
.g-msg-citations { margin-top: 0.3rem; }

/* Onboarding */
.g-ob-progress { height: 6px; border-radius: 3px; background: var(--bg-elev-2); overflow: hidden; margin-bottom: 0.4rem; }
.g-ob-fill { display: block; height: 100%; background: var(--accent); transition: width 0.25s ease; }
.g-ob-steplabel { font-size: 11.5px; color: var(--text-muted); margin-bottom: 0.5rem; }
.g-ob-nav { display: flex; gap: 0.4rem; margin-top: 0.65rem; }
.g-proposal-card { border: 1px solid var(--border); border-radius: 8px; padding: 0.55rem 0.7rem; margin-top: 0.5rem; background: var(--bg); }
.g-prop-role { font-weight: 650; font-size: 13.5px; margin-bottom: 0.3rem; }
.g-prop-row { display: flex; gap: 0.5rem; font-size: 11.5px; padding: 0.12rem 0; align-items: baseline; flex-wrap: wrap; }
.g-prop-row > .g-muted { min-width: 92px; }

/* Accessibility */
.guide button:focus-visible, .guide .g-input:focus-visible, .guide .g-select:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .g-av-svg, .g-av-ring, .g-thinking span, .g-ob-fill { animation: none !important; transition: none !important; }
}

/* Responsive: tablet 2-col, mobile 1-col; conversation first on mobile */
@media (max-width: 1100px) {
    .g-layout { grid-template-columns: 250px minmax(0, 1fr); }
    .g-right { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
    .g-right > .g-panel { flex: 1 1 280px; }
}
@media (max-width: 720px) {
    .g-layout { grid-template-columns: 1fr; }
    .g-main { order: 1; }
    .g-left { order: 2; flex-direction: column; }
    .g-right { order: 3; }
    .g-avatar { width: 64px; height: 64px; }
    .g-msg { max-width: 100%; }
}

/* =====================================================================
   AI Employees (Epic #104 Phase 3 — issue #53). Scoped under the shared
   .mc theme root (`.mc.emp`): reuses the Mission Control variables,
   chips, rows, panels, timeline, banners, and responsive rules; adds the
   directory grid, abstract avatars, profile header, tools cards, and
   filter bar. RTL via [dir="rtl"]; single column on mobile.
   ===================================================================== */

/* Extra chip severities shared by the employees surfaces */
.mc-muted-chip { color: var(--mc-unavail); }
.mc-sev-block-text { color: var(--mc-block); }

/* Persistent AI disclosure */
.emp-disclosure { margin: 0.3rem 0 0; font-size: 12px; color: var(--mc-muted); }
.emp-tag { margin: 0; font-size: 11px; color: var(--mc-unavail); }

/* Filter bar */
.emp-filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    margin: 0.75rem 0;
}
.emp-search {
    flex: 1 1 220px; min-width: 160px;
    background: var(--mc-panel); color: var(--mc-text);
    border: 1px solid var(--mc-border); border-radius: 8px;
    padding: 0.4rem 0.6rem; font-size: 13px;
}
.emp-select {
    background: var(--mc-panel); color: var(--mc-text);
    border: 1px solid var(--mc-border); border-radius: 8px;
    padding: 0.38rem 0.5rem; font-size: 13px;
}
.emp-check { font-size: 13px; color: var(--mc-text); display: inline-flex; align-items: center; gap: 0.3rem; }
.emp-filter-label { display: inline-flex; }

/* Employee directory grid + cards */
.emp-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.emp-card {
    display: flex; flex-direction: column; gap: 0.5rem;
    background: var(--mc-panel); border: 1px solid var(--mc-border);
    border-radius: var(--radius); padding: 0.85rem;
}
.emp-card-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.emp-card-title { flex: 1 1 auto; min-width: 0; }
.emp-name { margin: 0; font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.emp-desc { margin: 0; font-size: 12.5px; color: var(--mc-muted); }
.emp-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: none; border-radius: 50%;
    background: var(--mc-panel-2); border: 1px solid var(--mc-border);
    color: var(--mc-accent); font-weight: 700; font-size: 13px;
}
.emp-avatar-lg { width: 56px; height: 56px; font-size: 18px; }
.emp-stats {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 0.9rem; margin: 0;
}
.emp-stats > div { display: flex; justify-content: space-between; gap: 0.4rem; font-size: 12px; padding: 0.12rem 0; border-bottom: 1px dashed var(--mc-border); }
.emp-stats dt { color: var(--mc-muted); margin: 0; }
.emp-stats dd { margin: 0; font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.emp-open { align-self: flex-start; margin-top: 0.2rem; }
.emp-empty h2 { color: var(--mc-text); margin-bottom: 0.4rem; }
.emp-pager { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 0.9rem; }

/* Profile */
.emp-back { margin-bottom: 0.4rem; }
.emp-profile-head {
    display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: flex-start;
    padding: 0.9rem; margin-bottom: 0.75rem;
}
.emp-profile-id { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; }
.emp-profile-meta { flex: 1 1 320px; min-width: 0; }
.emp-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.5rem; }
.emp-confirm { display: inline-flex; gap: 0.4rem; align-items: center; }
.emp-subhead { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mc-muted); margin: 0.6rem 0 0.2rem; }
.emp-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.3rem 0; }
.emp-chips code { font-size: 11px; }

/* Tools cards */
.emp-tools { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.emp-tool { background: var(--mc-panel-2); border: 1px solid var(--mc-border); border-radius: 8px; padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.35rem; }
.emp-tool-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.emp-tool-id { font-size: 12.5px; font-weight: 650; overflow-wrap: anywhere; }
.emp-tool-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; font-size: 11.5px; align-items: center; }

/* Schedules */
.emp-schedule { padding: 0.3rem 0; border-bottom: 1px solid var(--mc-border); }
.emp-schedule:last-of-type { border-bottom: 0; }

/* Detail sections below the grid keep panel spacing */
.mc-body > .mc-panel { margin-top: 0.75rem; }

/* Responsive: stack the profile head and stats on small screens */
@media (max-width: 720px) {
    .emp-grid { grid-template-columns: 1fr; }
    .emp-profile-head { flex-direction: column; }
    .emp-stats { grid-template-columns: 1fr; }
    .emp-filters { flex-direction: column; align-items: stretch; }
    .emp-tools { grid-template-columns: 1fr; }
}

/* =========================================================================
   Connection Manager (Epic #46) — .cn-* extensions over the .mc theme.
   ========================================================================= */

.cn-page { display: flex; flex-direction: column; gap: 0.75rem; }
.cn-kpis { margin-top: 0.25rem; }

/* Filter bar */
.cn-filters {
    display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: end;
    background: var(--mc-panel); border: 1px solid var(--mc-border);
    border-radius: 10px; padding: 0.6rem 0.8rem;
}
.cn-search {
    flex: 1 1 220px; min-width: 180px; background: var(--mc-panel-2);
    color: var(--mc-text); border: 1px solid var(--mc-border);
    border-radius: 8px; padding: 0.45rem 0.6rem; font-size: 13px;
}
.cn-filter { display: flex; flex-direction: column; gap: 0.2rem; font-size: 11.5px; color: var(--mc-text-muted); }
.cn-filter select {
    background: var(--mc-panel-2); color: var(--mc-text);
    border: 1px solid var(--mc-border); border-radius: 8px;
    padding: 0.4rem 0.5rem; font-size: 12.5px; min-height: 34px;
}
.cn-filter.cn-check { flex-direction: row; align-items: center; gap: 0.4rem; padding-bottom: 0.4rem; }
.cn-filter.cn-check input { width: 16px; height: 16px; }

/* Connection cards */
.cn-card { display: flex; flex-direction: column; gap: 0.5rem; }
.cn-card-head { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.cn-family { border-style: dashed; }
.cn-card-name { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.cn-card-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cn-stats { margin: 0; }
.cn-open { align-self: flex-start; min-height: 40px; }
.cn-nomatch { padding: 0.75rem 0.25rem; }
.cn-empty h2 { margin-bottom: 0.4rem; }
.cn-rest { margin-top: 0.5rem; }

/* Detail */
.cn-detail-grid { align-items: start; }
.cn-note { font-size: 12px; margin: 0.5rem 0 0.4rem; }
.cn-notice { border: 1px solid currentColor; border-radius: 8px; padding: 0.5rem 0.7rem; font-size: 13px; }
.cn-code { opacity: 0.8; }
.cn-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cn-actions .mc-btn { min-height: 40px; }
.cn-cred-form, .cn-settings-form { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.4rem; }
.cn-cred-label { font-size: 11.5px; color: var(--mc-text-muted); }
.cn-cred-input {
    background: var(--mc-panel-2); color: var(--mc-text);
    border: 1px solid var(--mc-border); border-radius: 8px;
    padding: 0.5rem 0.6rem; font-size: 13px;
}
.cn-cred-input:focus-visible, .cn-search:focus-visible, .cn-filter select:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 1px;
}
.cn-confirm {
    border: 1px solid var(--danger); border-radius: 10px;
    padding: 0.7rem 0.9rem; margin-top: 0.6rem; background: var(--mc-panel-2);
}
.cn-confirm-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.cn-tools { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.cn-tool {
    background: var(--mc-panel-2); border: 1px solid var(--mc-border);
    border-radius: 8px; padding: 0.5rem 0.65rem;
    display: flex; flex-direction: column; gap: 0.25rem;
}
.cn-tool-id { font-size: 12px; overflow-wrap: anywhere; }
.cn-tool-summary { font-size: 12.5px; color: var(--mc-text-muted); }
.cn-scopes { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.mc-event-label { overflow-wrap: anywhere; }

/* RTL nudges */
.mc[dir="rtl"] .cn-open { align-self: flex-end; }

/* Responsive */
@media (max-width: 1100px) {
    .cn-detail-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .cn-grid { grid-template-columns: 1fr; }
    .cn-filters { flex-direction: column; align-items: stretch; }
    .cn-filter { width: 100%; }
    .cn-detail-grid { grid-template-columns: 1fr; }
    .cn-actions { flex-direction: column; align-items: stretch; }
}

/* =====================================================================
   Enterprise Company Builder (Epic #126, Slice 2). Scoped under the
   shared .mc theme root (`.mc.cb`): reuses the Mission Control tokens,
   panels, and chips. 10-step draft wizard — draft-only, nothing
   activates. RTL via [dir="rtl"]; single column on mobile;
   reduced-motion respected; visible focus outlines.
   ===================================================================== */

.cb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cb-h1 { margin: 0 0 0.25rem; font-size: 20px; color: var(--mc-text); }
.cb-muted { color: var(--mc-muted); margin: 0.2rem 0; font-size: 13px; }
.cb-hint { font-size: 12px; color: var(--mc-unavail); }
.cb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cb-langs { display: inline-flex; gap: 0.25rem; }
.cb-lang {
    background: var(--mc-panel); color: var(--mc-text);
    border: 1px solid var(--mc-border); border-radius: 8px;
    padding: 0.3rem 0.55rem; font-size: 12px; cursor: pointer;
}
.cb-lang.active { border-color: var(--mc-accent); color: var(--mc-accent); }

.cb-panel {
    background: var(--mc-panel); border: 1px solid var(--mc-border);
    border-radius: var(--radius); padding: 1rem; margin: 0.85rem 0;
}
.cb-panel-title { margin: 0 0 0.6rem; font-size: 15px; color: var(--mc-text); }

.cb-draft-row {
    display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem;
    padding: 0.5rem 0; border-bottom: 1px solid var(--mc-border);
}
.cb-draft-row:last-child { border-bottom: none; }
.cb-draft-name { font-weight: 600; color: var(--mc-text); }

/* Drafts lifecycle (Slice 3): filter toggle, rename, archive confirm */
.cb-drafts-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.6rem; flex-wrap: wrap;
}
.cb-draft-main {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.cb-draft-rev { font-size: 12px; }
.cb-draft-archived { opacity: 0.7; }
.cb-draft-actions { display: flex; gap: 0.4rem; margin-inline-start: auto; }
.cb-toggle {
    background: var(--mc-panel-2); color: var(--mc-text);
    border: 1px solid var(--mc-border); border-radius: 8px;
    padding: 0.4rem 0.75rem; font-size: 12px; cursor: pointer; min-height: 36px;
}
.cb-toggle[aria-pressed="true"] {
    border-color: var(--mc-accent); color: var(--mc-accent);
    background: color-mix(in srgb, var(--mc-accent) 12%, transparent);
}
.cb-rename { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; flex: 1 1 auto; }
.cb-rename .cb-input { flex: 1 1 160px; }
.cb-confirm {
    margin-top: 0.5rem; padding: 0.6rem 0.75rem;
    border: 1px solid var(--mc-warn); border-radius: 8px;
    background: color-mix(in srgb, var(--mc-warn) 8%, transparent);
    font-size: 13px; color: var(--mc-text);
}
.cb-confirm p { margin: 0 0 0.5rem; }
.cb-confirm-actions { display: flex; gap: 0.5rem; }

/* Wizard */
.cb-wizard { display: flex; flex-direction: column; gap: 0.7rem; }
.cb-progress {
    height: 8px; background: var(--mc-panel-2); border-radius: 999px; overflow: hidden;
}
.cb-progress-fill {
    display: block; height: 100%; background: var(--mc-accent);
    transition: width 0.25s ease;
}
.cb-steplabel { font-size: 12px; color: var(--mc-muted); }

.cb-field { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.4rem 0; font-size: 13px; color: var(--mc-text); }
.cb-input {
    background: var(--mc-panel-2); color: var(--mc-text);
    border: 1px solid var(--mc-border); border-radius: 8px;
    padding: 0.45rem 0.6rem; font-size: 13px;
}

.cb-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cb-chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    background: var(--mc-panel-2); color: var(--mc-text);
    border: 1px solid var(--mc-border); border-radius: 999px;
    padding: 0.2rem 0.55rem; font-size: 12px;
}
.cb-chip-tool { color: var(--mc-accent); }
.cb-chip-btn {
    background: var(--mc-panel-2); color: var(--mc-text);
    border: 1px solid var(--mc-border); border-radius: 999px;
    padding: 0.3rem 0.7rem; font-size: 12px; cursor: pointer;
}
.cb-chip-btn.active { border-color: var(--mc-accent); color: var(--mc-accent); background: color-mix(in srgb, var(--mc-accent) 12%, transparent); }

.cb-list { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.4rem 0; }
.cb-row {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    padding: 0.4rem 0.5rem; border: 1px solid var(--mc-border);
    border-radius: 8px; background: var(--mc-panel-2);
}
.cb-check { cursor: pointer; }
.cb-row-name { flex: 1 1 auto; color: var(--mc-text); font-size: 13px; }

/* Severity labels — state words, never color-only */
.cb-sev-ok { color: var(--mc-ok); border-color: var(--mc-ok); }
.cb-sev-info { color: var(--mc-accent); border-color: var(--mc-accent); }
.cb-sev-warn { color: var(--mc-warn); border-color: var(--mc-warn); }
.cb-sev-muted { color: var(--mc-unavail); border-color: var(--mc-unavail); }

/* Role cards */
.cb-role-card {
    background: var(--mc-panel-2); border: 1px solid var(--mc-border);
    border-radius: var(--radius); padding: 0.75rem; margin: 0.5rem 0;
}
.cb-role-name { font-weight: 600; color: var(--mc-text); margin-bottom: 0.35rem; }
.cb-role-row {
    display: flex; align-items: flex-start; gap: 0.6rem; flex-wrap: wrap;
    padding: 0.25rem 0; font-size: 13px; color: var(--mc-text);
}
.cb-role-row > .cb-muted { min-width: 120px; }

/* Nav + buttons */
.cb-nav { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.cb-btn {
    background: var(--mc-panel-2); color: var(--mc-text);
    border: 1px solid var(--mc-border); border-radius: 8px;
    padding: 0.5rem 0.9rem; font-size: 13px; cursor: pointer; min-height: 40px;
}
.cb-btn-sm { padding: 0.4rem 0.75rem; }
.cb-btn-primary { background: var(--mc-accent); color: #fff; border-color: var(--mc-accent); }
.cb-btn-danger { color: var(--mc-block); border-color: var(--mc-block); }
.cb-btn[disabled] { opacity: 0.6; cursor: not-allowed; }

.cb-ok { color: var(--mc-ok); font-size: 13px; }
.cb-err { color: var(--mc-block); font-size: 13px; }

/* RTL mirrors the flex rows */
[dir="rtl"] .cb-head { flex-direction: row-reverse; }
[dir="rtl"] .cb-role-row > .cb-muted { text-align: right; }

/* Focus + motion */
.cb-chip-btn:focus-visible, .cb-btn:focus-visible, .cb-lang:focus-visible, .cb-input:focus-visible, .cb-toggle:focus-visible {
    outline: 2px solid var(--mc-accent); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .cb-progress-fill { transition: none; }
}
@media (max-width: 720px) {
    .cb-head { flex-direction: column; }
    .cb-role-row { flex-direction: column; gap: 0.15rem; }
    .cb-draft-actions { margin-inline-start: 0; }
}

/* ===========================================================================
   Business Diagnosis (diag-*) — one-question-at-a-time journey (#183 Slice 6)
   =========================================================================== */

.diag { color: var(--mc-text); }
.diag-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 0.8rem;
}
.diag-h1 { margin: 0 0 0.25rem; font-size: 20px; color: var(--mc-text); }
.diag-muted { color: var(--mc-muted); margin: 0.2rem 0; font-size: 13px; }
.diag-hint { font-size: 12px; color: var(--mc-unavail); margin: 0.2rem 0; }
.diag-disclosure {
    font-size: 12px; color: var(--mc-unavail); margin: 0.2rem 0;
    border-inline-start: 3px solid var(--mc-border); padding-inline-start: 0.5rem;
}
/* Visually hidden, screen-reader-only live region. */
.diag-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* Language switcher */
.diag-langs { display: inline-flex; gap: 0.25rem; }
.diag-lang {
    background: var(--mc-panel-2); color: var(--mc-muted);
    border: 1px solid var(--mc-border); border-radius: 8px;
    padding: 0.3rem 0.6rem; font-size: 12px; cursor: pointer; min-height: 32px;
}
.diag-lang.active { border-color: var(--mc-accent); color: var(--mc-accent); }

/* Panels and cards */
.diag-panel {
    background: var(--mc-panel); border: 1px solid var(--mc-border);
    border-radius: var(--radius); padding: 1rem; margin: 0.6rem 0;
}
.diag-panel-title { margin: 0 0 0.6rem; font-size: 15px; color: var(--mc-text); }
.diag-review-head { margin-bottom: 0.6rem; }
.diag-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0.7rem;
}
.diag-card {
    background: var(--mc-panel); border: 1px solid var(--mc-border);
    border-radius: var(--radius); padding: 0.85rem;
}
.diag-card-title { margin: 0 0 0.5rem; font-size: 14px; color: var(--mc-text); }
.diag-sub-title { margin: 0.5rem 0 0.25rem; font-size: 13px; color: var(--mc-text); }

/* Wizard */
.diag-wizard { display: flex; flex-direction: column; gap: 0.7rem; }
.diag-progress {
    height: 6px; border-radius: 999px; background: var(--mc-panel-2);
    overflow: hidden; border: 1px solid var(--mc-border);
}
.diag-progress-fill {
    display: block; height: 100%; background: var(--mc-accent);
    transition: width 0.2s ease;
}
.diag-steplabel { font-size: 12px; color: var(--mc-muted); margin: 0; }

/* Fields */
.diag-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 13px; }
.diag-sublabel { font-size: 12px; color: var(--mc-muted); }
.diag-input {
    background: var(--mc-panel-2); color: var(--mc-text);
    border: 1px solid var(--mc-border); border-radius: 8px;
    padding: 0.45rem 0.6rem; font-size: 13px; min-height: 36px;
}
.diag-textarea { min-height: 90px; resize: vertical; }
.diag-addrow { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.diag-addrow .diag-input { flex: 1 1 160px; }
.diag-check {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 12px; color: var(--mc-text);
}

/* Chips and step lists */
.diag-chips {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
    list-style: none; margin: 0.3rem 0; padding: 0;
}
.diag-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: var(--mc-panel-2); border: 1px solid var(--mc-border);
    border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 12px;
    color: var(--mc-text);
}
.diag-chip-kind { color: var(--mc-muted); font-size: 11px; }
.diag-chip-btn {
    background: transparent; color: var(--mc-muted); border: 0;
    cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0.15rem;
}
.diag-chip-btn:hover { color: var(--mc-block); }
.diag-steplist { margin: 0.3rem 0; padding-inline-start: 1.2rem; }
.diag-steprow {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    padding: 0.2rem 0; font-size: 13px; color: var(--mc-text);
}
.diag-editrow {
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
    padding: 0.25rem 0;
}
.diag-editrow .diag-input { flex: 1 1 180px; }
.diag-editrow-actions { display: inline-flex; gap: 0.3rem; }
.diag-badge {
    display: inline-block; background: var(--mc-panel-2);
    border: 1px solid var(--mc-accent); color: var(--mc-accent);
    border-radius: 999px; padding: 0.05rem 0.5rem; font-size: 11px;
}
.diag-candidate {
    border-top: 1px solid var(--mc-border); margin-top: 0.5rem; padding-top: 0.5rem;
}

/* Metadata rows */
.diag-row {
    display: flex; align-items: flex-start; gap: 0.6rem; flex-wrap: wrap;
    padding: 0.2rem 0; font-size: 13px; color: var(--mc-text);
}
.diag-row-label { min-width: 140px; color: var(--mc-muted); }
.diag-row-val { flex: 1 1 auto; }
/* Numbers/identifiers stay LTR even inside RTL text. */
.diag-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* Nav + buttons */
.diag-nav { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.diag-btn {
    background: var(--mc-panel-2); color: var(--mc-text);
    border: 1px solid var(--mc-border); border-radius: 8px;
    padding: 0.5rem 0.9rem; font-size: 13px; cursor: pointer; min-height: 40px;
}
.diag-btn-sm { padding: 0.35rem 0.7rem; min-height: 32px; }
.diag-btn-primary { background: var(--mc-accent); color: #fff; border-color: var(--mc-accent); }
.diag-btn-danger { color: var(--mc-block); border-color: var(--mc-block); }
.diag-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.diag-err { color: var(--mc-block); font-size: 13px; }

/* #183 Slice 8: simulation-readiness truth-table pass/fail values. */
.diag-pass { color: var(--mc-ok); font-weight: 600; }
.diag-fail { color: var(--mc-block); font-weight: 600; }

/* RTL: logical properties above mirror automatically; align labels. */
[dir="rtl"] .diag-row-label { text-align: right; }

/* Focus + motion */
.diag-btn:focus-visible, .diag-lang:focus-visible, .diag-input:focus-visible,
.diag-chip-btn:focus-visible {
    outline: 2px solid var(--mc-accent); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .diag-progress-fill { transition: none; }
}
@media (max-width: 720px) {
    .diag-head { flex-direction: column; }
    .diag-row { flex-direction: column; gap: 0.15rem; }
    .diag-cards { grid-template-columns: 1fr; }
}

/* #184 Slice 2: the deterministic, side-effect-free simulation panel.
   Logical properties throughout so RTL (Arabic) mirrors automatically. */
.diag-sim-disclosures {
    list-style: none; margin: 0.3rem 0 0.6rem; padding: 0;
    display: flex; flex-direction: column; gap: 0.2rem;
}
.diag-sim-subtitle { margin: 0.7rem 0 0.3rem; font-size: 13px; color: var(--mc-text); }
.diag-sim-list, .diag-sim-checklist, .diag-sim-results {
    list-style: none; margin: 0.3rem 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.35rem;
}
.diag-sim-steps { margin: 0.3rem 0; padding-inline-start: 1.2rem; }
.diag-sim-row, .diag-sim-check, .diag-sim-result-row {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    padding: 0.25rem 0; font-size: 13px; color: var(--mc-text);
    border-block-end: 1px solid var(--mc-border);
}
.diag-sim-row-fixture, .diag-sim-check-label { flex: 1 1 auto; }
.diag-sim-step {
    border: 1px solid var(--mc-border); border-radius: var(--radius);
    padding: 0.5rem 0.6rem; margin-block-end: 0.4rem; list-style: none;
}
.diag-sim-step-head {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    margin-block-end: 0.3rem;
}
.diag-sim-step-kind { font-weight: 600; color: var(--mc-text); }
.diag-sim-block-row { align-items: flex-start; }
/* pass|warn|block chips (shared by preflight items and the overall outcome). */
.diag-sim-chip {
    display: inline-flex; align-items: center; border-radius: 999px;
    padding: 0.1rem 0.55rem; font-size: 12px; font-weight: 600;
    border: 1px solid var(--mc-border);
}
.diag-sim-chip.diag-pass { color: var(--mc-ok); border-color: var(--mc-ok); }
.diag-sim-chip.diag-warn { color: var(--mc-warn); border-color: var(--mc-warn); }
.diag-sim-chip.diag-fail { color: var(--mc-block); border-color: var(--mc-block); }
.diag-warn { color: var(--mc-warn); font-weight: 600; }
.diag-sim-stale {
    display: inline-block; background: var(--mc-panel-2);
    border: 1px solid var(--mc-warn); color: var(--mc-warn);
    border-radius: 8px; padding: 0.1rem 0.5rem; font-size: 12px;
}
.diag-sim-acked { color: var(--mc-ok); font-size: 12px; font-weight: 600; }
.diag-sim-hardblock { color: var(--mc-block); font-size: 12px; }
.diag-sim-detail-head { margin-block: 0.3rem; }
.diag-sim-back { margin-block-end: 0.5rem; }
.diag-sim-run:focus-visible, .diag-sim-view:focus-visible,
.diag-sim-ack:focus-visible, .diag-sim-back:focus-visible {
    outline: 2px solid var(--mc-accent); outline-offset: 2px;
}