/* Requirement lists (TZ_REQ.render): the same markup on the public pages, the investor portal and the back office.
   Colour comes only from the theme custom properties in site.css (--muted, --line, --surface, --ink2), so light and dark both work, and the
   status and Unconfirmed badges keep the shared badge classes (badge ok|warn|info) for their colour. These rules set layout and weight.
   Classes emitted by the renderer: req, req-counts, req-group, req-list, req-item, req-label, req-text, req-unconfirmed, req-note.
   Extra class used by the back office view: req-head. */
.req { display: block; min-width: 0; }

.req-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin: 0 0 10px; color: var(--muted); font-size: 0.875rem;
}
.req-counts { margin: 0 0 12px; color: var(--muted); font-size: 0.875rem; }

.req-group { margin: 0 0 18px; }
.req-group h4 {
  margin: 0 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.req-list { list-style: none; margin: 0; padding: 0; }

/* One item: status badge and label on the first line, the sentence under them, then the Unconfirmed badge, the action and the admin note. */
.req-item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line); min-width: 0;
}
.req-item > .badge { flex: 0 0 auto; min-width: 6.5rem; text-align: center; white-space: nowrap; }
.req-label { flex: 1 1 12rem; min-width: 0; color: var(--ink2); overflow-wrap: anywhere; }
.req-text { flex: 1 1 100%; min-width: 0; color: var(--ink2); line-height: 1.45; overflow-wrap: anywhere; }
.req-item[data-status="na"] .req-label,
.req-item[data-status="na"] .req-text { color: var(--muted); }
.req-item > .btn { flex: 0 0 auto; }

.req-unconfirmed { flex: 0 0 auto; white-space: nowrap; }
/* Ruling T12 D4: the shared "badge warn" (amber text on an amber tint) is below AA, so the Unconfirmed badge keeps --warn for its border
   and a light tint, and sets its text in --ink. Three classes so it wins over .badge.warn in site.css whatever the load order; the plain
   background is the fallback for browsers without color-mix(). */
.badge.warn.req-unconfirmed {
  color: var(--ink);
  border: 1px solid var(--warn);
  background: var(--surface);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
}

/* Admin-only note: set apart on its own line. */
.req-note {
  flex: 1 1 100%; display: block; min-width: 0; margin-top: 2px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
  color: var(--muted); font-size: 0.8125rem; line-height: 1.4; overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .req-item { padding: 12px 0; }
  .req-item > .badge { min-width: 0; }
  .req-label { flex-basis: 100%; }
  .req-head { flex-direction: column; gap: 2px; }
}