/* Layout: sticky grouped index on the left, one calculator at a time on the right (inputs | live result); stacks on phones. */
:root{
  --bg:#f2f4f7; --surface:#ffffff; --ink:#17213a; --muted:#5a6479; --line:#dbe0e8;
  --money:#b85d06; --money-soft:#fcebd6;
  --leaf:#1d7550; --leaf-soft:#dcf1e6;
  --build:#3b55a8; --build-soft:#e1e7f8;
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  --hl:var(--money); --hl-soft:var(--money-soft);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1420; --surface:#171e2d; --ink:#e6eaf2; --muted:#9aa4b8; --line:#2a344a;
  --money:#f0a54e; --money-soft:#3a2914; --leaf:#5fc79a; --leaf-soft:#123026; --build:#8ea6f2; --build-soft:#1d2848; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1420; --surface:#171e2d; --ink:#e6eaf2; --muted:#9aa4b8; --line:#2a344a;
  --money:#f0a54e; --money-soft:#3a2914; --leaf:#5fc79a; --leaf-soft:#123026; --build:#8ea6f2; --build-soft:#1d2848; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:15px/1.55 var(--body)}
.shell{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:22px 48px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px 32px}
header{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;border-bottom:1px solid var(--line);padding-bottom:16px}
.brand{font:750 30px/1.1 var(--display);margin:0;letter-spacing:-.01em}
.brand span{color:var(--money)}
header p{margin:0;color:var(--muted)}
nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);align-self:start;display:grid;gap:18px}
.grp h3{margin:0 0 6px;font:600 11px/1 var(--body);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.grp div{display:grid;gap:2px}
nav a{all:unset;cursor:pointer;padding:7px 10px;border-radius:7px;font-size:14px;color:var(--ink)}
nav a:hover{background:var(--surface)}
nav a:focus-visible{outline:2px solid var(--money);outline-offset:1px}
nav a[aria-current="page"]{background:var(--surface);font-weight:600;box-shadow:inset 3px 0 0 var(--g,var(--money))}
.g-money{--g:var(--money)} .g-leaf{--g:var(--leaf)} .g-build{--g:var(--build)}
main{min-width:0}
.calc.money{--hl:var(--money);--hl-soft:var(--money-soft)}
.calc.leaf{--hl:var(--leaf);--hl-soft:var(--leaf-soft)}
.calc.build{--hl:var(--build);--hl-soft:var(--build-soft)}
.calc h1{font:750 26px/1.15 var(--display);margin:2px 0 6px;text-wrap:balance}
.calc .lede{margin:0 0 18px;color:var(--muted);max-width:65ch}
.kicker{font:600 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--hl)}
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:18px;align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px;display:grid;gap:14px;min-width:0}
.f{display:grid;gap:5px;font-size:13px;color:var(--muted);min-width:0}
.f b{font-weight:500;color:var(--ink)}
input,select{font:500 15px var(--mono);padding:9px 11px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--ink);width:100%;min-width:0}
input:focus-visible,select:focus-visible{outline:2px solid var(--hl);outline-offset:0;border-color:transparent}
select{font-family:var(--body)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.chk{display:flex;gap:8px;align-items:center;font-size:14px}
.chk input{width:auto}
.hint{font-size:12.5px;color:var(--muted);margin:0}
.big{background:var(--hl-soft);border-radius:8px;padding:14px 16px;display:grid;gap:2px}
.big .lbl{font-size:13px;color:var(--muted)}
.big .val{font:600 30px/1.2 var(--mono);color:var(--hl);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.big .sub{font-size:13px;color:var(--muted)}
dl.rows{margin:0;display:grid}
dl.rows div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line)}
dl.rows div:last-child{border-bottom:0}
dl.rows dt{color:var(--muted)}
dl.rows dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
dl.rows .neg dd{color:var(--muted)}
dl.rows .tot dt,dl.rows .tot dd{font-weight:600;color:var(--ink)}
.split{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--line)}
.split span{display:block}
.c1{background:var(--hl)} .c2{background:var(--muted);opacity:.45}
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.hb{display:grid;gap:8px}
.hb div{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13px}
.hb .t{height:8px;background:var(--line);border-radius:4px;overflow:hidden}
.hb .t span{display:block;height:100%;background:var(--hl)}
.hb em{font-style:normal;font-family:var(--mono);font-variant-numeric:tabular-nums}
.cols{display:flex;align-items:flex-end;gap:3px;height:120px;padding-top:6px}
.cols .col{flex:1;background:var(--hl);border-radius:3px 3px 0 0;position:relative;display:flex;align-items:flex-end;min-width:0}
.cols .col span{display:block;width:100%;background:var(--muted);opacity:.5}
.axis{display:flex;justify-content:space-between;font:12px var(--mono);color:var(--muted)}
.mt{display:grid;gap:8px}
.mrow{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center;font-size:13.5px}
.mrow.h{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.mrow small{display:block;color:var(--muted);font-size:12px}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.note{margin-top:28px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);max-width:80ch}
@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr)}
  nav{position:static;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
  .grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){.two,.three{grid-template-columns:1fr}.mrow{grid-template-columns:1fr 1fr}.mrow>:first-child{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* multi-page additions */
.shell{grid-template-areas:"head head" "nav main"}
header{grid-area:head} nav{grid-area:nav} main{grid-area:main}
.brand{text-decoration:none;color:var(--ink)}
nav a{display:block}
nav .navtitle{display:none;margin:0;font:700 18px var(--display)}
.about{margin-top:32px;max-width:70ch}
.about h2{font:700 21px/1.25 var(--display);margin:26px 0 8px}
.about p,.about li{color:var(--ink)}
.about ul{padding-left:20px}
.faq details{border-bottom:1px solid var(--line);padding:10px 0}
.faq summary{cursor:pointer;font-weight:600}
.faq details p{margin:8px 0 2px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:10px 0 26px}
.card{display:grid;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;text-decoration:none;color:var(--ink)}
.card:hover,.card:focus-visible{border-color:var(--g)}
.card b{font:700 17px/1.25 var(--display)}
.card span{font-size:13.5px;color:var(--muted)}
.home h1{font:750 30px/1.15 var(--display);margin:0 0 8px;text-wrap:balance}
.home h2{font:600 12px/1 var(--body);text-transform:uppercase;letter-spacing:.12em;color:var(--g);margin:22px 0 0}
footer{grid-column:1/-1;grid-row:auto;border-top:1px solid var(--line);padding-top:14px;font-size:12.5px;color:var(--muted)}
footer a{color:var(--muted)}
@media (max-width:860px){
  .shell{grid-template-areas:"head" "main" "nav"}
  nav{border-top:1px solid var(--line);padding-top:18px}
  nav .navtitle{display:block;grid-column:1/-1}
}

/* markets page */
:root{--up:#1d7550;--down:#c0392b}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--up:#5fc79a;--down:#ff8a7a}}
:root[data-theme="dark"]{--up:#5fc79a;--down:#ff8a7a}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 16px}
.tabs button{font:600 14px var(--body);padding:8px 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tabs button:focus-visible,.btn:focus-visible,.chips button:focus-visible{outline:2px solid var(--money);outline-offset:2px}
.tabpanel .cards{margin-top:12px}
.mk2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.mkh{font:700 18px/1.2 var(--display);margin:0 0 8px}
.mkh.up{color:var(--up)} .mkh.down{color:var(--down)}
.lookh{margin-top:34px;font-size:22px}
.tvbox{height:540px;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tvchart{height:480px;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:12px}
.tradingview-widget-container__widget{height:calc(100% - 28px)}
.tradingview-widget-copyright{font-size:11.5px;padding:5px 10px;color:var(--muted)}
.tradingview-widget-copyright a{color:var(--muted)}
.mkbar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:end;justify-content:space-between;margin-bottom:6px}
.f.inl{grid-template-columns:auto auto;align-items:center;gap:8px}
.f.inl select{width:auto}
.btn{font:600 14px var(--body);padding:9px 16px;border-radius:7px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);cursor:pointer}
table.mv{width:100%;border-collapse:collapse;font-size:14px}
table.mv th{font:600 11px var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:left;padding:4px 6px 8px}
table.mv td{padding:8px 6px;border-top:1px dashed var(--line);vertical-align:middle}
table.mv .n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
table.mv .rk{color:var(--muted);font:12px var(--mono);width:2.2em}
table.mv td.up{color:var(--up)} table.mv td.down{color:var(--down)}
.coin{display:flex;gap:8px;align-items:center;min-width:0}
.coin img{border-radius:50%;flex:none}
.coin small{color:var(--muted)}
.panel .mkh{margin-bottom:0}
.tabpanel p a,.about a,.calc .hint a,.rates .hint a{color:var(--money)}
.lookf{display:flex;gap:8px;max-width:480px;margin-top:10px}
.lookf input{flex:1}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chips button{font:500 13px var(--body);padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.chips button:hover{border-color:var(--money)}
/* EMI rates panel */
.rates{margin-top:30px}
.ratesgrid{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:16px;align-items:start}
.repo{background:var(--money-soft);border-radius:10px;padding:16px 18px;display:grid;gap:2px}
.repo .lbl{font-size:13px;color:var(--muted)}
.repo .val{font:600 34px/1.15 var(--mono);color:var(--money)}
.repo .sub{font-size:12.5px;color:var(--muted)}
.ratestab{padding:8px 14px}
.pnote{display:block;color:var(--muted);font-size:12px}
.usebtn{font:600 12.5px var(--body);padding:5px 10px;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;white-space:nowrap}
.usebtn:hover{border-color:var(--money)}
/* currency page */
.fxpair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:end}
.swap{font:600 18px var(--body);height:40px;width:44px;border-radius:7px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
.swap:hover{border-color:var(--money)}
.fxtables{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:26px;align-items:start}
.tblwrap{padding:6px 14px;overflow-x:auto}
.ccy{display:flex;gap:10px;align-items:baseline}
.ccy b{font-family:var(--mono);min-width:3.2em}
.ccy small{display:block;color:var(--muted);font-size:12px}
@media (max-width:860px){.ratesgrid,.fxtables{grid-template-columns:minmax(0,1fr)}}
.ratestab td:first-child b{white-space:nowrap}
.ratestab th.n{white-space:normal}
/* Right-to-left languages (Urdu, Arabic via Google Translate): mirror alignment, keep numbers left-to-right */
[dir=rtl] table.mv th{text-align:right}
[dir=rtl] table.mv .n{text-align:left}
.val,.n,dd,input[type=number],[translate=no]{unicode-bidi:isolate}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
@media (max-width:520px){
  .fxpair{grid-template-columns:minmax(0,1fr)}
  .swap{justify-self:center;transform:rotate(90deg)}
  .ratestab{padding:6px 10px}
  .ratestab table.mv{font-size:13px}
  .usebtn{padding:5px 8px}
}
@media (max-width:860px){.mk2{grid-template-columns:minmax(0,1fr)}.tvbox{height:500px}.tvchart{height:420px}}
@media (max-width:420px){table.mv .rk{display:none}table.mv{font-size:13px}}

/* help tips */
.tip{all:unset;box-sizing:border-box;display:inline-grid;place-items:center;width:18px;height:18px;margin-left:6px;border-radius:50%;border:1.5px solid var(--muted);color:var(--muted);font:700 11px/1 var(--body);cursor:pointer;vertical-align:1px}
.tip:hover,.tip[aria-expanded="true"]{border-color:var(--hl,var(--money));color:var(--hl,var(--money))}
.tip:focus-visible{outline:2px solid var(--money);outline-offset:2px}
.tiptext{display:block;font-size:13px;line-height:1.45;color:var(--ink);background:var(--hl-soft,var(--money-soft));border-radius:6px;padding:7px 10px;margin:0}
.tiptext[hidden]{display:none}
.mrow.h .tip{text-transform:none;letter-spacing:0}
/* header translate */
header{position:relative}
.trans{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 4px 3px 10px;background:var(--surface)}
.trans select{border:0;background:transparent;padding:4px 2px;font:500 13px var(--body);color:var(--ink);width:auto}
.trans:focus-within{border-color:var(--money)}
/* carbon equivalents */
.eq{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:10px}
.eqh{font:600 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.eqgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.eqgrid div{display:grid;gap:2px;background:var(--hl-soft);border-radius:8px;padding:10px}
.eqgrid b{font:600 20px/1.2 var(--mono);color:var(--hl);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.eqgrid span{font-size:12.5px;color:var(--muted);line-height:1.35}
.eqlink{font-size:13.5px;color:var(--hl);font-weight:600;text-decoration:none}
.eqlink:hover{text-decoration:underline}
.eqlinks{display:flex;flex-wrap:wrap;gap:6px 18px}
.pagemeta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;font-size:13px;color:var(--muted);margin:0 0 14px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px 7px}
.crumbs a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.crumbs i{font-style:normal;opacity:.6}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
.sources{padding-left:20px}
.sources li{margin:4px 0}
.byline{font-size:13px;color:var(--muted);margin-top:22px}
.inslist.orglist{grid-template-columns:repeat(3,minmax(0,1fr))}
.orglist li small{display:block;color:var(--muted);font-size:12.5px;line-height:1.4;margin-top:1px}
.orglist ul{gap:10px}
/* insurance list */
.inslist{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px 28px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin-top:10px}
.inslist h3{margin:0 0 6px;font:600 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.inslist ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.inslist ul.cols2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
.inslist a{color:var(--ink);text-decoration-color:var(--money);text-underline-offset:3px}
/* feedback */
textarea{font:15px/1.5 var(--body);padding:9px 11px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--ink);width:100%;resize:vertical;min-height:120px}
textarea:focus-visible{outline:2px solid var(--hl);outline-offset:0;border-color:transparent}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fbrow{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.btn:disabled{opacity:.6;cursor:wait}
dl.rows dd a{color:var(--ink)}
footer p a{white-space:nowrap}
@media (max-width:860px){.inslist,.inslist ul.cols2,.inslist.orglist{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.eqgrid{grid-template-columns:minmax(0,1fr)}.eqgrid div{grid-template-columns:auto 1fr;align-items:baseline;gap:8px}.trans{margin-left:0}}