/* ============================================================
   touch-gaze.css — Touch Gaze Pad
   ────────────────────────────────────────────────────────────
   PURPOSE : Look of the pad the eyes follow a finger over
             (js/gaze/touch-gaze.js): corner brackets marking the
             area, crosshair + contact dot while a finger is down,
             the position readout above the pad, and a first-use hint.
             Element positions and the reticle are set by script.
   ============================================================ */

/* ── The pad: the eye region, where touches steer the eyes ── */
.gaze-pad {
  position: absolute;
  /* Over the eye graphics (1–5) and the skin overlay (3); under every tool
     (Krimsky prism 50, penlight 60, paddle 100, wand 120) so they stay grabbable. */
  z-index: 10;
  /* The browser must not turn a drag on the eyes into a page scroll or a zoom:
     that cancels the pointer and the eyes stop following. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--accent, #1F4B4C);
  border-radius: 16px;
}
.gaze-pad[hidden] { display: none; }

/* Corner brackets — the "defined area", quiet at rest, lit while touched. */
.gaze-pad__corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2.5px solid currentColor;
  opacity: 0.5;
  pointer-events: none;
  filter: drop-shadow(0 0 1px rgb(255 255 255 / 0.85));
  transition: opacity 160ms ease;
}
.gaze-pad__corner[data-c="tl"] { top: 0;    left: 0;  border-right: 0; border-bottom: 0; border-top-left-radius: 9px; }
.gaze-pad__corner[data-c="tr"] { top: 0;    right: 0; border-left: 0;  border-bottom: 0; border-top-right-radius: 9px; }
.gaze-pad__corner[data-c="bl"] { bottom: 0; left: 0;  border-right: 0; border-top: 0;    border-bottom-left-radius: 9px; }
.gaze-pad__corner[data-c="br"] { bottom: 0; right: 0; border-left: 0;  border-top: 0;    border-bottom-right-radius: 9px; }
.gaze-pad[data-state="active"] .gaze-pad__corner { opacity: 1; }

/* Soft frame + inner glow while a finger is down. */
.gaze-pad::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgb(31 75 76 / 0), inset 0 0 26px rgb(31 75 76 / 0);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 0%, transparent), inset 0 0 26px color-mix(in srgb, currentColor 0%, transparent);
  transition: box-shadow 180ms ease;
}
.gaze-pad[data-state="active"]::after {
  box-shadow: inset 0 0 0 1.5px rgb(31 75 76 / 0.5), inset 0 0 26px rgb(31 75 76 / 0.16);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 50%, transparent), inset 0 0 26px color-mix(in srgb, currentColor 16%, transparent);
}

/* Crosshair through the contact point: visible on both sides of the fingertip,
   which itself hides everything under ~30 px. Positioned by transform. */
.gaze-pad__hair {
  position: absolute;
  top: 0;
  left: 0;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 0 0.5px rgb(255 255 255 / 0.6);
  transition: opacity 120ms ease;
}
.gaze-pad__hair--v { width: 1px; height: 100%; }
.gaze-pad__hair--h { height: 1px; width: 100%; }
.gaze-pad[data-state="active"] .gaze-pad__hair { opacity: 0.5; }

/* Contact dot — a zero-size anchor moved by script, its visual centred on it. */
.gaze-pad__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.gaze-pad__dot::before {
  content: "";
  position: absolute;
  top: -9px;
  left: -9px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border-radius: 50%;
  background: currentColor;
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 7px rgb(31 75 76 / 0.2), 0 2px 8px rgb(0 0 0 / 0.35);
  opacity: 0;
  transform: scale(0.4);
  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1.35), opacity 120ms ease;
}
.gaze-pad[data-state="active"] .gaze-pad__dot::before { opacity: 1; transform: scale(1); }
.gaze-pad[data-paused="true"] .gaze-pad__dot::before { background: #b26a00; box-shadow: 0 0 0 7px rgb(178 106 0 / 0.22), 0 2px 8px rgb(0 0 0 / 0.35); }

/* ── Position readout: fixed above the pad (script sets left/top; the finger never covers it) ── */
.gaze-chip {
  z-index: 90;      /* over the pupil readouts (65), under the cover paddle (100) */
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: max-content;
  max-width: min(88vw, 340px);
  padding: 4px 12px;
  white-space: nowrap;
  text-align: center;
  unicode-bidi: plaintext;
  font-family: 'Inter', system-ui, sans-serif;
  background: rgb(10 22 34 / 0.92);
  border: 1px solid rgb(79 195 247 / 0.45);
  border-radius: 20px;
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.4), 0 0 10px rgb(79 195 247 / 0.22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 140ms ease, visibility 0s linear 140ms;
}
.gaze-chip[data-side="below"] { transform: translate(-50%, 0); }
.gaze-chip[data-state="active"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 90ms ease, visibility 0s;
}
.gaze-chip__title { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: #4fc3f7; }
.gaze-chip__sub   { font-size: 9.5px; font-weight: 500; color: #b0bec5; font-family: 'IBM Plex Mono', monospace; }
.gaze-chip__sub[hidden] { display: none; }
.gaze-pad[data-paused="true"] + .gaze-chip { border-color: rgb(255 179 0 / 0.55); box-shadow: 0 6px 16px rgb(0 0 0 / 0.4), 0 0 10px rgb(255 179 0 / 0.2); }
.gaze-pad[data-paused="true"] + .gaze-chip .gaze-chip__title { color: #ffca4f; }

/* Safe default anchor for both overlays.
   touch-gaze.js re-places them from the pad's live rect, but it can only do
   that once the eyes have a box: measure() returns null while the exam route
   is still hidden, and its retry runs in a requestAnimationFrame, which a
   background tab never delivers. Until then `left` is unset, so
   `translate(-50%, …)` drops half the pill past the left edge. The hint is
   already faded to opacity 0 by that point, so nothing is visible — but the
   box still counts, and with the wider Arabic string it was worth 93px of
   horizontal scroll on the whole page (measured: documentElement.scrollWidth
   472 against a 375px viewport). Centring them by default costs nothing: it
   is where JS puts them anyway. */
.gaze-chip,
.gaze-hint { left: 50%; }

/* ── First-use hint: the empty strip under the eyes; gone for good after the first touch ── */
.gaze-hint {
  z-index: 85;
  display: flex;
  align-items: center;
  gap: 7px;
  width: max-content;      /* absolutely placed at the pad's centre: shrink-to-fit would wrap it at half the field */
  max-width: min(94%, 340px);
  padding: 6px 13px;
  border-radius: 999px;
  transform: translate(-50%, -100%);
  font: 600 11.5px/1.3 'Inter', system-ui, sans-serif;
  text-align: start;
  text-wrap: balance;
  unicode-bidi: plaintext;
  color: #e8f4fa;
  background: rgb(10 22 34 / 0.88);
  box-shadow: 0 8px 22px rgb(0 0 0 / 0.3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: gaze-hint-cycle 6.5s ease both;
}
.gaze-hint[hidden] { display: none; }
.gaze-hint svg { width: 18px; height: 18px; flex: none; color: #4fc3f7; animation: gaze-hint-nudge 1.6s ease-in-out infinite; }

@keyframes gaze-hint-cycle {
  0%   { opacity: 0; transform: translate(-50%, -84%); }
  8%   { opacity: 1; transform: translate(-50%, -100%); }
  88%  { opacity: 1; transform: translate(-50%, -100%); }
  100% { opacity: 0; transform: translate(-50%, -100%); visibility: hidden; }
}
@keyframes gaze-hint-nudge { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }

@media (prefers-reduced-motion: reduce) {
  .gaze-pad__dot::before { transition: opacity 120ms ease; transform: none; }
  .gaze-hint { animation-name: gaze-hint-fade; }
  .gaze-hint svg { animation: none; }
  @keyframes gaze-hint-fade { 0% { opacity: 0; } 8%, 88% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
}