/* The cheque desk: bank profile, the print queue, and the register of
   printed cheques. One stylesheet for the three pages so a cheque looks
   the same wherever it is shown. */

/* --------------------------------------------------------- page header */
.pv-head { background: linear-gradient(180deg, #f7faff, #fff);
  border: 1px solid var(--p-line, #e8edf3); border-radius: 16px;
  padding: 16px 20px; margin-bottom: 14px; }
.pv-head-in { display: flex; align-items: flex-start; gap: 16px;
  justify-content: space-between; flex-wrap: wrap; }
.pv-title { font-size: 21px; font-weight: 800; letter-spacing: -.4px; }
.pv-sub { font-size: 12.6px; color: var(--p-muted, #64748b); margin-top: 3px; }
.pv-head-a { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.pv-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.pv-tabs button { border: 1px solid var(--p-line, #e8edf3); background: #fff;
  border-radius: 999px; padding: 7px 15px; font: inherit; font-size: 12.8px;
  font-weight: 600; cursor: pointer; color: #46536b; }
.pv-tabs button:hover { border-color: #a9c3ec; }
.pv-tabs button.on { background: #111827; border-color: #111827; color: #fff; }
.pv-tabs .n { display: inline-block; margin-inline-start: 6px; font-size: 11px;
  opacity: .7; }

.pv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
  gap: 14px; align-items: start; }
@media (max-width: 1100px) { .pv-grid { grid-template-columns: 1fr; } }

.sec { background: #fff; border: 1px solid var(--p-line, #e8edf3);
  border-radius: 14px; padding: 15px 17px; margin-bottom: 13px; }
.sec h3 { margin: 0 0 11px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .7px;
  color: var(--p-muted, #64748b); }
.kv { display: grid; grid-template-columns: 132px 1fr; gap: 7px 12px;
  font-size: 12.9px; }
.kv .k { color: var(--p-muted, #64748b); }
.kv .v { font-weight: 600; word-break: break-word; }
.mut { color: var(--p-muted, #64748b); }
.pcode { font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; background: #f4f6fa; border-radius: 6px; padding: 1px 6px; }

/* The register is a WIDE table — nine columns of dates, names and money.
   Squeezing it into the 1240px reading column the rest of the app uses
   left the room empty on both sides and stacked the cells (owner,
   2026-08-10), so the cheque pages take the screen they are given. */
.container.chq-wide { max-width: min(1720px, calc(100vw - 40px)); }

/* how much of a cheque one project took */
.shbar { height: 6px; border-radius: 99px; background: #eef2f7;
  overflow: hidden; margin-bottom: 3px; }
.shbar i { display: block; height: 100%; background: #2563eb; }

/* ---------------------------------------------------------- data table */
.ct { width: 100%; border-collapse: collapse; font-size: 12.7px; }
.ct th { text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--p-muted, #64748b); font-weight: 800;
  padding: 8px; border-bottom: 1px solid var(--p-line, #e8edf3);
  white-space: nowrap; }
.ct td { padding: 9px 8px; border-bottom: 1px solid #f1f4f9;
  vertical-align: top; }
.ct tr:hover td { background: #fbfdff; }
.ct .num { text-align: right; font-variant-numeric: tabular-nums; }
.ct .row-act { text-align: right; white-space: nowrap; }
/* a cheque row is a door: the whole line opens the cheque's own page */
.ct tr.chq-row { cursor: pointer; }

/* ------------------------------------------------------- cheque status */
.cst { display: inline-block; border-radius: 999px; padding: 3px 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .2px;
  border: 1px solid transparent; white-space: nowrap; }
.cst.PRINTED { background: #eff6ff; color: #1d4ed8; border-color: #c7dcfb; }
.cst.SIGNED { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.cst.DELIVERED { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.cst.CLEARED { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.cst.BOUNCED { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.cst.CANCELLED { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb;
  text-decoration: line-through; }
tr.gone td { opacity: .55; }

/* What THIS desk did with the paper, said apart from what the bank did with
   the money. Smaller and paler than a status pill on purpose: the row still
   answers "where does it stand" first, and the signature and the hand-over
   sit under that answer as two separate facts. */
.cu-tags { margin-top: 4px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 4px; }
.cst.cu-tag { font-size: 10.2px; font-weight: 700; padding: 1px 7px;
  letter-spacing: .1px; }
.cst.cu-tag.sign { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.cst.cu-tag.hand { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }

/* ----------------------------------------------------------- leaf grid */
.leaves { display: grid; gap: 6px; margin-top: 10px;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.leaf { border: 1px solid var(--p-line, #e8edf3); border-radius: 9px;
  padding: 7px 8px; font-size: 11.6px; text-align: center; background: #fff; }
.leaf b { display: block; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.4px; }
.leaf small { color: var(--p-muted, #64748b); font-size: 10px;
  text-transform: uppercase; letter-spacing: .4px; }
.leaf.BLANK { background: #fbfdff; }
.leaf.USED { background: #eff6ff; border-color: #c7dcfb; }
.leaf.SPOILED { background: #fff7ed; border-color: #fed7aa; }
.leaf.CANCELLED { background: #f3f4f6; border-color: #e5e7eb; opacity: .7; }

/* -------------------------------------------------------- book summary */
.books { display: grid; gap: 11px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.book { border: 1px solid var(--p-line, #e8edf3); border-radius: 13px;
  padding: 13px 14px; background: linear-gradient(180deg, #fbfdff, #fff); }
.book-h { display: flex; justify-content: space-between; gap: 8px;
  align-items: baseline; }
.book-n { font-weight: 800; font-size: 13.6px;
  font-family: ui-monospace, Menlo, Consolas, monospace; }
.book-b { margin-top: 9px; height: 7px; border-radius: 99px; background: #eef2f7;
  overflow: hidden; display: flex; }
.book-b i { display: block; height: 100%; }
.book-b .used { background: #2563eb; }
.book-b .spoiled { background: #f59e0b; }
.book-f { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 8px;
  font-size: 11.6px; color: var(--p-muted, #64748b); }
.book-f b { color: #111827; }

/* ------------------------------------------------------ the paper itself */
.paper-wrap { background: #eef2f7; border-radius: 14px; padding: 18px;
  overflow: auto; }
.paper { position: relative; background: #fff; margin: 0 auto;
  box-shadow: 0 8px 26px rgba(15, 23, 42, .16); border-radius: 4px; }
.paper .f { position: absolute; white-space: nowrap;
  font-family: "Courier New", ui-monospace, monospace; color: #101828; }
.paper .grid { position: absolute; inset: 0;
  background-image: linear-gradient(to right, rgba(37, 99, 235, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37, 99, 235, .07) 1px, transparent 1px);
  background-size: 10mm 10mm; pointer-events: none; }

/* --------------------------------------------------------- queue cards */
.q-card { border: 1px solid var(--p-line, #e8edf3); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 11px;
  background: linear-gradient(180deg, #fbfdff, #fff); }
.q-h { display: flex; justify-content: space-between; gap: 12px;
  align-items: flex-start; flex-wrap: wrap; }
.q-t { font-weight: 800; font-size: 14.6px; }
.q-amt { font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.q-facts { display: grid; gap: 8px; margin: 11px 0;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.q-facts > div { background: #fff; border: 1px solid var(--p-line, #e8edf3);
  border-radius: 10px; padding: 7px 10px; }
.q-facts span { display: block; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--p-muted, #64748b); }
.q-facts b { font-size: 12.8px; }
.q-a { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------- the print wizard */
.wz-steps { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 15px; }
.wz-step { display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--p-line, #e8edf3); border-radius: 999px;
  padding: 5px 13px 5px 6px; font-size: 12.2px; font-weight: 700;
  color: var(--p-muted, #64748b); background: #fff; }
.wz-step i { display: inline-grid; place-items: center; width: 20px;
  height: 20px; border-radius: 50%; background: #eef2f7; font-style: normal;
  font-size: 11px; font-weight: 800; }
.wz-step.on { border-color: #111827; color: #111827; }
.wz-step.on i { background: #111827; color: #fff; }
.wz-step.done { color: #047857; border-color: #a7f3d0; }
.wz-step.done i { background: #ecfdf5; color: #047857; }

.wz-books { display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.wz-book { display: grid; gap: 3px; border: 1px solid var(--p-line, #e8edf3);
  border-radius: 11px; padding: 10px 12px; cursor: pointer; background: #fff;
  font-size: 12.4px; }
.wz-book input { position: absolute; opacity: 0; pointer-events: none; }
.wz-book:hover { border-color: #a9c3ec; }
.wz-book.on { border-color: #111827; box-shadow: 0 0 0 1.5px #111827;
  background: #fbfdff; }
.wz-book .pcode { font-size: 12.6px; font-weight: 800; background: none;
  padding: 0; }

.wz-newbook { margin-top: 13px; border: 1px dashed #a9c3ec;
  border-radius: 13px; padding: 14px 16px; background: #fbfdff; }
.wz-done { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857;
  border-radius: 12px; padding: 11px 14px; font-size: 12.8px;
  margin-bottom: 13px; }

/* ------------------------------------------------------------- filters */
.tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 13px; }
.tools input, .tools select { border: 1px solid var(--p-line-strong, #d7dee8);
  border-radius: 9px; padding: 7px 10px; font: inherit; font-size: 12.7px; }

/* A yes-or-no filter that looks like one. Signed and released are either
   true of a cheque or they are not, and asking that in a three-line dropdown
   ("handed over or not / handed over / not handed over here") both read as a
   choice between three things and repeated, word for word, the date picker
   standing next to it. A ticked box also says at a glance that it is on,
   which a select showing its second option never quite does. */
.tools .chk { display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--p-line-strong, #d7dee8); border-radius: 9px;
  padding: 7px 11px; font-size: 12.7px; background: #fff; cursor: pointer;
  user-select: none; }
.tools .chk input { width: 15px; height: 15px; margin: 0; padding: 0;
  border-radius: 4px; accent-color: #2563eb; cursor: pointer; }
.tools .chk.on { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8;
  font-weight: 700; }
.tally { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.tally button { border: 1px solid var(--p-line, #e8edf3); background: #fff;
  border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12px;
  cursor: pointer; }
.tally button.on { background: #111827; border-color: #111827; color: #fff; }
.tally b { margin-inline-start: 5px; }

/* -------------------------------------------------------------- dialog */
.cdlg-back { position: fixed; inset: 0; background: rgba(15, 23, 42, .48);
  display: grid; place-items: center; z-index: 90; padding: 18px; }
.cdlg { background: #fff; border-radius: 16px; width: min(760px, 96vw);
  max-height: 92vh; overflow: auto; box-shadow: 0 24px 60px rgba(15, 23, 42, .3); }
.cdlg-h { padding: 15px 19px; border-bottom: 1px solid var(--p-line, #e8edf3);
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 800; font-size: 15px; }
.cdlg-b { padding: 17px 19px; }
.cdlg-f { padding: 13px 19px; border-top: 1px solid var(--p-line, #e8edf3);
  display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap; }
.cdlg .x { border: 0; background: transparent; font-size: 18px; cursor: pointer;
  color: var(--p-muted, #64748b); }
.frm { display: grid; gap: 11px; grid-template-columns: repeat(2, 1fr); }
.frm .wide { grid-column: 1 / -1; }
.frm label { display: block; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--p-muted, #64748b); margin-bottom: 4px; }
.frm input, .frm select, .frm textarea { width: 100%; box-sizing: border-box;
  border: 1px solid var(--p-line-strong, #d7dee8); border-radius: 9px;
  padding: 8px 10px; font: inherit; font-size: 13px; }
.frm .hint { font-size: 11.4px; color: var(--p-muted, #64748b); margin-top: 3px; }
.err-box { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
  border-radius: 10px; padding: 9px 11px; font-size: 12.5px;
  margin-bottom: 11px; }
@media (max-width: 620px) { .frm { grid-template-columns: 1fr; } }

/* ------------------------------------------- dividing a cheque by hand */
/* The remainder is the whole point of this screen: it is bigger than the
   table, it never leaves the top, and it turns green only when the lines
   add up to the cheque exactly. Save is disabled until then. */
.sp-head { display: flex; gap: 14px; align-items: flex-start;
  justify-content: space-between; margin-bottom: 12px; }
.sp-head .btn { flex: none; }
.sp-bar { display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap; border-radius: 12px; padding: 11px 14px;
  font-size: 13px; margin-bottom: 12px; border: 1px solid; }
.sp-bar.ok    { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.sp-bar.short { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.sp-bar.over  { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.sp-left { font-size: 13.5px; }
.sp-err { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
  border-radius: 10px; padding: 9px 11px; font-size: 12.5px;
  margin-bottom: 11px; }
.sp-table input, .sp-table select { width: 100%; box-sizing: border-box;
  border: 1px solid var(--p-line-strong, #d7dee8); border-radius: 8px;
  padding: 6px 8px; font: inherit; font-size: 12.5px; background: #fff; }
.sp-table input.num { text-align: right; font-variant-numeric: tabular-nums; }
.sp-table .sp-pick { width: 100%; text-align: start; font-size: 12.5px;
  padding: 6px 8px; white-space: normal; line-height: 1.35; }
.sp-table td { vertical-align: middle; }
.sp-table .btn { padding: 5px 8px; font-size: 11.5px; }
.sp-foot { display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  margin-top: 13px; }
.sp-note { flex: 1 1 260px; min-width: 200px; border-radius: 9px;
  border: 1px solid var(--p-line-strong, #d7dee8); padding: 7px 10px;
  font: inherit; font-size: 12.5px; }
.sp-hint { font-size: 11.6px; margin-top: 10px; max-width: 720px; }
.dvtag { background: #eef2ff; color: #3730a3; margin-inline-start: 6px; }

.sp-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .48);
  display: grid; place-items: center; z-index: 95; padding: 18px; }
.sp-modal-in { background: #fff; border-radius: 16px; width: min(620px, 96vw);
  max-height: 86vh; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .3); }
.sp-modal-h { padding: 15px 19px 6px; font-weight: 800; font-size: 15px; }
.sp-search { margin: 6px 19px 10px; border-radius: 9px; font: inherit;
  border: 1px solid var(--p-line-strong, #d7dee8); padding: 9px 11px; }
.sp-results { padding: 0 19px 8px; overflow: auto; display: grid; gap: 4px;
  font-size: 12.5px; }
.sp-hit { text-align: start; border: 1px solid transparent; background: #fff;
  border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 12.5px;
  cursor: pointer; line-height: 1.35; }
.sp-hit:hover { background: #f1f5f9; }
.sp-hit[disabled] { opacity: .4; cursor: not-allowed; }
.sp-modal-f { padding: 12px 19px; border-top: 1px solid var(--p-line, #e8edf3);
  display: flex; justify-content: flex-end; }

/* ---------------------------------------------------------------- cards
   What the desk is answering for, before any filter is typed. Four
   numbers, each with its money, and a fortnight of print runs drawn under
   the first so today can be read against a normal day rather than alone. */
.chq-cards { display: grid; gap: 12px; margin: 0 0 14px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.chq-card { position: relative; overflow: hidden; border-radius: 16px;
  padding: 14px 16px 13px; color: #fff; text-decoration: none;
  display: block; box-shadow: 0 8px 22px rgba(15, 23, 42, .13);
  transition: transform .13s ease, box-shadow .13s ease; }
.chq-card:hover { transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .2); }
.chq-card::after { content: ""; position: absolute; inset-inline-end: -34px;
  top: -34px; width: 116px; height: 116px; border-radius: 50%;
  background: rgba(255, 255, 255, .13); }
.chq-card .k { font-size: 10.6px; text-transform: uppercase;
  letter-spacing: .6px; font-weight: 800; opacity: .85; }
.chq-card .n { font-size: 27px; font-weight: 800; letter-spacing: -.7px;
  line-height: 1.16; margin-top: 3px; }
.chq-card .a { font-size: 12.4px; opacity: .93; font-variant-numeric:
  tabular-nums; }
.chq-card .s { font-size: 11px; opacity: .8; margin-top: 5px; }
.chq-c1 { background: linear-gradient(135deg, #1d4ed8, #4f46e5); }
.chq-c2 { background: linear-gradient(135deg, #0f766e, #059669); }
.chq-c3 { background: linear-gradient(135deg, #b45309, #d97706); }
.chq-c4 { background: linear-gradient(135deg, #6d28d9, #9333ea); }
/* the fortnight of print runs: bars, not a number, because the question
   it answers is "is today normal?" */
.chq-spark { display: flex; align-items: flex-end; gap: 3px; height: 30px;
  margin-top: 9px; position: relative; z-index: 1; }
.chq-spark i { flex: 1; background: rgba(255, 255, 255, .42);
  border-radius: 3px 3px 0 0; min-height: 2px; display: block; }
.chq-spark i.on { background: #fff; }

/* the one date range, and which of a cheque's four dates it asks about */
.chq-dates { margin-top: -6px; align-items: center; }
.chq-dates input[type="date"] { min-width: 138px; }
.chq-quick { display: inline-flex; gap: 5px; }
.chq-quick .btn { padding: 4px 11px; font-size: 12px; }
.chq-quick .btn.on { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }

/* ------------------------------------------------- custody on the profile
   Signing and handing over are recorded on the cheque itself, so the boxes
   that record them sit in the same column as everything else it says. */
.cu-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cu-grid { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; }
.cu-grid label { display: grid; gap: 4px; font-size: 11.6px; font-weight: 700;
  color: var(--p-mut, #64748b); }
.cu-grid label.wide { grid-column: 1 / -1; }
.cu-grid label { text-transform: uppercase; letter-spacing: .5px;
  font-size: 10.6px; font-weight: 800; }
.cu-grid input { border-radius: 11px; font: inherit; font-size: 13.4px;
  font-weight: 600; color: var(--p-ink, #0f172a); background: #fff;
  border: 1px solid var(--p-line-strong, #d7dee8); padding: 10px 12px;
  transition: border-color .14s ease, box-shadow .14s ease; }
.cu-grid input::placeholder { font-weight: 500; color: #a3adbb; }
.cu-grid input:hover { border-color: #b9c4d2; }
.cu-grid input:focus { outline: none; border-color: #2563eb;
  box-shadow: 0 0 0 3.5px rgba(37, 99, 235, .15); }

/* the day and the minute: tabular, roomy, and with the browser's own little
   calendar and clock brought forward instead of hidden away in grey */
.cu-grid input.cu-when { font-variant-numeric: tabular-nums;
  letter-spacing: .2px; }
.cu-grid input.cu-when::-webkit-calendar-picker-indicator {
  opacity: .55; cursor: pointer; padding: 2px; border-radius: 6px;
  transition: opacity .14s ease, background .14s ease; }
.cu-grid input.cu-when::-webkit-calendar-picker-indicator:hover {
  opacity: 1; background: rgba(37, 99, 235, .12); }
@keyframes cu-ping {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .34); }
  100% { box-shadow: 0 0 0 9px rgba(37, 99, 235, 0); }
}
.cu-grid input.cu-ping { animation: cu-ping .55s ease-out; }

.cu-hint { margin-top: 9px; font-size: 12.1px; color: var(--p-mut, #64748b);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cu-hint b { color: var(--p-ink, #0f172a); font-weight: 700; }
.cu-now { border: 1px solid #c7d7f5; background: #eff5ff; color: #1d4ed8;
  font: inherit; font-size: 11.8px; font-weight: 700; cursor: pointer;
  border-radius: 999px; padding: 4px 12px;
  transition: background .14s ease, border-color .14s ease; }
.cu-now:hover { background: #dbe8fe; border-color: #93b4f0; }

/* the orders a cheque settles, each opening in place */
.ord-list { display: grid; gap: 9px; }
.ord-row { border: 1px solid var(--p-line, #e8edf3); border-radius: 13px;
  padding: 11px 14px; }
.ord-h { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; }
.ord-no { font-weight: 800; font-size: 13.6px; letter-spacing: -.2px; }
.ord-b:empty { display: none; }
.ord-kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px;
  margin-top: 11px; padding-top: 11px; font-size: 12.7px;
  border-top: 1px dashed var(--p-line, #e8edf3); }
.ord-kv .k { color: var(--p-mut, #64748b); font-weight: 700;
  font-size: 11.6px; white-space: nowrap; }
.ord-kv .v { font-weight: 600; }

/* ------------------------------------------------- while it is still coming
   A shape where the answer will be. It holds the same room the real card and
   the real rows will take, so nothing jumps when they arrive, and the page
   never shows a person a blank rectangle and calls it loading. */
@keyframes chq-sheen { 100% { background-position-x: -160%; } }
.chq-skel .k, .chq-skel .n, .chq-skel .a, .chq-skel .s, .chq-skel .sk {
  display: block; border-radius: 7px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .16) 32%,
    rgba(255, 255, 255, .34) 50%, rgba(255, 255, 255, .16) 68%);
  background-size: 320% 100%;
  animation: chq-sheen 1.25s linear infinite; }
.chq-card.chq-skel { box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
  opacity: .68; }
.chq-card.chq-skel .k { width: 46%; height: 10px; }
.chq-card.chq-skel .n { width: 34%; height: 25px; margin-top: 6px; }
.chq-card.chq-skel .a { width: 58%; height: 12px; margin-top: 6px; }
.chq-card.chq-skel .s { width: 42%; height: 10px; margin-top: 7px; }
table.chq-skel td { padding: 13px 12px;
  border-bottom: 1px solid var(--p-line, #eef2f7); }
table.chq-skel .sk { height: 11px; width: 100%;
  background: linear-gradient(90deg, #eef2f7 32%, #f8fafc 50%, #eef2f7 68%);
  background-size: 320% 100%; }
table.chq-skel td:first-child .sk { width: 62%; }
table.chq-skel td:last-child .sk { width: 44%; }
@media (prefers-reduced-motion: reduce) {
  .chq-skel .k, .chq-skel .n, .chq-skel .a, .chq-skel .s, .chq-skel .sk {
    animation: none; }
}
.sec.chq-skel .sk { height: 12px; margin: 9px 0; border-radius: 7px;
  background: linear-gradient(90deg, #eef2f7 32%, #f8fafc 50%, #eef2f7 68%);
  background-size: 320% 100%;
  animation: chq-sheen 1.25s linear infinite; }

/* the export sits with the filters because that is what it exports */
.rg-xl { border-color: #bbf7d0 !important; background: #f0fdf4 !important;
  color: #15803d !important; font-weight: 700; }
.rg-xl:hover { background: #dcfce7 !important; border-color: #86efac !important; }
.rg-xl:disabled { opacity: .6; cursor: default; }

/* the handover slip on the cheque profile — the paper that leaves with the
   cheque, shown above the manual controls because when one exists it is the
   answer to "where is this cheque" */
.ho-slip { border: 1px solid #e5e7eb; border-radius: 10px; padding: 11px 12px;
  background: #fafafa; margin-bottom: 11px; }
.ho-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 8px; }
.ho-no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px; font-weight: 700; letter-spacing: .3px; color: #111827; }
.ho-doc { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 2px 0; }
.ho-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: #6b7280; min-width: 132px; }
.ho-dl { font-size: 11.5px; color: #6b7280; }