/* Block 4 · compliance list in the shield card. A row reads "in progress" until its
   li gets data-status="done": then the chip turns green, says its data-done text
   and links to the document. */
.tcomp { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; width: 100%; }
.tcomp li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--border-strong); }
.tcomp b { font-size: 15px; font-weight: 600; }
.tcomp span { grid-column: 1; font-size: 12.5px; color: var(--text-dim); }
.tcomp__st { grid-row: 1 / span 2; grid-column: 2; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--warn-ink); background: var(--warn-soft); pointer-events: none; }
.tcomp__st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.tcomp [data-status="done"] .tcomp__st { color: var(--ok); background: var(--ok-soft); pointer-events: auto; font-size: 0; }
.tcomp [data-status="done"] .tcomp__st::before { background: var(--ok); }
.tcomp [data-status="done"] .tcomp__st::after { content: attr(data-done) ' ↗'; font-size: 12px; }