/* ShelterPilot - Static HTML5 Styles (no frameworks) */
:root{
  --bg: #ffffff;
  --text: #0f172a;           /* slate-900 */
  --muted: #475569;          /* slate-600 */
  --border: #e2e8f0;         /* slate-200 */
  --card: #ffffff;
  --emerald-50:#ecfdf5; --emerald-200:#a7f3d0; --emerald-600:#059669; --emerald-700:#047857;
  --sky-50:#eff6ff; --sky-200:#bae6fd; --sky-600:#0284c7;
  --amber-50:#fffbeb; --amber-200:#fde68a; --amber-600:#d97706;
  --ring-emerald:#a7f3d0; --ring-amber:#fde68a; --ring-sky:#bae6fd;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text); background:linear-gradient(to bottom, #f0f9ff, #fff);
}
.container{max-width:1100px; margin:0 auto; padding:0 1rem}
.header{
  position:sticky; top:0; z-index:40; background:rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(6px); border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.8rem 0}
.brand{display:flex; align-items:center; gap:.5rem}
.brand-badge{display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:var(--emerald-600); color:#fff; box-shadow:var(--shadow)}
.brand-title{line-height:1}
.brand-title b{font-size:1rem}
.brand-title small{display:block; color:#64748b; font-size:.72rem}
.nav{display:none; gap:1rem}
@media(min-width:640px){ .nav{display:flex} }
.nav a{font-size:.92rem; font-weight:600; color:#334155; text-decoration:none}
.nav a:hover{color:var(--emerald-700)}
.nav a.active{color:var(--emerald-700)}

.hero{border-bottom:1px solid var(--border); background: linear-gradient(135deg, #ecfdf5, #f0f9ff, #fffbeb)}
.hero-grid{display:grid; gap:2rem; padding:2rem 0}
@media(min-width:640px){ .hero-grid{grid-template-columns:1fr 1fr; padding:3rem 0} }
h1{font-size:2rem; margin:.25rem 0 0}
@media(min-width:640px){ h1{font-size:3rem} }
.lead{color:var(--muted); max-width:48ch; font-size:1.05rem}

.chips{display:flex; gap:.5rem; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .7rem; font-weight:600; font-size:.78rem; border-radius:999px; border:1px solid var(--emerald-200); background:var(--emerald-50); color:var(--emerald-700)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:700; font-size:.92rem; padding:.7rem 1rem; border-radius:12px; border:none; cursor:pointer; text-decoration:none}
.btn-primary{background:var(--emerald-600); color:#fff}
.btn-primary:hover{background:var(--emerald-700)}
.btn-secondary{background:#fff; color:var(--emerald-700); border:1px solid var(--emerald-200)}
.btn-secondary:hover{background:#f0fdf4}
.btn-amber{background:var(--amber-600); color:#fff}
.btn-amber:hover{filter:brightness(.95)}

.card{background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow)}
.card-pad{padding:1rem}
.card-pad-lg{padding:1.25rem}
.grid{display:grid; gap:1rem}
@media(min-width:640px){ .grid-2{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:repeat(3,1fr)} }

.section{padding:2rem 0}
.section h2{font-size:1.6rem; margin:0 0 .25rem}
.section p.sub{color:var(--muted); margin:.25rem 0 1rem}

.input, select, textarea{width:100%; padding:.6rem .75rem; border-radius:10px; border:1px solid #cbd5e1; font-size:.92rem}
label{display:block; font-size:.88rem; color:#334155; font-weight:600}
.help{font-size:.78rem; color:#64748b}

.badge{display:inline-block; padding:.35rem .6rem; border-radius:10px; font-size:.78rem; font-weight:700}
.badge-green{background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0}
.badge-blue{background:#eff6ff; color:#075985; border:1px solid #bae6fd}
.badge-amber{background:#fffbeb; color:#92400e; border:1px solid #fde68a}

.footer{border-top:1px solid var(--border); background:#fff; padding:1.25rem 0}

.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; padding:.1rem .35rem}

/* chatbot */
.chat-fab{position:fixed; right:1rem; bottom:1rem; border-radius:999px; box-shadow:var(--shadow)}
.modal{position:fixed; inset:0; background:rgba(0,0,0,.2); display:none; align-items:flex-end; padding:1rem}
.modal.open{display:flex}
.modal-panel{width:100%; max-width:420px; background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); overflow:hidden}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; border-bottom:1px solid var(--border)}
.modal-body{height:18rem; overflow:auto; padding:1rem}
.modal-foot{display:flex; gap:.5rem; border-top:1px solid var(--border); padding:.75rem}

img.resp{width:100%; height:190px; object-fit:cover; border-top-left-radius:16px; border-top-right-radius:16px}
figure{margin:0}
figcaption{padding:.4rem .6rem; font-size:.78rem; color:#64748b}

/* helpers */
.mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem} .mt-3{margin-top:.75rem} .mt-4{margin-top:1rem} .mt-6{margin-top:1.5rem}
.flex{display:flex} .items-center{align-items:center} .gap-1{gap:.25rem} .gap-2{gap:.5rem} .gap-3{gap:.75rem}
.justify-between{justify-content:space-between}