/* NewPrompt — journey.css
   Playbook Journey V1 (UI polish pass). Anonymous, LocalStorage-only, single active.
   Surfaces: global "Active workflow" bar (all pages), playbook controls (right column),
   focused step cards, sticky tool banner. Scoped to .np-journey-. Higher-specificity
   selectors intentionally override playbooks.css where the journey reshapes the steps. */

/* ════ Global compact "Active workflow" bar (sticky, just below the header) ════ */
.np-journey-bar {
    position: sticky; top: 50px; z-index: 99;
    background: rgba(13,15,21,0.96);
    border-bottom: 1px solid rgba(34,197,94,0.22);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.np-journey-bar-inner {
    max-width: 1180px; margin-inline: auto; padding: 0.55rem 1.5rem;
    display: flex; align-items: center; gap: 0.8rem;
}
.np-journey-bar-icon {
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: #22c55e; color: #04210f; flex-shrink: 0;
}
.np-journey-bar-label { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #6ee7a8; white-space: nowrap; }
.np-journey-bar-title { font-size: 0.9rem; font-weight: 700; color: var(--np-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.np-journey-bar-progress { font-size: 0.8rem; color: var(--np-text-muted); white-space: nowrap; flex-shrink: 0; }
.np-journey-bar-track { width: 110px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; flex-shrink: 0; }
.np-journey-bar-fill { display: block; height: 100%; background: linear-gradient(90deg,#22c55e,#34d77b); }
.np-journey-bar-resume {
    margin-left: auto; flex-shrink: 0; font-size: 0.8rem; font-weight: 700; color: #6ee7a8;
    text-decoration: none; border: 1px solid rgba(34,197,94,0.4); border-radius: 999px; padding: 0.35rem 0.95rem; white-space: nowrap;
}
.np-journey-bar-resume:hover { background: rgba(34,197,94,0.12); text-decoration: none; color: #8af0b6; }
.np-journey-bar-close { border: 0; background: transparent; color: var(--np-text-muted); cursor: pointer; display: grid; place-items: center; padding: 0.2rem; flex-shrink: 0; }
.np-journey-bar-close:hover { color: var(--np-text-primary); }

/* ════ Playbook controls — right column on desktop, above steps on mobile ════ */
.np-pb-page .np-pb-detail-layout { grid-template-rows: auto 1fr; }
.np-pb-detail-layout > .np-journey-pb     { grid-column: 2; grid-row: 1; }
.np-pb-detail-layout > .np-pb-detail-main { grid-column: 1; grid-row: 1 / span 2; }
.np-pb-detail-layout > .np-pb-detail-aside { grid-column: 2; grid-row: 2; }

/* ── Start workflow card ── */
.np-journey-startcard {
    position: relative; border: 1px solid rgba(34,197,94,0.4); border-radius: 18px;
    padding: 1.4rem 1.3rem 1.3rem;
    background:
        radial-gradient(ellipse 80% 90% at 0% 0%, rgba(34,197,94,0.1), transparent 60%),
        var(--np-bg-card);
    box-shadow: 0 0 0 1px rgba(34,197,94,0.06), 0 18px 50px rgba(0,0,0,0.4), 0 0 50px rgba(34,197,94,0.07);
}
.np-journey-startcard-badge {
    display: flex; align-items: center; gap: 0.3rem; width: fit-content; margin: 0 0 1rem auto;
    font-size: 0.66rem; font-weight: 700; color: #6ee7a8; border: 1px solid rgba(34,197,94,0.3);
    background: rgba(34,197,94,0.08); border-radius: 999px; padding: 3px 9px;
}
.np-journey-startcard-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.np-journey-startcard-play {
    display: grid; place-items: center; width: 58px; height: 58px; flex-shrink: 0; padding: 0; border-radius: 50%;
    color: #34d77b; border: 2px solid rgba(34,197,94,0.55); background: rgba(34,197,94,0.08); cursor: pointer;
    box-shadow: 0 0 24px rgba(34,197,94,0.18), inset 0 0 14px rgba(34,197,94,0.06);
    transition: transform 0.15s ease, border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
.np-journey-startcard-play:hover {
    transform: scale(1.07); border-color: #34d77b; background: rgba(34,197,94,0.2); color: #aef5c9;
    box-shadow: 0 0 34px rgba(34,197,94,0.4), inset 0 0 16px rgba(34,197,94,0.1);
}
.np-journey-startcard-play:active { transform: scale(0.97); }
.np-journey-startcard-play:focus-visible { outline: 2px solid #34d77b; outline-offset: 3px; }
.np-journey-startcard-headtext { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.np-journey-startcard-title { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--np-text-primary); line-height: 1.15; }
.np-journey-startcard-sub { font-size: 0.85rem; color: var(--np-text-secondary); line-height: 1.4; }

.np-journey-startcard-stats {
    display: flex; flex-wrap: wrap; gap: 0.7rem 0.6rem;
    padding-top: 1.1rem; margin-bottom: 1.2rem; border-top: 1px solid var(--np-border);
}
.np-journey-startcard-stat { display: flex; align-items: flex-start; gap: 0.45rem; min-width: 0; flex: 1 1 108px; }
.np-journey-startcard-stat-icon { color: #34d77b; flex-shrink: 0; margin-top: 1px; display: inline-flex; }
.np-journey-startcard-stat-body { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.np-journey-startcard-stat-val { font-size: 0.84rem; font-weight: 750; color: var(--np-text-primary); line-height: 1.2; overflow-wrap: break-word; }
.np-journey-startcard-stat-label { font-size: 0.68rem; color: var(--np-text-muted); line-height: 1.25; overflow-wrap: break-word; }

.np-journey-start {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%;
    border: 0; border-radius: 12px; padding: 0.85rem 1.2rem;
    background: linear-gradient(135deg,#22c55e,#16a34a); color: #04210f; font-size: 0.95rem; font-weight: 800;
    cursor: pointer; transition: filter 0.15s; box-shadow: 0 6px 22px rgba(34,197,94,0.22);
}
.np-journey-start:hover { filter: brightness(1.06); }
.np-journey-hint { display: flex; align-items: center; gap: 0.4rem; margin: 0.7rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--np-text-muted); }
.np-journey-hint svg { flex-shrink: 0; }

.np-journey-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; }
.np-journey-row--head { justify-content: space-between; margin-bottom: 0.55rem; }

.np-journey-locked, .np-journey-active, .np-journey-complete {
    border: 1px solid var(--np-border); border-radius: var(--np-radius, 14px);
    background: var(--np-bg-card); padding: 1.1rem 1.2rem;
}
.np-journey-active { border-color: rgba(34,197,94,0.4); }
.np-journey-locked-info { margin: 0 0 0.7rem; font-size: 0.88rem; line-height: 1.5; color: var(--np-text-secondary); }
.np-journey-locked-info strong { color: var(--np-text-primary); }

.np-journey-continue, .np-journey-next { font-size: 0.85rem; font-weight: 700; color: #34d77b; text-decoration: none; }
.np-journey-continue:hover, .np-journey-next:hover { text-decoration: none; color: #6ee7a8; }

.np-journey-start--replace {
    width: auto; background: var(--np-bg-hover); color: var(--np-text-primary);
    border: 1px solid var(--np-border); box-shadow: none; padding: 0.55rem 1rem; font-size: 0.85rem;
}
.np-journey-start--replace:hover { filter: none; border-color: rgba(34,197,94,0.5); }

.np-journey-clear, .np-journey-restart {
    border: 1px solid var(--np-border); background: transparent; color: var(--np-text-secondary);
    border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.8rem; font-weight: 600; cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.np-journey-clear:hover, .np-journey-restart:hover { color: var(--np-text-primary); border-color: rgba(255,255,255,0.25); }

.np-journey-badge {
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: #6ee7a8; background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.3);
    border-radius: 999px; padding: 2px 9px;
}
.np-journey-count { font-size: 0.82rem; font-weight: 700; color: var(--np-text-secondary); font-variant-numeric: tabular-nums; }

/* internal progress meter inside the active control panel (distinct from the global bar) */
.np-journey-meter { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; margin-bottom: 0.85rem; }
.np-journey-meter > span { display: block; height: 100%; background: linear-gradient(90deg,#22c55e,#34d77b); }

.np-journey-complete-badge { font-size: 0.95rem; font-weight: 800; color: #6ee7a8; }
.np-journey-complete-text { margin: 0.5rem 0 0.85rem; font-size: 0.86rem; line-height: 1.6; color: var(--np-text-secondary); }

/* ════ Step list — focus mode when a journey is active for this playbook ════ */

/* Mark-done control */
.np-journey-stepctl:empty { display: none; }
.np-journey-mark {
    display: inline-flex; align-items: center; gap: 0.35rem;
    border: 1px solid var(--np-border); background: rgba(255,255,255,0.02); color: var(--np-text-secondary);
    border-radius: 999px; padding: 0.34rem 0.85rem; font-size: 0.78rem; font-weight: 650; cursor: pointer; white-space: nowrap;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.np-journey-mark:hover { border-color: rgba(34,197,94,0.5); color: var(--np-text-primary); }
.np-journey-mark-check { color: var(--np-text-muted); font-weight: 800; }
.np-journey-mark:hover .np-journey-mark-check { color: #6ee7a8; }
.np-journey-mark.is-done { color: #6ee7a8; border-color: rgba(34,197,94,0.45); background: rgba(34,197,94,0.12); }
.np-journey-mark.is-done .np-journey-mark-check { color: #6ee7a8; }
/* Completed steps before the last one: display only (no toggle) */
.np-journey-mark.is-static { cursor: default; pointer-events: none; }
/* Future steps: locked until the previous step is completed */
.np-journey-mark--locked { cursor: not-allowed; color: var(--np-text-muted); border-color: var(--np-border); background: transparent; opacity: 0.75; }
.np-journey-mark--locked:hover { color: var(--np-text-muted); border-color: var(--np-border); }
.np-journey-mark--locked .np-journey-mark-check { color: var(--np-text-muted); display: inline-flex; }
.np-journey-mark--locked:hover .np-journey-mark-check { color: var(--np-text-muted); }

/* Resume anchor (#step-N) — offset for the sticky header so the box isn't cut off (bug 1) */
.np-pb-step { scroll-margin-top: 72px; }

/* Journey-active step numbers (green theme) */
.np-journey-on .np-pb-step .np-pb-step-num { background: var(--np-bg-hover); color: var(--np-text-muted); }
.np-journey-on .np-pb-step.np-journey-step--done .np-pb-step-num { background: rgba(34,197,94,0.2); color: #6ee7a8; }
.np-journey-on .np-pb-step.np-journey-step--current .np-pb-step-num { background: #22c55e; color: #04210f; }

/* Collapse non-current steps to a single compact row (title + mark-done) */
.np-journey-on .np-pb-step:not(.np-journey-step--current) .np-pb-step-desc,
.np-journey-on .np-pb-step:not(.np-journey-step--current) .np-pb-step-goal,
.np-journey-on .np-pb-step:not(.np-journey-step--current) .np-pb-step-links,
.np-journey-on .np-pb-step:not(.np-journey-step--current) .np-pb-step-open { display: none; }
.np-journey-on .np-pb-step:not(.np-journey-step--current) { padding-bottom: 0.9rem; }
.np-journey-on .np-pb-step:not(.np-journey-step--current) .np-pb-step-body {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.45rem;
}
.np-journey-on .np-pb-step:not(.np-journey-step--current) .np-pb-step-title { margin: 0; font-size: 0.98rem; }

/* Active step = premium green card (replaces the old outline / nested-border look) */
.np-journey-on .np-pb-step.np-journey-step--current { padding-bottom: 1.9rem; }
.np-journey-on .np-pb-step.np-journey-step--current .np-pb-step-body {
    border: 2px solid rgba(34,197,94,0.55); border-radius: 14px; padding: 1rem 1.2rem 1.1rem;
    background: rgba(34,197,94,0.05); box-shadow: 0 8px 30px rgba(34,197,94,0.08);
}
.np-journey-on .np-pb-step.np-journey-step--current .np-journey-stepctl { margin-top: 0.9rem; text-align: right; }

/* ════ Sticky tool continuation banner (fixed bottom, slim) ════ */
body.np-journey-banner-on { padding-bottom: 76px; }
.np-journey-banner {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(16,18,24,0.97); border-top: 1px solid rgba(34,197,94,0.35); backdrop-filter: blur(8px);
}
.np-journey-banner-inner { max-width: 1120px; margin-inline: auto; padding: 0.6rem 1.25rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.np-journey-banner-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1 1 auto; }
.np-journey-banner-ctx { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #6ee7a8; }
.np-journey-banner-step { font-size: 0.9rem; font-weight: 700; color: var(--np-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-journey-banner-actions { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
.np-journey-banner-btn { border: 0; border-radius: 9px; padding: 0.55rem 1.05rem; background: #22c55e; color: #04210f; font-size: 0.84rem; font-weight: 750; cursor: pointer; transition: filter 0.15s; white-space: nowrap; }
.np-journey-banner-btn:hover { filter: brightness(1.08); }
.np-journey-banner-btn.is-done { background: rgba(34,197,94,0.16); color: #6ee7a8; border: 1px solid rgba(34,197,94,0.4); }
.np-journey-banner-link { font-size: 0.82rem; font-weight: 650; color: var(--np-text-secondary); text-decoration: none; white-space: nowrap; }
.np-journey-banner-link:hover { color: var(--np-text-primary); text-decoration: none; }

/* ════ Responsive ════ */
@media (max-width: 900px) {
    /* journey controls flow back into the single column, above the steps (DOM order) */
    .np-pb-detail-layout > .np-journey-pb,
    .np-pb-detail-layout > .np-pb-detail-main,
    .np-pb-detail-layout > .np-pb-detail-aside { grid-column: auto; grid-row: auto; }
    .np-pb-detail-layout > .np-journey-pb { margin-bottom: 0.5rem; }
}
@media (max-width: 640px) {
    .np-journey-bar { top: 46px; }   /* header is 46px tall here */
    .np-journey-bar-track, .np-journey-bar-progress { display: none; }
    .np-journey-bar-inner { padding: 0.5rem 1rem; gap: 0.6rem; }
}
@media (max-width: 520px) {
    .np-journey-banner-inner { padding: 0.55rem 1rem; gap: 0.6rem; }
    .np-journey-banner-actions { width: 100%; justify-content: space-between; }
    body.np-journey-banner-on { padding-bottom: 110px; }
}

/* ════ Replace-active-workflow modal (custom, replaces native confirm) ════ */
body.np-jmodal-open { overflow: hidden; }
.np-jmodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.25rem; }
.np-jmodal-backdrop { position: absolute; inset: 0; background: rgba(4,6,10,0.72); backdrop-filter: blur(3px); }
.np-jmodal-card {
    position: relative; width: 100%; max-width: 520px; max-height: 92vh; overflow: auto;
    background: var(--np-bg-card, #111318); border: 1px solid rgba(34,197,94,0.45); border-radius: 20px;
    padding: 1.9rem 1.75rem 1.6rem; text-align: center;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(34,197,94,0.08), 0 0 60px rgba(34,197,94,0.1);
}
.np-jmodal-close { position: absolute; top: 1rem; right: 1rem; border: 0; background: transparent; color: var(--np-text-muted); cursor: pointer; display: grid; place-items: center; padding: 0.3rem; }
.np-jmodal-close:hover { color: var(--np-text-primary); }
.np-jmodal-icon {
    display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 1rem; border-radius: 50%;
    color: #34d77b; background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.4);
}
.np-jmodal-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.4rem; }
.np-jmodal-sub { font-size: 0.9rem; color: var(--np-text-secondary); margin: 0 0 1.3rem; }

.np-jmodal-active { text-align: left; border: 1px solid var(--np-border); border-radius: 14px; padding: 1rem 1.1rem; background: rgba(255,255,255,0.015); margin-bottom: 0.9rem; }
.np-jmodal-active-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.75rem; }
.np-jmodal-active-icon { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px; color: #6ee7a8; background: rgba(34,197,94,0.14); border: 1px solid rgba(34,197,94,0.3); }
.np-jmodal-active-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1 1 auto; }
.np-jmodal-active-title { font-size: 1rem; font-weight: 750; color: var(--np-text-primary); }
.np-jmodal-active-prog { font-size: 0.82rem; color: var(--np-text-muted); }
.np-jmodal-active-pct { font-size: 0.85rem; font-weight: 700; color: var(--np-text-secondary); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.np-jmodal-meter { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; margin-bottom: 0.9rem; }
.np-jmodal-meter > span { display: block; height: 100%; background: linear-gradient(90deg,#22c55e,#34d77b); }
.np-jmodal-warn { display: flex; gap: 0.55rem; align-items: flex-start; }
.np-jmodal-warn svg { flex-shrink: 0; color: #f5b73c; margin-top: 1px; }
.np-jmodal-warn p { margin: 0; font-size: 0.82rem; line-height: 1.55; color: var(--np-text-secondary); }
.np-jmodal-warn strong { color: #f5b73c; font-weight: 700; }

.np-jmodal-continue { display: flex; align-items: center; gap: 0.8rem; width: 100%; text-align: left; cursor: pointer; border: 1px solid var(--np-border); border-radius: 14px; padding: 0.85rem 1rem; background: transparent; margin-bottom: 1.1rem; transition: border-color 0.15s, background 0.15s; }
.np-jmodal-continue:hover { border-color: rgba(34,197,94,0.5); background: rgba(34,197,94,0.05); }
.np-jmodal-continue-icon { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; color: #34d77b; background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.35); }
.np-jmodal-continue-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1 1 auto; }
.np-jmodal-continue-title { font-size: 0.92rem; font-weight: 750; color: var(--np-text-primary); }
.np-jmodal-continue-sub { font-size: 0.8rem; color: var(--np-text-muted); }
.np-jmodal-continue-chev { color: var(--np-text-muted); font-size: 1.2rem; flex-shrink: 0; }

.np-jmodal-actions { display: flex; gap: 0.75rem; }
.np-jmodal-cancel { flex: 0 0 auto; min-width: 110px; border: 1px solid var(--np-border); background: var(--np-bg-input, rgba(255,255,255,0.03)); color: var(--np-text-secondary); border-radius: 12px; padding: 0.8rem 1.2rem; font-size: 0.9rem; font-weight: 650; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.np-jmodal-cancel:hover { color: var(--np-text-primary); border-color: rgba(255,255,255,0.25); }
.np-jmodal-replace { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 0.6rem; text-align: left; border: 0; border-radius: 12px; padding: 0.7rem 1.1rem; background: #e1483a; color: #fff; cursor: pointer; transition: filter 0.15s; }
.np-jmodal-replace:hover { filter: brightness(1.07); }
.np-jmodal-replace svg { flex-shrink: 0; }
.np-jmodal-replace-body { display: flex; flex-direction: column; gap: 0.05rem; line-height: 1.2; }
.np-jmodal-replace-title { font-size: 0.9rem; font-weight: 750; }
.np-jmodal-replace-sub { font-size: 0.74rem; opacity: 0.85; }

@media (max-width: 480px) {
    .np-jmodal-card { padding: 1.6rem 1.25rem 1.3rem; }
    .np-jmodal-actions { flex-direction: column; }
    .np-jmodal-cancel { width: 100%; }
    .np-jmodal-replace { justify-content: flex-start; }
}