/* heating_curve.css — temperature-vs-heat graph + thermometer drawn by viz/heating_curve.js (SVG). */

.hc { display: flex; flex-direction: column; gap: 0.7rem; }
.hc-axis { stroke: rgba(148, 163, 184, 0.5); stroke-width: 1.2; }
.hc-axlbl { fill: #8aa0b6; font-size: 10px; font-weight: 600; }
.hc-grid { stroke: rgba(148, 163, 184, 0.22); stroke-width: 1; stroke-dasharray: 3 3; }
.hc-gridlbl { fill: #94a3b8; font-size: 9px; font-weight: 600; }
.hc-curve { fill: none; stroke: rgba(148, 163, 184, 0.4); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hc-plateau { stroke: rgba(251, 191, 36, 0.55); stroke-width: 5; stroke-linecap: round; }
.hc-trace { fill: none; stroke: #7dd3fc; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(56, 189, 248, 0.5)); }
.hc-guide { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; stroke-dasharray: 2 3; }
.hc-dot { stroke: #0b1220; stroke-width: 1.4; }
.hc-thermo { fill: rgba(255, 255, 255, 0.03); stroke: rgba(148, 163, 184, 0.45); stroke-width: 1.4; }
.hc-merc { stroke: none; transition: y 0.12s linear, height 0.12s linear; }
.hc-tval { fill: #e8eef6; font-size: 12px; font-weight: 800; }

/* state colours — cool for solid, warming through to steam; plateaus glow amber */
.hc-solid { fill: #60a5fa; }
.hc-liquid { fill: #38bdf8; }
.hc-gas { fill: #c4b5fd; }
.hc-melt, .hc-boil { fill: #fbbf24; filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.7)); }
rect.hc-merc.hc-melt, rect.hc-merc.hc-boil, circle.hc-merc.hc-melt, circle.hc-merc.hc-boil { fill: #fbbf24; }

.hc-phase { font-size: 0.82rem; font-weight: 600; color: #aebdce; text-align: center; min-height: 1.1rem; }