/* SakinTour (tour.js): the first-visit tour card and its little scenes. Tokens only; motion stops with reduced motion. */
.sk-tour-back {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgb(var(--shadow-rgb) / 0.32);
}
.sk-tour {
  position: fixed;
  z-index: 96;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  box-sizing: border-box;
  width: min(400px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: var(--sp-2);
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgb(var(--shadow-rgb) / 0.22);
  font-size: var(--ctl-font);
}
.sk-tour-art {
  border-radius: 10px;
  background: var(--bg-canvas);
  overflow: hidden;
}
.sk-tour-art svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
}
.sk-tour-body {
  padding: var(--sp-4) var(--sp-3) var(--sp-2);
}
.sk-tour-body h2 {
  margin: 0 0 var(--sp-2);
  font-size: calc(var(--ctl-font) + 4px);
  line-height: 1.3;
  font-weight: var(--title-weight);
}
.sk-tour-body p {
  margin: 0;
  line-height: 1.5;
  color: var(--text-secondary, var(--muted));
  min-height: 3em; /* two lines: the buttons do not jump between steps */
}
.sk-tour-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) var(--sp-2);
}
.sk-tour-foot :is(.btn, .btn-quiet) {
  width: auto;
  min-width: 72px;
}
.sk-tour-dots {
  display: flex;
  gap: 6px;
}
.sk-tour-dots i {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--border-strong);
  transition: width var(--duration-ui) var(--ease-out-strong), background-color var(--duration-ui) var(--ease-out-strong);
}
.sk-tour-dots i.on {
  width: 18px;
  background: var(--accent);
}

/* Scene paint */
.sk-tour svg .p { fill: var(--panel); }
.sk-tour svg .l { stroke: var(--border-strong); stroke-width: 1; }
.sk-tour svg .m { fill: var(--border-strong); }
.sk-tour svg .a { fill: var(--accent); }
.sk-tour svg .on-a { fill: none; stroke: var(--c-on-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sk-tour svg .m-line { fill: var(--panel); stroke: var(--text); stroke-width: 1.4; stroke-linejoin: round; }
.sk-tour svg .dash { fill: none; stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }
.sk-tour svg .soft { fill-opacity: 0.55; }
.sk-tour svg .wash { fill-opacity: 0.3; }
.sk-tour svg .f-clay { fill: var(--folder-clay); }
.sk-tour svg .f-sky { fill: var(--folder-sky); }
.sk-tour svg .f-sage { fill: var(--folder-sage); }
.sk-tour svg .f-ochre { fill: var(--folder-ochre); }
.sk-tour svg .f-plum { fill: var(--folder-plum); }
.sk-tour svg .f-teal { fill: var(--folder-teal); }
.sk-tour svg .t-slot { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 4 4; opacity: 0; }
.sk-tour svg :is(.t-press, .t-fly, .t-take, .t-drop, .t-in, .t-tag, .t-file, .t-check, .t-shield) {
  transform-box: fill-box;
  transform-origin: center;
}
/* still frame (also what reduced motion shows): every scene's settled state */
.sk-tour svg :is(.t-fly, .t-file) { opacity: 0; }
.sk-tour svg .t-view:not(.v1) { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .sk-tour, .sk-tour-back { animation: sk-tour-fade var(--duration-reveal) var(--ease-out-strong); }
  .sk-tour { animation-name: sk-tour-rise; }
  .sk-tour-out { opacity: 0; transition: opacity 160ms var(--ease-out-ui); }
  .sk-tour-body.sk-tour-in { animation: sk-tour-text var(--duration-reveal) var(--ease-out-strong); }
  .sk-tour svg.sk-tour-in { animation: sk-tour-fade var(--duration-reveal) var(--ease-out-strong); }

  .sk-tour svg .t-press { animation: sk-tour-press 4.2s var(--ease-out-ui) infinite; }
  .sk-tour svg .t-fly { animation: sk-tour-fly 4.2s var(--ease-move) infinite; }
  .sk-tour svg .t-take { animation: sk-tour-take 4.2s var(--ease-out-strong) infinite; }
  .sk-tour svg .t-drop { animation: sk-tour-drop 4.2s var(--ease-out-strong) infinite; }
  .sk-tour svg .t-slot { animation: sk-tour-slot 4.2s linear infinite; }
  .sk-tour svg .t-in { animation: sk-tour-in 4.8s var(--ease-move) infinite; }
  .sk-tour svg .t-tag { animation: sk-tour-tag 4.8s var(--ease-pop) infinite; }
  .sk-tour svg :is(.t-in, .t-tag).t2 { animation-delay: 0.18s; }
  .sk-tour svg :is(.t-in, .t-tag).t3 { animation-delay: 0.36s; }
  .sk-tour svg .t-view { animation: sk-tour-view 7.2s var(--ease-out-strong) infinite; }
  .sk-tour svg .t-view.v2 { animation-delay: 2.4s; }
  .sk-tour svg .t-view.v3 { animation-delay: 4.8s; }
  .sk-tour svg .t-seg { animation: sk-tour-seg 7.2s var(--ease-move) infinite; }
  .sk-tour svg .t-file { animation: sk-tour-file 3.6s var(--ease-move) infinite; }
  .sk-tour svg .t-file.t2 { animation-delay: 0.4s; }
  .sk-tour svg .t-file.t3 { animation-delay: 0.8s; }
  .sk-tour svg .t-check { animation: sk-tour-check 3.6s var(--ease-pop) infinite; }
  .sk-tour svg .t-shield { animation: sk-tour-shield 4.2s var(--ease-pop) infinite; }
}
@keyframes sk-tour-fade { from { opacity: 0; } }
@keyframes sk-tour-rise { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes sk-tour-text { from { opacity: 0; transform: translateY(4px); } }
@keyframes sk-tour-press { 0%, 18%, 30%, 100% { transform: scale(1); } 23% { transform: scale(0.88); } }
@keyframes sk-tour-fly {
  0%, 24% { opacity: 0; transform: translate(0, 0) scale(1); }
  28% { opacity: 1; transform: translate(0, 0) scale(1); }
  54% { opacity: 1; transform: translate(80px, 18px) scale(0.45); }
  60%, 100% { opacity: 0; transform: translate(80px, 18px) scale(0.3); }
}
@keyframes sk-tour-take { 0%, 52%, 70%, 100% { transform: scale(1); } 58% { transform: scale(1.08); } }
@keyframes sk-tour-drop {
  0%, 8% { opacity: 0; transform: translate(26px, -34px) rotate(6deg); }
  16% { opacity: 1; }
  40%, 86% { opacity: 1; transform: translate(0, 0) rotate(0); }
  96%, 100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes sk-tour-slot { 0%, 10% { opacity: 0; } 16%, 38% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes sk-tour-in {
  0% { opacity: 0; transform: translateY(-8px); }
  14%, 36% { opacity: 1; transform: translateY(0) scale(1); }
  56% { opacity: 0; transform: translateY(46px) scale(0.5); }
  100% { opacity: 0; transform: translateY(46px) scale(0.5); }
}
@keyframes sk-tour-tag { 0%, 56% { opacity: 0; transform: scale(0.6); } 66%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes sk-tour-view {
  0% { opacity: 0; transform: translateY(6px); }
  6%, 30% { opacity: 1; transform: translateY(0); }
  36%, 100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes sk-tour-seg { 0%, 30% { transform: translateX(0); } 36%, 63% { transform: translateX(36px); } 69%, 96% { transform: translateX(72px); } 100% { transform: translateX(0); } }
@keyframes sk-tour-file {
  0%, 10% { opacity: 0; transform: translateX(0); }
  18% { opacity: 1; }
  48% { opacity: 1; transform: translateX(54px) scale(0.8); }
  56%, 100% { opacity: 0; transform: translateX(62px) scale(0.6); }
}
@keyframes sk-tour-check { 0%, 64% { opacity: 0; transform: scale(0.4); } 72%, 94% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes sk-tour-shield { 0%, 12% { opacity: 0; transform: translateY(-10px) scale(0.8); } 26%, 92% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; } }

/* SakinTour.guide: the real page zooms (body transform); a spotlight rings one control, a small note beside it */
.sk-guide-catch {
  position: fixed;
  inset: 0;
  z-index: 97;
}
.sk-guide-spot {
  position: fixed;
  z-index: 98;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 9999px rgb(var(--shadow-rgb) / 0.4);
}
.sk-guide-spot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.sk-guide-tip {
  position: fixed;
  z-index: 99;
  box-sizing: border-box;
  width: min(300px, calc(100vw - 24px));
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgb(var(--shadow-rgb) / 0.22);
  font-size: var(--ctl-font);
  opacity: 0;
  pointer-events: none;
}
.sk-guide-tip.on { opacity: 1; pointer-events: auto; }
.sk-guide-count { margin-bottom: var(--sp-1); font-size: var(--ctl-font-sm); color: var(--text-secondary, var(--muted)); font-variant-numeric: tabular-nums; }
.sk-guide-tip h2 { margin: 0 0 var(--sp-1); font-size: calc(var(--ctl-font) + 2px); line-height: 1.3; font-weight: var(--title-weight); }
.sk-guide-tip p { margin: 0; line-height: 1.5; color: var(--text-secondary, var(--muted)); }
.sk-guide-tip .sk-tour-foot { padding: var(--sp-3) 0 var(--sp-1); }
@media (prefers-reduced-motion: no-preference) {
  .sk-guide-spot {
    transition: left var(--duration-scene) var(--ease-move), top var(--duration-scene) var(--ease-move),
      width var(--duration-scene) var(--ease-move), height var(--duration-scene) var(--ease-move), opacity 160ms var(--ease-out-ui);
    animation: sk-guide-ring 2.4s var(--ease-out-ui) infinite;
  }
  .sk-guide-tip { transform: translateY(4px); transition: opacity var(--duration-ui) var(--ease-out-strong), transform var(--duration-ui) var(--ease-out-strong); }
  .sk-guide-tip.on { transform: none; }
  :is(.sk-guide-catch, .sk-guide-spot, .sk-guide-tip).sk-tour-out { opacity: 0; transition: opacity 200ms var(--ease-out-ui); }
}
@keyframes sk-guide-ring {
  0%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 9999px rgb(var(--shadow-rgb) / 0.4); }
  50% { box-shadow: 0 0 0 5px var(--c-accent-line, var(--accent)), 0 0 0 9999px rgb(var(--shadow-rgb) / 0.4); }
}