/* ─────────────────────────────────────────────────────────────────────
   iPhone (owner, Oct 2026: "easy to use on my phone from anywhere in the
   work … like Apple apps"). Loaded last. Everything that changes a layout is
   inside the one phone media query below, so tablets and desks look exactly
   as before. Behaviour that CSS can't do lives in src/phone.ts.
   ───────────────────────────────────────────────────────────────────── */

/* Phone-only controls are never shown on a tablet or desk. */
.ph-back, .ph-actions-btn { display: none; }

@media (max-width: 760px) {
  /* ── Nothing wider than the screen: no sideways scrolling, ever ── */
  html, body { max-width: 100%; overflow-x: clip; }
  .app, .page, main { max-width: 100vw; min-width: 0; }
  .page { overflow-x: clip; }
  main { overflow-wrap: anywhere; }
  main img, main video, main iframe, main canvas { max-width: 100%; }
  main pre { white-space: pre-wrap; }
  main { padding: 12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)) !important; }

  /* ── Type: inputs at 16 px so iOS never zooms in when one is tapped ── */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { font-size: 16px !important; max-width: 100%; }
  main h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }

  /* ── Tap targets: 44 px, the iPhone minimum ── */
  button:not(.ibx-name):not(.ibx-chip):not(.ibx-link):not(.dc-link):not(.linkish):not(.rec-link):not(.ibx-auto):not(.cf-main):not(.ibx-visit):not(.dal-name):not(.dal-x):not(.brandbar-logo):not(.dc-line):not(.dc-job-head):not(.card):not(.doc-row):not(.sale-row):not(.rec-hit):not(.cd-row):not(.ph-sheet-item),
  .button-link, a.askbtn, summary, select,
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) { min-height: 44px; }
  .tiny-btn, .dc-mini, .cf-btn, .rem-actions button, .ibx-thread-actions button, .ibx-qr, .docs-tool, .page .appt-big, .page .appt-actions button, .page .appt-call, .rec-btn, .todo-btn { min-height: 44px !important; font-size: 15px !important; }
  input[type=checkbox], input[type=radio] { width: 24px; height: 24px; }
  main select, .page .insp-pick select { min-height: 44px !important; }
  main a.button-link, main header a, .insp-page > header > * { display: inline-flex; align-items: center; justify-content: center; }
  a.btn, .appbar .brandbar-logo { min-height: 44px; display: inline-flex; align-items: center; }
  /* Links that read as text get a taller hit area without growing the text. */
  .linkish, .rec-link, .dc-link, .ibx-link { padding-top: 6px; padding-bottom: 6px; }

  /* ── Header: one row (logo or ‹ Back · page title · buttons), search under it ── */
  .appbar {
    grid-template-columns: auto minmax(0, 1fr) auto !important; gap: 8px 10px !important;
    padding: calc(6px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)) !important;
  }
  .appbar .brand-title { grid-column: 1; grid-row: 1; }
  .appbar .bb-das { font-size: 28px !important; }
  .appbar .titles { grid-column: 2; grid-row: 1; min-width: 0; text-align: left; }
  .appbar .titles h1 { font-size: 1.15rem !important; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .appbar .appbar-actions { grid-column: 3; grid-row: 1; flex-wrap: nowrap; gap: 6px; }
  .appbar .appbar-actions .askbtn { min-height: 44px; min-width: 44px; padding: 0 10px; justify-content: center; border-radius: 12px; }
  .appbar .appbar-actions .ab-text { display: none; }
  .appbar .appbar-actions .ab-ico { display: inline; font-size: 18px; }
  .appbar .appbar-actions .askbtn .icon { width: 20px; height: 20px; }
  .appbar form.search { grid-column: 1 / -1; grid-row: 2; }
  .appbar .search input { min-height: 44px !important; border-radius: 12px; }
  /* A page opened from a list: ‹ Back where the logo was. */
  .appbar.has-back .brand-title { display: none; }
  .appbar .ph-hback { grid-column: 1; grid-row: 1; }

  /* ‹ Back (iOS style: chevron and word in the brand colour, no box) */
  .ph-back {
    display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 8px 0 0; margin: 0 0 4px -4px;
    border: 0 !important; background: none !important; color: var(--brand) !important; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer;
  }
  .ph-back .ph-chev { font-size: 34px; line-height: 0.6; font-weight: 300; margin-top: -3px; }

  /* ── Bottom tab bar and everything floating above it clear the home indicator ── */
  .bottombar { padding: 2px max(2px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(2px, env(safe-area-inset-left)); }
  .bottombar button { min-height: 56px; font-size: 0.68rem; }
  .app { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  .notice { bottom: calc(72px + env(safe-area-inset-bottom)); }
  /* The More menu: an iPhone sheet from the bottom, one item per row, easy thumb reach. */
  .more-sheet { left: 0; right: 0; bottom: 0; grid-template-columns: 1fr; gap: 4px; max-height: 80vh; overflow-y: auto; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; }
  .more-sheet button { min-height: 50px; }
  .more-close { order: 99; }
  /* "Turn on sound": a small round bell instead of a wide pill over the page. */
  /* It sits in the header row, left of the person button, so it never covers the page. */
  .dal-sound { right: calc(max(12px, env(safe-area-inset-right)) + 52px); top: calc(6px + env(safe-area-inset-top)); bottom: auto; width: 44px; height: 44px; min-height: 44px; padding: 0; font-size: 0; display: inline-flex; align-items: center; justify-content: center; opacity: .9; }
  .dal-sound::before { content: "🔔"; font-size: 20px; }
  body:has(.dal-sound) .appbar .appbar-actions { padding-left: 52px; }
  .dal-sound.on::before { content: none; }
  .dal-sound.on { font-size: 18px; }
  /* Never on top of the document's action bar or a message being typed. */
body:has(.more-sheet) .dal-sound, body:has(.ph-sheet-wrap) .dal-sound, body:has(.dc-sheet-wrap) .dal-sound, body:has(.doc-viewer) .dal-sound, body:has(.pdf-viewer) .dal-sound, body:has(.page-viewer) .dal-sound, body:has(.img-viewer) .dal-sound, body:has(.sign-overlay) .dal-sound, body:has(.paper-review) .dal-sound { display: none; }
  .dal-stack { top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; width: auto; }

  /* Section tabs (Customers › Vehicles, Records …): one row that slides, like an iOS segmented bar. */
  .page-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 10px 12px 0; -webkit-overflow-scrolling: touch; }
  .page-tabs::-webkit-scrollbar { display: none; }
  .page-tabs .page-tab { flex: 0 0 auto; min-height: 40px; white-space: nowrap; }
  /* The visit's tabs wrap instead of running off the right edge. */
  .job-tabs { flex-wrap: wrap; overflow-x: visible; }
  .job-tabs button { flex: 1 1 auto; }

  /* ── List + detail pages: one pane at a time ── */
  /* Invoices / documents */
  .docs-page { display: block !important; }
  .docs-page .docs-side { position: static !important; max-height: none !important; }
  .docs-page .docs-list { overflow: visible; padding-right: 0; }
  .docs-page:not(.ph-detail) .docs-pane { display: none; }
  .docs-page.ph-detail .docs-side { display: none; }
  .docs-head h1 { font-size: 1.6rem !important; }
  .docs-head .primary { min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--brand); color: var(--on-brand); font-weight: 700; }
  /* In the list, no row looks "open" (nothing is beside it on a phone). */
  .docs-page:not(.ph-detail) .doc-row.on:not(.picked) { border-color: var(--line); box-shadow: none; }
  .doc-row { min-height: 64px; padding: 12px 14px; }
  .doc-row .doc-name { font-size: 16px; }
  .docs-tool { padding: 0 14px; }
  /* Messages: the list, then the conversation (app.ts keeps them as two pages). */
  .ibx { height: calc(100dvh - 128px - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height: 420px; border-radius: 12px; }
  .ibx-row { min-height: 64px; padding: 10px 12px; }
  .ibx-thread-head { flex-wrap: wrap; row-gap: 6px; }
  .ibx-thread-who { flex: 1 1 0; }
  .ibx-thread-actions { flex: 1 1 100%; flex-wrap: wrap; }
  .ibx-thread-actions button { flex: 1 1 auto; }
  .ibx-back { min-width: 44px; min-height: 44px; }
  .ibx-msg { max-width: 86%; }
  .ibx-compose.reply { flex-wrap: nowrap; }
  .ibx-compose-row { flex-direction: column; }
  .ibx-compose-row textarea { min-height: 64px; min-width: 0; width: 100%; }
  .ibx-send { flex-direction: row; }
  .ibx-send button { flex: 1 1 0; min-height: 44px !important; }
  .ibx-compose { padding: 8px 10px; gap: 4px; }
  .ibx-compose .attach { min-width: 0; margin-top: 2px; }
  /* Attach choices: one sliding row of chips, so the conversation keeps the screen. */
  .ibx-compose .attach-buttons { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; margin: 2px 0; }
  .ibx-compose .attach-buttons::-webkit-scrollbar { display: none; }
  .ibx-compose .attach-buttons button { flex: 0 0 auto; white-space: nowrap; min-height: 40px !important; }
  .ibx-compose-row textarea { min-height: 52px; }
  .ibx-more > summary { min-height: 36px; display: flex; align-items: center; }

  /* ── The estimate / repair order / invoice ── */
  .dc-two { grid-template-columns: 1fr !important; }
  .dc-top { flex-wrap: wrap; top: 0; }
  .dc-top > :first-child { min-width: 0; flex: 1 1 60%; }
  .dc-kind { overflow-wrap: anywhere; }
  .dc-row3 { grid-template-columns: 1fr 1fr; }
  .dc-line-desc { white-space: normal; }
  .dc-approve-btns, .dc-paygrid { grid-template-columns: 1fr 1fr; }
  /* The floating action bar: the main action and one "Actions" button that opens the sheet. */
  .dc-bar { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: calc(66px + env(safe-area-inset-bottom)); overflow: visible; flex-wrap: nowrap; }
  .dc-bar .dc-bar-btn { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .dc-bar .ph-hide { display: none !important; }
  .dc-bar .ph-actions-btn { display: inline-flex; align-items: center; justify-content: center; }
  .dc-bar:not(.ph-collapsed) { flex-wrap: wrap; }
  .dc { padding-bottom: 96px; }
  .dc-sheet { max-height: calc(92vh - env(safe-area-inset-top)); }

  /* ── Action sheet (phone.ts): like the iPhone share sheet ── */
  .ph-sheet-wrap { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; animation: phFade .18s ease; }
  .ph-sheet { width: 100%; max-height: 85vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); border-radius: 18px 18px 0 0; background: var(--panel-2); color: var(--text); box-shadow: 0 -10px 30px rgba(0,0,0,.4); animation: phUp .22s ease; }
  .ph-grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 4px auto 2px; }
  .ph-sheet-title { margin: 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); }
  .ph-sheet-list { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
  .ph-sheet-item { min-height: 54px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font: inherit; font-size: 17px; font-weight: 600; text-align: left; }
  .ph-sheet-item:last-child { border-bottom: 0; }
  .ph-sheet-item.primary { color: var(--brand); }
  .ph-sheet-item.danger { color: var(--bad-line, #f87171); }
  .ph-sheet-item:disabled { opacity: .45; }
  .ph-sheet-cancel { min-height: 54px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 17px; font-weight: 700; }
  @keyframes phUp { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
  @keyframes phFade { from { opacity: 0; } to { opacity: 1; } }

  /* ── Tables become stacked cards (phone.ts labels each cell with its column) ── */
  table.ph-cards, table.ph-cards tbody, table.ph-cards tfoot, table.ph-cards tr, table.ph-cards td { display: block; width: 100%; }
  table.ph-cards thead { display: none; }
  table.ph-cards tr { margin: 0 0 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
  table.ph-cards td { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0 !important; border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent) !important; text-align: right !important; white-space: normal !important; }
  table.ph-cards td:last-child { border-bottom: 0 !important; }
  table.ph-cards td::before { content: attr(data-label); flex: 0 0 auto; max-width: 50%; text-align: left; color: var(--muted); font-weight: 600; }
  table.ph-cards td:not([data-label])::before { content: none; }
  table.ph-cards td:first-child { font-weight: 700; }
  /* A table's own sideways scroller is no longer needed once rows are cards. */
  :has(> table.ph-cards) { overflow-x: visible !important; }

  /* ── Page by page ── */
  /* Customers: letters in one sliding row instead of four rows of buttons. */
  .cd-letters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .cd-letters::-webkit-scrollbar { display: none; }
  .cd-letter { flex: 0 0 auto; min-height: 44px; min-width: 44px; }
  .cd-sort, .cd-page { min-height: 44px; }
  .cd-row { padding: 10px 14px; min-height: 60px; }
  .cust-contact-grid { grid-template-columns: 1fr; }
  .cust-edit-form { grid-template-columns: 1fr; }
  .cf-tabs { scrollbar-width: none; }
  .cf-tab { min-height: 40px; }
  /* Settings: long file names and senders wrap; cards follow the theme. */
  .settings-page .mailbox-status { background: var(--panel); }
  .mailbox-status .mb-file > * { min-width: 0; overflow-wrap: anywhere; }
  .rate-row3 { grid-template-columns: minmax(0, 1fr) 96px 44px; }
  /* Records, inspections, reminders, scans: rows stack, buttons wrap under the text. */
  .rec-row-text { min-width: 0; flex-basis: 100%; }
  .rec-sum-text span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .rec-vehicle > summary, .rec-visit > summary { flex-wrap: wrap; padding: 12px; }
  .rec-sum-text { flex: 1 1 0; }
  .rec-badges { flex: 1 1 100%; justify-content: flex-start; padding-left: 36px; }
  .rec-visits { padding: 0 8px 8px; }
  .rec-visit-body { padding: 10px 10px 14px; }
  .insp-grid { grid-template-columns: 1fr !important; }
  .insp-actions { grid-template-columns: 1fr 1fr !important; }
  .scans-page .sr-row { grid-template-columns: 1fr; }
  .scans-page .sr-actions { flex-wrap: wrap; }
  .finish-fix-row { grid-template-columns: 1fr; }
  .reminders-page .rm-tab { min-height: 40px; }
  /* Appointments: the week as one tidy row; actions two per row. */
  .page .appt-days { gap: 3px; }
  .page .appt-daybtn { min-height: 56px; padding: 4px 0; }
  .page .appt-primary { grid-template-columns: 1fr 1fr; }
  .page .appt-card { padding: 0 12px 12px; }
  .page .appt-card .appt-top { margin: 0 -12px 10px; padding: 10px 12px; }
  /* Visit page: the customer box and the long VIN fit. */
  .visit-head .who { overflow-wrap: anywhere; }
  .vin-row { flex-wrap: wrap; }
  .vin-row input { flex: 1 1 100%; }
  form.assign { flex-wrap: wrap; }
  form.assign select { flex: 1 1 100%; }
  .addstaff, .assign { grid-template-columns: 1fr; }
  .pair2, .partrow { grid-template-columns: 1fr; }
  /* Cars for sale: photo on top of the text. */
  .afg-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
  /* Document viewer and photo viewer: clear the notch and the home bar. */
  .pdf-viewer { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .pdf-bar { flex-wrap: wrap; }
  .img-viewer { padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); }
  .sign-overlay { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .paper-review { padding-top: env(safe-area-inset-top); }
  aside.command { left: 8px; right: 8px; width: auto; bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* Reviews screen on a phone: score beside the name, buttons full width under it. */
@media (max-width: 760px) {
  .rv-head { padding: 12px; }
  .rv-head-top { flex-direction: column; align-items: stretch; }
  .rv-range { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px !important; }
  .rv-range .stage-tab { justify-content: center; min-height: 44px; padding: 0 6px; font-size: 14px; }
  .rv-sec > summary { padding: 0 12px; font-size: 1rem; }
  .rv-hint, .rv-empty, .rv-bulk-bar { padding-left: 12px; padding-right: 12px; }
  .rv-sub > summary { padding-left: 12px; }
  .rv-row { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 8px; }
  .rv-row.is-happy, .rv-row.is-unhappy { grid-template-columns: 64px minmax(0, 1fr); align-items: start; }
  .rv-score { flex-direction: column; align-items: center; padding: 8px 2px; }
  .rv-score-num { font-size: 1.25rem; }
  .rv-visit { white-space: normal; }
  .rv-row .rv-actions { grid-column: 1 / -1; justify-content: stretch; max-width: none; }
  .rv-actions button, .rv-bulk { flex: 1 1 140px; min-height: 46px; white-space: normal; }
  .rv-actions .pill { flex-basis: 100%; text-align: center; }
  .rv-actions [role=status] { text-align: left; }
  .rv-bulk { flex: 1 1 100%; }
}

/* Home-screen app: full-screen viewers clear the status bar on iPad too (black-translucent bar). */
@media (display-mode: standalone) {
  .pdf-viewer, .page-viewer, .img-viewer, .sign-overlay, .paper-review { padding-top: env(safe-area-inset-top); }
}