/* Technician app: installable PWA with an app shell (top app bar, bottom tab bar), phone width on larger screens */
html[data-area="technician"]{background:#D5DFEA}
body.tech{background:var(--hm-bg);max-width:520px;margin:0 auto;min-height:100vh;min-height:100dvh;padding-bottom:calc(72px + env(safe-area-inset-bottom));-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
/* larger screens: a phone frame that scrolls inside itself, so its top and bottom edges and the toasts stay within the app */
@media (min-width:560px) and (min-height:600px){
  html[data-area="technician"]{overflow:hidden}
  body.tech{display:flex;flex-direction:column;height:calc(100vh - 48px);min-height:0;margin:24px auto;padding-bottom:0;border-radius:28px;overflow-y:auto;scrollbar-width:none;box-shadow:0 0 0 1px rgba(3,52,99,.06),0 24px 70px -24px rgba(3,52,99,.4)}
  body.tech::-webkit-scrollbar{display:none}
  body.tech>*{flex-shrink:0}
  body.tech .t-main{flex:1}
  body.tech .t-tabbar{position:sticky;margin:0}
  .tech .toast-region{top:92px;left:0;right:0;margin:0 auto;width:min(380px,calc(100% - 32px))}
}
.t-header{background:var(--hm-navy);color:#fff;padding:calc(env(safe-area-inset-top) + 8px) 12px 8px;position:sticky;top:0;z-index:60;box-shadow:0 2px 14px rgba(3,52,99,.22)}
.t-header .t-row{display:flex;align-items:center;gap:10px;min-height:44px}
.t-header h1{color:#fff;font-size:1.05rem;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-header .t-back{color:#fff;width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.12);border:0;cursor:pointer}
.t-header .t-logo{background:#fff;border-radius:10px;padding:4px;width:36px;height:36px;flex:none;display:grid;place-items:center}
.t-header .t-logo img{width:26px}
.t-main{padding:14px}
.t-tabbar{position:fixed;bottom:0;left:0;right:0;max-width:520px;margin:0 auto;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--hm-border);display:grid;grid-template-columns:repeat(4,1fr);z-index:80;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.t-tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px 0;font-size:11px;font-weight:700;color:var(--hm-text-2)}
.t-tabbar a .ic{width:22px;height:22px;box-sizing:content-box;padding:4px 18px;border-radius:999px;transition:background .2s}
.t-tabbar a.active{color:var(--hm-primary)}
.t-tabbar a.active .ic{background:var(--hm-primary-soft)}
.t-tabbar a:hover{text-decoration:none}
/* sign-in screen: app splash header instead of a page header, install card */
.t-hero{background:linear-gradient(160deg,var(--hm-navy),#0A4F93);color:#fff;text-align:center;padding:calc(env(safe-area-inset-top) + 34px) 20px 58px;border-radius:0 0 28px 28px}
.t-hero img{display:block;margin:0 auto;width:76px;height:76px;border-radius:20px;box-shadow:0 10px 26px -8px rgba(0,0,0,.45)}
.t-hero h1{color:#fff;font-size:1.45rem;margin:16px 0 4px}
.t-hero p{color:#C9D8EA;margin:0}
.t-auth .t-main{margin-top:-40px}
.t-install{display:flex;gap:12px;align-items:flex-start}
.t-install img{width:44px;height:44px;border-radius:12px;border:1px solid var(--hm-border);flex:none}
.t-install h2{margin-bottom:4px}
.t-install p{font-size:var(--hm-fs-sm);color:var(--hm-text-2);margin:0}
@media (display-mode:standalone){.t-browser-only{display:none!important}}
.job-card{display:block;background:#fff;border:1px solid var(--hm-border);border-radius:var(--r-lg);padding:16px;margin-bottom:12px;color:inherit;border-left:5px solid var(--hm-primary)}
.job-card:hover{text-decoration:none;border-color:var(--hm-border-strong)}
.job-card.st-OnTheWay{border-left-color:var(--hm-accent)}
.job-card.st-InProgress{border-left-color:#6440B8}
.job-card.st-Completed{border-left-color:var(--hm-secondary)}
.job-card .jc-time{font-family:var(--hm-font-display);font-weight:800;font-size:1.3rem;color:var(--hm-navy)}
.job-card .jc-line{display:flex;gap:8px;align-items:center;font-size:var(--hm-fs-sm);color:var(--hm-text-2);margin-top:6px}
.big-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.big-actions .btn{height:56px;font-size:var(--hm-fs-md);border-radius:var(--r-lg)}
.big-actions .full{grid-column:span 2}
.tech .btn{min-height:48px}
.tech .btn-sm{min-height:40px}
.tech .input,.tech .select{height:50px;font-size:16px}
.t-section{background:#fff;border:1px solid var(--hm-border);border-radius:var(--r-lg);padding:16px;margin-bottom:14px}
.t-section h2{font-size:var(--hm-fs-md);margin-bottom:10px}
.t-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.t-stats div{background:#fff;border:1px solid var(--hm-border);border-radius:var(--r-lg);padding:12px;text-align:center}
.t-stats b{display:block;font-family:var(--hm-font-display);font-size:1.5rem;color:var(--hm-navy)}
.t-stats span{font-size:12px;color:var(--hm-text-2);font-weight:600}
.map-box{height:180px;border-radius:var(--r-lg);background:repeating-linear-gradient(45deg,#E6EEF7 0 12px,#EEF3F9 12px 24px);display:grid;place-items:center;position:relative;border:1px solid var(--hm-border);margin-bottom:10px}
.map-box .pin{width:44px;height:44px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--hm-error);display:grid;place-items:center}
.map-box .pin .ic{transform:rotate(45deg);color:#fff}