/* ============================================================
   EmojiCopy — Component classes for marketing mockups
   ------------------------------------------------------------
   Each class maps 1:1 to a Vue component in the app.
   Pattern is BEM-ish: `.component`, `.component__element`,
   `.component--variant`. Prop-style modifiers use a colon:
   `.button--green`, `.text-button--leading-green`.

   See `components.html` for the live catalog with markup
   examples + the Vue equivalent for each component.

   Depends on `tokens.css` (load tokens.css FIRST).
   ============================================================ */


/* Layout shell — vertical flex with full-bleed header + main */
.layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--c-surface-primary);
}

/* doodle variant — green radial glow behind the header */
.layout--doodle .layout__header {
    background:
        radial-gradient(900px 400px at 20% -20%, color-mix(in srgb, var(--green-500) 20%, transparent), transparent 60%),
        var(--c-surface-cta);
}

.layout__header {
    background: var(--c-surface-cta);
    padding: var(--sp-9) var(--sp-10);
}

.layout__content {
    flex: 1;
    padding: var(--sp-9) var(--sp-10);
}


/* Account-status header — two-column doodle header from the app's snippet.
   Padding 40/104/64/104, 80px gap, left grows, right is 50%. */
.account-status-header {
    display: flex;
    height: auto;
    padding: 40px 104px 64px 104px;
    justify-content: center;
    align-items: center;
    gap: 80px;
    flex-shrink: 0;
    align-self: stretch;
    width: 100%;

    .header-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 56px;
        flex: 1 0 0;

        .__content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 24px;
            align-self: stretch;

            .__top {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
                align-self: stretch;

                h4 {
                    align-self: stretch;
                }
            }
        }
    }

    .header-right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
        width: 50%;
    }
}


/* Button → moved to `app-components.css` (mirrors `ui/buttons/*.vue`).
   Only workspace-only convenience modifier kept here: `.button--block`
   makes any button full-width (no Vue equivalent — most Vue usages
   just set `style="width:100%"` or wrap). */
.button--block {
    width: 100%;
}


/* Status-pill — pill with a leading colored dot, used as a status label
   ("FREE PLAN" / "EARLY ACCESS"). Renamed from `.text-button` to avoid
   collision with the app's `ui/buttons/TextButton.vue`. */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--metal-300) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metal-300) 14%, transparent);
}

/* dot color variants */
.status-pill--green       .status-pill__dot { background: var(--c-icon-green); }
.status-pill--yellow      .status-pill__dot { background: var(--c-icon-yellow); }
.status-pill--destructive .status-pill__dot { background: var(--c-icon-destructive); }

.status-pill__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-icon-gray);
    flex: none;
}

.status-pill__text {
    font-family: var(--ff-inter);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
}


/* Check-circle — filled green circle check; pairs with `<CheckCircle>`
   in Vue. Inline SVG (see components.html for the path) with
   `fill="currentColor"`, so setting `color` retints it on any surface.
   Default 20px matches the profile/banner plan cards; `--sm` is the
   16px bullet scale. */
.check-circle {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--green-600);
}

.check-circle--sm {
    width: 16px;
    height: 16px;
}


/* Bullet-row — checked bullet line; pairs with `<BulletRow>` in Vue */
.bullet-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--ff-inter);
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.5;
    color: var(--c-text-secondary);

    /* color override propagates to children — matches the app's `c:<color>/txt` from Text.vue */
    &.c\:white\/txt {
        color: var(--c-text-white);
    }
}

/* Legacy check (check-thick_green.png <img> — same asset as Pill's
   leading). New rows should use the `.check-circle` SVG instead; this
   stays so older mockups keep rendering. */
.bullet-row__check {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

/* SVG check inside a bullet row — nudge to sit on the text's optical
   center like the <img> version does */
.bullet-row .check-circle {
    margin-top: 2px;
}

.bullet-row__text {
    flex: 1;
}


/* App-row — app-store-style row with icon + title + subtitle */
.app-row {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 10px;
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--metal-300) 14%, transparent);
    transition: background .2s;
    text-decoration: none;
    color: inherit;

    &:hover {
        background: color-mix(in srgb, var(--metal-300) 22%, transparent);
    }

    /* dark-context variant (e.g. inside a header that's dark) */
    &.on-dark {
        background: rgba(255,255,255,.08);

        &:hover {
            background: rgba(255,255,255,.14);
        }

        .app-row__title    { color: var(--white); }
        .app-row__subtitle { color: rgba(255,255,255,.65); }
    }
}

.app-row__icon {
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    flex: none;
    object-fit: contain;
}

.app-row__content {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.app-row__title {
    font-family: var(--ff-inter);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--c-text-primary);
}

.app-row__subtitle {
    font-family: var(--ff-inter);
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--c-text-tertiary);
}


/* Pill — small status pill (beta badge, sale tag, etc.) */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--r-pill);
    font-family: var(--ff-inter);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1;
}

.pill--beta      { background: var(--green-500); color: var(--green-950); }
.pill--beta-dark { background: var(--green-950); color: var(--green-500); box-shadow: inset 0 0 0 1px rgba(133,252,100,.25); }
.pill--soft      { background: var(--c-surface-highlight); color: light-dark(var(--green-900), var(--green-400)); }
.pill--neutral   { background: var(--c-surface-tertiary); color: var(--c-text-secondary); }

/* leading dot using currentColor + soft glow */
.pill--dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
}


/* Card — generic surface with border + radius */
.card {
    background: var(--c-surface-secondary);
    border: 1px solid var(--c-border-primary);
    border-radius: var(--r-xl);
    padding: var(--sp-7);
    box-shadow: var(--shadow-card);
}

.card--flat {
    box-shadow: none;
}

.card--accent {
    border-color: color-mix(in srgb, var(--green-600) 45%, var(--c-border-primary));
}


/* Pop-modal — the dark v2 modal shell (paywall, feedback, etc.).
   Dark surface, translucent eyebrow pill, circular close, inner
   content area, side-by-side gray + green CTAs. */

/* backdrop (only when modal is overlaying app content) */
.pop-modal-backdrop {
    position: fixed; inset: 0;
    background: var(--c-surface-modal);
    backdrop-filter: blur(12px);
    display: grid; place-items: center;
    z-index: 100;
}

.pop-modal {
    position: relative;
    width: 100%;
    max-width: 380px;
    padding: 28px 24px 24px;
    border-radius: var(--r-lg);                   /* 16px — matches designer */
    background: var(--metal-950);                 /* #0F1012, NOT a token (Modal token is the backdrop) */
    color: var(--white);                          /* fixed ink on the fixed-dark shell — --c-text-white
                                                     flips to metal-950 in dark scheme and would vanish */
    box-shadow: var(--shadow-modal);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.pop-modal__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 12px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--metal-300) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metal-300) 14%, transparent);
    font-family: var(--ff-inter);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.4;
    color: var(--white);
}

.pop-modal__eyebrow-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--green-600);
    flex: none;
}

.pop-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--metal-300) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metal-300) 14%, transparent);
    color: var(--white);
    font-size: 1.6rem;
    line-height: 1;
    border: none;
    cursor: pointer;
}

.pop-modal__title {
    font-family: var(--ff-dm-sans);
    font-weight: 900;
    font-size: 2.6rem;
    line-height: 1.1;
    letter-spacing: -.03em;
    text-align: center;
    color: var(--white);
    margin: 0;
}

.pop-modal__content {
    width: 100%;
    padding: 24px 20px;
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--metal-300) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metal-300) 14%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.pop-modal__icon {
    font-size: 4.4rem;
    line-height: 1;
}

/* `.pop-modal__image` moved to handoff/paywall.html (single-surface).        */
/* `.pop-modal__illustration` + `.pop-modal__stepper*` moved to               */
/* handoff/onboarding.html (single-surface). Per the COMPONENTIZE refactor.   */

.pop-modal__description {
    margin: 0;
    text-align: center;
    font-family: var(--ff-inter);
    font-size: 1.4rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--white) 80%, transparent);
}

.pop-modal__bullets {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.pop-modal__footer {
    display: flex;
    gap: 12px;
    width: 100%;

    .button {
        flex: 1;
    }
}


/* `.feedback-micro-prompt*` family moved to handoff/feedback-flow.html      */
/* (primary owner).                                                           */
/* `__pill` is the visual backing for <RatingScale>; `__dot` backs <Stepper>. */

/* Star-rating — interactive 1–5 stars. Used in the feedback panel.
   Uses `data-value` on the wrapper + delegated JS (see `stars.js`).
   Stars are <button>s so they're keyboard-focusable. */
.star-rating {
    display: inline-flex;
    gap: 4px;
    padding: 4px 0;
    justify-content: center;
    width: 100%;
}

.star-rating__star {
    appearance: none;
    border: none;
    background: none;
    padding: 4px 2px;
    font-size: 3.2rem;
    line-height: 1;
    color: color-mix(in srgb, currentColor 22%, transparent);
    cursor: pointer;
    transition: color .12s, transform .08s;

    &::before {
        content: '★';
    }

    &:hover,
    &:focus-visible {
        outline: none;
        transform: scale(1.08);
        color: color-mix(in srgb, var(--green-500) 60%, transparent);
    }

    &.is-active {
        color: var(--green-500);
    }
}

/* When the wrapper has data-hover="N", every star <= N highlights. */
.star-rating[data-hover="1"] .star-rating__star:nth-child(-n+1),
.star-rating[data-hover="2"] .star-rating__star:nth-child(-n+2),
.star-rating[data-hover="3"] .star-rating__star:nth-child(-n+3),
.star-rating[data-hover="4"] .star-rating__star:nth-child(-n+4),
.star-rating[data-hover="5"] .star-rating__star:nth-child(-n+5) {
    color: color-mix(in srgb, var(--green-500) 65%, transparent);
    transform: scale(1.05);
}


/* `.welcome-banner*` family moved to handoff/welcome-banner.html.            */
/* `.feedback-button*` moved to handoff/feedback-flow.html. The shipped FeedbackPrompt card stays as-is (2026-07-10) — no workspace CSS for it. */
/* `.pricing-card*` moved to handoff/pricing.html. Per the COMPONENTIZE refactor. */


/* App-nav-pill — top-right shared chrome, links to the component catalog.
   Lives in the corner of every page, sits next to the theme toggle. */
.app-nav-pill {
    position: fixed;
    top: 16px;
    right: 130px;             /* leaves room for the theme toggle on right */
    z-index: 50;

    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 12px;
    border-radius: var(--r-pill);
    background: var(--green-500);
    color: var(--metal-950);
    box-shadow: 0 4px 14px rgba(48,217,9,.28), inset 0 0 0 1px color-mix(in srgb, var(--green-700) 30%, transparent);

    font-family: var(--ff-inter);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, background .15s;

    &:hover {
        transform: translateY(-1px);
        background: var(--green-400);
        text-decoration: none;
        box-shadow: 0 6px 18px rgba(48,217,9,.4), inset 0 0 0 1px color-mix(in srgb, var(--green-700) 30%, transparent);
    }

    .label-short {
        display: none;
    }
}

.app-nav-pill__logo {
    width: 14px;
    height: 14px;
    flex: none;
    display: block;
}

@media (max-width: 600px) {
    .app-nav-pill {
        right: 70px;
        padding: 8px 10px;

        .label-long  { display: none; }
        .label-short { display: inline; }
    }
}


/* Mockup-stage — dark frame the handoff pages use to host one-or-many mockup
   cards on a contrasting background. Auto-fit grid so cards reflow without
   media queries. Marketing-only (handoff scaffolding, not a Vue component). */
.mockup-stage {
    background: var(--metal-950);
    border-radius: var(--r-lg);
    padding: var(--sp-7);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--sp-6);
    align-items: start;

    /* tighter min for paywall-style 4-up rows */
    &.size\:sm {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
}


/* Stage-wrap — vertical wrapper that pairs a `.stage-trigger-label` with its
   mockup card. Used inside `.mockup-stage`. Marketing-only. */
.stage-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}


/* Stage-trigger-label — the green-tinted small-caps pill above each mockup
   card that names the trigger / variant ("Fires: day 2–3 …", "Trigger: save
   combo"). Marketing-only — handoff scaffolding, not a Vue component. */
.stage-trigger-label {
    align-self: flex-start;
    font-family: var(--ff-inter);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--green-500);
    background: rgba(133,252,100,.15);
    padding: 5px 12px;
    border-radius: var(--r-pill);
    line-height: 1;
}


/* `.paywall-price*` moved to handoff/paywall.html (PaywallPrice atom CSS).   */
/* The catalog at /components.html also owns a copy for its demo.             */


/* Utility helpers — sparingly; prefer named components */
.row     { display: flex; align-items: center; gap: var(--sp-3); }
.col     { display: flex; flex-direction: column; gap: var(--sp-3); }
.center  { display: grid; place-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.stack-2 { display: flex; flex-direction: column; gap: var(--sp-2); }
.stack-3 { display: flex; flex-direction: column; gap: var(--sp-3); }
.stack-4 { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack-6 { display: flex; flex-direction: column; gap: var(--sp-6); }