@media (max-width: 767px) {
  .mobile-app__screen { display: grid; gap: var(--mobile-space-3); max-width: 640px; margin: 0 auto; box-sizing: border-box; }
  /* Safari 26 can exclude flex/grid container end padding from scrollHeight.
     Use a real generated grid item so the final controls can remain above the
     fixed Home/Search/More navigation instead of snapping back underneath it. */
  .mobile-app__screen::after {
    content: "";
    display: block;
    width: 100%;
    height: calc(var(--mobile-shell-nav-height, 56px) + env(safe-area-inset-bottom) + 36px);
    min-height: calc(var(--mobile-shell-nav-height, 56px) + env(safe-area-inset-bottom) + 36px);
    pointer-events: none;
  }
  .mobile-app__screen-head { display: flex; align-items: center; justify-content: space-between; gap: var(--mobile-space-2); }
  .mobile-app__screen h1, .mobile-app__screen h2 { margin: 0; color: #073d52; line-height: var(--mobile-line-tight); }
  .mobile-app__screen h1 { font-size: var(--mobile-font-xl); }
  .mobile-app__screen h2 { font-size: var(--mobile-font-lg); }
  .mobile-app__card { padding: var(--mobile-space-3); border: 1px solid #c8dce2; border-radius: var(--mobile-radius-lg); background: #fff; box-shadow: 0 2px 8px rgba(7,44,59,.05); }
  .mobile-app__button { position: relative; min-height: var(--mobile-button-height); padding: 5px 10px; border: 1px solid #afd0da; border-radius: var(--mobile-button-radius); background: #e7f3f5; color: #073d52; font-family: inherit; font-size: var(--mobile-button-font); font-weight: 700; line-height: var(--mobile-line-tight); }
  /* Extend the tap area vertically to ~44px without enlarging the visible button;
     vertical-only keeps hit areas from overlapping in 2-column action rows. */
  .mobile-app__button::before { content: ""; position: absolute; inset: -5px 0; }
  .mobile-app__button--primary { border-color: #0b607b; background: #0b607b; color: #fff; }
  /* Reclaim the compact height from the global responsive.css rule
     :where(button…):not(.icon-only):not(.exit-button){min-height:44px!important}.
     That selector's two :not(.class) give it specificity 0,2,0; scoping under
     .mobile-app plus :not([hidden]) makes these 0,3,0 so the !important wins. */
  .mobile-app .mobile-app__button:not([hidden]) { min-height: var(--mobile-button-height) !important; }
  .mobile-app .mobile-app__button--primary:not([hidden]) { min-height: var(--mobile-button-height-primary) !important; }
  .mobile-app__button:disabled { opacity: .55; }
  .mobile-app__search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--mobile-space-2); align-items: center; }
  .mobile-app__search .mobile-app__button { align-self: center; }
  .mobile-app__field { display: grid; gap: var(--mobile-space-1); color: #244a58; font-size: var(--mobile-font-sm); font-weight: 700; }
  .mobile-app__field :where(input, textarea), .mobile-app__search input { width: 100%; min-width: 0; min-height: var(--mobile-control-height); box-sizing: border-box; padding: 8px 10px; border: 1px solid #b9d3dc; border-radius: var(--mobile-radius); background: #fff; color: #102f3a; font-family: Arial, sans-serif; font-size: var(--mobile-font-base); font-weight: 400; line-height: var(--mobile-line); }
  /* Native mobile selects need their own sizing. WebKit/Android render selected
     text inside an internal control and can clip it when input-style line-height
     and vertical padding are forced on the select itself. Keep native appearance,
     use a fixed touch height, 16px text, and normal line-height. */
  .mobile-app select:not(.tomselected):not([multiple]) {
    width: 100%;
    min-width: 0;
    height: 48px !important;
    min-height: 48px !important;
    box-sizing: border-box;
    padding: 0 36px 0 12px !important;
    border: 1px solid #b9d3dc;
    border-radius: var(--mobile-radius);
    background-color: #fff;
    color: #102f3a;
    font-family: Arial, sans-serif;
    font-size: 16px !important;
    font-weight: 400;
    line-height: normal !important;
    -webkit-appearance: menulist;
    appearance: auto;
    vertical-align: middle;
  }
  .mobile-app select:not(.tomselected):not([multiple]):disabled {
    opacity: .65;
    color: #5f747d;
    background-color: #f4f7f8;
  }
  /* Tom Select creates its own internal search input. The generic mobile field
     rule above must not force that internal input to the full control height,
     otherwise iOS Safari clips the selected value vertically. Keep the wrapper
     touch-friendly while letting Tom Select's internal input stay intrinsic. */
  .mobile-app .ts-wrapper { width: 100%; min-width: 0; }
  .mobile-app .ts-control {
    width: 100%;
    min-height: 46px !important;
    height: auto !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 40px 10px 12px !important;
    border: 1px solid #b9d3dc;
    border-radius: var(--mobile-radius);
    background: #fff;
    color: #102f3a;
    font-family: Arial, sans-serif;
    font-size: 16px !important;
    font-weight: 400;
    line-height: 1.35 !important;
  }
  .mobile-app .ts-control > .item,
  .mobile-app .ts-control > input {
    align-self: center;
    max-width: 100%;
    line-height: 1.35 !important;
  }
  .mobile-app .ts-control > .item {
    display: flex;
    align-items: center;
    min-height: 24px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .mobile-app .ts-control > input {
    width: auto !important;
    min-width: 4px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
  .mobile-app .ts-wrapper.single .ts-control,
  .mobile-app .ts-wrapper.single.input-active .ts-control {
    background: #fff;
  }
  .mobile-app .ts-dropdown {
    box-sizing: border-box;
    width: 100%;
    max-width: min(100vw - 28px, 640px);
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.35;
  }
  .mobile-app .ts-dropdown .option,
  .mobile-app .ts-dropdown .create {
    min-height: 44px;
    padding: 11px 12px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .mobile-app__field textarea { min-height: 72px; resize: vertical; }
  .mobile-app__list { display: grid; gap: var(--mobile-space-2); }
  .mobile-app__list-button { width: 100%; min-width: 0; padding: 10px var(--mobile-space-3); text-align: left; border: 1px solid #c8dce2; border-radius: var(--mobile-radius-lg); background: #fff; color: #123945; font-family: inherit; font-size: var(--mobile-font-md); line-height: var(--mobile-line); }
  .mobile-app__list-button strong, .mobile-app__list-button span { display: block; overflow-wrap: anywhere; }
  .mobile-app__list-button strong { margin-bottom: 2px; color: #073d52; font-size: var(--mobile-font-base); line-height: var(--mobile-line-tight); }
  .mobile-app__muted { color: #59727b; font-size: var(--mobile-font-sm); }
  .mobile-app__status { min-height: 18px; margin: 0; color: #37616f; font-size: var(--mobile-font-sm); }
  .mobile-app__status[role="alert"] { color: #a12b23; }
  .mobile-app__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mobile-space-2); }
  .mobile-app__actions > :only-child { grid-column: 1 / -1; }
  .mobile-app__empty { margin: 0; padding: var(--mobile-space-4) var(--mobile-space-3); text-align: center; color: #59727b; font-size: var(--mobile-font-md); }
}