/* A small picture at the left of the Map, Here and Web fields (SP8.1; William, 2026-10-29: "use icons for the
   different search fields ... subdued similar colour to the searchbar. but visible."). The Ask field keeps its pearl.
   js/search.js puts one zero-width <span class="search-icon" data-for="<field id>"> just before each of those
   fields (an <input> can hold no child); the drawing inside hangs at the field's left edge. The colour is the
   look's own --muted (the same tone as the words beside it), never a literal, so every look wears it; the contrast
   against the bar is tested for every look (tests/search-icons.test.mjs). Loaded after css/dew.css, whose
   rules for the row it leaves alone; the ids here outrank them. */

/* the picture: in the row but taking no room, never taking a click (the press reaches the field behind it) */
.search-pair > .search-icon { flex: none; width: 0; position: relative; color: var(--muted); pointer-events: none; }
.search-icon > svg {
  position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%);
  pointer-events: none; display: block;
  transition: left var(--search-ms, 0s) var(--mo-ease);   /* --search-ms is 0 under reduce motion */
}

/* the full field: the picture, then the word. Room for the 16 px picture and a gap of 8 px. */
.search-pair > :is(#search-map, #search, #search-web) { padding-left: 36px; }

/* a field that gave up its room is a mark: the picture alone, centred in its 44 px, in place of the data-mark
   character (the placeholder is kept for the screen reader but drawn clear) */
.search-pair[data-room] > :is(#search-map, #search, #search-web):not(.has-room) { padding-left: 4px; text-align: center; }
.search-pair[data-room] > :is(#search-map, #search, #search-web):not(.has-room)::placeholder { color: transparent; }
.search-pair[data-room] > .search-icon:has(+ input:not(.has-room)) > svg { left: calc((var(--search-min, 44px) - 16px) / 2); }

/* a phone: four fields side by side, the words one short word each. The picture is a little smaller and closer
   in, the word starts after it (so the picture and its word read as one unit in the narrow field). */
@media (max-width: 760px) {
  .search-icon > svg { left: 4px; width: 12px; height: 12px; }
  .search-pair > :is(#search-map, #search, #search-web) { padding-left: 18px; text-align: start; }
  .search-pair:not([data-room]) > :is(#search-map, #search, #search-web) { padding-left: 18px; text-align: start; }
  .search-pair[data-room] > :is(#search-map, #search, #search-web):not(.has-room) { padding-left: 2px; text-align: center; }
  .search-pair[data-room] > .search-icon:has(+ input:not(.has-room)) > svg { left: calc((var(--search-min, 44px) - 12px) / 2); }
  /* the field that holds the room is about 74 px wide on a phone: the picture takes 4 px more of the left than dew.css left
     for the word, so 8 px come back from the right (the browser keeps about 13 px there for its clear button) */
  .search-pair[data-room] > :is(#search-map, #search, #search-web).has-room:not(.fv-has) { padding-right: 6px; }
}

/* a bar too narrow for the picture and its word (js/search.js sets data-icon-only): the picture alone, centred in the
   field in place of the word (the placeholder is drawn clear; the word is still the field's aria-label). The fields keep the
   padding they have, so their widths do not change. Its zero-width box takes the width of a field
   (the three share the row equally) and gives it back with the negative margin, so the row is laid out as before. */
.search-pair[data-icon-only]:not([data-room]) > .search-icon { width: 25%; margin-right: -25%; }
.search-pair[data-icon-only]:not([data-room]) > .search-icon > svg { left: calc(50% - 7px); width: 14px; height: 14px; }
.search-pair[data-icon-only]:not([data-room]) > :is(#search-map, #search, #search-web)::placeholder { color: transparent; }