/* Uses AppVault guide tokens; a single document scroll owner. */
.tool { padding: 24px; background: #fffaf0; margin-block: 24px; border: 1px solid #d8cebc; border-radius: 8px; }
.tool label { display: block; margin-block: 16px 8px; }
.tool input, .tool select, .tool button { font: inherit; width: 100%; min-height: 44px; padding: 8px; border: 1px solid var(--muted); border-radius: 4px; background: var(--paper); color: var(--ink); }
.tool button { background: var(--night); color: var(--paper); margin-block: 24px 8px; cursor: pointer; }
.tool :focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.result { font-weight: 600; margin-top: 24px; }
.table-scroll { max-width: 100%; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 16px; margin-block: 16px; }
caption { text-align: left; font-weight: 600; margin-bottom: 16px; }
th, td { padding: 8px; text-align: left; border-bottom: 1px solid #d8cebc; vertical-align: top; }
thead { background: #fffaf0; }
code { overflow-wrap: anywhere; font-size: 16px; }
.metric { font-size: 28px; line-height: 1.3; margin-block: 24px; }
.range { color: var(--muted); }
@media (max-width: 680px) { .tool { padding: 16px; } h1 { font-size: 32px; } }