/* public/assets/creator.css — PREMIUM CREATOR SHELL
   =====================================================================
   World-class SaaS creator flow for the tool/hub pages. Scoped under
   `body.ct-create` so it never touches admin, activity, or marketing
   pages. Matches the home page / /tools gallery language (aurora wash,
   gradient hero, premium surfaces, shared footer) and adds a two-pane
   "app" layout: form on the left, a sticky live preview on the right.

   Preserves every functional class, id, and JS contract used by
   CT.creator / CT.preview. The DOM order is unchanged; the two-pane
   layout is achieved purely with CSS grid placement, so on mobile the
   page gracefully falls back to the original single-column order
   (form → live preview → action → result).

   SlotLink ships its own bespoke card system (single card with numbered
   internal sections). Universal upgrades (aurora, hero, footer, buttons,
   two-pane grid, action, result) apply to it too; the finer surface and
   form refinements are guarded behind :not(.slot-creator) so slot's
   custom design is never overridden.

   Load order: ui.css → /{tool}/style.css → creator.css (this file).
   ===================================================================== */

/* ====================================================================
   1. AMBIENT — aurora wash (matches home / tools)
   ==================================================================== */
html { background: var(--bg); }

body.ct-create {
  background: transparent;
  position: relative;
}
body.ct-create::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: min(1100px, 130vh);
  background:
    radial-gradient(1000px 560px at 14% -10%,
      rgba(99, 102, 241, 0.13) 0%,
      rgba(99, 102, 241, 0.075) 32%,
      rgba(99, 102, 241, 0.03) 56%,
      rgba(99, 102, 241, 0.01) 74%,
      transparent 92%),
    radial-gradient(880px 500px at 90% -6%,
      rgba(168, 85, 247, 0.09) 0%,
      rgba(168, 85, 247, 0.05) 34%,
      rgba(168, 85, 247, 0.018) 60%,
      transparent 86%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

/* ====================================================================
   2. SHELL — dissolve the boxed card; widen for the two-pane layout
   ==================================================================== */
body.ct-create main,
body.ct-create main.slot-main {
  max-width: clamp(640px, 95vw, 1140px);
  margin: var(--space-4) auto var(--space-6);
  padding: 1.25rem 1.25rem 2rem;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
@media (max-width: 640px) {
  body.ct-create main,
  body.ct-create main.slot-main { padding: 0.5rem 0.85rem 1.5rem; }
}

/* ====================================================================
   3. HERO — centered, reuses .page-header markup
   ==================================================================== */
body.ct-create .page-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  margin: 0 auto 1.6rem;
  padding: 2.5rem 0 0.5rem;
  max-width: 660px;
  background: none;
  border: 0;
}
@media (max-width: 640px) {
  body.ct-create .page-header { padding: 1.5rem 0 0.25rem; gap: 12px; }
}

/* Eyebrow → glassy pill chip */
body.ct-create .page-header-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 14px 6px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--ring));
  background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
  color: color-mix(in srgb, var(--accent) 82%, var(--text));
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
}
body.ct-create .page-header-eyebrow-icon { font-size: 1.05rem; line-height: 1; }

body.ct-create .page-header-title {
  display: block;
  margin: 0;
  text-transform: none;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.04;
  font-size: clamp(2.1rem, 3.4vw + 1.1rem, 3.2rem);
  text-wrap: balance;
  background: linear-gradient(168deg,
    var(--text) 32%,
    color-mix(in srgb, var(--text) 58%, var(--accent)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.ct-create .page-header-desc {
  margin: 0 auto;
  max-width: 52ch;
  font-size: 1.08rem;
  font-weight: 440;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

/* ====================================================================
   4. TWO-PANE LAYOUT — form column + sticky live-preview column
   The .cr-grid wrapper holds the existing section-cards in source order
   (form, preview, action, result). Grid placement pulls the preview to
   the right rail; everything else stacks in the left rail.
   ==================================================================== */
body.ct-create .cr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr);
  gap: 18px 30px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}
/* Left rail by default; kill the stacked margins (grid gap owns spacing) */
body.ct-create .cr-grid > * {
  grid-column: 1;
  margin: 0;
}
/* Right rail: the live preview, pinned while the form scrolls */
body.ct-create .cr-grid > #draftPreviewSection {
  grid-column: 2;
  position: sticky;
  top: 84px;
  align-self: start;
}

@media (max-width: 940px) {
  body.ct-create .cr-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 620px;
  }
  body.ct-create .cr-grid > #draftPreviewSection {
    grid-column: 1;
    position: static;
  }
}

/* ====================================================================
   5. SURFACES — premium section cards (guarded away from slot's cards)
   ==================================================================== */
body.ct-create:not(.slot-creator) .section-card {
  position: relative;
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--ring) 90%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, transparent) 0%, var(--card) 100%);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 22px 48px -30px rgba(15, 23, 42, 0.22);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--t), box-shadow var(--t);
}
/* top hairline glow */
body.ct-create:not(.slot-creator) .section-card::after {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 50%, transparent), transparent);
  opacity: 0;
  transition: opacity var(--t);
}
body.ct-create:not(.slot-creator) .section-card:hover { transform: none; }
body.ct-create:not(.slot-creator) .section-card:focus-within {
  border-color: color-mix(in srgb, var(--accent) 26%, var(--ring));
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 26px 54px -30px color-mix(in srgb, var(--accent) 26%, rgba(15, 23, 42, 0.3));
}
body.ct-create:not(.slot-creator) .section-card:focus-within::after { opacity: 1; }

body.ct-create:not(.slot-creator) .section-card > h2:not(.preview-hero-title) {
  margin-top: 0;
  font-size: 1.16rem;
  font-weight: 720;
  letter-spacing: -0.02em;
}

/* ====================================================================
   6. LIVE PREVIEW — one consistent card across every tool
   Every tool renders an identical preview header: a pulsing green
   "live" dot + uppercase "LIVE PREVIEW" label on a hairline-divided
   header bar, then the draft card on a subtly tinted body. SlotLink
   already ships this structure via its own markup; here the other 8
   tools are brought in line, and the shared label tokens are pinned so
   the heading is pixel-consistent whether it is an <h2> (8 tools) or
   slot's <span> eyebrow.
   ==================================================================== */

/* Non-slot tools: convert the floating h2 + wrap into slot's head/body
   model (flat card -> divided header bar -> tinted preview body). */
body.ct-create:not(.slot-creator) .preview-hero {
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  background: var(--card);
}
body.ct-create:not(.slot-creator) .preview-hero-title {
  margin: 0;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ring);
}
body.ct-create:not(.slot-creator) .previewWrap-hero {
  margin: 0;
  padding: 18px;
  background: color-mix(in srgb, var(--accent) 4%, var(--card-soft));
}

/* Shared "LIVE PREVIEW" label tokens — identical for the <h2> heading
   and slot's eyebrow so the wording, color, size, tracking, and the
   pulsing green dot all match across tools. */
body.ct-create .preview-hero-title,
body.ct-create .slot-preview-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--success);
}

/* ====================================================================
   7. PRIMARY ACTION — de-card the action section, big gradient button
   ==================================================================== */
body.ct-create .cr-grid > .section-card:has(.btn-row) {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
body.ct-create .cr-grid > .section-card:has(.btn-row)::after { display: none; }
body.ct-create .cr-grid > .section-card:has(.btn-row):focus-within { box-shadow: none; border: 0; }
body.ct-create .btn-row { margin-top: 0 !important; }
body.ct-create .btn-row > .btn-primary {
  flex: 1;
  width: 100%;
  padding: 0.95rem 1.5rem;
  font-size: 1.02rem;
  border-radius: 15px;
}

/* Gradient primary button (matches home s-btn-primary) */
body.ct-create .btn-primary {
  border: 0;
  border-radius: 14px;
  font-weight: 680;
  letter-spacing: -0.01em;
  background: linear-gradient(140deg, var(--accent) 0%, #7c5cf0 60%, #8b5cf6 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 10px 24px color-mix(in srgb, var(--accent) 34%, transparent),
    0 2px 6px rgba(15,23,42,.12);
  transition: transform var(--t-fast), box-shadow var(--t), filter var(--t);
}
body.ct-create .btn-primary:hover {
  background: linear-gradient(140deg, var(--accent) 0%, #7c5cf0 60%, #8b5cf6 100%);
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 16px 34px color-mix(in srgb, var(--accent) 42%, transparent),
    0 3px 8px rgba(15,23,42,.14);
}
body.ct-create .btn-primary:active { transform: translateY(0); }

/* Refined ghost / secondary buttons */
body.ct-create .btn-ghost {
  border-radius: 12px;
  border: 1px solid var(--ring);
  background: color-mix(in srgb, var(--card) 70%, transparent);
  font-weight: 620;
  transition: border-color var(--t), background var(--t), transform var(--t-fast), box-shadow var(--t);
}
body.ct-create .btn-ghost:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--ring));
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}

/* ====================================================================
   8. RESULT — hide the empty card until a link is created
   ==================================================================== */
body.ct-create .cr-grid > .section-card:has(> #result.hidden) {
  display: none;
}
/* Once visible, give the success state room to breathe */
body.ct-create .result-success-banner {
  border-radius: 14px;
  padding: 12px 16px;
}

/* ====================================================================
   9. FORM REFINEMENTS (simple pages only — slot has its own rhythm)
   ==================================================================== */
body.ct-create:not(.slot-creator) label > span:first-child {
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: -0.005em;
  color: var(--text);
}
body.ct-create:not(.slot-creator) .section-card input:not([type="checkbox"]),
body.ct-create:not(.slot-creator) .section-card select,
body.ct-create:not(.slot-creator) .section-card textarea {
  border-radius: 12px;
  background: color-mix(in srgb, var(--card-soft) 70%, var(--card));
  border: 1px solid color-mix(in srgb, var(--ring) 92%, transparent);
  padding: 12px 14px;
}
body.ct-create:not(.slot-creator) .section-card input:not([type="checkbox"]):focus,
body.ct-create:not(.slot-creator) .section-card select:focus,
body.ct-create:not(.slot-creator) .section-card textarea:focus {
  background: var(--card);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
body.ct-create:not(.slot-creator) .field-group-label {
  font-size: 0.9rem;
  font-weight: 600;
}

/* Share / admin URL rows — monospace, filled */
body.ct-create .url-copy-row input[readonly] {
  border-radius: 12px;
  background: var(--card-soft);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9rem;
}

/* ====================================================================
   10. FOOTER (injected by ct-html-core via [data-ct-footer])
   ==================================================================== */
/* .ct-foot-* (the injected shared footer) styles moved to ui.css so pages
   that load only ui.css — the trust/info pages (FAQ, Privacy, …) — can use
   the same injected footer. Creator pages still get them via ui.css. */

@media (prefers-reduced-motion: reduce) {
  body.ct-create .section-card,
  body.ct-create .btn-primary,
  body.ct-create .btn-ghost { transition: none !important; }
}