.security-view {
  --security-green: #087A55;
  --security-green-soft: #EAF6F1;
  --security-blue: #1F48C4;
  --security-blue-soft: #EEF3FF;
  --security-amber: #8B5D00;
  --security-amber-soft: #FFF6DC;
  --security-red: #A72B40;
  --security-red-soft: #FFF0F2;
}

.security-banner {
  border-left-color: var(--security-green);
}

.security-banner .admin-banner-icon {
  color: var(--security-green);
  background: var(--security-green-soft);
}

.security-environment {
  color: var(--navy);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.security-summary-strip {
  margin-bottom: 16px;
  border: 1px solid var(--line);
  background: #FFFFFF;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.security-summary-strip article {
  min-height: 92px;
  padding: 15px 16px;
  border-right: 1px solid var(--line);
}

.security-summary-strip article:last-child {
  border-right: 0;
}

.security-summary-strip span,
.security-summary-strip strong,
.security-summary-strip small {
  display: block;
}

.security-summary-strip span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.security-summary-strip strong {
  margin: 7px 0 4px;
  color: var(--navy);
  font-family: Poppins, sans-serif;
  font-size: 24px;
  line-height: 1;
}

.security-summary-strip small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

.security-primary-grid {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 16px;
  align-items: start;
}

.security-side {
  display: grid;
  gap: 16px;
}

.security-control-list {
  padding: 0 14px 8px;
}

.security-control-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 86px minmax(220px, 1.2fr) minmax(220px, .9fr);
  gap: 14px;
  align-items: start;
}

.security-control-item:last-child {
  border-bottom: 0;
}

.security-control-item header {
  display: grid;
  gap: 7px;
  justify-items: start;
}

.security-control-code {
  color: var(--security-blue);
  font-family: Poppins, sans-serif;
  font-size: 10px;
  font-weight: 700;
}

.security-control-copy > span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
}

.security-control-copy h3 {
  margin: 4px 0;
  color: var(--navy);
  font-size: 11px;
}

.security-control-copy p,
.security-control-item footer span {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.security-evidence {
  display: grid;
  gap: 5px;
}

.security-evidence span {
  color: #33415C;
  font-size: 9px;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.security-evidence svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  color: var(--security-green);
}

.security-control-item footer {
  grid-column: 2 / -1;
  padding: 7px 9px;
  background: #F7F8FC;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 8px;
}

.security-control-item footer strong {
  color: var(--navy);
  font-size: 8px;
  text-transform: uppercase;
}

.platform-service-state.VERIFIED_IN_BUILD {
  border-color: #B9DDCF;
  color: var(--security-green);
  background: var(--security-green-soft);
}

.platform-service-state.DEPLOYMENT_EVIDENCE_REQUIRED {
  border-color: #C5D1F8;
  color: var(--security-blue);
  background: var(--security-blue-soft);
}

.platform-service-state.INDEPENDENT_VALIDATION_REQUIRED {
  border-color: #E8B9C1;
  color: var(--security-red);
  background: var(--security-red-soft);
}

.security-principles {
  margin: 0;
  padding: 2px 14px 10px;
  list-style: none;
}

.security-principles li {
  min-height: 38px;
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  font-size: 9px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.security-principles li:last-child {
  border-bottom: 0;
}

.security-principles svg {
  width: 14px;
  height: 14px;
  color: var(--security-green);
}

.security-framework-list {
  padding: 0 14px 8px;
}

.security-framework-list article {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
}

.security-framework-list article:last-child {
  border-bottom: 0;
}

.security-framework-list span,
.security-framework-list strong {
  color: var(--navy);
  font-size: 9px;
  font-weight: 700;
}

.security-framework-list strong {
  color: var(--security-blue);
}

.security-framework-list p,
.security-framework-list small {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.4;
}

.security-framework-list small {
  color: var(--security-amber);
}

.security-assurance-note {
  padding: 14px;
  border: 1px solid #E9D49A;
  background: var(--security-amber-soft);
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
}

.security-assurance-note svg {
  width: 17px;
  color: var(--security-amber);
}

.security-assurance-note p {
  margin: 0;
  color: #58441C;
  font-size: 9px;
  line-height: 1.45;
}

.security-data-lifecycle ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  counter-reset: security-step;
}

.security-data-lifecycle li {
  min-height: 112px;
  padding: 16px;
  border-right: 1px solid var(--line);
  counter-increment: security-step;
}

.security-data-lifecycle li:last-child {
  border-right: 0;
}

.security-data-lifecycle strong,
.security-data-lifecycle span {
  display: block;
}

.security-data-lifecycle strong {
  color: var(--navy);
  font-size: 10px;
}

.security-data-lifecycle strong::before {
  margin-right: 7px;
  color: var(--security-blue);
  content: counter(security-step, decimal-leading-zero);
}

.security-data-lifecycle span {
  margin-top: 7px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

@media(max-width:1180px) {
  .security-primary-grid {
    grid-template-columns: 1fr;
  }

  .security-side {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .security-control-item {
    grid-template-columns: 86px minmax(0, 1.2fr) minmax(190px, .8fr);
  }
}

@media(max-width:820px) {
  .security-summary-strip,
  .security-data-lifecycle ol {
    grid-template-columns: 1fr 1fr;
  }

  .security-summary-strip article:nth-child(2),
  .security-data-lifecycle li:nth-child(2) {
    border-right: 0;
  }

  .security-summary-strip article:nth-child(-n+2),
  .security-data-lifecycle li:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }

  .security-side {
    grid-template-columns: 1fr;
  }

  .security-control-item {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  .security-evidence {
    grid-column: 2;
  }
}

@media(max-width:520px) {
  .security-environment {
    grid-column: 2;
  }

  .security-summary-strip,
  .security-data-lifecycle ol {
    grid-template-columns: 1fr;
  }

  .security-summary-strip article,
  .security-data-lifecycle li {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .security-summary-strip article:last-child,
  .security-data-lifecycle li:last-child {
    border-bottom: 0;
  }

  .security-control-item {
    grid-template-columns: 1fr;
  }

  .security-control-item header {
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
  }

  .security-evidence,
  .security-control-item footer {
    grid-column: 1;
  }
}