/* =========================================================================
   universal-card — v2.0 (2026-04-21).
   Class-based component CSS for the Universal Card (Variant B · Ledger Row).
   Sources all color, type, spacing, rule weights from webshield-navy.css.

   Shape: two-column grid. Left rail (identity) + right column (argument).
   Voice rule: outcome-first. The one-sentence DEFINITION is the
   Exec-Summary verbatim anchor and must carry more visual weight than
   the supporting body — serif + medium + deep ink + looser leading.

   Version history (full lineage, see CHANGELOG.md for detail):
     v1.0 (2026-04-20) — initial Ledger Row shape (JSX).
     v1.1 (2026-04-20) — invariants-row borderless-paper variant (sibling).
     v1.2 (2026-04-20) — credibility-bar tight-density variant (sibling).
     v1.3 (2026-04-21) — navy tokens: body font sizes bumped ~10%
                          (lede 16→18, body 13.5→15, body-sm 12.5→13.5,
                          lh-body 1.6→1.7). Token-only; affects this
                          component through token references.
     v1.4 (2026-04-21) — mechanism + patent anchor moved from left rail
                          to new .ws-uc__footer row in right column,
                          between body and CTA. Left rail: identity only.
     v1.4.1 (2026-04-21) — footer font-family + size unified across
                          label, mechanism, anchor (all body / body-sm).
                          Weight and color still varied by role.
     v2.1 (2026-04-27) — /ecosystem additions (page-vocabulary upgrade,
                          additive only — no breaking changes to v2.0
                          shape or class names):
                          • .ws-uc--ledger-compact — compacted Ledger Row
                            modifier. Same identity-left / argument-right
                            grid as base; right column carries description
                            sentence + universal-mapping line + CTA only,
                            no body paragraph, no "Made possible by" footer.
                            Rail widened to 200px to host the
                            .ws-here-badge + URL line cleanly.
                          • .ws-uc__description — short serif description
                            sentence inside the compacted variant. Weight
                            400 — visibly lighter than .ws-uc__definition
                            (weight 500) so home and /ecosystem stay
                            distinguishable for repeat visitors.
                          • .ws-uc__umap — universal-mapping line. Display
                            serif italic, 14px, 1px gold rule above. New
                            visual primitive specific to /ecosystem.
                            Distinct from the v2.0 "MADE POSSIBLE BY"
                            footer (uppercase + body weight + 2px gold);
                            both gold-ruled, both proof-of-spine, both
                            coexist deliberately.
                          • .ws-uc__url / .ws-uc__url--forthcoming — URL
                            line in the identity column.
                          • .ws-uc__cta-empty — NO LIVE LINK indicator
                            for rows without a CTA target (QPL, EP3 Networks).
                          • .ws-here-badge — "You are here" pill primitive.
                            Standalone — content-positioned by parent layout.
                          • .ws-tm — superscript trademark glyph helper.
     v2.0 (2026-04-21) — emphatic footer: 2px gold top rule (replaces
                          hairline), uppercase-tracked "MADE POSSIBLE BY"
                          label, mechanism + anchor bumped to body size
                          weight 500 (navy + gold). Footer is now
                          visually load-bearing — the patents are the
                          thesis of WebShield, and the proof line earns
                          the eye.

   Usage (HTML, v2.0):
     <article class="ws-uc">
       <div class="ws-uc__rail">
         <div class="ws-uc__ordinal">01 / 05</div>
         <h3 class="ws-uc__name">Universal Access</h3>
         <!-- optional: .ws-uc__rail-caption for Foundation/Capstone -->
       </div>
       <div class="ws-uc__col">
         <div class="ws-uc__eyebrow">The definition</div>
         <p class="ws-uc__definition">…</p>
         <p class="ws-uc__body">…</p>
         <div class="ws-uc__footer">
           <span class="ws-uc__footer-label">Made possible by</span>
           <span class="ws-uc__made-by">EasyAccess — OAuth/OpenID + VC</span>
           ·
           <a class="ws-uc__patent-ref" href="/patents#easyaccess">/patents#easyaccess</a>
         </div>
         <a class="ws-uc__cta" href="#">In practice →</a>
       </div>
     </article>

   Compact variant: add `.ws-uc--compact` to the root.
     v2.2 (2026-04-28) — /investors additions (additive, no breaking changes):
                          • .ws-uc--row — row-collapsed modifier for N-up
                            grids (3-up, 4-up). Inner two-column grid
                            collapses to single-column with rail-on-top.
                            Preserves ordinal mono, serif name, gold-tracked
                            eyebrow, and 2px gold proof rule.
                          • .ws-uc--resource — downloadable-document card
                            modifier. Replaces footer with a download CTA
                            whose top border is the gold proof rule.
                          • .ws-uc__cta--download — download-link variant
                            of the standard CTA (sans, weight 500, navy
                            ink with gold-rule top).
                          • .ws-uc__footer label is documented as dual-use:
                            "MADE POSSIBLE BY" (mechanism, home + ecosystem)
                            or "EVIDENCE" (evidence pointer, /investors).
                            No CSS change — the slot is content-agnostic.
   ========================================================================= */

.ws-uc {
  background: var(--ws-surface);
  border: var(--ws-uc-border);
  padding: var(--ws-uc-pad-y) var(--ws-uc-pad-x);
  font-family: var(--ws-font-body);
  color: var(--ws-ink);
  display: grid;
  grid-template-columns: var(--ws-uc-rail-width) 1fr;
  gap: var(--ws-uc-col-gap);
  align-items: start;
}

.ws-uc--compact {
  padding: 22px 28px;
  grid-template-columns: 128px 1fr;
  gap: 28px;
}

/* ── Left rail — identity only (ordinal + name + optional caption) ── */
.ws-uc__rail { }

.ws-uc__ordinal {
  font-family: var(--ws-font-mono);
  font-size: var(--ws-fs-micro);
  color: var(--ws-accent);
  font-weight: 500;
  margin-bottom: 6px;
  letter-spacing: var(--ws-tracking-mono);
}

.ws-uc__name {
  font-family: var(--ws-font-display);
  font-size: var(--ws-fs-display);
  font-weight: 500;
  line-height: var(--ws-lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--ws-ink);
}

/* ── Right column — argument ──────────────────────────────────────── */
.ws-uc__col {
  display: flex;
  flex-direction: column;
}

.ws-uc__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-uc-accent-eyebrow);
  font-weight: 600;
  margin-bottom: 8px;
}

/* DEFINITION — verbatim anchor. Serif, medium, deep ink, looser leading. */
.ws-uc__definition {
  font-family: var(--ws-font-display);
  font-size: var(--ws-fs-lede);
  line-height: var(--ws-lh-lede);
  font-weight: 500;
  color: var(--ws-ink);
  margin: 0 0 16px;
  letter-spacing: -0.005em;
}

.ws-uc--compact .ws-uc__definition { margin-bottom: 12px; }

/* SUPPORTING BODY — sans, regular, muted. Reads as support. */
.ws-uc__body {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-body);
  line-height: var(--ws-lh-body);
  font-weight: 400;
  color: var(--ws-ink-muted);
  margin: 0 0 18px;
}

.ws-uc--compact .ws-uc__body { margin-bottom: 14px; }

/* ── v2.0 · "Made possible by" footer — emphatic proof row ─────────
   Footer is visually load-bearing because the patents are the entire
   thesis of WebShield. The proof line is the line that matters to
   IP counsel — it must earn the eye on every card.

   Structure:
     2px gold top rule           (var(--ws-rule-anchor) solid var(--ws-accent))
     MADE POSSIBLE BY            (small uppercase eyebrow, muted)
     Mechanism · /patent-ref     (body size, weight 500, navy + gold, inline) */
.ws-uc__footer {
  padding-top: 16px;
  margin-bottom: 18px;
  border-top: var(--ws-rule-anchor) solid var(--ws-accent);
  font-family: var(--ws-font-body);
  line-height: var(--ws-lh-body);
}

.ws-uc--compact .ws-uc__footer {
  padding-top: 14px;
  margin-bottom: 14px;
}

/* Label — "Made possible by". Small uppercase eyebrow above the proof line.
   Standalone on its own visual beat via right-margin breathing room; the
   uppercase + tracking carries the structural separation without forcing
   a block-level line break (which felt too airy at repetition). */
.ws-uc__footer-label {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-label);
  font-weight: 500;
  color: var(--ws-ink-faint);
  text-transform: uppercase;
  letter-spacing: var(--ws-tracking-label);
  margin-right: 10px;
}

/* Mechanism name — body size, weight 500, navy ink.
   NOT serif, NOT mono, NOT italic. Weight 500 puts it above the body
   paragraph in visual rank; the body paragraph is 400 --ws-ink-muted. */
.ws-uc__made-by {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-body);
  font-weight: 500;
  color: var(--ws-ink);
}

/* Separator between mechanism and anchor (and between multiple anchors). */
.ws-uc__footer-sep {
  color: var(--ws-rule);
  margin: 0 6px;
}

/* Patent anchor — body size, weight 500, gold with gold underline.
   Hover: slight color shift only. NOT mono. */
.ws-uc__patent-ref {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-body);
  font-weight: 500;
  color: var(--ws-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--ws-accent);
}

.ws-uc__patent-ref:hover {
  color: var(--ws-accent-hover);
  border-bottom-color: var(--ws-accent-hover);
}

/* ── CTA — below the footer, own line, underlined navy ──────────── */
.ws-uc__cta {
  align-self: flex-start;
  margin-top: auto;
  font-size: var(--ws-fs-body-sm);
  font-weight: 500;
  color: var(--ws-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ws-ink);
  padding-bottom: 2px;
}

/* =========================================================================
   v2.1 additions — /ecosystem page vocabulary
   All additive. Sources tokens from webshield-navy.css. No new tokens.
   ========================================================================= */

/* ── Compacted Ledger Row · .ws-uc--ledger-compact ─────────────────
   Modifier on .ws-uc. Right column shrinks to:
   description → universal-mapping line → CTA. No body, no footer. */
.ws-uc--ledger-compact {
  padding: 24px 32px;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: start;
}

.ws-uc--ledger-compact .ws-uc__name {
  margin-bottom: 8px;
}

/* URL line in the identity column */
.ws-uc__url {
  font-family: var(--ws-font-mono);
  font-size: 11px;
  letter-spacing: var(--ws-tracking-mono);
  color: var(--ws-ink-muted);
  display: block;
  margin-top: 2px;
  word-break: break-all;
  text-decoration: none;
}
.ws-uc__url--forthcoming {
  color: var(--ws-ink-faint);
  font-style: italic;
}

/* Description sentence — serif weight 400, visibly lighter than .ws-uc__definition */
.ws-uc--ledger-compact .ws-uc__description {
  font-family: var(--ws-font-display);
  font-size: var(--ws-fs-lede);
  font-weight: 400;
  line-height: var(--ws-lh-lede);
  color: var(--ws-ink);
  margin: 0 0 14px;
  letter-spacing: -0.005em;
}

.ws-uc--ledger-compact .ws-uc__cta {
  margin-top: 16px;
  font-size: var(--ws-fs-body-sm);
}

/* NO LIVE LINK indicator for rows without a CTA (QPL, EP3 Networks) */
.ws-uc__cta-empty {
  margin-top: 16px;
  font-family: var(--ws-font-mono);
  font-size: var(--ws-fs-micro);
  letter-spacing: var(--ws-tracking-mono);
  text-transform: uppercase;
  color: var(--ws-ink-faint);
}

/* ── Universal-mapping line · .ws-uc__umap ─────────────────────────
   Display serif italic, 14px, 1px gold rule above. New /ecosystem
   primitive — distinct from v2.0 "MADE POSSIBLE BY" footer. */
.ws-uc__umap {
  font-family: var(--ws-font-display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ws-ink-muted);
  margin: 0;
  padding-top: 12px;
  border-top: var(--ws-rule-hair) solid var(--ws-accent);
  max-width: 720px;
}

/* ── Trademark glyph helper ────────────────────────────────────────
   Used on PNX, EasyAccess, Quantum Privacy, Proof of Trust, Unified Trust Model. */
.ws-tm {
  font-size: 0.65em;
  vertical-align: super;
  line-height: 0;
  margin-left: 1px;
  color: inherit;
}

/* ── "You are here" badge · .ws-here-badge ─────────────────────────
   Cleanly extractable primitive — drop next to the entity name in any
   identity column. Brief P-6 token names mapped to the locked palette:
     --brand-yellow      → --ws-accent (gold #8A6B2E)
     --brand-blue-start  → --ws-page  (warm bone, 5.6:1 contrast on gold)
   Open question for v1.5: add a true yellow token if the visual register
   should shift. Default keeps the institutional gold. */
.ws-here-badge {
  display: inline-block;
  background: var(--ws-accent);
  color: var(--ws-page);
  font-family: var(--ws-font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 9px 3px;
  border-radius: 2px;
  margin-bottom: 8px;
  white-space: nowrap;
}

/* ── Responsive — collapse to single column ───────────────────────── */
@media (max-width: 720px) {
  .ws-uc,
  .ws-uc--compact,
  .ws-uc--ledger-compact {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ws-uc--ledger-compact { padding: 22px 24px; }
  .ws-here-badge { margin-bottom: 6px; }
}


/* =========================================================================
   v2.2 additions — /investors page vocabulary (2026-04-28).
   All additive. Sources tokens from webshield-navy.css. No new tokens.

   Promoted from /investors page-CSS to component layer because these
   modifiers express a card-layout pattern (single-column / claim-evidence)
   that future pages with N-up grids of Ledger Row cards will reuse.
   ========================================================================= */

/* ── Row-collapsed Ledger Row · .ws-uc--row ────────────────────────
   Modifier on .ws-uc that collapses the canonical identity-left /
   argument-right two-column inner grid to single-column (rail-on-top
   of content). Used when .ws-uc cards are placed in an N-up row grid
   (3-up, 4-up) where each cell falls below the ~340px width the
   canonical two-column shape needs.

   Preserves the Ledger Row visual vocabulary:
     • ordinal mono micro-copy (gold)
     • serif name in identity slot
     • gold-tracked eyebrow
     • 2px gold proof rule on the footer

   The internal beats stack vertically inside each card; the rail
   becomes a top section divided from content by a 1-px hairline. */
.ws-uc--row {
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 26px 26px 22px;
  height: 100%;
}

.ws-uc--row .ws-uc__rail {
  border-bottom: var(--ws-rule-hair) solid var(--ws-rule-faint);
  padding-bottom: 14px;
  display: flex;
  flex-direction: column;
}

.ws-uc--row .ws-uc__name {
  margin: 0;
}

.ws-uc--row .ws-uc__col { gap: 0; }

.ws-uc--row .ws-uc__definition {
  font-size: 17px;
  margin-bottom: 14px;
}

.ws-uc--row .ws-uc__body {
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 16px;
}

.ws-uc--row .ws-uc__footer {
  padding-top: 12px;
  margin-bottom: 0;
}

.ws-uc--row .ws-uc__footer-label {
  display: block;
  margin-bottom: 6px;
  margin-right: 0;
}

.ws-uc--row .ws-uc__cta {
  margin-top: 12px;
  font-size: var(--ws-fs-body-sm);
}

/* ── Claim-evidence card (moat extension) — content rule ──────────
   Beat 2 of /investors uses .ws-uc--row with three text beats per
   card: claim (.ws-uc__definition) → supporting (.ws-uc__body) →
   evidence pointer (.ws-uc__footer with label "EVIDENCE" instead of
   the home page's "MADE POSSIBLE BY").

   No CSS changes required — the slot is identical, only the label
   text and the link target differ. Documented here so future pages
   know the slot is dual-use (mechanism reference OR evidence). */

/* ── Resource card · .ws-uc--resource ──────────────────────────────
   Modifier on .ws-uc--row for downloadable-document cards. Replaces
   the "Made possible by" footer with a download CTA whose top border
   IS the 2px gold proof rule. Preserves the once-per-card load-bearing
   gold rule from the canonical Ledger Row.

   Reads as three beats inside the card:
     rail · serif lede · gold-rule download CTA
   …versus the four-beat moat card (rail · lede · body · gold footer).
   The dropped beat earns vertical room and lets the lede breathe. */
.ws-uc--resource .ws-uc__definition {
  margin-bottom: 22px;
}

.ws-uc--resource .ws-uc__cta--download {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-body-sm);
  font-weight: 500;
  color: var(--ws-accent);
  text-decoration: none;
  align-self: stretch;
  margin-top: auto;
  padding-top: 14px;
  border-top: var(--ws-rule-anchor) solid var(--ws-accent);
}
.ws-uc--resource .ws-uc__cta--download:hover {
  color: var(--ws-accent-hover);
}

/* ── Responsive — N-up row grids collapse to 1fr below 720px ─────── */
@media (max-width: 720px) {
  .ws-uc--row { padding: 22px 22px 18px; }
}