/* ============================================================================
   template-preview.css — "/templates/<slug>", the fullscreen template preview.

   Port of the markup in apps/editor/src/pages/TemplatePreviewPage.tsx. Every
   value below was read out of the shipped compiled stylesheet
   (apps/editor/dist/assets/index-R04BI4f-.css), not guessed from the class
   names — see PROJECT.md.

   Note on the opacity utilities here: unlike the dead `/6` and `/8` classes in
   §5.1, `border-white/15` and `hover:border-white/30` DO exist in the compiled
   stylesheet (#ffffff26 and #ffffff4d). Checked, not assumed, because the two
   look identical in the JSX.
   ========================================================================= */

/* `hidden` must outrank the display rules below — Preflight's
   `[hidden]{display:none}` is only (0,1,0), the same weight as a class, and
   this file is emitted after it. Without this the stage would be visible
   while it is still empty (PROJECT.md). */
.tpv [hidden] { display: none; }

/* "relative min-h-screen" + background var(--mk-bg) */
.tpv {
  position: relative;
  min-height: 100vh;
  background: var(--mk-bg);
}

/* ═══ The framed template ══════════════════════════════════════════════════ */

/* "fixed inset-0 flex justify-center overflow-hidden" */
.tpv__stage {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background: var(--mk-bg);
}

/* "h-full border-none bg-white" + width 1440, maxWidth 100vw.
   1440 is the same desktop width the editor canvas frames at. */
.tpv__frame {
  height: 100%;
  border: none;
  background: #fff;
  width: 1440px;
  max-width: 100vw;
}

/* ═══ Loading / failure ════════════════════════════════════════════════════ */

/* "fixed inset-0 flex items-center justify-center" */
.tpv__pending {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* "w-7 h-7 rounded-full border-2 border-slate-700 border-t-blue-500 animate-spin" */
.tpv__spinner {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  border: 2px solid #334155;
  border-top-color: #3b82f6;
  animation: spin 1s linear infinite;
}

/* Tailwind's own keyframes — not in base.css, since no migrated page had
   needed a spinner until now. */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.tpv__failed { text-align: center; }

/* "text-slate-400 text-sm mb-4" */
.tpv__failed-text {
  color: #94a3b8;
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-bottom: 1rem;
}

/* "text-blue-400 hover:text-blue-300 text-sm font-semibold" */
.tpv__failed-link {
  color: #60a5fa;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-decoration: none;
}
.tpv__failed-link:hover { color: #93c5fd; }

/* ═══ Overlay chrome ═══════════════════════════════════════════════════════
   Both overlays fade out after a second of quiet and return on any activity;
   `.is-hidden` is the migrated form of "opacity-0 pointer-events-none".
   `transition-all duration-500`, with the transform excluded while dragging
   (an animated transform lags visibly behind the pointer). */

.tpv-back,
.tpv-cta {
  position: fixed;
  z-index: 10;
  transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
  cursor: grab;
  touch-action: none;
}
.tpv-back.is-dragging,
.tpv-cta.is-dragging {
  transition-property: none;
  cursor: grabbing;
}
.tpv-back.is-hidden,
.tpv-cta.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ── Back pill ───────────────────────────────────────────────────────────────
   "inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold
    text-white border border-white/15 hover:border-white/30" */
.tpv-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: #fff;
  border: 1px solid #ffffff26;
  font-family: inherit;
  background: rgba(25, 26, 27, 0.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.tpv-back:hover { border-color: #ffffff4d; }

/* Per-template relocations. The default top/left comes from an inline style,
   because those values are a numeric dial rather than a fixed bucket. */
.tpv-back--lowered    { top: 6rem; left: 1rem; }     /* top-24 left-4 */
.tpv-back--top-right  { top: 1rem; right: 1rem; }    /* top-4 right-4 */
/* left-1/2 plus the half-width pull-back. The original applies that pull-back
   inline so it can compose with the drag offset (see overlayTransform); here
   it starts in CSS so the overlay is correctly placed before the module script
   has run, and the drag handler overwrites the whole property afterwards. */
.tpv-back--top-center { top: 1rem; left: 50%; transform: translateX(-50%); }

/* ── CTA bar ─────────────────────────────────────────────────────────────────
   "flex items-center gap-4 pl-5 pr-2.5 py-2.5 rounded-xl border
    border-white/15 max-w-[calc(100vw-2rem)]" + "bottom-6 left-1/2" */
.tpv-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 0.625rem 0.625rem 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid #ffffff26;
  max-width: calc(100vw - 2rem);
  background: rgba(25, 26, 27, 0.92);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
}
.tpv-cta--corner { bottom: 1.25rem; right: 1.25rem; left: auto; transform: none; }
.tpv-cta--raised { bottom: 4rem; left: 50%; }

/* "min-w-0 hidden sm:block" — the label is dropped on narrow screens so the
   bar stays inside max-w-[calc(100vw-2rem)]. */
.tpv-cta__text {
  min-width: 0;
  display: none;
}
@media (min-width: 640px) {
  .tpv-cta__text { display: block; }
}

/* "text-white text-sm font-semibold truncate" */
.tpv-cta__name {
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* "text-slate-500 text-xs truncate" */
.tpv-cta__hint {
  color: #64748b;
  font-size: 0.75rem;
  line-height: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "flex-shrink-0 px-5 py-2.5 rounded-lg text-sm font-bold text-white
    transition-transform hover:scale-[1.03] active:scale-[0.98]".
   The scale utilities are written out directly rather than through Tailwind's
   --tw-* transform chain, which this migration deliberately does not carry
   (§5.7). The rendered result is the same; the computed string is shorter. */
.tpv-cta__button {
  flex-shrink: 0;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: #fff;
  font-family: inherit;
  border: 0 solid #e5e7eb;
  cursor: pointer;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 0 24px rgba(99, 102, 241, 0.45);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tpv-cta__button:hover { transform: scale(1.03); }
.tpv-cta__button:active { transform: scale(0.98); }