.rac-monitoring {
  --rac-gold: #b58a34;
  --rac-line: #bfd3df;
  margin: 44px 0 40px;
  padding: 24px 0 28px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  container-type: inline-size;
}

.rac-monitoring .rac-icon-library {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.rac-monitoring .rac-icon {
  display: block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rac-monitoring-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  color: var(--blue-deep);
  font-size: 16px;
  font-weight: 700;
}

.rac-monitoring .rac-care-span {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.rac-monitoring .rac-care-span .rac-icon { width: 18px; height: 18px; color: var(--rac-gold); }

.rac-monitoring-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 150px 54px 198px;
  align-items: center;
  gap: 12px;
}

.rac-signals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 26px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rac-signal {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-content: center;
  align-items: start;
  gap: 14px;
  min-height: 120px;
  padding: 20px 0;
  border-top: 1px solid #e1e9ef;
}

.rac-signal:nth-child(-n + 2) { border-top: 0; }
.rac-signal > .rac-icon { color: var(--blue); margin-top: 2px; }

.rac-monitoring h3 {
  margin: 0;
  color: var(--blue-deep);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  overflow-wrap: normal;
}

.rac-monitoring p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: normal;
}

.rac-collector { align-self: stretch; min-height: 360px; }
.rac-collector svg { display: block; width: 100%; height: 100%; fill: none; stroke-width: 1.5; }
.rac-collector-track { stroke: var(--rac-line); }
.rac-collector-active { stroke: var(--blue); }

.rac-review-engine { display: grid; justify-items: center; gap: 13px; text-align: center; }
.rac-review-engine img { display: block; width: 72px; height: auto; }
.rac-review-engine p { margin: 0; }
.rac-review-engine h3 { margin-top: 3px; }

.rac-alert-arrow svg { display: block; width: 100%; height: auto; fill: none; stroke: var(--rac-gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.rac-staff-alert { display: grid; justify-items: start; gap: 14px; }
.rac-alert-symbol { position: relative; color: var(--rac-gold); }
.rac-alert-symbol .rac-icon { width: 40px; height: 40px; stroke-width: 1.4; }
.rac-alert-symbol > span { position: absolute; top: -1px; right: -4px; width: 8px; height: 8px; border: 2px solid #f9fbfd; border-radius: 50%; background: var(--green); }
.rac-staff-alert h3 { font-size: 21px; line-height: 1.3; }
.rac-staff-alert p { margin: 0; font-size: 15px; }
.rac-follow-up { margin-top: 4px; padding-top: 14px; border-top: 1px solid #dccda9; color: var(--blue-deep); font-size: 13px; font-weight: 600; }

@container (min-width: 1500px) {
  .rac-monitoring-flow { grid-template-columns: minmax(0, 1fr) 90px 180px 76px 240px; gap: 20px; }
  .rac-signal { min-height: 124px; }
  .rac-monitoring h3 { font-size: 18px; }
  .rac-monitoring p { font-size: 16px; }
  .rac-staff-alert h3 { font-size: 23px; }
  .rac-review-engine img { width: 82px; }
}

@container (max-width: 1120px) {
  .rac-monitoring-flow { grid-template-columns: minmax(0, 1fr) 50px 126px 40px 170px; gap: 10px; }
  .rac-signals { gap: 0 20px; }
  .rac-signal { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
  .rac-signal > .rac-icon { width: 24px; height: 24px; }
  .rac-staff-alert h3 { font-size: 19px; }
  .rac-follow-up { line-height: 1.5; }
}

@container (max-width: 930px) {
  .rac-monitoring-flow { grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); gap: 0 24px; }
  .rac-signals { grid-column: 1 / -1; }
  .rac-signal { min-height: 110px; }
  .rac-collector { position: relative; grid-column: 1; grid-row: 2; justify-self: end; width: 1px; height: 56px; min-height: 0; margin: 4px 94px 22px 0; border-left: 1px solid var(--rac-line); }
  .rac-collector svg { display: none; }
  .rac-collector::after { position: absolute; left: -5px; bottom: 0; width: 9px; height: 9px; border-right: 1px solid var(--rac-line); border-bottom: 1px solid var(--rac-line); transform: rotate(45deg); content: ""; }
  .rac-review-engine { grid-column: 1; grid-row: 3; justify-self: end; width: 190px; }
  .rac-alert-arrow { grid-column: 2; grid-row: 3; }
  .rac-staff-alert { grid-column: 3; grid-row: 3; justify-self: start; max-width: 250px; }
}

@container (max-width: 560px) {
  .rac-monitoring-caption { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rac-monitoring-flow { grid-template-columns: minmax(0, 1fr); }
  .rac-signals { grid-template-columns: minmax(0, 1fr); }
  .rac-signal { min-height: 100px; padding: 20px 0; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; }
  .rac-signal:nth-child(2) { border-top: 1px solid #e1e9ef; }
  .rac-signal > .rac-icon { width: 28px; height: 28px; }
  .rac-collector { justify-self: center; margin-right: 0; }
  .rac-review-engine { grid-column: 1; grid-row: auto; justify-self: center; }
  .rac-alert-arrow { grid-column: 1; grid-row: auto; justify-self: center; width: 28px; height: 72px; margin: 14px 0; }
  .rac-alert-arrow svg { width: 64px; height: 24px; transform: translate(-18px, 24px) rotate(90deg); }
  .rac-staff-alert { grid-column: 1; grid-row: auto; justify-self: center; justify-items: center; max-width: 290px; text-align: center; }
  .rac-staff-alert h3 { font-size: 21px; }
  .rac-follow-up { font-size: 14px; }
}
