/* =========================================================================
   mechanism-card — v1.3 (2026-04-21). NEW in v1.3.
   Class-based component CSS for the Mechanism Card (patents page §6.2).
   Sources all color, type, spacing, rule weights from webshield-navy.css.

   Shape: single column. Anchor ID (mono, gold) sits as the eyebrow;
   mechanism name is serif display; "what it is" paragraph is the
   verbatim anchor (serif lede, as in universal-card); "originates in"
   and "structural role" are metadata rows in the footer. Universal-
   supports chips render as the closing proof row — same vocabulary as
   patent-card.

   Relationship to universal-card (locked):
     • Same --ws-font-display, same --ws-fs-display for the mechanism name.
     • Same --ws-fs-lede + --ws-font-display for the "what it is" paragraph.
     • Different structural emphasis: NO two-column rail. The mechanism
       name is the visual anchor; the anchor ID replaces the rail ordinal
       as the mono cue. No outbound CTA — the footer carries chips instead
       of a link, since mechanisms are referenced, not clicked through.
     • Border treatment: hairline (1px --ws-rule), same as universal-card,
       but with a 2px gold LEFT rule (not top) to distinguish cousin from
       the locked component's top-gold-rule-in-footer pattern.

   Usage:
     <article class="ws-mc" id="qp">
       <div class="ws-mc__anchor">/patents#qp</div>
       <h3 class="ws-mc__name">Quantum Privacy</h3>
       <p class="ws-mc__definition">Privacy algorithms that produce output…</p>

       <dl class="ws-mc__meta">
         <div class="ws-mc__meta-row">
           <dt class="ws-mc__meta-label">Originates in</dt>
           <dd class="ws-mc__meta-value">US 12,316,610 B1</dd>
         </div>
         <div class="ws-mc__meta-row">
           <dt class="ws-mc__meta-label">Structural role</dt>
           <dd class="ws-mc__meta-value">Enables computation over data…</dd>
         </div>
       </dl>

       <div class="ws-mc__supports">
         <span class="ws-mc__supports-label">Supports</span>
         <ul class="ws-supports-chips">
           <li class="ws-chip"><span class="ws-chip__ord">02/05</span>Exchange</li>
           …
         </ul>
       </div>
     </article>
   ========================================================================= */

.ws-mc {
  background: var(--ws-surface);
  border: 1px solid var(--ws-rule);
  border-left: 2px solid var(--ws-accent);
  padding: 26px 28px 24px;
  font-family: var(--ws-font-body);
  color: var(--ws-ink);
  display: flex;
  flex-direction: column;
  height: 100%;                  /* for consistent heights in 2x2 grid */
}

/* Anchor ID — mono, gold, uppercase tracking; sits where eyebrow would be */
.ws-mc__anchor {
  font-family: var(--ws-font-mono);
  font-size: var(--ws-fs-micro);
  color: var(--ws-accent);
  font-weight: 500;
  letter-spacing: var(--ws-tracking-mono);
  margin-bottom: 10px;
}

/* Mechanism name — serif display, navy, weight 500 */
.ws-mc__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;
  color: var(--ws-ink);
  margin: 0 0 14px;
}

/* "What it is" paragraph — serif lede, verbatim-anchor weight */
.ws-mc__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 20px;
  letter-spacing: -0.005em;
}

/* Meta rows — two-column dl, label left, value right-of-label (inline). */
.ws-mc__meta {
  margin: 0 0 20px;
  padding-top: 14px;
  border-top: 1px solid var(--ws-rule-faint);
  display: grid;
  gap: 10px;
}

.ws-mc__meta-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  align-items: baseline;
}

.ws-mc__meta-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: 0;
}

.ws-mc__meta-value {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-body-sm);
  font-weight: 400;
  color: var(--ws-ink-muted);
  line-height: 1.5;
  margin: 0;
}

/* Mono override for patent-number meta values */
.ws-mc__meta-value--mono {
  font-family: var(--ws-font-mono);
  font-size: var(--ws-fs-body-sm);
  color: var(--ws-ink);
  letter-spacing: var(--ws-tracking-mono);
}

/* Supports row — closes the card. Sits at the bottom via margin-top:auto.
   min-height sized to fit the 2-row chip-wrap case (longest supports list
   at current card width is 5 chips wrapping 3+2), so the gold SUPPORTS
   top-rule lands at a consistent offset across all cards in the 2×2 grid
   regardless of how many chips each mechanism carries. */
.ws-mc__supports {
  margin-top: auto;
  padding-top: 16px;
  border-top: var(--ws-rule-anchor) solid var(--ws-accent);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 104px;
}

.ws-mc__supports-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);
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .ws-mc__meta-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}