/* ─────────────────────────────────────────────────────────────────────────────
   EVIDENT ICU — Institutional Procedural Interface
   institutional.css

   Procedural trust surfaces, operational state indicators, evidence integrity
   communication, and custody display utilities.

   Doctrine: this system preserves reality carefully.
   Every class here serves one of four functions:
     1. Communicate operational state (verified / pending / error / immutable)
     2. Display forensic identifiers (hashes, timestamps, case numbers, Bates)
     3. Express chain-of-custody and audit visibility
     4. Establish the procedural layout rhythm for evidence surfaces

   No decorative rules in this file. Every rule has a purpose.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Procedural Surface ──────────────────────────────────────────────────────
   Base container for any evidence workspace section. Solid surface, visible
   border, no depth theatrics. The container itself communicates "this content
   matters and is contained."
   ─────────────────────────────────────────────────────────────────────────── */
.ev-procedural-surface {
  background: var(--surface-card);
  border: 1px solid var(--border-procedural, var(--border-strong));
  border-radius: var(--radius-md);
  padding: var(--surface-card-pad);
}

.ev-procedural-surface + .ev-procedural-surface {
  margin-block-start: var(--space-md);
}

/* Inset variant — nested evidence container (slightly recessed) */
.ev-procedural-surface--inset {
  background: var(--surface-inset);
  border-color: var(--border-subtle);
}

/* ── Operational State Badges ────────────────────────────────────────────────
   Used wherever operational status must be communicated: pipeline stages,
   evidence items, custody entries, export manifests.

   Base: .ev-badge
   Modifiers: --verified | --pending | --immutable | --error

   Usage: <span class="ev-badge ev-badge--verified">Verified</span>
   ─────────────────────────────────────────────────────────────────────────── */
.ev-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.55em;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-family: var(--font-sans);
  font-size: var(--type-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-procedural, 0.06em);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

.ev-badge--verified {
  background: var(--state-verified-bg);
  border-color: var(--state-verified-border);
  color: var(--state-verified-text);
}

.ev-badge--pending {
  background: var(--state-pending-bg);
  border-color: var(--state-pending-border);
  color: var(--state-pending-text);
}

.ev-badge--immutable {
  background: var(--state-immutable-bg);
  border-color: var(--state-immutable-border);
  color: var(--state-immutable-text);
}

.ev-badge--error {
  background: var(--state-error-bg);
  border-color: var(--state-error-border);
  color: var(--state-error-text);
}

/* Dark-mode badge text adjustments */
@media (prefers-color-scheme: dark) {
  .ev-badge--verified { color: var(--state-verified-text-on-dark); }
  .ev-badge--pending { color: var(--state-pending-text-on-dark); }
  .ev-badge--immutable { color: var(--state-immutable-text-on-dark); }
  .ev-badge--error { color: var(--state-error-text-on-dark); }
}

/* ── State Dot — minimal inline status indicator ─────────────────────────────
   For tight spaces (table cells, list rows) where a full badge won't fit.
   Usage: <span class="ev-dot ev-dot--verified" aria-label="Verified"></span>
   ─────────────────────────────────────────────────────────────────────────── */
.ev-dot {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  flex-shrink: 0;
}

.ev-dot--verified  { background: var(--state-verified-text); }
.ev-dot--pending   { background: var(--state-pending-text); }
.ev-dot--immutable { background: var(--state-immutable-text); }
.ev-dot--error     { background: var(--state-error-text); }

/* ── Procedural Labels ───────────────────────────────────────────────────────
   Section headers and field labels in evidence surfaces. Small-caps tracked
   text that reads as institutional metadata, not decoration.

   Usage: <span class="ev-label">Chain of Custody</span>
   ─────────────────────────────────────────────────────────────────────────── */
.ev-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--type-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-procedural, 0.06em);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-block-end: 0.35em;
}

/* ── Hash Display ────────────────────────────────────────────────────────────
   SHA-256 and other cryptographic identifiers. Monospace, slightly dimmed,
   with tracked spacing so characters don't blur together.

   Usage: <code class="ev-hash">a3f9c2b1…</code>
          <code class="ev-hash ev-hash--full">a3f9c2b18d4e…full hash…</code>
   ─────────────────────────────────────────────────────────────────────────── */
.ev-hash {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--tracking-hash, 0.04em);
  color: var(--color-text-muted);
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.4em;
  /* Truncate long hashes by default */
  display: inline-block;
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* Full-length hash (for detail views) */
.ev-hash--full {
  max-width: unset;
  word-break: break-all;
  white-space: normal;
}

/* ── Timestamp Display ───────────────────────────────────────────────────────
   Tabular numbers, monospace-adjacent. All timestamps in evidence surfaces
   must use tabular-nums to prevent layout shift as values update.

   Usage: <time class="ev-timestamp" datetime="2026-06-01T00:00:00Z">Jun 1 2026 00:00 UTC</time>
   ─────────────────────────────────────────────────────────────────────────── */
.ev-timestamp {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ── Evidence Identifier ─────────────────────────────────────────────────────
   Case numbers, Bates numbers, file IDs — any primary identifier.
   Slightly bolder than a hash, still monospace.

   Usage: <span class="ev-id">CASE-2026-0042</span>
   ─────────────────────────────────────────────────────────────────────────── */
.ev-id {
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  color: var(--color-text);
}

/* ── Chain of Custody Row ────────────────────────────────────────────────────
   Append-only custody entries. Visually signals immutability by:
   - Left border strip in immutable color
   - Muted background
   - Locked visual density (line-height, padding consistent)

   Usage:
   <div class="ev-custody-row">
     <span class="ev-label">Ingested</span>
     <time class="ev-timestamp">…</time>
     <code class="ev-hash">…</code>
   </div>
   ─────────────────────────────────────────────────────────────────────────── */
.ev-custody-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding: 0.6rem 0.75rem;
  background: var(--surface-inset);
  border-left: 3px solid var(--state-immutable-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--type-sm);
  line-height: 1.4;
}

.ev-custody-row + .ev-custody-row {
  margin-block-start: 2px;
  border-left-color: color-mix(in srgb, var(--state-immutable-border) 60%, transparent);
}

/* ── Verification Block ──────────────────────────────────────────────────────
   Full-width verification status panel. Used at the top of evidence views
   to communicate the integrity of the current record.

   Usage:
   <div class="ev-verification ev-verification--verified">
     <span class="ev-verification__status">Hash Verified</span>
     <code class="ev-hash ev-hash--full">…</code>
     <time class="ev-timestamp">Verified Jun 1 2026 00:04 UTC</time>
   </div>
   ─────────────────────────────────────────────────────────────────────────── */
.ev-verification {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding: 0.65rem var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid;
  font-size: var(--type-sm);
}

.ev-verification--verified {
  background: var(--state-verified-bg);
  border-color: var(--state-verified-border);
}

.ev-verification--pending {
  background: var(--state-pending-bg);
  border-color: var(--state-pending-border);
}

.ev-verification--error {
  background: var(--state-error-bg);
  border-color: var(--state-error-border);
}

.ev-verification__status {
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-procedural);
  text-transform: uppercase;
  font-size: var(--type-xs);
  flex-shrink: 0;
}

.ev-verification--verified .ev-verification__status { color: var(--state-verified-text); }
.ev-verification--pending .ev-verification__status  { color: var(--state-pending-text); }
.ev-verification--error .ev-verification__status    { color: var(--state-error-text); }

@media (prefers-color-scheme: dark) {
  .ev-verification--verified .ev-verification__status { color: var(--state-verified-text-on-dark); }
  .ev-verification--pending .ev-verification__status  { color: var(--state-pending-text-on-dark); }
  .ev-verification--error .ev-verification__status    { color: var(--state-error-text-on-dark); }
}

/* ── Pipeline Stage Row ──────────────────────────────────────────────────────
   Horizontal stage indicator for the 7-stage EDRM pipeline.
   Shows stage name, status badge, and elapsed time in a compact row.

   Usage:
   <div class="ev-stage ev-stage--complete">
     <span class="ev-stage__name">Transcription</span>
     <span class="ev-badge ev-badge--verified">Complete</span>
     <span class="ev-timestamp">2m 14s</span>
   </div>
   ─────────────────────────────────────────────────────────────────────────── */
.ev-stage {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface-inset);
  transition: border-color var(--duration-fast) ease;
}

.ev-stage--active {
  border-color: var(--state-immutable-border);
  background: var(--state-immutable-bg);
}

.ev-stage--complete {
  border-color: var(--state-verified-border);
  background: var(--state-verified-bg);
}

.ev-stage--error {
  border-color: var(--state-error-border);
  background: var(--state-error-bg);
}

.ev-stage__name {
  font-size: var(--type-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  flex: 1;
}

/* ── Integrity Seal ──────────────────────────────────────────────────────────
   Compact, inline "hash verified" or "export reproducible" indicator.
   Used in export views, timeline entries, and custody summaries.
   ─────────────────────────────────────────────────────────────────────────── */
.ev-integrity-seal {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--type-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-procedural);
  text-transform: uppercase;
  color: var(--state-verified-text);
  padding: 0.2em 0.5em;
  border: 1px solid var(--state-verified-border);
  border-radius: var(--radius-sm);
  background: var(--state-verified-bg);
}

@media (prefers-color-scheme: dark) {
  .ev-integrity-seal { color: var(--state-verified-text-on-dark); }
}

/* ── Append-Only Notice ──────────────────────────────────────────────────────
   Inline note confirming a record is immutable. Displayed below audit logs
   and custody chains to make the append-only doctrine visible.
   ─────────────────────────────────────────────────────────────────────────── */
.ev-append-only-notice {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  font-size: var(--type-xs);
  color: var(--state-immutable-text);
  border: 1px solid var(--state-immutable-border);
  border-radius: var(--radius-sm);
  background: var(--state-immutable-bg);
  letter-spacing: 0.03em;
}

@media (prefers-color-scheme: dark) {
  .ev-append-only-notice { color: var(--state-immutable-text-on-dark); }
}

/* ── Reduced Motion ──────────────────────────────────────────────────────────
   All institutional components are already minimal in motion.
   This block ensures nothing slips through.
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ev-stage {
    transition: none;
  }
}