/* ============================================================================
   FRANZ SCHONING — COMPONENT LAYER
   Depends on colors_and_type.css. Hard structural corners, soft indigo
   shadows, forced diagnostic accents. Import after the token file.
   ============================================================================ */

/* ---------- BUTTONS ---------- */
.fs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--fs-font-body);
  font-size: var(--fs-step-sm);
  font-weight: var(--fs-w-bold);
  letter-spacing: var(--fs-track-label);
  text-transform: uppercase;
  line-height: 1;
  padding: 13px 24px;
  border-radius: var(--fs-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--fs-dur-fast) var(--fs-ease),
              background var(--fs-dur-fast) var(--fs-ease),
              box-shadow var(--fs-dur-fast) var(--fs-ease),
              color var(--fs-dur-fast) var(--fs-ease);
  white-space: nowrap;
}
.fs-btn:focus-visible { outline: none; box-shadow: var(--fs-ring-focus); }
.fs-btn:active { transform: translateY(1px); }

/* Primary — solid metallic gold, ink text */
.fs-btn--primary { background: var(--fs-gold); color: var(--fs-ink); }
.fs-btn--primary:hover { background: var(--fs-gold-deep); box-shadow: var(--fs-shadow-gold); }

/* Secondary — outlined gold */
.fs-btn--secondary { background: transparent; color: var(--fs-gold-deep); border-color: var(--fs-gold); }
.fs-btn--secondary:hover { background: var(--fs-gold-tint); }

/* On-dark secondary — outlined for indigo backgrounds */
.fs-btn--ghost-dark { background: transparent; color: var(--fs-pearl); border-color: rgba(226,232,240,0.35); }
.fs-btn--ghost-dark:hover { background: rgba(255,255,255,0.06); border-color: var(--fs-gold); color: var(--fs-gold); }

/* Diagnostic triage — surgical red */
.fs-btn--triage { background: var(--fs-red); color: #fff; }
.fs-btn--triage:hover { background: var(--fs-red-deep); }

/* Resolution — emerald */
.fs-btn--resolve { background: var(--fs-emerald); color: #fff; }
.fs-btn--resolve:hover { background: var(--fs-emerald-deep); }

.fs-btn--sm { padding: 9px 16px; font-size: var(--fs-step-label); }
.fs-btn--lg { padding: 16px 32px; font-size: var(--fs-step-body); }

/* ---------- CARDS (the Diagnostic Grid) ---------- */
.fs-card {
  background: var(--fs-surface);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius-md);
  box-shadow: var(--fs-shadow-card);
  padding: var(--fs-space-6);
  transition: transform var(--fs-dur) var(--fs-ease),
              box-shadow var(--fs-dur) var(--fs-ease);
}
.fs-card--hover:hover { transform: translateY(-4px); box-shadow: var(--fs-shadow-lg); }
.fs-card--risk     { border-top: 4px solid var(--fs-red); }
.fs-card--resolved { border-top: 4px solid var(--fs-emerald); }
.fs-card--governed { border-top: 4px solid var(--fs-gold); }

/* ---------- STATUS PILLS / BADGES ---------- */
.fs-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fs-font-body);
  font-size: var(--fs-step-label);
  font-weight: var(--fs-w-bold);
  letter-spacing: var(--fs-track-label);
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--fs-radius-sm);
  border: 1px solid currentColor;
}
.fs-status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.fs-status--critical { color: var(--fs-red); background: var(--fs-red-tint); }
.fs-status--resolved { color: var(--fs-emerald); background: var(--fs-emerald-tint); }
.fs-status--governed { color: var(--fs-gold-deep); background: var(--fs-gold-tint); }
.fs-status--neutral  { color: var(--fs-fg-muted); background: var(--fs-mist); }

/* ---------- INPUTS ---------- */
.fs-input, .fs-select, .fs-textarea {
  width: 100%;
  font-family: var(--fs-font-body);
  font-size: var(--fs-step-body);
  color: var(--fs-fg);
  background: var(--fs-surface);
  border: 1px solid var(--fs-border-strong);
  border-radius: var(--fs-radius-sm);
  padding: 11px 14px;
  transition: border-color var(--fs-dur-fast) var(--fs-ease),
              box-shadow var(--fs-dur-fast) var(--fs-ease);
}
.fs-input::placeholder { color: var(--fs-fg-soft); }
.fs-input:focus, .fs-select:focus, .fs-textarea:focus {
  outline: none;
  border-color: var(--fs-gold);
  box-shadow: var(--fs-ring-focus);
}
.fs-field-label {
  display: block;
  font-family: var(--fs-font-body);
  font-size: var(--fs-step-label);
  font-weight: var(--fs-w-bold);
  letter-spacing: var(--fs-track-label);
  text-transform: uppercase;
  color: var(--fs-fg-muted);
  margin-bottom: 8px;
}

/* ---------- STRUCTURAL RULES ---------- */
.fs-rule { height: 1px; background: var(--fs-border); border: 0; }
.fs-rule--gold { height: 2px; background: var(--fs-gold); border: 0; width: 48px; }

/* ---------- ROMAN PHASE MARKER BLOCK ---------- */
.fs-phase {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.fs-phase__num {
  font-family: var(--fs-font-display);
  font-size: var(--fs-step-h3);
  font-weight: 700;
  color: var(--fs-gold);
  letter-spacing: var(--fs-track-roman);
}

/* ---------- KEY-VALUE DATA STAT ---------- */
.fs-stat__value {
  font-family: var(--fs-font-display);
  font-size: var(--fs-step-h1);
  font-weight: 700;
  color: var(--fs-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fs-stat__label {
  font-family: var(--fs-font-body);
  font-size: var(--fs-step-label);
  font-weight: var(--fs-w-semi);
  letter-spacing: var(--fs-track-label);
  text-transform: uppercase;
  color: var(--fs-fg-soft);
  margin-top: 6px;
}