/* Bank to Tally classify demo (section "Watch it classify" on /bank-statement-to-tally/), carried over from ihayz.com with its .btt-* rules.
   Source: bank-src/bank-com-btt.css. The token bridge maps ihayz.com's names onto this site's tokens; ours switch with the theme,
   so no dark block is needed. The .com fixed colours (amber, ledger panel) are replaced by site tokens. */
#btt{--n0:var(--panel);--n25:var(--bg-2);--n50:var(--panel-2);--n100:var(--line-2);--n150:var(--line-2);--n200:var(--line);--n300:var(--line-2);--n400:var(--text-3);--n500:var(--text-3);--n600:var(--text-2);--n700:var(--text);--n800:var(--text);
  --ink:var(--text);--acc:var(--brand);--acc-soft:var(--brand-soft);--acc-bd:var(--feat-line);
  --good:var(--ok);--good-bg:var(--ok-bg);--good-bd:var(--ok-line);
  --edge:1px solid var(--line);--r3:999px;--t1:12px;--t2:14px}
#btt .tiny{font-size:12px}
#btt .muted{color:var(--text-3)}
#btt .btt-seg{display:inline-flex;gap:4px;padding:4px;border:var(--edge);background:var(--n0);border-radius:var(--r3);margin:0 0 22px;flex-wrap:wrap}
#btt .btt-seg button{border:0;background:none;font:inherit;font-size:var(--t2);font-weight:600;color:var(--n600);padding:9px 16px;border-radius:var(--r3);cursor:pointer;transition:background .16s,color .16s}
#btt .btt-seg button:hover{color:var(--ink)}
#btt .btt-seg button[aria-pressed=true]{background:var(--acc);color:var(--on-brand)}
#btt .btt-sim{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:26px;align-items:start}
#btt .btt-sim>*{min-width:0}
#btt .btt-stmt{border:1px solid var(--n300);border-radius:18px;background:var(--n0);overflow:hidden;box-shadow:var(--shadow)}
#btt .btt-sh{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:var(--edge);background:var(--n50);flex-wrap:wrap}
#btt .btt-sh .btt-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--acc-soft);border:1px solid var(--acc-bd);color:var(--acc);flex:none}
#btt .btt-sh .btt-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#btt .btt-sh b{display:block;font-size:var(--t2);font-weight:640;color:var(--ink);line-height:18px}
#btt .btt-sh small{display:block;font-size:11px;color:var(--n500);line-height:15px;font-family:var(--mono)}
#btt .btt-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding:12px 16px 0;border-bottom:var(--edge)}
#btt .btt-step{position:relative;padding:0 6px 12px;font-size:11px;font-weight:600;color:var(--n600);letter-spacing:.02em;display:flex;align-items:center;gap:6px}
#btt .btt-step i{width:8px;height:8px;border-radius:var(--r3);background:var(--n300);flex:none;transition:background .3s}
#btt .btt-step[data-s=live]{color:var(--acc)}
#btt .btt-step[data-s=live] i{background:var(--acc);animation:blink 1s infinite}
#btt .btt-step[data-s=done]{color:var(--good)}
#btt .btt-step[data-s=done] i{background:var(--good)}
#btt .btt-step[data-s=wait]{color:var(--ink)}
#btt .btt-step[data-s=wait] i{background:var(--warn)}
#btt .btt-progress{height:3px;background:var(--n100)}
#btt .btt-progress i{display:block;height:100%;width:0;background:var(--acc);transition:width .5s ease}
#btt .btt-rows{height:392px;overflow-y:auto;background:var(--n25);padding:6px 0}
#btt .btt-row{display:grid;grid-template-columns:44px minmax(0,1fr) 96px 190px;gap:10px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--line);font-size:12px;animation:bttRise .34s ease both}
#btt .btt-row[data-k=x]{background:var(--warn-bg)}
#btt .btt-row[data-k=dup]{opacity:.55}
#btt .btt-d{font-family:var(--mono);color:var(--n500)}
#btt .btt-n{font-family:var(--mono);color:var(--n700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#btt .btt-a{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
#btt .btt-cr{color:var(--good);font-weight:600}
#btt .btt-dr{color:var(--n800);font-weight:600}
#btt .btt-l{display:flex;flex-direction:column;gap:3px;min-width:0}
#btt .btt-l small{font-size:10px;color:var(--n500)}
#btt .btt-think{display:inline-flex;gap:3px;padding:4px 8px;background:var(--acc-soft);border-radius:var(--r3);width:max-content}
#btt .btt-think i{width:5px;height:5px;border-radius:var(--r3);background:var(--acc);opacity:.35;animation:bttBlink 1.2s infinite}
#btt .btt-think i:nth-child(2){animation-delay:.16s}
#btt .btt-think i:nth-child(3){animation-delay:.32s}
#btt .btt-tag{display:inline-block;padding:2px 8px;border-radius:var(--r3);font-size:11px;font-weight:640;width:max-content;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#btt .btt-t-ok{background:var(--good-bg);color:var(--good);border:1px solid var(--good-bd)}
#btt .btt-t-x{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)}
#btt .btt-t-dup{background:var(--tint-2);color:var(--n500);border:1px solid var(--n200)}
#btt .btt-conf{height:3px;background:var(--n150);border-radius:2px;overflow:hidden;width:120px;max-width:100%}
#btt .btt-conf i{display:block;height:100%;background:var(--acc);width:0;animation:bttFill .8s ease forwards}
#btt .btt-sf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:var(--edge);background:var(--n0)}
#btt .btt-sf .btt-stat{font-size:12px;color:var(--n600);font-family:var(--mono);min-width:0}
#btt .btt-sf .btn{flex:none}
#btt .btt-owner{border:var(--edge);border-radius:18px;background:var(--n0);overflow:hidden;box-shadow:var(--shadow)}
#btt .btt-oh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:var(--edge);background:var(--n50)}
#btt .btt-oh b{font-size:var(--t2);font-weight:660;color:var(--ink)}
#btt .btt-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 11px;border-radius:var(--r3);font-size:var(--t1);font-weight:660;background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)}
#btt .btt-exc{padding:12px 18px;display:flex;flex-direction:column;gap:10px;min-height:120px}
#btt .btt-exc:empty::before{content:"Nothing needs you yet. Exceptions appear here as the agent finds them.";font-size:var(--t2);color:var(--n500);display:block;padding:18px 0}
#btt .btt-x{border:var(--edge);border-radius:12px;padding:12px 14px;background:var(--n0);animation:bttRise .34s ease both;min-width:0}
#btt .btt-x[data-ok]{border-color:var(--good-bd);background:var(--good-bg)}
#btt .btt-xh{display:flex;justify-content:space-between;align-items:center;gap:10px}
#btt .btt-xh b{font-family:var(--mono);font-size:12px}
#btt .btt-xn{font-family:var(--mono);font-size:11px;color:var(--n600);margin:6px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#btt .btt-sel{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--n300);border-radius:8px;padding:8px 10px;font-size:var(--t2);font-weight:560;color:var(--ink);cursor:pointer;background:var(--n0)}
#btt .btt-sel svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;flex:none}
#btt .btt-x small{display:block;margin-top:6px;font-size:11px;color:var(--n500)}
#btt .btt-ledger{border-top:var(--edge)}
#btt .btt-lh{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 18px;background:var(--con-2);color:#ecebf3;font-size:12px}
#btt .btt-lh b{font-weight:600}
#btt .btt-lh span{opacity:.75;font-family:var(--mono)}
#btt .btt-lrows{height:150px;overflow-y:auto;background:var(--bg-2);font-family:var(--mono);font-size:11px}
#btt .btt-lr{display:grid;grid-template-columns:62px minmax(0,1fr) 58px 84px;gap:8px;padding:5px 18px;color:var(--text);animation:bttRise .3s ease both}
#btt .btt-lr span{white-space:nowrap}
#btt .btt-lr span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#btt .btt-lr:nth-child(even){background:var(--tint-2)}
#btt .btt-lr span:last-child{text-align:right}
#btt .btt-lf{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:10px 18px;border-top:1px solid var(--line-2);background:var(--panel);font-size:12px;color:var(--text-2)}
#btt .btt-lf b{font-family:var(--mono);text-align:right;color:var(--text)}
#btt .btt-match{display:inline-block;margin-top:4px;padding:2px 9px;border-radius:var(--r3);font-size:11px;font-weight:640;background:var(--tint-2);color:var(--n500);border:1px solid var(--line)}
#btt .btt-match.ok{background:var(--good-bg);color:var(--good);border:1px solid var(--good-bd)}
#btt .btt-actions{display:flex;gap:8px 12px;padding:12px 18px;border-top:var(--edge);align-items:center;justify-content:space-between;flex-wrap:wrap}
#btt .btt-actions .btn,#btt .btt-sf .btn{cursor:pointer;font:inherit;font-size:14px}
#btt .btt-actions .btn:disabled{opacity:.45;cursor:default}
@keyframes bttRise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes bttBlink{0%,60%,100%{opacity:.3}30%{opacity:1}}
@keyframes bttFill{0%{background:var(--line-2)}100%{background:var(--acc)}}
@media(max-width:900px){#btt .btt-sim{grid-template-columns:minmax(0,1fr)}#btt .btt-row{grid-template-columns:40px minmax(0,1fr) 84px}#btt .btt-row .btt-l{grid-column:1/-1}#btt .btt-steps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:420px){#btt .btt-row{padding:8px 12px;gap:8px}#btt .btt-lr{grid-template-columns:58px minmax(0,1fr) 52px 76px;padding:5px 12px;gap:6px}#btt .btt-oh,#btt .btt-exc,#btt .btt-actions,#btt .btt-lf,#btt .btt-lh{padding-left:14px;padding-right:14px}}
@media(prefers-reduced-motion:reduce){#btt .btt-row,#btt .btt-x,#btt .btt-lr{animation:none}#btt .btt-conf i{animation:none}}