/* ============================================================================
   index_v6_reskin.css — CREATE / SHARE motion-graphic reskin + concept framings
   ----------------------------------------------------------------------------
   ISOLATED, REVERTABLE LAYER. Loaded AFTER index_v6.css and share-ui-demo.css
   so it overrides them without editing either file. To revert this entire
   effort: remove the <link> to this file (+ the framing <script> and the
   .v6-beat-framing markup) from index/index.html, then delete this file and
   js/public/home/v6_beat_framing.js. Nothing else is touched.

   Goal: bring the Create and Share beats onto the same brand language Hero and
   Navigate already use (glass chassis, brand blurple/purple, Space Grotesk),
   and add an opening "concept card" framing to each beat.

   Tokens used (all globally defined in style-variables.css / index_v6.css):
     --blurple rgb(86,154,241)  --purple #7873F5  --blurpleblue #4EACF1
     --green  --red  --amber(n/a→use #f59e0b)  --main-bg-color  --inv-bg-color
     --brand-font  --v6-grad-cn  --v6-ease  --v6-spring
   ============================================================================ */

/* ============================================================================
   1. CONCEPT FRAMING — opening card that covers each beat, then dissolves
      into the live UI. Additive overlay; the demo runs underneath.
      Controlled by v6_beat_framing.js (adds .is-framing then .is-revealed).
   ============================================================================ */

.v6-beat-framing {
    position: absolute;
    inset: 0;
    z-index: 200; /* above the demo body AND the animated cursor */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    text-align: center;
    padding: 2rem;
    border-radius: inherit;
    /* OPAQUE cover — the demo underneath must not show through. The concept
       card owns the full frame, then dissolves to reveal the (re)started UI. */
    background:
        radial-gradient(130% 130% at 50% 0%,
            color-mix(in srgb, var(--blurple) 18%, var(--main-bg-color)) 0%,
            var(--main-bg-color) 62%),
        var(--main-bg-color);
    /* hidden when off-screen */
    opacity: 0;
    pointer-events: none;
    /* NO entrance transition — the cover must be fully opaque on the very
       first frame so the demo is never glimpsed fading in behind it. Only the
       dissolve (.is-revealed) animates. */
    transition: none;
}

/* covering / playing the concept — appears instantly, fully opaque */
.v6-beat-framing.is-framing {
    opacity: 1;
}

/* dissolve away to reveal the UI underneath */
/* dissolve: the card pulls toward the viewer and blurs out of focus as the
   live motion graphic comes up behind it — a cinematic focus-pull reveal. */
.v6-beat-framing.is-revealed {
    opacity: 0;
    transform: scale(1.09);
    filter: blur(16px);
    transition:
        opacity 560ms cubic-bezier(0.33, 0, 0.18, 1),
        transform 780ms cubic-bezier(0.16, 1, 0.3, 1),
        filter 600ms ease-out;
}

.v6-bf-eyebrow {
    font-family: var(--brand-font);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--inv-bg-color) 58%, transparent);
}
.v6-bf-eyebrow .v6-bf-num {
    color: var(--blurple);
    font-style: normal;
    margin-right: 0.45em;
}

.v6-bf-title {
    font-family: var(--brand-font);
    font-weight: 700;
    line-height: 1.1;
    font-size: clamp(1.25rem, 1.9vw, 1.65rem); /* single noun (Templates./Journeys./Outcomes.) — restrained */
    letter-spacing: -0.01em;
    color: var(--inv-bg-color); /* strong ink — high contrast in both themes */
    max-width: 16ch;
}

.v6-bf-sub {
    font-family: var(--font-main);
    font-size: clamp(0.84rem, 1vw, 0.95rem);
    line-height: 1.5;
    color: color-mix(in srgb, var(--inv-bg-color) 74%, transparent);
    max-width: 40ch;
}

/* subtle footer "time" bar — fills over the dwell so you sense the UI is
   coming next. Track + gradient fill; fill duration matches the card's dwell
   (3000ms default; 2600ms for Navigate). */
.v6-bf-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    overflow: hidden;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
}
.v6-bf-progress::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: linear-gradient(90deg, var(--blurple), var(--purple));
}
.v6-beat-framing.is-framing .v6-bf-progress::after {
    width: 100%;
    transition: width 3000ms linear;
}
.v6-beat-framing--navigate.is-framing .v6-bf-progress::after {
    transition-duration: 2600ms;
}

/* small concept glyph above the title */
.v6-bf-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    margin-bottom: 0.3rem;
    color: var(--blurple);
    background: color-mix(in srgb, var(--blurple) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--blurple) 26%, transparent);
}
.v6-bf-glyph svg { width: 20px; height: 20px; }

/* concept-card entrance stagger (only while framing) */
.v6-beat-framing.is-framing .v6-bf-glyph   { animation: v6bfRise 560ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.v6-beat-framing.is-framing .v6-bf-eyebrow { animation: v6bfRise 560ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both; }
.v6-beat-framing.is-framing .v6-bf-title   { animation: v6bfRise 600ms cubic-bezier(0.16, 1, 0.3, 1) 150ms both; }
.v6-beat-framing.is-framing .v6-bf-sub     { animation: v6bfRise 600ms cubic-bezier(0.16, 1, 0.3, 1) 240ms both; }

@keyframes v6bfRise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .v6-beat-framing,
    .v6-beat-framing.is-framing,
    .v6-beat-framing.is-revealed { transition: none; animation: none; }
    .v6-beat-framing.is-framing .v6-bf-glyph,
    .v6-beat-framing.is-framing .v6-bf-eyebrow,
    .v6-beat-framing.is-framing .v6-bf-title,
    .v6-beat-framing.is-framing .v6-bf-sub { animation: none; }
    .v6-bf-progress { display: none; }
}

/* ============================================================================
   2. SHARE — glass chassis (match the Hero/Navigate app-window look)
   ============================================================================ */

#share .share-ui-demo {
    background:
        color-mix(in srgb, var(--main-bg-color) 46%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 14%, transparent) !important;
    border-radius: clamp(20px, 2.2vw, 28px) !important;
    backdrop-filter: blur(18px) saturate(1.35) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
    box-shadow:
        0 1px 0 0 color-mix(in srgb, var(--inv-bg-color) 9%, transparent) inset,
        0 6px 16px color-mix(in srgb, var(--inv-bg-color) 6%, transparent),
        0 32px 72px color-mix(in srgb, var(--inv-bg-color) 12%, transparent) !important;
    position: relative;
}

/* animated cursor → brand */
#share .demo-cursor path { stroke: var(--purple) !important; }
/* hide the demo cursor while the concept card is covering (it has a high
   z-index of its own); restored automatically once .is-revealed is added. */
#share .v6-beat-framing.is-framing:not(.is-revealed) ~ .demo-cursor { opacity: 0 !important; }

/* ============================================================================
   3. SHARE — brand recolor (kill sky-blue / indigo / violet literals)
   ============================================================================ */

/* inline CN-logo SVG fills (#4f46e5 indigo) → brand purple */
#share .ai-working-icon path { fill: var(--purple) !important; stroke: var(--purple) !important; }
#share .ai-icon-large svg path { fill: var(--blurple) !important; stroke: var(--blurple) !important; }

/* success checks → brand green */
#share .journey-success-check { stroke: var(--green) !important; }


/* status badges → brand semantics */
#share .status-badge.badge-added,
#share .status-badge.badge-joined {
    background: color-mix(in srgb, var(--green) 16%, transparent) !important;
    color: var(--green) !important;
    border-color: color-mix(in srgb, var(--green) 34%, transparent) !important;
}
#share .status-badge.badge-invite-sent {
    background: color-mix(in srgb, var(--blurple) 16%, transparent) !important;
    color: var(--blurple) !important;
    border-color: color-mix(in srgb, var(--blurple) 34%, transparent) !important;
}
#share .status-badge.badge-awaiting {
    background: color-mix(in srgb, #f59e0b 16%, transparent) !important;
    color: #f59e0b !important;
    border-color: color-mix(in srgb, #f59e0b 34%, transparent) !important;
}

/* team header tags */
#share .team-source-tag {
    background: color-mix(in srgb, var(--inv-bg-color) 7%, transparent) !important;
    color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent) !important;
}
#share .team-external-badge {
    background: color-mix(in srgb, var(--purple) 16%, transparent) !important;
    color: var(--purple) !important;
}
#share .member-source-label,
#share .crm-source {
    color: color-mix(in srgb, var(--blurple) 85%, transparent) !important;
}

/* permission segmented control → brand */
#share .share-perm-opt.is-selected {
    background: linear-gradient(135deg, var(--blurple), var(--purple)) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* template cards: selected / accents → brand */
#share .template-card.is-selected,
#share .template-card.selected {
    border-color: color-mix(in srgb, var(--purple) 55%, transparent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--purple) 45%, transparent) !important;
}
#share .template-selected-badge {
    background: linear-gradient(135deg, var(--blurple), var(--purple)) !important;
    color: #fff !important;
}
#share .template-folder-icon path { fill: var(--purple) !important; }

/* CRM choice / dropdown accents */
#share .choice-option.is-active,
#share .choice-option:hover {
    border-color: color-mix(in srgb, var(--blurple) 50%, transparent) !important;
    color: var(--blurple) !important;
}
#share .crm-filled-via,
#share .crm-button-text { color: color-mix(in srgb, var(--blurple) 85%, transparent) !important; }
#share .crm-linked-confirm { color: var(--green) !important; }

/* autofill shimmer → brand sweep */
#share .autofill-shimmer {
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--blurple) 30%, transparent),
        transparent) !important;
}

/* AI working text + dots */
#share .ai-working-text { color: color-mix(in srgb, var(--inv-bg-color) 80%, transparent) !important; }

/* Step-4 personalize ring + progress → brand */
#share .personalize-circle-ring .rg-stop-a { stop-color: var(--blurple); stop-opacity: 0.9; }
#share .personalize-circle-ring .rg-stop-b { stop-color: var(--purple); stop-opacity: 0.55; }
#share .personalize-circle-ring .rg-stop-c { stop-color: var(--green);  stop-opacity: 0.08; }
#share .personalize-log-pulse { background: var(--blurple) !important; }
#share .ai-progress-percent { color: var(--blurple) !important; }
#share .ai-progress-fill { background: linear-gradient(135deg, var(--blurple), var(--purple)) !important; }

/* end-of-demo buttons → brand */
#share .demo-end-btn.demo-navigate,
#share .demo-end-btn.demo-navigate span,
#share .demo-end-btn.demo-navigate svg {
    color: #fff !important;
    stroke: #fff !important;
}
#share .demo-end-btn.demo-navigate {
    background: linear-gradient(135deg, var(--blurple), var(--purple)) !important;
    border-color: transparent !important;
}
#share .demo-end-btn.demo-share-another span { color: var(--blurple) !important; }
#share .demo-end-btn.demo-share-another {
    border-color: color-mix(in srgb, var(--blurple) 40%, transparent) !important;
    color: var(--blurple) !important;
}

/* progress-bar step checks → brand */
#share .progress-step .step-check { color: var(--green) !important; }

/* ============================================================================
   SHARE Step 3 — REAL Journey Team UI (tab rail + glass member table).
   Replaces the two fabricated team-cards. Values resolved (no --v6-* tokens).
   ============================================================================ */
#share .jt-layout { display: flex; flex-direction: column; gap: 12px; height: 100%; }
#share .jt-rail { display: flex; gap: 6px; flex-wrap: nowrap; }
#share .jt-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: 8px; border: 0; background: transparent; cursor: default;
    font: 600 11px 'Satoshi', sans-serif; white-space: nowrap;
    color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent);
}
#share .jt-tab svg { width: 14px; height: 14px; }
#share .jt-tab.is-active { background: color-mix(in srgb, var(--blurpleblue) 12%, transparent); color: var(--blurpleblue); }
#share .jt-tab-count { font-size: 10px; opacity: 0.7; font-style: normal; }

#share .jt-tablecard {
    position: relative; flex: 1 1 auto; min-height: 0;
    background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent);
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    border-radius: 16px; overflow: hidden;
}
#share .jt-tablecard::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: 0.45;
    background: linear-gradient(90deg, color-mix(in srgb, var(--blurple) 60%, transparent), color-mix(in srgb, var(--blurpleblue) 40%, transparent));
}
#share .jt-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
#share .jt-table th {
    padding: 9px 10px; text-align: left;
    font: 700 10px 'Satoshi', sans-serif; text-transform: uppercase; letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent);
    background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    white-space: nowrap;
}
#share .jt-table .jt-av-col { width: 44px; padding-left: 9px; padding-right: 3px; }
#share .jt-table th:nth-child(3) { width: 68px; }   /* Status */
#share .jt-table th:nth-child(4) { width: 74px; }   /* Role */
#share .jt-table th:nth-child(5) { width: 80px; }   /* Permission */
#share .jt-table .jt-act-col { width: 22px; }
/* text cells truncate via their inner spans' ellipsis; do NOT clip the row
   (that was cutting off the round avatar). */
#share .jt-table td.jt-av-col { overflow: visible; }
#share .jt-chev { width: 12px; height: 12px; opacity: 0.5; vertical-align: middle; display: inline-block; }
#share .jt-table td {
    padding: 9px 10px; font-size: 12px; color: var(--inv-bg-color); vertical-align: middle;
    border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 4%, transparent);
}
#share .jt-row:last-child td { border-bottom: 0; }
#share .jt-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    background: color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    font: 600 11px 'Satoshi', sans-serif; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent);
}
#share .jt-avatar-pending {
    background: color-mix(in srgb, #f59e0b 12%, transparent);
    border-color: color-mix(in srgb, #f59e0b 25%, transparent); color: #f59e0b;
}
#share .jt-avatar-pending svg { width: 14px; height: 14px; }
#share .jt-person { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#share .jt-name { font-size: 12px; font-weight: 500; color: var(--inv-bg-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#share .jt-email { font-size: 10.5px; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#share .jt-badge {
    display: inline-flex; align-items: center; border-radius: 9999px;
    font: 700 9px 'Satoshi', sans-serif; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 2px 7px; white-space: nowrap;
}
#share .jt-badge-active { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
#share .jt-badge-shared { background: color-mix(in srgb, #f59e0b 14%, transparent); color: #f59e0b; }
#share .jt-role { font-size: 11.5px; color: var(--inv-bg-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
#share .jt-role-muted { color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); }
#share .jt-perm {
    display: inline-flex; align-items: center; gap: 3px; padding: 4px 6px; border-radius: 7px;
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent);
    background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent);
    font-size: 11px; font-weight: 500; color: var(--inv-bg-color); white-space: nowrap;
}
#share .jt-perm .jt-chev { opacity: 0.4; }
#share .jt-perm-static { border-color: transparent; background: transparent; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); padding-left: 0; }
#share .jt-trash { width: 15px; height: 15px; color: color-mix(in srgb, var(--inv-bg-color) 22%, transparent); }
/* staggered reveal (driven by .is-in from animateStep3) */
#share .jt-tab,
#share .jt-row { opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }
#share .jt-tab.is-in,
#share .jt-row.is-in { opacity: 1; transform: none; }

/* --- Step 3 action: a pending invite accepts and goes Active (animated) --- */
#share .jt-avatar,
#share .jt-badge,
#share .jt-role,
#share .jt-name { transition: background .35s ease, border-color .35s ease, color .35s ease; }

/* "JOINING" — blurple badge with a pulsing dot while the invite is accepted */
#share .jt-badge-joining {
    background: color-mix(in srgb, var(--blurple) 16%, transparent);
    color: var(--blurple);
}
#share .jt-badge-joining::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; margin-right: 5px; flex: 0 0 auto;
    animation: jtJoinPulse 0.85s ease-in-out infinite;
}
@keyframes jtJoinPulse { 0%, 100% { opacity: 0.3; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }

/* one-shot green sweep across the row the moment the member becomes active */
#share .jt-row-flash td { animation: jtRowFlash 1.2s ease-out 1; }
@keyframes jtRowFlash {
    0%   { background: color-mix(in srgb, var(--green) 0%, transparent); }
    18%  { background: color-mix(in srgb, var(--green) 18%, transparent); }
    100% { background: color-mix(in srgb, var(--green) 0%, transparent); }
}

/* avatar pops as the hourglass resolves to initials */
#share .jt-avatar-pop { animation: jtAvatarPop 0.55s cubic-bezier(0.16, 1, 0.3, 1) 1; }
@keyframes jtAvatarPop {
    0%   { transform: scale(0.55); opacity: 0.2; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* ============================================================================
   SHARE Step 4 — REAL Personalize running UI (progress bar + per-mode rows).
   Replaces the orbiting "AI orb" + log. Values resolved.
   ============================================================================ */
#share .pz-stage { display: flex; flex-direction: column; height: 100%; text-align: left; }
#share .pz-hero { display: flex; flex-direction: column; gap: 5px; padding: 0 0 4px; }
#share .pz-title { font: 600 17px 'Satoshi', sans-serif; letter-spacing: -0.01em; color: var(--inv-bg-color); margin: 0; text-align: left; }
#share .pz-desc { font: 12px/1.5 'Satoshi', sans-serif; color: color-mix(in srgb, var(--inv-bg-color) 62%, transparent); margin: 0; text-align: left; }
#share .pz-progress { width: 100%; margin: 10px 0; }
#share .pz-progress-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
#share .pz-progress-label { font: 500 12px 'Satoshi', sans-serif; letter-spacing: 0.01em; color: color-mix(in srgb, var(--inv-bg-color) 62%, transparent); }
#share .pz-progress-pct { font: 600 13px 'Satoshi', sans-serif; color: var(--inv-bg-color); font-variant-numeric: tabular-nums; }
#share .pz-track { position: relative; width: 100%; height: 8px; border-radius: 9999px; background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); overflow: hidden; }
#share .pz-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--blurple), var(--purple)); border-radius: inherit; box-shadow: 0 0 10px color-mix(in srgb, var(--blurple) 25%, transparent); transition: width 220ms linear; }
#share .pz-strip { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 0; }
#share .pz-row {
    display: flex; align-items: center; gap: 12px; padding: 11px 12px;
    background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent);
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    border-radius: 14px; transition: border-color .35s ease, background .35s ease;
}
#share .pz-row.is-done { border-color: color-mix(in srgb, var(--green) 40%, transparent); background: color-mix(in srgb, var(--green) 5%, transparent); }
#share .pz-icon { flex-shrink: 0; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--blurple); background: color-mix(in srgb, var(--blurple) 9%, transparent); border-radius: 8px; }
#share .pz-icon svg { width: 16px; height: 16px; }
#share .pz-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
#share .pz-label { font: 600 14px 'Satoshi', sans-serif; color: var(--inv-bg-color); margin: 0; }
#share .pz-status { display: inline-flex; align-items: center; gap: 8px; font: 12.5px 'Satoshi', sans-serif; color: color-mix(in srgb, var(--inv-bg-color) 62%, transparent); margin: 0; min-width: 0; }
#share .pz-status-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#share .pz-spinner { display: inline-block; flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--blurple) 25%, transparent); border-top-color: var(--blurple); animation: pzspin 0.8s linear infinite; }
@keyframes pzspin { to { transform: rotate(360deg); } }
#share .pz-check { display: none; flex-shrink: 0; width: 15px; height: 15px; color: var(--green); }
#share .pz-row.is-done .pz-spinner { display: none; }
#share .pz-row.is-done .pz-check { display: inline-block; }

/* ============================================================================
   SHARE Step 2 — REAL Name-Journey form (one glass form; fields fill in).
   Replaces the fabricated Manually/CRM toggle + dropdown + shimmer fields.
   ============================================================================ */
#share .nj-form { display: flex; flex-direction: column; height: 100%; text-align: left; }
#share .nj-title { font: 600 12px 'Satoshi', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); margin: 0 0 8px; }
#share .nj-fields { display: flex; flex-direction: column; gap: 9px; }
#share .nj-field { display: flex; flex-direction: column; gap: 6px; }
#share .nj-label { font: 600 11px 'Satoshi', sans-serif; text-transform: uppercase; letter-spacing: 0.03em; color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent); }
#share .nj-sf-label { font: 500 11px 'Satoshi', sans-serif; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); }
#share .nj-opt { opacity: 0.65; }
#share .nj-input, #share .nj-select, #share .nj-sf-trigger {
    position: relative; min-height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 11%, transparent);
    border-radius: 8px; background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent);
    font: 500 13px 'Satoshi', sans-serif; color: var(--inv-bg-color); width: 100%; box-sizing: border-box;
    text-align: left; transition: border-color .3s ease, background .3s ease;
}
#share .nj-input-ph { color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent); }
#share .nj-input.is-filled .nj-input-ph { display: none; }
#share .nj-input.is-filled { border-color: color-mix(in srgb, var(--blurple) 45%, transparent); background: color-mix(in srgb, var(--blurple) 4%, transparent); }
#share .nj-sf-trigger { cursor: default; position: relative; min-height: 42px; }
/* placeholder + value are overlaid so the value can cross-fade/slide in
   smoothly instead of snapping via a display toggle. */
#share .nj-sf-placeholder {
    position: absolute; left: 12px; right: 12px; top: 50%; transform: translateY(-50%);
    color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); font-style: italic;
    transition: opacity .25s ease;
}
#share .nj-sf-value {
    position: absolute; left: 12px; right: 12px; top: 50%;
    display: flex; flex-direction: column; line-height: 1.25;
    opacity: 0; transform: translateY(-42%);
    transition: opacity .4s ease, transform .4s cubic-bezier(0.22,1,0.36,1);
}
#share .nj-sf-name { font-weight: 500; }
#share .nj-sf-id { font-size: 10px; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); }
#share .nj-sf.is-filled .nj-sf-placeholder { opacity: 0; }
#share .nj-sf.is-filled .nj-sf-value { opacity: 1; transform: translateY(-50%); }
#share .nj-sf.is-filled .nj-sf-trigger { border-color: color-mix(in srgb, var(--blurpleblue) 38%, transparent); background: color-mix(in srgb, var(--blurpleblue) 5%, transparent); }
#share .nj-select { justify-content: space-between; }
#share .nj-select-val { color: color-mix(in srgb, var(--inv-bg-color) 42%, transparent); }
#share .nj-select.is-filled .nj-select-val { color: var(--inv-bg-color); }
#share .nj-chev { width: 16px; height: 16px; opacity: 0.45; flex-shrink: 0; }
#share .nj-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 10px; }
#share .nj-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px; border-radius: 8px; font: 600 13px 'Satoshi', sans-serif; border: 1px solid transparent; cursor: default; }
#share .nj-btn-ghost { background: transparent; color: color-mix(in srgb, var(--inv-bg-color) 58%, transparent); }
#share .nj-btn-primary { background: var(--blurple); color: #fff; transition: box-shadow .3s ease, transform .12s ease; }
#share .nj-btn-primary.is-active { box-shadow: 0 3px 14px color-mix(in srgb, var(--blurple) 32%, transparent); transform: translateY(1px); }
#share .nj-check { width: 15px; height: 15px; }
/* AI logo/domain suggestion banner (the real form's AI flow) */
#share .nj-ai {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 9px; border-radius: 8px;
    background: color-mix(in srgb, var(--blurple) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--blurple) 16%, transparent);
    opacity: 0; transform: translateY(4px); transition: opacity .4s ease, transform .4s ease;
}
#share .nj-ai.is-in { opacity: 1; transform: none; }
#share .nj-ai.is-applied {
    opacity: 1; transform: none;
    background: color-mix(in srgb, var(--green) 8%, transparent);
    border-color: color-mix(in srgb, var(--green) 30%, transparent);
}
#share .nj-ai.is-applied .nj-ai-icon { color: var(--green); }
#share .nj-ai.is-applied .nj-ai-actions { display: none; }
#share .nj-ai-icon { flex-shrink: 0; color: var(--blurple); display: inline-flex; }
#share .nj-ai-icon svg { width: 18px; height: 18px; }
#share .nj-ai-text { flex: 1; min-width: 0; font: 12px 'Satoshi', sans-serif; color: color-mix(in srgb, var(--inv-bg-color) 75%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#share .nj-ai-text strong { color: var(--inv-bg-color); font-weight: 600; }
#share .nj-ai-actions { display: inline-flex; gap: 4px; flex-shrink: 0; }
#share .nj-ai-btn { font: 600 11px 'Satoshi', sans-serif; padding: 4px 8px; border-radius: 6px; border: 0; background: transparent; color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent); cursor: default; }
#share .nj-ai-btn-primary { color: var(--blurple); background: color-mix(in srgb, var(--blurple) 12%, transparent); }
/* success modal shown when "Share Journey" is clicked */
#share .demo-step-2 .demo-panel { position: relative; }
#share .nj-success {
    position: absolute; inset: 0; z-index: 5;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    text-align: center; border-radius: inherit;
    background: color-mix(in srgb, var(--main-bg-color) 88%, transparent);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
#share .nj-success.is-in { opacity: 1; }
#share .nj-success-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%; color: #fff; background: var(--green);
    transform: scale(0.6); transition: transform .45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#share .nj-success.is-in .nj-success-check { transform: scale(1); }
#share .nj-success-check svg { width: 26px; height: 26px; }
#share .nj-success-title { font: 600 18px 'Satoshi', sans-serif; color: var(--inv-bg-color); }
#share .nj-success-sub { font: 13px 'Satoshi', sans-serif; color: color-mix(in srgb, var(--inv-bg-color) 65%, transparent); }

/* ============================================================================
   4a. CREATE — layout refactor so the panel height matches Share/Navigate.
   The creator/editor bodies stack the ring ABOVE the log (computed
   flex-direction:column → ~441px tall body → ~630px panel vs ~495 for the
   others). Lay the ring and log/diff SIDE BY SIDE and right-size the ring so
   the body fills the same height as the other beats — no clamping/squishing.
   ============================================================================ */

/* NOTE: index_v6.css forces this layout to a vertical stack with a
   4-class rule + flex-shrink:0 on the ring column. We override with matching
   intent and !important (isolated reskin layer) to make a real 2-column row
   that fills the height — ring fixed-compact on the left, log/diff filling
   the rest. No clamping; the log gets a full, readable column. */

/* Stable panel height across all three tool views (creator/editor/coach),
   so switching tools doesn't resize the card. Tuned to ~match Share/Navigate. */
#create .surface-frame-body {
    display: flex !important;
    flex-direction: column !important;
    height: 408px !important;       /* stable, ~matches Share (493)/Navigate (497) panels */
    min-height: 408px !important;
    overflow: hidden;               /* safety; inner log scrolls, never the body */
}
#create .surface-tool-view { flex: 1 1 auto; min-height: 0; }

/* ring + log/diff side by side, filling the body height */
#create .editor-flow-body.creator-two-col,
#create .surface-editor-body,
#create .editor-flow-view .editor-flow-body {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 18px !important;
    flex: 1 1 auto;
    min-height: 0;
}
/* ring column: fixed + compact (was width:100%/max320/flex-shrink:0) */
#create .editor-circle-column,
#create .surface-ring-column {
    width: 184px !important;
    max-width: 184px !important;
    flex: 0 0 184px !important;
    margin: 0 !important;
    align-self: center !important;
    justify-content: center !important;
}
/* right-size the ring (SVG scales by viewBox, so nodes stay placed) */
#create .editor-circle-chart--lg,
#create .editor-circle-chart {
    width: 168px !important;
    height: 168px !important;
    max-width: 168px !important;
    max-height: 168px !important;
    margin: 0 auto !important;
}
/* center the ring's label + Launch CTA on the ring's true center. The label
   was sized (width/padding) for the original larger ring, so on the shrunk
   168px ring it overflowed right (~6px off). Inset it horizontally and
   right-size the padding so the text/button sit dead-center. */
#create .surface-beat-mockup-panel .editor-circle-center {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 1.35rem !important;
}
/* log / diff take the remaining width + full height — never crushed */
#create .ai-process-log,
#create .surface-log,
#create .editor-diff-panel,
#create .surface-diff {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;   /* fill the column height; don't blow it up */
    overflow-y: auto !important;   /* tall log content scrolls internally */
    align-self: stretch !important;
}
/* coach view fills the same stable height */
#create .coach-chat-view { flex: 1 1 auto; min-height: 0; }

/* ============================================================================
   4. CREATE — brand recolor (kill indigo/violet/emerald literals)
   ============================================================================ */

/* abstract ring gradient stops → brand blurple→purple→green sweep */
#create .editor-circle-ring .rg-stop-a { stop-color: var(--blurple); stop-opacity: 0.92; }
#create .editor-circle-ring .rg-stop-b { stop-color: var(--purple); stop-opacity: 0.55; }
#create .editor-circle-ring .rg-stop-c { stop-color: var(--green);  stop-opacity: 0.06; }

/* ring node rects (if filled off-brand) → brand-tinted glass */
#create .editor-circle-nodes rect {
    fill: color-mix(in srgb, var(--blurple) 22%, transparent);
}

/* center launch CTA → brand */
#create .creator-center-cta {
    background: linear-gradient(135deg, var(--blurple), var(--purple));
    color: #fff;
    border-color: transparent;
}

/* AI Process log accents (emerald → brand blurple) */
#create .ai-process-log-status,
#create .surface-log-status { color: var(--blurple); }
#create .ai-log-pulse { background: var(--blurple); }

/* Editor diff: green adds / red removes / Accept→green */
#create .editor-accept-btn,
#create .surface-diff-accept {
    background: color-mix(in srgb, var(--green) 18%, transparent);
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 38%, transparent);
}
#create .editor-reject-btn,
#create .surface-diff-reject {
    background: color-mix(in srgb, var(--red) 14%, transparent);
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 34%, transparent);
}

/* coach send button → brand */
#create .coach-send-btn,
#create .surface-chat-send {
    background: linear-gradient(135deg, var(--blurple), var(--purple));
    color: #fff;
}
#create .editor-coach-btn,
#create .surface-coach-btn {
    border-color: color-mix(in srgb, var(--blurple) 40%, transparent);
    color: var(--blurple);
}