/* Shared screen sizing keeps forms, records and editors on the same scale. */
.customer-review,.customer-review-overview,.customer-review-confirmation { display:grid; grid-template-columns:minmax(0,1fr); min-width:0; gap:12px; align-content:start; }
.customer-summary { overflow:hidden; }
.customer-summary-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px; border-bottom:1px solid var(--line); }
.customer-summary-head h2 { margin:0 0 4px; font-size:18px; }
.customer-summary-head p { margin:0; color:var(--muted); font-size:12px; }
.customer-vehicle-thumb { width:76px; height:56px; object-fit:cover; border-radius:8px; flex:0 0 auto; }
.customer-summary-section { padding:10px 16px 14px; }
.customer-summary-section + .customer-summary-section { border-top:1px solid var(--line); }
.customer-summary-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.customer-summary-heading h3 { margin:0; font-size:14px; }
.customer-summary-edit { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:6px; border-radius:7px; flex:0 0 auto; text-decoration:none; }
.customer-summary-edit .ui-icon { width:16px; height:16px; }
.customer-summary-heading h3 { margin-right:auto; }
.signing-row { display:flex; align-items:flex-end; gap:10px; min-width:0; }
.signer-role-field { flex:1 1 110px; }
.signer-type-field { flex:0 0 auto; }
.signing-row .choice-row { flex-wrap:nowrap; gap:5px; }
.signing-row .choice span { padding:0 9px; }
.signing-row .label { font-size:12px; }
.signing-row .hint-inline { font-size:10px; }
.customer-requests-section.is-empty,.customer-damage.is-empty { display:flex; align-items:center; gap:8px; padding:6px 14px; }
.customer-requests-section.is-empty .customer-summary-heading,.customer-damage.is-empty .customer-summary-heading { display:contents; }
.customer-requests-section.is-empty h3,.customer-damage.is-empty h3 { font-size:13px; margin:0; }
.customer-requests-section.is-empty .customer-requests,.customer-damage.is-empty .customer-damage-intro { margin:0; font-size:12px; color:var(--muted); flex:1; }
.customer-requests-section.is-empty .customer-summary-edit,.customer-damage.is-empty .customer-summary-edit { order:3; }
.customer-damage.is-empty .customer-damage-count { display:none; }
.customer-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; margin:0; }
.customer-fact { min-width:0; }
.customer-fact dt,.customer-agreed-work > span { color:var(--muted); font-size:12px; line-height:1.4; margin-bottom:3px; }
.customer-fact dd { margin:0; font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.customer-agreed-work { display:grid; gap:2px; margin-top:14px; padding:10px 12px; background:var(--steel-soft); border-radius:8px; }
.customer-agreed-work strong { font-size:14px; overflow-wrap:anywhere; }
.customer-agreed-work p { margin:3px 0 0; white-space:pre-wrap; font-size:13px; overflow-wrap:anywhere; }
.customer-work-label { font-weight:600; }
.customer-work-extras { border-top:1px solid var(--line); margin-top:5px; padding-top:5px; }
.damage-photo-enlarge { display:block; padding:0; border:0; border-radius:8px; background:transparent; cursor:zoom-in; width:100%; }
.damage-photo-enlarge:hover,.damage-photo-enlarge:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.damage-image-modal { width:min(1000px,100%); }
.damage-image-modal .modal-body { padding:10px; }
.damage-image-modal .modal-body img { display:block; width:100%; max-height:75vh; max-height:75dvh; object-fit:contain; }
.customer-condition-facts { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 10px; }
.customer-condition-facts dt { font-size:11px; }
.customer-condition-facts dd { font-size:13px; }
.customer-requests { margin:0; font-size:13px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.customer-damage { padding:16px 16px 6px; }
.customer-damage-count { font-size:12px; font-weight:600; padding:4px 8px; background:var(--steel-soft); border-radius:6px; }
.customer-damage-intro { margin:0 0 10px; color:var(--muted); font-size:12px; }
.customer-damage-overview { list-style:none; padding:0; margin:0 0 10px; }
.customer-damage-overview li { display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-size:13px; border-bottom:1px solid var(--line); }
.customer-damage-overview strong { font-weight:600; overflow-wrap:anywhere; }
.customer-damage-overview li > span { color:var(--muted); flex:0 0 auto; }
.customer-damage-details { min-width:0; max-width:100%; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.customer-damage-details > summary { display:flex; justify-content:space-between; gap:8px; align-items:center; min-height:44px; padding:10px; font-size:13px; font-weight:600; list-style:none; cursor:pointer; }
.customer-damage-details > summary::-webkit-details-marker { display:none; }
.customer-damage-details > summary > span:last-child { transition:transform .15s; }
.customer-damage-details[open] > summary > span:last-child { transform:rotate(45deg); }
.customer-damage-details[open] > summary { border-bottom:1px solid var(--line); }
.customer-damage-details .review-damage { min-width:0; grid-template-columns:minmax(0,1fr); padding:12px; }
.customer-inspection { display:flex; gap:12px; padding:16px; border:1px solid #b5bdc2; border-left:4px solid var(--ink); border-radius:10px; background:var(--steel-soft); }
.inspection-mark { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border-radius:50%; color:white; background:var(--ink); font-size:16px; font-weight:700; }
.customer-inspection h3 { margin:0 0 6px; font-size:14px; }
.customer-inspection p { margin:0; line-height:1.55; font-size:13px; }
.customer-signoff > .section-head { display:block; padding:16px; }
.customer-signoff .section-head h3 { margin:0; }
.customer-signoff .section-head p { margin:6px 0 0; }
.customer-signoff .terms-agreement { display:flex; align-items:center; gap:8px; padding:12px; border:1px solid var(--line); border-radius:9px; background:var(--soft); }
.customer-signoff .checkline { align-items:flex-start; line-height:1.55; flex:1; min-width:0; cursor:pointer; }
.agreement-read { flex:0 0 auto; display:inline-flex; align-items:center; min-height:28px; padding:2px 4px; }
.record-agreement-version { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
.customer-signoff .checkline input { margin-top:3px; }
.customer-signoff .text-link { font-size:inherit; text-align:left; }
.customer-signoff .signer-grid { margin-top:16px; }
.customer-signoff-divider { width:100%; height:0; margin:4px 0; border:0; border-top:1px solid #929ba1; }
.agreement-label-mobile { display:none; }
@media screen and (max-width:640px) {
  .agreement-label-full { display:none; }
  .agreement-label-mobile { display:inline; }
  .customer-signoff > .section-head { padding:16px 14px; }
}
@media screen and (min-width:901px) {
  .customer-facts { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .customer-condition-facts { grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media screen and (max-width:900px) {
  .customer-signoff .signer-grid { grid-template-columns:1fr; }
  .customer-signoff .signer-grid .span-2 { grid-column:auto; }
}
@media screen and (max-width:640px) {
  .customer-summary-head,.customer-summary-section,.customer-damage { padding-left:14px; padding-right:14px; }
  .customer-inspection { padding:14px 12px; gap:9px; }
}
.job-selection { border:0; padding:0; margin:0; min-width:0; }
.job-selection legend { padding:0; }
.job-selection > .hint { margin:0 0 8px; }
.job-options { display:flex; flex-wrap:wrap; gap:8px; }
.job-option { display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:9px; cursor:pointer; font-size:13px; color:var(--ink); }
.job-option input { width:16px; height:16px; margin:0; accent-color:var(--ink); flex:0 0 auto; }
.job-option:has(input:checked) { background:var(--steel-soft); border-color:var(--muted); }
.job-option:has(input:focus-visible) { outline:2px solid var(--ink); outline-offset:2px; }
@media screen and (min-width:700px) and (max-width:1100px) {
  .job-options { gap:6px; }
  .job-option { gap:6px; padding:8px; font-size:12px; white-space:nowrap; }
}
@media (hover:hover) { .job-option:hover { border-color:var(--accent); background:var(--accent-soft); } }
@media screen {
  :root { --section-pad:clamp(14px,2vw,20px); --radius:14px; --page-title-size:28px; --page-eyebrow-size:11px; }
  body { font-size:14px; line-height:1.45; }
  .main { padding:clamp(20px,2.4vw,32px); }
  .page-head { gap:16px; margin-bottom:18px; }
  .page-head > div:first-child { min-width:0; }
  h1,.form-compact-head h1,.login-card h1 { font-size:var(--page-title-size); line-height:1.2; letter-spacing:-.55px; margin-bottom:6px; overflow-wrap:anywhere; }
  h2 { font-size:18px; }
  h3 { font-size:15px; }
  .eyebrow,.form-compact-head .eyebrow { font-size:var(--page-eyebrow-size); line-height:1.4; letter-spacing:.08em; margin-bottom:6px; }
  .page-sub { font-size:13px; line-height:1.45; overflow-wrap:anywhere; }
  .button { min-height:44px; font-size:13px; padding:0 14px; gap:8px; }
  .button-small { min-height:40px; font-size:12px; padding:0 11px; }
  .button:disabled { opacity:.55; cursor:wait; }
  .ui-icon { width:20px; height:20px; flex:0 0 auto; vertical-align:middle; }
  .nav-icon { display:grid; place-items:center; flex:0 0 20px; }
  .nav-icon .ui-icon { width:18px; height:18px; }
  .topbar { height:68px; padding:0 24px; }
  .app-body { min-height:calc(100dvh - 68px); grid-template-columns:210px minmax(0,1fr); }
  .sidebar { padding:24px 14px 12px; }
  .user-role { display:block; font-size:11px; color:var(--muted); text-transform:capitalize; }
  .user-pill,.user-name { min-width:0; }
  .avatar { flex:0 0 auto; }
  .metrics { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
  .metric-card { padding:14px 16px; gap:10px; min-width:0; }
  .metric-card:nth-child(3) { grid-column:auto; }
  .metric-icon { width:36px; height:36px; flex:0 0 36px; border-radius:9px; }
  .metric-number { font-size:23px; line-height:1.15; }
  .metric-label { font-size:12px; line-height:1.3; }
  .toolbar { flex-wrap:wrap; gap:10px; padding:12px 14px; }
  .segmented { min-width:0; max-width:100%; }
  .segment { min-height:40px; padding:4px 11px; font-size:12px; line-height:1.25; }
  .searchbox { flex:1 1 250px; min-width:0; min-height:44px; }
  .searchbox > span { display:flex; }
  .searchbox .ui-icon { width:16px; height:16px; }
  .vehicle-thumb { background:var(--steel-soft); flex:0 0 auto; }
  .vehicle-name { font-size:13px; line-height:1.35; overflow-wrap:anywhere; }
  .vehicle-reg { font-size:12px; letter-spacing:0; line-height:1.35; overflow-wrap:anywhere; }
  th { font-size:10px; }
  .record-card { min-width:0; text-align:left; color:var(--ink); font:inherit; grid-template-columns:44px minmax(0,1fr) auto; gap:10px; padding:12px; }
  .record-card > div { min-width:0; }
  .record-card .record-date { font-size:11px; line-height:1.35; }
  .pill { font-size:11px; padding:5px 8px; }
  .form-wrap { max-width:960px; }
  .section-head { padding:16px var(--section-pad) 12px; }
  .section-title-row h3 { margin:0; }
  .section-head p { font-size:12px; line-height:1.45; }
  .section-body,.form-step-panel > .section-body { padding:var(--section-pad); }
  .form-grid { gap:14px 16px; }
  .label { font-size:13px; line-height:1.35; margin-bottom:6px; }
  .input,.select,.textarea { min-height:44px; font-size:14px; padding:10px 12px; border-color:var(--line); }
  .textarea.compact-textarea { min-height:76px; }
  .textarea.request-textarea { min-height:120px; }
  .hint,.hint-inline,.admin-only-note { font-size:11px; line-height:1.45; color:var(--muted); }
  .banner,.notice { font-size:12px; line-height:1.5; padding:12px 14px; }
  .coating-row { font-size:13px; min-height:54px; }
  .coating-row .choice span,.record-editor-modal .coating-row .choice span { min-height:44px; min-width:58px; font-size:12px; }
  .choice span { min-height:44px; font-size:12px; }
  .damage-summary-copy strong,.review-card > summary strong,.record-section-copy strong,.editor-section summary strong { font-size:13px; }
  .damage-summary-copy small,.review-card > summary small,.record-section-copy small,.editor-section summary small { font-size:12px; }
  .damage-summary-main { min-height:56px; }
  .damage-remove { min-width:44px; }
  .damage-section-head p,.empty-damage,.dropzone small { font-size:12px; }
  .dropzone { min-height:132px; }
  .dropzone strong { font-size:13px; }
  .review-row,.review-damage,.review-notes,.record-note p,.record-defect-copy p,.record-empty,.timeline-body { font-size:13px; }
  .review-expand,.record-section-toggle { font-size:11px; }
  .record-summary-main > strong { font-size:14px; }
  .record-summary-meta,.record-summary-status,.record-summary-signoff > span:last-child { font-size:12px; }
  .record-fact-label,.record-note-label,.timeline-meta,.editor-record-label,.audit-kind,.audit-values small,.audit-photo-pair small,.coating-unrecorded { font-size:11px; }
  .record-fact-value,.record-summary-signoff strong,.record-defect-heading strong,.timeline-title { font-size:13px; }
  .coating-fact { font-size:12px; }
  .coating-value { font-size:11px; }
  .record-section > summary,.review-card > summary,.editor-section > summary { min-height:58px; }
  .record-section-body,.review-card-body { padding:4px 14px 14px; }
  .record-defect-heading > span:first-child,.staff-only-label { font-size:10px; }
  .record-notes-grid { gap:10px; }
  .checkline { font-size:13px; min-height:32px; align-items:center; }
  .signature-actions { font-size:12px; }
  .signature-actions .text-link { min-height:40px; padding:6px; }
  .settings-card { padding:var(--section-pad); }
  .settings-card h2 { font-size:17px; }
  .settings-card > p { font-size:13px; margin-bottom:14px; }
  .user-row { flex-wrap:wrap; gap:10px; }
  .user-ident { min-width:0; }
  .user-ident strong { overflow-wrap:anywhere; font-size:13px; }
  .user-ident small { font-size:12px; }
  .user-role-select { width:104px; min-height:40px; padding:8px; font-size:13px; }
  .archive-months { max-width:108px; }
  .modal-head { padding:14px var(--section-pad); gap:12px; }
  .modal-head h2 { font-size:17px; overflow-wrap:anywhere; }
  .modal-body { padding:var(--section-pad); }
  .modal-foot { padding:12px var(--section-pad); flex-wrap:wrap; }
  .editor-damage-open strong { font-size:13px; }
  .editor-damage-open small,.editor-damage-open > span:last-child { font-size:12px; }
  .login-card { padding:28px; border-color:var(--line); }
  .login-card .brand { margin-bottom:24px; }
  .review-card[open] .review-expand { color:var(--ink); }
}
@media screen and (max-width:1100px) {
  .toolbar { align-items:stretch; }
  .table-wrap { display:none; }
  .mobile-records { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr)); padding:12px; gap:10px; }
  .record-card { display:grid; border:1px solid var(--line); border-radius:11px; background:#fff; }
  .record-card .vehicle-thumb { width:44px; height:40px; }
  .record-card .record-date { grid-column:2 / -1; margin-top:-4px; color:var(--muted); }
  .record-card .pill { grid-column:3; grid-row:1; }
  .settings-grid { grid-template-columns:1fr; }
}
@media screen and (min-width:641px) and (max-width:900px) {
  .app-body { grid-template-columns:184px minmax(0,1fr); }
  .main { padding:20px 16px; }
  .sidebar { padding:22px 10px 12px; }
  .nav-item { padding:0 10px; gap:9px; }
  .metric-card { padding:12px; gap:8px; }
  .metric-icon { width:30px; height:30px; flex-basis:30px; }
  .metric-label { font-size:11px; }
  .progress-step { white-space:normal; line-height:1.25; }
  .step-dot { flex:0 0 25px; }
}
@media screen and (max-width:1024px) {
  .input,.select,.textarea,.searchbox input,.record-editor-modal .input[type="file"] { font-size:16px; }
  .input[type="file"] { overflow:hidden; }
  .button-small,.segment { min-height:44px; }
  .form-progress { gap:3px; padding:4px; }
}
@media screen and (max-width:640px) {
  .topbar { height:64px; padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left)); gap:8px; }
  .app-body { display:block; min-height:calc(100dvh - 64px); }
  .main { padding:18px max(14px,env(safe-area-inset-right)) calc(88px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); }
  :root { --page-title-size:24px; }
  .page-head { margin-bottom:16px; gap:12px; }
  .page-head .button-row { gap:8px; }
  .page-head .button-row .button { min-width:0; flex:1 1 auto; }
  .metrics { gap:8px; }
  .metric-card { display:block; padding:11px 10px; }
  .metric-icon { display:none; }
  .metric-label { font-size:11px; margin-top:4px; }
  .metric-number { font-size:22px; }
  .segmented { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); overflow:visible; }
  .segment { padding:4px; font-size:11px; }
  .searchbox { flex:none; }
  .searchbox input { font-size:16px; min-width:0; }
  .toolbar { padding:10px; gap:9px; }
  .mobile-records { grid-template-columns:1fr; padding:10px; }
  .form-compact-head > .button { padding:0 10px; }
  .progress-step { min-height:48px; font-size:10px; }
  .form-progress { margin-bottom:10px; }
  .form-grid { gap:14px; }
  .section-head { padding:14px 14px 11px; }
  .section-body,.form-step-panel > .section-body { padding:14px; }
  .section-head p { margin:5px 0 0; }
  .coating-list { padding:2px 10px; }
  .coating-row { font-size:12px; }
  .form-actions .button { font-size:12px; padding:0 7px; }
  .record-section > summary,.review-card > summary { padding:10px 12px; }
  .record-section-copy small { line-height:1.4; }
  .record-summary { padding:12px; }
  .record-summary-signoff { gap:5px 8px; }
  .record-fact { min-height:50px; }
  .record-fact-value { font-size:13px; }
  .coating-fact { font-size:12px; }
  .record-note-label { letter-spacing:.025em; }
  .mobile-nav { padding-top:5px; }
  .mobile-nav .nav-item { min-height:48px; font-size:11px; justify-content:center; padding:4px; gap:3px; }
  .mobile-nav .nav-item.active::before { display:none; }
  .modal-backdrop { padding:10px; }
  .modal { max-height:calc(100dvh - 20px); }
  .record-editor-modal { max-height:calc(100dvh - 20px); }
  .modal-foot .button { min-width:0; white-space:normal; text-align:center; }
  .login-page { padding:18px; }
  .login-card { padding:24px 20px; }
  .login-card .brand { margin-bottom:22px; }
  .user-role { display:none; }
}
@media screen and (max-width:390px) {
  .topbar .brand-logo { width:124px; }
  .topbar-right { gap:8px; }
  .user-pill .user-name { display:none; }
  .topbar-right .button { min-height:44px; font-size:12px; padding:0 10px; }
  .form-actions .button { font-size:11px; padding:0 4px; }
  .record-card { grid-template-columns:36px minmax(0,1fr) auto; gap:8px; padding:10px; }
  .record-card .vehicle-thumb { width:36px; height:36px; }
  .record-card .pill { font-size:10px; }
  .vehicle-name { font-size:13px; }
}

/* Safe areas and compact utility controls. */
@media screen {
  .page-head { flex-wrap:wrap; }
  .form-compact-head > .text-link { min-height:44px; flex:0 0 auto; padding:0 4px; font-size:13px; }
  .record-section-toggle::after { content:""; width:6px; height:6px; margin:0 3px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
  .record-section[open] .record-section-toggle::after { transform:rotate(225deg); }
  .editor-chevron .ui-icon { width:16px; height:16px; }
  .modal-backdrop { padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
  .modal { max-height:min(88dvh,820px,calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))); }
  .record-editor-modal { max-height:min(92dvh,860px,calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))); }
  .terms-modal { height:min(90dvh,1000px); max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom))); }
  .demo-link { min-height:44px; font-size:12px; text-align:left; }
  .brand-sub { font-size:13px; }
  .sidebar-bottom { padding:12px 4px 4px; }
  .sidebar-brand-line { flex-wrap:nowrap; gap:4px; }
}
@media screen and (hover:none) and (pointer:coarse) {
  .input,.select,.textarea,.searchbox input,.record-editor-modal .input[type="file"] { font-size:16px; }
  .button-small,.segment { min-height:44px; }
}
@media screen and (max-width:640px) {
  .topbar { height:calc(64px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); }
  .app-body { min-height:calc(100dvh - 64px - env(safe-area-inset-top)); }
  .toast { bottom:calc(82px + env(safe-area-inset-bottom)); }
  .modal,.record-editor-modal { max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom))); }
  .terms-modal { height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom))); }
}
/* Compact iPad workspace. Content may grow naturally for long notes or opened photos. */
@media screen and (min-width:641px) and (max-width:1180px) {
  :root { --section-pad:12px; --page-title-size:24px; }
  body { font-size:13px; }
  .topbar { height:60px; padding:0 18px; }
  .app-body { grid-template-columns:152px minmax(0,1fr); min-height:calc(100dvh - 60px); }
  .main { padding:12px; }
  .sidebar { padding:18px 8px 10px; }
  .nav-item { padding:0 8px; gap:6px; font-size:12px; }
  .nav-icon { flex-basis:16px; }
  .nav-icon .ui-icon { width:16px; height:16px; }
  .sidebar-brand-line { flex-wrap:nowrap; gap:3px; }
  .sidebar-brand-line strong { font-size:10px; }
  .sidebar-brand-line span { font-size:9px; }
  .sidebar-bottom { font-size:10px; padding:8px 2px 0; }
  .button,.button-small,.segment { min-height:40px; font-size:12px; }
  .input,.select,.textarea,.searchbox input,.record-editor-modal .input[type="file"] { min-height:40px; padding:8px 10px; font-size:14px; }
  .label { font-size:12px; margin-bottom:4px; }
  .section-head { padding:12px; }
  .section-body { padding:12px; }
  .form-grid { gap:10px 12px; }
  .review-step-wrap .form-compact-head { margin-bottom:4px; }
  .review-step-wrap .form-compact-head .eyebrow { display:none; }
  .review-step-wrap .form-compact-head h1 { margin:0; }
  .review-step-wrap .form-progress { margin-bottom:4px; padding:3px; }
  .customer-review,.customer-review-overview,.customer-review-confirmation { gap:8px; }
  .customer-review-confirmation { gap:4px; }
  .customer-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .customer-summary-head { grid-column:1 / -1; padding:3px 10px; min-height:32px; }
  .customer-summary-head h2,.customer-signoff > .section-head h3 { font-size:14px; line-height:1.3; margin:0; }
  .customer-summary-head p { display:none; }
  .customer-vehicle-thumb { width:44px; height:32px; }
  .customer-summary-section { padding:4px 10px 6px; }
  .customer-summary-section:nth-of-type(3) { border-top:0; border-left:1px solid var(--line); }
  .customer-summary-heading { gap:4px; margin-bottom:4px; min-height:28px; }
  .customer-summary-heading h3 { font-size:12px; }
  .customer-summary-edit { width:28px; height:28px; padding:5px; }
  .customer-summary-edit .ui-icon { width:15px; height:15px; }
  .customer-facts,.customer-condition-facts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 8px; }
  .customer-fact dt,.customer-agreed-work > span { font-size:10px; margin-bottom:1px; }
  .customer-fact dd,.customer-agreed-work strong { font-size:12px; line-height:1.3; }
  .customer-agreed-work { margin-top:6px; padding:5px 7px; gap:1px; }
  .customer-agreed-work p { font-size:11px; margin-top:1px; line-height:1.35; }
  .customer-requests-section { grid-column:1 / -1; }
  .customer-requests { font-size:12px; line-height:1.35; }
  .customer-requests-section.is-empty,.customer-damage.is-empty { padding:4px 10px; min-height:38px; }
  .customer-requests-section.is-empty h3,.customer-damage.is-empty h3 { font-size:12px; }
  .customer-damage { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; padding:5px 8px; gap:4px; }
  .customer-damage > .customer-summary-heading { margin:0; }
  .customer-damage > .customer-damage-intro,.customer-damage > .customer-damage-overview,.customer-damage > .hint { display:none; }
  .customer-damage.is-empty > .customer-damage-intro { display:block; }
  .customer-damage-count { padding:3px 5px; font-size:10px; white-space:nowrap; }
  .customer-damage-details > summary { min-height:32px; padding:6px 8px; font-size:11px; }
  .customer-damage-details[open] { grid-column:1 / -1; grid-row:2; }
  .customer-inspection { gap:8px; padding:8px 10px; }
  .inspection-mark { flex-basis:22px; width:22px; height:22px; font-size:13px; }
  .customer-inspection h3 { font-size:12px; margin-bottom:3px; }
  .customer-inspection p { font-size:11px; line-height:1.4; }
  .customer-signoff > .section-head { display:flex; align-items:center; min-height:32px; padding:3px 10px; }
  .customer-signoff > .section-head p { display:none; }
  .customer-signoff > .section-body { padding:3px 10px; }
  .customer-signoff .terms-agreement { padding:6px 8px; }
  .customer-signoff .checkline { font-size:12px; line-height:1.4; min-height:20px; gap:8px; }
  .customer-signoff .checkline input { margin-top:0; }
  .customer-signoff .agreement-read { min-height:24px; font-size:11px; }
  .customer-signoff .signer-grid { grid-template-columns:minmax(110px,.85fr) minmax(0,1.7fr); gap:6px 10px; margin-top:8px; }
  .customer-signoff .signer-grid .signer-signature-field { grid-column:1 / -1; }
  .customer-signoff .label { font-size:11px; }
  .customer-signoff .signing-row { gap:8px; }
  .customer-signoff .choice span { min-height:40px; font-size:11px; padding:0 8px; }
  .customer-signoff .signature-pad { height:100px; border-radius:8px; }
  .customer-signoff .signature-actions { min-height:24px; margin-top:2px; font-size:10px; }
  .customer-signoff .signature-actions .text-link { min-height:24px; padding:2px 4px; }
  .review-step-wrap .form-actions { padding:6px 10px; margin-top:8px; bottom:6px; border-radius:10px; }
  .review-step-wrap .form-actions .button { min-height:40px; }
}
@media screen and (min-width:741px) and (max-width:1180px) {
  .customer-summary-head { padding:3px 10px; }
  .customer-signoff .signer-grid { grid-template-columns:minmax(260px,1fr) minmax(0,1fr); }
  .customer-signoff .signer-name-field { grid-column:1; grid-row:1; }
  .customer-signoff .signer-grid .signing-row { grid-column:1; grid-row:2; }
  .customer-signoff .signer-grid .signer-signature-field { grid-column:2; grid-row:1 / span 2; }
  .customer-vehicle-thumb { width:36px; height:26px; }
  .customer-signoff .checkline { font-size:11px; }
}
@media screen and (min-width:901px) and (max-width:1180px) and (max-height:800px) {
  .review-step-wrap { display:grid; grid-template-columns:170px minmax(0,1fr); column-gap:8px; }
  .review-step-wrap .form-compact-head { grid-column:1; grid-row:1; margin:0; }
  .review-step-wrap .form-compact-head > .button { display:none; }
  .review-step-wrap .form-progress { grid-column:2; grid-row:1; }
  .review-step-wrap > form { grid-column:1 / -1; }
  .customer-condition-facts { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .customer-damage > .customer-summary-heading h3 { font-size:11px; white-space:nowrap; }
}

/* Customer signing gets its own readable scale, separate from compact staff forms. */
.review-issues { padding:14px; margin-bottom:12px; background:#fff; border:1px solid var(--line); border-left:4px solid var(--ink); border-radius:10px; font-size:13px; }
.review-issues ul { margin:8px 0 0; padding-left:20px; }
.review-issues .text-link { min-height:36px; text-align:left; }
.signing-modal { display:flex; flex-direction:column; width:min(760px,100%); max-height:calc(100dvh - 32px); overflow:hidden; }
.signing-modal .modal-head { flex:0 0 auto; position:static; gap:16px; padding:18px 22px; }
.signing-modal .modal-head h2 { font-size:22px; line-height:1.25; }
.signing-modal .modal-head p { font-size:14px; color:var(--muted); margin:6px 0 0; overflow-wrap:anywhere; }
.signing-modal > form { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.signing-modal .modal-body { overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:18px 22px; }
.signing-intro { font-size:15px; margin:0 0 16px; line-height:1.45; color:var(--muted); }
.signing-modal .terms-agreement { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--soft); }
.signing-modal .checkline { flex:1; min-width:0; align-items:center; cursor:pointer; font-size:14px; line-height:1.5; min-height:44px; gap:12px; }
.signing-modal .checkline input { width:22px; height:22px; flex:0 0 22px; margin:0; }
.signing-modal .agreement-read { font-size:14px; min-height:44px; padding:4px; }
.signing-person { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:16px; margin:20px 0; }
.signing-as { padding:0; margin:0; border:0; min-width:0; }
.signing-modal .choice-row { gap:6px; }
.signing-modal .choice span { min-height:46px; padding:0 14px; font-size:14px; }
.signing-modal .choice:focus-within span { outline:2px solid var(--ink); outline-offset:2px; }
.signing-role { grid-column:1 / -1; }
.signing-modal .label { font-size:14px; margin-bottom:7px; }
.signing-modal .input { font-size:16px; min-height:46px; padding:10px 12px; }
.signing-modal .button { min-height:44px; font-size:14px; padding:10px 14px; }
.signing-modal .signature-pad { height:260px; background:#fff; border:1px solid #9da6ac; border-radius:10px; }
.signing-modal .signature-actions { font-size:12px; margin-top:6px; }
.signing-modal .modal-foot { flex:0 0 auto; position:static; padding:14px 22px; flex-wrap:nowrap; align-items:center; gap:16px; }
.signing-modal .modal-foot .button { font-size:16px; white-space:nowrap; }
.signing-save-status { flex:1; font-size:12px; color:var(--muted); }
.signing-error { margin-bottom:16px; padding:12px; border:1px solid #a65353; border-radius:8px; color:#783737; background:#fff9f9; font-size:14px; line-height:1.5; }
.signing-modal[aria-busy="true"] .signature-pad { pointer-events:none; opacity:.6; }
.signing-modal a[aria-disabled="true"] { pointer-events:none; opacity:.6; }
.completion-page { min-height:calc(100dvh - 160px); display:grid; place-items:center; padding:20px 0; }
.completion-card { width:min(650px,100%); padding:36px; text-align:center; background:#fff; border:1px solid var(--line); border-radius:18px; }
.completion-logo { width:190px; height:auto; }
.completion-mark { display:grid; place-items:center; width:62px; height:62px; border-radius:50%; margin:28px auto 18px; background:var(--ink); color:white; }
.completion-mark .ui-icon { width:30px; height:30px; }
.completion-card h1 { font-size:28px; margin:0 0 8px; }
.completion-intro { color:var(--muted); margin:0 0 24px; }
.completion-registration { display:block; font-size:24px; letter-spacing:.04em; }
.completion-card p { overflow-wrap:anywhere; }
.completion-facts { display:grid; grid-template-columns:1fr 1fr; gap:16px; border-block:1px solid var(--line); margin:24px 0; padding:18px 0; }
.completion-facts dt { color:var(--muted); font-size:12px; margin-bottom:4px; }
.completion-facts dd { margin:0; font-size:14px; overflow-wrap:anywhere; }
.completion-actions { display:flex; justify-content:center; gap:10px; }
.completion-actions .button { min-height:44px; }
@media screen and (max-width:640px) {
  .signing-backdrop { padding:0; }
  .signing-modal { width:100%; height:100dvh; max-height:100dvh; border-radius:0; }
  .signing-modal .modal-head { padding:calc(14px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 14px max(14px,env(safe-area-inset-left)); gap:10px; }
  .signing-modal .modal-head h2 { font-size:20px; }
  .signing-modal > form { flex:1; }
  .signing-modal .modal-body { flex:1; padding:16px max(16px,env(safe-area-inset-right)) 16px max(16px,env(safe-area-inset-left)); }
  .signing-modal .modal-foot { padding:12px max(16px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
  .signing-modal .signature-pad { height:220px; }
  .signing-person { grid-template-columns:1fr; gap:14px; margin:18px 0; }
  .signing-modal .terms-agreement { gap:6px; padding:8px; }
  .signing-modal .modal-head .button { font-size:12px; padding:8px; }
  .signing-modal .modal-head p { font-size:12px; }
  .completion-card { padding:24px 18px; }
  .completion-card h1 { font-size:24px; }
  .completion-facts { grid-template-columns:1fr; }
  .completion-actions { flex-wrap:wrap; }
}

.signing-backdrop { top:var(--signing-viewport-top,0px); bottom:auto; height:var(--signing-viewport-height,100dvh); }
.signing-modal { max-height:calc(var(--signing-viewport-height,100dvh) - 32px); }
@media screen and (max-width:640px) {
  .signing-modal { height:var(--signing-viewport-height,100dvh); max-height:var(--signing-viewport-height,100dvh); }
}

.brand[data-action=home] { cursor:pointer; }
.condition-top { display:grid; grid-template-columns:minmax(120px,.7fr) minmax(0,1.3fr); gap:8px 12px; align-items:start; }
.condition-top .condition-photo { grid-row:1; align-self:stretch; display:flex; flex-direction:column; }
.condition-top .condition-photo .photo-control { flex:1; display:flex; flex-direction:column; }
.condition-coatings { min-width:0; align-self:start; }
.condition-top .photo-upload { min-height:130px; }
.condition-top .coating-list { margin:0; padding:0 8px; }
.condition-top .coating-row { padding:4px 0; }
.condition-coatings > .hint { margin:0 0 8px; font-size:10px; }
.condition-top .compact-condition-fields { grid-column:1 / -1; margin-top:0; gap:10px; }
.arrival-observations { margin-top:10px; }
.arrival-observations .textarea { min-height:54px; padding:8px 10px; }
.arrival-observations summary { cursor:pointer; padding:7px 0; font-size:12px; }
@media(max-width:640px){ .condition-top { grid-template-columns:100px minmax(0,1fr); gap:6px; } .condition-top .coating-row { flex-wrap:wrap; gap:2px; } .condition-top .coating-row .choice span { min-width:44px; min-height:36px; } }

.condition-top .dropzone { flex:1; min-height:0; padding:10px; }
.condition-top .dropzone-icon { width:28px; height:28px; margin:0 auto 6px; }
.condition-top .dropzone strong { font-size:12px; }
.condition-top .dropzone small { display:none; }
.condition-top .photo-preview { max-height:130px; }
.list-settings-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.sidebar-footer { margin-top:auto; padding-top:16px; }
.sidebar-footer > .nav-item { width:100%; margin-bottom:10px; }
.sidebar-footer .sidebar-bottom { margin-top:0; }
.archive-toolbar { justify-content:flex-start; }
.archive-toolbar .searchbox { width:min(100%,420px); }
.record-page-head > .record-actions { flex:1; }
.page-head .record-actions .button { flex:0 0 auto; }
.page-head .record-actions [data-action="archive-record"] { margin-left:auto; }
.page-head .record-actions [data-action="delete-archived"] { margin-left:auto; }
[data-action="delete-archived"]:hover,[data-action="confirm-delete-archived"]:hover { background:#f0dad6; border-color:#d9aaa4; color:#863e38; }
[data-action="archive-record"]:hover,[data-action="confirm-archive-record"]:hover { background:#f0dad6; border-color:#d9aaa4; color:#863e38; }
[data-action="archive-record"]:focus-visible,[data-action="confirm-archive-record"]:focus-visible { outline:2px solid #b86a62; outline-offset:2px; }
.list-settings-row small { display:block; margin-top:3px; font-size:12px; color:var(--muted); }
.list-options { height:166px; margin-bottom:14px; padding:6px; background-image:none; }
.list-options option { padding:5px 8px; }
.list-option-actions { display:flex; gap:8px; margin-bottom:14px; }
.list-option-actions .input { flex:1; min-width:0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:480px) { .list-option-actions { flex-wrap:wrap; } .list-option-actions .input { flex-basis:100%; } }

/* Keep fixed dialogs in the browser's own viewport coordinate system on iOS. */
.modal-backdrop { backdrop-filter:none; -webkit-backdrop-filter:none; }
.signing-backdrop { top:0; }
.signing-modal { transform:none; }
.terms-native-view { width:100%; min-height:65dvh; border:0; background:white; }
.customer-damage { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.customer-damage > .customer-summary-heading { display:contents; }
.customer-damage > .customer-summary-heading h3 { order:0; margin-right:auto; }
.customer-damage-count { order:1; }
.customer-damage > .customer-damage-details { order:2; }
.customer-damage > .customer-summary-heading .customer-summary-edit { order:3; }
.customer-damage > .customer-damage-intro,.customer-damage > .customer-damage-overview,.customer-damage > .hint { order:4; flex-basis:100%; }
.customer-damage-details[open] { order:5; flex-basis:100%; }

/* Review has room for readable details now that signing is a separate dialog. */
.customer-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.customer-summary-head { grid-column:1 / -1; padding:12px 16px; min-height:44px; }
.customer-summary-section { min-width:0; padding:12px 16px 16px; }
.customer-summary-side { min-width:0; border-left:1px solid var(--line); }
.customer-summary-side > .customer-summary-section:first-child { border:0; }
.customer-summary .customer-facts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 14px; }
.customer-summary-heading { margin-bottom:8px; }
.customer-agreed-work { margin-top:12px; padding:10px; gap:3px; }
.customer-summary-side .customer-requests-section { grid-column:auto; }
.customer-summary-side .customer-requests-section.is-empty { padding:10px 16px; }
@media screen and (max-width:640px) {
  .customer-summary { grid-template-columns:minmax(0,1fr); }
  .customer-summary-side { border-left:0; border-top:1px solid var(--line); }
  .customer-summary-head { padding:10px 14px; }
  .customer-summary-section { padding:12px 14px; }
  .customer-summary-side .customer-requests-section.is-empty { padding:10px 14px; }
}

.review-step-wrap .form-progress { margin-bottom:13px; }
@media screen and (max-width:640px) {
  .review-step-wrap .form-progress { margin-bottom:10px; }
}
.customer-agreed-work { padding:12px; gap:6px; }
.customer-agreed-work > span { font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.customer-agreed-work > strong { font-size:14px; line-height:1.45; }
.customer-agreed-work .customer-work-label { display:block; font-size:11px; color:var(--muted); margin-bottom:3px; }
.customer-agreed-work p { font-size:12px; line-height:1.5; margin:0; }
.customer-work-material,.customer-work-extras { border-top:1px solid #cfd5d9; padding-top:9px; margin-top:3px; }
.customer-work-material > strong,.customer-work-items { font-size:13px; font-weight:600; }
.customer-agreed-work .customer-work-note { border-left:2px solid #b9c1c6; padding-left:8px; margin-top:6px; }
.customer-work-note .customer-work-label { margin-bottom:1px; }
.review-damage-copy,.review-damage-photos { min-width:0; }
.review-damage-copy { display:grid; gap:5px; align-content:start; }
.customer-damage-details .review-damage.has-review-photos { grid-template-columns:minmax(0,1fr) minmax(92px,34%); align-items:start; }
.review-damage-copy p { overflow-wrap:anywhere; }
.review-damage-photos .hint { font-size:10px; margin:0 0 5px; }
.review-damage-photos .damage-photo-gallery { display:flex; gap:6px; overflow-x:auto; max-width:100%; margin:0; padding-bottom:4px; }
.review-damage-photos .damage-photo-gallery figure { flex:0 0 76px; }
.review-damage-photos .damage-photo-gallery img { height:76px; }
.arrival-observations .observation-photo-section { margin-top:8px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.arrival-observations .observation-photo-section > summary { display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 10px; font-weight:600; list-style:none; }
.observation-photo-section > summary::-webkit-details-marker { display:none; }
.observation-photo-section > summary:hover { background:var(--accent-soft); }
.observation-photo-section > summary .ui-icon { width:18px; height:18px; }
.observation-photo-count { padding:2px 6px; border-radius:5px; background:var(--steel-soft); font-size:11px; }
.observation-photo-toggle { margin-left:auto; }
.observation-photo-section[open] .observation-photo-toggle { transform:rotate(45deg); }
.observation-photo-section[open] > summary { border-bottom:1px solid var(--line); }
.observation-photo-section > .damage-photo-control { padding:10px; }
.amendment-vehicle-photos h3 { margin:0 0 5px; font-size:14px; }
.amendment-vehicle-photos .hint { margin:0 0 10px; }
.record-vehicle-photos { border-top:1px solid var(--line); margin-top:12px; padding-top:12px; }
.record-vehicle-photos h3 { margin:0 0 8px; font-size:13px; }
.arrival-observation-photos { margin-top:12px; }
.arrival-observation-photos .observation-photo-section { border:1px solid var(--line); border-radius:9px; background:#fff; }
.arrival-observation-photos .observation-photo-section > summary { display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 10px; font-size:12px; font-weight:600; list-style:none; cursor:pointer; }
.customer-observation-photos { margin-top:12px; }
.customer-observation-photos > summary { cursor:pointer; font-size:12px; min-height:36px; display:flex; align-items:center; text-decoration:underline; }
.arrival-observations.staff-only-panel { padding:12px; border:1px solid #c5d1da; border-left:4px solid var(--accent); border-radius:9px; background:var(--accent-soft); }
.staff-only-panel .staff-only-label { background:var(--accent); color:#fff; }
.staff-notes-locked p { font-size:12px; color:var(--muted); margin:6px 0 10px; }
.staff-complete-button { flex:0 0 44px; width:44px; min-height:44px; padding:10px; }
.staff-complete-button .ui-icon { width:18px; height:18px; }
.staff-access-modal { width:min(560px,100%); }
.staff-access-modal .input,.staff-access-modal .textarea { font-size:16px; }
.staff-access-modal .button,.staff-access-modal .input { min-height:44px; }
.staff-access-modal .label { margin-top:14px; }
.staff-gate-error { color:#9f3535; font-size:13px; }
.staff-completion-notice { padding:12px; background:#eef2f4; border-radius:8px; }
.staff-completion-notice p { margin:8px 0 0; font-size:13px; }
.sidebar-bottom .sidebar-copyright { display:flex; align-items:center; gap:4px; }
.hyperbolt-mark { display:inline-block; flex:0 0 9px; width:9px; height:13px; background:currentColor; -webkit-mask:url('/hyperbolt-logo.png?v=92') center / contain no-repeat; mask:url('/hyperbolt-logo.png?v=92') center / contain no-repeat; }
@media(max-width:640px) {
  .review-step-wrap .form-actions,.review-step-wrap .form-action-right { gap:6px; }
  .review-step-wrap .form-action-right > .button { padding-left:9px; padding-right:9px; }
}

.ppf-details,.ppf-extras { border-top:1px solid var(--line); padding-top:12px; gap:8px; }
.job-notes { min-height:54px; padding:8px 10px; }
.ppf-details .job-options,.ppf-extras .job-options { margin-bottom:8px; }
@media(min-width:641px) and (max-width:1180px) { .job-options { gap:4px; } .job-option { padding:6px; gap:5px; font-size:11px; } .job-option input { width:14px; height:14px; } .job-option span { padding:0; font-size:11px; } }

.vehicle-make-model { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }

.vehicle-identity-fields { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:12px; }
@media(max-width:640px) { .vehicle-identity-fields { grid-template-columns:1fr 1fr; gap:10px; } .vehicle-identity-fields > .field:first-child {grid-column:1 / -1;} .vehicle-make-model {gap:10px;} }

.button.is-loading::before, .demo-link.is-loading::before {
  content: ''; display: inline-block; flex: 0 0 14px; width: 14px; height: 14px;
  box-sizing: border-box; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: button-loading-spin .75s linear infinite; margin-right: 6px;
}
.button.is-loading { cursor: progress; }
@keyframes button-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .button.is-loading::before, .demo-link.is-loading::before { animation-duration: 2s; } }

/* Keep workspace navigation and its footer in view as the content grows. */
@media screen and (min-width:641px) {
  .sidebar {
    position:sticky;
    top:68px;
    align-self:start;
    height:calc(100vh - 68px);
    height:calc(100dvh - 68px);
    overflow-y:auto;
    overscroll-behavior-y:contain;
  }
}
@media screen and (min-width:641px) and (max-width:1180px) {
  .sidebar {
    top:60px;
    height:calc(100vh - 60px);
    height:calc(100dvh - 60px);
  }
}

.unsaved-draft-banner { background:var(--accent-soft); border-color:#c5d1da; border-left:4px solid var(--accent); }