/* Journey stages (docs/JOURNEY_STAGES.md): one glowing Desired Action per screen.
   Loaded by home/base.html only while exp_journey_stages is on. Tokens only (seo/css/ds-tokens.css). */

/* The one highlighted action on a screen (Glowing Choice). It keeps its own fill and label
   (the brand CTA: dark label on orange, 5.4:1); the glow is a brand ring around it that pulses
   twice and settles. Under reduced motion the ring is simply there. */
.mb-glow {
    box-shadow: 0 0 0 var(--ds-space-1) color-mix(in srgb, var(--ds-brand) 35%, transparent);
    animation: mb-glow-pulse 1.6s cubic-bezier(.4, 0, .2, 1) 2;
}

@keyframes mb-glow-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ds-brand) 60%, transparent); }
    70% { box-shadow: 0 0 0 var(--ds-space-3) color-mix(in srgb, var(--ds-brand) 0%, transparent); }
    100% { box-shadow: 0 0 0 var(--ds-space-1) color-mix(in srgb, var(--ds-brand) 35%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .mb-glow { animation: none; }
}

/* The end-of-memory card (influencers/memory-list/journey-end-card.html): the same slot and size
   at every stage. `light` pins the palette on the hardcoded-white reader column. */
.journey-card {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
    box-sizing: border-box;
    min-height: calc(var(--ds-space-16) * 2 + var(--ds-space-5));
    margin-top: var(--ds-space-4);
    padding: var(--ds-space-4);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-surface);
    color: var(--ds-ink);
}

/* On a phone a primary and a secondary action take two rows; every card keeps that height. */
@media screen and (max-width: 812px) {
    .journey-card {
        min-height: calc(var(--ds-space-16) * 3 + var(--ds-space-4));
    }
}

.journey-card__title {
    margin: 0;
    font-family: var(--ds-font-sans);
    font-size: var(--ds-font-size-h4);
    line-height: var(--ds-line-height-h4);
    font-weight: 600;
    color: var(--ds-ink);
}

.journey-card__detail {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    margin: 0;
    color: var(--ds-ink-soft);
    font-size: var(--ds-font-size-label);
    line-height: var(--ds-line-height-label);
}

.journey-card__dot {
    width: var(--ds-space-2);
    height: var(--ds-space-2);
    flex: none;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-collectible);
}

.journey-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-3);
    margin-top: auto;
}

.journey-card__primary {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    min-height: var(--ds-space-12);
    box-sizing: border-box;
    padding: var(--ds-space-2) var(--ds-space-4);
    border: 0;
    border-radius: var(--ds-radius-md);
    background: var(--ds-brand);
    color: var(--ds-on-cta);
    font: inherit;
    font-size: var(--ds-font-size-label);
    line-height: var(--ds-line-height-label);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.journey-card__primary:hover {
    background: var(--ds-brand-hover);
    color: var(--ds-on-cta);
}

.journey-card__secondary {
    display: inline-flex;
    align-items: center;
    min-height: var(--ds-space-12);
    padding: 0 var(--ds-space-2);
    color: var(--ds-link);
    font-size: var(--ds-font-size-label);
    line-height: var(--ds-line-height-label);
    font-weight: 600;
    text-decoration: none;
}

.journey-card__secondary:hover {
    color: var(--ds-link-hover);
    text-decoration: underline;
    text-underline-offset: var(--ds-space-1);
}

.journey-card__primary:focus-visible,
.journey-card__secondary:focus-visible {
    outline: 3px solid var(--ds-focus);
    outline-offset: var(--ds-space-1);
}

.journey-card__primary .material-icons-outlined {
    font-size: var(--ds-font-size-h3);
}

.journey-card__follow {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    color: var(--ds-ink-soft);
    font-size: var(--ds-font-size-label);
    line-height: var(--ds-line-height-label);
}