/* ============================================================================
 * /public/css/components.css
 * ----------------------------------------------------------------------------
 * Canonical reusable UI components.
 *
 * Scope: only STRUCTURAL components. Semantic variants and module-prefixed
 * forms live elsewhere (see naming doctrine below).
 *
 * Loaded by: 226 production HTML pages (R-2.6 wiring step 1 added the file
 * to the 3 cache-buster pages that Phase 2 had missed).
 *
 * History:
 *   - Phase 1 (2026-05-10): created as empty scaffold
 *   - R-2.6  (2026-05-11): first real population — .card family extracted
 *                          from styles.css verbatim
 *
 * ----------------------------------------------------------------------------
 * NAMING DOCTRINE (full taxonomy in governance-taxonomies.md)
 *
 * Six categories define ownership and lifetime:
 *
 *   BASE       /css/base.css            — html/body/reset/typography defaults
 *   UTILITY    /css/utilities.css       — single-property mechanical helpers
 *                                         (.pull-left .clear .white .hidden …)
 *   STRUCTURAL /css/components.css      — platform-canonical reusable shells
 *                                         (.card .card-header .card-body .card-footer)
 *                                         — populated ONLY when survey proves
 *                                         a platform-wide rule exists today
 *   SEMANTIC   feature CSS (admin/, chat/, model-pages.css, quotas.css, ...)
 *                                       — feature-specific variants
 *                                         (.metric-card .risk-card .stat-card
 *                                          .info-card .info-panel .tts-panel
 *                                          .feature-card .module-card …)
 *   MODULE     per-module CSS           — module-prefixed
 *                                         (.fv-* .pm-* .stocki-* .rme-* .audisyn-*)
 *   TENANT     <style id="tenant-vars"> — runtime-injected per-tenant
 *                                         var overrides (the 13 tenant-overridable
 *                                         CSS custom properties)
 *
 * Currently populated:
 *   STRUCTURAL: .card family only (R-2.6, 2026-05-11)
 *
 * NOT populated (and not eligible for premature extraction):
 *   .panel, .panel-header, .panel-body — survey (2026-05-11) confirmed
 *   .panel exists only as MODULE-OWNED prefixes (.fv-panel, .rme-panel,
 *   .stocki-panel-toggle) and SEMANTIC variants (.tts-panel, .info-panel,
 *   .context-detail-panel, .mcs-panel). There is no platform-wide .panel
 *   rule to extract. Unifying these belongs to R-9 vocabulary governance,
 *   not R-2 extraction.
 *
 *   .modal, .table — likewise deferred until survey proves platform-wide
 *   ownership.
 *
 * Cascade order: components.css loads BEFORE styles.css and BEFORE module
 * CSS. Module CSS can override (audisyn.css does for .card), inline <style>
 * blocks can override (tenant_admin email/subscriptions pages do). These
 * overrides are preserved and intentional during R-2..R-8.
 *
 * Doctrine for R-2 extractions:
 *   ONLY extract what objectively exists in the runtime today.
 *   Do not invent canonical structures. The survey is the proof of existence.
 *
 * See: DOCUMENTS_CODETRUTH/04_PLATFORM/CSS-ARCHITECTURE/
 *      ├── audit-2026-05-10.md          (original audit)
 *      └── governance-taxonomies.md     (taxonomies + R-2 doctrine, 2026-05-11)
 * ============================================================================
 */

/* R-2.6 extracted from styles.css lines 2998-3040 (2026-05-11)
   The .card family is the only platform structural component carved in
   this pass. Other structural components (.panel, .modal, .table) remain
   in styles.css until subsequent R-2.6.x passes. */

.card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.2s ease;
  overflow-x: hidden;
  max-width: 100%;
}

.card:hover {
  border-color: var(--accent);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.card-header h2,
.card-header h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text-primary);
}

.card-body {
  color: var(--text-secondary);
  line-height: 1.6;
}

.card-footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

/* ============================================================================
 * CARD MODIFIER GRAMMAR (R-4.1, 2026-05-11)
 * ----------------------------------------------------------------------------
 * Authorized by: docs/css-architecture/R-3.1-founder-decisions.md
 * Survey:        docs/css-architecture/R-3-equivalence-map.md
 *
 * Structural primitive
 *   .card                      — the only canonical card body (see above)
 *
 * Behavioral modifier
 *   .card--interactive         — adds hover lift; honors prefers-reduced-motion
 *
 * Semantic modifiers
 *   .card--module              — enrollable module tile
 *                                (consolidates .module-card surface — R-4.4)
 *   .card--stat                — labeled metric value, block layout
 *                                (consolidates .stat-card block form,
 *                                 absorbs .metric-card — R-4.4)
 *   .card--stat-row            — labeled metric value, horizontal layout
 *                                (consolidates .stat-card flex form — R-4.4)
 *
 * State classes (orthogonal — apply to any modifier; no rule bodies yet)
 *   .is-enabled                — module is active for the tenant/user
 *   .is-disabled               — module is inactive / not subscribed
 *   .is-loading                — async content pending
 *
 * DOCTRINE
 *   1. Modifiers carry the SMALLEST possible delta from `.card`. The semantic
 *      value of a modifier is the NAME — it gives JS hooks, telemetry, and
 *      readers a stable label. Visual identity stays on `.card` itself.
 *
 *   2. State is orthogonal to structure. Use CHAINED state classes:
 *          .card--module.is-enabled       ← correct
 *          .card--module--enabled         ← REJECTED (decision R-3.1 §3)
 *      Reason: state composes across components, structure does not.
 *
 *   3. NO new card vocabulary without an equivalence-map review.
 *      R-3 survey is the proof-of-existence record. If a new modifier is
 *      proposed, it must point to runtime convergence — not aspiration.
 *      Inventing structure is what R-2 doctrine forbids:
 *
 *          "Only extract what objectively exists in the runtime today.
 *           Do not invent canonical structures."
 *           — DOCUMENTS_CODETRUTH/04_PLATFORM/CSS-ARCHITECTURE/
 *             governance-taxonomies.md
 *
 *   4. .metric-card is INTENTIONALLY ABSENT from the modifier list.
 *      The R-3.1 decision collapses it into .card--stat (decision §1, §2).
 *      Adding .card--metric would reintroduce vocabulary drift that the
 *      decision pass deliberately eliminated.
 *
 *   5. .panel as a bare structural primitive is INTENTIONALLY ABSENT.
 *      R-3 survey proved no runtime convergence. Module-prefixed panels
 *      (.fv-panel, .rme-panel, .tts-panel, .info-panel) stay where they are.
 *      Re-survey under R-9; until then, this would be invention.
 *
 *   6. R-4.1 IS PURELY ADDITIVE. No existing .card rule is modified.
 *      No design refresh is permitted in this pass — no radius, spacing,
 *      shadow, or color changes. Modifiers must inherit existing .card
 *      behavior except where the modifier's name explicitly justifies
 *      a delta (.card--interactive ⇒ hover lift; .card--stat-row ⇒ flex).
 * ============================================================================
 */

/* ── Behavioral modifier ─────────────────────────────────────────────────── */

.card--interactive {
  cursor: pointer;
}

.card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .card--interactive:hover {
    transform: none;
  }
}

/* ── Semantic modifiers ──────────────────────────────────────────────────── */
/* Intentionally near-empty. Their value is the NAME (semantic anchor for
   markup, JS, and telemetry). Visual identity inherits from .card. Any
   delta from .card requires equivalence-map justification. */

.card--module {
  /* Module-tile semantic anchor. Currently identical to .card.
     State (.is-enabled / .is-disabled) lands during R-4.4 migration
     when modules.html provides the concrete visual contract. */
}

.card--stat {
  /* Block metric layout. Children typically .stat-label + .stat-value.
     Absorbs .metric-card per R-3.1 decision §2. No delta from .card yet —
     R-4.4 will land final typography during inline-hotspot migration. */
}

.card--stat-row {
  /* Horizontal metric layout. Icon + content side-by-side.
     Genuine structural delta vs .card (flex container), so the rule is
     non-empty. Surveyed in cognitive-analytics.css:231 and similar. */
  display: flex;
  align-items: center;
  gap: 1rem;
}