/* StampWorth tools pages (/tools/*): form and result styles on top of /style.css. */
.tool{margin:30px 0 10px; padding:22px; border:1px solid var(--line); border-radius:18px; background:var(--panel)}
.tool h2{margin:0 0 6px; font-size:22px}
.tool fieldset{border:0; margin:18px 0 0; padding:0; min-width:0}
.tool legend{font-weight:800; font-size:15px; color:var(--ink); padding:0; margin-bottom:10px}
.tool-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px 18px}
.tool label{display:block; font-size:14px; color:var(--muted); margin-bottom:5px}
.tool .hint{display:block; font-size:12.5px; color:var(--dim); margin-top:4px}
.tool input[type=number]{width:100%; min-height:44px; padding:10px 12px; font:inherit; font-size:16px;
  color:var(--ink); background:var(--ground); border:1px solid var(--line); border-radius:10px}
.tool input[type=number]:focus,.tool input[type=checkbox]:focus-visible,.tool input[type=radio]:focus-visible{outline:2px solid var(--teal-hi); outline-offset:2px}
.tool .choice{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; margin:0 0 8px;
  border:1px solid var(--line); border-radius:10px; background:var(--panel-2); color:var(--ink); font-size:15px; cursor:pointer}
.tool .choice input{width:20px; height:20px; margin:2px 0 0; flex:none; accent-color:var(--teal)}
.tool .choice a{font-size:13px; white-space:nowrap}
.tool .inline{display:flex; flex-wrap:wrap; gap:8px}
.tool .inline .choice{margin:0}
.tool-results{margin-top:22px; padding:18px; border-radius:14px; background:var(--ground); border:1px solid var(--line)}
.tool-results h3{margin:0 0 10px; font-size:17px}
.tool-big{font-size:30px; font-weight:900; color:var(--teal-hi); letter-spacing:-.5px; margin:2px 0}
.tool-results dl{display:grid; grid-template-columns:1fr auto; gap:6px 16px; margin:0 0 14px; font-size:15px}
.tool-results dt{color:var(--muted)}
.tool-results dd{margin:0; text-align:right; font-variant-numeric:tabular-nums}
.tool-results dd.total{font-weight:800; color:var(--ink)}
.tool-results table{width:100%; border-collapse:collapse; font-size:15px}
.tool-results th,.tool-results td{padding:8px 6px; border-bottom:1px solid var(--line); text-align:left}
.tool-results td.n{text-align:right; font-variant-numeric:tabular-nums}
.tool-results thead th{font-size:12px; text-transform:uppercase; color:var(--muted)}
.tool-best-row th,.tool-best-row td{color:var(--teal-hi)}
.tool-best{font-size:12px; font-weight:800; text-transform:uppercase; margin-left:6px}
.tool-meter{height:10px; border-radius:6px; background:var(--line); overflow:hidden; margin:8px 0 12px}
.tool-meter span{display:block; height:100%; width:4%; background:var(--teal); transition:width .2s ease}
.tool-meter[data-level="1"] span{width:25%; background:var(--teal-hi)}
.tool-meter[data-level="2"] span{width:50%; background:var(--amber-hi)}
.tool-meter[data-level="3"] span{width:75%; background:var(--amber)}
.tool-meter[data-level="4"] span{width:100%; background:#E8664F}
.tool-results ul{margin:10px 0 0; padding-left:20px; font-size:15px}
.tool-results li{margin-bottom:8px}
.tool-note{font-size:13px; color:var(--dim); margin:12px 0 0}
.tool-nojs{margin:16px 0 0; padding:12px 14px; border:1px solid var(--amber); border-radius:10px; color:var(--amber-hi); font-size:14px}
html.js .tool-nojs{display:none}
.tool button{margin-top:16px; min-height:44px; padding:10px 18px; font:inherit; font-weight:800; border:0; border-radius:10px;
  background:var(--teal); color:#04120E; cursor:pointer}
html.js .tool button.tool-submit{display:none}
@media (max-width:520px){.tool{padding:16px} .tool-big{font-size:26px}}
.tool .tool-lead{margin:0}
.tool .tool-sub{margin:0}
.tool .tool-sub legend{font-weight:400; font-size:14px; color:var(--muted); margin-bottom:5px}
.tool .tool-sub-big{margin:0 0 14px}