/* ============================================================
   DESTINATION NEXT STEP — app.css  (phone app / PWA interface)
   Full-screen, one-question-at-a-time, big touch targets.
   ============================================================ */
:root{
  --teal:#128279; --teal-dk:#0C5F58; --gold:#F6B93B; --navy:#0D2B45;
  --navy-2:#16405F; --cream:#FFF9EE; --ink:#0D2B45; --ink-soft:#5A6a72;
  --line:#E7DFD0; --white:#fff;
  --food:#3FA34D; --work:#2D6CDF; --stability:#1C6E7E; --repairs:#E8721C;
  --care:#FF6B6B; --giving:#7C4DFF; --senior:#8A6D1A; --emergency:#B8462F;
  --head:"Baloo 2",-apple-system,"Segoe UI",sans-serif;
  --body:"Nunito Sans",-apple-system,"Segoe UI",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:var(--body); background:var(--navy); color:var(--ink);
  overflow:hidden; position:fixed; inset:0;
  overscroll-behavior:none;
}
button{font-family:inherit;cursor:pointer;}
a{color:var(--teal-dk);}

/* ---------- app frame ---------- */
.app{ display:flex; flex-direction:column; height:100%; height:100dvh; background:var(--cream); }

/* top bar: restart + title + progress */
.topbar{ background:var(--navy); color:#fff; padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px; flex:0 0 auto; }
.topbar-row{ display:flex; align-items:center; gap:10px; }
.brand{ display:flex; align-items:center; gap:8px; font-family:var(--head); font-weight:800; font-size:1.05rem; }
.brand .ring{ width:26px; height:26px; border-radius:50%; background:var(--teal); border:3px solid #fff; box-shadow:inset 0 0 0 2px var(--teal); flex:0 0 auto; }
.restart{ margin-left:auto; background:rgba(255,255,255,0.14); color:#fff; border:none; border-radius:999px; padding:9px 14px; font-weight:800; font-size:0.82rem; display:flex; align-items:center; gap:6px; }
.restart:active{ background:rgba(255,255,255,0.28); }
.restart.hidden{ display:none; }
/* progress */
.progress-wrap{ margin-top:12px; }
.progress-track{ height:9px; background:rgba(255,255,255,0.16); border-radius:999px; overflow:hidden; }
.progress-fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--gold),#FFD98A); border-radius:999px; transition:width .35s cubic-bezier(.4,0,.2,1); }
.progress-label{ margin-top:6px; font-size:0.76rem; font-weight:800; color:#C7D6E2; display:flex; justify-content:space-between; }
.progress-wrap.hidden{ display:none; }

/* ---------- scrollable screen area ---------- */
.screen-area{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:22px 18px calc(env(safe-area-inset-bottom,0px) + 26px); }
.screen{ max-width:520px; margin:0 auto; animation:slideIn .28s ease; }
@keyframes slideIn{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }
.q-kicker{ color:var(--teal-dk); font-weight:800; letter-spacing:0.06em; text-transform:uppercase; font-size:0.74rem; }
.q-title{ font-family:var(--head); font-weight:800; font-size:1.55rem; line-height:1.15; color:var(--navy); margin:4px 0 6px; }
.q-sub{ color:var(--ink-soft); font-weight:600; margin-bottom:18px; }

/* big choice buttons */
.choices{ display:grid; gap:12px; }
.choice{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:#fff; border:2px solid var(--line); border-radius:18px; padding:18px 16px;
  font-family:var(--body); color:var(--navy); transition:transform .08s, border-color .15s, box-shadow .15s;
}
.choice:active{ transform:scale(0.98); }
.choice .emoji{ font-size:1.9rem; flex:0 0 auto; width:46px; height:46px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:var(--cream); }
.choice > span:not(.emoji):not(.arrow){ display:flex; flex-direction:column; gap:3px; min-width:0; }
.choice .ct{ display:block; font-family:var(--head); font-weight:800; font-size:1.12rem; line-height:1.15; }
.choice .cs{ display:block; font-size:0.85rem; color:var(--ink-soft); font-weight:600; line-height:1.25; }
.choice .arrow{ margin-left:auto; color:var(--teal); font-size:1.3rem; font-weight:900; }
.choice.big{ padding:26px 18px; }
.choice.big .emoji{ font-size:2.3rem; width:58px; height:58px; }
.choice.big .ct{ font-size:1.35rem; }
/* colored left accents per pillar */
.choice[data-accent]{ border-left-width:8px; }
.choice[data-accent="food"]{ border-left-color:var(--food);} .choice[data-accent="work"]{ border-left-color:var(--work);}
.choice[data-accent="stability"]{ border-left-color:var(--stability);} .choice[data-accent="repairs"]{ border-left-color:var(--repairs);}
.choice[data-accent="care"]{ border-left-color:var(--care);} .choice[data-accent="giving"]{ border-left-color:var(--giving);}
.choice[data-accent="senior"]{ border-left-color:var(--senior);} .choice[data-accent="emergency"]{ border-left-color:var(--emergency);}

/* location screen */
.zip-input{ width:100%; padding:16px 18px; border:2px solid var(--line); border-radius:16px; font-family:var(--head); font-weight:800; font-size:1.6rem; text-align:center; letter-spacing:0.14em; color:var(--navy); background:#fff; }
.zip-input:focus{ outline:3px solid var(--teal); border-color:var(--teal); }
.dist-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.dist-chip{ flex:1 1 60px; text-align:center; background:#fff; border:2px solid var(--line); border-radius:12px; padding:12px 6px; font-weight:800; color:var(--navy); font-size:0.9rem; }
.dist-chip.on{ background:var(--teal); border-color:var(--teal); color:#fff; }
.primary{ width:100%; margin-top:20px; background:var(--gold); color:var(--navy); border:none; border-radius:16px; padding:17px; font-family:var(--head); font-weight:800; font-size:1.15rem; }
.primary:active{ transform:scale(0.98); }
.ghost{ width:100%; margin-top:10px; background:transparent; color:var(--navy); border:2px solid var(--navy); border-radius:16px; padding:14px; font-weight:800; }
.skip{ display:block; margin:14px auto 0; background:none; border:none; color:var(--ink-soft); font-weight:800; text-decoration:underline; font-size:0.92rem; }

/* ---------- results ---------- */
.results-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.results-count{ font-family:var(--head); font-weight:800; font-size:1.25rem; color:var(--navy); }
.pill{ display:inline-block; font-size:0.7rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; padding:3px 10px; border-radius:999px; color:#fff; }
.pill.food{background:var(--food);} .pill.work{background:var(--work);} .pill.stability{background:var(--stability);}
.pill.repairs{background:var(--repairs);} .pill.care{background:var(--care);} .pill.giving{background:var(--giving);}
.rcard{ background:#fff; border:2px solid var(--line); border-radius:18px; padding:16px; margin-bottom:14px; }
.rcard.urgent{ border-left:8px solid var(--emergency); }
.rcard h3{ font-family:var(--head); font-weight:800; font-size:1.12rem; line-height:1.2; color:var(--navy); margin:8px 0 2px; }
.rcard .where{ color:var(--ink-soft); font-weight:700; font-size:0.86rem; }
.rcard .miles{ color:var(--teal-dk); font-weight:800; font-size:0.82rem; }
.rcard .note{ color:var(--ink-soft); font-weight:600; font-size:0.92rem; margin:8px 0; }
.rcard .hours{ font-weight:700; font-size:0.86rem; color:var(--navy); }
.action-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.act{ flex:1 1 46%; display:flex; align-items:center; justify-content:center; gap:7px; text-decoration:none; text-align:center; border-radius:12px; padding:13px 10px; font-weight:800; font-size:0.92rem; border:2px solid transparent; }
.act.call{ background:var(--teal); color:#fff; } .act.call:active{ background:var(--teal-dk); }
.act.site{ background:#fff; color:var(--navy); border-color:var(--navy); }
.act.dir{ background:#fff; color:var(--navy); border-color:var(--navy); }
.act.save{ background:var(--gold); color:var(--navy); }
.act.reply{ background:var(--giving); color:#fff; }
.act.full{ flex-basis:100%; }
.sample-tag{ display:inline-block; font-size:0.66rem; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:#9A6A16; background:#FCEFD7; border:1px dashed #C79233; padding:2px 8px; border-radius:6px; }

/* emergency / 988 quick strip on results */
.always-help{ background:var(--navy); color:#fff; border-radius:16px; padding:16px; margin:6px 0 16px; }
.always-help p{ font-weight:600; font-size:0.9rem; color:#C7D6E2; margin-bottom:10px; }
.always-help .ah-row{ display:flex; gap:8px; flex-wrap:wrap; }
.always-help a{ flex:1 1 30%; text-align:center; background:rgba(255,255,255,0.12); color:#fff; text-decoration:none; border-radius:11px; padding:11px 6px; font-weight:800; font-size:0.85rem; }
.always-help a.b988{ background:#4A2A8A; }
.always-help a.b211{ background:var(--teal); }
.empty{ text-align:center; padding:34px 16px; color:var(--ink-soft); font-weight:700; background:#fff; border:2px dashed var(--line); border-radius:18px; }

/* welcome extras */
.welcome-hero{ text-align:center; padding:8px 0 20px; }
.welcome-hero .big-ring{ width:78px; height:78px; margin:0 auto 12px; border-radius:50%; background:var(--teal); border:8px solid #fff; box-shadow:inset 0 0 0 5px var(--teal), 0 6px 20px rgba(0,0,0,0.15); position:relative; }
.welcome-hero .big-ring::after{ content:""; position:absolute; inset:20px; border-radius:50%; background:#fff; box-shadow:0 0 0 6px var(--teal); }
.welcome-hero h1{ font-family:var(--head); font-weight:800; font-size:1.7rem; color:var(--navy); }
.welcome-hero p{ color:var(--ink-soft); font-weight:600; margin-top:4px; }
.mini-links{ text-align:center; margin-top:22px; font-size:0.86rem; color:var(--ink-soft); font-weight:700; }
.mini-links a{ color:var(--teal-dk); font-weight:800; }

/* install hint banner */
.install-hint{ position:fixed; left:12px; right:12px; bottom:calc(env(safe-area-inset-bottom,0px) + 12px); background:var(--navy); color:#fff; border-radius:16px; padding:14px 16px; box-shadow:0 8px 24px rgba(0,0,0,0.3); display:none; z-index:50; align-items:center; gap:12px; }
.install-hint.show{ display:flex; }
.install-hint .ih-text{ flex:1; font-weight:700; font-size:0.9rem; }
.install-hint button{ background:var(--gold); color:var(--navy); border:none; border-radius:10px; padding:10px 14px; font-weight:800; }
.install-hint .ih-close{ background:transparent; color:#9fb3c4; font-size:1.3rem; padding:0 4px; }

@media (min-width:560px){ .app{ max-width:560px; margin:0 auto; box-shadow:0 0 40px rgba(0,0,0,0.4); } }