/* The guided tours of the Demo section's apps (V1.61, Client\Tours\AppTours.cs): the Tour button of the app bar, the offer of a
   first visit (Shared\TourHost.razor) and the spotlight and card drawn by tours.js. Light and dark through the theme's
   variables (app.css). */

.tour-start { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; padding: 3px 10px; border: 1px solid var(--accent);
  border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong, var(--accent)); font: inherit; font-size: 0.8rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; }
.tour-start:hover { background: var(--os-accent-fill); color: var(--os-on-accent-fill); }
.tour-start .mud-icon-root { width: 16px; height: 16px; font-size: 16px; }

.tour-offer { position: fixed; right: 20px; bottom: 20px; z-index: 1400; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  max-width: 420px; padding: 14px 16px; border: 1px solid var(--rule); border-left: 4px solid var(--accent); border-radius: 12px;
  background: var(--panel); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); animation: tour-in 0.25s ease-out; }
.tour-offer-icon { color: var(--accent); }
.tour-offer-text { display: flex; flex: 1 1 220px; flex-direction: column; gap: 2px; font-size: 0.88rem; }
.tour-offer-actions { display: flex; flex: 1 1 100%; justify-content: flex-end; gap: 6px; }

/* A tall target scrolled to its top stays under the top bar and the app bar */
[data-tour] { scroll-margin-top: 130px; }

.tour-shade { position: fixed; z-index: 1500; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(20, 18, 12, 0.55);
  outline: 2px solid var(--accent); pointer-events: none; transition: left 0.25s, top 0.25s, width 0.25s, height 0.25s; }
.tour-shade.tour-shade-full { inset: 0; border-radius: 0; outline: 0; box-shadow: none; background: rgba(20, 18, 12, 0.55); }

.tour-card { position: fixed; z-index: 1501; width: min(380px, calc(100vw - 24px)); padding: 14px 16px 12px; border-radius: 12px;
  background: var(--panel); color: var(--text, inherit); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3); transition: left 0.25s, top 0.25s;
  animation: tour-in 0.2s ease-out; }
.tour-card.tour-card-center { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); }
.tour-card.tour-waiting { opacity: 0.85; }
.tour-head { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.02em; color: var(--muted); }
.tour-app { color: var(--accent); text-transform: uppercase; }
.tour-count { margin-left: auto; }
.tour-close { width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.2rem; line-height: 1;
  cursor: pointer; }
.tour-close:hover { background: var(--chip); }
.tour-bar { height: 3px; margin: 8px 0 10px; border-radius: 3px; background: var(--chip); overflow: hidden; }
.tour-fill { height: 100%; background: var(--accent); transition: width 0.25s; }
.tour-title { margin: 0 0 6px; font-size: 1.02rem; }
.tour-text { margin: 0 0 12px; font-size: 0.9rem; line-height: 1.5; }
.tour-actions { display: flex; justify-content: flex-end; gap: 8px; }
.tour-actions button { padding: 6px 14px; border-radius: 8px; font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; }
.tour-back { border: 1px solid var(--rule); background: transparent; color: inherit; }
.tour-next { border: 0; background: var(--os-accent-fill); color: var(--os-on-accent-fill); }
.tour-next:focus-visible, .tour-back:focus-visible, .tour-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@keyframes tour-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tour-shade, .tour-card, .tour-fill, .tour-offer { transition: none; animation: none; } }
@media (max-width: 640px) { .tour-start span { display: none; } .tour-offer { right: 10px; left: 10px; max-width: none; } }