/* ============================================================
   case-quiz-eyes.css — Case Quiz: Real Eye Rendering Support
   ─────────────────────────────────────────────────────────────
   Loaded alongside css/eye-zone.css and css/badges.css (the Exam
   Simulator's own eye-zone/badge visuals, reused as-is — see
   js/case-quiz/eye-render/). This file carries only the two small
   rules that page never ships standalone:
     - .eye-model-toggle / .model-btn, copied verbatim from
       css/sidebar.css (generic, not id-scoped — safe to reuse under
       a different container id, #cqEyeModelToggle).
     - .globe-retracted, copied verbatim from css/corneal-reflex.css
       (used for the TED/Duane-style restrictive cases).
   ============================================================ */

#cqEyeModelToggle.eye-model-toggle {
  display: flex;
  background: var(--surface-sunken);
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  padding: 3px;
  gap: 3px;
  max-width: 240px;
}
#cqEyeModelToggle .model-btn {
  flex: 1;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 7px 8px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-faint);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
#cqEyeModelToggle .model-btn:hover { color: var(--text); }
#cqEyeModelToggle .model-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
#cqEyeModelToggle .model-btn.active {
  background: var(--surface);
  color: var(--accent-strong);
  box-shadow: 0 1px 2px hsl(var(--shadow-color) / 0.08);
}

.cq-eye-zone .globe-retracted {
  transform: scale(0.97) !important;
  transition: transform 0.15s ease-in-out;
}

/* The illustrated/photo lid-drape sits off-canvas (translateY) when the
   eye is open, and css/eye-zone.css leaves the eye <svg> at
   `overflow: visible` (correct for the Exam Simulator's own full-page
   layout, where nothing empty sits above the eyes to reveal the
   off-canvas paint). Case Quiz's compact card layout has no such
   incidental occlusion, so clip right at the wrap's own box here. */
.cq-eye-zone .eye-svg-wrap {
  overflow: hidden;
  border-radius: 12px;
}

/* ============================================================
   Live tracking + draggable Penlight/Cover Paddle/Krimsky Prism
   ─────────────────────────────────────────────────────────────
   css/penlight.css, css/drag-cover.css, css/tool-dock.css,
   css/krimsky/{tokens,prism,panel}.css are linked directly in
   visual_pathway.html (all narrowly class-scoped — see phase-1
   precedent). The handful of rules in THOSE files that key off a
   bare id (`#anchor-OD`, `#penlightIcon`, `#krimsky-dock-slot`,
   the main app's own ones) don't match this page's `cq-`-prefixed
   ids, so those specific positioning/visibility rules are mirrored
   here under the cq- ids instead.
   ============================================================ */

/* The draggable tools must be able to extend past the stage's own
   box (the cover paddle's handle, the docked penlight/prism resting
   near the tool-dock row) — overrides case-quiz.css's older
   `overflow: hidden` on this element. The per-eye clip above already
   contains the lid-drape off-canvas paint, so this is safe. */
/* ── Stage container final overrides ──
   Allow tools to extend past the stage box.
   The grid display (set in case-quiz.css) handles row structure;
   we only override overflow here. */
.cq-stage-container {
  overflow: visible;
}

/* ── Eye-pair row ──
   Spans both grid columns of the stage so the eyes fill the
   full width. Inside it is a plain flex row for the two eyes. */
.cq-eyes-pair {
  grid-column: 1 / -1;   /* span the full 2-column grid width */
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  width: 100%;
  padding-bottom: 10px;
}

/* ── Each eye zone ──
   flex:1 lets both eyes share the available space equally.
   max-width prevents them from growing too large on wide screens. */
.cq-eye-zone {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 300px !important;
  width: auto !important;   /* cancel eye-zone.css's width:100% */
}

/* Keep eye-svg-wrap inside its zone's bounds */
.cq-eye-zone .eye-svg-wrap {
  max-width: 100%;
}

#cq-anchor-OD { left: 25%; }
#cq-anchor-OS { left: 75%; }
#cq-anchor-dock, #cq-anchor-cover, #cq-anchor-krimsky-dock {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin: 0;
  transform: translate(-50%, -50%);
}

#cq-penlight-icon {
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: transform 260ms ease;
  transform-origin: 50% 75%;
  pointer-events: none;
}

/* Main app conditionally shows/hides this dock slot; the quiz always
   shows it (Krimsky is a bonus teaching tool on every case here). */
#cq-krimsky-dock-slot {
  display: flex;
}

/* Compact inline Krimsky readout (case-quiz-eyes' own — not a port of
   the main app's full styled sidebar panel, see cq-krimsky.js). */
.cq-krimsky-readout {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--text-soft);
  background: var(--surface-sunken);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  white-space: nowrap;
}
.cq-krimsky-readout .cq-k-eye { color: var(--accent-strong); font-weight: 700; }
.cq-krimsky-readout .cq-k-dir { color: var(--text-faint); }
.cq-krimsky-readout button {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--text-soft);
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.cq-krimsky-readout button:hover { border-color: var(--accent); color: var(--accent-strong); }

/* ── Per-case sources / further reading ────────────────────────────── */
.cq-refs-card {
  margin-top: 14px;
  padding: 14px 18px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #2563eb;
  border-radius: 10px;
}
.cq-refs-header {
  font-size: 13px;
  font-weight: 700;
  color: #1e3a8a;
  margin-bottom: 8px;
}
.cq-refs-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cq-refs-list li { font-size: 13px; line-height: 1.5; }
.cq-refs-list a { color: #2563eb; text-decoration: none; }
.cq-refs-list a:hover { text-decoration: underline; }