/* ============================================================
   retinoscopy-boot.css — boot gate & loading skeleton
   ─────────────────────────────────────────
   PURPOSE : The page's HTML paints seconds before its ~70 ES modules
             have run (longer on a phone network). Until they have:
               · the real UI stays laid out but invisible — it would
                 otherwise show English defaults, a black canvas,
                 "—" and "0%", and then jump as scripts run
               · a skeleton that mirrors the finished layout shows
                 instead: same rows, same heights, same columns.
   LIFECYCLE (same shape as css/shell/boot-skeleton.css):
             html.ret-booting     set pre-paint by the inline script in
                                  retinoscopy.html
             html.ret-boot-slow   added after a few seconds
             html.ret-revealing   ~300ms crossfade, skeleton → real UI
                                  (js/retinoscopy/app/boot-gate.js)
             #retBootFail         shown by that inline script when the
                                  page cannot recover
   GEOMETRY: measured from the finished phone layout (390px: mode bar 59,
             pinned stage ≈352, lens dials 121, dock 137, tabs 56) and the
             three-column desktop layout (320 | 1fr | 340).
   The skeleton is self-contained — it reads only the design tokens, with
   fallbacks, so it paints before the heavy stylesheets arrive.
   ============================================================ */

/* ── Gate: the real UI keeps its layout but is not visible ─────────── */
html.ret-booting,
html.ret-booting body { overflow: hidden; }

html.ret-booting .app { visibility: hidden; }

/* ── The skeleton overlay ──────────────────────────────────────────── */
.ret-boot { display: none; }

.ret-optics-failure {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-content: center;
  gap: 1rem;
  padding: 2rem;
  background: var(--bg, #F3F4EF);
  color: var(--text, #1c2421);
  text-align: center;
}
.ret-optics-failure button { justify-self: center; padding: .7rem 1.2rem; cursor: pointer; }
html[lang="en"] .ret-optics-failure [lang="ar"],
html[lang="ar"] .ret-optics-failure [lang="en"] { display: none; }

html.ret-booting .ret-boot,
html.ret-revealing .ret-boot {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 9000;
  overflow: hidden;
  background: var(--bg, #F3F4EF);
  color: var(--text, #1c2421);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Eases in so a fast load doesn't flash a skeleton for one frame. */
  animation: rb-appear 0.18s ease-out 0.05s both;
}

.rb-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Bilingual copy: the pre-paint script already set <html lang>. */
.ret-boot [lang="ar"] { display: none; }
html[lang="ar"] .ret-boot [lang="en"] { display: none; }
html[lang="ar"] .ret-boot [lang="ar"] { display: inline; }

/* ── Skeleton shapes ──────────────────────────────────────────────── */
.ret-boot .sk {
  --sk-base: var(--surface-sunken, #ECEDE6);
  --sk-glow: color-mix(in srgb, var(--surface-sunken, #ECEDE6) 30%, var(--surface, #fff));
  position: relative;
  display: block;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--sk-base);
  border-radius: 8px;
}

/* One soft sweep across every shape. It is a transform on a pseudo-element,
   so it runs on the compositor — no repaint per frame. */
.ret-boot .sk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 15%, var(--sk-glow) 50%, transparent 85%);
  transform: translateX(-100%);
  animation: rb-shimmer 1.5s ease-in-out infinite;
}
html[dir="rtl"] .ret-boot .sk::after {
  transform: translateX(100%);
  animation-name: rb-shimmer-rtl;
}

.ret-boot .sk--line { height: 12px; }
.ret-boot .sk--title { height: 16px; border-radius: 6px; }

/* ── Layout frame (phone first) ───────────────────────────────────── */
.rb-header { display: none; }

.rb-app {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  height: 100%;
  padding: 6px 10px 14px;
  overflow: hidden;
}
.rb-app *, .rb-app *::before, .rb-app *::after { box-sizing: border-box; }

.rb-modebar {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  height: 59px;
  padding: 6px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #DBDED4);
  border-radius: 14px;
}
.rb-mode { flex: 1; height: 46px; border-radius: 10px; }
.rb-wd { width: 132px; height: 46px; border-radius: 10px; }

.rb-workspace { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.rb-side { display: none; }
.rb-center { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.rb-posture {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  height: 59px;
}
.rb-field { display: flex; flex-direction: column; gap: 5px; }
.rb-field .sk--line { width: 58%; height: 10px; margin-top: 2px; }
.rb-field .rb-select { height: 44px; border-radius: 10px; }

/* Stage: the pinned eye + verdict on a phone. */
.rb-stage {
  margin-inline: -10px;
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--border, #DBDED4);
  background: var(--bg, #F3F4EF);
}

.rb-eye {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 2px solid var(--surface, #fff);
  border-radius: 14px;
  background: #0f172a;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}
/* The patient's eye, abstracted: scale ring, iris, pupil — then the streak. */
.rb-ring, .rb-iris, .rb-pupil {
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.rb-ring  { height: 88%; aspect-ratio: 1; border: 2px solid rgba(255, 255, 255, 0.08); }
.rb-iris  { height: 66%; aspect-ratio: 1; background: radial-gradient(circle, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.04) 62%, rgba(255, 255, 255, 0.10) 100%); }
.rb-pupil {
  height: 26%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 120, 60, 0.55) 0%, rgba(255, 90, 40, 0.20) 70%, transparent 100%);
  animation: rb-pulse 1.8s ease-in-out infinite;
}
/* A retinoscope streak, sweeping the way the student's finger will. */
.rb-streak {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 16%;
  margin-left: -8%;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 178, 0.30), transparent);
  animation: rb-sweep 2.2s ease-in-out infinite alternate;
}
.rb-caption {
  position: absolute;
  left: 50%; bottom: 10px;
  transform: translateX(-50%);
  max-width: calc(100% - 20px);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.82);
  font-size: 11.5px;
  line-height: 1.4;
  white-space: nowrap;
}
.rb-cap-slow { display: none; }
html.ret-boot-slow .rb-cap-default { display: none; }
html.ret-boot-slow .rb-cap-slow { display: inline; }

.rb-verdict {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  height: 53px;
  margin-top: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border, #DBDED4);
  border-radius: 12px;
  background: var(--surface, #fff);
}
.rb-dot { width: 12px; height: 12px; border-radius: 50%; }
.rb-lines { display: flex; flex-direction: column; gap: 6px; }
.rb-lines .sk:first-child { width: 46%; height: 12px; }
.rb-lines .sk:last-child { width: 82%; height: 10px; }
.rb-pct { width: 30px; height: 12px; }

.rb-lens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.rb-slot {
  display: grid;
  grid-template-rows: 14px 22px 48px;
  gap: 6px;
  height: 121px;
  padding: 10px 8px;
  background: var(--surface, #fff);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.rb-slot .rb-l1 { width: 64%; height: 10px; }
.rb-slot .rb-l2 { width: 58%; height: 18px; justify-self: center; }
.rb-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rb-btns .sk { height: 48px; border-radius: 12px; }

.rb-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rb-tools .sk { height: 46px; border-radius: 12px; }

.rb-dock {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 137px;
  padding: 10px;
  background: var(--surface, #fff);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.rb-dock .rb-cap { width: 44%; height: 12px; margin-bottom: 2px; }
.rb-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.rb-chips .sk { height: 44px; border-radius: 12px; }
.rb-dock-tools { display: grid; grid-template-columns: 1fr 1fr 1.7fr; gap: 6px; }
.rb-dock-tools .sk { height: 44px; border-radius: 12px; }

.rb-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  height: 56px;
  padding: 4px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #DBDED4);
  border-radius: 13px;
}
.rb-tabs .sk { height: 100%; border-radius: 9px; }

.rb-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
  padding: 16px;
  background: var(--surface, #fff);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.rb-panel .sk--title { width: 42%; }
.rb-panel .rb-select { height: 44px; border-radius: 10px; }
.rb-panel .sk--line:nth-of-type(odd) { width: 92%; }
.rb-panel .sk--line:nth-of-type(even) { width: 68%; }

/* ── Tablet portrait: the same column, centred ────────────────────── */
@media (min-width: 641px) {
  .rb-app { max-width: 760px; margin-inline: auto; padding-inline: 16px; }
  .rb-stage { margin-inline: 0; padding-inline: 0; border-bottom: 0; background: transparent; }
}

/* ── Desktop: three columns ───────────────────────────────────────── */
html:not(.ret-compact) .rb-app {
  max-width: none;
  margin: 0;
  padding: 12px 20px 14px;
}
html:not(.ret-compact) .rb-modebar { height: 52px; }
html:not(.ret-compact) .rb-mode { height: 38px; max-width: 240px; }
html:not(.ret-compact) .rb-wd { height: 38px; }

html:not(.ret-compact) .rb-workspace {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 340px;
  align-items: stretch;
  gap: 16px;
  flex: 1;
}
@media (max-width: 1280px) {
  html:not(.ret-compact) .rb-workspace { grid-template-columns: 280px minmax(0, 1fr) 300px; }
}

html:not(.ret-compact) .rb-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: var(--surface, #fff);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
html:not(.ret-compact) .rb-side .sk--title { width: 46%; margin-bottom: 4px; }
html:not(.ret-compact) .rb-side .rb-select { height: 38px; border-radius: 8px; }
html:not(.ret-compact) .rb-side .rb-disc { width: 150px; height: 150px; margin: 6px auto 0; border-radius: 50%; }
html:not(.ret-compact) .rb-side .rb-bar { height: 8px; border-radius: 4px; }

html:not(.ret-compact) .rb-center {
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--surface, #fff);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.04);
}
html:not(.ret-compact) .rb-center > * { width: 100%; max-width: 600px; }
html:not(.ret-compact) .rb-stage { padding: 0; margin: 0; }
html:not(.ret-compact) .rb-verdict,
html:not(.ret-compact) .rb-dock,
html:not(.ret-compact) .rb-tabs,
html:not(.ret-compact) .rb-panel { display: none; }
html:not(.ret-compact) .rb-slot { height: 132px; grid-template-rows: 14px 44px 44px; }
html:not(.ret-compact) .rb-posture { height: 44px; }
html:not(.ret-compact) .rb-posture .rb-field .sk--line { display: none; }
html:not(.ret-compact) .rb-posture .rb-select { height: 32px; }

/* Standalone visit: the site header exists too. */
html:not(.app-embedded) .rb-header {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 72px;
  padding: 0 16px;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--border, #DBDED4);
}
.rb-header .rb-brand { width: 132px; height: 28px; border-radius: 14px; }
.rb-header .rb-spacer { flex: 1; }
.rb-header .rb-navpill { width: 64px; height: 30px; border-radius: 999px; }
@media (max-width: 640px) {
  .rb-header .rb-navpill { display: none; }
}
html:not(.app-embedded) .rb-app { height: calc(100% - 72px); }

/* ── Failure panel (the page could not recover) ───────────────────── */
.rb-fail[hidden] { display: none; }
.rb-fail {
  position: absolute;
  z-index: 3;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  width: min(360px, calc(100% - 32px));
  padding: 22px 24px;
  text-align: center;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #DBDED4);
  border-radius: 16px;
  box-shadow: 0 12px 32px -18px rgba(15, 25, 40, 0.45);
}
.rb-fail__title { margin: 0 0 6px; font-weight: 700; color: var(--text, #1c2421); }
.rb-fail__text { margin: 0 0 16px; font-size: 0.88rem; line-height: 1.5; color: var(--text-soft, #535C57); }
.rb-fail__btn {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  color: var(--on-accent, #fff);
  background: var(--accent, #1F4B4C);
  cursor: pointer;
  touch-action: manipulation;
}
.rb-fail__btn:disabled { opacity: 0.6; cursor: progress; }
.rb-fail__btn:focus-visible { outline: 2px solid var(--accent, #1F4B4C); outline-offset: 2px; }
.rb-fail:not([hidden]) ~ .rb-app .sk::after { animation-play-state: paused; }

/* ── Reveal: skeleton fades out as the real UI fades in ───────────── */
html.ret-revealing .ret-boot {
  pointer-events: none;
  animation: rb-out 0.3s ease-out both;
}
html.ret-revealing .app { animation: rb-in 0.3s ease-out both; }

@keyframes rb-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes rb-out    { from { opacity: 1; } to { opacity: 0; } }
@keyframes rb-in     { from { opacity: 0; } to { opacity: 1; } }
@keyframes rb-shimmer     { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes rb-shimmer-rtl { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
@keyframes rb-sweep { from { transform: translateX(-320%); } to { transform: translateX(320%); } }
@keyframes rb-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ── Reduced motion: a calm, static skeleton ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.ret-booting .ret-boot,
  html.ret-revealing .ret-boot { animation: none; }
  .ret-boot .sk::after,
  .rb-pupil,
  .rb-streak { animation: none; }
  .ret-boot .sk::after { display: none; }
  .rb-streak { transform: none; }
  html.ret-revealing .ret-boot { display: none; }
  html.ret-revealing .app { animation: none; }
}