/* Workshop tasks: compact queues, reachable save controls and usable form fields. */
.garage-history-filter { display:grid; grid-template-columns:minmax(14rem,2fr) repeat(3,minmax(8rem,1fr)) auto auto; align-items:end; gap:.75rem; }
.garage-history-filter label { display:grid; gap:.35rem; font-weight:600; font-size:.85rem; }
.garage-history-filter input,.garage-history-filter select { min-width:0; width:100%; min-height:2.75rem; }
.garage-history-pages { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; margin:.9rem 0; }
.garage-history-pages span { margin-right:auto; color:var(--muted); }
.garage-work-summary { grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
.garage-work-summary .kpi { min-height:5.5rem; padding:.8rem 1rem; }
.garage-work-summary .kpi-value { font-size:1.65rem; }
.garage-work-summary .kpi-hint { font-size:.78rem; }
.garage-work-queues { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.garage-work-queues .panel { padding:1rem; min-width:0; }
.garage-work-queues h3 { font-size:1rem; margin-top:0; }
.garage-queue-list { list-style:none; padding:0; margin:.5rem 0; }
.garage-queue-list li+li { border-top:1px solid var(--line); }
.garage-queue-list a { display:grid; min-height:2.75rem; padding:.5rem 0; gap:.2rem; text-decoration:none; }
.garage-queue-list span { color:var(--muted); font-size:.82rem; overflow-wrap:anywhere; }
.garage-inspection-toolbar { position:sticky; top:calc(var(--portal-header-height,5rem) + .5rem); z-index:15; display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; padding:.8rem 1rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:0 3px 12px #0001; }
.garage-inspection-toolbar>div { display:grid; gap:.25rem; margin-right:auto; flex:1 1 17rem; }
.garage-inspection-toolbar [data-insp-status] { font-size:.8rem; color:var(--muted); }
.garage-inspection-fields { display:grid; gap:1rem; container-type:inline-size; }
.garage-inspection-header { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:.7rem; }
.garage-inspection-header>.panel-header { margin:0; }
.garage-inspection-header>.garage-vehicle-details { justify-self:stretch; }
.garage-inspection-header>#insp-entered,.garage-inspection-header>.side-list,.garage-inspection-header>.side-title { grid-column:1/-1; }
.garage-vehicle-details summary,.garage-job-details summary { min-height:2.75rem; padding:.65rem 0; cursor:pointer; font-size:.9rem; }
.garage-vehicle-details .side-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.3rem 1.2rem; }
#insp-entered { padding:.8rem; gap:.65rem; }
#insp-entered>.field-row { grid-template-columns:1.1fr 1fr .65fr .85fr 1.25fr; }
#insp-entered>.muted { margin:0; }
.garage-job-details .field-row { margin-top:.65rem; }
.garage-inspection-section { margin:0; }
.garage-inspection-section summary { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; min-height:2.75rem; cursor:pointer; }
.garage-inspection-section summary::before { content:"▸"; }
.garage-inspection-section[open] summary::before { content:"▾"; }
.garage-inspection-section summary .panel-note { margin-left:auto; }
.garage-inspection-fields .insp-item { scroll-margin-top:12rem; }
.garage-inspection-fields .insp-code,.garage-inspection-fields .insp-monitor { min-height:2.75rem; min-width:2.75rem; padding:.5rem .7rem; }
.garage-inspection-fields .insp-code[aria-pressed="true"],.garage-inspection-fields .insp-monitor[aria-pressed="true"] { outline:2px solid currentColor; outline-offset:1px; font-weight:800; }
.garage-inspection-fields input:not([type="checkbox"]),.garage-inspection-fields select,.garage-inspection-fields textarea { min-height:2.75rem; font-size:.9rem; }
.garage-inspection-fields .insp-cell label { display:grid; gap:.2rem; margin-bottom:.55rem; font-size:.75rem; font-weight:600; }
.garage-inspection-fields .insp-cell input { width:100%; min-width:0; }
.garage-field-label { display:none; }
#inspection-sign,#garage-work-defects { scroll-margin-top:12rem; }
.service-scope .insp-f { min-height:2.75rem; }
.service-scope input[type="checkbox"].insp-f { min-height:1.5rem; width:1.5rem; }
@media(max-width:1000px) {
  .garage-history-filter { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .garage-history-filter label:first-child { grid-column:1/-1; }
  .garage-work-queues { grid-template-columns:1fr 1fr; }
  .garage-work-queues>section:last-child { grid-column:1/-1; }
}
@media(max-width:700px) {
  .garage-work-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .garage-work-summary .kpi { min-height:5rem; padding:.65rem; }
  .garage-work-queues { grid-template-columns:1fr; }
  .garage-inspection-toolbar { padding:.6rem; gap:.4rem; }
  .garage-inspection-toolbar>div { flex-basis:100%; }
  .garage-inspection-toolbar .button { flex:1; padding:.6rem; font-size:.8rem; }
}
@container(max-width:650px) {
  #insp-entered>.field-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #insp-entered>.field-row>label:last-child { grid-column:1/-1; }
  .garage-inspection-header { grid-template-columns:1fr; }
  .garage-vehicle-details .side-list { grid-template-columns:1fr; }
  .insp-grid-scroll:has(.insp-grid:not(.insp-faults)) { overflow:visible; }
  .insp-grid-scroll:has(.insp-grid:not(.insp-faults))::after { display:none !important; }
  .insp-grid:not(.insp-faults) { display:block; min-width:0; width:100%; }
  .insp-grid:not(.insp-faults) thead { display:none; }
  .insp-grid:not(.insp-faults) tbody { display:grid; gap:1rem; }
  .insp-grid:not(.insp-faults) tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.6rem; gap:.6rem; }
  .insp-grid:not(.insp-faults) tbody th { grid-column:1/-1; grid-row:1; width:auto; text-align:left; border:0; padding:.4rem; font-size:.95rem; }
  .insp-grid:not(.insp-faults) tbody th::before { content:"Axle "; }
  .insp-grid:not(.insp-faults) td { display:block; min-width:0; border:0; padding:.3rem; }
  .insp-grid:not(.insp-faults) td.insp-cell::before { content:attr(data-label); display:block; font-weight:700; margin-bottom:.5rem; }
  .garage-field-label { display:block; font-size:.8rem; font-weight:600; margin-bottom:.3rem; }
  .insp-grid:not(.insp-faults) input { width:100%; min-width:0; }
}
@media print { .garage-inspection-toolbar { display:none !important; } }

/* Screen layout only: printed inspections and invoices keep their paper geometry. */
@media screen {
  .service-scope, .service-scope :is(.panel,.panel-header>div,.side-list,.side-list li,.field-row,.booking-form,.side-booking) { min-width:0; }
  .service-scope :is(h3,p,.panel-note,.side-value,.price-name,.pchip,.connect-code) { overflow-wrap:anywhere; }
  /* EXCEPT THE CLIENT'S NAME IN WORK AHEAD. Breaking anywhere is right for a long word in a narrow panel and
     wrong inside a table: the table gives that column whatever is left of 100%, so on a laptop "Demo Freight"
     came out one letter to a line. The name stays whole and the table scrolls, which is what .table-scroll is
     there for. */
  .service-scope .ptable .pchip { overflow-wrap:normal; white-space:nowrap; }
  .service-scope .ptable { min-width:58rem; }
  .service-scope :is(input,select,textarea) { min-width:0; max-width:100%; box-sizing:border-box; }
  .service-scope :is(input,select,textarea,.side-close) { scroll-margin-top:calc(var(--portal-header-height,5rem) + 1rem); }
  .phone-layout .service-scope :is(.panel-header,.page-actions) { flex-wrap:wrap; }
  .phone-layout .service-scope .side-list .side-value { white-space:normal; }
  .phone-layout .service-scope .side-list .side-value:has(time) { white-space:nowrap; }
  .phone-layout .service-scope :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]) { font-size:16px; min-height:44px; }
  .phone-layout .service-scope :is(.button,.side-book,.side-close,.chip-x,summary) { min-height:44px; }
  .phone-layout .service-scope :is(.side-close,.chip-x) { min-width:44px; flex-shrink:0; }
  .phone-layout .service-scope :is(.booking-form,.side-booking) { padding:.65rem; }
  .phone-layout .service-scope :is(.pill-row,.filter-bar) { min-width:0; }
  .phone-layout .service-scope .compact-select { width:100%; flex:1 1 100%; }
  .phone-layout .garage-history-filter { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
  .phone-layout .garage-history-filter label:nth-child(-n+2) { grid-column:1/-1; }
  .phone-layout .garage-inspection-toolbar .button { min-height:44px; font-size:.85rem; }
  .phone-layout .garage-inspection-fields :is(.insp-code,.insp-monitor) { min-width:0; font-size:1rem; }
  .phone-layout .garage-inspection-fields .insp-item { padding-inline:.5rem; }
  .phone-layout .garage-inspection-fields .insp-code { min-width:44px; }
  .phone-layout .garage-inspection-fields .insp-cell label { font-size:.85rem; }
  .phone-layout .garage-inspection-fields .insp-item { scroll-margin-top:calc(var(--portal-header-height,5rem) + 11rem); }
  .phone-layout .service-scope :is(#inspection-sign,#garage-work-defects) { scroll-margin-top:calc(var(--portal-header-height,5rem) + 11rem); }
  .phone-layout .service-scope .insp-faults td::before,
  .phone-layout .service-scope .insp-faults th[data-label]::before { font-size:.8rem; }
  .phone-layout .garage-invoice-lines tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem .75rem; }
  .phone-layout .garage-invoice-lines tbody td { min-width:0; white-space:normal; }
  .phone-layout .garage-invoice-lines tbody td:nth-child(-n+2) { grid-column:1/-1; }
  .phone-layout .garage-invoice-lines tbody td.insp-tick { display:block; }
  .phone-layout .garage-invoice-lines .insp-narrow { width:100%; }
  .phone-layout .garage-invoice-lines [data-drop] { width:100%; }

  /* The same invoice data becomes a readable review on a phone. Only .paper-preview is affected. */
  .phone-layout .paper-scroll:has(.garage-invoice-preview) { overflow:visible; }
  .phone-layout .garage-invoice-preview { width:100%; min-height:0; padding:1rem; font-size:1rem; line-height:1.5; overflow-wrap:anywhere; }
  .phone-layout .garage-invoice-preview :is(.pf-head,.pf-parties,.pf-header) { display:grid; grid-template-columns:minmax(0,1fr); gap:.75rem; }
  .phone-layout .garage-invoice-preview :is(.pf-head>*,.pf-brand>div,.pf-f,.pf-party) { min-width:0; }
  .phone-layout .garage-invoice-preview .pf-brand { align-items:flex-start; }
  .phone-layout .garage-invoice-preview .pf-logo-none { display:none; }
  .phone-layout .garage-invoice-preview .pf-brand strong { font-size:1.1rem; letter-spacing:normal; }
  .phone-layout .garage-invoice-preview :is(.pf-title,.pf-ref) { text-align:left; }
  .phone-layout .garage-invoice-preview .pf-title { font-size:1.4rem; }
  .phone-layout .garage-invoice-preview :is(.pf-brand small,.pf-ref,.pf-ref small,.pf-preview-band,.pf-f span,.pf-f strong,.pf-party,.pf-party p,.pf-party span,.pf-party-extra,.pf-by,.pf-notes,.pf-foot,.pf-payto-say,.pf-payref,.pf-payref strong,.pf-platform-say) { font-size:.9rem; }
  .phone-layout .garage-invoice-preview :is(.pf-party h4,.pf-party strong) { font-size:1rem; }
  .phone-layout .garage-invoice-preview :is(.pf-invoice-lines,.pf-invoice-lines tbody,.pf-invoice-lines tfoot) { display:block; width:100%; }
  .phone-layout .garage-invoice-preview .pf-invoice-lines thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .phone-layout .garage-invoice-preview .pf-invoice-lines tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; margin:.75rem 0; padding:.75rem 0; border-bottom:1px solid #bbb; }
  .phone-layout .garage-invoice-preview .pf-invoice-lines tbody td { display:block; min-width:0; border:0; padding:0; font-size:1rem; text-align:left; white-space:normal; }
  .phone-layout .garage-invoice-preview .pf-invoice-lines tbody td:nth-child(-n+2) { grid-column:1/-1; }
  .phone-layout .garage-invoice-preview .pf-invoice-lines tbody td::before { content:attr(data-label); display:block; font-size:.8rem; font-weight:600; color:#444; }
  .phone-layout .garage-invoice-preview .pf-invoice-lines tfoot tr { display:flex; justify-content:space-between; gap:1rem; }
  .phone-layout .garage-invoice-preview .pf-invoice-lines tfoot :is(th,td) { display:block; border:0; font-size:1rem; text-align:right; }
  .phone-layout .garage-invoice-preview .pf-platform { flex-wrap:wrap; }
}
@media screen and (max-width:400px) {
  .phone-layout .garage-inspection-toolbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .phone-layout .garage-inspection-toolbar>div,
  .phone-layout .garage-inspection-toolbar [data-insp-save] { grid-column:1/-1; }
  .phone-layout .garage-inspection-toolbar .button { width:100%; }
  .phone-layout #insp-entered>.field-row>label:nth-child(-n+2) { grid-column:1/-1; }
  .phone-layout .insp-grid:not(.insp-faults) tbody tr { grid-template-columns:minmax(0,1fr); }
}

/* ---- Start work (0355): the lorry in front of the mechanic ----
   A registration and a button on one line, then what is known about that lorry in plain lists. Nothing here is a
   table: a mechanic reads this standing at the ramp with a phone in one hand. */
.start-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem .75rem; align-items: end; }
.start-form label { grid-column: 1 / -1; font-weight: 600; }
.start-photo { margin-top: .9rem; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.start-found .start-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.start-found h3 { margin: 0; font-size: 1.35rem; }
.start-found h4 { margin: 1.1rem 0 .4rem; font-size: .95rem; }
.start-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 1.5rem; }
.start-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.start-list > li { padding: .35rem 0; border-bottom: 1px solid var(--line, #e6e0d4); }
.start-list > li:last-child { border-bottom: 0; }
.start-due { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.start-due-what { font-weight: 600; }
.start-due-when.status-bad { color: #a4272b; font-weight: 600; }
.start-due-when.status-warn { color: #8a5a11; font-weight: 600; }
.start-due-when.status-muted { color: var(--ink-500, #6b6152); }
.start-recurring .status-pill { margin-inline: .35rem; }
@media (max-width: 640px) {
  .start-form { grid-template-columns: minmax(0, 1fr); }
  .start-found .start-head { flex-direction: column; }
}