/* =========================================================
   KnocKnow — Knock Score™ pages (/score and /score/{zip})
   Card + metric styles shared by the lookup page (client-
   rendered) and the per-ZIP pages (rendered by
   functions/score/[zip].js). Card tokens mirror the PNG
   share cards the API renders (spec §4/§5).
   ========================================================= */

:root{
  --ks-cream:#F2EDE5;
  --ks-cream-2:#EDE9E2;
  --ks-brown:#2C1D0D;
  --ks-brown-2:#3A2B1B;
  --ks-orange:#F2861E;
  --ks-slate:#4E463A;
  --ks-navy:#2B3A55;
}

/* ---------- Lookup hero ---------- */
.score-hero{padding:clamp(44px,6vw,84px) 0 clamp(28px,4vw,48px)}
.score-hero h1{font-size:clamp(2rem,5vw,3.3rem)}
.score-form{display:flex;gap:10px;justify-content:center;max-width:460px;margin:26px auto 0}
.score-form input{
  flex:1;min-width:0;font:inherit;font-weight:700;font-size:1.25rem;letter-spacing:.08em;
  padding:.85rem 1.2rem;border:2px solid var(--line);border-radius:999px;color:var(--brown);
  background:#fff;text-align:center;outline:none;transition:border-color .2s,box-shadow .2s;
}
.score-form input:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(247,162,59,.18)}
.score-form input::placeholder{font-weight:600;letter-spacing:.02em}
.score-hint{font-size:.85rem;color:var(--brown-soft);margin-top:10px}

/* ---------- Status / error panel ---------- */
.score-status{max-width:560px;margin:22px auto 0;padding:1rem 1.3rem;border-radius:var(--radius);
  background:var(--cream-2);border:1px solid var(--line);color:var(--brown);font-weight:600;text-align:center}
.score-status.err{background:#FDEBE3;border-color:#F2C1A4}
.score-status[hidden]{display:none}

/* ---------- The scorecard (mirrors the PNG card) ---------- */
.ks-card{
  background:var(--ks-cream);color:var(--ks-brown);
  max-width:430px;margin:0 auto;padding:clamp(26px,5vw,40px) clamp(22px,5vw,38px);
  border-radius:30px;box-shadow:var(--shadow);text-align:center;
  font-family:"Helvetica Neue",Helvetica,var(--font);
}
.ks-card p{margin:0}
.ks-eyebrow{font-weight:800;letter-spacing:.26em;text-transform:uppercase;font-size:.8rem;color:var(--ks-brown-2)}
.ks-grade{font-weight:800;font-size:clamp(5rem,16vw,7.5rem);line-height:1;margin-top:10px;color:var(--ks-slate)}
.ks-tier-strong .ks-grade{color:var(--ks-orange)}
.ks-points{font-size:1.35rem;color:var(--ks-brown-2);margin-top:4px}
.ks-points b{font-size:1.9rem;color:var(--ks-brown)}
.ks-place{font-weight:700;font-size:1.08rem;margin-top:10px;color:var(--ks-brown)}
.ks-bars{margin:22px 0 4px;display:grid;gap:12px;text-align:left}
.ks-bar{display:grid;grid-template-columns:92px 1fr 48px;align-items:center;gap:10px;font-size:.85rem;font-weight:700;color:var(--ks-brown-2)}
.ks-track{display:block;height:10px;border-radius:999px;background:rgba(43,58,85,.16);overflow:hidden}
.ks-track i{display:block;height:100%;border-radius:999px;background:var(--ks-navy)}
.ks-bar-num{text-align:right;color:var(--ks-brown)}
.ks-rank{margin-top:16px;font-weight:700;font-size:.95rem;color:var(--ks-brown)}
.ks-msg{margin:26px 0 10px;font-weight:700;font-size:1.25rem;color:var(--ks-brown-2)}
.ks-brand{margin-top:20px;padding-top:16px;border-top:1px solid rgba(44,29,13,.14);
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ks-brown-2)}

/* ---------- Share row ---------- */
.ks-share{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:22px auto 0}
.ks-updated{font-size:.78rem;color:var(--brown-soft);text-align:center;margin-top:14px}

/* ---------- Six-metric breakdown ---------- */
.ks-metrics{max-width:720px;margin:0 auto}
.ks-metric{padding:16px 0;border-bottom:1px solid var(--line)}
.ks-metric:last-child{border-bottom:0}
.ks-metric-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:700;color:var(--brown)}
.ks-metric-top b{font-size:1.1rem}
.ks-meter{height:10px;border-radius:999px;background:var(--cream-2);border:1px solid var(--line);overflow:hidden;margin-top:8px}
.ks-meter i{display:block;height:100%;border-radius:999px;background:var(--ks-navy)}
.ks-metric small{display:block;margin-top:7px;font-size:.84rem;color:var(--brown-soft);line-height:1.45}
.ks-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;max-width:720px;margin:26px auto 0}
.ks-chip{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;text-align:center;box-shadow:var(--shadow-sm)}
.ks-chip b{display:block;font-family:var(--display);font-size:1.25rem;color:var(--brown)}
.ks-chip span{font-size:.8rem;color:var(--brown-soft)}

/* ---------- Interpretation + grade bands ---------- */
.ks-read{max-width:720px;margin:0 auto;font-size:1.08rem;color:var(--brown);line-height:1.7}
.ks-bands{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:760px;margin:18px auto 0}
.ks-band{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:.4rem .85rem;font-size:.82rem;font-weight:700;color:var(--brown)}
.ks-band i{font-style:normal;font-weight:800;color:var(--ks-slate)}
.ks-band.hot i{color:var(--ks-orange)}
.ks-band small{font-weight:600;color:var(--brown-soft)}

/* ---------- Nearby ZIP links ---------- */
.ks-nearby{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.ks-nearby a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.45rem 1rem;
  font-weight:700;font-size:.92rem;color:var(--brown);transition:border-color .2s,color .2s,transform .15s}
.ks-nearby a:hover{border-color:var(--orange);color:var(--orange-deep);transform:translateY(-2px)}

/* ---------- CTA block ---------- */
.ks-cta{max-width:720px;margin:0 auto;background:linear-gradient(135deg,var(--orange-bright),var(--orange-deep));
  border-radius:var(--radius-lg);padding:clamp(26px,5vw,42px);text-align:center;color:#fff;box-shadow:var(--shadow)}
.ks-cta h2{color:#fff;font-size:clamp(1.45rem,3.4vw,2rem)}
.ks-cta p{color:rgba(255,255,255,.92);max-width:520px;margin:0 auto 1.2rem}
.ks-cta .btn{white-space:normal;line-height:1.3}
.ks-cta .btn-light{background:#fff;color:var(--orange-deep)}
.ks-cta .btn-light:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(0,0,0,.4)}
.ks-cta .ks-pilot{display:inline-block;margin-top:14px;font-weight:700;color:#fff;text-decoration:underline;text-underline-offset:3px}

.section-gap{height:clamp(36px,6vw,64px)}
#scoreResult{scroll-margin-top:90px}

@media (max-width:480px){
  .score-form{flex-direction:column}
  .ks-bar{grid-template-columns:80px 1fr 44px}
}