/*
 * ndevr-tour.css — styles for the QUAIL-guided onboarding tour (ndevr-tour.js).
 *
 * Self-contained: the spotlight overlay is fully self-styled (fonts, button shapes, z-index, colors)
 * and namespaced under .ndevr-tour* so nothing here touches the surrounding page.
 * Theming: colors consume the shared --nd-* tokens (/shared/css/theme.css) with the original dark literals as var() fallbacks.
 */

@layer page {
:root { --ndevr-tour-accent: var(--nd-accent-deep, #f2a900); }

/* Block background scrolling while the spotlight is up. */
html.ndevr-tour-noscroll, html.ndevr-tour-noscroll body { overflow: hidden; }

/* The overlay layer. The dim is produced by the ring's huge box-shadow (so the spotlight hole stays
   interactive); the overlay container itself doesn't capture clicks. */
.ndevr-tour {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Full-screen dim behind a CENTERED card (intro/outro steps with no spotlight target). Matches the dim the
   spotlight ring's box-shadow produces, so cards with and without a highlight read the same. Visual only
   (pointer-events:none), consistent with the spotlight dim. Toggled in placeFor(). */
.ndevr-tour-backdrop {
  position: fixed;
  inset: 0;
  background: var(--nd-overlay, rgba(10, 12, 16, 0.62));
  pointer-events: none;
}

/* Spotlight ring: a transparent box with a massive dark surround. pointer-events:none so the user can
   actually click the highlighted control underneath. */
.ndevr-tour-ring {
  position: fixed;
  border-radius: 10px;
  border: 2px solid var(--ndevr-tour-accent);
  box-shadow: 0 0 0 99999px var(--nd-overlay, rgba(10, 12, 16, 0.62)), 0 0 0 3px rgba(242, 169, 0, 0.35);
  pointer-events: none;
  transition: top .15s ease, left .15s ease, width .15s ease, height .15s ease;
  box-sizing: border-box;
}

/* Reveal a spotlighted file's action buttons during the tour (the library hides .owl-tile-acts until
   hover on desktop, which would leave the share-button spotlight pointing at empty space). */
.ndevr-forms .owl-tile-acts.ndevr-tour-show { opacity: 1; }

/* The instruction card. */
.ndevr-tour-card {
  position: fixed;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: var(--nd-surface, #1b1e24);
  color: var(--nd-text, #e8eaed);
  border: 1px solid var(--nd-line, #2a2f39);
  border-radius: var(--nd-radius, 12px);
  box-shadow: var(--nd-shadow-2, 0 18px 50px rgba(0, 0, 0, 0.55));
  padding: 16px 16px 14px;
  pointer-events: auto;
  box-sizing: border-box;
}
.ndevr-tour-card.is-centered {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ndevr-tour-head { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.ndevr-tour-quail-ico { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 6px; object-fit: contain; display: block; }
.ndevr-tour-title { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0; color: var(--nd-text-strong, #fff); }
.ndevr-tour-prog { flex: 0 0 auto; font-size: 12px; color: var(--nd-muted, #9aa3b2); font-variant-numeric: tabular-nums; }
.ndevr-tour-body { font-size: 13.5px; line-height: 1.5; color: var(--nd-text-soft, #c7ccd6); margin: 0 0 14px; }

.ndevr-tour-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ndevr-tour-nav-right { display: flex; gap: 8px; }
.ndevr-tour-btn {
  appearance: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--nd-border, #353b46);
  background: var(--nd-surface-2, #23272f);
  color: var(--nd-text, #e8eaed);
  cursor: pointer;
  line-height: 1;
  transition: background .12s ease, opacity .12s ease;
}
.ndevr-tour-btn:hover { background: var(--nd-line, #2a2f39); }
.ndevr-tour-btn:disabled { opacity: .4; cursor: default; }
.ndevr-tour-primary { background: var(--ndevr-tour-accent); border-color: var(--ndevr-tour-accent); color: var(--nd-accent-contrast, #232323); }
.ndevr-tour-primary:hover { background: var(--nd-accent, #ffba1f); }
.ndevr-tour-skip { background: transparent; border-color: transparent; color: var(--nd-muted, #9aa3b2); padding-left: 0; }
.ndevr-tour-skip:hover { background: transparent; color: var(--nd-text-soft, #c7ccd6); text-decoration: underline; }

/* "Ask QUAIL" disclosure + the embedded assistant panel. */
.ndevr-tour-ask {
  appearance: none;
  margin-top: 12px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ndevr-tour-accent);
  background: transparent;
  border: 1px dashed var(--nd-border, #353b46);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}
.ndevr-tour-ask.is-open { border-style: solid; background: var(--nd-hover, #222732); }
.ndevr-tour-quail { margin-top: 10px; }
.ndevr-tour-quail-loading { font-size: 13px; color: var(--nd-muted, #9aa3b2); padding: 8px 2px; }
/* Keep the assistant feed inside the card to a sensible height. */
.ndevr-tour-quail .ndevr-qa { max-height: 320px; }
.ndevr-tour-quail .ndevr-qa-feed { max-height: 220px; }

/* First-login welcome prompt — a centered modal over a dimmed backdrop so it's hard to miss.
   (Was a small bottom-right toast that competed with the page and was easy to overlook.) */
.ndevr-tour-welcome-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147482999;
  background: var(--nd-overlay, rgba(10, 12, 16, 0.62));
  opacity: 0;
  transition: opacity .25s ease;
}
.ndevr-tour-welcome-backdrop.is-in { opacity: 1; }

.ndevr-tour-welcome {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 2147483000;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: var(--nd-surface, #1b1e24);
  color: var(--nd-text, #e8eaed);
  border: 1px solid var(--nd-line, #2a2f39);
  border-top: 3px solid var(--ndevr-tour-accent);
  border-radius: var(--nd-radius, 12px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  padding: 18px 18px 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  transform: translate(-50%, -50%) scale(.96);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.ndevr-tour-welcome.is-in { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.ndevr-tour-welcome-msg { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.ndevr-tour-welcome-msg .ndevr-tour-quail-ico { width: 30px; height: 30px; }
.ndevr-tour-welcome-text { display: flex; flex-direction: column; min-width: 0; }
.ndevr-tour-welcome-text strong { font-size: 14px; color: var(--nd-text-strong, #fff); margin-bottom: 4px; }
.ndevr-tour-welcome-text span { font-size: 13px; line-height: 1.45; color: var(--nd-text-soft, #c7ccd6); }
.ndevr-tour-welcome-btns { display: flex; justify-content: flex-end; gap: 8px; }

/* Completion toast. */
.ndevr-tour-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  z-index: 2147483000;
  max-width: calc(100vw - 32px);
  background: var(--nd-surface, #1b1e24);
  color: var(--nd-text, #e8eaed);
  border: 1px solid var(--nd-line, #2a2f39);
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  padding: 11px 16px;
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
.ndevr-tour-toast.is-in { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 560px) {
  .ndevr-tour-card { width: calc(100vw - 20px); left: 10px; right: 10px; }
  .ndevr-tour-card:not(.is-centered) { left: 10px; }
}
}