/* Shared search button (14 Oct 2026): red circle, white magnifier, icon only. Applies to every button that means "search".
   Text/svg inside is hidden visually but kept for assistive tech (aria-label or text content); the icon is a CSS background (inline SVG data URI). */
:root { --sb-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2710.5%27 cy=%2710.5%27 r=%277%27/%3E%3Cpath d=%27m20.5 20.5-5-5%27/%3E%3C/svg%3E"); }
html body.ux.cec :is(.ux-hsearch > button[type=submit], .ux-bigsearch > button, .cec-bigsearch button, .ti-search button, .rec-search input[name=q] ~ button, form[role=search] > button.ux-btn-primary[type=submit], .li-bigsearch button.btn, .li-sbox button.btn, .rec-search input[name=q] ~ button, form[role=search] > button.ux-btn-primary[type=submit], .hp-search button.btn[type=submit]) {
  box-sizing: border-box !important; flex: none !important; position: relative;
  width: 52px !important; min-width: 52px !important; height: 52px !important; min-height: 44px; padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 50% !important; cursor: pointer;
  background: var(--c-accent, #c8102e) var(--sb-icon) center / 22px 22px no-repeat !important; color: transparent !important;
  font-size: 0 !important; line-height: 0 !important; gap: 0 !important; overflow: hidden; display: inline-block !important; box-shadow: 0 2px 8px rgba(200,16,46,.35);
  transition: background-color .15s, transform .15s;
}
html body.ux.cec :is(.ux-hsearch > button[type=submit], .ux-bigsearch > button, .cec-bigsearch button, .ti-search button, .rec-search input[name=q] ~ button, form[role=search] > button.ux-btn-primary[type=submit], .li-bigsearch button.btn, .li-sbox button.btn, .hp-search button.btn[type=submit]) :is(svg, span) { display: none !important; }
html body.ux.cec :is(.ux-hsearch > button[type=submit], .ux-bigsearch > button, .cec-bigsearch button, .ti-search button, .rec-search input[name=q] ~ button, form[role=search] > button.ux-btn-primary[type=submit], .li-bigsearch button.btn, .li-sbox button.btn, .hp-search button.btn[type=submit]):is(:hover, :active) { background-color: var(--c-accent-ink, #9e0c24) !important; }
html body.ux.cec :is(.ux-hsearch > button[type=submit], .ux-bigsearch > button, .cec-bigsearch button, .ti-search button, .rec-search input[name=q] ~ button, form[role=search] > button.ux-btn-primary[type=submit], .li-bigsearch button.btn, .li-sbox button.btn, .hp-search button.btn[type=submit]):focus-visible { outline: 0 !important; overflow: visible; box-shadow: 0 0 0 2px #fff, 0 0 0 5px #121314 !important; }
/* header: input is 44px high, so the circle sits inside it; an invisible pseudo-element keeps the touch target at 44px */
html body.ux.cec.cec.cec .ux-hsearch > button[type=submit] { position: absolute !important; right: 3px !important; top: 3px !important; width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px; background-size: 18px 18px !important; box-shadow: none; overflow: visible; }
html body.ux.cec.cec.cec .ux-hsearch > button[type=submit]::after { content: ""; position: absolute; inset: -3px; }
html[data-cec="red"] body.ux.cec.cec.cec .ux-hsearch > button[type=submit] { box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
/* big search inside the input (live markup is absolutely positioned) */
html body.ux.cec.cec.cec .ux-bigsearch > button { position: absolute !important; top: 6px !important; right: 6px !important; width: 44px !important; min-width: 44px !important; height: 44px !important; box-shadow: none; }
html body.ux.cec .ux-bigsearch input { padding-right: 60px !important; }
/* intelligence: keep the row layout on phones (intel.css stacks it) */
html body.ux.cec .li-bigsearch, html body.ux.cec .li-sbox { flex-direction: row !important; align-items: center; }
html body.ux.cec.cec.cec .li-bigsearch button.btn { width: 54px !important; min-width: 54px !important; height: 54px !important; }
html body.ux.cec.cec.cec .li-sbox button.btn { width: 48px !important; min-width: 48px !important; height: 48px !important; }
html body.ux.cec .cec-bigsearch form { align-items: center; }
/* Near me: keep the circle beside the field on phones */
html body.ux.cec form[role=search][action$="/near"] { flex-wrap: nowrap !important; align-items: flex-end !important; }
html body.ux.cec form[role=search][action$="/near"] > .ux-field { flex: 1 1 0 !important; min-width: 0; }
html body.ux.cec form[role=search][action$="/near"] > button { margin-bottom: 0 !important; }

/* Verifier fixes (14 Oct 2026, task V) */
/* 1. Big search inside the input (home, /search, results, help): the shared rule above wins on specificity, because :is() takes the
      specificity of its most specific argument, so the 44px size never applied and a 52px circle hung 6px below the 52px input.
      Higher specificity, 44px, centred vertically whatever the input height. */
html body.ux.cec.cec.cec.cec.cec .ux-bigsearch > button { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; top: 50% !important; right: 4px !important; transform: translateY(-50%); }
/* 2. The place chooser on /start (Go / Change) is a search form like Near me and Local Intelligence, so it gets the same circle. */
html body.ux.cec form[role=search][action$="/start"] .hp-search-row > button.btn[type=submit] {
  box-sizing: border-box !important; flex: none !important; position: relative;
  width: 52px !important; min-width: 52px !important; height: 52px !important; min-height: 44px; padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 50% !important; cursor: pointer;
  background: var(--c-accent, #c8102e) var(--sb-icon) center / 22px 22px no-repeat !important; color: transparent !important;
  font-size: 0 !important; line-height: 0 !important; overflow: hidden; display: inline-block !important; box-shadow: 0 2px 8px rgba(200,16,46,.35) !important;
  transition: background-color .15s;
}
html body.ux.cec form[role=search][action$="/start"] .hp-search-row { align-items: center; }
/* 3. Phone header: the search icon link becomes the same red circle (44px touch target kept; hidden on desktop as before). */
html body.ux.cec .ux-hdr a.ux-iconbtn.ux-mobonly[href$="/search"] { background-color: var(--c-accent, #c8102e) !important; border-radius: 50% !important; color: #fff !important; box-shadow: none; }
html[data-cec="red"] body.ux.cec .ux-hdr a.ux-iconbtn.ux-mobonly[href$="/search"] { box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
html body.ux.cec :is(form[role=search][action$="/start"] .hp-search-row > button.btn[type=submit], .ux-hdr a.ux-iconbtn.ux-mobonly[href$="/search"]):is(:hover, :active) { background-color: var(--c-accent-ink, #9e0c24) !important; }
html body.ux.cec :is(form[role=search][action$="/start"] .hp-search-row > button.btn[type=submit], .ux-hdr a.ux-iconbtn.ux-mobonly[href$="/search"]):focus-visible { outline: 0 !important; box-shadow: 0 0 0 2px #fff, 0 0 0 5px #121314 !important; }

/* 4. /find-yourself "Find my record" (owner request 14 Oct 2026): same red circle, beside the two fields (aria-label kept). */
html body.ux.cec form.ti-formcard[role=search] { display: flex !important; flex-wrap: nowrap !important; align-items: flex-end !important; gap: 14px !important; }
html body.ux.cec form.ti-formcard[role=search] > .ux-grid2 { flex: 1 1 0 !important; min-width: 0; margin: 0 !important; }
html body.ux.cec.cec.cec.cec form.ti-formcard[role=search] > button.btn[type=submit] {
  box-sizing: border-box !important; flex: none !important; position: relative;
  width: 52px !important; min-width: 52px !important; height: 52px !important; min-height: 44px; padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 50% !important; cursor: pointer;
  background: var(--c-accent, #c8102e) var(--sb-icon) center / 22px 22px no-repeat !important; color: transparent !important;
  font-size: 0 !important; line-height: 0 !important; gap: 0 !important; overflow: hidden; display: inline-block !important; box-shadow: 0 2px 8px rgba(200,16,46,.35) !important;
  transition: background-color .15s;
}
html body.ux.cec.cec.cec.cec form.ti-formcard[role=search] > button.btn[type=submit] svg { display: none !important; }
html body.ux.cec.cec.cec.cec form.ti-formcard[role=search] > button.btn[type=submit]:is(:hover, :active) { background-color: var(--c-accent-ink, #9e0c24) !important; }
html body.ux.cec.cec.cec.cec form.ti-formcard[role=search] > button.btn[type=submit]:focus-visible { outline: 0 !important; overflow: visible; box-shadow: 0 0 0 2px #fff, 0 0 0 5px #121314 !important; }
/* align the circle with the inputs: fields carry a 14.4px bottom margin that pushed the form taller than the inputs */
html body.ux.cec form.ti-formcard[role=search] > .ux-grid2 > .ux-field { margin-bottom: 0 !important; }
@media (max-width: 760px) { html body.ux.cec form.ti-formcard[role=search] > .ux-grid2 > .ux-field + .ux-field { margin-top: 18px !important; } }