/* The planners' first screen: the request first, one-tap ideas, a quiet balance line.
   Loaded last on templates/ai/guide.html; colours come from the studio's --tp-* tokens (light and dark). */

/* Ideas: the starting city, then the chips. */
.tp-studio .tp-ideas { display: grid; gap: 10px; margin-top: 14px; }
.tp-studio .tp-quick .tp-ideas { margin: 14px 0 12px; }
.tp-studio .tp-ideas .tp-examples,
.is-hike-mode:not(#hc-unused) .tp-ideas .tp-examples { margin: 0; }
.tp-studio .tp-ideas__label { color: var(--tp-muted); font-size: 13px; font-weight: 700; }
.tp-studio .tp-ideas__city { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tp-studio .tp-ideas__city > span { color: var(--tp-muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
.tp-studio .tp-ideas__city input {
    flex: 1 1 180px; max-width: 280px; min-height: 40px; padding: 0 14px;
    border: 1px solid var(--tp-line-2, var(--tp-line)); border-radius: 12px;
    background: var(--tp-card); color: var(--tp-ink); font: inherit; font-size: 14px; font-weight: 650;
}
.tp-studio .tp-ideas__city input:focus { outline: none; border-color: var(--tp-accent); box-shadow: 0 0 0 4px rgba(255, 106, 26, .14); }
.tp-studio .tp-ideas__city.is-required input { border-color: var(--tp-accent); background: var(--tp-accent-soft); }
.tp-studio .tp-ideas__city.is-required input::placeholder { color: var(--tp-accent-ink); }
.tp-studio .tp-examples button { white-space: nowrap; }
.tp-studio .tp-examples button.is-active { border-color: var(--tp-accent); background: var(--tp-accent-soft); color: var(--tp-accent-ink); }
.tp-studio .tp-ideas__example {
    display: inline-flex; align-items: center; gap: 6px; justify-self: start;
    color: var(--tp-accent-ink); font-size: 14px; font-weight: 750; text-decoration: none;
}
.tp-studio .tp-ideas__example:hover { text-decoration: underline; text-underline-offset: 3px; }
.tp-studio .tp-ideas__example .tp-ico { width: 15px; height: 15px; }

/* Travel: the ideas sit above the destination fields. */
.tp-studio .tp-ideas--travel { margin: 0 0 16px; }

/* One line about generations under the build button instead of a balance card. */
.tp-studio .tp-generation-note {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 12px 0 0;
    color: var(--tp-muted); font-size: 13px; font-weight: 650; line-height: 1.4;
}
.tp-studio .tp-generation-note .tp-ico { flex: none; width: 15px; height: 15px; color: var(--tp-accent); }
.tp-studio .tp-generation-note__buy { color: var(--tp-accent-ink); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.tp-studio .tp-composer__actions + .tp-generation-note,
.tp-studio .hike-planner__form > .tp-generation-note { justify-content: flex-end; }
.tp-studio .tp-form__submit .tp-generation-note { justify-content: center; }

/* The PLUS conditions now close the travel form. */
.tp-studio .tp-builder > .tp-plus-access { margin-top: 16px; }

/* Desktop: a two-line travel title instead of four, so the ideas and «Куда» fit the first screen. */
@media (min-width: 768px) {
    .tp-studio .tp-hero--travel h1 { font-size: clamp(32px, 3.4vw, 46px); }
}

/* Phones: the request is on the first screen. */
@media (max-width: 767px) {
    /* Ideas scroll sideways in one row instead of taking a line each. */
    .tp-studio .tp-ideas .tp-examples {
        flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px;
        scrollbar-width: none; overscroll-behavior-x: contain;
    }
    .tp-studio .tp-ideas .tp-examples::-webkit-scrollbar { display: none; }
    .tp-studio .tp-ideas .tp-examples > * { flex: none; }
    /* The travel hero: a title and two lines, so the ideas and the form start on the first screen. */
    .tp-studio .tp-hero--travel { padding: 20px 18px 106px; }
    /* The old 92px gap under the text (a11y-audit-fixes.css) kept it clear of a sticky bar that now sits lower. */
    .tp-studio .tp-hero.tp-hero--travel .tp-hero__copy { padding-bottom: 0; }
    .tp-studio .tp-hero--travel .tp-kicker { display: none; }
    .tp-studio .tp-hero--travel h1 { margin: 0 0 8px; font-size: 26px; line-height: 1.1; }
    .tp-studio .tp-hero--travel p {
        display: -webkit-box; overflow: hidden; font-size: 14px; line-height: 1.5;
        -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }
    /* The hike hero: a title and one line, so the city and the ideas are on the first screen. */
    .is-hike-mode:not(#hc-unused) .tp-hero.tp-hero--hike { min-height: 0; padding: 18px 18px 16px; }
    .is-hike-mode:not(#hc-unused) .tp-hero--hike h1 { margin: 0 0 6px; font-size: 26px; line-height: 1.1; }
    .is-hike-mode:not(#hc-unused) .tp-hero--hike p {
        display: -webkit-box; overflow: hidden; font-size: 13.5px; line-height: 1.45;
        -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }
    .tp-studio .tp-ideas__city input { max-width: none; }
    /* «Составить» keeps its width; the trip summary beside it shortens with an ellipsis instead. */
    .tp-studio .tp-mobilebar .tp-cta { flex: none; }
    .tp-studio .hike-planner__form > .tp-generation-note,
    .tp-studio .tp-form__submit .tp-generation-note { justify-content: flex-start; }
    /* The icon stays beside the text; the buy links, when shown, take the next line. */
    .tp-studio .tp-generation-note > [data-generation-note-text] { flex: 1 1 200px; min-width: 0; }
    /* «Составить план» stays on one line down to 320px. */
    .tp-studio .tp-form__submit .tp-cta--xl { padding: 0 18px; white-space: nowrap; }
}
@media (max-width: 359px) {
    .tp-studio .tp-form__submit .tp-cta--xl { gap: 8px; font-size: 16px; }
}

/* The optional travel settings and the comparison under the form: one line each to open on phones. */
.tp-studio .tp-about { margin-top: 24px; }
.tp-studio .tp-more { margin-top: 16px; }
.tp-studio .tp-about__toggle,
.tp-studio .tp-more__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 52px; padding: 0 18px; border: 1px solid var(--tp-line); border-radius: 18px;
    background: var(--tp-card); color: var(--tp-ink); font-size: 15px; font-weight: 800;
    list-style: none; cursor: pointer;
}
.tp-studio .tp-more__toggle { padding: 10px 18px; }
.tp-studio .tp-more__toggle > span { display: grid; gap: 2px; min-width: 0; }
.tp-studio .tp-more__toggle small { color: var(--tp-muted); font-size: 12.5px; font-weight: 650; line-height: 1.35; }
.tp-studio .tp-about__toggle::-webkit-details-marker,
.tp-studio .tp-more__toggle::-webkit-details-marker { display: none; }
.tp-studio .tp-about__toggle .tp-ico,
.tp-studio .tp-more__toggle .tp-ico { flex: none; color: var(--tp-accent); transform: rotate(90deg); transition: transform .2s ease; }
.tp-studio .tp-about[open] > .tp-about__toggle .tp-ico,
.tp-studio .tp-more[open] > .tp-more__toggle .tp-ico { transform: rotate(-90deg); }
.tp-studio .tp-about > .tp-why { margin-top: 16px; }
.tp-studio .tp-more > .tp-block:first-of-type { margin-top: 20px; }
/* Wide screens show them open, as part of the page: the toggle lines are not needed there. */
@media (min-width: 768px) {
    .tp-studio .tp-about[open] > .tp-about__toggle,
    .tp-studio .tp-more[open] > .tp-more__toggle { display: none; }
    .tp-studio .tp-about > .tp-why { margin-top: 0; }
    .tp-studio .tp-more[open] { margin-top: 0; }
    .tp-studio .tp-more > .tp-block:first-of-type { margin-top: 28px; }
}