/* ── Marketing previews (scenes used by js/periodic/mkt.js) ── */

/* Campaigns */
.pv-board { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; }
.pv-colm { min-height: 7.2em; padding: .6em; border-radius: .55em; background: rgba(236, 253, 245, 0.03); display: flex; flex-direction: column; gap: .5em; }
.pv-ghost { opacity: .55; }
.pv-mover {
  position: absolute; top: 3.9em; left: 68.2%; width: 30.4%;
  display: flex; flex-direction: column; gap: .3em;
  border-color: var(--c); box-shadow: 0 0 1.2em color-mix(in srgb, var(--c) 35%, transparent);
  animation: pvMove var(--pv-t) infinite;
}
.pv-mover b { font-size: .9em; }
/* Slides Drafts -> Pending -> Sent with transform (compositor) rather than
   left: while motion is allowed it starts from the Drafts column, and
   111.18% / 222.04% of its own 30.4% width = the old left 34.5% / 68.2%. */
@media (prefers-reduced-motion: no-preference) { .pv-mover { left: .7%; } }
@keyframes pvMove {
  0%, 2% { transform: translateX(0); opacity: 0; }
  5%, 20% { transform: translateX(0); opacity: 1; }
  28%, 40% { transform: translateX(111.18%); }
  48%, 91% { transform: translateX(222.04%); opacity: 1; }
  96%, 100% { transform: translateX(222.04%); opacity: 0; }
}

/* Designer */
.pv-palette { display: flex; flex-direction: column; gap: .45em; }
.pv-blk {
  display: flex; align-items: center; gap: .55em; padding: .5em .65em; border-radius: .45em; font-size: .8em;
  border: 1px solid var(--pv-off-bd); background: var(--pv-off-bg); color: var(--pv-off-fg);
}
.pv-blk i { width: .9em; height: .9em; border-radius: .2em; background: currentColor; opacity: .5; }
.pv-canvas { background: #f6faf8; border-radius: .5em; padding: .7em; display: flex; flex-direction: column; gap: .5em; color: #1b2421; }
.pv-canvas .pv-ln { background: rgba(27, 36, 33, 0.12); }
.pv-c-head { padding: .55em; text-align: center; background: var(--c); color: #fff; font-weight: 700; letter-spacing: .12em; font-size: .72em; border-radius: .3em; }
.pv-c-hero { height: 4.2em; border-radius: .3em; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 55%, #1b2421), color-mix(in srgb, var(--c) 20%, #f6faf8)); }
.pv-c-text b { font-size: .85em; }
.pv-c-btn { text-align: center; }
.pv-c-foot { border-top: 1px solid rgba(27, 36, 33, 0.1); padding-top: .2em; }
.pv-c-foot .pv-ln { margin: .3em auto 0; }

/* Audiences */
.pv-rules { display: flex; flex-direction: column; align-items: flex-start; gap: .6em; }
.pv-preview { display: flex; flex-direction: column; align-items: flex-start; gap: .35em; }
.pv-preview .pv-swap b { font-size: 2.2em; color: var(--c); line-height: 1.1; }
.pv-preview .pv-btn { margin-top: .5em; }

/* Attribution */
.pv-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8em; }
.pv-funnel { display: flex; flex-direction: column; gap: .5em; }
.pv-frow { display: grid; grid-template-columns: 6em 1fr 3.6em; align-items: center; gap: .7em; font-size: .85em; }
.pv-frow b { text-align: right; }

/* Automations timeline */
.pv-tl { width: 84%; }
.pv-tl-groups { display: grid; grid-template-columns: 3fr 1fr 1.4fr; margin-bottom: 4.4em; }
.pv-tl-groups span { font-size: .72em; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: rgba(236, 253, 245, 0.45); border-left: 1px dashed rgba(236, 253, 245, 0.18); padding-left: .6em; }
.pv-tl-line { position: relative; height: .3em; margin: 0 10%; border-radius: .2em; background: rgba(236, 253, 245, 0.1); }
.pv-tl-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--c); transform-origin: left; animation: pvFill var(--pv-t) infinite; }
@keyframes pvFill { 0%, 6% { transform: scaleX(0); } 52%, 92% { transform: scaleX(1); } 97%, 100% { transform: scaleX(1); opacity: 0; } }
.pv-tl-nodes { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: -.95em; }
.pv-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: .55em; text-align: center; }
.pv-node b { font-size: .8em; color: rgba(236, 253, 245, 0.8); }
.pv-dot {
  width: 1.6em; height: 1.6em; border-radius: 50%; border: 2px solid var(--c);
  background: var(--pv-on-bg); box-shadow: 0 0 1em color-mix(in srgb, var(--c) 45%, transparent);
  --pv-off-bg: #0b100e; --pv-off-bd: rgba(236, 253, 245, 0.25); --pv-bw: 2px;
}
.pv-env-wrap { position: absolute; bottom: 3.4em; display: flex; flex-direction: column; align-items: center; gap: .25em; }
.pv-env-wrap em { font-style: normal; font-size: .72em; color: var(--c); white-space: nowrap; }
.pv-tl-stats { display: flex; justify-content: center; gap: 2em; margin-top: 2.2em; font-size: .85em; color: rgba(236, 253, 245, 0.6); }
.pv-tl-stats b { color: var(--c); margin-left: .3em; }

/* Event blasts */
.pv-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; margin-bottom: .9em; }
.pv-input { margin-top: .3em; padding: .45em .7em; border-radius: .45em; border: 1px solid rgba(236, 253, 245, 0.12); background: rgba(236, 253, 245, 0.03); font-size: .85em; }
.pv-filter { display: flex; align-items: center; flex-wrap: wrap; gap: .5em; margin-bottom: 1em; }
.pv-filter .pv-lbl { margin-right: .2em; }
.pv-filter .pv-chip { border-color: var(--pv-off-bd); background: var(--pv-off-bg); color: var(--pv-off-fg); }
.pv-filter .pv-tog3 { border-color: var(--c); background: var(--pv-on-bg); color: var(--pv-on-fg); }
.pv-send { display: flex; align-items: center; gap: 1em; }
.pv-fly { display: flex; gap: .3em; }
.pv-fly > span { --from: translate(-2em, .4em) scale(.6); }
.pv-fly .pv-env { width: 1.5em; }

/* Branded emails: header and button cycle through three brands */
@keyframes pvBrand { 0%, 29% { background-color: #10b981; } 33%, 62% { background-color: #3b82f6; } 66%, 96% { background-color: #f97316; } 100% { background-color: #10b981; } }
.pv-tx .pv-mail-head, .pv-tx .pv-mail-btn { background-color: #f97316; animation: pvBrand var(--pv-t) infinite; }
.pv-tx .pv-mail-btn { color: #fff; margin-top: .9em; }
.pv-order { display: flex; justify-content: space-between; margin-top: .9em; padding: .5em 0; border-top: 1px solid rgba(27, 36, 33, 0.1); border-bottom: 1px solid rgba(27, 36, 33, 0.1); font-size: .85em; }

/* Template manager */
.pv-vers { display: flex; flex-direction: column; gap: .55em; align-items: flex-start; }
.pv-vers .pv-card { width: 100%; }
.pv-vers .pv-card b { display: block; font-size: .9em; }
.pv-vers .pv-badge { position: absolute; top: .8em; right: .8em; }
.pv-new { border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.pv-draft { background: rgba(236, 253, 245, 0.08); color: rgba(236, 253, 245, 0.6); }
.pv-mini { background: #f6faf8; color: #1b2421; border-radius: .5em; padding: .7em; }
.pv-mini .pv-lbl { color: #5b6763; margin-bottom: .5em; }
.pv-mini-head { height: 1.4em; border-radius: .25em; background: var(--c); margin-bottom: .6em; }
.pv-mini .pv-swap b { font-size: .95em; }
.pv-mini .pv-ln { background: rgba(27, 36, 33, 0.12); }

/* Feedback */
.pv-fb .pv-mail { width: 36%; }
.pv-side { display: flex; flex-direction: column; gap: .7em; min-width: 22%; }
.pv-side > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5em; padding: .7em .9em; border-radius: .55em; background: rgba(236, 253, 245, 0.05); }
.pv-side > div span { font-size: .85em; color: rgba(236, 253, 245, 0.65); }
.pv-side b { font-size: 1.4em; color: var(--c); }

/* Ticket texts */
.pv-sm-left { width: 34%; display: flex; flex-direction: column; gap: 1em; }
.pv-sm-left .pv-consent { width: auto; }
.pv-sm-staff { display: flex; flex-direction: column; align-items: flex-start; gap: .45em; }
.pv-sm-staff b { font-size: .9em; }
.pv-consent { width: 34%; padding: 1em; border-radius: .7em; background: #121a17; border: 1px solid rgba(236, 253, 245, 0.1); }
.pv-box { display: flex; align-items: center; gap: .6em; margin: .7em 0 .6em; font-size: .9em; font-weight: 600; }
.pv-cb { display: grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: .3em; border: 1.5px solid var(--c); }
.pv-consent p { font-size: .72em; line-height: 1.45; color: rgba(236, 253, 245, 0.55); }

/* Unsubscribe */
.pv-short { width: 26%; }
.pv-unlink { color: var(--c); text-decoration: underline; font-weight: 600; display: inline-block; }
.pv-un .pv-mail-foot .pv-unlink { color: #0f766e; }
.pv-arrow { width: 3em; height: .2em; background: rgba(236, 253, 245, 0.25); position: relative; }
.pv-arrow::after { content: ""; position: absolute; right: -.1em; top: -.35em; border: .45em solid transparent; border-left-color: rgba(236, 253, 245, 0.25); border-right: 0; }
.pv-done { display: flex; flex-direction: column; align-items: center; gap: .5em; padding: 1.4em 1.6em; border-radius: .7em; background: #121a17; border: 1px solid rgba(236, 253, 245, 0.1); }
.pv-done .pv-check { width: 2.2em; height: 2.2em; }
.pv-rules2 { display: flex; flex-direction: column; gap: .7em; }
.pv-rules2 .pv-card { display: flex; flex-direction: column; gap: .2em; min-width: 11em; }
.pv-rules2 span { font-size: .78em; color: rgba(236, 253, 245, 0.6); }
.pv-no { color: #f87171; }
.pv-yes { color: #34d399; }

/* Blog manager */
.pv-conn { display: inline-flex; align-items: center; gap: .5em; margin-bottom: .9em; padding: .4em .8em; border-radius: .5em; background: rgba(52, 211, 153, 0.1); color: #6ee7b7; font-size: .8em; font-weight: 600; }
.pv-conn i { width: .55em; height: .55em; border-radius: 50%; background: #34d399; box-shadow: 0 0 .6em #34d399; }
.pv-table { display: flex; flex-direction: column; }
.pv-tr { display: grid; grid-template-columns: 1.6fr .7fr 1.1fr 1fr; align-items: center; gap: .6em; padding: .6em .2em; border-top: 1px solid rgba(236, 253, 245, 0.07); font-size: .85em; }
.pv-th { border-top: 0; padding-top: 0; }
.pv-th span { font-size: .8em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(236, 253, 245, 0.45); }
.pv-tr .pv-btn { font-size: .78em; }

/* Content cards */
.pv-store { width: 70%; padding: 0 0 1em; border-radius: .8em; overflow: hidden; background: #f6faf8; color: #1b2421; box-shadow: 0 1.6em 3.2em rgba(0, 0, 0, 0.5); }
.pv-store-nav { display: flex; align-items: center; gap: .8em; padding: .8em 1em; background: #1b2421; }
.pv-store-nav i { width: 1.6em; height: 1.6em; border-radius: .35em; background: var(--c); margin-right: auto; }
.pv-store-nav span { width: 3.5em; height: .45em; border-radius: .25em; background: rgba(255, 255, 255, 0.25); }
.pv-rot { position: relative; display: grid; margin: 1em 1em .8em; }
.pv-promo { grid-area: 1 / 1; display: grid; grid-template-columns: 38% 1fr; gap: 1em; align-items: center; padding: .9em; border-radius: .6em; background: #fff; border: 1px solid rgba(27, 36, 33, 0.08); }
.pv-promo b { font-size: 1.1em; }
.pv-promo .pv-ln { background: rgba(27, 36, 33, 0.12); margin-bottom: .8em; }
.pv-promo-img { height: 5.5em; border-radius: .4em; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 30%, #1b2421)); }
.pv-promo.pv-pb .pv-promo-img { filter: hue-rotate(60deg); }
.pv-promo.pv-pc .pv-promo-img { filter: hue-rotate(-50deg); }
.pv-dots { position: absolute; bottom: -1.1em; left: 50%; display: flex; gap: .4em; transform: translateX(-50%); }
.pv-dots i { width: .5em; height: .5em; border-radius: 50%; background: var(--c); }
@keyframes pvDotA { 0%, 29% { opacity: 1; } 33%, 96% { opacity: .25; } 100% { opacity: 1; } }
@keyframes pvDotB { 0%, 29% { opacity: .25; } 33%, 62% { opacity: 1; } 66%, 100% { opacity: .25; } }
@keyframes pvDotC { 0%, 62% { opacity: .25; } 66%, 96% { opacity: 1; } 100% { opacity: .25; } }
.pv-dots .pv-pa { animation-name: pvDotA; }
.pv-dots .pv-pb { animation-name: pvDotB; }
.pv-dots .pv-pc { animation-name: pvDotC; }
.pv-find { display: block; margin: 1.3em 1em .5em; font-size: .95em; }
.pv-evrow { height: 1.8em; margin: .4em 1em 0; border-radius: .4em; background: rgba(27, 36, 33, 0.06); }

@media (prefers-reduced-motion: reduce) {
  .pv .pv-dots i { opacity: .25; }
  .pv .pv-dots .pv-pa { opacity: 1; }
}