/* TrailTrack AI planners: final visual layer (travel + hike), loaded after every legacy layer.
   Specificity matches hike-planner-calm.css (:not(#hc-unused)) so it can lift the "calm" skin
   without removing it. Motion respects prefers-reduced-motion at the bottom. */

.tp-studio:not(#tp-x),
.tp-showcase:not(#tp-x) {
    --pl-ease: cubic-bezier(.22, 1, .36, 1);
    --pl-spring: cubic-bezier(.34, 1.56, .64, 1);
    --pl-accent: #ff6a1a;
    --pl-accent-2: #ef540c;
    --pl-glow: 0 0 0 4px rgba(255, 106, 26, .16);
    --pl-card-shadow: 0 2px 6px rgba(19, 32, 26, .04), 0 22px 48px rgba(19, 32, 26, .08);
}

/* ---------- Page canvas ---------- */
body.page-hike-calm:not(#hc-unused) {
    background:
        radial-gradient(900px 420px at 88% -40px, rgba(255, 106, 26, .07), transparent 70%),
        radial-gradient(800px 400px at -10% 120px, rgba(44, 106, 78, .09), transparent 70%),
        #f8f9f6 !important;
}

/* ---------- Hike hero: the calm skin hid the picture; bring it back as a compact banner ---------- */
.is-hike-mode:not(#hc-unused) .tp-hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; align-items: flex-end;
    min-height: clamp(220px, 28vw, 300px);
    padding: clamp(24px, 4vw, 44px);
    margin: 0 0 28px;
    border-radius: 28px;
    background: #10281d; color: #fff;
    box-shadow: 0 28px 60px rgba(16, 40, 29, .22);
    animation: pl-rise .8s var(--pl-ease) both;
}
.is-hike-mode:not(#hc-unused) .tp-hero__media { display: block; position: absolute; inset: 0; z-index: -1; }
.is-hike-mode:not(#hc-unused) .tp-hero__media img {
    width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%;
    transform: scale(1.08); animation: pl-pan 24s ease-in-out infinite alternate;
}
.is-hike-mode:not(#hc-unused) .tp-hero__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(95deg, rgba(10, 28, 20, .9) 5%, rgba(10, 28, 20, .55) 55%, rgba(10, 28, 20, .12)),
                linear-gradient(0deg, rgba(10, 28, 20, .55), transparent 60%);
}
.is-hike-mode:not(#hc-unused) .tp-hero__topo { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1.4; }
.is-hike-mode:not(#hc-unused) .tp-hero__topo .tp-hero__trail {
    stroke: #ff8a47; stroke-width: 3.4; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(255, 106, 26, .7));
}
.is-hike-mode:not(#hc-unused) .tp-hero__copy { position: relative; max-width: 640px; }
.is-hike-mode:not(#hc-unused) .tp-hero h1 {
    color: #fff; font-family: inherit !important; font-weight: 800 !important;
    font-size: clamp(30px, 4.6vw, 52px) !important; line-height: 1.05; letter-spacing: -.035em !important; margin: 0;
}
.is-hike-mode:not(#hc-unused) .tp-hero__copy p { color: rgba(255, 255, 255, .86); font-size: clamp(15px, 1.5vw, 18px); margin: 12px 0 0; max-width: 46ch; }
.is-hike-mode:not(#hc-unused) .tp-hero__facts { display: flex; margin-top: 18px; }
.is-hike-mode:not(#hc-unused) .tp-hero__facts li { backdrop-filter: blur(8px); animation: pl-rise .7s var(--pl-ease) both; }
.is-hike-mode:not(#hc-unused) .tp-hero__facts li:nth-child(2) { animation-delay: .1s; }
.is-hike-mode:not(#hc-unused) .tp-hero__facts li:nth-child(3) { animation-delay: .2s; }

/* ---------- Hike composer as a real card ---------- */
.is-hike-mode:not(#hc-unused) .tp-workspace { gap: 28px; }
.is-hike-mode:not(#hc-unused) .tp-composer {
    padding: clamp(20px, 3vw, 32px); background: #fff; border: 1px solid rgba(19, 32, 26, .08);
    border-radius: 26px; box-shadow: var(--pl-card-shadow); animation: pl-rise .8s var(--pl-ease) .12s both;
}
.is-hike-mode:not(#hc-unused) .tp-modes {
    display: inline-flex; padding: 4px; gap: 2px; background: var(--hc-soft); border-radius: 14px;
}
.is-hike-mode:not(#hc-unused) .tp-modes > button {
    padding: 9px 16px; border: 0; border-radius: 10px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px;
    transition: background .25s, color .25s, box-shadow .25s, transform .25s var(--pl-spring);
}
.is-hike-mode:not(#hc-unused) .tp-modes > button:hover { color: var(--tp-forest); }
.is-hike-mode:not(#hc-unused) .tp-modes > button:active { transform: scale(.96); }
.is-hike-mode:not(#hc-unused) .tp-modes > button.is-active { background: #fff; color: var(--tp-forest); box-shadow: 0 2px 8px rgba(19, 32, 26, .12); }
.is-hike-mode:not(#hc-unused) .tp-modes .tp-ico { width: 17px; height: 17px; }
.is-hike-mode:not(#hc-unused) .tp-prompt textarea {
    border: 1.5px solid #d6dfd8; border-radius: 18px; background: #fcfdfb; min-height: 168px;
    transition: border-color .25s, box-shadow .25s, background .25s;
}
.is-hike-mode:not(#hc-unused) .tp-prompt textarea:hover { border-color: #b5c4b9; }
.is-hike-mode:not(#hc-unused) .tp-prompt textarea:focus { outline: none; background: #fff; border-color: var(--pl-accent); box-shadow: var(--pl-glow); }
.is-hike-mode:not(#hc-unused) .tp-examples > span { font-weight: 700; color: var(--tp-muted); }
.is-hike-mode:not(#hc-unused) .tp-examples > button {
    border-radius: 999px; padding: 0 16px 0 12px; border: 1px solid transparent; font-weight: 700; color: var(--tp-forest);
    transition: transform .3s var(--pl-spring), background .2s, border-color .2s, box-shadow .2s;
}
.is-hike-mode:not(#hc-unused) .tp-examples > button .tp-ico { color: var(--pl-accent); }
.is-hike-mode:not(#hc-unused) .tp-examples > button:hover { background: #fff; border-color: #f2c7a8; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(255, 106, 26, .14); }
.is-hike-mode:not(#hc-unused) .tp-examples > button:active { transform: scale(.96); }

.is-hike-mode:not(#hc-unused) .tp-cta:not(.tp-cta--soft) {
    border-radius: 14px; min-height: 50px; padding: 12px 24px; font-weight: 750; font-size: 15px;
    background: linear-gradient(135deg, var(--pl-accent), var(--pl-accent-2));
    box-shadow: 0 12px 26px rgba(255, 106, 26, .32);
    transition: transform .3s var(--pl-ease), box-shadow .3s var(--pl-ease), filter .2s;
}
.is-hike-mode:not(#hc-unused) .tp-cta:not(.tp-cta--soft):hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(255, 106, 26, .42); filter: saturate(1.08); }
.is-hike-mode:not(#hc-unused) .tp-cta:not(.tp-cta--soft):active { transform: translateY(0) scale(.98); }
.is-hike-mode:not(#hc-unused) .tp-cta .tp-ico { transition: transform .3s var(--pl-ease); }
.is-hike-mode:not(#hc-unused) .tp-cta:hover .tp-ico { transform: translateX(4px); }
.is-hike-mode:not(#hc-unused) .tp-cta:disabled, .is-hike-mode:not(#hc-unused) .tp-cta[aria-busy="true"] { filter: grayscale(.25); box-shadow: none; transform: none; }
.is-hike-mode:not(#hc-unused) .tp-composer__actions { align-items: stretch; }
.is-hike-mode:not(#hc-unused) .tp-composer__actions .tp-cta { align-self: flex-start; }

/* ---------- Hike preview aside ---------- */
.is-hike-mode:not(#hc-unused) .tp-preview { animation: pl-rise .8s var(--pl-ease) .22s both; }
/* the hero already shows the same mountain photo */
.is-hike-mode:not(#hc-unused) .hc-create-photo { display: none; }
.is-hike-mode:not(#hc-unused) .tp-preview__how { gap: 12px; padding: 20px 0 0; }
.is-hike-mode:not(#hc-unused) .tp-preview__how li {
    grid-template-columns: 44px 1fr; align-items: center; padding: 12px 14px; border-radius: 16px; background: #fff;
    border: 1px solid rgba(19, 32, 26, .07); box-shadow: 0 1px 2px rgba(19, 32, 26, .04);
    transition: transform .35s var(--pl-ease), box-shadow .35s var(--pl-ease), border-color .25s;
    animation: pl-rise .7s var(--pl-ease) both;
}
.is-hike-mode:not(#hc-unused) .tp-preview__how li:nth-child(1) { animation-delay: .3s; }
.is-hike-mode:not(#hc-unused) .tp-preview__how li:nth-child(2) { animation-delay: .4s; }
.is-hike-mode:not(#hc-unused) .tp-preview__how li:nth-child(3) { animation-delay: .5s; }
.is-hike-mode:not(#hc-unused) .tp-preview__how li:hover { transform: translateX(4px); border-color: #f2c7a8; box-shadow: 0 10px 22px rgba(19, 32, 26, .08); }
.is-hike-mode:not(#hc-unused) .tp-preview__how li > .tp-ico {
    width: 44px; height: 44px; padding: 11px; border-radius: 14px; background: #fff1e7; color: var(--pl-accent-2); stroke: currentColor;
}
.is-hike-mode:not(#hc-unused) .tp-preview__how b { font-weight: 750; }

/* ---------- Wizard steps (advanced mode) ---------- */
.is-hike-mode:not(#hc-unused) .tp-step:not([hidden]) { animation: pl-step .5s var(--pl-ease) both; }
.is-hike-mode:not(#hc-unused) .tp-stepper button { transition: color .25s, transform .25s var(--pl-spring); }
.is-hike-mode:not(#hc-unused) .tp-stepper button.is-active { transform: translateY(-1px); }
.is-hike-mode:not(#hc-unused) .tp-field :is(input, select, textarea) { transition: border-color .25s, box-shadow .25s, background .25s; border-radius: 12px; }
.is-hike-mode:not(#hc-unused) .tp-field :is(input, select, textarea):focus { outline: none; border-color: var(--pl-accent); box-shadow: var(--pl-glow); }

/* ---------- Shared tiles/chips (both planners): springier selection ---------- */
.tp-studio:not(#tp-x) :is(.tp-tile, .tp-chip, .tp-radio):hover { transform: translateY(-2px); }
.tp-studio:not(#tp-x) :is(.tp-tile, .tp-chip, .tp-radio):active { transform: scale(.97); }
.tp-studio:not(#tp-x) .tp-chip:has(input:checked), .tp-studio:not(#tp-x) .tp-tile:has(input:checked) { animation: pl-pop .4s var(--pl-spring); }
.tp-studio:not(#tp-x) :is(input, select, textarea):focus-visible { outline: none; box-shadow: var(--pl-glow); }
.tp-studio:not(#tp-x) .tp-cta:not(.tp-cta--soft) .tp-ico { transition: transform .3s var(--pl-ease); }
.tp-studio:not(#tp-x) .tp-cta:hover .tp-ico { transform: translateX(4px); }

/* ---------- Travel: gentle entrance + stronger primary action ---------- */
.tp-travel .tp-builder { animation: pl-rise .8s var(--pl-ease) .1s both; }
.tp-travel .tp-hero__facts li { animation: pl-rise .7s var(--pl-ease) both; }
.tp-travel .tp-hero__facts li:nth-child(2) { animation-delay: .1s; }
.tp-travel .tp-hero__facts li:nth-child(3) { animation-delay: .2s; }
.tp-travel .tp-hero__media img { animation: pl-pan 26s ease-in-out infinite alternate; }

/* ---------- Showcases (travel and hike lists) ---------- */
.tp-showcase:not(#tp-x) .tp-shelf { margin-top: 40px; }
.tp-showcase:not(#tp-x) .tp-how li { transition: transform .35s var(--pl-ease), box-shadow .35s var(--pl-ease); }
.tp-showcase:not(#tp-x) .tp-how li:hover { transform: translateY(-4px); box-shadow: var(--pl-card-shadow); }
.tp-showcase:not(#tp-x) .tp-plan-grid > * { animation: pl-rise .7s var(--pl-ease) both; }
.tp-showcase:not(#tp-x) .tp-plan-grid > :nth-child(2) { animation-delay: .08s; }
.tp-showcase:not(#tp-x) .tp-plan-grid > :nth-child(3) { animation-delay: .16s; }
.tp-showcase:not(#tp-x) .tp-plan-grid > :nth-child(4) { animation-delay: .24s; }
.tp-showcase:not(#tp-x) .tp-plan-grid > :nth-child(n+5) { animation-delay: .3s; }
.tp-showcase--hike:not(#hc-unused) .hc-showcase-filters {
    padding: 18px; background: #fff; border: 1px solid rgba(19, 32, 26, .08); border-radius: 20px; box-shadow: var(--pl-card-shadow);
}
.tp-showcase--hike:not(#hc-unused) .hc-showcase-filters :is(input, select):focus { outline: none; border-color: var(--pl-accent); box-shadow: var(--pl-glow); }
.tp-showcase--hike:not(#hc-unused) .tp-hero { border-radius: 28px; }
.tp-showcase--hike:not(#hc-unused) .tp-hero__copy h1 { font-size: clamp(28px, 4vw, 44px) !important; font-weight: 800 !important; letter-spacing: -.035em !important; }
.tp-showcase--hike:not(#hc-unused) .tp-starters a { transition: transform .3s var(--pl-spring), box-shadow .25s, border-color .25s; }
.tp-showcase--hike:not(#hc-unused) .tp-starters a:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(19, 32, 26, .08); }

/* ---------- Hike generation screen: calm skin flattened the live progress; restore the life ---------- */
.page-hike-calm .tp-gen--hike:not(#hc-unused) {
    background: radial-gradient(800px 380px at 85% -60px, rgba(255, 106, 26, .10), transparent 70%), radial-gradient(700px 360px at 0 100%, rgba(44, 106, 78, .12), transparent 70%), #f8f9f6;
}
.page-hike-calm .tp-gen--hike .tp-gen__head h2 { font-size: clamp(26px, 3.6vw, 40px) !important; font-weight: 800 !important; letter-spacing: -.035em !important; }
.page-hike-calm .tp-gen--hike .tp-gen__head h2 em { color: var(--pl-accent-2, #ef540c); font-style: normal; }
.page-hike-calm .tp-gen--hike .tp-gen__scene { border-radius: 26px; box-shadow: 0 30px 60px rgba(16, 40, 29, .28); }
.page-hike-calm .tp-gen--hike .tp-gen__tracker {
    padding: clamp(18px, 2.4vw, 28px); border: 1px solid rgba(19, 32, 26, .08); border-radius: 26px; background: #fff;
    box-shadow: 0 2px 6px rgba(19, 32, 26, .04), 0 22px 48px rgba(19, 32, 26, .08);
}
.page-hike-calm .tp-gen--hike .tp-gen__pulse:after { animation: tp-gen-pulse-pl 1.8s ease-out infinite; }
.page-hike-calm .tp-gen--hike .tp-gen__steps li { border-radius: 14px; transition: background .35s, color .35s, transform .35s var(--pl-ease, ease); }
.page-hike-calm .tp-gen--hike .tp-gen__steps li .tp-ico { transition: all .45s var(--pl-ease, ease); }
.page-hike-calm .tp-gen--hike .tp-gen__steps li.is-active { transform: translateX(4px); }
.page-hike-calm .tp-gen--hike .tp-gen__steps li.is-active .tp-ico { transform: scale(1.08); box-shadow: 0 8px 18px rgba(239, 84, 12, .32); }
.page-hike-calm .tp-gen--hike .tp-gen__steps li.is-complete .tp-ico { background: #1d4a37; color: #fff; }
.page-hike-calm .tp-gen--hike /* calm forced a flat orange fill with no animation; bring back the studio gradient */
.page-hike-calm .tp-gen--hike .tp-gen__progress span { background: linear-gradient(90deg, #2c6a4e, #ff7a2b, #ffb347); background-size: 200% 100%; animation: pl-shimmer 2.2s linear infinite; }
.page-hike-calm .tp-gen--hike .tp-gen__progress-head strong { font-variant-numeric: tabular-nums; color: var(--pl-accent-2, #ef540c); }
.page-hike-calm .tp-gen--hike .tp-gen__cancel { border-radius: 12px; transition: background .2s, transform .25s var(--pl-spring, ease); }
.page-hike-calm .tp-gen--hike .tp-gen__cancel:hover { transform: translateY(-1px); }
.hc-generation-library { border-radius: 12px !important; background: linear-gradient(135deg, #2c6a4e, #1d4a37) !important; transition: transform .25s var(--pl-ease, ease), box-shadow .25s; }
.hc-generation-library:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(29, 74, 55, .3); }
@keyframes pl-shimmer { to { background-position: -200% 0; } }
@keyframes tp-gen-pulse-pl { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(2.2); opacity: 0; } }
:is(html[data-theme=dark], html.dark, body.dark) .page-hike-calm .tp-gen--hike .tp-gen__tracker { background: #1b2a21; border-color: #34453a; }
@media (max-width: 700px) { .page-hike-calm .tp-gen--hike .tp-gen__scene { border-radius: 20px; } .page-hike-calm .tp-gen--hike .tp-gen__tracker { border-radius: 20px; } }

/* ---------- Keyframes ---------- */
@keyframes pl-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes pl-step { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes pl-pop { 0% { transform: scale(.94); } 55% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes pl-pan { from { transform: scale(1.08) translateX(-1.2%); } to { transform: scale(1.14) translateX(1.2%); } }

/* ---------- Dark theme ---------- */
:is(html[data-theme=dark], html.dark, body.dark) body.page-hike-calm:not(#hc-unused),
:is(html[data-theme=dark], html.dark) body.page-hike-calm:not(#hc-unused) {
    background: radial-gradient(900px 420px at 88% -40px, rgba(255, 106, 26, .08), transparent 70%), #141c17 !important;
}
:is(html[data-theme=dark], html.dark, body.dark) .is-hike-mode:not(#hc-unused) .tp-composer,
:is(html[data-theme=dark], html.dark, body.dark) .is-hike-mode:not(#hc-unused) .tp-preview__how li,
:is(html[data-theme=dark], html.dark, body.dark) .tp-showcase--hike:not(#hc-unused) .hc-showcase-filters { background: #1b2a21; border-color: #34453a; }
:is(html[data-theme=dark], html.dark, body.dark) .is-hike-mode:not(#hc-unused) .tp-modes > button.is-active { background: #263a2d; color: #bfe3cd; }
:is(html[data-theme=dark], html.dark, body.dark) .is-hike-mode:not(#hc-unused) .tp-prompt textarea { background: #15211a; border-color: #3a4d41; color: #e7eee8; }
:is(html[data-theme=dark], html.dark, body.dark) .is-hike-mode:not(#hc-unused) .tp-preview__how li > .tp-ico { background: #3a2a1d; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .is-hike-mode:not(#hc-unused) .tp-workspace { grid-template-columns: 1fr; }
    .is-hike-mode:not(#hc-unused) .hc-create-photo { height: 220px; }
}
@media (max-width: 600px) {
    .is-hike-mode:not(#hc-unused) .tp-hero { border-radius: 22px; min-height: 200px; padding: 22px 18px; }
    .is-hike-mode:not(#hc-unused) .tp-hero__facts { display: none; }
    .is-hike-mode:not(#hc-unused) .tp-composer { padding: 18px 16px; border-radius: 20px; }
    .is-hike-mode:not(#hc-unused) .tp-composer__actions .tp-cta { align-self: stretch; justify-content: center; }
    /* Long mode labels must fit inside the mobile composer, including after
       hike-planner-layout changes the advanced label to «Настроить по пунктам». */
    .is-hike-mode:not(#hc-unused) .tp-modes {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%; min-width: 0; gap: 4px;
    }
    .is-hike-mode:not(#hc-unused) .tp-modes > button {
        min-width: 0; min-height: 52px; justify-content: center; padding: 10px 8px;
        gap: 6px; white-space: normal; overflow-wrap: anywhere; line-height: 1.25;
    }
    .is-hike-mode:not(#hc-unused) .tp-modes .tp-ico { flex-shrink: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tp-studio *, .tp-showcase * { animation-duration: .001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; }
    .is-hike-mode:not(#hc-unused) .hc-create-photo, .is-hike-mode:not(#hc-unused) .tp-preview__how li { transition: none; }
}