/* 7.6 Cybersecurity verification and validation (`ui/pages/clauses/verification/`).
   The register, its strips and band and the pick chips reuse 7.3's and 7.5's
   classes (`pages_requirements.css`, `pages_implementation.css`), the notices
   7.4's (`pages_architecture.css`), the card bodies 7.2's (`pages_planning.css`),
   all loaded before this sheet. Narrow rules follow a container, never the
   viewport. */

/* Region A: what 7.6 reads from 7.5 and 6.4.3 under its input row, inset as a
   row's text, and the test build's box. */
.aucra-vv-read {
  display: block;
  padding: 0 18px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.aucra-vv-input-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 14px;
}
.aucra-vv-input-body > .aucra-vv-read {
  padding-bottom: 0;
}
.aucra-vv-test-build {
  padding: 0 18px;
}

/* Region B: one of the nine activities, its quoted item over its judgement. */
.aucra-vv-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.aucra-soft .aucra-vv-item {
  border-top-color: var(--soft-line);
}

/* Region C: the register's tracks, the empty state and the notice under it. */
.aucra-vv-register.aucra-req-register .aucra-register-head,
.aucra-vv-register.aucra-req-register .aucra-register-line,
.aucra-vv-register.aucra-req-register .aucra-register-under {
  --aucra-cols-narrow: 20px 60px minmax(0, 1fr) 92px 170px 150px 28px;
}
.aucra-vv-register {
  --aucra-reg-min: 640px;
}
.aucra-vv-title {
  display: flex;
  flex-wrap: wrap;
  column-gap: 4px;
  min-width: 0;
}
.aucra-vv-blank {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.aucra-vv-notices {
  padding: 4px 18px 14px;
}
.aucra-vv-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
/* Build tested's (i) is 22px against a 20px label: every head of the three
   takes its height, so the boxes share one top edge (D3). */
.aucra-vv-trio .aucra-field-head {
  min-height: 22px;
  align-items: center;
}
/* Diagram cited and Retest of fill their column (D4). */
.aucra-vv-band .aucra-arch-pair .q-select {
  align-self: stretch;
}
/* The items' one help line, under the nine (U11). */
.aucra-vv-items-note {
  font-size: 13px;
}

/* The coverage card: requirement, its statement and selected controls, the
   results naming them or the gap lines. */
.aucra-vv-coverage {
  container: aucra-vv-coverage / inline-size;
}
.aucra-vv-coverage-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 220px;
  gap: 10px;
  align-items: start;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.aucra-vv-coverage-head {
  padding: 8px 18px;
  background: var(--wash-head);
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
}
.aucra-vv-coverage-row > .aucra-id {
  justify-self: start;
}
.aucra-vv-coverage-what,
.aucra-vv-coverage-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.aucra-vv-coverage-lead {
  display: none;
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
}
.aucra-vv-coverage-ids {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.aucra-vv-coverage > .aucra-arch-notices {
  padding: 10px 18px 14px;
  border-top: 1px solid var(--line);
}

/* Region D: the note under the Assess line, inset as the attestation is. */
.aucra-vv-assess-note {
  padding-bottom: 6px;
  font-size: 13px;
}

/* ---------- narrow ---------- */

@container aucra-req-register (max-width: 759px) {
  .aucra-vv-register.aucra-req-register .aucra-register-head,
  .aucra-vv-register.aucra-req-register .aucra-register-line {
    --aucra-cols-narrow: 20px 56px minmax(140px, 1fr) 64px 130px 120px 28px;
  }
}

@container aucra-region (max-width: 636px) {
  .aucra-vv-trio {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container aucra-vv-coverage (max-width: 560px) {
  .aucra-vv-coverage-row {
    grid-template-columns: 90px minmax(0, 1fr);
  }
  .aucra-vv-coverage-results {
    grid-column: 2;
  }
  .aucra-vv-coverage-head > :last-child {
    display: none;
  }
  /* The Results caption is gone with its column, so each row leads with it (D7). */
  .aucra-vv-coverage-lead {
    display: block;
  }
}
/* Under 640px the rows scroll (`pages_requirements.css`): the strip under a
   row takes the box's one column, so its lines wrap and are never cut. */
@container aucra-req-register (max-width: 639px) {
  .aucra-vv-register.aucra-req-register .aucra-register-under {
    --aucra-cols-narrow: minmax(0, 1fr);
  }
}