/* ============================================================================
   GATE CHAIN (§5.9) + VENDOR MATRIX (§5.7) — ledger P3-3 / P3-4
   ----------------------------------------------------------------------------
   ⛔ THE CHAIN HAS NO TIME AXIS, AND THAT IS THE ARGUMENT. Nodes are spaced
   evenly because there is no honest duration to space them by; the connector
   between them carries the GATE CONDITION, not an interval. The builder refuses
   to emit if a date token appears here at all.
   Lane ownership is the second argument: the one stage in our own lane is drawn
   in --phosphor (district/our-choice teal); the three that open on someone
   else's calendar are dimmed. Colour is doing information work, not decoration.
   ========================================================================= */

.chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
@container plate (min-width: 900px) { .chain { grid-template-columns: repeat(4, 1fr); } }

.chain-node {
  position: relative; display: grid; gap: .3rem; align-content: start;
  padding: 1rem 1.1rem 1.2rem;
  border-top: var(--hair-strong) solid color-mix(in srgb, var(--star) 22%, transparent);
}
/* The gate glyph on the connector — a break in the rule, not an arrowhead. */
@container plate (min-width: 900px) {
  .chain-node + .chain-node::before {
    content: ''; position: absolute; left: -1px; top: -1px; width: 2px; height: 14px;
    background: var(--wake);
  }
}
.chain-node.is-ours { border-top-color: var(--phosphor); }

.chain-n     { color: var(--star-dim); letter-spacing: .06em; text-transform: uppercase; }
.chain-gate  { color: var(--wake); font-size: var(--m-small); }
.chain-title { font-family: var(--f-display); font-size: var(--d5); color: var(--star); margin-top: .15rem; }
.chain-owner { letter-spacing: .04em; color: var(--star-dim); }
.chain-node.is-ours .chain-owner { color: var(--phosphor); }
.chain-detail{ color: color-mix(in srgb, var(--star) 62%, transparent); line-height: 1.5; margin-top: .35rem; }
.chain-note  { color: var(--star-dim); margin: 1.25rem 0 0; max-width: 82ch; }

/* ── VENDOR MATRIX ───────────────────────────────────────────────────────
   A real table with a sticky first column. The six prose paragraphs become six
   comparable rows; nothing evaluative appears, because the matrix records what
   integrating REQUIRES, not how good a vendor is. */
.vendor-plate { margin-top: 2.5rem; }
.vendor-cap { caption-side: top; text-align: left; color: var(--star-dim); padding-bottom: .9rem; max-width: 90ch; }
table.vendor-tbl { min-width: 62rem; }
table.vendor-tbl th[scope="row"] { background: var(--deep); vertical-align: top; min-width: 12rem; }
.v-name { display: block; font-family: var(--f-display); font-size: var(--d5); color: var(--star); font-weight: 400; }
.v-kind { display: block; color: var(--star-dim); letter-spacing: .05em; text-transform: uppercase; margin-top: .15rem; }

.v-cell  { vertical-align: top; }
.v-state { display: block; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .3rem; color: var(--star-dim); }
.v-text  { display: block; color: color-mix(in srgb, var(--star) 66%, transparent); line-height: 1.5; }

/* State colours are semantic and few. Green where something is BUILT, amber
   where a third party gates it, dim where the answer is honestly unknown. */
.v-built .v-state, .v-supported .v-state, .v-low .v-state { color: var(--phosphor); }
.v-required .v-state, .v-gated .v-state, .v-agreement-gated .v-state,
.v-high-if-scoped-up .v-state { color: var(--wake); }
.v-not-public .v-state { color: var(--star-dim); font-style: italic; }
.v-built-uncertified .v-state { color: var(--wake); }

.v-bound { color: var(--star-dim); margin: 1rem 0 0; max-width: 88ch; }

@media print {
  .chain-plate, .vendor-plate { background: #fff; color: #000; }
  .chain-title, .v-name, .v-text { color: #000; }
  table.vendor-tbl { min-width: 0; }
}