/* Dog Friendly Survey — Kali brand skin.
   Roch family aesthetic (paper / ink / Satoshi) with Kali pink as the accent.
   Lifted from kaliconcierge.com + kalitalk.com so it reads unmistakably as Kali. */
:root{
  --ink:#0A0A0A;
  --ink-soft:#1F1E1C;
  --body:#2C2A26;
  --paper:#F4F2EC;
  --panel:#FBFAF6;
  --white:#ffffff;
  --line:#C9C6BF;
  --line-soft:#E4E1D9;
  --mute:#807D77;
  --pink:#e84393;
  --pink-deep:#d63384;
  --pink-tint:rgba(232,67,147,0.08);
  --pink-glow:rgba(232,67,147,0.22);
  --radius:14px;
  --maxw:600px;
  --sans:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--paper);color-scheme:light}
html,body{overflow-x:hidden}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--sans);font-weight:500;line-height:1.6;text-wrap:pretty;
}
img{max-width:100%;height:auto;display:block}

#app{min-height:100dvh;display:flex;flex-direction:column;align-items:center}
#progress{position:sticky;top:0;left:0;width:100%;height:4px;background:var(--line-soft);z-index:10}
#bar{height:100%;width:0;background:var(--pink);transition:width .35s ease}
#stage{width:100%;max-width:var(--maxw);padding:30px 22px 70px;flex:1}

.screen{display:flex;flex-direction:column;gap:14px;animation:rise .3s ease}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* kicker / eyebrow */
.kicker{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pink)}
.block-tag{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}

h1{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;color:var(--ink);
  font-size:clamp(1.9rem,6vw,2.5rem);line-height:1.12;margin:0}
h2.q{font-family:var(--sans);font-weight:700;letter-spacing:-.015em;color:var(--ink);
  font-size:clamp(1.35rem,4.6vw,1.7rem);line-height:1.2;margin:2px 0}
.lede{font-size:1.05rem;color:var(--ink-soft);margin:0}
.help{font-size:.9rem;color:var(--mute);margin:-4px 0 4px}
.foot{font-size:.82rem;color:var(--mute);margin-top:8px}

/* welcome */
.welcome .kali-portrait{width:104px;height:104px;border-radius:50%;object-fit:cover;
  border:3px solid var(--white);box-shadow:0 8px 26px var(--pink-glow);margin-bottom:6px}
.welcome p.lede{font-size:1.02rem;line-height:1.6}

/* choices */
.choices,.scale{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.choice{display:flex;align-items:center;gap:13px;text-align:left;width:100%;
  background:var(--white);border:1.5px solid var(--line-soft);border-radius:var(--radius);
  padding:15px 16px;font:inherit;font-size:1rem;font-weight:500;color:var(--ink-soft);
  cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s,transform .05s}
.choice:hover{border-color:var(--pink);box-shadow:0 4px 16px rgba(0,0,0,.04)}
.choice:active{transform:scale(.995)}
.choice .tick{flex:0 0 auto;width:22px;height:22px;border-radius:999px;border:2px solid var(--line);
  position:relative;transition:border-color .15s,background .15s}
.choice.on{border-color:var(--pink);background:var(--pink-tint);color:var(--ink)}
.choice.on .tick{border-color:var(--pink);background:var(--pink)}
.choice.on .tick:after{content:"";position:absolute;left:6px;top:2.5px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.choice .label{flex:1}
.choice.disabled{opacity:.4;pointer-events:none}
.maxnote{font-size:.82rem;color:var(--mute);margin:2px 2px 0}
.maxnote.flash{color:var(--pink);font-weight:700}

/* fields */
.field{margin-top:6px}
.text-input{width:100%;background:var(--white);border:1.5px solid var(--line-soft);border-radius:12px;
  padding:14px 15px;font:inherit;font-size:1rem;color:var(--ink)}
.text-input:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-tint)}
.text-input.area{min-height:130px;resize:vertical}
.terms{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-size:.9rem;color:var(--ink-soft)}
.terms input{margin-top:3px;width:18px;height:18px;accent-color:var(--pink)}
.terms a{color:var(--pink);font-weight:600}

/* nav + buttons */
.nav{display:flex;gap:10px;margin-top:18px}
.btn{appearance:none;border:1px solid transparent;border-radius:8px;padding:14px 22px;font:inherit;
  font-size:1rem;font-weight:700;cursor:pointer;transition:transform .05s,background .15s,border-color .15s;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--pink);color:#fff;flex:1;box-shadow:0 6px 18px var(--pink-glow)}
.btn.primary:hover{background:var(--pink-deep)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.welcome .btn.primary{flex:0 0 auto;align-self:flex-start;padding:15px 36px;margin-top:10px}

/* result */
.result .kali-portrait{width:80px;height:80px;border-radius:50%;object-fit:cover;
  border:3px solid var(--white);box-shadow:0 8px 26px var(--pink-glow)}
.type-card{background:var(--ink);color:#fff;border-radius:18px;padding:26px;margin:6px 0;
  box-shadow:0 14px 40px rgba(0,0,0,.18)}
.type-name{font-family:var(--sans);font-size:1.55rem;font-weight:700;letter-spacing:-.01em;
  margin-bottom:8px;color:#fff}
.type-name b{color:var(--pink)}
.type-blurb{font-size:1rem;color:#e9e6df;line-height:1.55}
.type-pct{font-size:.85rem;color:#b8b4ab;margin-top:14px}

/* toast */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-size:.88rem;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;max-width:90%}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(min-width:600px){#stage{padding:48px 22px 84px}}