/* N2 Safe home budget calculator. Every rule scoped under .t-safe (on <main>). */
/* Navy family, same as the other 4 tools (true cost, red-flag, water, stamp duty). */
.t-safe{--ts-navy:#102b46;--ts-green:#b6e477;--ts-amber:#f2b441;--ts-red:#e8664f;--ts-deep:#102b46;--ts-panel:#1b3f63;--ts-dim:rgba(255,255,255,.62);--ts-soft:rgba(255,255,255,.8);--ts-edge:rgba(255,255,255,.18)}

/* ---------- hero + tool ---------- */
.t-safe .ts-hero{padding:34px 0 64px;border-bottom:1px solid var(--line)}
.t-safe .ts-hero .crumb{margin-bottom:22px}
.t-safe .ts-hero h1{color:var(--ts-navy);font-size:clamp(2.5rem,4.4vw,4.2rem);line-height:1.05;margin:0 0 12px;max-width:none}
.t-safe .ts-sub{color:#576978;font-size:1.15rem;margin:0 0 28px;max-width:640px}
.t-safe .ts-tool{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px;align-items:start}
.t-safe .ts-inputs{padding:26px;color:var(--ts-navy);background:#fff;border:1px solid #dce5eb;border-top:4px solid var(--ts-navy);border-radius:4px}
.t-safe .field input{border-color:#bfcbd1;color:var(--ts-navy)}
.t-safe .ts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 16px;align-items:end}
.t-safe .ts-grid .ts-wide{grid-column:1/-1}
.t-safe .field label{font-size:.82rem}
.t-safe .field input{font-size:1.05rem;font-weight:600}
.t-safe .ts-note{color:var(--muted);margin:14px 0 0;font-size:.76rem;line-height:1.45}

.t-safe .ts-out{background:var(--ts-deep);color:#fff;padding:30px;border-radius:6px;box-shadow:0 24px 60px -30px #102b4699;position:sticky;top:120px}
.t-safe .ts-empty{text-align:center;color:var(--ts-dim)}
.t-safe .ts-empty-num{display:block;font-size:5rem;color:rgba(255,255,255,.25);line-height:1}
.t-safe .ts-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.t-safe .ts-big{padding:20px 18px;display:flex;flex-direction:column;gap:6px;border-top:4px solid}
.t-safe .ts-big-safe{background:var(--ts-panel);border-color:var(--ts-green)}
.t-safe .ts-big-bank{background:transparent;border-color:var(--ts-red);outline:1px solid var(--ts-edge);outline-offset:-1px}
.t-safe .ts-tag{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:650;color:var(--ts-soft)}
.t-safe .ts-big-safe .ts-tag{color:var(--ts-green)}
.t-safe .ts-big strong{font-family:var(--serif);font-weight:400;letter-spacing:-.04em;font-size:clamp(2.4rem,4.4vw,3.7rem);line-height:1}
.t-safe .ts-big-safe strong{color:var(--ts-green)}
.t-safe .ts-big-bank strong{color:#fff}
.t-safe .ts-meta{font-size:.78rem;color:var(--ts-dim);line-height:1.45}
.t-safe .ts-gap{margin:14px 0 0;font-size:.92rem;color:#e6eef5}

/* ---------- gauge ---------- */
.t-safe .ts-gauge{margin-top:26px}
.t-safe .ts-gauge-head{display:flex;justify-content:space-between;gap:10px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ts-dim);margin-bottom:44px}
.t-safe #ts-gauge-mode{color:var(--ts-deep);background:var(--ts-green);padding:3px 8px;font-weight:700;letter-spacing:.06em}
.t-safe .ts-track{--z1:43.75%;--z2:12.5%;position:relative;height:20px;display:flex}
.t-safe .ts-zone{height:100%}
.t-safe .ts-z1{width:var(--z1);background:var(--ts-green)}
.t-safe .ts-z2{width:var(--z2);background:var(--ts-amber)}
.t-safe .ts-z3{flex:1;background:linear-gradient(90deg,var(--ts-red),#b8321f)}
.t-safe .ts-mark{position:absolute;top:-10px;bottom:-10px;width:0;transition:left .45s cubic-bezier(.2,.8,.2,1)}
.t-safe .ts-mark:before{content:'';position:absolute;left:-2px;top:0;bottom:0;width:4px;background:#fff;box-shadow:0 0 0 2px var(--ts-deep)}
.t-safe .ts-mark b{position:absolute;white-space:nowrap;font-size:.74rem;font-weight:700;letter-spacing:.03em;transform:translateX(-50%);padding:3px 8px}
.t-safe .ts-mark[data-edge=right] b{transform:translateX(-100%)}
.t-safe .ts-mark[data-edge=left] b{transform:none}
.t-safe .ts-mark-bank b{bottom:100%;background:var(--ts-red);color:#fff}
.t-safe .ts-mark-safe b{top:100%;background:var(--ts-green);color:var(--ts-deep)}
.t-safe .ts-zlabels{display:flex;margin-top:40px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:650}
.t-safe .ts-zl1{width:43.75%;color:var(--ts-green)}
.t-safe .ts-zl2{width:12.5%;color:var(--ts-amber);white-space:nowrap}
.t-safe .ts-zl3{flex:1;text-align:right;color:var(--ts-red)}
.t-safe .ts-sr{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ---------- stress tests ---------- */
.t-safe .ts-stress{background:var(--soft);padding:64px 0}
.t-safe .ts-stress-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.t-safe .ts-stress-head h2{font-size:clamp(1.9rem,3.4vw,2.8rem);margin:0;color:var(--ts-navy)}
.t-safe .ts-stress-head p{margin:0;color:var(--muted)}
.t-safe .ts-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.t-safe .ts-card{font:inherit;text-align:left;cursor:pointer;background:var(--paper);color:var(--ts-navy);border:1px solid var(--line);border-top:6px solid var(--line);padding:22px 22px 20px;display:flex;flex-direction:column;gap:6px;position:relative;transition:transform .18s,box-shadow .18s,background .18s}
.t-safe .ts-card:hover{transform:translateY(-3px);box-shadow:0 18px 30px -22px rgba(0,0,0,.35)}
.t-safe .ts-card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.t-safe .ts-card[data-light=green]{border-top-color:var(--ts-green)}
.t-safe .ts-card[data-light=amber]{border-top-color:var(--ts-amber)}
.t-safe .ts-card[data-light=red]{border-top-color:var(--ts-red)}
.t-safe .ts-card[aria-pressed=true]{background:var(--ts-navy);color:#fff;border-color:var(--ts-navy)}
.t-safe .ts-card[aria-pressed=true][data-light=green]{border-top-color:var(--ts-green)}
.t-safe .ts-card[aria-pressed=true][data-light=amber]{border-top-color:var(--ts-amber)}
.t-safe .ts-card[aria-pressed=true][data-light=red]{border-top-color:var(--ts-red)}
/* traffic light: red, amber, green dots; the matching one is lit */
.t-safe .ts-light{position:absolute;top:20px;right:18px;display:flex;gap:5px;padding:4px 6px;background:var(--ts-deep);border-radius:10px}
.t-safe .ts-light i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.18)}
.t-safe .ts-card[data-light=red] .ts-light i:nth-child(1){background:var(--ts-red);box-shadow:0 0 8px var(--ts-red)}
.t-safe .ts-card[data-light=amber] .ts-light i:nth-child(2){background:var(--ts-amber);box-shadow:0 0 8px var(--ts-amber)}
.t-safe .ts-card[data-light=green] .ts-light i:nth-child(3){background:var(--ts-green);box-shadow:0 0 8px var(--ts-green)}
.t-safe .ts-card-t{font-weight:650;font-size:.95rem;padding-right:64px}
.t-safe .ts-card-n{font-family:var(--serif);font-weight:400;letter-spacing:-.04em;font-size:clamp(2.4rem,4vw,3.3rem);line-height:1.05;margin-top:6px}
.t-safe .ts-card[data-light=red] .ts-card-n{color:#c8432b}
.t-safe .ts-card[aria-pressed=true] .ts-card-n{color:#fff}
.t-safe .ts-card[aria-pressed=true][data-light=red] .ts-card-n{color:var(--ts-red)}
.t-safe .ts-card[aria-pressed=true][data-light=green] .ts-card-n{color:var(--ts-green)}
.t-safe .ts-card-l{font-size:.8rem;color:var(--muted);margin-top:-2px}
.t-safe .ts-card-emi{font-size:.86rem;font-weight:600;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.t-safe .ts-card-bank{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:7px}
.t-safe .ts-card-bank:before{content:'';width:9px;height:9px;border-radius:50%;background:#d6dee4;flex:0 0 auto}
.t-safe .ts-card-bank[data-light=green]:before{background:#6fae2c}
.t-safe .ts-card-bank[data-light=amber]:before{background:var(--ts-amber)}
.t-safe .ts-card-bank[data-light=red]:before{background:var(--ts-red)}
.t-safe .ts-card[aria-pressed=true] .ts-card-l,.t-safe .ts-card[aria-pressed=true] .ts-card-bank{color:var(--ts-soft)}
.t-safe .ts-card[aria-pressed=true] .ts-card-emi{border-color:var(--ts-edge)}
.t-safe .ts-fine{color:var(--muted);margin:14px 0 0}

/* ---------- lead ---------- */
.t-safe .btn.wa{background:#25d366;border-color:#128c3e;color:#0b3b22}
.t-safe .btn.wa:hover{background:#1ebe5b}
.t-safe .ts-retry{background:none;border:0;padding:0;font:inherit;color:inherit}
.t-safe #ts-faq{padding-top:56px}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .t-safe .ts-tool{grid-template-columns:1fr}
  .t-safe .ts-out{position:static}
  .t-safe .ts-cards{grid-template-columns:1fr}
}
@media(max-width:600px){
  .t-safe .ts-hero{padding:22px 0 40px}
  .t-safe .ts-hero h1{font-size:2.35rem}
  .t-safe .ts-out{position:static}
  .t-safe .ts-sub{font-size:.98rem;margin-bottom:22px}
  .t-safe .ts-inputs,.t-safe .ts-out{padding:20px 16px}
  .t-safe .ts-grid{gap:12px}
  .t-safe .ts-pair{grid-template-columns:1fr 1fr;gap:8px}
  .t-safe .ts-big{padding:14px 12px}
  .t-safe .ts-big strong{font-size:2rem}
  .t-safe .ts-meta{font-size:.72rem}
  .t-safe .ts-gauge-head{flex-direction:column;align-items:flex-start;gap:8px}
  .t-safe .ts-zlabels{font-size:.6rem;letter-spacing:.05em}
  .t-safe .ts-stress{padding:40px 0}
  .t-safe .ts-card{padding:18px 16px}
}