/* 🧭 The tour (tour.js): the page dimmed but for a cut-out around the target (an accent ring), a
   small arrow at it, and the bubble. Over everything (the help panel is 360, the toast 400, the XP
   pop 450); it takes every click, so nothing under it is pressed by mistake. Light and dark from the
   tokens; motion only with .tour-move (✨ Full, no Reduce motion: tour.js) and never under
   prefers-reduced-motion. */

.tour { position: fixed; inset: 0; z-index: 500; pointer-events: auto; --tour-dim: rgba(16, 24, 40, .58); }
@media (prefers-color-scheme: dark) { .tour { --tour-dim: rgba(0, 0, 0, .7); } }
/* Nothing to point at: the whole page dims. */
.tour.tour-none { background: var(--tour-dim); }

.tour-hole { position: fixed; border-radius: var(--radius); box-shadow: 0 0 0 3px var(--accent), 0 0 0 200vmax var(--tour-dim); pointer-events: none; }
.tour-move .tour-hole { transition: top .38s cubic-bezier(.3, .7, .2, 1), left .38s cubic-bezier(.3, .7, .2, 1), width .38s cubic-bezier(.3, .7, .2, 1), height .38s cubic-bezier(.3, .7, .2, 1); }
.tour-still .tour-hole { transition: none; }

/* The arrow: a small accent triangle pointing up at the target (.down: from above). */
.tour-arrow { position: fixed; width: 14px; height: 14px; pointer-events: none; }
.tour-arrow::before { content: ''; position: absolute; inset: 0; background: var(--accent); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tour-arrow.down::before { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.tour-move .tour-arrow { animation: tour-nudge 1.1s ease-in-out infinite; }
.tour-move .tour-arrow.down { animation-name: tour-nudge-down; }
@keyframes tour-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes tour-nudge-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.tour-bubble { position: fixed; width: min(22rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; margin: 0; padding: 1rem 1.1rem .9rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.tour-move .tour-bubble { transition: top .38s cubic-bezier(.3, .7, .2, 1), left .38s cubic-bezier(.3, .7, .2, 1); }
.tour-still .tour-bubble { transition: none; }
.tour-count { margin: 0 0 .25rem; font-size: .75rem; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: var(--text-3); }
.tour-h { margin: 0 0 .35rem; font-size: 1.08rem; line-height: 1.3; outline: none; }
.tour-text { margin: 0; font-size: .93rem; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.tour-note { margin: .45rem 0 0; }
.tour-btns { display: flex; align-items: center; gap: .5rem; margin-top: .85rem; }
.tour-skip { margin-right: auto; font-size: .86rem; }
.tour-btns .btn { min-height: 2.25rem; }

/* ✓ Today's pretend task: ticked, struck through, +10 XP floating up; over and over at ✨ Full,
   shown done when nothing moves. */
.tour-demo { margin: .7rem 0 0; }
.tour-demo-row { position: relative; display: flex; align-items: center; gap: .55rem; padding: .5rem .65rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font-size: .9rem; }
.tour-demo-tick { flex-shrink: 0; position: relative; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 2px solid var(--accent); background: var(--accent); }
.tour-demo-tick::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent-contrast); font: 800 .7rem/1 var(--font); }
.tour-demo-title { flex: 1; min-width: 0; color: var(--text-3); text-decoration: line-through; }
.tour-demo-xp { font-weight: 750; font-size: .8rem; color: var(--gold); }
.tour-move .tour-demo-tick { animation: tour-tick 3s ease-in-out infinite; }
.tour-move .tour-demo-tick::after { animation: tour-tick-mark 3s ease-in-out infinite; }
.tour-move .tour-demo-title { animation: tour-tick-title 3s ease-in-out infinite; }
.tour-move .tour-demo-xp { animation: tour-tick-xp 3s ease-out infinite; }
@keyframes tour-tick { 0%, 25% { background: transparent; transform: scale(1); } 32% { background: var(--accent); transform: scale(1.18); } 40%, 88% { background: var(--accent); transform: scale(1); } 100% { background: transparent; } }
@keyframes tour-tick-mark { 0%, 28% { opacity: 0; } 34%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tour-tick-title { 0%, 30% { color: var(--text); text-decoration-color: transparent; } 40%, 88% { color: var(--text-3); text-decoration-color: currentColor; } 100% { color: var(--text); text-decoration-color: transparent; } }
@keyframes tour-tick-xp { 0%, 32% { opacity: 0; transform: translateY(4px); } 42% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(-10px); } }

/* ✨ New task: the title types itself, then Claude's chips show up (all shown when nothing moves). */
.tour-demo-type { flex-wrap: wrap; row-gap: .35rem; }
.tour-demo-typed { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--text); border-right: 2px solid transparent; }
.tour-demo-chip { flex-shrink: 0; padding: .1rem .45rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text, var(--text)); font-size: .78rem; font-weight: 650; }
.tour-move .tour-demo-typed { animation: tour-type 3.6s steps(12, end) infinite; }
.tour-move .tour-demo-chip { animation: tour-chip 3.6s ease-out infinite; }
@keyframes tour-type { 0% { max-width: 0; border-right-color: var(--accent); } 45% { max-width: 12ch; border-right-color: var(--accent); } 50%, 100% { max-width: 12ch; border-right-color: transparent; } }
@keyframes tour-chip { 0%, 52% { opacity: 0; transform: scale(.8); } 62%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

/* 🗓️ Schedule: a task slides onto 10 AM. */
.tour-demo-day { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .25rem .55rem; padding: .45rem .65rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font-size: .8rem; }
.tour-demo-hour { color: var(--text-3); font-variant-numeric: tabular-nums; }
.tour-demo-slot { display: block; min-height: 1.7rem; border-top: 1px dashed var(--border); padding-top: .2rem; }
.tour-demo-card { display: inline-block; max-width: 100%; padding: .2rem .55rem; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--text); font-size: .85rem; font-weight: 600; box-shadow: var(--shadow-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-move .tour-demo-card { animation: tour-drag 3.2s cubic-bezier(.3, .7, .2, 1) infinite; }
@keyframes tour-drag { 0%, 12% { transform: translate(60%, -2.1rem) rotate(-3deg); opacity: .75; } 55%, 90% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }

/* ⏳ Time: five days; one over the 12 h line (red) shrinks as a move takes some of it to the next. */
.tour-demo-bars { position: relative; display: flex; align-items: flex-end; gap: .45rem; height: 3.6rem; padding: .4rem .65rem 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.tour-demo-bar { flex: 1; border-radius: 4px 4px 0 0; background: var(--accent); opacity: .75; }
.tour-demo-bar.b1 { height: 45%; }
.tour-demo-bar.b2 { height: 60%; }
.tour-demo-bar.b3 { height: 70%; }
.tour-demo-bar.b4 { height: 55%; }
.tour-demo-bar.b5 { height: 35%; }
.tour-demo-line { position: absolute; left: .4rem; right: .4rem; bottom: 2.4rem; border-top: 2px dashed var(--bad); pointer-events: none; }
.tour-move .tour-demo-over { animation: tour-over 3.4s ease-in-out infinite; }
.tour-move .tour-demo-gets { animation: tour-gets 3.4s ease-in-out infinite; }
@keyframes tour-over { 0%, 30% { height: 95%; background: var(--bad); opacity: 1; } 60%, 100% { height: 70%; background: var(--accent); opacity: .75; } }
@keyframes tour-gets { 0%, 30% { height: 35%; } 60%, 100% { height: 55%; } }

/* 🧽 Cleaning: a countdown bar running down. */
.tour-demo-what { flex-shrink: 0; color: var(--text); }
.tour-demo-meter { flex: 1; min-width: 2rem; height: .5rem; border-radius: 999px; background: var(--sunken, var(--border)); overflow: hidden; }
.tour-demo-fill { display: block; height: 100%; width: 60%; border-radius: inherit; background: var(--good, var(--accent)); }
.tour-demo-left { flex-shrink: 0; font-size: .8rem; font-weight: 650; color: var(--text-2); }
.tour-move .tour-demo-fill { animation: tour-count 4s linear infinite; }
@keyframes tour-count { 0% { width: 100%; } 85% { width: 30%; } 100% { width: 100%; } }

/* A phone: the bubble docked to the bottom, 16 px from the edges (and the home bar). */
.tour-docked .tour-bubble { top: auto !important; left: 16px !important; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); width: auto; max-height: 60vh; }
.tour-docked .tour-btns .btn { min-height: 2.6rem; }

/* Fades in (✨ Subtle too); nothing at Off or with Reduce motion. */
html[data-fx="full"] .tour, html[data-fx="subtle"] .tour { animation: tour-in .18s ease-out; }
@keyframes tour-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .tour, .tour *, .tour *::before, .tour *::after { animation: none !important; transition: none !important; }
}