/* ==========================================================================
   /map on phones
   ==========================================================================
   The map UI is built for a desktop window. These rules re-lay it out for a
   phone held upright: the sidebar becomes an overlay that starts closed, the
   header fits one row without anything sitting on top of anything else, and
   the bottom edge gets one stack (status bar, then Ask bar, then scale and
   legend) instead of four things fighting over the same 150px.

   Loaded after styles.css and analytics-panel.css so equal-specificity rules
   here win. !important is only used where the rule being beaten is itself
   !important or an inline style.

   "Phone" means narrow OR a short touch screen, so a phone turned landscape
   (~860x400) gets the same layout. scripts.js uses the same query to start
   the sidebar closed; keep the two in step.
   ========================================================================== */

@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {

  /* ---- Sidebar: an overlay over the map, not a column beside it ---------- */

  /* The map keeps the full width whether the sidebar is open or closed, so
     opening the layer list never resizes (and re-requests) the map. */
  #map,
  #map.sidebar-collapsed {
    margin-left: 0;
  }

  /* Leave a strip of map showing on the right so the open state reads as a
     drawer, with the toggle tab sitting in that strip. */
  .left-sidebar {
    width: min(calc(100vw - 44px), 360px);
    /* Opaque: on desktop it sits beside the map, here it sits on top of it. */
    background: linear-gradient(135deg, var(--nm-bg), var(--nm-bg-deep));
    z-index: 1400; /* above the legend/scale/analytics tab, below the status bar */
    height: calc(100dvh - 60px - 36px - var(--banner-height));
  }

  .left-sidebar.collapsed {
    transform: translateX(-100%);
  }

  .sidebar-toggle {
    left: min(calc(100vw - 44px), 360px);
    z-index: 1401;
    padding: 20px 9px;
  }

  .sidebar-toggle.collapsed {
    left: 0;
  }

  /* Bigger touch rows in the layer list. The desktop rows are ~16px tall,
     which is a guess with a fingertip. */
  .left-sidebar label {
    min-height: 32px;
    line-height: 1.25;
  }

  .left-sidebar input[type="checkbox"],
  .left-sidebar input[type="radio"] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  .left-sidebar .layer-section-header,
  .left-sidebar summary {
    min-height: 36px;
    display: flex;
    align-items: center;
  }

  .sidebar-tab {
    min-height: 44px;
  }

  /* While the layer list is open it is the only thing on screen that matters;
     the floating map chrome would otherwise sit on top of it. */
  .left-sidebar:not(.collapsed) ~ #mapAgentBar,
  .left-sidebar:not(.collapsed) ~ .legend,
  .left-sidebar:not(.collapsed) ~ .dashboard-toggle {
    visibility: hidden;
  }

  /* ---- Scale: always hard left, compact ---------------------------------- */

  .leaflet-control-scale,
  #map.sidebar-collapsed .leaflet-control-scale {
    left: 8px !important;
    bottom: 90px !important;
    padding: 4px 8px !important;
  }

  /* The pick-a-scale menu is a print/export tool; on a phone you pinch. */
  body .leaflet-control-scale-select {
    display: none !important;
  }

  /* ---- Legend: sits above the Ask bar, never full width ----------------- */

  .legend {
    right: 8px;
    bottom: 90px;
    max-width: calc(100vw - 150px);
    max-height: 40dvh;
    overflow-y: auto;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 11px;
  }

  .legend.shifted-left {
    right: 8px;
  }

  /* ---- Analytics pull tab: a slim chevron, not a 125px banner ----------- */

  .dashboard-toggle {
    width: 26px;
    padding: 14px 3px;
    top: 38%;
  }

  .dashboard-toggle .toggle-label {
    display: none;
  }

  .dashboard-toggle .analytics-arrow {
    font-size: 18px;
  }

  /* ---- Tenement card: never taller than the visible screen --------------
     styles.css capped it at 100vh - 80px, but on a phone 100vh includes the
     area behind the browser's address bar, so a long card (signed-in users
     get the register details too) pushed its header, with the close button,
     up under the toolbar. dvh is the visible height; subtract the toolbar. */
  .in-map-popup {
    bottom: max(8px, calc(var(--register-sheet-h, 0px) + 8px));
    max-height: calc(100vh - 60px - var(--banner-height, 0px) - 24px);
    max-height: calc(100dvh - 60px - var(--banner-height, 0px) - 24px);
  }

  /* ---- Right-hand panels go full width ---------------------------------- */

  .marketplace-panel,
  .analytics-dashboard {
    width: 100vw;
  }

  .legend.shifted-left,
  .status-indicator.shifted-left {
    margin-right: 0;
  }

  /* ---- Header dropdowns: pinned under the toolbar, full width ------------
     Mine Filter and Alerts carry inline min-widths of 400-420px, wider than
     the phone. */
  .toolbar .dropdown-content,
  .toolbar .dropdown-content.align-right {
    position: fixed;
    top: 56px;
    left: 8px;
    right: 8px;
    min-width: 0 !important;
    max-height: calc(100dvh - 110px);
  }

  /* ---- Status bar: keep only what works with a thumb ---------------------
     Hover readouts, the blog link and keyboard-shortcut help don't earn
     their width on a phone. */
  .status-bar {
    padding: 0 8px;
    gap: 8px;
  }

  #zoomStatus,
  .status-bar .status-blog-link,
  #btnHelp {
    display: none !important;
  }

  .status-bar label {
    font-size: 0 !important; /* hides the "Map:" text, keeps the picker */
  }

  .status-bar select#basemapPicker {
    font-size: 12px;
  }

  #tenementHoverInfo {
    padding-left: 8px !important;
  }
}

/* Narrow phones (360-400px): Measure goes icon-only so the tenement / partner
   readout in the status bar isn't cut to four letters. Both of its states
   (ruler / stop) carry an icon. */
@media (max-width: 400px) {
  #measureBtn {
    font-size: 0 !important;
    padding: 4px 8px !important;
  }

  #measureBtn .ti {
    font-size: 16px;
  }
}

/* ---- Toolbar at phone width --------------------------------------------- */

@media (max-width: 600px) {
  .toolbar {
    gap: 6px;
  }

  /* The logo is hidden at this width, so .toolbar-left only holds the account
     chip / Sign in button. It used to flex down to 0px wide and let the chip
     spill over the search box; size it to its content instead. */
  .toolbar-left {
    flex: 0 0 auto;
  }

  #mapAccountChip,
  #mapSignIn {
    margin-left: 0 !important;
  }

  /* The account menu is right-aligned to its chip, which on a phone is at
     the far left of the screen, so it opened off the left edge. */
  #mapAccountChip .nm-acct-menu {
    right: auto;
    left: 0;
    max-width: calc(100vw - 16px);
  }

  /* Search takes whatever the buttons leave. */
  #globalSearchBar {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  /* Auto type detection covers IDs, holders and A-files; the manual picker
     costs ~60px the input needs more. */
  #globalSearchTypeBtn {
    display: none;
  }

  .toolbar-right {
    flex: 0 0 auto;
    gap: 4px;
  }

  .toolbar-right .dropdown-toggle {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
  }

  /* Autocomplete anchors to the (now narrower) search bar; give it the
     screen width instead, and room for more than four suggestions. */
  #globalSearchAutocomplete {
    position: fixed;
    top: 56px;
    left: 8px;
    right: 8px;
    max-height: 50dvh;
    border-radius: 6px;
  }
}

/* ---- Toolbar at tablet width (601-960px) ---------------------------------
   The logo is shown here but its container is allowed to shrink while the
   169px image inside it is not, so from ~890px down the account chip / Sign in
   button (placed after the container) sat on top of the logo. Keep the logo
   at full width and let the search box give up the room instead. The 210px
   search width in styles.css never applied here: the later base 360px rule
   overrides it. */

@media (min-width: 601px) and (max-width: 960px) {
  .toolbar-left,
  .logo-container {
    flex: 0 0 auto;
  }

  #globalSearchBar {
    flex: 1 1 auto;
    width: auto;
    max-width: 360px;
    min-width: 0;
  }

  /* Never squeeze the icon buttons; the search box is the flexible part. */
  .toolbar-right {
    flex: 1 0 auto;
  }
}