/* ShunyaRaksha client — calm safety instrument. System fonts (fast on low-end phones,
   no web-font load). The boldness is spent on the verdict panel; the chrome stays quiet. */
:root{
  --navy:#1B2A4A; --ink:#1A1D24; --surface:#FBFAF7; --card:#FFFFFF;
  --line:#E7E3DA; --muted:#5A6678; --marigold:#E08A1E;
  --stop:#C0392B; --verify:#B7791F; --safe:#1B7A50; --unsure:#5A6678;
  --r:14px; --pad:18px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--surface);color:var(--ink);line-height:1.5;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:560px;margin:0 auto;padding:0 16px 64px}

header{padding:22px 2px 12px}
.brand{display:flex;align-items:center;gap:10px}
.brand svg{width:30px;height:30px;flex:0 0 auto}
.brand h1{font-size:21px;letter-spacing:-.01em;margin:0;color:var(--navy);font-weight:800}
.tag{margin:4px 0 0;color:var(--muted);font-size:14px}
.tag .hi{color:var(--navy);opacity:.7}

.seg{display:flex;background:#EFEBE2;border-radius:999px;padding:4px;margin:18px 0 14px}
.seg button{flex:1;border:0;background:transparent;padding:11px;border-radius:999px;
  font-size:15px;font-weight:600;color:var(--muted);cursor:pointer}
.seg button[aria-selected="true"]{background:var(--card);color:var(--navy);
  box-shadow:0 1px 3px rgba(27,42,74,.12)}

.field{display:block;margin:12px 0}
.field label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:0 0 6px}
.field input,.field select{width:100%;padding:14px;border:1.5px solid var(--line);
  border-radius:var(--r);font-size:16px;background:var(--card);color:var(--ink)}
.field input:focus,.field select:focus{outline:3px solid #C9D4EC;border-color:var(--navy)}
.row{display:flex;gap:10px}.row .field{flex:1}
.hidden{display:none}

.check{width:100%;margin-top:8px;padding:16px;border:0;border-radius:var(--r);
  background:var(--navy);color:#fff;font-size:17px;font-weight:700;cursor:pointer}
.check:active{transform:translateY(1px)}
.check:disabled{opacity:.6;cursor:default}

/* —— the signature: the verdict floods the panel with its meaning —— */
.verdict{margin:22px 0 0;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  background:var(--card);animation:rise .22s ease}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.verdict{animation:none}}
.banner{padding:22px var(--pad);color:#fff}
.banner .word{font-size:46px;font-weight:900;letter-spacing:-.02em;line-height:1;
  display:flex;align-items:baseline;gap:12px}
.banner .word .hi{font-size:24px;font-weight:700;opacity:.85}
.banner .lead{margin:8px 0 0;font-size:17px;font-weight:600;opacity:.97}
.v-stop .banner{background:var(--stop)} .v-verify .banner{background:var(--verify)}
.v-safe .banner{background:var(--safe)} .v-indeterminate .banner{background:var(--unsure)}

.why{padding:14px var(--pad) 4px}
.why h3{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:0 0 8px}
.chip{display:flex;gap:9px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line);
  font-size:15px}
.chip:first-of-type{border-top:0}
.chip .dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;margin-top:7px;background:var(--muted)}
.v-stop .chip .dot{background:var(--stop)} .v-verify .chip .dot{background:var(--verify)}

.acts{padding:6px var(--pad) 18px;display:flex;flex-direction:column;gap:10px}
.cool{font-size:14px;color:var(--muted);padding:8px 0 2px}
.cool b{color:var(--ink)}
.act{display:block;text-align:center;text-decoration:none;padding:14px;border-radius:var(--r);
  font-size:16px;font-weight:700;border:1.5px solid var(--navy);color:var(--navy);background:var(--card)}
.act.primary{background:var(--stop);border-color:var(--stop);color:#fff}
.act.call{background:var(--navy);border-color:var(--navy);color:#fff}

.recovery{margin-top:26px;border-top:1px solid var(--line);padding-top:16px}
.recovery summary{cursor:pointer;font-weight:700;color:var(--stop);font-size:15px;list-style:none}
.recovery summary::-webkit-details-marker{display:none}
.recovery summary::before{content:"⚠ "}
.recovery ol{margin:12px 0 0;padding-left:20px;color:var(--ink)}
.recovery li{margin:0 0 8px}
.recovery .r-acts{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.foot{margin-top:30px;color:var(--muted);font-size:12.5px;text-align:center}
.err{color:var(--stop);font-size:14px;margin-top:10px}