/* Phone layout: keep photos in bounded frames and primary actions easy to reach. */
@media(max-width:760px){
 :is(#publicSite,#mechanicApp,#clientPortal) img{max-width:100%;min-width:0;min-height:0}
 :is(#publicSite,#mechanicApp,#clientPortal) :is(input,select,textarea){max-width:100%;font-size:16px}
 :is(#mechanicApp,#clientPortal) :is(.workspace-card,.inventory-section,.owned-tool-copy,.work-item,.vr-verdict){min-width:0;overflow-wrap:anywhere}
 #mechanicApp .shell{padding:22px 16px 80px}
 #mechanicApp .topbar{padding:12px 16px;gap:10px}
 #mechanicApp .workspace-nav{scrollbar-width:none;scroll-padding-inline:16px}
 #mechanicApp .workspace-nav button{min-height:44px}
 #mechanicApp .back-link{min-height:44px;display:inline-flex;align-items:center;margin-bottom:12px}
 #mechanicApp :is(.library-head,.wb-head){gap:14px;margin-bottom:22px}
 #mechanicApp :is(.library-head,.wb-head) h2{font-size:28px;line-height:1.15}
 #mechanicApp .library-head p{font-size:13px;line-height:1.5;margin-top:8px}
 #mechanicApp .library-head>button{min-height:44px}
 #mechanicApp .inventory-section{padding:16px;border-radius:16px}
 #toolLibrarySection .inventory-section-head{margin-bottom:16px}
 #toolLibrarySection .inventory-section-head h3{font-size:21px}
 .tool-catalog-controls{padding:12px;gap:12px;border-radius:12px}
 .tool-catalog-controls input,.tool-catalog-controls select{min-height:46px;font-size:16px;padding:10px}
 #toolCatalogResults{font-size:12px;line-height:1.5}
 #toolLibrarySection .owned-tools-grid:not(.is-table){gap:12px}
 #toolLibrarySection .owned-tool-card{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:start;border-radius:14px;padding:12px;gap:12px}
 #toolLibrarySection .owned-tool-photo{height:100px;min-height:0;max-height:100px;width:88px;min-width:0;border:0;border-radius:10px;overflow:hidden}
 #toolLibrarySection .owned-tool-photo img{display:block;min-width:0;min-height:0;max-width:100%;width:100%;height:100%;object-fit:contain}
 #toolLibrarySection .owned-tool-copy{padding:0;gap:7px}
 #toolLibrarySection .owned-tool-copy>strong{font-size:15px;line-height:1.35}
 #toolLibrarySection .owned-tool-copy>small{font-size:9px;letter-spacing:.06em}
 #toolLibrarySection .owned-tool-copy>p{font-size:12px;-webkit-line-clamp:2}
 #toolLibrarySection .owned-tool-identity{font-size:12px}
 #toolLibrarySection .owned-tool-facts{font-size:11px}
 #toolLibrarySection .owned-tool-meta{flex-wrap:wrap;gap:8px}
 #toolLibrarySection .owned-tool-meta button{min-height:44px;padding:8px 12px}
 #toolLibrarySection .owned-tool-contents{width:100%;font-size:12px}
 #toolLibrarySection .owned-tool-contents summary{min-height:44px;display:flex;align-items:center;gap:8px}
 #toolLibrarySection .tool-shot-credit{display:none}
 #toolLibrarySection .tool-shot-reject{font-size:9px;max-width:88px;padding:5px;bottom:0}
 #toolLibrarySection .owned-tools-grid.is-table{overflow-x:auto;max-width:100%;overscroll-behavior-x:contain}
 #mechanicApp .tfg-photo{height:140px;overflow:hidden}
 #mechanicApp .tfg-photo img{width:100%;height:100%;min-height:0;aspect-ratio:auto;object-fit:contain}
 #mechanicApp .tfg-body{padding:16px}
 #mechanicApp .inv-shot{height:150px;min-height:0;overflow:hidden}
 #mechanicApp .inv-shot img{height:100%;width:100%;object-fit:contain}
 #clientPortal .mg-card-photo{height:140px;min-height:0}
 #clientPortal .mg-card-photo img{height:100%;width:100%;min-height:0;aspect-ratio:auto;object-fit:contain}
 #clientPortal .mg-card-body{padding:16px}
 :is(#mechanicApp #vehicleSection,#clientPortal #mgDetail) .vr-shot{height:170px;min-height:0;max-height:170px;aspect-ratio:auto;overflow:hidden}
 :is(#mechanicApp #vehicleSection,#clientPortal #mgDetail) .vr-shot img{width:100%;height:100%;min-height:0;object-fit:contain}
 :is(#mechanicApp #vehicleSection,#clientPortal #mgDetail) .vr-shot.is-empty{height:120px}
 :is(#mechanicApp #vehicleSection,#clientPortal #mgDetail) .vr-shot.is-empty img{width:64px;height:44px}
 :is(#mechanicApp #vehicleSection,#clientPortal #mgDetail) .vr-shot-drop{font-size:12px;margin-bottom:12px}
 :is(#mechanicApp,#clientPortal) .vr-verdict{padding:20px}
 :is(#mechanicApp,#clientPortal) .vr-name{font-size:26px;line-height:1.15}
 #mechanicApp .attachment-grid,#clientPortal .client-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #mechanicApp .attachment-grid img,#clientPortal .client-photo-grid img{width:100%;height:120px;min-height:0;object-fit:contain;background:#edf2f7}
 #mechanicApp .task-reference-image img{display:block;width:100%;height:auto;max-height:220px;min-height:0;object-fit:contain}
 #mechanicApp .tool-photo-preview{width:100%;max-width:190px;height:140px;min-height:0}
 #mechanicApp .tool-photo-preview img{width:100%;height:100%;object-fit:contain;min-height:0}
 #mechanicApp #jobWorkspace .workspace-head{padding:20px}
 #mechanicApp #jobWorkspace .workspace-head h2{font-size:27px}
 #mechanicApp #jobWorkspace .job-section-nav{top:110px;border-radius:12px}
 #mechanicApp #jobWorkspace .workspace-card{padding:16px}
 #mechanicApp .job-tool-row{gap:8px;flex-wrap:wrap}
 #mechanicApp .job-tool-row>div{min-width:0;flex:1 1 150px}
 #mechanicApp .job-tool-row button{min-height:44px}
 #clientPortal .portal-shell{width:calc(100% - 32px);padding-top:20px;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
 #clientPortal .client-welcome{padding:22px}
 #clientPortal .client-welcome h1{font-size:32px}
 #clientPortal .care-task,#clientPortal .client-job{padding:18px}
 #clientPortal .client-mobile-nav{padding-bottom:env(safe-area-inset-bottom)}
 #publicSite .tf-hero{padding:28px 20px;gap:24px}
 #publicSite .tf-hero h1{font-size:clamp(44px,12vw,66px);line-height:1.02}
 #publicSite .tf-car-art{height:160px;min-height:0}
 #publicSite .tf-car-art img{width:100%;height:100%;object-fit:contain}
 #publicSite :is(.tf-car-shot,.tf-lalso-shot){height:160px;min-height:0;overflow:hidden}
 #publicSite :is(.tf-car-shot,.tf-lalso-shot) img{height:100%;width:100%;object-fit:contain}
 #publicSite .tf-lhero{height:auto;min-height:0;max-height:50svh;aspect-ratio:4/3}
 #publicSite .tf-lhero img{height:100%;width:100%;min-height:0;object-fit:contain}
 #publicSite .tf-car-stage img{max-height:50svh;object-fit:contain}
 #publicSite .tf-sec{padding-block:40px}
 #publicSite .tf-evidence{padding:22px}
}
@media(max-width:374px){
 #toolLibrarySection .owned-tool-card{grid-template-columns:68px minmax(0,1fr);gap:10px;padding:10px}
 #toolLibrarySection .owned-tool-photo{width:68px;height:84px}
 #mechanicApp .shell{padding-inline:12px}
 #mechanicApp .inventory-section{padding:12px}
}
@media(max-width:760px){
 #toolLibrarySection .library-head{display:grid;grid-template-columns:1fr 1fr;text-align:left;align-items:center;gap:12px}
 #toolLibrarySection .library-head>div{grid-column:1/-1}
 #toolLibrarySection .library-head>button{width:100%;margin:0;justify-self:stretch}
 #toolLibrarySection .owned-tool-card{gap:7px 12px}
 #toolLibrarySection .owned-tool-photo{grid-column:1;grid-row:1/5}
 #toolLibrarySection .owned-tool-copy{display:contents}
 #toolLibrarySection .owned-tool-copy>:is(small,strong,.catalog-status,.owned-tool-identity){grid-column:2;margin:0;align-self:start}
 #toolLibrarySection .catalog-status{justify-self:start}
 #toolLibrarySection .owned-tool-copy>:is(p,details,.owned-tool-facts,.owned-tool-meta){grid-column:1/-1}
 #toolLibrarySection .owned-tool-copy>p{min-height:0;margin-top:5px}
 #toolLibrarySection .owned-tool-facts{margin:5px 0;padding-top:10px}
 #toolLibrarySection .owned-tool-meta{padding-top:4px;gap:6px;font-size:10px}
 #toolLibrarySection .owned-tool-contents{margin:0}
 #mechanicApp .inv-shot{height:60px;min-height:0;aspect-ratio:auto}
 #mechanicApp .wm-diagram img,#mechanicApp .wm-saved-photo img{height:auto;max-height:240px;object-fit:contain}
}
/* Keep interactive headers below the iPhone status bar, including installed mode. */
:root{--tf-safe-top:env(safe-area-inset-top,0px);--tf-safe-left:env(safe-area-inset-left,0px);--tf-safe-right:env(safe-area-inset-right,0px)}
.phone-menu-toggle{display:none}
@media(max-width:760px){
 #mechanicApp .topbar{padding:calc(12px + var(--tf-safe-top)) max(16px,var(--tf-safe-right)) 12px max(16px,var(--tf-safe-left));height:auto;min-height:calc(68px + var(--tf-safe-top));gap:10px}
 #mechanicApp .phone-menu-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border:1px solid #53647c;border-radius:10px;background:#233650;color:#fff;font:600 13px Inter,sans-serif;white-space:nowrap}
 #mechanicApp .topbar .workspace-nav{display:none;position:static;order:3;flex:1 0 100%;height:auto;max-height:60dvh;overflow:auto;padding:8px 0 0;margin:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;box-shadow:none;border:0;background:transparent}
 #mechanicApp .topbar.is-menu-open .workspace-nav{display:grid}
 #mechanicApp .topbar .workspace-nav button{width:100%;min-width:0;min-height:48px;height:auto;padding:12px;white-space:normal;justify-content:flex-start;font-size:13px}
 #mechanicApp .topbar .workspace-nav .workspace-nav-icon{display:inline-grid}
 #mechanicApp #jobWorkspace .job-section-nav{top:var(--tf-admin-header-height,68px)}
 #publicSite .tf-nav{height:calc(72px + var(--tf-safe-top));padding-top:var(--tf-safe-top);padding-left:max(16px,var(--tf-safe-left));padding-right:max(16px,var(--tf-safe-right))}
 #publicSite .tf-nav-menu{top:100%;max-height:calc(100dvh - 72px - var(--tf-safe-top));overflow-y:auto}
 #clientPortal .portal-nav{height:calc(74px + var(--tf-safe-top));padding-top:calc(14px + var(--tf-safe-top));padding-left:max(16px,var(--tf-safe-left));padding-right:max(16px,var(--tf-safe-right))}
 .diagnostic{padding-top:max(12px,var(--tf-safe-top))!important;padding-left:var(--tf-safe-left);padding-right:var(--tf-safe-right)}
 .diagnostic :is(.tf-sheet,.tfa-sheet,.diag-card){max-height:calc(100dvh - var(--tf-safe-top) - 12px)}
 html{scroll-padding-top:calc(var(--tf-admin-header-height,74px) + 12px)}
}