/* Mobile presentation only. The desktop stylesheet is deliberately untouched. */
.mobile-ui[hidden] { display: none; }
@media (max-width: 767px) {
  body.mobile-layout { height: 100dvh; overflow: hidden; overscroll-behavior: none; }
  .mobile-layout > .topbar { display: none; }
  .mobile-layout > .workspace { display: block; height: 100dvh; min-height: 0; }
  .mobile-layout .map-panel { position: absolute; inset: 0; height: auto; min-height: 0; border: 0; }
  .mobile-layout .map-canvas { top: calc(82px + env(safe-area-inset-top)); bottom: calc(74px + env(safe-area-inset-bottom)); }
  .mobile-layout .map-legend { bottom: calc(88px + env(safe-area-inset-bottom)); left: 10px; max-width: calc(100% - 20px); padding: 9px; font-size: 11px; gap: 8px; }
  .mobile-layout .map-status { z-index: 800; bottom: calc(126px + env(safe-area-inset-bottom)); font-size: 12px; }
  .mobile-ui { --mobile-height: 100dvh; --mobile-top: 0px; --mobile-nav-height: calc(74px + env(safe-area-inset-bottom)); position: fixed; top: var(--mobile-top); inset-inline: 0; height: var(--mobile-height); z-index: 1100; pointer-events: none; color: #163e35; }
  .mobile-ui button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mobile-ui button:focus-visible, .mobile-ui [tabindex]:focus-visible { outline: 3px solid #8127d9; outline-offset: -3px; }
  .mobile-ui button:active { transform: translateY(1px); }
  .mobile-toolbar { position: absolute; inset: 0 0 auto; display: flex; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 12px 12px; background: #f5faf7; pointer-events: auto; }
  .mobile-search, .mobile-filter { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border: 1px solid #dce9e1; border-radius: 18px; background: #fff; color: #163e35; }
  .mobile-search { flex: 1; min-width: 0; padding: 8px 14px; text-align: left; justify-content: flex-start; box-shadow: 0 3px 12px #163e3508; }
  .mobile-search > span:first-child { font-size: 29px; line-height: 1; }
  .mobile-search > span:last-child { min-width: 0; }
  .mobile-search strong, .mobile-search small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-search strong { font-size: 15px; font-weight: 750; }
  .mobile-search small { margin-top: 3px; color: #688176; font-size: 11px; }
  .mobile-filter { flex-direction: column; gap: 1px; min-width: 62px; padding: 4px 10px; font-size: 11px !important; }
  .mobile-filter > span { font-size: 24px; line-height: 1; }
  .mobile-nav { position: absolute; inset: auto 0 0; height: var(--mobile-nav-height); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; padding: 6px max(10px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); background: #fff; border-top: 1px solid #e0eae4; pointer-events: auto; }
  .mobile-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border: 0; border-radius: 15px; background: transparent; color: #718479; font-size: 11px; font-weight: 700; }
  .mobile-nav button > span { height: 25px; font-size: 25px; line-height: 25px; }
  .mobile-nav button[aria-current="page"] { color: #176145; background: #e8f7ed; }
  .mobile-sheet { position: absolute; inset: auto 0 var(--mobile-nav-height); height: min(56%,520px); max-height: calc(100% - var(--mobile-nav-height) - env(safe-area-inset-top) - 24px); display: flex; flex-direction: column; border-radius: 24px 24px 0 0; background: #fff; border: 1px solid #dce8e0; box-shadow: 0 -8px 32px #183d3520; pointer-events: auto; overflow: hidden; transition: height 180ms ease; }
  .mobile-sheet[hidden] { display: none; }
  .mobile-sheet[data-size="peek"] { height: 210px; }
  .mobile-sheet[data-size="full"] { height: calc(100% - var(--mobile-nav-height) - env(safe-area-inset-top) - 24px); }
  .mobile-sheet-handle { position: relative; min-height: 24px; flex: 0 0 24px; touch-action: none; cursor: ns-resize; }
  .mobile-sheet-handle::before { content: ''; position: absolute; width: 38px; height: 4px; background: #d0ded6; border-radius: 4px; top: 10px; left: calc(50% - 19px); }
  .mobile-sheet-heading { display: flex; align-items: flex-start; gap: 8px; padding: 0 14px 8px 18px; flex: 0 0 auto; }
  .mobile-sheet-heading > div { min-width: 0; flex: 1; }
  .mobile-sheet-heading h2 { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 800; overflow-wrap: anywhere; }
  .mobile-sheet-heading p { margin: 5px 0 0; font-size: 12px; color: #6c8177; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .mobile-sheet-heading > button { flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #f1f6f3; font-size: 26px; }
  .mobile-sheet-actions { display: flex; gap: 8px; padding: 0 16px 10px; flex: 0 0 auto; }
  .mobile-sheet-actions button { min-height: 44px; padding: 8px 14px; border-radius: 12px; border: 1px solid #dce7e0; background: #fff; font-size: 12px; font-weight: 700; color: #2e5b47; }
  .mobile-sheet-actions button:first-child { background: #184f3c; color: #fff; border-color: #184f3c; }
  .mobile-sheet-body { min-height: 0; flex: 1; overflow: hidden; border-top: 1px solid #eef3ef; }
  .mobile-sheet-body[hidden], .mobile-sheet-body > [hidden] { display: none; }
  [data-mobile-workspace] { height: 100%; }
  .mobile-ui .sidebar { position: relative; height: 100%; min-height: 0; width: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: #fff; box-shadow: none; }
  .mobile-ui .workspace-mode-bar { display: none; } /* Replaced by the bottom navigation. */
  .mobile-ui .search-panel, .mobile-ui .acquisition-panel { padding: 16px; }
  .mobile-ui .search-panel { display: flex; flex-direction: column; gap: 12px; }
  .mobile-ui .search-panel[hidden] { display: none; }
  .mobile-ui .search-panel > * { margin-top: 0; margin-bottom: 0; }
  .mobile-ui .results-section { order: 1; }
  .mobile-ui #offer-panel { order: 2; }
  .mobile-ui #school-contact { order: 3; }
  .mobile-ui #recent-handled-schools { order: 4; }
  .mobile-ui .search-panel > .service-note { order: 5; }
  .mobile-ui .school-search input, .mobile-ui .custom-hotel-search input { min-height: 50px; font-size: 16px; }
  .mobile-ui .school-suggestions, .mobile-ui .custom-hotel-suggestions { position: relative; inset: auto; max-height: 45dvh; overflow-y: auto; box-shadow: none; margin-top: 8px; }
  .mobile-ui .school-suggestion { min-height: 56px; }
  .mobile-ui .search-mode-switch { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; }
  .mobile-ui .search-mode-tab { min-height: 48px; padding: 6px; font-size: 12px; white-space: normal; }
  .mobile-ui .acquisition-workflow-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; overflow: visible; }
  .mobile-ui .acquisition-workflow-tabs button { min-height: 48px; font-size: 12px; }
  .mobile-ui .acquisition-filters { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .mobile-type-chips { display: flex; gap: 6px; flex-wrap: wrap; }
  .mobile-type-chips button { flex: 1; min-height: 44px; border: 1px solid #d9e5de; border-radius: 24px; background: #fff; color: #375b49; font-size: 13px; }
  .mobile-type-chips button[aria-pressed="true"] { background: #eaf4ff; color: #204a9c; border-color: #8aa9e3; }
  .mobile-filter-pane, .mobile-more-pane { height: 100%; overflow: auto; overscroll-behavior: contain; padding: 18px 16px 24px; }
  .mobile-hint { font-size: 13px; color: #6a8072; line-height: 1.5; margin: 0 0 18px; }
  [data-filter-controls] > * { margin-bottom: 18px; }
  .mobile-primary { width: 100%; min-height: 48px; border: 0; border-radius: 14px; background: #184f3c; color: #fff; font-weight: 700 !important; margin-top: 12px; }
  .mobile-ui .topbar-actions { display: flex; align-items: stretch; flex-direction: column; gap: 10px; width: 100%; margin: 0; }
  .mobile-ui .topbar-actions button { min-height: 52px; justify-content: flex-start; border-radius: 14px; padding: 12px 16px; font-size: 15px; }
  .mobile-ui .topbar-actions button[hidden] { display: none; }
  .mobile-ui .refresh-status, .mobile-ui .refresh-label { display: block; }
  .mobile-ui .hotel-detail { position: absolute; inset: 0; height: 100%; width: 100%; z-index: 2; border: 0; }
  .mobile-ui[data-detail="hotel"] .sidebar { overflow: hidden; }
  .mobile-ui .detail-topbar { padding: 6px 12px; }
  .mobile-ui .detail-scroll { min-height: 0; overscroll-behavior: contain; }
  .mobile-ui .detail-tabs { position: sticky; top: 0; background: #fff; z-index: 3; }
  .mobile-ui .detail-tabs button { min-height: 46px; }
  .mobile-ui .detail-hero { max-height: 170px; }
  .mobile-ui .result-main { min-height: 72px; }
  .mobile-ui .result-actions > *, .mobile-ui .acquisition-pagination button, .mobile-ui .acquisition-school-action, .mobile-ui .acquisition-warning-filter { min-height: 44px; }
  .mobile-ui select, .mobile-ui input, .mobile-layout .app-dialog input, .mobile-layout .app-dialog select, .mobile-layout .app-dialog textarea { font-size: 16px; min-height: 44px; max-width: 100%; }
  .mobile-layout .app-dialog { max-width: calc(100vw - 16px); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .mobile-layout .dialog-close { width: 44px; height: 44px; flex-shrink: 0; }
  .mobile-layout .call-notebook-panel { top: calc(16px + env(safe-area-inset-top)); bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 1500; max-height: none; }
  .mobile-layout .email-queue-toast { bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 2100; }
  @media (max-height: 500px) {
    .mobile-toolbar { padding-top: 6px; padding-bottom: 6px; }
    .mobile-search, .mobile-filter { min-height: 46px; }
    .mobile-layout .map-canvas { top: 60px; }
    .mobile-sheet { width: min(440px,68vw); left: auto; }
    .mobile-sheet[data-size="peek"] { height: 180px; }
    .mobile-sheet-heading h2 { font-size: 16px; }
    .mobile-sheet-heading p { -webkit-line-clamp: 1; }
  }
  @media (prefers-reduced-motion: reduce) { .mobile-sheet { transition: none; } .mobile-ui button:active { transform: none; } }
}
@media (max-width: 767px) {
  .mobile-ui[data-view="hotels"][data-selected="true"] #school-form { display: none; } /* Change school via the persistent search button. */
  .mobile-ui #school-name { display: none; } /* Already identified in the sheet header. */
  .mobile-ui .result-main { display: grid; grid-template-columns: 24px 48px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 12px; }
  .mobile-ui .result-photo-wrap { width: 48px; height: 48px; }
  .mobile-ui .result-copy { min-width: 0; }
  .mobile-ui .result-distance { grid-column: auto; text-align: right; }
  .mobile-ui .result-distance strong { font-size: 13px; }
  .mobile-ui .result-distance span { font-size: 10px; }
  .mobile-ui .result-name { font-size: 13px; }
  .mobile-ui .result-place { font-size: 11px; }
  .mobile-number-stepper { display: grid; grid-template-columns: 48px minmax(0,1fr) 48px; align-items: center; gap: 6px; }
  .mobile-number-stepper button { height: 48px; border: 1px solid #d4e3d8; border-radius: 12px; background: #edf6ef; color: #24563d; font-size: 22px; }
  .mobile-number-stepper input { width: 100%; text-align: center; }
  .mobile-number-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
}
@media (max-width: 767px) {
  .mobile-filter-shortcut { display: block; width: 100%; min-height: 48px; padding: 10px 14px; margin-bottom: 16px; border: 1px solid #dce8e0; border-radius: 13px; text-align: left; color: #345946; background: #f4f9f5; font-size: 12px !important; }
  [data-school-filter-controls] > *, [data-hotel-filter-controls] > * { margin-bottom: 16px; }
  .mobile-ui [data-filter-controls] > [hidden] { display: none; }
}
@media (max-width: 767px) {
  .mobile-sheet-handle { min-height: 44px; flex-basis: 44px; }
  .mobile-sheet-handle::before { top: 16px; }
  .mobile-layout .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; }
  .mobile-ui .contact-action { display: inline-flex; align-items: center; min-height: 44px; }
  @media (max-height: 500px) {
    .mobile-sheet-actions { position: absolute; right: 62px; top: 0; padding: 0; }
    .mobile-sheet-actions [data-mobile-map] { display: none; } /* Map is also in the persistent navigation. */
    .mobile-sheet-handle { width: 44%; }
    .mobile-sheet-heading { padding-bottom: 6px; }
  }
}
