/* Maaser calculator (tools/maaser-calculator.html). Frame: tool-frame.css + tools/kit.css. */

/* Percentage choice */
.percentage-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tf-work .percentage-btn { display: grid; gap: 6px; justify-items: start; text-align: left; padding: 18px; min-height: 88px; border: 1px solid var(--hair-strong); border-radius: var(--r-chip); background: var(--paper-2); color: var(--ink); cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.tf-work .percentage-btn:hover { border-color: var(--ink); }
.percentage-btn .pct { font: 300 30px/1 var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.percentage-btn .desc { font: 400 13px/1.3 var(--font-sans); color: var(--ink-2); }
.tf-work .percentage-btn.active { background: var(--ink); border-color: var(--ink); color: var(--paper-2); }
.percentage-btn.active .desc { color: rgba(251, 250, 246, .7); }
@media (max-width: 420px) { .percentage-btn .pct { font-size: 24px; } .tf-work .percentage-btn { padding: 14px; } }
#custom-percent-field { margin-top: 20px; }

#balance-metric.positive .tf-result { color: var(--up); }
#balance-metric.positive #balance-hint { color: var(--up); }
.percentage-selector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 360px) { .percentage-btn .pct { font-size: 20px; } .tf-work .percentage-btn { padding: 12px; } }

/* Toggle rows: the whole label is a 44px tap target */
.tk-toggle label { min-height: 44px; align-content: center; }
#maaser-status:empty { display: none; }
#maaser-status { margin-top: 12px; }