@import url("../solve-cooling-dehumidification/styles.css");

.axial-app {
  display: grid;
  gap: 18px;
}

.axial-app .cooling-layout {
  grid-template-columns: 1fr;
}

.axial-schematic {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.axial-schematic img {
  display: block;
  width: min(100%, 460px);
  max-height: 360px;
  height: auto;
  object-fit: contain;
  padding: 18px;
  margin: 0 auto;
}

.axial-schematic .fan-duct {
  fill: rgba(11, 114, 185, 0.08);
  stroke: #0f2744;
  stroke-width: 6;
}

.axial-schematic .fan-hub {
  fill: #0f74b8;
  stroke: #0f2744;
  stroke-width: 4;
}

.axial-schematic .fan-blade {
  fill: rgba(15, 116, 184, 0.28);
  stroke: #0f74b8;
  stroke-width: 4;
}

.axial-schematic .fan-flow {
  fill: none;
  stroke: #0f74b8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 9;
}

.axial-schematic .fan-flow--in {
  stroke: #42b8e8;
}

.axial-schematic .fan-flow--out {
  stroke: #d6332a;
}

.axial-schematic .fan-dim,
.axial-schematic .fan-axis {
  fill: none;
  stroke: #64748b;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.axial-schematic .fan-label {
  fill: #172033;
  font-size: 20px;
  font-weight: 800;
}

.axial-result-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.axial-result-section {
  align-self: start;
}

.axial-alert {
  white-space: normal;
}

@media (max-width: 720px) {
  .axial-result-grid {
    grid-template-columns: 1fr;
  }
}