/* ==========================================================================
   COMPONENTS · CROSS-LINK MATRIX — the structural guarantee that "no score is a
   dead end." Every data surface exposes the same four directional doorways —
   ↑ up (parent scope), ↓ down (a child scope), ↔ sideways (siblings), and
   ↗ across (pivot to place or a comparison) — each with its own glyph, hue and
   keyline so the reader can read the direction at a glance, never by colour alone.

   Rendered as a printed "see also" apparatus: a small-caps figure label, then a
   grid of labelled doorways. Each doorway carries a relation kicker (which way
   it travels), a short serif/furniture list of named destinations, and a mono-
   tallied "all N →" doorway so nothing terminates. Navigational only — it shows
   names, ISO codes and counts, never naked scores (score viz is the s2 unit).

   Composes .op-kicker, .op-card surfacing, .op-chip. New component.
   ========================================================================== */

.op-crosslink {
  border-top: 2px solid var(--accent);
  padding-block: var(--space-md);
}
.op-crosslink__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.op-crosslink__title {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}
.op-crosslink__note {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-style: italic;
  color: var(--text-muted);
}

/* The doorways grid */
.op-crosslink__grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* A single doorway */
.op-crosslink__door {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}

/* Each direction gets its own hue + a leading keyline, so the four doors are told
   apart by colour AND position — never colour alone, since the glyph and word in the
   kicker carry the same signal for colour-blind / screen-reader readers. Palette:
   up = myrtle (climb out), down = ochre (drill in), sideways = ink (step across the
   level), across = rubric/accent (the headline pivot to place or comparison). */
.op-crosslink__door[data-dir="up"]       { --xl-dir: var(--myrtle); }
.op-crosslink__door[data-dir="down"]     { --xl-dir: var(--ochre-ink); }
.op-crosslink__door[data-dir="sideways"] { --xl-dir: var(--ink-secondary); }
.op-crosslink__door[data-dir="across"]   { --xl-dir: var(--accent); }
.op-crosslink__door[data-dir] {
  border-inline-start: 3px solid var(--xl-dir, var(--rule));
}

/* The relation kicker — glyph + direction word + descriptive tail. Which way this
   doorway travels through the matrix, said three ways at once. */
.op-crosslink__rel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em;
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
/* The directional glyph — ↑ up · ↓ down · ↔ sideways · ↗ across */
.op-crosslink__glyph {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  line-height: 1;
  font-weight: var(--weight-bold);
  color: var(--xl-dir, var(--accent));
}
.op-crosslink__dir {
  color: var(--xl-dir, var(--text));
  font-weight: var(--weight-bold);
}
.op-crosslink__dir::after {
  content: "·";
  margin-inline-start: 0.4em;
  color: var(--text-muted);
}
.op-crosslink__rel-text { color: var(--text-muted); }

.op-crosslink__door-title {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.op-crosslink__list {
  list-style: none;
  margin: var(--space-2xs) 0 0;
  padding: 0;
  display: grid;
  gap: 0.1rem;
}
.op-crosslink__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: 0.2em 0;
  border-top: 1px solid var(--rule-faint);
}
.op-crosslink__list li:first-child { border-top: 0; }
.op-crosslink__list a {
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  color: var(--text);
  text-decoration: none;
}
.op-crosslink__list a:hover { color: var(--accent); }
/* A mono tag at the end of a row — ISO code, count, etc. */
.op-crosslink__tag {
  flex: none;
  font-family: var(--font-data);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The terminal "all N →" doorway — the promise that the list never ends here */
.op-crosslink__more {
  margin-top: auto;
  padding-top: var(--space-2xs);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}
.op-crosslink__more [data-numeric] {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
}
.op-crosslink__more::after { content: "\2192"; color: var(--accent); }
.op-crosslink__more:hover { color: var(--accent); }