/* Customer workspace: use the available width on desktop while keeping the mobile layout. */
@media (min-width: 900px) {
  body:has(#work:not([hidden])) > header { padding: 20px max(32px, calc((100% - 1280px) / 2)); }
  body:has(#work:not([hidden])) > main { max-width: 1344px; padding: 28px 32px 60px; }
  #work:not([hidden]) { display: grid; grid-template-columns: 208px minmax(0, 1fr); column-gap: 32px; align-items: start; }
  #customerDemo { grid-column: 1 / -1; }
  #customerName { grid-column: 1 / -1; margin: 0 0 22px; font-size: 25px; }
  .customer-tabs { grid-column: 1; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 4px; margin: 0; padding: 8px; background: #e7eef5; border-radius: 12px; }
  .customer-tabs button { text-align: left; width: 100%; background: transparent; border-color: transparent; padding: 12px 14px; }
  .customer-tabs button.selected { background: #173c60; border-color: #173c60; }
  #work > [role="tabpanel"] { grid-column: 2; min-width: 0; }
  #requestForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  #requestForm h2, #requestForm #submitRequest, #requestMessage { grid-column: 1 / -1; }
  #requestForm label { margin: 10px 0; }
  #requestForm .primary { width: auto; justify-self: start; min-width: 180px; }
  #orders, #requests { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr)); gap: 14px; align-items: start; }
  #orders .card, #requests .card { margin: 0; }
}
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #4b8cc9; outline-offset: 2px; }
.trip-picker { padding: 4px 0 8px; }
.trip-picker .hint { font-size: 13px; margin: 4px 0; }
@media (min-width: 900px) {
  #requestForm .trip-picker:not([hidden]) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  #requestForm .trip-picker .hint { grid-column: 1 / -1; }
}