/* Bank statement tool: the check, the preview ledger and the second download button */
.st-out { margin-top: 18px; }
.st-count { margin: 0; font-weight: 700; font-size: 19px; }
.st-check { margin: 10px 0 0; padding: 10px 14px; border-left: 4px solid var(--rule); background: var(--desk); border-radius: 0 3px 3px 0; }
.st-check.ok { border-left-color: var(--ok); }
.st-check.ok::first-letter { color: var(--ok); font-weight: 800; }
.st-check.warn { border-left-color: var(--err); }
.st-check.warn::first-letter { color: var(--err); font-weight: 800; }
.st-out .options { margin-top: 14px; }
.options label.st-ask { padding: 4px 8px; margin: -4px -8px; border-radius: 3px; outline: 2px dashed var(--accent); outline-offset: -2px; }
.st-hint { margin: 14px 0 0; color: var(--pencil); font-size: 15px; }

/* The preview: ruled like a ledger, scrolls inside its own box so the page never does */
.st-wrap { margin-top: 10px; max-width: 100%; max-height: 70vh; overflow: auto; border: 1px solid var(--rule); border-radius: 3px;
  background: var(--sheet); }
.st-table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
.st-table th, .st-table td { padding: 5px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.st-table thead th { position: sticky; top: 0; z-index: 1; background: var(--sheet); box-shadow: 0 1px 0 var(--ink);
  vertical-align: bottom; padding-top: 8px; padding-bottom: 8px; }
.st-table select { min-height: 36px; padding: 2px 4px; font-size: 14px; font-weight: 700; max-width: 8.5em; }
.st-src { display: block; font-size: 13px; color: var(--pencil); font-weight: 400; margin-bottom: 3px; white-space: nowrap; }
.st-table td.date, .st-table td.num { white-space: nowrap; }
.st-table td.num { text-align: right; }
.st-table td.neg { color: var(--err); }
.st-table td.desc { min-width: 10em; }
.st-table td.date.off { opacity: 1; }
.st-table td.off { color: var(--pencil); opacity: .6; }
.st-table td.bad { color: var(--err); text-decoration: underline wavy; text-underline-offset: 3px; }
.st-table tr.warn td { background: color-mix(in srgb, var(--err) 12%, transparent); }
.st-table tbody tr:nth-child(even):not(.warn) td { background: color-mix(in srgb, var(--desk) 55%, transparent); }
.st-table tr.st-acc th { padding: 10px 6px 6px; background: var(--desk); font-weight: 700; border-bottom: 1px solid var(--ink); }
.st-more { margin: 8px 0 0; color: var(--pencil); font-size: 15px; }
.st-more:empty { display: none; }

.btn.btn-alt { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.btn.btn-alt:disabled { background: transparent; color: var(--pencil); box-shadow: inset 0 0 0 2px var(--rule); }
@media (max-width: 480px) { .actions .btn { flex: 1 1 100%; } }