.eye-zone {
  position: relative;
  /* Removed z-index: 1 so eye-zone doesn't trap its children in a stacking context.
     This allows lid-svg (z-index: 5) to sit above the shared skin overlay. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

@media (max-width: 640px) {
  .eye-zone {
    gap: 6px;
  }
}

/* Shared skin OVERLAY (photo-real model only) — sits ABOVE the SVG eye
   layers (z-index:3 > main eye SVG). The skin image has transparent holes
   for the eyes, so the sclera/iris show through, while the skin covers
   the outer edges of the sclera cleanly. */
.shared-skin-window {
  position: absolute;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
}
.shared-skin-img {
  position: absolute;
  max-width: none;
}

.eye-tag {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: "Source Serif 4", Georgia, serif;
}
.eye-tag .code { font-size: clamp(14px, 3.8vw, 19px); font-weight: 600; }
.eye-tag .full { font-size: clamp(9.5px, 2.5vw, 11.5px); color: var(--text-faint); font-family: "Inter", sans-serif; }

.eye-svg-wrap {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 300 / 200;
}
.eye-svg-wrap svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* lid-svg: upper-eyelid overlay — sits ABOVE the skin window (z-index:3) and
   the main eye SVG so the animated lid always slides in front of everything.
   Positioned absolutely over the main SVG; pointer-events:none preserves
   click/hover on the eye SVG below. */
.lid-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 5;
  pointer-events: none;
  overflow: hidden !important;
}

.light-glow {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(46 100% 80% / 0.4), hsl(46 100% 74% / 0) 62%);
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
  z-index: 1;
}
.eye-zone[data-lit="true"] .light-glow { opacity: 1; }

.pupil-readout {
  position: relative;
  z-index: 65;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(10px, 2.6vw, 12px);
  color: var(--text-soft);
  background: var(--surface-sunken);
  border: 1px solid var(--border-soft);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.pupil-readout b {
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.eye-zone[data-state="paradoxical-dilate"] .pupil-readout,
.eye-zone[data-state="fixed-dilated"] .pupil-readout,
.eye-zone[data-state="miosis"] .pupil-readout,
.eye-zone[data-state="tonic-dilated"] .pupil-readout,
.eye-zone[data-state="mid-dilated"] .pupil-readout {
  border-color: var(--warn);
  color: var(--warn-strong);
}
.eye-zone[data-state="paradoxical-dilate"] .pupil-readout b,
.eye-zone[data-state="fixed-dilated"] .pupil-readout b,
.eye-zone[data-state="miosis"] .pupil-readout b,
.eye-zone[data-state="tonic-dilated"] .pupil-readout b,
.eye-zone[data-state="mid-dilated"] .pupil-readout b { color: var(--warn-strong); }