/* Renter portal, on the shared tokens (ui-tokens.css). The renter-facing
   surface keeps a warmer canvas than the console but the same font, radii,
   control shapes and status chips, with one accent derived from --primary
   (which /branding.css rewrites at runtime). */
:root {
  --ink: var(--ui-ink);
  --muted: var(--ui-muted);
  --paper: var(--ui-surface);
  --canvas: #f6f5f1;
  --line: var(--ui-line);
  --green: var(--ui-accent);
  --green-soft: var(--ui-accent-soft);
  --amber: var(--ui-warn);
  --amber-soft: var(--ui-warn-soft);
  --red: var(--ui-bad);
  --red-soft: var(--ui-bad-soft);
  --shadow: var(--ui-shadow-pop);
  font-family: var(--ui-font);
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-size: var(--ui-fs); line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.topbar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: env(safe-area-inset-top) max(24px, calc((100vw - 1180px) / 2)) 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 10px; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.brand span:last-child { display: grid; }
.brand strong { font-weight: 650; }
.brand small { color: var(--muted); margin-top: 1px; font-size: var(--ui-fs-xs); }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--green); color: var(--ui-on-accent); font-weight: 700; font-size: 12px; }
.shell { width: min(1180px, calc(100% - 32px)); margin: 32px auto calc(80px + var(--ui-safe-bottom)); }
.auth-card { max-width: 460px; margin: 8vh auto; padding: 32px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-sm); }
.auth-card h1 { font-size: var(--ui-fs-xl); }
.auth-card > p { color: var(--muted); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.2; }
h2 { font-size: var(--ui-fs-lg); }
h3 { font-size: var(--ui-fs-md); }
.eyebrow { color: var(--muted); font-size: var(--ui-fs-xs); letter-spacing: 0; text-transform: none; font-weight: 500; }
form, label { display: grid; gap: 6px; }
form { gap: 16px; }
label { color: var(--ui-ink-2); font-size: var(--ui-fs-sm); font-weight: 500; }
input, select, textarea { width: 100%; min-height: var(--ui-control); color: var(--ink); background: var(--paper); border: 1px solid var(--ui-line-strong); border-radius: var(--ui-control-radius); padding: 8px 12px; }
textarea { min-height: 104px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 0; box-shadow: var(--ui-focus); border-color: var(--green); }
button, .button { min-height: var(--ui-control); border: 1px solid transparent; border-radius: var(--ui-control-radius); padding: 8px 16px; background: var(--green); color: var(--ui-on-accent); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background-color 120ms ease, border-color 120ms ease; }
button:hover, .button:hover { background: var(--ui-accent-dark); }
button:focus-visible, .button:focus-visible, a:focus-visible, summary:focus-visible { outline: 0; box-shadow: var(--ui-focus); }
button:disabled { cursor: wait; opacity: .6; }
/* The author `display` above outranks the UA rule for [hidden], so state it here. */
[hidden] { display: none !important; }
.secondary, .button.secondary { color: var(--ui-ink-2); background: var(--paper); border-color: var(--line); }
.secondary:hover, .button.secondary:hover { background: var(--ui-surface-3); border-color: var(--ui-line-strong); }
.text-button { color: var(--green); background: transparent; border-color: transparent; padding-inline: 0; }
.text-button:hover { background: transparent; text-decoration: underline; }
.form-message { min-height: 20px; color: var(--muted); font-size: var(--ui-fs-sm); }
.portal-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.rental-nav { position: sticky; top: 24px; }
.rental-select-wrap { display: none; }
.rental-button-list { display: block; }
.rental-link { width: 100%; display: grid; gap: 2px; margin-bottom: 4px; padding: 10px 12px; text-align: left; color: var(--ui-ink-2); background: transparent; border: 1px solid transparent; font-weight: 500; justify-content: start; }
.rental-link:hover { background: var(--ui-surface-3); }
.rental-link small { color: var(--muted); font-size: var(--ui-fs-xs); }
.rental-link.active { background: var(--green-soft); border-color: transparent; color: var(--green); }
.rental-link.active small { color: var(--green); }
.rental-link strong { font-weight: 600; }
/* Flat identity panel: what you are driving, in one quiet block. */
.hero { padding: 22px 24px; margin-bottom: 14px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--ui-radius-lg); box-shadow: none; }
.hero-top { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
.hero-identity { flex: 1 1 0; min-width: 0; }
.hero-side { flex: 0 1 360px; min-width: 0; }
.hero-side .row-actions { justify-content: flex-end; }
.hero .eyebrow { margin-bottom: 4px; }
.hero h1 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin-bottom: 4px; }
.hero p { color: var(--muted); margin-bottom: 4px; }
.hero small { color: var(--muted); font-size: var(--ui-fs-xs); }
.hero .row-actions { flex: 0 0 auto; align-items: center; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.card { padding: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--ui-radius-lg); box-shadow: none; }
.card.wide { grid-column: 1 / -1; }
.next-action-card { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.vehicle-help { margin-top: 14px; }
.vehicle-help h2 { font-size: var(--ui-fs-md); }
.vehicle-help form, .portal-card { scroll-margin-top: 100px; }
.vehicle-help .vehicle-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vehicle-help .vehicle-actions > button { flex: 1 1 220px; }
.next-action-card .eyebrow { color: var(--green); }
.next-action-card h2 { font-size: var(--ui-fs-md); line-height: 1.35; margin-bottom: 4px; }
.next-action-card p { font-size: var(--ui-fs-sm); margin-bottom: 6px; }
.next-action-card button { min-height: 44px; margin-top: 4px; }
/* R-01: roadside, support and the two report entry points, in the hero, in
   every lifecycle state. Wraps to at most two rows at 390px. */
.help-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.help-strip .button, .help-strip button { min-height: 44px; flex: 1 1 auto; }
.help-strip .emergency-call { flex: 1 1 100%; }
.help-strip .contact-link { flex: 1 1 100%; font-size: var(--ui-fs-sm); }
.support-card { margin-top: 14px; }
.support-card h2 { font-size: var(--ui-fs-md); margin-bottom: 4px; }
.support-card p { margin: 6px 0 0; color: var(--muted); }
.support-card a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; color: var(--green); }
/* R-14: the hour and the street, under the plate, before pickup. */
.pickup-where { display: grid; gap: 2px; margin-bottom: 6px; }
.pickup-where span { color: var(--muted); font-size: var(--ui-fs-xs); font-weight: 600; }
.pickup-where a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; color: var(--green); }
.return-banner { margin-bottom: 14px; color: var(--ink); background: var(--paper); border-color: var(--ui-accent-line); }
.return-banner p { margin: 6px 0 0; color: var(--muted); }
.card-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; margin-bottom: 14px; }
.card-head h2 { margin: 0; }
.portal-card { padding: 0; overflow: clip; }
.portal-card > summary { min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; }
.portal-card > summary:hover { background: var(--ui-surface-2); }
.portal-card > summary::-webkit-details-marker { display: none; }
.portal-card > summary > span:first-child { min-width: 0; flex: 1; }
.portal-card > summary .eyebrow { display: block; margin: 0 0 2px; }
.card-title { display: block; font-size: var(--ui-fs-md); font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.summary-toggle { width: 9px; height: 9px; flex: 0 0 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px); transition: transform .16s ease; }
.portal-card[open] .summary-toggle { transform: rotate(225deg) translate(-2px, -2px); }
.portal-card[open] > summary { border-bottom: 1px solid var(--line); }
.portal-card.attention > summary { box-shadow: inset 3px 0 0 var(--ui-warn); }
.card-body { padding: 20px; }
.card-body > :last-child { margin-bottom: 0; }
.status { display: inline-flex; align-items: center; gap: 6px; width: fit-content; min-height: 24px; padding: 0 9px; border-radius: 999px; color: var(--green); background: var(--green-soft); border: 1px solid transparent; font-size: var(--ui-fs-xs); font-weight: 600; white-space: nowrap; }
.status.warn { color: var(--amber); background: var(--amber-soft); }
.status.bad { color: var(--red); background: var(--red-soft); }
.money { font-size: 1.85rem; font-weight: 650; letter-spacing: -.02em; margin: 0 0 2px; line-height: 1.15; }
.muted { color: var(--muted); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.row:first-of-type { border-top: 0; }
.row strong, .row span { overflow-wrap: anywhere; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: end; }
.row-actions button, .row-actions .button { min-height: 36px; padding: 6px 12px; font-size: var(--ui-fs-sm); }
.document-upload { position: relative; overflow: hidden; cursor: pointer; }
.document-upload input[type="file"] {
  position: absolute;
  inset: 0;
  min-height: 100%;
  opacity: 0;
  cursor: pointer;
}
.upload-group-hint { margin: 0 0 6px; font-size: var(--ui-fs-xs); }
.row-actions .upload-field { display: contents; }
.document-section + .document-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.document-section h3 { margin-bottom: 6px; }
.alert { padding: 12px 14px; margin-bottom: 14px; border-radius: var(--ui-radius-sm); color: var(--amber); background: var(--amber-soft); border: 1px solid transparent; }
.alert.danger { color: var(--red); background: var(--red-soft); }
.inline-form { padding-top: 16px; border-top: 1px solid var(--line); }
/* Accept and Dispute sit side by side, each with the one line that says what
   it does; on a phone they stack, full width, so neither is the small one. */
.charge-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; margin: 12px 0; }
.charge-choice button { width: 100%; min-height: 44px; }
.charge-choice p { margin: 6px 0 0; font-size: var(--ui-fs-sm); }
.charge-case:focus { outline: 2px solid var(--line); outline-offset: 4px; }
.form-actions, .vehicle-actions, .shop-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vehicle-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
.inline-form .emergency-call { width: 100%; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.check { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--ui-surface-2); border-radius: var(--ui-radius-sm); }
.check input { width: auto; min-height: 0; }
/* The weekly check-in: one line per problem to look for, grouped by area.
   The box sits first so the eye scans the column, the statement wraps. */
.inspection { display: grid; gap: 14px; margin: 4px 0 6px; }
.inspection-section { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 6px; }
.inspection-section legend { padding: 0; margin-bottom: 2px; font-size: var(--ui-fs-sm); font-weight: 600; color: var(--ui-ink-2); }
.inspection-line { justify-content: flex-start; align-items: flex-start; min-height: 44px; font-weight: 400; font-size: 16px; line-height: 1.35; }
.inspection-line input { flex: 0 0 22px; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ui-accent); }
.inspection-line span { flex: 1 1 auto; }
label > small.muted { font-weight: 400; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--green); }
.toast { z-index: 20; position: fixed; right: 22px; bottom: calc(22px + var(--ui-safe-bottom)); max-width: 380px; padding: 14px 17px; color: white; background: var(--ui-ink); border-radius: var(--ui-radius); box-shadow: var(--shadow); overflow-wrap: anywhere; }
.vehicle-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.vehicle-id span { color: var(--muted); font-size: var(--ui-fs-xs); font-weight: 600; }
.vehicle-id strong { white-space: nowrap; }
.contact-link, .support-box a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: var(--green);
}
.support-box { margin-top: 18px; padding: 14px; border-radius: var(--ui-radius-sm); background: var(--ui-surface-2); }
.support-box p { margin: 6px 0 0; }
.service-item { padding: 14px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--ui-radius); }
.service-item.attention { border-color: var(--ui-warn); background: var(--amber-soft); }
.service-item-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.service-item p { margin: 8px 0; }
.service-confirmation { color: var(--green); }
.reported-state { font-style: italic; }
.case-row { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }
.case-row span { color: var(--muted); }
.case-row.danger { color: var(--red); }
.shop-finder { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.shop-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.shop-search label { min-width: 0; }
.shop-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--ui-radius-sm); background: var(--amber-soft); }
.history-list { display: grid; gap: 0; }
.history-row { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid var(--line); }
.history-row:first-child { border-top: 0; }
.history-row div { min-width: 0; }
.history-row p { margin: 2px 0 0; }
.history-row small { display: block; margin-top: 3px; color: var(--muted); overflow-wrap: anywhere; }
.history-row time { flex: 0 0 auto; color: var(--muted); }
@media (max-width: 760px) {
  .shell { width: min(100% - 22px, 620px); margin-top: 14px; }
  .topbar { min-height: 58px; padding-inline: 14px; }
  .brand small { display: none; }
  .auth-card { margin-top: 4vh; padding: 24px 20px; }
  .portal-layout, .grid { grid-template-columns: 1fr; gap: 12px; }
  .rental-nav { position: static; }
  /* More than one rental: handsets use the native select (the OS picker is the
     better switcher on a phone); the button list is the desktop rail. */
  .rental-select-wrap { display: grid; margin: 0 0 12px; }
  .rental-button-list { display: none; }
  .row-actions button, .row-actions .button { min-height: 44px; }
  .rental-link { flex: 0 0 auto; width: auto; margin: 0; padding: 8px 12px; border-radius: 8px; }
  .rental-link strong { white-space: nowrap; }
  .rental-link small { white-space: nowrap; }
  .card.wide { grid-column: auto; }
  .hero { padding: 16px; }
  .hero-top, .card-head { align-items: start; flex-direction: column; gap: 10px; }
  .check-grid { grid-template-columns: 1fr; }
  button, .button, input, select { min-height: 44px; }
  .rental-nav { overflow: visible; }
  #rental-list { display: block; padding-bottom: 4px; }
  .row { align-items: stretch; flex-direction: column; gap: 10px; }
  .row-actions { width: 100%; justify-content: stretch; }
  .row-actions button, .row-actions .button { flex: 1 1 130px; min-height: 44px; }
  .toast { right: 11px; bottom: 11px; left: 11px; max-width: none; }
  .portal-card > summary { min-height: 60px; padding: 14px 16px; }
  .portal-card > summary .status { max-width: 132px; }
  .card-body { padding: 16px; }
  .vehicle-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-search { grid-template-columns: 1fr; }
  .shop-search button { width: 100%; }
  .history-row { align-items: stretch; flex-direction: column; gap: 4px; }
  .service-item-head { align-items: start; flex-direction: column; gap: 6px; }
  .next-action-card button { width: auto; }
}

@media (max-width: 420px) {
  .shell { width: calc(100% - 16px); margin-top: 10px; }
  .topbar { padding-inline: 12px; }
  .card, .hero { padding: 16px; border-radius: var(--ui-radius); }
  .auth-card { padding: 22px 18px; }
  .money { font-size: 1.7rem; }
}

/* Approved-shop finder and current-service card. */
.shop-list { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; gap: 8px; }
.shop-list .shop { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--ui-radius); line-height: 1.45; }
.shop-list .shop > div:first-child { min-width: 0; }
.shop-list .distance, .shop-list .shop-address { display: block; margin-top: 2px; color: var(--muted); overflow-wrap: anywhere; }
.shop-list .shop-actions { flex: 0 0 auto; }
.shop-list .button { padding-inline: 12px; }
.alert.warn { color: var(--amber); }

/* Phone hardening shared by the signed-in portal and onboarding shell. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.shell,
.portal-layout,
.portal-layout > *,
.card,
.hero,
.row {
  min-width: 0;
}

@media (max-width: 760px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }

  .toast {
    bottom: calc(11px + var(--ui-safe-bottom));
  }

  .shop-list .shop { align-items: stretch; flex-direction: column; }
  .shop-list .shop-actions { width: 100%; }
  .shop-list .shop-actions .button { flex: 1 1 120px; }
}

@media (min-width: 761px) and (max-width: 950px) and (max-height: 500px) {
  button,
  .button,
  .row-actions button,
  .row-actions .button,
  input,
  select {
    min-height: 44px;
  }

  .topbar {
    height: 58px;
    padding-inline: 14px;
  }

  .shell {
    width: min(100% - 24px, 920px);
    margin-block: 16px calc(44px + var(--ui-safe-bottom));
  }

  .portal-layout {
    grid-template-columns: 1fr;
  }

  .rental-nav {
    position: static;
  }

  .rental-select-wrap {
    display: grid;
  }

  .rental-button-list {
    display: none;
  }

  .hero,
  .card {
    padding: 16px;
  }

  .toast {
    right: 12px;
    bottom: calc(12px + var(--ui-safe-bottom));
  }
}
.portal-product { margin: 0 0 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--ui-radius); }
.portal-product legend { padding: 0 5px; font-weight: 650; }
.portal-product p { margin: 5px 0; }
.product-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.product-options label { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--ui-radius-sm); }
.product-options input { width: auto; }
.product-quote { margin-top: 14px; padding: 14px; border: 1px solid var(--ui-accent-line); border-radius: var(--ui-radius); background: var(--green-soft); }
.product-quote > div, .payment-lines > div { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; }
.product-quote .quote-total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.payment-lines { margin: 12px 0; padding: 8px 0; border-block: 1px solid var(--line); font-size: var(--ui-fs-sm); }

@media (max-width: 760px) {
  .product-options { grid-template-columns: 1fr; }
}

.brand-logo-img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; background: #ffffff; }

.announcement-banner {
  margin-bottom: 14px;
  border-left: 4px solid var(--green);
}

.announcement-banner p {
  margin: 6px 0 0;
  color: var(--muted);
}

/* Manual payment rails (Zelle / Cash App instructions) */
.memo-banner { font-size: var(--ui-fs); }
/* The memo is the one string the renter must copy exactly: ink on paper, not amber on a darkened amber (axe color-contrast). */
.memo-banner code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: 0.03em; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.copy-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.copy-chip { font-size: var(--ui-fs-sm); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ui-ink-2); min-height: 44px; font-weight: 600; }
/* 44px: the renter's touch-target floor; these are the buttons a phone user taps to copy the memo and amount. */
.copy-chip:hover { background: var(--ui-surface-3); }
.copy-chip.primary-chip { border-color: var(--green); color: var(--green); }
/* The clipboard is blocked in some in-app browsers. The button keeps its
   label; the value appears here where it can be selected by hand. */
.copy-fallback { flex-basis: 100%; margin: 6px 0 0; font-size: var(--ui-fs-sm); color: var(--ui-ink-2); }
.copy-fallback input { width: 100%; min-height: 40px; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--ui-fs); }
.provider-block { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.provider-block > div { flex: 1 1 220px; min-width: 0; }
.provider-block p { margin: 2px 0 0; overflow-wrap: anywhere; }
.payment-status-note { font-size: var(--ui-fs); }
/* Every tap target on the payment card is at least 44px tall (phone use). */
.payment-instructions-fold summary, .payment-receipts summary, .payment-claim-fold summary { cursor: pointer; padding: 8px 0; font-weight: 600; min-height: 44px; display: flex; align-items: center; color: var(--green); }
.payment-claim-form { display: grid; gap: 10px; margin-top: 8px; }
.payment-claim-form label { display: grid; gap: 4px; font-size: var(--ui-fs-sm); }
.payment-claim-form input, .payment-claim-form select { min-height: 44px; }
.provider-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
a.copy-chip { text-decoration: none; display: inline-flex; align-items: center; }
.provider-block .nowrap { white-space: normal; overflow-wrap: anywhere; }
/* Where the money actually goes. It sat in muted body text and read as part
   of the sentence around it, which is the one thing on this card a renter
   cannot afford to skim. */
.provider-block .payment-destination { color: var(--ink); font-weight: 650; }

/* One rental: no rental switcher, so the dashboard takes the full width. */
.rental-nav:has(#rental-list:empty) { display: none; }
.portal-layout:has(#rental-list:empty) { grid-template-columns: minmax(0, 1fr); }

/* Money and counts line up. */
.amount, .money, .hero h1, .next-action-card h2, .portal-card strong { font-variant-numeric: tabular-nums; }

/* Accident evidence remains usable with the phone keyboard and home-screen safe area. */
.accident-guide, .accident-report, [data-accident-form] { scroll-margin-top: 100px; }
.accident-guide, .accident-report { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line, #d9dde3); }
.accident-steps { padding-left: 1.4rem; }
.accident-steps li { margin-bottom: .85rem; }
[data-accident-form] fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 1rem; }
[data-accident-form] details { padding: .5rem 0; }
[data-accident-form] summary, .accident-report > details > summary { display: flex; align-items: center; min-height: 44px; margin-bottom: .75rem; }
.accident-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; margin: 1rem 0; }
.accident-files a { display: flex; flex-direction: column; gap: .5rem; overflow-wrap: anywhere; }
.accident-files img { width: 100%; height: 120px; object-fit: cover; border-radius: .5rem; }
.accident-selected, [data-accident-progress], .accident-report p { overflow-wrap: anywhere; white-space: pre-wrap; }
[data-accident-progress]:empty { display: none; }

@media (max-width: 760px), (min-width: 761px) and (max-width: 950px) and (max-height: 500px) {
  .hero-top { flex-direction: column; gap: 12px; }
  .hero-identity, .hero-side { flex: none; width: 100%; }
  .hero-side .row-actions { justify-content: flex-start; }
  .hero-side .row-actions button { flex: 0 0 auto; }
}

.inspection-section h3 { margin: 6px 0 2px; font-size: 17px; }
.inspection-observation { margin: 0; padding: 12px; border: 1px solid var(--ui-border, #d5dce3); border-radius: 10px; min-width: 0; }
.inspection-observation legend { padding: 0 4px; font-size: 16px; line-height: 1.4; }
.inspection-answers { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.inspection-answers label { display: flex; align-items: center; gap: 7px; min-height: 44px; font-size: 15px; font-weight: 400; }
.inspection-answers input { width: 20px; height: 20px; margin: 0; accent-color: var(--ui-accent); }