/* KKLH Wizard — built on the Platform Style Guide tokens (--khe-*) with
   kklh- components ported from wireframes v0.8. Scoped to .kklh-wizard;
   !important on values BuddyBoss/theme CSS is known to override. */

.kklh-wizard {
    /* Style guide token block (scoped — never :root) */
    --khe-primary: #439bc0;
    --khe-primary-dark: #2c5f7a;
    --khe-navy: #1d3040;
    --khe-teal: #1ec1a1;
    --khe-purple: #924cd8;
    --khe-pink: #de3c7a;
    --khe-amber: #f5c842;
    --khe-text: #1d3040;
    --khe-text-body: #5a6a7a;
    --khe-text-muted: #8a9bab;
    --khe-border: #d0dce6;
    --khe-card-border: #ddedf4;
    --khe-soft: #eef7fb;
    --khe-danger: #c0392b;
    --khe-danger-soft: #fdecea;
    --khe-success: #1e6e3a;
    --khe-success-soft: #e6f4ea;
    --khe-radius: 10px;
    --khe-font: 'DM Sans', sans-serif;

    display: flex;
    gap: 28px;
    font-family: var(--khe-font) !important;
    color: var(--khe-text-body);
    max-width: 1080px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--khe-card-border);
    border-radius: 14px;
    padding: 30px 34px;
    box-shadow: 0 1px 3px rgba(29, 48, 64, .06);
}

/* ── Step rail ─────────────────────────────────────────────────────────── */
.kklh-rail { flex: 0 0 220px; display: flex; flex-direction: column; gap: 4px; }
.kklh-rail-item {
    display: flex; align-items: center; gap: 10px;
    background: none !important; border: 0 !important; padding: 9px 10px !important;
    border-radius: var(--khe-radius); cursor: pointer; text-align: left;
    font-family: var(--khe-font) !important; font-size: 14px !important;
    color: var(--khe-text-muted) !important;
}
.kklh-rail-item .kklh-rail-num {
    width: 24px; height: 24px; border-radius: 50%; flex: 0 0 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--khe-border); font-size: 12px; font-weight: 700;
}
.kklh-rail-item.is-active { color: var(--khe-navy) !important; font-weight: 700; background: var(--khe-soft) !important; }
.kklh-rail-item.is-active .kklh-rail-num { border-color: var(--khe-primary); color: var(--khe-primary); }
.kklh-rail-item.is-done .kklh-rail-num { background: var(--khe-teal); border-color: var(--khe-teal); color: #fff; }
.kklh-rail-item.is-locked { opacity: .45; cursor: not-allowed; }

/* ── Stage + steps ─────────────────────────────────────────────────────── */
.kklh-stage { flex: 1; min-width: 0; }
.kklh-step-title { font-family: var(--khe-font) !important; color: var(--khe-navy) !important; font-size: 26px !important; margin: 0 0 6px !important; }
.kklh-step-sub { margin: 0 0 22px; color: var(--khe-text-muted); }

.kklh-q { margin: 0 0 22px; padding: 0 0 0 12px; border-left: 3px solid transparent; }
.kklh-q.kklh-q-bad { border-left-color: var(--khe-danger); background: var(--khe-danger-soft); border-radius: 0 var(--khe-radius) var(--khe-radius) 0; padding: 8px 10px 8px 12px; }
.kklh-q.kklh-q-bad .kklh-q-label { color: var(--khe-danger); }
.kklh-q-label { font-weight: 700; color: var(--khe-navy); margin-bottom: 6px; font-size: 15px; }
.kklh-q-label em { color: var(--khe-pink); font-style: normal; }
.kklh-q-hint { font-size: 13px; color: var(--khe-text-muted); margin-bottom: 8px; }
.kklh-opt { font-weight: 400; color: var(--khe-text-muted); font-size: 13px; }

/* Inputs — kh-input per style guide */
.kklh-wizard .kh-input {
    width: 100%; max-width: 460px; padding: 10px 12px !important;
    border: 1.5px solid var(--khe-border) !important; border-radius: var(--khe-radius) !important;
    font-family: var(--khe-font) !important; font-size: 16px !important; color: var(--khe-text) !important;
    background: #fff !important; box-sizing: border-box;
}
.kklh-wizard .kh-input:focus { border-color: var(--khe-primary) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(67,155,192,.18) !important; }
/* Textareas (e.g. Notes) read as multi-line and anchor their placeholder top-left */
.kklh-wizard textarea.kh-input { min-height: 110px; max-width: 100%; line-height: 1.5; resize: vertical; vertical-align: top; text-align: left; }
.kklh-wizard .kh-input.kklh-bad { border-color: var(--khe-danger) !important; }
.kklh-field-err { color: var(--khe-danger); font-size: 13px; margin-top: 5px; }

/* Buttons — kh-btn per style guide */
.kklh-wizard .kh-btn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 11px 18px !important; border-radius: var(--khe-radius) !important;
    font-family: var(--khe-font) !important; font-size: 16px !important; font-weight: 700 !important;
    cursor: pointer; text-decoration: none !important; border: 1.5px solid transparent !important;
    box-sizing: border-box; justify-content: center;
}
.kklh-wizard .kh-btn-primary { background: var(--khe-primary) !important; color: #fff !important; }
.kklh-wizard .kh-btn-primary:hover { background: var(--khe-primary-dark) !important; }
.kklh-wizard .kh-btn-ghost { background: #fff !important; color: var(--khe-primary) !important; border-color: var(--khe-border) !important; }

/* ── Chips ─────────────────────────────────────────────────────────────── */
.kklh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kklh-chips.kklh-bad .kklh-chip { border-color: var(--khe-danger) !important; }
.kklh-chip {
    min-height: 44px; padding: 10px 18px !important; border-radius: 999px !important;
    border: 1.5px solid var(--khe-border) !important; background: #fff !important;
    font-family: var(--khe-font) !important; font-size: 15px !important; color: var(--khe-text-body) !important;
    cursor: pointer; display: inline-flex; align-items: center;
}
.kklh-chip.is-selected { background: var(--khe-primary) !important; border-color: var(--khe-primary) !important; color: #fff !important; font-weight: 700; }
.kklh-chips-locked { pointer-events: none; opacity: .7; }
.kklh-chips-locked .kklh-chip { cursor: not-allowed; }

/* ── Acknowledgments (v0.7 pattern) ────────────────────────────────────── */
.kklh-ack { background: var(--khe-soft); border: 1.5px solid var(--khe-card-border); border-radius: var(--khe-radius); padding: 14px 16px; margin: 0 0 22px; }
.kklh-ack.kklh-bad { border-color: var(--khe-danger); background: var(--khe-danger-soft); }
.kklh-ack-statement { margin: 0 0 10px; color: var(--khe-text-body); font-size: 14px; }
.kklh-ack-check { display: flex; align-items: center; gap: 8px; color: var(--khe-navy); cursor: pointer; }
.kklh-ack-check { min-height: 44px; }
.kklh-ack-check input { width: 20px; height: 20px; accent-color: var(--khe-primary); }

/* ── Kit picker ────────────────────────────────────────────────────────── */
.kklh-kitpicker { margin: 0 0 22px; }
.kklh-kitpicker.kklh-bad .kklh-tier:not([hidden]) { border-color: var(--khe-danger); }
.kklh-kitpicker-empty { padding: 18px; border: 1.5px dashed var(--khe-border); border-radius: var(--khe-radius); color: var(--khe-text-muted); font-size: 14px; text-align: center; }
.kklh-kitsearch { margin: 0 0 12px; }
.kklh-tier { border: 1.5px solid var(--khe-card-border); border-radius: var(--khe-radius); margin: 0 0 12px; overflow: hidden; }
.kklh-tier-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--khe-soft); cursor: pointer; }
.kklh-tier-name { font-weight: 700; color: var(--khe-navy); }
.kklh-tier-count { font-size: 12px; color: var(--khe-text-muted); margin-left: auto; }
.kklh-tier-pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.kklh-tier-pill-req { background: var(--khe-danger-soft); color: var(--khe-danger); }
.kklh-tier-pill-ok { background: var(--khe-success-soft); color: var(--khe-success); }
.kklh-tier-kits { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 10px 14px; max-height: 360px; overflow: auto; }
.kklh-kit { display: flex; align-items: center; gap: 10px; padding: 6px 4px; min-height: 44px; font-size: 15px; cursor: pointer; border-radius: 6px; }
.kklh-kit input { width: 20px; height: 20px; flex: 0 0 20px; }
.kklh-kit:hover { background: var(--khe-soft); }
.kklh-kit input { accent-color: var(--khe-primary); }
.kklh-kit-meta { margin-left: auto; font-size: 11px; color: var(--khe-text-muted); }
.kklh-kit-soon { opacity: .55; }
.kklh-kit-flag { font-size: 10px; font-weight: 700; background: var(--khe-amber); color: var(--khe-navy); border-radius: 999px; padding: 2px 7px; }
.kklh-kit-all { background: var(--khe-soft); border: 1.5px solid var(--khe-card-border); padding: 8px 10px; margin: 0 0 4px; font-weight: 700; }
.kklh-kit-all:hover { background: #e2f1f8; }
.kklh-kit-all .kklh-kit-name { color: var(--khe-primary-dark); }
.kklh-kit-all .kklh-kit-meta { font-weight: 400; }

/* ── Conditionals, trays, banners ──────────────────────────────────────── */
.kklh-cond[hidden], .kklh-tray[hidden] { display: none !important; }
/* Author .kh-btn display rules override the UA [hidden] default, which let the
   submit button show on non-review steps; force hidden to win wizard-wide. */
.kklh-wizard [hidden] { display: none !important; }
.kklh-tray {
    background: var(--khe-soft); border-left: 3px solid var(--khe-teal);
    border-radius: 0 var(--khe-radius) var(--khe-radius) 0;
    padding: 10px 14px; margin: -8px 0 22px; font-size: 13.5px;
}
.kklh-speaker-bio {
    background: var(--khe-soft); border: 1px solid var(--khe-card-border);
    border-radius: var(--khe-radius); padding: 16px 18px; margin: -8px 0 18px;
}
.kklh-speaker-bio p { font-size: 13.5px; line-height: 1.55; color: var(--khe-text-body); margin: 0 0 10px; }
.kklh-speaker-bio p:last-child { margin-bottom: 0; }
.kklh-speaker-bio-cta { font-weight: 700; color: var(--khe-navy); }
.kklh-speaker-bio-link { color: var(--khe-primary); font-weight: 600; text-decoration: none; }
.kklh-speaker-bio-link:hover { text-decoration: underline; }

.kklh-banner { padding: 12px 16px; border-radius: var(--khe-radius); margin: 0 0 18px; font-size: 14px; font-weight: 700; }
.kklh-banner-danger { background: var(--khe-danger-soft); color: var(--khe-danger); border: 1.5px solid var(--khe-danger); }
.kklh-banner-success { background: var(--khe-success-soft); color: var(--khe-success); border: 1.5px solid var(--khe-success); }

/* ── Entry cards ───────────────────────────────────────────────────────── */
.kklh-entry-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.kklh-entry-card { border: 1.5px solid var(--khe-card-border); border-radius: var(--khe-radius); padding: 20px; }
.kklh-entry-card h3 { margin: 0 0 8px; font-family: var(--khe-font); color: var(--khe-navy); font-size: 17px; }
.kklh-entry-card p { font-size: 13.5px; margin: 0 0 14px; }
.kklh-entry-card-primary { border-color: var(--khe-primary); background: var(--khe-soft); }

/* ── Review ────────────────────────────────────────────────────────────── */
.kklh-review { border: 1.5px solid var(--khe-card-border); border-radius: var(--khe-radius); padding: 6px 18px; margin: 0 0 22px; }
.kklh-review-row { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 10px 0; border-bottom: 1px solid var(--khe-soft); font-size: 14px; }
.kklh-review-row:last-child { border-bottom: 0; }
.kklh-review-key { flex: 1 1 150px; color: var(--khe-text-muted); }
.kklh-review-val { flex: 2 1 240px; min-width: 0; color: var(--khe-navy); font-weight: 600; overflow-wrap: anywhere; }
.kklh-review-modules { margin: 0 0 22px; }
.kklh-review-modules h3 { font-family: var(--khe-font); color: var(--khe-navy); font-size: 17px; margin: 0 0 4px; }
.kklh-review-modules ul { margin: 10px 0 0; padding: 0; list-style: none; }
.kklh-review-modules li { padding: 8px 0 8px 26px; position: relative; font-size: 14px; border-bottom: 1px solid var(--khe-soft); }
.kklh-review-modules li::before { content: '☐'; position: absolute; left: 4px; color: var(--khe-primary); }

/* ── Footer + savebox ──────────────────────────────────────────────────── */
.kklh-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 18px; border-top: 1.5px solid var(--khe-card-border); }
.kklh-footer-right { display: flex; gap: 10px; }
/* Discard & start over — quiet destructive link, left cluster (margin-right:auto
   pushes the primary action group to the far right). */
.kklh-wizard .kklh-discard {
    margin-right: auto; background: none; border: none; padding: 6px 4px;
    font-family: var(--khe-font); font-size: 14px; font-weight: 600;
    color: var(--khe-danger); cursor: pointer; text-decoration: underline;
}
.kklh-wizard .kklh-discard:hover { color: #a0241b; }
.kklh-savebox { margin-top: 16px; border: 1.5px solid var(--khe-card-border); border-radius: var(--khe-radius); padding: 16px; background: var(--khe-soft); }
.kklh-savebox p { margin: 0 0 10px; font-size: 14px; }
.kklh-savebox-row { display: flex; gap: 10px; flex-wrap: wrap; }
.kklh-savebox-row .kh-input { max-width: 300px; }
.kklh-savebox-result { font-weight: 700; }

/* ── Draft chooser (logged-in resume vs. new) ──────────────────────────────── */
.kklh-wizard.kklh-wizard-chooser { display: block; max-width: 640px; }
.kklh-draftlist { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 22px; }
.kklh-draftcard {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    border: 1.5px solid var(--khe-card-border); border-radius: var(--khe-radius);
    padding: 14px 16px; background: #fff;
}
.kklh-draftcard:hover { border-color: var(--khe-primary); }
.kklh-draftcard-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kklh-draftcard-title { font-weight: 700; color: var(--khe-navy); font-size: 15px; overflow-wrap: anywhere; }
.kklh-draftcard-meta { font-size: 13px; color: var(--khe-text-muted); }
.kklh-draftcard .kh-btn { flex: 0 0 auto; }
.kklh-draftcard-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.kklh-draftcard-delete {
    background: none; border: none; padding: 6px 4px;
    font-family: var(--khe-font); font-size: 14px; font-weight: 600;
    color: var(--khe-danger); cursor: pointer; text-decoration: underline;
}
.kklh-draftcard-delete:hover { color: #a0241b; }
.kklh-draftcard-delete:disabled { opacity: .6; cursor: default; }
.kklh-draftpicker-foot { border-top: 1px solid var(--khe-soft); padding-top: 18px; }

/* ── Mobile (style guide 640px stack rules) ────────────────────────────── */
@media (max-width: 760px) {
    .kklh-wizard { flex-direction: column; gap: 14px; }
    .kklh-rail { flex-direction: row; overflow-x: auto; flex: none; padding-bottom: 6px; }
    .kklh-rail-item .kklh-rail-label { display: none; }
    .kklh-footer { flex-wrap: wrap; }
    .kklh-review-key { flex-basis: 130px; }
    .kklh-draftcard .kh-btn { width: 100%; }
}

/* ── Phase 7: company express-path prompt + team banner ───────────────────── */
.kklh-express-prompt { border:1.5px solid var(--khe-primary,#439bc0); background:#eef7fb; border-radius:12px; padding:16px; margin-bottom:18px; }
.kklh-express-body strong { display:block; color:var(--khe-text,#1d3040); font-size:15px; }
.kklh-express-body p { margin:4px 0 0; font-size:13px; color:var(--khe-text-faint,#5a6a7a); }
.kklh-express-actions { display:flex; gap:8px; margin-top:12px; }
.kklh-express-verify { margin-top:12px; border-top:1px solid #cfe6f0; padding-top:12px; }
.kklh-express-verify p { font-size:13px; color:var(--khe-text-faint,#5a6a7a); margin:0 0 8px; }
.kklh-express-verify-row { display:flex; gap:8px; margin-bottom:8px; }
.kklh-express-verify-row .kh-input { flex:1; }
.kklh-express-msg { font-size:13px; color:var(--khe-text-faint,#5a6a7a); min-height:16px; }
.kklh-team-banner { background:#fff7e6; border:1px solid #f0d089; border-radius:10px; padding:10px 12px; font-size:13px; color:#7a5b1e; margin-bottom:16px; }
.kklh-locked { background:#f1f5f8 !important; color:#5a6a7a !important; cursor:not-allowed; }
.kklh-ckset { display:flex; flex-wrap:wrap; gap:8px 18px; }
.kklh-ckopt { display:flex; align-items:center; gap:7px; min-height:44px; font-size:15px; color:var(--khe-text); }
.kklh-ckopt input { width:18px; height:18px; accent-color:var(--khe-primary); }

/* ── Phase 7: Phoebee assist (✦ Not sure? Ask) ────────────────────────────── */
.kklh-ask { background:none; border:none; color:var(--khe-primary,#439bc0); font-size:12px; font-weight:600; cursor:pointer; padding:0 0 0 6px; white-space:nowrap; }
.kklh-ask:hover { text-decoration:underline; }
.kklh-phoebee-panel { border:1.5px solid #d7c4ef; background:#f7f2fe; border-radius:12px; padding:14px; margin:0 0 16px; }
.kklh-phoebee-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.kklh-phoebee-mark { color:#924cd8; font-size:16px; }
.kklh-phoebee-head strong { flex:1; color:var(--khe-text,#1d3040); font-size:14px; }
.kklh-phoebee-close { background:none; border:none; font-size:20px; line-height:1; cursor:pointer; color:#8a7aa5; }
.kklh-phoebee-answer { font-size:14px; color:var(--khe-text,#1d3040); margin:0 0 10px; line-height:1.5; }
.kklh-phoebee-suggestions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.kklh-phoebee-sug { background:#fff; border:1.5px solid #d7c4ef; border-radius:999px; padding:6px 14px; font-size:13px; cursor:pointer; color:#5b3b86; }
.kklh-phoebee-sug:hover { background:#924cd8; color:#fff; border-color:#924cd8; }
.kklh-phoebee-ask { display:flex; gap:8px; }
.kklh-phoebee-ask .kh-input { flex:1; }

/* Company step gate (single moving Continue): inline Continue under the
   company name in the collapsed phase; the rest of the step reveals on click. */
.kklh-company-gate { margin-top: 12px; }
.kklh-company-gate .kh-btn { min-width: 160px; }

/* Launch processing state — clear feedback while the program is created. */
.kklh-launching-note {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--khe-text-muted);
    text-align: right;
}
.kh-btn.is-loading {
    position: relative;
    pointer-events: none;
}
.kh-btn.is-loading::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: kklh-spin 0.7s linear infinite;
}
@keyframes kklh-spin { to { transform: rotate(360deg); } }

/* Guest post-launch CTA — invite a guest to create a free account. */
.kklh-cta {
    margin-top: 16px;
    padding: 20px;
    border: 1px solid var(--khe-card-border);
    border-radius: var(--khe-radius);
    background: var(--khe-soft);
    text-align: center;
}
.kklh-cta-title { margin: 0 0 6px; color: var(--khe-navy); font-size: 18px; }
.kklh-cta-text { margin: 0 auto 14px; max-width: 46ch; color: var(--khe-text-body); }

/* 1.16.0 — program name preview */
.kklh-name-preview { margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: #e3f7f2; color: #085041; font-size: 13.5px; overflow-wrap: anywhere; }
.kklh-name-preview strong { font-weight: 700; }