/* 7.2 Product cybersecurity planning (`ui/pages/clauses/cybersecurity_planning/`).
   The strip and the due line reuse 6.7's classes (`pages_review.css`), the
   document line 7.3's. Narrow rules follow the region's container. */

.aucra-plan-input-line {
  padding: 12px 18px;
  font-size: 13.5px;
  line-height: 1.5;
}
.aucra-plan-group {
  padding: 12px 18px 6px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
}

/* A written content's card: the field's own head (its label, (i) and
   Suggest) is the card's band, drawn as every section head is
   (`pages_soft.css`), so the content's words are said once. */
.aucra-plan-written > .aucra-formatted-field {
  gap: 10px;
  padding: 0 18px;
}
.aucra-plan-written > .aucra-region-head + .aucra-formatted-field > .aucra-field-head,
.aucra-section-card.aucra-plan-written > .aucra-formatted-field > .aucra-field-head {
  align-items: center;
  width: calc(100% + 36px);
  margin: 0 -18px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background-color: var(--wash-head);
}
.aucra-soft .aucra-plan-written > .aucra-formatted-field > .aucra-field-head {
  border-bottom-color: var(--soft-line);
}
.aucra-section-card.aucra-plan-written > .aucra-formatted-field > .aucra-field-head {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.aucra-plan-written > .aucra-formatted-field > .aucra-field-head > .aucra-field-label {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: var(--weight-light);
}
.aucra-plan-written > .aucra-formatted-field > .aucra-field-head > .aucra-field-label::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 14px;
  margin-right: 10px;
  border-radius: 2px;
  background: var(--gold);
  vertical-align: -2px;
}

.aucra-plan-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 14px 18px 16px;
}
.aucra-plan-written > .aucra-plan-body { padding-top: 10px; }
.aucra-plan-testing { border-top: 1px solid var(--line); }
.aucra-plan-label {
  font-size: 12.5px;
  color: var(--muted);
}
.aucra-plan-subtitle {
  font-size: 13px;
  font-weight: var(--weight-bold);
}
/* A read only box: what 6.3 and 6.7 hold, never typed here. A block, so a
   clause link in a line stays in its sentence. */
.aucra-plan-read {
  display: block;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafb;
  font-size: 13.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.aucra-plan-read > * + * {
  margin-top: 6px;
}
/* A content's title takes the band's width and wraps beside its link,
   rather than pushing the link under it. */
.aucra-plan-card > .aucra-panel-head {
  flex-wrap: nowrap;
}
.aucra-plan-card > .aucra-panel-head > .aucra-panel-title {
  flex: 0 1 auto;
}
.aucra-plan-card > .aucra-panel-head > .aucra-head-right,
.aucra-plan-card > .aucra-panel-head > .aucra-open-link,
.aucra-plan-card > .aucra-panel-head > .aucra-btn {
  flex: none;
}
.aucra-plan-blank-gap {
  display: flex;
  align-items: baseline;
  font-size: 13px;
}
.aucra-plan-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}
.aucra-plan-gap {
  align-self: flex-start;
  font-size: 13px;
}
/* A notice: muted, never a gap's red (plan D9, D10). */
.aucra-plan-notices {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 18px 0;
}
/* Upright: no italic face is loaded, so italic was the browser's slant. */
.aucra-plan-notice {
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

/* ---------- the issues and reviews of the plan ---------- */

.aucra-plan-entries { padding-bottom: 6px; }
.aucra-plan-cell {
  font-size: 13px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aucra-plan-cell-muted { color: var(--muted); }
.aucra-plan-band {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aucra-plan-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@container aucra-region (max-width: 560px) {
  .aucra-plan-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* A narrow card (1024 with the rail and the assistant open) gives the
   columns less room, then scrolls the register inside its own box, as 6.7's
   does, with the open band and the gap strip kept one box wide. */
@container aucra-region (max-width: 759px) {
  .aucra-plan-entries .aucra-register-head,
  .aucra-plan-entries .aucra-register-line,
  .aucra-plan-entries .aucra-register-under {
    --aucra-cols-narrow: 20px 44px 96px 88px 120px minmax(80px, 1fr) 28px;
  }
}
@container aucra-region (max-width: 559px) {
  .aucra-plan-entries .aucra-register {
    overflow-x: auto;
  }
  .aucra-plan-entries .aucra-register > .aucra-register-head,
  .aucra-plan-entries .aucra-register > .aucra-register-row {
    min-width: 600px;
  }
  .aucra-plan-entries .aucra-band-slot,
  .aucra-plan-entries .aucra-register-under {
    position: sticky;
    left: 0;
    width: 100cqw;
  }
  .aucra-plan-entries .aucra-register-under {
    --aucra-cols-narrow: minmax(0, 1fr);
  }
  .aucra-plan-entries .aucra-register-under .aucra-register-under-cell {
    grid-column: 1 / -1;
  }
  .aucra-plan-entries .aucra-register-detail {
    margin: 0 12px 12px;
  }
}