/* th-tools.css — the free tools on /vat-calculator-south-africa and /invoice-generator-south-africa.
   Paper ground, deep ink, mint actions. Everything runs in the browser; nothing is sent anywhere. */
.tool{background:var(--paper);color:var(--on-paper);padding:clamp(48px,8vw,96px) 0}
.tool .wrap{max-width:980px;padding:0 clamp(16px,5vw,40px);box-sizing:border-box}
.tool__h{font-family:'Satoshi',sans-serif;font-weight:900;font-size:clamp(30px,5vw,52px);line-height:1.02;letter-spacing:-.02em;margin:.2em 0 .6em}
.tool__grid{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:860px){.tool__grid{grid-template-columns:1fr 1fr}.tool__grid>div:last-child{position:sticky;top:110px;align-self:start}}
.tool form{display:grid;gap:14px;font-family:'Switzer',ui-sans-serif,system-ui,sans-serif}
.tool label{display:grid;gap:6px;font-size:14px;font-weight:600}
.tool input[type=text],.tool input[type=date],.tool textarea{font:inherit;font-weight:400;font-size:16px;color:var(--on-paper);background:#fff;border:1.5px solid var(--paper-2);border-radius:10px;padding:12px 14px;width:100%;box-sizing:border-box}
.tool input:focus,.tool textarea:focus{outline:none;border-color:var(--mint-lo);box-shadow:0 0 0 3px rgba(79,216,166,.35)}
.tool fieldset{border:1.5px solid var(--paper-2);border-radius:10px;padding:10px 14px;margin:0;display:grid;gap:8px}
.tool legend{font-size:14px;font-weight:600;padding:0 4px}
.tool .opt{display:flex;gap:6px;align-items:center;font-weight:400;font-size:15px}
/* 40px hit area (th.css touch floor), a 20px control drawn inside it — no pseudo-elements, so every engine draws it */
.tool .opt input{-webkit-appearance:none;appearance:none;flex:0 0 40px;width:40px;height:40px;margin:0 0 0 -10px;cursor:pointer;border:0;border-radius:50%;
  background:radial-gradient(circle,#fff 0 8px,var(--on-paper) 8.5px 10px,transparent 10.5px)}
.tool .opt input[type=radio]:checked{background:radial-gradient(circle,var(--mint-lo) 0 5px,#fff 5.5px 8px,var(--on-paper) 8.5px 10px,transparent 10.5px)}
.tool .opt input[type=checkbox]{border-radius:8px;background:linear-gradient(#fff,#fff) center/16px 16px no-repeat,linear-gradient(var(--on-paper),var(--on-paper)) center/20px 20px no-repeat}
.tool .opt input[type=checkbox]:checked{background:linear-gradient(var(--mint-lo),var(--mint-lo)) center/10px 10px no-repeat,linear-gradient(#fff,#fff) center/16px 16px no-repeat,linear-gradient(var(--on-paper),var(--on-paper)) center/20px 20px no-repeat}
.tool .opt input:focus-visible{outline:3px solid rgba(79,216,166,.6);outline-offset:-4px}
.tool__btn{font:inherit;font-weight:700;font-size:15px;background:var(--mint);color:var(--on-mint);border:0;border-radius:999px;padding:13px 22px;cursor:pointer;justify-self:start}
.tool__btn:hover{background:var(--mint-hi)}
.tool__btn--ghost{background:transparent;color:var(--on-paper);border:1.5px solid var(--on-paper)}
.tool__btn--ghost:hover{background:var(--paper-2)}
.tool__out{margin:0;display:grid;gap:0;background:#fff;border:1.5px solid var(--paper-2);border-radius:14px;overflow:hidden}
.tool__out div{display:flex;justify-content:space-between;gap:16px;padding:16px 18px;border-top:1px solid var(--paper-2)}
.tool__out div:first-child{border-top:0}
.tool__out dt{font-weight:600}
.tool__out dd{margin:0;font-family:'Cabinet','Satoshi',sans-serif;font-weight:800;font-size:20px;font-variant-numeric:tabular-nums}
.tool__out .is-total{background:var(--deep);color:#fff}
.tool__note{font-size:14px;line-height:1.5;opacity:.85;margin:12px 0 0}
.tool__warn{font-size:14px;line-height:1.5;background:#fff;border-left:4px solid var(--mint-lo);padding:10px 14px;margin:0}
.tool__lines{display:grid;gap:10px}
.tool__line{display:grid;gap:8px;grid-template-columns:1fr 70px 110px}
.tool__line input{min-width:0}
/* the invoice preview — a sheet of paper */
.inv{background:#fff;color:#111;border:1.5px solid var(--paper-2);border-radius:6px;padding:28px;font-family:'Switzer',ui-sans-serif,system-ui,sans-serif;font-size:13px;line-height:1.45}
.inv__top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.inv__title{font-family:'Satoshi',sans-serif;font-weight:900;font-size:24px;letter-spacing:.02em;margin:0 0 4px}
.inv__muted{color:#555}
.inv__pre{white-space:pre-line}
.inv__to{margin-top:16px}
.inv table{width:100%;border-collapse:collapse;margin:18px 0}
.inv th,.inv td{text-align:left;padding:7px 6px;border-bottom:1px solid #ddd;vertical-align:top}
.inv th:nth-child(n+2),.inv td:nth-child(n+2){text-align:right;white-space:nowrap}
.inv__tot{margin-left:auto;max-width:280px}
.inv__tot div{display:flex;justify-content:space-between;padding:4px 0}
.inv__tot .grand{font-weight:800;border-top:2px solid #111;margin-top:4px;padding-top:8px}
#inv-doc .inv__tot span{font-size:14px}
@media print{
  body *{visibility:hidden}
  #inv-doc,#inv-doc *{visibility:visible}
  #inv-doc{position:absolute;left:0;top:0;width:100%;border:0;padding:0}
}