/* KCC 3.3.4 — compact expanded domain infrastructure ONLY. */
/* No changes to cards in other screens, API, theme switching or backup UI. */
html body .domain-infra-section .kcc-infra-details .infra-flow.infra-health-flow {
  grid-template-columns:minmax(0,1fr) 17px minmax(0,1fr) 17px minmax(0,1fr);
  grid-template-rows:auto 16px auto;
  gap:4px 5px;
  margin:6px 0 10px;
  padding:0;
  overflow:visible;
}
html body .domain-infra-section .kcc-infra-details .infra-flow .infra-step {
  box-sizing:border-box;
  min-height:52px;
  min-width:0;
  padding:7px 9px;
  gap:7px;
  border-radius:8px;
  border-width:1px;
}
html body .domain-infra-section .kcc-infra-details .infra-flow .infra-step > div {
  min-width:0;
}
html body .domain-infra-section .kcc-infra-details .infra-flow .infra-state {
  flex:0 0 20px;
  width:20px;
  height:20px;
  font-size:11px;
  line-height:1;
}
html body .domain-infra-section .kcc-infra-details .infra-flow .infra-step strong {
  font-size:12.5px;
  font-weight:700;
  line-height:1.2;
}
html body .domain-infra-section .kcc-infra-details .infra-flow .infra-step small {
  margin-top:2px;
  font-size:10.5px;
  line-height:1.25;
  white-space:normal;
  overflow-wrap:anywhere;
  max-width:100%;
}
html body .domain-infra-section .kcc-infra-details .infra-flow .infra-arrow {
  min-width:0;
  padding:0;
  font-size:14px;
  line-height:1;
  opacity:.68;
}
/* Lower emphasis on the red/green card surfaces while preserving status. */
html[data-kcc-theme="light"] body .domain-infra-section .kcc-infra-details .infra-flow .infra-step.ready {
  background:#f5fbf7 !important;
  border-color:#d6eadf;
}
html[data-kcc-theme="light"] body .domain-infra-section .kcc-infra-details .infra-flow .infra-step.warning {
  background:#fffafa !important;
  border-color:#f0dfe1;
}
html[data-kcc-theme="light"] body .domain-infra-section .kcc-infra-details .infra-flow .infra-step.error {
  background:#fff6f7 !important;
  border-color:#efd7da;
}
html[data-kcc-theme="light"] body .domain-infra-section .kcc-infra-details .infra-flow .infra-step.warning strong {
  color:#25354d;
}
html[data-kcc-theme="light"] body .domain-infra-section .kcc-infra-details .infra-flow .infra-step.error strong {
  color:#ad3447;
}
html[data-kcc-theme="light"] body .domain-infra-section .kcc-infra-details .infra-flow .infra-step .infra-state {
  box-shadow:none;
}
html[data-kcc-theme="dark"] body .domain-infra-section .kcc-infra-details .infra-flow .infra-step.ready {
  background:rgba(34,197,94,.045) !important;
  border-color:rgba(34,197,94,.24);
}
html[data-kcc-theme="dark"] body .domain-infra-section .kcc-infra-details .infra-flow .infra-step.warning {
  background:rgba(245,158,11,.045) !important;
  border-color:rgba(245,158,11,.24);
}
html[data-kcc-theme="dark"] body .domain-infra-section .kcc-infra-details .infra-flow .infra-step.error {
  background:rgba(239,68,68,.05) !important;
  border-color:rgba(239,68,68,.27);
}
/* Medium layouts retain the same clear 3x2 snake, just with tighter spacing. */
@media (min-width:701px) and (max-width:1050px) {
  html body .domain-infra-section .kcc-infra-details .infra-flow.infra-health-flow {
    grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr) 12px minmax(0,1fr);
    gap:4px 3px;
  }
  html body .domain-infra-section .kcc-infra-details .infra-flow .infra-step {padding:6px 7px;gap:5px;}
  html body .domain-infra-section .kcc-infra-details .infra-flow .infra-state {width:18px;height:18px;flex-basis:18px;}
}
/* Mobile: keep KCC's existing 2-column layout and make cards less tall. */
@media (max-width:700px) {
  html body .domain-workspace.mobile-detail-open .domain-infra-section .kcc-infra-details .infra-flow.infra-health-flow {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:none !important;
    gap:5px !important;
    margin-bottom:8px;
  }
  html body .domain-workspace.mobile-detail-open .domain-infra-section .kcc-infra-details .infra-step:nth-of-type(n) {
    min-height:51px !important;
    padding:7px 8px !important;
    gap:6px !important;
  }
  html body .domain-workspace.mobile-detail-open .domain-infra-section .kcc-infra-details .infra-state {
    width:19px;
    height:19px;
    flex:0 0 19px;
    font-size:10.5px;
  }
  html body .domain-workspace.mobile-detail-open .domain-infra-section .kcc-infra-details .infra-step strong {font-size:11.5px;}
  html body .domain-workspace.mobile-detail-open .domain-infra-section .kcc-infra-details .infra-step small {font-size:10px;line-height:1.2;}
}