/* 6.7 Risk monitoring and review (`ui/pages/clauses/review/`). C1, how often
   the risk management is reviewed, with the due line and what the risk reads
   now; C2, the register of reviews held, its open band and its signed band.
   Narrow rules switch on the width of their own box (container queries). */

/* ---------- C1 ---------- */

/* The due line of plan D10: counted, never stored; gold once overdue. */
.aucra-review-due {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--wash-head);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text);
}
.aucra-review-due-icon {
  flex: none;
  font-size: 16px;
  color: var(--muted);
}
.aucra-review-due-none {
  color: var(--muted);
}
.aucra-review-due-over {
  color: var(--gold-deep);
}
.aucra-review-due-over .aucra-review-due-icon {
  color: var(--gold-deep);
}

.aucra-review-regularity {
  container: aucra-review-c1 / inline-size;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 18px 16px;
}
.aucra-review-picks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.aucra-review-justify {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: start;
}
@container aucra-review-c1 (max-width: 719px) {
  .aucra-review-picks,
  .aucra-review-justify {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* A select fills its column as the boxes beside it do. */
.aucra-review-picks .aucra-select,
.aucra-review-pair .aucra-select {
  align-self: stretch;
}
.aucra-review-picks .aucra-select .q-field__control,
.aucra-review-picks .aucra-select .q-field__marginal {
  height: 40px;
  min-height: 40px;
}

/* What the risk reads now (plan D3): read only, never saved. */
.aucra-review-basis {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--wash-head);
}
.aucra-review-basis-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aucra-review-basis-title {
  font-size: 13px;
  font-weight: 500;
}
.aucra-review-basis-note {
  font-size: 11.5px;
  color: var(--muted);
}
.aucra-review-basis-line {
  font-size: 12.5px;
  line-height: 1.45;
}

/* ---------- C2, the register ---------- */

.aucra-review-register {
  container: aucra-review-c2 / inline-size;
}
.aucra-review-register .aucra-register-line {
  padding: 10px 18px;
}
@container aucra-review-c2 (max-width: 759px) {
  .aucra-review-register .aucra-register-head,
  .aucra-review-register .aucra-register-line,
  .aucra-review-register .aucra-register-under {
    --aucra-cols-narrow: 20px 44px 88px minmax(120px, 1fr) 120px 88px;
  }
}
/* A column too narrow for the five columns (1024 with the rail and the
   assistant open) scrolls the register inside its own box, as the kit does
   below 640px of viewport, and the open band keeps the box's width. */
@container aucra-review-c2 (max-width: 559px) {
  .aucra-review-register .aucra-register {
    overflow-x: auto;
  }
  .aucra-review-register .aucra-register > .aucra-register-head,
  .aucra-review-register .aucra-register > .aucra-register-row {
    min-width: 560px;
  }
  .aucra-review-register .aucra-band-slot {
    position: sticky;
    left: 0;
    width: 100cqw;
  }
  .aucra-review-register .aucra-register-detail {
    margin: 0 12px 12px;
  }
  /* The gap strip stays in view as the band does, one box wide, and wraps. */
  .aucra-review-register .aucra-register-under {
    position: sticky;
    left: 0;
    width: 100cqw;
    /* The kit draws the tracks inline from this variable. */
    --aucra-cols-narrow: minmax(0, 1fr);
  }
  .aucra-review-register .aucra-register-under .aucra-register-under-cell {
    grid-column: 1 / -1;
  }
  .aucra-review-gaps {
    min-width: 0;
  }
}
.aucra-review-cell {
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.aucra-review-occasion {
  font-size: 13.5px;
}
.aucra-review-muted {
  color: var(--muted);
}
.aucra-review-signed {
  color: var(--pass);
}
/* No Remove column: the gap strip runs from the Held on column to the end,
   right under the row as the canvas draws it. */
.aucra-review-register .aucra-register-under-cell {
  grid-column: 3 / -1;
}
.aucra-review-register .aucra-register-under {
  padding-top: 0;
}
.aucra-review-register .aucra-register-under:not(:has(.aucra-review-gap)) {
  display: none;
}
.aucra-review-gaps {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}
.aucra-review-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 band ---------- */

.aucra-review-band {
  container: aucra-review-band / inline-size;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aucra-review-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
@container aucra-review-band (max-width: 559px) {
  .aucra-review-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}
.aucra-review-pair .aucra-select .q-field__control,
.aucra-review-pair .aucra-select .q-field__marginal {
  height: 40px;
  min-height: 40px;
}
/* D7's line and its two links, on an exposure review only. */
.aucra-review-threat-model {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text);
}
.aucra-review-pages .aucra-chip-set {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.aucra-review-outcome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.aucra-review-label {
  font-size: 13px;
  font-weight: 500;
}
/* The dated line of plan D6: gold, never counted, never a button. */
.aucra-review-dated {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--gold-deep);
}
.aucra-review-sign {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
/* As the artboard draws it: the tick's 18px box flush with the fields under
   it and 25px under what comes before (the band's 12px gap, the rule and the
   12px above), its (i) centred on the label. The 36px around the box stays
   the target; only its drawn edge moves. */
.aucra-review-sign .aucra-attest {
  margin-top: 0;
}
.aucra-review-sign .aucra-attest > .aucra-field-head {
  align-items: center;
}
.aucra-review-sign .aucra-attest .q-checkbox__inner {
  margin: -9px 0 -9px -9px;
}
/* The row is the tick's 18px: the label's line and the (i)'s 22px box do not
   push the tick down from the rule. */
.aucra-review-sign .aucra-attest .q-checkbox__label {
  line-height: 18px;
}
.aucra-review-sign .aucra-attest > .aucra-field-head > .aucra-info {
  margin-block: -2px;
}

/* ---------- the signed band (plan D11) ---------- */

/* One line: the tick, the words shrinking and wrapping in their own box when
   the signer's name is long, and Reopen at the right. */
.aucra-review-signed-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--pass);
}
.aucra-review-signed-tick {
  flex: none;
  font-size: 18px;
}
.aucra-review-signed-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.aucra-review-signed-head > .aucra-confirm-row {
  flex: none;
}
/* While Reopen asks, its question takes a line of its own under the words. */
.aucra-review-signed-head:has(.aucra-confirm-open) {
  flex-wrap: wrap;
}
.aucra-review-signed-head > .aucra-confirm-open {
  flex: 1 1 100%;
}
/* A value as signed: the title over a bordered box, as the canvas draws it. */
.aucra-held-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.aucra-held-value {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--wash-head);
  font-size: 13.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
/* Locked chips read as the filled chips they were, and nothing on them moves. */
.aucra-chip-locked,
.aucra-chip-locked:hover,
.aucra-chip-locked:active {
  cursor: default;
  background: var(--ink);
  border-color: var(--ink);
}
.aucra-chip-set-locked {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}