/* Tool pages: UCR calculator, MCS-150 checker, authority startup costs, IFTA rates. Shared tokens,
   masthead, footer, .layout, .crumbs, .side, .panel, .card, .warn, .fee and the h1/h2/.lede type
   come from style.css. */

main.tool h1 { margin: 14px 0 0; }
main.tool .lede { margin: 12px 0 0; }
main.tool h2 + .card, main.tool h2 + .panel { margin-top: 0; }
main.tool .card { overflow-wrap: anywhere; }
main.tool .card table { overflow-wrap: normal; }
main.tool .card li + li { margin-top: 6px; }

/* calculator card: inputs on the left, result box on the right (stacks when narrow) */
.calc { margin-top: 22px; padding: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px;
  align-items: end; }
.calc .fields { display: grid; gap: 14px; }
.calc label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--body); }
.calc input { padding: 13px 14px; border: 2px solid var(--navy); font-size: 18px; }
.calc input:focus { outline: 3px solid rgba(63, 176, 127, 0.45); outline-offset: 1px; }
.calc select { padding: 12px 14px; font-size: 16px; }
.calc .row { display: flex; gap: 8px; flex-wrap: wrap; }
.calc .row input { flex: 1 1 220px; }
.calc .row button { padding: 0 22px; min-height: 52px; }
.calc .fields .note { margin: 0; }
.calc .out { background: var(--hover); border: 1px solid var(--rule); border-radius: 8px; padding: 18px 20px; min-height: 120px; }
.calc .out .k { font-size: 13px; color: var(--muted); font-weight: 500; }
.calc .out .fee { margin-top: 4px; }
.calc .out .msg { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* tables: full-bleed inside a .panel, matched bracket highlighted */
.panel table { margin-top: 0; }
.panel th:first-child, .panel td:first-child { padding-left: 16px; }
tr.on { background: #e3f3ea; }
tr.on td:last-child { font-weight: 600; color: var(--ink); }
.fnmark { font-size: 12px; white-space: nowrap; }

/* MCS-150 checker result */
#result:empty { display: none; }
#result .card h2 { font: 600 22px/1.3 var(--serif); margin: 0 0 10px; }
#result .card h2 .badge { font-family: "Work Sans", system-ui, sans-serif; vertical-align: 3px; }
#result .badge { white-space: nowrap; }

/* sidebar: related guide */
.side.related a { text-decoration: none; }
.side.related p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }