/* Customer portal: clear hierarchy, comfortable controls, and readable status. */
:root{--muted:#566277}
button,input,select,textarea{font-family:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #1e66f5;outline-offset:3px}
button:disabled{cursor:wait;opacity:.65}
header{height:auto;min-height:72px;gap:12px}
header>div{min-width:0}header strong{font-size:15px}
#accountBtn{max-width:42%;overflow-wrap:anywhere}
#customer .row{align-items:flex-start;flex-wrap:wrap}
#customer .row>div{min-width:0;flex:1}
#customerBusiness{overflow-wrap:break-word;word-break:normal;line-height:1.2}
#customer .tabs{margin:20px 0 24px;padding:5px;border:1px solid #dce3ee;background:#e7edf6}
#customer .tabs button{font:600 14px/1.3 system-ui;min-height:48px;cursor:pointer;padding:12px 8px}
#customer .tabs button.active{box-shadow:0 2px 5px #10243e12;color:#164fbf}
#customer .card,#customer .job,#auth .card,#guest .card{padding:24px;border-radius:16px;box-shadow:0 3px 14px #10243e04}
#customer h3,#auth h3,#guest h3{font-size:20px;line-height:1.3;margin-top:0}
#customer label,#auth label,#guest label{font-size:14px;font-weight:600;color:#37465c;margin:20px 0}
#customer input,#customer select,#customer textarea,#auth input,#guest input{font-size:16px;min-height:48px;color:#162033;background:#fff}
#customer small,#auth small,#guest small{font-size:14px;line-height:1.5}
#customer .primary,#auth .primary,#guest .primary{font-weight:650}
#customer .ghost,#auth .link,#guest .back{min-height:44px}
#customer .status-track{gap:6px;margin-bottom:24px}
#customer .status-step small{font-size:12px;line-height:1.35;margin-top:8px}
#customer .status-step span{width:28px;height:28px}
#customer .status-step:after{top:13px}
#customer .appointment-notice:last-child{border-bottom:0;padding-bottom:0}
#customerNotifications summary{min-height:44px;display:list-item;padding-block:10px}
#customerTechnicianProfile{margin-top:24px}
#bookingForm>label,#bookingForm>#newVehicleFields{margin-top:22px}
#auth .actions,#guest .actions{flex-wrap:wrap}
.workload-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}
.workload-grid small,.workload-grid strong{display:block}
.workload-grid small{font-size:14px;color:#566277}
.workload-grid strong{font-size:25px;color:#10243e;overflow-wrap:anywhere}
.job-filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.job-filters button{min-height:44px;border:1px solid #c8d4e5;border-radius:9px;padding:10px 14px;background:white;color:#37465c;font-size:14px;cursor:pointer}
.job-filters button[aria-pressed=true]{background:#10243e;color:white;border-color:#10243e}
#owner label{font-size:14px}#owner input,#owner select,#owner textarea{font-size:16px}
#owner .tabs button{min-height:44px;font-size:14px;cursor:pointer}
@media(max-width:560px){.workload-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
  header{flex-wrap:wrap;align-items:flex-start;gap:10px;padding-block:14px}
  header>div{flex:0 0 100%;width:100%}
  header strong{font-size:1rem;line-height:1.35;letter-spacing:.045em;word-break:normal;overflow-wrap:break-word}
  header small{margin-top:3px;line-height:1.4}
  #accountBtn{max-width:100%;min-height:44px;text-align:left;overflow-wrap:break-word}
  #customer>.row>div{flex:0 0 100%;width:100%}
  #customerBusiness{font-size:1.75rem;margin-block:8px 4px}
  #customer>.row>.ghost{max-width:100%;white-space:normal}
}
@media(max-width:480px){
  #customer .card,#customer .job,#auth .card,#guest .card{padding:18px}
  #customer .status-track:not(.special){display:grid;grid-template-columns:1fr;gap:10px}
  #customer .status-step{display:flex;align-items:center;gap:10px;text-align:left}
  #customer .status-step span{margin:0;flex-shrink:0}
  #customer .status-step small{margin:0;font-size:14px}
  #customer .status-step:after{display:none}
  #customer .tabs button{padding-inline:5px}
}

header .brand{display:flex;align-items:center;gap:12px}header .brand-logo{display:block;width:44px;height:44px;flex:0 0 44px;object-fit:contain}header .brand-copy{min-width:0}header .brand-copy strong{overflow-wrap:break-word}

.signup-feedback{font-size:16px;line-height:1.5;padding:14px;border:1px solid #9bb9d9;border-radius:8px;background:#edf5ff;color:#143657;overflow-wrap:anywhere}.signup-feedback.signup-error{background:#fff3e8;border-color:#b76a20;color:#703500}.signup-feedback:focus{outline:2px solid #2563eb;outline-offset:3px}.signup-feedback[hidden]{display:none}
