/* ===========================================================
   StressTest My Plan — design system
   Calm, professional, mobile-first. Scenario color-coding:
   green / amber / red / blue. Print stylesheet at the bottom.
   =========================================================== */
:root{
  --bg:#f5f7fb; --card:#ffffff; --ink:#0f172a; --ink-2:#1e293b; --muted:#64748b; --faint:#94a3b8;
  --line:#e6eaf1; --line-2:#eef1f6;
  --navy:#0b1220; --navy-2:#101a30; --navy-3:#16223d;
  --primary:#4f46e5; --primary-d:#4338ca; --primary-l:#eef2ff; --primary-ink:#3730a3;
  --teal:#0d9488;
  --green:#16a34a; --green-l:#ecfdf5; --green-d:#15803d;
  --amber:#d97706; --amber-l:#fffbeb; --amber-d:#b45309;
  --red:#dc2626;   --red-l:#fef2f2;   --red-d:#b91c1c;
  --blue:#2563eb;  --blue-l:#eff6ff;  --blue-d:#1d4ed8;
  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:26px;
  --sh-sm:0 1px 2px rgba(15,23,42,.06);
  --sh:0 1px 2px rgba(15,23,42,.05), 0 10px 28px rgba(15,23,42,.07);
  --sh-lg:0 24px 60px rgba(15,23,42,.14);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --maxw:1080px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
em{font-style:normal;color:var(--primary);font-weight:600;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1.5px solid transparent;
  border-radius:999px;padding:.7rem 1.15rem;font-weight:650;font-size:.95rem;letter-spacing:.01em;
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s;white-space:nowrap;}
.btn:active{transform:translateY(1px);}
.btn-lg{padding:.9rem 1.5rem;font-size:1.02rem;}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 6px 16px rgba(79,70,229,.28);}
.btn-primary:hover{background:var(--primary-d);}
.btn-outline{background:#fff;border-color:var(--line);color:var(--ink-2);}
.btn-outline:hover{border-color:var(--primary);color:var(--primary-ink);background:var(--primary-l);}
.btn-ghost{background:transparent;color:var(--muted);}
.btn-ghost:hover{color:var(--ink);background:#eef1f6;}
.ghost-btn{background:transparent;border:none;color:var(--muted);font-weight:600;font-size:.9rem;padding:.5rem .6rem;border-radius:8px;}
.ghost-btn:hover{color:var(--ink);background:rgba(148,163,184,.14);}
.link-btn{background:none;border:none;color:var(--primary);font-weight:650;font-size:.92rem;padding:.3rem 0;text-decoration:none;}
.link-btn:hover{text-decoration:underline;}
.link-btn.danger{color:var(--red);}

/* =========================================================== LANDING */
.landing{min-height:100vh;background:
  radial-gradient(120% 80% at 50% -10%, #16223d 0%, #0b1220 45%, #0a0f1c 100%);color:#e7ecf6;}
.landing-top{max-width:var(--maxw);margin:0 auto;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;}
.brandbtn{display:flex;align-items:center;gap:.55rem;background:none;border:none;color:inherit;font-weight:800;font-size:1.08rem;}
.logo-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--primary),#7c75f3);color:#fff;font-size:1rem;box-shadow:0 4px 12px rgba(79,70,229,.4);}
.logo-text{letter-spacing:-.01em;}
.logo-dim{color:var(--faint);font-weight:600;}
.landing .logo-text{color:#fff;}
.landing .logo-dim{color:#8ea0c4;}

.hero{max-width:820px;margin:0 auto;padding:3.4rem 1.25rem 2.6rem;text-align:center;}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;font-weight:700;color:#8aa0ff;margin-bottom:1rem;}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,6.4vw,3.9rem);line-height:1.04;letter-spacing:-.02em;color:#fff;}
.hero-sub{margin:1.2rem auto 0;max-width:600px;color:#c2cce0;font-size:1.08rem;line-height:1.6;}
.hero-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem;}
.landing .btn-outline{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.22);color:#fff;}
.landing .btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff;}
.hero .link-btn{color:#9db2ff;display:inline-block;margin-top:1.1rem;}
.hero-note{margin-top:1.5rem;color:#7e90b4;font-size:.92rem;font-style:italic;}

.band{padding:3rem 1.25rem;}
.band .band-title,.band-title{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,3.6vw,2rem);text-align:center;max-width:var(--maxw);margin:0 auto 1.8rem;color:#fff;letter-spacing:-.01em;}
.band-title.left{text-align:left;margin-left:0;}
.band.alt{background:rgba(255,255,255,.025);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);}
.how-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
.how-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:1.4rem;}
.how-num{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(79,70,229,.22);color:#aeb8ff;font-weight:800;margin-bottom:.9rem;}
.how-card h3{font-size:1.1rem;color:#fff;margin-bottom:.4rem;}
.how-card p{color:#b6c2db;font-size:.93rem;line-height:1.55;}

.who{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:2.4rem;align-items:start;}
.who-list{list-style:none;display:flex;flex-direction:column;gap:.7rem;}
.who-list li{position:relative;padding-left:1.6rem;color:#c8d2e6;}
.who-list li::before{content:"→";position:absolute;left:0;color:#8aa0ff;}
.example-peek{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:1.3rem;}
.peek-tag{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:#8ea0c4;margin-bottom:.8rem;}
.peek-scn{border-radius:10px;padding:.6rem .8rem;font-weight:650;font-size:.9rem;margin-bottom:.5rem;border-left:4px solid;}
.peek-scn.green{background:rgba(22,163,74,.12);border-color:var(--green);color:#86efac;}
.peek-scn.amber{background:rgba(217,119,6,.12);border-color:var(--amber);color:#fcd34d;}
.peek-scn.red{background:rgba(220,38,38,.12);border-color:var(--red);color:#fca5a5;}
.peek-scn.blue{background:rgba(37,99,235,.14);border-color:var(--blue);color:#93c5fd;}
.example-peek .link-btn{color:#9db2ff;margin-top:.5rem;}

.boundaries{max-width:760px;margin:0 auto;text-align:center;}
.boundaries p{color:#b6c2db;font-size:1rem;line-height:1.65;}
.boundaries strong{color:#fff;}
.landing-foot{text-align:center;padding:2.4rem 1.25rem 3.4rem;}
.landing-foot p{color:#7e90b4;margin-top:1.1rem;font-style:italic;}

/* =========================================================== APP CHROME */
#app>.topbar{max-width:var(--maxw);margin:0 auto;border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:20;}
#app>.topbar .logo-text{color:var(--ink);} #app>.topbar .logo-dim{color:var(--faint);}
.stepper{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:.2rem;padding:1rem 1.25rem .4rem;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.step{display:flex;align-items:center;gap:.5rem;background:none;border:none;color:var(--faint);font-weight:600;font-size:.86rem;white-space:nowrap;padding:.35rem .2rem;}
.step-num{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#e8ecf3;color:var(--muted);font-size:.78rem;font-weight:700;flex:none;}
.step.active{color:var(--ink);}
.step.active .step-num{background:var(--primary);color:#fff;}
.step.done{color:var(--ink-2);} .step.done .step-num{background:var(--green);color:#fff;}
.step:disabled{opacity:.55;cursor:default;}
.step-sep{flex:1;height:1px;background:var(--line);min-width:10px;}

.screen-wrap{max-width:var(--maxw);margin:0 auto;padding:1.2rem 1.25rem 1rem;}
.footerbar{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 1.25rem 1.4rem;}
.disclaimer-strip{max-width:var(--maxw);margin:0 auto;padding:1rem 1.25rem 2.4rem;color:var(--faint);font-size:.76rem;line-height:1.5;border-top:1px solid var(--line);}

/* ---------- cards / titles / fields ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem;box-shadow:var(--sh-sm);margin-bottom:1rem;}
.intro-card{background:linear-gradient(180deg,#fff, #fbfcfe);}
.screen-title{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,3.6vw,2.05rem);letter-spacing:-.01em;line-height:1.1;}
.screen-sub{color:var(--muted);margin-top:.55rem;font-size:1.02rem;line-height:1.55;max-width:70ch;}
.block-title{font-family:var(--serif);font-weight:600;font-size:1.2rem;margin-bottom:.8rem;}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem;}
.field>span{font-weight:650;font-size:.9rem;color:var(--ink-2);}
.field input,.field select,.field textarea,.force-card input,.force-card textarea,.force-card select{
  font-family:inherit;font-size:.98rem;color:var(--ink);background:#fff;border:1.5px solid var(--line);
  border-radius:var(--r-sm);padding:.7rem .8rem;width:100%;transition:border-color .15s, box-shadow .15s;}
.field textarea{resize:vertical;line-height:1.5;}
.field input:focus,.field select:focus,.field textarea:focus,.force-card input:focus,.force-card textarea:focus,.force-card select:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-l);}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;}
.field-hint{color:var(--faint);font-size:.82rem;margin-top:.2rem;}

/* ---------- FORCES ---------- */
.forces-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;}
.force-card{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:var(--r);padding:1rem 1.1rem;box-shadow:var(--sh-sm);transition:opacity .15s, border-color .15s;}
.force-card.excluded{opacity:.5;border-left-color:var(--faint);}
.force-card.sensitive{border-left-color:var(--red);}
.force-top{display:flex;gap:.6rem;align-items:center;margin-bottom:.4rem;}
.force-name{font-weight:700;font-size:1rem;border:none !important;padding:.3rem .1rem !important;background:transparent !important;}
.force-name:focus{box-shadow:none !important;border-bottom:2px solid var(--primary) !important;border-radius:0 !important;}
.incl{display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--muted);font-weight:600;white-space:nowrap;}
.incl input{width:16px;height:16px;accent-color:var(--primary);}
.force-cat{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--primary-ink);background:var(--primary-l);padding:.15rem .5rem;border-radius:6px;margin-bottom:.6rem;}
.force-why{font-size:.9rem !important;color:var(--ink-2) !important;line-height:1.45 !important;margin-bottom:.6rem;}
.force-mini{display:grid;gap:.5rem;margin-bottom:.6rem;}
.force-mini label{display:flex;flex-direction:column;gap:.2rem;}
.force-mini span{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);}
.force-mini input{font-size:.88rem !important;padding:.5rem .6rem !important;}
.force-selects{display:flex;gap:.5rem;align-items:flex-end;flex-wrap:wrap;}
.force-selects label{display:flex;flex-direction:column;gap:.2rem;flex:1;min-width:74px;}
.force-selects span{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--faint);}
.force-selects select{padding:.45rem .4rem !important;font-size:.85rem !important;}
.icon-x{background:#fff;border:1.5px solid var(--line);color:var(--faint);width:36px;height:36px;border-radius:8px;font-size:.9rem;flex:none;}
.icon-x:hover{border-color:var(--red);color:var(--red);background:var(--red-l);}
.btn-add{width:100%;margin-bottom:1rem;border-style:dashed;}
.empty{color:var(--faint);text-align:center;padding:1.5rem;}

/* ---------- SCENARIOS ---------- */
.tone-pick{display:inline-flex;align-items:center;gap:.6rem;margin-top:1rem;font-weight:650;font-size:.9rem;color:var(--ink-2);}
.tone-pick select{width:auto;min-width:180px;}
.scn-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.scn-card{background:var(--card);border:1px solid var(--line);border-top:5px solid var(--c,var(--primary));border-radius:var(--r-lg);padding:1.3rem;box-shadow:var(--sh-sm);}
.scn-card.green{--c:var(--green);--cl:var(--green-l);--cd:var(--green-d);}
.scn-card.amber{--c:var(--amber);--cl:var(--amber-l);--cd:var(--amber-d);}
.scn-card.red{--c:var(--red);--cl:var(--red-l);--cd:var(--red-d);}
.scn-card.blue{--c:var(--blue);--cl:var(--blue-l);--cd:var(--blue-d);}
.scn-head{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.7rem;}
.scn-dot{width:14px;height:14px;border-radius:50%;background:var(--c);flex:none;margin-top:.3rem;box-shadow:0 0 0 4px var(--cl);}
.scn-name{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--cd);}
.scn-head h3{font-family:var(--serif);font-weight:600;font-size:1.25rem;line-height:1.15;}
.scn-narr{color:var(--ink-2);font-size:.97rem;line-height:1.6;}
.scn-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin:.9rem 0;}
.scn-chip{font-size:.76rem;font-weight:650;background:var(--cl);color:var(--cd);padding:.25rem .6rem;border-radius:999px;}
.scn-chip.ghost{background:#f1f4f9;color:var(--muted);}
.scn-cols{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.2rem;margin-top:.4rem;}
.scn-col h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin:.6rem 0 .35rem;}
.scn-col ul{list-style:none;display:flex;flex-direction:column;gap:.3rem;}
.scn-col li{position:relative;padding-left:1rem;font-size:.88rem;color:var(--ink-2);line-height:1.45;}
.scn-col li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--c);}

/* ---------- CONSEQUENCE MAP ---------- */
.cm-table-wrap{overflow-x:auto;padding:.4rem;}
.cm-table{width:100%;border-collapse:collapse;min-width:780px;}
.cm-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);padding:.7rem .7rem;border-bottom:2px solid var(--line);}
.cm-table td{padding:.8rem .7rem;border-bottom:1px solid var(--line-2);font-size:.88rem;color:var(--ink-2);vertical-align:top;line-height:1.45;}
.cm-table tr:hover td{background:#fafbfe;}
.cm-trigger{min-width:140px;}
.cm-warn{color:var(--amber-d);} .cm-prev{color:var(--blue-d);} .cm-opp{color:var(--green-d);}
.cm-cards{display:none;}
.cm-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem;margin-bottom:.8rem;box-shadow:var(--sh-sm);}
.cm-card-flow{font-size:.9rem;line-height:1.55;color:var(--ink-2);margin-bottom:.6rem;}
.cm-card-row{font-size:.86rem;color:var(--ink-2);padding:.35rem 0;border-top:1px dashed var(--line);}
.cm-card-row span{display:inline-block;font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;margin-right:.4rem;color:var(--faint);}
.cm-card-row.prev span{color:var(--blue-d);} .cm-card-row.opp span{color:var(--green-d);}

/* ---------- ACTION PLAN ---------- */
.plan-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-bottom:1rem;}
.plan-sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.2rem;box-shadow:var(--sh-sm);border-top:4px solid var(--sc,var(--primary));}
.plan-sec.do{--sc:var(--green);} .plan-sec.watch{--sc:var(--amber);} .plan-sec.prep{--sc:var(--blue);}
.plan-sec.avoid{--sc:var(--red);} .plan-sec.help{--sc:var(--teal);} .plan-sec.opp{--sc:#9333ea;} .plan-sec.ask{--sc:var(--muted);}
.plan-sec h3{display:flex;align-items:center;gap:.5rem;font-size:1.08rem;font-weight:700;}
.plan-ic{font-size:1.05rem;}
.plan-sub{color:var(--muted);font-size:.84rem;margin:.3rem 0 .7rem;}
.plan-sec ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;}
.plan-sec li{position:relative;padding-left:1.1rem;font-size:.9rem;color:var(--ink-2);line-height:1.45;}
.plan-sec li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:2px;background:var(--sc);}
.plan-sec li.muted{color:var(--faint);}
.plan-sec.card{grid-column:1/-1;}

/* ---------- EXPORT ---------- */
.export-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:1rem 0 .4rem;}
.saved-list{list-style:none;display:flex;flex-direction:column;gap:.2rem;}
.saved-list li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line-2);}
.saved-meta{display:block;color:var(--faint);font-size:.82rem;margin-top:.1rem;}
.saved-btns{display:flex;gap:1rem;flex:none;}

/* ---------- SAFETY / DISCLAIMER / TOAST ---------- */
.safety-banner{max-width:var(--maxw);margin:0 auto 0;padding:1.1rem 1.25rem;background:var(--red-l);border:1px solid #f8c4c4;border-left:5px solid var(--red);border-radius:var(--r);margin-top:.5rem;}
.screen-wrap+.safety-banner{margin-top:0;}
.safety-banner{margin:.6rem 1.25rem;max-width:calc(var(--maxw) - 0px);}
.safety-head{font-weight:800;color:var(--red-d);margin-bottom:.3rem;}
.safety-banner p{color:var(--ink-2);font-size:.92rem;margin-bottom:.5rem;}
.safety-banner ul{margin-left:1.1rem;color:var(--ink-2);font-size:.9rem;line-height:1.5;}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);background:var(--navy);color:#fff;padding:.7rem 1.2rem;border-radius:999px;font-size:.9rem;font-weight:600;box-shadow:var(--sh-lg);opacity:0;transition:opacity .25s, transform .25s;z-index:100;max-width:90vw;text-align:center;}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* ---------- print summary hidden on screen ---------- */
#print-summary{display:none;}

/* =========================================================== RESPONSIVE */
@media (max-width:860px){
  .how-grid{grid-template-columns:1fr 1fr;}
  .who{grid-template-columns:1fr;gap:1.4rem;}
  .forces-grid,.scn-grid{grid-template-columns:1fr;}
  .plan-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:620px){
  .field-grid{grid-template-columns:1fr;}
  .plan-grid{grid-template-columns:1fr;}
  .scn-cols{grid-template-columns:1fr;}
  .cm-table-wrap{display:none;}
  .cm-cards{display:block;}
  .footerbar .btn{flex:1;}
  .hero{padding-top:2.4rem;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;}}

/* =========================================================== PRINT */
@media print{
  body{background:#fff;}
  .topbar,.stepper,.footerbar,.disclaimer-strip,.intro-card,.btn,.ghost-btn,.tone-pick,.btn-add,
  .force-selects,.incl,.export-actions,.saved-list,.block-title,.safety-banner{display:none !important;}
  #app>*:not(#print-summary){display:none !important;}
  .screen-wrap{display:none !important;}
  #print-summary{display:block !important;max-width:720px;margin:0 auto;color:#111;font-size:12px;}
  #print-summary h1{font-family:var(--serif);font-size:22px;margin-bottom:.2rem;}
  #print-summary h2{font-size:14px;margin:1rem 0 .3rem;border-bottom:1px solid #ccc;padding-bottom:.2rem;}
  #print-summary h3{font-size:12px;margin:.6rem 0 .2rem;}
  #print-summary .ps-meta{color:#555;font-size:11px;margin-bottom:.6rem;}
  #print-summary ul{margin-left:1.1rem;}
  #print-summary li{margin-bottom:.15rem;}
  #print-summary p{margin-bottom:.4rem;line-height:1.5;}
  .ps-table{width:100%;border-collapse:collapse;margin-top:.3rem;}
  .ps-table th,.ps-table td{border:1px solid #ccc;padding:.3rem .4rem;text-align:left;font-size:11px;vertical-align:top;}
  .ps-disc{margin-top:1rem;color:#777;font-size:10px;font-style:italic;}
}