/* ============================================================
   boot-skeleton.css — Exam simulator boot gate & loading skeleton
   ─────────────────────────────────────────
   PURPOSE : On a real network the exam view's HTML paints seconds
             before its ~370 ES modules have run. Until then:
             · the real contents stay laid out but invisible
             · a skeleton that mirrors the finished view shows instead
               (html-templates/exam/boot-skeleton-*.html)
   LIFECYCLE:
             html.exam-booting   set pre-paint (components/head.html)
             html.exam-revealing short crossfade, skeleton → real view
                                 (js/eye-simulator/exam-ready.js)
             #examBootFail       shown by the head boot guard when the
                                 simulator cannot recover
   ============================================================ */

/* ── Gate: real contents hidden but keeping their layout ─────── */
html.exam-booting #tabContentExam .condition-picker > :not(.boot-skel),
html.exam-booting #tabContentExam .exam-card > :not(.boot-skel):not(.boot-fail),
html.exam-booting #tabContentExam .stage > :not(.exam-card) {
  opacity: 0;
  pointer-events: none;
}

html.exam-booting #tabContentExam .exam-card {
  min-height: min(700px, calc(100dvh - var(--shell-header-h, 110px) - 40px));
  overflow: hidden;
}

@media (min-width: 901px) {
  html.exam-booting #tabContentExam .condition-picker {
    min-height: min(640px, calc(100dvh - var(--shell-header-h, 110px) - 40px));
    overflow: hidden;
  }
}

@media (max-width: 900px) {
  html.exam-booting #tabContentExam .condition-picker {
    position: relative;
    min-height: 320px;
    overflow: hidden;
  }
}

/* ── Skeleton containers ─────────────────────────────────────── */
.boot-skel {
  display: none;
}

html.exam-booting .boot-skel,
html.exam-revealing .boot-skel {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.boot-skel--picker {
  inset: 19px 18px 18px;
  gap: 14px;
}

/* Stage offsets are measured from the finished view (1280×700 desktop,
   390px phone) so each placeholder sits where its real element appears. */
.boot-skel--stage {
  inset: 17px 21px 22px;
}

.boot-skel__toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
}

.boot-skel__spacer { flex: 1; }

.boot-skel__eyes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

.boot-skel__eye {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.boot-skel__dock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  align-self: center;
  margin-top: 56px;
  padding: 17px 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-sunken) 45%, transparent);
}

.boot-skel__rows {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

/* ── Skeleton shapes ─────────────────────────────────────────── */
.sk {
  --sk-base: var(--surface-sunken);
  --sk-glow: color-mix(in srgb, var(--surface-sunken) 35%, var(--surface));
  display: block;
  flex-shrink: 0;
  width: var(--w, 100%);
  max-width: 100%;
  height: 14px;
  border-radius: 7px;
  background: var(--sk-base);
}

.sk--line  { height: 16px; }
.sk--sm    { height: 11px; }
.sk--title { height: 20px; border-radius: 8px; }
.sk--pill  { height: 34px; border-radius: 999px; }
.sk--pill.sk--sm { height: 22px; }
.sk--field { height: 40px; border-radius: 10px; }
.sk--card  { height: 54px; border-radius: 12px; }

.sk--row {
  position: relative;
  height: 44px;
  width: 100%;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid var(--border);
}

.sk--row:last-child { border-bottom: 0; }

.sk--row::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 16px;
  width: calc(var(--w, 60%) - 40px);
  height: 12px;
  border-radius: 6px;
  background: var(--surface-sunken);
}

.sk--current  { width: 190px; }
.sk--action-a { width: 112px; }
.sk--action-b { width: 108px; }
.sk--action-c { width: 96px; }

.sk--label   { width: 96px;  height: 18px; }
.sk--brow    { width: 62%;   height: 12px; margin-top: 30px; border-radius: 999px; }
.sk--readout { width: 107px; height: 22px; margin-top: 117px; border-radius: 999px; }
.sk--action  { width: 118px; height: 32px; margin-top: 35px; border-radius: 999px; }

.sk--eye {
  position: relative;
  width: min(80%, 330px);
  height: 122px;
  margin-top: 45px;
  border-radius: 50%;
}

.sk-iris {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 94%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: color-mix(in srgb, var(--surface-sunken) 70%, var(--text) 8%);
}

.sk--tool {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

/* Shimmer: one sweep shared by every shape (background-attachment: fixed
   keeps them in phase, so the page reads as one surface loading). */
@media (prefers-reduced-motion: no-preference) {
  html.exam-booting .sk,
  html.exam-booting .sk--row::before {
    background-image: linear-gradient(100deg,
      transparent 20%, var(--sk-glow) 50%, transparent 80%);
    background-color: var(--sk-base);
    background-size: 200vw 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    animation: sk-shimmer 1.6s ease-in-out infinite;
  }

  html.exam-booting .sk--row {
    background: none;
    animation: none;
  }

  html.exam-booting .sk--row::before {
    background-color: var(--surface-sunken);
  }
}

@keyframes sk-shimmer {
  from { background-position: -200vw 0; }
  to   { background-position: 200vw 0; }
}

/* ── Reveal: skeleton fades out as the real view fades in ────── */
@media (prefers-reduced-motion: no-preference) {
  html.exam-revealing .boot-skel {
    animation: boot-fade-out 0.28s ease-out both;
  }

  html.exam-revealing #tabContentExam .condition-picker > :not(.boot-skel),
  html.exam-revealing #tabContentExam .exam-card > :not(.boot-skel):not(.boot-fail),
  html.exam-revealing #tabContentExam .stage > :not(.exam-card) {
    animation: boot-fade-in 0.28s ease-out both;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.exam-revealing .boot-skel { display: none; }
}

@keyframes boot-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes boot-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* ── Failure panel (loading could not recover) ───────────────── */
.boot-fail[hidden] {
  display: none;
}

.boot-fail {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: min(240px, 38%);
  transform: translate(-50%, -50%);
  width: min(380px, calc(100% - 32px));
  padding: 22px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 32px -18px hsl(var(--shadow-color) / 0.45);
}

.boot-fail__title {
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--text);
}

.boot-fail__text {
  margin: 0 0 16px;
  font-size: 0.88rem;
  color: var(--text-soft);
}

.boot-fail__btn {
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  cursor: pointer;
}

.boot-fail__btn:hover { background: var(--accent-strong); }
.boot-fail__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ── Small screens ───────────────────────────────────────────── */
@media (max-width: 640px) {
  html.exam-booting #tabContentExam .exam-card { min-height: 580px; }

  .boot-skel--stage  { inset: 12px 10px 14px; }
  .boot-skel--picker { inset: 14px; }

  .boot-skel__toolbar { flex-wrap: wrap; height: 74px; row-gap: 6px; column-gap: 8px; align-content: flex-start; }
  .boot-skel__spacer  { flex-basis: 100%; height: 0; }
  .sk--current  { width: 62%; }
  .sk--action-a { width: 30%; }
  .sk--action-b { width: 27%; }
  .sk--action-c { width: 25%; }

  .boot-skel__eyes { gap: 10px; margin-top: 35px; }
  .sk--label   { width: 64px; height: 14px; }
  .sk--brow    { width: 60%; height: 8px; margin-top: 22px; }
  .sk--eye     { width: 88%; height: 56px; margin-top: 20px; }
  .sk--readout { width: 95px; height: 19px; margin-top: 45px; }
  .sk--action  { width: 100px; height: 32px; margin-top: 28px; }

  .boot-skel__dock { gap: 8px; padding: 14px 12px; margin-top: 28px; }
  .sk--tool { width: 34px; height: 34px; }
}