/* Finclar · calculators.html — catalogue + quick regime comparison (on top of ledger.css) */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tk-hero>.wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.tk-hero h1{font-size:84px}
.tk-search{position:relative;display:flex;align-items:center;background:var(--card);border:1px solid var(--ink);border-radius:18px;box-shadow:0 24px 50px -30px rgba(16,33,63,.45);transition:box-shadow .3s}
.tk-search:focus-within{box-shadow:0 0 0 4px rgba(31,122,140,.18),0 24px 50px -30px rgba(16,33,63,.45)}
.tk-search svg{position:absolute;left:22px;color:var(--ink)}
.tk-search input{flex:1;min-width:0;border:0;background:transparent;padding:22px 16px 22px 58px;font:500 19px var(--sans);color:var(--ink);outline:none;border-radius:18px}
.tk-count{padding:0 22px;font:500 13px var(--mono);color:var(--muted);white-space:nowrap}
.tk-popular{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;align-items:center;font-size:14px;color:var(--muted)}
.tk-popular button{font:500 14px var(--sans);min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s}
.tk-popular button:hover{border-color:var(--teal);background:var(--teal-soft)}

.calc{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(16,33,63,.28)}
.calc-h{display:flex;justify-content:space-between;align-items:center;padding:20px 26px;border-bottom:1px solid var(--line-soft)}
.calc-h h2{margin:0;font:400 24px var(--serif)}
.chip{padding:6px 12px;border-radius:999px;background:var(--teal-soft);color:#155E6C;font-size:12px;font-weight:600}
.calc-b{padding:24px 26px;display:flex;flex-direction:column;gap:18px}
.calc .field label{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:500;margin-bottom:0}
.calc .field output{font:500 14px var(--mono);color:var(--teal)}
.calc input[type=range]{width:100%;accent-color:#1F7A8C;height:28px;padding:0;border:0;background:none;min-height:0;box-shadow:none}
.bars{display:flex;flex-direction:column;gap:14px;padding-top:6px}
.bar{display:grid;grid-template-columns:110px minmax(0,1fr) 120px;gap:14px;align-items:center;font-size:14px}
.bar .track{height:12px;border-radius:6px;background:#F0EBDF;overflow:hidden}
.bar .fill{height:100%;border-radius:6px;background:var(--navy);transition:width .7s var(--ease)}
.bar.new .fill{background:var(--teal)}
.bar .amt{font:500 15px var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.verdict{margin:0;padding:16px 26px;background:var(--ink);color:var(--paper);font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.verdict strong{font:400 22px var(--serif);color:#8FCAD6}
.calc small{display:block;padding:12px 26px 16px;font-size:12px;line-height:1.5;color:var(--muted)}

.tk-strip{position:sticky;top:81px;z-index:40;background:rgba(246,243,236,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-block:1px solid var(--line)}
.tk-strip .wrap{display:flex;gap:10px;padding-top:14px;padding-bottom:14px;overflow-x:auto;scrollbar-width:none}
.tk-strip .wrap::-webkit-scrollbar{display:none}
.tk-strip button{flex:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);font:500 14px var(--sans);color:var(--ink);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.tk-strip button i{font:500 12px var(--mono);font-style:normal;color:var(--muted)}
.tk-strip button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tk-strip button[aria-pressed=true] i{color:#8FCAD6}

.tk-cat{padding:72px 0 24px}
.tk-group{margin-bottom:64px}
.tk-gh{display:flex;justify-content:space-between;align-items:end;gap:24px;border-bottom:1px solid var(--ink);padding-bottom:16px;margin-bottom:24px}
.tk-gh .h2{font-size:44px;margin-top:6px}
.tk-gh p{margin:0;max-width:420px;font-size:15px;line-height:1.55;color:var(--body);text-align:right}
.tk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tk-tool{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:132px;padding:20px;background:var(--card);border:1px solid var(--line);border-radius:16px;color:var(--ink);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.tk-tool[hidden]{display:none}
.tk-tool::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(31,122,140,.12),transparent 60%);opacity:0;transition:opacity .3s}
.tk-tool:hover{transform:translateY(-4px);border-color:var(--teal);box-shadow:0 22px 40px -26px rgba(16,33,63,.5);color:var(--ink)}
.tk-tool:hover::before{opacity:1}
.tk-tool>*{position:relative}
.tk-top{display:flex;justify-content:space-between;align-items:center}
.tk-tag{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.go{width:30px;height:30px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:var(--paper);color:var(--ink);transition:background .3s,color .3s,transform .4s var(--ease)}
.tk-tool:hover .go{background:var(--teal);color:#fff;transform:rotate(-45deg)}
.tk-name{font:400 21px/1.2 var(--serif);letter-spacing:-.01em}
.tk-name mark{background:#FCE9B8;color:inherit;border-radius:3px;padding:0 1px}
.tk-empty{padding:80px 0;text-align:center;color:var(--muted);font-size:17px}
.tk-empty b{display:block;font:400 36px var(--serif);color:var(--ink);margin-bottom:8px}
.tk-band .wrap{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;align-items:start}
.tk-band h3{margin:14px 0 10px;font:400 28px var(--serif)}
.tk-band .lede{margin:0;font-size:16px}
.tk-band .u{color:#fff;border-bottom:1px solid}

@media (max-width:1200px){.tk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1024px){.tk-hero>.wrap{grid-template-columns:1fr}.tk-hero .calc{max-width:560px}.tk-band .wrap{grid-template-columns:1fr;gap:32px}}
@media (max-width:720px){
  .tk-hero h1{font-size:48px}
  .tk-search input{font-size:17px;padding:18px 12px 18px 52px}.tk-search svg{left:18px}.tk-count{padding:0 14px}
  .tk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tk-tool{min-height:112px;padding:14px;gap:18px}.tk-name{font-size:17px}
  .tk-gh{flex-direction:column;align-items:flex-start;gap:10px}.tk-gh p{text-align:left}.tk-gh .h2{font-size:32px}
  .tk-strip{top:73px}
  .bar{grid-template-columns:84px minmax(0,1fr) 96px}
}