/* See ./sys-req.md for design notes and rationale. */

/* phone */
.sys-req {
  box-sizing: border-box;
  inline-size: 100%;
  margin-block-start: 0;
  padding-inline: var(--nc-space-page-margin);
  color: var(--nc-color-text-primary);
  font-family: var(--nc-font-family);
  letter-spacing: var(--nc-text-letter-spacing);
}

.sys-req__heading {
  margin: 0 0 24px;
  color: var(--nc-color-text-primary);
  font-family: inherit;
  font-size: var(--ds-font-size-16);
  font-weight: var(--ds-font-weight-extrabold);
  line-height: var(--ds-line-height-24);
  letter-spacing: var(--nc-text-letter-spacing);
}

.sys-req__item {
  display: block;
  inline-size: 100%;
  padding-block-end: 15px;
}

.sys-req__item:last-child {
  padding-block-end: 0;
}

.sys-req__item-label {
  display: list-item;
  list-style: none;
  inline-size: fit-content;
  max-inline-size: 100%;
  position: relative;
  border-block-end: 1px solid var(--nc-color-link);
  color: var(--nc-color-link);
  font-size: var(--ds-font-size-14);
  font-weight: var(--ds-font-weight-bold);
  line-height: 20px;
  letter-spacing: var(--nc-text-letter-spacing);
  cursor: pointer;
}

.sys-req__item-label::-webkit-details-marker {
  display: none;
}

.sys-req__item-label::after {
  content: '+';
  display: inline-block;
  inline-size: 12.8px;
  text-align: end;
  font-size: var(--ds-font-size-14);
  font-weight: var(--ds-font-weight-bold);
  line-height: 20px;
  color: var(--nc-color-link);
}

.sys-req__item[open] .sys-req__item-label::after {
  content: '-';
}

.sys-req__item-body {
  padding: 0;
  inline-size: 100%;
  max-inline-size: 100%;
  box-sizing: border-box;
}

.sys-req__item-body p {
  margin: 0;
  font-size: var(--ds-font-size-14);
  font-weight: var(--ds-font-weight-medium);
  line-height: 20px;
  letter-spacing: var(--nc-text-letter-spacing);
  color: var(--nc-color-text-primary);
}

.sys-req__intro {
  padding-block: 15px;
  inline-size: 100%;
  max-inline-size: 100%;
}

.sys-req__row {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding-block-end: 20px;
  padding-inline-start: 50px;
  inline-size: 100%;
  max-inline-size: 100%;
  box-sizing: border-box;
}

.sys-req__row-icon {
  flex: 0 0 30px;
  inline-size: 30px;
}

.sys-req__row-icon picture,
.sys-req__row-icon img {
  display: block;
  inline-size: 30px;
  block-size: auto;
}

.sys-req__row-text {
  flex: 1 1 auto;
  min-inline-size: 0;
  min-width: 0;
}

.sys-req__row-text p strong {
  font-weight: var(--ds-font-weight-bold);
}

.sys-req__row-text p:first-child {
  padding-block-end: 5px;
  font-weight: var(--ds-font-weight-bold);
}

/* tablet */
@media (width >= 768px) {
  .sys-req {
    padding-inline: 70px;
  }

  .sys-req__heading {
    font-size: var(--ds-font-size-20);
    line-height: 32px;
  }
}

/* desktop */
@media (width >= 1022px) {
  .sys-req {
    max-inline-size: var(--nc-grid-max);
    margin-inline: auto;
    padding-inline: var(--ds-space-15);
  }
}

main .section.gray .sys-req {
  max-inline-size: none;
  margin-inline: 0;
  padding-inline: 0;
}