/* The three UK business calculators in the Desk: VAT, THRESHOLD and UNITS.

   Their panels, figures, tables and fields come from tool.css's ws- kit and
   their tabs and tick boxes from files.css. What is here is only what those
   do not have: money that lines up in its column, a working that keeps its
   columns rather than wrapping, and the rolling total drawn against the
   threshold as a bar in its row. */

.vt-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vt-figs .ws-fig > strong { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.vt-table td, .vt-table th, .vt-src td { font-variant-numeric: tabular-nums; }
.vt-cap { font: 600 var(--text-sm) var(--font-sans); color: var(--ink); margin: 22px 0 6px; }
.vt-dim { color: var(--ink-soft); font-family: var(--font-sans); }
textarea.vt-lines { min-height: 160px; }
pre.vt-report { white-space: pre; word-break: normal; overflow-x: auto; }
/* A result that could not be worked out leaves no empty box behind. */
pre.vt-report:empty { display: none; }
.vt-src td:first-child { min-width: 16ch; }
.vt-methods tbody th[scope="row"] { min-width: 18ch; }
.status-line.is-bad { color: var(--danger); }

/* THRESHOLD: the rolling total as a share of the threshold, a bar under
   the figure. It stops at the threshold; a row over it is marked by the
   rule down its left edge (ws-table's is-off) and in words. */
.th-bar { display: block; height: 4px; margin-top: 5px; background: var(--paper-inset); overflow: hidden; min-width: 80px; }
.th-bar > i { display: block; height: 100%; background: var(--accent-strong); }
.th-bar.is-over > i { background: var(--danger); }

/* UNITS: two pasted lists side by side, the people and the time. */
.tu-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 0 18px; }
.tu-cols textarea.ws-area { min-height: 200px; }
.tu-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tu-opts { margin-top: 16px; }
.tu-figs .ws-fig > strong { font-variant-numeric: tabular-nums; }

@media (max-width: 820px) { .tu-figs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {
  .vt-figs { grid-template-columns: 1fr; }
  .tu-cols { grid-template-columns: 1fr; }
  /* On a phone the month's own turnover is in the box above and the
     threshold in the sentence, so their columns give way to the rolling
     total and how near it is. */
  .th-thr { display: none; }
  .ws-table.vt-table thead th { white-space: normal; }
  .ws-table.vt-table th, .ws-table.vt-table td { padding: 8px 6px; }
  /* UNITS on a phone: counts of entries, time and units are in the table of
     entries, so the money columns keep the width. */
  .tu-x { display: none; }
  /* The sources read as a list on a phone: figure, value, source. */
  .vt-src thead { display: none; }
  .vt-src tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .vt-src td { display: block; border: 0; padding: 1px 0; }
  .vt-src td:first-child { font-weight: 600; color: var(--ink); }
}