.steam-panel{padding:24px;margin-bottom:22px;border:1px solid #dce5f1;border-radius:12px;background:#fff;color:#11213c;box-shadow:0 5px 18px #1d4f9108}.steam-panel h2{margin:0 0 16px;font-size:21px}.steam-modes{display:flex;gap:10px;flex-wrap:wrap;border:0;padding:0;margin:0 0 24px}.steam-modes legend{font-weight:700;margin-bottom:12px}.steam-modes label{position:relative;flex:1;min-width:180px;cursor:pointer}.steam-modes input{position:absolute;opacity:0;width:1px;height:1px}.steam-modes span{display:block;padding:13px 15px;border:1px solid #cbdcf1;border-radius:8px;background:#f6f9fd;color:#23405f;font-size:14px;font-weight:700;text-align:center}.steam-modes input:checked+span{background:#0d67e8;color:#fff;border-color:#0d67e8}.steam-modes input:focus-visible+span{outline:3px solid #66b2ff;outline-offset:3px}.steam-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.steam-field{display:flex;flex-direction:column;gap:8px;min-width:0}.steam-field[hidden]{display:none}.steam-field label{font-weight:700;font-size:14px}.steam-field label small{display:block;color:#64748b;font-weight:400;font-size:11px}.steam-field input,.steam-field select{width:100%;min-width:0;min-height:46px;padding:10px 12px;border:1px solid #b8cce6;border-radius:8px;background:#fff;color:#11213c;font:16px/1.4 "Segoe UI",Arial,sans-serif}.steam-unit{display:flex}.steam-unit input{flex:1;border-radius:8px 0 0 8px}.steam-unit select{width:100px;border-left:0;border-radius:0 8px 8px 0}.steam-hint{font-size:13px;line-height:1.6;color:#64748b}.steam-panel button{padding:10px 16px;border:1px solid #cbdcf1;border-radius:8px;background:#fff;color:#23405f;cursor:pointer}.steam-panel button:disabled{opacity:.5;cursor:default}#steam-status{font-size:13px;color:#087044;margin:10px 0 0}#steam-status.error{color:#b42318}.steam-result-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.steam-result-heading>span{padding:6px 10px;border-radius:6px;background:#edf6ff;color:#155bb5;font-size:12px;font-weight:700}.steam-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:8px 0 24px}.steam-summary>div{padding:18px;border:1px solid #cbdfff;border-radius:10px;background:#edf5ff}.steam-summary span,.steam-summary small{display:block;color:#526987;font-size:12px}.steam-summary strong{display:block;font-size:28px;color:#0b55bd;margin:8px 0;font-variant-numeric:tabular-nums}.steam-table-wrap{overflow-x:auto}.steam-table{border-collapse:collapse;width:100%;min-width:500px;font-size:14px}.steam-table caption{text-align:left;font-weight:700;padding-bottom:14px}.steam-table th,.steam-table td{padding:12px 15px;border-bottom:1px solid #dce5f1;text-align:right;font-variant-numeric:tabular-nums}.steam-table thead th{background:#f1f6fd;color:#415671}.steam-table th:first-child{text-align:left}.steam-table tbody th{font-weight:600}.steam-table td{font-weight:700}.steam-table td:last-child{color:#0b55bd;background:#f8fbff}.steam-guide{margin-top:24px}.steam-guide p,.steam-guide li{color:#415671;font-size:14px;line-height:1.65}.steam-guide li+li{margin-top:8px}.steam-guide a{color:#1267df}.steam-guide{scroll-margin-top:24px}.steam-print-title{display:none}
@media(max-width:1250px){.steam-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.steam-panel{padding:18px}.steam-modes{flex-direction:column}.steam-modes label{min-width:0}.steam-fields,.steam-summary{grid-template-columns:1fr}.steam-result-heading{align-items:flex-start;flex-direction:column}.steam-summary strong{font-size:25px}.steam-summary{gap:10px}.steam-summary>div{padding:14px}.steam-table{min-width:0;font-size:12px}.steam-table th,.steam-table td{padding:10px 6px}.steam-table th:first-child{width:42%}.steam-guide ol{padding-left:20px}}
@media print{@page{size:A4 portrait;margin:10mm}html,body.tools-layout{margin:0!important;padding:0!important;background:#fff!important;font-family:Arial,sans-serif;font-size:10pt;-webkit-text-size-adjust:100%}.tools-layout .tools-page-header{display:none!important}.steam-print-title{display:block;margin-bottom:5mm;padding-bottom:4mm;border-bottom:2px solid #1671e8}.steam-print-title span{color:#1267df;font-size:8pt;font-weight:800;letter-spacing:.5pt}.steam-print-title h2{font-size:18pt;margin:2mm 0}.steam-print-title p{font-size:8pt;color:#64748b;margin:0}.steam-panel{padding:4mm;margin:0 0 4mm;box-shadow:none;break-inside:avoid}.steam-panel h2{font-size:12pt;margin-bottom:3mm}.steam-modes{display:block;margin-bottom:3mm}.steam-modes legend{font-size:8pt;margin-bottom:2mm}.steam-modes label{display:none}.steam-modes label:has(input:checked){display:block}.steam-modes span{text-align:left;padding:2mm 3mm;font-size:9pt;color:#11213c!important;background:#f1f6fd!important;border-color:#cbdcf1!important}.steam-fields{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:3mm}.steam-field{gap:1mm}.steam-field label{font-size:7pt}.steam-field label small{font-size:6pt}.steam-field input,.steam-field select{min-height:8mm;padding:1mm 2mm;font-size:8pt;appearance:none}.steam-unit select{width:18mm}.steam-panel button{display:none!important}.steam-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:3mm;margin:2mm 0 4mm}.steam-summary>div{padding:3mm}.steam-summary strong{font-size:16pt;margin:2mm 0}.steam-summary span,.steam-summary small{font-size:7pt}.steam-result-heading{flex-direction:row!important}.steam-result-heading>span{font-size:7pt}.steam-table{min-width:0;font-size:8pt}.steam-table caption{padding-bottom:3mm}.steam-table th,.steam-table td{padding:2mm 3mm}.steam-hint,#steam-status{font-size:7pt}.steam-guide{break-before:page;break-inside:auto}.steam-guide p,.steam-guide li{font-size:9pt}.steam-table-wrap{overflow:visible}*{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

.steam-fields{align-items:end}
@media print{
  body.tools-layout:is([data-tool-page="steam-tables"],[data-tool-page="water-tables"]) .section{padding:0!important}
  body.tools-layout:is([data-tool-page="steam-tables"],[data-tool-page="water-tables"]) .section>.container{width:100%!important;max-width:none!important;margin:0!important}
  body.tools-layout:is([data-tool-page="steam-tables"],[data-tool-page="water-tables"]) main{width:100%!important;margin:0!important}
  .steam-print-title h2{line-height:1.2;margin:1mm 0}
  .steam-print-title p,.steam-print-title span{line-height:1.3}
  .steam-table th,.steam-table td{padding:1.5mm 3mm;line-height:1.3}
  .steam-table small{font-size:7pt;line-height:1.2}
  .steam-summary strong,.steam-summary small,.steam-summary span{line-height:1.25}
  .steam-summary strong{margin:1.5mm 0}
  .steam-hint,#steam-status{line-height:1.4}
}

/* Reserve a shared label row so optional helper text does not shift headings. */
@media screen and (min-width:801px){
  .steam-fields{align-items:start}
  .steam-field>label{min-height:42px;line-height:20px}
}

/* Each result owns its display unit; values remain independent of input units. */
.steam-table{table-layout:fixed}
.steam-table th:first-child{width:52%}
.steam-table th:nth-child(2){width:23%}
.steam-table th:nth-child(3){width:25%}
.steam-table td:last-child{background:transparent;color:#11213c}
.steam-result-unit{width:100%;max-width:150px;min-width:0;min-height:32px;padding:5px 8px;border:1px solid #b8cce6;border-radius:6px;background:#fff;color:#23405f;font:13px/1.3 "Segoe UI",Arial,sans-serif}
.steam-table tbody th{text-transform:none}
/* Mode colors shared by Steam Properties and Water Properties. */
body:is([data-tool-page="steam-tables"],[data-tool-page="water-tables"]) .steam-modes label{--mode-color:#0d67e8;--mode-soft:#edf5ff;--mode-line:#a8caff;--mode-text:#084ca8}
body:is([data-tool-page="steam-tables"],[data-tool-page="water-tables"]) .steam-modes label:has(input[value="temperature"]){--mode-color:#087f83;--mode-soft:#e9f9f7;--mode-line:#8dd5ce;--mode-text:#07656a}
body:is([data-tool-page="steam-tables"],[data-tool-page="water-tables"]) .steam-modes label:has(input:is([value="superheated"],[value="compressed"])){--mode-color:#b95009;--mode-soft:#fff3e8;--mode-line:#edbb91;--mode-text:#984006}
body:is([data-tool-page="steam-tables"],[data-tool-page="water-tables"]) .steam-modes span{background:var(--mode-soft);border-color:var(--mode-line);color:var(--mode-text);transition:background .15s,border-color .15s}
body:is([data-tool-page="steam-tables"],[data-tool-page="water-tables"]) .steam-modes label:hover span{border-color:var(--mode-color)}
body:is([data-tool-page="steam-tables"],[data-tool-page="water-tables"]) .steam-modes input:checked+span{background:var(--mode-color);border-color:var(--mode-color);color:#fff}
#steam-phase[data-mode="pressure"]{background:#edf5ff;color:#084ca8;border:1px solid #a8caff}
#steam-phase[data-mode="temperature"]{background:#e9f9f7;color:#07656a;border:1px solid #8dd5ce}
#steam-phase:is([data-mode="superheated"],[data-mode="compressed"]){background:#fff3e8;color:#984006;border:1px solid #edbb91}
.steam-result-value{color:#0b55bd}
.steam-table th:nth-child(2),.steam-table td:nth-child(2),.steam-table th:nth-child(3),.steam-table td:nth-child(3){text-align:center}
@media screen and (max-width:800px){
  .steam-table th:first-child{width:45%}
  .steam-table th:nth-child(2){width:25%}
  .steam-table th:nth-child(3){width:30%}
  .steam-table th,.steam-table td{overflow-wrap:anywhere;padding:10px 4px}
  .steam-result-unit{font-size:12px;padding:6px 3px;min-height:36px}
}
@media print{
  .steam-table th:first-child{width:52%}
  .steam-table th:nth-child(2){width:23%}
  .steam-table th:nth-child(3){width:25%}
  .steam-table th,.steam-table td{padding:1mm 2mm;font-size:8pt;line-height:1.2}
  .steam-result-unit{width:100%;max-width:none;height:5mm;min-height:5mm;padding:0 1mm;border:0;font:7pt/1.2 Arial,sans-serif;appearance:none;-webkit-appearance:none}
  .steam-table tr{break-inside:avoid;page-break-inside:avoid}
}

.steam-units-toolbar{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-bottom:14px}.steam-units-toolbar label{font-size:14px;font-weight:700;color:#23405f}.steam-units-toolbar select{min-width:120px;min-height:38px;padding:7px 12px;border:1px solid #b8cce6;border-radius:7px;background:#f6f9fd;color:#23405f;font:14px/1.3 "Segoe UI",Arial,sans-serif}@media print{.steam-units-toolbar{margin-bottom:2mm;gap:2mm}.steam-units-toolbar label,.steam-units-toolbar select{font-size:8pt}.steam-units-toolbar select{min-height:6mm;height:6mm;padding:0 2mm;appearance:none}}

@media screen and (min-width:1251px){.steam-fields:has(#steam-pressure-field:not([hidden])):has(#steam-temperature-field:not([hidden])):has(#steam-atmosphere-field:not([hidden])){grid-template-columns:repeat(5,minmax(0,1fr))}.steam-unit-system-field{max-width:220px;width:100%}}

.steam-unit:has(input[hidden]) select{border-left:1px solid #b8cce6;border-radius:8px}

@media print{.steam-result-unit{text-align:center;text-align-last:center}}

/* Print against the A4 page width, independently of the phone's viewport. */
@media print {
  html:has(body[data-tool-page="water-tables"]),
  html:has(body[data-tool-page="steam-tables"]),
  body.tools-layout:is([data-tool-page="water-tables"],[data-tool-page="steam-tables"]),
  body.tools-layout:is([data-tool-page="water-tables"],[data-tool-page="steam-tables"]) main,
  body.tools-layout:is([data-tool-page="water-tables"],[data-tool-page="steam-tables"]) .section,
  body.tools-layout:is([data-tool-page="water-tables"],[data-tool-page="steam-tables"]) .section>.container {
    width:190mm!important;
    min-width:190mm!important;
    max-width:190mm!important;
    margin:0!important;
    padding:0!important;
    height:auto!important;
    overflow:visible!important;
  }
  .steam-fields:has(#steam-pressure-field:not([hidden])):has(#steam-temperature-field:not([hidden])):has(#steam-atmosphere-field:not([hidden])) {
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }
  .steam-modes { flex-direction:row; }
  .steam-field,.steam-table th,.steam-table td { min-width:0; }
  .steam-result-heading { align-items:center; }
  .steam-table { width:100%!important; min-width:0!important; table-layout:fixed; }
  .steam-table-wrap { overflow:visible!important; }
  .steam-result-unit { max-width:none; color:#11213c; }
  .steam-guide ol { padding-left:5mm; }
}