/* Calculator pages (/tools/*): the few rules site.css does not already carry. Loaded after /site.css by the tool pages
   (headless/edge/site/pages/tools.mjs). Tokens come from site.css. Mobile first; checked at 390px with no horizontal page scroll. */

.calc { display: grid; gap: 18px; }
.calc form { display: grid; gap: 16px; margin: 0; }
.calc-grid + .calc-grid { margin-top: 0; }

/* one outcome of an arbitrage: its own bordered group */
.leg { margin: 0; min-width: 0; padding: 16px 16px 18px; border: 1px solid var(--rule); border-radius: 18px; background: rgb(255 255 255 / .02); }
.leg legend { padding: 0 8px; font: 500 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }
.leg-grid { display: grid; gap: 14px 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .leg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .leg-grid { grid-template-columns: 1.1fr 1fr 1.2fr 1fr; } }

.field .seg { align-self: start; justify-self: start; max-width: 100%; }
.field .seg span { padding: 11px 16px; }
.input-group:has(input[aria-invalid="true"]) { box-shadow: inset 0 0 0 2px var(--loss); }
.input-group input::placeholder { color: var(--steel); font-weight: 400; }
.select option:disabled { color: var(--steel); }

.calc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.note-inline { margin: 0; font-size: 14px; color: var(--caution); }
form [data-load-error] { margin: 0; }

/* results */
.calc .result { margin-top: 0; display: grid; gap: 16px; }
.result > * { margin: 0; }
.result .result-label { margin: 0; }
.result .result-big { margin-top: 6px; }
.result .lead { margin-top: 10px; font-size: 15px; color: var(--frost-2); }
.result .result-grid { margin-top: 4px; }
.result-sub { margin: 4px 0 0; font: 600 16px/1.3 var(--sans); letter-spacing: -.01em; color: var(--frost); }
.result .table-wrap { background: transparent; }
.result table.data { min-width: 0; font-size: 14px; }
.result table.data th, .result table.data td { padding: 10px 12px; }
.result table.data thead th { font-size: 10.5px; letter-spacing: .08em; }
.result table.data tbody th[scope="row"] { white-space: normal; }
.result table.data td { vertical-align: top; }
.sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--mist); white-space: normal; }
.result-notes { display: grid; gap: 8px; padding-left: 1.2em; list-style: disc; font-size: 13.5px; line-height: 1.5; color: var(--mist); }
.result-notes li::marker { color: var(--steel); }
.prose .result-notes { max-width: none; }

@media (max-width: 480px) {
  .result table.data { font-size: 13px; }
  .result table.data th, .result table.data td { padding: 9px 8px; }
  .result-big { font-size: clamp(36px, 12vw, 48px); }
}

/* formulas */
.prose pre { max-width: 100%; font-size: 13.5px; line-height: 1.6; }
.prose pre code { white-space: pre; background: none; }
.prose sub { font-size: .75em; line-height: 0; }