.hlcma-ambient{
  display:grid;
  gap:14px;
}

.hlcma-ambient__head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.hlcma-ambient__head h3{
  margin:0 0 6px;
}

.hlcma-ambient__intro{
  margin:0;
  max-width:860px;
}

.hlcma-ambient__status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:8px 12px;
  border:1px solid var(--line,#e5e7eb);
  border-radius:999px;
  background:#f3f4f6;
  color:var(--muted,#4b5563);
  font-weight:700;
  white-space:nowrap;
}

.hlcma-ambient__status.is-ok{
  background:#ecfdf5;
  color:#065f46;
}

.hlcma-ambient__status.is-warn{
  background:#fef3c7;
  color:#92400e;
}

.hlcma-ambient__status.is-error{
  background:#fef2f2;
  color:#991b1b;
}

.hlcma-ambient__summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.hlcma-ambient__metric{
  padding:12px 12px;
  border:1px solid var(--line,#e5e7eb);
  border-radius:14px;
  background:#fff;
}

.hlcma-ambient__metric strong{
  display:block;
  font-size:12px;
  color:var(--muted,#4b5563);
  margin-bottom:5px;
}

.hlcma-ambient__metric span{
  display:block;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.02em;
}

.hlcma-ambient__warnings{
  padding:12px 14px;
  border-radius:14px;
  background:#fff7ed;
  color:#9a3412;
  border:1px solid #fdba74;
}

.hlcma-ambient__warn-title{
  font-weight:800;
  margin-bottom:8px;
}

.hlcma-ambient__warn-list{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:6px;
}

.hlcma-ambient__chart-wrap{
  overflow:auto;
}

.hlcma-ambient__chart{
  width:100%;
  min-width:480px;
  height:auto;
  display:block;
}

.hlcma-ambient__chart rect{
  fill:#f8fafc;
  stroke:#e5e7eb;
}

.hlcma-ambient__chart line{
  stroke:#cbd5e1;
  stroke-width:1;
}

.hlcma-ambient__chart path{
  fill:none;
  stroke:#1d4ed8;
  stroke-width:2;
  stroke-linejoin:round;
  stroke-linecap:round;
}

.hlcma-ambient__chart text{
  fill:#64748b;
  font-size:11px;
}

.hlcma-ambient__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

@media (max-width: 980px){
  .hlcma-ambient__head{
    flex-direction:column;
    align-items:stretch;
  }

  .hlcma-ambient__summary{
    grid-template-columns:1fr;
  }
}