/* Form feedback is shared across desktop and phones. */
.row-hint { margin: -2px 0 14px; line-height: 1.6; }
.field-error { display: block; margin-top: 7px; color: #a13425; font-size: 12px; line-height: 1.5; font-weight: 500; }
input[aria-invalid="true"] { border: 2px solid #b84936; background: #fff8f6; }
.row-incomplete { background: #fffaf8; }
.validation-summary { scroll-margin-top: 20px; margin-bottom: 24px; border: 1px solid #e6b5ac; }
.validation-summary h2 { margin-bottom: 8px; font-size: 18px; }
.validation-summary p { margin: 0 0 12px; font-size: 14px; }
.validation-summary ul { padding-left: 22px; margin: 0; }
.validation-summary li { margin: 7px 0; }
.validation-summary a { color: #8f2d20; }
.toggle-empty-rows { display: none; }
input, select, button, .button { scroll-margin-top: 24px; scroll-margin-bottom: 170px; }

@media (max-width: 900px) {
  body { -webkit-text-size-adjust: 100%; }
  header { padding: 16px; gap: 12px; }
  header .brand { font-size: 25px; }
  header > div:last-child { font-size: 12px; text-align: right; }
  header small { font-size: 10px; }
  main { padding: 0 12px; margin: 20px auto; min-width: 0; }
  .card { padding: 18px 16px; margin-bottom: 18px; border-radius: 10px; min-width: 0; }
  h1 { font-size: 27px; line-height: 1.25; overflow-wrap: anywhere; }
  h2 { font-size: 19px; line-height: 1.4; }
  p, td, dd, address, small, .trip-card { overflow-wrap: anywhere; }
  input, select { font-size: 16px; min-width: 0; max-width: 100%; min-height: 48px; }
  label, form, fieldset, .form-grid > *, .filter-form > * { min-width: 0; }
  button, .button { min-height: 46px; padding: 12px 15px; }
  nav { gap: 8px; margin-bottom: 20px; }
  nav > a { display: flex; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: 6px; background: #eef2f8; }
  nav form { margin-left: auto; }
  nav .secondary { padding: 10px; font-size: 13px; }
  .page-heading { gap: 12px; align-items: flex-start; margin-bottom: 20px; }
  .page-heading p { margin-bottom: 0; }
  .page-heading > div { min-width: 0; flex: 1 1 180px; }
  .page-heading > .badge { margin-top: 5px; }
  .welcome { margin: 24px auto; padding: 26px 20px; }
  .welcome h1 { font-size: 32px; }
  .welcome .actions { display: grid; gap: 12px; }
  .welcome .button { text-align: center; }
  .login, .account-card { margin: 22px auto; }
  .stats { gap: 8px; }
  .stats .card { padding: 14px 10px; min-width: 0; }
  .stats strong { font-size: 26px; margin-top: 10px; }
  .stats small { line-height: 1.4; font-size: 11px; }
  .filter-form { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; }
  .filter-form label { min-width: 0; }
  .filter-form a { padding: 10px 0; text-align: center; }
  .driver-form { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .list-heading { gap: 12px; }
  .list-heading h2 { max-width: none; margin: 0; }
  .paper { display: block; padding: 18px 14px; }
  .paper-header { display: block; padding-bottom: 18px; margin-bottom: 22px; }
  .paper-logo { font-size: 34px; }
  .paper-logo small { font-size: 12px; letter-spacing: 3px; }
  .paper-header address { font-size: 11px; padding: 16px 0 0; margin: 0; border: 0; }
  .paper .form-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .paper .main-fields label, .paper .odometer-fields label { grid-column: auto; }
  .main-fields { margin-bottom: 22px; }
  .odometer-fields { margin-bottom: 28px; }
  .row-section { margin: 26px 0; }
  .row-section .list-heading { align-items: center; margin-bottom: 12px; }
  .row-section .list-heading h2 { max-width: 65%; font-size: 17px; }
  .row-section .add-row { font-size: 13px; padding: 10px 12px; flex-shrink: 0; }
  .row-hint { font-size: 13px; margin: 0 0 14px; }
  /* Each editable table row becomes a labeled card, including route legs. */
  .paper .table-scroll { overflow: visible; }
  .paper .entry-table { display: block; min-width: 0; width: 100%; table-layout: auto; }
  .paper .entry-table thead { display: none; }
  .paper .entry-table tbody { display: block; }
  .paper .entry-table tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px 12px; border: 1px solid #cbd9da; border-radius: 9px; padding: 14px; margin-bottom: 14px; background: #fcfdfd; }
  .paper .entry-table td { display: block; padding: 0; border: 0; min-width: 0; grid-column: 1/-1; }
  .paper .entry-table td::before { content: attr(data-label); display: block; font-size: 13px; font-weight: 650; color: #50617a; margin-bottom: 7px; }
  .paper .entry-table td.row-number { width: auto; text-align: left; padding-bottom: 10px; border-bottom: 1px solid #e0e8e8; font-size: 13px; font-weight: 700; color: #40516a; }
  .paper .entry-table .row-number::before { display: inline; margin-right: 6px; }
  .paper .entry-table input { min-width: 0; min-height: 48px; font-size: 16px; padding: 12px; }
  .paper .entry-table input[type="checkbox"] { min-height: 26px; width: 26px; height: 26px; margin: 8px 0 0; padding: 0; }
  .paper .entry-table td[data-label="Pick-up"], .paper .entry-table td[data-label="Drop-off"] { grid-column: auto; min-height: 64px; padding: 10px 12px; border: 1px solid #dae4e4; border-radius: 6px; background: #fff; }
  .paper .entry-table td[data-label="City"], .paper .entry-table td[data-label="Province"] { grid-column: auto; }
  .paper .entry-table td:has(.remove-row) { grid-column: 1/-1; }
  .paper .entry-table .remove-row { width: 100%; font-size: 13px; padding: 10px 12px; min-height: 44px; border-color: #d9e2e2; }
  .paper .entry-table .row-incomplete { border-color: #c86a59; background: #fffaf8; }
  .paper .entry-table .mobile-collapsed-row { display: none; }
  .no-used-rows .table-scroll::after { content: 'No entries'; display: block; padding: 12px 0; color: #617179; font-size: 14px; }
  .toggle-empty-rows:not([hidden]) { display: block; width: 100%; border-style: dashed; font-size: 13px; margin-top: 4px; }
  .stub { margin-top: 26px; padding-top: 20px; }
  .stub .form-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
  .stub p { font-size: 14px; margin-bottom: 6px; }
  .save-bar { bottom: max(8px, env(safe-area-inset-bottom)); padding: 12px; gap: 10px; border-radius: 9px; margin-top: 18px; }
  .save-bar strong { font-size: 12px; }
  .save-bar small { font-size: 11px; margin-top: 3px; }
  .save-bar .actions { grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: 8px; }
  .save-bar button { font-size: 13px; padding: 12px 8px; }
  #trip-form:focus-within .save-bar { position: static; }
  .install-card { padding: 16px; margin: 22px 0; gap: 12px; }
  .install-card .secondary { flex: 1; }
  .share-label input { font-size: 14px; }
  .validation-summary { padding: 16px; }
  footer { margin: 28px 12px; }
  /* Admin directory tables also become cards rather than sideways scrollers. */
  .table-scroll:has(.mobile-table) { overflow: visible; }
  .mobile-table, .mobile-table tbody { display: block; width: 100%; min-width: 0; }
  .mobile-table thead { display: none; }
  .mobile-table tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; padding: 16px; border: 1px solid #d9e3e3; border-radius: 9px; margin: 12px 0; background: #fbfdfd; }
  .mobile-table td { display: block; border: 0; padding: 0; min-width: 0; }
  .mobile-table td::before { content: attr(data-label); display: block; font-size: 12px; color: #617179; margin-bottom: 7px; font-weight: 650; }
  .mobile-table td:first-child, .mobile-table td:last-child, .mobile-table td[data-label="Email"], .mobile-table td[data-label="Dates"], .mobile-table td[data-label="Name"] { grid-column: 1/-1; }
  .mobile-table .actions { display: flex; align-items: stretch; flex-wrap: wrap; gap: 10px; }
  .mobile-table .actions > input[type="password"] { flex: 1 1 100%; max-width: none; font-size: 16px; }
  .mobile-table .actions button { flex: 1 1 120px; font-size: 13px; }
  .mobile-table .actions > form { flex: 1 1 100%; }
  .mobile-table .actions > a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 12px; background: #eef2f8; border-radius: 6px; flex: 1; }
  .mobile-table .actions > form button { width: 100%; }
}
@media (max-width: 350px) {
  header > div:last-child small { display: none; }
  .paper .entry-table td[data-label="City"], .paper .entry-table td[data-label="Province"] { grid-column: 1/-1; }
  nav { gap: 6px; }
  nav a { font-size: 12px; padding: 8px; }
}