/* tool pages */
main.tool-page { padding: var(--s8) var(--gutter) var(--s9); }
main.tool-page h1 { margin-bottom: var(--s4); }
main.tool-page .lede { max-width: 60ch; }
.tool { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); margin: 0 0 var(--s7); }
.tool label { display: block; font-size: 0.9375rem; font-weight: 700; margin: var(--s4) 0 6px; }
.tool label:first-child { margin-top: 0; }
.tool input[type=text], .tool input[type=number], .tool select, .tool textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; font-size: 1rem;
  color: var(--ink); background: var(--chalk); border: 1.5px solid var(--line); border-radius: var(--radius-s);
}
.tool input:focus, .tool select:focus, .tool textarea:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.tool .hint { font-size: var(--t-small); color: var(--muted); margin: 4px 0 0; }
.results { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.results .row { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.results .row b { font-variant-numeric: tabular-nums; }
.results .row.total { font-size: 1.1875rem; padding-top: var(--s4); border-bottom: 0; }
.checks { margin-top: var(--s5); }
.check { display: flex; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.check .mark { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700; color: #fff; }
.check .mark.pass { background: #1D7A74; }
.check .mark.warn { background: #8A5F0A; }
.check .mark.fail { background: #B33A27; }
.check .text b { display: block; }
.check .text span { color: var(--muted); font-size: var(--t-small); }
.count { font-size: 0.8125rem; color: var(--muted); text-align: right; margin: 6px 0 0; font-variant-numeric: tabular-nums; }

/* Text after the tool keeps a reading measure; the tool itself is sized to its inputs. */
main.tool-page > h2 { margin: var(--s7) 0 var(--s3); }
main.tool-page > p, main.tool-page > ul, main.tool-page > ol, main.tool-page > h2, main.tool-page > .sources { max-width: 68ch; }
.tool { max-width: 760px; }
.tool.split { max-width: none; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s6); align-items: start; }
.tool.split .tool-in input { max-width: 240px; }
.tool.split .results { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 760px) {
  .tool.split { grid-template-columns: 1fr; gap: var(--s5); }
  .tool.split .tool-in input { max-width: none; }
  .tool.split .results { padding-top: var(--s5); border-top: 1px solid var(--line); }
}