#velocity-card[data-rating="good"]{background:#ecfdf3;border-color:#86d5a6;color:#096b3d}
#velocity-card[data-rating="low"]{background:#fff8e6;border-color:#e8bc58;color:#885500}
#velocity-card[data-rating="high"]{background:#fff0f0;border-color:#f0a0a0;color:#b42318}
#velocity-card[data-rating] strong,#velocity-card[data-rating] span,#velocity-card[data-rating] small{color:inherit}
#velocity-rating{display:inline-block;margin-top:12px;padding:5px 9px;border:1px solid currentColor;border-radius:6px;font-size:12px;font-weight:700}
#velocity-band{margin:12px 0 0;font-size:12px;line-height:1.7}
.velocity-guidance{padding:16px 18px;background:#f6f9fd;border:1px solid #dce5f1;border-radius:9px;margin-bottom:16px}
.velocity-guidance p{margin:0;font-size:14px;line-height:1.7;color:#23405f}
.velocity-guidance p+p{margin-top:8px;font-size:12px;color:#526987}
.velocity-criteria{margin:20px 0}.velocity-criteria summary{cursor:pointer;font-size:14px;font-weight:700;color:#23405f}.velocity-criteria .steam-fields{margin-top:16px}
.velocity-result-details>summary{cursor:pointer;font-size:12px;font-weight:600;color:#23405f}
.velocity-result-details[open]>.velocity-guidance{margin-top:10px}
.velocity-advice-heading{font-size:14px;font-weight:600;color:#23405f;margin:0 0 10px}
/* Stretch the label area, keeping controls on the same baseline in each row. */
#velocity-form .steam-field>label{flex:1}
#velocity-form .steam-field>.steam-unit,#velocity-form .steam-field>input,#velocity-form .steam-field>select{flex-shrink:0}
@supports (grid-template-rows:subgrid){
  #velocity-form .steam-fields>.steam-field{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:5px}
  #velocity-form .steam-fields>.steam-field[hidden]{display:none}
}
/* Compact workspace: keep the answer alongside the operating inputs. */
@media screen {
body[data-tool-page="pipe-velocity"] .section{padding:16px 24px}
body[data-tool-page="pipe-velocity"] .section>.container{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.7fr);gap:16px;align-items:start}
body[data-tool-page="pipe-velocity"] .steam-panel{padding:18px;margin:0;min-width:0}
body[data-tool-page="pipe-velocity"] .steam-panel h2{margin:0 0 14px}
#velocity-form .steam-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
#velocity-form .steam-field{gap:5px}
#velocity-form .steam-field label{line-height:1.4}
#velocity-form .steam-field label small{line-height:1.4}
#velocity-form .steam-field input,#velocity-form .steam-field select{min-height:40px;padding:6px 9px;}
#velocity-form .steam-unit select{width:90px}
#velocity-form .steam-hint,#velocity-status{line-height:1.5;margin:10px 0 0}
.velocity-criteria{margin:14px 0 0}
.velocity-criteria summary{}
#velocity-result .steam-summary{grid-template-columns:1fr 1fr;gap:10px;margin:0 0 12px}
#velocity-result .steam-summary>div{padding:12px}
#velocity-card{grid-column:1/-1}
#velocity-result .steam-summary strong{margin:4px 0}
#velocity-card strong{display:inline-block;margin-right:8px!important}
#velocity-card small{display:inline-block}
#velocity-rating{display:table;margin-top:5px;padding:4px 7px;}
#velocity-band{margin:8px 0 0;line-height:1.5}
.velocity-guidance{padding:12px;margin-bottom:10px}
.velocity-guidance p{line-height:1.6}
.velocity-guidance p+p{}
#velocity-details{line-height:1.6;margin:0}
body[data-tool-page="pipe-velocity"] .steam-guide{grid-column:1/-1}
body[data-tool-page="pipe-velocity"] .steam-guide>summary{font-weight:700;color:#23405f;cursor:pointer}
}
@media screen and (max-width:1050px) and (min-width:801px){
body[data-tool-page="pipe-velocity"] .section>.container{grid-template-columns:1fr}
#velocity-result{grid-row:1}
}
@media screen and (max-width:800px){
body[data-tool-page="pipe-velocity"] .tools-page-heading>p,body[data-tool-page="pipe-velocity"] .tools-page-kicker{display:none}
body[data-tool-page="pipe-velocity"] .section{padding:10px}
body[data-tool-page="pipe-velocity"] .section>.container{grid-template-columns:1fr;gap:10px}
body[data-tool-page="pipe-velocity"] .steam-panel{padding:12px}
body[data-tool-page="pipe-velocity"] .steam-panel h2{margin-bottom:10px}
#velocity-result{grid-row:1}
#velocity-result .steam-summary{grid-template-columns:1fr 1fr;margin-bottom:8px;gap:7px}
#velocity-result .steam-summary>div{padding:9px}
#velocity-result .steam-summary strong{}
#velocity-card strong{}
#velocity-result .steam-summary span,#velocity-result .steam-summary small{}
.velocity-guidance{padding:9px;margin-bottom:8px}
#velocity-form .steam-fields{gap:10px}
#velocity-form .steam-field input,#velocity-form .steam-field select{min-height:42px;padding:7px 6px}
#velocity-form .steam-unit select{width:78px;}
#velocity-form .steam-field label small{display:none}
#velocity-form .steam-field:has(#fluid),#velocity-form #oil-field{grid-column:1/-1}
}

@media screen { #velocity-form .steam-field label{margin:0;min-height:0} #velocity-form .steam-field input,#velocity-form .steam-field select{height:40px} #velocity-status{font-size:13px} .velocity-result-details>summary{font-size:14px} }