/* /tools calculators. Loads after pages.css via `css: tools`. */
.tl-tool { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.tl-tool .pg-form { align-content: start; }
.tl-tool .pg-field input { font-variant-numeric: tabular-nums; }
.tl-out { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 112px; }
.tl-out .pg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tl-out .pg-stat.main { grid-column: 1 / -1; background-color: var(--dark); color: var(--light); border-color: var(--dark); }
.tl-out .pg-stat-num { font-variant-numeric: tabular-nums; }
.tl-note { margin: 0; padding: 14px 18px; border-radius: var(--radius--xsmall); background-color: var(--bg); font-size: 15px; line-height: 1.45; }
.tl-note[hidden] { display: none; }
.tl-formula { font-family: var(--font--mono); font-size: 14px; line-height: 1.5; letter-spacing: 0; opacity: .75; margin: 0; }
@media screen and (max-width: 991px) { .tl-tool { grid-template-columns: minmax(0, 1fr); gap: 32px; } .tl-out { position: static; } }
@media screen and (max-width: 479px) { .tl-out .pg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tl-tool .pg-form { align-items: end; }