/* One hierarchy: customer summary, current settings, then specific requests. */
.wrap{--deck-bottom:34px;--deck-height:136px}
.deck{position:absolute;bottom:calc(var(--deck-bottom) + var(--bottom));left:var(--left);right:var(--right);margin-inline:auto;max-width:1200px;z-index:3;display:grid;grid-template-columns:minmax(144px,1.45fr) minmax(112px,1.1fr) minmax(64px,.68fr) minmax(64px,.68fr) minmax(132px,1.25fr) minmax(108px,1.1fr);gap:10px;padding:10px 12px 12px;align-items:start;background:#0b1a30f5;border:1px solid #7eaed17a;border-radius:12px;box-shadow:0 8px 30px #01091780}
.wash-controls,.finish-controls{display:contents}
.customer-request-bar{grid-column:1/-1;display:flex;align-items:center;gap:7px;min-width:0;padding:0 0 9px;border-bottom:1px solid #789fbd3b;color:#c5d7e7;font:500 11px/1.4 var(--sans)}
.customer-request-bar>svg{width:15px;height:15px;flex:none;color:#a8c9e4}
.customer-request-label{color:#edf6ff;font-weight:700;flex:none}
#customer-request-summary{min-width:0}
.customer-request-bar.needs-adjustment #customer-request-summary{color:#e7f5ff;font-weight:650}
.customer-request-bar.is-matched #customer-request-summary{color:#a5d9ff}
.control-group{min-width:0;margin:0;padding:0;border:0}
.deck legend,.deck-label{display:flex;align-items:center;gap:5px;width:100%;height:18px;margin:0 0 6px;padding:0;color:#c2d7eb;font:650 10px/1.2 var(--sans);letter-spacing:.035em;text-transform:uppercase;white-space:nowrap}
.deck legend svg{width:14px;height:14px;flex:none;color:#8cbfe6}
.mode-row,.utility-row{display:flex;gap:4px}
.deck button:not(.fire){display:flex;align-items:center;justify-content:center;gap:5px;height:44px;min-height:44px;min-width:0;border:1px solid #7397bb63;border-radius:6px;background:#142b47;color:#e6f2ff;font:650 11px/1.2 var(--sans);padding:0 6px;white-space:normal}
.deck button:not(.fire):hover{background:#234667;border-color:#9ac6eb}
.deck button[aria-pressed=true]:not(.fire){background:#2b608e;border-color:#a4d8ff;color:#f3faff;box-shadow:inset 0 0 0 1px #a4d8ff20}
.deck button svg{width:14px;height:14px;flex:none}
.deck .mode-row button,.deck .utility-row button{flex:1}
.deck .utility-row button{min-width:44px}
.deck .seat-control button,.deck .water-control button{width:100%;font-size:12px}
.deck .mode-row button svg{display:none}
/* A native stepped range supplies touch dragging, keyboard access and semantics. */
.deck .range-row{position:relative;height:44px;min-height:44px;padding:0;border:1px solid #7397bb63;border-radius:6px;background:#142b47}
.deck .range-row:hover{background:#234667;border-color:#9ac6eb}
.deck .range-row:focus-within{outline:2px solid #c6e6ff;outline-offset:2px;border-color:#b9e3ff}
.deck .range-row input{position:absolute;inset:0;z-index:1;appearance:none;-webkit-appearance:none;opacity:0;width:100%;height:100%;min-height:42px;margin:0;padding:0;cursor:pointer}
.deck .range-row input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:26px;height:42px}
.deck .range-row input::-moz-range-thumb{width:26px;height:42px;border:0}
#pressure-dots{position:absolute;inset:0 8px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
#pressure-dots span{width:10px;height:10px;flex:none;border:1.5px solid #9ab8d4;border-radius:50%;background:#0d2038}
#pressure-dots span.filled{background:#9ed9ff;border-color:#c3e9ff;box-shadow:0 0 7px #75c3ff35}
@media (forced-colors:active){
 #pressure-dots span{forced-color-adjust:none;background:Canvas;border-color:CanvasText}
 #pressure-dots span.filled{background:Highlight;border-color:Highlight;box-shadow:none}
}
.deck .main-action{display:block;grid-column:auto;grid-row:auto;align-self:start}
.deck .main-action .deck-label{display:flex}
.deck .fire{height:44px;min-height:44px;padding:0 8px;font:750 10px/1.15 var(--sans);letter-spacing:.035em;border-radius:6px;white-space:normal}
.deck #rinse{flex:1.55;padding:0 4px;font-size:10px}
.deck #rinse:disabled{opacity:.58}
.deck #rinse.alert{background:#376c9a;border-color:#d3eeff;color:#fff;box-shadow:inset 0 0 0 1px #d3eeff}
.deck button.attention:not(.fire){border-color:#c4e8ff;box-shadow:inset 0 0 0 1px #c4e8ff}
.preference-row{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;gap:2px;min-width:0;margin-top:6px;color:#bed1e4;font:500 10px/1.35 var(--sans)}
.control-preference{min-width:0;overflow-wrap:anywhere}
.preference-status{display:inline-flex;align-items:center;gap:3px;color:#a4d9ff;font-weight:750;white-space:nowrap}
.preference-status::before{content:'';width:14px;height:14px;flex:none;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20d%3D%22m2.5%207%203%203%206-6%22%20fill%3D%22none%22%20stroke%3D%22%23a4d9ff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E")}
.preference-status.needs-adjustment{color:#ecf7ff}
.preference-status.needs-adjustment::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%225.5%22%20fill%3D%22none%22%20stroke%3D%22%23b9ddf7%22/%3E%3Cpath%20d%3D%22M7%203.5v4%22%20stroke%3D%22%23ecf7ff%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22/%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2210%22%20r%3D%22.7%22%20fill%3D%22%23ecf7ff%22/%3E%3C/svg%3E")}
.control-preference.needs-adjustment{color:#eef7ff}
.bowl-pip,.hint{bottom:calc(var(--deck-height) + var(--deck-bottom) + var(--bottom) + 10px)}
#restart-confirmation{width:min(92vw,440px);padding:24px}
#restart-confirmation p{font-size:14px;line-height:1.6;color:#c5dbef}
#restart-confirmation .dialog-actions{margin-top:22px;justify-content:flex-start}
#restart-confirm{background:#233e60;color:#d9edff;border-color:#7c9fbe}
#restart-confirmation .fire{min-height:44px;padding:10px 14px;font-size:12px}
/* Two deliberate rows on phones: wash settings, then temperature and care. */
@media (max-width:850px) and (orientation:portrait),(max-width:760px) and (min-height:521px),(max-width:539px){
 .wrap{--deck-bottom:6px;--deck-height:197px}
 .deck{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:7px;max-width:560px;border-radius:10px}
 .customer-request-bar{padding-bottom:5px;gap:5px;font-size:10px;line-height:1.35}
 .customer-request-bar>svg{width:13px;height:13px}
 .customer-request-label{display:none}
 .wash-controls{display:grid;grid-template-columns:minmax(140px,1.1fr) minmax(0,1fr);gap:8px}
 .finish-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(90px,1.6fr) minmax(62px,1.1fr);gap:4px;align-items:start}
 .deck legend,.deck-label{height:16px;gap:3px;font-size:9px;margin-bottom:4px;letter-spacing:0}
 .deck legend svg{width:12px;height:12px}
 .deck button:not(.fire){padding:0 3px;gap:3px;font-size:11px}
 .deck .seat-control button,.deck .water-control button{font-size:11px}
 .deck .mode-row,.deck .utility-row{gap:2px}
 .deck .utility-row button svg,.deck .fire svg{display:none}
 .deck #rinse{flex:1;font-size:9px;padding:0 1px}
 .deck .fire{padding:0 3px;font-size:10px;letter-spacing:0}
 .deck .main-action .deck-label{display:flex}
 .preference-row{grid-template-columns:minmax(0,1fr) 14px;align-items:start;font-size:10px;line-height:1.3;margin-top:5px;gap:3px}
 .preference-status{font-size:0;gap:0}
 .preference-status::before{margin-top:0}
 .console{gap:4px 8px;padding:6px 8px}
 .console .stats{grid-column:1/-1}
 .console .patience:not([hidden]){grid-column:1/-1;text-align:left}
 .stats .stat span,.stats .stat strong{font-size:10px}
 .bowl-pip{width:64px}
 .bowl-pip figcaption{font-size:8px;letter-spacing:0;padding:4px;line-height:1.25}
 .hint{left:calc(var(--left) + 72px);font-size:9px;padding:5px 7px}
 .round-cue{bottom:calc(var(--deck-height) + var(--deck-bottom) + var(--bottom) + 52px);left:calc(var(--left) + 72px);padding:7px}
 .round-cue b,.round-cue span{font-size:10px}
 .osd{display:none}
}
/* Keep every action in one row on short landscape screens. */
@media (max-height:520px) and (min-width:540px) and (orientation:landscape){
 .wrap{--deck-bottom:4px;--deck-height:136px}
 .deck{grid-template-columns:136px minmax(72px,1fr) minmax(45px,.6fr) minmax(45px,.6fr) minmax(90px,1.1fr) minmax(64px,.8fr);gap:5px;padding:6px}
 .customer-request-bar{font-size:10px;padding-bottom:5px;gap:5px}
 .deck legend,.deck-label{font-size:9px;height:15px;margin-bottom:4px;gap:3px;letter-spacing:0}
 .deck legend svg{display:none}
 .deck button:not(.fire),.deck .seat-control button,.deck .water-control button{font-size:10px;padding:0 2px;min-width:44px}
 .deck .mode-row,.deck .utility-row{gap:2px}
 .deck #rinse{flex:1;font-size:9px;padding:0 1px}
 .deck .utility-row button svg,.deck .fire svg{display:none}
 .deck .fire{font-size:9px;padding:0 2px;letter-spacing:0}
 .deck .range-row{padding:0}
 .preference-row{grid-template-columns:minmax(0,1fr) 14px;align-items:start;font-size:9px;margin-top:4px;gap:3px}
 .preference-status{font-size:0;gap:0}
 .bowl-pip{width:64px}
 .bowl-pip figcaption{font-size:8px;padding:4px;letter-spacing:0}
 .round-cue{bottom:calc(var(--deck-height) + var(--deck-bottom) + var(--bottom) + 44px)}
}
@media (min-width:540px) and (max-width:620px) and (max-height:520px) and (orientation:landscape){
 .console{left:auto;width:128px;display:flex;gap:4px;padding:6px}
 .console .case-detail{margin:0;padding:0}
 .console .case-detail h2{font-size:14px}
 .console .stats{gap:7px}.console .stat{gap:3px}.console .stat strong,.console .stat span{font-size:9px}
 .hint,.round-cue{max-width:calc(100% - 224px)}
}

/* Phone HUD: customer, equal-width meters, then secondary totals. */
@media (max-width:850px) and (orientation:portrait),(max-width:760px) and (min-height:521px),(max-width:539px){
 .console{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;padding:10px 12px;border-radius:10px}
 .console .console-top{position:absolute;top:11px;right:12px;display:flex;font:650 10px/1.2 var(--sans);letter-spacing:0}
 .console .console-top>span:first-child{display:none}
 .console .case-detail{grid-column:1/-1;grid-row:1;margin:0;padding:0 42px 0 0;align-self:center;border:0;min-width:0}
 .console .case-detail h2{font:750 15px/1.2 var(--sans);letter-spacing:-.025em;overflow-wrap:anywhere;margin:0}
 .console .case-detail p{display:none}
 .console .metric{grid-row:2;min-width:0;grid-column:auto}
 .console .metric-head{font:550 10px/1.3 var(--sans);letter-spacing:0;text-transform:none;gap:6px;margin-bottom:5px;align-items:baseline}
 .console .metric-head>span{white-space:nowrap}
 .console .metric-head strong{font:700 10px/1.3 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
 .console .stats{grid-column:1/-1;grid-row:3;display:flex;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;border-top:1px solid #789fbd30;padding-top:6px}
 .console .stat{gap:5px;min-width:0}
 .console .stat span{font:500 10px/1.2 var(--sans);text-transform:none;color:#b2c8de}
 .console .stat strong{font:650 10px/1.2 var(--mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
 .console .patience:not([hidden]){grid-column:1/-1;grid-row:4;margin:0;text-align:left;font-size:10px}
}
/* One actionable message on compact screens: keep the target clear instead of
   stacking the cue and its repeating hint above the controls. */
@media (max-width:850px) and (orientation:portrait),(max-width:760px) and (min-height:521px),(max-width:539px),(max-height:520px) and (orientation:landscape){
 .round-cue{bottom:calc(var(--deck-height) + var(--deck-bottom) + var(--bottom) + 10px)}
 .screen:has(.round-cue:not([hidden])) .hint{visibility:hidden}
}