/* AviPorts mobile browser UI. Every declaration is isolated to phone-sized viewports. */
@media (max-width: 760px), (max-height: 480px) and (pointer: coarse) {
  html.mobile-web-active,
  html.mobile-web-active body { width: 100%; max-width: 100%; overflow-x: clip; }
  html.mobile-web-active body { min-height: 100%; }
  html.mobile-web-active body > :is(.container, .page, .profile-page, .map-page),
  html.mobile-web-active main.container { width: 100%; max-width: 100%; min-width: 0; }
  html.mobile-web-active :is(img, video, canvas, iframe, svg) { max-width: 100%; }
  html.mobile-web-active :is(h1, h2, h3, p, strong, small, span, a, label, dd, dt, time) { overflow-wrap: anywhere; }
  html.mobile-web-active :is(input, textarea, select, button) { max-width: 100%; }
  html.mobile-web-active :is(input, textarea, select) { min-width: 0; }
  html.mobile-web-active :is(.container, .page, .profile-page) { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  html.mobile-web-active :is(.nav, .map-nav) { display: none !important; }
  html.mobile-web-active .theme-toggle--floating { display: none !important; }
  html.mobile-web-active body:has(> .page) { display: block; padding: 0; }
  html.mobile-web-active body:has(> .page) > .page { width: 100%; max-width: 100%; margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-right)) 36px max(16px, env(safe-area-inset-left)); }
  html.mobile-web-active body:has(> .page) .card { width: 100%; padding: 24px 18px; }
  html.mobile-web-active :is(.hero, .airline-hero, .profile-summary, .panel, .records, .work, .ranking-board, .detail-section, .comments, .profile-section, .profile-content, .profile-editor) { max-width: 100%; min-width: 0; }
  html.mobile-web-active :is(.section-head, .content-toolbar, .board-head, .data-note) { max-width: 100%; min-width: 0; flex-wrap: wrap; }
  html.mobile-web-active :is(.field, .form-grid, .editor-grid, .identity-grid, .profile-content-grid, .main-grid, .ranking-columns) { min-width: 0; }
  html.mobile-web-active :is(.field input:not([type=radio]):not([type=checkbox]), .field textarea, .field select, .form-group input:not([type=radio]):not([type=checkbox]), .form-group select, .learning-form input:not([type=radio]):not([type=checkbox]), .learning-form textarea, .profile-editor input:not([type=radio]):not([type=checkbox]), .profile-editor textarea, .profile-editor select) { width: 100%; }
  html.mobile-web-active :is(.primary, .primary-button, .save-button, .secondary, .ghost-button, .modal-secondary, .report-submit, .code-btn) { min-height: 44px; }

  .mobile-web-root { position: relative; z-index: 110; width: 100%; }
  .mobile-toolbar { display: grid; grid-template-columns: 44px 44px minmax(0, 1fr) 44px 44px; align-items: center; gap: 8px; min-height: 68px; padding: calc(10px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid var(--border, #e5e1da); background: var(--surface, #fbfaf7); color: var(--text, #29353d); }
  .mobile-toolbar :is(a, button) { display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; padding: 0; border: 1px solid var(--border, #e5e1da); border-radius: 13px; background: var(--white, #fff); color: var(--blue-dark, #40586b); text-decoration: none; font: inherit; font-size: 21px; cursor: pointer; touch-action: manipulation; }
  .mobile-toolbar .mobile-account { grid-column: 1; overflow: hidden; }
  .mobile-toolbar .mobile-menu-button { grid-column: 2; }
  .mobile-toolbar .mobile-theme { grid-column: 4; }
  .mobile-toolbar .mobile-messages { grid-column: 5; }
  .mobile-toolbar .mobile-theme { line-height: 0; }
  .mobile-toolbar .mobile-theme .theme-mode-icon { width: 22px; height: 22px; }
  .mobile-account img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .mobile-account-fallback { display: grid; place-items: center; width: 100%; height: 100%; background: var(--soft, #e9eef0); font-size: 17px; font-weight: 700; }
  .mobile-messages { position: relative; }
  .mobile-messages b { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 999px; background: #ba5b52; color: #fff; font-size: 10px; line-height: 1; }
  .mobile-messages b[hidden] { display: none; }
  .mobile-drawer-layer { position: fixed; z-index: 120; inset: 0; visibility: hidden; pointer-events: none; }
  .mobile-drawer-shade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(10, 18, 24, .52); opacity: 0; transition: opacity .22s ease; }
  .mobile-drawer { position: absolute; inset: 0 auto 0 0; display: flex; flex-direction: column; width: 60vw; max-width: 60vw; height: 100vh; height: 100dvh; overflow: hidden; padding: calc(20px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); background: var(--surface, #fbfaf7); color: var(--text, #29353d); box-shadow: 8px 0 26px rgba(0,0,0,.18); transform: translateX(-105%); transition: transform .24s ease; }
  .mobile-drawer-heading { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 26px; color: var(--blue-dark, #40586b); font-size: 17px; }
  .mobile-drawer-close { width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--soft, #e9eef0); color: var(--blue-dark, #40586b); font-size: 22px; }
  .mobile-drawer-links { display: grid; flex: 1 1 auto; min-height: 0; align-content: start; gap: 8px; overflow-y: auto; }
  .mobile-drawer-links :is(a, button) { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-height: 48px; padding: 10px 9px; border: 0; border-radius: 11px; background: transparent; color: inherit; text-align: left; text-decoration: none; font: inherit; font-size: 14px; font-weight: 650; line-height: 1.35; }
  .mobile-drawer-links :is(a, button):active, .mobile-drawer-links :is(a, button):focus-visible { background: var(--soft, #e9eef0); }
  .mobile-drawer-links small { padding: 2px 5px; border-radius: 5px; background: var(--soft, #e9eef0); color: var(--blue-dark, #40586b); font-size: 10px; }
  .mobile-drawer-footer { display: grid; flex: 0 0 auto; gap: 3px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border, #e5e1da); }
  .mobile-drawer-footer button { min-height: 44px; border: 0; background: transparent; color: var(--muted, #7b858b); text-align: left; font: inherit; font-size: 13px; }
  .mobile-drawer-about { display: grid; gap: 0; }
  .mobile-menu-open .mobile-drawer-layer { visibility: visible; pointer-events: auto; }
  .mobile-menu-open .mobile-drawer { transform: translateX(0); }
  .mobile-menu-open .mobile-drawer-shade { opacity: 1; }
  html.mobile-drawer-active body { overflow: hidden; }

  .mobile-home-search { width: 100%; padding: 18px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); }
  .mobile-home-search form { display: flex; align-items: center; width: 100%; min-width: 0; height: 50px; padding: 4px; border: 1px solid var(--border, #e5e1da); border-radius: 13px; background: var(--surface, #fbfaf7); }
  .mobile-home-search input { flex: 1; width: 0; min-width: 0; height: 100%; padding: 0 10px; border: 0; outline: 0; background: transparent; color: var(--text, #29353d); font: inherit; font-size: 16px; }
  .mobile-home-search button { flex: 0 0 auto; min-width: 58px; height: 42px; border: 0; border-radius: 9px; background: var(--blue, #647d91); color: #fff; font: inherit; font-size: 13px; font-weight: 700; }
  html.mobile-web-active body:has(.mobile-home-search) :is(.hero, .home-feature-row, .community-guidelines-trigger, .featured-photo-section, #avitoolbar, .footer) { display: none !important; }
  html.mobile-web-active #avitoolbar { display: none !important; }
  html.mobile-web-active body:has(.mobile-home-feed) .container { padding-top: 8px; }
  .mobile-home-feed { width: 100%; max-width: 100%; min-width: 0; padding-bottom: 24px; }
  .mobile-feed-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin: 12px 0 18px; }
  .mobile-feed-heading p { margin: 0 0 5px; color: var(--blue-dark, #40586b); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
  .mobile-feed-heading h1 { margin: 0; color: var(--text, #29353d); font-size: 26px; letter-spacing: -.03em; }
  .mobile-feed-compose { min-height: 44px; padding: 0 14px; border: 1px solid var(--border, #e5e1da); border-radius: 10px; background: var(--surface, #fbfaf7); color: var(--blue-dark, #40586b); font: inherit; font-size: 13px; font-weight: 700; }
  .mobile-feed-list { display: grid; gap: 12px; min-width: 0; }
  .mobile-feed-status { margin: 0; padding: 24px 15px; border: 1px dashed var(--border, #e5e1da); border-radius: 12px; color: var(--muted, #7b858b); font-size: 13px; }
  .mobile-feed-card { min-width: 0; overflow: hidden; padding: 15px; border: 1px solid var(--border, #e5e1da); border-radius: 16px; background: var(--surface, #fbfaf7); cursor: pointer; touch-action: manipulation; transition: background .14s, transform .14s, border-color .14s; }
  .mobile-feed-card:active { transform: scale(.988); background: var(--soft, #e9eef0); }
  .mobile-feed-card:focus-visible { outline: 3px solid var(--blue, #647d91); outline-offset: 2px; }
  .mobile-feed-top { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 9px; min-width: 0; }
  .mobile-feed-avatar { display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; border-radius: 12px; background: var(--soft, #e9eef0); color: var(--blue-dark, #40586b); font-weight: 700; text-decoration: none; }
  .mobile-feed-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .mobile-feed-top strong, .mobile-feed-top small { display: block; }
  .mobile-feed-top strong { font-size: 13px; }
  .mobile-feed-top small { margin-top: 2px; color: var(--muted, #7b858b); font-size: 11px; }
  .mobile-feed-category { max-width: 90px; padding: 4px 6px; border-radius: 6px; background: var(--soft, #e9eef0); color: var(--blue-dark, #40586b); font-size: 10px; line-height: 1.25; }
  .mobile-feed-content { display: block; min-width: 0; margin: 13px 0 0; color: inherit; text-decoration: none; }
  .mobile-feed-content h2 { margin: 0 0 7px; font-size: 16px; line-height: 1.45; }
  .mobile-feed-content p { margin: 0; color: var(--muted, #7b858b); font-size: 13px; line-height: 1.7; white-space: pre-wrap; }
  .mobile-feed-photos { display: flex; max-width: 100%; gap: 7px; margin-top: 12px; overflow: hidden; }
  .mobile-feed-photos img { display: block; flex: 1 1 0; min-width: 0; max-width: 100%; height: 160px; border-radius: 9px; object-fit: contain; background: var(--soft, #e9eef0); }
  .mobile-feed-bottom { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--border, #e5e1da); color: var(--muted, #7b858b); font-size: 11px; }
  .mobile-feed-bottom .like-button { min-height: 40px; padding: 7px 10px 7px 0; }
  .mobile-feed-bottom .post-reply-count { min-height: 40px; }
  .mobile-feed-solution { margin-left: auto; color: var(--blue-dark, #40586b); }
  .mobile-feed-sentinel { min-height: 2px; }
  .mobile-feed-sentinel[hidden], .mobile-feed-error[hidden] { display: none; }
  .mobile-feed-error { margin: 12px 0; color: #b64e45; font-size: 12px; }
  .mobile-home-feed .post-reply-count, .mobile-post-layer .post-reply-count { display: inline-flex; align-items: center; gap: 4px; color: var(--muted, #7b858b); font-size: 12px; }
  .mobile-home-feed .post-reply-count svg, .mobile-post-layer .post-reply-count svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  .mobile-post-layer, .mobile-compose-layer { position: fixed; z-index: 130; inset: 0; width: 100vw; height: 100vh; height: 100dvh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: var(--bg, #f5f3ef); color: var(--text, #29353d); }
  html.mobile-detail-active body { overflow: hidden; }
  .mobile-detail-toolbar { position: sticky; z-index: 1; top: 0; display: flex; align-items: center; gap: 12px; min-height: 62px; padding-top: env(safe-area-inset-top); border-bottom: 1px solid var(--border, #e5e1da); background: var(--bg, #f5f3ef); color: var(--blue-dark, #40586b); font-size: 14px; }
  .mobile-detail-toolbar button { width: 44px; height: 44px; border: 1px solid var(--border, #e5e1da); border-radius: 11px; background: var(--surface, #fbfaf7); color: inherit; font: inherit; font-size: 21px; }
  .mobile-detail-post, .mobile-detail-replies { min-width: 0; margin-top: 14px; padding: 17px; border: 1px solid var(--border, #e5e1da); border-radius: 15px; background: var(--surface, #fbfaf7); }
  .mobile-detail-post h2 { margin: 18px 0 10px; font-size: 20px; line-height: 1.4; }
  .mobile-detail-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.8; }
  .mobile-detail-photos { display: grid; gap: 10px; margin-top: 14px; }
  .mobile-detail-photos img { display: block; width: 100%; height: auto; max-height: 420px; border-radius: 10px; object-fit: contain; background: var(--soft, #e9eef0); }
  .mobile-detail-engagement { display: flex; align-items: center; gap: 16px; margin-top: 15px; padding-top: 10px; border-top: 1px solid var(--border, #e5e1da); }
  .mobile-detail-engagement .like-button { min-height: 44px; }
  .mobile-detail-solution { display: flex; align-items: center; gap: 14px; margin-top: 16px; color: var(--muted, #7b858b); font-size: 12px; }
  .mobile-detail-solution button { min-height: 40px; padding: 0 10px; border: 1px solid var(--border, #e5e1da); border-radius: 8px; background: var(--soft, #e9eef0); color: var(--blue-dark, #40586b); }
  .mobile-detail-replies h3 { margin: 0 0 14px; font-size: 16px; }
  .mobile-reply-thread { min-width: 0; margin: 10px 0 0 calc(var(--reply-depth) * 13px); padding: 10px 0 0; border-top: 1px solid var(--border, #e5e1da); }
  .mobile-reply-row { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
  .mobile-reply-row .mobile-feed-avatar { flex: 0 0 30px; width: 30px; height: 30px; }
  .mobile-reply-main { flex: 1; min-width: 0; }
  .mobile-reply-main strong { font-size: 12px; }
  .mobile-reply-main small { display: block; color: var(--muted, #7b858b); font-size: 10px; }
  .mobile-reply-main p { margin: 5px 0; white-space: pre-wrap; font-size: 12px; line-height: 1.6; }
  .mobile-reply-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
  .mobile-reply-actions .like-button, .mobile-reply-actions .reply-action { min-height: 40px; }
  .mobile-reply-actions .reply-with-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-detail-notice { color: var(--blue-dark, #40586b); font-size: 12px; }
  .mobile-detail-notice[hidden], .mobile-detail-reply-target[hidden] { display: none; }
  .mobile-detail-reply-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-top: 18px; }
  .mobile-detail-reply-form[hidden] { display: none; }
  .mobile-detail-reply-target { grid-column: 1 / -1; color: var(--blue-dark, #40586b); font-size: 12px; }
  .mobile-detail-reply-target button { border: 0; background: transparent; color: var(--muted, #7b858b); }
  .mobile-detail-reply-form input { width: 100%; min-width: 0; height: 44px; padding: 0 11px; border: 1px solid var(--border, #e5e1da); border-radius: 9px; background: var(--white, #fff); color: var(--text, #29353d); font: inherit; font-size: 16px; }
  .mobile-detail-reply-form > button, .mobile-compose-form > button { min-height: 44px; padding: 0 13px; border: 0; border-radius: 9px; background: var(--blue, #647d91); color: #fff; font: inherit; font-size: 13px; }
  .mobile-compose-form { display: grid; gap: 16px; margin-top: 15px; padding: 18px; border: 1px solid var(--border, #e5e1da); border-radius: 15px; background: var(--surface, #fbfaf7); }
  .mobile-compose-form label { display: grid; gap: 7px; min-width: 0; font-size: 13px; font-weight: 650; }
  .mobile-compose-form label[hidden] { display: none; }
  .mobile-compose-form :is(select, input, textarea) { width: 100%; min-height: 44px; padding: 10px; border: 1px solid var(--border, #e5e1da); border-radius: 9px; background: var(--white, #fff); color: var(--text, #29353d); font: inherit; font-size: 16px; }
  .mobile-compose-form textarea { resize: vertical; line-height: 1.6; }
  .mobile-compose-status { margin: 0; color: var(--blue-dark, #40586b); font-size: 12px; }

  /* Shared content, popups and touch controls on all existing pages. */
  html.mobile-web-active:not([data-theme="dark"]) body:has(> .profile-page) {
    --bg: var(--profile-bg, #f5f3ef);
    --surface: var(--profile-surface, #fbfaf7);
    --white: #fff;
    --blue: var(--profile-blue, #647d91);
    --blue-dark: var(--profile-blue-dark, #40586b);
    --text: var(--profile-text, #29353d);
    --muted: var(--profile-muted, #7b858b);
    --border: var(--profile-border, #e5e1da);
    --soft: var(--profile-soft, #e9eef0);
  }
  html.mobile-web-active :is(.modal, .site-modal, .profile-modal, .learning-modal, .policy-modal, .community-guidelines-modal) { z-index: 130; max-width: 100vw; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  html.mobile-web-active :is(.modal-box, .site-modal-card, .profile-modal-card, .policy-card, .community-guidelines-card, .site-search-card) { width: 100%; max-width: 100%; min-width: 0; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overflow-x: hidden; }
  html.mobile-web-active:not([data-theme="dark"]) .report-form :is(input, select, textarea) { background: var(--white, #fff); }
  html.mobile-web-active :is(.dialog-post, .dialog-post p, .reply, .comment, .review-item, .article-content, .aviation-weather-content) { overflow-wrap: anywhere; word-break: break-word; }
  html.mobile-web-active :is(.dialog-post p, .comment p, .review-item p) { white-space: pre-wrap; }
  html.mobile-web-active .reply-form { grid-template-columns: minmax(0,1fr) auto; }
  html.mobile-web-active .reply-form input { min-width: 0; font-size: 16px; }
  html.mobile-web-active :is(.post-images, .record-photos, .tags, .categories, .search-tabs, .option-row) { max-width: 100%; }
  html.mobile-web-active .post-images img { max-width: min(100%, 280px); }
  html.mobile-web-active :is(.photo-preview img, .preview img, .work img, .record-photos img) { max-width: 100%; }
  html.mobile-web-active :is(.photo-card, .video-card, .article-card, .learning-section-card, .search-result, .ranking-row, .record, .post, .reply-thread) { min-width: 0; max-width: 100%; }

  /* Community and help: compact posts but keep title, avatar and actions visible. */
  html.mobile-web-active :is(.post, .help-post) { grid-template-columns: 36px minmax(0,1fr); gap: 10px; padding: 13px; }
  html.mobile-web-active .post .stats { grid-column: 2; padding: 0; white-space: normal; }
  html.mobile-web-active .post :is(h3, p, .meta) { overflow-wrap: anywhere; }
  html.mobile-web-active .tools { grid-template-columns: minmax(0,1fr); }
  html.mobile-web-active .tools :is(input, select) { min-height: 44px; }
  html.mobile-web-active .categories { width: 100%; margin-left: 0; margin-right: 0; flex-wrap: wrap; overflow-x: visible; }
  html.mobile-web-active .category { min-height: 40px; }

  /* Ranking and airline/airport details. */
  html.mobile-web-active .ranking-columns { grid-template-columns: minmax(0,1fr); }
  html.mobile-web-active .ranking-row { width: 100%; grid-template-columns: 24px minmax(0,1fr) auto; gap: 7px; min-height: 59px; }
  html.mobile-web-active .ranking-name-logo { min-width: 0; }
  html.mobile-web-active .ranking-name-logo .ranking-main { min-width: 0; flex: 1 1 auto; }
  html.mobile-web-active .ranking-logo { flex: 0 0 68px; width: 68px; height: 50px; }
  html.mobile-web-active .ranking-logo img { max-width: 66px; max-height: 46px; }
  html.mobile-web-active .ranking-score, html.mobile-web-active .heat-value { min-width: 0; font-size: 12px; }
  html.mobile-web-active .ranking-main :is(strong, small, em) { max-width: 100%; }
  html.mobile-web-active .hero-identity { width: 100%; max-width: 100%; min-width: 0; }
  html.mobile-web-active :is(.airline-hero, .airport-hero) { gap: 12px; padding: 17px; }
  html.mobile-web-active :is(.airline-hero h1, .airport-identity h1) { font-size: clamp(23px, 7vw, 30px); line-height: 1.2; }
  html.mobile-web-active .hero-codes { justify-content: flex-start; }
  html.mobile-web-active .identity-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  html.mobile-web-active :is(.identity-item strong, .identity-item small) { white-space: normal; }
  html.mobile-web-active .review-top { align-items: flex-start; flex-wrap: wrap; }

  /* Photography, search, profile, learning and flight log forms. */
  html.mobile-web-active .photo-grid, html.mobile-web-active .search-photo-section .photo-grid { grid-template-columns: minmax(0,1fr); width: 100%; margin-left: 0; transform: none; }
  html.mobile-web-active #photoGrid.photo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  html.mobile-web-active #photoGrid .photo-card { cursor: pointer; touch-action: manipulation; transition: transform .14s, border-color .14s; }
  html.mobile-web-active #photoGrid .photo-card:active { transform: scale(.975); border-color: var(--blue, #647d91); }
  html.mobile-web-active #photoGrid .photo-card:focus-visible { outline: 3px solid var(--blue, #647d91); outline-offset: 2px; }
  html.mobile-web-active #photoGrid .photo-card-body { padding: 9px; }
  html.mobile-web-active #photoGrid .photo-card h3 { font-size: 12px; line-height: 1.4; }
  html.mobile-web-active #photoGrid .photo-card .meta { font-size: 10.5px; line-height: 1.5; white-space: normal; }
  html.mobile-web-active #photoGrid .photo-card .tags { display: none; }
  html.mobile-web-active #photoGrid .photo-preview { position: relative; aspect-ratio: auto; background: var(--soft, #e9eef0); }
  html.mobile-web-active #photoGrid .photo-preview::before { padding-top: 56.25%; }
  html.mobile-web-active #photoGrid .photo-preview img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center center; }
  html.mobile-web-active .photo-preview { width: 100%; }
  html.mobile-web-active .work-layout, html.mobile-web-active .work-actions, html.mobile-web-active .card-actions { flex-wrap: wrap; }
  html.mobile-web-active .work-actions > button { min-height: 44px; }
  html.mobile-web-active .search-page-form { min-width: 0; }
  html.mobile-web-active .search-page-form input { width: 0; font-size: 16px; }
  html.mobile-web-active .search-tabs { flex-wrap: wrap; }
  .mobile-ranking-tabs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin: 0 0 16px; }
  .mobile-ranking-tabs button { min-height: 44px; border: 1px solid var(--border, #e5e1da); border-radius: 10px; background: var(--surface, #fbfaf7); color: var(--blue-dark, #40586b); font: inherit; font-size: 13px; font-weight: 700; }
  .mobile-ranking-tabs button[aria-pressed="true"] { border-color: var(--blue, #647d91); background: var(--blue, #647d91); color: #fff; }
  html.mobile-web-active .ranking-columns[data-mobile-ranking="airlines"]:not([data-mobile-searching="true"]) > .ranking-board:nth-child(2),
  html.mobile-web-active .ranking-columns[data-mobile-ranking="airports"]:not([data-mobile-searching="true"]) > .ranking-board:nth-child(1) { display: none; }
  html.mobile-web-active .profile-content-grid, html.mobile-web-active .editor-grid, html.mobile-web-active .honor-stats { grid-template-columns: minmax(0,1fr); }
  html.mobile-web-active .profile-summary { grid-template-columns: 64px minmax(0,1fr); }
  html.mobile-web-active .profile-actions { grid-column: 1 / -1; width: 100%; flex-wrap: wrap; }
  html.mobile-web-active .profile-actions button { min-height: 44px; }
  html.mobile-web-active :is(.learning-section-grid, .video-list, .article-list) { grid-template-columns: minmax(0,1fr); }
  html.mobile-web-active :is(.content-toolbar, .toolbar-actions, .option-row, .form-actions) { gap: 10px; flex-wrap: wrap; }
  html.mobile-web-active #flightForm .form-grid { grid-template-columns: minmax(0,1fr); }
  html.mobile-web-active .stats { grid-template-columns: minmax(0,1fr); }
  html.mobile-web-active .record { grid-template-columns: minmax(0,1fr); }
  html.mobile-web-active .confirmation { padding: 14px; }
  html.mobile-web-active :is(.choices, .stars, .record-photos) { flex-wrap: wrap; }
  html.mobile-web-active :is(.candidate-list, .lookup-results) { max-width: 100%; }
  html.mobile-web-active .code-row { display: grid; grid-template-columns: minmax(0,1fr) auto; }
  html.mobile-web-active .page .card { max-width: 100%; }

  /* The map keeps its interactive canvas; its airport content is a separate mobile bottom sheet. */
  html.mobile-web-active body:has(> .map-page) > .mobile-web-root { position: fixed; z-index: 110; inset: 0 0 auto; }
  html.mobile-web-active body:has(> .map-page) .mobile-toolbar { border-bottom: 0; background: transparent; }
  html.mobile-web-active body:has(> .map-page) .mobile-toolbar :is(a, button) { background: rgba(255,255,255,.94); box-shadow: 0 5px 16px rgba(41,53,61,.16); backdrop-filter: blur(10px); }
  html.mobile-web-active[data-theme="dark"] body:has(> .map-page) .mobile-toolbar :is(a, button) { background: rgba(24,36,43,.94); }
  html.mobile-web-active .map-page { width: 100vw; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; padding: 0; }
  html.mobile-web-active .map-workspace { width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; }
  html.mobile-web-active .map-search-area { top: calc(78px + env(safe-area-inset-top)); left: 13px; width: calc(100% - 26px); }
  html.mobile-web-active .heat-legend { top: calc(132px + env(safe-area-inset-top)); }
  html.mobile-web-active .mobile-map-back { position: absolute; z-index: 6; top: calc(170px + env(safe-area-inset-top)); left: 13px; display: grid; place-items: center; min-width: 74px; height: 45px; border: 1px solid rgba(229,225,218,.95); border-radius: 12px; background: rgba(255,255,255,.94); color: var(--blue-dark, #40586b); box-shadow: 0 5px 16px rgba(41,53,61,.13); backdrop-filter: blur(10px); font-size: 13px; font-weight: 700; text-decoration: none; }
  html.mobile-web-active[data-theme="dark"] .mobile-map-back { border-color: var(--border, #344852); background: rgba(24,36,43,.94); }
  html.mobile-web-active .map-notice { top: calc(223px + env(safe-area-inset-top)); }
  html.mobile-web-active .map-canvas-wrap, html.mobile-web-active .amap-container { min-width: 0; max-width: 100%; }
  html.mobile-web-active .airport-panel,
  html.mobile-web-active .airport-panel.has-selection { position: fixed; z-index: 105; inset: auto 0 0; display: flex; flex-direction: column; width: 100%; height: min(70vh, 620px); height: min(70dvh, 620px); max-height: none; border: 1px solid var(--border, #e5e1da); border-bottom: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(41,53,61,.17); transform: translateY(calc(100% - 68px)); transition: transform .28s ease; }
  html.mobile-web-active .airport-panel[data-mobile-sheet="open"] { transform: translateY(0); }
  html.mobile-web-active .mobile-airport-sheet-handle { display: flex; flex: 0 0 68px; align-items: center; justify-content: space-between; gap: 9px; width: 100%; min-height: 68px; padding: 14px max(18px, env(safe-area-inset-right)) 12px max(18px, env(safe-area-inset-left)); border: 0; background: transparent; color: var(--text, #29353d); font: inherit; font-size: 13px; font-weight: 700; text-align: left; touch-action: none; cursor: pointer; }
  html.mobile-web-active .mobile-airport-sheet-grip { flex: 0 0 auto; width: 32px; height: 5px; border-radius: 99px; background: var(--muted, #718087); opacity: .75; }
  html.mobile-web-active .mobile-airport-sheet-hint { margin-left: auto; color: var(--muted, #718087); font-size: 11px; font-weight: 500; white-space: nowrap; }
  html.mobile-web-active .airport-list-view, html.mobile-web-active .airport-detail { flex: 1 1 auto; min-height: 0; max-height: none; }
  html.mobile-web-active .airport-list { padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px)); }
  html.mobile-web-active .map-meta { display: none; }
  html.mobile-web-active .map-actions { bottom: 88px; }
  html.mobile-web-active .airport-detail { overflow-y: auto; overflow-x: hidden; }
  html.mobile-web-active .airport-detail { padding-bottom: max(30px, calc(env(safe-area-inset-bottom) + 20px)); }
  html.mobile-web-active :is(.aviation-weather-content, .weather-card, .weather-raw, .airport-heat-card, .spot-card) { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
  html.mobile-web-active .coordinate-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }

  @media (prefers-reduced-motion: reduce) {
    .airport-panel { transition: none; }
  }

  @media (max-width: 360px) {
    .mobile-toolbar { grid-template-columns: 40px 40px minmax(0,1fr) 40px 40px; gap: 5px; padding-left: 10px; padding-right: 10px; }
    .mobile-toolbar :is(a,button) { width: 40px; height: 40px; min-width: 40px; }
    .mobile-feed-top { grid-template-columns: 38px minmax(0,1fr); }
    .mobile-feed-category { grid-column: 2; justify-self: start; }
    html.mobile-web-active .ranking-row { gap: 5px; padding-left: 9px; padding-right: 9px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mobile-drawer, .mobile-drawer-shade { transition: none; }
  }
}