/* Project 114 - measured interaction fixes. Additive only.
   Evidence: project-114-cross-device-design-audit-2026-08-22.md */

/* 1. Overlay stacking was a tie, not a decision.
      .visitor-preferences and .consent-centre are both position:fixed,
      full-viewport, z-index:100000 - so which one wins is decided by DOM
      order alone. The consent panel covers the preferences button, which is
      why the preferences control could not be clicked at all.
      Make the intended order explicit rather than accidental. */
.visitor-preferences { z-index: 99990 !important; }
.consent-centre      { z-index: 100000 !important; }

/* 2. Touch targets below the agreed 44px floor.
      Expanding the HIT AREA with a pseudo-element rather than resizing the
      control, so nothing moves visually and no layout shifts. */
.field-tip { position: relative; }
.field-tip::after {
	content: "";
	position: absolute;
	top: -14px; right: -14px; bottom: -14px; left: -14px;
}

.swap-button { position: relative; }
.swap-button::after {
	content: "";
	position: absolute;
	top: -6px; right: -6px; bottom: -6px; left: -6px;
}

/* 3. Hero highlight controls measured 22x4 CSS px AND sat under div.shell,
      so elementFromPoint never returned them - dead controls.
      Give them a real hit area and lift them out of the parent's stack.
      This is an interim measure: the slider is approved for replacement. */
button[aria-label^="Show highlight"],
button[aria-label^="عرض الإبراز"] {
	position: relative;
	z-index: 2;
	min-height: 12px;
}
button[aria-label^="Show highlight"]::after,
button[aria-label^="عرض الإبراز"]::after {
	content: "";
	position: absolute;
	top: -20px; right: -6px; bottom: -20px; left: -6px;
}