/* The books screens: Billing, the invoice and the statement, Records and State rules, Reports, Downloads (docs/DESIGN-SYSTEM.md, "The Line, field-grade").
   Every colour, size, radius and motion value is a token from tokens.gen.css; this file holds none of its own. Classes start bk- so no other screen's rule
   reaches them and none of theirs reaches a books screen. It loads after styles.css and the pages-*.css files. */

/* ---------- the page: labelled figures, a row of filters, a full-bleed table, a line under it ---------- */
.bk { min-width: 0; }
/* the figures that open a page: a quiet label over a 600 figure, no tiles, no boxes, no dividers. The 7 px red mark hangs in the gutter beside the number. */
.bk-figs { padding: 4px 0 16px; }
.bk-figs .figs { gap: 8px 40px; align-items: flex-end; }
.bk-figs .fig .l { white-space: nowrap; }
.bk-figs .fig .v { display: flex; align-items: baseline; gap: 6px; height: var(--lh-h2); }
.bk-figs .fig .v.none { font-size: var(--fs-sec); }
.bk-figs .fig .v > .mk { top: 50%; }
@media (max-width: 1400px) { .bk-figs .figs { column-gap: 28px; } }
@media (max-width: 720px) { .bk-figs .fig { max-width: 100%; } .bk-figs .fig .v { flex-wrap: wrap; white-space: normal; height: auto; } .bk-figs .fig .v small { white-space: normal; } }
.bk-n { font-weight: var(--w-regular); color: var(--ink-3); }
.bk-none { color: var(--ink-3); font-weight: var(--w-regular); }
.bk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.bk-bar > .grow { flex: 1; min-width: 0; }
.bk-bar .field { gap: 0; }
.bk-bar .field > .pick-btn, .bk-bar .field > .datepick { width: auto; }
.bk-note { margin: 0 0 12px; max-width: 78ch; color: var(--ink-3); font-size: var(--fs-sec); line-height: var(--lh-sec); }
/* the line under a table: how many are shown of how many, and what they come to */
.bk-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; min-height: 40px; padding: 10px 0; color: var(--ink-3); font-size: var(--fs-sec); line-height: var(--lh-sec); }
.bk-foot b { color: var(--ink); font-weight: var(--w-semibold); }
.bk-foot-r { min-width: 0; }
@media (min-width: 901px) { .bk-foot-r { white-space: nowrap; } }
/* a page that has nothing yet: words and the one next action, no illustration, no card */
.bk-blank { padding: 28px 0 24px; max-width: 60ch; }
.bk-blank h3 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--w-semibold); }
.bk-blank p { color: var(--ink-2); }
/* a form that sits in the page under its own heading: a hairline above, no card around it */
.bk-form { padding: 4px 0 20px; margin-bottom: 16px; border-bottom: 1px solid var(--hair); }
.bk-form > .h2 { margin-bottom: 12px; }
.bk-form .form-grid { max-width: 880px; }
.bk-sec { margin-top: 28px; }
.bk-sec-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.bk-sec-h .grow { flex: 1; min-width: 0; }
.bk-sec-h .h2 { margin: 0; }

/* tables here: a quiet row action shows its edge when the row is pointed at or reached; a status is a dot and ink words */
.bk .btn.xs.q { border-color: transparent; color: var(--ink-2); }
.bk .t tr:hover .btn.xs.q, .bk .t tr:focus-within .btn.xs.q, .bk .btn.xs.q:focus-visible { border-color: var(--edge); color: var(--ink); }
.bk .t .st { color: var(--ink); }
.bk .t td.num b { font-weight: var(--w-semibold); }
.bk .t tr.group .gcount { margin-left: 10px; font-weight: var(--w-regular); color: var(--ink-3); font-size: var(--fs-sec); }
.bk .t tr.group td { border-bottom-color: var(--hair); }
/* the line of totals is a row like the others: no heavy rule above it */
.bk .t tr.total td { font-weight: var(--w-semibold); }
.bk-late-mark { margin-right: 8px; }
/* Who owes: one headline for the late money, the same money by age under it, and the figures that do not move when the list is narrowed */
.bk-owes-head { padding: 4px 0 8px; }
.bk-owes-h { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--w-semibold); color: var(--ink); }
.bk-owes-h .dot { margin-right: 10px; vertical-align: 2px; }
.bk-owes-ages { margin: 4px 0 0; color: var(--ink-2); }
.bk-owes-note { margin: 4px 0 0; max-width: none; color: var(--ink-3); }
.bk-owes-ages b { font-weight: var(--w-semibold); color: var(--ink); }
.bk .t.owes td.num .sub { font-weight: var(--w-regular); }
/* as a stack on a phone, a customer whose late money is all they owe shows it once (the phone app does the same) */
@media screen and (max-width: 720px) { .bk table.t.owes[data-cards] td.same { display: none; } }
/* Reports, a range that billed nothing: the sentence in place of a Billed of $0 */
.bk-billed-none { margin: 0 0 12px; font-weight: var(--w-medium); color: var(--ink); }
/* the toast after a payment is a sentence or two, so it grows to hold them (the base toast is one line high) */
.bk .toast { height: auto; min-height: 36px; padding-top: 4px; padding-bottom: 4px; max-width: calc(100vw - var(--gutter) * 2); }
/* its Undo is a button a person can hit in a hurry: as tall as a control, not as tall as the words */
.bk .toast button { min-height: 40px; padding: 0 12px; }
@media (max-width: 900px) { .bk .toast { bottom: calc(var(--bar-h) + var(--gutter)); } }
.bk-add { margin: 4px 0 0 -10px; }
.bk .more-row { justify-content: flex-start; margin-top: 8px; }
.bk .th-count { margin-left: 8px; font-weight: var(--w-regular); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bk .t td.pick, .bk .t th.pick { width: 36px; padding-right: 0; }

/* Ready to bill: the visits one to a line, the make-the-invoices bar pinned at the foot with a hairline above (no card) */
.bk .visit-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 1px 0; }
.bk .price-it, .bk .void-it { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bk .small-input { width: 8em; height: 28px; }
.bk .void-it .small-input { width: 16em; }
.bk-makebar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 12px calc(var(--gutter) * -1) 0; padding: 12px var(--gutter); background: var(--bg); border-top: 1px solid var(--hair); }
.bk-makebar .field, .bk-makebar .datepick { width: 188px; }
.bk-makebar .grow { padding-bottom: 6px; }
.bk .ready-selbar { display: none; align-items: center; gap: 16px; margin: 0 0 8px; }
@media screen and (max-width: 900px) { .bk-makebar { position: static; margin: 12px 0 0; padding: 10px 0; } }
@media (max-width: 720px) {
  .bk .ready-selbar { display: flex; }
  /* styles.css gives every table in a table-wrap 680px at this width; as a stack it fits the screen, so the amounts are not scrolled off */
  .bk .table-wrap > table.t.ready { min-width: 0; }
  .bk .t.ready thead { display: none; }
  .bk .t.ready, .bk .t.ready tbody { display: block; }
  .bk .t.ready tr { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; border-bottom: 1px solid var(--hair); }
  .bk .t.ready tr:last-child { border-bottom: 0; }
  /* height: auto: a table cell's 44px is a minimum in a table but a cap in a grid, and the address and Add a discount spilled onto the visit line */
  .bk .t.ready td { border-bottom: 0; height: auto; }
  .bk .t.ready td:nth-child(3) { grid-column: 2 / -1; grid-row: 2; padding-top: 0; }
  .bk .t.ready td.pick { align-self: start; padding-top: 12px; }
  .bk-makebar { gap: 8px; }
  .bk-makebar .field, .bk-makebar .datepick { width: 100%; }
  .bk-makebar .grow { flex-basis: 100%; order: -1; padding-bottom: 0; }
  .bk-makebar .btn { flex: 1; }
}
.bk .sort-select { align-items: center; }
.bk .sort-select .bk-sort-l { color: var(--ink-3); }
.bk .sort-select .pick-btn { width: auto; }

/* the payment, credit and refund forms: fields in a grid, the "how" as a segmented control, one filled button */
.pay-form .seg { flex-wrap: wrap; justify-self: start; max-width: 100%; }
/* how they paid: five choices, none ever hidden. The row wraps at any width and each choice is its own small button, so a wrapped
   second line is whole (the .seg group clips what wraps: a fixed height and overflow: hidden cut "Other" at 1440 wide) */
.pay-methods, .pay-puton { display: flex; flex-wrap: wrap; gap: 6px; height: auto; overflow: visible; border: 0; border-radius: 0; max-width: 100%; }
.pay-methods button, .pay-puton button { height: var(--h-control-sm); border: 1px solid var(--edge); border-radius: var(--r-2); white-space: nowrap; flex: none; }
.pay-methods button + button, .pay-puton button + button { border-left: 1px solid var(--edge); }
@media (max-width: 900px) { .pay-methods button, .pay-puton button { height: 40px; } }
.bk .pay-form .notice { margin-bottom: 12px; }
.bk .find.in-form { margin: 0; max-width: 420px; }

/* ---------- a skeleton shaped like what is coming: the figures, the filters, the table at its real row height ---------- */
.bk-sk-in.wait { visibility: hidden; }
.bk-sk-figs { display: flex; flex-wrap: wrap; gap: 8px 40px; padding: 4px 0 16px; }
.bk-sk-fig { display: flex; flex-direction: column; gap: 6px; }
.bk-sk-fig .skel-b:last-child { height: 24px !important; }
.bk-sk-bar { display: flex; gap: 8px; margin-bottom: 12px; }
.bk-sk-head, .bk-sk-row { display: grid; grid-template-columns: var(--cols); column-gap: 16px; align-items: center; padding: 0 12px; border-bottom: 1px solid var(--hair); }
.bk-sk-head { height: 32px; }
.bk-sk-row { height: var(--h-row); }
.bk-sk .skel-b { border-radius: var(--r-1); }

/* ---------- blocks that sit in a column or a section: a hairline above, no card ---------- */
.bk-block, .bk-side-sec { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--hair); min-width: 0; }
.bk-block { margin-bottom: 4px; }
.bk .plan-charge-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; width: 100%; margin-top: 6px; }
.bk .plan-charge .btn.xs.q { margin-left: -4px; }

/* ---------- the invoice: the paper the customer gets, in a well, beside the money around it ---------- */
/* the page runs edge to edge (the well and the side column fill the pane under the bar) */
.bk-inv { margin: -20px calc(var(--gutter) * -1) -64px; }
.bk-inv-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 392px; align-items: stretch; min-height: calc(100vh - var(--h-bar)); }
.bk-well { background: var(--side); border-right: 1px solid var(--hair); padding: 32px var(--gutter) 48px; display: flex; justify-content: center; align-items: flex-start; min-width: 0; }
.bk-inv-side { padding: 24px var(--gutter) 40px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bk-inv-side > .bk-side-sec:first-of-type { border-top: 0; }
.bk-inv-acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
/* a document is paper in either mode: a light sheet, and in dark a sheet a little below the light one so the room is not lit. Every colour is a token. */
.bk .paper { --p-bg: var(--paper); --p-ink: var(--ink); --p-ink-2: var(--ink-2); --p-ink-3: var(--ink-3); --p-hair: var(--hair);
  width: 680px; max-width: 100%; background: var(--p-bg); color: var(--p-ink); border: 1px solid var(--p-hair); padding: 44px 52px 36px; overflow-wrap: anywhere; }
:root[data-scheme="dark"] .bk .paper { --p-bg: color-mix(in srgb, var(--paper) 90%, var(--bg)); --p-ink: var(--on-saguaro); --p-ink-2: color-mix(in srgb, var(--on-saguaro) 84%, var(--p-bg)); --p-ink-3: color-mix(in srgb, var(--on-saguaro) 66%, var(--p-bg));
  --p-hair: color-mix(in srgb, var(--on-saguaro) 18%, var(--p-bg)); border-color: transparent; box-shadow: 0 0 0 1px var(--edge); }
.bk .paper a { color: inherit; text-decoration: none; }
@media (hover: hover) { .bk .paper a:hover { text-decoration: underline; } }
.bk .paper .w6 { font-weight: var(--w-semibold); }
.bk .paper .p-co { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--w-semibold); letter-spacing: var(--ls-h2); }
.bk .paper .p-sub { color: var(--p-ink-2); font-size: var(--fs-sec); line-height: var(--lh-sec); }
.bk .paper .p-head { display: flex; justify-content: space-between; gap: 32px; align-items: flex-start; }
.bk .paper .p-head > div:first-child .p-sub:first-of-type { margin-top: 4px; }
.bk .paper .p-no { text-align: right; }
.bk .paper .p-no .t { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--w-semibold); }
.bk .paper .p-meta { display: grid; grid-template-columns: auto auto; gap: 2px 16px; justify-content: end; margin: 8px 0 0; font-size: var(--fs-sec); line-height: var(--lh-sec); }
.bk .paper .p-meta dt { color: var(--p-ink-3); text-align: right; }
.bk .paper .p-meta dd { margin: 0; text-align: right; font-weight: var(--w-medium); }
.bk .paper .p-to { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--p-hair); }
.bk .paper .inv-to { display: grid; gap: 1px; }
.bk .paper .p-lbl { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--w-medium); color: var(--p-ink-3); margin-bottom: 2px; }
.bk .paper .p-lines { margin-top: 28px; width: 100%; border-collapse: collapse; font-size: var(--fs-body); line-height: var(--lh-body); }
.bk .paper .p-lines th { text-align: left; font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--w-medium); color: var(--p-ink-3); padding: 0 0 6px; border-bottom: 1px solid var(--p-ink); }
.bk .paper .p-lines td { padding: 10px 0; border-bottom: 1px solid var(--p-hair); vertical-align: top; }
.bk .paper .p-lines .r, .bk .paper .p-lines th.r { text-align: right; }
.bk .paper .p-lines td:first-child, .bk .paper .p-lines th:first-child { padding-right: 12px; width: 76px; }
.bk .paper .p-lines td small { display: block; font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--p-ink-3); }
.bk .paper .p-lines .p-small { display: none; }
.bk .paper .p-lines a.visit-link { text-decoration: none; }
@media (hover: hover) { .bk .paper .p-lines a.visit-link:hover { text-decoration: underline; } }
.bk .paper .inv-discount td { color: var(--p-ink-2); }
.bk .paper .p-tot { margin: 12px 0 0 auto; width: 300px; max-width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; font-size: var(--fs-body); line-height: var(--lh-body); }
.bk .paper .p-tot dt { color: var(--p-ink-2); }
.bk .paper .p-tot dd { margin: 0; text-align: right; }
.bk .paper .p-tot .due { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--p-ink); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--w-semibold); letter-spacing: var(--ls-h2); color: var(--p-ink); }
.bk .paper .p-note { margin: 28px 0 0; color: var(--p-ink-2); font-size: var(--fs-sec); line-height: var(--lh-sec); max-width: 52ch; }
.bk .paper .p-tear { margin: 32px -52px 16px; border-top: 1.5px dashed var(--p-hair); position: relative; height: 0; }
.bk .paper .p-tear span { position: absolute; top: -9px; left: 52px; background: var(--p-bg); padding-right: 10px; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--p-ink-3); }
.bk .paper .p-stub { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--p-ink-2); }
.bk .paper .p-stub b { color: var(--p-ink); font-size: var(--fs-h3); line-height: var(--lh-h3); }
@media print {
  .bk-inv { margin: 0; }
  .bk-inv-wrap { display: block; min-height: 0; }
  .bk-well { background: none; border: 0; padding: 0; display: block; }
  .bk .paper, :root[data-scheme="dark"] .bk .paper { --p-bg: var(--paper); --p-ink: var(--ink); --p-ink-2: var(--ink-2); --p-ink-3: var(--ink-3); --p-hair: var(--hair); width: auto; border: 0; box-shadow: none; padding: 0; }
  .bk .paper .p-tear { margin-left: 0; margin-right: 0; }
  .bk .paper .p-tear span { left: 0; }
}
@media (max-width: 1100px) { .bk-inv-wrap { grid-template-columns: minmax(0, 1fr) 340px; } .bk-well { padding: 24px 16px 40px; } .bk .paper { padding: 32px 32px 28px; } .bk .paper .p-tear { margin-left: -32px; margin-right: -32px; } .bk .paper .p-tear span { left: 32px; } }
@media (max-width: 900px) {
  .bk-inv { margin: 0 -16px; }
  .bk-inv-wrap { display: flex; flex-direction: column-reverse; }
  .bk-well { border-right: 0; border-top: 1px solid var(--hair); padding: 16px 12px 24px; }
  .bk-inv-side { padding: 16px 16px 8px; }
  .bk .paper { padding: 24px 18px 20px; }
  .bk .paper .p-head { flex-direction: column; gap: 16px; }
  .bk .paper .p-no, .bk .paper .p-meta dt, .bk .paper .p-meta dd { text-align: left; }
  .bk .paper .p-meta { justify-content: start; }
  .bk .paper .p-tear { margin-left: -18px; margin-right: -18px; }
  .bk .paper .p-tear span { left: 18px; }
  .bk .paper .p-lines .p-d, .bk .paper .p-lines .p-q, .bk .paper .p-lines .p-r { display: none; }
  .bk .paper .p-lines .p-small { display: block; }
  .bk .paper .p-lines td:first-child, .bk .paper .p-lines th:first-child { width: auto; padding-right: 0; }
  .bk .paper .p-tot { width: 100%; }
}

/* the money beside the paper: what is owed, the payments on it, and what happened to it */
.bk-owed { display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px; }
.bk-owed .l { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--w-medium); color: var(--ink-3); }
.bk-owed .v { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 32px; line-height: 38px; letter-spacing: -.02em; font-weight: var(--w-semibold); }
.bk-owed .v .mk { width: 9px; height: 9px; }
.bk-owed .why { font-weight: var(--w-medium); color: var(--ink-2); }
.bk-owed .why.bad { color: var(--red-text); }
.bk-owed .nt { margin-top: 4px; color: var(--ink-3); font-size: var(--fs-sec); line-height: var(--lh-sec); }
.bk-inv-side .sc-h { display: flex; align-items: baseline; gap: 8px; }
.bk-inv-side .sc-h .n { color: var(--ink-3); font-size: var(--fs-sec); }
.bk-mlist { display: grid; }
.bk-mlist li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: center; min-height: 40px; border-top: 1px solid var(--hair); font-size: var(--fs-sec); line-height: var(--lh-sec); }
.bk-mlist li:first-child { border-top: 0; }
.bk-mlist .d { color: var(--ink-3); }
.bk-mlist .amt { font-size: var(--fs-body); font-weight: var(--w-semibold); text-align: right; }
.bk-mlist .more { grid-column: 1 / -1; padding-bottom: 8px; }
.bk-mlist .act { min-width: 0; }
.tl { position: relative; }
.tl-i { display: grid; grid-template-columns: 52px 18px minmax(0, 1fr); column-gap: 8px; padding-bottom: 14px; position: relative; font-size: var(--fs-sec); line-height: var(--lh-sec); }
.tl-i .d { color: var(--ink-3); text-align: right; }
.tl-i .nd { position: relative; display: flex; justify-content: center; }
.tl-i .nd::before { content: ''; position: absolute; top: 12px; bottom: -14px; width: 2px; background: var(--saguaro); }
.tl-i:last-child .nd::before { display: none; }
.tl-i .nd i { position: relative; z-index: 1; margin-top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--saguaro); box-shadow: 0 0 0 3px var(--bg); }
.tl-i .nd i.late { background: var(--red); }
.tl-i b { font-weight: var(--w-medium); }
.tl-i.is-late .nd i { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--red), 0 0 0 3px var(--bg); }

/* ---------- the statement: the same paper, on a well that runs the pane's width, with its own controls above ---------- */
.bk-stmt .bk-well-stmt { margin: 8px calc(var(--gutter) * -1) -64px; border-right: 0; border-top: 1px solid var(--hair); padding: 32px var(--gutter) 64px; min-height: calc(100vh - var(--h-bar) - 120px); }
.bk .paper .p-scroll { overflow-x: auto; }
.bk .paper .statement-lines td:first-child, .bk .paper .statement-lines th:first-child,
.bk .paper .statement-open-invoices td:first-child, .bk .paper .statement-open-invoices th:first-child { width: auto; white-space: nowrap; }
.bk .paper .statement-lines td:nth-child(2) { min-width: 14em; }
.bk .paper .statement-void td { color: var(--p-ink-3); }
.bk .paper .statement-closing { margin-top: 16px; }
.bk .paper .statement-ahead { margin-top: 6px; }
.bk .paper .statement-open-invoices { margin-top: 0; }
@media print {
  .bk-stmt .bk-well-stmt { margin: 0; padding: 0; border: 0; min-height: 0; }
}
@media (max-width: 900px) { .bk-stmt .bk-well-stmt { margin: 8px -16px -24px; padding: 16px 12px 32px; } }

/* ---------- Records: filters, the application register, State rules, the termite reports ---------- */
.bk-search { display: inline-flex; align-items: center; gap: 8px; height: var(--h-control); width: 300px; max-width: 100%; padding: 0 10px; border: 1px solid var(--edge-strong); border-radius: var(--r-2); background: var(--bg); color: var(--ink-3);
  transition: border-color var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease); }
.bk-search:focus-within { border-color: var(--saguaro); box-shadow: 0 0 0 2px color-mix(in srgb, var(--saguaro) 28%, transparent); }
.bk-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); font-size: var(--fs-body); outline: 0; }
.bk-search input::placeholder { color: var(--ink-3); }
.bk-checks { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.bk-checks .check { font-weight: var(--w-regular); color: var(--ink-2); }
/* one visit's products: the second and later lines sit under the first with the date, customer and applicator left to it */
.bk .t.records tr.cont td { border-top: 0; padding-top: 0; }
.bk .t.records tr.cont td { height: 32px; }
.bk .t.records tr:has(+ tr.cont) td { border-bottom-color: transparent; }
.bk .t.records .mono { color: var(--ink-3); }
.bk .t .st .dot.amber { margin-top: 1px; }
.dot.half { position: relative; width: 8px; height: 8px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-2); overflow: hidden; }
.dot.half::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: var(--ink-2); }

/* State rules: the ring, the sentence and the three counts; the register under it; an open row says the rest */
.bk-reg-head { display: flex; align-items: center; gap: 20px; padding: 4px 0 16px; }
.bk-reg-head .bk-figs { padding: 0; margin-left: auto; }
.bk-reg-t { min-width: 0; max-width: 70ch; }
.bk-reg-t p { margin-top: 2px; color: var(--ink-2); }
.bk-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; color: var(--ink-3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
.bk-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bk-legend i { width: 14px; height: 0; display: inline-block; }
.bk-legend i.k { border-top: 5px solid var(--saguaro); }
.bk-legend i.h { border-top: 2px solid var(--edge-strong); }
.rbadge { position: relative; width: 76px; height: 76px; flex: none; display: grid; place-items: center; }
.rbadge svg { position: absolute; inset: 0; }
.rbadge .k { fill: none; stroke: var(--saguaro); stroke-width: 6; stroke-linecap: butt; }
.rbadge .h { fill: none; stroke: var(--edge-strong); stroke-width: 2; stroke-linecap: butt; }
.rbadge .p-n { position: relative; font-size: 20px; line-height: 1; font-weight: var(--w-semibold); letter-spacing: -.01em; }
.rbadge .p-n small { font-size: var(--fs-meta); font-weight: var(--w-regular); color: var(--ink-3); }
.bk .rules-t td { vertical-align: top; }
.bk .rules-t .bk-rowbtn { display: inline; text-align: left; padding: 0; border: 0; background: none; font: inherit; font-weight: var(--w-semibold); cursor: pointer; }
.bk .rules-t tr.open > td { border-bottom-color: transparent; }
.bk .rules-t tr.rules-open > td { padding-top: 0; }
.bk .rules-t .rules-open-in { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; }
.expand { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 0 16px; font-size: var(--fs-sec); line-height: var(--lh-sec); max-width: 90ch; margin: 0; }
.expand dt { color: var(--ink-3); padding: 4px 0; }
.expand dd { margin: 0; padding: 4px 0; color: var(--ink); }
@media (min-width: 901px) {
  .bk .rules-t td:nth-child(2) { min-width: 240px; max-width: 520px; }
  .bk .rules-t td:nth-child(4) { min-width: 220px; }
}
@media (max-width: 900px) { .bk-reg-head { flex-wrap: wrap; } .bk-reg-head .bk-figs { margin-left: 0; } .expand { grid-template-columns: 1fr; } .expand dt { padding-bottom: 0; } }

/* the termite reports to the state, the inspection reports to the qualifying party and the treatment proposals: a section each, a hairline above, the form code gone */
.bk .tarf-form { border-top: 1px solid var(--hair); padding-top: 16px; }
.bk .tarf-form + .tarf-form { margin-top: 20px; }
.bk .tarf-form .table-wrap { margin-top: 12px; }
.bk .tarf-fields { display: grid; grid-template-columns: minmax(10em, max-content) 1fr; gap: 4px 16px; margin: 4px 0 10px; font-size: var(--fs-sec); line-height: var(--lh-sec); }
.bk .tarf-fields dt { color: var(--ink-3); }
.bk .tarf-fields dd { margin: 0; }
.bk .tarf-asks td { background: var(--side); }
.bk .tarf-fixes { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); max-width: 760px; }
.bk .tarf-fixes ul { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; }
.bk .tarf-fixes li { display: grid; gap: 6px; font-size: var(--fs-sec); }
.bk .tarf-fix-do { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bk .tarf-fix-do .input { max-width: 420px; }

/* ---------- Company records: the strip of three, the stored files, the incident write-up ---------- */
.bk-segl { margin: 0 0 12px; }
.bk-segl > a { display: inline-flex; align-items: center; padding: 0 14px; min-width: 28px; color: var(--ink-2); font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); text-decoration: none; transition: background-color var(--dur-state) var(--ease); }
.bk-segl > a + a { border-left: 1px solid var(--edge); }
.bk-segl > a[aria-current="page"] { background: var(--sel); color: var(--ink); }
@media (hover: hover) { .bk-segl > a:hover:not([aria-current="page"]) { background: var(--hover); } }
.bk-count { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 8px; color: var(--ink-2); }
.bk-docs { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--hair); min-width: 0; }
.bk-docs > .row { justify-content: space-between; }
.bk-inc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 4px; }
.bk-inc-head h1 { margin: 0; }
.bk-inc-sheet { border-top: 1px solid var(--hair); }
.bk-dt-in { display: flex; gap: 8px; align-items: center; }
.bk-dt-in .input[type="time"] { width: 120px; }
.bk-dt-in .datepick { width: 188px; }
.bk-form .row { align-items: center; }
.bk .proof-kind { margin-bottom: 14px; }
.bk-form .supply-form .form-grid { align-items: start; }
.bk-form.supply-form .prod-check { margin-top: 24px; }
@media (max-width: 720px) { .bk-dt-in { flex-wrap: wrap; } .bk-segl { display: flex; } .bk-segl > a { flex: 1; justify-content: center; min-height: 36px; } }

/* ---------- Reports: the range in numbers as labelled figures, the open one underlined; its detail under it; no tiles ---------- */
.bk-range { color: var(--ink-3); font-size: var(--fs-sec); }
.bk-rtabs { margin: 0 0 8px; }
.bk-rtab-row { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--hair); }
.bk-rtab-under { margin: 8px 0 0; }
.bk-rtab { appearance: none; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; flex: 1 1 150px; padding: 8px 16px 12px 0; margin-right: 16px; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--ink); }
.bk-rtab .l { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--w-medium); color: var(--ink-3); }
.bk-rtab .v { position: relative; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-rtab .v .mk { position: absolute; left: -12px; top: 50%; margin-top: -3px; }
.bk-rtab .n { font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--ink-3); }
.bk-rtab .n.warn { color: var(--amber-text); }
/* Reports and Records read at 14 px and up: the column captions, the sort arrows, the EPA numbers and the chart's words (the walkers' 13 px leftovers) */
.bk-read .t th, .bk-read .sort-btn, .bk-read .sort-arrow, .bk-read .t .mono, .bk-read .bk-rtab .l, .bk.bk-read .bar-n, .bk.bk-read .bar-day, .bk.bk-read .bars-top { font-size: var(--fs-sec); line-height: var(--lh-sec); }
.bk-rtab.on::after { content: ''; position: absolute; left: 0; right: 16px; bottom: -1px; height: 2px; background: var(--ink); }
.bk-rtab:not(.on) .v { color: var(--ink-2); }
@media (hover: hover) { .bk-rtab:not(.on):hover .l { color: var(--ink-2); } .bk-rtab:not(.on):hover .v { color: var(--ink); } }
.bk-rtab:focus-visible { outline-offset: 0; }
.bk-rtab-panel { padding: 16px 0 8px; }
.bk-rtab-panel .bk-sec-h { margin-bottom: 12px; }
.bk-rtab-panel .bk-figs { padding-top: 0; }
.bk .rep-sec { border-top: 0; padding-top: 12px; }
.bk .rep-sec .tech-find { margin-bottom: 8px; }
.bk .summary { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 2px 0 16px; color: var(--ink-2); }
.bk .summary b { color: var(--ink); }
.bk .money-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 8px 32px; align-items: start; }
.bk .money-grid.two { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.bk-latest > .h3 { margin: 0 0 4px; font-size: var(--fs-sec); color: var(--ink-3); font-weight: var(--w-medium); }
.bk-latest-i { padding: 8px 0; border-top: 1px solid var(--hair); }
.bk .notes-list { display: grid; }
.bk .note-row { display: flex; gap: 14px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--hair); }
/* stops by day: done in the line's green, what was booked as an outline, the open day marked; a hairline for the top */
.bk .daychart .bars { display: flex; align-items: stretch; gap: clamp(2px, 0.8vw, 10px); height: 170px; margin-top: 10px; touch-action: pan-y; }
.bk .bar-col { flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: 18px minmax(0, 1fr) 30px; justify-items: center; }
.bk .bar-n { font-size: var(--fs-meta); font-weight: var(--w-medium); color: var(--ink-3); white-space: nowrap; align-self: end; }
.bk .bar-track { align-self: end; width: min(60%, 28px); min-height: 2px; display: flex; align-items: flex-end; overflow: hidden; border: 1.5px solid var(--edge-strong); border-radius: var(--r-1) var(--r-1) 0 0; background: transparent; }
.bk .bar-fill { width: 100%; background: var(--saguaro); }
.bk .bar-day { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-3); text-align: center; padding-top: 4px; white-space: nowrap; }
.bk .bar-col.on .bar-track { border-color: var(--ink); }
.bk .bar-col.on .bar-n, .bk .bar-col.on .bar-day, .bk .bar-col.today .bar-day { color: var(--ink); font-weight: var(--w-semibold); }
.bk .bars-wrap { position: relative; padding-right: 52px; }
.bk .bars-wrap::before { content: ''; position: absolute; left: 0; right: 44px; top: 28px; border-top: 1px dashed var(--edge); pointer-events: none; }
.bk .bars-top { position: absolute; right: 0; top: 20px; font-size: var(--fs-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bk .chart-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; }
.bk .chart-key span { display: inline-flex; align-items: center; gap: 6px; }
.bk .chart-key .sw { display: inline-block; width: 18px; height: 12px; border-radius: var(--r-1); border: 1.5px solid var(--edge-strong); }
.bk .chart-key .sw.done { background: var(--saguaro); border-color: var(--saguaro); }
@media (max-width: 720px) {
  .bk-rtab { flex: 1 1 40%; margin-right: 8px; }
  .bk .daychart .bar-col { grid-template-rows: 30px minmax(0, 1fr) 30px; }
  .bk .daychart .bar-n { white-space: normal; text-align: center; line-height: 1.1; }
  .bk .bars-wrap::before { top: 40px; }
  .bk .bars-top { top: 32px; }
}

/* Settings, Your data: Download everything (views/downloads.js); Supplies' forms (views/supplies.js) */
.dl-box { display: grid; gap: 12px; }
.dl-range { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.dl-pick { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
.dl-dates { display: flex; flex-wrap: wrap; gap: 12px; }
.dl-how { margin: 0; }
.dl-progress { display: grid; gap: 6px; }
.dl-progress progress { width: 100%; height: 8px; accent-color: var(--saguaro); }
.dl-progress p { margin: 0; }
.dl-outcome { display: grid; gap: 8px; border-top: 1px solid var(--hair); padding-top: 12px; }
.dl-outcome p { margin: 0; }
.dl-failed { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: var(--fs-sec); color: var(--ink-2); }
.dl-log-h { margin: 24px 0 8px; }
.supply-form .form-grid { align-items: start; }
.supply-form .prod-check { margin-top: 24px; }
@media (max-width: 720px) {
  .bk-sk-bar { flex-wrap: wrap; }
  .bk-sk-bar .skel-b { max-width: 100%; }
  .bk-sk-head, .bk-sk-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bk-sk-head > :nth-child(n + 3), .bk-sk-row > :nth-child(n + 3) { display: none; }
  .bk-sk-row { height: 56px; }
}

/* ---------- review fixes ---------- */
/* the State rules headline: a token size and weight, with room between its lines */
.bk-reg-t h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--w-semibold); }
/* the termite reports on Applications: one line under the figures, the whole of it is on the Termite reports tab */
.bk .tarf-form.bk-tarf-line { border-top: 0; padding: 0; margin: 0 0 12px; }
.bk-tarf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: var(--h-control); }
.bk-tarf-row .st b { font-weight: var(--w-semibold); }
.bk-tarf-row .grow { flex: 1; min-width: 0; }
.bk-tarf-line .notice { margin-top: 8px; }
/* Records' five tabs go on two lines on a phone: tight, so the gap between the rows is not a band */
@media (max-width: 720px) { .topbar-tabs.wraps { row-gap: 0; } .topbar-tabs.wraps a { min-height: 36px; padding: 6px 0 8px; } }
/* on a phone the 7 px mark stands in the line before the figure, inside the 16 px gutter, not hung outside it */
@media (max-width: 720px) { .bk-figs .fig .v > .mk { position: static; margin: 0 2px 0 0; align-self: center; } }
/* a quiet button under a cell's words starts at the words' edge (its 10 px of padding hangs left) */
.bk .tarf-form td > .btn.xs.q { margin-left: -10px; }
/* the invoice's "More" menu: the dots with the word, wide enough to tap and not a stray bit of punctuation */
.row-menu .menu-dots.has-text { width: auto; min-width: 0; height: auto; min-height: 36px; padding: 0 12px; gap: 6px; }
@media (pointer: coarse) { .row-menu .menu-dots.has-text { min-height: 44px; } }
.cx-email { margin: 2px 0 0; color: var(--ink-2); font-size: var(--fs-sec); line-height: var(--lh-sec); }
/* the customer page's Money panel is narrow: a long status ("38 days late, $1,325 left") wraps under the amount, and the date and the number keep one line each */
.money-panel a.money-row { flex-wrap: wrap; }
.money-panel a.money-row > span:not(.grow):not(.money-state) { white-space: nowrap; }
.money-panel a.money-row > :last-child { margin-left: auto; }