/* KitnaBanega: the rupee note. Each section wears the colour of a real note
   (₹2000 magenta, ₹200 marigold, ₹50 blue, ₹500 stone, ₹100 lavender);
   results are printed on a note with engraved line work and a ₹ watermark. */
:root{
  --ink:#1B2140; --muted:#59617A; --page:#EEF2EC; --paper:#FFFFFF; --rule:#DDE3DA; --rule-strong:#BFC9BC;
  --invest:#B4236E; --loan:#C9780A; --save:#127FA0; --tax:#566A55; --life:#6E5BB8;
  --brand:#B4236E; --brand-dark:#8C1754; --growth:#1F8A5B; --cost:#C2410C; --hi:#FFE08A;
  --note:var(--brand);
  --r-s:6px; --r-l:18px; --wrap:1140px;
  --display:"Anek Latin",system-ui,sans-serif; --body:"Hind",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink:#E9ECF5;--muted:#A8B0C4;--page:#12162B;--paper:#1B2038;--rule:#2A3150;--rule-strong:#3A4368;--brand:#E0559C;--brand-dark:#F08BBE;--growth:#4CC08A;--cost:#F47B4F;--hi:#6B5714;color-scheme:dark}}
:root[data-theme="dark"]{--ink:#E9ECF5;--muted:#A8B0C4;--page:#12162B;--paper:#1B2038;--rule:#2A3150;--rule-strong:#3A4368;--brand:#E0559C;--brand-dark:#F08BBE;--growth:#4CC08A;--cost:#F47B4F;--hi:#6B5714;color-scheme:dark}
[data-g=invest]{--note:var(--invest)}[data-g=loan]{--note:var(--loan)}[data-g=save]{--note:var(--save)}[data-g=tax]{--note:var(--tax)}[data-g=life]{--note:var(--life)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:400 18px/1.65 var(--body)}
@media (max-width:640px){body{font-size:17px}}
a{color:var(--brand-dark);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--brand)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}
img,svg{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.calc>*,.index>*{min-width:0}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--paper);padding:8px 12px;z-index:9}
h1,h2,h3{font-family:var(--display);font-stretch:108%;letter-spacing:-.01em;text-wrap:balance}

/* header: a navy band, like the dark border printed on every note */
.top{background:#1B2140;color:#fff}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:700 25px/1 var(--display);font-stretch:112%;letter-spacing:-.01em}
.brand .tag{display:grid;place-items:center;width:46px;height:30px;border-radius:5px;background:var(--invest);color:#fff;font:700 19px/1 var(--display);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.brand em{font-style:normal;color:#F6A9CF}
.top nav{display:flex;gap:6px;flex-wrap:wrap}
.top nav a{color:#C9CEE0;text-decoration:none;font-weight:500;padding:6px 10px;border-radius:999px}
.top nav a:hover,.top nav a[aria-current]{color:#fff;background:rgba(255,255,255,.1)}
@media (max-width:560px){.top .wrap{padding-top:8px;padding-bottom:4px;row-gap:2px}.top nav{flex-wrap:nowrap;gap:2px;overflow-x:auto;scrollbar-width:none;font-size:15px;margin:0 -10px;width:calc(100% + 20px)}.top nav::-webkit-scrollbar{display:none}.top nav a{white-space:nowrap}}

/* the note: used for the home answer and every result */
.note,.note-head{position:relative;overflow:hidden;color:#fff;background-color:var(--note);
  background-image:
    radial-gradient(ellipse 30% 70% at 92% 55%,rgba(255,255,255,.13),rgba(255,255,255,.13) 70%,transparent 71%),
    repeating-radial-gradient(circle at 0% 100%,transparent 0 9px,rgba(255,255,255,.09) 9px 10px),
    repeating-radial-gradient(circle at 100% 0%,transparent 0 13px,rgba(0,0,0,.06) 13px 14px),
    linear-gradient(135deg,rgba(255,255,255,.12),rgba(0,0,0,.12));}
.note::after,.note-head::after{content:"₹";position:absolute;right:5%;bottom:-.12em;font:800 clamp(110px,13vw,170px)/1 var(--display);color:rgba(255,255,255,.12);pointer-events:none}
.note::before,.note-head::before{content:"";position:absolute;inset:7px;border:1.5px solid rgba(255,255,255,.4);border-radius:calc(var(--r-l) - 6px);pointer-events:none}
.note mark,.note-head mark{background:none;color:#fff;padding:0;white-space:nowrap;font:800 clamp(42px,5.6vw,78px)/1 var(--display);font-stretch:112%;letter-spacing:-.025em;text-shadow:0 2px 0 rgba(0,0,0,.12)}
[data-g=loan] .note-head mark,[data-g=loan] .note-head{color:#1B2140}
[data-g=loan] .note-head::before{border-color:rgba(27,33,64,.3)}
[data-g=loan] .note-head::after{color:rgba(27,33,64,.12)}

/* home hero: the brand's own question on navy, the answer printed on a note */
.hero{background:#1B2140;color:#fff;padding:44px 0 56px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:28px}.hero{padding:28px 0 36px}}
.hero h1{font-weight:600;font-size:clamp(30px,4.4vw,54px);line-height:1.2;margin:0 0 18px;font-stretch:104%}
.hero h1 input,#h-ret{font:inherit;color:#FFD36E;background:rgba(255,255,255,.08);border:0;border-bottom:3px solid #FFD36E;border-radius:8px 8px 0 0;padding:0 6px;text-align:center;-moz-appearance:textfield;min-width:1.6ch}
#h-ret{width:2.8ch;border-bottom-width:2px}
.hero h1 input::-webkit-outer-spin-button,.hero h1 input::-webkit-inner-spin-button,#h-ret::-webkit-outer-spin-button,#h-ret::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hero h1 input:focus,#h-ret:focus{outline:none;background:rgba(255,255,255,.16)}
.hero .assume{color:#C9CEE0;font-size:16px;margin:0}
.hero .assume a{color:#fff}
.hero-note{border-radius:var(--r-l);padding:30px 32px 26px;min-height:230px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);transform:rotate(-1.5deg)}
@media (max-width:900px){.hero-note{transform:none;min-height:0;padding:24px 22px}}
.note-q{margin:0 0 6px;font-size:18px;opacity:.92;position:relative}
.answer{margin:0;position:relative}
.hero .sub{margin:12px 0 0;font-size:16px;opacity:.92;position:relative;max-width:30ch}

/* calculator index: one block per note colour */
.find{display:flex;align-items:center;gap:10px;margin:-26px 0 30px;max-width:560px;position:relative}
.find input{flex:1;font:inherit;padding:14px 18px;border:0;border-radius:999px;background:var(--paper);color:var(--ink);box-shadow:0 8px 24px -10px rgba(27,33,64,.35),inset 0 0 0 1.5px var(--rule-strong)}
.find input:focus{outline:none;box-shadow:0 8px 24px -10px rgba(27,33,64,.35),inset 0 0 0 2px var(--brand)}
.page .find{margin:0 0 28px}
.index{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px;padding:0 0 40px;align-items:start}
.index section{background:var(--paper);border-radius:var(--r-l);overflow:hidden;box-shadow:inset 0 0 0 1px var(--rule)}
.index h2{margin:0;padding:14px 20px;font-size:21px;font-weight:700;color:#fff;background:var(--note,var(--ink));
  background-image:repeating-radial-gradient(circle at 100% 0%,transparent 0 9px,rgba(255,255,255,.12) 9px 10px)}
[data-g=loan].index h2,section[data-g=loan] h2{color:#1B2140}
.index section:not([data-g]) h2{background-color:var(--ink)}
.index ul{list-style:none;margin:0;padding:6px 0}
.index li a{display:flex;align-items:baseline;gap:10px;padding:9px 20px;color:var(--ink);text-decoration:none}
.index li+li a{border-top:1px solid var(--rule)}
.index li a span{flex:1 1 auto;font-weight:600;min-width:0}
.index li a i{display:none}
.index li a small{flex:0 1 auto;max-width:52%;color:var(--muted);font-size:15px;line-height:1.35;text-align:right}
.index li a:hover{background:color-mix(in srgb,var(--note,var(--brand)) 8%,transparent)}
.index li a:hover span{color:var(--note,var(--brand));text-decoration:underline;text-underline-offset:3px}
[data-g=loan] li a:hover span{color:#8A5207}
@media (max-width:420px){.index li a{flex-wrap:wrap;row-gap:0}.index li a small{text-align:left;flex-basis:100%}}

/* pages */
.page{padding-top:26px;padding-bottom:56px}
.crumbs{font-size:15px;color:var(--muted);margin-bottom:8px}.crumbs a{color:var(--muted)}
.page h1{font-weight:700;font-size:clamp(30px,4vw,46px);line-height:1.12;margin:0 0 10px}
.lede{color:var(--muted);max-width:66ch;margin:0 0 26px}
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:860px){.calc{grid-template-columns:1fr;gap:22px}}
.inputs{display:grid;gap:20px;background:var(--paper);border-radius:var(--r-l);padding:24px;box-shadow:inset 0 0 0 1px var(--rule)}
.fld label{display:block;font-weight:600;margin-bottom:6px}
.numrow{display:flex;align-items:center;border-radius:var(--r-s);background:var(--page);box-shadow:inset 0 0 0 1.5px var(--rule)}
.numrow:focus-within{box-shadow:inset 0 0 0 2px var(--note)}
.numrow input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:700 22px/1 var(--display);font-stretch:110%;padding:11px 12px;font-variant-numeric:tabular-nums}
.numrow input:focus{outline:none}
.unit{padding:0 12px;color:var(--muted);font-weight:600}.unit.pre{padding-right:0}
.fld input[type=range]{width:100%;margin:12px 0 0;accent-color:var(--note)}
.fld select,.fld input[type=date],.flow input,.flow select{width:100%;font:inherit;padding:10px 12px;border:0;box-shadow:inset 0 0 0 1.5px var(--rule);border-radius:var(--r-s);background:var(--page);color:var(--ink)}
.hint{display:block;color:var(--muted);font-size:15px;margin-top:2px}

/* result: a note on top, a white receipt below */
.slip{position:sticky;top:16px;background:var(--paper);border-radius:var(--r-l);overflow:hidden;box-shadow:inset 0 0 0 1px var(--rule),0 18px 40px -26px rgba(27,33,64,.5);padding:0 0 18px}
.slip>:not(.note-head){margin-left:24px;margin-right:24px}
.note-head{padding:24px 24px 26px;margin:0 0 18px}
.note-head::before{border-radius:12px}
.note-head p{position:relative}
.slip-q{margin:0 0 6px;font-size:17px;opacity:.95}
.slip-a{margin:0}
.slip-a mark{font-size:clamp(38px,5vw,60px)}
.slip>p:not(.slip-q):not(.note):not(.legend){margin-top:0}
.split{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--rule);margin:0 0 8px}
.split .part.in{background:var(--ink)}.split .part.gain{background:var(--growth)}.split .part.cost{background:var(--cost)}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 10px;font-size:15px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.key.in i{background:var(--ink)}.key.gain i{background:var(--growth)}.key.cost i{background:var(--cost)}
.rows{margin:0}
.rows div{display:flex;justify-content:space-between;gap:16px;min-height:40px;align-items:center;border-top:1px dashed var(--rule-strong)}
.rows dt{color:var(--muted)}.rows dd,td{font-variant-numeric:tabular-nums}
.rows dd{margin:0;font-weight:700;text-align:right;font-family:var(--display);font-stretch:108%;font-size:19px}
.note{font-size:15px}
.slip>.note{background:none;color:var(--muted);margin-top:10px}
.slip>.note::before,.slip>.note::after{display:none}
.content .facts{background:var(--paper);border-radius:var(--r-l);padding:6px 20px;box-shadow:inset 0 0 0 1px var(--rule)}
.content .facts div:first-child{border-top:0}

/* tables */
#ledger h2,.content h2,.page>h2{font-weight:700;font-size:26px;line-height:1.25;margin:40px 0 12px}
.tablewrap{overflow-x:auto;border-radius:var(--r-l);background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule)}
table{border-collapse:collapse;width:100%;font-size:16px}
th,td{padding:9px 14px;text-align:right;border-bottom:1px solid var(--rule);white-space:nowrap}
thead th{background:#1B2140;color:#fff;font-weight:500;text-align:right;position:sticky;top:0}
th[scope=row],thead th:first-child{text-align:left}
tbody tr:nth-child(even){background:color-mix(in srgb,var(--page) 55%,transparent)}
tbody th{font-weight:600}
tbody tr:last-child>*{border-bottom:0}

/* XIRR rows */
.flowlist{display:grid;gap:8px}
.flow{display:grid;grid-template-columns:1.1fr 1.2fr 1fr auto;gap:6px}
@media (max-width:520px){.flow{grid-template-columns:1fr 1fr}.flow .del{grid-column:2;justify-self:end}}
.del,.add{font:inherit;border:0;box-shadow:inset 0 0 0 1.5px var(--rule-strong);background:var(--paper);color:var(--ink);border-radius:999px;padding:8px 16px;cursor:pointer}
.add{margin-top:10px;font-weight:600}
.del:hover,.add:hover{box-shadow:inset 0 0 0 2px var(--note);color:var(--ink)}

/* reading pages */
.content{max-width:70ch}
.content h3{font-weight:700;font-size:21px;line-height:1.3;margin:26px 0 6px}
.content p,.content li{color:var(--ink)}
.content table{margin:0}
.content .tablewrap{margin:10px 0 20px}
.formula{font:600 19px/1.5 var(--display);background:var(--paper);border-left:5px solid var(--brand);padding:12px 16px;border-radius:0 var(--r-s) var(--r-s) 0}
details{border-top:1px solid var(--rule-strong);padding:12px 0}
details:last-of-type{border-bottom:1px solid var(--rule-strong)}
summary{cursor:pointer;font-weight:600;font-family:var(--display);font-size:19px}
summary:hover{color:var(--brand)}
details p{margin:8px 0 2px}
.related{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;list-style:none}
.related a{display:inline-block;padding:7px 14px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule-strong);color:var(--ink);text-decoration:none;font-size:16px;line-height:1.3}
.related a:hover{box-shadow:inset 0 0 0 2px var(--brand);color:var(--brand-dark)}
.asof{font-size:15px;color:var(--muted)}
.home-more{padding-bottom:20px}

/* footer */
.foot{background:#1B2140;color:#B9BFD4;padding:32px 0 44px;font-size:15px;margin-top:20px}
.foot nav{display:flex;gap:8px 18px;flex-wrap:wrap;margin-bottom:12px}
.foot a{color:#fff}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* glossary and ready answers */
.glossary{margin:0;background:var(--paper);border-radius:var(--r-l);padding:4px 22px;box-shadow:inset 0 0 0 1px var(--rule)}
.glossary>div{padding:14px 0;border-bottom:1px solid var(--rule);scroll-margin-top:16px}
.glossary>div:last-child{border-bottom:0}
.glossary>div:target{background:var(--hi);margin:0 -22px;padding-left:22px;padding-right:22px}
.glossary dt{font:700 20px/1.3 var(--display);font-stretch:106%}
.glossary dd{margin:4px 0 0}
.answerline{color:var(--ink);font-size:20px;max-width:62ch}
.answerline strong{background:linear-gradient(transparent 58%,var(--hi) 58%)}
.facts{margin-bottom:8px}

/* interactive inputs: label and value on one line, coloured slider below */
.fld.slide{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px}
.fld.slide>label{margin:0}
.fld.slide .numrow{width:clamp(150px,46%,200px);background:color-mix(in srgb,var(--note) 10%,var(--paper));box-shadow:none}
.fld.slide .numrow input{text-align:right;color:var(--note);padding:9px 8px;font-size:19px}
@media (max-width:480px){.fld.slide .numrow{width:150px}.fld.slide>label{font-size:16px;line-height:1.3}}
[data-g=loan] .fld.slide .numrow input{color:#8A5207}
.fld.slide .unit{color:var(--note);padding-left:10px}
[data-g=loan] .fld.slide .unit{color:#8A5207}
.fld.slide .numrow:focus-within{box-shadow:inset 0 0 0 2px var(--note)}
.fld.slide input[type=range],.fld.slide .hint{grid-column:1/-1}
.fld.slide .hint{text-align:right;margin-top:0}
.fld input[type=range]{-webkit-appearance:none;appearance:none;height:22px;background:transparent;cursor:pointer;margin:12px 0 2px}
.fld input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(to right,var(--note) 0 var(--p,50%),var(--rule) var(--p,50%) 100%)}
.fld input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--rule)}
.fld input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--note)}
.fld input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:var(--paper);border:0;box-shadow:0 1px 4px rgba(27,33,64,.35),inset 0 0 0 6px var(--note)}
.fld input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--paper);border:0;box-shadow:0 1px 4px rgba(27,33,64,.35),inset 0 0 0 6px var(--note)}
.fld input[type=range]:focus-visible{outline:none}
.fld input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--note) 30%,transparent),inset 0 0 0 6px var(--note)}

/* ring chart: your money vs interest / returns */
.ringbox{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center;margin:0 0 14px}
@media (max-width:420px){.ringbox{grid-template-columns:120px minmax(0,1fr);gap:12px}}
.ring{width:100%;height:auto;display:block}
.ring .seg{fill:none;stroke-width:6.5}
.ring .seg.in{stroke:#C9D2EA}
.ring .seg.gain{stroke:var(--growth)}
.ring .seg.cost{stroke:var(--cost)}
.ring-l{font:500 3.1px var(--body);fill:var(--muted);text-anchor:middle}
.ring-v{font:800 4.6px var(--display);fill:var(--ink);text-anchor:middle}
.ring-key{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ring-key li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;column-gap:8px;align-items:baseline}
.ring-key i{width:12px;height:12px;border-radius:50%;align-self:center}
.ring-key li.in i{background:#C9D2EA}.ring-key li.gain i{background:var(--growth)}.ring-key li.cost i{background:var(--cost)}
.ring-key span{color:var(--muted);font-size:15px;line-height:1.3}
.ring-key b{font:700 19px/1.2 var(--display);font-stretch:106%;grid-column:2;font-variant-numeric:tabular-nums}
.ring-key small{grid-column:3;grid-row:1/3;align-self:center;font:700 15px var(--display);color:var(--muted)}

.also{margin:-14px 0 24px;color:var(--muted);font-size:16px;max-width:66ch}