@import url("./vle.css");
@import url("./graduate.css");

.sketch-alpha-fill { fill: var(--soft-teal); stroke: var(--teal); stroke-width: 1.5; }
.sketch-beta-fill { fill: var(--soft-sand); stroke: var(--amber); stroke-width: 1.5; }
.sketch-interface { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 5; }
.single-feed { grid-template-columns: 1fr; margin-top: 18px; }
.setup-panel > form > label:first-child { margin-top: 0; }
.prediction-row label + select { margin-bottom: 12px; }
.chart-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 6px 0 14px; }
.chart-toolbar label { margin: 0; font-weight: 600; }
.chart-toolbar select { width: auto; max-width: 100%; }
.plot-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 10px 0 6px; font-size: .88rem; }
.plot-legend span { display: inline-flex; align-items: center; gap: 9px; }
.plot-legend i { width: 28px; border-top: 2px solid; display: inline-block; flex-shrink: 0; }
.plot-legend i.legend-dot { width: 10px; height: 10px; border: 2px solid; border-radius: 50%; }
.boundary-metrics dd { white-space: normal; text-align: right; }
.state-label { text-transform: capitalize; }
#import-note { margin: 16px 0; }
@media (max-width: 600px) {
  .boundary-metrics dd { text-align: left; }
}
.highlight-row td { background: var(--soft-sand); }
#lle-chart { max-width: 100%; overflow: hidden; }
#fit-chart { max-width: 100%; overflow: hidden; }
.observation-table { margin: 12px 0 4px; }
.observation-table td, .observation-table th { text-align: right; }
.verdict-fail { color: var(--rust, #BE654C); }
.vlle-figures { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; align-items: start; }
.three-phase-sketch, .pxy-sketch { display: block; width: 100%; height: auto; }
.three-phase-sketch { max-width: 360px; margin: 0 auto; }
.sketch-beta6-fill { fill: #DCE8F2; stroke: #5A91BE; stroke-width: 1.5; }
.vessel-label { fill: var(--ink); font-size: 15px; font-weight: 600; }
.figure-caption { font-size: .86rem; color: var(--muted); margin: 8px 0 0; }
.pxy-axis { fill: none; stroke: #333F4A; stroke-width: 1.5; }
.pxy-bubble { fill: none; stroke: #0F6E6B; stroke-width: 2.2; }
.pxy-dew { fill: none; stroke: #0F6E6B; stroke-width: 2.2; stroke-dasharray: 7 5; }
.pxy-triple { fill: none; stroke: #E29A2D; stroke-width: 3; }
.pxy-alpha { fill: var(--soft-teal); stroke: #0F6E6B; stroke-width: 2; }
.pxy-beta { fill: #DCE8F2; stroke: #5A91BE; stroke-width: 2; }
.pxy-vapor { fill: #E29A2D; stroke: #1C242B; stroke-width: 1.5; }
.pxy-region { fill: #1C242B; font-size: 15px; font-weight: 600; text-anchor: middle; }
.pxy-region .pxy-small { font-size: 12px; }
.pxy-tick { fill: #66727C; font-size: 12px; text-anchor: middle; }
.pxy-axis-label { fill: #333F4A; font-size: 13px; text-anchor: middle; }
.pxy-callout { fill: #1C242B; font-size: 13px; font-weight: 600; text-anchor: middle; }
.phase-table td, .phase-table th { text-align: right; }
.phase-table td:first-child, .phase-table th:first-child { text-align: left; }
.family-control { margin: 12px 0 18px; }
.family-control input[type=range] { width: 100%; }
#vlle-chart { max-width: 100%; overflow: hidden; }
@media (max-width: 760px) { .vlle-figures { grid-template-columns: 1fr; } }
.sketch-feed-hot { stroke: #BE654C; stroke-width: 2.5; }
.sketch-valve { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.sketch-insulated { stroke-dasharray: 2 0; stroke-width: 5; stroke: #66727C; }
.sketch-note { fill: #66727C; font-size: 13px; text-anchor: middle; }
.energy-sketch { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.energy-sensible { fill: var(--soft-teal); stroke: #0F6E6B; stroke-width: 1.5; }
.energy-latent { fill: #F6E2BF; stroke: #E29A2D; stroke-width: 1.5; }
.energy-total { stroke: #1C242B; stroke-width: 1.5; stroke-dasharray: 6 4; }
.energy-text { fill: #1C242B; font-size: 13px; font-weight: 600; text-anchor: middle; }
.energy-caption { fill: #333F4A; font-size: 13px; text-anchor: middle; }
#ad-chart { max-width: 100%; overflow: hidden; }
.sketch-model-box { fill: #F6E2BF; stroke: #E29A2D; stroke-width: 2; }
.row-text { fill: #1C242B; font-size: 17px; font-weight: 600; text-anchor: middle; }
.row-text .row-small { font-size: 12.5px; font-weight: 400; fill: #333F4A; }
.antoine-set { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin: 16px 0; min-width: 0; }
.antoine-set legend { font-weight: 600; padding: 0 6px; }
.antoine-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.antoine-grid > div { min-width: 0; }
.antoine-grid h3 { font-size: 1rem; margin: 6px 0; }
.antoine-grid .abc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.antoine-grid .range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.antoine-grid label { font-size: .88rem; margin-top: 8px; }
.first-row { margin: 16px 0; padding: 12px 14px; border-left: 4px solid var(--teal); background: var(--soft-teal); border-radius: 6px; }
.first-row h3 { font-size: 1rem; margin: 0 0 8px; }
.first-row-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 0; font-size: .9rem; }
.first-row-list dt { color: var(--muted); }
.first-row-list dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.limit-bad { color: #BE654C; }
#vi-chart { max-width: 100%; overflow: hidden; }
@media (max-width: 600px) { .antoine-grid, .first-row-list { grid-template-columns: 1fr; } }
/* Lab 09 · virial vapor */
.vr-figures { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.eq-sketch { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.eq-main text { fill: #1C242B; font-size: 26px; font-weight: 600; text-anchor: middle; font-family: 'Source Serif 4', Georgia, serif; }
.eq-main .eq-amber-text { fill: #B9741A; }
.eq-main .eq-teal-text { fill: #0F6E6B; }
.eq-main .eq-slate-text { fill: #5A91BE; }
.eq-lead { stroke-width: 1.6; fill: none; }
.eq-amber { stroke: #E29A2D; }
.eq-teal { stroke: #0F6E6B; }
.eq-slate { stroke: #5A91BE; }
.eq-note text { fill: #333F4A; font-size: 13px; font-weight: 600; text-anchor: middle; }
.eq-caption text { fill: #66727C; font-size: 13px; text-anchor: middle; }
.energy-net { fill: #E8ECEF; stroke: #1C242B; stroke-width: 1.5; }
.antoine-grid.abc-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.poynting-row { margin: 14px 0; }
.check-label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.check-label input { width: auto; margin: 0; }
#vr-chart { max-width: 100%; overflow: hidden; }
#compare-body th { text-align: left; font-weight: 600; }
@media (max-width: 760px) { .vr-figures { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .antoine-grid.abc-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Lab 10 · solid–liquid equilibrium */
.sle-figures { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.sle-feed { stroke: #333F4A; stroke-width: 1.5; stroke-dasharray: 3 4; fill: none; }
.sle-tie { stroke: #E29A2D; stroke-width: 2.2; fill: none; }
.sle-solid-pt { fill: #E29A2D; stroke: #1C242B; stroke-width: 1.5; }
.sle-onset { fill: #fff; stroke: #0F6E6B; stroke-width: 2; }
.sle-eutectic-pt { fill: #E29A2D; stroke: #1C242B; stroke-width: 1.5; }
.sle-note text { fill: #66727C; font-size: 12px; text-anchor: middle; }
.sle-worked { fill: var(--soft-teal); stroke: #0F6E6B; stroke-width: 1; }
#so-chart { max-width: 100%; overflow: hidden; }
#phase-body th { text-align: left; font-weight: 600; }
@media (max-width: 760px) { .sle-figures { grid-template-columns: 1fr; } }
.eq-main.eq-small text { font-size: 22px; }
/* Lab 11 · adsorption */
.ads-figures { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
.ads-vessel { fill: #FBFAF7; stroke: #333F4A; stroke-width: 2.5; }
.ads-bed { fill: #F3F0EB; stroke: #66727C; stroke-width: 1.2; }
.ads-pellet circle { fill: #DFC98F; stroke: #66727C; stroke-width: 1; }
.ads-gas circle { fill: #0F6E6B; }
.ads-on circle { fill: #E29A2D; stroke: #1C242B; stroke-width: .6; }
.ads-henry { stroke: #66727C; stroke-width: 1.6; stroke-dasharray: 6 4; fill: none; }
.ads-iso-hot { fill: none; stroke: #5A91BE; stroke-width: 2.2; }
.ads-balance { stroke: #E29A2D; stroke-width: 2.5; fill: none; }
#ad-chart { max-width: 100%; overflow: hidden; }
#share-body th { text-align: left; font-weight: 600; }
@media (max-width: 760px) { .ads-figures { grid-template-columns: 1fr; } }
/* Lab 12 · reaction equilibrium */
.rx-figures { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.rx-zero { stroke: #B9C1C6; stroke-width: 1; stroke-dasharray: 4 4; fill: none; }
.rx-high-p { fill: none; stroke: #E29A2D; stroke-width: 2.2; }
.rx-drop { stroke: #66727C; stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
#rx-chart { max-width: 100%; overflow: hidden; }
#comp-body th { text-align: left; font-weight: 600; }
@media (max-width: 760px) { .rx-figures { grid-template-columns: 1fr; } }
.eq-note .rx-key-amber { fill: #B9741A; }
.eq-note .rx-key-teal { fill: #0F6E6B; }
/* Lab 13 · concentration cell */
.ec-figures { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.ec-wire { fill: none; stroke: #333F4A; stroke-width: 2; }
.ec-meter { fill: #fff; stroke: #333F4A; stroke-width: 2; }
.ec-bridge { fill: none; stroke: #DFC98F; stroke-width: 12; stroke-linejoin: round; }
.ec-beaker { fill: none; stroke: #333F4A; stroke-width: 2.5; }
.ec-dilute { fill: #E6F1F0; }
.ec-conc { fill: #9CC9C5; }
.ec-metal { fill: #B9C1C6; stroke: #333F4A; stroke-width: 1.5; }
#ec-chart { max-width: 100%; overflow: hidden; }
#electrode-body th { text-align: left; font-weight: 600; }
@media (max-width: 760px) { .ec-figures { grid-template-columns: 1fr; } }