/* Reusable surface, table, badge, and control components. */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--stroke-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft);
}

.card-tight { padding: var(--space-4); }
.card-title { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); margin-bottom: var(--space-3); }

.metric-value { font-family: var(--font-num); font-size: var(--fs-display); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.metric-label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); }
.metric-note { font-size: var(--fs-small); color: var(--text-secondary); margin-top: var(--space-1); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: 550;
  letter-spacing: 0.02em;
  background: var(--bg-panel-alt);
  color: var(--text-secondary);
  border: 1px solid var(--stroke-hairline);
  white-space: nowrap;
}

.badge-accent { background: var(--accent-muted); color: var(--accent-strong); border-color: rgba(212, 164, 55, 0.3); }
.badge-positive { background: rgba(75, 184, 122, 0.14); color: var(--positive); border-color: rgba(75, 184, 122, 0.3); }
.badge-caution { background: rgba(224, 163, 62, 0.14); color: var(--caution); border-color: rgba(224, 163, 62, 0.3); }
.badge-negative { background: rgba(212, 97, 79, 0.14); color: var(--negative); border-color: rgba(212, 97, 79, 0.3); }
.badge-info { background: rgba(91, 157, 217, 0.14); color: var(--info); border-color: rgba(91, 157, 217, 0.3); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--stroke-strong);
  background: var(--bg-panel-alt);
  color: var(--text-primary);
  font-size: var(--fs-small);
  font-weight: 550;
  transition: background 140ms var(--ease-out), transform 100ms var(--ease-out);
}
.btn:hover { background: var(--bg-hover); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: var(--text-inverse); border-color: transparent; }
.btn-primary:hover { background: var(--accent-strong); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

.data-table { font-size: var(--fs-small); }
.data-table thead th {
  text-align: left;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-tertiary);
  font-weight: 600;
  padding: 0 var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--stroke-hairline);
}
.data-table tbody td {
  padding: 10px var(--space-3);
  border-bottom: 1px solid var(--stroke-hairline);
  color: var(--text-secondary);
}
.data-table tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }
.data-table td.num, .data-table th.num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.data-table td.strong { color: var(--text-primary); font-weight: 550; }

.rank-chip {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  background: var(--bg-panel-alt);
  font-family: var(--font-num);
  font-size: var(--fs-micro);
  color: var(--text-secondary);
}
.rank-chip.rank-1 { background: var(--accent); color: var(--text-inverse); font-weight: 700; }

.empty-state {
  border: 1px dashed var(--stroke-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--text-tertiary);
}
.empty-state h3 { color: var(--text-secondary); margin-bottom: var(--space-2); }

.progress-track { height: 4px; border-radius: var(--radius-pill); background: var(--bg-panel-alt); overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width 240ms var(--ease-out); }
.progress-fill-exit { background: var(--negative); }

/* Transient confirmation toast raised by the shell after a dispatch. */
.notice-host {
  position: fixed;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  pointer-events: none;
}
.notice {
  padding: 10px var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--stroke-strong);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lift);
  font-size: var(--fs-small);
  color: var(--text-primary);
  animation: notice-rise 200ms var(--ease-out);
}
.notice-positive { border-color: var(--positive); }
.notice-caution { border-color: var(--caution); }
.notice-negative { border-color: var(--negative); }

@keyframes notice-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}