/* The free tool pages (/tools, /tools/<tool>, /compare/<app>; generated by tools/blog/build.mjs from
   lib/render-tools.mjs). Builds on blog.css; the try box and the sample sheet are the home page's own (home.css,
   inside a .home wrapper), set here on the quiet tint as /hymns/identify's recorder is. */
.tool-page .tool-try { max-width: var(--measure); margin: 0 auto 28px; padding: clamp(18px, 4vw, 28px); border: 1px solid var(--tint-line); border-radius: 12px; background: var(--tint); font-family: var(--sans); }
.tool-page .tool-try .try-box { margin-top: 0; max-width: none; }
.tool-page .tool-sample { max-width: var(--measure); margin: 0 auto 34px; }

/* Lists of pages: the name, then what it does in a quieter line. */
.tool-page .tool-links { list-style: none; margin: 0 0 1.15em; padding: 0; border-top: 1px solid var(--rule); font-family: var(--sans); }
.tool-page .post-body .tool-links li { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.5; }
.tool-page .tool-links a { font-weight: 650; }
.tool-page .tool-links span { display: block; color: var(--muted); font-size: 15px; }
.tool-page .tool-links-big a { font-size: 18px; }

/* The worship page's hymns: two columns from a tablet up, each with its doh. */
.tool-page .post-body .tool-hymns { list-style: none; margin: 0 0 1.15em; padding: 0; font-family: var(--sans); font-size: 16px; }
.tool-page .post-body .tool-hymns li { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--rule); break-inside: avoid; }
.tool-page .tool-hymns span { color: var(--muted); font-size: 14px; white-space: nowrap; }
@media (min-width: 600px) { .tool-page .post-body .tool-hymns { columns: 2; column-gap: 32px; } }

/* A comparison: three columns that wrap to fit a phone, every column in view; a narrow phone scrolls the table, never the page. */
.tool-page .tool-table { overflow-x: auto; margin: 0 0 1em; }
.tool-page .post-body .tool-table table { table-layout: fixed; min-width: 300px; font-size: 14px; }
.tool-page .post-body .tool-table th, .tool-page .post-body .tool-table td { padding: 9px 8px 9px 0; overflow-wrap: anywhere; }
.tool-page .post-body .tool-table th[scope="row"] { width: 30%; font-weight: 600; }
@media (min-width: 600px) { .tool-page .post-body .tool-table table { font-size: 15px; } .tool-page .post-body .tool-table th, .tool-page .post-body .tool-table td { padding: 9px 10px; } }
.tool-page .post-body .tool-source { margin-top: 0; color: var(--muted); font-family: var(--sans); font-size: 14px; line-height: 1.55; }