/* Reusable component classes used by both preview cards and the UI kit.
   Import after colors_and_type.css. */

/* ─── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  padding: 9px 16px;
  border-radius: var(--r-3);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  white-space: nowrap;
  user-select: none;
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn[disabled], .btn.is-disabled { opacity: 0.4; pointer-events: none; }

.btn-primary {
  background: var(--rose);
  color: var(--text-on-rose);
  border-color: var(--rose);
}
/* Hover transitions rose → gold (#d9b85a) — the "activation signal".
   Rose is the resting state of the primary action; gold is the commit
   moment. Production-aligned 2026-05-24. */
.btn-primary:hover { background: #d9b85a; border-color: #d9b85a; color: var(--text-on-rose); }

.btn-secondary {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--border-accent);
}
.btn-secondary:hover { background: var(--surface-raised); border-color: var(--border-strong); }

.btn-ghost {
  color: var(--text-dim);
  border-color: transparent;
}
.btn-ghost:hover { color: var(--text); background: var(--surface-raised); }

/* ─── Stage-keyed action buttons ────────────────────────────────────
   Variants that map to the oxidation arc. Use these when the action
   semantically invokes a specific stage — "Certify threshold" is a
   validate (gold) action, "Decline" is a breach (rust) action, etc.
   They render as tinted capsules (wash + dim border + tonal text),
   never solid-filled — solid rose is reserved for the single primary. */
.btn-validate {
  background: var(--gold-wash); color: var(--gold); border-color: var(--gold-dim);
}
.btn-validate:hover { background: rgba(200,168,75,0.18); border-color: var(--gold); }

.btn-watch {
  background: var(--amber-wash); color: var(--amber); border-color: var(--amber-dim);
}
.btn-watch:hover { background: rgba(158,122,142,0.22); border-color: var(--amber); }

.btn-breach {
  background: var(--coral-wash); color: var(--coral); border-color: var(--coral-dim);
}
.btn-breach:hover { background: rgba(184,83,106,0.22); border-color: var(--coral); }

.btn-pass {
  background: var(--green-wash); color: var(--green); border-color: var(--green-dim);
}
.btn-pass:hover { background: rgba(78,168,164,0.22); border-color: var(--green); }

.btn-sm { padding: 6px 10px; font-size: 10px; }
.btn-lg { padding: 12px 22px; font-size: 12px; }

/* ─── Badges / Tags ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  padding: 3px 7px;
  border-radius: var(--r-2);
  border: 1px solid;
  white-space: nowrap;
}
.badge-rose   { color: var(--rose);  border-color: var(--rose-dim);   background: var(--rose-wash); }
.badge-gold   { color: var(--gold);  border-color: var(--gold-dim);   background: var(--gold-wash); }
.badge-green  { color: var(--green); border-color: var(--green-dim);  background: var(--green-wash); }
.badge-amber  { color: var(--amber); border-color: var(--amber-dim);  background: var(--amber-wash); }
.badge-coral  { color: var(--coral); border-color: var(--coral-dim);  background: var(--coral-wash); }
.badge-muted  { color: var(--text-muted); border-color: var(--border-accent); background: var(--surface); }

/* Solid-fill terminal badge — verdigris. ONLY for end-of-journey states
   ("Settled," "Matured," "Closed"). The badge equivalent of the solid-rose
   primary button: one per row at most, and only when a thing has reached
   terminal state. Tighter letter-spacing because the solid fill carries
   the weight on its own. */
.badge-settled {
  color: var(--bg);
  background: var(--green);
  border-color: var(--green);
  letter-spacing: 0.08em;
}
.badge-settled .dot { background: var(--bg); opacity: 0.5; }

/* status dot inside a badge */
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ─── Inputs ────────────────────────────────────────────────────────── */
.field {
  display: flex; flex-direction: column; gap: 6px;
}
.field-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text-muted);
}
.input, .select, .textarea {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
  background: var(--surface-deep);
  border: 1px solid var(--border-accent);
  border-radius: var(--r-1);
  padding: 9px 12px;
  width: 100%;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input::placeholder { color: var(--text-muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--border-strong); box-shadow: var(--shadow-focus); }
.input.is-error, .select.is-error { border-color: var(--coral-dim); }

/* ─── Panel / Card ──────────────────────────────────────────────────── */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-1);
}
.panel-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.panel-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text-muted);
}
.panel-body { padding: 18px 20px; }

/* key-value rows */
.kv {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--text-dim); }
.kv .v { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; }
.kv .v.rose  { color: var(--rose); }
.kv .v.gold  { color: var(--gold); }
.kv .v.green { color: var(--green); }
.kv .v.coral { color: var(--coral); }

/* ─── Stage strip ───────────────────────────────────────────────────── */
.stage-strip {
  display: flex; gap: 22px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}
.stage {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: var(--track-caps-tight);
  text-transform: uppercase;
  color: var(--text-muted);
  position: relative;
}
.stage.done { color: var(--text-dim); }
.stage.active { color: var(--text); padding-bottom: 10px; }
.stage.active::after {
  content: ''; position: absolute; bottom: -15px; left: 0; right: 0;
  height: 2px; background: var(--rose);
}
.stage-num {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
}
.stage.active .stage-num { background: var(--rose); color: var(--text-on-rose); }
.stage.done .stage-num   { background: var(--green-wash); color: var(--green); }

/* ─── Tables ────────────────────────────────────────────────────────── */
.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 13px;
}
.table th {
  text-align: left;
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text-muted);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-accent);
  background: var(--surface-deep);
}
.table td {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.table tr:hover td { background: var(--surface-raised); }
.table td.num { text-align: right; }
.table td.muted { color: var(--text-dim); }
.table td.rose { color: var(--rose); }

/* ─── Pillared metric tile ──────────────────────────────────────────── */
.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.tile .tile-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text-muted);
}
.tile .tile-value {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.tile .tile-value.rose  { color: var(--rose); }
.tile .tile-value.gold  { color: var(--gold); }
.tile .tile-value.green { color: var(--green); }
.tile .tile-foot {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-dim);
}

/* ─── Brandmark (header use) ────────────────────────────────────────── */
.brandmark-block {
  display: inline-block;
}
.brandmark-block .l1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.20em;
  color: var(--rose);
}
.brandmark-block .l2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.40em;
  color: var(--text-muted);
  margin-top: 3px;
}