/* =========================================================
   Nidhish Investments — calculator page components
   Loaded after base.css. Uses the same tokens.
   ========================================================= */

/* ---------- language selector ---------- */
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--white);flex:none;}
.lang a{padding:7px 13px;font-size:.82rem;font-weight:600;text-decoration:none;color:var(--ink);line-height:1.2;
  border-right:1px solid var(--line-2);transition:background .16s ease,color .16s ease;}
.lang a:last-child{border-right:0;}
.lang a:hover{background:var(--cream-2);color:var(--navy);}
.lang a.on{background:var(--navy);color:#fff;}
.nav-right{display:flex;align-items:center;gap:14px;}
@media (max-width:860px){
  .nav-right{gap:9px;}
  .lang a{padding:6px 10px;font-size:.78rem;}
}

/* ---------- calculator hero ---------- */
.chero{background:var(--navy);padding:clamp(38px,5vw,58px) 0 clamp(30px,4vw,44px);position:relative;overflow:hidden;}
.chero::after{content:"";position:absolute;right:-150px;top:-190px;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,rgba(7,161,117,.16),transparent 68%);}
.chero-in{position:relative;z-index:2;max-width:720px;}
.chero h1{color:#fff;font-size:clamp(1.8rem,3.4vw,2.8rem);}
.chero p{color:#B6C6D2;margin-top:16px;font-size:1.04rem;max-width:60ch;}

/* ---------- input controls ---------- */
.cf-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px;}
.cf-head label{margin:0;font-size:.92rem;font-weight:600;color:var(--navy);}
.cf-val{display:inline-flex;align-items:center;gap:2px;background:var(--cream-2);border:1px solid var(--line);
  border-radius:7px;padding:5px 10px;font-weight:700;color:var(--navy);font-size:.95rem;flex:none;}
.cf-val span{opacity:.62;font-weight:600;}
.cf-val input{border:0;background:transparent;font:inherit;color:inherit;padding:0;width:7ch;text-align:right;
  -moz-appearance:textfield;}
.cf-val input.amt{width:10ch;}
.cf-val input.pct{width:4ch;}
.cf-val input.yrs{width:3ch;}
.cf-val input::-webkit-outer-spin-button,.cf-val input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.cf-val:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(7,161,117,.13);}

.crange{width:100%;-webkit-appearance:none;appearance:none;background:transparent;height:26px;cursor:pointer;display:block;}
.crange::-webkit-slider-runnable-track{height:5px;border-radius:99px;
  background:linear-gradient(to right,var(--green) 0%,var(--green) var(--fill,50%),var(--line) var(--fill,50%),var(--line) 100%);}
.crange::-moz-range-track{height:5px;border-radius:99px;background:var(--line);}
.crange::-moz-range-progress{height:5px;border-radius:99px;background:var(--green);}
.crange::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:19px;border-radius:50%;background:var(--white);
  border:2.5px solid var(--green);margin-top:-7px;box-shadow:0 2px 6px rgba(5,32,58,.22);transition:transform .14s ease;}
.crange::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:var(--white);border:2.5px solid var(--green);
  box-shadow:0 2px 6px rgba(5,32,58,.22);}
.crange:active::-webkit-slider-thumb{transform:scale(1.14);}
.crange:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(7,161,117,.24);}
.cf-scale{display:flex;justify-content:space-between;font-size:.74rem;color:var(--ink-2);margin-top:-2px;}
.cf + .cf{margin-top:22px;}

/* amount spelled out, so nobody has to count zeros */
.cf-words{font-size:.85rem;font-weight:500;color:var(--green-deep);line-height:1.4;margin-top:7px;
  min-height:1.19em;}
.cf-words:empty{margin-top:0;}
@media (max-width:560px){.cf-words{font-size:.81rem;}}

/* ---------- donut ---------- */
.donut-wrap{display:flex;align-items:center;gap:20px;margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);}
.donut{flex:none;width:118px;height:118px;transform:rotate(-90deg);}
.donut circle{fill:none;stroke-width:15;}
.donut .d-bg{stroke:rgba(255,255,255,.14);}
.donut .d-arc{stroke:var(--green-2);transition:stroke-dashoffset .5s cubic-bezier(.22,.61,.36,1);}
.legend{display:grid;gap:11px;min-width:0;}
.leg{display:flex;align-items:center;gap:9px;font-size:.87rem;color:#B6C6D2;line-height:1.35;}
.leg i{width:11px;height:11px;border-radius:3px;flex:none;}
.leg b{display:block;color:#fff;font-size:1rem;font-weight:700;}
.i-inv{background:rgba(255,255,255,.34);}
.i-ret{background:var(--green-2);}

/* ---------- year table ---------- */
.yr-toggle{margin-top:30px;}
.yr-btn{background:none;border:1.5px solid var(--line);border-radius:999px;padding:10px 20px;font:inherit;font-size:.92rem;
  font-weight:600;color:var(--navy);cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  transition:border-color .18s ease,background .18s ease;}
.yr-btn:hover{border-color:var(--navy);background:var(--cream-2);}
.yr-btn svg{width:15px;height:15px;fill:currentColor;transition:transform .22s ease;}
.yr-btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.yr-panel{display:none;margin-top:22px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--white);}
.yr-panel.open{display:block;}
.yr-scroll{max-height:420px;overflow:auto;}
.ytab{width:100%;border-collapse:collapse;font-size:.9rem;}
.ytab th,.ytab td{padding:11px 16px;text-align:right;border-bottom:1px solid var(--line-2);white-space:nowrap;}
.ytab th{position:sticky;top:0;background:var(--cream-2);color:var(--navy);font-weight:700;font-size:.82rem;z-index:1;}
.ytab th:first-child,.ytab td:first-child{text-align:left;}
.ytab td{color:var(--ink);}
.ytab td b{color:var(--navy);font-weight:700;}
.ytab tr:last-child td{border-bottom:0;}

/* ---------- CTA band ---------- */
.ctaband{background:linear-gradient(135deg,var(--navy) 0%,#07304F 100%);border-radius:14px;padding:clamp(28px,4vw,40px);
  margin-top:40px;position:relative;overflow:hidden;}
.ctaband::after{content:"";position:absolute;right:-90px;bottom:-130px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(7,161,117,.19),transparent 68%);}
.ctaband-in{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(22px,4vw,44px);align-items:center;}
.ctaband h3{color:#fff;font-family:'Fraunces',Georgia,serif;font-size:clamp(1.3rem,2.2vw,1.72rem);font-weight:600;line-height:1.24;}
.ctaband p{color:#B6C6D2;margin-top:13px;font-size:.98rem;}
.cta-acts{display:grid;gap:11px;}
.cta-acts .btn{width:100%;}
.cta-fine{color:#8FA4B4;font-size:.79rem;margin-top:4px;text-align:center;}
@media (max-width:820px){.ctaband-in{grid-template-columns:1fr;}}

/* ---------- product cards ---------- */
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.prod{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:28px 26px;display:flex;flex-direction:column;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;}
.prod:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(5,32,58,.09);border-color:#D8D0C0;}
.prod-k{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:11px;}
.prod h3{font-family:'Fraunces',Georgia,serif;font-size:1.24rem;font-weight:600;margin-bottom:11px;}
.prod p{font-size:.93rem;}
.prod-min{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2);font-size:.84rem;color:var(--ink-2);}
.prod-min b{color:var(--navy);}
.prod-go{margin-top:18px;font-size:.9rem;font-weight:600;color:var(--green-deep);text-decoration:none;}
.prod-go:hover{text-decoration:underline;}
@media (max-width:880px){.prods{grid-template-columns:1fr;}}

/* ---------- FAQ ---------- */
.faq{max-width:820px;}
.faq details{border-bottom:1px solid var(--line);padding:4px 0;}
.faq summary{cursor:pointer;list-style:none;padding:19px 40px 19px 0;font-weight:600;color:var(--navy);font-size:1.02rem;position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg);transition:transform .2s ease;}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px;}
.faq details p{padding:0 0 20px;font-size:.96rem;max-width:72ch;}

/* ---------- calculator cards ----------
   The old version was a plain bordered box, which on the homepage read
   as static content. These now signal "link" without a hover state:
   a tinted icon, a title in link colour, and an arrow that is always
   visible. Hover and focus then add motion on top. */
.rel{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.rel-card{position:relative;display:flex;align-items:flex-start;gap:13px;
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:18px 42px 18px 17px;text-decoration:none;
  box-shadow:0 1px 2px rgba(5,32,58,.04);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease,background .18s ease;}
.rel-card:hover{border-color:var(--green);transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(5,32,58,.10);}
.rel-card:focus-visible{outline:3px solid rgba(7,161,117,.45);outline-offset:2px;}

.rel-ico{flex:none;width:38px;height:38px;border-radius:10px;
  background:rgba(7,161,117,.10);display:inline-flex;align-items:center;justify-content:center;
  transition:background .18s ease;}
.rel-ico svg{width:20px;height:20px;fill:none;stroke:var(--green-deep);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.rel-card:hover .rel-ico{background:rgba(7,161,117,.18);}

.rel-txt{min-width:0;display:block;}
.rel-txt b{display:block;color:var(--green-deep);font-size:1rem;font-weight:700;
  margin-bottom:4px;line-height:1.3;}
.rel-txt span{display:block;font-size:.85rem;color:var(--ink-2);line-height:1.45;}
.rel-txt span:empty{display:none;}
.rel-card:has(.rel-txt span:empty){align-items:center;}
.nf-links{gap:14px;}
.nf-links a{color:var(--navy);font-weight:600;}
.rel-card:hover .rel-txt b{text-decoration:underline;text-underline-offset:2px;}

.rel-go{position:absolute;right:14px;top:50%;margin-top:-9px;width:18px;height:18px;
  fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .18s ease,transform .18s ease;}
.rel-card:hover .rel-go{stroke:var(--green);transform:translateX(3px);}

@media (max-width:1024px){.rel{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.rel{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){
  .rel-card:hover{transform:none;}
  .rel-card:hover .rel-go{transform:none;}
}

/* ---------- social row ---------- */
.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.social a{width:40px;height:40px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.18);transition:background .18s ease,border-color .18s ease,transform .18s ease;}
.social a:hover{background:var(--green);border-color:var(--green);transform:translateY(-2px);}
.social svg{width:18px;height:18px;fill:#B6C6D2;transition:fill .18s ease;}
.social a:hover svg{fill:var(--navy);}
.foot-social{display:flex;flex-wrap:wrap;gap:9px;}
.foot-social a{width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.16);transition:background .18s ease,border-color .18s ease;}
.foot-social svg{width:16px;height:16px;fill:#8FA4B4;transition:fill .18s ease;}
.foot-social a:hover{background:var(--green);border-color:var(--green);}
.foot-social a:hover svg{fill:var(--navy);}

/* ---------- misc ---------- */
.calc-out .big{font-size:clamp(1.9rem,3.6vw,2.6rem);}
.assump{margin-top:26px;background:var(--cream-2);border:1px solid var(--line);border-radius:10px;padding:20px 22px;}
.assump h4{margin-bottom:9px;}
.assump p{font-size:.9rem;}
.prose p + p{margin-top:16px;}
.prose h3{margin-top:30px;margin-bottom:10px;}
.prose{max-width:74ch;}
.prose ul{margin:14px 0 0;padding-left:20px;}
.prose li{margin-bottom:9px;font-size:.97rem;}


/* ---------- homepage calculator tabs ---------- */
.tabs-calc{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.tabs-calc .tab{background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);cursor:pointer;
  white-space:nowrap;}
.tabs-calc .tab:hover{border-color:var(--green);color:var(--navy);}
.tabs-calc .tab.on{background:var(--navy);border-color:var(--navy);color:#fff;}
.tabs-calc .tab:focus-visible{outline:3px solid rgba(7,161,117,.45);outline-offset:2px;}

.btn.b-line{background:transparent;color:var(--navy);border:1.5px solid var(--line);}
.btn.b-line:hover{border-color:var(--navy);background:var(--cream-2);}
.btn.b-line svg{fill:var(--navy);}

.cpanel{display:none;}
.cpanel.on{display:block;}

.cpanel-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line);}
.cpanel-foot .btn{flex:none;}
.calc-more{margin-left:auto;text-align:right;text-decoration:none;color:var(--green-deep);
  font-weight:700;font-size:.95rem;line-height:1.35;}
.calc-more::after{content:" \2192";}
.calc-more span{display:block;color:var(--ink-2);font-weight:400;font-size:.82rem;margin-top:3px;}
.calc-more:hover{text-decoration:underline;text-underline-offset:2px;}

.calc-all{text-align:center;margin-top:30px;font-size:.94rem;}
.calc-all a{color:var(--navy);font-weight:600;}

@media (max-width:860px){
  .tabs-calc{flex-wrap:nowrap;overflow-x:auto;margin-left:-20px;margin-right:-20px;
    padding:2px 20px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .tabs-calc::-webkit-scrollbar{display:none;}
  .calc-more{margin-left:0;text-align:left;width:100%;}
  .cpanel-foot .btn{flex:1 1 100%;}
}


/* ---------- scenario comparison (SWP) ---------- */
.cmp{margin-top:30px;background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:clamp(20px,3vw,26px);}
.cmp h3{font-family:'Fraunces',Georgia,serif;color:var(--navy);font-size:1.15rem;font-weight:600;margin-bottom:5px;}
.cmp .lead{font-size:.9rem;color:var(--ink-2);margin-bottom:18px;}
.bar{margin-bottom:14px;}
.bar:last-child{margin-bottom:0;}
.bar-top{display:flex;justify-content:space-between;gap:14px;font-size:.88rem;margin-bottom:5px;}
.bar-top b{color:var(--navy);white-space:nowrap;}
.bar-track{height:15px;background:var(--cream-2);border-radius:99px;overflow:hidden;}
.bar-fill{height:100%;border-radius:99px;transition:width .45s cubic-bezier(.22,.61,.36,1);}
.f1{background:var(--green-2);}
.f2{background:var(--gold);}
.f3{background:#C2453B;}
.flag{display:block;background:#FBEDEC;color:#C2453B;border:1px solid #F0CFCB;border-radius:9px;
  padding:13px 16px;font-size:.9rem;font-weight:600;margin-top:16px;line-height:1.5;}
.flag.ok{background:#E9F7F1;color:var(--green-deep);border-color:#BFE6D7;}
@media (prefers-reduced-motion:reduce){.bar-fill{transition:none;}}


/* ---------- mode tabs inside a result panel (Inflation) ---------- */
.modes{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px;}
.mode{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;
  padding:8px 14px;font:inherit;font-size:.84rem;font-weight:600;color:#B6C6D2;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;}
.mode:hover{background:rgba(255,255,255,.14);color:#fff;}
.mode.on{background:var(--green);border-color:var(--green);color:#fff;}
.mode:focus-visible{outline:3px solid rgba(11,186,136,.5);outline-offset:2px;}

/* the plain-language answer */
.calc-out .said{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.1rem,2vw,1.45rem);
  line-height:1.45;font-weight:600;color:#fff;}
.calc-out .said em{font-style:normal;color:var(--green-2);}

/* before / after scale bars */
.scales{display:grid;gap:14px;margin-top:22px;}
.sbar-wrap{display:block;}
.sbar-top{display:flex;}
.calc-out .big-lbl{display:block;}
.sbar-top{display:flex;justify-content:space-between;gap:12px;font-size:.86rem;color:#B6C6D2;margin-bottom:5px;}
.sbar-top b{color:#fff;font-size:1rem;white-space:nowrap;}
.sbar{display:block;height:18px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;}
.sbar i{display:block;height:100%;border-radius:99px;transition:width .5s cubic-bezier(.22,.61,.36,1);}
.s-today{background:#7E8FA0;}
.s-later{background:var(--green-2);}
.s-shrunk{background:var(--gold);}
@media (prefers-reduced-motion:reduce){.sbar i{transition:none;}}


/* ---------- fixes ---------- */
/* the result panel is navy, so the eyebrow needs the bright green */
.calc-out .eyebrow{color:var(--green-2);}

/* .sbar is a <span>; inline elements ignore height, which collapsed the bars
   and let the next label overlap them */
.sbar{display:block;}
.sbar-wrap{display:block;}
.sbar-top{display:flex;align-items:baseline;}
.scales{margin-top:24px;}
.scales .sbar-wrap + .sbar-wrap{margin-top:0;}