/* Rumlin design system — shared tokens (navy + orange) */
/* Lifted from design handoff: reference/styles.css */

:root {
  /* Navy family */
  --navy-950: #050e1f;
  --navy-900: #0a1830;
  --navy-800: #0f2147;
  --navy-700: #17315f;
  --navy-600: #23437a;
  --navy-500: #3a5a92;
  --navy-400: #6280ae;
  --navy-300: #97acca;

  /* Accent — Rumlin orange */
  --orange-600: #d9541a;
  --orange-500: #ea6a2f;
  --orange-400: #f38855;
  --orange-300: #fbb08a;
  --orange-100: #fde7d8;
  --orange-50:  #fdf1e7;

  /* Neutrals — warm ink */
  --ink-950: #0c1220;
  --ink-900: #131a2c;
  --ink-800: #1d2539;
  --ink-700: #353f57;
  --ink-600: #5a6581;
  --ink-500: #7f8aa5;
  --ink-400: #a9b2c8;
  --ink-300: #cdd3e2;
  --ink-200: #e3e7f0;
  --ink-150: #ecf0f7;
  --ink-100: #f3f5fb;
  --ink-50:  #f8f9fd;
  --paper:   #ffffff;

  /* Semantic */
  --ok-600:   #16a070;
  --ok-500:   #1fbf83;
  --ok-100:   #def5e9;
  --warn-600: #c78a10;
  --warn-500: #dfa031;
  --warn-100: #faecc6;
  --bad-600:  #c5443a;
  --bad-500:  #dc5a4f;
  --bad-100:  #fadbd7;

  /* Speaker roles */
  --agent:         var(--navy-700);
  --agent-tint:    #eaf0fa;
  --customer:      var(--orange-500);
  --customer-tint: #fdece0;

  /* Radius scale */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Shadow scale */
  --shadow-sm: 0 1px 2px rgba(10, 24, 48, 0.05), 0 1px 0 rgba(10, 24, 48, 0.03);
  --shadow-md: 0 4px 12px rgba(10, 24, 48, 0.06), 0 2px 4px rgba(10, 24, 48, 0.04);
  --shadow-lg: 0 18px 40px rgba(10, 24, 48, 0.12), 0 6px 14px rgba(10, 24, 48, 0.06);
  --shadow-btn: 0 4px 10px rgba(10, 24, 48, 0.18);

  /* Typography */
  --font-sans: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Space Mono", "SF Mono", ui-monospace, Menlo, monospace;
}

/* ── Shared utility classes ─────────────────────────────────────────── */

.rml-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.rml-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.rml-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Card chrome — use this as the baseline card surface */
.rml-card {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Ghost button */
.rml-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-700);
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.rml-ghost-btn:hover { background: var(--ink-100); color: var(--ink-900); }

/* Primary button */
.rml-primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 500;
  color: #fff;
  background: var(--navy-900);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: background 0.12s;
}
.rml-primary-btn:hover { background: var(--navy-800); }
.rml-primary-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Icon-only button (28×28) */
.rml-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-600);
  cursor: pointer;
  background: transparent;
  border: 0;
  transition: background 0.12s, color 0.12s;
}
.rml-icon-btn:hover { background: var(--ink-100); color: var(--ink-900); }

/* Badge / status chips */
.rml-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}
.rml-badge--ok   { color: var(--ok-600);   background: var(--ok-100); }
.rml-badge--warn { color: var(--warn-600); background: var(--warn-100); }
.rml-badge--bad  { color: var(--bad-600);  background: var(--bad-100); }
.rml-badge--high { color: var(--orange-600); background: var(--orange-100); }
.rml-badge--med  { color: var(--warn-600);   background: var(--warn-100); }
.rml-badge--muted { color: var(--ink-600); background: var(--ink-150); }

/* Section header inside a card */
.rml-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.rml-section-hdr h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-950);
}
.rml-section-hint {
  font-size: 10px;
  color: var(--ink-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Scrollbar polish */
.rml-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.rml-scroll::-webkit-scrollbar-thumb {
  background: var(--ink-200);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.rml-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--ink-300);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.rml-scroll::-webkit-scrollbar-track { background: transparent; }

/* ── Stat card ─────────────────────────────────────────────────────── */
.rml-stat {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-sm);
}
.rml-stat__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.rml-stat__value {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink-950);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.rml-stat__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-600);
}
.rml-stat__delta--up { color: var(--ok-600); }
.rml-stat__delta--down { color: var(--bad-600); }
.rml-stat__hint { font-size: 11.5px; color: var(--ink-500); }

/* ── Segmented control ─────────────────────────────────────────────── */
.rml-segctrl {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--ink-100);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
}
.rml-segctrl__btn {
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-600);
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.rml-segctrl__btn:hover { color: var(--ink-900); }
.rml-segctrl__btn.is-active {
  background: var(--navy-900);
  color: #fff;
  box-shadow: 0 1px 2px rgba(10, 24, 48, 0.18);
}

/* ── Empty state ───────────────────────────────────────────────────── */
.rml-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  color: var(--ink-500);
}
.rml-empty__icon {
  font-size: 24px;
  color: var(--ink-400);
}
.rml-empty__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
}
.rml-empty__desc {
  font-size: 12px;
  color: var(--ink-500);
  max-width: 40ch;
}

/* ── Table chrome ──────────────────────────────────────────────────── */
.rml-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.rml-table thead th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding: 10px 12px;
  border-bottom: 1px solid var(--ink-200);
  background: var(--ink-50);
  position: sticky;
  top: 0;
  z-index: 1;
}
.rml-table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--ink-150);
  color: var(--ink-800);
  vertical-align: middle;
}
.rml-table tbody tr:hover td { background: var(--ink-50); }
.rml-table tbody tr:last-child td { border-bottom: 0; }

/* ── Status pill (shared with ledger__pill--status) ────────────────── */
.rml-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 9999px;
  border: 1px solid var(--ink-200);
  background: var(--paper);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-700);
  white-space: nowrap;
}
.rml-status i { font-size: 12px; color: var(--ink-400); }
.rml-status--reviewed { background: #dcfce7; border-color: #86efac; color: #15803d; }
.rml-status--reviewed i { color: #16a34a; }
.rml-status--processing { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.rml-status--processing i { color: #d97706; }
.rml-status--failed { background: var(--bad-100); border-color: var(--bad-500); color: var(--bad-600); }
.rml-status--failed i { color: var(--bad-600); }

/* ── Legacy compat shims ──────────────────────────────────────────── */
/* Map old dashboard classes onto the new token palette so we don't have to
   hunt every call site. Safe to remove once call sites are migrated. */
.text-rumlin-blue { color: var(--navy-900) !important; }
.text-dashboard-muted { color: var(--ink-500) !important; }
.bg-dashboard-glow { background: var(--ink-100) !important; }
.hover\:bg-dashboard-glow:hover { background: var(--ink-100) !important; }
.hover\:text-rumlin-blue:hover { color: var(--navy-900) !important; }
.surface-card {
  background: var(--paper) !important;
  border: 1px solid var(--ink-200) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
.surface-table {
  background: var(--paper) !important;
  border: 1px solid var(--ink-200) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}