/* Loaded only for /weather-map?from=home (weather-map.php): the page as the homepage's Forecast tab. Since the redesign
   (5 Oct 2026) both doors have the same layout (wx.css): the place panel, the time pill, the drawer with the model switch,
   the timeline bar. What this door still changes is the search box: it is the site header's own (#v4-query, the one the
   Radar and the Map use), which wx.js answers. .wx--home is on <main> whenever the page is opened from the homepage;
   .wx--hq as well when the search box is the site header's (the v4 chrome). On a phone that box folds to a magnifier on the
   map (below), as the Weather menu door's own box does (wx.css section 9). */

/* the header's result list, as wx.js writes it there (search.js headerHtml): a note row, and icons that keep their size */
.v4-search-results .wx-hq-note { color: var(--v4-muted, #6b7a90); font-size: 12px; border-bottom: 0; }
.v4-search-results .v4-search-result .v4-icon { flex: none; }

@media (max-width: 900px) {
    /* a phone (spec §7 item 1; 11.png): the header's box, which hangs from the header onto the top of the map under the view bar,
       folds to a 44 px round magnifier 10 px left of the Layers button (wx.css section 9: Layers 10 px in from the right and 10 px
       down the map, 44 px wide; the map starts under the header's 1 px rule and the 44 px strip), in the header's own colours. The box itself stays whole and lies over the button, unseen, so a tap puts the
       caret in it and opens it (html.wx-search-open: wx.js wireHeaderSearchFold) to the box the Radar has, across the top of the
       map; a chosen result, Escape or a tap elsewhere folds it again */
    .wx-body .v4-search:not(#v4-host) { left: auto; right: 64px; top: calc(100% + var(--v4-banner-height, 0px) + 1px + 44px + 10px); justify-content: center; width: 44px;
                                        min-width: 0; height: 44px; min-height: 0; padding: 0; border-radius: 50%; color: var(--v4-text); box-shadow: var(--v4-shadow);
                                        cursor: pointer; }
    /* 16px in the header's box here, as this page's own box has: an iPhone zooms the whole page when a smaller one is tapped */
    .wx-body .v4-search input:not(#v4-host) { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; font-size: 16px; opacity: 0; cursor: pointer; }
    html.wx-search-open .wx-body .v4-search:not(#v4-host) { left: 10px; right: 10px; justify-content: flex-start; width: auto; height: auto; min-height: 45px;
                                                            padding: 11px 12px; border-radius: 8px; color: var(--v4-faint); cursor: auto; }
    html.wx-search-open .wx-body .v4-search input:not(#v4-host) { position: static; width: 100%; height: auto; border-radius: 0; opacity: 1; cursor: text; }
    /* an open drawer covers the map on a phone: the folded box does not float over it */
    html:has(.wx.wx-drawer-open) .wx-body .v4-search:not(#v4-host) { visibility: hidden; }
}