/* =========================================================================
   cross-reference-callout — NEW component for /technology. v0.1 (2026-04-26).
   v0.2 (2026-05-27) — additive: .ws-xref-band (lets an xref stand alone
   between full-width sections) + multi-part card body (lead <p> +
   .ws-xref__action link). Adopted by /documents and /investors for the
   "before you read" methodology callout; no changes to the v0.1 variants.
   See brief-methodology.md.

   The in-section "see also" pattern. Used 3–4× across the page (end of
   #exchange, end of #ownership ×2, end of #ai). Short prose block (one or
   two sentences) with an in-page anchor link.

   LOAD-BEARING DESIGN GOAL: must read as *navigation / cross-reference*,
   not as body content. Body paragraphs immediately above use:
     • sans, --ws-fs-body 15px, --ws-ink-muted, --ws-lh-body 1.7

   The callout therefore must visually break from those four properties.
   It does so by combining (per variant): inset, gold left rule, italic
   serif, smaller measure, faint surface fill, mono "↳ See also" prefix.

   Three variants (toggle via class on root <aside>):
     • .ws-xref                       — variant A · "indented gold rule":
                                          3px gold left rule, italic serif,
                                          faint indent. Quietest variant —
                                          reads like a footnote.
     • .ws-xref--card                  — variant B · "tinted card":
                                          surface-2 fill, 1px rule,
                                          gold top accent, mono prefix
                                          "↳ SEE ALSO". Most visually
                                          discrete.
     • .ws-xref--margin                — variant C · "margin marginalia":
                                          two-column layout, "SEE ALSO"
                                          eyebrow in left column, prose
                                          right. Most editorial.
   ========================================================================= */

/* ── Variant A · indented gold rule (default) ────────────────────── */
.ws-xref {
  margin: 22px 0 28px;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--ws-accent);
  font-family: var(--ws-font-display);
  font-size: 15.5px;
  line-height: 1.55;
  font-style: italic;
  color: var(--ws-ink-muted);
  max-width: 660px;
}

.ws-xref__prefix {
  font-family: var(--ws-font-mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: var(--ws-tracking-mono);
  color: var(--ws-accent);
  text-transform: uppercase;
  font-weight: 500;
  margin-right: 8px;
  display: inline-block;
}

.ws-xref a {
  color: var(--ws-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--ws-accent);
  font-style: normal;
  font-weight: 500;
}

.ws-xref a:hover {
  color: var(--ws-accent-hover);
  border-bottom-color: var(--ws-accent-hover);
}

/* ── Variant B · tinted card ─────────────────────────────────────── */
.ws-xref--card {
  margin: 24px 0 30px;
  padding: 18px 22px 18px;
  background: var(--ws-surface-2);
  border: 1px solid var(--ws-rule-faint);
  border-top: 2px solid var(--ws-accent);
  border-left: 0;
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-body);
  font-style: normal;
  line-height: 1.6;
  color: var(--ws-ink);
  max-width: none;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 18px;
  align-items: start;
}

.ws-xref--card .ws-xref__prefix {
  margin: 0;
  padding-top: 2px;
  white-space: nowrap;
  border-right: 1px solid var(--ws-rule);
  padding-right: 18px;
}

.ws-xref--card .ws-xref__body {
  font-family: var(--ws-font-body);
  font-style: normal;
  color: var(--ws-ink-muted);
  line-height: 1.6;
}

/* ── Variant C · margin marginalia ───────────────────────────────── */
.ws-xref--margin {
  margin: 24px 0 30px;
  padding: 14px 0;
  border-top: 1px solid var(--ws-rule);
  border-bottom: 1px solid var(--ws-rule);
  border-left: 0;
  font-family: var(--ws-font-body);
  font-style: normal;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  max-width: none;
  color: var(--ws-ink);
  font-size: var(--ws-fs-body);
}

.ws-xref--margin .ws-xref__prefix {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-label);
  letter-spacing: var(--ws-tracking-label);
  color: var(--ws-ink-faint);
  text-transform: uppercase;
  font-weight: 600;
  border-right: none;
  margin: 0;
  padding-top: 2px;
  display: block;
}

.ws-xref--margin .ws-xref__prefix-symbol {
  display: block;
  color: var(--ws-accent);
  font-family: var(--ws-font-display);
  font-size: 18px;
  margin-bottom: 2px;
  letter-spacing: 0;
}

.ws-xref--margin .ws-xref__body {
  font-family: var(--ws-font-body);
  color: var(--ws-ink-muted);
  line-height: 1.6;
  font-size: var(--ws-fs-body);
}

/* ── Band wrapper · stand-alone xref between full-width sections (v0.2) ─
   The variants above are designed to sit INSIDE a section's content
   column. .ws-xref-band lets an xref stand alone BETWEEN full-width
   <section>s — e.g. a page-level "before you read" notice between the
   hero and the first content section on /documents and /investors —
   giving it the same 1200px measure and 48px gutter as the section wraps
   above and below it. The xref--card's own top/bottom margin supplies the
   vertical separation. */
.ws-xref-band {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

/* Multi-part card body · lead paragraph + trailing action link (v0.2).
   The base body is a single prose block; these let it carry a <p> lead
   and an action link on its own line without relying on UA <p> margins
   (webshield-shared.css does not reset them). The link inherits the gold
   .ws-xref a treatment. */
.ws-xref--card .ws-xref__body > p { margin: 0; }
.ws-xref--card .ws-xref__action { display: inline-block; margin-top: 12px; }

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .ws-xref-band { padding: 0 24px; }
  .ws-xref--card,
  .ws-xref--margin {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .ws-xref--card .ws-xref__prefix {
    border-right: none;
    border-bottom: 1px solid var(--ws-rule);
    padding: 0 0 8px;
  }
}