/* 7.3 Product cybersecurity requirements (`ui/pages/clauses/requirements/`).
   C1, the requirements with what 6.5 asks of the page at its top, and C2, the
   controls. The trace lines reuse 6.5's classes (`pages_decisions.css`).
   Narrow rules switch on the width of their own box (container queries). */

/* ---------- what 6.5 asks (plan D5) ---------- */

.aucra-req-asks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 18px 14px;
  background: var(--wash-head);
  border-bottom: 1px solid var(--line);
}
/* The register's caption row draws the line under the strip; the empty
   register's dashed box has none of its own, so the strip keeps its rule. */
.aucra-req-asks-line {
  font-size: 13.5px;
  line-height: 1.4;
}
.aucra-req-asks-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.aucra-req-asks-title {
  font-size: 13.5px;
  font-weight: 600;
}
.aucra-req-asks-note {
  font-size: 12.5px;
  color: var(--muted);
}
.aucra-req-asks-rows {
  container: aucra-req-asks / inline-size;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aucra-req-asks-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 150px auto;
  gap: 10px;
  align-items: center;
  min-height: 28px;
}
.aucra-req-asks-id {
  font-size: 12px;
  color: var(--muted);
}
.aucra-req-asks-name {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.aucra-req-asks-options {
  font-size: 12.5px;
  color: var(--muted);
}
.aucra-req-asks-add {
  justify-self: end;
}
@container aucra-req-asks (max-width: 559px) {
  .aucra-req-asks-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .aucra-req-asks-options {
    grid-column: 2;
  }
  .aucra-req-asks-add {
    grid-column: 2;
    justify-self: start;
  }
}

/* ---------- the registers ---------- */

.aucra-req-register {
  container: aucra-req-register / inline-size;
}
.aucra-req-register .aucra-register-line {
  padding: 10px 18px;
}
/* REQ-01 and CTL-01 are wider than the kit's 48px id track. */
.aucra-req-register .aucra-register-head,
.aucra-req-register .aucra-register-line,
.aucra-req-register .aucra-register-under {
  --aucra-cols-narrow: 20px 60px minmax(0, 1fr) 150px 170px;
}
.aucra-ctl-register .aucra-register-head,
.aucra-ctl-register .aucra-register-line,
.aucra-ctl-register .aucra-register-under {
  --aucra-cols-narrow: 20px 60px minmax(0, 1fr) 170px 96px 150px;
}
@container aucra-req-register (max-width: 759px) {
  .aucra-req-register .aucra-register-head,
  .aucra-req-register .aucra-register-line,
  .aucra-req-register .aucra-register-under {
    --aucra-cols-narrow: 20px 56px minmax(120px, 1fr) 110px 120px;
  }
  .aucra-ctl-register .aucra-register-head,
  .aucra-ctl-register .aucra-register-line,
  .aucra-ctl-register .aucra-register-under {
    --aucra-cols-narrow: 20px 56px minmax(120px, 1fr) 120px 72px 110px;
  }
}
/* A column too narrow for the columns (1024 with the rail and the assistant
   open) scrolls the register inside its own box, and the open band and the
   strip under a row keep the box's width. */
@container aucra-req-register (max-width: 559px) {
  .aucra-req-register .aucra-register {
    overflow-x: auto;
  }
  .aucra-req-register .aucra-register > .aucra-register-head,
  .aucra-req-register .aucra-register > .aucra-register-row {
    min-width: 560px;
  }
  .aucra-req-register .aucra-band-slot,
  .aucra-req-register .aucra-register-under {
    position: sticky;
    left: 0;
    width: 100cqw;
  }
  .aucra-req-register .aucra-register-detail {
    margin: 0 12px 12px;
  }
  .aucra-req-register .aucra-register-under {
    --aucra-cols-narrow: minmax(0, 1fr);
  }
  .aucra-req-register .aucra-register-under .aucra-register-under-cell {
    grid-column: 1 / -1;
  }
}
.aucra-req-cell {
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.aucra-req-statement {
  font-size: 13.5px;
}
.aucra-req-muted {
  color: var(--muted);
}
.aucra-req-ids {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
/* The kit's id chip, at the artboard's 12px and padding (DM11). */
.aucra-req-ids .aucra-id {
  padding: 1px 7px;
  font-size: 12px;
}
/* A statement or a control name on one line, the whole in its tooltip
   (FT15); a register row's name cell does the same on every page. */
.aucra-req-register .aucra-req-cut {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
}
/* Where a requirement comes from, under what it rests on (DM7). */
.aucra-req-note {
  flex: 1 1 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 12px;
}
/* No Remove column: the strip runs from the Requirement column to the end,
   right under the row, as the canvas draws it. */
.aucra-req-register .aucra-register-under-cell {
  grid-column: 3 / -1;
}
.aucra-req-register .aucra-register-under {
  padding-top: 0;
}
.aucra-req-register .aucra-register-under:not(:has(.aucra-req-strip)) {
  display: none;
}
.aucra-req-strip {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aucra-req-gaps {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}
.aucra-req-gap {
  display: flex;
  align-items: center;
  min-height: 24px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--gold-deep);
  text-align: left;
}

/* ---------- the open bands ---------- */

.aucra-req-band {
  container: aucra-req-band / inline-size;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aucra-req-pick-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
/* The chips, the picker and "Open 6.5" flow as one line (DM9). */
.aucra-req-pick-line > .aucra-pick-chips {
  display: contents;
}
/* A control's id never breaks inside its chip (DM6). */
.aucra-req-band .aucra-pick-tag {
  flex: 0 0 auto;
  white-space: nowrap;
}
/* One size for every empty hint in an open row (DM10). */
.aucra-req-band .aucra-pick-empty,
.aucra-req-band .aucra-chip-missing,
.aucra-req-band .aucra-req-muted,
.aucra-req-hint {
  font-size: 12.5px;
  color: var(--muted);
}
.aucra-req-lead {
  font-size: 12.5px;
  color: var(--muted);
}
.aucra-req-objectives {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: -4px;
}
.aucra-req-objectives .aucra-chip-set {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}
/* A new control named in the requirement's own row (M6, FT7). */
.aucra-req-control-name {
  margin-top: 4px;
}
.aucra-req-chips .aucra-chip-set {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.aucra-req-pairs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aucra-req-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.aucra-req-pair-id {
  width: 40px;
  font-size: 12px;
  color: var(--muted);
}
.aucra-req-pair-name {
  min-width: 170px;
  font-size: 13px;
}
.aucra-req-pair-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
@container aucra-req-band (max-width: 559px) {
  .aucra-req-pair-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .aucra-req-pair-name {
    min-width: 0;
  }
}
/* The catalogue fills its half, as the reference beside it does (6.6 alike). */
.aucra-req-pair-fields .aucra-select {
  align-self: stretch;
}
.aucra-req-pair-fields .aucra-select .q-field__control,
.aucra-req-pair-fields .aucra-select .q-field__marginal {
  height: 40px;
  min-height: 40px;
}
/* The library document under the technical specification (plan D3). */
.aucra-req-document {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: -4px;
  font-size: 12.5px;
}
.aucra-req-document-lead {
  color: var(--muted);
}
.aucra-req-document-mark {
  font-size: 15px;
  color: var(--muted);
}
.aucra-req-document-name {
  overflow-wrap: anywhere;
}