/* ForecastsPro live demo (demo.forecastspro.com): the banner and the few adjustments the
   demo makes to the real app. Loaded only by the demo server (app/demo/server.py), after
   the app's own stylesheets. Colours come from the tokens only (one shade per colour). */

:root { --demo-bar-h: 44px; }

/* ---- The banner: always visible, above the app's sticky top bar ------------------------- */
.demo-bar {
  position: sticky; top: 0; z-index: 35;
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 44px;
  padding: 6px max(var(--space-4), env(safe-area-inset-right)) 6px max(var(--space-4), env(safe-area-inset-left));
  background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--bg-deepest);
  color: var(--text-default);
  font-size: var(--text-sm); line-height: 1.35;
}
.demo-pill {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  border-radius: var(--radius-pill);
  background: var(--accent); color: #fff;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
}
.demo-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: demo-pulse 2s var(--ease) infinite;
}
@keyframes demo-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .demo-pill::before { animation: none; } }
.demo-bar-text { flex: 1; min-width: 0; margin: 0; color: var(--text-default); }
.demo-bar-text strong { color: var(--text-primary); font-weight: 650; }
.demo-bar-actions { flex: none; display: flex; align-items: center; gap: var(--space-2); }
.demo-bar-actions .btn { white-space: nowrap; }
.demo-short { display: none; }

/* The app's sticky parts sit under the banner. */
.demo-on .topbar { top: var(--demo-bar-h); }
.demo-on .run-progress { top: calc(var(--topbar-h) + var(--demo-bar-h)); }
.demo-on .card, .demo-on [id^="section-"] { scroll-margin-top: calc(var(--topbar-h) + var(--demo-bar-h) + var(--space-4)); }
@media (min-width: 961px) {
  .demo-on .sidebar { top: var(--demo-bar-h); height: calc(100vh - var(--demo-bar-h)); height: calc(100dvh - var(--demo-bar-h)); }
  .demo-on .shell { min-height: calc(100dvh - var(--demo-bar-h)); }
}
@media (min-width: 1181px) {
  .demo-on .grid-main > :last-child { top: calc(var(--topbar-h) + var(--demo-bar-h) + var(--space-5)); }
}

@media (max-width: 720px) {
  .demo-reset { display: none; }
}
@media (max-width: 600px) {
  .demo-bar { gap: var(--space-2); padding-top: 5px; padding-bottom: 5px; }
  .demo-long { display: none; }
  .demo-short { display: inline; }
}
@media (max-width: 359px) {
  .demo-pill { padding: 0 7px; }
  .demo-pill::before { display: none; }
  .demo-bar-actions .btn { padding: 0 var(--space-2); }
}

/* ---- Notes where the demo differs from your own account ---------------------------------- */
.demo-note {
  margin-top: var(--space-2);
  font-size: var(--text-sm); line-height: 1.45; color: var(--text-muted);
}
.demo-note strong { color: var(--text-default); font-weight: 650; }
.demo-note-block { margin-bottom: var(--space-4); }
.demo-disabled { opacity: 0.55; }

/* The Subscription card becomes the way to your own account. */
#section-subscription > .card-body > :not(.demo-pitch) { display: none; }
.demo-pitch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.demo-pitch p { margin: 0; color: var(--text-muted); max-width: 52ch; }
.demo-pitch strong { display: block; color: var(--text-primary); font-size: var(--text-md); margin-bottom: 4px; }

/* "Run analysis" playing out: the steps of a run. */
.demo-steps {
  list-style: none; margin: var(--space-3) 0 0; padding: 0;
  display: grid; gap: 6px;
  font-size: var(--text-sm); color: var(--text-dim);
}
.demo-steps li { display: flex; align-items: center; gap: 8px; transition: color var(--dur) var(--ease); }
.demo-steps li::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--bg-active);
  transition: background var(--dur) var(--ease);
}
.demo-steps li.done { color: var(--text-muted); }
.demo-steps li.done::before { background: var(--success); }
.demo-steps li.current { color: var(--text-primary); }
.demo-steps li.current::before { background: var(--accent); animation: demo-pulse 1.2s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) { .demo-steps li.current::before { animation: none; } }

/* The analysis card's footer: why the demo shows no estimated cost. */
.meta-list > .demo-usage { display: block; flex-basis: 100%; color: var(--text-muted); line-height: 1.45; }

/* ---- The "busy" page (too many new sessions from one network) --------------------------- */
.demo-busy {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--space-6) var(--space-4);
  background: var(--bg-deepest);
}
.demo-busy-card { width: min(440px, 100%); display: grid; gap: var(--space-3); justify-items: start; }
.demo-busy-card h1 { font-size: var(--text-xl); color: var(--text-primary); }
.demo-busy-card p { color: var(--text-muted); margin: 0; }