/* assets/css/features/demo_limit.css — MYC-6 */

.demo-limit-pill {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3500;                 /* above content, below the tour (4000) */
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 40px;
  background: var(--myceo-surface-2);
  border: 1px solid var(--myceo-border-mid);
  color: var(--myceo-text-primary);
  font-size: 13px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.demo-limit-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.demo-limit-label,
.demo-limit-q { color: var(--myceo-text-dim); font-size: 12px; }

/* The last five minutes. The wording changes too - colour alone would leave
   the warning invisible to anyone who cannot separate these two hues. */
.demo-limit-pill.is-low { border-color: var(--myceo-status-warning); }
.demo-limit-pill.is-low .demo-limit-time { color: var(--myceo-status-warning); }

.demo-ended {
  position: fixed;
  inset: 0;
  /* Above the analyst widget (9500), not merely above the tour (4002). At
     5000 the Scarlett avatar floated on top of the "demo has ended" card,
     inviting a click on the one thing that had just been switched off. */
  z-index: 9600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 7, 10, 0.92);
  backdrop-filter: blur(6px);
}

.demo-ended-card {
  max-width: 460px;
  width: 100%;
  text-align: center;
  background: var(--myceo-surface-1);
  border: 1px solid var(--myceo-border-mid);
  border-radius: 16px;
  padding: 40px 32px;
}

.demo-ended-mark { width: 56px; height: 56px; margin-bottom: 20px; }

.demo-ended-card h2 {
  font-family: var(--myceo-font-display);
  font-size: 26px;
  margin: 0 0 12px;
  color: var(--myceo-text-primary);
}

.demo-ended-card p {
  color: var(--myceo-text-dim);
  line-height: 1.6;
  margin: 0 0 24px;
  font-size: 14px;
}

.demo-ended-cta {
  display: inline-block;
  text-decoration: none;
  background: var(--myceo-text-primary);
  color: var(--myceo-bg-core);
  padding: 13px 28px;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 500;
}

/* Secondary to the CTA, but a real button rather than a link — it performs an
   action, and dressing it as text would hide the one control that tells us
   somebody wants to keep going. */
.demo-ended-more {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: 1px solid var(--myceo-border, rgba(255, 255, 255, 0.18));
  color: var(--myceo-text-primary);
  padding: 11px 24px;
  border-radius: 40px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}

.demo-ended-more:disabled {
  cursor: default;
  color: var(--myceo-text-dim);
  border-color: transparent;
}

.demo-ended-out {
  display: block;
  margin: 16px auto 0;
  background: none;
  border: none;
  color: var(--myceo-text-dim);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .demo-ended { backdrop-filter: none; }
}

/* The end of the demo inside Scarlett's panel (MYC-35).
   Deliberately NOT .aw-error red: running out of questions is the designed
   end of a demo, and colouring it as a fault undercuts the ask that follows. */
.aw-demo-finished p { margin: 0 0 10px; }
.aw-demo-finished p:last-child { margin-bottom: 0; }
.aw-book {
  display: inline-block;
  text-decoration: none;
  border-color: var(--myceo-accent, #7DD3FC);
  color: var(--myceo-accent, #7DD3FC);
}

/* Occupancy, beside the two limits it belongs with (MYC-48). Same treatment
   as the question counter: this is context, not a warning. */
.demo-limit-users { color: var(--myceo-text-dim); font-size: 12px; }

/* The waiting room reuses .demo-ended and .demo-ended-card wholesale — a
   second full-screen treatment would be a second thing to keep in step. Only
   the secondary line needs anything of its own. */
.demo-wait-note {
  color: var(--myceo-text-dim);
  font-size: 13px;
  margin-top: -4px;
}