/* PGLAB v68 — studio experience (product editors only). */

/* ---------- 1. Journey step bar (ALUR, LAKAR) and matching existing step bars ---------- */
.pgx-journey{position:sticky;top:0;z-index:45;display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:8px 10px;border:1px solid #333;border-radius:14px;background:#161616ee;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-family:PGStudio,Manrope,Arial,sans-serif}
.pgx-journey ol{position:relative;display:grid;grid-template-columns:repeat(4,1fr);flex:1;gap:4px;margin:0;padding:0;list-style:none}
.pgx-journey ol::before{content:"";position:absolute;left:12.5%;right:12.5%;top:50%;height:2px;margin-top:-1px;background:#2e2e2e;z-index:0}
.pgx-journey ol::after{content:"";position:absolute;left:12.5%;top:50%;height:2px;margin-top:-1px;width:calc(75% * var(--pgx-progress,0));background:linear-gradient(90deg,#ff5a1f,#ff9a6e);z-index:0;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.pgx-journey li{position:relative;z-index:1;display:flex;justify-content:center}
.pgx-step{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px 0 6px;border:1px solid transparent;border-radius:999px;background:#161616;color:#b4b1a7;font:700 12.5px/1 PGStudio,Manrope,Arial,sans-serif;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.pgx-step i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid #444;background:#1d1d1d;color:#d6d3c9;font:800 12px/1 PGStudio,Arial,sans-serif;font-style:normal;transition:background-color .25s,border-color .25s,color .25s,transform .25s}
.pgx-step:not(:disabled):hover{color:#f4f3ee;border-color:#3f3f3f}
.pgx-step[aria-current=step]{background:#38231a;border-color:#ff5a1f;color:#ffc6aa}
.pgx-step[aria-current=step] i{background:#ff5a1f;border-color:#ff5a1f;color:#111;transform:scale(1.04)}
.pgx-step.is-done{color:#e6e3da}
.pgx-step.is-done i{background:#24402d;border-color:#3f7a52}
.pgx-step.is-done i::before{content:"";width:9px;height:5px;margin-top:-3px;border:solid #7fd49a;border-width:0 0 2px 2px;transform:rotate(-45deg)}
.pgx-step:disabled{opacity:.45;cursor:not-allowed}
.pgx-journey-note{flex:none;min-width:0;max-width:200px;color:#8f8d86;font:600 11.5px/1.3 PGStudio,Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.pgx-journey-note.is-saved{color:#7fd49a}
@media(max-width:900px){
 .pgx-journey{position:relative;margin:0 0 12px;padding:6px;border-radius:12px}
 .pgx-journey-note{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .pgx-step{flex-direction:column;gap:4px;min-height:48px;padding:4px 6px;border-radius:12px;font-size:11px}
 .pgx-step i{width:24px;height:24px;font-size:11px}
}
/* Once a route is loaded, the LAKAR marketing hero steps aside so the editor comes first */
body:has(#composer.composer:not(.hidden)) .map-hero{display:none!important}
/* The step bar replaces the upload card's own step line */
body:has(.pgx-journey) .upload-steps{display:none!important}
/* PAUT 01 already has a step bar: same look */
.pg-store nav.steps{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pg-store nav.steps>span:not(.save-state){color:#3a3a3a}
.pg-store nav.steps button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px 0 6px;border:1px solid transparent;border-radius:999px;background:transparent;color:#b4b1a7;font:800 12px/1 PGStudio,Arial,sans-serif;letter-spacing:.02em}
.pg-store nav.steps button span{font-weight:700}
.pg-store nav.steps button.active{background:#38231a;border-color:#ff5a1f;color:#ffc6aa}
.pg-store nav.steps .save-state{margin-left:auto;color:#8f8d86;font:600 11px/1 PGStudio,Arial,sans-serif;letter-spacing:.1em}

/* ---------- 2. Your route, drawn ---------- */
.pgx-routecard{flex:none;display:grid;place-items:center;width:84px;height:40px;border-radius:10px;background:#111;border:1px solid #2e2e2e;overflow:hidden}
.pgx-routecard svg{width:100%;height:100%;overflow:visible}
.pgx-rc-shadow{fill:none;stroke:#ffffff14;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pgx-rc-line{fill:none;stroke:#ff5a1f;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.pgx-rc-a{fill:#f4f3ee;opacity:0}.pgx-rc-b{fill:#ff5a1f;opacity:0}
.pgx-routecard.is-drawn .pgx-rc-line{animation:pgx-rc-draw 1.6s cubic-bezier(.45,.05,.25,1) forwards}
.pgx-routecard.is-drawn .pgx-rc-a{animation:pgx-rc-dot .3s ease forwards}
.pgx-routecard.is-drawn .pgx-rc-b{animation:pgx-rc-dot .3s ease 1.5s forwards}
@keyframes pgx-rc-draw{to{stroke-dashoffset:0}}
@keyframes pgx-rc-dot{to{opacity:1}}
/* In the compact route bar the sketch sits before the route name */
body:has(#result.result:not(.hidden)) #uploadCard .upload-actions,
body:has(#composer.composer:not(.hidden)) #lakarStartPanel .upload-actions{flex-wrap:nowrap}
body:has(#result.result:not(.hidden)) #uploadCard .upload-actions>.pgx-routecard,
body:has(#composer.composer:not(.hidden)) #lakarStartPanel .upload-actions>.pgx-routecard{order:3}
.upload-actions>.pgx-routecard{display:none}
body:has(#result.result:not(.hidden)) #uploadCard .upload-actions>small,
body:has(#composer.composer:not(.hidden)) #lakarStartPanel .upload-actions>small{flex:1;justify-content:flex-start;text-align:left}
body:has(#result.result:not(.hidden)) #uploadCard .upload-actions>.pgx-routecard,
body:has(#composer.composer:not(.hidden)) #lakarStartPanel .upload-actions>.pgx-routecard{display:grid}

/* ---------- 3. Tick on the button that added to the bag ---------- */
.pgx-added{position:relative;overflow:hidden}
.pgx-added::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#1f3b29 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cstyle%3E.c%7Bstroke-dasharray:24;stroke-dashoffset:24;animation:d .45s .12s ease-out forwards%7D@keyframes d%7Bto%7Bstroke-dashoffset:0%7D%7D%3C/style%3E%3Cpath class='c' d='M6 12.5l5 5L22 6.5' fill='none' stroke='%237fd49a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ctext x='32' y='17' font-family='Arial,sans-serif' font-weight='700' font-size='14' fill='%23e8f6ec'%3EAdded%3C/text%3E%3C/svg%3E") center/112px 22px no-repeat;animation:pgx-added 1.7s ease both}
@keyframes pgx-added{0%{opacity:0;transform:scale(.96)}12%{opacity:1;transform:none}82%{opacity:1}100%{opacity:0}}

/* ---------- 4. Removed · Undo ---------- */
.pgx-removing{overflow:hidden;max-height:var(--pgx-h,200px);animation:pgx-collapse .32s cubic-bezier(.2,.8,.2,1) forwards;pointer-events:none}
@keyframes pgx-collapse{to{opacity:0;max-height:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;border-width:0}}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
 .pgx-journey ol::after,.pgx-step,.pgx-step i{transition:none}
 .pgx-rc-line{stroke-dashoffset:0;animation:none!important}.pgx-rc-a,.pgx-rc-b{opacity:1;animation:none!important}
 .pgx-removing{animation:none;display:none}
 .pgx-added::after{animation:none;opacity:0}
}