/* Tables: the list (DataTable, PLAN 3.10) with its toolbar, filter bar and
   chips, selection bar, totals and pager; and the calculation and entry
   tables that are laid out as tables.

   In the `components` layer (tokens.css), like components.css and forms.css:
   a utility on a cell (`.right`, `.nowrap`, `.muted`) beats the table's own
   rule, legacy.css can restyle an old table's rows (tr.row-bad), and a
   screen family's unlayered rule still beats all of it. */

@layer components {

/* ── table ─────────────────────────────────────────────────────────── */

.tbl-wrap { overflow-x: auto; }
/* `table.table` is the same table under an older name (fx rates). */
table.tbl, table.table { width: 100%; border-collapse: collapse; font-size: var(--fs-cell); }
table.tbl th, table.tbl td,
table.table th, table.table td { padding: var(--s-1h) var(--cell-px); text-align: start; border-bottom: 1px solid var(--border); }
/* The rule above (0,1,2) outranked a bare .num (0,1,0), so every figure in
   every table was left-aligned and totals did not line up with their column.
   A numeric header is right-aligned too, but in the header face, not mono.
   Figures, codes and dates never wrap: "1,040,000.00" broken over two lines
   reads as two numbers. */
table.tbl th.num, table.tbl td.num,
table.table th.num, table.table td.num,
table.tbl td.right, table.table td.right { text-align: end; }
table.tbl th.num, table.table th.num { font-family: inherit; }
/* Amounts in the UI face with tabular figures (PLAN 3.3): mono amounts read
   as code and run wider, and tabular figures already line the digits up. */
table.tbl td.num, table.tbl tfoot td.num { font-family: inherit; font-variant-numeric: tabular-nums lining-nums; }
table.tbl td.num, table.tbl td.mono, table.tbl td.date, table.tbl td.nowrap,
table.table td.num, table.table td.mono, table.table td.date { white-space: nowrap; }
table.tbl thead th, table.table thead th {
  background: var(--surface-2); font-size: var(--fs-xs); font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
table.tbl thead th.sortable { cursor: pointer; user-select: none; }
table.tbl thead th.sortable:hover { color: var(--text); }
table.tbl thead th .arrow { opacity: .45; margin-inline-start: 3px; font-size: 9px; }
/* In the list's sort button the flex gap spaces the arrow; with no arrow
   there is no space for one either. A header's width is often its column's
   least width, and on a list of ten columns the empty arrows' gaps were 70px
   the figures needed. The arrow of the sorted column sits in the cell's end
   padding, so sorting by a column does not widen it. */
table.tbl.dt-table thead th .dt-sort .arrow { margin-inline-start: 0; margin-inline-end: -8px; }
table.tbl.dt-table thead th .dt-sort .arrow:empty { display: none; }
table.tbl thead th.sorted .arrow { opacity: 1; color: var(--accent); }
table.tbl tbody tr:hover, table.table tbody tr:hover { background: var(--row-hover); }
table.tbl tbody tr.clickable { cursor: pointer; }
table.tbl tbody tr:last-child td, table.table tbody tr:last-child td { border-bottom: none; }
table.tbl tfoot td { font-weight: 600; background: var(--surface-2); border-top: 2px solid var(--border-strong); }
.tbl-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px;
  border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-muted);
}
.tbl-foot .spacer { flex: 1; }
.tbl-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.tbl-toolbar .search { flex: 1; max-width: 320px; }
.tbl-toolbar .spacer { flex: 1; }

/* ── DataTable v2 ──────────────────────────────────────────────────── */

/* Density is the user's (html[data-density], PLAN 3.4); a table can be set
   tighter or looser on its own from its settings, which redefines the same
   tokens for that table only. */
.dt { position: relative; }
.dt[data-density="compact"]     { --row-h: 28px; --cell-px: 8px;  --fs-cell: 12px; }
.dt[data-density="comfortable"] { --row-h: 40px; --cell-px: 14px; --fs-cell: 13px; }

.dt-toolbar { flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.dt-toolbar .search { flex: 0 1 260px; min-width: 180px; }
.dt-toolbar > .btn, .dt-toolbar > a.btn { flex: none; }
.dt-settings { width: 30px; justify-content: center; padding: 0; }
.dt-settings .ico { margin: 0; }
.dt-export, .dt-saved-btn { gap: 5px; }
.dt-count-sel { color: var(--accent); font-weight: 600; }

.dt-scroll { position: relative; }
/* The list scrolls inside the card, so its header stays in view on a long
   page and its first column stays in view on a wide one - both need the
   same scrolling box, and a page-level scroll cannot give the second. The
   wheel carries on to the page at the list's end (no overscroll-behavior):
   the totals and the pager under it must be reachable without knowing to
   move the pointer off the table first. */
.dt-wrap { overflow: auto; max-height: max(320px, calc(100vh - 230px)); }
.dt-wrap:focus-visible { outline: none; box-shadow: var(--focus); }

.dt-table { font-size: var(--fs-cell); }
table.tbl.dt-table th, table.tbl.dt-table td {
  height: var(--row-h); padding-block: 0; padding-inline: var(--cell-px); vertical-align: middle;
}
table.tbl.dt-table thead th { height: 34px; z-index: var(--z-sticky); box-shadow: inset 0 -1px 0 var(--border-strong); border-bottom: 0; }
/* A header of several words may take two lines when the list is short of
   width ("Owed at / handover"): a header held to one line set the column's
   least width, and ten of them pushed Status off the card at 1280 px. With
   room to spare the table lays every header out on one line anyway. */
table.tbl.dt-table thead th { white-space: normal; line-height: 1.2; }
table.tbl.dt-table thead th[aria-sort] { padding-inline: 0; }
/* The sort control is a real button (PLAN 3.15): reachable by Tab, named by
   its label, with aria-sort on the header saying which way. */
.dt-sort {
  display: flex; align-items: center; gap: 2px; width: 100%; min-height: 34px; padding-inline: var(--cell-px);
  border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
  text-align: inherit; cursor: pointer;
}
th.num .dt-sort { justify-content: flex-end; }
.dt-sort:hover { color: var(--text); }
.dt-th-print { display: none; }
.dt-sort:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); border-radius: var(--r-sm); }
table.tbl.dt-table tbody td { background: var(--surface); }
table.tbl.dt-table tbody tr:hover > td { background: var(--row-hover); }
table.tbl.dt-table tbody tr.selected > td { background: var(--row-selected); }
table.tbl.dt-table tbody tr:focus-within > td { background: var(--row-hover); }
table.tbl.dt-table tbody tr.dt-state > td { height: auto; background: var(--surface); cursor: default; }

/* The first cell of a clickable row is the row's link: it opens in a new
   tab with a middle click, and Tab reaches it. It reads as text until the
   row is hovered, so a column of links does not shout. */
.dt-link { color: inherit; text-decoration: none; }
.dt-link:hover, tr.clickable:hover .dt-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.dt-link:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }

/* Frozen first column (and the checkbox column before it). */
.dt-table .dt-sticky { position: sticky; inset-inline-start: 0; z-index: 1; }
/* Above the header cells that scroll under it: `table.tbl.dt-table thead th`
   gives every header cell the same z-index, so this has to out-rank it. */
table.tbl.dt-table thead th.dt-sticky { z-index: calc(var(--z-sticky) + 1); }
.dt-table .dt-sticky-2 { inset-inline-start: 36px; }
.dt-table thead .dt-sticky { background: var(--surface-2); }
.dt-table tfoot .dt-sticky { background: var(--surface-2); }
.dt-scrolled-x .dt-table .dt-sticky-last {
  box-shadow: 6px 0 6px -6px color-mix(in srgb, var(--text) 35%, transparent);
}
/* More columns to the right: a soft edge says so. */
.dt-edge {
  position: absolute; inset-block: 0; inset-inline-end: 0; width: 18px; pointer-events: none; opacity: 0;
  background: linear-gradient(to left, color-mix(in srgb, var(--text) 14%, transparent), transparent);
  transition: opacity var(--dur-fast) var(--ease);
}
.dt-edge.on { opacity: 1; }

.dt-select { width: 36px; min-width: 36px; text-align: center; }
table.tbl.dt-table th.dt-select, table.tbl.dt-table td.dt-select { padding-inline: 0; text-align: center; }
.dt-select input { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--accent); cursor: pointer; }

/* Figures, dates, codes and statuses never wrap (their types add .nowrap);
   other text wraps, so a list with many text columns still fits its card.
   A name (type 'party') stays on one line, cut with an ellipsis and shown
   whole in its tooltip. max-width on a cell does not narrow its column; so
   the name's box is size-contained (its text does not widen the column at
   all) and the column's own width, 280px, and min-width, 180px, set how
   wide it is: 280 when there is room, down to 180 when there is not. */
table.tbl.dt-table td.dt-trunc { white-space: nowrap; }
.dt-cut { contain: inline-size; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.tbl.dt-table td.dt-wrap-cell { white-space: normal; min-width: 200px; }
.dt-actions-h, .dt-actions { text-align: end; }
table.tbl.dt-table th.dt-actions-h { text-align: end; }
.dt-row-actions { display: inline-flex; gap: 4px; align-items: center; justify-content: flex-end; }
.dt-more { width: 26px; padding: 0; justify-content: center; }
.btn-danger-ghost { color: var(--danger); }

/* Totals over the whole filtered set. */
.dt-totals td { white-space: nowrap; }
.dt-total-label { text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: .04em; color: var(--text-muted); }
/* One line per currency, the label cell's lines level with the figures'. */
.dt-multi > div { line-height: 18px; white-space: nowrap; }
.dt-multi > div + div { margin-top: 2px; }
table.tbl.dt-table tfoot td { height: auto; padding-block: 8px; vertical-align: top; }
/* The totals stay in view at the foot of the scrolling list, as the header
   does at its top: a total that is only seen after scrolling fifty rows is
   one nobody compares against. */
.dt-table tfoot td { position: sticky; bottom: 0; z-index: var(--z-sticky); }
.dt-table tfoot td.dt-sticky { z-index: calc(var(--z-sticky) + 1); }

/* Loading again over rows already shown: they stay, dimmed, rather than
   flashing to skeletons on every sort. */
.dt-busy tbody { opacity: .55; transition: opacity var(--dur-fast) var(--ease); }

/* Views: tabs over the table. */
.dt-views { display: flex; gap: 2px; padding-inline: 8px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.dt-view {
  flex: none; height: 38px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--text-muted); font: inherit; font-weight: 500; cursor: pointer; margin-bottom: -1px;
}
.dt-view:hover { color: var(--text); }
.dt-view[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.dt-view.saved::before { content: '☆ '; color: var(--text-muted); }
.dt-view.changed::after { content: ' ·'; color: var(--accent); font-weight: 700; }
.dt-view:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); border-radius: var(--r-sm); }

/* The selection bar: what is ticked, and what can be done to all of it. */
.dt-bulk {
  position: sticky; top: var(--header-h); z-index: calc(var(--z-sticky) + 2);
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px;
  background: var(--accent-subtle); border-bottom: 1px solid var(--accent-border);
}
.dt-bulk .spacer { flex: 1; }
.dt-bulk-count { font-weight: 600; color: var(--text); }

/* Pager. */
.dt-pager .dt-count { font-variant-numeric: tabular-nums; }
.dt-pages { display: inline-flex; align-items: center; gap: 2px; }
.dt-page-of { display: inline-flex; align-items: center; gap: 6px; margin-inline: 6px; white-space: nowrap; }
/* Two classes: forms.css comes later and gives every .input and .select the
   full width of its container. */
.dt-pager .dt-page { width: 52px; height: 26px; text-align: center; padding: 0 4px; }
.dt-pager .dt-size { width: auto; height: 26px; font-size: var(--fs-sm); }
.dt-nav { min-width: 26px; }

/* Columns and density: a small panel under its button. */
.dt-pop {
  position: absolute; z-index: var(--z-popover); min-width: 230px; max-width: min(320px, calc(100% - 16px));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); padding: 10px 12px;
}
.dt-pop-body { display: flex; flex-direction: column; gap: 6px; }
.dt-pop-title { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-top: 4px; }
.dt-pop-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; }
.dt-check { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 2px 4px; border-radius: var(--r-sm); cursor: pointer; }
.dt-check:hover { background: var(--surface-2); }
.dt-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.dt-pop-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px; }
.dt-seg { display: flex; border: 1px solid var(--border-input); border-radius: var(--r-md); overflow: hidden; }
.dt-seg-opt { flex: 1; position: relative; }
.dt-seg-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dt-seg-opt span {
  display: block; text-align: center; padding: 5px 6px; font-size: var(--fs-sm); color: var(--text-muted);
}
.dt-seg-opt + .dt-seg-opt span { border-inline-start: 1px solid var(--border-input); }
.dt-seg-opt input:checked + span { background: var(--accent-subtle); color: var(--accent); font-weight: 600; }
.dt-seg-opt input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--accent); }

/* Small tables side by side, as many as fit. */
.dt-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; align-items: start; }

/* For screen readers only (the table caption, the "n rows" announcement). */
.dt-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── the filter bar (components/filterbar.js) ─────────────────────── */

.fb { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* In a DataTable the bar's fields are the toolbar's own items: search,
   filters, More filters and Views wrap as one row, with Export and the
   settings pushed to its end, and the extra fields as a last full row. */
.dt-toolbar .fb, .dt-toolbar .fb-row { display: contents; }
.dt-toolbar .fb-more { order: 10; flex: 1 1 100%; }
.fb-all-label { display: none; }
.fb-more-phone { display: none; }
.fb-chip.fb-chip-phone, .fb-chips.fb-chips-phone { display: none; }
.fb-row, .fb-more { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.fb-more { padding-top: 8px; border-top: 1px dashed var(--border); }
.fb-field { display: flex; flex-direction: column; gap: 3px; min-width: 140px; }
.fb-field-status { min-width: 0; }
.fb-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); letter-spacing: .02em; }
.fb-field .select { min-width: 140px; width: auto; }
.fb-field .dp-range { gap: 0; }
.fb-field .dp-range .row { gap: 4px; flex-wrap: nowrap; }
.fb-field .dp-range .dp { width: 132px; flex: none; }
.fb-field .dp-range .dp-field { min-width: 0; }
.fb-field .dp-range .dp-status { display: none; }
.fb-field .combo { width: 200px; }
.fb-range { display: flex; align-items: center; gap: 4px; }
.fb .fb-num { width: 96px; text-align: end; font-variant-numeric: tabular-nums; }
.fb-more-btn { height: var(--control-h); gap: 5px; }
.fb-more-count:not(:empty) {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--accent-solid); color: var(--accent-fg); font-size: 11px; font-weight: 600;
}

/* Status as toggles: pressed reads as pressed by its border, weight and tick
   as well as its colour. */
.fb-toggles { display: flex; flex-wrap: wrap; gap: 4px; }
.fb-toggle {
  height: var(--control-h); padding: 0 10px; border: 1px solid var(--border-input);
  border-radius: var(--r-pill); background: var(--surface); color: var(--text-muted);
  font: inherit; font-size: var(--fs-sm); cursor: pointer; white-space: nowrap;
}
.fb-toggle:hover { color: var(--text); border-color: var(--text-muted); }
.fb-toggle[aria-pressed="true"] {
  background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); font-weight: 600;
}
.fb-toggle[aria-pressed="true"]::before { content: '✓ '; }
.fb-toggle:focus-visible, .fb-multi:focus-visible { outline: none; box-shadow: var(--focus); }

.fb-multi-wrap { position: relative; }
.fb-multi { display: flex; align-items: center; text-align: start; cursor: pointer; min-width: 150px; }
.fb-multi-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-pop {
  position: absolute; z-index: var(--z-dropdown); top: calc(100% + 4px); inset-inline-start: 0; min-width: 100%;
  max-height: 280px; overflow-y: auto; padding: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}
.fb-check { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 2px 8px; border-radius: var(--r-sm); cursor: pointer; white-space: nowrap; }
.fb-check:hover { background: var(--surface-2); }
.fb-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }

/* Active filters as chips; "Clear all" at the end. */
.fb-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dt-chips { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.fb-chip {
  display: inline-flex; align-items: center; gap: 2px; height: 26px; padding-inline: 10px 2px;
  border: 1px solid var(--accent-border); border-radius: var(--r-pill);
  background: var(--accent-subtle); color: var(--text); font-size: var(--fs-sm); max-width: 100%;
}
.fb-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-chip-key { color: var(--text-muted); }
.fb-chip-x {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 999px;
  background: none; color: var(--text-muted); cursor: pointer; flex: none;
}
.fb-chip-x:hover { background: var(--surface); color: var(--text); }
.fb-chip-x:focus-visible { outline: none; box-shadow: var(--focus); }
.fb-chip-x .ico { width: 12px; height: 12px; }

/* ── contracting: the certificate is arithmetic, so it is laid out as one ── */
table.tbl.tbl-calc td:first-child { color: var(--text-2); }
table.tbl.tbl-calc tr.row-total td { border-top: 2px solid var(--border-2); font-size: 14px; }

/* ── the manual journal: analysis is asked for per line, per account ────── */
table.tbl.tbl-entry td { vertical-align: top; }

@media (max-width: 860px) {
  /* The fx-rates table is the old `table.table`, mounted straight in the
     page with no .tbl-wrap around it, so on a phone its wide rows pushed
     the whole page sideways. Here it scrolls inside itself instead. */
  .content table.table { display: block; overflow-x: auto; }
}

/* Bigger targets on a touch screen (PLAN 3.15): the row's tick box, a
   chip's x and the pager. */
@media (pointer: coarse) {
  .dt-select input { width: 24px; height: 24px; }
  table.tbl.dt-table th.dt-select, table.tbl.dt-table td.dt-select { width: 44px; min-width: 44px; }
  .dt-table .dt-sticky-2 { inset-inline-start: 44px; }
  .fb-chip-x { width: 32px; height: 32px; }
  .dt-pager .btn, .dt-pager .dt-page, .dt-pager .dt-size { min-height: 40px; }
}

@media (max-width: 600px) {
  .dt-wrap { max-height: none; }
  .dt-toolbar .search { flex: 1 1 100%; max-width: none; }
  .dt-toolbar > .spacer, .dt-settings { display: none; }
  .fb-field, .fb-field .combo { flex: 1 1 100%; width: auto; }
  /* Filters fold behind one button; the chips say what is on. */
  .fb:not(.fb-open) .fb-row > .fb-field { display: none; }
  .fb-more-phone { display: inline-flex; }
  .fb-more-label { display: none; }
  .fb-all-label { display: inline; }
  .fb-more-count[data-all]:not([data-all=""])::before { content: attr(data-all); }
  .fb-more-count[data-all]:not([data-all=""]) { font-size: 0; }
  .fb-more-count[data-all]:not([data-all=""])::before { font-size: 11px; }
  .fb-more-count[data-all]:not([data-all=""]) {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--accent-solid); color: var(--accent-fg);
  }
  .fb-chip.fb-chip-phone { display: inline-flex; }
  .fb-chips.fb-chips-phone:not([hidden]) { display: flex; }
  .fb-field .dp-range .dp { width: auto; flex: 1; }
  .dt-pages .dt-nav:first-child, .dt-pages .dt-nav:last-child { display: none; }
  .dt-size { display: none; }

  /* Card mode (mobile: 'cards'): a row is a card of label: value lines. */
  .dt[data-mobile="cards"] table.dt-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dt[data-mobile="cards"] table.dt-table,
  .dt[data-mobile="cards"] table.dt-table tbody,
  .dt[data-mobile="cards"] table.dt-table tfoot,
  .dt[data-mobile="cards"] table.dt-table tr { display: block; }
  .dt[data-mobile="cards"] table.dt-table tr { padding: 8px 12px; border-bottom: 1px solid var(--border); }
  .dt[data-mobile="cards"] table.tbl.dt-table td {
    display: flex; justify-content: space-between; gap: 12px; height: auto; min-height: 24px; padding: 2px 0;
    border: 0; text-align: end; position: static; background: none;
  }
  .dt[data-mobile="cards"] table.tbl.dt-table td::before {
    content: attr(data-label); color: var(--text-muted); font-size: var(--fs-sm); text-align: start;
  }
  .dt[data-mobile="cards"] table.tbl.dt-table td:first-child { font-weight: 600; }
  .dt[data-mobile="cards"] table.tbl.dt-table td.dt-select::before { content: ''; }
  /* A card line is a flex row: a contained box would be sized to nothing. */
  .dt[data-mobile="cards"] .dt-cut { contain: none; min-width: 0; }
}

@media print {
  /* !important: fit() sets the box's height inline for the screen, and an
     inline style beats any rule without it - the printed list was cut to
     one screen's height, with the sticky totals drawn over a row. */
  .dt-wrap { max-height: none !important; overflow: visible !important; }
  .dt-toolbar, .dt-views, .dt-bulk, .dt-pager .dt-pages, .dt-pager .dt-size, .dt-chips .fb-chip-x, .fb-clear, .dt-edge { display: none !important; }
  table.tbl.dt-table thead th { position: static; }
  table.tbl.dt-table thead th[aria-sort] { padding-inline: var(--cell-px); }
  .dt-sort { display: none; }
  .dt-th-print { display: inline; }
  .dt-table .dt-sticky, .dt-table tfoot td { position: static; }
  /* The total is the whole list's, so it prints once, at the end - not at
     the foot of every page, where it would read as that page's subtotal. */
  .dt-table tfoot { display: table-row-group; }
  /* A4 is narrower than a screen: names may wrap on paper; figures, dates
     and codes still do not. */
  table.tbl.dt-table td.dt-trunc { white-space: normal; }
  .dt-cut { contain: none; white-space: normal; overflow: visible; }
}

} /* @layer components */