/*
 * Chiron — Component primitives
 * All colors come from tokens.css (Lumina Clarity).
 * No raw hex values in this file.
 */

/* ---------------------------------------------------------------
 * Buttons
 * --------------------------------------------------------------- */
.btn-ui {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
}

.btn-ui:hover {
  background: var(--surface-subtle);
  border-color: var(--border-default);
}

.btn-ui--primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-on-primary);
}

.btn-ui--primary:hover {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
}

.btn-ui--success {
  background: var(--status-success);
  border-color: var(--status-success);
  color: var(--text-inverse);
}

.btn-ui--success:hover {
  background: var(--status-success-text);
  border-color: var(--status-success-text);
}

.btn-ui--subtle {
  background: var(--status-neutral-soft);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}

.btn-ui--subtle:hover {
  background: var(--surface-container);
  border-color: var(--border-default);
}

/* Secondary — ghost: Primary Blue border + text, transparent fill.
   Matches the index page's top-bar .btn-outline (design manual). */
.btn-ui--outline {
  background: transparent;
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.btn-ui--outline:hover {
  background: var(--brand-primary-soft);
  border-color: var(--brand-primary);
  color: var(--brand-primary-active);
}

.btn-ui--accent-soft {
  background: var(--brand-primary-soft);
  border-color: var(--brand-primary-soft);
  color: var(--brand-primary-active);
}

/* ---------------------------------------------------------------
 * Badges / pills — semantic status
 * --------------------------------------------------------------- */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-micro);
  font-weight: 700;
  line-height: 1;
}

.badge-pill--muted {
  background: var(--status-neutral-soft);
  color: var(--status-neutral-text);
}

.badge-pill--success {
  background: var(--status-success-soft);
  color: var(--status-success-text);
}

.badge-pill--warning {
  background: var(--status-warning-soft);
  color: var(--status-warning-text);
}

.badge-pill--danger {
  background: var(--status-danger-soft);
  color: var(--status-danger-text);
}

.badge-pill--info {
  background: var(--status-info-soft);
  color: var(--status-info-text);
}

/* Chiron agent status badges (M0) */
.badge-pill--agent-idle    { background: var(--agent-idle-soft);    color: var(--agent-idle-text); }
.badge-pill--agent-running { background: var(--agent-running-soft); color: var(--agent-running-text); }
.badge-pill--agent-blocked { background: var(--agent-blocked-soft); color: var(--agent-blocked-text); }
.badge-pill--agent-done    { background: var(--agent-done-soft);    color: var(--agent-done-text); }
.badge-pill--agent-error   { background: var(--agent-error-soft);   color: var(--agent-error-text); }

/* Chiron phase badges (M1–M5) */
.badge-pill--phase-m0 { background: var(--phase-m0-soft); color: var(--phase-m0-text); }
.badge-pill--phase-m1 { background: var(--phase-m1-soft); color: var(--phase-m1-text); }
.badge-pill--phase-m2 { background: var(--phase-m2-soft); color: var(--phase-m2-text); }
.badge-pill--phase-m3 { background: var(--phase-m3-soft); color: var(--phase-m3-text); }
.badge-pill--phase-m4 { background: var(--phase-m4-soft); color: var(--phase-m4-text); }
.badge-pill--phase-m5 { background: var(--phase-m5-soft); color: var(--phase-m5-text); }

/* Chiron compliance badges (Nomos) */
.badge-pill--compliance-pass    { background: var(--compliance-pass-soft);    color: var(--compliance-pass-text); }
.badge-pill--compliance-warn    { background: var(--compliance-warn-soft);    color: var(--compliance-warn-text); }
.badge-pill--compliance-fail    { background: var(--compliance-fail-soft);    color: var(--compliance-fail-text); }
.badge-pill--compliance-pending { background: var(--compliance-pending-soft); color: var(--compliance-pending-text); }

/* ---------------------------------------------------------------
 * Form controls
 * --------------------------------------------------------------- */
.control-select {
  background: var(--surface-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-micro);
  font-family: var(--font-sans);
  outline: none;
}

.control-select:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}

.textarea-ui {
  width: 100%;
  min-height: 170px;
  resize: vertical;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: 1.5;
  outline: none;
  background: var(--surface-canvas);
  color: var(--text-primary);
}

.textarea-ui:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}

/* ---------------------------------------------------------------
 * Modal / split panels
 * --------------------------------------------------------------- */
.modal-card--lg {
  width: min(980px, 96vw);
}

.modal-card--xl {
  width: min(1100px, 96vw);
}

.modal-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 0;
}

.modal-panel {
  padding: var(--space-5);
  overflow: auto;
}

.modal-panel--muted {
  background: var(--surface-base);
}

.modal-panel--border-right {
  border-right: 1px solid var(--border-subtle);
}

.modal-copy {
  font-size: var(--text-caption);
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

/* ---------------------------------------------------------------
 * Type & text
 * --------------------------------------------------------------- */
.text-meta {
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.section-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.body-copy-sm {
  font-size: var(--text-caption);
  line-height: 1.6;
  color: var(--text-secondary);
}

.body-copy-xs {
  font-size: var(--text-micro);
  line-height: 1.6;
  color: var(--text-muted);
}

.title-xl {
  margin-bottom: var(--space-2);
  font-size: 1.625rem;
  line-height: 1.2;
}

.title-lg {
  margin-bottom: var(--space-2);
  font-size: 1.5rem;
  line-height: 1.2;
}

.title-md {
  font-size: 1.125rem;
  line-height: 1.3;
  margin-bottom: var(--space-2);
}

.title-card {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-primary);
}

.font-strong {
  font-weight: 700;
  color: var(--text-primary);
}

.meta-copy-tight {
  font-size: var(--text-micro);
  color: var(--text-muted);
  margin-top: 3px;
}

/* ---------------------------------------------------------------
 * Layout primitives
 * --------------------------------------------------------------- */
.content-stack {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.row-between {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}

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

.stack-inline--tight {
  gap: 5px;
}

.stack-inline--spacious {
  gap: 14px;
}

.stack-end-tight {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.stack-wrap-sm {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.min-w-0 {
  min-width: 0;
}

/* ---------------------------------------------------------------
 * Surfaces & cards
 * --------------------------------------------------------------- */
.surface-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-ambient);
}

.surface-card--muted {
  background: var(--surface-base);
}

.surface-card__body {
  padding: var(--space-5);
}

.panel-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-ambient);
}

.panel-card--muted {
  background: var(--surface-subtle);
}

.panel-card--sticky {
  position: sticky;
  top: var(--space-3);
  align-self: start;
}

.panel-card--compact {
  padding: var(--space-3);
}

.panel-title {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 1px;
  color: var(--text-muted);
}

.panel-title--sm {
  font-size: var(--text-micro);
}

.stat-box-grid {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.stat-box {
  padding: var(--space-3);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  min-width: 120px;
}

.stat-box__label {
  font-size: var(--text-micro);
  color: var(--text-muted);
}

.stat-box__value {
  font-size: var(--text-body-md);
  font-weight: 700;
}

.stat-chip {
  font-size: var(--text-micro);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.stat-chip--neutral {
  background: var(--surface-subtle);
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------
 * Empty / hint states
 * --------------------------------------------------------------- */
.empty-message {
  padding: var(--space-5);
  text-align: center;
  color: var(--text-muted);
}

.empty-message--error {
  color: var(--status-danger);
}

.hint-note {
  margin-top: var(--space-2);
  font-size: var(--text-micro);
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---------------------------------------------------------------
 * Sidebar / split layout
 * --------------------------------------------------------------- */
.surface-grid-2 {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.surface-sidebar {
  padding: var(--space-4);
  border-right: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  overflow: auto;
}

.surface-main {
  overflow: auto;
  padding: var(--space-5) var(--space-5);
  min-width: 0;
}

.surface-stack {
  display: grid;
  gap: var(--space-3);
}

.surface-stack-lg {
  display: grid;
  gap: var(--space-4);
}

.nav-button-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nav-button-ui {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

/* ---------------------------------------------------------------
 * Chips / pills
 * --------------------------------------------------------------- */
.chip-button-ui {
  margin: 0 var(--space-2) var(--space-2) 0;
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-3);
}

.chip-button-ui.is-active {
  border-color: var(--status-success);
  background: var(--status-success-soft);
  color: var(--status-success-text);
}

.pill-muted {
  padding: 3px var(--space-2);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
}

.pill-danger {
  padding: 3px var(--space-2);
  background: var(--status-danger-soft);
  border: 1px solid var(--status-danger-soft);
  border-radius: var(--radius-full);
  color: var(--status-danger-text);
}

/* ---------------------------------------------------------------
 * Room cards
 * --------------------------------------------------------------- */
.room-card {
  cursor: pointer;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.room-card:hover {
  border-color: var(--brand-primary);
}

.room-card.is-active {
  border-color: var(--status-success);
  box-shadow: 0 0 0 2px var(--status-success-soft);
}

/* ---------------------------------------------------------------
 * JSON preview (code block)
 * --------------------------------------------------------------- */
.json-preview {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: #0F172A;
  color: #E2E8F0;
  border-radius: var(--radius-sm);
  overflow: auto;
  max-height: 320px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: 1.5;
}

/* ---------------------------------------------------------------
 * Milestone file list
 * --------------------------------------------------------------- */
.milestone-file-item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: flex-start;
}

/* ---------------------------------------------------------------
 * Detail grids
 * --------------------------------------------------------------- */
.grid-auto-fit-220 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.grid-auto-fit-240 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}

.grid-detail-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: var(--space-4);
  min-height: 320px;
}

.stack-grid-start {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.metric-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.section-heading-sm {
  font-size: var(--text-micro);
  font-weight: 700;
  margin-bottom: 6px;
}

.body-copy-list {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-micro);
  line-height: 1.6;
  color: var(--text-secondary);
}

.body-copy-block {
  font-size: var(--text-caption);
  line-height: 1.7;
  color: var(--text-secondary);
}

.body-copy-note {
  margin-top: var(--space-3);
  font-size: var(--text-micro);
  color: var(--text-secondary);
  line-height: 1.6;
}