/* ============================================================================
   KIMO ONBOARDING / GUIDED TOUR  (/shared/onboarding.css)
   ----------------------------------------------------------------------------
   Presentation-only styling for the shared tour engine in /shared/onboarding.js.
   Token-driven: reads design values from /shared/tokens.css (link tokens FIRST).
   Works in light + dark, responsive, and respects prefers-reduced-motion.
   Everything is namespaced under .kimo-tour* so it can never clash with an app.
============================================================================ */

/* ---- z-index layering (above app chrome, including overlays/toasts) ---- */
.kimo-tour-scrim,
.kimo-tour-spot,
.kimo-tour-pop,
.kimo-tour-modal-wrap{ z-index: 9000; }
.kimo-tour-pop,
.kimo-tour-modal-wrap{ z-index: 9002; }

/* ---- dimming scrim (covers everything; spotlight punches through) ---- */
.kimo-tour-scrim{
  position:fixed; inset:0;
  background:color-mix(in srgb, var(--tx-0) 55%, transparent);
  opacity:0; transition:opacity var(--dur, .16s) ease;
  pointer-events:auto;
}
.kimo-tour-scrim.show{ opacity:1; }

/* ---- spotlight ring around the highlighted element ---- */
.kimo-tour-spot{
  position:fixed; pointer-events:none;
  border-radius:var(--r-md, 7px);
  /* the big spread shadow is what actually dims the rest of the page */
  box-shadow:0 0 0 4px var(--accent),
             0 0 0 9999px color-mix(in srgb, var(--tx-0) 55%, transparent);
  transition:top var(--dur, .16s) ease, left var(--dur, .16s) ease,
             width var(--dur, .16s) ease, height var(--dur, .16s) ease;
}

/* ---- shared surface look for modal + tooltip ---- */
.kimo-tour-pop,
.kimo-tour-modal{
  background:var(--bg-1);
  color:var(--tx-0);
  border:1px solid var(--bd);
  border-radius:var(--r-lg, 10px);
  box-shadow:var(--shadow-pop);
  font-family:var(--font);
  font-size:var(--t-base);
  line-height:1.5;
}

/* ============================ WELCOME / DONE MODAL ============================ */
.kimo-tour-modal-wrap{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:var(--s5, 1.25rem);
}
.kimo-tour-modal{
  width:100%; max-width:420px;
  padding:var(--s6, 1.75rem) var(--s5, 1.4rem) var(--s5, 1.4rem);
  text-align:left;
  animation:kimo-tour-pop-in var(--dur, .16s) ease;
}
.kimo-tour-modal .kimo-tour-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--t-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-text);
  background:var(--accent-weak); border:1px solid var(--accent-line);
  padding:3px 9px; border-radius:999px; margin-bottom:var(--s3, .7rem);
}
.kimo-tour-modal h2{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.02em;
  font-size:var(--t-xl); line-height:1.1; margin-bottom:var(--s2, .5rem); color:var(--tx-0);
}
.kimo-tour-modal p{ color:var(--tx-1); font-size:var(--t-md); line-height:1.55; }

/* ============================ STEP TOOLTIP (POPOVER) ============================ */
.kimo-tour-pop{
  position:fixed;
  width:min(330px, calc(100vw - 24px));
  padding:var(--s4, 1rem);
  animation:kimo-tour-pop-in var(--dur, .16s) ease;
}
.kimo-tour-pop .kimo-tour-arrow{
  position:absolute; width:12px; height:12px;
  background:var(--bg-1);
  border-left:1px solid var(--bd); border-top:1px solid var(--bd);
  transform:rotate(45deg);
}
.kimo-tour-pop[data-place="top"]    .kimo-tour-arrow{ bottom:-7px; transform:rotate(225deg); }
.kimo-tour-pop[data-place="bottom"] .kimo-tour-arrow{ top:-7px;    transform:rotate(45deg);  }
.kimo-tour-pop[data-place="left"]   .kimo-tour-arrow{ right:-7px;  transform:rotate(135deg); }
.kimo-tour-pop[data-place="right"]  .kimo-tour-arrow{ left:-7px;   transform:rotate(315deg); }
/* centered (no target) popover hides the arrow */
.kimo-tour-pop[data-place="center"] .kimo-tour-arrow{ display:none; }

.kimo-tour-pop h3{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.01em;
  font-size:var(--t-lg); line-height:1.2; margin:0 0 var(--s2, .4rem); color:var(--tx-0);
}
.kimo-tour-pop .kimo-tour-body{ color:var(--tx-1); font-size:var(--t-base); line-height:1.55; }

/* ---- footer: progress + controls ---- */
.kimo-tour-foot{
  display:flex; align-items:center; gap:var(--s3, .7rem);
  margin-top:var(--s4, 1rem); flex-wrap:wrap;
}
.kimo-tour-progress{
  font-size:var(--t-xs); font-weight:700; letter-spacing:.04em;
  color:var(--tx-2); font-variant-numeric:tabular-nums;
}
.kimo-tour-dots{ display:flex; gap:4px; align-items:center; }
.kimo-tour-dots i{
  width:6px; height:6px; border-radius:50%; background:var(--bd-strong);
  transition:background var(--dur, .16s) ease, transform var(--dur, .16s) ease;
}
.kimo-tour-dots i.on{ background:var(--accent); transform:scale(1.25); }
.kimo-tour-btns{ margin-left:auto; display:flex; gap:var(--s2, .5rem); align-items:center; }

/* ---- buttons (self-contained; do not rely on app .btn classes) ---- */
.kimo-tour-btn{
  font-family:inherit; font-size:var(--t-sm); font-weight:600;
  padding:7px 13px; min-height:34px; border-radius:var(--r-md, 7px);
  cursor:pointer; display:inline-flex; align-items:center; gap:5px;
  border:1px solid transparent; white-space:nowrap;
  transition:background var(--dur, .16s) ease, border-color var(--dur, .16s) ease,
             color var(--dur, .16s) ease;
}
.kimo-tour-btn.primary{ background:var(--accent); color:#fff; }
.kimo-tour-btn.primary:hover{ background:var(--accent-strong); }
.kimo-tour-btn.ghost{ background:var(--bg-1); border-color:var(--bd); color:var(--tx-1); }
.kimo-tour-btn.ghost:hover{ background:var(--bg-2); border-color:var(--bd-strong); color:var(--tx-0); }
.kimo-tour-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---- skip / "don't show again" row ---- */
.kimo-tour-meta{
  display:flex; align-items:center; gap:var(--s3, .7rem);
  margin-top:var(--s3, .7rem); padding-top:var(--s3, .7rem);
  border-top:1px solid var(--bd); flex-wrap:wrap;
}
.kimo-tour-skip{
  background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:var(--t-xs); font-weight:600; color:var(--tx-2);
  padding:4px 2px; text-decoration:underline; text-underline-offset:2px;
}
.kimo-tour-skip:hover{ color:var(--tx-1); }
.kimo-tour-skip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm, 4px); }
.kimo-tour-dsa{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-size:var(--t-xs); color:var(--tx-2); margin-left:auto; user-select:none;
}
.kimo-tour-dsa input{ accent-color:var(--accent); width:14px; height:14px; cursor:pointer; }

/* ============================ "?" HELP LAUNCHER ============================ */
.kimo-tour-help{
  position:fixed; right:16px; bottom:16px; z-index:8000;
  width:36px; height:36px; border-radius:50%;
  background:var(--bg-1); color:var(--tx-1);
  border:1px solid var(--bd); box-shadow:var(--shadow);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:18px; line-height:1;
  opacity:.7;
  transition:opacity var(--dur, .16s) ease, color var(--dur, .16s) ease,
             border-color var(--dur, .16s) ease, background var(--dur, .16s) ease;
}
.kimo-tour-help:hover{
  opacity:1; color:var(--accent-text);
  border-color:var(--accent-line); background:var(--accent-weak);
}
.kimo-tour-help:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; opacity:1; }
.kimo-tour-help svg{ width:17px; height:17px; }
/* keep clear of mobile bottom nav (family bottom-tab bar ~64px) */
@media (max-width:860px){
  .kimo-tour-help{ bottom:calc(72px + env(safe-area-inset-bottom)); }
}
/* finance has a Feedback pill in the bottom-right on desktop — sit above it */
@media (min-width:861px){
  [data-app="finances"] .kimo-tour-help{ bottom:64px; }
}

/* ============================ MOBILE / RESPONSIVE ============================ */
@media (max-width:560px){
  .kimo-tour-pop{
    position:fixed; left:8px !important; right:8px !important; width:auto;
    bottom:8px !important; top:auto !important;
  }
  .kimo-tour-pop .kimo-tour-arrow{ display:none; }
  .kimo-tour-foot{ row-gap:var(--s2, .5rem); }
  .kimo-tour-btns{ margin-left:0; width:100%; justify-content:flex-end; }
}

/* ============================ MOTION ============================ */
@keyframes kimo-tour-pop-in{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .kimo-tour-scrim,.kimo-tour-spot,.kimo-tour-pop,.kimo-tour-modal,
  .kimo-tour-dots i,.kimo-tour-btn,.kimo-tour-help{
    transition:none !important; animation:none !important;
  }
}