/* ============================================================
   tour-overlay.css — Quick Tour bar, menu, calc + finale
   ─────────────────────────────────────────────────────────────
   Used by js/retinoscopy/tour/tour-overlay.js.
   The spotlight itself is Learn Mode's (learn-annotations.css);
   this sheet only sits the tour chrome above it (z 9990–9992).
   ============================================================ */

/* ── Page reserves room for the bar so nothing is trapped under it ── */
html.tour-active body {
  padding-bottom: var(--tour-bar-h, 0px);
}

/* Phones/tablets: the bar already states the instruction, and Learn's tooltip
   (which does not know about the bar) would land underneath it next to the
   pinned dock. The spotlight ring alone marks the control. */
html.ret-compact.tour-active .learn-spotlight-tooltip { display: none; }

/* Steps that need two controls (sweep + lens): the dim stays, clicks pass. */
html.tour-pass-through .learn-spotlight-overlay.is-active {
  pointer-events: none;
}

/* ── Launcher in the mode bar (the site header is hidden when embedded) ── */
.ret-tour-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-end: auto;            /* sits next to the mode picker, badges stay right */
  min-height: 44px;
  padding: 8px 16px;
  background: var(--accent-tint, #E4EEEE);
  color: var(--accent-strong, #163938);
  border: 1px solid var(--accent, #1F4B4C);
  border-radius: 12px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.ret-tour-btn:hover,
.ret-tour-btn.is-touring {
  background: var(--accent, #1F4B4C);
  color: var(--on-accent, #fff);
}
.ret-tour-btn:focus-visible { outline: 2px solid var(--accent, #1F4B4C); outline-offset: 2px; }
/* Desktop: _mode.css stretches the mode field (flex:1), which pushed the launcher
   to the middle of the bar. Its dropdown is max-content, so sizing it to content is safe. */
html:not(.ret-compact) .ret-mode-bar > .ret-mode-field { flex: 0 1 auto; }

/* First visit: a soft halo until a tour has been taken or dismissed */
.ret-tour-btn.is-new { animation: tour-halo 2.2s ease-in-out infinite; }
@keyframes tour-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31, 75, 76, 0.35); }
  50%      { box-shadow: 0 0 0 7px rgba(31, 75, 76, 0); }
}

/* Phone / compact shell: the mode bar is one row — the launcher becomes an icon tile */
html.ret-compact .ret-tour-btn {
  flex: 0 0 auto;
  margin-inline-end: 0;
  min-height: 46px;
  min-width: 46px;
  padding: 8px 10px;
  justify-content: center;
}
html.ret-compact .ret-tour-btn__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Guided-tours card in the Patient & Case panel ── */
.ret-tour-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.ret-tour-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  text-align: start;
  font: inherit;
  color: var(--text, #212529);
  background: var(--surface, #fff);
  border: 1px solid var(--border, #dee2e6);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.ret-tour-item:hover { background: var(--accent-tint, #E4EEEE); border-color: var(--accent, #1F4B4C); }
.ret-tour-item:active { transform: scale(0.99); }
.ret-tour-item:focus-visible { outline: 2px solid var(--accent, #1F4B4C); outline-offset: 2px; }
.ret-tour-item__body { display: grid; gap: 1px; flex: 1; min-width: 0; }
.ret-tour-item__name { font-weight: 700; font-size: 0.88rem; }
.ret-tour-item__blurb { font-size: 0.76rem; color: var(--text-soft, #495057); }
.ret-tour-item__mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-strong, #163938);
  background: var(--surface-sunken, #f1f3f5);
}
.ret-tour-item.is-done .ret-tour-item__mark {
  background: var(--accent, #1F4B4C);
  color: var(--on-accent, #fff);
}
.ret-tour-item--intro { border-style: dashed; }

/* ══ Tour bar (fixed bottom) ═══════════════════════════════════
   Two compact rows so it costs the stage as little height as possible:
     main  [level] instruction ……………………………… [Skip ×]
     meta  ●━○○○  Tour · Step n of N   feedback | waiting  [Next →]
   ════════════════════════════════════════════════════════════════ */
.tour-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 9996;
  display: flex;
  justify-content: center;
  padding: 0 12px calc(10px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;                 /* only the card is interactive */
  transform: translateY(110%);
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.tour-bar[hidden] { display: none; }
.tour-bar.is-in { transform: translateY(0); }

.tour-bar__inner {
  position: relative;
  pointer-events: auto;
  width: min(820px, 100%);
  max-height: min(46vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface, #fff);
  color: var(--text, #212529);
  border: 1px solid var(--border, #dee2e6);
  border-top: 3px solid var(--accent, #1F4B4C);
  border-radius: 14px;
  box-shadow: 0 -4px 24px rgba(18, 32, 30, 0.16);
  padding: 10px 14px 8px;
  display: grid;
  gap: 6px;
}

.tour-bar__main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.tour-bar__icon { flex: 0 0 auto; margin-top: 1px; }
.tour-bar__text {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.4;
  font-weight: 600;
}
.tour-bar__skip {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: var(--text-soft, #495057);
  font: inherit;
  font-size: 0.8rem;
  padding: 4px 6px;
  margin: -2px -4px 0 0;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.tour-bar__skip:hover { background: var(--surface-sunken, #f1f3f5); color: var(--text, #212529); }

.tour-bar__meta {
  display: flex;
  align-items: center;
  gap: 6px 12px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--text-soft, #495057);
}
.tour-bar__title { font-weight: 700; color: var(--accent-strong, #163938); }
.tour-bar__count::before { content: '·'; margin-inline-end: 8px; }
.tour-bar__count:empty::before { content: none; }
.tour-bar__title:empty,
.tour-bar__count:empty { display: none; }

/* ── Feedback: inline in the meta row, replaces the "waiting" note ── */
.tour-bar__feedback {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.86rem;
  line-height: 1.4;
  border-inline-start: 3px solid transparent;
}
.tour-bar__feedback:empty { display: none; }
.tour-bar__feedback:not(:empty) ~ .tour-bar__await { display: none; }
.tour-bar__feedback[data-kind="success"] {
  background: var(--accent-tint, #E4EEEE);
  border-color: var(--accent, #1F4B4C);
  color: var(--accent-strong, #163938);
  font-weight: 600;
}
.tour-bar__feedback[data-kind="hint"] {
  background: var(--warn-tint, #fbe9db);
  border-color: var(--warn, #b4552b);
  color: var(--warn-strong, #93401d);
}
.tour-bar__feedback[data-kind="idle"],
.tour-bar__feedback[data-kind="note"] {
  background: var(--note-tint, #e2ecf7);
  border-color: var(--note, #3a6ea8);
  color: var(--note-strong, #2c5a82);
}
.tour-bar__feedback.is-pop { animation: tour-pop 0.32s ease-out; }
@keyframes tour-pop {
  0%   { transform: translateY(4px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

.tour-dots {
  display: flex;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tour-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border, #dee2e6);
  transition: background 0.25s ease, width 0.25s ease;
}
.tour-dot.is-done { background: var(--accent, #1F4B4C); }
.tour-dot.is-current {
  width: 20px;
  border-radius: 4px;
  background: var(--accent, #1F4B4C);
  opacity: 0.55;
}
.tour-dot.is-current.is-done { opacity: 1; }

.tour-bar__await {
  flex: 1;
  font-size: 0.8rem;
  color: var(--text-faint, #63706D);
  font-style: italic;
}
.tour-bar__actions {
  display: flex;
  gap: 8px;
  margin-inline-start: auto;
  flex-wrap: wrap;
}
.tour-bar__actions:empty { display: none; }
.tour-btn {
  border: 1px solid var(--border, #dee2e6);
  background: var(--surface, #fff);
  color: var(--text, #212529);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.tour-btn:hover { background: var(--surface-sunken, #f1f3f5); }
.tour-btn--primary {
  background: var(--accent, #1F4B4C);
  border-color: var(--accent, #1F4B4C);
  color: var(--on-accent, #fff);
}
.tour-btn--primary:hover { background: var(--accent-strong, #163938); }
.tour-btn:focus-visible,
.tour-bar__skip:focus-visible,
.tour-menu__item:focus-visible {
  outline: 2px solid var(--accent, #1F4B4C);
  outline-offset: 2px;
}

/* Auto-advance countdown along the bottom edge */
.tour-bar__countdown {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  overflow: hidden;
  border-radius: 0 0 14px 14px;
  opacity: 0;
}
.tour-bar__countdown.is-running { opacity: 1; }
.tour-bar__countdown span {
  display: block;
  height: 100%;
  background: var(--accent, #1F4B4C);
  transform-origin: left center;
  transform: scaleX(0);
}
.tour-bar[dir="rtl"] .tour-bar__countdown span { transform-origin: right center; }

/* ── Finale ── */
.tour-bar.is-finale .tour-bar__text { font-size: 1.05rem; }
.tour-bar.is-finale .tour-bar__inner { border-top-color: var(--mark-catch, #FEB536); }

/* ══ Gross → Net calculation ═══════════════════════════════════ */
.tour-calc {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--surface-sunken, #f1f3f5);
  border-radius: 10px;
  display: grid;
  gap: 6px;
}
.tour-calc[hidden] { display: none; }
.tour-calc__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.9rem;
}
.tour-calc__label { color: var(--text-soft, #495057); min-width: 11em; }
.tour-calc__val {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  unicode-bidi: isolate;
}
.tour-calc__val--wd { color: var(--warn, #b4552b); }
.tour-calc__eq {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tour-calc__op { color: var(--text-soft, #495057); font-weight: 400; }
.tour-calc__result {
  color: var(--accent-strong, #163938);
  padding: 0 8px;
  border-radius: 6px;
  background: var(--accent-tint, #E4EEEE);
}
.tour-calc__row--net { font-size: 1rem; }
.tour-calc__verdict { font-size: 0.85rem; font-weight: 600; }
.tour-calc__verdict.is-ok { color: var(--accent, #1F4B4C); }
.tour-calc__verdict.is-off { color: var(--warn-strong, #93401d); }
.tour-calc__note { margin: 0; font-size: 0.8rem; color: var(--text-soft, #495057); }

/* Rows appear one after another: gross, minus WD, the sum, the answer */
.tour-calc.is-revealing > * {
  opacity: 0;
  animation: tour-reveal 0.45s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 450ms + 150ms);
}
@keyframes tour-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ══ Tour menu (drops from the header button) ══════════════════ */
.tour-menu {
  position: fixed;
  z-index: 9997;
  width: min(340px, calc(100vw - 24px));
  max-height: min(70vh, 520px);
  overflow-y: auto;
  background: var(--surface, #fff);
  color: var(--text, #212529);
  border: 1px solid var(--border, #dee2e6);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  padding: 12px;
  animation: tour-pop 0.2s ease-out;
}
.tour-menu[hidden] { display: none; }
.tour-menu.is-centered {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: none;
}
.tour-menu__head { padding: 2px 4px 8px; }
.tour-menu__title { margin: 0; font-size: 1rem; }
.tour-menu__hint { margin: 4px 0 0; font-size: 0.8rem; color: var(--text-soft, #495057); line-height: 1.4; }
.tour-menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tour-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: start;
  border: 1px solid var(--border-soft, #e9ecef);
  background: var(--surface, #fff);
  color: inherit;
  font: inherit;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.tour-menu__item:hover { background: var(--accent-tint, #E4EEEE); border-color: var(--accent, #1F4B4C); }
.tour-menu__body { display: grid; gap: 1px; flex: 1; min-width: 0; }
.tour-menu__name { font-weight: 700; font-size: 0.92rem; }
.tour-menu__blurb { font-size: 0.8rem; color: var(--text-soft, #495057); }
.tour-menu__meta { font-size: 0.72rem; color: var(--text-faint, #adb5bd); }
.tour-menu__item.is-done .tour-menu__meta { color: var(--accent, #1F4B4C); }
.tour-menu__go { color: var(--accent, #1F4B4C); font-weight: 700; }


/* ══ Icons + level badges (the tour uses no emoji) ═════════════ */
.tour-level {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--accent-tint, #E4EEEE);
  color: var(--accent-strong, #163938);
}
.tour-level[data-level="1"] { background: #E5EDF5; color: #2F5275; }
.tour-level[data-level="2"] { background: #F5EEDF; color: #6E4C10; }
.tour-level[data-level="3"] { background: #ECE8F3; color: #54407A; }
.tour-level[data-level="4"] { background: #F5E7E4; color: #83342B; }

.tour-bar__icon { display: inline-flex; }
.tour-bar__icon .tour-level { width: 22px; height: 22px; font-size: 0.72rem; }

.tour-bar__skip { display: inline-flex; align-items: center; gap: 4px; }

.tour-bar__feedback:not(:empty) { display: flex; align-items: flex-start; gap: 8px; }
.tour-fb__ico { display: inline-flex; margin-top: 2px; }
.tour-fb__msg { flex: 1; min-width: 0; }

.tour-bar.is-finale .tour-bar__text { display: flex; align-items: center; gap: 10px; }
.tour-finale__ico { display: inline-flex; color: var(--accent, #1F4B4C); }

.tour-calc__label--net,
.tour-calc__verdict { display: inline-flex; align-items: center; gap: 6px; }
.tour-calc__label--net { color: var(--accent-strong, #163938); font-weight: 700; }

.tour-menu__title { display: flex; align-items: center; gap: 8px; color: var(--accent-strong, #163938); }
.tour-menu__icon { display: inline-flex; }
.tour-menu__go { display: inline-flex; }
[dir="rtl"] .tour-menu__go .ret-ico,
[dir="rtl"] .ret-tour-item__mark .ret-ico { transform: scaleX(-1); }

.ret-tour-btn__icon { display: inline-flex; }
.ret-tour-item__icon { display: inline-flex; }
.ret-tour-item__mark { color: var(--text-soft, #44514E); }

/* ── Phones: slimmer bar ── */
@media (max-width: 600px) {
  .tour-bar { padding: 0 6px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .tour-bar__inner { padding: 8px 10px 6px; max-height: 38vh; gap: 5px; border-radius: 12px; }
  .tour-bar__text { font-size: 0.9rem; line-height: 1.35; }
  .tour-bar__title { display: none; }           /* the level badge already names it */
  .tour-bar__skip > span { display: none; }      /* icon only; aria-label keeps the name */
  .tour-bar__feedback { flex-basis: 100%; font-size: 0.82rem; }
  .tour-bar__await { display: none; }          /* the dots already show where you are */
  .tour-calc__label { min-width: 0; }
  .tour-calc__eq { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tour-bar { transition: none; }
  .tour-bar__feedback.is-pop,
  .tour-menu { animation: none; }
  .tour-calc.is-revealing > * { animation: none; opacity: 1; }
  .tour-bar__countdown span { transition: none !important; }
  .ret-tour-btn.is-new { animation: none; }
}