/* =========================================================================
   lineage-diagram — v1.3 (2026-04-21). NEW in v1.3.
   Class-based component CSS for the priority-chain visualization
   (patents page §6.3). Two fidelities shipped; pick one per context.

   LOW-FI  (.ws-lineage--list)     — styled ordered-list rendering.
                                     Accessible, crawler-friendly, fast.
   HIGH-FI (.ws-lineage--svg)      — inline SVG tree. Shows the 2016
                                     root, linear continuation chain to
                                     US 12,316,610 B1, the CIP branch
                                     from 63/804,583 into WEBS.09CIP,
                                     and four independent 2025 provisionals
                                     waiting for CIP roll-in.

   README recommendation (see v1.3 CHANGELOG): ship HIGH-FI on desktop +
   LOW-FI on mobile (viewport < 640px), via the `.ws-lineage--svg` /
   `.ws-lineage--list` sibling-toggle classes. Both share the same
   container chrome so swapping is a simple CSS display flip.

   Palette: everything resolves to v1.2 --ws-* tokens. No SVG fills or
   strokes use raw hex values — all route through var() so a palette
   swap propagates.
   ========================================================================= */

.ws-lineage {
  background: var(--ws-surface);
  border: 1px solid var(--ws-rule);
  border-top: 2px solid var(--ws-accent);
  padding: 32px 36px 32px;
  font-family: var(--ws-font-body);
  color: var(--ws-ink);
}

.ws-lineage__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: 10px;
}

.ws-lineage__title {
  font-family: var(--ws-font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ws-ink);
  margin: 0 0 24px;
}

/* ── LOW-FI · styled ordered list ─────────────────────────────────── */
.ws-lineage--list .ws-lineage__chain {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.ws-lineage--list .ws-lineage__step {
  position: relative;
  padding: 10px 0 10px 40px;
  display: grid;
  grid-template-columns: 160px 1fr;
  column-gap: 20px;
  align-items: baseline;
}

/* Vertical spine behind the steps */
.ws-lineage--list .ws-lineage__step::before {
  content: '';
  position: absolute;
  left: 15px; top: 24px; bottom: -6px;
  width: 1px;
  background: var(--ws-rule);
}

.ws-lineage--list .ws-lineage__step:last-of-type::before {
  bottom: 50%;
}

/* Node marker — mono ordinal in a 30×30 square */
.ws-lineage--list .ws-lineage__step::after {
  content: attr(data-ord);
  position: absolute;
  left: 0; top: 10px;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ws-surface);
  border: 1px solid var(--ws-rule);
  font-family: var(--ws-font-mono);
  font-size: 10.5px;
  color: var(--ws-accent);
  letter-spacing: var(--ws-tracking-mono);
  font-weight: 500;
}

/* Branch steps get a gold ring */
.ws-lineage--list .ws-lineage__step--branch::after {
  border-color: var(--ws-accent);
}

/* The pending CIP gets a dashed marker */
.ws-lineage--list .ws-lineage__step--pending::after {
  border-style: dashed;
}

.ws-lineage--list .ws-lineage__date {
  font-family: var(--ws-font-mono);
  font-size: 11.5px;
  color: var(--ws-ink-faint);
  letter-spacing: var(--ws-tracking-mono);
  line-height: 1.4;
  white-space: nowrap;
}

.ws-lineage--list .ws-lineage__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ws-lineage--list .ws-lineage__ref {
  font-family: var(--ws-font-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ws-ink);
  letter-spacing: var(--ws-tracking-mono);
}

.ws-lineage--list .ws-lineage__note {
  font-family: var(--ws-font-body);
  font-size: 13px;
  color: var(--ws-ink-muted);
  line-height: 1.5;
}

.ws-lineage--list .ws-lineage__step--granted .ws-lineage__ref {
  color: var(--ws-accent);
}

/* Parallel provisionals block below the main chain */
.ws-lineage--list .ws-lineage__parallel {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--ws-rule-faint);
}

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

.ws-lineage--list .ws-lineage__parallel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.ws-lineage--list .ws-lineage__parallel-item {
  display: grid;
  grid-template-columns: 160px 1fr;
  column-gap: 20px;
  font-family: var(--ws-font-body);
  font-size: 13px;
  color: var(--ws-ink-muted);
  line-height: 1.5;
  padding: 6px 0 6px 40px;
  position: relative;
}

.ws-lineage--list .ws-lineage__parallel-item::before {
  content: '○';
  position: absolute;
  left: 10px; top: 6px;
  font-size: 12px;
  color: var(--ws-accent);
}

.ws-lineage--list .ws-lineage__parallel-item .ws-lineage__date {
  /* reuses mono date style */
}

.ws-lineage--list .ws-lineage__parallel-item .ws-lineage__ref {
  font-family: var(--ws-font-mono);
  font-size: 12px;
  color: var(--ws-ink);
  letter-spacing: var(--ws-tracking-mono);
  font-weight: 500;
}

/* ── HIGH-FI · SVG container ──────────────────────────────────────── */
.ws-lineage--svg .ws-lineage__svg-wrap {
  width: 100%;
  overflow: visible;
}

.ws-lineage--svg svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* SVG token classes — referenced from inline <style> inside the SVG
   OR from attribute class="ws-l-*" on nodes. All route through var(). */
.ws-l-text {
  font-family: var(--ws-font-body);
  fill: var(--ws-ink);
}
.ws-l-mono {
  font-family: var(--ws-font-mono);
  fill: var(--ws-ink);
  letter-spacing: 0.04em;
}
.ws-l-mono-faint {
  font-family: var(--ws-font-mono);
  fill: var(--ws-ink-faint);
  letter-spacing: 0.04em;
}
.ws-l-mono-gold {
  font-family: var(--ws-font-mono);
  fill: var(--ws-accent);
  letter-spacing: 0.04em;
}
.ws-l-node-stroke { stroke: var(--ws-rule); fill: var(--ws-surface); }
.ws-l-node-granted { stroke: var(--ws-accent); fill: var(--ws-surface-2); stroke-width: 2; }
.ws-l-node-pending { stroke: var(--ws-accent); fill: var(--ws-surface); stroke-dasharray: 4 3; }
.ws-l-node-prov { stroke: var(--ws-ink-muted); fill: var(--ws-surface); }
.ws-l-edge { stroke: var(--ws-rule); stroke-width: 1.25; fill: none; }
.ws-l-edge-gold { stroke: var(--ws-accent); stroke-width: 1.5; fill: none; }
.ws-l-edge-dashed { stroke: var(--ws-ink-faint); stroke-width: 1; fill: none; stroke-dasharray: 3 3; }

/* ── Fidelity toggle — SVG on desktop, list on narrow viewports ───── */
/* By default both render. Consumer wraps them and toggles via:  */
.ws-lineage-toggle .ws-lineage--list { display: none; }
.ws-lineage-toggle .ws-lineage--svg  { display: block; }

@media (max-width: 720px) {
  .ws-lineage-toggle .ws-lineage--list { display: block; }
  .ws-lineage-toggle .ws-lineage--svg  { display: none; }
}

/* Narrow phones: the 160px fixed date column + 40px node padding overruns
   viewports under ~400px. Restack each step into a single column with the
   date sitting above the body. */
@media (max-width: 480px) {
  .ws-lineage { padding: 24px 18px; }
  .ws-lineage--list .ws-lineage__step,
  .ws-lineage--list .ws-lineage__parallel-item {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 4px;
    padding-left: 30px;
  }
}

/* ── Legend row shared by both fidelities ─────────────────────────── */
.ws-lineage__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ws-rule-faint);
  font-family: var(--ws-font-body);
  font-size: 11.5px;
  color: var(--ws-ink-muted);
}

.ws-lineage__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.01em;
}

.ws-lineage__legend-swatch {
  width: 14px; height: 14px;
  border: 1.5px solid var(--ws-rule);
  background: var(--ws-surface);
  display: inline-block;
}
.ws-lineage__legend-swatch--granted { border-color: var(--ws-accent); background: var(--ws-surface-2); border-width: 2px; }
.ws-lineage__legend-swatch--pending { border-color: var(--ws-accent); border-style: dashed; }
.ws-lineage__legend-swatch--prov    { border-color: var(--ws-ink-muted); }