/* Command Center guided tour (tour spec 5 Oct 2026, T3–T6).
   The tour surfaces are dark in BOTH themes: the colours below are the
   spec's fixed deck palette (#0A1628 card, #00D4AA accent, #8895AC sub,
   #C5CDDC body) and are deliberately not theme tokens. Only the dim
   behind the hole follows the page: navy on the light page, black on dark. */

@keyframes tourRing  { 0% { box-shadow: 0 0 0 0 rgba(0,212,170,.55); } 100% { box-shadow: 0 0 0 14px rgba(0,212,170,0); } }
@keyframes tourClick { 0% { transform: translate(-50%,-50%) scale(.3); opacity: .9; } 100% { transform: translate(-50%,-50%) scale(2.4); opacity: 0; } }
@keyframes tourIn    { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tourFact  { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tourFlash { 0% { box-shadow: 0 0 0 0 rgba(0,212,170,.9), inset 0 0 0 2px rgba(0,212,170,.6); } 100% { box-shadow: 0 0 0 10px rgba(0,212,170,0), inset 0 0 0 0 rgba(0,212,170,0); } }


/* ── Step mode: click blocker, dim with a hole, ring, pointer, card ───────── */
.tour-block { position: fixed; inset: 0; z-index: 970; }
.tour-dim {
  position: fixed; inset: 0; z-index: 972; pointer-events: none;
  background: rgba(10,22,40,.55);
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
          mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
:root:not([data-theme="light"]) .tour-dim { background: rgba(0,0,0,.6); }
.tour-dim.eased {
  transition: mask-position .45s cubic-bezier(.2,.7,.2,1), -webkit-mask-position .45s cubic-bezier(.2,.7,.2,1),
              mask-size .45s cubic-bezier(.2,.7,.2,1), -webkit-mask-size .45s cubic-bezier(.2,.7,.2,1);
}
.tour-ring {
  position: fixed; z-index: 975; pointer-events: none; box-sizing: border-box;
  border: 2px solid #00D4AA; border-radius: 14px;
  animation: tourRing 1.8s ease-out infinite;
}
.tour-ring.eased { transition: left .45s cubic-bezier(.2,.7,.2,1), top .45s cubic-bezier(.2,.7,.2,1), width .45s cubic-bezier(.2,.7,.2,1), height .45s cubic-bezier(.2,.7,.2,1); }
.tour-ring.flash { animation: tourFlash .55s ease-out; }
.tour-cursor { position: fixed; z-index: 985; pointer-events: none; transition: left 1s cubic-bezier(.3,.8,.3,1), top 1s cubic-bezier(.3,.8,.3,1); }
.tour-cursor svg { display: block; filter: drop-shadow(0 2px 4px rgba(10,22,40,.4)); }
.tour-ripple { position: absolute; left: 4px; top: 3px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #00D4AA; animation: tourClick .55s ease-out both; }

.tour-card {
  position: fixed; z-index: 980; width: 360px; max-width: calc(100vw - 32px); box-sizing: border-box;
  background: #0A1628; color: #F0F4FF; border-radius: 16px; padding: 18px 20px 16px;
  box-shadow: 0 24px 70px rgba(10,22,40,.45), 0 0 0 1px rgba(255,255,255,.06);
  font-family: var(--fn); outline: none;
}
.tour-card.eased { transition: left .45s cubic-bezier(.2,.7,.2,1), top .45s cubic-bezier(.2,.7,.2,1); }
.tour-card.enter { animation: tourIn .3s ease-out; }
.tour-card[hidden], .tour-ring[hidden], .tour-dim[hidden], .tour-cursor[hidden] { display: none; }
.tour-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tour-kicker { font-family: var(--fm); font-size: 11px; font-weight: 600; letter-spacing: .14em; color: #00D4AA; text-transform: uppercase; white-space: nowrap; }
.tour-x { background: none; border: none; color: #5A6880; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; font-family: inherit; }
.tour-x:hover { color: #F0F4FF; }
.tour-fact { font-size: 30px; font-weight: 600; letter-spacing: -.03em; color: #F0F4FF; line-height: 1.1; margin-top: 12px; font-variant-numeric: tabular-nums; text-wrap: balance; animation: tourFact .5s ease-out; }
.tour-fact.long { font-size: 22px; }
.tour-title { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; margin-top: 8px; line-height: 1.3; color: #00D4AA; text-wrap: pretty; }
.tour-body { font-size: 13px; color: #C5CDDC; line-height: 1.55; margin-top: 6px; text-wrap: pretty; }
.tour-progress { height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; margin-top: 14px; overflow: hidden; }
.tour-progress > span { display: block; height: 100%; width: 0; background: #00D4AA; border-radius: 2px; }
.tour-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.tour-dots { display: flex; gap: 5px; align-items: center; flex: 1; flex-wrap: wrap; }
.tour-dot { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); border: none; padding: 0; cursor: pointer; transition: all .2s; }
.tour-dot.past { background: rgba(0,212,170,.45); }
.tour-dot.on { width: 18px; background: #00D4AA; }

.tour-btn { border-radius: 8px; padding: 6px 11px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; white-space: nowrap; }
.tour-btn.ghost { background: rgba(255,255,255,.08); color: #F0F4FF; border: 1px solid rgba(255,255,255,.14); }
.tour-btn.ghost:hover { background: rgba(255,255,255,.14); }
.tour-btn.primary { background: #00D4AA; color: #0A1628; border: none; padding: 6px 13px; font-weight: 600; }
.tour-btn.primary:hover { background: #2EE0BA; }
.tour-btn.text { background: none; border: none; color: #8895AC; }
.tour-btn.text:hover { color: #F0F4FF; }
.tour-btn:focus-visible, .tour-x:focus-visible, .tour-dot:focus-visible { outline: 2px solid #00D4AA; outline-offset: 2px; }
.tour-btn.lg { border-radius: 10px; padding: 11px 20px; font-size: 14px; }
.tour-btn.lg.ghost { padding: 11px 16px; }

/* ── Intro / outro: full-screen dark overlay over the page ───────────────── */
.tour-cover {
  position: fixed; inset: 0; z-index: 990; background: rgba(10,22,40,.92);
  display: flex; align-items: center; justify-content: center; animation: tourIn .5s ease-out;
  font-family: var(--fn); outline: none;
}
.tour-cover-in { max-width: 760px; padding: 0 32px; text-align: center; }
.tour-cover-kicker { font-family: var(--fm); font-size: 11px; font-weight: 600; letter-spacing: .12em; color: #00D4AA; text-transform: uppercase; }
.tour-cover-title { font-size: 44px; font-weight: 600; letter-spacing: -.03em; color: #F0F4FF; line-height: 1.1; margin-top: 18px; text-wrap: balance; animation: tourFact .7s ease-out; }
.tour-cover-sub { font-size: 17px; color: #8895AC; line-height: 1.55; margin-top: 18px; text-wrap: pretty; animation: tourFact .7s .25s ease-out both; }
.tour-cover-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 30px; text-align: left; animation: tourFact .7s .25s ease-out both; }
.tour-cover-card { background: #12161F; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 18px; }
.tour-cover-card b { display: block; font-size: 15px; font-weight: 600; color: #F0F4FF; }
.tour-cover-card span { display: block; font-size: 12.5px; color: #8895AC; line-height: 1.5; margin-top: 6px; }
.tour-cover-acts { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 30px; animation: tourFact .7s .5s ease-out both; }
@media (max-width: 640px) {
  .tour-cover-title { font-size: 32px; }
  .tour-cover-cards { grid-template-columns: 1fr; }
}

/* ── Entry points: first-visit pill, ? button + menu, video overlay ──────── */
.tour-pill {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 900;
  display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); box-sizing: border-box;
  background: #0A1628; color: #F0F4FF; border-radius: 14px; padding: 12px 14px 12px 18px;
  box-shadow: 0 12px 40px rgba(10,22,40,.35); animation: tourIn .4s ease-out; font-family: var(--fn);
}
.tour-pill-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tour-pill-txt b { font-size: 13px; font-weight: 600; }
.tour-pill-txt span { font-size: 11.5px; color: #8895AC; }
.tour-pill .tour-btn { border-radius: 9px; padding: 8px 14px; font-size: 12.5px; }
.tour-pill .tour-x { font-size: 16px; padding: 4px 2px; }
@media (max-width: 640px) { .tour-pill { flex-wrap: wrap; } }

.tour-help { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.tour-help-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: #0A1628; color: #F0F4FF; font-size: 16px; font-weight: 600; font-family: var(--fn);
  box-shadow: 0 6px 20px rgba(10,22,40,.25), 0 0 0 1px rgba(255,255,255,.08);
}
.tour-help-btn:hover { background: #1E2432; }
.tour-help-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tour-menu {
  background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 12px; padding: 6px; min-width: 210px;
  box-shadow: 0 10px 30px rgba(var(--shadow-rgb), calc(.16 * var(--shadow-k))); animation: tourIn .2s ease-out;
}
.tour-menu button, .tour-menu a {
  display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 8px; box-sizing: border-box;
  padding: 8px 10px; font-size: 13px; color: var(--text); cursor: pointer; font-family: inherit; text-decoration: none;
}
.tour-menu button:hover, .tour-menu a:hover, .tour-menu button:focus-visible { background: var(--surface-4); outline: none; }

.tour-video { position: fixed; inset: 0; z-index: 995; background: rgba(10,22,40,.92); display: flex; align-items: center; justify-content: center; animation: tourIn .3s ease-out; }
.tour-video video { width: min(1200px, calc(100vw - 48px)); max-height: calc(100dvh - 96px); border-radius: 12px; background: #000; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.tour-video .tour-x { position: absolute; top: 18px; right: 22px; font-size: 26px; color: #8895AC; }
.tour-video-miss { color: #8895AC; font-size: 14px; font-family: var(--fn); text-align: center; }

/* Settings › Help */
.sp-help { max-width: 560px; }
.sp-help p { color: var(--text-mid); font-size: 13px; line-height: 1.55; margin: 0 0 14px; }
.sp-help-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.sp-help-list button { display: flex; flex-direction: column; gap: 2px; text-align: left; background: none; border: none; border-top: 1px solid var(--border); padding: 12px 16px; cursor: pointer; font-family: inherit; color: var(--text); }
.sp-help-list button:first-child { border-top: none; }
.sp-help-list button:hover { background: var(--surface-2); }
.sp-help-list b { font-size: 13.5px; font-weight: 500; }
.sp-help-list span { font-size: 12px; color: var(--text-dim); }

/* T6: reduced motion — no pulse, no glide, instant placement. */
@media (prefers-reduced-motion: reduce) {
  .tour-ring, .tour-ring.flash { animation: none; }
  .tour-ring.eased, .tour-card.eased, .tour-dim.eased, .tour-cursor { transition: none; }
  .tour-card.enter, .tour-fact, .tour-cover, .tour-cover-title, .tour-cover-sub, .tour-cover-cards, .tour-cover-acts, .tour-pill, .tour-menu, .tour-video { animation: none; }
}