.rankine-app {
  min-width: 0;
}

.rankine-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.rankine-form {
  align-content: start;
}

.rankine-section {
  display: grid;
  gap: 12px;
}

.rankine-section + .rankine-section,
[data-cycle-fields] .rankine-section:first-child {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.rankine-section-title {
  margin: 0;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.rankine-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.rankine-field--wide {
  grid-column: 1 / -1;
}

.rankine-input-unit {
  grid-template-columns: minmax(0, 1fr) minmax(82px, auto);
}

.rankine-input-unit select {
  padding-inline: 8px;
}

.rankine-diagram-panel {
  min-width: 0;
}

.rankine-diagram {
  min-height: 430px;
  justify-items: center;
  padding: 16px;
  border-radius: 8px;
  background: #f8fafc;
}

.rankine-diagram svg {
  width: 100%;
  max-width: 920px;
  max-height: 520px;
}

.rankine-diagram-image {
  display: block;
  width: 100%;
  max-width: 920px;
  max-height: 520px;
  object-fit: contain;
}

.rankine-diagram .rankine-component {
  fill: #f8fafc;
  stroke: #111827;
  stroke-width: 2;
}

.rankine-diagram .rankine-hot {
  fill: #fee2e2;
  stroke: #111827;
  stroke-width: 2;
}

.rankine-diagram .rankine-cold {
  fill: #dbeafe;
  stroke: #111827;
  stroke-width: 2;
}

.rankine-diagram .rankine-liquid {
  fill: #dcfce7;
  stroke: #111827;
  stroke-width: 2;
}

.rankine-diagram .rankine-pipe {
  fill: none;
  stroke: #111827;
  stroke-width: 2.8;
  marker-end: url(#rankineArrow);
}

.rankine-diagram .rankine-heat {
  stroke: #d72638;
  stroke-width: 2.2;
  marker-end: url(#rankineHeatArrow);
}

.rankine-diagram .rankine-work {
  stroke: #0b58ca;
  stroke-width: 2.2;
  marker-end: url(#rankineWorkArrow);
}

.rankine-diagram text {
  fill: #111827;
  font-family: Arial, Helvetica, sans-serif;
}

.rankine-diagram .rankine-label {
  font-size: 14px;
  font-weight: 800;
  text-anchor: middle;
}

.rankine-diagram .rankine-small-label {
  font-size: 12px;
  font-weight: 700;
  text-anchor: middle;
}

.rankine-diagram .rankine-state circle {
  fill: #fff;
  stroke: #0b58ca;
  stroke-width: 2;
}

.rankine-diagram .rankine-state text {
  fill: #0f172a;
  font-size: 14px;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: middle;
}

.rankine-warning-panel {
  border-color: rgba(179, 90, 0, 0.28);
  background: rgba(255, 248, 235, 0.82);
}

.rankine-warning-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: #7a3e00;
  font-size: 0.92rem;
  line-height: 1.45;
}

.rankine-result-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.rankine-result-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--color-primary-softer);
}

.rankine-result-card span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.rankine-result-card strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.rankine-card-empty {
  grid-column: 1 / -1;
  min-height: 120px;
}

.rankine-note {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

@media (max-width: 1180px) {
  .rankine-fields,
  .rankine-result-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .rankine-fields,
  .rankine-result-cards {
    grid-template-columns: 1fr;
  }

  .rankine-diagram {
    min-height: 320px;
    padding: 10px;
  }
}