/* ============================================================
   orbita:tour - guided tour and "What's new" dialog
   app/static/js/tour.js draws both; the markup lives in
   app/templates/components/tour.html and neuheit_dialog.html.
   ============================================================ */

:root {
  --z-tour: 1100;          /* above the drawer and the modals, below dropdowns and toasts */
  --tour-dim: rgba(6, 16, 41, 0.58);
}

/* ── Tour: the dimmed page with a cut-out ─────────────────── */

.tour { position: fixed; inset: 0; z-index: var(--z-tour); pointer-events: none; transition: opacity 220ms ease; }
/* after a page change: invisible and without movement until the place has
   settled, then one fade (tour.js ankommen) */
.tour--ankunft { opacity: 0; }
.tour--ankunft .tour-spot, .tour--ankunft .tour-card { transition: none !important; animation: none !important; }
.tour[hidden] { display: none; }

/* The spotlight is one box; its huge shadow darkens everything around it,
   so moving the box moves the hole. Two inner rings give the edge its
   softness, the outer blur keeps the cut from looking punched. */
.tour-spot {
  position: fixed;
  top: 50%; left: 50%; width: 0; height: 0;
  border-radius: 14px;
  pointer-events: none;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.95),
    0 0 0 6px rgba(42, 91, 255, 0.32),
    0 0 36px 10px rgba(6, 16, 41, 0.28),
    0 0 0 200vmax var(--tour-dim);
  transition:
    top 360ms var(--ease-out), left 360ms var(--ease-out),
    width 360ms var(--ease-out), height 360ms var(--ease-out),
    border-radius 360ms var(--ease-out), opacity 200ms ease;
  animation: tourFade 220ms ease both;
}
.tour-spot::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: inherit;
  border: 2px solid rgba(76, 215, 255, 0.55);
  opacity: 0;
  animation: tourPulse 2.4s var(--ease-out) 600ms infinite;
}
/* A card in the middle: no hole, only the dim. */
.tour--mitte .tour-spot { width: 0; height: 0; box-shadow: 0 0 0 200vmax var(--tour-dim); }
.tour--mitte .tour-spot::after { display: none; }

/* Clicks outside the cut-out are caught; four panes leave the hole free when
   the step lets the customer click the place itself. */
.tour-shield { position: fixed; pointer-events: auto; background: transparent; }
.tour-lid { position: fixed; pointer-events: auto; background: transparent; cursor: default; }
.tour--klick .tour-lid { display: none; }

/* ── Tour: the card ───────────────────────────────────────── */

.tour-card {
  position: fixed;
  top: 0; left: 0;
  width: min(380px, calc(100vw - 24px));
  pointer-events: auto;
  background: var(--card);
  border: 1px solid rgba(232, 236, 245, 0.9);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(15, 27, 61, 0.06), 0 24px 60px -18px rgba(6, 16, 41, 0.45),
              0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  padding: 20px 20px 18px;
  color: var(--text);
  transform-origin: var(--tour-origin, 50% 0%);
  transition: top 360ms var(--ease-out), left 360ms var(--ease-out);
}
.tour-card:focus { outline: none; }
.tour-card:focus-visible { box-shadow: 0 0 0 3px var(--ring), 0 24px 60px -18px rgba(6, 16, 41, 0.45); }
.tour-card.is-in { animation: tourZoomIn 200ms var(--ease-out) both; }
.tour-card.is-out { animation: tourZoomOut 180ms ease both; }
.tour-card.is-swap .tour-card-inner { animation: tourSwap 240ms var(--ease-out) both; }

.tour-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tour-count {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--blue-600);
  font-variant-numeric: tabular-nums;
}
.tour-close {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  color: var(--text-dim); cursor: pointer; flex-shrink: 0;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.tour-close:hover { background: var(--slate-100); color: var(--text); }
.tour-close svg { width: 16px; height: 16px; }

.tour-title {
  font-family: var(--font-display);
  font-size: 1.18rem; line-height: 1.32; font-weight: 600; letter-spacing: -0.015em;
  margin: 0 0 6px;
  overflow-wrap: anywhere;
}
.tour-text { font-size: 0.95rem; line-height: 1.6; color: var(--slate-700); margin: 0; overflow-wrap: break-word; }

.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.tour-dots { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0; }
.tour-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--slate-200);
  transition: width 260ms var(--ease-out), background 200ms ease;
}
.tour-dot.is-done { background: var(--blue-200); }
.tour-dot.is-on { width: 18px; background: linear-gradient(90deg, var(--blue-600), var(--cyan-500)); }
.tour-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tour-actions .btn { height: 38px; }
.tour-actions .btn-primary { min-width: 96px; }
.tour-actions [hidden] { display: none; }

/* The welcome card: a mark on top, a little wider, centred. */
.tour-hero {
  display: none;
  width: 56px; height: 56px; border-radius: 16px;
  margin-bottom: 14px;
  place-items: center;
  color: #fff;
  background: linear-gradient(140deg, var(--blue-500), var(--blue-700) 55%, var(--cyan-500));
  box-shadow: 0 12px 28px -10px rgba(42, 91, 255, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  animation: floatY 4s ease-in-out infinite;
}
.tour-hero svg { width: 28px; height: 28px; }
.tour--mitte .tour-card { width: min(440px, calc(100vw - 24px)); padding: 28px 26px 22px; }
.tour--mitte .tour-hero { display: grid; }
.tour--mitte .tour-title { font-size: 1.45rem; }

.tour-skip {
  display: none;
  margin-top: 12px;
  font-size: 0.875rem; font-weight: 600; color: var(--text-muted);
  cursor: pointer;
}
.tour-skip:hover { color: var(--text); }
.tour--mitte .tour-skip { display: inline-block; }

/* Phones: the card docks to the bottom edge, the place stays visible above. */
@media (max-width: 640px) {
  html.tour-platz body { padding-bottom: 50vh; }
  .tour-card,
  .tour--mitte .tour-card {
    top: auto !important;
    left: 12px !important; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: auto;
    padding: 18px 18px 16px;
    border-radius: 18px;
    transform-origin: 50% 100%;
    transition: none;
  }
  .tour--mitte .tour-card { padding: 22px 20px 18px; }
  .tour--mitte .tour-title { font-size: 1.3rem; }
  .tour-title { font-size: 1.1rem; }
  .tour-text { font-size: 0.94rem; }
  .tour-actions .btn-primary { min-width: 88px; }
}

@keyframes tourFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tourZoomIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes tourZoomOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } }
@keyframes tourSwap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes tourPulse {
  0% { opacity: 0.9; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.06); }
}

/* ── Top bar: the Tutorial button ─────────────────────────── */

.topbar-tutorial { cursor: pointer; font-family: var(--font-sans); }
.topbar-tutorial svg { color: var(--blue-600); }
@media (max-width: 640px) {
  .topbar-tutorial { width: 38px; padding: 0; justify-content: center; }
  .topbar-tutorial span { display: none; }
}
/* One more button in the bar: on a narrow phone the page title kept only
   "Dashbo…". Tighter gaps and 36 px buttons give it its word back. */
@media (max-width: 420px) {
  .topbar { gap: 10px; padding-right: 14px; }
  .topbar-actions { gap: 5px; }
  .topbar-actions .topbar-icon, .topbar-tutorial { width: 36px; height: 36px; }
  .topbar-actions .topbar-pill { height: 36px; padding: 0 8px; }
  .topbar-actions .avatar { width: 32px; height: 32px; }
}

/* ── "What's new": the dialog ─────────────────────────────── */

.nh-overlay {
  position: fixed; inset: 0;
  z-index: var(--z-tour);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(6, 16, 41, 0.62);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  animation: tourFade 200ms ease both;
}
.nh-overlay[hidden] { display: none; }
.nh-overlay.is-closing { animation: fadeOut 200ms ease both; }
.nh-overlay.is-closing .nh-dialog { animation: tourZoomOut 200ms ease both; }

.nh-dialog {
  position: relative;
  width: 100%; max-width: 560px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--card);
  border-radius: 24px;
  box-shadow: 0 2px 4px rgba(6, 16, 41, 0.08), 0 40px 100px -30px rgba(6, 16, 41, 0.65);
  animation: tourZoomIn 200ms var(--ease-out) both;
}
.nh-dialog:focus { outline: none; }
.nh-dialog.is-swap { animation: tourSwap 260ms var(--ease-out) both; }

.nh-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(150deg, var(--navy-900), var(--navy-700) 55%, var(--blue-600));
  isolation: isolate;
}
.nh-media video, .nh-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.nh-media video[hidden], .nh-media img[hidden], .nh-illu[hidden] { display: none; }
/* a soft fade into the white body, so the media and the text read as one */
.nh-media::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 28%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.16));
  pointer-events: none;
  z-index: 2;
}
.nh-close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 36px; height: 36px; border-radius: 12px;
  display: grid; place-items: center;
  color: #fff;
  background: rgba(6, 16, 41, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: background var(--dur-fast) ease;
}
.nh-close:hover { background: rgba(6, 16, 41, 0.62); }
.nh-close svg { width: 16px; height: 16px; }

.nh-body { padding: 24px 28px 26px; }
.nh-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px 0 8px;
  border-radius: 999px;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--blue-700);
  background: linear-gradient(90deg, var(--blue-50), var(--cyan-100));
  border: 1px solid var(--blue-100);
}
.nh-badge svg { width: 14px; height: 14px; color: var(--blue-600); }
.nh-title {
  font-family: var(--font-display);
  font-size: 1.6rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.025em;
  margin: 14px 0 8px;
  overflow-wrap: anywhere;
}
.nh-text { font-size: 1rem; line-height: 1.65; color: var(--slate-700); margin: 0; white-space: pre-line; overflow-wrap: break-word; }
.nh-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.nh-actions .btn-lg { border-radius: 999px; padding: 0 26px; }
.nh-actions .btn-primary.btn-lg { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 4px rgba(42, 91, 255, 0.3), 0 14px 30px -10px rgba(42, 91, 255, 0.8); }
.nh-actions .btn-ghost { height: 48px; }
.nh-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nh-pager { font-size: 0.875rem; font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.nh-pager[hidden] { display: none; }
.nh-preview-note {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.875rem; font-weight: 600;
  color: var(--warning-foreground); background: var(--warning-soft);
}
.nh-preview-note svg { width: 15px; height: 15px; flex-shrink: 0; }
.nh-preview-note[hidden] { display: none; }

@media (max-width: 640px) {
  .nh-overlay { padding: 12px; align-items: flex-end; }
  .nh-dialog { border-radius: 22px; max-height: calc(100dvh - 24px); }
  .nh-media { border-radius: 22px 22px 0 0; }
  .nh-body { padding: 20px 20px 22px; }
  .nh-title { font-size: 1.35rem; }
  .nh-text { font-size: 0.97rem; }
  .nh-actions { flex-direction: column-reverse; align-items: stretch; margin-top: 20px; }
  .nh-actions .btn { width: 100%; }
}

/* ── "What's new": the animated illustration ──────────────── */
/* A small portal window: cards float, a spotlight ring travels between them.
   Pure CSS, so an announcement without a video still has a moving picture. */

.nh-illu { position: absolute; inset: 0; overflow: hidden; }
.nh-illu::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(40% 50% at 20% 20%, rgba(76, 215, 255, 0.35), transparent 70%),
    radial-gradient(45% 55% at 85% 90%, rgba(74, 116, 255, 0.45), transparent 70%);
  animation: drift 14s ease-in-out infinite;
}
.nh-illu-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
}
.nh-illu-win {
  position: absolute; left: 14%; right: 14%; top: 16%; bottom: 10%;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.nh-illu-bar { position: absolute; left: 0; right: 0; top: 0; height: 13%; background: #F3F5FA; border-bottom: 1px solid #E8ECF5; }
.nh-illu-bar i { position: absolute; top: 38%; width: 7px; height: 7px; border-radius: 50%; background: #D8DEEC; }
.nh-illu-bar i:nth-child(1) { left: 4%; } .nh-illu-bar i:nth-child(2) { left: 7%; } .nh-illu-bar i:nth-child(3) { left: 10%; }
.nh-illu-side { position: absolute; left: 0; top: 13%; bottom: 0; width: 22%; background: #FBFCFE; border-right: 1px solid #E8ECF5; }
.nh-illu-side b { position: absolute; left: 14%; right: 14%; height: 6%; border-radius: 4px; background: #E6EAF4; }
.nh-illu-side b:nth-child(1) { top: 10%; background: #E2EAFF; } .nh-illu-side b:nth-child(2) { top: 22%; }
.nh-illu-side b:nth-child(3) { top: 34%; } .nh-illu-side b:nth-child(4) { top: 46%; }
.nh-illu-card {
  position: absolute; border-radius: 9px;
  background: #fff; border: 1px solid #E8ECF5;
  box-shadow: 0 6px 16px -10px rgba(15, 27, 61, 0.35);
  animation: floatY 5s ease-in-out infinite;
}
.nh-illu-card::before { content: ""; position: absolute; left: 12%; top: 22%; width: 22%; height: 22%; border-radius: 5px; background: #E2EAFF; }
.nh-illu-card::after { content: ""; position: absolute; left: 12%; right: 30%; bottom: 22%; height: 12%; border-radius: 3px; background: #E6EAF4; }
.nh-illu-card.c1 { left: 27%; top: 22%; width: 31%; height: 30%; }
.nh-illu-card.c2 { left: 63%; top: 22%; width: 31%; height: 30%; animation-delay: -1.6s; }
.nh-illu-card.c3 { left: 27%; top: 58%; width: 67%; height: 34%; animation-delay: -3.2s; }
.nh-illu-card.c3::before { background: #DDF6FF; }
.nh-illu-spot {
  position: absolute;
  width: 34%; height: 36%;
  border-radius: 12px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(42, 91, 255, 0.55), 0 0 0 999px rgba(6, 16, 41, 0.38);
  animation: nhSpot 9s var(--ease-inout) infinite;
}
@keyframes nhSpot {
  0%, 22%   { left: 25.5%; top: 19%; width: 34%; height: 36%; }
  33%, 55%  { left: 61.5%; top: 19%; width: 34%; height: 36%; }
  66%, 88%  { left: 25.5%; top: 55%; width: 70%; height: 40%; }
  100%      { left: 25.5%; top: 19%; width: 34%; height: 36%; }
}

@media (prefers-reduced-motion: reduce) {
  .tour-spot, .tour-card { transition: none; }
  .tour-spot::after { animation: none; }
  .nh-illu-spot, .nh-illu-card, .nh-illu::before, .tour-hero { animation: none; }
}

/* ── Tour: where am I (Noah, 08.10.2026) ──────────────────── */

/* A copy of the active menu entry above the dim: the tour changes pages by
   itself, and the dimmed menu would not tell which page it opened. */
.tour-ort {
  position: fixed;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 11px;
  background: #fff;
  color: var(--navy-900);
  font-weight: 700; font-size: 0.9rem; line-height: 1.2;
  white-space: nowrap; overflow: hidden;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 5px rgba(42, 91, 255, 0.38),
              0 12px 30px -10px rgba(6, 16, 41, 0.5);
  animation: tourFade 220ms ease both;
}
.tour-ort[hidden] { display: none; }
.tour-ort .icon { width: 20px; height: 20px; display: inline-grid; place-items: center; flex-shrink: 0; color: var(--blue-600); }
.tour-ort .icon svg { width: 18px; height: 18px; }
.tour-ort-tag {
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--blue-600);
  color: #fff;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* The page name next to the step count. */
.tour-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.tour-wo {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: var(--blue-50);
  color: var(--navy-900);
  font-size: 0.8rem; font-weight: 700;
  max-width: 100%; min-width: 0;
}
.tour-wo[hidden] { display: none; }
.tour-wo svg { width: 14px; height: 14px; color: var(--blue-600); flex-shrink: 0; }
.tour-wo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Phone and tablet: where in the menu drawer the page of the step is. */
.tour-weg {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--blue-50);
  color: var(--navy-900);
  font-size: 0.85rem; font-weight: 700; line-height: 1.35;
}
.tour-weg[hidden] { display: none; }
.tour-weg svg { width: 16px; height: 16px; color: var(--blue-600); flex-shrink: 0; }