/* ============================================================
   New look on phones: native iOS feel.
   - Dialogs, confirms, menus and the notification list rise from
     the bottom as sheets (grabber, rounded top, safe-area aware).
   - Inputs are 16px (iOS zooms anything smaller) and 44px tall.
   - Lists read as inset grouped cards; buttons are thumb sized.
   Loaded after shell.css by both v2 layouts.
   ============================================================ */

@media (max-width: 640px){

  body.v2 {-webkit-tap-highlight-color: transparent;}

  /* .ios-hide: dense data (wide pivots, extra columns) that has no usable
     phone form is simply not shown on phones */
  body.v2 .ios-hide {display: none;}

  /* Header: only the essentials on phones */
  body.v2 .v-header__ai, body.v2 .header-dnd {display: none;}


  /* ---- Large title, as an iOS navigation bar ---- */
  body.v2 .ui-page-header h1 {font-size: 26px; font-weight: 700; letter-spacing: -.02em;}
  body.v2 .ui-page-header .actions {margin-left: 0; flex-basis: 100%;}

  /* ---- Inputs: 16px stops iOS zooming the page on focus ---- */
  body.v2 :is(#ui-page-content, .ui-modal, .app-dialog, .v-header) :is(input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=url], input[type=password], input[type=search], input:not([type]), select, textarea) {font-size: 16px; min-height: 44px; border-radius: 10px;}
  body.v2 textarea {min-height: 88px;}
  body.v2 :is(form.u-flex, .report-filter-bar, .report-filters, .finza-filters form, .finza-rep-filter, .statement-filters, .form-group-filter) :is(input, select) {flex: 1 1 100%; width: 100%; min-width: 0; height: 44px;}
  body.v2 :is(.report-filter-bar, form.u-flex) > :is(button[type=submit], input[type=submit]), body.v2 .form-group-filter__submit, body.v2 .form-group-filter__submit input[type=submit] {width: 100%; height: 44px; margin: 0;}
  body.v2 .form-group-filter select {min-width: 0; width: 100%;}
  /* Expense Cards toolbar: tabs scroll on their own line, then the filters two to a row, search full width */
  body.v2 .xc-toolbar .xc-tabs {flex: 1 1 100%; overflow-x: auto; scrollbar-width: none;}
  body.v2 .xc-toolbar :is(.xc-user-filter, .xc-method-filter, .xc-dir-filter) {flex: 1 1 0; min-width: 0; max-width: none; height: 44px;}
  body.v2 .xc-toolbar .xc-user-filter {flex-basis: 100%;}
  body.v2 .xc-toolbar .xc-search {flex: 1 1 100%; max-width: none; height: 44px;}
  /* Page titles a little smaller so a title with a reference stays on one line */
  body.v2 .ui-page-header h1 {font-size: 23px;}

  /* Finance filters: label above, then the controls; never a label squeezed beside a date */
  body.v2 :is(.finza-filters form, .finza-rep-filter) {display: flex; flex-wrap: wrap; align-items: center; gap: 8px;}
  body.v2 :is(.finza-filters form, .finza-rep-filter) > label {flex: 1 1 100%; margin: 0; white-space: nowrap; font-size: var(--fs-small); color: var(--muted);}
  body.v2 :is(.finza-filters form, .finza-rep-filter) > :is(input, select) {flex: 1 1 140px; width: auto;}
  body.v2 :is(.finza-filters form, .finza-rep-filter) > :is(button, input[type=submit]) {flex: 0 0 auto; width: auto; height: 44px;}
  body.v2 .form-group-filter .form-group {flex: 1 1 100%;}

  /* Forms: one column, label over field, actions full width at the end */
  body.v2 :is(.ui-form-group, .ui-form-group > form) {grid-template-columns: minmax(0, 1fr); gap: 12px;}
  body.v2 .ui-form-group:has(> form), body.v2 .ui-form-group:not(:has(> form)) {padding: 16px;}
  body.v2 :is(.ui-form-group, .ui-form-group > form) > dl.submit {flex-direction: column-reverse; align-items: stretch;}
  body.v2 :is(.ui-form-group, .ui-form-group > form) > dl.submit > dd {display: flex; flex-direction: column-reverse; gap: 8px;}
  body.v2 :is(.ui-form-group, .ui-form-group > form) > dl.submit :is(button, input[type=submit], a.ui-btn) {width: 100%; height: 46px; margin: 0; float: none; justify-content: center; font-size: 16px;}

  /* ---- Buttons and section actions: thumb sized ---- */
  body.v2 .ui-btn, body.v2 #ui-page-content .ui-section-header > .actions > :is(a, div):not(.no-actions) {min-height: 38px; font-size: 14px;}
  body.v2 #ui-page-content .ui-section-header > .actions {display: flex; flex-wrap: wrap; gap: 6px;}
  /* Two or more header buttons: title on its own line, the buttons one row
     beneath it (never a right-aligned column) */
  body.v2 #ui-page-content .ui-section-header:has(> .actions > :nth-child(2)) {flex-wrap: wrap; row-gap: 8px;}
  body.v2 #ui-page-content .ui-section-header > .actions:has(> :nth-child(2)) {flex: 1 1 100%; margin-left: 0; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;}
  body.v2 #ui-page-content .ui-section-header > .actions:has(> :nth-child(2)) > * {flex: 0 0 auto; white-space: nowrap; min-height: 34px; padding: 0 10px; font-size: 13px;}

  /* Form rows (legacy .form-group.cols-N floats): never more than two fields
     across on a phone, two equal columns, so no select shrinks to two letters */
  body.v2 .form-group:is(.cols-2, .cols-3, .cols-4, .cols-5, .cols-6, .cols-7, .cols-8) {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 10px;}
  body.v2 .form-group:is(.cols-2, .cols-3, .cols-4, .cols-5, .cols-6, .cols-7, .cols-8)::after {display: none;}
  body.v2 .form-group:is(.cols-2, .cols-3, .cols-4, .cols-5, .cols-6, .cols-7, .cols-8) > [class*="col-"] {float: none; width: auto !important; margin: 0; min-width: 0;}
  body.v2 .form-group:is(.cols-2, .cols-3, .cols-4, .cols-5, .cols-6, .cols-7, .cols-8) > [class*="col-"] :is(input, select, textarea) {width: 100% !important; min-width: 0; box-sizing: border-box;}

  /* Rows of fields in a box (store pricing, suppliers, stock levels): each
     row becomes a small card, the store or supplier name on top and its
     fields in an even three-column grid beneath; the box grows taller */
  body.v2 .form-options-box {max-height: 360px;}
  body.v2 .supplier-line:has(select, input[type="text"], input[type="number"]) {flex-wrap: wrap; gap: 6px; padding: 8px 0; border-bottom: var(--border-faint-line);}
  body.v2 .supplier-line:last-child {border-bottom: 0;}
  body.v2 .supplier-line:has(select, input[type="text"], input[type="number"]) > :is(label, .supplier-label) {order: -1; flex: 1 1 100% !important; width: auto !important; min-width: 0; font-weight: 500; line-height: 20px !important;}
  body.v2 .supplier-line > div {float: none; flex: 1 1 100%; margin: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;}
  body.v2 .supplier-line > .u-fr {float: none; flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;}
  body.v2 .supplier-line :is(input[type="text"], input[type="number"], select) {width: 100% !important; height: 40px !important; min-height: 40px; padding: 0 10px !important; box-sizing: border-box; font-size: 16px;}
  body.v2 .supplier-line > :is(input[type="text"], input[type="number"], select) {flex: 1 1 calc((100% - 6px) / 2); width: auto !important;}
  body.v2 .form-group:is(.cols-2, .cols-3, .cols-4, .cols-5, .cols-6, .cols-7, .cols-8) > [class*="col-"] > label {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

  /* An empty notice is not shown */
  body.v2 :is(.warn-subtle, .info-subtle, .info-subtle-blue):has(> .message:empty) {display: none;}

  /* An empty table shows its message, not a row of crushed headings */
  body.v2 #ui-page-content table:has(> tbody > tr:only-child > td[colspan]) > thead,
  body.v2 #ui-page-content .ui-table:not(:has(> .ui-table-body > .ui-table-row:not(.no-results))) > .ui-table-head {display: none;}

  /* ---- Lists: inset grouped cards with tap feedback ---- */
  body.v2 #ui-page-content > .wrap > section {border-radius: 12px;}
  body.v2 .ui-table.is-stack .ui-table-row, body.v2 table.is-stack > tbody > tr {padding: 12px 14px; min-height: 44px;}
  body.v2 a.ui-table-row:active, body.v2 .ui-table.is-stack a.ui-table-row:active {background: var(--hover);}
  /* Totals by Store date range: one row of  <  from  to  >  (the labels go, the dates say it) */
  body.v2 .store-totals-header {flex-wrap: wrap; row-gap: 8px;}
  body.v2 .store-totals-header > h2 {flex: 1 1 100%;}
  body.v2 .store-totals-form {display: flex; flex: 1 1 100%; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0;}
  body.v2 .store-totals-form > label {display: flex; flex: 1 1 0; min-width: 0; margin: 0; font-size: 0;}
  body.v2 #ui-page-content .store-totals-form > label > input {width: 100%; min-width: 0; padding: 0 6px;}
  body.v2 .store-totals-form > .store-totals-nav {flex: 0 0 auto; font-size: 22px;}
  body.v2 .ui-details-list {grid-template-columns: minmax(0, 1fr);}
  body.v2 .ui-details-list > dl {padding: 11px 0;}

  /* ---- Bottom sheet dialogs (ui-modal) ---- */
  body.v2.uim-open .ui-modal {display: flex; align-items: flex-end; overflow: hidden;}
  body.v2 .ui-modal .container {position: fixed; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; margin: 0; min-height: 0; max-height: calc(100dvh - env(safe-area-inset-top) - 10px); padding: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-radius: 14px 14px 0 0; box-shadow: 0 -6px 30px rgba(0,0,0,.18); transform: translateY(100%); opacity: 1; transition: transform .38s cubic-bezier(.22, 1, .36, 1);}
  body.v2 .ui-modal .container.show {transform: none;}
  body.v2 .ui-modal .container:has(.ui-modal-inner-wide), body.v2 .ui-modal.file-preview .container {width: 100%;}
  body.v2 .ui-modal-inner > .header {position: sticky; top: 0; z-index: 2; padding: 8px 52px 12px; text-align: center; font-size: 17px; font-weight: 600; background: var(--white); border-radius: 14px 14px 0 0;}
  body.v2 .ui-modal-inner > .header::before {content: ""; display: block; width: 36px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: var(--border);}
  /* The close button stays pinned to the sheet's top corner while it scrolls */
  body.v2 .ui-modal div.close-modal {position: sticky; top: 14px; right: auto; float: right; z-index: 3; width: 30px; height: 30px; margin: 14px 12px -44px 0; border-radius: 50%; background: var(--border-faint);}
  body.v2 .ui-modal div.close-modal::before, body.v2 .ui-modal div.close-modal::after {top: 14px; left: 9px; width: 12px; background-color: var(--mid);}
  body.v2 .ui-modal-inner > .content {padding: 14px 16px 12px;}
  body.v2 .uim-tabs {padding: 0 4px;}
  body.v2 .ui-modal-inner > .footer {position: sticky; bottom: 0; z-index: 2; height: auto; flex-wrap: wrap; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--white); border-radius: 0;}
  body.v2 .ui-modal-inner > .footer :is(.left, .right) {flex: 1 1 100%; margin: 0;}
  body.v2 .ui-modal-inner > .footer :is(.left, .right) button {flex: 1 1 0; height: 46px; line-height: 44px; font-size: 16px; border-radius: 12px;}
  body.v2 .ui-modal-inner > .footer .left:empty {display: none;}

  /* ---- Confirm / alert / prompt: an iOS action sheet ---- */
  body.v2 .app-dialog-backdrop {align-items: flex-end;}
  body.v2 .app-dialog {width: calc(100% - 16px); max-width: none; margin: 0 8px calc(8px + env(safe-area-inset-bottom)); border-radius: 14px; transform: translateY(110%); transition: transform .32s cubic-bezier(.22, 1, .36, 1);}
  body.v2 .app-dialog-backdrop.show .app-dialog {transform: none;}
  body.v2 .app-dialog-body {padding: 18px 18px 14px; text-align: center; font-size: 15px;}
  body.v2 .app-dialog-input {font-size: 16px; min-height: 44px;}
  body.v2 .app-dialog-footer {flex-direction: column-reverse; gap: 8px; padding: 10px 12px 12px;}
  body.v2 .app-dialog-btn {width: 100%; height: 48px; font-size: 17px; border-radius: 12px;}
  body.v2 .app-dialog-btn.cancel {font-weight: 600;}

  /* ---- Menus (account switcher, user, notifications): bottom sheets ---- */
  body.v2 .v-menu.is-open .v-menu__pop, body.v2 .v-header .header-notif-dropdown {position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 75dvh; overflow-y: auto; overscroll-behavior: contain; padding: 22px 10px calc(12px + env(safe-area-inset-bottom)); border: 0; border-radius: 14px 14px 0 0; box-shadow: 0 0 0 100vmax rgba(20, 24, 22, .35); animation: v-sheet-up .32s cubic-bezier(.22, 1, .36, 1);}
  body.v2 .v-menu.is-open .v-menu__pop::before, body.v2 .v-header .header-notif-dropdown::before {content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--border);}
  body.v2 .v-menu__item {min-height: 44px; font-size: 16px;}
  body.v2 .v-acct__list {max-height: none;}
  body.v2 .v-acct__search input {height: 40px; font-size: 16px;}

  /* Side drawer: wider on phones, like an iOS sidebar */
  body.v2 .v-side {width: min(86vw, 320px);}
  body.v2 .v-side__link, body.v2 .v-side__head {min-height: 42px; font-size: 15px;}

  /* Toasts sit above the home indicator */
  body.v2 .ui-notification {left: 8px; right: 8px; transform: none; max-width: none; bottom: calc(12px + env(safe-area-inset-bottom)); border-radius: 14px;}
}

@keyframes v-sheet-up {from {transform: translateY(100%);} to {transform: none;}}
@media (prefers-reduced-motion: reduce){
  body.v2 .ui-modal .container, body.v2 .app-dialog {transition: none;}
  body.v2 .v-menu.is-open .v-menu__pop, body.v2 .v-header .header-notif-dropdown {animation: none;}
}

@media (max-width: 640px){
  /* Header actions keep their label on phones (the legacy rule hid it) */
  body.v2 .ui-section-header .actions .text, body.v2 .ui-section-header .links .text {display: inline;}
  /* List toolbar: search / filters left, a single add action as a square
     icon button beside them (more than one action wraps above instead) */
  body.v2 #ui-page-content > .wrap > section:has(> .ui-section-header.is-untitled + :is(form, input)) {align-items: start; row-gap: 10px;}
  body.v2 #ui-page-content > .wrap > section > .ui-section-header.is-untitled:has(> .actions > :only-child) + :is(form, input) ~ * {grid-column: 1 / -1;}
  body.v2 #ui-page-content .ui-section-header.is-untitled > .actions > .add:only-child {width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 10px;}
  body.v2 #ui-page-content .ui-section-header.is-untitled > .actions > .add:only-child .text {display: none;}
  body.v2 #ui-page-content .ui-section-header.is-untitled > .actions > .add:only-child .mdi {font-size: 22px;}
  body.v2 #ui-page-content > .wrap > section:has(> .ui-section-header.is-untitled > .actions > :nth-child(2)) {grid-template-columns: minmax(0, 1fr);}
  body.v2 #ui-page-content > .wrap > section:has(> .ui-section-header.is-untitled > .actions > :nth-child(2)) > .ui-section-header {grid-column: 1; grid-row: 1; justify-content: flex-end;}
  body.v2 #ui-page-content > .wrap > section:has(> .ui-section-header.is-untitled > .actions > :nth-child(2)) > .ui-section-header + form {grid-column: 1; grid-row: 2;}
  body.v2 .contacts-filter-row {flex-wrap: wrap; margin: 0;}
  body.v2 .contacts-filter-row :is(input, select) {flex: 1 1 100%;}
}

/* ---- Compact list rows (every clickable view-rows list) ----
   iOS table style: tight rows, title line in ink, one muted detail line
   that truncates, chevron right; a leading avatar sits beside the text */
@media (max-width: 640px){
  body.v2 .ui-table.view-rows .ui-table-row {align-items: center; gap: 0 10px; padding: 9px 30px 9px 14px; min-height: 0; border-bottom: var(--border-faint-line);}
  body.v2 .ui-table.view-rows .ui-table-row:last-child {border-bottom: 0;}
  body.v2 .ui-table.view-rows .ui-table-cell:not([style*="width"]):not([class*="u-w"]):not(.right):not(.view) {font-size: 14px; line-height: 19px; color: var(--ink); padding: 0;}
  body.v2 .ui-table.view-rows .ui-table-cell.u-flex {display: flex !important; align-items: center; gap: 10px;}
  body.v2 .ui-table.view-rows .ui-table-cell.u-flex > :last-child {flex: 1 1 auto; min-width: 0;}
  body.v2 .ui-table.view-rows .ui-table-cell :is(.u-fs12, .ui-table-cell-comment) {display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; line-height: 16px; color: var(--muted);}
  body.v2 .ui-table.view-rows .ui-table-cell br:has(+ :is(.u-fs12, .ui-table-cell-comment)) {display: none;}
  body.v2 .ui-table.view-rows .contact-card-avatar {width: 32px; height: 32px; flex: 0 0 32px; font-size: 12px;}
  body.v2 .ui-table.view-rows .ui-table-cell:is([style*="width"], [class*="u-w"]):not(.right):not(.view) {font-size: 11px; line-height: 15px; color: var(--muted); padding: 0 8px 0 0;}
  body.v2 .ui-table.view-rows .ui-table-cell.right {font-size: 13px; color: var(--ink);}
  body.v2 .ui-table.view-rows .ui-table-cell.view {right: 10px;}
  body.v2 .ui-table.view-rows .ui-table-cell.view i {font-size: 16px; color: var(--light);}
}

/* ---- Page-specific phone fixes ---- */
@media (max-width: 640px){
  /* Expenses monthly pivot: title, then the month stepper on its own line */
  body.v2 .xc-pivot-head {flex-wrap: wrap;}
  body.v2 .xc-pivot-nav {flex: 1 1 100%;}
  body.v2 .xc-pivot-nav a, body.v2 .xc-pivot-nav-off {width: 44px; height: 44px; font-size: 22px;}
  body.v2 .xc-pivot-date {flex: 1 1 0; min-width: 0; height: 44px;}
  /* Payment run suppliers: name + total on the first line, invoice count and oldest due below */
  body.v2 .payment-run-supplier-head {flex-wrap: wrap; row-gap: 2px;}
  body.v2 .payment-run-supplier-name {flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
  body.v2 .payment-run-supplier-total {order: 1; min-width: 0;}
  body.v2 .payment-run-supplier-count {order: 2; margin-left: 46px;}
  body.v2 .payment-run-supplier-due {order: 3; margin-left: 6px;}
  /* Report date stepper: the date in the middle gives way first */
  body.v2 .forwards-backwards-nav {gap: 6px;}
  body.v2 .forwards-backwards-nav .middle {flex: 1 1 0; min-width: 0;}
  /* Finza cleanup "set all": its own full-width line */
  body.v2 .finza-mixedcat-sup .mc-setall {flex: 1 1 100%; margin-left: 0;}
  body.v2 .finza-mixedcat-sup .mc-setall select {flex: 1 1 0; min-width: 0; width: auto;}
  /* Hiring setup pay rates: the three fields share the row */
  body.v2 .hsetup-rate-row input {flex: 1 1 0; min-width: 0;}
  body.v2 .hsetup-rate-row .btn {flex: 0 0 auto;}
  /* Finza settings: title row, then the fields and Save on their own full-width row */
  body.v2 .finza-settings-card-action {flex-wrap: wrap;}
  body.v2 .finza-settings-card-action > .u-flex1 {flex: 1 1 calc(100% - 50px) !important;}
  body.v2 .finza-settings-card-action > .finza-threshold-field {flex: 1 1 calc(50% - 8px);}
  body.v2 .finza-threshold-input input {width: 100%;}
  /* Finance overview: custom range wraps, presets read as a segmented row */
  body.v2 .fo-custom {flex-wrap: wrap; flex: 1 1 100%;}
  body.v2 .fo-custom input {flex: 1 1 40%; min-width: 0;}
  body.v2 .fo-custom button {flex: 1 1 100%; height: 44px;}
  body.v2 .fo-period-label {margin-left: 0; flex-basis: 100%;}
  body.v2 .fo-period {gap: 6px;}
  body.v2 .fo-preset {height: 36px;}
}

/* ---- iOS controls on phones ---- */
@media (max-width: 640px){
  /* Switch: iOS proportions */
  body.v2 .toggle-switch {width: 51px; height: 31px;}
  body.v2 .toggle-slider {border-radius: 31px; background-color: #E3E6E4;}
  body.v2 .toggle-slider:before {width: 27px; height: 27px; left: 2px; bottom: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.18);}
  body.v2 .toggle-switch input:checked + .toggle-slider:before {transform: translateX(20px);}

  /* Segmented control: grey track, the selected segment a raised white pill */
  body.v2 .v-seg {display: flex; width: 100%; padding: 2px; gap: 2px; border: 0; border-radius: 9px; background: #EEEFEE;}
  body.v2 .v-seg > :is(a, button) {flex: 1 0 auto; justify-content: center; height: 32px; border: 0; border-radius: 7px; font-size: 14px;}
  body.v2 .v-seg > :is(a, button):is(.is-active, .active, [aria-selected=true]) {background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12);}

  /* Settings-style tabs scroll as one segmented strip */
  body.v2 .ui-tabbed-sheet > nav {gap: 2px; padding: 2px; border: 0; border-radius: 9px; background: #EEEFEE;}
  body.v2 .ui-tabbed-sheet > nav a {margin: 0; padding: 0 12px; height: 32px; display: inline-flex; align-items: center; border: 0; border-radius: 7px; font-size: 14px;}
  body.v2 .ui-tabbed-sheet > nav a.active {background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12);}

  /* Inline checkbox / radio rows: thumb-sized */
  body.v2 #ui-page-content :is(input[type=checkbox], input[type=radio]) {width: 20px; height: 20px;}
}
@media (max-width: 640px){
  body.v2 .v-seg > .is-active .v-seg__n {color: var(--muted);}
}
@media (max-width: 660px){
  /* The legacy layout hid the settings tabs on phones; the new look keeps
     them as a scrolling segmented strip */
  body.v2 .settings-container.ui-tabbed-sheet {display: block;}
  body.v2 .ui-tabbed-sheet > nav {overflow-x: auto; scrollbar-width: none;}
  body.v2 .ui-tabbed-sheet > nav::-webkit-scrollbar {display: none;}
}
@media (max-width: 660px){
  body.v2 .ui-tabbed-sheet > nav a {flex: 0 0 auto;}
}

/* iOS list rows also on tablets / narrow windows, where these tables squeeze */
@media (max-width: 900px){
  /* ---- iOS list rows (.v-ios-list): title + right value on line one, muted
     detail line under it, chevron / overflow menu centred on the right.
     Cells say what they are: .ios-title, .ios-end, .ios-sub, .ios-sub-end,
     .ios-hide (not shown on phones). ---- */
  body.v2 #ui-page-content .ui-table.v-ios-list, body.v2 #ui-page-content .ui-table.v-ios-list > .ui-table-body {display: block !important; width: auto; table-layout: auto;}
  body.v2 #ui-page-content .ui-table.v-ios-list > .ui-table-head {display: none;}
  body.v2 #ui-page-content .ui-table.v-ios-list .ui-table-row {position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 2px; height: auto; min-height: 56px; width: auto; padding: 10px 40px 10px 16px;}
  body.v2 #ui-page-content .ui-table.v-ios-list .ui-table-row::after {content: ""; order: 3; flex: 0 0 100%; height: 0;}
  body.v2 #ui-page-content .ui-table.v-ios-list .ui-table-row > .ui-table-cell {display: block; order: 4; flex: 0 0 auto; width: auto !important; min-width: 0; max-width: none; height: auto; padding: 0; border: 0; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--muted); text-align: left; white-space: nowrap;}
  body.v2 #ui-page-content .ui-table.v-ios-list .ui-table-row > .ui-table-cell.ios-title {order: 1; flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink);}
  body.v2 #ui-page-content .ui-table.v-ios-list .ui-table-row > .ui-table-cell.ios-end {order: 2; font-size: 15px; line-height: 20px; color: var(--ink); font-variant-numeric: tabular-nums;}
  body.v2 #ui-page-content .ui-table.v-ios-list .ui-table-row > .ui-table-cell.ios-sub {overflow: hidden; text-overflow: ellipsis; flex-shrink: 1;}
  body.v2 #ui-page-content .ui-table.v-ios-list .ui-table-row > .ui-table-cell.ios-sub ~ .ios-sub::before {content: "\00B7"; margin-right: 6px;}
  body.v2 #ui-page-content .ui-table.v-ios-list .ui-table-row > .ui-table-cell.ios-sub-end {order: 5; margin-left: auto;}
  body.v2 #ui-page-content .ui-table.v-ios-list .ui-table-row > .ui-table-cell.ios-sub:not(:has(~ .ios-sub)) {flex: 1 1 0; min-width: 24px;}
  body.v2 #ui-page-content .ui-table.v-ios-list .ui-table-row > .ui-table-cell:is(.ios-sub, .ios-sub-end) {font-size: 12px;}
  body.v2 #ui-page-content .ui-table.v-ios-list .ui-table-row > .ui-table-cell:is(.ios-hide, :empty) {display: none;}
  body.v2 #ui-page-content .ui-table.v-ios-list .ui-table-row > .ui-table-cell:is(.view, .actions) {position: absolute; top: 0; bottom: 0; right: 4px; margin: auto 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 20px; color: var(--light);}
  body.v2 #ui-page-content .ui-table.v-ios-list .ui-table-row > .ui-table-cell.actions > i {font-size: 20px; color: var(--mid);}
  body.v2 #ui-page-content .ui-table.v-ios-list .ui-table-row > .ui-table-cell.view i {font-size: 20px; line-height: 1;}
}

/* Store Performance: its grids scroll sideways on phones, figures never cut */
@media (max-width: 640px){
  body.v2 :is(.sp-recon-table, .sp-matrix) {width: max-content; min-width: 100%; font-size: 12px;}
  body.v2 :is(.sp-recon-table, .sp-matrix) :is(td, th) {white-space: nowrap; overflow: visible; text-overflow: clip; max-width: none;}
}

/* Mileage journey legs on phones: leg number and remove on one line, then
   From and To each full width */
@media (max-width: 640px){
  body.v2 .mileage-legs-table, body.v2 .mileage-legs-table tbody {display: block; width: 100%;}
  body.v2 .mileage-legs-table thead {display: none;}
  body.v2 .mileage-legs-table tr.leg-row {display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 10px 0; border-bottom: var(--border-faint-line);}
  body.v2 .mileage-legs-table tr.leg-row > td {display: block; padding: 0; border: 0; white-space: normal; overflow: visible;}
  body.v2 .mileage-legs-table tr.leg-row > td:nth-child(1) {font-weight: 500;}
  body.v2 .mileage-legs-table tr.leg-row > td:nth-child(2), body.v2 .mileage-legs-table tr.leg-row > td:nth-child(3) {grid-column: 1 / -1;}
  body.v2 .mileage-legs-table tr.leg-row > td:nth-child(2) {grid-row: 2;}
  body.v2 .mileage-legs-table tr.leg-row > td:nth-child(3) {grid-row: 3;}
  body.v2 .mileage-legs-table .endpoint {display: flex; flex-wrap: wrap; gap: 6px;}
  body.v2 .mileage-legs-table .endpoint select {flex: 1 1 140px; min-width: 0; width: auto;}
  body.v2 :is(.row-start, .row-end) {width: 100%; min-width: 0;}
}