/* Travel planner polish: calmer cards, readable place facts, gentle motion.
   Additive layer on top of the earlier guide styles; relies on the --tp-* tokens
   defined by ai-planner-studio.css, so it follows the light and dark themes. */

.tp-studio .ai-guide__place-card {
    border-color: var(--tp-line, #e4e9e6);
    background: var(--tp-card, #fff);
    box-shadow: 0 1px 2px rgba(19, 32, 26, .04), 0 10px 28px -18px rgba(19, 32, 26, .35);
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s ease, border-color .28s ease;
}
.tp-studio .ai-guide__place-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--tp-accent, #ef693c) 38%, var(--tp-line, #e4e9e6));
    box-shadow: 0 2px 4px rgba(19, 32, 26, .05), 0 18px 38px -18px rgba(19, 32, 26, .42);
}
.tp-studio .ai-guide__place-gallery { border-radius: 14px; overflow: hidden; }
.tp-studio .ai-guide__place-card h4 { color: var(--tp-ink, #13201a); letter-spacing: -.02em; line-height: 1.25; }

/* Times read as small pills that connect to the dashed route line. */
.tp-studio .ai-guide__timeline-time.is-place strong {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--tp-accent-soft, #fff0e8);
    color: var(--tp-accent-ink, #b55431);
    font-variant-numeric: tabular-nums;
}

.tp-studio .ai-guide__chip {
    background: var(--tp-accent-soft, #fff0e8);
    color: var(--tp-accent-ink, #b55431);
    letter-spacing: .01em;
}
.tp-studio .ai-guide__place-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 9px;
    background: var(--tp-card-2, #f4f6f4);
    color: var(--tp-ink-2, #4e5e64);
    font-variant-numeric: tabular-nums;
}

/* The place text answers "what is this?" on its own. */
.tp-studio .ai-guide__place-description {
    color: var(--tp-ink-2, #3f4f55);
    font-size: 13.5px;
    line-height: 1.62;
}
.tp-studio .ai-guide__place-description.is-facts {
    padding: 11px 13px;
    border-left: 3px solid var(--tp-forest, #2f8f72);
    border-radius: 4px 12px 12px 4px;
    background: color-mix(in srgb, var(--tp-moss, #e6f2ec) 55%, transparent);
    font-size: 13px;
}
.tp-studio .ai-guide__place-source {
    display: block;
    margin-top: 6px;
    color: var(--tp-muted, #78888d);
    font-size: 11.5px;
    line-height: 1.45;
}

/* Day tabs: the open day is unmistakable. */
.tp-studio .ai-guide__day-tab {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.tp-studio .ai-guide__day-tab:hover { transform: translateY(-1px); }
.tp-studio .ai-guide__day-tab.is-active {
    border-color: transparent;
    background: linear-gradient(135deg, #ff7f30, var(--tp-accent-2, #e8440c));
    color: #fff;
    box-shadow: 0 10px 22px -10px rgba(239, 84, 12, .6);
}

/* Cards rise in one after another when a day opens. */
@keyframes ai-guide-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
.tp-studio .ai-guide__timeline > .ai-guide__place,
.tp-studio .ai-guide__timeline > .ai-guide__meal-stop {
    animation: ai-guide-rise .5s cubic-bezier(.22, 1, .36, 1) both;
}
.tp-studio .ai-guide__timeline > :nth-child(2) { animation-delay: .06s; }
.tp-studio .ai-guide__timeline > :nth-child(3) { animation-delay: .12s; }
.tp-studio .ai-guide__timeline > :nth-child(4) { animation-delay: .18s; }
.tp-studio .ai-guide__timeline > :nth-child(5) { animation-delay: .24s; }
.tp-studio .ai-guide__timeline > :nth-child(n+6) { animation-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
    .tp-studio .ai-guide__place-card,
    .tp-studio .ai-guide__day-tab { transition: none; }
    .tp-studio .ai-guide__place-card:hover,
    .tp-studio .ai-guide__day-tab:hover { transform: none; }
    .tp-studio .ai-guide__timeline > .ai-guide__place,
    .tp-studio .ai-guide__timeline > .ai-guide__meal-stop { animation: none; }
}

/* Generation screens: the scripted motion canvas replaces the static SVG scene. */
.tp-gen__scene.has-motion > svg { opacity: 0; pointer-events: none; }
.tp-gen__scene > .tp-motion { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }