/* ============================================================
   CopySync — Interactive tutorial
   Additive layer on top of ui.css. Every colour comes from the
   ui.css tokens, so this follows light/dark automatically and
   can never drift from the dashboard's palette.

   Prefix is `cs-tut-`. Not `ad-` — ad blockers eat that.
   ============================================================ */

/* ---- Launcher (FAB) --------------------------------------------
   Sits bottom-right. `.toasts` already owns that corner at z-index
   200, so the button sits just under it and pushes the toast stack
   up (see the body-class rule below) rather than fighting it.
   ---------------------------------------------------------------- */
.cs-tut-fab {
  position: fixed; bottom: 20px; right: 20px; z-index: 190;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px 11px 15px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--accent-text);
  background: var(--gradient-brand-h);
  background-size: 200% 100%;
  border: none; border-radius: 999px;
  box-shadow: var(--shadow-lift);
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-position .5s var(--ease);
  animation: cs-tut-fab-in .32s var(--ease) both;
}
.cs-tut-fab:hover {
  transform: translateY(-2px);
  background-position: 100% 0;
  box-shadow: var(--shadow-lift), 0 0 0 4px rgba(var(--cyan-rgb), .18);
}
.cs-tut-fab:active { transform: translateY(0); }
.cs-tut-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cs-tut-fab svg { width: 17px; height: 17px; flex: none; }

/* A soft pulse the first time only, so it reads as "start here"
   without becoming permanent visual noise. */
.cs-tut-fab.is-new::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(var(--cyan-rgb), .55);
  animation: cs-tut-pulse 2.4s ease-out infinite;
}
@keyframes cs-tut-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(var(--cyan-rgb), .5); }
  70%  { box-shadow: 0 0 0 16px rgba(var(--cyan-rgb), 0); }
  100% { box-shadow: 0 0 0 0   rgba(var(--cyan-rgb), 0); }
}
@keyframes cs-tut-fab-in {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* Keep the toast stack clear of the launcher. */
body.cs-tut-has-fab .toasts { bottom: 76px; }

/* ---- Spotlight --------------------------------------------------
   One element does both jobs: the ring around the target, and the
   page dimming (a 9999px spread shadow covers everything outside
   the hole). pointer-events:none throughout — the user clicks the
   real control, never the tutorial.
   ---------------------------------------------------------------- */
.cs-tut-spot {
  position: fixed; z-index: 9000; pointer-events: none;
  border-radius: var(--r-md);
  box-shadow:
    0 0 0 9999px rgba(6, 9, 16, .58),
    0 0 0 2px var(--accent),
    0 0 24px rgba(var(--cyan-rgb), .45);
  transition: top .3s var(--ease), left .3s var(--ease),
              width .3s var(--ease), height .3s var(--ease);
}
/* Steps with no anchor (welcome / explainer / completion) dim the
   whole page and park the ring off-screen. */
.cs-tut-spot.is-plain {
  top: 50%; left: 50%; width: 0; height: 0;
  box-shadow: 0 0 0 9999px rgba(6, 9, 16, .58);
}

/* ---- Tooltip ---------------------------------------------------- */
.cs-tut-tip {
  position: fixed; z-index: 9002;
  width: 370px; max-width: calc(100vw - 28px);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  padding: 17px 18px 14px;
  transition: top .3s var(--ease), left .3s var(--ease);
  /* A long step must never grow past the viewport: the prose scrolls inside
     and the footer stays put, so Next is always reachable. */
  display: flex; flex-direction: column;
  max-height: calc(100vh - 28px); overflow: hidden;
}
.cs-tut-scroll { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.cs-tut-tip-arrow {
  position: absolute; width: 12px; height: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  transform: rotate(45deg);
}
.cs-tut-tip-arrow.top    { top: -7px;    border-right: none;  border-bottom: none; }
.cs-tut-tip-arrow.bottom { bottom: -7px; border-left: none;   border-top: none; }
.cs-tut-tip-arrow.left   { left: -7px;   border-right: none;  border-top: none; }
.cs-tut-tip-arrow.right  { right: -7px;  border-left: none;   border-bottom: none; }

.cs-tut-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent-ink);
  margin-bottom: 6px;
}
.cs-tut-tip h4 {
  margin: 0 0 6px; font-size: 15.5px; font-weight: 640;
  letter-spacing: -.01em; color: var(--text);
}
.cs-tut-tip p {
  margin: 0 0 10px; font-size: 13.5px; line-height: 1.58;
  color: var(--text-dim);
}
.cs-tut-tip p:last-of-type { margin-bottom: 12px; }
.cs-tut-tip b { color: var(--text); font-weight: 620; }

/* Inline "do this now" cue on steps that wait for a real click. */
.cs-tut-cue {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--pos-ink);
  margin: 0 0 11px;
}
.cs-tut-cue svg { width: 14px; height: 14px; flex: none; }

.cs-tut-note {
  font-size: 12.5px; line-height: 1.5;
  color: var(--text-dim);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  padding: 9px 11px; margin: 0 0 12px;
}

/* ---- Tooltip footer --------------------------------------------- */
.cs-tut-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-top: 11px; min-width: 0;
  border-top: 1px solid var(--border);
}
/* A bar rather than one dot per step: the script runs to 23 steps on the
   managed route, and that many dots pushed the buttons out of the tooltip. */
.cs-tut-bar {
  flex: 1 1 auto; min-width: 40px; max-width: 108px;
  height: 4px; border-radius: 999px;
  background: var(--border-strong); overflow: hidden;
}
.cs-tut-bar span {
  display: block; height: 100%; border-radius: inherit;
  background: var(--accent);
  transition: width .3s var(--ease);
}
.cs-tut-actions { display: flex; align-items: center; gap: 4px; flex: none; }

.cs-tut-btn {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 11px; border-radius: var(--r-sm); white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: all .15s var(--ease);
}
.cs-tut-btn-primary { background: var(--accent); color: var(--accent-text); }
.cs-tut-btn-primary:hover { filter: brightness(1.07); }
.cs-tut-btn-primary:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.cs-tut-btn-ghost { background: transparent; color: var(--text-mute); }
.cs-tut-btn-ghost:hover { color: var(--text); background: var(--surface-2); }
.cs-tut-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Welcome / completion card ----------------------------------
   Deliberately NOT rendered into #modal-root: ui.js owns that node
   and clears it whenever it opens a dialog of its own.
   ---------------------------------------------------------------- */
.cs-tut-card-wrap {
  position: fixed; inset: 0; z-index: 9003;
  display: grid; place-items: center; padding: 22px;
}
.cs-tut-card {
  width: 100%; max-width: 440px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  padding: 28px 26px 22px; text-align: center;
  animation: cs-tut-card-in .2s var(--ease);
}
@keyframes cs-tut-card-in {
  from { opacity: 0; transform: translateY(9px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.cs-tut-card-icon {
  width: 54px; height: 54px; margin: 0 auto 15px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-ink);
}
.cs-tut-card-icon.ok {
  background: var(--pos-soft);
  border-color: rgba(var(--green-rgb), .4);
  color: var(--pos-ink);
}
.cs-tut-card-icon svg { width: 25px; height: 25px; }
.cs-tut-card h3 {
  margin: 0 0 8px; font-size: 20px; font-weight: 650; letter-spacing: -.015em;
}
.cs-tut-card p {
  margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--text-dim);
}
.cs-tut-card-actions {
  display: flex; gap: 9px; justify-content: center; flex-wrap: wrap;
}
.cs-tut-card .cs-tut-btn { padding: 9px 18px; font-size: 13.5px; }

/* Recap list on the closing card. */
.cs-tut-recap {
  text-align: left; margin: 0 0 16px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden;
}
.cs-tut-recap div {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 12px; font-size: 13px; line-height: 1.5;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
.cs-tut-recap div:last-child { border-bottom: none; }
.cs-tut-recap svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--pos-ink); }
.cs-tut-recap b { color: var(--text); font-weight: 620; }

/* ---- Mobile -----------------------------------------------------
   Two of ui.css's breakpoints matter here, and they are different
   numbers:

     991px - the sidebar becomes an off-canvas drawer behind #btnMenu.
             There is NO bottom nav bar in this shell (the .nav rules
             in ui.css target a class it no longer renders), so the
             launcher only has to clear the toast stack.
     680px - .modal-backdrop switches to align-items:flex-end, so every
             dialog becomes a bottom sheet.

   Below 680px the tooltip is pinned to one edge instead of tracking
   its anchor, because there is not enough width to sit beside
   anything. Which edge is decided per step by positionTip(): the
   drawer owns the top of the screen, a sheet owns the bottom, so the
   tooltip goes to whichever end its anchor is not at.
   ---------------------------------------------------------------- */
@media (max-width: 680px) {
  .cs-tut-fab {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    right: 14px; padding: 11px 17px 11px 14px; font-size: 14px;
  }
  body.cs-tut-has-fab .toasts {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }

  /* Default: pinned to the bottom. .at-top flips it. */
  .cs-tut-tip {
    top: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    left: 10px !important; right: 10px;
    width: auto !important; max-width: none;
    display: flex; flex-direction: column;
    max-height: 46vh; overflow: hidden;
    padding: 15px 16px 12px;
  }
  /* The prose scrolls; the footer stays put. */
  .cs-tut-scroll {
    overflow-y: auto; flex: 1 1 auto; min-height: 0;
    -webkit-overflow-scrolling: touch;
  }
  .cs-tut-foot { flex: none; }
  .cs-tut-tip.at-top {
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    bottom: auto !important;
  }
  .cs-tut-tip-arrow { display: none; }
  .cs-tut-tip h4 { font-size: 16px; }
  .cs-tut-tip p { font-size: 14px; }

  /* Comfortable thumb targets; 4px gaps are a desktop luxury. */
  .cs-tut-btn { padding: 10px 14px; font-size: 14px; }
  .cs-tut-actions { gap: 6px; }
  .cs-tut-bar { max-width: 70px; }

  .cs-tut-card-wrap { padding: 16px; }
  .cs-tut-card {
    padding: 24px 20px 20px;
    max-height: calc(100vh - 32px); overflow-y: auto;
  }
  .cs-tut-card h3 { font-size: 19px; }
  .cs-tut-card-actions .cs-tut-btn { flex: 1 1 auto; padding: 11px 16px; }
}

/* ui.css clearly means the dialog to be a bottom sheet on a phone - it sets
   align-items:flex-end on the backdrop and rounds only the top corners - but
   .modal's own `margin: auto` wins over that and centres it vertically. The
   result is a card floating in the middle with dead space under it, and its
   first fields sitting exactly where the tooltip needs to be.

   While the tutorial runs, restore the alignment ui.css was reaching for. The
   top of the screen is then free for the tooltip, the foot (Cancel / Create)
   stays against the bottom edge where a thumb expects it, and the body scrolls
   between them. The cap tracks the real tooltip height via --cs-tut-tip-h.

   Scoped to body.cs-tut-run, so nothing about the dialog changes once the
   tutorial exits. */
@media (max-width: 680px) {
  body.cs-tut-run .modal {
    margin-top: auto; margin-bottom: 0;
    display: flex; flex-direction: column;
    max-height: calc(100vh - var(--cs-tut-tip-h, 0px) - 24px);
    max-height: calc(100dvh - var(--cs-tut-tip-h, 0px) - 24px);
  }
  body.cs-tut-run .modal-body { overflow-y: auto; flex: 1 1 auto; }
  body.cs-tut-run .modal-head,
  body.cs-tut-run .modal-foot { flex: none; }
}

/* Very narrow phones: let the footer wrap rather than squeeze the buttons. */
@media (max-width: 380px) {
  .cs-tut-foot { flex-wrap: wrap; gap: 8px; }
  .cs-tut-bar { order: 2; max-width: none; }
  .cs-tut-actions { order: 1; width: 100%; justify-content: flex-end; }
}

/* ---- Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cs-tut-fab, .cs-tut-spot, .cs-tut-tip, .cs-tut-card { animation: none; transition: none; }
  .cs-tut-fab.is-new::after { animation: none; }
}

/* A create the server refused — shown in place so the step cannot look
   frozen while it waits for a success that is not coming. */
.cs-tut-problem {
  font-size: 12.5px; line-height: 1.5; font-weight: 550;
  color: var(--neg-ink);
  background: var(--neg-soft);
  border: 1px solid rgba(255, 82, 82, .35);
  border-radius: var(--r-sm);
  padding: 9px 11px; margin: 0 0 12px;
}