/* ============================================================
   retinoscopy-theme.css — Calm clinical light theme (page layer)
   ─────────────────────────────────────────────────────────────
   Loaded LAST by retinoscopy.html only, so it re-tunes this page
   without touching the shared design tokens other pages use.

   Goals
   • Contrast: a cool off-white page behind pure-white cards with
     real 1px borders (cards used to be shadow-only on #f8f9fa and
     melted into the background); every text token ≥ 4.5:1 —
     the old --text-faint (#adb5bd) was 2.1:1 on white.
   • Calm colour: one muted semantic palette replaces the saturated
     amber / red / emerald used for reflex states, meters and hints.
       with motion  → ochre     against → brick
       neutral      → sage      info    → slate
     The brand teal (--accent) and the canvas optics are untouched.
   ============================================================ */

:root {
  /* ── Neutrals ── */
  --bg:              #EEF2F1;
  --surface:         #FFFFFF;
  --surface-sunken:  #F3F6F5;
  --border:          #D3DBD9;
  --border-soft:     #E2E8E6;
  --text:            #15201E;   /* 16.4:1 on white */
  --text-soft:       #44514E;   /*  8.6:1 */
  --text-faint:      #63706D;   /*  5.0:1 — labels, notes, captions */

  --ret-bg:               var(--bg);
  --ret-surface:          var(--surface);
  --ret-surface-card:     var(--surface-sunken);
  --ret-surface-elevated: #FFFFFF;
  --ret-border:           var(--border);

  --ret-shadow-sm: 0 1px 2px rgba(18, 32, 30, 0.05);
  --ret-shadow:    0 1px 2px rgba(18, 32, 30, 0.04), 0 6px 18px rgba(18, 32, 30, 0.05);

  /* ── Semantic palette (ink = text-safe on its tint) ── */
  --ret-ok:           #3F8A68;
  --ret-ok-ink:       #22603F;
  --ret-ok-tint:      #E8F3ED;
  --ret-with:         #B48A3C;
  --ret-with-ink:     #6E4C10;
  --ret-with-tint:    #F7F0E2;
  --ret-against:      #B35D52;
  --ret-against-ink:  #83342B;
  --ret-against-tint: #F7EAE7;
  --ret-info:         #56789C;
  --ret-info-ink:     #2F5275;
  --ret-info-tint:    #E7EEF5;

  /* Shared tour/hint tokens follow the same palette */
  --warn:        var(--ret-with);
  --warn-strong: var(--ret-with-ink);
  --warn-tint:   var(--ret-with-tint);
  --note:        var(--ret-info);
  --note-strong: var(--ret-info-ink);
  --note-tint:   var(--ret-info-tint);
}

/* Icons inherit colour and sit on the text baseline */
.ret-ico { display: inline-block; flex-shrink: 0; vertical-align: -0.2em; }

/* ══ Surfaces ═════════════════════════════════════════════════ */
.ret-app { background: var(--ret-bg); color: var(--text); }

.ret-card,
.ret-mode-bar,
.rsp-card,
.ret-lens-slot {
  background: var(--ret-surface);
  border: 1px solid var(--border-soft);
  box-shadow: var(--ret-shadow);
}
.rsp-card { box-shadow: none; border-color: var(--border-soft); }

.ret-card-title {
  color: var(--accent-strong);
  border-bottom: 1px solid var(--border-soft);
  letter-spacing: 0.06em;
}

.ret-field-label { color: var(--text); }
.ret-field-note  { color: var(--text-faint); }

.ret-select {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.ret-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Read-out pills in the mode bar */
.ret-badge {
  background: var(--surface-sunken);
  border-color: var(--border);
  color: var(--accent-strong);
}

/* ══ Controls ═════════════════════════════════════════════════ */
.ret-snap-btn {
  background: var(--surface-sunken);
  border: 1px solid var(--border-soft);
  color: var(--text-soft);
}
.ret-snap-btn:hover { border-color: var(--border); color: var(--text); }
.ret-snap-btn.active {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.ret-step-btn {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  box-shadow: var(--ret-shadow-sm);
}
.ret-step-btn:hover { border-color: var(--accent); color: var(--accent-strong); }

.ret-explain-btn {
  background: var(--surface);
  border-color: var(--border);
  color: var(--accent-strong);
}

.ret-mode-hamburger { color: var(--text); }
.ret-mode-icon { display: inline-flex; }
.ret-mode-icon--exam { color: var(--ret-against); }

/* Lens slots: a thin semantic top rule instead of a loud 3px stripe */
.ret-lens-slot.plus  { border-top: 2px solid var(--ret-ok); }
.ret-lens-slot.minus { border-top: 2px solid var(--ret-against); }
.ret-lens-slot.cyl   { border-top: 2px solid var(--accent); }

.ret-hero-btn { border-width: 1px; border-color: var(--border); }
.ret-hero-btn--primary { box-shadow: 0 4px 12px rgba(31, 75, 76, 0.18); }

/* ══ Reflex status panel ══════════════════════════════════════ */
.rsp-icon { display: inline-flex; color: var(--accent); }

.rsp-direction-box.rsp-box--neutral { background: var(--ret-ok-tint);      border-color: var(--ret-ok); }
.rsp-direction-box.rsp-box--with    { background: var(--ret-with-tint);    border-color: var(--ret-with); }
.rsp-direction-box.rsp-box--against { background: var(--ret-against-tint); border-color: var(--ret-against); }

.rsp-direction-dot               { background: var(--text-faint); }
.rsp-direction-dot.rsp-dot--idle { background: var(--border); box-shadow: none; }
.rsp-direction-dot.rsp-dot--neutral { background: var(--ret-ok);      box-shadow: 0 0 0 4px var(--ret-ok-tint); }
.rsp-direction-dot.rsp-dot--with    { background: var(--ret-with);    box-shadow: 0 0 0 4px var(--ret-with-tint); }
.rsp-direction-dot.rsp-dot--against { background: var(--ret-against); box-shadow: 0 0 0 4px var(--ret-against-tint); }

/* Meters: flat, muted, one hue each */
.rsp-fill-width      { background: #6F9A9B; }
.rsp-fill-brightness { background: var(--ret-info); }
.rsp-fill-speed      { background: #B98468; }

.rsp-progress-bar                 { background: var(--accent); }
.rsp-progress-bar.rsp-bar--good   { background: #7FA793; }
.rsp-progress-bar.rsp-bar--complete { background: var(--ret-ok); }

/* ══ Live assistance hints ════════════════════════════════════ */
.ret-assist-chip-glyph { display: inline-grid; place-items: center; }
.ret-assist-hint--tip { border-inline-start-color: var(--ret-ok); }
.ret-assist-hint--tip .ret-assist-chip { background: var(--ret-ok-tint); color: var(--ret-ok-ink); }
.ret-assist-hint--tip .ret-assist-chip-glyph { background: var(--ret-ok); color: #FFFFFF; }

.ret-assist-hint--warn { border-inline-start-color: var(--ret-with); }
.ret-assist-hint--warn .ret-assist-chip { background: var(--ret-with-tint); color: var(--ret-with-ink); }
.ret-assist-hint--warn .ret-assist-chip-glyph { background: var(--ret-with); color: #FFFFFF; }

.ret-assist-hint--danger { border-color: var(--ret-against); border-inline-start-color: var(--ret-against); }
.ret-assist-hint--danger .ret-assist-chip { background: var(--ret-against-tint); color: var(--ret-against-ink); }
.ret-assist-hint--danger .ret-assist-chip-glyph { background: var(--ret-against); color: #FFFFFF; }
.ret-assist-hint.is-armed { box-shadow: 0 0 0 1px var(--ret-against) inset; }

/* ══ Learn Mode chrome (icons replaced its emoji) ═════════════ */
.learn-module-card__icon,
.learn-welcome__icon,
.learn-welcome__btn-icon,
.learn-checkpoint__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.learn-module-card__check { display: inline-flex; color: var(--ret-ok); }
.learn-panel__step-title { display: flex; align-items: center; gap: 8px; }
.learn-panel__step-title .ret-ico { color: var(--accent); }
.learn-panel__close { display: inline-flex; align-items: center; justify-content: center; }
.tf-rack-emoji { display: inline-flex; color: var(--accent); }
.tf-rack-close { display: inline-flex; align-items: center; justify-content: center; }
.ret-coach-tick { display: inline-grid; place-items: center; }