/* The free tools (/tools/): forms, results and charts on top of the ranges pages' look (/learn/ranges/ranges.css). */
.tool{background:var(--paper-raised);border:1px solid var(--brd);border-radius:4px;padding:16px;margin:8px 0 18px}
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px 16px}
.fields label,.field{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--ink-dim)}
.fields small,.field small{font-weight:400;color:var(--ink-faint)}
input[type=text],input[type=number],textarea,select{font:inherit;font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--brd);border-radius:3px;padding:7px 9px;width:100%}
input:focus,textarea:focus,select:focus{outline:2px solid var(--felt);outline-offset:0;border-color:var(--felt)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:#A3352B;background:#FFF5F2}
textarea{min-height:64px;resize:vertical}
.acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
button.btn{border:0;cursor:pointer;font:inherit;font-weight:600}
button.ghost{background:none;border:1px solid var(--brd);border-radius:3px;padding:7px 12px;font:inherit;font-weight:600;color:var(--ink);cursor:pointer}
button.ghost:hover{background:var(--paper-inset)}
.err{color:#A3352B;font-size:13px;margin:8px 0 0}
.status{font-size:12px;color:var(--ink-faint)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin:14px 0}
.stat{background:#fff;border:1px solid var(--brd);border-radius:3px;padding:10px 12px}
.stat span{display:block;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-faint)}
.stat b{display:block;font-family:var(--serif);font-size:26px;line-height:1.15;font-variant-numeric:tabular-nums;margin-top:2px}
.stat small{display:block;color:var(--ink-faint);font-size:12px;margin-top:2px}
.res{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.res th,.res td{border-bottom:1px solid var(--brd);padding:7px 6px;text-align:left;vertical-align:top}
.res th{font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.res .n{text-align:right}
.bar{height:8px;background:var(--paper-inset);border-radius:2px;margin-top:5px;overflow:hidden}.bar i{display:block;height:100%;width:0;margin:0;border-radius:0;background:var(--felt)}
.chart{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--brd);border-radius:3px}
.chart .ax{font:11px var(--mono);fill:var(--ink-faint)}.chart .grid{stroke:var(--paper-inset);stroke-width:1}
.chart .zero{stroke:var(--ink-faint);stroke-width:1;stroke-dasharray:3 3}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-dim);margin:8px 0 0}.legend i{width:14px;height:10px;margin-right:6px}
.players{display:grid;gap:10px}
.player{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:10px;align-items:center}
.player b{font-size:13px}.player small{color:var(--ink-faint);font-size:12px;white-space:nowrap}
.player .rm{background:none;border:0;color:var(--ink-faint);cursor:pointer;font-size:18px;line-height:1;padding:2px 6px}
@media(max-width:560px){.player{grid-template-columns:1fr auto}.player b{grid-column:1/-1}}
.examples{font-size:12px;color:var(--ink-faint);margin:10px 0 0}.examples button{background:none;border:0;padding:0;font:inherit;color:var(--felt);text-decoration:underline;cursor:pointer;margin-right:10px}
.prose{max-width:72ch}.prose p,.prose li{font-size:14px}
.formula{background:var(--paper-inset);border-radius:3px;padding:8px 12px;font-size:13px;overflow-x:auto}
.toolgrid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.toolgrid a{display:block;height:100%;background:var(--paper-raised);border:1px solid var(--brd);border-left:4px solid var(--felt);border-radius:3px;padding:14px 16px;text-decoration:none;color:var(--ink)}
.toolgrid a:hover{border-color:var(--felt)}.toolgrid b{display:block;font-family:var(--serif);font-size:19px;margin-bottom:4px}.toolgrid small{color:var(--ink-dim);font-size:13px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}