/* ============================================================
   TRUST — the governance chain
   ------------------------------------------------------------
   Six stages read left-to-right (stacked on narrow screens), each carrying the
   controls that actually exist at that point and a live count. The closing
   panel states what the record does NOT carry — which is the part a security
   badge wall can never say.

   No shield iconography, no padlock wall, no "enterprise-grade" chrome. The
   credibility is supposed to come from the counts being real and from the
   limitations being printed next to them.
   ============================================================ */

.vitrust { display: grid; gap: var(--space-5, 1.5rem); }
.vitrust * { min-width: 0; }

/* Three across, two rows — six stages divide exactly, so the chain never
   strands its own conclusion alone on a wrap. auto-fit was giving 5 + 1. */
.vitrust-chain {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vitrust-stage {
  position: relative;
  display: flex; flex-direction: column; gap: .6rem;
  padding: .95rem 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm, 6px);
  background: var(--surface);
}
/* A connector was tried here and removed. Spanning only the column gaps, it
   drew a line 1→2→3 and then nothing from 3→4, which is a visual claim that
   the chain stops at the row break. The numbered spine below carries the
   sequence instead, and it stays true at every column count. */

.vitrust-stage header { display: flex; gap: .55rem; align-items: flex-start; }
.vitrust-step {
  flex: none; display: inline-flex; align-items: center; justify-content: center; margin-top: -.1rem;
  width: 1.65rem; height: 1.65rem; border-radius: 50%;
  font-family: var(--font-mono); font-size: .7rem; font-weight: 650;
  line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums;
  background: var(--surface-2); color: var(--accent-text);
  border: 1px solid var(--border);
}
.vitrust-step::before { content: "0"; }
.vitrust-stage .vitrust-ico { color: var(--accent-text); display: inline-flex; flex: none; margin-top: .1rem; }
.vitrust-stage .vitrust-ico svg { width: 18px; height: 18px; }
.vitrust-stage h3 { margin: 0; font-size: .95rem; line-height: 1.25; color: var(--text); }
.vitrust-stage header p { margin: .15rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--text-dim); }

.vitrust-measures { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.vitrust-measures > li {
  display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: baseline;
  font-size: .8rem; line-height: 1.45; color: var(--text);
}
.vitrust-pip { width: .55rem; height: .55rem; border-radius: 50%; border: 2px solid var(--border-strong); align-self: center; }
li[data-state="verified"] .vitrust-pip { background: var(--success); border-color: var(--success); }
li[data-state="partial"]  .vitrust-pip { background: var(--warn); border-color: var(--warn); }
li[data-state="absent"]   .vitrust-pip { background: transparent; border-color: var(--text-dim); border-style: dashed; }
.vitrust-count { font-variant-numeric: tabular-nums; font-size: .76rem; color: var(--text-muted); text-align: right; }
li[data-state="verified"] .vitrust-count { color: var(--success); font-weight: 650; }
li[data-state="partial"]  .vitrust-count { color: var(--warn); font-weight: 650; }
/* A hollow row is deliberate, not an oversight — it is stated, not faded out. */
li[data-state="absent"] .vitrust-label { color: var(--text-muted); }
li[data-state="absent"] .vitrust-count { font-style: italic; }

.vitrust-authority {
  margin: auto 0 0; padding-top: .5rem; border-top: 1px solid var(--border);
  font-size: .7rem; line-height: 1.5; color: var(--text-dim);
  display: grid; gap: .15rem;
}
.vitrust-authority code { font-family: var(--font-mono); font-size: .68rem; overflow-wrap: anywhere; color: var(--text-muted); }
.vitrust-note { margin: 0; font-size: .74rem; line-height: 1.5; color: var(--text-muted); }

/* ---- the part a badge wall cannot say ---- */
.vitrust-limits {
  padding: 1rem 1.15rem; border-radius: var(--radius-sm, 6px);
  border: 1px dashed var(--border-strong);
  background: var(--surface-2);
  display: grid; gap: .6rem;
}
.vitrust-limits h3 {
  margin: 0; font-size: .92rem; color: var(--text);
  display: flex; align-items: center; gap: .45rem;
}
.vitrust-limits h3 svg { width: 17px; height: 17px; color: var(--warn); flex: none; }
.vitrust-limits ul { margin: 0; padding: 0 0 0 1.05rem; display: grid; gap: .45rem; }
.vitrust-limits li { font-size: .84rem; line-height: 1.6; color: var(--text-muted); }
.vitrust-limits b { color: var(--text); font-weight: 650; }

.vitrust-state { padding: 1.4rem 1rem; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm, 6px); color: var(--text-muted); font-size: .86rem; }
.vitrust-state[data-tone="error"] { border-style: solid; border-color: var(--danger); color: var(--danger); }

@media (max-width: 1080px) {
  .vitrust-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vitrust-stage:nth-child(3n)::after { content: ""; }
  .vitrust-stage:nth-child(2n)::after, .vitrust-stage:last-child::after { content: none; }
}
@media (max-width: 680px) {
  .vitrust-chain { grid-template-columns: 1fr; }
  .vitrust-stage::after { content: none; }
  .vitrust-measures > li { grid-template-columns: auto 1fr auto; }
  .vitrust-count { font-size: .72rem; }
}