/* mobile visual fixes, Oct 2026 — scoped to <=600px */
@media(max-width:600px){
/* shared */
.hp-fab{transition:opacity .2s,transform .15s}
body.mf-nofab .hp-fab{opacity:0;pointer-events:none}
footer a,footer nav a{display:inline-flex;align-items:center;min-height:44px}
/* homepage */
.tel{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
main{padding-bottom:16px}
.grid,.faq details{margin-right:6px}
.faq{padding-bottom:8px}
.co{margin-top:16px}
footer{margin-top:16px;padding:20px 0}
.feat{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.feat .card{padding:14px}
section .feat .card h3{font-size:1rem;line-height:1.2}
.feat .card p{font-size:.85rem;line-height:1.4}
.feat .ic svg{width:26px;height:26px}
#track h2{font-size:1.5rem}
#track .sub{margin-bottom:14px;font-size:.9rem}
#track .tm-card{margin-right:6px}
.tm-card .tm-map{height:280px!important}
.tm-eta{padding:10px 14px}.tm-big{font-size:22px;margin:0 0 6px}
.maplibregl-ctrl-attrib{font-size:9px!important;line-height:1.3;opacity:.75;max-width:70%}
.maplibregl-ctrl-bottom-right{right:0;bottom:0}
/* quote page */
.later-bar{justify-content:space-between!important;gap:24px}
.later-bar #startOver{padding:10px 4px;min-height:44px}
.tabsbar button :is(.sw){display:inline!important;font-size:.72rem}
.tabsbar button:not([aria-selected=true]){flex-direction:column;align-items:center;gap:0;line-height:1.1}
.tabsbar button:not([aria-selected=true]) .sw{color:var(--g)}
.tabsbar .sd{display:none!important}
.tabsbar{overflow:visible;padding-bottom:calc(var(--trkH,2.9em) * .75 - .6em)}
.wxcity{flex-basis:100%}
.wxcity select{flex:1}
.mc-dow{font-size:12px;letter-spacing:0}
.mc-day .tp{font-size:12px}
.mc-day .pr{font-size:12px;letter-spacing:-.03em}
.mc-legend{font-size:12px}
#wxNote{font-size:13px}
.clock-sel{display:block!important;width:100%;min-height:48px;font-size:1.1rem;font-weight:800}
.clock svg#clock,.clock .clock-read{display:none}
.qside .mf-empty dl{display:none}
.qside .mf-empty h3{margin:0}
.qside .mf-empty h3::after{content:" · fills in as you go";font-weight:600;font-size:.85rem;color:var(--g)}
.qside .mf-empty{padding:12px 16px;margin-bottom:12px!important}
body.mf-quote .hp-fab{width:44px;height:44px}
body.mf-quote .hp-fab img{width:30px;height:30px}
}
.clock-sel{display:none}

/* phones: step 1 shows the step bar + full month calendar on one screen (iPhone ~390x660 visible) */
@media (max-width:759px){
 .q-nohero{padding-top:8px}
 .tabsbar{font-size:.78rem;margin-bottom:8px!important;padding-bottom:calc(var(--trkH,2.9em) * .62 - .6em)}
 .tabsbar button{padding:.35em .15em}
 .tabsbar button :is(.sw){font-size:.68rem}
 .ptrack{height:10px;border-width:2px}
 section.card.step[data-step="0"]{padding:12px 10px 14px}
 section.card.step[data-step="0"] h2{font-size:1.15rem;margin:0 0 6px}
 .calwrap{display:flex;flex-direction:column}
 .calwrap .cal-top{order:3;margin:8px 0 0}
 .calwrap .mc-legend{margin-top:6px}
 .calwrap #wxNote{order:4}
 .cal-lbl{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
 .mc-head{margin-bottom:2px}
 .mc-nav{width:34px;height:34px;font-size:1.05rem}
 .mc-title{font-size:1rem}
 .mc-dow{font-size:11px;padding:0}
 .mc-day{min-height:46px;height:46px;padding:2px 1px;gap:0;justify-content:center;border-radius:8px}
 .mc-day .n{font-size:.9rem;line-height:1}
 .mc-day .wx{width:15px;height:15px;margin-top:1px}
 .mc-day .tp{font-size:10.5px;line-height:1.05}
 .mc-day .pr{display:none}
 .mc-day .lu{font-size:9px;line-height:1}
 .mc-day .hol{top:2px;width:6px;height:6px}
}
@media (max-width:759px){
 .mc-day{display:grid;grid-template-columns:auto auto;justify-content:center;align-content:center;column-gap:1px;row-gap:1px}
 .mc-day .n,.mc-day .lu,.mc-day .pr{grid-column:1/-1;justify-self:center}
 .mc-day .wx{width:13px;height:13px;margin:0;align-self:center}
 .mc-day .tp{align-self:center;font-size:10px}
}
/* step 1: heading left, city picker right on the same row */
.when-head{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin-bottom:10px}
.when-head h2{margin:0!important;flex:1 1 auto;min-width:0}
.when-head .wxcity{flex:0 1 auto;flex-basis:auto!important;margin:0;min-width:0;max-width:100%}
.when-head .wxcity select{flex:0 1 auto!important;min-width:0;max-width:100%;width:auto}
@media (max-width:759px){
 .when-head{margin-bottom:6px}
 .when-head .wxc-l{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
 .when-head .wxcity select{min-height:34px;font-size:.82rem;padding:3px 6px;max-width:52vw;text-overflow:ellipsis}
}
@media (max-width:759px){.when-head{row-gap:4px;margin-bottom:4px}.when-head .wxcity select{min-height:30px;padding:2px 6px}section.card.step[data-step="0"]{padding-top:10px}}

/* phones: after a date is picked, show the real clock (SVG + AM/PM), not only the select */
@media (max-width:600px){
 .when-grid[data-picked="1"] .clock svg#clock{display:block!important;width:min(280px,86vw);height:auto;margin:0 auto}
 .when-grid[data-picked="1"] .clock .clock-read{display:flex!important}
 .when-grid[data-picked="1"] .clock-sel{display:none!important}
}

/* phones: quote page edge-to-edge (no side margin; outer card flush) */
@media (max-width:600px){
 body.mf-quote .wrap,body.mf-quote .qgrid,body.mf-quote .qmain{max-width:none;width:100%;padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important;box-sizing:border-box}
 body.mf-quote .hm-top .wrap{padding-left:12px!important;padding-right:12px!important}
 body.mf-quote .qgrid{padding-bottom:24px!important}
 body.mf-quote section.card.step{border-radius:0;border-left:0;border-right:0;box-shadow:none;margin-left:0;margin-right:0;padding-left:12px!important;padding-right:12px!important}
 body.mf-quote .tabsbar{padding-left:12px;padding-right:12px}
 body.mf-quote #out,.mf-quote .date-bar{margin-left:12px;margin-right:12px}
}
/* reechy-fix: step-1 number vs truck; footer clear of the smiley button */
@media(max-width:600px){
.tabsbar button[aria-selected=true] .sn{margin-right:.45em}
footer{padding-bottom:72px!important}
}