/* ---------- Design tokens ---------- */
:root{
  --ground:#101826;        /* deep slate-navy */
  --ground-2:#16202f;
  --panel:#1c2838;
  --panel-2:#22303f;
  --line:#2c3a4d;
  --line-soft:#243141;
  --ink:#eef3f8;
  --ink-2:#aebccd;
  --ink-3:#7488a0;
  --amber:#f4a84a;         /* warm lifeline accent */
  --amber-soft:#f9c886;
  --sage:#7fc9a0;          /* recovery green */
  --sage-deep:#4f9c76;
  --danger:#e8705f;        /* reserved for genuine emergencies */
  --danger-bg:#2a1a19;
  --shadow:0 18px 40px -18px rgba(0,0,0,.7);
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:
    radial-gradient(1100px 600px at 82% -8%, rgba(244,168,74,.10), transparent 60%),
    radial-gradient(900px 620px at 8% 108%, rgba(127,201,160,.09), transparent 58%),
    var(--ground);
  color:var(--ink);
  min-height:100vh;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit}
a{color:var(--amber-soft)}
::selection{background:rgba(244,168,74,.3)}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px}

/* ---------- App shell ---------- */
.app{max-width:1080px;margin:0 auto;padding:0 20px 120px;position:relative}

/* ---------- Top bar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 0 18px;position:sticky;top:0;z-index:40;
  background:linear-gradient(var(--ground) 72%, transparent);
}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer}
.brand-mark{width:38px;height:38px;flex:none}
.brand-name{font-family:var(--serif);font-weight:600;font-size:1.24rem;letter-spacing:-.01em}
.brand-name b{color:var(--amber)}
.brand-tag{font-size:.7rem;color:var(--ink-3);letter-spacing:.14em;margin-top:-2px}
.topbar-actions{display:flex;gap:8px;align-items:center}
.btn{
  border-radius:var(--r-sm);padding:9px 15px;font-weight:600;font-size:.86rem;
  transition:transform .12s ease, background .18s ease, border-color .18s;
  border:1px solid transparent;white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-ghost{border-color:var(--line);color:var(--ink-2);background:var(--panel)}
.btn-ghost:hover{border-color:var(--amber);color:var(--ink)}
.btn-amber{background:var(--amber);color:#22160a}
.btn-amber:hover{background:var(--amber-soft)}
.btn-sage{background:var(--sage);color:#0f2419}
.btn-sage:hover{background:#9bd8b6}

/* ---------- Emergency strip ---------- */
.sos{
  display:flex;align-items:center;gap:8px;border:1px solid #7a2f28;
  background:var(--danger-bg);color:var(--danger);border-radius:var(--r-sm);
  padding:8px 12px;font-weight:600;font-size:.82rem;
}
.sos:hover{background:#38211f}
.sos svg{flex:none}

/* ---------- Screen system ---------- */
.screen{display:none;animation:rise .4s ease both}
.screen.active{display:block}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .screen,.screen.active{animation:none}
  *{scroll-behavior:auto!important}
}
/* ---------- Hero ---------- */
.hero{padding:26px 0 8px;position:relative}
.hero-eyebrow{
  font-size:.72rem;letter-spacing:.2em;color:var(--amber);
  font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:10px;
}
.hero-eyebrow::before{content:"";width:26px;height:1px;background:var(--amber)}
.hero h1{
  font-family:var(--serif);font-weight:500;font-size:clamp(2rem,5.4vw,3.5rem);
  line-height:1.04;letter-spacing:-.02em;max-width:16ch;
}
.hero h1 em{font-style:italic;color:var(--amber-soft)}
.hero-sub{color:var(--ink-2);font-size:1.05rem;max-width:52ch;margin-top:18px}

/* ---------- The bridge (signature element) ---------- */
.bridge-wrap{margin:30px 0 8px}
.bridge-stage{
  background:linear-gradient(180deg,var(--ground-2),var(--panel));
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 22px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.bridge-stage h3{font-size:.78rem;letter-spacing:.14em;color:var(--ink-3);font-weight:600;margin-bottom:4px}
.bridge-score-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.bridge-score{font-family:var(--mono);font-weight:700;font-size:2.7rem;color:var(--sage);line-height:1}
.bridge-score.low{color:var(--danger)}
.bridge-score.mid{color:var(--amber)}
.bridge-state{font-size:.9rem;color:var(--ink-2)}
svg.bridge-svg{width:100%;height:120px;display:block;margin-top:6px}

/* ---------- Intro CTA row ---------- */
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.cta-lg{border-radius:var(--r-md);padding:15px 22px;font-weight:600;font-size:1rem;display:flex;align-items:center;gap:10px}

/* ---------- Section heads ---------- */
.section{margin-top:46px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.section-head h2{font-family:var(--serif);font-weight:500;font-size:1.7rem;letter-spacing:-.01em}
.section-head p{color:var(--ink-3);font-size:.9rem;margin-top:3px}

/* ---------- Pillar grid ---------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.pillar{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-md);padding:18px;text-align:left;transition:transform .16s ease,border-color .18s,background .18s;
  min-height:150px;display:flex;flex-direction:column;
}
.pillar:hover{transform:translateY(-3px);border-color:var(--amber);background:var(--panel-2)}
.pillar-ico{font-size:1.7rem;margin-bottom:12px}
.pillar-name{font-family:var(--serif);font-size:1.16rem;font-weight:600;letter-spacing:-.01em}
.pillar-desc{color:var(--ink-3);font-size:.84rem;margin-top:5px;flex:1}
.pillar-count{margin-top:12px;font-size:.72rem;color:var(--ink-3);font-family:var(--mono);letter-spacing:.06em}
.pillar-bar{position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:3px;background:var(--amber)}

/* ---------- Crisis list (inside pillar) ---------- */
.crisis-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.crisis-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px;text-align:left;transition:transform .16s,border-color .18s;
}
.crisis-card:hover{transform:translateY(-2px);border-color:var(--sage)}
.crisis-card h4{font-size:1rem;font-weight:600;margin-bottom:4px}
.crisis-card p{color:var(--ink-3);font-size:.82rem}
.crisis-card .tags{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:.68rem;padding:3px 8px;border-radius:20px;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-2)}

/* ---------- Back link ---------- */
.back{display:inline-flex;align-items:center;gap:7px;color:var(--ink-3);font-size:.86rem;font-weight:500;padding:8px 0;margin-bottom:6px}
.back:hover{color:var(--amber)}
/* ---------- Assessment / Navigator ---------- */
.nav-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow)}
.nav-panel h3{font-family:var(--serif);font-size:1.4rem;font-weight:600;margin-bottom:6px}
.nav-panel .hint{color:var(--ink-3);font-size:.88rem;margin-bottom:16px}
textarea.navinput{
  width:100%;min-height:120px;resize:vertical;background:var(--ground-2);
  border:1px solid var(--line);border-radius:var(--r-md);padding:15px;color:var(--ink);
  font-size:1rem;line-height:1.6;
}
textarea.navinput:focus{border-color:var(--amber);outline:none}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.chip{font-size:.8rem;padding:7px 13px;border-radius:22px;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-2);transition:.16s}
/* Optional first fork for situations where the answer changes the whole plan,
   such as whether substance use is the writer's own or someone else's. */
.nav-branch{margin:0 0 14px}
.nav-branch p{font-size:.82rem;color:var(--ink-3);margin-bottom:8px}
.nav-branch-row{display:flex;gap:8px;flex-wrap:wrap}
.branch-opt{font-size:.86rem;font-weight:600;padding:10px 16px;min-height:42px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-2);transition:.16s;cursor:pointer}
.branch-opt:hover{border-color:var(--amber);color:var(--ink)}
.branch-opt[aria-pressed="true"]{border-color:var(--amber);background:rgba(244,168,74,.1);color:var(--ink)}
.chip:hover{border-color:var(--amber);color:var(--ink)}

/* ---------- Plan output ---------- */
.plan{margin-top:8px}
.plan-block{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;margin-bottom:14px}
.plan-block h4{font-size:.76rem;letter-spacing:.14em;color:var(--amber);font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.need-item,.doc-item,.help-item{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.need-item:last-child,.doc-item:last-child,.help-item:last-child{border-bottom:none}
.need-ico{flex:none;margin-top:1px}
.need-txt strong{display:block;font-size:.95rem}
.need-txt span{font-size:.82rem;color:var(--ink-3)}

/* risk meters */

/* action timeline */

/* ---------- Recovery roadmap ---------- */
.roadmap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow)}
.rm-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.rm-progress{font-family:var(--mono);font-weight:700;font-size:1.5rem;color:var(--sage)}
.rm-track{height:10px;background:var(--ground-2);border-radius:6px;overflow:hidden;margin:14px 0 20px}
.rm-fill{height:100%;background:linear-gradient(90deg,var(--sage-deep),var(--sage));border-radius:6px;transition:width .7s ease}
.step{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.step:last-child{border-bottom:none}
.step-check{
  flex:none;width:24px;height:24px;border-radius:7px;border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;transition:.16s;margin-top:1px;cursor:pointer;
}
.step-check.done{background:var(--sage);border-color:var(--sage)}
.step-check svg{opacity:0;transition:.16s}
.step-check.done svg{opacity:1}
.step-body{flex:1}
.step-body strong{font-size:.96rem;font-weight:600;transition:.16s}
.step.done .step-body strong{color:var(--ink-3);text-decoration:line-through}
.step-body p{font-size:.82rem;color:var(--ink-3);margin-top:2px}

/* ---------- Resources / map ---------- */
.res-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
@media(max-width:820px){.res-grid{grid-template-columns:1fr}}
#resmap{height:340px;border-radius:var(--r-md);border:1px solid var(--line);z-index:1}
#resmap.map-off{display:grid;place-items:center;background:var(--panel);border-style:dashed}
.map-off-msg{max-width:320px;text-align:center;color:var(--ink-3);font-size:.85rem;line-height:1.55;padding:20px}
.res-list{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow-y:auto;padding-right:4px}
.res-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 15px}
.res-item h5{font-size:.95rem;font-weight:600}
.res-item .meta{font-size:.8rem;color:var(--ink-3);margin-top:3px}
.res-item .call{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:.85rem;font-weight:600;color:var(--sage)}

/* status pill */
.status{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;padding:4px 10px;border-radius:20px;letter-spacing:.04em}
.status .dot{width:7px;height:7px;border-radius:50%}
.status.live{background:rgba(127,201,160,.12);color:var(--sage)}
.status.live .dot{background:var(--sage);box-shadow:0 0 0 3px rgba(127,201,160,.2)}
.status.sample{background:rgba(244,168,74,.12);color:var(--amber)}
.status.sample .dot{background:var(--amber)}
.status.offline{background:rgba(116,136,160,.14);color:var(--ink-3)}
.status.offline .dot{background:var(--ink-3)}
/* ---------- Chatbot ---------- */
.chat-fab{
  position:fixed;right:20px;bottom:20px;z-index:60;width:58px;height:58px;border-radius:50%;
  background:var(--amber);color:#22160a;display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px -8px rgba(244,168,74,.6);transition:transform .16s;
}
.chat-fab:hover{transform:scale(1.06)}
/* [hidden] alone loses to display:flex above, so it is stated explicitly. */
.chat-fab[hidden]{display:none}
.chat-panel{
  position:fixed;right:20px;bottom:88px;z-index:60;width:min(400px,calc(100vw - 32px));
  height:min(600px,76vh);background:var(--ground-2);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow);display:none;flex-direction:column;overflow:hidden;
}
.chat-panel.open{display:flex;animation:rise .25s ease both}
/* Two tight lines. The title used to be a full-size heading with a second
   line under it, which is a lot of chrome to spend on a panel this small. */
.chat-head{padding:9px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px}
.chat-head .dot{width:7px;height:7px;border-radius:50%;background:var(--sage);flex:none}
/* min-width:0 is what lets the subtitle actually truncate inside a flex row.
   Without it a long plan name wrapped and pushed the header to three lines. */
.chat-head>div{min-width:0;flex:1}
.chat-head strong{font-size:.82rem;display:block;line-height:1.2}
.chat-head span{font-size:.68rem;color:var(--ink-3);display:block;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head button{flex:none;color:var(--ink-3);font-size:1.2rem;line-height:1;padding:0 2px}
.chat-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px;display:flex;flex-direction:column;gap:10px}
/* The default scrollbar was a wide grey slab down the side of a 380px panel.
   Thin and dim on the platforms that allow it, untouched where they do not. */
.chat-body{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.chat-body::-webkit-scrollbar{width:6px}
.chat-body::-webkit-scrollbar-track{background:transparent}
.chat-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.chat-body::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}
.msg{max-width:85%;padding:11px 14px;border-radius:14px;font-size:.9rem;line-height:1.5}
.msg.bot{background:var(--panel);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.msg.me{background:var(--amber);color:#22160a;align-self:flex-end;border-bottom-right-radius:4px;font-weight:500}
.msg.typing{color:var(--ink-3);font-style:italic}
.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chat-input input{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:10px 15px;color:var(--ink);font-size:.9rem}
.chat-input input:focus{border-color:var(--amber);outline:none}
.chat-input button{width:40px;height:40px;border-radius:50%;background:var(--amber);color:#22160a;flex:none;display:flex;align-items:center;justify-content:center}

/* ---------- Accessibility primitives ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.modal-open{overflow:hidden}
.linkish{color:var(--amber-soft);font-size:.82rem;font-weight:600;text-decoration:underline;text-underline-offset:3px;background:none;border:none;padding:8px 4px;min-height:32px}
.linkish:hover{color:var(--amber)}
.mini-btn,.chip{min-height:34px}

/* ---------- Six-step strip ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;list-style:none}
.step-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:15px 16px}
.step-card .step-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);color:var(--amber);font-size:.72rem;font-weight:700;font-family:var(--mono);margin-bottom:9px}
.step-card strong{display:block;font-size:.95rem;font-weight:600;margin-bottom:3px}
.step-card span{display:block;font-size:.8rem;color:var(--ink-3);line-height:1.45}
.home-band{display:block;font-weight:600;color:var(--ink);margin-bottom:3px}

/* ---------- Engine attribution ---------- */
.plan-status-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.engine-run{text-align:center}
.engine-run-label{font-size:.7rem;letter-spacing:.14em;color:var(--amber);font-weight:600;margin-bottom:12px}
.engine-strip{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;font-size:.76rem}
.engine-strip i{color:var(--line);font-style:normal}
.engine-step{color:var(--ink-3);padding:3px 9px;border-radius:20px;border:1px solid var(--line-soft)}
.engine-step.on{color:var(--amber);border-color:rgba(244,168,74,.4);background:rgba(244,168,74,.08)}

/* ---------- Top priorities ---------- */
.prio-list{list-style:none;display:flex;flex-direction:column;gap:11px}
.prio{display:flex;gap:13px;background:var(--panel-2);border:1px solid var(--line);border-left-width:3px;border-radius:var(--r-md);padding:14px 16px}
.prio.u-high{border-left-color:var(--danger)}
.prio.u-med{border-left-color:var(--amber)}
.prio.u-low{border-left-color:var(--sage)}
.prio-rank{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--ground-2);border:1px solid var(--line);font-family:var(--mono);font-size:.76rem;font-weight:700;color:var(--ink-2)}
.prio-body{flex:1;min-width:0}
.prio-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:5px}
.prio-head h5{font-size:1rem;font-weight:600}
.urg{font-size:.68rem;letter-spacing:.08em;font-weight:700;padding:3px 8px;border-radius:20px}
.urg.u-high{background:rgba(232,112,95,.15);color:var(--danger)}
.urg.u-med{background:rgba(244,168,74,.15);color:var(--amber)}
.urg.u-low{background:rgba(127,201,160,.15);color:var(--sage)}
.prio-why,.prio-next{font-size:.85rem;color:var(--ink-2);line-height:1.5;margin-top:3px}
.prio-why b,.prio-next b{color:var(--ink-3);font-weight:600}
.dim-chip.muted{opacity:.72}
.dim-actions{color:var(--ink-2)}
.score-prev{color:var(--ink-3);font-size:.6em;font-weight:600}
.score-arrow{color:var(--ink-3);font-size:.55em;margin:0 .28em}
.step-tag{font-size:.62rem;letter-spacing:.08em;font-weight:700;padding:2px 7px;border-radius:20px;vertical-align:middle;margin-left:6px}
.step-tag.new{background:rgba(127,201,160,.16);color:var(--sage)}
.step-tag.old{background:rgba(116,136,160,.16);color:var(--ink-3)}
.rm-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.reassess-note{font-size:.82rem;color:var(--ink-3);line-height:1.5;margin-top:10px}
.reassess-note b{color:var(--ink-2)}
.dim-chip{display:inline-block;margin-top:8px;font-size:.7rem;color:var(--ink-3);background:var(--ground-2);border:1px solid var(--line-soft);border-radius:20px;padding:3px 10px}

/* ---------- Score and dimensions ---------- */
.score-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.score-big{font-family:var(--mono);font-size:2.6rem;font-weight:700;line-height:1}
.score-big span{font-size:1rem;color:var(--ink-3);font-weight:500}
.score-band{font-size:.85rem;color:var(--ink-2);font-weight:600;margin-top:2px}
.dims{display:flex;flex-direction:column;gap:13px}
.dims.compact{gap:8px;margin:10px 0 14px}
.dim-row{display:grid;grid-template-columns:150px 1fr 56px;gap:11px;align-items:center}
.dim-label{font-size:.85rem;color:var(--ink-2)}
.dim-track{height:8px;background:var(--ground-2);border-radius:5px;overflow:hidden}
.dim-fill{height:100%;border-radius:5px;transition:width .6s ease}
.dim-val{font-family:var(--mono);font-size:.9rem;font-weight:700;text-align:right}
.dim-why{grid-column:1/-1;font-size:.78rem;color:var(--ink-3);line-height:1.45;margin-top:-4px}
.dims.compact .dim-why{display:none}

/* ---------- Freshness, momentum, reassessment invite ---------- */
/* A score with no date reads as current. These carry the date, the work done
   since, and the invitation to re-score, which is what keeps an
   assessment-only number from going quietly stale. */
.freshness{font-size:.74rem;color:var(--ink-3);margin-top:5px;letter-spacing:.02em}
.freshness .dot-sep{opacity:.5;margin:0 .45em}
.freshness.stale{color:var(--amber)}
.nudge{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--line-soft);background:var(--panel-2);border-radius:var(--r-sm);padding:12px 14px;margin:14px 0}
.nudge.strong{border-color:rgba(244,168,74,.42);background:rgba(244,168,74,.07)}
.nudge-txt{flex:1 1 260px;font-size:.84rem;color:var(--ink-2);line-height:1.5}
.nudge-txt b{color:var(--ink)}
.nudge .mini-btn{flex:none}
.nudge-dismiss{background:none;border:0;color:var(--ink-3);font-size:.76rem;cursor:pointer;padding:4px 6px;border-radius:6px}
.nudge-dismiss:hover{color:var(--ink-2);background:var(--ground-2)}
.since-line{font-size:.75rem;color:var(--sage);margin-top:6px;font-weight:600}
.area-done{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid rgba(127,201,160,.4);background:rgba(127,201,160,.08);border-radius:var(--r-sm);padding:12px 14px;margin:8px 0 4px}
.area-done-txt{flex:1 1 240px;font-size:.84rem;color:var(--ink-2);line-height:1.5}
.area-done-txt b{color:var(--ink)}
.delta-banner{border:1px solid rgba(127,201,160,.4);background:rgba(127,201,160,.08);border-radius:var(--r-sm);padding:14px 16px;margin-bottom:16px}
.delta-banner.down{border-color:rgba(244,168,74,.42);background:rgba(244,168,74,.07)}
.delta-head{font-family:var(--mono);font-size:1.35rem;font-weight:700;line-height:1.2}
.delta-sub{font-size:.82rem;color:var(--ink-2);line-height:1.55;margin-top:5px}
.delta-list{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.delta-chip{font-size:.73rem;border:1px solid var(--line-soft);background:var(--panel);border-radius:20px;padding:3px 10px;color:var(--ink-2)}
.delta-chip b{font-family:var(--mono)}
.delta-chip.up b{color:var(--sage)}
.delta-chip.down b{color:var(--amber)}

/* ---------- Timeline groups ---------- */
.timeline{display:block}
.tl-group{margin-bottom:16px}
.tl-group:last-child{margin-bottom:0}
.tl-when{font-size:.7rem;letter-spacing:.12em;color:var(--amber);font-weight:700;margin-bottom:8px}
.tl-task{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:11px 13px;margin-bottom:7px}
.tl-task strong{display:block;font-size:.92rem;font-weight:600}
.tl-task span{display:block;font-size:.8rem;color:var(--ink-3);margin-top:3px;line-height:1.45}
.ack{font-size:1rem;color:var(--ink);line-height:1.6}
.block-sub{font-size:.82rem;color:var(--ink-3);line-height:1.5;margin:-4px 0 14px}

/* ---------- Roadmap groups ---------- */
.rm-stats{display:flex;gap:22px;text-align:right}
.rm-stats small{display:block;font-size:.7rem;color:var(--ink-3);letter-spacing:.04em}
.rm-group{margin:18px 0}
.rm-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line-soft);padding-bottom:7px;margin-bottom:4px}
.rm-group-head h4{font-size:.76rem;letter-spacing:.12em;color:var(--amber);font-weight:700}
.rm-group-head span{font-size:.75rem;color:var(--ink-3)}
.rm-foot{font-size:.78rem;color:var(--ink-3);line-height:1.5;border-top:1px solid var(--line-soft);margin-top:16px;padding-top:13px}

/* ---------- Resource cards ---------- */
.res-head{font-size:.72rem;letter-spacing:.14em;font-weight:600;margin:14px 0 6px}
.res-head:first-child{margin-top:2px}
.res-head.amber{color:var(--amber)}
.res-head.sage{color:var(--sage)}
.res-top{display:flex;align-items:center;gap:8px;justify-content:space-between}
.res-tag{font-size:.65rem;letter-spacing:.06em;color:var(--ink-3);border:1px solid var(--line);border-radius:20px;padding:2px 8px;flex:none}
.res-why{font-size:.79rem;color:var(--ink-3);line-height:1.5;margin-top:6px}
.res-why b{color:var(--ink-2);font-weight:600}
.res-personal{color:var(--amber-soft)}
.res-note{font-size:.76rem;color:var(--ink-3);line-height:1.5;margin:10px 2px 0}

/* ---------- Plan cards ---------- */
.pc-stats{display:flex;gap:18px;margin:11px 0 10px}
.pc-num{display:block;font-family:var(--mono);font-size:1.05rem;font-weight:700;color:var(--sage)}
.pc-stat small{display:block;font-size:.68rem;color:var(--ink-3);margin-top:1px}
.pc-next{background:var(--ground-2);border-radius:var(--r-sm);padding:9px 11px;margin-bottom:4px}
.pc-next b{display:block;font-size:.66rem;letter-spacing:.1em;color:var(--ink-3);margin-bottom:3px}
.pc-next span{font-size:.82rem;color:var(--ink-2);line-height:1.4}

.emg-item{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;margin-bottom:8px}
.emg-item.crit{border-color:rgba(232,112,95,.4)}
.emg-item.abroad{border-color:rgba(244,168,74,.4)}
.emg-body strong{display:block;font-size:.95rem;font-weight:600}
.emg-body span{display:block;font-size:.8rem;color:var(--ink-3);margin-top:2px;line-height:1.45}
.emg-call{font-family:var(--mono);font-weight:700;font-size:.9rem;color:var(--danger);white-space:nowrap;flex:none}
.emg-link{font-size:.82rem;font-weight:600;color:var(--amber-soft);white-space:nowrap;flex:none}
.emg-sep{font-size:.7rem;letter-spacing:.1em;color:var(--ink-3);font-weight:600;margin:16px 0 8px;padding-top:12px;border-top:1px solid var(--line-soft)}


.home-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:12px 0 4px}
.home-meta-txt{font-size:.82rem;color:var(--ink-3)}
.home-meta-txt b{color:var(--ink-2);font-weight:600}
.mini-btn.danger{border-color:var(--danger);color:var(--danger)}

/* ---------- Assistant suggestions ---------- */
.chat-suggest{display:flex;gap:6px;flex-wrap:wrap;padding:0 14px 10px}
.chat-suggest[hidden]{display:none}
.chat-suggest .chip{font-size:.74rem;padding:6px 11px;line-height:1.3}
.chat-safety{font-size:.7rem;color:var(--ink-3);text-align:center;padding:0 12px 10px;line-height:1.4}
.chat-safety b{color:var(--ink-2);font-weight:600}

/* The top bar carries Emergency, My plans, the account chip and About. That is
   more than 390px can hold, and letting it overflow put the page into sideways
   scroll on every screen. Emergency stays full size and legible because it is
   the safety-critical control; My plans moves into the account menu, which
   already contains it. */
@media (max-width:560px){
  .brand-tag{display:none}
  .brand-mark{width:32px;height:32px}
  .brand-name{font-size:1.1rem}
  .topbar{padding:16px 0 14px}
  .topbar-actions{gap:6px}
  .btn{padding:8px 11px;font-size:.8rem}
  .sos{padding:8px 11px}
  .acct{padding:4px 6px}
  .acct-txt{display:none}
  #acctSlot .btn-ghost{display:none}
}

@media (max-width:640px){
  .dim-row{grid-template-columns:104px 1fr 46px;gap:8px}
  .dim-label{font-size:.78rem}
  .rm-stats{gap:16px}
  .pc-stats{gap:14px}
  .score-big{font-size:2.2rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ---------- Sign-in gate (first screen) ----------
   z-index sits below .modal-bg (80) on purpose, so Emergency and About open ON
   TOP of the gate. Someone in crisis must reach 988 without an account. */
.gate{
  position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  padding:28px 20px;overflow-y:auto;
  background:
    radial-gradient(900px 520px at 78% -10%, rgba(244,168,74,.13), transparent 60%),
    radial-gradient(760px 540px at 10% 110%, rgba(127,201,160,.11), transparent 58%),
    var(--ground);
}
.gate[hidden]{display:none}
body.gated{overflow:hidden}
.gate-card{max-width:400px;width:100%;margin:auto}
.gate-brand{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:34px}
/* Label-only buttons on the gate: centred, single line, no description. */
.gate .auth-opt{justify-content:center;gap:11px;padding:16px 18px;text-align:center}
.gate .auth-opt strong{font-size:.98rem}
.gate .auth-opt .ico{width:30px;height:30px;border-radius:8px}
.gate-brand svg{width:44px;height:44px;flex:none}
.gate-name{font-family:var(--serif);font-weight:600;font-size:1.5rem;letter-spacing:-.01em}
.gate-name b{color:var(--amber)}
.gate-tag{font-size:.66rem;color:var(--ink-3);letter-spacing:.16em;margin-top:-3px}
.gate-err{
  display:none;margin-top:14px;font-size:.84rem;line-height:1.5;color:var(--danger);
  background:var(--danger-bg);border:1px solid rgba(232,112,95,.35);
  border-radius:var(--r-sm);padding:11px 14px;
}
.gate-err.show{display:block}

/* ---------- Account / auth ---------- */
.acct{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);border-radius:22px;padding:5px 12px 5px 6px;transition:.16s}
.acct:hover{border-color:var(--amber)}
.acct-av{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:.74rem;font-weight:700;background:var(--sage);color:#0f2419;overflow:hidden}
.acct-av img{width:100%;height:100%;object-fit:cover}
.acct-av.guest{background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line)}
.acct-txt{font-size:.8rem;font-weight:600;color:var(--ink-2);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-opt{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:15px 16px;margin-bottom:10px;transition:.16s}
.auth-opt:hover{border-color:var(--amber);background:var(--panel-2);transform:translateY(-1px)}
.auth-opt:disabled{opacity:.55;cursor:default;transform:none}
.auth-opt .ico{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--line)}
.auth-opt strong{display:block;font-size:.95rem;font-weight:600}
.auth-opt span{display:block;font-size:.8rem;color:var(--ink-3);margin-top:2px;line-height:1.4}
.auth-note{font-size:.78rem;color:var(--ink-3);line-height:1.55;border-top:1px solid var(--line-soft);margin-top:16px;padding-top:14px}
.acct-row{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;margin-bottom:14px}
.acct-row .acct-av{width:38px;height:38px;font-size:.95rem}
.acct-row .who{flex:1;min-width:0}
.acct-row .who strong{font-size:.98rem;display:block}
.acct-row .who span{font-size:.79rem;color:var(--ink-3)}

/* ---------- Saved plans ---------- */
.plan-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.plan-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 17px;display:flex;flex-direction:column;transition:.16s}
.plan-card:hover{border-color:var(--sage);transform:translateY(-2px)}
.plan-card h4{font-size:1rem;font-weight:600;margin-bottom:3px;line-height:1.35}
.plan-card .when{font-size:.74rem;color:var(--ink-3);font-family:var(--mono);letter-spacing:.03em}
.plan-card .snip{font-size:.82rem;color:var(--ink-3);margin:9px 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.plan-card .mini{height:6px;background:var(--ground-2);border-radius:4px;overflow:hidden;margin-bottom:6px}
.plan-card .mini i{display:block;height:100%;background:linear-gradient(90deg,var(--sage-deep),var(--sage))}
.plan-card .pfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:12px}
.plan-card .pct{font-family:var(--mono);font-size:.76rem;color:var(--sage);font-weight:700}
.plan-card .acts{display:flex;gap:6px}
.mini-btn{font-size:.76rem;font-weight:600;padding:6px 11px;border-radius:8px;border:1px solid var(--line);color:var(--ink-2);background:var(--panel-2);transition:.16s}
.mini-btn:hover{border-color:var(--amber);color:var(--ink)}
.mini-btn.danger:hover{border-color:var(--danger);color:var(--danger)}
.empty-note{background:var(--panel);border:1px dashed var(--line);border-radius:var(--r-md);padding:26px 22px;text-align:center;color:var(--ink-2)}
.sync-pill{display:inline-flex;align-items:center;gap:6px;font-size:.73rem;color:var(--ink-3);font-family:var(--mono);letter-spacing:.03em}

/* ---------- Modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(6,10,16,.7);backdrop-filter:blur(4px);z-index:80;display:none;align-items:center;justify-content:center;padding:20px}
.modal-bg.open{display:flex;animation:rise .22s ease both}
.modal{background:var(--ground-2);border:1px solid var(--line);border-radius:var(--r-lg);max-width:560px;width:100%;max-height:86vh;overflow-y:auto;padding:26px;box-shadow:var(--shadow)}
.modal h3{font-family:var(--serif);font-size:1.4rem;font-weight:600;margin-bottom:4px}
.modal p{color:var(--ink-2);font-size:.9rem;margin:10px 0}
.modal .close{float:right;font-size:1.5rem;color:var(--ink-3);line-height:1}
.emg-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.emg{display:flex;align-items:center;gap:13px;padding:13px 15px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md)}
.emg-num{font-family:var(--mono);font-weight:700;font-size:1.1rem;color:var(--amber);flex:none}
.emg-txt strong{display:block;font-size:.92rem}
.emg-txt span{font-size:.78rem;color:var(--ink-3)}
.emg.crit{border-color:#7a2f28;background:var(--danger-bg)}
.emg.crit .emg-num{color:var(--danger)}

/* disclaimer */
.disclaimer{font-size:.78rem;color:var(--ink-3);background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:12px 14px;line-height:1.6;margin-top:16px}
.plan-safety{font-size:.78rem;color:var(--ink-3);margin-top:16px;line-height:1.6}
.plan-safety a{color:var(--amber-soft);cursor:pointer}
.foresight{border-color:var(--amber);background:linear-gradient(180deg,rgba(244,168,74,.07),transparent)}
.foresight-tag{display:inline-block;font-size:.68rem;letter-spacing:.16em;color:#22160a;background:var(--amber);font-weight:700;padding:3px 10px;border-radius:20px;margin-bottom:10px}
.foresight-lead{font-size:.88rem;color:var(--ink-2);margin-bottom:12px}
.about-h{font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--amber);margin:20px 0 6px}
.about-ol{margin:8px 0 8px 18px;color:var(--ink-2)}
.about-ol li{margin-bottom:7px;font-size:.9rem;padding-left:4px}

/* footer */

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);z-index:90;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 18px;font-size:.88rem;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.3s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* spinner */
.spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.25);border-top-color:var(--amber);border-radius:50%;display:inline-block;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* responsive */
@media(max-width:640px){
  .app{padding:0 15px 120px}
  .topbar{padding:16px 0 14px}
  .brand-tag{display:none}
  .sos span{display:none}
  .hero h1{font-size:2rem}
  .section-head{flex-direction:column;align-items:flex-start;gap:6px}
  .risk-label{width:110px}
}