/* ═══════════════════════════════════════════════════════════════
   DMG Platform — Refinement layer
   Loaded after components.css. Adds depth, hierarchy and motion on
   top of the base component styles rather than replacing them, so
   existing markup keeps working while the whole app reads modern.
   ═══════════════════════════════════════════════════════════════ */

:root, [data-theme="dark"] {
  --elev-1: 0 1px 2px rgba(0,0,0,.28), 0 1px 1px rgba(0,0,0,.16);
  --elev-2: 0 2px 4px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.22);
  --elev-3: 0 8px 24px rgba(0,0,0,.36), 0 2px 6px rgba(0,0,0,.24);
  --hairline: rgba(255,255,255,.06);
  --sheen: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 42%);
  --grad-primary: linear-gradient(135deg, #ff7a26 0%, #ff5e00 55%, #ec4f00 100%);
  --surface-raised: #202024;
}
[data-theme="light"] {
  --elev-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --elev-2: 0 2px 4px rgba(16,24,40,.05), 0 8px 20px rgba(16,24,40,.06);
  --elev-3: 0 12px 32px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.05);
  --hairline: rgba(16,24,40,.05);
  --sheen: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 42%);
  --surface-raised: #ffffff;
}

/* ─── Typography ─────────────────────────────────────────────── */
h1 { font-size: 1.6rem; font-weight: 650; letter-spacing: -0.028em; }
h2 { letter-spacing: -0.022em; }
h3 { letter-spacing: -0.018em; }

/* ─── Page header ────────────────────────────────────────────── */
.page-header {
  position: relative;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-light);
}
/* layout.css makes .page-header itself `display:flex`. A single wrapper child
   is therefore a flex ITEM, which shrink-wraps to its content — so the
   justify-between inside it has no free space to distribute and the action
   buttons bunch up beside the title instead of sitting at the right edge.
   Force the wrapper to span the full row. :only-child so a header that puts
   its h1 and actions as separate direct children keeps working. */
.page-header > .d-flex:only-child {
  flex: 1 1 100%;
  min-width: 0;
}
.page-header h1 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.page-subtitle {
  margin-top: 0.3rem;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  max-width: 70ch;
}

/* ─── Cards ──────────────────────────────────────────────────── */
.card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
  transition: box-shadow var(--transition-base), border-color var(--transition-base),
              transform var(--transition-base);
}
.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 60px;
  background: var(--sheen);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  pointer-events: none;
}
.card-header {
  position: relative;
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid var(--border-light);
  background: transparent;
}
.card-header h2, .card-header h3 {
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.card-header h3 > i, .card-header h2 > i { color: var(--primary); opacity: .9; }
.card-body { padding: 1.25rem; position: relative; }

.card-interactive:hover {
  border-color: var(--primary-alpha-30);
  box-shadow: var(--elev-2);
  transform: translateY(-2px);
}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 550;
  letter-spacing: -0.005em;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              box-shadow var(--transition-fast), transform var(--transition-fast),
              color var(--transition-fast);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-alpha-30);
}
.btn-primary {
  background: var(--grad-primary);
  border-color: transparent;
  box-shadow: var(--elev-1), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-primary:hover {
  background: var(--grad-primary);
  filter: brightness(1.07);
  box-shadow: var(--elev-2), 0 0 18px var(--primary-alpha-20), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-secondary {
  background: var(--surface-raised);
  box-shadow: var(--elev-1);
}
.btn-secondary:hover { border-color: var(--primary-alpha-30); box-shadow: var(--elev-2); }
.btn-ghost:hover { background: var(--primary-alpha-10); color: var(--primary); }
.btn-danger, .btn-success, .btn-warning, .btn-info { box-shadow: var(--elev-1); }

/* ─── Stat cards ─────────────────────────────────────────────── */
.stat-card {
  position: relative;
  padding: 1.05rem 1.15rem;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--elev-1);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base),
              border-color var(--transition-base);
}
.stat-card::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--grad-primary);
  opacity: .85;
}
.stat-card.is-success::after { background: var(--success); }
.stat-card.is-error::after   { background: var(--error); }
.stat-card.is-warning::after { background: var(--warning); }
.stat-card.is-muted::after   { background: var(--border-color); }
.stat-card:hover { box-shadow: var(--elev-2); transform: translateY(-1px); }
.stat-card-label {
  font-size: 0.68rem;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}
.stat-card-value {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.035em;
}

/* ─── Forms ──────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
.form-group:last-child { margin-bottom: 0; }
/* Inline forms are flex rows — a bottom margin on the input's form-group
   pushes it above the button's centerline. */
.form-inline .form-group { margin-bottom: 0; }
.form-input, .form-select, .form-textarea {
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}
.form-input:hover:not(:focus), .form-select:hover:not(:focus), .form-textarea:hover:not(:focus) {
  border-color: var(--text-muted);
}
.form-label {
  font-size: 0.78rem;
  font-weight: 550;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  text-transform: none;
}

/* ─── Tables ─────────────────────────────────────────────────── */
.table-wrapper {
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
  background: var(--bg-card);
}
.table th {
  background: transparent;
  font-size: 0.66rem;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  padding: 0.7rem 0.9rem;
}
.table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--hairline);
}
.table tbody tr { transition: background var(--transition-fast); }
.table tbody tr:hover { background: var(--primary-alpha-10); }

/* ─── Badges ─────────────────────────────────────────────────── */
.badge {
  padding: 0.24rem 0.6rem;
  font-size: 0.68rem;
  font-weight: 600;
  border: 1px solid transparent;
  gap: 0.35rem;
}
.badge-success { border-color: rgba(34,197,94,.28); }
.badge-error   { border-color: rgba(239,68,68,.28); }
.badge-warning { border-color: rgba(245,158,11,.28); }
.badge-info    { border-color: rgba(59,130,246,.28); }
.badge-primary { border-color: var(--primary-alpha-30); }
.badge-muted   { border-color: var(--border-color); }
/* Status dot */
.badge-dot::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.badge-pulse::before { animation: pulse 1.6s ease-in-out infinite; }

/* ─── Sidebar ────────────────────────────────────────────────── */
.sidebar-link {
  position: relative;
  border-radius: var(--radius-sm);
  margin: 1px 0.5rem;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar-link:hover { background: var(--primary-alpha-10); }
.sidebar-link.active {
  background: var(--primary-alpha-10);
  color: var(--primary);
  font-weight: 550;
}
.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: -0.5rem; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 60%;
  border-radius: 0 3px 3px 0;
  background: var(--grad-primary);
}
.sidebar-section-label {
  font-size: 0.64rem;
  letter-spacing: 1px;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ─── Topbar ─────────────────────────────────────────────────── */
.topbar {
  background: color-mix(in srgb, var(--bg-nav) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border-light);
}
.topbar-credits {
  border-radius: 999px;
  box-shadow: var(--elev-1);
}

/* ─── Empty state ────────────────────────────────────────────── */
.empty-state {
  padding: 3.25rem 1.5rem;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}
.empty-state-icon {
  width: 3.5rem; height: 3.5rem;
  margin: 0 auto 0.9rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primary-alpha-10);
  color: var(--primary);
  font-size: 1.4rem;
}

/* ─── Alerts ─────────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius-md);
  border-left-width: 3px;
  box-shadow: var(--elev-1);
  padding: 0.85rem 1rem;
}

/* ─── Progress ───────────────────────────────────────────────── */
/* Footer row under a progress bar: processed hard-left, concurrency centred,
   total hard-right. Equal flex basis on the outer cells keeps the middle
   label optically centred even as the side numbers change width mid-run. */
.progress-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.progress-meta-left,
.progress-meta-right {
  flex: 1 1 0;
  min-width: 0;
}
.progress-meta-right { text-align: right; }
.progress-meta-center {
  flex: 0 0 auto;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .progress-meta { flex-wrap: wrap; }
  .progress-meta-left, .progress-meta-right { flex: 1 1 auto; }
  .progress-meta-center { flex: 1 1 100%; order: 3; margin-top: 0.25rem; }
}

.progress { height: 6px; background: var(--border-light); }
.progress-bar {
  background: var(--grad-primary);
  box-shadow: 0 0 12px var(--primary-alpha-30);
}

/* ─── Modal ──────────────────────────────────────────────────── */
.modal { box-shadow: var(--elev-3); border-radius: var(--radius-lg); }
.modal-overlay { background: rgba(8,8,10,.62); backdrop-filter: blur(6px); }

/* ─── Tooltip ────────────────────────────────────────────────── */
[data-tooltip]::after {
  box-shadow: var(--elev-2);
  border: 1px solid var(--border-color);
  padding: 0.35rem 0.65rem;
  font-weight: 500;
}

/* ─── Section list rows (reusable) ───────────────────────────── */
.list-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast);
}
.list-row + .list-row { margin-top: 0.5rem; }
.list-row:hover {
  border-color: var(--primary-alpha-30);
  box-shadow: var(--elev-1);
}
.list-row-icon {
  flex-shrink: 0;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--primary-alpha-10);
  color: var(--primary);
}
.list-row-body { flex: 1; min-width: 0; }
.list-row-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  display: flex; align-items: center; gap: 0.5rem;
}
.list-row-meta {
  margin-top: 0.2rem;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
}
.list-row-meta .sep { opacity: .5; }
.list-row-actions { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }

/* ─── Key/value detail grid ──────────────────────────────────── */
.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.85rem 1.25rem;
}
.kv-item .kv-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}
.kv-item .kv-value {
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--text-primary);
}

/* ─── Service cards (dashboard) ──────────────────────────────── */
.service-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
  padding: 1.35rem;
}
.service-card::before { height: 3px; background: var(--grad-primary); }
.service-card::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 70px;
  background: var(--sheen);
  pointer-events: none;
}
.service-card:hover {
  border-color: var(--primary-alpha-30);
  box-shadow: var(--elev-2), var(--shadow-glow);
  transform: translateY(-3px);
}
.service-card-icon {
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--primary-alpha-10);
  color: var(--primary);
  font-size: 1.15rem;
}
.service-card-name { font-size: 1rem; font-weight: 650; letter-spacing: -0.02em; }
.service-card-stat-value { font-size: 1.25rem; letter-spacing: -0.03em; }

/* ─── Metric tile (compact inline stat) ──────────────────────── */
.metric {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.9rem;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--border-color);
  border-radius: var(--radius-md);
}
.metric.is-success { border-left-color: var(--success); }
.metric.is-error   { border-left-color: var(--error); }
.metric.is-warning { border-left-color: var(--warning); }
.metric.is-primary { border-left-color: var(--primary); }
.metric .metric-value {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
.metric.is-success .metric-value { color: var(--success); }
.metric.is-error   .metric-value { color: var(--error); }
.metric.is-warning .metric-value { color: var(--warning); }
.metric .metric-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

/* ─── Auth screen ────────────────────────────────────────────── */
.auth-card, .login-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-3);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
}

/* ─── Flash / alert dismiss affordance ───────────────────────── */
.alert { position: relative; }
.alert i:first-child { margin-top: 2px; flex-shrink: 0; }

/* ─── Health / status dot ────────────────────────────────────── */
.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.is-up   { background: var(--success); box-shadow: 0 0 8px rgba(34,197,94,.5); }
.status-dot.is-down { background: var(--error);   box-shadow: 0 0 8px rgba(239,68,68,.5); }
.status-dot.is-unknown { background: var(--text-muted); }

/* ─── Section heading (inside card bodies) ───────────────────── */
.section-title {
  font-size: 0.7rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-light);
}

/* ─── Page enter animation ───────────────────────────────────── */
.page-content > * { animation: fadeInUp .35s ease-out both; }
.page-content > *:nth-child(2) { animation-delay: .04s; }
.page-content > *:nth-child(3) { animation-delay: .08s; }
.page-content > *:nth-child(n+4) { animation-delay: .1s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .card:hover, .stat-card:hover, .btn:active { transform: none !important; }
}

/* ─── Filter bar ──────────────────────────────────────────────
   Shared layout for the "Filters" card on list pages (jobs, users,
   audit, …). Three things it guarantees, which hand-rolled flex rows
   kept getting wrong:

   1. Controls bottom-align, so labelled and unlabelled children sit on
      the same baseline.
   2. Actions sit at the RIGHT of the container regardless of how many
      filters there are — previously a bar with no flex:1 child bunched
      everything to the left and left dead space.
   3. Inputs and action buttons share ONE explicit height. Padding alone
      cannot guarantee this: .form-select is ~2.375rem while .btn is
      ~2.2rem and .btn-sm ~1.75rem, so the button read as misaligned even
      when correctly bottom-aligned.                                    */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}
.filter-bar .form-group { margin-bottom: 0; }

/* Scoped so the rest of the app's control sizing is untouched. */
.filter-bar .form-input,
.filter-bar .form-select,
.filter-bar-actions .btn {
  min-height: 2.375rem;
}

.filter-bar-actions {
  margin-left: auto;          /* pin actions to the right edge */
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}
.filter-bar-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
}

/* Narrow screens: the actions row drops below and spans full width
   rather than being squeezed against the last control. */
@media (max-width: 640px) {
  .filter-bar-actions { margin-left: 0; width: 100%; }
  .filter-bar-actions .btn { flex: 1; justify-content: center; }
}

/* ─── Data Store admin ────────────────────────────────────────
   The page carries five distinct jobs (monitor, ingest, inspect,
   maintain, configure). As one scroll it was unreadable; these are
   the tab chrome and the few widgets that page needs.          */
.ds-tabs {
  display: flex; gap: 0.25rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1.25rem;
}
.ds-tab {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 0.6rem 1rem; font-size: 0.85rem; font-weight: 600;
  color: var(--text-muted); border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 0.45rem;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.ds-tab:hover { color: var(--text-primary); }
.ds-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.ds-tab .count {
  font-size: 0.7rem; padding: 0.05rem 0.4rem; border-radius: 999px;
  background: var(--primary-alpha-10); color: var(--primary);
}
.ds-panel { display: none; }
.ds-panel.active { display: block; }

/* Ingest coverage calendar — a missing day is invisible in a list of
   runs and obvious in a grid. */
.ds-cal { display: flex; flex-wrap: wrap; gap: 3px; }
.ds-cal-day {
  width: 15px; height: 15px; border-radius: 3px;
  background: var(--border-color); cursor: default;
  transition: transform var(--transition-fast);
}
.ds-cal-day:hover { transform: scale(1.35); }
.ds-cal-day.completed { background: var(--success); }
.ds-cal-day.running   { background: var(--primary); }
.ds-cal-day.stopped,
.ds-cal-day.paused    { background: var(--warning); }
.ds-cal-day.failed    { background: var(--error); }
.ds-cal-day.missing   { background: var(--border-color); opacity: .55; }
.ds-cal-legend { display: flex; gap: 0.9rem; flex-wrap: wrap; font-size: var(--font-size-xs); color: var(--text-muted); }
.ds-cal-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.ds-cal-key { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* Horizontal magnitude bar for state / carrier breakdowns */
.ds-bar-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; }
.ds-bar-label { width: 5.5rem; flex-shrink: 0; font-size: var(--font-size-xs); color: var(--text-secondary); }
.ds-bar-track { flex: 1; height: 8px; border-radius: 4px; background: var(--border-light); overflow: hidden; }
.ds-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--primary), var(--primary-alpha-30)); }
.ds-bar-value { width: 6.5rem; text-align: right; font-size: var(--font-size-xs); color: var(--text-muted); flex-shrink: 0; }

/* Phone inspector */
.ds-inspect-result { margin-top: 1rem; }
.ds-verdict {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.75rem 1rem; border-radius: var(--radius-md);
  border: 1px solid var(--border-color); margin-bottom: 0.85rem;
}
.ds-verdict.sellable   { border-color: var(--success); background: rgba(34,197,94,.07); }
.ds-verdict.blocked    { border-color: var(--error);   background: rgba(239,68,68,.07); }
.ds-src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.6rem; }
.ds-src-card {
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: 0.6rem 0.75rem; background: var(--bg-card);
}
.ds-src-card h5 { margin: 0 0 0.35rem; font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-muted); }
.ds-src-card .empty { color: var(--text-muted); font-size: var(--font-size-xs); font-style: italic; }

/* ─── Data Store inventory ────────────────────────────────────
   Five full-width rows ate the fold and read as a list rather than a
   summary. Vertical cards put the number first and fit on one line. */
.ds-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.7rem;
}
.ds-cat {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  padding: 0.85rem 0.9rem;
  display: flex; flex-direction: column; gap: 0.3rem;
  position: relative; overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast);
}
.ds-cat::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--border-color);
}
.ds-cat:hover { transform: translateY(-1px); box-shadow: var(--elev-1); border-color: var(--primary-alpha-30); }
.ds-cat.is-sellable { border-color: var(--primary-alpha-30); }

.ds-cat-head { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.ds-cat-name { font-size: 0.8rem; font-weight: 650; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-cat-key { font-size: 0.65rem; color: var(--text-muted); }
.ds-cat-value {
  font-size: 1.55rem; font-weight: 700; line-height: 1.1;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.ds-cat-pct { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: -0.15rem; }
.ds-cat-hint { font-size: 0.68rem; color: var(--text-muted); line-height: 1.35; margin-top: 0.15rem; }
.ds-cat .badge { align-self: flex-start; }

/* Per-category accent, reused by the proportion bar */
.ds-cat.cat-c::before { background: var(--success); }
.ds-cat.cat-f::before { background: var(--primary); }
.ds-cat.cat-s::before { background: var(--warning); }
.ds-cat.cat-u::before { background: var(--text-muted); }
.ds-cat.cat-x::before { background: var(--error); }

/* One bar showing how the pool actually splits — the thing five separate
   percentages never quite convey. */
.ds-split {
  display: flex; height: 10px; border-radius: 5px; overflow: hidden;
  background: var(--border-light); margin-bottom: 1rem;
}
.ds-split-seg { height: 100%; transition: width var(--transition-base); }
/* Same tokens the client-facing bars use — a category must not change colour
   depending on which screen you are looking at. */
.ds-split-seg.cat-c { background: var(--cat-c); }
.ds-split-seg.cat-f { background: var(--cat-f); }
.ds-split-seg.cat-s { background: var(--cat-s); }
.ds-split-seg.cat-u { background: var(--cat-u); opacity: .55; }
.ds-split-seg.cat-x { background: var(--cat-x); }

/* Purged: the run completed, but the records were later removed. Showing it
   as "done" claimed coverage that no longer exists. */
.ds-cal-day.purged { background: var(--error); opacity: .38; }
.ds-cal-day.queued { background: var(--primary); opacity: .45; }

/* Metric tiles that navigate — the counts were dead ends before. */
.ds-metric-link { text-decoration: none; color: inherit; display: block;
  transition: border-color var(--transition-fast), transform var(--transition-fast); }
.ds-metric-link:hover { border-color: var(--primary); transform: translateY(-1px); }
.ds-metric-link .metric-label i { opacity: 0; transition: opacity var(--transition-fast); }
.ds-metric-link:hover .metric-label i { opacity: .7; }
.ds-metric-link.has-issue { border-color: var(--error); }