/* ============================================================
   retinoscopy-ui.css — UI / Teaching Layer
   ─────────────────────────────────────────────────────────────
   PURPOSE : Everything added on top of retinoscopy.css by the UI/
             teaching layer — the explain affordance, bilingual/RTL
             support, progressive-disclosure mode gating, the guided
             coach, the case presentation panel, and the responsive
             tablet/phone shell.
   SCOPE   : retinoscopy.html only. Logical (start/end) properties
             throughout so RTL just works; a few properties are
             deliberately physical (ltr-pinned diagrams) — noted inline.
   ============================================================ */

/* ── Native `hidden` must always win ──────────────────────────────────────
   Several rules below (`.ret-explain-pop`, `.ret-coach`, etc.) set `display`
   unconditionally for their open/enabled state. Author rules of equal
   specificity beat the UA stylesheet's `[hidden]{display:none}`, so without
   this every popover and panel that JS marks `hidden` rendered permanently
   open — the entire "what is this?" layer was stuck expanded on every
   control at once. This one rule is the single source of truth. */
[hidden] { display: none !important; }

/* ── Screen-reader-only utility ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Focus visibility (AA) — every interactive element in this layer ── */
.ret-app :is(button, a, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--ret-streak, #ffe082);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ══════════════════════════════════════════════════════════════════════
   HEADER CONTROLS — language + "explain everything"
   ══════════════════════════════════════════════════════════════════════ */

.ret-disclaimer {
  font-size: 0.68rem;
  color: var(--text-faint);
  margin-top: 2px;
  font-style: italic;
}

.ret-header-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-inline-start: auto;
  flex-shrink: 0;
}

.ret-explain-master {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  user-select: none;
}

.ret-explain-master input {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.ret-lang-btn {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-strong);
  background: var(--accent-tint);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ret-lang-btn:hover {
  background: var(--accent);
  color: #fff;
}

@media (max-width: 640px) {
  .ret-header-controls {
    margin-inline-start: 0;
    gap: 10px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   FIELD PATTERN — the unit every explainable control is wrapped in
   ══════════════════════════════════════════════════════════════════════ */

.ret-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ret-field-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ret-field-label {
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  flex: 1;
  min-width: 0;
}

.ret-field-note {
  font-size: 11px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

.ret-explain-slot {
  display: inline-flex;
  flex-shrink: 0;
}

.ret-inline-field {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.ret-callout {
  background: var(--ret-surface-card);
  border: 1px solid var(--ret-border);
  border-radius: 10px;
  padding: 10px 12px;
}

/* ══════════════════════════════════════════════════════════════════════
   EXPLAIN LAYER — the "what is this?" affordance
   ══════════════════════════════════════════════════════════════════════ */

.ret-explain-btn {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  border: 1px solid var(--ret-border);
  background: var(--ret-surface-elevated);
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.ret-explain-btn:hover {
  background: var(--accent);
  color: #fff;
}

.ret-explain-btn.is-open {
  background: var(--accent);
  color: #fff;
  transform: rotate(180deg);
}

.ret-explain-pop {
  background: #0a1216;
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 12px 14px;
  margin-block-start: 2px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: fadeIn 0.18s ease;
}

.ret-explain-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ret-streak, #ffe082);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 0;
}

.ret-explain-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ret-explain-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ret-explain-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #7dd3fc;
}

.ret-explain-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: #cbd5e1;
  margin: 0;
}

.ret-explain-missing {
  font-size: 12px;
  color: #64748b;
  font-style: italic;
  margin: 0;
}

/* When "Explain everything" is on, every popover is open — no per-item change
   needed here since JS toggles aria-expanded/hidden directly; this class just
   marks the state on <html> for anything that wants to key off it. */
html.ret-explain-all .ret-explain-btn { color: #fff; }

/* ══════════════════════════════════════════════════════════════════════
   MODE TABLIST — two-line label + hint, active/hover/focus states
   ══════════════════════════════════════════════════════════════════════ */

.ret-mode-field { flex: 1; min-width: 0; }

.ret-mode-btn {
  align-items: center;
  text-align: start;
}

.ret-mode-icon {
  font-size: 15px;
  line-height: 1;
}

.ret-mode-icon--guided { color: #38bdf8; }
.ret-mode-icon--exam { color: #ef4444; }

.ret-mode-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
}

.ret-mode-label {
  font-size: 12.5px;
  font-weight: 700;
}

.ret-mode-hint {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.75;
}

.ret-mode-btn.active .ret-mode-icon,
.ret-mode-btn.active .ret-mode-icon--guided,
.ret-mode-btn.active .ret-mode-icon--exam {
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════
   PROGRESSIVE DISCLOSURE — mode & guided-step gating
   ══════════════════════════════════════════════════════════════════════ */

[data-ret-modes][hidden] { display: none !important; }

/* A control gated to a later guided step: present in the DOM (so layout
   doesn't jump) but visually de-emphasised and inert until reached. The
   inner controls stay in the DOM (still focusable by AT) while a translucent
   lock overlay intercepts the pointer — clicking it does not silently do
   nothing (that read as "broken" to users), it opens a tooltip explaining
   which step unlocks it and offers a one-click jump there. */
.is-guided-locked {
  opacity: 0.55;
  filter: grayscale(0.5);
  position: relative;
}

.is-guided-locked::after {
  content: '🔒';
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(15, 23, 42, 0.45);
  border-radius: inherit;
  cursor: pointer;
}

/* Floating explanation shown when a locked control is clicked. */
.ret-lock-tip {
  position: absolute;
  z-index: 60;
  max-width: 260px;
  background: #0f172a;
  border: 1px solid #38bdf8;
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ret-lock-tip[hidden] { display: none; }

.ret-lock-tip-msg {
  font-size: 12px;
  line-height: 1.4;
  color: #e2e8f0;
}

.ret-lock-tip-jump {
  align-self: flex-end;
  background: #38bdf8;
  color: #0f172a;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.ret-lock-tip-jump:hover { background: #7dd3fc; }

/* ══════════════════════════════════════════════════════════════════════
   FORM CONTROLS — select, snap-row, checkbox
   ══════════════════════════════════════════════════════════════════════ */

.ret-select {
  background: var(--ret-surface-card);
  color: #fff;
  border: 1px solid var(--ret-border);
  padding: 8px 10px;
  border-radius: 8px;
  width: 100%;
  font-size: 13px;
  font-family: inherit;
}

.ret-select:disabled { opacity: 0.6; cursor: not-allowed; }

.ret-select--sm {
  padding: 4px 6px;
  font-size: 11px;
  width: auto;
}

.ret-snap-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.ret-mini-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
}

.ret-posture-selects {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0 2px;
}

.ret-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #cbd5e1;
  cursor: pointer;
  padding: 3px 0;
}

.ret-checkbox input { accent-color: var(--accent); width: 15px; height: 15px; }

.ret-overlay-group { gap: 4px; }

.ret-device-model-select { margin-top: 6px; display: block; }

.ret-btn {
  border-radius: 8px;
  border: 1px solid var(--ret-border);
  background: var(--ret-surface-elevated);
  color: #e2e8f0;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ret-btn:hover { border-color: var(--accent); }
.ret-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ret-btn--reveal {
  background: rgba(180, 85, 43, 0.18);
  border-color: #b4552b;
  color: #fca5a5;
  align-self: flex-start;
}

.ret-btn--reveal:hover { background: #b4552b; color: #fff; }

.ret-btn--ghost { background: transparent; }
.ret-btn--primary { background: var(--accent); border-color: var(--accent-strong); color: #fff; }
.ret-btn--primary:hover { background: var(--accent-strong); }

.ret-empty {
  font-size: 12px;
  color: #64748b;
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════════
   CASE PRESENTATION PANEL
   ══════════════════════════════════════════════════════════════════════ */

.ret-case-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dashed var(--ret-border);
  border-bottom: 1px dashed var(--ret-border);
  padding-block: 10px;
}

.ret-case-history { display: flex; flex-direction: column; gap: 6px; }

.ret-case-name { font-size: 14px; font-weight: 700; color: #fff; margin: 0; }
.ret-case-meta { font-size: 11px; color: #7dd3fc; margin: 0; font-family: 'IBM Plex Mono', monospace; }

.ret-case-row { display: flex; flex-direction: column; gap: 2px; }
.ret-case-row-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #94a3b8; }
.ret-case-row-text { font-size: 12.5px; line-height: 1.55; color: #cbd5e1; margin: 0; }

.ret-case-reveal { display: flex; flex-direction: column; gap: 10px; }

.ret-case-gate {
  background: rgba(56, 189, 248, 0.08);
  border: 1px dashed rgba(56, 189, 248, 0.4);
  border-radius: 10px;
  padding: 12px;
}

.ret-case-gate h4 { font-size: 12.5px; color: #38bdf8; margin: 0 0 4px; }
.ret-case-gate p { font-size: 12px; color: #94a3b8; margin: 0; line-height: 1.5; }

.ret-case-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #38bdf8;
  margin: 4px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--ret-border);
}

.ret-case-rx {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  font-size: 12px;
  margin: 0;
}
.ret-case-rx dt { color: #94a3b8; font-weight: 600; }
.ret-case-rx dd { color: #fff; font-family: 'IBM Plex Mono', monospace; margin: 0; }

.ret-case-ddx { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ret-case-ddx li { font-size: 12px; color: #cbd5e1; padding-inline-start: 10px; border-inline-start: 2px solid var(--accent); }
.ret-case-ddx strong { display: block; color: #fff; font-size: 12.5px; }
.ret-case-ddx-sign { display: block; color: #94a3b8; font-size: 11.5px; margin-top: 1px; }

.ret-case-signs { margin: 4px 0 0; padding-inline-start: 18px; font-size: 12px; color: #cbd5e1; }

.ret-case-redflags {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid #ef4444;
  border-radius: 8px;
  padding: 10px 12px;
}
.ret-case-redflags h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: #fca5a5; margin: 0 0 4px; }
.ret-case-redflags ul { margin: 0; padding-inline-start: 16px; font-size: 12px; color: #fecaca; }

.ret-case-refs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ret-case-refs a { color: #7dd3fc; font-size: 11.5px; text-decoration: underline; text-underline-offset: 2px; }
.ret-case-refs a:hover { color: #38bdf8; }

.ret-case-note { font-size: 10.5px; color: #64748b; margin: 4px 0 0; font-style: italic; }

/* Topography — a schematic diagram; never mirrors in RTL (dir="ltr" set on
   the element itself in markup and by case-topography.js). */
.ret-topo { margin: 6px 0 0; }
.ret-topo figcaption { margin-bottom: 6px; padding-top: 0; border-top: none; }
.ret-topo-svg { width: 140px; height: 140px; display: block; margin-inline: auto; }

/* ══════════════════════════════════════════════════════════════════════
   HARDWARE PANEL ADDITIONS
   ══════════════════════════════════════════════════════════════════════ */

.ret-dial-visual {
  position: relative;
  width: 140px;
  height: 140px;
  margin-inline: auto;
}

.ret-dial-center-val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--ret-streak);
  text-shadow: 0 0 8px rgba(255, 224, 130, 0.5);
  pointer-events: none;
}

[data-collar-needle] { transform-origin: 70px 70px; transition: transform 0.05s linear; }

.ret-range-label {
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ret-slider--wide { width: 100%; }

.ret-sleeve-readout {
  font-size: 12px;
  font-weight: 600;
  color: #38bdf8;
}

.ret-axis-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ret-lens-glass-preview--axis {
  width: 48px;
  height: 48px;
  font-size: 11px;
}

.ret-lens-value {
  font-size: 12px;
  font-family: 'IBM Plex Mono', monospace;
}

/* ══════════════════════════════════════════════════════════════════════
   GUIDED COACH
   ══════════════════════════════════════════════════════════════════════ */

/* The coach sits above the workspace, so its height is height stolen from the
   eye. Two columns — the live step on the start side, the whole nine-step
   checklist on the end side — halve it without dropping a single word. */
.ret-coach {
  background: var(--ret-surface);
  border: 1px solid var(--ret-border);
  border-radius: 12px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  grid-template-areas:
    "head  listlabel"
    "bar   list"
    "card  list"
    "live  list"
    "nav   list";
  gap: 8px 20px;
  align-content: start;
}

.ret-coach-head {
  grid-area: head;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.ret-coach-collapse {
  background: transparent;
  border: 1px solid var(--ret-border);
  border-radius: 6px;
  color: #94a3b8;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 3px 8px;
  margin-inline-start: auto;
}

.ret-coach-collapse:hover { color: #fff; border-color: var(--accent); }

/* Collapsed: which step you are on, how far you have come, and how to move —
   everything needed to keep working. Only the prose you have already read
   folds away, so the eye and the trial rack get the screen back. */
.ret-coach.is-collapsed {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head nav"
    "bar  bar"
    "card card";
  align-items: center;
}

.ret-coach.is-collapsed .ret-coach-card {
  padding: 7px 11px;
  grid-template-columns: 1fr;
}

.ret-coach.is-collapsed .ret-coach-block,
.ret-coach.is-collapsed .ret-coach-live,
.ret-coach.is-collapsed .ret-coach-list,
.ret-coach.is-collapsed .ret-coach-list-label { display: none; }

.ret-coach.is-collapsed .ret-coach-counter { white-space: nowrap; }
.ret-coach-bar { grid-area: bar; }
.ret-coach-card { grid-area: card; }
.ret-coach-live { grid-area: live; }
.ret-coach-nav { grid-area: nav; }
.ret-coach-list-label { grid-area: listlabel; }
.ret-coach-list { grid-area: list; align-self: start; }

@media (max-width: 1024px) {
  .ret-coach {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "bar" "card" "live" "nav" "listlabel" "list";
  }
}

.ret-coach-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.ret-coach-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.ret-coach-counter {
  font-size: 12px;
  font-family: 'IBM Plex Mono', monospace;
  color: #38bdf8;
}

.ret-coach-bar {
  height: 6px;
  background: var(--ret-border);
  border-radius: 3px;
  overflow: hidden;
}

.ret-coach-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #38bdf8);
  transition: width 0.3s ease;
}

.ret-coach-card {
  background: var(--ret-surface-card);
  border: 1px solid var(--ret-border);
  border-radius: 10px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  align-items: start;
}

.ret-coach-step-title { grid-column: 1 / -1; }

@media (max-width: 700px) {
  .ret-coach-card { grid-template-columns: 1fr; }
}

.ret-coach-step-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ret-streak);
  margin: 0;
}

.ret-coach-block { display: flex; flex-direction: column; gap: 3px; }

.ret-coach-block-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #7dd3fc;
}

.ret-coach-block-text {
  font-size: 13px;
  line-height: 1.6;
  color: #cbd5e1;
  margin: 0;
}

.ret-coach-block--goal .ret-coach-block-label { color: #38bdf8; }

.ret-coach-live {
  font-size: 11.5px;
  color: #34d399;
  min-height: 14px;
  margin: 0;
}

.ret-coach-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ret-coach-restart[hidden] { display: none; }

.ret-coach-list-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
  margin: 4px 0 0;
}

.ret-coach-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 5px;
}

.ret-coach-item { display: flex; }

.ret-coach-item-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: start;
  background: var(--ret-surface-card);
  border: 1px solid var(--ret-border);
  border-radius: 8px;
  padding: 7px 10px;
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.ret-coach-item-btn::before { content: none; }

.ret-coach-tick {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ret-surface-elevated);
  border: 1px solid var(--ret-border);
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ret-coach-item.is-current .ret-coach-item-btn {
  border-color: var(--accent);
  color: #fff;
  background: rgba(14, 124, 134, 0.18);
}

.ret-coach-item.is-current .ret-coach-tick {
  border-color: var(--accent);
  color: #38bdf8;
}

.ret-coach-item.is-done .ret-coach-tick {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}

.ret-coach-item.is-done .ret-coach-item-btn { color: #cbd5e1; }

/* ══════════════════════════════════════════════════════════════════════
   TRIAL LENS RACK — mounted under the eye, inside the viewport card
   ──────────────────────────────────────────────────────────────────────
   Neutralising is a tight watch → change → watch loop. The rack is sized
   to the canvas so lens and reflex read as one instrument, and kept low
   enough that both fit on a laptop screen without scrolling.
   ══════════════════════════════════════════════════════════════════════ */

.ret-viewport-card .ret-lens-slot-box {
  width: 100%;
  max-width: 600px;
  margin-block-start: 12px;
  gap: 10px;
}

/* Each slot is a label row over a single [lens] [− value +] row, the way a
   trial frame is actually read. Stacked vertically the three slots cost
   156px of the screen the eye needs; like this they cost about 75px. */
.ret-viewport-card .ret-lens-slot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 8px;
  padding: 7px 9px 9px;
}

.ret-viewport-card .ret-lens-slot > .ret-field-head {
  grid-column: 1 / -1;
  justify-content: space-between;
}

.ret-viewport-card .ret-lens-glass-preview {
  width: 34px;
  height: 34px;
  border-width: 2px;
  font-size: 9.5px;
}

.ret-viewport-card .ret-axis-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ret-viewport-card .ret-lens-controls {
  gap: 4px;
  justify-content: flex-end;
}

/* An injected explanation is a grid item like any other — let it span the
   rack instead of squeezing into one lens column. */
.ret-lens-slot-box > .ret-explain-pop { grid-column: 1 / -1; }

/* Only the Rx form is left in the bottom bar, so it no longer needs to
   share the row with the rack. */
.ret-bottom-bar { grid-template-columns: 1fr; }

/* ══════════════════════════════════════════════════════════════════════
   VERTICAL BUDGET — everything above the eye is screen the eye does not get
   ──────────────────────────────────────────────────────────────────────
   On a 720px-tall laptop the brand, tab bar, mode bar and coach together
   took 514px, pushing the canvas and the trial rack below the fold and
   forcing a scroll on every single lens change. These trims buy that back
   without removing a control or a word of teaching text.
   ══════════════════════════════════════════════════════════════════════ */

.ret-app .brand { padding-block: 10px; }

.ret-mode-btn {
  padding-block: 7px;
  line-height: 1.25;
}

.ret-mode-hint { font-size: 10.5px; }

.ret-coach { padding: 11px 14px; gap: 6px 18px; }
.ret-coach-card { padding: 10px 12px; gap: 6px 16px; }
.ret-coach-block-text { font-size: 12.5px; line-height: 1.5; }
.ret-coach-list { gap: 4px; }
.ret-coach-item-btn { padding: 5px 8px; font-size: 11px; }
.ret-coach-live:empty { display: none; }

/* ── Assist panel density (integration-level) ─────────────────────────────
   assist-panel.css owns the component; these rules only tune it for the
   286px case column it actually lives in. Nothing is truncated — clinical
   guidance that stops mid-sentence teaches nothing — it is simply set
   tighter so two hints read as two cards rather than two pages. */
#assistPanelRoot .ret-assist-hint-body {
  font-size: 12px;
  line-height: 1.5;
}

#assistPanelRoot .ret-assist-hint { padding: 9px 10px; }
#assistPanelRoot .ret-assist-hint-title { font-size: 12.5px; line-height: 1.35; }

/* Wrong-side posture is a live warning, not a neutral note — examining across
   the midline puts your head in the patient's line of sight and drives
   accommodation, so the reading comes out too minus. */
.ret-hand-eye-hint.is-wrong {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.45);
}

/* ══════════════════════════════════════════════════════════════════════
   EXPLAIN TRIGGER PLACEMENT
   ──────────────────────────────────────────────────────────────────────
   A trigger that found its `.ret-explain-slot` sits inline in the label
   row. The handful of hosts with no slot would otherwise drop a 20px
   circle onto its own line at the foot of the card; park those in the
   card's corner instead, where they read as an affordance, not as litter.
   ══════════════════════════════════════════════════════════════════════ */

.ret-field { position: relative; }

.ret-field > .ret-explain-btn {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  z-index: 3;
}

/* The status badges at the top of the screen are inline, not cards — a
   corner-parked trigger would land on top of the reading. */
.ret-top-indicators .ret-field {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ret-top-indicators .ret-field > .ret-explain-btn { position: static; }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE SHELL — tablet & phone
   ══════════════════════════════════════════════════════════════════════ */

.ret-panel-tabs {
  display: none;
  gap: 6px;
  padding: 4px;
  background: var(--ret-surface);
  border: 1px solid var(--ret-border);
  border-radius: 10px;
}

.ret-panel-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 9px 8px;
  color: #94a3b8;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.ret-panel-tab.active {
  background: var(--accent);
  color: #fff;
}

html.ret-compact .ret-panel-tabs { display: flex; }

.is-panel-hidden { display: none !important; }

/* The teach row used to live at the foot of the document and was pulled up
   here on small screens. It now sits above the workspace in the markup
   itself, so the reorder would only push it back down. */

@media (max-width: 768px) {
  .ret-app { padding: 12px 12px 24px; gap: 12px; }
  .ret-mode-buttons { grid-template-columns: 1fr 1fr; display: grid; }
  .ret-top-indicators { width: 100%; justify-content: space-between; }
  .ret-rx-inputs { grid-template-columns: 1fr 1fr; }
  .ret-lens-slot-box { grid-template-columns: 1fr; }
  .ret-coach-list { grid-template-columns: 1fr; }
  .ret-posture-selects { gap: 8px; }
}

@media (max-width: 480px) {
  .ret-mode-buttons { grid-template-columns: 1fr; }
  .ret-rx-inputs { grid-template-columns: 1fr; }
  .ret-header-controls { flex-wrap: wrap; }
  .ret-viewport-card { min-height: 380px; padding: 10px; }
  .ret-canvas-wrap { max-width: 100%; }
  .ret-dial-visual { width: 110px; height: 110px; }
  .ret-top-indicators { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
  .ret-top-indicators .ret-field { width: 100%; }
  .ret-badge { display: block; }
}

/* ══════════════════════════════════════════════════════════════════════
   RTL — logical layout mirrors; optical/anatomical diagrams never do
   ══════════════════════════════════════════════════════════════════════ */

html[dir="rtl"] .ret-app,
html.ret-rtl .ret-app {
  font-family: 'Noto Kufi Arabic', 'Inter', system-ui, sans-serif;
}

/* Diagrams and the live canvas are pinned LTR via dir="ltr" in the markup
   itself; this rule is a second line of defence for anything that inherits
   direction rather than declaring it, and undoes text-align mirroring on
   numeric/mono readouts so numbers keep reading left-to-right. */
html[dir="rtl"] #canvasWrapper,
html[dir="rtl"] #opticalCrossSvg,
html[dir="rtl"] .ret-dial-visual,
html[dir="rtl"] .ret-topo-svg,
html[dir="rtl"] .ret-ray-diagram-target {
  direction: ltr;
}

html[dir="rtl"] .ret-badge,
html[dir="rtl"] .ret-lens-value,
html[dir="rtl"] .ret-field-note,
html[dir="rtl"] [data-retinoscope$="-readout"] {
  font-variant-numeric: tabular-nums;
  unicode-bidi: plaintext;
}

/* Panel order mirrors naturally via logical grid flow + flex direction
   already using inline-start/end above; the mode tablist and coach list
   read start-to-end automatically because arrow-key handling in
   mode-visibility.js and responsive-shell.js already swaps Left/Right
   for `dir="rtl"`. */