/* =========================================================================
   three-tier-progression-diagram — NEW component for /technology #dual-use.
   v0.1 (2026-04-26).

   Shape: three tiers, top-to-bottom, with an architectural-invariance
   spine that reads visually identical across all three (same Trust Block
   mechanics, settlement interfaces, economic behavior). Only the *root
   of trust* and the *enforcement mechanism* shift.

   Tiers:
     1 · Dual-Use Privacy Domains    — enterprise governance + layered crypto
     2 · Classical Privacy Domains   — attested confidential compute
     3 · Quantum Privacy Domains     — Privacy Algorithms (math)

   Closing: Semi-Quantum hybrid — Quantum-tier guarantees over the whole
   domain with nested Classical enclaves for plaintext-required workloads.

   Three variants:
     • .ws-ttp                  — variant A · "stacked tiers, shared spine":
                                   three rows; right column is an "invariants
                                   spine" repeated identically per tier to
                                   prove the architectural invariance.
     • .ws-ttp--ladder           — variant B · "ladder": tier number left,
                                   name + body center, root-of-trust badge
                                   right; tiers connect via a vertical gold
                                   rail to read as a progression.
     • .ws-ttp--matrix           — variant C · "matrix": tier rows × spec
                                   columns (Enforcement, Root of trust,
                                   Containment, Day-1?). Most reference-y;
                                   reads as a spec table.
   ========================================================================= */

.ws-ttp {
  background: var(--ws-page);
}

.ws-ttp__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 48px 48px;
}

.ws-ttp__eyebrow {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-label);
  letter-spacing: var(--ws-tracking-label);
  text-transform: uppercase;
  color: var(--ws-ink-faint);
  font-weight: 500;
  margin-bottom: 12px;
}

.ws-ttp__title {
  font-family: var(--ws-font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ws-ink);
  margin: 0 0 28px;
  max-width: 800px;
}

/* ── Variant A · stacked tiers, shared spine ──────────────────── */
.ws-ttp__stack {
  background: var(--ws-surface);
  border: 1px solid var(--ws-rule);
}

.ws-ttp__tier {
  display: grid;
  grid-template-columns: 80px 1.4fr 1fr;
  gap: 24px;
  padding: 24px 28px;
  border-bottom: 1px solid var(--ws-rule);
  position: relative;
}

.ws-ttp__tier:last-child {
  border-bottom: none;
}

.ws-ttp__tier--3 {
  background: var(--ws-surface-2);
}

.ws-ttp__tier--day1::before {
  content: "DAY 1";
  position: absolute;
  top: 16px;
  right: 28px;
  font-family: var(--ws-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--ws-tracking-mono);
  color: var(--ws-accent);
  border: 1px solid var(--ws-accent);
  padding: 2px 6px;
}

.ws-ttp__tier-num {
  font-family: var(--ws-font-display);
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  color: var(--ws-accent);
  letter-spacing: -0.02em;
  border-top: 2px solid var(--ws-accent);
  padding-top: 12px;
}

.ws-ttp__tier-num small {
  display: block;
  font-family: var(--ws-font-mono);
  font-size: 9.5px;
  color: var(--ws-ink-faint);
  letter-spacing: var(--ws-tracking-mono);
  margin-top: 6px;
  font-weight: 400;
}

.ws-ttp__tier-body {
  padding-top: 4px;
}

.ws-ttp__tier-name {
  font-family: var(--ws-font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--ws-ink);
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin: 0 0 8px;
}

.ws-ttp__tier-mech {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-body);
  line-height: 1.55;
  color: var(--ws-ink-muted);
  margin: 0 0 10px;
}

.ws-ttp__tier-root {
  font-family: var(--ws-font-mono);
  font-size: 11px;
  letter-spacing: var(--ws-tracking-mono);
  color: var(--ws-ink);
  text-transform: uppercase;
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
}

.ws-ttp__tier-root-label {
  color: var(--ws-ink-faint);
}

/* Spine — repeated identically across all three tiers */
.ws-ttp__spine {
  border-left: 2px solid var(--ws-accent);
  padding-left: 18px;
  padding-top: 4px;
}

.ws-ttp__spine-eyebrow {
  font-family: var(--ws-font-body);
  font-size: 9.5px;
  letter-spacing: var(--ws-tracking-label);
  text-transform: uppercase;
  color: var(--ws-accent);
  font-weight: 600;
  margin-bottom: 8px;
}

.ws-ttp__spine-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ws-ttp__spine-list li {
  font-family: var(--ws-font-body);
  font-size: 12px;
  color: var(--ws-ink);
  line-height: 1.4;
  padding: 4px 0;
  border-bottom: 1px solid var(--ws-rule-faint);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.ws-ttp__spine-list li:last-child { border-bottom: none; }

.ws-ttp__spine-list li small {
  font-family: var(--ws-font-mono);
  font-size: 9.5px;
  color: var(--ws-accent);
  letter-spacing: var(--ws-tracking-mono);
}

/* Hybrid note */
.ws-ttp__hybrid {
  margin-top: 18px;
  padding: 18px 24px;
  background: var(--ws-surface);
  border: 1px solid var(--ws-rule);
  border-left: 3px solid var(--ws-accent);
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  align-items: baseline;
}

.ws-ttp__hybrid-name {
  font-family: var(--ws-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ws-ink);
  line-height: 1.3;
}

.ws-ttp__hybrid-name small {
  display: block;
  font-family: var(--ws-font-mono);
  font-size: 9.5px;
  color: var(--ws-accent);
  letter-spacing: var(--ws-tracking-mono);
  text-transform: uppercase;
  margin-bottom: 4px;
  font-weight: 500;
}

.ws-ttp__hybrid-desc {
  font-family: var(--ws-font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ws-ink-muted);
}

/* ── Variant B · ladder ──────────────────────────────────────────── */
.ws-ttp--ladder .ws-ttp__stack {
  background: transparent;
  border: none;
  position: relative;
  padding-left: 0;
}

.ws-ttp--ladder .ws-ttp__tier {
  background: var(--ws-surface);
  border: 1px solid var(--ws-rule);
  border-top: 2px solid var(--ws-accent);
  margin-bottom: 14px;
  padding: 22px 24px;
  grid-template-columns: 64px 1fr 200px;
  gap: 20px;
}

.ws-ttp--ladder .ws-ttp__tier-num {
  border-top: none;
  padding-top: 0;
  font-size: 38px;
}

.ws-ttp--ladder .ws-ttp__tier--day1::before {
  top: 22px;
}

.ws-ttp--ladder .ws-ttp__spine {
  border-left: 1px solid var(--ws-rule);
  padding-left: 16px;
}

.ws-ttp--ladder .ws-ttp__tier--3 {
  background: var(--ws-surface);
}

/* ── Variant C · matrix ──────────────────────────────────────────── */
.ws-ttp--matrix .ws-ttp__matrix {
  width: 100%;
  border-collapse: collapse;
  background: var(--ws-surface);
  border: 1px solid var(--ws-rule);
  font-family: var(--ws-font-body);
}

.ws-ttp--matrix .ws-ttp__matrix th,
.ws-ttp--matrix .ws-ttp__matrix td {
  text-align: left;
  padding: 16px 18px;
  border-bottom: 1px solid var(--ws-rule);
  vertical-align: top;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ws-ink-muted);
}

.ws-ttp--matrix .ws-ttp__matrix thead th {
  background: var(--ws-surface-2);
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-label);
  letter-spacing: var(--ws-tracking-label);
  text-transform: uppercase;
  color: var(--ws-ink-faint);
  font-weight: 600;
  border-bottom: 2px solid var(--ws-accent);
}

.ws-ttp--matrix .ws-ttp__matrix tbody tr:last-child td {
  border-bottom: none;
}

.ws-ttp--matrix .ws-ttp__matrix .ws-ttp__cell-tier {
  font-family: var(--ws-font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ws-ink);
  width: 220px;
}

.ws-ttp--matrix .ws-ttp__matrix .ws-ttp__cell-tier small {
  display: block;
  font-family: var(--ws-font-mono);
  font-size: 10px;
  color: var(--ws-accent);
  letter-spacing: var(--ws-tracking-mono);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 2px;
}

.ws-ttp--matrix .ws-ttp__matrix .ws-ttp__cell-day1 {
  font-family: var(--ws-font-mono);
  font-size: 10.5px;
  letter-spacing: var(--ws-tracking-mono);
  color: var(--ws-accent);
  width: 80px;
  text-align: center;
}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ws-ttp__tier,
  .ws-ttp--ladder .ws-ttp__tier {
    grid-template-columns: 60px 1fr;
  }
  .ws-ttp__spine {
    grid-column: 1 / -1;
    margin-top: 12px;
  }
  .ws-ttp__hybrid { grid-template-columns: 1fr; gap: 10px; }
  .ws-ttp--matrix .ws-ttp__matrix {
    display: block; overflow-x: auto;
  }
}