:root{
  --cream:#FAF6F0; --sand:#EFE7D6; --espresso:#3B2A1F; --espressoD:#2C1F17;
  --coral:#E8533F; --coralDeep:#B82E1B; --coralSoft:#F5DDD7; --coralTint:#FBEEEB;
  --hairline:#DCD3C2; --faint:#E6D9CC; --clay:#6E5847; --muted:#7A6A5C;
  --good:#5C8A6B; --okay:#C9A66B; --bad:#C2533E; --white:#fff;
  --navy:#1F2A44;
  --eff:#1F2A44; --ease:#5C8A6B; --emo:#E8533F;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--cream);color:var(--espressoD);font-family:'Inter',system-ui,-apple-system,sans-serif;font-weight:400;line-height:1.5;font-size:14px}
button{font-family:inherit}

.app{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto 1fr;min-height:100vh}

/* ===== Header ===== */
header{display:flex;align-items:center;justify-content:space-between;padding:14px 26px;background:var(--white);border-bottom:1px solid var(--hairline);position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:14px}
.brand .mark{width:34px;height:34px;background:var(--coral);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:'DM Serif Display',Georgia,serif;font-size:20px;border-radius:2px}
.brand .name{font-family:'DM Serif Display',Georgia,serif;font-size:22px;color:var(--espressoD);letter-spacing:-0.01em;line-height:1}
.brand .sub{font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.header-actions{display:flex;gap:8px}
.btn-ghost{padding:8px 14px;border:1px solid var(--hairline);background:var(--white);font-size:12px;cursor:pointer;color:var(--espressoD);border-radius:2px;letter-spacing:0.04em}
.btn-ghost:hover{border-color:var(--coral);color:var(--coralDeep)}
.btn-primary{padding:8px 14px;border:1px solid var(--coral);background:var(--coral);color:#fff;font-size:12px;cursor:pointer;border-radius:2px;letter-spacing:0.04em;font-weight:500}
.btn-primary:hover{background:var(--coralDeep);border-color:var(--coralDeep)}

/* ===== Persona strip ===== */
.persona-strip{display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr;gap:0;background:var(--white);border-bottom:1px solid var(--hairline);padding:0}
.ps-cell{padding:16px 22px;border-right:1px solid var(--hairline)}
.ps-cell:last-child{border-right:none}
.ps-lbl{font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;font-weight:600}
.ps-val{font-family:'DM Serif Display',Georgia,serif;font-size:18px;color:var(--espressoD);line-height:1.2;margin-bottom:4px}
.ps-sub{font-size:11.5px;color:var(--clay);line-height:1.4}
.editable{cursor:text;border-radius:2px;padding:1px 3px;margin-left:-3px}
.editable:hover{background:var(--coralTint)}
.editable:focus{outline:1px solid var(--coral);background:var(--coralTint)}

.overall-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;margin-top:2px}
.ov{text-align:center;padding:6px 4px;background:var(--cream);border-radius:2px;border:1px solid var(--hairline)}
.ov-total{background:var(--coralTint);border-color:var(--coralSoft)}
.ov-n{font-family:'DM Serif Display',Georgia,serif;font-size:20px;color:var(--espressoD);line-height:1;font-weight:400}
.ov-total .ov-n{color:var(--coralDeep)}
.ov-l{font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-top:4px;font-weight:500}

/* ===== Main grid ===== */
main{display:grid;grid-template-columns:1fr 380px;grid-template-rows:auto 1fr;gap:0;background:var(--cream)}
.curve-section{grid-column:1;grid-row:1;padding:22px 28px 6px;border-right:1px solid var(--hairline)}
.rail-section{grid-column:1;grid-row:2;padding:14px 28px 26px;border-right:1px solid var(--hairline)}
.inspector{grid-column:2;grid-row:1 / span 2;padding:22px 24px;background:var(--white);border-left:1px solid var(--hairline);min-height:600px;overflow-y:auto}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:14px;gap:18px}
.section-head h2{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:20px;margin:3px 0 0;color:var(--espressoD);line-height:1.2}
.section-head h2 em{color:var(--coral);font-style:italic}
.eyebrow{font-size:9.5px;letter-spacing:0.24em;text-transform:uppercase;color:var(--coral);font-weight:600;display:flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--coral)}

/* ===== Curve ===== */
.curve-legend{display:flex;gap:14px;font-size:11px;color:var(--muted);align-items:center;flex-wrap:wrap}
.curve-legend .lg{display:flex;align-items:center;gap:5px}
.curve-legend .dot{width:9px;height:9px;border-radius:50%}
.curve-legend .dot.eff{background:var(--eff)}
.curve-legend .dot.ease{background:var(--ease)}
.curve-legend .dot.emo{background:var(--emo)}
.curve-legend .line{width:18px;height:0;border-top:1.5px dashed var(--coralDeep)}
.curve-wrap{background:var(--white);border:1px solid var(--hairline);border-radius:2px;padding:14px 18px;position:relative}
.curve-wrap svg{display:block;width:100%;height:260px}
.curve-grid{stroke:var(--faint);stroke-width:1;stroke-dasharray:2 3}
.curve-axis{fill:var(--muted);font:500 9px Inter;text-transform:uppercase;letter-spacing:0.14em}
.curve-stage-label{fill:var(--espressoD);font:600 11px Inter}
.curve-line{fill:none;stroke-width:2}
.curve-line.eff{stroke:var(--eff)}
.curve-line.ease{stroke:var(--ease)}
.curve-line.emo{stroke:var(--emo);stroke-width:2.5}
.curve-line.avg{stroke:var(--coralDeep);stroke-width:2;stroke-dasharray:5 3}
.curve-dot{fill:var(--white);stroke-width:2}
.curve-dot.eff{stroke:var(--eff)}
.curve-dot.ease{stroke:var(--ease)}
.curve-dot.emo{stroke:var(--emo);fill:var(--emo)}
.curve-area{fill:var(--coralTint);opacity:0.35}

/* ===== Rail ===== */
.rail{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 18px;align-items:stretch;min-height:300px}
.stage{flex:0 0 280px;background:var(--white);border:1px solid var(--hairline);border-radius:3px;display:flex;flex-direction:column;cursor:grab;transition:box-shadow .15s, transform .15s;position:relative}
.stage.dragging{opacity:0.4}
.stage.drag-over{box-shadow:0 0 0 3px var(--coral)}
.stage.selected{border-color:var(--coral);box-shadow:0 4px 14px rgba(184,46,27,0.15)}
.stage-head{padding:14px 16px;border-bottom:1px solid var(--hairline);background:var(--cream);border-radius:3px 3px 0 0}
.stage-num{font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.stage-emoji{font-size:18px;line-height:1;filter:grayscale(0.1)}
.stage-title{font-family:'DM Serif Display',Georgia,serif;font-size:19px;color:var(--espressoD);line-height:1.15;margin:0 0 4px}
.stage-moment{font-size:11px;color:var(--clay);font-style:italic;line-height:1.4}
.stage-scores{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding:10px 16px;border-bottom:1px solid var(--hairline);background:var(--white)}
.stage-score{text-align:center;background:var(--cream);padding:6px 4px;border-radius:2px;cursor:pointer;transition:background .12s}
.stage-score:hover{background:var(--coralTint)}
.stage-score .v{font-family:'DM Serif Display',Georgia,serif;font-size:18px;color:var(--espressoD);line-height:1}
.stage-score .l{font-size:8.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-top:3px;font-weight:600}
.stage-score.eff .v{color:var(--eff)}
.stage-score.ease .v{color:var(--ease)}
.stage-score.emo .v{color:var(--emo)}
.stage-touchpoints{padding:10px 14px 12px;flex:1;display:flex;flex-direction:column;gap:6px}
.tp{padding:8px 10px;background:var(--cream);border:1px solid var(--hairline);border-radius:2px;cursor:pointer;font-size:12px;color:var(--espressoD);display:flex;align-items:center;gap:8px;transition:background .12s}
.tp:hover{background:var(--coralTint);border-color:var(--coralSoft)}
.tp.selected{background:var(--coralTint);border-color:var(--coral)}
.tp-icon{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px}
.tp-label{flex:1;line-height:1.3}
.tp-friction-count{font-size:10px;background:var(--coralDeep);color:#fff;padding:1px 5px;border-radius:8px;letter-spacing:0.04em;font-weight:500}
.tp-add{padding:6px 10px;color:var(--coralDeep);font-size:11px;text-align:center;border:1px dashed var(--coralSoft);border-radius:2px;cursor:pointer;letter-spacing:0.06em;text-transform:uppercase;font-weight:600;margin-top:auto}
.tp-add:hover{background:var(--coralTint);border-color:var(--coral)}
.stage-delete{position:absolute;top:8px;right:8px;width:22px;height:22px;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;border-radius:2px}
.stage-delete:hover{background:var(--coralTint);color:var(--coralDeep)}

/* ===== Inspector ===== */
.insp-empty{color:var(--muted);font-size:12.5px;line-height:1.55}
.insp-title{font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;font-weight:600}
.insp-name{font-family:'DM Serif Display',Georgia,serif;font-size:22px;line-height:1.2;color:var(--espressoD);margin:0 0 4px}
.insp-type-pill{display:inline-block;padding:3px 9px;background:var(--coralTint);color:var(--coralDeep);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;border-radius:2px;margin-bottom:14px;font-weight:600}
.insp-section{margin:18px 0}
.insp-section h4{font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-weight:700}
.insp-field{margin-bottom:12px}
.insp-field label{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px;font-weight:600}
.insp-field input, .insp-field textarea, .insp-field select{width:100%;padding:8px 10px;border:1px solid var(--hairline);background:var(--white);font:inherit;font-size:12.5px;color:var(--espressoD);border-radius:2px;outline:none}
.insp-field input:focus, .insp-field textarea:focus, .insp-field select:focus{border-color:var(--coral)}
.insp-field textarea{resize:vertical;min-height:60px;font-family:inherit}

/* Score sliders */
.score-row{display:grid;grid-template-columns:120px 1fr 28px;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--faint)}
.score-row:last-child{border-bottom:none}
.score-row .sl{font-size:11px;color:var(--espressoD);font-weight:500;display:flex;flex-direction:column}
.score-row .sl small{font-size:9.5px;color:var(--muted);font-weight:400;margin-top:2px;line-height:1.3}
.score-row input[type="range"]{width:100%;accent-color:var(--coral)}
.score-row .sv{font-family:'DM Serif Display',Georgia,serif;font-size:20px;color:var(--coralDeep);text-align:center}
.score-row.eff .sv{color:var(--eff)}
.score-row.ease .sv{color:var(--ease)}
.score-row.emo .sv{color:var(--emo)}

/* Friction tags */
.friction-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.friction-tag{padding:7px 9px;border:1px solid var(--hairline);background:var(--white);font-size:11px;color:var(--espressoD);border-radius:2px;cursor:pointer;text-align:left;line-height:1.3;font-family:inherit}
.friction-tag:hover{border-color:var(--coral)}
.friction-tag.active{background:var(--coralDeep);color:#fff;border-color:var(--coralDeep)}
.friction-tag .ft-lbl{font-weight:600;font-size:11.5px}
.friction-tag .ft-body{font-size:10px;opacity:0.85;margin-top:2px;line-height:1.3}

.insp-delete{margin-top:18px;padding:8px 14px;border:1px solid var(--hairline);background:var(--white);color:var(--muted);font-size:11px;cursor:pointer;border-radius:2px;letter-spacing:0.06em;text-transform:uppercase;font-weight:600;width:100%}
.insp-delete:hover{border-color:var(--coralDeep);color:var(--coralDeep)}

/* ===== Footer ===== */
footer.f{padding:14px 26px;border-top:1px solid var(--hairline);font-size:11px;color:var(--muted);display:flex;justify-content:space-between;background:var(--white);grid-column:1 / -1}

/* ===== Tour overlay ===== */
.tour-overlay{position:fixed;inset:0;background:rgba(40,30,25,0.55);z-index:100;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.tour-card{background:var(--white);border-radius:3px;max-width:460px;padding:28px 32px;box-shadow:0 18px 60px rgba(0,0,0,0.25);border-top:4px solid var(--coral);position:relative}
.tour-step{font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:var(--coral);font-weight:700;margin-bottom:10px}
.tour-title{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:26px;color:var(--espressoD);margin:0 0 12px;line-height:1.2}
.tour-body{font-size:13.5px;color:var(--clay);line-height:1.6;margin:0 0 22px}
.tour-actions{display:flex;justify-content:space-between;align-items:center}
.tour-nav{display:flex;gap:8px}
.tour-card.spotlight-bottom{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);top:auto}
.tour-card.spotlight-top{position:fixed;top:120px;left:50%;transform:translateX(-50%);bottom:auto}
.tour-card.spotlight-left{position:fixed;left:32px;top:50%;transform:translateY(-50%)}
.tour-card.spotlight-right{position:fixed;right:32px;top:50%;transform:translateY(-50%);left:auto}
.spotlight-ring{position:fixed;border:3px solid var(--coral);border-radius:4px;box-shadow:0 0 0 9999px rgba(40,30,25,0.55);pointer-events:none;z-index:99;transition:all .25s ease}

@media (max-width:1100px){
  main{grid-template-columns:1fr}
  .inspector{grid-column:1;grid-row:auto;border-left:none;border-top:1px solid var(--hairline)}
}

/* ===========================================================
   Auth + multi-page additions (Valorice journey co-build · cloud)
   =========================================================== */

/* ---- Landing page ---- */
.landing{min-height:100vh;display:flex;flex-direction:column;background:var(--cream)}
.landing-nav{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;border-bottom:1px solid var(--hairline);background:var(--white)}
.landing-main{flex:1;display:flex;align-items:center;justify-content:center;padding:60px 32px}
.landing-card{max-width:640px;width:100%;text-align:center}
.landing-eyebrow{font-size:10px;letter-spacing:0.28em;text-transform:uppercase;color:var(--coralDeep);font-weight:700;margin-bottom:16px}
.landing-h1{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:46px;line-height:1.1;color:var(--espressoD);margin:0 0 18px;letter-spacing:-0.01em}
.landing-h1 em{color:var(--coral);font-style:italic}
.landing-lede{font-size:16px;color:var(--clay);line-height:1.6;margin:0 auto 32px;max-width:540px}
.landing-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.landing-cta-row button{padding:13px 22px;font-size:13px;border-radius:2px;cursor:pointer;letter-spacing:0.04em;font-family:inherit}
.cta-primary{background:var(--coral);color:#fff;border:1px solid var(--coral);font-weight:500}
.cta-primary:hover{background:var(--coralDeep);border-color:var(--coralDeep)}
.cta-ghost{background:var(--white);color:var(--espressoD);border:1px solid var(--hairline)}
.cta-ghost:hover{border-color:var(--coral);color:var(--coralDeep)}

.auth-form{max-width:440px;margin:24px auto 0;background:var(--white);border:1px solid var(--hairline);padding:24px;border-radius:3px;text-align:left}
.auth-form h3{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:22px;color:var(--espressoD);margin:0 0 6px;line-height:1.2}
.auth-form .auth-sub{font-size:12.5px;color:var(--muted);margin:0 0 16px;line-height:1.5}
.auth-form label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:6px}
.auth-form input[type="email"]{width:100%;padding:11px 12px;border:1px solid var(--hairline);background:var(--white);font:inherit;font-size:14px;color:var(--espressoD);border-radius:2px;outline:none;margin-bottom:14px}
.auth-form input[type="email"]:focus{border-color:var(--coral)}
.auth-form button[type="submit"]{width:100%;padding:12px 16px;background:var(--coral);color:#fff;border:1px solid var(--coral);font-size:13px;cursor:pointer;border-radius:2px;letter-spacing:0.04em;font-weight:500;font-family:inherit}
.auth-form button[type="submit"]:hover{background:var(--coralDeep);border-color:var(--coralDeep)}
.auth-form button[type="submit"]:disabled{opacity:0.55;cursor:not-allowed}
.auth-form .auth-error{color:var(--coralDeep);font-size:12px;margin-top:10px;line-height:1.5}
.auth-form .auth-back{margin-top:14px;background:none;border:none;color:var(--muted);font-size:11px;cursor:pointer;text-decoration:underline;letter-spacing:0.04em;padding:0;font-family:inherit}
.auth-form .auth-back:hover{color:var(--coralDeep)}
.auth-success{text-align:center;padding:8px 4px}
.auth-success .check{font-size:34px;color:var(--coral);margin-bottom:10px}
.auth-success h3{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:22px;color:var(--espressoD);margin:0 0 8px}
.auth-success p{font-size:13px;color:var(--clay);line-height:1.55;margin:0 0 6px}
.auth-success .email-shown{color:var(--coralDeep);font-weight:600}

footer.landing-footer{padding:18px 32px;border-top:1px solid var(--hairline);font-size:11px;color:var(--muted);display:flex;justify-content:space-between;background:var(--white);flex-wrap:wrap;gap:10px}

/* ---- Shared page header (app + admin) ---- */
.page-header{display:flex;align-items:center;justify-content:space-between;padding:14px 26px;background:var(--white);border-bottom:1px solid var(--hairline);position:sticky;top:0;z-index:30}
.page-header .brand{display:flex;align-items:center;gap:14px}
.page-header .mark{width:34px;height:34px;background:var(--coral);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:'DM Serif Display',Georgia,serif;font-size:20px;border-radius:2px}
.page-header .name{font-family:'DM Serif Display',Georgia,serif;font-size:22px;color:var(--espressoD);letter-spacing:-0.01em;line-height:1}
.page-header .sub{font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.page-header .user-pill{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:10px}
.page-header .user-pill strong{color:var(--espressoD);font-weight:600}
.page-header .header-nav{display:flex;gap:6px}
.page-header .header-nav a{padding:7px 12px;font-size:12px;color:var(--espressoD);text-decoration:none;border:1px solid transparent;border-radius:2px;letter-spacing:0.04em}
.page-header .header-nav a:hover{border-color:var(--hairline);color:var(--coralDeep)}
.page-header .header-nav a.active{border-color:var(--coral);color:var(--coralDeep)}

/* ---- Pending / blocked screens ---- */
.full-screen-msg{min-height:calc(100vh - 65px);display:flex;align-items:center;justify-content:center;padding:60px 32px}
.full-screen-msg .panel{max-width:520px;background:var(--white);border:1px solid var(--hairline);padding:34px 36px;border-radius:3px;text-align:center}
.full-screen-msg .panel h2{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:28px;color:var(--espressoD);margin:0 0 10px;line-height:1.2}
.full-screen-msg .panel p{font-size:13.5px;color:var(--clay);line-height:1.6;margin:0 0 8px}
.full-screen-msg .panel .panel-actions{margin-top:22px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---- App layout: sidebar + main ---- */
.app-shell{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 65px)}
.sidebar{background:var(--white);border-right:1px solid var(--hairline);display:flex;flex-direction:column;padding:18px 0}
.sidebar h4{font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);margin:14px 18px 8px;font-weight:700}
.sidebar .sb-item{display:flex;align-items:center;justify-content:space-between;padding:8px 18px;font-size:12.5px;color:var(--espressoD);cursor:pointer;border-left:2px solid transparent;line-height:1.3;gap:8px}
.sidebar .sb-item:hover{background:var(--coralTint)}
.sidebar .sb-item.active{background:var(--coralTint);border-left-color:var(--coral);color:var(--coralDeep);font-weight:600}
.sidebar .sb-item .sb-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar .sb-item .sb-meta{font-size:10px;color:var(--muted);font-weight:400;flex-shrink:0}
.sidebar .sb-new{margin:6px 18px;padding:9px 12px;background:var(--coral);color:#fff;border:1px solid var(--coral);font-size:12px;cursor:pointer;border-radius:2px;letter-spacing:0.04em;font-weight:500;width:calc(100% - 36px);text-align:center;font-family:inherit}
.sidebar .sb-new:hover{background:var(--coralDeep);border-color:var(--coralDeep)}
.sidebar .sb-secondary{margin:6px 18px;padding:8px 12px;background:var(--white);color:var(--espressoD);border:1px solid var(--hairline);font-size:11.5px;cursor:pointer;border-radius:2px;letter-spacing:0.04em;width:calc(100% - 36px);text-align:center;font-family:inherit}
.sidebar .sb-secondary:hover{border-color:var(--coral);color:var(--coralDeep)}
.sidebar .sb-divider{height:1px;background:var(--hairline);margin:14px 18px}
.sidebar .sb-empty{padding:8px 18px;font-size:11px;color:var(--muted);font-style:italic}
.sidebar .sb-foot{margin-top:auto;padding:14px 18px;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:6px}
.sidebar .sb-foot .who{font-size:11px;color:var(--muted);line-height:1.4}
.sidebar .sb-foot .who strong{color:var(--espressoD);font-weight:600;display:block;font-size:12px;margin-bottom:1px}
.sidebar .sb-logout{padding:7px 10px;background:none;border:1px solid var(--hairline);color:var(--muted);font-size:11px;cursor:pointer;border-radius:2px;letter-spacing:0.06em;text-transform:uppercase;font-weight:600;font-family:inherit}
.sidebar .sb-logout:hover{border-color:var(--coralDeep);color:var(--coralDeep)}

/* Personas in sidebar */
.sidebar .sb-h4-row{display:flex;align-items:center;justify-content:space-between;padding-right:18px}
.sidebar .sb-h4-row span{display:inline-block}
.sidebar .sb-h4-link{font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--coral);font-weight:600;text-decoration:none}
.sidebar .sb-h4-link:hover{color:var(--coralDeep)}
.sidebar .sb-persona{display:flex;align-items:center;gap:10px;padding:7px 18px;cursor:pointer;border-left:2px solid transparent}
.sidebar .sb-persona:hover{background:var(--coralTint)}
.sidebar .sb-avatar{width:34px;height:34px;border-radius:50%;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,var(--sand),var(--coralTint));display:flex;align-items:center;justify-content:center;font-family:'DM Serif Display',Georgia,serif;font-size:14px;color:var(--coralDeep);border:1px solid var(--hairline)}
.sidebar .sb-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.sidebar .sb-pmeta{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.sidebar .sb-pname{font-size:12.5px;color:var(--espressoD);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.sidebar .sb-prole{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;letter-spacing:0.02em}
.sidebar .sb-new-persona{display:block;margin:4px 18px 0;padding:5px 8px;font-size:10.5px;letter-spacing:0.06em;color:var(--muted);text-align:center;border:1px dashed var(--hairline);border-radius:2px;text-decoration:none;font-weight:500;cursor:pointer}
.sidebar .sb-new-persona:hover{border-color:var(--coral);color:var(--coralDeep)}

.workspace{display:flex;flex-direction:column;min-width:0;background:var(--cream)}
.workspace-toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 26px;background:var(--white);border-bottom:1px solid var(--hairline);gap:12px;flex-wrap:wrap}
.workspace-toolbar .wt-left{display:flex;align-items:center;gap:14px;min-width:0;flex:1}
.workspace-toolbar .wt-title{font-family:'DM Serif Display',Georgia,serif;font-size:20px;color:var(--espressoD);line-height:1.2;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:520px}
.workspace-toolbar input.wt-title-input{font-family:'DM Serif Display',Georgia,serif;font-size:20px;color:var(--espressoD);background:transparent;border:1px solid transparent;padding:3px 6px;border-radius:2px;min-width:240px;width:100%;max-width:520px;outline:none}
.workspace-toolbar input.wt-title-input:hover{border-color:var(--hairline)}
.workspace-toolbar input.wt-title-input:focus{border-color:var(--coral);background:var(--cream)}
.workspace-toolbar .wt-status{font-size:11px;color:var(--muted);letter-spacing:0.04em;font-style:italic;min-width:90px}
.workspace-toolbar .wt-status.saving{color:var(--okay)}
.workspace-toolbar .wt-status.saved{color:var(--good)}
.workspace-toolbar .wt-status.error{color:var(--coralDeep)}
.workspace-toolbar .wt-actions{display:flex;gap:8px;flex-wrap:wrap}

.canvas-host{flex:1;overflow-y:auto}
.canvas-host .journey-canvas{display:flex;flex-direction:column}
.canvas-host .canvas-main{display:grid;grid-template-columns:1fr 380px;grid-template-rows:auto 1fr;gap:0;background:var(--cream)}
.canvas-host .canvas-main .curve-section{grid-column:1;grid-row:1;padding:22px 28px 6px;border-right:1px solid var(--hairline)}
.canvas-host .canvas-main .rail-section{grid-column:1;grid-row:2;padding:14px 28px 26px;border-right:1px solid var(--hairline)}
.canvas-host .canvas-main .inspector{grid-column:2;grid-row:1 / span 2;padding:22px 24px;background:var(--white);border-left:1px solid var(--hairline);min-height:600px;overflow-y:auto}

/* Read-only flag (admin journey viewer + template preview) */
.journey-canvas.read-only .editable{cursor:default}
.journey-canvas.read-only .editable:hover{background:transparent}
.journey-canvas.read-only .stage{cursor:default}
.journey-canvas.read-only input,
.journey-canvas.read-only textarea,
.journey-canvas.read-only select{background:var(--cream);color:var(--clay)}
.journey-canvas.read-only .friction-tag{cursor:default}
.journey-canvas.read-only .friction-tag:hover{border-color:var(--hairline)}

/* ---- Journey cards grid (empty workspace state) ---- */
.cards-host{padding:32px 36px;overflow-y:auto;flex:1}
.cards-host .cards-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px;gap:18px;flex-wrap:wrap}
.cards-host .cards-head h1{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:30px;line-height:1.15;color:var(--espressoD);margin:0}
.cards-host .cards-head h1 em{color:var(--coral);font-style:italic}
.cards-host .cards-head .eyebrow{margin-bottom:6px}
.cards-host .cards-head .sub{font-size:13px;color:var(--clay);margin-top:4px;line-height:1.5;max-width:540px}
.cards-host .cards-actions{display:flex;gap:10px;flex-wrap:wrap}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:22px}
.j-card{background:var(--white);border:1px solid var(--hairline);border-radius:3px;padding:18px 18px 16px;cursor:pointer;transition:box-shadow .15s, border-color .15s;display:flex;flex-direction:column;gap:6px;min-height:140px;position:relative}
.j-card:hover{border-color:var(--coral);box-shadow:0 4px 14px rgba(184,46,27,0.08)}
.j-card .j-eyebrow{font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);font-weight:600}
.j-card .j-title{font-family:'DM Serif Display',Georgia,serif;font-size:20px;color:var(--espressoD);line-height:1.2;margin:2px 0 0}
.j-card .j-persona{font-size:12px;color:var(--clay);line-height:1.4}
.j-card .j-meta{font-size:11px;color:var(--muted);margin-top:auto;display:flex;justify-content:space-between;gap:8px}
.j-card .j-delete{position:absolute;top:10px;right:10px;width:24px;height:24px;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;border-radius:2px;opacity:0;transition:opacity .15s}
.j-card:hover .j-delete{opacity:1}
.j-card .j-delete:hover{background:var(--coralTint);color:var(--coralDeep)}
.j-card.template{background:var(--cream);border-style:dashed}
.j-card.template .j-eyebrow{color:var(--coralDeep)}

.empty-grid{padding:40px 20px;text-align:center;color:var(--muted);font-size:13px;background:var(--white);border:1px dashed var(--hairline);border-radius:3px;margin-top:22px}
.empty-grid strong{color:var(--espressoD);font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:18px;display:block;margin-bottom:6px}

/* ---- Modal (template picker / confirmations) ---- */
.modal-backdrop{position:fixed;inset:0;background:rgba(40,30,25,0.55);z-index:90;display:flex;align-items:center;justify-content:center;padding:40px;backdrop-filter:blur(2px)}
.modal{background:var(--white);max-width:760px;width:100%;max-height:88vh;border-radius:3px;border-top:4px solid var(--coral);display:flex;flex-direction:column;overflow:hidden}
.modal .modal-head{padding:20px 24px 6px}
.modal h3{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:24px;color:var(--espressoD);margin:0 0 6px;line-height:1.2}
.modal .modal-sub{font-size:13px;color:var(--clay);margin:0 0 14px;line-height:1.5}
.modal .modal-body{padding:0 24px 18px;overflow-y:auto;flex:1}
.modal .modal-foot{padding:14px 24px;border-top:1px solid var(--hairline);display:flex;justify-content:flex-end;gap:8px;background:var(--cream)}

/* ---- Admin tables ---- */
.admin-page{padding:26px 32px;background:var(--cream);min-height:calc(100vh - 65px)}
.admin-tabs{display:flex;gap:0;border-bottom:1px solid var(--hairline);margin-bottom:18px}
.admin-tabs button{background:none;border:none;padding:11px 18px;font-size:12.5px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;letter-spacing:0.04em;font-family:inherit;font-weight:500}
.admin-tabs button:hover{color:var(--espressoD)}
.admin-tabs button.active{color:var(--coralDeep);border-bottom-color:var(--coral);font-weight:600}
.admin-tab-content{background:var(--white);border:1px solid var(--hairline);border-radius:3px;padding:0;overflow:hidden}
.admin-table{width:100%;border-collapse:collapse;font-size:12.5px}
.admin-table th{text-align:left;padding:12px 14px;background:var(--cream);font-size:9.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);font-weight:700;border-bottom:1px solid var(--hairline)}
.admin-table td{padding:12px 14px;border-bottom:1px solid var(--hairline);color:var(--espressoD);vertical-align:middle}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr.clickable{cursor:pointer}
.admin-table tr.clickable:hover{background:var(--coralTint)}
.admin-table .btn-row{display:flex;gap:6px;flex-wrap:wrap}
.admin-table .btn-row button{padding:6px 10px;font-size:11px;border-radius:2px;cursor:pointer;letter-spacing:0.04em;font-family:inherit;border:1px solid var(--hairline);background:var(--white);color:var(--espressoD)}
.admin-table .btn-row button.approve{background:var(--coral);color:#fff;border-color:var(--coral)}
.admin-table .btn-row button.approve:hover{background:var(--coralDeep);border-color:var(--coralDeep)}
.admin-table .btn-row button.approve-admin{background:var(--navy);color:#fff;border-color:var(--navy)}
.admin-table .btn-row button.reject:hover{border-color:var(--coralDeep);color:var(--coralDeep)}
.status-pill{display:inline-block;padding:2px 8px;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;border-radius:2px;font-weight:600}
.status-pending{background:var(--coralTint);color:var(--coralDeep)}
.status-active{background:#e1efe5;color:var(--good)}
.status-rejected{background:#eee;color:var(--muted)}
.role-pill{display:inline-block;padding:2px 8px;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;border-radius:2px;font-weight:600;background:var(--cream);color:var(--espressoD);border:1px solid var(--hairline)}
.role-admin{background:var(--navy);color:#fff;border-color:var(--navy)}

.admin-empty{padding:40px 24px;text-align:center;color:var(--muted);font-size:13px}

/* Read-only admin viewer slide-over */
.viewer-overlay{position:fixed;inset:0;background:rgba(40,30,25,0.5);z-index:80;display:flex;align-items:stretch;justify-content:flex-end}
.viewer-panel{width:min(96vw,1280px);background:var(--cream);overflow-y:auto;box-shadow:-20px 0 50px rgba(0,0,0,0.18);display:flex;flex-direction:column}
.viewer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;background:var(--white);border-bottom:1px solid var(--hairline);position:sticky;top:0;z-index:5}
.viewer-head h2{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:20px;color:var(--espressoD);margin:0;line-height:1.2}
.viewer-head .vh-meta{font-size:11px;color:var(--muted);margin-top:2px}
.viewer-close{padding:7px 14px;background:none;border:1px solid var(--hairline);color:var(--espressoD);font-size:12px;cursor:pointer;border-radius:2px;font-family:inherit}
.viewer-close:hover{border-color:var(--coralDeep);color:var(--coralDeep)}

/* ---- Small utilities ---- */
.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--hairline);border-top-color:var(--coral);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
.muted{color:var(--muted)}
.inline-link{color:var(--coralDeep);text-decoration:underline;cursor:pointer}
.inline-link:hover{color:var(--coral)}

@media (max-width:1100px){
  .canvas-host .canvas-main{grid-template-columns:1fr}
  .canvas-host .canvas-main .inspector{grid-column:1;grid-row:auto;border-left:none;border-top:1px solid var(--hairline)}
  .app-shell{grid-template-columns:1fr}
  .sidebar{border-right:none;border-bottom:1px solid var(--hairline)}
}

/* ===== Qualtrics extensions ===== */

/* Engine toolbar (state toggle + export-both inside canvas) */
.engine-toolbar{display:flex;justify-content:space-between;align-items:center;padding:10px 26px;background:var(--white);border-bottom:1px solid var(--hairline);gap:10px}

/* Persona expander */
.ps-cell-persona .ps-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.ps-cell-persona .ps-head .ps-lbl{margin-bottom:0}
.persona-expand{font-size:10px;letter-spacing:0.12em;color:var(--coralDeep);text-decoration:none;font-weight:600;text-transform:uppercase;cursor:pointer}
.persona-expand:hover{color:var(--coral);text-decoration:underline}
.persona-advanced{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;padding:14px 26px 18px;background:var(--cream);border-bottom:1px solid var(--hairline)}
.persona-advanced .pa-field{display:flex;flex-direction:column;gap:4px}
.persona-advanced .pa-wide{grid-column:span 1}
.persona-advanced label{font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);font-weight:600}
.persona-advanced input,.persona-advanced textarea{padding:7px 9px;border:1px solid var(--hairline);background:var(--white);font:inherit;font-size:12px;color:var(--espressoD);border-radius:2px;outline:none;font-family:inherit;resize:vertical}
.persona-advanced input:focus,.persona-advanced textarea:focus{border-color:var(--coral)}

/* State toggle (segmented current / future) */
.state-toggle{display:inline-flex;border:1px solid var(--hairline);border-radius:2px;overflow:hidden;background:var(--white);margin-right:6px}
.state-toggle button{padding:8px 14px;border:none;background:transparent;font-size:11.5px;letter-spacing:0.04em;cursor:pointer;color:var(--muted);font-family:inherit;border-right:1px solid var(--hairline)}
.state-toggle button:last-child{border-right:none}
.state-toggle button.active{background:var(--coralDeep);color:#fff;font-weight:600}
.state-toggle button:hover:not(.active){background:var(--coralTint);color:var(--coralDeep)}

/* Moment pin on curve */
.moment-pin{fill:var(--coralDeep)}

/* Moment-that-matters pill on rail card */
.moment-pill{background:var(--coralDeep);color:#fff;font-size:9px;letter-spacing:0.18em;font-weight:700;padding:5px 10px;text-align:center;border-radius:3px 3px 0 0;letter-spacing:0.2em}

/* Stage attitudes (customer voice quote) */
.stage-attitudes{font-size:10.5px;color:var(--clay);font-style:italic;line-height:1.4;margin-top:6px;padding-top:6px;border-top:1px dashed var(--faint);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Touchpoint — off-stage variant */
.tp.off-stage{border:1px dashed var(--hairline);background:var(--white);opacity:0.78}
.tp.off-stage .tp-icon{filter:grayscale(1)}
.tp.off-stage .tp-label{color:var(--muted);font-style:italic}
.tp.off-stage:hover{background:var(--cream);border-color:var(--clay)}

/* Curve legend pin marker */
.curve-legend .pin{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--coralDeep)}

/* Curve legend layout — accept extra item */
.curve-legend{gap:12px}

/* Opportunities section in stage cards */
.stage-opps{padding:10px 14px 12px;border-top:1px dashed var(--faint);background:#fff;display:flex;flex-direction:column;gap:6px}
.opps-head{font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:2px}
.opportunity{padding:7px 9px;background:var(--cream);border:1px solid var(--hairline);border-radius:2px;cursor:pointer;transition:background .12s}
.opportunity:hover{background:var(--coralTint);border-color:var(--coralSoft)}
.opportunity.selected{background:var(--coralTint);border-color:var(--coral)}
.opportunity .opp-label{font-size:11.5px;font-weight:600;color:var(--espressoD);line-height:1.25;margin-bottom:4px}
.opp-scores{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.opp-chip{font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:8px;letter-spacing:0.04em;color:#fff;line-height:1.2}
.opp-chip.f{background:var(--navy)}
.opp-chip.v{background:var(--good)}
.opp-chip.d{background:var(--coral)}
.opp-comp{font-size:9.5px;color:var(--muted);margin-left:auto;font-weight:500}
.opp-add{padding:5px 10px;color:var(--coralDeep);font-size:10.5px;text-align:center;border:1px dashed var(--coralSoft);border-radius:2px;cursor:pointer;letter-spacing:0.06em;text-transform:uppercase;font-weight:600}
.opp-add:hover{background:var(--coralTint);border-color:var(--coral)}

/* Empty future-state CTA */
.future-empty{flex:1;min-width:100%;background:var(--white);border:1px dashed var(--hairline);border-radius:3px;padding:36px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.future-empty .fe-title{font-family:'DM Serif Display',Georgia,serif;font-size:22px;color:var(--espressoD)}
.future-empty .fe-body{font-size:13px;color:var(--clay);max-width:440px;line-height:1.5}
.future-empty .fe-actions{display:flex;gap:10px;margin-top:6px}

/* Inspector — check line for moment-that-matters */
.insp-check{margin-top:4px}
.check-line{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--espressoD);font-weight:500;cursor:pointer}
.check-line input[type="checkbox"]{accent-color:var(--coralDeep);width:16px;height:16px;cursor:pointer}
.insp-check small{display:block;font-size:10.5px;color:var(--muted);margin-top:4px;line-height:1.4}

/* Inspector — visibility (on-stage / off-stage) */
.visibility-toggle{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px}
.vis-opt{display:flex;flex-direction:column;padding:8px 10px;border:1px solid var(--hairline);background:var(--white);border-radius:2px;cursor:pointer;font-size:11.5px;font-weight:600;color:var(--espressoD);line-height:1.3}
.vis-opt small{font-size:9.5px;color:var(--muted);font-weight:400;margin-top:2px;letter-spacing:0.04em}
.vis-opt:hover{border-color:var(--coral)}
.vis-opt.active{background:var(--coralTint);border-color:var(--coral);color:var(--coralDeep)}
.vis-opt input[type="radio"]{display:none}

/* Opportunity inspector score row colours */
.score-row.opp-f .sv{color:var(--navy)}
.score-row.opp-v .sv{color:var(--good)}
.score-row.opp-d .sv{color:var(--coral)}
.opp-composite{margin-top:10px;padding:10px 12px;background:var(--cream);border:1px solid var(--hairline);border-radius:2px;font-size:12px;color:var(--espressoD);display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.opp-composite strong{font-family:'DM Serif Display',Georgia,serif;font-size:22px;color:var(--coralDeep);font-weight:400}
.opp-composite small{color:var(--muted);font-size:10.5px}

/* ===========================================================
   JOURNEY CO-BUILD · 2026 REDESIGN LAYER
   - lighter base (qualtrics-feel)
   - indigo accent (#6366F1)
   - slim stage cards (counts only, details in drawer)
   - right-side drawer for inspector
   - export dropdown (concise / detailed / json)
   =========================================================== */

:root{
  /* ---- New tokens ---- */
  --bg:#F7FAFC;           /* canvas background */
  --surface:#FFFFFF;      /* cards / panels */
  --surfaceAlt:#F1F5F9;   /* secondary card backgrounds */
  --ink:#1F2A44;          /* primary text (keep navy) */
  --ink2:#3B4A6B;         /* secondary text */
  --mutedNew:#6B7588;     /* muted text */
  --hair:#E2E8F0;         /* hairlines, soft */
  --hair2:#CBD5E1;        /* stronger hairline */
  --accent:#B82E1B;       /* VALORICE coral */
  --accentDeep:#8E2214;   /* darker coral for hover/text */
  --accentSoft:#FBE9E5;   /* coral wash for selected backgrounds */
  --accentTint:#FDF4F1;   /* lightest coral tint for hovers */
  --future:#0EA5E9;       /* sky blue — future state */
  --futureSoft:#E0F2FE;
  --good2:#10B981;        /* emerald */
  --warn:#F59E0B;         /* amber */
  --bad2:#EF4444;         /* red */
  --emoNew:#F97316;       /* warm orange for emotion */
  --shadow:0 1px 2px rgba(15,23,42,0.04), 0 2px 8px rgba(15,23,42,0.06);
  --shadowLg:0 8px 28px rgba(15,23,42,0.12);
  --r:8px;                /* card radius */
  --r2:12px;              /* drawer/modal radius */
}

/* ---- Body / typography ---- */
html, body{ background: var(--bg) !important; color: var(--ink) !important; font-size:14px; }

/* ---- Header ---- */
header, .page-header{ background: var(--surface) !important; border-bottom:1px solid var(--hair) !important; }
.brand .mark, .page-header .mark{ background: transparent !important; border-radius:6px !important; }
.brand .name, .page-header .name{ color: var(--ink) !important; }
.brand .sub, .page-header .sub{ color: var(--mutedNew) !important; }

.btn-ghost{ border:1px solid var(--hair) !important; background: var(--surface) !important; color: var(--ink) !important; border-radius:6px !important; padding:8px 14px !important; font-weight:500; }
.btn-ghost:hover{ border-color: var(--accent) !important; color: var(--accentDeep) !important; background: var(--accentTint) !important; }
.btn-primary{ background: var(--accent) !important; border:1px solid var(--accent) !important; color:#fff !important; border-radius:6px !important; padding:8px 14px !important; font-weight:600; box-shadow:0 1px 0 rgba(184,46,27,0.25); }
.btn-primary:hover{ background: var(--accentDeep) !important; border-color: var(--accentDeep) !important; }

/* ---- Persona strip ---- */
.persona-strip{ background: var(--surface) !important; border-bottom:1px solid var(--hair) !important; }
.ps-cell{ border-right:1px solid var(--hair) !important; }
.ps-lbl{ color: var(--mutedNew) !important; font-weight:700; letter-spacing:0.18em; }
.ps-val{ color: var(--ink) !important; }
.ps-sub{ color: var(--ink2) !important; }
.editable:hover{ background: var(--accentTint) !important; border-radius:4px; }
.editable:focus{ outline:1px solid var(--accent) !important; background: var(--accentTint) !important; }
.persona-expand{ color: var(--accentDeep) !important; }
.persona-expand:hover{ color: var(--accent) !important; }
.persona-advanced{ background: var(--surfaceAlt) !important; border-bottom:1px solid var(--hair) !important; }
.persona-advanced label{ color: var(--mutedNew) !important; }
.persona-advanced input, .persona-advanced textarea{ border:1px solid var(--hair) !important; background: var(--surface) !important; color: var(--ink) !important; border-radius:6px !important; }
.persona-advanced input:focus, .persona-advanced textarea:focus{ border-color: var(--accent) !important; }

/* CX index overall row */
.ov{ background: var(--surfaceAlt) !important; border:1px solid var(--hair) !important; border-radius:6px !important; }
.ov-total{ background: var(--accentSoft) !important; border-color: var(--accent) !important; }
.ov-n{ color: var(--ink) !important; font-weight:500; }
.ov-total .ov-n{ color: var(--accentDeep) !important; }
.ov-l{ color: var(--mutedNew) !important; font-weight:600; }

/* ---- State toggle ---- */
.state-toggle{ border:1px solid var(--hair) !important; background: var(--surface) !important; border-radius:6px !important; overflow:hidden; }
.state-toggle button{ border-right:1px solid var(--hair) !important; color: var(--mutedNew) !important; padding:8px 16px !important; font-weight:500; }
.state-toggle button:last-child{ border-right:none !important; }
.state-toggle button.active{ background: var(--accent) !important; color:#fff !important; font-weight:600; }
.state-toggle button:hover:not(.active){ background: var(--accentTint) !important; color: var(--accentDeep) !important; }

/* When future state active, change accent flavour on the toggle */
.state-toggle button[data-view="future"].active{ background: var(--future) !important; }

/* ---- Main canvas areas ---- */
main, .canvas-main{ background: var(--bg) !important; }
.curve-section, .rail-section{ border-right:none !important; padding-right:28px !important; }
.eyebrow{ color: var(--accentDeep) !important; }
.eyebrow::before{ background: var(--accent) !important; }
.section-head h2{ color: var(--ink) !important; }
.section-head h2 em{ color: var(--accent) !important; }

/* ---- Curve ---- */
.curve-wrap{ background: var(--surface) !important; border:1px solid var(--hair) !important; border-radius: var(--r) !important; box-shadow: var(--shadow); }
.curve-grid{ stroke: var(--hair) !important; }
.curve-axis{ fill: var(--mutedNew) !important; }
.curve-stage-label{ fill: var(--ink) !important; }
.curve-line.eff{ stroke: var(--accentDeep) !important; }
.curve-line.ease{ stroke: var(--good2) !important; }
.curve-line.emo{ stroke: var(--emoNew) !important; stroke-width:2.5; }
.curve-line.avg{ stroke: var(--accent) !important; stroke-dasharray:5 4; opacity:0.6; }
.curve-dot.eff{ stroke: var(--accentDeep) !important; fill:#fff !important; }
.curve-dot.ease{ stroke: var(--good2) !important; fill:#fff !important; }
.curve-dot.emo{ stroke: var(--emoNew) !important; fill: var(--emoNew) !important; }
.curve-area{ fill: var(--emoNew) !important; opacity:0.10 !important; }
.curve-legend .dot.eff{ background: var(--accentDeep) !important; }
.curve-legend .dot.ease{ background: var(--good2) !important; }
.curve-legend .dot.emo{ background: var(--emoNew) !important; }
.curve-legend .line{ border-top-color: var(--accent) !important; }
.curve-legend .pin{ border-top-color: var(--accent) !important; }
.curve-legend{ color: var(--mutedNew) !important; }
.moment-pin{ fill: var(--accent) !important; }

/* ---- Stage rail (compact cards) ---- */
.rail{ gap:16px !important; }

.stage{
  flex: 0 0 240px !important;
  background: var(--surface) !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow);
  transition: box-shadow .15s, transform .15s, border-color .15s;
  cursor: pointer;
  min-height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.stage:hover{ border-color: var(--hair2) !important; box-shadow: var(--shadowLg) !important; }
.stage.selected{ border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accentSoft), var(--shadowLg) !important; }
.stage.drag-over{ box-shadow: 0 0 0 3px var(--accent) !important; }

/* future state cards get sky accent */
body[data-active-view="future"] .stage.selected{ border-color: var(--future) !important; box-shadow: 0 0 0 3px var(--futureSoft), var(--shadowLg) !important; }

/* Stage head: number + emoji + title + moment */
.stage-head{
  background: transparent !important;
  border-bottom: 1px solid var(--hair) !important;
  padding: 14px 16px 12px !important;
  border-radius: var(--r) var(--r) 0 0 !important;
}
.stage-num{ color: var(--mutedNew) !important; font-weight:700; letter-spacing:0.16em; margin-bottom:6px; }
.stage-title{
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: 17px !important;
  color: var(--ink) !important;
  line-height: 1.2 !important;
  margin: 0 0 6px !important;
}
.stage-moment{ color: var(--ink2) !important; font-size:11px !important; font-style: italic; line-height:1.4; }
.stage-attitudes{ display: none !important; } /* moved to drawer */

.stage-delete{
  background: transparent !important;
  border:none !important;
  width: 22px; height: 22px; line-height:1;
  border-radius:4px !important;
  color: var(--mutedNew) !important;
  font-size: 16px !important;
}
.stage-delete:hover{ background: var(--accentSoft) !important; color: var(--accentDeep) !important; }

.moment-pill{
  background: var(--accent) !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 4px 10px !important;
  border-radius: var(--r) var(--r) 0 0 !important;
}

/* Hide the old stage-scores grid, replaced by sentiment row */
.stage-scores{ display: none !important; }

/* Sentiment dot row (rendered fresh — see new section below) */
.stage-sentiment{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--hair);
  font-size: 11.5px;
  color: var(--ink2);
}
.stage-sentiment .dot-lg{
  width: 14px; height: 14px; border-radius: 50%;
  flex: 0 0 14px;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px currentColor;
}
.stage-sentiment .sl-eff{ color: var(--accentDeep); }
.stage-sentiment .sl-ease{ color: var(--good2); }
.stage-sentiment .sl-emo{ color: var(--emoNew); }
.stage-sentiment .scores-mini{
  display: flex; gap: 5px; align-items: center; margin-left: auto;
  font-size: 10px; font-weight: 500; color: var(--ink2); letter-spacing: 0.02em;
}
.stage-sentiment .sm-chip{
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surfaceAlt);
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--ink2);
  line-height: 1.3;
}
.stage-sentiment .sm-chip strong{ font-weight: 700; color: var(--ink); }
.stage-sentiment .sm-dot{
  width: 6px; height: 6px; border-radius: 50%; display: inline-block;
}
.stage-sentiment .sm-dot-eff{ background: var(--accentDeep); }
.stage-sentiment .sm-dot-ease{ background: var(--good2); }
.stage-sentiment .sm-dot-emo{ background: var(--emoNew); }

/* Meta-bar (touchpoints / friction / opportunities counts) */
.stage-meta{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--hair);
}
.stage-meta .mb{
  text-align: center;
  padding: 12px 4px;
  cursor: pointer;
  border-right: 1px solid var(--hair);
  transition: background .12s;
}
.stage-meta .mb:last-child{ border-right: none; }
.stage-meta .mb:hover{ background: var(--accentTint); }
.stage-meta .mb-n{
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
}
.stage-meta .mb-l{
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mutedNew);
  margin-top: 5px;
}
.stage-meta .mb.flagged .mb-n{ color: var(--bad2); }
.stage-meta .mb.has-opp .mb-n{ color: var(--good2); }

/* Footer of stage card: details button */
.stage-foot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px 12px;
  margin-top: auto;
}
.stage-foot .ft-time{
  font-size: 10px; color: var(--mutedNew); font-weight: 600; letter-spacing: 0.08em;
}
.stage-foot .ft-open{
  background: var(--accentSoft);
  color: var(--accentDeep);
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.stage-foot .ft-open:hover{ background: var(--accent); color: #fff; }

/* Hide the old inline touchpoint / opportunity lists */
.stage-touchpoints,
.stage-opps{ display: none !important; }

/* ---- Inspector → DRAWER on the right ----
   The engine already renders the same inspector content inside [data-region="inspector"]
   (or #inspector in standalone). We reposition that aside element as a fixed-position
   slide-in drawer instead of a column in the grid.
*/
.inspector,
aside.inspector,
[data-region="inspector"]{
  position: fixed !important;
  top: 0; right: 0;
  width: 440px;
  max-width: 92vw;
  height: 100vh;
  background: var(--surface) !important;
  border-left: 1px solid var(--hair) !important;
  box-shadow: -10px 0 30px rgba(15,23,42,0.08) !important;
  z-index: 40;
  padding: 24px 26px 32px !important;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(0.2, 0.8, 0.2, 1);
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: 0 !important;
}
body.inspector-open .inspector,
body.inspector-open aside.inspector,
body.inspector-open [data-region="inspector"]{
  transform: translateX(0);
}

/* Backdrop when drawer open */
.drawer-backdrop{
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(2px);
  z-index: 35;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
body.inspector-open .drawer-backdrop{ opacity: 1; pointer-events: auto; }

/* Drawer close button */
.drawer-close{
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border: none;
  background: var(--surfaceAlt);
  color: var(--ink);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.drawer-close:hover{ background: var(--accentSoft); color: var(--accentDeep); }

/* Drawer tabs */
.drawer-tabs{
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--hair);
  margin: 8px 0 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.drawer-tabs::-webkit-scrollbar{ display:none; }
.drawer-tabs button{
  background: none;
  border: none;
  padding: 10px 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--mutedNew);
  cursor: pointer;
  font-family: inherit;
  border-bottom: 2px solid transparent;
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin-bottom: -1px;
}
.drawer-tabs button:hover{ color: var(--ink); }
.drawer-tabs button.active{
  color: var(--accentDeep);
  border-bottom-color: var(--accent);
}

/* Drawer tab content area */
.drawer-pane{ display: none; }
.drawer-pane.active{ display: block; }

/* Inspector contents — restyle for drawer */
.insp-title{ color: var(--mutedNew) !important; }
.insp-name{ color: var(--ink) !important; }
.insp-type-pill{ background: var(--accentSoft) !important; color: var(--accentDeep) !important; border-radius: 4px !important; }
.insp-section h4{ color: var(--mutedNew) !important; }
.insp-field label{ color: var(--mutedNew) !important; }
.insp-field input, .insp-field textarea, .insp-field select{
  border: 1px solid var(--hair) !important;
  border-radius: 6px !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}
.insp-field input:focus, .insp-field textarea:focus, .insp-field select:focus{ border-color: var(--accent) !important; }
.score-row input[type="range"]{ accent-color: var(--accent) !important; }
.score-row.eff .sv{ color: var(--accentDeep) !important; }
.score-row.ease .sv{ color: var(--good2) !important; }
.score-row.emo .sv{ color: var(--emoNew) !important; }
.score-row.opp-f .sv{ color: var(--accentDeep) !important; }
.score-row.opp-v .sv{ color: var(--good2) !important; }
.score-row.opp-d .sv{ color: var(--emoNew) !important; }

.friction-tag{ border:1px solid var(--hair) !important; background: var(--surface) !important; color: var(--ink) !important; border-radius:6px !important; }
.friction-tag:hover{ border-color: var(--accent) !important; }
.friction-tag.active{ background: var(--accent) !important; color:#fff !important; border-color: var(--accent) !important; }
.insp-delete{ border:1px solid var(--hair) !important; color: var(--mutedNew) !important; background: var(--surface) !important; border-radius: 6px !important; }
.insp-delete:hover{ border-color: var(--bad2) !important; color: var(--bad2) !important; }

/* BPMN bridge button in stage inspector */
.insp-bpmn-bridge{ margin-top:18px; padding:14px; background:linear-gradient(180deg, #FAF6F0 0%, #EFE7D6 100%); border:1px solid #E5D9C2; border-radius:8px; }
.btn-bpmn-bridge{ display:block; width:100%; padding:10px 14px; background:#1F2A44; color:#FAF6F0; border:none; border-radius:6px; font-size:12px; font-weight:600; letter-spacing:0.02em; cursor:pointer; transition:background .15s ease; }
.btn-bpmn-bridge:hover{ background:#3B2A1F; }
.btn-bpmn-bridge:disabled{ opacity:.6; cursor:not-allowed; }

.opp-chip.f{ background: var(--accentDeep) !important; }
.opp-chip.v{ background: var(--good2) !important; }
.opp-chip.d{ background: var(--emoNew) !important; }
.opp-composite{ background: var(--surfaceAlt) !important; border:1px solid var(--hair) !important; border-radius:6px !important; }
.opp-composite strong{ color: var(--accentDeep) !important; }
.opp-composite small{ color: var(--mutedNew) !important; }

.vis-opt{ border:1px solid var(--hair) !important; border-radius: 6px !important; background: var(--surface) !important; }
.vis-opt:hover{ border-color: var(--accent) !important; }
.vis-opt.active{ background: var(--accentSoft) !important; border-color: var(--accent) !important; color: var(--accentDeep) !important; }

/* List of touchpoints inside drawer (when stage is selected) */
.drawer-list{ display:flex; flex-direction:column; gap:6px; }
.drawer-list .drow{
  padding: 10px 12px;
  background: var(--surfaceAlt);
  border: 1px solid var(--hair);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink);
  transition: background .12s;
}
.drawer-list .drow:hover{ background: var(--accentTint); border-color: var(--accent); }
.drawer-list .drow .icn{ width:18px; flex:0 0 18px; color: var(--mutedNew); }
.drawer-list .drow .lbl{ flex:1; line-height:1.3; }
.drawer-list .drow.off-stage{ border-style: dashed; opacity: 0.85; }
.drawer-list .drow.off-stage .lbl{ color: var(--mutedNew); font-style: italic; }
.drawer-list .drow .badge{
  font-size: 9.5px;
  background: var(--bad2);
  color: #fff;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.drawer-add{
  padding: 8px 12px;
  border: 1px dashed var(--hair2);
  border-radius: 6px;
  background: transparent;
  color: var(--accentDeep);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 4px;
}
.drawer-add:hover{ background: var(--accentTint); border-color: var(--accent); }

/* ---- Export dropdown menu ---- */
.export-wrap{ position: relative; display: inline-block; }
.export-menu{
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 8px;
  box-shadow: var(--shadowLg);
  padding: 6px;
  min-width: 280px;
  z-index: 50;
  display: none;
}
.export-wrap.open .export-menu,
.export-menu.open{ display: block; }
.export-menu button{
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink);
}
.export-menu button:hover{ background: var(--accentTint); color: var(--accentDeep); }
.export-menu button .em-title{ font-weight: 600; display:block; margin-bottom:2px; }
.export-menu button .em-sub{ font-size: 10.5px; color: var(--mutedNew); font-weight: 400; display:block; }

/* Hide the old separate export-both button (folded into the menu) */
.engine-toolbar [data-action="export-both"]{ display: none !important; }
header #btn-export-both{ display: none !important; }

/* ---- Curve section — float full-width when drawer is open ---- */
main, .canvas-main{
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
}
.curve-section{ grid-column: 1 !important; grid-row: 1 !important; }
.rail-section{ grid-column: 1 !important; grid-row: 2 !important; }

/* Future state toggle visual */
body[data-active-view="future"] .stage-foot .ft-open{
  background: var(--futureSoft);
  color: #0369A1;
}
body[data-active-view="future"] .stage-foot .ft-open:hover{ background: var(--future); color:#fff; }

/* ---- Tour overlay ---- */
.tour-overlay{ background: rgba(15,23,42,0.45) !important; backdrop-filter: blur(3px); }
.tour-card{ border-top:4px solid var(--accent) !important; border-radius: var(--r2) !important; }
.tour-step{ color: var(--accentDeep) !important; }
.tour-title{ color: var(--ink) !important; }
.tour-body{ color: var(--ink2) !important; }
.spotlight-ring{ border-color: var(--accent) !important; box-shadow: 0 0 0 9999px rgba(15,23,42,0.45) !important; }

/* ---- Empty future state ---- */
.future-empty{ background: var(--surface) !important; border:1px dashed var(--hair2) !important; border-radius: var(--r) !important; }
.future-empty .fe-title{ color: var(--ink) !important; }
.future-empty .fe-body{ color: var(--ink2) !important; }

/* Stage drag visual */
.stage.dragging{ opacity: 0.5; }

/* ---- Auth pages keep the lighter base ---- */
.landing{ background: var(--bg) !important; }
.landing-nav{ background: var(--surface) !important; border-bottom-color: var(--hair) !important; }
.landing-eyebrow{ color: var(--accentDeep) !important; }
.landing-h1{ color: var(--ink) !important; }
.landing-h1 em{ color: var(--accent) !important; }
.landing-lede{ color: var(--ink2) !important; }
.cta-primary{ background: var(--accent) !important; border-color: var(--accent) !important; }
.cta-primary:hover{ background: var(--accentDeep) !important; border-color: var(--accentDeep) !important; }
.auth-form{ background: var(--surface) !important; border-color: var(--hair) !important; border-radius: var(--r) !important; }
.auth-form input[type="email"]{ border:1px solid var(--hair) !important; border-radius:6px !important; }
.auth-form input[type="email"]:focus{ border-color: var(--accent) !important; }
.auth-form button[type="submit"]{ background: var(--accent) !important; border-color: var(--accent) !important; border-radius:6px !important; }
.auth-form button[type="submit"]:hover{ background: var(--accentDeep) !important; border-color: var(--accentDeep) !important; }

/* Page header (app/admin shared) */
.page-header .header-nav a.active{ border-color: var(--accent) !important; color: var(--accentDeep) !important; }

/* Footer */
footer.f, footer.landing-footer{ background: var(--surface) !important; border-top-color: var(--hair) !important; }

/* Responsive: drawer becomes full bottom sheet on small screens */
@media (max-width: 768px){
  .inspector,
  aside.inspector,
  [data-region="inspector"]{
    width: 100vw !important;
    max-width: 100vw !important;
    height: 88vh !important;
    top: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    transform: translateY(100%) !important;
    border-left: none !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    box-shadow: 0 -10px 30px rgba(15,23,42,0.15) !important;
  }
  body.inspector-open .inspector,
  body.inspector-open aside.inspector,
  body.inspector-open [data-region="inspector"]{
    transform: translateY(0) !important;
  }
  .stage{ flex: 0 0 220px !important; }
}
/* ============================================================
   BRAND RESTORATION
   ============================================================
   indigo is the in-app interaction colour.
   the Valorice brand must read on:
   - the logo (V tile)
   - the landing / login page
   - the auth card primary button (it's a brand moment)
   - the cards-host (journey gallery) — header & "+ new" only
   ============================================================ */

/* Reusable brand tokens (re-stated to override redesign vars where needed) */
:root{
  --brand-cream: #FAF6F0;
  --brand-sand:  #EFE7D6;
  --brand-coral: #B82E1B;
  --brand-coralD:#8E2210;
  --brand-navy:  #1F2A44;
  --brand-espresso: #3B2A1F;
  --brand-espressoD: #2C1F17;
}

/* --- LOGO TILE (the "V" mark) ----------------------------------- */
.brand .mark,
.page-header .mark{
  background: var(--brand-cream) !important;
  color: var(--brand-coral) !important;
  border: 1.5px solid var(--brand-coral) !important;
  border-radius: 4px !important;
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-weight: 400 !important;
  box-shadow: 0 1px 0 rgba(184,46,27,0.12);
}

/* --- WORDMARK ---------------------------------------------------- */
.brand .name,
.page-header .name{
  color: var(--brand-espressoD) !important;
  font-family: 'DM Serif Display', Georgia, serif !important;
  letter-spacing: -0.01em !important;
}
.brand .sub,
.page-header .sub{
  color: var(--brand-coral) !important;
  letter-spacing: 0.16em !important;
  font-weight: 600 !important;
  font-size: 10.5px !important;
}

/* --- LANDING / LOGIN PAGE (full surface back to brand) ---------- */
.landing{
  background: var(--brand-cream) !important;
}
.landing-nav{
  background: var(--brand-cream) !important;
  border-bottom: 1px solid var(--brand-sand) !important;
}
.landing-eyebrow{
  color: var(--brand-coral) !important;
  letter-spacing: 0.18em !important;
}
.landing-h1{
  color: var(--brand-espressoD) !important;
  font-family: 'DM Serif Display', Georgia, serif !important;
}

/* --- AUTH CARD --------------------------------------------------- */
.auth-form,
.auth-success{
  background: #FFFFFF !important;
  border: 1px solid var(--brand-sand) !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 0 rgba(184,46,27,0.05), 0 8px 24px rgba(59,42,31,0.06) !important;
}
.auth-form h3,
.auth-success h3{
  color: var(--brand-espressoD) !important;
  font-family: 'DM Serif Display', Georgia, serif !important;
}
.auth-sub{
  color: var(--brand-espresso) !important;
  opacity: 0.78;
}
.auth-form label,
.auth-form .auth-label{
  color: var(--brand-espresso) !important;
  letter-spacing: 0.16em !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  opacity: 0.7;
}
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"]{
  background: #FFFFFF !important;
  border: 1px solid var(--brand-sand) !important;
  color: var(--brand-espressoD) !important;
  border-radius: 4px !important;
  padding: 11px 13px !important;
  font-size: 13.5px !important;
}
.auth-form input:focus{
  border-color: var(--brand-coral) !important;
  outline: 2px solid rgba(184,46,27,0.15) !important;
  outline-offset: 0 !important;
}

/* PRIMARY BUTTON on auth form: coral (brand moment) */
.auth-form button[type="submit"]{
  background: var(--brand-coral) !important;
  border: 1px solid var(--brand-coral) !important;
  color: #FFFFFF !important;
  border-radius: 4px !important;
  padding: 12px 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 1px 0 rgba(142,34,16,0.25) !important;
  transition: background 120ms ease, transform 80ms ease !important;
}
.auth-form button[type="submit"]:hover{
  background: var(--brand-coralD) !important;
  border-color: var(--brand-coralD) !important;
}
.auth-form button[type="submit"]:active{
  transform: translateY(1px);
}
.auth-form .auth-back{
  color: var(--brand-espresso) !important;
  opacity: 0.6;
}
.auth-form .auth-back:hover{
  color: var(--brand-coral) !important;
  opacity: 1;
}

/* --- JOURNEY GALLERY (cards-host) header --------------------------- */
.cards-host{ background: var(--brand-cream) !important; }
.cards-host .cards-head h1{
  color: var(--brand-espressoD) !important;
  font-family: 'DM Serif Display', Georgia, serif !important;
}
.cards-host .cards-head .cards-sub{
  color: var(--brand-espresso) !important;
  opacity: 0.7;
}

/* "+ New journey" button = brand moment, coral */
.sidebar .sb-new,
.cards-host .new-journey,
button.new-journey{
  background: var(--brand-coral) !important;
  border: 1px solid var(--brand-coral) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
}
.sidebar .sb-new:hover,
.cards-host .new-journey:hover,
button.new-journey:hover{
  background: var(--brand-coralD) !important;
  border-color: var(--brand-coralD) !important;
}

/* Footer line — keep brand serif touch */
.landing-footer,
footer.landing-footer{
  background: var(--brand-cream) !important;
  border-top: 1px solid var(--brand-sand) !important;
  color: var(--brand-espresso) !important;
  opacity: 0.7;
}

/* --- HEADER container on landing/login also goes warm --- */
body:has(.landing) header,
body:has(.auth-form) header,
.landing header,
.landing .page-header{
  background: var(--brand-cream) !important;
  border-bottom: 1px solid var(--brand-sand) !important;
}

/* --- accent hairline (coral) under the wordmark on landing only --- */
.landing-nav .brand,
.landing .page-header .brand{
  position: relative;
}
.landing-nav .brand::after,
.landing .page-header .brand::after{
  content: '';
  position: absolute;
  left: 48px;
  bottom: -6px;
  width: 28px;
  height: 2px;
  background: var(--brand-coral);
  border-radius: 1px;
}

/* ============================================================
   LOGIN / LANDING — CENTERING & LAYOUT
   ============================================================ */

/* Landing page should be a centered column */
.landing{
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Landing nav: brand left, "authored by" right — but content centered */
.landing-nav{
  width: 100% !important;
  padding: 14px 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: none !important;
}

/* The auth wrapper (whatever contains the form) should grow + center */
.landing main,
.landing .landing-main,
.landing .auth-wrap,
main.landing-main,
.landing-content{
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 24px !important;
  width: 100% !important;
}

/* The form itself: centered card with comfortable width */
.auth-form,
.auth-success{
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  padding: 32px 32px 28px !important;
  text-align: left !important;
}

/* Eyebrow + headline above the card also centered */
.landing-eyebrow{
  text-align: center !important;
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto 8px !important;
  display: block !important;
}
.landing-h1{
  text-align: center !important;
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto 28px !important;
  display: block !important;
}

/* CTA row (if shown) — centered */
.landing-cta-row{
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 auto !important;
}

/* Footer */
.landing-footer{
  width: 100% !important;
  padding: 18px 32px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 11px !important;
}

/* Mobile */
@media (max-width: 640px){
  .landing-nav{ padding: 12px 18px !important; }
  .auth-form, .auth-success{ padding: 24px 22px 22px !important; }
  .landing main, .landing-content{ padding: 24px 16px !important; }
  .landing-footer{ flex-direction: column !important; gap: 6px !important; text-align: center !important; padding: 16px !important; }
  .landing-h1{ font-size: 32px !important; }
}

/* ============================================================
   LANDING INTRO VIEW — CTA buttons + card wrapper
   ============================================================ */

/* The landing-card wraps all three views (intro/form/success).
   Keep it centered and constrained. */
.landing-card{
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-align: center !important;
}

/* Intro lede paragraph */
.landing-lede{
  color: var(--brand-espresso) !important;
  opacity: 0.78 !important;
  text-align: center !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  max-width: 420px !important;
  margin: 0 auto 24px !important;
}

/* Primary CTA — coral brand moment */
.cta-primary{
  background: var(--brand-coral) !important;
  border: 1px solid var(--brand-coral) !important;
  color: #FFFFFF !important;
  border-radius: 4px !important;
  padding: 12px 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: background 120ms ease !important;
  box-shadow: 0 1px 0 rgba(142,34,16,0.25) !important;
}
.cta-primary:hover{
  background: var(--brand-coralD) !important;
  border-color: var(--brand-coralD) !important;
}

/* Ghost CTA — outlined coral */
.cta-ghost{
  background: transparent !important;
  border: 1px solid var(--brand-sand) !important;
  color: var(--brand-espressoD) !important;
  border-radius: 4px !important;
  padding: 12px 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: border-color 120ms ease, color 120ms ease !important;
}
.cta-ghost:hover{
  border-color: var(--brand-coral) !important;
  color: var(--brand-coral) !important;
}

/* Override the earlier indigo .cta-primary rule (line ~522) */

/* ============================================================
   LANDING PAGE — final brand cohesion
   ============================================================ */

/* When on landing, the whole body is cream to match the nav */
body:has(.landing){
  background: var(--brand-cream) !important;
}

/* Italic emphasis in headline = coral, not indigo */
.landing-h1 em{
  color: var(--brand-coral) !important;
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-style: italic !important;
}

/* Footnote under CTAs ("access is granted by Valérie...") */
.landing-card .landing-footnote,
.landing-card .access-note,
.landing .auth-helper{
  color: var(--brand-espresso) !important;
  opacity: 0.65 !important;
  font-size: 12.5px !important;
  text-align: center !important;
  margin-top: 14px !important;
}

/* Force cream background on the entire landing page tree */
html:has(.landing),
html:has(.landing) body,
body .landing,
.landing,
.landing-main,
main.landing-main{
  background: var(--brand-cream) !important;
  background-color: var(--brand-cream) !important;
}

/* ========================================================================
   FINAL BRAND OVERRIDE — real V-mark SVG + Poppins (do not edit above)
   ======================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Figtree:wght@400;500;600;700&display=swap');

/* SVG mark — strip ALL box styling, only size */
.brand .mark,
.page-header .mark,
svg.mark{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-block !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Brand name + all display headings → Poppins */
.brand .name,
.page-header .name,
.landing-h1,
.landing-h1 em,
.auth-form h3,
.auth-success h3,
.tour-title,
.section-head h2,
.stage-title,
.stage-score .v,
.insp-name,
.score-row .sv,
.full-screen-msg .panel h2,
.workspace-toolbar .wt-title,
.workspace-toolbar input.wt-title-input,
.cards-host .cards-head h1,
.j-card .j-title,
.empty-grid strong,
.modal h3,
.viewer-head h2,
.future-empty .fe-title,
.opp-composite strong,
.ps-val,
.ov-n{
  font-family: 'Poppins', system-ui, -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: -0.01em !important;
}

/* Brand name specifically — uppercase tracking */
.brand .name,
.page-header .name{
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: #3B2A1F !important;
}

/* Landing hero — keep em coral but normal style */
.landing-h1 em{
  color: #B82E1B !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

/* CX Index asterisk reference */
.forrester-ref{
  color: var(--mutedNew, #6B7588);
  font-size: 0.8em;
  font-weight: 500;
  cursor: help;
  margin-left: 2px;
}

/* ============================================================
   Persona chip (live persona switcher in canvas toolbar)
   ============================================================ */
.persona-chip{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--cream, #FAF6F0);
  border:1px solid var(--hairline, #E5DECD);
  border-radius:999px;
  padding:5px 14px 5px 5px;
  cursor:pointer;
  font-family:inherit;
  transition:all .15s ease;
  max-width:280px;
}
.persona-chip:hover{
  border-color:var(--coral, #B82E1B);
  background:#fff;
}
.persona-chip .pc-avatar{
  width:32px; height:32px; border-radius:50%; overflow:hidden;
  background:linear-gradient(135deg,var(--sand,#EFE7D6),var(--coralTint,#F5DCD4));
  display:flex; align-items:center; justify-content:center;
  font-family:'DM Serif Display',Georgia,serif; font-size:14px;
  color:var(--coralDeep, #B82E1B);
  border:1px solid var(--hairline,#E5DECD);
  flex-shrink:0;
}
.persona-chip .pc-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.persona-chip .pc-meta{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; min-width:0; }
.persona-chip .pc-name{
  font-size:12px; font-weight:600; color:var(--espresso,#3B2A1F);
  white-space:nowrap; text-overflow:ellipsis; overflow:hidden; max-width:180px;
}
.persona-chip .pc-role{
  font-size:9.5px; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--muted,#7A6E5B);
  white-space:nowrap; text-overflow:ellipsis; overflow:hidden; max-width:180px;
}
.persona-chip .pc-caret{ font-size:10px; color:var(--muted,#7A6E5B); }

/* Persona picker modal */
.modal.modal-persona{ max-width:760px; }
.modal-persona .pp-section{
  font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--muted,#7A6E5B); margin:18px 0 8px;
}
.modal-persona .pp-section:first-child{ margin-top:0; }
.modal-persona .pp-hint{
  font-size:12px; color:var(--muted,#7A6E5B); margin:0 0 10px;
}
.persona-pick-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:10px;
}
.persona-pick-card{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--hairline,#E5DECD);
  border-radius:10px; padding:10px; cursor:pointer;
  transition:all .15s ease;
}
.persona-pick-card:hover{
  border-color:var(--coral,#B82E1B);
  box-shadow:0 4px 14px rgba(184,46,27,0.08);
  transform:translateY(-1px);
}
.persona-pick-card.selected{
  border-color:var(--coral,#B82E1B);
  background:var(--coralTint, #F5DCD4);
}
.persona-pick-card .pp-avatar{
  width:46px; height:46px; border-radius:50%; overflow:hidden;
  background:linear-gradient(135deg,var(--sand,#EFE7D6),var(--coralTint,#F5DCD4));
  display:flex; align-items:center; justify-content:center;
  font-family:'DM Serif Display',Georgia,serif; font-size:20px;
  color:var(--coralDeep,#B82E1B);
  border:1px solid var(--hairline,#E5DECD); flex-shrink:0;
}
.persona-pick-card .pp-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.persona-pick-card .pp-meta{ display:flex; flex-direction:column; gap:2px; line-height:1.2; min-width:0; }
.persona-pick-card .pp-name{
  font-weight:600; font-size:13px; color:var(--espresso,#3B2A1F);
  display:flex; align-items:center; gap:6px;
}
.persona-pick-card .pp-badge{
  display:inline-block; background:var(--navy,#1F2A44); color:#fff;
  font-size:9px; letter-spacing:0.08em; text-transform:uppercase;
  padding:1px 6px; border-radius:3px; font-weight:600;
}
.persona-pick-card .pp-role{
  font-size:10px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--muted,#7A6E5B);
}
.persona-pick-card .pp-segment{
  font-size:11px; color:var(--muted,#7A6E5B);
}

/* ===== Touchpoint clarity patch (2026-09) ===== */
/* Tighter meta labels so "Opportunities" / "Friction tags" never clip */
.stage-meta .mb-l{
  font-size: 8px;
  letter-spacing: 0.06em;
  line-height: 1.25;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
.stage-sentiment{ cursor: help; }

/* Touchpoint definition + guidance */
.tp-help{
  display: block;
  font-size: 11px;
  line-height: 1.45;
  color: var(--mutedNew);
  background: var(--bg);
  border-left: 2px solid var(--hair);
  padding: 8px 10px;
  margin: 0 0 12px;
}
.tp-count{
  float: right;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--mutedNew);
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 2px 8px;
}
.tp-count.full{ color: var(--bad2); border-color: var(--bad2); }
.tp-guide{ margin: 0 0 12px; }
.tp-guide-row{
  display: flex;
  gap: 8px;
  font-size: 10.5px;
  line-height: 1.6;
}
.tp-guide-row .tp-ok{ flex: 1 1 58%; color: var(--good2); }
.tp-guide-row .tp-no{ flex: 1 1 42%; color: var(--mutedNew); text-decoration: line-through; }
.tp-cap-note{
  font-size: 11px;
  line-height: 1.45;
  color: var(--bad2);
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 3px;
  padding: 8px 10px;
  margin-top: 8px;
}

/* Channel example picker */
.tp-ex-field label{ display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tp-ex-switch{ display: inline-flex; border: 1px solid var(--hair); border-radius: 3px; overflow: hidden; }
.tp-ex-set{
  border: none;
  background: var(--white);
  color: var(--mutedNew);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  cursor: pointer;
}
.tp-ex-set + .tp-ex-set{ border-left: 1px solid var(--hair); }
.tp-ex-set.active{ background: var(--coral); color: #fff; }
.tp-ex-list{ display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 5px; }
.tp-ex{
  border: 1px solid var(--hair);
  background: var(--white);
  color: var(--espressoD);
  font-size: 10.5px;
  line-height: 1.3;
  text-align: left;
  padding: 4px 8px;
  border-radius: 12px;
  cursor: pointer;
}
.tp-ex:hover{ border-color: var(--coral); color: var(--coralDeep); background: var(--coralTint); }
/* Keep the stage rating on one line so card heights stay even */
.stage-sentiment .sl{
  white-space: nowrap;
  font-size: 10.5px;
  letter-spacing: 0.03em;
}