/* ping.waniq.ai on a phone (≤ 640 px wide). Loaded after every other stylesheet; nothing here applies on a desktop.
   Layout: a slim search bar at the top (address + Find me + a ☰ button for everything else), the globe filling
   the screen, and bottom sheets for details, a tapped hop and the scan summary. mobile.js adds the ☰ button,
   the sheet handles and the body class pvm-on. */
@media (max-width: 640px) {
  html, body.pvm-on { overscroll-behavior: none; }
  body.pvm-on { -webkit-text-size-adjust: 100%; }

  /* header: one slim line */
  .pvm-on .pv-header { height: 40px !important; min-height: 40px !important; padding: 0 12px !important; gap: 8px !important; }
  .pvm-on .pv-brand-sub, .pvm-on #pv-nav { display: none !important; }
  .pvm-on .pv-brand-name { font-size: 13px !important; letter-spacing: .12em !important; }
  .pvm-on #pv-theme-toggle { min-width: 40px !important; min-height: 32px !important; font-size: 15px !important; margin-left: auto !important;
    background: transparent !important; border: 1px solid #2a3a4c !important; color: #9fb0c3 !important; border-radius: 8px !important; }
  .pvm-on .pv-header-right { margin-left: auto !important; }

  /* the search bar */
  .pvm-on .pv-map-picker {
    position: fixed !important; top: calc(46px + env(safe-area-inset-top, 0px)) !important; left: 8px !important; right: 8px !important;
    width: auto !important; max-width: none !important; transform: none !important;
    padding: 6px !important; border-radius: 12px !important;
    background: rgba(8, 12, 18, 0.92) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .pvm-on .pv-map-picker__row { flex-wrap: wrap !important; gap: 6px !important; row-gap: 6px !important; justify-content: flex-start !important; }
  .pvm-on #pv-slug-input {
    flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; height: 40px !important;
    font-size: 16px !important;                    /* 16 px: iOS does not zoom the page when the box is tapped */
    border-radius: 10px !important; padding: 0 12px !important; margin: 0 !important;
  }
  .pvm-on .pv-map-picker__copy, .pvm-on .pv-gis-toggle, .pvm-on .pvm-tray-btn {
    min-height: 40px !important; padding: 0 12px !important; font-size: 13px !important; border-radius: 10px !important;
  }
  .pvm-on #pv-me-btn { background: rgba(45, 212, 191, 0.16) !important; border-color: rgba(45, 212, 191, 0.7) !important; color: #e6fffa !important; font-weight: 700 !important; }
  .pvm-on #pv-load-btn { padding: 0 10px !important; }
  .pvm-tray-btn {
    display: none; flex: 0 0 auto; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
    background: transparent; border: 1px solid #2a3a4c; color: #c9d4e0; font: inherit; cursor: pointer;
  }
  .pvm-on .pvm-tray-btn { display: inline-flex !important; min-width: 44px; }
  .pvm-tray-btn[aria-expanded="true"] { border-color: #2dd4bf !important; color: #e6fffa !important; }
  .pvm-tray-btn .pvm-n { min-width: 18px; height: 18px; border-radius: 9px; background: #1e3a5f; color: #93c5fd; font-size: 11px; line-height: 18px; text-align: center; }

  /* tray closed: only the address, load, Find me and ☰ stay in the bar */
  .pvm-on:not(.pvm-tray-open) .pv-map-picker__row > :not(#pv-slug-input):not(#pv-load-btn):not(#pv-me-btn):not(.pvm-tray-btn):not(#pv-picker-status) { display: none !important; }
  .pvm-on #pv-picker-status:empty { display: none !important; }
  .pvm-on #pv-picker-status { flex: 1 1 100%; font-size: 11px; }
  /* tray open: the rest of the controls, in rows that fit a thumb (address row first, then layer menus, then the small toggles) */
  .pvm-on #pv-slug-input { order: 1; } .pvm-on #pv-load-btn { order: 2; } .pvm-on #pv-me-btn { order: 3; } .pvm-on .pvm-tray-btn { order: 4; }
  .pvm-on #pv-lm-host { order: 10; } .pvm-on #pv-picker-status { order: 30; }
  .pvm-on #pv-clear-btn, .pvm-on #pv-spin-btn, .pvm-on #pv-details-btn, .pvm-on #pv-af-4, .pvm-on #pv-af-6 { order: 20; }
  .pvm-tray-open .pv-map-picker__row > #pv-clear-btn, .pvm-tray-open .pv-map-picker__row > #pv-spin-btn,
  .pvm-tray-open .pv-map-picker__row > #pv-details-btn, .pvm-tray-open .pv-map-picker__row > #pv-af-4,
  .pvm-tray-open .pv-map-picker__row > #pv-af-6 { flex: 1 1 0; }
  .pvm-tray-open #pv-lm-host { display: flex !important; flex: 1 1 100%; flex-wrap: wrap; gap: 6px; }
  .pvm-tray-open #pv-lm-host .pv-lm__btn { flex: 1 1 calc(50% - 6px); min-height: 40px; font-size: 13px; justify-content: center; }
  .pvm-on #pv-lm-panel {
    position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; width: auto !important; max-width: none !important;
    max-height: 62vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; border-radius: 14px !important; z-index: 1500 !important;
  }
  .pvm-on #pv-lm-panel .pv-lm__row { min-height: 44px; }
  .pvm-on #pv-lm-panel button { min-height: 36px; }

  /* peering mode bar: the modes stay as one swipeable strip; search and region live in the tray */
  .pvm-on #pv-pxbar { margin-top: 6px !important; padding-top: 6px !important; gap: 6px !important; }
  .pvm-on #pv-pxbar .pxb-modes {
    flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    justify-content: flex-start !important; flex: 1 1 100%; border-radius: 12px !important;
  }
  .pvm-on #pv-pxbar .pxb-modes::-webkit-scrollbar { display: none; }
  .pvm-on #pv-pxbar .pxb-modes button { flex: 0 0 auto; min-height: 36px; padding: 0 12px !important; font-size: 13px; }
  .pvm-on:not(.pvm-tray-open) #pv-pxbar .pxb-search,
  .pvm-on:not(.pvm-tray-open) #pv-pxbar #pv-pxb-reg,
  .pvm-on:not(.pvm-tray-open) #pv-pxbar .pxb-x { display: none !important; }
  .pvm-on #pv-pxbar .pxb-search input { font-size: 16px !important; min-height: 40px; }
  .pvm-on #pv-pxbar .pxb-search.pvm-searching { display: flex !important; }   /* stays open while results show */
  .pvm-on #pv-pxbar #pv-pxb-reg { min-height: 40px; font-size: 14px; }
  .pvm-on #pv-pxbar .pxb-x { min-width: 40px; min-height: 40px; }
  .pvm-on #pv-pxbar .pxb-res { max-height: 40vh; overflow-y: auto; }
  .pvm-on #pv-pxbar .pxb-res button { min-height: 40px; }

  /* bottom sheet: layer details (exchange, network, compare …) */
  .pvm-on #pv-details {
    top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; max-width: none !important; max-height: 58vh !important;
    border-radius: 16px 16px 0 0 !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important; z-index: 1400 !important;
    transition: max-height .2s ease;
  }
  .pvm-on #pv-details .pvd-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .pvm-on #pv-details .pvd-head { position: relative; padding: 16px 12px 10px 16px !important; cursor: pointer; }
  .pvm-on #pv-details .pvd-head::before, .pvm-on #pv-popup::before {
    content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #3a4a5c;
  }
  .pvm-on #pv-details .pvd-head button { min-height: 34px; min-width: 40px; font-size: 13px !important; }
  .pvm-on #pv-details.pvm-peek { max-height: calc(58px + env(safe-area-inset-bottom, 0px)) !important; }
  .pvm-on #pv-details.pvm-peek .pvd-body, .pvm-on #pv-details.pvm-peek .pvd-foot { display: none !important; }
  .pvm-on #pv-details button, .pvm-on #pv-details [data-pxpick], .pvm-on #pv-details .pvd-mrow { min-height: 36px; }

  /* bottom sheet: a tapped hop (globe.js un-hides it; map.css only shows it with .is-open, so show it here) */
  .pvm-on #pv-popup:not([hidden]) { display: block !important; }
  .pvm-on #pv-popup .pv-popup-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0 0; font-size: 13px; }
  .pvm-on #pv-popup .pv-popup-dl dd { margin: 0; word-break: break-word; }
  .pvm-on #pv-popup .pv-popup-title { font-weight: 700; font-size: 14px; color: #e6edf3; }
  .pvm-on #pv-popup {
    position: fixed !important; top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; max-width: none !important; max-height: 50vh !important; overflow-y: auto !important;
    transform: none !important; border-radius: 16px 16px 0 0 !important; padding: 18px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important; z-index: 1450 !important;
  }
  .pvm-on #pv-popup .pv-map-popup__close { min-width: 44px !important; min-height: 44px !important; font-size: 22px !important; }

  /* scan summary: one compact card at the bottom, only once a scan is loaded; vantage chips just above it */
  .pvm-on.pvm-noscan .pv-map-meta { display: none !important; }
  .pvm-on .pv-map-meta { padding: 8px 12px !important; }
  .pvm-on .pv-map-meta__title { display: none !important; }
  .pvm-on .pv-map-meta__list { display: grid !important; grid-template-columns: auto 1fr !important; gap: 2px 12px !important; margin: 0 !important; padding: 0 !important; }
  .pvm-on .pv-map-meta__list li { display: contents !important; }
  .pvm-on .pv-map-meta__list li > * { border: 0 !important; padding: 2px 0 !important; margin: 0 !important; min-height: 0 !important; font-size: 12px !important; line-height: 1.35 !important; }
  .pvm-on .pv-map-meta__sep { color: #6b7c8f !important; opacity: 1 !important; width: auto !important; }
  .pvm-on .pv-map-meta {
    left: 8px !important; right: 8px !important; width: auto !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 12px !important; max-height: 30vh !important;
  }
  .pvm-on.pvm-sheet .pv-map-meta, .pvm-on.pvm-sheet #pv-vantage-toggles { display: none !important; }
  .pvm-on #pv-vantage-toggles {
    top: auto !important; bottom: calc(var(--pvm-meta-h, 0px) + 16px + env(safe-area-inset-bottom, 0px)) !important;
    left: 8px !important; right: 8px !important; transform: none !important; max-width: none !important; border-radius: 12px !important;
  }
  .pvm-on #pv-vantage-toggles > * { min-height: 36px !important; padding: 0 12px !important; font-size: 12px !important; }

  /* the map key: "Key" in the header opens the legend as a bottom sheet */
  .pvm-key-btn { display: none; }
  .pvm-on .pvm-key-btn {
    display: inline-flex !important; align-items: center; min-height: 32px; padding: 0 12px; margin-right: 8px;
    background: transparent; border: 1px solid #2a3a4c; border-radius: 8px; color: #9fb0c3; font: inherit; font-size: 13px; cursor: pointer;
  }
  .pvm-on .pvm-key-btn[aria-pressed="true"] { border-color: #2dd4bf; color: #e6fffa; background: rgba(45, 212, 191, 0.12); }
  .pvm-legend-x { display: none; }
  .pvm-on.pvm-legend-open .pv-map-legend {
    display: block !important; position: fixed !important; top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; max-width: none !important; max-height: 55vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important; padding: 20px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 16px 16px 0 0 !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important;
    background: rgba(8, 12, 18, 0.97) !important; z-index: 1460 !important; font-size: 13px !important;
  }
  .pvm-on.pvm-legend-open .pv-map-legend::before {
    content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #3a4a5c;
  }
  .pvm-on.pvm-legend-open .pvm-legend-x {
    display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 8px; right: 8px;
    min-width: 44px; min-height: 44px; background: none; border: 0; color: #9fb0c3; font-size: 22px; cursor: pointer;
  }
  .pvm-on.pvm-legend-open .pv-map-legend__title { font-size: 12px !important; letter-spacing: .08em; margin: 0 0 8px !important; }
  .pvm-on.pvm-legend-open .pv-map-legend__list { margin: 0 0 10px !important; }
  .pvm-on.pvm-legend-open .pv-map-legend__row { min-height: 28px; gap: 10px !important; font-size: 13px !important; }
  .pvm-on.pvm-legend-open .pv-map-legend__list[hidden] { display: none !important; }
  .pvm-on.pvm-legend-open.pvm-noscan .pv-map-legend > ul.pv-map-legend__list:not([id]) { display: none !important; }   /* rail / cable / arc: only for a scan */
  .pvm-on.pvm-legend-open .pv-map-meta, .pvm-on.pvm-legend-open #pv-vantage-toggles { display: none !important; }

  /* tap helper sheets: "Which one?" when several dots sit under a fingertip; facility info */
  .pvm-box { display: none; }
  .pvm-on .pvm-box:not([hidden]) {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1470; box-sizing: border-box;
    max-height: 50vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 20px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-radius: 16px 16px 0 0;
    background: #080c12; border-top: 1px solid #1f2a37; color: #c9d4e0; font: 13px/1.5 'JetBrains Mono', ui-monospace, Menlo, monospace;
  }
  .pvm-on .pvm-box:not([hidden])::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #3a4a5c; }
  .pvm-box-x { position: absolute; top: 8px; right: 8px; min-width: 44px; min-height: 44px; background: none; border: 0; color: #9fb0c3; font-size: 22px; cursor: pointer; }
  .pvm-box-t { color: #6b7c8f; letter-spacing: .08em; font-size: 12px; text-transform: uppercase; margin: 0 0 8px; }
  .pvm-box-body { padding-right: 40px; }
  .pvm-pick-row { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 48px; padding: 8px 4px; box-sizing: border-box;
    background: none; border: 0; border-bottom: 1px solid #1a2330; color: #e6edf3; font: inherit; text-align: left; cursor: pointer; }
  .pvm-pick-row .n { font-size: 14px; }
  .pvm-pick-row .k { font-size: 11px; color: #6b7c8f; }
  .pvm-pick-row:active { background: rgba(45, 212, 191, 0.1); }
  .pvm-on.pvm-choosing #pv-details { display: none !important; }

  /* things a phone can do without */
  .pvm-on .waniq-stats, .pvm-on .pv-map-legend__hint { display: none !important; }
  .pvm-on .pv-map-scanning__panel { max-width: calc(100vw - 32px); }
  .pvm-on #pv-cheats { display: none !important; }
}