#js-tool-container-gas-pipeline-hydraulic-calculator .gph-app { display: flex; flex-direction: column; gap: 22px; color: var(--text-primary); }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-controls { display: flex; flex-direction: column; gap: 14px; }
#js-tool-container-gas-pipeline-hydraulic-calculator .tbcalc-fieldset { border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 15px 17px 17px; margin: 0; }
#js-tool-container-gas-pipeline-hydraulic-calculator .tbcalc-legend { padding: 0 6px; font-weight: 650; color: var(--text-secondary); }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px 18px; }
#js-tool-container-gas-pipeline-hydraulic-calculator .tbcalc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#js-tool-container-gas-pipeline-hydraulic-calculator .tbcalc-hint { color: var(--text-muted); font-size: 0.81rem; line-height: 1.4; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-outcome { display: flex; flex-direction: column; gap: 14px; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-outcome > * { min-width: 0; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-outcome output { display: inline-block; width: fit-content; max-width: 100%; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-pressure-summary { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, 0.65fr); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-secondary); }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-answer { padding: 19px 22px 18px; border-left: 4px solid var(--accent-primary); background: var(--accent-light); }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-pressure-caption { color: var(--text-secondary); font-size: 0.88rem; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-eyebrow { display: block; margin-bottom: 11px; color: var(--text-muted); font-size: 0.71rem; font-weight: 700; letter-spacing: 0.045em; text-transform: uppercase; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-answer-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 7px; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-answer-value { font-size: clamp(2.35rem, 6vw, 3.55rem); line-height: 1; font-weight: 760; letter-spacing: -0.04em; overflow-wrap: anywhere; }
#js-tool-container-gas-pipeline-hydraulic-calculator .tbcalc-unit { color: var(--text-secondary); font-size: 0.95rem; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-hero-note { margin: 10px 0 0; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.45; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-capacity { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; padding: 19px 20px; border-left: 1px solid var(--border-color); color: var(--text-secondary); }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-capacity > span { font-size: 0.82rem; line-height: 1.4; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-capacity > div { display: flex; align-items: baseline; gap: 7px; color: var(--text-primary); }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-capacity output { font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 740; overflow-wrap: anywhere; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-capacity small { color: var(--text-muted); font-size: 0.73rem; }
#js-tool-container-gas-pipeline-hydraulic-calculator .tbcalc-status { border-left: 4px solid var(--accent-primary); padding: 11px 14px; background: var(--bg-tertiary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.45; min-height: 44px; }
#js-tool-container-gas-pipeline-hydraulic-calculator .tbcalc-status.warn { border-left-color: var(--warning); background: var(--warning-light); color: var(--text-primary); }
#js-tool-container-gas-pipeline-hydraulic-calculator .tbcalc-status.danger { border-left-color: var(--danger); background: var(--danger-light); color: var(--text-primary); }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-route-panel { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-secondary); padding: 15px 18px 18px; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-route-head { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding-bottom: 13px; color: var(--text-muted); font-size: 0.78rem; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-route-head > span:first-child { color: var(--text-secondary); font-weight: 680; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-route-head output { color: var(--text-primary); font-weight: 680; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-route { display: grid; grid-template-columns: minmax(120px, auto) 1fr minmax(120px, auto); align-items: center; gap: 0; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-node { position: relative; z-index: 2; padding: 10px 13px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-secondary); min-width: 0; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-node span { display: block; color: var(--text-muted); font-size: 0.71rem; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-node output { margin-top: 3px; color: var(--text-primary); font-weight: 700; overflow-wrap: anywhere; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-node-out { text-align: right; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-node-out output { margin-left: auto; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-tube { position: relative; height: 16px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); background: var(--bg-tertiary); overflow: visible; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-flow-fill { --gph-share: 51.6%; display: block; height: 100%; width: var(--gph-share, 0%); background: var(--accent-primary); opacity: 0.72; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-tube-label { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); white-space: nowrap; color: var(--text-muted); font-size: 0.72rem; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-readout div { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 11px 14px; border-right: 1px solid var(--border-color); }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-readout div:last-child { border-right: 0; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-readout span { color: var(--text-muted); font-size: 0.75rem; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-readout output { color: var(--text-primary); font-weight: 690; overflow-wrap: anywhere; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-analysis { display: flex; flex-direction: column; gap: 13px; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-trace { margin: 0; border-left: 3px solid var(--accent-primary); background: var(--bg-tertiary); }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-trace div { display: grid; grid-template-columns: minmax(180px, 0.8fr) 1.2fr; gap: 18px; padding: 10px 15px; border-bottom: 1px solid var(--border-color); }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-trace div:last-child { border-bottom: 0; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-trace dt { color: var(--text-muted); }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-trace dd { margin: 0; font-weight: 620; text-align: right; overflow-wrap: anywhere; }
#js-tool-container-gas-pipeline-hydraulic-calculator .gph-limits { margin: 0; color: var(--text-muted); font-size: 0.84rem; line-height: 1.5; }
@media (max-width: 900px) { #js-tool-container-gas-pipeline-hydraulic-calculator .gph-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #js-tool-container-gas-pipeline-hydraulic-calculator .gph-pressure-summary { grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr); } }
@media (max-width: 600px) { #js-tool-container-gas-pipeline-hydraulic-calculator .gph-grid { grid-template-columns: 1fr; } #js-tool-container-gas-pipeline-hydraulic-calculator .gph-pressure-summary { grid-template-columns: 1fr; } #js-tool-container-gas-pipeline-hydraulic-calculator .gph-answer { padding: 17px 16px 16px; } #js-tool-container-gas-pipeline-hydraulic-calculator .gph-capacity { padding: 14px 16px 16px; border-left: 0; border-top: 1px solid var(--border-color); } #js-tool-container-gas-pipeline-hydraulic-calculator .gph-route-panel { padding: 14px 14px 16px; } #js-tool-container-gas-pipeline-hydraulic-calculator .gph-route-head { align-items: flex-start; flex-direction: column; gap: 4px; } #js-tool-container-gas-pipeline-hydraulic-calculator .gph-route { grid-template-columns: 1fr; } #js-tool-container-gas-pipeline-hydraulic-calculator .gph-node-out { text-align: left; } #js-tool-container-gas-pipeline-hydraulic-calculator .gph-node-out output { margin-left: 0; } #js-tool-container-gas-pipeline-hydraulic-calculator .gph-tube { width: 16px; height: 70px; justify-self: center; border: 0; border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); } #js-tool-container-gas-pipeline-hydraulic-calculator .gph-flow-fill { width: 100%; height: var(--gph-share, 0%); } #js-tool-container-gas-pipeline-hydraulic-calculator .gph-tube-label { left: 29px; top: 50%; transform: translateY(-50%); } #js-tool-container-gas-pipeline-hydraulic-calculator .gph-readout { grid-template-columns: 1fr; } #js-tool-container-gas-pipeline-hydraulic-calculator .gph-readout div { border-right: 0; border-bottom: 1px solid var(--border-color); } #js-tool-container-gas-pipeline-hydraulic-calculator .gph-readout div:last-child { border-bottom: 0; } #js-tool-container-gas-pipeline-hydraulic-calculator .gph-trace div { grid-template-columns: 1fr; gap: 3px; } #js-tool-container-gas-pipeline-hydraulic-calculator .gph-trace dd { text-align: left; } }